支付时间和完成时间

src/views/live/liveOrder/index.vue

@@ -2,7 +2,7 @@
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item label="公司名" prop="companyId">
-        <el-select filterable  v-model="queryParams.companyId" placeholder="请选择公司名"  @change="companyChange" clearable size="small">
+        <el-select filterable v-model="queryParams.companyId" placeholder="请选择公司名" @change="companyChange" clearable size="small">
           <el-option
             v-for="item in companys"
             :key="item.companyId"
@@ -12,8 +12,8 @@
         </el-select>
       </el-form-item>
 
-      <el-form-item >
-        <treeselect style="width: 220px" :clearable="false"  v-model="queryParams.deptId"  :options="deptOptions" :show-count="true" placeholder="请选择归属部门" />
+      <el-form-item>
+        <treeselect style="width: 220px" :clearable="false" v-model="queryParams.deptId" :options="deptOptions" :show-count="true" placeholder="请选择归属部门" />
       </el-form-item>
       <el-form-item label="订单号" prop="orderCode">
         <el-input
@@ -105,22 +105,35 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="支付时间" prop="payTime">
-        <el-date-picker clearable size="small"
-          v-model="queryParams.payTime"
-          type="date"
-          value-format="yyyy-MM-dd hh:mm:ss"
-          placeholder="选择支付时间">
-        </el-date-picker>
+
+      <!-- 修改支付时间为范围选择 -->
+      <el-form-item label="支付时间" prop="payTimeRange">
+        <el-date-picker
+          v-model="payTimeRange"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="yyyy-MM-dd"
+          size="small"
+          @change="handlePayTimeChange"
+        />
       </el-form-item>
-      <el-form-item label="完成时间" prop="finishTime">
-        <el-date-picker clearable size="small"
-          v-model="queryParams.finishTime"
-          type="date"
+
+      <!-- 修改完成时间为范围选择 -->
+      <el-form-item label="完成时间" prop="finishTimeRange">
+        <el-date-picker
+          v-model="finishTimeRange"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
           value-format="yyyy-MM-dd"
-          placeholder="选择完成时间">
-        </el-date-picker>
+          size="small"
+          @change="handleFinishTimeChange"
+        />
       </el-form-item>
+
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
@@ -128,7 +141,6 @@
     </el-form>
 
     <el-row :gutter="10" class="mb8">
-
       <el-col :span="1.5">
         <el-button
           type="warning"
@@ -142,13 +154,14 @@
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
+
     <el-tabs type="card" v-model="actName" @tab-click="handleClickX">
       <el-tab-pane label="全部订单" name="10"></el-tab-pane>
       <el-tab-pane v-for="(item,index) in orderOptions" :label="item.dictLabel" :name="item.dictValue"></el-tab-pane>
     </el-tabs>
+
     <el-table border v-loading="loading" :data="liveOrderList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
-<!--      <el-table-column label="订单ID" align="center" prop="orderId"/>-->
       <el-table-column label="订单号" align="center" prop="orderCode" />
       <el-table-column label="所属公司" align="center" prop="companyName" />
       <el-table-column label="所属员工" align="center" prop="companyUserName" />
@@ -163,23 +176,19 @@
       <el-table-column label="物流单号" align="center" prop="deliverySn" />
       <el-table-column label="物流状态" align="center" prop="deliveryStatus">
         <template slot-scope="item">
-        <dict-tag :options="deliveryStatusOptions" :value="item.row.deliveryStatus"/>
-      </template></el-table-column>
+          <dict-tag :options="deliveryStatusOptions" :value="item.row.deliveryStatus"/>
+        </template>
+      </el-table-column>
       <el-table-column label="物流跟踪状态" align="center" prop="deliveryType">
         <template slot-scope="item">
           <dict-tag :options="deliveryTypeOptions" :value="item.row.deliveryType"/>
         </template>
-        </el-table-column>
+      </el-table-column>
       <el-table-column label="支付时间" align="center" prop="payTime" width="180">
         <template slot-scope="scope">
           <span>{{ scope.row.payTime }}</span>
         </template>
       </el-table-column>
-<!--      <el-table-column label="完成时间" align="center" prop="finishTime" width="180">-->
-<!--        <template slot-scope="scope">-->
-<!--          <span>{{ parseTime(scope.row.finishTime, '{y}-{m}-{d}') }}</span>-->
-<!--        </template>-->
-<!--      </el-table-column>-->
       <el-table-column label="状态" align="center" prop="status" :formatter="orderStatusFormatter"/>
       <el-table-column label="备注" align="center" prop="remark" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
@@ -202,13 +211,13 @@
       :limit.sync="queryParams.pageSize"
       @pagination="getList"
     />
+
     <el-drawer
       :with-header="false"
       size="75%"
       :title="show.title" :visible.sync="show.open">
-      <liveOrderDetails  ref="Details" />
+      <liveOrderDetails ref="Details" />
     </el-drawer>
-
   </div>
 </template>
 
@@ -226,7 +235,7 @@ export default {
   components: {Treeselect, liveOrderDetails },
   data() {
     return {
-      //字典
+      // 字典
       orderStatusOptions: [],
       // 遮罩层
       loading: true,
@@ -244,8 +253,13 @@ export default {
       total: 0,
       // 订单表格数据
       liveOrderList: [],
-      deliveryStatusOptions:[],
-      deliveryTypeOptions:[],
+      deliveryStatusOptions: [],
+      deliveryTypeOptions: [],
+
+      // 支付时间范围选择器绑定的值
+      payTimeRange: [],
+      // 完成时间范围选择器绑定的值
+      finishTimeRange: [],
 
       // 查询参数
       queryParams: {
@@ -262,23 +276,26 @@ export default {
         deliveryCode: null,
         deliveryName: null,
         deliverySn: null,
-        payTime: null,
-        finishTime: null,
+        // 移除单个时间字段，改为范围字段
+        payStartTime: null,
+        payEndTime: null,
+        finishTimeStart: null,
+        finishTimeEnd: null,
         status: null,
       },
-      orderOptions:[],
-      actName:"10",
-      show:{
-        title:"订单详情",
-        open:false,
+      orderOptions: [],
+      actName: "10",
+      show: {
+        title: "订单详情",
+        open: false,
       },
     };
   },
   created() {
     getCompanyList().then(response => {
       this.companys = response.data;
-      if(this.companys!=null&&this.companys.length>0){
-        this.companyId=this.companys[0].companyId;
+      if(this.companys != null && this.companys.length > 0){
+        this.companyId = this.companys[0].companyId;
         this.getTreeselect();
       }
     });
@@ -290,7 +307,6 @@ export default {
     this.getDicts("sys_order_status").then(response => {
       this.orderOptions = response.data;
     });
-
     this.getDicts("store_order_delivery_status").then(response => {
       this.deliveryStatusOptions = response.data;
     });
@@ -300,23 +316,48 @@ export default {
   },
   methods: {
     parseTime,
+
+    // 支付时间范围选择变化处理
+    handlePayTimeChange(value) {
+      if (value && value.length === 2) {
+        this.queryParams.payStartTime = value[0] + ' 00:00:00';
+        this.queryParams.payEndTime = value[1] + ' 23:59:59';
+      } else {
+        this.queryParams.payStartTime = null;
+        this.queryParams.payEndTime = null;
+      }
+    },
+
+    // 完成时间范围选择变化处理
+    handleFinishTimeChange(value) {
+      if (value && value.length === 2) {
+        this.queryParams.finishTimeStart = value[0] + ' 00:00:00';
+        this.queryParams.finishTimeEnd = value[1] + ' 23:59:59';
+      } else {
+        this.queryParams.finishTimeStart = null;
+        this.queryParams.finishTimeEnd = null;
+      }
+    },
+
     // 查看详情
     handledetails(row){
-      this.show.open=true;
+      this.show.open = true;
       setTimeout(() => {
-        this.$refs.Details.getDetails(row.orderId,row.nickName,row.storeName);
+        this.$refs.Details.getDetails(row.orderId, row.nickName, row.storeName);
       }, 1);
     },
+
     // 订单tab切换
-    handleClickX(tab, event) {
+    handleClickX(tab) {
       this.orderStatus = tab.name;
-      if(tab.name=="10"){
-        this.queryParams.status=null;
-      }else{
-        this.queryParams.status=tab.name;
+      if(tab.name == "10"){
+        this.queryParams.status = null;
+      } else {
+        this.queryParams.status = tab.name;
       }
       this.handleQuery();
     },
+
     /** 查询订单列表 */
     getList() {
       this.loading = true;
@@ -326,58 +367,71 @@ export default {
         this.loading = false;
       });
     },
+
     orderStatusFormatter(row, column) {
       return this.selectDictLabel(this.orderStatusOptions, row.status);
     },
+
     /** 搜索按钮操作 */
     handleQuery() {
       this.queryParams.pageNum = 1;
       this.getList();
     },
+
     /** 重置按钮操作 */
     resetQuery() {
       this.resetForm("queryForm");
+      // 同时清空范围选择器的值
+      this.payTimeRange = [];
+      this.finishTimeRange = [];
+      // 清空时间范围参数
+      this.queryParams.payStartTime = null;
+      this.queryParams.payEndTime = null;
+      this.queryParams.finishTimeStart = null;
+      this.queryParams.finishTimeEnd = null;
       this.handleQuery();
     },
+
     // 多选框选中数据
     handleSelectionChange(selection) {
       this.ids = selection.map(item => item.orderId)
-      this.single = selection.length!==1
+      this.single = selection.length !== 1
       this.multiple = !selection.length
     },
+
     /** 导出按钮操作 */
     handleExport() {
       const queryParams = this.queryParams;
       this.$confirm('是否确认导出所有订单数据项?', "警告", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning"
-        }).then(() => {
-          this.exportLoading = true;
-          return exportLiveOrder(queryParams);
-        }).then(response => {
-          this.download(response.msg);
-          this.exportLoading = false;
-        }).catch(() => {});
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        this.exportLoading = true;
+        return exportLiveOrder(queryParams);
+      }).then(response => {
+        this.download(response.msg);
+        this.exportLoading = false;
+      }).catch(() => {});
     },
+
     getTreeselect() {
-      var param={companyId:this.companyId}
+      var param = {companyId: this.companyId}
       treeselect(param).then((response) => {
         this.deptOptions = response.data;
-        console.log(this.deptOptions)
-        if(response.data!=null&&response.data.length>0){
-          //this.queryParams.deptId=response.data[0].id;
+        if(response.data != null && response.data.length > 0){
+          // this.queryParams.deptId = response.data[0].id;
         }
       });
     },
+
     companyChange(val){
-      console.log(val);
-      this.companyId=val;
+      this.companyId = val;
       this.getTreeselect();
     },
+
     currDeptChange(val){
-      console.log(val)
-      this.queryParams.deptId=val;
+      this.queryParams.deptId = val;
       this.getList();
     },
   }