qimall/addons/Clerk/backend/views/default/index.php

<?php
/**
 * 核销员管理
 */

?>
<div id="app" v-cloak>
    <el-card shadow="never" style="border:0;min-width: 1000px;" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <span>核销员管理</span>
        </div>
        <div class="table-body">
            <div style="float: right;display:inline-block ">
                <el-button type="primary" size="small" style="padding: 9px 15px !important;" @click="addbtn" icon="el-icon-plus">添加核销员
                </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>
            <div class="input-item2">
                <el-date-picker el-date-picker v-model="time" type="daterange"
                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                @change="timechange" value-format="yyyy-MM-dd">
                </el-date-picker>
            </div>

            <el-button type="primary" size="small" style="padding: 9px 15px !important;" icon="el-icon-search" @click="toSearch">搜索</el-button>
            <el-button size="small" style="padding: 9px 15px !important;" icon="el-icon-refresh-right" @click="reset">重置</el-button>

            <el-table :data="list" :default-sort = "{prop: 'time'}">
                <el-table-column   el-table-column label="会员id" prop="user_id" align="center">
                </el-table-column>
                <el-table-column label="核销员名称" width="200">
                    <template slot-scope="scope">
                        <div class="table-info-img-text">
                            <el-image class="table-info-img circle" :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 class="no_user" style="width: 50px; bottom:20px;" v-if="scope.row.status == 0">黑名单</div>
                            <div class="table-info-text">
                                <div style="color:#000;">{{scope.row.nickname}}</div>
                            </div>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column   el-table-column label="联系电话" prop="mobile" align="center">
                </el-table-column>

                <el-table-column   el-table-column label="添加时间" prop="created_at" align="center"  sortable>
                    <template slot-scope="scope">
                        {{timeformat(scope.row.created_at)}}
                    </template>
                </el-table-column>

                <el-table-column   el-table-column label="操作" align="center"  >
                    <template slot-scope="scope">
                        <el-button type="danger" size="mini"  icon="el-icon-delete" plain @click="delWriteOffCleck(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div flex="box:last cross:center">
                <div></div>
                <div>
                    <el-pagination v-if="list.length > 0" style="display: inline-block;float: right;"
                        background :page-size="pageSize" @current-change="pageChange" layout="prev, pager, next"
                        :current-page="current_page" :total="totalCount">
                    </el-pagination>
                </div>
            </div>
        </div>
    </el-card>
    <!-- 添加核销员弹层 -->
    <el-dialog
        title="新增核销员"
        :visible.sync="WriteOffCleckSjow"
        width="600px">
        <div>
            <el-form :model="addform"  label-width="100px"  ref="numberValidateForm">

                <el-form-item label="选择会员：" prop="user_id" :rules="[{required: true, message: '会员不能为空',trigger: 'change'}]">
                    <el-autocomplete size="small" v-model="add.nickname" value-key="nickname"
                        :fetch-suggestions="userquerySearchAsync" placeholder="请选择用户" @select="usershareClick">
                    </el-autocomplete>
                </el-form-item>

                <el-form-item  label="所属门店：" prop="store_id" :rules="[{required: true, message: '所属门店不能为空',trigger: 'change'}]">
                    <el-autocomplete  l-autocomplete size="small" v-model="add.store_name" value-key="store_name"
                        :fetch-suggestions="storequerySearchAsync" placeholder="请选择门店" @select="storeshareClick">
                    </el-autocomplete>
                </el-form-item>

            </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="WriteOffCleckSjow = false">取 消</el-button>
            <el-button type="primary" @click="addWriteOffCleck('numberValidateForm')">确 定</el-button>
        </span>
    </el-dialog>
</div>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            search: { // 搜索条件
                user_id: '',
                keyword:'',
                start:'',
                end:'',
                page: this.current_page
            },
            time:[],
            list:[{}], // 表格列表
            pageSize:10,
            current_page:1,
            totalCount:0,
            WriteOffCleckSjow:false, // 核销员弹层
            add: {
                nickname:'',
                store_name:'',
            },
            addform: {
                user_id:'',
                store_id:'',
            },
            userList:[],
            storeList:[]
        },
        mounted() {
            this.getDataList()
        },
        methods: {
            //  获取数据
            getDataList(search = {}) {
                    request({
                    params: {
                        r: 'clerk/default/index',
                        ...search
                    },
                    method: 'get',
                }).then(e => {
                    console.log(e.data.data);
                    this.list = e.data.data.list
                    this.page_count = e.data.data.page_count
                    this.pageSize = e.data.data.page_size
                    this.totalCount = e.data.data.count
                    // this.current_page = e.data.data.page;
                }).catch(e => {
                    this.dialogLoading = false;
                    this.$message.error('未知错误');
                });

            },
            // 添加核销员按钮
            addbtn () {
                this.WriteOffCleckSjow = true
            },
            // 获取门店列表
            getStore(cb) {
                request({
                    params: {
                        r: 'clerk/default/search-store',
                        keyword: this.add.store_name
                    },
                    method: 'get',
                }).then(e => {
                    if (e.data.code == 0) {
                        cb(e.data.data.list)
                    } else {
                        this.$message.error(e.data.msg);
                    }
                })
            },
            // 获取用户列表
            getUserlist(cb) {
                request({
                    params: {
                        r: 'clerk/default/search-user',
                        keyword: this.add.nickname
                    },
                    method: 'get',
                }).then(e => {
                    if (e.data.code == 0) {
                        cb(e.data.data.list)
                    } else {
                        this.$message.error(e.data.msg);
                    }
                })
            },
            // 添加核销员 下拉
            storeshareClick(row) {
                this.addform.store_id = row.id
            },
            usershareClick(row) {
                this.addform.user_id = row.id
            },
            // 输入建议
            userquerySearchAsync(queryString, cb) {
                this.getUserlist(cb)
            },
            storequerySearchAsync(queryString, cb) {
                this.getStore(cb)
            },
            // 切换分页
            pageChange(v) {
                console.log(v);
                this.search.page = v
                this.getDataList(this.search)
            },
            // 删除核销员
            delWriteOffCleck(id) {
                // console.log(id);
                let self = this;
                self.$confirm('删除该分销商, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    self.listLoading = true;
                    request({
                        params: {
                            r: 'clerk/default/del',

                        },
                        data: {
                            id
                        },
                        method: 'post',
                    }).then(e => {
                        if (e.data.code === 0) {
                            self.$message.success(e.data.msg);
                            self.getDataList(this.search)
                        } else {
                            self.$message.error(e.data.msg);
                        }
                    }).catch(e => {
                        self.dialogLoading = false;
                        self.$message.error('未知错误');
                    });

                }).catch(() => {
                    self.$message.info('已取消删除')
                });


            },
            // 添加核销员
            addWriteOffCleck(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        request({
                            params: {
                                // contentType: "application/x-www-form-urlencoded",
                                // contentType: "x-www-form-urlencoded",
                                // contentType: "multipart/form-data",
                                contentType: "form-data",
                                r: 'clerk/default/edit',

                            },
                            data: this.addform,
                            method: 'post',
                        }).then(e => {
                            console.log(e);
                            this.$message.info(e.data.msg)
                            this.WriteOffCleckSjow = false
                            this.getDataList(this.search)
                        }).catch(() => {
                            this.$message.info('未知错误')
                        });
                    } else {
                        return false;
                    }
                });
            },
            loadData() {
                this.getDataList(this.search)
            },
            // 搜索
            toSearch() {
                this.getDataList(this.search)
            },
            timechange(v) {
                if(v == null) {
                    v = ['','']
                    this.time = ['','']
                    this.search.start = null
                    this.search.end = null
                }else {
                    this.search.start = v[0] + ' 00:00:00'
                    this.search.end = v[1] + ' 00:00:00'
                }
                this.getDataList(this.search)
            },
            // 重置
            reset() {
                this.search = {
                    user_id: '',
                    keyword:'',
                    start:'',
                    end:'',
                    page:1
                },
                this.getDataList(this.search)
            },
            // 时间格式化
            timeformat(v) {
                let time = new Date(v*1000)
                return time.getFullYear() +'/'+(time.getUTCMonth()+1)+'/'+time.getDate() + ' '+ (time.getHours()<10?'0' +time.getHours():time.getHours()) +':'+ (time.getMinutes()<10?'0'+time.getMinutes():time.getMinutes()) + ':'+ (time.getSeconds()<10?'0'+time.getSeconds():time.getSeconds())
            }
        }
    });
</script>
<style>
    .table-body{
        padding: 20px;
        background-color: #fff;
    }
    .input-item {
        width: 250px;
        margin: 0 10px 20px;
        display: inline-block;
    }
    .input-item2 {
        width: 350px;
        margin: 0 10px 20px;
        display: inline-block;
    }
</style>