kd-aiot-frontend/src/views/ItemInformation/index.vue

<template>
  <div class="ele-body">
    <el-card shadow="never">
      <ProductSearch @search="reload" />
      <ele-split-layout
        width="244px"
        allow-collapse
        :right-style="{ overflow: 'hidden' }"
      >
        <div class="ele-border-lighter split-layout-right-content">
          <AssetTree
            ref="assetTreeRef"
            id="4"
            @handleNodeClick="handleNodeClick"
          />
        </div>
        <!-- 表格 -->
        <template v-slot:content>
          <ele-pro-table
            ref="table"
            :columns="columns"
            :datasource="datasource"
            height="calc(100vh - 350px)"
            class="dict-table"
          >
            <template v-slot:toolbar>
              <el-button
                size="small"
                type="primary"
                icon="el-icon-plus"
                class="ele-btn-icon"
                @click="add"
              >
                新建物品
              </el-button>
            </template>
            <!-- 表头工具栏 -->
            <template v-slot:action="{ row }">
              <el-link
                type="primary"
                :underline="false"
                icon="el-icon-edit"
                @click="handleEdit(row)"
              >
                修改
              </el-link>
            </template>
          </ele-pro-table>
        </template>
      </ele-split-layout>
    </el-card>
    <DialogItem ref="dialogItemRef" />
  </div>
</template>

<script>
  import AssetTree from '@/components/AssetTree';
  import ProductSearch from './components/product-search.vue';
  import { getList, pageSubstance } from '@/api/classifyManage/itemInformation';
  import DialogItem from './components/Dialog-item.vue';

  export default {
    name: 'SystemDictionary',
    components: { AssetTree, ProductSearch, DialogItem },
    data() {
      return {
        // 表格列配置
        columns: [
          {
            columnKey: 'index',
            type: 'index',
            width: 55,
            align: 'center',
            reserveSelection: true,
            label: '序号',
            showOverflowTooltip: true
          },
          {
            prop: 'code',
            label: '物品编码',
            minWidth: 100
          },
          {
            prop: 'name',
            label: '物品名称',
            showOverflowTooltip: true,
            minWidth: 130
          },

          {
            prop: 'categoryLevelGroupCode',
            label: '物料组编码',
            showOverflowTooltip: true,
            width: 100
          },

          {
            prop: 'brandNum',
            label: '牌号',
            width: 70
          },
          {
            prop: 'modelType',
            label: '型号',
            minWidth: 130
          },
          {
            prop: 'measuringUnit',
            label: '计量单位',
            width: 80
          },
          {
            prop: 'weightUnit',
            label: '重量单位',
            width: 80
          },

          {
            prop: 'roughWeight',
            label: '毛重',
            width: 100
          },

          {
            prop: 'netWeight',
            label: '净重',
            width: 100
          },

          {
            prop: 'packingUnit',
            label: '包装单位',
            width: 80
          },
          {
            action: 'action',
            slot: 'action',
            label: '操作'
          }
        ],
        categoryLevelId: '4'
      };
    },

    methods: {
      /* 新建物品 */
      add() {
        this.$refs.dialogItemRef.open();
      },
      /* 表格数据源 */
      datasource({ page, where, limit }) {
        return getList({
          ...where,
          pageNum: page,
          size: limit,
          isProduct: false,
          categoryLevelId: this.categoryLevelId,
          rootCategoryLevelId: 4
        });
      },
      handleNodeClick(data) {
        this.categoryLevelId = data.id;
        this.reload();
      },
      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({ where });
      },
      handleEdit({ id }) {
        this.$router.push({
          path: '/material/product/detail',
          query: {
            id
          }
        });
      }
    }
  };
</script>

<style lang="scss" scoped></style>