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> |
|||
import { getAreasData } from "@/api/areas/index"; |
|||
import Edit from "./edit.vue"; |
|||
import { ENGINTYPE, PLANLIST } from "../../const"; |
|||
let that; |
|||
import Tree from '../../../compoments/tree/Tree.vue' |
|||
import Edit from './edit.vue' |
|||
import { TREEDATA } from '../../const' |
|||
export default { |
|||
name: "PlanDetail", |
|||
components: { |
|||
Edit |
|||
}, |
|||
data() { |
|||
components: { Tree, Edit }, |
|||
data () { |
|||
return { |
|||
searchForm: { |
|||
enginType: "1", |
|||
adcd: "", |
|||
value: "" |
|||
|
|||
}, |
|||
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, // 总数量 |
|||
treeData: [], |
|||
defaultProps: { |
|||
children: "children", |
|||
label: "name", |
|||
// isLeaf: "isLeaf", |
|||
}, |
|||
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: { |
|||
handleGoManage(row) { |
|||
this.$router.push({ |
|||
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 |
|||
handleCommand (node, data) { |
|||
console.log(node, data, 'node, data'); |
|||
} |
|||
}, |
|||
async mounted() { |
|||
this.getTreeData() |
|||
this.getTableData() |
|||
|
|||
}, |
|||
mounted() { |
|||
this.treeData = TREEDATA |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<template> |
|||
<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 { |
|||
<style lang="scss" scoped> |
|||
.warn-wrapper { |
|||
width: 100%; |
|||
height: calc(100% - 50px - 24px); |
|||
margin-top: 24px; |
|||
padding: 16px; |
|||
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; |
|||
} |
|||
} |
|||
height: 100%; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
|||
.search-btn { |
|||
margin-left: 10px; |
|||
background-color: #37b29e; |
|||
border: none; |
|||
|
|||
&:hover { |
|||
background-color: #5ac6b9; |
|||
} |
|||
|
|||
&:active { |
|||
background-color: #2b8070; |
|||
} |
|||
.warn-tree { |
|||
width: 350px !important; |
|||
} |
|||
</style> |
|||
|
|||
Loading…
Reference in new issue