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="编码：">
            <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
              @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>
  </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';

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
  },
  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:''
    };
    return {
      defaultForm,
      responsibleName: '',
      // 表单数据
      form: { ...defaultForm },
      enterprise: { ...defEnterprise },
      factoryForm: {
        ...defFactoryForm
      },
      cityDataLabel,
      // 表单验证规则
      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;
    }
  },
  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;
      }
      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();
    },
    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; //回显
            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.responsibleName = '';
      }
    }
  }
};
</script>