用户管理更新

src/router/index.js

@@ -32,31 +32,29 @@ const web = [
         component: () => import('../views/adminCenter/homeIndex/index.vue'),
       },
       {
-        path: '/adminCenter/test/index',
-        meta: { title: '测试' },
-        component: () => import('../views/adminCenter/test/index.vue'),
+        path: '/adminCenter/user/index',
+        meta: { title: '用户管理' },
+        component: () => import('../views/adminCenter/user/index.vue'),
       },
     ],
   },
 ];
 const routes = [...web];
 const router = new VueRouter({ mode: 'history', base: process.env.VUE_APP_ROUTER, routes });
-// router.beforeEach((to, from, next) => {
-//   document.title = `${to.meta.title} `;
-//   const user = JSON.parse(localStorage.getItem('user'));
-//   if (!to.path == '/adminCenter/homeIndex') {
-//     if (!user) {
-//       next('/login');
-//     } else {
-//       // let user = jwt.decode(token);
-//       store.commit('setUser', user, { root: true });
-//       next();
-//     }
-//   } else {
-//     // let user = jwt.decode(token);
-//     store.commit('setUser', user, { root: true });
-//     next();
-//   }
-// });
+router.beforeEach((to, from, next) => {
+  document.title = `${to.meta.title} `;
+  const user = JSON.parse(localStorage.getItem('user'));
+  if (to.path == '/adminCenter/homeIndex') {
+    if (!user) {
+      next('/login');
+    } else {
+      store.commit('setUser', user, { root: true });
+      next();
+    }
+  } else {
+    store.commit('setUser', user, { root: true });
+    next();
+  }
+});
 
 export default router;

src/store/index.js

@@ -2,6 +2,8 @@ import Vue from 'vue';
 import Vuex from 'vuex';
 import * as ustate from '@common/src/store/user/state';
 import * as umutations from '@common/src/store/user/mutations';
+import login from '@common/src/store/login';
+import user from '@common/src/store/user';
 
 Vue.use(Vuex);
 
@@ -9,5 +11,5 @@ export default new Vuex.Store({
   state: { ...ustate },
   mutations: { ...umutations },
   actions: {},
-  modules: {  },
+  modules: { login, user },
 });

src/views/adminCenter/export/index.vue

@@ -1,124 +0,0 @@
-<template>
-  <div id="index">
-    <el-row>
-      <el-col :span="24" class="main">
-        <el-col :span="24" class="one">
-          <el-form ref="searchForm" :model="searchForm" label-width="80px">
-            <el-col :span="8">
-              <el-form-item label="购买人">
-                <el-input v-model="searchForm.buy_name"></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="8">
-              <el-form-item label="审批时间">
-                <el-date-picker
-                  type="date"
-                  placeholder="请选择"
-                  v-model="searchForm.examine_time"
-                  value-format="yyyy-MM-dd"
-                  format="yyyy-MM-dd"
-                  style="width: 100%"
-                ></el-date-picker>
-              </el-form-item>
-            </el-col>
-            <el-col :span="8">
-              <el-form-item label="审批状态">
-                <el-select v-model="searchForm.status" placeholder="请选择" style="width: 100%">
-                  <el-option label="待审中" value="0"></el-option>
-                  <el-option label="审核通过" value="1"></el-option>
-                  <el-option label="审核未通过" value="2"></el-option>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="24" class="btn">
-              <el-button type="primary" size="small" @click="search()">查询</el-button>
-              <download-excel :data="selected" :fields="excel_fields.fields" :name="excel_fields.name" style="display: inline; margin: 0 0 0 10px">
-                <el-button type="primary" size="mini">批量导出</el-button>
-              </download-excel>
-            </el-col>
-          </el-form>
-        </el-col>
-        <el-col :span="24" class="two">
-          <data-table :fields="fields" :opera="opera" :data="list" :total="total" :select="true" :selected="selected" @handleSelect="handleSelect">
-          </data-table>
-        </el-col>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-const { examine_fields } = require('@common/src/layout/deploy/dict');
-import { mapState, createNamespacedHelpers } from 'vuex';
-const { mapActions: examine } = createNamespacedHelpers('examine');
-export default {
-  name: 'index',
-  props: {},
-  components: {},
-  data: function () {
-    return {
-      searchForm: {},
-      list: [],
-      total: 0,
-      fields: [
-        { label: '审批单号', prop: 'order_num' },
-        { label: '购买人', prop: 'buy_name' },
-        { label: '购买总价(元)', prop: 'totalMoney' },
-        { label: '审批人', prop: 'personal' },
-        { label: '审批时间', prop: 'examine_time' },
-        {
-          label: '审批结果',
-          prop: 'status',
-          format: (item) => {
-            return item === '0' ? '待审' : item === '1' ? '审核通过' : '审核未通过';
-          },
-        },
-      ],
-      excel_fields: examine_fields,
-      opera: [],
-      selected: [],
-    };
-  },
-  async created() {
-    this.search();
-  },
-  methods: {
-    ...examine(['query']),
-    async search({ skip = 0, limit = 10, ...info } = {}) {
-      let res = await this.query({ skip, limit, ...this.searchForm, ...info });
-      if (this.$checkRes(res)) {
-        this.$set(this, `list`, res.data);
-        this.$set(this, `total`, res.total);
-      }
-    },
-    handleSelect(data) {
-      this.$set(this, `selected`, data);
-    },
-  },
-
-  computed: {
-    ...mapState(['user']),
-  },
-  metaInfo() {
-    return { title: this.$route.meta.title };
-  },
-  watch: {
-    test: {
-      deep: true,
-      immediate: true,
-      handler(val) {},
-    },
-  },
-};
-</script>
-
-<style lang="less" scoped>
-.main {
-  .one {
-    margin: 0 0 10px 0;
-    .btn {
-      text-align: right;
-    }
-  }
-}
-</style>

src/views/adminCenter/test/index.vue

@@ -1,36 +0,0 @@
-<template>
-  <div id="index">
-    <el-row>
-      <el-col :span="24" class="main"> test </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-import { mapState, createNamespacedHelpers } from 'vuex';
-export default {
-  name: 'index',
-  props: {},
-  components: {},
-  data: function () {
-    return {};
-  },
-  created() {},
-  methods: {},
-  computed: {
-    ...mapState(['user']),
-  },
-  metaInfo() {
-    return { title: this.$route.meta.title };
-  },
-  watch: {
-    test: {
-      deep: true,
-      immediate: true,
-      handler(val) {},
-    },
-  },
-};
-</script>
-
-<style lang="less" scoped></style>

src/views/adminCenter/user/index.vue

@@ -0,0 +1,104 @@
+<template>
+  <div id="index">
+    <data-table :fields="fields" :opera="opera" @query="search" :data="list" :total="total" @edit="toEdit">
+      <template slot="selfbtn">
+        <el-button type="primary" size="small" @click="toAdd()">添加</el-button>
+      </template>
+    </data-table>
+    <el-dialog :title="dialog.title" :visible.sync="dialog.show" width="50%" :before-close="toClose">
+      <form-1 :form="form" @onSubmit="onSubmit"></form-1>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import form1 from './parts/form-1.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: mapUser } = createNamespacedHelpers('user');
+export default {
+  name: 'index',
+  props: {},
+  components: {
+    form1,
+  },
+  data: function () {
+    return {
+      list: [],
+      total: 0,
+      fields: [
+        { label: '姓名', prop: 'name', filter: 'input' },
+        { label: '联系电话', prop: 'phone', filter: 'input' },
+        { label: '电子邮箱', prop: 'email' },
+        { label: '工作单位', prop: 'company' },
+        { label: '部门', prop: 'dept' },
+        { label: '职务', prop: 'zw' },
+        { label: '联系地址', prop: 'address' },
+        {
+          label: '用户类别',
+          prop: 'type',
+          format: (i) => {
+            return i === '1' ? '超级管理员' : '未识别';
+          },
+        },
+      ],
+      opera: [{ label: '维护', method: 'edit' }],
+      // 弹框
+      dialog: { title: '信息管理', show: false, type: '1' },
+      // 添加用户
+      form: {},
+    };
+  },
+  created() {
+    this.search();
+  },
+  methods: {
+    ...mapUser(['query']),
+    async search({ skip = 0, limit = 10, ...info } = {}) {
+      let res = await this.query({ skip, limit, ...info });
+      if (this.$checkRes(res)) {
+        this.$set(this, `list`, res.data);
+        this.$set(this, `total`, res.total);
+      }
+    },
+    // 修改
+    toEdit({ data }) {
+      console.log(data);
+    },
+    // 添加
+    toAdd() {
+      this.dialog = { title: '添加信息', show: true, type: '1' };
+    },
+    // 提交保存
+    onSubmit({ data }) {
+      console.log(data);
+    },
+    // 关闭
+    toClose() {},
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+/deep/.el-dialog__body {
+  padding: 10px;
+}
+.twoDialog {
+  /deep/.el-dialog__body {
+    max-height: 300px;
+    overflow-y: auto;
+  }
+}
+</style>

src/views/adminCenter/user/parts/form-1.vue

@@ -0,0 +1,102 @@
+<template>
+  <div id="form-1">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="one">
+          <el-form :model="form" :rules="rules" ref="form" label-width="100px">
+            <el-form-item label="姓名" prop="name">
+              <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
+            </el-form-item>
+            <el-form-item label="联系电话" prop="phone">
+              <el-input v-model="form.phone" placeholder="请输入联系电话"></el-input>
+            </el-form-item>
+            <el-form-item label="登录密码" prop="password">
+              <el-input v-model="form.password" type="password" placeholder="请输入登录密码" show-password></el-input>
+            </el-form-item>
+            <el-form-item label="电子邮箱" prop="email">
+              <el-input v-model="form.email" placeholder="请输入电子邮箱"></el-input>
+            </el-form-item>
+            <el-form-item label="工作单位" prop="company">
+              <el-input v-model="form.company" placeholder="请输入工作单位"></el-input>
+            </el-form-item>
+            <el-form-item label="部门" prop="dept">
+              <el-input v-model="form.dept" placeholder="请输入部门"></el-input>
+            </el-form-item>
+            <el-form-item label="职务" prop="zw">
+              <el-input v-model="form.zw" placeholder="请输入职务"></el-input>
+            </el-form-item>
+            <el-form-item label="联系地址" prop="address">
+              <el-input v-model="form.address" placeholder="请输入联系地址"></el-input>
+            </el-form-item>
+            <el-form-item label="用户类别" prop="type">
+              <el-input v-model="form.type" placeholder="请输入用户类别"></el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="danger" @click="onReset('form')">重置信息</el-button>
+              <el-button type="primary" @click="onSubmit('form')">提交保存</el-button>
+            </el-form-item>
+          </el-form>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'form-1',
+  props: {
+    form: { type: Object },
+  },
+  components: {},
+  data: function () {
+    return {
+      rules: {
+        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
+        phone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
+        password: [{ required: true, message: '请输入登录密码', trigger: 'blur' }],
+        email: [{ required: true, message: '请输入电子邮箱', trigger: 'blur' }],
+        address: [{ required: true, message: '请输入联系地址', trigger: 'blur' }],
+        dept: [{ required: true, message: '请输入部门', trigger: 'blur' }],
+        zw: [{ required: true, message: '请输入职务', trigger: 'blur' }],
+        company: [{ required: true, message: '请输入工作单位', trigger: 'blur' }],
+        type: [{ required: true, message: '请输入用户类别', trigger: 'blur' }],
+      },
+    };
+  },
+  created() {},
+  methods: {
+    // 重置信息
+    onReset(formName) {
+      this.$refs[formName].resetFields();
+    },
+    // 提交信息
+    onSubmit(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.$emit('onSubmit', { data: this.form });
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/login.vue

@@ -53,19 +53,19 @@ export default {
     ...login(['login']),
     submitForm() {
       this.$router.push('/adminCenter/homeIndex');
-      // this.$refs.login.validate(async (valid) => {
-      //   if (valid) {
-      //     let res = await this.login({ user: this.form });
-      //     if (this.$checkRes(res)) {
-      //       this.$message.success('登录成功');
-      //       this.$router.push('/adminCenter/homeIndex');
-      //     }
-      //   } else {
-      //     this.$message.error('请输入账号和密码');
-      //     console.log('error submit!!');
-      //     return false;
-      //   }
-      // });
+      this.$refs.login.validate(async (valid) => {
+        if (valid) {
+          let res = await this.login({ user: this.form });
+          if (this.$checkRes(res)) {
+            this.$message.success('登录成功');
+            this.$router.push('/adminCenter/homeIndex');
+          }
+        } else {
+          this.$message.error('请输入账号和密码');
+          console.log('error submit!!');
+          return false;
+        }
+      });
     },
   },
   computed: {},