表单表格优化

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 11:21:18
+ * @LastEditTime: 2024-08-20 09:56:05
  * @Version: 1.0.0
  * @Description: 动态渲染-Lov
  * @Copyright: Copyright (c) 2021, Hand-RongJing
@@ -116,7 +116,7 @@ export default {
   props: {
     fieldConfig: {
       type: Object,
-      default: () => {}
+      default: () => ({})
     },
     name: {
       type: String,
@@ -132,7 +132,7 @@ export default {
     },
     value: {
       type: Object | Array,
-      default: () => {},
+      default: () => ({}),
     },
     disabled: {
       type: Boolean,

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:22:10
+ * @LastEditTime: 2024-08-20 09:55:39
  * @Version: 1.0.0
  * @Description: 动态渲染-Select
  * @Copyright: Copyright (c) 2021, Hand-RongJing
@@ -176,10 +176,11 @@ export default {
       });
       if (this.multiple) { // 多选
         this.currentValue = selectData;
+        this.fieldValue = this.currentValue.length ? JSON.stringify(this.currentValue) : ''
       } else {
         this.currentValue = selectData.length ? selectData[0] : { meaning: '', value: '' };
+        this.fieldValue = this.currentValue.value;
       }
-      this.fieldValue = this.currentValue ? JSON.stringify(this.currentValue) : ''
     },
     showSelectOption(flag) {
       if (!this.disabled)  {

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-19 10:59:43
+ * @LastEditTime: 2024-08-20 12:11:27
  * @Version: 1.0.0
  * @Description: 表单渲染
  * @Copyright: Copyright (c) 2021, Hand-RongJing
@@ -119,7 +119,7 @@
           :fieldConfig="field"
           :disabled="readOnly || field.readOnly"
           :required="field.required"
-          :getCurrentRecord="getCurrentRecord"
+          :getCurrentRecord="getFieldsValue"
           @change="fieldChange"
         />
       </fragment>
@@ -199,7 +199,7 @@ export default {
       originFieldsObj: {}, // 重置使用
       queryParams: {},
       readOnly: true,
-      status: 'add',
+      status: 'create',
     }
   },
   mounted() {
@@ -221,23 +221,23 @@ export default {
           }
         })
         this.fieldsObj = {...initFields};
-        this.status = 'add';
+        this.status = 'create';
       } else { // 详情
         this.fieldsObj = {...this.record};
         this.status = 'update';
       }
 
       if (this.formType === 'normal') {
+        this.addFormRef(this, this.tabInfo.tabCode); //正常表单保存表单组件实例，供页面整体保存时使用
         if (this.tabInfo.readUrl) {
           // console.log('D-form-activated', this.tabInfo.readUrl, JSON.stringify(this.queryParams))
           const res = await getFormData(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';
         } else {
-          this.status = 'add';
+          this.status = 'create';
         }
       }
       this.formatFieldsValue();
@@ -335,9 +335,19 @@ export default {
     reset() {
       this.fieldsObj = {...this.originFieldsObj};
     },
-    getCurrentRecord() {
+    getFieldsValue(names) {
+      if (names && names.length) {
+        let fieldsValue = {};
+        names.forEach(n => {
+          fieldsValue[n] = this.fieldsObj[n];
+        });
+        return fieldsValue;
+      }
       return this.fieldsObj;
     },
+    setFieldsValue(fieldsValue) {
+      this.fieldsObj = {...this.fieldsObj, ...fieldsValue};
+    },
     buttonsClick(btn) {
       const customBtn = this.componentButtons.find(o => o.name === btn.name); // 采用页面传入的方法
       if (customBtn && customBtn.clickFunction) {

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 16:00:59
+ * @LastEditTime: 2024-08-20 22:52:04
  * @Version: 1.0.0
  * @Description: 表格渲染
  * @Copyright: Copyright (c) 2021, Hand-RongJing
@@ -166,22 +166,17 @@ export default {
     this.init();
   },
   deactivated() {
-    EventBus.$off('tableQuery');
+    EventBus.$off('tableQuery', this.listenHandle);
   },
   beforeDestroy() {
-    EventBus.$off('tableQuery');
+    EventBus.$off('tableQuery', this.listenHandle);
   },
   methods: {
     init() {
       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();
-            }
-          });
+          EventBus.$on('tableQuery', this.listenHandle);
         }
         this.refresh();
 
@@ -194,6 +189,12 @@ export default {
         }
       })
     },
+    listenHandle(data) {
+      if (this.tabInfo.queryTabCode === data.tabCode) {
+        this.queryParams = data.values;
+        this.refresh();
+      }
+    },
     refresh() {
       this.page = 0;
       this.tableData = [];

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-16 15:15:24
+ * @LastEditTime: 2024-08-20 22:51:47
  * @Version: 1.0.0
  * @Description: 查询表单渲染
  * @Copyright: Copyright (c) 2021, Hand-RongJing
@@ -116,7 +116,7 @@ export default {
         }
       });
       delete values._status;
-      EventBus.$emit('tableQuery', values, this.tabInfo.tabCode);
+      EventBus.$emit('tableQuery', {values, tabCode: this.tabInfo.tabCode});
       this.show = false;
     },
     reset() {

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-16 11:27:44
+ * @LastEditTime: 2024-08-20 09:57:50
  * @Version: 1.0.0
  * @Description: 工具类
  * @Copyright: Copyright (c) 2021, Hand-RongJing
@@ -94,6 +94,25 @@ const dateFormat = (type, time) => { // 时间格式化 2019-09-08
     }
   };
 
+  // 根据tabcode获取对应的表单值
+const getFormValuesByTabCode = async (dataSets, tabCode) => {
+  const formRef = dataSets[tabCode].formRef;
+  if (formRef) {
+    const values = await formRef.validate();
+    return values;
+  }
+  return {
+    allValues: {},
+    formValues: {}
+  }
+}
+
+// 根据tabcode获取对应的组件ref
+const getRefByTabCode = (dataSets, tabCode) => {
+  const formRef = dataSets[tabCode].formRef;
+  return formRef;
+}
+
 const getOrganizationId = () => {
   return 0;
   // const globalState = getDvaApp()._store.getState();
@@ -161,6 +180,8 @@ export {
   getDataSetName,
   dateFormat,
   detectOS,
+  getFormValuesByTabCode,
+  getRefByTabCode,
   getOrganizationId, 
   getCurrentUser 
 };

src/pages/dynamicDetail.vue

 <!--
  * @Author: zong.wang01@hand-china.com
- * @Date: 2024-07-31 18:41:49
+ * @Date: 2024-08-16 09:39:36
  * @LastEditors: zong.wang01@hand-china.com
- * @LastEditTime: 2024-08-15 17:42:00
+ * @LastEditTime: 2024-08-20 11:42:31
  * @Version: 1.0.0
- * @Description: 
+ * @Description: 商机维护详情
  * @Copyright: Copyright (c) 2021, Hand-RongJing
 -->
-
 <template>
-   <Dynamic 
-    layoutCode="PRJ005F1" 
-    :componentRenderers="componentRenderers" 
-    :headerButtons="headerButtons"
-    :layoutButtons="layoutButtons"
-    :staticLayoutTabs="staticLayoutTabs"
+  <Dynamic 
+    layoutCode="CN001F1"
+    :showTitle="false"
+    :componentRenderers="componentRenderers"
     :configLoadHandle="configLoadHandle"
     :dataLoadHandle="dataLoadHandle"
+    :layoutButtons="layoutButtons"
     ref="dynamicRef"
   />
 </template>
 
 <script>
-import {Button} from 'vant';
+import { NavBar, Button, Search, List, Toast, Dialog } from 'vant';
+import Dynamic from '../Dynamic'
+import {getFormValuesByTabCode} from '../Dynamic/utils/utils'
+// import chanceApi from '../api/chance'
 
 export default {
   name: 'DynamicDetail',
   components: {
-    [Button.name]: Button
+    Dynamic,
+    [NavBar.name]: NavBar,
+    [Button.name]: Button,
+    [Search.name]: Search,
+    [List.name]: List,
+    [Toast.name]: Toast,
+    [Dialog.name]: Dialog,
   },
   data () {
     return {
-      buttonText: '嵌入内容',
+      config: {},
       componentRenderers: [
         {
-          tabCode: 'F_BASIC',
-          columnName: 'test',
-          renderer: (field, getRecord) => {
-            return <span>328388</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>
           },
         },
       ],
-      headerButtons: [
-        {
-          description: '复制',
-          name: "copy",
-        },
-        {
-          description: '新建',
-          name: "new",
-        },
-      ],
       layoutButtons: {
-        submit: this.handleHeaderSubmit,
-        remove: this.handleDelete,
-        copy: this.handleCopyClick
+        submit: this.submit,
+        save: this.save,
       },
-      staticLayoutTabs: [
-        {
-          tabCode: 'F_STATIC',
-          component: (props) => {
-            return (
-              <van-button onClick={this.handleCopyClick}>{this.buttonText}</van-button>
-            )
-
-          },
-        },
-      ]
     }
   },
   methods: {
     configLoadHandle(config) { // 查询配置信息之后的回调
       console.log('configLoadHandle', config)
+      this.config = config;
     },
     dataLoadHandle(data, tabCode) {
       console.log(tabCode, data);
     },
-    handleCopyClick() {
-      console.log('复制')
-      this.buttonText = '复制'
+    async save() {
+      let saveValues = {};
+      const saveDataSet = this.config.dataSetObject;
+      const basiceValues = await getFormValuesByTabCode(saveDataSet, 'F_BASIC');
+      saveValues = {...basiceValues.allValues};
+      const schemeValues = await getFormValuesByTabCode(saveDataSet, 'F_SCHEME');
+      saveValues = {...saveValues, ...schemeValues.formValues};
+      console.log('saveValues', saveValues);
+
+      const datas = {
+        ...saveValues,
+        chanceContactInfoList: [],
+        chanceProcessList: [],
+        chanceAttachmentList: []
+      };
+
+      // let res = await chanceApi.save(datas);
+      // Toast.success('操作成功！');
+    },
+    async submit() {
+      const saveDataSet = this.config.dataSetObject;
+      const basiceValues = await getFormValuesByTabCode(saveDataSet, 'F_BASIC');
+      const schemeValues = await getFormValuesByTabCode(saveDataSet, 'F_SCHEME');
+      let saveValues = {...basiceValues.allValues, ...schemeValues.formValues};
+
+
+      const datas = {
+        ...saveValues,
+        chanceContactInfoList: [],
+        chanceProcessList: [],
+        chanceAttachmentList: []
+      };
+
+      if (saveValues.chanceName == null || saveValues.bpNameLov == null) {
+        Toast.fail('请输入必填项！');
+      } else {
+        Dialog.confirm({
+          title: '确定提交工作流吗',
+          // message:'如果解决方法是丑陋的，那就肯定还有更好的解决方法，只是还没有发现而已。',
+        }).then(() => {
+            const { chanceId } = this.config.queryParams;
+            this.checkApproval(chanceId, datas);
+        });
+      }
     },
-    handleHeaderSubmit() {
-      console.log("点击提交")
-      this.buttonText = '提交'
+    async checkApproval(chanceId, datas) {
+      const response = await chanceApi.checkApproval(chanceId);
+      if (response.length === 0) {
+        this.submitCallback(datas);
+      } else {
+        Dialog.confirm({
+          title: '自选审批人',
+          // message:'如果解决方法是丑陋的，那就肯定还有更好的解决方法，只是还没有发现而已。',
+        }).then(() => {
+            this.submitCallback(datas)
+        });
+        // C7nModal.open({
+        //   title: '自选审批人',
+        //   closable: true,
+        //   destroyOnClose: true,
+        //   keyboardClosable: true,
+        //   footer: null,
+        //   children: (
+        //     <OptionalApprovalForm itemList={response} callBack={() => this.submitCallback(datas)} />
+        //   )
+        // });
+      }
     },
-    handleDelete() {
-      console.log("点击删除")
+    submitCallback(datas) {
+      // const promise = chanceApi.submit(datas);
+      // promise.then(
+      //   () => {
+      //     Toast.success('提交成功');
+      //     this.goBack();
+      //   },
+      //   err => {
+      //     Toast.fail(err.message);
+      //   }
+      // );
     },
-    handleNew() {
-      console.log("点击新建")
-    }
   },
-}
+};
 </script>
 
-<style lang="less">
-h4{
-  font-size: 20px;
-  margin-left: 15px;
-}
-  a{
-    width: 100%;
-  }
+<style lang="stylus" scoped>
+
 </style>

src/pages/testDynamic.vue

 <!--
  * @Author: zong.wang01@hand-china.com
- * @Date: 2024-07-29 11:02:22
+ * @Date: 2024-08-16 09:39:36
  * @LastEditors: zong.wang01@hand-china.com
- * @LastEditTime: 2024-08-19 14:27:09
+ * @LastEditTime: 2024-08-20 11:41:44
  * @Version: 1.0.0
  * @Description: 
  * @Copyright: Copyright (c) 2021, Hand-RongJing
 -->
-
 <template>
-   <Dynamic 
-    layoutCode="CN001" 
-    :showTitle="true"
+  <Dynamic 
+    layoutCode="CN001"
+    :showTitle="false"
     :componentRenderers="componentRenderers"
     :configLoadHandle="configLoadHandle"
     :dataLoadHandle="dataLoadHandle"
+    :layoutButtons="layoutButtons"
     ref="dynamicRef"
   />
 </template>
 
 <script>
-import {Icon} from 'vant';
+import { NavBar, Button, Search, List, Toast } from 'vant';
+import Dynamic from '../Dynamic'
 
 export default {
   name: 'TestDynamic',
   components: {
-    [Icon.name]: Icon,
+    Dynamic,
+    [NavBar.name]: NavBar,
+    [Button.name]: Button,
+    [Search.name]: Search,
+    [List.name]: List,
+    [Toast.name]: Toast,
   },
   data () {
     return {
       componentRenderers: [
         {
-          tabCode: 'G_QUERY_RESULT',
-          columnName: 'projectName',
+          tabCode: 'G_RESULT',
+          columnName: 'chanceName',
           renderer: (record, index) => {
-            return <span style="color: #3789ff" onClick={() => this.toDetail(record)}>{record.projectName} <van-icon name="arrow" /></span>
+            return <span style="color: #3789ff" onClick={() => this.toDetail(record)}>{record.chanceName} <van-icon name="arrow" /></span>
           },
         },
-      ]
+      ],
+      layoutButtons: {
+        create: this.create,
+      },
     }
   },
-  created() {
-     window.localStorage.setItem('access_token', '6cb71898-2af9-4c27-a042-b9887b0675f4');
-  },
   methods: {
     configLoadHandle(config) { // 查询配置信息之后的回调
       console.log('configLoadHandle', config)
@@ -51,31 +57,30 @@ export default {
       console.log(tabCode, data);
     },
     toDetail(record) {
-        this.$router.push({
+      let readOnly = 'false';
+      if (
+        record.chanceStatus === 'APPROVING' ||
+        record.chanceStatus === 'APPROVED'
+      ) {
+        readOnly = 'true'
+      }
+      this.$router.push({
         name: 'DynamicDetail',
         params: {
-          projectId: record.projectId
+            chanceId: record.chanceId,
+            readOnly
         }
       })
-      // this.$router.push({
-      //   name: 'DynamicDetail',
-      //   params: {
-      //     bpId: record.bpId,
-      //     bpName: record.bpName,
-      //     bpCode: record.bpCode,
-      //   }
-      // })
     },
+    create() {
+      this.$router.push({
+        name: 'ChanceCreate'
+      })
+    }
   },
-}
+};
 </script>
 
-<style lang="less">
-h4{
-  font-size: 20px;
-  margin-left: 15px;
-}
-  a{
-    width: 100%;
-  }
+<style lang="stylus" scoped>
+
 </style>