分类设置提交

src/api/enterprisePurchase/categoryMain/index.ts

@@ -0,0 +1,63 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+import { CategoryMainVO, CategoryMainForm, CategoryMainQuery } from '@/api/enterprisePurchase/categoryMain/types';
+
+/**
+ * 查询分类设置主列表
+ * @param query
+ * @returns {*}
+ */
+
+export const listCategoryMain = (query?: CategoryMainQuery): AxiosPromise<CategoryMainVO[]> => {
+  return request({
+    url: '/mall/categoryMain/list',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 查询分类设置主详细
+ * @param id
+ */
+export const getCategoryMain = (id: string | number): AxiosPromise<CategoryMainVO> => {
+  return request({
+    url: '/mall/categoryMain/' + id,
+    method: 'get'
+  });
+};
+
+/**
+ * 新增分类设置主
+ * @param data
+ */
+export const addCategoryMain = (data: CategoryMainForm) => {
+  return request({
+    url: '/mall/categoryMain',
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 修改分类设置主
+ * @param data
+ */
+export const updateCategoryMain = (data: CategoryMainForm) => {
+  return request({
+    url: '/mall/categoryMain',
+    method: 'put',
+    data: data
+  });
+};
+
+/**
+ * 删除分类设置主
+ * @param id
+ */
+export const delCategoryMain = (id: string | number | Array<string | number>) => {
+  return request({
+    url: '/mall/categoryMain/' + id,
+    method: 'delete'
+  });
+};

src/api/enterprisePurchase/categoryMain/types.ts

@@ -0,0 +1,140 @@
+export interface CategoryMainVO {
+  /**
+   * 主键ID
+   */
+  id: string | number;
+
+  /**
+   * 菜单名称
+   */
+  name: string;
+
+  /**
+   * 图标URL
+   */
+  icon: string;
+
+  /**
+   * 同步分类id
+   */
+  syncCategoryId: string | number;
+
+  /**
+   * 同步分类
+   */
+  syncCategory: string;
+
+  /**
+   * 启用状态: 1-启用, 0-禁用
+   */
+  status: number;
+
+  /**
+   * 面板主标题
+   */
+  panelMainTitle: string;
+
+  /**
+   * 面板副标题
+   */
+  panelSubTitle: string;
+
+  /**
+   * 备注
+   */
+  remark: string;
+}
+
+export interface CategoryMainForm extends BaseEntity {
+  /**
+   * 主键ID
+   */
+  id?: string | number;
+
+  /**
+   * 菜单名称
+   */
+  name?: string;
+
+  /**
+   * 图标URL
+   */
+  icon?: string;
+
+  /**
+   * 同步分类id
+   */
+  syncCategoryId?: string | number;
+
+  /**
+   * 同步分类
+   */
+  syncCategory?: string;
+
+  /**
+   * 启用状态: 1-启用, 0-禁用
+   */
+  status?: number;
+
+  /**
+   * 面板主标题
+   */
+  panelMainTitle?: string;
+
+  /**
+   * 面板副标题
+   */
+  panelSubTitle?: string;
+
+  /**
+   * 备注
+   */
+  remark?: string;
+}
+
+export interface CategoryMainQuery extends PageQuery {
+  /**
+   * 菜单名称
+   */
+  name?: string;
+
+  /**
+   * 图标URL
+   */
+  icon?: string;
+
+  /**
+   * 同步分类id
+   */
+  syncCategoryId?: string | number;
+
+  /**
+   * 同步分类
+   */
+  syncCategory?: string;
+
+  /**
+   * 启用状态: 1-启用, 0-禁用
+   */
+  status?: number;
+
+  /**
+   * 面板主标题
+   */
+  panelMainTitle?: string;
+
+  /**
+   * 面板副标题
+   */
+  panelSubTitle?: string;
+
+  /**
+   * 平台标识
+   */
+  platformCode?: string;
+
+  /**
+   * 日期范围参数
+   */
+  params?: any;
+}

src/views/enterprisePurchase/index.vue

@@ -1468,6 +1468,9 @@ import { listAdLeft, getAdLeft, delAdLeft, addAdLeft, updateAdLeft, getCurrentAd
 import { AdLeftVO, AdLeftQuery, AdLeftForm } from '@/api/enterprisePurchase/adLeft/types';
 import { listCarousel, getCarousel, delCarousel, addCarousel, updateCarousel } from '@/api/enterprisePurchase/carousel';
 import { CarouselVO, CarouselQuery, CarouselForm } from '@/api/enterprisePurchase/carousel/types';
+import { listCategoryMain, getCategoryMain, delCategoryMain, addCategoryMain, updateCategoryMain } from '@/api/enterprisePurchase/categoryMain';
+import { CategoryMainVO, CategoryMainQuery, CategoryMainForm } from '@/api/enterprisePurchase/categoryMain/types';
+
 import {
   listHeaderCategory,
   getHeaderCategory,
@@ -1530,6 +1533,7 @@ const leftAdId = ref<string | number>('');
 // 保存配置
 const handleMainSave = async () => {
   try {
+    let res;
     if (activeSubTab.value == 'search') {
       // 构建提交数据，过滤空的热词
       const submitData = {
@@ -1938,196 +1942,40 @@ const handleDeleteLeftAd = () => {
 const categoryThemeColor = ref('#e60012');
 const syncCategoryOptions = ['办公电脑', '办公设备', '办公家电', '文具耗材', '日用百货', '工业品', '食品饮料', '车载用品', '运动户外'];
 
-const categoryList = ref([
-  {
-    id: 1,
-    name: '办公电脑 / 办公打印 / 电脑组件',
-    icon: 'https://img.alicdn.com/imgextra/i2/O1CN01Z7Z7Z71C0oY7Z7Z7Z_!!6000000001234-0-tps-16-16.png',
-    syncCategory: '办公电脑',
-    tags: [
-      { name: '设备固资', link: '' },
-      { name: '职场环境', link: '' },
-      { name: '3C数码电子城', link: '' }
-    ],
-    status: 1,
-    panelData: {
-      mainTitle: '京东',
-      subTitle: '3C数码',
-      notes: [
-        { name: '电脑', link: '' },
-        { name: '数码', link: '' },
-        { name: '手机', link: '' },
-        { name: '图书', link: '' },
-        { name: '文具', link: '' }
-      ],
-      groups: [
-        {
-          title: '办公电脑',
-          items: [
-            '台式机',
-            '平板电脑',
-            '显示器',
-            '服务器',
-            '工作站',
-            '一体机',
-            '组装电脑',
-            '游戏本',
-            '设计师本',
-            '笔记本配件',
-            '平板电脑配件',
-            '阅卷机',
-            '办公本',
-            '图形工作站',
-            '迷你PC',
-            '商用PAD'
-          ]
-        },
-        {
-          title: '办公打印',
-          items: [
-            '复合机',
-            '打印机',
-            '多功能一体机',
-            '扫描仪',
-            '条码打印机',
-            '碎纸机',
-            '装订机',
-            '高拍仪',
-            '标签打印机',
-            '传真设备',
-            '针式打印机',
-            '热敏打印机',
-            '3D打印机',
-            '大幅面打印'
-          ]
-        },
-        {
-          title: '电脑组件',
-          items: [
-            '显示器',
-            '硬盘',
-            'SSD固态硬盘',
-            '机械硬盘',
-            '显卡',
-            '内存',
-            '主板CPU套装',
-            '组装机',
-            '装机配件',
-            '机箱',
-            '刻录机',
-            '光驱',
-            '散热器',
-            '电源',
-            '声卡',
-            '网卡',
-            '鼠标键盘'
-          ]
-        }
-      ]
-    }
-  },
-  {
-    id: 2,
-    name: '室温调节 / 冷藏保鲜 / 办公家具',
-    icon: 'https://img.alicdn.com/imgextra/i2/O1CN01Z7Z7Z71C0oY7Z7Z7Z_!!6000000001234-0-tps-16-16.png',
-    syncCategory: '办公设备',
-    tags: [{ name: '环境舒适', link: '' }],
-    status: 1,
-    panelData: {
-      mainTitle: '苏宁',
-      subTitle: '家电直供',
-      notes: [
-        { name: '空调', link: '' },
-        { name: '电风扇', link: '' }
-      ],
-      groups: [
-        {
-          title: '室温调节',
-          items: ['空调', '中央空调', '暖风机', '加湿器', '除湿机', '空气净化器', '电暖气', '电风扇', '空调扇', '换气扇', '净水器']
-        },
-        { title: '冷藏保鲜', items: ['冰箱', '冷柜', '车载冰箱', '制冰机', '红酒柜', '保鲜柜', '展示柜'] },
-        {
-          title: '办公家具',
-          items: ['办公桌', '办公椅', '文件柜', '沙发', '茶几', '书柜', '前台', '会议桌', '屏风位', '大班台', '保险柜', '储物架', '更衣柜']
+const categoryList = ref<CategoryMainVO[]>([]);
+
+// 获取分类列表
+const getCategoryList = async () => {
+  try {
+    const res = await listCategoryMain();
+    if (res.code === 200 && res.rows) {
+      categoryList.value = res.rows.map((item: CategoryMainVO) => {
+        let extra = { tags: [] as any[], notes: [] as any[], groups: [] as any[] };
+        try {
+          if ((item as any).remark) {
+            extra = JSON.parse((item as any).remark);
+          }
+        } catch (e) {
+          /* remark JSON 解析失败使用默认值 */
         }
-      ]
-    }
-  },
-  {
-    id: 3,
-    name: '打印耗材 / 办公文具 / 清洁用品',
-    icon: '',
-    syncCategory: '文具耗材',
-    tags: [],
-    status: 1,
-    panelData: {
-      mainTitle: '得力',
-      subTitle: '办公专家',
-      notes: [
-        { name: '笔', link: '' },
-        { name: '纸', link: '' }
-      ],
-      groups: [
-        { title: '打印耗材', items: ['墨盒', '硒鼓', '色带', '打印纸', '照片纸'] },
-        { title: '办公文具', items: ['签字笔', '笔记本', '文件夹', '计算器', '裁纸刀'] }
-      ]
+
+        return {
+          ...item,
+          tags: extra.tags || [],
+          panelData: {
+            mainTitle: (item as any).panelMainTitle || '',
+            subTitle: (item as any).panelSubTitle || '',
+            notes: extra.notes || [],
+            groups: extra.groups || []
+          }
+        };
+      });
     }
-  },
-  {
-    id: 4,
-    name: '茶歇福利 / 个护清洁 / 日用福利',
-    icon: '',
-    syncCategory: '日用百货',
-    tags: [],
-    status: 1,
-    panelData: { mainTitle: '', subTitle: '', notes: [], groups: [] }
-  },
-  {
-    id: 5,
-    name: '电子数码 / 茗茶酒水 / 美妆护肤',
-    icon: '',
-    syncCategory: '日用百货',
-    tags: [],
-    status: 1,
-    panelData: { mainTitle: '', subTitle: '', notes: [], groups: [] }
-  },
-  {
-    id: 6,
-    name: '个人防护 / 清洁用品 / 电动工具',
-    icon: '',
-    syncCategory: '工业品',
-    tags: [],
-    status: 1,
-    panelData: { mainTitle: '', subTitle: '', notes: [], groups: [] }
-  },
-  {
-    id: 7,
-    name: '养生茶饮 / 滋补礼盒 / 营养保健',
-    icon: '',
-    syncCategory: '食品饮料',
-    tags: [],
-    status: 1,
-    panelData: { mainTitle: '', subTitle: '', notes: [], groups: [] }
-  },
-  {
-    id: 8,
-    name: '汽车用品 / 车辆养护 / 整车采购',
-    icon: '',
-    syncCategory: '车载用品',
-    tags: [],
-    status: 1,
-    panelData: { mainTitle: '', subTitle: '', notes: [], groups: [] }
-  },
-  {
-    id: 9,
-    name: '户外装备 / 体育用品 / 工装工服',
-    icon: '',
-    syncCategory: '运动户外',
-    tags: [],
-    status: 1,
-    panelData: { mainTitle: '', subTitle: '', notes: [], groups: [] }
+  } catch (error) {
+    console.error('获取分类列表失败:', error);
+    ElMessage.error('获取分类列表失败');
   }
-]);
+};
 
 const addCategoryTag = () => {
   categoryForm.tags.push({ name: '', link: '' });
@@ -2174,23 +2022,48 @@ const handleEditCategory = (row) => {
   categoryDialogVisible.value = true;
 };
 
-const submitCategoryForm = () => {
+const submitCategoryForm = async () => {
   if (!categoryForm.name) return ElMessage.warning('请输入菜单名称');
 
-  const data = JSON.parse(JSON.stringify(categoryForm));
+  const data: CategoryMainForm = {
+    name: categoryForm.name,
+    icon: categoryForm.icon,
+    syncCategory: categoryForm.syncCategory,
+    status: categoryForm.status,
+    panelMainTitle: categoryForm.panelData.mainTitle,
+    panelSubTitle: categoryForm.panelData.subTitle,
+    remark: JSON.stringify({
+      tags: categoryForm.tags,
+      notes: categoryForm.panelData.notes,
+      groups: categoryForm.panelData.groups
+    })
+  };
 
-  if (categoryDialogType.value === 'add') {
-    data.id = Date.now();
-    categoryList.value.push(data);
-    ElMessage.success('新增成功');
-  } else {
-    const index = categoryList.value.findIndex((item) => item.id === data.id);
-    if (index !== -1) {
-      categoryList.value[index] = data;
-      ElMessage.success('修改成功');
+  try {
+    if (categoryDialogType.value === 'add') {
+      const res = await addCategoryMain(data);
+      if (res.code === 200) {
+        ElMessage.success('新增成功');
+        categoryDialogVisible.value = false;
+        getCategoryList();
+      } else {
+        ElMessage.error(res.msg || '新增失败');
+      }
+    } else {
+      const id = categoryForm.id;
+      const res = await updateCategoryMain({ ...data, id });
+      if (res.code === 200) {
+        ElMessage.success('修改成功');
+        categoryDialogVisible.value = false;
+        getCategoryList();
+      } else {
+        ElMessage.error(res.msg || '修改失败');
+      }
     }
+  } catch (error) {
+    console.error('操作失败:', error);
+    ElMessage.error('操作失败');
   }
-  categoryDialogVisible.value = false;
 };
 
 // 场景方案模块逻辑
@@ -2281,11 +2154,23 @@ const moveScenario = (index, direction) => {
   scenarioList.value.splice(newIndex, 0, item);
 };
 
-const handleRemoveCategory = (index) => {
-  ElMessageBox.confirm('确定要删除该分类吗？', '提示').then(() => {
-    categoryList.value.splice(index, 1);
-    ElMessage.success('删除成功');
-  });
+const handleRemoveCategory = async (index: number) => {
+  const item = categoryList.value[index];
+  try {
+    await ElMessageBox.confirm('确定要删除该分类吗？', '提示');
+    const res = await delCategoryMain(item.id);
+    if (res.code === 200) {
+      ElMessage.success('删除成功');
+      getCategoryList();
+    } else {
+      ElMessage.error(res.msg || '删除失败');
+    }
+  } catch (error) {
+    if (error !== 'cancel') {
+      console.error('删除失败:', error);
+      ElMessage.error('删除失败');
+    }
+  }
 };
 
 const addPanelNote = () => {
@@ -2975,6 +2860,7 @@ onMounted(() => {
   getCurrentAdLeftBtn();
   getCarouselList();
   getHeaderCategoryList();
+  getCategoryList();
   // 获取左侧广告配置
   nextTick(() => {
     updateNavArrows();