From a90cf43e7a1f41dcde401ed1fd118b0f90d7c3f5 Mon Sep 17 00:00:00 2001
From: cqf
Date: 星期四, 26 五月 2022 11:41:49 +0800
Subject: [PATCH] 举一反三隐患-存在
---
src/views/hiddenDangerTroubleshootingList/index.vue | 235 +++++++++++++++++++++++++++++++++++++++-------------------
1 files changed, 159 insertions(+), 76 deletions(-)
diff --git a/src/views/hiddenDangerTroubleshootingList/index.vue b/src/views/hiddenDangerTroubleshootingList/index.vue
index 88dfb61..3208d2d 100644
--- a/src/views/hiddenDangerTroubleshootingList/index.vue
+++ b/src/views/hiddenDangerTroubleshootingList/index.vue
@@ -1,10 +1,11 @@
-<template>
- <div class="whole">
+<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"
@@ -24,85 +25,79 @@
}"
style="color: #409eff;"
/>
- <i v-else class="
-el-icon-folder-add" style="color: #EC933A;" />
+ <i v-else class="el-icon-folder-add" style="color: #EC933A;"/>
<span>{{ node.label }}</span>
</template>
</span>
</el-tree>
</div>
- <div class="right-table">
- <el-form :model="config" ref="configTableForm">
- <el-table
- :data="config.list"
- style="width: 100%"
- max-height="450">
-<!-- <el-table-column label="查询名">-->
-<!-- <template slot-scope="scope">-->
-<!-- <el-form-item>-->
-<!-- <el-input-->
-<!-- v-model.trim="scope.row.value"-->
-<!-- size="mini"-->
-<!-- placeholder="请填写值"></el-input>-->
-<!-- </el-form-item>-->
-<!-- </template>-->
-<!-- </el-table-column>-->
-<!-- <el-table-column label="查询名">-->
-<!-- <template slot-scope="scope">-->
-<!-- <el-form-item>-->
-<!-- <el-input-->
-<!-- v-model.trim="scope.row.value"-->
-<!-- size="mini"-->
-<!-- placeholder="请填写值"></el-input>-->
-<!-- </el-form-item>-->
-<!-- </template>-->
-<!-- </el-table-column>-->
- <tr>sssss</tr>
- <td>ss</td>
- </el-table>
- </el-form>
- <div class="btns">
-<!-- <el-button-->
-<!-- type="primary"-->
-<!-- @click="submitConfig('configTableForm')">保存并确定</el-button>-->
- </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" ,
+ name: "index",
data() {
return {
data: [{
id: 1,
label: '隐患排查清单',
- icon:'el-icon-folder',
+ icon: 'el-icon-folder',
+ click: true,
children: [{
id: 4,
label: '现场管理清单',
- icon:'el-icon-folder',
+ icon: 'el-icon-folder',
+ click: true
},
- {
- id: 5,
- label: '基础管理清单',
- icon:'el-icon-success',
- }]
+ {
+ id: 5,
+ label: '基础管理清单',
+ icon: 'el-icon-success',
+ click: true
+ }]
}],
defaultProps: {
children: 'children',
label: 'label'
},
- // 配置列表
- config: {
- list: [
- {name: ''}
- ]
- },
+ templateName: "",
+ file: null,
+ fullscreenLoading:false
};
},
- mounted(){
+ mounted() {
this.getAllColumns()
},
methods: {
@@ -138,49 +133,137 @@
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{
+.whole {
display: flex;
}
-.left-tree{
+
+.left-tree {
width: 15%;
}
-.left-tree .el-tree{
+
+.left-tree .el-tree {
background: #f0f6e4;
height: 400px;
overflow-y: scroll;
border: 1px solid #000;
}
-/deep/ .is-leaf{
+
+/deep/ .is-leaf {
background: transparent !important;
width: 5px;
height: 5px;
background-size: 100%;
margin-right: 5px;
}
-/*/deep/ .el-tree-node__expand-icon{*/
-/* background: url(../../../../assets/shu_ic_wzk.png) no-repeat;*/
-/* width: 5px;*/
-/* height: 5px;*/
-/* background-size: 100%;*/
-/* margin-right: 5px;*/
-/*}*/
-/*/deep/ .expanded{*/
-/* background: url(../../../../assets/shu_ic_zk.png) no-repeat;*/
-/* width: 5px;*/
-/* height: 5px;*/
-/* background-size: 100%;*/
-/* margin-right: 5px;*/
-/* transform: rotate(0deg) !important;*/
-/*}*/
-/deep/ .el-icon-caret-right:before{
+
+/deep/ .el-icon-caret-right:before {
content: '';
}
-.right-table{
- width: 80%;
+
+.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>
--
Gitblit v1.9.2