表单金额、百分比格式化

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-14 10:29:59
+ * @LastEditTime: 2024-08-15 14:29:52
  * @Version: 1.0.0
  * @Description: 动态渲染-复选框组件
  * @Copyright: Copyright (c) 2021, Hand-RongJing
@@ -75,7 +75,7 @@ export default {
   },
   watch: {
     value: function(newValue, oldValue) {
-      if (newValue !== oldValue) {
+      if (newValue !== oldValue && this.currentValue !== newValue) {
         if (typeof newValue === 'boolean') {
           this.currentValue = newValue;
         } else {

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

+<!--
+ * @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
+ * @Version: 1.0.0
+ * @Description: 动态渲染-文本框组件
+ * @Copyright: Copyright (c) 2021, Hand-RongJing
+-->
+<template>
+<div class="d-form-item">
+  <van-field 
+    v-model="formatValue"
+    :placeholder="disabled ? '' : '请输入'"
+    @input="fieldInput"
+    @focus="onFocus"
+    @blur="onBlur"
+    :name="name"
+    :type="focused ? 'number' : 'text'"
+    :disabled="disabled"
+    :required="required"
+    :clearable="!disabled && clearable"
+    :rules="[{ required, message: `请输入${label}` }]"
+    :error="false"
+    clear-trigger="always"
+  >
+    <d-label :label="label" :help="help" slot="label" />
+  </van-field>
+</div>
+  
+</template>
+
+<script>
+import {Cell, Field, Icon} from 'vant';
+import DLabel from './DLabel';
+
+export default {
+  name: 'DCheckbox',
+  components: {
+    [Cell.name]: Cell,
+    [Field.name]: Field,
+    [Icon.name]: Icon,
+    DLabel
+  },
+  props: {
+    name: {
+      type: String,
+      default: ''
+    },
+    help: {
+      type: String,
+      default: ''
+    },
+    label: {
+      type: String,
+      default: ''
+    },
+    value: {
+      type: String | Number,
+      default: '',
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    clearable: {
+      type: Boolean,
+      default: false,
+    }
+  },
+  data () {
+    return {
+      focused: false,
+      currentValue: '',
+    }
+  },
+  computed: {
+    formatValue: {
+      get() {
+        let dcurrency = this.$options.filters['dcurrency']
+        if (!this.focused && this.currentValue) {
+          return dcurrency(this.currentValue)
+        } else {
+          return this.currentValue
+        }
+      },
+      set(){}
+    },
+  },
+  watch: {
+    value: function(newValue, oldValue) {
+      if (newValue !== oldValue) {
+        this.currentValue = newValue
+      }
+    }
+  },
+  filters: {
+    dcurrency (val) {
+      if (!val) return '0.00';
+      let value2Array = (val + '').split('.')
+      let intPart = value2Array.length === 2 ? value2Array[0] : val
+      let intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') // 将整数部分逢三一断
+      let floatPart = '.00' // 预定义小数部分
+      // =2表示数据有小数位
+      if (value2Array.length === 2) {
+        floatPart = value2Array[1].toString() // 拿到小数部分
+
+        if (floatPart.length === 1) { // 补0,实际上用不着
+          return intPartFormat + '.' + floatPart + '0'
+        } else {
+          return intPartFormat + '.' + floatPart
+        }
+      } else {
+        return intPartFormat + floatPart
+      }
+    },
+  },
+  methods: {
+    fieldInput (val) {
+      this.$emit('input', Number(val));
+      this.$emit('change', Number(val));
+    },
+    onFocus() {
+      this.focused = true;
+    },
+    onBlur() {
+      this.focused = false;
+    }
+  },
+}
+</script>

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-14 16:01:30
+ * @LastEditTime: 2024-08-15 14:29:10
  * @Version: 1.0.0
  * @Description: 动态渲染-日期组件
  * @Copyright: Copyright (c) 2021, Hand-RongJing
@@ -135,7 +135,6 @@ export default {
   watch: {
     value: function(newValue, oldValue) {
       if (newValue !== oldValue && this.currentValue !== newValue) {
-        console.log('日期过来了', newValue)
         this.currentValue = newValue;
         if (newValue) {
           this.dateParse(this.currentValue);
@@ -160,7 +159,6 @@ export default {
         cols.unshift(currentYear - i);
         cols.push(currentYear + i);
       }
-      console.log(cols);
       this.columns = cols;
     },
     dateParse(val) {
@@ -237,10 +235,6 @@ export default {
         const weekNum = Math.ceil((pastDaysOfYear + firstDayOfYear.getDay() + 1) / 7);  // 计算当前日期是第几周
         dateDescription = `${year}-${weekNum}周`;
       }
-      console.log({
-        value: dateValue,
-        description: dateDescription
-      })
       return {
         value: dateValue,
         description: dateDescription

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-14 11:12:05
+ * @LastEditTime: 2024-08-15 12:09:45
  * @Version: 1.0.0
  * @Description: 动态渲染-文本框组件
  * @Copyright: Copyright (c) 2021, Hand-RongJing
@@ -11,14 +11,13 @@
 <div class="d-form-item">
   <van-field 
     v-model="currentValue"
-    :placeholder="disabled ? '' : '请选择'"
+    :placeholder="disabled ? '' : '请输入'"
     @input="fieldInput"
     :name="name"
     :type="fieldType[type]"
     :disabled="disabled"
     :required="required"
     :clearable="!disabled && clearable"
-    :formatter="formatter"
     :rules="[{ required, message: `请输入${label}` }]"
     :error="false"
     :class="type === 'TextArea' ? 'd-form-textarea' : ''"
@@ -88,26 +87,19 @@ export default {
         TextArea: 'textarea',
         NumberField: 'number', 
         EmailField: 'text', 
-        CentField: 'number', 
-        Currency: 'number'
+        CentField: 'number'
       },
       currentValue: '',
     }
   },
   watch: {
     value: function(newValue, oldValue) {
-      if (newValue !== oldValue) {
-        this.currentValue = newValue
+      if (newValue !== oldValue && this.currentValue !== newValue) {
+        this.currentValue = newValue;
       }
     }
   },
   methods: {
-    formatter(val) {
-      // if (this.type === 'Currency') {
-      //   return `${val}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
-      // }
-      return val;
-    },
     fieldInput (val) {
       this.$emit('input', val)
       this.$emit('change', val)

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-14 10:26:23
+ * @LastEditTime: 2024-08-15 14:30:48
  * @Version: 1.0.0
  * @Description: 动态渲染-Lov
  * @Copyright: Copyright (c) 2021, Hand-RongJing

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-14 10:30:25
+ * @LastEditTime: 2024-08-15 14:31:20
  * @Version: 1.0.0
  * @Description: 动态渲染-开关组件
  * @Copyright: Copyright (c) 2021, Hand-RongJing
@@ -74,7 +74,7 @@ export default {
   },
   watch: {
     value: function(newValue, oldValue) {
-      if (newValue !== oldValue) {
+      if (newValue !== oldValue && this.currentValue !== newValue) {
         if (typeof newValue === 'boolean') {
           this.currentValue = newValue;
         } else {

src/Dynamic/ConfigRenderComponent/DForm/index.vue

@@ -2,7 +2,7 @@
  * @Author: zong.wang01@hand-china.com
  * @Date: 2024-07-29 10:51:56
  * @LastEditors: zong.wang01@hand-china.com
- * @LastEditTime: 2024-08-14 17:32:53
+ * @LastEditTime: 2024-08-15 12:04:42
  * @Version: 1.0.0
  * @Description: 表单渲染
  * @Copyright: Copyright (c) 2021, Hand-RongJing
@@ -31,6 +31,17 @@
           :clearable="field.clearFlag"
         />
 
+        <d-currency 
+          v-if="field.validationTypeDisplay === 'Currency'"
+          v-model="fieldsObj[field.columnName]"
+          :name="field.columnName"
+          :help="field.help"
+          :label="field.description"
+          :disabled="readOnly || field.readOnly"
+          :required="field.required"
+          :clearable="field.clearFlag"
+        />
+
         <d-switch 
           v-if="field.validationTypeDisplay === 'Switch'"
           :label="field.description"
@@ -117,6 +128,7 @@
 
 <script>
 import { Field, Form, Button, Cell } from 'vant';
+import DCurrency from './FormItem/DCurrency';
 import DField from './FormItem/DField';
 import DSwitch from './FormItem/DSwitch';
 import DSelect from './FormItem/DSelect';
@@ -142,6 +154,7 @@ export default {
     DCheckbox,
     DUrl,
     DTitle,
+    DCurrency,
     DCheckbox
   },
   props: {
@@ -172,7 +185,7 @@ export default {
   },
   data () {
     return {
-      fieldComponents: ['TextField',"TextArea", "Currency", "NumberField", "EmailField","CentField"],
+      fieldComponents: ['TextField',"TextArea", "NumberField", "EmailField","CentField"],
       dateComponents: ["DatePicker", "DateTimePicker"],
       componentTypes: ["UrlField"],
       fieldList: [...this.fields],
@@ -226,6 +239,10 @@ export default {
     },
     formatFieldsValue() {
       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('.');
           if (bindField.length >1) {
@@ -285,6 +302,10 @@ export default {
           console.log('values', values)
           const formValues = {};
           this.originFields.forEach(item => {
+            if (item.validationTypeDisplay === 'CentField' && values[item.columnName]) {
+              values[item.columnName] = values[item.columnName] / 100;
+              console.log('CentField2', values[item.columnName])
+            }
             if (item.bind) {
               const bindField = item.bind.split('.');
               if (bindField.length >1) {

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:10:21
+ * @LastEditTime: 2024-08-15 10:48:44
  * @Version: 1.0.0
  * @Description: 
  * @Copyright: Copyright (c) 2021, Hand-RongJing
@@ -92,7 +92,7 @@ export default {
     };
   },
   created() {
-    window.localStorage.setItem('access_token', 'eee48cb3-3db0-4a82-99dd-3168b9610a8c');
+    window.localStorage.setItem('access_token', '5383d2f6-a740-4c9c-a4eb-008568f8f991');
     this.params = {
       ...this.$route.params,
       ...this.$route.query

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-13 16:10:43
+ * @LastEditTime: 2024-08-15 11:48:09
  * @Version: 1.0.0
  * @Description: 工具类
  * @Copyright: Copyright (c) 2021, Hand-RongJing