表格自定义url渲染，布局按钮自定义

src/Dynamic/ConfigRenderComponent/DForm/FormItem/DCustomRender.jsx

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

src/Dynamic/ConfigRenderComponent/DForm/FormItem/DUrl.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-08-14 10:30:30
+ * @LastEditTime: 2024-08-14 17:40:37
  * @Version: 1.0.0
  * @Description: 动态渲染-超链接组件
  * @Copyright: Copyright (c) 2021, Hand-RongJing
@@ -10,25 +10,42 @@
 <template>
   <van-cell center class="d-form-item d-url" :required="required">
     <d-label :label="label" :help="help" slot="title" />
-    <div class="d-url-value cell-value">
-      <img src="../../../assets/url-icon.png" alt="" class="right-icon" />
-      <a>{{value}}</a>
+      <d-custom-render 
+        :getData="getCurrentRecord"
+        :renderer="renderer"
+        :fieldConfig="fieldConfig"
+      >
+      <div class="d-url-value cell-value">
+        <img src="../../../assets/url-icon.png" alt="" class="right-icon" />
+        <a>{{value}}</a>
+      </div>
+      </d-custom-render>
+      <!-- <fragment v-else>
+        <img src="../../../assets/url-icon.png" alt="" class="right-icon" />
+        <a>{{value}}</a>
+      </fragment> -->
     </div>
   </van-cell>
 </template>
 
 <script>
 import {Cell, Checkbox} from 'vant';
+import DCustomRender from './DCustomRender.jsx';
 import DLabel from './DLabel';
 
 export default {
   name: 'DUrl',
   components: {
     DLabel,
+    DCustomRender,
     [Cell.name]: Cell,
     [Checkbox.name]: Checkbox,
   },
   props: {
+    fieldConfig: {
+      type: Object,
+      default: () => {}
+    },
     help: {
       type: String,
       default: ''
@@ -48,6 +65,16 @@ export default {
     required: {
       type: Boolean,
       default: false,
+    },
+    renderer: {
+      type: Function,
+      default: null
+    },
+    getCurrentRecord: {
+      type: Function,
+      default: () => {
+        return {}
+      }
     }
   },
   data () {
@@ -71,7 +98,7 @@ export default {
   // @import './index.less';
 
   .d-url {
-    padding: 6px 14px;
+    padding: 12px 14px;
     .d-url-value {
       padding: 5px 12px;
       background: #3789FF10;

src/Dynamic/ConfigRenderComponent/DForm/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-08-14 16:02:32
+ * @LastEditTime: 2024-08-14 17:32:53
  * @Version: 1.0.0
  * @Description: 表单渲染
  * @Copyright: Copyright (c) 2021, Hand-RongJing
@@ -99,12 +99,15 @@
 
         <d-url
           v-if="field.validationTypeDisplay === 'UrlField'"
+          v-model="fieldsObj[field.columnName]"
           :name="field.columnName"
           :label="field.description"
           :help="field.help"
-          v-model="fieldsObj[field.columnName]"
+          :renderer="field.renderer"
+          :fieldConfig="field"
           :disabled="readOnly || field.readOnly"
           :required="field.required"
+          :getCurrentRecord="getCurrentRecord"
           @change="fieldChange"
         />
       </fragment>
@@ -306,7 +309,10 @@ export default {
       });
     },
     reset() {
-this.fieldsObj = {...this.originFieldsObj};
+      this.fieldsObj = {...this.originFieldsObj};
+    },
+    getCurrentRecord() {
+      return this.fieldsObj;
     }
   },
 }

src/Dynamic/ConfigRenderComponent/DTable/DTableTd.jsx

@@ -2,7 +2,7 @@
  * @Author: zong.wang01@hand-china.com
  * @Date: 2024-07-30 09:41:54
  * @LastEditors: zong.wang01@hand-china.com
- * @LastEditTime: 2024-08-12 16:12:51
+ * @LastEditTime: 2024-08-14 16:21:18
  * @Version: 1.0.0
  * @Description: 表格列渲染
  * @Copyright: Copyright (c) 2021, Hand-RongJing
@@ -17,6 +17,10 @@ const DTableTd = {
       type: Object,
       default: () => ({})
     },
+    index: {
+      type: Number,
+      default: null,
+    },
     columnName: {
       type: String,
       default: '',
@@ -47,7 +51,7 @@ const DTableTd = {
   // 提供第二个参数作为上下文
   render: function (h, context) {
     return this.tdRender ? 
-      this.tdRender(this.record) : 
+      this.tdRender(this.record, this.index) : 
       <span>{this.$slots.default || (this.columnValue() || '--')}</span>
   }
 };

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-08-14 09:16:29
+ * @LastEditTime: 2024-08-14 16:22:00
  * @Version: 1.0.0
  * @Description: 表格渲染
  * @Copyright: Copyright (c) 2021, Hand-RongJing
@@ -30,6 +30,7 @@
                 <d-table-td
                   :tdRender="column.renderer"
                   :columnName="column.columnName" 
+                  :index="pIndex"
                   :record="item" />
               </van-checkbox>
               <van-icon name="records-o" v-if="showEdit" @click="showRecord(item, pIndex)"/>
@@ -40,6 +41,7 @@
                 :tdRender="column.renderer"
                 :columnName="column.columnName" 
                 :record="item"
+                :index="pIndex"
                 :typeDisplay="column.validationTypeDisplay"
               >
                 <template v-if="booleanType.includes(column.validationTypeDisplay)">

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-08-13 16:41:48
+ * @LastEditTime: 2024-08-14 16:35:48
  * @Version: 1.0.0
  * @Description: 
  * @Copyright: Copyright (c) 2021, Hand-RongJing
@@ -95,20 +95,20 @@ export class ColumnBuilder extends BaseBuilder {
 
   getCustomizedRenderer(columnName) {
     const currentRenderers = this.getCurrentRenderers(columnName, this.componentRenderers);
-    let renderer;
-    if (this.type === 'Table') {
-      renderer = currentRenderers.length > 0 ? currentRenderers[0].renderer : undefined;
-    } else if (this.type === 'Form') {
-      if (currentRenderers.length > 0 && isFunction(currentRenderers[0].renderer) && this.dataSet) {
-        renderer = currentRenderers[0].renderer({
-          dataSet: this.dataSet,
-          record: this.dataSet ? this.dataSet.current : undefined,
-        });
-      }
-    }
-    if (currentRenderers.length > 0) {
-      return { renderer, editor: currentRenderers[0].editor };
-    }
+    let renderer = currentRenderers.length > 0 ? currentRenderers[0].renderer : undefined;
+    // if (this.type === 'Table') {
+    //   renderer = currentRenderers.length > 0 ? currentRenderers[0].renderer : undefined;
+    // } else if (this.type === 'Form') {
+    //   if (currentRenderers.length > 0 && isFunction(currentRenderers[0].renderer) && this.dataSet) {
+    //     renderer = currentRenderers[0].renderer({
+    //       dataSet: this.dataSet,
+    //       record: this.dataSet ? this.dataSet.current : undefined,
+    //     });
+    //   }
+    // }
+    // if (currentRenderers.length > 0) {
+    //   return { renderer, editor: currentRenderers[0].editor };
+    // }
     return { renderer };
   }
 

src/Dynamic/LayoutButtons/index.vue

@@ -2,7 +2,7 @@
  * @Author: zong.wang01@hand-china.com
  * @Date: 2024-07-31 15:09:30
  * @LastEditors: zong.wang01@hand-china.com
- * @LastEditTime: 2024-08-14 09:14:38
+ * @LastEditTime: 2024-08-15 10:18:13
  * @Version: 1.0.0
  * @Description: 页面按钮渲染
  * @Copyright: Copyright (c) 2021, Hand-RongJing
@@ -64,6 +64,14 @@ export default {
       type: Object,
       default: () => ({})
     },
+    layoutButtonsFun: { // 自定义按钮方法
+      type: Object,
+      default: () => ({})
+    },
+    headerButtons: { // 页面按钮渲染 
+      type: Array,
+      default: () => []
+    },
   },
   data () {
     return {
@@ -81,13 +89,20 @@ export default {
         export: '',
         remove: 'delete',
         query: 'search'
+      },
+      allFuns: {
+        save: this.saveFunction,
+        query: this.query,
+        reset: this.reset,
+        remove: this.remove,
       }
     }
   },
   mounted() {
     this.configInfo = this.dynamicInfo().config;
     this.readOnly = this.dynamicInfo().queryParams.readOnly;
-    this.layoutButtons = this.configInfo.layoutButtons || [];
+    this.allFuns = {...this.allFuns, ...this.layoutButtonsFun}; // 综合按钮方法
+    this.layoutButtons = (this.configInfo.layoutButtons || []).concat(this.headerButtons).filter(o => this.allFuns[o.name]);
     this.init();
   },
   methods: {
@@ -99,11 +114,23 @@ export default {
         this.defaultBtns = [...this.layoutButtons];
       }
     },
+    getClickFunction(name) { // 获取对应的点击事件
+      const currentButtons = this.customizedButtons.filter(value => value.name === name);
+      return currentButtons.length > 0 ? currentButtons[0].clickFunction : this.dataSetFunction[name];
+    },
     handlClick(btn) {
       this.moreVisible = false;
-      if (btn.name === 'save') {
-        this.saveFunction();
-      }
+      const func = this.allFuns[btn.name];
+      func();
+    },
+    query(){
+
+    },
+    reset(){
+
+    },
+    remove() {
+
     },
     async saveFunction() {
       const saveDataSet = this.dynamicInfo().dataSetObject;
@@ -228,7 +255,7 @@ export default {
       box-shadow: 0px 0px 18px 0px rgba(0,0,0,0.2);
       border-radius: 20px;
       white-space: nowrap;
-      padding: 8px;
+      padding: 10px;
       // margin: 6px 0;
       // box-shadow: 0px 2px 2px 0px #3789ff;
     }

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-08-14 10:48:44
+ * @LastEditTime: 2024-08-15 10:10:21
  * @Version: 1.0.0
  * @Description: 
  * @Copyright: Copyright (c) 2021, Hand-RongJing
@@ -21,7 +21,11 @@
         :componentRenderers="componentRenderers"
       />
     </h-content>
-    <layout-buttons v-if="configDatas.id"/>
+    <layout-buttons 
+      v-if="configDatas.id"
+      :layoutButtonsFun="layoutButtons"
+      :headerButtons="headerButtons"
+    />
   </h-view>
 </template>
 
@@ -53,6 +57,14 @@ export default {
     componentRenderers: { // 组件渲染
       type: Array,
       default: () => []
+    },
+    headerButtons: { // 页面按钮渲染 
+      type: Array,
+      default: () => []
+    },
+    layoutButtons: { // 布局按钮方法
+      type: Object,
+      default: () => ({})
     }
   },
   data () {

src/pages/dynamicDetail.vue

@@ -2,23 +2,87 @@
  * @Author: zong.wang01@hand-china.com
  * @Date: 2024-07-31 18:41:49
  * @LastEditors: zong.wang01@hand-china.com
- * @LastEditTime: 2024-08-13 10:47:38
+ * @LastEditTime: 2024-08-15 10:13:48
  * @Version: 1.0.0
  * @Description: 
  * @Copyright: Copyright (c) 2021, Hand-RongJing
 -->
 
 <template>
-   <Dynamic layoutCode="PRJ005F1" />
+   <Dynamic 
+    layoutCode="PRJ005F1" 
+    :componentRenderers="componentRenderers" 
+    :headerButtons="headerButtons"
+    :layoutButtons="layoutButtons"
+  />
 </template>
 
 <script>
 export default {
   name: 'DynamicDetail',
   data () {
-    return {}
+    return {
+      componentRenderers: [
+        {
+          tabCode: 'F_BASIC',
+          columnName: 'test',
+          renderer: (field, getRecord) => {
+            console.log('------->>>', field, getRecord())
+            return <span>328388</span>
+          },
+        },
+      ],
+      headerButtons: [
+        {
+          description: '复制',
+          name: "copy",
+        },
+        {
+          description: '新建',
+          name: "new",
+        },
+      ],
+      layoutButtons: {
+        submit: this.handleHeaderSubmit,
+        remove: this.handleDelete,
+        copy: this.handleCopyClick
+      }
+      // layoutButtons: [
+      //   {
+      //     name: 'submit',
+      //     clickFunction: () => {
+      //       this.handleHeaderSubmit()
+      //     },
+      //   },
+      //   {
+      //     name: 'remove',
+      //     clickFunction: () => {
+      //       this.handleDelete()
+      //     },
+      //   },
+      //   {
+      //     name: 'copy',
+      //     clickFunction: () => {
+      //       this.handleCopyClick()
+      //     },
+      //   },
+      // ],
+    }
+  },
+  methods: {
+    handleCopyClick() {
+      console.log('复制')
+    },
+    handleHeaderSubmit() {
+      console.log("点击提交")
+    },
+    handleDelete() {
+      console.log("点击删除")
+    },
+    handleNew() {
+      console.log("点击新建")
+    }
   },
-  methods: {},
 }
 </script>
 

src/pages/testDynamic.vue

@@ -2,7 +2,7 @@
  * @Author: zong.wang01@hand-china.com
  * @Date: 2024-07-29 11:02:22
  * @LastEditors: zong.wang01@hand-china.com
- * @LastEditTime: 2024-08-13 10:51:44
+ * @LastEditTime: 2024-08-14 16:22:37
  * @Version: 1.0.0
  * @Description: 
  * @Copyright: Copyright (c) 2021, Hand-RongJing
@@ -24,12 +24,12 @@ export default {
     return {
       componentRenderers: [
         {
-        tabCode: 'G_QUERY_RESULT',
-        columnName: 'projectName',
-        renderer: (record) => {
-          return <span style="color: #3789ff" onClick={() => this.toDetail(record)}>{record.projectName} <van-icon name="arrow" /></span>
+          tabCode: 'G_QUERY_RESULT',
+          columnName: 'projectName',
+          renderer: (record, index) => {
+            return <span style="color: #3789ff" onClick={() => this.toDetail(record)}>{record.projectName} <van-icon name="arrow" /></span>
+          },
         },
-      },
       ]
     }
   },