kd-aiot-frontend-qms/src/views/inspectionPoint/components/newEquipmentDialog.vue

<template>
  <el-dialog
    title="质检项"
    :visible.sync="visibleDialog"
    :before-close="handleClose"
    :close-on-click-modal="true"
    :close-on-press-escape="false"
    append-to-body
    width="80%"
  >
    <div class="layout">
      <ele-split-layout
        width="236px"
        allow-collapse
        :right-style="{ overflow: 'hidden' }"
      >
        <div>
          <div class="ele-border-lighter sys-organization-list">
            <AssetTree
              @handleNodeClick="handleNodeClick"
              @setRootId="setRootId"
               :treeIds="[12]"
              ref="treeList"
            />
          </div>
        </div>
        <template v-slot:content>
          <user-search @search="reload" ref="searchRef"> </user-search>
          <!-- 数据表格 -->
          <ele-pro-table
            ref="table"
            :columns="columns"
            :datasource="datasource"
            @done="handleDone"
            :selection.sync="selection"
            height="calc(100vh - 385px)"
            full-height="calc(100vh - 116px)"
            tool-class="ele-toolbar-form"
            cache-key="newEquipmentDialog"
            row-key="id"
          >
            <!-- 表头工具栏 -->
            <template v-slot:toolbar> </template>

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

            <template v-slot:type="{ row }">
              <span v-if="row.itemVO.type">
                {{ getDictValue('质检标准类型', row.itemVO.qualityStandardType) }}
              </span>
            </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-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>
        </template>
      </ele-split-layout>
    </div>
    <div class="btns">
      <el-button type="primary" size="small" @click="selected">选择</el-button>
      <el-button size="small" @click="handleClose">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import AssetTree from '@/components/AssetTree';
  import userSearch from '@/views/inspectionClassify/components/user-search';

  import { getList } from '@/api/inspectionClassify/index';
  import dictMixins from '@/mixins/dictMixins';

  export default {
    mixins: [dictMixins],
    components: {
      AssetTree,
      userSearch
    },
    props: {
      qualityIds: {
        type: Array
      }
    },

    watch: {
      qualityIds: {
        immediate: true,
        deep: true,
        handler(ids) {
          if (ids && ids.length > 0) {
            this.handleDone([...ids]);
          }
        }
      }
    },
    data() {
      return {
        visibleDialog: true,
        rootId: '12',
        categoryLevelId: null,
        selection: [],

        columns: [
          {
            width: 45,
            type: 'selection',
            columnKey: 'selection',
            align: 'center',
            reserveSelection: true
          },

          {
            prop: 'itemVO.categoryLevelName',
            label: '质检类型',
            align: 'center',
            minWidth: 110
          },

          {
            prop: 'itemVO.inspectionCode',
            label: '参数编码',
            align: 'center',
            minWidth: 110
          },
          {
            prop: 'itemVO.inspectionName',
            label: '参数名称',

            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
          },
          {
            label: '工艺要求',
            prop: 'itemVO.inspectionStandard',
            formatter: (row, column, cellValue) => {
              return (
                row.itemVO.symbol + ' ' + cellValue + ' ' + row.itemVO.unit
              );
            },
            minWidth: 150
          },
          {
            label: '标准类型',
            prop: 'itemVO.type',
            slot: 'type'
          },

          {
            prop: 'itemVO.qualityStandardName',
            label: '标准名称',
            align: 'center',
            minWidth: 110
          },

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

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

          {
            label: '备注',
            prop: 'inspectionRemark'
          }
        ]
      };
    },

    created() {},

    methods: {
      datasource({ page, limit, where }) {
        return getList({
          ...where,
          pageNum: page,
          size: limit,
          categoryLevelId: this.categoryLevelId || 12,
          rootCategoryLevelId: this.rootId
        });
      },

      handleDone(ids) {
        setTimeout(() => {
          if (Array.isArray(ids)) {
            this.$refs.table &&
              this.$refs.table.setSelectedRowKeys([...ids]);
          }
        }, 500);
      },

      handleNodeClick(info) {
        this.current = info;
        this.$nextTick(() => {
          this.categoryLevelId = info.id;
          this.rootCategoryLevelId = info.rootCategoryLevelId;
          this.reload();
        });
      },
      // 获取根节点id
      setRootId(id) {
        if (id) {
          this.rootId = id;
        }
      },

      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({
          pageNum: 1,
          where: where,
          categoryLevelId: this.categoryLevelId,
          rootCategoryLevelId: this.rootId
        });
      },

      handleClose() {
        this.$emit('closeDialog');
      },

      selected() {
        let _arr = [];
        if (!this.selection.length) {
          this.$message.error('请至少选择一条数据');
          return;
        }

        _arr = this.selection.map((m) => {
          return {
            ...m.itemVO
          };
        });

        this.$emit('chooseModal', _arr);
        this.handleClose();
      }
    }
  };
</script>

<style lang="scss" scoped>
  .layout {
    min-height: 50vh;
    max-height: 75vh;
    overflow-y: scroll;
  }

  .btns {
    text-align: center;
    padding: 10px 0;
  }
</style>