935090232@qq.com
2021-04-14 95f9ea7eb339c36cade6c67d0385c49ec2d81477
zq-erp/src/main/resources/templates/views/admin/fenxiao/fenxiao-apply.html
New file
@@ -0,0 +1,219 @@
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org" xmlns:matrix="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <LINK rel="Bookmark" href="../images/favicon.ico">
    <!-- 本框架基本脚本和样式 -->
    <script type="text/javascript" th:src="@{/js/systools/MBaseVue.js}"></script>
    <link rel="stylesheet" th:href="@{/plugin/element-ui/index.css}">
    <link th:href="@{/css/styleOne/style.min.css}" rel="stylesheet" type="text/css"/>
    <title></title>
    <style>
        .panel-body{
            overflow: hidden;
        }
        .paginationStyle{
            background: #ffffff;
            padding: 10px 10px;
            margin: 0px 0px 10px 0px;
            text-align: right;
        }
    </style>
</head>
<body>
<div class="panel-body" id="app">
    <el-row style="display:flex;align-items: center;text-align: right;">
        <el-col>
            <el-form ref="form" :model="form" inline >
                <el-form-item prop="nickName">
                    <el-input v-model="form.nickName" placeholder="请输入会员姓名"></el-input>
                </el-form-item>
                <el-button type="primary" @click="search" >搜索</el-button>
                <el-button @click="resetForm('form')">重置</el-button>
            </el-form>
        </el-col>
    </el-row>
    <el-row class="table-style"  style="margin-left: 50px;">
        <el-table id="proj" :data="table.rows"  :height="height" stripe @sort-change="sortChange">
            <el-table-column
                    label="会员">
                <template slot-scope="scope">
                    <img :src="scope.row.avatarUrl" width="40" height="40" class="head_pic"/>
                    {{scope.row.nickname}}
                </template>
            </el-table-column>
            <el-table-column
                    prop="phone"
                    label="手机号码">
            </el-table-column>
            <el-table-column
                    prop="createTime"
                    label="注册时间">
            </el-table-column>
            <el-table-column
                    prop="salesGrade"
                    label="分销等级"
                    width="180">
                <template slot-scope="scope">
                    <el-select v-model="scope.row.proJbruserValue"  @focus="getDatalist(scope.row)" placeholder="请选择" filterable allow-create>
                        <el-option v-for="item in salesGradeList " :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="addSaleManApply(scope.row)">设置为分销员</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-row>
    <el-row class="paginationStyle"  >
        <el-pagination background
                       @size-change="changePageSize"
                       @current-change="changeCurrentPage"
                       :current-page="table.currentPage"
                       :page-sizes="[10, 20, 30, 50]"
                       :page-size="table.pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="table.total">
        </el-pagination>
    </el-row>
</div>
</body>
<script type="text/javascript" th:src="@{/js/plugin/jquery-2.1.4.min.js}"></script>
<script type="text/javascript" th:src="@{/js/plugin/jquery.query.js}"></script>
<script type="text/javascript" th:src="@{/plugin/layer/layer.js}"></script>
<script type="text/javascript" th:src="@{/js/systools/AjaxProxyVue.js}"></script>
<script type="text/javascript" th:src="@{/js/plugin/vue.js}"></script>
<script type="text/javascript" th:src="@{/plugin/element-ui/index.js}"></script>
<script type="text/javascript" th:src="@{/plugin/moment.min.js}"></script>
<script type="text/javascript" th:inline="javascript">
    var vue = new Vue({
        el: '#app',
        data: {
            table:{
                rows:[],
                total:0,
                pageSize:10,
                currentPage:1,
            },
            form:{
                nickName:'',
                order:'',
                sort:''
            },
            proJbruserValue : "",
            salesGradeList: [],
            height:'calc(100vh - 240px)',
        },
        created: function () {
            this.loadData();
            window.addEventListener("keydown", this.keydown);
        },
        methods: {
            //设置为分销员
            addSaleManApply(row){
                let _this = this;
                let userId = row.userId;
                let openId = row.openId;
                let gradeId = row.proJbruserValue;
                let obj = {
                    userId: userId,
                    openId: openId,
                    gradeId: gradeId,
                }
                AjaxProxy.requst({
                    app: _this,
                    data:obj,
                    url: basePath + '/fenXiao/fenXiaoUser/addSaleManApply',
                    callback: function (data) {
                        _this.$message.success(data.info);
                        this.loadData();
                    }
                });
            },
            // select下拉框获取焦点的时候查询对应的下拉框数据源
            getDatalist(row) {
                let _this = this;
                AjaxProxy.requst({
                    app: _this,
                    data:[],
                    url: basePath + '/fenXiao/fenXiaoUser/getShopSalesmanGrade',
                    callback: function (data) {
                        _this.salesGradeList = data.mapInfo.salesGrade;
                    }
                });
            },
            changePageSize(val) {
                this.table.pageSize = val;
                this.loadData();
            },
            changeCurrentPage(val) {
                this.table.currentPage = val;
                this.loadData();
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            sortChange:function (column){
                if(column.order){
                    if(column.order.indexOf("desc")){
                        this.form.order="desc";
                    }else{
                        this.form.order="asc";
                    }
                    this.form.sort=column.prop;
                    this.loadData();
                }
            },
            loadData:function(){
                let _this = this;
                let data=_this.getRequestParam();
                data.pageSize=_this.table.pageSize;
                data.pageNum=_this.table.currentPage;
                AjaxProxy.requst({
                    app: _this,
                    data:data,
                    url: basePath + '/fenXiao/fenXiaoUser/findShopSalesmanAppliingList',
                    callback: function (data) {
                        _this.table.rows = data.rows;
                        _this.table.total=data.total;
                    }
                });
            },
            getRequestParam(){
                let _this = this;
                return   {
                    nickName:_this.form.nickName,
                    order:_this.form.order,
                    sort:_this.form.sort,
                }
            },
            search:function(){
                this.table.currentPage=1;
                this.loadData();
            },
            keydown(evt){
                if(evt.keyCode==13) {
                    this.search();
                }
            }
        }
    });
</script>
</body>
</html>