eladmin-web/.svn/pristine/36/362c4147186a0ebb6f8c53dc6c1c673714b2bf76.svn-base

<template>
  <div class="app-container">
    <!--搜索-->
    <el-form class="mt_15" ref="form" inline size="small">
    	<el-form-item label="状态">
  			<el-select v-model.trim="searchParm.status" placeholder="请选择">
			    <el-option
			      v-for="item in statusList"
			      :key="item.value"
			      :label="item.label"
			      :value="item.value">
			    </el-option>
			  </el-select>
  		</el-form-item>
  		<el-form-item label="公司ID">
    		<el-input v-model.trim="searchParm.companyId" clearable placeholder='公司ID'></el-input>
  		</el-form-item>
  		<el-form-item label="买家ID">
    		<el-input v-model.trim="searchParm.tokenEnum" clearable></el-input>
  		</el-form-item>
		<el-form-item>
		<el-button type="primary" @click="goSearch">搜索</el-button>
		<el-button type="warning" @click="resetForm">重置</el-button>
  		</el-form-item>
		</el-form>
    <!--表格渲染-->
    <el-table ref="table" border size="small" :data="list" :header-cell-style="{textAlign:'center'}" :cell-style="{textAlign:'center'}">
      <el-table-column label="序号" type="index" width="50" />
      <el-table-column label="公司ID" prop="companyId" />
      <el-table-column label="买家ID" prop="tokenEnum" />
      <el-table-column label="订单来源" prop="fromDetailInfo" />
      <el-table-column label="状态" prop="status">
      	<template slot-scope="scope">
	     		{{ scope.row.status | getStatus}}
	     	</template>
      </el-table-column>
      <el-table-column label="创建时间" prop="createdAt" />
      <el-table-column label="修改时间" prop="updatedAt" />
      <el-table-column label="操作" width="220">
      	<template slot-scope="scope">
    			<el-button type="info" @click="getBtnById(scope.row.id)">查看</el-button>
      	</template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <div class="mt_15">
	    <el-pagination
	      @size-change="handleSizeChange"
	      @current-change="handleCurrentChange"
	      :current-page="searchParm.page"
	      :page-sizes="[10, 20, 30, 40, 50]"
	      :page-size="searchParm.pageSize"
	      layout="total, sizes, prev, pager, next, jumper"
	      :total="total">
	    </el-pagination>
  </div>
  
  <!--详情弹窗-->
  <el-dialog :visible.sync="dialogDetailVisible" :title="dialogDetailTitle" center width="45%">
  	<div class="dialog-content">
  		 <el-form ref="form" size="small" label-width="100px">
  		 	<el-form-item label="公司ID" prop="companyId">
	    		<el-input v-model.trim="detailParm.companyId" :disabled="true"></el-input>
	  		</el-form-item>
	  		<el-form-item label="订单来源" prop="fromDetailInfo">
	    		<el-input v-model.trim="detailParm.fromDetailInfo" :disabled="true"></el-input>
	  		</el-form-item>
	  		<el-form-item label="产品信息" prop="cartList" >
	    		<el-input v-model.trim="detailParm.cartList" :disabled="true"></el-input>
	  		</el-form-item>
	  		<el-form-item label="订单收货地址" prop="contactInfo">
	    		<el-input v-model.trim="detailParm.contactInfo" :disabled="true"></el-input>
	  		</el-form-item>
	  		<el-form-item label="买家ID" prop="tokenEnum">
	    		<el-input v-model.trim="detailParm.tokenEnum" :disabled="true"></el-input>
	  		</el-form-item>
	  		<el-form-item label="状态" prop="status">
	    		<!-- <el-input v-model.trim="detailParm.status" :disabled="true"></el-input> -->
				<el-select v-model.trim="detailParm.status" disabled placeholder="请选择">
					<el-option
						v-for="item in statusList"
						:key="item.value"
						:label="item.label"
						:value="item.value">
					</el-option>
				</el-select>
	  		</el-form-item>
			</el-form>
  	</div>
  </el-dialog>
  
  </div>
</template>
<script>
	import { getList, getById } from '@/api/group/excelinfo'
export default {
	filters: {
	  getStatus: function (value) {
	   if(value == 1) {
	   	return '待处理';
	   } else if (value == 2) {
	   	return '处理成功';
	   } else {
	   	return '处理失败';
	   }
	  }
	},
//	数据
  data() {
    return {
    	searchParm: {
    		page: 1,
    		pageSize: 10,
    		companyId:null,
    		sort:'created_at',
    		order:'desc',
    		tokenEnum:null,
    		status:null
    	},
    	total:0,
      list: [],
      dialogDetailVisible: false,
      dialogDetailTitle: '详情',
      statusList:[{
	          value: null,
	          label: '全部'
	        },
	        {
	          value: 1,
	          label: '待处理'
	        }, {
	          value: 2,
	          label: '处理成功'
	        }, {
	          value: 3,
	          label: '处理失败'
	        }],
      detailParm: {
      	id: null,
      	companyId:'',
    		fromDetailInfo:'',
    		cartList: '',
    		contactInfo:'',
    		tokenEnum:null,
    		status:null
      },   
    }
  },
  // 调用
  created() {
		this.goSearch()
  },
	//方法
  methods: {
  	resetForm() {
        this.searchParm.status = null;
        this.searchParm.tokenEnum = null;
        this.searchParm.companyId = null;
        this.goSearch()
    },
		//	查询
		goSearch() {
			this.searchParm.page=1
			this.getDataList()
		},
		// 查看根据id
		getBtnById(id){
			getById({id}).then(res => {
				if(res.code==200) {
					this.detailParm.id = res.data.id;
					this.detailParm.companyId = res.data.companyId;
					this.detailParm.fromDetailInfo = res.data.fromDetailInfo;
					this.detailParm.cartList = res.data.cartList;
					this.detailParm.contactInfo = res.data.contactInfo;
					this.detailParm.tokenEnum = res.data.tokenEnum;
					this.detailParm.status = res.data.status;
					this.dialogDetailVisible = true
					this.$refs.ruleForm.clearValidate()
					
				}
			}).catch(err => {
				console.log(err)
			})
		},
		// 分页获取表格数据
		getDataList(){
			getList(this.searchParm).then(res => {
					console.log(res)
					if(res.code==200) {
						console.log(res)
						this.list = res.data.list;
						this.total = res.data.total;
					}
				}).catch(err => {
					console.log(err)
				})
		},
	
		//	分页
		handleSizeChange(val) {
   		console.log(`每页 ${val} 条`);
   		this.searchParm.pageSize = val;
   		this.getDataList();
  	},
  	handleCurrentChange(val) {
    	console.log(`当前页: ${val}`);
    	this.searchParm.page = val;
    	this.getDataList();
  	}
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>