|
|
<template>
|
|
|
<view>
|
|
|
<view class="paibanCard">
|
|
|
<view class="title">
|
|
|
<view class="line"></view>
|
|
|
选择{{title}}
|
|
|
</view>
|
|
|
<view style="background: #FFFFFF;border-radius: 20rpx;padding: 26rpx 41rpx;">
|
|
|
<view class="pickPerson">
|
|
|
<view class="picktitle">
|
|
|
<image src="../../static/images/fireman/fire.png"
|
|
|
style="width: 26rpx;height: 32rpx;margin-right: 10rpx;"></image>
|
|
|
{{title}}
|
|
|
</view>
|
|
|
<image src="../../static/images/fireman/add.png" style="width: 135rpx;height: 46rpx;"
|
|
|
@click="itemclick(true)"></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 异步加载demo -->
|
|
|
<!-- <next-tree :selectParent="false" :checkStrictly="true" :multiple="true" ref="nextTreeAsyncRef"
|
|
|
:treeData="asyncTreeData" :loadData="loadData" /> -->
|
|
|
|
|
|
<next-tree :expandedKeys="['3','3-1']" :changeVerify="changeVerify" :title="getTitle" ref="nextTreeRef"
|
|
|
:checkStrictly="checkStrictly" :selectParent="selectParent" :multiple="multiple" :treeData="list"
|
|
|
@cancel="oncancel" @confirm="onconfirm">
|
|
|
</next-tree>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
let self = null;
|
|
|
export default {
|
|
|
name: "choosePerson",
|
|
|
props: {
|
|
|
// 下拉树的数组
|
|
|
list: {
|
|
|
type: Array
|
|
|
},
|
|
|
// 标题字符
|
|
|
title: {
|
|
|
type: String,
|
|
|
default: ""
|
|
|
},
|
|
|
// 最多选择几个节点
|
|
|
count: {
|
|
|
type: String,
|
|
|
default: "1"
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
// console.log(this._props, "this._props");
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
multiple: false,
|
|
|
selectParent: false,
|
|
|
checkStrictly: false,
|
|
|
activeId: '',
|
|
|
localData: {
|
|
|
'a1': [{
|
|
|
id: 'a1-1',
|
|
|
label: 'a1-1'
|
|
|
}, {
|
|
|
id: 'a1-2',
|
|
|
label: 'a1-2',
|
|
|
children: []
|
|
|
}, {
|
|
|
id: 'a1-3',
|
|
|
label: 'a1-3'
|
|
|
}],
|
|
|
'b1': [{
|
|
|
id: 'b1-1',
|
|
|
label: 'b1-1',
|
|
|
children: []
|
|
|
}, {
|
|
|
id: 'b1-2',
|
|
|
label: 'b1-2'
|
|
|
}, {
|
|
|
id: 'b1-3',
|
|
|
label: 'b1-3'
|
|
|
}],
|
|
|
'c1': [{
|
|
|
id: 'c1-1',
|
|
|
label: 'c1-1'
|
|
|
}, {
|
|
|
id: 'c1-2',
|
|
|
label: 'c1-2'
|
|
|
}, {
|
|
|
id: 'c1-3',
|
|
|
label: 'c1-3',
|
|
|
children: []
|
|
|
}],
|
|
|
'a1-2': [{
|
|
|
id: 'a1-2-1',
|
|
|
label: 'a1-2-1'
|
|
|
}, {
|
|
|
id: 'a1-2-2',
|
|
|
label: 'a1-2-2'
|
|
|
}],
|
|
|
'b1-1': [{
|
|
|
id: 'b1-1-1',
|
|
|
label: 'b1-1-1'
|
|
|
}, {
|
|
|
id: 'b1-1-2',
|
|
|
label: 'b1-1-2'
|
|
|
}],
|
|
|
'c1-3': [{
|
|
|
id: 'c1-3-1',
|
|
|
label: 'c1-3-1'
|
|
|
}, {
|
|
|
id: 'c1-3-2',
|
|
|
label: 'c1-3-2'
|
|
|
}]
|
|
|
},
|
|
|
asyncTreeData: [{
|
|
|
id: 'a1',
|
|
|
label: 'a1',
|
|
|
children: []
|
|
|
}, {
|
|
|
id: 'b1',
|
|
|
label: 'b1',
|
|
|
children: []
|
|
|
}, {
|
|
|
id: 'c1',
|
|
|
label: 'c1',
|
|
|
children: []
|
|
|
}],
|
|
|
treeData: [{
|
|
|
id: '1',
|
|
|
label: '北京',
|
|
|
checked: false
|
|
|
},
|
|
|
{
|
|
|
id: '2',
|
|
|
label: '上海',
|
|
|
checked: false,
|
|
|
children: [{
|
|
|
id: '2-1',
|
|
|
label: '上海-1',
|
|
|
checked: false
|
|
|
},
|
|
|
{
|
|
|
id: '2-2',
|
|
|
label: '上海-2',
|
|
|
checked: false
|
|
|
},
|
|
|
{
|
|
|
id: '2-3',
|
|
|
label: '上海-3',
|
|
|
checked: false
|
|
|
},
|
|
|
]
|
|
|
},
|
|
|
{
|
|
|
id: '3',
|
|
|
label: '广州',
|
|
|
children: [{
|
|
|
id: '3-1',
|
|
|
label: '海珠区',
|
|
|
checked: false,
|
|
|
children: [{
|
|
|
id: '3-1-1',
|
|
|
label: '海珠区-1',
|
|
|
checked: false,
|
|
|
disabled: true
|
|
|
},
|
|
|
{
|
|
|
id: '3-1-2',
|
|
|
label: '海珠区-2',
|
|
|
checked: false
|
|
|
},
|
|
|
{
|
|
|
id: '3-1-4',
|
|
|
label: '海珠区-3',
|
|
|
checked: false
|
|
|
},
|
|
|
{
|
|
|
id: '3-1-5',
|
|
|
label: '海珠区-4',
|
|
|
checked: false
|
|
|
},
|
|
|
{
|
|
|
id: '3-1-6',
|
|
|
label: '海珠区-5',
|
|
|
checked: false
|
|
|
},
|
|
|
{
|
|
|
id: '3-1-7',
|
|
|
label: '海珠区-6',
|
|
|
checked: false
|
|
|
},
|
|
|
{
|
|
|
id: '3-1-8',
|
|
|
label: '海珠区-7',
|
|
|
checked: false
|
|
|
},
|
|
|
{
|
|
|
id: '3-1-9',
|
|
|
label: '海珠区-8',
|
|
|
checked: false
|
|
|
},
|
|
|
{
|
|
|
id: '3-1-10',
|
|
|
label: '海珠区-9',
|
|
|
checked: false
|
|
|
},
|
|
|
{
|
|
|
id: '3-1-11',
|
|
|
label: '海珠区-10',
|
|
|
checked: false
|
|
|
},
|
|
|
]
|
|
|
},
|
|
|
{
|
|
|
id: '3-2',
|
|
|
label: '番禺区',
|
|
|
checked: false,
|
|
|
children: [{
|
|
|
id: '3-2-1',
|
|
|
label: '番禺区-1',
|
|
|
checked: false
|
|
|
},
|
|
|
{
|
|
|
id: '3-2-2',
|
|
|
label: '番禺区-2',
|
|
|
checked: false
|
|
|
},
|
|
|
{
|
|
|
id: '3-2-4',
|
|
|
label: '番禺区-3',
|
|
|
checked: false
|
|
|
},
|
|
|
{
|
|
|
id: '3-2-5',
|
|
|
label: '番禺区-4',
|
|
|
checked: false
|
|
|
},
|
|
|
{
|
|
|
id: '3-2-6',
|
|
|
label: '番禺区-5',
|
|
|
checked: false
|
|
|
},
|
|
|
{
|
|
|
id: '3-2-7',
|
|
|
label: '番禺区-6',
|
|
|
checked: false
|
|
|
},
|
|
|
{
|
|
|
id: '3-2-8',
|
|
|
label: '番禺区-7',
|
|
|
checked: false
|
|
|
},
|
|
|
{
|
|
|
id: '3-2-9',
|
|
|
label: '番禺区-8',
|
|
|
checked: false
|
|
|
},
|
|
|
{
|
|
|
id: '3-2-10',
|
|
|
label: '番禺区-9',
|
|
|
checked: false
|
|
|
},
|
|
|
{
|
|
|
id: '3-2-11',
|
|
|
label: '番禺区-10',
|
|
|
checked: false
|
|
|
},
|
|
|
]
|
|
|
},
|
|
|
{
|
|
|
id: '3-3',
|
|
|
label: '黄埔区',
|
|
|
checked: false,
|
|
|
children: [{
|
|
|
id: '3-3-1',
|
|
|
label: '黄埔区-1',
|
|
|
checked: false
|
|
|
},
|
|
|
{
|
|
|
id: '3-3-2',
|
|
|
label: '黄埔区-2',
|
|
|
checked: false
|
|
|
},
|
|
|
{
|
|
|
id: '3-3-3',
|
|
|
label: '黄埔区-3',
|
|
|
checked: false
|
|
|
},
|
|
|
{
|
|
|
id: '3-3-4',
|
|
|
label: '黄埔区-4',
|
|
|
checked: false
|
|
|
},
|
|
|
{
|
|
|
id: '3-3-5',
|
|
|
label: '黄埔区-5',
|
|
|
checked: false
|
|
|
},
|
|
|
{
|
|
|
id: '3-3-6',
|
|
|
label: '黄埔区-6',
|
|
|
checked: false
|
|
|
},
|
|
|
{
|
|
|
id: '3-3-7',
|
|
|
label: '黄埔区-7',
|
|
|
checked: false
|
|
|
},
|
|
|
{
|
|
|
id: '3-3-8',
|
|
|
label: '黄埔区-8',
|
|
|
checked: false
|
|
|
},
|
|
|
{
|
|
|
id: '3-3-9',
|
|
|
label: '黄埔区-9',
|
|
|
checked: false
|
|
|
},
|
|
|
{
|
|
|
id: '3-3-10',
|
|
|
label: '黄埔区-10',
|
|
|
checked: false
|
|
|
},
|
|
|
{
|
|
|
id: '3-3-12',
|
|
|
label: '黄埔区-11',
|
|
|
checked: false
|
|
|
},
|
|
|
{
|
|
|
id: '3-3-13',
|
|
|
label: '黄埔区-12',
|
|
|
checked: false
|
|
|
},
|
|
|
{
|
|
|
id: '3-3-13',
|
|
|
label: '黄埔区-13',
|
|
|
checked: false
|
|
|
},
|
|
|
{
|
|
|
id: '3-3-14',
|
|
|
label: '黄埔区-14',
|
|
|
checked: false
|
|
|
},
|
|
|
{
|
|
|
id: '3-3-15',
|
|
|
label: '黄埔区-15',
|
|
|
checked: false
|
|
|
},
|
|
|
{
|
|
|
id: '3-3-16',
|
|
|
label: '黄埔区-16',
|
|
|
checked: false
|
|
|
},
|
|
|
{
|
|
|
id: '3-3-17',
|
|
|
label: '黄埔区-17',
|
|
|
checked: false
|
|
|
},
|
|
|
{
|
|
|
id: '3-3-18',
|
|
|
label: '黄埔区-18',
|
|
|
checked: false
|
|
|
},
|
|
|
{
|
|
|
id: '3-3-19',
|
|
|
label: '黄埔区-19',
|
|
|
checked: false
|
|
|
},
|
|
|
{
|
|
|
id: '3-3-20',
|
|
|
label: '黄埔区-20',
|
|
|
checked: false
|
|
|
},
|
|
|
{
|
|
|
id: '3-3-21',
|
|
|
label: '黄埔区-21',
|
|
|
checked: false
|
|
|
},
|
|
|
{
|
|
|
id: '3-3-22',
|
|
|
label: '黄埔区-22',
|
|
|
checked: false
|
|
|
},
|
|
|
{
|
|
|
id: '3-3-23',
|
|
|
label: '黄埔区-23',
|
|
|
checked: false
|
|
|
},
|
|
|
{
|
|
|
id: '3-3-24',
|
|
|
label: '黄埔区-24',
|
|
|
checked: false
|
|
|
},
|
|
|
{
|
|
|
id: '3-3-25',
|
|
|
label: '黄埔区-25',
|
|
|
checked: false
|
|
|
},
|
|
|
{
|
|
|
id: '3-3-26',
|
|
|
label: '黄埔区-26',
|
|
|
checked: false
|
|
|
},
|
|
|
{
|
|
|
id: '3-3-27',
|
|
|
label: '黄埔区-27',
|
|
|
checked: false
|
|
|
},
|
|
|
{
|
|
|
id: '3-3-28',
|
|
|
label: '黄埔区-28',
|
|
|
checked: false
|
|
|
},
|
|
|
{
|
|
|
id: '3-3-29',
|
|
|
label: '黄埔区-29',
|
|
|
checked: false
|
|
|
},
|
|
|
{
|
|
|
id: '3-3-30',
|
|
|
label: '黄埔区-30',
|
|
|
checked: false
|
|
|
},
|
|
|
{
|
|
|
id: '3-3-31',
|
|
|
label: '黄埔区-31',
|
|
|
checked: false
|
|
|
},
|
|
|
{
|
|
|
id: '3-3-32',
|
|
|
label: '黄埔区-32',
|
|
|
checked: false
|
|
|
},
|
|
|
{
|
|
|
id: '3-3-33',
|
|
|
label: '黄埔区-33',
|
|
|
checked: false
|
|
|
},
|
|
|
{
|
|
|
id: '3-3-34',
|
|
|
label: '黄埔区-34',
|
|
|
checked: false
|
|
|
},
|
|
|
{
|
|
|
id: '3-3-35',
|
|
|
label: '黄埔区-35',
|
|
|
checked: false
|
|
|
},
|
|
|
{
|
|
|
id: '3-3-36',
|
|
|
label: '黄埔区-36',
|
|
|
checked: false
|
|
|
},
|
|
|
]
|
|
|
},
|
|
|
],
|
|
|
}
|
|
|
]
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
openTree: function() {
|
|
|
this.$refs.nextTreeAsyncRef.showTree = true
|
|
|
},
|
|
|
changeVerify: function(current, chooseList) {
|
|
|
// 注意：返回非空字符串会阻止原有行为，并提示返回的字符串
|
|
|
// 如果函数体不做return返回值，即验证通过，控件正常处理业务
|
|
|
// console.log('当前变化的数据', current)
|
|
|
// console.log('已选择的数据', chooseList)
|
|
|
if (chooseList && chooseList.length > this._props.count) {
|
|
|
|
|
|
return `最多可以选择${this._props.count}个人员`
|
|
|
}
|
|
|
},
|
|
|
checkedFunc: function(id) {
|
|
|
if (this.activeId === id) {
|
|
|
this.activeId = '';
|
|
|
this.$refs.nextTreeRef.checkedFunc(id, false)
|
|
|
} else {
|
|
|
this.activeId = id;
|
|
|
this.$refs.nextTreeRef.checkedFunc(id)
|
|
|
}
|
|
|
},
|
|
|
loadData(nodeItem) {
|
|
|
// 同步实现的代码处理方式 可以返回单个子节点的集合也可以返回子孙节点的集合
|
|
|
// 如果期望子集节点中还存在孙子节点可以打开，请在初始化数据的时候，初始化个空数组的子节点配置值{[this.childrenKey]: []}
|
|
|
|
|
|
// if(nodeItem && this.localData[nodeItem.id]) {
|
|
|
// return this.localData[nodeItem.id]
|
|
|
// } else {
|
|
|
// return []
|
|
|
// }
|
|
|
// 异步的代码实现方式 可以返回单个子节点的集合也可以返回子孙节点的集合
|
|
|
// 如果期望子集节点中还存在孙子节点可以打开，请在初始化数据的时候，初始化个空数组的子节点配置值{[this.childrenKey]: []}
|
|
|
return new Promise((resolve, reject) => {
|
|
|
setTimeout(() => {
|
|
|
if (nodeItem && self.localData[nodeItem.id]) {
|
|
|
return resolve(self.localData[nodeItem.id])
|
|
|
} else {
|
|
|
return resolve([])
|
|
|
}
|
|
|
}, 1000)
|
|
|
})
|
|
|
},
|
|
|
getTitle: function(checked) {
|
|
|
return `已选：${checked.length}项`
|
|
|
},
|
|
|
echoDefault: function() {
|
|
|
const selectIds = ['2-1', '3-3-35']
|
|
|
this.checkedTreeData(this.treeData, selectIds)
|
|
|
// console.log('treeData的数据：', this.treeData)
|
|
|
this.multiple = true
|
|
|
this.$refs.nextTreeRef.showTree = true
|
|
|
},
|
|
|
itemclick: function(_multiple, _selectParent, _checkStrictly = false) {
|
|
|
this.multiple = _multiple
|
|
|
this.selectParent = _selectParent
|
|
|
this.checkStrictly = _checkStrictly
|
|
|
this.$refs.nextTreeRef.showTree = true
|
|
|
},
|
|
|
checkedTreeData: function(treeData, selectIds) {
|
|
|
// 注意 vue2当数据深嵌套时，如果没有在treeData里面初始化checked属性，那在改变数据的时候直接将checked属性赋值为true，这时候ui界面有可能不会更新，
|
|
|
// 这时候建议使用this.$set去更新checked属性值，或者在初始化this.treeData的时候初始化checked属性
|
|
|
(treeData || []).map(item => {
|
|
|
if (selectIds.indexOf(item.id) !== -1) {
|
|
|
item.checked = true
|
|
|
} else {
|
|
|
item.checked = false
|
|
|
}
|
|
|
if (item.children && item.children.length) {
|
|
|
this.checkedTreeData(item.children, selectIds)
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
onconfirm: function(list) {
|
|
|
this.$emit("choosePerson", list)
|
|
|
// console.log('选中项的数量列表list：', list)
|
|
|
},
|
|
|
oncancel: function() {
|
|
|
// 清除treeData的选中状态
|
|
|
this.checkedTreeData(this.treeData, [])
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
self = this
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="scss">
|
|
|
page {
|
|
|
box-sizing: border-box !important;
|
|
|
padding: 24rpx;
|
|
|
background-color: #eff0f4;
|
|
|
|
|
|
/deep/.uni-swipe {
|
|
|
background-color: #fff;
|
|
|
padding: 15rpx 0 15rpx 10rpx;
|
|
|
}
|
|
|
|
|
|
/deep/.uni-card {
|
|
|
border-radius: 10rpx;
|
|
|
}
|
|
|
|
|
|
/deep/.u-list {
|
|
|
height: 0 !important;
|
|
|
}
|
|
|
|
|
|
/deep/.u-row {
|
|
|
margin-bottom: 10rpx;
|
|
|
padding: 10rpx 30rpx;
|
|
|
border-radius: 10rpx;
|
|
|
display: flex;
|
|
|
justify-content: space-between !important;
|
|
|
background-color: #f9fbfc;
|
|
|
|
|
|
:first-child {
|
|
|
color: black;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/deep/.uni-date-x--border {
|
|
|
border: none;
|
|
|
padding: 15rpx;
|
|
|
border-radius: 0;
|
|
|
}
|
|
|
|
|
|
/deep/.uniui-calendar {
|
|
|
|
|
|
color: #454545;
|
|
|
font-weight: 500;
|
|
|
font-size: 28rpx;
|
|
|
}
|
|
|
|
|
|
/deep/.uniui-calendar:before {
|
|
|
content: none;
|
|
|
}
|
|
|
|
|
|
/deep/.input1 .uniui-calendar :before {
|
|
|
content: '开始日期';
|
|
|
font-weight: 500;
|
|
|
font-size: 30rpx;
|
|
|
color: #333333;
|
|
|
}
|
|
|
|
|
|
/deep/.input2 .uniui-calendar :before {
|
|
|
content: '结束日期';
|
|
|
}
|
|
|
|
|
|
/deep/.uni-icons {
|
|
|
color: #171819 !important;
|
|
|
font-size: 30rpx !important;
|
|
|
}
|
|
|
|
|
|
/deep/.uni-date__x-input {
|
|
|
padding-left: 50rpx;
|
|
|
}
|
|
|
|
|
|
/deep/.uni-date-x {
|
|
|
background: #F5F6FA;
|
|
|
border-radius: 20rpx;
|
|
|
padding: 10rpx 15rpx;
|
|
|
}
|
|
|
|
|
|
/deep/.uni-swipe_box {
|
|
|
background: #F5F6FA;
|
|
|
border-radius: 20rpx;
|
|
|
padding: 26rpx 22rpx;
|
|
|
}
|
|
|
|
|
|
.paibanCard {
|
|
|
margin-bottom: 15rpx;
|
|
|
|
|
|
.title {
|
|
|
margin-bottom: 15rpx;
|
|
|
font-family: Noto Sans S Chinese;
|
|
|
font-weight: bold;
|
|
|
font-size: 30rpx;
|
|
|
color: #333333;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
|
|
|
.line {
|
|
|
width: 4rpx;
|
|
|
height: 30rpx;
|
|
|
background: #358FFE;
|
|
|
border-radius: 2rpx;
|
|
|
margin-right: 20rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.pickTime {
|
|
|
background-color: #fff;
|
|
|
border-radius: 10rpx;
|
|
|
padding: 43rpx 20rpx;
|
|
|
}
|
|
|
|
|
|
.pickPerson {
|
|
|
background-color: #fff;
|
|
|
border-radius: 20rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
// padding: 15rpx;
|
|
|
justify-content: space-between;
|
|
|
// margin-bottom: 15rpx;
|
|
|
}
|
|
|
|
|
|
.picktitle {
|
|
|
font-family: Noto Sans S Chinese;
|
|
|
font-weight: 400;
|
|
|
font-size: 30rpx;
|
|
|
color: #333333;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.addPaiBan {
|
|
|
width: 85%;
|
|
|
background: linear-gradient(0deg, #2A86FF, #8FBCFF);
|
|
|
font-weight: 400;
|
|
|
font-size: 36rpx;
|
|
|
color: #FFFFFF;
|
|
|
line-height: 38rpx;
|
|
|
text-align: center;
|
|
|
padding: 20rpx;
|
|
|
border-radius: 40rpx;
|
|
|
margin: 50rpx auto;
|
|
|
}
|
|
|
}
|
|
|
</style> |
