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

<template>
  <el-dialog
    title="质检"
    :visible.sync="visible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    width="80%"
  >
    <div class="ele-body">
      <el-card shadow="never" v-loading="loading">
        <ele-split-layout
          width="266px"
          allow-collapse
          :right-style="{ overflow: 'hidden' }"
        >
          <div>
            <div class="ele-border-lighter sys-organization-list">
              <AssetTree
                @handleNodeClick="handleNodeClick"
                @setRootId="setRootId"
                :id="rootId"
                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"
              height="calc(100vh - 365px)"
              full-height="calc(100vh - 116px)"
              tool-class="ele-toolbar-form"
              cache-key="inspectionClassify"
              row-key="id"
              :selection.sync="selection"
            >
              <!-- 表头工具栏 -->

              <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
                    ? '范围'
                    : ''
                }}
              </template>

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

              <template v-slot:defaultValue="{ row }">
                <div>
                  <span v-if="row.itemVO.textType == 3">
                    [ {{ row.itemVO.minValue }}-{{ row.itemVO.maxValue }}]
                  </span>
                  <span v-else>{{ row.itemVO.defaultValue }}</span>

                  <span> {{ row.itemVO.unit }}</span>
                </div>
              </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>
            </ele-pro-table>
          </template>
        </ele-split-layout>
      </el-card>
    </div>

    <div slot="footer">
      <el-button type="primary" @click="handleSave"> 选择 </el-button>
      <el-button @click="handleClose"> 取消 </el-button>
    </div>
  </el-dialog>
</template>

<script>
  import AssetTree from '@/components/AssetTree';
  import userSearch from './components/user-search.vue';
  import { getList } from '@/api/material/inspectionClassify';
  import dictMixins from '@/mixins/dictMixins';

  export default {
    mixins: [dictMixins],
    components: {
      AssetTree,
      userSearch
    },
    data() {
      return {
        // 加载状态
        loading: false,
        // 表格选中数据
        selection: [],
        current: null,
        rootId: '12',
        visible: false,

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

          {
            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.defaultValue',
            slot: 'defaultValue',
            label: '工艺参数',
            align: 'center',
            minWidth: 150
          },

          {
            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() {
      this.requestDict('质检方式');
      this.requestDict('质检标准类型');
    },
    methods: {
      /* 表格数据源 */
      datasource({ page, limit, where }) {
        let _data = null;
        _data = getList({
          ...where,
          pageNum: page,
          size: limit,
          categoryLevelId: this.categoryLevelId || 12,
          rootCategoryLevelId: this.rootId
        });

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

      handleNodeClick(info) {
        this.current = info;
        this.$nextTick(() => {
          console.log(info);
          this.clickSearch(info);
        });
      },

      clickSearch(info) {
        this.categoryLevelId = info.id;
        this.rootCategoryLevelId = info.rootCategoryLevelId;
        this.reload();
      },

      // 获取根节点id
      setRootId(id) {
        if (id) {
          this.rootId = id;
        }
      },

      open() {
        this.visible = true;
      },

      handleClose() {
        this.visible = false;
      },

      handleSave() {
        let _arr = [];
        _arr = this.selection.map((m) => {
          return {
            ...m
          };
        });
        this.$emit('selectChange', _arr);
      }
    }
  };
</script>

<style lang="scss" scoped>
  .sys-organization-list {
    height: calc(100vh - 264px);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    overflow: auto;
  }

  .sys-organization-list :deep(.el-tree-node__content) {
    height: 40px;

    & > .el-tree-node__expand-icon {
      margin-left: 10px;
    }
  }
</style>