角色设置

zhangyanpeng

2020-01-22 a15d669a8b84e23bf0b1ed56b32ec6ccd3220113

角色设置

 src/views/Home.vue

@@ -43,6 +43,7 @@
            <el-header style="text-align: right; font-size: 15px;padding-right: 40px;">
                    <i class="el-icon-user-solid"></i>
                    <span>admin</span>
                    <el-button size="small" type="primary" @click="Cancel">退 出</el-button>
            </el-header>
            
            <el-main style="background-color: #f7f8f9;">
@@ -86,16 +87,84 @@
  },
    created() {
        let userId_ = localStorage.getItem('userId');
        let userType = localStorage.getItem('userType');
        if (!userId_) {
            this.$router.push('/login');
        }
        else {
            this.defaultActive = "mine";
            this.$router.push('/mine');
			
            this.getMenu(userType);
        }
    },
    
  methods: {
        getMenu(userType) {
            let DayDatas = {
                 all: [
                    {'id': "110", 'title': "首页", 'path': "mine"}, //返回的数组字段
                    {'id': "111", 'title': "项目管理", 'path': "0_111"}, //返回的数组字段
                    {'id': "112", 'title': "任务管理", 'path': "0_112"},
                    {'id': "111_1", 'title': "信息广场", 'path': 'project2', 'parentId': "111"}, //
                    {'id': "111_2", 'title': "项目总览", 'path': 'Overview', 'parentId': "111"}, //
                    {'id': "111_3", 'title': "项目分析", 'path': 'project3', 'parentId': "111"}, //
                    {'id': "111_4", 'title': "归档报告", 'path': 'project4', 'parentId': "111"}, //
                    {'id': "112_1", 'title': "任务列表", 'path': 'calendarTask', 'parentId': "112"}, //
                ],
                role1: [
                    {'id': "110", 'title': "首页", 'path': "mine"}, //返回的数组字段
                    {'id': "111", 'title': "项目管理", 'path': "0_111"}, //返回的数组字段
                    {'id': "111_1", 'title': "信息广场", 'path': 'project2', 'parentId': "111"}, //
                    {'id': "111_2", 'title': "项目总览", 'path': 'Overview', 'parentId': "111"}, //
                    {'id': "111_3", 'title': "项目分析", 'path': 'project3', 'parentId': "111"}, //
                    {'id': "111_4", 'title': "归档报告", 'path': 'project4', 'parentId': "111"}, //
                ],
                role2: [
                    {'id': "110", 'title': "首页", 'path': "mine"}, //返回的数组字段
                    {'id': "112", 'title': "任务管理", 'path': "0_112"},
                    {'id': "112_1", 'title': "任务列表", 'path': 'calendarTask', 'parentId': "112"}, //
                ],
            };
			
            let list = [];
            if (!userType) {
                list = DayDatas['all'];
            }
            else {
                list = DayDatas[userType];
            }
			
            let parId = "";
            let obj = {};
            let result = [];
						
            list.map(el => {
                obj[el.id] = el;
            })
            for(let i=0, len = list.length; i < len; i++) {
                let id = list[i].parentId;
                //设置显示字段
                list[i].title = list[i].title;
                if(id == parId || !id) {
                    if(!obj[list[i].id].children) {
                      obj[list[i].id].children = [];
                    }
                    result.push(list[i]);
                    continue;
                }
                if(obj[id].children) {
                    obj[id].children.push(list[i]);
                } else {
                    obj[id].children = [list[i]];
                }
            }
            this.navList = result;
        },
		
        Cancel() {
            this.$router.push('/login');
        },
        menuSelect(index, a){
         let isPage = index.substring(0,2);
         if (isPage != "0_") {

 src/views/calendarTask.vue

@@ -21,7 +21,7 @@
            </div>
        </div>
        
        <el-dialog @close="Cancel" width="40%" top="10%" :visible.sync="dialog_1">
        <el-dialog @close="Cancel" width="40%" top="10%" :visible.sync="dialog_1" v-if="dialog_1">
            <div slot="title" class="dialog-title" style="text-align: left;">
              <span> 任务处理 </span>
            </div>

 src/views/login.vue

@@ -31,12 +31,20 @@
          </span>
        </el-input>
      </el-form-item>
			
      <el-form-item>
                <el-select v-model="loginForm.role" placeholder="请选择角色" size="small">
                    <el-option label="角色1" value="role1"></el-option>
                    <el-option label="角色2" value="role2"></el-option>
                </el-select>
            </el-form-item>
			
      <div class="user-action">
        <a @click="handleForgetPassword">
          <span>忘记密码</span>
        </a>
      </div>
      <el-button :loading="loading" class="loginButton" type="primary" @click.native.prevent="handleLogin">登录</el-button>
      <el-button :loading="loading" class="loginButton" type="primary" @click.native.prevent="handleLogin">登 录</el-button>
    </el-form>
  </div>
</template>
@@ -98,6 +106,7 @@
    // 登录
    handleLogin () {
            localStorage.setItem('userId','user001');
            localStorage.setItem('userType', this.loginForm.role);
            this.$router.push('/');
        },
  }