CanadaMes-ui/src/views/power/index.vue
@@ -2,32 +2,32 @@
  <div class="app">
    <!--面包屑导航区域-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/home' }">{{$t('breadcrumb.home')}}</el-breadcrumb-item>
      <el-breadcrumb-item>{{$t('breadcrumb.permissionManagement')}}</el-breadcrumb-item>
      <el-breadcrumb-item>{{$t('breadcrumb.permissionList')}}</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片视图区域-->
    <el-card class="el-card">
      <el-row :gutter="20">
        <!--搜索与添加区域-->
        <el-col :span="6">
          <el-input placeholder="请输入权限名称" v-model="queryInfo.name" clearable @clear="getPowerList()">
          <el-input :placeholder="$t('search.placeholder')" v-model="queryInfo.name" clearable @clear="getPowerList()">
            <el-button slot="append" icon="el-icon-search" @click="getPowerList()"></el-button>
          </el-input>
        </el-col>
        <!--添加区域-->
        <el-col :span="4">
          <el-button type="primary" @click="showAddDialog">添加权限</el-button>
          <el-button type="primary" @click="showAddDialog">{{$t('button.addPermission')}}</el-button>
        </el-col>
      </el-row>
      <!--权限列表区域-->
      <el-table :data="powerList.records" border stripe>
        <el-table-column label="#" type="index"></el-table-column>
        <el-table-column label="角色" prop="role.name"></el-table-column>
        <el-table-column label="权限描述" prop="permission.description"></el-table-column>
        <el-table-column label="权限值" prop="permission.name"></el-table-column>
        <el-table-column label="创建时间" prop="createTime"></el-table-column>
        <el-table-column label="是否生效">
        <el-table-column :label="$t('table.role')" prop="role.name"></el-table-column>
        <el-table-column :label="$t('table.permissionDescription')" prop="permission.description"></el-table-column>
        <el-table-column :label="$t('table.permissionValue')" prop="permission.name"></el-table-column>
        <el-table-column :label="$t('table.createTime')" prop="createTime"></el-table-column>
        <el-table-column :label="$t('table.isActive')">
          <template slot-scope="scope">
            <el-switch :active-value=1
                       :inactive-value=0
@@ -36,15 +36,15 @@
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
        <el-table-column :label="$t('table.operation')">
          <template slot-scope="scope">
            <!--修改-->
            <el-tooltip effect="dark" content="修改" placement="top" :enterable="false">
            <el-tooltip effect="dark" :content="$t('tooltip.edit')" placement="top" :enterable="false">
              <el-button type="primary" icon="el-icon-edit" size="mini"
                         @click="showEditDialog(scope.row)"></el-button>
            </el-tooltip>
            <!--删除-->
            <el-tooltip effect="dark" content="删除" placement="top" :enterable="false">
            <el-tooltip effect="dark" :content="$t('tooltip.delete')" placement="top" :enterable="false">
              <el-button type="danger" icon="el-icon-delete" size="mini"
                         @click="removeById(scope.row)"></el-button>
            </el-tooltip>
@@ -64,14 +64,14 @@
    </el-card>
    <!--添加权限的对话框-->
    <el-dialog
        title="添加权限"
        :title="$t('dialog.addPermission')"
        :visible.sync="addDialogVisible"
        width="50%"
        @close="addDialogClosed">
      <!--内容主体区域-->
      <el-form :model="addPowerForm" :rules="powerRules" ref="powerRef" label-width="70px">
        <el-form-item label="角色" prop="roleId">
          <el-select filterable v-model="addPowerForm.roleId" placeholder="请选择">
        <el-form-item :label="$t('form.role')" prop="roleId">
          <el-select filterable v-model="addPowerForm.roleId" :placeholder="$t('form.select')">
            <el-option v-for="item in roleList"
                       :key="item.id"
                       :value="item.id"
@@ -79,8 +79,8 @@
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="权限" prop="permissionId">
          <el-select filterable v-model="addPowerForm.permissionId" placeholder="请选择">
        <el-form-item :label="$t('form.permission')" prop="permissionId">
          <el-select filterable v-model="addPowerForm.permissionId" :placeholder="$t('form.select')">
            <el-option v-for="item in permissionList"
                       :key="item.id"
                       :value="item.id"
@@ -88,8 +88,8 @@
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否生效" prop="state">
          <el-select v-model="addPowerForm.state" placeholder="请选择">
        <el-form-item :label="$t('form.isActive')" prop="state">
          <el-select v-model="addPowerForm.state" :placeholder="$t('form.select')">
            <el-option v-for="(item,index) in options"
                       :key="index"
                       :value="item.value"
@@ -99,19 +99,19 @@
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="addDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addPower">确 定</el-button>
    <el-button @click="addDialogVisible = false">{{$t('button.cancel')}}</el-button>
    <el-button type="primary" @click="addPower">{{$t('button.confirm')}}</el-button>
  </span>
    </el-dialog>
    <!--修改权限的对话框-->
    <el-dialog
        title="修改权限"
        :title="$t('dialog.editPermission')"
        :visible.sync="editDialogVisible"
        width="50%">
      <!--内容主体区域-->
      <el-form :model="editRoleForm" :rules="powerRules" ref="powerRef" label-width="70px">
        <el-form-item label="角色" prop="roleId">
          <el-select filterable v-model="editRoleForm.roleId" placeholder="请选择">
        <el-form-item :label="$t('form.role')" prop="roleId">
          <el-select filterable v-model="editRoleForm.roleId" :placeholder="$t('form.select')">
            <el-option v-for="item in roleList"
                       :key="item.id"
                       :value="item.id"
@@ -119,8 +119,8 @@
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item filterable label="权限" prop="permissionId">
          <el-select v-model="editRoleForm.permissionId" placeholder="请选择">
        <el-form-item filterable :label="$t('form.permission')" prop="permissionId">
          <el-select v-model="editRoleForm.permissionId" :placeholder="$t('form.select')">
            <el-option v-for="item in permissionList"
                       :key="item.id"
                       :value="item.id"
@@ -128,8 +128,8 @@
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否生效" prop="state">
          <el-select v-model="editRoleForm.state" placeholder="请选择">
        <el-form-item :label="$t('form.isActive')" prop="state">
          <el-select v-model="editRoleForm.state" :placeholder="$t('form.select')">
            <el-option v-for="(item,index) in options"
                       :key="index"
                       :value="item.value"
@@ -139,8 +139,8 @@
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="editDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="editRoleInfo">确 定</el-button>
    <el-button @click="editDialogVisible = false">{{$t('button.cancel')}}</el-button>
    <el-button type="primary" @click="editRoleInfo">{{$t('button.confirm')}}</el-button>
  </span>
    </el-dialog>
  </div>
@@ -150,9 +150,11 @@
import {getById, removeById, saveOrUpdate, selectPage} from "../../api/rolePermission";
import {select} from "../../api/role";
import {selectPermission} from "../../api/permission";
import LanguageMixin from '../../lang/LanguageMixin'
export default {
  name: "Power",
  mixins: [LanguageMixin],
  data() {
    return {
      queryInfo: {