订单列表页面完善

src/api/order.js

@@ -0,0 +1,8 @@
+import request from '@/utils/request'
+export function fetchList(params) {
+ return request({
+ url:'/order/list',
+ method:'get',
+ params:params
+ })
+}

src/utils/date.js

@@ -0,0 +1,24 @@
+// date.js
+export function formatDate (date, fmt) {
+ if (/(y+)/.test(fmt)) {
+ fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
+ }
+ let o = {
+ 'M+': date.getMonth() + 1,
+ 'd+': date.getDate(),
+ 'h+': date.getHours(),
+ 'm+': date.getMinutes(),
+ 's+': date.getSeconds()
+ };
+ for (let k in o) {
+ if (new RegExp(`(${k})`).test(fmt)) {
+ let str = o[k] + '';
+ fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
+ }
+ }
+ return fmt;
+}
+
+function padLeftZero (str) {
+ return ('00' + str).substr(str.length);
+}

src/views/oms/order/index.vue

@@ -7,11 +7,13 @@
  <el-button
  style="float:right"
  type="primary"
+ @click="handleSearchList()"
  size="small">
  查询搜索
  </el-button>
  <el-button
  style="float:right;margin-right: 15px"
+ @click="handleResetSearch()"
  size="small">
  重置
  </el-button>
@@ -27,23 +29,137 @@
  <el-form-item label="提交时间：">
  <el-date-picker
  v-model="listQuery.createTime"
- value-format="timestamp"
- type="datetime"
+ value-format="yyyy-MM-dd"
+ type="date"
  placeholder="选择开始时间">
  </el-date-picker>
  </el-form-item>
+ <el-form-item label="订单状态：">
+ <el-select v-model="listQuery.status" placeholder="全部" clearable>
+ <el-option v-for="item in statusOptions"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value">
+ </el-option>
+ </el-select>
+ </el-form-item>
+ <el-form-item label="订单分类：">
+ <el-select v-model="listQuery.orderType" placeholder="全部" clearable>
+ <el-option v-for="item in orderTypeOptions"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value">
+ </el-option>
+ </el-select>
+ </el-form-item>
+ <el-form-item label="订单来源：">
+ <el-select v-model="listQuery.sourceType" placeholder="全部" clearable>
+ <el-option v-for="item in sourceTypeOptions"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value">
+ </el-option>
+ </el-select>
+ </el-form-item>
  </el-form>
  </div>
  </el-card>
  <el-card class="operate-container" shadow="never">
-
+ <i class="el-icon-tickets"></i>
+ <span>数据列表</span>
  </el-card>
- <div class="table-container"></div>
- <div class="batch-operate-container"></div>
- <div class="pagination-container"></div>
+ <div class="table-container">
+ <el-table ref="orderTable"
+ :data="list"
+ style="width: 100%;"
+ v-loading="listLoading" border>
+ <el-table-column type="selection" width="60" align="center"></el-table-column>
+ <el-table-column label="订单编号" width="180" align="center">
+ <template slot-scope="scope">{{scope.row.orderSn}}</template>
+ </el-table-column>
+ <el-table-column label="提交时间" width="180" align="center">
+ <template slot-scope="scope">{{scope.row.createTime | formatCreateTime}}</template>
+ </el-table-column>
+ <el-table-column label="用户账号" align="center">
+ <template slot-scope="scope">{{scope.row.memberUsername}}</template>
+ </el-table-column>
+ <el-table-column label="订单金额" width="120" align="center">
+ <template slot-scope="scope">￥{{scope.row.totalAmount}}</template>
+ </el-table-column>
+ <el-table-column label="支付方式" width="120" align="center">
+ <template slot-scope="scope">{{scope.row.payType | formatPayType}}</template>
+ </el-table-column>
+ <el-table-column label="订单来源" width="120" align="center">
+ <template slot-scope="scope">{{scope.row.sourceType | formatSourceType}}</template>
+ </el-table-column>
+ <el-table-column label="订单状态" width="120" align="center">
+ <template slot-scope="scope">{{scope.row.status | formatStatus}}</template>
+ </el-table-column>
+ <el-table-column label="操作" width="200" align="center">
+ <template slot-scope="scope">
+ <el-button
+ size="mini"
+ @click="handleViewOrder(scope.$index, scope.row)"
+ >查看订单</el-button>
+ <el-button
+ size="mini"
+ @click="handleCloseOrder(scope.$index, scope.row)"
+ v-show="scope.row.status===0">关闭订单</el-button>
+ <el-button
+ size="mini"
+ @click="handleDeliveryOrder(scope.$index, scope.row)"
+ v-show="scope.row.status===1">订单发货</el-button>
+ <el-button
+ size="mini"
+ @click="handleViewLogistics(scope.$index, scope.row)"
+ v-show="scope.row.status===2||scope.row.status===3">订单跟踪</el-button>
+ <el-button
+ size="mini"
+ type="danger"
+ @click="handleDeleteOrder(scope.$index, scope.row)"
+ v-show="scope.row.status===4">删除订单</el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ </div>
+ <div class="batch-operate-container">
+ <el-select
+ size="small"
+ v-model="operateType" placeholder="批量操作">
+ <el-option
+ v-for="item in operateOptions"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value">
+ </el-option>
+ </el-select>
+ <el-button
+ style="margin-left: 20px"
+ class="search-button"
+ @click="handleBatchOperate()"
+ type="primary"
+ size="small">
+ 确定
+ </el-button>
+ </div>
+ <div class="pagination-container">
+ <el-pagination
+ background
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ layout="total, sizes,prev, pager, next,jumper"
+ :current-page.sync="listQuery.pageNum"
+ :page-size="listQuery.pageSize"
+ :page-sizes="[5,10,15]"
+ :total="total">
+ </el-pagination>
+ </div>
  </div>
 </template>
 <script>
+ import {fetchList} from '@/api/order'
+ import {formatDate} from '@/utils/date';
+
  const defaultListQuery = {
  pageNum: 1,
  pageSize: 5,
@@ -57,7 +173,152 @@
  export default {
  name: "orderList",
  data() {
- return {listQuery: Object.assign({}, defaultListQuery)}
+ return {
+ listQuery: Object.assign({}, defaultListQuery),
+ listLoading: true,
+ list: null,
+ total: null,
+ operateType: null,
+ statusOptions: [
+ {
+ label: '待付款',
+ value: 0
+ },
+ {
+ label: '待发货',
+ value: 1
+ },
+ {
+ label: '已发货',
+ value: 2
+ },
+ {
+ label: '已完成',
+ value: 3
+ },
+ {
+ label: '已关闭',
+ value: 4
+ }
+ ],
+ orderTypeOptions: [
+ {
+ label: '正常订单',
+ value: 0
+ },
+ {
+ label: '秒杀订单',
+ value: 1
+ }
+ ],
+ sourceTypeOptions: [
+ {
+ label: 'PC订单',
+ value: 0
+ },
+ {
+ label: 'APP订单',
+ value: 1
+ }
+ ],
+ operateOptions: [
+ {
+ label: "批量发货",
+ value: 1
+ },
+ {
+ label: "关闭订单",
+ value: 2
+ },
+ {
+ label: "删除订单",
+ value: 3
+ }
+ ],
+ }
+ },
+ created() {
+ this.getList();
+ },
+ filters: {
+ formatCreateTime(time) {
+ let date = new Date(time);
+ return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
+ },
+ formatPayType(value) {
+ if (value === 1) {
+ return '支付宝';
+ } else if (value === 2) {
+ return '微信';
+ } else {
+ return '未支付';
+ }
+ },
+ formatSourceType(value) {
+ if (value === 1) {
+ return 'APP订单';
+ } else {
+ return 'PC订单';
+ }
+ },
+ formatStatus(value) {
+ if (value === 1) {
+ return '待发货';
+ } else if (value === 2) {
+ return '已发货';
+ } else if (value === 3) {
+ return '已完成';
+ } else if (value === 4) {
+ return '已关闭';
+ } else if (value === 5) {
+ return '无效订单';
+ } else {
+ return '待付款';
+ }
+ },
+ },
+ methods: {
+ handleResetSearch() {
+ this.listQuery = Object.assign({}, defaultListQuery);
+ },
+ handleSearchList() {
+ this.listQuery.pageNum = 1;
+ this.getList();
+ },
+ handleViewOrder(index, row){},
+ handleCloseOrder(index, row){
+
+ },
+ handleDeliveryOrder(index, row){},
+ handleViewLogistics(index, row){},
+ handleDeleteOrder(index, row){},
+ handleBatchOperate(){
+ console.log(this.operateType);
+ if(this.operateType===1){
+
+ }else if(this.operateType===2){
+
+ }else if(this.operateType===3){
+
+ }
+ },
+ handleSizeChange(val){
+ this.listQuery.pageNum = 1;
+ this.listQuery.pageSize = val;
+ this.getList();
+ },
+ handleCurrentChange(val){
+ this.listQuery.pageNum = val;
+ this.getList();
+ },
+ getList() {
+ this.listLoading = true;
+ fetchList(this.listQuery).then(response => {
+ this.listLoading = false;
+ this.list = response.data.list;
+ this.total = response.data.total;
+ });
+ }
  }
  }
 </script>