From d1d87eb5b7f061f922e86918c89d8994e33e6216 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com>
Date: Wed, 13 Aug 2025 05:17:18 +0800
Subject: [PATCH] =?UTF-8?q?feat(shopArticle):=20=E5=88=9D=E5=A7=8B?=
 =?UTF-8?q?=E5=8C=96=E6=96=87=E7=AB=A0=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 定义完整的列配置，包含所有字段
- 设置默认显示的核心列
- 实现表格列过滤逻辑
- 添加搜索、编辑、移动、删除等功能- 优化表格样式和交互
---
 src/views/shop/shopArticle/index.vue | 432 ++++++++++++++++++++++++++-
 1 file changed, 427 insertions(+), 5 deletions(-)

diff --git a/src/views/shop/shopArticle/index.vue b/src/views/shop/shopArticle/index.vue
index a7a9ad9..2c613b1 100644
--- a/src/views/shop/shopArticle/index.vue
+++ b/src/views/shop/shopArticle/index.vue
@@ -49,7 +49,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { createVNode, ref } from 'vue';
+  import { createVNode, ref, computed } from 'vue';
   import { message, Modal } from 'ant-design-vue';
   import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
   import type { EleProTable } from 'ele-admin-pro';
@@ -97,17 +97,439 @@
     });
   };
 
-  // 表格列配置 - 使用 hideInTable 控制默认显示
-  const columns = ref<ColumnItem[]>([
+  // 完整的列配置（包含所有字段）
+  const allColumns = ref<ColumnItem[]>([
     {
-      title: '文章ID',
+      title: 'ID',
       dataIndex: 'articleId',
       key: 'articleId',
-      align: 'center',
       width: 90,
     },
     {
       title: '文章标题',
       dataIndex: 'title',
       key: 'title',
+      ellipsis: true
+    },
+    {
+      title: '文章类型 0常规 1视频',
+      dataIndex: 'type',
+      key: 'type',
+      width: 120
+    },
+    {
+      title: '模型',
+      dataIndex: 'model',
+      key: 'model',
+      ellipsis: true
+    },
+    {
+      title: '详情页模板',
+      dataIndex: 'detail',
+      key: 'detail',
+      ellipsis: true
+    },
+    {
+      title: '文章分类ID',
+      dataIndex: 'categoryId',
+      key: 'categoryId',
+      width: 120
+    },
+    {
+      title: '上级id, 0是顶级',
+      dataIndex: 'parentId',
+      key: 'parentId',
+      width: 120
+    },
+    {
+      title: '话题',
+      dataIndex: 'topic',
+      key: 'topic',
+      ellipsis: true
+    },
+    {
+      title: '标签',
+      dataIndex: 'tags',
+      key: 'tags',
+      ellipsis: true
+    },
+    {
+      title: '封面图',
+      dataIndex: 'image',
+      key: 'image',
+      ellipsis: true
+    },
+    {
+      title: '封面图宽',
+      dataIndex: 'imageWidth',
+      key: 'imageWidth',
+      width: 120
+    },
+    {
+      title: '封面图高',
+      dataIndex: 'imageHeight',
+      key: 'imageHeight',
+      width: 120
+    },
+    {
+      title: '付费金额',
+      dataIndex: 'price',
+      key: 'price',
+      width: 120
+    },
+    {
+      title: '开始时间',
+      dataIndex: 'startTime',
+      key: 'startTime',
+      width: 120
+    },
+    {
+      title: '结束时间',
+      dataIndex: 'endTime',
+      key: 'endTime',
+      width: 120
+    },
+    {
+      title: '来源',
+      dataIndex: 'source',
+      key: 'source',
+      ellipsis: true
+    },
+    {
+      title: '产品概述',
+      dataIndex: 'overview',
+      key: 'overview',
+      ellipsis: true
+    },
+    {
+      title: '虚拟阅读量(仅用作展示)',
+      dataIndex: 'virtualViews',
+      key: 'virtualViews',
+      width: 120
+    },
+    {
+      title: '实际阅读量',
+      dataIndex: 'actualViews',
+      key: 'actualViews',
+      width: 120
+    },
+    {
+      title: '评分',
+      dataIndex: 'rate',
+      key: 'rate',
+      width: 120
+    },
+    {
+      title: '列表显示方式(10小图展示 20大图展示)',
+      dataIndex: 'showType',
+      key: 'showType',
+      width: 120
+    },
+    {
+      title: '访问密码',
+      dataIndex: 'password',
+      key: 'password',
+      ellipsis: true
+    },
+    {
+      title: '可见类型 0所有人 1登录可见 2密码可见',
+      dataIndex: 'permission',
+      key: 'permission',
+      width: 120
+    },
+    {
+      title: '发布来源客户端 (APP、H5、小程序等)',
+      dataIndex: 'platform',
+      key: 'platform',
+      ellipsis: true
+    },
+    {
+      title: '文章附件',
+      dataIndex: 'files',
+      key: 'files',
+      ellipsis: true
+    },
+    {
+      title: '视频地址',
+      dataIndex: 'video',
+      key: 'video',
+      ellipsis: true
+    },
+    {
+      title: '接受的文件类型',
+      dataIndex: 'accept',
+      key: 'accept',
+      ellipsis: true
+    },
+    {
+      title: '经度',
+      dataIndex: 'longitude',
+      key: 'longitude',
+      ellipsis: true
+    },
+    {
+      title: '纬度',
+      dataIndex: 'latitude',
+      key: 'latitude',
+      ellipsis: true
+    },
+    {
+      title: '所在省份',
+      dataIndex: 'province',
+      key: 'province',
+      ellipsis: true
+    },
+    {
+      title: '所在城市',
+      dataIndex: 'city',
+      key: 'city',
+      ellipsis: true
+    },
+    {
+      title: '所在辖区',
+      dataIndex: 'region',
+      key: 'region',
+      ellipsis: true
+    },
+    {
+      title: '街道地址',
+      dataIndex: 'address',
+      key: 'address',
+      ellipsis: true
+    },
+    {
+      title: '点赞数',
+      dataIndex: 'likes',
+      key: 'likes',
+      width: 120
+    },
+    {
+      title: '评论数',
+      dataIndex: 'commentNumbers',
+      key: 'commentNumbers',
+      width: 120
+    },
+    {
+      title: '提醒谁看',
+      dataIndex: 'toUsers',
+      key: 'toUsers',
+      ellipsis: true
+    },
+    {
+      title: '作者',
+      dataIndex: 'author',
+      key: 'author',
+      ellipsis: true
+    },
+    {
+      title: '推荐',
+      dataIndex: 'recommend',
+      key: 'recommend',
+      width: 120
+    },
+    {
+      title: '报名人数',
+      dataIndex: 'bmUsers',
+      key: 'bmUsers',
+      width: 120
+    },
+    {
+      title: '用户ID',
+      dataIndex: 'userId',
+      key: 'userId',
+      width: 120
+    },
+    {
+      title: '项目ID',
+      dataIndex: 'projectId',
+      key: 'projectId',
+      width: 120
+    },
+    {
+      title: '语言',
+      dataIndex: 'lang',
+      key: 'lang',
+      ellipsis: true
+    },
+    {
+      title: '关联默认语言的文章ID',
+      dataIndex: 'langArticleId',
+      key: 'langArticleId',
+      width: 120
+    },
+    {
+      title: '是否自动翻译',
+      dataIndex: 'translation',
+      key: 'translation',
+      width: 120
+    },
+    {
+      title: '编辑器类型 0 Markdown编辑器 1 富文本编辑器 ',
+      dataIndex: 'editor',
+      key: 'editor',
+      width: 120
+    },
+    {
+      title: 'pdf文件地址',
+      dataIndex: 'pdfUrl',
+      key: 'pdfUrl',
+      ellipsis: true
+    },
+    {
+      title: '版本号',
+      dataIndex: 'version',
+      key: 'version',
+      width: 120
+    },
+    {
+      title: '排序(数字越小越靠前)',
+      dataIndex: 'sortNumber',
+      key: 'sortNumber',
+      width: 120
+    },
+    {
+      title: '备注',
+      dataIndex: 'comments',
+      key: 'comments',
+      ellipsis: true
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
       align: 'center',
+      width: 120
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createTime',
+      key: 'createTime',
+      width: 200,
+      align: 'center',
+      sorter: true,
+      ellipsis: true,
+      customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd HH:mm:ss')
+    },
+    {
+      title: '修改时间',
+      dataIndex: 'updateTime',
+      key: 'updateTime',
+      width: 200,
+      align: 'center',
+      sorter: true,
+      ellipsis: true,
+      customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd HH:mm:ss')
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 180,
+      fixed: 'right',
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  // 默认显示的核心列（最多5个主要字段）
+  const defaultVisibleColumns = [
+    'articleId',
+    'title',
+    'status',
+    'createTime',
+    'action'
+  ];
+
+  // 根据默认可见列过滤显示的列
+  const columns = computed(() => {
+    return allColumns.value.filter(col =>
+      defaultVisibleColumns.includes(col.dataIndex) || col.key === 'action'
+    );
+  });
+
+  /* 搜索 */
+  const reload = (where?: ShopArticleParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: ShopArticle) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 打开批量移动弹窗 */
+  const openMove = () => {
+    showMove.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: ShopArticle) => {
+    const hide = message.loading('请求中..', 0);
+    removeShopArticle(row.shopArticleId)
+      .then((msg) => {
+        hide();
+        message.success(msg);
+        reload();
+      })
+      .catch((e) => {
+        hide();
+        message.error(e.message);
+      });
+  };
+
+  /* 批量删除 */
+  const removeBatch = () => {
+    if (!selection.value.length) {
+      message.error('请至少选择一条数据');
+      return;
+    }
+    Modal.confirm({
+      title: '提示',
+      content: '确定要删除选中的记录吗?',
+      icon: createVNode(ExclamationCircleOutlined),
+      maskClosable: true,
+      onOk: () => {
+        const hide = message.loading('请求中..', 0);
+        removeBatchShopArticle(selection.value.map((d) => d.shopArticleId))
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  /* 查询 */
+  const query = () => {
+    loading.value = true;
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: ShopArticle) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+  query();
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'ShopArticle'
+  };
+</script>
+
+<style lang="less" scoped></style>