<template xmlns="http://www.w3.org/1999/html">
|
<div class="whole" v-loading="fullscreenLoading">
|
<div class="left-tree">
|
<el-tree
|
:data="data"
|
node-key="id"
|
default-expand-all
|
@node-click="clickType"
|
@node-drag-start="handleDragStart"
|
@node-drag-enter="handleDragEnter"
|
@node-drag-leave="handleDragLeave"
|
@node-drag-over="handleDragOver"
|
@node-drag-end="handleDragEnd"
|
@node-drop="handleDrop"
|
draggable
|
:allow-drop="allowDrop"
|
:allow-drag="allowDrag">
|
<span slot-scope="{ node, data }" class="slot-t-node">
|
<template>
|
<i
|
v-if="data.ChildItems&&data.ChildItems.length"
|
:class="{
|
'el-icon-folder': !node.expanded, // 节点收缩时的图标
|
'el-icon-folder-opened': node.expanded, // 节点展开时的图标
|
}"
|
style="color: #409eff;"
|
/>
|
<i v-else class="el-icon-folder-add" style="color: #EC933A;"/>
|
<span>{{ node.label }}</span>
|
</template>
|
</span>
|
</el-tree>
|
</div>
|
<div class="right-table" v-show="templateName!=null && templateName !=''">
|
<table border="1" style="background: #FFFFFF;width: 100%;">
|
<tr>
|
<td class="table_td" style="text-align: right;">模板名称：</td>
|
<td>
|
<input class="input" style="line-height: 24px;height: 24px;"
|
v-model="templateName">
|
</td>
|
</tr>
|
<tr>
|
<td class="table_td" style="text-align: right;">模板导入:</td>
|
<td style="line-height: 24px;height: 24px;">
|
<input class="input" type="file" @change="changeFile" accept=".xlsx,.xls" style="color: red;">
|
<button class="btn" style="margin-left: 120px;" @click="importData"
|
>导入
|
</button>
|
<button class="btn" @click="downTemplate">下载模板</button>
|
</td>
|
</tr>
|
<tr class="table_tr">
|
<td colspan="4" align="center">
|
<button class="btn" @click="preview">预览</button>
|
</td>
|
</tr>
|
</table>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
|
|
import {standard_template, standard_import_do,stand_list} from "@/api/sgyhpczl/hiddenDangerTroubleshootingList";
|
|
|
export default {
|
name: "index",
|
data() {
|
return {
|
data: [{
|
id: 1,
|
label: '隐患排查清单',
|
icon: 'el-icon-folder',
|
click: true,
|
children: [{
|
id: 4,
|
label: '现场管理清单',
|
icon: 'el-icon-folder',
|
click: true
|
},
|
{
|
id: 5,
|
label: '基础管理清单',
|
icon: 'el-icon-success',
|
click: true
|
}]
|
}],
|
defaultProps: {
|
children: 'children',
|
label: 'label'
|
},
|
templateName: "",
|
file: null,
|
fullscreenLoading:false
|
};
|
},
|
mounted() {
|
this.getAllColumns()
|
},
|
methods: {
|
handleDragStart(node, ev) {
|
console.log('drag start', node);
|
},
|
handleDragEnter(draggingNode, dropNode, ev) {
|
console.log('tree drag enter: ', dropNode.label);
|
},
|
handleDragLeave(draggingNode, dropNode, ev) {
|
console.log('tree drag leave: ', dropNode.label);
|
},
|
handleDragOver(draggingNode, dropNode, ev) {
|
console.log('tree drag over: ', dropNode.label);
|
},
|
handleDragEnd(draggingNode, dropNode, dropType, ev) {
|
console.log('tree drag end: ', dropNode && dropNode.label, dropType);
|
},
|
handleDrop(draggingNode, dropNode, dropType, ev) {
|
console.log('tree drop: ', dropNode.label, dropType);
|
},
|
allowDrop(draggingNode, dropNode, type) {
|
if (dropNode.data.label === '二级 3-1') {
|
return type !== 'inner';
|
} else {
|
return true;
|
}
|
},
|
allowDrag(draggingNode) {
|
return draggingNode.data.label.indexOf('三级 3-2-2') === -1;
|
},
|
// 获取表格数据进行渲染
|
getAllColumns() {
|
var data = this.$route.query
|
},
|
handleChange(file, fileList) {
|
this.fileList = fileList.slice(-3);
|
},
|
clickType(item) {
|
if (item.click) {
|
this.templateName = item.label;
|
}
|
},
|
downTemplate() {
|
//删除分页参数
|
standard_template().then(res => {
|
var blob = new Blob([res.data])
|
var downloadElement = document.createElement('a')
|
var href = window.URL.createObjectURL(blob) //创建下载的链接
|
downloadElement.href = href
|
downloadElement.download = '隐患排查标准清单模板.xlsx' //下载后文件名
|
document.body.appendChild(downloadElement)
|
downloadElement.click() //点击下载
|
document.body.removeChild(downloadElement) //下载完成移除元素
|
window.URL.revokeObjectURL(href) //释放掉blob对象
|
}).catch(err => {
|
console.log(err)
|
})
|
},
|
importData() {
|
if (this.file == null) {
|
this.$message({type: 'warning', message: "请添加Excel附件", duration: 3000})
|
return;
|
}
|
console.log(this.file)
|
this.fullscreenLoading = true;
|
this.uploadByJsqd(this.file);
|
},
|
changeFile(file) {
|
this.file = event.target.files[0]
|
},
|
//文件发生改变就会触发的事件 导入
|
uploadByJsqd(file) {
|
//判断是否符合beforeAvatarUpload方法中的条件
|
var formdata = new FormData()
|
formdata.append('file', file)
|
formdata.append('standardType', this.templateName);
|
|
//importDevice：请求接口 formdata：传递参数
|
standard_import_do(formdata).then((res) => {
|
this.fullscreenLoading = false;
|
if (res.data.ok) {
|
this.$message({type: 'success', message: res.data.msg, duration: 3000})
|
this.getPageList()//调用表格方法，刷新页面
|
} else {
|
this.$message({type: 'error', message: res.data.msg, duration: 3000})
|
}
|
})
|
},
|
preview(){
|
this.$router.push({
|
path: "/preview",
|
query:{"templateName":this.templateName}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.whole {
|
display: flex;
|
}
|
|
.left-tree {
|
width: 15%;
|
}
|
|
.left-tree .el-tree {
|
background: #f0f6e4;
|
height: 400px;
|
overflow-y: scroll;
|
border: 1px solid #000;
|
}
|
|
/deep/ .is-leaf {
|
background: transparent !important;
|
width: 5px;
|
height: 5px;
|
background-size: 100%;
|
margin-right: 5px;
|
}
|
|
/deep/ .el-icon-caret-right:before {
|
content: '';
|
}
|
|
.right-table {
|
width: 85%;
|
}
|
|
table, table tr th, table tr td {
|
border: 1px solid #ccc;
|
}
|
|
.table_td {
|
background: #e4edf4;
|
}
|
|
.table_tr {
|
background: #e4edf4;
|
line-height: 40px;
|
height: 40px;
|
}
|
|
table {
|
width: 100%;
|
border-collapse: collapse;
|
font-size: 14px;
|
}
|
|
.input {
|
background: #f9f9f9;
|
border-width: 1px;
|
margin: 5px 0;
|
}
|
|
.btn {
|
background: url(../../assets/btn.gif) no-repeat;
|
width: 76px;
|
height: 26px;
|
line-height: 26px;
|
font-size: 14px;
|
border: none;
|
color: #fff;
|
cursor: pointer;
|
overflow: visible;
|
}
|
</style>
|
