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