kd-aiot-frontend/src/views/enterpriseModel/dept/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"
  >
    <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="编码：" prop="groupCode">
            <el-input clearable :maxlength="20" v-model="form.groupCode" />
          </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-select v-model="form.status" style="width: 100%">
              <el-option label="开启" :value="1"></el-option>
              <el-option label="关闭" :value="0"></el-option>
            </el-select>
          </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="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>
    <!-- <headerTitle
      title="工厂信息"
      style="margin-top: 30px"
      v-if="['40'].includes(form.type)"
    ></headerTitle>
    <el-form
      ref="factoryFormRef"
      :model="factoryForm"
      :rules="factoryForm"
      label-width="100px"
      v-if="['40'].includes(form.type)"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="工厂编码:" prop="code">
            <el-input
              clearable
              :maxlength="20"
              v-model="factoryForm.code"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="工厂名称:" prop="name">
            <el-input
              clearable
              :maxlength="20"
              :disabled="true"
              v-model="factoryForm.name"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属公司:" prop="groupId">
            <org-select
              v-model="factoryForm.groupId"
              :data="organizationList"
              placeholder="请选择"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态:" prop="enabled">
            <div class="location-warp">
              <el-select v-model="factoryForm.enabled" style="width: 100%" disabled>
                <el-option label="生效" :value="1"></el-option>
                <el-option label="未生效" :value="0"></el-option>
              </el-select>
            </div>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="负责人:" prop="leaderId">
            <el-input
              @click.native="openStaffSelection"
              v-model="factoryForm.responsibleName"
              :disabled="true"
              placeholder="请选择"
            ></el-input>
      
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="所属区域:" prop="location_city">
            <area-select
              v-model="factoryForm.areaId"
              @checkedKeys="getAreaInfo"
              :data="areaTreeList"
              ref="tree"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="地址:" prop="location_city">
            <div class="location-warp">
              <el-cascader
                clearable
                style="width: 385px"
                v-model="factoryForm.extInfo.location"
                :options="cityDataLabel"
              ></el-cascader>
              <el-input
                class="detail"
                clearable
                :maxlength="20"
                v-model="factoryForm.extInfo.locationDetail"
                placeholder="请输入详细地址"
              />
            </div>
          </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 AreaSelect from '@/views/enterpriseModel/regionalManage/components/area-cascader.vue';
  import addUser from '@/views/system/user/components/add.vue';

  const defEnterprise = {
    businessLicenseFile: [],
    name: null,
    address: null,
    tel: '',
    registerDate: '',
    unifiedSocialCreditCode: '',
    businessScope: '',
    mainProduct: '',
    remark: '',
    fax: ''
  };
  const defFactoryForm = {
    id: '',
    code: '',
    name: '',
    groupId: '',
    areaId: '',
    areaName: '',
    extInfo: {
      principalDep: '', // 负责人部门
      location: [],
      locationDetail: ''
    },

    areaIdList: [],
    enabled: 1,
    parentId: 0,
    leaderId: '',
    type: 1 //  FACTORY(1, "工厂"), WORKSHOP_PLAN(2, "厂房"), WORKSHOP(3, "车间"), LINE(4, "厂线");
  };
  import {
    addOrganization,
    updateOrganization,
    getById,
    getCode
  } from '@/api/system/organization';
  import { basicAreaPageAPI } from '@/api/regionalManage';
  import { cityDataLabel } from 'ele-admin/packages/utils/regions';

  export default {
    components: {
      OrgSelect,
      OrgTypeSelect,
      staffSelection,
      fileUpload,
      AreaSelect,
      addUser
    },
    props: {
      // 弹窗是否打开
      visible: Boolean,
      // 修改回显的数据
      data: Object,
      // 上级id
      parentId: [Number, String],
      // 机构数据
      organizationList: Array
    },
    data() {
      const defaultForm = {
        id: null,
        parentId: null,
        name: '',
        type: '',
        sort: null,
        status: 1,
        manager: [],
        groupCode: '',
        managerFirst: []
      };
      return {
        defaultForm,
        responsibleName: '',
        // 表单数据
        form: { ...defaultForm },
        enterprise: { ...defEnterprise },
        factoryForm: {
          ...defFactoryForm
        },
        managerFirst: {},
        cityDataLabel,
        // 表单验证规则
        rules: {
          groupCode: [
            { required: true, message: '请输入编码', trigger: 'blur' }
          ],
          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;
      }
    },
    created() {
      this.getBasicAreaList();
    },
    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;
        }
        this.loading = true;
        const data = {
          ...form,
          parentId: this.form.parentId || 0
        };
        if (!this.isUpdate) {
          delete data.id;
        }
        if (this.managerFirst?.name) {
          this.form.managerFirst[0] = this.managerFirst;
        }
        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);
          });
        });
      },
      getAreaInfo(nodeInfo) {
        this.factoryForm.areaName = nodeInfo[0]?.pathLabels.join('/') || '';
        this.factoryForm.areaId = this.factoryForm.areaId || '';
      },
      enterpriseValidate() {
        return new Promise((resolve, reject) => {
          this.$refs.enterpriseForm.validate((valid) => {
            resolve(valid);
          });
        });
      },
      /* 获取区域集合 */
      async getBasicAreaList() {
        this.areaList = await basicAreaPageAPI({
          pageNum: 1,
          size: 9999
        });
        this.areaTreeList = this.$util.toTreeData({
          data: this.areaList,
          idField: 'id',
          parentIdField: 'parentId'
        });
      },
      //选择负责人
      confirmStaffSelection(data) {
        this.form.manager = JSON.parse(JSON.stringify(data));
        this.responsibleName = data.map((item) => item.name).toString();
      },
      addOpen() {
        this.$refs.addUserRef.open();
      },
      clearManagerFirst() {
        this.managerFirst = {};
      },
      userBk(data) {
        this.managerFirst = data;
      },
      openStaffSelection() {
        console.log(this.form.manager);
        this.$refs.staffSelection.open(
          JSON.parse(JSON.stringify(this.form.manager)) || []
        );
      },
      /* 更新visible */
      updateVisible(value) {
        this.$emit('update:visible', value);
      }
    },
    watch: {
      form: {
        deep: true,
        handler(n) {
          this.enterprise.name = n.name;
          this.factoryForm.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>