kd-aiot-frontend/src/views/factoryModel/station/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="1200px"
  >
    <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
                :maxlength="20"
                v-model="form.code"
                placeholder="请输入"
              />
            </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.factoryId">
              <el-select
                v-model="form.extInfo.factoryId"
                placeholder="请选择"
                @change="change_factoryId"
                style="width: 100%"
              >
                <el-option
                  v-for="item in options_factory"
                  :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.assetCode">
              <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">
              <el-input disabled v-model="form.extInfo.assetName" />
            </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="options_groupId"
                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="extInfo.workCenterId">
              <el-select
                v-model="form.extInfo.workCenterId"
                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="16">
            <el-form-item label="可执行工序:" prop="taskNames">
              <el-input :value="form.taskNames && form.taskNames.join(',')" placeholder="请选择" @click.native="handleProduce"></el-input>
              <!-- <el-select
                v-model="form.extInfo.produceId"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in options.produceList"
                  :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>

    <!-- 选择设备 -->
    <AssetSelection
      ref="equipmentTable"
      @confirm="assetConfirm"
    ></AssetSelection>
    <ProduceDialog ref="produceRef"  @success="produceConfirm"/>
  </el-dialog>
</template>

<script>
  import {
    listWorkshopByParentId,
    saveOrUpdate_gw,
    listFactoryLineByParentId,
    getById
  } from '@/api/factoryModel';
  import { getUserPage } from '@/api/system/organization';
  import AssetSelection from './AssetSelection.vue';
  import producetask from '@/api/technology/production';
  import work from '@/api/technology/work';
  import ProduceDialog from './ProduceDialog'
  export default {
    components: {
      AssetSelection,
      ProduceDialog
    },
    props: {
      options_groupId: {
        type: Array,
        default () {
          return [];
        }
      },
      options_factory: {
        type: Array,
        default () {
          return [];
        }
      }
    },
    watch: {
      options_groupId (nval) {
        this.toTreeData(nval);
      }
    },
    data () {
      const defaultForm = function () {
        return {
          code: '',
          enabled: 1,
          extInfo: {
            factoryId: '', // 工厂
            workshopId: '', // 车间
            principalDep: '', // 负责人部门
            meterTimeUnit: '时', // 节拍时间单位
            meterTime: '', // 节拍时间
            assetCode: '', //设备编码
            assetName: '', //设备名称
            meterMeasuringUnit: '', // 节拍计量单位
            workCenterId: null, //所属工作中心
            produceId: null //可执行工序
          },
          id: '',
          leaderId: '', // 负责人
          name: '',
          productionLineId: '',
          remark: '',
          taskIds:[],
          taskNames:[],
          workstationSubstanceList: []
        };
      };
      return {
        defaultForm,
        // 表单数据
        form: defaultForm(),
        // 表单验证规则
        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.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'
          },
          'extInfo.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,
        options: {
          leaderId: [],
          workshopId: [],
          workCenterList: [],
          produceList: [],
          enabled: [
            {
              label: '生效',
              value: 1
            },
            {
              label: '未生效',
              value: 0
            }
          ],
          meterTimeUnit: [
            {
              value: '时',
              label: '时'
            },
            {
              value: '分',
              label: '分'
            },
            {
              value: '秒',
              label: '秒'
            },
            {
              value: '日',
              label: '日'
            }
          ],
          productionLineId: []
        }
      };
    },
    computed: {
      title () {
        switch (this.type) {
          case 'add':
            return '新增工位';
          case 'edit':
            return '编辑工位';
          default:
            break;
        }
      }
    },
    methods: {
      chooseAsset () {
        this.$refs.equipmentTable.open(this.form.extInfo);
      },
      // 选择可执行工序
      handleProduce(){
         this.$refs.produceRef.open(this.form.taskIds)
      },
      produceConfirm(list){
         this.form.taskIds = list.map(i => i.id)
         this.form.taskNames = list.map(i => i.taskInstanceName)

         console.log(list);
         console.log(this.form);
      },

      assetConfirm (data) {
        this.form.extInfo.assetCode = data.code;
        this.form.extInfo.assetName = data.name;
        this.form.extInfo.assetId = data.id;
      },

      open (type, row) {
        this.type = type;
        this.visible = true;
        if (type == 'edit') {
          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];
              }
            }
          }
          this.getData(row.id);
          // 请求下拉数据
          if (this.form.extInfo.factoryId) {
            this.getListWorkshopByParentId();
          }
          if (this.form.extInfo.workshopId) {
            this.getlistFactoryLineByParentId();
          }
          if (this.form.extInfo.principalDep) {
            this.getUserPage();
          }
        }
        this.getListWorkCenter();
        this.getListProduce();
      },
      /* 保存编辑 */
      save () {
        this.$refs.form.validate((valid) => {
          if (!valid) {
            return false;
          }
          this.loading = true;

          if (this.type == 'add') {
            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: 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 () {
        listWorkshopByParentId(this.form.extInfo.factoryId).then((res) => {
          this.options.workshopId = res;
        });
      },
      // 获取产线
      getlistFactoryLineByParentId () {
        console.log(this.form.extInfo.workshopId);
        listFactoryLineByParentId(this.form.extInfo.workshopId).then((res) => {
          console.log(res);
          this.options.productionLineId = res;
        });
      },
      // 获取人员
      getUserPage () {
        let par = {
          groupId: this.form.extInfo.principalDep,
          size: 999
        };
        getUserPage(par).then((res) => {
          this.options.leaderId = res.list;
        });
      },
      // 选择工厂
      change_factoryId () {
        this.form.extInfo.workshopId = '';
        this.form.leaderId = '';
        this.options.workshopId = [];
        this.options.leaderId = [];
        this.getListWorkshopByParentId();
      },
      // 选择负责人部门
      change_principalDep () {
        this.form.leaderId = '';
        this.getUserPage();
      },
      // 选择车间
      change_workshop () {
        this.form.leaderId = '';
        this.options.leaderId = [];
        this.getlistFactoryLineByParentId();
      },
      // 选择产线
      change_productionLineId () {},
      // 请求详情
      getData (id) {
        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.taskInstanceList?.length){
            this.form.taskNames = res.taskInstanceList.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>