[update] 修改企标立项、变更流程
This commit is contained in:
lideqin
@@ -0,0 +1,273 @@
|
||||
<template>
|
||||
<div>
|
||||
<van-field
|
||||
:class="(required ? 'required ' : '') + 'form-item label-weight'"
|
||||
type="textarea"
|
||||
:label="label"
|
||||
clearable
|
||||
@click="showPopup"
|
||||
v-model="departmentNames"
|
||||
:rules="rules"
|
||||
rows="1"
|
||||
autosize
|
||||
: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: '部门'
|
||||
}
|
||||
},
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user