kd-aiot-frontend/src/views/factoryModel/workshop/components/edit.vue

<!-- 用户编辑弹窗 -->
<template>
  <el-dialog
    class="ele-dialog-form"
    :title="title"
    :visible.sync="visible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    width="800px"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-row>
        <el-col :span="12">
          <el-form-item
            label="车间编码:"
            prop="code"
            style="margin-bottom: 22px"
          >
            <el-input
              clearable
              :maxlength="20"
              v-model="form.code"
              placeholder="请输入车间编码"
              :disabled="type === 'edit'"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="车间名称:"
            prop="name"
            style="margin-bottom: 22px"
          >
            <el-input
              clearable
              :maxlength="20"
              v-model="form.name"
              placeholder="请输入车间名称"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="所属公司:"
            prop="groupId"
            style="margin-bottom: 22px"
          >
            <ele-tree-select
              clearable
              :data="options.groupId"
              v-model="form.groupId"
              valueKey="id"
              labelKey="name"
              placeholder="请选择所属公司"
              default-expand-all
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属工厂:" prop="factoryId">
            <el-select
              style="margin-bottom: 22px; width: 100%"
              clearable
              v-model="form.factoryId"
              @change="change_factoryId"
              filterable
              placeholder="请选择所属工厂"
            >
              <el-option
                v-for="item in factoryList"
                :label="item.name"
                :value="item.id"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item
            label="所属厂房:"
            prop="parentId"
            style="margin-bottom: 22px"
          >
            <el-select
              v-model="form.parentId"
              filterable
              placeholder="请选择所属厂房"
              style="width: 100%"
            >
              <el-option
                v-for="item in workshopPlanList"
                :key="item.id"
                :label="item.workshopPlanName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item
            label="负责人部门:"
            prop="extInfo.principalDep"
            style="margin-bottom: 22px"
          >
            <deptSelect
              v-model="form.extInfo.principalDep"
              @changeGroup="change_principalDep"
              placeholder="请选择负责人部门"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="负责人:"
            prop="leaderId"
            style="margin-bottom: 22px"
          >
            <personSelect
              ref="directorRef"
              v-model="form.leaderId"
              :init="false"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属区域:">
            <area-select
              v-model="form.areaId"
              @checkedKeys="getAreaInfo"
              :data="areaTreeList"
              ref="tree"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="地址:"
            prop="location_city"
            style="margin-bottom: 22px"
          >
            <el-input
              clearable
              :maxlength="20"
              v-model="form.extInfo.location"
              placeholder="请输入地址"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template v-slot:footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" :loading="loading" @click="save">
        保存
      </el-button>
    </template>
  </el-dialog>
</template>

<script>
  import { saveOrUpdate } from '@/api/factoryModel';
  import { getUserPage } from '@/api/system/organization';
  import deptSelect from '@/components/CommomSelect/dept-select.vue';
  import personSelect from '@/components/CommomSelect/person-select.vue';
  import AreaSelect from '@/views/enterpriseModel/regionalManage/components/area-cascader.vue';
  import { basicAreaPageAPI } from '@/api/regionalManage';
  import { getFactoryarea } from '@/api/factoryModel';
  export default {
    props: {
      options_groupId: {
        type: Array,
        default() {
          return [];
        }
      }
    },
    watch: {
      options_groupId(nval) {
        this.toTreeData(nval);
      }
    },
    components: {
      AreaSelect,
      deptSelect,
      personSelect
    },
    created() {
      this.getFactoryList();
      this.getBasicAreaList();
    },
    data() {
      const defaultForm = function () {
        return {
          id: '',
          code: '',
          name: '',
          areaId: '',
          areaName: '',
          extInfo: {
            location: '',
            principalDep: '' // 负责人部门
          },
          leaderId: '', // 负责人
          groupId: '',
          enabled: 1,
          factoryId: '',
          parentId: '',
          type: 3 //  FACTORY(1, "工厂"), WORKSHOP_PLAN(2, "厂房"), WORKSHOP(3, "车间"), LINE(4, "厂线");
        };
      };
      return {
        defaultForm,
        // 表单数据
        form: { ...defaultForm() },
        // 表单验证规则
        rules: {
          code: [
            { required: true, message: '请输入车间编码', trigger: 'blur' }
          ],
          name: [
            { required: true, message: '请输入车间名称', trigger: 'blur' }
          ],
          groupId: [
            { required: true, message: '请选择所属公司', trigger: 'change' }
          ],
          parentId: [
            { required: true, message: '请选择所属工厂', trigger: 'change' }
          ],
          leaderId: {
            required: true,
            message: '请选择负责人',
            trigger: 'change'
          },
          'extInfo.principalDep': [
            { required: true, message: '请选择负责人部门', trigger: 'change' }
          ]
        },
        visible: false,
        type: '', // add/edit
        loading: false,
        areaList: [],
        areaTreeList: [],
        options: {
          groupId: [],
          leaderId: []
        },
        factoryList: [],
        workshopPlanList: []
      };
    },
    computed: {
      title() {
        switch (this.type) {
          case 'add':
            return '新增车间';
          case 'copy':
            return '新增车间';
          case 'edit':
            return '编辑车间';
          default:
            break;
        }
      }
    },
    methods: {
      open(type, row) {
        this.type = type;
        this.visible = true;
        if (type == 'edit' || type == 'copy') {
          for (const key of Object.keys(this.form)) {
            if (key !== 'extInfo') {
              this.form[key] = row[key];
            } else {
              for (const el of Object.keys(this.form.extInfo)) {
                this.form.extInfo[el] = row.extInfo[el];
              }
            }
          }
          if (row.extInfo.principalDep) {
            const params = { executeGroupId: row.extInfo.principalDep };
            this.$nextTick(() => {
              this.$refs.directorRef.getList(params);
            });
          }

          this.getlistCf();
        }
        if (type == 'copy') {
          this.form.code = '';
        }
      },

      async getFactoryList() {
        const { list } = await getFactoryarea({
          pageNum: 1,
          size: 999,
          type: 1,
          enable: 1
        });
        this.factoryList = list || [];
      },

      change_factoryId(e) {
        this.form.workshopPlanId = '';
        this.workshopPlanList = [];
        this.form.parentId = '';
        this.getlistCf();
      },

      getlistCf() {
        let par = {
          type: 2,
          parentId: this.form.factoryId,
          size: 9999,
          enable: 1
        };
        getFactoryarea(par).then((res) => {
          this.workshopPlanList = res.list;
        });
      },

      /* 获取区域集合 */
      async getBasicAreaList() {
        this.areaList = await basicAreaPageAPI({
          pageNum: 1,
          size: 9999
        });
        this.areaTreeList = this.$util.toTreeData({
          data: this.areaList,
          idField: 'id',
          parentIdField: 'parentId'
        });
      },
      getAreaInfo(nodeInfo) {
        this.form.areaName = nodeInfo[0]?.pathLabels.join('/') || '';
        this.form.areaId = this.form.areaId || '';
      },
      /* 保存编辑 */
      save() {
        this.$refs.form.validate((valid) => {
          if (!valid) {
            return false;
          }
          this.loading = true;

          if (this.type != 'edit') {
            delete this.form.id;
          }

          saveOrUpdate(this.form)
            .then((msg) => {
              this.loading = false;
              this.$message.success(msg);
              this.handleClose();
              this.$emit('done');
            })
            .catch((e) => {
              this.loading = false;
              this.$message.error(e.message);
            });
        });
      },
      restForm() {
        this.form = { ...this.defaultForm() };
        this.$nextTick(() => {
          this.$refs.form.clearValidate();
        });
      },
      handleClose() {
        this.restForm();
        this.visible = false;
      },
      // 格式化公司数据
      toTreeData(val) {
        this.options.groupId = this.$util.toTreeData({
          data: val,
          idField: 'id',
          parentIdField: 'parentId'
        });
      },
      // 选择负责人部门
      change_principalDep(id, info) {
        this.form.leaderId = '';
        // 根据部门获取人员
        const params = { groupId: id };
        this.$nextTick(() => {
          this.$refs.directorRef.getList(params);
        });
      }
      // 获取人员
      // getUserPage() {
      //   let par = {
      //     groupId: this.form.extInfo.principalDep,
      //     size: 999
      //   };
      //   getUserPage(par).then((res) => {
      //     this.options.leaderId = res.list;
      //   });
      // }
    }
  };
</script>
<style lang="scss" scoped>
  .location-warp {
    display: flex;
    .detail {
      margin-left: 10px;
    }
  }
</style>