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

<template>
  <div>
    <ele-pro-table
      ref="table"
      :columns="columns"
      :datasource="list"
      height="calc(100vh - 500px)"
      tool-class="ele-toolbar-form"
      cache-key="inspectionClassify"
      row-key="qualityLevelId"
      :selection.sync="selection"
    >
      <template v-slot:toolbar>
        <el-button @click="handAdd" size="mini" type="primary" v-if="!isView"
          >新增质检项</el-button
        >
        <el-button @click="handSelect" 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.unit"
            >
            </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
      }
    },

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

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

        selection: [],

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

          // },
          {
            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'
          }
        ]
      };
    },

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

      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]]
          };
        });
      },

      getDate() {
        return this.list;
      },

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

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