feat(request): 重构 axios 请求并添加新功能
- 创建独立的 request 实例，避免全局 axios 默认配置冲突 - 添加文件上传下载功能 - 新增 get、post 方法的 loading 控制 -优化请求拦截器，统一处理 Token 和 loading - 重构响应拦截器，统一处理登录失效和请求错误master
parent
087daf26a9
commit
4ed118ed74
|
|
@ -15,5 +15,7 @@
|
||||||
<script type="text/javascript" src="/cesium91/CesiumUnminified/Cesium.js"></script>
|
<script type="text/javascript" src="/cesium91/CesiumUnminified/Cesium.js"></script>
|
||||||
<script type="text/javascript" src="/cesium91/CustomCesiumSDK.js"></script>
|
<script type="text/javascript" src="/cesium91/CustomCesiumSDK.js"></script>
|
||||||
<link href="/cesium91/CesiumUnminified/Widgets/widgets.css" rel="stylesheet"/>
|
<link href="/cesium91/CesiumUnminified/Widgets/widgets.css" rel="stylesheet"/>
|
||||||
|
<script type="text/javascript"
|
||||||
|
src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=OElqFYoKiAH8KFtph8ftLKF5NlNrbCUr"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<suspense>
|
<suspense>
|
||||||
<template #default>
|
<template #default>
|
||||||
<router-view />
|
<el-config-provider :locale="zhCn">
|
||||||
|
<router-view />
|
||||||
|
</el-config-provider>
|
||||||
</template>
|
</template>
|
||||||
<template #fallback>
|
<template #fallback>
|
||||||
<div>加载中...</div>
|
<div>加载中...</div>
|
||||||
|
|
@ -9,6 +11,8 @@
|
||||||
</suspense>
|
</suspense>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup></script>
|
<script setup>
|
||||||
|
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
|
||||||
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped></style>
|
<style lang="scss" scoped></style>
|
||||||
|
|
|
||||||
|
|
@ -17,102 +17,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 生成1-50的margin和padding（正负）
|
|
||||||
@for $i from 1 through 50 {
|
|
||||||
.m-#{$i} {
|
|
||||||
margin: #{$i}px;
|
|
||||||
}
|
|
||||||
.mt-#{$i} {
|
|
||||||
margin-top: #{$i}px;
|
|
||||||
}
|
|
||||||
.mr-#{$i} {
|
|
||||||
margin-right: #{$i}px;
|
|
||||||
}
|
|
||||||
.mb-#{$i} {
|
|
||||||
margin-bottom: #{$i}px;
|
|
||||||
}
|
|
||||||
.ml-#{$i} {
|
|
||||||
margin-left: #{$i}px;
|
|
||||||
}
|
|
||||||
.mtb-#{$i} {
|
|
||||||
margin-top: #{$i}px;
|
|
||||||
margin-bottom: #{$i}px;
|
|
||||||
}
|
|
||||||
.mlr-#{$i} {
|
|
||||||
margin-left: #{$i}px;
|
|
||||||
margin-right: #{$i}px;
|
|
||||||
}
|
|
||||||
.p-#{$i} {
|
|
||||||
padding: #{$i}px;
|
|
||||||
}
|
|
||||||
.pt-#{$i} {
|
|
||||||
padding-top: #{$i}px;
|
|
||||||
}
|
|
||||||
.pr-#{$i} {
|
|
||||||
padding-right: #{$i}px;
|
|
||||||
}
|
|
||||||
.pb-#{$i} {
|
|
||||||
padding-bottom: #{$i}px;
|
|
||||||
}
|
|
||||||
.pl-#{$i} {
|
|
||||||
padding-left: #{$i}px;
|
|
||||||
}
|
|
||||||
.ptb-#{$i} {
|
|
||||||
padding-top: #{$i}px;
|
|
||||||
padding-bottom: #{$i}px;
|
|
||||||
}
|
|
||||||
.plr-#{$i} {
|
|
||||||
padding-left: #{$i}px;
|
|
||||||
padding-right: #{$i}px;
|
|
||||||
}
|
|
||||||
.m--#{$i} {
|
|
||||||
margin: -#{$i}px;
|
|
||||||
}
|
|
||||||
.mt--#{$i} {
|
|
||||||
margin-top: -#{$i}px;
|
|
||||||
}
|
|
||||||
.mr--#{$i} {
|
|
||||||
margin-right: -#{$i}px;
|
|
||||||
}
|
|
||||||
.mb--#{$i} {
|
|
||||||
margin-bottom: -#{$i}px;
|
|
||||||
}
|
|
||||||
.ml--#{$i} {
|
|
||||||
margin-left: -#{$i}px;
|
|
||||||
}
|
|
||||||
.mtb--#{$i} {
|
|
||||||
margin-top: -#{$i}px;
|
|
||||||
margin-bottom: -#{$i}px;
|
|
||||||
}
|
|
||||||
.mlr--#{$i} {
|
|
||||||
margin-left: -#{$i}px;
|
|
||||||
margin-right: -#{$i}px;
|
|
||||||
}
|
|
||||||
.p--#{$i} {
|
|
||||||
padding: -#{$i}px;
|
|
||||||
}
|
|
||||||
.pt--#{$i} {
|
|
||||||
padding-top: -#{$i}px;
|
|
||||||
}
|
|
||||||
.pr--#{$i} {
|
|
||||||
padding-right: -#{$i}px;
|
|
||||||
}
|
|
||||||
.pb--#{$i} {
|
|
||||||
padding-bottom: -#{$i}px;
|
|
||||||
}
|
|
||||||
.pl--#{$i} {
|
|
||||||
padding-left: -#{$i}px;
|
|
||||||
}
|
|
||||||
.ptb--#{$i} {
|
|
||||||
padding-top: -#{$i}px;
|
|
||||||
padding-bottom: -#{$i}px;
|
|
||||||
}
|
|
||||||
.plr--#{$i} {
|
|
||||||
padding-left: -#{$i}px;
|
|
||||||
padding-right: -#{$i}px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
* {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
|
@ -145,13 +49,158 @@ a {
|
||||||
color: var(--el-color-primary);
|
color: var(--el-color-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.end {
|
||||||
|
.el-form-item__content {
|
||||||
|
justify-content: end;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p0.el-descriptions__content {
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p0 .el-descriptions tr {
|
||||||
|
.el-descriptions__label {
|
||||||
|
border-left: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-descriptions__content {
|
||||||
|
border-right: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:first-child .el-descriptions__cell {
|
||||||
|
border-top: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child .el-descriptions__cell {
|
||||||
|
border-bottom: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p20 {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt {
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ml {
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mr {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mb {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-blue {
|
||||||
|
color: #0000ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-yellow {
|
||||||
|
color: #bebe05;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-orange {
|
||||||
|
color: #de9004;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-red {
|
||||||
|
color: #ff0000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-green {
|
||||||
|
color: #0bb20c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tc {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tr {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tl {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dn {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
//.print_use {
|
||||||
|
// display: none;
|
||||||
|
//}
|
||||||
|
|
||||||
.viewer-zoom-in, .viewer-zoom-out, .viewer-one-to-one, .viewer-reset, .viewer-prev, .viewer-play, .viewer-next, .viewer-rotate-left, .viewer-rotate-right, .viewer-flip-horizontal, .viewer-flip-vertical, .viewer-fullscreen, .viewer-fullscreen-exit, .viewer-close {
|
.viewer-zoom-in, .viewer-zoom-out, .viewer-one-to-one, .viewer-reset, .viewer-prev, .viewer-play, .viewer-next, .viewer-rotate-left, .viewer-rotate-right, .viewer-flip-horizontal, .viewer-flip-vertical, .viewer-fullscreen, .viewer-fullscreen-exit, .viewer-close {
|
||||||
&::before {
|
&::before {
|
||||||
font-size: unset !important;
|
font-size: unset !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.iframe{
|
.vue-pdf__wrapper-annotation-layer {
|
||||||
position: relative;
|
height: 0 !important;
|
||||||
border: none;
|
}
|
||||||
|
|
||||||
|
.w-e-bar-divider {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 打印时去掉页眉页脚
|
||||||
|
@page {
|
||||||
|
size: auto;
|
||||||
|
margin: 3mm;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media print {
|
||||||
|
@page {
|
||||||
|
size: auto;
|
||||||
|
}
|
||||||
|
body, html { //如果vue最外层id，默认是#app。如果设置了height:100%;，那么#app也加
|
||||||
|
height: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.print_use {
|
||||||
|
border-collapse: collapse;
|
||||||
|
width: 100%;
|
||||||
|
display: table;
|
||||||
|
|
||||||
|
td, th {
|
||||||
|
border: 1px solid #eaeaea;
|
||||||
|
padding: 8px;
|
||||||
|
line-height: 1.6;
|
||||||
|
text-align: center;
|
||||||
|
color: #000 !important;
|
||||||
|
}
|
||||||
|
tr {
|
||||||
|
color: #000 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.print_no_use {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.my_primary{
|
||||||
|
width: calc(100vw - 252px);
|
||||||
|
background: #ffffff;
|
||||||
|
padding: 10px;
|
||||||
|
position: fixed;
|
||||||
|
left: 231px;
|
||||||
|
bottom: 0;
|
||||||
|
box-shadow: 0 0 10px #cccccc;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.my_main{
|
||||||
|
padding-bottom: 50px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,77 @@
|
||||||
|
.el-select, .el-cascader, .el-date-editor.el-input, .el-date-editor.el-input__wrapper, .el-input__wrapper, .el-input-number {
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
.el-pagination--small .el-select{
|
||||||
|
width: 100px !important;
|
||||||
|
}
|
||||||
|
.el-table .el-table__cell {
|
||||||
|
text-align: center !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-descriptions__label {
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-descriptions__content {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-divider__text {
|
||||||
|
font-size: 16px !important;
|
||||||
|
font-weight: 700 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-form-item__label {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-dialog {
|
||||||
|
--el-dialog-margin-top: 50px !important;
|
||||||
|
|
||||||
|
.el-dialog__header {
|
||||||
|
border-bottom: 1px solid #f1f1f1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-dialog__body {
|
||||||
|
padding: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-dialog__footer {
|
||||||
|
border-top: 1px solid #f1f1f1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-table {
|
||||||
|
* {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
th.el-table__cell {
|
||||||
|
--el-table-header-bg-color: rgb(245, 247, 250);
|
||||||
|
font-weight: bold;
|
||||||
|
color: rgb(0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-table__cell {
|
||||||
|
padding: 8px 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-page-header {
|
||||||
|
border-bottom: 1px solid #eaeaea;
|
||||||
|
padding: 0 20px 20px 20px;
|
||||||
|
margin: 0 -20px 20px -20px;
|
||||||
|
|
||||||
|
.el-page-header__content {
|
||||||
|
font-size: 17px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-pagination .el-select{
|
||||||
|
width: 100px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-scrollbar__wrap{
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -0,0 +1,52 @@
|
||||||
|
import {
|
||||||
|
getDataDictionary,
|
||||||
|
getDataDictionaryTree,
|
||||||
|
getDepartmentTree,
|
||||||
|
} from "@/request/data_dictionary";
|
||||||
|
import { ref } from "vue";
|
||||||
|
|
||||||
|
// 学历
|
||||||
|
export const layoutFnGetDegree = async () => {
|
||||||
|
const resData = await getDataDictionary({
|
||||||
|
parentId: "ddce2eac1cf27e4b114231051ec9123b",
|
||||||
|
});
|
||||||
|
return ref(resData.dictionariesList);
|
||||||
|
};
|
||||||
|
// 评审模板类型
|
||||||
|
export const layoutFnGetCheckTemplateType = async () => {
|
||||||
|
const resData = await getDataDictionary({
|
||||||
|
parentId: "918ff8ae621595c86ed95d2c77484e1c",
|
||||||
|
});
|
||||||
|
return ref(resData.dictionariesList);
|
||||||
|
};
|
||||||
|
// 评审周期
|
||||||
|
export const layoutFnGetReviewCycle = async () => {
|
||||||
|
const resData = await getDataDictionary({
|
||||||
|
parentId: "4034603a5ae1042827340bc86fe26454",
|
||||||
|
});
|
||||||
|
return ref(resData.dictionariesList);
|
||||||
|
};
|
||||||
|
// 无法确定parentId的数据字典
|
||||||
|
export const layoutFnGetDataDictionary = async (parentId) => {
|
||||||
|
const resData = await getDataDictionary({ parentId });
|
||||||
|
return ref(resData.dictionariesList);
|
||||||
|
};
|
||||||
|
// 部门
|
||||||
|
export const layoutFnGetDepartmentTree = async (parentId) => {
|
||||||
|
const resData = await getDepartmentTree(parentId);
|
||||||
|
return ref(resData.deptTree);
|
||||||
|
};
|
||||||
|
// 企业类型
|
||||||
|
export const fnGetEnterpriseTypeList = async () => {
|
||||||
|
const resData = await getDataDictionary({
|
||||||
|
parentId: "71eb9a7f6fb55afdb8f9b4bea9b3e368",
|
||||||
|
});
|
||||||
|
return ref(resData.dictionariesList);
|
||||||
|
};
|
||||||
|
// 企业类型
|
||||||
|
export const fnGetHiddenTypeList = async () => {
|
||||||
|
const resData = await getDataDictionaryTree({
|
||||||
|
parentId: "e3af692a2137d4bcf90ec53f5590b176",
|
||||||
|
});
|
||||||
|
return ref(resData.dictionariesList);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,84 @@
|
||||||
|
<template>
|
||||||
|
<el-cascader
|
||||||
|
ref="cascaderRef"
|
||||||
|
v-model="modelValue"
|
||||||
|
:props="administrativeDivisionProps"
|
||||||
|
@change="change"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { layoutFnGetDataDictionary } from "@/assets/js/data_dictionary.js";
|
||||||
|
import { useVModels } from "@vueuse/core";
|
||||||
|
import { ref } from "vue";
|
||||||
|
|
||||||
|
defineOptions({
|
||||||
|
name: "LayoutCascader",
|
||||||
|
});
|
||||||
|
const props = defineProps({
|
||||||
|
modelValue: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
name: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
level: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: 3,
|
||||||
|
},
|
||||||
|
checkStrictly: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
dictionariesId: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
isPressLevelSetLeaf: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const emits = defineEmits(["update:modelValue", "update:name"]);
|
||||||
|
const { modelValue, name } = useVModels(props, emits);
|
||||||
|
const cascaderRef = ref(null);
|
||||||
|
const administrativeDivisionProps = {
|
||||||
|
lazy: true,
|
||||||
|
lazyLoad: async (node, resolve) => {
|
||||||
|
const resData = await layoutFnGetDataDictionary(
|
||||||
|
node.data.dictionariesId || props.dictionariesId
|
||||||
|
);
|
||||||
|
resolve(
|
||||||
|
resData.value.map((item) => {
|
||||||
|
return {
|
||||||
|
dictionariesId: item.dictionariesId,
|
||||||
|
bianma: item.bianma,
|
||||||
|
name: item.name,
|
||||||
|
leaf: props.isPressLevelSetLeaf
|
||||||
|
? node.level >= props.level
|
||||||
|
: item.hasChildren === 0,
|
||||||
|
};
|
||||||
|
})
|
||||||
|
);
|
||||||
|
},
|
||||||
|
value: "bianma",
|
||||||
|
id: "dictionariesId",
|
||||||
|
label: "name",
|
||||||
|
children: "children",
|
||||||
|
checkStrictly: props.checkStrictly,
|
||||||
|
};
|
||||||
|
const change = () => {
|
||||||
|
name.value = getCheckedNodes()[0].pathLabels;
|
||||||
|
};
|
||||||
|
const getCheckedNodes = () => {
|
||||||
|
return cascaderRef.value.getCheckedNodes();
|
||||||
|
};
|
||||||
|
defineExpose({
|
||||||
|
getCheckedNodes,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
|
|
@ -0,0 +1,71 @@
|
||||||
|
<template>
|
||||||
|
<el-col :span="24">
|
||||||
|
<div style="display: flex">
|
||||||
|
<el-form-item
|
||||||
|
label="经度"
|
||||||
|
:prop="longitudeProps"
|
||||||
|
:rules="longitudeRules"
|
||||||
|
style="flex: 1"
|
||||||
|
>
|
||||||
|
<el-input :model-value="longitude" disabled />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item
|
||||||
|
label="纬度"
|
||||||
|
:prop="latitudeProps"
|
||||||
|
:rules="latitudeRules"
|
||||||
|
style="flex: 1"
|
||||||
|
>
|
||||||
|
<el-input :model-value="latitude" disabled />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item v-if="!disabled" label-width="10px">
|
||||||
|
<el-button class="ml-10" type="primary" @click="mapVisible = true">
|
||||||
|
点击定位
|
||||||
|
</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<app-map
|
||||||
|
v-model:visible="mapVisible"
|
||||||
|
v-model:longitude="longitude"
|
||||||
|
v-model:latitude="latitude"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from "vue";
|
||||||
|
import AppMap from "@/components/map/map.vue";
|
||||||
|
|
||||||
|
defineProps({
|
||||||
|
longitudeProps: {
|
||||||
|
type: String,
|
||||||
|
default: "LONGITUDE",
|
||||||
|
},
|
||||||
|
latitudeProps: {
|
||||||
|
type: String,
|
||||||
|
default: "LATITUDE",
|
||||||
|
},
|
||||||
|
longitudeRules: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({}),
|
||||||
|
},
|
||||||
|
latitudeRules: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({}),
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const longitude = defineModel("longitude", {
|
||||||
|
type: [String, Number],
|
||||||
|
required: true,
|
||||||
|
});
|
||||||
|
const latitude = defineModel("latitude", {
|
||||||
|
type: [String, Number],
|
||||||
|
required: true,
|
||||||
|
});
|
||||||
|
const mapVisible = ref(false);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss"></style>
|
||||||
|
|
@ -0,0 +1,131 @@
|
||||||
|
<template>
|
||||||
|
<el-dialog v-model="visible" title="编辑坐标">
|
||||||
|
<el-form label-position="right" label-width="100px">
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="关键字搜索">
|
||||||
|
<el-input v-model="localSearch" clearable />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label-width="10px">
|
||||||
|
<el-button type="primary" @click="fnLocalSearch">搜索</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="坐标">
|
||||||
|
<el-input disabled :model-value="currentLongitude || longitude" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label-width="10px">
|
||||||
|
<el-input disabled :model-value="currentLatitude || latitude" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-form>
|
||||||
|
<div
|
||||||
|
v-loading="loading"
|
||||||
|
element-loading-text="地图正在加载中..."
|
||||||
|
element-loading-background="rgba(0, 0, 0, 0.5)"
|
||||||
|
>
|
||||||
|
<div id="map_container" style="width: 100%; height: 500px" />
|
||||||
|
</div>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="fnClose">关闭</el-button>
|
||||||
|
<el-button type="primary" @click="fnConfirm"> 确定 </el-button>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { nextTick, ref, watch } from "vue";
|
||||||
|
|
||||||
|
defineOptions({
|
||||||
|
name: "AppMap",
|
||||||
|
});
|
||||||
|
let mapInstance;
|
||||||
|
const visible = defineModel("visible", { type: Boolean, required: true });
|
||||||
|
const longitude = defineModel("longitude", {
|
||||||
|
type: [Number, String],
|
||||||
|
required: true,
|
||||||
|
});
|
||||||
|
const latitude = defineModel("latitude", {
|
||||||
|
type: [Number, String],
|
||||||
|
required: true,
|
||||||
|
});
|
||||||
|
const loading = ref(false);
|
||||||
|
const currentLongitude = ref("");
|
||||||
|
const currentLatitude = ref("");
|
||||||
|
const localSearch = ref("");
|
||||||
|
const emits = defineEmits(["submit"]);
|
||||||
|
const fnMapInit = async () => {
|
||||||
|
loading.value = true;
|
||||||
|
await nextTick();
|
||||||
|
mapInstance = new window.BMapGL.Map("map_container");
|
||||||
|
mapInstance.centerAndZoom(
|
||||||
|
new window.BMapGL.Point(
|
||||||
|
longitude.value || "116.3972282409668",
|
||||||
|
latitude.value || "39.90960456049752"
|
||||||
|
),
|
||||||
|
16
|
||||||
|
);
|
||||||
|
mapInstance.enableScrollWheelZoom(true);
|
||||||
|
loading.value = false;
|
||||||
|
if (longitude.value && latitude.value) {
|
||||||
|
const point = new window.BMapGL.Point(longitude.value, latitude.value);
|
||||||
|
const marker = new window.BMapGL.Marker(point);
|
||||||
|
mapInstance.addOverlay(marker);
|
||||||
|
}
|
||||||
|
mapInstance.addEventListener("click", function (event) {
|
||||||
|
mapInstance.clearOverlays();
|
||||||
|
const point = new window.BMapGL.Point(event.latlng.lng, event.latlng.lat);
|
||||||
|
const marker = new window.BMapGL.Marker(point);
|
||||||
|
mapInstance.addOverlay(marker);
|
||||||
|
currentLatitude.value = event.latlng.lat;
|
||||||
|
currentLongitude.value = event.latlng.lng;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const fnLocalSearch = () => {
|
||||||
|
if (localSearch.value) {
|
||||||
|
const local = new window.BMapGL.LocalSearch(mapInstance, {
|
||||||
|
renderOptions: { map: mapInstance },
|
||||||
|
});
|
||||||
|
local.search(localSearch.value);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const fnClose = () => {
|
||||||
|
if (mapInstance) {
|
||||||
|
mapInstance.destroy();
|
||||||
|
mapInstance = null;
|
||||||
|
}
|
||||||
|
currentLatitude.value = "";
|
||||||
|
currentLongitude.value = "";
|
||||||
|
localSearch.value = "";
|
||||||
|
visible.value = false;
|
||||||
|
};
|
||||||
|
const fnConfirm = () => {
|
||||||
|
latitude.value = currentLatitude.value;
|
||||||
|
longitude.value = currentLongitude.value;
|
||||||
|
emits("submit", {
|
||||||
|
latitude: currentLatitude.value,
|
||||||
|
longitude: currentLongitude.value,
|
||||||
|
});
|
||||||
|
fnClose();
|
||||||
|
};
|
||||||
|
watch(
|
||||||
|
() => visible.value,
|
||||||
|
(val) => {
|
||||||
|
if (val && !mapInstance) {
|
||||||
|
fnMapInit();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
immediate: true,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss"></style>
|
||||||
|
|
@ -0,0 +1,37 @@
|
||||||
|
<template>
|
||||||
|
<el-pagination
|
||||||
|
small
|
||||||
|
:current-page="pagination.currentPage || 1"
|
||||||
|
:page-size="pagination.pageSize || 10"
|
||||||
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
|
:total="pagination.total || 0"
|
||||||
|
@update:current-page="handleCurrentChange"
|
||||||
|
@update:page-size="handleSizeChange"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
defineOptions({
|
||||||
|
name: "AppPagination",
|
||||||
|
});
|
||||||
|
const emits = defineEmits(["get-data"]);
|
||||||
|
const pagination = defineModel("pagination", { type: Object, required: true });
|
||||||
|
const handleCurrentChange = (val) => {
|
||||||
|
pagination.value = {
|
||||||
|
currentPage: val,
|
||||||
|
pageSize: pagination.value.pageSize,
|
||||||
|
total: pagination.value.total,
|
||||||
|
};
|
||||||
|
emits("get-data");
|
||||||
|
};
|
||||||
|
const handleSizeChange = (val) => {
|
||||||
|
pagination.value = {
|
||||||
|
currentPage: 1,
|
||||||
|
pageSize: val,
|
||||||
|
total: pagination.value.total,
|
||||||
|
};
|
||||||
|
emits("get-data");
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss"></style>
|
||||||
|
|
@ -0,0 +1,62 @@
|
||||||
|
<template>
|
||||||
|
<el-form
|
||||||
|
:model="modelValue"
|
||||||
|
:label-width="labelWidth"
|
||||||
|
@submit.prevent="emits('submit', 'search')"
|
||||||
|
>
|
||||||
|
<el-row :class="className">
|
||||||
|
<slot :collapse="collapse"></slot>
|
||||||
|
<el-col :span="showCollapseButton ? (collapse ? 6 : span) : span">
|
||||||
|
<el-form-item label-width="10px" class="end">
|
||||||
|
<el-button type="primary" native-type="submit"> 搜索 </el-button>
|
||||||
|
<el-button native-type="reset" @click="emits('submit', 'reset')">
|
||||||
|
重置
|
||||||
|
</el-button>
|
||||||
|
<app-search-collapse-button
|
||||||
|
v-if="showCollapseButton"
|
||||||
|
:change-search-collapse="changeSearchCollapse"
|
||||||
|
:collapse="collapse"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col v-if="slots.button" :span="24">
|
||||||
|
<el-form-item label-width="0">
|
||||||
|
<slot name="button"></slot>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-form>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import AppSearchCollapseButton from "@/components/search_collapse_button/index.vue";
|
||||||
|
import useSearchCollapse from "@/hooks/useSearchCollapse.js";
|
||||||
|
import { onMounted, ref, useSlots } from "vue";
|
||||||
|
import { uniqueId } from "lodash-es";
|
||||||
|
|
||||||
|
const slots = useSlots();
|
||||||
|
const { collapse, changeSearchCollapse } = useSearchCollapse();
|
||||||
|
defineOptions({
|
||||||
|
name: "AppSearch",
|
||||||
|
});
|
||||||
|
defineProps({
|
||||||
|
labelWidth: {
|
||||||
|
type: String,
|
||||||
|
default: "100px",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const className = ref(uniqueId("_"));
|
||||||
|
const span = ref(6);
|
||||||
|
const showCollapseButton = ref(false);
|
||||||
|
const modelValue = defineModel({ type: Object, required: true });
|
||||||
|
const emits = defineEmits(["submit"]);
|
||||||
|
onMounted(() => {
|
||||||
|
const colEl = document.querySelectorAll(`.${className.value} .el-col`);
|
||||||
|
const colElLength = colEl.length;
|
||||||
|
const excludeLast = colElLength - (slots.button ? 2 : 1);
|
||||||
|
span.value = { 0: 24, 1: 18, 2: 12, 3: 6 }[excludeLast % 4];
|
||||||
|
showCollapseButton.value = excludeLast > 3;
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss"></style>
|
||||||
|
|
@ -0,0 +1,42 @@
|
||||||
|
<template>
|
||||||
|
<el-button
|
||||||
|
v-if="collapse"
|
||||||
|
:icon="ArrowDown"
|
||||||
|
link
|
||||||
|
text
|
||||||
|
type="primary"
|
||||||
|
@click="changeSearchCollapse"
|
||||||
|
>
|
||||||
|
展开
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
v-if="!collapse"
|
||||||
|
:icon="ArrowUp"
|
||||||
|
link
|
||||||
|
text
|
||||||
|
type="primary"
|
||||||
|
@click="changeSearchCollapse"
|
||||||
|
>
|
||||||
|
收起
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ArrowDown, ArrowUp } from "@element-plus/icons-vue";
|
||||||
|
|
||||||
|
defineOptions({
|
||||||
|
name: "AppSearchCollapseButton",
|
||||||
|
});
|
||||||
|
defineProps({
|
||||||
|
collapse: {
|
||||||
|
type: Boolean,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
changeSearchCollapse: {
|
||||||
|
type: Function,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss"></style>
|
||||||
|
|
@ -0,0 +1,196 @@
|
||||||
|
<template>
|
||||||
|
<el-table
|
||||||
|
ref="tableRef"
|
||||||
|
size="small"
|
||||||
|
:data="data"
|
||||||
|
:border="border"
|
||||||
|
:stripe="stripe"
|
||||||
|
:height="height"
|
||||||
|
:max-height="maxHeight"
|
||||||
|
:highlight-current-row="highlightCurrentRow"
|
||||||
|
:row-key="getRowKey"
|
||||||
|
:row-class-name="rowClassName"
|
||||||
|
:row-style="rowStyle"
|
||||||
|
:show-header="showHeader"
|
||||||
|
:show-summary="showSummary"
|
||||||
|
:summary-method="summaryMethod"
|
||||||
|
:span-method="spanMethod"
|
||||||
|
:default-expand-all="defaultExpandAll"
|
||||||
|
:tree-props="treeProps"
|
||||||
|
:header-cell-style="headerCellStyle"
|
||||||
|
:cell-style="cellStyle"
|
||||||
|
:show-overflow-tooltip="showOverflowTooltip"
|
||||||
|
style="width: 100%"
|
||||||
|
@row-click="rowClick"
|
||||||
|
@row-dblclick="rowDblclick"
|
||||||
|
>
|
||||||
|
<el-table-column
|
||||||
|
v-if="showSelection"
|
||||||
|
type="selection"
|
||||||
|
:selectable="selectable"
|
||||||
|
reserve-selection
|
||||||
|
width="60"
|
||||||
|
:show-overflow-tooltip="false"
|
||||||
|
/>
|
||||||
|
<template v-if="showIndex">
|
||||||
|
<el-table-column v-if="showPagination" label="序号" width="60">
|
||||||
|
<template #default="{ $index }">
|
||||||
|
{{ serialNumber(pagination, $index) }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
v-if="!showPagination"
|
||||||
|
label="序号"
|
||||||
|
width="60"
|
||||||
|
type="index"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<slot></slot>
|
||||||
|
</el-table>
|
||||||
|
<div v-if="showPagination || slots.button" class="table_footer">
|
||||||
|
<div>
|
||||||
|
<slot name="button"></slot>
|
||||||
|
</div>
|
||||||
|
<app-pagination
|
||||||
|
v-if="showPagination"
|
||||||
|
v-model:pagination="pagination"
|
||||||
|
@get-data="emits('get-data')"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { useSlots, ref } from "vue";
|
||||||
|
import AppPagination from "@/components/pagination/index.vue";
|
||||||
|
import { serialNumber } from "@/assets/js/utils.js";
|
||||||
|
|
||||||
|
const slots = useSlots();
|
||||||
|
defineOptions({
|
||||||
|
name: "AppTable",
|
||||||
|
});
|
||||||
|
const props = defineProps({
|
||||||
|
data: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
showPagination: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
showIndex: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
showSelection: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
stripe: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
border: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
showHeader: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
highlightCurrentRow: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
showSummary: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
defaultExpandAll: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
rowKey: {
|
||||||
|
type: [String, Function],
|
||||||
|
},
|
||||||
|
maxHeight: {
|
||||||
|
type: [String, Number],
|
||||||
|
},
|
||||||
|
height: {
|
||||||
|
type: [String, Number],
|
||||||
|
},
|
||||||
|
rowClassName: {
|
||||||
|
type: Function,
|
||||||
|
},
|
||||||
|
rowStyle: {
|
||||||
|
type: Function,
|
||||||
|
},
|
||||||
|
summaryMethod: {
|
||||||
|
type: Function,
|
||||||
|
},
|
||||||
|
spanMethod: {
|
||||||
|
type: Function,
|
||||||
|
},
|
||||||
|
selectable: {
|
||||||
|
type: Function,
|
||||||
|
},
|
||||||
|
treeProps: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({ hasChildren: "hasChildren", children: "children" }),
|
||||||
|
},
|
||||||
|
headerCellStyle: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({}),
|
||||||
|
},
|
||||||
|
cellStyle: {
|
||||||
|
type: [Object, Function],
|
||||||
|
default: () => ({}),
|
||||||
|
},
|
||||||
|
showOverflowTooltip: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const pagination = defineModel("pagination", {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({
|
||||||
|
currentPage: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
total: 0,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
const emits = defineEmits(["get-data", "row-click", "row-dblclick"]);
|
||||||
|
const tableRef = ref(null);
|
||||||
|
const getRowKey = (row) => {
|
||||||
|
if (!props.rowKey) return;
|
||||||
|
if (typeof props.rowKey === "string") return row[props.rowKey];
|
||||||
|
else return props.rowKey(row);
|
||||||
|
};
|
||||||
|
const rowClick = (row, column, event) => {
|
||||||
|
emits("row-click", row, column, event);
|
||||||
|
};
|
||||||
|
const rowDblclick = (row, column, event) => {
|
||||||
|
emits("row-dblclick", row, column, event);
|
||||||
|
};
|
||||||
|
const getSelectionRows = () => {
|
||||||
|
return tableRef.value.getSelectionRows();
|
||||||
|
};
|
||||||
|
const clearSelection = () => {
|
||||||
|
return tableRef.value.clearSelection();
|
||||||
|
};
|
||||||
|
const toggleRowSelection = (value, selected = true) => {
|
||||||
|
tableRef.value.toggleRowSelection(value, selected);
|
||||||
|
};
|
||||||
|
defineExpose({
|
||||||
|
getSelectionRows,
|
||||||
|
clearSelection,
|
||||||
|
toggleRowSelection,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.table_footer {
|
||||||
|
margin-top: 20px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,160 @@
|
||||||
|
import { nextTick, ref } from "vue";
|
||||||
|
import { getDataType } from "@/assets/js/utils.js";
|
||||||
|
import {
|
||||||
|
getQueryCriteria,
|
||||||
|
setQueryCriteria,
|
||||||
|
} from "@/hooks/useQueryCriteria.js";
|
||||||
|
|
||||||
|
const verificationParameter = (api, options) => {
|
||||||
|
if (getDataType(api) !== "Function") throw new Error("api必须是一个函数");
|
||||||
|
if (getDataType(options) !== "Object")
|
||||||
|
throw new Error("options必须是一个对象");
|
||||||
|
if (options.immediate && getDataType(options.immediate) !== "Boolean")
|
||||||
|
throw new Error("options.immediate必须是一个布尔值");
|
||||||
|
if (options.usePagination && getDataType(options.usePagination) !== "Boolean")
|
||||||
|
throw new Error("options.usePagination必须是一个布尔值");
|
||||||
|
if (options.key && getDataType(options.key) !== "String")
|
||||||
|
throw new Error("options.key必须是一个字符串");
|
||||||
|
if (
|
||||||
|
options.callback &&
|
||||||
|
getDataType(options.callback) !== "Function" &&
|
||||||
|
getDataType(options.callback) !== "AsyncFunction"
|
||||||
|
)
|
||||||
|
throw new Error("options.callback必须是一个函数");
|
||||||
|
if (
|
||||||
|
options.beforeGetData &&
|
||||||
|
getDataType(options.beforeGetData) !== "Function" &&
|
||||||
|
getDataType(options.beforeGetData) !== "AsyncFunction"
|
||||||
|
)
|
||||||
|
throw new Error("options.beforeGetData必须是一个函数");
|
||||||
|
if (
|
||||||
|
options.defaultSearchForm &&
|
||||||
|
getDataType(options.defaultSearchForm) !== "Object"
|
||||||
|
)
|
||||||
|
throw new Error("options.defaultSearchForm必须是一个对象");
|
||||||
|
if (
|
||||||
|
options.clearSelection &&
|
||||||
|
getDataType(options.clearSelection) !== "Boolean"
|
||||||
|
)
|
||||||
|
throw new Error("options.clearSelection必须是一个布尔值");
|
||||||
|
if (
|
||||||
|
options.params &&
|
||||||
|
getDataType(options.params) !== "Object" &&
|
||||||
|
getDataType(options.params) !== "Function"
|
||||||
|
)
|
||||||
|
throw new Error("options.params必须是一个对象或者一个函数");
|
||||||
|
if (
|
||||||
|
options.isStorageQueryCriteria &&
|
||||||
|
getDataType(options.isStorageQueryCriteria) !== "Boolean"
|
||||||
|
)
|
||||||
|
throw new Error("options.isStorageQueryCriteria必须是一个布尔值");
|
||||||
|
if (
|
||||||
|
options.tabsActiveName &&
|
||||||
|
getDataType(options.tabsActiveName) !== "String"
|
||||||
|
)
|
||||||
|
throw new Error("options.tabsActiveName必须是一个字符串");
|
||||||
|
};
|
||||||
|
|
||||||
|
const getOptionParams = (params) => {
|
||||||
|
if (params) {
|
||||||
|
if (getDataType(params) === "Object") return params;
|
||||||
|
const paramsValue = params();
|
||||||
|
if (getDataType(paramsValue) !== "Object")
|
||||||
|
throw new Error("options.params为函数时必须存在返回值并且必须是一个对象");
|
||||||
|
else return paramsValue;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param api {Function} 接口函数
|
||||||
|
* @param options {Object?: {callback, params, defaultSearchForm, immediate, usePagination, key, beforeGetData}} 配置项
|
||||||
|
* @param options.callback {Function?} 回调函数（返回值【第一个参数表格数据，第二个参数后台返回的所有数据】）
|
||||||
|
* @param options.beforeGetData {Function?} 调用请求之前（返回值【第一个参数searchForm搜索表单数据】）
|
||||||
|
* @param options.params {(Object | Function)?} 其它接口参数
|
||||||
|
* @param options.defaultSearchForm {Object?} searchForm默认值
|
||||||
|
* @param options.immediate {Boolean?} 是否立即执行接口函数（默认是）
|
||||||
|
* @param options.usePagination {Boolean?} 是否使用分页（默认是）
|
||||||
|
* @param options.clearSelection {Boolean?} 调用resetPagination时是否清空表格选择数据（默认是）
|
||||||
|
* @param options.key {String?} 返回的存放数组的key（默认list）
|
||||||
|
* @param options.isStorageQueryCriteria {Boolean?} 是否保存查询条件（默认是）
|
||||||
|
* @param options.tabsActiveName {String?} 存在tabs组件时，当前tabs的activeName，用于缓存查询条件
|
||||||
|
* @return {Object} 返回对象包含以下属性：list 表格数据，pagination 分页数据，searchForm 搜索表单数据，tableRef 表格实例，getData 获取数据函数，resetPagination 重置分页函数
|
||||||
|
*/
|
||||||
|
|
||||||
|
export default function useListData(api, options = {}) {
|
||||||
|
verificationParameter(api, options);
|
||||||
|
const immediate = options.immediate ?? true;
|
||||||
|
const usePagination = options.usePagination ?? true;
|
||||||
|
const key = options.key ?? "list";
|
||||||
|
const defaultSearchForm = options.defaultSearchForm ?? {};
|
||||||
|
const clearSelection = options.clearSelection ?? true;
|
||||||
|
const isStorageQueryCriteria = options.isStorageQueryCriteria ?? true;
|
||||||
|
const defaultPagination = { currentPage: 1, pageSize: 10, total: 0 };
|
||||||
|
const list = ref([]);
|
||||||
|
const queryCriteria = getQueryCriteria();
|
||||||
|
const pagination = ref(queryCriteria.pagination || defaultPagination);
|
||||||
|
const searchForm = ref(JSON.parse(JSON.stringify(defaultSearchForm)));
|
||||||
|
let beforeGetDataParams = {};
|
||||||
|
const tableRef = ref(null);
|
||||||
|
const getData = async (params = {}) => {
|
||||||
|
if (options.beforeGetData) {
|
||||||
|
beforeGetDataParams = JSON.parse(
|
||||||
|
JSON.stringify(queryCriteria.searchForm || searchForm.value)
|
||||||
|
);
|
||||||
|
options.beforeGetData(beforeGetDataParams);
|
||||||
|
}
|
||||||
|
const resData = await api({
|
||||||
|
...(usePagination
|
||||||
|
? {
|
||||||
|
curPage: pagination.value.currentPage,
|
||||||
|
limit: pagination.value.pageSize,
|
||||||
|
}
|
||||||
|
: {}),
|
||||||
|
...searchForm.value,
|
||||||
|
...beforeGetDataParams,
|
||||||
|
...(queryCriteria.searchForm || {}),
|
||||||
|
...(getOptionParams(options.params) || {}),
|
||||||
|
...(getDataType(params) === "Object" ? params : {}),
|
||||||
|
});
|
||||||
|
if (usePagination) list.value = resData.page[key];
|
||||||
|
else list.value = resData[key];
|
||||||
|
if (usePagination) pagination.value.total = resData.page.totalCount;
|
||||||
|
options.callback && options.callback(list.value, resData);
|
||||||
|
!usePagination &&
|
||||||
|
clearSelection &&
|
||||||
|
tableRef.value &&
|
||||||
|
tableRef.value.clearSelection();
|
||||||
|
if (isStorageQueryCriteria) {
|
||||||
|
setQueryCriteria({
|
||||||
|
searchForm: {
|
||||||
|
...(queryCriteria.searchForm || {}),
|
||||||
|
...searchForm.value,
|
||||||
|
},
|
||||||
|
pagination: pagination.value,
|
||||||
|
tabsActiveName: options.tabsActiveName,
|
||||||
|
});
|
||||||
|
await nextTick();
|
||||||
|
searchForm.value = queryCriteria.searchForm || searchForm.value;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
immediate && getData().then();
|
||||||
|
const resetPagination = async (params) => {
|
||||||
|
list.value = [];
|
||||||
|
pagination.value = defaultPagination;
|
||||||
|
await nextTick();
|
||||||
|
await getData(params);
|
||||||
|
clearSelection && tableRef.value && tableRef.value.clearSelection();
|
||||||
|
const cloneSearchForm = searchForm.value;
|
||||||
|
searchForm.value = {};
|
||||||
|
await nextTick();
|
||||||
|
searchForm.value = cloneSearchForm;
|
||||||
|
};
|
||||||
|
return {
|
||||||
|
list,
|
||||||
|
pagination,
|
||||||
|
searchForm,
|
||||||
|
tableRef,
|
||||||
|
getData: async (params) => await getData(params),
|
||||||
|
resetPagination: async (params) => await resetPagination(params),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
import { ref } from "vue";
|
||||||
|
|
||||||
|
const useSearchCollapse = () => {
|
||||||
|
const collapse = ref(true);
|
||||||
|
const changeSearchCollapse = () => {
|
||||||
|
collapse.value = !collapse.value;
|
||||||
|
};
|
||||||
|
return {
|
||||||
|
collapse,
|
||||||
|
changeSearchCollapse,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
export default useSearchCollapse;
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
import { createApp } from "vue";
|
import { createApp } from "vue";
|
||||||
import "@/assets/css/common.scss";
|
import "@/assets/css/common.scss";
|
||||||
import "@/assets/css/transition.scss";
|
import "@/assets/css/transition.scss";
|
||||||
|
import "@/assets/css/element.scss";
|
||||||
import "dayjs/locale/zh-cn";
|
import "dayjs/locale/zh-cn";
|
||||||
import App from "./App";
|
import App from "./App";
|
||||||
import pinia from "./pinia";
|
import pinia from "./pinia";
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@ import router from "../router";
|
||||||
import pinia from "../pinia";
|
import pinia from "../pinia";
|
||||||
import { useUserStore } from "@/pinia/user.js";
|
import { useUserStore } from "@/pinia/user.js";
|
||||||
import refreshToken from "@/assets/js/refreshToken.js";
|
import refreshToken from "@/assets/js/refreshToken.js";
|
||||||
import { getBaseUrl } from "@/assets/js/utils.js";
|
import { getDataType } from "@/assets/js/utils.js";
|
||||||
|
|
||||||
let loading = null;
|
let loading = null;
|
||||||
let isTipTokenFailure = false;
|
let isTipTokenFailure = false;
|
||||||
|
|
@ -20,10 +20,16 @@ function endLoading() {
|
||||||
loading && loading.close();
|
loading && loading.close();
|
||||||
}
|
}
|
||||||
|
|
||||||
axios.defaults.baseURL = getBaseUrl();
|
const request = axios.create({
|
||||||
axios.defaults.timeout = 1000 * 60 * 10;
|
baseURL: import.meta.env.VITE_BASE_URL,
|
||||||
|
timeout: 1000 * 60 * 10,
|
||||||
|
// headers: {
|
||||||
|
// 'Content-type': 'application/x-www-form-urlencoded;charset=UTF-8'
|
||||||
|
// }
|
||||||
|
});
|
||||||
|
|
||||||
// axios.defaults.withCredentials = true;
|
// axios.defaults.withCredentials = true;
|
||||||
axios.interceptors.request.use(
|
request.interceptors.request.use(
|
||||||
async (config) => {
|
async (config) => {
|
||||||
const userStore = useUserStore(pinia);
|
const userStore = useUserStore(pinia);
|
||||||
config.headers.Token = userStore.getToken;
|
config.headers.Token = userStore.getToken;
|
||||||
|
|
@ -38,13 +44,13 @@ axios.interceptors.request.use(
|
||||||
(error) => Promise.reject(error)
|
(error) => Promise.reject(error)
|
||||||
);
|
);
|
||||||
|
|
||||||
axios.interceptors.response.use(
|
request.interceptors.response.use(
|
||||||
(config) => {
|
(config) => {
|
||||||
if (config.config.method === "get" || config.config.method === "GET") {
|
if (config.config.method === "get" || config.config.method === "GET") {
|
||||||
if (config.config.params.loading !== false) endLoading();
|
if (config.config.params.loading !== false) endLoading();
|
||||||
}
|
}
|
||||||
if (config.config.method === "post" || config.config.method === "POST") {
|
if (config.config.method === "post" || config.config.method === "POST") {
|
||||||
if (config.config.headers["Content-Type"] === "multipart/form-data") {
|
if (getDataType(config.config.data) === "FormData") {
|
||||||
endLoading();
|
endLoading();
|
||||||
} else {
|
} else {
|
||||||
if (JSON.parse(config.config.data)?.loading !== false) endLoading();
|
if (JSON.parse(config.config.data)?.loading !== false) endLoading();
|
||||||
|
|
@ -53,7 +59,7 @@ axios.interceptors.response.use(
|
||||||
if (config.data.code === 401) {
|
if (config.data.code === 401) {
|
||||||
if (!isTipTokenFailure) {
|
if (!isTipTokenFailure) {
|
||||||
isTipTokenFailure = true;
|
isTipTokenFailure = true;
|
||||||
ElMessage.error("登录失效，请重新登录");
|
ElMessage.error("登录失效，请重新登陆");
|
||||||
router.push("/login").then();
|
router.push("/login").then();
|
||||||
isTipTokenFailure = false;
|
isTipTokenFailure = false;
|
||||||
}
|
}
|
||||||
|
|
@ -76,10 +82,10 @@ axios.interceptors.response.use(
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
export function post(url, params = {}) {
|
export function post(url, params) {
|
||||||
const userStore = useUserStore(pinia);
|
const userStore = useUserStore(pinia);
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
axios
|
request
|
||||||
.post(url, {
|
.post(url, {
|
||||||
corpinfoId: userStore.getUserInfo.corpinfoId,
|
corpinfoId: userStore.getUserInfo.corpinfoId,
|
||||||
userId: userStore.getUserInfo.userId,
|
userId: userStore.getUserInfo.userId,
|
||||||
|
|
@ -99,16 +105,14 @@ export function post(url, params = {}) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
export function get(url, params = {}) {
|
export function get(url, params) {
|
||||||
const userStore = useUserStore(pinia);
|
const userStore = useUserStore(pinia);
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
axios
|
request
|
||||||
.get(url, {
|
.get(url, {
|
||||||
params: {
|
corpinfoId: userStore.getUserInfo.corpinfoId,
|
||||||
corpinfoId: userStore.getUserInfo.corpinfoId,
|
userId: userStore.getUserInfo.userId,
|
||||||
userId: userStore.getUserInfo.userId,
|
...params,
|
||||||
...params,
|
|
||||||
},
|
|
||||||
})
|
})
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
if (res.data.result === "success") {
|
if (res.data.result === "success") {
|
||||||
|
|
@ -124,9 +128,9 @@ export function get(url, params = {}) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
export function upload(url, params = {}) {
|
export function upload(url, params) {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
axios
|
request
|
||||||
.post(url, params, {
|
.post(url, params, {
|
||||||
headers: {
|
headers: {
|
||||||
"Content-Type": "multipart/form-data",
|
"Content-Type": "multipart/form-data",
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
import { post } from "./axios";
|
||||||
|
|
||||||
|
// 获取部门
|
||||||
|
export const getDepartmentTree = (parentId = "0") =>
|
||||||
|
post("/oa/department/getTree", {
|
||||||
|
loading: false,
|
||||||
|
parentId,
|
||||||
|
});
|
||||||
|
// 获取数据字典
|
||||||
|
export const getDataDictionary = (params) =>
|
||||||
|
post("/sys/dictionaries/list", {
|
||||||
|
loading: false,
|
||||||
|
...params,
|
||||||
|
});
|
||||||
|
// 获取数据字典树
|
||||||
|
export const getDataDictionaryTree = (params) =>
|
||||||
|
post("/sys/dictionaries/listTree", {
|
||||||
|
loading: false,
|
||||||
|
...params,
|
||||||
|
});
|
||||||
|
|
||||||
|
|
@ -0,0 +1,91 @@
|
||||||
|
import { post } from "./axios";
|
||||||
|
|
||||||
|
/*
|
||||||
|
* 应急储备库信息表
|
||||||
|
*/
|
||||||
|
export const getEmergencyStoragePage = (params) =>
|
||||||
|
post("/busEmergencyStorage/listPage", params); // 获取应急储备库信息表
|
||||||
|
export const setEmergencyStorageDelete = (params) =>
|
||||||
|
post("/busEmergencyStorage/delete", params); // 获取应急储备库信息表
|
||||||
|
export const setEmergencyStorageAdd = (params) =>
|
||||||
|
post("/busEmergencyStorage/save", params);
|
||||||
|
export const setEmergencyStorageUpdate = (params) =>
|
||||||
|
post("/busEmergencyStorage/update", params);
|
||||||
|
|
||||||
|
/*
|
||||||
|
* 山洪村信息
|
||||||
|
*/
|
||||||
|
export const getMountainFloodVillagePage = (params) =>
|
||||||
|
post("/busMountainFloodVillage/listPage", params); // 获取山洪村信息表
|
||||||
|
export const setMountainFloodVillageDelete = (params) =>
|
||||||
|
post("/busMountainFloodVillage/delete", params);
|
||||||
|
export const setMountainFloodVillageAdd = (params) =>
|
||||||
|
post("/busMountainFloodVillage/save", params);
|
||||||
|
export const setMountainFloodVillageUpdate = (params) =>
|
||||||
|
post("/busMountainFloodVillage/update", params);
|
||||||
|
|
||||||
|
/*
|
||||||
|
*城市防涝点
|
||||||
|
*/
|
||||||
|
export const getUrbanFloodPointPage = (params) =>
|
||||||
|
post("/busUrbanFloodPoint/listPage", params);
|
||||||
|
export const setUrbanFloodPointDelete = (params) =>
|
||||||
|
post("/busUrbanFloodPoint/delete", params);
|
||||||
|
export const setUrbanFloodPointAdd = (params) =>
|
||||||
|
post("/busUrbanFloodPoint/save", params);
|
||||||
|
export const setUrbanFloodPointUpdate = (params) =>
|
||||||
|
post("/busUrbanFloodPoint/update", params);
|
||||||
|
|
||||||
|
/*
|
||||||
|
*地质灾害点信息
|
||||||
|
*/
|
||||||
|
export const getGeologicalDisasterPage = (params) =>
|
||||||
|
post("/busGeologicalDisaster/listPage", params);
|
||||||
|
export const setGeologicalDisasterDelete = (params) =>
|
||||||
|
post("/busGeologicalDisaster/delete", params);
|
||||||
|
export const setGeologicalDisasterAdd = (params) =>
|
||||||
|
post("/busGeologicalDisaster/save", params);
|
||||||
|
export const setGeologicalDisasterUpdate = (params) =>
|
||||||
|
post("/busGeologicalDisaster/update", params);
|
||||||
|
|
||||||
|
/*
|
||||||
|
* 水库信息BusReservoirBasicEntity
|
||||||
|
*/
|
||||||
|
export const getReservoirBasicPage = (params) =>
|
||||||
|
post("/busReservoirBasic/listPage", params);
|
||||||
|
export const setReservoirBasicDelete = (params) =>
|
||||||
|
post("/busReservoirBasic/delete", params);
|
||||||
|
export const setReservoirBasicAdd = (params) =>
|
||||||
|
post("/busReservoirBasic/save", params);
|
||||||
|
export const setReservoirBasicUpdate = (params) =>
|
||||||
|
post("/busReservoirBasic/update", params);
|
||||||
|
|
||||||
|
/*
|
||||||
|
* 河流 BusRiverEntity
|
||||||
|
*/
|
||||||
|
export const getRiverPage = (params) => post("/busRiver/listPage", params);
|
||||||
|
export const setRiverDelete = (params) => post("/busRiver/delete", params);
|
||||||
|
export const setRiverAdd = (params) => post("/busRiver/save", params);
|
||||||
|
export const setRiverUpdate = (params) => post("/busRiver/update", params);
|
||||||
|
/*
|
||||||
|
* 河道行洪隐患区村庄清单 BusRiverRiskVillagesEntity
|
||||||
|
*/
|
||||||
|
export const getRiverRiskVillagePage = (params) =>
|
||||||
|
post("/busRiverRiskVillages/listPage", params);
|
||||||
|
export const setRiverRiskVillageDelete = (params) =>
|
||||||
|
post("/busRiverRiskVillages/delete", params);
|
||||||
|
export const setRiverRiskVillageAdd = (params) =>
|
||||||
|
post("/busRiverRiskVillages/save", params);
|
||||||
|
export const setRiverRiskVillageUpdate = (params) =>
|
||||||
|
post("/busRiverRiskVillages/update", params);
|
||||||
|
/*
|
||||||
|
* 河流县区段信息 BusRiverSectionsEntity
|
||||||
|
*/
|
||||||
|
export const setRiverSectionsListPage = (params) =>
|
||||||
|
post("/busRiverSections/listPage", params);
|
||||||
|
export const setRiverSectionsDelete = (params) =>
|
||||||
|
post("/busRiverSections/delete", params);
|
||||||
|
export const setRiverSectionsAdd = (params) =>
|
||||||
|
post("/busRiverSections/save", params);
|
||||||
|
export const setRiverSectionsUpdate = (params) =>
|
||||||
|
post("/busRiverSections/update", params);
|
||||||
|
|
@ -0,0 +1,47 @@
|
||||||
|
import { post } from "./axios";
|
||||||
|
|
||||||
|
export const getScheduleJobList = (params) =>
|
||||||
|
post("/sys/schedule/list", {
|
||||||
|
loading: false,
|
||||||
|
...params,
|
||||||
|
});
|
||||||
|
export const getScheduleJobInfo = (params) =>
|
||||||
|
post("/sys/schedule/info", {
|
||||||
|
loading: false,
|
||||||
|
...params,
|
||||||
|
});
|
||||||
|
export const addScheduleJob = (params) =>
|
||||||
|
post("/sys/schedule/save", {
|
||||||
|
loading: false,
|
||||||
|
...params,
|
||||||
|
});
|
||||||
|
export const updateScheduleJob = (params) =>
|
||||||
|
post("/sys/schedule/update", {
|
||||||
|
loading: false,
|
||||||
|
...params,
|
||||||
|
});
|
||||||
|
export const deleteScheduleJob = (params) =>
|
||||||
|
post("/sys/schedule/delete", {
|
||||||
|
loading: false,
|
||||||
|
...params,
|
||||||
|
});
|
||||||
|
export const pauseScheduleJob = (params) =>
|
||||||
|
post("/sys/schedule/pause", {
|
||||||
|
loading: false,
|
||||||
|
...params,
|
||||||
|
});
|
||||||
|
export const resumeScheduleJob = (params) =>
|
||||||
|
post("/sys/schedule/resume", {
|
||||||
|
loading: false,
|
||||||
|
...params,
|
||||||
|
});
|
||||||
|
export const runScheduleJob = (params) =>
|
||||||
|
post("/sys/schedule/run", {
|
||||||
|
loading: false,
|
||||||
|
...params,
|
||||||
|
});
|
||||||
|
export const getPayCode = (params) =>
|
||||||
|
post("/pay/getPayCode", {
|
||||||
|
loading: false,
|
||||||
|
...params,
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
import { post } from "@/request/axios";
|
||||||
|
|
||||||
|
export const getRoleList = (params) => post("/sys/role/listPage", params); // 角色管理列表
|
||||||
|
export const getRoleListAll = (params) => post("/sys/role/listAll", params); // 角色管理列表所有
|
||||||
|
export const setRoleDelete = (params) => post("/sys/role/delete", params); // 角色管理删除
|
||||||
|
export const setRoleAdd = (params) => post("/sys/role/save", params); // 角色管理添加
|
||||||
|
export const setRoleEdit = (params) => post("/sys/role/update", params); // 角色管理修改
|
||||||
|
export const getRoleView = (params) => post("/sys/role/info", params); // 角色管理查看
|
||||||
|
export const getDataDictionaryList = (params) =>
|
||||||
|
post("/sys/dictionaries/listPage", params); // 数据字典列表
|
||||||
|
export const setDataDictionaryDelete = (params) =>
|
||||||
|
post("/sys/dictionaries/delete", params); // 数据字典删除
|
||||||
|
export const setDataDictionaryAdd = (params) =>
|
||||||
|
post("/sys/dictionaries/save", params); // 数据字典添加
|
||||||
|
export const setDataDictionaryEdit = (params) =>
|
||||||
|
post("/sys/dictionaries/update", params); // 数据字典修改
|
||||||
|
export const getDataDictionaryInfo = (params) =>
|
||||||
|
post("/sys/dictionaries/info", params); // 数据字典查看
|
||||||
|
export const getDataDictionaryRepeat = (params) =>
|
||||||
|
post("/sys/dictionaries/findByBianma", params); // 数据字典验证编码是否重复
|
||||||
|
export const getRouteList = (params) => post("/sys/menu/list", params); // 菜单管理列表
|
||||||
|
export const getRouteView = (params) => post("/sys/menu/info", params); // 菜单管理查看
|
||||||
|
export const setRouteAdd = (params) => post("/sys/menu/save", params); // 菜单管理添加
|
||||||
|
export const setRouteEdit = (params) => post("/sys/menu/update", params); // 菜单管理修改
|
||||||
|
export const setRouteDelete = (params) => post("/sys/menu/delete", params); // 菜单管理删除
|
||||||
|
export const setRouteIcon = (params) => post("/sys/menu/icon", params); // 菜单管理修改图标
|
||||||
|
export const getLogsListPage = (params) => post("/sys/log/list", params);
|
||||||
|
|
@ -0,0 +1,28 @@
|
||||||
|
import { post, upload } from "@/request/axios";
|
||||||
|
export const getDepartmentList = (params) =>
|
||||||
|
post("/oa/department/listPage", params); // 部门管理列表
|
||||||
|
export const setDepartmentDelete = (params) =>
|
||||||
|
post("/oa/department/delete", params); // 部门管理删除
|
||||||
|
export const setDepartmentAdd = (params) => post("/oa/department/save", params); // 部门管理添加
|
||||||
|
export const setDepartmentEdit = (params) =>
|
||||||
|
post("/oa/department/update", params); // 部门管理修改
|
||||||
|
export const getDepartmentView = (params) =>
|
||||||
|
post("/oa/department/info", params); // 部门管理查看
|
||||||
|
export const getJobList = (params) => post("/oa/post/listPage", params); // 岗位管理列表
|
||||||
|
export const getJobListAll = (params) => post("/oa/post/listAll", params); // 岗位管理列表所有
|
||||||
|
export const setJobDelete = (params) => post("/oa/post/delete", params); // 岗位管理删除
|
||||||
|
export const getJobView = (params) => post("/oa/post/info", params); // 岗位管理查看
|
||||||
|
export const setJobAdd = (params) => post("/oa/post/save", params); // 岗位管理添加
|
||||||
|
export const setJobEdit = (params) => post("/oa/post/update", params); // 岗位管理修改
|
||||||
|
export const getUserList = (params) => post("/sys/user/list", params); // 用户管理列表
|
||||||
|
export const getUserListAll = (params) => post("sys/user/listAll", params); // 用户管理列表所有
|
||||||
|
export const setUserDelete = (params) => post("/sys/user/delete", params); // 用户管理删除
|
||||||
|
export const setUserResetPassword = (params) =>
|
||||||
|
post("/sys/user/resetPassword", params); // 用户管理重置密码
|
||||||
|
export const getUserView = (params) => post("/sys/user/getInfo", params); // 用户管理查看
|
||||||
|
export const getUserUserNameRepeat = (params) =>
|
||||||
|
post("/sys/user/hasUser", params); // 用户管理用户名去重
|
||||||
|
export const setUserAdd = (params) => upload("/sys/user/save", params); // 用户管理添加
|
||||||
|
export const setUserEdit = (params) => upload("/sys/user/update", params); // 用户管理修改
|
||||||
|
export const setUserExercisesImport = (params) =>
|
||||||
|
upload("/sys/user/readExcel", params); // 人员导入
|
||||||
|
|
@ -12,7 +12,7 @@ const routes = [
|
||||||
{
|
{
|
||||||
path: "/",
|
path: "/",
|
||||||
name: "app",
|
name: "app",
|
||||||
redirect: "/map",
|
redirect: "/login",
|
||||||
meta: { isLogin: true },
|
meta: { isLogin: true },
|
||||||
component: children,
|
component: children,
|
||||||
children: [
|
children: [
|
||||||
|
|
@ -49,6 +49,109 @@ const routes = [
|
||||||
meta: { title: "首页" },
|
meta: { title: "首页" },
|
||||||
component: () => import("@/views/index/index"),
|
component: () => import("@/views/index/index"),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: "/river",
|
||||||
|
name: "/river",
|
||||||
|
meta: {
|
||||||
|
title: "河流信息",
|
||||||
|
breadcrumb: true,
|
||||||
|
isMenu: true,
|
||||||
|
isSubMenu: false,
|
||||||
|
},
|
||||||
|
component: () => import("@/views/river/index"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/river/risk_village",
|
||||||
|
name: "/river/risk_village",
|
||||||
|
meta: {
|
||||||
|
title: "河道行洪隐患区村庄",
|
||||||
|
breadcrumb: true,
|
||||||
|
isMenu: false,
|
||||||
|
isSubMenu: true,
|
||||||
|
isBack: true,
|
||||||
|
activeMenu: "/river",
|
||||||
|
},
|
||||||
|
component: () => import("@/views/river/river_risk_village/index"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/river/river_section",
|
||||||
|
name: "/river/river_section",
|
||||||
|
meta: {
|
||||||
|
title: "河道流经县区",
|
||||||
|
breadcrumb: true,
|
||||||
|
isMenu: false,
|
||||||
|
isSubMenu: true,
|
||||||
|
isBack: true,
|
||||||
|
activeMenu: "/river",
|
||||||
|
},
|
||||||
|
component: () => import("@/views/river/river_section/index"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/reservoir_info",
|
||||||
|
name: "/reservoir_info",
|
||||||
|
meta: {
|
||||||
|
title: "水库信息",
|
||||||
|
breadcrumb: true,
|
||||||
|
isMenu: true,
|
||||||
|
isSubMenu: false,
|
||||||
|
},
|
||||||
|
component: () => import("@/views/reservoir_info/index"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/geological_disaster",
|
||||||
|
name: "/geological_disaster",
|
||||||
|
meta: {
|
||||||
|
title: "地质灾害点信息",
|
||||||
|
breadcrumb: true,
|
||||||
|
isMenu: true,
|
||||||
|
isSubMenu: false,
|
||||||
|
},
|
||||||
|
component: () => import("@/views/geological_disaster/index"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/urban_flood_point",
|
||||||
|
name: "/urban_flood_point",
|
||||||
|
meta: {
|
||||||
|
title: "城市防涝点详情",
|
||||||
|
breadcrumb: true,
|
||||||
|
isMenu: true,
|
||||||
|
isSubMenu: false,
|
||||||
|
},
|
||||||
|
component: () => import("@/views/urban_flood_point/index"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/mountain_flood_info",
|
||||||
|
name: "/mountain_flood_info",
|
||||||
|
meta: {
|
||||||
|
title: "山洪灾害村",
|
||||||
|
breadcrumb: true,
|
||||||
|
isMenu: true,
|
||||||
|
isSubMenu: false,
|
||||||
|
},
|
||||||
|
component: () => import("@/views/mountain_flood_info/index"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/emergency_storage",
|
||||||
|
name: "/emergency_storage",
|
||||||
|
meta: {
|
||||||
|
title: "应急储备库信息",
|
||||||
|
breadcrumb: true,
|
||||||
|
isMenu: true,
|
||||||
|
isSubMenu: false,
|
||||||
|
},
|
||||||
|
component: () => import("@/views/emergency_storage/index"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/system_management/data_dictionary",
|
||||||
|
name: "/system_management/data_dictionary",
|
||||||
|
meta: {
|
||||||
|
title: "数据字典",
|
||||||
|
breadcrumb: true,
|
||||||
|
isMenu: true,
|
||||||
|
isSubMenu: false,
|
||||||
|
},
|
||||||
|
component: () => import("@/views/system_management/data_dictionary/index"),
|
||||||
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,200 @@
|
||||||
|
<template>
|
||||||
|
<el-dialog
|
||||||
|
v-model="visible"
|
||||||
|
:title="type === 'edit' ? '修改' : '新增'"
|
||||||
|
:before-close="fnClose"
|
||||||
|
>
|
||||||
|
<el-form
|
||||||
|
ref="formRef"
|
||||||
|
:model="form"
|
||||||
|
:rules="data.rules"
|
||||||
|
label-width="100px"
|
||||||
|
style="margin-top: 20px"
|
||||||
|
>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="应急库名称" prop="storageName">
|
||||||
|
<el-input
|
||||||
|
v-model="form.storageName"
|
||||||
|
placeholder="请输入应急库名称"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="属地" prop="area">
|
||||||
|
<layout-cascader
|
||||||
|
v-model="form.area"
|
||||||
|
v-model:name="form.areaName"
|
||||||
|
:dictionaries-id="'e725d2a91b8248f4b8f49889038df7de'"
|
||||||
|
:check-strictly="false"
|
||||||
|
:level="4"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="应急库类型" prop="storageType">
|
||||||
|
<el-select
|
||||||
|
v-model="form.storageType"
|
||||||
|
placeholder="请选择应急库类型"
|
||||||
|
filterable
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in storageTypeList"
|
||||||
|
:key="item.bianma"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item.bianma"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="管理单位" prop="managementUnit">
|
||||||
|
<el-input
|
||||||
|
v-model="form.managementUnit"
|
||||||
|
placeholder="请输入应急库名称"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="24">
|
||||||
|
<div style="display: flex">
|
||||||
|
<el-form-item label="经度" prop="longitude" style="flex: 1">
|
||||||
|
<el-input v-model="form.longitude" placeholder="请选择经度" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="纬度" prop="latitude" style="flex: 1">
|
||||||
|
<el-input v-model="form.latitude" placeholder="请选择纬度" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label-width="10px">
|
||||||
|
<el-button
|
||||||
|
class="ml-10"
|
||||||
|
type="primary"
|
||||||
|
@click="fnSelectedPosition(form)"
|
||||||
|
>
|
||||||
|
点击定位
|
||||||
|
</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="fnClose">取 消</el-button>
|
||||||
|
<el-button type="primary" @click="fnSubmit">确 定</el-button>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<app-map
|
||||||
|
v-model:visible="mapDialog.visible"
|
||||||
|
v-model:longitude="mapDialog.longitude"
|
||||||
|
v-model:latitude="mapDialog.latitude"
|
||||||
|
@submit="fnMapSubmit"
|
||||||
|
/>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { debounce } from "throttle-debounce";
|
||||||
|
import useFormValidate from "@/hooks/useFormValidate.js";
|
||||||
|
import LayoutCascader from "@/components/layout_cascader/index.vue";
|
||||||
|
import { ElMessage } from "element-plus";
|
||||||
|
import { reactive, ref } from "vue";
|
||||||
|
import { useVModels } from "@vueuse/core";
|
||||||
|
import { getDataDictionary } from "@/request/data_dictionary.js";
|
||||||
|
import AppMap from "@/components/map/map.vue";
|
||||||
|
import {
|
||||||
|
setEmergencyStorageAdd,
|
||||||
|
setEmergencyStorageUpdate,
|
||||||
|
} from "@/request/kangzai.js";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
visible: {
|
||||||
|
type: Boolean,
|
||||||
|
required: true,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
form: {
|
||||||
|
type: Object,
|
||||||
|
required: true,
|
||||||
|
default: () => ({}),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const { validate, formRef } = useFormValidate();
|
||||||
|
const storageTypeList = ref([]);
|
||||||
|
const fnGetStorageTypeList = async () => {
|
||||||
|
const resData = await getDataDictionary({
|
||||||
|
parentId: "j0k1l2m3n4o5p6q7r8s9t0u1v2w3x4y",
|
||||||
|
});
|
||||||
|
storageTypeList.value = resData.dictionariesList;
|
||||||
|
};
|
||||||
|
fnGetStorageTypeList();
|
||||||
|
|
||||||
|
const emits = defineEmits(["update:visible", "update:form", "getData"]);
|
||||||
|
const { visible, form } = useVModels(props, emits);
|
||||||
|
const data = reactive({
|
||||||
|
rules: {
|
||||||
|
storageName: [
|
||||||
|
{ required: true, message: "请输入应急库名称", trigger: "blur" },
|
||||||
|
],
|
||||||
|
area: [{ required: true, message: "请输入应急库区域", trigger: "blur" }],
|
||||||
|
longitude: [{ required: true, message: "请输入经度", trigger: "blur" }],
|
||||||
|
latitude: [{ required: true, message: "请输入纬度", trigger: "blur" }],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const mapDialog = ref({
|
||||||
|
visible: false,
|
||||||
|
longitude: "",
|
||||||
|
latitude: "",
|
||||||
|
});
|
||||||
|
const fnSelectedPosition = ({ longitude, latitude }) => {
|
||||||
|
mapDialog.value.visible = true;
|
||||||
|
mapDialog.value.longitude = longitude;
|
||||||
|
mapDialog.value.latitude = latitude;
|
||||||
|
};
|
||||||
|
const fnMapSubmit = ({ longitude, latitude }) => {
|
||||||
|
form.value.longitude = longitude;
|
||||||
|
form.value.latitude = latitude;
|
||||||
|
};
|
||||||
|
const fnClose = () => {
|
||||||
|
visible.value = false;
|
||||||
|
};
|
||||||
|
const fnSubmit = debounce(
|
||||||
|
1000,
|
||||||
|
async () => {
|
||||||
|
await validate();
|
||||||
|
const form = props.form;
|
||||||
|
const param = {
|
||||||
|
...form,
|
||||||
|
areaName: form.areaName.join("-"),
|
||||||
|
province: form.area[0],
|
||||||
|
city: form.area[1],
|
||||||
|
county: form.area[2],
|
||||||
|
village: form.area[3],
|
||||||
|
street: form.area[4],
|
||||||
|
};
|
||||||
|
delete param.area;
|
||||||
|
if (props.type === "add") {
|
||||||
|
await setEmergencyStorageAdd({
|
||||||
|
...param,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (props.type === "edit")
|
||||||
|
await setEmergencyStorageUpdate({
|
||||||
|
...param,
|
||||||
|
});
|
||||||
|
ElMessage.success("操作成功");
|
||||||
|
fnClose();
|
||||||
|
emits("getData");
|
||||||
|
},
|
||||||
|
{ atBegin: true }
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped></style>
|
||||||
|
|
@ -0,0 +1,167 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<app-search v-model="searchForm" @submit="resetPagination">
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-form-item label="应急库名称" prop="storageName">
|
||||||
|
<el-input
|
||||||
|
v-model="searchForm.storageName"
|
||||||
|
placeholder="请输入应急库名称"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-form-item label="属地" prop="area">
|
||||||
|
<layout-cascader
|
||||||
|
v-model="searchForm.area"
|
||||||
|
:dictionaries-id="'e725d2a91b8248f4b8f49889038df7de'"
|
||||||
|
:check-strictly="true"
|
||||||
|
:level="5"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-form-item label="应急库类型" prop="storageType">
|
||||||
|
<el-select
|
||||||
|
v-model="searchForm.storageType"
|
||||||
|
placeholder="请选择矿山类别"
|
||||||
|
filterable
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in storageTypeList"
|
||||||
|
:key="item.bianma"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item.bianma"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</app-search>
|
||||||
|
<app-table v-model:pagination="pagination" :data="list" @get-data="getData">
|
||||||
|
<el-table-column prop="storageName" label="应急库名称" />
|
||||||
|
<el-table-column prop="areaName" label="属地" />
|
||||||
|
<el-table-column prop="storageTypeName" label="应急库类型" />
|
||||||
|
<el-table-column label="操作" width="120">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-button type="primary" text link @click="fnAddOrEdit(row, 'edit')">
|
||||||
|
编辑
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
text
|
||||||
|
link
|
||||||
|
@click="fnDelete(row.emergencyStorageId)"
|
||||||
|
>
|
||||||
|
删除
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<template #button>
|
||||||
|
<el-button type="primary" @click="fnAddOrEdit('', 'add')">
|
||||||
|
新增
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</app-table>
|
||||||
|
|
||||||
|
<add
|
||||||
|
v-model:form="data.addOrEditDialog.form"
|
||||||
|
v-model:visible="data.addOrEditDialog.visible"
|
||||||
|
:type="data.addOrEditDialog.type"
|
||||||
|
@get-data="resetPagination"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, nextTick } from "vue";
|
||||||
|
import { getDataDictionary } from "@/request/data_dictionary.js";
|
||||||
|
import { ElMessage, ElMessageBox } from "element-plus";
|
||||||
|
import { debounce } from "throttle-debounce";
|
||||||
|
import LayoutCascader from "@/components/layout_cascader/index.vue";
|
||||||
|
import AppTable from "@/components/table/index.vue";
|
||||||
|
import AppSearch from "@/components/search/index.vue";
|
||||||
|
import useListData from "@/hooks/useListData.js";
|
||||||
|
import {
|
||||||
|
getEmergencyStoragePage,
|
||||||
|
setEmergencyStorageDelete,
|
||||||
|
} from "@/request/kangzai.js";
|
||||||
|
import Add from "./components/add.vue";
|
||||||
|
|
||||||
|
const storageTypeList = ref([]);
|
||||||
|
const fnGetStorageTypeList = async () => {
|
||||||
|
const resData = await getDataDictionary({
|
||||||
|
parentId: "j0k1l2m3n4o5p6q7r8s9t0u1v2w3x4y",
|
||||||
|
});
|
||||||
|
storageTypeList.value = resData.dictionariesList;
|
||||||
|
};
|
||||||
|
fnGetStorageTypeList();
|
||||||
|
|
||||||
|
const { list, pagination, searchForm, resetPagination, getData } = useListData(
|
||||||
|
getEmergencyStoragePage,
|
||||||
|
{
|
||||||
|
beforeGetData: (searchForm) => {
|
||||||
|
const area = searchForm.area || [];
|
||||||
|
|
||||||
|
searchForm.province = area[0];
|
||||||
|
searchForm.city = area[1];
|
||||||
|
searchForm.county = area[2];
|
||||||
|
searchForm.village = area[3];
|
||||||
|
searchForm.street = area[4];
|
||||||
|
},
|
||||||
|
callback: (list) => {
|
||||||
|
list.forEach((item) => {
|
||||||
|
item.storageTypeName = storageTypeList.value.filter((temp) => {
|
||||||
|
return temp.bianma === item.storageType;
|
||||||
|
})[0]?.name;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
const data = reactive({
|
||||||
|
addOrEditDialog: {
|
||||||
|
visible: false,
|
||||||
|
type: "",
|
||||||
|
form: {
|
||||||
|
storageName: "",
|
||||||
|
storageType: "",
|
||||||
|
area: [],
|
||||||
|
areaName: [],
|
||||||
|
managementUnit: "",
|
||||||
|
longitude: "",
|
||||||
|
latitude: "",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const fnDelete = debounce(
|
||||||
|
1000,
|
||||||
|
async (emergencyStorageId) => {
|
||||||
|
await ElMessageBox.confirm(`确定要删除吗？`, {
|
||||||
|
type: "warning",
|
||||||
|
});
|
||||||
|
await setEmergencyStorageDelete({ emergencyStorageId });
|
||||||
|
ElMessage.success("删除成功");
|
||||||
|
resetPagination();
|
||||||
|
},
|
||||||
|
{ atBegin: true }
|
||||||
|
);
|
||||||
|
|
||||||
|
const fnAddOrEdit = async (row, type) => {
|
||||||
|
data.addOrEditDialog.visible = true;
|
||||||
|
await nextTick();
|
||||||
|
data.addOrEditDialog.form = {};
|
||||||
|
data.addOrEditDialog.type = type;
|
||||||
|
if (type === "edit") {
|
||||||
|
data.addOrEditDialog.form = row;
|
||||||
|
data.addOrEditDialog.form.area = [
|
||||||
|
row.province,
|
||||||
|
row.city,
|
||||||
|
row.county,
|
||||||
|
row.village,
|
||||||
|
row.street,
|
||||||
|
];
|
||||||
|
data.addOrEditDialog.form.areaName = row.areaName.split("-");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
|
|
@ -0,0 +1,353 @@
|
||||||
|
<template>
|
||||||
|
<el-dialog
|
||||||
|
v-model="visible"
|
||||||
|
:title="type === 'edit' ? '修改' : '新增'"
|
||||||
|
:before-close="fnClose"
|
||||||
|
>
|
||||||
|
<el-form
|
||||||
|
ref="formRef"
|
||||||
|
:model="form"
|
||||||
|
:rules="data.rules"
|
||||||
|
label-width="100px"
|
||||||
|
style="margin-top: 20px"
|
||||||
|
>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="灾害点名称" prop="disasterName">
|
||||||
|
<el-input
|
||||||
|
v-model="form.disasterName"
|
||||||
|
placeholder="请输入灾害点名称"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="属地" prop="area">
|
||||||
|
<layout-cascader
|
||||||
|
v-model="form.area"
|
||||||
|
v-model:name="form.areaName"
|
||||||
|
:dictionaries-id="'e725d2a91b8248f4b8f49889038df7de'"
|
||||||
|
:check-strictly="false"
|
||||||
|
:level="4"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="地形地貌" prop="terrain">
|
||||||
|
<el-select v-model="form.terrain" placeholder="请选择地形地貌">
|
||||||
|
<el-option
|
||||||
|
v-for="item in terrainList"
|
||||||
|
:key="item.bianma"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item.bianma"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="灾害类型" prop="disasterType">
|
||||||
|
<el-select v-model="form.disasterType" placeholder="请选择灾害类型">
|
||||||
|
<el-option
|
||||||
|
v-for="item in disasterTypeList"
|
||||||
|
:key="item.bianma"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item.bianma"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="规模" prop="scale">
|
||||||
|
<el-select v-model="form.scale" placeholder="请选择规模">
|
||||||
|
<el-option
|
||||||
|
v-for="item in scaleList"
|
||||||
|
:key="item.bianma"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item.bianma"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="稳定性" prop="stability">
|
||||||
|
<el-select v-model="form.stability" placeholder="请选择稳定性">
|
||||||
|
<el-option
|
||||||
|
v-for="item in stabilityList"
|
||||||
|
:key="item.bianma"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item.bianma"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="户数" prop="households">
|
||||||
|
<el-input-number
|
||||||
|
v-model="form.households"
|
||||||
|
placeholder="请输入户数"
|
||||||
|
style="width: 100%"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="人口数" prop="population">
|
||||||
|
<el-input-number
|
||||||
|
v-model="form.population"
|
||||||
|
placeholder="请输入人口数"
|
||||||
|
style="width: 100%"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="险情等级" prop="dangerousSituation">
|
||||||
|
<el-select
|
||||||
|
v-model="form.dangerousSituation"
|
||||||
|
placeholder="请选择险情等级"
|
||||||
|
style="width: 100%"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in dangerousSituationList"
|
||||||
|
:key="item.bianma"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item.bianma"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="勘察情况" prop="surveySituation">
|
||||||
|
<el-input
|
||||||
|
v-model="form.surveySituation"
|
||||||
|
placeholder="请输入勘察情况"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="治理情况" prop="governanceSituation">
|
||||||
|
<el-input
|
||||||
|
v-model="form.governanceSituation"
|
||||||
|
placeholder="请输入治理情况"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="搬迁情况" prop="relocationSituation">
|
||||||
|
<el-input
|
||||||
|
v-model="form.relocationSituation"
|
||||||
|
placeholder="请输入搬迁情况"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="风险等级" prop="riskLevel">
|
||||||
|
<el-select v-model="form.riskLevel" placeholder="请选择风险等级">
|
||||||
|
<el-option label="低风险" value="1" />
|
||||||
|
<el-option label="中风险" value="2" />
|
||||||
|
<el-option label="高风险" value="3" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="规模与形态描述" prop="scaleDescription">
|
||||||
|
<el-input
|
||||||
|
v-model="form.scaleDescription"
|
||||||
|
type="textarea"
|
||||||
|
:rows="3"
|
||||||
|
placeholder="请输入规模与形态描述"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="24">
|
||||||
|
<div style="display: flex">
|
||||||
|
<el-form-item label="经度" prop="longitude" style="flex: 1">
|
||||||
|
<el-input v-model="form.longitude" placeholder="请选择经度" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="纬度" prop="latitude" style="flex: 1">
|
||||||
|
<el-input v-model="form.latitude" placeholder="请选择纬度" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label-width="10px">
|
||||||
|
<el-button
|
||||||
|
class="ml-10"
|
||||||
|
type="primary"
|
||||||
|
@click="fnSelectedPosition"
|
||||||
|
>点击定位</el-button
|
||||||
|
>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="fnClose">取 消</el-button>
|
||||||
|
<el-button type="primary" @click="fnSubmit">确 定</el-button>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<app-map
|
||||||
|
v-model:visible="mapDialog.visible"
|
||||||
|
v-model:longitude="mapDialog.longitude"
|
||||||
|
v-model:latitude="mapDialog.latitude"
|
||||||
|
@submit="fnMapSubmit"
|
||||||
|
/>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { debounce } from "throttle-debounce";
|
||||||
|
import { getDataDictionary } from "@/request/data_dictionary.js";
|
||||||
|
import useFormValidate from "@/hooks/useFormValidate.js";
|
||||||
|
import LayoutCascader from "@/components/layout_cascader/index.vue";
|
||||||
|
import { ElMessage } from "element-plus";
|
||||||
|
import { reactive, ref } from "vue";
|
||||||
|
import { useVModels } from "@vueuse/core";
|
||||||
|
import AppMap from "@/components/map/map.vue";
|
||||||
|
import {
|
||||||
|
setGeologicalDisasterAdd,
|
||||||
|
setGeologicalDisasterUpdate,
|
||||||
|
} from "@/request/kangzai.js";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
visible: {
|
||||||
|
type: Boolean,
|
||||||
|
required: true,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
form: {
|
||||||
|
type: Object,
|
||||||
|
required: true,
|
||||||
|
default: () => ({}),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const { validate, formRef } = useFormValidate();
|
||||||
|
|
||||||
|
const emits = defineEmits(["update:visible", "update:form", "getData"]);
|
||||||
|
const { visible, form } = useVModels(props, emits);
|
||||||
|
|
||||||
|
// 字典数据
|
||||||
|
const terrainList = ref([]);
|
||||||
|
const disasterTypeList = ref([]);
|
||||||
|
const scaleList = ref([]);
|
||||||
|
const stabilityList = ref([]);
|
||||||
|
const dangerousSituationList = ref([]);
|
||||||
|
|
||||||
|
const fnGetDictData = async () => {
|
||||||
|
const [
|
||||||
|
terrainRes,
|
||||||
|
disasterTypeRes,
|
||||||
|
scaleRes,
|
||||||
|
stabilityRes,
|
||||||
|
dangerousSituationRes,
|
||||||
|
] = await Promise.all([
|
||||||
|
getDataDictionary({ parentId: "b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6q" }),
|
||||||
|
getDataDictionary({ parentId: "c3d4e5f6g7h8i9j0k1l2m3n4o5p6q7r" }),
|
||||||
|
getDataDictionary({ parentId: "7d3a1b2c8e4f5947a6b0c8d9e0f1a2b3" }),
|
||||||
|
getDataDictionary({ parentId: "a4f5c6d7e8291047b3a2b1c0d9e8f7a6" }),
|
||||||
|
getDataDictionary({ parentId: "c8e9f0a1b2c347d56e7f8a9b0c1d2e3f" }),
|
||||||
|
]);
|
||||||
|
terrainList.value = terrainRes.dictionariesList;
|
||||||
|
disasterTypeList.value = disasterTypeRes.dictionariesList;
|
||||||
|
scaleList.value = scaleRes.dictionariesList;
|
||||||
|
stabilityList.value = stabilityRes.dictionariesList;
|
||||||
|
dangerousSituationList.value = dangerousSituationRes.dictionariesList;
|
||||||
|
};
|
||||||
|
fnGetDictData();
|
||||||
|
|
||||||
|
const data = reactive({
|
||||||
|
rules: {
|
||||||
|
disasterName: [
|
||||||
|
{ required: true, message: "请输入灾害点名称", trigger: "blur" },
|
||||||
|
],
|
||||||
|
area: [{ required: true, message: "请选择区域", trigger: "blur" }],
|
||||||
|
disasterType: [
|
||||||
|
{ required: true, message: "请选择灾害类型", trigger: "change" },
|
||||||
|
],
|
||||||
|
scale: [{ required: true, message: "请选择规模", trigger: "change" }],
|
||||||
|
stability: [{ required: true, message: "请选择稳定性", trigger: "change" }],
|
||||||
|
households: [{ required: true, message: "请输入户数", trigger: "blur" }],
|
||||||
|
population: [{ required: true, message: "请输入人口数", trigger: "blur" }],
|
||||||
|
dangerousSituation: [
|
||||||
|
{ required: true, message: "请选择险情等级", trigger: "change" },
|
||||||
|
],
|
||||||
|
surveySituation: [
|
||||||
|
{ required: true, message: "请选择勘察情况", trigger: "change" },
|
||||||
|
],
|
||||||
|
governanceSituation: [
|
||||||
|
{ required: true, message: "请选择治理情况", trigger: "change" },
|
||||||
|
],
|
||||||
|
relocationSituation: [
|
||||||
|
{ required: true, message: "请选择搬迁情况", trigger: "change" },
|
||||||
|
],
|
||||||
|
riskLevel: [
|
||||||
|
{ required: true, message: "请选择风险等级", trigger: "change" },
|
||||||
|
],
|
||||||
|
longitude: [{ required: true, message: "请输入经度", trigger: "blur" }],
|
||||||
|
latitude: [{ required: true, message: "请输入纬度", trigger: "blur" }],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const mapDialog = ref({
|
||||||
|
visible: false,
|
||||||
|
longitude: "",
|
||||||
|
latitude: "",
|
||||||
|
});
|
||||||
|
const fnSelectedPosition = () => {
|
||||||
|
mapDialog.value.visible = true;
|
||||||
|
mapDialog.value.longitude = form.value.longitude;
|
||||||
|
mapDialog.value.latitude = form.value.latitude;
|
||||||
|
};
|
||||||
|
const fnMapSubmit = ({ longitude, latitude }) => {
|
||||||
|
form.value.longitude = longitude;
|
||||||
|
form.value.latitude = latitude;
|
||||||
|
};
|
||||||
|
|
||||||
|
const fnClose = () => {
|
||||||
|
visible.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const fnSubmit = debounce(
|
||||||
|
1000,
|
||||||
|
async () => {
|
||||||
|
await validate();
|
||||||
|
const param = {
|
||||||
|
...form.value,
|
||||||
|
areaName: form.value.areaName.join("-"),
|
||||||
|
province: form.value.area[0],
|
||||||
|
city: form.value.area[1],
|
||||||
|
county: form.value.area[2],
|
||||||
|
village: form.value.area[3],
|
||||||
|
street: form.value.area[4],
|
||||||
|
};
|
||||||
|
delete param.area;
|
||||||
|
|
||||||
|
if (props.type === "add") {
|
||||||
|
await setGeologicalDisasterAdd(param);
|
||||||
|
} else if (props.type === "edit") {
|
||||||
|
await setGeologicalDisasterUpdate(param);
|
||||||
|
}
|
||||||
|
|
||||||
|
ElMessage.success("操作成功");
|
||||||
|
fnClose();
|
||||||
|
emits("getData");
|
||||||
|
},
|
||||||
|
{ atBegin: true }
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped></style>
|
||||||
|
|
@ -0,0 +1,199 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<app-search v-model="searchForm" @submit="resetPagination">
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-form-item label="灾害点名称" prop="disasterName">
|
||||||
|
<el-input
|
||||||
|
v-model="searchForm.disasterName"
|
||||||
|
placeholder="请输入灾害点名称"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-form-item label="属地" prop="area">
|
||||||
|
<layout-cascader
|
||||||
|
v-model="searchForm.area"
|
||||||
|
:dictionaries-id="'e725d2a91b8248f4b8f49889038df7de'"
|
||||||
|
:check-strictly="true"
|
||||||
|
:level="5"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-form-item label="地形地貌" prop="terrain">
|
||||||
|
<el-select v-model="searchForm.terrain" placeholder="请选择地形地貌">
|
||||||
|
<el-option
|
||||||
|
v-for="item in terrainList"
|
||||||
|
:key="item.bianma"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item.bianma"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-form-item label="灾害类型" prop="disasterType">
|
||||||
|
<el-select
|
||||||
|
v-model="searchForm.disasterType"
|
||||||
|
placeholder="请选择灾害类型"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in disasterTypeList"
|
||||||
|
:key="item.bianma"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item.bianma"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</app-search>
|
||||||
|
|
||||||
|
<app-table v-model:pagination="pagination" :data="list" @get-data="getData">
|
||||||
|
<el-table-column prop="disasterName" label="灾害点名称" />
|
||||||
|
<el-table-column prop="areaName" label="属地" />
|
||||||
|
<el-table-column prop="terrainName" label="地形地貌" />
|
||||||
|
<el-table-column prop="disasterTypeName" label="灾害类型" />
|
||||||
|
<el-table-column label="操作" width="120">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-button type="primary" text link @click="fnAddOrEdit(row, 'edit')"
|
||||||
|
>编辑</el-button
|
||||||
|
>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
text
|
||||||
|
link
|
||||||
|
@click="fnDelete(row.geologicalDisasterId)"
|
||||||
|
>删除</el-button
|
||||||
|
>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<template #button>
|
||||||
|
<el-button type="primary" @click="fnAddOrEdit('', 'add')"
|
||||||
|
>新增</el-button
|
||||||
|
>
|
||||||
|
</template>
|
||||||
|
</app-table>
|
||||||
|
|
||||||
|
<add
|
||||||
|
v-model:form="data.addOrEditDialog.form"
|
||||||
|
v-model:visible="data.addOrEditDialog.visible"
|
||||||
|
:type="data.addOrEditDialog.type"
|
||||||
|
@get-data="resetPagination"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, nextTick } from "vue";
|
||||||
|
import { getDataDictionary } from "@/request/data_dictionary.js";
|
||||||
|
import { ElMessage, ElMessageBox } from "element-plus";
|
||||||
|
import LayoutCascader from "@/components/layout_cascader/index.vue";
|
||||||
|
import AppTable from "@/components/table/index.vue";
|
||||||
|
import AppSearch from "@/components/search/index.vue";
|
||||||
|
import useListData from "@/hooks/useListData.js";
|
||||||
|
import {
|
||||||
|
getGeologicalDisasterPage,
|
||||||
|
setGeologicalDisasterDelete,
|
||||||
|
} from "@/request/kangzai.js";
|
||||||
|
import Add from "./components/add.vue";
|
||||||
|
|
||||||
|
const terrainList = ref([]);
|
||||||
|
const disasterTypeList = ref([]);
|
||||||
|
|
||||||
|
const fnGetDictData = async () => {
|
||||||
|
const [terrainRes, disasterTypeRes] = await Promise.all([
|
||||||
|
getDataDictionary({ parentId: "b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6q" }),
|
||||||
|
getDataDictionary({ parentId: "c3d4e5f6g7h8i9j0k1l2m3n4o5p6q7r" }),
|
||||||
|
]);
|
||||||
|
terrainList.value = terrainRes.dictionariesList;
|
||||||
|
disasterTypeList.value = disasterTypeRes.dictionariesList;
|
||||||
|
};
|
||||||
|
fnGetDictData();
|
||||||
|
|
||||||
|
const { list, pagination, searchForm, resetPagination, getData } = useListData(
|
||||||
|
getGeologicalDisasterPage,
|
||||||
|
{
|
||||||
|
beforeGetData: (searchForm) => {
|
||||||
|
const area = searchForm.area || [];
|
||||||
|
searchForm.province = area[0];
|
||||||
|
searchForm.city = area[1];
|
||||||
|
searchForm.county = area[2];
|
||||||
|
searchForm.village = area[3];
|
||||||
|
searchForm.street = area[4];
|
||||||
|
},
|
||||||
|
callback: (list) => {
|
||||||
|
list.forEach((item) => {
|
||||||
|
item.terrainName =
|
||||||
|
terrainList.value.find((dict) => dict.bianma === item.terrain)
|
||||||
|
?.name || item.terrain;
|
||||||
|
item.disasterTypeName =
|
||||||
|
disasterTypeList.value.find(
|
||||||
|
(dict) => dict.bianma === item.disasterType
|
||||||
|
)?.name || item.disasterType;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
const data = reactive({
|
||||||
|
addOrEditDialog: {
|
||||||
|
visible: false,
|
||||||
|
type: "",
|
||||||
|
form: {
|
||||||
|
disasterName: "",
|
||||||
|
province: "",
|
||||||
|
city: "",
|
||||||
|
county: "",
|
||||||
|
village: "",
|
||||||
|
street: "",
|
||||||
|
area: [],
|
||||||
|
areaName: [],
|
||||||
|
terrain: "",
|
||||||
|
disasterType: "",
|
||||||
|
scaleDescription: "",
|
||||||
|
scale: "",
|
||||||
|
stability: "",
|
||||||
|
households: "",
|
||||||
|
population: "",
|
||||||
|
dangerousSituation: "",
|
||||||
|
surveySituation: "",
|
||||||
|
governanceSituation: "",
|
||||||
|
relocationSituation: "",
|
||||||
|
riskLevel: "",
|
||||||
|
longitude: "",
|
||||||
|
latitude: "",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const fnDelete = async (geologicalDisasterId) => {
|
||||||
|
await ElMessageBox.confirm("确定要删除吗？", { type: "warning" });
|
||||||
|
await setGeologicalDisasterDelete({ geologicalDisasterId });
|
||||||
|
ElMessage.success("删除成功");
|
||||||
|
resetPagination();
|
||||||
|
};
|
||||||
|
|
||||||
|
const fnAddOrEdit = async (row, type) => {
|
||||||
|
data.addOrEditDialog.visible = true;
|
||||||
|
await nextTick();
|
||||||
|
data.addOrEditDialog.form = {};
|
||||||
|
data.addOrEditDialog.type = type;
|
||||||
|
|
||||||
|
if (type === "edit") {
|
||||||
|
data.addOrEditDialog.form = row;
|
||||||
|
data.addOrEditDialog.form.area = [
|
||||||
|
row.province,
|
||||||
|
row.city,
|
||||||
|
row.county,
|
||||||
|
row.village,
|
||||||
|
row.street,
|
||||||
|
];
|
||||||
|
data.addOrEditDialog.form.areaName = row.areaName.split("-");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
|
|
@ -0,0 +1,412 @@
|
||||||
|
<template>
|
||||||
|
<el-dialog
|
||||||
|
v-model="visible"
|
||||||
|
:title="type === 'edit' ? '修改' : '新增'"
|
||||||
|
:before-close="fnClose"
|
||||||
|
>
|
||||||
|
<el-form
|
||||||
|
ref="formRef"
|
||||||
|
:model="form"
|
||||||
|
:rules="data.rules"
|
||||||
|
label-width="160px"
|
||||||
|
style="margin-top: 20px"
|
||||||
|
>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="村庄名称" prop="villageName">
|
||||||
|
<el-input v-model="form.villageName" placeholder="请输入村庄名称" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="属地" prop="area">
|
||||||
|
<layout-cascader
|
||||||
|
v-model="form.area"
|
||||||
|
v-model:name="form.areaName"
|
||||||
|
:dictionaries-id="'e725d2a91b8248f4b8f49889038df7de'"
|
||||||
|
:check-strictly="false"
|
||||||
|
:level="4"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="县级预警负责人" prop="countyWarningOfficer">
|
||||||
|
<el-input
|
||||||
|
v-model="form.countyWarningOfficer"
|
||||||
|
placeholder="请输入预警负责人"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="县级预警负责人电话" prop="countyWarningPhone">
|
||||||
|
<el-input
|
||||||
|
v-model="form.countyWarningPhone"
|
||||||
|
placeholder="请输入县级预警负责人电话"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="县级责任人" prop="countyOfficer">
|
||||||
|
<el-input
|
||||||
|
v-model="form.countyOfficer"
|
||||||
|
placeholder="请输入县级责任人"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="县级责任人职务" prop="countyOfficerPosition">
|
||||||
|
<el-input
|
||||||
|
v-model="form.countyOfficerPosition"
|
||||||
|
placeholder="请输入县级责任人职务"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="县级责任人电话" prop="countyOfficerPhone">
|
||||||
|
<el-input
|
||||||
|
v-model="form.countyOfficerPhone"
|
||||||
|
placeholder="请输入县级责任人电话"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="乡级责任人" prop="townshipOfficer">
|
||||||
|
<el-input
|
||||||
|
v-model="form.townshipOfficer"
|
||||||
|
placeholder="请输入乡级责任人姓名"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="乡级责任人职务" prop="townshipOfficerPosition">
|
||||||
|
<el-input
|
||||||
|
v-model="form.townshipOfficerPosition"
|
||||||
|
placeholder="请输入乡级责任人职务"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="乡级责任人电话" prop="townshipOfficerPhone">
|
||||||
|
<el-input
|
||||||
|
v-model="form.townshipOfficerPhone"
|
||||||
|
placeholder="请输入乡级责任人电话"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="村级责任人" prop="villageOfficer">
|
||||||
|
<el-input
|
||||||
|
v-model="form.villageOfficer"
|
||||||
|
placeholder="请输入村级责任人姓名"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="村级责任人职务" prop="villageOfficerPosition">
|
||||||
|
<el-input
|
||||||
|
v-model="form.villageOfficerPosition"
|
||||||
|
placeholder="请输入村级责任人职务"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="村级责任人电话" prop="villageOfficerPhone">
|
||||||
|
<el-input
|
||||||
|
v-model="form.villageOfficerPhone"
|
||||||
|
placeholder="请输入村级责任人电话"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="监测员姓名" prop="monitorName">
|
||||||
|
<el-input
|
||||||
|
v-model="form.monitorName"
|
||||||
|
placeholder="请输入监测员姓名"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="监测员职务" prop="monitorPosition">
|
||||||
|
<el-input
|
||||||
|
v-model="form.monitorPosition"
|
||||||
|
placeholder="请输入监测员职务"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="监测员电话" prop="monitorPhone">
|
||||||
|
<el-input
|
||||||
|
v-model="form.monitorPhone"
|
||||||
|
placeholder="请输入监测员电话"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="预警员姓名" prop="warningOfficerName">
|
||||||
|
<el-input
|
||||||
|
v-model="form.warningOfficerName"
|
||||||
|
placeholder="请输入请输入预警员姓名"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="预警员职务" prop="warningOfficerPosition">
|
||||||
|
<el-input
|
||||||
|
v-model="form.warningOfficerPosition"
|
||||||
|
placeholder="请输入预警员职务"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="请输入预警员电话" prop="warningOfficerPhone">
|
||||||
|
<el-input
|
||||||
|
v-model="form.warningOfficerPhone"
|
||||||
|
placeholder="请输入请输入预警员电话"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="转移员姓名" prop="transferOfficerName">
|
||||||
|
<el-input
|
||||||
|
v-model="form.transferOfficerName"
|
||||||
|
placeholder="请输入转移员姓名"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="转移员职务" prop="transferOfficerPosition">
|
||||||
|
<el-input
|
||||||
|
v-model="form.transferOfficerPosition"
|
||||||
|
placeholder="请输入转移员职务"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="转移员电话" prop="transferOfficerPhone">
|
||||||
|
<el-input
|
||||||
|
v-model="form.transferOfficerPhone"
|
||||||
|
placeholder="请输入转移员电话"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="备注" prop="remarks">
|
||||||
|
<el-input
|
||||||
|
v-model="form.remarks"
|
||||||
|
type="textarea"
|
||||||
|
:rows="3"
|
||||||
|
placeholder="请输入备注"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="24">
|
||||||
|
<div style="display: flex">
|
||||||
|
<el-form-item label="经度" prop="longitude" style="flex: 1">
|
||||||
|
<el-input v-model="form.longitude" placeholder="请选择经度" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="纬度" prop="latitude" style="flex: 1">
|
||||||
|
<el-input v-model="form.latitude" placeholder="请选择纬度" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label-width="10px">
|
||||||
|
<el-button
|
||||||
|
class="ml-10"
|
||||||
|
type="primary"
|
||||||
|
@click="fnSelectedPosition(form)"
|
||||||
|
>点击定位</el-button
|
||||||
|
>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="fnClose">取 消</el-button>
|
||||||
|
<el-button type="primary" @click="fnSubmit">确 定</el-button>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<app-map
|
||||||
|
v-model:visible="mapDialog.visible"
|
||||||
|
v-model:longitude="mapDialog.longitude"
|
||||||
|
v-model:latitude="mapDialog.latitude"
|
||||||
|
@submit="fnMapSubmit"
|
||||||
|
/>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { debounce } from "throttle-debounce";
|
||||||
|
import useFormValidate from "@/hooks/useFormValidate.js";
|
||||||
|
import LayoutCascader from "@/components/layout_cascader/index.vue";
|
||||||
|
import { ElMessage } from "element-plus";
|
||||||
|
import { reactive, ref } from "vue";
|
||||||
|
import { useVModels } from "@vueuse/core";
|
||||||
|
import AppMap from "@/components/map/map.vue";
|
||||||
|
import {
|
||||||
|
setMountainFloodVillageAdd,
|
||||||
|
setMountainFloodVillageUpdate,
|
||||||
|
} from "@/request/kangzai.js";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
visible: {
|
||||||
|
type: Boolean,
|
||||||
|
required: true,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
form: {
|
||||||
|
type: Object,
|
||||||
|
required: true,
|
||||||
|
default: () => ({}),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const { validate, formRef } = useFormValidate();
|
||||||
|
|
||||||
|
const emits = defineEmits(["update:visible", "update:form", "getData"]);
|
||||||
|
const { visible, form } = useVModels(props, emits);
|
||||||
|
|
||||||
|
const data = reactive({
|
||||||
|
rules: {
|
||||||
|
villageName: [
|
||||||
|
{ required: true, message: "请输入村庄名称", trigger: "blur" },
|
||||||
|
],
|
||||||
|
area: [{ required: true, message: "请输入村庄区域", trigger: "blur" }],
|
||||||
|
countyWarningOfficer: [
|
||||||
|
{ required: true, message: "请输入县级预警负责人", trigger: "blur" },
|
||||||
|
],
|
||||||
|
countyWarningOfficerPhone: [
|
||||||
|
{ required: true, message: "请输入县级预警负责人手机号", trigger: "blur" },
|
||||||
|
],
|
||||||
|
countyOfficer: [
|
||||||
|
{ required: true, message: "请输入县级责任人姓名", trigger: "blur" },
|
||||||
|
],
|
||||||
|
countyOfficerPosition: [
|
||||||
|
{ required: true, message: "请输入县级责任人职务", trigger: "blur" },
|
||||||
|
],
|
||||||
|
countyOfficerPhone: [
|
||||||
|
{ required: true, message: "请输入县级责任人电话", trigger: "blur" },
|
||||||
|
],
|
||||||
|
townshipOfficer: [
|
||||||
|
{ required: true, message: "请输入乡级责任人姓名", trigger: "blur" },
|
||||||
|
],
|
||||||
|
townshipOfficerPosition: [
|
||||||
|
{ required: true, message: "请输入乡级责任人职务", trigger: "blur" },
|
||||||
|
],
|
||||||
|
townshipOfficerPhone: [
|
||||||
|
{ required: true, message: "请输入乡级责任人电话", trigger: "blur" },
|
||||||
|
],
|
||||||
|
villageOfficer: [
|
||||||
|
{ required: true, message: "请输入村级责任人姓名", trigger: "blur" },
|
||||||
|
],
|
||||||
|
villageOfficerPosition: [
|
||||||
|
{ required: true, message: "请输入村级责任人职务", trigger: "blur" },
|
||||||
|
],
|
||||||
|
villageOfficerPhone: [
|
||||||
|
{ required: true, message: "请输入村级责任人电话", trigger: "blur" },
|
||||||
|
],
|
||||||
|
monitorName: [
|
||||||
|
{ required: true, message: "请输入监测员姓名", trigger: "blur" },
|
||||||
|
],
|
||||||
|
monitorPosition: [
|
||||||
|
{ required: true, message: "请输入监测员职务", trigger: "blur" },
|
||||||
|
],
|
||||||
|
monitorPhone: [
|
||||||
|
{ required: true, message: "请输入监测员电话", trigger: "blur" },
|
||||||
|
],
|
||||||
|
warningOfficerName: [
|
||||||
|
{ required: true, message: "请输入预警员姓名", trigger: "blur" },
|
||||||
|
],
|
||||||
|
warningOfficerPosition: [
|
||||||
|
{ required: true, message: "请输入预警员职务", trigger: "blur" },
|
||||||
|
],
|
||||||
|
warningOfficerPhone: [
|
||||||
|
{ required: true, message: "请输入预警员电话", trigger: "blur" },
|
||||||
|
],
|
||||||
|
transferOfficerName: [
|
||||||
|
{ required: true, message: "请输入转移员姓名", trigger: "blur" },
|
||||||
|
],
|
||||||
|
transferOfficerPosition: [
|
||||||
|
{ required: true, message: "请输入转移员职务", trigger: "blur" },
|
||||||
|
],
|
||||||
|
transferOfficerPhone: [
|
||||||
|
{ required: true, message: "请输入转移员电话", trigger: "blur" },
|
||||||
|
],
|
||||||
|
longitude: [{ required: true, message: "请输入经度", trigger: "blur" }],
|
||||||
|
latitude: [{ required: true, message: "请输入纬度", trigger: "blur" }],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const mapDialog = ref({
|
||||||
|
visible: false,
|
||||||
|
longitude: "",
|
||||||
|
latitude: "",
|
||||||
|
});
|
||||||
|
const fnSelectedPosition = ({ longitude, latitude }) => {
|
||||||
|
mapDialog.value.visible = true;
|
||||||
|
mapDialog.value.longitude = longitude;
|
||||||
|
mapDialog.value.latitude = latitude;
|
||||||
|
};
|
||||||
|
const fnMapSubmit = ({ longitude, latitude }) => {
|
||||||
|
form.value.longitude = longitude;
|
||||||
|
form.value.latitude = latitude;
|
||||||
|
};
|
||||||
|
|
||||||
|
const fnClose = () => {
|
||||||
|
visible.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const fnSubmit = debounce(
|
||||||
|
1000,
|
||||||
|
async () => {
|
||||||
|
await validate();
|
||||||
|
const param = {
|
||||||
|
...form.value,
|
||||||
|
areaName: form.value.areaName.join("-"),
|
||||||
|
province: form.value.area[0],
|
||||||
|
city: form.value.area[1],
|
||||||
|
county: form.value.area[2],
|
||||||
|
village: form.value.area[3],
|
||||||
|
street: form.value.area[4],
|
||||||
|
};
|
||||||
|
delete param.area;
|
||||||
|
|
||||||
|
if (props.type === "add") {
|
||||||
|
await setMountainFloodVillageAdd(param);
|
||||||
|
} else if (props.type === "edit") {
|
||||||
|
await setMountainFloodVillageUpdate(param);
|
||||||
|
}
|
||||||
|
|
||||||
|
ElMessage.success("操作成功");
|
||||||
|
fnClose();
|
||||||
|
emits("getData");
|
||||||
|
},
|
||||||
|
{ atBegin: true }
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped></style>
|
||||||
|
|
@ -0,0 +1,163 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<app-search v-model="searchForm" @submit="resetPagination">
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-form-item label="村庄名称" prop="villageName">
|
||||||
|
<el-input
|
||||||
|
v-model="searchForm.villageName"
|
||||||
|
placeholder="请输入村庄名称"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-form-item label="属地" prop="area">
|
||||||
|
<layout-cascader
|
||||||
|
v-model="searchForm.area"
|
||||||
|
:dictionaries-id="'e725d2a91b8248f4b8f49889038df7de'"
|
||||||
|
:check-strictly="true"
|
||||||
|
:level="5"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-form-item label="预警负责人" prop="countyWarningOfficer">
|
||||||
|
<el-input
|
||||||
|
v-model="searchForm.countyWarningOfficer"
|
||||||
|
placeholder="请输入预警负责人"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</app-search>
|
||||||
|
|
||||||
|
<app-table v-model:pagination="pagination" :data="list" @get-data="getData">
|
||||||
|
<el-table-column prop="villageName" label="村庄名称" />
|
||||||
|
<el-table-column prop="areaName" label="属地" />
|
||||||
|
<el-table-column prop="countyWarningOfficer" label="县级预警负责人" />
|
||||||
|
<el-table-column label="操作" width="120">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-button type="primary" text link @click="fnAddOrEdit(row, 'edit')"
|
||||||
|
>编辑</el-button
|
||||||
|
>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
text
|
||||||
|
link
|
||||||
|
@click="fnDelete(row.mountainFloodVillageId)"
|
||||||
|
>删除</el-button
|
||||||
|
>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<template #button>
|
||||||
|
<el-button type="primary" @click="fnAddOrEdit('', 'add')"
|
||||||
|
>新增</el-button
|
||||||
|
>
|
||||||
|
</template>
|
||||||
|
</app-table>
|
||||||
|
|
||||||
|
<add
|
||||||
|
v-model:form="data.addOrEditDialog.form"
|
||||||
|
v-model:visible="data.addOrEditDialog.visible"
|
||||||
|
:type="data.addOrEditDialog.type"
|
||||||
|
@get-data="resetPagination"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { reactive, nextTick } from "vue";
|
||||||
|
import { ElMessage, ElMessageBox } from "element-plus";
|
||||||
|
import { debounce } from "throttle-debounce";
|
||||||
|
import LayoutCascader from "@/components/layout_cascader/index.vue";
|
||||||
|
import AppTable from "@/components/table/index.vue";
|
||||||
|
import AppSearch from "@/components/search/index.vue";
|
||||||
|
import useListData from "@/hooks/useListData.js";
|
||||||
|
import {
|
||||||
|
getMountainFloodVillagePage,
|
||||||
|
setMountainFloodVillageDelete,
|
||||||
|
} from "@/request/kangzai.js";
|
||||||
|
import Add from "./components/add.vue";
|
||||||
|
|
||||||
|
const { list, pagination, searchForm, resetPagination, getData } = useListData(
|
||||||
|
getMountainFloodVillagePage,
|
||||||
|
{
|
||||||
|
beforeGetData: (searchForm) => {
|
||||||
|
const area = searchForm.area || [];
|
||||||
|
|
||||||
|
searchForm.province = area[0];
|
||||||
|
searchForm.city = area[1];
|
||||||
|
searchForm.county = area[2];
|
||||||
|
searchForm.village = area[3];
|
||||||
|
searchForm.street = area[4];
|
||||||
|
},
|
||||||
|
callback: () => {},
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
const data = reactive({
|
||||||
|
addOrEditDialog: {
|
||||||
|
visible: false,
|
||||||
|
type: "",
|
||||||
|
form: {
|
||||||
|
villageName: "",
|
||||||
|
province: "",
|
||||||
|
city: "",
|
||||||
|
county: "",
|
||||||
|
village: "",
|
||||||
|
street: "",
|
||||||
|
area: [],
|
||||||
|
areaName: [],
|
||||||
|
// 责任人信息
|
||||||
|
countyWarningOfficer: "",
|
||||||
|
countyWarningPhone: "",
|
||||||
|
countyOfficer: "",
|
||||||
|
countyOfficerPosition: "",
|
||||||
|
countyOfficerPhone: "",
|
||||||
|
townshipOfficer: "",
|
||||||
|
townshipOfficerPosition: "",
|
||||||
|
townshipOfficerPhone: "",
|
||||||
|
villageOfficer: "",
|
||||||
|
villageOfficerPosition: "",
|
||||||
|
villageOfficerPhone: "",
|
||||||
|
// 其他人员
|
||||||
|
monitorName: "",
|
||||||
|
monitorPosition: "",
|
||||||
|
monitorPhone: "",
|
||||||
|
remarks: "",
|
||||||
|
longitude: "",
|
||||||
|
latitude: "",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const fnDelete = debounce(
|
||||||
|
1000,
|
||||||
|
async (mountainFloodVillageId) => {
|
||||||
|
await ElMessageBox.confirm("确定要删除吗？", { type: "warning" });
|
||||||
|
await setMountainFloodVillageDelete({ mountainFloodVillageId });
|
||||||
|
ElMessage.success("删除成功");
|
||||||
|
resetPagination();
|
||||||
|
},
|
||||||
|
{ atBegin: true }
|
||||||
|
);
|
||||||
|
|
||||||
|
const fnAddOrEdit = async (row, type) => {
|
||||||
|
data.addOrEditDialog.visible = true;
|
||||||
|
await nextTick();
|
||||||
|
data.addOrEditDialog.form = {};
|
||||||
|
data.addOrEditDialog.type = type;
|
||||||
|
|
||||||
|
if (type === "edit") {
|
||||||
|
data.addOrEditDialog.form = row;
|
||||||
|
data.addOrEditDialog.form.area = [
|
||||||
|
row.province,
|
||||||
|
row.city,
|
||||||
|
row.county,
|
||||||
|
row.village,
|
||||||
|
row.street,
|
||||||
|
];
|
||||||
|
data.addOrEditDialog.form.areaName = row.areaName.split("-");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
|
|
@ -0,0 +1,212 @@
|
||||||
|
<template>
|
||||||
|
<el-dialog
|
||||||
|
v-model="visible"
|
||||||
|
:title="type === 'edit' ? '修改' : '新增'"
|
||||||
|
:before-close="fnClose"
|
||||||
|
>
|
||||||
|
<el-form
|
||||||
|
ref="formRef"
|
||||||
|
:model="form"
|
||||||
|
:rules="data.rules"
|
||||||
|
label-width="200px"
|
||||||
|
style="margin-top: 20px"
|
||||||
|
>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="水库名称" prop="reservoirName">
|
||||||
|
<el-input
|
||||||
|
v-model="form.reservoirName"
|
||||||
|
placeholder="请输入水库名称"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="水库类型" prop="reservoirType">
|
||||||
|
<el-select
|
||||||
|
v-model="form.reservoirType"
|
||||||
|
placeholder="请选择水库类型"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in reservoirTypeList"
|
||||||
|
:key="item.bianma"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item.bianma"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="水库等级" prop="reservoirLevel">
|
||||||
|
<el-select
|
||||||
|
v-model="form.reservoirLevel"
|
||||||
|
placeholder="请选择水库等级"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in reservoirLevelList"
|
||||||
|
:key="item.bianma"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item.bianma"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="极限库容（万立方米）" prop="maxCapacity">
|
||||||
|
<el-input v-model="form.maxCapacity" placeholder="请输入极限库容" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="当前库容（万立方米）" prop="currentCapacity">
|
||||||
|
<el-input
|
||||||
|
v-model="form.currentCapacity"
|
||||||
|
placeholder="请输入当前库容"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="24">
|
||||||
|
<div style="display: flex">
|
||||||
|
<el-form-item label="经度" prop="longitude" style="flex: 1">
|
||||||
|
<el-input v-model="form.longitude" placeholder="请选择经度" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="纬度" prop="latitude" style="flex: 1">
|
||||||
|
<el-input v-model="form.latitude" placeholder="请选择纬度" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label-width="10px">
|
||||||
|
<el-button
|
||||||
|
class="ml-10"
|
||||||
|
type="primary"
|
||||||
|
@click="fnSelectedPosition"
|
||||||
|
>点击定位</el-button
|
||||||
|
>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="fnClose">取 消</el-button>
|
||||||
|
<el-button type="primary" @click="fnSubmit">确 定</el-button>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<app-map
|
||||||
|
v-model:visible="mapDialog.visible"
|
||||||
|
v-model:longitude="mapDialog.longitude"
|
||||||
|
v-model:latitude="mapDialog.latitude"
|
||||||
|
@submit="fnMapSubmit"
|
||||||
|
/>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { debounce } from "throttle-debounce";
|
||||||
|
import useFormValidate from "@/hooks/useFormValidate.js";
|
||||||
|
import { ElMessage } from "element-plus";
|
||||||
|
import { reactive, ref } from "vue";
|
||||||
|
import { useVModels } from "@vueuse/core";
|
||||||
|
import AppMap from "@/components/map/map.vue";
|
||||||
|
import {
|
||||||
|
setReservoirBasicAdd,
|
||||||
|
setReservoirBasicUpdate,
|
||||||
|
} from "@/request/kangzai.js";
|
||||||
|
import { getDataDictionary } from "@/request/data_dictionary.js";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
visible: {
|
||||||
|
type: Boolean,
|
||||||
|
required: true,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
form: {
|
||||||
|
type: Object,
|
||||||
|
required: true,
|
||||||
|
default: () => ({}),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const { validate, formRef } = useFormValidate();
|
||||||
|
|
||||||
|
const emits = defineEmits(["update:visible", "update:form", "getData"]);
|
||||||
|
const { visible, form } = useVModels(props, emits);
|
||||||
|
|
||||||
|
// 字典数据
|
||||||
|
const reservoirTypeList = ref([]);
|
||||||
|
const reservoirLevelList = ref([]);
|
||||||
|
|
||||||
|
const fnGetDictData = async () => {
|
||||||
|
const [typeRes, levelRes] = await Promise.all([
|
||||||
|
getDataDictionary({ parentId: "848f91ce29ee1f2d078bc6ec69d440df" }),
|
||||||
|
getDataDictionary({ parentId: "a8b7c6d5e4f3g2h1i0j9k8l7m6n5o4p" }),
|
||||||
|
]);
|
||||||
|
reservoirTypeList.value = typeRes.dictionariesList;
|
||||||
|
reservoirLevelList.value = levelRes.dictionariesList;
|
||||||
|
};
|
||||||
|
fnGetDictData();
|
||||||
|
|
||||||
|
const data = reactive({
|
||||||
|
rules: {
|
||||||
|
reservoirName: [
|
||||||
|
{ required: true, message: "请输入水库名称", trigger: "blur" },
|
||||||
|
],
|
||||||
|
reservoirType: [
|
||||||
|
{ required: true, message: "请选择水库类型", trigger: "change" },
|
||||||
|
],
|
||||||
|
reservoirLevel: [
|
||||||
|
{ required: true, message: "请选择水库等级", trigger: "change" },
|
||||||
|
],
|
||||||
|
longitude: [{ required: true, message: "请输入经度", trigger: "blur" }],
|
||||||
|
latitude: [{ required: true, message: "请输入纬度", trigger: "blur" }],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const mapDialog = ref({
|
||||||
|
visible: false,
|
||||||
|
longitude: "",
|
||||||
|
latitude: "",
|
||||||
|
});
|
||||||
|
const fnSelectedPosition = () => {
|
||||||
|
mapDialog.value.visible = true;
|
||||||
|
mapDialog.value.longitude = form.value.longitude;
|
||||||
|
mapDialog.value.latitude = form.value.latitude;
|
||||||
|
};
|
||||||
|
const fnMapSubmit = ({ longitude, latitude }) => {
|
||||||
|
form.value.longitude = longitude;
|
||||||
|
form.value.latitude = latitude;
|
||||||
|
};
|
||||||
|
|
||||||
|
const fnClose = () => {
|
||||||
|
visible.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const fnSubmit = debounce(
|
||||||
|
1000,
|
||||||
|
async () => {
|
||||||
|
await validate();
|
||||||
|
const param = {
|
||||||
|
...form.value,
|
||||||
|
};
|
||||||
|
|
||||||
|
if (props.type === "add") {
|
||||||
|
await setReservoirBasicAdd(param);
|
||||||
|
} else if (props.type === "edit") {
|
||||||
|
await setReservoirBasicUpdate(param);
|
||||||
|
}
|
||||||
|
|
||||||
|
ElMessage.success("操作成功");
|
||||||
|
fnClose();
|
||||||
|
emits("getData");
|
||||||
|
},
|
||||||
|
{ atBegin: true }
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped></style>
|
||||||
|
|
@ -0,0 +1,161 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<app-search v-model="searchForm" @submit="resetPagination">
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-form-item label="水库名称" prop="reservoirName">
|
||||||
|
<el-input
|
||||||
|
v-model="searchForm.reservoirName"
|
||||||
|
placeholder="请输入水库名称"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-form-item label="水库类型" prop="reservoirType">
|
||||||
|
<el-select
|
||||||
|
v-model="searchForm.reservoirType"
|
||||||
|
placeholder="请选择水库类型"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in reservoirTypeList"
|
||||||
|
:key="item.bianma"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item.bianma"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-form-item label="水库等级" prop="reservoirLevel">
|
||||||
|
<el-select
|
||||||
|
v-model="searchForm.reservoirLevel"
|
||||||
|
placeholder="请选择水库等级"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in reservoirLevelList"
|
||||||
|
:key="item.bianma"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item.bianma"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</app-search>
|
||||||
|
|
||||||
|
<app-table v-model:pagination="pagination" :data="list" @get-data="getData">
|
||||||
|
<el-table-column prop="reservoirName" label="水库名称" />
|
||||||
|
<el-table-column label="水库类型" prop="reservoirTypeLabel" />
|
||||||
|
<el-table-column label="水库等级" prop="reservoirLevelLabel" />
|
||||||
|
<el-table-column prop="maxCapacity" label="极限库容（万立方米）" />
|
||||||
|
<el-table-column prop="currentCapacity" label="当前库容（万立方米）" />
|
||||||
|
<el-table-column label="操作" width="120">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-button type="primary" text link @click="fnAddOrEdit(row, 'edit')"
|
||||||
|
>编辑</el-button
|
||||||
|
>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
text
|
||||||
|
link
|
||||||
|
@click="fnDelete(row.reservoirBasicId)"
|
||||||
|
>删除</el-button
|
||||||
|
>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<template #button>
|
||||||
|
<el-button type="primary" @click="fnAddOrEdit('', 'add')"
|
||||||
|
>新增</el-button
|
||||||
|
>
|
||||||
|
</template>
|
||||||
|
</app-table>
|
||||||
|
|
||||||
|
<add
|
||||||
|
v-model:form="data.addOrEditDialog.form"
|
||||||
|
v-model:visible="data.addOrEditDialog.visible"
|
||||||
|
:type="data.addOrEditDialog.type"
|
||||||
|
@get-data="resetPagination"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, nextTick } from "vue";
|
||||||
|
import { getDataDictionary } from "@/request/data_dictionary.js";
|
||||||
|
import { ElMessage, ElMessageBox } from "element-plus";
|
||||||
|
import AppTable from "@/components/table/index.vue";
|
||||||
|
import AppSearch from "@/components/search/index.vue";
|
||||||
|
import useListData from "@/hooks/useListData.js";
|
||||||
|
import {
|
||||||
|
getReservoirBasicPage,
|
||||||
|
setReservoirBasicDelete,
|
||||||
|
} from "@/request/kangzai.js";
|
||||||
|
import Add from "./components/add.vue";
|
||||||
|
|
||||||
|
const reservoirTypeList = ref([]);
|
||||||
|
const reservoirLevelList = ref([]);
|
||||||
|
|
||||||
|
const fnGetDictData = async () => {
|
||||||
|
const [typeRes, levelRes] = await Promise.all([
|
||||||
|
getDataDictionary({ parentId: "848f91ce29ee1f2d078bc6ec69d440df" }),
|
||||||
|
getDataDictionary({ parentId: "a8b7c6d5e4f3g2h1i0j9k8l7m6n5o4p" }),
|
||||||
|
]);
|
||||||
|
reservoirTypeList.value = typeRes.dictionariesList;
|
||||||
|
reservoirLevelList.value = levelRes.dictionariesList;
|
||||||
|
};
|
||||||
|
fnGetDictData();
|
||||||
|
|
||||||
|
const { list, pagination, searchForm, resetPagination, getData } = useListData(
|
||||||
|
getReservoirBasicPage,
|
||||||
|
{
|
||||||
|
callback: (list) => {
|
||||||
|
list.forEach((item) => {
|
||||||
|
item.reservoirTypeLabel =
|
||||||
|
reservoirTypeList.value.find(
|
||||||
|
(dict) => dict.bianma === item.reservoirType
|
||||||
|
)?.name || item.reservoirType;
|
||||||
|
item.reservoirLevelLabel =
|
||||||
|
reservoirLevelList.value.find(
|
||||||
|
(dict) => dict.bianma === item.reservoirLevel
|
||||||
|
)?.name || item.reservoirLevel;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
const data = reactive({
|
||||||
|
addOrEditDialog: {
|
||||||
|
visible: false,
|
||||||
|
type: "",
|
||||||
|
form: {
|
||||||
|
reservoirName: "",
|
||||||
|
reservoirType: "",
|
||||||
|
reservoirLevel: "",
|
||||||
|
maxCapacity: "",
|
||||||
|
currentCapacity: "",
|
||||||
|
longitude: "",
|
||||||
|
latitude: "",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const fnDelete = async (reservoirBasicId) => {
|
||||||
|
await ElMessageBox.confirm("确定要删除吗？", { type: "warning" });
|
||||||
|
await setReservoirBasicDelete({ reservoirBasicId });
|
||||||
|
ElMessage.success("删除成功");
|
||||||
|
resetPagination();
|
||||||
|
};
|
||||||
|
|
||||||
|
const fnAddOrEdit = async (row, type) => {
|
||||||
|
data.addOrEditDialog.visible = true;
|
||||||
|
await nextTick();
|
||||||
|
data.addOrEditDialog.form = {};
|
||||||
|
data.addOrEditDialog.type = type;
|
||||||
|
|
||||||
|
if (type === "edit") {
|
||||||
|
data.addOrEditDialog.form = row;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
|
|
@ -0,0 +1,153 @@
|
||||||
|
<template>
|
||||||
|
<el-dialog
|
||||||
|
v-model="visible"
|
||||||
|
:title="type === 'edit' ? '修改' : '新增'"
|
||||||
|
:before-close="fnClose"
|
||||||
|
>
|
||||||
|
<el-form
|
||||||
|
ref="formRef"
|
||||||
|
:model="form"
|
||||||
|
:rules="data.rules"
|
||||||
|
label-width="200px"
|
||||||
|
style="margin-top: 20px"
|
||||||
|
>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="河流名称" prop="riverName">
|
||||||
|
<el-input v-model="form.riverName" placeholder="请输入河流名称" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="全长(km)" prop="totalLength">
|
||||||
|
<el-input
|
||||||
|
v-model.number="form.totalLength"
|
||||||
|
placeholder="请输入全长(km)"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="流域面积(km²)" prop="basinArea">
|
||||||
|
<el-input
|
||||||
|
v-model.number="form.basinArea"
|
||||||
|
placeholder="请输入流域面积(km²)"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item
|
||||||
|
label="占全市国土面积百分比(%)"
|
||||||
|
prop="cityAreaPercentage"
|
||||||
|
>
|
||||||
|
<el-input
|
||||||
|
v-model.number="form.cityAreaPercentage"
|
||||||
|
placeholder="请输入百分比"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="我市境内河长(km)" prop="inCityRiverLength">
|
||||||
|
<el-input
|
||||||
|
v-model.number="form.inCityRiverLength"
|
||||||
|
placeholder="请输入境内河长(km)"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="我市境内流域面积(km²)" prop="inCityBasinArea">
|
||||||
|
<el-input
|
||||||
|
v-model.number="form.inCityBasinArea"
|
||||||
|
placeholder="请输入境内流域面积(km²)"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="fnClose">取 消</el-button>
|
||||||
|
<el-button type="primary" @click="fnSubmit">确 定</el-button>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { debounce } from "throttle-debounce";
|
||||||
|
import useFormValidate from "@/hooks/useFormValidate.js";
|
||||||
|
import { ElMessage } from "element-plus";
|
||||||
|
import { reactive } from "vue";
|
||||||
|
import { useVModels } from "@vueuse/core";
|
||||||
|
import { setRiverAdd, setRiverUpdate } from "@/request/kangzai.js";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
visible: {
|
||||||
|
type: Boolean,
|
||||||
|
required: true,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
form: {
|
||||||
|
type: Object,
|
||||||
|
required: true,
|
||||||
|
default: () => ({}),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const { validate, formRef } = useFormValidate();
|
||||||
|
|
||||||
|
const emits = defineEmits(["update:visible", "update:form", "getData"]);
|
||||||
|
const { visible, form } = useVModels(props, emits);
|
||||||
|
|
||||||
|
const data = reactive({
|
||||||
|
rules: {
|
||||||
|
riverName: [{ required: true, message: "请输入河流名称", trigger: "blur" }],
|
||||||
|
totalLength: [
|
||||||
|
{ required: true, message: "请输入全长(km)", trigger: "blur" },
|
||||||
|
],
|
||||||
|
basinArea: [
|
||||||
|
{ required: true, message: "请输入流域面积(km²)", trigger: "blur" },
|
||||||
|
],
|
||||||
|
cityAreaPercentage: [
|
||||||
|
{ required: true, message: "请输入百分比(%)", trigger: "blur" },
|
||||||
|
],
|
||||||
|
inCityRiverLength: [
|
||||||
|
{ required: true, message: "请输入境内河长(km)", trigger: "blur" },
|
||||||
|
],
|
||||||
|
inCityBasinArea: [
|
||||||
|
{ required: true, message: "请输入境内流域面积(km²)", trigger: "blur" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const fnClose = () => {
|
||||||
|
visible.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const fnSubmit = debounce(
|
||||||
|
1000,
|
||||||
|
async () => {
|
||||||
|
await validate();
|
||||||
|
const param = { ...form.value };
|
||||||
|
|
||||||
|
if (props.type === "add") {
|
||||||
|
await setRiverAdd(param);
|
||||||
|
} else if (props.type === "edit") {
|
||||||
|
await setRiverUpdate(param);
|
||||||
|
}
|
||||||
|
|
||||||
|
ElMessage.success("操作成功");
|
||||||
|
fnClose();
|
||||||
|
emits("getData");
|
||||||
|
},
|
||||||
|
{ atBegin: true }
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped></style>
|
||||||
|
|
@ -0,0 +1,141 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<app-search v-model="searchForm" @submit="resetPagination">
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-form-item label="河流名称" prop="riverName">
|
||||||
|
<el-input
|
||||||
|
v-model="searchForm.riverName"
|
||||||
|
placeholder="请输入河流名称"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-form-item label="全长(km)" prop="totalLength">
|
||||||
|
<el-input v-model="searchForm.totalLength" placeholder="请输入全长" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-form-item label="流域面积(km²)" prop="basinArea">
|
||||||
|
<el-input
|
||||||
|
v-model="searchForm.basinArea"
|
||||||
|
placeholder="请输入流域面积"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</app-search>
|
||||||
|
|
||||||
|
<app-table v-model:pagination="pagination" :data="list" @get-data="getData">
|
||||||
|
<el-table-column prop="riverName" label="河流名称" />
|
||||||
|
<el-table-column prop="totalLength" label="全长(km)" />
|
||||||
|
<el-table-column prop="basinArea" label="流域面积(km²)" />
|
||||||
|
<el-table-column
|
||||||
|
prop="cityAreaPercentage"
|
||||||
|
label="占全市国土面积百分比(%)"
|
||||||
|
/>
|
||||||
|
<el-table-column prop="inCityRiverLength" label="我市境内河长(km)" />
|
||||||
|
<el-table-column prop="inCityBasinArea" label="我市境内流域面积(km²)" />
|
||||||
|
<el-table-column prop="countyCount" label="流经区县数" />
|
||||||
|
<el-table-column prop="riskVillageCount" label="河道行洪隐患区村庄数" />
|
||||||
|
<el-table-column label="操作" width="120" :show-overflow-tooltip="false">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
text
|
||||||
|
link
|
||||||
|
@click="
|
||||||
|
router.push({
|
||||||
|
path: '/river/risk_village',
|
||||||
|
query: { riverId: row.riverId },
|
||||||
|
})
|
||||||
|
"
|
||||||
|
>
|
||||||
|
查看隐患村
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
text
|
||||||
|
link
|
||||||
|
@click="
|
||||||
|
router.push({
|
||||||
|
path: '/river/river_section',
|
||||||
|
query: { riverId: row.riverId },
|
||||||
|
})
|
||||||
|
"
|
||||||
|
>
|
||||||
|
查看流经县区
|
||||||
|
</el-button>
|
||||||
|
<el-button type="primary" text link @click="fnAddOrEdit(row, 'edit')"
|
||||||
|
>编辑</el-button
|
||||||
|
>
|
||||||
|
<el-button type="primary" text link @click="fnDelete(row.riverId)"
|
||||||
|
>删除</el-button
|
||||||
|
>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<template #button>
|
||||||
|
<el-button type="primary" @click="fnAddOrEdit('', 'add')"
|
||||||
|
>新增</el-button
|
||||||
|
>
|
||||||
|
</template>
|
||||||
|
</app-table>
|
||||||
|
|
||||||
|
<add
|
||||||
|
v-model:form="data.addOrEditDialog.form"
|
||||||
|
v-model:visible="data.addOrEditDialog.visible"
|
||||||
|
:type="data.addOrEditDialog.type"
|
||||||
|
@get-data="resetPagination"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { reactive, nextTick } from "vue";
|
||||||
|
import { useRouter } from "vue-router";
|
||||||
|
import { ElMessage, ElMessageBox } from "element-plus";
|
||||||
|
import AppTable from "@/components/table/index.vue";
|
||||||
|
import AppSearch from "@/components/search/index.vue";
|
||||||
|
import useListData from "@/hooks/useListData.js";
|
||||||
|
import { getRiverPage, setRiverDelete } from "@/request/kangzai.js";
|
||||||
|
import Add from "./components/add.vue";
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
const { list, pagination, searchForm, resetPagination, getData } =
|
||||||
|
useListData(getRiverPage);
|
||||||
|
|
||||||
|
const data = reactive({
|
||||||
|
addOrEditDialog: {
|
||||||
|
visible: false,
|
||||||
|
type: "",
|
||||||
|
form: {
|
||||||
|
riverName: "",
|
||||||
|
totalLength: "",
|
||||||
|
basinArea: "",
|
||||||
|
cityAreaPercentage: "",
|
||||||
|
inCityRiverLength: "",
|
||||||
|
inCityBasinArea: "",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const fnDelete = async (riverId) => {
|
||||||
|
await ElMessageBox.confirm("确定要删除吗？", { type: "warning" });
|
||||||
|
await setRiverDelete({ riverId });
|
||||||
|
ElMessage.success("删除成功");
|
||||||
|
resetPagination();
|
||||||
|
};
|
||||||
|
|
||||||
|
const fnAddOrEdit = async (row, type) => {
|
||||||
|
data.addOrEditDialog.visible = true;
|
||||||
|
await nextTick();
|
||||||
|
data.addOrEditDialog.form = {};
|
||||||
|
data.addOrEditDialog.type = type;
|
||||||
|
|
||||||
|
if (type === "edit") {
|
||||||
|
data.addOrEditDialog.form = row;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
|
|
@ -0,0 +1,136 @@
|
||||||
|
<template>
|
||||||
|
<el-dialog
|
||||||
|
v-model="visible"
|
||||||
|
:title="type === 'edit' ? '修改' : '新增'"
|
||||||
|
:before-close="fnClose"
|
||||||
|
>
|
||||||
|
<el-form
|
||||||
|
ref="formRef"
|
||||||
|
:model="form"
|
||||||
|
:rules="data.rules"
|
||||||
|
label-width="120px"
|
||||||
|
style="margin-top: 20px"
|
||||||
|
>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="所属区县" prop="area">
|
||||||
|
<layout-cascader
|
||||||
|
v-model="form.area"
|
||||||
|
v-model:name="form.areaName"
|
||||||
|
:dictionaries-id="'e725d2a91b8248f4b8f49889038df7de'"
|
||||||
|
:check-strictly="false"
|
||||||
|
:level="4"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="隐患等级" prop="riskLevel">
|
||||||
|
<el-select v-model="form.riskLevel" placeholder="请选择隐患等级">
|
||||||
|
<el-option label="低风险" value="1" />
|
||||||
|
<el-option label="中风险" value="2" />
|
||||||
|
<el-option label="高风险" value="3" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="隐患描述" prop="riskDescription">
|
||||||
|
<el-input
|
||||||
|
v-model="form.riskDescription"
|
||||||
|
type="textarea"
|
||||||
|
:rows="3"
|
||||||
|
placeholder="请输入隐患描述"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="fnClose">取 消</el-button>
|
||||||
|
<el-button type="primary" @click="fnSubmit">确 定</el-button>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { debounce } from "throttle-debounce";
|
||||||
|
import useFormValidate from "@/hooks/useFormValidate.js";
|
||||||
|
import { ElMessage } from "element-plus";
|
||||||
|
import { reactive } from "vue";
|
||||||
|
import { useVModels } from "@vueuse/core";
|
||||||
|
import {
|
||||||
|
setRiverRiskVillageAdd,
|
||||||
|
setRiverRiskVillageUpdate,
|
||||||
|
} from "@/request/kangzai.js";
|
||||||
|
import LayoutCascader from "@/components/layout_cascader/index.vue";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
visible: {
|
||||||
|
type: Boolean,
|
||||||
|
required: true,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
form: {
|
||||||
|
type: Object,
|
||||||
|
required: true,
|
||||||
|
default: () => ({}),
|
||||||
|
},
|
||||||
|
riverId: {
|
||||||
|
type: [String, Number],
|
||||||
|
required: true,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const { validate, formRef } = useFormValidate();
|
||||||
|
|
||||||
|
const emits = defineEmits(["update:visible", "update:form", "getData"]);
|
||||||
|
const { visible, form } = useVModels(props, emits);
|
||||||
|
|
||||||
|
const data = reactive({
|
||||||
|
rules: {
|
||||||
|
area: [{ required: true, message: "请输入所属区县", trigger: "blur" }],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const fnClose = () => {
|
||||||
|
visible.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const fnSubmit = debounce(
|
||||||
|
1000,
|
||||||
|
async () => {
|
||||||
|
await validate();
|
||||||
|
const form = props.form;
|
||||||
|
const param = {
|
||||||
|
...form,
|
||||||
|
riverId: props.riverId,
|
||||||
|
areaName: form.areaName.join("-"),
|
||||||
|
province: form.area[0],
|
||||||
|
city: form.area[1],
|
||||||
|
county: form.area[2],
|
||||||
|
village: form.area[3],
|
||||||
|
street: form.area[4],
|
||||||
|
};
|
||||||
|
delete param.area;
|
||||||
|
if (props.type === "add") {
|
||||||
|
await setRiverRiskVillageAdd(param);
|
||||||
|
} else if (props.type === "edit") {
|
||||||
|
await setRiverRiskVillageUpdate(param);
|
||||||
|
}
|
||||||
|
|
||||||
|
ElMessage.success("操作成功");
|
||||||
|
fnClose();
|
||||||
|
emits("getData");
|
||||||
|
},
|
||||||
|
{ atBegin: true }
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped></style>
|
||||||
|
|
@ -0,0 +1,157 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<app-search v-model="searchForm" @submit="resetPagination">
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-form-item label="属地" prop="area">
|
||||||
|
<layout-cascader
|
||||||
|
v-model="searchForm.area"
|
||||||
|
v-model:name="searchForm.areaName"
|
||||||
|
:dictionaries-id="'e725d2a91b8248f4b8f49889038df7de'"
|
||||||
|
:check-strictly="false"
|
||||||
|
:level="4"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-form-item label="隐患等级" prop="riskLevel">
|
||||||
|
<el-select
|
||||||
|
v-model="searchForm.riskLevel"
|
||||||
|
placeholder="请选择隐患等级"
|
||||||
|
>
|
||||||
|
<el-option label="低风险" value="1" />
|
||||||
|
<el-option label="中风险" value="2" />
|
||||||
|
<el-option label="高风险" value="3" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</app-search>
|
||||||
|
|
||||||
|
<app-table v-model:pagination="pagination" :data="list" @get-data="getData">
|
||||||
|
<el-table-column prop="areaName" label="村庄名称" />
|
||||||
|
<el-table-column prop="riskLevelLabel" label="隐患等级" />
|
||||||
|
<el-table-column prop="riskDescription" label="隐患描述" />
|
||||||
|
<el-table-column label="操作" width="120">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-button type="primary" text link @click="fnAddOrEdit(row, 'edit')"
|
||||||
|
>编辑</el-button
|
||||||
|
>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
text
|
||||||
|
link
|
||||||
|
@click="fnDelete(row.riverRiskVillagesId)"
|
||||||
|
>删除</el-button
|
||||||
|
>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<template #button>
|
||||||
|
<el-button type="primary" @click="fnAddOrEdit('', 'add')"
|
||||||
|
>新增</el-button
|
||||||
|
>
|
||||||
|
</template>
|
||||||
|
</app-table>
|
||||||
|
|
||||||
|
<add
|
||||||
|
v-model:form="data.addOrEditDialog.form"
|
||||||
|
v-model:visible="data.addOrEditDialog.visible"
|
||||||
|
:type="data.addOrEditDialog.type"
|
||||||
|
:river-id="riverId"
|
||||||
|
@get-data="resetPagination"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive } from "vue";
|
||||||
|
import { useRoute } from "vue-router";
|
||||||
|
import { ElMessage, ElMessageBox } from "element-plus";
|
||||||
|
import AppTable from "@/components/table/index.vue";
|
||||||
|
import AppSearch from "@/components/search/index.vue";
|
||||||
|
import useListData from "@/hooks/useListData.js";
|
||||||
|
import Add from "./components/add.vue";
|
||||||
|
import LayoutCascader from "@/components/layout_cascader/index.vue";
|
||||||
|
import {
|
||||||
|
getRiverRiskVillagePage,
|
||||||
|
setRiverRiskVillageDelete,
|
||||||
|
} from "@/request/kangzai.js";
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
|
||||||
|
// 从路由获取 riverId
|
||||||
|
const riverId = ref(route.query.riverId);
|
||||||
|
|
||||||
|
if (!riverId.value) {
|
||||||
|
ElMessage.error("缺少关联河流ID");
|
||||||
|
// 可根据需要跳回河流列表
|
||||||
|
}
|
||||||
|
|
||||||
|
const riskLevelMap = {
|
||||||
|
1: "低风险",
|
||||||
|
2: "中风险",
|
||||||
|
3: "高风险",
|
||||||
|
};
|
||||||
|
|
||||||
|
const { list, pagination, searchForm, resetPagination, getData } = useListData(
|
||||||
|
getRiverRiskVillagePage,
|
||||||
|
{
|
||||||
|
defaultSearchForm: {
|
||||||
|
riverId: riverId.value,
|
||||||
|
},
|
||||||
|
beforeGetData: (searchForm) => {
|
||||||
|
const area = searchForm.area || [];
|
||||||
|
|
||||||
|
searchForm.province = area[0];
|
||||||
|
searchForm.city = area[1];
|
||||||
|
searchForm.county = area[2];
|
||||||
|
searchForm.village = area[3];
|
||||||
|
searchForm.street = area[4];
|
||||||
|
},
|
||||||
|
callback: (list) => {
|
||||||
|
list.forEach((item) => {
|
||||||
|
item.riskLevelLabel = riskLevelMap[item.riskLevel] || "未知";
|
||||||
|
});
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
const data = reactive({
|
||||||
|
addOrEditDialog: {
|
||||||
|
visible: false,
|
||||||
|
type: "",
|
||||||
|
form: {
|
||||||
|
villageName: "",
|
||||||
|
area: [],
|
||||||
|
areaName: [],
|
||||||
|
riskLevel: "",
|
||||||
|
riskDescription: "",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const fnDelete = async (riverRiskVillagesId) => {
|
||||||
|
await ElMessageBox.confirm("确定要删除吗？", { type: "warning" });
|
||||||
|
await setRiverRiskVillageDelete({ riverRiskVillagesId });
|
||||||
|
ElMessage.success("删除成功");
|
||||||
|
resetPagination();
|
||||||
|
};
|
||||||
|
|
||||||
|
const fnAddOrEdit = async (row, type) => {
|
||||||
|
data.addOrEditDialog.visible = true;
|
||||||
|
data.addOrEditDialog.type = type;
|
||||||
|
|
||||||
|
if (type === "edit") {
|
||||||
|
data.addOrEditDialog.form = { ...row };
|
||||||
|
data.addOrEditDialog.form.area = [
|
||||||
|
row.province,
|
||||||
|
row.city,
|
||||||
|
row.county,
|
||||||
|
row.village,
|
||||||
|
row.street,
|
||||||
|
];
|
||||||
|
data.addOrEditDialog.form.areaName = row.areaName.split("-");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
|
|
@ -0,0 +1,176 @@
|
||||||
|
<template>
|
||||||
|
<el-dialog
|
||||||
|
v-model="visible"
|
||||||
|
:title="type === 'edit' ? '修改' : '新增'"
|
||||||
|
:before-close="fnClose"
|
||||||
|
>
|
||||||
|
<el-form
|
||||||
|
ref="formRef"
|
||||||
|
:model="form"
|
||||||
|
:rules="data.rules"
|
||||||
|
label-width="150px"
|
||||||
|
style="margin-top: 20px"
|
||||||
|
>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="属地" prop="area">
|
||||||
|
<layout-cascader
|
||||||
|
v-model="form.area"
|
||||||
|
v-model:name="form.areaName"
|
||||||
|
:dictionaries-id="'e725d2a91b8248f4b8f49889038df7de'"
|
||||||
|
:check-strictly="false"
|
||||||
|
:level="2"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="县区段长度(km)" prop="sectionLength">
|
||||||
|
<el-input
|
||||||
|
v-model.number="form.sectionLength"
|
||||||
|
placeholder="请输入县区段长度"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="最小河宽(m)" prop="riverWidthMin">
|
||||||
|
<el-input
|
||||||
|
v-model.number="form.riverWidthMin"
|
||||||
|
placeholder="请输入最小河宽"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="最大河宽(m)" prop="riverWidthMax">
|
||||||
|
<el-input
|
||||||
|
v-model.number="form.riverWidthMax"
|
||||||
|
placeholder="请输入最大河宽"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="平均河宽(m)" prop="riverWidthAvg">
|
||||||
|
<el-input
|
||||||
|
v-model.number="form.riverWidthAvg"
|
||||||
|
placeholder="请输入平均河宽"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="河段特征描述" prop="sectionDescription">
|
||||||
|
<el-input
|
||||||
|
v-model="form.sectionDescription"
|
||||||
|
type="textarea"
|
||||||
|
:rows="3"
|
||||||
|
placeholder="请输入河段特征描述"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="fnClose">取 消</el-button>
|
||||||
|
<el-button type="primary" @click="fnSubmit">确 定</el-button>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { debounce } from "throttle-debounce";
|
||||||
|
import useFormValidate from "@/hooks/useFormValidate.js";
|
||||||
|
import { ElMessage } from "element-plus";
|
||||||
|
import { reactive } from "vue";
|
||||||
|
import { useVModels } from "@vueuse/core";
|
||||||
|
import LayoutCascader from "@/components/layout_cascader/index.vue";
|
||||||
|
import {
|
||||||
|
setRiverSectionsAdd,
|
||||||
|
setRiverSectionsUpdate,
|
||||||
|
} from "@/request/kangzai.js";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
visible: {
|
||||||
|
type: Boolean,
|
||||||
|
required: true,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
form: {
|
||||||
|
type: Object,
|
||||||
|
required: true,
|
||||||
|
default: () => ({}),
|
||||||
|
},
|
||||||
|
riverId: {
|
||||||
|
type: [String, Number],
|
||||||
|
required: true,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const { validate, formRef } = useFormValidate();
|
||||||
|
|
||||||
|
const emits = defineEmits(["update:visible", "update:form", "getData"]);
|
||||||
|
const { visible, form } = useVModels(props, emits);
|
||||||
|
|
||||||
|
const data = reactive({
|
||||||
|
rules: {
|
||||||
|
area: [{ required: true, message: "请选择属地", trigger: "change" }],
|
||||||
|
sectionLength: [
|
||||||
|
{ required: true, message: "请输入县区段长度", trigger: "blur" },
|
||||||
|
],
|
||||||
|
riverWidthMin: [
|
||||||
|
{ required: true, message: "请输入最小河宽", trigger: "blur" },
|
||||||
|
],
|
||||||
|
riverWidthMax: [
|
||||||
|
{ required: true, message: "请输入最大河宽", trigger: "blur" },
|
||||||
|
],
|
||||||
|
riverWidthAvg: [
|
||||||
|
{ required: true, message: "请输入平均河宽", trigger: "blur" },
|
||||||
|
],
|
||||||
|
sectionDescription: [
|
||||||
|
{ required: true, message: "请输入河段特征描述", trigger: "blur" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const fnClose = () => {
|
||||||
|
visible.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const fnSubmit = debounce(
|
||||||
|
1000,
|
||||||
|
async () => {
|
||||||
|
await validate();
|
||||||
|
const param = {
|
||||||
|
...form.value,
|
||||||
|
riverId: props.riverId,
|
||||||
|
province: form.value.area[0],
|
||||||
|
city: form.value.area[1],
|
||||||
|
county: form.value.area[2],
|
||||||
|
areaName: form.value.areaName.join("-"),
|
||||||
|
};
|
||||||
|
|
||||||
|
delete param.area;
|
||||||
|
|
||||||
|
if (props.type === "add") {
|
||||||
|
await setRiverSectionsAdd(param);
|
||||||
|
} else if (props.type === "edit") {
|
||||||
|
await setRiverSectionsUpdate(param);
|
||||||
|
}
|
||||||
|
|
||||||
|
ElMessage.success("操作成功");
|
||||||
|
fnClose();
|
||||||
|
emits("getData");
|
||||||
|
},
|
||||||
|
{ atBegin: true }
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped></style>
|
||||||
|
|
@ -0,0 +1,140 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<app-search v-model="searchForm" @submit="resetPagination">
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-form-item label="县区" prop="area">
|
||||||
|
<layout-cascader
|
||||||
|
v-model="searchForm.area"
|
||||||
|
:dictionaries-id="'e725d2a91b8248f4b8f49889038df7de'"
|
||||||
|
:check-strictly="false"
|
||||||
|
:level="2"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</app-search>
|
||||||
|
|
||||||
|
<app-table v-model:pagination="pagination" :data="list" @get-data="getData">
|
||||||
|
<el-table-column prop="areaName" label="地区" />
|
||||||
|
<el-table-column prop="sectionLength" label="县区段长度(km)" />
|
||||||
|
<el-table-column prop="riverWidthMin" label="最小河宽(m)" />
|
||||||
|
<el-table-column prop="riverWidthMax" label="最大河宽(m)" />
|
||||||
|
<el-table-column prop="riverWidthAvg" label="平均河宽(m)" />
|
||||||
|
<el-table-column prop="sectionDescription" label="河段特征描述" />
|
||||||
|
<el-table-column label="操作" width="120">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-button type="primary" text link @click="fnAddOrEdit(row, 'edit')"
|
||||||
|
>编辑</el-button
|
||||||
|
>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
text
|
||||||
|
link
|
||||||
|
@click="fnDelete(row.riverSectionsId)"
|
||||||
|
>删除</el-button
|
||||||
|
>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<template #button>
|
||||||
|
<el-button type="primary" @click="fnAddOrEdit('', 'add')"
|
||||||
|
>新增</el-button
|
||||||
|
>
|
||||||
|
</template>
|
||||||
|
</app-table>
|
||||||
|
|
||||||
|
<add
|
||||||
|
v-model:form="data.addOrEditDialog.form"
|
||||||
|
v-model:visible="data.addOrEditDialog.visible"
|
||||||
|
:type="data.addOrEditDialog.type"
|
||||||
|
:river-id="riverId"
|
||||||
|
@get-data="resetPagination"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive } from "vue";
|
||||||
|
import { useRoute } from "vue-router";
|
||||||
|
import { ElMessage, ElMessageBox } from "element-plus";
|
||||||
|
import AppTable from "@/components/table/index.vue";
|
||||||
|
import AppSearch from "@/components/search/index.vue";
|
||||||
|
import useListData from "@/hooks/useListData.js";
|
||||||
|
import Add from "./components/add.vue";
|
||||||
|
import LayoutCascader from "@/components/layout_cascader/index.vue";
|
||||||
|
import {
|
||||||
|
setRiverSectionsDelete,
|
||||||
|
setRiverSectionsListPage,
|
||||||
|
} from "@/request/kangzai.js";
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
const riverId = ref(route.query.riverId);
|
||||||
|
|
||||||
|
if (!riverId.value) {
|
||||||
|
ElMessage.error("缺少关联河流ID");
|
||||||
|
}
|
||||||
|
|
||||||
|
const { list, pagination, searchForm, resetPagination, getData } = useListData(
|
||||||
|
setRiverSectionsListPage,
|
||||||
|
{
|
||||||
|
defaultSearchForm: {
|
||||||
|
riverId: riverId.value,
|
||||||
|
},
|
||||||
|
beforeGetData: (searchForm) => {
|
||||||
|
const area = searchForm.area || [];
|
||||||
|
|
||||||
|
searchForm.province = area[0];
|
||||||
|
searchForm.city = area[1];
|
||||||
|
searchForm.county = area[2];
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
const data = reactive({
|
||||||
|
addOrEditDialog: {
|
||||||
|
visible: false,
|
||||||
|
type: "",
|
||||||
|
form: {
|
||||||
|
province: "",
|
||||||
|
city: "",
|
||||||
|
county: "",
|
||||||
|
areaName: [],
|
||||||
|
sectionLength: "",
|
||||||
|
riverWidthMin: "",
|
||||||
|
riverWidthMax: "",
|
||||||
|
riverWidthAvg: "",
|
||||||
|
sectionDescription: "",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const fnDelete = async (riverSectionsId) => {
|
||||||
|
await ElMessageBox.confirm("确定要删除吗？", { type: "warning" });
|
||||||
|
await setRiverSectionsDelete({ riverSectionsId });
|
||||||
|
ElMessage.success("删除成功");
|
||||||
|
resetPagination();
|
||||||
|
};
|
||||||
|
|
||||||
|
const fnAddOrEdit = async (row, type) => {
|
||||||
|
data.addOrEditDialog.visible = true;
|
||||||
|
data.addOrEditDialog.type = type;
|
||||||
|
|
||||||
|
if (type === "edit") {
|
||||||
|
data.addOrEditDialog.form = { ...row };
|
||||||
|
data.addOrEditDialog.form.area = [row.province, row.city, row.county];
|
||||||
|
data.addOrEditDialog.form.areaName = row.areaName.split("-");
|
||||||
|
} else {
|
||||||
|
data.addOrEditDialog.form = {
|
||||||
|
province: "",
|
||||||
|
city: "",
|
||||||
|
county: "",
|
||||||
|
areaName: [],
|
||||||
|
sectionLength: "",
|
||||||
|
riverWidthMin: "",
|
||||||
|
riverWidthMax: "",
|
||||||
|
riverWidthAvg: "",
|
||||||
|
sectionDescription: "",
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
|
|
@ -0,0 +1,141 @@
|
||||||
|
<template>
|
||||||
|
<el-dialog
|
||||||
|
v-model="visible"
|
||||||
|
:title="type === 'edit' ? '修改' : '新增'"
|
||||||
|
:before-close="fnClose"
|
||||||
|
>
|
||||||
|
<el-form
|
||||||
|
ref="formRef"
|
||||||
|
:model="form"
|
||||||
|
:rules="data.rules"
|
||||||
|
label-width="100px"
|
||||||
|
>
|
||||||
|
<el-form-item label="上级菜单">
|
||||||
|
<el-tag>{{ parentName }}</el-tag>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="名称" prop="name">
|
||||||
|
<el-input v-model="form.name" placeholder="请输入名称" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="编码" prop="bianma">
|
||||||
|
<el-input
|
||||||
|
v-model="form.bianma"
|
||||||
|
:disabled="type === 'edit'"
|
||||||
|
placeholder="请输入编码"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="排序" prop="orderBy">
|
||||||
|
<el-input v-model.number="form.orderBy" placeholder="请输入排序" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="备注" prop="descr">
|
||||||
|
<el-input
|
||||||
|
v-model="form.descr"
|
||||||
|
:autosize="{ minRows: 1 }"
|
||||||
|
type="textarea"
|
||||||
|
placeholder="请输入备注"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="fnClose">取 消</el-button>
|
||||||
|
<el-button type="primary" @click="fnSubmit">确 定</el-button>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import {
|
||||||
|
getDataDictionaryRepeat,
|
||||||
|
setDataDictionaryAdd,
|
||||||
|
setDataDictionaryEdit,
|
||||||
|
} from "@/request/system_management.js";
|
||||||
|
import { debounce } from "throttle-debounce";
|
||||||
|
import useFormValidate from "@/hooks/useFormValidate.js";
|
||||||
|
import { ElMessage } from "element-plus";
|
||||||
|
import { reactive } from "vue";
|
||||||
|
import { useVModels } from "@vueuse/core";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
visible: {
|
||||||
|
type: Boolean,
|
||||||
|
required: true,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
parentName: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
parentId: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
form: {
|
||||||
|
type: Object,
|
||||||
|
required: true,
|
||||||
|
default: () => ({}),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const emits = defineEmits(["update:visible", "update:form", "getData"]);
|
||||||
|
const { visible, form } = useVModels(props, emits);
|
||||||
|
const { validate, formRef } = useFormValidate();
|
||||||
|
const data = reactive({
|
||||||
|
rules: {
|
||||||
|
name: [
|
||||||
|
{ required: true, message: "字典名称不能为空", trigger: "change" },
|
||||||
|
{ min: 2, max: 30, message: "长度在2到30个字符", trigger: "blur" },
|
||||||
|
],
|
||||||
|
bianma: [
|
||||||
|
{ required: true, message: "字典编码名称不能为空", trigger: "change" },
|
||||||
|
{ min: 2, max: 30, message: "长度在2到30个字符", trigger: "blur" },
|
||||||
|
],
|
||||||
|
orderBy: [
|
||||||
|
{ required: true, message: "排序不能为空", trigger: ["change", "blur"] },
|
||||||
|
{
|
||||||
|
type: "number",
|
||||||
|
message: "排序必须为数字",
|
||||||
|
trigger: ["change", "blur"],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const fnClose = () => {
|
||||||
|
formRef.value.resetFields();
|
||||||
|
visible.value = false;
|
||||||
|
};
|
||||||
|
const fnSubmit = debounce(
|
||||||
|
1000,
|
||||||
|
async () => {
|
||||||
|
await validate();
|
||||||
|
if (props.type === "add") {
|
||||||
|
const { dictionaries } = await getDataDictionaryRepeat({
|
||||||
|
bianma: form.value.bianma,
|
||||||
|
});
|
||||||
|
if (dictionaries) {
|
||||||
|
ElMessage.error("添加失败，编码重复");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
await setDataDictionaryAdd({
|
||||||
|
...form.value,
|
||||||
|
parentId: props.parentId,
|
||||||
|
dictionariesId: undefined,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (props.type === "edit")
|
||||||
|
await setDataDictionaryEdit({
|
||||||
|
...form.value,
|
||||||
|
});
|
||||||
|
ElMessage.success("操作成功");
|
||||||
|
fnClose();
|
||||||
|
emits("getData");
|
||||||
|
},
|
||||||
|
{ atBegin: true }
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped></style>
|
||||||
|
|
@ -0,0 +1,130 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<app-table v-model:pagination="pagination" :data="list" @get-data="getData">
|
||||||
|
<el-table-column label="名称">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
text
|
||||||
|
link
|
||||||
|
@click="
|
||||||
|
router.push({
|
||||||
|
path: '/system_management/data_dictionary',
|
||||||
|
query: {
|
||||||
|
parentName: row.name,
|
||||||
|
parentId: row.dictionariesId,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
"
|
||||||
|
>
|
||||||
|
{{ row.name }} <el-icon><arrow-right /></el-icon>
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="bianma" label="编码" />
|
||||||
|
<el-table-column prop="dictionariesId" label="ID" width="300" />
|
||||||
|
<el-table-column prop="orderBy" label="排序" width="50" />
|
||||||
|
<el-table-column label="操作" width="100">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
text
|
||||||
|
link
|
||||||
|
@click="fnAddOrEdit(row.dictionariesId, 'edit')"
|
||||||
|
>
|
||||||
|
编辑
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
text
|
||||||
|
link
|
||||||
|
@click="fnDelete(row.dictionariesId)"
|
||||||
|
>
|
||||||
|
删除
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<template #button>
|
||||||
|
<el-button type="primary" @click="fnAddOrEdit('', 'add')">
|
||||||
|
新增
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
v-if="parentId !== '0'"
|
||||||
|
:icon="ArrowLeft"
|
||||||
|
@click="router.back()"
|
||||||
|
>
|
||||||
|
返回
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</app-table>
|
||||||
|
<add
|
||||||
|
v-model:form="data.addOrEditDialog.form"
|
||||||
|
v-model:visible="data.addOrEditDialog.visible"
|
||||||
|
:parent-name="parentName"
|
||||||
|
:parent-id="parentId"
|
||||||
|
:type="data.addOrEditDialog.type"
|
||||||
|
@get-data="resetPagination"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
|
||||||
|
import { reactive, ref } from "vue";
|
||||||
|
import { useRouter, onBeforeRouteUpdate, useRoute } from "vue-router";
|
||||||
|
import {
|
||||||
|
setDataDictionaryDelete,
|
||||||
|
getDataDictionaryList,
|
||||||
|
getDataDictionaryInfo,
|
||||||
|
} from "@/request/system_management.js";
|
||||||
|
import { ElMessage, ElMessageBox } from "element-plus";
|
||||||
|
import Add from "./components/add.vue";
|
||||||
|
import AppTable from "@/components/table/index.vue";
|
||||||
|
import useListData from "@/hooks/useListData.js";
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
const route = useRoute();
|
||||||
|
const parentIdDefault = "0";
|
||||||
|
const parentNameDefault = "（无）此项为顶级菜单";
|
||||||
|
const parentId = ref(route.query.parentId || parentIdDefault);
|
||||||
|
const parentName = ref(route.query.parentName || parentNameDefault);
|
||||||
|
const { list, pagination, getData, resetPagination } = useListData(
|
||||||
|
getDataDictionaryList,
|
||||||
|
{
|
||||||
|
params: () => ({ parentId: parentId.value }),
|
||||||
|
}
|
||||||
|
);
|
||||||
|
const data = reactive({
|
||||||
|
addOrEditDialog: {
|
||||||
|
visible: false,
|
||||||
|
type: "",
|
||||||
|
form: {
|
||||||
|
name: "",
|
||||||
|
bianma: "",
|
||||||
|
orderBy: "",
|
||||||
|
descr: "",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
onBeforeRouteUpdate((to) => {
|
||||||
|
parentId.value = to.query.parentId || parentIdDefault;
|
||||||
|
parentName.value = to.query.parentName || parentNameDefault;
|
||||||
|
resetPagination();
|
||||||
|
});
|
||||||
|
const fnDelete = async (dictionariesId) => {
|
||||||
|
await ElMessageBox.confirm(`确定要删除吗？`, { type: "warning" });
|
||||||
|
await setDataDictionaryDelete({ dictionariesId });
|
||||||
|
ElMessage.success("删除成功");
|
||||||
|
resetPagination();
|
||||||
|
};
|
||||||
|
const fnAddOrEdit = async (dictionariesId, type) => {
|
||||||
|
data.addOrEditDialog.visible = true;
|
||||||
|
data.addOrEditDialog.type = type;
|
||||||
|
if (type === "edit") {
|
||||||
|
const resData = await getDataDictionaryInfo({ dictionariesId });
|
||||||
|
data.addOrEditDialog.form = resData.dictionaries;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
|
|
@ -0,0 +1,213 @@
|
||||||
|
<template>
|
||||||
|
<el-dialog
|
||||||
|
v-model="visible"
|
||||||
|
:title="type === 'edit' ? '修改' : '新增'"
|
||||||
|
:before-close="fnClose"
|
||||||
|
>
|
||||||
|
<el-form
|
||||||
|
ref="formRef"
|
||||||
|
:model="form"
|
||||||
|
:rules="data.rules"
|
||||||
|
label-width="100px"
|
||||||
|
style="margin-top: 20px"
|
||||||
|
>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="防涝点名称" prop="pointName">
|
||||||
|
<el-input v-model="form.pointName" placeholder="请输入防涝点名称" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="属地" prop="area">
|
||||||
|
<layout-cascader
|
||||||
|
v-model="form.area"
|
||||||
|
v-model:name="form.areaName"
|
||||||
|
:dictionaries-id="'e725d2a91b8248f4b8f49889038df7de'"
|
||||||
|
:check-strictly="false"
|
||||||
|
:level="4"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="类型" prop="pointType">
|
||||||
|
<el-select v-model="form.pointType" placeholder="请选择类型">
|
||||||
|
<el-option
|
||||||
|
v-for="item in pointTypeList"
|
||||||
|
:key="item.bianma"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item.bianma"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="当前水位" prop="currentWaterLevel">
|
||||||
|
<el-input
|
||||||
|
v-model="form.currentWaterLevel"
|
||||||
|
placeholder="请输入当前水位"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="备注" prop="remarks">
|
||||||
|
<el-input
|
||||||
|
v-model="form.remarks"
|
||||||
|
type="textarea"
|
||||||
|
:rows="3"
|
||||||
|
placeholder="请输入备注"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="24">
|
||||||
|
<div style="display: flex">
|
||||||
|
<el-form-item label="经度" prop="longitude" style="flex: 1">
|
||||||
|
<el-input
|
||||||
|
v-model="form.longitude"
|
||||||
|
placeholder="请选择经度"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="纬度" prop="latitude" style="flex: 1">
|
||||||
|
<el-input
|
||||||
|
v-model="form.latitude"
|
||||||
|
placeholder="请选择纬度"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label-width="10px">
|
||||||
|
<el-button
|
||||||
|
class="ml-10"
|
||||||
|
type="primary"
|
||||||
|
@click="fnSelectedPosition"
|
||||||
|
>点击定位</el-button
|
||||||
|
>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="fnClose">取 消</el-button>
|
||||||
|
<el-button type="primary" @click="fnSubmit">确 定</el-button>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<app-map
|
||||||
|
v-model:visible="mapDialog.visible"
|
||||||
|
v-model:longitude="mapDialog.longitude"
|
||||||
|
v-model:latitude="mapDialog.latitude"
|
||||||
|
@submit="fnMapSubmit"
|
||||||
|
/>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { debounce } from "throttle-debounce";
|
||||||
|
import useFormValidate from "@/hooks/useFormValidate.js";
|
||||||
|
import LayoutCascader from "@/components/layout_cascader/index.vue";
|
||||||
|
import { getDataDictionary } from "@/request/data_dictionary.js";
|
||||||
|
import { ElMessage } from "element-plus";
|
||||||
|
import { reactive, ref } from "vue";
|
||||||
|
import { useVModels } from "@vueuse/core";
|
||||||
|
import AppMap from "@/components/map/map.vue";
|
||||||
|
import {
|
||||||
|
setUrbanFloodPointAdd,
|
||||||
|
setUrbanFloodPointUpdate,
|
||||||
|
} from "@/request/kangzai.js";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
visible: {
|
||||||
|
type: Boolean,
|
||||||
|
required: true,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
form: {
|
||||||
|
type: Object,
|
||||||
|
required: true,
|
||||||
|
default: () => ({}),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const { validate, formRef } = useFormValidate();
|
||||||
|
|
||||||
|
const emits = defineEmits(["update:visible", "update:form", "getData"]);
|
||||||
|
const { visible, form } = useVModels(props, emits);
|
||||||
|
|
||||||
|
const pointTypeList = ref([]);
|
||||||
|
|
||||||
|
const fnGetPointTypeList = async () => {
|
||||||
|
const resData = await getDataDictionary({
|
||||||
|
parentId: "d4e5f6g7h8i9j0k1l2m3n4o5p6q7r8s", // 新字典ID
|
||||||
|
});
|
||||||
|
pointTypeList.value = resData.dictionariesList || [];
|
||||||
|
};
|
||||||
|
|
||||||
|
fnGetPointTypeList();
|
||||||
|
|
||||||
|
const data = reactive({
|
||||||
|
rules: {
|
||||||
|
pointName: [
|
||||||
|
{ required: true, message: "请输入防涝点名称", trigger: "blur" },
|
||||||
|
],
|
||||||
|
area: [{ required: true, message: "请选择区域", trigger: "blur" }],
|
||||||
|
pointType: [{ required: true, message: "请选择类型", trigger: "change" }],
|
||||||
|
longitude: [{ required: true, message: "请输入经度", trigger: "blur" }],
|
||||||
|
latitude: [{ required: true, message: "请输入纬度", trigger: "blur" }],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const mapDialog = ref({
|
||||||
|
visible: false,
|
||||||
|
longitude: "",
|
||||||
|
latitude: "",
|
||||||
|
});
|
||||||
|
const fnSelectedPosition = () => {
|
||||||
|
mapDialog.value.visible = true;
|
||||||
|
mapDialog.value.longitude = form.value.longitude;
|
||||||
|
mapDialog.value.latitude = form.value.latitude;
|
||||||
|
};
|
||||||
|
const fnMapSubmit = ({ longitude, latitude }) => {
|
||||||
|
form.value.longitude = longitude;
|
||||||
|
form.value.latitude = latitude;
|
||||||
|
};
|
||||||
|
|
||||||
|
const fnClose = () => {
|
||||||
|
visible.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const fnSubmit = debounce(
|
||||||
|
1000,
|
||||||
|
async () => {
|
||||||
|
await validate();
|
||||||
|
const param = {
|
||||||
|
...form.value,
|
||||||
|
areaName: form.value.areaName.join("-"),
|
||||||
|
province: form.value.area[0],
|
||||||
|
city: form.value.area[1],
|
||||||
|
county: form.value.area[2],
|
||||||
|
village: form.value.area[3],
|
||||||
|
street: form.value.area[4],
|
||||||
|
};
|
||||||
|
delete param.area;
|
||||||
|
|
||||||
|
if (props.type === "add") {
|
||||||
|
await setUrbanFloodPointAdd(param);
|
||||||
|
} else if (props.type === "edit") {
|
||||||
|
await setUrbanFloodPointUpdate(param);
|
||||||
|
}
|
||||||
|
|
||||||
|
ElMessage.success("操作成功");
|
||||||
|
fnClose();
|
||||||
|
emits("getData");
|
||||||
|
},
|
||||||
|
{ atBegin: true }
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped></style>
|
||||||
|
|
@ -0,0 +1,168 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<app-search v-model="searchForm" @submit="resetPagination">
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-form-item label="防涝点名称" prop="pointName">
|
||||||
|
<el-input
|
||||||
|
v-model="searchForm.pointName"
|
||||||
|
placeholder="请输入防涝点名称"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-form-item label="属地" prop="area">
|
||||||
|
<layout-cascader
|
||||||
|
v-model="searchForm.area"
|
||||||
|
:dictionaries-id="'e725d2a91b8248f4b8f49889038df7de'"
|
||||||
|
:check-strictly="true"
|
||||||
|
:level="5"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-form-item label="类型" prop="pointType">
|
||||||
|
<el-select v-model="searchForm.pointType" placeholder="请选择类型">
|
||||||
|
<el-option
|
||||||
|
v-for="item in pointTypeList"
|
||||||
|
:key="item.bianma"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item.bianma"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</app-search>
|
||||||
|
|
||||||
|
<app-table v-model:pagination="pagination" :data="list" @get-data="getData">
|
||||||
|
<el-table-column prop="pointName" label="防涝点名称" />
|
||||||
|
<el-table-column prop="areaName" label="属地" />
|
||||||
|
<el-table-column label="类型" prop="pointTypeLabel" />
|
||||||
|
<el-table-column prop="currentWaterLevel" label="当前水位" />
|
||||||
|
<el-table-column label="操作" width="120">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-button type="primary" text link @click="fnAddOrEdit(row, 'edit')"
|
||||||
|
>编辑</el-button
|
||||||
|
>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
text
|
||||||
|
link
|
||||||
|
@click="fnDelete(row.urbanFloodPointId)"
|
||||||
|
>删除</el-button
|
||||||
|
>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<template #button>
|
||||||
|
<el-button type="primary" @click="fnAddOrEdit('', 'add')"
|
||||||
|
>新增</el-button
|
||||||
|
>
|
||||||
|
</template>
|
||||||
|
</app-table>
|
||||||
|
|
||||||
|
<add
|
||||||
|
v-model:form="data.addOrEditDialog.form"
|
||||||
|
v-model:visible="data.addOrEditDialog.visible"
|
||||||
|
:type="data.addOrEditDialog.type"
|
||||||
|
@get-data="resetPagination"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, nextTick } from "vue";
|
||||||
|
import { getDataDictionary } from "@/request/data_dictionary.js";
|
||||||
|
import { ElMessage, ElMessageBox } from "element-plus";
|
||||||
|
import LayoutCascader from "@/components/layout_cascader/index.vue";
|
||||||
|
import AppTable from "@/components/table/index.vue";
|
||||||
|
import AppSearch from "@/components/search/index.vue";
|
||||||
|
import useListData from "@/hooks/useListData.js";
|
||||||
|
import {
|
||||||
|
getUrbanFloodPointPage,
|
||||||
|
setUrbanFloodPointDelete,
|
||||||
|
} from "@/request/kangzai.js";
|
||||||
|
import Add from "./components/add.vue";
|
||||||
|
|
||||||
|
// 防涝点类型字典
|
||||||
|
const pointTypeList = ref([]);
|
||||||
|
const fnGetPointTypeList = async () => {
|
||||||
|
const resData = await getDataDictionary({
|
||||||
|
parentId: "d4e5f6g7h8i9j0k1l2m3n4o5p6q7r8s", // 新字典ID
|
||||||
|
});
|
||||||
|
pointTypeList.value = resData.dictionariesList || [];
|
||||||
|
};
|
||||||
|
fnGetPointTypeList();
|
||||||
|
|
||||||
|
const { list, pagination, searchForm, resetPagination, getData } = useListData(
|
||||||
|
getUrbanFloodPointPage,
|
||||||
|
{
|
||||||
|
beforeGetData: (searchForm) => {
|
||||||
|
const area = searchForm.area || [];
|
||||||
|
|
||||||
|
searchForm.province = area[0];
|
||||||
|
searchForm.city = area[1];
|
||||||
|
searchForm.county = area[2];
|
||||||
|
searchForm.village = area[3];
|
||||||
|
searchForm.street = area[4];
|
||||||
|
},
|
||||||
|
callback: (list) => {
|
||||||
|
list.forEach((item) => {
|
||||||
|
item.pointTypeLabel =
|
||||||
|
pointTypeList.value.find((dict) => dict.bianma === item.pointType)
|
||||||
|
?.name || item.pointType;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
const data = reactive({
|
||||||
|
addOrEditDialog: {
|
||||||
|
visible: false,
|
||||||
|
type: "",
|
||||||
|
form: {
|
||||||
|
pointName: "",
|
||||||
|
province: "",
|
||||||
|
city: "",
|
||||||
|
county: "",
|
||||||
|
village: "",
|
||||||
|
street: "",
|
||||||
|
area: [],
|
||||||
|
areaName: [],
|
||||||
|
pointType: "",
|
||||||
|
currentWaterLevel: "",
|
||||||
|
longitude: "",
|
||||||
|
latitude: "",
|
||||||
|
remarks: "",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const fnDelete = async (urbanFloodPointId) => {
|
||||||
|
await ElMessageBox.confirm("确定要删除吗？", { type: "warning" });
|
||||||
|
await setUrbanFloodPointDelete({ urbanFloodPointId });
|
||||||
|
ElMessage.success("删除成功");
|
||||||
|
resetPagination();
|
||||||
|
};
|
||||||
|
|
||||||
|
const fnAddOrEdit = async (row, type) => {
|
||||||
|
data.addOrEditDialog.visible = true;
|
||||||
|
await nextTick();
|
||||||
|
data.addOrEditDialog.form = {};
|
||||||
|
data.addOrEditDialog.type = type;
|
||||||
|
|
||||||
|
if (type === "edit") {
|
||||||
|
data.addOrEditDialog.form = row;
|
||||||
|
data.addOrEditDialog.form.area = [
|
||||||
|
row.province,
|
||||||
|
row.city,
|
||||||
|
row.county,
|
||||||
|
row.village,
|
||||||
|
row.street,
|
||||||
|
];
|
||||||
|
data.addOrEditDialog.form.areaName = row.areaName.split("-");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
Loading…
Reference in New Issue