From 0f03522d5a541c26875c1279ba5b18ef59e933fe Mon Sep 17 00:00:00 2001 From: 王旭 <1377869194@qq.com> Date: 星期四, 11 五月 2023 16:00:31 +0800 Subject: [PATCH] 树结构下拉框点击选中收回 --- src/views/maintenance/userManagement.vue | 645 +++++++++++++++++++++++++++++----------------------------- 1 files changed, 321 insertions(+), 324 deletions(-) diff --git a/src/views/maintenance/userManagement.vue b/src/views/maintenance/userManagement.vue index 53c2824..e202451 100644 --- a/src/views/maintenance/userManagement.vue +++ b/src/views/maintenance/userManagement.vue @@ -1,20 +1,15 @@ <template> <div class="userInfo_box"> - <My-bread :list="[ + <My-bread + :list="[ `${$t('operatManage.operatManage')}`, `${$t('userManage.userManage')}`, - ]"></My-bread> + ]" + ></My-bread> <el-divider /> - <div - class="inquire subpage_Div" - ref="container" - > - <el-form - ref="queryForm" - :model="queryForm" - :inline="true" - > + <div class="inquire subpage_Div" ref="container"> + <el-form ref="queryForm" :model="queryForm" :inline="true"> <div class="flex_box"> <div style="margin-right: auto"> <el-form-item @@ -27,6 +22,7 @@ size="small" placeholder="璇烽�夋嫨" style="width: 200px" + ref="treeSelect" > <el-option :value="queryForm.depid" @@ -44,37 +40,37 @@ </el-select> </el-form-item> <el-form-item - prop="uname" - :label="$t('userManage.userInfoObj.uname')" + prop="uname" + :label="$t('userManage.userInfoObj.uname')" > <el-input - v-model="queryForm.uname" - size="small" - :placeholder="$t('userManage.userInfoObj.unamePlaceholder')" - style="width: 200px" + v-model="queryForm.uname" + size="small" + :placeholder="$t('userManage.userInfoObj.unamePlaceholder')" + style="width: 200px" > <i slot="suffix" class="el-icon-search" @click="queryInfo"></i> </el-input> </el-form-item> </div> <div> -<!-- <el-form-item>--> -<!-- <el-button--> -<!-- type="primary"--> -<!-- size="small"--> -<!-- @click="queryInfo('queryForm')"--> -<!-- icon="el-icon-search"--> -<!-- >--> -<!-- {{ $t("operatManage.ELM.search") }}--> -<!-- </el-button>--> -<!-- </el-form-item>--> + <!-- <el-form-item>--> + <!-- <el-button--> + <!-- type="primary"--> + <!-- size="small"--> + <!-- @click="queryInfo('queryForm')"--> + <!-- icon="el-icon-search"--> + <!-- >--> + <!-- {{ $t("operatManage.ELM.search") }}--> + <!-- </el-button>--> + <!-- </el-form-item>--> <el-form-item> <el-button - v-if="menuStatus.insert" - type="success" - size="small" - @click="showAddDialog" - icon="el-icon-plus" + v-if="menuStatus.insert" + type="success" + size="small" + @click="showAddDialog" + icon="el-icon-plus" > {{ $t("common.append") }} </el-button> @@ -86,7 +82,7 @@ @click="editPwd" type="warning" icon="el-icon-unlock" - >{{ $t("common.changepassWord") }} + >{{ $t("common.changepassWord") }} </el-button> </el-form-item> <el-form-item> @@ -102,10 +98,10 @@ </el-form-item> <el-form-item> <el-button - type="info" - size="small" - @click="resetInfo('queryForm')" - icon="el-icon-refresh" + type="info" + size="small" + @click="resetInfo('queryForm')" + icon="el-icon-refresh" > {{ $t("operatManage.ELM.reset") }} </el-button> @@ -115,10 +111,7 @@ </el-form> </div> <div class="dividing-line"></div> - <div - class="table_box" - :style="styleVar" - > + <div class="table_box" :style="styleVar"> <el-table ref="filterTable" :data="tableData" @@ -128,10 +121,7 @@ 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" @@ -212,23 +202,11 @@ :label="$t('userManage.userInfoObj.status')" > <template slot-scope="scope"> - <el-tag - v-if="scope.row.status == 0" - type="success" - >姝e父</el-tag> - <el-tag - v-if="scope.row.status == 1" - type="info" - >绂佺敤</el-tag> - <el-tag - v-if="scope.row.status == 2" - type="warning" - >鍒犻櫎</el-tag> + <el-tag v-if="scope.row.status == 0" type="success">姝e父</el-tag> + <el-tag v-if="scope.row.status == 1" type="info">绂佺敤</el-tag> + <el-tag v-if="scope.row.status == 2" type="warning">鍒犻櫎</el-tag> <el-tag v-if="scope.row.status == 3">鐢宠</el-tag> - <el-tag - v-if="scope.row.status == 4" - type="danger" - >鎷掓壒</el-tag> + <el-tag v-if="scope.row.status == 4" type="danger">鎷掓壒</el-tag> </template> </el-table-column> <!-- <el-table-column @@ -248,14 +226,12 @@ plain @click="editInfo(scope.row)" size="small" - >{{ $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" @@ -280,47 +256,45 @@ :before-close="handleClose" :close-on-click-modal="false" > - <div style="height: 500px; overflow: auto"> - <el-form - :model="editForm" - ref="editForm" - :rules="rules" - style="display: flex" - - > - <div> - <el-form-item - prop="uid" - :label="$t('userManage.userInfoObj.uid')" - v-if="behavior == '鏂板鐢ㄦ埛'" - :label-width="formLabelWidth" - > - <el-input - v-model="editForm.uid" - autocomplete="off" - :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuetwo')+$t('userManage.userInfoObj.uid')" - ></el-input> - <div - class="isNewUser" - v-if="isNewUser" + <div style="height: 500px; overflow: auto"> + <el-form + :model="editForm" + ref="editForm" + :rules="rules" + style="display: flex" + > + <div> + <el-form-item + prop="uid" + :label="$t('userManage.userInfoObj.uid')" + v-if="behavior == '鏂板鐢ㄦ埛'" + :label-width="formLabelWidth" > - <img src="../../assets/img/success.png" /> - {{ $t("userManage.userInfoObj.uid") }} - </div> - </el-form-item> - <el-form-item - v-if="behavior == '淇敼淇℃伅'" - :label="$t('userManage.userInfoObj.uid')" - :label-width="formLabelWidth" - > - <el-input - v-model="editForm.uid" - autocomplete="off" - disabled - - ></el-input> - </el-form-item> - <!-- <el-form-item + <el-input + v-model="editForm.uid" + autocomplete="off" + :placeholder=" + $t('shuJuGuanLi.shuJuJianSuo.valuetwo') + + $t('userManage.userInfoObj.uid') + " + ></el-input> + <div class="isNewUser" v-if="isNewUser"> + <img src="../../assets/img/success.png" /> + {{ $t("userManage.userInfoObj.uid") }} + </div> + </el-form-item> + <el-form-item + v-if="behavior == '淇敼淇℃伅'" + :label="$t('userManage.userInfoObj.uid')" + :label-width="formLabelWidth" + > + <el-input + v-model="editForm.uid" + autocomplete="off" + disabled + ></el-input> + </el-form-item> + <!-- <el-form-item v-if="behavior == '淇敼淇℃伅'" prop="oldPwd" :label="$t('userManage.userInfoObj.origpassword')" @@ -333,7 +307,7 @@ show-password ></el-input> </el-form-item> --> - <!-- <el-form-item + <!-- <el-form-item prop="pwd" v-if="behavior == '鏂板鐢ㄦ埛'" :label="$t('userManage.userInfoObj.pwd')" @@ -346,7 +320,7 @@ show-password ></el-input> </el-form-item> --> - <!-- <el-form-item + <!-- <el-form-item prop="checkPass" v-if="behavior == '鏂板鐢ㄦ埛'" :label="$t('userManage.userInfoObj.confirmPassword')" @@ -359,76 +333,87 @@ autocomplete="off" ></el-input> </el-form-item> --> - <el-form-item - prop="uname" - :label="$t('userManage.userInfoObj.username')" - :label-width="formLabelWidth" - > - <el-input - v-model="editForm.uname" - autocomplete="off" - :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuetwo')+$t('userManage.userInfoObj.username')" - ></el-input> - </el-form-item> - <el-form-item - prop="sex" - :label="$t('userManage.userInfoObj.sex')" - :label-width="formLabelWidth" - > - <el-select - :popper-append-to-body="false" - v-model="editForm.sex" - clearable - :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuetree')+$t('userManage.userInfoObj.sex')" + <el-form-item + prop="uname" + :label="$t('userManage.userInfoObj.username')" + :label-width="formLabelWidth" > - <el-option - v-for="item in sexOpt" - :key="item.value" - :label="item.label" - :value="item.value" - > - </el-option> - </el-select> - </el-form-item> - <el-form-item - prop="natives" - :label="$t('userManage.userInfoObj.nativePlace')" - :label-width="formLabelWidth" - > - <el-input - v-model="editForm.natives" - autocomplete="off" - :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuetwo')+$t('userManage.userInfoObj.nativePlace')" - ></el-input> - </el-form-item> - <el-form-item - prop="depid" - :label-width="formLabelWidth" - :label="$t('userManage.userInfoObj.depName')" - > - <el-select - :popper-append-to-body="false" - v-model="editForm.depid" - :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuetree')+$t('userManage.userInfoObj.depName')" - @focus="setOptionWidth" - + <el-input + v-model="editForm.uname" + autocomplete="off" + :placeholder=" + $t('shuJuGuanLi.shuJuJianSuo.valuetwo') + + $t('userManage.userInfoObj.username') + " + ></el-input> + </el-form-item> + <el-form-item + prop="sex" + :label="$t('userManage.userInfoObj.sex')" + :label-width="formLabelWidth" > - <el-option - :value="editForm.depid" - :label="editForm.depName" - :style="{ width: selectOptionWidth, height: selectheight }" + <el-select + :popper-append-to-body="false" + v-model="editForm.sex" + clearable + :placeholder=" + $t('shuJuGuanLi.shuJuJianSuo.valuetree') + + $t('userManage.userInfoObj.sex') + " > - <el-tree - ref="editcaderHandle" - :data="treeOptions" - :default-expand-all="defaultexpand" - node-key="id" - :props="defaultProps" - @node-click="handeditChange" - /> - </el-option> - </el-select> - <!-- <el-cascader + <el-option + v-for="item in sexOpt" + :key="item.value" + :label="item.label" + :value="item.value" + > + </el-option> + </el-select> + </el-form-item> + <el-form-item + prop="natives" + :label="$t('userManage.userInfoObj.nativePlace')" + :label-width="formLabelWidth" + > + <el-input + v-model="editForm.natives" + autocomplete="off" + :placeholder=" + $t('shuJuGuanLi.shuJuJianSuo.valuetwo') + + $t('userManage.userInfoObj.nativePlace') + " + ></el-input> + </el-form-item> + <el-form-item + prop="depid" + :label-width="formLabelWidth" + :label="$t('userManage.userInfoObj.depName')" + > + <el-select + :popper-append-to-body="false" + v-model="editForm.depid" + :placeholder=" + $t('shuJuGuanLi.shuJuJianSuo.valuetree') + + $t('userManage.userInfoObj.depName') + " + @focus="setOptionWidth" + > + <el-option + :value="editForm.depid" + :label="editForm.depName" + :style="{ width: selectOptionWidth, height: selectheight }" + > + <el-tree + ref="editcaderHandle" + :data="treeOptions" + :default-expand-all="defaultexpand" + node-key="id" + :props="defaultProps" + @node-click="handeditChange" + /> + </el-option> + </el-select> + <!-- <el-cascader v-model="editForm.depid" :options="treeOptions" filterable @@ -445,119 +430,135 @@ }" > </el-cascader> --> - </el-form-item> - <el-form-item - prop="idcard" - :label="$t('userManage.userInfoObj.identityCard')" - :label-width="formLabelWidth" - > - <el-input - v-model="editForm.idcard" - autocomplete="off" - :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuetwo')+$t('userManage.userInfoObj.identityCard')" - ></el-input> - </el-form-item> - </div> - <div style="width: 45%"> - <el-form-item - prop="job" - :label="$t('userManage.userInfoObj.job')" - :label-width="formLabelWidth" - > - <el-input - v-model="editForm.job" - autocomplete="off" - :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuetwo')+$t('userManage.userInfoObj.job')" - ></el-input> - </el-form-item> - <el-form-item - prop="edu" - :label="$t('userManage.userInfoObj.edu')" - :label-width="formLabelWidth" - > - <el-input - v-model="editForm.edu" - autocomplete="off" - :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuetwo')+$t('userManage.userInfoObj.edu')" - ></el-input> - </el-form-item> - <el-form-item - prop="addr" - :label="$t('userManage.userInfoObj.addr')" - :label-width="formLabelWidth" - > - <el-input - v-model="editForm.addr" - autocomplete="off" - :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuetwo')+$t('userManage.userInfoObj.addr')" - ></el-input> - </el-form-item> - <el-form-item - prop="email" - :label="$t('userManage.userInfoObj.email')" - :label-width="formLabelWidth" - > - <el-input - v-model="editForm.email" - autocomplete="off" - :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuetwo')+$t('userManage.userInfoObj.email')" - ></el-input> - </el-form-item> - <el-form-item - prop="contact" - :label="$t('userManage.userInfoObj.contact')" - :label-width="formLabelWidth" - > - <el-input - v-model="editForm.contact" - autocomplete="off" - :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuetwo')+$t('userManage.userInfoObj.contact')" - ></el-input> - </el-form-item> - <el-form-item - prop="status" - :label="$t('userManage.userInfoObj.status')" - :label-width="formLabelWidth" - > - <el-select - :popper-append-to-body="false" - v-model="editForm.status" - clearable - :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuetree')+$t('userManage.userInfoObj.status')" + </el-form-item> + <el-form-item + prop="idcard" + :label="$t('userManage.userInfoObj.identityCard')" + :label-width="formLabelWidth" > - <el-option - v-for="item in statusOpt" - :key="item.value" - :label="item.label" - :value="item.value" + <el-input + v-model="editForm.idcard" + autocomplete="off" + :placeholder=" + $t('shuJuGuanLi.shuJuJianSuo.valuetwo') + + $t('userManage.userInfoObj.identityCard') + " + ></el-input> + </el-form-item> + </div> + <div style="width: 45%"> + <el-form-item + prop="job" + :label="$t('userManage.userInfoObj.job')" + :label-width="formLabelWidth" + > + <el-input + v-model="editForm.job" + autocomplete="off" + :placeholder=" + $t('shuJuGuanLi.shuJuJianSuo.valuetwo') + + $t('userManage.userInfoObj.job') + " + ></el-input> + </el-form-item> + <el-form-item + prop="edu" + :label="$t('userManage.userInfoObj.edu')" + :label-width="formLabelWidth" + > + <el-input + v-model="editForm.edu" + autocomplete="off" + :placeholder=" + $t('shuJuGuanLi.shuJuJianSuo.valuetwo') + + $t('userManage.userInfoObj.edu') + " + ></el-input> + </el-form-item> + <el-form-item + prop="addr" + :label="$t('userManage.userInfoObj.addr')" + :label-width="formLabelWidth" + > + <el-input + v-model="editForm.addr" + autocomplete="off" + :placeholder=" + $t('shuJuGuanLi.shuJuJianSuo.valuetwo') + + $t('userManage.userInfoObj.addr') + " + ></el-input> + </el-form-item> + <el-form-item + prop="email" + :label="$t('userManage.userInfoObj.email')" + :label-width="formLabelWidth" + > + <el-input + v-model="editForm.email" + autocomplete="off" + :placeholder=" + $t('shuJuGuanLi.shuJuJianSuo.valuetwo') + + $t('userManage.userInfoObj.email') + " + ></el-input> + </el-form-item> + <el-form-item + prop="contact" + :label="$t('userManage.userInfoObj.contact')" + :label-width="formLabelWidth" + > + <el-input + v-model="editForm.contact" + autocomplete="off" + :placeholder=" + $t('shuJuGuanLi.shuJuJianSuo.valuetwo') + + $t('userManage.userInfoObj.contact') + " + ></el-input> + </el-form-item> + <el-form-item + prop="status" + :label="$t('userManage.userInfoObj.status')" + :label-width="formLabelWidth" + > + <el-select + :popper-append-to-body="false" + v-model="editForm.status" + clearable + :placeholder=" + $t('shuJuGuanLi.shuJuJianSuo.valuetree') + + $t('userManage.userInfoObj.status') + " > - </el-option> - </el-select> - </el-form-item> - <el-form-item - prop="bak" - :label="$t('userManage.userInfoObj.remarks')" - :label-width="formLabelWidth" - > - <el-input - v-model="editForm.bak" - autocomplete="off" - :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuetwo')+$t('userManage.userInfoObj.remarks')" - ></el-input> - </el-form-item> - </div> - </el-form> - </div> - <div - v-if="behavior == '淇敼淇℃伅'" - slot="footer" - class="dialog-footer" - > - <el-button - size="small" - type="info" - @click="cancelEdit()" - >{{ + <el-option + v-for="item in statusOpt" + :key="item.value" + :label="item.label" + :value="item.value" + > + </el-option> + </el-select> + </el-form-item> + <el-form-item + prop="bak" + :label="$t('userManage.userInfoObj.remarks')" + :label-width="formLabelWidth" + > + <el-input + v-model="editForm.bak" + autocomplete="off" + :placeholder=" + $t('shuJuGuanLi.shuJuJianSuo.valuetwo') + + $t('userManage.userInfoObj.remarks') + " + ></el-input> + </el-form-item> + </div> + </el-form> + </div> + <div v-if="behavior == '淇敼淇℃伅'" slot="footer" class="dialog-footer"> + <el-button size="small" type="info" @click="cancelEdit()">{{ $t("common.reset") }}</el-button> <el-button @@ -565,18 +566,11 @@ type="primary" @click="sendEdit('editForm')" v-loading.fullscreen.lock="fullscreenLoading" - >{{ $t("common.submit") }}</el-button> + >{{ $t("common.submit") }}</el-button + > </div> - <div - v-else - slot="footer" - class="dialog-footer" - > - <el-button - size="small" - type="info" - @click="cancelAdd('editForm')" - >{{ + <div v-else slot="footer" class="dialog-footer"> + <el-button size="small" type="info" @click="cancelAdd('editForm')">{{ $t("common.reset") }}</el-button> <el-button @@ -584,7 +578,8 @@ type="primary" @click="sendAdd('editForm')" v-loading.fullscreen.lock="fullscreenLoading" - >{{ $t("common.submit") }}</el-button> + >{{ $t("common.submit") }}</el-button + > </div> </el-dialog> <el-dialog @@ -593,7 +588,6 @@ :before-close="handleClose" :close-on-click-modal="false" > - <el-form :model="pwdForm" ref="pwdForm" @@ -610,8 +604,11 @@ v-model="pwdForm.adminPwd" autocomplete="off" show-password - style="width:85%" - :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuetwo')+$t('common.AdminPassword')" + style="width: 85%" + :placeholder=" + $t('shuJuGuanLi.shuJuJianSuo.valuetwo') + + $t('common.AdminPassword') + " ></el-input> </el-form-item> <el-form-item @@ -624,8 +621,10 @@ v-model="pwdForm.newPwd" autocomplete="off" show-password - style="width:85%" - :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuetwo')+$t('common.NPassword')" + style="width: 85%" + :placeholder=" + $t('shuJuGuanLi.shuJuJianSuo.valuetwo') + $t('common.NPassword') + " ></el-input> </el-form-item> <el-form-item @@ -638,21 +637,16 @@ v-model="pwdForm.checkPwd" autocomplete="off" show-password - style="width:85%" - :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuetwo')+$t('common.SPassword')" + style="width: 85%" + :placeholder=" + $t('shuJuGuanLi.shuJuJianSuo.valuetwo') + $t('common.SPassword') + " ></el-input> </el-form-item> </el-form> - <div - slot="footer" - class="dialog-footer" - > - <el-button - size="small" - type="info" - @click="cancelReset - 'pwdForm'" - >{{ + <div slot="footer" class="dialog-footer"> + <el-button size="small" type="info" @click="cancelReset - 'pwdForm'">{{ $t("common.reset") }}</el-button> <el-button @@ -660,7 +654,8 @@ type="primary" @click="sendReset('pwdForm')" v-loading.fullscreen.lock="fullscreenLoading" - >{{ $t("common.submit") }}</el-button> + >{{ $t("common.submit") }}</el-button + > </div> </el-dialog> </div> @@ -920,9 +915,14 @@ tableHeight: 0, timer: 0, styleVar: { - "height": "calc(100% - 109px)", + height: "calc(100% - 109px)", }, }; + }, + watch: { + "queryForm.depName"() { + this.$refs.treeSelect.visible = false; + }, }, beforeDestroy() { this.timer && clearTimeout(this.timer); @@ -961,7 +961,7 @@ }); } }) - .catch((res) => { }); + .catch((res) => {}); queryPageUser({ pageIndex: 1, @@ -978,7 +978,7 @@ }); } }) - .catch((res) => { }); + .catch((res) => {}); }, treeData(source) { let cloneData = JSON.parse(JSON.stringify(source)); // 瀵规簮鏁版嵁娣卞害鍏嬮殕 @@ -1116,8 +1116,6 @@ }, //閲嶇疆瀵嗙爜 editPwd() { - - var std = []; for (var i in this.multipleSelection) { std.push(this.multipleSelection[i].id); @@ -1163,8 +1161,7 @@ this.resetPwd = false; this.getUserInfo(); - } - else { + } else { this.$message({ message: res.msg, type: "error", @@ -1241,7 +1238,7 @@ done(); }) - .catch((_) => { }); + .catch((_) => {}); }, //鎻愪氦缂栬緫 sendEdit(formName) { @@ -1334,7 +1331,7 @@ this.getUserInfo(); this.getpublickey(); window.addEventListener("resize", this.onResize); - this.calHeight() + this.calHeight(); }, created() { var val = this.$store.state.currentPerms; -- Gitblit v1.9.3