1. 优化

src/views/distribution/recordMr/index.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="app-container">
+  <div class="app-container app-container-scheduling">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
-      <el-form-item label="分销商名称">
+      <el-form-item v-if="queryShow.personName" label="分销商名称">
         <el-input
           v-model="queryParams.personName"
           placeholder="分销商名称"
@@ -9,8 +9,9 @@
           style="width: 240px;"
           @keyup.enter.native="handleQuery"
         />
+        <span @click="clearQuery('personName')" class="query_clear"><i class="el-icon-circle-close"></i></span>
       </el-form-item>
-      <el-form-item label="分销商类型">
+      <el-form-item v-if="queryShow.personType" label="分销商类型">
         <el-select
           v-model="queryParams.personType"
           placeholder="分销商类型"
@@ -24,8 +25,9 @@
             :value="dict.value"
           />
         </el-select>
+        <span @click="clearQuery('personType')" class="query_clear"><i class="el-icon-circle-close"></i></span>
       </el-form-item>
-      <el-form-item label="订单号">
+      <el-form-item label-width="80px" v-if="queryShow.orderId" label="订单号">
         <el-input
           v-model="queryParams.orderId"
           placeholder="订单号"
@@ -33,8 +35,9 @@
           style="width: 200px;"
           @keyup.enter.native="handleQuery"
         />
+        <span @click="clearQuery('orderId')" class="query_clear"><i class="el-icon-circle-close"></i></span>
       </el-form-item>
-      <el-form-item label="购买人手机号" label-width="100px">
+      <el-form-item v-if="queryShow.memberMobile" label="购买人手机号" label-width="100px">
         <el-input
           v-model="queryParams.memberMobile"
           placeholder="购买人手机号"
@@ -42,6 +45,7 @@
           style="width: 180px;"
           @keyup.enter.native="handleQuery"
         />
+        <span @click="clearQuery('memberMobile')" class="query_clear"><i class="el-icon-circle-close"></i></span>
       </el-form-item>
       <!-- <el-form-item label="场次时间">
         <el-date-picker style="width: 230px;" v-model="queryParams.performDate" @change="pagePerformTimeListFun"
@@ -53,7 +57,7 @@
           <el-option v-for="dict in pagePerformTimeList" :key="dict.id" :label="dict.timeSnapshot+'('+dict.performTimeStart+'-'+dict.performTimeEnd+')'" :value="dict.id" />
         </el-select>
       </el-form-item> -->
-      <el-form-item label="场次时间" label-width="70px">
+      <el-form-item v-if="queryShow.performDate" label="场次时间" label-width="80px">
           <el-date-picker
             style="width: 250px;"
             v-model="queryParams.performDate"
@@ -64,8 +68,9 @@
             start-placeholder="开始日期"
             end-placeholder="结束日期">
           </el-date-picker>
+          <span @click="clearQuery('performDate')" class="query_clear"><i class="el-icon-circle-close"></i></span>
         </el-form-item>
-        <el-form-item label="场次" v-if="!multiPerformDate">
+        <el-form-item label="场次" label-width="60px" v-if="!multiPerformDate && queryShow.performDate">
           <el-select
             v-model="queryParams.performTimeId"
             placeholder="场次"
@@ -79,8 +84,9 @@
               :value="dict.id"
             />
           </el-select>
+          <span @click="clearQuery('performDate')" class="query_clear"><i class="el-icon-circle-close"></i></span>
         </el-form-item>
-      <el-form-item label="支付时间">
+      <el-form-item v-if="queryShow.time" label="支付时间">
           <el-date-picker
             style="width: 230px;"
             v-model="queryParams.time"
@@ -90,8 +96,9 @@
             start-placeholder="开始日期"
             end-placeholder="结束日期">
           </el-date-picker>
+          <span @click="clearQuery('time')" class="query_clear"><i class="el-icon-circle-close"></i></span>
       </el-form-item>
-      <el-form-item label="入驻银联主体名称" label-width="150px">
+      <el-form-item v-if="queryShow.unionName" label="入驻银联主体名称" label-width="150px">
           <el-input
             v-model="queryParams.unionName"
             placeholder="请输入入驻银联主体名称"
@@ -99,9 +106,22 @@
             style="width: 240px;"
             @keyup.enter.native="handleQuery"
           />
-        </el-form-item>
+          <span @click="clearQuery('unionName')" class="query_clear"><i class="el-icon-circle-close"></i></span>
+      </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <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="personName">分销商名称</el-dropdown-item>
+            <el-dropdown-item command="personType">分销商类型</el-dropdown-item>
+            <el-dropdown-item command="orderId">订单号</el-dropdown-item>
+            <el-dropdown-item command="memberMobile">购买人手机号</el-dropdown-item>
+            <el-dropdown-item command="performDate">场次时间/场次</el-dropdown-item>
+            <el-dropdown-item command="time">支付时间</el-dropdown-item>
+            <el-dropdown-item command="unionName">入驻银联主体名称</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+        <el-button style="margin-left: 10px;" type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
@@ -229,6 +249,16 @@ export default {
       handleExportLoading: false,
       pagePerformTimeList: [], // 场次列表
       multiPerformDate:false,
+
+      queryShow: {
+        personName: true,
+        personType: true,
+        orderId: false,
+        memberMobile: false,
+        performDate: true,
+        time: false,
+        unionName: false
+      },
     };
   },
   created() {
@@ -366,7 +396,34 @@ export default {
       str = str + (row.county?row.county:'')
       str = str + (row.address?row.address:'')
       return str
+    },
+
+    clearQuery(key) {
+      this.$set(this.queryShow,key,false)
+    },
+    openQuery(key) {
+      this.$set(this.queryShow,key,true)
     }
   }
 };
 </script>
+<style scoped lang="scss">
+.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>

src/views/order/groupBuyingMr/index.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="app-container" :style="{'--q-height':qHeight}">
+  <div class="app-container app-container-scheduling" :style="{'--q-height':qHeight}">
     <div class="app-container-query" ref="queryFormBox">
       <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
         
-        <el-form-item label="订单号">
+        <el-form-item v-if="queryShow.id" label="订单号">
           <el-input
             v-model="queryParams.id"
             placeholder="请输入订单号"
@@ -11,8 +11,9 @@
             style="width: 240px;"
             @keyup.enter.native="handleQuery"
           />
+          <span @click="clearQuery('id')" class="query_clear"><i class="el-icon-circle-close"></i></span>
         </el-form-item>
-        <el-form-item label="团队名称" label-width="100px">
+        <el-form-item v-if="queryShow.teamName" label="团队名称" label-width="100px">
           <el-input
             v-model="queryParams.teamName"
             placeholder="请输入团队名称"
@@ -20,8 +21,9 @@
             style="width: 240px;"
             @keyup.enter.native="handleQuery"
           />
+          <span @click="clearQuery('teamName')" class="query_clear"><i class="el-icon-circle-close"></i></span>
         </el-form-item>
-        <el-form-item label="销售员" label-width="100px">
+        <el-form-item v-if="queryShow.salerPerson" label="销售员" label-width="100px">
           <el-input
             v-model="queryParams.salerPerson"
             placeholder="请输入销售员"
@@ -29,11 +31,12 @@
             style="width: 240px;"
             @keyup.enter.native="handleQuery"
           />
+          <span @click="clearQuery('salerPerson')" class="query_clear"><i class="el-icon-circle-close"></i></span>
         </el-form-item>
-        <el-form-item label="团队类型">
+        <el-form-item v-if="queryShow.teamTypeId" label="团队类型">
           <el-select
           v-model="queryParams.teamTypeId"
-          placeholder="团队类型"
+          placeholder="请选择团队类型"
           clearable
           style="width: 240px"
           >
@@ -44,19 +47,21 @@
             :value="dict.value"
           />
           </el-select>
+          <span @click="clearQuery('teamTypeId')" class="query_clear"><i class="el-icon-circle-close"></i></span>
         </el-form-item>
-        <el-form-item label="是否成功开票" label-width="100">
+        <el-form-item v-if="queryShow.ifSuccessInvoice" label="是否成功开票" label-width="100">
           <el-select
             v-model="queryParams.ifSuccessInvoice"
-            placeholder="请选择"
+            placeholder="请选择是否成功开票"
             clearable
             style="width: 100%"
           >
             <el-option label="否" value="0" />
             <el-option label="是" value="1" />
           </el-select>
+          <span @click="clearQuery('ifSuccessInvoice')" class="query_clear"><i class="el-icon-circle-close"></i></span>
         </el-form-item>
-        <el-form-item label="订单状态">
+        <el-form-item v-if="queryShow.status" label="订单状态">
           <el-select
             v-model="queryParams.status"
             placeholder="订单状态"
@@ -70,8 +75,9 @@
               :value="dict.value"
             />
           </el-select>
+          <span @click="clearQuery('status')" class="query_clear"><i class="el-icon-circle-close"></i></span>
         </el-form-item>
-        <el-form-item label="支付时间">
+        <el-form-item v-if="queryShow.time" label="支付时间">
           <el-date-picker
             v-model="queryParams.time"
             type="daterange"
@@ -80,8 +86,9 @@
             start-placeholder="开始日期"
             end-placeholder="结束日期">
           </el-date-picker>
+          <span @click="clearQuery('time')" class="query_clear"><i class="el-icon-circle-close"></i></span>
         </el-form-item>
-        <el-form-item label="支付单号">
+        <el-form-item v-if="queryShow.paymentId" label="支付单号">
           <el-input
             v-model="queryParams.paymentId"
             placeholder="请输入支付单号"
@@ -89,6 +96,7 @@
             style="width: 240px;"
             @keyup.enter.native="handleQuery"
           />
+          <span @click="clearQuery('paymentId')" class="query_clear"><i class="el-icon-circle-close"></i></span>
         </el-form-item>
         <!-- <el-form-item label="场次时间">
           <el-date-picker
@@ -100,7 +108,7 @@
             placeholder="选择日期">
           </el-date-picker>
         </el-form-item> -->
-        <el-form-item label="场次时间" label-width="70px">
+        <el-form-item v-if="queryShow.performDate" label="场次时间" label-width="70px">
           <el-date-picker
             style="width: 250px;"
             v-model="queryParams.performDate"
@@ -111,8 +119,9 @@
             start-placeholder="开始日期"
             end-placeholder="结束日期">
           </el-date-picker>
+          <span @click="clearQuery('performDate')" class="query_clear"><i class="el-icon-circle-close"></i></span>
         </el-form-item>
-        <el-form-item label="场次" v-if="!multiPerformDate">
+        <el-form-item label="场次" v-if="!multiPerformDate && queryShow.performDate">
           <el-select
             v-model="queryParams.performTimeId"
             placeholder="场次"
@@ -126,8 +135,9 @@
               :value="dict.id"
             />
           </el-select>
+          <span @click="clearQuery('performDate')" class="query_clear"><i class="el-icon-circle-close"></i></span>
         </el-form-item>
-        <el-form-item label="开票时间">
+        <el-form-item v-if="queryShow.invoiceTime" label="开票时间">
           <el-date-picker
             style="width: 230px;"
             v-model="queryParams.invoiceTime"
@@ -137,8 +147,9 @@
             start-placeholder="开始日期"
             end-placeholder="结束日期">
           </el-date-picker>
+          <span @click="clearQuery('invoiceTime')" class="query_clear"><i class="el-icon-circle-close"></i></span>
         </el-form-item>
-        <el-form-item label="商户退款单号" label-width="100px">
+        <el-form-item v-if="queryShow.refundPaymentId" label="商户退款单号" label-width="100px">
           <el-input
             v-model="queryParams.refundPaymentId"
             placeholder="请输入商户退款单号"
@@ -146,9 +157,26 @@
             style="width: 240px;"
             @keyup.enter.native="handleQuery"
           />
+          <span @click="clearQuery('refundPaymentId')" class="query_clear"><i class="el-icon-circle-close"></i></span>
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+          <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="id">订单号</el-dropdown-item>
+              <el-dropdown-item command="teamName">团队名称</el-dropdown-item>
+              <el-dropdown-item command="salerPerson">销售员</el-dropdown-item>
+              <el-dropdown-item command="teamTypeId">团队类型</el-dropdown-item>
+              <el-dropdown-item command="ifSuccessInvoice">是否成功开票</el-dropdown-item>
+              <el-dropdown-item command="status">订单状态</el-dropdown-item>
+              <el-dropdown-item command="time">支付时间</el-dropdown-item>
+              <el-dropdown-item command="paymentId">支付单号</el-dropdown-item>
+              <el-dropdown-item command="performDate">场次时间/场次</el-dropdown-item>
+              <el-dropdown-item command="invoiceTime">开票时间</el-dropdown-item>
+              <el-dropdown-item command="refundPaymentId">商户退款单号</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+          <el-button style="margin-left: 10px;" type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
           <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
         </el-form-item>
       </el-form>
@@ -574,6 +602,20 @@ export default {
       multiPerformDate:false,
       fixed: 'left',
       actionUrlLoading: false,
+
+      queryShow: {
+        id: true,
+        teamName: true,
+        salerPerson: false,
+        teamTypeId: false,
+        ifSuccessInvoice: false,
+        status: false,
+        time: false,
+        paymentId: false,
+        performDate: true,
+        invoiceTime: false,
+        refundPaymentId: false,
+      },
     };
   },
   created() {
@@ -1035,6 +1077,12 @@ export default {
           break;
       }
     },
+    clearQuery(key) {
+      this.$set(this.queryShow,key,false)
+    },
+    openQuery(key) {
+      this.$set(this.queryShow,key,true)
+    }
   },
   beforeDestroy() {
     this.resizeObserver.unobserve(this.$refs.queryFormBox);
@@ -1104,4 +1152,23 @@ export default {
     height: 100px;
     display: block;
   }
+
+  .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>

src/views/order/viewers/index.vue

@@ -1,33 +1,38 @@
 <template>
-  <div class="app-container" :style="{'--q-height':qHeight}">
+  <div class="app-container app-container-scheduling" :style="{'--q-height':qHeight}">
     <div class="app-container-query" ref="queryFormBox">
       <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-        <el-form-item label="订单号">
+        <el-form-item v-if="queryShow.orderId" label="订单号">
           <el-input v-model="queryParams.orderId" placeholder="请输入订单号" clearable style="width: 240px;"
             @keyup.enter.native="handleQuery" />
+            <span @click="clearQuery('orderId')" class="query_clear"><i class="el-icon-circle-close"></i></span>
         </el-form-item>
-        <el-form-item label="订单状态">
+        <el-form-item v-if="queryShow.orderStatus" label="订单状态">
           <el-select v-model="queryParams.orderStatus" placeholder="订单状态" clearable style="width: 100%">
             <el-option v-for="dict in dict.type.order_status_type" :key="dict.value" :label="dict.label"
               :value="dict.value" />
+              <span @click="clearQuery('orderStatus')" class="query_clear"><i class="el-icon-circle-close"></i></span>
           </el-select>
         </el-form-item>
-        <el-form-item label="座位类型">
+        <el-form-item v-if="queryShow.seatTypeId" label="座位类型">
           <el-select v-model="queryParams.seatTypeId" placeholder="座位类型" clearable style="width: 100%">
             <el-option v-for="(item, index) in seatTypeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
           </el-select>
+          <span @click="clearQuery('seatTypeId')" class="query_clear"><i class="el-icon-circle-close"></i></span>
         </el-form-item>
-        <el-form-item label="购票渠道">
+        <el-form-item v-if="queryShow.source" label="购票渠道">
           <el-select v-model="queryParams.source" placeholder="购票渠道" clearable style="width: 100%">
             <el-option v-for="dict in dict.type.order_form_type" :key="dict.value" :label="dict.label"
               :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="取票码">
+        <el-form-item v-if="queryShow.qrcodeNo" label="取票码">
           <el-input v-model="queryParams.qrcodeNo" placeholder="请输入取票码" clearable style="width: 240px;"
             @keyup.enter.native="handleQuery" />
+            <span @click="clearQuery('qrcodeNo')" class="query_clear"><i class="el-icon-circle-close"></i></span>
         </el-form-item>
-        <el-form-item label="支付时间">
+        <el-form-item v-if="queryShow.payTime" label="支付时间">
           <!-- <el-date-picker style="width: 230px;" v-model="queryParams.payTime" type="date" value-format="yyyy-MM-dd"
             placeholder="支付时间">
           </el-date-picker> -->
@@ -39,8 +44,9 @@
             start-placeholder="开始日期"
             end-placeholder="结束日期">
           </el-date-picker>
+          <span @click="clearQuery('payTime')" class="query_clear"><i class="el-icon-circle-close"></i></span>
         </el-form-item>
-        <el-form-item label="场次时间" label-width="70px">
+        <el-form-item v-if="queryShow.performDate" label="场次时间" label-width="70px">
           <el-date-picker
             style="width: 250px;"
             v-model="queryParams.performDate"
@@ -51,6 +57,7 @@
             start-placeholder="开始日期"
             end-placeholder="结束日期">
           </el-date-picker>
+          <span @click="clearQuery('performDate')" class="query_clear"><i class="el-icon-circle-close"></i></span>
         </el-form-item>
         <!-- <el-form-item label="场次时间">
           <el-date-picker
@@ -62,7 +69,7 @@
           placeholder="选择日期">
           </el-date-picker>
         </el-form-item> -->
-        <el-form-item label="场次" v-if="!multiPerformDate">
+        <el-form-item label="场次" v-if="!multiPerformDate && queryShow.performDate">
           <el-select v-model="queryParams.performTimeId" placeholder="场次" clearable style="width: 100%">
             <el-option
             v-for="dict in pagePerformTimeList"
@@ -70,9 +77,22 @@
             :label="dict.timeSnapshot+'('+dict.performTimeStart+'-'+dict.performTimeEnd+')'"
             :value="dict.id" />
           </el-select>
+          <span @click="clearQuery('performDate')" class="query_clear"><i class="el-icon-circle-close"></i></span>
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+          <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="orderId">订单号</el-dropdown-item>
+              <el-dropdown-item command="orderStatus">订单状态</el-dropdown-item>
+              <el-dropdown-item command="seatTypeId">座位类型</el-dropdown-item>
+              <el-dropdown-item command="source">购票渠道</el-dropdown-item>
+              <el-dropdown-item command="qrcodeNo">取票码</el-dropdown-item>
+              <el-dropdown-item command="payTime">支付时间</el-dropdown-item>
+              <el-dropdown-item command="performDate">场次时间/场次</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+          <el-button style="margin-left: 10px;" type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
           <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
         </el-form-item>
       </el-form>
@@ -409,6 +429,16 @@ export default {
       refundSubmitErrorList: [], //
       multiPerformDate:false,
       fixed: 'left',
+
+      queryShow: {
+        orderId: true,
+        orderStatus: true,
+        seatTypeId: false,
+        source: false,
+        qrcodeNo: false,
+        payTime: false,
+        performDate: true
+      },
     };
   },
   created() {
@@ -1028,4 +1058,23 @@ export default {
     height: calc( 100% - 100px );
   }
 }
+
+.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>