qimall/addons/BusinessCard/backend/views/department/select-user.php

<template id="select-user">
    <div class="select-user">
        <el-dialog append-to-body :title="title" :visible.sync="visible" :close-on-click-modal="false" custom-class="com-dialog-dialog" :before-close="close" @close="close">
            <div style="padding: 20px;">
                <el-form :model="personnelForm">
                    <el-form-item label="部门" prop="department_name">
                        <div>：{{department_name}}</div>
                    </el-form-item>
                    <el-form-item label="角色" prop="role_type">
                        <el-radio v-model="personnelForm.role_type" label="1">Boss</el-radio>
                        <el-radio v-model="personnelForm.role_type" label="2">主管</el-radio>
                        <el-radio v-model="personnelForm.role_type" label="3">员工</el-radio>
                    </el-form-item>
                    <el-form-item label="职位" prop="position_id">
                        <el-select v-model="personnelForm.position_id" placeholder="请选择职位">
                            <el-option v-for="item in position_list" :key="item.id" :label="item.name"
                                    :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="nickname" placeholder="请输入用户手机号码" @keyup.enter.native="getDetail(1)">
                            <el-button slot="append" @click="getDetail(1)">搜索</el-button>
                        </el-input>
                    </el-form-item>
                </el-form>
                <el-table border v-loading="listLoading" :data="list" style="margin-top: 24px;"
                          @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="60px" label="ID" props="user_id"></el-table-column>
                    <el-table-column prop="id" label="ID" width="80" align="center"></el-table-column>
                    <el-table-column label="名称">
                        <template slot-scope="scope">
                            <div flex="cross:center">
                                <div style="margin-right: 10px;">
                                    <el-image
                                        style="width: 50px; height: 50px;border-radius: 5px;"
                                        :src="scope.row.avatar_url?scope.row.avatar_url:'/resources/img/common/default-avatar.png'">
                                    </el-image>
                                </div>
                                <div class="table-info-text">
                                    <div>{{scope.row.nickname}}</div>
                                    <div >{{scope.row.mobile}}</div>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div style="margin-top: 24px;">
                <el-row>
                    <el-pagination
                        v-if="pagination"
                        style="display: inline-block;"
                        background
                        :page-size="pagination.pageSize"
                        @current-change="getDetail"
                        layout="prev, pager, next"
                        :total="pagination.total_count">
                    </el-pagination>
                </el-row>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="visible = false">取消</el-button>
                <el-button :loading="dialogLoading" type="primary" @click="confirm">增加</el-button>
            </div>
        </el-dialog>
        <div @click="click" style="display: inline-block">
            <slot></slot>
        </div>
    </div>
</template>
<script>
    Vue.component('select-user', {
        template: '#select-user',
        props: {
            title: {
                type: String,
                default: '商品客户'
            },
            department_name: {
                type: String,
                default: ''
            },
            position_list: {
                type: Array,
                default: []
            },
            url: {
                type: String,
                default: 'business-card/card/select-user'
            },
            isShow: {
                type: Boolean,
                default: false
            },
            department_id: {
                type: Number,
                default: 0
            }
        },
        data() {
            return {
                dialogLoading: false,
                visible: false,
                listLoading: false,
                list: [],
                total_count:1,
                pageSize:20,
                pagination: null,
                radioSelection: 0,
                nickname: null,
                personnelForm: {role_type: "", position_id: '', user_ids: []}
            }
        },
        methods: {
            close(){
                this.visible=false;
                this.$emit('close');
            },
            click() {
                this.getDetail(1);
                this.visible = !this.visible;
            },
            getDetail(page) {
                this.list = [];
                this.listLoading = true;
                let params = Object.assign({
                    r: this.url,
                    keyword: this.nickname,
                    page: page
                }, this.params);
                request({
                    params: params
                }).then(e => {
                    this.listLoading = false;
					//console.log("商品的数据=="+JSON.stringify(e))
                    if (e.data.code === 0) {
                        this.list = e.data.data.list;
                        this.pagination = e.data.data.pagination;
                        this.pagination.pageSize = e.data.data.page_size;
                        this.pagination.total_count = this.pagination.totalCount;
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.listLoading = false;
                });
            },
            handleSelectionChange(val) {
                for(let i = 0; i <= val.length; i++) {
                    for (let k in val[i]) {
                        if(k == 'id') {
                            this.personnelForm.user_ids.push(val[i][k])
                        }
                    }
                }
            },
            confirm() {
                this.visible = false;
                this.$emit('selected', this.personnelForm);
            }
        }
    })
</script>