数据填报-审批记录页面
This commit is contained in:
王兴凯
parent
bb2173047f
commit
8b3ea08fc9
27
frontend/src/api/shengPiJiLu/index.ts
Normal file
27
frontend/src/api/shengPiJiLu/index.ts
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
import request from '@/utils/request';
|
||||||
|
|
||||||
|
export function queryPageList(queryParams:any){
|
||||||
|
return request({
|
||||||
|
url: '/data/approvalMain/queryPageList' ,
|
||||||
|
method: 'post',
|
||||||
|
data:queryParams
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 查询审批操作日志列表
|
||||||
|
export function getApprovalLogList(params: any) {
|
||||||
|
return request({
|
||||||
|
url: '/data/approvalLog/queryPageList',
|
||||||
|
method: 'post',
|
||||||
|
data: params
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 查询审批变更记录列表
|
||||||
|
export function getApprovalChangeLogList(params: any) {
|
||||||
|
return request({
|
||||||
|
url: '/data/approvalChangeLog/queryPageList',
|
||||||
|
method: 'post',
|
||||||
|
data: params
|
||||||
|
});
|
||||||
|
}
|
||||||
343
frontend/src/modules/EnvironmentalQuality/index.vue
Normal file
343
frontend/src/modules/EnvironmentalQuality/index.vue
Normal file
@ -0,0 +1,343 @@
|
|||||||
|
<!-- SidePanelItem.vue -->
|
||||||
|
<template>
|
||||||
|
<SidePanelItem title="地表水水质达标率">
|
||||||
|
<div class="body_item">
|
||||||
|
<div class="tabs_all">
|
||||||
|
<div :class="tabs == 1 ? 'zhong_tabs' : 'no_tabs'" @click="handleTabChange(1)">自建水质站</div>
|
||||||
|
<div :class="tabs == 2 ? 'zhong_tabs' : 'no_tabs'" @click="handleTabChange(2)">国家水质站</div>
|
||||||
|
</div>
|
||||||
|
<div v-show="tabs == 1 || tabs == 2" class="tabs_body">
|
||||||
|
<div ref="chartRef" class="chart-container"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</SidePanelItem>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
import SidePanelItem from '@/components/SidePanelItem/index.vue';
|
||||||
|
|
||||||
|
// 定义组件名（便于调试和递归）
|
||||||
|
defineOptions({
|
||||||
|
name: 'EnvironmentalQuality'
|
||||||
|
});
|
||||||
|
|
||||||
|
const tabs = ref(1);
|
||||||
|
const chartRef = ref<HTMLElement | null>(null);
|
||||||
|
let chartInstance: echarts.ECharts | null = null;
|
||||||
|
|
||||||
|
// 静态数据 - 自建水质站（第1页）
|
||||||
|
const selfBuiltData = [
|
||||||
|
{ name: '雅砻江\n干流', current: 99, lastYear: 100 },
|
||||||
|
{ name: '大渡河\n干流', current: 99, lastYear: 100 },
|
||||||
|
{ name: '黄河上游\n干流', current: 99, lastYear: 100 }
|
||||||
|
];
|
||||||
|
|
||||||
|
// 静态数据 - 国家水质站（第2页）
|
||||||
|
const nationalData = [
|
||||||
|
{ name: '长江\n干流', current: 98, lastYear: 99 },
|
||||||
|
{ name: '珠江\n干流', current: 97, lastYear: 98 },
|
||||||
|
{ name: '淮河\n干流', current: 96, lastYear: 97 }
|
||||||
|
];
|
||||||
|
|
||||||
|
// 根据tab获取对应数据
|
||||||
|
const getCurrentData = () => {
|
||||||
|
return tabs.value === 1 ? selfBuiltData : nationalData;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 处理tab切换
|
||||||
|
const handleTabChange = (tab: number) => {
|
||||||
|
tabs.value = tab;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 监听tabs变化，处理图表刷新
|
||||||
|
watch(tabs, (newVal) => {
|
||||||
|
if (newVal === 1 || newVal === 2) {
|
||||||
|
nextTick(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
if (!chartInstance) {
|
||||||
|
initChart();
|
||||||
|
} else {
|
||||||
|
// 更新图表数据
|
||||||
|
updateChartData();
|
||||||
|
}
|
||||||
|
}, 50);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 初始化图表
|
||||||
|
const initChart = () => {
|
||||||
|
if (!chartRef.value) return;
|
||||||
|
|
||||||
|
chartInstance = echarts.init(chartRef.value);
|
||||||
|
|
||||||
|
const currentData = getCurrentData();
|
||||||
|
|
||||||
|
const option = {
|
||||||
|
// 图例配置
|
||||||
|
legend: {
|
||||||
|
top: 10,
|
||||||
|
itemWidth: 18,
|
||||||
|
itemHeight: 12,
|
||||||
|
itemGap: 20,
|
||||||
|
icon: 'roundRect',
|
||||||
|
data: [
|
||||||
|
{ name: '2026-04 月度', itemStyle: { color: '#4A8BC2' } },
|
||||||
|
{ name: '去年同期', itemStyle: { color: '#9B59B6' } }
|
||||||
|
],
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 12,
|
||||||
|
color: '#333'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 提示框配置
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow',
|
||||||
|
shadowStyle: {
|
||||||
|
color: 'rgba(200, 200, 200, 0.2)'
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
backgroundColor: '#fff',
|
||||||
|
borderColor: '#e8e8e8',
|
||||||
|
borderWidth: 1,
|
||||||
|
padding: 12,
|
||||||
|
textStyle: {
|
||||||
|
color: '#333',
|
||||||
|
fontSize: 12
|
||||||
|
},
|
||||||
|
formatter: (params: any) => {
|
||||||
|
const name = params[0].name.replace('\n', '');
|
||||||
|
let result = `<div style="font-weight: bold; margin-bottom: 8px;">${name}</div>`;
|
||||||
|
params.forEach((item: any) => {
|
||||||
|
result += `<div style="display: flex; align-items: center; margin-bottom: 4px;">
|
||||||
|
<span style="display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: ${item.color}; margin-right: 8px;"></span>
|
||||||
|
<span>${item.seriesName}:</span>
|
||||||
|
<span style="margin-left: auto; font-weight: bold;">${item.value} %</span>
|
||||||
|
</div>`;
|
||||||
|
});
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 网格配置
|
||||||
|
grid: {
|
||||||
|
left: 60,
|
||||||
|
right: 10,
|
||||||
|
top: 60,
|
||||||
|
bottom: 50
|
||||||
|
},
|
||||||
|
|
||||||
|
// X轴配置
|
||||||
|
xAxis: {
|
||||||
|
type: 'value',
|
||||||
|
min: 0,
|
||||||
|
max: 100,
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#e8e8e8',
|
||||||
|
type: 'solid'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
fontSize: 12,
|
||||||
|
color: '#666'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// Y轴配置
|
||||||
|
yAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: currentData.map(item => item.name),
|
||||||
|
inverse: true,
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#333',
|
||||||
|
width: 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: true,
|
||||||
|
length: 4,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#333',
|
||||||
|
width: 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
fontSize: 12,
|
||||||
|
color: '#333',
|
||||||
|
margin: 12
|
||||||
|
},
|
||||||
|
// 在Y轴底部添加"达标率(%)"标签
|
||||||
|
name: '达标率(%)',
|
||||||
|
nameLocation: 'end',
|
||||||
|
nameGap: 20,
|
||||||
|
nameTextStyle: {
|
||||||
|
fontSize: 12,
|
||||||
|
color: '#666',
|
||||||
|
align: 'left'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 系列配置
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '2026-04 月度',
|
||||||
|
type: 'bar',
|
||||||
|
data: currentData.map(item => item.current),
|
||||||
|
barWidth: 10,
|
||||||
|
barGap: '20%',
|
||||||
|
itemStyle: {
|
||||||
|
color: '#4A8BC2',
|
||||||
|
borderRadius: [0, 3, 3, 0]
|
||||||
|
},
|
||||||
|
markArea: {
|
||||||
|
silent: true,
|
||||||
|
itemStyle: {
|
||||||
|
color: 'rgba(240, 245, 250, 0.5)'
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
[{ yAxis: 1 }, { yAxis: 2 }]
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '去年同期',
|
||||||
|
type: 'bar',
|
||||||
|
data: currentData.map(item => item.lastYear),
|
||||||
|
barWidth: 10,
|
||||||
|
barGap: '20%',
|
||||||
|
itemStyle: {
|
||||||
|
color: '#9B59B6',
|
||||||
|
borderRadius: [0, 3, 3, 0]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
chartInstance.setOption(option);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 更新图表数据
|
||||||
|
const updateChartData = () => {
|
||||||
|
if (!chartInstance) return;
|
||||||
|
|
||||||
|
const currentData = getCurrentData();
|
||||||
|
|
||||||
|
chartInstance.setOption({
|
||||||
|
yAxis: {
|
||||||
|
data: currentData.map(item => item.name)
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
data: currentData.map(item => item.current)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
data: currentData.map(item => item.lastYear)
|
||||||
|
}
|
||||||
|
]
|
||||||
|
});
|
||||||
|
|
||||||
|
// 强制重新计算尺寸
|
||||||
|
chartInstance.resize();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 页面加载时执行
|
||||||
|
onMounted(() => {
|
||||||
|
// 延迟初始化，确保容器已渲染
|
||||||
|
setTimeout(() => {
|
||||||
|
initChart();
|
||||||
|
}, 100);
|
||||||
|
|
||||||
|
// 监听窗口resize
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
chartInstance?.resize();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// 组件卸载时清理
|
||||||
|
onUnmounted(() => {
|
||||||
|
chartInstance?.dispose();
|
||||||
|
window.removeEventListener('resize', () => {
|
||||||
|
chartInstance?.resize();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.body_item {
|
||||||
|
width: 100%;
|
||||||
|
height: 600px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.tabs_all {
|
||||||
|
width: 28px;
|
||||||
|
height: 600px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 2px solid #2f6b98;
|
||||||
|
border-radius: 5px;
|
||||||
|
|
||||||
|
.zhong_tabs {
|
||||||
|
width: 100%;
|
||||||
|
height: 50%;
|
||||||
|
background: #2f6b98;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 14px;
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
text-shadow: 0 0 .25px currentcolor;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no_tabs {
|
||||||
|
width: 100%;
|
||||||
|
height: 50%;
|
||||||
|
font-size: 14px;
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.no_tabs:hover {
|
||||||
|
color: #40a9ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs_body {
|
||||||
|
width: 368px;
|
||||||
|
height: 600px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.chart-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
124
frontend/src/modules/qixidibaohugongzuokaizhanQK/index.vue
Normal file
124
frontend/src/modules/qixidibaohugongzuokaizhanQK/index.vue
Normal file
@ -0,0 +1,124 @@
|
|||||||
|
<!-- SidePanelItem.vue -->
|
||||||
|
<template>
|
||||||
|
<SidePanelItem title="栖息地保护工作开展情况">
|
||||||
|
<div class="facility-grid">
|
||||||
|
<div v-for="facility in facilities" :key="facility.name" class="facility-card">
|
||||||
|
<div style="width: 60px;height: 62px;display: flex;align-items: center;justify-content: center;">
|
||||||
|
<div class="facility-icon">
|
||||||
|
<i style="color: #fff;" :class="facility.icon" type="icon-shengtailiuliang2"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="facility-info">
|
||||||
|
<div class="facility-name">{{ facility.name }}</div>
|
||||||
|
<div style="font-size: 16px;"> <span class="facility-count">{{ facility.count
|
||||||
|
}}</span><span>个</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</SidePanelItem>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
|
||||||
|
import SidePanelItem from '@/components/SidePanelItem/index.vue';
|
||||||
|
|
||||||
|
// 定义组件名（便于调试和递归）
|
||||||
|
defineOptions({
|
||||||
|
name: 'qixidibaohugongzuokaizhanQK'
|
||||||
|
});
|
||||||
|
|
||||||
|
// 设施数据
|
||||||
|
const facilities = ref([
|
||||||
|
{
|
||||||
|
name: '栖息地',
|
||||||
|
count: 56,
|
||||||
|
icon: 'icon iconfont icon-qixidi'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '水温监测',
|
||||||
|
count: 1722,
|
||||||
|
icon: 'icon iconfont icon-diwenshuijianhuan'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '水文监测',
|
||||||
|
count: 135,
|
||||||
|
icon: 'icon iconfont icon-shuiwen-line'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '视频监控',
|
||||||
|
count: 135,
|
||||||
|
icon: 'icon iconfont icon-shipinjiankongshebei'
|
||||||
|
},
|
||||||
|
|
||||||
|
]);
|
||||||
|
|
||||||
|
// 页面加载时执行
|
||||||
|
onMounted(() => {
|
||||||
|
// 延迟初始化，确保容器已渲染
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
// 组件卸载时清理
|
||||||
|
onUnmounted(() => {
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.facility-grid {
|
||||||
|
width: 406px;
|
||||||
|
flex-flow: wrap;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
|
||||||
|
}
|
||||||
|
|
||||||
|
.facility-card {
|
||||||
|
width: 200px;
|
||||||
|
height: 70px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin: 4px 0px;
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #e8e8e8;
|
||||||
|
border-radius: 2px;
|
||||||
|
transition: all 0.3s;
|
||||||
|
cursor: pointer;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.facility-icon {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
// margin-right: 8px;
|
||||||
|
background: #5389b5;
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
.anticon {
|
||||||
|
font-size: 24px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.facility-info {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.facility-name {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #333;
|
||||||
|
// margin-bottom: 4px;
|
||||||
|
// font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.facility-count {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #2f6b98;
|
||||||
|
// font-weight: 600;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,6 +1,6 @@
|
|||||||
<!-- SidePanelItem.vue -->
|
<!-- SidePanelItem.vue -->
|
||||||
<template>
|
<template>
|
||||||
<SidePanelItem title="环保设施情况">
|
<SidePanelItem title="水质监测工作开展情况">
|
||||||
<div class="facility-grid" >
|
<div class="facility-grid" >
|
||||||
<div v-for="facility in facilities" :key="facility.name" class="facility-card">
|
<div v-for="facility in facilities" :key="facility.name" class="facility-card">
|
||||||
<div style="width: 60px;height: 62px;display: flex;align-items: center;justify-content: center;">
|
<div style="width: 60px;height: 62px;display: flex;align-items: center;justify-content: center;">
|
||||||
|
|||||||
@ -1,5 +1,25 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import JidiSelectorMod from "@/modules/jidiSelectorMod.vue";
|
||||||
|
import RightDrawer from "@/components/RightDrawer/index.vue";
|
||||||
|
import QiXiDiBaoHuGongZuoKaiZhan from "@/modules/qixidibaohugongzuokaizhanQK/index.vue"
|
||||||
|
// import QixidijchuXx from "@/modules/qixidijchuXx"
|
||||||
|
// import QiXiDiShuiWenBianHua from "@/modules/qixidishuiwenbianhua"
|
||||||
|
// import QiXiDiLiuLiangBianHua from "@/modules/qixidiliuliangbianhua"
|
||||||
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="moduleContent">
|
||||||
<h2>栖息地</h2>
|
<div class="leftContent">
|
||||||
|
<JidiSelectorMod />
|
||||||
|
</div>
|
||||||
|
<div class="rightContent">
|
||||||
|
<RightDrawer>
|
||||||
|
<QiXiDiBaoHuGongZuoKaiZhan />
|
||||||
|
<!-- <QiXiDiShuiWenBianHua /> -->
|
||||||
|
<!-- <QiXiDiLiuLiangBianHua /> -->
|
||||||
|
<!-- <QixidijchuXx /> -->
|
||||||
|
</RightDrawer>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
<style scoped lang="scss"></style>
|
||||||
|
|||||||
66
frontend/src/views/shuJuTianBao/approvalLogSearch.vue
Normal file
66
frontend/src/views/shuJuTianBao/approvalLogSearch.vue
Normal file
@ -0,0 +1,66 @@
|
|||||||
|
<template>
|
||||||
|
<div class="approval-log-search">
|
||||||
|
<BasicSearch ref="basicSearchRef" :searchList="searchList" :initial-values="initSearchData"
|
||||||
|
@finish="onSearchFinish" @values-change="onValuesChange" @reset="handleReset">
|
||||||
|
</BasicSearch>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, computed, onMounted } from "vue";
|
||||||
|
import BasicSearch from "@/components/BasicSearch/index.vue";
|
||||||
|
|
||||||
|
// --- Props & Emits ---
|
||||||
|
interface Props {
|
||||||
|
actionTypeDict: any[];
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = defineProps<Props>();
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(e: "reset", values: any): void;
|
||||||
|
(e: "searchFinish", values: any): void;
|
||||||
|
}>();
|
||||||
|
|
||||||
|
|
||||||
|
// 模拟 initSearchData
|
||||||
|
const initSearchData = {
|
||||||
|
action: '',
|
||||||
|
};
|
||||||
|
|
||||||
|
const searchData = ref<any>({ ...initSearchData });
|
||||||
|
|
||||||
|
const searchList: any = computed(() => [
|
||||||
|
{
|
||||||
|
type: "Select",
|
||||||
|
name: "action",
|
||||||
|
label: "操作类型",
|
||||||
|
fieldProps: {
|
||||||
|
allowClear: true,
|
||||||
|
},
|
||||||
|
options: props.actionTypeDict || [],
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
// --- Methods ---
|
||||||
|
|
||||||
|
// 2. 搜索表单逻辑
|
||||||
|
const onSearchFinish = (values: any) => {
|
||||||
|
console.log(values);
|
||||||
|
emit("searchFinish", values);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleReset = () => {
|
||||||
|
emit("reset", initSearchData);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onValuesChange = (changedValues: any, allValues: any) => {
|
||||||
|
// 同步更新本地 searchData，以便其他逻辑使用
|
||||||
|
searchData.value = { ...searchData.value, ...allValues };
|
||||||
|
};
|
||||||
|
|
||||||
|
// --- Lifecycle ---
|
||||||
|
onMounted(() => {
|
||||||
|
emit("searchFinish", initSearchData);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style lang="scss"></style>
|
||||||
66
frontend/src/views/shuJuTianBao/changeLogSearch.vue
Normal file
66
frontend/src/views/shuJuTianBao/changeLogSearch.vue
Normal file
@ -0,0 +1,66 @@
|
|||||||
|
<template>
|
||||||
|
<div class="change-log-search">
|
||||||
|
<BasicSearch ref="basicSearchRef" :searchList="searchList" :initial-values="initSearchData"
|
||||||
|
@finish="onSearchFinish" @values-change="onValuesChange" @reset="handleReset">
|
||||||
|
</BasicSearch>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, computed, onMounted } from "vue";
|
||||||
|
import BasicSearch from "@/components/BasicSearch/index.vue";
|
||||||
|
|
||||||
|
// --- Props & Emits ---
|
||||||
|
interface Props {
|
||||||
|
operationTypeDict: any[];
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = defineProps<Props>();
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(e: "reset", values: any): void;
|
||||||
|
(e: "searchFinish", values: any): void;
|
||||||
|
}>();
|
||||||
|
|
||||||
|
|
||||||
|
// 模拟 initSearchData
|
||||||
|
const initSearchData = {
|
||||||
|
operationType: '',
|
||||||
|
};
|
||||||
|
|
||||||
|
const searchData = ref<any>({ ...initSearchData });
|
||||||
|
|
||||||
|
const searchList: any = computed(() => [
|
||||||
|
{
|
||||||
|
type: "Select",
|
||||||
|
name: "operationType",
|
||||||
|
label: "操作类型",
|
||||||
|
fieldProps: {
|
||||||
|
allowClear: true,
|
||||||
|
},
|
||||||
|
options: props.operationTypeDict || [],
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
// --- Methods ---
|
||||||
|
|
||||||
|
// 2. 搜索表单逻辑
|
||||||
|
const onSearchFinish = (values: any) => {
|
||||||
|
console.log(values);
|
||||||
|
emit("searchFinish", values);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleReset = () => {
|
||||||
|
emit("reset", initSearchData);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onValuesChange = (changedValues: any, allValues: any) => {
|
||||||
|
// 同步更新本地 searchData，以便其他逻辑使用
|
||||||
|
searchData.value = { ...searchData.value, ...allValues };
|
||||||
|
};
|
||||||
|
|
||||||
|
// --- Lifecycle ---
|
||||||
|
onMounted(() => {
|
||||||
|
emit("searchFinish", initSearchData);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style lang="scss"></style>
|
||||||
439
frontend/src/views/shuJuTianBao/shengPiJiLu.vue
Normal file
439
frontend/src/views/shuJuTianBao/shengPiJiLu.vue
Normal file
@ -0,0 +1,439 @@
|
|||||||
|
<template>
|
||||||
|
<div class="shengPiJiLu-page">
|
||||||
|
<!-- 搜索区域组件，具体 props 需根据实际子组件调整 -->
|
||||||
|
<GuoYuSheShiShuJuTianBaoSearch @search-finish="handleSearchFinish" @reset="handleReset" />
|
||||||
|
<!-- 主表格 -->
|
||||||
|
<BasicTable ref="tableRef" :columns="columns" :list-url="queryPageList" :search-params="{}">
|
||||||
|
<!-- 使用 bodyCell 插槽自定义单元格渲染 -->
|
||||||
|
<template #bodyCell="{ column, record }">
|
||||||
|
<template v-if="column.key === 'action' || column.dataIndex === 'action'">
|
||||||
|
<div class="flex">
|
||||||
|
<a-button type="link" size="small" @click="handleShowApprovalLog(record)">审批详情</a-button>
|
||||||
|
<a-button type="link" size="small" @click="handleShowChangeLog(record)">变更详情</a-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template v-if="column.dataIndex === 'bizType'">
|
||||||
|
{{ handName(record.bizType, yeWuType) }}
|
||||||
|
</template>
|
||||||
|
<template v-if="column.dataIndex === 'status'">
|
||||||
|
{{ handName(record.status, shenStatus) }}
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</BasicTable>
|
||||||
|
|
||||||
|
<!-- 审批操作日志弹框 -->
|
||||||
|
<a-modal
|
||||||
|
v-model:open="approvalLogVisible"
|
||||||
|
title="审批操作日志"
|
||||||
|
width="1600px"
|
||||||
|
:footer="null"
|
||||||
|
destroy-on-close="false"
|
||||||
|
>
|
||||||
|
<div class="approval-log-modal-content">
|
||||||
|
<ApprovalLogSearch
|
||||||
|
:action-type-dict="actionTypeDict"
|
||||||
|
@search-finish="handleApprovalLogSearch"
|
||||||
|
@reset="handleApprovalLogReset"
|
||||||
|
/>
|
||||||
|
<BasicTable
|
||||||
|
ref="approvalLogTableRef"
|
||||||
|
:columns="approvalLogColumns"
|
||||||
|
:list-url="getApprovalLogList"
|
||||||
|
>
|
||||||
|
<template #bodyCell="{ column, record }">
|
||||||
|
<template v-if="column.dataIndex === 'action'">
|
||||||
|
{{ handName(record.action, actionTypeDict) }}
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</BasicTable>
|
||||||
|
</div>
|
||||||
|
</a-modal>
|
||||||
|
|
||||||
|
<!-- 数据变更记录弹框 -->
|
||||||
|
<a-modal
|
||||||
|
v-model:open="changeLogVisible"
|
||||||
|
title="数据变更记录"
|
||||||
|
width="1600px"
|
||||||
|
:footer="null"
|
||||||
|
destroy-on-close="false"
|
||||||
|
>
|
||||||
|
<div class="change-log-modal-content">
|
||||||
|
<ChangeLogSearch
|
||||||
|
:operation-type-dict="operationTypeDict"
|
||||||
|
@search-finish="handleChangeLogSearch"
|
||||||
|
@reset="handleChangeLogReset"
|
||||||
|
/>
|
||||||
|
<BasicTable
|
||||||
|
ref="changeLogTableRef"
|
||||||
|
:columns="changeLogColumns"
|
||||||
|
:list-url="getApprovalChangeLogList"
|
||||||
|
>
|
||||||
|
<template #bodyCell="{ column, record }">
|
||||||
|
<template v-if="column.dataIndex === 'operationType'">
|
||||||
|
{{ handName(record.operationType, operationTypeDict) }}
|
||||||
|
</template>
|
||||||
|
<template v-if="column.dataIndex === 'bizType'">
|
||||||
|
{{ handName(record.bizType, yeWuType) }}
|
||||||
|
</template>
|
||||||
|
<template v-if="column.dataIndex === 'changeJson'">
|
||||||
|
<pre style="max-height: 200px; overflow: auto; margin: 0;">{{ record.changeJson }}</pre>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</BasicTable>
|
||||||
|
</div>
|
||||||
|
</a-modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, reactive, onMounted } from 'vue';
|
||||||
|
import { queryPageList, getApprovalLogList, getApprovalChangeLogList } from '@/api/shengPiJiLu';
|
||||||
|
import BasicTable from "@/components/BasicTable/index.vue";
|
||||||
|
import GuoYuSheShiShuJuTianBaoSearch from "./shengPiJiLuSearch.vue";
|
||||||
|
import ApprovalLogSearch from "./approvalLogSearch.vue";
|
||||||
|
import ChangeLogSearch from "./changeLogSearch.vue";
|
||||||
|
import { getDictItemsByCode } from '@/api/dict';
|
||||||
|
let columns = ref([
|
||||||
|
{
|
||||||
|
title: '审批批次号',
|
||||||
|
dataIndex: 'approvalNo',
|
||||||
|
key: 'approvalNo',
|
||||||
|
width: 180,
|
||||||
|
fixed: 'left'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '业务类型',
|
||||||
|
dataIndex: 'bizType',
|
||||||
|
key: 'bizType',
|
||||||
|
width: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '数据条数',
|
||||||
|
dataIndex: 'dataCount',
|
||||||
|
key: 'dataCount',
|
||||||
|
width: 100,
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '提交人',
|
||||||
|
dataIndex: 'applyUserId',
|
||||||
|
key: 'applyUserId',
|
||||||
|
width: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '提交时间',
|
||||||
|
dataIndex: 'applyTime',
|
||||||
|
key: 'applyTime',
|
||||||
|
width: 180,
|
||||||
|
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '审批状态',
|
||||||
|
dataIndex: 'status',
|
||||||
|
key: 'status',
|
||||||
|
width: 100,
|
||||||
|
align: 'center',
|
||||||
|
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '审批人',
|
||||||
|
dataIndex: 'approverId',
|
||||||
|
key: 'approverId',
|
||||||
|
width: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '审批时间',
|
||||||
|
dataIndex: 'approveTime',
|
||||||
|
key: 'approveTime',
|
||||||
|
width: 180,
|
||||||
|
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '审批备注',
|
||||||
|
dataIndex: 'remark',
|
||||||
|
key: 'remark',
|
||||||
|
ellipsis: true,
|
||||||
|
width: 200
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
key: 'action',
|
||||||
|
width: 120,
|
||||||
|
fixed: 'right',
|
||||||
|
align: 'center'
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
const tableRef = ref()
|
||||||
|
const handleSearchFinish = (values: any) => {
|
||||||
|
console.log(values);
|
||||||
|
const filters = [
|
||||||
|
values.approvalNo && {
|
||||||
|
field: "approvalNo",
|
||||||
|
operator: "contains",
|
||||||
|
dataType: "string",
|
||||||
|
value: values.approvalNo,
|
||||||
|
},
|
||||||
|
values.status && {
|
||||||
|
field: "status",
|
||||||
|
operator: "eq",
|
||||||
|
dataType: "string",
|
||||||
|
value: values.status,
|
||||||
|
},
|
||||||
|
].filter(Boolean);
|
||||||
|
|
||||||
|
|
||||||
|
const filter = {
|
||||||
|
logic: "and",
|
||||||
|
filters: filters,
|
||||||
|
};
|
||||||
|
tableRef.value?.getList(filter);
|
||||||
|
};
|
||||||
|
const handleReset = (values) => {
|
||||||
|
handleSearchFinish(values);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 审批操作日志弹框相关
|
||||||
|
const approvalLogVisible = ref(false);
|
||||||
|
const approvalLogTableRef = ref();
|
||||||
|
|
||||||
|
const approvalLogColumns = ref([
|
||||||
|
{
|
||||||
|
title: '操作类型',
|
||||||
|
dataIndex: 'action',
|
||||||
|
key: 'action',
|
||||||
|
width: 120,
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作人',
|
||||||
|
dataIndex: 'operatorId',
|
||||||
|
key: 'operatorId',
|
||||||
|
width: 150
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作时间',
|
||||||
|
dataIndex: 'operateTime',
|
||||||
|
key: 'operateTime',
|
||||||
|
width: 180
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '审批意见',
|
||||||
|
dataIndex: 'commentInfo',
|
||||||
|
key: 'commentInfo',
|
||||||
|
ellipsis: true,
|
||||||
|
width: 300
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '创建时间',
|
||||||
|
dataIndex: 'createdAt',
|
||||||
|
key: 'createdAt',
|
||||||
|
width: 180
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
|
||||||
|
// 数据变更记录弹框相关
|
||||||
|
const changeLogVisible = ref(false);
|
||||||
|
const changeLogTableRef = ref();
|
||||||
|
|
||||||
|
const changeLogColumns = ref([
|
||||||
|
{
|
||||||
|
title: '业务类型',
|
||||||
|
dataIndex: 'bizType',
|
||||||
|
key: 'bizType',
|
||||||
|
width: 120,
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作类型',
|
||||||
|
dataIndex: 'operationType',
|
||||||
|
key: 'operationType',
|
||||||
|
width: 120,
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '变更内容',
|
||||||
|
dataIndex: 'changeJson',
|
||||||
|
key: 'changeJson',
|
||||||
|
width: 400,
|
||||||
|
ellipsis: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作人',
|
||||||
|
dataIndex: 'operatorId',
|
||||||
|
key: 'operatorId',
|
||||||
|
width: 150
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作时间',
|
||||||
|
dataIndex: 'operateTime',
|
||||||
|
key: 'operateTime',
|
||||||
|
width: 180
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '创建时间',
|
||||||
|
dataIndex: 'createdAt',
|
||||||
|
key: 'createdAt',
|
||||||
|
width: 180
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
|
||||||
|
const currentApprovalId = ref('');
|
||||||
|
const actionTypeDict = ref([]);
|
||||||
|
const operationTypeDict = ref([]);
|
||||||
|
|
||||||
|
// 显示审批操作日志弹框
|
||||||
|
const handleShowApprovalLog = (record: any) => {
|
||||||
|
currentApprovalId.value = record.id;
|
||||||
|
approvalLogVisible.value = true;
|
||||||
|
// 延迟调用，确保弹框和 BasicTable 组件完全渲染
|
||||||
|
setTimeout(() => {
|
||||||
|
const filter = {
|
||||||
|
logic: "and",
|
||||||
|
filters: [
|
||||||
|
{
|
||||||
|
field: "approvalId",
|
||||||
|
operator: "eq",
|
||||||
|
dataType: "string",
|
||||||
|
value: record.id,
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
approvalLogTableRef.value?.getList(filter);
|
||||||
|
}, 300);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 审批日志搜索处理
|
||||||
|
const handleApprovalLogSearch = (values: any) => {
|
||||||
|
console.log('审批日志搜索:', values);
|
||||||
|
const filters = [
|
||||||
|
{
|
||||||
|
field: "approvalId",
|
||||||
|
operator: "eq",
|
||||||
|
dataType: "string",
|
||||||
|
value: currentApprovalId.value,
|
||||||
|
},
|
||||||
|
values.action && {
|
||||||
|
field: "action",
|
||||||
|
operator: "eq",
|
||||||
|
dataType: "string",
|
||||||
|
value: values.action,
|
||||||
|
},
|
||||||
|
].filter(Boolean);
|
||||||
|
|
||||||
|
const filter = {
|
||||||
|
logic: "and",
|
||||||
|
filters: filters,
|
||||||
|
};
|
||||||
|
approvalLogTableRef.value?.getList(filter);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 审批日志重置处理
|
||||||
|
const handleApprovalLogReset = (values: any) => {
|
||||||
|
console.log('审批日志重置:', values);
|
||||||
|
handleApprovalLogSearch(values);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 显示数据变更记录弹框
|
||||||
|
const handleShowChangeLog = (record: any) => {
|
||||||
|
currentApprovalId.value = record.id;
|
||||||
|
changeLogVisible.value = true;
|
||||||
|
// 延迟调用，确保弹框和 BasicTable 组件完全渲染
|
||||||
|
setTimeout(() => {
|
||||||
|
const filter = {
|
||||||
|
logic: "and",
|
||||||
|
filters: [
|
||||||
|
{
|
||||||
|
field: "approvalId",
|
||||||
|
operator: "eq",
|
||||||
|
dataType: "string",
|
||||||
|
value: record.id,
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
changeLogTableRef.value?.getList(filter);
|
||||||
|
}, 300);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 变更日志搜索处理
|
||||||
|
const handleChangeLogSearch = (values: any) => {
|
||||||
|
console.log('变更日志搜索:', values);
|
||||||
|
const filters = [
|
||||||
|
{
|
||||||
|
field: "approvalId",
|
||||||
|
operator: "eq",
|
||||||
|
dataType: "string",
|
||||||
|
value: currentApprovalId.value,
|
||||||
|
},
|
||||||
|
values.operationType && {
|
||||||
|
field: "operationType",
|
||||||
|
operator: "eq",
|
||||||
|
dataType: "string",
|
||||||
|
value: values.operationType,
|
||||||
|
},
|
||||||
|
].filter(Boolean);
|
||||||
|
|
||||||
|
const filter = {
|
||||||
|
logic: "and",
|
||||||
|
filters: filters,
|
||||||
|
};
|
||||||
|
changeLogTableRef.value?.getList(filter);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 变更日志重置处理
|
||||||
|
const handleChangeLogReset = (values: any) => {
|
||||||
|
console.log('变更日志重置:', values);
|
||||||
|
handleChangeLogSearch(values);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 初始化
|
||||||
|
onMounted(() => {
|
||||||
|
dictNmae()
|
||||||
|
});
|
||||||
|
const shenStatus = ref([])
|
||||||
|
const yeWuType = ref([])
|
||||||
|
const dictNmae = () => {
|
||||||
|
getDictItemsByCode({ dictCode: 'shenStatus' }).then((res) => {
|
||||||
|
shenStatus.value = res.data;
|
||||||
|
});
|
||||||
|
getDictItemsByCode({ dictCode: 'yeWuType' }).then((res) => {
|
||||||
|
yeWuType.value = res.data;
|
||||||
|
});
|
||||||
|
// TODO: 待补充操作类型字典
|
||||||
|
getDictItemsByCode({ dictCode: 'caoType' }).then((res) => {
|
||||||
|
actionTypeDict.value = res.data;
|
||||||
|
});
|
||||||
|
getDictItemsByCode({ dictCode: 'caoTypeTwo' }).then((res) => {
|
||||||
|
operationTypeDict.value = res.data;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
const handName = (val: any, arr: any) => {
|
||||||
|
let dictName1 = ''
|
||||||
|
arr.forEach((item: any) => {
|
||||||
|
if (item.itemCode == val) {
|
||||||
|
dictName1 = item.dictName
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return dictName1
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.shengPiJiLu-page {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.approval-log-modal-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.change-log-modal-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
85
frontend/src/views/shuJuTianBao/shengPiJiLuSearch.vue
Normal file
85
frontend/src/views/shuJuTianBao/shengPiJiLuSearch.vue
Normal file
@ -0,0 +1,85 @@
|
|||||||
|
<template>
|
||||||
|
<div class="guoYuSheShiShuJuTianBao-search">
|
||||||
|
<BasicSearch ref="basicSearchRef" :searchList="searchList" :initial-values="initSearchData"
|
||||||
|
@finish="onSearchFinish" @values-change="onValuesChange" @reset="handleReset">
|
||||||
|
</BasicSearch>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, computed, onMounted } from "vue";
|
||||||
|
import BasicSearch from "@/components/BasicSearch/index.vue"; // 确保路径正确
|
||||||
|
import { getDictItemsByCode } from '@/api/dict';
|
||||||
|
// --- Props & Emits ---
|
||||||
|
interface Props {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = defineProps<Props>();
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(e: "reset", values: any): void;
|
||||||
|
(e: "searchFinish", values: any): void;
|
||||||
|
}>();
|
||||||
|
|
||||||
|
|
||||||
|
// 模拟 initSearchData
|
||||||
|
const initSearchData = {
|
||||||
|
approvalNo:'',
|
||||||
|
status:'',
|
||||||
|
};
|
||||||
|
|
||||||
|
const searchData = ref<any>({ ...initSearchData });
|
||||||
|
|
||||||
|
const searchList: any = computed(() => [
|
||||||
|
{
|
||||||
|
type: "Input",
|
||||||
|
name: "approvalNo",
|
||||||
|
label: "审批批次号",
|
||||||
|
fieldProps: {
|
||||||
|
allowClear: true,
|
||||||
|
},
|
||||||
|
options: [],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "Select",
|
||||||
|
name: "status",
|
||||||
|
label: "审批状态",
|
||||||
|
fieldProps: {
|
||||||
|
allowClear: true,
|
||||||
|
},
|
||||||
|
options: statusData.value,
|
||||||
|
},
|
||||||
|
|
||||||
|
]);
|
||||||
|
// --- Methods ---
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// 2. 搜索表单逻辑
|
||||||
|
const onSearchFinish = (values: any) => {
|
||||||
|
console.log(values);
|
||||||
|
|
||||||
|
emit("searchFinish", values);
|
||||||
|
};
|
||||||
|
const handleReset = () => {
|
||||||
|
emit("reset", initSearchData);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onValuesChange = (changedValues: any, allValues: any) => {
|
||||||
|
// 同步更新本地 searchData，以便其他逻辑使用
|
||||||
|
searchData.value = { ...searchData.value, ...allValues };
|
||||||
|
};
|
||||||
|
|
||||||
|
// --- Lifecycle ---
|
||||||
|
onMounted(() => {
|
||||||
|
emit("searchFinish", initSearchData);
|
||||||
|
getstatusData()
|
||||||
|
});
|
||||||
|
const statusData = ref(false)
|
||||||
|
const getstatusData = () => {
|
||||||
|
getDictItemsByCode({ dictCode: "shenStatus" }).then((res) => {
|
||||||
|
statusData.value = res.data;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss"></style>
|
||||||
@ -2,7 +2,7 @@
|
|||||||
import JidiSelectorMod from "@/modules/jidiSelectorMod.vue";
|
import JidiSelectorMod from "@/modules/jidiSelectorMod.vue";
|
||||||
import RightDrawer from "@/components/RightDrawer/index.vue";
|
import RightDrawer from "@/components/RightDrawer/index.vue";
|
||||||
import ShuiZhiJianCeGongZuoQingKuang from "@/modules/shuizhijiancegongzuoQK/index.vue"
|
import ShuiZhiJianCeGongZuoQingKuang from "@/modules/shuizhijiancegongzuoQK/index.vue"
|
||||||
// import EnvironmentalQuality from "@/modules/environmentalQuality/index.vue" // 环境质量满足度
|
import EnvironmentalQuality from "@/modules/EnvironmentalQuality/index.vue" // 环境质量满足度
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@ -13,7 +13,7 @@ import ShuiZhiJianCeGongZuoQingKuang from "@/modules/shuizhijiancegongzuoQK/inde
|
|||||||
<div class="rightContent">
|
<div class="rightContent">
|
||||||
<RightDrawer>
|
<RightDrawer>
|
||||||
<ShuiZhiJianCeGongZuoQingKuang />
|
<ShuiZhiJianCeGongZuoQingKuang />
|
||||||
<!-- <EnvironmentalQuality /> -->
|
<EnvironmentalQuality />
|
||||||
</RightDrawer>
|
</RightDrawer>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user