update

src/components/pagination.vue

@@ -0,0 +1,51 @@
+<template>
+  <div id="pagination">
+    <el-row type="flex" align="middle" style="padding-top:1rem">
+      <el-col :span="24" :style="`text-align:${position};`">
+        <el-pagination
+          background
+          layout=" total, prev, pager, next"
+          :total="total"
+          :page-size="limit"
+          :current-page.sync="currentPage"
+          @current-change="changePage"
+        >
+        </el-pagination>
+        <!-- 
+          :page-sizes="[5, 10, 15, 20, 50, 100]"
+          @size-change="sizeChange"
+         -->
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash';
+export default {
+  name: 'pagination',
+  props: {
+    position: { type: String, default: 'right' },
+    total: { type: Number, default: 0 },
+  },
+  components: {},
+  data: () => {
+    return {
+      currentPage: 1,
+      limit: 10,
+    };
+  },
+  created() {},
+  methods: {
+    changePage(page) {
+      this.$emit('query', { skip: (page - 1) * this.limit, limit: this.limit });
+    },
+    sizeChange(limit) {
+      this.limit = limit;
+      this.$emit('query', { skip: 0, limit: this.limit });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/layout/layout-part/newmenu.vue

@@ -32,7 +32,7 @@
 </template>
 
 <script>
-import { index, personnel, government, record, policy, serve, enterprise, duijiehui, site, user, links, defaultMenu } from '@/util/role_menu.js';
+import { index, personnel, government, record, policy, serve, enterprise, duijiehui, site, user, links, defaultMenu, vip } from '@/util/role_menu.js';
 import * as menus from '@/util/role_menu.js';
 import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions } = createNamespacedHelpers('login');
@@ -52,10 +52,9 @@ export default {
   methods: {
     ...mapActions(['toGetMenu', 'logout']),
     async search() {
-      console.log(this.user);
       if (!this.user.uid) return;
       if (this.user.role == '1') {
-        this.menu.push(index, ...defaultMenu, personnel, government, record, policy, serve, enterprise, duijiehui, site, user, links);
+        this.menu.push(index, ...defaultMenu, vip, personnel, government, record, policy, serve, enterprise, duijiehui, site, user, links);
         return;
       }
       const res = await this.toGetMenu({ id: this.user.uid });

src/router/index.js

@@ -250,6 +250,12 @@ const routes = [
     meta: { title: '子管理员管理' },
     component: () => import('../views/admin-user/index.vue'),
   },
+  // vip用户
+  {
+    path: '/vip/index',
+    meta: { title: 'vip管理' },
+    component: () => import('../views/vip-user/index.vue'),
+  },
 ];
 
 const router = new VueRouter({
@@ -257,6 +263,10 @@ const router = new VueRouter({
   base: process.env.NODE_ENV === 'development' ? '' : process.env.VUE_APP_ROUTER,
   routes,
 });
-checkLogin(router);
+checkLogin(router, () => {
+  let url = process.env.NODE_ENV === 'development' ? null : `/platlive/login`;
+  if (url) window.location.href = url;
+  else console.log('开发环境自己弄');
+});
 
 export default router;

src/util/role_menu.js

@@ -2,7 +2,10 @@ export const index = {
   name: '首页',
   path: '/',
 };
-
+export const vip = {
+  name: 'vip用户',
+  path: '/vip/index',
+};
 export const government = {
   name: '科技政务',
   path: '/government/index',

src/views/admin-user/index.vue

@@ -13,6 +13,7 @@
         </el-col>
       </el-col>
     </el-row>
+    <pages :total="total" @query="search"></pages>
     <el-drawer title="子管理员" :visible.sync="drawer" direction="rtl" @closed="handleClose" :destroy-on-close="true">
       <data-form :fields="formFields" :data="form" :rules="{}" @save="drawerSave" :isNew="drawerIsNew"> </data-form>
     </el-drawer>
@@ -20,6 +21,7 @@
 </template>
 
 <script>
+import pages from '@/components/pagination.vue';
 import dataTable from '@/components/data-table.vue';
 import topInfo from '@/layout/public/top.vue';
 import dataForm from '@/components/form.vue';
@@ -32,6 +34,7 @@ export default {
     topInfo, //头部标题
     dataTable,
     dataForm,
+    pages,
   },
   data: () => {
     return {

src/views/vip-user/index.vue

@@ -0,0 +1,152 @@
+<template>
+  <div id="index">
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-col :span="24" class="top">
+          <topInfo :topTitle="pageTitle"></topInfo>
+          <el-col :span="24" class="topAdd">
+            <el-button type="primary" size="mini" @click="toAdd()"><i class="el-icon-plus"></i>添加vip用户</el-button>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="main">
+          <data-table :fields="fields" @delete="toDelete" :data="list" :opera="opera" @edit="toEdit" :usePage="false"></data-table>
+        </el-col>
+      </el-col>
+    </el-row>
+    <pages :total="total" @query="search"></pages>
+    <el-drawer title="VIP用户" :visible.sync="drawer" direction="rtl" @closed="handleClose" :destroy-on-close="true">
+      <data-form :fields="formFields" :data="form" :rules="{}" @save="drawerSave" :isNew="drawerIsNew"> </data-form>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+import pages from '@/components/pagination.vue';
+import dataTable from '@/components/data-table.vue';
+import topInfo from '@/layout/public/top.vue';
+import dataForm from '@/components/form.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: authUser } = createNamespacedHelpers('authUser');
+export default {
+  name: 'index',
+  props: {},
+  components: {
+    topInfo, //头部标题
+    dataTable,
+    dataForm,
+    pages,
+  },
+  data: () => {
+    return {
+      drawer: false,
+      form: {},
+      drawerIsNew: true,
+      opera: [
+        {
+          label: '编辑',
+          icon: 'el-icon-edit',
+          method: 'edit',
+        },
+        {
+          label: '删除',
+          icon: 'el-icon-delete',
+          method: 'delete',
+          confirm: true,
+        },
+      ],
+      fields: [
+        { label: '用户名', prop: 'name', model: 'name' },
+        { label: '手机号', prop: 'phone', model: 'phone' },
+        { label: '备注', prop: 'remark', model: 'phone' },
+      ],
+      formFields: [
+        { label: '用户名', model: 'name' },
+        { label: '手机号', model: 'phone' },
+        { label: '密码', model: 'passwd', type: 'password' },
+        { label: '备注', model: 'remark' },
+      ],
+      list: [],
+      total: 0,
+    };
+  },
+  created() {
+    this.search();
+  },
+  methods: {
+    ...authUser(['query', 'update', 'create']),
+    async search({ skip = 0, limit = 10, ...info } = {}) {
+      const res = await this.query({ skip, limit, ...info, role: '5' });
+      if (this.$checkRes(res)) {
+        this.$set(this, `list`, res.data);
+        this.$set(this, `total`, res.total);
+      }
+    },
+    toAdd() {
+      this.drawer = true;
+    },
+    async drawerSave({ data, isNew }) {
+      let res;
+      let msg;
+      if (isNew) {
+        data.role = '5';
+        res = await this.create(data);
+        msg = '创建成功';
+      } else {
+        res = await this.update(data);
+        msg = '修改成功';
+      }
+      if (this.$checkRes(res, msg, res.errmsg)) {
+        this.handleClose();
+        this.search();
+      }
+    },
+    toEdit({ data }) {
+      this.$set(this, 'form', data);
+      this.drawer = true;
+      this.drawerIsNew = false;
+    },
+    async toDelete({ data }) {
+      const res = await this.delete(data.id);
+      if (this.$checkRes(res, '删除成功', res.errmsg || '删除失败')) this.search();
+    },
+    handleClose() {
+      this.drawer = false;
+      this.form = {};
+      this.drawerIsNew = true;
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  padding: 20px;
+  margin: 10px 20px;
+  border: 1px solid #ccc;
+  width: 96%;
+}
+.column {
+  width: 258px;
+  min-height: 500px;
+  border: 1px solid #ccc;
+  margin: 0 20px 0 0;
+}
+.top .topAdd {
+  padding: 0 10px 0 0;
+  text-align: right;
+}
+.message {
+  border: 1px solid #ccc;
+  min-height: 500px;
+  // min-width: 715px;
+}
+</style>