manager 升级到vue3

manager/src/views/distribution/distributionOrder.vue

@@ -1,258 +1,281 @@
 <template>
   <div>
-    <Card>
-      <Form ref="searchForm" @keydown.enter.native="handleSearch" :model="searchForm" inline :label-width="70" class="search-form">
-        <Form-item label="订单编号"  prop="orderSn">
-          <Input
-            type="text"
+    <el-card>
+      <el-form
+        ref="searchForm"
+        :model="searchForm"
+        inline
+        label-width="70px"
+        class="search-form"
+        @keyup.enter="handleSearch"
+      >
+        <el-form-item label="订单编号" prop="orderSn">
+          <el-input
             v-model="searchForm.orderSn"
             placeholder="请输入订单编号"
             clearable
             style="width: 240px"
           />
-        </Form-item>
-        <Form-item label="分销商" prop="distributionName">
-          <Input
-            type="text"
+        </el-form-item>
+        <el-form-item label="分销商" prop="distributionName">
+          <el-input
             v-model="searchForm.distributionName"
             placeholder="请输入分销商名称"
             clearable
             style="width: 240px"
           />
-        </Form-item>
-        <Form-item label="店铺名称">
-          <Select v-model="searchForm.storeId" placeholder="请选择" @on-query-change="searchChange" filterable
-                  clearable style="width: 240px">
-            <Option v-for="item in shopList" :value="item.id" :key="item.id">{{ item.storeName }}</Option>
-          </Select>
-        </Form-item>
-        <Form-item label="订单时间">
-          <DatePicker type="daterange" v-model="timeRange" format="yyyy-MM-dd" 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" border :columns="columns" :data="data" ref="table" class="mt_10">
-        <template slot-scope="{row}" slot="goodsMsg">
-          <div class="goods-msg">
-            <img :src="row.image" width="60" height="60" alt="">
-            <div>
-              <div class="div-zoom">
-                <a @click="linkTo(row.goodsId,row.skuId)">{{row.goodsName}}</a>
-              </div>
-              <div style="color:#999;font-size:10px">数量：x{{row.num}}</div>
-              <Poptip trigger="hover" title="扫码在手机中查看" transfer>
-                <div slot="content">
-                  <vue-qr :text="wapLinkTo(row.goodsId,row.skuId)"  :margin="0" colorDark="#000" colorLight="#fff" :size="150"></vue-qr>
+        </el-form-item>
+        <el-form-item label="店铺名称">
+          <el-select
+            v-model="searchForm.storeId"
+            placeholder="请选择"
+            filterable
+            remote
+            :remote-method="searchChange"
+            clearable
+            style="width: 240px"
+          >
+            <el-option
+              v-for="item in shopList"
+              :key="item.id"
+              :label="item.storeName"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="订单时间">
+          <el-date-picker
+            v-model="timeRange"
+            type="daterange"
+            value-format="YYYY-MM-DD"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            placeholder="选择时间"
+            style="width: 240px"
+          />
+        </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
+        ref="table"
+        v-loading="loading"
+        border
+        :data="data"
+        class="mt_10"
+        style="width: 100%"
+      >
+        <el-table-column
+          prop="orderSn"
+          label="订单编号"
+          min-width="180"
+          fixed="left"
+          show-overflow-tooltip
+        />
+        <el-table-column label="商品信息" min-width="200">
+          <template #default="{ row }">
+            <div v-if="row" class="goods-msg">
+              <img :src="row.image" width="60" height="60" alt="" />
+              <div>
+                <div class="div-zoom">
+                  <a class="link-text" @click="linkTo(row.goodsId, row.skuId)">{{ row.goodsName }}</a>
                 </div>
-                <img src="../../assets/qrcode.svg" class="hover-pointer" width="20" height="20" alt="">
-              </Poptip>
+                <div style="color: #999; font-size: 10px">数量：x{{ row.num }}</div>
+                <el-popover trigger="hover" title="扫码在手机中查看" placement="top" width="180">
+                  <template #reference>
+                    <img
+                      src="../../assets/qrcode.svg"
+                      class="hover-pointer"
+                      width="20"
+                      height="20"
+                      alt="qrcode"
+                    />
+                  </template>
+                  <vue-qr
+                    :text="wapLinkTo(row.goodsId, row.skuId)"
+                    :margin="0"
+                    color-dark="#000"
+                    color-light="#fff"
+                    :size="150"
+                  />
+                </el-popover>
+              </div>
             </div>
-          </div>
-        </template>
-        <template slot-scope="{row}" slot="distributionOrderStatus">
-          <Tag :color="filterStatusColor(row.distributionOrderStatus)">{{filterStatus(row.distributionOrderStatus)}}</Tag>
-        </template>
-      </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>
+          </template>
+        </el-table-column>
+        <el-table-column prop="distributionName" label="分销商" min-width="100" show-overflow-tooltip />
+        <el-table-column prop="storeName" label="店铺名称" min-width="100" show-overflow-tooltip />
+        <el-table-column label="状态" min-width="90">
+          <template #default="{ row }">
+            <el-tag v-if="row" :type="filterStatusTagType(row.distributionOrderStatus)">
+              {{ filterStatus(row.distributionOrderStatus) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="佣金金额" min-width="100">
+          <template #default="{ row }">
+            <span v-if="row" :style="{ color: $mainColor }">
+              {{ $filters.unitPrice(row.rebate, "￥") }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" label="创建时间" min-width="160" fixed="right" />
+      </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>
 
 <script>
-  import {
-    getDistributionOrder
-  } from "@/api/distribution";
-  import {orderStatusList} from './dataJson'
-  import {getShopListData} from '@/api/shops'
-  import vueQr from 'vue-qr'
+import { getDistributionOrder } from "@/api/distribution";
+import { orderStatusList } from "./dataJson";
+import { getShopListData } from "@/api/shops";
+import vueQr from "vue-qr";
 
-  export default {
-    name: "distributionOrder",
-    components: {
-         "vue-qr":vueQr
+export default {
+  name: "distributionOrder",
+  components: { vueQr },
+  data() {
+    return {
+      timeRange: [],
+      orderStatusList,
+      shopList: [],
+      distributionId: this.$route.query.id,
+      loading: true,
+      searchForm: {
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "create_time",
+        order: "desc",
+      },
+      data: [],
+      total: 0,
+    };
+  },
+  watch: {
+    $route(e) {
+      this.distributionId = e.query.id ? e.query.id : undefined;
+      this.getDataList();
     },
-    data() {
-      return {
-        timeRange: [], // 范围时间
-        orderStatusList, // 订单状态列表
-        shopList: [], // 店铺列表
-        distributionId: this.$route.query.id, // 分销id
-        loading: true, // 表单加载状态
-        searchForm: { // 搜索框初始化对象
-          pageNumber: 1, // 当前页数
-          pageSize: 20, // 页面大小
-          sort:"create_time",
-          order:"desc"
-        },
-        columns: [
-          {
-            title: "订单编号",
-            key: "orderSn",
-            minWidth: 180,
-            fixed: "left",
-            tooltip: true
-          },
-          {
-            title: '商品信息',
-            slot: 'goodsMsg',
-            minWidth: 150
-          },
-
-          {
-            title: "分销商",
-            key: "distributionName",
-            tooltip: true,
-            minWidth:80,
-          },
-          {
-            title: "店铺名称",
-            key: "storeName",
-            minWidth:80,
-            tooltip: true
-          },
-          {
-            title: "状态",
-            slot: "distributionOrderStatus",
-            minWidth:80,
-          },
-          {
-            title: "佣金金额",
-            key: "rebate",
-            minWidth:80,
-            sortable: false,
-            render: (h, params) => {
-              return h("priceColorScheme", {props:{value:params.row.rebate,color:this.$mainColor}} );
-            },
-
-
-          },
-          {
-            fixed: "right",
-            title: "创建时间",
-            key: "createTime",
-            minWidth:100,
-            sortable: false,
-          }
-        ],
-        data: [], // 表单数据
-        total: 0 // 表单数据总数
-      };
+  },
+  methods: {
+    init() {
+      this.getDataList();
+      this.getShopList();
     },
-    methods: {
-      // 初始化数据
-      init() {
-        this.getDataList();
-        this.getShopList()
-      },
-      //分页 改变页码
-      changePage(v) {
-        this.searchForm.pageNumber = v;
-        this.getDataList();
-      },
-      // 分页 改变页数
-      changePageSize(v) {
-        this.searchForm.pageSize = v;
-        this.getDataList();
-      },
-      // 搜索
-      handleSearch() {
-        this.searchForm.pageNumber = 1;
-        this.searchForm.pageSize = 20;
-        this.getDataList();
-      },
-      // 获取列表数据
-      getDataList() {
-        this.searchForm.distributionId = this.distributionId;
-        this.loading = true;
-        if (this.timeRange && this.timeRange[0]) {
-          let startTime = this.timeRange[0]
-          let endTime = this.timeRange[1]
-          this.searchForm.startTime = this.$options.filters.unixToDate(startTime / 1000)
-          this.searchForm.endTime = this.$options.filters.unixToDate(endTime / 1000)
-        }
-        // 带多条件搜索参数获取表单数据 请自行修改接口
-        getDistributionOrder(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;
+    changePage() {
+      this.getDataList();
+    },
+    changePageSize() {
+      this.searchForm.pageNumber = 1;
+      this.getDataList();
+    },
+    handleSearch() {
+      this.searchForm.pageNumber = 1;
+      this.searchForm.pageSize = 20;
+      this.getDataList();
+    },
+    getDataList() {
+      this.searchForm.distributionId = this.distributionId;
+      this.loading = true;
+      if (this.timeRange && this.timeRange[0] && this.timeRange[1]) {
+        const startTime = new Date(this.timeRange[0]).getTime();
+        const endTime = new Date(this.timeRange[1]).getTime();
+        this.searchForm.startTime = this.$filters.unixToDate(startTime / 1000);
+        this.searchForm.endTime = this.$filters.unixToDate(endTime / 1000);
+      } else {
+        this.searchForm.startTime = null;
+        this.searchForm.endTime = null;
+      }
+      getDistributionOrder(this.searchForm).then((res) => {
         this.loading = false;
-      },
-      getShopList(val) { // 获取店铺列表 搜索用
-        const params = {
-          pageNumber: 1,
-          pageSize: 20,
-          storeName: ''
+        if (res.success) {
+          this.data = res.result.records;
+          this.total = res.result.total;
         }
-        if (val) {
-          params.storeName = val;
-        } else {
-          params.storeName = ''
-        }
-
-        getShopListData(params).then(res => {
-          this.shopList = res.result.records
-        })
-      },
-      searchChange(val) { // 店铺搜索，键盘点击回调
-        this.getShopList(val)
-      },
-      filterStatus (status) { // 过滤订单状态
-        const arr = [
-          {status: 'NO_COMPLETED', title: '未完成'},
-          {status: 'COMPLETE', title: '完成'},
-          {status: 'REFUND', title: '退款'},
-        ]
-        for (let i=0;i<arr.length;i++) {
-          if (arr[i].status === status) {
-            return arr[i].title;
-          }
-        }
-        return '未完成'; // 默认返回未完成
-      },
-      filterStatusColor (status) { // 状态tag标签颜色
-        const arr = [
-          {status: 'NO_COMPLETED', color: 'orange'},
-          {status: 'COMPLETE', color: 'green'},
-          {status: 'REFUND', color: 'red'},
-        ]
-        for (let i=0;i<arr.length;i++) {
-          if (arr[i].status === status) {
-            return arr[i].color;
-          }
-        }
-        return 'orange'; // 默认返回橙色
-      }
+      });
     },
-    mounted() {
-      this.init();
+    getShopList(val) {
+      const params = {
+        pageNumber: 1,
+        pageSize: 20,
+        storeName: val || "",
+      };
+      getShopListData(params).then((res) => {
+        this.shopList = res.result.records;
+      });
     },
-    watch: {
-      $route(e) { // 监听路由，参数变化调取接口
-        this.distributionId = e.query.id ? e.query.id : undefined;
-        this.getDataList();
+    searchChange(val) {
+      this.getShopList(val);
+    },
+    filterStatus(status) {
+      const arr = [
+        { status: "NO_COMPLETED", title: "未完成" },
+        { status: "COMPLETE", title: "完成" },
+        { status: "REFUND", title: "退款" },
+      ];
+      for (let i = 0; i < arr.length; i++) {
+        if (arr[i].status === status) {
+          return arr[i].title;
+        }
       }
-    }
-  };
+      return "未完成";
+    },
+    filterStatusTagType(status) {
+      const arr = [
+        { status: "NO_COMPLETED", type: "warning" },
+        { status: "COMPLETE", type: "success" },
+        { status: "REFUND", type: "danger" },
+      ];
+      for (let i = 0; i < arr.length; i++) {
+        if (arr[i].status === status) {
+          return arr[i].type;
+        }
+      }
+      return "warning";
+    },
+  },
+  mounted() {
+    this.init();
+  },
+};
 </script>
-<style lang="scss">
-  .goods-msg {
-    display: flex;
-    align-items: center;
-    >div{
-      margin-left: 10px;
-    }
-  }
-</style>
 
+<style lang="scss">
+.goods-msg {
+  display: flex;
+  align-items: center;
+  > div {
+    margin-left: 10px;
+  }
+}
+
+.link-text {
+  color: #409eff;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.hover-pointer {
+  cursor: pointer;
+}
+
+.mt_10 {
+  margin-top: 10px;
+}
+</style>