改造文章管理系统

src/components/SelectNavigsation/components/select-data.vue

@@ -10,21 +10,41 @@
   >
     <ele-pro-table
       ref="tableRef"
-      row-key="id"
-      :datasource="datasource"
+      row-key="navigationId"
       :columns="columns"
+      :datasource="datasource"
+      :parse-data="parseData"
+      :need-page="false"
       :customRow="customRow"
-      :pagination="false"
+      :expand-icon-column-index="1"
+      :expanded-row-keys="expandedRowKeys"
+      cache-key="proNavigationTable"
+      @done="onDone"
+      @expand="onExpand"
     >
       <template #toolbar>
-        <a-input-search
-          allow-clear
-          v-model:value="searchText"
-          placeholder="请输入搜索关键词"
-          style="width: 200px"
-          @search="reload"
-          @pressEnter="reload"
-        />
+        <a-space>
+          <a-button type="dashed" class="ele-btn-icon" @click="expandAll">
+            展开
+          </a-button>
+          <a-button type="dashed" class="ele-btn-icon" @click="foldAll">
+            折叠
+          </a-button>
+          <a-divider type="vertical" />
+          <a-radio-group v-model:value="position" @change="reload">
+            <a-radio-button :value="1">顶部</a-radio-button>
+            <a-radio-button :value="2">底部</a-radio-button>
+          </a-radio-group>
+          <a-divider type="vertical" />
+          <!-- 搜索表单 -->
+          <a-input-search
+            allow-clear
+            v-model:value="searchText"
+            placeholder="请输入搜索关键词"
+            @search="reload"
+            @pressEnter="reload"
+          />
+        </a-space>
       </template>
       <template #bodyCell="{ column, record }">
         <template v-if="column.key === 'action'">
@@ -49,8 +69,9 @@
     ColumnItem,
     DatasourceFunction
   } from 'ele-admin-pro/es/ele-pro-table/types';
-  import { pageNavigation } from '@/api/cms/navigation';
+  import { listNavigation, pageNavigation } from '@/api/cms/navigation';
   import { EleProTable } from 'ele-admin-pro';
+  import { toTreeData } from 'ele-admin-pro/es';
   import type { Navigation, NavigationParam } from '@/api/cms/navigation/model';
 
   const props = defineProps<{
@@ -73,9 +94,12 @@
   };
 
   // 搜索内容
-  const searchText = ref(null);
   const pageId = ref<number>(0);
   const checked = ref<boolean>(true);
+  // 表格展开的行
+  const expandedRowKeys = ref<number[]>([]);
+  const searchText = ref('');
+  const position = ref(1);
 
   // 表格实例
   const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
@@ -83,37 +107,62 @@
   // 表格配置
   const columns = ref<ColumnItem[]>([
     {
-      title: '页面名称',
+      title: 'ID',
+      dataIndex: 'navigationId',
+      width: 80
+    },
+    {
+      title: '栏目名称',
       dataIndex: 'title',
       key: 'title'
-    },
-    {
-      title: '路径',
-      dataIndex: 'path',
-      key: 'path'
-    },
-    {
-      title: '操作',
-      key: 'action',
-      align: 'center'
     }
   ]);
 
   // 表格数据源
-  const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
+  const datasource: DatasourceFunction = ({ where }) => {
     where = {};
-    // 搜索条件
-    if (searchText.value) {
-      where.keywords = searchText.value;
+    where.title = searchText.value;
+    // where.position = position.value;
+    where.top = 0;
+    where.bottom = undefined;
+    if (position.value == 1) {
+      where.top = 0;
+      where.bottom = undefined;
     }
-    return pageNavigation({
-      ...where,
-      ...orders,
-      page,
-      limit
+    if (position.value == 2) {
+      where.top = undefined;
+      where.bottom = 0;
+    }
+    where.isMpWeixin = false;
+    return listNavigation({ ...where });
+  };
+
+  /* 数据转为树形结构 */
+  const parseData = (data: Navigation[]) => {
+    console.log(data);
+    return toTreeData({
+      data: data.map((d) => {
+        return { ...d, key: d.navigationId, value: d.navigationId };
+      }),
+      idField: 'navigationId',
+      parentIdField: 'parentId'
     });
   };
 
+  /* 点击展开图标时触发 */
+  const onExpand = (expanded: boolean, record: Navigation) => {
+    if (expanded) {
+      expandedRowKeys.value = [
+        ...expandedRowKeys.value,
+        record.navigationId as number
+      ];
+    } else {
+      expandedRowKeys.value = expandedRowKeys.value.filter(
+        (d) => d !== record.navigationId
+      );
+    }
+  };
+
   /* 搜索 */
   const reload = (where?: NavigationParam) => {
     tableRef?.value?.reload({ page: 1, where });

src/components/SelectNavigsation/index.vue

@@ -25,7 +25,7 @@
   import { BulbOutlined } from '@ant-design/icons-vue';
   import { ref } from 'vue';
   import SelectData from './components/select-data.vue';
-  import { Navigation } from '@/api/cms/navigation/model';
+  import type { Navigation } from '@/api/cms/navigation/model';
 
   withDefaults(
     defineProps<{
@@ -33,12 +33,12 @@
       placeholder?: string;
     }>(),
     {
-      placeholder: '请选择数据'
+      placeholder: '请选择'
     }
   );
 
   const emit = defineEmits<{
-    (e: 'done', Navigation): void;
+    (e: 'done', data: Navigation): void;
     (e: 'clear'): void;
   }>();