qimall/addons/CloudStockTwo/backend/views/components/agent-detail.php

<?php
/**
 * @link:http://www.goodmall.com/
 * @copyright: Copyright (c) 2020
 * Created by PhpStorm
 * Author: ganxiaohao
 * Date: 2020-04-24
 * Time: 19:33
 */
?>

<template id="agent-detail">
    <!-- 详情的弹窗 start-->
    	<el-dialog title="代理商详情" :visible.sync="edit.visible" width="65%" center>
    		<div>
    			<el-tabs v-model="tabsActiveName" @tab-click="handleDetailTabsClick">
    			    <el-tab-pane label="资金明细" name="first">
    					<div style="width: 55%;display: flex;justify-content: space-between;min-width: 600px;">
    						<el-input style="width: 150px" placeholder="请输入类型" size="small"></el-input>
    						 <el-date-picker
    							  size="small"
    						      type="date"
    						      placeholder="选择日期">
    						  </el-date-picker>
    						<el-input style="width: 150px" placeholder="收入/支出" size="small"></el-input>
    						<el-button type="primary" icon="el-icon-search" size="small" style="padding: 0 10px !important;">搜索</el-button>
    					</div>
    					<div style="margin-top: 10px;margin-bottom: 10px;">支出：￥500 &nbsp;&nbsp; &nbsp;   收入：￥800</div>
    					 <el-table
    							stripe
    							size="small"
    					      :data="tableData"
    					      style="width: 100%">
    					      <el-table-column
    						    align="center"
    					        prop="date"
    					        label="时间"
    					        >
    					      </el-table-column>
    					      <el-table-column
    							align="center"
    					        prop="name"
    					        label="类型"
    					        >
    					      </el-table-column>
    					      <el-table-column
    						  align="center"
    					        prop="address"
    					        label="金额">
    							<template slot-scope="scope">
    								<div>
    									<div>{{scope.row.address}}</div>
    									<div>余额：{{scope.row.yue}}</div>
    								</div>
    							</template>
    					      </el-table-column>
    					    </el-table>
    						<div style="display: flex;justify-content: flex-end;margin-top: 10px;">
    						    <el-pagination
    						            background :page-size="15"
    						            @current-change="pageChange"
    						            layout="prev, pager, next" :current-page="1"
    						            :total="100">
    						    </el-pagination>
    						</div>
    				</el-tab-pane>
    			    <el-tab-pane label="库存明细" name="second">
    					<div style="width: 55%;display: flex;justify-content: space-between;min-width: 600px;">
    						<el-input style="width: 150px" placeholder="请输入商品名字" size="small"></el-input>
    						 <el-date-picker
    							  size="small"
    						      type="date"
    						      placeholder="选择日期">
    						  </el-date-picker>
    						<el-button type="primary" icon="el-icon-search" size="small" style="padding: 0 10px !important;">搜索</el-button>
    						<el-button type="primary" size="small" style="padding: 0 10px !important;">导出EXCEL</el-button>
    					</div>
    					<div style="margin-top: 10px;margin-bottom: 10px;">出库：500 &nbsp;&nbsp; &nbsp;入库：￥800</div>
    					<el-table
    						 stripe
    						 size="small"
    					     :data="tableData"
    					     style="width: 100%">
    					     <el-table-column
    						   align="center"
    					       prop="date"
    					       label="时间"
    					       >
    					     </el-table-column>
    					     <el-table-column
    					       prop="name"
    					       label="商品"
    					       >
    						   <template slot-scope="scope">
    						   		<div style="display: flex;align-items: center;">
    						   			<img :src="scope.row.pro.img" style="width: 40px;height: 40px;display: block;margin-right: 5px;" />
    						   			<div>{{scope.row.pro.name}}</div>
    						   		</div>
    						   </template>
    					     </el-table-column>
    					     <el-table-column
    						   align="center"
    					       prop="guige"
    					       label="规格">
    					     </el-table-column>
    						 <el-table-column
    						   align="center"
    						   prop="kucun"
    						   label="库存">
    						   <template slot-scope="scope">
    							   <div>剩余库存：{{scope.row.kucun}}</div>
    						   </template>
    						 </el-table-column>
    					   </el-table>
    						<div style="display: flex;justify-content: flex-end;margin-top: 10px;">
    							<el-pagination
    								background :page-size="5"
    								@current-change="pageChange"
    								layout="prev, pager, next" :current-page="1"
    								:total="100">
    							</el-pagination>
    						</div>
    				</el-tab-pane>
    			    <el-tab-pane label="云仓库存" name="third">
    					<div style="display: flex;">
    						<el-input style="width: 150px;margin-right: 20px;" placeholder="请输入商品名字" size="small"></el-input>
    						<el-button type="primary" icon="el-icon-search" size="small" style="padding: 0 10px !important;">搜索</el-button>
    					</div>
    					<div style="margin-top: 10px;margin-bottom: 10px;">出库：500 &nbsp;&nbsp; &nbsp;入库：￥800</div>
    					<el-table
    						 stripe
    						 size="small"
    					     :data="tableData"
    					     style="width: 100%">
    					     <el-table-column
    					       prop="name"
    					       label="商品"
    					       >
    						   <template slot-scope="scope">
    						   		<div style="display: flex;align-items: center;">
    						   			<img :src="scope.row.pro.img" style="width: 40px;height: 40px;display: block;margin-right: 5px;" />
    						   			<div>{{scope.row.pro.name}}</div>
    						   		</div>
    						   </template>
    					     </el-table-column>
    					     <el-table-column
    						   align="center"
    					       prop="guige"
    					       label="规格">
    					     </el-table-column>
    						 <el-table-column
    						   align="center"
    						   prop="kucun"
    						   label="云库存">
    						 </el-table-column>
    						 <el-table-column
    						   align="center"
    						   prop="kucun"
    						   label="已提货">
    						 </el-table-column>
    					   </el-table>
    						<div style="display: flex;justify-content: flex-end;margin-top: 10px;">
    							<el-pagination
    								background :page-size="5"
    								@current-change="pageChange"
    								layout="prev, pager, next" :current-page="1"
    								:total="100">
    							</el-pagination>
    						</div>
    				</el-tab-pane>
    			    <el-tab-pane label="待结算" name="fourth">
    					<div style="display: flex;">
    						<el-input style="width: 150px;margin-right: 20px;" placeholder="请输入商品名字" size="small"></el-input>
    						<el-input style="width: 150px;margin-right: 20px;" placeholder="请输入订单编号" size="small"></el-input>
    						 <el-select size="small" placeholder="请选择状态" style="margin-right: 20px;"><!--  v-model="value" -->
    						    <!-- <el-option
    						      v-for="item in options"
    						      :key="item.value"
    						      :label="item.label"
    						      :value="item.value">
    						    </el-option> -->
    						  </el-select>
    						<el-date-picker
    							 size="small"
    						     type="date"
    						     placeholder="选择日期"
    							 style="margin-right: 20px;">
    						 </el-date-picker>
    						<el-button type="primary" icon="el-icon-search" size="small" style="padding: 0 10px !important;">搜索</el-button>
    					</div>
    					<div style="margin-top: 10px;margin-bottom: 10px;">出库：500 &nbsp;&nbsp; &nbsp;入库：￥800</div>
    					<el-table
    						 stripe
    						 size="small"
    					     :data="tableData"
    					     style="width: 100%">
    					     <el-table-column
    					       prop="name"
    					       label="商品"
    					       >
    						   <template slot-scope="scope">
    						   		<div style="display: flex;align-items: center;">
    						   			<img :src="scope.row.pro.img" style="width: 40px;height: 40px;display: block;margin-right: 5px;" />
    						   			<div>{{scope.row.pro.name}}</div>
    						   		</div>
    						   </template>
    					     </el-table-column>
    					     <el-table-column
    						   align="center"
    					       prop="guige"
    					       label="规格">
    					     </el-table-column>
    						 <el-table-column
    						   align="center"
    						   prop="kucun"
    						   label="云库存">
    						 </el-table-column>
    						 <el-table-column
    						   align="center"
    						   prop="kucun"
    						   label="已提货">
    						 </el-table-column>
    					   </el-table>
    						<div style="display: flex;justify-content: flex-end;margin-top: 10px;">
    							<el-pagination
    								background :page-size="5"
    								@current-change="pageChange"
    								layout="prev, pager, next" :current-page="1"
    								:total="100">
    							</el-pagination>
    						</div>
    				</el-tab-pane>
    				<el-tab-pane label="我的批发商" name="five">
    					
    					<div style="display: flex;">
    						<el-input style="width: 150px;margin-right: 20px;" placeholder="请输入代理商名称" size="small"></el-input>
    						<el-input style="width: 150px;margin-right: 20px;" placeholder="请输入商品名字" size="small"></el-input>
    						<el-button type="primary" icon="el-icon-search" size="small" style="padding: 0 10px !important;">搜索</el-button>
    					</div>
    					<div style="margin-top: 10px;margin-bottom: 10px;">累计批发商人数：50，本周新增人数：123，本月新增人数：78</div>
    					<el-table
    						 stripe
    						 size="small"
    					     :data="tableData"
    					     style="width: 100%">
    					     <el-table-column
    					       prop="name"
    					       label="代理商名称"
    					       >
    						   <template slot-scope="scope">
    						   		<div style="display: flex;align-items: center;">
    						   			<img :src="scope.row.pro.img" style="width: 40px;height: 40px;display: block;margin-right: 5px;" />
    						   			<div>{{scope.row.pro.name}}</div>
    						   		</div>
    						   </template>
    					     </el-table-column>
    					     <el-table-column
    						   align="center"
    					       prop="id"
    					       label="ID">
    					     </el-table-column>
    						 <el-table-column
    						   align="center"
    						   prop="phone"
    						   label="手机号">
    						 </el-table-column>
    						 <el-table-column
    						   prop="name"
    						   label="商品名称"
    						   >
    						   <template slot-scope="scope">
    						   		<div style="display: flex;align-items: center;">
    						   			<img :src="scope.row.pro.img" style="width: 40px;height: 40px;display: block;margin-right: 5px;" />
    						   			<div>{{scope.row.pro.name}}</div>
    						   		</div>
    						   </template>
    						 </el-table-column>
    						 <el-table-column
    						   align="center"
    						   prop="date"
    						   label="成为代理时间">
    						 </el-table-column>
    						 <el-table-column
    						   align="center"
    						   prop="kucun"
    						   label="剩余库存">
    						 </el-table-column>
    						 <el-table-column
    						   align="center"
    						   prop="kucun"
    						   label="本月进货数">
    						 </el-table-column>
    					   </el-table>
    						<div style="display: flex;justify-content: flex-end;margin-top: 10px;">
    							<el-pagination
    								background :page-size="5"
    								@current-change="pageChange"
    								layout="prev, pager, next" :current-page="1"
    								:total="100">
    							</el-pagination>
    						</div>
    					
    				</el-tab-pane>
    				<el-tab-pane label="我的名额" name="save">
    					<div style="display: flex;">
    						<el-input style="width: 150px;margin-right: 20px;" placeholder="请输入等级名称" size="small"></el-input>
    						<el-button type="primary" icon="el-icon-search" size="small" style="padding: 0 10px !important;">搜索</el-button>
    					</div>
    					<el-table
    						 stripe
    						 size="small"
    					     :data="tableData"
    					     style="width: 100%">
    
    					     <el-table-column
    						   align="center"
    					       prop="name"
    					       label="等级名称">
    					     </el-table-column>
    						 <el-table-column
    						   align="center"
    						   prop="yue"
    						   label="数量">
    						 </el-table-column>
    
    					   </el-table>
    						<div style="display: flex;justify-content: flex-end;margin-top: 10px;">
    							<el-pagination
    								background 
    								@current-change="pageChange"
    								layout="prev, pager, next"
    								:page-count="pageCount"
    								>
    							</el-pagination>
    						</div>
    				</el-tab-pane>
    			  </el-tabs>
    		</div>
    	</el-dialog>
    <!-- 详情胡弹窗 end -->
</template>

<script>
    Vue.component('agent-detail', {
        template: '#agent-detail',
        props: {
			value: {
			    type: Boolean,
			    default: false
			},
			edit_row: {
			    type: Object,
			    default: null
			}
        },
		
		watch:{
			value() {
			    if (this.value) {
			        this.edit.visible = true;
			       
			    } else {
			        this.edit.visible = false;
			    }
			},
			'edit.visible'() {
			    if (!this.edit.visible) {
			        this.editCancel();
			    }
			    if (this.edit.id) {
			    }
			}
		},
        data() {
            return {
				edit: {
				    visible: false,
				    id: '',
				    btnLoading: false,
				},
				is_show_detail:false,
				tabsActiveName:'first',
				pageCount:0,
               tableData: [{
                           date: '2016-05-02 16:40:45',
                           name: '销售商品',
                           address: '+200',
               			yue:122,
               			pro:{
               				name:"苹果12",
               				img:'http://zhenai.ruinuomei.com/product/72c38ad1-a027-4e52-8798-1fdf745cabbd'
               			},
               			guige:'iphone 白',
               			kucun:1889,
               			id:9,
               			phone:15219398480
                         }, {
                           date: '2016-05-02 16:40:45',
                           name: '销售商品',
                           address: '+200',
               			yue:122,
               			pro:{
               				name:"苹果12",
               				img:'http://zhenai.ruinuomei.com/product/72c38ad1-a027-4e52-8798-1fdf745cabbd'
               			},
               			guige:'iphone 白',
               			kucun:1889,
               			id:9,
               			phone:15219398480
                         }, 
               		  {
               		   date: '2016-05-02 16:40:45',
               		   name: '销售商品',
               		   address: '+200',
               		   yue:122,
               		  	pro:{
               		  		name:"苹果12",
               		  		img:'http://zhenai.ruinuomei.com/product/72c38ad1-a027-4e52-8798-1fdf745cabbd'
               		  	},
               		  	guige:'iphone 白',
               		  	kucun:1889,
               			id:9,
               			phone:15219398480
               		     }, {
                           date: '2016-05-02 16:40:45',
                           name: '销售商品',
                           address: '+200',
               			yue:122,
               			pro:{
               				name:"苹果12",
               				img:'http://zhenai.ruinuomei.com/product/72c38ad1-a027-4e52-8798-1fdf745cabbd'
               			},
               			guige:'iphone 白',
               			kucun:1889,
               			id:9,
               			phone:15219398480
                         },{
                           date: '2016-05-02 16:40:45',
                           name: '销售商品',
                           address: '+200',
               			yue:122,
               			pro:{
               				name:"苹果12",
               				img:'http://zhenai.ruinuomei.com/product/72c38ad1-a027-4e52-8798-1fdf745cabbd'
               			},
               			guige:'iphone 白',
               			kucun:1889,
               			id:9,
               			phone:15219398480
                         }, {
                           date: '2016-05-02 16:40:45',
                           name: '销售商品',
                           address: '+200',
               			yue:122,
               			pro:{
               				name:"苹果12",
               				img:'http://zhenai.ruinuomei.com/product/72c38ad1-a027-4e52-8798-1fdf745cabbd'
               			},
               			guige:'iphone 白',
               			kucun:1889,
               			id:9,
               			phone:15219398480
                         }] 
            }
        },

        methods: {
           handleDetailTabsClick(){
			   
		   },
		   pageChange(){
			   
		   },
		   editCancel() {
		       this.$emit('input', false);
		   },
        }
    });
</script>