筛选

src/components/SearchHigh/src/SearchHigh.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- 高级筛选界面 -->
-  <Dialog title="筛选" v-model="popoverVisible" :width="'42%'" >
+  <Dialog title="筛选" v-model="popoverVisible" :width="'50%'" >
     <el-form id="moreListElForm" size="default" labelWidth="0" :searchData="moreListData">
       <el-form-item v-for="(item, index) in moreListData.filters" :key="index" :prop="item.column" >
         <!-- 第一列 label-->
@@ -17,7 +17,7 @@
           </el-select>
         </div>
         <!-- 第三列 值 -->
-        <div class="rowInnerItem">
+        <div class="rowInnerItem1">
           <!-- 输入框 -->
           <el-input v-if="getInputType(item.column) == 'input'" v-model="item.value" placeholder="请输入内容" clearable />
           <!-- 数字输入框 -->
@@ -30,13 +30,13 @@
               :value="op[item.optionsValue] || op.value" :key="index" /> -->
           </el-select>
           <!-- 时间 -->
-          <el-time-picker v-else-if="getInputType(item.column) == 'time'" v-model="item.value" placeholder="选择时间" />
+          <el-time-picker v-else-if="getInputType(item.column) == 'time'" range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间" v-model="item.time"  style="width: 340px;margin-right: 20px;"/>
           <!-- 日期 -->
-          <el-date-picker v-else-if="getInputType(item.column) == 'date'" v-model="item.value" type="date"
+          <el-date-picker v-else-if="getInputType(item.column) == 'date'" v-model="item.time" type="daterange"
-            placeholder="选择日期" />
+           range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 340px;margin-right: 20px;" @change="changeDateTimePicker($event, item,'daterange')" value-format="YYYY-MM-DD"  format="YYYY/MM/DD"/>
           <!-- 日期时间 -->
-          <el-date-picker v-else-if="getInputType(item.column) == 'datePicker'" v-model="item.value" type="datetime"
+          <el-date-picker v-else-if="getInputType(item.column) == 'datePicker'" v-model="item.time" type="datetimerange"
-            placeholder="选择日期时间" />
+            range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间"  style="width: 340px;" @change="changeDateTimePicker($event, item, 'datetimerange')" value-format="x"  format="YYYY/MM/DD HH:mm:ss"/>
         </div>
         <!-- 删除条件按钮 -->
         <el-button type="danger" :icon="Minus" circle size="small"
@@ -124,7 +124,11 @@ const moreListOptions = ref({
   } else if (type?.form?.component == 'InputNumber') {
     data = 'inputNumber'
   } else if (type?.form?.component == 'DatePicker') {
+    if(type?.form?.componentProps?.type=='datetimerange'|| type?.form?.componentProps?.type == 'datetime'){
       data = 'datePicker'
+    }else if(type?.form?.componentProps?.type == 'date'){
+      data = 'date'
+    }
   }
   return data
 }
@@ -169,7 +173,8 @@ const moreListPush = () => {
   let data = {
     column: '',
     action: "==",
-    value: ""
+    value: "",
+    time:''
   }
   moreListData.value.filters.push(data)
 }
@@ -183,7 +188,18 @@ const resetSelect = (val) => {
 // 查询 重置按钮事件
 const buttonBaseClick = (val) => {
   if (val == 'search') { // 查询
-    emit('searchFormClick', moreListData.value)
+    let data = []
+    moreListData.value.filters.forEach(item => {
+      let obj = {
+        column: item.column,
+        action: item.action,
+        value: item.value,
+      }
+      data.push(obj)
+    })
+    emit('searchFormClick', {
+      filters:data
+    })
   } else if (val == 'searchReset') { // 重置
     moreListData.value = {filters:[]}
     moreListPush()
@@ -205,6 +221,16 @@ const emit = defineEmits([
   'searchFormClick'
 ])
 
+// 改变日期时间
+const changeDateTimePicker = (e, val,from) =>{
+  if(from == 'daterange'){
+   let startTime = new Date(e[0] + ' 00:00:00').getTime()
+    let endTime = new Date(e[1] + ' 23:59:59').getTime()
+    val.value = startTime + ',' + endTime
+  }else if(from == 'datetimerange'){
+    val.value = e.join(',')
+  }
+}
 defineExpose({
   popoverVisible
 })
@@ -236,7 +262,14 @@ defineExpose({
        width: 220px;
      }
    }
+   .rowInnerItem1{
+    margin-right: 20px;
+     width: 360px;
 
+     .el-input__wrapper {
+       width: 340px;
+     }
+   }
    .moreListBaseBts {
      padding-bottom: 10px;
    }