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 @click.native="openCode" 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.type">
              <el-select size="small" class="ele-fluid" v-model="form.extInfo.type">
                <el-option label="设备" :value="1" @click.native="form.extInfo.workTypeId = 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.workTypeId" v-if="form.extInfo.type == 3">
              <DictSelection dictName="工种" clearable filterable v-model="form.extInfo.workTypeId">
              </DictSelection>
            </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 options_factory" :key="item.id" :label="item.pathName" :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="extInfo.workCenterId">
              <el-select v-model="form.extInfo.workCenterId" filterable 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" placeholder="请选择" @click.native="handleProduce"></el-input>

            </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>

  </el-dialog>
</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';
export default {
  components: {
    AreaSelect,
    ProductModal,
    ProduceDialog,
    CodeDialog
  },
  props: {
    options_groupId: {
      type: Array,
      default: () => []
    },
    options_factory: {
      type: Array,
      default: () => []
    }
  },
  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, //可执行工序
          type: null,
          workTypeId: null,
        },
        id: '',
        leaderId: '', // 负责人
        name: '',
        productionLineId: '',
        remark: '',
        taskIds: [],
        taskNames: [],
        workstationSubstanceList: [],
        areaTreeList: [],



      };
    };
    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'
        },
        '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 'edit':
          return '编辑工位';
        default:
          break;
      }
    }
  },
  created() {
    this.getGs();
    this.getBasicAreaList()
  },
  methods: {
    chooseAsset() {
      this.$refs.productRefs.open(this.form.extInfo, '选择设备', '4')
    },
    // 选择可执行工序
    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) {
      this.form.taskIds = [data.id]
      this.form.taskNames = [data.name]

    },

    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()
    },


    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();
    },
    /* 获取区域集合 */
    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('/')
    },
    /* 保存编辑 */
    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() {

      listFactoryLine([this.form.extInfo.workshopId]).then((res) => {
        console.log(res);
        this.options.productionLineId = res;
      });
    },
    // 获取人员
    getUserPage() {
      if (!this.form.extInfo.principalDep) {
        return
      }
      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();
    },

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

    // 选择产线
    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.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>