Element UI form表单及select下拉框实现动态添加和删除

需求为可动态选择用户及部门，并具备回显功能

结合antv x6 流程图，实现需求，每个流程图节点均可设置当前节点对应审批部门和用户，部门会签节点可设置多部门多用户，动态添加部门及用户。

当前节点已配置人员部门可回显，当前节点已配置人员删除，回显为空。

<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>