hitch-sb-antd/src/views/test/modules/BaseForm.vue

<template>
  <a-drawer title="编辑" placement="right" :closable="false" :visible="visible" @close="onClose">
    <a-form :form="form">
      <a-form-item label="节点名称">
        <a-input v-decorator="['name', {rules: [{required: true, message: '节点名称不能为空'}]}]" />
      </a-form-item>
      <a-form-item label="所属部门">
        <a-tree-select v-decorator="['deptId', {rules: [{required: true, message: '审核人不能为空'}]}]" style="width: 100%" :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" :replaceFields="replaceFields" :tree-data="treeData" placeholder="请选择" tree-default-expand-all @change="handleDept">
        </a-tree-select>
      </a-form-item>
      <a-form-item label="审核人">
        <a-select v-decorator="['verifier', {rules: [{required: true, message: '审核人不能为空'}]}]" placeholder="请选择">
          <a-select-option v-for="{realName, userId} in verifierList" :key="userId" :label="realName" :value="userId">{{ realName }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="配置类型" v-show="false">
        <a-input v-decorator="['reflect', {initialValue:'reflect'}]">
        </a-input>
      </a-form-item>
      <a-form-item label="条件类">
        <a-select v-decorator="['titleCode', {rules: [{required: true, message: '条件类不能为空'}]}]" placeholder="请选择" @change="handleTitleCode">
          <a-select-option v-for="{title, titleCode} in customCodeList" :key="titleCode" :label="title" :value="titleCode">{{ title }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="条件名称">
        <a-select v-decorator="['titleColumnCode', {rules: [{required: true, message: '条件名称不能为空'}]}]" placeholder="请选择" @change="handleTitleColumnCode">
          <a-select-option v-for="{titleColumnName, titleColumnCode} in customClassNameList" :key="titleColumnCode" :label="titleColumnName" :value="titleColumnCode">{{ titleColumnName }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="处理类">
        <a-select v-decorator="['handleNameId', {rules: [{required: true, message: '条件类不能为空'}]}]" placeholder="请选择">
          <a-select-option v-for="{handleName, id} in handleNameList" :key="id" :label="handleName" :value="id">{{ handleName }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <!-- <a-form-item label="描述">
        <a-input v-decorator="['seatNumber']" />
      </a-form-item> -->

    </a-form>
    <div class="btn">
      <a-button :loading="confirmLoading" type="primary" @click="save">保存</a-button>
    </div>
  </a-drawer>
</template>

<script>
import pick from 'lodash.pick'
import { getDeptTree } from '@/api/upms/dept'
import { queryUserByDept } from '@/api/upms/user'
import { getCustomClassNameList, getCustomCodeList } from '@/api/custom/className'
export default {
  data() {
    return {
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      record: {},
      replaceFields: {
        key: 'id',
      },
      verifierList: [],
      treeData: [],
      classNameCodeMap: {},
      customCodeList: [],
      customClassNameList: [],
    }
  },
  created() {
    getDeptTree().then((res) => {
      this.treeData = this.setTree(res.data)
    })
    getCustomCodeList({ code: 'reflect' }).then((res) => {
      this.customCodeList = res.data
    })
  },
  methods: {
    setTree(list) {
      return list.map((item) => {
        return {
          title: item.title,
          key: item.id,
          value: item.id,
          children: item.children ? this.setTree(item.children) : [],
        }
      })
    },
    handleDept(deptId) {
      queryUserByDept({ deptId }).then((res) => {
        this.verifierList = res.data
      })
    },
    handleTitleCode(val) {
      this._titleCode = val
      getCustomClassNameList({
        code: 'reflect',
        titleCode: val,
      }).then((res) => {
        this.customClassNameList = res.data
      })
    },
    handleTitleColumnCode(val) {
      this._titleCode = val
      getCustomClassNameList({
        code: 'reflect',
        titleColumnCode: this._titleCode,
        titleCode: val,
      }).then((res) => {
        this.handleNameList = res.data
      })
    },
    base(record) {
      this.visible = true
      this.record = record
      const {
        form: { setFieldsValue },
      } = this
      this.$nextTick(() => {
        setFieldsValue(Object.assign(pick(record, ['name'])))
      })
    },
    save() {
      const {
        form: { validateFieldsAndScroll },
      } = this
      this.confirmLoading = true
      validateFieldsAndScroll((errors, values) => {
        if (errors) {
          this.confirmLoading = false
          return
        }
        this.record.name = values.name
        this.confirmLoading = false
        this.onClose()
      })
    },
    onClose() {
      this.visible = false
    },
  },
}
</script>

<style lang="less" scoped>
.btn {
  text-align: center;
}
</style>