补充代码

src/components/pic-upload/index.vue

@@ -15,7 +15,11 @@
         :src="resourcesUrl + modelValue"
         class="pic"
       >
-      <el-icon v-else>
+      <el-icon
+        v-else
+        color="#8c939d"
+        size="28"
+      >
         <Plus />
       </el-icon>
     </el-upload>
@@ -85,4 +89,8 @@ const beforeAvatarUpload = (file) => {
 .pic-uploader-component :deep(.el-upload:hover) {
   border-color: #409EFF;
 }
+:deep(.el-upload) {
+  width: 148px;
+  height: 148px;
+}
 </style>

src/components/tiny-mce/add-or-upload.vue

@@ -1,81 +0,0 @@
-<template>
-  <div class="components-add-or-upload">
-    <el-tooltip
-      v-if="props.tinymceUploadType === 'prod'"
-      content="内容"
-      placement="top"
-    >
-      <el-button
-        type="primary"
-        @click="clickUpload()"
-      >
-        <el-icon><UploadFilled /></el-icon>
-        上传图片
-      </el-button>
-    </el-tooltip>
-
-    <el-button
-      v-else
-      :style="{ background: props.color, borderColor: props.color }"
-      type="primary"
-      @click="clickUpload()"
-    >
-      <el-icon><UploadFilled /></el-icon>
-      上传图片
-    </el-button>
-    <!-- 弹窗, 新增图片 -->
-    <!--    <elx-imgbox-->
-    <!--      v-if="elxImgboxVisible"-->
-    <!--      ref="elxImgboxRef"-->
-    <!--      @refresh-pic="refreshPic"-->
-    <!--    />-->
-  </div>
-</template>
-<script setup>
-// const emit = defineEmits(['successCBK'])
-const props = defineProps({
-  color: {
-    type: String,
-    default: '#155bd4'
-  },
-  tinymceUploadType: {
-    default: '',
-    type: String
-  }
-})
-
-const elxImgboxVisible = ref(false)
-// const maxNum = ref(15) // 可选择的最大图片数量
-const imgUrls = ref([])
-// const resourcesUrl = import.meta.env.VITE_APP_RESOURCES_URL
-// const elxImgboxRef = ref()
-// const dialogVisible = ref()
-/**
- * 打开图片选择窗
- */
-const clickUpload = () => {
-  imgUrls.value = ''
-  elxImgboxVisible.value = true
-  // nextTick(() => {
-  //   elxImgboxRef.value?.init(0, maxNum.value)
-  // })
-}
-/**
- * 接收回调的图片数据
- */
-// const refreshPic = imagePath => {
-//   const imageArray = imagePath.split(',')
-//   const data = []
-//   imageArray.forEach(img => {
-//     data.push(resourcesUrl + img)
-//   })
-//   imgUrls.value = ''
-//   dialogVisible.value = false
-//   emit('successCBK', data)
-// }
-</script>
-<style lang="scss" scoped>
-.components-add-or-upload{
-  margin-bottom: 20px;
-}
-</style>

src/components/tiny-mce/index.vue

@@ -9,13 +9,26 @@
         :init="init"
         api-key="i6mv006qcwsfu1t7ebisntg5w261vpowkwirnx9cnse3ho5o"
       />
+      <!-- 增加图片区域 -->
       <div
         class="add-or-upload"
       >
-        <add-or-upload
-          v-show="isLoaded"
-          @success-c-b-k="imageSuccessCBK"
-        />
+        <el-upload
+          class="upload-demo"
+          list-type="picture"
+          :action="uploadAction"
+          :headers="uploadHeaders"
+          :on-success="imageSuccessCBK"
+          :show-file-list="false"
+          :before-upload="beforeAvatarUpload"
+        >
+          <el-button
+            size="small"
+            type="primary"
+          >
+            点击上传图片
+          </el-button>
+        </el-upload>
       </div>
     </div>
   </div>
@@ -23,7 +36,11 @@
 
 <script setup>
 import Editor from '@tinymce/tinymce-vue'
-import AddOrUpload from './add-or-upload.vue'
+import $cookie from 'vue-cookies'
+
+const uploadHeaders = { Authorization: $cookie.get('Authorization') }
+const uploadAction = http.adornUrl('/admin/file/upload/element')
+
 const props = defineProps({
   modelValue: {
     type: String,
@@ -46,6 +63,7 @@ const props = defineProps({
     default: 'auto'
   }
 })
+
 const toxFullscreen = ref(false)
 const hasChange = ref(false)
 const hasInit = ref(false)
@@ -131,12 +149,28 @@ const destroyTinymce = () => {
     tinymce.destroy()
   }
 }
-const imageSuccessCBK = (arr) => {
-  arr.forEach(v => {
-    window.tinymce.get(props.id).insertContent(`<img alt="" class="wscnph" src="${v}" >`)
+const resourcesUrl = import.meta.env.VITE_APP_RESOURCES_URL
+// eslint-disable-next-line no-unused-vars
+const imageSuccessCBK = (response, file, fileList) => {
+  fileList.forEach(v => {
+    window.tinymce.get(props.id).insertContent(`<img alt="" src="${resourcesUrl + v.response.data}" >`)
   })
 }
 
+/**
+ * 限制图片上传大小
+ */
+const beforeAvatarUpload = (file) => {
+  const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/jpg'
+  if (!isJPG) {
+    this.$message.error('上传图片只能是jpeg/jpg/png/gif 格式!')
+  }
+  const isLt2M = file.size / 1024 / 1024 < 2
+  if (!isLt2M) {
+    this.$message.error('上传图片大小不能超过 2MB!')
+  }
+  return isLt2M && isJPG
+}
 </script>
 <!--eslint-disable-next-line vue-scoped-css/enforce-style-type -->
 <style lang="scss">

src/views/modules/prod/category/add-or-update.vue

@@ -112,7 +112,8 @@ const categoryList = ref([])
 const selectedCategory = ref([])
 const categoryTreeProps = reactive({
   value: 'categoryId',
-  label: 'categoryName'
+  label: 'categoryName',
+  checkStrictly: true
 })
 const isSubmit = ref(false)
 const dataFormRef = ref(null)

src/views/modules/prod/category/index.vue

@@ -93,6 +93,7 @@
       v-if="addOrUpdateVisible"
       ref="addOrUpdateRef"
       @refresh-data-list="getDataList"
+      @close="addOrUpdateVisible=false"
     />
   </div>
 </template>

src/views/modules/prod/prodInfo/components/sku-tag.vue

@@ -150,13 +150,13 @@ watch(() => skuTags.value,
       initing = false
       return
     }
-    let skuList = []
+    let skuListArr = []
     if (type.value === 4) {
       // 删除规格值
       props.skuList?.forEach(sku => {
         const propertiesArray = sku.properties.split(';')
         if (tagItemName.value !== propertiesArray[tagNameIndex].split(':')[1]) {
-          skuList.push(sku)
+          skuListArr.push(sku)
         }
       })
     } else if (type.value === 2) {
@@ -165,25 +165,25 @@ watch(() => skuTags.value,
       // 增加或删除规格
       let tempSkuList = []
       val?.forEach(tag => {
-        if (skuList.length === 0) {
+        if (skuListArr.length === 0) {
           if (tagName === tag.tagName) {
             const sku = Object.assign({}, defalutSku.value)
             sku.properties = properties // 销售属性组合字符串
-            skuList.push(sku)
+            skuListArr.push(sku)
           } else {
             tag.tagItems.forEach(tagItem => {
               const sku = Object.assign({}, defalutSku.value)
               sku.properties = `${tag.tagName}:${tagItem.propValue}` // 销售属性组合字符串
-              skuList.push(sku)
+              skuListArr.push(sku)
             })
           }
           if (val.length === 1) {
-            skuList = props.skuList.concat(skuList)
+            skuListArr = props.skuList.concat(skuListArr)
           }
         } else {
           tempSkuList = []
           if (tagName === tag.tagName) {
-            skuList.forEach(sku => {
+            skuListArr.forEach(sku => {
               if (sku.properties.indexOf(tagName) === -1) {
                 const newSku = Object.assign({}, sku)
                 newSku.properties = `${sku.properties};${properties}`
@@ -192,7 +192,7 @@ watch(() => skuTags.value,
             })
           } else {
             tag.tagItems.forEach(tagItem => {
-              skuList.forEach(sku => {
+              skuListArr.forEach(sku => {
                 if (sku.properties.indexOf(tag.tagName) === -1) {
                   const newSku = Object.assign({}, sku)
                   newSku.properties = `${sku.properties};${tag.tagName}:${tagItem.propValue}`
@@ -201,37 +201,40 @@ watch(() => skuTags.value,
               })
             })
           }
-          skuList = props.skuList.concat(tempSkuList)
+          skuListArr = props.skuList.concat(tempSkuList)
         }
       })
     } else {
       // 增加或删除规格
       let tempSkuList = []
       val?.forEach(tag => {
-        if (skuList.length === 0) {
+        if (skuListArr.length === 0) {
           tag.tagItems.forEach(tagItem => {
             const sku = Object.assign({}, defalutSku.value)
             sku.properties = `${tag.tagName}:${tagItem.propValue}` // 销售属性组合字符串
-            skuList.push(sku)
+            skuListArr.push(sku)
           })
         } else {
           tempSkuList = []
           tag.tagItems.forEach(tagItem => {
-            skuList.forEach(sku => {
+            skuListArr.forEach(sku => {
               const newSku = Object.assign({}, sku)
               newSku.properties = `${sku.properties};${tag.tagName}:${tagItem.propValue}`
               tempSkuList.push(newSku)
             })
           })
-          skuList = tempSkuList
+          skuListArr = tempSkuList
         }
       })
     }
-    if (!skuList.length) {
-      skuList.push(Object.assign({}, defalutSku.value))
+    if (!skuListArr.length) {
+      skuListArr.push(Object.assign({}, defalutSku.value))
     }
     // debugger
-    emit('change', skuList)
+    emit('change', skuListArr)
+  },
+  {
+    deep: true
   }
 )
 

src/views/modules/shop/notice/index.vue

@@ -62,6 +62,7 @@
       v-if="addOrUpdateVisible"
       ref="addOrUpdateRef"
       @refresh-data-list="refreshChange"
+      @close="addOrUpdateVisible=false"
     />
   </div>
 </template>

src/views/modules/sys/area/add-or-update.vue

@@ -77,7 +77,8 @@ const dataForm = ref({
 })
 const categoryTreeProps = reactive({
   value: 'areaId',
-  label: 'areaName'
+  label: 'areaName',
+  checkStrictly: true
 })
 const selectedOptions = ref([])
 const dataFormRef = ref(null)
@@ -92,9 +93,11 @@ const init = (areaId) => {
         url: http.adornUrl('/admin/area/info/' + dataForm.value.areaId),
         method: 'get',
         params: http.adornParams()
-      }).then(({ data }) => {
+      })
+        .then(({ data }) => {
           dataForm.value = data
-        selectedOptions.value.push(dataForm.value.parentId)
+          selectedOptions.value = dataForm.value.parentId
+          selectedOptions.level = dataForm.value.level
           categoryTreeProps.areaId = dataForm.value.areaId
           categoryTreeProps.areaName = dataForm.value.areaName
         })
@@ -103,7 +106,8 @@ const init = (areaId) => {
       url: http.adornUrl('/admin/area/list'),
       method: 'get',
       params: http.adornParams()
-    }).then(({ data }) => {
+    })
+      .then(({ data }) => {
         areaList.value = treeDataTranslate(data, 'areaId', 'parentId')
       })
   })

src/views/modules/sys/area/index.vue

@@ -34,7 +34,6 @@
           <el-button
             type="text"
             icon="el-icon-delete"
-
             @click="() => remove(node, data)"
           >
             删除
@@ -47,6 +46,7 @@
       v-if="addOrUpdateVisible"
       ref="addOrUpdateRef"
       @refresh-data-list="getDataList"
+      @close="addOrUpdateVisible=false"
     />
   </div>
 </template>

src/views/modules/sys/menu/add-or-update.vue

@@ -41,6 +41,7 @@
           :options="menuList"
           :props="menuListTreeProps"
           change-on-select
+          :clearable="true"
           @change="handleSelectMenuChange"
         />
       </el-form-item>
@@ -172,7 +173,8 @@ const menuList = ref([])
 const selectedMenu = ref([])
 const menuListTreeProps = {
   value: 'menuId',
-  label: 'name'
+  label: 'name',
+  checkStrictly: true
 }
 
 // eslint-disable-next-line no-unused-vars

src/views/modules/sys/menu/index.vue

@@ -128,6 +128,7 @@
       v-if="addOrUpdateVisible"
       ref="addOrUpdateRef"
       @refresh-data-list="getDataList"
+      @close="addOrUpdateVisible=false"
     />
   </div>
 </template>