kd-aiot-frontend-qms/src/views/inspectionTemplate/inspectionClassify/index.vue

<template>
  <ele-modal
    title="检测"
    :visible.sync="visible"
    v-if="visible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    width="80%"
    :maxable="true"
  >
    <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"
                :treeIds="[12]"
                ref="treeList"
                :defaultExpandAll="false"
              />
            </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 - 405px)"
              full-height="calc(100vh - 116px)"
              tool-class="ele-toolbar-form"
              row-key="inspectionCode"
              :selection.sync="selection"
              @columns-change="handleColumnChange"
              :cache-key="cacheKeyUrl"
            >
              <!-- 表头工具栏 -->

              <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>-->
              <!--                  <span v-if="row.textType == 3">-->
              <!--                    [ {{ row.minValue }}-{{ row.maxValue }}]-->
              <!--                  </span>-->
              <!--                  <span v-else>{{ row.defaultValue }}</span>-->

              <!--                  <span> {{ row.unit }}</span>-->
              <!--                </div>-->
              <!--              </template>-->

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

              <template v-slot:toolList="{ row }">
                <div
                  style="display: inline-block"
                  v-for="(item, idx) in row.toolList"
                  :key="idx"
                  >{{ item.name }}
                  <span v-if="row.toolList && idx != row.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>
  </ele-modal>
</template>

<script>
  import AssetTree from '@/components/AssetTree';
  import userSearch from './components/user-search.vue';
  import { pageByBom } from '@/api/inspectionTemplate/index.js';
  import dictMixins from '@/mixins/dictMixins';

  import tabMixins from '@/mixins/tableColumnsMixin';
  export default {
    mixins: [dictMixins, tabMixins],
    components: {
      AssetTree,
      userSearch
    },
    data() {
      return {
        cacheKeyUrl: 'qms-c2e9664a-inspectionTemplate-inspectionClassify',
        columnsVersion: 1,
        // 加载状态
        loading: false,
        // 表格选中数据
        selection: [],
        current: null,
        rootId: '12',
        visible: false,
        disabledId: [],
        columns: [
          {
            width: 45,
            type: 'selection',
            columnKey: 'selection',
            align: 'center',
            reserveSelection: true,
            selectable: (row) => {
              return !this.disabledId.includes(row.inspectionCode);
            }
          },

          {
            prop: 'categoryLevelClassName',
            label: '检测类型',
            align: 'center',
            minWidth: 150
          },
          {
            prop: 'inspectionCode',
            label: '参数编码',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 110
          },
          {
            prop: 'inspectionName',
            label: '参数名称',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 110
          },

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

          {
            prop: 'defaultValue',
            slot: 'defaultValue',
            label: '默认值',
            align: 'center',
            minWidth: 150
          },
          {
            prop: 'unitName',
            slot: 'unitName',
            label: '参数单位',
            align: 'center',
            minWidth: 150
          },

          // {
          //   label: '工艺要求',
          //   prop: 'inspectionStandard',
          //   formatter: (row, column, cellValue) => {
          //     return row.symbol + ' ' + cellValue + ' ' + row.unit;
          //   },
          //   minWidth: 150
          // },
          {
            label: '标准类型',
            prop: 'type',
            slot: 'type'
          },

          {
            prop: 'qualityStandardName',
            label: '标准名称',
            align: 'center',
            minWidth: 110
          },
          {
            prop: 'standardCode',
            label: '标准代码',
            align: 'center',
            minWidth: 110
          },
          {
            label: '状态',
            prop: 'status',
            formatter: (row, column, cellValue) => {
              return cellValue == 1 ? '启用' : cellValue === 0 ? '停用' : '';
            }
          },

          {
            prop: '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 = pageByBom({
          ...where,
          pageNum: page,
          size: limit,
          categoryLevelId: this.categoryLevelId || 12,
          rootCategoryLevelId: this.rootId
        });

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

      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) {
        console.log(id, 'ididid');
        if (id) {
          this.rootId = id;
        }
      },

      open(list) {
        this.visible = true;
        this.disabledId = list.map((item) => item.inspectionCode);
        // this.$nextTick(() => {
        //   list.forEach((item) => {
        //     this.$refs.table && this.$refs.table.toggleRowSelection(item, true);
        //   });
        // });
      },

      handleClose() {
        this.$refs.table && this.$refs.table.clearSelection();
        this.visible = false;
      },

      handleSave() {
        let _arr = [];
        _arr = this.selection.map((m) => {
          return {
            ...m
          };
        });
        this.$emit('selectChange', _arr);
        this.handleClose();
      }
    }
  };
</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: 30px;

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