|
@@ -0,0 +1,285 @@
|
|
|
+<template>
|
|
|
+
|
|
|
+ <div class="app-container">
|
|
|
+ <el-card class="filter-container" shadow="never">
|
|
|
+ <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.userName" 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.value" 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="never">
|
|
|
+ <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" 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" 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" 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" 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="handleDialogConfirm()" size="small">确 定</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ <el-dialog title="查看下级分销员" :visible.sync="checkDialogVisible" width="80%">
|
|
|
+ <el-table ref="adminTable" :data="juniorlist" 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">
|
|
|
+ </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>
|
|
|
+ <div class="peoplePagination">
|
|
|
+ <el-pagination background @size-change="juniorhandleSizeChange" @current-change="juniorhandleCurrentChange"
|
|
|
+ layout="total, sizes,prev, pager, next,jumper" :current-page.sync="juniorQuery.pageNum"
|
|
|
+ :page-size="juniorQuery.pageSize" :page-sizes="[10, 15, 20]" :total="juniorTotal">
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <el-dialog title="查看二维码" :visible.sync="checkQrCodeDialogVisible" width="20%">
|
|
|
+ <span>二维码</span>
|
|
|
+ <el-button type="primary" @click="handleDialogConfirm()" size="mini">下载二维码</el-button>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { peopleList,getJuniorList,getQrcode } from "@/api/distribution";
|
|
|
+import { formatDate } from "@/utils/date";
|
|
|
+
|
|
|
+const defaultListQuery = {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ userName: null,
|
|
|
+ phone: null,
|
|
|
+ startTime: '',
|
|
|
+ endTime: '',
|
|
|
+ value: ''
|
|
|
+};
|
|
|
+const juniorListQuery = {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ userId: null,
|
|
|
+};
|
|
|
+const defaultAdmin = {
|
|
|
+ id: null,
|
|
|
+ username: null,
|
|
|
+ password: null,
|
|
|
+ nickName: null,
|
|
|
+ email: null,
|
|
|
+ note: null,
|
|
|
+ status: 1,
|
|
|
+};
|
|
|
+export default {
|
|
|
+ name: "upCheck",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ date: "",
|
|
|
+ listQuery: Object.assign({}, defaultListQuery),
|
|
|
+ juniorQuery: Object.assign({}, juniorListQuery),
|
|
|
+ list: null,
|
|
|
+ juniorlist: null,
|
|
|
+ total: null,
|
|
|
+ juniorTotal: null,
|
|
|
+ listLoading: false,
|
|
|
+ admin: Object.assign({}, defaultAdmin),
|
|
|
+ forbiddenDialogVisible: false,
|
|
|
+ checkDialogVisible: false,
|
|
|
+ checkQrCodeDialogVisible: false,
|
|
|
+ options: [{
|
|
|
+ value: 1,
|
|
|
+ label: '普通用户'
|
|
|
+ }, {
|
|
|
+ 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;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 查看二维码
|
|
|
+ checkQrCode(row){
|
|
|
+ this.checkQrCodeDialogVisible = true;
|
|
|
+ getQrcode({adminUserId:row.adminUserId,userId:row.id}).then((res) => {
|
|
|
+ if (res.code == 200) {
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 查看下级
|
|
|
+ checkJunior(index, row) {
|
|
|
+ this.juniorQuery.userId=row.id
|
|
|
+ this.checkDialogVisible = true;
|
|
|
+ getJuniorList(this.juniorQuery).then((res) => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.juniorList = res.data.list;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ 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();
|
|
|
+ },
|
|
|
+ juniorhandleSizeChange(val) {
|
|
|
+ this.juniorQuery.pageNum = 1;
|
|
|
+ this.juniorQuery.pageSize = val;
|
|
|
+ // this.getList();
|
|
|
+ },
|
|
|
+ juniorhandleCurrentChange(val) {
|
|
|
+ this.juniorQuery.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;
|
|
|
+}
|
|
|
+</style>
|