目录显示

src/main.js

@@ -22,6 +22,8 @@ if (process.env.NODE_ENV !== 'production') {
// 挂载全局
Vue.prototype.$http = httpRequest // ajax请求方法
Vue.prototype.isAuth = isAuth     // 权限方法
Vue.prototype.meetingMenu = false     // 会议目录
Vue.prototype.meetingMenuId = 0     // 会议目录
// 保存整站vuex本地储存初始状态
window.SITE_CONFIG['storeState'] = cloneDeep(store.state)

src/router/index.js

@@ -36,8 +36,7 @@ const mainRoutes = {
    { path: '/home', component: _import('common/home'), name: 'home', meta: { title: '首页' } },
    { path: '/theme', component: _import('common/theme'), name: 'theme', meta: { title: '主题' } },
    { path: '/demo-echarts', component: _import('demo/echarts'), name: 'demo-echarts', meta: { title: 'demo-echarts', isTab: true } },
    { path: '/demo-ueditor', component: _import('demo/ueditor'), name: 'demo-ueditor', meta: { title: 'demo-ueditor', isTab: true } },
    { path: '/home2', component: _import('modules/admin/home2'), name: 'home2', meta: { title: '企业平台首页' } }
    { path: '/demo-ueditor', component: _import('demo/ueditor'), name: 'demo-ueditor', meta: { title: 'demo-ueditor', isTab: true } }
  ],
  beforeEnter (to, from, next) {
    let token = Vue.cookie.get('token')
@@ -64,12 +63,14 @@ router.beforeEach((to, from, next) => {
    next()
  } else {
    http({
      url: http.adornUrl('/sys/menu/nav'),
      // url: http.adornUrl('/sys/menu/nav'),
      url: http.adornUrl('/admin/adminmenu/nav'),
      method: 'get',
      params: http.adornParams()
    }).then(({data}) => {
      if (data && data.code === 0) {
        fnAddDynamicMenuRoutes(data.menuList)
        // fnAddDynamicMenuRoutes(data.menuList)
        fnAddDynamicMenuRoutesMy(data.menuList)
        router.options.isAddDynamicMenuRoutes = true
        sessionStorage.setItem('menuList', JSON.stringify(data.menuList || '[]'))
        sessionStorage.setItem('permissions', JSON.stringify(data.permissions || '[]'))
@@ -107,7 +108,62 @@ function fnCurrentRouteType (route, globalRoutes = []) {
 * @param {*} menuList 菜单列表
 * @param {*} routes 递归创建的动态(菜单)路由
 */
function fnAddDynamicMenuRoutes (menuList = [], routes = []) {
// function fnAddDynamicMenuRoutes (menuList = [], routes = []) {
//   var temp = []
//   for (var i = 0; i < menuList.length; i++) {
//     if (menuList[i].list && menuList[i].list.length >= 1) {
//       temp = temp.concat(menuList[i].list)
//     } else if (menuList[i].url && /\S/.test(menuList[i].url)) {
//       menuList[i].url = menuList[i].url.replace(/^\//, '')
//       var route = {
//         path: menuList[i].url.replace('/', '-'),
//         component: null,
//         name: menuList[i].url.replace('/', '-'),
//         meta: {
//           menuId: menuList[i].menuId,
//           title: menuList[i].name,
//           isDynamic: true,
//           isTab: true,
//           iframeUrl: ''
//         }
//       }
//       // url以http[s]://开头, 通过iframe展示
//       if (isURL(menuList[i].url)) {
//         route['path'] = `i-${menuList[i].menuId}`
//         route['name'] = `i-${menuList[i].menuId}`
//         route['meta']['iframeUrl'] = menuList[i].url
//       } else {
//         try {
//           route['component'] = _import(`modules/${menuList[i].url}`) || null
//         } catch (e) {}
//       }
//       routes.push(route)
//     }
//   }
//   if (temp.length >= 1) {
//     fnAddDynamicMenuRoutes(temp, routes)
//   } else {
//     mainRoutes.name = 'main-dynamic'
//     mainRoutes.children = routes
//     router.addRoutes([
//       mainRoutes,
//       { path: '*', redirect: { name: '404' } }
//     ])
//     sessionStorage.setItem('dynamicMenuRoutes', JSON.stringify(mainRoutes.children || '[]'))
//     console.log('\n')
//     console.log('%c!<-------------------- 动态(菜单)路由 s -------------------->', 'color:blue')
//     console.log(mainRoutes.children)
//     console.log('%c!<-------------------- 动态(菜单)路由 e -------------------->', 'color:blue')
//   }
// }
/**
 * 2020-03-11 修改动态路由
 * @param {*} menuList 菜单列表
 * @param {*} routes 递归创建的动态(菜单)路由
 */
function fnAddDynamicMenuRoutesMy (menuList = [], routes = []) {
  var temp = []
  for (var i = 0; i < menuList.length; i++) {
    if (menuList[i].list && menuList[i].list.length >= 1) {
@@ -115,14 +171,14 @@ function fnAddDynamicMenuRoutes (menuList = [], routes = []) {
    } else if (menuList[i].url && /\S/.test(menuList[i].url)) {
      menuList[i].url = menuList[i].url.replace(/^\//, '')
      var route = {
        path: menuList[i].url.replace('/', '-'),
        path: addMeetingId(menuList[i].url.replace('/', '-'), menuList[i].parentId),
        component: null,
        name: menuList[i].url.replace('/', '-'),
        name: addMeetingId(menuList[i].url.replace('/', '-'), menuList[i].parentId),
        meta: {
          menuId: menuList[i].menuId,
          title: menuList[i].name,
          isDynamic: true,
          isTab: true,
          isTab: menuList[i].isTab,
          iframeUrl: ''
        }
      }
@@ -141,7 +197,7 @@ function fnAddDynamicMenuRoutes (menuList = [], routes = []) {
    }
  }
  if (temp.length >= 1) {
    fnAddDynamicMenuRoutes(temp, routes)
    fnAddDynamicMenuRoutesMy(temp, routes)
  } else {
    mainRoutes.name = 'main-dynamic'
    mainRoutes.children = routes
@@ -157,4 +213,12 @@ function fnAddDynamicMenuRoutes (menuList = [], routes = []) {
  }
}
function addMeetingId (url, parentId) {
  // console.log(url)
  if (parentId === 76) {
    url += '/:id'
  }
  return url
}
export default router

src/views/common/home.vue

@@ -1,39 +1,208 @@
<style>
ul li {
  list-style-type: none
}
</style>
<template>
  <div class="mod-home">
    <h3>项目介绍</h3>
    <ul>
      <li>renren-fast-vue基于vue、element-ui构建开发，实现<a href="https://gitee.com/renrenio/renren-fast" target="_blank">renren-fast</a>后台管理前端功能，提供一套更优的前端解决方案</li>
      <li>前后端分离，通过token进行数据交互，可独立部署</li>
      <li>主题定制，通过scss变量统一一站式定制</li>
      <li>动态菜单，通过菜单管理统一管理访问路由</li>
      <li>数据切换，通过mock配置对接口数据／mock模拟数据进行切换</li>
      <li>发布时，可动态配置CDN静态资源／切换新旧版本</li>
      <li>演示地址：<a href="http://demo.open.renren.io/renren-fast" target="_blank">http://demo.open.renren.io/renren-fast</a> (账号密码：admin/admin)</li>
    </ul>
    <h3>获取帮助</h3>
    <ul>
      <li>官方社区：<a href="https://www.renren.io/community" target="_blank">https://www.renren.io/community</a></li>
      <li>前端Git地址：<a href="https://github.com/renrenio/renren-fast-vue" target="_blank">https://github.com/renrenio/renren-fast-vue</a></li>
      <li>后台Git地址：<a href="https://gitee.com/renrenio/renren-fast" target="_blank">https://gitee.com/renrenio/renren-fast</a></li>
      <li>代码生成器：<a href="https://gitee.com/renrenio/renren-generator" target="_blank">https://gitee.com/renrenio/renren-generator</a></li>
      <li>如需关注项目最新动态，请Watch、Star项目，同时也是对项目最好的支持</li>
     </ul>
    <h3>官方QQ群</h3>
    <ul>
      <li>高级群：324780204(大牛云集，跟大牛学习新技能)</li>
      <li>普通群：145799952(学习交流，互相解答各种疑问)</li>
    </ul>
  <div class="mod-config">
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <h2>未发布中的会议</h2>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6">
        <div class="grid-content bg-purple-light">
          <el-button
            v-if="isAuth('admin:meeting:save')"
            type="primary"
            @click="addOrUpdateHandle()"
          >+ 创建新会议</el-button>
        </div>
      </el-col>
       <ul>
        <template v-for="item in dataList">
          <li :key="item.id" v-if="!item.isCheck" @click="routerTo(item.id)">
              <el-col :span="6">
                <div class="grid-content bg-purple-dark">
                  <img src="/static/img/huiyiim.jpg" alt="会议图片" />
                  <h3>{{item.nameCn}}</h3>
                  <div>
                    <span>{{item.address}}</span>
                    <span>{{item.startTime}}</span>
                  </div>
                </div>
              </el-col>
          </li>
        </template>
      </ul>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <h2>发布中的会议</h2>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <ul>
        <template v-for="item in dataList">
          <li :key="item.id" v-if="item.isCheck == 1" @click="routerTo(item.id)">
              <el-col :span="6">
                <div class="grid-content bg-purple-dark">
                  <img src="/static/img/huiyiim.jpg" alt="会议图片" />
                  <h3>{{item.nameCn}}</h3>
                  <div>
                    <span>{{item.address}}</span>
                    <span>{{item.startTime}}</span>
                  </div>
                </div>
              </el-col>
          </li>
        </template>
      </ul>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <h2>已结束的会议</h2>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <ul>
        <template v-for="item in dataList">
          <li :key="item.id" v-if="item.isCheck == 2" @click="routerTo(item.id)">
              <el-col :span="6">
                <div class="grid-content bg-purple-dark">
                  <img src="/static/img/huiyiim.jpg" alt="会议图片" />
                  <h3>{{item.nameCn}}</h3>
                  <div>
                    <span>{{item.address}}</span>
                    <span>{{item.startTime}}</span>
                  </div>
                </div>
              </el-col>
          </li>
        </template>
      </ul>
    </el-row>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
  </div>
</template>
<script>
  export default {
import AddOrUpdate from '../modules/admin/meeting-add-or-update'
export default {
  data () {
    return {
      dataForm: {
        key: ''
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false
    }
  },
  components: {
    AddOrUpdate
  },
  activated () {
    this.meetingMenuId = 0
    this.getDataList()
  },
  methods: {
    routerTo (mid) {
      this.$router.push({ name: 'admin-meeting/:id', params: { id: mid } })
    },
    // 获取数据列表
    getDataList () {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/admin/meeting/list'),
        method: 'get',
        params: this.$http.adornParams({
          page: this.pageIndex,
          limit: this.pageSize,
          key: this.dataForm.key
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.page.list
          this.totalPage = data.page.totalCount
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getDataList()
    },
    // 多选
    selectionChangeHandle (val) {
      this.dataListSelections = val
    },
    // 新增 / 修改
    addOrUpdateHandle (id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id)
      })
    },
    // 删除
    deleteHandle (id) {
      var ids = id
        ? [id]
        : this.dataListSelections.map(item => {
          return item.id
        })
      this.$confirm(
        `确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        this.$http({
          url: this.$http.adornUrl('/admin/meeting/delete'),
          method: 'post',
          data: this.$http.adornData(ids, false)
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.getDataList()
              }
            })
          } else {
            this.$message.error(data.msg)
          }
        })
      })
    }
  }
}
</script>
<style>
  .mod-home {
    line-height: 1.5;
  }
</style>

src/views/main-sidebar-sub-menu.vue

@@ -7,12 +7,15 @@
      <icon-svg :name="menu.icon || ''" class="site-sidebar__menu-icon"></icon-svg>
      <span>{{ menu.name }}</span>
    </template>
    <sub-menu
      v-for="item in menu.list" 
      :key="item.menuId"
      :menu="item"
      :dynamicMenuRoutes="dynamicMenuRoutes">
    <template v-for="item in menu.list">
      <sub-menu
        :key="item.menuId"
        :menu="item"
        :dynamicMenuRoutes="dynamicMenuRoutes"
        v-if="item.me!=0 || meetingId!=0"  
      >
    </sub-menu>
    </template>
  </el-submenu>
  <el-menu-item v-else :index="menu.menuId + ''" @click="gotoRouteHandle(menu)">
    <icon-svg :name="menu.icon || ''" class="site-sidebar__menu-icon"></icon-svg>
@@ -23,6 +26,11 @@
<script>
  import SubMenu from './main-sidebar-sub-menu'
  export default {
    data () {
      return {
        meetingId: 0
      }
    },
    name: 'sub-menu',
    props: {
      menu: {
@@ -42,12 +50,21 @@
        get () { return this.$store.state.common.sidebarLayoutSkin }
      }
    },
    watch: {
      '$route' (to, from) {
        // 对路由变化作出响应...
        // console.log(this.$route.params)
        this.meetingId = this.$route.params.hasOwnProperty('id') ? this.$route.params.id :0
        console.log(this.meetingId)
      }
    },
    methods: {
      // 通过menuId与动态(菜单)路由进行匹配跳转至指定路由
      gotoRouteHandle (menu) {
        var route = this.dynamicMenuRoutes.filter(item => item.meta.menuId === menu.menuId)
        let mid = this.$route.params.hasOwnProperty('id') ? this.$route.params.id : 0
        if (route.length >= 1) {
          this.$router.push({ name: route[0].name })
          this.$router.push({ name: route[0].name, params: { id: mid } })
        }
      }
    }

src/views/main-sidebar.vue

@@ -24,10 +24,6 @@
            <span slot="title">ueditor</span>
          </el-menu-item>
        </el-submenu>
         <el-menu-item index="home2" @click="$router.push({ name: 'home2' })">
          <icon-svg name="shouye" class="site-sidebar__menu-icon"></icon-svg>
          <span slot="title">企业平台首页</span>
        </el-menu-item>
        <sub-menu
          v-for="menu in menuList"
          :key="menu.menuId"

src/views/modules/admin/home2.vue

@@ -1,17 +0,0 @@
<template>
  <div class="mod-home">
    <h2>欢迎登录【企业名称】登录会议管理系统V1.0</h2>
  </div>
</template>
<script>
  export default {
  }
</script>
<style>
  .mod-home {
    line-height: 2;
  }
</style>

src/views/modules/admin/meeting-info.vue

@@ -0,0 +1,210 @@
<style>
ul li {
  list-style-type: none
}
</style>
<template>
  <div class="mod-config">
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <h2>未发布中的会议</h2>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6">
        <div class="grid-content bg-purple-light">
          <el-button
            v-if="isAuth('admin:meeting:save')"
            type="primary"
            @click="addOrUpdateHandle()"
          >+ 创建新会议</el-button>
        </div>
      </el-col>
      <ul>
        <template v-for="item in dataList">
          <li :key="item.id" v-if="!item.isCheck">
            <router-link to="/">
              <el-col :span="6">
                <div class="grid-content bg-purple-dark">
                  <img src="/static/img/huiyiim.jpg" alt="会议图片" />
                  <h3>{{item.nameCn}}</h3>
                  <div>
                    <span>{{item.address}}</span>
                    <span>{{item.startTime}}</span>
                  </div>
                </div>
              </el-col>
            </router-link>
          </li>
        </template>
      </ul>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <h2>发布中的会议</h2>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <ul>
        <template v-for="item in dataList">
          <li :key="item.id" v-if="!item.isCheck == 1">
            <router-link to="/">
              <el-col :span="6">
                <div class="grid-content bg-purple-dark">
                  <img src="/static/img/huiyiim.jpg" alt="会议图片" />
                  <h3>{{item.nameCn}}</h3>
                  <div>
                    <span>{{item.address}}</span>
                    <span>{{item.startTime}}</span>
                  </div>
                </div>
              </el-col>
            </router-link>
          </li>
        </template>
      </ul>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <h2>已结束的会议</h2>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <ul>
        <template v-for="item in dataList">
          <li :key="item.id" v-if="!item.isCheck == 2">
            <router-link to="/">
              <el-col :span="6">
                <div class="grid-content bg-purple-dark">
                  <img src="/static/img/huiyiim.jpg" alt="会议图片" />
                  <h3>{{item.nameCn}}</h3>
                  <div>
                    <span>{{item.address}}</span>
                    <span>{{item.startTime}}</span>
                  </div>
                </div>
              </el-col>
            </router-link>
          </li>
        </template>
      </ul>
    </el-row>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
  </div>
</template>
<script>
import AddOrUpdate from './meeting-add-or-update'
export default {
  data () {
    return {
      dataForm: {
        key: ''
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false
    }
  },
  components: {
    AddOrUpdate
  },
  activated () {
    this.getDataList()
  },
  methods: {
    // 获取数据列表
    getDataList () {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/admin/meeting/list'),
        method: 'get',
        params: this.$http.adornParams({
          page: this.pageIndex,
          limit: this.pageSize,
          key: this.dataForm.key
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.page.list
          this.totalPage = data.page.totalCount
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getDataList()
    },
    // 多选
    selectionChangeHandle (val) {
      this.dataListSelections = val
    },
    // 新增 / 修改
    addOrUpdateHandle (id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id)
      })
    },
    // 删除
    deleteHandle (id) {
      var ids = id
        ? [id]
        : this.dataListSelections.map(item => {
          return item.id
        })
      this.$confirm(
        `确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        this.$http({
          url: this.$http.adornUrl('/admin/meeting/delete'),
          method: 'post',
          data: this.$http.adornData(ids, false)
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.getDataList()
              }
            })
          } else {
            this.$message.error(data.msg)
          }
        })
      })
    }
  }
}
</script>

src/views/modules/admin/meeting2.vue

@@ -1,179 +0,0 @@
<style>
ul li {
  list-style-type:none;
}
</style>
<template>
  <div class="mod-config">
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <h2>未发布中的会议</h2>
        </div>
        </el-col>
    </el-row>
    <el-row>
      <el-col :span="6">
        <div class="grid-content bg-purple-light">
          <el-button v-if="isAuth('admin:meeting:save')" type="primary" @click="addOrUpdateHandle()">+ 创建新会议</el-button>
        </div>
      </el-col>
      <ul>
        <li v-for="item in dataList" :key="item.id"  v-if="!item.isCheck">
          <el-col :span="6">
            <div class="grid-content bg-purple-dark">
              <img src="/static/img/huiyiim.jpg" alt="会议图片">
              <h3>{{item.nameCn}}</h3>
              <div><span>{{item.address}}</span><span>{{item.startTime}}</span></div>
            </div>
          </el-col>
        </li>
      </ul>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <h2>发布中的会议</h2>
        </div>
        </el-col>
    </el-row>
    <el-row>
      <ul>
        <li v-for="item in dataList" :key="item.id"  v-if="item.isCheck == 1">
      <el-col :span="6">
        <div class="grid-content bg-purple-dark">
          <img src="/static/img/huiyiim.jpg" alt="会议图片">
            <h3>{{item.nameCn}}</h3>
            <div><span>{{item.address}}</span><span>{{item.startTime}}</span></div>
          </div>
        </el-col>
        </li>
      </ul>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <h2>已结束的会议</h2>
        </div>
        </el-col>
    </el-row>
    <el-row>
      <ul>
        <li v-for="item in dataList" :key="item.id"  v-if="item.isCheck == 2">
          <el-col :span="6">
            <div class="grid-content bg-purple-dark">
              <img src="/static/img/huiyiim.jpg" alt="会议图片">
              <h3>{{item.nameCn}}</h3>
              <div><span>{{item.address}}</span><span>{{item.startTime}}</span></div>
            </div>
            </el-col>
          </li>
      </ul>
    </el-row>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
  </div>
</template>
<script>
  import AddOrUpdate from './meeting-add-or-update'
  export default {
    data () {
      return {
        dataForm: {
          key: ''
        },
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        dataListSelections: [],
        addOrUpdateVisible: false
      }
    },
    components: {
      AddOrUpdate
    },
    activated () {
      this.getDataList()
    },
    methods: {
      // 获取数据列表
      getDataList () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/admin/meeting/list'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'key': this.dataForm.key
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataList = data.page.list
            this.totalPage = data.page.totalCount
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
      // 多选
      selectionChangeHandle (val) {
        this.dataListSelections = val
      },
      // 新增 / 修改
      addOrUpdateHandle (id) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(id)
        })
      },
      // 删除
      deleteHandle (id) {
        var ids = id ? [id] : this.dataListSelections.map(item => {
          return item.id
        })
        this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/admin/meeting/delete'),
            method: 'post',
            data: this.$http.adornData(ids, false)
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.getDataList()
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        })
      }
    }
  }
</script>

src/views/modules/sys/filemanager.vue

@@ -0,0 +1,141 @@
<template>
  <div class="mod-oss">
    <el-form :inline="true" :model="dataForm">
      <el-form-item>
        <el-button type="primary" @click="uploadHandle()">上传文件</el-button>
      </el-form-item>
    </el-form>
    
    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      style="width: 100%;">
      <el-table-column
        prop="fileName"
        header-align="center"
        align="center"
        width="200"
        label="文件(目录)名">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="activeFileHandle(scope.row.fileName, scope.row.suffix)">{{scope.row.fileName}}</el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="size"
        header-align="center"
        align="center"
        label="大小">
      </el-table-column>
      <el-table-column
        prop="modifyTime"
        header-align="center"
        align="center"
        width="180"
        label="最后修改时间">
      </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="150"
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹窗, 上传文件 -->
    <upload v-if="uploadVisible" ref="upload" @refreshDataList="getDataList"></upload>
  </div>
</template>
<script>
  import Upload from './upload-img'
  import Filemanager from './filemanager'
  export default {
    data () {
      return {
        activepath: '',
        dataForm: {},
        dataList: [],
        dataListLoading: false,
        uploadVisible: false
      }
    },
    components: {
      Upload,
      Filemanager
    },
    activated () {
      this.getDataList()
    },
    methods: {
      // 获取数据列表
      getDataList () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/sys/filemanager/list'),
          method: 'get',
          params: this.$http.adornParams({
            'activepath': this.activepath
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            // console.log(data.resultList)
            this.dataList = data.resultList
            this.activepath = data.activepath
          } else {
            this.dataList = []
          }
          this.dataListLoading = false
        })
      },
      activeFileHandle (fileName, suffix) {
        // console.log(suffix)
        // console.log(fileName)
        this.activepath += '/' + fileName
        if (suffix === '' || suffix === null) {
          this.getDataList()
        }
      },
      // 上传文件
      uploadHandle () {
        this.uploadVisible = true
        this.$nextTick(() => {
          this.$refs.upload.init()
        })
      },
      // 删除
      deleteHandle (id) {
        var ids = id ? [id] : this.dataListSelections.map(item => {
          return item.id
        })
        this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/sys/oss/delete'),
            method: 'post',
            data: this.$http.adornData(ids, false)
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.getDataList()
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }).catch(() => {})
      }
    }
  }
</script>

src/views/modules/sys/upload-img.vue

@@ -0,0 +1,73 @@
<template>
  <el-dialog
    title="上传文件"
    :close-on-click-modal="false"
    @close="closeHandle"
    :visible.sync="visible">
    <el-upload
      :action="url"
      ref="upload"
      :before-upload="beforeUploadHandle"
      :on-success="successHandle"
      name="upload_file"
      :auto-upload="false"
      :data="thumb"
      style="text-align: center;">
      <i class="el-icon-upload"></i>
       <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <div class="el-upload__tip" slot="tip">只支持jpg、png、gif格式的图片！只能上传jpg/png文件，且不超过2M</div>
      <el-radio v-model="radio" label="1">是</el-radio>
      <el-radio v-model="radio" label="0" >否</el-radio>
      <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
    </el-upload>
  </el-dialog>
</template>
<script>
  export default {
    data () {
      return {
        visible: false,
        url: '',
        radio: '0',
        thumb: {'isthumb': 0}
      }
    },
    methods: {
      init (id) {
        this.url = this.$http.adornUrl(`/sys/filemanager/uploadimg?token=${this.$cookie.get('token')}`)
        this.visible = true
      },
      submitUpload () {
        this.$refs.upload.submit()
      },
      // 上传之前
      beforeUploadHandle (file) {
        this.thumb.isthumb = this.radio
        if (file.type !== 'image/jpg' && file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
          this.$message.error('只支持jpg、png、gif格式的图片！')
          return false
        }
      },
      // 上传成功
      successHandle (response) {
        console.log(response)
        if (response && response.code === 0) {
          this.$confirm('操作成功, 是否继续操作?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).catch(() => {
            this.visible = false
          })
        } else {
          this.$message.error(response.msg)
        }
      },
      // 弹窗关闭时
      closeHandle () {
        this.$emit('refreshDataList')
      }
    }
  }
</script>

static/config/index.js

@@ -5,7 +5,7 @@
  window.SITE_CONFIG = {};
  // api接口请求地址
  window.SITE_CONFIG['baseUrl'] = 'http://152.136.140.176:8002/renren-fast';
  window.SITE_CONFIG['baseUrl'] = 'http://121.42.53.174:8002/renren-fast';
  // cdn地址 = 域名 + 版本号
  window.SITE_CONFIG['domain']  = './'; // 域名