xins
/
hwmom-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改报表生成

Browse Source
master
夜笙歌 4 months ago
parent 47fecb911f
commit 7040bd5937
3 changed files with 180 additions and 6 deletions
Show Stats Download Patch File Download Diff File

163
src/views/boardGenerate/index1.vue
Unescape Escape View File

@ -806,6 +806,11 @@
配置表格
</el-button>
</el-form-item>
<el-form-item label="单元格设置" v-if="Object.keys(nodeAttrForm).includes('tableOptions')">
<el-button class="optionsBtn" plain @click="tableCellOptionsVisible = true">
配置表格
</el-button>
</el-form-item>
<el-form-item label="表头是否显示" v-if="Object.keys(nodeAttrForm).includes('isThShow')">
<el-switch v-model="nodeAttrForm.isThShow" />
</el-form-item>
@ -1264,6 +1269,80 @@
<el-button size="small" :icon="Plus" style="width: 100%" @click="nodeAttrForm.tableOptions.push({})">添加
</el-button>
</el-dialog>
<el-dialog v-model="tableCellOptionsVisible" title="单元格设置" width="100%">
{{ (getInputData(nodeDataForm.id) || {}).tableData }}
<el-table
:data="(getInputData(nodeDataForm.id)||{}).tableData"
style="--el-table-border-color:#000"
:border="true"
:header-cell-style="{color:nodeAttrForm.thColor,backgroundColor:`${nodeAttrForm?.thBgColor} !important`}"
:header-row-style="{height:nodeAttrForm.thHeight }"
:show-header="nodeAttrForm.isThShow"
:style="{height: '100%'}"
>
<el-table-column v-for="(i,k) in nodeAttrForm.tableOptions" :key="k" :align="i.align" prop="date"
:label="i.name"
:width="i.width">
<template #default="scope">
<div @click.stop="cellClick(scope)">
<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:nodeAttrForm.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>
</el-dialog>
<el-dialog v-model="cellOptionsVisible" title="单元格设置" width="500">
<el-form :model="cellOption" label-width="auto">
<el-form-item label="类型">
<el-select
@change="cellTypeChange"
v-model="cellOption.type"
placeholder="请选择"
style="width: 100%"
>
<el-option
label="文本"
value="文本"
/>
<el-option
label="标签"
value="标签"
/>
<el-option
label="进度条"
value="进度条"
/>
<el-option
label="图片"
value="图片"
/>
</el-select>
</el-form-item>
<el-form-item label="计算公式">
<el-input @change="cellFormulaChange" v-model="cellOption.formula" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="cellOptionsVisible = false">关闭</el-button>
</div>
</template>
</el-dialog>
<el-dialog v-model="tableClassOptionsVisible" title="动画设置" width="500">
<el-form :model="nodeAttrForm.tableClassOption" label-width="auto">
<el-form-item label="滚动速度">
@ -1548,6 +1627,8 @@ const selectIconInput = ref('');
const collapseActiveName = ref('1');
const loading = ref(false);
const pageSettingVisible = ref(false);
const tableCellOptionsVisible = ref(false);
const cellOptionsVisible = ref(false);
const tableOptionsVisible = ref(false);
const tableClassOptionsVisible = ref(false);
const swiperOptionsVisible = ref(false);
@ -1566,6 +1647,7 @@ const nodes = ref([{
const edges = ref([]);
const customData = ref([]);
const customBoard = ref([]);
const cellOption = ref({});
const boardData = ref({});
const pageData = ref({});
const customDataForm = ref({});
@ -1814,6 +1896,87 @@ const pitchOnNode = (e) => {
nodeDataForm.value = e;
customDataForm.value = e.data.customData;
};
const cellClick = (e) => {
cellOption.value = {
...(nodeAttrForm.value.tableOptions?.[e.cellIndex] || {}),
$index: e.$index,
$cellIndex: e.cellIndex
};
console.log(e);
cellOptionsVisible.value = true;
console.log(cellOption.value);
};
const cellTypeChange = (value) => {
if (!nodeAttrForm.value.tableCellOptions) {
nodeAttrForm.value.tableCellOptions = [];
}
let option = (nodeAttrForm.value.tableCellOptions || []).find(e => e.index === cellOption.value.$index && e.cellIndex === cellOption.value.$cellIndex) || {};
let index = (nodeAttrForm.value.tableCellOptions || []).findIndex(e => e.index === cellOption.value.$index && e.cellIndex === cellOption.value.$cellIndex);
option.type = cellOption.value.type;
if (index === -1) {
nodeAttrForm.value.tableCellOptions.push({
index: cellOption.value.$index,
cellIndex: cellOption.value.$cellIndex,
type: value,
formula: cellOption.value.formula
});
} else {
nodeAttrForm.value.tableCellOptions[index].type = value;
}
console.log(nodeAttrForm.value);
};
const cellFormulaChange = (value) => {
console.log(value);
if (!nodeAttrForm.value.tableCellOptions) {
nodeAttrForm.value.tableCellOptions = [];
}
let option = (nodeAttrForm.value.tableCellOptions || []).find(e => e.index === cellOption.value.$index && e.cellIndex === cellOption.value.$cellIndex) || {};
let index = (nodeAttrForm.value.tableCellOptions || []).findIndex(e => e.index === cellOption.value.$index && e.cellIndex === cellOption.value.$cellIndex);
option.formula = cellOption.value.formula;
if (index === -1) {
nodeAttrForm.value.tableCellOptions.push({
index: cellOption.value.$index,
cellIndex: cellOption.value.$cellIndex,
type: cellOption.value.type,
formula: value
});
} else {
nodeAttrForm.value.tableCellOptions[index].formula = value;
}
console.log(nodeAttrForm.value);
};
const formulaFun = (row, formula) => {
let data = formula.replace(/\$\{\s*([^}]+?)\s*\}/g, (_, key) => {
if (`${row[key]}`?.trim() !== '' && !isNaN(row[key])) {
return row[key] || 0;
} else {
return `"${row[key]}"`;
}
});
let res = 0;
try {
res = eval(data);
} 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);
}
};
</script>
<style scoped lang="less">

22
src/views/boardGenerate/nodes/form/tableNode.vue
Unescape Escape View File

@ -7,7 +7,7 @@
<div class="custom-node"
:style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
<el-table
:data="props.inputData.tableData"
:data="getData(props.inputData.tableData)"
v-if="scrollShow"
style="--el-table-border-color:#000"
:border="true"
@ -22,20 +22,20 @@
<template #default="scope">
<div>
<span
v-if="(scope.row[`cellType${k+1}`] || i.type) === '文本'">{{ setText(scope.row[i.field], scope.row, i.formula)
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, i.formula) }}
{{ 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,i.formula)"
: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, i.formula))" />
<span v-else>{{ setText(scope.row[i.field], scope.row, i.formula)
: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>
@ -337,9 +337,19 @@ const setText = (value, row, formula) => {
if (!formula) {
return value;
} else {
console.log(formula);
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;
});
console.log(e);
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;

1
src/views/boardGenerate/tool.js
Unescape Escape View File

@ -319,6 +319,7 @@ const getOption = (e) => {
} else if (e === 'scrollTable' || e === 'table') {
return {
tableOptions: [],
tableCellOptions: [],
tableClassOption: {}, isThShow: true,
thHeight: '32px',
tdHeight: '28px',

Write Preview
Loading…
Cancel
Save