qimall/addons/SalesCompany/backend/views/components/agent-edit.php

<template id="agent-edit">
    <el-dialog :visible.sync="showEdit.visible" width="50%" style="margin-top: 50px;" title="添加代理商" center append-to-body="true">
        <el-form @submit.native.prevent size="small" label-width="80px">
            <el-form-item label="用户昵称"  required>
                <el-autocomplete size="small" v-model="showEdit.nickname" value-key="nickname" @keyup.enter.native="keyUp"
                                 :fetch-suggestions="querySearchAsync" placeholder="请输入用户昵称/id/手机号"
                                 @select="shareClick"></el-autocomplete>
            </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
            <el-button @click="editCancel" type="default" size="small">取消</el-button>
            <el-button type="primary" :loading="showEdit.btnLoading" style="margin-bottom: 10px;" size="small"
                       @click="editSave">保存</el-button>
        </span>
    </el-dialog>
</template>
<script>
    Vue.component('agent-edit', {
        template: '#agent-edit',
        props: {
            value: {
                type: Boolean,
                default: false
            },
            company_id:{
                type:Number,
                default:0,
            }
        },
        data() {
            return {
                showEdit: {
                    visible: false,
                    keyword: '',
                    nickname: '',
                    id: '',
                    user_id:"",
                    btnLoading: false,
                    name:'',
                },
                listLoading:false,
                list:[],
                page:1,
                pageCount:0,
                radioSelection:0,
                keyword:'',
                selectUser:null,
                default_level:null,
            }
        },
        watch: {
            value() {
                this.radioSelection=0;
                this.keyword='';
                this.selectUser=null;
                this.showEdit.visible = true;
                if (this.value) {
                    this.showEdit.visible = true;
                    // this.getUser();
                } else {
                    this.showEdit.id = '';
                    this.showEdit.nickname = '';
                    this.showEdit.keyword = '';
                    this.showEdit.visible = false;
                }
            }
            ,
            'showEdit.visible'() {
                if (!this.showEdit.visible) {
                    this.editCancel();
                }
            },
            keyword(val){//监听用户昵称的输入框 如果为空（选择后删除了用户）则重新请求用户的数据 改为实时请求

                this.page = 1;
                this.pageCount = 0;
                this.getUser();
            }
        },
        created() {
        },
        methods: {
            getUser(){//请求用户的列表
                this.listLoading = true;
                request({
                    params: {
                        r: 'sales-company/default/search-agent',
                        page:this.page,
                        limit:20,
                        keyword:this.keyword
                    },
                    method: 'get',
                }).then(response => {
                    this.listLoading = false;
                    if (response.data.code == 0) {
                       this.list = response.data.data.list;
                       this.pageCount = response.data.data.page_count;
                    } else {
                        this.$message.error(response.data.msg);
                    }
                }).catch(response => {
                   this.listLoading = false;
                });
                
            },
            pagination(currentPage) {
                this.page = currentPage;
                this.getUser();
            },
            selectionChange(e){
                this.selectUser = e;
                this.keyword = this.selectUser.id;
            },
            querySearchAsync(queryString, cb) {
                this.showEdit.keyword = queryString;
                this.get_user(cb);
            },
            get_user(cb) {
                request({
                    params: {
                        r: 'sales-company/default/search-agent',
                        keyword: this.showEdit.keyword
                    }
                }).then(res => {
                    if (res.data.code == 0) {
                        cb(res.data.data.list)
                    } else {
                        this.$message.error(res.data.msg);
                    }
                });
            },
            shareClick(row) {
                this.showEdit.user_id = row.id
            },
            editCancel() {
                /* 重置表单中原来填入的数据 */
                this.selectUser = null;
                this.keyword = '';
                this.showEdit.user_id = '';
                this.showEdit.name = '';
                this.$emit('input', false);
            },
            editSave() {
                if(!this.showEdit.user_id){
                    return this.$message.error('请选择下拉列表里的会员！');
                }
                this.showEdit.btnLoading = true;
                request({
                    params: {
                        r: 'sales-company/default/agent-edit'
                    },
                    method: 'post',
                    data: {
                        user_id:this.showEdit.user_id,
                        name:this.showEdit.name,
                        company_id:this.company_id,
                    }
                }).then(response => {
                    this.showEdit.btnLoading = false;
                    if (response.data.code == 0) {
                        this.$message.success('添加成功');
                        this.$emit('savesuccess')
                        this.editCancel();
                    } else {
                        this.$message.error(response.data.msg);
                    }
                }).catch(response => {
                    this.showEdit.btnLoading = false;
                });
            },
            keyUp() {
                console.log('key up')
            },
        }
    });
</script>