Vue(day10)

权限列表

  1. 表格展示
  2. 请求权限数据
  3. 处理等级
<template slot-scope="scope">
  <span v-if="scope.row.level == 0">一级</span>
  <span v-else-if="scope.row.level==1">二级</span>
  <span v-else>三级</span>
</template>
  1. 处理索引

    添加 type 属性 值:index 索引号就有了 从 1 开始的,,,

  • indexMethod( index ) { // index 就是从 0 开始的
    return index
    }

角色列表

  1. 表格基本 展示
  2. 发送请求获取角色数据
  3. 赋值之后,有个小问题,降低版本 element
    npm i element@2.4.11
  4. 索引

抽离三个部分

用户 - 角色 - 权限 三者之间的关系

<=2=     <=1=

张三 主管 商品管理/订单管理/商品 列表
李四 主管 商品管理/订单管理/商品 列表

接下来要做的是 给角色分配权限

角色列表 (左边) - 展示权限信息

  1. 展开行功能
<el-table-column type="expand">
  <template slot-scope="scope">
    <p>哈哈</p>
  </template>
</el-table-column>
  1. 三层 代码 01
<template slot-scope="scope">
  <!-- 第一层 -->
  <el-row v-for="item1 in scope.row.children" :key="item1.id">
    <el-col :span="4">{{ item1.authName }}</el-col>
    <el-col :span="20">
      <!-- 第二层  -->
      <el-row v-for="item2 in item1.children" :key="item2.id">
        <el-col :span="4">{{ item2.authName }}</el-col>
        <el-col :span="20">
          <!-- 第三层 -->
          <span v-for="item3 in item2.children" :key="item3.id"
            >{{ item3.authName }}</span
          >
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

角色列表 (右边)

  1. 弹出对话框
  • 参考 : Tree 树型组件 -> 默认展开和默认选中
  1. 展示 所有的权限信息
 defaultProps: {
    // children 负责显示结构
    children: 'children',
    // label : 负责显示标题
    label: 'authName'
  }
  1. 展示当前拥有的权限信息
  2. 发送后台
> 参数1: roleId(角色id) 参数2:rids(权限信息的id)
> roleId :  点击弹窗的时候,传row ,把 row的id 保存起来了
> rids => 获取当前选中的权限(√) + 获取当前半选中的权限(-)

pid

{
name :'上海市',
id : 1,
pid :0
children :[
{
id : 2
pid : 1,
name :'静安区',
children : [
{
id :4,
pid :'1,2'
name :'静安寺'
}
]
},
{
id : 3,
pid : 1
name :'浦东新区'
}
]
}

分配角色

  1. 弹出对话框 ok

  2. 展示所有的角色信息

    el-option
    label : 负责展示的 :label='item.roleName'
    value : 负责收集数据 :value='item.id'

  3. 展示当前的角色信息

    1. 传 row 过来 获取三个参数,但是只有两个参数 id 和 username, 用 id 再次获取信息得到 rid
    2. 把 id username rid 都赋值给 assignRoleForm
    3. 稍微处理 一下 rid = -1

  4. 发送请求

左侧栏

动态获取权限菜单

  1. 发送请求获取权限数据
  2. 两层 v-for
  3. 一点开,全部都开了
    el-submenu => index => 不能唯一
  1. el-menu-item 里的 index 作为 path 参与跳转
  1. 刷新可以获取 url 中哈希里的路径
    :default-active="$route.path" => /users

保留页数

思路 :我们可以把页面保存到 url 路径里面, 以后直接获取就知道第几页了
上 => 下

  1. path :'/users/:page?'
  2. 获取 page 发送请求
    const page = this.$route.params.page
    this.loadUsersData(page)
  3. 已经做好的
    this.pagenum = res.data.data.pagenum

下 => 上

  1. 点击页码
    this.$router.push('/users/'+curPage)

商品分类

1 创建组件
2 四个步骤

商品分类 => 树结构

参考 : https://github.com/foolishchow/element-tree-grid

  • 安装 : npm install element-tree-grid --save
  • 引入
import ElTreeGrid from 'element-tree-grid'
Vue.component(ElTreeGrid.name, ElTreeGrid)

  • 拷贝列 + 合并列
    el-table-tree-column

  • 几个属性

  • treeKey => 父节点 找子节点 tree-key='cat_id'

  • parentKey => 子节点找父节点 parent-key='cat_pid'

  • levelKey => 按照等级进行缩进 level-key='cat_level'

  • indentSize => 缩进 :indent-size='20'

添加商品分类

  1. 弹出对话框 ok
  2. 显示父级名称列表

    2.1 先准备级联选择器组件 + options 数据拷贝过来
    2.2 获取二层的分类数据 type:2
    2.3 把数据赋值给 options
    this.options = res.data.data
    2.4 只有结构, 没有显示标题 => 对不上号

  • :props='defaultProps'
  • defaultProps: {
    value :'cat_id',
    label : 'cat_name'
    }

    2.5 addCatForm =>

  1. 发送请求

    const { cat_name, cat_pid_arr } = this.addCatForm
    请求的三个参数
    cat_name 直接用
    cat_pid : 数组的最后一个元素(父 id)
    cat_level 数组的长度

商品列表

  1. 创建商品组件
  2. 四个步骤

添加商品

  1. 步骤条
  • :index='activeIndex'
  • activeIndex : ?
  1. 标签页
  • 每个 tab 元素 加 name
  • tabs => v-model='activeName'
  • 控制 activeName 就可以控制 tabs 的切换

  1. 让标签页 和 步骤条 关联起来

    点击标签页 => 控制步骤条
    3.1 给 tabs 注册一个事件 <el-tabs @tab-click='clickTab'>
    3.2 clickTab(tab) {
    // tab.index 0=> 开始
    this.activeIndex = +tab.index + 1
    }

  2. 处理下一步

  • 基本信息的下一步 next(2,'two')
  • 商品图片的下一步 next(3,'three')
  • next(index,name) {
    this.activeIndex = index
    this.activeName = name
    }
  1. 四个文本输入框 + 级联选择器

    展示 + 获取数据 + 配置项(value,label)
    单选框

    是
    否

商品图片

  1. 拷贝 => el-upload
  2. 处理 actions ='基准路径+ upload'
  3. 处理 请求头 :headers='headers'
  4. 上传成功回调 :on-success='uploadImgSuccess'
    uploadImgSuccess(res) {

}

  1. 添加到数组里
this.addGoodsForm.pics.push({
  pic: res.data.tmp_path
})

富文本编辑器

参考 https://github.com/surmon-china/vue-quill-editor

  • 安装 : npm install vue-quill-editor --save
  • 引入 main.js
// 引入富文本编辑器
import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor /* { default global options } */)
  • 使用 => SPA => 双向数据绑定的
<quill-editor
  v-model="content"
  ref="myQuillEditor"
  :options="editorOption"
  @blur="onEditorBlur($event)"
  @focus="onEditorFocus($event)"
  @ready="onEditorReady($event)"
>
</quill-editor>

scoped

scoped

  • 作用 : 添加 scoped 之后,当前组件内的样式只对当前组件起效果

    不良反应 : html,body => 不起效果的
    不良反应 : 动态添加的不起效果的
    innerHTML => v-html

解决办法 :

  • 方式 1 : 在 less 里面新加一个 style 标签
<style>

.ql-container {
  height: 400px;
  background: pink;
}

.red {
  color: red;
}
</style>
  • 方式 2 : 穿透 /deep/

    父元素 /deep/ 子元素

  • 方式 3 : 穿透 >>> (不支持 less )
    格式 : 父元素 >>> 子元素

配置 CDN

  1. vue 和 vue-router + element-ui
  • 第一步 : index.html 引入 在线的 CDN 包
    <script src='https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.min.js'> </script>
    <script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
     <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    // 引入在线的css 要把本地的css给注释掉, 不然会重复 引入
    // 注释掉 import 'element-ui/lib/theme-chalk/index.css'
  • 第二步 : 配置 => build => webpack.base.conf.js
    // 配置 CDN
    externals: {
    /**
    • 键 : 包名
    • 值 : 全局变量
      */
      vue: 'Vue',
      'vue-router': 'VueRouter'
      'element-ui' :"ELEMENT"
      }
posted @ 2020-05-10 00:24  handsomehe  阅读(149)  评论(0)  编辑  收藏  举报