292 lines
8.0 KiB
Vue
292 lines
8.0 KiB
Vue
<template>
|
|
<div>
|
|
<van-field
|
|
:class="(required ? 'required ' : '') + 'form-item label-weight ' + (readonly ? 'field-readonly' : 'not-field-readonly')"
|
|
type="textarea"
|
|
:label="label"
|
|
clearable
|
|
@click="showPopup"
|
|
v-model="departmentNames"
|
|
:rules="rules"
|
|
:required="rules ? rules[0].required : false"
|
|
rows="1"
|
|
autosize
|
|
:placeholder="placeholder || $t('clickSelect') + label"
|
|
readonly
|
|
/>
|
|
|
|
<!-- 多选选择责任单位 -->
|
|
<van-popup v-if="multiple" v-model="showSelectDepartment" style="height: 60vh" position="bottom" safe-area-inset-bottom
|
|
:close-on-click-overlay="false" :close-on-popstate="true">
|
|
<div class="popup-box">
|
|
<div class="operate">
|
|
<span @click="selectDepartmentCancel">取消</span>
|
|
<span @click="selectDepartmenthandleOk">确认</span>
|
|
</div>
|
|
<select-department :data="list" :value="selectedDepartTemp" @input="selected" :multiple="true"></select-department>
|
|
</div>
|
|
</van-popup>
|
|
|
|
<!-- 单选选择责任单位 -->
|
|
<van-popup v-else v-model="showSelectDepartment" style="height: 60vh" position="bottom" safe-area-inset-bottom
|
|
:close-on-click-overlay="false" :close-on-popstate="true">
|
|
<div class="popup-box">
|
|
<div class="operate">
|
|
<span @click="selectDepartmentCancel">取消</span>
|
|
<span @click="singleSelectDepartmentHandleOk">确认</span>
|
|
</div>
|
|
<select-department :data="list" :value="singleSelectedDepartTemp" @input="selected" :multiple="false"></select-department>
|
|
</div>
|
|
|
|
<!-- <link-menu :data="list" value-key="value" label-key="title" :value="singleSelectedDepartTemp" @input="selected"></link-menu>-->
|
|
</van-popup>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import SelectDepartment from './SelectDepartment'
|
|
export default {
|
|
name: 'SelectDepartmentField',
|
|
components: { SelectDepartment },
|
|
props: {
|
|
readonly: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false
|
|
},
|
|
value: {
|
|
type: String,
|
|
required: true,
|
|
default: () => ''
|
|
},
|
|
list: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
departmentNameString: {
|
|
type: String,
|
|
default: () => ''
|
|
},
|
|
// 是否是多选,默认是多选
|
|
multiple: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false
|
|
},
|
|
// 是否必填
|
|
required: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false
|
|
},
|
|
// 校验信息
|
|
rules: {
|
|
type: [Array, null],
|
|
required: false,
|
|
default: null
|
|
},
|
|
label: {
|
|
type: String,
|
|
required: false,
|
|
default: '部门'
|
|
},
|
|
placeholder: {
|
|
type: String,
|
|
required: false,
|
|
default: ''
|
|
}
|
|
},
|
|
watch: {
|
|
departmentNameString: {
|
|
immediate: true,
|
|
deep: true,
|
|
handler (val) {
|
|
this.departmentNames = val
|
|
return val
|
|
}
|
|
},
|
|
value: {
|
|
immediate: true,
|
|
deep: true,
|
|
handler (val) {
|
|
if (val) {
|
|
console.log('测试初始化名字', val)
|
|
if (this.multiple) {
|
|
this.selectedDepartmentName = []
|
|
// 设置输入框中的显示
|
|
setTimeout(() => {
|
|
for (const item of val.split(',')) {
|
|
this.selectTitleByValue(item, this.list)
|
|
}
|
|
this.departmentNames = this.selectedDepartmentName.join(',')
|
|
}, 500)
|
|
} else {
|
|
// 设置输入框中的显示
|
|
setTimeout(() => {
|
|
this.departmentNames = this.getTitle(val, this.list)
|
|
}, 500)
|
|
}
|
|
} else {
|
|
// 说明传进来的是空
|
|
this.departmentNames = ''
|
|
}
|
|
return val
|
|
}
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
rulesObj: {
|
|
departmentId: [{ required: true, message: '请选择责任单位' }]
|
|
},
|
|
showSelectDepartment: false, // 下方选择框是否显示
|
|
selectedDepartTemp: [], // 多选选中的部门暂存
|
|
confirm: false, // 是否点击了确认
|
|
selectedDepartmentName: [], // 多选时返回的名称数组
|
|
departmentNames: '', // 责任单位名称字符串，输入框中要展示的
|
|
|
|
singleSelectedDepartTemp: undefined// 单选选中的部门暂存
|
|
}
|
|
},
|
|
methods: {
|
|
// 查询传入的value在传入的数组中是否存在，存在返回title属性值
|
|
selectTitleByValue (value, arr) {
|
|
for (const item of arr) {
|
|
if (item.value === value) {
|
|
console.log(item.title)
|
|
// 说明找到了，返回item.title
|
|
// callback(item.title)
|
|
this.selectedDepartmentName.push(item.title)
|
|
break
|
|
}
|
|
// 没有找到，如果有子树，在子树中查找
|
|
if (item.children) {
|
|
this.selectTitleByValue(value, item.children)
|
|
}
|
|
}
|
|
// 循环结束还没有找到
|
|
// return title
|
|
},
|
|
// 点击选择框中的取消
|
|
selectDepartmentCancel () {
|
|
this.showSelectDepartment = false
|
|
},
|
|
// 多选责任部门点击确认
|
|
selectDepartmenthandleOk () {
|
|
// this.$emit('input',this.selectedDepartTemp)
|
|
// this.departmentNames = this.selectedDepartTemp.join(',')
|
|
// 设置列表不展示
|
|
this.showSelectDepartment = false
|
|
// 清空已选择的责任单位名称数组
|
|
this.selectedDepartmentName = []
|
|
for (const item of this.selectedDepartTemp) {
|
|
this.selectTitleByValue(item, this.list)
|
|
}
|
|
// 设置输入框中的显示
|
|
this.departmentNames = this.selectedDepartmentName.join(',')
|
|
// 设置输入框的绑定值
|
|
this.$emit('input', this.selectedDepartTemp.join(','))
|
|
},
|
|
// 点击选择，展示选择框
|
|
showPopup () {
|
|
if (this.readonly) {
|
|
return
|
|
}
|
|
console.log(this.value)
|
|
if (this.multiple) {
|
|
console.log(Boolean(this.value))
|
|
// 是多选
|
|
this.selectedDepartTemp = JSON.parse(JSON.stringify(this.value !== '' && this.value ? this.value.split(',') : []))
|
|
} else {
|
|
// 是单选
|
|
this.singleSelectedDepartTemp = this.value || undefined
|
|
}
|
|
this.showSelectDepartment = true
|
|
},
|
|
// 选择完成的回调
|
|
selected (val) {
|
|
if (this.multiple) {
|
|
// 是多选
|
|
this.selectedDepartTemp = JSON.parse(JSON.stringify(val))
|
|
} else {
|
|
// 是单选
|
|
this.singleSelectedDepartTemp = val
|
|
}
|
|
},
|
|
// 单选责任部门确认
|
|
singleSelectDepartmentHandleOk () {
|
|
// 设置输入框中的显示
|
|
this.departmentNames = this.getTitle(this.singleSelectedDepartTemp, this.list)
|
|
// 设置输入框的绑定值
|
|
this.$emit('input', this.singleSelectedDepartTemp)
|
|
// 设置列表不展示
|
|
this.showSelectDepartment = false
|
|
},
|
|
// 从传入的数组中查找传入值的title
|
|
getTitle (value, arr) {
|
|
let result = {}
|
|
arr.forEach(item => {
|
|
const loop = data => {
|
|
if (data.value === value) {
|
|
result = data
|
|
console.log(item.title)
|
|
return item.title
|
|
}
|
|
const child = data.children
|
|
if (child) {
|
|
for (let i = 0; i < child.length; i++) {
|
|
loop(child[i])
|
|
}
|
|
}
|
|
}
|
|
loop(item)
|
|
})
|
|
return result.title
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
@import '~@assets/less/common.less';
|
|
|
|
// 解决线上滚动条不灵敏的bug
|
|
.popup-box{
|
|
height: 100%;
|
|
position: relative;
|
|
/deep/& > .list-menu {
|
|
height: calc(100% - 0.8rem);
|
|
overflow: auto;
|
|
}
|
|
}
|
|
|
|
.operate {
|
|
padding: 0 @pad-base;
|
|
box-sizing: border-box;
|
|
font-size: 0.3rem;
|
|
font-weight: 600;
|
|
height: 0.8rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.content {
|
|
width: 100%;
|
|
flex: 1;
|
|
}
|
|
|
|
.not-field-readonly {
|
|
/deep/ .van-field__control{
|
|
color: #1D2129 !important;
|
|
}
|
|
}
|
|
|
|
.field-readonly {
|
|
/deep/ .van-field__control{
|
|
color: #969799 !important;
|
|
}
|
|
}
|
|
</style>
|