From 87c914ffe57995f1a9844fa19cbd4fe19ca7b91a Mon Sep 17 00:00:00 2001
From: Surpriseplus <845948745@qq.com>
Date: 星期四, 29 九月 2022 18:47:21 +0800
Subject: [PATCH] 角色管理新增，删除，修改
---
src/views/userManage/roleManage.vue | 410 ++++++++++++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 366 insertions(+), 44 deletions(-)
diff --git a/src/views/userManage/roleManage.vue b/src/views/userManage/roleManage.vue
index 2cff3e6..7d0137e 100644
--- a/src/views/userManage/roleManage.vue
+++ b/src/views/userManage/roleManage.vue
@@ -16,29 +16,34 @@
:label="$t('userManage.RM.ownedSystem')"
prop="ownedSystem"
>
- <el-select v-model="roleForm.ownedSystem">
- <el-option :label="$t('userManage.RM.one')" value="one" />
- </el-select>
+ <el-input
+ v-model="roleForm.value"
+ :disabled="true"
+ :placeholder="$t('common.pleaseInput')"
+ />
+ <el-button style="margin-left: 20px" @click="showDepTree(1)">{{
+ $t('common.choose')
+ }}</el-button>
</el-form-item>
<br />
<el-form-item>
- <el-button
+ <el-button @click="InsertFormdialog = true"
><i class="el-icon-circle-plus-outline"></i> {{
- $t("userManage.RM.add")
+ $t('userManage.RM.add')
}}</el-button
>
</el-form-item>
<el-form-item>
<el-button
><i class="el-icon-search"></i> {{
- $t("userManage.RM.query")
+ $t('userManage.RM.query')
}}</el-button
>
</el-form-item>
<el-form-item>
<el-button @click="resetForm('ruleForm')"
><i class="el-icon-delete"></i> {{
- $t("userManage.RM.reset")
+ $t('userManage.RM.reset')
}}</el-button
>
</el-form-item>
@@ -52,100 +57,396 @@
:label="$t('userManage.RM.index')"
width="70px"
/>
+ <el-table-column align="center" prop="id" v-if="false" />
<el-table-column
align="center"
- prop="roleName"
+ prop="name"
:label="$t('userManage.RM.roleName')"
/>
<el-table-column
align="center"
- prop="ownedSystem"
+ prop="depid"
:label="$t('userManage.RM.ownedSystem')"
/>
<el-table-column
align="center"
- prop="Permission"
- :label="$t('userManage.RM.Permission')"
+ prop="descr"
+ :label="$t('userManage.RM.describe')"
+ />
+
+ <el-table-column
+ align="center"
+ prop="createUser"
+ :label="$t('userManage.RM.creationuser')"
/>
<el-table-column
align="center"
- prop="resourcePermission"
- :label="$t('userManage.RM.resourcePermission')"
+ prop="createTime"
+ :label="$t('userManage.RM.creationtime')"
/>
<el-table-column
align="center"
- prop="roleSetting"
- :label="$t('userManage.RM.groupSetting')"
+ prop="UpdateUser"
+ :label="$t('userManage.RM.updateonuser')"
+ />
+ <el-table-column
+ align="center"
+ prop="updateTime"
+ :label="$t('userManage.RM.updateontime')"
+ />
+ <el-table-column
+ align="center"
+ prop="bak"
+ :label="$t('userManage.RM.remarks')"
/>
<el-table-column
fixed="right"
:label="$t('common.operate')"
- width="300"
+ width="200"
>
- <template #default>
- <el-button type="warning" size="small">{{
- $t("common.update")
- }}</el-button>
- <el-button type="danger" size="small">{{
- $t("common.delete")
- }}</el-button>
+ <template slot-scope="scope">
+ <el-button
+ type="warning"
+ @click="handleEdit(scope.$index, scope.row)"
+ size="small"
+ >{{ $t('common.update') }}</el-button
+ >
+ <el-button
+ type="danger"
+ @click="handleDelete(scope.$index, scope.row)"
+ size="small"
+ >{{ $t('common.delete') }}</el-button
+ >
</template>
</el-table-column>
</el-table>
- <div style="margin-top: 40px" class="pagination_box">
+ <div style="margin-top: 25px" class="pagination_box">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
- :current-page="currentPage"
+ :current-page="listData.pageIndex"
:page-sizes="[10, 20, 30, 40]"
- :page-size="10"
+ :page-size="listData.pageSize"
layout="total, sizes, prev, pager, next, jumper"
- :total="0"
+ :total="count"
>
</el-pagination>
</div>
</div>
+ <el-dialog
+ :title="$t('userManage.RM.insertRole')"
+ top="15vh"
+ width="80vh"
+ style="overflow: hidden"
+ :visible.sync="InsertFormdialog"
+ >
+ <el-form :model="insertform">
+ <el-form-item
+ :label="$t('userManage.RM.roleName')"
+ :label-width="formLabelWidth"
+ >
+ <el-input v-model="insertform.name" autocomplete="off"></el-input>
+ </el-form-item>
+ <el-form-item
+ :label="$t('userManage.RM.ownedSystem')"
+ :label-width="formLabelWidth"
+ :prop="insertform.depValue"
+ :rules="[{ required: true, message: '涓嶈兘涓虹┖' }]"
+ >
+ <el-input
+ v-model="insertform.depValue"
+ :disabled="true"
+ :placeholder="$t('common.pleaseInput')"
+ />
+ <el-button style="margin-left: 20px" @click="showDepTree(2)">{{
+ $t('common.choose')
+ }}</el-button>
+ </el-form-item>
+ <el-form-item
+ :label="$t('userManage.RM.describe')"
+ :label-width="formLabelWidth"
+ >
+ <el-input v-model="insertform.descr" autocomplete="off"></el-input>
+ </el-form-item>
+ <el-form-item
+ :label="$t('userManage.RM.remarks')"
+ :label-width="formLabelWidth"
+ >
+ <el-input v-model="insertform.bak" autocomplete="off"></el-input>
+ </el-form-item>
+ </el-form>
+ <div slot="footer" class="dialog-footer">
+ <el-button @click="insertFromClose">{{ $t('common.close') }}</el-button>
+ <el-button type="primary" @click="insertFromData">{{
+ $t('common.confirm')
+ }}</el-button>
+ </div>
+ </el-dialog>
+ <el-dialog
+ :title="$t('userManage.RM.insertRole')"
+ top="15vh"
+ width="80vh"
+ style="overflow: hidden"
+ :visible.sync="UpdateFormdialog"
+ >
+ <el-form :model="updateform">
+ <el-form-item
+ :label="$t('userManage.RM.roleName')"
+ :label-width="formLabelWidth"
+ >
+ <el-input v-model="updateform.name" autocomplete="off"></el-input>
+ </el-form-item>
+
+ <el-form-item
+ :label="$t('userManage.RM.ownedSystem')"
+ :label-width="formLabelWidth"
+ :prop="updateform.depValue"
+ >
+ <el-input
+ v-model="updateform.depValue"
+ :disabled="true"
+ :placeholder="$t('common.pleaseInput')"
+ />
+ <el-button style="margin-left: 20px" @click="showDepTree(3)">{{
+ $t('common.choose')
+ }}</el-button>
+ </el-form-item>
+ <el-form-item
+ :label="$t('userManage.RM.describe')"
+ :label-width="formLabelWidth"
+ >
+ <el-input v-model="updateform.descr" autocomplete="off"></el-input>
+ </el-form-item>
+ <el-form-item
+ :label="$t('userManage.RM.remarks')"
+ :label-width="formLabelWidth"
+ >
+ <el-input v-model="updateform.bak" autocomplete="off"></el-input>
+ </el-form-item>
+ </el-form>
+ <div slot="footer" class="dialog-footer">
+ <el-button @click="updateFromClose">{{ $t('common.close') }}</el-button>
+ <el-button type="primary" @click="updateFromData">{{
+ $t('common.confirm')
+ }}</el-button>
+ </div>
+ </el-dialog>
+ <div class="leftTree" v-if="showCata">
+ <div class="treeBox">
+ <role-dep-tree></role-dep-tree>
+ </div>
+ <div class="btnBox">
+ <el-button type="primary" size="small" @click="selectCataName"
+ >纭畾</el-button
+ >
+ <el-button type="primary" size="small" @click="showCata = false"
+ >鍙栨秷</el-button
+ >
+ </div>
+ </div>
</div>
</template>
-
- <script>
-import MyBread from "../../components/MyBread.vue";
+<script>
+import MyBread from '../../components/MyBread.vue';
+import roleDepTree from './roleDepTree.vue';
+import {
+ select_Role_ByPageAndCount,
+ selectdepTab,
+ insertRole,
+ deleteRole,
+ selectDep,
+ updateRole,
+} from '../../api/api';
export default {
//import寮曞叆鐨勭粍浠堕渶瑕佹敞鍏ュ埌瀵硅薄涓墠鑳戒娇鐢�
components: {
MyBread,
+ roleDepTree,
},
-
data() {
return {
- currentPage: 1,
- roleForm: {
- groupName: "",
- ownedSystem: "",
- },
+ showCata: false,
+ formLabelWidth: '120px',
+ InsertFormdialog: false,
+ UpdateFormdialog: false,
+ roleForm: {},
+ cataName: '',
+ depValue: '',
+ elTreeFlag: 0,
+ path_id: '',
tableData: [],
+ insertform: {},
+ updateform: {},
+ count: 0,
+ selData: [],
+ listData: {
+ pageIndex: 1,
+ pageSize: 10,
+ },
};
},
methods: {
+ showDepTree(res) {
+ this.showCata = true;
+ this.elTreeFlag = res;
+ },
+ selectCataName() {
+ this.cataName = this.$store.state.catalogueName;
+ this.path_id = this.$store.state.cataNode.id;
+ var value;
+ if (this.cataName.indexOf('>') != -1) {
+ var data = this.$store.state.catalogueName.split('>');
+ value = data[data.length - 1];
+ } else {
+ value = this.$store.state.catalogueName;
+ }
+ this.$store.commit('changeCata', ''); //娓呯┖state鐨勯潰鍖呭睉
+ this.$store.commit('changeNode', ''); //娓呯┖state鐨勮妭鐐瑰璞�
+ this.showCata = false;
+ switch (this.elTreeFlag) {
+ case 1:
+ this.roleForm.value = value;
+
+ break;
+ case 2:
+ this.insertform.depid = this.path_id;
+ this.insertform.depValue = value;
+ break;
+ case 3:
+ this.updateform.depid = this.path_id;
+ this.updateform.depValue = value;
+ break;
+ }
+ },
+ async getRoleTabelData() {
+ if (this.listData.tab == '') {
+ delete this.listData.tab;
+ }
+ const data = await select_Role_ByPageAndCount(this.listData);
+ if (data.code != 200) {
+ this.$message.error('鍒楄〃璋冪敤澶辫触');
+ }
+ this.tableData = data.result;
+ this.count = data.count;
+ },
+ async getSelectDepTab() {
+ this.selectData = [];
+ const data = await selectdepTab();
+ if (data.code != 200) {
+ this.$message.error('涓嬫媺璋冪敤澶辫触');
+ }
+ data.result.forEach((e) => {
+ if (e) {
+ this.selData.push({
+ label: e.name,
+ value: e.id,
+ });
+ }
+ });
+ },
+ insertFromClose() {
+ this.InsertFormdialog = false;
+ this.insertform = {};
+ },
+ async insertFromData() {
+ if (this.insertform.depValue == null) {
+ this.$message({
+ message: '璇烽�夋嫨瑙掕壊鎵�灞炲崟浣�',
+ type: 'warning',
+ });
+ return;
+ }
+ const data = await insertRole(this.insertform);
+ if (data.code == 200) {
+ this.InsertFormdialog = false;
+ this.insertform = {};
+ this.$message({
+ message: '娣诲姞鎴愬姛锛�',
+ type: 'success',
+ });
+ this.getRoleTabelData();
+ } else {
+ this.$message({
+ message: '娣诲姞澶辫触锛�',
+ type: 'warning',
+ });
+ }
+ },
+ updateFromClose() {
+ this.UpdateFormdialog = false;
+ this.updateform = {};
+ },
+ async updateFromData() {
+ if (this.updateform.depValue == null) {
+ this.$message({
+ message: '璇烽�夋嫨瑙掕壊鎵�灞炲崟浣�',
+ type: 'warning',
+ });
+ return;
+ }
+ const data = await updateRole(this.updateform);
+ if (data.code == 200) {
+ this.UpdateFormdialog = false;
+ this.updateform = {};
+ this.$message({
+ message: '淇敼鎴愬姛锛�',
+ type: 'success',
+ });
+ this.getRoleTabelData();
+ } else {
+ this.$message({
+ message: '淇敼澶辫触锛�',
+ type: 'warning',
+ });
+ }
+ },
+ async handleDelete(index, row) {
+ const data = await deleteRole({ id: row.id.toString() });
+ if (data.code == 200) {
+ this.InsertFormdialog = false;
+ this.$message({
+ message: '鍒犻櫎鎴愬姛锛�',
+ type: 'success',
+ });
+ this.getRoleTabelData();
+ } else {
+ this.$message({
+ message: '鍒犻櫎澶辫触锛�',
+ type: 'warning',
+ });
+ }
+ },
handleSizeChange(val) {
- console.log(`姣忛〉 ${val} 鏉);
+ this.listData.pageSize = val;
+ this.getRoleTabelData();
},
handleCurrentChange(val) {
console.log(`褰撳墠椤�: ${val}`);
+ this.listData.pageIndex = val;
+ this.getRoleTabelData();
+ },
+ async handleEdit(index, row) {
+ this.updateform = row;
+ const data = await selectDep({ id: row.depid });
+ this.updateform.depValue = data.result.name;
+ this.UpdateFormdialog = true;
},
onSubmit() {
- console.log("submit!");
+ console.log('submit!');
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
},
- created() {},
+ created() {
+ this.getRoleTabelData();
+ this.getSelectDepTab();
+ },
};
</script>
- <style lang="less" scoped>
+<style lang="less" scoped>
//@import url(); 寮曞叆鍏叡css绫�
.logLog_box {
background: rgb(240, 242, 245);
@@ -156,21 +457,43 @@
.el-input {
width: 300px;
}
+ .leftTree {
+ position: absolute;
+ z-index: 9999;
+ top: 9%;
+ left: 37%;
+ width: 400px;
+ height: 600px;
+ background: #f0f2f5;
+ border: 1px solid #000;
+ .treeBox {
+ height: 550px;
+ overflow: auto;
+ /deep/ .el-tree-node__content:hover {
+ background-color: rgb(153, 153, 153);
+ }
+ }
+ .btnBox {
+ width: 123px;
+ margin: 10px auto 0;
+ // background-color: red;
+ }
+ }
.inquire {
- height: 110px;
+ height: 115px;
overflow: auto;
padding: 10px;
margin-top: 20px;
background: #fff;
border-radius: 5px;
border: 1px solid rgb(202, 201, 204);
- margin-bottom: 20px;
+ margin-bottom: 10px;
.el-form-item {
margin: 7px;
}
}
.table_box {
- height: 65%;
+ height: 70%;
padding: 10px;
background: #fff;
border-radius: 5px;
@@ -181,4 +504,3 @@
}
}
</style>
-
\ No newline at end of file
--
Gitblit v1.9.3