qimall/addons/SalesCompany/backend/views/components/inventory-details.php

<?php

use common\helpers\ComponentHelper;
$diyPath = dirname(__DIR__) . '/components';
ComponentHelper::loadComponentView('agent-edit', $diyPath);
?>
<template id="inventory-details">
    <el-dialog :visible.sync="edit.visible" width="50%" center>
    	<div style="margin-bottom: 20px;">
            <el-button type="primary" size="small" style="padding: 9px 15px !important;" @click="agentEditClick">添加代理商</el-button>
        </div>
        <div class="input-item">
            <el-input @keyup.enter.native="loadData" size="small" placeholder="请输入用户id" v-model="search.user_id"
                          clearable @clear="toSearch">
            </el-input>
        </div>
        <div class="input-item">
            <el-input @keyup.enter.native="loadData" size="small" placeholder="请输入用户昵称/手机号搜索" v-model="search.keyword" clearable @clear="toSearch">
                </el-input>
        </div>

        <el-button type="primary" size="small" style="padding: 9px 15px !important;" @click="toSearch">搜索</el-button>
		<el-table
		     v-loading = "listLoading"
			 size="small"
		     :data="list2"
		     style="width: 100%;">
		     <el-table-column prop="user_id"  label="用户ID" align="center"></el-table-column>
             <el-table-column label="用户信息" >
                <template slot-scope="scope">
                    <div class="user_img" flex="cross:center">
                        <el-image class="default-avatar" :src="scope.row.avatar_url">
                             <div slot="error" class="image-slot">
                                    <com-image src="resources/img/mall/default_avatar_url.png"></com-image>
                             </div>
                        </el-image>
                     	<div class="uer-nickname over1" v-if="scope.row.nickname">{{scope.row.nickname}}</div>
                    	<div class="uer-nickname over1" v-else >ID:{{scope.row.user_id}}</div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="联系电话" prop="mobile" align="center" >
                <template slot-scope="scope">
                    <div>{{scope.row.mobile}}</div>
                </template>
            </el-table-column>
            <el-table-column label="用户等级" prop="level_name" align="center" >
                <template slot-scope="scope">
                    <div>{{scope.row.level_name}}</div>
                </template>
            </el-table-column>
            <el-table-column label="操作" min-width="80" align="center">
                <template slot-scope="scope">
                    <el-button type="text" @click="handleChange('destroy',scope.row)">删除</el-button>
                </template>
            </el-table-column>
		</el-table>
				  
		<div style="text-align: right;margin: 20px 0;">
			<el-pagination
				@current-change="pagination"
				background
				layout="prev, pager, next"
				:page-count="pageCount">
			</el-pagination>
		</div>
		<agent-edit v-model="agentEdit.show" @savesuccess="agentEditFun" :company_id="edit_row.company_id"></agent-edit>
    </el-dialog>
</template>
<script>
    Vue.component('inventory-details', {
        template: '#inventory-details',
        props: {
            value: {
                type: Boolean,
                default: false
            },
            edit_row: {
                type: Object,
                default: null
            }
        },
        data() {
            return {
                edit: {
                    visible: false,
                    company_id: '',
                    btnLoading: false,
                },
                ruleForm: {
                    /* express_no: '',
                    express_name: '',
                    order_id: '', */
					kuaidi:1
                },
                level_list: [],
                goods: null,
				
				activeName1:'first',
				loading:false,
				expressList:[],
				express_code:'',
				express_no:'',
				list2:[],
				listLoading:false,
				page:1,
				pageCount:0,
				innerVisible:false,
				goodsData:[],
				btnLoading:false,
				successFlag:false,
				search: {
                	user_id: null,
                	keyword: '',
            	},
            	agentEdit: {
                	show: false,
            	},
            }
        },
        watch: {
            value() {
                if (this.value) {
                    this.edit.visible = true;
					
					this.successFlag = false;
					//this.goodsData = [this.edit_row.data];
					this.getDetailData();
                    /* if (this.edit_row.id > 0) {
                        console.log(this.edit_row)
                        this.ruleForm.order_id = this.edit_row.id;
                    } else {
                        this.edit.id = 0;
                    } */
                } else {
                    this.edit.visible = false;
                }
            },
            'edit.visible'() {
                if (!this.edit.visible) {
					if(this.successFlag){
						this.$emit('success',1)
					}
					
					
					this.express_code = '';
					this.express_no = '';
                    this.editCancel();
                }
                if (this.edit.id) {
                }
            }
        },
        mounted() {
            //this.edit.id = this.edit_row.id;
        },
        methods: {
            onInput(e) {
                this.$forceUpdate();
            },
            agentClick(row) {
                this.edit.id = row.id
            },
            editCancel() {
                this.$emit('input', false);
            },
			getDetailData(){
				
				this.listLoading = true;
				//console.log('请求详情前的page='+this.page)
				//console.log('请求详情前的this.edit_row.user_id='+this.edit_row.user_id)
				request({
				    params: {
				        r: 'sales-company/default/agent-list',
				        page: this.page,
						limit:10,
						company_id:this.edit_row.company_id,
						user_id:this.search.user_id,
						keyword:this.search.keyword,
				    },
				    method: 'get',
				}).then(e => {
					this.listLoading = false;
					//console.log('详情列表new=='+JSON.stringify(e))
					 console.log(e.data.data.list)
					if(e.data.code == 0){
						this.list2 = e.data.data.list;
						this.pageCount = e.data.data.page_count;
					}
				}).catch(e => {
				    console.log(e);
					this.listLoading = false;
				});
			},
			pagination(currentPage) {
			    let self = this;
			    self.page = currentPage;
			    self.getDetailData();
			},
			toSearch() {
                this.search.page = 1;
                this.getDetailData();
            },
            agentEditClick() {
                this.agentEdit.show = true;
            },
            agentEditFun(){
                this.getDetailData();
            },
            handleChange(type, data = null) {
                let id = data ? parseInt(data.id) : '';
                switch (type) {
                    case 'destroy':
                        param = {id: data.id,type};
                        this.$confirm('删除该条数据后不可以恢复, 是否继续?', '警告', {type: 'warning'}).then(() => {this.sendDelete(param)})
                        break;
                }
            },
            sendDelete(params) {
                let self = this;
                request({
                    params: {
                        r: 'sales-company/default/agent-delete',
                    },
                    method: 'post',
                    data: params
                }).then(e => {
                    if (e.data.code == 0) {
                        self.$message.success(e.data.msg);
                        self.getDetailData();
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    console.log(e);
                });
            },
        }
    });
</script>
<style>
	/* .myTable2 .el-table__footer-wrapper,.myTable2 .el-table__header-wrapper{
	  border-bottom: 1.4px solid #D6D6D6;
	 } */
	 .myLable .el-form-item__label{
		 color: red !important;
	 }
</style>