页面刷新停留在当前页

vite-demo/src/components/configForm/form.vue

@@ -81,7 +81,7 @@
 </template>
 
 <script>
-    import {defineComponent, ref, reactive, toRaw, onMounted, computed, onUnmounted} from 'vue';
+    import {defineComponent, ref, reactive, toRaw, onMounted, nextTick, computed, watch, onUnmounted} from 'vue';
     import moment from 'moment';
     import {Form} from 'ant-design-vue';
     import {parseDate, formatObjDate} from '@/utils/util'
@@ -118,6 +118,7 @@
                     }
 
                     // 设置验证规则 - 如果禁用表单则不校验
+
                     if (item.required && !props.config.disabled) {
                         if (item.fieldName && !item.disabled) {
                             let validator = typeof item.validator === 'function' ? item.validator : null
@@ -141,6 +142,7 @@
                             }
                         }
                     }
+
                 });
                 console.log('form - rules', rulesForm);
                 console.log('form - formState', formState);
@@ -222,9 +224,11 @@
                 return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
             };
 
-            onMounted(() => {
-                initForm()
-            })
+            watch(() => props.config.data, (n) => {
+                if (n) {
+                    initForm()
+                }
+            }, {deep: true, immediate: true})
 
             return {
                 //

vite-demo/src/hook/useModal.js

 import {ref, reactive, toRefs, computed} from 'vue'
 import {postAction, putAction, deleteAction, httpAction} from '@/api/commonApi/index';
+
 // 设置模态框
-export function useModal(emit) {
+export function useModal({rowData}, emit) {
 
     const useModalData = reactive({
         isShow: false,
         confirmLoading: false
     })
 
-
+    // 打开弹框
     const onModalShow = () => {
         console.log('打开弹框')
         useModalData.isShow = true
         console.log('modal - use', useModalData.isShow);
     }
 
+    // 确认
     const modalOk = () => {
         console.log('确认')
         useModalData.isShow = false
     }
 
+    // 关闭
     const modalCancel = () => {
         console.log('modal  - use -  取消')
         useModalData.isShow = false
@@ -27,8 +30,17 @@ export function useModal(emit) {
         emit('update:isShow', false)
     }
 
+    // 修改 and 新增
+    /** 2022/5/10 14:49  @Description:
+     *
+     * @param url  接口链接
+     * @param formItem  参数
+     * @param otherValues  其他参数
+     * @param type    add - edit
+     * @param path    edit参数
+     */
 
-    const handleOk = ({url,formItem, otherValues = {}, type = 'add', path}) => {
+    const handleOk = ({url, formItem, otherValues = {}, type = 'add', path}) => {
         useModalData.confirmLoading = true;
         let axios;
         let formData = Object.assign(formItem, otherValues);
@@ -61,6 +73,7 @@ export function useModal(emit) {
     }
 
 
+
     // 根据屏幕变化,设置抽屉尺寸
     // const resetScreenSize = () => {
     //     const screenWidth = document.body.clientWidth;
@@ -76,7 +89,8 @@ export function useModal(emit) {
         modalCancel,
         onModalShow,
         ...toRefs(useModalData),
-        handleOk
+        handleOk,
+
     }
 }
 

vite-demo/src/router/baseRouter.js

@@ -28,5 +28,5 @@ export default [
             }
         ]
     },
-    {path: '/:pathToRegexp(.*)', hidden: true, redirect: '/'} //当用户输入页面链接错误或者没有该页面时，显示该路径页面
+    // {path: '/:pathToRegexp(.*)', hidden: true, redirect: '/'} //当用户输入页面链接错误或者没有该页面时，显示该路径页面
 ]
\ No newline at end of file

vite-demo/src/views/antd/table/components/fromModal.vue

@@ -5,12 +5,13 @@
         <a-spin :spinning="confirmLoading">
             <configForm :config="configListForm" ref="getQueryRef" @ok="query" @close="modalCancel"></configForm>
         </a-spin>
-        <div ref="divRef">aaa</div>
+
     </renderPopups>
 </template>
 
 <script>
-    import {ref, reactive, watch, nextTick, onUnmounted} from 'vue'
+    import {ref, reactive, watch, nextTick, onUnmounted, onMounted} from 'vue'
+    import {message} from 'ant-design-vue'
     import modal from '@c/modal/index.vue'
     import {renderPopups} from '@c/popups/popups'
     import {useModal} from "@/hook/useModal";
@@ -19,7 +20,13 @@
     export default {
         name: "fromModal",
         props: {
-            title: String
+            title: String,
+            rowData: {
+                type: Array,
+                default: () => {
+                    return {}
+                }
+            }
         },
         components: {
             modal,
@@ -27,10 +34,11 @@
             configForm
         },
         setup(props, {emit}) {
-            const {onModalShow, isShow, modalCancel, handleOk, confirmLoading} = useModal(emit)
+            const {onModalShow, isShow, modalCancel, handleOk, confirmLoading} = useModal(props, emit)
             let spinning = ref(false)
             const getQueryRef = ref()
-            const divRef = ref()
+
+
             const query = (data) => {
                 console.log('spinning', data);
                 handleOk({
@@ -40,6 +48,7 @@
                     formItem: data
                 })
             }
+
             let configListForm = reactive({
                 data: [
                     {
@@ -86,27 +95,61 @@
                     }
                 ],
             })
-            console.log('getQueryRef', getQueryRef);
-            console.log('divRef', divRef.value);
+
+
+            // 获取数据回显
+            watch(() => props.rowData, (n, o) => {
+                if (n) {
+                    let rowObKey = Object.keys(n)
+                    if (rowObKey.length > 0) {
+                        configListForm.data.forEach(item => {
+                            if (rowObKey.includes(item.fieldName)) {
+                                item['defaultVal'] = props.rowData[item.fieldName]
+                            }
+                        })
+                    }
+                }
+            })
+
+            const handlEdit = () => {
+                onModalShow()
+                // let rowObKey = Object.keys(props.rowData)
+                // if (rowObKey.length > 0) {
+                //     configListForm.data.forEach(item => {
+                //         if (rowObKey.includes(item.fieldName)) {
+                //             item['defaultVal'] = props.rowData[item.fieldName]
+                //         }
+                //     })
+                //     onModalShow()
+                // } else {
+                //     message.error('参数不能为空')
+                // }
+            }
+
+            onMounted(() => {
+                console.log('ref - getQueryRef', getQueryRef);
+
+            })
+
             watch(isShow, (n, o) => {
-                console.log('watch - isShow', n, o);
-                nextTick(() => {
-                    console.log(getQueryRef);
-                    console.log('resetForm - 页面关闭')
-                    getQueryRef.value.resetForm()
-                })
-            }, {immediate: true})
+                if (!n) {
+                    nextTick(() => {
+                        getQueryRef.value.resetForm()
+                    })
+                }
+
+            })
 
             return {
                 onModalShow,
                 isShow,
                 modalCancel,
+                handlEdit,
                 //
                 confirmLoading,
                 configListForm,
                 getQueryRef,
-                divRef,
-                query
+                query,
             }
         }
     }

vite-demo/src/views/antd/table/index.vue

@@ -24,7 +24,7 @@
             </template>
             <template #action="{ record }">
                 <div>
-                    <a>修改</a>
+                    <a @click="handlEdit(record)">修改</a>
                     <a-divider type="vertical"/>
                     <a>删除</a>
                     <a-divider type="vertical"/>
@@ -34,7 +34,7 @@
         </a-table>
     </a-space>
 
-    <fromModal ref="fromModalRef" title="jsx组价"></fromModal>
+    <fromModal ref="fromModalRef" :rowData="rowData" title="新增"></fromModal>
 </template>
 
 <script>
@@ -103,10 +103,19 @@
         setup(props, {emit}) {
 
             const fromModalRef = ref()
+
+            // 新增
             const bindModalShow = () => {
                 console.log(fromModalRef.value);
                 fromModalRef.value.onModalShow()
             }
+            let rowData = ref()
+
+            // 编辑
+            const handlEdit = (row) => {
+                rowData.value = row
+                fromModalRef.value.handlEdit()
+            }
 
             const {dataSource} = useTable({
                 dataAll: '/api/table/all'
@@ -121,6 +130,8 @@
 
                 fromModalRef,
                 bindModalShow,
+                handlEdit,
+                rowData
             };
         },
         components: {