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/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

@@ -33,6 +33,7 @@ export const EDIT_FORM_DATA: FormItem[] = [
         type: "input",
         label: "Banner简称: "
     },
+
     {
         prop: "title_txt_color",
         placeholder: "填写RGB值",

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/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[2].options.unshift({ value: 0, label: "无" });
+        dataStore.editFormData[3].options = addLabelRecursively(cloneDeep(dataClone));
+        dataStore.editFormData[3].options.unshift({ value: 0, label: "无" });
     }
 };
 getItemsList();