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

<template>
  <ele-modal
    title="选择"
    :visible.sync="visible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    width="60%"
    :maxable="true"
  >
    <el-form
      label-width="77px"
      class="ele-form-search"
      @keyup.enter.native="search"
      @submit.native.prevent
    >
      <el-row type="flex" :gutter="24">
        <el-col :span="6">
          <el-form-item label="质检类型" label-width="100px">
            <el-select
              v-model="where.type"
              placeholder="请选择"
              style="width: 100%"
              clearable
            >
              <el-option
                :label="item.label"
                v-for="item in typeList"
                :key="item.value"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="编码" label-width="100px">
            <el-input
              clearable
              v-model.trim="where.qualitySchemeTemplateCode"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="名称" label-width="100px">
            <el-input
              clearable
              v-model.trim="where.qualitySchemeTemplateName"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <div class="ele-form-actions">
            <el-button
              type="primary"
              class="ele-btn-icon"
              size="small"
              @click="reload"
            >
              查询
            </el-button>
            <el-button size="small" plain @click="reset">重置</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <ele-pro-table
      ref="table"
      :columns="columns"
      :datasource="datasource"
      height="calc(100vh - 400px)"
      tool-class="ele-toolbar-form"
      cache-key="inspectionClassify"
      row-key="qualityLevelId"
      :current.sync="current"
      :highlight-current-row="true"
      @current-change="handleCurrentChange"
    >
      <template v-slot:current="{ row, _index }">
        <el-radio class="radio" v-model="radio" :label="row.id"
          ><i></i
        ></el-radio>
      </template>
      <template v-slot:status="{ row }">
        {{ row.status ? '启用' : '停用' }}
      </template>
    </ele-pro-table>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="changeSel">选择</el-button>
    </span>
  </ele-modal>
</template>

<script>
  import { getTemplateList } from '@/api/material/inspectionClassify';
  import { getByCode } from '@/api/system/dictionary-data';

  export default {
    components: {},
    data() {
      const defaultWhere = {
        qualitySchemeTemplateCode: '',
        qualitySchemeTemplateName: '',
        type: ''
      };
      return {
        visible: false,
        selection: [],
        current: null,
        radio: '',
        columns: [
          // {
          //     width: 45,
          //     type: 'selection',
          //     columnKey: 'selection',
          //     align: 'center',
          //     reserveSelection: true
          // },
          {
            width: 55,
            columnKey: 'current',
            slot: 'current',
            align: 'center'
          },
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            prop: 'qualitySchemeTemplateCode',
            label: '质检方案编码',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 110
          },
          {
            prop: 'qualitySchemeTemplateName',
            label: '质检方案名称',
            align: 'center',
            minWidth: 150
          },
          {
            prop: 'type',
            label: '质检类型',
            slot: 'type',
            align: 'center',
            minWidth: 150,
            planList: this.typeList
          },
          {
            label: '状态',
            prop: 'status',
            slot: 'status',
            align: 'center'
          },
          {
            prop: 'templateRemark',
            label: '备注',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 110
          }
        ],
        where: { ...defaultWhere },
        typeList: []
      };
    },

    mounted() {
      this.getInspectionType();
    },

    methods: {
      datasource({ page, where, limit }) {
        console.log(1111);
        return getTemplateList({
          qualitySchemeTemplateCode: this.where.qualitySchemeTemplateCode,
          qualitySchemeTemplateName: this.where.qualitySchemeTemplateName,
          type: this.where.type,
          pageNum: page,
          size: limit
        });
      },

      // 多选
      selectionChangeHandle(val) {
        this.selection = val;
      },
      open() {
        this.visible = true;
      },
      search() {},

      reload() {
        this.$refs.table.reload();
      },
      handleClose() {
        this.$nextTick(() => {
          this.current = null;
          this.radio = '';
        });
        this.visible = false;
      },
      changeSel() {
        this.$emit('changeSel', this.current);
        this.handleClose();
      },
      handleCurrentChange(row) {
        this.radio = row.id;
      },
      reset() {
        this.where = { ...this.defaultWhere };
        this.reload();
      },
      async getInspectionType() {
        let res = await getByCode('inspection_plan_type');
        if (res?.code == 0) {
          let list = res.data.map((item) => {
            let key = Object.keys(item)[0];
            return { value: key, label: item[key] };
          });
          this.typeList = list;
        }
      }
    }
  };
</script>