manager 升级到vue3

manager/src/views/member/advance/recharge.vue

@@ -1,208 +1,163 @@
 <template>
   <div class="search">
-    <Card>
-      <Form
+    <el-card>
+      <el-form
         ref="searchForm"
         :model="searchForm"
         inline
-        :label-width="70"
+        label-width="70px"
         class="search-form"
+        @keyup.enter="handleSearch"
       >
-        <Form-item label="会员名称" prop="memberName">
-          <Input
-            type="text"
+        <el-form-item label="会员名称" prop="memberName">
+          <el-input
             v-model="searchForm.memberName"
             placeholder="请输入会员名称"
             clearable
             style="width: 240px"
           />
-        </Form-item>
-        <Form-item label="充值单号" prop="rechargeSn">
-          <Input
-            type="text"
+        </el-form-item>
+        <el-form-item label="充值单号" prop="rechargeSn">
+          <el-input
             v-model="searchForm.rechargeSn"
             placeholder="请输入充值单号"
             clearable
             style="width: 240px"
           />
-        </Form-item>
-        <Form-item label="支付时间">
-          <DatePicker
+        </el-form-item>
+        <el-form-item label="支付时间">
+          <el-date-picker
             v-model="selectDate"
             type="datetimerange"
-            format="yyyy-MM-dd HH:mm:ss"
+            value-format="YYYY-MM-DD HH:mm:ss"
             clearable
-            @on-change="selectDateRange"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             placeholder="选择起始时间"
-            style="width: 240px"
-          ></DatePicker>
-        </Form-item>
-        <Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
-      </Form>
-    </Card>
-    <Card>
-      <Table
-        :loading="loading"
+            style="width: 360px"
+            @change="selectDateRange"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <el-card>
+      <el-table
+        v-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"
+        style="width: 100%"
+      >
+        <el-table-column prop="memberName" label="会员名称" min-width="120" show-overflow-tooltip />
+        <el-table-column prop="rechargeSn" label="订单号" min-width="180" show-overflow-tooltip />
+        <el-table-column label="充值金额" width="160" sortable>
+          <template #default="{ row }">
+            <priceColorScheme v-if="row" :value="row.rechargeMoney" :color="$mainColor" unit="+" />
+          </template>
+        </el-table-column>
+        <el-table-column label="充值方式" width="120">
+          <template #default="{ row }">
+            <span v-if="row">{{ rechargeWayText(row.rechargeWay) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="支付状态" width="120">
+          <template #default="{ row }">
+            <el-tag v-if="row" :type="row.payStatus === 'PAID' ? 'success' : 'danger'">
+              {{ row.payStatus === "PAID" ? "已付款" : "未付款" }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" label="充值时间" width="190" />
+        <el-table-column prop="payTime" label="支付时间" width="190" />
+      </el-table>
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :page-sizes="[20, 50, 100]"
           :total="total"
-          :page-size="searchForm.pageSize"
-          @on-change="changePage"
-          @on-page-size-change="changePageSize"
-          :page-size-opts="[20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
           size="small"
-          show-total
-          show-elevator
-          show-sizer
-        ></Page>
-      </Row>
-    </Card>
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
+      </div>
+    </el-card>
   </div>
 </template>
 
 <script>
-  import {
-    getUserRecharge,
-  } from "@/api/member";
-  export default {
-    name: "recharge",
-    data() {
-      return {
-        loading: true, // 表单加载状态
-        searchForm: {
-          // 搜索框初始化对象
-          pageNumber: 1, // 当前页数
-          pageSize: 20, // 页面大小
-          sort: "createTime", // 默认排序字段
-          order: "desc", // 默认排序方式
-          startDate: "", // 起始时间
-          endDate: "", // 终止时间
-          memberName:""
-        },
-        selectDate: null, // 选择区间时间
-        columns: [
-          {
-            title: "会员名称",
-            key: "memberName",
-            minWidth: 120,
-            tooltip: true
-          },
-          {
-            title: "订单号",
-            key: "rechargeSn",
-            minWidth: 180,
-            tooltip: true
-          },
-          {
-            title: "充值金额",
-            key: "rechargeMoney",
-            width: 160,
-            sortable: true,
-            render: (h, params) => {
-              return h("priceColorScheme", {props:{value:params.row.rechargeMoney,color:this.$mainColor,unit:"+"}} );
-            },
-          },
-          {
-            title: "充值方式",
-            key: "rechargeWay",
-            width: 120,
-            render: (h, params) => {
-              if (params.row.rechargeWay === 'ALIPAY') {
-                return h('div', [h('span', {}, '支付宝')]);
-              } else if (params.row.rechargeWay === 'WECHAT') {
-                return h('div', [h('span', {}, '微信')]);
-              } else if (params.row.rechargeWay === 'BANK_TRANSFER') {
-                return h('div', [h('span', {}, '线下转账')]);
-              } else {
-                return h('div', [h('span', {}, '')]);
-              }
-            }
-          },
-          {
-            title: "支付状态",
-            key: "payStatus",
-            align: "left",
-            width: 120,
-            sortable: false,
-            render: (h, params) => {
-              if (params.row.payStatus == "PAID") {
-                return h("Tag", {props: {color: "green",},}, "已付款");
-              } else {
-                return h("Tag", {props: {color: "red",},}, "未付款");
-              }
-            },
-          },
-          {
-            title: "充值时间",
-            key: "createTime",
-            align: "left",
-            width: 190,
-            sortable: false,
-          },
-          {
-            title: "支付时间",
-            key: "payTime",
-            align: "left",
-            width: 190,
-            sortable: false,
-          },
-        ],
-        data: [], // 表单数据
-        total: 0, // 表单数据总数
-      };
+import { getUserRecharge } from "@/api/member";
+
+export default {
+  name: "recharge",
+  data() {
+    return {
+      loading: true,
+      searchForm: {
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "createTime",
+        order: "desc",
+        startDate: "",
+        endDate: "",
+        memberName: "",
+      },
+      selectDate: null,
+      data: [],
+      total: 0,
+    };
+  },
+  methods: {
+    rechargeWayText(way) {
+      if (way === "ALIPAY") return "支付宝";
+      if (way === "WECHAT") return "微信";
+      if (way === "BANK_TRANSFER") return "线下转账";
+      return "";
+    },
+    init() {
+      this.getDataList();
+    },
+    changePage(v) {
+      this.searchForm.pageNumber = v;
+      this.getDataList();
+    },
+    changePageSize(v) {
+      this.searchForm.pageNumber = 1;
+      this.searchForm.pageSize = v;
+      this.getDataList();
     },
-    methods: {
-      // 初始化数据
-      init() {
-        this.getDataList();
-      },
-      // 分页 改变页码
-      changePage(v) {
-        this.searchForm.pageNumber = v;
-        this.getDataList();
-      },
-      // 分页 改变页数
-      changePageSize(v) {
-        this.searchForm.pageNumber = 1;
-        this.searchForm.pageSize = v;
-        this.getDataList();
-      },
-      // 搜索
     handleSearch() {
       this.searchForm.pageNumber = 1;
       this.searchForm.pageSize = 20;
       this.getDataList();
     },
-      // 时间段赋值
-      selectDateRange(v) {
-        if (v) {
-          this.searchForm.startDate = v[0];
-          this.searchForm.endDate = v[1];
-        }
-      },
-      // 获取列表数据
-      getDataList() {
-        this.loading = true;
-        getUserRecharge(this.searchForm).then((res) => {
-          this.loading = false;
-          if (res.success) {
-            this.data = res.result.records;
-            this.total = res.result.total;
-          }
-        });
-        this.total = this.data.length;
+    selectDateRange(v) {
+      if (v && v.length === 2) {
+        this.searchForm.startDate = v[0];
+        this.searchForm.endDate = v[1];
+      } else {
+        this.searchForm.startDate = "";
+        this.searchForm.endDate = "";
+      }
+    },
+    getDataList() {
+      this.loading = true;
+      getUserRecharge(this.searchForm).then((res) => {
         this.loading = false;
-      },
+        if (res.success) {
+          this.data = res.result.records;
+          this.total = res.result.total;
+        }
+      });
     },
-    mounted() {
-      this.init();
-    },
-  };
+  },
+  mounted() {
+    this.init();
+  },
+};
 </script>