style: 统一输入框和选择器宽度为240px并优化卡片布局

- 将多处输入框和选择器的宽度从200px调整为240px
- 优化卡片布局结构，添加分割卡片提升可读性
- 移除部分冗余的刷新按钮和样式代码
- 调整日期选择器等表单元素的宽度为240px

manager/src/views/order/after-order/afterSaleOrder.vue

@@ -15,7 +15,7 @@
               v-model="searchForm.orderSn"
               placeholder="请输入订单编号"
               clearable
-              style="width: 200px"
+              style="width: 240px"
             />
           </Form-item>
           <Form-item label="售后单号" prop="sn">
@@ -24,7 +24,7 @@
               v-model="searchForm.sn"
               placeholder="请输入售后单号"
               clearable
-              style="width: 200px"
+              style="width: 240px"
             />
           </Form-item>
           <Form-item label="申请时间">
@@ -35,7 +35,7 @@
               clearable
               @on-change="selectDateRange"
               placeholder="选择起始时间"
-              style="width: 200px"
+              style="width: 240px"
             ></DatePicker>
           </Form-item>
           <Form-item label="商家名称" prop="storeName">
@@ -44,7 +44,7 @@
               v-model="searchForm.storeName"
               placeholder="请输入商家名称"
               clearable
-              style="width: 200px"
+              style="width: 240px"
             />
           </Form-item>
           <Form-item label="会员名称" prop="memberName">
@@ -53,7 +53,7 @@
               v-model="searchForm.memberName"
               placeholder="请输入会员名称"
               clearable
-              style="width: 200px"
+              style="width: 240px"
             />
           </Form-item>
           <Form-item label="售后类型">
@@ -61,7 +61,7 @@
               v-model="searchForm.serviceType"
               placeholder="全部"
               clearable
-              style="width: 200px"
+              style="width: 240px"
             >
               <Option value="RETURN_MONEY">退款</Option>
               <Option value="RETURN_GOODS">退货</Option>
@@ -76,11 +76,13 @@
           >
         </Form>
       </Row>
-
+    </Card>
+    <Card>
       <div class="order-tab">
-        <div v-for="(item,index) in serviceStatus" :key="index" :class="{'current': currentStatus === item.value}" @click="serviceStatusClick(item)">
-          {{item.title}}
-        </div>
+        <Tabs v-model="currentStatus" @on-click="serviceStatusClick">
+          <TabPane v-for="(item,index) in serviceStatus" :key="index" :label="item.title" :name="item.value">
+          </TabPane>
+        </Tabs>
       </div>
 
       <Table
@@ -361,8 +363,8 @@ export default {
     },
     // 售后筛选
     serviceStatusClick(item) {
-      this.currentStatus = item.value;
-      this.searchForm.serviceStatus = item.value;
+      this.currentStatus = item;  // 使用参数 item
+      this.searchForm.serviceStatus = item;  // 使用参数 item
       this.getDataList();
     },
   },
@@ -371,27 +373,12 @@ export default {
   },
 };
 </script>
-
 <style lang="scss" scoped>
-
+// Tab组件样式
 .order-tab {
-
-  width: 950px;
-  height: 36px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background-color: #f0f0f0;
-  padding: 0 10px;
-  margin: 10px 20px 10px 0;
-  div {
-    text-align: center;
-    padding: 4px 12px;
-    border-radius: 4px;
-    cursor: pointer;
-  }
-  .current {
-    background-color: #ffffff;
+  margin-top: 20px;
+  ::v-deep .ivu-tabs-tab {
+    font-size: 14px;
   }
 }
 </style>

manager/src/views/order/after-order/orderComplaint.vue

@@ -9,7 +9,7 @@
               v-model="searchForm.orderSn"
               placeholder="请输入订单编号"
               clearable
-              style="width: 200px"
+              style="width: 240px"
             />
           </Form-item>
           <Form-item label="会员名称" prop="memberName">
@@ -18,11 +18,11 @@
               v-model="searchForm.memberName"
               placeholder="请输入会员名称"
               clearable
-              style="width: 200px"
+              style="width: 240px"
             />
           </Form-item>
           <Form-item label="状态" prop="status">
-            <Select v-model="searchForm.status" placeholder="请选择" clearable style="width: 200px">
+            <Select v-model="searchForm.status" placeholder="请选择" clearable style="width: 240px">
               <Option value="NEW">新投诉</Option>
               <Option value="CANCEL">已撤销</Option>
               <Option value="WAIT_APPEAL">待申诉</Option>
@@ -34,6 +34,8 @@
           <Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
         </Form>
       </Row>
+    </Card>
+    <Card>
       <Table
         :loading="loading"
         border

manager/src/views/order/flow/paymentLog.vue

@@ -2,32 +2,31 @@
   <div class="search">
     <Card>
       <Row @keydown.enter.native="handleSearch">
-        <Form ref="searchForm" :model="searchForm" inline :label-width="100" class="search-form">
+        <Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
           <Form-item label="订单号" prop="sn">
-            <Input type="text" v-model="searchForm.sn" placeholder="订单/交易号" clearable style="width: 200px" />
+            <Input type="text" v-model="searchForm.sn" placeholder="订单/交易号" clearable style="width: 240px" />
           </Form-item>
           <Form-item label="付款状态" prop="orderStatus">
-            <Select v-model="searchForm.payStatus" placeholder="请选择" clearable style="width: 200px">
+            <Select v-model="searchForm.payStatus" placeholder="请选择" clearable style="width: 240px">
               <Option value="UNPAID">未付款</Option>
               <Option value="PAID">已付款</Option>
             </Select>
           </Form-item>
           <Form-item label="支付方式" prop="orderStatus">
-            <Select v-model="searchForm.paymentMethod" placeholder="请选择" clearable style="width: 200px">
+            <Select v-model="searchForm.paymentMethod" placeholder="请选择" clearable style="width: 240px">
               <Option value="">全部</Option>
               <Option value="WECHAT">微信</Option>
               <Option value="ALIPAY">支付宝</Option>
               <Option value="WALLET">余额</Option>
               <Option value="BANK_TRANSFER">银行转账</Option>
-
             </Select>
           </Form-item>
-          <Form-item label="订单创建时间">
-            <DatePicker v-model="times" type="datetimerange" format="yyyy-MM-dd HH:mm" clearable @on-change="changeDate" placeholder="选择支付时间" style="width: 200px"></DatePicker>
-          </Form-item>
+          
           <Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
         </Form>
       </Row>
+    </Card>
+    <Card>
       <Table :loading="loading" border :columns="columns" :data="data" ref="table" class="mt_10"></Table>
       <Row type="flex" justify="end" class="mt_10">
         <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50]" size="small"

manager/src/views/order/flow/refundLog.vue

@@ -15,7 +15,7 @@
               v-model="searchForm.orderSn"
               placeholder="订单/交易号"
               clearable
-              style="width: 200px"
+              style="width: 240px"
             />
           </Form-item>
           <Form-item label="退款状态">
@@ -23,7 +23,7 @@
               v-model="searchForm.isRefund"
               placeholder="请选择"
               clearable
-              style="width: 200px"
+              style="width: 240px"
             >
               <Option value="false">未退款</Option>
               <Option value="true">已退款</Option>
@@ -37,7 +37,7 @@
               clearable
               @on-change="selectDateRange"
               placeholder="选择起始时间"
-              style="width: 200px"
+              style="width: 240px"
             ></DatePicker>
           </Form-item>
           <Button
@@ -49,6 +49,8 @@
           >
         </Form>
       </Row>
+      </Card>
+    <Card>
       <Table
         :loading="loading"
         border

manager/src/views/order/order/fictitiousOrderList.vue

@@ -4,34 +4,26 @@
       <Row @keydown.enter.native="handleSearch">
         <Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
           <Form-item label="订单号" prop="orderSn">
-            <Input type="text" v-model="searchForm.orderSn" placeholder="请输入订单号" clearable style="width: 200px" />
+            <Input type="text" v-model="searchForm.orderSn" placeholder="请输入订单号" clearable style="width: 240px" />
           </Form-item>
           <Form-item label="会员名称" prop="buyerName">
-            <Input type="text" v-model="searchForm.buyerName" placeholder="请输入会员名称" clearable style="width: 200px" />
+            <Input type="text" v-model="searchForm.buyerName" placeholder="请输入会员名称" clearable style="width: 240px" />
           </Form-item>
-<!--          <Form-item label="订单状态" prop="orderStatus">-->
-<!--            <Select v-model="searchForm.orderStatus" placeholder="请选择" clearable style="width: 200px">-->
-<!--              <Option value="NEW">新订单</Option>-->
-<!--              <Option value="CONFIRM">已确认</Option>-->
-<!--              <Option value="TAKE">待核验</Option>-->
-<!--              <Option value="COMPLETE">已完成</Option>-->
-<!--              <Option value="WAIT_PINTUAN">待成团</Option>-->
-<!--              <Option value="CANCELLED">已关闭</Option>-->
-<!--            </Select>-->
-<!--          </Form-item>-->
           <Form-item label="下单时间">
             <DatePicker v-model="selectDate" type="datetimerange" format="yyyy-MM-dd" clearable
-              @on-change="selectDateRange" placeholder="选择起始时间" style="width: 200px"></DatePicker>
+              @on-change="selectDateRange" placeholder="选择起始时间" style="width: 240px"></DatePicker>
           </Form-item>
           <Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
 
         </Form>
       </Row>
-
+    </Card>
+    <Card>
       <div class="order-tab">
-        <div v-for="(item,index) in orderStatus" :key="index" :class="{'current': currentStatus === item.value}" @click="orderStatusClick(item)">
-          {{item.title}}
-        </div>
+        <Tabs v-model="currentStatus" @on-click="orderStatusClick">
+          <TabPane v-for="(item,index) in orderStatus" :key="index" :label="item.title" :name="item.value">
+          </TabPane>
+        </Tabs>
       </div>
 
       <Table :loading="loading" border :columns="columns" :data="data" ref="table" class="mt_10" sortable="custom"
@@ -275,8 +267,8 @@ export default {
     },
     // 订单筛选
     orderStatusClick(item) {
-      this.currentStatus = item.value;
-      this.searchForm.orderStatus = item.value;
+      this.currentStatus = item;  // 使用参数 item
+      this.searchForm.orderStatus = item;  // 使用参数 item
       this.getDataList();
     },
   },
@@ -288,23 +280,11 @@ export default {
 
 
 <style lang="scss" scoped>
+// Tab组件样式
 .order-tab {
-  margin: 10px 20px 10px 0;
-  width: 950px;
-  height: 36px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background-color: #f0f0f0;
-  padding: 0 10px;
-  div {
-    text-align: center;
-    padding: 4px 12px;
-    border-radius: 4px;
-    cursor: pointer;
-  }
-  .current {
-    background-color: #ffffff;
+  margin-top: 20px;
+  ::v-deep .ivu-tabs-tab {
+    font-size: 14px;
   }
 }
 </style>

manager/src/views/order/order/orderList.vue

@@ -15,7 +15,7 @@
             v-model="searchForm.orderSn"
             placeholder="请输入订单号"
             clearable
-            style="width: 160px"
+            style="width: 240px"
           />
         </Form-item>
         <Form-item label="会员名称" prop="buyerName">
@@ -24,7 +24,7 @@
             v-model="searchForm.buyerName"
             placeholder="请输入会员名称"
             clearable
-            style="width: 160px"
+            style="width: 240px"
           />
         </Form-item>
 
@@ -33,7 +33,7 @@
             v-model="searchForm.orderPromotionType"
             placeholder="请选择"
             clearable
-            style="width: 160px"
+            style="width: 240px"
           >
             <Option value="NORMAL">普通订单</Option>
             <Option value="PINTUAN">拼团订单</Option>
@@ -50,26 +50,9 @@
             clearable
             @on-change="selectDateRange"
             placeholder="选择起始时间"
-            style="width: 160px"
+            style="width: 240px"
           ></DatePicker>
         </Form-item>
-<!--        <Form-item label="订单状态" prop="orderStatus">-->
-<!--          <Select-->
-<!--            v-model="searchForm.orderStatus"-->
-<!--            placeholder="请选择"-->
-<!--            clearable-->
-<!--            style="width: 160px"-->
-<!--          >-->
-<!--            <Option value="UNPAID">未付款</Option>-->
-<!--            <Option value="PAID">已付款</Option>-->
-<!--            <Option value="UNDELIVERED">待发货</Option>-->
-<!--            <Option value="DELIVERED">已发货</Option>-->
-<!--            <Option value="COMPLETED">已完成</Option>-->
-<!--            <Option value="TAKE">待核验</Option>-->
-<!--            <Option value="CANCELLED">已关闭</Option>-->
-<!--            <Option value="STAY_PICKED_UP">待自提</Option>-->
-<!--          </Select>-->
-<!--        </Form-item>-->
         <Button
           @click="handleSearch"
           type="primary"
@@ -78,16 +61,17 @@
           >搜索</Button
         >
       </Form>
+    </Card>
+    <Card>
+      <div class="order-tab">
+        <Tabs v-model="currentStatus" @on-click="orderStatusClick">
+          <TabPane v-for="(item,index) in orderStatus" :key="index" :label="item.title" :name="item.value">
+          </TabPane>
+        </Tabs>
+      </div>
       <div>
         <Button @click="exportOrder" type="info" class="export">导出订单</Button>
       </div>
-
-      <div class="order-tab">
-        <div v-for="(item,index) in orderStatus" :key="index" :class="{'current': currentStatus === item.value}" @click="orderStatusClick(item)">
-          {{item.title}}
-        </div>
-      </div>
-
       <Table
         :loading="loading"
         border
@@ -419,9 +403,9 @@ export default {
 
     },
     // 订单筛选
-    orderStatusClick(item) {
-      this.currentStatus = item.value;
-      this.searchForm.orderStatus = item.value;
+    orderStatusClick(name) {
+      this.currentStatus = name;
+      this.searchForm.orderStatus = name;
       this.getDataList();
     },
   },
@@ -437,23 +421,15 @@ export default {
 .export-excel-wrapper {
   display: inline;
 }
+
+// Tab组件样式
 .order-tab {
-  width: 950px;
-  height: 36px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background-color: #f0f0f0;
-  padding: 0 10px;
-  margin-bottom: 10px;
-  div {
-    text-align: center;
-    padding: 4px 12px;
-    border-radius: 4px;
-    cursor: pointer;
-  }
-  .current {
-    background-color: #ffffff;
+  margin-top: 20px;
+  ::v-deep .ivu-tabs-tab {
+    font-size: 14px;
   }
 }
+
+
+
 </style>