up

src/plugins/HTableForm.js

@@ -1,72 +1,101 @@
 import {createApp} from "vue/dist/vue.esm-bundler.js";
 import {getTokenHeader} from '~src/api/request/header';
-import {ElButton,ElTooltip,ElInput,ElDatePicker,ElUpload,ElInputNumber,ElTimePicker,ElSelect,ElOption,ElRadioGroup,ElRadio,ElCheckbox,ElCheckboxGroup} from 'element-plus'
-const components = {ElButton,ElTooltip,ElInput, ElDatePicker, ElUpload, ElInputNumber, ElTimePicker, ElSelect, ElOption, ElRadioGroup, ElRadio, ElCheckbox, ElCheckboxGroup}
+import {
+    ElButton,ElTooltip,ElInput,ElDatePicker,ElUpload,
+    ElInputNumber,ElTimePicker,ElSelect,ElOption,ElRadioGroup,
+    ElRadio,ElCheckbox,ElCheckboxGroup
+} from 'element-plus'
+import {toParse,deepClone} from "vue-utils-plus";
+const components = {
+    ElButton,ElTooltip,ElInput, ElDatePicker, ElUpload,
+    ElInputNumber, ElTimePicker, ElSelect, ElOption, ElRadioGroup,
+    ElRadio, ElCheckbox, ElCheckboxGroup
+}
 
 //表单渲染
-export const HTableForm = ({template, tableForm, appId, onRight}) => {
-    const app = createApp({
-        data() {
-            return {
-                getTokenHeader: getTokenHeader(),
-                formData: tableForm,
-                formUploadLoading: false,
-            }
-        },
-        template,
-        components,
-        watch: {
-            tableForm: {
-                handler(obj) {
-                    this.formData = obj
-                },
-                deep: true
+export default class HTableForm {
+    static createForm({template, tableForm, appId, onRight}) {
+        const app = createApp({
+            data() {
+                return {
+                    getTokenHeader: getTokenHeader(),
+                    formData: tableForm,
+                    formUploadLoading: false,
+                }
             },
-            formData: {
-                handler(obj) {
-                    tableForm = obj
+            template,
+            components,
+            watch: {
+                tableForm: {
+                    handler(obj) {
+                        this.formData = obj
+                    },
+                    deep: true
+                },
+                formData: {
+                    handler(obj) {
+                        tableForm = obj
+                    },
+                    deep: true
                 },
-                deep: true
             },
-        },
-        methods: {
-            //鼠标右键事件
-            RightClick(a,b,c,d,e,f,event) {
-                event.preventDefault();
-                const KeyName = event?.target?.getAttribute('keyname') || ''
-                if (onRight) {
-                    onRight(event, KeyName)
+            methods: {
+                //鼠标右键事件
+                RightClick(a,b,c,d,e,f,event) {
+                    event.preventDefault();
+                    const KeyName = event?.target?.getAttribute('keyname') || ''
+                    if (onRight) {
+                        onRight(event, KeyName)
+                    }
+                },
+                getInformation() {}, //焦点事件
+                datePickerChange(val,key) {
+                    this.formData[key] = val
+                },
+                //上传进度
+                uploadprogress() {
+                    this.formUploadLoading = true
+                },
+                //上传完成
+                formUploadSuccess(res,key) {
+                    this.formUploadLoading = false
+                    if (res.code === 200) {
+                        this.formData[key] = res.data?.link || ''
+                    }
+                },
+                //上传失败
+                formUploadError() {
+                    this.formUploadLoading = false
+                },
+                //格式错误
+                formUploadExceed() {
+                    this.formUploadLoading = false
+                },
+                //删除上传的文件
+                delTableFormFile(key) {
+                    this.formData[key] = ''
                 }
-            },
-            getInformation() {}, //焦点事件
-            datePickerChange(val,key) {
-                this.formData[key] = val
-            },
-            //上传进度
-            uploadprogress() {
-                this.formUploadLoading = true
-            },
-            //上传完成
-            formUploadSuccess(res,key) {
-                this.formUploadLoading = false
-                if (res.code === 200) {
-                    this.formData[key] = res.data?.link || ''
+            }
+        })
+        app.mount(appId)
+        return app
+    }
+    //处理日期范围数据
+    static setPickerKey(data) {
+        const info = deepClone(data)
+        const pickerKey = info['pickerKey'] || ''
+        if (pickerKey) {
+            const pickerKeys = pickerKey.split(',')
+            for (let i = 0; i < pickerKeys.length; i++) {
+                const val = info[pickerKeys[i]] || ''
+                if (val) {
+                    const dataVal = val.replace(/'/g,'"');
+                    info[pickerKeys[i]] = toParse(dataVal) || []
+                } else {
+                    info[pickerKeys[i]] = []
                 }
-            },
-            //上传失败
-            formUploadError() {
-                this.formUploadLoading = false
-            },
-            //格式错误
-            formUploadExceed() {
-                this.formUploadLoading = false
-            },
-            //删除上传的文件
-            delTableFormFile(key) {
-                this.formData[key] = ''
             }
         }
-    })
-    app.mount(appId)
-    return app
+        return info
+    }
 }

src/views/data-fill/components/ListItem.vue

@@ -125,7 +125,7 @@
 <script setup>
 import {ref,watch,nextTick} from "vue";
 import notableform from '~src/assets/view/notableform.svg';
-import {HTableForm} from "~src/plugins/HTableForm"
+import HTableForm from "~src/plugins/HTableForm"
 import wbsApi from "~api/data-fill/wbs"
 import HcUpload from "./HcUpload.vue"
 import {utilsText, isType, toParse, formValidate,deepClone} from "vue-utils-plus"
@@ -224,7 +224,7 @@ const getExcelHtml = async (item,index) => {
         if (!error && code === 200 && resData) {
             item.isTableForm = true
             //渲染表单
-            HTableForm({
+            HTableForm.createForm({
                 template: resData,
                 tableForm: formData.value[index],
                 appId: `#table-form-${pkeyIds}`,
@@ -250,21 +250,9 @@ const getBussDataInfo = async (item,pkeyId, index) => {
         const {error, code, data} = await wbsApi.getBussDataInfo({pkeyId: pkeyIds}, false)
         const resData = getObjNullValue(data)
         if (!error && code === 200 && resData) {
-            //处理日期范围数据
-            const pickerKey = resData['pickerKey'] || ''
-            const pickerKeys = pickerKey.split(',')
-            for (let i = 0; i < pickerKeys.length; i++) {
-                const val = resData[pickerKeys[i]] || ''
-                if (val) {
-                    const data = val.replace(/'/g,'"');
-                    resData[pickerKeys[i]] = toParse(data) || []
-                } else {
-                    resData[pickerKeys[i]] = []
-                }
-            }
-            //有数据，关联数据
-            const InitObj = getFormDataInit(item, pkeyId)
-            formData.value[index] = { ...resData, ...InitObj}
+            const newResData = HTableForm.setPickerKey(resData)
+            const InitObj = getFormDataInit(item, pkeyId) //有数据，关联数据
+            formData.value[index] = { ...newResData, ...InitObj}
         } else {
             formData.value[index] = getFormDataInit(item, pkeyId)
         }

src/views/ledger/components/table-form.vue

@@ -96,7 +96,7 @@
 import {ref, watch, nextTick} from "vue";
 import queryApi from '~api/ledger/query';
 import wbsQueryApi from '~api/data-fill/query';
-import {HTableForm} from "~src/plugins/HTableForm"
+import HTableForm from "~src/plugins/HTableForm"
 import DateCalendar from "./dateCalendar/index.vue"
 import {getObjValue, getObjNullValue, isString, getArrValue} from "vue-utils-plus"
 
@@ -193,7 +193,7 @@ const setHTableForm = async (resData, excelId, info) => {
     if (resData) {
         isTableForm.value = true
         await nextTick(() => {
-            tableFormApp.value = HTableForm({
+            tableFormApp.value = HTableForm.createForm({
                 template: resData,
                 tableForm: info,
                 appId: `#table-form-${excelId}`
@@ -234,21 +234,9 @@ const getBussDataInfo = (index = 0) => {
     const info = getObjValue(formLog[index])
     formLogIndex.value = index
     if (getObjNullValue(info)) {
-        const pickerKey = info['pickerKey'] || ''
-        if (pickerKey) {
-            const pickerKeys = pickerKey.split(',')
-            for (let i = 0; i < pickerKeys.length; i++) {
-                const val = info[pickerKeys[i]] || ''
-                if (val) {
-                    const data = val.replace(/'/g,'"');
-                    info[pickerKeys[i]] = JSON.parse(data)
-                } else {
-                    info[pickerKeys[i]] = []
-                }
-            }
-        }
-        //有数据，关联数据
-        tableFormData.value = info
+        const newInfo = HTableForm.setPickerKey(info)
+        console.log(newInfo)
+        tableFormData.value = newInfo
     } else {
         tableFormData.value = {}
     }