需求为可动态选择用户及部门，并具备回显功能
结合antv x6 流程图，实现需求，每个流程图节点均可设置当前节点对应审批部门和用户，部门会签节点可设置多部门多用户，动态添加部门及用户。文章来源：https://www.toymoban.com/news/detail-506105.html
当前节点已配置人员部门可回显，当前节点已配置人员删除，回显为空。文章来源地址https://www.toymoban.com/news/detail-506105.html
<template>
<div>
<el-dialog
title="设置"
:visible.sync="dialogFormVisible"
width="52%"
:before-close="handleClose"
:close-on-click-modal="false"
>
<el-form ref="dataForm" :model="dataForm">
<el-row :gutter="24">
<el-col :span="8">
<el-form-item label="当前节点：" label-width="120px">
<div style="font-size: 16px; color: #999; font-weight: 600">
{{ title }}
</div>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item
v-if="[2, 3].includes(type)"
label="所属公司："
label-width="120px"
>
<div style="font-size: 16px; color: #999; font-weight: 600">
{{ companyName }}
</div>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item
v-if="type === 3"
label="项目名称："
label-width="120px"
>
<div style="font-size: 16px; color: #999; font-weight: 600">
{{ projectCompanyName }}
</div>
</el-form-item>
</el-col>
</el-row>
<div v-for="(item, index) in dataForm.selectForm">
<el-form-item
:key="index + '.region'"
label="选择部门："
:prop="'selectForm.' + index + '.region'"
:rules="{
required: true,
message: '请选择部门',
trigger: 'change'
}"
>
<el-select
v-model="item.region"
placeholder="请选择部门"
clearable
@change="
(val) => {
changeDeptId(val, index, item)
}
"
>
<el-option
v-for="(item, index) in departmentList"
:key="item.value + index"
:label="item.label"
:value="item.value"
:disabled="
title === '部门会签'
? selectedDeptId.includes(item.value)
: false
"
/>
</el-select>
<i
v-if="title === '部门会签'"
:class="
index === 0
? 'el-icon-user-solid solid-btn'
: 'el-icon-delete-solid solid-btn'
"
@click="depIdListChange(index)"
></i>
</el-form-item>
<el-form-item
:key="index + '.name'"
label="选择用户："
:prop="'selectForm.' + index + '.name'"
:rules="{
required: true,
message: '请选择用户',
trigger: 'change'
}"
>
<el-select v-model="item.name" placeholder="请选择用户" clearable>
<el-option
v-for="(item, index) in userList[index]"
:key="item.value + index"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</div>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="handleClose">取 消</el-button>
<el-button type="primary" @click="handleCheck">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: 'ViewDeails',
components: {},
props: {},
data() {
return {
dialogFormVisible: false, // 弹框开关
dataForm: {
selectForm: []
},
departmentList: [], // 选择部门
userList: {
0: []
}, // 选择用户
x: null,
y: null,
cell: null,
e: null,
view: null,
title: null,
id: '',
changeId: null, // 修改配置参数
deptid: [], // 部门列表
userid: [], //用户列表
selectList: [], // 部门会签列表
assigneeName: null, // 节点常量
companyName: null, // 所属公司
projectCompanyName: null, // 所属companyName部门名称
companyCode: null, // 部门code
type: null, // 1 - 集团 2- 工程 3- 项目工区 4- 指挥部
selectedDeptId: [], // 选中的部门id数组
userMessage: null // 选择用户是否存在
}
},
computed: {},
watch: {},
created() {},
mounted() {
// this.constantNode()
},
methods: {
show(
e,
x,
y,
cell,
name,
code,
projectName,
projectCode,
id,
changeId,
deptid,
userid
) {
this.x = x
this.y = y
this.cell = cell
this.id = id
this.changeId = changeId
this.companyName = name
this.companyCode = code
this.projectCompanyCode = projectCode
this.projectCompanyName = projectName
this.title = cell.store.data.attrs.text.text
? cell.store.data.attrs.text.text
: e.target.innerHTML
this.type = this.$route.query.companyType
this.dialogFormVisible = true
this.dataForm.selectForm = []
this.queryCompanyList()
// 判断部门及用户数据是否已配置
if (deptid || userid) {
this.depEcho(deptid, userid)
} else {
this.dataForm.selectForm.push({
region: '',
name: ''
})
}
},
// 部门回显 - 函数提取出来，减少代码多次调用，提高性能
// 当前回显数据和数据库当前部门下用户匹配则正确回显，若当前人员已在数据库删除，则清空回显数据
depEcho(deptid, userid) {
this.deptid = deptid.split(',')
this.userid = userid.split(',')
for (var i = 0; i < this.deptid.length; i++) {
const item = this.deptid[i]
this.dataForm.selectForm.push({
region: item,
name: ''
})
this.getUserList(item, i, true)
}
},
// 部门改变事件
changeDeptId(deptId, index, val) {
this.getSelectedIdList()
this.getUserList(deptId, index)
val.name = ''
},
// 更新选中部门的id数组
getSelectedIdList() {
this.selectedDeptId = this.dataForm.selectForm.map((item) => {
return item.region
})
},
// 获取用户列表
async getUserList(deptId, index, isEdit) {
const res = await this.$api2.processConfiguration.getUserList({
deptId
})
this.$set(this.userList, index, res)
if (!isEdit) return
this.userEcho(res,index)
},
// 用户回显
userEcho(userList,index) {
for (let i = 0; i < userList.length; i++) {
const value = userList[i].value
if (this.userid.includes(value)) {
this.dataForm.selectForm[index].name = value
break
} else {
this.dataForm.selectForm[index].name = ''
}
}
},
// 部门、人员 添加/删除事件
depIdListChange(index) {
if (index === 0) {
this.dataForm.selectForm.push({ region: '', name: '' })
} else {
this.dataForm.selectForm.splice(index, 1)
this.getSelectedIdList()
}
this.userList[index] = []
},
// 获取部门列表
async queryCompanyList() {
// type: null // 1 - 集团 2- 工程 3- 项目工区 4- 指挥部
if (this.type === 1 || this.type === 2) {
this.departmentList = await this.$api2.processConfiguration.getDeptList(
{
companyCode: this.companyCode
}
)
} else if (this.type === 3 || this.type === 4) {
this.departmentList = await this.$api2.processConfiguration.getDeptList(
{
companyCode: this.projectCompanyCode
}
)
}
},
// 提交保存节点配置
handleCheck() {
this.constantNode()
this.$refs.dataForm.validate((valid) => {
let regionList = [] // 部门会签节点 -部门数据
let userList = [] // 部门会签节点 -用户数据
this.dataForm.selectForm.forEach((item) => {
regionList.push(item.region)
userList.push(item.name)
})
if (valid) {
this.$api2.processConfiguration
.saveFlowConfigDetail({
assigneeName: this.assigneeName,
deptIds: regionList.toString(),
flowConfigId: this.id,
id: this.changeId,
userIds: userList.toString()
})
.then(() => {
this.dialogFormVisible = false
this.$message.success('配置成功')
this.$emit('change', this.x, this.y, this.cell)
})
.catch(() => {})
} else {
return false
}
})
},
initData() {
// 造成多次点击确定然后打开新增弹框触发校验的原因，就是新增了region 和 name 为空，触发表单校验，关闭弹框应将全部数据置空，而不是新增属性触发校验
// this.dataForm = { selectForm: [{ region: '', name: '' }] }
this.dataForm = {
selectForm: []
}
this.userList[0] = []
this.departmentList = []
this.selectedDeptId = []
this.$refs.dataForm.clearValidate()
},
// 取消按钮
handleClose() {
this.initData()
this.dialogFormVisible = false
this.$refs.dataForm.resetFields()
},
// 常量节点 - 对应后台常量解析前台对应node节点
// type： 1 - 集团 2- 工程 3- 项目工区 4- 指挥部
// this.$route.query.flowType： 1 - 标准流程配置 2-变更注销流程
/* 指挥部变更标准流程和工程公司变更标准流程相同*/
constantNode() {
const nodeMapping = {
1: {
1: {
node1: 'groupCompanyAdministratorFormalExaminationAssignee',
node2: 'groupCompanyExpertCrewList',
node3: 'groupCompanyDesigningInstituteAdministratorAssignee',
node4: 'groupCompanyDesigningInstituteAuditorAssignee',
node5: 'groupCompanyExpertLeaderAssignee',
node6: 'groupCompanyDesigningInstituteAdministratorAssignee',
node7: 'groupCompanyDesigningInstituteDeanAssignee',
node8: 'groupCompanyAdministratorExamineAssignee',
node9: 'groupCompanyTechnologyMinisterAssignee',
node10: 'groupCompanyChiefEngineerAssignee',
node11: 'groupCompanyAdministratorReturnAssignee'
},
2: {
node1: 'changeGroupCompanyAdministratorAssignee',
node2: 'changeGroupCompanyTechnologyMinisterAssignee',
node3: 'changeGroupCompanyChiefEngineerAssignee',
node5: 'changeGroupCompanyAdministratorReturnAssignee'
}
},
2: {
1: {
node1: 'engineeringCompanyAdministratorAssignee',
node3: 'engineeringCompanyDeptCounterSignList',
node5: 'engineeringCompanyExpertList',
node6: 'engineeringCompanyAdministratorReturnAssignee',
node7: 'engineeringCompanySafetyDirectorAssignee',
node8: 'engineeringCompanyChiefEngineerAssignee'
},
2: {
node1: 'changeEngineeringCompanyAdministratorAssignee',
node2: 'changeEngineeringCompanyChiefEngineerAssignee',
node3: 'changeEngineeringCompanyAdministratorReturnAssignee'
}
},
3: {
1: {
node1: 'projectInitiatorAssignee',
node2: 'projectDeptCounterSignList',
node3: 'projectSafetyDirectorAssignee',
node4: 'projectChiefEngineerAssignee',
node5: 'projectManagerAssignee',
node6: 'projectInformantArchiveAssignee'
},
2: {
node1: 'changeProjectChiefEngineerInitiatorAssignee',
node2: 'changeProjectManagerAssignee'
}
},
4: {
1: {
node1: 'headquartersDeptCounterSignList',
node2: 'headquartersSafetyDirectorAssignee',
node3: 'headquartersChiefEngineerAssignee',
node4: 'headquartersCommanderAssignee',
node5: 'headquartersAdministratorReturnAssignee'
},
2: {
node1: 'changeEngineeringCompanyAdministratorAssignee',
node2: 'changeEngineeringCompanyChiefEngineerAssignee',
node3: 'changeEngineeringCompanyAdministratorReturnAssignee'
}
}
}
const type = this.type
const queryFlowType = this.$route.query.flowType
const node = this.cell.id
if (
!nodeMapping[type] ||
!nodeMapping[type][queryFlowType] ||
!nodeMapping[type][queryFlowType][node]
) {
return
}
this.assigneeName = nodeMapping[type][queryFlowType][node]
}
}
}
</script>
<style scoped>
::v-deep .el-form-item__content {
display: flex;
}
.solid-btn {
margin-left: 10px;
cursor: pointer;
font-size: 16px;
}
</style>
到了这里，关于Element UI form表单及select下拉框实现动态添加和删除的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
