From cce5e625e8870248081302513b9cb38e676a04e5 Mon Sep 17 00:00:00 2001 From: zhangzengfei <zhangzengfei@iotlink.com> Date: 星期五, 25 六月 2021 15:34:37 +0800 Subject: [PATCH] 调整全景跟踪目标选择的样式 --- src/pages/shuohuangMonitorAnalyze/components/memberManage.vue | 213 +++++++++++++++++++++++++++++++--------------------- 1 files changed, 127 insertions(+), 86 deletions(-) diff --git a/src/pages/shuohuangMonitorAnalyze/components/memberManage.vue b/src/pages/shuohuangMonitorAnalyze/components/memberManage.vue index 4f1ca37..72e613a 100644 --- a/src/pages/shuohuangMonitorAnalyze/components/memberManage.vue +++ b/src/pages/shuohuangMonitorAnalyze/components/memberManage.vue @@ -33,11 +33,12 @@ <el-option v-for="item in genders" :key="item.id" - :value="item.id" + :value="item.name=='鍏ㄩ儴'?'':item.name" :label="item.name" >{{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> </div> <div class="table-area"> <div class="actions"> @@ -98,6 +99,15 @@ </template> </el-table-column> </el-table> + <el-pagination + @size-change="handleTableSizeChange" + @current-change="renderMemberTable" + :current-page.sync="PageIndex" + :page-size="PageSize" + :page-sizes="pageSizes" + layout="total,sizes, prev, pager, next" + :total="tableTotal" + ></el-pagination> </div> </div> <el-dialog @@ -148,7 +158,7 @@ <el-form-item label="韬唤璇佸彿:"> <el-input v-model="memberEditForm.OwnerID" size="mini"></el-input> </el-form-item> - <el-form-item label="鎵嬫満鍙�:"> + <el-form-item label="鎵嬫満鍙�:" prop="Tel"> <el-input v-model="memberEditForm.Tel" size="mini"></el-input> </el-form-item> <div class="btns"> @@ -196,45 +206,25 @@ <p class="tip"> *璇锋彁鍓嶆牴鎹枃浠舵ā鏉夸腑鐨勮姹傛敹闆嗕汉鍛樹俊鎭紝鍦ㄤ竴涓枃浠跺す涓瓨鏀句汉鍛樼収鐗囧拰EXCEL鏂囦欢 ( - <a href="javascript:;" @mouseover="showDemo=true" @mouseout="showDemo=false">绀轰緥</a>),鐐瑰嚮 - <a href="javascript:;">涓嬭浇妯℃澘.excel</a> + <a + href="javascript:;" + @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 /> </p> <div class="flex-box"> - <label>涓婁紶鏂囦欢:</label> + <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="uploadExeclTrigger" style="margin-left:10px;">鐐瑰嚮涓婁紶Excel</el-button> - <input ref="excelInput" @change="importExecl" hidden type="file" accept=".xlsx">--> - <!-- <el-upload - class="upload-demo batch-upload" - action="https://jsonplaceholder.typicode.com/posts/" - :on-remove="handleRemove" - multiple - :limit="3" - :http-request="batchImportFiles" - :on-exceed="handleExceed" - :file-list="fileList" - > - <el-button size="small" type="primary">鐐瑰嚮涓婁紶</el-button> - <div slot="tip" class="el-upload__tip"></div> - </el-upload>--> </div> <el-table class="thbg" :data="batchImportTableData" fit> <el-table-column type="index" label="搴忓彿"></el-table-column> - <el-table-column prop="filename" label="鏂囦欢鍚嶇О"></el-table-column> - <el-table-column prop="time" label="涓婁紶鏃堕棿"></el-table-column> - <el-table-column prop="state" label="鐘舵��"></el-table-column> + <el-table-column prop="Name" label="鏂囦欢鍚嶇О"></el-table-column> + <el-table-column prop="UploadTime" label="涓婁紶鏃堕棿"></el-table-column> + <el-table-column prop="Status" label="鐘舵��"></el-table-column> </el-table> - <el-pagination - @size-change="handleTableSizeChange" - @current-change="renderMemberTable" - :current-page.sync="PageIndex" - :page-size="PageSize" - :page-sizes="pageSizes" - layout="total,sizes, prev, pager, next" - :total="tableTotal" - ></el-pagination> </div> </el-dialog> </div> @@ -242,10 +232,9 @@ <script> -import { getShuohuangDepartTree, getOrganizeTree, getMemberList, updateMemberInfo, addMember, updateUnit, uploadMemberPic, uploadDirectory } 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/', @@ -258,7 +247,7 @@ menuLeft: 0, keyword: '', gender: '', - genders: [{ name: '鐢�', id: 'g0' }, { name: '濂�', id: 'g1' }], + genders: [{ id: 'g3', name: '鍏ㄩ儴' }, { name: '鐢�', id: 'g0' }, { name: '濂�', id: 'g1' }], tableData: [], multipleTableSelection: [], PageIndex: 1, @@ -266,7 +255,8 @@ tableTotal: 0, PageSize: 8, organizeData: [], - checkedOrg: '', + checkedOrgID: '', + checkedOrgName: "", organizeKeyword: '', memberEditDialogVisible: false, toggleOrganizeDialogVisible: false, @@ -276,35 +266,66 @@ memberEditFormRule: { Name: [{ required: true, message: '璇疯緭鍏ュ鍚�', trigger: 'change' }], UserName: [{ required: true, message: '璇疯緭鍏ュ鍚�', trigger: 'change' }], - Sex: [{ required: true, message: '璇烽�夋嫨鎬у埆', trigger: 'change' }] + Sex: [{ required: true, message: '璇烽�夋嫨鎬у埆', trigger: 'change' }], + Tel: [{ validator: this.isPhone, trigger: 'change' }], }, memberPicUrl: '', showDemo: false, batchImportTableData: [], } }, - mounted () { + mounted() { this.searchLeftTreeData(); this.getOrganizeTreeData(); //this.renderMemberTable(); }, methods: { - nodeContextMenu (e, data, node, comp) { - debugger + resetFilter() { + this.keyword = ''; + this.gender = ''; + this.renderMemberTable(); + }, + isPhone(rule, value, callback) { + if (!value) { + return callback() + } else if (value.trim()) { + var pattern = /^1[345789]\d{9}$/ + if (pattern.test(value)) { + return callback() + } + return callback(new Error('杈撳叆鐨勬墜鏈哄彿閿欒')) + } + // if (value.trim()) { + // var pattern = /^1[345789]\d{9}$/ + // if (pattern.test(value)) { + // return callback() + // } + // return callback(new Error('杈撳叆鐨勬墜鏈哄彿閿欒')) + // } + }, + nodeContextMenu(e, data, node, comp) { this.showMenu = true; this.menuTop = e.pageY; this.menuLeft = e.pageX; }, - checkOrgNode (a, b, c) { - this.checkedOrg = a.id + checkOrgNode(a, b, c) { + this.checkedOrgID = a.id + this.checkedOrgName = a.label }, - updateOrg () { + downloadExcel() { + downloadFile().then(function (res) { + // debugger + console.log(res); + }) + }, + updateOrg() { let ids = this.multipleTableSelection.map(row => { return row.ID }); let params = { - DeptID: this.checkedOrg, + DeptID: this.checkedOrgID, + DeptName: this.checkedOrgName, Users: ids.join(',') } updateUnit(params).then(res => { @@ -315,18 +336,20 @@ }); this.toggleOrganizeDialogVisible = false; this.renderMemberTable(); + this.searchLeftTreeData() } }) }, - tableSelection (val) { + tableSelection(val) { this.multipleTableSelection = val; }, - memberSave () { + memberSave() { this.$refs['memberForm'].validate((valid) => { if (valid) { + let params = Object.assign({ DeptID: this.curLeftTreeNode.id }, this.memberEditForm); if (this.memberEditForm.ID) { - updateMemberInfo(this.memberEditForm).then(res => { + updateMemberInfo(params).then(res => { if (res.success) { this.$notify({ type: 'success', @@ -334,16 +357,19 @@ }); this.memberEditDialogVisible = false; this.renderMemberTable(); + this.searchLeftTreeData(); } }) } else { - addMember(this.memberEditForm).then(res => { + addMember(params).then(res => { if (res.success) { this.$notify({ type: 'success', message: res.msg }) this.renderMemberTable(); + this.memberEditDialogVisible = false; + this.searchLeftTreeData(); } }) } @@ -352,16 +378,15 @@ } }) }, - delMember (member) { - member.IsDel = true; + delMember(member) { + member.IsDel = '1'; this.memberUpdate(member); }, - editMember (member) { - debugger + editMember(member) { this.memberEditDialogVisible = true; this.memberEditForm = member; }, - memberUpdate (member) { + memberUpdate(member) { updateMemberInfo(member).then(res => { if (res.success) { this.$notify({ @@ -369,67 +394,69 @@ message: res.msg }); this.renderMemberTable(); + this.searchLeftTreeData(); } }) }, - checkNode (a, b, c) { - if (a.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, + Keyword: this.keyword, Sex: this.gender, PageIndex: this.PageIndex, PageSize: this.PageSize } getMemberList(params).then(res => { _this.tableData = res.data; + _this.tableTotal = res.total; }) }, - uploadPic () { + uploadPic() { }, - uploadDirectoryTrigger () { + uploadDirectoryTrigger() { this.$refs['directoryInput'].click(); }, - // uploadExeclTrigger(){ - // this.$refs['excelInput'].click(); - // }, - importDirectory () { + importDirectory() { + let _this = this; //this.$refs['directoryInput'].files //鏂囦欢澶筸ap let formData = new FormData; - formData.append('File', this.$refs['directoryInput'].files) - debugger - // uploadDirectory(formData).then(res=>{ - // debugger + 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 => { + _this.batchImportTableData = res.data; + _this.renderMemberTable(); + }) }, - handleRemove () { + handleRemove() { }, - handleExceed () { + handleExceed() { }, - batchImport () { + 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 => { @@ -437,9 +464,11 @@ }) }, - deepNodeChildren (node) { + deepNodeChildren(node) { + var arr1 = []; + var arr2 = []; if (node.ChildDept && node.ChildDept.length > 0) { - return node.ChildDept.map(child => { + arr1 = node.ChildDept.map(child => { let childObj = {}; childObj.id = child.ID; childObj.label = child.Name; @@ -452,8 +481,9 @@ } return childObj; }); - } else if (node.UserLst && node.UserLst.length > 0) { - return node.UserLst.map(child => { + } + if (node.UserLst && node.UserLst.length > 0) { + arr2 = node.UserLst.map(child => { let childObj = {}; childObj.id = child.ID; childObj.label = child.Name; @@ -461,8 +491,9 @@ return childObj; }); } + return arr1.concat(arr2) }, - getOrganizeTreeData () { + getOrganizeTreeData() { let _this = this; getOrganizeTree().then(res => { _this.organizeData = res.data.map(item => { @@ -475,7 +506,7 @@ }) }) }, - searchLeftTreeData () { + searchLeftTreeData() { let _this = this; getShuohuangDepartTree().then(res => { _this.treeData = res.data.map(item => { @@ -487,14 +518,21 @@ return obj }); this.$nextTick(() => { - _this.$refs['leftTreeNodes'].setCurrentNode(_this.treeData[0]); - _this.curLeftTreeNode = _this.treeData[0]; - _this.checkNode(_this.treeData[0]); + + if (!Object.keys(_this.curLeftTreeNode).length) { + if (_this.treeData.length) { + _this.curLeftTreeNode = _this.treeData[0]; + _this.$refs['leftTreeNodes'].setCurrentNode(_this.treeData[0]); + } + } else { + _this.$refs['leftTreeNodes'].setCurrentNode(_this.curLeftTreeNode); + } + _this.checkNode(_this.curLeftTreeNode); }) }) }, - addMember () { + addMember() { this.memberEditDialogVisible = true; this.memberEditForm = {}; }, @@ -557,6 +595,9 @@ .el-form-item__label { width: 100px; } + .el-form-item__error { + left: 120px; + } } } .el-input { -- Gitblit v1.8.0