1. 优化

src/views/finance/Statements/StatementsIndex.vue

@@ -9,7 +9,7 @@
 -->
 
 <template>
-  <div class="app-container">
+  <div class="app-container app-container-scheduling">
     <div class="app-container-queryform" v-show="showSearch">
       <!-- 页面查询表单 Start -->
       <el-form :model="queryParams" ref="queryForm" :rules="rules" :inline="true" label-width="68px">
@@ -21,6 +21,7 @@
             size="small"
             @keyup.enter.native="handleQuery"
           />
+          <span @click="clearQuery('orderNo')" class="query_clear"><i class="el-icon-circle-close"></i></span>
         </el-form-item>
         <el-form-item label="支付单号" prop="trackId" v-if="queryShow.trackId">
           <el-input
@@ -30,6 +31,7 @@
             size="small"
             @keyup.enter.native="handleQuery"
           />
+          <span @click="clearQuery('trackId')" class="query_clear"><i class="el-icon-circle-close"></i></span>
         </el-form-item>
         <el-form-item label="购票渠道" prop="source" v-if="queryShow.source">
           <el-select v-model="queryParams.source" placeholder="请选择购票渠道" clearable>
@@ -40,6 +42,7 @@
               :value="dict.value"
             />
           </el-select>
+          <span @click="clearQuery('source')" class="query_clear"><i class="el-icon-circle-close"></i></span>
         </el-form-item>
         <el-form-item label="支付方式" prop="payWay" v-if="queryShow.payWay">
           <el-select v-model="queryParams.payWay" placeholder="请选择支付方式" clearable>
@@ -50,6 +53,7 @@
               :value="dict.value"
             />
           </el-select>
+          <span @click="clearQuery('payWay')" class="query_clear"><i class="el-icon-circle-close"></i></span>
         </el-form-item>
         <el-form-item label="交易类型" prop="payType" v-if="queryShow.payType">
           <el-select v-model="queryParams.payType" placeholder="请选择交易类型" clearable>
@@ -60,6 +64,7 @@
               :value="dict.value"
             />
           </el-select>
+          <span @click="clearQuery('payType')" class="query_clear"><i class="el-icon-circle-close"></i></span>
         </el-form-item>
         <el-form-item label="交易时间" v-if="queryShow.dateRange">
           <el-date-picker
@@ -72,22 +77,22 @@
             start-placeholder="开始时间"
             end-placeholder="结束时间"
           ></el-date-picker>
+          <span @click="clearQuery('dateRange')" class="query_clear"><i class="el-icon-circle-close"></i></span>
         </el-form-item>
         <el-form-item>
           <el-dropdown @command="openQuery">
             <el-button size="mini" type="primary" icon="el-icon-plus"></el-button>
             <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item command="orderNo"><i class="el-icon-check" v-if="queryShow.orderNo"></i>订单号</el-dropdown-item>
-              <el-dropdown-item command="trackId"><i class="el-icon-check" v-if="queryShow.trackId"></i>支付单号</el-dropdown-item>
-              <el-dropdown-item command="source"><i class="el-icon-check" v-if="queryShow.source"></i>购票渠道</el-dropdown-item>
-              <el-dropdown-item command="payWay"><i class="el-icon-check" v-if="queryShow.payWay"></i>支付方式</el-dropdown-item>
-              <el-dropdown-item command="payType"><i class="el-icon-check" v-if="queryShow.payType"></i>交易类型</el-dropdown-item>
-              <el-dropdown-item command="dateRange"><i class="el-icon-check" v-if="queryShow.dateRange"></i>交易时间</el-dropdown-item>
+              <el-dropdown-item command="orderNo">订单号</el-dropdown-item>
+              <el-dropdown-item command="trackId">支付单号</el-dropdown-item>
+              <el-dropdown-item command="source">购票渠道</el-dropdown-item>
+              <el-dropdown-item command="payWay">支付方式</el-dropdown-item>
+              <el-dropdown-item command="payType">交易类型</el-dropdown-item>
+              <el-dropdown-item command="dateRange">交易时间</el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown>
           <el-button
             style="margin-left: 10px;"
-            v-hasPermi="['financeMr:statements:query']"
             type="primary"
             icon="el-icon-search"
             size="mini"
@@ -95,7 +100,6 @@
             >搜索</el-button
           >
           <el-button
-            v-hasPermi="['financeMr:statements:reset']"
             icon="el-icon-refresh"
             size="mini"
             @click="resetQuery"
@@ -153,8 +157,7 @@
             element-loading-text="正在拼命生成数据中..."
             element-loading-spinner="el-icon-loading"
             element-loading-background="rgba(0, 0, 0, 0.5)"
-            >导出</el-button
-          >
+            >导出</el-button>
         </el-col>
 
         <right-toolbar :showSearch.sync="showSearch" @queryTable="initData"></right-toolbar>
@@ -308,7 +311,7 @@ export default {
         trackId: true,
         source: true,
         payWay: true,
-        payType: true,
+        payType: false,
         dateRange: false,
       },
       oweTotalObj: {},
@@ -487,8 +490,11 @@ export default {
         this.$router.push(`/monthlyvehicle/details/${row?.orderNo}`);
       }
     },
+    clearQuery(key) {
+      this.$set(this.queryShow,key,false)
+    },
     openQuery(key) {
-      this.$set(this.queryShow,key,!this.queryShow[key])
+      this.$set(this.queryShow,key,true)
     }
   }
 };
@@ -534,4 +540,23 @@ export default {
     }
   }
 }
+
+.app-container-scheduling ::v-deep .el-select__tags {
+    flex-wrap: inherit !important;
+    overflow-x: auto !important;
+}
+.app-container-scheduling ::v-deep .el-form-item__content {
+  position: relative;
+}
+.app-container-scheduling ::v-deep .el-form-item__content .query_clear{
+  position: absolute;
+  top: -15px;
+  right: -10px;
+  display: none;
+  cursor: pointer;
+  z-index: 99;
+}
+.app-container-scheduling ::v-deep .el-form-item__content:hover .query_clear {
+  display: block;
+}
 </style>