<template>
|
<el-dialog class="emergency" :visible.sync="showSchedule" :title="tit" :modal="false" v-dialogDrag >
|
<!-- 基础信息 -->
|
<div class="basicInformation">
|
<div>
|
<h3 class="panel-title">演练信息</h3>
|
<ul>
|
<li>事件类型：</li>
|
<li>事件位置：</li>
|
<li>位置描述：</li>
|
<li>事件时间：</li>
|
<li>附件：<a href="javascript:;">附件1</a><a href="javascript:;">附件1</a></li>
|
</ul>
|
<h3 class="panel-title">预案匹配</h3>
|
<el-table :data="tableData" style="width: 100%">
|
<el-table-column prop="name" label="预案名称"></el-table-column>
|
<el-table-column prop="define" label="预案定义"></el-table-column>
|
<el-table-column prop="hierarchy" label="预案层级"></el-table-column>
|
<el-table-column prop="classification" label="预案分类"></el-table-column>
|
<el-table-column label="附件">
|
<template>
|
<a href="javascript:;">预案</a>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<div>
|
<div class="panel-title">搜索</div>
|
<div>
|
<ul>
|
<li>
|
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
|
<div style="margin: 15px 0;"></div>
|
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
|
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
|
</el-checkbox-group>
|
</li>
|
</ul>
|
</div>
|
</div>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
const cityOptions = ['上海', '北京', '广州', '深圳']
|
export default {
|
name: 'index',
|
data () {
|
return {
|
tit: '事件处置',
|
showSchedule: true,
|
tableData: [
|
{ name: '预案A', define: '综合预案', hierarchy: '二级单位', classification: '环保' },
|
{ name: '预案B', define: '专项预案', hierarchy: '直属企业', classification: '环保' },
|
{ name: '预案C', define: '现场处置预案', hierarchy: '基层单位', classification: '生产' },
|
{ name: '预案D', define: '现场处置预案', hierarchy: '基层单位', classification: '生产' },
|
{ name: '预案E', define: '现场处置预案', hierarchy: '基层单位', classification: '生产' }
|
],
|
checkAll: false,
|
checkedCities: ['上海', '北京'],
|
cities: cityOptions,
|
isIndeterminate: true
|
}
|
},
|
methods: {
|
handleCheckAllChange (val) {
|
this.checkedCities = val ? cityOptions : []
|
this.isIndeterminate = false
|
},
|
handleCheckedCitiesChange (value) {
|
const checkedCount = value.length
|
this.checkAll = checkedCount === this.cities.length
|
this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="less">
|
.emergency{
|
/deep/ .el-dialog{
|
width: 750px;
|
}
|
.basicInformation{
|
display: flex;
|
}
|
}
|
</style>
|
