hejunjie
1 year ago
6 changed files with 726 additions and 336 deletions
@ -1,321 +1,70 @@ |
|||||
|
<template> |
||||
|
<div class="warn-wrapper"> |
||||
|
<!-- 预警信息管理 --> |
||||
|
<Tree :data="treeData" :defaultProps="defaultProps" :showInput="false" :default-checked-keys="defaultCheckedKeys" |
||||
|
show-checkbox no-checkbox node-key="id" ref="warnTreeRef" class="warn-tree"> |
||||
|
<template v-slot:default="{ node, data }"> |
||||
|
<span class="name">{{ data.name }}</span> |
||||
|
</template> |
||||
|
<template v-slot:right="{ node, data }"> |
||||
|
<el-dropdown @command="handleCommand($event, data)" v-if="data && !data.children"> |
||||
|
<span class="btn-item"> |
||||
|
<i class="el-icon-more"></i> |
||||
|
</span> |
||||
|
<template #dropdown> |
||||
|
<el-dropdown-menu class="dropdown-menu"> |
||||
|
<el-dropdown-item class="right-menu" command="infoSetting"> |
||||
|
预演信息配置 |
||||
|
</el-dropdown-item> |
||||
|
</el-dropdown-menu> |
||||
|
</template> |
||||
|
</el-dropdown> |
||||
|
</template> |
||||
|
</Tree> |
||||
|
<Edit></Edit> |
||||
|
</div> |
||||
|
</template> |
||||
<script> |
<script> |
||||
import { getAreasData } from "@/api/areas/index"; |
import Tree from '../../../compoments/tree/Tree.vue' |
||||
import Edit from "./edit.vue"; |
import Edit from './edit.vue' |
||||
import { ENGINTYPE, PLANLIST } from "../../const"; |
import { TREEDATA } from '../../const' |
||||
let that; |
|
||||
export default { |
export default { |
||||
name: "PlanDetail", |
components: { Tree, Edit }, |
||||
components: { |
data () { |
||||
Edit |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
return { |
||||
searchForm: { |
treeData: [], |
||||
enginType: "1", |
defaultProps: { |
||||
adcd: "", |
children: "children", |
||||
value: "" |
label: "name", |
||||
|
// isLeaf: "isLeaf", |
||||
}, |
|
||||
dialog: { |
|
||||
title: "新增预案", |
|
||||
dom: "", |
|
||||
visible: false, |
|
||||
}, |
|
||||
mdl: null, |
|
||||
enginTypeList: ENGINTYPE, // 检查类型 |
|
||||
areasOptions: [], |
|
||||
areasOptionProps: { |
|
||||
emitPath: false, |
|
||||
checkStrictly: true, //选择任意一级 |
|
||||
}, |
|
||||
tableData: [], |
|
||||
pageData: { |
|
||||
pageNum: 1, // 当前页 |
|
||||
pageSize: 10, // 请求数量 |
|
||||
pageSizes: [10, 20, 50, 100], |
|
||||
total: 0, // 总数量 |
|
||||
}, |
}, |
||||
|
defaultCheckedKeys: [], |
||||
|
draw: null, |
||||
|
_poiTreeData: {}, |
||||
|
checkedKeys: [], |
||||
|
entityFeatures: [], |
||||
|
childArr: [], |
||||
}; |
}; |
||||
}, |
}, |
||||
created() { |
|
||||
that = this; |
|
||||
}, |
|
||||
filters: { |
|
||||
// 过滤类型 |
|
||||
filterembankment(price) { |
|
||||
const data = that.enginTypeList.filter((res) => res.dictValue == price); |
|
||||
return data[0] ? data[0].dictLabel : "/"; |
|
||||
}, |
|
||||
}, |
|
||||
methods: { |
methods: { |
||||
handleGoManage(row) { |
handleCommand (node, data) { |
||||
this.$router.push({ |
console.log(node, data, 'node, data'); |
||||
path: "planInfoDetail", |
|
||||
query: { id: row.id }, |
|
||||
}); |
|
||||
}, |
|
||||
handleCurrentPageChange(page) { |
|
||||
this.pageData.pageNum = page; |
|
||||
this.getTableData(); |
|
||||
}, |
|
||||
handlePageSizeChange(pageSize) { |
|
||||
this.pageData.pageSize = pageSize; |
|
||||
this.getTableData(); |
|
||||
}, |
|
||||
search() { |
|
||||
this.pageData.pageNum = 1; |
|
||||
this.getTableData(); |
|
||||
}, |
|
||||
// 重置搜索 |
|
||||
resetSearch() { |
|
||||
this.pageData.pageNum = 1; |
|
||||
if (!this.$refs["searchForm"]) return; |
|
||||
this.$refs["searchForm"].resetFields(); |
|
||||
this.getTableData(); |
|
||||
}, |
|
||||
handleAdd() { |
|
||||
this.dialog.dom = "Edit"; |
|
||||
this.dialog.visible = true; |
|
||||
}, |
|
||||
handleCheck(row) { |
|
||||
this.dialog.dom = "Edit"; |
|
||||
this.mdl = { ...row }; |
|
||||
this.dialog.visible = true; |
|
||||
}, |
|
||||
handleEdit(row) { |
|
||||
this.dialog.dom = "Edit"; |
|
||||
this.mdl = { |
|
||||
eventType: "edit", |
|
||||
...row, |
|
||||
}; |
|
||||
this.dialog.visible = true; |
|
||||
}, |
|
||||
handleDelete() { |
|
||||
this.$message.success("删除成功"); |
|
||||
}, |
|
||||
submitForm() { |
|
||||
console.log(123) |
|
||||
this.$refs.component.submitForm(async (from) => { |
|
||||
if (this.mdl) { |
|
||||
this.$message.success("修改成功"); |
|
||||
this.closeDialog(); |
|
||||
} else { |
|
||||
this.$message.success("新增成功"); |
|
||||
this.closeDialog(); |
|
||||
} |
|
||||
}) |
|
||||
}, |
|
||||
// 关闭dialog |
|
||||
closeDialog() { |
|
||||
this.dialog.visible = false; |
|
||||
this.mdl = null; |
|
||||
}, |
|
||||
// 获取地区树数据 |
|
||||
getTreeData() { |
|
||||
getAreasData().then((items) => { |
|
||||
this.adcdOptions = items.data; |
|
||||
if (items?.data) { |
|
||||
let res = []; |
|
||||
let getChildren = (res, pid) => { |
|
||||
for (const i of items.data) { |
|
||||
if (i.parentid === pid) { |
|
||||
const newItem = { |
|
||||
label: i.name, |
|
||||
value: i.id, |
|
||||
}; |
|
||||
if (i.layer != 3) newItem.children = []; |
|
||||
res.push(newItem); |
|
||||
getChildren(newItem.children, newItem.value); |
|
||||
} |
|
||||
} |
|
||||
}; |
|
||||
getChildren(res, items.data[0].parentid); |
|
||||
this.areasOptions = res; |
|
||||
} |
|
||||
}); |
|
||||
}, |
|
||||
// 获取列表数据 |
|
||||
getTableData() { |
|
||||
console.log(this.searchForm); |
|
||||
const list = PLANLIST.filter(res => { |
|
||||
let filter = true |
|
||||
// 过滤搜索框 |
|
||||
if (this.searchForm.value) { |
|
||||
if (!res.planName.includes(this.searchForm.value)) { |
|
||||
filter = false |
|
||||
} |
|
||||
} |
|
||||
if (filter) return res |
|
||||
}) |
|
||||
this.tableData = list |
|
||||
} |
} |
||||
}, |
}, |
||||
async mounted() { |
mounted() { |
||||
this.getTreeData() |
this.treeData = TREEDATA |
||||
this.getTableData() |
} |
||||
|
|
||||
}, |
|
||||
}; |
}; |
||||
</script> |
</script> |
||||
|
<style lang="scss" scoped> |
||||
<template> |
.warn-wrapper { |
||||
<div class="slider-right"> |
|
||||
<div class="table-box"> |
|
||||
<el-form |
|
||||
inline |
|
||||
:model="searchForm" |
|
||||
ref="searchForm" |
|
||||
class="demo-ruleForm" |
|
||||
> |
|
||||
<el-form-item prop="value"> |
|
||||
<el-input |
|
||||
v-model="searchForm.value" |
|
||||
class="search-input" |
|
||||
placeholder="请输入名称" |
|
||||
></el-input> |
|
||||
</el-form-item> |
|
||||
<el-form-item> |
|
||||
<el-button class="search-btn" type="success" @click="search" |
|
||||
>查询</el-button |
|
||||
> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
<el-button |
|
||||
class="search-btn" |
|
||||
style="margin-right: 16px; margin-bottom: 8px; float: right" |
|
||||
type="success" |
|
||||
@click="handleAdd()" |
|
||||
>新增 |
|
||||
</el-button> |
|
||||
<el-table height="625" :data="tableData" border> |
|
||||
<el-table-column type="index" align="center" label="序号" width="100"> |
|
||||
</el-table-column> |
|
||||
<el-table-column prop="planName" align="center" label="预案名称"> |
|
||||
</el-table-column> |
|
||||
<el-table-column prop="planType" align="center" label="预案类型"> |
|
||||
</el-table-column> |
|
||||
<el-table-column prop="director" align="center" label="负责人"> |
|
||||
</el-table-column> |
|
||||
<el-table-column prop="correlation" align="center" label="关联对象"> |
|
||||
</el-table-column> |
|
||||
<el-table-column prop="updateTime" align="center" label="最近开展时间"> |
|
||||
</el-table-column> |
|
||||
<el-table-column |
|
||||
prop="address" |
|
||||
align="center" |
|
||||
label="操作" |
|
||||
min-width="200" |
|
||||
> |
|
||||
<template slot-scope="scope"> |
|
||||
<el-button |
|
||||
style="margin-right: 16px" |
|
||||
@click="handleCheck(scope.row)" |
|
||||
type="text" |
|
||||
size="small" |
|
||||
> |
|
||||
查看 |
|
||||
</el-button> |
|
||||
<el-button |
|
||||
style="margin-right: 16px" |
|
||||
@click="handleEdit(scope.row)" |
|
||||
type="text" |
|
||||
size="small" |
|
||||
> |
|
||||
编辑 |
|
||||
</el-button> |
|
||||
<el-popconfirm |
|
||||
confirm-button-text="确定" |
|
||||
cancel-button-text="取消" |
|
||||
icon="el-icon-info" |
|
||||
icon-color="red" |
|
||||
title="确定删除吗？" |
|
||||
@confirm="handleDelete(scope.row)" |
|
||||
> |
|
||||
<el-button |
|
||||
style="color: red" |
|
||||
type="text" |
|
||||
size="small" |
|
||||
slot="reference" |
|
||||
>删除 |
|
||||
</el-button> |
|
||||
</el-popconfirm> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
</el-table> |
|
||||
<el-pagination |
|
||||
background |
|
||||
class="pagination" |
|
||||
style="margin-top: 16px; margin-right: 16px; float: right" |
|
||||
:current-page="pageData.pageNum" |
|
||||
:page-sizes="pageData.pageSizes" |
|
||||
layout="total, prev, pager, next, sizes, jumper" |
|
||||
:total="pageData.total" |
|
||||
@current-change="(e) => handleCurrentPageChange(e)" |
|
||||
@size-change="(e) => handlePageSizeChange(e)" |
|
||||
> |
|
||||
</el-pagination> |
|
||||
</div> |
|
||||
<el-dialog |
|
||||
:title="dialog.title" |
|
||||
@close="closeDialog" |
|
||||
:visible.sync="dialog.visible" |
|
||||
width="50%" |
|
||||
> |
|
||||
<component |
|
||||
v-if="dialog.visible" |
|
||||
:is="dialog.dom" |
|
||||
ref="component" |
|
||||
:model="mdl" |
|
||||
></component> |
|
||||
<div slot="footer" class="dialog-footer"> |
|
||||
<el-button size="mini" @click="closeDialog">取 消</el-button> |
|
||||
<el-button size="mini" type="primary" @click="submitForm" |
|
||||
>保存 |
|
||||
</el-button> |
|
||||
</div> |
|
||||
</el-dialog> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<style scoped lang="less"> |
|
||||
|
|
||||
.table-box { |
|
||||
width: 100%; |
width: 100%; |
||||
height: calc(100% - 50px - 24px); |
height: 100%; |
||||
margin-top: 24px; |
display: flex; |
||||
padding: 16px; |
justify-content: space-between; |
||||
background-color: white; |
|
||||
|
|
||||
.search-input { |
|
||||
width: 300px; |
|
||||
margin-right: 10px; |
|
||||
} |
|
||||
|
|
||||
.search-btn { |
|
||||
margin-left: 10px; |
|
||||
background-color: #37b29e; |
|
||||
border: none; |
|
||||
|
|
||||
&:hover { |
|
||||
background-color: #5ac6b9; |
|
||||
} |
|
||||
|
|
||||
&:active { |
|
||||
background-color: #2b8070; |
|
||||
} |
|
||||
} |
|
||||
} |
} |
||||
.search-btn { |
|
||||
margin-left: 10px; |
|
||||
background-color: #37b29e; |
|
||||
border: none; |
|
||||
|
|
||||
&:hover { |
|
||||
background-color: #5ac6b9; |
|
||||
} |
|
||||
|
|
||||
&:active { |
.warn-tree { |
||||
background-color: #2b8070; |
width: 350px !important; |
||||
} |
|
||||
} |
} |
||||
</style> |
</style> |
||||
|
|||||
Loading…
Reference in new issue