daimp-front/sub-government-affairs-service/src/views/dict/component/landCassification/index.vue

<template>
  <CustomCard>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-tree style="max-width: 600px" :data="typeTree" :props="{ children: 'children', label: 'label' }" @node-click="handleNodeClick" />
      </el-col>
      <el-col :span="18">
        <avue-crud
          ref="crudRef"
          v-model="state.form"
          v-model:search="state.query"
          v-model:page="state.pageData"
          :table-loading="state.loading"
          :data="state.data"
          :option="state.options"
          @refresh-change="refreshChange"
          @search-reset="searchChange"
          @search-change="searchChange"
          @selection-change="selectionChange"
          @current-change="currentChange"
          @size-change="sizeChange"
          @row-save="rowSave"
          @row-update="rowUpdate"
          @row-del="rowDel"
        >
          <template #menu-left>
            <el-button type="primary" icon="Plus" @click="onAdd">新增</el-button>
            <el-button type="success" icon="download" @click="onExport">导出</el-button>
          </template>

          <template #menu="scope">
            <custom-table-operate :actions="state.options.actions" :data="scope" />
          </template>
        </avue-crud>
      </el-col>
    </el-row>
  </CustomCard>
</template>
<script lang="ts" setup>
import { useApp } from '@/hooks';
import { ref, reactive } from 'vue';
import CustomCard from '@/components/CustomCard.vue';
import { CRUD_OPTIONS } from '@/config';

const { VITE_APP_BASE_API } = import.meta.env;
const app = useApp();

/* --------------- data --------------- */
// #region
const state = reactive({
  loading: false,
  query: {
    current: 1,
    size: 10,
  },
  form: {},
  selection: [],
  options: {
    ...CRUD_OPTIONS,
    addBtnText: '',
    addBtn: false,
    column: [
      { label: '编号', prop: 'gridManager' },
      { label: '土地分类', prop: 'gridManager' },
      { label: '土地类别', prop: 'gridManager' },
      { label: '状态', prop: 'gridManager' },
    ],
    actions: [
      {
        name: (row) => getStatusButtonText(row.status),
        icon: 'edit',
        event: ({ row }) => rowStatus(row),
      },
      {
        name: '编辑',
        icon: 'edit',
        event: ({ row }) => rowEdit(row),
      },
      {
        type: 'danger',
        name: '删除',
        icon: 'delete',
        event: ({ row }) => rowDel(row),
      },
    ],
  },
  pageData: {
    total: 0,
    currentPage: 1,
    pageSize: 10,
  },
  data: [],
  currentRow: {},
});

let typeTree = reactive([
  {
    label: 'Level one 1',
    children: [
      {
        label: 'Level two 1-1',
        children: [
          {
            label: 'Level three 1-1-1',
          },
        ],
      },
    ],
  },
  {
    label: 'Level one 2',
    children: [
      {
        label: 'Level two 2-1',
        children: [
          {
            label: 'Level three 2-1-1',
          },
        ],
      },
      {
        label: 'Level two 2-2',
        children: [
          {
            label: 'Level three 2-2-1',
          },
        ],
      },
    ],
  },
]);

// #endregion

/* --------------- methods --------------- */
const handleNodeClick = (data) => {
  console.log(data);
};
// 编辑
const rowStatus = (row) => {
  console.info('操作状态');
};

const rowDel = (row) => {};

const getStatusButtonText = (status) => {
  switch (status) {
    case 'active':
      return '启用';
    case 'inactive':
      return '禁用';
  }
};

const rowEdit = () => {};

const onAdd = () => {};
const onExport = () => {};

// #region

// #endregion
</script>

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