新增用户注册页面

src/api/zhuceyonghu.js

@@ -0,0 +1,22 @@
+import request           from '@/utils/request';
+
+const pre = `/user/tiyan`
+
+export function getZhuceList(data = {}) {
+    return request({
+                       url:    `${pre}/list`,
+                       method: 'post',
+                       data,
+                   });
+}
+
+export function getZhuceUpdate(data = {}) {
+    return request({
+                       url:    `${pre}/update`,
+                       method: 'post',
+                       data,
+                   });
+}
+
+
+

src/views/management/yonghuzhuce/components/Pagination.vue

@@ -0,0 +1,93 @@
+<template>
+    <el-pagination
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page.sync="page"
+            :page-sizes="pageSizes"
+            :page-size="size"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="total">
+    </el-pagination>
+</template>
+
+<script>
+    export default {
+        name:     'Pagination',
+        props:    {
+            pageSizes: {
+                type:    Array,
+                default: () => [],
+            },
+            codePage: {
+                type: String,
+                default: 'page'
+            },
+            codeSize: {
+                type: String,
+                default: 'size'
+            },
+            codeTotal: {
+                type: String,
+                default: 'total'
+            }
+        },
+        inject:   {
+            paginationServiceData: {
+                type:    Object,
+                default: () => {
+                },
+            },
+            tableServiceData: {
+                type:    Object,
+                default: () => {
+                },
+            },
+        },
+        computed: {
+            page:  {
+                get() {
+                    return this.paginationServiceData[this.codePage];
+                },
+                set(val) {
+                    this.paginationServiceData[this.codePage] = val;
+                },
+            },
+            size:  {
+                get() {
+                    return this.paginationServiceData[this.codeSize];
+                },
+                set(val) {
+                    this.paginationServiceData[this.codeSize] = val;
+                },
+            },
+            total: {
+                get() {
+                    return this.paginationServiceData[this.codeTotal];
+                },
+                set(val) {
+                    this.this.paginationServiceData[this.codeTotal] = val;
+                },
+            },
+        },
+        watch:    {
+            total(newVal) {
+                if (newVal >= this.size && !this.tableServiceData.myData.length && this.page > 1) {
+                    this.page--;
+                    this.$emit('current-page', this.page);
+                }
+            },
+        },
+        methods:  {
+            handleSizeChange(val) {
+                this.$emit('size-change', val);
+            },
+            handleCurrentChange(val) {
+                this.$emit('current-page', val);
+            },
+        },
+    };
+</script>
+
+<style scoped>
+
+</style>

src/views/management/yonghuzhuce/components/SearchArea.vue

@@ -0,0 +1,96 @@
+<template>
+    <div class="admin-registration-search">
+        <div>
+            <el-input style="width: 217px;margin-right: 20px;" v-model="mtaTel" placeholder="请输入电话"></el-input>
+            <el-date-picker
+                    v-model="startTime"
+                    type="date"
+                    value-format="yyyy-MM-dd"
+                    placeholder="选择开始日期">
+            </el-date-picker>
+
+            <el-select class="select-state" v-model="state" placeholder="请选择状态">
+                <el-option
+                        v-for="item in status"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value">
+                </el-option>
+            </el-select>
+
+            <el-button class="btn-search" size="medium" @click="search">查询</el-button>
+        </div>
+        <!--<div>
+            <el-button size="medium" type="primary" @click="exportResisterData">导出</el-button>
+        </div>-->
+    </div>
+</template>
+
+<script>
+    const status = [
+        {
+            value: -1,
+            label: '全部',
+        },
+        {
+            value: 0,
+            label: '未处理',
+        },
+        {
+            value: 1,
+            label: '已处理',
+        },
+    ];
+    export default {
+        name:    'SearchArea',
+        data() {
+            return {
+                startTime: null,
+                endTime:   null,
+                status:    status,
+                state:     -1,
+                mtaTel:   null,
+            };
+        },
+        methods: {
+            search() {
+                const opt = {
+                    startTime: this.startTime,
+                    callFlag: this.state,
+                    tel:this.mtaTel,
+                };
+                this.$emit('search', opt);
+            },
+            exportResisterData() {
+                const opt = {
+                    startTime: this.startTime,
+                    callFlag: this.state,
+                    tel:this.mtaTel,
+                };
+                this.$emit('exportList', opt)
+            },
+        },
+        mounted() {
+            this.search();
+        }
+    };
+</script>
+
+<style lang="scss" scoped>
+    .admin-registration-search {
+        display: flex;
+        justify-content: space-between;
+
+        .select-state {
+            margin-left: 20px;
+        }
+
+        .line {
+            margin: 0 20px;
+        }
+
+        .btn-search {
+            margin-left: 20px;
+        }
+    }
+</style>

src/views/management/yonghuzhuce/components/Table.vue

@@ -0,0 +1,102 @@
+<template>
+    <el-table
+            :data="tableData"
+            border
+            class="table"
+            height="auto"
+            @selection-change="handleSelectionChange"
+            style="width: 100%">
+        <el-table-column
+                prop="tel"
+                label="手机号"
+                width="360">
+        </el-table-column>
+        <el-table-column
+                prop="company"
+                label="公司名称"
+                width="360">
+        </el-table-column>
+        <el-table-column
+                prop="cnt"
+                label="注册次数"
+                width="360">
+        </el-table-column>
+        <el-table-column
+                prop="createTime"
+                label="注册时间"
+                width="360">
+        </el-table-column>
+        <el-table-column
+                prop="callFlag"
+                label="状态"
+                width="200">
+            <template slot-scope="scope">
+                <span v-if="scope.row.callFlag === 0" >未处理</span>
+                <span v-else >已处理</span>
+            </template>
+        </el-table-column>
+        <el-table-column
+                label="操作"
+                fixed="right"
+        >
+            <template slot-scope="scope">
+                <el-button v-if="scope.row.callFlag === 0" type="text" @click="handleAudit(scope.row)" style="padding: 0;">处理</el-button>
+                <span v-else >已处理</span>
+            </template>
+        </el-table-column>
+    </el-table>
+</template>
+
+<script>
+    export default {
+        name:     'Table',
+        inject:   {
+            tableServiceData:      {
+                type:    Object,
+                default: () => {
+                },
+            },
+            paginationServiceData: {
+                type:    Object,
+                default: () => {
+                },
+            },
+        },
+        computed: {
+            tableData() {
+                return this.tableServiceData.myData;
+            },
+        },
+        methods:  {
+            handleSelectionChange(data) {
+                const arr = [];
+                data.forEach(item => {
+                    arr.push(item.deId);
+                });
+                this.$emit('select-change', arr);
+            },
+            handleAudit(data) {
+                this.$emit('audit', data);
+            },
+            handleUnAudit(data) {
+                this.$emit('unAudit', data);
+            },
+        },
+    };
+</script>
+
+<style lang="scss" scoped>
+    .table {
+        ::v-deep .is-leaf {
+            .cell {
+                text-align: center;
+            }
+        }
+
+        ::v-deep .el-table-column--selection {
+            .cell {
+                text-align: center;
+            }
+        }
+    }
+</style>

src/views/management/yonghuzhuce/index.vue

@@ -0,0 +1,142 @@
+<template>
+    <div class="admin-Registration-management">
+        <!--   搜索     -->
+        <SearchArea
+                @search="handleSearch"
+        ></SearchArea>
+        <!--   列表     -->
+        <MtaTable
+                class="mta-Table"
+                @audit="handleAudit"
+        ></MtaTable>
+        <!--   分页     -->
+        <MtaPagination class="my-Pagination"
+                       :pageSizes="defaultPageSizes"
+                       @size-change="handleSizeChange"
+                       @current-page="handleCurrentPage"></MtaPagination>
+    </div>
+</template>
+
+<script>
+    import SearchArea       from './components/SearchArea';
+    import MtaTable         from './components/Table';
+    import MtaPagination    from './components/Pagination';
+    import * as commonTools from '@/utils/admin/tools';
+    import Vue              from 'vue';
+    import * as zhuceyonghu     from '@/api/zhuceyonghu';
+
+    const pagination = {
+        page:  1,
+        size:  10,
+        total: 0,
+    };
+    const tableData = {
+        myData: [],
+    };
+    const defaultPageSizes = [10, 20, 30, 40];
+    const paginationServiceData = Vue.observable(pagination);
+    const tableServiceData = Vue.observable(tableData);
+
+    export default {
+        name:       'index',
+        components: {
+            SearchArea,
+            MtaTable,
+            MtaPagination,
+        },
+        provide:    {
+            tableServiceData,
+            paginationServiceData,
+        },
+        data() {
+            return {
+                defaultPageSizes: defaultPageSizes,
+                searchOpt:        {},
+                userId:           null,
+            };
+        },
+        methods:    {
+            async handleAudit(data) {
+                const opt = {
+                    id:   data.id,
+                };
+                const loading = this.$loading({ background: 'rgba(0, 0, 0, 0.7)' });
+
+                try {
+                    const res = await zhuceyonghu.getZhuceUpdate(opt);
+                    if (res.code === 0 && res.data) {
+                        // 更新table
+                        this.getZhuceyonghuListData();
+                    }
+                    loading.close();
+                } catch (e) {
+                    loading.close();
+                }
+            },
+            handleSearch(data) {
+                paginationServiceData.page = 1;
+                this.searchOpt = data;
+                this.getZhuceyonghuListData(data);
+
+            },
+            handleSizeChange(val) {
+                paginationServiceData.size = val;
+                this.getZhuceyonghuListData();
+            },
+            handleCurrentPage(val) {
+                paginationServiceData.page = val;
+                this.getZhuceyonghuListData();
+            },
+            async getZhuceyonghuListData() {
+                const opt = Object.assign({}, this.searchOpt, paginationServiceData);
+                delete opt.total;
+
+                const loading = this.$loading({ background: 'rgba(0, 0, 0, 0.7)' });
+                try {
+                    const res = await zhuceyonghu.getZhuceList(opt);
+                    if (res.code === 0) {
+                        this.updateTable(res.data);
+                    }
+                    loading.close();
+                } catch (e) {
+                    console.log('请求异常接口：getZhuceyonghuListData');
+                    loading.close();
+                }
+            },
+            updateTable(data) {
+                console.log(data);
+                tableServiceData.myData = data.data;
+                paginationServiceData.total = data.total;
+            },
+            clearData() {
+                paginationServiceData.page = 1;
+                paginationServiceData.size = 10;
+                paginationServiceData.total = 0;
+                tableServiceData.myData = [];
+            },
+        },
+        created() {
+            const userAuth = commonTools.getUserAuth();
+            this.userId = userAuth && userAuth.userId;
+        },
+        beforeDestroy() {
+            this.clearData();
+        },
+    };
+</script>
+
+<style lang="scss" scoped>
+    .admin-Registration-management {
+        padding: 20px;
+
+        .mta-Table {
+            margin-top: 20px;
+            height: calc(100vh - 274px) !important;
+        }
+
+        .my-Pagination {
+            margin-top: 20px;
+        }
+
+    }
+</style>