Merge branch 'master' of http://10.153.19.25:10101/r/CanadaMes

clll

2023-09-13 36de27dcf89a1a651c6498f3dc4c8fd872ca3f92

 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: {
@@ -199,100 +201,101 @@
    this.getPowerList();
  },
  methods: {
    getPowerList() {
      selectPage(this.queryInfo).then(res => {
        this.powerList.total = res.data.total;
        this.powerList.records = res.data.records;
  getPowerList() {
    selectPage(this.queryInfo).then(res => {
      this.powerList.total = res.data.total;
      this.powerList.records = res.data.records;
    });
  },
  // 监听pageSize改变的事件
  handleSizeChange(newSize) {
    this.queryInfo.pageSize = newSize;
    this.getPowerList()
  },
  // 监听pageNum改变的事件
  handleCurrentChange(newPage) {
    this.queryInfo.pageNum = newPage;
    this.getPowerList()
  },
  stateChange(info) {
    saveOrUpdate(info).then(() => {
      this.$message.success(this.$t('updateSuccessMessage'))
    });
  },
  // 监听添加权限对话框的关闭事件
  addDialogClosed() {
    this.$refs['powerRef'].resetFields();
  },
  // 点击按钮添加新权限
  addPower() {
    this.$refs.powerRef.validate(async valid => {
      if (!valid) return;
      // 发起添加权限的网络请求
      saveOrUpdate(this.addPowerForm).then(() => {
        // 重新获取权限列表
        this.getPowerList();
        // 隐藏添加权限对话框
        this.addDialogVisible = false;
        this.$message.success(this.$t('addSuccessMessage'));
      });
    },
    // 监听pageSize改变的事件
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize;
      this.getPowerList()
    },
    // 监听pageNum改变的事件
    handleCurrentChange(newPage) {
      this.queryInfo.pageNum = newPage;
      this.getPowerList()
    },
    stateChange(info) {
      saveOrUpdate(info).then(() => {
        this.$message.success("更新状态成功")
    })
  },
  // 展示修改权限的对话框
  showEditDialog(role) {
    getById({id: role.id}).then(res => {
      this.editRoleForm = res.data;
    });
    select(this.addPowerForm).then(res => {
      this.roleList = res.data;
    });
    selectPermission(this.addPowerForm).then(res => {
      this.permissionList = res.data;
    });
    this.editDialogVisible = true;
  },
  // 展示添加权限的对话框
  showAddDialog() {
    select(this.addPowerForm).then(res => {
      this.roleList = res.data;
    });
    selectPermission(this.addPowerForm).then(res => {
      this.permissionList = res.data;
    });
    this.addDialogVisible = true;
  },
  // 修改权限信息并提交
  editRoleInfo() {
    this.$refs.powerRef.validate(async valid => {
      if (!valid) return;
      // 发起修改权限的网络请求
      saveOrUpdate(this.editRoleForm).then(() => {
        // 重新获取权限列表
        this.getPowerList();
        // 隐藏添加权限对话框
        this.editDialogVisible = false;
        this.$message.success(this.$t('updateSuccessMessage'));
      });
    },
    // 监听添加权限对话框的关闭事件
    addDialogClosed() {
      this.$refs['powerRef'].resetFields();
    },
    // 点击按钮添加新权限
    addPower() {
      this.$refs.powerRef.validate(async valid => {
        if (!valid) return;
        // 发起添加权限的网络请求
        saveOrUpdate(this.addPowerForm).then(() => {
          // 重新获取权限列表
          this.getPowerList();
          // 隐藏添加权限对话框
          this.addDialogVisible = false;
          this.$message.success("添加权限成功");
        });
      })
    },
    // 展示修改权限的对话框
    showEditDialog(role) {
      getById({id: role.id}).then(res => {
        this.editRoleForm = res.data;
    })
  },
  // 根据id删除权限信息
  removeById(power) {
    // 弹框询问用户是否删除权限
    this.$confirm(this.$t('deleteConfirmMessage'), this.$t('prompt'), {
      confirmButtonText: this.$t('confirmButtonText'),
      cancelButtonText: this.$t('cancelButtonText'),
      type: 'warning'
    }).then(() => {
      // 删除权限
      removeById({id: power.id}).then(() => {
        // 重新获取权限列表
        this.getPowerList();
        this.$message.success(this.$t('deleteSuccessMessage'));
      });
      select(this.addPowerForm).then(res => {
        this.roleList = res.data;
      });
      selectPermission(this.addPowerForm).then(res => {
        this.permissionList = res.data;
      });
      this.editDialogVisible = true;
    },
    // 展示添加权限的对话框
    showAddDialog() {
      select(this.addPowerForm).then(res => {
        this.roleList = res.data;
      });
      selectPermission(this.addPowerForm).then(res => {
        this.permissionList = res.data;
      });
      this.addDialogVisible = true;
    },
    // 修改权限信息并提交
    editRoleInfo() {
      this.$refs.powerRef.validate(async valid => {
        if (!valid) return;
        // 发起修改权限的网络请求
        saveOrUpdate(this.editRoleForm).then(() => {
          // 重新获取权限列表
          this.getPowerList();
          // 隐藏添加权限对话框
          this.editDialogVisible = false;
          this.$message.success("修改权限成功");
        });
      })
    },
    // 根据id删除权限信息
    removeById(power) {
      // 弹框询问用户是否删除权限
      this.$confirm('此操作将永久删除该权限, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 删除权限
        removeById({id: power.id}).then(() => {
          // 重新获取权限列表
          this.getPowerList();
          this.$message.success("删除权限成功");
        });
      }).catch(() => {
        this.$message.info('已取消删除');
      })
    }
    }).catch(() => {
      this.$message.info(this.$t('deleteCancelledMessage'));
    })
  }

  }
}
</script>