From a24ca741c5fcf4cd05e51e083a62eb4e68eeaa6e Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@iotlink.com>
Date: 星期一, 01 二月 2021 11:00:20 +0800
Subject: [PATCH] 完善bhomebus 的 api 接口
---
src/pages/shuohuangMonitorAnalyze/components/memberManage.vue | 192 ++++++++++++++++++++++++++++++++++--------------
1 files changed, 136 insertions(+), 56 deletions(-)
diff --git a/src/pages/shuohuangMonitorAnalyze/components/memberManage.vue b/src/pages/shuohuangMonitorAnalyze/components/memberManage.vue
index bc1be55..4f1ca37 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/memberManage.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/memberManage.vue
@@ -7,20 +7,22 @@
</el-input>
</div>
<el-tree
+ ref="leftTreeNodes"
:data="treeData"
node-key="id"
default-expand-all
- @node-click="checkNode"
:expand-on-click-node="false"
:check-on-click-node="true"
:highlight-current="true"
+ @node-click="checkNode"
+ @node-contextmenu="nodeContextMenu"
></el-tree>
<div class="menuList" v-show="showMenu" :style="{top:menuTop+'px',left:menuLeft+'px'}">
<ul>
<li>鍒涘缓鍚岀骇鑺傜偣</li>
<li>鍒犻櫎鑺傜偣</li>
<li>閲嶅懡鍚嶈妭鐐�</li>
- <li>鍏抽棴</li>
+ <li @click="showMenu = false">鍏抽棴</li>
</ul>
</div>
</div>
@@ -35,7 +37,7 @@
:label="item.name"
>{{item.name}}</el-option>
</el-select>
- <el-button type="primary" size="small" @click="dataSearch">鏌ヨ</el-button>
+ <el-button type="primary" size="small" @click="renderMemberTable">鏌ヨ</el-button>
</div>
<div class="table-area">
<div class="actions">
@@ -65,7 +67,7 @@
<el-table-column label="鐓х墖" prop="Surface">
<template slot-scope="scope">
<div class="table-cell-pic">
- <img :src="`${CLIP}${scope.row.Surface}`" alt />
+ <img :src="`/httpImage/${scope.row.Surface}`" alt />
</div>
</template>
</el-table-column>
@@ -102,11 +104,16 @@
:visible="memberEditDialogVisible"
class="member-edit-dialog"
:append-to-body="false"
- title="娣诲姞/缂栬緫浜哄憳"
@close="memberEditDialogVisible=false"
>
+ <div slot="title">
+ <div class="title">
+ <div class="main-title">{{memberEditForm.ID?'缂栬緫浜哄憳':'娣诲姞浜哄憳'}}</div>
+ <div class="subtitle">缁勭粐缁撴瀯:{{curLeftTreeNode.label}}</div>
+ </div>
+ </div>
<div class="text-center">
- <el-form :model="memberEditForm">
+ <el-form :model="memberEditForm" :rules="memberEditFormRule" ref="memberForm">
<el-form-item>
<el-upload
class="avatar-uploader"
@@ -125,16 +132,16 @@
<el-form-item label="宸ュ彿:" prop="WorkID">
<el-input v-model="memberEditForm.WorkID" size="mini"></el-input>
</el-form-item>
- <el-form-item label="鐓х墖鏍囪瘑:">
+ <!-- <el-form-item label="鐓х墖鏍囪瘑:">
<el-input v-model="memberEditForm.SurfaceName" size="mini"></el-input>
- </el-form-item>
- <el-form-item label="濮撳悕:">
+ </el-form-item>-->
+ <el-form-item label="濮撳悕:" prop="Name">
<el-input v-model="memberEditForm.Name" size="mini"></el-input>
</el-form-item>
- <el-form-item label="鐢ㄦ埛鍚�:">
+ <el-form-item label="鐢ㄦ埛鍚�:" prop="UserName">
<el-input v-model="memberEditForm.UserName" size="mini"></el-input>
</el-form-item>
- <el-form-item label="鎬у埆:">
+ <el-form-item label="鎬у埆:" prop="Sex">
<el-radio v-model="memberEditForm.Sex" label="濂�">濂�</el-radio>
<el-radio v-model="memberEditForm.Sex" label="鐢�">鐢�</el-radio>
</el-form-item>
@@ -185,10 +192,21 @@
title="鎵归噺瀵煎叆"
@close="batchImportDialogVisible=false"
>
- <div class="text-left">
+ <div>
+ <p class="tip">
+ *璇锋彁鍓嶆牴鎹枃浠舵ā鏉夸腑鐨勮姹傛敹闆嗕汉鍛樹俊鎭紝鍦ㄤ竴涓枃浠跺す涓瓨鏀句汉鍛樼収鐗囧拰EXCEL鏂囦欢
+ (
+ <a href="javascript:;" @mouseover="showDemo=true" @mouseout="showDemo=false">绀轰緥</a>),鐐瑰嚮
+ <a href="javascript:;">涓嬭浇妯℃澘.excel</a>
+ <img class="tip-demo" v-if="showDemo" :src="`${publicPath}images/shuohuang/tip.jpg`" alt />
+ </p>
<div class="flex-box">
<label>涓婁紶鏂囦欢:</label>
- <el-upload
+ <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"
@@ -200,11 +218,7 @@
>
<el-button size="small" type="primary">鐐瑰嚮涓婁紶</el-button>
<div slot="tip" class="el-upload__tip"></div>
- </el-upload>
- <p>
- *璇锋寜鐓ф妯℃澘濉啓淇℃伅锛岀偣鍑讳笅杞芥ā鏉�
- <a href="javascript:;">.excel</a>
- </p>
+ </el-upload>-->
</div>
<el-table class="thbg" :data="batchImportTableData" fit>
<el-table-column type="index" label="搴忓彿"></el-table-column>
@@ -228,14 +242,16 @@
<script>
-import { getShuohuangDepartTree, getOrganizeTree, getMemberList, updateMemberInfo, addMember, updateUnit, uploadMemberPic } from '@/api/shuohuang'
+import { getShuohuangDepartTree, getOrganizeTree, getMemberList, updateMemberInfo, addMember, updateUnit, uploadMemberPic, uploadDirectory } from '@/api/shuohuang'
export default {
data () {
return {
+ publicPath: process.env.BASE_URL,
CLIP: 'http://192.168.20.113/',
treeWord: '',
treeData: [],
+ curLeftTreeNode: {},
showMenu: false,
deptId: '',
menuTop: 0,
@@ -257,16 +273,29 @@
batchImportDialogVisible: false,
fileList: [],
memberEditForm: {},
+ memberEditFormRule: {
+ Name: [{ required: true, message: '璇疯緭鍏ュ鍚�', trigger: 'change' }],
+ UserName: [{ required: true, message: '璇疯緭鍏ュ鍚�', trigger: 'change' }],
+ Sex: [{ required: true, message: '璇烽�夋嫨鎬у埆', trigger: 'change' }]
+ },
memberPicUrl: '',
+ showDemo: false,
batchImportTableData: [],
}
},
mounted () {
this.searchLeftTreeData();
this.getOrganizeTreeData();
- this.renderMemberTable();
+ //this.renderMemberTable();
+
},
methods: {
+ nodeContextMenu (e, data, node, comp) {
+ debugger
+ this.showMenu = true;
+ this.menuTop = e.pageY;
+ this.menuLeft = e.pageX;
+ },
checkOrgNode (a, b, c) {
this.checkedOrg = a.id
},
@@ -294,29 +323,34 @@
this.multipleTableSelection = val;
},
memberSave () {
- if (this.memberEditForm.ID) {
- updateMemberInfo(this.memberEditForm).then(res => {
- if (res.success) {
- this.$notify({
- type: 'success',
- message: res.msg
- });
- this.memberEditDialogVisible = false;
- this.renderMemberTable();
- }
- })
- }else{
- addMember(this.memberEditForm).then(res=>{
- if(res.success){
- this.$notify({
- type:'success',
- message: res.msg
+ this.$refs['memberForm'].validate((valid) => {
+ if (valid) {
+ if (this.memberEditForm.ID) {
+ updateMemberInfo(this.memberEditForm).then(res => {
+ if (res.success) {
+ this.$notify({
+ type: 'success',
+ message: res.msg
+ });
+ this.memberEditDialogVisible = false;
+ this.renderMemberTable();
+ }
})
- this.renderMemberTable();
+ } else {
+ addMember(this.memberEditForm).then(res => {
+ if (res.success) {
+ this.$notify({
+ type: 'success',
+ message: res.msg
+ })
+ this.renderMemberTable();
+ }
+ })
}
- })
- }
-
+ } else {
+ return false;
+ }
+ })
},
delMember (member) {
member.IsDel = true;
@@ -340,6 +374,7 @@
},
checkNode (a, b, c) {
if (a.children) {
+ this.curLeftTreeNode = a;
this.deptId = a.id;
this.renderMemberTable();
}
@@ -358,16 +393,30 @@
PageSize: this.PageSize
}
getMemberList(params).then(res => {
-
_this.tableData = res.data;
})
},
uploadPic () {
},
- batchImportFiles () {
+ uploadDirectoryTrigger () {
+ this.$refs['directoryInput'].click();
+ },
+ // uploadExeclTrigger(){
+ // this.$refs['excelInput'].click();
+ // },
+ importDirectory () {
+ //this.$refs['directoryInput'].files //鏂囦欢澶筸ap
+ let formData = new FormData;
+ formData.append('File', this.$refs['directoryInput'].files)
+ debugger
+ // uploadDirectory(formData).then(res=>{
+ // debugger
+
+ // })
},
+
handleRemove () {
},
@@ -384,17 +433,10 @@
let param = new FormData();
param.append('file', params.file)
uploadMemberPic(param).then(res => {
- this.$set(this.memberEditForm,'Surface',res.data)
+ this.$set(this.memberEditForm, 'Surface', res.data)
})
},
- openMenuList (t, l, frame) {
- this.showMenu = true;
- this.menuTop = t;
- this.menuLeft = l;
- },
- closeMenuList () {
- this.showMenu = false;
- },
+
deepNodeChildren (node) {
if (node.ChildDept && node.ChildDept.length > 0) {
return node.ChildDept.map(child => {
@@ -443,15 +485,20 @@
obj.Status = item.Status;
obj.children = _this.deepNodeChildren(item);
return obj
+ });
+ this.$nextTick(() => {
+ _this.$refs['leftTreeNodes'].setCurrentNode(_this.treeData[0]);
+ _this.curLeftTreeNode = _this.treeData[0];
+ _this.checkNode(_this.treeData[0]);
})
+
})
},
addMember () {
this.memberEditDialogVisible = true;
+ this.memberEditForm = {};
},
- dataSearch () {
- }
}
}
</script>
@@ -491,6 +538,21 @@
.el-dialog {
width: 500px;
padding: 0 30px;
+ .el-dialog__header {
+ .title {
+ display: flex;
+ align-items: flex-end;
+ justify-content: center;
+ .main-title {
+ font-size: 16px;
+ padding-right: 10px;
+ }
+ .subtitle {
+ font-size: 14px;
+ color: #666;
+ }
+ }
+ }
.el-form-item {
.el-form-item__label {
width: 100px;
@@ -513,13 +575,31 @@
}
}
}
+ .batch-import-dialog {
+ .el-dialog__body {
+ padding: 14px 20px;
+ }
+ .tip {
+ text-align: left;
+ margin-bottom: 10px;
+ position: relative;
+ .tip-demo {
+ position: absolute;
+ width: 530px;
+ z-index: 1000;
+ top: -10px;
+ left: 20px;
+ }
+ }
+ }
.menuList {
background: #fff;
position: absolute;
z-index: 100;
width: 180px;
text-align: left;
- border: 1px solid #ccc;
+ border: 1px solid #ddd;
+ box-shadow: 4px 4px 3px 0px rgba(0, 0, 0, 0.1);
}
.menuList li {
line-height: 28px;
@@ -528,7 +608,7 @@
background: #fff;
}
.menuList li:hover {
- background: rgba(152, 170, 190, 0.7);
+ background: #ecf0fc;
}
.right {
padding-left: 20px;
--
Gitblit v1.8.0