@@ -1,27 +1,51 @@ | |||
<template> | |||
<u-cell :title="title" isLink :border="false" @click="click"></u-cell> | |||
<u-cell :title="title" isLink :border="false" @click="click" :titleStyle="{fontSize:'28rpx'}"> | |||
<view v-if="multiple&&cellValue.length" slot="title" class="u-slot-title selectedBox"> | |||
<view v-for="(item,index) in cellValue" :key="index"> | |||
{{item}} | |||
</view> | |||
</view> | |||
</u-cell> | |||
</template> | |||
<script> | |||
export default { | |||
name: "radio", | |||
name: "myCell", | |||
props: { | |||
title: { | |||
default: "", | |||
type: String | |||
}, | |||
multiple: { | |||
default: false, | |||
}, | |||
cellValue: { | |||
default: () => [], | |||
} | |||
}, | |||
methods:{ | |||
click(){ | |||
methods: { | |||
click() { | |||
this.$emit("click") | |||
} | |||
} | |||
} | |||
</script> | |||
<style scoped> | |||
<style scoped lang="scss"> | |||
.u-cell { | |||
background: #fff; | |||
border-radius: 20rpx; | |||
} | |||
.selectedBox{ | |||
display: flex; | |||
flex-wrap: wrap; | |||
>view{ | |||
display: inline-block; | |||
background-color: #F2F8FF; | |||
border-radius: 8rpx; | |||
padding: 12rpx 18rpx; | |||
margin: 6rpx; | |||
font-size: 26rpx; | |||
color: #000; | |||
} | |||
} | |||
</style> |
@@ -19,7 +19,6 @@ | |||
props: { | |||
value: { | |||
default: "", | |||
type: String | Number | |||
}, | |||
options: { | |||
default: [], | |||
@@ -27,7 +26,6 @@ | |||
}, | |||
title:{ | |||
default: "", | |||
type: String | |||
}, | |||
cellVisible: { | |||
default: true, | |||
@@ -1,20 +1,23 @@ | |||
<template> | |||
<view> | |||
<myCell v-show="cellVisible" :title="title_" isLink :border="false" @click="show = true"></myCell> | |||
<myCell v-show="cellVisible" :multiple="multiple" :cellValue="cellValue" :title="title_" isLink :border="false" @click="show = true"> | |||
</myCell> | |||
<u-popup :show="show" mode="bottom" :closeable="true" :round="10" @close="close" @open="open"> | |||
<view> | |||
<view class="title"> | |||
{{'请选择' + popupTitle}} | |||
{{popupTitle}} | |||
</view> | |||
<view v-if="filterable" style="padding: 0 30rpx 30rpx 30rpx"> | |||
<u-search v-model="searchText" :placeholder="'请输入'+(searchPlaceHolder||popupTitle)" shape="round" | |||
<u-search v-model="searchText" :placeholder="searchPlaceholder" shape="round" | |||
:showAction="false"></u-search> | |||
</view> | |||
<u-radio-group v-if="!multiple" :value="value_" iconPlacement="right" placement="column" @change="change" borderBottom> | |||
<u-radio-group v-if="!multiple" :value="value_" iconPlacement="right" placement="column" | |||
@change="change" borderBottom> | |||
<u-radio v-show="item.label.includes(searchText)" v-for="(item,index) in options" :key="index" | |||
:label="item.label" :name="item.value"></u-radio> | |||
</u-radio-group> | |||
<u-checkbox-group v-else :value="value_" iconPlacement="right" placement="column" @change="change" borderBottom> | |||
<u-checkbox-group v-else v-model="value_" iconPlacement="right" placement="column" @change="change" | |||
borderBottom> | |||
<u-checkbox v-show="item.label.includes(searchText)" v-for="(item, index) in options" :key="index" | |||
:label="item.label" :name="item.value"> | |||
</u-checkbox> | |||
@@ -38,47 +41,60 @@ | |||
props: { | |||
value: { | |||
default: "", | |||
type: String | Number | |||
}, | |||
options: { | |||
default: [], | |||
type: Array | |||
}, | |||
title: { | |||
default: "", | |||
type: String | |||
// 是否显示cell回显 | |||
cellVisible: { | |||
default: true, | |||
}, | |||
// cell回显默认文字 | |||
placeholder:{ | |||
default:'请选择' | |||
}, | |||
// 弹框标题 | |||
popupTitle: { | |||
default: "", | |||
default: "请选择", | |||
type: String | |||
}, | |||
searchPlaceHolder: { | |||
default: "", | |||
// 是否显示搜索 | |||
filterable: { | |||
default: true, | |||
}, | |||
// 搜索框默认文字 | |||
searchPlaceholder: { | |||
default: "请输入", | |||
type: String | |||
}, | |||
cellVisible: { | |||
default: true, | |||
// 单选时候cell回显的文字 | |||
title: { | |||
default: "", | |||
}, | |||
// 是否多选 | |||
multiple: { | |||
default: false, | |||
}, | |||
filterable: { | |||
default: true, | |||
}, | |||
}, | |||
data() { | |||
return { | |||
show: false, | |||
title_: this.title, | |||
title_: this.title||this.placeholder, | |||
value_: this.value, | |||
radioValue: '', | |||
searchText: '' | |||
gruopValue: '', | |||
searchText: '', | |||
cellValue:[], | |||
}; | |||
}, | |||
mounted() { | |||
if (this.value) { | |||
if (this.multiple) this.gruopValue = [] | |||
if (!this.multiple) { | |||
let obj = this.options.find(e1 => e1.value == this.value) | |||
if (obj) this.title_ = obj.label | |||
} else { | |||
let arr = this.options.filter(e1 => this.value.includes(e1.value)) | |||
this.cellValue = arr.map(e => e.label) | |||
} | |||
}, | |||
methods: { | |||
@@ -86,20 +102,30 @@ | |||
this.show = false | |||
}, | |||
open() { | |||
let obj = this.options.find(e1 => e1.value == this.value) | |||
if (obj) this.title_ = obj.label | |||
this.title_ = obj ? obj.label : (this.popupTitle || this.title) | |||
if (this.multiple) this.gruopValue = [] | |||
if (!this.multiple) { | |||
let obj = this.options.find(e1 => e1.value == this.value) | |||
if (obj) this.title_ = obj.label | |||
} else { | |||
let arr = this.options.filter(e1 => this.value.includes(e1.value)) | |||
this.cellValue = arr.map(e => e.label) | |||
} | |||
this.value_ = this.value | |||
this.searchText = '' | |||
}, | |||
change(e) { | |||
this.radioValue = e | |||
this.gruopValue = e | |||
}, | |||
cofirm() { | |||
this.$emit("update:value", this.radioValue) | |||
this.$emit("change", this.radioValue) | |||
let obj = this.options.find(e1 => e1.value == this.radioValue) | |||
if (obj) this.title_ = obj.label | |||
this.$emit("update:value", this.gruopValue) | |||
this.$emit("change", this.gruopValue) | |||
if (!this.multiple) { | |||
let obj = this.options.find(e1 => e1.value == this.gruopValue) | |||
if (obj) this.title_ = obj.label | |||
} else { | |||
let arr = this.options.filter(e1 => this.gruopValue.includes(e1.value)) | |||
this.cellValue = arr.map(e => e.label) | |||
} | |||
this.close() | |||
}, | |||
} | |||
@@ -126,13 +152,13 @@ | |||
padding: 24rpx 0; | |||
} | |||
} | |||
.u-checkbox-group { | |||
width: 92%; | |||
max-height: 680rpx; | |||
overflow-y: auto; | |||
padding: 0 30rpx; | |||
.u-cell { | |||
background-color: #fff; | |||
border-radius: 20rpx 20rpx 0 0; | |||
@@ -147,7 +173,7 @@ | |||
.u-radio { | |||
margin-top: 18rpx; | |||
} | |||
.u-checkbox { | |||
margin-top: 18rpx; | |||
} |
@@ -0,0 +1,252 @@ | |||
<template> | |||
<view> | |||
<myCell v-show="cellVisible" :title="title" isLink :border="false" @click="show = true"></myCell> | |||
<u-popup :show="show" mode="bottom" :closeable="true" :round="10" @close="close" @open="open"> | |||
<view class="title"> | |||
{{popupTitle}} | |||
</view> | |||
<view> | |||
<u-tabs :list="tabsList" :current="tabIndex" @change="tabsChange" :activeStyle="{ | |||
color: '#000000', | |||
}" itemStyle="height:84rpx;width:33.33%;box-sizing:border-box;background:#fff;border-top:1rpx solid rgba(0,0,0,0.03)"></u-tabs> | |||
<view v-for="(item) in tabsList" :key="item.value"> | |||
<template v-if="tabIndex == item.value"> | |||
<u-radio-group v-model="selectValue" iconPlacement="right" placement="column" @change="change" | |||
borderBottom> | |||
<u-radio v-for="(item,index) in selectOptions" :key="index" :label="item.label" | |||
:name="item.value"></u-radio> | |||
</u-radio-group> | |||
</template> | |||
</view> | |||
<view style="padding: 36rpx 50rpx"> | |||
<u-button @click="cofirm" type="primary" style="border-radius: 36rpx;height: 72rpx;" | |||
text="确定"></u-button> | |||
</view> | |||
</view> | |||
</u-popup> | |||
</view> | |||
</template> | |||
<script> | |||
import myCell from "@/components/cell.vue" | |||
export default { | |||
name: "selectRadio", | |||
components: { | |||
myCell | |||
}, | |||
props: { | |||
value: { | |||
default: () => [], | |||
type: Array | |||
}, | |||
labels: { | |||
default: () => [], | |||
type: Array | |||
}, | |||
placeholder: { | |||
default: '请选择' | |||
}, | |||
popupTitle: { | |||
default: "请选择", | |||
type: String | |||
}, | |||
cellVisible: { | |||
default: true, | |||
}, | |||
}, | |||
data() { | |||
return { | |||
show: false, | |||
title: this.labels.join('/') || this.placeholder, | |||
tabsList: [{ | |||
name: "系部", | |||
cate:"系部", | |||
value: 0, | |||
disabled: false, | |||
list: [{ | |||
value: 222, | |||
label: '信息系' | |||
}, { | |||
value: 333, | |||
label: '金融系' | |||
}] | |||
}, | |||
{ | |||
name: "专业", | |||
cate:"专业", | |||
value: 1, | |||
disabled: true, | |||
list: [{ | |||
value: 222, | |||
label: '计算机应用' | |||
}, { | |||
value: 333, | |||
label: '土木工程' | |||
}] | |||
}, | |||
{ | |||
name: "班级", | |||
cate:"班级", | |||
value: 2, | |||
disabled: true, | |||
list: [{ | |||
value: 222, | |||
label: '1班' | |||
}, { | |||
value: 333, | |||
label: '2班' | |||
}] | |||
}, | |||
], | |||
tabIndex: 0, | |||
selectValue: null, | |||
selectOptions: [], | |||
selectValues: this.value, | |||
selectLabels: [], | |||
}; | |||
}, | |||
mounted() { | |||
// 获取第一个tab的selectOptions | |||
}, | |||
methods: { | |||
close() { | |||
this.show = false | |||
}, | |||
// 打开选择弹框 | |||
open() { | |||
this.selectValues = this.value || [] | |||
this.title = this.labels.join('/') || this.placeholder | |||
if(!this.selectValues.length){ | |||
// 展示tabs第一个数据 | |||
this.tabIndex = 0 | |||
}else{ | |||
// 展示tabs最后一个数据 | |||
this.tabIndex = 2 | |||
} | |||
this.setSelectOptions() | |||
this.show = true | |||
}, | |||
// 设置单选列表数据 | |||
setSelectOptions(){ | |||
switch(this.tabIndex){ | |||
case 0: | |||
this.selectOptions = this.tabsList[0].list | |||
break | |||
case 1: | |||
this.selectOptions = this.tabsList[1].list | |||
break | |||
case 2: | |||
this.selectOptions = this.tabsList[2].list | |||
break | |||
} | |||
}, | |||
// 单选改变 | |||
change(e) { | |||
// 赋值 | |||
this.selectValues[this.tabIndex] = e | |||
let obj = this.selectOptions.find(e1 => e1.value == e) | |||
this.selectLabels[this.tabIndex] = obj.label | |||
// 切换tab | |||
if (this.tabIndex < this.tabsList.length - 1) { | |||
let nextItem = this.tabsList[this.tabIndex + 1] | |||
this.tabsChange(nextItem) | |||
} | |||
if(this.tabIndex == this.tabsList.length - 1){ | |||
this.tabsList[this.tabIndex].name = obj.label | |||
} | |||
}, | |||
// 切换tab | |||
tabsChange(item) { | |||
console.log(1) | |||
if (this.tabIndex == item.value) return | |||
this.tabIndex = item.value | |||
setTimeout(() => { | |||
this.setSelectOptions() | |||
this.selectValue = null | |||
this.initTabs() | |||
}, 150) | |||
}, | |||
// 初始化tab数据 | |||
initTabs() { | |||
for (let item of this.tabsList) { | |||
if (item.value > this.tabIndex) { | |||
item.disabled = true | |||
this.selectValues[item.value] = '' | |||
this.selectLabels[item.value] = '' | |||
} else if (item.value < this.tabIndex) { | |||
item.disabled = false | |||
} else { | |||
item.disabled = false | |||
this.selectValues[item.value] = '' | |||
this.selectLabels[item.value] = '' | |||
} | |||
item.name = this.selectLabels[item.value]||item.cate | |||
} | |||
}, | |||
// 确定 | |||
cofirm() { | |||
if (this.selectValues[2]) { | |||
this.$emit("input", this.selectValues) | |||
this.$emit("update:labels", this.selectLabels) | |||
this.$emit("change", this.selectValues) | |||
this.title = this.selectLabels.join('/') | |||
this.close() | |||
}else{ | |||
this.$emit("input", []) | |||
this.$emit("update:labels", []) | |||
this.$emit("change", []) | |||
this.title = this.placeholder | |||
this.close() | |||
} | |||
}, | |||
} | |||
} | |||
</script> | |||
<style scoped lang="scss"> | |||
.title { | |||
color: #000000; | |||
font-size: 32rpx; | |||
text-align: center; | |||
line-height: 100rpx; | |||
} | |||
.u-radio-group { | |||
width: 92%; | |||
max-height: 680rpx; | |||
overflow-y: auto; | |||
padding: 0 30rpx; | |||
.u-cell { | |||
background-color: #fff; | |||
border-radius: 20rpx 20rpx 0 0; | |||
padding: 24rpx 0; | |||
} | |||
} | |||
.u-checkbox-group { | |||
width: 92%; | |||
max-height: 680rpx; | |||
overflow-y: auto; | |||
padding: 0 30rpx; | |||
.u-cell { | |||
background-color: #fff; | |||
border-radius: 20rpx 20rpx 0 0; | |||
padding: 24rpx 0; | |||
} | |||
} | |||
.u-border-bottom { | |||
border-color: #F6F6F6 !important; | |||
} | |||
.u-radio { | |||
margin-top: 18rpx; | |||
} | |||
.u-checkbox { | |||
margin-top: 18rpx; | |||
} | |||
</style> |
@@ -1,31 +1,88 @@ | |||
<template> | |||
<view> | |||
<u--form labelPosition="top" :model="form" :rules="rules" ref="uForm"> | |||
<u-form-item label="姓名" prop="name" borderBottom> | |||
<u--input v-model="form.name" border="none"></u--input> | |||
</u-form-item> | |||
</u--form> | |||
<view style="padding-top: 30rpx;"> | |||
<view class="whiteCard"> | |||
<u--form labelPosition="top" :labelStyle="{fontSize:'32rpx',color:'#666'}" labelWidth="200" :model="form" :rules="rules" ref="uForm"> | |||
<u-form-item label="摄像头(多选)" prop="name" borderBottom> | |||
<view | |||
style="width: 160%;margin-left: -30rpx;margin-right: -30rpx;margin-bottom: -20rpx;margin-top: -10rpx;"> | |||
<selectSearch :value.sync="form.shexiangtou" | |||
:options="[{value:1,label:'走廊尽头(海康)'},{value:2,label:'厨房(海康)'},{value:3,label:'走廊尽头(海康)'},{value:4,label:'厨房(海康)'}]" | |||
placeholder="请选择摄像头" :filterable="false" multiple /> | |||
</view> | |||
</u-form-item> | |||
<u-form-item label="查询时间段" prop="timeslot" borderBottom> | |||
<uni-datetime-picker v-model="form.tick" type="datetimerange"> | |||
<view class="demo-layout"> | |||
<view> | |||
{{form.tick.length?form.tick.join('-'):'请选择'}} | |||
</view> | |||
<image style="width: 30rpx;height:30rpx;" | |||
src="@/static/image/earlyWarning/calendar.png" mode=""></image> | |||
</view> | |||
</uni-datetime-picker> | |||
</u-form-item> | |||
<u-form-item label="系部/专业/班级" prop="timeslot" borderBottom> | |||
<view | |||
style="width: 160%;margin-left: -30rpx;margin-right: -30rpx;margin-bottom: -20rpx;margin-top: -10rpx;"> | |||
<selectTree v-model="form.departCalss" :labels.sync="form.departCalssName"/> | |||
</view> | |||
</u-form-item> | |||
<u-form-item labelPosition="left" label="分片类型(天/小时)" prop="timeslot" borderBottom> | |||
<u-radio-group v-model="form.type"> | |||
<u-radio v-for="(item,index) in [{value:'1',label:'天'},{value:'2',label:'小时'}]" :key="index" :label="item.label" | |||
:name="item.value"></u-radio> | |||
</u-radio-group> | |||
</u-form-item> | |||
</u--form> | |||
</view> | |||
</view> | |||
</template> | |||
<script> | |||
import selectSearch from "@/components/selectSearch.vue" | |||
import selectTree from "@/components/selectTree.vue" | |||
export default { | |||
components: { | |||
selectSearch, | |||
selectTree | |||
}, | |||
data() { | |||
return { | |||
form: {}, | |||
form: { | |||
shexiangtou: [], | |||
tick: [], | |||
}, | |||
rules: [] | |||
} | |||
} | |||
}, | |||
methods: {} | |||
} | |||
</script> | |||
<style scoped lang="scss"> | |||
.u-form { | |||
background-color: #fff; | |||
// border-radius: 18rpx; | |||
// margin: 30rpx 28rpx; | |||
// padding: 30rpx; | |||
// color: #333333; | |||
margin-top: 100rpx; | |||
.whiteCard { | |||
padding: 30rpx 30rpx; | |||
margin: 15rpx 30rpx; | |||
border-radius: 18rpx; | |||
background-color: #ffffff; | |||
font-size: 32rpx; | |||
} | |||
.demo-layout{ | |||
display: flex; | |||
padding: 15rpx 0; | |||
justify-content: space-between; | |||
align-items: center; | |||
&:first-child{ | |||
flex: 1; | |||
padding-right:30rpx; | |||
} | |||
} | |||
.u-radio-group{ | |||
&>*:first-child{ | |||
margin-right: 36rpx; | |||
} | |||
} | |||
</style> |
@@ -4,7 +4,7 @@ | |||
<selectRadio :value.sync="search.loudong" :options="[{value:1,label:'loudong1'},{value:2,label:'loudong2'}]" | |||
title="楼栋" /> | |||
<selectSearch :value.sync="search.qinshi" :options="[{value:1,label:'qinshi1'},{value:2,label:'qinshi2'}]" | |||
title="寝室" search-place-holder="寝室号"/> | |||
placeholder="请选择寝室" popupTitle="请选择寝室" search-placeholder="请输入寝室号"/> | |||
</view> | |||
<u-empty marginTop="100rpx" :show="false" mode="list" text="暂无数据"></u-empty> | |||
<u-list @scrolltolower="scrolltolower" style="height: calc(100% - 220rpx);"> | |||