feat: 🚀 nav迭代(产品推荐和商场入口)

src/api/modules/commodity.ts

@@ -0,0 +1,34 @@
+import http from "@/api";
+const MALL = `mall/store`;
+// 列表
+export const getMallListApi = (params: any) => {
+    return http.get<any>(`${MALL}/index`, params);
+};
+// 详情
+export const getMallDetailsApi = (params: any) => {
+    return http.get<any>(`${MALL}/read/${params}`);
+};
+// 删除
+export const getMallDelApi = (params: any) => {
+    return http.delete<any>(`${MALL}/delete/${params}`);
+};
+//新增
+
+export const getMallSaveApi = (params: any) => {
+    return http.post<any>(`${MALL}/save`, params, {
+        headers: {
+            "Content-Type": "application/x-www-form-urlencoded"
+        }
+    });
+};
+//更新
+export const getMallUpApi = (params: any) => {
+    return http.put<any>(`${MALL}/update/${params.id}`, params);
+};
+
+// 导出
+export const getMallUpExportApi = (params: any) => {
+    return http.get<any>(`${MALL}/export`, params, {
+        responseType: "arraybuffer"
+    });
+};

src/api/modules/productRecommendation.ts

@@ -0,0 +1,34 @@
+import http from "@/api";
+const PRODUCT = `product/category/recommend`;
+// 列表
+export const getRecommendationApi = (params: any) => {
+    return http.get<any>(`${PRODUCT}/index`, params);
+};
+// 详情
+export const getRecommendationDetailsApi = (params: any) => {
+    return http.get<any>(`${PRODUCT}/read/${params}`);
+};
+// 删除
+export const getRecommendationDelApi = (params: any) => {
+    return http.delete<any>(`${PRODUCT}/delete/${params}`);
+};
+//新增
+
+export const getRecommendationSaveApi = (params: any) => {
+    return http.post<any>(`${PRODUCT}/save`, params, {
+        headers: {
+            "Content-Type": "application/x-www-form-urlencoded"
+        }
+    });
+};
+//更新
+export const getRecommendationUpApi = (params: any) => {
+    return http.put<any>(`${PRODUCT}/update/${params.id}`, params);
+};
+
+// 导出
+export const getRecommendationUpExportApi = (params: any) => {
+    return http.get<any>(`${PRODUCT}/export`, params, {
+        responseType: "arraybuffer"
+    });
+};

src/components.d.ts

@@ -12,11 +12,8 @@ declare module "vue" {
         ElBreadcrumb: typeof import("element-plus/es")["ElBreadcrumb"];
         ElBreadcrumbItem: typeof import("element-plus/es")["ElBreadcrumbItem"];
         ElButton: typeof import("element-plus/es")["ElButton"];
-        ElCarousel: typeof import("element-plus/es")["ElCarousel"];
-        ElCarouselItem: typeof import("element-plus/es")["ElCarouselItem"];
         ElCheckbox: typeof import("element-plus/es")["ElCheckbox"];
         ElCheckboxGroup: typeof import("element-plus/es")["ElCheckboxGroup"];
-        ElColorPicker: typeof import("element-plus/es")["ElColorPicker"];
         ElContainer: typeof import("element-plus/es")["ElContainer"];
         ElDatePicker: typeof import("element-plus/es")["ElDatePicker"];
         ElDialog: typeof import("element-plus/es")["ElDialog"];
@@ -38,7 +35,6 @@ declare module "vue" {
         ElOption: typeof import("element-plus/es")["ElOption"];
         ElPagination: typeof import("element-plus/es")["ElPagination"];
         ElRadio: typeof import("element-plus/es")["ElRadio"];
-        ElRadioButton: typeof import("element-plus/es")["ElRadioButton"];
         ElRadioGroup: typeof import("element-plus/es")["ElRadioGroup"];
         ElScrollbar: typeof import("element-plus/es")["ElScrollbar"];
         ElSelect: typeof import("element-plus/es")["ElSelect"];

src/components/SearchForm/components/SearchFormItem.vue

@@ -52,13 +52,13 @@
                 class="m-2 select"
                 remote-show-suffix
                 :remote-method="
-                              (query:any) => {
+                          (query:any) => {
-                                remoteMethod(
+                            remoteMethod(
-                                  query,
+                              query,
-                                  item
+                              item
-                                );
+                            );
-                              }
+                          }
-                            "
+                        "
                 :disabled="item.disabled"
                 style="width: 224px"
             >
@@ -77,9 +77,9 @@
                 :check-strictly="false"
                 show-checkbox
                 style="width: 224px"
-                clearable
+                ref="treeSelectRef"
-                :collapse-tags="true"
                 @change="handleTreeSelectChange(item)"
+                @remove-tag="handleRemoveTag(item, $event)"
             />
         </template>
         <!-- 双 -->
@@ -116,7 +116,7 @@
             />
         </template>
 
-        <template v-if="item.type === 'selectInputs'">
+        <!-- <template v-if="item.type === 'selectInputs'">
             <div></div>
             <el-select
                 v-model="selectInputValue"
@@ -151,19 +151,19 @@
                 style="width: 106px !important"
                 @input="handleInput(item)"
             />
-        </template>
+        </template> -->
     </div>
 </template>
 
 <script lang="ts" setup name="SearchFormItem">
 // import { verificationInput } from "./utils/verificationInput";
 import { getCountryListApi } from "@/api/modules/global";
-import $Bus from "@/utils/mittBus";
 import { cloneDeep } from "lodash-es";
-import { ref } from "vue";
+// import { ref } from "vue";
 const $router = useRouter();
 
 const routeName: any = ref($router.currentRoute.value.name);
+const treeSelectRef = ref<any>(null);
 // const userStore: any = useUserStore();
 interface SearchFormItem {
     item: { [key: string]: any };
@@ -171,17 +171,8 @@ interface SearchFormItem {
     search: (params: any) => void; // 搜索方法
     handleEmitClear?: (item: any) => void;
 }
-let selectInputValue = ref(1);
+// let selectInputValue = ref();
-const options = [
+
-    {
-        value: 1,
-        label: "序号"
-    },
-    {
-        value: 2,
-        label: "数字序列号"
-    }
-];
 // const treeSelectValue = ref(null);
 const props = defineProps<SearchFormItem>();
 const _searchParam = computed(() => props.searchParam);
@@ -220,7 +211,119 @@ const remoteMethod = async (query: any, item: any) => {
     }
     loading.value = false;
 };
+
+// 关闭标签时同步 - 修复版
+const handleRemoveTag = (item: any, removedValue: any) => {
+    nextTick(() => {
+        // 从item.options获取树形数据，这是我们传递给组件的数据源
+        const allNodes = Array.isArray(item.options) ? item.options : [];
+        console.log(allNodes, "=allNodes=");
+        // 找到被删除的节点
+        const removedNode = findNode(allNodes, removedValue);
+        console.log(removedNode, "=removedNode=");
+        let ids: any = [];
+        if (removedNode) {
+            // 判断被删除的是父节点还是子节点
+            if (removedNode.children && Array.isArray(removedNode.children) && removedNode.children.length > 0) {
+                // 是父节点，需要删除所有子节点
+                const childIds = getAllChildIds(removedNode);
+                // 从选中值中移除父节点和所有子节点
+                ids = (_searchParam.value[item.prop] || []).filter((id: any) => !childIds.includes(id) && id !== removedNode.id);
+                nextTick(() => {
+                    _searchParam.value[item.prop] = ids;
+                    _searchParam.value[item.prop1] = ids.join(",");
+                });
+            } else {
+                // 是子节点，需要找到其父节点并删除
+                const parentNode = findParentNode(allNodes, removedValue);
+                if (parentNode) {
+                    // 从选中值中移除子节点和父节点
+                    ids = (_searchParam.value[item.prop] || []).filter((id: any) => id !== removedValue && id !== parentNode.id);
+                    nextTick(() => {
+                        _searchParam.value[item.prop] = ids;
+                        _searchParam.value[item.prop1] = ids.join(",");
+                    });
+                } else {
+                    ids = (_searchParam.value[item.prop] || []).filter((id: any) => id !== removedValue && id !== parentNode.id);
+                    nextTick(() => {
+                        _searchParam.value[item.prop] = ids;
+                        _searchParam.value[item.prop1] = ids.join(",");
+                    });
+                }
+            }
+        }
+
+        syncCheckedIds(item);
+    });
+};
+
+// 辅助方法：查找节点
+const findNode = (nodes: any[], value: any): any => {
+    if (!Array.isArray(nodes)) return null;
+
+    for (const node of nodes) {
+        if (node?.id === value) {
+            return node;
+        }
+        if (node?.children && Array.isArray(node.children) && node.children.length > 0) {
+            const found = findNode(node.children, value);
+            if (found) return found;
+        }
+    }
+    return null;
+};
+
+// 辅助方法：查找父节点
+const findParentNode = (nodes: any[], value: any, parent: any = null): any => {
+    if (!Array.isArray(nodes)) return null;
+
+    for (const node of nodes) {
+        if (node?.id === value) {
+            return parent;
+        }
+        if (node?.children && Array.isArray(node.children) && node.children.length > 0) {
+            const foundParent = findParentNode(node.children, value, node);
+            if (foundParent) return foundParent;
+        }
+    }
+    return null;
+};
+
+// 辅助方法：获取所有子节点ID
+const getAllChildIds = (node: any): any[] => {
+    let ids: any[] = [];
+    if (node?.children && Array.isArray(node.children) && node.children.length > 0) {
+        for (const child of node.children) {
+            if (child?.id) {
+                ids.push(child.id);
+                ids = [...ids, ...getAllChildIds(child)];
+            }
+        }
+    }
+    return ids;
+};
+
+// 统一同步选中ID的方法
+const syncCheckedIds = (item: any) => {
+    // 获取所有全选中的节点（包括父节点）
+    const allCheckedNodes = treeSelectRef.value.getCheckedNodes(false, false);
+
+    const allCheckedIds = allCheckedNodes.map((node: any) => node.id);
+    _searchParam.value[item.prop] = allCheckedIds;
+    // 同步到搜索参数
+    _searchParam.value[item.prop1] = allCheckedIds.length ? allCheckedIds.join(",") : null;
+};
+
 const handleTreeSelectChange = (item: any) => {
+    console.log(routeName.value);
+    if (routeName.value === "articleListIndex") {
+        // 通过ref获取组件实例
+        if (treeSelectRef.value) {
+            syncCheckedIds(item);
+            return;
+        }
+    }
+
     if (_searchParam.value[item.prop].length) {
         let values = cloneDeep(_searchParam.value[item.prop]);
         _searchParam.value[item.prop1] = values.join(",");
@@ -238,27 +341,17 @@ const handleInput = (item: any) => {
     //验证
     // verificationInput(item, _searchParam, selectInputValue.value);
 };
-const handleChange = (item: any) => {
+// const handleChange = (item: any) => {
-    _searchParam.value[item.endProp] = "";
+//     _searchParam.value[item.endProp] = "";
-    _searchParam.value[item.startProp] = "";
+//     _searchParam.value[item.startProp] = "";
-    _searchParam.value["serialNumberBegin"] = "";
+//     _searchParam.value["serialNumberBegin"] = "";
-    _searchParam.value["numberCodeBegin"] = "";
+//     _searchParam.value["numberCodeBegin"] = "";
-    _searchParam.value["serialNumberEnd"] = "";
+//     _searchParam.value["serialNumberEnd"] = "";
-    _searchParam.value["numberCodeEnd"] = "";
+//     _searchParam.value["numberCodeEnd"] = "";
-};
+// };
 
 const handleEmitClear = (item: any) => {
     console.log(item);
-
-    if (routeName.value === "barCode") {
-        $Bus.emit("clearBarCodeCreateUser");
-    }
-    if (routeName.value === "boxCode") {
-        $Bus.emit("clearBoxCodeCreateUser");
-    }
-    if (routeName.value === "boxMarkIndex") {
-        $Bus.emit("clearBoxMarkIndexCreator");
-    }
 };
 </script>
 <style lang="scss" scope>

src/components/SearchForm/index.scss

@@ -3,6 +3,8 @@
     margin-bottom: 8px;
 }
 .form-item {
+    display: flex;
+    align-items: center;
     width: 344px !important;
     height: 32px;
     margin-right: 12px !important;

src/layouts/LayoutVertical/index.vue

@@ -46,7 +46,6 @@ const authStore = useAuthStore();
 const globalStore = useGlobalStore();
 const isCollapse = computed(() => globalStore.isCollapse);
 const menuList = computed(() => authStore.showMenuListGet);
-console.log(menuList, "=menuList=");
 const activeMenu = computed(() => (route.meta.activeMenu ? route.meta.activeMenu : route.path) as string);
 </script>
 

src/layouts/components/Menu/components/lv2.vue

@@ -40,6 +40,7 @@ watch(
 );
 
 const handleOpenPage = (item: any) => {
+    console.log(item, "===========item==========");
     $router.push({
         path: item.path
     });

src/stores/modules/auth.ts

@@ -50,6 +50,7 @@ export const useAuthStore = defineStore({
             //     }
             // }
             //如果有路由就使用路由，如果沒有就添加一個首頁，讓用戶條到首頁去
+            console.log(data, "===========data==============");
             this.authMenuList = data;
         },
 

src/views/bannerManagement/class/constant/edit.ts

@@ -24,6 +24,12 @@ export const EDIT_FORM_DATA: FormItem[] = [
         type: "input",
         label: " Banner分类名称: "
     },
+    {
+        prop: "unique_label",
+        placeholder: "请输入",
+        type: "input",
+        label: "唯一标识符: "
+    },
     {
         prop: "recommend",
         placeholder: "请输入",

src/views/bannerManagement/list/constant/edit.ts

@@ -27,6 +27,13 @@ export const EDIT_FORM_DATA: FormItem[] = [
         type: "input",
         label: "Banner名称: "
     },
+    {
+        prop: "short_title",
+        placeholder: "请输入",
+        type: "input",
+        label: "Banner简称: "
+    },
+
     {
         prop: "title_txt_color",
         placeholder: "填写RGB值",
@@ -127,6 +134,12 @@ export const EDIT_FORM_DATA1: FormItem[] = [
         type: "input",
         label: "Banner名称: "
     },
+    {
+        prop: "short_title",
+        placeholder: "请输入",
+        type: "input",
+        label: "Banner简称: "
+    },
     {
         prop: "title_txt_color",
         placeholder: "填写RGB值",

src/views/bannerManagement/list/index.vue

@@ -136,13 +136,18 @@ const treeProps = {
     value: "value"
 };
 
-//产品分类(后端大佬说直接掉列表接口)
+//banner分类
 const getProductCategoryList = async () => {
     const result = await getProductCategoryListApi();
     if (result?.code === 0) {
         let dataClone: any = cloneDeep(result?.data);
         console.log(dataClone, "=dataClone=");
-        dataStore.editFormData[7].options = addLabelValue(dataClone);
+        dataStore.editFormData.forEach((item: any) => {
+            if (item.prop === "rel_prod_cate_id") {
+                item.options = addLabelValue(dataClone);
+            }
+        });
+        // dataStore.editFormData[8].options = addLabelValue(dataClone);
     }
 };
 
@@ -356,16 +361,18 @@ const handleAdd = () => {
     dataStore.visible = true;
     selectedNodes.value = "";
     dataStore.editRuleForm = cloneDeep(EDIT_RULE_FORM);
-    (dataStore.editFormData = cloneDeep(EDIT_FORM_DATA)), // 抽屉表单配置项
+    dataStore.editFormData = cloneDeep(EDIT_FORM_DATA); // 抽屉表单配置项
-        getBannerClassEditList();
+    dataStore.rules = cloneDeep(RULES);
+    getBannerClassEditList();
     // getBannerClassList();
     getProductCategoryList();
 };
 // 抽屉关闭前的钩子
 const handleBeforeClone = () => {
     dataStore.editRuleForm = cloneDeep(EDIT_RULE_FORM);
-    (dataStore.editFormData = cloneDeep(EDIT_FORM_DATA)), // 抽屉表单配置项
+    dataStore.editFormData = cloneDeep(EDIT_FORM_DATA); // 抽屉表单配置项
-        resetFields();
+    dataStore.rules = cloneDeep(RULES);
+    resetFields();
     dataStore.visible = false;
     dataStore.isFirstRequest = true;
 };

src/views/productManagement/classList/index.vue

@@ -167,6 +167,11 @@ const getProductCategoryUpdate = async () => {
         dataStore.visible = false;
         resetFrom();
         getProductCategoryList();
+        console.log("走的进来吗");
+    } else {
+        dataStore.ruleForm.related_tco_category = dataStore.ruleForm.related_tco_category
+            .split(",")
+            .map((item: any) => Number(item));
     }
 };
 //产品详情

src/views/productManagement/list/components/imgInfo.vue

@@ -3,11 +3,23 @@
         <!-- 封面图 -->
         <div>
             <h5 style="margin: 0; margin-bottom: 16px; font-size: 14px">封面图</h5>
-            <UploadImg v-model:image-url="imgInfoDataStore.cover_image">
+
-                <template #tip>
+            <div style="display: flex">
-                    <div style="width: 150px; text-align: center">（图片尺寸800x800）</div>
+                <div>
-                </template>
+                    <UploadImg v-model:image-url="imgInfoDataStore.cover_image">
-            </UploadImg>
+                        <template #tip>
+                            <div style="width: 150px; text-align: center">（图片尺寸800x800）</div>
+                        </template>
+                    </UploadImg>
+                </div>
+                <!-- <div style="margin-left: 20px">
+                    <UploadImg v-model:image-url="imgInfoDataStore.cover_image">
+                        <template #tip>
+                            <div style="width: 150px; text-align: center">（图片尺寸800x800）</div>
+                        </template>
+                    </UploadImg>
+                </div> -->
+            </div>
         </div>
         <el-divider />
         <!-- 属性 -->
@@ -116,7 +128,6 @@ const findAttrById = (id: any) => {
 
 // 在 row 的 attrs 数组中查找对应 attrId 的对象
 const findAttrObjInRow = (row: any, attrId: any) => {
-    console.log(row.attrs, "=======row===========");
     let obj = row.attrs.find((item: any) => item.attr_id === attrId.toString());
     if (!obj) {
         obj = { attr_id: attrId.toString(), attr_value: "" };

src/views/productManagement/list/constant/search.ts

@@ -35,27 +35,10 @@ export const FORM_DATA: FormItem[] = [
         prop: "treeIds",
         prop1: "category_id",
         placeholder: "请选择",
-        type: "treeSelect",
+        type: "treeSelect", //treeSelect
         isArray: true,
         label: "产品分类: ",
-        options: [
+        options: []
-            {
-                value: "1",
-                label: "Level one 1",
-                children: [
-                    {
-                        value: "1-1",
-                        label: "Level two 1-1",
-                        children: [
-                            {
-                                value: "1-1-1",
-                                label: "Level three 1-1-1"
-                            }
-                        ]
-                    }
-                ]
-            }
-        ]
     },
     {
         prop: "Time",

src/views/productManagement/list/utils/edit/initDetailParams.ts

@@ -76,7 +76,6 @@ export const initDetailParams = (dataStore: any, data: any, editorRef: any) => {
         editorRef?.value?.clearEditor(); // 调用子组件的清空方法
     } else {
         dataStore.detail = htmlDecode(data.detail); //htmlDecode(data.detail);
-        console.log(data.detail, "=======detail========");
     }
 
     //图片

src/views/productManagement/recommendation/constant/edit.ts

@@ -0,0 +1,74 @@
+interface FormItem {
+    prop: string;
+    label?: string;
+    placeholder?: string;
+    type: string;
+    isCopy?: boolean;
+    optionProps?: any;
+    startPlaceholder?: string;
+    endPlaceholder?: string;
+    options?: any;
+    isArray?: boolean;
+    startDate?: string; //开始时间(传入后台需要的参数)
+    endDate?: string; //结束时间(传入后台需要的参数)
+    startProp?: string;
+    endProp?: string;
+    isInteger?: boolean;
+    disabled?: boolean;
+    fileList?: any;
+}
+export const EDIT_FORM_DATA: FormItem[] = [
+    {
+        prop: "desc",
+        placeholder: "请输入",
+        type: "input",
+        label: "产品介绍: "
+    },
+
+    {
+        prop: "category_id1",
+        placeholder: "请选择",
+        type: "select",
+        label: "分类名称: ",
+        options: []
+    },
+    {
+        prop: "link",
+        placeholder: "请输入",
+        type: "input",
+        label: "链接: "
+    },
+    {
+        prop: "sort",
+        placeholder: "请输入",
+        type: "inputNumber",
+        label: "排序: "
+    },
+    {
+        prop: "disabled",
+        placeholder: "",
+        type: "radio",
+        label: "是否启用: ",
+        options: [
+            {
+                label: "是",
+                value: 0
+            },
+            {
+                label: "否",
+                value: 1
+            }
+        ]
+    },
+    {
+        prop: "image",
+        type: "upImg",
+        label: "图片: "
+    }
+];
+export const EDIT_RULE_FORM = {
+    disabled: 0,
+    sort: 1
+};
+// editRuleForm: {},
+//editFormData: [],

src/views/productManagement/recommendation/constant/index.ts

@@ -0,0 +1,5 @@
+import { FORM_DATA, RULE_FORM } from "./search";
+import { COLUMNS } from "./table";
+import { RULES } from "./rules";
+import { EDIT_FORM_DATA, EDIT_RULE_FORM } from "./edit";
+export { FORM_DATA, RULE_FORM, COLUMNS, EDIT_FORM_DATA, EDIT_RULE_FORM, RULES };

src/views/productManagement/recommendation/constant/operations.ts

@@ -0,0 +1,26 @@
+export const OPERATIONS = [
+    {
+        name: "下架",
+        name1: "上架",
+        id: 1,
+        type: "primary"
+    },
+    {
+        name: "添加SKU",
+        name1: "添加SKU",
+        id: 2,
+        type: "info"
+    },
+    {
+        name: "编辑",
+        name1: "编辑",
+        id: 3,
+        type: "primary"
+    },
+    {
+        name: "删除",
+        name1: "删除",
+        id: 4,
+        type: "info"
+    }
+];

src/views/productManagement/recommendation/constant/related.ts

@@ -0,0 +1,22 @@
+export const RELATED_INFO_COLUMNS = [
+    {
+        label: "型号",
+        prop: "spu",
+        disabled: false,
+        formType: "selectRemote",
+        options: []
+    },
+    {
+        label: "排序",
+        prop: "sort",
+        disabled: false,
+        formType: "inputNumber"
+    },
+    {
+        label: "操作",
+        prop: "operation",
+        disabled: false,
+        isHeaderIcon: false,
+        width: 160
+    }
+];

src/views/productManagement/recommendation/constant/rules.ts

@@ -0,0 +1,6 @@
+export const RULES = {
+    desc: [{ required: true, message: "产品介绍不能为空 ! ", trigger: "blur" }],
+    category_id1: [{ required: true, message: "分类名称不能为空 ! ", trigger: "blur" }],
+    sort: [{ required: true, message: "排序不能为空 ! ", trigger: "blur" }],
+    image: [{ required: true, message: "图片不能为空 ! ", trigger: "blur" }]
+};

src/views/productManagement/recommendation/constant/search.ts

@@ -0,0 +1,31 @@
+interface FormItem {
+    prop: string;
+    label?: string;
+    placeholder?: string;
+    type: string;
+    isCopy?: boolean;
+    optionProps?: any;
+    startPlaceholder?: string;
+    endPlaceholder?: string;
+    options?: any;
+    isArray?: boolean;
+    startDate?: string; //开始时间(传入后台需要的参数)
+    endDate?: string; //结束时间(传入后台需要的参数)
+    startProp?: string;
+    endProp?: string;
+    isInteger?: boolean;
+}
+export const FORM_DATA: FormItem[] = [
+    {
+        prop: "category_name",
+        placeholder: "请输入",
+        type: "input",
+        isArray: true,
+        label: "分类名称: "
+    }
+];
+
+export const RULE_FORM = {
+    page: 1,
+    size: 50
+};

src/views/productManagement/recommendation/constant/table.ts

@@ -0,0 +1,57 @@
+export const COLUMNS = [
+    {
+        align: "center",
+        fixed: true,
+        label: "ID",
+        prop: "id",
+        width: 80
+    },
+    {
+        align: "center",
+        label: "图片",
+        prop: "image",
+        width: 160
+    },
+    {
+        align: "left",
+        label: "分类名称",
+        prop: "category_name"
+    },
+    {
+        align: "left",
+        label: "产品介绍",
+        prop: "desc"
+    },
+    {
+        align: "left",
+        label: "链接地址",
+        prop: "link"
+    },
+    {
+        align: "left",
+        label: "排序",
+        prop: "sort",
+        width: 160
+    },
+    {
+        align: "left",
+        label: "状态",
+        prop: "disabled",
+        width: 160
+    },
+
+    {
+        align: "left",
+        label: "添加时间",
+        prop: "created_at"
+    },
+
+    // {
+    //     align: "center",
+    //     label: "状态",
+    //     prop: "status",
+    //     width: 80
+    // },
+
+    { prop: "operation", label: "操作", fixed: "right", width: 200 }
+];

src/views/productManagement/recommendation/index.vue

@@ -0,0 +1,241 @@
+<!-- 视频列表 -->
+<template>
+    <div class="table-box">
+        <div style="padding-bottom: 16px">
+            <el-button type="primary" @click="handleAdd"> 添加 </el-button>
+            <el-button type="primary" @click="handleExport"> 导出 </el-button>
+        </div>
+        <ProTable
+            ref="proTableRef"
+            :formData="dataStore.formData"
+            :columns="dataStore.columns"
+            :request-api="getRecommendationApi"
+            :init-param="dataStore.initParam"
+        >
+            <template #image="scope">
+                <el-image :src="scope.row.image ? h + scope.row.image : ''" style="width: 60px; height: 60px" />
+            </template>
+            <template #disabled="scope">
+                <el-tag :type="scope.row.disabled == 1 ? 'danger' : 'success'" effect="dark">{{
+                    scope.row.disabled == 1 ? "禁用" : "启用"
+                }}</el-tag>
+            </template>
+            <template #operation="scope">
+                <el-button size="small" type="primary" @click="handleBtnClick('编辑', scope.row)">编辑</el-button>
+                <el-button size="small" type="danger" @click="handleBtnClick('删除', scope.row)">删除</el-button>
+            </template>
+        </ProTable>
+        <el-drawer
+            v-model="dataStore.visible"
+            :show-close="true"
+            :size="600"
+            :close-on-click-modal="false"
+            :close-on-press-escape="false"
+            :before-close="handleBeforeClone"
+            destroy-on-close
+        >
+            <template #header="{ titleId, titleClass }">
+                <h4 :id="titleId" :class="titleClass">{{ dataStore.title }}</h4>
+            </template>
+            <div>
+                <rulesForm
+                    :ruleForm="dataStore.editRuleForm"
+                    :formData="dataStore.editFormData"
+                    :rules="dataStore.rules"
+                    ref="formRef"
+                    @handleSelectChangeEmits="handleSelectChangeEmits"
+                >
+                </rulesForm>
+            </div>
+            <template #footer>
+                <div style="flex: auto">
+                    <el-button @click="handleResetClick">重置</el-button>
+                    <el-button type="primary" @click="handleConfirmClick">确认</el-button>
+                </div>
+            </template>
+        </el-drawer>
+    </div>
+</template>
+
+<script setup lang="ts" name="videoListIndex">
+import ProTable from "@/components/ProTable/index.vue";
+import rulesForm from "@/components/rulesForm/index.vue";
+import { messageBox } from "@/utils/messageBox";
+import { useMsg } from "@/hooks/useMsg";
+
+//列表接口
+import {
+    getRecommendationApi,
+    getRecommendationDelApi,
+    getRecommendationDetailsApi,
+    getRecommendationUpApi,
+    getRecommendationSaveApi,
+    getRecommendationUpExportApi
+} from "@/api/modules/productRecommendation";
+
+//列表接口
+import { getProductCategoryListApi } from "@/api/modules/productList";
+import { recursiveCompare } from "@/utils/recursiveCompare";
+//深拷贝方法
+import { cloneDeep } from "lodash-es";
+//表格和搜索條件
+import { RULE_FORM, FORM_DATA, COLUMNS, EDIT_FORM_DATA, EDIT_RULE_FORM, RULES } from "./constant/index";
+import { useExport } from "@/hooks/useExport";
+// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
+const proTableRef = ref<any>(null);
+const formRef: any = ref(null);
+//图片地址
+import { h } from "@/utils/url";
+// 数据源
+const dataStore = reactive<any>({
+    title: "添加产品推荐",
+    columns: COLUMNS, //列表配置项
+    rules: cloneDeep(RULES), //抽屉表单验证
+    editRuleForm: cloneDeep(EDIT_RULE_FORM),
+    editFormData: cloneDeep(EDIT_FORM_DATA), //抽屉表单配置项
+    initParam: cloneDeep(RULE_FORM), // 初始化搜索条件|重置搜索条件
+    ruleForm: cloneDeep(RULE_FORM), // 搜索參數
+    formData: FORM_DATA, //搜索配置项
+    visible: false,
+    selectRow: {} //当前选择的row
+});
+
+//抽屉确认
+const handleConfirmClick = () => {
+    if (!formRef.value!.ruleFormRef) return;
+    formRef!.value!.ruleFormRef!.validate((valid: any) => {
+        if (valid) {
+            dataStore.title === "添加产品推荐" ? getRecommendationSave() : getRecommendationUp();
+        } else {
+            console.log("error submit!");
+            return false;
+        }
+    });
+};
+//重置验证状态
+const resetFields = () => {
+    if (!formRef.value!.ruleFormRef) return;
+    formRef!.value!.ruleFormRef.resetFields();
+};
+//抽屉重置
+const handleResetClick = () => {
+    if (dataStore.title === "添加产品推荐") {
+        resetFields();
+    } else {
+        getRecommendationDetails(dataStore.selectRow.id);
+    }
+};
+
+//分类接口
+const getProductCategoryList = async () => {
+    const result = await getProductCategoryListApi();
+    if (result?.code === 0) {
+        let arr: any[] = [];
+        console.log(result?.data, "==========data===========");
+        if (result?.data?.length) {
+            result?.data?.forEach((item: any) => {
+                let obj = {
+                    value: item.id,
+                    label: item.name
+                };
+                arr.push(obj);
+            });
+            dataStore.editFormData[1].options = arr;
+        }
+    }
+};
+getProductCategoryList();
+//添加
+const handleAdd = () => {
+    dataStore.visible = true;
+    dataStore.title = "添加产品推荐";
+};
+//抽屉关闭前的钩子
+const handleBeforeClone = () => {
+    dataStore.editRuleForm = cloneDeep(EDIT_RULE_FORM);
+    resetFields();
+    dataStore.visible = false;
+};
+//详情
+const getRecommendationDetails = async (id: any) => {
+    const result = await getRecommendationDetailsApi(id);
+    if (result?.code === 0) {
+        dataStore.editRuleForm = result?.data;
+        let is = dataStore.editFormData[1].options.some((item: any) =>
+            recursiveCompare(item, dataStore.editRuleForm.category_id)
+        );
+        dataStore.editRuleForm.category_id1 = is ? dataStore.editRuleForm.category_id : dataStore.editRuleForm.category_name;
+    }
+};
+
+const handleSelectChangeEmits = (value: any) => {
+    if (value.prop === "category_id1") {
+        dataStore.editRuleForm.category_id = value.id;
+    }
+};
+
+//保存
+const getRecommendationSave = async () => {
+    dataStore.editRuleForm.title = dataStore.editRuleForm.desc;
+    const result = await getRecommendationSaveApi(dataStore.editRuleForm);
+    if (result?.code === 0) {
+        const { msg } = result;
+        useMsg("success", msg);
+        dataStore.visible = false;
+        dataStore.editRuleForm = cloneDeep(EDIT_RULE_FORM);
+        proTableRef?.value?.getTableList();
+    }
+};
+//更新
+const getRecommendationUp = async () => {
+    dataStore.editRuleForm.title = dataStore.editRuleForm.desc;
+    const result = await getRecommendationUpApi(dataStore.editRuleForm);
+    if (result?.code === 0) {
+        const { msg } = result;
+        useMsg("success", msg);
+        dataStore.visible = false;
+        dataStore.editRuleForm = cloneDeep(EDIT_RULE_FORM);
+        proTableRef?.value?.getTableList();
+    }
+};
+//导出接口
+const getRecommendationUpExport = async () => {
+    const result = await getRecommendationUpExportApi({
+        ...proTableRef?.value?.searchParam,
+        ...proTableRef?.value?.pageable
+    });
+    await useExport(result);
+};
+//删除
+const getRecommendationDel = (id: any) => {
+    messageBox("你确定要删除?", async () => {
+        const result = await getRecommendationDelApi(id);
+        if (result?.code === 0) {
+            const { msg } = result;
+            useMsg("success", msg);
+            proTableRef?.value?.getTableList();
+        }
+    });
+};
+//按钮点击事件
+const handleBtnClick = (type: any, row: any) => {
+    dataStore.selectRow = row;
+    //编辑
+    if (type === "编辑") {
+        dataStore.visible = true;
+        dataStore.title = "编辑产品推荐";
+        getRecommendationDetails(row.id);
+        return;
+    }
+    //删除
+    if (type === "删除") {
+        getRecommendationDel(row.id);
+    }
+};
+//导出
+const handleExport = () => {
+    getRecommendationUpExport();
+};
+</script>
+
+<style scoped></style>

src/views/productManagement/recommendation/utils/edit/index.ts

@@ -0,0 +1,4 @@
+import { handleSubmit } from "./submit";
+import { handleReset } from "./reset";
+import { initDetailParams } from "./initDetailParams";
+export { handleSubmit, handleReset, initDetailParams };

src/views/productManagement/recommendation/utils/edit/initDetailParams.ts

@@ -0,0 +1,91 @@
+import { cloneDeep } from "lodash-es";
+// import { convertSpanToDiv } from "@/utils/convertSpanToDiv";
+const hasIdRecursive = (data: any, targetId: any) => {
+    for (let i = 0; i < data.length; i++) {
+        const item = data[i];
+        if (item.id === targetId) {
+            return true;
+        }
+        if (item.children && item.children.length > 0) {
+            if (hasIdRecursive(item.children, targetId)) {
+                return true;
+            }
+        }
+    }
+    return false;
+};
+
+const htmlDecode = (html: any) => {
+    let e: any = document.createElement("div");
+    e.innerHTML = html;
+
+    // 关键：在解码后添加样式处理
+    const detailAllElements = e.querySelectorAll(".o_detail_all");
+    detailAllElements.forEach((detailAll: HTMLElement) => {
+        // 为文字类子元素添加居中样式
+        let textElements: any = [
+            ...Array.from(detailAll.querySelectorAll<HTMLElement>(".o_detail_text")),
+            ...Array.from(detailAll.querySelectorAll<HTMLElement>(".o_detail_small")),
+            ...Array.from(detailAll.querySelectorAll<HTMLElement>(".o_detail_title"))
+        ];
+
+        textElements.forEach((el: any) => {
+            // 保留原有样式，追加居中样式（避免覆盖已有样式）
+            el.style.textAlign = "center";
+            // 如果需要强制覆盖，可添加 !important
+            // el.style.textAlign = 'center !important';
+        });
+    });
+
+    if (e.childNodes.length > 1) {
+        return e.innerHTML;
+    } else {
+        return e.childNodes[0].innerHTML;
+    }
+};
+
+//将参数分离
+export const initDetailParams = (dataStore: any, data: any, editorRef: any) => {
+    let is = hasIdRecursive(dataStore.options, data.category_id);
+    //基本信息
+    dataStore.basicInfoRuleForm = cloneDeep({
+        name: data.name,
+        short_name: data.short_name,
+        spu: data.spu,
+        is: is,
+        category_id1: is ? data.category_id : data.category_name,
+        category_id: data.category_id,
+        category_name: data.category_name,
+        params: data.params,
+        sort: data.sort,
+        is_show: data.is_show,
+        is_new: data.is_new,
+        is_hot: data.is_hot,
+        is_sale: data.is_sale,
+        status: data.status,
+        seo_title: data.seo_title,
+        seo_keywords: data.seo_keywords,
+        seo_desc: data.seo_desc,
+        stock_qty: data.stock_qty,
+        id: data.id
+    });
+
+    //详情
+    if (!data.detail) {
+        dataStore.detail = "";
+        editorRef?.value?.clearEditor(); // 调用子组件的清空方法
+    } else {
+        dataStore.detail = htmlDecode(data.detail); //htmlDecode(data.detail);
+    }
+
+    //图片
+    dataStore.imgInfoData.cover_image = data.cover_image;
+    dataStore.imgInfoData.video_url = data.video_url;
+    dataStore.imgInfoData.skus = data.skus;
+    dataStore.imgInfoData.video_img = data.video_img;
+
+    //相关信息及下载
+    if (data.related) {
+        dataStore.relatedTableData = cloneDeep(data.related);
+    }
+};

src/views/productManagement/recommendation/utils/edit/reset.ts

@@ -0,0 +1,22 @@
+import { getProductDetailsApi } from "@/api/modules/productList";
+import { useMsg } from "@/hooks/useMsg";
+import { messageBox } from "@/utils/messageBox";
+// import { cloneDeep } from "lodash-es";
+import { initDetailParams } from "./initDetailParams";
+//详情(重置,重新获取一下详情)
+const getProductDetails = async (dataStore: any, editorRef: any) => {
+    const { id } = dataStore.basicInfoRuleForm;
+    const result = await getProductDetailsApi(id);
+    if (result?.code === 0) {
+        const { data } = result;
+
+        initDetailParams(dataStore, data, editorRef);
+        useMsg("success", "重置成功 !");
+    }
+};
+
+export const handleReset = (dataStore: any, editorRef?: any) => {
+    messageBox("该操作会将数据重置为初始状态", () => {
+        getProductDetails(dataStore, editorRef);
+    });
+};

src/views/productManagement/recommendation/utils/edit/submit.ts

@@ -0,0 +1,78 @@
+import { useMsg } from "@/hooks/useMsg";
+import { getProductEditUpApi } from "@/api/modules/productList";
+import { cloneDeep } from "lodash-es";
+const WARN: any = {
+    name: "产品名称不能为空 !",
+    spu: "型号不能为空 !",
+    category_id: "产品分类不能为空 !",
+    sort: "产品排序不能为空 !"
+};
+//警告
+const warnFunction = (data: any) => {
+    if (!data.name) {
+        useMsg("warning", WARN["name"]);
+        return false;
+    }
+    if (!data.spu) {
+        useMsg("warning", WARN["spu"]);
+        return false;
+    }
+    if (!data.category_id) {
+        useMsg("warning", WARN["category_id"]);
+        return false;
+    }
+    if (!data.name) {
+        useMsg("warning", WARN["sort"]);
+        return false;
+    }
+    return true;
+};
+
+//更新
+const getProductEditUp = async (params: any) => {
+    const result: any = await getProductEditUpApi(params);
+    if (result?.code === 0) {
+        useMsg("success", result?.msg);
+        // montageImg(imgInfoRef);
+    }
+};
+export const handleSubmit = async (infoRef: any, imgInfoRef: any, dataStore: any) => {
+    let is = await warnFunction(infoRef.ruleForm);
+    if (!is) {
+        return false;
+    }
+    //相关信息及下载(过滤掉没有id的对象)
+    let relatedData = dataStore.relatedTableData.filter((item: any) => {
+        return item.related_product_id;
+    });
+
+    const { video_img, video_url, cover_image, skus } = imgInfoRef.data;
+
+    //不要直接去修改skus的数据类型,这里的skus是和表格绑定的
+    let skusClone = cloneDeep(skus);
+    skusClone.forEach((item: any) => {
+        let arr: any = [];
+        item.photo_album_clone.forEach((it: any) => {
+            arr.push(it.url);
+        });
+        item.photo_album = arr;
+        item.attrs = item.attrs;
+        // delete item.photo_albumClone;
+    });
+    console.log(skusClone, "=skusClone=");
+    let skusCloneStr = JSON.stringify(skusClone);
+    console.log(typeof skusCloneStr);
+
+    const params = {
+        ...infoRef.ruleForm,
+        cover_image,
+        video_url,
+        video_img,
+        skus: skusCloneStr,
+        detail: dataStore.detail,
+        related: JSON.stringify(relatedData) || []
+    };
+
+    console.log(params, "===========params=============");
+    getProductEditUp(params);
+};

src/views/userManagement/role/index.vue

@@ -50,6 +50,7 @@
                         highlight-current
                         :props="defaultProps"
                         @check-change="handleTreeCheckChange"
+                        :check-strictly="false"
                     />
                 </div>
             </div>
@@ -77,49 +78,54 @@ import {
     getRoleListEditUpApi,
     getRoleListSaveApi
 } from "@/api/modules/roleList";
-//getMenusListApi
+//权限列表接口
 import { getRoleMenusListApi } from "@/api/modules/webMenusList";
 //深拷贝方法
 import { cloneDeep } from "lodash-es";
-//表格和搜索條件
+//表格和搜索条件
 import { RULE_FORM, FORM_DATA, COLUMNS, EDIT_FORM_DATA, EDIT_RULE_FORM, RULES } from "./constant/index";
-// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
+
+// 组件引用
 const proTableRef = ref<any>(null);
 const formRef: any = ref(null);
 const treeRef: any = ref(null);
 const defaultProps = {
     children: "children",
-    label: "title"
+    label: "title",
+    disabled: (data: any) => data.id === 7 // 首页节点ID为7，禁止选择
 };
+
 // 数据源
 const dataStore = reactive<any>({
-    treeData: [], //权限
+    treeData: [], //权限树数据
-    allCheck: false,
+    allCheck: false, //全选框状态
     title: "添加角色", //抽屉标题
     columns: COLUMNS, //列表配置项
-    rules: cloneDeep(RULES), //抽屉表单验证
+    rules: cloneDeep(RULES), //表单验证规则
-    editRuleForm: cloneDeep(EDIT_RULE_FORM),
+    editRuleForm: cloneDeep(EDIT_RULE_FORM), //编辑表单数据
-    editFormData: cloneDeep(EDIT_FORM_DATA), //抽屉表单配置项
+    editFormData: cloneDeep(EDIT_FORM_DATA), //表单配置项
-    initParam: cloneDeep(RULE_FORM), // 初始化搜索条件|重置搜索条件
+    initParam: cloneDeep(RULE_FORM), //初始化搜索条件
-    ruleForm: cloneDeep(RULE_FORM), // 搜索參數
+    ruleForm: cloneDeep(RULE_FORM), //搜索参数
     formData: FORM_DATA, //搜索配置项
-    selectedMenuIds: [], // 新增属性，用于保存选中的菜单 id
+    selectedMenuIds: [], //选中的菜单ID（含全选和半选）
-    isIndeterminate: false, //全选框样式控制
+    isIndeterminate: false, //全选框半选样式
-    visible: false, //抽屉控制
+    visible: false, //抽屉显示状态
-    selectRow: {} //当前选择的row
+    selectRow: {} //当前选中行数据
 });
 
-// 处理全选框状态变化
+// 处理全选框状态变化（排除首页节点）
 const handleAllCheckChange = (checked: any) => {
-    const allNodeKeys = getAllNodeKeys(dataStore.treeData);
+    const allNodeKeys = getAllNodeKeys(dataStore.treeData).filter(id => id !== 7); // 排除首页ID
     if (checked) {
-        treeRef.value.setCheckedKeys(allNodeKeys);
+        // 全选时选中所有节点（包括父节点，但首页已禁用）
+        treeRef.value.setCheckedKeys([7, ...allNodeKeys]); // 强制包含首页
     } else {
-        treeRef.value.setCheckedKeys([]);
+        // 取消全选时保留首页选中状态
+        treeRef.value.setCheckedKeys([7]);
     }
 };
 
-// 获取所有节点的 key
+// 获取所有节点的ID（用于全选计算）
 const getAllNodeKeys = (data: any[]) => {
     let keys: number[] = [];
     data.forEach(item => {
@@ -131,139 +137,187 @@ const getAllNodeKeys = (data: any[]) => {
     return keys;
 };
 
-// 处理树节点选中状态变化
+// 处理树节点选中状态变化（确保首页始终选中）
 const handleTreeCheckChange = () => {
-    const allNodeKeys = getAllNodeKeys(dataStore.treeData);
+    // 移除 (data: any) 参数
+    // 防止手动取消首页选中（虽然已禁用，但做双重保险）
+    if (!dataStore.selectedMenuIds.some((item: any) => item.menu_id === 7)) {
+        dataStore.selectedMenuIds.unshift({ menu_id: 7 });
+    }
+
+    const allNodeKeys = getAllNodeKeys(dataStore.treeData).filter(id => id !== 7); // 排除首页
+    // 获取全选节点ID（包括父节点全选和叶子节点选中）
     const checkedKeys = treeRef.value.getCheckedKeys();
-    if (checkedKeys.length === allNodeKeys.length) {
+    // 获取半选节点ID（父节点部分子节点选中）
+    const halfCheckedKeys = treeRef.value.getHalfCheckedKeys();
+    // 合并全选和半选ID并去重，强制包含首页
+    const allSelectedKeys = [...new Set([7, ...checkedKeys, ...halfCheckedKeys])];
+
+    // 更新全选框状态（排除首页计算）
+    const selectedWithoutHome = allSelectedKeys.filter(id => id !== 7);
+    if (selectedWithoutHome.length === allNodeKeys.length) {
         dataStore.allCheck = true;
         dataStore.isIndeterminate = false;
-    } else if (checkedKeys.length === 0) {
+    } else if (selectedWithoutHome.length === 0) {
         dataStore.allCheck = false;
         dataStore.isIndeterminate = false;
     } else {
         dataStore.allCheck = false;
         dataStore.isIndeterminate = true;
     }
-    // 更新选中的菜单 id
+
-    dataStore.selectedMenuIds = checkedKeys.map((id: any) => ({ menu_id: id }));
+    // 保存所有选中的菜单ID（强制包含首页）
+    dataStore.selectedMenuIds = allSelectedKeys.map((id: number) => ({ menu_id: id }));
 };
 
-//抽屉确认
+// 抽屉确认按钮
 const handleConfirmClick = () => {
-    if (!formRef.value!.ruleFormRef) return;
+    if (!formRef.value?.ruleFormRef) return;
-    formRef!.value!.ruleFormRef!.validate((valid: any) => {
+    formRef.value.ruleFormRef.validate((valid: boolean) => {
         if (valid) {
-            console.log("submit!");
             dataStore.title === "添加角色" ? getRoleListSave() : getRoleListEditUp();
         } else {
-            console.log("error submit!");
+            console.log("表单验证失败");
             return false;
         }
     });
 };
-//重置验证状态
+
+// 重置表单验证状态
 const resetFields = () => {
-    if (!formRef.value!.ruleFormRef) return;
+    if (formRef.value?.ruleFormRef) {
-    formRef!.value!.ruleFormRef.resetFields();
+        formRef.value.ruleFormRef.resetFields();
+    }
 };
-//抽屉重置
+
+// 抽屉重置按钮
 const handleResetClick = () => {
     if (dataStore.title === "添加角色") {
         resetFields();
+        // 重置树选择状态（保留首页选中）
+        treeRef.value?.setCheckedKeys([7]);
+        dataStore.selectedMenuIds = [{ menu_id: 7 }];
     } else {
+        // 编辑时重新获取详情数据
         getRoleListDetails(dataStore.editRuleForm.id);
     }
 };
-//添加
+
+// 打开添加抽屉
 const handleAdd = () => {
     dataStore.title = "添加角色";
     dataStore.visible = true;
+    // 重置表单和树状态（默认选中首页）
+    dataStore.editRuleForm = cloneDeep(EDIT_RULE_FORM);
+    resetFields();
+    nextTick(() => {
+        treeRef.value?.setCheckedKeys([7]);
+    });
 };
-//抽屉关闭前的钩子
+
+// 抽屉关闭前处理
 const handleBeforeClone = () => {
     dataStore.selectedMenuIds = [];
-    treeRef.value.setCheckedKeys([]);
+    treeRef.value?.setCheckedKeys([]);
     dataStore.editRuleForm = cloneDeep(EDIT_RULE_FORM);
     resetFields();
     dataStore.visible = false;
 };
-//按钮点击事件
+
-const handleBtnClick = (type: any, row: any) => {
+// 编辑/删除按钮点击
+const handleBtnClick = (type: string, row: any) => {
     dataStore.selectRow = row;
-    //编辑
     if (type === "编辑") {
         dataStore.visible = true;
         dataStore.title = "编辑角色";
         getRoleListDetails(row.id);
-        return;
+    } else if (type === "删除") {
-    }
-    //删除
-    if (type === "删除") {
         getRoleListDel(row.id);
     }
 };
 
-//删除
+// 删除角色
-const getRoleListDel = (id: any) => {
+const getRoleListDel = (id: number) => {
     messageBox("你确定要删除?", async () => {
         const result = await getRoleListDelApi(id);
         if (result?.code === 0) {
-            const { msg } = result;
+            useMsg("success", result.msg);
-            useMsg("success", msg);
+            proTableRef.value?.getTableList();
-            proTableRef?.value?.getTableList();
         }
     });
 };
-//详情
+
-const getRoleListDetails = async (id: any) => {
+// 获取角色详情并回显（确保首页始终选中）
+const getRoleListDetails = async (id: number) => {
     const result = await getRoleListDetailsApi(id);
     if (result?.code === 0) {
-        dataStore.editRuleForm = result?.data;
+        dataStore.editRuleForm = result.data;
-        const menuIds = dataStore.editRuleForm.authorities.map((item: any) => item.menu_id);
+        // 提取后台返回的权限ID列表，强制包含首页
-        // 设置树组件的默认选中节点
+        let savedMenuIds = dataStore.editRuleForm.authorities.map((item: any) => item.menu_id);
+        savedMenuIds = [...new Set([7, ...savedMenuIds])]; // 确保首页ID存在
+
         nextTick(() => {
             if (treeRef.value) {
-                treeRef.value.setCheckedKeys(menuIds);
+                // 筛选出所有叶子节点ID（用于正确触发父节点半选状态）
+                const leafIds: number[] = [];
+                const findLeafNodes = (nodes: any[]) => {
+                    nodes.forEach(node => {
+                        if (!node.children || node.children.length === 0) {
+                            // 叶子节点且在保存的ID中才选中
+                            if (savedMenuIds.includes(node.id)) {
+                                leafIds.push(node.id);
+                            }
+                        } else {
+                            findLeafNodes(node.children);
+                        }
+                    });
+                };
+                findLeafNodes(dataStore.treeData);
+
+                // 设置叶子节点选中状态，强制包含首页
+                treeRef.value.setCheckedKeys([7, ...leafIds]);
+                // 触发状态更新
+                handleTreeCheckChange();
             }
         });
     }
 };
-//保存
+
+// 保存新角色
 const getRoleListSave = async () => {
     const result = await getRoleListSaveApi({
         ...dataStore.editRuleForm,
         menu_permission: JSON.stringify(dataStore.selectedMenuIds)
     });
     if (result?.code === 0) {
-        const { msg } = result;
+        useMsg("success", result.msg);
-        useMsg("success", msg);
         dataStore.visible = false;
-        dataStore.editRuleForm = cloneDeep(EDIT_RULE_FORM);
+        proTableRef.value?.getTableList();
-        proTableRef?.value?.getTableList();
     }
 };
-//更新
+
+// 更新角色信息
 const getRoleListEditUp = async () => {
     const result = await getRoleListEditUpApi({
         ...dataStore.editRuleForm,
         menu_permission: JSON.stringify(dataStore.selectedMenuIds)
     });
     if (result?.code === 0) {
-        const { msg } = result;
+        useMsg("success", result.msg);
-        useMsg("success", msg);
         dataStore.visible = false;
-        dataStore.editRuleForm = cloneDeep(EDIT_RULE_FORM);
+        proTableRef.value?.getTableList();
-        proTableRef?.value?.getTableList();
     }
 };
-//权限管理
+
+// 获取权限树数据
 const getMenusList = async () => {
     const result = await getRoleMenusListApi();
     if (result?.code === 0) {
-        dataStore.treeData = result?.data;
+        dataStore.treeData = result.data;
     }
 };
+
+// 初始化加载权限树
 getMenusList();
 </script>
 

src/views/userManagement/role/index1.vue

@@ -0,0 +1,316 @@
+<template>
+    <div class="table-box">
+        <div style="padding-bottom: 16px">
+            <el-button type="primary" @click="handleAdd"> 添加 </el-button>
+        </div>
+        <ProTable
+            ref="proTableRef"
+            :formData="dataStore.formData"
+            :columns="dataStore.columns"
+            :request-api="getRoleListApi"
+            :init-param="dataStore.initParam"
+        >
+            <template #operation="scope">
+                <el-button size="small" type="primary" @click="handleBtnClick('编辑', scope.row)">编辑</el-button>
+                <el-button size="small" type="danger" @click="handleBtnClick('删除', scope.row)">删除</el-button>
+            </template>
+        </ProTable>
+        <el-drawer
+            v-model="dataStore.visible"
+            :show-close="true"
+            :size="600"
+            :close-on-click-modal="false"
+            :close-on-press-escape="false"
+            :before-close="handleBeforeClone"
+            destroy-on-close
+        >
+            <template #header="{ titleId, titleClass }">
+                <h4 :id="titleId" :class="titleClass">{{ dataStore.title }}</h4>
+            </template>
+            <div>
+                <rulesForm
+                    :ruleForm="dataStore.editRuleForm"
+                    :formData="dataStore.editFormData"
+                    :rules="dataStore.rules"
+                    :indeterminate="dataStore.isIndeterminate"
+                    ref="formRef"
+                >
+                </rulesForm>
+                <div style="margin-left: 65px; font-size: 14px; color: #606266">
+                    <div style="display: flex; align-items: center; margin-bottom: 10px">
+                        <span style="margin-right: 10px">权限分配:</span>
+                        <el-checkbox v-model="dataStore.allCheck" @change="handleAllCheckChange" label="全选" size="large" />
+                        <!-- <el-checkbox v-model="dataStore.allCheck" @change="handleAllCheckChange" label="全选" size="large" /> -->
+                    </div>
+                    <el-tree
+                        ref="treeRef"
+                        style="max-width: 600px"
+                        :data="dataStore.treeData"
+                        show-checkbox
+                        node-key="id"
+                        highlight-current
+                        :props="defaultProps"
+                        @check-change="handleTreeCheckChange"
+                    />
+                </div>
+            </div>
+            <template #footer>
+                <div style="flex: auto">
+                    <el-button @click="handleResetClick">重置</el-button>
+                    <el-button type="primary" @click="handleConfirmClick">确认</el-button>
+                </div>
+            </template>
+        </el-drawer>
+    </div>
+</template>
+
+<script setup lang="ts" name="roleListIndex">
+import ProTable from "@/components/ProTable/index.vue";
+import rulesForm from "@/components/rulesForm/index.vue";
+import { messageBox } from "@/utils/messageBox";
+import { nextTick } from "vue";
+import { useMsg } from "@/hooks/useMsg";
+//列表接口
+import {
+    getRoleListApi,
+    getRoleListDetailsApi,
+    getRoleListDelApi,
+    getRoleListEditUpApi,
+    getRoleListSaveApi
+} from "@/api/modules/roleList";
+//权限列表接口
+import { getRoleMenusListApi } from "@/api/modules/webMenusList";
+//深拷贝方法
+import { cloneDeep } from "lodash-es";
+//表格和搜索条件
+import { RULE_FORM, FORM_DATA, COLUMNS, EDIT_FORM_DATA, EDIT_RULE_FORM, RULES } from "./constant/index";
+
+// 组件引用
+const proTableRef = ref<any>(null);
+const formRef: any = ref(null);
+const treeRef: any = ref(null);
+const defaultProps = {
+    children: "children",
+    label: "title"
+};
+
+// 数据源
+const dataStore = reactive<any>({
+    treeData: [], //权限树数据
+    allCheck: false, //全选框状态
+    title: "添加角色", //抽屉标题
+    columns: COLUMNS, //列表配置项
+    rules: cloneDeep(RULES), //表单验证规则
+    editRuleForm: cloneDeep(EDIT_RULE_FORM), //编辑表单数据
+    editFormData: cloneDeep(EDIT_FORM_DATA), //表单配置项
+    initParam: cloneDeep(RULE_FORM), //初始化搜索条件
+    ruleForm: cloneDeep(RULE_FORM), //搜索参数
+    formData: FORM_DATA, //搜索配置项
+    selectedMenuIds: [], //选中的菜单ID（含全选和半选）
+    isIndeterminate: false, //全选框半选样式
+    visible: false, //抽屉显示状态
+    selectRow: {} //当前选中行数据
+});
+
+// 处理全选框状态变化
+const handleAllCheckChange = (checked: any) => {
+    const allNodeKeys = getAllNodeKeys(dataStore.treeData);
+    if (checked) {
+        // 全选时选中所有节点（包括父节点）
+        treeRef.value.setCheckedKeys(allNodeKeys);
+    } else {
+        // 取消全选时清空所有选中
+        treeRef.value.setCheckedKeys([]);
+    }
+};
+
+// 获取所有节点的ID
+const getAllNodeKeys = (data: any[]) => {
+    let keys: number[] = [];
+    data.forEach(item => {
+        keys.push(item.id);
+        if (item.children && item.children.length > 0) {
+            keys = keys.concat(getAllNodeKeys(item.children));
+        }
+    });
+    return keys;
+};
+
+// 处理树节点选中状态变化
+const handleTreeCheckChange = () => {
+    const allNodeKeys = getAllNodeKeys(dataStore.treeData);
+    // 获取全选节点ID（包括父节点全选和叶子节点选中）
+    const checkedKeys = treeRef.value.getCheckedKeys();
+    // 获取半选节点ID（父节点部分子节点选中）
+    const halfCheckedKeys = treeRef.value.getHalfCheckedKeys();
+    // 合并全选和半选ID并去重
+    const allSelectedKeys = [...new Set([...checkedKeys, ...halfCheckedKeys])];
+
+    // 更新全选框状态
+    if (allSelectedKeys.length === allNodeKeys.length) {
+        dataStore.allCheck = true;
+        dataStore.isIndeterminate = false;
+    } else if (allSelectedKeys.length === 0) {
+        dataStore.allCheck = false;
+        dataStore.isIndeterminate = false;
+    } else {
+        dataStore.allCheck = false;
+        dataStore.isIndeterminate = true;
+    }
+
+    // 保存所有选中的菜单ID（含半选父节点）
+    dataStore.selectedMenuIds = allSelectedKeys.map((id: number) => ({ menu_id: id }));
+};
+
+// 抽屉确认按钮
+const handleConfirmClick = () => {
+    if (!formRef.value?.ruleFormRef) return;
+    formRef.value.ruleFormRef.validate((valid: boolean) => {
+        if (valid) {
+            dataStore.title === "添加角色" ? getRoleListSave() : getRoleListEditUp();
+        } else {
+            console.log("表单验证失败");
+            return false;
+        }
+    });
+};
+
+// 重置表单验证状态
+const resetFields = () => {
+    if (formRef.value?.ruleFormRef) {
+        formRef.value.ruleFormRef.resetFields();
+    }
+};
+
+// 抽屉重置按钮
+const handleResetClick = () => {
+    if (dataStore.title === "添加角色") {
+        resetFields();
+        // 重置树选择状态
+        treeRef.value?.setCheckedKeys([]);
+        dataStore.selectedMenuIds = [];
+    } else {
+        // 编辑时重新获取详情数据
+        getRoleListDetails(dataStore.editRuleForm.id);
+    }
+};
+
+// 打开添加抽屉
+const handleAdd = () => {
+    dataStore.title = "添加角色";
+    dataStore.visible = true;
+    // 重置表单和树状态
+    dataStore.editRuleForm = cloneDeep(EDIT_RULE_FORM);
+    resetFields();
+    nextTick(() => {
+        treeRef.value?.setCheckedKeys([]);
+    });
+};
+
+// 抽屉关闭前处理
+const handleBeforeClone = () => {
+    dataStore.selectedMenuIds = [];
+    treeRef.value?.setCheckedKeys([]);
+    dataStore.editRuleForm = cloneDeep(EDIT_RULE_FORM);
+    resetFields();
+    dataStore.visible = false;
+};
+
+// 编辑/删除按钮点击
+const handleBtnClick = (type: string, row: any) => {
+    dataStore.selectRow = row;
+    if (type === "编辑") {
+        dataStore.visible = true;
+        dataStore.title = "编辑角色";
+        getRoleListDetails(row.id);
+    } else if (type === "删除") {
+        getRoleListDel(row.id);
+    }
+};
+
+// 删除角色
+const getRoleListDel = (id: number) => {
+    messageBox("你确定要删除?", async () => {
+        const result = await getRoleListDelApi(id);
+        if (result?.code === 0) {
+            useMsg("success", result.msg);
+            proTableRef.value?.getTableList();
+        }
+    });
+};
+
+// 获取角色详情并回显
+const getRoleListDetails = async (id: number) => {
+    const result = await getRoleListDetailsApi(id);
+    if (result?.code === 0) {
+        dataStore.editRuleForm = result.data;
+        // 提取后台返回的权限ID列表
+        const savedMenuIds = dataStore.editRuleForm.authorities.map((item: any) => item.menu_id);
+
+        nextTick(() => {
+            if (treeRef.value) {
+                // 筛选出所有叶子节点ID（用于正确触发父节点半选状态）
+                const leafIds: number[] = [];
+                const findLeafNodes = (nodes: any[]) => {
+                    nodes.forEach(node => {
+                        if (!node.children || node.children.length === 0) {
+                            // 叶子节点且在保存的ID中才选中
+                            if (savedMenuIds.includes(node.id)) {
+                                leafIds.push(node.id);
+                            }
+                        } else {
+                            findLeafNodes(node.children);
+                        }
+                    });
+                };
+                findLeafNodes(dataStore.treeData);
+
+                // 设置叶子节点选中状态，父节点会自动计算半选/全选
+                treeRef.value.setCheckedKeys(leafIds);
+                // 触发状态更新
+                handleTreeCheckChange();
+            }
+        });
+    }
+};
+
+// 保存新角色
+const getRoleListSave = async () => {
+    const result = await getRoleListSaveApi({
+        ...dataStore.editRuleForm,
+        menu_permission: JSON.stringify(dataStore.selectedMenuIds)
+    });
+    if (result?.code === 0) {
+        useMsg("success", result.msg);
+        dataStore.visible = false;
+        proTableRef.value?.getTableList();
+    }
+};
+
+// 更新角色信息
+const getRoleListEditUp = async () => {
+    const result = await getRoleListEditUpApi({
+        ...dataStore.editRuleForm,
+        menu_permission: JSON.stringify(dataStore.selectedMenuIds)
+    });
+    if (result?.code === 0) {
+        useMsg("success", result.msg);
+        dataStore.visible = false;
+        proTableRef.value?.getTableList();
+    }
+};
+
+// 获取权限树数据
+const getMenusList = async () => {
+    const result = await getRoleMenusListApi();
+    if (result?.code === 0) {
+        dataStore.treeData = result.data;
+        console.log(result.data, "==============data===============");
+    }
+};
+
+// 初始化加载权限树
+getMenusList();
+</script>
+
+<style scoped></style>

src/views/webManagement/commodity/constant/edit.ts

@@ -0,0 +1,72 @@
+interface FormItem {
+    prop: string;
+    label?: string;
+    placeholder?: string;
+    type: string;
+    isCopy?: boolean;
+    optionProps?: any;
+    startPlaceholder?: string;
+    endPlaceholder?: string;
+    options?: any;
+    isArray?: boolean;
+    startDate?: string; //开始时间(传入后台需要的参数)
+    endDate?: string; //结束时间(传入后台需要的参数)
+    startProp?: string;
+    endProp?: string;
+    isInteger?: boolean;
+    disabled?: boolean;
+    fileList?: any;
+}
+export const EDIT_FORM_DATA: FormItem[] = [
+    {
+        prop: "name",
+        placeholder: "请输入",
+        type: "input",
+        label: "商场名称: "
+    },
+
+    {
+        prop: "link",
+        placeholder: "请输入",
+        type: "input",
+        label: "链接地址: "
+    },
+    {
+        prop: "sort",
+        placeholder: "请输入",
+        type: "inputNumber",
+        label: "排序: "
+    },
+    {
+        prop: "disabled",
+        placeholder: "",
+        type: "radio",
+        label: "是否启用: ",
+        options: [
+            {
+                label: "是",
+                value: 0
+            },
+            {
+                label: "否",
+                value: 1
+            }
+        ]
+    },
+    {
+        prop: "image",
+        type: "upImg",
+        label: "图片: "
+    },
+    {
+        prop: "hover_image",
+        type: "upImg",
+        label: "悬浮图: "
+    }
+];
+export const EDIT_RULE_FORM = {
+    disabled: 0,
+    sort: 1
+};
+// editRuleForm: {},
+//editFormData: [],

src/views/webManagement/commodity/constant/index.ts

@@ -0,0 +1,5 @@
+import { FORM_DATA, RULE_FORM } from "./search";
+import { COLUMNS } from "./table";
+import { RULES } from "./rules";
+import { EDIT_FORM_DATA, EDIT_RULE_FORM } from "./edit";
+export { FORM_DATA, RULE_FORM, COLUMNS, EDIT_FORM_DATA, EDIT_RULE_FORM, RULES };

src/views/webManagement/commodity/constant/operations.ts

@@ -0,0 +1,26 @@
+export const OPERATIONS = [
+    {
+        name: "下架",
+        name1: "上架",
+        id: 1,
+        type: "primary"
+    },
+    {
+        name: "添加SKU",
+        name1: "添加SKU",
+        id: 2,
+        type: "info"
+    },
+    {
+        name: "编辑",
+        name1: "编辑",
+        id: 3,
+        type: "primary"
+    },
+    {
+        name: "删除",
+        name1: "删除",
+        id: 4,
+        type: "info"
+    }
+];

src/views/webManagement/commodity/constant/related.ts

@@ -0,0 +1,22 @@
+export const RELATED_INFO_COLUMNS = [
+    {
+        label: "型号",
+        prop: "spu",
+        disabled: false,
+        formType: "selectRemote",
+        options: []
+    },
+    {
+        label: "排序",
+        prop: "sort",
+        disabled: false,
+        formType: "inputNumber"
+    },
+    {
+        label: "操作",
+        prop: "operation",
+        disabled: false,
+        isHeaderIcon: false,
+        width: 160
+    }
+];

src/views/webManagement/commodity/constant/rules.ts

@@ -0,0 +1,5 @@
+export const RULES = {
+    name: [{ required: true, message: "商城名称不能为空 ! ", trigger: "blur" }],
+    sort: [{ required: true, message: "排序不能为空 ! ", trigger: "blur" }],
+    image: [{ required: true, message: "图片不能为空 ! ", trigger: "blur" }]
+};

src/views/webManagement/commodity/constant/search.ts

@@ -0,0 +1,31 @@
+interface FormItem {
+    prop: string;
+    label?: string;
+    placeholder?: string;
+    type: string;
+    isCopy?: boolean;
+    optionProps?: any;
+    startPlaceholder?: string;
+    endPlaceholder?: string;
+    options?: any;
+    isArray?: boolean;
+    startDate?: string; //开始时间(传入后台需要的参数)
+    endDate?: string; //结束时间(传入后台需要的参数)
+    startProp?: string;
+    endProp?: string;
+    isInteger?: boolean;
+}
+export const FORM_DATA: FormItem[] = [
+    {
+        prop: "name",
+        placeholder: "请输入",
+        type: "input",
+        isArray: true,
+        label: "商城名称: "
+    }
+];
+
+export const RULE_FORM = {
+    page: 1,
+    size: 50
+};

src/views/webManagement/commodity/constant/table.ts

@@ -0,0 +1,45 @@
+export const COLUMNS = [
+    {
+        align: "center",
+        fixed: true,
+        label: "ID",
+        prop: "id",
+        width: 80
+    },
+    {
+        align: "center",
+        label: "图片",
+        prop: "image",
+        width: 160
+    },
+    {
+        align: "left",
+        label: "商城名称",
+        prop: "name"
+    },
+    {
+        align: "left",
+        label: "链接地址",
+        prop: "link"
+    },
+    {
+        align: "left",
+        label: "排序",
+        prop: "sort",
+        width: 160
+    },
+    {
+        align: "left",
+        label: "状态",
+        prop: "disabled",
+        width: 160
+    },
+
+    {
+        align: "left",
+        label: "添加时间",
+        prop: "created_at"
+    },
+
+    { prop: "operation", label: "操作", fixed: "right", width: 200 }
+];

src/views/webManagement/commodity/index.vue

@@ -0,0 +1,218 @@
+<!-- 视频列表 -->
+<template>
+    <div class="table-box">
+        <div style="padding-bottom: 16px">
+            <el-button type="primary" @click="handleAdd"> 添加 </el-button>
+            <el-button type="primary" @click="handleExport"> 导出 </el-button>
+        </div>
+        <ProTable
+            ref="proTableRef"
+            :formData="dataStore.formData"
+            :columns="dataStore.columns"
+            :request-api="getMallListApi"
+            :init-param="dataStore.initParam"
+        >
+            <template #image="scope">
+                <el-image :src="scope.row.image ? h + scope.row.image : ''" style="width: 60px; height: 60px" />
+            </template>
+            <template #disabled="scope">
+                <el-tag :type="scope.row.disabled == 1 ? 'danger' : 'success'" effect="dark">{{
+                    scope.row.disabled == 1 ? "禁用" : "启用"
+                }}</el-tag>
+            </template>
+            <template #operation="scope">
+                <el-button size="small" type="primary" @click="handleBtnClick('编辑', scope.row)">编辑</el-button>
+                <el-button size="small" type="danger" @click="handleBtnClick('删除', scope.row)">删除</el-button>
+            </template>
+        </ProTable>
+        <el-drawer
+            v-model="dataStore.visible"
+            :show-close="true"
+            :size="600"
+            :close-on-click-modal="false"
+            :close-on-press-escape="false"
+            :before-close="handleBeforeClone"
+            destroy-on-close
+        >
+            <template #header="{ titleId, titleClass }">
+                <h4 :id="titleId" :class="titleClass">{{ dataStore.title }}</h4>
+            </template>
+            <div>
+                <rulesForm
+                    :ruleForm="dataStore.editRuleForm"
+                    :formData="dataStore.editFormData"
+                    :rules="dataStore.rules"
+                    ref="formRef"
+                    @handleSelectChangeEmits="handleSelectChangeEmits"
+                >
+                </rulesForm>
+            </div>
+            <template #footer>
+                <div style="flex: auto">
+                    <el-button @click="handleResetClick">重置</el-button>
+                    <el-button type="primary" @click="handleConfirmClick">确认</el-button>
+                </div>
+            </template>
+        </el-drawer>
+    </div>
+</template>
+
+<script setup lang="ts" name="videoListIndex">
+import ProTable from "@/components/ProTable/index.vue";
+import rulesForm from "@/components/rulesForm/index.vue";
+import { messageBox } from "@/utils/messageBox";
+import { useMsg } from "@/hooks/useMsg";
+
+//列表接口
+import {
+    getMallListApi,
+    getMallDelApi,
+    getMallDetailsApi,
+    getMallUpApi,
+    getMallSaveApi,
+    getMallUpExportApi
+} from "@/api/modules/commodity";
+
+import { recursiveCompare } from "@/utils/recursiveCompare";
+//深拷贝方法
+import { cloneDeep } from "lodash-es";
+//表格和搜索條件
+import { RULE_FORM, FORM_DATA, COLUMNS, EDIT_FORM_DATA, EDIT_RULE_FORM, RULES } from "./constant/index";
+import { useExport } from "@/hooks/useExport";
+// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
+const proTableRef = ref<any>(null);
+const formRef: any = ref(null);
+//图片地址
+import { h } from "@/utils/url";
+// 数据源
+const dataStore = reactive<any>({
+    title: "添加产品推荐",
+    columns: COLUMNS, //列表配置项
+    rules: cloneDeep(RULES), //抽屉表单验证
+    editRuleForm: cloneDeep(EDIT_RULE_FORM),
+    editFormData: cloneDeep(EDIT_FORM_DATA), //抽屉表单配置项
+    initParam: cloneDeep(RULE_FORM), // 初始化搜索条件|重置搜索条件
+    ruleForm: cloneDeep(RULE_FORM), // 搜索參數
+    formData: FORM_DATA, //搜索配置项
+    visible: false,
+    selectRow: {} //当前选择的row
+});
+
+//抽屉确认
+const handleConfirmClick = () => {
+    if (!formRef.value!.ruleFormRef) return;
+    formRef!.value!.ruleFormRef!.validate((valid: any) => {
+        if (valid) {
+            dataStore.title === "添加产品推荐" ? getMallSave() : getMallUp();
+        } else {
+            console.log("error submit!");
+            return false;
+        }
+    });
+};
+//重置验证状态
+const resetFields = () => {
+    if (!formRef.value!.ruleFormRef) return;
+    formRef!.value!.ruleFormRef.resetFields();
+};
+//抽屉重置
+const handleResetClick = () => {
+    if (dataStore.title === "添加产品推荐") {
+        resetFields();
+    } else {
+        getMallDetails(dataStore.selectRow.id);
+    }
+};
+
+//添加
+const handleAdd = () => {
+    dataStore.visible = true;
+    dataStore.title = "添加产品推荐";
+};
+//抽屉关闭前的钩子
+const handleBeforeClone = () => {
+    dataStore.editRuleForm = cloneDeep(EDIT_RULE_FORM);
+    resetFields();
+    dataStore.visible = false;
+};
+//详情
+const getMallDetails = async (id: any) => {
+    const result = await getMallDetailsApi(id);
+    if (result?.code === 0) {
+        dataStore.editRuleForm = result?.data;
+        let is = dataStore.editFormData[1].options.some((item: any) =>
+            recursiveCompare(item, dataStore.editRuleForm.category_id)
+        );
+        dataStore.editRuleForm.category_id1 = is ? dataStore.editRuleForm.category_id : dataStore.editRuleForm.category_name;
+    }
+};
+
+const handleSelectChangeEmits = (value: any) => {
+    if (value.prop === "category_id1") {
+        dataStore.editRuleForm.category_id = value.id;
+    }
+};
+
+//保存
+const getMallSave = async () => {
+    const result = await getMallSaveApi(dataStore.editRuleForm);
+    if (result?.code === 0) {
+        const { msg } = result;
+        useMsg("success", msg);
+        dataStore.visible = false;
+        dataStore.editRuleForm = cloneDeep(EDIT_RULE_FORM);
+        proTableRef?.value?.getTableList();
+    }
+};
+//更新
+const getMallUp = async () => {
+    const result = await getMallUpApi(dataStore.editRuleForm);
+    if (result?.code === 0) {
+        const { msg } = result;
+        useMsg("success", msg);
+        dataStore.visible = false;
+        dataStore.editRuleForm = cloneDeep(EDIT_RULE_FORM);
+        proTableRef?.value?.getTableList();
+    }
+};
+//导出接口
+const getMallUpExport = async () => {
+    const result = await getMallUpExportApi({
+        ...proTableRef?.value?.searchParam,
+        ...proTableRef?.value?.pageable
+    });
+    await useExport(result);
+};
+//删除
+const getMallDel = (id: any) => {
+    messageBox("你确定要删除?", async () => {
+        const result = await getMallDelApi(id);
+        if (result?.code === 0) {
+            const { msg } = result;
+            useMsg("success", msg);
+            proTableRef?.value?.getTableList();
+        }
+    });
+};
+//按钮点击事件
+const handleBtnClick = (type: any, row: any) => {
+    dataStore.selectRow = row;
+    //编辑
+    if (type === "编辑") {
+        dataStore.visible = true;
+        dataStore.title = "编辑产品推荐";
+        getMallDetails(row.id);
+        return;
+    }
+    //删除
+    if (type === "删除") {
+        getMallDel(row.id);
+    }
+};
+//导出
+const handleExport = () => {
+    getMallUpExport();
+};
+</script>
+
+<style scoped></style>

src/views/webManagement/commodity/utils/edit/index.ts

@@ -0,0 +1,4 @@
+import { handleSubmit } from "./submit";
+import { handleReset } from "./reset";
+import { initDetailParams } from "./initDetailParams";
+export { handleSubmit, handleReset, initDetailParams };

src/views/webManagement/commodity/utils/edit/initDetailParams.ts

@@ -0,0 +1,91 @@
+import { cloneDeep } from "lodash-es";
+// import { convertSpanToDiv } from "@/utils/convertSpanToDiv";
+const hasIdRecursive = (data: any, targetId: any) => {
+    for (let i = 0; i < data.length; i++) {
+        const item = data[i];
+        if (item.id === targetId) {
+            return true;
+        }
+        if (item.children && item.children.length > 0) {
+            if (hasIdRecursive(item.children, targetId)) {
+                return true;
+            }
+        }
+    }
+    return false;
+};
+
+const htmlDecode = (html: any) => {
+    let e: any = document.createElement("div");
+    e.innerHTML = html;
+
+    // 关键：在解码后添加样式处理
+    const detailAllElements = e.querySelectorAll(".o_detail_all");
+    detailAllElements.forEach((detailAll: HTMLElement) => {
+        // 为文字类子元素添加居中样式
+        let textElements: any = [
+            ...Array.from(detailAll.querySelectorAll<HTMLElement>(".o_detail_text")),
+            ...Array.from(detailAll.querySelectorAll<HTMLElement>(".o_detail_small")),
+            ...Array.from(detailAll.querySelectorAll<HTMLElement>(".o_detail_title"))
+        ];
+
+        textElements.forEach((el: any) => {
+            // 保留原有样式，追加居中样式（避免覆盖已有样式）
+            el.style.textAlign = "center";
+            // 如果需要强制覆盖，可添加 !important
+            // el.style.textAlign = 'center !important';
+        });
+    });
+
+    if (e.childNodes.length > 1) {
+        return e.innerHTML;
+    } else {
+        return e.childNodes[0].innerHTML;
+    }
+};
+
+//将参数分离
+export const initDetailParams = (dataStore: any, data: any, editorRef: any) => {
+    let is = hasIdRecursive(dataStore.options, data.category_id);
+    //基本信息
+    dataStore.basicInfoRuleForm = cloneDeep({
+        name: data.name,
+        short_name: data.short_name,
+        spu: data.spu,
+        is: is,
+        category_id1: is ? data.category_id : data.category_name,
+        category_id: data.category_id,
+        category_name: data.category_name,
+        params: data.params,
+        sort: data.sort,
+        is_show: data.is_show,
+        is_new: data.is_new,
+        is_hot: data.is_hot,
+        is_sale: data.is_sale,
+        status: data.status,
+        seo_title: data.seo_title,
+        seo_keywords: data.seo_keywords,
+        seo_desc: data.seo_desc,
+        stock_qty: data.stock_qty,
+        id: data.id
+    });
+
+    //详情
+    if (!data.detail) {
+        dataStore.detail = "";
+        editorRef?.value?.clearEditor(); // 调用子组件的清空方法
+    } else {
+        dataStore.detail = htmlDecode(data.detail); //htmlDecode(data.detail);
+    }
+
+    //图片
+    dataStore.imgInfoData.cover_image = data.cover_image;
+    dataStore.imgInfoData.video_url = data.video_url;
+    dataStore.imgInfoData.skus = data.skus;
+    dataStore.imgInfoData.video_img = data.video_img;
+
+    //相关信息及下载
+    if (data.related) {
+        dataStore.relatedTableData = cloneDeep(data.related);
+    }
+};

src/views/webManagement/commodity/utils/edit/reset.ts

@@ -0,0 +1,22 @@
+import { getProductDetailsApi } from "@/api/modules/productList";
+import { useMsg } from "@/hooks/useMsg";
+import { messageBox } from "@/utils/messageBox";
+// import { cloneDeep } from "lodash-es";
+import { initDetailParams } from "./initDetailParams";
+//详情(重置,重新获取一下详情)
+const getProductDetails = async (dataStore: any, editorRef: any) => {
+    const { id } = dataStore.basicInfoRuleForm;
+    const result = await getProductDetailsApi(id);
+    if (result?.code === 0) {
+        const { data } = result;
+
+        initDetailParams(dataStore, data, editorRef);
+        useMsg("success", "重置成功 !");
+    }
+};
+
+export const handleReset = (dataStore: any, editorRef?: any) => {
+    messageBox("该操作会将数据重置为初始状态", () => {
+        getProductDetails(dataStore, editorRef);
+    });
+};

src/views/webManagement/commodity/utils/edit/submit.ts

@@ -0,0 +1,78 @@
+import { useMsg } from "@/hooks/useMsg";
+import { getProductEditUpApi } from "@/api/modules/productList";
+import { cloneDeep } from "lodash-es";
+const WARN: any = {
+    name: "产品名称不能为空 !",
+    spu: "型号不能为空 !",
+    category_id: "产品分类不能为空 !",
+    sort: "产品排序不能为空 !"
+};
+//警告
+const warnFunction = (data: any) => {
+    if (!data.name) {
+        useMsg("warning", WARN["name"]);
+        return false;
+    }
+    if (!data.spu) {
+        useMsg("warning", WARN["spu"]);
+        return false;
+    }
+    if (!data.category_id) {
+        useMsg("warning", WARN["category_id"]);
+        return false;
+    }
+    if (!data.name) {
+        useMsg("warning", WARN["sort"]);
+        return false;
+    }
+    return true;
+};
+
+//更新
+const getProductEditUp = async (params: any) => {
+    const result: any = await getProductEditUpApi(params);
+    if (result?.code === 0) {
+        useMsg("success", result?.msg);
+        // montageImg(imgInfoRef);
+    }
+};
+export const handleSubmit = async (infoRef: any, imgInfoRef: any, dataStore: any) => {
+    let is = await warnFunction(infoRef.ruleForm);
+    if (!is) {
+        return false;
+    }
+    //相关信息及下载(过滤掉没有id的对象)
+    let relatedData = dataStore.relatedTableData.filter((item: any) => {
+        return item.related_product_id;
+    });
+
+    const { video_img, video_url, cover_image, skus } = imgInfoRef.data;
+
+    //不要直接去修改skus的数据类型,这里的skus是和表格绑定的
+    let skusClone = cloneDeep(skus);
+    skusClone.forEach((item: any) => {
+        let arr: any = [];
+        item.photo_album_clone.forEach((it: any) => {
+            arr.push(it.url);
+        });
+        item.photo_album = arr;
+        item.attrs = item.attrs;
+        // delete item.photo_albumClone;
+    });
+    console.log(skusClone, "=skusClone=");
+    let skusCloneStr = JSON.stringify(skusClone);
+    console.log(typeof skusCloneStr);
+
+    const params = {
+        ...infoRef.ruleForm,
+        cover_image,
+        video_url,
+        video_img,
+        skus: skusCloneStr,
+        detail: dataStore.detail,
+        related: JSON.stringify(relatedData) || []
+    };
+
+    console.log(params, "===========params=============");
+    getProductEditUp(params);
+};

src/views/webManagement/menu/index.vue

@@ -269,6 +269,8 @@ const getMenusListDetails = async (id: any) => {
 };
 //更新
 const getMenusListUp = async () => {
+    let menu_ability_permission = JSON.stringify(dataStore.editRuleForm.menu_ability_permission);
+    dataStore.editRuleForm.menu_ability_permission = menu_ability_permission;
     const result = await getMenusListUpApi(dataStore.editRuleForm);
     if (result?.code === 0) {
         useMsg("success", result?.msg);

src/views/webManagement/nav/constant/edit.ts

@@ -27,7 +27,12 @@ export const EDIT_FORM_DATA: FormItem[] = [
         type: "input",
         label: "导航名称: "
     },
-
+    {
+        prop: "desc",
+        placeholder: "请输入",
+        type: "input",
+        label: " 导航介绍: "
+    },
     {
         prop: "nav_id",
         placeholder: "请输入",
@@ -89,6 +94,11 @@ export const EDIT_FORM_DATA: FormItem[] = [
         placeholder1: "请选择",
         prop1: "link_to",
         options: []
+    },
+    {
+        prop: "image",
+        type: "upImg",
+        label: "图片: "
     }
 ];
 export const EDIT_RULE_FORM = {

src/views/webManagement/nav/index.vue

@@ -196,7 +196,7 @@ const getNavClassList = async () => {
         result?.data.forEach((item: any) => {
             arr.push({ value: item.id, label: item.name });
         });
-        dataStore.editFormData[1].options = dataStore.searchFormData[1].options = arr;
+        dataStore.editFormData[2].options = dataStore.searchFormData[1].options = arr;
     }
 };
 getNavClassList();
@@ -292,8 +292,8 @@ const getItemsList = async () => {
     if (result?.code === 0) {
         let dataClone = cloneDeep(result?.data);
         dataStore.tableData = cloneDeep(dataClone);
-        dataStore.editFormData[2].options = addLabelRecursively(cloneDeep(dataClone));
+        dataStore.editFormData[3].options = addLabelRecursively(cloneDeep(dataClone));
-        dataStore.editFormData[2].options.unshift({ value: 0, label: "无" });
+        dataStore.editFormData[3].options.unshift({ value: 0, label: "无" });
     }
 };
 getItemsList();