订单-订单列表-增加导出功能

src/views/order/list/index.vue

@@ -3,129 +3,101 @@
     <el-card class="box-card">
       <div slot="header" class="clearfix">
         <div class="container">
-          <el-form size="small" label-width="100px">
-            <el-form-item label="订单状态：">
-              <el-radio-group v-model="tableFrom.status" type="button" @change="getList(1)">
-                <el-radio-button label>全部 {{
-                    '(' + orderChartType.all ? orderChartType.all : 0 + ')'
-                  }}
-                </el-radio-button>
-                <el-radio-button
-                    label="1"
-                >待付款 {{ '(' + orderChartType.unpaid ? orderChartType.unpaid : 0 + ')' }}
-                </el-radio-button>
-                <el-radio-button
-                    label="2"
-                >待发货 {{ '(' + orderChartType.unshipped ? orderChartType.unshipped : 0 + ')' }}
-                </el-radio-button>
-                <el-radio-button
-                    label="3"
-                >待收货 {{ '(' + orderChartType.untake ? orderChartType.untake : 0 + ')' }}
-                </el-radio-button>
-                <el-radio-button
-                    label="4"
-                >待评价 {{ '(' + orderChartType.unevaluate ? orderChartType.unevaluate : 0 + ')' }}
-                </el-radio-button>
-                <el-radio-button
-                    label="5"
-                >交易完成 {{ '(' + orderChartType.complete ? orderChartType.complete : 0 + ')' }}
-                </el-radio-button>
-                <el-radio-button
-                    label="6"
-                >已退款 {{ '(' + orderChartType.refund ? orderChartType.refund : 0 + ')' }}
-                </el-radio-button>
-                <el-radio-button
-                    label="7"
-                >已删除 {{ '(' + orderChartType.del ? orderChartType.del : 0 + ')' }}
-                </el-radio-button>
-              </el-radio-group>
-            </el-form-item>
-            <el-form-item label="时间选择：" class="width100">
-              <el-radio-group
-                  v-model="tableFrom.date"
-                  type="button"
-                  class="mr20"
-                  size="small"
-                  @change="selectChange(tableFrom.date)"
-              >
-                <el-radio-button
-                    v-for="(item,i) in fromList.fromTxt"
-                    :key="i"
-                    :label="item.val"
-                >{{ item.text }}
-                </el-radio-button>
-              </el-radio-group>
-              <el-date-picker
-                  v-model="timeVal"
-                  value-format="yyyy/MM/dd HH:mm:ss"
-                  format="yyyy/MM/dd HH:mm:ss"
-                  size="small"
-                  type="datetimerange"
-                  placement="bottom-end"
-                  placeholder="自定义时间"
-                  style="width: 250px;"
-                  @change="onchangeTime"
-              />
-            </el-form-item>
-            <el-form-item label="商户名称：">
-              <el-select
-                  v-model="tableFrom.mer_id"
-                  clearable
-                  filterable
-                  placeholder="请选择"
-                  class="selWidth"
-                  @change="getList(1)"
-              >
-                <el-option
-                    v-for="item in merSelect"
-                    :key="item.mer_id"
-                    :label="item.mer_name"
-                    :value="item.mer_id"
-                />
-              </el-select>
-            </el-form-item>
-            <el-form-item label="支付类型：" class="check-status">
-              <el-select v-model="tableFrom.pay_type" placeholder="全部" class="filter-item" @change="getList(1)">
-                <el-option label="全部" value=""/>
-                <el-option label="微信" :value="1"/>
-                <el-option label="支付宝" :value="4"/>
-                <!-- <el-option label="虚拟支付" :value="0" /> -->
+          <el-form size="small" label-width="100px" class="responsive-form">
+            <el-row>
+              <!-- 订单状态独占一行 -->
+              <!-- el-col span="24" 确保此项占满整行 -->
+              <el-col :span="24">
+                <el-form-item label="订单状态：">
+                  <el-radio-group v-model="tableFrom.status" type="button" @change="getList(1)">
+                    <el-radio-button label>全部 {{ '(' + (orderChartType.all || 0) + ')' }}</el-radio-button>
+                    <el-radio-button label="1">待付款 {{ '(' + (orderChartType.unpaid || 0) + ')' }}</el-radio-button>
+                    <el-radio-button label="2">待发货 {{ '(' + (orderChartType.unshipped || 0) + ')' }}</el-radio-button>
+                    <el-radio-button label="3">待收货 {{ '(' + (orderChartType.untake || 0) + ')' }}</el-radio-button>
+                    <el-radio-button label="4">待评价 {{ '(' + (orderChartType.unevaluate || 0) + ')' }}</el-radio-button>
+                    <el-radio-button label="5">交易完成 {{ '(' + (orderChartType.complete || 0) + ')' }}</el-radio-button>
+                    <el-radio-button label="6">已退款 {{ '(' + (orderChartType.refund || 0) + ')' }}</el-radio-button>
+                    <el-radio-button label="7">已删除 {{ '(' + (orderChartType.del || 0) + ')' }}</el-radio-button>
+                  </el-radio-group>
+                </el-form-item>
+              </el-col>
 
-                <!-- <el-option label="红积分兑换" :value="6" /> -->
-              </el-select>
-            </el-form-item>
+              <!-- 时间选择独占一行 -->
+              <!-- el-col span="24" 确保此项占满整行 -->
+              <el-col :span="24">
+                <el-form-item label="时间选择：">
+                  <el-radio-group v-model="tableFrom.date" type="button" size="small"
+                                  @change="selectChange(tableFrom.date)">
+                    <el-radio-button v-for="(item, i) in fromList.fromTxt" :key="i" :label="item.val">{{
+                        item.text
+                      }}
+                    </el-radio-button>
+                  </el-radio-group>
+                  <el-date-picker v-model="timeVal" value-format="yyyy/MM/dd HH:mm:ss" format="yyyy/MM/dd HH:mm:ss"
+                                  size="small" type="datetimerange" placement="bottom-end" placeholder="自定义时间"
+                                  style="width: 250px;" @change="onchangeTime"/>
+                </el-form-item>
+              </el-col>
 
-            <el-form-item label="关键字：" class="width100">
-              <el-input
-                  v-model="tableFrom.keywords"
-                  placeholder="请输入订单号/收货人/联系方式"
-                  class="selWidth"
-                  size="small"
-              >
-                <el-button slot="append" icon="el-icon-search" size="small" @click="getList(1)"/>
-              </el-input>
-            </el-form-item>
-            <el-form-item label="用户信息：" class="width100">
-              <el-input
-                  v-model="tableFrom.username"
-                  placeholder="请输入用户昵称/手机号"
-                  class="selWidth"
-                  size="small"
-              >
-                <el-button slot="append" icon="el-icon-search" size="small" @click="getList(1)"/>
-              </el-input>
-            </el-form-item>
-            <el-form-item label="支付状态：" class="check-status">
-              <el-select v-model="tableFrom.paid" placeholder="全部" class="filter-item" @change="getList(1)">
-                <el-option label="全部" value=""/>
-                <el-option label="已支付" :value="1"/>
-                <el-option label="未支付" :value="0"/>
-                <!-- <el-option label="虚拟支付" :value="0" /> -->
+              <!-- 其余项自适应宽度： xs=1列, sm=2列, md=3列, lg=3列 -->
+              <!-- 注意：lg 的 span 从 6 改为 8 -->
+              <el-col :xs="24" :sm="12" :md="8" :lg="8">
+                <el-form-item label="商户名称：">
+                  <el-select v-model="tableFrom.mer_id" clearable filterable placeholder="请选择" @change="getList(1)">
+                    <el-option v-for="item in merSelect" :key="item.mer_id" :label="item.mer_name" :value="item.mer_id"/>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :xs="24" :sm="12" :md="8" :lg="8">
+                <el-form-item label="支付类型：" class="check-status">
+                  <el-select v-model="tableFrom.pay_type" placeholder="全部" @change="getList(1)">
+                    <el-option label="全部" value=""/>
+                    <el-option label="微信" :value="1"/>
+                    <el-option label="支付宝" :value="4"/>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :xs="24" :sm="12" :md="8" :lg="8">
+                <el-form-item label="支付状态：" class="check-status">
+                  <el-select v-model="tableFrom.paid" placeholder="全部" @change="getList(1)">
+                    <el-option label="全部" value=""/>
+                    <el-option label="已支付" :value="1"/>
+                    <el-option label="未支付" :value="0"/>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :xs="24" :sm="12" :md="8" :lg="8">
+                <el-form-item label="关键字：">
+                  <el-input v-model="tableFrom.keywords" placeholder="请输入订单号/收货人/联系方式" size="small">
+                    <el-button slot="append" icon="el-icon-search" size="small" @click="getList(1)"/>
+                  </el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :xs="24" :sm="12" :md="8" :lg="8">
+                <el-form-item label="用户信息：">
+                  <el-input v-model="tableFrom.username" placeholder="请输入用户昵称/手机号" size="small">
+                    <el-button slot="append" icon="el-icon-search" size="small" @click="getList(1)"/>
+                  </el-input>
+                </el-form-item>
+              </el-col>
+              <!-- 如果还有其他表单项，也放在这个 el-row 中并配置合适的响应式 span -->
 
-                <!-- <el-option label="红积分兑换" :value="6" /> -->
-              </el-select>
-            </el-form-item>
+              <!-- 搜索按钮或其他不属于网格布局的元素可以放在 el-row 之外，或者放在 el-row 中配合 el-col 布局 -->
+              <!-- 例如，如果您希望搜索按钮也参与布局，可以这样 -->
+<!--              <el-col :xs="24" :sm="12" :md="8" :lg="8">-->
+<!--                <el-form-item>-->
+<!--                  <el-button size="small" type="primary" @click="getList(1)">搜索</el-button>-->
+<!--                  &lt;!&ndash; 其他按钮 &ndash;&gt;-->
+<!--                </el-form-item>-->
+<!--              </el-col>-->
+            </el-row>
           </el-form>
+
+          <div class="bottom-button">
+            <el-button size="mini" type="primary" style="width: 100px; margin-top: 20px;" @click="exportSearchResult">
+              导出
+            </el-button>
+          </div>
         </div>
         <!-- <cards-data :card-lists="cardLists" /> -->
         <redCards-data :card-lists="cardLists" class="orderCount-box"/>
@@ -322,6 +294,7 @@ export default {
         order_ids: "",
         page: 1,
         limit: 20,
+        is_excel: 0
       },
       orderChartType: {},
       timeVal: [],
@@ -497,6 +470,17 @@ export default {
             this.$message.error(res.message);
           });
     },
+    exportSearchResult() {
+      this.tableFrom.is_excel = 1;
+      orderListApi(this.tableFrom).then((res) => {
+        this.tableFrom.is_excel = 0;
+        this.$message.success('导出成功')
+        window.open(res.data.path)
+      }).catch(() => {
+        this.tableFrom.is_excel = 0;
+        this.$message.error('导出失败');
+      })
+    },
   },
 };
 </script>