兼容vue3

src/Dynamic/ConfigRenderComponent/DForm/FormItem/DCheckbox.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-15 14:29:52
+ * @LastEditTime: 2024-08-19 11:20:44
  * @Version: 1.0.0
  * @Description: 动态渲染-复选框组件
  * @Copyright: Copyright (c) 2021, Hand-RongJing
@@ -21,7 +21,9 @@
       :name="name"
       :rules="[{ required, message: `请填写${label}` }]"
     >
-      <d-label :label="label" :help="help" slot="label" />
+      <template #label>
+        <d-label :label="label" :help="help" />
+      </template>
 
       <template #input>
         <van-checkbox v-model="currentValue" @change="checked" :disabled="disabled" />

src/Dynamic/ConfigRenderComponent/DForm/FormItem/DCurrency.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-15 11:47:06
+ * @LastEditTime: 2024-08-19 11:20:34
  * @Version: 1.0.0
  * @Description: 动态渲染-文本框组件
  * @Copyright: Copyright (c) 2021, Hand-RongJing
@@ -24,7 +24,9 @@
     :error="false"
     clear-trigger="always"
   >
-    <d-label :label="label" :help="help" slot="label" />
+    <template #label>
+      <d-label :label="label" :help="help" />
+    </template>
   </van-field>
 </div>
   

src/Dynamic/ConfigRenderComponent/DForm/FormItem/DDate.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-15 17:01:36
+ * @LastEditTime: 2024-08-19 11:20:56
  * @Version: 1.0.0
  * @Description: 动态渲染-日期组件
  * @Copyright: Copyright (c) 2021, Hand-RongJing
@@ -29,8 +29,11 @@
       :rules="[{ required, message: `请选择${label}` }]"
       :error="false"
     >
-      <d-label :label="label" :help="help" slot="label" />
-      <template slot="right-icon">
+      <template #label>
+        <d-label :label="label" :help="help" />
+      </template>
+      
+      <template #right-icon>
         <van-icon name="clear" v-show="!disabled && clearable && currentValue" @click="clear"/>
         <img src="../../../assets/date-icon.png" alt="" class="right-icon" v-show="!disabled"/>
       </template>

src/Dynamic/ConfigRenderComponent/DForm/FormItem/DField.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-15 12:09:45
+ * @LastEditTime: 2024-08-19 11:22:50
  * @Version: 1.0.0
  * @Description: 动态渲染-文本框组件
  * @Copyright: Copyright (c) 2021, Hand-RongJing
@@ -23,8 +23,13 @@
     :class="type === 'TextArea' ? 'd-form-textarea' : ''"
     clear-trigger="always"
   >
-    <d-label :label="label" :help="help" slot="label" />
-    <span slot="extra" v-if="type === 'CentField'">%</span>
+    <template #label>
+      <d-label :label="label" :help="help" />
+    </template>
+    
+    <template #extra>
+      <span v-if="type === 'CentField'">%</span>
+    </template>
   </van-field>
 </div>
   

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-08-19 10:58:15
+ * @LastEditTime: 2024-08-19 11:21:18
  * @Version: 1.0.0
  * @Description: 动态渲染-Lov
  * @Copyright: Copyright (c) 2021, Hand-RongJing
@@ -31,14 +31,17 @@
     :required="required"
     :rules="[{ required, message: `请选择${label}` }]"
   >
-    <d-label :label="label" :help="help" slot="label" />
+    <template #label>
+      <d-label :label="label" :help="help" />
+    </template>
+    
     <template #input>
       <div @click="changeVisible(true)" class="cell-value">
         <span v-if="!currentValue || currentValue.length === 0" class="placeholder">{{disabled ? '' : '请选择'}}</span>
         <span v-else>{{valueDisplay()}}</span>
       </div>
     </template>
-    <template slot="right-icon" >
+    <template #right-icon >
       <van-icon name="clear" v-show="!disabled && clearable && !(!currentValue || currentValue.length === 0)" @click="clear"/>
       <van-icon name="arrow" v-show="!disabled" />
     </template>

src/Dynamic/ConfigRenderComponent/DForm/FormItem/DSelect.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-19 11:01:14
+ * @LastEditTime: 2024-08-19 11:22:10
  * @Version: 1.0.0
  * @Description: 动态渲染-Select
  * @Copyright: Copyright (c) 2021, Hand-RongJing
@@ -29,14 +29,16 @@
     :required="required"
     :rules="[{ required, message: `请选择${label}` }]"
   >
-    <d-label :label="label" :help="help" slot="label" />
+    <template #label>
+      <d-label :label="label" :help="help" />
+    </template>
     <template #input>
       <div @click="showSelectOption(true)" class="cell-value">
         <span v-if="!(currentValue.length || currentValue.meaning)" class="placeholder">{{disabled ? '' : '请选择'}}</span>
         <span v-else>{{valueDisplay()}}</span>
       </div>
     </template>
-    <template slot="right-icon" >
+    <template #right-icon >
       <van-icon name="clear" v-show="!disabled && clearable && (currentValue.length || currentValue.meaning)" @click="clear"/>
       <van-icon name="arrow" v-show="!disabled"/>
     </template>

src/Dynamic/ConfigRenderComponent/DForm/FormItem/DSwitch.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-15 14:31:20
+ * @LastEditTime: 2024-08-19 11:22:20
  * @Version: 1.0.0
  * @Description: 动态渲染-开关组件
  * @Copyright: Copyright (c) 2021, Hand-RongJing
@@ -21,7 +21,9 @@
       :required="required"
       :rules="[{ required, message: `请填写${label}` }]"
     >
-      <d-label :label="label" :help="help" slot="label" />
+      <template #label>
+        <d-label :label="label" :help="help" />
+      </template>
       <template #input>
         <van-switch v-model="currentValue" @change="checked" :disabled="disabled" size="19" />
       </template>

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

@@ -2,14 +2,16 @@
  * @Author: zong.wang01@hand-china.com
  * @Date: 2024-08-01 09:55:12
  * @LastEditors: zong.wang01@hand-china.com
- * @LastEditTime: 2024-08-16 15:27:59
+ * @LastEditTime: 2024-08-19 11:22:26
  * @Version: 1.0.0
  * @Description: 动态渲染-超链接组件
  * @Copyright: Copyright (c) 2021, Hand-RongJing
 -->
 <template>
   <van-cell center class="d-form-item d-url" :required="required">
-    <d-label :label="label" :help="help" slot="title" />
+    <template #label>
+      <d-label :label="label" :help="help" />
+    </template>
     <d-custom-render 
         :getData="getCurrentRecord"
         :renderer="renderer"

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-19 11:18:32
+ * @LastEditTime: 2024-08-19 11:46:32
  * @Version: 1.0.0
  * @Description: 表格列渲染
  * @Copyright: Copyright (c) 2021, Hand-RongJing
@@ -52,8 +52,7 @@ const DTableTd = {
   render: function (h, context) {
     return this.tdRender ? 
       this.tdRender(this.record, this.index) : 
-      <span><slot>{this.columnValue() || '--'}</slot></span>
-      // <span>{this.$slots.default || (this.columnValue() || '--')}</span>
+      <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-19 11:17:46
+ * @LastEditTime: 2024-08-19 14:48:59
  * @Version: 1.0.0
  * @Description: 表格渲染
  * @Copyright: Copyright (c) 2021, Hand-RongJing
@@ -44,7 +44,7 @@
                 :index="pIndex"
                 :typeDisplay="column.validationTypeDisplay"
               >
-                <template #default>
+                <template #default v-if="dateType[column.dataType] || booleanType.includes(column.validationTypeDisplay)">
                   <fragment v-if="booleanType.includes(column.validationTypeDisplay)" >
                     {{booleanDisplay[item[column.columnName]] || '--'}}
                   </fragment>

src/Dynamic/ConfigRenderComponent/DTitle/index.vue

@@ -2,7 +2,7 @@
  * @Author: zong.wang01@hand-china.com
  * @Date: 2024-08-02 15:32:36
  * @LastEditors: zong.wang01@hand-china.com
- * @LastEditTime: 2024-08-16 10:08:37
+ * @LastEditTime: 2024-08-19 14:48:45
  * @Version: 1.0.0
  * @Description: 组件头部渲染
  * @Copyright: Copyright (c) 2021, Hand-RongJing

src/Dynamic/ConfigRenderComponent/index.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-16 09:59:16
+ * @LastEditTime: 2024-08-19 14:40:12
  * @Version: 1.0.0
  * @Description: 
  * @Copyright: Copyright (c) 2021, Hand-RongJing
@@ -128,7 +128,7 @@ const ConfigRenderComponent = {
   render: function (h, context) {
     // console.log('context', context, this.configInfo)
     const { layoutCode, layoutTabs = [] } = this.configInfo;
-    return <div style="height: 100%">{layoutTabs.length ? this.getTabs(layoutTabs, this, layoutCode, h) : null}</div>;
+    return <div style="height: 100%;display: flex; flex-direction: column">{layoutTabs.length ? this.getTabs(layoutTabs, this, layoutCode, h) : null}</div>;
   }
 };
  

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-16 11:39:59
+ * @LastEditTime: 2024-08-19 14:27:15
  * @Version: 1.0.0
  * @Description: 
  * @Copyright: Copyright (c) 2021, Hand-RongJing
@@ -10,10 +10,13 @@
 
 <template>
   <d-view>
-    <d-header>
-      <i class="ion-ios-arrow-back" v-if="needBack" slot="left" @click.native="$routeGo()"/>
-      <div slot="center">{{configDatas.description}}</div>
-    </d-header>
+    <van-nav-bar 
+      v-if="showTitle"
+      :title="configDatas.description" 
+      left-arrow 
+      @click-left="backClick"
+      safe-area-inset-top
+    />
     <d-content>
       <van-loading size="24px" vertical v-if="loading">加载中...</van-loading>
       <config-render-component 
@@ -32,7 +35,7 @@
 </template>
 
 <script>
-import {Loading} from 'vant';
+import {NavBar, Loading} from 'vant';
 import {DView, DHeader, DContent, DScroll} from './LayoutComponents';
 import LayoutButtons from './LayoutButtons';
 import ConfigRenderComponent from './ConfigRenderComponent/index.jsx';
@@ -44,6 +47,7 @@ export default {
   name: 'Dynamic',
   components: {
     [Loading.name]: Loading,
+    [NavBar.name]: NavBar,
     LayoutButtons,
     ConfigRenderComponent,
     DView,
@@ -60,6 +64,10 @@ export default {
       type: Boolean,
       default: true
     },
+    showTitle: { // 显示标题
+      type: Boolean,
+      default: true
+    },
     componentRenderers: { // 组件渲染
       type: Array,
       default: () => []
@@ -109,7 +117,6 @@ export default {
     };
   },
   created() {
-    window.localStorage.setItem('access_token', '4b20ae48-aeac-4811-be76-85fb07a346b1');
     this.params = {
       ...this.$route.params,
       ...this.$route.query
@@ -188,6 +195,13 @@ export default {
         EventBus: EventBus
         // componentRenderers: this.componentRenderers // 组件渲染内容
       }
+    },
+    backClick() {
+      if (this.$attrs['onGoBack']) {
+        this.$emit('goBack');
+      } else {
+        if (window.history.state.position > 0) return window.history.back();
+      }
     }
   },
 }

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-15 17:43:42
+ * @LastEditTime: 2024-08-19 14:27:09
  * @Version: 1.0.0
  * @Description: 
  * @Copyright: Copyright (c) 2021, Hand-RongJing
@@ -11,6 +11,7 @@
 <template>
    <Dynamic 
     layoutCode="CN001" 
+    :showTitle="true"
     :componentRenderers="componentRenderers"
     :configLoadHandle="configLoadHandle"
     :dataLoadHandle="dataLoadHandle"
@@ -39,6 +40,9 @@ export default {
       ]
     }
   },
+  created() {
+     window.localStorage.setItem('access_token', '6cb71898-2af9-4c27-a042-b9887b0675f4');
+  },
   methods: {
     configLoadHandle(config) { // 查询配置信息之后的回调
       console.log('configLoadHandle', config)