kd-aiot-frontend-mes/src/views/produce/components/feeding/components/instanceBom.vue

<template>
  <div>
    <div class="title_box rx-bc mt6">
      <div class="name">{{ title }} ({{ list.length || 0 }})个 </div>

      <div class="rx-bc"> </div>
    </div>
    <ele-pro-table
      ref="table"
      :needPage="false"
      :columns="columns"
      :datasource="list"
      class="time-form"
      max-height="600"
      @columns-change="handleColumnChange"
      :cache-key="cacheKeyUrl"
    >
      <template v-slot:feedQuantity="{ row, $index }">
        <el-input
          size="mini"
          class="content_num"
          v-model="row.feedQuantity"
          placeholder="数量"
        >
          <template slot="append">{{ row.unit }}</template>
        </el-input>
      </template>
      <template v-slot:position="{ row, $index }">
        <el-input
          size="mini"
          class="content_num"
          v-model="row.extInfo.position"
          placeholder="位置"
        />
      </template>
      <template v-slot:weightUnit="{ row, $index }">
        <div v-if="currentTaskDiagram.isFirstTask == 1" class="flex-div">
          <el-input
            v-model="row.extInfo.weight"
            size="mini"
            :disabled="isDetails"
            style="width: 100%"
          >
            <template slot="append">
              <div> {{ row.extInfo.weightUnit }}</div>
            </template>
          </el-input>
        </div>
        <div v-if="currentTaskDiagram.isFirstTask == 0">
          {{ row.extInfo.newWeight || 0 }}
          {{ row.extInfo.weightUnit }}</div
        >
      </template>
      <template v-slot:deviceId="{ row, $index }">
        <el-select
          v-if="deviceList?.length > 0"
          class="content_num"
          filterable
          v-model="row.deviceId"
          placeholder="请选择"
          @change="(e) => selectVal(e, row, $index)"
          size="mini"
        >
          <el-option
            v-for="item in deviceList"
            :label="item.name + '-' + item.codeNumber"
            :value="item.id"
            :key="item.id"
          >
          </el-option>
        </el-select>
      </template>
      <template v-slot:heatNumber="{ row, $index }">
        <el-input
          size="mini"
          class="content_num"
          v-model="row.extInfo.heatNumber"
          placeholder="请输入炉次号"
        />
      </template>

      <!-- 操作列 -->
      <template v-slot:action="{ row, $index }" v-if="!isDetails">
        <el-link type="danger" @click="getDelete($index)">删除</el-link>
      </template>
    </ele-pro-table>
  </div>
</template>
<script>
  import tabMixins from '@/mixins/tableColumnsMixin';
  export default {
    mixins: [tabMixins],
    props: {
      list: {
        type: Array,
        default: () => []
      },
      equipmentList: {
        type: Array,
        default: () => []
      },

      currentTaskDiagram: {
        type: Object,
        default: () => {}
      },
      isDetails: {
        type: Boolean,
        default: false
      },
      workInfo: {
        type: Object,
        default: () => {}
      },
      title: {
        type: String,
        default: '物料清单'
      }
    },

    computed: {
      clientEnvironmentId() {
        return this.$store.state.user.info.clientEnvironmentId;
      },
      columns() {
        return [
          ...[
            {
              width: 55,
              type: 'index',
              columnKey: 'index',
              align: 'center',
              label: '序号',
              fixed: 'left'
            },

            {
              minWidth: 120,
              prop: 'code',
              label: '编码',
              align: 'center',
              fixed: 'left',
              showOverflowTooltip: true
            },
            {
              minWidth: 140,
              prop: 'name',
              label: '名称',
              align: 'center',
              showOverflowTooltip: true
            },
            {
              width: 150,
              prop: 'feedQuantity',
              label: '数量',
              slot: 'feedQuantity',
              align: 'center'
            },
            {
              width: 150,
              prop: 'position',
              label: '位置',
              slot: 'position',
              align: 'center'
            },
            {
              width: 150,
              prop: 'modelType',
              label: '型号',
              slot: 'modelType',
              align: 'center',
              showOverflowTooltip: true
            },
            {
              width: 150,
              prop: 'specification',
              label: '规格',
              slot: 'specification',
              align: 'center',
              showOverflowTooltip: true
            },
            {
              width: 150,
              prop: 'brandNum',
              label: '牌号',
              slot: 'brandNum',
              align: 'center',
              showOverflowTooltip: true
            },

            {
              width: 120,
              prop: 'weightUnit',
              label:
                this.currentTaskDiagram &&
                this.currentTaskDiagram.isFirstTask == 1
                  ? '物料重量'
                  : '上道工序重量',
              slot: 'weightUnit',
              align: 'center',
              showOverflowTooltip: true
            },
            {
              minWidth: 120,
              prop: 'extInfo.engrave',
              label: '刻码',
              slot: 'engrave',
              align: 'center'
            },
            {
              minWidth: 160,
              prop: 'extInfo.materielCode',
              label: '物料代号',
              align: 'center',
              slot: 'materielCode'
            },
            {
              minWidth: 150,
              prop: 'deviceId',
              label: '设备',
              align: 'center',
              slot: 'deviceId'
            },
            {
              minWidth: 100,
              prop: 'heatNumber',
              label: '炉次号',
              slot: 'heatNumber',
              align: 'center'
            },
            {
              columnKey: 'action',
              label: '操作',
              width: 120,
              align: 'center',
              resizable: false,
              slot: 'action',
              fixed: 'right',
              showOverflowTooltip: true
            }
          ],
          this.workInfo.singleReport == 0
            ? {
                minWidth: 120,
                label: '投料类型',
                align: 'center',
                formatter: () => {
                  return '批量投料';
                },
                showOverflowTooltip: true
              }
            : {
                show: false,
                width: 1
              }
        ];
      }
    },

    watch: {
      equipmentList: {
        immediate: true,
        deep: true,
        handler(newVal) {
          this.deviceList = newVal;
          this.changeHeatNumber();
        }
      }
    },

    data() {
      return {
        deviceList: [],
        cacheKeyUrl: 'mes_produce_feeding_instanceBom'
      };
    },

    methods: {
      getDelete(index) {
        this.list.splice(index, 1);
      },

      selectVal(e, item, idx) {
        console.log(e, item, idx);
        let obj = this.deviceList.find((f) => f.id == e);

        this.$set(
          this.list[idx],
          'deviceName',
          obj.name + '-' + obj.codeNumber
        );
        this.$set(
          this.list[idx]['extInfo'],
          'heatNumber',
          obj.extInfo.heatNumber
        );
      },

      changeHeatNumber() {
        this.deviceList.forEach((f) => {
          this.list.forEach((o) => {
            if (
              o.deviceId &&
              f.id == o.deviceId &&
              this.deviceList.length > 1
            ) {
              o.extInfo.heatNumber = f.extInfo.heatNumber;
              o['workstationName'] = f.workstationName;
            } else if (this.deviceList.length == 1) {
              o['deviceName'] = this.deviceList[0].name;
              o['deviceId'] = this.deviceList[0].id;
              o['workstationName'] = this.deviceList[0].workstationName;
              this.$set(
                o.extInfo,
                'heatNumber',
                this.deviceList[0].extInfo.heatNumber
              );

              this.$forceUpdate();
            }
          });
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .mb4 {
    margin-bottom: 4px;
  }

  .content_num {
    --input-background-color: #f0f8f2;
  }
  .flex-div {
    display: flex;
  }
  ::v-deep .el-input-group__append {
    padding: 0 10px !important;
  }
</style>