添加设备修改

src/pages/home/film/index.tsx

@@ -52,7 +52,7 @@ class Device extends Component {
     return (
       <AtTabs current={current} tabList={tabList} onClick={this.changePage} swipeable={false}>
         <AtTabsPane current={current} index={0}>
-          <View style={{ height: `${windowHeight + 70}px` }}>
+          <View style={{ height: `${windowHeight + 43}px` }}>
             <FilmList height={windowHeight} />
           </View>
         </AtTabsPane>

src/pages/home/film/schedule_add/components/device/index.scss

@@ -42,7 +42,9 @@
 
     .enter {
       display: inline-block;
-      width: 150px;
+      width: 350px;
+      background: #ff9110;
+      color: white;
     }
 
     padding: 0 20px;
@@ -84,6 +86,35 @@
     }
   }
 
+  .device-tab-container {
+    display: flex;
+    font-size: 38px;
+    padding: 10px 0;
+
+    .device-tab-item {
+      position: relative;
+      width: 50%;
+      text-align: center;
+    }
+
+    .device-tab-item-word {
+      position: relative;
+      padding-right: 40px;
+    }
+
+    .triangle {
+      position: absolute;
+      top: 10px;
+      right: -20px;
+      // margin-top: 10px;
+      height: 0;
+      border: 20px solid transparent;
+      width: 0;
+      border-top-color: #333;
+      box-sizing: border-box;
+    }
+  }
+
   .at-list__item-container {
     .at-list__item-extra {
       flex: 0 0 55px;

src/pages/home/film/schedule_add/components/device/index.tsx

@@ -25,9 +25,11 @@ type PageState = {
   showModal: boolean
   groupList: any[]
   list: any[]
+  allList: any[]
   activeIndex: number
   allCount: string
   cId: string
+  TabIndex: 0
 }
 
 type IProps = PageStateProps & PageDispatchProps & PageOwnProps
@@ -55,7 +57,9 @@ class DeviceSelect extends Component {
       activeIndex: 0,
       searchName: '',
       list: [],
-      allCount: ''
+      allCount: '',
+      TabIndex: 0,
+      allList: []
     }
     this.updateBind = this.updateBind.bind(this)
     this.changeAllCheck = this.changeAllCheck.bind(this)
@@ -91,10 +95,12 @@ class DeviceSelect extends Component {
 
   getData(name?: string | '') {
     const groupId = this.state.groupList[this.state.activeIndex]['equipmentGroupId']
+    const { allCount } = this.state
     api.common.getGroupDevice(groupId, name).then(res => {
-      if (!groupId) {
+      if (!groupId && !allCount) {
         this.setState({
-          allCount: res.length
+          allCount: res.length,
+          allList: res
         })
       }
       this.setState({
@@ -175,7 +181,8 @@ class DeviceSelect extends Component {
      */
     this.setState(
       {
-        activeIndex: index
+        activeIndex: index,
+        TabIndex: 0
       },
       () => {
         this.getData(this.state.searchName)
@@ -267,21 +274,36 @@ class DeviceSelect extends Component {
   }
 
   render() {
-    const { checked, showModal, groupList, list, activeIndex, allCount } = this.state
+    const {
+      checked,
+      showModal,
+      groupList,
+      list,
+      allList,
+      activeIndex,
+      allCount,
+      TabIndex,
+      searchName
+    } = this.state
     const { size } = checked
     let items = groupList.map(item => {
       if (item.equipmentGroupName === '全部') {
-        return item.equipmentGroupName + ` (${allCount})`
+        return item.equipmentGroupName + ` (${allList.length})`
       }
       return item.equipmentGroupName + ` (${item.equipmentCount})`
     })
+    const hasAllList = allList.filter(item => {
+      if (checked.has(item.equipmentId) && item.equipmentName.indexOf(searchName.trim()) !== -1) {
+        return item
+      }
+    })
     return (
       <View className="device-bind">
         <View className="search-bar-container">
-          <View className="search-bar-container-left" onClick={this.showModalView}>
+          {/* <View className="search-bar-container-left" onClick={this.showModalView}>
             <Text>{items[activeIndex]}</Text>
             <Text className="triangle" />
-          </View>
+          </View> */}
           <Input
             className="search-bar-container-input"
             placeholder="输入设备名称进行搜索"
@@ -289,7 +311,25 @@ class DeviceSelect extends Component {
             type="text"
           />
         </View>
+        <View className="device-tab-container">
+          <View className="device-tab-item" onClick={this.showModalView}>
+            <Text className="device-tab-item-word">
+              {items[activeIndex]}
+              <Text className="triangle" />
+            </Text>
+          </View>
+          <View
+            className="device-tab-item"
+            onClick={() => {
+              this.setState({ TabIndex: 1 })
+            }}
+          >
+            已选设备({size})
+          </View>
+        </View>
         <View className="device-bind-scroll">
+          {TabIndex === 0 ? (
+            // 0 展示全部 1 展示已选择设备
             <ScrollView className="device-bind-scroll-view">
               {list.map(item => (
                 <View key={item.equipmentId}>
@@ -306,10 +346,30 @@ class DeviceSelect extends Component {
                 </View>
               ))}
             </ScrollView>
+          ) : (
+            <ScrollView className="device-bind-scroll-view">
+              {hasAllList.map(item => {
+                return (
+                  <View key={item.equipmentId}>
+                    <Label className="device-bind-item" onClick={() => this.changeItem(item)}>
+                      <Checkbox
+                        value=""
+                        className="device-bind-item-checkbox"
+                        checked={checked.has(item.equipmentId)}
+                      />
+                      <View className="device-bind-item-info">
+                        <DeviceItem {...item} />
+                      </View>
+                    </Label>
+                  </View>
+                )
+              })}
+            </ScrollView>
+          )}
         </View>
         <View className="device-bind-bottom-bar">
           <Text className="all" onClick={this.changeAllCheck}>
-            全选，共选择{size}台
+            全选
           </Text>
           <Button className="enter" onClick={this.updateBind}>
             确定

src/pages/home/film/schedule_add/index.scss

@@ -38,7 +38,7 @@
       border: 1px solid #eee;
       text-align: center;
       color: white;
-      background: green;
+      background: #ff9110;
     }
   }
 }