shuiwu/src/components/listTemplate/field/index.vue

<template>
  <div class="fieldPanel">
    <a-card :bodyStyle="{padding:'20px 10px 0 10px'}">
      <!-- <template #title>筛选</template> -->
      <a-form
        ref="formRef"
        name="advanced_search"
        class="ant-advanced-search-form"
        :label-col="{ span: 6 }" 
        :wrapper-col="{ span: 18 }"
        :model="formState"
        @finish="onFinish">
          <a-row :gutter="16">
            <a-col v-for="(i) in searchType" :key="i"  :md="{ span: 24, offset: 0 }" :lg="{ span: 6, offset: 0 }" :xxl="{span: 6, offset: 0 }">
              <a-form-item
                
                :name="i.key"
                :label="i.label"
                :rules="[{ required: false, message: `${i.label}不能为空`}]"
                layout="vertical"
              >
                <a-input v-if="i.type=='input'" v-model:value="formState[i.key]" :placeholder="i.label"></a-input>
                <a-select v-if="i.type=='select'" v-model:value="formState[i.key]" :placeholder="i.label" :getPopupContainer="triggerNode => {return triggerNode.parentNode || document.body;}">
                  <a-select-option v-for="item in i.dataSource" :key="item.index" :value="item.value">{{item.remarks}}</a-select-option>
                </a-select>
                <a-date-picker style="width:100%" v-if="i.type == 'datepicker'" v-model:value="formState[i.key]" value-format="YYYY-MM-DD" :placeholder="i.label"/>
                <a-range-picker style="width:100%" v-if="i.type == 'datepickerRange'" v-model:value="formState[i.key]" value-format="YYYY-MM-DD" @change="dateRangeChange(formState[i.key],i)"/>
              </a-form-item>
            </a-col>
            <a-col :md="{ span: 24, offset: 0 }" :lg="{ span: 6, offset: 0 }" :xxl="{span: 6, offset: 0 }">
              <a-space>
                <a-button type="primary" html-type="submit">查询</a-button>
                <a-button @click="() => formRef.resetFields()">重置</a-button>
              </a-space>
            </a-col>
          </a-row>
      </a-form>
    </a-card>
  </div>
</template>
<script setup>
import { defineComponent, reactive, ref,defineEmits,onMounted,watch} from 'vue';

import { DownOutlined, UpOutlined } from '@ant-design/icons-vue';
import { useRouter,onBeforeRouteLeave } from "vue-router";
const router = useRouter()
const props = defineProps({
  searchType:Array
})
const expand = ref(false);
const formRef = ref();
let formState = ref({});

const emit = defineEmits(['onSubmit'])

const onFinish = (values) => {
  localStorage.setItem('formState',JSON.stringify(formState.value))
  emit('onSubmit',formState.value)
}
const dateRangeChange = (dates,i)=>{
  i.objKeys.forEach((o,i) => {
    formState.value[o] = dates[i]
  });
}
onMounted(()=>{
  props.searchType.forEach(e=>{
    formState.value[e.key] = e.defaultData
  })
})

watch(() => router.currentRoute.value,(to, from) => {
  if (from.meta.name !== to.meta.name) {
    localStorage.removeItem('formState')
  }
})
</script>
<style>
.fieldPanel{
  /* border-bottom:10px solid #f1f2f3 */
  margin-bottom: 10px;
}
#components-form-demo-advanced-search .ant-form {
  max-width: none;
}
#components-form-demo-advanced-search .search-result-list {
  margin-top: 16px;
  border: 1px dashed #e9e9e9;
  border-radius: 2px;
  background-color: #fafafa;
  min-height: 200px;
  text-align: center;
  padding-top: 80px;
}
[data-theme='dark'] .ant-advanced-search-form {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid #434343;
  padding: 24px;
  border-radius: 2px;
}
[data-theme='dark'] #components-form-demo-advanced-search .search-result-list {
  border: 1px dashed #434343;
  background: rgba(255, 255, 255, 0.04);
}
</style>