页面跳转刷新数据、 提供数据给外层页面使用

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 14:29:10
+ * @LastEditTime: 2024-08-15 17:01:36
  * @Version: 1.0.0
  * @Description: 动态渲染-日期组件
  * @Copyright: Copyright (c) 2021, Hand-RongJing
@@ -63,6 +63,7 @@
 <script>
 import {Cell, DatetimePicker, Popup, Icon, Field, Picker} from 'vant';
 import DLabel from './DLabel';
+import {dateFormat} from '../../../utils/utils';
 
 export default {
   name: 'DDate',
@@ -163,7 +164,7 @@ export default {
     },
     dateParse(val) {
       if (val) {
-        const {value, description} = this.dateFormat(new Date(val));
+        const {value, description} = dateFormat(this.type, new Date(val));
         this.currentValue = value;
         this.description = description;
       } else {
@@ -200,7 +201,7 @@ export default {
           this.currentValue = `${date}-00-00`;
           this.description = date;
         } else {
-          const {value, description} = this.dateFormat(date);
+          const {value, description} = dateFormat(this.type, date);
           this.currentValue = value;
           this.description = description;
         }
@@ -211,38 +212,38 @@ export default {
       this.$emit('input', this.currentValue);
       this.$emit('change', this.currentValue);
     },
-    dateFormat(time) { // 时间格式化 2019-09-08
-      let year = time.getFullYear();
-      let month = this.suppField(time.getMonth() + 1);
-      let day = this.suppField(time.getDate());
-      let hour = this.suppField(time.getHours());
-      let minutes = this.suppField(time.getMinutes());
-      let seconds = this.suppField(time.getSeconds());
-      let dateDescription = `${year}-${month}-${day}`;
-      let dateValue = `${year}-${month}-${day}`;
-      if (['time', 'dateTime'].includes(this.type)) {
-        dateDescription = `${year}-${month}-${day} ${hour}:${minutes}:${seconds}`;
-        dateValue = dateDescription;
-      } else if (this.type === 'month') {
-        dateDescription = `${year}-${month}`;
-        dateValue = `${year}-${month}-01`;
-      } else if (this.type === 'year') {
-        dateDescription = `${year}`;
-        dateValue = `${year}-00-00`;
-      } else if (this.type === 'week') {
-        const firstDayOfYear = new Date(year, 0, 1);  // 获取当年的第一天
-        const pastDaysOfYear = (time - firstDayOfYear) / 86400000;  // 计算已经过去的天数
-        const weekNum = Math.ceil((pastDaysOfYear + firstDayOfYear.getDay() + 1) / 7);  // 计算当前日期是第几周
-        dateDescription = `${year}-${weekNum}周`;
-      }
-      return {
-        value: dateValue,
-        description: dateDescription
-      }
-    },
-    suppField(num) { // 补充显示
-      return `${num < 10 ? `0`: ''}${num}`;
-    }
+    // dateFormat(type, time) { // 时间格式化 2019-09-08
+    //   let year = time.getFullYear();
+    //   let month = this.suppField(time.getMonth() + 1);
+    //   let day = this.suppField(time.getDate());
+    //   let hour = this.suppField(time.getHours());
+    //   let minutes = this.suppField(time.getMinutes());
+    //   let seconds = this.suppField(time.getSeconds());
+    //   let dateDescription = `${year}-${month}-${day}`;
+    //   let dateValue = `${year}-${month}-${day}`;
+    //   if (['time', 'dateTime'].includes(this.type)) {
+    //     dateDescription = `${year}-${month}-${day} ${hour}:${minutes}:${seconds}`;
+    //     dateValue = dateDescription;
+    //   } else if (type === 'month') {
+    //     dateDescription = `${year}-${month}`;
+    //     dateValue = `${year}-${month}-01`;
+    //   } else if (type === 'year') {
+    //     dateDescription = `${year}`;
+    //     dateValue = `${year}-00-00`;
+    //   } else if (type === 'week') {
+    //     const firstDayOfYear = new Date(year, 0, 1);  // 获取当年的第一天
+    //     const pastDaysOfYear = (time - firstDayOfYear) / 86400000;  // 计算已经过去的天数
+    //     const weekNum = Math.ceil((pastDaysOfYear + firstDayOfYear.getDay() + 1) / 7);  // 计算当前日期是第几周
+    //     dateDescription = `${year}-${weekNum}周`;
+    //   }
+    //   return {
+    //     value: dateValue,
+    //     description: dateDescription
+    //   }
+    // },
+    // suppField(num) { // 补充显示
+    //   return `${num < 10 ? `0`: ''}${num}`;
+    // }
   },
 }
 </script>

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-15 12:04:42
+ * @LastEditTime: 2024-08-15 17:48:20
  * @Version: 1.0.0
  * @Description: 表单渲染
  * @Copyright: Copyright (c) 2021, Hand-RongJing
@@ -183,6 +183,7 @@ export default {
       default: () => []
     }
   },
+  inject: ['dynamicInfo', 'addFormRef', 'setDataSetData', 'dataLoadHandle'],
   data () {
     return {
       fieldComponents: ['TextField',"TextArea", "NumberField", "EmailField","CentField"],
@@ -196,13 +197,10 @@ export default {
       status: 'add',
     }
   },
-  inject: ['dynamicInfo', 'addFormRef', 'setDataSetData'],
   mounted() {
-    console.log('D-form', this.fields)
     this.init();
   },
   activated() {
-    console.log('D-form-activated', this.fields)
     this.init();
   },
   methods: {
@@ -226,8 +224,10 @@ export default {
 
       if (this.formType === 'normal') {
         if (this.tabInfo.readUrl) {
+          // console.log('D-form-activated', this.tabInfo.readUrl, JSON.stringify(this.queryParams))
           const res = await hlsHttp.get(this.tabInfo.readUrl, this.queryParams)
           this.fieldsObj = res.content.length ? res.content[0] : {};
+          this.dataLoadHandle(this.fieldsObj, this.tabInfo.tabCode); // 数据查询后的回调
           this.addFormRef(this, this.tabInfo.tabCode); //正常表单保存表单组件实例，供页面整体保存时使用
           this.setDataSetData(this.tabInfo.tabCode, {...this.fieldsObj}); // 保存一份原始数据
           this.status = 'update';
@@ -241,7 +241,6 @@ export default {
       this.originFields.forEach(item => {
         if (item.validationTypeDisplay === 'CentField' && this.fieldsObj[item.columnName]) {
           this.fieldsObj[item.columnName] = this.fieldsObj[item.columnName] * 100;
-          console.log('CentField', this.fieldsObj[item.columnName])
         }
         if (item.bind && this.fieldsObj[item.columnName]) { // 主要处理lov绑定字段
           const bindField = item.bind.split('.');
@@ -259,7 +258,6 @@ export default {
         }
       })
       this.originFieldsObj = {...this.fieldsObj};
-      console.log('this.fieldsObj', this.fieldsObj)
     },
     getInputType(type) {
       if (type === 'TextArea') {

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-14 16:21:18
+ * @LastEditTime: 2024-08-15 17:06:59
  * @Version: 1.0.0
  * @Description: 表格列渲染
  * @Copyright: Copyright (c) 2021, Hand-RongJing
@@ -41,7 +41,7 @@ const DTableTd = {
   methods: {
     columnValue() {
       if (['Lov', 'Select'].includes(this.typeDisplay)) {
-        return this.record[`${this.columnName}Name`];
+        return this.record[`${this.columnName}Name`] || this.record[`${this.columnName}N`] || this.record[this.columnName];
       } else {
         return this.record[this.columnName];
       }

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 16:22:00
+ * @LastEditTime: 2024-08-15 17:42:48
  * @Version: 1.0.0
  * @Description: 表格渲染
  * @Copyright: Copyright (c) 2021, Hand-RongJing
@@ -47,6 +47,9 @@
                 <template v-if="booleanType.includes(column.validationTypeDisplay)">
                   {{booleanDisplay[item[column.columnName]] || '--'}}
                 </template>
+                <template v-if="dateType[column.dataType]">
+                  {{dateDescription(dateType[column.dataType], item[column.columnName]) || '--'}}
+                </template>
                 <!-- {{(column.validationTypeDisplay === 'Switch' ? (item[column.columnName] ? '是' : '否' ) : item[column.columnName]) || '--'}} -->
               </d-table-td>
             </div>
@@ -88,7 +91,7 @@ import DForm from '../DForm';
 import DTableTd from './DTableTd.jsx';
 import { Checkbox, CheckboxGroup, Popup, Button, Icon, Toast } from 'vant';
 import hlsHttp from '../../utils/hlsHttp';
-import {getDataSetName, getOrganizationId} from '../../utils/utils';
+import {getDataSetName, getOrganizationId, dateFormat} from '../../utils/utils';
 import EventBus from '../../utils/eventBus';
 
 export default {
@@ -122,9 +125,17 @@ export default {
       default: () => [],
     }
   },
-  inject: ['dynamicInfo'],
+  inject: ['dynamicInfo', 'dataLoadHandle'],
   data () {
     return {
+      dateType: {
+        dateTime: 'datetime',
+        time: 'datetime',
+        month: 'year-month',
+        year: 'year-month',
+        week: 'date',
+        date: 'date',
+      },
       booleanType: ['Switch', 'Radio', 'CheckBox'],
       booleanDisplay: {
         1: '是',
@@ -145,11 +156,9 @@ export default {
     }
   },
   mounted() {
-    this.dynamicConfigInfo = this.dynamicInfo();
     this.init();
   },
   activated() {
-    this.dynamicConfigInfo = this.dynamicInfo();
     this.init();
   },
   deactivated() {
@@ -160,23 +169,26 @@ export default {
   },
   methods: {
     init() {
-      if (this.tabInfo.queryTabCode) {
-        EventBus.$on('tableQuery', (data, queryTabCode) => {
-          if (this.tabInfo.queryTabCode === queryTabCode) {
-            this.queryParams = data;
-            this.refresh();
-          }
-        });
-      }
-      this.refresh();
+      this.$nextTick(() => {
+        this.dynamicConfigInfo = this.dynamicInfo();
+        if (this.tabInfo.queryTabCode) {
+          EventBus.$on('tableQuery', (data, queryTabCode) => {
+            if (this.tabInfo.queryTabCode === queryTabCode) {
+              this.queryParams = data;
+              this.refresh();
+            }
+          });
+        }
+        this.refresh();
 
-      this.readOnly = this.dynamicConfigInfo.queryParams.readOnly;
-      // 设置是否可以编辑
-      if (this.dynamicConfigInfo.queryParams.readOnly) {
-        this.showEdit = false;
-      } else {
-        this.showEdit = this.columns.some(o => !o.readOnly); //  存在可输入则显示编辑
-      }
+        this.readOnly = this.dynamicConfigInfo.queryParams.readOnly;
+        // 设置是否可以编辑
+        if (this.dynamicConfigInfo.queryParams.readOnly) {
+          this.showEdit = false;
+        } else {
+          this.showEdit = this.columns.some(o => !o.readOnly); //  存在可输入则显示编辑
+        }
+      })
     },
     refresh() {
       this.page = 0;
@@ -184,7 +196,6 @@ export default {
       this.getList();
     },
     getList() {
-      // console.log('D-Table', this.columns)
       const params = {
         page: this.page,
         size: this.size,
@@ -193,27 +204,33 @@ export default {
       }
       hlsHttp.get(this.tabInfo.readUrl, params).then(res => {
         this.tableData = this.tableData.concat(res.content || []);
+        this.dataLoadHandle(this.tableData, this.tabInfo.tabCode)
+        // EventBus.$on('dataLoad', this.tableData, this.tabInfo.tabCode); // 将查询的数据
         if (res.totalElements > this.tableData.length) {
           this.page = this.page + 1;
           this.$refs.scroll.update(false)
         } else {
           this.$refs.scroll.update(true)
         }
+        
       })
     },
     showRecord(res, index) {
-      this.record = {...res};
+      if (this.tabInfo.createUrl) {
+        this.record = {...res};
         this.recordIndex = index;
         this.visible = true;
-      // if (this.tabInfo.createUrl) {
-      //   this.record = {...res};
-      //   this.recordIndex = index;
-      //   this.visible = true;
-      //   console.log('this.record', this.record)
-      // } else {
-      //   Toast.fail('保存接口未配置，请检查配置');
-      // }
-  
+        // console.log('this.record', this.record)
+      } else {
+        Toast.fail('保存接口未配置，请检查配置');
+      }
+    },
+    dateDescription(type, val) {
+      if (val) {
+        const res = dateFormat(type, new Date(val));
+        return res.description;
+      }
+      return val;
     },
     async saveRecord() {
       const {allValues} = await this.$refs.dformRef.validate();

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-14 09:19:09
+ * @LastEditTime: 2024-08-15 16:00:59
  * @Version: 1.0.0
  * @Description: 组件头部渲染
  * @Copyright: Copyright (c) 2021, Hand-RongJing
@@ -86,13 +86,15 @@ export default {
   mounted() {
     this.init();
   },
+  // activated() {
+  //   this.init();
+  // },
   methods: {
     init() {
       if(this.tabButtons.length > this.num) {
         this.defaultBtns = this.tabButtons.slice(0, this.num);
         this.hideBtns = this.tabButtons.slice(this.num, this.tabButtons.length);
         this.actions = this.hideBtns.map(o => ({...o, text: o.description}));
-        console.log('this.actions', this.actions)
       } else {
         this.defaultBtns = [...this.tabButtons];
       }

src/Dynamic/ConfigRenderComponent/QueryForm/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-13 17:52:35
+ * @LastEditTime: 2024-08-15 17:07:36
  * @Version: 1.0.0
  * @Description: 查询表单渲染
  * @Copyright: Copyright (c) 2021, Hand-RongJing
@@ -81,9 +81,12 @@ export default {
   mounted() {
     this.configDatas = this.dynamicInfo().config;
   },
+  activated() {
+    this.configDatas = this.dynamicInfo().config;
+  },
   methods: {
     onSearch() { // 搜索
-      console.log('souusole')
+      // console.log('souusole')
     },
     showForm() {
       this.show = true;
@@ -103,6 +106,7 @@ export default {
           values[key] = formValues[key];
         }
       });
+      delete values._status;
       EventBus.$emit('tableQuery', values, this.tabInfo.tabCode);
       this.show = false;
     },

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-13 16:43:34
+ * @LastEditTime: 2024-08-15 16:44:45
  * @Version: 1.0.0
  * @Description: 
  * @Copyright: Copyright (c) 2021, Hand-RongJing
@@ -10,7 +10,7 @@
 import Vue from 'vue';
 import {Button} from 'vant'
 import layouts from '../layout/index.js';
-import {ColumnBuilder, TabButtonBuilder, ComponentBuilder} from './LayoutBuilder.jsx'
+import {ColumnBuilder, ComponentBuilder} from './LayoutBuilder.jsx'
 import QueryForm from './QueryForm';
 import DTable from './DTable';
 import DForm from './DForm';
@@ -53,13 +53,9 @@ const ConfigRenderComponent = {
   },
   mounted() {
     this.configInfo = this.dynamicInfo().config;
-    console.log('this.componentRenderers', this.componentRenderers, this.dynamicInfo())
-    console.log(this.$refs);
   },
   activated () {
-    
     this.configInfo = this.dynamicInfo().config;
-    console.log('激活', this.dynamicInfo().queryParams);
   },
   methods: {
     getTabs(layoutTabs, state, layoutCode, createElement) {
@@ -67,17 +63,6 @@ const ConfigRenderComponent = {
         const parentTabCode = layoutTab.tabCode;
         // 布局类型
         const layoutName = layoutTab.tabType;
-        // 静态嵌入布局
-        if (layoutName === 'Layout' && layoutTab.tabStatusType === 'STATIC') {
-          const currentStaticLayoutTabs = this.staticLayoutTabs.filter(
-            value => value.tabCode === parentTabCode
-          );
-          if (currentStaticLayoutTabs.length > 0 && currentStaticLayoutTabs[0].component) {
-            const StaticComponent = currentStaticLayoutTabs[0].component;
-            return [<StaticComponent {...this} />];
-          }
-          return [];
-        }
         if (!layoutTab.childrenTabs || layoutTab.childrenTabs.length === 0) {
           return [];
         }
@@ -86,7 +71,6 @@ const ConfigRenderComponent = {
         let components;
         if (this.layoutComponents.some(item => layoutTab.childrenTabs[0].tabType === item)) {
           layoutTab.childrenTabs.forEach(childrenTab => {
-            // componentNames.push(childrenTab.description);
             componentNames.push({code: childrenTab.tabCode, label: childrenTab.description})
           });
           components = this.getTabs(layoutTab.childrenTabs, state, layoutCode, createElement);
@@ -95,20 +79,16 @@ const ConfigRenderComponent = {
             const {
               tabType,
               tabCode,
-              baseTable,
-              parentTable,
               tabFields,
-              tabButtons,
               description
             } = childrenTab;
-            // componentNames.push(description);
+            
             componentNames.push({code: tabCode, label: description});
             
             const columns = new ColumnBuilder()
               .withFields(tabFields)
               .withType(tabType)
               .withTabCode(tabCode)
-              // .withTableFooterRenderers(tableFooterRenderers)
               .withLayoutCode(childrenTab.layoutCode || layoutCode)
               .withParentTabCode(parentTabCode)
               .withComponentRenderers(this.componentRenderers)
@@ -117,21 +97,16 @@ const ConfigRenderComponent = {
             const findField = find(tabFields, { formatCascadeFlag: 'Y' });
             
             return new ComponentBuilder()
-              // .withDataSet(dataSet)
-              // .withHistoryDataSet(dataSets[`history_${dataSetName}`])
-              // .withDifference(differenceMap[dataSetName])
               .withCascadeKey(findField && findField.columnName)
-              // .withHistoryButtonName(historyButtonName)
-              // .withCurrentButtonName(currentButtonName)
               .withRouteParams(this.queryParams)
               .withCreateElement(createElement)
               .withTabType(tabType)
               .withColumns(columns)
-              // .withButtons(buttons)
               .withLayoutCode(childrenTab.layoutCode || layoutCode)
               .withTabCode(childrenTab.tabCode)
               .withProps(childrenTab)
-              // .withComponentHeaderExtras(componentHeaderExtras)
+              .withStaticComponents(this.staticLayoutTabs)
+              .withParentProps(this)
               .build();
           });
         }
@@ -146,7 +121,7 @@ const ConfigRenderComponent = {
   // 为了弥补缺少的实例
   // 提供第二个参数作为上下文
   render: function (h, context) {
-    console.log('context', context, this.configInfo)
+    // 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>;
   }

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-15 10:48:44
+ * @LastEditTime: 2024-08-15 17:42:29
  * @Version: 1.0.0
  * @Description: 
  * @Copyright: Copyright (c) 2021, Hand-RongJing
@@ -17,8 +17,9 @@
     <h-content>
       <van-loading size="24px" vertical v-if="loading">加载中...</van-loading>
       <config-render-component 
-        v-if="configDatas.id"
+        v-if="configDatas.id && !loading"
         :componentRenderers="componentRenderers"
+        :staticLayoutTabs="staticLayoutTabs"
       />
     </h-content>
     <layout-buttons 
@@ -35,8 +36,7 @@ import LayoutButtons from './LayoutButtons';
 import ConfigRenderComponent from './ConfigRenderComponent/index.jsx';
 import {query, queryRoute} from './service'
 import './index.less'
-import { getOrganizationId } from './utils/utils';
-import Constants from './utils/Constants';
+import EventBus from './utils/eventBus';
 
 export default {
   name: 'Dynamic',
@@ -65,6 +65,18 @@ export default {
     layoutButtons: { // 布局按钮方法
       type: Object,
       default: () => ({})
+    },
+    staticLayoutTabs: { // 静态布局内容
+      type: Array,
+      default: () => []
+    },
+    configLoadHandle: {
+      type: Function,
+      default: () => {}
+    },
+    dataLoadHandle: {
+      type: Function,
+      default: () => {}
     }
   },
   data () {
@@ -82,13 +94,8 @@ export default {
     return {
       addFormRef: this.addFormRef,
       setDataSetData: this.setDataSetData,
-      dynamicInfo: () => ({ // 配置的所有信息
-        layoutCode: this.layoutCode,
-        config: this.configDatas,
-        dataSetObject: this.dataSetObject,
-        queryParams: this.qpara,
-        componentRenderers: this.componentRenderers
-      })
+      dataLoadHandle: this.dataLoadHandle,
+      dynamicInfo: this.getDynamicInfo
     };
   },
   created() {
@@ -104,6 +111,7 @@ export default {
       ...this.$route.query
     }
     console.log('activated', this.params)
+    this.layoutCodeQuery();
   },
   beforeMount() {
     this.layoutCodeQuery();
@@ -118,16 +126,19 @@ export default {
       if (this.params.readOnly === "YES" || this.params.readOnly == 'true') {
         readOnly = true
       }
-      // if (disabled) {
-      //   readOnly = disabled
-      // }
-      this.qpara = {
+
+      const qpara = {
         ...this.params,
         readOnly,
-      };
-      // if (this.store.config.datas !== null && isEqual(this.qpara, this.store.config.param)) {
-      //   return;
-      // }
+      }
+
+      if (JSON.stringify(this.qpara) === JSON.stringify(qpara)) {
+        this.loading = false;
+        return;
+      }
+
+      this.qpara = qpara;
+      
       let res = {datas: {}, params: {}}
       if (this.layoutCode) {
         res = await query(this.layoutCode, this.qpara);
@@ -138,7 +149,8 @@ export default {
       this.configDatas = {...res.datas};
       this.params = res.params;
       this.dataSetObject = this.transformDateSetTree(res.datas.dataSetsTree);
-      // this.getDataSets(res.datas.dataSetsTree)
+
+      this.configLoadHandle(this.getDynamicInfo());
     },
     transformDateSetTree(tree) {
       let obj = {};
@@ -157,7 +169,16 @@ export default {
     setDataSetData(tabCode, data) {
       this.dataSetObject[tabCode].data = data;
     },
-    
+    getDynamicInfo() {
+      return { // 配置的所有信息
+        layoutCode: this.layoutCode, // 布局编码
+        config: this.configDatas, // 页面配置信息
+        dataSetObject: this.dataSetObject, // 页面datasetTree的转换，方便快速找出datasetname
+        queryParams: this.qpara, // 页面查询参数
+        EventBus: EventBus
+        // componentRenderers: this.componentRenderers // 组件渲染内容
+      }
+    }
   },
 }
 </script>

src/Dynamic/layout/AbstractLayout/index.js

-/*
- * @Description: 布局抽象类
- * @Author: huangtianyang
- * @Date: 2020-01-13 15:56
- */
-import { Bind } from 'lodash-decorators';
-import React, { Component } from 'react';
-
-/**
- * @extends {Component}
- * @ReactProps {React.ReactElement} components
- */
-class AbstractLayout extends Component {
-  constructor(props) {
-    super(props);
-    this.counter = 0;
-  }
-
-  /**
-   *  包装渲染布局下组件
-   * @param {Array.<React.ReactElement>} components 组件
-   */
-  @Bind()
-  packageContents(components) {
-    return components;
-  }
-
-  @Bind()
-  getCounter() {
-    this.counter += 1;
-    return this.counter;
-  }
-
-  /**
-   *  获取框架
-   * @param {*} content
-   * @returns {React.ReactElement}
-   */
-  @Bind()
-  getLayoutFrame(content) {
-    return <div>{content}</div>;
-  }
-
-  render() {
-    const { components } = this.props;
-    return <>{this.getLayoutFrame(this.packageContents(components))}</>;
-  }
-}
-
-export default AbstractLayout;

src/Dynamic/layout/AbstractLayout/index.jsx

-/*
- * @Author: zong.wang01@hand-china.com
- * @Date: 2024-07-30 17:19:32
- * @LastEditors: zong.wang01@hand-china.com
- * @LastEditTime: 2024-07-30 17:34:57
- * @Version: 1.0.0
- * @Description: 布局抽象类
- * @Copyright: Copyright (c) 2021, Hand-RongJing
- */
-import Vue from 'vue';
-import { Fragment } from 'vue-fragment';
- 
-const AbstractLayout = {
-  // functional: true,
-  // Props 是可选的
-  props: {
-    components: { // 是否需要返回键
-      type: Boolean,
-      default: true
-    },
-    staticLayoutTabs: {
-      type: Array,
-      default: () => [],
-    }
-  },
-  data () {
-    return {
-      counter: 0, // 配置信息
-    }
-  },
-  methods: {
-    /**
-     *  包装渲染布局下组件
-     * @param {Array.<VueElement>} components 组件
-     */
-    packageContents(components) {
-      return components;
-    },
-    getCounter() {
-      this.counter += 1;
-      return this.counter;
-    },
-    /**
-     *  获取框架
-     * @param {*} content
-     * @returns {Element}
-     */
-    getLayoutFrame(content) {
-      return <div>{content}</div>;
-    }
-
-  },
-  // 为了弥补缺少的实例
-  // 提供第二个参数作为上下文
-  render: function (h, context) {
-    return <div></div>
-    return <Fragment>{this.getLayoutFrame(this.packageContents(components))}</Fragment>;
-  }
-};
- 
-export default AbstractLayout;
-
-
-

src/Dynamic/layout/TabPane/index.js

-/*
- * @Description: In User Settings Edit
- * @Author: gaoyang
- * @Date: 2020-05-26 15:57
- */
-import AbstractLayout from '../AbstractLayout';
-
-export default class TabPane extends AbstractLayout {
-  /**
-   * @override
-   * @param {React.ReactElement} content
-   * @returns {*}
-   */
-  getLayoutFrame(content) {
-    return content;
-  }
-
-  /**
-   * @override
-   * @param components 组件
-   * @returns {*[]}
-   */
-  packageContents(components) {
-    return components;
-  }
-}

src/Dynamic/layout/Tabs/index.jsx

@@ -2,7 +2,7 @@
  * @Author: zong.wang01@hand-china.com
  * @Date: 2024-08-02 11:06:33
  * @LastEditors: zong.wang01@hand-china.com
- * @LastEditTime: 2024-08-06 12:03:35
+ * @LastEditTime: 2024-08-15 16:44:04
  * @Version: 1.0.0
  * @Description: 
  * @Copyright: Copyright (c) 2021, Hand-RongJing

src/Dynamic/layout/components/NavigationBar/NavigationContent.js

-/*
- * @Description: In User Settings Edit
- * @Author: huangtianyang
- * @Date: 2020-03-09 12:16
- */
-
-import { Bind } from 'lodash-decorators';
-import { debounce } from 'lodash';
-import NavigationContentItem from './NavigationContentItem';
-import React from 'react';
-import classNames from 'classnames';
-import styles from './index.less';
-
-/**
- *
- * @param components {Array,<React.ReactElement>} -组件数组
- * @param componentNames {Array.<String>} -组件描述名
- * @returns {*}
- * @constructor
- */
-class NavigationContent extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      activeIndex: 0,
-      windowHeight: window.innerHeight
-    };
-    this.ref = React.createRef();
-    this.scrollTops = [];
-    this.nodes = [];
-    this.content = null;
-    this.disableScrollHandler = false;
-  }
-
-  @Bind()
-  resizeHandler() {
-    if (window.parent === window.self) {
-      this.setState({ windowHeight: window.innerHeight });
-    }
-  }
-
-  componentDidMount() {
-    window.addEventListener('resize', this.resizeHandler);
-    const node = this.ref.current;
-    if (node) {
-      const { children } = node;
-      this.content = node;
-      for (let i = 0; i < children.length; i++) {
-        this.nodes.push(children[i]);
-        this.scrollTops.push(children[i].offsetTop - node.offsetTop);
-      }
-    }
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.resizeHandler);
-  }
-
-  @Bind()
-  wheelHandler() {
-    this.disableScrollHandler = false;
-  }
-
-  @Bind()
-  getIndex(index) {
-    this.setState({ activeIndex: index });
-  }
-
-  @Bind()
-  getScrollTop(index) {
-    return this.nodes[index].offsetTop - this.content.offsetTop;
-  }
-
-  render() {
-    const { windowHeight, activeIndex } = this.state;
-    const { componentNames, components } = this.props;
-    return (
-      <div
-        className={classNames(styles['navigation-content'])}
-        style={{ maxHeight: windowHeight - 210 }}
-      >
-        <div
-          ref={this.ref}
-          onWheel={this.wheelHandler}
-          onScroll={event => {
-            if (!this.disableScrollHandler) {
-              debounce(e => {
-                e.persist();
-                const { scrollTop } = this.ref.current;
-                for (let i = 0; i < this.scrollTops.length; i++) {
-                  const minTop = this.scrollTops[i];
-                  const maxTop = this.scrollTops[i + 1];
-                  if (
-                    (scrollTop >= minTop && maxTop && scrollTop < maxTop) ||
-                    (scrollTop >= minTop && !maxTop)
-                  ) {
-                    this.setState({ activeIndex: i });
-                  }
-                }
-              }, 100)(event);
-            }
-          }}
-          className={styles.content}
-        >
-          {components.map((component, index) => {
-            return (
-              <NavigationContentItem
-                parentRef={this.ref}
-                key={
-                  /* eslint-disable-next-line react/no-array-index-key */
-                  index
-                }
-                component={component}
-                index={index}
-                getIndex={() => this.getIndex(index)}
-              />
-            );
-          })}
-        </div>
-        <div className={styles.menus}>
-          {componentNames.map((name, index) => {
-            return (
-              <div
-                key={name}
-                onClick={() => {
-                  // eslint-disable-next-line no-undef
-                  if (this.ref.current) {
-                    this.ref.current.scrollTop = this.getScrollTop(index);
-                    this.disableScrollHandler = true;
-                    this.setState({ activeIndex: index });
-                  }
-                }}
-                className={classNames(styles.menu, index === activeIndex ? styles.active : null)}
-              >
-                <div className={classNames(styles.menuCro, index === activeIndex ? styles.active : null,index===componentNames.length-1?styles.menuCroLast:null)} />
-                <span>{name}</span>
-              </div>
-            );
-          })}
-        </div>
-      </div>
-    );
-  }
-}
-
-export default NavigationContent;

src/Dynamic/layout/components/NavigationBar/NavigationContentItem.js

-/*
- * @Description: In User Settings Edit
- * @Author: huangtianyang
- * @Date: 2020-03-09 22:21
- */
-import React from 'react';
-import classNames from 'classnames';
-import styles from './index.less';
-
-const NavigationContentItem = ({ component, index, getIndex }) => {
-  return (
-    <div
-      className={classNames(styles.item)}
-      onClick={() => {
-        getIndex(index);
-      }}
-    >
-      {component}
-    </div>
-  );
-};
-
-export default NavigationContentItem;

src/Dynamic/layout/components/NavigationBar/index.js

-/*
- * @Description: Server Config
- * @Author: huangtianyang
- * @Date: 2020-03-09 12:11
- */
-import NavigationContent from './NavigationContent';
-import React from 'react';
-import styles from './index.less';
-
-const NavigationBar = ({ components, componentNames }) => {
-  return (
-    <div className={styles['hls-navigation-bar']}>
-      <NavigationContent components={components} componentNames={componentNames} />
-    </div>
-  );
-};
-
-export default NavigationBar;

src/Dynamic/layout/components/NavigationBar/index.less

-@import '~leaf-ui/lib/style/themes/default.less';
-
-.hls-navigation-bar {
-  .navigation-content {
-    display: flex;
-    margin: 8px 0 0 0;
-    .menus {
-      flex-shrink: 0;
-      height: 100%;
-      background: #fff;
-      overflow: auto;
-      padding: 0 5px 0 10px;
-      width: 150px;
-      .menu {
-        height: 35px;
-        line-height: 35px;
-        margin: 4px 6px;
-        cursor: pointer;
-        font-family: @font-family;
-        font-weight: bold;
-        font-size: 13px;
-        color: #6a6a6a;
-        letter-spacing: 0.59px;
-        text-align: center;
-        display: flex;
-        align-items: center;
-        &.active {
-          color: @leaf-primary-color;
-          border-radius: 4px;
-        }
-        span{
-          margin-left: 10px;
-          width: 100px;
-          max-width: 100px;
-          text-align: left;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          word-break: break-all;
-          white-space: nowrap;
-        }
-      }
-      .menuCro {
-        width: 10px;
-        height: 10px;
-        border-radius: 10px;
-        border: 2px solid rgba(0,0,0,.2);
-        position: relative;
-        &::after {
-          position: absolute;
-          content: '';
-          height: 30px;
-          border: 1px solid rgba(0,0,0,.2);
-          margin-top: 8px;
-          margin-left: -1px;
-        }
-        &.active {
-          border: 2px solid @leaf-primary-color;
-        }
-      }
-      .menuCroLast{
-        &::after{
-          position: absolute;
-          content: '';
-          height: 0;
-          border: 0;
-        }
-      }
-    }
-    .content {
-      width: 100%;
-      overflow-x: hidden;
-      overflow-y: auto;
-      padding: 0 8px;
-      .item {
-        margin: 5px 0;
-      }
-    }
-  }
-}

src/Dynamic/utils/utils.js

@@ -2,7 +2,7 @@
  * @Author: zong.wang01@hand-china.com
  * @Date: 2024-07-30 14:39:47
  * @LastEditors: zong.wang01@hand-china.com
- * @LastEditTime: 2024-08-15 11:48:09
+ * @LastEditTime: 2024-08-15 17:02:23
  * @Version: 1.0.0
  * @Description: 工具类
  * @Copyright: Copyright (c) 2021, Hand-RongJing
@@ -33,35 +33,48 @@ const getDataSetName = (config, tabCode) => {
   return config[tabCode].dataSetName || '';
 };
 
+const suppField = (num) => { // 补充显示
+  return `${num < 10 ? `0`: ''}${num}`;
+}
+
 /**
- * 判断对象为空
- * @param v
- * @return {boolean}
+ * 日期格式话
+ * @param {*} type 日期类型
+ * @param {*} time date类型
+ * @returns 
  */
-const isEmpty = (v) => {
-  if (typeof v === 'undefined') {
-    return true
-  }
-  if (v === undefined || v === 'undefined' || v === null || v === '' || v === 'null') {
-    return true
-  }
+const dateFormat = (type, time) => { // 时间格式化 2019-09-08
+  let year = time.getFullYear();
+  let month = suppField(time.getMonth() + 1);
+  let day = suppField(time.getDate());
+  let hour = suppField(time.getHours());
+  let minutes = suppField(time.getMinutes());
+  let seconds = suppField(time.getSeconds());
+  let dateDescription = `${year}-${month}-${day}`;
+  let dateValue = `${year}-${month}-${day}`;
+  if (['time', 'dateTime'].includes(type)) {
+    dateDescription = `${year}-${month}-${day} ${hour}:${minutes}:${seconds}`;
+    dateValue = dateDescription;
+
+  } else if (type === 'month') { // 月
+    dateDescription = `${year}-${month}`;
+    dateValue = `${year}-${month}-01`;
 
-  switch (typeof v) {
-    case 'string' :
-      if (v.trim().length === 0) {
-        return true
-      }
-      break
-    case 'boolean' :
-      if (!v) {
-        return true
-      }
-      break
-    case 'object' :
-      return undefined !== v.length && v.length === 0
+  } else if (type === 'year') { // 年
+    dateDescription = `${year}`;
+    dateValue = `${year}-00-00`;
+
+  } else if (type === 'week') { // 周
+    const firstDayOfYear = new Date(year, 0, 1);  // 获取当年的第一天
+    const pastDaysOfYear = (time - firstDayOfYear) / 86400000;  // 计算已经过去的天数
+    const weekNum = Math.ceil((pastDaysOfYear + firstDayOfYear.getDay() + 1) / 7);  // 计算当前日期是第几周
+    dateDescription = `${year}-${weekNum}周`;
   }
-  return false
-}
+  return {
+    value: dateValue,
+    description: dateDescription
+  }
+};
 
 const getOrganizationId = () => {
   return 0;
@@ -128,6 +141,7 @@ export {
   getCustomized,
   getHeaderExtrasProp,
   getDataSetName,
+  dateFormat,
   getOrganizationId, 
   getCurrentUser 
 };

src/global.less

@@ -30,4 +30,8 @@
 @popover-border-radius: 4px;
 @popover-action-width: auto;
 @popover-action-font-size: 12px;
-@popover-light-text-color: rgba(19,19,19,0.80);
+@popover-light-text-color: rgba(19,19,19,0.80);
\ No newline at end of file
+
+::-webkit-scrollbar {
+  display: none;
+}
\ No newline at end of file

src/pages/dynamicDetail.vue

@@ -2,7 +2,7 @@
  * @Author: zong.wang01@hand-china.com
  * @Date: 2024-07-31 18:41:49
  * @LastEditors: zong.wang01@hand-china.com
- * @LastEditTime: 2024-08-15 10:13:48
+ * @LastEditTime: 2024-08-15 17:42:00
  * @Version: 1.0.0
  * @Description: 
  * @Copyright: Copyright (c) 2021, Hand-RongJing
@@ -14,20 +14,29 @@
     :componentRenderers="componentRenderers" 
     :headerButtons="headerButtons"
     :layoutButtons="layoutButtons"
+    :staticLayoutTabs="staticLayoutTabs"
+    :configLoadHandle="configLoadHandle"
+    :dataLoadHandle="dataLoadHandle"
+    ref="dynamicRef"
   />
 </template>
 
 <script>
+import {Button} from 'vant';
+
 export default {
   name: 'DynamicDetail',
+  components: {
+    [Button.name]: Button
+  },
   data () {
     return {
+      buttonText: '嵌入内容',
       componentRenderers: [
         {
           tabCode: 'F_BASIC',
           columnName: 'test',
           renderer: (field, getRecord) => {
-            console.log('------->>>', field, getRecord())
             return <span>328388</span>
           },
         },
@@ -46,35 +55,34 @@ export default {
         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()
-      //     },
-      //   },
-      // ],
+      },
+      staticLayoutTabs: [
+        {
+          tabCode: 'F_STATIC',
+          component: (props) => {
+            return (
+              <van-button onClick={this.handleCopyClick}>{this.buttonText}</van-button>
+            )
+
+          },
+        },
+      ]
     }
   },
   methods: {
+    configLoadHandle(config) { // 查询配置信息之后的回调
+      console.log('configLoadHandle', config)
+    },
+    dataLoadHandle(data, tabCode) {
+      console.log(tabCode, data);
+    },
     handleCopyClick() {
       console.log('复制')
+      this.buttonText = '复制'
     },
     handleHeaderSubmit() {
       console.log("点击提交")
+      this.buttonText = '提交'
     },
     handleDelete() {
       console.log("点击删除")

src/pages/testDynamic.vue

@@ -2,14 +2,20 @@
  * @Author: zong.wang01@hand-china.com
  * @Date: 2024-07-29 11:02:22
  * @LastEditors: zong.wang01@hand-china.com
- * @LastEditTime: 2024-08-14 16:22:37
+ * @LastEditTime: 2024-08-15 17:43:42
  * @Version: 1.0.0
  * @Description: 
  * @Copyright: Copyright (c) 2021, Hand-RongJing
 -->
 
 <template>
-   <Dynamic layoutCode="PRJ005" :componentRenderers="componentRenderers" />
+   <Dynamic 
+    layoutCode="CN001" 
+    :componentRenderers="componentRenderers"
+    :configLoadHandle="configLoadHandle"
+    :dataLoadHandle="dataLoadHandle"
+    ref="dynamicRef"
+  />
 </template>
 
 <script>
@@ -34,6 +40,12 @@ export default {
     }
   },
   methods: {
+    configLoadHandle(config) { // 查询配置信息之后的回调
+      console.log('configLoadHandle', config)
+    },
+    dataLoadHandle(data, tabCode) {
+      console.log(tabCode, data);
+    },
     toDetail(record) {
         this.$router.push({
         name: 'DynamicDetail',