全部客户搜索条件顺序， 对齐

src/views/ecw/customer/index.vue

 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="130px">
+    <el-form class="search-z" :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="130px">
       <el-form-item :label="$t('客户编号')" prop="number">
         <el-input v-model.trim="queryParams.number" :placeholder="$t('请输入客户编号')" clearable @keyup.enter.native="handleQuery" @input="queryParams.number = queryParams.number.replace(/\s+/g, '')" />
       </el-form-item>
@@ -84,9 +84,6 @@
           <el-option v-for="item in allSimplList" :key="item.id" :label="item.nickname" :value="item.id"> </el-option>
         </el-select>
       </el-form-item>
-      <el-form-item :label="$t('创建时间')" v-show="showSearch">
-        <el-date-picker type="datetimerange" clearable v-model="dateRangeCreateTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" range-separator="-" :start-placeholder="$t('开始日期')" :end-placeholder="$t('结束日期')" />
-      </el-form-item>
       <!--
       <el-form-item :label="$t('信用等级')" prop="department">
         <el-select multiple clearable v-model="queryParams.creditLevel">
@@ -140,9 +137,6 @@
         />
       </el-form-item>
       -->
-      <el-form-item :label="$t('入公海时间')" v-show="showSearch">
-        <el-date-picker type="datetimerange" clearable v-model="enterOpenSeaTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" range-separator="-" :start-placeholder="$t('开始日期')" :end-placeholder="$t('结束日期')" />
-      </el-form-item>
       <el-form-item :label="$t('业绩类型')" v-show="showSearch">
         <el-select clearable v-model="queryParams.isNew">
           <el-option :label="$t('新客户')" :value="true" />
@@ -183,27 +177,6 @@
           <el-option v-for="item in customerSelectFn" :key="item.id" :label="item.name" :value="item.id"> </el-option>
         </el-select>
       </el-form-item>
-      <el-form-item :label="$t('入仓确认')" v-show="showSearch">
-        <el-select clearable v-model="queryParams.arrivalConfirm">
-          <el-option :label="$t('是')" :value="1" />
-          <el-option :label="$t('否')" :value="0" />
-        </el-select>
-      </el-form-item>
-      <el-form-item :label="$t('控货无收货人')" v-show="showSearch">
-        <el-switch v-model="queryParams.noConsignee" />
-      </el-form-item>
-      <el-form-item :label="$t('默认付款')" v-show="showSearch">
-        <el-switch v-model="queryParams.defaultPay" />
-      </el-form-item>
-      <el-form-item :label="$t('是否显示提单价格')" v-show="showSearch">
-        <el-switch v-model="queryParams.isShowTidanPrice" />
-      </el-form-item>
-      <el-form-item :label="$t('归属时间')" v-show="showSearch">
-        <el-date-picker type="datetimerange" clearable v-model="customerServiceConfirmedTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" range-separator="-" :start-placeholder="$t('开始日期')" :end-placeholder="$t('结束日期')" />
-      </el-form-item>
-      <el-form-item :label="$t('首次成交时间')" v-show="showSearch">
-        <el-date-picker type="datetimerange" clearable v-model="firstDealTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" range-separator="-" :start-placeholder="$t('开始日期')" :end-placeholder="$t('结束日期')" />
-      </el-form-item>
       <el-form-item :label="$t('获取方式')" v-show="showSearch">
         <el-select v-model="queryParams.getMethod" multiple :placeholder="$t('请选择')">
           <el-option v-for="dict in getDictDatas(DICT_TYPE.CUSTOMER_GET_METHOD)" :key="dict.value" :label="isChinese ? dict.label : dict.labelEn" :value="parseInt(dict.value)" />
@@ -219,10 +192,46 @@
           <el-option v-for="dict in getDictDatas(DICT_TYPE.CUSTOMER_BALANCE)" :key="dict.value" :label="isChinese ? dict.label : dict.labelEn" :value="parseInt(dict.value)" />
         </el-select>
       </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" @click="handleQuery">{{ $t("搜索") }}</el-button>
-        <el-button icon="el-icon-refresh" @click="resetQuery">{{ $t("重置") }}</el-button>
+      <el-form-item :label="$t('入仓确认')" v-show="showSearch">
+        <el-select clearable v-model="queryParams.arrivalConfirm">
+          <el-option :label="$t('是')" :value="1" />
+          <el-option :label="$t('否')" :value="0" />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t('控货无收货人')" v-show="showSearch">
+        <div style="width: 194px">
+          <el-switch v-model="queryParams.noConsignee" />
+        </div>
+      </el-form-item>
+      <el-form-item :label="$t('默认付款')" v-show="showSearch">
+        <div style="width: 194px">
+          <el-switch v-model="queryParams.defaultPay" />
+        </div>
+      </el-form-item>
+      <el-form-item :label="$t('是否显示提单价格')" v-show="showSearch">
+        <div style="width: 194px">
+          <el-switch v-model="queryParams.isShowTidanPrice" />
+        </div>
       </el-form-item>
+      <div>
+        <el-form-item :label="$t('入公海时间')" v-show="showSearch">
+          <el-date-picker type="datetimerange" clearable v-model="enterOpenSeaTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" range-separator="-" :start-placeholder="$t('开始日期')" :end-placeholder="$t('结束日期')" />
+        </el-form-item>
+        <el-form-item :label="$t('归属时间')" v-show="showSearch">
+          <el-date-picker type="datetimerange" clearable v-model="customerServiceConfirmedTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" range-separator="-" :start-placeholder="$t('开始日期')" :end-placeholder="$t('结束日期')" />
+        </el-form-item>
+        <el-form-item :label="$t('首次成交时间')" v-show="showSearch">
+          <el-date-picker type="datetimerange" clearable v-model="firstDealTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" range-separator="-" :start-placeholder="$t('开始日期')" :end-placeholder="$t('结束日期')" />
+        </el-form-item>
+
+        <el-form-item :label="$t('创建时间')" v-show="showSearch">
+          <el-date-picker type="datetimerange" clearable v-model="dateRangeCreateTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" range-separator="-" :start-placeholder="$t('开始日期')" :end-placeholder="$t('结束日期')" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search" @click="handleQuery">{{ $t("搜索") }}</el-button>
+          <el-button icon="el-icon-refresh" @click="resetQuery">{{ $t("重置") }}</el-button>
+        </el-form-item>
+      </div>
     </el-form>
 
     <!-- 操作工具栏 -->
@@ -324,17 +333,8 @@
           <!--          />-->
         </template>
       </el-table-column>
-      <el-table-column
-        :label="$t('客户经理')"
-        align="center"
-        prop="customerServiceName"
-      ></el-table-column>
-      <el-table-column
-        :label="$t('国籍')"
-        align="center"
-        prop="country"
-        :formatter="countryFormatter"
-      ></el-table-column>
+      <el-table-column :label="$t('客户经理')" align="center" prop="customerServiceName"></el-table-column>
+      <el-table-column :label="$t('国籍')" align="center" prop="country" :formatter="countryFormatter"></el-table-column>
       <el-table-column :label="$t('出货渠道')" align="center">
         <template slot-scope="{ row }">
           {{ channel(row.transportType) }}
@@ -423,12 +423,7 @@
           <span>{{ parseTime(scope.row.updateTime) }}</span>
         </template>
       </el-table-column>
-      <el-table-column
-        width="200px"
-        :label="$t('操作')"
-        align="center"
-        fixed="right"
-      >
+      <el-table-column width="200px" :label="$t('操作')" align="center" fixed="right">
         <template slot-scope="scope">
           <!--          <el-button size="mini" type="text" v-show="'development' === env && scope.row.isInOpenSea"  @click="seasPond(scope.row)"-->
           <!--                     v-hasPermi="['ecw:customer:query']">{{$t('掉入公海池')}}</el-button>-->
@@ -979,22 +974,22 @@ export default {
       }
     },
     combinedQueryParams() {
-      let queryParams = {};
+      let queryParams = {}
       if (this.enterOpenSeaTime && this.enterOpenSeaTime.length == 2) {
-        queryParams.beginEnterOpenSeaTime = this.enterOpenSeaTime[0];
-        queryParams.endEnterOpenSeaTime = this.enterOpenSeaTime[1];
+        queryParams.beginEnterOpenSeaTime = this.enterOpenSeaTime[0]
+        queryParams.endEnterOpenSeaTime = this.enterOpenSeaTime[1]
       }
       if (this.customerServiceConfirmedTime && this.customerServiceConfirmedTime.length == 2) {
         queryParams.beginCustomerServiceConfirmedTime = this.customerServiceConfirmedTime[0]
         queryParams.endCustomerServiceConfirmedTime = this.customerServiceConfirmedTime[1]
       }
       if (this.dateRangeCreateTime && this.dateRangeCreateTime.length == 2) {
-        queryParams.beginCreateTime = this.dateRangeCreateTime[0];
-        queryParams.endCreateTime = this.dateRangeCreateTime[1];
+        queryParams.beginCreateTime = this.dateRangeCreateTime[0]
+        queryParams.endCreateTime = this.dateRangeCreateTime[1]
       }
       if (this.firstDealTime && this.firstDealTime.length == 2) {
-        queryParams.beginFirstDealTime = this.firstDealTime[0];
-        queryParams.endFirstDealTime = this.firstDealTime[1];
+        queryParams.beginFirstDealTime = this.firstDealTime[0]
+        queryParams.endFirstDealTime = this.firstDealTime[1]
       }
       if (this.weightYearly.value) {
         let key = "eqWeightYearly"
@@ -1434,12 +1429,12 @@ export default {
         const strArr = []
         this.countryList.forEach((item) => {
           if (idsArr.includes(item.id.toString())) {
-            strArr.push(this.isChinese ? item.nameZh : item.nameEn);
+            strArr.push(this.isChinese ? item.nameZh : item.nameEn)
           }
         })
         return strArr.length > 0 ? strArr.join(",") : null
       } else {
-        return null;
+        return null
       }
     },
     getPickupPointNames(ids) {
@@ -1448,7 +1443,7 @@ export default {
         const strArr = []
         this.getNodeLists.forEach((item) => {
           if (idsArr.includes(item.id.toString())) {
-            strArr.push(this.isChinese ? item.titleZh : item.titleEn);
+            strArr.push(this.isChinese ? item.titleZh : item.titleEn)
           }
         })
         return strArr.length > 0 ? strArr.join(",") : null
@@ -1467,7 +1462,7 @@ export default {
         })
         return strArr.length > 0 ? strArr.join(",") : null
       } else {
-        return null;
+        return null
       }
     },
     getProductTypeNames(ids) {
@@ -1476,12 +1471,12 @@ export default {
         const strArr = []
         this.productTypeList.forEach((item) => {
           if (idsArr.includes(item.id.toString())) {
-            strArr.push(this.isChinese ? item.titleZh : item.titleEn);
+            strArr.push(this.isChinese ? item.titleZh : item.titleEn)
           }
         })
         return strArr.length > 0 ? strArr.join(",") : null
       } else {
-        return null;
+        return null
       }
     },
     getPromoterName(id) {
@@ -1489,15 +1484,25 @@ export default {
         let strName = ""
         for (const item of this.customerSelectFn) {
           if (item.id == id) {
-            strName = item.name;
-            break;
+            strName = item.name
+            break
           }
         }
-        return strName;
+        return strName
       } else {
-        return null;
+        return null
       }
     }
   }
 }
 </script>
+
+<style lang="scss" scoped>
+.search-z {
+  ::v-deep .el-input-group--prepend {
+    .el-input__inner {
+      width: 103px;
+    }
+  }
+}
+</style>