安全隐患台账-督查督办

13937891274

2022-05-17 331c3bed75c95d13d79e84f5ba4d0500716fc703

 src/views/hiddenDangerTroubleshootingList/index.vue

@@ -1,13 +1,186 @@
<template>

<template xmlns="http://www.w3.org/1999/html">
    <div class="whole">
        <div class="left-tree">
            <el-tree
                :data="data"
                node-key="id"
                default-expand-all
                @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">
            <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;">
                    </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>
                    </td>
                </tr>
                <tr class="table_tr">
                    <td colspan="4" align="center">
                        <button class="btn">预览</button>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</template>

<script>
export default {
    name: "index"
    name: "index" ,
    data() {
        return {
            data: [{
                id: 1,
                label: '隐患排查清单',
                icon:'el-icon-folder',
                children: [{
                    id: 4,
                    label: '现场管理清单',
                    icon:'el-icon-folder',
                },
                {
                    id: 5,
                    label: '基础管理清单',
                    icon:'el-icon-success',
                }]
            }],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
        };
    },
    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);
        }
    }
}
</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>