remuneration/src/views/system/workflow/workflowApproved.vue

<template>
  <m-dialog title="审核配置" ref="dialog" @sure="onSure">
    <el-form label-width="70px" >
      <el-form-item label="工作流">
        <el-tag>{{ item.workFlowTmplate?.name }}</el-tag>
      </el-form-item>
      <el-form-item label="处理方">
        <m-card shadow="never">
          <el-form ref="form" inline :model="formValues">
            <m-card
              v-for="(item, index) in formValues.items"
              :key="item.key"
              class="mb-5 cardBox"
            >
              <el-form-item label="处理对象" :prop="`items.${index}.handleType`">
                <el-select v-model="item.handleType" placeholder="请选择处理对象" @change="onChange(item)">
                  <el-option v-for="val in items" :key="val.value" :label="val.title" :value="val.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item v-if="item.handleType < 2" label="处理方" :prop="`items.${index}.handleValue`" :rules="{ required: item.handleType < 2, message: '请选择处理方', trigger: 'change' }">
                <el-cascader
                  v-model="item.handleValue"
                  :ref="`cascader_${index}`"
                  placeholder="请选择处理方"
                  :show-all-levels="false"
                  filterable
                  :options="options[item.handleType]"
                  :props="{
                    emitPath: false,
                    value: 'id',
                    label: 'title',
                    children: 'child'
                  }"
                  @change="onChangeCascader(item, `cascader_${index}`)"
                ></el-cascader>
              </el-form-item>
              <div class="button-group">
                <m-button :disabled="index === 0" icon="el-icon-top" circle size="mini" @click="onUp(index)"></m-button>
                <m-button :disabled="index === formValues.items.length - 1" icon="el-icon-bottom" circle size="mini" @click="onDown(index)"></m-button>
                <m-button type="danger" icon="el-icon-delete" circle size="mini" @click="onDelete(index)"></m-button>
              </div>
            </m-card>
          </el-form>
          <div class="text-center">
            <el-button type="orange" @click="onAdd" size="small" icon="el-icon-plus">新增一条记录</el-button>
          </div>
        </m-card>
      </el-form-item>
    </el-form>
  </m-dialog>
</template>

<script>
import {
  saveWorkflow
} from '@/api/workflow'
import {
  getOrganizationAtlasAll,
  getDictList
} from '@/api/system'
import { mapGetters } from 'vuex'
import { cloneDeep } from 'lodash'
export default {
  name: 'workflowApproved',
  data () {
    return {
      key: 0,
      formValues: {
        items: [
          {
            key: 0,
            handleType: 0,
            handleValue: null,
            handleValueData: {}
          }
        ]
      },
      item: {},
      options: [],
      items: []
    }
  },
  computed: {
    ...mapGetters(['organizationTree']),
    personOrganizationTree () {
      return cloneDeep(this.organizationTree)
    },
    postOrganizationTree () {
      return cloneDeep(this.organizationTree)
    }
  },
  methods: {
    async open (item) {
      this.item = item
      this.$refs.dialog.open()
      this.loading = true
      await this.getDict()
      this.formValues.items = item.workFlowTmplateItems.map((e, index) => {
        return {
          handleType: +e.handleType,
          handleValue: +e.handleType === 0 ? e.handleValue.userId : e.handleValue.postName,
          handleValueData: e.handleValue, // 回显
          key: index
        }
      })
      this.key = item.workFlowTmplateItems.length + 1
      try {
        const { data: person } = await getOrganizationAtlasAll({ type: 0 })
        this.options.push([person])
        const { data: post } = await getOrganizationAtlasAll({ type: 1 })
        this.options.push([post])
      } catch (error) {
        this.$message.error(error)
      } finally {
        this.loading = false
      }
    },
    async getDict () {
      try {
        const { data } = await getDictList()
        this.items = data.find(e => e.category === 'workFlowHandleTypeEnum')?.dictVos ?? []
      } catch (error) {
        this.$message.error(error)
      }
    },
    onAdd () {
      this.key++
      this.formValues.items.push({
        key: this.key,
        handleType: 0,
        handleValue: null,
        handleValueData: {}
      })
    },
    // 向上移动一位
    onUp (index) {
      if (index === 0) return
      const temp = this.formValues.items[index]
      this.formValues.items.splice(index, 1)
      this.formValues.items.splice(index - 1, 0, temp)
    },
    // 向下移动一位
    onDown (index) {
      if (index === this.formValues.items.length - 1) return
      const temp = this.formValues.items[index]
      this.formValues.items.splice(index, 1)
      this.formValues.items.splice(index + 1, 0, temp)
    },
    // 删除
    onDelete (index) {
      this.formValues.items.splice(index, 1)
    },
    // 情况选项
    onChange (item) {
      item.handleValue = null
    },
    // 提交参数格式化
    onChangeCascader (item, ref) {
      if (item.handleType === 0) {
        item.handleValueData = {
          userId: item.handleValue
        }
        return
      }
      const node = this.$refs[ref][0].getCheckedNodes()[0]
      item.handleValueData = {
        organizationNo: node.parent.value,
        postName: node.value
      }
    },
    onSure () {
      this.$refs.form.validate(async valid => {
        if (!valid) return
        try {
          await saveWorkflow({
            workFlowTmplateItems: this.formValues.items.map((e, index) => {
              return {
                handleType: e.handleType,
                handleValue: e.handleValueData,
                sort: index
              }
            }),
            workFlowTmplate: {
              workFlowTmplateId: this.item.workFlowTmplate.workFlowTmplateId
            }
          })
          this.$message.success('保存成功')
          this.$refs.dialog.close()
        } catch (error) {
          this.$message.error(error)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.cardBox {
  position: relative;
  overflow: visible;
  .button-group {
    position: absolute;
    right: 10px;
    top: -20px;
  }
}
</style>