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"
        :page-size="pageSize"
        @columns-change="handleColumnChange"
        :cache-key="cacheKeyUrl"
      >
        <template v-slot:toolbar>
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            class="ele-btn-icon"
            @click="openAddDialog(null)"
            v-if="$hasPermission('main:categorylevel:save')"
          >
            新建
          </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)"
            v-if="$hasPermission('main:categorylevel:update')"
          >
            编辑
          </el-link>

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

            @click="junmpEdit(row)"
          >
            下级分类
          </el-link>
          <el-popconfirm
            class="ele-action"
            title="确定要删除此分类吗？"
            @confirm="deleteCategory(row)"
            v-if="$hasPermission('main:categorylevel:delete')"

          >
            <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 tabMixins from '@/mixins/tableColumnsMixin';

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 {
  mixins: [tabMixins],

  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'
        },
        {
          prop: 'isEnabled',
          align: 'center',
          label: '状态',
          showOverflowTooltip: true,
          formatter: (row, column) => {
            return row.isEnabled === 0
              ? '停用'
              : row.isEnabled === 1
              ? '启用'
              : '';
          }
          },
      ],
      searchForm: {},
      tableData: [
        {
          s1: '1'
        }
      ],
      total: 0,
      size: 10,
      page: 1,

      pageSize: this.$store.state.tablePageSize,
      cacheKeyUrl: '4e99a929-treeClassify'
    };
  },
  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>