前后台管理——富文本、图片上传、列表详情

一、根据用户权限角色设置限定用户访问页面
editrole.vue

onSubmit() {
     this.$message('submit!')
   let authIds = this.list.reduce((pre,item,index)=>{
       if(item.isAuth){
         pre.push(item.id)
       }
       return pre;
     },[])
   let roleIds=authIds.join(',')
   this.form.rule_ids=roleIds
   this.form.id=this.$route.query.id
   editrole(this.form)
     this.$router.push('/user/rolelist')
   }

permission.js

//has token部分
let userinfo = user.userinfo
        let rulelist = user.rulelist
        let ruleids = userinfo.rule_ids.split(',')
        let ruleArr = {}
        rulelist.forEach((item, index) => {
            ruleArr[item.name] = item.id
        });
        if (ruleArr[to.path]) {
            if (ruleids.indexOf(String(ruleArr[to.path])) != -1) {
                next()
            } else {
                Message({
                    message: '您没有权限进入',
                    type: 'error',
                    duration: 2 * 1000
                })
                next('/admin/dashboard')
            }
        } else {
            next()
        }

二、富文本编辑器
使用tinymce作为组件引入使用
三、图片上传

<el-form`在这里插入代码片`-item label="上传图片" >
    <el-upload
    name="uploadflie"
    :on-success="onsuccess"
         class="upload-demo"
         action="/api/assets/upload/upImgs"
         :file-list="fileList"
         list-type="picture"
         drag
         multiple>
         <i class="el-icon-upload"></i>
         <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
         <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
     </el-upload>
   </el-form-item>
   <script>
   export default {
   methods:{
    onsuccess(res){
        this.fileList.push({name:res.data.originname,filename:res.data.filename,url:base+'/static/upload/'+res.data.filename})
       this.form.imgs=JSON.stringify(this.fileList)
		 		}
		 }
 }
   </script>

asset/upload.js

const Base = require('../base.js');
let path = require('path')
let fs = require('fs')

module.exports = class extends Base {
 indexAction() {
   return this.display();
 }
 upImgsAction(){
   let uploadfile = this.file('uploadFile');
   let filepath = uploadfile.path;
   let uploadpath = think.ROOT_PATH + '/www/static/upload';
   think.mkdir(uploadpath);

   let basename = path.basename(filepath);
   var readStream=fs.createReadStream(filepath);
   var writeStream=fs.createWriteStream(uploadpath + '/' + basename);
   readStream.pipe(writeStream);
   this.success({filename:basename,originName:uploadfile.name});
 }
};

四、sku列表详情

<el-form-item label="sku设置" >
       <el-table
     :data="skulist"
     stripe
     style="width: 100%">
     <el-table-column
       label="名称"
       width="180">
       <template slot-scope="scope">
               {{ scope.row.name}}
             </template>
     </el-table-column>

     <el-table-column
       label="类别"
       width="180">
       <template slot-scope="scope">
               {{ scope.row.type }}
             </template>
     </el-table-column>
     <el-table-column
       label="价格">
       <template slot-scope="scope">
               {{ scope.row.sku_price }}
             </template>
     </el-table-column>
     <el-table-column
       label="数量">
       <template slot-scope="scope">
               {{ scope.row.sku_stock }}
             </template>
     </el-table-column>
     <el-table-column
       label="编码">
       <template slot-scope="scope">
               {{ scope.row.sku_code }}
       </template>
     </el-table-column>
     <el-table-column
       label="删除">
        <template slot-scope="scope">
       <el-button type="danger"  class="delbut" @click="delsku(scope.row)" icon="el-icon-delete" circle></el-button>
        </template>
     </el-table-column>
   </el-table> 
   <el-form-item label="sku名称" >
       <el-input v-model="sku.name"/>
   </el-form-item>
   <el-form-item label="sku类型" >
       <el-input v-model="sku.type"/>
   </el-form-item>
   <el-form-item label="sku价格" >
       <el-input v-model="sku.sku_price"/>
   </el-form-item>
   <el-form-item label="sku数量" >
       <el-input v-model="sku.sku_stock"/>
   </el-form-item>  
   <el-form-item label="sku编码" >
       <el-input v-model="sku.sku_code"/>
   </el-form-item>
   <el-button type="primary" @click="addsku">添加sku</el-button>
     </el-form-item>
 //addsku方法
 methods:{
 addsku(){
         if(this.skuObj[this.sku.type]){
           this.skuObj[this.sku.type].push(this.sku)
         }else{
           this.$set(this.skuObj,this.sku.type,[])
           this.skuObj[this.sku.type].push({...this.sku})
         }
         this.form.sku=JSON.stringify(this.skuObj)
     }
}
computed:{
     skulist:function(){
           let list=[]
           for(let key in this.skuObj){
               for(let item of this.skuObj[key]){
                   list.push(item)
               }
           }
       return list
     }
 }