kd-aiot-frontend/src/views/classifyManage/treeClassify/index.vue

<template>
  <div class="ele-body">
    <el-card shadow="never">
      <!-- 条件区 -->
      <classify-manage-search @search="reload" />
      <ele-pro-table ref="table" :columns="columns" :datasource="datasource">
        <template v-slot:toolbar>
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            class="ele-btn-icon"
            @click="openAddDialog(null)"
          >
            新建
          </el-button>
          <!--<el-button
            size="small"
            icon="el-icon-upload"
            class="ele-btn-icon"
            @click="uploadFile()"
          >
            导入
          </el-button>-->
        </template>
        <!-- 操作列 -->
        <template v-slot:action="{ row }">

          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-edit"
            @click="openAddDialog(row)"
          >
           编辑
          </el-link>

          <el-link
            type="primary"
            :underline="false"

            @click="junmpEdit(row)"
          >
           下级分类
          </el-link>
          <el-popconfirm
            class="ele-action"
            title="确定要删除此分类吗？"
            @confirm="deleteCategory(row)"
          >
            <template v-slot:reference>
              <el-link type="danger" :underline="false" icon="el-icon-delete">
                删除
              </el-link>
            </template>
          </el-popconfirm>
        </template>
      </ele-pro-table>
    </el-card>

    <list-edit ref="editRef" @done="reload" />
    <importDialog :defModule="moudleName" ref="importDialogRef" @success="reload" />
  </div>
</template>
<script>
  import ListEdit from './components/list-edit.vue';
  import ClassifyManageSearch from './components/classifyManageSearch.vue';
  import importDialog from "@/components/upload/import-dialog.vue";

  import { getSubPage, deleteCategory } from '@/api/classifyManage';
  export default {
    components: { ClassifyManageSearch, ListEdit, importDialog},
    data () {
      return {
        editData: null,
        moudleName : "mainCategoryLevel",
        columns: [
          {
            prop: 'code',
            label: '类型编码'
          },
          {
            prop: 'name',
            label: '类型名称'
          },
          {
            prop: 'ruleCode',
            label: '编码规则'
          },

          {
            prop: 'remark',
            label: '描述'
          },

          {
            columnKey: 'action',
            label: '操作',
            width: 250,
            align: 'center',
            slot: 'action',
            fixed: 'right'
          }
        ],
        searchForm: {},
        tableData: [
          {
            s1: '1'
          }
        ],
        total: 0,
        size: 10,
        page: 1
      };
    },
    methods: {
      openAddDialog (editData) {
        if(editData) {
          editData.type = editData.type + ''
        }
        this.$refs.editRef.open(editData);
      },
      reload (params) {
        this.$refs.table.reload({ pageNum: 1, where: params });
      },
      async deleteCategory ({ id }) {
        const res = await deleteCategory(id);
        if (res?.code == '0') {
          this.$message.success('删除成功！');
          this.$refs.table.reload();
        }
      },
      datasource ({ page, where, limit }) {
        return getSubPage({
          ...where,
          parentId: 0,
          pageNum: page,
          size: limit
        });
      },
      reset () {},
      // 编辑
      junmpEdit ({ id }) {
        this.$router.push({
          path: '/treeClassify/details',
          query: {
            id
          }
        });
      },
      uploadFile () {
        this.$refs.importDialogRef.open();
      },
    }
  };
</script>
<style lang="scss" scoped>
  .app-container {
    background: #f0f3f3;
    min-height: calc(100vh - 84px);
  }
  .zw-page-table {
    background: #ffffff;
    padding-top: 20px;
  }
  .pagination-wrap {
    display: flex;
    justify-content: flex-end;
    padding: 10px 0;
  }
  .table {
    width: 100%;
    margin-top: 10px;
  }
</style>