提交 76b88968 authored 作者: kxjia's avatar kxjia

优化代码

上级 6607e875
......@@ -20,6 +20,8 @@ enum Api {
batchSaveApproval='/metric/dataApproval/batchSaveApproval',
queryByMtrcNo = '/metric/metricMonitorSet/queryByMtrcNo',
}
/**
* 导出api
......@@ -40,8 +42,10 @@ export const list = (params) =>
export const queryList = (params) =>
defHttp.get({url: Api.queryList, params});
export const queryAllList = (params) =>
defHttp.get({url: Api.queryAllList, params});
export const queryAllList = (params) =>defHttp.get({url: Api.queryAllList, params});
export const queryByMtrcNo = (params) =>defHttp.get({url: Api.queryByMtrcNo, params});
/**
* 删除单个
......
......@@ -7,6 +7,30 @@
</a-card>
</a-col>
<a-col :span="19">
<!-- 时间搜索表单 -->
<div style="margin-bottom: 16px; padding: 12px; background: #f9f9f9; border-radius: 4px;">
<a-row :gutter="16" align="middle">
<a-col :span="14">
<div style="display: flex; align-items: center; gap: 16px;">
<div style="display: flex; align-items: center;">
<span style="margin-right: 8px;">开始日期:</span>
<a-date-picker v-model:value="searchForm.stFillTime" style="width: 150px;" />
</div>
<div style="display: flex; align-items: center;">
<span style="margin-right: 8px;">结束日期:</span>
<a-date-picker v-model:value="searchForm.endFillTime" style="width: 150px;" />
</div>
</div>
</a-col>
<a-col :span="10">
<a-space :size="5" style="margin-left:0px;">
<a-button type="primary" @click="handleSearch">查询</a-button>
<a-button @click="resetSearch">重置</a-button>
</a-space>
</a-col>
</a-row>
</div>
<vxe-grid v-bind="gridOptions" ref="tableRef">
<template #toolbarButtons>
<div style="margin:2px 20px;size:15px">指标填报列表:</div>
......@@ -22,18 +46,31 @@
<vxe-button mode="text" status="primary" @click="saveApproval(row.reportId,1)">通过</vxe-button>
<vxe-button mode="text" status="error" @click="saveApproval(row.reportId,2)">退回</vxe-button>
</template>
<template #mtrcName="{ row }">
<a @click="showChartModal(row)" style="color: #409eff; cursor: pointer;">
{{ row.mtrcName }}
</a>
</template>
</vxe-grid>
</a-col>
</a-row>
<!-- 图表弹窗组件 -->
<MetricChartModal
v-model:visible="chartModalVisible"
:title="chartModalTitle"
:row="currentRow"
@cancel="handleModalClose"
/>
</div>
</template>
<script lang="ts" setup>
import { reactive, onMounted,ref } from 'vue'
import { reactive, onMounted, ref } from 'vue'
import type { VxeGridProps } from 'vxe-table'
import { dataApprovalList,batchSaveApproval } from '../MetricReport.api';
import Left from './left.vue'
import MetricChartModal from './components/MetricChartModal.vue'
interface RowVO {
id: number
......@@ -46,6 +83,21 @@ interface RowVO {
const tableRef = ref()
const totalRecords = ref()
// 图表弹窗
const chartModalVisible = ref(false)
const chartModalTitle = ref('')
const currentRow = ref<any>(null)
// 搜索表单
const searchForm = reactive({
stFillTime: null,
endFillTime: null
})
// 左侧筛选条件
const formData = reactive({})
const gridOptions = reactive<VxeGridProps<RowVO>>({
border: true,
showOverflow: true,
......@@ -71,7 +123,6 @@ const gridOptions = reactive<VxeGridProps<RowVO>>({
return {
color: 'red'
}
} else if (row.appSta == '未审批') {
return {
backgroundColor: ''
......@@ -86,7 +137,6 @@ const gridOptions = reactive<VxeGridProps<RowVO>>({
return {
color: '#FA8C16'
}
} else if (row.riskLevel == '高风险') {
return {
color: '#CF1322'
......@@ -100,7 +150,7 @@ const gridOptions = reactive<VxeGridProps<RowVO>>({
{ field: 'reportId', title: 'id', visible:false },
{ field: 'mtrcNo', title: '指标编码', sortable: true },
{ field: 'mtrcName', title: '指标名称', showOverflow: true },
{ field: 'mtrcName', title: '指标名称', showOverflow: true, slots: { default: 'mtrcName' } },
{ field: 'collFreq', title: '采集频率', },
{ field: 'timeName', title: '填报时间' },
{ field: 'riskLevel', title: '风险等级' },
......@@ -122,10 +172,20 @@ const gridOptions = reactive<VxeGridProps<RowVO>>({
data: []
})
async function setDataList(params) {
async function setDataList(params = {}) {
// 存储左侧筛选条件
Object.assign(formData, params)
// 合并时间搜索条件
const searchParams = {
...params,
stFillTime: searchForm.stFillTime,
endFillTime: searchForm.endFillTime
}
gridOptions.loading = true
try {
const res = await dataApprovalList(params);
const res = await dataApprovalList(searchParams);
gridOptions.data = res || []
totalRecords.value = res.length
} catch (error) {
......@@ -169,10 +229,34 @@ async function getSelectIds() {
return ids;
}
// 处理搜索
const handleSearch = async () => {
await setDataList(formData)
}
// 重置搜索
const resetSearch = () => {
searchForm.stFillTime = null
searchForm.endFillTime = null
setDataList({})
}
onMounted(async () => {
await setDataList({});
})
// 显示图表弹窗
const showChartModal = (row) => {
currentRow.value = row
chartModalTitle.value = `指标详情 - ${row.mtrcName}`
chartModalVisible.value = true
}
// 处理弹窗关闭
const handleModalClose = () => {
chartModalVisible.value = false
}
defineExpose({
setDataList,
})
......@@ -211,4 +295,32 @@ defineExpose({
margin: 0 4px;
}
:deep(.ant-modal) {
top: 20px;
}
:deep(.ant-modal-content) {
height: 90vh;
display: flex;
flex-direction: column;
}
:deep(.ant-modal-body) {
flex: 1;
overflow: auto;
padding: 24px;
}
:deep(.ant-tabs-tabpane) {
transition: none !important;
height: 100%;
}
:deep(.ant-table-wrapper) {
height: 100%;
}
:deep(.ant-table-body) {
overflow-y: auto !important;
}
</style>
\ No newline at end of file
......@@ -122,6 +122,35 @@
</div>
</template>
</vxe-form-item>
<vxe-form-item title="是否统计" field="metrictype" span="24" :item-render="{}" title-overflow>
<template #default="params">
<div class="button-group">
<vxe-button
:mode="params.data.metrictype === undefined ? 'button' : 'text'"
:status="params.data.metrictype === undefined ? 'primary' : ''"
@click="handleButtonClick('mtrcTp', undefined, params)"
>
全部
</vxe-button>
<vxe-button
:mode="params.data.mtrcTp === '1' ? 'button' : 'text'"
:status="params.data.mtrcTp === '1' ? 'primary' : ''"
@click="handleButtonClick('mtrcTp', '1', params)"
>
统计
</vxe-button>
<vxe-button
:mode="params.data.metrictype === '2' ? 'button' : 'text'"
:status="params.data.mtrcTp === '2' ? 'primary' : ''"
@click="handleButtonClick('mtrcTp', '2', params)"
>
不统计
</vxe-button>
</div>
</template>
</vxe-form-item>
<vxe-form-item title="审批状态" field="appSta" span="24" :item-render="{}" title-overflow>
<template #default="params">
<div class="button-group">
......@@ -132,13 +161,6 @@
>
全部
</vxe-button>
<vxe-button
:mode="params.data.appSta === '0' ? 'button' : 'text'"
:status="params.data.appSta === '0' ? 'primary' : ''"
@click="handleButtonClick('appSta', '0', params)"
>
未审批
</vxe-button>
<vxe-button
:mode="params.data.appSta === '1' ? 'button' : 'text'"
:status="params.data.appSta === '1' ? 'primary' : ''"
......@@ -179,7 +201,8 @@ interface FormDataVO {
collMethod:number|undefined
collFreq:number|undefined
mtrcCtp:string|undefined
appSta:string|undefined
appSta:string|undefined,
mtrcTp:string|undefined,
}
......@@ -198,11 +221,14 @@ const formData = ref<FormDataVO>({
collMethod:undefined,
collFreq:undefined,
mtrcCtp:undefined,
appSta:undefined
appSta:undefined,
mtrcTp:undefined,
})
// 处理按钮点击事件
const handleButtonClick = (field: keyof FormDataVO, value: any, params: any) => {
// 如果点击已选中的按钮,则取消选择
if (formData.value[field] === value) {
formData.value[field] = undefined;
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论