yg-yygl 0.0.1

package/dist/views/sys/column-manager/RecycleBin.vue

@@ -0,0 +1,532 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { ArrowLeft, Delete } from '@element-plus/icons-vue';
+import { ElMessage, ElMessageBox, ElTree } from 'element-plus';
+
+import {
+  listTree,
+  permanentDeleteColumnManger,
+  batchPermanentDeleteColumnManger,
+} from '../../../api/column-manager';
+
+// 定义事件
+const emit = defineEmits<{
+  back: [];
+}>();
+
+// 常量定义
+const RECYCLE_STATUS = {
+  NORMAL: '0',
+  RECYCLED: '1',
+} as const;
+
+// 树形组件引用
+const treeRef = ref<InstanceType<typeof ElTree>>();
+
+// 树形数据
+const treeData = ref<any[]>([]);
+const loading = ref(false);
+
+// 树形组件配置
+const treeProps = {
+  children: 'children',
+  label: 'columnName',
+  value: 'id',
+};
+
+// 选中的节点
+const selectedNodes = ref<any[]>([]);
+
+// 返回主页面
+const handleBack = () => {
+  emit('back');
+};
+
+// 生成模拟测试数据
+const generateMockData = () => {
+  return [
+    {
+      id: '1',
+      columnName: '新闻中心',
+      parentId: null,
+      createUser: '管理员',
+      createTime: '2024-01-15 10:30:00',
+      deleteTime: '2024-01-20 14:20:00',
+      children: [
+        {
+          id: '2',
+          columnName: '国内新闻',
+          parentId: '1',
+          createUser: '编辑A',
+          createTime: '2024-01-16 09:15:00',
+          deleteTime: '2024-01-20 14:21:00',
+          children: [
+            {
+              id: '3',
+              columnName: '政治新闻',
+              parentId: '2',
+              createUser: '编辑B',
+              createTime: '2024-01-17 11:00:00',
+              deleteTime: '2024-01-20 14:22:00',
+              children: [],
+            },
+            {
+              id: '4',
+              columnName: '经济新闻',
+              parentId: '2',
+              createUser: '编辑C',
+              createTime: '2024-01-17 11:30:00',
+              deleteTime: '2024-01-20 14:23:00',
+              children: [],
+            },
+          ],
+        },
+        {
+          id: '5',
+          columnName: '国际新闻',
+          parentId: '1',
+          createUser: '编辑D',
+          createTime: '2024-01-16 10:00:00',
+          deleteTime: '2024-01-20 14:24:00',
+          children: [],
+        },
+      ],
+    },
+    {
+      id: '6',
+      columnName: '体育频道',
+      parentId: null,
+      createUser: '管理员',
+      createTime: '2024-01-18 08:00:00',
+      deleteTime: '2024-01-21 09:30:00',
+      children: [
+        {
+          id: '7',
+          columnName: '足球',
+          parentId: '6',
+          createUser: '体育编辑',
+          createTime: '2024-01-18 08:30:00',
+          deleteTime: '2024-01-21 09:31:00',
+          children: [],
+        },
+        {
+          id: '8',
+          columnName: '篮球',
+          parentId: '6',
+          createUser: '体育编辑',
+          createTime: '2024-01-18 09:00:00',
+          deleteTime: '2024-01-21 09:32:00',
+          children: [],
+        },
+      ],
+    },
+    {
+      id: '9',
+      columnName: '科技资讯',
+      parentId: null,
+      createUser: '科技编辑',
+      createTime: '2024-01-19 13:45:00',
+      deleteTime: '2024-01-22 16:10:00',
+      children: [
+        {
+          id: '10',
+          columnName: '人工智能',
+          parentId: '9',
+          createUser: '科技编辑',
+          createTime: '2024-01-19 14:00:00',
+          deleteTime: '2024-01-22 16:11:00',
+          children: [
+            {
+              id: '11',
+              columnName: '机器学习',
+              parentId: '10',
+              createUser: 'AI专家',
+              createTime: '2024-01-19 14:30:00',
+              deleteTime: '2024-01-22 16:12:00',
+              children: [],
+            },
+          ],
+        },
+      ],
+    },
+  ];
+};
+
+// 加载回收站树形数据
+const loadRecycleTreeData = async () => {
+  loading.value = true;
+  try {
+    // 暂时使用模拟数据进行演示
+    // const response = await listTree({
+    //   isRecycle: RECYCLE_STATUS.RECYCLED,
+    // });
+
+    // 使用模拟数据
+    const mockData = generateMockData();
+
+    // 构建树形结构（模拟数据已经是树形结构）
+    treeData.value = mockData;
+
+    ElMessage.success('已加载模拟测试数据');
+  } catch (error) {
+    console.error('加载回收站数据失败:', error);
+    ElMessage.error('加载回收站数据失败');
+    treeData.value = [];
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 构建树形结构
+const buildTree = (list: any[]) => {
+  const map = new Map();
+  const roots: any[] = [];
+
+  // 先将所有节点放入map
+  list.forEach((item) => {
+    map.set(item.id, { ...item, children: [] });
+  });
+
+  // 构建树形结构
+  list.forEach((item) => {
+    const node = map.get(item.id);
+    if (item.parentId && map.has(item.parentId)) {
+      const parent = map.get(item.parentId);
+      parent.children.push(node);
+    } else {
+      roots.push(node);
+    }
+  });
+
+  return roots;
+};
+
+// 处理节点选择变化
+const handleCheckChange = () => {
+  selectedNodes.value = treeRef.value?.getCheckedNodes() || [];
+};
+
+// 删除选中栏目（仅删除当前节点）
+const handleDeleteSelected = async () => {
+  if (selectedNodes.value.length === 0) {
+    ElMessage.warning('请先选择要删除的栏目');
+    return;
+  }
+
+  try {
+    const nodeNames = selectedNodes.value
+      .map((node) => node.columnName)
+      .join('、');
+    await ElMessageBox.confirm(
+      '确定要删除这条数据吗？',
+      '提示',
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      },
+    );
+
+    const ids = selectedNodes.value.map((node) => node.id);
+
+    if (ids.length === 1) {
+      await permanentDeleteColumnManger(ids[0]);
+    } else {
+      await batchPermanentDeleteColumnManger(ids);
+    }
+
+    ElMessage.success('删除成功');
+    await loadRecycleTreeData();
+    selectedNodes.value = [];
+  } catch (error) {
+    if (error !== 'cancel') {
+      console.error('删除失败:', error);
+      ElMessage.error('删除失败');
+    }
+  }
+};
+
+// 删除选中栏目及其所有子内容
+const handleDeleteWithChildren = async () => {
+  if (selectedNodes.value.length === 0) {
+    ElMessage.warning('请先选择要删除的栏目');
+    return;
+  }
+
+  try {
+    const nodeNames = selectedNodes.value
+      .map((node) => node.columnName)
+      .join('、');
+    await ElMessageBox.confirm(
+      '确定要删除这条数据吗？',
+      '提示',
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      },
+    );
+
+    // 收集所有需要删除的节点ID（包括子节点）
+    const allIds: string[] = [];
+
+    const collectAllIds = (nodes: any[]) => {
+      nodes.forEach((node) => {
+        allIds.push(node.id);
+        if (node.children && node.children.length > 0) {
+          collectAllIds(node.children);
+        }
+      });
+    };
+
+    collectAllIds(selectedNodes.value);
+
+    await batchPermanentDeleteColumnManger(allIds);
+
+    ElMessage.success('删除成功');
+    await loadRecycleTreeData();
+    selectedNodes.value = [];
+  } catch (error) {
+    if (error !== 'cancel') {
+      console.error('删除失败:', error);
+      ElMessage.error('删除失败');
+    }
+  }
+};
+
+// 组件挂载时加载数据
+onMounted(() => {
+  loadRecycleTreeData();
+});
+</script>
+
+<template>
+  <div class="recycle-bin-container">
+    <!-- 顶部返回按钮 -->
+    <div class="header">
+      <el-button
+        type="primary"
+        :icon="ArrowLeft"
+        @click="handleBack"
+        class="back-button"
+      >
+        返回
+      </el-button>
+      <h2 class="title">回收站</h2>
+    </div>
+
+    <!-- 中间树形结构 -->
+    <div class="tree-container">
+      <el-tree
+        ref="treeRef"
+        :data="treeData"
+        :props="treeProps"
+        show-checkbox
+        node-key="id"
+        :default-expand-all="true"
+        :check-strictly="false"
+        @check-change="handleCheckChange"
+        v-loading="loading"
+        class="recycle-tree"
+      >
+        <template #default="{ node, data }">
+          <span class="tree-node">
+            <span class="node-label">{{ data.columnName }}</span>
+            <span class="node-info">
+              <el-tag size="small" type="info">ID: {{ data.id }}</el-tag>
+              <el-tag size="small" type="warning" v-if="data.deleteTime">
+                删除时间: {{ data.deleteTime }}
+              </el-tag>
+            </span>
+          </span>
+        </template>
+      </el-tree>
+    </div>
+
+    <!-- 底部功能按钮 -->
+    <div class="footer">
+      <el-button
+        type="danger"
+        :icon="Delete"
+        @click="handleDeleteSelected"
+        :disabled="selectedNodes.length === 0"
+        class="action-button"
+      >
+        删除栏目
+      </el-button>
+
+      <el-button
+        type="danger"
+        :icon="Delete"
+        @click="handleDeleteWithChildren"
+        :disabled="selectedNodes.length === 0"
+        class="action-button"
+        plain
+      >
+        删除栏目及其内容
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.recycle-bin-container {
+  display: flex;
+  flex-direction: column;
+  height: 80vh;
+  background-color: #f5f5f5;
+}
+
+/* 顶部返回按钮区域 */
+.header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 5px;
+  padding: 16px 20px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.back-button {
+  margin-right: 16px;
+}
+
+.title {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 600;
+  color: #303133;
+}
+
+/* 中间树形结构区域 */
+.tree-container {
+  flex: 1;
+  padding: 20px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  margin-bottom: 5px;
+  overflow: auto;
+  overflow-y: auto;
+}
+
+.recycle-tree {
+  height: 100%;
+}
+
+.tree-node {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding-right: 20px;
+}
+
+.node-label {
+  font-weight: 500;
+  color: #303133;
+}
+
+.node-info {
+  display: flex;
+  gap: 8px;
+}
+
+.node-info .el-tag {
+  font-size: 12px;
+}
+
+.empty-state {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 200px;
+}
+
+/* 底部功能按钮区域 */
+.footer {
+  display: flex;
+  justify-content: center;
+  gap: 16px;
+  padding: 16px 20px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.action-button {
+  min-width: 160px;
+  height: 40px;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .recycle-bin-container {
+    padding: 10px;
+  }
+
+  .header {
+    padding: 12px 16px;
+  }
+
+  .tree-container {
+    padding: 16px;
+  }
+
+  .footer {
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .action-button {
+    width: 100%;
+  }
+
+  .tree-node {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .node-info {
+    flex-wrap: wrap;
+  }
+}
+
+/* 加载状态样式 */
+.tree-container :deep(.el-loading-mask) {
+  border-radius: 8px;
+}
+
+/* 树形组件样式优化 */
+.recycle-tree :deep(.el-tree-node__content) {
+  height: auto;
+  min-height: 40px;
+  padding: 8px 0;
+}
+
+.recycle-tree :deep(.el-tree-node__expand-icon) {
+  color: #409eff;
+}
+
+.recycle-tree :deep(.el-checkbox) {
+  margin-right: 12px;
+}
+
+/* 按钮悬停效果 */
+.back-button:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(64, 158, 255, 0.3);
+}
+
+.action-button:hover {
+  transform: translateY(-1px);
+}
+
+.action-button:disabled {
+  transform: none;
+}
+</style>

package/dist/views/sys/column-manager/RecycleBin.vue.d.ts

@@ -0,0 +1,6 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    back: () => any;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onBack?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/views/sys/column-manager/column-form.d.vue.ts

@@ -0,0 +1,16 @@
+export type ColumnOptions = {
+    children?: ColumnOptions[];
+    id: string;
+    label: string;
+};
+type __VLS_Props = {
+    addChildFlag?: any;
+    editData?: any;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {
+    handleSubmit: () => Promise<boolean>;
+    handleCancel: () => boolean;
+    resetForm: () => void;
+    initFormData: (data?: any) => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;