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

<!-- 用户编辑弹窗 -->
<template>
  <ele-modal
    class="ele-dialog-form"
    :title="title"
    :visible.sync="visible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    width="1200px"
    :maxable="true"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="110px">
      <el-card
        shadow="never"
        header="基本信息"
        body-style="padding: 22px 22px 0 22px;"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="工位编码:" prop="code">
              <el-input
                clearable
                @click.native="openCode"
                v-model="form.code"
                placeholder="请输入"
                :disabled="type === 'edit'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="工位名称:" prop="name">
              <el-input
                clearable
                :maxlength="20"
                v-model="form.name"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="工位类型:" prop="extInfo.type">
              <el-select class="ele-fluid" v-model="form.extInfo.type">
                <el-option
                  label="设备"
                  :value="1"
                  @click.native="form.extInfo.teamId = null"
                />
                <el-option
                  label="工位"
                  :value="3"
                  @click.native="
                    form.extInfo.assetName = null;
                    form.extInfo.assetCode = null;
                  "
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item
              label="设备编码:"
              prop="extInfo.assetCode"
              v-if="form.extInfo.type == 1"
            >
              <el-input
                v-model="form.extInfo.assetCode"
                readonly
                @click.native="chooseAsset"
              />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item
              label="设备名称:"
              prop="extInfo.assetName"
              v-if="form.extInfo.type == 1"
            >
              <el-input disabled v-model="form.extInfo.assetName" />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item
              label="班组:"
              prop="extInfo.teamId"
              v-if="form.extInfo.type == 3"
            >
              <el-select
                style="width: 100%"
                v-model="form.extInfo.teamId"
                clearable
                :filterable="true"
                @change="userListFn"
              >
                <el-option
                  v-for="item in teamPagerList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="人员:"
              prop="extInfo.teamId"
              v-if="form.extInfo.type == 3"
            >
              <el-select
                style="width: 100%"
                v-model="form.extInfo.userIds"
                multiple
              >
                <el-option
                  v-for="item in userList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="所属区域:" prop="location_city">
              <area-select
                v-model="form.areaId"
                @checkedKeys="getAreaInfo"
                :data="areaTreeList"
                ref="tree"
              />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="所属工厂:" prop="extInfo.factoryId">
              <el-select
                v-model="form.extInfo.factoryId"
                placeholder="请选择"
                @change="change_factoryId"
                style="width: 100%"
              >
                <el-option
                  v-for="item in factoryList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="所属厂房:" prop="extInfo.workshopPlanId">
              <el-select
                v-model="form.extInfo.workshopPlanId"
                placeholder="请选择"
                @change="getListWorkshopByParentId(false)"
                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="8">
            <el-form-item label="所属车间:" prop="extInfo.workshopId">
              <el-select
                v-model="form.extInfo.workshopId"
                placeholder="请选择"
                style="width: 100%"
                @change="change_workshop"
              >
                <el-option
                  v-for="item in options.workshopId"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="所属产线:" prop="productionLineId">
              <el-select
                v-model="form.productionLineId"
                placeholder="请选择"
                style="width: 100%"
                @change="change_productionLineId"
              >
                <el-option
                  v-for="item in options.productionLineId"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="负责人部门:" prop="extInfo.principalDep">
              <ele-tree-select
                clearable
                :data="groupList"
                filterable
                v-model="form.extInfo.principalDep"
                valueKey="id"
                labelKey="name"
                placeholder="请选择"
                @change="change_principalDep"
                default-expand-all
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="负责人:" prop="leaderId">
              <el-select
                v-model="form.leaderId"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in options.leaderId"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="可执行工序:" prop="taskNames">
              <el-input
                :value="form.taskNames"
                placeholder="请选择"
                @click.native="handleProduce"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="所属工作中心:" prop="extInfo.workCenterId">
              <el-select
                v-model="form.extInfo.workCenterId"
                filterable
                disabled
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in options.workCenterList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="状态:" prop="enabled">
              <el-select
                v-model="form.enabled"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in options.enabled"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item label="节拍时间:" prop="extInfo.meterTime">
              <div class="workMeter-warp">
                <el-input
                  class="s1"
                  clearable
                  :maxlength="20"
                  v-model="form.extInfo.meterTime"
                  placeholder="请输入"
                />
                <DictSelection
                  style="width: 30%"
                  dictName="计量单位"
                  clearable
                  v-model="form.extInfo.meterMeasuringUnit"
                >
                </DictSelection>
                <span class="s3">/</span>
                <el-select
                  class="s2"
                  v-model="form.extInfo.meterTimeUnit"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in options.meterTimeUnit"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </div>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="备注:" prop="remark">
              <el-input
                clearable
                :maxlength="100"
                type="textarea"
                v-model="form.remark"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <!--      <el-card
        shadow="never"
        header="关联设备"
        body-style="padding: 22px 22px 0 22px;"
      >
        <equipmentTable ref="equipmentTable"></equipmentTable>
      </el-card> -->
    </el-form>
    <template v-slot:footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" :loading="loading" @click="save">
        保存
      </el-button>
    </template>

    <!-- 选择设备 -->
    <ProductModal
      ref="productRefs"
      :isLedger="true"
      @changeProduct="determineChoose"
    />
    <ProduceDialog ref="produceRef" @changeProduct="produceConfirm" />
    <!--  自定义编码 -->
    <CodeDialog
      ref="codeRefs"
      v-if="codeShow"
      @close="codeShow = false"
      @chooseCode="chooseCode"
    ></CodeDialog>
  </ele-modal>
</template>

<script>
  import {
    listWorkshopByParentId,
    saveOrUpdate_gw,
    listFactoryLine,
    getById
  } from '@/api/factoryModel';
  import { getUserPage } from '@/api/system/organization';
  import ProductModal from './ProductModal.vue';
  import producetask from '@/api/technology/production';
  import work from '@/api/technology/work';
  import ProduceDialog from './ProduceDialog';
  import CodeDialog from './codeDialog.vue';
  import AreaSelect from '@/views/enterpriseModel/regionalManage/components/area-cascader.vue';
  import { basicAreaPageAPI } from '@/api/regionalManage';
  import { listOrganizations } from '@/api/system/organization';

  import { getFactoryarea } from '@/api/factoryModel';

  import { getteampage, listUserByIds } from '@/api/workforceManagement/team';
  import { getCode } from '@/api/codeManagement/index.js';
  export default {
    components: {
      AreaSelect,
      ProductModal,
      ProduceDialog,
      CodeDialog
    },

    props: {
      options_groupId: Array
    },
    watch: {
      options_groupId(nval) {
        this.toTreeData(nval);
      }
    },
    data() {
      const defaultForm = function () {
        return {
          code: '',
          enabled: 1,
          extInfo: {
            factoryId: '', // 工厂
            workshopPlanId: '', // 厂房
            workshopId: '', // 车间
            principalDep: '', // 负责人部门
            meterTimeUnit: '时', // 节拍时间单位
            meterTime: '', // 节拍时间
            assetCode: '', //设备编码
            assetName: '', //设备名称
            meterMeasuringUnit: '', // 节拍计量单位
            workCenterId: null, //所属工作中心
            produceId: null, //可执行工序
            type: null,
            teamId: null
          },
          id: '',
          leaderId: '', // 负责人
          name: '',
          productionLineId: '',
          remark: '',
          taskIds: [],
          taskNames: [],

          workstationSubstanceList: []
        };
      };
      return {
        defaultForm,
        // 表单数据
        form: defaultForm(),

        factoryList: [],
        workshopPlanList: [],
        areaTreeList: [],

        teamPagerList: [],
        userList: [],
        // 表单验证规则
        rules: {
          code: [{ required: true, message: '请输入', trigger: 'blur' }],
          name: [{ required: true, message: '请输入', trigger: 'blur' }],
          workCenterId: [
            { required: true, message: '请选择', trigger: 'change' }
          ],
          processId: [{ required: true, message: '请选择', trigger: 'change' }],
          'extInfo.factoryId': [
            { required: true, message: '请输入', trigger: 'change' }
          ],
          'extInfo.workshopPlanId': [
            { required: true, message: '请输入', trigger: 'blur' }
          ],
          'extInfo.principalDep': [
            { required: true, message: '请输入', trigger: 'change' }
          ],
          'extInfo.assetCode': [
            { required: true, message: '请选择', trigger: 'change' }
          ],
          'extInfo.assetName': [
            { required: true, message: '请选择', trigger: 'change' }
          ],
          'extInfo.workshopId': {
            required: true,
            message: '请输入',
            trigger: 'change'
          },
          'extInfo.workCenterId': {
            required: true,
            message: '请输入',
            trigger: 'change'
          },
          taskNames: {
            required: true,
            message: '请选择',
            trigger: 'change'
          },

          productionLineId: {
            required: true,
            message: '请输入',
            trigger: 'change'
          },
          leaderId: {
            required: true,
            message: '请输入',
            trigger: 'change'
          }
        },
        visible: false,
        type: '', // add/edit
        loading: false,
        codeShow: false,
        options: {
          leaderId: [],
          workshopId: [],
          workCenterList: [],
          produceList: [],
          enabled: [
            {
              label: '生效',
              value: 1
            },
            {
              label: '未生效',
              value: 0
            }
          ],
          meterTimeUnit: [
            {
              value: '时',
              label: '时'
            },
            {
              value: '分',
              label: '分'
            },
            {
              value: '秒',
              label: '秒'
            },
            {
              value: '日',
              label: '日'
            }
          ],
          productionLineId: [],
          areaList: []
        },

        groupList: []
      };
    },
    computed: {
      title() {
        switch (this.type) {
          case 'add':
            return '新增工位';
          case 'copy':
            return '新增工位';
          case 'edit':
            return '编辑工位';
          default:
            break;
        }
      }
    },
    created() {
      this.getGs();
      this.getFactoryList();
      this.getBasicAreaList();
      this.getteampagerList();
    },
    methods: {
      chooseAsset() {
        this.$refs.productRefs.open(this.form.extInfo, '选择设备', '4');
      },
      userListFn(e) {
        console.log(e);
        let that = this;
        listUserByIds([e]).then((res) => {
          console.log(res, '5263', that.userList);
          that.userList = res;
          // this.$set(this, 'userList', res);
        });
        // listUserByIds
        // userList
        // console.log(this.userList);
      },

      // 选择可执行工序
      handleProduce() {
        let param = {
          taskIds: this.form.taskIds && this.form.taskIds[0],
          taskNames: this.form.taskNames && this.form.taskNames[0]
        };
        this.$refs.produceRef.open(param);
      },
      produceConfirm(data) {
        console.log(data, '555555');

        this.form.taskIds = [data.id];
        this.form.taskNames = [data.name];

        this.form.extInfo.workCenterId = data.workCenterId;
      },

      determineChoose(title, row) {
        if (title == '选择设备') {
          this.form.extInfo.assetCode = row.code;
          this.form.extInfo.assetName = row.name;
          this.form.extInfo.assetId = row.id;
        }
      },

      openCode() {
        this.codeShow = true;
      },

      chooseCode(code) {
        this.$set(this.form, 'code', code);
        this.codeShow = false;
        this.$forceUpdate();
      },

      async 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];
              }
            }
          }
          await this.getData(row.id);

          // 请求下拉数据
          if (this.form.extInfo.factoryId) {
            this.getlistCf();
          }
          this.userList = [];
          if (this.form.extInfo.workshopPlanId) {
            this.getListWorkshopByParentId(true);
          }
          if (this.form.extInfo.workshopId) {
            this.getlistFactoryLineByParentId();
          }
          if (this.form.extInfo.principalDep) {
            this.getUserPage();
          }
        }
        if (this.type != 'edit') {
          this.form.code = await getCode('station_code');
        }
        this.getListWorkCenter();
        this.getListProduce();
      },

      getteampagerList() {
        let param = {
          pageNum: 1,
          size: -1
        };
        getteampage(param).then((res) => {
          this.teamPagerList = res.list || [];
        });
      },

      async getFactoryList() {
        const { list } = await getFactoryarea({
          pageNum: 1,
          size: 999,
          type: 1
        });
        this.factoryList = 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;
          }
          // this.form.workstationSubstanceList =
          //   this.$refs.equipmentTable.datasource.map((n) => {
          //     return {
          //       type: 1,
          //       substanceId: n.id
          //     };
          //   });
          this.form.workstationSubstanceList = [
            {
              type: 1,
              substanceId: this.form.extInfo.assetId
            }
          ];
          saveOrUpdate_gw(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.loading = false;
        this.visible = false;
      },
      // 格式化公司数据
      toTreeData(val) {
        this.options.principalDep = this.$util.toTreeData({
          data: JSON.parse(JSON.stringify(val)),
          idField: 'id',
          parentIdField: 'parentId'
        });
      },

      // 获取工作中心
      getListWorkCenter() {
        work.list({ pageNum: 1, size: -1 }).then((res) => {
          this.options.workCenterList = res.list;
        });
      },

      // 获取工序
      getListProduce() {
        producetask.list({ pageNum: 1, size: -1 }).then((res) => {
          this.options.produceList = res.list;
        });
      },

      // 获取车间
      getListWorkshopByParentId(bol) {
        if (!bol) {
          this.form.extInfo.workshopId = '';

          this.options.workshopId = [];

          this.form.productionLineId = '';
          this.options.productionLineId = [];
        }
        listWorkshopByParentId(this.form.extInfo.workshopPlanId).then((res) => {
          this.options.workshopId = res;
        });
      },
      // 获取产线
      getlistFactoryLineByParentId() {
        listFactoryLine([this.form.extInfo.workshopId]).then((res) => {
          console.log(res);
          this.options.productionLineId = res;
        });
      },
      // 获取人员
      getUserPage() {
        if (!this.form.extInfo.principalDep)
          return (this.options.leaderId = []);
        let par = {
          groupId: this.form.extInfo.principalDep,
          size: 999
        };
        getUserPage(par).then((res) => {
          this.options.leaderId = res.list;
        });
      },
      // 选择工厂
      change_factoryId() {
        this.form.extInfo.workshopPlanId = '';
        this.workshopPlanList = [];

        this.form.extInfo.workshopId = '';

        this.options.workshopId = [];

        this.form.productionLineId = '';
        this.options.productionLineId = [];

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

      // 选择负责人部门
      change_principalDep() {
        this.form.leaderId = '';
        this.getUserPage();
      },
      // 选择车间
      change_workshop() {
        this.form.leaderId = '';
        this.options.leaderId = [];
        this.getlistFactoryLineByParentId();
      },

      // 获取公司数据
      getGs() {
        listOrganizations().then((list) => {
          this.groupList = this.$util.toTreeData({
            data: list,
            idField: 'id',
            parentIdField: 'parentId'
          });
        });
      },

      // 选择产线
      change_productionLineId() {},
      // 请求详情
      getData(id) {
       return getById(id).then((res) => {
          if (
            res.workstationSubstanceList &&
            res.workstationSubstanceList.length > 0
          ) {
            let list = res.workstationSubstanceList.map((n) => {
              return n.substance;
            });
            // if (list.length > 0) {
            //   this.$refs.equipmentTable.datasource = list;
            // }
          }
          this.form = Object.assign({}, this.form, res);

          if (res.taskList?.length) {
            this.form.taskNames = res.taskList.map((i) => i.name);
          }
    
        });
      }
    }
  };
</script>
<style lang="scss" scoped>
  .location-warp {
    display: flex;

    .detail {
      margin-left: 10px;
    }
  }

  .workMeter-warp {
    .s1 {
      width: 30%;
      margin-right: 10px;
    }

    .s2 {
      width: 20%;
      margin-left: 10px;
    }

    .s3 {
      margin-left: 10px;
    }
  }

  :deep(
      .el-dialog:not(.ele-dialog-form)
        .el-dialog__body
        .el-form
        .el-form-item:last-child
    ) {
    margin-bottom: 22px;
  }
</style>