管理员界面

src/api/index.js

@@ -24,8 +24,52 @@ function login_out_api(token) {
   });
 }
 
+function user_info_api(data) {
+  return service({
+    url: '/admin/users/list',
+    method: 'POST',
+    data,
+  });
+}
+
+function user_del_api(data) {
+  return service({
+    url: '/admin/users/delete/' + data,
+    method: 'DELETE',
+  });
+}
+
+function user_add_api(data) {
+  return service({
+    url: '/admin/users/add',
+    method: 'POST',
+    data,
+  });
+}
+
+function user_role_api(data) {
+  return service({
+    url: '/admin/role/list',
+    method: 'POST',
+    data,
+  });
+}
+
+function user_edit_api(data) {
+  return service({
+    url: '/admin/users/update',
+    method: 'POST',
+    data,
+  });
+}
+
 export default {
   login_api,
   menu_api,
   login_out_api,
+  user_info_api,
+  user_del_api,
+  user_add_api,
+  user_role_api,
+  user_edit_api
 };

src/config/index.js

@@ -1,81 +1,3 @@
 export const base_url = 'http://47.109.139.179';
 export const request_retry = 4;
 export const request_retry_delay = 800;
-export const default_menu = [
-  {
-    name: 'home',
-    title: '人员管理',
-    icon: 'ios-person',
-    children: [
-      {
-        name: '/home/personnelMatters',
-        title: '管理员',
-      },
-      {
-        name: '/home/personnelMatters/user',
-        title: '用户',
-      },
-    ],
-  },
-  {
-    name: 'limitsAuthority',
-    title: '权限配置',
-    icon: 'ios-key',
-    children: [
-      {
-        name: '/home/limitsAuthority/role',
-        title: '角色管理',
-      },
-      {
-        name: '/home/limitsAuthority/permission',
-        title: '权限管理',
-      },
-    ],
-  },
-  {
-    name: 'belong',
-    title: '归属配置',
-    icon: 'ios-locate',
-    children: [
-      {
-        name: '/home/belong/organization',
-        title: '机构管理',
-      },
-      {
-        name: '/home/belong/area',
-        title: '地域管理',
-      },
-    ],
-  },
-  {
-    name: 'governmentAffairs',
-    title: '政务库管理',
-    icon: 'ios-cloud-download',
-    children: [
-      {
-        name: '/home/governmentAffairs/administration',
-        title: '行政领导配置',
-      },
-    ],
-  },
-  {
-    name: '/home/administration',
-    icon: 'ios-document',
-    title: '稿件管理',
-  },
-  {
-    name: '/home/medium',
-    icon: 'ios-film',
-    title: '媒体管理',
-  },
-  {
-    name: '/home/broadcast',
-    icon: 'ios-desktop',
-    title: '电视广播管理',
-  },
-  {
-    name: '/home/lifeService',
-    icon: 'ios-hammer',
-    title: '生活服务管理',
-  },
-];

src/router/index.js

@@ -19,18 +19,18 @@ export default vueRouter.createRouter({
       },
       children: [
         {
-          path: 'personnelMatters',
+          path: "/admin/users",
           meta: {
             title: '人员管理',
           },
           children: [
             {
-              path: '',
+              path: "/admin/users/list",
               component: () =>
                 import('../view/system/index.vue'),
             },
             {
-              path: 'user',
+              path: "/admin/custom",
               component: () => import('../view/user/index.vue'),
             }
           ],

src/utils/request_axios.js

@@ -25,7 +25,7 @@ service.interceptors.response.use(
   res => {
     //if(LoadingInstance){LoadingInstance.clear();}
     if (res.status !== 200) {
-      //Toast('数据返回出错');
+      this.$Message.info('数据返回出错');
       return Promise.reject('响应非200！');
     } else {
       if (res.data.code != 0) {
@@ -40,7 +40,7 @@ service.interceptors.response.use(
   },
   error => {
     //if(LoadingInstance){LoadingInstance.clear();}
-    //Toast("网络错误");
+    this.$Message.info('网络错误');
     if (/403/.test(error.toString()))
       window.parent
         ? (window.parent.location.href = '/')

src/view/home/index.vue

@@ -19,22 +19,22 @@
             accordion
           >
             <div v-for="(item, i) in menu_list" :key="i">
-              <Submenu v-if="item.children" :name="item.name">
+              <Submenu v-if="item.children && item.children.length" :name="item.router">
                 <template #title>
-                  <Icon :type="item.icon" />
-                  {{ item.title }}
+                  <Icon :type="item.icon || 'ios-browsers'" />
+                  {{ item.name }}
                 </template>
                 <MenuItem
                   v-for="v in item.children"
-                  :key="v.name"
-                  :name="v.name"
+                  :key="v.router"
+                  :name="v.router"
                 >
-                  {{ v.title }}
+                  {{ v.name }}
                 </MenuItem>
               </Submenu>
-              <MenuItem v-else :name="item.name">
-                <Icon v-if="item.icon" :type="item.icon" />
-                {{ item.title }}
+              <MenuItem v-else :name="item.router">
+                <Icon :type="item.icon || 'ios-browsers'" />
+                {{ item.name }}
               </MenuItem>
             </div>
           </Menu>
@@ -44,6 +44,7 @@
             :style="{
               padding: '24px',
               height: content_height + 'px',
+              overflow: 'auto',
               background: '#fff',
             }"
           >
@@ -57,14 +58,13 @@
 
 <script>
 import api from '../../api/index.js';
-import { default_menu } from '../../config/index';
 
 export default {
   data() {
     return {
       content_height: 0,
       active_name: '',
-      menu_list: default_menu,
+      menu_list: [],
     };
   },
   mounted() {
@@ -72,8 +72,7 @@ export default {
     this.content_height = document.documentElement.clientHeight - 120;
     this.active_name = this.$route.path;
     api.menu_api().then(r => {
-      console.log(r);
-      //   this.menu_list = (r || []);
+      this.menu_list = r || [];
     });
   },
   methods: {

src/view/login/index.vue

@@ -25,7 +25,7 @@ export default {
       api.login_api(username, pws).then(res => {
         localStorage.setItem('neican_token', res.token);
         this.$Message.success('登录成功');
-        this.$router.replace('/home/personnelMatters');
+        this.$router.replace('/admin/users/list');
       });
     },
   },

src/view/system/index.vue

@@ -1,26 +1,259 @@
 <!-- vue 页面模板 -->
 <template>
-    <div class="system">
-        system
-    </div>
-  </template>
-  
-  <script>
-  export default {
-    data() {
-      return {
-      };
-    },
-    mounted() {
-    },
-    methods: {
-    },
-  };
-  </script>
-  
-  <style lang="scss">
-  .system {
-    width: 100%;
-  }
-  </style>
-  
+  <div class="system">
+    <Button
+      @click="add_user"
+      type="primary"
+      icon="ios-search"
+      style="margin-bottom: 1em"
+    >
+      新增
+    </Button>
+    <Table highlight-row ref="currentRowTable" :columns="columns" :data="list">
+      <template #adminRoles="{ row }">
+        {{ roles_text(row) }}
+      </template>
+      <template #tool="{ row }">
+        <Space wrap>
+          <Poptip
+            transfer
+            confirm
+            width="90"
+            title="删除该角色?"
+            @on-ok="() => del_user(row)"
+          >
+            <Button size="small" type="error"> 删 除 </Button>
+          </Poptip>
+          <Button size="small" type="primary" @click="() => add_user(row)">
+            修 改
+          </Button>
+        </Space>
+      </template>
+    </Table>
+    <br />
+    <Page
+      :total="total"
+      show-sizer
+      v-model="page"
+      @on-change="change"
+      @on-page-size-change="sizeChange"
+    />
+    <Drawer title="用户详情" placement="right" v-model="show_user_edit">
+      <Form
+        ref="formInline"
+        :model="user"
+        :rules="ruleInline"
+        :label-width="80"
+      >
+        <FormItem label="用户名">
+          <Input v-model="user.name" placeholder="请输入用户名"></Input>
+        </FormItem>
+        <FormItem label="性别">
+          <Select v-model="user.sex">
+            <Option value="男">男</Option>
+            <Option value="女">女</Option>
+          </Select>
+        </FormItem>
+        <FormItem label="角色">
+          <Select
+            v-model="user.adminRoles"
+            multiple
+            filterable
+            :remote-method="get_role_data"
+            :loading="isLoad"
+          >
+            <Option
+              v-for="(option, index) in rules"
+              :value="option.roleId"
+              :key="index"
+              >{{ option.name }}</Option
+            >
+          </Select>
+        </FormItem>
+        <FormItem label="手机号">
+          <Input v-model="user.phone" placeholder="请输入手机号"></Input>
+        </FormItem>
+        <FormItem label="密码">
+          <Input
+            v-model="user.newpassword"
+            type="password"
+            placeholder="请输入密码"
+          ></Input>
+        </FormItem>
+        <FormItem>
+          <Button type="primary" @click="save_user">保 存</Button>
+        </FormItem>
+      </Form>
+    </Drawer>
+  </div>
+</template>
+
+<script>
+import api from '../../api/index.js';
+export default {
+  data() {
+    return {
+      page: 1,
+      pageSize: 10,
+      searchText: '',
+      list: [],
+      rules: [],
+      total: 0,
+      user: {},
+      isLoad: false,
+      show_user_edit: false,
+      ruleInline: {
+        name: [
+          {
+            required: true,
+            message: '请输入姓名',
+            trigger: 'blur',
+          },
+        ],
+        sex: [
+          {
+            required: true,
+            message: '请选择性别',
+            trigger: 'blur',
+          },
+        ],
+        adminRoles: [
+          {
+            required: true,
+            message: '请选择角色',
+            trigger: 'blur',
+          },
+        ],
+        phone: [
+          {
+            required: true,
+            message: '请输入手机号',
+            trigger: 'blur',
+          },
+        ],
+      },
+      columns: [
+        {
+          title: '名字',
+          key: 'name',
+          align: 'center',
+        },
+        {
+          title: '手机号',
+          key: 'phone',
+          align: 'center',
+        },
+        {
+          title: '性别',
+          key: 'sex',
+          align: 'center',
+        },
+        {
+          title: '类别',
+          key: 'category',
+          align: 'center',
+        },
+        {
+          title: '角色',
+          slot: 'adminRoles',
+          align: 'center',
+        },
+        {
+          title: '操作',
+          slot: 'tool',
+          align: 'center',
+        },
+      ],
+    };
+  },
+  mounted() {
+    this.get_data();
+    this.get_role_data();
+  },
+  methods: {
+    get_data() {
+      api
+        .user_info_api({
+          page: this.page,
+          pageSize: this.pageSize,
+          name: this.searchText,
+        })
+        .then(r => {
+          console.log(r.records);
+          this.list = r.records || [];
+          this.total = r.total;
+        });
+    },
+    change(page) {
+      this.page = page;
+      this.get_data();
+    },
+    sizeChange(pageSize) {
+      this.pageSize = pageSize;
+      this.get_data();
+    },
+    roles_text(val) {
+      if (!val || !val.adminRoles) return '';
+      const l = val.adminRoles.map(v => (v ? v.name : '')).join(',');
+      return l;
+    },
+    del_user(r) {
+      api.user_del_api(r.userId).then(r => {
+        console.log(r);
+      });
+    },
+    change_user() {},
+    add_user(row) {
+      this.user = JSON.parse(JSON.stringify(row || {}));
+      this.show_user_edit = true;
+    },
+    save_user() {
+      this.$refs.formInline.validate(valid => {
+        if (!valid) return;
+        if (this.user.adminRoles) {
+          this.user.adminRoles = this.user.adminRoles.map(v => {
+            return {
+              roleId: v,
+            };
+          });
+        }
+        this.user.category = '管理员';
+        this.user.password = this.user.newpassword || '';
+        console.log(this.user);
+        if (this.user.userId)
+          api.user_edit_api(this.user).then(r => {
+            this.show_user_edit = false;
+            this.get_data();
+          });
+        else
+          api.user_add_api(this.user).then(r => {
+            this.show_user_edit = false;
+            this.get_data();
+          });
+      });
+    },
+    get_role_data(query) {
+      this.isLoad = true;
+      api
+        .user_role_api({
+          page: 1,
+          pageSize: 100000,
+          name: query,
+        })
+        .then(r => {
+          this.isLoad = false;
+          this.rules = r.records || [];
+        })
+        .catch(err => {
+          this.isLoad = false;
+        });
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.system {
+  width: 100%;
+}
+</style>