kd-aiot-frontend-qms/src/views/inspectionClassify/components/user-list.vue

<template>
  <div>
    <user-search @search="reload" ref="searchRef"> </user-search>
    <!-- 数据表格 -->
    <ele-pro-table
      ref="table"
      :columns="columns"
      :datasource="datasource"
      height="calc(100vh - 365px)"
      full-height="calc(100vh - 116px)"
      tool-class="ele-toolbar-form"
      cache-key="inspectionClassify"
      row-key="id"
      :page-size="20"
    >
      <!-- 表头工具栏 -->
      <template v-slot:toolbar>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-plus"
          class="ele-btn-icon"
          @click="openAdd()"
        >
          添加质检项
        </el-button>
      </template>

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

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

      <template v-slot:toolList="{ row }">
        <div
          style="display: inline-block"
          v-for="(item, idx) in row.itemVO.toolList"
          :key="idx"
          >{{ item.name }}
          <span
            v-if="row.itemVO.toolList && idx != row.itemVO.toolList.length - 1"
            >,
          </span>
        </div>
      </template>

      <template v-slot:action="{ row }">
        <el-link
          type="primary"
          :underline="false"
          icon="el-icon-edit"
          @click="openEdit(row)"
        >
          修改
        </el-link>
        <el-popconfirm
          class="ele-action"
          title="确定要删除此质检项吗？"
          @confirm="remove(row)"
        >
          <template v-slot:reference>
            <el-link type="danger" :underline="false" icon="el-icon-delete">
              删除
            </el-link>
          </template>
        </el-popconfirm>
      </template>
    </ele-pro-table>

    <qualityItem
      ref="qualityItemRef"
      @chooseProcess="chooseProcess"
    ></qualityItem>

    <!-- 编辑弹窗 -->
    <user-edit
      :visible.sync="showEdit"
      :data="current"
      @done="reload"
      ref="userEdit"
    />
  </div>
</template>

<script>
  import userSearch from './user-search.vue';
  import {
    getList,
    removeItem,
    saveBatch
  } from '@/api/inspectionClassify/index';
  import dictMixins from '@/mixins/dictMixins';
  import qualityItem from './qualityItem.vue';
  import UserEdit from './user-edit.vue';

  export default {
    mixins: [dictMixins],
    components: { userSearch, qualityItem, UserEdit },
    props: {
      rootId: [Number, String]
    },
    data() {
      return {
        // 当前编辑数据
        current: null,
        columns: [
          {
            prop: 'itemVO.categoryLevelClassName',
            label: '质检分类层级',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 150
          },
          {
            prop: 'itemVO.categoryLevelName',
            label: '质检类型',
            align: 'center',
            minWidth: 110
          },
          {
            prop: 'itemVO.inspectionCode',
            label: '参数编码',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 110
          },
          {
            prop: 'itemVO.inspectionName',
            label: '参数名称',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 110
          },

          {
            prop: 'itemVO.textType',
            label: '参数类型',
            showOverflowTooltip: true,
            align: 'center',
            slot: 'textType',
            minWidth: 110
          },

          {
            prop: 'itemVO.maxValue',
            label: '参数上限',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'itemVO.minValue',
            label: '参数下限',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'itemVO.defaultValue',
            label: '默认值',
            align: 'center',
            showOverflowTooltip: true
          },

          {
            prop: 'itemVO.unitName',
            label: '参数单位',
            align: 'center'
          },
          // {
          //   label: '工艺要求',
          //   prop: 'itemVO.inspectionStandard',
          //   formatter: (row, column, cellValue) => {
          //     return (
          //       row.itemVO.symbol + ' ' + cellValue + ' ' + row.itemVO.unit
          //     );
          //   },
          //   align: 'center',
          //   minWidth: 150,
          //   showOverflowTooltip: true
          // },
          {
            label: '标准类型',
            prop: 'itemVO.type',
            slot: 'type',
            align: 'center',
            minWidth: 120
          },
          {
            prop: 'itemVO.qualityStandardName',
            label: '标准名称',
            align: 'center',
            minWidth: 120
          },

          {
            label: '状态',
            prop: 'status',
            align: 'center',
            formatter: (row, column, cellValue) => {
              return cellValue == 1 ? '启用' : cellValue === 0 ? '停用' : '';
            }
          },

          {
            prop: 'itemVO.toolList',
            slot: 'toolList',
            label: '工具名称',
            align: 'center',
            minWidth: 120,
            showOverflowTooltip: true
          },

          {
            label: '备注',
            prop: 'inspectionRemark',
            align: 'center',
            minWidth: 150
          },
          {
            label: '操作',
            align: 'center',
            fixed: 'right',
            minWidth: 150,
            slot: 'action',
            showOverflowTooltip: true
          }
        ],
        showEdit: false
      };
    },
    created() {},
    methods: {
      // 编辑
      openEdit(row) {
        console.log('row', row);
        this.current = row.itemVO;
        this.showEdit = true;
      },
      /* 表格数据源 */
      datasource({ page, limit, where }) {
        return getList({
          ...where,
          pageNum: page,
          size: limit,
          categoryLevelId: this.categoryLevelId || 12,
          rootCategoryLevelId: this.rootId
        });
      },
      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({
          pageNum: 1,
          where: where,
          categoryLevelId: this.categoryLevelId,
          rootCategoryLevelId: this.rootId
        });
      },

      /* 打开编辑弹窗 */
      openAdd() {
        this.$refs.qualityItemRef.open(this.categoryLevelId || 12);
      },

      openDetail(row) {
        console.log(row);
      },

      chooseProcess(data) {
        saveBatch(data).then((res) => {
          if (res.code == 0) {
            this.$message.success(res.message);
            this.reload();
          }
        });
      },

      /* 删除 */
      remove(row) {
        const loading = this.$loading({ lock: true });
        removeItem([row.id])
          .then((msg) => {
            loading.close();
            this.$message.success(msg);
            this.reload();
          })
          .catch((e) => {
            loading.close();
          });
      },
      done() {
        this.$refs.searchRef.search();
      },

      clickSearch(info) {
        this.categoryLevelId = info.id;
        this.rootCategoryLevelId = info.rootCategoryLevelId;
        this.reload();
      }
    }
  };
</script>