申请列表界面完善

src/api/returnApply.js

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

src/views/oms/apply/index.vue

@@ -1,10 +1,173 @@
 <template> 
- <div> {{msg}}</div>
+ <div class="app-container">
+ <el-card class="filter-container" shadow="never">
+ <div>
+ <i class="el-icon-search"></i>
+ <span>筛选搜索</span>
+ <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>
+ </div>
+ <div style="margin-top: 15px">
+ <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
+ <el-form-item label="输入搜索：">
+ <el-input v-model="listQuery.id" style="width: 203px" placeholder="服务单号"></el-input>
+ </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-date-picker
+ v-model="listQuery.createTime"
+ value-format="yyyy-MM-dd"
+ type="date"
+ placeholder="请选择时间">
+ </el-date-picker>
+ </el-form-item>
+ <el-form-item label="操作人员：">
+ <el-input v-model="listQuery.handleMan" style="width: 203px" placeholder="全部"></el-input>
+ </el-form-item>
+ <el-form-item label="处理时间：">
+ <el-date-picker
+ v-model="listQuery.handleTime"
+ value-format="yyyy-MM-dd"
+ type="date"
+ placeholder="请选择时间">
+ </el-date-picker>
+ </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">
+ <el-table ref="returnApplyTable"
+ :data="list"
+ style="width: 100%;"
+ @selection-change="handleSelectionChange"
+ 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.id}}</template>
+ </el-table-column>
+ <el-table-column label="申请时间" width="180" align="center">
+ <template slot-scope="scope">{{scope.row.createTime | formatTime}}</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="180" align="center">
+ <template slot-scope="scope">￥{{scope.row.productRealPrice*scope.row.productCount}}</template>
+ </el-table-column>
+ <el-table-column label="申请状态" width="180" align="center">
+ <template slot-scope="scope">{{scope.row.status | formatStatus}}</template>
+ </el-table-column>
+ <el-table-column label="处理时间" width="180" align="center">
+ <template slot-scope="scope">{{scope.row.handleTime | formatTime}}</template>
+ </el-table-column>
+ <el-table-column label="操作" width="180" align="center">
+ <template slot-scope="scope">
+ <el-button
+ size="mini"
+ @click="handleViewOrder(scope.$index, scope.row)">查看详情</el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ </div>
+ </div>
 </template>
 <script>
+ import {formatDate} from '@/utils/date';
+ import {fetchList} from '@/api/returnApply';
+ const defaultListQuery = {
+ pageNum: 1,
+ pageSize: 10,
+ id: null,
+ receiverKeyword: null,
+ status: null,
+ createTime: null,
+ handleMan: null,
+ handleTime: null
+ };
+ const defaultStatusOptions=[
+ {
+ label: '待处理',
+ value: 0
+ },
+ {
+ label: '退货中',
+ value: 1
+ },
+ {
+ label: '已完成',
+ value: 2
+ },
+ {
+ label: '已拒绝',
+ value: 3
+ }
+ ];
  export default {
+ name:'returnApplyList',
  data() {
- return {msg: '退货申请列表'}
+ return {
+ listQuery:Object.assign({},defaultListQuery),
+ statusOptions: Object.assign({},defaultStatusOptions),
+ list:null,
+ total:null,
+ listLoading:false,
+ multipleSelection:[]
+ }
+ },
+ created(){
+ this.getList();
+ },
+ filters:{
+ formatTime(time) {
+ if(time==null||time===''){
+ return 'N/A';
+ }
+ let date = new Date(time);
+ return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
+ },
+ formatStatus(status){
+ for(let i=0;i<defaultStatusOptions.length;i++){
+ if(status===defaultStatusOptions[i].value){
+ return defaultStatusOptions[i].label;
+ }
+ }
+ }
+ },
+ methods:{
+ handleSelectionChange(val){
+ this.multipleSelection = val;
+ },
+ getList(){
+ this.listLoading=true;
+ fetchList(this.listQuery).then(response => {
+ this.listLoading = false;
+ this.list = response.data.list;
+ this.total = response.data.total;
+ });
+ }
  }
  }
 </script>