| | |
| | | <template> |
| | | |
| | | <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"> |
| | | <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> |
| | | </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' |
| | | }, |
| | | // 配置列表 |
| | | config: { |
| | | list: [ |
| | | {name: ''} |
| | | ] |
| | | }, |
| | | }; |
| | | }, |
| | | 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 |
| | | }, |
| | | } |
| | | } |
| | | </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-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{ |
| | | content: ''; |
| | | } |
| | | .right-table{ |
| | | width: 80%; |
| | | } |
| | | </style> |