Skip to content

Z
zrch-risk-39
提交 7120df35 authored 作者: liuluyu's avatar liuluyu
浏览文件
操作

tb5样式优化

上级 9cb3fade
隐藏空白字符变更
内嵌 并排
正在显示 包含 279 行增加 和 283 行删除
zrch-risk-client-39/src/views/baosong/report/components/Tb5.vue
浏览文件 @ 7120df35
...@@ -200,7 +200,7 @@ ...@@ -200,7 +200,7 @@
</vxe-table> </vxe-table>
<!-- 历史填报检查组件 --> <!-- 历史填报检查组件 -->
<HistoryFillCheck ref="historyFillCheckRef" v-model="historyDrawerVisible" @closeDrawer="closeHistoryDrawer" /> <HistoryFillCheck ref="historyFillCheckRef" v-model="historyDrawerVisible" @close-drawer="closeHistoryDrawer" />
<!-- 验证公式帮助提示 --> <!-- 验证公式帮助提示 -->
<div <div
...@@ -214,17 +214,17 @@ ...@@ -214,17 +214,17 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import MultiColumnTable from '../tableComponents/MultiColumnTable.vue' import MultiColumnTable from '../tableComponents/MultiColumnTable.vue';
import AttachTable from '../tableComponents/AttachTable.vue' import AttachTable from '../tableComponents/AttachTable.vue';
import HistoryFillCheck from './check/historyFillCheck.vue' import HistoryFillCheck from './check/historyFillCheck.vue';
import { tableFormData } from '../../data/tb5.data'; import { tableFormData } from '../../data/tb5.data';
import { ref, reactive,nextTick,onMounted,toRaw } from 'vue' import { ref, reactive, nextTick, onMounted, toRaw } from 'vue';
import { VxeUI,VxeToolbarInstance,VxeToolbarPropTypes } from 'vxe-table' import { VxeUI, VxeToolbarInstance, VxeToolbarPropTypes } from 'vxe-table';
import { batchSaveOrUpdate, queryRecord,batchSaveOrUpdateBeforeDelete } from '../../record/BaosongTaskRecord.api' import { batchSaveOrUpdate, queryRecord, batchSaveOrUpdateBeforeDelete } from '../../record/BaosongTaskRecord.api';
import { queryAllTplItemForUser, findUserRightForTplItem } from '../../alloc/BaosongTaskAlloc.api' import { queryAllTplItemForUser, findUserRightForTplItem } from '../../alloc/BaosongTaskAlloc.api';
import { allTplItems } from '../../tpl/BaosongTplItem.api' import { allTplItems } from '../../tpl/BaosongTplItem.api';
import { getTblvalidFormula } from '../../tpl/BaosongDataValid.api' import { getTblvalidFormula } from '../../tpl/BaosongDataValid.api';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
const route = useRoute(); const route = useRoute();
...@@ -232,35 +232,35 @@ ...@@ -232,35 +232,35 @@
const tplItemMap = ref({}); const tplItemMap = ref({});
const historyFillCheckRef = ref<any>(null); const historyFillCheckRef = ref<any>(null);
const queryParam = ref({ const queryParam = ref({
taskId:-1, taskId: -1,
taskName:'', taskName: '',
tplId:-1, tplId: -1,
tplName:'', tplName: '',
tplCode:'' tplCode: '',
}) });
// 权限相关状态 // 权限相关状态
const userAllocItems = ref<string[]>([]) const userAllocItems = ref<string[]>([]);
const validFormula = ref<any[]>([]) const validFormula = ref<any[]>([]);
const validationResultsList = ref<any[]>([]) const validationResultsList = ref<any[]>([]);
const drawerVisible = ref(false) const drawerVisible = ref(false);
const historyDrawerVisible = ref(false) const historyDrawerVisible = ref(false);
const validationTooltipVisible = ref(false) const validationTooltipVisible = ref(false);
const validationTooltipPosition = ref({ left: 0, top: 0 }) const validationTooltipPosition = ref({ left: 0, top: 0 });
const validationTooltipContent = ref('') const validationTooltipContent = ref('');
interface FormData { interface FormData {
id: number | null; id: number | null;
taskid: number; taskid: number;
tplid: number; tplid: number;
itemid?: number; itemid?: number;
itempid?: number; itempid?: number;
content: string; content: string;
tplcode: string; tplcode: string;
rind: number; rind: number;
} }
onMounted(async ()=>{ onMounted(async () => {
if (route.query.taskId) { if (route.query.taskId) {
queryParam.value.taskId = Number(route.query.taskId); queryParam.value.taskId = Number(route.query.taskId);
} }
...@@ -281,315 +281,311 @@ ...@@ -281,315 +281,311 @@
try { try {
userAllocItems.value = await findUserRightForTplItem({ userAllocItems.value = await findUserRightForTplItem({
tplid: queryParam.value.tplId, tplid: queryParam.value.tplId,
taskid: queryParam.value.taskId taskid: queryParam.value.taskId,
}) });
validFormula.value = await getTblvalidFormula({ validFormula.value = await getTblvalidFormula({
tplid: queryParam.value.tplId, tplid: queryParam.value.tplId,
}) });
} catch (error) { } catch (error) {
console.error('获取权限或验证公式失败:', error) console.error('获取权限或验证公式失败:', error);
} }
await setTplItemMap(); await setTplItemMap();
await setData(); await setData();
}); });
const loading = ref(false); const loading = ref(false);
const formData = reactive({}); const formData = reactive({});
const formValues = ref<FormData[]>([]); const formValues = ref<FormData[]>([]);
const saveBatch = async () => { const saveBatch = async () => {
try { try {
formValues.value = []; formValues.value = [];
for (const strKey in formData) { for (const strKey in formData) {
const valData = formData[strKey]; const valData = formData[strKey];
if (valData) { if (valData) {
let tmpAry = strKey.split('_'); let tmpAry = strKey.split('_');
await setFormValues(tmpAry[0], tmpAry[1], valData, 1); await setFormValues(tmpAry[0], tmpAry[1], valData, 1);
}
} }
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;
} }
};
const childMultiTableRefs = ref({}); await getAttachTableFormData();
const setMultiColumnTableRef = (el: any, index: string) => { await getAllMultiTableFormData();
if (el) {
childMultiTableRefs.value[index] = el; 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;
}
};
const getAllMultiTableFormData = async () => { const childMultiTableRefs = ref({});
for (const pcode in childMultiTableRefs.value) { const setMultiColumnTableRef = (el: any, index: string) => {
const child = childMultiTableRefs.value[pcode]; if (el) {
if (child) { childMultiTableRefs.value[index] = el;
const datas = child.getFormData(); }
let rind = 0; };
for (const obj of datas) {
rind++; const getAllMultiTableFormData = async () => {
Object.keys(obj).forEach((code) => { for (const pcode in childMultiTableRefs.value) {
setFormValues(pcode, code, obj[code], rind); 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 childAttachTableRefs = ref({});
const setAttachTableRef = (el: any, index: string) => { const setAttachTableRef = (el: any, index: string) => {
if (el) { if (el) {
childAttachTableRefs.value[index] = el; // 保存子组件实例 childAttachTableRefs.value[index] = el; // 保存子组件实例
} }
}; };
const getAttachTableFormData = async () => { const getAttachTableFormData = async () => {
for (const pcode in childAttachTableRefs.value) { for (const pcode in childAttachTableRefs.value) {
const child = childAttachTableRefs.value[pcode]; const child = childAttachTableRefs.value[pcode];
if (child) { if (child) {
const datas = child.getFormData(); const datas = child.getFormData();
for (const code in datas) { for (const code in datas) {
await setFormValues(pcode, code, datas[code], 1); await setFormValues(pcode, code, datas[code], 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 = {
id: null,
rind: rind,
taskid: queryParam.value.taskId,
tplid: queryParam.value.tplId,
tplcode: code,
itemid: itemid,
itempid: pid,
content: vals,
}; };
formValues.value.push(tempForm);
};
const setFormValues = async (pcode, code, valData, rind) => { async function setData() {
if (!valData) return; try {
let vals = Array.isArray(valData) ? valData.join(',') : valData; loading.value = true;
let strKey = pcode + '_' + code; const taskId = queryParam.value.taskId;
const item = tplItemMap.value[strKey]; const tplid = queryParam.value.tplId;
const { pid, itemid } = item ?? {};
let tempForm: FormData = {
id: null,
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() { Object.keys(formData).forEach((key) => delete formData[key]);
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 });
await setTplItemMap(); const valueObj = {};
const recordData = await queryRecord({ taskid: taskId, tplid: tplid }); for (const data of recordData) {
const key = `${data.itempid}_${data.itemid}_${data.rind}`;
valueObj[key] = data.content;
}
const shouldSkip = (key) => {
const refsToCheck = [childMultiTableRefs.value, childAttachTableRefs.value];
const valueObj = {}; for (const refs of refsToCheck) {
for (const data of recordData) { for (const pcode of Object.keys(refs)) {
const key = `${data.itempid}_${data.itemid}_${data.rind}`; if (key.startsWith(pcode + '_')) {
valueObj[key] = data.content; return true;
}
const shouldSkip = (key) => {
const refsToCheck = [childMultiTableRefs.value, childAttachTableRefs.value];
for (const refs of refsToCheck) {
for (const pcode of Object.keys(refs)) {
if (key.startsWith(pcode + '_')) {
return true;
}
} }
} }
return false; }
}; return false;
};
for (const strKey of Object.keys(tplItemMap.value)) { for (const strKey of Object.keys(tplItemMap.value)) {
if (shouldSkip(strKey)) { if (shouldSkip(strKey)) {
continue; continue;
} }
const item = tplItemMap.value[strKey]; const item = tplItemMap.value[strKey];
if (!item) continue; if (!item) continue;
const { pid, itemid, formTp } = item; const { pid, itemid, formTp } = item;
const dataVal = valueObj[`${pid}_${itemid}_1`]; const dataVal = valueObj[`${pid}_${itemid}_1`];
if (!dataVal) continue; if (!dataVal) continue;
if (formTp === 'checkbox') { if (formTp === 'checkbox') {
formData[strKey] = dataVal?.split(',') || []; formData[strKey] = dataVal?.split(',') || [];
} else { } else {
formData[strKey] = dataVal || ''; formData[strKey] = dataVal || '';
}
} }
}
for (const pcode of Object.keys(childAttachTableRefs.value)) { for (const pcode of Object.keys(childAttachTableRefs.value)) {
const child = childAttachTableRefs.value[pcode]; const child = childAttachTableRefs.value[pcode];
const matchingKeys = Object.keys(tplItemMap.value).filter((key) => key.startsWith(pcode + '_')); const matchingKeys = Object.keys(tplItemMap.value).filter((key) => key.startsWith(pcode + '_'));
const attachTableData = {}; const attachTableData = {};
for (const key of matchingKeys) { for (const key of matchingKeys) {
const tmpData = tplItemMap.value[key]; const tmpData = tplItemMap.value[key];
if (!tmpData) continue; if (!tmpData) continue;
const { pid, itemid, formTp, code } = tmpData; const { pid, itemid, formTp, code } = tmpData;
const valueKey = `${pid}_${itemid}_1`; const valueKey = `${pid}_${itemid}_1`;
if (formTp === 'checkbox') { if (formTp === 'checkbox') {
attachTableData[code] = valueObj[valueKey]?.split(',') || []; attachTableData[code] = valueObj[valueKey]?.split(',') || [];
} else { } else {
attachTableData[code] = valueObj[valueKey] || ''; attachTableData[code] = valueObj[valueKey] || '';
}
} }
child.setFormData(attachTableData);
} }
for (const pcode of Object.keys(childMultiTableRefs.value)) { child.setFormData(attachTableData);
const child = childMultiTableRefs.value[pcode]; }
const matchingKeys = Object.keys(tplItemMap.value).filter((key) => key.startsWith(pcode + '_'));
const rowsMap = {}; for (const pcode of Object.keys(childMultiTableRefs.value)) {
for (const key of matchingKeys) { const child = childMultiTableRefs.value[pcode];
const tmpData = tplItemMap.value[key]; const matchingKeys = Object.keys(tplItemMap.value).filter((key) => key.startsWith(pcode + '_'));
if (!tmpData) continue;
const { pid, itemid, code } = tmpData; const rowsMap = {};
const valKeys = Object.keys(valueObj).filter((k) => k.startsWith(`${pid}_${itemid}_`)); for (const key of matchingKeys) {
const tmpData = tplItemMap.value[key];
if (!tmpData) continue;
for (const valKey of valKeys) { const { pid, itemid, code } = tmpData;
const parts = valKey.split('_'); const valKeys = Object.keys(valueObj).filter((k) => k.startsWith(`${pid}_${itemid}_`));
const rind = parts[2];
if (!rowsMap[rind]) { for (const valKey of valKeys) {
rowsMap[rind] = {}; const parts = valKey.split('_');
} const rind = parts[2];
rowsMap[rind][code] = valueObj[valKey]; if (!rowsMap[rind]) {
rowsMap[rind] = {};
} }
}
const tableDatas = Object.values(rowsMap); rowsMap[rind][code] = valueObj[valKey];
nextTick(); }
child.setFormData(tableDatas);
} }
} catch (error) {
VxeUI.modal.message({
content: `加载数据失败: ${error.message}`,
status: 'error',
});
} finally {
loading.value = false;
}
}
async function setTplItemMap() { const tableDatas = Object.values(rowsMap);
try { nextTick();
const taskId = queryParam.value.taskId; child.setFormData(tableDatas);
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 };
});
} catch (error) {
VxeUI.modal.message({ content: `加载数据失败: ${error.message}`, status: 'error' });
} finally {
} }
} catch (error) {
VxeUI.modal.message({
content: `加载数据失败: ${error.message}`,
status: 'error',
});
} finally {
loading.value = false;
} }
}
async function setTplItemMap() {
try {
const taskId = queryParam.value.taskId;
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 };
});
} catch (error) {
VxeUI.modal.message({ content: `加载数据失败: ${error.message}`, status: 'error' });
} finally {
}
} }
// 校验数据 // 校验数据
const checkData = () => { const checkData = () => {
drawerVisible.value = true drawerVisible.value = true;
} };
// 校验结果抽屉显示时触发 // 校验结果抽屉显示时触发
const handleValidationDrawerShow = () => { const handleValidationDrawerShow = () => {
performValidation() performValidation();
} };
// 执行校验 // 执行校验
const performValidation = () => { const performValidation = () => {
validationResultsList.value = [] validationResultsList.value = [];
const process: string[] = [] const process: string[] = [];
process.push('开始校验') process.push('开始校验');
process.push(`找到 ${validFormula.value.length} 个验证公式`) process.push(`找到 ${validFormula.value.length} 个验证公式`);
validFormula.value.forEach((formulaItem: any) => { validFormula.value.forEach((formulaItem: any) => {
process.push(`开始校验公式: ${formulaItem.des}`) process.push(`开始校验公式: ${formulaItem.des}`);
const result = evaluateFormula(formulaItem.formula, formulaItem.des, process) const result = evaluateFormula(formulaItem.formula, formulaItem.des, process);
if (result) { if (result) {
validationResultsList.value.push(result) validationResultsList.value.push(result);
} }
}) });
process.push('校验完成') process.push('校验完成');
} };
// 解析和执行验证公式 // 解析和执行验证公式
const evaluateFormula = (formula: string, description: string, process: string[]): any => { const evaluateFormula = (formula: string, description: string, process: string[]): any => {
try { try {
const fieldMatch = formula.match(/\[(\w+)\]/) const fieldMatch = formula.match(/\[(\w+)\]/);
if (!fieldMatch) { if (!fieldMatch) {
process.push(`跳过: 无法解析公式字段 ${formula}`) process.push(`跳过: 无法解析公式字段 ${formula}`);
return null return null;
} }
const fieldName = fieldMatch[1] const fieldName = fieldMatch[1];
const row = tableFormData.find((r: any) => r.content?.some((c: any) => c.field === fieldName)) const row = tableFormData.find((r: any) => r.content?.some((c: any) => c.field === fieldName));
if (!row) { if (!row) {
process.push(`跳过: 未找到字段 ${fieldName}`) process.push(`跳过: 未找到字段 ${fieldName}`);
return null return null;
} }
const fieldItem = row.content.find((c: any) => c.field === fieldName) const fieldItem = row.content.find((c: any) => c.field === fieldName);
if (!fieldItem) { if (!fieldItem) {
process.push(`跳过: 未找到字段 ${fieldName}`) process.push(`跳过: 未找到字段 ${fieldName}`);
return null return null;
} }
const strKey = `${row.code}_${fieldName}` const strKey = `${row.code}_${fieldName}`;
const fieldValue = formData[strKey] const fieldValue = formData[strKey];
// 检查是否有空字段规则 // 检查是否有空字段规则
const emptyFieldRule = validFormula.value.find((f: any) => const emptyFieldRule = validFormula.value.find((f: any) => f.formula.includes(fieldName) && f.des.includes('空字段'));
f.formula.includes(fieldName) && f.des.includes('空字段')
)
if (emptyFieldRule && (!fieldValue || fieldValue === '')) { if (emptyFieldRule && (!fieldValue || fieldValue === '')) {
process.push(`跳过: 字段 ${fieldName} 为空，跳过空字段规则`) process.push(`跳过: 字段 ${fieldName} 为空，跳过空字段规则`);
return null return null;
} }
const expression = formula.replace(/\[(\w+)\]/g, (_, field) => { const expression = formula.replace(/\[(\w+)\]/g, (_, field) => {
const value = formData[`${row.code}_${field}`] const value = formData[`${row.code}_${field}`];
return value !== undefined ? `Number(${value})` : '0' return value !== undefined ? `Number(${value})` : '0';
}) });
process.push(`执行公式: ${expression}`) process.push(`执行公式: ${expression}`);
const isValid = eval(expression) const isValid = eval(expression);
return { return {
field: fieldName, field: fieldName,
...@@ -597,59 +593,59 @@ ...@@ -597,59 +593,59 @@
formula: formula, formula: formula,
isValid: isValid, isValid: isValid,
fieldValue: fieldValue, fieldValue: fieldValue,
rowCode: row.code rowCode: row.code,
} };
} catch (error) { } catch (error) {
process.push(`公式执行错误: ${error instanceof Error ? error.message : String(error)}`) process.push(`公式执行错误: ${error instanceof Error ? error.message : String(error)}`);
return null return null;
} }
} };
// 处理校验结果点击，定位到表格 // 处理校验结果点击，定位到表格
const handleValidationResultClick = (result: any) => { const handleValidationResultClick = (result: any) => {
const row = tableFormData.find((r: any) => r.code === result.rowCode) const row = tableFormData.find((r: any) => r.code === result.rowCode);
if (row) { if (row) {
const fieldItem = row.content.find((c: any) => c.field === result.field) const fieldItem = row.content.find((c: any) => c.field === result.field);
if (fieldItem) { if (fieldItem) {
const strKey = `${row.code}_${result.field}` const strKey = `${row.code}_${result.field}`;
const inputElement = document.querySelector(`[data-field="${strKey}"]`) as HTMLElement const inputElement = document.querySelector(`[data-field="${strKey}"]`) as HTMLElement;
if (inputElement) { if (inputElement) {
inputElement.scrollIntoView({ behavior: 'smooth', block: 'center' }) inputElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
inputElement.focus() inputElement.focus();
inputElement.style.border = '2px solid #ff4d4f' inputElement.style.border = '2px solid #ff4d4f';
setTimeout(() => { setTimeout(() => {
inputElement.style.border = '' inputElement.style.border = '';
}, 2000) }, 2000);
} }
} }
} }
} };
// 显示验证公式帮助 // 显示验证公式帮助
const showValidationHelp = (formulaItem: any, event: MouseEvent) => { const showValidationHelp = (formulaItem: any, event: MouseEvent) => {
const rect = (event.target as HTMLElement).getBoundingClientRect() const rect = (event.target as HTMLElement).getBoundingClientRect();
validationTooltipPosition.value = { validationTooltipPosition.value = {
left: rect.left + rect.width / 2, left: rect.left + rect.width / 2,
top: rect.top - 10 top: rect.top - 10,
} };
validationTooltipContent.value = `验证公式: ${formulaItem.formula}\n说明: ${formulaItem.des}` validationTooltipContent.value = `验证公式: ${formulaItem.formula}\n说明: ${formulaItem.des}`;
validationTooltipVisible.value = true validationTooltipVisible.value = true;
} };
// 关闭验证公式帮助 // 关闭验证公式帮助
const closeTooltip = () => { const closeTooltip = () => {
validationTooltipVisible.value = false validationTooltipVisible.value = false;
} };
// 打开历史填报抽屉 // 打开历史填报抽屉
const handleOpenHistoryDrawer = () => { const handleOpenHistoryDrawer = () => {
historyDrawerVisible.value = true historyDrawerVisible.value = true;
} };
// 关闭历史填报抽屉 // 关闭历史填报抽屉
const closeHistoryDrawer = () => { const closeHistoryDrawer = () => {
historyDrawerVisible.value = false historyDrawerVisible.value = false;
} };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论