update: 表格编辑列样式优化

app_Web/src/components/editor/upload/ibiz-grid-file-upload/ibiz-grid-file-upload-popover.tsx

@@ -26,6 +26,10 @@ export const IBizGridFileUploadPopover = defineComponent({
       }>,
       required: true,
     },
+    width: {
+      type: Number,
+      default: 300,
+    },
   },
   emits: {
     close: (_result: { isModified: boolean; resultFiles: FileInfo[] }) => true,
@@ -92,7 +96,11 @@ export const IBizGridFileUploadPopover = defineComponent({
   },
   render() {
     return (
-      <div ref='componentRef' style={'width:300px'} class={this.ns.b()}>
+      <div
+        ref='componentRef'
+        style={{ width: `${this.width}px` }}
+        class={this.ns.b()}
+      >
         <div class={this.ns.b('list')}>
           {this.fileList.map(file => {
             return (

app_Web/src/components/editor/upload/ibiz-grid-file-upload/ibiz-grid-file-upload.tsx

@@ -42,6 +42,11 @@ export const IBizGridFileUpload = defineComponent({
       if (!componentRef.value) {
         throw new RuntimeError('容器元素不存在');
       }
+      let width = 300;
+      const model = controller.value.model.parentItem as IData;
+      if (model && model._gridFieldColumn) {
+        width = model._gridFieldColumn.width;
+      }
       const el = componentRef.value.$el as HTMLElement;
       const elHeight = el.offsetHeight;
       const popover = ibiz.overlay.createPopover(
@@ -51,6 +56,7 @@ export const IBizGridFileUpload = defineComponent({
               value: valueList.value,
               uploadUrl: uploadUrl.value,
               downloadUrl: downloadUrl.value,
+              width,
             },
             on: {
               close: (result: {
@@ -108,55 +114,62 @@ export const IBizGridFileUpload = defineComponent({
       openImagePreview(file);
     };
 
-    return {
-      ns,
-      valueList,
-      componentRef,
-      onFileClick,
-      onImageClick,
-    };
-  },
-  render() {
+    const renderContent = () => {
+      if (!valueList.value.length) {
         return (
-      <grid-editor
-        disabled={this.disabled}
-        readonly={this.readonly}
-        ref='componentRef'
-        class={`${this.ns.b()}`}
-      >
-        {this.valueList.map(file => {
+          <div class={ns.e('add')}>
+            <i class='ivu-icon ivu-icon-ios-add-circle-outline'></i>
+            添加文件
+          </div>
+        );
+      }
+      return valueList.value.map(file => {
         return (
           <i-tooltip
             class={[
-                this.ns.e('item'),
-                file.isImage
-                  ? this.ns.em('item', 'image')
-                  : this.ns.em('item', 'file'),
+              ns.e('item'),
+              file.isImage ? ns.em('item', 'image') : ns.em('item', 'file'),
             ]}
             content={file.name}
             transfer
             placement='top'
-              nativeOnClick={() => this.onFileClick(file)}
+            nativeOnClick={() => onFileClick(file)}
           >
             {file.isImage ? (
               <img
-                  onClick={() => this.onImageClick(file)}
-                  class={this.ns.e('item-image')}
+                onClick={() => onImageClick(file)}
+                class={ns.e('item-image')}
                 src={file.url}
               />
             ) : (
               [
-                  <span class={this.ns.e('item-file-name')}>
-                    {file.fileName}
-                  </span>,
-                  <span class={this.ns.e('item-file-ext')}>
-                    {file.fileExt}
-                  </span>,
+                <span class={ns.e('item-file-name')}>{file.fileName}</span>,
+                <span class={ns.e('item-file-ext')}>{file.fileExt}</span>,
               ]
             )}
           </i-tooltip>
         );
-        })}
+      });
+    };
+
+    return {
+      ns,
+      valueList,
+      componentRef,
+      onFileClick,
+      onImageClick,
+      renderContent,
+    };
+  },
+  render() {
+    return (
+      <grid-editor
+        disabled={this.disabled}
+        readonly={this.readonly}
+        ref='componentRef'
+        class={`${this.ns.b()}`}
+      >
+        {this.renderContent()}
       </grid-editor>
     );
   },