上传默认背景图片

src/components/czr-ui/czr-form-link/upload.vue

@@ -36,20 +36,44 @@
       >
         <template v-if="uploadLayout === 'card'">
           <div
-            class="upload-layout-card __hover"
+            class="upload-layout-card"
             :class="{
               'limit-disabled':
                 isLimitCpt || (isViewCpt && state.paramVal.length === 0),
+              __hover: !defaultImg,
             }"
+            @mouseenter="state.isHover = true"
+            @mouseleave="state.isHover = false"
           >
-            <SvgIcon name="add" color="#0062E9" size="24" />
-            <template v-if="title">
-              <div>{{ title }}</div>
-            </template>
-            <template v-else>
-              <div>选择{{ acceptTypeFormatCpt }}</div>
-              <div v-if="limit > 0">(最多{{ limit }}个)</div>
+            <template v-if="defaultImg">
+              <img
+                :src="defaultImg"
+                class="absolute z-0"
+                :style="{
+                  width: cardWidth,
+                  height: cardHeight,
+                }"
+                :class="state.isHover ? 'opacity-50' : ''"
+              />
             </template>
+            <div
+              class="absolute z-10 flex flex-col items-center justify-center"
+              v-if="!defaultImg || state.isHover"
+              :class="defaultImg ? 'bg-[#ffffff]/65' : ''"
+              :style="{
+                width: cardWidth,
+                height: cardHeight,
+              }"
+            >
+              <SvgIcon name="add" color="#0062E9" size="24" />
+              <template v-if="title">
+                <div>{{ title }}</div>
+              </template>
+              <template v-else>
+                <div>选择{{ acceptTypeFormatCpt }}</div>
+                <div v-if="limit > 0">(最多{{ limit }}个)</div>
+              </template>
+            </div>
           </div>
         </template>
         <template v-else>
@@ -165,14 +189,8 @@ import {
   ref,
   reactive,
   watch,
-  getCurrentInstance,
-  ComponentInternalInstance,
-  toRefs,
-  nextTick,
-  onBeforeMount,
   inject,
 } from 'vue'
-import { useRouter, useRoute } from 'vue-router'
 import { ElMessage } from 'element-plus'
 import FileDefaultImg from '../imgs/file-type/file-type_default.png'
 import FilePDFImg from '../imgs/file-type/file-type_pdf.png'
@@ -214,6 +232,7 @@ const props = defineProps({
   nameKey: { default: 'name' },
   limitNoUpload: { default: false },
   title: {},
+  defaultImg: {},
 })
 const state = reactive({
   paramVal: <any>props.param,
@@ -230,6 +249,7 @@ const state = reactive({
     imgMax: 50,
     imgType: '.jpg,.jpeg,.png,.gif,.svg,.bmp,.webp',
   },
+  isHover: false,
 })
 watch(
   () => state.paramVal,

src/views/manage/app/detail.vue

@@ -44,7 +44,6 @@
           :rows="4"
         />
         <CzrFormColumn
-          required
           :span="24"
           label="图标"
           v-model:param="state.icon"
@@ -53,6 +52,7 @@
           uploadLayout="card"
           :limit="1"
           :delRule="(file) => true"
+          :defaultImg="defaultImg"
         />
         <template v-if="state.form.status == 1">
           <CzrFormColumn
@@ -162,6 +162,7 @@ import {
   appDetail,
   appEdit,
 } from '@/api/modules/app'
+import defaultImg from '@/assets/images/app/app-default-logo.png'
 
 const router = useRouter()
 const AppStore = useAppStore()
@@ -294,7 +295,7 @@ const onSubmit = () => {
         content: `请确认是否提交？`,
         onSubmit: () => {
           state.loading = true
-          state.form.icon = state.icon[0].url
+          state.form.icon = state.icon[0]?.url || ''
           if (props.transfer.mode === 'add') {
             appAdd(state.form)
               .then(() => {