低代码优化

src/Dynamic/ConfigRenderComponent/DForm/FormItem/DLov.vue

@@ -2,7 +2,7 @@
  * @Author: zong.wang01@hand-china.com
  * @Date: 2024-08-01 09:55:12
  * @LastEditors: zong.wang01@hand-china.com
- * @LastEditTime: 2024-10-12 15:00:31
+ * @LastEditTime: 2024-10-12 15:43:25
  * @Version: 1.0.0
  * @Description: 动态渲染-Lov
  * @Copyright: Copyright (c) 2021, Hand-RongJing
@@ -165,7 +165,6 @@ export default {
   watch: {
     value: {
       handler (newValue, oldValue) {
-        console.log(' this.handler',  newValue, oldValue)
         if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) {
           this.currentValue = newValue
           this.fieldValue = newValue ? JSON.stringify(newValue) : ''
@@ -177,7 +176,6 @@ export default {
   mounted () {
     this.currentValue = this.value
     this.fieldValue = this.value ? JSON.stringify(this.value) : ''
-    console.log(' this.currentValue',  this.currentValue)
     this.getLovConfig()
   },
   methods: {

src/Dynamic/ConfigRenderComponent/DTable/index.vue

@@ -2,7 +2,7 @@
  * @Author: zong.wang01@hand-china.com
  * @Date: 2024-07-29 10:51:56
  * @LastEditors: zong.wang01@hand-china.com
- * @LastEditTime: 2024-09-13 15:25:03
+ * @LastEditTime: 2024-10-14 09:36:28
  * @Version: 1.0.0
  * @Description: 表格渲染
  * @Copyright: Copyright (c) 2021, Hand-RongJing
@@ -13,7 +13,7 @@
       :title="tabInfo.description" 
       :tabButtons="tabInfo.tabButtons || []" 
       :buttonsFun="buttonsClick"
-      :showBtns="!readOnly"
+      :showBtns="true"
     />
 
     <div>
@@ -40,7 +40,7 @@
           :title="tabInfo.description" 
           :tabButtons="tabInfo.tabButtons || []" 
           :buttonsFun="buttonsClick"
-          :showBtns="!readOnly"
+          :showBtns="true"
         />
       </template>
       <van-list

src/Dynamic/ConfigRenderComponent/DTitle/DTitleRender.jsx

+/*
+ * @Author: zong.wang01@hand-china.com
+ * @Date: 2024-07-30 09:41:54
+ * @LastEditors: zong.wang01@hand-china.com
+ * @LastEditTime: 2024-08-27 14:27:21
+ * @Version: 1.0.0
+ * @Description: 表格列渲染
+ * @Copyright: Copyright (c) 2021, Hand-RongJing
+ */
+import Vue from 'vue';
+
+const DTitleRender = {
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    extraRender: {
+      type: Function,
+      default: null
+    },
+    instance: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  // 为了弥补缺少的实例
+  // 提供第二个参数作为上下文
+  render: function (h, context) {
+    return this.extraRender ? this.extraRender(this.instance) : <div class="title">{this.title}</div>
+  }
+};
+ 
+export default DTitleRender;
\ No newline at end of file

src/Dynamic/ConfigRenderComponent/DTitle/index.vue

@@ -2,19 +2,19 @@
  * @Author: zong.wang01@hand-china.com
  * @Date: 2024-08-02 15:32:36
  * @LastEditors: zong.wang01@hand-china.com
- * @LastEditTime: 2024-08-19 14:48:45
+ * @LastEditTime: 2024-10-14 09:30:54
  * @Version: 1.0.0
  * @Description: 组件头部渲染
  * @Copyright: Copyright (c) 2021, Hand-RongJing
 -->
 <template>
   <div class="layout-title">
-    <div class="title">{{title}}</div>
+    <d-title-render :title="title" :extraRender="extraRender" :parentRef="$parent" />
     <div class="title-btns" v-if="showBtns">
-      <van-button 
+      <van-button
         v-for="btn in defaultBtns"
         round
-        size="mini" 
+        size="mini"
         :key="btn.name"
         :icon="buttonIcon[btn.name]"
         class="title-button"
@@ -40,6 +40,7 @@
 
 <script>
 import { Button, Icon, Popover } from 'vant';
+import DTitleRender from './DTitleRender.jsx';
 
 export default {
   name: 'DTitle',
@@ -47,11 +48,12 @@ export default {
     [Icon.name]: Icon,
     [Button.name]: Button,
     [Popover.name]: Popover,
+    DTitleRender
   },
   props: {
     title: {
       type: String,
-      default: '',
+      default: ''
     },
     tabButtons: {
       type: Array,
@@ -63,9 +65,12 @@ export default {
     },
     showBtns: {
       type: Boolean,
-      default: false,
+      default: false
+    },
+    extraRender: {
+      type: Function,
+      default: null
     }
-
   },
   data () {
     return {
@@ -115,6 +120,18 @@ export default {
     flex-wrap: nowrap;
     align-items: center;
     padding: 15px 14px;
+    position: relative;
+    &::before {
+      content: '';
+      background-color: @primary-color;
+      position: absolute;
+      left: 0;
+      top: 50%;
+      margin-top: -9px;
+      width: 4px;
+      height: 18px;
+      border-radius: 0px 20px 20px 0px;
+    }
     .title {
       position: relative;
       max-width: 50%;
@@ -123,17 +140,6 @@ export default {
       color: #333333;
       font-weight: 500;
       // border-left: 5px solid @primary-color;
-      &::before {
-        content: '';
-        background-color: @primary-color;
-        position: absolute;
-        left: -14px;
-        top: 50%;
-        margin-top: -9px;
-        width: 4px;
-        height: 18px;
-        border-radius: 0px 20px 20px 0px;
-      }
     }
     .title-btns{
       // text-align: right;
@@ -142,7 +148,7 @@ export default {
       position: relative;
       align-items: center;
       justify-content: end;
-      
+
       .title-button {
         padding: 0 12px;
         height: 24px;

src/Dynamic/ConfigRenderComponent/LayoutBuilder.jsx

@@ -2,7 +2,7 @@
  * @Author: zong.wang01@hand-china.com
  * @Date: 2024-07-30 21:21:37
  * @LastEditors: zong.wang01@hand-china.com
- * @LastEditTime: 2024-09-19 16:05:29
+ * @LastEditTime: 2024-10-12 15:35:29
  * @Version: 1.0.0
  * @Description: 
  * @Copyright: Copyright (c) 2021, Hand-RongJing
@@ -84,10 +84,10 @@ export class ColumnBuilder extends BaseBuilder {
     this.layoutCode = '';
 
     /**
-     * 页脚渲染
+     * 自定义字段配置
      * @type {*[]}
      */
-    this.tableFooterRenderers = [];
+    this.customFieldsConfig = [];
 
     this.createElement= () => {}
     super.init();
@@ -105,6 +105,11 @@ export class ColumnBuilder extends BaseBuilder {
     return getCustomizedProp(this.layoutCode, this.tabCode, columnName, renderers);
   }
 
+  getCurrentFieldCustom(columnName) {
+    const field = this.customFieldsConfig.find(o => o.columnName === columnName) || {};
+    return field;
+  }
+
   /**
    * 生成表单下字段组件数组
    * @param {Array.<{columnName: string, columnSeq: number, rowSeq: number, cascadeValue: string, validationTypeDisplay: string, columnCount: number, rowCount: number, inputModeDisplay: string, width: number}>} fields
@@ -113,6 +118,7 @@ export class ColumnBuilder extends BaseBuilder {
    */
   initFields(fields, cascadeKey = '') {
     const newFields = fields.map(field => {
+      const customConfig = this.getCurrentFieldCustom(field.columnName);
       const customerRender = this.getCustomizedRenderer(field.columnName);
       return {
         ...field,
@@ -120,7 +126,8 @@ export class ColumnBuilder extends BaseBuilder {
         required: field.inputModeDisplay === "REQUIRED",
         clearFlag: field.clearButton === 'Y',
         renderer: customerRender.renderer,
-        dataClass: customerRender.className
+        dataClass: customerRender.className,
+        ...customConfig,
       }
       // if (field.validationTypeDisplay === 'UrlField') {
       //   const {renderer} = this.getCustomizedRenderer(field.columnName, field);
@@ -183,6 +190,7 @@ export class ColumnBuilder extends BaseBuilder {
       case 'Tree': {
         const newFields = this.fields.map(field => { // .filter(o => o.isVisible === 'Y')
           const customizedRenderer = this.getCustomizedRenderer(field.columnName);
+          const customConfig = this.getCurrentFieldCustom(field.columnName);
           return {
             ...field,
             readOnly: field.inputModeDisplay === "READONLY",
@@ -190,7 +198,8 @@ export class ColumnBuilder extends BaseBuilder {
             clearFlag: field.clearButton === 'Y',
             renderer: customizedRenderer.renderer,
             formRenderer: customizedRenderer.formRenderer,
-            dataClass: customizedRenderer.className
+            dataClass: customizedRenderer.className,
+            ...customConfig,
           }
         });
         // return newFields;
@@ -388,12 +397,12 @@ class BaseComponentBuilder extends BaseBuilder {
   getHeaderRenderer() {
     const currentHeaderExtra = getHeaderExtrasProp(this.layoutCode, this.tabCode, this.componentHeaderExtras);
     let renderer = currentHeaderExtra.length > 0 ? currentHeaderExtra[0].renderer : undefined;
-    if (renderer) {
-      renderer = renderer({
-        dataSet: this.dataSet,
-        record: this.dataSet ? this.dataSet.current : undefined,
-      });
-    }
+    // if (renderer) {
+    //   renderer = renderer({
+    //     dataSet: this.dataSet,
+    //     record: this.dataSet ? this.dataSet.current : undefined,
+    //   });
+    // }
     return {renderer};
   }
 
@@ -475,6 +484,7 @@ class BaseComponentBuilder extends BaseBuilder {
   build() {
     this.handleUrls();
     const refKey = `${parseCode(this.layoutCode)}_${parseCode(this.tabCode)}_${this.tabType.toLowerCase()}Ref`;
+    const headExtraRender = this.getHeaderRenderer();
     switch (this.tabType) {
       case 'Table':
       case 'Tree':
@@ -487,7 +497,8 @@ class BaseComponentBuilder extends BaseBuilder {
               // buttons: this.buttons,
               columns: this.columns.fields,
               originColumns: this.columns._originFields,
-              componentButtons: this.componentButtons
+              componentButtons: this.componentButtons,
+              titleExtraRender: headExtraRender.renderer
             },
             ref:`DTABLE_${this.tabCode}`,
           },
@@ -507,7 +518,8 @@ class BaseComponentBuilder extends BaseBuilder {
                 fields: newFields.fields,
                 originFields: newFields._originFields,
                 tabInfo: this.props,
-                componentButtons: this.componentButtons
+                componentButtons: this.componentButtons,
+                titleExtraRender: headExtraRender.renderer
               },
               ref:`DFORM_${this.tabCode}`,
             }
@@ -571,12 +583,6 @@ export class ComponentBuilder extends BaseComponentBuilder {
      */
     this.componentHeaderExtras = [];
 
-    /**
-     * 数据集
-     * @type {undefined|DataSet}
-     * @public
-     */
-    this.dataSet = undefined;
     super.init();
   }
 

src/Dynamic/LayoutButtons/index.vue

@@ -8,7 +8,7 @@
  * @Copyright: Copyright (c) 2021, Hand-RongJing
 -->
 <template>
-  <div :class="safeArea ? 'van-safe-area-bottom layout-buttons' : 'layout-buttons'" v-if="!readOnly && layoutButtons.length">
+  <div :class="safeArea ? 'van-safe-area-bottom layout-buttons' : 'layout-buttons'" v-if="layoutButtons.length">
     <div class="layout-buttons-content" :id="id" >
       <van-popover
         v-if="layoutButtons.length > num"

src/Dynamic/index.vue

@@ -2,7 +2,7 @@
  * @Author: zong.wang01@hand-china.com
  * @Date: 2024-07-29 10:51:56
  * @LastEditors: zong.wang01@hand-china.com
- * @LastEditTime: 2024-09-19 15:52:43
+ * @LastEditTime: 2024-10-12 15:42:34
  * @Version: 1.0.0
  * @Description: 
  * @Copyright: Copyright (c) 2021, Hand-RongJing
@@ -23,7 +23,9 @@
         v-if="configDatas.id && !loading"
         :componentRenderers="componentRenderers"
         :staticLayoutTabs="staticLayoutTabs"
+        :componentHeaderExtraRenders="componentHeaderExtraHandler"
         :componentButtons="componentButtons"
+        :fieldCustomConfigs="fieldCustomConfigs"
       />
     </d-content>
     <layout-buttons 
@@ -38,7 +40,7 @@
 
 <script>
 import {NavBar, Loading, Toast} from 'vant';
-import {DView, DHeader, DContent, DScroll} from './LayoutComponents';
+import {DView, DContent} from './LayoutComponents';
 import LayoutButtons from './LayoutButtons';
 import ConfigRenderComponent from './ConfigRenderComponent/index.jsx';
 import {query, queryRoute, save} from './service'
@@ -55,9 +57,7 @@ export default {
     LayoutButtons,
     ConfigRenderComponent,
     DView,
-    DHeader,
-    DContent,
-    DScroll
+    DContent
   },
   props: {
     layoutCode: { // 页面编码
@@ -76,7 +76,11 @@ export default {
       type: Array,
       default: () => []
     },
-    headerButtons: { // 页面按钮渲染 
+    headerButtons: { // 页面按钮渲染
+      type: Array,
+      default: () => []
+    },
+    componentHeaderExtraHandler: { // 组件头渲染
       type: Array,
       default: () => []
     },
@@ -92,6 +96,10 @@ export default {
       type: Array,
       default: () => []
     },
+    fieldCustomConfigs: { // 字段
+      type: Array,
+      default: () => []
+    },
     configLoadHandle: {
       type: Function,
       default: () => {}
@@ -100,13 +108,17 @@ export default {
       type: Function,
       default: () => {}
     },
-    safeArea: { // 是否显示安全区域
+     safeArea: { // 是否显示安全区域
       type: Boolean,
       default: true
     },
     routeParams: {
       type: Object,
       default: null
+    },
+    formUpdate: { // 表单数据更新
+      type: Function,
+      default: () => {}
     }
   },
   data () {
@@ -123,26 +135,37 @@ export default {
           name: 'save',
           clickFunction: this.layoutSave,
         }, 
-      ]
+      ],
     }
   },
-  provide() {
+  provide () {
     return {
       addRef: this.addRef,
       setDataSetData: this.setDataSetData,
       dataLoadHandle: this.dataLoadHandle,
       dynamicInfo: this.getDynamicInfo
-    };
+    }
   },
   created() {
     this.init();
   },
   activated() {
-   this.init();
-    this.layoutCodeQuery();
+    this.init();
+    this.layoutCodeQuery() 
   },
   beforeMount() {
-    this.layoutCodeQuery();
+    this.layoutCodeQuery()
+  },
+  watch: {
+    routeParams: {
+      handler (newValue, oldValue) {
+        if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) {
+          this.init();
+          this.layoutCodeQuery()
+        }
+      },
+      deep: true
+    },
   },
   methods: {
     init() {
@@ -167,28 +190,29 @@ export default {
 
       const qpara = {
         ...this.params,
-        readOnly,
+        readOnly
       }
 
       if (JSON.stringify(this.qpara) === JSON.stringify(qpara)) {
-        this.loading = false;
-        return;
+        this.loading = false
+        return
       }
 
-      this.qpara = qpara;
-      
+      this.qpara = qpara
+
       let res = {datas: {}, params: {}}
       if (this.layoutCode) {
-        res = await query(this.layoutCode, this.qpara);
+        res = await query(this.layoutCode, this.qpara)
       } else {
-        res = await queryRoute(this.layoutCode, this.qpara);
+        res = await queryRoute(this.layoutCode, this.qpara)
       }
-      this.loading = false;
-      this.configDatas = {...res.datas};
-      this.params = res.params;
-      this.dataSetObject = this.transformDateSetTree(res.datas.dataSetsTree);
-
-      this.configLoadHandle(this.getDynamicInfo());
+      this.loading = false
+      this.configDatas = {...res.datas}
+      this.params = res.params
+      this.dataSetObject = this.transformDateSetTree(res.datas.dataSetsTree, res.datas)
+      this.$nextTick(() => {
+        this.configLoadHandle(this.getDynamicInfo())
+      })
     },
     transformDateSetTree(tree) {
       let obj = {};
@@ -207,13 +231,14 @@ export default {
     setDataSetData(tabCode, data) {
       this.dataSetObject[tabCode].data = data;
     },
-    getDynamicInfo() {
+    getDynamicInfo () {
       return { // 配置的所有信息
         layoutCode: this.layoutCode, // 布局编码
         config: this.configDatas, // 页面配置信息
         dataSetObject: this.dataSetObject, // 页面datasetTree的转换，方便快速找出datasetname
         queryParams: this.qpara, // 页面查询参数
-        EventBus: EventBus
+        EventBus: EventBus,
+        formUpdate: this.formUpdate
         // componentRenderers: this.componentRenderers // 组件渲染内容
       }
     },
@@ -242,7 +267,7 @@ export default {
         if (window.history.state.position > 0) return window.history.back();
       }
     }
-  },
+  }
 }
 </script>
 

src/pages/dynamicTest/testDynamic.vue

@@ -2,7 +2,7 @@
  * @Author: zong.wang01@hand-china.com
  * @Date: 2024-08-16 09:39:36
  * @LastEditors: zong.wang01@hand-china.com
- * @LastEditTime: 2024-10-12 14:57:31
+ * @LastEditTime: 2024-10-14 09:27:49
  * @Version: 1.0.0
  * @Description: 
  * @Copyright: Copyright (c) 2021, Hand-RongJing
@@ -50,7 +50,7 @@ export default {
     }
   },
   created() {
-    window.localStorage.access_token = 'f5872e6f-6e47-498f-ba2c-db07470f0f25'
+    window.localStorage.access_token = 'a0876b60-d54e-4008-b43e-87cdead3d664'
   },
   methods: {
     configLoadHandle(config) { // 查询配置信息之后的回调