站点多图

admin-web/src/components/form/ExtImage.vue

@@ -72,17 +72,6 @@ watch(() => props.srcList, (nv, ov) => {
     console.log(state.previewList)
   }
 }, {immediate: true, deep: true})
-const url =
-    'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
-const srcList = [
-  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
-  'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
-  'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
-  'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
-  'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
-  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
-  'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
-]
 
 defineExpose(
     open

admin-web/src/components/form/ExtUpload.vue

@@ -4,19 +4,29 @@
       :action="state.action"
       :headers="state.headers"
       :show-file-list="false"
+      :multiple="multiple"
       :on-success="handleAvatarSuccess"
       :on-error="handleAvatarError"
       :before-upload="beforeAvatarUpload"
   >
-    <img v-if="imageUrl" :src="imageUrl" class="avatar"/>
-    <el-icon v-else class="avatar-uploader-icon">
-      <Plus/>
-    </el-icon>
+    <template v-if="multiple">
+      <img v-for="(img,idx)  in showImageList" :key="idx" :src="img" class="avatar"/>
+      <el-icon v-if="showImageList.length<max" class="avatar-uploader-icon">
+        <Plus/>
+      </el-icon>
+    </template>
+    <template v-else>
+      <img v-if="showImageList[0]" :src="showImageList[0]" class="avatar"/>
+      <el-icon v-else class="avatar-uploader-icon">
+        <Plus/>
+      </el-icon>
+    </template>
+
   </el-upload>
 </template>
 
 <script lang="ts" setup>
-import {ref, reactive, onMounted, watch} from 'vue'
+import {ref, reactive, onMounted, watch, computed} from 'vue'
 import {ElMessage} from 'element-plus'
 import {Plus} from '@element-plus/icons-vue'
 
@@ -30,20 +40,59 @@ const emit = defineEmits(['update:modelValue', 'on-change']);
 const props = defineProps({
   modelValue: {
     type: String
+  },
+  multiple: {
+    type: Boolean,
+    default: false
+  },
+  max: {
+    type: Number,
+    default: 9
+  },
+  splitor: {
+    type: String,
+    default: ";"
   }
 })
 
+
+const typeOf = (obj: any) => {
+  return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
+}
+
+
 const state = reactive({
   action: '',
-  headers: {}
-})
-
-watch(() => props.modelValue, (o, v) => {
-  imageUrl.value = u.fmt.fmtUrl(props.modelValue);
+  headers: {},
+  imageList: [] as Array<string>
 })
 
 const imageUrl = ref('')
 
+watch(() => props.modelValue, (nv, v) => {
+  if (nv) {
+    if (props.multiple) {
+      if (Array.isArray(nv)) {
+        state.imageList = nv;
+      } else {
+        state.imageList = nv.split(props.splitor);
+      }
+    } else {
+      state.imageList = [nv]
+    }
+  } else {
+    state.imageList = []
+  }
+  console.log(state.imageList)
+  // imageUrl.value = u.fmt.fmtUrl(o);
+}, {immediate: true})
+
+
+const showImageList = computed(() => {
+      return state.imageList.map((k: string) => u.fmt.fmtUrl(k))
+    }
+)
+
 onMounted(() => {
   let url = import.meta.env.VITE_API_URL;
   if (!url) {
@@ -53,7 +102,7 @@ onMounted(() => {
   state.headers = {"satoken": Session.get("token")}
 })
 
-const handleAvatarError = ()=>{
+const handleAvatarError = () => {
   Msg.hideLoading();
 }
 
@@ -66,13 +115,31 @@ const handleAvatarSuccess: UploadProps['onSuccess'] = (
   let {url, uuid} = response.data;
   imageUrl.value = url;
   // imageUrl.value = URL.createObjectURL(uploadFile.raw!)
+  if (props.multiple) {
+    state.imageList.unshift(uuid)
+  } else {
+    state.imageList = [uuid]
+  }
+  emitData()
+}
 
-  emit("update:modelValue", uuid)
-  emit("on-change", uuid)
+const emitData = () => {
+  if (props.multiple) {
+    emit("update:modelValue", state.imageList.join(props.splitor))
+    emit("on-change", state.imageList.join(props.splitor))
+  } else {
+    if (state.imageList.length > 0) {
+      emit("update:modelValue", state.imageList[0])
+      emit("on-change", state.imageList[0])
+    } else {
+      emit("update:modelValue", null)
+      emit("on-change", null)
+    }
+  }
 }
 
 const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
-  if (rawFile.type !== 'image/jpeg'&&rawFile.type !== 'image/png') {
+  if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
     ElMessage.error('Avatar picture must be JPG format!')
     return false
   } else if (rawFile.size / 1024 / 1024 > 2) {

admin-web/src/views/admin/station/list/dialog.vue

@@ -30,13 +30,15 @@
           </el-input>
         </el-form-item>
         <el-form-item label="站点照片" prop="pictures">
-          <ext-upload v-model="state.ruleForm.pictures"></ext-upload>
-<!--          <el-input
-              v-model.trim="state.ruleForm.pictures"
-              placeholder="站点照片"
-              clearable
-              class="wd200">
-          </el-input>-->
+          <ext-upload
+              v-model="state.ruleForm.pictures"
+              multiple :max="3"></ext-upload>
+          <!--          <el-input
+                        v-model.trim="state.ruleForm.pictures"
+                        placeholder="站点照片"
+                        clearable
+                        class="wd200">
+                    </el-input>-->
         </el-form-item>
 
         <el-form-item label="en+充电站id" prop="stationId">
@@ -208,7 +210,7 @@
               class="w100">
           </el-input>
         </el-form-item>
-        <el-form-item label="营业时间描述" prop="businessHours"  class="w100">
+        <el-form-item label="营业时间描述" prop="businessHours" class="w100">
           <el-input
               v-model.trim="state.ruleForm.businessHours"
               placeholder="营业时间描述"
@@ -218,7 +220,7 @@
           </el-input>
         </el-form-item>
 
-        <el-form-item label="使用车型描述" prop="matchCars"  class="w100">
+        <el-form-item label="使用车型描述" prop="matchCars" class="w100">
           <el-input
               v-model.trim="state.ruleForm.matchCars"
               placeholder="使用车型描述"
@@ -227,7 +229,7 @@
               class="w100">
           </el-input>
         </el-form-item>
-        <el-form-item label="楼层及数量描述" prop="parkInfo"  class="w100">
+        <el-form-item label="楼层及数量描述" prop="parkInfo" class="w100">
           <el-input
               v-model.trim="state.ruleForm.parkInfo"
               placeholder="车位楼层及数量描述"
@@ -257,15 +259,14 @@ import ExtDSelect from "/@/components/form/ExtDSelect.vue";
 import ExtUpload from "/@/components/form/ExtUpload.vue";
 
 // 引入组件
-const ExtDetailForm = defineAsyncComponent(() => import('/@/components/form/ExtDetailForm.vue'));
 
 // 定义子组件向父组件传值/事件
 const emit = defineEmits(['refresh']);
 const formRef = ref();
 //定义初始变量，重置使用
-const initState = ()=>({
+const initState = () => ({
   ruleForm: {
-    id:0
+    id: 0
   },
   btnLoading: false,
   dialog: {
@@ -282,16 +283,16 @@ const state = reactive(initState());
 
 
 // 打开弹窗
-const open = (action: string='add', row: any) => {
-  state.dialog.title = u.dialog.actions[action].title +"『充电站信息』"
-  state.dialog.submitTxt = u.dialog.actions[action].btn +"『充电站信息』"
+const open = (action: string = 'add', row: any) => {
+  state.dialog.title = u.dialog.actions[action].title + "『充电站信息』"
+  state.dialog.submitTxt = u.dialog.actions[action].btn + "『充电站信息』"
   state.dialog.isShowDialog = true;
-  state.ruleForm = Object.assign(state.ruleForm,row);
+  state.ruleForm = Object.assign(state.ruleForm, row);
 };
 // 关闭弹窗
 const onClose = () => {
   state.dialog.isShowDialog = false;
-  Object.assign(state,initState())
+  Object.assign(state, initState())
 };
 // 取消
 const onCancel = () => {
@@ -299,13 +300,13 @@ const onCancel = () => {
 };
 // 提交
 const onSubmit = () => {
-  formRef.value.validate((valid:boolean) => {
-    if(valid){
+  formRef.value.validate((valid: boolean) => {
+    if (valid) {
       state.btnLoading = true;
       const url = state.ruleForm.id > 0 ? "station/modify" : "station/add"
       let params = {
-        stationId:state.ruleForm.stationId,
-        pictures:state.ruleForm.pictures
+        stationId: state.ruleForm.stationId,
+        pictures: state.ruleForm.pictures
       }
       $body(url, params).then(() => {
         state.btnLoading = false;

admin-web/src/views/admin/station/list/index.vue

@@ -85,7 +85,7 @@
         >
           <template #default="{row}">
             <template v-if="field.prop==='pictures'">
-              <ext-image :src-list="row[field.prop]" ></ext-image>
+              <ext-image :src-list="row[field.prop]?.split(';')" ></ext-image>
             </template>
             <template v-else-if="'stationType'===field.prop">
               <ext-d-label type="Station.type" v-model="row[field.prop]"/>

entity/src/main/java/com/kym/entity/admin/Station.java

@@ -11,6 +11,7 @@ import lombok.Setter;
 
 import java.io.Serializable;
 
+
 /**
  * <p>
  * 充电站信息

service/src/main/java/com/kym/service/admin/impl/BannerServiceImpl.java

@@ -45,6 +45,7 @@ public class BannerServiceImpl extends ServiceImpl<BannerMapper, Banner> impleme
                 .set(banner.getEndTime() != null, Banner::getEndTime, banner.getEndTime())
                 .set(banner.getStatus() != null, Banner::getStatus, banner.getStatus())
                 .set(!CommUtil.isEmptyOrNull(banner.getRemark()), Banner::getRemark, banner.getRemark())
+                .set(CommUtil.isNotEmptyAndNull(banner.getActivityId()), Banner::getActivityId, banner.getActivityId())
                 .eq(Banner::getId, banner.getId()).update();
         return banner;
     }