微调-调整日期组件

frontend/src/components/SearchForm/index.vue

@@ -1,29 +1,29 @@
 <template>
-  <div v-if="columns.length" class="card table-search">
-    <el-form ref="formRef" :model="searchParam">
-      <Grid ref="gridRef" :collapsed="collapsed" :gap="[20, 0]" :cols="searchCol">
-        <GridItem v-for="(item, index) in columns" :key="item.prop" v-bind="getResponsive(item)" :index="index">
+  <div v-if='columns.length' class='card table-search'>
+    <el-form ref='formRef' :model='searchParam'>
+      <Grid ref='gridRef' :collapsed='collapsed' :gap='[20, 0]' :cols='searchCol'>
+        <GridItem v-for='(item, index) in columns' :key='item.prop' v-bind='getResponsive(item)' :index='index + 1'>
           <el-form-item>
             <template #label>
-              <el-space :size="4">
+              <el-space :size='4'>
                 <span>{{ `${item.search?.label ?? item.label}` }}</span>
-                <el-tooltip v-if="item.search?.tooltip" effect="dark" :content="item.search?.tooltip" placement="top">
+                <el-tooltip v-if='item.search?.tooltip' effect='dark' :content='item.search?.tooltip' placement='top'>
                   <i :class="'iconfont icon-yiwen'"></i>
                 </el-tooltip>
               </el-space>
               <span>&nbsp;:</span>
             </template>
-            <SearchFormItem :column="item" :search-param="searchParam" />
+            <SearchFormItem :column='item' :search-param='searchParam' />
           </el-form-item>
         </GridItem>
         <GridItem suffix>
-          <div class="operation">
-            <el-button type="primary" :icon="Search" @click="search"> 搜索 </el-button>
-            <el-button :icon="Delete" @click="reset"> 重置 </el-button>
-            <el-button v-if="showCollapse" type="primary" link class="search-isOpen" @click="collapsed = !collapsed">
-              {{ collapsed ? "展开" : "合并" }}
-              <el-icon class="el-icon--right">
-                <component :is="collapsed ? ArrowDown : ArrowUp"></component>
+          <div class='operation'>
+            <el-button type='primary' :icon='Search' @click='search'> 搜索</el-button>
+            <el-button :icon='Delete' @click='reset'> 重置</el-button>
+            <el-button v-if='showCollapse' type='primary' link class='search-isOpen' @click='collapsed = !collapsed'>
+              {{ collapsed ? '展开' : '合并' }}
+              <el-icon class='el-icon--right'>
+                <component :is='collapsed ? ArrowDown : ArrowUp'></component>
               </el-icon>
             </el-button>
           </div>
@@ -32,14 +32,15 @@
     </el-form>
   </div>
 </template>
-<script setup lang="ts" name="SearchForm">
-import { computed, ref } from "vue";
-import { ColumnProps } from "@/components/ProTable/interface";
-import { BreakPoint } from "@/components/Grid/interface";
-import { Delete, Search, ArrowDown, ArrowUp } from "@element-plus/icons-vue";
-import SearchFormItem from "./components/SearchFormItem.vue";
-import Grid from "@/components/Grid/index.vue";
-import GridItem from "@/components/Grid/components/GridItem.vue";
+<script setup lang='ts' name='SearchForm'>
+import { ColumnProps } from '@/components/ProTable/interface'
+import { BreakPoint } from '@/components/Grid/interface'
+import { Delete, Search, ArrowDown, ArrowUp } from '@element-plus/icons-vue'
+import SearchFormItem from './components/SearchFormItem.vue'
+import Grid from '@/components/Grid/index.vue'
+import GridItem from '@/components/Grid/components/GridItem.vue'
+
+
 
 interface ProTableProps {
   columns?: ColumnProps[]; // 搜索配置列
@@ -52,8 +53,12 @@ interface ProTableProps {
 // 默认值
 const props = withDefaults(defineProps<ProTableProps>(), {
   columns: () => [],
-  searchParam: () => ({})
-});
+  searchParam: () => ({}),
+})
+
+onMounted(() => {
+  console.log(props.columns)
+})
 
 // 获取响应式设置
 const getResponsive = (item: ColumnProps) => {
@@ -64,31 +69,31 @@ const getResponsive = (item: ColumnProps) => {
     sm: item.search?.sm,
     md: item.search?.md,
     lg: item.search?.lg,
-    xl: item.search?.xl
-  };
-};
+    xl: item.search?.xl,
+  }
+}
 
 // 是否默认折叠搜索项
-const collapsed = ref(true);
+const collapsed = ref(true)
 
 // 获取响应式断点
-const gridRef = ref();
-const breakPoint = computed<BreakPoint>(() => gridRef.value?.breakPoint);
+const gridRef = ref()
+const breakPoint = computed<BreakPoint>(() => gridRef.value?.breakPoint)
 
 // 判断是否显示 展开/合并 按钮
 const showCollapse = computed(() => {
-  let show = false;
+  let show = false
   props.columns.reduce((prev, current) => {
     prev +=
       (current.search![breakPoint.value]?.span ?? current.search?.span ?? 1) +
-      (current.search![breakPoint.value]?.offset ?? current.search?.offset ?? 0);
-    if (typeof props.searchCol !== "number") {
-      if (prev >= props.searchCol[breakPoint.value]) show = true;
+      (current.search![breakPoint.value]?.offset ?? current.search?.offset ?? 0)
+    if (typeof props.searchCol !== 'number') {
+      if (prev >= props.searchCol[breakPoint.value]) show = true
     } else {
-      if (prev >= props.searchCol) show = true;
+      if (prev >= props.searchCol) show = true
     }
-    return prev;
-  }, 0);
-  return show;
-});
+    return prev
+  }, 0)
+  return show
+})
 </script>