升级Vue3，iView替换ElementPlus

- 删除babel配置、更新依赖与入口初始化
- 全量替换UI组件、样式适配，新增迁移文档与标签/过滤器自动化替换脚本

seller/src/views/promotion/coupon/coupon-receive.vue

@@ -1,219 +1,190 @@
 <template>
   <div class="search">
-    <Card>
-      <Button style="margin-bottom: 10px" @click="back()">返回</Button>
-      <Form
-        ref="searchForm"
-        :model="searchForm"
-        inline
-        :label-width="75"
-        class="search-form mb_10"
-      >
-        <Form-item label="优惠券名称" prop="couponName">
-          <Input
-            type="text"
+    <el-button style="margin-bottom: 10px" @click="back()">返回</el-button>
+
+    <el-card>
+      <el-form ref="searchForm" :model="searchForm" inline label-width="75px" class="search-form mb_10">
+        <el-form-item label="优惠券名称" prop="couponName">
+          <el-input
             v-model="searchForm.couponName"
             placeholder="请输入优惠券名称"
             clearable
             style="width: 240px"
           />
-        </Form-item>
-        <Form-item label="会员名称" prop="memberName">
-          <Input
-            type="text"
+        </el-form-item>
+        <el-form-item label="会员名称" prop="memberName">
+          <el-input
             v-model="searchForm.memberName"
             placeholder="请输入会员名称"
             clearable
             style="width: 240px"
           />
-        </Form-item>
-        <Form-item label="优惠券状态" prop="memberCouponStatus">
-          <Select
-            v-model="searchForm.memberCouponStatus"
-            placeholder="请选择"
-            clearable
-            style="width: 240px"
-          >
-            <Option value="NEW">已领取</Option>
-            <Option value="USED">已使用</Option>
-            <Option value="EXPIRE">已过期</Option>
-            <Option value="CLOSED">已作废</Option>
-          </Select>
-        </Form-item>
-        <Form-item label="活动时间">
-          <DatePicker
+        </el-form-item>
+        <el-form-item label="获取方式" prop="getType">
+          <el-select v-model="searchForm.getType" placeholder="请选择" clearable style="width: 240px">
+            <el-option label="免费获取" value="FREE" />
+            <el-option label="活动获取" value="ACTIVITY" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="优惠券状态" prop="memberCouponStatus">
+          <el-select v-model="searchForm.memberCouponStatus" placeholder="请选择" clearable style="width: 240px">
+            <el-option label="已领取" value="NEW" />
+            <el-option label="已使用" value="USED" />
+            <el-option label="已过期" value="EXPIRE" />
+            <el-option label="已作废" value="CLOSED" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="活动时间">
+          <el-date-picker
             v-model="selectDate"
             type="daterange"
             clearable
+            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
+          />
+        </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-if="refreshTable"
-        :loading="loading"
-        border
-        :columns="columns"
-        :data="data"
         ref="table"
+        v-loading="loading"
+        border
+        :data="data"
         class="mt_10"
-        @on-selection-change="changeSelect"
+        style="width: 100%"
+        @selection-change="changeSelect"
       >
-      </Table>
-      <Row type="flex" justify="end" class="mt_10">
-        <Page
-          :current="searchForm.pageNumber"
+        <el-table-column prop="memberName" label="会员名称" min-width="130" fixed="left" />
+        <el-table-column prop="couponName" label="优惠券名称" min-width="100" show-overflow-tooltip />
+        <el-table-column label="发布店铺" min-width="100">
+          <template #default="{ row }">
+            <span v-if="row">{{ (row.storeName === "platform" && "平台") || row.storeName }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="面额/折扣" width="100">
+          <template #default="{ row }">
+            <priceColorScheme
+              v-if="row && row.price"
+              :value="row.price"
+              :color="$mainColor"
+            />
+            <span v-else-if="row">{{ row.discount }}折</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="consumeThreshold" label="使用门槛" width="130" />
+        <el-table-column label="获取方式" width="120">
+          <template #default="{ row }">
+            <template v-if="row">
+              <el-tag v-if="row.getType === 'FREE'" type="danger">免费获取</el-tag>
+              <el-tag v-else-if="row.getType === 'ACTIVITY'" type="warning">活动获取</el-tag>
+              <el-tag v-else-if="row.getType === 'INSIDE'" type="success">内购</el-tag>
+              <el-tag v-else>未知</el-tag>
+            </template>
+          </template>
+        </el-table-column>
+        <el-table-column label="会员优惠券状态" width="130">
+          <template #default="{ row }">
+            <template v-if="row">
+              <el-tag v-if="row.memberCouponStatus == 'NEW'" type="primary">已领取</el-tag>
+              <el-tag v-else-if="row.memberCouponStatus == 'USED'" type="success">已使用</el-tag>
+              <el-tag v-else-if="row.memberCouponStatus == 'EXPIRE'" type="danger">已过期</el-tag>
+              <el-tag v-else-if="row.memberCouponStatus == 'CLOSED'" type="info">已作废</el-tag>
+              <el-tag v-else type="danger">未知</el-tag>
+            </template>
+          </template>
+        </el-table-column>
+        <el-table-column label="优惠券类型" width="120">
+          <template #default="{ row }">
+            <template v-if="row">
+              <el-tag v-if="row.couponType === 'DISCOUNT'" type="warning">打折</el-tag>
+              <el-tag v-else-if="row.couponType === 'PRICE'" type="danger">减免现金</el-tag>
+              <el-tag v-else>未知</el-tag>
+            </template>
+          </template>
+        </el-table-column>
+        <el-table-column label="品类描述" width="120">
+          <template #default="{ row }">
+            <template v-if="row">
+              <el-tag v-if="row.scopeType == 'ALL'">全品类</el-tag>
+              <el-tag v-else-if="row.scopeType == 'PORTION_GOODS_CATEGORY'" type="warning">商品分类</el-tag>
+              <el-tag v-else-if="row.scopeType == 'PORTION_SHOP_CATEGORY'" type="danger">店铺分类</el-tag>
+              <el-tag v-else-if="row.scopeType == 'PORTION_GOODS'" type="danger">指定商品</el-tag>
+              <el-tag v-else type="danger">未知</el-tag>
+            </template>
+          </template>
+        </el-table-column>
+        <el-table-column label="有效时间" width="150">
+          <template #default="{ row }">
+            <template v-if="row">
+              <span v-if="row.getType === 'ACTIVITY' && row.rangeDayType === 'DYNAMICTIME'">长期有效</span>
+              <div v-else-if="row.startTime && row.endTime">
+                {{ row.startTime }}<br />{{ row.endTime }}
+              </div>
+            </template>
+          </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"
-          :page-size="searchForm.pageSize"
-          @on-change="changePage"
-          @on-page-size-change="changePageSize"
-          :page-size-opts="[10, 20, 50]"
+          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 { getCouponReceiveList } from "@/api/promotion";
-import {
-  memberPromotionsStatusRender,
-  promotionsScopeTypeRender,
-} from "@/utils/promotions";
-
 export default {
   name: "coupon-recevie",
-  data() {
-    return {
-      loading: true, // 表单加载状态
-      searchForm: {
-        // 搜索框初始化对象
-        pageNumber: 1, // 当前页数
-        pageSize: 10, // 页面大小
-        sort: "create_time", // 默认排序字段
-        order: "desc", // 默认排序方式
-        getType: "", // 默认排序方式
-        couponId: this.$route.query.couponId, // 优惠券id
-      },
-      selectList: [], // 多选数据
-      selectCount: 0, // 多选计数
-      columns: [
-        // 表头
-        {
-          title: "会员名称",
-          key: "memberName",
-          fixed: "left",
-        },
-        {
-          title: "优惠券名称",
-          key: "couponName",
-          minWidth: 100,
-          tooltip: true,
-        },
-        {
-          title: "面额/折扣",
-          key: "price",
-          width: 100,
-          render: (h, params) => {
-            if (params.row.price) {
-              return h("priceColorScheme", {props:{value:params.row.price,color:this.$mainColor}} );
-            } else {
-              return h("div", params.row.discount + "折");
-            }
-          },
-        },
-
-        {
-          title: "使用门槛",
-          key: "consumeThreshold",
-          width: 130,
-        },
-        {
-          title: "会员优惠券状态",
-          width: 130,
-          key: "memberCouponStatus",
-          render: (h, params) => {
-            return memberPromotionsStatusRender(
-              h,
-              params.row.memberCouponStatus
-            );
-          },
-        },
-        {
-          title: "优惠券类型",
-          key: "couponType",
-          width: 120,
-          render: (h, params) => {
-            if (params.row.couponType === "DISCOUNT") {
-              return h("Tag", { props: { color: "orange" } }, "打折");
-            } else if (params.row.couponType === "PRICE") {
-              return h("Tag", { props: { color: "magenta" } }, "减免现金");
-            } else {
-              return h("Tag", { props: { color: "purple" } }, "未知");
-            }
-          },
-        },
-        {
-          title: "品类描述",
-          key: "scopeType",
-          width: 120,
-          render: (h, params) => {
-            return promotionsScopeTypeRender(h, params);
-          },
-        },
-        {
-          title: "有效时间",
-          width: 150,
-          render: (h, params) => {
-            if (
-              params?.row?.getType === "ACTIVITY" &&
-              params?.row?.rangeDayType === "DYNAMICTIME"
-            ) {
-              return h("div", "长期有效");
-            } else if (params?.row?.startTime && params?.row?.endTime) {
-              return h("div", {
-                domProps: {
-                  innerHTML:
-                    params.row.startTime + "<br/>" + params.row.endTime,
-                },
-              });
-            }
-          },
-        },
-      ],
-      data: [], // 表单数据
-      total: 0, // 表单数据总数
-      refreshTable: true, // 修改选中状态后刷新表格
-      selectDate: [], //选中的信息
-    };
-  },
   props: {
     promotionStatus: {
       type: String,
       default: "",
     },
   },
+  data() {
+    return {
+      loading: true,
+      searchForm: {
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "create_time",
+        order: "desc",
+        getType: "",
+        couponId: this.$route.query.couponId,
+      },
+      selectList: [],
+      selectCount: 0,
+      data: [],
+      total: 0,
+      refreshTable: true,
+      selectDate: [],
+    };
+  },
   watch: {
     $route(e) {
-      // 监听路由，参数变化调取接口
       this.searchForm.couponId = e.query.couponId;
       if (this.couponId) {
         this.getDataList();
       } else {
-        this.$refs.form.resetFields();
+        this.$refs.searchForm?.resetFields();
       }
     },
   },
@@ -223,40 +194,29 @@ export default {
       this.$router.go(-1);
     },
     check() {
-      // 选中的优惠券
       this.$emit("selected", this.selectList);
     },
-    // 初始化数据
     init() {
       this.getDataList();
     },
-    changePage(v) {
-      // 改变页码
-      this.searchForm.pageNumber = v;
+    changePage() {
       this.getDataList();
     },
-    changePageSize(v) {
-      // 改变页数
+    changePageSize() {
       this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = v;
       this.getDataList();
     },
     handleSearch() {
-      // 搜索
       this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 10;
+      this.searchForm.pageSize = 20;
       this.getDataList();
     },
-    /**
-     * 选择优惠券
-     */
     changeSelect(e) {
       this.selectList = e;
       this.selectCount = e.length;
       if (this.getType === "ACTIVITY") this.check();
     },
     getDataList() {
-      // 获取数据
       this.loading = true;
       if (this.selectDate && this.selectDate[0] && this.selectDate[1]) {
         this.searchForm.startTime = this.selectDate[0].getTime();
@@ -268,13 +228,10 @@ export default {
       getCouponReceiveList(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;
-      this.loading = false;
     },
   },
   mounted() {