import api from '@/api/index' import { ComponentClass } from 'react' import { AtSwipeAction } from 'taro-ui' import ListView from '@/conpoments/list_view' import Taro, { Component, Config } from '@tarojs/taro' import { View, Text } from '@tarojs/components' import DeviceItem from '@/conpoments/device_item' import { showMyToast } from '@/common/utils' import './index.scss' export interface IDeviceItem { filmId: any filmName: any mqttTopic: string equipmentType: any equipmentId: string equipmentUrl: string equipmentName: string equipmentState: string calendarId?: string } type PageStateProps = { list: any[] count: number } type PageDispatchProps = { getFilmListData: (page: number) => void } type PageOwnProps = { height: number } type PageState = { showModal: boolean deviceList: IDeviceItem[] groupId: string | '' list: any[] } type IProps = PageStateProps & PageDispatchProps & PageOwnProps interface DeviceGroup { props: IProps state: PageState } class DeviceGroup extends Component { config: Config = { navigationBarTitleText: '组详情' } protected page = 1 constructor(props: any) { super(props) const { id, name } = this.$router.params this.state = { deviceList: [], showModal: false, groupId: id, list: [] } this.selectAddDevice = this.selectAddDevice.bind(this) Taro.setNavigationBarTitle({ title: String(name + '(0)') }) } async componentWillMount() { this.getDate() } componentDidShow() { this.page = 1 this.getDate() } async getDate() { const { name } = this.$router.params api.common.getGroupDevice(this.$router.params.id).then(res => { const list = res Taro.setNavigationBarTitle({ title: String(name + `(${res.length})`) }) this.setState({ list: list || [] }) }) } selectAddDevice() { const groupId = this.$router.params.id Taro.navigateTo({ url: `/pages/home/device/group_device_bind/index?groupId=${groupId}` }) } async handleItem(item: IDeviceItem, info) { const { text } = info const { equipmentId } = item const { id } = this.$router.params if (text === '删除') { Taro.showModal({ content: '确定要删除?' }).then(async ({ confirm }) => { if (confirm) { try { await api.common.deleteGroupDevice(id, equipmentId) this.getDate() showMyToast({ title: '删除成功~' }) } catch (error) { console.error(error) showMyToast({ result: error, title: '失败~' }) } } }) } } async pullingUp(done: any) { this.page++ await this.getDate() done() } async pullingDown(done: any) { this.page = 1 await this.getDate() setTimeout(() => { done() }, 500) } goDetail(equipmentId) { Taro.navigateTo({ url: `/pages/home/device/device_detail/index?equipmentId=${equipmentId}` }) } render() { const { count, height } = this.props const { list } = this.state return ( <View className="device-list"> <ListView count={count} height={height} dataListLength={list.length} pullingUp={done => this.pullingUp(done)} pullingDown={done => this.pullingDown(done)} > {list.map(item => ( <AtSwipeAction autoClose key={item.equipmentId} onClick={info => this.handleItem(item, info)} options={[ { text: '删除', style: { backgroundColor: '#FF4949' } } ]} > <View className="group-item" onClick={() => this.goDetail(item.equipmentId)}> <DeviceItem {...item} /> </View> </AtSwipeAction> ))} </ListView> <View className="device-list-add-btn" onClick={this.selectAddDevice}> <Text className="icon">+</Text> </View> </View> ) } } export default DeviceGroup as ComponentClass<PageOwnProps, PageState>