表格删除、保存

packages/components/Scroll/index.vue

@@ -297,25 +297,25 @@ export default {
     initScroll () {
       let vm = this
       if (!this.$refs.scroll) return
-      if (this.height) {
-        this.$refs.scroll.style.height = this.height;
-      } else {
-        const headerHeight = vm.getHeaderHeight()
-        const nextHeight = vm.getNextElementHeight()
-        this.$refs.scroll.style.height = `${this.$refs.scroll.getBoundingClientRect().height - headerHeight - nextHeight}px`
-      }
-      
-      // 设置scrollContent的最小高，实现高度不足时也有回弹效果
-      if (this.$refs.scrollContent) {
+      // if (this.height) {
+      //   this.$refs.scroll.style.height = this.height;
+      // } else {
+      //   const headerHeight = vm.getHeaderHeight()
       //   const nextHeight = vm.getNextElementHeight()
-        this.$refs.scrollContent.style.minHeight = window.getComputedStyle(this.$refs.scroll).height; // `${this.$refs.scroll.getBoundingClientRect().height}px`
-        // this.$refs.scrollContent.style.paddingTop = `${headerHeight}px`
-        if (vm.hasFoot.footFlag) {
-          let height = vm.hasFoot.height || 88
-          // this.$refs.scrollContent.style.minHeight = `${this.$refs.scroll.getBoundingClientRect().height - height}px`
-          this.$refs.scrollContent.style.paddingBottom = height + 'px'
-        }
-      }
+      //   this.$refs.scroll.style.height = `${this.$refs.scroll.getBoundingClientRect().height - headerHeight - nextHeight}px`
+      // }
+      
+      // // 设置scrollContent的最小高，实现高度不足时也有回弹效果
+      // if (this.$refs.scrollContent) {
+      //   // const nextHeight = vm.getNextElementHeight()
+      //   this.$refs.scrollContent.style.minHeight = window.getComputedStyle(this.$refs.scroll).height; // `${this.$refs.scroll.getBoundingClientRect().height}px`
+      //   // this.$refs.scrollContent.style.paddingTop = `${headerHeight}px`
+      //   if (vm.hasFoot.footFlag) {
+      //     let height = vm.hasFoot.height || 88
+      //     // this.$refs.scrollContent.style.minHeight = `${this.$refs.scroll.getBoundingClientRect().height - height}px`
+      //     this.$refs.scrollContent.style.paddingBottom = height + 'px'
+      //   }
+      // }
 
       const options = {
         probeType: this.probeType,

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-09 18:19:46
+ * @LastEditTime: 2024-08-12 11:15:28
  * @Version: 1.0.0
  * @Description: 动态渲染-复选框组件
  * @Copyright: Copyright (c) 2021, Hand-RongJing
@@ -51,8 +51,8 @@ export default {
       default: ''
     },
     value: {
-      type: Boolean,
-      default: false,
+      type: Number | Boolean,
+      default: 0,
     },
     disabled: {
       type: Boolean,
@@ -71,7 +71,11 @@ export default {
   watch: {
     value: function(newValue, oldValue) {
       if (newValue !== oldValue) {
-        this.currentValue = newValue
+        if (typeof newValue === 'boolean') {
+          this.currentValue = newValue;
+        } else {
+          this.currentValue = Number(newValue) === 1 ? true : false;
+        }
       }
     }
   },

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-09 18:19:34
+ * @LastEditTime: 2024-08-12 14:09:57
  * @Version: 1.0.0
  * @Description: 动态渲染-文本框组件
  * @Copyright: Copyright (c) 2021, Hand-RongJing
@@ -18,7 +18,7 @@
     :required="required"
     :clearable="clearable"
     :formatter="formatter"
-    :rules="[{ required: true, message: `请输入${label}` }]"
+    :rules="[{ required, message: `请输入${label}` }]"
     :error="false"
   >
     <d-label :label="label" :help="help" slot="label" />
@@ -102,7 +102,6 @@ export default {
       return val;
     },
     fieldInput (val) {
-      console.log('val', val)
       this.$emit('input', val)
       this.$emit('change', val)
     },

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-09 18:20:53
+ * @LastEditTime: 2024-08-12 11:15:21
  * @Version: 1.0.0
  * @Description: 动态渲染-开关组件
  * @Copyright: Copyright (c) 2021, Hand-RongJing
@@ -50,8 +50,8 @@ export default {
       default: ''
     },
     value: {
-      type: Boolean,
-      default: false,
+      type: Number | Boolean,
+      default: 0,
     },
     disabled: {
       type: Boolean,
@@ -70,15 +70,19 @@ export default {
   watch: {
     value: function(newValue, oldValue) {
       if (newValue !== oldValue) {
-        this.currentValue = newValue
+        if (typeof newValue === 'boolean') {
+          this.currentValue = newValue;
+        } else {
+          this.currentValue = Number(newValue) === 1 ? true : false;
+        }
       }
     }
   },
   methods: {
     checked (flag) {
       if (!this.disable) {
-        this.$emit('input', flag)
-        this.$emit('change', flag)
+        this.$emit('input', flag ? 1 : 0);
+        this.$emit('change', flag ? 1 : 0);
       }
     },
   },

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-09 16:22:01
+ * @LastEditTime: 2024-08-11 10:44:31
  * @Version: 1.0.0
  * @Description: 动态渲染-超链接组件
  * @Copyright: Copyright (c) 2021, Hand-RongJing
@@ -19,10 +19,12 @@
 
 <script>
 import {Cell, Checkbox} from 'vant';
+import DLabel from './DLabel';
 
 export default {
   name: 'DUrl',
   components: {
+    DLabel,
     [Cell.name]: Cell,
     [Checkbox.name]: Checkbox,
   },
@@ -36,8 +38,8 @@ export default {
       default: ''
     },
     value: {
-      type: Boolean,
-      default: false,
+      type: String,
+      default: '',
     },
     disabled: {
       type: Boolean,

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-09 22:40:43
+ * @LastEditTime: 2024-08-12 14:09:34
  * @Version: 1.0.0
  * @Description: 表单渲染
  * @Copyright: Copyright (c) 2021, Hand-RongJing
@@ -11,7 +11,7 @@
   <fragment>
     <DTitle  v-if="showTitle" :title="tabInfo.description" :tabButtons="tabInfo.tabButtons || []" />
 
-    <van-form @submit="onSubmit" ref="formRef" error-message-align="right" input-align="right">
+    <van-form ref="formRef" error-message-align="right" input-align="right">
       <fragment v-for="field in fieldList" :key="field.columnName">
         <d-field 
           v-if="fieldComponents.indexOf(field.validationTypeDisplay) > -1"
@@ -109,6 +109,7 @@ import DCheckbox from './FormItem/DCheckbox';
 import DUrl from './FormItem/DUrl';
 import DTitle from '../DTitle';
 import DButtons from '../DButtons';
+import hlsHttp from '../../utils/hlsHttp';
 
 export default {
   name: 'DForm',
@@ -155,25 +156,44 @@ export default {
     }
   },
   data () {
-    let initFields = {}
-    this.fields.forEach(item => {
-      initFields[item.columnName] = null;
-    })
     return {
       fieldComponents: ['TextField',"TextArea", "Currency", "NumberField", "EmailField","CentField"],
       dateComponents: ["DatePicker", "DateTimePicker"],
       componentTypes: ["UrlField"],
       fieldList: [...this.fields],
-      fieldsObj: {...initFields}
+      fieldsObj: {},
+      queryParams: {},
     }
   },
+  inject: ['dynamicInfo'],
   mounted() {
+    this.init();
+  },
+  activated() {
     console.log('D-form', this.fields)
-    if (this.record && JSON.stringify(this.record) === '{}') {
+    this.init();
+  },
+  methods: {
+    init() {
+      this.queryParams = this.dynamicInfo().queryParams;
+      if (JSON.stringify(this.record) === '{}') { // 新建
+        let initFields = {}
+        this.fields.forEach(item => {
+          initFields[item.columnName] = item.defaultValue ? item.defaultValue : null;
+          if (item.dataType === 'boolean') {
+            initFields[item.columnName] = item.defaultValue === '1' ? true : false;
+          }
+        })
+        this.fieldsObj = {...initFields};
+      } else { // 详情
         this.fieldsObj = {...this.record};
       }
+      if (this.tabInfo && this.tabInfo.readUrl) {
+        hlsHttp.get(this.tabInfo.readUrl, this.queryParams).then(res => {
+          this.fieldsObj = res.content.length ? res.content[0] : {};
+        })
+      }
     },
-  methods: {
     getInputType(type) {
       if (type === 'TextArea') {
         return 'textarea';
@@ -205,25 +225,26 @@ export default {
       }
       return {};
     },
-    onSubmit() {
-      console.log('souusole', this.fieldsObj)
-    },
     fieldChange(val) {
-      console.log(val)
+      // console.log(val)
     },
     validate() {
-      console.log('字段娇艳', this.fieldsObj)
       this.$refs.formRef.submit();
-      // this.$refs.formRef.submit((res) => {
-      //   console.log(res);
-      // }, err => {
-      //   console.log(err)
-      // })
-      // this.fields.forEach(field => {
-      //   if (!(this.fieldsObj[field.columnName])) {
-          
-      //   }
-      // })
+      const values = {...this.fieldsObj};
+      this.originFields.forEach(item => {
+        if (item.bind) {
+          const bindField = item.bind.split('.');
+          if (bindField.length >1) {
+            values[item.columnName] = values[bindField[0]] ? values[bindField[0]][bindField[1]] : undefined;
+          } else {
+            values[item.columnName] = values[bindField[0]];
+          }
+        }
+        if (item.dataType === 'boolean') {
+          values[item.columnName] = values[item.columnName] ? 1 : 0;
+        }
+      })
+      return values;
     }
   },
 }

src/Dynamic/ConfigRenderComponent/DTable/DTableTd.jsx

+/*
+ * @Author: zong.wang01@hand-china.com
+ * @Date: 2024-07-30 09:41:54
+ * @LastEditors: zong.wang01@hand-china.com
+ * @LastEditTime: 2024-08-11 10:28:01
+ * @Version: 1.0.0
+ * @Description: 表格列渲染
+ * @Copyright: Copyright (c) 2021, Hand-RongJing
+ */
+import Vue from 'vue';
+
+const DTableTd = {
+  components: {
+  },
+  props: {
+    record: { // 数据
+      type: Object,
+      default: () => ({})
+    },
+    columnName: {
+      type: String,
+      default: '',
+    },
+    tdRender: {
+      type: Function,
+      default: null
+    }
+  },
+  data () {
+    return {
+      
+    }
+  },
+  methods: {
+
+  },
+  // 为了弥补缺少的实例
+  // 提供第二个参数作为上下文
+  render: function (h, context) {
+    return this.tdRender ? this.tdRender(this.record) : <span>{this.$slots.default || (this.record[this.columnName] || '--')}</span>
+  }
+};
+ 
+export default DTableTd;
\ No newline at end of file

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-09 15:19:07
+ * @LastEditTime: 2024-08-12 14:10:34
  * @Version: 1.0.0
  * @Description: 表格渲染
  * @Copyright: Copyright (c) 2021, Hand-RongJing
@@ -12,19 +12,35 @@
     <DTitle :title="tabInfo.description" :tabButtons="tabInfo.tabButtons || []" :buttonsFun="buttonsClick" />
 
     <scroll
-      ref="scroll" class="has-footer" :pullUp="true" :pull-down="true" @pullingUp="getList"
+      ref="scroll" :pullUp="true" :pull-down="true" @pullingUp="getList"
       @pullingDown="getList"
-      height="calc(100vh - 130px)"
+      style="max-height: calc(100vh - 130px)"
     >
       <van-checkbox-group v-model="checkResult">
-        <div v-for="(item, index) in tableData" :key="item[tabInfo.primaryKey]" class="d-table" @click="showRecord(item, index)">
+        <div v-for="(item, pIndex) in tableData" :key="item[tabInfo.primaryKey]" class="d-table">
           <fragment v-for="(column, index) in columns" :key="column.columnName" >
             <div v-if="index === 0" class="d-table-th">
-              <van-checkbox :name="item[tabInfo.primaryKey]">{{column.description}}: {{item[column.columnName]}}</van-checkbox>
+              <van-checkbox :name="item[tabInfo.primaryKey]">
+                {{column.description}}: 
+                <d-table-td
+                  :tdRender="column.renderer"
+                  :columnName="column.columnName" 
+                  :record="item" />
+              </van-checkbox>
+              <van-icon name="records-o" @click="showRecord(item, pIndex)"/>
             </div>
-            <div v-else class="d-table-tr" @click="toDetail">
+            <div v-else class="d-table-tr">
               <span>{{column.description}}</span>
-              <span>{{(column.validationTypeDisplay === 'Switch' ? (item[column.columnName] ? '是' : '否' ) : item[column.columnName]) || '--'}}</span>
+              <d-table-td
+                :tdRender="column.renderer"
+                :columnName="column.columnName" 
+                :record="item"
+              >
+                <template v-if="booleanType.includes(column.validationTypeDisplay)">
+                  {{booleanDisplay[item[column.columnName]] || '--'}}
+                </template>
+                <!-- {{(column.validationTypeDisplay === 'Switch' ? (item[column.columnName] ? '是' : '否' ) : item[column.columnName]) || '--'}} -->
+              </d-table-td>
             </div>
           </fragment>
         </div>
@@ -32,7 +48,14 @@
 
       <van-popup v-model="visible" position="top" class="d-table-form-popup" get-container="body">
         <div class="form-content">
-          <d-form :fields="columns" :originFields="originColumns" ref="dformRef" :record="record" :showTitle="false" />
+          <d-form 
+            v-if="visible"
+            :fields="columns" 
+            :originFields="originColumns" 
+            ref="dformRef" 
+            :record="record" 
+            :showTitle="false" 
+          />
         </div>
         <div class="d-table-form-footer">
           <van-button
@@ -54,18 +77,23 @@
 <script>
 import DTitle from '../DTitle';
 import DForm from '../DForm';
-import { Checkbox, CheckboxGroup, Popup, Button } from 'vant';
-import {get} from '../../utils/hlsHttp';
+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';
 
 export default {
   name: 'DTable',
   components: {
     DTitle,
     DForm,
+    DTableTd,
     [Button.name]: Button,
     [Checkbox.name]: Checkbox,
     [CheckboxGroup.name]: CheckboxGroup,
     [Popup.name]: Popup,
+    [Icon.name]: Icon,
+    [Toast.name]: Toast,
   },
   props: {
     tabInfo: { // 配置信息
@@ -85,8 +113,14 @@ export default {
       default: () => [],
     }
   },
+  inject: ['dynamicInfo'],
   data () {
     return {
+      booleanType: ['Switch', 'Radio', 'CheckBox'],
+      booleanDisplay: {
+        1: '是',
+        0: '否'
+      },
       page: 0,
       size: 10,
       tableData: [], // 表格数据
@@ -94,22 +128,32 @@ export default {
       visible: false,
       record: {}, // 操作记录
       recordIndex: -1,
-      buttonsFun: {}
+      buttonsFun: {},
+      dynamicConfigInfo: {},
     }
   },
   mounted() {
+    this.dynamicConfigInfo = this.dynamicInfo();
+    this.init();
+  },
+  activated() {
+    this.dynamicConfigInfo = this.dynamicInfo();
     this.init();
   },
   methods: {
     init() {
+      this.page = 0;
+      this.tableData = [];
       this.getList();
     },
     getList() {
+      // console.log('D-Table', this.columns)
       const params = {
         page: this.page,
         size: this.size,
+        ...this.dynamicConfigInfo.queryParams,
       }
-      get(this.tabInfo.readUrl, params).then(res => {
+      hlsHttp.get(this.tabInfo.readUrl, params).then(res => {
         this.tableData = this.tableData.concat(res.content || []);
         if (res.totalElements > this.tableData.length) {
           this.page = this.page + 1;
@@ -125,29 +169,35 @@ export default {
       this.visible = true;
     },
     saveRecord() {
-      this.$refs.dformRef.validate();
-      // this.visible = false;
+      const values = this.$refs.dformRef.validate();
+      hlsHttp.post(this.tabInfo.createUrl, [{...values, ...this.dynamicConfigInfo.queryParams}]).then(() => {
+        this.visible = false;
+        Toast.success('保存成功！');
+        this.init();
+      })
     },
     cancelRecord() {
       this.visible = false;
     },
-    toDetail(e) {
-      e.stopPropagation();
-      e.preventDefault()
-      this.$router.push({
-        name: 'DynamicDetail',
-        // params: params
-      })
-    },
     // 删除
     deleteRecords() {
-
+      let result = this.tableData.filter(o => this.checkResult.includes(o[this.tabInfo.primaryKey]));
+      const dataSetName = getDataSetName(this.dynamicConfigInfo.config, this.tabInfo.tabCode);
+      const url = this.tabInfo.destroyUrl || 
+        `/hllc/v1/${getOrganizationId()}/dynamic-crud/delete${dataSetName ? '?datasetName=' + dataSetName : ''}`;
+      hlsHttp.delete(url , result).then(res=> {
+        Toast.success('删除成功！');
+        this.init();
+      })
     },
     buttonsClick(btn) {
-      console.log(btn)
       switch (btn.name) {
         case 'create':
+          if (this.tabInfo.createUrl) {
             this.showRecord({}, -1);
+          } else {
+            Toast.fail('保存接口未配置，请检查配置');
+          }
           break;
         case 'query':
           console.log('查询')
@@ -170,6 +220,8 @@ export default {
 </script>
 
 <style scoped lang="less">
+  @import '../../index.less';
+
   .d-table {
     margin: 0 8px 12px 8px;
     padding: 4px 8px 12px 8px;
@@ -184,12 +236,19 @@ export default {
       color: #646465;
     }
     .d-table-th {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
       padding: 8px 0 12px 8px;
       border-bottom: 1px solid #F3F3F7;;
       font-family: PingFangSC-Semibold;
       font-size: 15px;
       color: #4B4A4B;
       font-weight: 600;
+      .van-icon-records-o {
+        font-size: 17px;
+        color: @primary-color;
+      }
     }
   }
   .d-table-form-popup {

src/Dynamic/ConfigRenderComponent/utils.jsx → src/Dynamic/ConfigRenderComponent/LayoutBuilder.jsx

@@ -2,14 +2,14 @@
  * @Author: zong.wang01@hand-china.com
  * @Date: 2024-07-30 21:21:37
  * @LastEditors: zong.wang01@hand-china.com
- * @LastEditTime: 2024-08-09 14:44:50
+ * @LastEditTime: 2024-08-11 10:52:17
  * @Version: 1.0.0
  * @Description: 
  * @Copyright: Copyright (c) 2021, Hand-RongJing
  */
 import Vue from 'vue';
 import {compact, head, isFunction, isNil, isNumber, isUndefined, upperFirst} from 'lodash';
-import {getCurrentUser} from '../utils/utils';
+import {getCustomizedProp, getHeaderExtrasProp, getCurrentUser} from '../utils/utils';
 
 /**
  * 格式化代码
@@ -93,20 +93,43 @@ export class ColumnBuilder extends BaseBuilder {
     super.init();
   }
 
+  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 };
+    }
+    return { renderer };
+  }
+
+  getCurrentRenderers(columnName, renderers) {
+    return getCustomizedProp(this.layoutCode, this.tabCode, columnName, renderers);
+  }
+
   /**
    * 生成表单下字段组件数组
    * @param {Array.<{columnName: string, columnSeq: number, rowSeq: number, cascadeValue: string, validationTypeDisplay: string, columnCount: number, rowCount: number, inputModeDisplay: string, width: number}>} fields
    * @param {string} cascadeKey
    * @return
    */
-  
   initFields(fields, cascadeKey = '') {
     const newFields = fields.map(field => {
       return {
         ...field,
         readOnly: field.inputModeDisplay === "READONLY",
         required: field.inputModeDisplay === "REQUIRED",
-        clearFlag: field.clearButton === 'Y'
+        clearFlag: field.clearButton === 'Y',
+        renderer: this.getCustomizedRenderer(field.columnName, field).renderer,
       }
       // if (field.validationTypeDisplay === 'UrlField') {
       //   const {renderer} = this.getCustomizedRenderer(field.columnName, field);
@@ -168,11 +191,13 @@ export class ColumnBuilder extends BaseBuilder {
       case 'Table':
       case 'Tree': {
         const newFields = this.fields.map(field => { // .filter(o => o.isVisible === 'Y')
+          const customizedRenderer = this.getCustomizedRenderer(field.columnName);
           return {
             ...field,
             readOnly: field.inputModeDisplay === "READONLY",
             required: field.inputModeDisplay === "REQUIRED",
-            clearFlag: field.clearButton === 'Y'
+            clearFlag: field.clearButton === 'Y',
+            renderer: customizedRenderer.renderer,
           }
         });
         // return newFields;
@@ -561,7 +586,7 @@ class BaseComponentBuilder extends BaseBuilder {
             'query-form',
             {
               props: {
-                fields: newFields,
+                fields: newFields.fields,
                 originFields: newFields._originFields,
                 buttons: this.props.tabButtons,
                 tabInfo: this.props,

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-09 14:39:09
+ * @LastEditTime: 2024-08-11 10:51:32
  * @Version: 1.0.0
  * @Description: 查询表单渲染
  * @Copyright: Copyright (c) 2021, Hand-RongJing
@@ -69,11 +69,11 @@ export default {
        searchValue: '',
     }
   },
-  inject: ['config', 'testname'],
+  inject: ['config'],
    
   mounted() {
     this.configDatas = this.config();
-    console.log('config', this.config())
+    console.log('query-form', this.fields)
   },
   methods: {
     onSearch() { // 搜索

src/Dynamic/ConfigRenderComponent/init.jsx → src/Dynamic/ConfigRenderComponent/index.jsx

@@ -2,15 +2,15 @@
  * @Author: zong.wang01@hand-china.com
  * @Date: 2024-07-30 09:41:54
  * @LastEditors: zong.wang01@hand-china.com
- * @LastEditTime: 2024-08-09 11:10:49
+ * @LastEditTime: 2024-08-11 11:08:27
  * @Version: 1.0.0
  * @Description: 
  * @Copyright: Copyright (c) 2021, Hand-RongJing
  */
 import Vue from 'vue';
 import {Button} from 'vant'
-import layouts from '../layout';
-import {ColumnBuilder, TabButtonBuilder, ComponentBuilder} from './utils.jsx'
+import layouts from '../layout/index.js';
+import {ColumnBuilder, TabButtonBuilder, ComponentBuilder} from './LayoutBuilder.jsx'
 import QueryForm from './QueryForm';
 import DTable from './DTable';
 import DForm from './DForm';
@@ -28,6 +28,10 @@ const ConfigRenderComponent = {
       type: Boolean,
       default: true
     },
+    componentRenderers: {
+      type: Array,
+      default: () => [],
+    },
     staticLayoutTabs: {
       type: Array,
       default: () => [],
@@ -40,7 +44,7 @@ const ConfigRenderComponent = {
       queryParams: {}, // 路由参数
     }
   },
-  inject: ['config'],
+  inject: ['dynamicInfo'],
   created() {
     this.queryParams = {
       ...this.$route.params,
@@ -48,7 +52,13 @@ const ConfigRenderComponent = {
     }
   },
   mounted() {
-    this.configInfo = this.config();
+    this.configInfo = this.dynamicInfo().config;
+    console.log('this.componentRenderers', this.componentRenderers, this.dynamicInfo())
+  },
+  activated () {
+    
+    this.configInfo = this.dynamicInfo().config;
+    console.log('激活', this.dynamicInfo().queryParams);
   },
   methods: {
     getTabs(layoutTabs, state, layoutCode, createElement) {
@@ -100,7 +110,7 @@ const ConfigRenderComponent = {
               // .withTableFooterRenderers(tableFooterRenderers)
               .withLayoutCode(childrenTab.layoutCode || layoutCode)
               .withParentTabCode(parentTabCode)
-              // .withComponentRenderers(componentRenderers)
+              .withComponentRenderers(this.componentRenderers)
               .build();
              
             const findField = find(tabFields, { formatCascadeFlag: 'Y' });

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-09 17:48:37
+ * @LastEditTime: 2024-08-12 09:31:49
  * @Version: 1.0.0
  * @Description: 
  * @Copyright: Copyright (c) 2021, Hand-RongJing
@@ -16,7 +16,10 @@
     </h-header>
     <h-content>
       <van-loading size="24px" vertical v-if="loading">加载中...</van-loading>
-      <config-render-component v-if="configDatas.id" />
+      <config-render-component 
+        v-if="configDatas.id"
+        :componentRenderers="componentRenderers"
+      />
     </h-content>
     <layout-buttons v-if="configDatas.id" />
   </h-view>
@@ -25,7 +28,7 @@
 <script>
 import {Loading} from 'vant';
 import LayoutButtons from './LayoutButtons';
-import ConfigRenderComponent from './ConfigRenderComponent/init.jsx';
+import ConfigRenderComponent from './ConfigRenderComponent/index.jsx';
 import {query, queryRoute} from './service'
 import './index.less'
 
@@ -45,6 +48,10 @@ export default {
       type: Boolean,
       default: true
     },
+    componentRenderers: { // 组件渲染
+      type: Array,
+      default: () => []
+    }
   },
   data () {
     return {
@@ -61,17 +68,33 @@ export default {
   },
   provide() {
     return {
-      testname: () => this.testname,
-      config: () => this.configDatas // 提供方法，注意提供的方法要写在return对象中
+      config: () => this.configDatas, // 提供方法，注意提供的方法要写在return对象中
+      queryParams: () => this.queryParams,
+      dynamicInfo: () => ({ // 配置的所有信息
+        layoutCode: this.layoutCode,
+        config: this.configDatas,
+        queryParams: {
+          ...this.$route.params,
+      ...this.$route.query
+        },
+        componentRenderers: this.componentRenderers
+      })
     };
   },
   created() {
-    window.localStorage.setItem('access_token', '75d8f55f-4043-454c-a647-ef62a9bf7e5b');
+    window.localStorage.setItem('access_token', '1f22ae78-2ee2-470c-bea4-916396e5632c');
     this.queryParams = {
       ...this.$route.params,
       ...this.$route.query
     }
   },
+  activated() {
+    this.queryParams = {
+      ...this.$route.params,
+      ...this.$route.query
+    }
+    console.log('activated', this.queryParams)
+  },
   beforeMount() {
     this.layoutCodeQuery();
   },
@@ -95,22 +118,27 @@ export default {
       // if (this.store.config.datas !== null && isEqual(this.qpara, this.store.config.param)) {
       //   return;
       // }
+      let res = {datas: {}, params: {}}
       if (this.layoutCode) {
-          const {datas, params} = await query(
-            this.layoutCode,
-            this.qpara,
-          );
-          this.configDatas = datas;
-          this.params = params;
+        res = await query(this.layoutCode, this.qpara);
       } else {
-          const {datas, params} = await queryRoute(
-            this.$route.path,
-            this.qpara,
-           );
-           this.configDatas = datas;
-          this.params = params;
+        res = await queryRoute(this.layoutCode, this.qpara);
       }
+      const dataSetObj = this.transformDateSetTree(res.datas.dataSetsTree);
+      this.configDatas = {...res.datas, dataSetObject: dataSetObj};
+      this.params = res.params;
       this.loading = false;
+    },
+    transformDateSetTree(tree) {
+      let obj = {};
+      if (tree) {
+        tree.forEach(dataSets => {
+          dataSets.forEach(config => {
+            obj[config.tabCode] = {...config}
+          })
+        })
+      }
+      return obj;
     }
   },
 }

src/Dynamic/utils/hlsHttp.js

@@ -2,7 +2,7 @@
  * @Author: zong.wang01@hand-china.com
  * @Date: 2024-07-29 16:36:23
  * @LastEditors: zong.wang01@hand-china.com
- * @LastEditTime: 2024-08-02 10:52:06
+ * @LastEditTime: 2024-08-10 00:00:58
  * @Version: 1.0.0
  * @Description: 
  * @Copyright: Copyright (c) 2021, Hand-RongJing
@@ -183,6 +183,7 @@ export function post (url, param = {}) {
   //   console.log(postName + ' url ' + url)
   //   console.log(postName + ' parameter ' + JSON.stringify(param, '', 2))
   // }
+  console.log(param)
   return new Promise((resolve, reject) => {
     withTokenAxios({
       method: 'post',
@@ -197,7 +198,71 @@ export function post (url, param = {}) {
   })
 }
 
+// put
+export function put (url, param = {}, queryParams = {}) {
+  param.user_id = window.localStorage.user_id
+  param.access_token = window.localStorage.access_token
+  let headers = {}
+  if (window.localStorage.access_token) {
+    headers = {
+      'Content-Type': 'application/json',
+      'Authorization': 'Bearer ' + window.localStorage.access_token,
+    }
+  } else {
+    headers = {
+      'Content-Type': 'application/json',
+    }
+  }
+
+  return new Promise((resolve, reject) => {
+    withTokenAxios({
+      method: 'put',
+      headers: headers,
+      url: process.env.apiPath + url,
+      data: param,
+      params: queryParams
+    }).then(res => {
+      resolve(res)
+    }).catch(err => {
+      reject(err)
+    })
+  })
+}
+
+// delete请求
+export function deletes (url, param = {}, queryParams = {}) {
+  param.user_id = window.localStorage.user_id
+  param.access_token = window.localStorage.access_token
+  let headers = {}
+  if (window.localStorage.access_token) {
+    headers = {
+      'Content-Type': 'application/json',
+      'Authorization': 'Bearer ' + window.localStorage.access_token,
+    }
+  } else {
+    headers = {
+      'Content-Type': 'application/json',
+    }
+  }
+
+  return new Promise((resolve, reject) => {
+    withTokenAxios({
+      method: 'delete',
+      headers: headers,
+      url: process.env.apiPath + url,
+      data: param,
+      params: queryParams
+    }).then(res => {
+      resolve(res)
+    }).catch(err => {
+      reject(err)
+    })
+  })
+}
+
 export default {
   get: get,
   post: post,
+  put: put,
+  delete: deletes
 }

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-09 15:12:26
+ * @LastEditTime: 2024-08-11 15:27:32
  * @Version: 1.0.0
  * @Description: 工具类
  * @Copyright: Copyright (c) 2021, Hand-RongJing
@@ -29,6 +29,10 @@ const getHeaderExtrasProp = (layoutCode, tabCode, props) => {
   );
 };
 
+const getDataSetName = (config, tabCode) => {
+  return config.dataSetObject[tabCode].dataSetName || '';
+};
+
 /**
  * 判断对象为空
  * @param v
@@ -119,4 +123,11 @@ const getCurrentUser = () => {
 };
 
 
-export { getCustomizedProp, getCustomized,getHeaderExtrasProp, getOrganizationId, getCurrentUser };
+export { 
+  getCustomizedProp, 
+  getCustomized,
+  getHeaderExtrasProp,
+  getDataSetName,
+  getOrganizationId, 
+  getCurrentUser 
+};

src/pages/testDynamic.vue

 
 <template>
-   <Dynamic layoutCode="BP001" />
+   <Dynamic layoutCode="BP001" :componentRenderers="componentRenderers" />
 </template>
 
 <script>
+import {Icon} from 'vant';
+
 export default {
   name: 'TestDynamic',
+  components: {
+    [Icon.name]: Icon,
+  },
   data () {
-    return {}
+    return {
+      componentRenderers: [
+        {
+        tabCode: 'G_QUERY_RESULT',
+        columnName: 'bpName',
+        renderer: (record) => {
+          return <span style="color: #3789ff" onClick={() => this.toDetail(record)}>{record.bpName} <van-icon name="arrow" /></span>
+        },
+      },
+      ]
+    }
+  },
+  methods: {
+    toDetail(record) {
+      console.log({
+          bpId: record.bpId,
+          bpName: record.bpName,
+          bpCode: record.bpCode,
+        })
+      this.$router.push({
+        name: 'DynamicDetail',
+        params: {
+          bpId: record.bpId,
+          bpName: record.bpName,
+          bpCode: record.bpCode,
+        }
+      })
+    },
   },
-  methods: {},
 }
 </script>