多语言得写道computed

src/api/filter.js

@@ -32,7 +32,8 @@ export function adminRole(query) {
   return request({
     url: '/v1/admin/role',
     method: 'get',
-    data: query
+    data: query,
+    params:query
   })
 }
 
@@ -53,3 +54,20 @@ export function addOREditRole(path,query) {
     data: query
   })
 }
+
+// 获取角色权限
+export function getRolePermission(id) {
+  return request({
+    url: '/v1/admin/role-permission/'+id,
+    method: 'get'
+  })
+}
+
+// 编辑角色权限
+export function editRolePermission(id, query) {
+  return request({
+    url: '/v1/admin/role-permission/'+id,
+    method: 'post',
+    data: query
+  })
+}

src/components/FilterUser.vue

@@ -174,17 +174,10 @@ export default {
       }
     }
   },
-  data() {
-    return {
-      loading: false,
-      filterUserDialogShow: false,
-      tableData: [],
-      currentPage: 1,
-      totalPages: 1,
-      totalCount: 1,
-      pageSize: 20,
-      filterCustomType: {
-        decLevel: {
+  computed: {
+    filterCustomType() {
+       return {
+          decLevel: {
           placeholder: this.$t('filter.pleaseSelectDecLevel'),
           labelField: 'LEVEL_NAME',
           valueField: 'ID',
@@ -268,14 +261,10 @@ export default {
             5: { label: '五市场', value: 5 }
           }
         }
-      },
-      filterModel: {
-        userId: ''
-      },
-      allFilterTypes: this.filterTypes,
-      filterType: '',
-      filterSymbol: '',
-      filterSymbols: {
+       }
+    },
+    filterSymbols() {
+      return {
         '=': this.$t('filter.eq'),
         'like': this.$t('filter.like'),
         '<>': this.$t('filter.noeq'),
@@ -284,12 +273,132 @@ export default {
         '>=': this.$t('filter.moreThanEq'),
         '<': this.$t('filter.less'),
         '<=': this.$t('filter.lessThan')
-      },
-      filterRelation: 'and',
-      filterRelations: {
+      }
+    },
+    filterRelations() {
+      return {
         'and': this.$t('filter.and'),
         'or': this.$t('filter.or')
+      }
+    },
+
+  },
+  data() {
+    return {
+      loading: false,
+      filterUserDialogShow: false,
+      tableData: [],
+      currentPage: 1,
+      totalPages: 1,
+      totalCount: 1,
+      pageSize: 20,
+      // filterCustomType: {
+      //   decLevel: {
+      //     placeholder: this.$t('filter.pleaseSelectDecLevel'),
+      //     labelField: 'LEVEL_NAME',
+      //     valueField: 'ID',
+      //     values: baseInfo.decLevels()
+      //   },
+      //   empLevel: {
+      //     placeholder: this.$t('filter.pleaseSelectEmpLevel'),
+      //     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: {
+      //   '=': this.$t('filter.eq'),
+      //   'like': this.$t('filter.like'),
+      //   '<>': this.$t('filter.noeq'),
+      //   'notLike': this.$t('filter.nolike'),
+      //   '>': this.$t('filter.moreThan'),
+      //   '>=': this.$t('filter.moreThanEq'),
+      //   '<': this.$t('filter.less'),
+      //   '<=': this.$t('filter.lessThan')
+      // },
+      filterRelation: 'and',
+      // filterRelations: {
+      //   'and': this.$t('filter.and'),
+      //   'or': this.$t('filter.or')
+      // },
       filterValue: '',
       filterName: '',
       filterSelected: [],

src/router/index.js

@@ -55,16 +55,21 @@ export const constantRoutes = [
     children: [
       {
         path: '/admin/role',
-        component: () => import('@/views/admin/role')
+        component: () => import('@/views/admin/role') // 管理员角色列表
       },
       {
         path: '/admin/role-add',
-        component: () => import('@/views/admin/role-add')
+        component: () => import('@/views/admin/role-add') // 添加角色
       },
       {
         path: '/admin/role-edit/:id',
         name: 'admin_role-edit',
-        component: () => import('@/views/admin/role-add')
+        component: () => import('@/views/admin/role-add') // 编辑角色
+      },
+      {
+        path: '/admin/role-permission/:id',
+        name: 'admin_role-permission',
+        component: () => import('@/views/admin/role-permission') // 角色权限
       }
     ]
   },

src/views/admin/role-add.vue

@@ -17,7 +17,6 @@
   </template>
   
   <script>
-  roleDetail
   import { roleDetail,addOREditRole } from '@/api/filter'
   export default {
     name: 'role-add',

src/views/admin/role-permission.vue

@@ -0,0 +1,133 @@
+<template>
+    <div v-loading="loading">
+      <div class="white-box admin-role-box">
+        <el-table :data="tableData" border style="width: 100%">
+          <el-table-column label="模块" width="180">
+            <template slot-scope="scope">
+              <el-checkbox :indeterminate="isIndeterminate[scope.row.id]" v-model="mainCheck[scope.row.id]"
+                           @change="handleCheckAllChange(scope.row.id, scope.row.childPermission)">
+                {{scope.row.mainPermission.name}}
+              </el-checkbox>
+            </template>
+          </el-table-column>
+          <el-table-column label="权限">
+            <template slot-scope="scope">
+              <el-checkbox-group v-model="checkedValue" class="checkgroup"
+                                 @change="handlePermissionChange(scope.row.id, scope.row.childPermission)">
+                <el-checkbox v-for="item in scope.row.childPermission" :label="item.path" :key="item.name">
+                  {{item.name}}
+                </el-checkbox>
+              </el-checkbox-group>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div style="margin-top: 20px">
+          <el-button type="primary" :loading="submitButtonStat" @click="onSubmit" style="float: right;">Submit<!-- 提交 --></el-button>
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+ 
+  import tool from '@/utils/tool'
+  import { getRolePermission,editRolePermission } from '@/api/filter'
+  
+  export default {
+    name: 'role-permission',
+    created () {
+  
+    },
+    data () {
+      return {
+        tableData: null,
+        checkedValue: [],
+        mainCheck: {},
+        isIndeterminate: {},
+        loading: true,
+        submitButtonStat: false,
+      }
+    },
+    mounted () {
+        getRolePermission(this.$route.params.id).then(response => {
+            this.tableData = response.data
+            this.checkedValue = []
+            for (let i of response.data) {
+            this.mainCheck[i] = false
+            for (let j of i.childPermission) {
+                if (j.isChecked) {
+                this.checkedValue.push(j.path)
+                }
+            }
+            this.initCheckValue(i.id, i.childPermission)
+            }
+            this.loading = false
+        }).catch(err => {
+          console.log('err---------' + err)
+        })
+    },
+    methods: {
+      handleCheckAllChange (id, child) {
+        //this.mainCheck[id] = !this.mainCheck[id];
+        if (this.mainCheck[id]) {
+          this.$set(this.isIndeterminate, id, false)
+          for (let i in child) {
+            tool.removeFromArr(this.checkedValue, child[i].path)
+            this.checkedValue.push(child[i].path)
+          }
+        } else {
+          this.$set(this.isIndeterminate, id, false)
+          for (let i in child) {
+            tool.removeFromArr(this.checkedValue, child[i].path)
+          }
+        }
+  
+      },
+      handlePermissionChange (id, child) {
+        this.initCheckValue(id, child)
+      },
+      onSubmit () {
+        this.submitButtonStat = true
+        editRolePermission(this.$route.params.id,  {
+          permission: this.checkedValue
+        }).then(response => {
+            this.submitButtonStat = false
+            this.$message({message: response.data, type: 'success'})
+        }).catch(err => {
+            this.submitButtonStat = false
+          console.log('err---------' + err)
+        })
+      },
+      initCheckValue (id, child) {
+        let flag = true
+        for (let i in child) {
+          if (this.checkedValue.find(item => child[i].path === item) === undefined) {
+            flag = false
+          }
+        }
+        if (flag) {
+          this.$set(this.isIndeterminate, id, false)
+          this.$set(this.mainCheck, id, true)
+        } else {
+          this.$set(this.isIndeterminate, id, true)
+          this.$set(this.mainCheck, id, false)
+          let mainFlag = false
+          for (let i in this.checkedValue) {
+            if (child.find(item => this.checkedValue[i] === item.path) !== undefined) {
+              mainFlag = true
+            }
+          }
+          if (!mainFlag) {
+            this.$set(this.isIndeterminate, id, false)
+            this.$set(this.mainCheck, id, false)
+          }
+        }
+      }
+    }
+  }
+  </script>
+  
+  <style scoped>
+  
+  </style>
+  

vue.config.js

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