ZengTao
2023-09-05 7870c2d4fd6da5269a87f53d584a36628fd8ef12
CanadaMes-ui/src/views/role/index.vue
@@ -2,30 +2,30 @@
  <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('langHome')}}</el-breadcrumb-item>
      <el-breadcrumb-item>{{$t('langRoleManagement')}}</el-breadcrumb-item>
      <el-breadcrumb-item>{{$t('langRoleList')}}</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="getRoleList()">
            <el-button slot="append" icon="el-icon-search" @click="getRoleList()"></el-button>
          </el-input>
        </el-col>
  <el-input :placeholder="$t('langEnterRoleName')" v-model="queryInfo.name" clearable @clear="getRoleList()">
    <el-button slot="append" icon="el-icon-search" @click="getRoleList()"></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('langAddRole')}}</el-button>
        </el-col>
      </el-row>
      <!--角色列表区域-->
      <el-table :data="roleList.records" border stripe>
        <el-table-column label="#" type="index"></el-table-column>
        <el-table-column label="名称" prop="name"></el-table-column>
        <el-table-column label="创建时间" prop="createTime"></el-table-column>
        <el-table-column label="是否有效">
  <el-table-column :label="$t('langRoleName')" prop="name"></el-table-column>
  <el-table-column :label="$t('langCreateTime')" prop="createTime"></el-table-column>
  <el-table-column :label="$t('langIsValid')">
          <template slot-scope="scope">
            <el-switch :active-value=1
                       :inactive-value=0
@@ -34,19 +34,17 @@
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
        <el-table-column :label="$t('langOperation')">
          <template slot-scope="scope">
            <!--修改-->
            <el-tooltip effect="dark" content="修改" 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-button type="danger" icon="el-icon-delete" size="mini"
                         @click="removeById(scope.row)"></el-button>
            </el-tooltip>
          </template>
  <!-- 修改 -->
  <el-tooltip effect="dark" :content="$t('langEdit')" 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="$t('langDelete')" placement="top" :enterable="false">
    <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeById(scope.row)"></el-button>
  </el-tooltip>
</template>
        </el-table-column>
      </el-table>
      <!--分页区域-->
@@ -62,17 +60,17 @@
    </el-card>
    <!--添加角色的对话框-->
    <el-dialog
        title="添加角色"
        :title="$t('langAddRole')"
        :visible.sync="addDialogVisible"
        width="50%"
        @close="addDialogClosed">
      <!--内容主体区域-->
      <el-form :model="addRoleForm" :rules="addRoleRules" ref="addRoleRef" label-width="70px">
        <el-form-item label="名称" prop="name">
      <el-form :model="addRoleForm" :rules="addRoleRules" ref="addRoleRef" label-width="130px">
        <el-form-item :label="$t('langRoleName')" prop="name">
          <el-input v-model="addRoleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="state">
          <el-select v-model="addRoleForm.state" placeholder="请选择">
        <el-form-item :label="$t('langState')" prop="state">
          <el-select v-model="addRoleForm.state" placeholder="$t('langPleaseSelect')">
            <el-option v-for="(item,index) in options"
                       :key="index"
                       :value="item.value"
@@ -82,22 +80,22 @@
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="addDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addRole">确 定</el-button>
    <el-button @click="addDialogVisible = false">{{$t('langCancel')}}</el-button>
    <el-button type="primary" @click="addRole">{{$t('langConfirm')}}</el-button>
  </span>
    </el-dialog>
    <!--修改角色的对话框-->
    <el-dialog
        title="修改角色"
        :title="$t('langEditRole')"
        :visible.sync="editDialogVisible"
        width="50%">
      <!--内容主体区域-->
      <el-form :model="editRoleForm" :rules="addRoleRules" ref="addRoleRef" label-width="70px">
        <el-form-item label="名称" prop="name">
      <el-form :model="editRoleForm" :rules="addRoleRules" ref="addRoleRef" label-width="130px">
        <el-form-item :label="$t('langRoleName')" prop="name">
          <el-input v-model="editRoleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="state">
          <el-select v-model="editRoleForm.state" placeholder="请选择">
        <el-form-item :label="$t('langState')" prop="state">
          <el-select v-model="editRoleForm.state" placeholder="$t('langPleaseSelect')">
            <el-option v-for="(item,index) in options"
                       :key="index"
                       :value="item.value"
@@ -107,8 +105,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('langCancel')}}</el-button>
    <el-button type="primary" @click="editRoleInfo">{{$t('langConfirm')}}</el-button>
  </span>
    </el-dialog>
  </div>
@@ -116,9 +114,11 @@
<script>
import {getById, removeById, saveOrUpdate, selectPage} from "../../api/role";
import LanguageMixin from '../../lang/LanguageMixin'
export default {
  name: "Role",
  mixins: [LanguageMixin],
  data() {
    return {
      queryInfo: {
@@ -259,4 +259,4 @@
.app .el-card {
  width: 99%;
}
</style>
</style>