增加搜索分页demo

src/api/filter.js

@@ -0,0 +1,28 @@
+import request from '@/utils/request'
+
+// 过滤
+export function filterUser(query) {
+  return request({
+    url: '/v1/user/filter-user',
+    method: 'get',
+    params: query
+  })
+}
+
+// 删除角色
+export function deleteRole(id) {
+  return request({
+    url: '/v1/admin/role-delete/'+id,
+    method: 'get',
+    params: {}
+  })
+}
+
+// 列表
+export function adminRole(query) {
+  return request({
+    url: '/v1/admin/role',
+    method: 'get',
+    params: query
+  })
+}

src/components/FilterUser.vue

@@ -0,0 +1,511 @@
+<template>
+  <div class="filter-user">
+    <div class="filter-option">
+      <el-select
+        v-model="filterType"
+        class="filter-item"
+        placeholder="筛选类型"
+        @change="handleFilterTypeChange"
+      >
+        <el-option v-for="(item,key) in allFilterTypes" :key="key" :label="item.name" :value="key" />
+      </el-select>
+      <el-select
+        v-model="filterSymbol"
+        class="filter-item"
+        placeholder="筛选方式"
+      >
+        <el-option v-for="(item,key) in filterSymbols" :key="key" :label="item" :value="key" />
+      </el-select>
+      <template
+        v-if="filterType !== '' && allFilterTypes[filterType].hasOwnProperty('other') && allFilterTypes[filterType].other === 'date'"
+      >
+        <el-date-picker
+          v-model="filterValue"
+          class="filter-item"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          type="datetime"
+          placeholder="选择日期"
+        />
+      </template>
+      <template
+        v-else-if="filterType !== '' && allFilterTypes[filterType].hasOwnProperty('other') && allFilterTypes[filterType].other === 'month'"
+      >
+        <el-date-picker
+          v-model="filterValue"
+          class="filter-item"
+          value-format="yyyyMM"
+          type="month"
+          placeholder="选择月份"
+        />
+      </template>
+      <template
+        v-else-if="filterType !== '' && allFilterTypes[filterType].hasOwnProperty('other') && allFilterTypes[filterType].other === 'area'"
+      >
+        <el-cascader
+          v-model="filterAreaValue"
+          class="filter-item"
+          :options="regionData"
+          :props="{ checkStrictly: true }"
+        />
+      </template>
+      <template
+        v-else-if="filterType !== '' && allFilterTypes[filterType].hasOwnProperty('other') && allFilterTypes[filterType].other === 'select'"
+      >
+        <el-select
+          v-model="filterValue"
+          class="filter-item"
+          :placeholder="`请选择${allFilterTypes[filterType].name}`"
+        >
+          <el-option
+            v-for="(item,key) in allFilterTypes[filterType].selectData"
+            :key="key"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </template>
+      <template
+        v-else-if="filterType !== '' && allFilterTypes[filterType].hasOwnProperty('other') && filterCustomType.hasOwnProperty(allFilterTypes[filterType].other)"
+      >
+        <el-select v-model="filterValue" class="filter-item" :placeholder="`${filterCustomType[allFilterTypes[filterType].other].placeholder}`">
+          <el-option v-for="(item,key) in filterCustomType[allFilterTypes[filterType].other].values" :key="key" :label="item[filterCustomType[allFilterTypes[filterType].other].labelField]" :value="item[filterCustomType[allFilterTypes[filterType].other].valueField]" />
+        </el-select>
+      </template>
+      <template v-else>
+        <el-input v-model="filterValue" class="filter-item filter-value" placeholder="请输入内容" />
+      </template>
+      <el-select
+        v-model="filterRelation"
+        class="filter-item filter-relation"
+        placeholder="关系"
+      >
+        <el-option v-for="(item,key) in filterRelations" :key="key" :label="item" :value="key" />
+      </el-select>
+      <el-button class="filter-item" icon="el-icon-plus" @click="handleOptionPlus" />
+      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilterUser">{{ filterBtnName }}</el-button>
+      <el-button class="filter-item" type="" @click="handleFilterClear">重置</el-button>
+      <el-button class="down-button" type="text"><i class="el-icon-arrow-down" /></el-button>
+    </div>
+    <div v-show="filterSelected.length > 0" class="filter-selected">
+      <el-tag
+        v-for="(item,key) in filterSelected"
+        :key="key"
+        class="selected-tag"
+        closable
+        @close="handleCloseTag(key)"
+      >{{ item.filterTypeName }} {{ item.filterSymbolName }} {{ item.filterName }}
+      </el-tag>
+    </div>
+    <el-dialog title="会员筛选" :visible.sync="filterUserDialogShow" width="80%">
+      <el-table
+        v-loading="loading"
+        :data="tableData"
+        stripe
+        style="width: 100%;"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55" />
+        <el-table-column label="会员编号">
+          <template slot-scope="scope">
+            {{ scope.row.USER_NAME }}
+          </template>
+        </el-table-column>
+        <el-table-column label="姓名">
+          <template slot-scope="scope">
+            {{ scope.row.REAL_NAME }}
+          </template>
+        </el-table-column>
+        <el-table-column label="证件号码" width="180">
+          <template slot-scope="scope">
+            {{ scope.row.ID_CARD }}
+          </template>
+        </el-table-column>
+        <el-table-column label="手机号码">
+          <template slot-scope="scope">
+            {{ scope.row.MOBILE }}
+          </template>
+        </el-table-column>
+        <el-table-column label="会员级别">
+          <template slot-scope="scope">
+            {{ scope.row.DEC_LV ? filterCustomType.decLevel.values[scope.row.DEC_LV]['LEVEL_NAME'] : '' }}
+          </template>
+        </el-table-column>
+        <el-table-column label="聘级">
+          <template slot-scope="scope">
+            {{ scope.row.EMP_LV ? filterCustomType.empLevel.values[scope.row.EMP_LV]['LEVEL_NAME'] : '' }}
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="white-box-footer">
+        <el-button type="primary" size="small" :disabled="multipleSelectionUserId == undefined || multipleSelectionUserId.length <= 0?true:false" @click="handleSelectValue(false)">确认筛选</el-button>
+        <pagination :total="totalCount" :page_size="pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { filterUser } from '@/api/filter'
+import baseInfo from '@/utils/baseInfo'
+import store from '@/utils/vuexStore'
+import Pagination from './Pagination'
+import filterHelper from '@/utils/filterHelper'
+
+export default {
+  name: 'FilterUser',
+  components: { Pagination },
+  props: {
+    filterTypes: {
+      type: Object,
+      default() {
+        return {
+          'USER_NAME': { isUserTable: true, name: '会员编号' },
+          'REAL_NAME': { isUserTable: true, name: '会员姓名' },
+          'ID_CARD': { isUserTable: true, name: '身份证' },
+          'MOBILE': { isUserTable: true, name: '手机号' },
+          'CREATED_AT': { isUserTable: true, name: '加入时间', other: 'date' }
+        }
+      }
+    },
+    filterBtnName: {
+      type: String,
+      default() {
+        return '筛选会员'
+      }
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      filterUserDialogShow: false,
+      tableData: [],
+      currentPage: 1,
+      totalPages: 1,
+      totalCount: 1,
+      pageSize: 20,
+      filterCustomType: {
+        decLevel: {
+          placeholder: '请选择报单级别',
+          labelField: 'LEVEL_NAME',
+          valueField: 'ID',
+          values: baseInfo.decLevels()
+        },
+        empLevel: {
+          placeholder: '请选择聘级',
+          labelField: 'LEVEL_NAME',
+          valueField: 'ID',
+          values: baseInfo.empLevels()
+        },
+        decRole: {
+          placeholder: '请选择报单中心级别',
+          labelField: 'ROLE_NAME',
+          valueField: 'ID',
+          values: baseInfo.decRoles()
+        },
+        subCompany: {
+          placeholder: '请选择分公司',
+          labelField: 'COM_NAME',
+          valueField: 'ID',
+          values: baseInfo.subCompanies()
+        },
+        status: {
+          placeholder: '请选择会员状态',
+          labelField: 'label',
+          valueField: 'value',
+          values: baseInfo.allStatus()
+        },
+        dealTypes: {
+          placeholder: '请选择交易类型',
+          labelField: 'TYPE_NAME',
+          valueField: 'ID',
+          values: baseInfo.dealTypes()
+        },
+        systems: {
+          placeholder: '请选择体系',
+          labelField: 'SYSTEM_NAME',
+          valueField: 'ID',
+          values: baseInfo.systems()
+        },
+        sex: {
+          placeholder: '请选择性别',
+          labelField: 'label',
+          valueField: 'value',
+          values: {
+            '男': { label: '男', value: '男' },
+            '女': { label: '女', value: '女' }
+          }
+        },
+        yesOrNo: {
+          placeholder: '请选择是否',
+          labelField: 'label',
+          valueField: 'value',
+          values: {
+            1: { label: '是', value: 1 },
+            0: { label: '否', value: 0 }
+          }
+        },
+        banks: {
+          placeholder: '请选择开户行',
+          labelField: 'BANK_NAME',
+          valueField: 'BANK_CODE',
+          values: baseInfo.allOpenBank()
+        },
+        nations: {
+          placeholder: '请选择民族',
+          labelField: 'name',
+          valueField: 'id',
+          values: baseInfo.allNation()
+        },
+        location: {
+          placeholder: '请选择市场',
+          labelField: 'label',
+          valueField: 'value',
+          values: {
+            1: { label: '一市场', value: 1 },
+            2: { label: '二市场', value: 2 },
+            3: { label: '三市场', value: 3 },
+            4: { label: '四市场', value: 4 },
+            5: { label: '五市场', value: 5 }
+          }
+        }
+      },
+      filterModel: {
+        userId: ''
+      },
+      allFilterTypes: this.filterTypes,
+      filterType: '',
+      filterSymbol: '',
+      filterSymbols: {
+        '=': '等于',
+        'like': '包含',
+        '<>': '不等于',
+        'notLike': '不包含',
+        '>': '大于',
+        '>=': '大于等于',
+        '<': '小于',
+        '<=': '小于等于'
+      },
+      filterRelation: 'and',
+      filterRelations: {
+        'and': '并且',
+        'or': '或者'
+      },
+      filterValue: '',
+      filterName: '',
+      filterSelected: [],
+      selectData: [],
+      multipleSelection: [],
+      multipleSelectionUserId: [],
+      regionData: store.state.regionInfo.regionData,
+      filterAreaValue: [],
+      filterRequest: {}
+    }
+  },
+  watch: {
+    filterTypes(newVal) {
+      this.allFilterTypes = this.filterTypes
+    }
+  },
+  methods: {
+    handleFilterTypeChange() {
+      this.filterValue = ''
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+      this.multipleSelectionUserId = []
+      for (const i in this.multipleSelection) {
+        this.multipleSelectionUserId.push(this.multipleSelection[i].ID)
+      }
+    },
+    handleCurrentChange(page) {
+      this.getData(this.filterRequest, page, this.pageSize)
+    },
+    handleSizeChange(pageSize) {
+      this.getData(this.filterRequest, this.currentPage, pageSize)
+    },
+    remoteMethod(query) {
+      if (query !== '') {
+        this.loading = true
+        filterUser({ kw: query }).then(response => {
+          this.selectData = response
+          this.loading = false
+        }).catch(err => {
+          this.loading = false
+        })
+      }
+    },
+    handleOptionPlus() {
+      if (this.filterType === '' || this.filterSymbol === '' || (this.filterValue === '' && this.filterAreaValue === [])) {
+        this.$message({
+          message: '请填写完整筛选内容',
+          type: 'warning'
+        })
+        return false
+      }
+      let valueName = this.filterValue
+      if (this.filterType !== '' && this.allFilterTypes[this.filterType].hasOwnProperty('other')) {
+        // 获取下拉筛选时的选中项
+        if (this.allFilterTypes[this.filterType].other === 'select') {
+          let nameObj = []
+          const _this = this
+          if (!Array.isArray(this.allFilterTypes[this.filterType].selectData)) {
+            nameObj[0] = this.allFilterTypes[this.filterType].selectData[_this.filterValue]
+          } else {
+            nameObj = (this.allFilterTypes[this.filterType].selectData).filter(function(item, index, array) {
+              return item.id === _this.filterValue
+            })
+          }
+          valueName = nameObj[0] ? nameObj[0].name : null
+        } else if (this.allFilterTypes[this.filterType].other === 'area') {
+          if (this.filterSymbol !== '=') {
+            this.$message({
+              message: '地区仅限于"等于"的筛选方式',
+              type: 'warning'
+            })
+            return false
+          }
+          this.filterValue = this.filterAreaValue.join(',')
+          valueName = ''
+          for (const i in this.regionData) {
+            if (this.regionData[i].value === this.filterAreaValue[0]) {
+              valueName += this.regionData[i].label + ','
+              for (const j in this.regionData[i].children) {
+                if (this.regionData[i].children[j].value === this.filterAreaValue[1]) {
+                  valueName += this.regionData[i].children[j].label + ','
+                  for (const h in this.regionData[i].children[j].children) {
+                    if (this.regionData[i].children[j].children[h].value === this.filterAreaValue[2]) {
+                      valueName += this.regionData[i].children[j].children[h].label
+                      break
+                    }
+                  }
+                  break
+                }
+              }
+              break
+            }
+          }
+        } else if (this.filterCustomType.hasOwnProperty(this.allFilterTypes[this.filterType].other)) {
+          const allCustomData = this.filterCustomType[this.allFilterTypes[this.filterType].other].values
+          const customField = this.filterCustomType[this.allFilterTypes[this.filterType].other].labelField
+          valueName = allCustomData[this.filterValue][customField]
+        }
+      }
+      // 如果是筛选会员编号，则把会员编号转成小写
+      // if(this.filterType === 'USER_NAME'){
+      //   this.filterValue = this.filterValue.toLowerCase()
+      // }
+
+      this.filterSelected.push({
+        filterType: this.filterType,
+        filterTypeName: this.allFilterTypes[this.filterType].name,
+        filterSymbol: this.filterSymbol,
+        filterSymbolName: this.filterSymbols[this.filterSymbol],
+        filterValue: this.filterValue,
+        filterRelation: this.filterRelation,
+        filterRelationName: this.filterRelations[this.filterRelation],
+        filterName: valueName,
+        filterOther: this.filterType !== '' && this.allFilterTypes[this.filterType].hasOwnProperty('other') ? this.allFilterTypes[this.filterType].other : null,
+        isUserTable: this.allFilterTypes[this.filterType].isUserTable
+      })
+    },
+    handleCloseTag(tag) {
+      this.filterSelected.splice(tag, 1)
+    },
+    handleFilterUser() {
+      console.log('===>>>', this.filterSelected.length, '<<===')
+      if (this.filterSelected.length > 0) {
+        this.loading = true
+        this.filterRequest = {}
+        for (const i in this.filterSelected) {
+          if (this.filterSelected[i].isUserTable) {
+            let reqFilterValue = `${this.filterSelected[i].filterSymbol},${this.filterSelected[i].filterValue}`
+            if (this.filterSelected[i].hasOwnProperty('filterOther')) {
+              reqFilterValue += `,${this.filterSelected[i].filterOther}`
+            }
+            const filterType = this.filterSelected[i].filterType
+            if (this.filterRequest[filterType]) {
+              this.$set(this.filterRequest, filterType, (this.filterRequest[filterType] + '|' + reqFilterValue))
+            } else {
+              this.$set(this.filterRequest, filterType, reqFilterValue)
+            }
+          }
+        }
+        if (Object.keys(this.filterRequest).length === 0) {
+          this.handleSelectValue(true)
+        } else {
+          this.getData(this.filterRequest, this.currentPage)
+        }
+      }
+    },
+    getData(request, page = null, pageSize = null) {
+      request.page = page
+      request.pageSize = pageSize
+
+      filterUser(this.listQuery).then(response => {
+        this.filterUserDialogShow = true
+      })
+    },
+    handleSelectValue(isAll = false) {
+      const otherFilterTypes = []
+      for (const i in this.filterSelected) {
+        if (!this.filterSelected[i].isUserTable) {
+          otherFilterTypes.push(this.filterSelected[i])
+        }
+      }
+      let userIds = this.multipleSelectionUserId
+      if (isAll) {
+        userIds = 'all'
+      }
+      this.$emit('select-value', {
+        userIds: userIds,
+        otherFilterTypes: otherFilterTypes
+      })
+      this.filterUserDialogShow = false
+    },
+    handleFilterClear() {
+      Object.assign(this.$data, this.$options.data())
+      this.allFilterTypes = this.filterTypes
+      // 清空地址栏
+      filterHelper.clearFilterOption(this)
+      this.$emit('select-value', { userIds: 'all', otherFilterTypes: [] })
+    }
+  }
+}
+</script>
+
+  <style scoped>
+    .filter-option:after {
+      content: '';
+      clear: both;
+      display: table;
+    }
+
+    .filter-item {
+      float: left;
+      margin-left: 10px;
+    }
+
+    .filter-value {
+      width: 200px;
+    }
+
+    .filter-relation {
+      width: 100px;
+      display: none;
+    }
+
+    .down-button {
+      float: right;
+    }
+
+    .filter-selected {
+      clear: both;
+      margin: 10px;
+      padding: 5px;
+      border: 1px solid #ebeef5;
+    }
+
+    .selected-tag {
+      margin-left: 10px;
+    }
+  </style>

src/components/Pagination/index.vue

@@ -1,101 +1,94 @@
 <template>
-  <div :class="{'hidden':hidden}" class="pagination-container">
-    <el-pagination
-      :background="background"
-      :current-page.sync="currentPage"
-      :page-size.sync="pageSize"
-      :layout="layout"
-      :page-sizes="pageSizes"
-      :total="total"
-      v-bind="$attrs"
-      @size-change="handleSizeChange"
-      @current-change="handleCurrentChange"
-    />
+  <div style="float: right;">
+      <el-pagination
+          :page-sizes="pageSizes"
+          :page-size="pageSize"
+          :background="background"
+          :layout="pageLayout"
+          @size-change="sizeChange"
+          @current-change="currentChange"
+          :total="pageTotal">
+      </el-pagination>
   </div>
 </template>
 
 <script>
-import { scrollTo } from '@/utils/scroll-to'
-
-export default {
-  name: 'Pagination',
-  props: {
-    total: {
-      required: true,
-      type: Number
-    },
-    page: {
-      type: Number,
-      default: 1
-    },
-    limit: {
-      type: Number,
-      default: 20
-    },
-    pageSizes: {
-      type: Array,
-      default() {
-        return [10, 20, 30, 50]
-      }
-    },
-    layout: {
-      type: String,
-      default: 'total, sizes, prev, pager, next, jumper'
+  export default {
+    name: "pagination",
+    props: {
+      total: {
+        default: 0,
+        type: Number
+      },
+      page_sizes:{
+        default: function(){
+          return [1, 2, 5, 10, 20]
+        },
+        type: Array
+      },
+      page_size: {
+        default: 20,
+        type: Number
+      },
+      layout: {
+        default: "total, sizes, prev, pager, next, jumper",
+        type: String
+      },
+      page: {
+        default: 1,
+        type: Number
+      },
+      background: {
+        default: true,
+        type: Boolean
+      },
     },
-    background: {
-      type: Boolean,
-      default: true
+    data(){
+      return {
+        pageTotal: 1,
+        pageSizes:null,
+        pageSize:20,
+        pageLayout: null,
+        colSpan:18
+      };
     },
-    autoScroll: {
-      type: Boolean,
-      default: true
+    created(){
+      this.pageTotal = this.total;
+      this.pageSizes = this.page_sizes;
+      this.pageSize = this.page_size;
+      this.pageLayout = this.layout;
+      this.colSpan = this.span;
     },
-    hidden: {
-      type: Boolean,
-      default: false
-    }
-  },
-  computed: {
-    currentPage: {
-      get() {
-        return this.page
+    watch:{
+      total(){
+        this.pageTotal = this.total;
+      },
+      page_sizes(){
+        this.pageSizes = this.page_sizes
+      },
+      page_size(){
+        this.pageSize = this.page_size;
       },
-      set(val) {
-        this.$emit('update:page', val)
+      layout(){
+        this.pageLayout = this.layout;
+      },
+      span(){
+        this.colSpan = this.span;
       }
     },
-    pageSize: {
-      get() {
-        return this.limit
+    methods:{
+      currentChange(currentPage){
+        this.$emit('current-change', currentPage);
       },
-      set(val) {
-        this.$emit('update:limit', val)
-      }
-    }
-  },
-  methods: {
-    handleSizeChange(val) {
-      this.$emit('pagination', { page: this.currentPage, limit: val })
-      if (this.autoScroll) {
-        scrollTo(0, 800)
+      sizeChange(size){
+        this.$emit('size-change', size);
       }
     },
-    handleCurrentChange(val) {
-      this.$emit('pagination', { page: val, limit: this.pageSize })
-      if (this.autoScroll) {
-        scrollTo(0, 800)
-      }
+    mounted(){
     }
   }
-}
 </script>
 
 <style scoped>
-.pagination-container {
-  background: #fff;
-  padding: 32px 16px;
-}
-.pagination-container.hidden {
-  display: none;
-}
+
 </style>

src/layout/index.vue

@@ -5,7 +5,7 @@
     <div :class="{hasTagsView:needTagsView}" class="main-container">
       <div :class="{'fixed-header':fixedHeader}">
         <navbar />
-        <tags-view v-if="needTagsView" />
+        <!-- <tags-view v-if="needTagsView" /> -->
       </div>
       <app-main />
       <right-panel v-if="showSettings">

src/main.js

@@ -8,6 +8,7 @@ import Element from 'element-ui'
 import './styles/element-variables.scss'
 
 import '@/styles/index.scss' // global css
+import '@/styles/style.scss' // 项目全局样式
 
 import App from './App'
 import store from './store'

src/router/index.js

@@ -50,6 +50,17 @@ export const constantRoutes = [
       }
     ]
   },
+  {
+    path: '/admin',
+    component: Layout,
+    hidden: true,
+    children: [
+      {
+        path: '/admin/role',
+        component: () => import('@/views/admin/role')
+      }
+    ]
+  },
   {
     path: '/login',
     component: () => import('@/views/login/index'),

src/styles/style.scss

@@ -0,0 +1,595 @@
+html, body, #app {
+    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+    height: 100%;
+}
+.app-main {
+    padding: 20px;
+    background-color: #f0f2f5;
+}
+
+/* 滚动条 */
+::-webkit-scrollbar-thumb:horizontal { /*水平滚动条的样式*/
+    background-color: rgba(64,158,255,.3);
+}
+::-webkit-scrollbar-track-piece {
+    background-color: #fff; /*滚动条的背景颜色*/
+    -webkit-border-radius: 0; /*滚动条的圆角宽度*/
+}
+::-webkit-scrollbar {
+    width: 10px; /*滚动条的宽度*/
+    height: 6px; /*滚动条的高度*/
+    background:#f4f4f5;
+}
+::-webkit-scrollbar-thumb:vertical { /*垂直滚动条的样式*/
+    background-color: rgba(64,158,255,.3);
+    outline: 2px solid #fff;
+    outline-offset: -2px;
+    border: 2px solid #fff;
+}
+::-webkit-scrollbar-thumb:hover { /*滚动条的hover样式*/
+    background-color: #66b1ff;
+}
+
+a {
+    text-decoration: none;
+}
+
+.display-none {
+    display: none !important;
+}
+
+.loading-icon {
+
+}
+
+.el-container {
+    height: 100%;
+}
+
+.el-header {
+    background-color: #4f5467;
+    color: #fff;
+    line-height: 60px;
+    position: absolute;
+    top: 0;
+    height: 60px;
+    width: 100%;
+}
+
+.el-header a, .el-header button {
+    color: #fff;
+}
+
+.el-header h4{display: inline;}
+
+.el-header .el-breadcrumb{float: right;line-height: 60px;}
+.el-header .el-breadcrumb .el-breadcrumb__item .el-breadcrumb__inner{color: #f0f0f0;}
+.el-header .el-breadcrumb .el-breadcrumb__item:last-child .el-breadcrumb__inner{color: #409EFF;}
+
+.el-main {
+    width: 100%;
+}
+
+.el-main .white-box{margin-bottom: 0;box-shadow: 0 1px 20px rgba(0, 0, 0, .08)}
+
+.el-menu--collapse {
+    width: 59px;
+}
+
+.al-left {
+    float: left;
+}
+
+.img-circle {
+    border-radius: 50%;
+}
+
+.layout-menu-left {
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+}
+
+.layout-menu-left li {
+    list-style-type: none;
+    display: inline;
+    margin: 10px;
+}
+
+.top-message {
+    position: relative;
+}
+
+.top-message-card {
+    width: 200px;
+    height: 300px;
+    position: absolute;
+    top: 41px;
+    left: 0px;
+    z-index: 1;
+    background: #fff;
+    border: 1px solid rgba(120, 130, 140, .21);
+
+}
+
+.el-aside {
+    background: #fff;
+    width: 100%;
+    z-index: 1;
+    display: none;
+    margin-top: 60px;
+}
+
+.el-aside::-webkit-scrollbar {
+    width: 0;
+}
+
+.el-aside, .el-main {
+    /*overflow: visible !important;*/
+}
+
+.el-aside.show-menu {
+    display: block;
+}
+
+.el-container {
+    display: block;
+}
+
+.layout-menu-left li.scale-menu {
+    display: none;
+}
+
+.layout-menu-left li.mobile-menu {
+    display: inline;
+}
+
+.el-menu {
+    border: none;
+}
+
+.el-menu .site-title h1 {
+    text-align: center;
+}
+
+.el-menu li {
+    font-size: 14px;
+}
+
+.el-menu li i {
+    font-size: 14px;
+}
+
+.el-menu li span {
+    margin-left: 0px;
+}
+
+.el-menu-item .el-submenu__title {
+    color: #54667a;
+    font-weight: 100;
+}
+
+.el-menu-item.is-active {
+    border-left: 3px solid #f75b36;
+    font-weight: bold;
+    color: #3e4d6c;
+}
+
+.el-menu-item.is-active i {
+    color: #f75b36;
+    font-weight: normal;
+}
+
+.el-menu .user-profile {
+    padding: 15px 0;
+    position: relative;
+    text-align: center;
+}
+
+.el-menu .user-profile .profile-avatar {
+    width: 50px;
+    height: 50px;
+    display: block;
+    margin: 0 auto 10px;
+    text-align: left;
+}
+
+.el-menu .user-profile .profile-username {
+    color: #54667a;
+    font-size: 14px;
+}
+
+.el-menu .user-profile .divider {
+    height: 1px;
+    margin: 9px 0;
+    overflow: hidden;
+    background-color: #e5e5e5;
+}
+
+.el-menu .user-profile .profile-card {
+    background: #fff;
+    border: 1px solid rgba(120, 130, 140, .21);
+    position: absolute;
+    top: 100px;
+    left: 10px;
+    width: 180px;
+    z-index: 2;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    text-align: left;
+    overflow: hidden;
+
+}
+
+.el-menu .user-profile .profile-card li {
+    list-style-type: none;
+    line-height: 38px;
+    padding: 0 15px;
+}
+
+.el-menu .user-profile .profile-card a {
+    color: #54667a;
+}
+
+.breadcrumb-box {
+    background: #fff;
+    padding: 15px 15px 10px;
+    margin-bottom: 5px;
+    margin-top: 60px;
+    overflow: auto;
+}
+
+.breadcrumb-box.show-menu {
+    margin-top: 5px;
+}
+
+.breadcrumb-box h4 {
+    width: 20%;
+    float: left;
+    color: rgba(0, 0, 0, .5);
+    font-weight: 500;
+    margin: 6px 0;
+}
+
+.breadcrumb-box .breadcrumb-content {
+    width: 80%;
+    float: right;
+}
+
+.breadcrumb-box .breadcrumb-content .el-breadcrumb {
+    float: right;
+    line-height: 28px;
+}
+
+.el-breadcrumb .el-breadcrumb__item .el-breadcrumb__inner {
+    font-size: 14px;
+    font-weight: normal;
+}
+
+.el-breadcrumb .el-breadcrumb__item:last-child .el-breadcrumb__inner {
+    font-weight: normal;
+    color: #f75b36;
+    cursor: text;
+}
+
+.waves-btn {
+    width: 100%;
+}
+
+.white-box {
+    background: #fff;
+    padding: 25px;
+    // margin-bottom: 15px;
+    overflow: auto;
+}
+
+.white-box .white-box-title {
+    margin: 0 0 12px;
+    font-weight: 500;
+    text-transform: uppercase;
+    font-size: 16px;
+    line-height: 30px;
+}
+
+.white-box .white-box-footer {
+    background: #fff;
+    padding-top: 15px;
+    box-sizing: border-box;
+    overflow: auto;
+}
+
+.text-center {
+    text-align: center;
+}
+
+.text-white {
+    color: #fff
+}
+
+.text-danger {
+    color: #f75b36
+}
+
+.text-muted {
+    color: #8d9ea7
+}
+
+.text-warning {
+    color: #f8c255
+}
+
+.text-success {
+    color: #00c292
+}
+
+.text-info {
+    color: #008efa
+}
+
+.text-inverse {
+    color: #3e4d6c
+}
+
+.text-blue {
+    color: #02bec9
+}
+
+.text-primary, .text-purple {
+    color: #2c5ca9
+}
+
+.text-megna {
+    color: #00b5c2
+}
+
+.text-dark {
+    color: #686868 !important
+}
+
+.box-bg-primary {
+    background-color: #2c5ca9 !important
+}
+
+.box-bg-success {
+    background-color: #00c292 !important
+}
+
+.box-bg-info {
+    background-color: #008efa !important
+}
+
+.box-bg-warning {
+    background-color: #f8c255 !important
+}
+
+.box-bg-danger {
+    background-color: #f75b36 !important
+}
+
+.box-bg-theme {
+    background-color: #ff6849 !important
+}
+
+.box-bg-theme-dark {
+    background-color: #4f5467 !important
+}
+
+.box-bg-gray {
+    background-color: #e6eaef !important
+}
+
+.box-bg-inverse {
+    background-color: #3e4d6c !important
+}
+
+.box-bg-extlgt {
+    background-color: #f7fafc !important
+}
+
+.box-bg-purple {
+    background-color: #2c5ca9 !important
+}
+
+.box-bg-dark {
+    background-color: #3e4d6c !important
+}
+
+.box-bg-white {
+    background-color: #fff !important
+}
+
+.box-bg-megna {
+    background-color: #00b5c2 !important
+}
+
+.el-pagination {
+    float: right;
+}
+
+.el-pagination .el-pagination__total {
+    display: none !important;
+}
+
+.el-pagination .el-pagination__sizes {
+    display: none !important;
+}
+
+.el-pagination .el-pager {
+    display: none !important;
+}
+
+.el-pagination .el-pagination__jump {
+    display: none !important;
+}
+
+.el-pagination .btn-prev {
+    background-color: #409EFF !important;
+    color: #fff !important;
+}
+
+.el-pagination .btn-next {
+    background-color: #409EFF !important;
+    color: #fff !important;
+    margin-left: 5px;
+}
+
+.panel {
+    border-radius: 3px;
+    margin-bottom: 15px;
+    border-color: rgba(120, 130, 140, .21);
+    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
+}
+
+.panel .panel-heading {
+    color: #3e4d6c;
+    background-color: #fff;
+    border-bottom: 1px solid rgba(120, 130, 140, .21);
+    border-radius: 3px;
+    font-weight: 500;
+    text-transform: uppercase;
+    padding: 20px 25px;
+}
+
+.panel > .panel-heading {
+    border-color: #ddd;
+}
+
+.panel-wrapper {
+    display: block;
+}
+
+.panel .panel-body {
+    padding: 25px;
+    color: #3e4d6c;
+    background-color: #fff;
+}
+
+.panel .panel-footer {
+    background: #fff;
+    color: #3e4d6c;
+    border-top: 1px solid rgba(120, 130, 140, .21);
+    border-radius: 3px;
+    padding: 15px 25px;
+    box-sizing: border-box;
+    overflow: auto;
+}
+
+.admin-role-box .el-checkbox + .el-checkbox {
+    margin-left: 0 !important;
+}
+
+.admin-role-box .el-checkbox {
+    margin-right: 15px;
+}
+
+.number-font {
+    font-family: RubikLight;
+}
+
+@media (min-width: 768px) {
+    .el-aside {
+        width: 220px;
+        box-shadow: 1px 0 20px rgba(0, 0, 0, .08);
+        display: block;
+        margin-top: 0;
+    }
+
+    .el-container {
+        display: flex;
+    }
+
+    .el-header {
+        position: static;
+        top: auto;
+        height: 60px;
+        width: auto;
+    }
+
+    .layout-menu-left {
+        /* width: 500px; */
+		width: 400px;
+    }
+
+    .breadcrumb-box {
+        margin-top: 0;
+        overflow: inherit;
+    }
+
+    .layout-menu-left li.mobile-menu {
+        display: none;
+    }
+
+    .layout-menu-left li.scale-menu {
+        display: inline;
+    }
+
+    .el-pagination .el-pagination__total {
+        display: inline-block !important;
+    }
+
+    .el-pagination .el-pagination__sizes {
+        display: inline-block !important;
+    }
+
+    .el-pagination .el-pager {
+        display: inline-block !important;
+    }
+
+    .el-pagination .el-pagination__jump {
+        display: inline-block !important;
+    }
+
+    .el-pagination .btn-prev {
+        background: none !important;
+        color: #c0c4cc !important;
+    }
+
+    .el-pagination .btn-next {
+        background: none !important;
+        color: #c0c4cc !important;
+        margin-left: 0;
+    }
+
+    .content-wrapper .el-aside {
+        width: 60px;
+    }
+
+    .content-wrapper .el-menu {
+        width: 59px;
+    }
+
+    .content-wrapper .el-menu .user-profile .profile-avatar {
+        width: 40px;
+        height: 40px;
+    }
+
+    .content-wrapper .el-menu .user-profile .profile-username {
+        display: none;
+    }
+
+    .content-wrapper .el-menu-item.is-active {
+        overflow: hidden;
+    }
+
+}
+
+/*细节修改*/
+.filter-box{margin-bottom: 20px;}
+.filter-box .filter-item,.filter-user .el-input-group{vertical-align: middle}
+.el-table th{background: #f5f5f5;border-top: 2px solid #ddd;border-bottom: 1px solid #ddd;font-weight: normal;color: #999;user-select: auto!important;}
+.no-border{border-right-color:transparent;border-bottom-color:transparent;border-top-color:transparent;border-radius: 0;border-left-width: 2px;}
+td .cell .no-border{font-size: 14px;color: #666; font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
+}
+.el-tree-node>.el-tree-node__children{overflow: visible;}
+.el-table__footer .cell{white-space: pre-line;}
+.addr {
+    display: inline-block;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+.el-dropdown-menu__item{white-space: nowrap}
+.form-page{width: 650px;}
+.form-page .el-form-item > .el-form-item__content > .el-input,.form-page .el-form-item > .el-form-item__content > .el-cascader,.form-page .el-form-item > .el-form-item__content > .el-select,.form-page .el-form-item > .el-form-item__content > .el-textarea,.form-page .el-form-item > .el-form-item__content > .el-slider{width: 400px;}
+.form-dialog .el-form-item > .el-form-item__content > .el-input,.form-dialog .el-form-item > .el-form-item__content > .el-cascader,.form-dialog .el-form-item > .el-form-item__content > .el-select,.form-dialog .el-form-item > .el-form-item__content > .el-textarea,.form-dialog .el-form-item > .el-form-item__content > .el-slider{width: 350px;}

src/utils/filterHelper.js

@@ -0,0 +1,47 @@
+import tool from './tool'
+
+const filterHelper = {
+
+  /**
+   * 筛选
+   * @param thisObj
+   * @param filterData
+   */
+  handleFilterUser(thisObj, filterData) {
+    thisObj.filterModel = {}
+    if (filterData.userIds !== 'all') {
+      thisObj.$set(thisObj.filterModel, 'userIds', `in,${filterData.userIds.join()}`)
+    }
+    for (const i in filterData.otherFilterTypes) {
+      let filterValue = `${filterData.otherFilterTypes[i].filterSymbol},${filterData.otherFilterTypes[i].filterValue}`
+      if (filterData.otherFilterTypes[i].hasOwnProperty('filterOther')) {
+        filterValue += `,${filterData.otherFilterTypes[i].filterOther}`
+      }
+      const filterType = filterData.otherFilterTypes[i].filterType
+      if (thisObj.filterModel[filterType]) {
+        thisObj.$set(thisObj.filterModel, filterType, (thisObj.filterModel[filterType] + '|' + filterValue))
+      } else {
+        thisObj.$set(thisObj.filterModel, filterType, filterValue)
+      }
+    }
+    // this.filterModel放在地址栏 供刷新时可以保留筛选结果
+    tool.insertUrlParam('filter', thisObj.filterModel)
+
+    thisObj.getData()
+  },
+  /**
+   * 清空筛选条件
+   * @param thisObj
+   */
+  clearFilterOption(thisObj) {
+    thisObj.filterModel = {}
+    tool.insertUrlParam('filter', '')
+    window.location.href = window.location.href.replace(/(\?|&)filter=/, '')
+    if (thisObj.$refs.filterUser) {
+      thisObj.$refs.filterUser.handleFilterClear()
+    }
+  }
+
+}
+
+export default filterHelper

src/utils/permission.js

@@ -1,21 +1,60 @@
-import store from '@/store'
-
-/**
- * @param {Array} value
- * @returns {Boolean}
- * @example see @/views/permission/directive.vue
- */
-export default function checkPermission(value) {
-  if (value && value instanceof Array && value.length > 0) {
-    const roles = store.getters && store.getters.roles
-    const permissionRoles = value
-
-    const hasPermission = roles.some(role => {
-      return permissionRoles.includes(role)
-    })
-    return hasPermission
-  } else {
-    console.error(`need roles! Like v-permission="['admin','editor']"`)
-    return false
-  }
+// import store from '@/store'
+
+// /**
+//  * @param {Array} value
+//  * @returns {Boolean}
+//  * @example see @/views/permission/directive.vue
+//  */
+// export default function checkPermission(value) {
+//   if (value && value instanceof Array && value.length > 0) {
+//     const roles = store.getters && store.getters.roles
+//     const permissionRoles = value
+
+//     const hasPermission = roles.some(role => {
+//       return permissionRoles.includes(role)
+//     })
+//     return hasPermission
+//   } else {
+//     console.error(`need roles! Like v-permission="['admin','editor']"`)
+//     return false
+//   }
+// }
+
+
+
+// 老项目中的代码,上面注释的是默认项目中的代码
+import baseInfo from './baseInfo'
+import userInfo from './usersInfo'
+import tool from './tool'
+
+const permission = {
+
+  /**
+   * 获取权限
+   * @returns {*}
+   */
+  getPermission(){
+    // 自己的管理组
+    let role = userInfo.baseData().roleId
+    if(role === baseInfo.superAdminRoleId()){
+      return 'all'
+    } else {
+      // 全部的管理员权限
+      let allAdminRoles = baseInfo.adminRoles()
+      // 自己的权限
+      return allAdminRoles[role].PERMISSION
+    }
+  },
+  /**
+   * 是否拥有权限该路由的权限
+   * @param route
+   * @returns {boolean}
+   */
+  hasPermission(route) {
+    let permissions = this.getPermission()
+    if (permissions === 'all') return true
+    return tool.isInArray(permissions, route)
+  },
 }
+
+export default permission

src/utils/tool.js

@@ -144,6 +144,15 @@ const tool = {
       }
     }
   },
+  /**
+   * 是否空对象
+   * @param obj
+   * @returns {boolean}
+   */
+  isEmptyObject (obj) {
+    let objArr = Object.keys(obj)
+    return objArr.length === 0
+  },
   isInArray(arr, value) {
     for (const i in arr) {
       if (value === arr[i]) {
@@ -235,6 +244,29 @@ const tool = {
 
   getEmpLv(id) {
     // return id.length > 0 ? getBaseInfo().empLevels : 'No Rank';
+  },
+  /**
+   * 向地址来看
+   * @param paramName
+   * @param value
+   */
+  insertUrlParam(paramName, value) {
+    if (typeof value === 'object') {
+      if (tool.isEmptyObject(value)) {
+        return
+      }
+      value = JSON.stringify(value)
+    }
+    if (window.location.href.indexOf(paramName) === -1) {
+      if (window.location.href.indexOf('?') !== -1) {
+        window.location.href += ('&' + paramName + '=' + value)
+      } else {
+        window.location.href += ('?' + paramName + '=' + value)
+      }
+    } else {
+      const searchStr = new RegExp('(\\?|&)(' + paramName + '=)([^&]*)(&|$)')
+      window.location.href = window.location.href.replace(searchStr, '$1$2' + value + '$4')
+    }
   }
 }
 

src/utils/vuexStore.js

@@ -0,0 +1,41 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+const moduleSocket = {
+  state: {
+    socketObj: null,
+    onMessageCallback: null
+  }
+}
+const moduleBaseInfo = {
+  state: {
+    decLevels: null,
+    empLevels: null,
+    adminRoles: null,
+    menu: null,
+    daysDiff: null
+  }
+}
+
+const moduleRegionInfo = {
+  state: {
+    provinceAndCityData: [],
+    regionData: [],
+    provinceAndCityDataPlus: [],
+    regionDataPlus: [],
+    CodeToText: {
+      '': null
+    },
+    TextToCode: {}
+  }
+}
+
+export default new Vuex.Store({
+  modules: {
+    socket: moduleSocket,
+    baseInfo: moduleBaseInfo,
+    regionInfo: moduleRegionInfo
+  }
+})

src/views/admin/role.vue

@@ -0,0 +1,236 @@
+<template>
+  <div v-loading="loading">
+    <div class="white-box">
+      <div class="filter-box">
+        <filter-user
+          :filter-types.sync="filterTypes"
+          filter-btn-name="筛选"
+          @select-value="handleFilterUser"
+        />
+      </div>
+      <el-table :data="tableData" stripe style="width: 100%;" :height="tool.getTableHeight()" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" />
+        <el-table-column prop="ROLE_NAME" label="角色">
+          <template slot-scope="scope">
+            <el-tag type="warning" size="small" class="no-border">{{ scope.row.ROLE_NAME }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="REMARK" label="备注" />
+        <el-table-column label="创建人">
+          <template slot-scope="scope">
+            {{ scope.row.CREATE_ADMIN_NAME }}
+          </template>
+        </el-table-column>
+        <el-table-column label="创建时间">
+          <template slot-scope="scope">
+            {{ tool.formatDate(scope.row.CREATED_AT) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="修改人">
+          <template slot-scope="scope">
+            {{ scope.row.UPDATE_ADMIN_NAME }}
+          </template>
+        </el-table-column>
+        <el-table-column label="修改时间">
+          <template slot-scope="scope">
+            {{ tool.formatDate(scope.row.UPDATED_AT) }}
+          </template>
+        </el-table-column>
+        <el-table-column fixed="right" label="操作" width="180">
+          <template slot-scope="scope">
+            <el-dropdown v-if="scope.row.DONT_DEL==='0'&&(permission.hasPermission(`admin/role-permission`)||permission.hasPermission(`admin/role-edit`)||permission.hasPermission(`admin/role-delete`))" size="small" trigger="click" @command="handleRow" @click.stop="">
+              <el-button type="primary" size="small">
+                操作该数据<i class="el-icon-arrow-down el-icon--right" />
+              </el-button>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item v-if="permission.hasPermission(`admin/role-permission`)" :command="`permission|${scope.row.ID}`">权限</el-dropdown-item>
+                <!--                <el-dropdown-item :command="`column|${scope.row.ID}`" v-if="permission.hasPermission(`admin/role-column`)">列表字段权限</el-dropdown-item>-->
+                <el-dropdown-item v-if="permission.hasPermission(`admin/role-edit`)" :command="`edit|${scope.row.ID}`">编辑</el-dropdown-item>
+                <el-dropdown-item v-if="permission.hasPermission(`admin/role-delete`)" :command="`delete|${scope.row.ID}`">删除</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="white-box-footer">
+        <el-dropdown v-if="permission.hasPermission(`admin/role-delete`)" size="small" trigger="click" @command="muliDelHandle">
+          <el-button type="primary" size="small">
+            所选数据<i class="el-icon-arrow-down el-icon--right" />
+          </el-button>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item command="delete">删除</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+        <el-button v-if="permission.hasPermission(`admin/role-add`)" type="primary" size="small" icon="el-icon-plus" @click="onAdd">添加角色</el-button>
+        <pagination :total="totalCount" :page_size="pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange"></pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { deleteRole, adminRole } from '@/api/filter'
+import tool from '@/utils/tool'
+import FilterUser from '@/components/FilterUser'
+import permission from '@/utils/permission'
+import Pagination from '@/components/Pagination'
+import filterHelper from '../../utils/filterHelper'
+
+export default {
+  name: 'Role',
+  components: { FilterUser, Pagination },
+  data() {
+    return {
+      tableData: null,
+      loading: true,
+      multipleSelection: [],
+      currentPage: 1,
+      totalPages: 1,
+      totalCount: 1,
+      pageSize: 20,
+      tool: tool,
+      permission: permission,
+      filterData: null,
+      filterTypes: {
+        'ROLE_NAME': { isUserTable: false, name: '角色' },
+        'REMARK': { isUserTable: false, name: '备注' },
+        'CREATE_ADMIN_NAME': { isUserTable: false, name: '创建人' },
+        'CREATED_AT': { isUserTable: false, name: '创建时间', other: 'date' },
+        'UPDATE_ADMIN_NAME': { isUserTable: false, name: '修改人' },
+        'UPDATED_AT': { isUserTable: false, name: '修改时间', other: 'date' }
+      },
+      filterModel: {}
+    }
+  },
+  created() {
+
+  },
+  mounted() {
+    this.getData()
+  },
+  methods: {
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+    },
+    handleCurrentChange(page) {
+      this.getData(page, this.pageSize)
+    },
+    handleSizeChange(pageSize) {
+      this.getData(this.currentPage, pageSize)
+    },
+    handleRow(command) {
+      const re = command.split('|')
+      this.handleCommand(re[0], re[1])
+    },
+    handleCommand(command, id) {
+      if (command === 'edit') {
+        this.$router.push({ path: `/admin/role-edit/${id}` })
+      } else if (command === 'permission') {
+        this.$router.push({ path: `/admin/role-permission/${id}` })
+      } else if (command === 'column') {
+        this.$router.push({ path: `/admin/role-column/${id}` })
+      } else if (command === 'delete') {
+        this.delHandle(this, id)
+      }
+    },
+    onAdd() {
+      this.$router.push({ path: `/admin/role-add` })
+    },
+    delHandle(obj, id) {
+      obj.$confirm('确定删除选定的数据？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        deleteRole(id).then(response => {
+          this.$message({
+            message: response,
+            type: 'success'
+          })
+          this.getData()
+        }).catch(err => {
+          console.log('err---------'+err)
+        })
+
+        // network.getData(`admin/role-delete/${id}`).then(response => {
+        //   this.$message({
+        //     message: response,
+        //     type: 'success'
+        //   })
+        //   this.getData()
+        // })
+      })
+    },
+    muliDelHandle(command) {
+      if (command === 'delete') {
+        this.$confirm('确定删除选定的数据？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          const selectedIds = []
+          for (const val of this.multipleSelection) {
+            selectedIds.push(val.ID)
+          }
+          //   network.postData(`admin/role-delete`, {
+          //     selected: selectedIds
+          //   }).then(response => {
+          //     this.$message({
+          //       message: response,
+          //       type: 'success'
+          //     })
+          //     this.getData()
+          //   })
+        })
+      }
+    },
+    handleFilterUser(filterData) {
+      filterHelper.handleFilterUser(this, filterData)
+    },
+    handleFilter() {
+      this.getData()
+    },
+    getData(page, pageSize) {
+      const filterData = this.filterModel
+      const vueObj = this
+      let paramsData = Object.assign({
+        page: (page === null || page == undefined) ? 1 : page,
+        pageSize: (pageSize === null || pageSize == undefined) ? vueObj.pageSize : pageSize,
+      }, filterData)
+      adminRole(paramsData).then(response => {
+        vueObj.tableData=response.data.list
+        vueObj.currentPage=page
+        vueObj.totalPages=parseInt(response.data.totalPages)
+        vueObj.totalCount=parseInt(response.data.totalCount)
+        vueObj.pageSize = pageSize
+        this.loading=false;
+      }).catch(err => {
+          console.log('err============='+err)
+          this.loading=false;
+      })
+      //   network.getPageData(this, 'admin/role', page, pageSize, filterData, function (response) {
+      //     vueObj.allData = response
+      //   })
+    }
+  }
+}
+</script>
+
+<style>
+.el-table th > .cell {
+  padding-left: 14px !important;
+  padding-right: 14px !important;
+}
+
+.el-table__fixed-right-patch {
+  width: 0px !important;
+}
+.pagination-container {
+  float: right;
+  padding: 0px 0px !important;
+  margin: 0 0;
+}
+.white-box-footer .el-dropdown {
+  margin-right: 10px;
+}
+</style>

vue.config.js

@@ -38,7 +38,7 @@ module.exports = {
     },
     proxy: {
       [process.env.VUE_APP_BASE_API]:{
-        target:"http://local.ng.backend.api.com",
+        target:"http://172.23.81.127:9970",
         changeOrigin:true,
         pathRewrite:{
           ["^" + process.env.VUE_APP_BASE_API] : ""