kd-aiot-frontend/src/views/material/BOMmanage/qualityTesting/term.vue

<template>
  <div>
    <ele-pro-table
      ref="table"
      :columns="columns"
      :datasource="list"
      :height="tableHeight"
      tool-class="ele-toolbar-form"
      cache-key="inspectionClassify"
      row-key="qualityLevelId"
      :selection.sync="selection"
      @selection-change="handleSelectionChange"
      @fullscreen-change="fullscreenChange"
    >
      <template v-slot:toolbar>
        <!-- <el-button @click="handAdd" size="mini" type="primary" v-if="!isView&&isQualityInspection"
          >新增质检项</el-button
        > -->
        <el-button @click="handSelect" size="mini" type="primary" v-if="!isView"
          >选择质检方案</el-button
        >
        <el-button
          @click="batchDelete"
          size="mini"
          type="primary"
          v-if="!isView"
          >批量删除</el-button
        >
      </template>

      <template v-slot:textType="{ row }">
        {{
          row.textType == 1
            ? '数值'
            : row.textType == 2
            ? '选择'
            : row.textType == 3
            ? '上下限'
            : row.textType == 4
            ? '规格'
            : row.textType == 5
            ? '时间'
            : row.textType == 6
            ? '范围'
            : row.textType == 7
            ? '文本'
            : ''
        }}
      </template>

      <template v-slot:type="{ row }">
        {{ getDictValue('质检标准类型', row.qualityStandardType) }}
      </template>

      <template v-slot:defaultValue="{ row }">
        <div style="width: 100%; display: flex; justify-content: space-between">
          <div style="width: 8%">
            <DictSelection
              style="width: 100px"
              clearable
              dictName="数学字符"
              v-model="row.symbol"
            ></DictSelection>
            <!-- <el-input v-model="row.symbol" :disabled="isView"> </el-input> -->
          </div>
          <!-- 上下限 -->
          <div
            v-if="row.textType == 3"
            style="
              display: flex;
              align-items: center;
              justify-content: space-between;
              width: 75%;
            "
          >
            <el-input
              style="width: 45%"
              v-model="row.minValue"
              :disabled="isView"
            ></el-input>
            <span>&nbsp;&nbsp;-</span>

            <el-input
              style="width: 45%; margin-left: 10px"
              v-model="row.maxValue"
              :disabled="isView"
            ></el-input>
          </div>

          <div v-else style="width: 75%">
            <el-input
              v-model="row.defaultValue"
              placeholder="请输入"
              :disabled="isView"
            >
            </el-input>
          </div>

          <div style="width: 15%">
            <DictSelection
              dictName="工艺参数单位"
              clearable
              filterable
              v-model="row.unitName"
            >
            </DictSelection>
            <!-- <el-input v-model="row.unit" :disabled="isView"> </el-input> -->
          </div>
        </div>
      </template>

      <template v-slot:action="{ row, $index }">
        <el-popconfirm
          class="ele-action"
          title="确定要删除当前质检项吗？"
          @confirm="handDel($index)"
        >
          <template v-slot:reference>
            <el-link type="danger" :underline="false" icon="el-icon-delete">
              删除
            </el-link>
          </template>
        </el-popconfirm>
      </template>
    </ele-pro-table>

    <termPop ref="termRef" @selectChange="selectChange"></termPop>

    <inspectionTemplatePop
      ref="inspectionTemplateRef"
      @changeSel="changeSel"
    ></inspectionTemplatePop>
  </div>
</template>

<script>
  import termPop from './inspectionClassify/index.vue';
  import inspectionTemplatePop from './inspectionTemplate.vue';

  import dictMixins from '@/mixins/dictMixins';
  import { getByCode } from '@/api/system/dictionary-data';

  import { getTemplateById } from '@/api/material/inspectionClassify';

  export default {
    components: { termPop, inspectionTemplatePop },
    mixins: [dictMixins],
    props: {
      qualityParam: {
        type: Array
      },
      isView: {
        type: Boolean,
        default: false
      },
      isQualityInspection: {
        type: Boolean,
        default: true
      }
    },

    watch: {
      qualityParam: {
        handler(val) {
          this.list = val;
          this.$forceUpdate();
        },
        deep: true,
        immediate: true
      }
    },

    data() {
      return {
        list: [],
        dictList: [],

        selection: [],

        columns: [
          // {
          //   prop: 'sort',
          //   label: '排序号',
          //   align: 'center',

          // },
          {
            width: 45,
            type: 'selection',
            columnKey: 'selection',
            align: 'center',
            fixed: true
          },
          {
            prop: 'categoryLevelClassName',
            label: '质检类型',
            align: 'center',
            minWidth: 110
          },
          // {
          //   prop: 'categoryLevelName',
          //   label: '质检类型',
          //   align: 'center',
          //   minWidth: 110
          // },

          {
            prop: 'inspectionName',
            label: '质检名称',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 110
          },

          {
            prop: 'defaultValue',
            slot: 'defaultValue',
            label: '工艺参数',
            align: 'center',
            width: 700
          },

          // {
          //   label: '工艺要求',
          //   prop: 'inspectionStandard',
          //   formatter: (row, column, cellValue) => {
          //     return row.symbol + ' ' + cellValue + ' ' + row.unit;
          //   },
          //   minWidth: 350
          // },

          {
            columnKey: 'action',
            label: '操作',
            width: 80,
            align: 'center',
            resizable: false,
            slot: 'action',
            fixed: 'right'
          }
        ],
        tableHeight: 'calc(100vh - 500px)'
      };
    },

    created() {
      this.requestDict('质检标准类型');

      console.log(
        document.documentElement.clientHeight,
        'document.documentElement.clientHeight'
      );
      // this.getDictList('mathematical_symbol'); // 数学字符
    },

    methods: {
      handDel(index) {
        this.$confirm('是否删除该质检项', '删除', {
          type: 'warning'
        })
          .then(() => {
            this.list.splice(index, 1);
          })
          .catch(() => {});
      },

      handAdd() {
        this.$refs.termRef.open(this.list);
      },

      fullscreenChange(fullscreen) {
        if (fullscreen) {
          this.tableHeight = 'calc(100vh - 120px)';
        } else {
          this.tableHeight = 'calc(100vh - 500px)';
        }
      },

      async getDictList(code) {
        let { data: res } = await getByCode(code);
        this.dictList = res.map((item) => {
          let values = Object.keys(item);
          return {
            value: Number(values[0]),
            label: item[values[0]]
          };
        });
      },

      handleSelectionChange() {},

      batchDelete() {
        if (this.selection.length == 0) {
          this.$message.warning('请选择需要删除的质检项');
        }

        // console.log(this.list, 'this.List');
        // console.log(this.selection, 'this.selection');

        let indexList = [];

        if (this.selection.length == this.list.length) {
          this.list = [];
        } else {
          for (let i = 0; i < this.selection.length; i++) {
            for (let j = 0; j < this.list.length; j++) {
              if (this.selection[i].id == this.list[j].id) {
                indexList.push(j);
              }
            }
          }
        }

        if (indexList.length != 0) {
          indexList.forEach((it) => {
            this.list.splice(it, 1);
          });
        }

        // this.selection.forEach((item) => {
        //   const index = this.list.findIndex((it) => (it.id = item.id));

        //   console.log('1111111111111111111');
        //   if (index) {
        //     indexList.push(index);
        //   }
        // });

        console.log(indexList, 'indexList');
        // this.selection = [];
        // this.$forceUpdate();
      },

      getDate() {
        return this.list;
      },

      selectChange(list) {
        this.list = list;
      },
      handSelect() {
        this.$refs.inspectionTemplateRef.open();
      },
      async changeSel(list) {
        // let ids = list.map((item) => item.id).toString();
        // console.log(ids, 'ids')
        await getTemplateById(list.id).then(({ data }) => {
          data.inspectionItemVOList.forEach((item) => {
            item.qualitySchemeTemplateCode = data.qualitySchemeTemplateCode;
            item.qualitySchemeTemplateName = data.qualitySchemeTemplateName;
          });
          this.list = [...this.list, ...(data.inspectionItemVOList || [])];

          // this.list.forEach((item) => {
          //   item.qualitySchemeTemplateCode = data.qualitySchemeTemplateCode;
          //   item.qualitySchemeTemplateName = data.qualitySchemeTemplateName;
          // });
        });
      }
    }
  };
</script>

<style lang="scss" scoped></style>