From da6cfbce4502d53735832d4a076c9927576fc34b Mon Sep 17 00:00:00 2001
From: Your Name <123456>
Date: 星期一, 30 五月 2022 14:12:34 +0800
Subject: [PATCH] '改'
---
src/views/hiddenDangerTroubleshootingList/index.vue | 181 ++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 177 insertions(+), 4 deletions(-)
diff --git a/src/views/hiddenDangerTroubleshootingList/index.vue b/src/views/hiddenDangerTroubleshootingList/index.vue
index 34cd1a0..0ebb761 100644
--- a/src/views/hiddenDangerTroubleshootingList/index.vue
+++ b/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>
--
Gitblit v1.9.2