welfare-admin/src/views/org/OrgForm.vue

<template>
  <a-modal
    :title="modalTitle"
    :width="900"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
    :destroyOnClose="true"
  >
    <a-spin :spinning="formLoading">
      <a-form :form="form">

        <a-form-item
          style="display: none;"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-input v-decorator="['id']" />
        </a-form-item>

        <a-form-item
          label="名称"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-input placeholder="请输入名称" v-decorator="['name', {rules: [{required: true, message: '请输入名称！'}]}]" />
        </a-form-item>

        <a-form-item
          label="唯一编码"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-input placeholder="请输入唯一编码" v-decorator="['code', {rules: [{required: true, message: '请输入唯一编码！'}]}]" />
        </a-form-item>

        <a-form-item
          label="上级"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-tree-select
            v-decorator="['pid', {rules: [{ required: true, message: '请选择上级！' }]}]"
            style="width: 100%"
            :dropdownStyle="{ maxHeight: '300px', overflow: 'auto' }"
            :treeData="orgTree"
            placeholder="请选择上级"
            :replaceFields="replaceFields"
          >
            <span slot="title" slot-scope="{ id }">{{ id }}
            </span>
          </a-tree-select>
        </a-form-item>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="类型"
        >
          <a-radio-group v-decorator="['type',{rules: [{ required: true, message: '请选择类型！' }]}]" >
            <a-radio @click="typeFunc(1)" :value="1" :checked="true">{{ orgType === 1 ? '单位' : '项目' }}</a-radio>
            <a-radio @click="typeFunc(2)" :value="2">部门</a-radio>
          </a-radio-group>
        </a-form-item>

        <div v-show="companyDiv">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="企业信息"
          >
            <a-textarea :rows="4" placeholder="请输入企业信息" v-decorator="['companyInfo']"></a-textarea>
          </a-form-item>
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="社会信用代码"
          >
            <a-input v-decorator="['socialCreditCode']" />
          </a-form-item>
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="邀请码"
          >
            <a-input disabled v-decorator="['invitationCode']" />
          </a-form-item>
        </div>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="排序"
        >
          <a-input-number placeholder="请输入排序" style="width: 100%" v-decorator="['sort', { initialValue: 100 }]" :min="1" :max="1000" />
        </a-form-item>

        <a-form-item
          label="备注"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-textarea :rows="4" placeholder="请输入备注" v-decorator="['remark']"></a-textarea>
        </a-form-item>

      </a-form>

    </a-spin>
  </a-modal>
</template>

<script>
  import { orgAdd, orgEdit, orgList } from '@/api/org/org'
  import { listToTree } from '@/utils/util'
  const rootParentId = 0

  export default {
    data () {
      return {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 15 }
        },
        orgTree: [],
        modalTitle: '新增',
        visible: false,
        confirmLoading: false,
        formLoading: true,
        replaceFields: {
          children: 'children',
          title: 'name',
          key: 'id',
          value: 'id'
        },
        form: this.$form.createForm(this),
        orgType: 1,
        companyDiv: false
      }
    },
    methods: {
      // 新增初始化方法
      add (orgType) {
        this.visible = true
        this.modalTitle = '新增'
        this.orgType = orgType
				if (this.orgType == 1 ) {
          this.companyDiv = true
        } else {
          this.companyDiv = false
        }
        this.getOrgTree()
      },
      // 编辑初始化方法
      edit (record) {
        this.visible = true
        this.modalTitle = '编辑'
        this.orgType = record.orgType
				if (this.orgType == 1 && record.type == 1){
          this.companyDiv = true
        } else {
          this.companyDiv = false
        }
        this.getOrgTree()
        setTimeout(() => {
          this.form.setFieldsValue(
            {
              id: record.id,
              name: record.name,
              code: record.code,
              type: record.type,
              sort: record.sort,
              pid: record.pid,
              remark: record.remark,
              companyInfo: record.companyInfo,
              socialCreditCode: record.socialCreditCode,
              invitationCode: record.invitationCode
            }
          )
        }, 100)
      },
      /**
       * 获取机构树，并加载于表单中
       */
      getOrgTree () {
        const params = { orgType: this.orgType }
        orgList(params).then((res) => {
          this.formLoading = false
          if (!res.code === 200 || !res.data.length) {
            this.orgTree = [{
              'id': '0',
              'parentId': '0',
              'name': '顶级',
              'value': '0',
              'pid': '0'
            }]
            return
          }
          const orgList = listToTree(res.data, [], rootParentId)
          this.orgTree = [{
            'id': '0',
            'parentId': '0',
            'name': '顶级',
            'value': '0',
            'pid': '0',
            'children': orgList
          }]
        })
      },
      typeFunc (type) {
        if (this.orgType === 1 && type === 1) {
          this.companyDiv = true
        } else {
          this.companyDiv = false
        }
      },
      handleSubmit () {
        const { form: { validateFields } } = this
        this.confirmLoading = true
        validateFields((errors, values) => {
          if (!errors) {
            if (values.id) {
              values.orgType = this.orgType
              orgEdit(values).then((res) => {
                if (res.code === 200) {
                  this.$message.success('编辑成功')
                  this.visible = false
                  this.confirmLoading = false
                  this.$emit('ok', values)
                  this.form.resetFields()
                } else {
                  this.$message.error('编辑失败：' + res.msg)
                }
              }).finally((res) => {
                this.confirmLoading = false
              })
            } else {
              values.orgType = this.orgType
              orgAdd(values).then((res) => {
                if (res.code === 200) {
                  this.$message.success('新增成功')
                  this.visible = false
                  this.confirmLoading = false
                  this.$emit('ok', values)
                  this.form.resetFields()
                } else {
                  this.$message.error('新增失败：' + res.msg)
                }
              }).finally((res) => {
                this.confirmLoading = false
              })
            }
          } else {
            this.confirmLoading = false
          }
        })
      },
      handleCancel () {
        this.form.resetFields()
        this.visible = false
      }
    }
  }
</script>