kd-aiot-frontend-qms/src/views/inspectionWork/components/sampleListDialog.vue

<!-- 用户编辑弹窗 -->
<template>
  <ele-modal
    :title="title"
    :visible.sync="visible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    width="80%"
    :maxable="true"
  >
    <el-table :data="tableData" :default-expand-all="true">
      <el-table-column type="expand">
        <template slot-scope="props">
          <div style="padding: 10px">
            <el-table :data="props.row.qualitySampleTemplateList" border>
              <el-table-column
                label="质检方案编码"
                prop="qualitySchemeTemplateCode"
                align="center"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <span :class="scope.row.qualityResults === 2 ? 'warn' : ''">
                    {{ scope.row.qualitySchemeTemplateCode }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                label="质检方案名称"
                prop="qualitySchemeTemplateName"
                align="center"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <span :class="scope.row.qualityResults === 2 ? 'warn' : ''">
                    {{ scope.row.qualitySchemeTemplateName }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                label="质检类型"
                prop="categoryLevelClassName"
                align="center"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <span :class="scope.row.qualityResults === 2 ? 'warn' : ''">
                    {{ scope.row.categoryLevelClassName }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                label="质检项编码"
                prop="inspectionCode"
                align="center"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <span :class="scope.row.qualityResults === 2 ? 'warn' : ''">
                    {{ scope.row.inspectionCode }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                label="质检项名称"
                prop="inspectionName"
                align="center"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <span :class="scope.row.qualityResults === 2 ? 'warn' : ''">
                    {{ scope.row.inspectionName }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                label="工艺参数"
                prop="defaultValue"
                align="center"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <!-- <span :class="scope.row.qualityResults === 2 ? 'warn' : ''">
                    {{ scope.row.defaultValue }}
                  </span> -->
                  <div
                    style="display: flex; justify-content: center"
                    :class="scope.row.qualityResults === 2 ? 'warn' : ''"
                  >
                    <span>{{ scope.row.symbol }}</span>
                    <span v-if="scope.row.textType == 3">
                      {{ scope.row.minValue }}-{{ scope.row.maxValue }}
                    </span>

                    <span v-else>
                      <span>{{ scope.row.defaultValue }}</span>
                    </span>

                    {{ scope.row.unitName }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="质检工具" prop="" align="center">
                <template slot-scope="scope">
                  <toolButtom
                    v-model="scope.row.useTools"
                    :type="type"
                    :sList="scope.row.toolList"
                  />
                </template>
              </el-table-column>

              <!-- @blur="(e) => inputResultContent(e, scope.row)" -->
              <el-table-column
                label="质检内容"
                prop="qualityResultContent"
                align="center"
                fixed="right"
                width="360"
              >
                <template slot-scope="scope">
                  <el-input
                    :class="scope.row.qualityResults === 2 ? 'warn' : ''"
                    v-model="scope.row.qualityResultContent"
                    placeholder="请输入内容"
                    :disabled="type == 'detail'"
                    @input="
                      handleInput(scope.row, scope.row.qualityResultContent,tableData)
                    "
                  >
                    <template slot="append" v-if="scope.row.unitName">
                      {{ scope.row.unitName }}
                    </template>
                  </el-input>
                </template>
              </el-table-column>
              <el-table-column
                label="质检结果"
                prop="qualityResults"
                align="center"
                fixed="right"
              >
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.qualityResults"
                    placeholder="请选择"
                    style="width: 100%"
                    @change="qualityResultsListChange(tableData)"
                    :disabled="type == 'detail'"
                  >
                    <el-option
                      v-for="item in qualityResultsList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </template>
      </el-table-column>
      <template v-for="column in tableColumns">
        <el-table-column
          :label="column.label"
          :prop="column.prop"
          :fixed="column.fixed"
          :show-overflow-tooltip="true"
          :width="column.width"
          :align="column.align"
          :formatter="column.formatter"
        >
          <!-- <template slot-scope="scope" v-if="column.slot=='qualityResults'">
            <el-select
              v-model="scope.row.qualityResults"
              placeholder="请选择"
              style="width: 100%"
              :disabled="type == 'detail'"
            >
              <el-option
                v-for="item in qualityResultsList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template> -->
        </el-table-column>
      </template>
      <!-- <el-table-column label="操作" align="center" width="80">
        <template slot-scope="scope">
          <el-link
            :underline="false"
            type="primary"
            @click="handleDispose(scope.$index, scope.row, 'dispose')"
          >
            处置
          </el-link>
        </template>
      </el-table-column> -->
    </el-table>
    <template v-slot:footer v-if="type == 'report'">
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleConfirm"> 确认 </el-button>
    </template>
  </ele-modal>
</template>

<script>
  import toolButtom from './toolButtom.vue';
  import {handleInput,qualityResultsListChange} from './unit.js';
  export default {
    components: {
      toolButtom
    },
    data() {
      return {
        handleInput,qualityResultsListChange,
        title: '',
        visible: false,
        rowIndex: 0,
        type: '',
        tableData: [],
        tableColumns: [
          {
            label: '编码',
            prop: 'categoryCode',
            width: '150',
            align: 'center'
          },
          {
            label: '名称',
            prop: 'categoryName',
            width: '150',
            align: 'center',
            showOverflowTooltip: true
          },
          { label: '批次号', prop: 'batchNo', align: 'center' },
          // { label: '发货条码', prop: 'barcodes', align: 'center' },
          { label: '包装编码', prop: 'packageNo', align: 'center' },
          { label: '样品编码', prop: 'sampleCode', align: 'center' },
          { label: '包装数量', prop: 'packingQuantity', align: 'center' },
          // { label: '包装单位', prop: 'packingUnit', align: 'center' },
          { label: '计量数量', prop: 'measureQuantity', align: 'center' },
          // { label: '计量单位', prop: 'measureUnit', align: 'center' },
          { label: '物料代号', prop: 'materielDesignation', align: 'center' },
          { label: '客户代号', prop: 'clientCode', align: 'center' },
          { label: '刻码', prop: 'engrave', align: 'center' },
          {
            label: '型号',
            prop: 'modelType',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            label: '规格',
            prop: 'specification',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            label: '电压等级',
            prop: 'voltage',
            align: 'center',
            showOverflowTooltip: true
          },
          { label: '重量', prop: 'weight', align: 'center' },
          { label: '重量单位', prop: 'weightUnit', align: 'center' },
          { label: '仓库', prop: 'warehouseName', align: 'center' },
          {
            label: '质检结果',
            prop: 'qualityResults',
            align: 'center',
            slot: 'qualityResults',
            formatter: (row, column) => {
              if (row.qualityResults) {
                return row.qualityResults == 1
                  ? '合格'
                  : row.qualityResults == 2
                  ? '不合格'
                  : row.qualityResults == 3
                  ? '让步接收'
                  : '';
              }
            }
          }
          // { label: '货区', prop: 'areaName', align: 'center', },
          // { label: '货架', prop: 'goodsShelfName', align: 'center', },
          // { label: '货位', prop: 'goodsAllocationName', align: 'center', },
          // { label: '生产日期', prop: 'productionDate', align: 'center', },
          // { label: '采购日期', prop: 'purchaseDate', align: 'center', }
        ],
        qualityResultsList: [
          {
            value: 1,
            label: '合格'
          },
          {
            value: 2,
            label: '不合格'
          },
          {
            value: 3,
            label: '让步接收'
          }
        ],
        sList: [] //质检工具筛选
      };
    },
    computed: {},

    created() {},
    methods: {
      async openDia(index, row, type, list, isStatus, sList) {
        this.tableData = [];
        this.rowIndex = index;
        this.type = type;
        // console.log(list, 'lklllllllllllllllllkkkkkkkkkkkkkkkkkkkkk', list[0].qualityResults);
        //如果质检项qualitySampleTemplateList只有一条数据且质检结果是让步接收
        if (list[0].qualitySampleTemplateList.length == 1) {
          for (let i = 0; i < list[0].qualitySampleTemplateList.length; i++) {
            list[0].qualitySampleTemplateList[i].qualityResults = list[0]
              .qualityResults
              ? list[0].qualityResults
              : 1;
          }
        }
        // 默认合格
        list.map((item) => {
          item.qualitySampleTemplateList &&
            item.qualitySampleTemplateList.map((el) => {
              el.qualityResults = el.qualityResults ? el.qualityResults : 1;
            });
        });
        this.tableData = JSON.parse(JSON.stringify(list));
        console.log(this.tableData, '33333333333333333');

        this.visible = true;
      },

  

      handleClose() {
        this.visible = false;
      },
      handleConfirm() {
        this.visible = false;
        this.$emit('handleConfirm', this.tableData, this.rowIndex);
      },
      handleDispose(index, row, type) {
        this.$emit('handleDispose', index, row, type);
      },

      //选择质检工具
      openToolList(index, row) {
        this.$emit('openToolList', index, row);
      }
    }
  };
</script>

<style scoped lang="scss">
  ::v-deep .warn {
    color: red;
    .el-input__inner {
      color: red;
    }
  }
</style>