From ef6692e84c9e01cfef5e83e1de1cb372df0f1011 Mon Sep 17 00:00:00 2001
From: zhangkang <1752553776@qq.com>
Date: Mon, 17 Jul 2023 20:33:53 +0800
Subject: [PATCH 1/5] =?UTF-8?q?feat:=20=E7=9B=B4=E6=8E=A5=E5=86=85?=
 =?UTF-8?q?=E5=AE=B9=E6=96=B0=E5=A2=9E=20rawItem=20=E6=A8=A1=E5=9E=8B?=
 =?UTF-8?q?=E5=8F=82=E6=95=B0=20&=20=E6=96=B0=E5=A2=9E=E9=9D=A2=E6=9D=BF?=
 =?UTF-8?q?=E7=9B=B4=E6=8E=A5=E5=86=85=E5=AE=B9=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/rawitem/rawitem.scss               |   4 +
 src/common/rawitem/rawitem.tsx                | 114 +++++++++++++-----
 .../form-detail/form-rawitem/form-rawitem.tsx |  36 +-----
 src/panel-component/index.ts                  |   3 +
 src/panel-component/panel-rawitem/index.ts    |  15 +++
 .../panel-rawitem/panel-rawitem.controller.ts |  34 ++++++
 .../panel-rawitem/panel-rawitem.provider.ts   |  25 ++++
 .../panel-rawitem/panel-rawitem.scss          |   8 ++
 .../panel-rawitem/panel-rawitem.tsx           |  48 ++++++++
 9 files changed, 220 insertions(+), 67 deletions(-)
 create mode 100644 src/common/rawitem/rawitem.scss
 create mode 100644 src/panel-component/panel-rawitem/index.ts
 create mode 100644 src/panel-component/panel-rawitem/panel-rawitem.controller.ts
 create mode 100644 src/panel-component/panel-rawitem/panel-rawitem.provider.ts
 create mode 100644 src/panel-component/panel-rawitem/panel-rawitem.scss
 create mode 100644 src/panel-component/panel-rawitem/panel-rawitem.tsx

diff --git a/src/common/rawitem/rawitem.scss b/src/common/rawitem/rawitem.scss
new file mode 100644
index 000000000..093949a90
--- /dev/null
+++ b/src/common/rawitem/rawitem.scss
@@ -0,0 +1,4 @@
+@include b(rawitem) {
+  width: 100%;
+  height: 100%;
+}
diff --git a/src/common/rawitem/rawitem.tsx b/src/common/rawitem/rawitem.tsx
index 8acd3bdc6..1b4f50999 100644
--- a/src/common/rawitem/rawitem.tsx
+++ b/src/common/rawitem/rawitem.tsx
@@ -1,21 +1,55 @@
 import { useNamespace } from '@ibiz-template/vue3-util';
-import { defineComponent, ref } from 'vue';
+import { defineComponent, PropType, ref } from 'vue';
 import { createUUID } from 'qx-util';
+import {
+  IHtmlItem,
+  IPanelRawItem,
+  IRawItemContainer,
+  ITextItem,
+} from '@ibiz/model-core';
+import './rawitem.scss';
 
 export const IBizRawItem = defineComponent({
   name: 'IBizRawItem',
   props: {
     type: {
       type: String,
-      required: true,
+      required: false,
     },
     content: {
       type: [String, Object],
     },
+    rawItem: {
+      type: Object as PropType<IRawItemContainer>,
+      required: false,
+    },
   },
   setup(props) {
     const ns = useNamespace('rawitem');
-
+    const { rawItem } = props.rawItem!;
+    const { contentType } = rawItem!;
+    const rawItemType = ref(props.type || contentType || '');
+    const rawItemContent = ref(props.content);
+    let sysImage = null;
+    if (contentType === 'IMAGE') {
+      sysImage = (rawItem as IPanelRawItem).sysImage;
+    }
+    // 传入内容
+    if (contentType === 'RAW' || contentType === 'HTML') {
+      if (contentType === 'RAW') {
+        rawItemType.value = 'TEXT';
+        rawItemContent.value = (rawItem as ITextItem).caption!;
+      } else {
+        rawItemContent.value = (rawItem as IHtmlItem).content!;
+      }
+    } else if (
+      ['VIDEO', 'DIVIDER', 'INFO', 'WARNING', 'ERROR'].includes(contentType!)
+    ) {
+      // 暂不支持
+      // content = rawContent;
+    } else if (contentType === 'IMAGE' && sysImage) {
+      rawItemContent.value = sysImage;
+    }
     // 视频类型内容参数
     const playerParams = ref({
       id: createUUID(),
@@ -54,10 +88,10 @@ export const IBizRawItem = defineComponent({
         'HEADING6',
         'PARAGRAPH',
         'HTML',
-      ].includes(props.type)
+      ].includes(rawItemType.value)
     ) {
-      if (props.content && typeof props.content === 'string') {
-        rawItemText.value = props.content;
+      if (rawItemContent.value && typeof rawItemContent.value === 'string') {
+        rawItemText.value = rawItemContent.value;
         rawItemText.value = rawItemText.value.replaceAll('&lt;', '<');
         rawItemText.value = rawItemText.value.replaceAll('&gt;', '>');
         rawItemText.value = rawItemText.value.replaceAll('&amp;nbsp;', ' ');
@@ -65,15 +99,19 @@ export const IBizRawItem = defineComponent({
       }
     }
 
-    if (['VIDEO', 'DIVIDER', 'INFO', 'WARNING', 'ERROR'].includes(props.type)) {
-      if (props.content) {
+    if (
+      ['VIDEO', 'DIVIDER', 'INFO', 'WARNING', 'ERROR'].includes(
+        rawItemType.value,
+      )
+    ) {
+      if (rawItemContent.value) {
         let rawConfig = {};
         try {
-          if (typeof props.content === 'string') {
+          if (typeof rawItemContent.value === 'string') {
             // eslint-disable-next-line no-new-func
-            const func = new Function(`return (${props.content});`);
+            const func = new Function(`return (${rawItemContent.value});`);
             rawConfig = func();
-            switch (props.type) {
+            switch (rawItemType.value) {
               case 'VIDEO':
                 Object.assign(playerParams.value, rawConfig);
                 break;
@@ -83,7 +121,7 @@ export const IBizRawItem = defineComponent({
               case 'INFO':
               case 'WARNING':
               case 'ERROR':
-                alertParams.value.type = props.type.toLocaleLowerCase();
+                alertParams.value.type = rawItemType.value.toLocaleLowerCase();
                 Object.assign(alertParams.value, rawConfig);
                 break;
               default:
@@ -91,49 +129,59 @@ export const IBizRawItem = defineComponent({
             }
           }
         } catch {
-          ibiz.log.error(`${props.type}类型自定义参数配置错误`);
+          ibiz.log.error(`${rawItemType.value}类型自定义参数配置错误`);
         }
       }
     }
-
-    return { ns, rawItemText, playerParams, dividerParams, alertParams };
+    return {
+      ns,
+      rawItemText,
+      playerParams,
+      dividerParams,
+      alertParams,
+      rawItemType,
+      rawItemContent,
+    };
   },
   render() {
-    if (this.type === 'IMAGE') {
+    if (this.rawItemType === 'IMAGE') {
       return (
-        <i-biz-icon class={this.ns.e('image')} icon={this.content}></i-biz-icon>
+        <i-biz-icon
+          class={[this.ns.e('image'), this.ns.b()]}
+          icon={this.rawItemContent}
+        ></i-biz-icon>
       );
     }
-    if (this.type === 'TEXT') {
+    if (this.rawItemType === 'TEXT') {
       return <span class={this.ns.e('text')}>{this.rawItemText}</span>;
     }
-    if (this.type === 'HEADING1') {
+    if (this.rawItemType === 'HEADING1') {
       return <h1 class={this.ns.e('h1')}>{this.rawItemText}</h1>;
     }
-    if (this.type === 'HEADING2') {
+    if (this.rawItemType === 'HEADING2') {
       return <h2 class={this.ns.e('h2')}>{this.rawItemText}</h2>;
     }
-    if (this.type === 'HEADING3') {
+    if (this.rawItemType === 'HEADING3') {
       return <h3 class={this.ns.e('h3')}>{this.rawItemText}</h3>;
     }
-    if (this.type === 'HEADING4') {
+    if (this.rawItemType === 'HEADING4') {
       return <h4 class={this.ns.e('h4')}>{this.rawItemText}</h4>;
     }
-    if (this.type === 'HEADING5') {
+    if (this.rawItemType === 'HEADING5') {
       return <h5 class={this.ns.e('h5')}>{this.rawItemText}</h5>;
     }
-    if (this.type === 'HEADING6') {
+    if (this.rawItemType === 'HEADING6') {
       return <h6 class={this.ns.e('h6')}>{this.rawItemText}</h6>;
     }
-    if (this.type === 'PARAGRAPH') {
+    if (this.rawItemType === 'PARAGRAPH') {
       return <p class={this.ns.e('paragraph')}>{this.rawItemText}</p>;
     }
-    if (this.type === 'HTML') {
+    if (this.rawItemType === 'HTML') {
       return (
         <div class={this.ns.e('paragraph')} v-html={this.rawItemText}></div>
       );
     }
-    if (this.type === 'VIDEO') {
+    if (this.rawItemType === 'VIDEO') {
       return (
         <div class={this.ns.e('video')}>
           <video
@@ -152,7 +200,7 @@ export const IBizRawItem = defineComponent({
         </div>
       );
     }
-    if (this.type === 'DIVIDER') {
+    if (this.rawItemType === 'DIVIDER') {
       return (
         <el-divider content-position={this.dividerParams.contentPosition}>
           <span v-html={this.dividerParams.html}></span>
@@ -160,9 +208,9 @@ export const IBizRawItem = defineComponent({
       );
     }
     if (
-      this.type === 'INFO' ||
-      this.type === 'WARNING' ||
-      this.type === 'ERROR'
+      this.rawItemType === 'INFO' ||
+      this.rawItemType === 'WARNING' ||
+      this.rawItemType === 'ERROR'
     ) {
       return (
         <el-alert
@@ -173,8 +221,8 @@ export const IBizRawItem = defineComponent({
         ></el-alert>
       );
     }
-    if (['MARKDOWN', 'PLACEHOLDER'].includes(this.type)) {
-      return <div>{this.type}类型暂未支持</div>;
+    if (['MARKDOWN', 'PLACEHOLDER'].includes(this.rawItemType)) {
+      return <div>{this.rawItemType}类型暂未支持</div>;
     }
     return null;
   },
diff --git a/src/control/form/form-detail/form-rawitem/form-rawitem.tsx b/src/control/form/form-detail/form-rawitem/form-rawitem.tsx
index 2e760d1f0..bcfef4843 100644
--- a/src/control/form/form-detail/form-rawitem/form-rawitem.tsx
+++ b/src/control/form/form-detail/form-rawitem/form-rawitem.tsx
@@ -1,9 +1,4 @@
-import {
-  IDEFormRawItem,
-  IHtmlItem,
-  ISysImage,
-  ITextItem,
-} from '@ibiz/model-core';
+import { IDEFormRawItem } from '@ibiz/model-core';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import { defineComponent, PropType } from 'vue';
 import { FormRawItemController } from './form-rawitem.controller';
@@ -29,35 +24,8 @@ export const FormRawItem = defineComponent({
     if (!this.controller.state.visible) {
       return null;
     }
-
-    const { rawItem, sysImage } = this.modelData;
-    const { contentType } = rawItem!;
-
-    // 传入内容
-    let content: string | ISysImage | null = null;
-    // 类型
-    let type = contentType;
-    if (contentType === 'RAW' || contentType === 'HTML') {
-      if (contentType === 'RAW') {
-        type = 'TEXT';
-        content = (rawItem as ITextItem).caption!;
-      } else {
-        content = (rawItem as IHtmlItem).content!;
-      }
-    } else if (
-      ['VIDEO', 'DIVIDER', 'INFO', 'WARNING', 'ERROR'].includes(contentType!)
-    ) {
-      // 暂不支持
-      // content = rawContent;
-    } else if (contentType === 'IMAGE' && sysImage) {
-      content = sysImage;
-    }
     return (
-      <iBizRawItem
-        class={this.ns.b()}
-        content={content}
-        type={type}
-      ></iBizRawItem>
+      <iBizRawItem class={this.ns.b()} rawItem={this.modelData}></iBizRawItem>
     );
   },
 });
diff --git a/src/panel-component/index.ts b/src/panel-component/index.ts
index edec0c5f7..76d6f39cd 100644
--- a/src/panel-component/index.ts
+++ b/src/panel-component/index.ts
@@ -12,6 +12,7 @@ import IBizSingleDataContainer from './single-data-container';
 import IBizPanelField from './panel-field';
 import IBizPanelAppHeader from './panel-app-header';
 import IBizPanelViewHeader from './panel-view-header';
+import IBizPanelRawItem from './panel-rawitem';
 
 export * from './panel-container';
 export * from './panel-ctrl-pos';
@@ -23,6 +24,7 @@ export * from './nav-pos';
 export * from './panel-app-title';
 export * from './panel-container';
 export * from './panel-field';
+export * from './panel-rawitem';
 
 export const IBizPanelComponents = {
   install: (v: App) => {
@@ -39,6 +41,7 @@ export const IBizPanelComponents = {
     v.use(IBizPanelField);
     v.use(IBizPanelAppHeader);
     v.use(IBizPanelViewHeader);
+    v.use(IBizPanelRawItem);
   },
 };
 
diff --git a/src/panel-component/panel-rawitem/index.ts b/src/panel-component/panel-rawitem/index.ts
new file mode 100644
index 000000000..7eaec19c7
--- /dev/null
+++ b/src/panel-component/panel-rawitem/index.ts
@@ -0,0 +1,15 @@
+import { registerPanelItemProvider } from '@ibiz-template/runtime';
+import { withInstall } from '@ibiz-template/vue3-util';
+import { App } from 'vue';
+import { PanelRawItem } from './panel-rawitem';
+import { PanelRawItemProvider } from './panel-rawitem.provider';
+
+export * from './panel-rawitem.provider';
+export * from './panel-rawitem.controller';
+
+export const IBizPanelRawItem = withInstall(PanelRawItem, function (v: App) {
+  v.component(PanelRawItem.name, PanelRawItem);
+  registerPanelItemProvider('RAWITEM', () => new PanelRawItemProvider());
+});
+
+export default IBizPanelRawItem;
diff --git a/src/panel-component/panel-rawitem/panel-rawitem.controller.ts b/src/panel-component/panel-rawitem/panel-rawitem.controller.ts
new file mode 100644
index 000000000..ac9fd5d43
--- /dev/null
+++ b/src/panel-component/panel-rawitem/panel-rawitem.controller.ts
@@ -0,0 +1,34 @@
+import { IPanelRawItem } from '@ibiz/model-core';
+import { PanelItemController } from '../../control';
+
+/**
+ * 面板按钮控制器
+ *
+ * @export
+ * @class PanelRawItemController
+ * @extends {PanelItemController<IPanelRawItem>}
+ */
+export class PanelRawItemController extends PanelItemController<IPanelRawItem> {
+  /**
+   * 父容器数据对象数据
+   * @author lxm
+   * @date 2023-07-15 01:33:58
+   * @readonly
+   * @type {IData}
+   */
+  get data(): IData {
+    return this.dataParent.data!;
+  }
+
+  /**
+   * 初始化
+   *
+   * @author lxm
+   * @date 2022-08-24 20:08:42
+   * @protected
+   * @returns {*}  {Promise<void>}
+   */
+  protected async onInit(): Promise<void> {
+    await super.onInit();
+  }
+}
diff --git a/src/panel-component/panel-rawitem/panel-rawitem.provider.ts b/src/panel-component/panel-rawitem/panel-rawitem.provider.ts
new file mode 100644
index 000000000..8b24a39db
--- /dev/null
+++ b/src/panel-component/panel-rawitem/panel-rawitem.provider.ts
@@ -0,0 +1,25 @@
+import { IPanelItemProvider } from '@ibiz-template/runtime';
+import { IPanelItem } from '@ibiz/model-core';
+import { PanelController, PanelItemController } from '../../control';
+import { PanelRawItemController } from './panel-rawitem.controller';
+
+/**
+ * 面板属性适配器
+ *
+ * @export
+ * @class PanelRawItemProvider
+ * @implements {IPanelItemProvider}
+ */
+export class PanelRawItemProvider implements IPanelItemProvider {
+  component: string = 'IBizPanelRawItem';
+
+  async createController(
+    panelItem: IPanelItem,
+    panel: PanelController,
+    parent: PanelItemController | undefined,
+  ): Promise<PanelRawItemController> {
+    const c = new PanelRawItemController(panelItem, panel, parent);
+    await c.init();
+    return c;
+  }
+}
diff --git a/src/panel-component/panel-rawitem/panel-rawitem.scss b/src/panel-component/panel-rawitem/panel-rawitem.scss
new file mode 100644
index 000000000..dcf63a4d5
--- /dev/null
+++ b/src/panel-component/panel-rawitem/panel-rawitem.scss
@@ -0,0 +1,8 @@
+@include b(panel-rawitem) {
+  width: 100%;
+  height: 100%;
+  
+  @include b(panel-rawitem-content) {
+    width: 100%;
+  }
+}
diff --git a/src/panel-component/panel-rawitem/panel-rawitem.tsx b/src/panel-component/panel-rawitem/panel-rawitem.tsx
new file mode 100644
index 000000000..73a666296
--- /dev/null
+++ b/src/panel-component/panel-rawitem/panel-rawitem.tsx
@@ -0,0 +1,48 @@
+import { useNamespace } from '@ibiz-template/vue3-util';
+import { IPanelRawItem } from '@ibiz/model-core';
+import { computed, defineComponent, PropType } from 'vue';
+import { PanelRawItemController } from './panel-rawitem.controller';
+import './panel-rawitem.scss';
+
+export const PanelRawItem = defineComponent({
+  name: 'IBizPanelRawItem',
+  props: {
+    modelData: {
+      type: Object as PropType<IPanelRawItem>,
+      required: true,
+    },
+    controller: {
+      type: PanelRawItemController,
+      required: true,
+    },
+  },
+  setup(props) {
+    const ns = useNamespace('panel-rawitem');
+
+    // 类名控制
+    const classArr = computed(() => {
+      const { id, sysCss } = props.modelData;
+      const result: Array<string | false> = [ns.b(), ns.m(id)];
+      if (sysCss?.cssName) {
+        result.push(sysCss.cssName);
+      }
+      return result;
+    });
+
+    return {
+      ns,
+      classArr,
+    };
+  },
+  render() {
+    // 动态控制显示
+    if (!this.controller.state.visible) {
+      return;
+    }
+    return (
+      <div class={this.classArr}>
+        <iBizRawItem rawItem={this.modelData}></iBizRawItem>
+      </div>
+    );
+  },
+});
-- 
Gitee


From b245e2455777e977eba3bf1eed9933e0de3054dd Mon Sep 17 00:00:00 2001
From: zhangkang <1752553776@qq.com>
Date: Mon, 17 Jul 2023 20:35:18 +0800
Subject: [PATCH 2/5] =?UTF-8?q?feat:=20=E6=96=87=E4=BB=B6=E5=90=8D?=
 =?UTF-8?q?=E7=A7=B0=E6=9B=B4=E6=AD=A3=20&=20=E5=9B=BE=E7=89=87=E9=A2=84?=
 =?UTF-8?q?=E8=A7=88=E7=BB=84=E4=BB=B6=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/editor/index.ts                           |   4 +-
 .../ibiz-image-preview.scss                   |   5 +
 .../ibiz-image-preview/ibiz-image-preview.tsx |  38 +++++
 .../ibiz-image-select/ibiz-image-select.scss  |  74 ---------
 .../ibiz-image-select/ibiz-image-select.tsx   | 155 ------------------
 src/editor/upload/index.ts                    |   2 +-
 src/editor/upload/upload-editor.provider.ts   |   2 +-
 7 files changed, 47 insertions(+), 233 deletions(-)
 create mode 100644 src/editor/upload/ibiz-image-preview/ibiz-image-preview.scss
 create mode 100644 src/editor/upload/ibiz-image-preview/ibiz-image-preview.tsx
 delete mode 100644 src/editor/upload/ibiz-image-select/ibiz-image-select.scss
 delete mode 100644 src/editor/upload/ibiz-image-select/ibiz-image-select.tsx

diff --git a/src/editor/index.ts b/src/editor/index.ts
index 88f1b0c7d..b7bf73e64 100644
--- a/src/editor/index.ts
+++ b/src/editor/index.ts
@@ -22,7 +22,7 @@ import { IBizListBox, ListBoxEditorProvider } from './list-box';
 import { IBizAutoComplete, AutoCompleteEditorProvider } from './autocomplete';
 import {
   IBizFileUpload,
-  IBizImageSelect,
+  IBizImagePreview,
   IBizImageUpload,
   FileUploaderEditorProvider,
 } from './upload';
@@ -65,7 +65,7 @@ export const IBizEditor = {
     v.component(IBizListBox.name, IBizListBox);
     v.component(IBizAutoComplete.name, IBizAutoComplete);
     v.component(IBizFileUpload.name, IBizFileUpload);
-    v.component(IBizImageSelect.name, IBizImageSelect);
+    v.component(IBizImagePreview.name, IBizImagePreview);
     v.component(IBizImageUpload.name, IBizImageUpload);
     v.component(IBizPicker.name, IBizPicker);
     v.component(IBizMPicker.name, IBizMPicker);
diff --git a/src/editor/upload/ibiz-image-preview/ibiz-image-preview.scss b/src/editor/upload/ibiz-image-preview/ibiz-image-preview.scss
new file mode 100644
index 000000000..228f0af17
--- /dev/null
+++ b/src/editor/upload/ibiz-image-preview/ibiz-image-preview.scss
@@ -0,0 +1,5 @@
+
+@include b('image-preview') {
+  width: 100%;
+  height: 100%;
+}
\ No newline at end of file
diff --git a/src/editor/upload/ibiz-image-preview/ibiz-image-preview.tsx b/src/editor/upload/ibiz-image-preview/ibiz-image-preview.tsx
new file mode 100644
index 000000000..35f8d7692
--- /dev/null
+++ b/src/editor/upload/ibiz-image-preview/ibiz-image-preview.tsx
@@ -0,0 +1,38 @@
+/* eslint-disable no-param-reassign */
+import { defineComponent } from 'vue';
+import {
+  getEditorEmits,
+  getUploadProps,
+  useNamespace,
+} from '@ibiz-template/vue3-util';
+import './ibiz-image-preview.scss';
+import { UploadEditorController } from '../upload-editor.controller';
+
+export const IBizImagePreview = defineComponent({
+  name: 'IBizImagePreview',
+  props: getUploadProps<UploadEditorController>(),
+  emits: getEditorEmits(),
+  setup(props) {
+    const ns = useNamespace('image-preview');
+
+    const c = props.controller;
+
+    return {
+      ns,
+      c,
+    };
+  },
+  render() {
+    return (
+      <div
+        class={[this.ns.b()]}
+        onClick={(e: Event) => {
+          // 阻止事件冒泡
+          e.stopPropagation();
+        }}
+      >
+        <el-image src={this.value} preview-src-list={[this.value]}></el-image>
+      </div>
+    );
+  },
+});
diff --git a/src/editor/upload/ibiz-image-select/ibiz-image-select.scss b/src/editor/upload/ibiz-image-select/ibiz-image-select.scss
deleted file mode 100644
index b64469099..000000000
--- a/src/editor/upload/ibiz-image-select/ibiz-image-select.scss
+++ /dev/null
@@ -1,74 +0,0 @@
-/* image-select 图片单项上传 */
-$image-select: (
-  'box-width': 120px,
-  'box-height': 120px,
-  'list-item-margin': 5px,
-  'list-item-bg-color': getCssVar('bg-color'),
-  'list-item-border': 1px solid getCssVar('border-color', 'light'),
-  'list-item-border-radius': getCssVar('border-radius', 'base'),
-  'list-item-box-shadow': getCssVar('box-shadow'),
-  'list-item-cover-bg-color': rgb(0 0 0 / 60%),
-  'list-item-cover-i-color': getCssVar('color-white'),
-  'list-item-cover-i-size': getCssVar('font-size', 'extra-large'),
-  'list-item-cover-i-margin': 0 2px,
-);
-
-@include b('image-select') {
-  @include set-component-css-var('image-select', $image-select);
-
-  .el-upload--picture-card {
-    width: getCssVar('image-select', 'box-width');
-    height: getCssVar('image-select', 'box-height');
-  }
-
-  .el-upload-list__item {
-    &:hover {
-      .#{bem(image-select-content-action)} {
-        display: block;
-      }
-    }
-  }
-
-  .el-upload-list__item,
-  .#{bem(image-select-content-svg)} {
-    position: relative;
-    width: getCssVar('image-select', 'box-width');
-    height: getCssVar('image-select', 'box-height');
-    line-height: getCssVar('image-select', 'box-height');
-    text-align: center;
-    background: getCssVar('image-select', 'list-item-bg-color');
-    box-shadow: getCssVar('image-select', 'list-item-box-shadow');
-
-    img,
-    svg {
-      width: 100%;
-      height: 100%;
-      vertical-align: top;
-    }
-  }
-
-  .#{bem(image-select-content-action)} {
-    position: absolute;
-    inset: 0;
-    display: none;
-    background: getCssVar('image-select', 'list-item-cover-bg-color');
-
-    ion-icon {
-      margin: getCssVar('image-select', 'list-item-cover-i-margin');
-      font-size: getCssVar('image-select', 'list-item-cover-i-size');
-      color: getCssVar('image-select', 'list-item-cover-i-color');
-      cursor: pointer;
-    }
-  }
-}
-
-@include b(image-select-modal) {
-  .#{bem(image-select-modal-img)},
-  .#{bem(image-select-modal-svg)} {
-    width: 100%;
-
-    img {
-      width: 100%;
-    }
-  }
-}
diff --git a/src/editor/upload/ibiz-image-select/ibiz-image-select.tsx b/src/editor/upload/ibiz-image-select/ibiz-image-select.tsx
deleted file mode 100644
index 2a19781ce..000000000
--- a/src/editor/upload/ibiz-image-select/ibiz-image-select.tsx
+++ /dev/null
@@ -1,155 +0,0 @@
-/* eslint-disable no-param-reassign */
-import { defineComponent, Ref, ref, watch } from 'vue';
-import {
-  getEditorEmits,
-  getUploadProps,
-  useNamespace,
-} from '@ibiz-template/vue3-util';
-import './ibiz-image-select.scss';
-import { UploadEditorController } from '../upload-editor.controller';
-
-export const IBizImageSelect = defineComponent({
-  name: 'IBizImageSelect',
-  props: getUploadProps<UploadEditorController>(),
-  emits: getEditorEmits(),
-  setup(props, { emit }) {
-    const ns = useNamespace('image-select');
-
-    const c = props.controller;
-
-    // 图片文件列表
-    const fileList: Ref<IData[]> = ref([]);
-
-    // 对话框绑定值
-    const dialogVisible = ref(false);
-
-    // img图片地址
-    const dialogImageUrl = ref('');
-
-    // svg图片内容
-    const svg = ref('');
-
-    // 值响应式变更
-    watch(
-      () => props.value,
-      newVal => {
-        if (newVal) {
-          const reg =
-            /^(data:image)|(.(bmp|jpg|jpeg|png|tif|gif|pcx|tga|exif|fpx|svg|psd|cdr|pcd|dxf|ufo|eps|ai|raw|WMF|webp))$/;
-          if (reg.test(newVal)) {
-            dialogImageUrl.value = newVal;
-            svg.value = '';
-          } else {
-            svg.value = newVal;
-          }
-          fileList.value.push({ url: newVal });
-        }
-      },
-      { immediate: true },
-    );
-
-    // 打开图片预览
-    const handlePictureCardPreview = () => {
-      dialogVisible.value = true;
-    };
-
-    // 图片上传
-    const uploading = (file: IData) => {
-      const reg = /(.png|.jpg|.jpeg|.svg)$/;
-      if (reg.test(file.name)) {
-        const svgReg = /.svg$/;
-        const reader = new FileReader();
-        if (svgReg.test(file.name)) {
-          reader.readAsText(file.raw); // 读取文件
-          reader.onload = (evt: IData) => {
-            // 读取完文件之后会回来这里
-            const fileString = evt.target.result; // 读取文件内容
-            emit('change', fileString);
-          };
-        } else {
-          reader.readAsDataURL(file.raw);
-          reader.onload = (evt: IData) => {
-            const fileString: string = evt.target.result;
-            emit('change', fileString);
-          };
-        }
-      } else {
-        ibiz.message.error('文件类型错误');
-      }
-    };
-
-    // 文件删除
-    const removeFile = () => {
-      fileList.value = [];
-      emit('change', null);
-    };
-
-    return {
-      ns,
-      c,
-      fileList,
-      svg,
-      dialogImageUrl,
-      dialogVisible,
-      handlePictureCardPreview,
-      uploading,
-      removeFile,
-    };
-  },
-  render() {
-    return (
-      <div class={[this.ns.b()]}>
-        <el-upload
-          ref='imageUpload'
-          action='#'
-          disabled={this.disabled}
-          list-type={'picture-card'}
-          auto-upload={false}
-          onPreview={this.handlePictureCardPreview}
-          onChange={this.uploading}
-          multiple={this.c.multiple}
-          limit={1}
-          file-list={this.fileList}
-        >
-          {{
-            default: () => {
-              return <ion-icon name='plus'></ion-icon>;
-            },
-            file: () => {
-              return [
-                this.svg ? (
-                  <div v-html={this.svg} class={this.ns.b('content-svg')}></div>
-                ) : (
-                  <div class={this.ns.b('content-img')}>
-                    <img src={this.dialogImageUrl} alt='' />
-                  </div>
-                ),
-                <div class={this.ns.b('content-action')}>
-                  <ion-icon
-                    class={this.ns.e('preview-icon')}
-                    onClick={() => this.handlePictureCardPreview()}
-                    name='search'
-                  ></ion-icon>
-                  <ion-icon
-                    class={this.ns.e('remove-icon')}
-                    onClick={() => this.removeFile()}
-                    name='remove'
-                  ></ion-icon>
-                </div>,
-              ];
-            },
-          }}
-        </el-upload>
-        <el-dialog class={this.ns.b('modal')} v-model={this.dialogVisible}>
-          {this.svg ? (
-            <div v-html={this.svg} class={this.ns.b('modal-svg')}></div>
-          ) : (
-            <div class={this.ns.b('modal-img')}>
-              <img src={this.dialogImageUrl} />
-            </div>
-          )}
-        </el-dialog>
-      </div>
-    );
-  },
-});
diff --git a/src/editor/upload/index.ts b/src/editor/upload/index.ts
index 5b222f902..b86741fea 100644
--- a/src/editor/upload/index.ts
+++ b/src/editor/upload/index.ts
@@ -1,5 +1,5 @@
 export { IBizFileUpload } from './ibiz-file-upload/ibiz-file-upload';
 export { IBizImageUpload } from './ibiz-image-upload/ibiz-image-upload';
-export { IBizImageSelect } from './ibiz-image-select/ibiz-image-select';
+export { IBizImagePreview } from './ibiz-image-preview/ibiz-image-preview';
 export * from './upload-editor.controller';
 export * from './upload-editor.provider';
diff --git a/src/editor/upload/upload-editor.provider.ts b/src/editor/upload/upload-editor.provider.ts
index cf079a01e..c30bad414 100644
--- a/src/editor/upload/upload-editor.provider.ts
+++ b/src/editor/upload/upload-editor.provider.ts
@@ -28,7 +28,7 @@ export class FileUploaderEditorProvider implements IEditorProvider {
         componentName = 'IBizImageUpload';
         break;
       case 'PICTURE_ONE_RAW':
-        componentName = 'IBizImageSelect';
+        componentName = 'IBizImagePreview';
         break;
       default:
     }
-- 
Gitee


From 347887f4797f3b42e89debfe5a92f23b8d3397d9 Mon Sep 17 00:00:00 2001
From: zhangkang <1752553776@qq.com>
Date: Mon, 17 Jul 2023 20:37:15 +0800
Subject: [PATCH 3/5] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81=E9=A1=B9?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80=E9=9D=A2=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/control/data-view/data-view.tsx           | 26 +++++++++++++++--
 src/control/list/list.tsx                     | 28 +++++++++++++++++--
 src/control/panel/panel/panel.controller.ts   | 14 ++++------
 .../view-layout-panel/view-layout-panel.tsx   | 21 ++++++++++++--
 4 files changed, 72 insertions(+), 17 deletions(-)

diff --git a/src/control/data-view/data-view.tsx b/src/control/data-view/data-view.tsx
index f89dde999..be011e28e 100644
--- a/src/control/data-view/data-view.tsx
+++ b/src/control/data-view/data-view.tsx
@@ -1,6 +1,10 @@
 import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
 import { defineComponent, PropType } from 'vue';
-import { IDEDataView, IUIActionGroupDetail } from '@ibiz/model-core';
+import {
+  IDEDataView,
+  ILayoutPanel,
+  IUIActionGroupDetail,
+} from '@ibiz/model-core';
 import { IDataViewControlGroupState } from '@ibiz-template/runtime';
 import { DataViewControlController } from './data-view.controller';
 import './data-view.scss';
@@ -23,12 +27,26 @@ export const DataViewControl = defineComponent({
     mdctrlActiveMode: { type: Number, default: 2 },
     singleSelect: { type: Boolean, default: true },
   },
-  setup() {
+  setup(props) {
     const c = useControlController(
       (...args) => new DataViewControlController(...args),
     );
     const ns = useNamespace(`control-${c.model.controlType!.toLowerCase()}`);
 
+    // 绘制项布局面板
+    const renderPanelItem = (item: IData, modelData: ILayoutPanel) => {
+      const { context, params } = c;
+      return (
+        <iBizViewLayoutPanelControl
+          data={item}
+          modelData={modelData}
+          context={context}
+          params={params}
+          onClick={() => c.onRowClick(item)}
+          onDblclick={() => c.onDbRowClick(item)}
+        ></iBizViewLayoutPanelControl>
+      );
+    };
     // 绘制项行为
     const renderItemAction = (item: IData) => {
       return (
@@ -84,6 +102,8 @@ export const DataViewControl = defineComponent({
           height: `${c.model.cardHeight}px`,
         });
       }
+      const panel = props.modelData.itemLayoutPanel;
+
       return (
         <el-card
           shadow='hover'
@@ -92,7 +112,7 @@ export const DataViewControl = defineComponent({
           onClick={() => c.onRowClick(item)}
           onDblclick={() => c.onDbRowClick(item)}
         >
-          {renderDefaultItem(item)}
+          {panel ? renderPanelItem(item, panel) : renderDefaultItem(item)}
         </el-card>
       );
     };
diff --git a/src/control/list/list.tsx b/src/control/list/list.tsx
index 5383466fe..1580bef6e 100644
--- a/src/control/list/list.tsx
+++ b/src/control/list/list.tsx
@@ -1,6 +1,6 @@
 import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
 import { defineComponent, PropType } from 'vue';
-import { IDEList } from '@ibiz/model-core';
+import { IDEList, ILayoutPanel } from '@ibiz/model-core';
 import { ListController } from './list.controller';
 import './list.scss';
 import { isNil } from 'lodash-es';
@@ -30,10 +30,31 @@ export const ListControl = defineComponent({
      */
     singleSelect: { type: Boolean, default: true },
   },
-  setup() {
+  setup(props) {
     const c = useControlController((...args) => new ListController(...args));
     const ns = useNamespace(`control-${c.model.controlType!.toLowerCase()}`);
 
+    // 绘制项布局面板
+    const renderPanelItem = (item: IData, modelData: ILayoutPanel) => {
+      const { context, params } = c;
+      // 是否选中数据
+      const findIndex = c.state.selectedData.findIndex(data => {
+        return data.srfkey === item.srfkey;
+      });
+      const itemClass = [ns.b('item'), ns.is('active', findIndex !== -1)];
+      return (
+        <iBizViewLayoutPanelControl
+          class={itemClass}
+          data={item}
+          modelData={modelData}
+          context={context}
+          params={params}
+          onClick={() => c.onRowClick(item)}
+          onDblclick={() => c.onDbRowClick(item)}
+        ></iBizViewLayoutPanelControl>
+      );
+    };
+
     // 绘制默认列表项
     const renderDefaultItem = (item: IData) => {
       // 是否选中数据
@@ -55,8 +76,9 @@ export const ListControl = defineComponent({
 
     // 绘制卡片内容
     const renderListContent = () => {
+      const panel = props.modelData.itemLayoutPanel;
       return c.state.items.map(item => {
-        return renderDefaultItem(item);
+        return panel ? renderPanelItem(item, panel) : renderDefaultItem(item);
       });
     };
 
diff --git a/src/control/panel/panel/panel.controller.ts b/src/control/panel/panel/panel.controller.ts
index 1f50b819d..b003e28cc 100644
--- a/src/control/panel/panel/panel.controller.ts
+++ b/src/control/panel/panel/panel.controller.ts
@@ -1,5 +1,5 @@
 /* eslint-disable no-param-reassign */
-import { ModelError, RuntimeError } from '@ibiz-template/core';
+import { RuntimeError } from '@ibiz-template/core';
 import {
   ControlController,
   getPanelItemProvider,
@@ -90,6 +90,10 @@ export class PanelController<
     // });
   }
 
+  protected async onMounted(): Promise<void> {
+    this.load();
+  }
+
   /**
    * 初始化面板成员控制器
    *
@@ -170,14 +174,8 @@ export class PanelController<
         }
         break;
       // 不获取（使用传入数据）
-      case 0:
-        data = this.inputData || {};
-        break;
       default:
-        throw new ModelError(
-          this.model,
-          `未支持的数据获取模式${this.model.dataMode}`,
-        );
+        data = this.inputData || {};
     }
     return data;
   }
diff --git a/src/control/panel/view-layout-panel/view-layout-panel.tsx b/src/control/panel/view-layout-panel/view-layout-panel.tsx
index ab4bc92f9..f6d57f6c8 100644
--- a/src/control/panel/view-layout-panel/view-layout-panel.tsx
+++ b/src/control/panel/view-layout-panel/view-layout-panel.tsx
@@ -7,6 +7,7 @@ import {
   VNode,
   reactive,
   ComponentPublicInstance,
+  watch,
 } from 'vue';
 import {
   IPanelContainer,
@@ -58,7 +59,6 @@ function renderPanelItem(
       });
     };
   }
-
   return h(
     component,
     {
@@ -82,14 +82,29 @@ export const ViewLayoutPanelControl = defineComponent({
     },
     context: { type: Object as PropType<IContext>, required: true },
     params: { type: Object as PropType<IParams>, default: () => ({}) },
-    inputData: Object as PropType<IData>,
+    data: Object as PropType<IData>,
   },
-  setup() {
+  setup(props) {
     const c = useControlController(
       (...args) => new ViewLayoutPanelController(...args),
     );
     const ns = useNamespace(`control-${c.model.controlType!.toLowerCase()}`);
 
+    watch(
+      () => {
+        props.data!;
+      },
+      () => {
+        if (props.data) {
+          c.setInputData(props.data);
+          c.load();
+        }
+      },
+      {
+        immediate: true,
+      },
+    );
+
     c.evt.on('onCreated', () => {
       // 面板成员state响应式
       const keys = Object.keys(c.panelItems);
-- 
Gitee


From 7b3bee17c0aa321252abefa15913c1e05d2cabf7 Mon Sep 17 00:00:00 2001
From: zhangkang <1752553776@qq.com>
Date: Mon, 17 Jul 2023 20:37:51 +0800
Subject: [PATCH 4/5] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E9=9D=A2=E6=9D=BF?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E7=BB=84=E4=BB=B6=E5=8A=A8=E6=80=81=E6=96=87?=
 =?UTF-8?q?=E6=9C=AC=E5=80=BC=E4=B8=8D=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../panel-button/panel-button.tsx             | 175 +++++++++---------
 1 file changed, 88 insertions(+), 87 deletions(-)

diff --git a/src/panel-component/panel-button/panel-button.tsx b/src/panel-component/panel-button/panel-button.tsx
index 88b890e67..5c1ea043d 100644
--- a/src/panel-component/panel-button/panel-button.tsx
+++ b/src/panel-component/panel-button/panel-button.tsx
@@ -5,99 +5,100 @@ import { PanelButtonController } from './panel-button.controller';
 import './panel-button.scss';
 
 export const PanelButton = defineComponent({
-    name: 'IBizPanelButton',
-    props: {
-        modelData: {
-            type: Object as PropType<IPanelButton>,
-            required: true,
-        },
-        controller: {
-            type: PanelButtonController,
-            required: true,
-        },
+  name: 'IBizPanelButton',
+  props: {
+    modelData: {
+      type: Object as PropType<IPanelButton>,
+      required: true,
     },
-    setup(props) {
-        const ns = useNamespace('panel-button');
-
-        const { 
-            caption, 
-            captionItemName, 
-            renderMode, 
-            buttonStyle, 
-            showCaption,
-            sysImage, 
-            codeName,
-        } = props.modelData;
+    controller: {
+      type: PanelButtonController,
+      required: true,
+    },
+  },
+  setup(props) {
+    const ns = useNamespace('panel-button');
 
-        const { 
-            panel,
-            state, 
-            buttonState, 
-        } = props.controller;
+    const {
+      caption,
+      captionItemName,
+      renderMode,
+      buttonStyle,
+      showCaption,
+      sysImage,
+      codeName,
+    } = props.modelData;
 
-        const captionText = computed(() => {
-            if (captionItemName && panel.data) {
-                return panel.data[captionItemName];
-            }
-            return caption;
-        });
+    const { panel, state, buttonState } = props.controller;
 
-        const buttonType = computed(() => {
-            let type: string = 'default';
-            if (Object.is(renderMode, 'LINK')) {
-                type = 'text';
-            } else if (buttonStyle) {
-                if (
-                    Object.is(buttonStyle, 'DEFAULT') ||
-                    Object.is(buttonStyle, 'STYLE2') ||
-                    Object.is(buttonStyle, 'STYLE3') ||
-                    Object.is(buttonStyle, 'STYLE4')
-                ) {
-                    type = 'default';
-                } else if (Object.is(buttonStyle, 'DANGER')) {
-                    type = 'error';
-                } else if (Object.is(buttonStyle, 'INVERSE')) {
-                    type = 'primary';
-                } else {
-                    type = buttonStyle.toLowerCase();
-                }
-            }
-            return type
-        })
+    const captionText = computed(() => {
+      if (captionItemName && panel.data) {
+        return panel.data[captionItemName.toLowerCase()];
+      }
+      return caption;
+    });
 
-        const handleButtonClick = (event: MouseEvent) => {
-            props.controller.onActionClick(event)
+    const buttonType = computed(() => {
+      let type: string = 'default';
+      if (Object.is(renderMode, 'LINK')) {
+        type = 'text';
+      } else if (buttonStyle) {
+        if (
+          Object.is(buttonStyle, 'DEFAULT') ||
+          Object.is(buttonStyle, 'STYLE2') ||
+          Object.is(buttonStyle, 'STYLE3') ||
+          Object.is(buttonStyle, 'STYLE4')
+        ) {
+          type = 'default';
+        } else if (Object.is(buttonStyle, 'DANGER')) {
+          type = 'error';
+        } else if (Object.is(buttonStyle, 'INVERSE')) {
+          type = 'primary';
+        } else {
+          type = buttonStyle.toLowerCase();
         }
+      }
+      return type;
+    });
 
-        return {
-            ns,
-            captionText,
-            buttonType,
-            showCaption,
-            sysImage, 
-            codeName,
-            state, 
-            buttonState, 
-            handleButtonClick
-        };
-    },
-    render() {
-        if (this.state.visible && this.buttonState.visible) {
-            return (
-                <el-button 
-                    type={this.buttonType}
-                    disabled={this.state.disabled && this.buttonState.disabled}
-                    onClick={this.handleButtonClick}
-                    class={[this.ns.b(), this.ns.m(this.codeName)]}>
-                        <div class={this.ns.b('content')}>
-                            <iBizIcon class={this.ns.bm('content', 'icon')} icon={this.sysImage} />
-                            <span class={this.ns.bm('content', 'caption')}>
-                                {this.showCaption ? this.captionText : null}
-                            </span>
-                        </div>
-                </el-button>
-            );
-        }
-    },
+    const handleButtonClick = (event: MouseEvent) => {
+      props.controller.onActionClick(event);
+    };
+
+    return {
+      ns,
+      captionText,
+      buttonType,
+      showCaption,
+      sysImage,
+      codeName,
+      state,
+      buttonState,
+      handleButtonClick,
+    };
+  },
+  render() {
+    if (this.state.visible && this.buttonState.visible) {
+      return (
+        <el-button
+          type={this.buttonType}
+          disabled={this.state.disabled && this.buttonState.disabled}
+          onClick={this.handleButtonClick}
+          class={[this.ns.b(), this.ns.m(this.codeName)]}
+        >
+          <div class={this.ns.b('content')}>
+            <iBizIcon
+              class={this.ns.bm('content', 'icon')}
+              icon={this.sysImage}
+            />
+            <span class={this.ns.bm('content', 'caption')}>
+              {this.showCaption ? this.captionText : null}
+            </span>
+          </div>
+        </el-button>
+      );
+    }
+    return null;
+  },
 });
 export default PanelButton;
-- 
Gitee


From 82d939709731eb620f37fec1e3a70584fe5dbb8b Mon Sep 17 00:00:00 2001
From: zhangkang <1752553776@qq.com>
Date: Mon, 17 Jul 2023 20:38:27 +0800
Subject: [PATCH 5/5] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E9=9D=A2=E6=9D=BF?=
 =?UTF-8?q?=E5=B1=9E=E6=80=A7=E6=88=90=E5=91=98=E5=80=BC=E5=BC=82=E5=B8=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/panel-component/panel-field/panel-field.controller.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/panel-component/panel-field/panel-field.controller.ts b/src/panel-component/panel-field/panel-field.controller.ts
index e5f9080b5..bedac9960 100644
--- a/src/panel-component/panel-field/panel-field.controller.ts
+++ b/src/panel-component/panel-field/panel-field.controller.ts
@@ -65,7 +65,7 @@ export class PanelFieldController
     if (!viewFieldName) {
       throw new RuntimeModelError(this.model, '没有绑定数据项');
     }
-    return this.data[viewFieldName!];
+    return this.data[viewFieldName.toLowerCase()];
   }
 
   /**
-- 
Gitee