| | |
| | | return count.toFixed(2) |
| | | } |
| | | |
| | | //合并显示其他列 |
| | | const handleDynamicColumns = (data,title) => { |
| | | // 1. 收集所有行的otherColumns字段(去重) |
| | | const allOtherFields = new Set(); |
| | | data.forEach(row => { |
| | | if (!row || !row.otherColumns) return; |
| | | |
| | | let parsedOtherColumns; |
| | | try { |
| | | // 核心:将字符串解析为JSON |
| | | parsedOtherColumns = JSON.parse(row.otherColumns); |
| | | } catch (e) { |
| | | console.error('解析otherColumns失败:', e, '原始数据:', row.otherColumns); |
| | | return; |
| | | } |
| | | |
| | | // 2. 从解析后的JSON中收集字段(支持数组或对象格式) |
| | | if (Array.isArray(parsedOtherColumns)) { |
| | | // 数组格式:[{ key: 'field1', label: '字段1', value: '值1' }, ...] |
| | | parsedOtherColumns.forEach(item => { |
| | | if (item.key) allOtherFields.add(item.key); |
| | | }); |
| | | } else if (typeof parsedOtherColumns === 'object' && parsedOtherColumns !== null) { |
| | | // 对象格式:{ field1: { label: '字段1', value: '值1' }, ... } |
| | | Object.keys(parsedOtherColumns).forEach(key => { |
| | | allOtherFields.add(key); |
| | | }); |
| | | } |
| | | }); |
| | | |
| | | // 2. 生成动态子列(作为processList的children) |
| | | const otherColumns = Array.from(allOtherFields).map(field => { |
| | | // 尝试获取字段对应的label(优先取第一个出现的label) |
| | | let label=field; |
| | | title.forEach(item=>{ |
| | | if(field==item.column){ |
| | | label=item.alias |
| | | } |
| | | }) |
| | | return { |
| | | title: label, |
| | | field: `otherColumnsJson.${field}`, |
| | | width: 120, |
| | | align: 'center', |
| | | // 处理字段值显示(兼容数组/对象类型的otherColumns) |
| | | formatter: ({ row }) => { |
| | | return row.otherColumnsJson?.[field] || ''; |
| | | |
| | | } |
| | | }; |
| | | }); |
| | | |
| | | // 3. 定义父级列processList,包含动态子列 |
| | | const processList = { |
| | | title: t('basicData.otherColumns'), |
| | | field: 'process', |
| | | children: otherColumns // 将动态列作为子列 |
| | | }; |
| | | |
| | | // 4. 先移除已存在的process列(避免重复),再添加新列 |
| | | gridOptions.columns = gridOptions.columns.filter(col => col.field !== 'process'); |
| | | gridOptions.columns.push(processList); |
| | | } |
| | | |
| | | |
| | | |
| | | |
| | | watch(props, (newVal) => { |
| | |
| | | basicProp.value.pageTotal = res.data.total.pageTotal |
| | | basicProp.value.dataTotal = res.data.total.total |
| | | orderInfo.reportFormDate = res.data.selectDate |
| | | |
| | | //订单明细报表 |
| | | if (props.childrenData.url === '/order/getOrderReport') { |
| | | const dataList = res.data.data || []; |
| | | handleDynamicColumns(dataList,res.data.title) |
| | | } |
| | | } |
| | | }) |
| | | return |
| | |
| | | basicProp.value.pageTotal = res.data.total.pageTotal |
| | | basicProp.value.dataTotal = res.data.total.total |
| | | orderInfo.reportFormDate = res.data.selectDate |
| | | |
| | | |
| | | } |
| | | }) |
| | | } |
| | | |
| | | |
| | | const exportEvent = () => { |
| | | const $table = xGrid.value |
| | | if ($table) { |
| | | $table.exportData({ |
| | | filename: 'order_export', |
| | | sheetName: 'Sheet1', |
| | | type: 'xlsx' |
| | | }) |
| | | } |
| | | } |
| | | |
| | | |
| | | </script> |
| | |
| | | </template> |
| | | |
| | | <template #toolbar_buttons> |
| | | <vxe-button style="margin-right: 0.5rem" |
| | | @click="exportExcel(props.childrenData.exportUrl, |
| | | <vxe-button icon="vxe-icon-download" circle |
| | | style="margin-right: 0.5rem" |
| | | @click="exportEvent" /> |
| | | |
| | | <vxe-button icon="vxe-icon-cloud-download" style="margin-right: 0.5rem" |
| | | circle |
| | | @click="exportExcel(props.childrenData.exportUrl, |
| | | props.childrenData.exportName, |
| | | orderInfo.reportFormDate)"> |
| | | {{$t('basicData.export')}}</vxe-button> |
| | | orderInfo.reportFormDate)" /> |
| | | |
| | | </template> |
| | | <template #buttons> |
| | | <slot name="buttons"></slot> |