kd-aiot-frontend/src/views/material/product/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="9"
            @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: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>
  </div>
</template>

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

  export default {
    name: 'SystemDictionary',
    components: { AssetTree, ProductSearch },
    data () {
      return {
        // 表格列配置
        columns: [
          {
            columnKey: 'index',
            type: 'index',
            width: 55,
            align: 'center',
            reserveSelection: true,
            label: '序号',
            showOverflowTooltip: true
          },
          {
            prop: 'code',
            label: '产品编码'
          },
          {
            prop: 'name',
            label: '产品名称',
            showOverflowTooltip: true
          },
          {
            prop: 'brandNum',
            label: '牌号'
          },
          {
            prop: 'modelType',
            label: '型号'
          },
          {
            prop: 'measuringUnit',
            label: '计量单位'
          },
          {
            prop: 'packingUnit',
            label: '包装单位'
          },
          {
            action: 'action',
            slot: 'action',
            label: '操作'
          }
        ],
        categoryLevelId: '9'
      };
    },

    methods: {
      /* 表格数据源 */
      datasource ({ page, where, limit }) {
        return getList({
          ...where,
          pageNum: page,
          size: limit,
          isProduct: true,
          categoryLevelId: this.categoryLevelId
        });
      },
      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>