修改报表生成
夜笙歌
3 days ago
parent
44ecadd990
commit
81ad493a92
@ -0,0 +1,372 @@
|
||||
<template>
|
||||
<div
|
||||
:style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
|
||||
<NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected"
|
||||
@resize="resize" />
|
||||
|
||||
<div class="custom-node"
|
||||
:style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
|
||||
<el-table
|
||||
:data="getData(props.inputData.tableData)"
|
||||
v-if="scrollShow"
|
||||
style="--el-table-border-color:#000"
|
||||
:border="true"
|
||||
:show-header="false"
|
||||
:style="{height: '100%'}"
|
||||
>
|
||||
<el-table-column v-for="(i,k) in props.data.options.cellNum" :key="k" :align="i.align" prop="date"
|
||||
:label="i.name"
|
||||
:width="i.width">
|
||||
<template #default="scope">
|
||||
<div>
|
||||
<span
|
||||
v-if="(scope.row[`cellType${k+1}`] || i.type) === '文本'">{{ setText(scope.row[i.field], scope.row, (scope.row[`cellFormula${k + 1}`] || i.formula))
|
||||
}}</span>
|
||||
<el-tag type="primary" v-else-if="(scope.row[`cellType${k+1}`] || i.type) === '标签'">
|
||||
{{ setText(scope.row[i.field], scope.row, (scope.row[`cellFormula${k + 1}`] || i.formula)) }}
|
||||
</el-tag>
|
||||
<el-image :preview-src-list="[scope.row[i.field]]"
|
||||
v-else-if="(scope.row[`cellType${k+1}`] || i.type) === '图片'" style="width: 100%;"
|
||||
:style="{height:props.data.options.tdHeight}"
|
||||
:src="setText(scope.row[i.field],scope.row,(scope.row[`cellFormula${k+1}`] || i.formula))"
|
||||
fit="contain" />
|
||||
<el-progress v-else-if="(scope.row[`cellType${k+1}`] || i.type) === '进度条'" :text-inside="true"
|
||||
:stroke-width="26"
|
||||
:percentage="parseFloat(setText(scope.row[i.field],scope.row, (scope.row[`cellFormula${k+1}`] || i.formula)))" />
|
||||
<span v-else>{{ setText(scope.row[i.field], scope.row, (scope.row[`cellFormula${k + 1}`] || i.formula))
|
||||
}}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { defineEmits, defineProps, ref } from 'vue';
|
||||
import { NodeResizer } from '@vue-flow/node-resizer';
|
||||
import { Handle, Position } from '@vue-flow/core';
|
||||
import { vue3ScrollSeamless } from 'vue3-scroll-seamless';
|
||||
|
||||
const a = {
|
||||
'tableData': [
|
||||
{
|
||||
'生产日期': '2024/8/2',
|
||||
'销售订单': 'G-00101',
|
||||
'产品名称': '圆珠笔',
|
||||
'规格型号': '0.5mm',
|
||||
'单位': '个',
|
||||
'计划产量': 50,
|
||||
'实际产量': 45,
|
||||
'不良数量': 10,
|
||||
'完成率': '90.00%',
|
||||
'用时': '2小时',
|
||||
'备注': ''
|
||||
},
|
||||
{
|
||||
'生产日期': '2024/8/3',
|
||||
'销售订单': 'G-00110',
|
||||
'产品名称': '订书机',
|
||||
'规格型号': '小型',
|
||||
'单位': '个',
|
||||
'计划产量': 100,
|
||||
'实际产量': 99,
|
||||
'不良数量': 11,
|
||||
'完成率': '99.00%',
|
||||
'用时': '3小时',
|
||||
'备注': ''
|
||||
},
|
||||
{
|
||||
'生产日期': '2024/8/4',
|
||||
'销售订单': 'G-00111',
|
||||
'产品名称': '笔记本',
|
||||
'规格型号': 'A5',
|
||||
'单位': '个',
|
||||
'计划产量': 150,
|
||||
'实际产量': 130,
|
||||
'不良数量': 15,
|
||||
'完成率': '86.67%',
|
||||
'用时': '4小时',
|
||||
'备注': ''
|
||||
},
|
||||
{
|
||||
'生产日期': '2024/8/5',
|
||||
'销售订单': 'G-00568',
|
||||
'产品名称': '笔筒',
|
||||
'规格型号': '500mm',
|
||||
'单位': '个',
|
||||
'计划产量': 200,
|
||||
'实际产量': 195,
|
||||
'不良数量': 20,
|
||||
'完成率': '97.50%',
|
||||
'用时': '5小时',
|
||||
'备注': ''
|
||||
},
|
||||
{
|
||||
'生产日期': '2024/8/6',
|
||||
'销售订单': 'G-00365',
|
||||
'产品名称': '毛笔',
|
||||
'规格型号': '小楷笔',
|
||||
'单位': '个',
|
||||
'计划产量': 250,
|
||||
'实际产量': 243,
|
||||
'不良数量': 22,
|
||||
'完成率': '97.20%',
|
||||
'用时': '6小时',
|
||||
'备注': ''
|
||||
},
|
||||
{
|
||||
'生产日期': '2024/8/7',
|
||||
'销售订单': 'G-00486',
|
||||
'产品名称': '铅笔',
|
||||
'规格型号': '184mm',
|
||||
'单位': '个',
|
||||
'计划产量': 300,
|
||||
'实际产量': 289,
|
||||
'不良数量': 21,
|
||||
'完成率': '96.33%',
|
||||
'用时': '7小时',
|
||||
'备注': ''
|
||||
},
|
||||
{
|
||||
'生产日期': '2024/8/8',
|
||||
'销售订单': 'G-00321',
|
||||
'产品名称': '文件袋',
|
||||
'规格型号': '240mm',
|
||||
'单位': '个',
|
||||
'计划产量': 350,
|
||||
'实际产量': 345,
|
||||
'不良数量': 25,
|
||||
'完成率': '98.57%',
|
||||
'用时': '8小时',
|
||||
'备注': ''
|
||||
},
|
||||
{
|
||||
'生产日期': '2024/8/9',
|
||||
'销售订单': 'G-00462',
|
||||
'产品名称': '文件盒',
|
||||
'规格型号': '500mm',
|
||||
'单位': '个',
|
||||
'计划产量': 400,
|
||||
'实际产量': 396,
|
||||
'不良数量': 26,
|
||||
'完成率': '99.00%',
|
||||
'用时': '9小时',
|
||||
'备注': ''
|
||||
},
|
||||
{
|
||||
'生产日期': '2024/8/10',
|
||||
'销售订单': 'G-00466',
|
||||
'产品名称': '水墨笔',
|
||||
'规格型号': '黑色',
|
||||
'单位': '个',
|
||||
'计划产量': 450,
|
||||
'实际产量': 441,
|
||||
'不良数量': 27,
|
||||
'完成率': '98.00%',
|
||||
'用时': '10小时',
|
||||
'备注': ''
|
||||
},
|
||||
{
|
||||
'生产日期': '2024/8/11',
|
||||
'销售订单': 'G-00468',
|
||||
'产品名称': '橡皮擦',
|
||||
'规格型号': '小熊',
|
||||
'单位': '个',
|
||||
'计划产量': 500,
|
||||
'实际产量': 498,
|
||||
'不良数量': 100,
|
||||
'完成率': '99.60%',
|
||||
'用时': '11小时',
|
||||
'备注': ''
|
||||
},
|
||||
{
|
||||
'生产日期': '2024/8/12',
|
||||
'销售订单': 'G-00500',
|
||||
'产品名称': '日历',
|
||||
'规格型号': 'A5',
|
||||
'单位': '个',
|
||||
'计划产量': 550,
|
||||
'实际产量': 530,
|
||||
'不良数量': 150,
|
||||
'完成率': '96.36%',
|
||||
'用时': '12小时',
|
||||
'备注': ''
|
||||
},
|
||||
{
|
||||
'生产日期': '2024/8/13',
|
||||
'销售订单': 'G-00510',
|
||||
'产品名称': '双面胶',
|
||||
'规格型号': '100m',
|
||||
'单位': '个',
|
||||
'计划产量': 600,
|
||||
'实际产量': 580,
|
||||
'不良数量': 35,
|
||||
'完成率': '96.67%',
|
||||
'用时': '13小时',
|
||||
'备注': ''
|
||||
},
|
||||
{
|
||||
'生产日期': '2024/8/14',
|
||||
'销售订单': 'G-00511',
|
||||
'产品名称': 'A4纸',
|
||||
'规格型号': '500张',
|
||||
'单位': '个',
|
||||
'计划产量': 650,
|
||||
'实际产量': 610,
|
||||
'不良数量': 50,
|
||||
'完成率': '93.85%',
|
||||
'用时': '14小时',
|
||||
'备注': ''
|
||||
},
|
||||
{
|
||||
'生产日期': '2024/8/15',
|
||||
'销售订单': 'G-00515',
|
||||
'产品名称': '美工刀',
|
||||
'规格型号': '小',
|
||||
'单位': '个',
|
||||
'计划产量': 700,
|
||||
'实际产量': 670,
|
||||
'不良数量': 100,
|
||||
'完成率': '95.71%',
|
||||
'用时': '15小时',
|
||||
'备注': ''
|
||||
},
|
||||
{
|
||||
'生产日期': '2024/8/16',
|
||||
'销售订单': 'G-00518',
|
||||
'产品名称': '剪刀',
|
||||
'规格型号': '中',
|
||||
'单位': '个',
|
||||
'计划产量': 600,
|
||||
'实际产量': 500,
|
||||
'不良数量': 60,
|
||||
'完成率': '83.33%',
|
||||
'用时': '16小时',
|
||||
'备注': ''
|
||||
},
|
||||
{
|
||||
'生产日期': '2024/8/17',
|
||||
'销售订单': 'G-00520',
|
||||
'产品名称': '墨水',
|
||||
'规格型号': '红色',
|
||||
'单位': '个',
|
||||
'计划产量': 500,
|
||||
'实际产量': 420,
|
||||
'不良数量': 80,
|
||||
'完成率': '84.00%',
|
||||
'用时': '17小时',
|
||||
'备注': ''
|
||||
},
|
||||
{
|
||||
'生产日期': '2024/8/18',
|
||||
'销售订单': 'G-00525',
|
||||
'产品名称': '文具盒',
|
||||
'规格型号': '卡通',
|
||||
'单位': '个',
|
||||
'计划产量': 500,
|
||||
'实际产量': 450,
|
||||
'不良数量': 100,
|
||||
'完成率': '90.00%',
|
||||
'用时': '18小时',
|
||||
'备注': ''
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
|
||||
const scrollShow = ref(true);
|
||||
|
||||
const props = defineProps({
|
||||
isView: {
|
||||
type: Boolean,
|
||||
required: false
|
||||
},
|
||||
inputData: {
|
||||
type: Object,
|
||||
required: false
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
isHideHandle: {
|
||||
type: Boolean,
|
||||
required: false
|
||||
},
|
||||
selected: {
|
||||
type: Boolean,
|
||||
required: false
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
dimensions: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
const formulaFun = (row, formula) => {
|
||||
let data = formula.replace(/\$\{\s*([^}]+?)\s*\}/g, (_, key) => {
|
||||
if (key === 'tableData') {
|
||||
return key;
|
||||
}
|
||||
if (`${row[key]}`?.trim() !== '' && !isNaN(row[key])) {
|
||||
return row[key] || 0;
|
||||
} else {
|
||||
return `"${row[key]}"`;
|
||||
}
|
||||
});
|
||||
let res = 0;
|
||||
try {
|
||||
const fun = new Function('tableData', `return ${data}`);
|
||||
res = fun(getData(props.inputData.tableData));
|
||||
} catch (err) {
|
||||
res = 0;
|
||||
}
|
||||
if (`${res}`.trim() !== '' && !isNaN(res)) {
|
||||
res = res.toFixed(2);
|
||||
}
|
||||
return res;
|
||||
};
|
||||
const setText = (value, row, formula) => {
|
||||
if (!formula) {
|
||||
return value;
|
||||
} else {
|
||||
return formulaFun(row, formula);
|
||||
}
|
||||
};
|
||||
const getData = (e) => {
|
||||
let val = e;
|
||||
(props.data.options.tableCellOptions || []).forEach(item => {
|
||||
e[item.index][`cellType${item.cellIndex + 1}`] = item.type;
|
||||
e[item.index][`cellFormula${item.cellIndex + 1}`] = item.formula;
|
||||
});
|
||||
return e;
|
||||
};
|
||||
watch(() => JSON.parse(JSON.stringify([props.inputData?.tableData || '', props.data.options])), (obj1, obj2) => {
|
||||
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
|
||||
scrollShow.value = false;
|
||||
nextTick(() => {
|
||||
scrollShow.value = true;
|
||||
});
|
||||
}
|
||||
}, { deep: true, immediate: true });
|
||||
const emit = defineEmits(['resize']);
|
||||
const resize = (e) => {
|
||||
emit('resize', e, props.id);
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.custom-node {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.scrollTable {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue