Merge branch 'dev' of http://222.212.85.86:8222/bdzl2/bxztApp into dev
This commit is contained in:
commit
6cdc8e25cc
47
packages/screen/src/component/DynamicDetail/BlockItem.vue
Normal file
47
packages/screen/src/component/DynamicDetail/BlockItem.vue
Normal file
@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<div class="block-item">
|
||||
<slot v-if="title" name="header">
|
||||
<div class="header">
|
||||
<div class="header-title">{{ title }}</div>
|
||||
<div class="header-extra" v-if="$slots.headerExtra">
|
||||
<slot name="headerExtra"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</slot>
|
||||
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
})
|
||||
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.block-item {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
& + .block-item {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.header-title {
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
color: #4a4a4a;
|
||||
line-height: 16px;
|
||||
}
|
||||
</style>
|
||||
65
packages/screen/src/component/DynamicDetail/DynamicData.vue
Normal file
65
packages/screen/src/component/DynamicDetail/DynamicData.vue
Normal file
@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<div class="dynamic-data">
|
||||
<span class="info-label">{{ config.label }}：</span>
|
||||
<span class="info-value">{{ getModelValue() || '-' }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { onMounted, ref, inject, toRaw } from 'vue'
|
||||
|
||||
const formData = inject('formData')
|
||||
|
||||
const props = defineProps({
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
})
|
||||
|
||||
const getModelValue = () => {
|
||||
if (props.config.value !== null && props.config.value !== undefined && props.config.value !== '') return props.config.value
|
||||
if (typeof props.config.value == 'function') return props.config.value(formData.value)
|
||||
|
||||
if (!props.config.prop) {
|
||||
console.error('请配置prop属性', toRaw(props.config))
|
||||
return null
|
||||
}
|
||||
const keys = props.config.prop?.split('.')
|
||||
let current = formData.value
|
||||
for (const key of keys) {
|
||||
if (typeof current != 'object' || !current[key]) return null
|
||||
current = current[key]
|
||||
}
|
||||
|
||||
return current
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.dynamic-data {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
line-height: 1.5;
|
||||
|
||||
& + .dynamic-data {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
&.margin {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
color: #909399;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
flex: 1;
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<div class="dynamic-detail">
|
||||
<template v-for="(config, configIndex) in configList" :key="configIndex">
|
||||
<DynamicDetailItem :config="config" />
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { onMounted, watch, ref, provide, computed } from 'vue'
|
||||
import DynamicDetailItem from './DynamicDetailItem.vue'
|
||||
const props = defineProps({
|
||||
configList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
modelValue: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
})
|
||||
const computedModelValue = computed(() => {
|
||||
return props.modelValue
|
||||
})
|
||||
provide('formData', computedModelValue)
|
||||
|
||||
const formRef = ref(null)
|
||||
|
||||
// 获得默认表单值
|
||||
const getDefaultFormValue = () => {
|
||||
const form = {}
|
||||
props.formConfig.forEach((config) => {
|
||||
form[config.name] = config.default !== undefined ? config.default : ''
|
||||
})
|
||||
return form
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
getDefaultFormValue,
|
||||
formComponent: formRef.value
|
||||
})
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.form-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<template v-if="isShow() && !config.slot && checkLayout(config)">
|
||||
<DynamicLayout :config="config">
|
||||
<DynamicDetailItem v-for="(item, index) in config.children" :key="index" :config="item" />
|
||||
</DynamicLayout>
|
||||
</template>
|
||||
<template v-if="isShow() && !config.slot && !checkLayout(config)">
|
||||
<el-col class="col-item" :span="config.span">
|
||||
<DynamicData style="width: 100%" :config="config" />
|
||||
</el-col>
|
||||
</template>
|
||||
<template v-if="isShow() && config.slot">
|
||||
<slot />
|
||||
</template>
|
||||
</template>
|
||||
<script setup>
|
||||
import { onMounted, ref , inject} from 'vue'
|
||||
import DynamicLayout from './DynamicLayout.vue'
|
||||
import DynamicData from './DynamicData.vue'
|
||||
|
||||
const layoutTypes = ['card', 'block', 'row']
|
||||
const checkLayout = (config) => {
|
||||
return layoutTypes.includes(config?.type)
|
||||
}
|
||||
|
||||
const formData = inject('formData')
|
||||
|
||||
const props = defineProps({
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
})
|
||||
|
||||
const isShow = () => {
|
||||
if(props.config.show === false) return false
|
||||
if(typeof props.config.show === 'function') return props.config.show(formData)
|
||||
return true
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.col-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<template v-if="config.type == 'card'">
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="section-header">
|
||||
<span class="section-title">{{ config.label }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<slot />
|
||||
</el-card>
|
||||
</template>
|
||||
<template v-else-if="config.type == 'block'">
|
||||
<BlockItem :title="config.label">
|
||||
<slot />
|
||||
</BlockItem>
|
||||
</template>
|
||||
<template v-else-if="config.type == 'row'">
|
||||
<el-row v-bind="config.componentProps">
|
||||
<slot />
|
||||
</el-row>
|
||||
</template>
|
||||
</template>
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue'
|
||||
import BlockItem from './BlockItem.vue';
|
||||
|
||||
const props = defineProps({
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
})
|
||||
</script>
|
||||
<style scoped lang="scss"></style>
|
||||
47
packages/screen/src/component/DynamicForm/BlockItem.vue
Normal file
47
packages/screen/src/component/DynamicForm/BlockItem.vue
Normal file
@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<div class="block-item">
|
||||
<slot v-if="title" name="header">
|
||||
<div class="header">
|
||||
<div class="header-title">{{ title }}</div>
|
||||
<div class="header-extra" v-if="$slots.headerExtra">
|
||||
<slot name="headerExtra"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</slot>
|
||||
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
})
|
||||
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.block-item {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
& + .block-item {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.header-title {
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
color: #4a4a4a;
|
||||
line-height: 16px;
|
||||
}
|
||||
</style>
|
||||
111
packages/screen/src/component/DynamicForm/DynamicControl.vue
Normal file
111
packages/screen/src/component/DynamicForm/DynamicControl.vue
Normal file
@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<div class="dynamic-control">
|
||||
<template v-if="config.type == 'input'">
|
||||
<el-input
|
||||
style="width: 100%"
|
||||
:modelValue="getModelValue()"
|
||||
@update:modelValue="changeModelValue"
|
||||
:placeholder="config.componentProps?.placeholder"
|
||||
:clearable="true"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template v-if="config.type == 'inputNumber'">
|
||||
<el-input-number
|
||||
style="width: 100%"
|
||||
:modelValue="getModelValue()"
|
||||
@update:modelValue="changeModelValue"
|
||||
:placeholder="config.componentProps?.placeholder"
|
||||
:clearable="true"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template v-if="config.type == 'radio'">
|
||||
<el-radio-group
|
||||
style="width: 100%"
|
||||
:modelValue="getModelValue()"
|
||||
@update:modelValue="changeModelValue"
|
||||
:placeholder="config.componentProps?.placeholder"
|
||||
>
|
||||
<el-radio v-for="(option, i) in config.options" :value="option.value">{{
|
||||
option.label
|
||||
}}</el-radio>
|
||||
</el-radio-group>
|
||||
</template>
|
||||
|
||||
<template v-if="config.type == 'select'">
|
||||
<el-select
|
||||
style="width: 100%"
|
||||
:modelValue="getModelValue()"
|
||||
@update:modelValue="changeModelValue"
|
||||
:placeholder="config.componentProps?.placeholder"
|
||||
>
|
||||
<el-option
|
||||
v-for="(option, i) in config.options"
|
||||
:key="i"
|
||||
:label="option.label"
|
||||
:value="option.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<template v-if="config.type == 'date'">
|
||||
<el-date-picker
|
||||
style="width: 100%"
|
||||
:modelValue="getModelValue()"
|
||||
type="date"
|
||||
@update:modelValue="changeModelValue"
|
||||
:placeholder="config.componentProps?.placeholder"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { onMounted, ref, inject, toRaw } from 'vue'
|
||||
|
||||
const formData = inject('formData')
|
||||
|
||||
const props = defineProps({
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
})
|
||||
|
||||
const getModelValue = () => {
|
||||
if(!props.config.prop) {
|
||||
console.error('请配置prop属性', toRaw(props.config))
|
||||
return null
|
||||
}
|
||||
const keys = props.config.prop?.split('.')
|
||||
let current = formData.value
|
||||
for (const key of keys) {
|
||||
if (typeof current != 'object' || !current[key]) return null
|
||||
current = current[key]
|
||||
}
|
||||
return current
|
||||
}
|
||||
|
||||
const changeModelValue = (value) => {
|
||||
if(!props.config.prop) {
|
||||
return null
|
||||
}
|
||||
// 1. 将路径字符串 'event.name' 按 '.' 拆分成数组
|
||||
const keys = props.config.prop?.split('.')
|
||||
|
||||
// 2. 一直遍历到倒数第一个属性，确保中间路径上的对象都存在
|
||||
let current = formData.value
|
||||
for (let i = 0; i < keys.length - 1; i++) {
|
||||
const key = keys[i]
|
||||
// 如果中间层不存在，就自动创建一个空对象
|
||||
if (!current[key] || typeof current[key] !== 'object') {
|
||||
current[key] = {}
|
||||
}
|
||||
current = current[key]
|
||||
}
|
||||
|
||||
// 3. 在最后一层进行赋值
|
||||
current[keys[keys.length - 1]] = value
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss"></style>
|
||||
@ -1,91 +1,52 @@
|
||||
<template>
|
||||
<div class="dynamic-form">
|
||||
<el-form class="form-wrapper" :model="modelValue" ref="formRef">
|
||||
<el-form-item v-for="(config, index) in formConfig" :key="index" :prop="config['prop']"
|
||||
:label="config['label']" :rules="config['rules']" label-position="right">
|
||||
|
||||
<template v-if="config.type == 'input'">
|
||||
<el-input :modelValue="modelValue[config.name]"
|
||||
@update:modelValue="(event) => changeValue(config, event)"
|
||||
:placeholder="config.componentProps?.placeholder" :clearable="true" />
|
||||
</template>
|
||||
|
||||
|
||||
<template v-if="config.type == 'inputNumber'">
|
||||
<el-input-number :modelValue="modelValue[config.name]"
|
||||
@update:modelValue="(event) => changeValue(config, event)"
|
||||
:placeholder="config.componentProps?.placeholder" :clearable="true" />
|
||||
</template>
|
||||
|
||||
|
||||
<template v-if="config.type == 'radio'">
|
||||
<el-radio-group :modelValue="modelValue[config.name]"
|
||||
@update:modelValue="(event) => changeValue(config, event)"
|
||||
:placeholder="config.componentProps?.placeholder">
|
||||
<el-radio v-for="(option, i) in config.options" :value="option.value">{{ option.label
|
||||
}}</el-radio>
|
||||
</el-radio-group>
|
||||
</template>
|
||||
|
||||
|
||||
<template v-if="config.type == 'select'">
|
||||
<el-select :modelValue="modelValue[config.name]"
|
||||
@update:modelValue="(event) => changeValue(config, event)"
|
||||
:placeholder="config.componentProps?.placeholder">
|
||||
<el-option v-for="(option, i) in config.options" :key="i" :label="option.label"
|
||||
:value="option.value"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<template v-if="config.type == 'date'">
|
||||
<el-date-picker :modelValue="modelValue[config.name]" type="date"
|
||||
@update:modelValue="(event) => changeValue(config, event)"
|
||||
:placeholder="config.componentProps?.placeholder" />
|
||||
</template>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="dynamic-form">
|
||||
<el-form class="form-wrapper" :model="modelValue" ref="formRef">
|
||||
<template v-for="(config, configIndex) in configList" :key="configIndex">
|
||||
<DynamicFormItem :config="config" />
|
||||
</template>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { onMounted, watch, ref } from 'vue';
|
||||
import { onMounted, watch, ref, provide } from 'vue'
|
||||
import DynamicFormItem from './DynamicFormItem.vue'
|
||||
const props = defineProps({
|
||||
formConfig: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
modelValue: {
|
||||
type: Object,
|
||||
default: () => { }
|
||||
}
|
||||
configList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
modelValue: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
})
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
|
||||
const computedModelValue = computed(() => {
|
||||
return props.modelValue
|
||||
})
|
||||
|
||||
provide('formData', computedModelValue)
|
||||
|
||||
const formRef = ref(null)
|
||||
const changeValue = (config, value) => {
|
||||
const form = { ...props.modelValue }
|
||||
form[config.name] = value
|
||||
emit('update:modelValue', form)
|
||||
}
|
||||
|
||||
// 获得默认表单值
|
||||
const getDefaultFormValue = () => {
|
||||
const form = {}
|
||||
props.formConfig.forEach(config => {
|
||||
form[config.name] = config.default !== undefined ? config.default : ''
|
||||
})
|
||||
return form
|
||||
const form = {}
|
||||
props.formConfig.forEach((config) => {
|
||||
form[config.name] = config.default !== undefined ? config.default : ''
|
||||
})
|
||||
return form
|
||||
}
|
||||
|
||||
|
||||
defineExpose({
|
||||
getDefaultFormValue,
|
||||
formComponent: formRef.value,
|
||||
getDefaultFormValue,
|
||||
formComponent: formRef.value
|
||||
})
|
||||
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.form-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 16px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<template v-if="!config.slot && checkLayout(config)">
|
||||
<DynamicLayout :config="config">
|
||||
<DynamicFormItem v-for="(item, index) in config.children" :key="index" :config="item" />
|
||||
</DynamicLayout>
|
||||
</template>
|
||||
<template v-if="!config.slot && !checkLayout(config)">
|
||||
<el-col :span="config.span">
|
||||
<el-form-item :label="config.label" :prop="config.prop">
|
||||
<DynamicControl style="width: 100%" :config="config" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</template>
|
||||
<template v-if="config.slot">
|
||||
<slot />
|
||||
</template>
|
||||
</template>
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import DynamicLayout from './DynamicLayout.vue';
|
||||
import DynamicControl from './DynamicControl.vue';
|
||||
|
||||
const layoutTypes = ['card', 'block', 'row']
|
||||
const checkLayout = (config) => {
|
||||
return layoutTypes.includes(config?.type)
|
||||
};
|
||||
|
||||
const props = defineProps({
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
</style>
|
||||
39
packages/screen/src/component/DynamicForm/DynamicLayout.vue
Normal file
39
packages/screen/src/component/DynamicForm/DynamicLayout.vue
Normal file
@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<template v-if="config.type == 'card'">
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="section-header">
|
||||
<span class="section-title">{{ config.label }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<slot />
|
||||
</el-card>
|
||||
</template>
|
||||
<template v-else-if="config.type == 'block'">
|
||||
<BlockItem :title="config.label">
|
||||
<slot />
|
||||
</BlockItem>
|
||||
</template>
|
||||
<template v-else-if="config.type == 'row'">
|
||||
<el-row v-bind="config.componentProps">
|
||||
<slot />
|
||||
</el-row>
|
||||
</template>
|
||||
<template v-else-if="config.type == 'col'">
|
||||
<el-col v-bind="config.componentProps">
|
||||
<slot />
|
||||
</el-col>
|
||||
</template>
|
||||
</template>
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue'
|
||||
import BlockItem from './BlockItem.vue';
|
||||
|
||||
const props = defineProps({
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
})
|
||||
</script>
|
||||
<style scoped lang="scss"></style>
|
||||
@ -45,7 +45,8 @@ export default () => {
|
||||
await getMenuList();
|
||||
const firstMenuItem = menuList.value[0]?.children?.[0];
|
||||
if (firstMenuItem) {
|
||||
handleMenuClick(firstMenuItem);
|
||||
// 注释掉进入页面点击第一项的逻辑 后续记得打开
|
||||
// handleMenuClick(firstMenuItem);
|
||||
}
|
||||
}
|
||||
}, { immediate: true });
|
||||
|
||||
@ -258,6 +258,7 @@ const routes = [
|
||||
component: () => import('../views/DisasterManagement/IceDisasterReport/IceDisasterReportPC.vue'),
|
||||
meta: {
|
||||
title: '冰雪灾害上报',
|
||||
parentRoute: 'disasterManagement',
|
||||
breadcrumb: true
|
||||
}
|
||||
},
|
||||
@ -266,6 +267,7 @@ const routes = [
|
||||
component: () => import('../views/DisasterManagement/IceDisasterDetail/IceDisasterDetailPC.vue'),
|
||||
meta: {
|
||||
title: '冰雪灾害详情',
|
||||
parentRoute: 'disasterManagement',
|
||||
breadcrumb: true
|
||||
}
|
||||
},
|
||||
@ -274,6 +276,7 @@ const routes = [
|
||||
component: () => import('../views/DisasterManagement/WaterDisasterReport/WaterDisasterReportPC.vue'),
|
||||
meta: {
|
||||
title: '水毁灾害上报',
|
||||
parentRoute: 'disasterManagement',
|
||||
breadcrumb: true
|
||||
}
|
||||
},
|
||||
@ -283,6 +286,7 @@ const routes = [
|
||||
component: () => import('../views/DisasterManagement/WaterDisasterDetail/WaterDisasterDetailPC.vue'),
|
||||
meta: {
|
||||
title: '水毁事件详情',
|
||||
parentRoute: 'disasterManagement',
|
||||
breadcrumb: true
|
||||
}
|
||||
}
|
||||
|
||||
@ -323,7 +323,7 @@ const handleDetail = (row) => {
|
||||
router.push({ path: '/waterDisasterDetail', query: { id: row.id } })
|
||||
}
|
||||
if (row.disasterType == 'ICE_SNOW') {
|
||||
router.push({ path: '/iceDisasterDetail', query: { id: row.id } })
|
||||
router.push({ path: '/iceDisasterDetail', query: { id: row.relationId } })
|
||||
}
|
||||
}
|
||||
|
||||
@ -333,7 +333,7 @@ const handleEdit = (row) => {
|
||||
router.push({ path: '/waterDisasterDetail', query: { id: row.id, mode: 'edit' } })
|
||||
}
|
||||
if (row.disasterType == 'ICE_SNOW') {
|
||||
router.push({ path: '/iceDisasterDetail', query: { id: row.id, mode: 'edit' } })
|
||||
router.push({ path: '/iceDisasterDetail', query: { id: row.relationId, mode: 'edit' } })
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,238 +1,13 @@
|
||||
<template>
|
||||
<div class="web-detail-container">
|
||||
<!-- 页面头部 -->
|
||||
<div class="page-header">
|
||||
<div class="header-left">
|
||||
<el-button :icon="ArrowLeft" @click="handleClickBack">返回</el-button>
|
||||
<h2 class="page-title">冰雪事件详情</h2>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<el-tag :type="getEventStatusType()" size="large">
|
||||
{{ getEventStatusText() }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-container">
|
||||
<div class="left-panel">
|
||||
<!-- 基本信息卡片 -->
|
||||
<el-card class="info-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">基本信息</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-row :gutter="20" class="info-row">
|
||||
<el-col :span="8">
|
||||
<div class="info-item">
|
||||
<span class="info-label">事件类型：</span>
|
||||
<span class="info-value">冰雪事件</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="info-item">
|
||||
<span class="info-label">路况类别：</span>
|
||||
<span class="info-value">{{ detailData.roadConditionType || '-' }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="info-item">
|
||||
<span class="info-label">是否阻断：</span>
|
||||
<span class="info-value">{{ detailData.event?.isBlocked ? '是' : '否' }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20" class="info-row">
|
||||
<el-col :span="8">
|
||||
<div class="info-item">
|
||||
<span class="info-label">抢险进度：</span>
|
||||
<span class="info-value">{{ detailData.event?.repairProgress || '-' }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="info-item">
|
||||
<span class="info-label">处理措施：</span>
|
||||
<span class="info-value">{{ getBaseDisposalMeasures() }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="info-item">
|
||||
<span class="info-label">水毁处数：</span>
|
||||
<span class="info-value">{{ detailData.event?.damageCount || 0 }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20" class="info-row">
|
||||
<el-col :span="8">
|
||||
<div class="info-item">
|
||||
<span class="info-label">阻断里程：</span>
|
||||
<span class="info-value">{{ detailData.event?.blockedMileage ? detailData.event.blockedMileage + '公里' : '-' }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20" class="info-row">
|
||||
<el-col :span="8">
|
||||
<div class="info-item">
|
||||
<span class="info-label">地点路线：</span>
|
||||
<span class="info-value">{{ detailData.occurLocation || '-' }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="info-item">
|
||||
<span class="info-label">起点桩号：</span>
|
||||
<span class="info-value">{{ detailData.event?.startStakeNo || '-' }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="info-item">
|
||||
<span class="info-label">止点桩号：</span>
|
||||
<span class="info-value">{{ detailData.event?.endStakeNo || '-' }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20" class="info-row">
|
||||
<el-col :span="8">
|
||||
<div class="info-item">
|
||||
<span class="info-label">路况位置：</span>
|
||||
<span class="info-value">{{ detailData.event?.blockedPointName || detailData.occurLocation || '-' }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="info-item">
|
||||
<span class="info-label">阻断点小地名：</span>
|
||||
<span class="info-value">{{ detailData.event?.blockedPointName || '-' }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20" class="info-row">
|
||||
<el-col :span="8">
|
||||
<div class="info-item">
|
||||
<span class="info-label">所属区县：</span>
|
||||
<span class="info-value">{{ detailData.event?.district || '-' }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="info-item">
|
||||
<span class="info-label">发生时间：</span>
|
||||
<span class="info-value">{{ detailData.occurTime || '-' }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20" class="info-row">
|
||||
<el-col :span="8">
|
||||
<div class="info-item">
|
||||
<span class="info-label">是否恢复重建：</span>
|
||||
<span class="info-value">{{ detailData.event?.needsRecovery ? '是' : '否' }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="16" v-if="detailData.event?.needsRecovery">
|
||||
<div class="info-item">
|
||||
<span class="info-label">恢复重建预估费用：</span>
|
||||
<span class="info-value">{{ detailData.event?.estimatedRecoveryCost ? detailData.event.estimatedRecoveryCost + '万元' : '-' }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 填报信息卡片 -->
|
||||
<el-card class="info-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">填报信息</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-if="hasReportData">
|
||||
<div v-for="(report, index) in allReports" :key="index" class="report-section">
|
||||
<div class="report-header">
|
||||
<span class="report-title">{{ report?.title }}</span>
|
||||
<span class="report-meta">时间：{{ report.reportTime || '-' }}</span>
|
||||
</div>
|
||||
<div class="content-wrapper">
|
||||
<div class="basic-info-wrapper">
|
||||
<div class="info-list">
|
||||
<div class="info-item">
|
||||
<span class="info-label">现场描述：</span>
|
||||
<span class="info-value">{{ report.siteDescription || '-' }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">处置措施：</span>
|
||||
<span class="info-value">{{ report.disposalMeasures || '-' }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">实际恢复时间：</span>
|
||||
<span class="info-value">{{ report.actualRecoverTime || '-' }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">预计恢复时间：</span>
|
||||
<span class="info-value">{{ report.expectRecoverTime || '-' }}</span>
|
||||
</div>
|
||||
|
||||
<div class="info-item">
|
||||
<span class="info-label">填报人：</span>
|
||||
<span class="info-value">{{ report.reporterName ? report.reporterName : '-' }}</span>
|
||||
</div>
|
||||
|
||||
<div class="info-item">
|
||||
<span class="info-label">联系电话：</span>
|
||||
<span class="info-value">{{ report.phone ? report.phone : '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="file-list">
|
||||
<FileUpload v-model="report.fileList" :readonly="!isEdit" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detal-info-wrapper">
|
||||
<template v-if="report.showDetail">
|
||||
<LossListDetail :modelValue="report.lossList" :col-span="8" />
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="8">
|
||||
<div class="info-item margin">
|
||||
<span class="info-label">投入机械：</span>
|
||||
<span class="info-value">{{ report.investedMachinery ? report.investedMachinery + '台/班' : '-'}}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="info-item margin">
|
||||
<span class="info-label">投入人力：</span>
|
||||
<span class="info-value">{{ report.investedManpower ? report.investedManpower + '人次' : '-'}}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="info-item margin">
|
||||
<span class="info-label">投入资金：</span>
|
||||
<span class="info-value">{{ report.investedFunds ? report.investedFunds + '万元' : '-'}}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<el-button style="margin-top: 30px" type="primary" link @click="report.showDetail = !report.showDetail">
|
||||
{{ report.showDetail ? '点击关闭详情' : '点击查看详情' }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-empty v-else description="暂无填报信息" :image-size="100" />
|
||||
</el-card>
|
||||
|
||||
<!-- 底部按钮 -->
|
||||
<!-- <div class="footer-buttons">
|
||||
<el-button type="primary" size="large" @click="handleContinueReport" class="footer-btn"> 续报 </el-button>
|
||||
</div> -->
|
||||
<DynamicDetail v-model="detailData" :config-list="detailConfig" />
|
||||
</div>
|
||||
<div class="right-panel" v-if="isEdit">
|
||||
<!-- <div class="right-panel" v-if="isEdit">
|
||||
<ContinueReport ref="continueReport" @refresh="getDisasterDetail" />
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -245,6 +20,8 @@ import { ArrowLeft, Picture, VideoCamera } from '@element-plus/icons-vue'
|
||||
import ContinueReport from './IceDisasterContinueReportPC.vue'
|
||||
import { request } from '@shared/utils/request'
|
||||
import FileUpload from '@/component/FileUpload/FileUpload.vue'
|
||||
import detailConfig from './detailConfig'
|
||||
import DynamicDetail from '@/component/DynamicDetail/DynamicDetail.vue'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
@ -291,57 +68,6 @@ const hasReportData = computed(() => {
|
||||
return allReports.value.length > 0
|
||||
})
|
||||
|
||||
// 获取事件状态文本
|
||||
const getEventStatusText = () => {
|
||||
return eventStatus.value === 1 ? '已解除' : '未解除'
|
||||
}
|
||||
|
||||
// 获取事件状态类型
|
||||
const getEventStatusType = () => {
|
||||
return eventStatus.value === 1 ? 'success' : 'danger'
|
||||
}
|
||||
|
||||
const getBaseDisposalMeasures = () => {
|
||||
const firstItem = allReports.value[0]
|
||||
if (!firstItem) return '-'
|
||||
return formatDisposalMeasures(firstItem.disposalMeasures || '') || '-'
|
||||
}
|
||||
|
||||
// 格式化处置措施
|
||||
const formatDisposalMeasures = (measures) => {
|
||||
if (!measures) return ''
|
||||
const measureMap = {
|
||||
半幅封闭: '半幅封闭',
|
||||
全副封闭: '全副封闭',
|
||||
便道通行: '便道通行',
|
||||
正常通行: '正常通行'
|
||||
}
|
||||
return measures
|
||||
.split(',')
|
||||
.map((m) => measureMap[m.trim()] || m.trim())
|
||||
.join('、')
|
||||
}
|
||||
|
||||
// 获取损失描述
|
||||
const getLossDescription = (report) => {
|
||||
const lossList = report?.lossList
|
||||
if (!lossList || lossList.length === 0) return '-'
|
||||
|
||||
const totalVolume = lossList.reduce((sum, loss) => {
|
||||
const volume = (loss.length || 0) * (loss.width || 0) * (loss.height || 0)
|
||||
return sum + volume
|
||||
}, 0)
|
||||
|
||||
const totalAmount = lossList.reduce((sum, loss) => sum + (loss.totalAmount || 0), 0)
|
||||
|
||||
return `${totalVolume}方，共损失${totalAmount}万元`
|
||||
}
|
||||
|
||||
// 获取车辆滞留文本
|
||||
const getVehicleStrandedText = (report) => {
|
||||
const count = report?.strandedVehicleCount || 0
|
||||
return count > 0 ? `有车滞留，共${count}辆` : '无车滞留'
|
||||
}
|
||||
|
||||
// 获取灾毁详情
|
||||
const getDisasterDetail = async () => {
|
||||
@ -353,9 +79,8 @@ const getDisasterDetail = async () => {
|
||||
|
||||
try {
|
||||
const result = await request({
|
||||
url: `/snow-ops-platform/water-damage/getById`,
|
||||
url: `/snow-ops-platform/event/getById?id=${route.query.id}`,
|
||||
method: 'get',
|
||||
params: { id }
|
||||
})
|
||||
|
||||
if (result?.data) {
|
||||
@ -601,6 +326,5 @@ onMounted(() => {
|
||||
overflow: hidden;
|
||||
}
|
||||
.file-list {
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,111 @@
|
||||
export default [
|
||||
{
|
||||
type: 'card',
|
||||
label: '基础信息',
|
||||
children: [
|
||||
{
|
||||
type: 'row',
|
||||
children: [
|
||||
{
|
||||
span: 8,
|
||||
label: '事件类型',
|
||||
value: '冰雪事件',
|
||||
},
|
||||
{
|
||||
span: 8,
|
||||
label: '路况类别',
|
||||
prop: 'event.routeNo'
|
||||
},
|
||||
{
|
||||
span: 8,
|
||||
label: '处理措施',
|
||||
prop: 'event.disposalMeasures'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'row',
|
||||
children: [
|
||||
{
|
||||
span: 8,
|
||||
label: '地点路线',
|
||||
prop: 'event.occurLocation'
|
||||
},
|
||||
{
|
||||
span: 8,
|
||||
label: '起点桩号',
|
||||
prop: 'event.startStakeNo'
|
||||
},
|
||||
{
|
||||
span: 8,
|
||||
label: '止点桩号',
|
||||
prop: 'event.endStakeNo'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'row',
|
||||
children: [
|
||||
{
|
||||
span: 8,
|
||||
label: '路况位置',
|
||||
prop: 'event.occurLocation'
|
||||
},
|
||||
{
|
||||
span: 8,
|
||||
label: '阻断点小地名',
|
||||
prop: 'event.occurLocation'
|
||||
},
|
||||
{
|
||||
span: 8,
|
||||
label: '地点路线',
|
||||
prop: 'event.occurLocation'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'row',
|
||||
children: [
|
||||
{
|
||||
span: 24,
|
||||
label: '受灾里程',
|
||||
prop: 'event.disasterMileage'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'row',
|
||||
children: [
|
||||
{
|
||||
span: 8,
|
||||
label: '所属区县',
|
||||
prop: 'event.district'
|
||||
},
|
||||
{
|
||||
span: 8,
|
||||
label: '发现时间',
|
||||
prop: 'event.occurTime'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'row',
|
||||
children: [
|
||||
{
|
||||
span: 8,
|
||||
label: '是否需要恢复重建',
|
||||
prop: 'event.actualRecoverTime'
|
||||
},
|
||||
{
|
||||
show: (formData) => {
|
||||
return formData.event?.actualRecoverTime
|
||||
},
|
||||
span: 8,
|
||||
label: '恢复重建预估费用（万元）',
|
||||
prop: 'event.estimatedRecoveryCost'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
@ -1,11 +1,5 @@
|
||||
<template>
|
||||
<div class="disaster-form-page">
|
||||
<el-page-header style="margin-bottom: 10px;" @back="router.go(-1)" class="page-header">
|
||||
<template #content>
|
||||
<span class="title">{{ '冰雪灾害填报' }}</span>
|
||||
</template>
|
||||
</el-page-header>
|
||||
|
||||
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="140px" class="disaster-form" @submit.prevent>
|
||||
<!-- 基本信息区块 -->
|
||||
<el-card class="form-section" shadow="never">
|
||||
|
||||
@ -149,7 +149,7 @@ const props = defineProps({
|
||||
})
|
||||
|
||||
// Emits 定义
|
||||
const emit = defineEmits(['input', 'change', 'submit'])
|
||||
const emit = defineEmits(['input', 'change'])
|
||||
|
||||
// 表单数据
|
||||
const formData = reactive({
|
||||
@ -293,14 +293,6 @@ const calibrateTime = () => {
|
||||
|
||||
// 表单验证
|
||||
const validate = () => {
|
||||
if (!formData.occurTime) {
|
||||
ElMessage.warning('请填写发生时间')
|
||||
return false
|
||||
}
|
||||
if (!formData.routeNo) {
|
||||
ElMessage.warning('请填写线路编号')
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
@ -354,13 +346,6 @@ const resetForm = () => {
|
||||
disposalMeasureValue.value = ''
|
||||
}
|
||||
|
||||
// 提交方法
|
||||
const submit = () => {
|
||||
if (validate()) {
|
||||
emit('submit', getFormData())
|
||||
}
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
// 验证表单
|
||||
if (!validate()) {
|
||||
|
||||
@ -1,17 +1,5 @@
|
||||
<template>
|
||||
<div class="web-detail-container">
|
||||
<!-- 页面头部 -->
|
||||
<div class="page-header">
|
||||
<div class="header-left">
|
||||
<el-button :icon="ArrowLeft" @click="handleClickBack">返回</el-button>
|
||||
<h2 class="page-title">水毁事件详情</h2>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<el-tag :type="getEventStatusType()" size="large">
|
||||
{{ getEventStatusText() }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-container">
|
||||
<div class="left-panel">
|
||||
@ -293,16 +281,6 @@ const hasReportData = computed(() => {
|
||||
return allReports.value.length > 0
|
||||
})
|
||||
|
||||
// 获取事件状态文本
|
||||
const getEventStatusText = () => {
|
||||
return eventStatus.value === 1 ? '已解除' : '未解除'
|
||||
}
|
||||
|
||||
// 获取事件状态类型
|
||||
const getEventStatusType = () => {
|
||||
return eventStatus.value === 1 ? 'success' : 'danger'
|
||||
}
|
||||
|
||||
const getBaseDisposalMeasures = () => {
|
||||
const firstItem = allReports.value[0]
|
||||
if (!firstItem) return '-'
|
||||
|
||||
@ -1,11 +1,5 @@
|
||||
<template>
|
||||
<div class="disaster-form-page">
|
||||
<el-page-header style="margin-bottom: 10px;" @back="router.go(-1)" class="page-header">
|
||||
<template #content>
|
||||
<span class="title">{{ '水毁灾害填报' }}</span>
|
||||
</template>
|
||||
</el-page-header>
|
||||
|
||||
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="140px" class="disaster-form" @submit.prevent>
|
||||
<!-- 基本信息区块 -->
|
||||
<el-card class="form-section" shadow="never">
|
||||
|
||||
@ -2,91 +2,46 @@
|
||||
<div class="detail-container">
|
||||
<el-form ref="formRef" :model="form" label-position="right" label-width="auto"
|
||||
style="max-height: 60vh; overflow-y: auto; padding-right: 50px" :rules="rules">
|
||||
<div class="form-part">
|
||||
<el-row>
|
||||
<h4 style="margin: 0 0 20px 0;">气象信息</h4>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="预警标题" prop="预警标题">
|
||||
<el-input v-model="form.headline" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="预警时间" prop="预警时间">
|
||||
<el-col :span="11">
|
||||
<el-date-picker v-model="form.onset" type="date" placeholder="开始时间" style="width: 100%" />
|
||||
</el-col>
|
||||
<el-col :span="2" class="text-center">
|
||||
<span class="text-gray-500">-</span>
|
||||
</el-col>
|
||||
<el-col :span="11">
|
||||
<el-date-picker v-model="form.expires" type="date" placeholder="过期时间" style="width: 100%" />
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="气象类型" prop="气象类型">
|
||||
<el-select v-model="form.eventType" clearable placeholder="请选择">
|
||||
<el-option v-for="(item, index) in [
|
||||
{ label: '道路结冰', value: '道路结冰' },
|
||||
{ label: '暴雪', value: '暴雪' },
|
||||
{ label: '暴雨', value: '暴雨' },
|
||||
]" :key="index" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="气象来源" prop="气象来源">
|
||||
<el-select v-model="form.weatherSource" clearable placeholder="请选择">
|
||||
<el-option v-for="(item, index) in [
|
||||
{ label: '市级', value: '1' },
|
||||
{ label: '部级', value: '2' },
|
||||
{ label: '区县', value: '3' },
|
||||
]" :key="index" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="预警等级" prop="预警等级">
|
||||
<el-select v-model="form.urgency" clearable placeholder="请选择">
|
||||
<el-option v-for="(item, index) in [
|
||||
{ label: '1级（红色预警）', value: '1' },
|
||||
{ label: '2级（橙色预警）', value: '2' },
|
||||
{ label: '3级（黄色预警）', value: '3' },
|
||||
{ label: '4级（蓝色预警）', value: '4' },
|
||||
]" :key="index" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="风险区县" prop="风险区县">
|
||||
<el-select v-model="form.areaCodes" clearable placeholder="请选择" multiple>
|
||||
<el-option v-for="(item, index) in areaList" :key="index" :label="item.qxmc" :value="item.xzdm" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<el-form-item label="" prop="schedules">
|
||||
<div class="tree-transfer-container">
|
||||
<!-- 左侧树形结构 -->
|
||||
<div class="tree-panel">
|
||||
<el-tree :data="treeOrgs" :props="{
|
||||
children: 'children',
|
||||
label: 'orgName'
|
||||
}" node-key="orgId" :expand-on-click-node="false" :default-expand-all="false" highlight-current
|
||||
style="height: 400px; overflow-y: auto;"
|
||||
@node-click="handleNodeClick">
|
||||
<template #default="{ node, data }">
|
||||
<span class="custom-tree-node">
|
||||
<span>{{ node.label }}</span>
|
||||
</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
</div>
|
||||
|
||||
<!-- 中间空白区域 -->
|
||||
<div class="middle-panel">
|
||||
<!-- 暂留空，后续使用 -->
|
||||
</div>
|
||||
|
||||
<!-- 右侧空白区域 -->
|
||||
<div class="right-panel">
|
||||
<!-- 暂留空，后续使用 -->
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, watch, computed } from "vue";
|
||||
import { ref, computed, onMounted } from "vue";
|
||||
import { request } from "@/utils/request";
|
||||
import FileUpload from '@/component/FileUpload/FileUpload.vue'
|
||||
import { ElMessage } from 'element-plus';
|
||||
|
||||
const formRef = ref(null);
|
||||
defineExpose({ formRef });
|
||||
|
||||
@ -97,47 +52,144 @@ const props = defineProps({
|
||||
},
|
||||
});
|
||||
|
||||
const areaList = ref([])
|
||||
|
||||
// 获取区县列表
|
||||
const getAreaList = async () => {
|
||||
|
||||
const rules = computed(() => {
|
||||
return {
|
||||
|
||||
};
|
||||
});
|
||||
|
||||
// 用户组织列表
|
||||
const userOrgs = ref([]);
|
||||
// 树形结构数据
|
||||
const treeOrgs = ref([]);
|
||||
|
||||
// 查询用户组织
|
||||
const getUserOrgs = async () => {
|
||||
try {
|
||||
const res = await request({
|
||||
url: '/snow-ops-platform/infrastructure-asset/counties',
|
||||
method: 'get',
|
||||
url: '/snow-ops-platform/user/userOrgs',
|
||||
method: 'GET',
|
||||
})
|
||||
if (res.code === '00000') {
|
||||
areaList.value = res.data
|
||||
userOrgs.value = res.data.data
|
||||
// 构造树形结构
|
||||
treeOrgs.value = buildOrgTree(userOrgs.value)
|
||||
} else {
|
||||
throw new Error(res.message)
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error(error.message)
|
||||
console.log(error)
|
||||
ElMessage.error('获取组织失败');
|
||||
console.error('获取组织失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 构建组织树形结构
|
||||
* @param {Array} orgList 组织列表
|
||||
* @returns {Array} 树形结构数据
|
||||
*/
|
||||
const buildOrgTree = (orgList) => {
|
||||
if (!orgList || !orgList.length) return [];
|
||||
|
||||
// 创建映射表，便于查找
|
||||
const orgMap = {};
|
||||
orgList.forEach(org => {
|
||||
orgMap[org.orgId] = {
|
||||
...org,
|
||||
children: []
|
||||
};
|
||||
});
|
||||
|
||||
const tree = [];
|
||||
|
||||
orgList.forEach(org => {
|
||||
const currentOrg = orgMap[org.orgId];
|
||||
|
||||
// 根节点判断：orgParentId为-1或orgPids为"[-1],"
|
||||
if (org.orgParentId === -1 || org.orgPids === "[-1],") {
|
||||
tree.push(currentOrg);
|
||||
} else {
|
||||
// 找到父节点
|
||||
// 从orgPids中提取父级orgId（这里简化处理，实际可能需要更复杂的解析）
|
||||
let parentId = null;
|
||||
|
||||
// 方法1：尝试从orgPids中解析父级ID
|
||||
if (org.orgPids) {
|
||||
const pidMatches = org.orgPids.match(/\d+/g);
|
||||
if (pidMatches && pidMatches.length > 0) {
|
||||
// 取最后一个ID作为直接父级（排除-1）
|
||||
const parentIds = pidMatches.filter(id => id !== '-1');
|
||||
if (parentIds.length > 0) {
|
||||
parentId = parseInt(parentIds[parentIds.length - 1]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 方法2：如果无法从orgPids解析，使用orgParentId
|
||||
if (parentId === null && org.orgParentId && org.orgParentId !== -1) {
|
||||
parentId = org.orgParentId;
|
||||
}
|
||||
|
||||
// 添加到父节点的children中
|
||||
if (parentId && orgMap[parentId]) {
|
||||
orgMap[parentId].children.push(currentOrg);
|
||||
} else {
|
||||
// 如果没有找到父节点，也作为根节点
|
||||
tree.push(currentOrg);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 按orgSort排序
|
||||
const sortTree = (tree) => {
|
||||
tree.sort((a, b) => (a.orgSort || 0) - (b.orgSort || 0));
|
||||
tree.forEach(node => {
|
||||
if (node.children && node.children.length) {
|
||||
sortTree(node.children);
|
||||
}
|
||||
});
|
||||
return tree;
|
||||
};
|
||||
|
||||
return sortTree(tree);
|
||||
}
|
||||
|
||||
// 树节点点击事件
|
||||
const handleNodeClick = (data, node) => {
|
||||
// 判断是否为叶子节点（没有子节点）
|
||||
if (!node.childNodes || node.childNodes.length === 0) {
|
||||
// 叶子节点，调用获取用户列表方法
|
||||
getUsersByOrgId(data.orgId);
|
||||
}
|
||||
}
|
||||
|
||||
// 根据组织ID查询用户列表
|
||||
const getUsersByOrgId = async (orgId) => {
|
||||
try {
|
||||
const res = await request({
|
||||
url: '/snow-ops-platform/user/orgUsers',
|
||||
method: 'GET',
|
||||
params: {
|
||||
orgId
|
||||
}
|
||||
})
|
||||
if (res.code === '00000') {
|
||||
console.log('@@@@@@用户列表',res.data);
|
||||
} else {
|
||||
throw new Error(res.message)
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error('获取用户失败');
|
||||
console.error('获取用户失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getAreaList()
|
||||
getUserOrgs();
|
||||
})
|
||||
|
||||
const rules = computed(() => {
|
||||
return {
|
||||
// mc: [
|
||||
// {
|
||||
// required: true,
|
||||
// validator: (rule, value, callback) => {
|
||||
// if (props.form.mc) {
|
||||
// callback();
|
||||
// } else {
|
||||
// callback(new Error("请输入服务站名称"));
|
||||
// }
|
||||
// },
|
||||
// trigger: "blur",
|
||||
// },
|
||||
// ],
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@ -148,4 +200,46 @@ const rules = computed(() => {
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tree-transfer-container {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tree-panel {
|
||||
flex: 1;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.empty-panel {
|
||||
|
||||
}
|
||||
|
||||
.middle-panel {
|
||||
flex: 2;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.right-panel {
|
||||
flex: 2;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.custom-tree-node {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
</style>
|
||||
@ -102,7 +102,7 @@ const getTableData = async (filterData = {}) => {
|
||||
|
||||
// 打开发布预警弹窗
|
||||
const openAddDialog = () => {
|
||||
model.title = '发布预警';
|
||||
model.title = '立即排班';
|
||||
Object.assign(form, INIT_FORM);
|
||||
model.props = {
|
||||
form: form,
|
||||
@ -113,14 +113,14 @@ const openAddDialog = () => {
|
||||
};
|
||||
model.onConfirm = async () => {
|
||||
await dialogRef?.value?.dynamicComponentRef?.formRef.validate().then(async () => {
|
||||
console.log('@@@@@发布预警', form);
|
||||
console.log('@@@@@立即排班', form);
|
||||
// await publishWarning(form)
|
||||
})
|
||||
.catch((err) => {
|
||||
ElMessage.error('请处理表单中的错误项');
|
||||
});
|
||||
};
|
||||
model.width = "50%"
|
||||
model.width = "70%"
|
||||
modelVisible.value = true;
|
||||
}
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
value-format="YYYY-MM-DD HH:mm:ss" />
|
||||
</div>
|
||||
<div class="event-box">
|
||||
<el-button type="primary" @click="">立即排班</el-button>
|
||||
<el-button type="primary" @click="script.openAddDialog">立即排班</el-button>
|
||||
<!-- <el-button type="primary" @click="script.gotoLedgerPage">驻地台账</el-button> -->
|
||||
<!-- <el-button type="primary" @click="script.openAddDialog">上报项目</el-button> -->
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user