clll
2023-10-27 254899911b6ca9b2e6085060902990cff8c84ef0
CanadaMes-ui/src/views/role/index.vue
@@ -39,6 +39,11 @@
  <!-- 修改 -->
  <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">
@@ -85,36 +90,58 @@
  </span>
    </el-dialog>
    <!--修改角色的对话框-->
    <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-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 LanguageMixin from '../../lang/LanguageMixin'
import {getById2} from "../../api/rolePermission";
import {saveOrUpdate2} from "../../api/rolePermission";
import LanguageMixin from '../../lang/LanguageMixin';
export default {
  name: "Role",
  mixins: [LanguageMixin],
@@ -133,13 +160,21 @@
      addDialogVisible: false,
      // 控制修改角色对话框的显示与隐藏
      editDialogVisible: false,
      // 添加的角色对象
      addRoleForm: {
        state: 1
      },
   
      // 修改的角色对象
      editRoleForm: {},
      editRoleForm: {
      },
      permissionList: [],
    permissionDialogVisible: false,
    selectedPermissions: [] ,// 添加selectedPermissions数组变量
      // 添加角色的验证规则
      addRoleRules: {
        name: [
@@ -179,7 +214,7 @@
    stateChange(info) {
      saveOrUpdate(info).then(() => {
        const 更新状态成功 = this.$t('更新状态成功');
        this.$message.success(更新状态成功)
        this.$message.success(更新状态成功);
      });
    },
@@ -206,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;