qimall/addons/IssueCoupons/backend/views/components/user-select.php

<template id="user-select">
    <div>
        <el-dialog title="选择会员" :visible.sync="dialogVisible" width="500px" @close="dialogClose">
            <div v-loading='loading'>
                <div class="check_box flex flex-y-center" style="margin-bottom: 20px;">
                    <el-form>
                        <el-form-item label="会员名称" prop="title" label-width="150px">
                            <el-input v-model="keyword" placeholder='请输入会员名称' size="small" style="width: 50%;"></el-input>
                        </el-form-item>
                        <el-form-item label="会员id" prop="user_id" label-width="150px">
                            <el-input v-model="user_id" placeholder='请输入会员id' size="small" style="width: 50%;"></el-input>
                        </el-form-item>
                        <el-form-item label="会员手机号码" prop="mobile" label-width="150px">
                            <el-input v-model="mobile" placeholder='请输入会员手机号码' size="small" style="width: 50%;"></el-input>
                            <el-button type="primary" size="small" @click="query">查询</el-button>
                            <el-button type="danger" @click="resetQuery" size="small" v-if="show_clear_search_btn">清除条件</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <el-table :data="tableData" ref="multipleTable" key='user' :row-key="getRowKeys" border style="width: 100%" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" :reserve-selection="true" width="60" align='center'></el-table-column>
                    <el-table-column prop="id" label="序号" width="80" align='center'></el-table-column>
                    <el-table-column label="会员" width="180" >
                        <template slot-scope="scope">
                            <div class="user_img" v-if="scope.row.id>0">
                                <el-image class="default-avatar" :src="scope.row.avatar_url">
                                    <div slot="error" class="image-slot">
                                        <com-image src="/resources/img/common/default-avatar.png"></com-image>
                                    </div>
                                </el-image>
                            </div>
                            <div class="user_img" v-else>
                                <el-image class="default-avatar" :src="scope.row.user_avatar_url">
                                    <div slot="error" class="image-slot">
                                        <com-image src="/resources/img/common/default-avatar.png"></com-image>
                                    </div>
                                </el-image>
                            </div>
                            <div>
                                <div style="color:#000;" v-if="scope.row.id>0">{{scope.row.nickname}}</div>
                                <div style="color:#000;" v-else>{{scope.row.user_name}}</div>
                                <div style="font-size: 13px;" v-if="scope.row.id>0">{{scope.row.mobile}}</div>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="check_pagination flex">
                    <el-pagination @current-change="pagination" background layout="prev, pager, next" :page-count="pageCount"></el-pagination>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="chooseSure" size="small">确 定</el-button>
                <el-button @click="dialogVisible = false" size="small">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<style>
    /*头像样式 start*/
    .default-avatar{
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }
    .user_img{
        position: relative;
        margin-right: 8px;
        height: 50px;
        width: 50px;
    }
    .el-table_1_column_3 .cell { /*-2 表示在第二行*/
        display: flex;
    }
    /*头像样式 end*/
</style>
<script>
    Vue.component('user-select', {
        template: '#user-select',
        props: {
            user_arr: {
                type: Array,
                default: function() {
                    return [];
                }
            },
            userLoading:{
                type:Boolean,
                default:false
            },
        },
        data() {
            return {
                loading: false,
                dialogVisible: false,
                form: {},
                staging_arr:[],
                tableData:[],
                keyword:null,
                mobile:null,
                user_id:null,
                page:1,
                pageCount:0,
            }
        },
        watch: {
            userLoading: function(newVal) {
                if (newVal) {
                    this.dialogVisible = true;
                    if (this.user_arr.length == 0 && this.$refs.multipleTable) {
                        this.$refs.multipleTable.clearSelection();// 清空选择
                    }
                    this.getuser();
                }
            },
        },
        computed: {
            show_clear_search_btn: function() {
                return this.mobile!=null||this.user_id!=null||this.keyword != null;
            },
        },
        methods: {
            query() {
                this.page = 1;
                this.getuser();
            },
            resetQuery() {// 清空查询条件
                this.keyword = null;
                this.user_id = null;
                this.mobile = null;
                this.page = 1;
                this.getuser();
            },
            pagination(currentPage) {
                let self = this;
                self.page = currentPage;
                self.getuser();
            },
            getuser() {
                this.loading2 = true;
                request({
                    params: {
                        r: 'issue-coupons/default/select-user',
                    },
                    data: {
                        page: this.page,
                        limit: 10,
                        keyword: this.keyword,
                        mobile: this.mobile,
                        user_id: this.user_id,
                    },
                    method: 'post',
                }).then(e => {
                    this.loading2 = false;
                    if (e.data.code == 0) {
                        this.tableData = e.data.data.list;
                        let user_arr_length = this.user_arr.length;
                        this.tableData.forEach(item => {
                            this.$set(item, 'num', 1);
                            if (user_arr_length > 0) {
                                this.user_arr.forEach(row => {
                                    if (item.id == row.user_id) {
                                        // 已选的会员被勾选
                                        this.$refs.multipleTable.toggleRowSelection(item);
                                        this.$set(item, 'num', row.num);
                                    }
                                });
                            }
                        })
                        this.pageCount = e.data.data.page_count;
                    } else {
                        this.$message.error(e.data.msg);
                    }
                })
            },
            getRowKeys(rows) {
                return rows.id
            },
            handleSelectionChange(val) { //会员选择事件
                this.staging_arr = val;
            },
            chooseSure() { //确定选择券
                this.dialogVisible = false;
                let self = this;
                let new_arr = [];
                this.staging_arr.forEach(function (item) {
                    let is_push = true;
                    if (self.user_arr) {
                        for (let index in self.user_arr) {
                            let row = self.user_arr[index];
                            if (item.id == row.user_id) {
                                is_push = false;
                                self.$set(row, 'num', item.num);
                                return false;// 终止本次循环
                            }
                        }
                    }

                    if (is_push) {
                        new_arr.push({
                            use_id: item.id,
                            name: item.nickname?item.nickname:item.username,
                        });
                    }
                });
                //self.user_arr.push(...new_arr);
                this.$emit('submit',new_arr);
            },
            dialogClose() {
                this.$emit('close')
            },
        }
    })
</script>