feat: 🚀 提示框层级调整

src/api/modules/downloadClass.ts

@@ -27,5 +27,5 @@ export const getCategorySortApi = (params: any) => {
 };
 //下载分类下拉列表
 export const getCategorysApi = (params?: any) => {
-    return http.get<any>(`/attachment/categorys`, params);
+    return http.get<any>(`/attachment/tree`, params);
 };

src/components/Upload/UploadImgs.vue

@@ -75,7 +75,11 @@ const $router = useRouter();
 const routerValueName: string = $router.currentRoute.value.name as string;
 const routerObj: any = {
     articleEditIndex: "article",
-    productEditIndex: "product"
+    productEditIndex: "product",
+    bannerListIndex: "banner",
+    downloadListIndex: "download",
+    videoListIndex: "video",
+    QAListIndex: "QA"
 };
 const routerName = ref(routerObj[routerValueName]);
 // 获取 el-form 组件上下文

src/components/Upload/UploadVideo.vue

@@ -60,7 +60,10 @@ const routerValueName: string = $router.currentRoute.value.name as string;
 const routerObj: any = {
     articleEditIndex: "article",
     productEditIndex: "product",
-    videoListIndex: "video"
+    bannerListIndex: "banner",
+    downloadListIndex: "download",
+    videoListIndex: "video",
+    QAListIndex: "QA"
 };
 const routerName = ref(routerObj[routerValueName]);
 

src/components/WangEditor/index.vue

@@ -3,7 +3,7 @@
         <Toolbar v-if="!hideToolBar" class="editor-toolbar" :editor="editorRef" :default-config="toolbarConfig" :mode="mode" />
         <Editor
             v-model="valueHtml"
-            class="editor-content'"
+            class="editor-content"
             :style="{ height }"
             :mode="mode"
             :default-config="editorConfig"
@@ -32,7 +32,11 @@ const $router = useRouter();
 const routerValueName: string = $router.currentRoute.value.name as string;
 const routerObj: any = {
     articleEditIndex: "article",
-    productEditIndex: "product"
+    productEditIndex: "product",
+    bannerListIndex: "banner",
+    downloadListIndex: "download",
+    videoListIndex: "video",
+    QAListIndex: "QA"
 };
 const routerName = ref(routerObj[routerValueName]);
 // 接收父组件参数，并设置默认值
@@ -108,7 +112,8 @@ props.editorConfig.MENU_CONF!["uploadImage"] = {
             const result = await uploadImg(formData, routerName.value);
             if (result?.code === 0) {
                 const { data } = result;
-                insertFn(import.meta.env.VITE_APP_API_BASE_UPLOAD_URL + data.url);
+                console.log(data, "==============data====================");
+                insertFn(import.meta.env.VITE_APP_API_BASE_UPLOAD_URL + data.path);
             }
         } catch (error) {
             console.log(error);

src/components/rulesForm/index.vue

@@ -176,6 +176,9 @@
                 <template v-if="item.type === 'treeSelectInput'">
                     <slot />
                 </template>
+                <template v-if="item.type === 'WangEditor'">
+                    <WangEditor v-model:value="_ruleForm[`${item.prop}`]" />
+                </template>
             </el-form-item>
         </template>
     </el-form>

src/styles/element.scss

@@ -268,3 +268,6 @@
     text-overflow: ellipsis;
     white-space: nowrap;
 }
+.el-message__wrapper {
+    z-index: 9999; /* 一个较大的值，确保在抽屉之上 */
+}

src/views/articleManagement/list/index.vue

@@ -13,7 +13,7 @@
             :init-param="dataStore.initParam"
         >
             <template #image="scope">
-                <el-image :src="scope.row.image ? h + scope.row.image : ''" style="width: 60px; height: 60px" />
+                <el-image :src="scope.row.image ? h + scope.row.image : '--'" style="width: 60px; height: 60px" />
             </template>
             <template #enabled="scope">
                 <el-tag type="success" effect="dark">{{ scope.row.enabled === 1 ? "启用" : "禁用" }}</el-tag>

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

@@ -97,7 +97,7 @@ export const EDIT_FORM_DATA: FormItem[] = [
     {
         prop: "desc",
         placeholder: "请输入",
-        type: "textarea",
+        type: "WangEditor",
         label: "Banner描述: "
     },
     {

src/views/bannerManagement/list/index.vue

@@ -30,7 +30,7 @@
         <el-drawer
             v-model="dataStore.visible"
             :show-close="true"
-            :size="640"
+            :size="980"
             :close-on-click-modal="false"
             :close-on-press-escape="false"
             :before-close="handleBeforeClone"

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

@@ -22,7 +22,7 @@ export const EDIT_FORM_DATA: FormItem[] = [
         prop: "name",
         placeholder: "请输入",
         type: "input",
-        label: "文章分类名称: "
+        label: "下载分类名称: "
     },
 
     {
@@ -46,6 +46,13 @@ export const EDIT_FORM_DATA: FormItem[] = [
                 value: 0
             }
         ]
+    },
+    {
+        prop: "pid",
+        placeholder: "请选择",
+        type: "treeSelect",
+        label: "所属分类: ",
+        options: []
     }
 ];
 export const EDIT_RULE_FORM = {

src/views/downloadManagement/class/constant/rules.ts

@@ -1,4 +1,5 @@
 export const RULES = {
     name: [{ required: true, message: "文章分类名称不能为空 ! ", trigger: "blur" }],
-    sort: [{ required: true, message: "下载分类排序不能为空 ! ", trigger: "blur" }]
+    sort: [{ required: true, message: "下载分类排序不能为空 ! ", trigger: "blur" }],
+    pid: [{ required: true, message: "所属分类不能为空 ! ", trigger: "change" }]
 };

src/views/downloadManagement/class/index.vue

@@ -4,65 +4,78 @@
         <div style="padding-bottom: 16px">
             <el-button type="primary" @click="handleAdd"> 添加分类 </el-button>
         </div>
-        <ProTable
+
-            ref="proTableRef"
+        <div class="card table-main">
-            :formData="dataStore.formData"
+            <SearchForm :search="search" :reset="reset" :formData="dataStore.formData" :search-param="dataStore.ruleForm" />
-            :columns="dataStore.columns"
+            <el-table
-            :request-api="getCategoryListApi"
+                :data="dataStore.tableData"
-            :init-param="dataStore.initParam"
+                style="width: 100%; margin-bottom: 20px; font-size: 14px"
-        >
+                row-key="id"
-            <template #image="scope">
+                border
-                <el-image :src="scope.row.image ? h + scope.row.image : ''" style="width: 60px; height: 60px" />
+                default-expand-all
-            </template>
+            >
-            <template #status="scope">
+                <el-table-column prop="id" label="id" />
-                <el-tag type="success" effect="dark">{{ scope.row.status }}</el-tag>
+                <el-table-column prop="name" label="下载分类名称" />
-            </template>
+                <el-table-column prop="sort" label="下载分类排序">
-            <template #sort="scope">
+                    <template #default="{ row }">
-                <el-input v-model="scope.row.sort" @blur="handleBlur(scope.row)" @input="handleInput(scope.row)"></el-input>
+                        <div @click.stop="">
-            </template>
+                            <el-input v-model="row.sort" @blur="handleBlur(row)" @input="handleInput(row)" />
-            <template #operation="scope">
+                        </div>
-                <el-button size="small" type="primary" @click="handleBtnClick('编辑', scope.row)">编辑</el-button>
+                    </template>
-                <el-button size="small" type="primary" @click="handleBtnClick('添加', scope.row)">添加下载</el-button>
+                </el-table-column>
-                <el-button size="small" type="danger" @click="handleBtnClick('删除', scope.row)">删除</el-button>
+                <el-table-column prop="is_show" label="是否显示">
-            </template>
+                    <template #default="{ row }">
-        </ProTable>
+                        {{ row.is_show === 1 ? "✔️" : "❌" }}
-        <el-drawer
+                    </template>
-            v-model="dataStore.visible"
+                </el-table-column>
-            :show-close="true"
+                <el-table-column label="操作" :width="350">
-            :size="600"
+                    <template #default="scope">
-            :close-on-click-modal="false"
+                        <el-button size="small" type="primary" @click="handleBtnClick('编辑', scope.row)">编辑</el-button>
-            :close-on-press-escape="false"
+                        <el-button size="small" type="primary" @click="handleBtnClick('添加', scope.row)">添加下载</el-button>
-            :before-close="handleBeforeClone"
+                        <el-button size="small" type="danger" @click="handleBtnClick('删除', scope.row)">删除</el-button>
-            destroy-on-close
+                    </template>
-        >
+                </el-table-column>
-            <template #header="{ titleId, titleClass }">
+            </el-table>
-                <h4 :id="titleId" :class="titleClass">{{ dataStore.title }}</h4>
+
-            </template>
+            <el-drawer
-            <div>
+                v-model="dataStore.visible"
-                <rulesForm
+                :show-close="true"
-                    :ruleForm="dataStore.editRuleForm"
+                :size="600"
-                    :formData="dataStore.editFormData"
+                :close-on-click-modal="false"
-                    :rules="dataStore.rules"
+                :close-on-press-escape="false"
-                    ref="formRef"
+                :before-close="handleBeforeClone"
-                />
+                destroy-on-close
-            </div>
+            >
-            <template #footer>
+                <template #header="{ titleId, titleClass }">
-                <div style="flex: auto">
+                    <h4 :id="titleId" :class="titleClass">{{ dataStore.title }}</h4>
-                    <el-button @click="handleResetClick">重置</el-button>
+                </template>
-                    <el-button type="primary" @click="handleConfirmClick">确认</el-button>
+                <div>
+                    <rulesForm
+                        :ruleForm="dataStore.editRuleForm"
+                        :formData="dataStore.editFormData"
+                        :rules="dataStore.rules"
+                        ref="formRef"
+                        @handleSelectChangeEmits="handleSelectChangeEmits"
+                    />
                 </div>
-            </template>
+                <template #footer>
-        </el-drawer>
+                    <div style="flex: auto">
+                        <el-button @click="handleResetClick">重置</el-button>
+                        <el-button type="primary" @click="handleConfirmClick">确认</el-button>
+                    </div>
+                </template>
+            </el-drawer>
+        </div>
     </div>
 </template>
 
 <script setup lang="ts" name="downloadClassListIndex">
-import ProTable from "@/components/ProTable/index.vue";
+// 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 { integerRexg } from "@/utils/regexp/index";
-import { h } from "@/utils/url";
+// import { h } from "@/utils/url";
 //列表接口
 import {
     getCategoryListApi,
@@ -70,14 +83,14 @@ import {
     getCategorySortApi,
     getCategorySaveApi,
     getCategoryReadApi,
-    getCategoryUpdateApi
+    getCategoryUpdateApi,
+    getCategorysApi
 } from "@/api/modules/downloadClass";
 //深拷贝方法
 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 $router = useRouter();
 // 数据源
@@ -89,11 +102,57 @@ const dataStore = reactive<any>({
     editFormData: cloneDeep(EDIT_FORM_DATA), //抽屉表单配置项
     initParam: cloneDeep(RULE_FORM), // 初始化搜索条件|重置搜索条件
     ruleForm: cloneDeep(RULE_FORM), // 搜索參數
-    formData: FORM_DATA, //搜索配置项
+    formData: FORM_DATA, //搜索配置项 ruleForm formData
     visible: false,
+    tableData: [],
     selectRow: {} //当前选择的row
 });
+const getCategoryList = async () => {
+    const result = await getCategoryListApi(dataStore.ruleForm);
+    if (result?.code === 0) {
+        dataStore.tableData = result?.data;
+    }
+};
+getCategoryList();
+//search reset
+const search = () => {
+    getCategoryList();
+};
+const reset = () => {
+    for (let key in dataStore.ruleForm) {
+        dataStore.ruleForm[key] = "";
+    }
+    getCategoryList();
+};
 
+const handleSelectChangeEmits = (params: any) => {
+    const { id } = params;
+    dataStore.editRuleForm.pid = id;
+};
+
+const addLabelValue = (arr: any) => {
+    return arr.map((item: any) => {
+        // 为当前对象添加 label 和 value 属性
+        const newItem = { ...item };
+        newItem.label = newItem.name;
+        newItem.value = newItem.id;
+
+        // 如果有子对象，递归调用 addLabelValue 处理子对象
+        if (newItem.children && Array.isArray(newItem.children)) {
+            newItem.children = addLabelValue(newItem.children);
+        }
+        return newItem;
+    });
+};
+//分类下拉
+const getCategorys = async () => {
+    const result = await getCategorysApi();
+    if (result?.code === 0) {
+        dataStore.editFormData[3].options = addLabelValue(result?.data);
+        dataStore.editFormData[3].options.unshift({ value: 0, label: "无" });
+    }
+};
+getCategorys();
 //抽屉确认
 const handleConfirmClick = () => {
     if (!formRef.value!.ruleFormRef) return;
@@ -156,7 +215,7 @@ const getCategoryUpdate = async () => {
         useMsg("success", result?.msg);
         dataStore.visible = false;
         dataStore.editRuleForm = cloneDeep(EDIT_RULE_FORM);
-        proTableRef?.value?.getTableList();
+        getCategoryList();
     }
 };
 //详情
@@ -173,7 +232,7 @@ const getCategorySave = async () => {
         useMsg("success", result?.msg);
         dataStore.visible = false;
         dataStore.editRuleForm = cloneDeep(EDIT_RULE_FORM);
-        proTableRef?.value?.getTableList();
+        getCategoryList();
     }
 };
 //删除
@@ -183,7 +242,7 @@ const getCategoryDel = (id: any) => {
         if (result?.code === 0) {
             const { msg } = result;
             useMsg("success", msg);
-            proTableRef?.value?.getTableList();
+            getCategoryList();
         }
     });
 };
@@ -200,7 +259,7 @@ const getCategorySort = async (row: any) => {
     const result = await getCategorySortApi({ id: row.id, sort: row.sort });
     useMsg("success", result?.msg);
     if (result?.code === 0) {
-        proTableRef?.value?.getTableList();
+        getCategoryList();
     }
 };
 </script>

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

@@ -29,7 +29,7 @@ export const EDIT_FORM_DATA: FormItem[] = [
     {
         prop: "category_id1",
         placeholder: "请选择",
-        type: "select",
+        type: "treeSelect",
         label: "下载分类: ",
         options: []
     },
@@ -122,6 +122,8 @@ export const EDIT_TABLE_DATA = [
         file_ext: "" //文件格式
     }
 ];
-export const EDIT_RULE_FORM = {};
+export const EDIT_RULE_FORM = {
+    sort: 1
+};
 // editRuleForm: {},
 //editFormData: [],

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

@@ -27,7 +27,7 @@ export const FORM_DATA: FormItem[] = [
     {
         prop: "category_id",
         placeholder: "请选择",
-        type: "select",
+        type: "treeSelect",
         isArray: true,
         label: "下载分类: ",
         options: []

src/views/downloadManagement/list/edit.vue

@@ -240,25 +240,32 @@ const getAttachmentRead = async () => {
 };
 getAttachmentRead();
 const handleSelectChangeEmits = (value: any) => {
-    console.log(value, "========value=========");
     if (value.prop === "category_id1") {
         dataStore.editRuleForm.category_id = value.id;
     }
 };
+
+const addLabelValue = (arr: any) => {
+    return arr.map((item: any) => {
+        // 为当前对象添加 label 和 value 属性
+        const newItem = { ...item };
+        newItem.label = newItem.name;
+        newItem.value = newItem.id;
+
+        // 如果有子对象，递归调用 addLabelValue 处理子对象
+        if (newItem.children && Array.isArray(newItem.children)) {
+            newItem.children = addLabelValue(newItem.children);
+        }
+        return newItem;
+    });
+};
+
 //分类
 const getCategorys = async () => {
     const result = await getCategorysApi({ is_show: 1 });
 
     if (result?.code === 0) {
-        let arr: any[] = [];
+        dataStore.editFormData[1].options = addLabelValue(result?.data);
-        result?.data?.forEach((item: any) => {
-            let obj = {
-                value: item.id,
-                label: item.name
-            };
-            arr.push(obj);
-        });
-        dataStore.editFormData[1].options = arr;
     }
 };
 getCategorys();

src/views/downloadManagement/list/index.vue

@@ -150,20 +150,36 @@ const handleBlur = (row: any) => {
 const handleInput = (row: any) => {
     row.sort = integerRexg(row.sort);
 };
+
+const addLabelValue = (arr: any) => {
+    return arr.map((item: any) => {
+        // 为当前对象添加 label 和 value 属性
+        const newItem = { ...item };
+        newItem.label = newItem.name;
+        newItem.value = newItem.id;
+
+        // 如果有子对象，递归调用 addLabelValue 处理子对象
+        if (newItem.children && Array.isArray(newItem.children)) {
+            newItem.children = addLabelValue(newItem.children);
+        }
+        return newItem;
+    });
+};
+
 const getCategorys = async () => {
     const result = await getCategorysApi();
 
     if (result?.code === 0) {
-        let arr: any[] = [];
+        // let arr: any[] = [];
-        result?.data?.forEach((item: any) => {
+        // result?.data?.forEach((item: any) => {
-            let obj = {
+        //     let obj = {
-                value: item.id,
+        //         value: item.id,
-                label: item.name
+        //         label: item.name
-            };
+        //     };
-            arr.push(obj);
+        //     arr.push(obj);
-        });
+        // });
 
-        dataStore.formData[1].options = arr;
+        dataStore.formData[1].options = addLabelValue(result?.data);
     }
 };
 getCategorys();