feat: 🚀 优化富文本多张图片上传

.env.development

@@ -2,7 +2,7 @@ ENV = 'dev'
 
 VITE_APP_API_BASEURL =https://dev.ow.f2b211.com/admapi/v1
 #前端回显图片之类的地址
-VITE_APP_API_BASE_UPLOAD_URL =https://dev.ow.f2b211.com
+VITE_APP_API_BASE_UPLOAD_URL =https://dev.ow.f2b211.com/
 # 本地环境
 VITE_USER_NODE_ENV = development
 

.env.production

@@ -1,11 +1,10 @@
 ENV = 'production'
-VITE_APP_API_BASEURL =  https://opsscmapi.f2b211.com/api/ #请求地址
-
-
+VITE_APP_API_BASEURL =https://orico.com.cn/admapi/v1
+#前端回显图片之类的地址
 # 线上环境
 VITE_USER_NODE_ENV = production
 #前端回显图片之类的地址
-VITE_APP_API_BASE_UPLOAD_URL =https://dev.ow.f2b211.com/
+VITE_APP_API_BASE_UPLOAD_URL =https://orico.com.cn/
 
 # 是否启用 gzip 或 brotli 压缩打包，如果需要多个压缩规则，可以使用 “,” 分隔
 # Optional: gzip | brotli | none

src/components/Editor/index.vue

@@ -2,12 +2,12 @@
     <el-upload
         :id="uuid"
         action="#"
-        :multiple="false"
+        :multiple="true"
         :show-file-list="false"
         :http-request="handleHttpUpload"
         :before-upload="handleBeforeUpload"
         class="editor-img-uploader"
-        accept=".jpeg,.jpg,.png"
+        accept=".jpeg,.jpg,.png,.gif"
     >
         <i ref="uploadRef" class="Plus editor-img-uploader"></i>
     </el-upload>

src/components/Upload/UploadImg.vue

@@ -73,7 +73,7 @@ const props = withDefaults(defineProps<UploadFileProps>(), {
     drag: true,
     disabled: false,
     fileSize: 5,
-    fileType: () => ["image/jpeg", "image/png", "image/gif"],
+    fileType: () => ["image/jpeg", "image/png", "image/gif", "image/webp"],
     height: "150px",
     width: "150px",
     borderRadius: "8px"
@@ -151,7 +151,9 @@ const editImg = () => {
  * @param rawFile 选择的文件
  * */
 const beforeUpload: UploadProps["beforeUpload"] = rawFile => {
+    // console.log(rowFile.type, "=============1111111111");
     const imgSize = rawFile.size / 1024 / 1024 < props.fileSize;
+
     const imgType = props.fileType.includes(rawFile.type as File.ImageMimeType);
 
     if (!imgType)

src/components/Upload/UploadImgs.vue

@@ -66,7 +66,7 @@ const props = withDefaults(defineProps<UploadFileProps>(), {
     disabled: false,
     limit: 9,
     fileSize: 5,
-    fileType: () => ["image/jpeg", "image/png", "image/gif"],
+    fileType: () => ["image/jpeg", "image/png", "image/gif", "image/webp"],
     height: "150px",
     width: "150px",
     borderRadius: "8px"

src/components/WangEditor/index.vue

@@ -29,7 +29,6 @@ const handleCreated = (editor: any) => {
     editorRef.value = editor;
 };
 
-console.log(editorRef.value, "=editorRef.value=");
 const $router = useRouter();
 const routerValueName: string = $router.currentRoute.value.name as string;
 const routerObj: any = {

src/components/rulesForm/index.vue

@@ -159,7 +159,7 @@
                         show-checkbox
                         check-strictly
                         @change="handleSelectChange(_ruleForm[`${item.prop}`], item.prop)"
-                        style="max-width: 240px"
+                        style="max-width: 340px"
                     />
                 </template>
                 <template v-if="item.type === 'treeSelects'">
@@ -171,7 +171,7 @@
                         show-checkbox
                         check-strictly
                         check-on-click-node
-                        style="width: 240px"
+                        style="width: 340px"
                     />
                 </template>
                 <template v-if="item.type === 'treeSelectInput'">

src/styles/element.scss

@@ -271,5 +271,5 @@
     white-space: nowrap;
 }
 .el-message__wrapper {
-    z-index: 9999; /* 一个较大的值，确保在抽屉之上 */
+    z-index: 9999 !important; /* 一个较大的值，确保在抽屉之上 */
 }

src/utils/outLogin.ts

@@ -4,8 +4,8 @@ import { useUserStore } from "@/stores/modules/user";
 //不同环境的login地址
 const LOGIN_OBJ: any = {
     development: "http://localhost:8080/admin/login", //开发环境
-    test: "https://dev.ow.admin.f2b211.com/", //测试环境
-    production: "http://localhost:8080/login" //生产环境
+    test: "https://dev.orico.com.cn/admin/login", //测试环境
+    production: "https://orico.com.cn/admin/login" //生产环境
 };
 /**
 /**

src/views/articleManagement/class/index.vue

@@ -6,13 +6,7 @@
         </div>
         <div class="card table-main">
             <SearchForm :search="search" :reset="reset" :formData="dataStore.formData" :search-param="dataStore.ruleForm" />
-            <el-table
-                :data="dataStore.tableData"
-                style="width: 100%; margin-bottom: 20px; font-size: 14px"
-                row-key="id"
-                border
-                default-expand-all
-            >
+            <el-table :data="dataStore.tableData" style="width: 100%; margin-bottom: 20px; font-size: 14px" row-key="id" border>
                 <el-table-column prop="id" label="id" />
                 <el-table-column prop="name" label="分类名称" />
                 <el-table-column prop="sort" label="分类排序">

src/views/articleManagement/list/index.vue

@@ -66,6 +66,7 @@ const getArticleClassData = async () => {
     const result = await getArticleClassDataApi();
     if (result?.code === 0) {
         const { data } = result;
+        console.log(data, "============>>>>>");
         dataStore.formData[1].options = addLabelValue(data);
     }
 };

src/views/articleManagement/recycle/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/bannerManagement/list/constant/edit.ts

@@ -70,7 +70,11 @@ export const EDIT_FORM_DATA: FormItem[] = [
         type: "upImg",
         label: "Banner图片: "
     },
-
+    {
+        prop: "extra_image",
+        type: "upImg",
+        label: "悬浮图: "
+    },
     {
         prop: "banner_id",
         placeholder: "请选择",
@@ -157,7 +161,7 @@ export const EDIT_FORM_DATA1: FormItem[] = [
             },
             {
                 label: "否",
-                value: 0
+                value: -1
             }
         ]
     },
@@ -166,7 +170,11 @@ export const EDIT_FORM_DATA1: FormItem[] = [
         type: "upImg",
         label: "Banner图片: "
     },
-
+    // {
+    //     prop: "image1",
+    //     type: "upImg",
+    //     label: "Banner图片1: "
+    // },
     {
         prop: "banner_id",
         placeholder: "请选择",
@@ -211,7 +219,8 @@ export const EDIT_FORM_DATA1: FormItem[] = [
 
 export const EDIT_RULE_FORM = {
     type: "image",
-    sort: 1
+    sort: 1,
+    status: 1
 };
 // editRuleForm: {},
 //editFormData: [],

src/views/bannerManagement/list/index.vue

@@ -140,7 +140,7 @@ const getProductCategoryList = async () => {
     const result = await getProductCategoryListApi();
     if (result?.code === 0) {
         let dataClone: any = cloneDeep(result?.data);
-        dataStore.editFormData[6].options = addLabelValue(dataClone);
+        dataStore.editFormData[7].options = addLabelValue(dataClone);
     }
 };
 
@@ -189,10 +189,10 @@ const getSystemUrls = async (node: any, resolve: any) => {
         }
     } else {
         //第二次请求
-        if (node.data.children) {
-            resolve(node.data.children);
+        if (node?.data?.children) {
+            resolve(node?.data?.children);
         }
-        if (!node.data.children.length && !node.data.url && node.level > 1) {
+        if (!node?.data?.children?.length && !node?.data?.url && node?.level > 1) {
             const [link_to, id] = node?.data?.value?.split("/");
             const result = await getSystemUrlsApi({ link_to, id });
             if (result?.code === 0) {
@@ -222,17 +222,16 @@ const getBannerRead = async (id: any) => {
     dataStore.visible = true;
     const result = await getBannerReadApi(id);
     if (result?.code === 0) {
-        dataStore.editRuleForm = result?.data;
-        // setImgOrVideo(result);
-        await setImgOrVideo(result);
-        dataStore.editRuleForm = await result?.data;
+        setImgOrVideo(result);
         getProductCategoryList();
-
+        nextTick(() => {
+            dataStore.editRuleForm = result?.data;
             if (dataStore.editRuleForm.link && dataStore.editRuleForm.link_to) {
                 let { id, name, link } = dataStore.editRuleForm.link_echo_data;
                 if (!id || !name || !link) {
                     return;
                 }
+                console.log("1232323");
                 let obj: any = {
                     label: name, // 确保这里的name是你想要显示的文本
                     value: `${dataStore.editRuleForm.link_to}` + "/" + `${id}` + "/" + `${name}`,
@@ -245,6 +244,7 @@ const getBannerRead = async (id: any) => {
                 selectedNodes.value = obj.value;
                 dataStore.data = data;
             }
+        });
     }
 };
 const handleCheck = (checkedNodes: any, values: any) => {
@@ -274,18 +274,19 @@ const getBannerUp = async () => {
         formRef!.value!.ruleFormRef.resetFields();
         proTableRef?.value?.getTableList();
         dataStore.isFirstRequest = true;
+        useMsg("success", result?.msg);
     }
 };
 //详情里的分类
 const getBannerClassEditList = async () => {
     const result = await getBannerClassListApi();
     if (result?.code === 0) {
-        // let arr: any = [];
-        // result?.data?.forEach((item: any) => {
-        //     arr.push({ value: item.id, label: item.name });
-        // });
         dataStore.formData[1].options = addLabelValue(result?.data);
-        dataStore.editFormData[5].options = addLabelValue(result?.data);
+        dataStore.editFormData.forEach((item: any) => {
+            if (item.prop === "banner_id") {
+                item.options = addLabelValue(result?.data);
+            }
+        });
     }
 };
 getBannerClassEditList();
@@ -343,6 +344,9 @@ const handleResetClick = () => {
 const handleAdd = () => {
     dataStore.title = "添加Banner";
     dataStore.visible = true;
+    selectedNodes.value = "";
+    dataStore.editRuleForm = cloneDeep(EDIT_RULE_FORM);
+    (dataStore.editFormData = cloneDeep(EDIT_FORM_DATA)), // 抽屉表单配置项
         getBannerClassEditList();
     // getBannerClassList();
     getProductCategoryList();
@@ -350,6 +354,7 @@ const handleAdd = () => {
 // 抽屉关闭前的钩子
 const handleBeforeClone = () => {
     dataStore.editRuleForm = cloneDeep(EDIT_RULE_FORM);
+    (dataStore.editFormData = cloneDeep(EDIT_FORM_DATA)), // 抽屉表单配置项
         resetFields();
     dataStore.visible = false;
     dataStore.isFirstRequest = true;

src/views/downloadManagement/class/index.vue

@@ -7,13 +7,7 @@
 
         <div class="card table-main">
             <SearchForm :search="search" :reset="reset" :formData="dataStore.formData" :search-param="dataStore.ruleForm" />
-            <el-table
-                :data="dataStore.tableData"
-                style="width: 100%; margin-bottom: 20px; font-size: 14px"
-                row-key="id"
-                border
-                default-expand-all
-            >
+            <el-table :data="dataStore.tableData" style="width: 100%; margin-bottom: 20px; font-size: 14px" row-key="id" border>
                 <el-table-column prop="id" label="id" />
                 <el-table-column prop="name" label="下载分类名称" />
                 <el-table-column prop="sort" label="下载分类排序">

src/views/productManagement/classList/index.vue

@@ -8,13 +8,8 @@
                 :formData="dataStore.searchFormData"
                 :search-param="dataStore.searchParam"
             />
-            <el-table
-                :data="dataStore.tableData"
-                style="width: 100%; margin-bottom: 20px; font-size: 14px"
-                row-key="id"
-                border
-                default-expand-all
-            >
+            <!-- default-expand-all -->
+            <el-table :data="dataStore.tableData" style="width: 100%; margin-bottom: 20px; font-size: 14px" row-key="id" border>
                 <el-table-column prop="id" label="id" />
                 <el-table-column prop="name" label="分类名称" />
                 <el-table-column prop="sort" label="分类排序">
@@ -154,7 +149,6 @@ const getArticleCategorySave = async (params: any) => {
 };
 
 const handleSelectChangeEmits = (value: any) => {
-    console.log(value, "===============value1111111============");
     if (value.prop === "pid") {
         dataStore.ruleForm.pid = value.id;
     }

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

@@ -9,7 +9,7 @@
                 <el-input v-model="_ruleFormParam.short_name" style="width: 440px" />
             </el-form-item>
             <el-form-item label="型号" required>
-                <el-input v-model="_ruleFormParam.spu" style="width: 440px" />
+                <el-input v-model="_ruleFormParam.spu" style="width: 440px" disabled />
             </el-form-item>
             <el-form-item label="产品分类" style="width: 440px" required>
                 <!-- <el-input v-model="_ruleFormParam.category_id" /> -->

src/views/productManagement/list/edit.vue

@@ -110,6 +110,7 @@ getProductAttrsList();
 const getProductList = async (query: any) => {
     const result: any = await getProductListApi({
         spu: query,
+        is_show: 1,
         page: 1,
         size: 1000
     });
@@ -165,6 +166,7 @@ const handleRelatedAdd = () => {
 };
 //相关信息及下载远程搜索
 const handleRemote = debounce((params: any) => {
+    console.log(params, "============>>>>");
     getProductList(params.query);
 }, 800);
 //产品属性接口

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

@@ -69,7 +69,7 @@ export const handleSubmit = async (infoRef: any, imgInfoRef: any, dataStore: any
         video_url,
         video_img,
         skus: skusCloneStr,
-        detail: dataStore.details,
+        detail: dataStore.detail,
         related: JSON.stringify(relatedData) || []
     };
 

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

@@ -21,7 +21,7 @@ interface FormItem {
 export const EDIT_FORM_DATA: FormItem[] = [
     {
         prop: "name",
-        placeholder: "请输入",
+        placeholder: "以“.”分隔，可对同分组内配置再次分组，支持多维",
         type: "input",
         label: "配置标识: "
     },
@@ -60,7 +60,8 @@ export const EDIT_FORM_DATA: FormItem[] = [
     {
         prop: "extra",
         type: "textarea",
-        label: "配置项: "
+        label: "配置项: ",
+        placeholder: "选项型配置时：选项值:选项名['联动配置项的“配置标识”', ......]，联动配置项为可选"
     },
     {
         prop: "remark",

src/views/webManagement/nav/index.vue

@@ -132,7 +132,7 @@ const dataStore = reactive<any>({
     isFirstRequest: true,
     selectRow: {} //当前选择的row
 });
-const selectedNodes = ref(null);
+const selectedNodes = ref("");
 const treeRef = ref(null);
 // 配置 tree-select 的属性
 const treeProps = {
@@ -202,11 +202,17 @@ const getNavClassList = async () => {
 getNavClassList();
 //详情接口
 const getItemsRead = async (id: any) => {
+    selectedNodes.value = "";
+    dataStore.data = [];
+    dataStore.title = "编辑Banner";
+    dataStore.visible = true;
+
     const result = await getItemsReadApi(id);
     dataStore.title = "编辑导航";
     dataStore.visible = true;
     if (result?.code === 0) {
         dataStore.editRuleForm = result?.data;
+        console.log(dataStore.editRuleForm, "===========>>>>");
         if (dataStore.editRuleForm.link && dataStore.editRuleForm.link_to) {
             let { id, name, link } = dataStore.editRuleForm.link_echo_data;
             if (!id || !name || !link) {
@@ -353,9 +359,12 @@ const handleResetClick = () => {
 const handleAdd = () => {
     dataStore.title = "添加导航";
     dataStore.visible = true;
+    selectedNodes.value = "";
 };
 const resetForm = () => {
     dataStore.editRuleForm = cloneDeep(EDIT_RULE_FORM);
+    // dataStore.editRuleForm.link_to = "";
+    // dataStore.editRuleForm.link = "";
 };
 //抽屉关闭前的钩子
 const handleBeforeClone = () => {

src/views/webManagement/set/components/RecursiveForm.vue

@@ -11,12 +11,13 @@
                     {{ extraItem.name }}
                 </el-radio>
             </el-radio-group>
+            <span style="margin-left: 20px; color: #999999" v-if="config.remark">({{ config.remark }})</span>
         </el-form-item>
         <el-form-item :label="config.title" v-if="config.type === 'text'">
-            <el-input v-model="config.value" style="width: 400px"> </el-input>
+            <el-input v-model="config.value" style="width: 400px" :placeholder="config.remark"> </el-input>
         </el-form-item>
         <el-form-item v-if="config.type === 'select'" :label="config.title">
-            <el-select v-model="config.value" placeholder="请选择">
+            <el-select v-model="config.value" :placeholder="config.remark">
                 <el-option
                     v-for="extraItem in config.extra"
                     :key="extraItem.value"
@@ -32,12 +33,14 @@
                     {{ extraItem.name }}
                 </el-checkbox>
             </el-checkbox-group>
+            <span style="margin-left: 20px; color: #999999" v-if="config.remark">({{ config.remark }})</span>
         </el-form-item>
         <el-form-item v-if="config.type === 'image'" :label="config.title">
             <UploadImg v-model:image-url="config.value" />
         </el-form-item>
         <el-form-item v-if="config.type === 'textarea'" :label="config.title">
-            <el-input v-model="config.value" type="textarea" :rows="8" style="width: 400px"> </el-input>
+            <el-input v-model="config.value" type="textarea" :rows="8" style="width: 400px" :placeholder="config.remark">
+            </el-input>
         </el-form-item>
 
         <el-form-item v-if="config.type === 'file'" :label="config.title">

src/views/webManagement/set/index.vue

@@ -8,7 +8,7 @@
         <div class="card table-main">
             <el-tabs v-model="activeName" class="demo-tabs">
                 <el-tab-pane :label="item.name" :name="item.name" v-for="(item, index) in dataStore.list" :key="index">
-                    <el-form :model="dataStore.formData" label-width="120px">
+                    <el-form :model="dataStore.formData" label-position="top">
                         <RecursiveForm :configs="item.configs" />
                     </el-form>
                 </el-tab-pane>
@@ -108,4 +108,9 @@ const handleClick = () => {
 };
 </script>
 
-<style scoped></style>
+<style scoped lang="scss">
+::v-deep(.el-form-item__label) {
+    font-weight: 900;
+    color: #333333;
+}
+</style>