Vue2项目开发----问题集合（2更）

多选框配合input使用

添加的数据格式

{
  "stages": "string",
  "coverImgUrl": "string",
  "name": "string",
  "target": {
    "targetLearningProgress": 0, // 多选框勾选对应的 input1的值
    "passExam": true  // 多选框勾选需要的值 
  },
  "description": "string",
  "sortValue": 0,
  "isEnabled": true
}

处理代码

   <el-form-item label="阶段合格标准：">
          <el-checkbox-group v-model="CheckList" @change="showChange">
            <el-checkbox label="1">
              每门课程学习进度要求达到
              <el-input v-model="TargetLearningProgress" style="width: 50px;"></el-input>
              /*对应的input值*/
            </el-checkbox>
              /* 及格线*/
            <el-checkbox label="2">考试达到及格线</el-checkbox>
          </el-checkbox-group>
        </el-form-item>

 showChange(val) {
    console.log('val', this.CheckList); // 已选中的checkbox 数组
      if (this.CheckList.includes('1')) {
      // 等于自己或者0  
        this.TargetLearningProgress = this.TargetLearningProgress || 0; 
      } else {
        this.TargetLearningProgress = null;
      }
    },

小结

遇到问题：

以往需求产品要checkbox对应的ID就行，现在狗产品不要ID了，要勾选后后面input框的值

1、勾选box1，初始化input1的值，设置input1的值，取消box1，input1清空
    过this.CheckList.includes('1')判断

2、勾选box2,CheckList也不包含box1的ID，会重置input1的值，前后逻辑混乱

解决办法： 

this.TargetLearningProgress = this.TargetLearningProgress || 0; 
已选中的box，让对应的input等于自己，或者0， 这样勾选其他box，已填充的input
值不会被重置

3、及格线字段是直接绑定的checkbox是否勾选的状态，直接通过
this.infoForm.Target.PassExam = this.CheckList.includes('2')；  include返回的 true 或者false

4，把单选框的赋值和input表单的赋值 拆开，提交时候单独处理，看之后提交代码

5，这三行代码让我倒腾了两个半小时。。。。

提交代码

confirmAdd(formName) {
      console.log('add', this.infoForm, formName);

      if (this.CheckList.length <= 0) {
        return this.$message.error('请选择阶段合格标准');
      }
      if (this.CheckList.includes('1')) {
        this.infoForm.Target.TargetLearningProgress = this.TargetLearningProgress;
      } else {
        this.infoForm.Target.TargetLearningProgress = null;
        // this.TargetLearningProgress = null;
      }

      // let val = this.infoForm.Target.TargetLearningProgress;

      if (this.CheckList.includes('1')) {
        var reg = new RegExp("^(\\d|[1-9]\\d|100)$");
        if (!reg.test(this.infoForm.Target.TargetLearningProgress)) {
          return this.$message.error('学习进度必须是0<x<=100的正整数')
        }
      }

      this.infoForm.Target.PassExam = this.CheckList.includes('2');
      console.log('提交数据', this.infoForm)
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let res = await LearningStagesAdd(this.infoForm);
          console.log('添加学习阶段', res);
          if (res.data.success) {
            this.$message.success(res.data.msg || '添加学习阶段成功');
            this.addDialog = false;
            this.infoForm = {
              Stages: '',
              CoverImgUrl: '',
              Name: '',
              Target: {
                TargetLearningProgress: null,
                PassExam: null,
              },
              Description: '',
              IsEnabled: null,
              SortValue: null,
            }
            this.TargetLearningProgress = null;
            this.CheckList = [];
            this.$forceUpdate()
            this.getDistributorList();
          } else {
            this.$message.error(res.data.msg || '添加失败');
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

多规格提成验证

async bonusManyConfirm() {

     for (let manyKey of this.Many) {
       if (!this.checkNum2(manyKey.PerformanceFee)){  // 正则验证
         return this.$message.error('提成：大于0，小于成本价，必填，保留两位小数');
       }
     }

     for (let argumentsKey of this.Many) {
       if (!this.checkNum(argumentsKey.GrossMargin)){   // 正则验证
         return this.$message.error('毛利率：大于0，小于100，必填，保留两位小数');
       }
     }

     await this.submitMoney({
        SpuId: this.bonusSpuId,
        PerformanceFeeInfoList: this.Many
      })
    },


     let haveIds = that.tableData.map(item => item.SpuId);  // 已选择的产品Id
        // 选择去重
        for (let id of list) {
          if (haveIds.includes(Number(id))){  //字符串的Id 不行  
            return this.$message.error('选择商品重复, 请重试');
          }
        }

for in for of

for in ----- 用的是下标
for of ----- 用的是数组里面的没一个小对象

vue-element-admin 登录功能总结

登录步骤

1、登录时候先获取token、expireTime等用户信息等可以先存入vuex和cookie，
2、登录成功的话，会跳转，这时候会触发全局导航守卫router.beforeEach，守卫类似laravel中的中间件，
    每一次跳转都会先经过全局导航守卫进行过滤，检测token、权限等功能（借助跳转这个节点利用全局守卫鉴权）、
    生成动态路，此时当前登录用户的权限相关信息已经拿到，接着跳转到将要访问的菜单


    登录-->token---->跳转--->全局守卫得到路由菜单信息----->接着跳转

    前端只是借助全局守卫缓存了一份 路由表, 然后展示相关的菜单、按钮信息，具体权限过滤，还要后端配合

全局导航守卫具体实现步骤

import router from './router'
import store from './store'
import { Message } from 'element-ui'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
import { getToken } from '@/utils/auth' // get token from cookie
import getPageTitle from '@/utils/get-page-title'

NProgress.configure({ showSpinner: false }) // NProgress Configuration
//白名单
const whiteList = ['/login', '/auth-redirect'] // no redirect whitelist

router.beforeEach(async(to, from, next) => {
  console.log('全局路由')
  // start progress bar
  NProgress.start()

  // set page title
  document.title = getPageTitle(to.meta.title)

  // determine whether the user has logged in
  // 从cookies里面获取token、、、、、、、
  const hasToken = getToken()
  //判断token是否存在
  if (hasToken) {
    //判断是否是登录
    if (to.path === '/login') {
      // if is logged in, redirect to the home page
      //是登录跳转到首页
      next({ path: '/' })
      NProgress.done() // hack: https://github.com/PanJiaChen/vue-element-admin/pull/2939
    } else {
      // determine whether the user has obtained his permission roles through getInfo
      //从vuex中获取权限
      const hasRoles = store.getters.roles && store.getters.roles.length > 0
      console.log('hasRoles', hasRoles)
      //如果存在
      if (hasRoles) {
        //放行
        next()
      } else {
        try {
          // get user info
          // note: roles must be a object array! such as: ['admin'] or ,['developer','editor']
          // roles必须是一个数组
          //获取用户信息和权限信息，存到vuex里面
          const { roles } = await store.dispatch('user/getInfo')
          console.log('00000')

          // generate accessible routes map based on roles
          //生成路由数据，是一个数组
          const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
          // console.log(accessRoutes)
          // dynamically add accessible routes
          //添加到路由
          router.addRoutes(accessRoutes)

          // hack method to ensure that addRoutes is complete
          // set the replace: true, so the navigation will not leave a history record
          next({ ...to, replace: true })
        } catch (error) {
          // remove token and go to login page to re-login
          //清空token
          await store.dispatch('user/resetToken')
          Message.error(error || 'Has Error')
          //跳转登录
          next(`/login?redirect=${to.path}`)
          NProgress.done()
        }
      }
    }
  } else {
    /* has no token*/
    //判断是否存在白名单中
    if (whiteList.indexOf(to.path) !== -1) {
      // in the free login whitelist, go directly
      next()
    } else {
      //跳转登录
      // other pages that do not have permission to access are redirected to the login page.
      next(`/login?redirect=${to.path}`)
      NProgress.done()
    }
  }
})

router.afterEach(() => {
  // finish progress bar
  NProgress.done()
})