Skip to content

visualcloud / Vmatrix-client-taro

Go to a project
Commit 64f67ddd by hank
Options

添加设备修改

parent 081b4268
Showing with 118 additions and 27 deletions
src/pages/home/film/index.tsx
...@@ -52,7 +52,7 @@ class Device extends Component { ...@@ -52,7 +52,7 @@ class Device extends Component {
return ( return (
<AtTabs current={current} tabList={tabList} onClick={this.changePage} swipeable={false}> <AtTabs current={current} tabList={tabList} onClick={this.changePage} swipeable={false}>
<AtTabsPane current={current} index={0}> <AtTabsPane current={current} index={0}>
<View style={{ height: `${windowHeight + 70}px` }}> <View style={{ height: `${windowHeight + 43}px` }}>
<FilmList height={windowHeight} /> <FilmList height={windowHeight} />
</View> </View>
</AtTabsPane> </AtTabsPane>
......
src/pages/home/film/schedule_add/components/device/index.scss
...@@ -42,7 +42,9 @@ ...@@ -42,7 +42,9 @@
.enter { .enter {
display: inline-block; display: inline-block;
width: 150px; width: 350px;
background: #ff9110;
color: white;
} }
padding: 0 20px; padding: 0 20px;
...@@ -84,6 +86,35 @@ ...@@ -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-container {
.at-list__item-extra { .at-list__item-extra {
flex: 0 0 55px; flex: 0 0 55px;
......
src/pages/home/film/schedule_add/components/device/index.tsx
...@@ -25,9 +25,11 @@ type PageState = { ...@@ -25,9 +25,11 @@ type PageState = {
showModal: boolean showModal: boolean
groupList: any[] groupList: any[]
list: any[] list: any[]
allList: any[]
activeIndex: number activeIndex: number
allCount: string allCount: string
cId: string cId: string
TabIndex: 0
} }
type IProps = PageStateProps & PageDispatchProps & PageOwnProps type IProps = PageStateProps & PageDispatchProps & PageOwnProps
...@@ -55,7 +57,9 @@ class DeviceSelect extends Component { ...@@ -55,7 +57,9 @@ class DeviceSelect extends Component {
activeIndex: 0, activeIndex: 0,
searchName: '', searchName: '',
list: [], list: [],
allCount: '' allCount: '',
TabIndex: 0,
allList: []
} }
this.updateBind = this.updateBind.bind(this) this.updateBind = this.updateBind.bind(this)
this.changeAllCheck = this.changeAllCheck.bind(this) this.changeAllCheck = this.changeAllCheck.bind(this)
...@@ -91,10 +95,12 @@ class DeviceSelect extends Component { ...@@ -91,10 +95,12 @@ class DeviceSelect extends Component {
getData(name?: string | '') { getData(name?: string | '') {
const groupId = this.state.groupList[this.state.activeIndex]['equipmentGroupId'] const groupId = this.state.groupList[this.state.activeIndex]['equipmentGroupId']
const { allCount } = this.state
api.common.getGroupDevice(groupId, name).then(res => { api.common.getGroupDevice(groupId, name).then(res => {
if (!groupId) { if (!groupId && !allCount) {
this.setState({ this.setState({
allCount: res.length allCount: res.length,
allList: res
}) })
} }
this.setState({ this.setState({
...@@ -175,7 +181,8 @@ class DeviceSelect extends Component { ...@@ -175,7 +181,8 @@ class DeviceSelect extends Component {
*/ */
this.setState( this.setState(
{ {
activeIndex: index activeIndex: index,
TabIndex: 0
}, },
() => { () => {
this.getData(this.state.searchName) this.getData(this.state.searchName)
...@@ -267,21 +274,36 @@ class DeviceSelect extends Component { ...@@ -267,21 +274,36 @@ class DeviceSelect extends Component {
} }
render() { 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 const { size } = checked
let items = groupList.map(item => { let items = groupList.map(item => {
if (item.equipmentGroupName === '全部') { if (item.equipmentGroupName === '全部') {
return item.equipmentGroupName + ` (${allCount})` return item.equipmentGroupName + ` (${allList.length})`
} }
return item.equipmentGroupName + ` (${item.equipmentCount})` return item.equipmentGroupName + ` (${item.equipmentCount})`
}) })
const hasAllList = allList.filter(item => {
if (checked.has(item.equipmentId) && item.equipmentName.indexOf(searchName.trim()) !== -1) {
return item
}
})
return ( return (
<View className="device-bind"> <View className="device-bind">
<View className="search-bar-container"> <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>{items[activeIndex]}</Text>
<Text className="triangle" /> <Text className="triangle" />
</View> </View> */}
<Input <Input
className="search-bar-container-input" className="search-bar-container-input"
placeholder="输入设备名称进行搜索" placeholder="输入设备名称进行搜索"
...@@ -289,27 +311,65 @@ class DeviceSelect extends Component { ...@@ -289,27 +311,65 @@ class DeviceSelect extends Component {
type="text" type="text"
/> />
</View> </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"> <View className="device-bind-scroll">
<ScrollView className="device-bind-scroll-view"> {TabIndex === 0 ? (
{list.map(item => ( // 0 展示全部 1 展示已选择设备
<View key={item.equipmentId}> <ScrollView className="device-bind-scroll-view">
<Label className="device-bind-item" onClick={() => this.changeItem(item)}> {list.map(item => (
<Checkbox <View key={item.equipmentId}>
value="" <Label className="device-bind-item" onClick={() => this.changeItem(item)}>
className="device-bind-item-checkbox" <Checkbox
checked={checked.has(item.equipmentId)} value=""
/> className="device-bind-item-checkbox"
<View className="device-bind-item-info"> checked={checked.has(item.equipmentId)}
<DeviceItem {...item} /> />
<View className="device-bind-item-info">
<DeviceItem {...item} />
</View>
</Label>
</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> </View>
</Label> )
</View> })}
))} </ScrollView>
</ScrollView> )}
</View> </View>
<View className="device-bind-bottom-bar"> <View className="device-bind-bottom-bar">
<Text className="all" onClick={this.changeAllCheck}> <Text className="all" onClick={this.changeAllCheck}>
全选，共选择{size}台 全选
</Text> </Text>
<Button className="enter" onClick={this.updateBind}> <Button className="enter" onClick={this.updateBind}>
确定 确定
......
src/pages/home/film/schedule_add/index.scss
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
border: 1px solid #eee; border: 1px solid #eee;
text-align: center; text-align: center;
color: white; color: white;
background: green; background: #ff9110;
} }
} }
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment