Merge branch 'master' of http://120.46.155.214:3000/xiaodai2022/live-telecast-vue3-ui-pc

src/components/BasicForm/src/basic-form.vue

@@ -143,7 +143,7 @@ defineExpose({
             </template>
             <template v-if="item.type === 'img_upload_list'">
               <ImageUploadList
-                v-model:url="formData[item.field]"
+                v-model:urls="formData[item.field]"
                 :descs="['小于1Mb']"
                 :disabled="disabled"
                 :types="['png', 'jpg', 'jpeg']"

src/components/PageModal/src/page-modal.vue

@@ -25,20 +25,38 @@ const title = computed(() => {
     ? props.modalConfig.title + basicTitle
     : basicTitle + props.modalConfig.title;
 });
+
 const width = computed(() => {
   return props.modalConfig.width;
 });
 
 function changeDefaultInfo(formItems: Array<FormItem>, newVal: any) {
   for (const item of formItems) {
-    const isCheckBox = item.type === "checkbox";
-
-    formData.value[item.field] = isCheckBox
-      ? newVal[item.field]
-        ? newVal[item.field].split(",")
-        : []
-      : newVal[item.field];
+    switch (item.type) {
+      case "checkbox":
+        formData.value[item.field] = newVal[item.field]
+          ? newVal[item.field].split(",")
+          : [];
+        break;
+      case "img_upload_list":
+        formData.value[item.field] = newVal[item.field]
+          ? newVal[item.field]
+          : [];
+        break;
+      case "number":
+        formData.value[item.field] = newVal[item.field]
+          ? newVal[item.field]
+          : 0;
+        break;
+      default:
+        formData.value[item.field] = newVal[item.field]
+          ? newVal[item.field]
+          : "";
+        break;
+    }
   }
+
+  console.log(formData.value);
 }
 
 watch(
@@ -53,6 +71,7 @@ watch(
 );
 
 function handleConfirmClick() {
+  console.log(formData.value);
   formRef.value.validate(isVaild => {
     //表单校验通过派发事件
     isVaild && emit("confirmBtnClick", unref(type), unref(formData));

src/components/UploadList/src/image.vue

@@ -1,22 +1,22 @@
 <script setup lang="ts">
-import { computed, ref, toRefs } from "vue";
+import { computed, ref, unref } from "vue";
 import { useVModel } from "@vueuse/core";
 import { ElMessage } from "element-plus";
-import { useRenderIcon } from "../../ReIcon/src/hooks";
 import { httpImgUpload } from "/@/api/components/upload";
 import { useResponseHandle } from "/@/hooks/useAsync";
 import { getToken } from "/@/utils/auth";
 import { loadEnv } from "@build/index";
 import { Plus } from "@element-plus/icons-vue";
-import type { UploadFile, UploadProps, UploadUserFile } from "element-plus";
-const emit = defineEmits(["change", "update:url"]);
+import { useRenderIcon } from "../../ReIcon/src/hooks";
+
+const emit = defineEmits(["change", "update:urls"]);
 
 const props = withDefaults(
   defineProps<{
     descs?: string[];
     types?: string[];
     size?: number;
-    url: string;
+    urls: string[];
     disabled?: boolean;
   }>(),
   {
@@ -27,18 +27,12 @@ const { VITE_PROXY_DOMAIN_REAL } = loadEnv();
 const baseUrl = `${VITE_PROXY_DOMAIN_REAL}storage/`;
 const token = getToken();
 const inputer = ref(null);
-const arr = ref([]);
 const loading = ref(false);
-const urls = ref("");
 const imageTypes = computed(() => {
   const { types } = props;
   return types.map(type => "image/" + type);
 });
-const imageUrl = useVModel(props, "url");
-// const imageUrl1 = computed(() => {
-//   const { url } = props;
-//   return url.split(",");
-// });
+const imageUrls = useVModel(props, "urls");
 const responseHandle = useResponseHandle();
 
 const onBeforeImageUpload = ({ type, size }) => {
@@ -97,6 +91,14 @@ const disabled = ref(false);
 // const handleDownload = (file: UploadFile) => {
 //   console.log(file);
 // };
+
+function handleRemove(url: string) {
+  const index = imageUrls.value.findIndex(u => u === url);
+  if (index >= 0) {
+    imageUrls.value.splice(index, 1);
+  }
+}
+
 const handleChange = async () => {
   if (loading.value) return;
   const files = inputer.value.files;
@@ -108,21 +110,21 @@ const handleChange = async () => {
       loading.value = false;
       inputer.value = null;
     } else {
-      const str = await httpupLoad(files, i);
-      if (!(str === "break" || str === "error")) {
-        arr.value.push(str);
-        // imageUrl.value += str;
+      const url = await httpupLoad(files, i);
+      if (!(url === "break" || url === "error")) {
+        imageUrls.value.push(url);
+        emit("change", unref(imageUrls));
       }
     }
   }
 };
 
-const httpupLoad = (file, i) => {
+const httpupLoad = (file, i): Promise<string> => {
   return new Promise(resolve => {
     if (!onBeforeImageUpload(file[i])) {
-      console.log("22222222222");
       resolve("break");
     }
+
     const _formData = new FormData();
     _formData.append("image", file[i]);
     _formData.append("token", token);
@@ -133,8 +135,8 @@ const httpupLoad = (file, i) => {
         message,
         code,
         handler: () => {
-          urls.value = baseUrl + data[0].url;
-          resolve(toRefs(urls));
+          const url = baseUrl + data[0].url;
+          resolve(url);
         },
         errorHandler: () => {
           resolve("break");
@@ -147,9 +149,22 @@ const httpupLoad = (file, i) => {
 
 <template>
   <ul class="image-upload-list">
-    <li v-for="(item, index) in arr" :key="index + item" class="img-show">
-      {{ item }}
-      <!-- <img :src="file" alt="" /> -->
+    <li
+      class="img-show relative"
+      v-for="(item, index) in imageUrls"
+      :key="index + item"
+    >
+      <img :src="item" alt="" />
+
+      <div class="absolute top-[-3px] right-[5px]">
+        <ElButton
+          link
+          size="large"
+          type="primary"
+          :icon="useRenderIcon('close-bold')"
+          @click="() => handleRemove(item)"
+        />
+      </div>
     </li>
     <li class="img-input">
       <input
@@ -158,8 +173,8 @@ const httpupLoad = (file, i) => {
         :accept="types.join('.')"
         :multiple="true"
         type="file"
-        :disabled="disabled"
         name="file"
+        :disabled="disabled"
         @change="handleChange"
       />
       <el-icon class="avatar-uploader-icon"><Plus /></el-icon>