需求為可動(dòng)態(tài)選擇用戶及部門，并具備回顯功能

結(jié)合antv x6 流程圖，實(shí)現(xiàn)需求，每個(gè)流程圖節(jié)點(diǎn)均可設(shè)置當(dāng)前節(jié)點(diǎn)對應(yīng)審批部門和用戶，部門會(huì)簽節(jié)點(diǎn)可設(shè)置多部門多用戶，動(dòng)態(tài)添加部門及用戶。

當(dāng)前節(jié)點(diǎn)已配置人員部門可回顯，當(dāng)前節(jié)點(diǎn)已配置人員刪除，回顯為空。文章來源地址http://www.zghlxwxcb.cn/news/detail-506105.html

<template>
  <div>
    <el-dialog
      title="設(shè)置"
      :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="當(dāng)前節(jié)點(diǎn)：" 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="項(xiàng)目名稱："
              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 === '部門會(huì)簽'
                    ? selectedDeptId.includes(item.value)
                    : false
                "
              />
            </el-select>
            <i
              v-if="title === '部門會(huì)簽'"
              :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, // 彈框開關(guān)
      dataForm: {
        selectForm: []
      },
      departmentList: [], // 選擇部門
      userList: {
        0: []
      }, // 選擇用戶
      x: null,
      y: null,
      cell: null,
      e: null,
      view: null,
      title: null,
      id: '',
      changeId: null, // 修改配置參數(shù)
      deptid: [], // 部門列表
      userid: [], //用戶列表
      selectList: [], // 部門會(huì)簽列表
      assigneeName: null, // 節(jié)點(diǎn)常量
      companyName: null, // 所屬公司
      projectCompanyName: null, // 所屬companyName部門名稱
      companyCode: null, // 部門code
      type: null, // 1 - 集團(tuán) 2- 工程 3- 項(xiàng)目工區(qū) 4- 指揮部
      selectedDeptId: [], // 選中的部門id數(shù)組
      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()
      // 判斷部門及用戶數(shù)據(jù)是否已配置
      if (deptid || userid) {
        this.depEcho(deptid, userid)
      } else {
        this.dataForm.selectForm.push({
          region: '',
          name: ''
        })
      }
    },

    // 部門回顯  - 函數(shù)提取出來，減少代碼多次調(diào)用，提高性能
    // 當(dāng)前回顯數(shù)據(jù)和數(shù)據(jù)庫當(dāng)前部門下用戶匹配則正確回顯，若當(dāng)前人員已在數(shù)據(jù)庫刪除，則清空回顯數(shù)據(jù)
    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數(shù)組
    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 - 集團(tuán) 2- 工程 3- 項(xiàng)目工區(qū) 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
          }
        )
      }
    },

    // 提交保存節(jié)點(diǎn)配置
    handleCheck() {
      this.constantNode()
      this.$refs.dataForm.validate((valid) => {
        let regionList = [] // 部門會(huì)簽節(jié)點(diǎn) -部門數(shù)據(jù)
        let userList = [] // 部門會(huì)簽節(jié)點(diǎn) -用戶數(shù)據(jù)
        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() {
     //  造成多次點(diǎn)擊確定然后打開新增彈框觸發(fā)校驗(yàn)的原因，就是新增了region 和 name 為空，觸發(fā)表單校驗(yàn)，關(guān)閉彈框應(yīng)將全部數(shù)據(jù)置空，而不是新增屬性觸發(fā)校驗(yàn)
     // 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()
    },
    // 常量節(jié)點(diǎn) - 對應(yīng)后臺常量解析前臺對應(yīng)node節(jié)點(diǎn)
    // type： 1 - 集團(tuán) 2- 工程 3- 項(xiàng)目工區(qū) 4- 指揮部
    // this.$route.query.flowType： 1 - 標(biāo)準(zhǔn)流程配置 2-變更注銷流程
    /* 指揮部變更標(biāo)準(zhǔn)流程和工程公司變更標(biāo)準(zhǔn)流程相同*/
    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>

到了這里，關(guān)于Element UI form表單及select下拉框?qū)崿F(xiàn)動(dòng)態(tài)添加和刪除的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！