From 85d5b48f6e225887bdfc460c20186962b213e304 Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期五, 02 七月 2021 15:09:14 +0800
Subject: [PATCH] excel下载前端调用修改
---
src/pages/shuohuangMonitorAnalyze/components/memberManage.vue | 351 +++++++++++++++++++++++++++++++++++----------------------
1 files changed, 215 insertions(+), 136 deletions(-)
diff --git a/src/pages/shuohuangMonitorAnalyze/components/memberManage.vue b/src/pages/shuohuangMonitorAnalyze/components/memberManage.vue
index 62e989e..99c5e57 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/memberManage.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/memberManage.vue
@@ -1,7 +1,7 @@
<template>
<div class="member-manage">
<div class="left">
- <div style="margin-bottom:10px;">
+ <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>
@@ -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() {
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: '',
+ checkedOrgID: "",
checkedOrgName: "",
- organizeKeyword: '',
+ 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() {
this.searchLeftTreeData();
this.getOrganizeTreeData();
//this.renderMemberTable();
-
},
methods: {
resetFilter() {
- this.keyword = '';
- this.gender = '';
+ this.keyword = "";
+ this.gender = "";
this.renderMemberTable();
},
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}$/
@@ -310,79 +387,90 @@
this.menuLeft = e.pageX;
},
checkOrgNode(a, b, c) {
- this.checkedOrgID = a.id
- this.checkedOrgName = a.label
+ this.checkedOrgID = a.id;
+ this.checkedOrgName = a.label;
},
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
+ let ids = this.multipleTableSelection.map((row) => {
+ return row.ID;
});
let params = {
DeptID: this.checkedOrgID,
DeptName: this.checkedOrgName,
- Users: ids.join(',')
- }
- updateUnit(params).then(res => {
+ 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) {
this.multipleTableSelection = val;
},
memberSave() {
- this.$refs['memberForm'].validate((valid) => {
+ this.$refs["memberForm"].validate((valid) => {
if (valid) {
debugger;
- let params = Object.assign({ DeptID: this.curLeftTreeNode.id }, this.memberEditForm);
+ 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={}
+ 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={}
+ this.memberEditForm = {};
}
- })
+ });
}
} else {
return false;
}
- })
+ });
},
delMember(member) {
- member.IsDel = '1';
+ member.IsDel = "1";
this.memberUpdate(member);
},
editMember(member) {
@@ -390,19 +478,19 @@
this.memberEditForm = member;
},
memberUpdate(member) {
- updateMemberInfo(member).then(res => {
+ 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')) {
+ if (a.hasOwnProperty("children")) {
this.curLeftTreeNode = a;
this.deptId = a.id;
this.renderMemberTable();
@@ -419,40 +507,34 @@
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();
+ this.$refs["directoryInput"].click();
},
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() {
-
- },
+ handleRemove() {},
+ handleExceed() {},
batchImport() {
this.batchImportDialogVisible = true;
},
@@ -461,32 +543,32 @@
},
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) {
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;
@@ -494,54 +576,51 @@
return childObj;
});
}
- return arr1.concat(arr2)
+ return arr1.concat(arr2);
},
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() {
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) {
if (_this.treeData.length) {
_this.curLeftTreeNode = _this.treeData[0];
- _this.$refs['leftTreeNodes'].setCurrentNode(_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() {
this.memberEditDialogVisible = true;
this.memberEditForm = {};
},
-
- }
-}
+ },
+};
</script>
<style lang="scss">
--
Gitblit v1.8.0