vue3-element-admin/src/views/oms/order/index.vue

<template>
  <div class="app-container">
    <!-- 搜索表单 -->
    <el-form
        ref="queryForm"
        :model="queryParams"
        :inline="true"
        size="small"
    >
      <el-form-item prop="orderSn">
        <el-input v-model="queryParams.orderSn" placeholder="订单号"/>
      </el-form-item>

      <el-form-item>
        <el-date-picker
            v-model="dateRange"
            style="width: 240px"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
        />
      </el-form-item>

      <el-form-item>
        <el-select
            v-model="queryParams.status"
            class="filter-item"
            placeholder="订单状态"
        >
          <el-option
              v-for="(key, value) in orderStatusMap"
              :label="key"
              :value="value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :icon="Search" @click="handleQuery">查询</el-button>
        <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table
        ref="dataTable"
        v-loading="loading"
        :data="pageList"
        border
    >
      <el-table-column type="expand" width="100" label="订单商品">
        <template #default="scope">
          <el-table
              :data="scope.row.orderItems"
              size="small"
              border
          >
            <el-table-column label="序号" type="index" width="100"/>
            <el-table-column label="商品编号" align="center" prop="skuCode"/>
            <el-table-column label="商品规格" align="center" prop="skuName"/>
            <el-table-column label="图片" prop="skuPic">
              <template slot-scope="scope">
                <img :src="scope.row.skuPic" width="40">
              </template>
            </el-table-column>
            <el-table-column align="center" label="单价" prop="skuPrice">
              <template slot-scope="scope">{{ scope.row.skuPrice | moneyFormatter }}</template>
            </el-table-column>
            <el-table-column align="center" label="数量" prop="skuQuantity">
              <template slot-scope="scope">{{ scope.row.skuQuantity }}</template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>

      <el-table-column align="center" prop="orderSn" label="订单编号"/>

      <el-table-column align="center" prop="memberId" label="会员ID"/>

      <el-table-column align="center" label="订单来源">
        <template #default="scope">
          <el-tag>{{ scope.row.sourceType }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" label="订单状态">
        <template #default="scope">
          <el-tag>{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" prop="orderPrice" label="订单金额">
        <template #default="scope">
          {{ scope.row.totalAmount }}
        </template>
      </el-table-column>

      <el-table-column align="center" prop="payPrice" label="支付金额">
        <template #default="scope">
          {{ scope.row.payAmount  }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="支付方式">
        <template #default="scope">
          <el-tag>{{ scope.row.payType  }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" prop="gmtCreate" label="创建时间"/>

      <el-table-column align="center" label="操作">
        <template #default="scope">
          <el-button size="mini" @click="viewDetail(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页工具条 -->
    <pagination
        v-show="total>0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="handleQuery"
    />
  </div>
</template>

<script setup lang="ts">

import {listOrdersWithPage, getOrderDetail} from '@/api/oms/order'
import {onMounted, reactive, ref, toRefs} from "vue"
import {ElForm, ElMessage, ElMessageBox} from "element-plus"
import {Search, Plus, Edit, Refresh, Delete} from '@element-plus/icons'

const dataForm = ref(ElForm)  // 属性名必须和元素的ref属性值一致

const orderSourceMap = {
  1: '微信小程序',
  2: 'APP',
  3: 'PC'
}

const orderStatusMap = {
  101: '待付款',
  102: '用户取消',
  103: '系统取消',
  201: '已付款',
  202: '申请退款',
  203: '已退款',
  301: '待发货',
  401: '已发货',
  501: '用户收货',
  502: '系统收货',
  901: '已完成'
}

const payTypeMap = {
  1: '支付宝',
  2: '微信',
  3: '会员余额'
}


const state = reactive({
  loading: false,
  ids: [],
  single: true,
  multiple: true,
  dateRange: [],
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    orderSn: undefined
  },
  pageList: [],
  total: 0,
  dialog: {
    title: '订单详情',
    visible: false
  },
  dialogVisible: false,
  orderDetail: {
    order: {
      refundAmount: undefined,
      refundType: undefined,
      refundNote: undefined,
      gmtRefund: undefined,
      confirmTime: undefined,
      gmtDelivery: undefined,
      shipSn: undefined,
      shipChannel: undefined,
      gmtPay: undefined,
      integralPrice: undefined,
      payChannel: undefined,
      skuPrice : undefined,
      couponPrice: undefined,
      freightPrice: undefined,
      orderPrice : undefined,
      couponPrice: undefined,
    },
    member: {},
    orderItems: []
  },
  orderSourceMap,
  orderStatusMap,
  payTypeMap
})

const {loading, single, multiple, queryParams, pageList, total, dialog, orderDetail} = toRefs(state)

function handleQuery() {
  state.loading = true
  listOrdersWithPage(state.queryParams).then(response => {
    const {data, total} = response as any
    state.pageList = data
    state.total = total
    state.loading = false
  })
}

function resetQuery() {
  state.queryParams = {
    pageNum: 1,
    pageSize: 10,
    orderSn: undefined
  }
  handleQuery()
}

function viewDetail(row: any) {
  state.dialog.visible = true
  getOrderDetail(row.id).then(response => {
    state.orderDetail = response.data
  })
}

function cancel() {
  state.dialog.visible = false
}

onMounted(() => {
  handleQuery()
})
</script>

<style scoped>

</style>