channel_manage/src/views/distribution/peopleManage/index.vue

<!--
 * @Descripttion: 分销员管理
 * @version: 1.0
 * @Author: zzx
 * @Date: 2024-11-09 16:08:16
 * @LastEditors: zzx
 * @LastEditTime: 2024-11-19 16:08:16
-->
<template>
    <div class="app-container">
        <el-card class="filter-container" shadow="hover">
            <div>
                <i class="el-icon-search"></i>
                <span>筛选搜索</span>
                <el-button style="float: right" type="primary" @click="handleSearchList()" size="small">
                    查询搜索
                </el-button>
                <el-button style="float: right; margin-right: 15px" @click="handleResetSearch()" size="small">
                    重置
                </el-button>
            </div>
            <div style="margin-top: 15px">
                <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
                    <el-form-item label="分销员姓名：">
                        <el-input v-model="listQuery.ecName" class="input-width" placeholder="请输入用户名称"
                            clearable></el-input>
                    </el-form-item>
                    <el-form-item label="手机号：">
                        <el-input v-model="listQuery.phone" class="input-width" placeholder="请输入手机号码"
                            clearable></el-input>
                    </el-form-item>
                    <el-form-item label="分销员层级：">
                        <el-select v-model="listQuery.level" clearable placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="更新时间：">
                        <el-date-picker v-model="date" size="small" value-format="yyyy-MM-dd"
                            class="item-width-350 ml10" type="datetimerange" range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
        <el-card class="operate-container" shadow="hover">
            <i class="el-icon-tickets"></i>
            <span>数据列表</span>
        </el-card>
        <div class="table-container">
            <el-table ref="adminTable" :data="list" style="width: 100%" v-loading="listLoading" border>
                <el-table-column label="分销员编号" width="100" align="center" prop="number"></el-table-column>
                <el-table-column label="分销员姓名" align="center" prop="userName"></el-table-column>
                <el-table-column label="分销员层级" align="center">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.type == 1 || scope.row.type == null" type="info">普通用户</el-tag>
                        <el-tag v-else-if="scope.row.type == 2" type="success">一级分销</el-tag>
                        <el-tag v-else="scope.row.type == 3" type="warning">二级分销</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="手机号" align="center" prop="phone"></el-table-column>
                <el-table-column label="身份证号码" align="center" prop="card"></el-table-column>
                <el-table-column label="银行卡号" align="center" prop="bankCard"></el-table-column>
                <el-table-column label="开户行" align="center" prop="depositBank"></el-table-column>
                <el-table-column label="佣金比例%" align="center" prop="level"></el-table-column>
                <el-table-column label="更新人" align="center" prop="updateBy"></el-table-column>
                <el-table-column label="更新时间" align="center" prop="updateTime"></el-table-column>
                <el-table-column label="操作" width="300" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" plain @click="checkQrCode(scope.row)">
                            查看二维码</el-button>
                        <el-button size="mini" type="success" plain
                            @click="checkJunior(scope.$index, scope.row)">查看下级</el-button>
                        <el-button size="mini" :disabled="scope.row.isSelf==0" type="info" plain @click="userEdit(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination-container">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                layout="total, sizes,prev, pager, next,jumper" :current-page.sync="listQuery.pageNum"
                :page-size="listQuery.pageSize" :page-sizes="[10, 15, 20]" :total="total">
            </el-pagination>
        </div>
        <el-dialog title="编辑分销员" :visible.sync="forbiddenDialogVisible" width="30%">
            <el-form :model="admin" ref="adminForm" label-width="150px" size="small">
                <el-form-item label="分销员编号：">
                    <el-input disabled v-model="admin.number" style="width: 250px"></el-input>
                </el-form-item>
                <el-form-item label="分销员姓名：">
                    <el-input v-model="admin.userName" style="width: 250px"></el-input>
                </el-form-item>
                <el-form-item label="分销员层级：">
                    <el-input type="text" disabled v-if="admin.type == 1 || admin.type == null" value="普通用户"
                        style="width: 250px"></el-input>
                    <el-input type="text" disabled v-else-if="admin.type == 2" value="一级分销"
                        style="width: 250px"></el-input>
                    <el-input type="text" disabled v-else="admin.type == 3" value="二级分销"
                        style="width: 250px"></el-input>
                </el-form-item>
                <el-form-item label="手机号：">
                    <el-input v-model="admin.phone" disabled type="number" style="width: 250px"></el-input>
                </el-form-item>
                <el-form-item label="身份证号码：">
                    <el-input v-model="admin.card" type="text" :rows="5" style="width: 250px"></el-input>
                </el-form-item>
                <el-form-item label="银行卡号：">
                    <el-input v-model="admin.bankCard" type="text" :rows="5" style="width: 250px"></el-input>
                </el-form-item>
                <el-form-item label="开户行：">
                    <el-input v-model="admin.depositBank" type="text" :rows="5" style="width: 250px"></el-input>
                </el-form-item>
                <el-form-item label="佣金比例：">
                    <el-input disabled v-model="admin.level" type="text" :rows="5" style="width: 250px"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="forbiddenDialogVisible = false" size="small">取 消</el-button>
                <el-button type="primary" @click="confirmEdit" size="small">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="查看二维码" :visible.sync="checkQrCodeDialogVisible" width="20%">
            <div style="text-align: center;">
                <el-image class="qrCode" style="" :src="qrCodeImg">
                    <div slot="error" class="image-slot">
                        <i class="el-icon-loading"></i>
                    </div>
                </el-image>
            </div>
            <div style="text-align: center;margin-top: 20px;">
                <el-button type="success" @click="downloadQrCode" lazy size="mini">下载二维码</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { peopleList, getQrcode,peopleEdit } from "@/api/distribution";
import { formatDate } from "@/utils/date";

const defaultListQuery = {
    pageNum: 1,
    pageSize: 10,
    ecName: null,
    phone: null,
    startTime: '',
    endTime: '',
    level: ''
};
const defaultAdmin = {
    id: null,
    username: null,
    password: null,
    nickName: null,
    email: null,
    note: null,
    status: 1,
};
export default {
    name: "peopleManage",
    data() {
        return {
            date: "",
            qrCodeImg: "",
            listQuery: Object.assign({}, defaultListQuery),
            list: null,
            total: null,
            listLoading: false,
            admin: Object.assign({}, defaultAdmin),
            forbiddenDialogVisible: false,
            checkQrCodeDialogVisible: false,
            options: [{
                value: 2,
                label: '一级'
            }, {
                value: 3,
                label: '二级'
            }],
        };
    },
    watch: {
        date(val) {
            if (val) {
                this.listQuery.startTime = Date.parse(val[0]);
                this.listQuery.endTime = Date.parse(val[1]);
            } else {
                this.listQuery.startTime = "";
                this.listQuery.endTime = "";
            }
        },
    },
    created() {
        this.getList();
    },
    filters: {
        formatDateTime(time) {
            if (time == null || time === "") {
                return "N/A";
            }
            let date = new Date(time);
            return formatDate(date, "yyyy-MM-dd hh:mm:ss");
        },
    },
    methods: {
        // 编辑
        userEdit(row) {
            this.forbiddenDialogVisible = true;
            this.admin = row;
        },
        confirmEdit(){
            let data={
                userName: this.admin.userName,
                adminUserId: this.admin.adminUserId,
                bankCard: this.admin.bankCard,
                card: this.admin.card,
                depositBank: this.admin.depositBank,
            }
            peopleEdit({...data}).then(res => {
                if(res.code == 200){
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                    this.forbiddenDialogVisible = false;
                    this.getList();
                }
            })
        },

        // 查看二维码
        checkQrCode(row) {
            this.checkQrCodeDialogVisible = true;
            getQrcode({ adminUserId: row.adminUserId, userId: row.id }).then(res => {
                const blob = new Blob([res.data], { type: 'image/png' });
                const objectUrl = URL.createObjectURL(blob);
                this.qrCodeImg = objectUrl;
            })
        },

        // 下载
        downloadQrCode() {
            const a = document.createElement('a');
            a.href = this.qrCodeImg;
            a.download = '二维码.jpg'; // 下载后的文件名
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
        },

        // 查看下级
        checkJunior(index, row) {
            this.$router.push({
                name: "junior",
                query: {
                    adminUserId: row.adminUserId,
                },
            });
        },
        handleResetSearch() {
            this.listQuery = Object.assign({}, defaultListQuery);
        },
        handleSearchList() {
            this.listQuery.pageNum = 1;
            this.getList();
        },
        handleSizeChange(val) {
            this.listQuery.pageNum = 1;
            this.listQuery.pageSize = val;
            this.getList();
        },
        handleCurrentChange(val) {
            this.listQuery.pageNum = val;
            this.getList();
        },
        getList() {
            this.listLoading = true;
            peopleList(this.listQuery).then((response) => {
                this.listLoading = false;
                this.list = response.data.list;
                this.total = response.data.total;
            });
        },
    },
};
</script>
<style scoped>
.peoplePagination {
    margin-top: 10px;
    display: flex;
    justify-content: right;
}

.qrCode {
    width: 110px;
    height: 110px;
    border-radius: 6px;
}
</style>