hitch-sb-antd/src/views/activiti/user-model/modules/BaseForm.vue

<template>
  <a-modal
    :title="modalTitle"
    :width="1200"
    :visible="visible"
    :confirmLoading="confirmLoading"
    class="ant-modal2"
    @cancel="handleCancel"
  >
    <a-row :gutter="48" slot="extra">
      <a-col :md="48" :sm="48">
        <span class="table-page-search-submitButtons" style="float: right">
          <a-button :loading="confirmLoading" type="primary" @click="save()">保存</a-button>
          <a-button style="margin-left: 8px" type="default" @click="handleCancel()">返回</a-button>
        </span>
      </a-col>
    </a-row>
    <a-form :form="form">

      <a-form-item v-show="false">
        <a-input v-decorator="['id']" type="hidden"/>
        <a-input v-decorator="['assignee']" type="hidden"/>
        <a-input v-decorator="['roleId']" type="hidden"/>
      </a-form-item>

      <row-list :col="2">
        <row-item>

          <a-form-item
            label="模型id"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-input
              disabled
              v-decorator="['reModelId', {rules: [{required: true, message: '模型id不能为空'}]}]"/>
          </a-form-item>
        </row-item>
        <row-item>

          <a-form-item
            label="节点名称"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-input
              disabled
              v-decorator="['name', {rules: [{required: true, message: '节点名称不能为空'}]}]"/>
          </a-form-item>
        </row-item>
        <row-item>

          <a-form-item
            label="类型"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-select
             @change="$event => onChangeType($event)"
              v-decorator="['type', {rules: [{required: true, message: '类型不能为空'}]}]"
              placeholder="请选择">
              <a-select-option
                v-for="(label,value) in typeMap"
                :key="value"
                :label="label"
                :value="parseInt(value)">{{ label }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </row-item>
        <row-item v-show='visibleOne'>
          <a-form-item
            label="指定审批人"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-input
              style="width: 60%"
              v-decorator="['realName', {rules: [{required: false, message: '审批人不能为空'}]}]"/>
            <a-button type="primary" style="width: 20%" @click="handleUserSelect">选择</a-button>
            <a-button type="default" style="width: 20%" @click="clearUserSelect">清空</a-button>
          </a-form-item>
        </row-item>
<!--        <row-item>
          <a-form-item
            label="指定部门"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-tree-select
              style="width: 70%"
              :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
              :treeData="treeData"
              :treeNodeFilterProp="'title'"
              :showSearch="true"
              v-decorator="['deptId', {rules: [{required: false, message: '不能为空'}]}]"
              placeholder="请选择"
            >
            </a-tree-select>
            <a-button type="default" style="width: 30%" @click="clearDeptSelect">清空</a-button>
          </a-form-item>
        </row-item>-->
        <row-item v-show='visibleOne'>
          <a-form-item
            label="指定角色"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol">
            <a-select
              style="width: 70%"
              v-decorator="['roleId', { rules: [{required: false, message: '指定角色不能为空'}]}]"
              placeholder="请选择">
              <a-select-option
                v-for="item in roleList"
                :key="item.roleId"
                :label="item.roleName"
                :value="item.roleId">{{ item.roleName }}</a-select-option>
            </a-select>
            <a-button style="width: 30%" type="default" @click="clearRoleSelect">清空</a-button>
          </a-form-item>
        </row-item>
        <row-item>
          <a-form-item
            label="多个角色"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-select
              style="width: 70%"
              :show-search="true"
              :filter-option="BaseTool.ANTD.selectFilterOption"
              v-decorator="['roleIdsList', {rules: [{required: false, message: '流程变量不能为空'}]}]"
              mode="multiple">
              <a-select-option
                v-for="item in roleList"
                :key="item.roleId"
                :label="item.roleName"
                :value="item.roleId">{{ item.roleName }}</a-select-option>
            </a-select>
            <a-button style="width: 30%" type="default" @click="clearRoleListSelect">清空</a-button>
          </a-form-item>
        </row-item>

        <row-item>

          <a-form-item
            label="流程变量"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-input
              v-decorator="['formVariable', {rules: [{required: false, message: '流程变量不能为空'}]}]"/>
          </a-form-item>
        </row-item>
        <row-item>
          <a-form-item
            label="备注"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-input
              v-decorator="['remark', {rules: [{required: true, message: '备注不能为空'}]}]"/>
          </a-form-item>
        </row-item>
      </row-list>
    </a-form>
    <template slot="footer">
      <a-button :loading="confirmLoading" type="primary" @click="save()">保存</a-button>
    </template>
    <user-select-modal ref="userSelectModal" @selected="handleUserSelected"/>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'
import { addActivitiUserModel, updateActivitiUserModel } from '@/api/activiti/user-model'
import UserSelectModal from '@/views/upms/user/modules/UserSelectModal'
export default {
  name: 'BaseActivitiUserModel',
  components: {
    UserSelectModal
  },
  data () {
    return {
      confirmLoading: false,
      modalTitle: null,
      form: this.$form.createForm(this),
      visible: false,
      roleIdList: [],
      checkedKeys: [],
      autoExpandParent: true,
      expandedKeys: [],
      selectedKeys: [],
      roleIdsList: [],
      // 下拉框map
      typeMap: {},
      visibleOne: true
    }
  },
  props: {
    roleList: {
      type: Array,
      default: () => ({})
    },
    treeData: {
      type: Array,
      default: () => ({})
    }
  },
  created () {
    // 下拉框map
    this.typeMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.ACTIVITI_USER_MODEL_TYPE)
  },
  methods: {
    base (record) {
      this.visible = true
      this.form.resetFields()
      // 如果是空标识添加
      if (this.BaseTool.Object.isBlank(record)) {
        this.modalTitle = '添加'
        return
      }
      this.modalTitle = '编辑'
      const { form: { setFieldsValue } } = this
      if (!this.BaseTool.Object.isBlank(record.sbList)) {
        this.sbList = JSON.parse(record.sbList)
      }
      /* if (!this.BaseTool.Object.isBlank(record.roleIdList)) {
        record.roleIdList = JSON.parse(record.roleIdList)
      } */
      // 日期处理
      // setFieldsValue(pick(record, ['id', 'reModelId', 'name', 'type', 'assignee', 'roleId', 'deptId', 'realName', 'formVariable', 'remark', 'roleIdsList']))
      this.$nextTick(() => {
        setFieldsValue(Object.assign(pick(record, [
          'id',
          'reModelId',
          'name',
          'type',
          'assignee',
          'roleId',
          'deptId',
          'realName',
          'formVariable',
          'remark',
          'roleIdsList'
        ])))
      })
    },
    save () {
      const { form: { validateFieldsAndScroll } } = this
      this.confirmLoading = true
      validateFieldsAndScroll((errors, values) => {
        if (errors) {
          this.confirmLoading = false
          return
        }
        // 日期处理
        values.roleIdList = JSON.stringify(values.roleIdsList)
        if (this.BaseTool.String.isBlank(values.id)) {
          addActivitiUserModel(values)
            .then(() => {
              this.handleCancel(values)
            }).catch(() => {
              this.confirmLoading = false
            })
        } else {
          updateActivitiUserModel(values)
            .then(() => {
              this.handleCancel(values)
            }).catch(() => {
              this.confirmLoading = false
            })
        }
      })
    },
    handleUserSelect () {
      this.$refs.userSelectModal.base({})
    },
    handleUserSelected (keys, rows) {
      // const [ key ] = keys
      const [ row ] = rows
      const { form: { setFieldsValue } } = this
      // 日期处理
      this.$nextTick(() => {
        setFieldsValue(Object.assign({
          'assignee': row.userId,
          'realName': row.realName
        }))
      })
    },
    clearUserSelect () {
      const { form: { setFieldsValue } } = this
      // 日期处理
      this.$nextTick(() => {
        setFieldsValue(Object.assign({
          'assignee': null,
          'realName': null
        }))
      })
    },
    clearRoleSelect () {
      const { form: { setFieldsValue } } = this
      // 日期处理
      this.$nextTick(() => {
        setFieldsValue(Object.assign({
          'roleId': null
        }))
      })
    },
    clearRoleListSelect () {
      this.roleIdList = []
    },
    clearDeptSelect () {
      const { form: { setFieldsValue } } = this
      // 日期处理
      this.$nextTick(() => {
        setFieldsValue(Object.assign({
          'deptId': null
        }))
      })
    },
    handleCancel (values) {
      this.visible = false
      this.confirmLoading = false
      this.form.resetFields()
      if (this.BaseTool.Object.isNotBlank(values)) {
        this.$emit('ok', values)
      } else {
        this.$emit('ok')
      }
    },
    onChangeType (val) {
      if (val === 8) {
        this.visibleOne = false
      }
    }
  }
}
</script>