Merge branch 'dev' of http://git.ycjcjy.com/SpaceOfCheng/admin into dev

package.json

@@ -14,14 +14,17 @@
     "build": "node build/build.js"
   },
   "dependencies": {
+    "@antv/g2": "^3.2.7",
     "axios": "^0.18.0",
     "element-ui": "^2.4.5",
+    "g2-vue": "^1.0.1",
     "js-base64": "^2.4.8",
     "js-md5": "^0.7.3",
     "vue": "^2.5.2",
     "vue-amap": "^0.5.8",
     "vue-cookie": "^1.1.4",
     "vue-fullcalendar": "^1.0.9",
+    "vue-morris": "0.0.13",
     "vue-router": "^3.0.1",
     "vuex": "^3.0.1"
   },

src/components/brokenLineGraph/index.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="component">
+    <h6 class="title">{{data.title}}</h6>
+    <div id="brokenLineGraph" ref="box"></div>
+  </div>
+</template>
+
+<script>
+import G2 from '@antv/g2'
+
+export default {
+  name: '',
+  props: ['data'],
+  data () {
+    return {
+    }
+  },
+  components: {
+    G2,
+  },
+  mounted () {
+    this.$nextTick(function () {
+      this.init()
+    })
+  },
+  methods: {
+    init () {
+      var _that = this
+      var chart = new G2.Chart({
+        container: 'brokenLineGraph',
+        forceFit: true,
+        width: _that.$refs.box.clientWidth,
+        height: 400
+      })
+      chart.source(_that.data.list)
+      chart.scale('y', {
+        min: 0
+      })
+      chart.scale('x', {
+        range: [0, 1]
+      })
+      chart.tooltip({
+        crosshairs: {
+          type: 'line'
+        }
+      })
+      chart.line().position('x*y')
+      chart.point().position('x*y').size(4).shape('circle').style({
+        stroke: '#fff',
+        lineWidth: 1
+      })
+      chart.render()
+    },
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss"
+</style>

src/components/brokenLineGraph/page.scss

@@ -0,0 +1,28 @@
+
+.component{
+  
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

src/components/dashboardList/index.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="dashboardList">
+    <ul class="flex-h">
+      <li class="flex-item" v-for="(item,index) in data.list" :key="index">
+        <div>
+          <div class="centerLabel">
+            <span>{{item.name}}</span>
+            <span>{{item.value}}</span>
+          </div>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: '',
+  props: ['data'],
+  data () {
+    return {
+
+    }
+  },
+  mounted () {
+    this.$nextTick(function () {})
+  },
+  methods: {
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/components/dashboardList/page.scss

@@ -0,0 +1,57 @@
+
+.dashboardList{
+  >ul{
+    >li{
+      margin-left: 20px;
+      position: relative;
+      overflow: hidden;
+      &:first-child{
+        margin-left: 0;
+      }
+      >div{
+        width: 100%;
+        position: relative;
+        overflow: hidden;
+        padding-bottom: 30%;
+        border-radius: 10px;
+        background: #ccc;
+        >div{
+          width: 100%;
+          >*{
+            width: 100%;
+            display: block;
+            text-align: center;
+            font-size: 18px;
+            color: #fff;
+            font-weight: bolder;
+            line-height: 1.6;
+          }
+        }
+      }
+    }
+  }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

src/components/histogram/index.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="component">
+    <h6 class="title">{{data.title}}</h6>
+    <div id="histogram" ref="box"></div>
+  </div>
+</template>
+
+<script>
+import G2 from '@antv/g2'
+
+export default {
+  name: '',
+  props: ['data'],
+  data () {
+    return {
+    }
+  },
+  components: {
+    G2,
+  },
+  mounted () {
+    this.$nextTick(function () {
+      this.init()
+    })
+  },
+  methods: {
+    init () {
+      var _that = this
+      var chart = new G2.Chart({
+        container: 'histogram',
+        forceFit: true,
+        width: _that.$refs.box.clientWidth,
+        height: 400
+      })
+      chart.source(_that.data.list)
+      chart.scale('y', {
+        tickInterval: 20
+      })
+      chart.interval().position('x*y')
+      chart.render()
+    },
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/components/histogram/page.scss

@@ -0,0 +1,28 @@
+
+.component{
+  
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

src/components/pieDiagram/index.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="component">
+    <h6 class="title">{{data.title}}</h6>
+    <div id="pieDiagram" ref="box"></div>
+  </div>
+</template>
+
+<script>
+import G2 from '@antv/g2'
+
+export default {
+  name: '',
+  props: ['data'],
+  data () {
+    return {
+    }
+  },
+  components: {
+    G2,
+  },
+  mounted () {
+    this.$nextTick(function () {
+      this.init()
+    })
+  },
+  methods: {
+    init () {
+      var _that = this
+      var chart = new G2.Chart({
+        container: 'pieDiagram',
+        forceFit: true,
+        width: _that.$refs.box.clientWidth,
+        height: 400
+      })
+      chart.source(_that.data.list, {
+        percent: {
+          formatter: function formatter (val) {
+            val = val * 100 + '%'
+            return val
+          }
+        }
+      })
+      chart.coord('theta', {
+        radius: 0.75
+      })
+      chart.tooltip({
+        showTitle: false,
+        itemTpl: '<li><span style="background-color:{color}" class="g2-tooltip-marker"></span>{name}: {value}</li>'
+      })
+      chart.intervalStack().position('percent').color('item').label('percent', {
+        formatter: (val, item) => {
+          return item.point.item + ': ' + val
+        }
+      }).tooltip('item*percent', function (item, percent) {
+        percent = percent * 100 + '%'
+        return {
+          name: item,
+          value: percent
+        }
+      }).style({
+        lineWidth: 1,
+        stroke: '#fff'
+      })
+      chart.render()
+    },
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/components/pieDiagram/page.scss

@@ -0,0 +1,26 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

src/components/ringChart/index.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="component">
+    <h6 class="title">{{data.title}}</h6>
+    <div id="ringChart" ref="box"></div>
+  </div>
+</template>
+
+<script>
+import G2 from '@antv/g2'
+
+export default {
+  name: '',
+  props: ['data'],
+  data () {
+    return {
+    }
+  },
+  components: {
+    G2,
+  },
+  mounted () {
+    this.$nextTick(function () {
+      this.init()
+    })
+  },
+  methods: {
+    init () {
+      var _that = this
+      var chart = new G2.Chart({
+        container: 'ringChart',
+        forceFit: true,
+        width: _that.$refs.box.clientWidth,
+        height: 400
+      })
+      chart.source(_that.data.list, {
+        percent: {
+          formatter: function formatter (val) {
+            val = val * 100 + '%'
+            return val
+          }
+        }
+      })
+      chart.coord('theta', {
+        radius: 0.75,
+        innerRadius: 0.6
+      })
+      chart.tooltip({
+        showTitle: false,
+        itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
+      })
+      var num = 0
+      for (var n = 0; n < _that.data.list.length; n++) {
+        num += _that.data.list[n].count
+      }
+      // 辅助文本
+      chart.guide().html({
+        position: ['50%', '50%'],
+        html: '<div style="color:#8c8c8c;font-size: 14px;text-align: center;width: 10em;">' + _that.data.title + '<br><span style="color:#8c8c8c;font-size:20px">' + num + '</span></div>',
+        alignX: 'middle',
+        alignY: 'middle'
+      })
+      var interval = chart.intervalStack().position('percent').color('item').label('percent', {
+        formatter: function formatter (val, item) {
+          return item.point.item + ': ' + val
+        }
+      }).tooltip('item*percent', function (item, percent) {
+        percent = percent * 100 + '%'
+        return {
+          name: item,
+          value: percent
+        }
+      }).style({
+        lineWidth: 1,
+        stroke: '#fff'
+      })
+      chart.render()
+      interval.setSelected(_that.data.list[0])
+    },
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/components/ringChart/page.scss

@@ -0,0 +1,28 @@
+
+.component{
+  
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

src/components/siderBar/index.vue

@@ -31,7 +31,7 @@
               </el-menu-item-group>
             </el-submenu>
             <el-menu-item v-else :index="String(index)" :key="index">
-              <span slot="title">{{item.MenuName}}</span>
+              <router-link :to="{name:item.Url,query:{}}" active-class="active">{{item.MenuName}}</router-link>
             </el-menu-item>
           </template>
         </el-menu>

src/pages/login/index.vue

@@ -71,7 +71,7 @@ export default {
           duration: 1000
         })
         setTimeout(() => {
-          this.$router.push({ name: 'userManager' })
+          this.$router.push({ name: 'dashboard' })
         }, 1000)
       }).catch(msg => {
 

src/pages/system/courseManager/courseList/index.vue

@@ -173,7 +173,7 @@
                 :action='$api.file.image.url'
                 :show-file-list="false"
                 :on-success="handleAvatarSuccess">
-                <img v-if="editCourseDetail.newImg" :src="editCourseDetail.newImg" class="avatar">
+                <img v-if="newImg" :src="newImg" class="avatar">
                 <i v-else class="el-icon-plus avatar-uploader-icon"></i>
               </el-upload>
             </div>
@@ -181,19 +181,19 @@
           <el-button
             size="mini"
             type="success"
-            v-if="editCourseDetail.newImg"
+            v-if="newImg"
             @click="addThisImg">确定添加图片</el-button>
         </li>
       </ul>
       <el-table
-        :data="currentCourseDetail"
+        :data="courseImgs"
         stripe
         style="width: 100%">
         <el-table-column
           prop="img"
           label="图片">
           <template slot-scope="scope">
-            <img :src="scope.row.img" alt="">
+            <img :src="scope.row.ImgUrl" style="width:100%" alt="">
           </template>
         </el-table-column>
         <el-table-column
@@ -202,8 +202,7 @@
           <template slot-scope="scope">
             <el-input
               placeholder="请输入内容"
-              v-model="scope.row.sort"
-              :disabled="scope.row.edit ? false : true">
+              v-model="scope.row.Sort">
             </el-input>
           </template>
         </el-table-column>
@@ -213,12 +212,6 @@
             <el-button
               size="mini"
               type="success"
-              v-if="!scope.row.edit"
-              @click="editItem(scope.$index, scope.row)">编辑</el-button>
-            <el-button
-              size="mini"
-              type="success"
-              v-if="scope.row.edit"
               @click="sureSort(scope.$index, scope.row)">确认</el-button>
             <el-button
               size="mini"
@@ -241,15 +234,13 @@ export default {
   name: '',
   data () {
     return {
+      selCourseId: '',
       currentCourseDetail: [{
         img: '',
         sort: 1,
         edit: false,
       }],
-      editCourseDetail: {
-        newImg: '',
-        list: [],
-      },
+      newImg: '',
       centerDialogVisible: false, // 课程详情弹窗显隐
       total: 0,
       postData: { // 表格搜索条件
@@ -275,6 +266,7 @@ export default {
     }),
     ...mapCourseState({
       courses: x => x.courseList,
+      courseImgs: x => x.courseImgs
     }),
     ...mapLocationState({
       location: x => x.location
@@ -290,21 +282,46 @@ export default {
   },
   methods: {
     deleteItem (index, item) { // 删除图片
-
+      this.$confirm('确认删除此课程?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(() => {
+          this.DelCourseImg({id: item.ImgId, callback: this.afterImgAction})
+        })
     },
     sureSort (index, item) { // 确认图片排序
-      this.currentCourseDetail[index].edit = false
+      this.UpdateCourseImg({...item, callback: this.afterImgAction})
     },
     editItem (index, item) { // 编辑图片排序
-      this.currentCourseDetail[index].edit = true
+      let imglist = {...this.courseImgs}
+      imglist[index].edit = true
+      this.UpdateImgList(imglist)
     },
     addThisImg () { // 添加图片到课程详情
-
+      const data = {
+        CourseId: this.selCourseId,
+        ImgUrl: this.newImg,
+        Sort: 0,
+        callback: this.afterImgAction
+      }
+      this.newImg = ''
+      this.AddCourseImg(data)
+    },
+    afterImgAction () {
+      this.$message({
+        type: 'success',
+        message: '操作成功!'
+      })
+      this.GetCourseImgs({id: this.selCourseId})
     },
     handleAvatarSuccess (res, file) {
-      this.editCourseDetail.newImg = res.result.url
+      this.newImg = res.result.url
     },
-    addDetail (val) { // 添加课程详情
+    addDetail (row) { // 添加课程详情
+      this.selCourseId = row.CourseId
+      this.GetCourseImgs({id: this.selCourseId})
       this.centerDialogVisible = true
     },
     ...mapCourseActions([
@@ -313,7 +330,12 @@ export default {
       'UnPublic',
       'DelCourse',
       'SetNull',
-      'GetCourseByID'
+      'GetCourseByID',
+      'GetCourseImgs',
+      'AddCourseImg',
+      'UpdateCourseImg',
+      'DelCourseImg',
+      'UpdateImgList'
     ]),
     ...mapLocationActions([
       'updateLocationInfo',

src/pages/system/courseManager/scheduleManager/index.vue

@@ -79,7 +79,7 @@
                 </el-date-picker>
               </div>
             </div>
-            <span v-else>{{currentCourseItem.BeginDate}}</span>
+            <span v-else>{{this.toolClass.dateFormat(currentCourseItem.BeginDate, 'yyyy-MM-dd hh:mm')}}</span>
           </li>
           <li class="flex-h">
             <span>结束时间：</span>
@@ -92,7 +92,7 @@
                 </el-date-picker>
               </div>
             </div>
-            <span v-else>{{currentCourseItem.EndDate}}</span>
+            <span v-else>{{this.toolClass.dateFormat(currentCourseItem.EndDate, 'yyyy-MM-dd hh:mm')}}</span>
           </li>
         </ul>
       </div>

src/pages/system/dashboard/index.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="subPage">
+    <div class="selectCase">
+      <el-select v-model="CaseId" placeholder="请选择">
+        <el-option
+          v-for="item in cases"
+          :key="item.CaseId"
+          :label="item.CaseName"
+          :value="item.CaseId">
+        </el-option>
+      </el-select>
+    </div>
+    <div class="flex-h" v-for="(item,index) in pageData" :key="index">
+      <div class="flex-item" v-for="(subItem,subIndex) in item" :key="subIndex">
+        <div v-if="subItem.type === 'dashboardList'">
+          <dashboardList :data="subItem.data"></dashboardList>
+        </div>
+        <div v-if="subItem.type === 'histogram'">
+          <histogram :data="subItem.data"></histogram>
+        </div>
+        <div v-if="subItem.type === 'pieDiagram'">
+          <pieDiagram :data="subItem.data"></pieDiagram>
+        </div>
+        <div v-if="subItem.type === 'brokenLineGraph'">
+          <brokenLineGraph :data="subItem.data"></brokenLineGraph>
+        </div>
+        <div v-if="subItem.type === 'ringChart'">
+          <ringChart :data="subItem.data"></ringChart>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import dashboardList from '../../../components/dashboardList/index'
+import histogram from '../../../components/histogram/index'
+import pieDiagram from '../../../components/pieDiagram/index'
+import brokenLineGraph from '../../../components/brokenLineGraph/index'
+import ringChart from '../../../components/ringChart/index'
+
+export default {
+  name: '',
+  data () {
+    return {
+      postData: {
+        caseid: ''
+      },
+      pageData: [
+        [
+          { type: 'dashboardList', remark: '列表面板', data: { title: '', list: [{ name: '会员总数', value: '1000', }, { name: '课程预约总量', value: '1000', }, { name: '饮品下单总量', value: '1000', }] } }
+        ],
+        [
+          { type: 'histogram', remark: '柱状图', data: { title: '今日数据', list: [{ x: '推荐会员新增', y: 38 }, { x: '课程数', y: 52 }, { x: '预约数', y: 61 }, { x: '到场人次', y: 145 }] } },
+          { type: 'pieDiagram', remark: '扇形图', data: { title: '明日课程预约数据', list: [{ item: '小小体验官', count: 40, percent: 0.4 }, { item: '哈他瑜伽', count: 52, percent: 0.52 }, { item: '小小飞行家', count: 8, percent: 0.08 }] } }
+        ],
+        [
+          { type: 'brokenLineGraph', remark: '折线图', data: { title: '下单饮品数据', list: [{ x: '09/05', y: 3 }, { x: '09/06', y: 4 }, { x: '09/07', y: 3.5 }, { x: '09/08', y: 5 }, { x: '09/09', y: 4.9 }, { x: '09/10', y: 6 }, { x: '09/11', y: 7 }, { x: '09/12', y: 9 }, { x: '09/13', y: 13 }] } },
+          { type: 'ringChart', remark: '环形图', data: { title: '本月课程预约', list: [{ item: '健身课程', count: 40, percent: 0.4 }, { item: '社交课程', count: 21, percent: 0.21 }, { item: '教育课程', count: 17, percent: 0.17 }, { item: '健康课程', count: 13, percent: 0.13 }, { item: '艺术课程', count: 9, percent: 0.09 }] } },
+        ],
+        [
+          { type: '', remark: '', data: { title: '', list: [] } },
+        ],
+      ],
+    }
+  },
+  components: {
+    dashboardList,
+    histogram,
+    pieDiagram,
+    brokenLineGraph,
+    ringChart,
+  },
+  computed: {
+    ...mapState({
+      cases: x => x.app.cases.list,
+      defaultCaseId: x => x.app.cases.default
+    }),
+    CaseId: {
+      get () {
+        return this.postData.caseid || this.defaultCaseId
+      },
+      set (val) {
+        this.postData.caseid = val
+      }
+    }
+  },
+  mounted () {
+    this.$nextTick(function () {
+      this.drawHistogram()
+    })
+  },
+  methods: {
+    drawHistogram () { // 绘制柱状图
+      // this.histogramInit.source(this.histogramParams)
+    },
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/pages/system/dashboard/page.scss

@@ -0,0 +1,54 @@
+
+.subPage{
+  >*{
+    width: calc(100% - 40px);
+    position: relative;
+    overflow: hidden;
+    margin: 20px auto 0;
+    >div{
+      >div{
+        >div{
+          
+        }
+      }
+    }
+  }
+  >*:last-child{
+    margin-bottom: 20px;
+  }
+  .selectCase{
+    text-align: right;
+  }
+  .top{
+    
+  }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

src/pages/system/page.js

@@ -1,6 +1,8 @@
 
 import system from './index' // 系统首页
 
+import dashboard from './dashboard/index' // 控制板
+
 import systemSet from './systemSet/index' // 系统设置
 import userManager from './systemSet/userManager/index' // 用户管理
 import addUser from './systemSet/userManager/add' // 添加用户
@@ -85,7 +87,12 @@ export default {
       path: '/system',
       name: 'system',
       component: system,
-      children: [{ // 系统设置
+      children: [{ // 首页控制板
+        path: 'dashboard',
+        name: 'dashboard',
+        component: dashboard,
+        children: []
+      }, { // 系统设置
         path: 'systemSet',
         name: 'systemSet',
         component: systemSet,

src/pages/system/systemSet/roleManager/add.vue

@@ -75,10 +75,12 @@ export default {
       if ((this.detail.RoleId || '') === '') {
         this.detail.CaseId = this.caseid
         this.detail.OrgId = this.orgid
-        this.AddRole(this.detail)
+        this.AddRole({...this.detail, callback: this.afterSave})
       } else {
-        this.UpdateRole(this.detail)
+        this.UpdateRole({...this.detail, callback: this.afterSave})
       }
+    },
+    afterSave () {
       this.$message({
         type: 'success',
         message: '操作成功'

src/store/course/course.js

@@ -6,6 +6,7 @@ export default {
   state: {
     courseList: [],
     courseInfo: {},
+    courseImgs: [],
   },
   mutations: {
     updateList (state, payload) {
@@ -14,6 +15,9 @@ export default {
     updateInfo (state, payload) {
       state.courseInfo = payload || {}
     },
+    updateImgList (state, payload) {
+      state.courseImgs = payload
+    }
   },
   actions: {
     GetCourseList ({ commit }, payload) {
@@ -44,6 +48,9 @@ export default {
         }
       }).then(res => {
         commit('updateInfo', res)
+        if (payload.callback) {
+          payload.callback()
+        }
       })
     },
     UpdateCourse ({ commit }, payload) {
@@ -56,6 +63,9 @@ export default {
           id: payload.GoodsId,
         }
       }).then(res => {
+        if (payload.callback) {
+          payload.callback()
+        }
       })
     },
     DelCourse ({ commit }, { id, callback }) {
@@ -99,6 +109,61 @@ export default {
     },
     UpdateInfo ({ commit }, payload) {
       commit('updateInfo', payload)
-    }
+    },
+    UpdateImgList ({ commit }, payload) {
+      commit('updateImgList', payload)
+    },
+    GetCourseImgs ({ commit }, {id, callback}) {
+      ajax(api.course.getimgs.url, {
+        method: api.course.getimgs.method,
+        urlData: {
+          id: id,
+        }
+      }).then(res => {
+        commit('updateImgList', res)
+        if (callback) {
+          callback()
+        }
+      })
+    },
+    AddCourseImg ({ commit }, payload) {
+      ajax(api.course.addimgs.url, {
+        method: api.course.addimgs.method,
+        data: {
+          ...payload
+        }
+      }).then(res => {
+        if (payload.callback) {
+          payload.callback()
+        }
+      })
+    },
+    UpdateCourseImg ({ commit }, payload) {
+      ajax(api.course.updateimgs.url, {
+        method: api.course.updateimgs.method,
+        data: {
+          ...payload
+        },
+        urlData: {
+          id: payload.id
+        }
+      }).then(res => {
+        if (payload.callback) {
+          payload.callback()
+        }
+      })
+    },
+    DelCourseImg ({ commit }, { id, callback }) {
+      ajax(api.course.deleteimgs.url, {
+        method: api.course.deleteimgs.method,
+        urlData: {
+          id: id,
+        }
+      }).then(res => {
+        if (callback) {
+          callback()
+        }
+      })
+    },
   }
 }

src/store/system/role.js

@@ -48,6 +48,9 @@ export default {
         }
       }).then(res => {
         commit('updateInfo', res)
+        if (payload.callback) {
+          payload.callback()
+        }
       })
     },
     UpdateRole ({ commit }, payload) {
@@ -57,6 +60,9 @@ export default {
           ...payload
         }
       }).then(res => {
+        if (payload.callback) {
+          payload.callback()
+        }
       })
     },
     DelRole ({ commit }, { id, callback }) {

src/style/main.css

@@ -388,6 +388,15 @@ select:focus {
   display: inline-block;
 }
 
+.component,
+.component>div,
+#mountNode>div{
+  width: 100%;
+  height: 100%;
+}
+
+
+