更改修改设备逻辑

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

 import api from '@/api/index'
 import { ComponentClass } from 'react'
-import { connect } from '@tarojs/redux'
 import { showMyToast } from '@/common/utils'
 import DeviceItem from '@/conpoments/device_item'
-import { getFilmList } from '@/actions/asyncCounter'
 import Taro, { Component, Config } from '@tarojs/taro'
 import { View, Text, ScrollView, Button, Checkbox, Label, Input } from '@tarojs/components'
 import { AtDrawer } from 'taro-ui'
@@ -15,18 +13,18 @@ type PageStateProps = {
   count: number
 }
 
-type PageDispatchProps = {
-  getFilmListData: (page: number) => void
-}
+type PageDispatchProps = {}
 
 type PageOwnProps = {}
 
 type PageState = {
   page: number
   filmId: string
+  searchName: string
   checked: Set<string>
   showModal: boolean
   groupList: any[]
+  list: any[]
   activeIndex: number
 }
 
@@ -37,17 +35,6 @@ interface DeviceSelect {
   state: PageState
 }
 
-@connect(
-  ({ counter }) => {
-    const { list, count } = counter.filmData
-    return { list, count }
-  },
-  dispatch => ({
-    getFilmListData(page: number) {
-      dispatch(getFilmList(page))
-    }
-  })
-)
 class DeviceSelect extends Component {
   config: Config = {
     navigationBarTitleText: '设备管理'
@@ -61,12 +48,15 @@ class DeviceSelect extends Component {
       page: 1,
       checked: new Set(),
       showModal: false,
-      groupList: [],
-      activeIndex: 0
+      groupList: [{ equipmentGroupName: '全部', equipmentGroupId: '', equipmentCount: 0 }],
+      activeIndex: 0,
+      searchName: '',
+      list: []
     }
     this.updateBind = this.updateBind.bind(this)
     this.changeAllCheck = this.changeAllCheck.bind(this)
     this.showModalView = this.showModalView.bind(this)
+    this.onItemClick = this.onItemClick.bind(this)
     this.setState({
       checked: new Set(),
       showTempalte: 'HORIZONTAL'
@@ -90,13 +80,39 @@ class DeviceSelect extends Component {
   componentWillMount() {
     this.getData()
     this.getGroupList()
+    this.getCDetail()
   }
 
-  getData() {
-    const { page } = this.state
-    this.props.getFilmListData(page)
+  getData(name?: string | '') {
+    const groupId = this.state.groupList[this.state.activeIndex]['equipmentGroupId']
+    api.common.getGroupDevice(groupId, name).then(res => {
+      this.setState({
+        list: res || []
+      })
+    })
+  }
+  getCDetail() {
+    /**
+     * 获取日程详情
+     */
+    const { cId } = this.$router.params
+    cId &&
+      api.common.getScheduleDetail(cId).then(res => {
+        console.log(res)
+        const { equipmentInfos } = res
+        let arr = equipmentInfos.map(item => {
+          return item.equipmentId
+        })
+        this.setState({
+          checked: new Set(arr)
+        })
+      })
   }
+
   getGroupList() {
+    /**
+     * 获取分组列表
+     */
     api.common.getGroupList().then(res => {
       this.setState({
         groupList: [{ equipmentGroupName: '全部', equipmentGroupId: '', equipmentCount: 0 }].concat(
@@ -126,70 +142,127 @@ class DeviceSelect extends Component {
     })
   }
   onItemClick(index) {
-    console.log(index)
-    this.setState({
+    /**
+     * 子项被点击
+     */
+    this.setState(
+      {
         activeIndex: index
-    })
+      },
+      () => {
+        this.getData(this.state.searchName)
+      }
+    )
   }
   showModalView() {
     this.setState({
       showModal: true
     })
   }
+  searchName({ target }) {
+    console.log(target.value)
+    this.setState({
+      searchName: target.value
+    })
+    this.getData(target.value)
+  }
+
   async updateBind() {
-    const { checked } = this.state
-    const { list } = this.props
+    // 更新设备绑定
+    const { checked, list } = this.state
+    const { cId, fId } = this.$router.params
     let checkedArr: any = []
+    const equipmentsIds = []
+    const equipmentTopicList = []
     list.map(item => {
       if (checked.has(item.equipmentId)) {
         checkedArr.push(item)
+        if (cId) {
+          equipmentsIds.push(item.equipmentId)
+          equipmentTopicList.push(item.mqttTopic)
+        }
+      }
+    })
+    if (cId) {
+      let obj = {
+        calendarName: 'DEFAULstring',
+        filmInfos: [
+          {
+            filmId: fId,
+            time: '00:00'
           }
+        ],
+        equipmentsIds: equipmentsIds,
+        equipmentTopicList: equipmentTopicList,
+        calendarType: cId ? 'CUSTOME' : 'DEFAUL',
+        calendarId: ''
+      }
+      if (!cId) {
+        delete obj.calendarId
+        api.common.createdSchedule(obj).then(() => {
+          Taro.navigateBack()
+        })
+      } else {
+        obj.calendarId = cId
+        api.common.updateSchedule(obj).then(() => {
+          Taro.navigateBack()
         })
+      }
+    } else {
       Taro.setStorage({
         key: 'schedule-add-device',
         data: JSON.stringify([...checkedArr])
       })
       Taro.navigateBack()
     }
+  }
 
   changeAllCheck() {
-    const { list } = this.props
-    const { checked } = this.state
+    let { checked, list } = this.state
     if (list.length === 0) return
-    if (checked.size !== list.length) {
-      // 没全选
-      const checkedId = list.reduce((previous, { equipmentId }) => {
-        previous.push(equipmentId)
-        return previous
-      }, [])
+    let arr = []
+    let noArr = []
+    list.map(item => {
+      if (checked.has(item.equipmentId)) {
+        arr.push(item.equipmentId)
+      } else {
+        noArr.push(item.equipmentId)
+      }
+    })
+    if (arr.length !== list.length) {
       this.setState({
-        checked: new Set([...checkedId])
+        checked: new Set([...checked].concat(noArr))
       })
     } else {
-      // 已全选
+      arr.map(item => {
+        checked.delete(item)
         this.setState({
-        checked: new Set()
+          checked: checked
+        })
       })
     }
   }
 
   render() {
-    const { list } = this.props
-    const { checked, showModal, groupList } = this.state
+    const { checked, showModal, groupList, list, activeIndex } = this.state
     const { size } = checked
     let items = groupList.map(item => {
+      if (item.equipmentGroupName === '全部') {
+        return item.equipmentGroupName + ` (${list.length})`
+      }
       return item.equipmentGroupName + ` (${item.equipmentCount})`
     })
     return (
       <View className="device-bind">
         <View className="search-bar-container">
           <View className="search-bar-container-left" onClick={this.showModalView}>
-            <Text>全部( {1})</Text>
+            <Text>{items[activeIndex]}</Text>
             <Text className="triangle" />
           </View>
           <Input
             className="search-bar-container-input"
             placeholder="输入设备名称进行搜索"
+            onInput={this.searchName}
             type="text"
           />
         </View>