panzy
2022-05-21 c1df656dee7e75d109d2bee05f0c129e13e9367a
src/views/hiddenDangerTroubleshootingList/index.vue
@@ -1,10 +1,11 @@
<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"
@@ -24,31 +25,34 @@
                  }"
                    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>
@@ -57,32 +61,43 @@
</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: {
@@ -120,59 +135,127 @@
        },
        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;