update: 更新

modules/ibizlab-generator-core/src/main/resources/templ/r7/@macro/editor/upload.hbs

@@ -24,8 +24,10 @@
 {{/if}}
 {{#eq item.psEditor.editorType "PICTURE"}}
   accept='image/*'
+  listType="picture-card"
 {{/eq}}
 {{#eq item.psEditor.editorType "PICTURE_ONE"}}
   accept='image/*'
+  listType="picture-card"
 {{/eq}}
   @editorEvent="handleEditorEvent"/>

modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/components/editors/IbizUpload.vue

 <script setup lang="ts">
 import { getDownloadUrl, getRequestingHeader, getUploadUrl, IActionParam, IParam } from "@ibiz-core";
+import { UploadOutlined, PlusOutlined  } from '@ant-design/icons-vue';
 import { ref, Ref } from "vue";
 interface UploadProps {
   /**
@@ -52,6 +53,13 @@ interface UploadProps {
    */
   limit: number;
 
+  /**
+   * 文件列表样式
+   *
+   * @type {boolean}
+   */
+  listType: string;
+
   /**
    * 按钮提示信息
    *
@@ -82,11 +90,12 @@ const props = withDefaults(defineProps<UploadProps>(), {
   disabled: false,
   readonly: false,
   method: 'post',
-  multiple: true,
+  multiple: false,
   showUploadList: true,
   tooltip: '点击上传',
   accept:"*",
   limit: 999,
+  listType: 'text',
 });
 const emit = defineEmits<EditorEmit>();
 const uploadUrl = getUploadUrl();
@@ -95,12 +104,18 @@ const headers = getRequestingHeader();
 const fileList: Ref<IParam[]> = ref([])
 const previewFile = (file: IParam) => {
   //todo
+
 }
-const onChange = (value: number) => {
+const onChange = ($event: any) => {
+  if($event.fileList.length > props.limit) {
+    console.log(`当前限制选择 ${props.limit} 个文件, 共选择了 ${$event.fileList.length} 个文件`);
+    return;
+  }
+  fileList.value = $event.fileList;
   emit("editorEvent", {
     tag: props.name,
     action: "valueChange",
-    data: value,
+    data: $event,
   });
 };
 </script>
@@ -108,20 +123,26 @@ const onChange = (value: number) => {
 <template>
   <div :class="['app-editor-container', `app-upload-${name}`]">
     <a-upload
+      v-model:fileList="fileList"
+      :class="{'ant-upload--limit': fileList.length == limit}"
       :action="uploadUrl"
       :method="method"
       :accept="accept"
-      v-model:fileList="fileList"
       :headers="headers"
       :multiple="multiple"
       :previewFile="previewFile"
       :showUploadList="showUploadList"
+      :list-type="listType"
       :disabled="disabled || readonly"
       @change="onChange">
-    <a-button>
-      <upload-outlined></upload-outlined>
-      {{tooltip}}
-    </a-button>
+      <a-button v-if="Object.is(listType,'text')">
+        <upload-outlined></upload-outlined>
+        \{{tooltip}}
+      </a-button>
+      <div v-else>
+        <plus-outlined />
+        <div class="ant-upload-text">\{{tooltip}}</div>
+      </div>
     </a-upload>
   </div>
 </template>
@@ -130,5 +151,13 @@ const onChange = (value: number) => {
 .app-editor-container {
   width: 100%;
   height: 100%;
+  text-align: left;
+}
+.app-editor-container .ant-upload--limit .ant-upload-select-picture-card {
+display: none;
+}
+.ant-upload-select-picture-card .ant-upload-text {
+  margin-top: 8px;
+  color: #666;
 }
 </style>