form

vite-demo/src/components/commonList/listFilter.vue

@@ -216,6 +216,7 @@
                 });
                 // console.log(this.ruleForm);
             },
+
             onInputChange(feildName, val, type) {
                 if (type != "dateRange") {
                     this.ruleForm[`${feildName}`] = val;

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

@@ -53,85 +53,54 @@
                 </a-select>
 
                 <!--日期选择-->
-                <a-date-picker v-if="item.inputType === 'date'" v-model:value="ruleForm[`${item.fieldName}`]" />
+                <a-date-picker v-if="item.inputType === 'date'" v-model:value="ruleForm[`${item.fieldName}`]"
+                               :format="dateFormat"
+                               @change="(date,dateStrings) => onInputChange(item.fieldName, date,dateStrings)"/>
                 <!--时间段选择-->
-                <a-range-picker v-if="item.inputType === 'range'" v-model:value="ruleForm[`${item.fieldName}`]" />
+                <a-range-picker v-if="item.inputType === 'range'" v-model:value="ruleForm[`${item.fieldName}`]"
+                                @change="(date,dateStrings) => onInputChange(item.fieldName,date,dateStrings,'range')"/>
 
             </a-form-item>
-
-            <!--            v-model="ruleForm[`${item.fieldName}`]"-->
-            <!--            <a-form-item label="Activity zone">-->
-            <!--                <a-select v-model:value="formState.region" placeholder="please select your zone">-->
-            <!--                    <a-select-option value="shanghai">Zone one</a-select-option>-->
-            <!--                    <a-select-option value="beijing">Zone two</a-select-option>-->
-            <!--                </a-select>-->
-            <!--            </a-form-item>-->
-            <!--            <a-form-item label="Activity time">-->
-            <!--                <a-date-picker-->
-            <!--                        v-model:value="formState.date1"-->
-            <!--                        show-time-->
-            <!--                        type="date"-->
-            <!--                        placeholder="Pick a date"-->
-            <!--                        style="width: 100%"-->
-            <!--                />-->
-            <!--            </a-form-item>-->
-            <!--            <a-form-item label="Instant delivery">-->
-            <!--                <a-switch v-model:checked="formState.delivery"/>-->
-            <!--            </a-form-item>-->
-            <!--            <a-form-item label="Activity type">-->
-            <!--                <a-checkbox-group v-model:value="formState.type">-->
-            <!--                    <a-checkbox value="1" name="type">Online</a-checkbox>-->
-            <!--                    <a-checkbox value="2" name="type">Promotion</a-checkbox>-->
-            <!--                    <a-checkbox value="3" name="type">Offline</a-checkbox>-->
-            <!--                </a-checkbox-group>-->
-            <!--            </a-form-item>-->
-            <!--            <a-form-item label="Resources">-->
-            <!--                <a-radio-group v-model:value="formState.resource">-->
-            <!--                    <a-radio value="1">Sponsor</a-radio>-->
-            <!--                    <a-radio value="2">Venue</a-radio>-->
-            <!--                </a-radio-group>-->
-            <!--            </a-form-item>-->
-            <!--            <a-form-item label="Activity form">-->
-            <!--                <a-input v-model:value="formState.desc" type="textarea"/>-->
-            <!--            </a-form-item>-->
         </template>
 
         <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
             <a-button type="primary" @click="onSubmit">确认</a-button>
-            <a-button style="margin-left: 10px">关闭</a-button>
+            <a-button style="margin-left: 10px" @click="resetForm">关闭</a-button>
         </a-form-item>
     </a-form>
 
 </template>
 
 <script>
-    import {defineComponent, reactive, toRaw} from 'vue';
-
+    import {defineComponent, reactive, toRaw, onMounted} from 'vue';
+    import moment from 'moment';
+    import { Form } from 'ant-design-vue';
+    const useForm = Form.useForm;
     export default {
         name: "form",
         props: {
             config: Object,
         },
         setup(props) {
-            console.log(props);
-
             // 表单数据
             const ruleForm = reactive({})
+            const { resetFields, validate, validateInfos, mergeValidateInfo } = useForm(ruleForm);
+            console.log(props);
+            const dateFormat = 'YYYY-MM-DD';
+
 
             const initForm = () => {
                 props.config.data.forEach(item => {
-                    if (item.inputType != "dateRange") {
+                    if (item.inputType !== "range") {
                         ruleForm[`${item.fieldName}`] = "";
                     } else {
                         if (item.fieldName) {
-                            ruleForm[`${item.fieldName}`] = [];
                             let arr = item.fieldName.split(',');
                             let key1 = arr[0];
                             let key2 = arr[1];
                             ruleForm[key1] = '';
                             ruleForm[key2] = '';
                         } else {
-                            ruleForm[`${item.fieldName}`] = [];
                             ruleForm.startTime = '';
                             ruleForm.endTime = '';
                         }
@@ -140,11 +109,40 @@
                 console.log('ruleForm', ruleForm);
             }
 
+
+            onMounted(() => {
+                initForm()
+            })
+
             const onSubmit = () => {
                 let data = getQuery();
                 console.log(data);
             };
 
+            function onInputChange(fieldName, date, dateStrings, type) {
+                if (type) {
+                    if (fieldName && type === 'range') {
+                        let arr = fieldName.split(',');
+                        let key1 = arr[0];
+                        let key2 = arr[1];
+                        ruleForm[key1] = dateStrings[0];
+                        ruleForm[key2] = dateStrings[1];
+                    } else {
+                        ruleForm.startTime = dateStrings[0];
+                        ruleForm.endTime = dateStrings[1];
+                    }
+                } else {
+                    ruleForm[fieldName] = dateStrings;
+                }
+            }
+
+            const resetForm = ()=> {
+                resetFields();
+                for (let key in ruleForm) {
+                    ruleForm[key] = '';
+                }
+            }
+
             // 返回有值得数据
             const getQuery = () => {
                 let data = {};
@@ -156,6 +154,7 @@
                 return data;
             }
 
+            // select选择
             const onSelectChange = (name, val) => {
                 console.log(name, val);
                 ruleForm[name] = val
@@ -167,6 +166,9 @@
             };
 
             return {
+                moment,
+                dateFormat,
+                resetForm,
                 labelCol: {
                     span: 4,
                 },
@@ -176,7 +178,8 @@
                 ruleForm,
                 onSubmit,
                 onSelectChange,
-                filterOption
+                filterOption,
+                onInputChange
             };
         },
     }

vite-demo/src/main.js

@@ -3,6 +3,9 @@ import router from "./router";
 import store from "./store";
 import Antd from 'ant-design-vue';
 import 'ant-design-vue/dist/antd.css';
+
+
+
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import App from './App.vue'

vite-demo/src/views/form/antd/form.vue

@@ -82,7 +82,6 @@
                         },
                         {
                             inputType: "range",
-                            fieldName: "vehicleNo9",
                             label: "日期选择2",
                         },
                     ]

vite-demo/src/views/layout/index.vue

@@ -4,7 +4,10 @@
         <sidebar :router="router"/>
         <div style="flex: 1">
             <a-card style="width: 100%">
-                <router-view/>
+                <a-config-provider :locale="zhCN">
+                    <router-view/>
+                </a-config-provider>
+
             </a-card>
         </div>
     </div>
@@ -13,9 +16,17 @@
 <script>
     import sidebar from './sidebar/index.vue'
     import {mapGetters} from 'vuex'
-
+    import zhCN from 'ant-design-vue/es/locale/zh_CN';
+    import moment from 'moment';
+    import 'moment/dist/locale/zh-cn';
+    moment.locale('zhCN');
     export default {
         name: "index",
+        data(){
+            return {
+                zhCN
+            }
+        },
         computed: {
             ...mapGetters(['router'])
         },