系统配置静态页面

src/components/Header.vue

@@ -14,8 +14,8 @@
     <div class="userName">
       <el-dropdown @command="handleChange">
         <span class="el-dropdown-link">
-            <img class="avatar" src="../assets/avatar.png" />
-            <span class="name">GC</span><i class="el-icon-arrow-down el-icon--right"></i>
+            <img class="avatar" :src="userMessage.image_url?userMessage.image_url:require('../assets/avatar.png')" />
+            <span class="name">{{userMessage.user_name}}</span><i class="el-icon-arrow-down el-icon--right"></i>
         </span>
         <el-dropdown-menu slot="dropdown">
             <el-dropdown-item command='personal'>个人中心</el-dropdown-item>
@@ -31,13 +31,14 @@ import { removeToken } from "@/utils/auth";
 import Cookies from "js-cookie";
 //import { setI18nLang } from "@/utils/i18n";
 import { removeSession } from "@/utils/role";
+import { getToken } from '@/utils/auth'
 export default {
   components: { },
   name: "LayoutHeader",
   props: [],
   data() {
     return {
-      userMessage: null
+      userMessage: JSON.parse(getToken())
     };
   },
   watch: {},

src/components/NavMenu.vue

@@ -30,90 +30,15 @@
 </template>
 
 <script>
+import { getToken } from '@/utils/auth'
 export default {
   components: {},
   name: "navMenu",
   props: [ "activeMenuIndex" ],
   data() {
     return {
-      menuList:[
-        {
-            title:'数据中心',
-            icon:'numbers-line',
-            index:'data_center'
-        },
-        {
-            title:'内容管理',
-            icon:'file-list-line',
-            index:'content_manage',
-            node:[
-                {
-                    title:'报纸管理',
-                    index:'newspaper_manage',
-                },
-                {
-                    title:'画刊管理',
-                    index:'pictorial_manage',
-                },
-                {
-                    title:'练习册管理',
-                    index:'workbook_manage',
-                },
-                {
-                    title:'评测管理',
-                    index:'evaluation_manage',
-                },
-                {
-                    title:'课程管理',
-                    index:'course_manage',
-                    node:[
-                        {
-                            title:'录播课',
-                            index:'recorded_course'
-                        },
-                        {
-                            title:'直播课',
-                            index:'live_course'
-                        }
-                    ]
-                },
-                {
-                    title:'专辑管理',
-                    index:'album_manage',
-                },
-                {
-                    title:'广告管理',
-                    index:'advertise_manage',
-                }
-            ]
-        },
-        {
-            title:'机构管理',
-            icon:'school-line',
-            index:'organize_manage'
-        },
-        {
-            title:'系统用户',
-            icon:'contacts-line',
-            index:'people_manage'
-        },
-        {
-            title:'兑换码管理',
-            icon:'barcode-line',
-            index:'cdkey_manage'
-        },
-        {
-            title:'财务中心',
-            icon:'money-cny-box-line',
-            index:'finance_manage',
-            node:[
-                {
-                    title:'流水管理',
-                    index:'flow_manage',
-                }
-            ]
-        }
-      ]
+      menuList:[],
+      codeList: JSON.parse(getToken()).popedom_code_list
     };
   },
   watch: {},
@@ -130,9 +55,108 @@ export default {
         // this.$emit("handleSelectNav",key)
         window.localStorage.removeItem('pageSize')
         window.localStorage.removeItem('pageNumber')
+    },
+    // 处理菜单权限
+    handleMenu(){
+        let menuList = [
+            {
+                title:'数据中心',
+                icon:'numbers-line',
+                index:'data_center',
+                showFlag: true
+            },
+            {
+                title:'内容管理',
+                icon:'file-list-line',
+                index:'content_manage',
+                node:[
+                    {
+                        title:'报纸管理',
+                        index:'newspaper_manage',
+                    },
+                    {
+                        title:'画刊管理',
+                        index:'pictorial_manage',
+                    },
+                    {
+                        title:'练习册管理',
+                        index:'workbook_manage',
+                    },
+                    {
+                        title:'评测管理',
+                        index:'evaluation_manage',
+                    },
+                    {
+                        title:'课程管理',
+                        index:'course_manage',
+                        node:[
+                            {
+                                title:'录播课',
+                                index:'recorded_course'
+                            },
+                            {
+                                title:'直播课',
+                                index:'live_course'
+                            }
+                        ]
+                    },
+                    {
+                        title:'专辑管理',
+                        index:'album_manage',
+                    },
+                    {
+                        title:'广告管理',
+                        index:'advertise_manage',
+                    }
+                ]
+            },
+            {
+                title:'机构管理',
+                icon:'school-line',
+                index:'organize_manage'
+            },
+            {
+                title:'系统用户',
+                icon:'contacts-line',
+                index:'people_manage'
+            },
+            {
+                title:'兑换码管理',
+                icon:'barcode-line',
+                index:'cdkey_manage'
+            },
+            {
+                title:'财务中心',
+                icon:'money-cny-box-line',
+                index:'finance_manage',
+                node:[
+                    {
+                        title:'流水管理',
+                        index:'flow_manage',
+                    }
+                ]
+            },
+            {
+                title:'系统配置',
+                icon:'setting',
+                index:'system_config',
+                node:[
+                    {
+                        title:'邮箱配置',
+                        index:'email_setting',
+                    },
+                    {
+                        title:'导入配置',
+                        index:'export_setting',
+                    }
+                ]
+            }
+        ]
+        this.menuList = menuList
     }
   },
   created() {
+    this.handleMenu()
   },
   mounted() {
   },

src/router/index.js

@@ -114,6 +114,16 @@ export const constantRoutes = [{
         component: () =>
             import ('@/views/organize_manage/EditPerson.vue')
     },
+    {
+        path: '/email_setting',
+        component: () =>
+            import ('@/views/system_config/EmailSetting.vue')
+    },
+    {
+        path: '/export_setting',
+        component: () =>
+            import ('@/views/system_config/ExportSetting.vue')
+    },
     // 404 page must be placed at the end !!!
     { path: '*', redirect: '/', hidden: true }
 ]

src/views/people_manage/CreatePerson.vue

@@ -241,6 +241,19 @@ export default {
             }
         }
     };
+    const validateName = (rule, value, callback) => {
+        if (value === '') {
+            callback(new Error('请输入用户名'));
+        } else {
+            let reg = /^[a-zA-Z0-9_]{1,20}$/;
+            let result = reg.test(value);
+            if (result) {
+                callback();
+            } else {
+                callback(new Error('不超过 20 位，可包含英文字符、数字、下划线'));
+            }
+        }
+    };
     return {
         activeMenuIndex: "people_manage",
         breadcrumbList:[
@@ -277,8 +290,8 @@ export default {
         },
         rulesRegister:{
             name:[
-                { required: true, message: '请输入用户名', trigger: 'blur' },
-                { max: 10, message: '用户名最多10位', trigger:'change' },
+                { required: true, validator: validateName, trigger: 'blur' },
+                { max: 20, message: '用户名最多20位', trigger:'change' },
             ],
             realName:[
                 { required: true, message: '请输入真实姓名', trigger: 'blur' },

src/views/system_config/EmailSetting.vue

@@ -0,0 +1,196 @@
+<template>
+  <div class="manage-root personnel-create">
+    <Header />
+    <div class="manage-root-contain">
+        <nav-menu class="manage-root-contain-left" :activeMenuIndex="activeMenuIndex"></nav-menu>
+        <div class="manage-root-contain-right">
+            <breadcrumb :breadcrumbList="breadcrumbList" class="breadcrumb-box"></breadcrumb>
+            <div class="create-bottom">
+                <h3>邮箱配置</h3>
+                <el-form :model="registerForm" :rules="rulesRegister" ref="registerForm" label-width="100px" class="registerForm" label-position="top">
+                    <el-form-item label="邮箱地址" prop="email">
+                        <el-input v-model="registerForm.email" autocomplete="off" placeholder="请输入邮箱地址" @blur="handleTrim('registerForm','email')" >
+                        </el-input>
+                    </el-form-item>
+                    <el-form-item label="SMTP 服务器" prop="smtp">
+                        <el-input v-model="registerForm.smtp" autocomplete="off" placeholder="请输入SMTP 服务器" @blur="handleTrim('registerForm','smtp')" >
+                        </el-input>
+                    </el-form-item>
+                    <el-form-item label="邮箱登录名" prop="emailName">
+                        <el-input v-model="registerForm.emailName" autocomplete="off" placeholder="请输入邮箱登录名" @blur="handleTrim('registerForm','emailName')" >
+                        </el-input>
+                    </el-form-item>
+                    <el-form-item label="邮箱登录密码" prop="newPwd">
+                        <el-input v-model="registerForm.newPwd" :type="newPwdFlag?'text':'password'" autocomplete="off" placeholder="请输入密码" @blur="handleTrim('registerForm','newPwd')" >
+                            <i slot="suffix" class="el-icon-view show-icon" @click="changeIcon('newPwdFlag')" v-if="newPwdFlag"></i>
+                            <i slot="suffix" class="show-icon" @click="changeIcon('newPwdFlag')" v-else>
+                                <svg-icon icon-class="eye-invisible"></svg-icon>
+                            </i>
+                        </el-input>
+                    </el-form-item>
+                    <el-form-item>
+                        <el-button type="primary" @click="onSubmit('registerForm')" size="small" :loading="loading">保存</el-button>
+                        <el-button @click="onCancel('registerForm')" size="small">取消</el-button>
+                    </el-form-item>
+                </el-form>
+            </div>
+        </div>
+    </div>
+  </div>
+</template>
+
+<script>
+//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》from ‘《组件路径》';
+import Header from "../../components/Header.vue";
+import NavMenu from "../../components/NavMenu.vue"
+import Breadcrumb from '../../components/Breadcrumb.vue';
+import { getLogin } from "@/api/ajax";
+
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: { Header, NavMenu, Breadcrumb },
+  props: {},
+  data() {
+    //这里存放数据
+    const validateEmail = (rule, value, callback) => {
+        if (value === '') {
+            callback();
+        } else {
+            let reg = /^[a-zA-Z0-9_\.-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
+            let result = reg.test(value);
+            if (result) {
+                callback();
+            } else {
+                callback(new Error('请输入正确的邮箱地址'));
+            }
+        }
+    };
+    return {
+        activeMenuIndex: "email_setting",
+        breadcrumbList:[
+            {
+                icon:'setting',
+                url:'',
+                text:''
+            },
+            {
+                icon:'',
+                url:'',
+                notLink: true,
+                text:'系统配置'
+            },
+            {
+                icon:'',
+                url:'',
+                text:'邮箱配置'
+            }
+        ],
+        registerForm:{
+            email: '',
+            smtp: '',
+            emailName: '',
+            newPwd: ''
+        },
+        rulesRegister:{
+            email:[
+                { validator: validateEmail, trigger: 'blur' },
+            ],
+        },
+        newPwdFlag: false, // 查看新密码
+        loading: false
+    }
+  },
+  //计算属性 类似于data概念
+  computed: {
+    
+  },
+  //监控data中数据变化
+  watch: {
+    
+  },
+  //方法集合
+  methods: {
+    // 去掉前后空格
+    handleTrim(form,fild){
+        this[form][fild] = this[form][fild].trim()
+    },
+    changeIcon(flag){
+        this[flag] = !this[flag]
+    },
+    // 提交表单
+    onSubmit(formName){
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            this.loading = true
+            let MethodName = "/OrgServer/Manager/SysUserManager/UpdateSysUser_BaseInfo";
+            let data = {
+                email: this.registerForm.email,
+                smtp: this.registerForm.smtp,
+                emailName: this.registerForm.emailName,
+                newPwd: this.registerForm.newPwd
+            }
+            getLogin(MethodName, data)
+            .then((res) => {
+                this.loading = false
+                if(res.status===1){
+                    this.$message.success("保存成功")
+                }
+            }).catch((res) =>{
+                this.loading = false
+            })
+          } else {
+            return false;
+          }
+        });
+    },
+    // 取消 恢复到修改前状态
+    onCancel(formName){
+        this.$refs[formName].resetFields();
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+
+  },
+  //生命周期-创建之前
+  beforeCreated() { },
+  //生命周期-挂载之前
+  beforeMount() { },
+  //生命周期-更新之前
+  beforUpdate() { },
+  //生命周期-更新之后
+  updated() { },
+  //生命周期-销毁之前
+  beforeDestory() { },
+  //生命周期-销毁完成
+  destoryed() { },
+  //如果页面有keep-alive缓存功能，这个函数会触发
+  activated() { }
+}
+</script>
+<style lang="scss" scoped>
+/* @import url(); 引入css类 */
+.create-bottom{
+    padding: 40px 40px;
+    margin-top: 16px;
+    background: #FFFFFF;
+    border-radius: 4px;
+    height: calc(100vh - 140px);
+    overflow: auto;
+    h3{
+        font-size: 20px;
+        font-weight: 500;
+        line-height: 28px;
+        margin: 0 0 28px 0;
+        color: #1D2129;
+    }
+}
+</style>
+
+<style lang="scss">
+
+</style>

src/views/system_config/ExportSetting.vue

@@ -0,0 +1,165 @@
+<template>
+  <div class="manage-root personnel-create">
+    <Header />
+    <div class="manage-root-contain">
+        <nav-menu class="manage-root-contain-left" :activeMenuIndex="activeMenuIndex"></nav-menu>
+        <div class="manage-root-contain-right">
+            <breadcrumb :breadcrumbList="breadcrumbList" class="breadcrumb-box"></breadcrumb>
+            <div class="create-bottom">
+                <h3>导入配置</h3>
+                <el-form :model="registerForm" ref="registerForm" label-width="100px" class="registerForm" label-position="top">
+                    <el-form-item label="人员导入模板" prop="resource">
+                        <upload :datafileList="registerForm.resource" :changeFillId="handleAvatarSuccess" :fileName="'courseResource'" :filleNumber="1" :uploadType="'xls'" />
+                    </el-form-item>
+                    <el-form-item>
+                        <el-button type="primary" @click="onSubmit('registerForm')" size="small" :loading="loading">保存</el-button>
+                        <el-button @click="onCancel('registerForm')" size="small">取消</el-button>
+                    </el-form-item>
+                </el-form>
+            </div>
+        </div>
+    </div>
+  </div>
+</template>
+
+<script>
+//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》from ‘《组件路径》';
+import Header from "../../components/Header.vue";
+import NavMenu from "../../components/NavMenu.vue"
+import Breadcrumb from '../../components/Breadcrumb.vue';
+import Upload from "../../components/Upload.vue"
+import { getLogin } from "@/api/ajax";
+
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: { Header, NavMenu, Breadcrumb, Upload },
+  props: {},
+  data() {
+    //这里存放数据
+    return {
+        activeMenuIndex: "export_setting",
+        breadcrumbList:[
+            {
+                icon:'setting',
+                url:'',
+                text:''
+            },
+            {
+                icon:'',
+                url:'',
+                notLink: true,
+                text:'系统配置'
+            },
+            {
+                icon:'',
+                url:'',
+                text:'导入配置'
+            }
+        ],
+        registerForm:{
+            resource:[],
+            file_id: '',
+            file_url: ''
+        },
+        loading: false
+    }
+  },
+  //计算属性 类似于data概念
+  computed: {
+    
+  },
+  //监控data中数据变化
+  watch: {
+    
+  },
+  //方法集合
+  methods: {
+    // 去掉前后空格
+    handleTrim(form,fild){
+        this[form][fild] = this[form][fild].trim()
+    },
+    changeIcon(flag){
+        this[flag] = !this[flag]
+    },
+    // 提交表单
+    onSubmit(formName){
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            this.loading = true
+            let MethodName = "/OrgServer/Manager/SysUserManager/UpdateSysUser_BaseInfo";
+            let data = {
+                email: this.registerForm.email,
+                smtp: this.registerForm.smtp,
+                emailName: this.registerForm.emailName,
+                newPwd: this.registerForm.newPwd
+            }
+            getLogin(MethodName, data)
+            .then((res) => {
+                this.loading = false
+                if(res.status===1){
+                    this.$message.success("保存成功")
+                }
+            }).catch((res) =>{
+                this.loading = false
+            })
+          } else {
+            return false;
+          }
+        });
+    },
+    // 取消 恢复到修改前状态
+    onCancel(formName){
+        this.$refs[formName].resetFields();
+    },
+    handleAvatarSuccess(fileList,name) {
+        this.registerForm.resource = fileList
+        this.registerForm.file_id = fileList[0]&&fileList[0].response&&fileList[0].response.file_info_list&&fileList[0].response.file_info_list[0]?fileList[0].response.file_info_list[0].file_id:''
+        this.registerForm.file_url = fileList[0]&&fileList[0].response&&fileList[0].response.file_info_list&&fileList[0].response.file_info_list[0]?fileList[0].response.file_info_list[0].file_url:''
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+
+  },
+  //生命周期-创建之前
+  beforeCreated() { },
+  //生命周期-挂载之前
+  beforeMount() { },
+  //生命周期-更新之前
+  beforUpdate() { },
+  //生命周期-更新之后
+  updated() { },
+  //生命周期-销毁之前
+  beforeDestory() { },
+  //生命周期-销毁完成
+  destoryed() { },
+  //如果页面有keep-alive缓存功能，这个函数会触发
+  activated() { }
+}
+</script>
+<style lang="scss" scoped>
+/* @import url(); 引入css类 */
+.create-bottom{
+    padding: 40px 40px;
+    margin-top: 16px;
+    background: #FFFFFF;
+    border-radius: 4px;
+    height: calc(100vh - 140px);
+    overflow: auto;
+    h3{
+        font-size: 20px;
+        font-weight: 500;
+        line-height: 28px;
+        margin: 0 0 28px 0;
+        color: #1D2129;
+    }
+}
+</style>
+
+<style lang="scss">
+
+</style>