kd-aiot-frontend/src/views/system/organization/components/org-edit.vue

<!-- 机构编辑弹窗 -->
<template>
  <ele-modal
    width="880px"
    :visible="visible"
    :close-on-click-modal="false"
    custom-class="ele-dialog-form"
    :title="isUpdate ? '修改机构' : '添加机构'"
    @update:visible="updateVisible"
    :maxable="true"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="140px">
      <el-row :gutter="15">
        <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
          <el-form-item label="编码：">
            <el-input
              clearable
              :maxlength="20"
              v-model="form.groupCode"
              :disabled="true"
            />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
          <el-form-item label="上级机构：">
            <org-select
              v-model="form.parentId"
              :data="organizationList"
              placeholder="请选择上级机构"
            />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
          <el-form-item label="机构名称：" prop="name">
            <el-input
              clearable
              :maxlength="20"
              v-model="form.name"
              placeholder="请输入机构名称"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="机构类型："
            prop="type"
            style="margin-bottom: 22px"
          >
            <DictSelection
              dictName="机构类型"
              clearable
              v-model="form.type"
              labelName="dictValue"
            >
            </DictSelection>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="一级负责人：" style="margin-bottom: 22px">
            <el-input
              @focus="addOpen"
              @clear="clearManagerFirst"
              v-model="managerFirst.name"
              placeholder="请选择"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="二级负责人：" style="margin-bottom: 22px">
            <el-input
              @click.native="openStaffSelection"
              v-model="responsibleName"
              placeholder="请选择"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="排序：" style="margin-bottom: 22px">
            <el-input v-model="form.sort" placeholder="请选择"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <headerTitle
      title="企业信息"
      style="margin-top: 30px"
      v-if="['10', '20'].includes(form.type)"
    ></headerTitle>

    <el-form
      ref="enterpriseForm"
      :model="enterprise"
      :rules="enterpriseRules"
      label-width="140px"
      v-if="['10', '20'].includes(form.type)"
    >
      <el-row :gutter="15">
        <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
          <el-form-item label="企业名称：" prop="name">
            <el-input
              clearable
              :maxlength="50"
              v-model="enterprise.name"
              placeholder="请输入企业名称"
              :disabled="true"
            />
          </el-form-item>
        </el-col>

        <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
          <el-form-item label="企业地址：" prop="address">
            <el-input
              clearable
              :maxlength="50"
              v-model="enterprise.address"
              placeholder="请输入企业地址"
            />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
          <el-form-item label="企业电话：" prop="tel">
            <el-input
              clearable
              :maxlength="20"
              v-model="enterprise.tel"
              placeholder="请输入企业电话"
            />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
          <el-form-item label="工商注册号：" prop="businessRegistrationNo">
            <el-input
              clearable
              v-model="enterprise.businessRegistrationNo"
              placeholder="请输入工商注册号"
            />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
          <el-form-item label="联系人：" prop="contact">
            <el-input
              clearable
              v-model="enterprise.contact"
              placeholder="请输入联系人"
            />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
          <el-form-item label="登记日期：" prop="registerDate">
            <el-date-picker
              style="width: 100%"
              clearable
              v-model="enterprise.registerDate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
          <el-form-item label="统一社会性代码：" prop="unifiedSocialCreditCode">
            <el-input
              clearable
              :maxlength="50"
              v-model="enterprise.unifiedSocialCreditCode"
              placeholder="请输入统一社会性代码"
            />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
          <el-form-item label="经营范围：" prop="businessScope">
            <el-input
              clearable
              type="textarea"
              :maxlength="100"
              v-model="enterprise.businessScope"
              placeholder="请输入经营范围"
            />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
          <el-form-item label="经营产品：" prop="mainProduct">
            <el-input
              clearable
              type="textarea"
              :maxlength="100"
              v-model="enterprise.mainProduct"
              placeholder="请输入经营产品"
            />
          </el-form-item>
        </el-col>
        <el-col
          v-bind="styleResponsive ? { sm: 12 } : { span: 12 }"
          style="margin-bottom: 20px"
        >
          <el-form-item label="企业传真：" prop="fax">
            <el-input
              clearable
              v-model="enterprise.fax"
              placeholder="请输入企业传真"
            />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
          <el-form-item prop="files" label="附件：">
            <fileUpload
              v-model="enterprise.businessLicenseFile"
              module="main"
              :showLib="false"
              :limit="10"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template v-slot:footer>
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button type="primary" :loading="loading" @click="save">
        保存
      </el-button>
    </template>
    <staffSelection
      ref="staffSelection"
      @confirm="confirmStaffSelection"
    ></staffSelection>
    <addUser ref="addUserRef" @success="userBk"></addUser>
  </ele-modal>
</template>

<script>
  import OrgSelect from './org-select.vue';
  import OrgTypeSelect from './org-type-select.vue';
  import staffSelection from './staffSelection.vue';
  import fileUpload from '@/components/upload/fileUpload';
  import { copyObj } from '@/utils/util';
  import addUser from '@/views/system/user/components/add.vue';
  const defEnterprise = {
    businessLicenseFile: [],
    name: null,
    address: null,
    tel: '',
    registerDate: '',
    unifiedSocialCreditCode: '',
    businessScope: '',
    mainProduct: '',
    remark: '',
    fax: '',
    businessRegistrationNo: '',
    contact: ''
  };
  import {
    addOrganization,
    updateOrganization,
    getById,
    getCode
  } from '@/api/system/organization';
  export default {
    components: {
      OrgSelect,
      OrgTypeSelect,
      staffSelection,
      fileUpload,
      addUser
    },
    props: {
      // 弹窗是否打开
      visible: Boolean,
      // 修改回显的数据
      data: Object,
      // 上级id
      parentId: [Number, String],
      // 机构数据
      organizationList: Array
    },
    data() {
      const defaultForm = {
        id: null,
        parentId: null,
        name: '',
        type: '',
        sort: null,
        manager: [],
        groupCode: '',
        managerFirst: []
      };
      return {
        defaultForm,
        responsibleName: '',
        managerFirst: {},
        // 表单数据
        form: { ...defaultForm },
        enterprise: { ...defEnterprise },
        // 表单验证规则
        rules: {
          name: [
            { required: true, message: '请输入机构名称', trigger: 'blur' }
          ],
          manager: [
            { required: true, message: '请选择负责人', trigger: 'blur' }
          ],
          type: [{ required: true, message: '请选择机构类型', trigger: 'blur' }]
        },
        // 表单验证规则
        enterpriseRules: {
          name: [
            { required: true, message: '请输入企业名称', trigger: 'blur' }
          ],
          address: [
            { required: true, message: '请输入企业地址', trigger: 'blur' }
          ],
          unifiedSocialCreditCode: [
            { required: true, message: '请输入统一社会性代码', trigger: 'blur' }
          ]
        },
        // 提交状态
        loading: false,
        // 是否是修改
        isUpdate: false
      };
    },
    computed: {
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      }
    },
    methods: {
      /* 保存编辑 */
      async save() {
        if (!(await this.formValidate())) {
          return false;
        }
        if (
          ['10', '20'].includes(this.form.type) &&
          !(await this.enterpriseValidate())
        ) {
          return false;
        }
        let form = {
          ...this.form
        };
        if (['10', '20'].includes(this.form.type)) {
          form['enterprise'] = this.enterprise;
        }
        if (this.managerFirst?.name) {
          this.form.managerFirst[0] = this.managerFirst;
        }
        this.loading = true;
        const data = {
          ...form,
          parentId: this.form.parentId || 0
        };
        if (!this.isUpdate) {
          delete data.id;
        }
        const saveOrUpdate = this.isUpdate
          ? updateOrganization
          : addOrganization;
        saveOrUpdate(data)
          .then((msg) => {
            this.loading = false;
            this.$message.success(msg);
            this.updateVisible(false);
            this.$emit('done');
          })
          .catch((e) => {
            this.loading = false;
            // this.$message.error(e.message);
          });
      },
      formValidate() {
        return new Promise((resolve, reject) => {
          this.$refs.form.validate((valid) => {
            resolve(valid);
          });
        });
      },
      enterpriseValidate() {
        return new Promise((resolve, reject) => {
          this.$refs.enterpriseForm.validate((valid) => {
            resolve(valid);
          });
        });
      },

      //选择负责人
      confirmStaffSelection(data) {
        this.form.manager = JSON.parse(JSON.stringify(data));
        this.responsibleName = data.map((item) => item.name).toString();
      },
      openStaffSelection() {
        console.log(this.form.manager);
        this.$refs.staffSelection.open(
          JSON.parse(JSON.stringify(this.form.manager)) || []
        );
      },
      addOpen() {
        this.$refs.addUserRef.open();
      },
      clearManagerFirst() {
        this.managerFirst = {};
      },
      userBk(data) {
        this.managerFirst = data;
      },
      /* 更新visible */
      updateVisible(value) {
        this.$emit('update:visible', value);
      }
    },
    watch: {
      form: {
        deep: true,
        handler(n) {
          this.enterprise.name = n.name;
        }
      },
      visible(visible) {
        if (visible) {
          if (this.data) {
            getById(this.data.id).then((res) => {
              for (const key in res.enterprise) {
                this.$set(this.enterprise, key, res.enterprise[key]);
              }
              for (const key in res) {
                if (key == 'parentId') {
                  this.$set(
                    this.form,
                    key,
                    res[key] == 0 ? '' : res[key] ?? ''
                  );
                }
                if (key != 'enterprise') {
                  this.$set(this.form, key, res[key]);
                }
              }

              this.form.type = '' + this.form.type; //回显
              if (this.form?.managerFirst.length) {
                this.managerFirst = this.form.managerFirst[0];
              }
              this.responsibleName =
                res.manager && res.manager.map((item) => item.name).toString();
            });

            // this.form.type = '' + this.form.type; //回显
            // this.responsibleName =
            //   this.data.manager &&
            //   this.data.manager.map((item) => item.name).toString();
            this.isUpdate = true;
          } else {
            this.form.parentId = this.parentId;
            getCode().then((res) => {
              this.form.groupCode = res;
            });
            this.isUpdate = false;
          }
        } else {
          this.$refs.form.clearValidate();
          this.$refs.enterpriseForm &&
            this.$refs.enterpriseForm.clearValidate();
          this.form = { ...this.defaultForm };
          this.enterprise = { ...defEnterprise };
          this.managerFirst = {};
          this.responsibleName = '';
        }
      }
    }
  };
</script>