| | |
| | | <template xmlns="http://www.w3.org/1999/html"> |
| | | <div class="whole"> |
| | | <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" |
| | |
| | | }" |
| | | 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"> |
| | | <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;"> |
| | | <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" style="color: red;"> |
| | | <button class="btn" style="margin-left: 120px;">导入</button> |
| | | <button class="btn">下载模板</button> |
| | | <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">预览</button> |
| | | <button class="btn" @click="preview">预览</button> |
| | | </td> |
| | | </tr> |
| | | </table> |
| | |
| | | </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' |
| | | }, |
| | | templateName: "", |
| | | file: null, |
| | | fullscreenLoading:false |
| | | }; |
| | | }, |
| | | mounted(){ |
| | | mounted() { |
| | | this.getAllColumns() |
| | | }, |
| | | methods: { |
| | |
| | | }, |
| | | 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-icon-caret-right:before{ |
| | | |
| | | /deep/ .el-icon-caret-right:before { |
| | | content: ''; |
| | | } |
| | | .right-table{ |
| | | |
| | | .right-table { |
| | | width: 85%; |
| | | } |
| | | table,table tr th, table tr td { |
| | | border:1px solid #ccc; |
| | | |
| | | table, table tr th, table tr td { |
| | | border: 1px solid #ccc; |
| | | } |
| | | .table_td{ |
| | | |
| | | .table_td { |
| | | background: #e4edf4; |
| | | } |
| | | .table_tr{ |
| | | |
| | | .table_tr { |
| | | background: #e4edf4; |
| | | line-height: 40px; |
| | | height: 40px; |
| | | } |
| | | table{ |
| | | |
| | | table { |
| | | width: 100%; |
| | | border-collapse: collapse; |
| | | font-size: 14px; |
| | | } |
| | | .input{ |
| | | |
| | | .input { |
| | | background: #f9f9f9; |
| | | border-width: 1px; |
| | | margin: 5px 0; |
| | | } |
| | | .btn{ |
| | | |
| | | .btn { |
| | | background: url(../../assets/btn.gif) no-repeat; |
| | | width: 76px; |
| | | height: 26px; |