改造文章管理系统

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

@@ -0,0 +1,146 @@
+<template>
+  <ele-modal
+    :width="750"
+    :visible="visible"
+    :maskClosable="false"
+    :title="title"
+    :footer="null"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+  >
+    <ele-pro-table
+      ref="tableRef"
+      row-key="dictDataId"
+      :columns="columns"
+      :customRow="customRow"
+      :datasource="datasource"
+      tool-class="ele-toolbar-form"
+      class="sys-org-table"
+    >
+      <template #toolbar>
+        <a-space>
+          <a-input-search
+            allow-clear
+            v-model:value="where.keywords"
+            placeholder="请输入搜索关键词"
+            style="width: 200px"
+            @search="reload"
+            @pressEnter="reload"
+          />
+        </a-space>
+      </template>
+      <template #bodyCell="{ column }">
+        <template v-if="column.key === 'action'">
+          <a-space>
+            <a-button type="link">选择</a-button>
+          </a-space>
+        </template>
+      </template>
+    </ele-pro-table>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import {
+    ColumnItem,
+    DatasourceFunction
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import { EleProTable } from 'ele-admin-pro';
+  import useSearch from '@/utils/use-search';
+  import { pageDictData } from '@/api/system/dict-data';
+  import { DictData, DictDataParam } from '@/api/system/dict-data/model';
+  import { pageDictionaryData } from "@/api/system/dictionary-data";
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    title?: any;
+    // 修改回显的数据
+    data?: DictData | null;
+    dictCode?: string;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done', data: DictData): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单数据
+  const { where } = useSearch<DictDataParam>({
+    dictCode: undefined,
+    keywords: ''
+  });
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: 'ID',
+      dataIndex: 'dictDataId',
+      key: 'dictDataId'
+    },
+    {
+      title: '名称',
+      dataIndex: 'dictDataName',
+      key: 'dictDataName'
+    },
+    {
+      title: '描述',
+      dataIndex: 'comments',
+      key: 'comments'
+    },
+    {
+      title: '操作',
+      key: 'action',
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
+    where.dictCode = props.dictCode;
+    return pageDictionaryData({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  /* 搜索 */
+  const reload = () => {
+    // selection.value = [];
+    tableRef?.value?.reload({ page: 1, where });
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: DictData) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        updateVisible(false);
+        emit('done', record);
+      }
+    };
+  };
+</script>
+<style lang="less">
+  .app-box {
+    display: flex;
+    .app-info {
+      display: flex;
+      margin-left: 15px;
+      margin-right: 15px;
+      flex-direction: column;
+    }
+  }
+</style>

src/components/SelectDictDictionary/index.vue

@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <a-input-group compact>
+      <a-input
+        disabled
+        style="width: calc(100% - 32px)"
+        v-model:value="value"
+        :placeholder="placeholder"
+      />
+      <a-button @click="openEdit">
+        <template #icon><BulbOutlined class="ele-text-warning" /></template>
+      </a-button>
+    </a-input-group>
+    <!-- 选择弹窗 -->
+    <select-data
+      v-model:visible="showEdit"
+      :data="current"
+      :dictCode="dictCode"
+      :title="placeholder"
+      @done="onChange"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { BulbOutlined } from '@ant-design/icons-vue';
+  import { ref } from 'vue';
+  import SelectData from './components/select-data.vue';
+  import { Dict } from '@/api/system/dict/model';
+
+  const props = withDefaults(
+    defineProps<{
+      value?: any;
+      placeholder?: string;
+      index?: number;
+      dictCode?: string;
+    }>(),
+    {
+      placeholder: '请选择字典'
+    }
+  );
+
+  const emit = defineEmits<{
+    (e: 'done', Dict): void;
+    (e: 'clear'): void;
+  }>();
+
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 当前编辑数据
+  const current = ref<Dict | null>(null);
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: Dict) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  const onChange = (row) => {
+    row.index = Number(props.index);
+    emit('done', row);
+  };
+  // 查询租户列表
+  // const appList = ref<App[] | undefined>([]);
+</script>

src/components/SelectFile/index.vue

@@ -10,9 +10,11 @@
         </div>
         <div class="image-upload-item" v-else>
           <a-image
-            :width="width"
-            :height="width"
-            style="border: 1px dashed var(--grey-7)"
+            :style="{
+              border: '1px dashed var(--grey-7)',
+              width: width + 'px',
+              height: height + 'px'
+            }"
             :src="item.url"
           />
           <a class="image-upload-close" @click="onDeleteItem(index)">
@@ -23,6 +25,7 @@
       <a-button
         @click="openEdit"
         v-if="data?.length < limit"
+        :style="{ width: width + 'px', height: height + 'px' }"
         class="select-picture-btn ele-text-placeholder"
       >
         <PlusOutlined />
@@ -51,6 +54,7 @@
       value?: any;
       data?: any[];
       width?: number;
+      height?: number;
       type?: string;
       limit?: number;
       placeholder?: string;
@@ -59,6 +63,7 @@
     {
       placeholder: '请选择数据',
       width: 80,
+      height: 80,
       limit: 1
     }
   );
@@ -93,8 +98,6 @@
   .select-picture-btn {
     background-color: var(--grey-9);
     border: 1px dashed var(--border-color-base);
-    width: 80px;
-    height: 80px;
     font-size: 16px;
   }
   //.ant-image-img {

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;
   }>();