From c3204d686fbf8a64dd7fa4dcbb48c0a075df06e0 Mon Sep 17 00:00:00 2001
From: wuyouming666 <2265557248@qq.com>
Date: 星期二, 05 十二月 2023 08:06:19 +0800
Subject: [PATCH] 更新电气管理界面
---
CanadaMes-ui/src/views/role/index.vue | 226 ++++++++++++++++++++++++++++++++++++++++----------------
1 files changed, 161 insertions(+), 65 deletions(-)
diff --git a/CanadaMes-ui/src/views/role/index.vue b/CanadaMes-ui/src/views/role/index.vue
index 1ccc221..22d50ae 100644
--- a/CanadaMes-ui/src/views/role/index.vue
+++ b/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>
\ No newline at end of file
--
Gitblit v1.8.0