manager 升级到vue3

manager/src/views/seller/bill/accountStatementBill.vue

@@ -1,26 +1,77 @@
 <template>
   <div class="search">
-    <Card>
-      <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: 240px" />
-        </Form-item>
-        <Form-item label="出帐时间" prop="createTime">
-          <DatePicker v-model="selectDate" type="daterange" format="yyyy-MM-dd HH:mm:ss" clearable @on-change="selectDateRange" placeholder="选择起始时间" style="width: 240px">
-          </DatePicker>
-        </Form-item>
+    <el-card>
+      <el-form ref="searchForm" :model="searchForm" inline label-width="70px" class="search-form" @keyup.enter="handleSearch">
+        <el-form-item label="账单编号" prop="sn">
+          <el-input v-model="searchForm.sn" placeholder="请输入账单编号" clearable style="width: 240px" />
+        </el-form-item>
+        <el-form-item label="出帐时间" prop="createTime">
+          <el-date-picker
+            v-model="selectDate"
+            type="daterange"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            clearable
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            style="width: 240px"
+            @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>
 
-        <Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
-      </Form>
-      </Card>
-    <Card>
-      <Table :loading="loading" border :columns="columns" :data="data" ref="table" class="mt_10" @on-selection-change="changeSelect">
-      </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="[20, 50, 100]"
-          size="small" show-total show-elevator show-sizer></Page>
-      </Row>
-    </Card>
+    <el-card>
+      <el-table
+        ref="table"
+        v-loading="loading"
+        border
+        :data="data"
+        class="mt_10"
+        style="width: 100%"
+        @selection-change="changeSelect"
+      >
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column prop="sn" label="账单号" min-width="200" show-overflow-tooltip />
+        <el-table-column prop="createTime" label="生成时间" width="120" />
+        <el-table-column label="结算时间段" width="200">
+          <template #default="{ row }">
+            <span v-if="row">{{ row.startTime }}~{{ row.endTime }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="storeName" label="店铺名称" min-width="120" show-overflow-tooltip />
+        <el-table-column label="结算金额" width="130">
+          <template #default="{ row }">
+            <priceColorScheme v-if="row" :value="row.billPrice" :color="$mainColor" />
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" width="100">
+          <template #default="{ row }">
+            <el-tag v-if="row" :type="billStatusTagType(row.billStatus)">{{ billStatusText(row.billStatus) }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="120" align="center" fixed="right">
+          <template #default="{ row }">
+            <a v-if="row" class="link-text" @click="detail(row)">详细</a>
+          </template>
+        </el-table-column>
+      </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"
+          layout="total, sizes, prev, pager, next, jumper"
+          size="small"
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
+      </div>
+    </el-card>
   </div>
 </template>
 
@@ -29,162 +80,74 @@ import * as API_Shop from "@/api/shops";
 
 export default {
   name: "bill",
-  components: {},
   data() {
     return {
-      loading: true, // 表单加载状态
+      loading: true,
       searchForm: {
-        // 搜索框初始化对象
-        pageNumber: 1, // 当前页数
-        pageSize: 20, // 页面大小
-        sort: "createTime", // 默认排序字段
-        order: "desc", // 默认排序方式
-        startDate: "", // 起始时间
-        endDate: "", // 终止时间
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "createTime",
+        order: "desc",
+        startDate: "",
+        endDate: "",
       },
-      selectDate: null, // 选择一个事件段
-      selectList: [], // 多选数据
-      selectCount: 0, // 多选计数
-      columns: [
-        // 表头
-        {
-          type: "selection",
-          width: 60,
-          align: "center",
-        },
-        {
-          title: "账单号",
-          key: "sn",
-          minWidth: 200,
-          tooltip: true,
-        },
-        {
-          title: "生成时间",
-          key: "createTime",
-          width: 120,
-        },
-        {
-          title: "结算时间段",
-          key: "startTime",
-          width: 200,
-          render: (h, params) => {
-            return h("div", params.row.startTime + "~" + params.row.endTime);
-          },
-        },
-        {
-          title: "店铺名称",
-          key: "storeName",
-          minWidth: 120,
-          tooltip: true,
-        },
-
-        {
-          title: "结算金额",
-          key: "billPrice",
-          width: 130,
-          render: (h, params) => {
-            return h("priceColorScheme", {props:{value:params.row.billPrice,color:this.$mainColor}} );
-          },
-
-        },
-        {
-          title: "状态",
-          key: "billStatus",
-          width: 100,
-          render: (h, params) => {
-            if (params.row.billStatus == "OUT") {
-              return h("Tag", {props: {color: "blue",},},"已出账");
-            } else if (params.row.billStatus == "CHECK") {
-              return h("Tag", {props: {color: "geekblue",},},"已对账");
-            } else if (params.row.billStatus == "EXAMINE") {
-              return h("Tag", {props: {color: "purple",},},"已审核");
-            } else {
-              return h("Tag", {props: {color: "green",},},"已付款");
-            }
-          },
-        },
-        {
-          title: "操作",
-          key: "action",
-          align: "center",
-          fixed: "right",
-          width: 120,
-          render: (h, params) => {
-            return h("div", { class: "ops" }, [
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                  },
-                  on: {
-                    click: () => {
-                      this.detail(params.row);
-                    },
-                  },
-                },
-                "详细"
-              ),
-            ]);
-          },
-        },
-      ],
-      data: [], // 表单数据
-      total: 0, // 表单数据总数
+      selectDate: null,
+      selectList: [],
+      selectCount: 0,
+      data: [],
+      total: 0,
     };
   },
   methods: {
-    // 初始化数据
+    billStatusText(v) {
+      const map = { OUT: "已出账", CHECK: "已对账", EXAMINE: "已审核", COMPLETE: "已付款" };
+      return map[v] || "已付款";
+    },
+    billStatusTagType(v) {
+      const map = { OUT: "primary", CHECK: "", EXAMINE: "warning", COMPLETE: "success" };
+      return map[v] || "success";
+    },
     init() {
       this.getDataList();
     },
-    // 分页 改变页码
     changePage(v) {
       this.searchForm.pageNumber = v;
       this.getDataList();
       this.clearSelectAll();
     },
-    // 分页 改变页数
     changePageSize(v) {
-      this.searchForm.pageNumber = 1
+      this.searchForm.pageNumber = 1;
       this.searchForm.pageSize = v;
       this.getDataList();
     },
-    // 搜索
     handleSearch() {
       this.searchForm.pageNumber = 1;
       this.getDataList();
     },
-    // 清除选中状态
     clearSelectAll() {
-      this.$refs.table.selectAll(false);
+      this.$refs.table?.clearSelection();
     },
-    // 选中回调
     changeSelect(e) {
       this.selectList = e;
       this.selectCount = e.length;
     },
-    // 起止时间从新赋值
     selectDateRange(v) {
-      if (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;
-
-      this.searchForm.startTime &&
-        (this.searchForm.startTime = this.$options.filters.unixToDate(
-          this.searchForm.startTime / 1000
-        ));
-      this.searchForm.endTime &&
-        (this.searchForm.endTime = this.$options.filters.unixToDate(
-          this.searchForm.endTime / 1000
-        ));
+      if (this.searchForm.startTime) {
+        this.searchForm.startTime = this.$filters.unixToDate(this.searchForm.startTime / 1000);
+      }
+      if (this.searchForm.endTime) {
+        this.searchForm.endTime = this.$filters.unixToDate(this.searchForm.endTime / 1000);
+      }
       this.searchForm.billStatus = "CHECK";
       API_Shop.getBuyBillPage(this.searchForm).then((res) => {
         this.loading = false;
@@ -193,15 +156,11 @@ export default {
           this.total = res.result.total;
         }
       });
-      this.total = this.data.length;
-      this.loading = false;
     },
-    // 详情
     detail(v) {
-      let id = v.id;
       this.$router.push({
         name: "bill-detail",
-        query: { id: id },
+        query: { id: v.id },
       });
     },
   },
@@ -211,17 +170,9 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-::v-deep .ivu-col {
-  min-height: 100vh;
-}
-.ops a {
+.link-text {
   color: #2d8cf0;
   cursor: pointer;
   text-decoration: none;
 }
-.ops span {
-  display: inline-block;
-  margin: 0 8px;
-  color: #dcdee2;
-}
 </style>