From 0b737708e696c45720499759b5c31aced87fdbb6 Mon Sep 17 00:00:00 2001 From: zhangzengfei <zhangzengfei@iotlink.com> Date: 星期三, 07 七月 2021 14:10:03 +0800 Subject: [PATCH] merge master --- src/pages/shuohuangMonitorAnalyze/components/memberManage.vue | 411 +++++++++++++++++++++++++++++++++++----------------------- 1 files changed, 248 insertions(+), 163 deletions(-) diff --git a/src/pages/shuohuangMonitorAnalyze/components/memberManage.vue b/src/pages/shuohuangMonitorAnalyze/components/memberManage.vue index f254def..4ec3624 100644 --- a/src/pages/shuohuangMonitorAnalyze/components/memberManage.vue +++ b/src/pages/shuohuangMonitorAnalyze/components/memberManage.vue @@ -1,10 +1,10 @@ <template> <div class="member-manage"> <div class="left"> - <div style="margin-bottom:10px;"> - <el-input placeholder="璇疯緭鍏�" v-model="treeWord" size="small"> + <div style="margin-bottom: 10px"> + <!-- <el-input placeholder="璇疯緭鍏�" v-model="treeWord" size="small"> <el-button slot="append" icon="el-icon-search"></el-button> - </el-input> + </el-input> --> </div> <el-tree ref="leftTreeNodes" @@ -17,7 +17,11 @@ @node-click="checkNode" @node-contextmenu="nodeContextMenu" ></el-tree> - <div class="menuList" v-show="showMenu" :style="{top:menuTop+'px',left:menuLeft+'px'}"> + <div + class="menuList" + v-show="showMenu" + :style="{ top: menuTop + 'px', left: menuLeft + 'px' }" + > <ul> <li>鍒涘缓鍚岀骇鑺傜偣</li> <li>鍒犻櫎鑺傜偣</li> @@ -28,28 +32,48 @@ </div> <div class="right"> <div class="filter-bar"> - <el-input class="keyword-input" placeholder="濮撳悕/缁勭粐鏈烘瀯/鎵嬫満鍙�" v-model="keyword" size="small"></el-input> - <el-select v-model="gender" size="small" placeholder="鎬у埆" style="margin: 0 10px;"> + <el-input + class="keyword-input" + placeholder="濮撳悕/缁勭粐鏈烘瀯/鎵嬫満鍙�" + v-model="keyword" + size="small" + ></el-input> + <el-select + v-model="gender" + size="small" + placeholder="鎬у埆" + style="margin: 0 10px" + > <el-option v-for="item in genders" :key="item.id" - :value="item.name=='鍏ㄩ儴'?'':item.name" + :value="item.name == '鍏ㄩ儴' ? '' : item.name" :label="item.name" - >{{item.name}}</el-option> + >{{ item.name }}</el-option + > </el-select> - <el-button type="primary" size="small" @click="renderMemberTable">鏌ヨ</el-button> - <el-button type="primary" size="small" @click="resetFilter">閲嶇疆</el-button> + <el-button type="primary" size="small" @click="renderMemberTable" + >鏌ヨ</el-button + > + <el-button type="primary" size="small" @click="resetFilter" + >閲嶇疆</el-button + > </div> <div class="table-area"> <div class="actions"> - <el-button type="primary" size="small" @click="addMember">娣诲姞浜哄憳</el-button> + <el-button type="primary" size="small" @click="addMember" + >娣诲姞浜哄憳</el-button + > <el-button type="primary" - :disabled="multipleTableSelection.length<1" + :disabled="multipleTableSelection.length < 1" size="small" @click="toggleOrganize" - >鎹㈢粍缁�</el-button> - <el-button type="primary" size="small" @click="batchImport">鎵归噺瀵煎叆</el-button> + >鎹㈢粍缁�</el-button + > + <el-button type="primary" size="small" @click="batchImport" + >鎵归噺瀵煎叆</el-button + > <!-- <el-button type="primary" size="small" @click="uploadPic">涓婁紶鐓х墖</el-button> --> </div> <el-table @@ -62,7 +86,7 @@ <el-table-column type="selection" width="55"></el-table-column> <el-table-column label="濮撳悕" prop="Name" sortable> <template slot-scope="scope"> - <div style="cursor:pointer;">{{scope.row.Name}}</div> + <div style="cursor: pointer">{{ scope.row.Name }}</div> </template> </el-table-column> <el-table-column label="鐓х墖" prop="Surface"> @@ -79,14 +103,20 @@ <el-table-column label="鐢ㄦ埛鏉冮檺" prop="userpermission"> <template slot-scope="scope"> <div> - <el-switch v-model="scope.row.UserPermissions" @change="memberUpdate(scope.row)"></el-switch> + <el-switch + v-model="scope.row.UserPermissions" + @change="memberUpdate(scope.row)" + ></el-switch> </div> </template> </el-table-column> <el-table-column label="杞偍鏉冮檺" prop="transferpermission"> <template slot-scope="scope"> <div> - <el-switch v-model="scope.row.DumpPermissions" @change="memberUpdate(scope.row)"></el-switch> + <el-switch + v-model="scope.row.DumpPermissions" + @change="memberUpdate(scope.row)" + ></el-switch> </div> </template> </el-table-column> @@ -114,16 +144,22 @@ :visible="memberEditDialogVisible" class="member-edit-dialog" :append-to-body="false" - @close="memberEditDialogVisible=false" + @close="memberEditDialogVisible = false" > <div slot="title"> <div class="title"> - <div class="main-title">{{memberEditForm.ID?'缂栬緫浜哄憳':'娣诲姞浜哄憳'}}</div> - <div class="subtitle">缁勭粐缁撴瀯:{{curLeftTreeNode.label}}</div> + <div class="main-title"> + {{ memberEditForm.ID ? "缂栬緫浜哄憳" : "娣诲姞浜哄憳" }} + </div> + <div class="subtitle">缁勭粐缁撴瀯:{{ curLeftTreeNode.label }}</div> </div> </div> <div class="text-center"> - <el-form :model="memberEditForm" :rules="memberEditFormRule" ref="memberForm"> + <el-form + :model="memberEditForm" + :rules="memberEditFormRule" + ref="memberForm" + > <el-form-item> <el-upload class="avatar-uploader" @@ -133,7 +169,7 @@ > <img v-if="memberEditForm.Surface" - :src="`/httpImage/`+memberEditForm.Surface" + :src="`/httpImage/` + memberEditForm.Surface" class="avatar" /> <i v-else class="el-icon-plus avatar-uploader-icon"></i> @@ -162,8 +198,12 @@ <el-input v-model="memberEditForm.Tel" size="mini"></el-input> </el-form-item> <div class="btns"> - <el-button size="small" @click="memberEditDialogVisible=false">鍙栨秷</el-button> - <el-button size="small" type="primary" @click="memberSave">淇濆瓨</el-button> + <el-button size="small" @click="memberEditDialogVisible = false" + >鍙栨秷</el-button + > + <el-button size="small" type="primary" @click="memberSave" + >淇濆瓨</el-button + > </div> </el-form> </div> @@ -173,11 +213,15 @@ class="toggle-organize-dialog" :append-to-body="false" title="绉诲姩浜哄憳鍒板叾浠栫粍缁�" - @close="toggleOrganizeDialogVisible=false" + @close="toggleOrganizeDialogVisible = false" > <div class="text-left"> <el-input v-model="organizeKeyword" size="small"> - <el-button slot="append" icon="el-icon-search" @clcik="getOrganizeTreeData"></el-button> + <el-button + slot="append" + icon="el-icon-search" + @clcik="getOrganizeTreeData" + ></el-button> </el-input> <div>榛樿缁勭粐</div> <el-tree @@ -190,8 +234,12 @@ :highlight-current="true" ></el-tree> <div slot="footer" class="btns"> - <el-button size="small" @click="toggleOrganizeDialogVisible=false">鍙栨秷</el-button> - <el-button size="small" type="primary" @click="updateOrg">纭畾</el-button> + <el-button size="small" @click="toggleOrganizeDialogVisible = false" + >鍙栨秷</el-button + > + <el-button size="small" type="primary" @click="updateOrg" + >纭畾</el-button + > </div> </div> </el-dialog> @@ -200,7 +248,7 @@ class="batch-import-dialog" :append-to-body="false" title="鎵归噺瀵煎叆" - @close="batchImportDialogVisible=false" + @close="batchImportDialogVisible = false" > <div> <p class="tip"> @@ -208,16 +256,30 @@ ( <a href="javascript:;" - @mouseover="showDemo=true" - @mouseout="showDemo=false" - >绀轰緥</a>),鐐瑰嚮 + @mouseover="showDemo = true" + @mouseout="showDemo = false" + >绀轰緥</a + >),鐐瑰嚮 <a href="javascript:;" @click="downloadExcel">涓嬭浇妯℃澘.excel</a> - <img class="tip-demo" v-if="showDemo" :src="`${publicPath}images/shuohuang/tip.jpg`" alt /> + <img + class="tip-demo" + v-if="showDemo" + :src="`${publicPath}images/shuohuang/tip.jpg`" + alt + /> </p> <div class="flex-box"> <label>涓婁紶鏂囦欢澶�:</label> - <el-button size="mini" type="primary" @click="uploadDirectoryTrigger">鐐瑰嚮涓婁紶</el-button> - <input ref="directoryInput" @change="importDirectory" hidden type="file" webkitdirectory /> + <el-button size="mini" type="primary" @click="uploadDirectoryTrigger" + >鐐瑰嚮涓婁紶</el-button + > + <input + ref="directoryInput" + @change="importDirectory" + hidden + type="file" + webkitdirectory + /> </div> <el-table class="thbg" :data="batchImportTableData" fit> <el-table-column type="index" label="搴忓彿"></el-table-column> @@ -231,23 +293,37 @@ </template> <script> - -import { getShuohuangDepartTree, getOrganizeTree, getMemberList, updateMemberInfo, addMember, updateUnit, uploadMemberPic, uploadDirectory, uploadFile,downloadFile } from '@/api/shuohuang' +import { + getShuohuangDepartTree, + getOrganizeTree, + getMemberList, + updateMemberInfo, + addMember, + updateUnit, + uploadMemberPic, + uploadDirectory, + uploadFile, + downloadFile, +} from "@/api/shuohuang"; export default { - data () { + data() { return { publicPath: process.env.BASE_URL, - CLIP: 'http://192.168.20.113/', - treeWord: '', + CLIP: "http://192.168.20.113/", + treeWord: "", treeData: [], curLeftTreeNode: {}, showMenu: false, - deptId: '', + deptId: "", menuTop: 0, menuLeft: 0, - keyword: '', - gender: '', - genders: [{id:'g3',name:'鍏ㄩ儴'},{ name: '鐢�', id: 'g0' }, { name: '濂�', id: 'g1' }], + keyword: "", + gender: "", + genders: [ + { id: "g3", name: "鍏ㄩ儴" }, + { name: "鐢�", id: "g0" }, + { name: "濂�", id: "g1" }, + ], tableData: [], multipleTableSelection: [], PageIndex: 1, @@ -255,46 +331,47 @@ tableTotal: 0, PageSize: 8, organizeData: [], - checkedOrgID: '', - checkedOrgName:"", - organizeKeyword: '', + checkedOrgID: "", + checkedOrgName: "", + organizeKeyword: "", memberEditDialogVisible: false, toggleOrganizeDialogVisible: false, batchImportDialogVisible: false, fileList: [], memberEditForm: {}, memberEditFormRule: { - Name: [{ required: true, message: '璇疯緭鍏ュ鍚�', trigger: 'change' }], - UserName: [{ required: true, message: '璇疯緭鍏ュ鍚�', trigger: 'change' }], - Sex: [{ required: true, message: '璇烽�夋嫨鎬у埆', trigger: 'change' }], - Tel: [{ validator: this.isPhone, trigger: 'change' }], + Name: [{ required: true, message: "璇疯緭鍏ュ鍚�", trigger: "change" }], + UserName: [ + { required: true, message: "璇疯緭鍏ュ鍚�", trigger: "change" }, + ], + Sex: [{ required: true, message: "璇烽�夋嫨鎬у埆", trigger: "change" }], + Tel: [{ validator: this.isPhone, trigger: "change" }], }, - memberPicUrl: '', + memberPicUrl: "", showDemo: false, batchImportTableData: [], - } + }; }, - mounted () { + mounted() { this.searchLeftTreeData(); this.getOrganizeTreeData(); //this.renderMemberTable(); - }, methods: { - resetFilter(){ - this.keyword = ''; - this.gender = ''; + resetFilter() { + this.keyword = ""; + this.gender = ""; this.renderMemberTable(); }, - isPhone (rule, value, callback) { + isPhone(rule, value, callback) { if (!value) { - return callback() + return callback(); } else if (value.trim()) { - var pattern = /^1[345789]\d{9}$/ + var pattern = /^1[345789]\d{9}$/; if (pattern.test(value)) { - return callback() + return callback(); } - return callback(new Error('杈撳叆鐨勬墜鏈哄彿閿欒')) + return callback(new Error("杈撳叆鐨勬墜鏈哄彿閿欒")); } // if (value.trim()) { // var pattern = /^1[345789]\d{9}$/ @@ -304,186 +381,194 @@ // return callback(new Error('杈撳叆鐨勬墜鏈哄彿閿欒')) // } }, - nodeContextMenu (e, data, node, comp) { + nodeContextMenu(e, data, node, comp) { this.showMenu = true; this.menuTop = e.pageY; this.menuLeft = e.pageX; }, - checkOrgNode (a, b, c) { - this.checkedOrgID = a.id - this.checkedOrgName = a.label + checkOrgNode(a, b, c) { + this.checkedOrgID = a.id; + this.checkedOrgName = a.label; }, - downloadExcel(){ + downloadExcel() { downloadFile().then(function (res) { - // debugger - console.log(res); - }) + let blobUrl = window.URL.createObjectURL( + new Blob([res], { + type: "application/vnd.ms-excel", + }) + ); + const a = document.createElement("a"); + a.style.display = "none"; + a.download = "鎵归噺瀵煎叆妯℃澘.xlsx"; + a.href = blobUrl; + a.click(); + document.body.removeChild(a) + }); }, - updateOrg () { - let ids = this.multipleTableSelection.map(row => { - return row.ID + updateOrg() { + let ids = this.multipleTableSelection.map((row) => { + return row.ID; }); let params = { DeptID: this.checkedOrgID, - DeptName:this.checkedOrgName, - Users: ids.join(',') - } - updateUnit(params).then(res => { + DeptName: this.checkedOrgName, + Users: ids.join(","), + }; + updateUnit(params).then((res) => { if (res.success) { this.$notify({ - type: 'success', - message: res.msg + type: "success", + message: res.msg, }); this.toggleOrganizeDialogVisible = false; this.renderMemberTable(); - this.searchLeftTreeData() + this.searchLeftTreeData(); } - }) - + }); }, - tableSelection (val) { + tableSelection(val) { this.multipleTableSelection = val; }, - memberSave () { - this.$refs['memberForm'].validate((valid) => { + memberSave() { + this.$refs["memberForm"].validate((valid) => { if (valid) { - let params = Object.assign({ DeptID: this.curLeftTreeNode.id }, this.memberEditForm); + debugger; + let params = Object.assign( + { DeptID: this.curLeftTreeNode.id }, + this.memberEditForm + ); if (this.memberEditForm.ID) { - updateMemberInfo(params).then(res => { + updateMemberInfo(params).then((res) => { if (res.success) { this.$notify({ - type: 'success', - message: res.msg + type: "success", + message: res.msg, }); this.memberEditDialogVisible = false; this.renderMemberTable(); this.searchLeftTreeData(); + this.memberEditForm = {}; } - }) + }); } else { - addMember(params).then(res => { + addMember(params).then((res) => { if (res.success) { this.$notify({ - type: 'success', - message: res.msg - }) + type: "success", + message: res.msg, + }); this.renderMemberTable(); this.memberEditDialogVisible = false; this.searchLeftTreeData(); + this.memberEditForm = {}; } - }) + }); } } else { return false; } - }) + }); }, - delMember (member) { - member.IsDel = '1'; + delMember(member) { + member.IsDel = "1"; this.memberUpdate(member); }, - editMember (member) { + editMember(member) { this.memberEditDialogVisible = true; this.memberEditForm = member; }, - memberUpdate (member) { - updateMemberInfo(member).then(res => { + memberUpdate(member) { + updateMemberInfo(member).then((res) => { if (res.success) { this.$notify({ - type: 'success', - message: res.msg + type: "success", + message: res.msg, }); this.renderMemberTable(); this.searchLeftTreeData(); } - }) + }); }, - checkNode (a, b, c) { - if (a.hasOwnProperty('children')) { + checkNode(a, b, c) { + if (a.hasOwnProperty("children")) { this.curLeftTreeNode = a; this.deptId = a.id; this.renderMemberTable(); } }, - handleTableSizeChange (size) { + handleTableSizeChange(size) { this.PageSize = size; this.renderMemberTable(); }, - renderMemberTable () { + renderMemberTable() { let _this = this; let params = { DeptID: this.deptId, Keyword: this.keyword, Sex: this.gender, PageIndex: this.PageIndex, - PageSize: this.PageSize - } - getMemberList(params).then(res => { + PageSize: this.PageSize, + }; + getMemberList(params).then((res) => { _this.tableData = res.data; _this.tableTotal = res.total; - }) + }); }, - uploadPic () { - + uploadPic() {}, + uploadDirectoryTrigger() { + this.$refs["directoryInput"].click(); }, - uploadDirectoryTrigger () { - this.$refs['directoryInput'].click(); - }, - importDirectory () { + importDirectory() { let _this = this; //this.$refs['directoryInput'].files //鏂囦欢澶筸ap - let formData = new FormData; - for (var file in this.$refs['directoryInput'].files) { - formData.append('files', this.$refs['directoryInput'].files[file]) + let formData = new FormData(); + for (var file in this.$refs["directoryInput"].files) { + formData.append("files", this.$refs["directoryInput"].files[file]); } //formData.append('files', this.$refs['directoryInput'].files) - uploadDirectory(formData).then(res => { + uploadDirectory(formData).then((res) => { _this.batchImportTableData = res.data; _this.renderMemberTable(); - }) + }); }, - handleRemove () { - - }, - handleExceed () { - - }, - batchImport () { + handleRemove() {}, + handleExceed() {}, + batchImport() { this.batchImportDialogVisible = true; }, - toggleOrganize () { + toggleOrganize() { this.toggleOrganizeDialogVisible = true; }, - uploadMemberPicture (params) { + uploadMemberPicture(params) { let param = new FormData(); - param.append('file', params.file) - uploadMemberPic(param).then(res => { - this.$set(this.memberEditForm, 'Surface', res.data) - }) + param.append("file", params.file); + uploadMemberPic(param).then((res) => { + this.$set(this.memberEditForm, "Surface", res.data); + }); }, - deepNodeChildren (node) { + deepNodeChildren(node) { var arr1 = []; var arr2 = []; if (node.ChildDept && node.ChildDept.length > 0) { - arr1 = node.ChildDept.map(child => { + arr1 = node.ChildDept.map((child) => { let childObj = {}; childObj.id = child.ID; childObj.label = child.Name; childObj.Status = child.Status; if (child.ChildDept) { - childObj.children = this.deepNodeChildren(child) + childObj.children = this.deepNodeChildren(child); } if (child.UserLst) { - childObj.children = this.deepNodeChildren(child) + childObj.children = this.deepNodeChildren(child); } return childObj; }); } if (node.UserLst && node.UserLst.length > 0) { - arr2 = node.UserLst.map(child => { + arr2 = node.UserLst.map((child) => { let childObj = {}; childObj.id = child.ID; childObj.label = child.Name; @@ -491,51 +576,51 @@ return childObj; }); } - return arr1.concat(arr2) + return arr1.concat(arr2); }, - getOrganizeTreeData () { + getOrganizeTreeData() { let _this = this; - getOrganizeTree().then(res => { - _this.organizeData = res.data.map(item => { + getOrganizeTree().then((res) => { + _this.organizeData = res.data.map((item) => { let obj = {}; obj.id = item.ID; obj.label = item.Name; obj.Status = item.Status; obj.children = _this.deepNodeChildren(item); - return obj - }) - }) + return obj; + }); + }); }, - searchLeftTreeData () { + searchLeftTreeData() { let _this = this; - getShuohuangDepartTree().then(res => { - _this.treeData = res.data.map(item => { + getShuohuangDepartTree().then((res) => { + _this.treeData = res.data.map((item) => { let obj = {}; obj.id = item.ID; obj.label = item.Name; obj.Status = item.Status; obj.children = _this.deepNodeChildren(item); - return obj + return obj; }); this.$nextTick(() => { if (!Object.keys(_this.curLeftTreeNode).length) { - _this.curLeftTreeNode = _this.treeData[0]; - _this.$refs['leftTreeNodes'].setCurrentNode(_this.treeData[0]); + if (_this.treeData.length) { + _this.curLeftTreeNode = _this.treeData[0]; + _this.$refs["leftTreeNodes"].setCurrentNode(_this.treeData[0]); + } } else { - _this.$refs['leftTreeNodes'].setCurrentNode(_this.curLeftTreeNode); + _this.$refs["leftTreeNodes"].setCurrentNode(_this.curLeftTreeNode); } _this.checkNode(_this.curLeftTreeNode); - }) - - }) + }); + }); }, - addMember () { + addMember() { this.memberEditDialogVisible = true; this.memberEditForm = {}; }, - - } -} + }, +}; </script> <style lang="scss"> -- Gitblit v1.8.0