Skip to content

Z
zrch-risk-39
提交 6538bd96 authored 作者: kxjia's avatar kxjia
浏览文件
操作

修改TB3

上级 9ea05c50
显示空白字符变更
内嵌 并排
正在显示 包含 953 行增加 和 1236 行删除
zrch-risk-client-39/pnpm-lock.yaml
浏览文件 @ 6538bd96
......@@ -89,6 +89,9 @@ importers:
dayjs:
specifier: ^1.11.18
version: 1.11.19
docx-preview:
specifier: ^0.3.7
version: 0.3.7
dom-align:
specifier: ^1.12.4
version: 1.12.4
......@@ -3661,6 +3664,9 @@ packages:
resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
engines: {node: '>=6.0.0'}
docx-preview@0.3.7:
resolution: {integrity: sha512-Lav69CTA/IYZPJTsKH7oYeoZjyg96N0wEJMNslGJnZJ+dMUZK85Lt5ASC79yUlD48ecWjuv+rkcmFt6EVPV0Xg==}
dom-align@1.12.4:
resolution: {integrity: sha512-R8LUSEay/68zE5c8/3BDxiTEvgb4xZTF0RKmAHfiEVN3klfIpXfi2/QCoiWPccVQ0J/ZGdz9OjzL4uJEP/MRAw==}
......@@ -11584,6 +11590,10 @@ snapshots:
dependencies:
esutils: 2.0.3
docx-preview@0.3.7:
dependencies:
jszip: 3.10.1
dom-align@1.12.4: {}
dom-scroll-into-view@2.0.1: {}
......
zrch-risk-client-39/src/views/baosong/data/tb3.data.ts
浏览文件 @ 6538bd96
......@@ -33,7 +33,7 @@ export const tableFormData = [
{ type: 'text', value: '（1）重要信息系统总数（不含基础设施类）：' },
{ type: 'input', value: '', unit: '个', field: 'COL0' },
{ type: 'brspace' },
{ type: 'text', value: '，其中：（银行业）' },
{ type: 'text', value: '其中：（银行业）' },
{ type: 'brspace' },
{ type: 'text', value: '综合业务类：' },
{ type: 'number', value: '', unit: '个', field: 'COL1' },
......@@ -41,42 +41,47 @@ export const tableFormData = [
{ type: 'number', value: '', unit: '个', field: 'COL2' },
{ type: 'text', value: '，客户管理类：' },
{ type: 'number', value: '', unit: '个', field: 'COL3' },
{ type: 'text', value: '，产品管理类：' },
{ type: 'brspace' },
{ type: 'text', value: '产品管理类：' },
{ type: 'number', value: '', unit: '个', field: 'COL4' },
{ type: 'text', value: '，财务管理类：' },
{ type: 'text', value: '财务管理类：' },
{ type: 'number', value: '', unit: '个', field: 'COL5' },
{ type: 'text', value: '，决策支持类：' },
{ type: 'number', value: '', unit: '个', field: 'COL6' },
{ type: 'text', value: '，共享支持类：' },
{ type: 'brspace' },
{ type: 'text', value: '共享支持类：' },
{ type: 'number', value: '', unit: '个', field: 'COL7' },
{ type: 'text', value: '，其他：' },
{ type: 'number', value: '', unit: '个', field: 'COL8' },
{ type: 'brspace' },
{ type: 'text', value: '，（保险业）' },
{ type: 'brspace' },
{ type: 'text', value: '核心业务处理类：' },
{ type: 'number', value: '', unit: '个', field: 'C20B001' },
{ type: 'text', value: '，销售及服务类：' },
{ type: 'number', value: '', unit: '个', field: 'C20B002' },
{ type: 'text', value: '，客户管理类：' },
{ type: 'number', value: '', unit: '个', field: 'COL3' },
{ type: 'text', value: '，综合管理类：' },
{ type: 'number', value: '', unit: '个', field: 'C20B003' },
{ type: 'text', value: '，财务管理类：' },
{ type: 'number', value: '', unit: '个', field: 'COL5' },
{ type: 'text', value: '，内控合规类：' },
{ type: 'number', value: '', unit: '个', field: 'C20B004' },
{ type: 'text', value: '，其他：' },
{ type: 'number', value: '', unit: '个', field: 'COL8' },
// { type: 'text', value: '其中（保险业）' },
// { type: 'brspace' },
// { type: 'text', value: '核心业务处理类：' },
// { type: 'number', value: '', unit: '个', field: 'C20B001' },
// { type: 'text', value: '，销售及服务类：' },
// { type: 'number', value: '', unit: '个', field: 'C20B002' },
// { type: 'text', value: '，客户管理类：' },
// { type: 'number', value: '', unit: '个', field: 'COL3' },
// { type: 'text', value: '，综合管理类：' },
// { type: 'number', value: '', unit: '个', field: 'C20B003' },
// { type: 'brspace' },
// { type: 'text', value: '，财务管理类：' },
// { type: 'number', value: '', unit: '个', field: 'COL5' },
// { type: 'text', value: '，内控合规类：' },
// { type: 'number', value: '', unit: '个', field: 'C20B004' },
// { type: 'text', value: '，其他：' },
// { type: 'number', value: '', unit: '个', field: 'COL8' },
{ type: 'br' },
{ type: 'text', value: '（2）安全保护等级：' },
{ type: 'brspace' },
{ type: 'text', value: '1级：' },
{ type: 'number', value: '', unit: '个', field: 'COL9' },
{ type: 'text', value: '，2级：' },
{ type: 'number', value: '', unit: '个', field: 'COL10' },
{ type: 'text', value: '，3级：' },
{ type: 'number', value: '', unit: '个', field: 'COL11' },
{ type: 'brspace' },
{ type: 'text', value: '4级：' },
{ type: 'number', value: '', unit: '个', field: 'COL12' },
{ type: 'text', value: '，5级：' },
......@@ -113,14 +118,16 @@ export const tableFormData = [
{ type: 'text', value: '，纳入同城又纳入异地灾备：' },
{ type: 'number', value: '', unit: '个', field: 'COL22' },
{ type: 'brspace' },
{ type: 'text', value: '灾难恢复能力等级：' },
{ type: 'text', value: '<strong>灾难恢复能力等级：</strong>：' },
{ type: 'brspace' },
{ type: 'text', value: '1级：' },
{ type: 'number', value: '', unit: '个', field: 'COL23' },
{ type: 'text', value: '，2级：' },
{ type: 'number', value: '', unit: '个', field: 'COL24' },
{ type: 'text', value: '，3级：' },
{ type: 'number', value: '', unit: '个', field: 'COL25' },
{ type: 'text', value: '，4级：' },
{ type: 'brspace' },
{ type: 'text', value: '4级：' },
{ type: 'number', value: '', unit: '个', field: 'COL26' },
{ type: 'text', value: '，5级：' },
{ type: 'number', value: '', unit: '个', field: 'COL27' },
......@@ -368,38 +375,41 @@ export const tableFormData = [
},
{
name: '灾备情况-区域',
formType: 'checkbox-group',
formType: 'combinaform',
childs: [
{
label: '备份地域',
formType: 'checkbox',
field: 'COL80',
options: ['同城灾备', '异地灾备'],
extraFields: {
同城灾备: [
options: [
{ label: '同城灾备', value: '同城灾备' },
{ label: '异地灾备', value: '异地灾备' },
]
},
{
label: '同城灾备级别',
field: 'COL81',
formType: 'radio',
field: 'COL81',
options: [
{ label: '数据级', value: '数据级' },
{ label: '系统级', value: '系统级' },
{ label: '应用级', value: '应用级' },
],
width: '500px',
]
},
],
异地灾备: [
{
label: '异地灾备级别',
field: 'COL82',
formType: 'radio',
field: 'COL82',
options: [
{ label: '数据级', value: '数据级' },
{ label: '系统级', value: '系统级' },
{ label: '应用级', value: '应用级' },
],
width: '500px',
]
},
],
},
},
{
name: '建立应急预案',
formType: 'radio-group',
......
zrch-risk-client-39/src/views/baosong/report/components/Tb3.vue
浏览文件 @ 6538bd96
<template>
<div class="bank-report-table" @click="closeAllTooltips">
<div
class="bank-report-table"
style="height:80vh"
@click="closeAllTooltips"
>
<!-- 加载遮罩层 -->
<div v-if="loading" class="loading-overlay">
<div class="loading-spinner">
......@@ -8,175 +12,259 @@
</div>
</div>
<!-- 工具栏 -->
<vxe-toolbar>
<template #buttons>
<div style="margin:10px">
<span style="font-weight: bold"> 填报任务：{{ queryParam?.taskName }} </span>
<span style="font-weight: bold;margin-left:20px"> 表格：{{ queryParam?.tplCode }} {{ queryParam?.tplName }}</span>
<span class="table-info-text">填报任务：{{ queryParam.taskName }}</span>
<span class="table-info-text" style="margin-left:20px">
表格：{{ queryParam.tplCode }} {{ queryParam.tplName }}
</span>
</div>
</template>
<template #tools v-if="!queryParam.comfrom">
<vxe-button status="primary" icon="vxe-icon-edit" @click="handleOpenHistoryDrawer()" :disabled="loading">近5年数据填报</vxe-button>
<vxe-button status="primary" icon="vxe-icon-edit" @click="validateData()" :disabled="loading">校验</vxe-button>
<vxe-button status="primary" icon="vxe-icon-save" @click="saveBatch()" :disabled="loading">保存</vxe-button>
<vxe-button
status="primary"
icon="vxe-icon-edit"
@click="handleOpenHistoryDrawer"
:disabled="loading"
>
近5年数据填报
</vxe-button>
<vxe-button
status="primary"
icon="vxe-icon-save"
@click="validateData"
>
校验
</vxe-button>
<vxe-button
status="primary"
icon="vxe-icon-save"
@click="saveBatch"
>
保存
</vxe-button>
</template>
</vxe-toolbar>
<!-- 主表格 -->
<vxe-table
border
ref="tableRef"
height="auto"
show-header-overflow
:data="tableFormData"
:column-config="{ resizable: true }"
:row-config="{ resizable: true }"
height="auto"
class="custom-table"
:merge-cells="mergeCells"
:loading="loading"
>
<vxe-column field="serialNumber" title="序号" width="50"></vxe-column>
<vxe-column field="project" title="项目" width="40">
<template #default="{ row }">
<span style="font-weight: bold;size:20px">{{ row.project }}</span>
</template>
</vxe-column>
<vxe-column field="project2" title="" width="120">
<vxe-column field="project" title="项目" width="200">
<template #default="{ row }">
<span style="font-weight: bold;size:20px">{{ row.project2 }}</span>
<span class="project-name">{{ row.project }}</span>
</template>
</vxe-column>
<vxe-column field="content" title="内容" row-resize>
<template #default="{ row }">
<vxe-column field="content" title="内容">
<template #default="{ row }">
<div class="content-cell">
<!-- 多列表格 -->
<template v-if="row.type === 'MultiColumnTable'">
<MultiColumnTable
:title="row.project"
:records="row.datas"
:columnsPerRow="1"
:records="[]"
:fields="row.content"
:ref="(el) => setMultiColumnTableRef(el, row.code)"
style="margin:0px;padding:0px"
/>
</template>
<!-- 附件表格 -->
<template v-else-if="row.type === 'AttachTable'">
<AttachTable
:disabled="!row.hasRight"
:title="row.project"
:records="row.datas"
:fields="row.content"
:pcode="row.code"
:calcSum="row.calcSum"
:showFooter="row.showFooter"
:ref="(el) => setAttachTableRef(el, row.code)"
:disabled="!row.hasRight"
style="margin:0px;padding:0px"
/>
</template>
<template v-else-if="row.type === 'ExportTable'">
<ExportTable
:disabled="!row.hasRight"
<!-- Vxe表格 -->
<template v-else-if="row.type === 'VxeTable'">
<MyVxeTable1
:title="row.project"
:records="row.datas"
:fields="row.content"
:data="row.data"
:columns="row.columns"
:pcode="row.code"
:ref="(el) => setExportTableRef(el, row.code)"
:footerData="row.footerData"
:showFooter="row.showFooter"
:ref="(el) => setMyVxeTableRef(el, row.code)"
:disabled="!row.hasRight"
style="margin:0px;padding:0px"
/>
</template>
<!-- 普通字段渲染 -->
<template v-else>
<template v-for="(item, index) in row.content" :key="index">
<!-- 文本类型 -->
<span v-if="item.type === 'text'" v-html="item.value"></span>
<!-- 换行 -->
<span v-else-if="item.type === 'br'"><br></span>
<!-- 带缩进的换行 -->
<span v-else-if="item.type === 'brspace'">
<br>
<template v-for="i in item.value||1" :key="i">
<template v-for="i in (item.value || 1)" :key="i">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</template>
</span>
<!-- 单选组 -->
<span v-else-if="item.type === 'radio-group'" class="radio-group">
<vxe-radio-group v-model="formData[row.code +'_'+ item.field]" :disabled="!item.hasRight">
<vxe-radio-group
v-model="formData[getFieldKey(row.code, item.field)]"
:disabled="!item.hasRight || isRadioDisabled(row.code, item)"
>
<vxe-radio
v-for="(opt, optIndex) in item.options"
:key="optIndex"
:label="opt"
>{{ opt }}</vxe-radio
>
{{ opt }}
</vxe-radio>
</vxe-radio-group>
</span>
<div v-else-if="item.type === 'checkbox-group'" class="checkbox-group">
<!-- 多选组（带其他选项） -->
<div v-else-if="item.type === 'checkbox-group'">
<span class="checkbox-group">
<vxe-checkbox-group v-model="formData[row.code+'_'+item.field]" :disabled="!item.hasRight">
<vxe-checkbox v-for="(opt, optIndex) in item.options" :key="optIndex" :label="opt">
<vxe-checkbox-group
v-model="formData[getFieldKey(row.code, item.field)]"
:disabled="!item.hasRight"
>
<vxe-checkbox
v-for="(opt, optIndex) in item.options"
:key="optIndex"
:label="opt"
>
{{ opt }}
</vxe-checkbox>
<template v-if="item.otereField">
<vxe-checkbox style="margin:0px" label="其他">
<template v-if="item.otherField">
<div style="width:100%">
<vxe-checkbox label="其他" :disabled="!item.hasRight">
其他：
</vxe-checkbox>
<vxe-input v-model="formData[row.code + '_'+ item.otereField]" style="width: 100px;">
</vxe-input>
<vxe-input
v-model="formData[getFieldKey(row.code, item.otherField)]"
:disabled="!isOtherFieldEnabled(row.code, item) || !item.hasRight"
style="width: 50%"
@blur="handleInputBlur(row.code, item.otherField, item.matchedFormula?.formula)"
/>
</div>
</template>
</vxe-checkbox-group>
<!-- 其他选项 -->
</span>
</div>
<template v-else-if="item.type === 'textarea'">
<vxe-textarea
<!-- 多选带输入框 -->
<div v-else-if="item.type === 'checkboxAndInput'">
<span style="margin-left:20px">
<vxe-checkbox-group
v-model="formData[getFieldKey(row.code, item.field)]"
:disabled="!item.hasRight"
v-model="formData[row.code +'_'+ item.field]"
size="mini"
class="table-input"
rows="1"
style="width:300px"
>
</vxe-textarea>
</template>
<vxe-checkbox
v-for="(opt, optIndex) in item.options"
:key="optIndex"
:label="opt"
:disabled="!item.hasRight"
style="margin-left: 0px;display: block;"
>
{{ opt }}
<vxe-input
type="number"
v-model="formData[getFieldKey(row.code, item.optionItemField[optIndex])]"
:disabled="!item.hasRight"
style="width: 100px;margin: 0px;"
@blur="handleInputBlur(row.code, item.optionItemField[optIndex], item.matchedFormula?.formula)"
/>
<span class="unit"> {{ item.optionItemUint }}</span>
</vxe-checkbox>
</vxe-checkbox-group>
</span>
</div>
<!-- 普通输入框 -->
<template v-else>
<div class="input-wrapper">
<vxe-input
:disabled="!item.hasRight"
:disabled="!item.hasRight || isInputDisabled(row.code, item)"
:type="item.type"
v-model="formData[row.code +'_'+ item.field]"
v-model="formData[getFieldKey(row.code, item.field)]"
size="mini"
class="table-input"
:style="{width:item.width}"
:status="getInputStatus(row.code, item.field)"
:style="item.style"
@blur="handleInputBlur(row.code, item.field, item.matchedFormula?.formula)"
>
</vxe-input>
<span class="unit"> {{ item.unit }}</span>
/>
<span class="unit">{{ item.unit }}</span>
<!-- 帮助图标 -->
<span
v-if="showHelpIcon(row.code, item.field, item)"
v-if="item.hasValidFormula"
class="help-icon"
@click.stop="toggleTooltip(row.code, item.field)"
title="点击查看校验规则"
>
?
</span>
<!-- 错误图标 -->
<span
v-if="getInputStatus(row.code, item.field) === 'error'"
v-if="inputErrors[getFieldKey(row.code, item.field)]"
class="error-icon"
@click.stop="toggleErrorTooltip(row.code, item.field)"
>
<i class="vxe-icon-error">✗</i>
</span>
<!-- 错误提示 -->
<div
v-if="showTooltip && hoveredKey === row.code +'_'+ item.field"
class="tooltip"
v-if="showErrorTooltip && hoveredErrorKey === getFieldKey(row.code, item.field)"
class="error-tooltip"
@click.stop
>
{{ item.matchedFormula?.des || '暂无校验规则' }}
{{ inputErrors[getFieldKey(row.code, item.field)].message }}
<br>
<span style="color: #ffcccc;">
公式: {{ inputErrors[getFieldKey(row.code, item.field)].formula }}
</span>
<template v-if="inputErrors[getFieldKey(row.code, item.field)].error">
<br>
<span style="color: #ff9999; font-size: 11px;">
错误: {{ inputErrors[getFieldKey(row.code, item.field)].error }}
</span>
</template>
</div>
<!-- 校验规则提示 -->
<div
v-if="showErrorTooltip && hoveredErrorKey === row.code +'_'+ item.field"
class="error-tooltip"
v-if="showTooltip && hoveredKey === getFieldKey(row.code, item.field)"
class="tooltip"
@click.stop
>
{{ getErrorMessage(row.code, item.field) }}
<br>
<span style="color: #ffcccc;">
公式: {{ item.matchedFormula?.formula }}
</span>
{{ item.matchedFormula?.des || '暂无校验规则' }}
</div>
</div>
</template>
......@@ -185,17 +273,18 @@
</div>
</template>
</vxe-column>
<vxe-column field="remarks" title="备注" width="60">
<!-- 备注列 -->
<vxe-column field="remarks" title="备注" width="200">
<template #default="{ row }">
<vxe-textarea :disabled="row.remarks.hasRight" :rows="row.remarks.rows" v-model="formData[row.code+'_'+row.remarks.field]">
</vxe-textarea>
<vxe-textarea
:rows="row.remarks.rows"
v-model="formData[getFieldKey(row.code, row.remarks.field)]"
/>
</template>
</vxe-column>
</vxe-table>
<!-- 历史填报检查组件 -->
<HistoryFillCheck ref="historyFillCheckRef" v-model="historyDrawerVisible" @closeDrawer="closeHistoryDrawer"/>
<!-- 校验抽屉 -->
<ValidationDrawer
ref="validationDrawerRef"
......@@ -203,1043 +292,911 @@
:tableFormData="tableFormData"
@validationResultClick="handleValidationResultClick"
/>
</div>
<!-- 历史填报抽屉 -->
<HistoryFillCheck
ref="historyFillCheckRef"
v-model="historyDrawerVisible"
@closeDrawer="closeHistoryDrawer"
/>
</div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { VxeUI, VxeTableInstance } from 'vxe-table'
import 'vxe-table/lib/style.css'
import { useRoute } from 'vue-router'
// 组件导入
import MultiColumnTable from '../tableComponents/MultiColumnTable.vue'
import AttachTable from '../tableComponents/AttachTable.vue'
import MyVxeTable1 from '../tableComponents/MyVxeTable.vue'
import HistoryFillCheck from './check/HistoryFillCheck.vue'
import ValidationDrawer from './check/ValidationDrawer.vue'
import { tableFormData } from '../../data/tb3.data';
import { ref, reactive, nextTick, onMounted, toRaw, computed, } from 'vue'
import { VxeUI,VxeTablePropTypes,VxeToolbarPropTypes } from 'vxe-table'
import { batchSaveOrUpdate, queryRecord,batchSaveOrUpdateBeforeDelete } from '../../record/BaosongTaskRecord.api'
import { findUserRightForTplItem } from '../../alloc/BaosongTaskAlloc.api'
// 数据导入
import { tableFormData } from '../../data/tb3.data'
// API 导入
import {
batchSaveOrUpdate,
queryRecord,
batchSaveOrUpdateBeforeDelete
} from '../../record/BaosongTaskRecord.api'
import {
queryAllTplItemForUser,
findUserRightForTplItem
} from '../../alloc/BaosongTaskAlloc.api'
import { allTplItems } from '../../tpl/BaosongTplItem.api'
import { getTblvalidFormula } from '../../tpl/BaosongDataValid.api'
import { useRoute } from 'vue-router';
// 类型定义
interface QueryParam {
taskId: number
taskName: string
tplId: number
tplName: string
tplCode: string
comfrom: string
}
interface FormDataItem {
id: number | null
taskid: number
tplid: number
itemid?: number
itempid?: number
content: string
tplcode: string
rind: number
}
interface FormulaItem {
formula: string
des: string
[key: string]: any
}
interface ContentItem {
type: string
field: string
value?: any
hasRight?: boolean
hasValidFormula?: boolean
matchedFormula?: FormulaItem
relatedFiled?: string
otherField?: string
optionItemField?: string[]
[key: string]: any
}
interface TableRow {
code: string
project: string
type?: string
content: ContentItem[] | any
remarks: { rows: number; field: string }
hasRight?: boolean
[key: string]: any
}
interface InputError {
message: string
formula: string
error?: string
}
const historyFillCheckRef = ref();
const validationDrawerRef = ref();
const historyDrawerVisible = ref(false);
interface TplItemMapValue {
pid: number
itemid: number
formTp: string
code: string
}
const route = useRoute();
const tableRef = ref();
const tplItemMap = ref({});
const userAllocItems = ref([])
const validFormula = ref([])
const validationResults = ref<Record<string, string>>({})
const validationMessages = ref<Record<string, string>>({})
// 路由和组件引用
const route = useRoute()
const tableRef = ref<VxeTableInstance>()
const historyFillCheckRef = ref()
const validationDrawerRef = ref()
const formData = reactive({});
const formValues = ref<FormData[]>([])
// 响应式状态
const loading = ref(true)
const historyDrawerVisible = ref(false)
const drawerVisible = ref(false)
const showTooltip = ref(false)
const hoveredKey = ref('')
const showErrorTooltip = ref(false)
const hoveredErrorKey = ref('')
const isInitialized = ref(false)
const fieldKeys = computed(() => Object.keys(formData));
const getFieldKey = (rowCode: string, field: string): string => {
return `${rowCode}_${field}`;
};
// 数据状态
const queryParam = ref<QueryParam>({
taskId: -1,
taskName: '',
tplId: -1,
tplName: '',
tplCode: '',
comfrom: ''
})
const showHelpIcon = (rowCode: string, field: string, item: any): boolean => {
if (item.hasValidFormula !== undefined) {
return item.hasValidFormula === true;
}
const formData = reactive<Record<string, any>>({})
const formValues = ref<FormDataItem[]>([])
const inputErrors = ref<Record<string, InputError>>({})
const userAllocItems = ref<string[]>([])
const validFormula = ref<FormulaItem[]>([])
const tplItemMap = ref<Record<string, TplItemMapValue>>({})
const key = getFieldKey(rowCode, field);
const hasRight = userAllocItems.value.includes(key);
// 子组件引用
const childMultiTableRefs = ref<Record<string, any>>({})
const childAttachTableRefs = ref<Record<string, any>>({})
const childMyVexTableRefs = ref<Record<string, any>>({})
if (!hasRight) return false;
// 计算属性
const fieldKeys = computed(() => Object.keys(formData))
const formulaResult = findEarliestFormulaForField(validFormula.value, field);
return !!formulaResult.formula;
};
// 工具函数
const getFieldKey = (rowCode: string, field: string): string => {
return `${rowCode}_${field}`
}
// 校验结果抽屉相关
const drawerVisible = ref(false)
const validationResultsList = ref<any[]>([])
const isRadioDisabled = (rowCode: string, item: ContentItem): boolean => {
if (!item.relatedFiled) return false
const relatedKey = getFieldKey(rowCode, item.relatedFiled)
return formData[relatedKey] !== '是'
}
interface FormulaItem {
formula: string;
des: string;
[key: string]: any;
const isInputDisabled = (rowCode: string, item: ContentItem): boolean => {
if (!item.relatedFiled) return false
const relatedKey = getFieldKey(rowCode, item.relatedFiled)
return formData[relatedKey] !== '是'
}
interface InputError {
message: string;
formula: string;
error?: string;
const isOtherFieldEnabled = (rowCode: string, item: ContentItem): boolean => {
const checkboxKey = getFieldKey(rowCode, item.field)
const checkboxValue = formData[checkboxKey] || []
return checkboxValue.includes('其他')
}
interface ValidationResult {
fieldTitle: string
fieldName: string
formula: string
isValid: boolean
resultMessage: string
process?: string[]
}
const queryParam = ref({
taskId:-1,
taskName:'',
tplId:-1,
tplName:'',
tplCode:'',
comfrom:''
// 初始化
onMounted(async () => {
await initPage()
})
interface FormData {
id: number | null
taskid: number
tplid: number
itemid?: number
itempid?:number
content: string
tplcode:string
rind:number
const initPage = async () => {
try {
loading.value = true
await initQueryParams()
await Promise.all([
loadUserRights(),
loadValidationFormulas(),
loadTemplateItems()
])
await setFormItemRight()
await loadTableData()
} catch (error: any) {
showErrorMessage(`初始化页面失败: ${error.message}`)
} finally {
loading.value = false
}
}
// 初始化loading状态
const loading = ref(true)
const initQueryParams = () => {
const { taskId, taskName, tplId, tplName, tplCode,comfrom } = route.query
onMounted(async ()=>{
if (route.query.taskId) {
queryParam.value.taskId = Number(route.query.taskId);
}
if (route.query.taskName) {
queryParam.value.taskName = String(route.query.taskName);
}
if (route.query.tplId) {
queryParam.value.tplId = Number(route.query.tplId);
}
if (route.query.tplName) {
queryParam.value.tplName = String(route.query.tplName);
}
if (route.query.tplCode) {
queryParam.value.tplCode = String(route.query.tplCode);
}
if (route.query.comfrom) {
queryParam.value.comfrom = String(route.query.comfrom);
}
if (taskId) queryParam.value.taskId = Number(taskId)
if (taskName) queryParam.value.taskName = String(taskName)
if (tplId) queryParam.value.tplId = Number(tplId)
if (tplName) queryParam.value.tplName = String(tplName)
if (tplCode) queryParam.value.tplCode = String(tplCode)
if (comfrom) queryParam.value.comfrom = String(comfrom)
}
try {
const loadUserRights = async () => {
userAllocItems.value = await findUserRightForTplItem({
tplid:queryParam.value.tplId,
taskid:queryParam.value.taskId
});
tplid: queryParam.value.tplId,
taskid: queryParam.value.taskId
})
}
const loadValidationFormulas = async () => {
validFormula.value = await getTblvalidFormula({
tplid:queryParam.value.tplId,
});
await setFormItemRight();
await setTplItemMap()
await setData();
// 标记初始化完成
isInitialized.value = true
// 延迟刷新一次，确保问号图标显示
setTimeout(() => {
refreshHelpIcons()
}, 300)
} catch (error) {
VxeUI.modal.message({
content: `初始化页面失败: ${error.message}`,
status: 'error'
});
} finally {
loading.value = false
tplid: queryParam.value.tplId
})
}
const loadTemplateItems = async () => {
const items = await allTplItems({
tplid: queryParam.value.tplId
})
tplItemMap.value = items.reduce((acc: Record<string, TplItemMapValue>, item) => {
const key = `${item.pcode}_${item.xmlcode}`
acc[key] = {
pid: item.pid,
itemid: item.id,
formTp: item.formTp,
code: item.xmlcode
}
})
return acc
}, {})
}
const setFormItemRight = async () => {
tableFormData.forEach(row => {
const setFormItemRight = () => {
tableFormData.forEach((row: TableRow) => {
if (row.content && Array.isArray(row.content)) {
row.content.forEach(item => {
row.content.forEach((item: ContentItem) => {
if (item.field) {
let tmpKey = `${row.code}_${item.field}`;
item["hasRight"] = userAllocItems.value.indexOf(tmpKey)>-1
item["hasValidFormula"] = validFormula.value?.length > 0 &&
validFormula.value.some((f: any) => {
const formulaText = (f.formula || '').toString()
return formulaText.includes(item.field)
})
const key = getFieldKey(row.code, item.field)
item.hasRight = userAllocItems.value.includes(key)
if (item.hasRight) {
const { formula } = findEarliestFormulaForField(validFormula.value, item.field)
item.hasValidFormula = !!formula
item.matchedFormula = formula
}
});
}
if (row.remarks && row.remarks.field) {
let tmpKey = `${row.code}_${row.remarks.field}`;
row.remarks["hasRight"] = userAllocItems.value.indexOf(tmpKey)>-1
row.remarks["hasValidFormula"] = validFormula.value?.length > 0 &&
validFormula.value.some((f: any) => {
const formulaText = (f.formula || '').toString()
return formulaText.includes(row.remarks.field)
})
}
});
})
}
// 保存相关
const saveBatch = async () => {
try {
// 保存时也显示loading
const saveLoading = ref(true)
formValues.value = []
if (!await validateForm()) return
for (const strKey in formData) {
const valData = formData[strKey]
if (valData) {
let tmpAry = strKey.split("_")
await setFormValues(tmpAry[0],tmpAry[1],valData,1)
}
await prepareFormData()
if (formValues.value.length === 0) {
showWarningMessage('没有需要保存的数据')
return
}
await getAttachTableFormData();
await getAllMultiTableFormData()
if (formValues.value.length > 0) {
await batchSaveOrUpdateBeforeDelete(formValues.value)
VxeUI.modal.message({ content: '保存成功', status: 'success' })
//await setData()
} else {
VxeUI.modal.message({ content: '没有需要保存的数据', status: 'warning' })
}
} catch (error) {
VxeUI.modal.message({ content: `保存失败: ${error.message}`, status: 'error' })
} finally {
loading.value = false
showSuccessMessage('保存成功')
} catch (error: any) {
showErrorMessage(`保存失败: ${error.message}`)
}
}
const childMultiTableRefs = ref({})
const setMultiColumnTableRef = (el: any, index: string) => {
if (el) {
childMultiTableRefs.value[index] = el;
}
};
const validateForm = async (): Promise<boolean> => {
const $table = tableRef.value
if (!$table) return true
const getAllMultiTableFormData = async () => {
for (const pcode in childMultiTableRefs.value) {
const child = childMultiTableRefs.value[pcode];
if (child) {
const datas = child.getFormData()
let rind = 0
for(const obj of datas) {
rind++
Object.keys(obj).forEach(code => {
setFormValues(pcode,code,obj[code],rind)
});
}
}
}
};
const childAttachTableRefs = ref({})
const setAttachTableRef = (el: any, index: string) => {
if (el) {
childAttachTableRefs.value[index] = el; // 保存子组件实例
}
};
const childExportTableRefs = ref({})
const setExportTableRef = (el: any, index: string) => {
if (el) {
childExportTableRefs.value[index] = el; // 保存子组件实例
}
};
const getAttachTableFormData = async () => {
for (const pcode in childAttachTableRefs.value) {
const child = childAttachTableRefs.value[pcode];
if (child) {
const datas = child.getFormData()
for(const code in datas) {
await setFormValues(pcode,code,datas[code],1)
const checkResult = $table.validate()
if (!checkResult) {
showErrorMessage('表单验证失败，请检查填写内容')
return false
}
return true
}
const prepareFormData = async () => {
formValues.value = []
// 处理主表单数据
for (const [key, value] of Object.entries(formData)) {
if (value !== undefined && value !== null && value !== '') {
const [pcode, code] = key.split('_')
await addFormValue(pcode, code, value, 1)
}
}
};
const setFormValues = async (pcode,code,valData,rind) => {
if(!valData) return;
let vals = Array.isArray(valData) ? valData.join(',') : valData
let strKey = pcode+"_"+code
const item = tplItemMap.value[strKey];
const { pid, itemid } = item ?? {};
let tempForm: FormData = {
// 处理子表格数据
await Promise.all([
collectAttachTableData(),
collectMultiTableData(),
collectVxeTableData()
])
}
const addFormValue = async (pcode: string, code: string, value: any, rind: number) => {
if (!value) return
const stringValue = Array.isArray(value) ? value.join(',') : String(value)
const key = getFieldKey(pcode, code)
const item = tplItemMap.value[key]
if (!item) return
const formItem: FormDataItem = {
id: null,
rind:rind,
rind,
taskid: queryParam.value.taskId,
tplid: queryParam.value.tplId,
tplcode: code,
itemid: itemid,
itempid: pid,
content:vals
};
formValues.value.push(tempForm)
}
async function setData() {
try {
loading.value = true; // 开始加载
const taskId = queryParam.value.taskId;
const tplid = queryParam.value.tplId;
Object.keys(formData).forEach(key => delete formData[key]);
await setTplItemMap();
const recordData = await queryRecord({ taskid: taskId, tplid: tplid });
const valueObj = {};
for (const data of recordData) {
const key = `${data.itempid}_${data.itemid}_${data.rind}`;
valueObj[key] = data.content;
itemid: item.itemid,
itempid: item.pid,
content: stringValue
}
for (const row of tableFormData) {
if(!row.type&&row.content) {
for (const cdata of row.content) {
if(cdata.field&&cdata.field.length>0) {
const strKey = `${row.code}_${cdata.field}`;
const item = tplItemMap.value[strKey];
formValues.value.push(formItem)
}
if (!item) continue;
const { pid, itemid, formTp } = item;
const dataVal = valueObj[`${pid}_${itemid}_1`];
if (!dataVal) continue;
if (formTp === 'checkbox') {
formData[strKey] = dataVal?.split(",") || [];
} else {
formData[strKey] = dataVal || "";
}
if(cdata.type&&cdata.type=="checkboxAndInput"){
for (const itemField of cdata.optionItemField) {
const strItemKey = `${row.code}_${itemField}`;
const item2 = tplItemMap.value[strItemKey];
if (!item2) continue;
const { pid:pid2, itemid:itemid2 } = item2;
const dataVal2 = valueObj[`${pid2}_${itemid2}_1`];
formData[strItemKey] = dataVal2 || "";
}
}
}
}
} else if(row.type=="AttachTable"&& row.datas) {
const curAttachTable = childAttachTableRefs.value[row.code];
const attachTableData = {};
for (const cdata of row.datas) {
Object.keys(cdata).forEach(key => {
if(cdata[key]["field"]){
const strKey = `${row.code}_${cdata[key]["field"]}`;
const item = tplItemMap.value[strKey];
if (item) {
const { pid, itemid, formTp, code } = item;
const dataVal = valueObj[`${pid}_${itemid}_1`];
if (dataVal) {
if (formTp === 'checkbox') {
attachTableData[code] = dataVal?.split(",") || [];
} else {
attachTableData[code] = dataVal || "";
// 数据收集函数
const collectAttachTableData = async () => {
for (const [pcode, child] of Object.entries(childAttachTableRefs.value)) {
if (child) {
const datas = await child.getFormData()
for (const [code, value] of Object.entries(datas)) {
await addFormValue(pcode, code, value, 1)
}
}
}
}
const collectMultiTableData = async () => {
for (const [pcode, child] of Object.entries(childMultiTableRefs.value)) {
if (child) {
const datas = await child.getFormData()
let rind = 0
for (const obj of datas) {
rind++
for (const [code, value] of Object.entries(obj)) {
await addFormValue(pcode, code, value, rind)
}
}
});
}
curAttachTable.setFormData(attachTableData);
} else if(row.type=="MultiColumnTable"&& row.content) {
const curMultiTable = childMultiTableRefs.value[row.code];
const rowsMap = {};
for (const cdata of row.content) {
if(cdata.field&&cdata.field.length>0) {
const strKey = `${row.code}_${cdata.field}`;
const tmpData = tplItemMap.value[strKey];
if (!tmpData) continue;
const { pid, itemid, code } = tmpData;
const valKeys = Object.keys(valueObj).filter(k =>
k.startsWith(`${pid}_${itemid}_`)
);
for (const valKey of valKeys) {
const parts = valKey.split('_');
const rind = parts[2];
if (!rowsMap[rind]) {
rowsMap[rind] = {};
}
rowsMap[rind][code] = valueObj[valKey];
}
const collectVxeTableData = async () => {
for (const [pcode, child] of Object.entries(childMyVexTableRefs.value)) {
if (child) {
const formData = await child.getFormData()
let rind = 0
// 表格数据
for (const obj of formData.datas) {
rind++
for (const [code, value] of Object.entries(obj)) {
await addFormValue(pcode, code, value, rind)
}
}
if (formData.footer) {
for (const [code, value] of Object.entries(formData.footer)) {
await addFormValue(formData.footerPcode, code, value, 1)
}
const tableDatas = Object.values(rowsMap);
curMultiTable.setFormData(tableDatas);
}
}
} catch (error) {
console.log(error)
VxeUI.modal.message({
content: `加载数据失败:`,
status: 'error'
});
} finally {
loading.value = false; // 结束加载
}
}
async function setTplItemMap() {
// 数据加载
const loadTableData = async () => {
try {
loading.value = true;
const tplid = queryParam.value.tplId
const tplItem = await allTplItems({
tplid: tplid,
})
tplItem.forEach(item => {
let strKey = item.pcode + "_" + item.xmlcode;
tplItemMap.value[strKey] = {
pid:item.pid,
itemid:item.id,
formTp:item.formTp,
code:item.xmlcode,
title:item.title||item.name,
isDisable:!userAllocItems.value.some(itemid=>itemid==item.id)
}
loading.value = true
// 清空现有数据
Object.keys(formData).forEach(key => delete formData[key])
const recordData = await queryRecord({
taskid: queryParam.value.taskId,
tplid: queryParam.value.tplId
})
} catch (error) {
VxeUI.modal.message({ content: `加载数据失败: ${error.message}`, status: 'error' })
// 转换记录数据为便于查找的结构
const valueMap = recordData.reduce((acc: Record<string, string>, data) => {
const key = `${data.itempid}_${data.itemid}_${data.rind}`
acc[key] = data.content
return acc
}, {})
// 填充表格数据
await fillTableData(valueMap)
} catch (error: any) {
showErrorMessage(`加载数据失败: ${error.message}`)
} finally {
loading.value = false; // 结束加载
loading.value = false
}
}
const fillTableData = async (valueMap: Record<string, string>) => {
for (const row of tableFormData) {
if (!row.type && row.content) {
await fillSimpleFields(row, valueMap)
} else if (row.type === 'AttachTable' && row.datas) {
await fillAttachTable(row, valueMap)
} else if (row.type === 'MultiColumnTable' && row.content) {
await fillMultiColumnTable(row, valueMap)
} else if (row.type === 'VxeTable' && row.columns) {
await fillVxeTable(row, valueMap)
}
}
}
const fillSimpleFields = async (row: TableRow, valueMap: Record<string, string>) => {
if (!row.content || !Array.isArray(row.content)) return
const mergeCells = ref<VxeTablePropTypes.MergeCells>([
{ row: 0, col: 1, rowspan: 9, colspan: 1 },
{ row: 9, col: 1, rowspan: 1, colspan: 2 },
{ row: 10, col: 1, rowspan: 1, colspan: 2 },
{ row: 11, col: 1, rowspan: 2, colspan: 1 },
{ row: 11, col: 3, rowspan: 1, colspan: 2 },
{ row: 10, col: 3, rowspan: 1, colspan: 2 },
{ row: 9, col: 3, rowspan: 1, colspan: 2 },
])
for (const item of row.content) {
if (!item.field) continue
const refreshHelpIcons = () => {
console.log('刷新帮助图标...');
tableFormData.forEach((row: any) => {
if (row.content && Array.isArray(row.content)) {
row.content.forEach((item: any) => {
if (item.field) {
const key = getFieldKey(row.code, item.field);
const hasRight = userAllocItems.value.includes(key);
const key = getFieldKey(row.code, item.field)
const tplItem = tplItemMap.value[key]
if (!tplItem) continue
if (hasRight) {
const formulaResult = findEarliestFormulaForField(validFormula.value, item.field);
item.hasValidFormula = !!formulaResult.formula;
item.matchedFormula = formulaResult.formula || null;
const { pid, itemid, formTp } = tplItem
const valueKey = `${pid}_${itemid}_1`
const dataVal = valueMap[valueKey]
if (dataVal === undefined) continue
if (formTp === 'checkbox') {
formData[key] = dataVal.split(',').filter(Boolean)
} else {
item.hasValidFormula = false;
item.matchedFormula = null;
}
formData[key] = dataVal
}
});
// 处理特殊字段类型
if (item.type === 'checkboxAndInput' && item.optionItemField) {
await fillCheckboxInputFields(row, item, valueMap)
}
});
nextTick(() => {
console.log('帮助图标刷新完成');
});
};
if (item.otherField) {
await fillOtherField(row, item, valueMap)
}
}
}
const findEarliestFormulaForField = (
formulas: FormulaItem[],
field: string
): { formula: FormulaItem | null, index: number } => {
let result = { formula: null, index: Infinity };
const fillCheckboxInputFields = async (
row: TableRow,
item: ContentItem,
valueMap: Record<string, string>
) => {
for (const field of item.optionItemField || []) {
const key = getFieldKey(row.code, field)
const tplItem = tplItemMap.value[key]
if (!tplItem) continue
formulas?.forEach((f: FormulaItem) => {
const text = f.formula || '';
const escapedField = field.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
const regex = new RegExp(`\\b${escapedField}\\b(?!\\w)`, 'g');
const match = regex.exec(text);
const { pid, itemid } = tplItem
const valueKey = `${pid}_${itemid}_1`
const dataVal = valueMap[valueKey]
if (match && match.index < result.index) {
result = { formula: f, index: match.index };
if (dataVal !== undefined) {
formData[key] = dataVal
}
});
}
}
return result;
};
const fillOtherField = async (
row: TableRow,
item: ContentItem,
valueMap: Record<string, string>
) => {
const key = getFieldKey(row.code, item.otherField!)
const tplItem = tplItemMap.value[key]
if (!tplItem) return
const validateData = () => {
drawerVisible.value = true;
validationDrawerRef.value.setValidateData(validFormula.value, formData);
};
const { pid, itemid } = tplItem
const valueKey = `${pid}_${itemid}_1`
const dataVal = valueMap[valueKey]
const handleInputBlur = (rowCode: string, field: string, formula?: string) => {
if (!formula) return;
if (dataVal !== undefined) {
formData[key] = dataVal
}
}
const key = getFieldKey(rowCode, field);
const value = formData[key];
const fillAttachTable = async (row: TableRow, valueMap: Record<string, string>) => {
const child = childAttachTableRefs.value[row.code]
if (!child) return
if (!value || value === '') {
delete validationResults.value[key];
delete validationMessages.value[key];
return;
}
const tableData: Record<string, any> = {}
validateFieldFormula(rowCode, field, formula);
};
for (const data of row.datas || []) {
for (const [key, value] of Object.entries(data)) {
if (typeof value === 'object' && value.field) {
const fieldKey = getFieldKey(row.code, value.field)
const tplItem = tplItemMap.value[fieldKey]
if (!tplItem) continue
const validateFieldFormula = (rowCode: string, field: string, formula: string) => {
const key = getFieldKey(rowCode, field);
const { pid, itemid, formTp, code } = tplItem
const valueKey = `${pid}_${itemid}_1`
const dataVal = valueMap[valueKey]
try {
const expression = buildExpression(formula, rowCode);
const isValid = eval(expression);
if (!isValid) {
validationResults.value[key] = 'error';
validationMessages.value[key] = "公式校验失败，请检查填写内容";
} else {
delete validationResults.value[key];
delete validationMessages.value[key];
if (dataVal) {
tableData[code] = formTp === 'checkbox' ? dataVal.split(',') : dataVal
}
} catch (error: any) {
validationResults.value[key] = 'error';
validationMessages.value[key] = "公式校验失败，请检查填写内容";
}
};
const buildExpression = (formula: string, rowCode: string): string => {
const fieldNames = formula.match(/\b[A-Za-z][A-Za-z0-9_]*\b/g) || [];
const uniqueFields = [...new Set(fieldNames.filter(f =>
!['and', 'or', 'not', 'equal', 'less', 'greater', 'if', 'else', 'true', 'false']
.includes(f.toLowerCase())
))];
uniqueFields.sort((a, b) => b.length - a.length);
let expression = formula;
for (const fieldName of uniqueFields) {
const key = getFieldKey(rowCode, fieldName);
const value = formData[key];
if (value !== undefined) {
expression = expression.replace(
new RegExp(`\\b${fieldName}\\b`, 'g'),
`Number(${value})`
);
}
}
return expression;
};
const handleInputChange = (rowCode: string, itemField: string) => {
const key = `${rowCode}_${itemField}`
validateInput(key)
}
const getInputStatus = (rowCode: string, itemField: string): 'default' | 'error' => {
const key = `${rowCode}_${itemField}`
return validationResults.value[key] || ''
}
const getErrorMessage = (rowCode: string, itemField: string): string => {
const key = `${rowCode}_${itemField}`
return validationMessages.value[key] || ''
child.setFormData(tableData)
}
const toggleTooltip = (rowCode: string, itemField: string) => {
const key = `${rowCode}_${itemField}`
if (hoveredKey.value === key) {
showTooltip.value = false
hoveredKey.value = ''
} else {
showTooltip.value = true
hoveredKey.value = key
function collectAllFields(content, fields = []) {
for (const item of content) {
if (item.field) {
fields.push({ field: item.field, formType: item.formType });
}
}
const getValidationRule = (rowCode: string, itemField: string): string => {
if (!validFormula.value || validFormula.value.length === 0) {
return ''
if (item.otherField) {
fields.push({ field: item.otherField, formType: 'input' });
}
try {
const formulaItems = validFormula.value
const field = itemField
const targetFormula = formulaItems.find((f: any) => {
const formulaText = (f.formula || '').toString()
const regex = new RegExp(`\\b${field}\\b`, 'gi')
return regex.test(formulaText)
})
if (targetFormula) {
return targetFormula.des || `验证规则: ${targetFormula.formula}`
if (item.formType === 'combinaform' && item.childs) {
collectAllFields(item.childs, fields);
}
return ''
} catch (error) {
console.error('获取验证规则失败:', error)
return '获取验证规则失败'
if (item.formType === 'select' && item.options) {
for (const opt of item.options) {
if (opt.extraFields) {
collectAllFields(opt.extraFields, fields);
}
if (opt.otherOption && opt.extraField) {
fields.push({ field: opt.extraField, formType: 'input' });
}
}
}
const closeTooltip = (event: Event) => {
const target = event.target as HTMLElement
if (!target.closest('.help-icon')) {
showTooltip.value = false
hoveredKey.value = ''
}
}
const formatJSON = (obj: any): string => {
if (!obj) {
return ''
if (item.formType === 'radio-group-extraFields' && item.extraFields) {
for (const key in item.extraFields) {
collectAllFields(item.extraFields[key], fields);
}
try {
return JSON.stringify(obj, null, 2)
} catch (error) {
return JSON.stringify({ error: '序列化失败' })
}
}
const onDrawerShow = () => {
// 抽屉显示时，设置容器高度为屏幕高度
setTimeout(() => {
const drawer = document.querySelector('.vxe-drawer--body')
if (drawer) {
const availableHeight = window.innerHeight - 280 // 减去顶部和底部的空间
const resultList = drawer.querySelector('.result-list')
if (resultList) {
resultList.classList.add('result-list--scrolling')
resultList.style.maxHeight = `${availableHeight}px`
if (item.formType === 'AttachTable' && item.gridOptions && item.gridOptions.datas) {
for (const data of item.gridOptions.datas) {
for (const key in data) {
if (data[key] && typeof data[key] === 'object' && data[key].field) {
fields.push({ field: data[key].field, formType: data[key].formType });
if (data[key].otherField) {
fields.push({ field: data[key].otherField, formType: 'input' });
}
}
}
}
}, 100)
}
}
return fields;
}
const validateAndShowResults = async () => {
if (!validFormula.value || validFormula.value.length === 0) {
VxeUI.modal.message({ content: '没有配置验证规则', status: 'warning' })
return
}
const fillMultiColumnTable = async (row: TableRow, valueMap: Record<string, string>) => {
const child = childMultiTableRefs.value[row.code]
if (!child || !Array.isArray(row.content)) return
try {
loading.value = true
validationResultsList.value = []
const rowsMap: Record<string, Record<string, any>> = {}
const allFields = collectAllFields(row.content)
const codeVal = await buildCodeValueMap()
const formulaItems = validFormula.value
for (const fieldInfo of allFields) {
const fieldKey = getFieldKey(row.code, fieldInfo.field)
const tplItem = tplItemMap.value[fieldKey]
if (!tplItem) continue
for (const strKey in formData) {
const val = formData[strKey]
if (val === undefined || val === null || val === '') {
continue
}
const { pid, itemid, code, formTp } = tplItem
const valueKeys = Object.keys(valueMap).filter(k =>
k.startsWith(`${pid}_${itemid}_`)
)
const field = strKey.split('_')[1]
const targetFormula = formulaItems.find((f: any) => {
const formulaText = (f.formula || '').toString()
const regex = new RegExp(`\\b${field}\\b`, 'gi')
return regex.test(formulaText)
})
for (const valueKey of valueKeys) {
const parts = valueKey.split('_')
const rind = parts[2]
if (targetFormula) {
const formulaText = (targetFormula.formula || '').toString()
let isValid = false
let resultMessage = ''
let process: string[] = []
let fieldTitle = ''
// 获取字段标题
for (const key in tplItemMap.value) {
if (key.endsWith(`_${field}`)) {
const item = tplItemMap.value[key]
if (item && item.title) {
fieldTitle = item.title
break
}
}
if (!rowsMap[rind]) {
rowsMap[rind] = {}
}
try {
process.push(`开始校验字段: ${field}`)
process.push(`验证公式: ${formulaText}`)
process.push(`字段值: ${JSON.stringify(codeVal)}`)
const result = await evaluateFormulaWithProcess(formulaText, codeVal, process)
isValid = result.isValid
resultMessage = result.message
let value = valueMap[valueKey]
if (formTp === 'checkbox' && value) {
value = value.split(',').filter(Boolean)
}
if (isValid) {
process.push(`校验结果: 通过`)
} else {
process.push(`校验结果: 失败 - ${resultMessage}`)
}
} catch (error) {
isValid = true
resultMessage = `校验跳过: ${error.message}`
process.push(`校验异常: ${error.message}`)
}
validationResultsList.value.push({
fieldTitle: fieldTitle,
fieldName: field,
formula: formulaText,
isValid,
resultMessage,
process,
fieldValues: codeVal
})
rowsMap[rind][code] = value
}
}
if (validationResultsList.value.length > 0) {
drawerVisible.value = true
} else {
VxeUI.modal.message({ content: '没有找到需要校验的字段', status: 'warning' })
}
} catch (error) {
console.error('校验失败:', error)
VxeUI.modal.message({ content: `校验失败: ${error.message}`, status: 'error' })
} finally {
loading.value = false
const tableDatas = Object.values(rowsMap)
if (child && tableDatas.length > 0) {
child.setFormData(tableDatas)
}
}
const evaluateFormulaWithProcess = async (
formula: string,
codeVal: Record<string, string>,
process: string[]
): Promise<{ isValid: boolean; message: string }> => {
try {
process.push('检查公式中用到的字段...')
const fieldPattern = /\b([a-zA-Z_][a-zA-Z0-9_]*)\b/g
const fieldsInFormula = new Set<string>()
let match
const fillVxeTable = async (row: TableRow, valueMap: Record<string, string>) => {
const child = childMyVexTableRefs.value[row.code]
if (!child || !Array.isArray(row.columns)) return
while ((match = fieldPattern.exec(formula)) !== null) {
fieldsInFormula.add(match[1])
}
const rowsMap: Record<string, Record<string, string>> = {}
process.push(`公式中用到的字段: ${Array.from(fieldsInFormula).join(', ')}`)
for (const column of row.columns) {
if (!column.field) continue
for (const field of fieldsInFormula) {
if (!codeVal.hasOwnProperty(field) ||
codeVal[field] === undefined ||
codeVal[field] === null ||
codeVal[field] === '' ||
codeVal[field] === 'undefined' ||
codeVal[field] === 'null') {
process.push(`字段 ${field} 为空，跳过校验`)
return { isValid: true, message: `字段 ${field} 为空，跳过校验` }
}
}
const key = getFieldKey(row.code, column.field)
const tplItem = tplItemMap.value[key]
if (!tplItem || Object.keys(tplItem).length === 0) continue
process.push('所有字段都有值，开始执行公式计算...')
let processedFormula = formula
const { pid, itemid, code } = tplItem
const valueKeys = Object.keys(valueMap).filter(k =>
k.startsWith(`${pid}_${itemid}_`)
)
for (const [key, value] of Object.entries(codeVal)) {
const paramRegex = new RegExp(`\\b${key}\\b`, 'g')
processedFormula = processedFormula.replace(paramRegex, value)
for (const valueKey of valueKeys) {
const [, , rind] = valueKey.split('_')
if (!rowsMap[rind]) {
rowsMap[rind] = {}
}
process.push(`处理后的公式: ${processedFormula}`)
const result = eval(processedFormula)
const resultStr = String(result)
if (resultStr === 'true' || resultStr === 'True' || resultStr === '1' || result === true) {
process.push(`公式计算结果: ${resultStr} (通过)`)
return { isValid: true, message: `通过 (${resultStr})` }
} else {
process.push(`公式计算结果: ${resultStr} (失败)`)
return { isValid: false, message: `不通过 (${resultStr})` }
rowsMap[rind][code] = valueMap[valueKey]
}
} catch (error) {
process.push(`公式计算失败: ${error.message}`)
return { isValid: true, message: `校验跳过 - ${error.message}` }
}
const tableDatas = Object.values(rowsMap)
child.setFormData(tableDatas)
}
// 校验相关
const validateData = () => {
drawerVisible.value = true
validationDrawerRef.value.setValidateData(validFormula.value,formData);
}
const validateInput = async (key: string) => {
if (!validFormula.value || validFormula.value.length === 0) {
validationResults.value[key] = 'default'
validationMessages.value[key] = ''
const handleInputBlur = (rowCode: string, field: string, formula?: string) => {
if (!formula) return
const key = getFieldKey(rowCode, field)
const value = formData[key]
if (!value || value === '') {
delete inputErrors.value[key]
return
}
try {
const formulaItems = validFormula.value
const field = key.split('_')[1]
const targetFormula = formulaItems.find((f: any) => {
const formulaText = (f.formula || '').toString()
const regex = new RegExp(`\\b${field}\\b`, 'gi')
return regex.test(formulaText)
})
validateFieldFormula(rowCode, field, formula)
}
if (targetFormula) {
const codeVal = await buildCodeValueMap()
const formulaText = (targetFormula.formula || '').toString()
const isValid = await evaluateFormula(formulaText, codeVal)
const validateFieldFormula = (rowCode: string, field: string, formula: string) => {
const key = getFieldKey(rowCode, field)
if (isValid) {
validationResults.value[key] = 'default'
validationMessages.value[key] = ''
} else {
validationResults.value[key] = 'error'
validationMessages.value[key] = targetFormula.des || `验证失败: ${formulaText}`
try {
const expression = buildExpression(formula, rowCode)
const isValid = eval(expression)
if (!isValid) {
inputErrors.value[key] = {
message: "公式校验失败，请检查填写内容",
formula
}
} else {
validationResults.value[key] = 'default'
validationMessages.value[key] = ''
delete inputErrors.value[key]
}
} catch (error: any) {
inputErrors.value[key] = {
message: "公式校验失败，请检查填写内容",
formula,
error: error.message
}
} catch (error) {
console.error('验证失败:', error)
validationResults.value[key] = 'error'
validationMessages.value[key] = '验证计算失败'
}
}
const buildCodeValueMap = async (): Promise<Record<string, string>> => {
const codeVal: Record<string, string> = {}
for (const strKey in formData) {
const val = formData[strKey]
if (val !== undefined && val !== null && val !== '') {
const parts = strKey.split('_')
if (parts.length >= 2) {
const field = parts[1]
codeVal[field] = Array.isArray(val) ? val.join(',') : String(val)
}
}
}
const buildExpression = (formula: string, rowCode: string): string => {
const fieldNames = formula.match(/\b[A-Za-z][A-Za-z0-9_]*\b/g) || []
const uniqueFields = [...new Set(fieldNames.filter(f =>
!['and', 'or', 'not', 'equal', 'less', 'greater', 'if', 'else', 'true', 'false']
.includes(f.toLowerCase())
))]
return codeVal
}
uniqueFields.sort((a, b) => b.length - a.length)
const evaluateFormula = async (formula: string, codeVal: Record<string, string>): Promise<boolean> => {
try {
// 提取公式中用到的所有字段名（假设字段名是字母数字下划线组合）
const fieldPattern = /\b([a-zA-Z_][a-zA-Z0-9_]*)\b/g
const fieldsInFormula = new Set<string>()
let match
let expression = formula
for (const fieldName of uniqueFields) {
const key = getFieldKey(rowCode, fieldName)
const value = formData[key]
while ((match = fieldPattern.exec(formula)) !== null) {
fieldsInFormula.add(match[1])
}
if (value !== undefined) {
// 检查字段类型，如果是日期类型，转换为时间戳进行比较
const row = tableFormData.find((r: TableRow) => r.code === rowCode)
let processedValue = value
// 检查所有用到的字段是否都有值
for (const field of fieldsInFormula) {
// 如果字段在 codeVal 中但值为空，或者不在 codeVal 中，都认为是空
if (!codeVal.hasOwnProperty(field) ||
codeVal[field] === undefined ||
codeVal[field] === null ||
codeVal[field] === '' ||
codeVal[field] === 'undefined' ||
codeVal[field] === 'null') {
return true // 有字段为空，不进行校验，默认通过
if (row && row.content && Array.isArray(row.content)) {
const fieldItem = row.content.find((c: ContentItem) => c.field === fieldName)
if (fieldItem && fieldItem.type === 'date') {
// 将日期字符串转换为时间戳（毫秒）
const date = new Date(value)
if (!isNaN(date.getTime())) {
processedValue = date.getTime()
}
}
let processedFormula = formula
for (const [key, value] of Object.entries(codeVal)) {
const paramRegex = new RegExp(`\\b${key}\\b`, 'g')
processedFormula = processedFormula.replace(paramRegex, value)
}
const result = eval(processedFormula)
return Boolean(result)
} catch (error) {
console.error('公式计算失败:', error, '公式:', formula)
return true // 计算失败时也通过，避免因为计算错误导致验证失败
expression = expression.replace(
new RegExp(`\\b${fieldName}\\b`, 'g'),
`Number(${processedValue})`
)
}
}
const validateAllInputs = async () => {
if (!validFormula.value || validFormula.value.length === 0) {
return
}
try {
const formulaItems = validFormula.value
const codeVal = await buildCodeValueMap()
validationResults.value = {}
validationMessages.value = {}
for (const strKey in formData) {
const val = formData[strKey]
if (val !== undefined && val !== null && val !== '') {
const field = strKey.split('_')[1]
const targetFormula = formulaItems.find((f: any) => {
const formulaText = (f.formula || '').toString()
const regex = new RegExp(`\\b${field}\\b`, 'gi')
return regex.test(formulaText)
})
if (targetFormula) {
const formulaText = (targetFormula.formula || '').toString()
const isValid = await evaluateFormula(formulaText, codeVal)
return expression
}
if (isValid) {
validationResults.value[strKey] = 'default'
validationMessages.value[strKey] = ''
// 提示工具相关
const toggleTooltip = (rowCode: string, field: string) => {
const key = getFieldKey(rowCode, field)
if (hoveredKey.value === key) {
showTooltip.value = false
hoveredKey.value = ''
} else {
validationResults.value[strKey] = 'error'
validationMessages.value[strKey] = targetFormula.des || `验证失败: ${formulaText}`
}
}
}
}
} catch (error) {
console.error('全量验证失败:', error)
showTooltip.value = true
hoveredKey.value = key
}
}
const toggleErrorTooltip = (rowCode: string, field: string) => {
const key = getFieldKey(rowCode, field);
const key = getFieldKey(rowCode, field)
if (hoveredErrorKey.value === key) {
showErrorTooltip.value = false;
hoveredErrorKey.value = '';
showErrorTooltip.value = false
hoveredErrorKey.value = ''
} else {
showErrorTooltip.value = true;
hoveredErrorKey.value = key;
showErrorTooltip.value = true
hoveredErrorKey.value = key
}
};
}
const closeAllTooltips = () => {
showTooltip.value = false;
hoveredKey.value = '';
showErrorTooltip.value = false;
hoveredErrorKey.value = '';
};
showTooltip.value = false
hoveredKey.value = ''
showErrorTooltip.value = false
hoveredErrorKey.value = ''
}
// 历史填报
const handleOpenHistoryDrawer = () => {
historyFillCheckRef.value?.onDrawerShow(queryParam.value.tplId)
historyDrawerVisible.value = true
}
const closeHistoryDrawer = () => {
historyDrawerVisible.value = false
}
// 校验结果处理
const handleValidationResultClick = (result: any) => {
const message = `字段 ${result.field} 的校验结果: ${result.isValid ? '通过' : '失败'}`;
const status = result.isValid ? 'success' : 'error';
const message = `字段 ${result.field} 的校验结果: ${result.isValid ? '通过' : '失败'}`
const status = result.isValid ? 'success' : 'error'
VxeUI.modal.message({ content: message, status });
};
VxeUI.modal.message({ content: message, status })
}
const handleOpenHistoryDrawer = () => {
historyFillCheckRef.value?.onDrawerShow(queryParam.value.tplId);
historyDrawerVisible.value = true;
};
// 工具函数
const findEarliestFormulaForField = (
formulas: FormulaItem[],
field: string
): { formula: FormulaItem | null, index: number } => {
let result = { formula: null, index: Infinity }
const closeHistoryDrawer = () => {
historyDrawerVisible.value = false;
};
formulas?.forEach((f: FormulaItem) => {
const text = f.formula || ''
const escapedField = field.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
const regex = new RegExp(`\\b${escapedField}\\b(?!\\w)`, 'g')
const match = regex.exec(text)
</script>
<style lang="less" scoped>
.bank-report-table {
font-family: "SimSun", "宋体", serif;
font-size: 12px;
color: #000;
margin: 5px auto;
width: 60%;
height:80vh;
position: relative; /* 为loading遮罩层定位 */
if (match && match.index < result.index) {
result = { formula: f, index: match.index }
}
})
return result
}
/* 加载遮罩层样式 */
.loading-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.8);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
// 消息提示
const showSuccessMessage = (message: string) => {
VxeUI.modal.message({ content: message, status: 'success' })
}
.loading-spinner {
text-align: center;
const showWarningMessage = (message: string) => {
VxeUI.modal.message({ content: message, status: 'warning' })
}
.spinner {
width: 40px;
height: 40px;
margin: 0 auto 10px;
border: 3px solid #f3f3f3;
border-top: 3px solid #1890ff;
border-radius: 50%;
animation: spin 1s linear infinite;
const showErrorMessage = (message: string) => {
VxeUI.modal.message({ content: message, status: 'error' })
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
// 子组件引用设置
const setMultiColumnTableRef = (el: any, code: string) => {
if (el) childMultiTableRefs.value[code] = el
}
.loading-text {
font-size: 14px;
color: #1890ff;
font-weight: bold;
const setAttachTableRef = (el: any, code: string) => {
if (el) childAttachTableRefs.value[code] = el
}
.custom-table {
const setMyVxeTableRef = (el: any, code: string) => {
if (el) childMyVexTableRefs.value[code] = el
}
</script>
<style lang="less" scoped>
// Base table styles
.bank-report-table {
font-family: "SimSun", "宋体", serif;
font-size: 12px;
color: #000;
margin: 5px auto;
width: 90%;
position: relative;
// Shared table styles
.custom-table, .attachment-table {
width: 100%;
border: 1px solid #000;
}
.custom-table .vxe-header--column,
.custom-table .vxe-body--column {
.vxe-header--column,
.vxe-body--column {
border-right: 1px solid #000;
border-bottom: 1px solid #000;
padding: 5px;
}
}
}
.custom-table .vxe-cell {
padding: 5px;
// 表格信息文本
.table-info-text {
font-weight: bold;
}
// 项目名称
.project-name {
font-weight: bold;
font-size: 14px;
}
// Cell styles
.content-cell {
line-height: 1.8;
}
.table-input {
width: 80px;
margin: 0 2px;
}
.radio-group {
display: inline-block;
margin-right: 10px;
}
.checkbox-group {
// 表单控件组
.radio-group, .checkbox-group {
display: inline-block;
margin-right: 10px;
}
.vxe-radio,
.vxe-checkbox {
margin-right: 8px;
margin-left: 10px;
.vxe-radio, .vxe-checkbox {
margin-left: 0px;
white-space: nowrap;
}
.vxe-input--inner {
height: 24px;
line-height: 24px;
padding: 0 5px;
}
.vxe-radio--label,
.vxe-checkbox--label {
line-height: 30px;
padding: 0px 10px;
&--label {
font-size: 12px;
}
.vxe-radio--icon,
.vxe-checkbox--icon {
}
&--icon {
font-size: 12px;
}
}
}
.vxe-radio-group,
.vxe-checkbox-group {
// VXE specific overrides
.vxe {
&-radio-group, &-checkbox-group {
display: inline-block;
}
&-cell {
padding: 5px;
}
}
.vxe-input {
border-bottom: 1px solid #333;
text-align: center;
margin: 5px 3px;
padding: 0;
border-top: none;
border-left: none;
border-right: none;
background: transparent;
}
// 输入框包装器
.input-wrapper {
position: relative;
display: inline-block;
}
// 单位文本
.unit {
margin-left: 5px;
font-size: 12px;
}
// 帮助图标
.help-icon {
margin-left: 5px;
cursor: pointer;
......@@ -1260,6 +1217,7 @@ const closeHistoryDrawer = () => {
}
}
// 错误图标
.error-icon {
margin-left: 5px;
cursor: pointer;
......@@ -1277,8 +1235,8 @@ const closeHistoryDrawer = () => {
}
}
.tooltip,
.error-tooltip {
// 提示框
.tooltip, .error-tooltip {
position: absolute;
top: 100%;
left: 0;
......@@ -1311,335 +1269,53 @@ const closeHistoryDrawer = () => {
background: #8b0000;
color: #fff;
border: 1px solid #ff4d4f;
}
.bank-report-table {
font-family: "SimSun", "宋体", serif;
font-size: 12px;
color: #000;
margin: 5px auto;
width: 90%;
}
.custom-table {
width: 100%;
border: 1px solid #000;
}
.custom-table .vxe-header--column,
.custom-table .vxe-body--column {
border-right: 1px solid #000;
border-bottom: 1px solid #000;
padding: 5px;
}
.content-cell {
line-height: 1.8;
}
.table-input {
width: 80px;
margin: 0 2px;
}
.radio-group {
display: inline-block;
margin-right: 10px;
}
eckbox-group {
display: inline-block;
margin-right: 10px;
}
.vxe-radio,
.vxe-checkbox {
margin-right: 8px;
white-space: nowrap;
}
/* 附件样式 */
.attachments {
margin-top: 20px;
width: 100%;
}
.attachments h4 {
font-size: 14px;
font-weight: bold;
margin-bottom: 10px;
}
.attachment-table {
width: 100%;
border: 1px solid #000;
}
.attachment-table .vxe-header--column,
.attachment-table .vxe-body--column {
border-right: 1px solid #000;
border-bottom: 1px solid #000;
padding: 5px;
}
.vxe-input,.vxe-textarea {
border-bottom: 1px solid #333;
text-align: center;
margin: 5px 3px;
padding: 0;
border-top: none;
border-left: none;
border-right: none;
background: transparent;
line-height: 50px;
}
blockquote {
padding: 0px 5px;
color: black;
cursor: pointer;
}
.vxe-input.status--error .vxe-input--inner {
border-color: #ff4d4f !important;
background-color: #fff2f0 !important;
}
/* 校验结果抽屉样式 */
.validation-results {
padding: 16px;
height: 90vh;
}
.result-summary {
display: flex;
gap: 16px;
margin-bottom: 16px;
padding: 12px;
background: #f5f5f5;
border-radius: 8px;
}
.summary-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.summary-label {
font-size: 12px;
color: #666;
}
.summary-value {
font-size: 16px;
font-weight: bold;
}
.summary-value.success {
color: #52c41a;
}
.summary-value.error {
color: #ff4d4f;
}
.result-list {
display: flex;
flex-direction: column;
gap: 12px;
max-height: 100%;
overflow-y: auto;
&::before {
content: '';
position: absolute;
bottom: 100%;
left: 5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #8b0000 transparent;
}
}
.result-item {
border: 1px solid #e8e8e8;
border-radius: 8px;
padding: 12px;
transition: all 0.3s;
}
.result-item.success {
border-color: #52c41a;
background: #f6ffed;
}
.result-item.error {
border-color: #ff4d4f;
background: #fff2f0;
}
.result-item-header {
// 加载遮罩
.loading-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.8);
display: flex;
justify-content: space-between;
justify-content: center;
align-items: center;
margin-bottom: 8px;
padding-bottom: 8px;
border-bottom: 1px solid #e8e8e8;
}
.result-item-name {
font-weight: bold;
font-size: 14px;
}
.result-item-status {
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: bold;
}
.result-item-status.success {
background: #f6ffed;
color: #52c41a;
border: 1px solid #95de64;
}
.result-item-status.error {
background: #fff2f0;
color: #ff4d4f;
border: 1px solid #ffccc7;
}
.result-item-content {
display: flex;
flex-direction: column;
gap: 8px;
}
.result-item-formula,
.result-item-result,
.result-item-process {
display: flex;
gap: 8px;
align-items: flex-start;
}
.result-item-formula {
font-family: 'Courier New', monospace;
background: #fafafa;
padding: 8px;
border-radius: 4px;
border: 1px solid #e8e8e8;
}
.formula-label,
.result-label,
.formula-label,
.result-label,
.process-label,
.values-label {
font-weight: bold;
font-size: 12px;
color: #666;
min-width: 80px;
}
.formula-value,
.result-value,
.values-value {
font-size: 12px;
flex: 1;
}
.result-value {
color: #333;
}
.process-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
z-index: 1000;
}
.process-step {
display: flex;
gap: 8px;
align-items: flex-start;
font-size: 12px;
color: #666;
.loading-spinner {
text-align: center;
}
.step-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
background: #1890ff;
color: white;
.spinner {
width: 40px;
height: 40px;
border: 3px solid #f3f3f3;
border-top: 3px solid #3498db;
border-radius: 50%;
font-size: 10px;
font-weight: bold;
flex-shrink: 0;
}
.step-text {
flex: 1;
}
.result-item-process {
border-top: 1px solid #e8e8e8;
padding-top: 8px;
animation: spin 1s linear infinite;
margin: 0 auto 10px;
}
.result-item-values {
display: flex;
gap: 8px;
align-items: flex-start;
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.values-label {
font-weight: bold;
font-size: 12px;
.loading-text {
font-size: 14px;
color: #666;
min-width: 80px;
}
.values-value {
font-family: 'Courier New', monospace;
font-size: 11px;
line-height: 1.5;
background: #fafafa;
padding: 8px;
border-radius: 4px;
border: 1px solid #e8e8e8;
overflow-x: auto;
max-height: 200px;
overflow-y: auto;
flex: 1;
white-space: pre;
word-break: break-all;
}
/* 抽屉样式调整 */
.vxe-drawer--right {
width: 700px !important;
}
.vxe-drawer--header {
border-bottom: 1px solid #e8e8e8;
padding-bottom: 12px;
}
.vxe-drawer--title {
font-size: 16px;
font-weight: bold;
color: #333;
}
.vxe-drawer--body {
padding: 16px;
max-height: calc(100vh - 140px);
overflow-y: auto;
}
.result-list {
display: flex;
flex-direction: column;
gap: 12px;
max-height: 500px;
overflow-y: auto;
}
.result-list--scrolling {
max-height: calc(100vh - 280px) !important;
}
</style>
\ No newline at end of file
zrch-risk-client-39/src/views/baosong/report/tableComponents/MultiColumnTable.vue
浏览文件 @ 6538bd96
......@@ -64,7 +64,7 @@
</vxe-radio-group>
<template v-if="field.otherOption&&row[field.field]=='是'">
<span>{{field.otherLabel}}：</span>
<vxe-input v-model="row[field.otherField]" style="width: 200px;">
<vxe-input v-model="row[field.otherField]" style="width: 400px;">
</vxe-input>
</template>
</template>
......@@ -79,7 +79,8 @@
></vxe-radio>
</vxe-radio-group>
<template v-if="field.otherOption&&row[field.field]=='其他'">
<vxe-input v-model="row[field.otherField]" placeholder="请输入其他">
<span>其他： </span>
<vxe-input v-model="row[field.otherField]" placeholder="请输入其他" style="width: 200px;">
</vxe-input>
</template>
</template>
......@@ -108,7 +109,8 @@
></vxe-radio>
</vxe-radio-group>
<template v-if="field.otherOption&&row[field.field]=='其他'">
<vxe-input v-model="row[field.otherField]" placeholder="请输入其他" style="width: 100px;">
<span>其他： </span>
<vxe-input v-model="row[field.otherField]" placeholder="请输入其他" style="width: 200px;">
</vxe-input>
</template>
......@@ -133,7 +135,8 @@
)
"
>
<vxe-input v-model="row[ccopt.otherField]" placeholder="请输入其他" style="width: 100px;">
<span>其他： </span>
<vxe-input v-model="row[ccopt.otherField]" placeholder="请输入其他" style="width: 200px;">
</vxe-input>
</template>
<span class="unit"> {{ ccopt.unit }}</span>
......@@ -149,9 +152,14 @@
:value="opt"
:content="opt"
></vxe-checkbox>
<template v-if="field.otherField">
<vxe-checkbox label="其他" value="其他">
其他：
</vxe-checkbox>
</template>
</vxe-checkbox-group>
<template v-if="field.otherField&&row[field.field]?.includes('其他')">
<vxe-input v-model="row[field.otherField]" placeholder="请输入其他" style="width: 100px;">
<vxe-input v-model="row[field.otherField]" placeholder="请输入其他" style="width: 200px; margin-left: 4px;">
</vxe-input>
</template>
......@@ -196,8 +204,8 @@
)
"
>
<span class="extra-label">{{ item.otherLabel}}：</span>
<vxe-input v-model="row[item.otherField]" placeholder="请输入" style="width: 150px;">
<span class="extra-label">{{ item.otherLabel}}： </span>
<vxe-input v-model="row[item.otherField]" placeholder="请输入" style="width: 300px;">
</vxe-input>
</template>
</template>
......@@ -247,10 +255,11 @@
)
"
>
<span>其他： </span>
<vxe-input
v-model="row[extraObject.otherField]"
placeholder="请输入其他"
style="width: 150px; margin-left: 8px;"
style="width: 300px; margin-left: 4px;"
/>
</template>
<span v-if="extraObject.extraUnit" class="unit">{{ extraObject.unit }}</span>
......@@ -532,6 +541,15 @@ const setFormData = (dataVale) => {
tableData.value = dataVale.map((row, rowIndex) => {
const newRow = { ...row }
props.fields.forEach(field => {
if ((field.formType === 'checkbox' || field.formType === 'checkbox-group') && newRow[field.field]) {
if (!Array.isArray(newRow[field.field])) {
newRow[field.field] = newRow[field.field].split(',').filter(Boolean)
}
}
})
return newRow
})
......@@ -571,8 +589,12 @@ const setFormData = (dataVale) => {
if (fieldWithChilds.childs && Array.isArray(fieldWithChilds.childs)) {
fieldWithChilds.childs.forEach((child: any) => {
if (child.formType === 'checkbox' && !Array.isArray(row[child.field])) {
if (row[child.field]) {
row[child.field] = row[child.field].split(',').filter(Boolean)
} else {
row[child.field] = []
}
}
})
}
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论