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"
    :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="编码：" 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="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>
    <headerTitle
      title="部门信息"
      style="margin-top: 30px"
      v-if="isDeptType"
    >
      <el-button
        type="primary"
        size="small"
        icon="el-icon-plus"
        class="ele-btn-icon"
        @click="addDeptPosition"
      >
        新增
      </el-button>
    </headerTitle>
    <el-table
      v-if="isDeptType"
      :data="departmentPositionList"
      border
      class="dept-position-table"
    >
      <el-table-column type="index" label="序号" width="80" align="center" />
      <el-table-column label="岗位名称" min-width="160" align="center">
        <template slot-scope="{ row }">
          <el-select
            v-if="!row.id"
            v-model="row.positionId"
            filterable
            clearable
            placeholder="请选择"
            style="width: 100%"
            @change="onDeptPositionNameChange(row)"
          >
            <el-option
              v-for="item in positionList"
              :key="item.id"
              :label="item.positionName"
              :value="item.id"
            />
          </el-select>
          <span v-else>{{ row.positionName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="岗位层级" min-width="140" align="center">
        <template slot-scope="{ row }">
          <el-select
            v-if="!row.id"
            v-model="row.positionLevelId"
            filterable
            clearable
            placeholder="请选择"
            style="width: 100%"
            :disabled="!row.positionId"
            @change="onDeptPositionLevelChange(row)"
          >
            <el-option
              v-for="item in row.levelOptions"
              :key="item.positionLevelId"
              :label="item.positionLevel"
              :value="item.positionLevelId"
            />
          </el-select>
          <span v-else>{{ row.positionLevel }}</span>
        </template>
      </el-table-column>
      <el-table-column label="编制人数" min-width="120" align="center">
        <template slot-scope="{ row }">
          <el-input-number
            v-model="row.establishmentCount"
            :min="0"
            :precision="0"
            controls-position="right"
            style="width: 100%"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="80" align="center">
        <template slot-scope="{ row }">
          <el-link
            type="danger"
            :underline="false"
            @click="removeDeptPosition(row)"
          >
            删除
          </el-link>
        </template>
      </el-table-column>
    </el-table>
    <!-- <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,
    getDepartmentPositionPage,
    saveDepartmentPositionBatch,
    deleteDepartmentPosition,
    getHrPositionPage,
    getHrPositionById
  } 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: [],
        businessRegistrationNo:'',
        contact:''
      };
      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,
        departmentPositionList: [],
        positionList: []
      };
    },
    computed: {
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      },
      isDeptType() {
        return String(this.form.type) === '30';
      }
    },
    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,
          managerFirst: this.managerFirst?.name ? [this.managerFirst] : []
        };
        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;
        const submit = async () => {
          if (this.isDeptType) {
            const payload = this.buildDepartmentPositionPayload();
            if (payload === false) {
              return;
            }
            if (payload.length) {
              await saveDepartmentPositionBatch(payload);
            }
          }
          const msg = await saveOrUpdate(data);
          this.$message.success(msg);
          this.updateVisible(false);
          this.$emit('done');
        };
        submit()
          .catch(() => {})
          .finally(() => {
            this.loading = false;
          });
      },
      createDeptPositionRow() {
        return {
          id: null,
          positionId: '',
          positionName: '',
          positionLevel: '',
          positionLevelId: '',
          establishmentCount: undefined,
          levelOptions: []
        };
      },
      buildDepartmentPositionPayload() {
        if (!this.form.id) {
          return [];
        }
        const rows = [];
        for (const row of this.departmentPositionList) {
          const isNew = !row.id;
          const emptyNew =
            isNew &&
            !row.positionId &&
            !row.positionLevelId &&
            (row.establishmentCount === undefined ||
              row.establishmentCount === null ||
              row.establishmentCount === '');
          if (emptyNew) {
            continue;
          }
          if (
            !row.positionId ||
            !row.positionName ||
            !row.positionLevelId ||
            row.establishmentCount === undefined ||
            row.establishmentCount === null ||
            row.establishmentCount === ''
          ) {
            this.$message.warning('请完善部门岗位信息');
            return false;
          }
          rows.push({
            ...(row.id ? { id: row.id } : {}),
            deptId: this.form.id,
            positionId: row.positionId,
            positionName: row.positionName,
            positionLevelId: row.positionLevelId,
            positionLevel: row.positionLevel,
            establishmentCount: Number(row.establishmentCount)
          });
        }
        return rows;
      },
      isDeptPositionFilled(row) {
        return (
          !!row.positionId &&
          !!row.positionLevelId &&
          row.establishmentCount !== undefined &&
          row.establishmentCount !== null &&
          row.establishmentCount !== ''
        );
      },
      addDeptPosition() {
        if (
          this.departmentPositionList.some(
            (item) => !this.isDeptPositionFilled(item)
          )
        ) {
          this.$message.warning('请先填写岗位名称、岗位层级和编制人数');
          return;
        }
        this.ensurePositionOptions();
        this.departmentPositionList.push(this.createDeptPositionRow());
      },
      async removeDeptPosition(row) {
        const list = this.departmentPositionList;
        const index = list.indexOf(row);
        if (index < 0) {
          return;
        }
        if (!row.id) {
          list.splice(index, 1);
          return;
        }
        try {
          await this.$confirm('确定删除该岗位编制吗？', '提示', {
            type: 'warning'
          });
          await deleteDepartmentPosition(row.id);
          list.splice(index, 1);
          this.$message.success('删除成功');
        } catch (e) {}
      },
      async ensurePositionOptions() {
        if (this.positionList.length) {
          return;
        }
        const res = await getHrPositionPage({
          pageNum: 1,
          size: 9999,
          status: 1
        });
        this.positionList = (res && res.list) || [];
      },
      async onDeptPositionNameChange(row) {
        row.positionLevel = '';
        row.positionLevelId = '';
        row.levelOptions = [];
        const position = this.positionList.find(
          (item) => item.id === row.positionId
        );
        row.positionName = position ? position.positionName : '';
        if (!row.positionId) {
          return;
        }
        const detail = await getHrPositionById(row.positionId);
        const configs = (detail && detail.levelConfigs) || [];
        row.levelOptions = configs
          .filter((item) => item.positionLevelId)
          .map((item) => ({
            positionLevelId: item.positionLevelId,
            positionLevel: item.positionLevel
          }));
      },
      onDeptPositionLevelChange(row) {
        const level = (row.levelOptions || []).find(
          (item) => item.positionLevelId === row.positionLevelId
        );
        row.positionLevel = level ? level.positionLevel : '';
      },
      async loadDepartmentPositions() {
        if (!this.form.id || !this.isDeptType) {
          this.departmentPositionList = [];
          return;
        }
        await this.ensurePositionOptions();
        const res = await getDepartmentPositionPage({
          deptId: this.form.id,
          pageNum: 1,
          size: 9999
        });
        this.departmentPositionList = ((res && res.list) || []).map((item) => ({
          ...item,
          levelOptions: []
        }));
      },
      resetDepartmentPosition() {
        this.departmentPositionList = [];
        this.positionList = [];
      },
      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 = {};
        this.form.managerFirst = [];
      },
      userBk(data) {
        this.managerFirst = data;
        this.form.managerFirst = data?.name ? [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;
        }
      },
      'form.type'(val) {
        if (this.visible && String(val) === '30' && this.form.id) {
          this.loadDepartmentPositions();
        }
      },
      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.loadDepartmentPositions();
            });

            // 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 = '';
          this.resetDepartmentPosition();
        }
      }
    }
  };
</script>

<style scoped>
  .dept-position-table {
    width: 100%;
    margin-bottom: 10px;
  }
</style>