From 0f03522d5a541c26875c1279ba5b18ef59e933fe Mon Sep 17 00:00:00 2001
From: 王旭 <1377869194@qq.com>
Date: 星期四, 11 五月 2023 16:00:31 +0800
Subject: [PATCH] 树结构下拉框点击选中收回
---
src/views/userManage/roleManage.vue | 252 ++++++++++++++++++++-----------------------------
1 files changed, 104 insertions(+), 148 deletions(-)
diff --git a/src/views/userManage/roleManage.vue b/src/views/userManage/roleManage.vue
index 44d2da1..a4c5585 100644
--- a/src/views/userManage/roleManage.vue
+++ b/src/views/userManage/roleManage.vue
@@ -1,19 +1,14 @@
<template>
<div class="logLog_box">
- <My-bread :list="[
+ <My-bread
+ :list="[
`${$t('operatManage.operatManage')}`,
`${$t('userManage.roleManage')}`,
- ]"></My-bread>
+ ]"
+ ></My-bread>
<el-divider />
- <div
- class="inquire subpage_Div"
- ref="container"
- >
- <el-form
- ref="ruleForm"
- :model="roleForm"
- :inline="true"
- >
+ <div class="inquire subpage_Div" ref="container">
+ <el-form ref="ruleForm" :model="roleForm" :inline="true">
<div class="flex_box">
<div style="margin-right: auto">
<el-form-item
@@ -26,6 +21,7 @@
v-model="roleForm.depValue"
:placeholder="$t('userManage.RM.ownedSystemHolder')"
style="width: 200px"
+ ref="treeSelect"
>
<el-option
:value="roleForm.depid"
@@ -47,21 +43,14 @@
:placeholder="$t('common.pleaseInput')"
/> -->
</el-form-item>
- <el-form-item
- :label="$t('userManage.RM.roleName')"
- prop="username"
- >
+ <el-form-item :label="$t('userManage.RM.roleName')" prop="username">
<el-input
v-model="roleForm.username"
:placeholder="$t('userManage.RM.roleNameHolder')"
size="small"
style="width: 200px"
>
- <i
- slot="suffix"
- class="el-icon-search"
- @click="onSubmit"
- ></i>
+ <i slot="suffix" class="el-icon-search" @click="onSubmit"></i>
</el-input>
</el-form-item>
</div>
@@ -81,9 +70,10 @@
size="small"
@click="setInsertFormdialog"
v-if="menuStatus.insert"
- ><i class="el-icon-circle-plus-outline"></i> {{
+ ><i class="el-icon-circle-plus-outline"></i> {{
$t("userManage.RM.add")
- }}</el-button>
+ }}</el-button
+ >
</el-form-item>
<el-form-item>
<el-button
@@ -91,18 +81,17 @@
size="small"
@click="handleDelete()"
v-if="menuStatus.delete"
- ><i class="el-icon-delete"></i> {{
+ ><i class="el-icon-delete"></i> {{
$t("common.delete")
- }}</el-button>
+ }}</el-button
+ >
</el-form-item>
<el-form-item>
- <el-button
- type="info"
- size="small"
- @click="resetForm('ruleForm')"
- ><i class="el-icon-delete"></i> {{
+ <el-button type="info" size="small" @click="resetForm('ruleForm')"
+ ><i class="el-icon-delete"></i> {{
$t("userManage.RM.reset")
- }}</el-button>
+ }}</el-button
+ >
</el-form-item>
</div>
</div>
@@ -155,10 +144,7 @@
</el-form>
</div>
<div class="dividing-line"></div>
- <div
- class="table_box subpage_Div"
- :style="styleVar"
- >
+ <div class="table_box subpage_Div" :style="styleVar">
<el-table
:data="tableData"
style="width: 100%"
@@ -166,21 +152,14 @@
height="calc(100% - 45px)"
@selection-change="handleSelectionChange"
>
- <el-table-column
- type="selection"
- width="55"
- />
+ <el-table-column type="selection" width="55" />
<el-table-column
align="center"
type="index"
:label="$t('userManage.RM.index')"
width="70px"
/>
- <el-table-column
- align="center"
- prop="id"
- v-if="false"
- />
+ <el-table-column align="center" prop="id" v-if="false" />
<el-table-column
align="center"
prop="name"
@@ -247,22 +226,20 @@
@click="showDetail(scope.$index, scope.row)"
size="small"
plain
- >{{ $t("common.see") }}</el-button>
+ >{{ $t("common.see") }}</el-button
+ >
<el-button
v-if="menuStatus.update"
type="warning"
@click="handleEdit(scope.$index, scope.row)"
size="small"
plain
- >{{ $t("common.update") }}</el-button>
-
+ >{{ $t("common.update") }}</el-button
+ >
</template>
</el-table-column>
</el-table>
- <div
- style="margin-top: 10px"
- class="pagination_box"
- >
+ <div style="margin-top: 10px" class="pagination_box">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
@@ -283,19 +260,19 @@
:visible.sync="InsertFormdialog"
>
<div style="height: 500px; overflow: auto">
- <el-form
- :model="insertform"
- label-position="top"
- >
+ <el-form :model="insertform" label-position="top">
<el-form-item
:label="$t('userManage.RM.roleName')"
:label-width="formLabelWidth"
>
<el-input
- style="width:85%"
+ style="width: 85%"
v-model="insertform.name"
autocomplete="off"
- :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuetwo')+$t('userManage.RM.roleName')"
+ :placeholder="
+ $t('shuJuGuanLi.shuJuJianSuo.valuetwo') +
+ $t('userManage.RM.roleName')
+ "
></el-input>
</el-form-item>
<el-form-item
@@ -307,9 +284,11 @@
<el-select
:popper-append-to-body="false"
v-model="insertform.depValue"
- :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuetree')+$t('userManage.RM.ownedSystem')"
- style="width:85%"
-
+ :placeholder="
+ $t('shuJuGuanLi.shuJuJianSuo.valuetree') +
+ $t('userManage.RM.ownedSystem')
+ "
+ style="width: 85%"
>
<el-option
:value="insertform.depid"
@@ -342,10 +321,13 @@
:label-width="formLabelWidth"
>
<el-input
- style="width:85%"
+ style="width: 85%"
v-model="insertform.descr"
autocomplete="off"
- :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuetwo')+$t('userManage.RM.describe')"
+ :placeholder="
+ $t('shuJuGuanLi.shuJuJianSuo.valuetwo') +
+ $t('userManage.RM.describe')
+ "
></el-input>
</el-form-item>
<el-form-item
@@ -361,9 +343,12 @@
label="0"
>鍚�</el-radio> -->
<el-select
- style="width:85%"
+ style="width: 85%"
v-model="insertform.isAdmin"
- :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuetree')+$t('userManage.RM.isAdmin')"
+ :placeholder="
+ $t('shuJuGuanLi.shuJuJianSuo.valuetree') +
+ $t('userManage.RM.isAdmin')
+ "
>
<el-option
v-for="item in options"
@@ -378,29 +363,22 @@
:label-width="formLabelWidth"
>
<el-input
- style="width:85%"
+ style="width: 85%"
v-model="insertform.bak"
autocomplete="off"
- :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuetwo')+$t('userManage.RM.remarks')"
+ :placeholder="
+ $t('shuJuGuanLi.shuJuJianSuo.valuetwo') +
+ $t('userManage.RM.remarks')
+ "
></el-input>
</el-form-item>
</el-form>
</div>
- <div
- slot="footer"
- class="dialog-footer"
- >
- <el-button
- size="small"
- @click="insertFromClose"
- >{{
+ <div slot="footer" class="dialog-footer">
+ <el-button size="small" @click="insertFromClose">{{
$t("common.close")
}}</el-button>
- <el-button
- type="primary"
- size="small"
- @click="insertFromData"
- >{{
+ <el-button type="primary" size="small" @click="insertFromData">{{
$t("common.confirm")
}}</el-button>
</div>
@@ -411,10 +389,7 @@
:before-close="handleCloseEdit"
>
<div style="height: 500px; overflow: auto">
- <el-form
- :model="updateform"
- label-position="top"
- >
+ <el-form :model="updateform" label-position="top">
<el-form-item
:label="$t('userManage.RM.roleName')"
:label-width="formLabelWidth"
@@ -422,7 +397,7 @@
<el-input
v-model="updateform.name"
autocomplete="off"
- style="width:85%"
+ style="width: 85%"
></el-input>
</el-form-item>
@@ -435,7 +410,7 @@
:popper-append-to-body="false"
v-model="updateform.depValue"
placeholder="璇烽�夋嫨"
- style="width:85%"
+ style="width: 85%"
>
<el-option
:value="updateform.depid"
@@ -476,10 +451,7 @@
v-model="updateform.isAdmin"
label="0"
>鍚�</el-radio> -->
- <el-select
- style="width:85%"
- v-model="updateform.isAdmin"
- >
+ <el-select style="width: 85%" v-model="updateform.isAdmin">
<el-option
v-for="item in options"
:key="item.value"
@@ -495,7 +467,7 @@
<el-input
v-model="updateform.descr"
autocomplete="off"
- style="width:85%"
+ style="width: 85%"
></el-input>
</el-form-item>
<el-form-item
@@ -505,64 +477,38 @@
<el-input
v-model="updateform.bak"
autocomplete="off"
- style="width:85%"
+ style="width: 85%"
></el-input>
</el-form-item>
</el-form>
</div>
- <div
- slot="footer"
- class="dialog-footer"
- >
- <el-button
- size="small"
- @click="updateFromClose"
- >{{
+ <div slot="footer" class="dialog-footer">
+ <el-button size="small" @click="updateFromClose">{{
$t("common.close")
}}</el-button>
- <el-button
- type="primary"
- size="small"
- @click="updateFromData"
- >{{
+ <el-button type="primary" size="small" @click="updateFromData">{{
$t("common.confirm")
}}</el-button>
</div>
</el-dialog>
- <div
- class="leftTree subpage_Div box_div"
- v-if="showCata"
- >
+ <div class="leftTree subpage_Div box_div" 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="info"
- size="small"
- @click="showCata = false"
- >鍙栨秷</el-button>
+ <el-button type="primary" size="small" @click="selectCataName"
+ >纭畾</el-button
+ >
+ <el-button type="info" size="small" @click="showCata = false"
+ >鍙栨秷</el-button
+ >
</div>
</div>
- <div
- class="infoBox_box"
- v-show="showinfoBox"
- >
+ <div class="infoBox_box" v-show="showinfoBox">
<div class="infoBox box_div subpage_Div">
- <div
- slot="header"
- class="clearfix"
- >
+ <div slot="header" class="clearfix">
<span>{{ $t("dataManage.styleObj.deInformation") }}</span>
- <div
- style="float: right; cursor: pointer"
- @click="closeDetial"
- >
+ <div style="float: right; cursor: pointer" @click="closeDetial">
<i class="el-icon-close"></i>
</div>
</div>
@@ -690,20 +636,30 @@
styleVar: {
height: "calc(100% - 109px)",
},
- options: [{
- value: 0,
- label: '鏅�氱敤鎴�'
- }, {
- value: 1,
- label: '瓒呯骇绠＄悊鍛�'
- }, {
- value: 2,
- label: '鏁版嵁绠＄悊鍛�'
- }, {
- value: 3,
- label: '棰嗗'
- }]
+ options: [
+ {
+ value: 0,
+ label: "鏅�氱敤鎴�",
+ },
+ {
+ value: 1,
+ label: "瓒呯骇绠＄悊鍛�",
+ },
+ {
+ value: 2,
+ label: "鏁版嵁绠＄悊鍛�",
+ },
+ {
+ value: 3,
+ label: "棰嗗",
+ },
+ ],
};
+ },
+ watch: {
+ "roleForm.depValue"() {
+ this.$refs.treeSelect.visible = false;
+ },
},
methods: {
onResize() {
@@ -852,7 +808,7 @@
this.InsertFormdialog = false;
this.insertform = {};
})
- .catch((_) => { });
+ .catch((_) => {});
},
async insertFromData() {
if (this.insertform.depValue == null) {
@@ -885,7 +841,7 @@
this.updateform = {};
this.getRoleTabelData();
})
- .catch((_) => { });
+ .catch((_) => {});
},
async updateFromData() {
if (this.updateform.depValue == null) {
@@ -990,17 +946,17 @@
handleClose() {
this.$confirm("鍏抽棴鍚庢棤娉曚繚瀛橈紝鏄惁鍏抽棴?")
.then((_) => {
- this.InsertFormdialog = false
+ this.InsertFormdialog = false;
})
- .catch((_) => { });
+ .catch((_) => {});
},
handleCloseEdit() {
this.$confirm("鍏抽棴鍚庢棤娉曚繚瀛橈紝鏄惁鍏抽棴?")
.then((_) => {
- this.UpdateFormdialog = false
+ this.UpdateFormdialog = false;
this.getRoleTabelData();
})
- .catch((_) => { });
+ .catch((_) => {});
},
},
beforeDestroy() {
--
Gitblit v1.9.3