更新电气管理界面

wuyouming666

2023-12-05 c3204d686fbf8a64dd7fa4dcbb48c0a075df06e0

 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,22 @@
            </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('permission update')" placement="top" :enterable="false">
    
    <el-button type="primary"  size="mini" @click="showPermissionDialog(scope.row)">{{$t('permission update')}}</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 +65,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,43 +85,67 @@
        </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="修改角色"
        :visible.sync="editDialogVisible"
        width="50%">
      <!--内容主体区域-->
      <el-form :model="editRoleForm" :rules="addRoleRules" ref="addRoleRef" label-width="70px">
        <el-form-item label="名称" 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-option v-for="(item,index) in options"
                       :key="index"
                       :value="item.value"
                       :label="item.label">
            </el-option>
          </el-select>
        </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-dialog :title="$t('langEditRole')" :visible.sync="editDialogVisible" width="50%">
  <!-- 内容主体区域 -->
  <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="$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" :label="item.label"></el-option>
      </el-select>
    </el-form-item>
    
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="editDialogVisible = false">{{$t('langCancel')}}</el-button>
    <el-button type="primary" @click="editRoleInfo">{{$t('langConfirm')}}</el-button>
  </span>
    </el-dialog>
</el-dialog>


<el-dialog :title="$t('langEditPermissions')" :visible.sync="permissionDialogVisible">
  <el-form label-width="130px">
    <el-form-item :label="$t('langPermissions')" prop="permissionList">
      <el-checkbox-group v-model="selectedPermissions">
        <el-checkbox
          v-for="(permission, index) in permissionList"
          :key="index"
          :label="permission.name"
          :checked="permission.state === 1"
          @change="updatePermissionState(permission.name, $event)"
        >{{ permission.name }}</el-checkbox>
      </el-checkbox-group>
    </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="cancelEditPermissions">{{$t('langCancel')}}</el-button>
    <el-button type="primary" @click="savePermissions">{{$t('langConfirm')}}</el-button>
  </span>
</el-dialog>




  </div>
</template>

<script>
import {getById, removeById, saveOrUpdate, selectPage} from "../../api/role";
import {getById2} from "../../api/rolePermission";
import {saveOrUpdate2} from "../../api/rolePermission";

import LanguageMixin from '../../lang/LanguageMixin';
export default {
  name: "Role",
  mixins: [LanguageMixin],

  data() {
    return {
      queryInfo: {
@@ -133,16 +160,25 @@
      addDialogVisible: false,
      // 控制修改角色对话框的显示与隐藏
      editDialogVisible: false,
     
      // 添加的角色对象
      addRoleForm: {
        state: 1
      },
   
      // 修改的角色对象
      editRoleForm: {},
      editRoleForm: {
        
      },
     
      permissionList: [],
    permissionDialogVisible: false,
    selectedPermissions: [] ,// 添加selectedPermissions数组变量

      // 添加角色的验证规则
      addRoleRules: {
        name: [
          {required: true, message: '请输入名称', trigger: 'blur'},
          {required: true, message:  '请输入名称', trigger: 'blur'},
          {min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur'}
        ],
        state: [
@@ -177,7 +213,8 @@
    },
    stateChange(info) {
      saveOrUpdate(info).then(() => {
        this.$message.success("更新状态成功")
        const 更新状态成功 = this.$t('更新状态成功');
        this.$message.success(更新状态成功);

      });
    },
@@ -195,7 +232,8 @@
          this.getRoleList();
          // 隐藏添加角色对话框
          this.addDialogVisible = false;
          this.$message.success("添加角色成功");
          const 添加角色成功 = this.$t('添加角色成功');
          this.$message.success(添加角色成功);
        });
      })
    },
@@ -203,9 +241,60 @@
    showEditDialog(role) {
      getById({id: role.id}).then(res => {
        this.editRoleForm = res.data;
        this.editDialogVisible = true;
     
  
       
      });

     
      this.editDialogVisible = true;
    },


    showPermissionDialog(role) {
      this.selectedPermissions=[];
      this.permissionList=[];
    
      getById2({ roleId: role.id }).then((res) => {
        this.permissionList = res.data.permissionList;
      

        this.selectedPermissions = this.permissionList.map(({ name, state }) => ({
          name,
          state: state === 1,
        }));
        console.log(this.selectedPermissions);
        this.permissionDialogVisible = true;
      });
    },
// 取消编辑权限弹出框
cancelEditPermissions() {
  this.permissionDialogVisible = false;
},
// 保存权限修改
updatePermissionState(name, isChecked) {
    const permission = this.permissionList.find(p => p.name === name);
    if (permission) {
      permission.state = isChecked ? 1 : 0;
    }
  },

  

  savePermissions() {
  const permissions = this.permissionList.map(({ roleId, name, state, permission_id }) => ({
    roleId,
    name,
    state,
    permission_id
  }));
  
  saveOrUpdate2({ permissions }).then(() => {
    // 成功更新权限后执行的操作
    const 更新状态成功 = this.$t('更新状态成功');
        this.$message.success(更新状态成功);
  });
},
    // 展示添加角色的对话框
    showAddDialog() {
      this.addDialogVisible = true;
@@ -220,26 +309,33 @@
          this.getRoleList();
          // 隐藏添加角色对话框
          this.editDialogVisible = false;
          this.$message.success("修改角色成功");
          const 修改角色成功 = this.$t('修改角色成功');
          this.$message.success(修改角色成功);
        });
      })
    },
    // 根据id删除角色信息
    removeById(role) {
      // 弹框询问用户是否删除角色
      this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      const 此操作将永久删除该角色是否继续 = this.$t('此操作将永久删除该角色, 是否继续?');
      const 提示 = this.$t('提示');
      const 确定 = this.$t('确定');
      const 取消 = this.$t('取消');
      this.$confirm(此操作将永久删除该角色是否继续, 提示, {
        confirmButtonText: 确定,
        cancelButtonText: 取消,
        type: 'warning'
      }).then(() => {
        // 删除角色
        removeById({id: role.id}).then(() => {
          // 重新获取角色列表
          this.getRoleList();
          this.$message.success("删除角色成功");
          const 删除角色成功 = this.$t('删除角色成功');
          this.$message.success(删除角色成功);
        });
      }).catch(() => {
        this.$message('已取消删除');
        const 已取消删除 = this.$t('已取消删除');
        this.$message(已取消删除);
      });
    }
  }
@@ -259,4 +355,4 @@
.app .el-card {
  width: 99%;
}
</style>
</style>