<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"
|
: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 :inline="true" :model="formInline" class="demo-form-inline">
|
<el-checkbox-group v-model="checkList">
|
<el-checkbox style="margin-right: 50px">
|
<el-form-item label="事故来源">
|
<el-input v-model="formInline.user"></el-input>
|
</el-form-item>
|
</el-checkbox>
|
<el-checkbox style="margin-right: 50px">
|
<el-form-item label="事故类型">
|
<el-input v-model="formInline.user"></el-input>
|
</el-form-item>
|
</el-checkbox>
|
<el-form-item label="主要危险源" style="margin-right: 50px">
|
<el-input v-model="formInline.user"></el-input>
|
</el-form-item>
|
</el-checkbox-group>
|
<el-form-item>
|
<button class="btn" @click="onSubmit">查询</button>
|
<button class="btn" @click="onSubmit">确定</button>
|
</el-form-item>
|
</el-form>
|
<el-table
|
:data="tableData"
|
ref="multipleTable"
|
border
|
@selection-change="handleSelectionChange"
|
style="width: 100%">
|
<el-table-column
|
type="selection"
|
width="55">
|
</el-table-column>
|
<el-table-column
|
prop="date"
|
label="风险点"
|
width="180">
|
</el-table-column>
|
<el-table-column
|
prop="name"
|
label="主要危险源"
|
width="180">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="事故类型">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="风险等级">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="管控措施">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="管控层级">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="责任单位">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="责任人">
|
</el-table-column>
|
</el-table>
|
<div style="text-align:right">
|
<el-pagination
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="currentPage4"
|
:page-sizes="[100, 200, 300, 400]"
|
:page-size="100"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="400">
|
</el-pagination>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "hazardSource",
|
data() {
|
return {
|
data: [{
|
id: 1,
|
label: '危险源等级',
|
icon:'el-icon-folder',
|
children: [{
|
id: 2,
|
label: '低风险',
|
icon:'el-icon-folder',
|
},
|
{
|
id: 3,
|
label: '一般风险',
|
icon:'el-icon-success',
|
},
|
{
|
id: 4,
|
label: '较大风险',
|
icon:'el-icon-success',
|
},
|
{
|
id: 5,
|
label: '重大风险',
|
icon:'el-icon-success',
|
}]
|
}],
|
formInline: {
|
user: '',
|
region: ''
|
},
|
checkList: ['选中且禁用','复选框 A'],
|
tableData: [{
|
date: '2016-05-02',
|
name: '王小虎',
|
address: '上海市普陀区金沙江路 1518 弄'
|
}, {
|
date: '2016-05-04',
|
name: '王小虎',
|
address: '上海市普陀区金沙江路 1517 弄'
|
}, {
|
date: '2016-05-01',
|
name: '王小虎',
|
address: '上海市普陀区金沙江路 1519 弄'
|
}, {
|
date: '2016-05-03',
|
name: '王小虎',
|
address: '上海市普陀区金沙江路 1516 弄'
|
}],
|
multipleSelection: [],
|
currentPage4: 4
|
};
|
},
|
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);
|
},
|
onSubmit() {
|
console.log('submit!');
|
},
|
handleSelectionChange(val) {
|
this.multipleSelection = val;
|
},
|
// 页码
|
handleSizeChange(val) {
|
console.log(`每页 ${val} 条`);
|
},
|
handleCurrentChange(val) {
|
console.log(`当前页: ${val}`);
|
}
|
}
|
}
|
</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%;
|
padding-left: 20px;
|
}
|
.demo-form-inline /deep/ .el-checkbox__inner{
|
top: 9px;
|
}
|
.demo-form-inline{
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: start;
|
background: #FFFFFF;
|
padding: 15px 10px 0px 10px;
|
margin-bottom: 20px;
|
}
|
.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>
|
