| New file |
| | |
|---|
| | | <script setup> |
|---|
| | | import {Search} from "@element-plus/icons-vue" |
|---|
| | | import {defineEmits, onMounted, reactive, ref, watch} from "vue" |
|---|
| | | import {changeFilterEvent} from "@/hook" |
|---|
| | | import request from "@/utils/request" |
|---|
| | | import exportExcel from "@/hook/exportExcel" |
|---|
| | | import {addListener,exportData} from "@/hook/mouseMove" |
|---|
| | | import deepClone from "@/utils/deepClone"; |
|---|
| | | import {ElMessage} from "element-plus"; |
|---|
| | | import * as XLSX from "xlsx"; |
|---|
| | | import {useI18n} from "vue-i18n"; |
|---|
| | | import useOrderInfoStore from "@/stores/sd/order/orderInfo"; |
|---|
| | | |
|---|
| | | const { t } = useI18n() |
|---|
| | | const xGrid = ref() |
|---|
| | | let filterData = ref({}) |
|---|
| | | const orderInfo = useOrderInfoStore() |
|---|
| | | const gridOptions = reactive({ |
|---|
| | | loading:true, |
|---|
| | | border: "full",//表格加边框 |
|---|
| | | keepSource: true,//保持源数据 |
|---|
| | | align: 'center',//文字居中 |
|---|
| | | stripe:true,//斑马纹 |
|---|
| | | rowConfig: {isCurrent: true, isHover: true,height: 30},//鼠标移动或选择高亮 |
|---|
| | | id: 'OrderReport', |
|---|
| | | showFooter: true,//显示脚 |
|---|
| | | printConfig: {}, |
|---|
| | | importConfig: {}, |
|---|
| | | exportConfig: {}, |
|---|
| | | scrollY:{ enabled: true,gt:0 },//开启虚拟滚动 |
|---|
| | | scrollX:{ enabled: true,gt:5 },//开启虚拟滚动 |
|---|
| | | showOverflow:true, |
|---|
| | | columnConfig: { |
|---|
| | | resizable: true, |
|---|
| | | useKey: true |
|---|
| | | }, |
|---|
| | | filterConfig: { //筛选配置项 |
|---|
| | | remote: true |
|---|
| | | }, |
|---|
| | | customConfig: { |
|---|
| | | storage: true |
|---|
| | | }, |
|---|
| | | editConfig: { |
|---|
| | | trigger: 'click', |
|---|
| | | mode: 'row', |
|---|
| | | showStatus: true |
|---|
| | | },//表头参数 |
|---|
| | | menuConfig: { |
|---|
| | | body: { |
|---|
| | | options: [ |
|---|
| | | [ |
|---|
| | | |
|---|
| | | { code: 'exportExcelChecked', name: t('components.exportSelected'), prefixIcon: 'vxe-icon-download', visible: true } |
|---|
| | | ] |
|---|
| | | ] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | columns:[ |
|---|
| | | |
|---|
| | | ],//表头按钮 |
|---|
| | | toolbarConfig: { |
|---|
| | | buttons: [], |
|---|
| | | slots: { |
|---|
| | | tools: 'toolbar_buttons', |
|---|
| | | buttons:'buttons' |
|---|
| | | }, |
|---|
| | | // import: false, |
|---|
| | | // export: true, |
|---|
| | | // print: true, |
|---|
| | | zoom: true, |
|---|
| | | custom: true |
|---|
| | | }, |
|---|
| | | data: [ |
|---|
| | | ],//table body实际数据 |
|---|
| | | footerMethod ({ columns, data }) {//页脚函数 |
|---|
| | | return[ |
|---|
| | | columns.map((column, columnIndex) => { |
|---|
| | | if (columnIndex === 0) { |
|---|
| | | return t('basicData.total') |
|---|
| | | } |
|---|
| | | if (props.childrenData.footList.includes(column.field)) { |
|---|
| | | return sumNum(data, column.field) |
|---|
| | | } |
|---|
| | | return '' |
|---|
| | | }) |
|---|
| | | ] |
|---|
| | | } |
|---|
| | | |
|---|
| | | }) |
|---|
| | | const gridEvents = { |
|---|
| | | menuClick ({ menu, row, column }) { |
|---|
| | | const $grid = xGrid.value |
|---|
| | | if ($grid) { |
|---|
| | | switch (menu.code) { |
|---|
| | | case 'exportExcelChecked': { |
|---|
| | | let result = exportData() |
|---|
| | | if(result){ |
|---|
| | | // 将数据转换为 worksheet 对象 |
|---|
| | | const worksheet = XLSX.utils.aoa_to_sheet(result); |
|---|
| | | const workbook = XLSX.utils.book_new(); |
|---|
| | | XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1'); |
|---|
| | | XLSX.writeFile(workbook, `${props.childrenData.exportName}.xlsx`); |
|---|
| | | } |
|---|
| | | break |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | const props = defineProps({ |
|---|
| | | childrenData:{ |
|---|
| | | Object, |
|---|
| | | default: '' |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | const basicProp = ref({ |
|---|
| | | pageSize : 10000,//页面显示数量 |
|---|
| | | pageNum:1,//当前页 |
|---|
| | | selectDate:['',''],//查询的日期 |
|---|
| | | pageTotal : 0,//总页数 |
|---|
| | | dataTotal : 0,//数据总条数 |
|---|
| | | }) |
|---|
| | | const sumNum = (list, field) => { |
|---|
| | | let count = 0 |
|---|
| | | list.forEach(item => { |
|---|
| | | count += Number(item[field]) |
|---|
| | | }) |
|---|
| | | 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) => { |
|---|
| | | xGrid.value.loadData(props.childrenData.data) |
|---|
| | | gridOptions.loading = false |
|---|
| | | }) |
|---|
| | | onMounted(() => { |
|---|
| | | gridOptions.columns = props.childrenData.columns |
|---|
| | | getReportData() |
|---|
| | | addListener(xGrid.value,gridOptions) |
|---|
| | | }) |
|---|
| | | function filterChanged(column){ |
|---|
| | | //gridOptions.loading=true |
|---|
| | | //筛选条件发生变化条件发生变化 |
|---|
| | | let value = column.datas[0]!=undefined?column.datas[0]:'' |
|---|
| | | value = value.trim() |
|---|
| | | //判断是否存在外键 |
|---|
| | | if (column.property.indexOf('.')>-1){ |
|---|
| | | const columnArr = column.property.split('.') |
|---|
| | | filterData.value[columnArr[0]] = { |
|---|
| | | [columnArr[1]]:value |
|---|
| | | } |
|---|
| | | }else{ |
|---|
| | | filterData.value[column.property] = value |
|---|
| | | } |
|---|
| | | |
|---|
| | | gridOptions.loading = true |
|---|
| | | getReportData() |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | const handlePageChange = ({ currentPage, pageSize }) => { |
|---|
| | | basicProp.value.pageNum = currentPage |
|---|
| | | basicProp.value.pageTotal = pageSize |
|---|
| | | gridOptions.loading = true |
|---|
| | | getReportData() |
|---|
| | | } |
|---|
| | | const dateChanged = () => { |
|---|
| | | gridOptions.loading = true |
|---|
| | | getReportData() |
|---|
| | | } |
|---|
| | | |
|---|
| | | const getReportData = () => { |
|---|
| | | if(props.childrenData.model!=null){ |
|---|
| | | request.post(`${props.childrenData.url}/${basicProp.value.pageNum}/${basicProp.value.pageSize}/${orderInfo.reportFormDate}/${props.childrenData.model}/${props.childrenData.scope}`,filterData.value).then(res => { |
|---|
| | | if(res.code === '200'){ |
|---|
| | | props.childrenData.data = res.data.data |
|---|
| | | 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 |
|---|
| | | } |
|---|
| | | request.post(`${props.childrenData.url}/${basicProp.value.pageNum}/${basicProp.value.pageSize}/${orderInfo.reportFormDate}`,filterData.value).then(res => { |
|---|
| | | if(res.code === '200'){ |
|---|
| | | props.childrenData.data = res.data.data |
|---|
| | | 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> |
|---|
| | | <div style="width: 100%;height: 100%"> |
|---|
| | | <div class="head"> |
|---|
| | | <el-date-picker |
|---|
| | | v-model="orderInfo.reportFormDate" |
|---|
| | | type="daterange" |
|---|
| | | :start-placeholder="$t('basicData.startDate')" |
|---|
| | | :end-placeholder="$t('basicData.endDate')" |
|---|
| | | format="YYYY-MM-DD" |
|---|
| | | value-format="YYYY-MM-DD" |
|---|
| | | /> |
|---|
| | | <el-button |
|---|
| | | @click="dateChanged" |
|---|
| | | id="searchButton" |
|---|
| | | type="primary" |
|---|
| | | style="margin-top: -5px" |
|---|
| | | :icon="Search">{{$t('basicData.search')}}</el-button> |
|---|
| | | </div> |
|---|
| | | <div class="main-table"> |
|---|
| | | <vxe-grid |
|---|
| | | @filter-change="filterChanged" |
|---|
| | | height="100%" |
|---|
| | | class="mytable-scrollbar" |
|---|
| | | ref="xGrid" |
|---|
| | | v-bind="gridOptions" |
|---|
| | | v-on="gridEvents" |
|---|
| | | > |
|---|
| | | <!-- 下拉显示所有信息插槽--> |
|---|
| | | <template #content="{ row }"> |
|---|
| | | <ul class="expand-wrapper"> |
|---|
| | | <li v-for="(item,index) in gridOptions.columns" v-show="item.field!==undefined && index>9"> |
|---|
| | | <span style="font-weight: bold">{{item.title+': '}}</span> |
|---|
| | | <span>{{ row[item.field] }}</span> |
|---|
| | | </li> |
|---|
| | | </ul> |
|---|
| | | </template> |
|---|
| | | <!-- 下拉筛选插槽--> |
|---|
| | | <template #num1_filter="{ column, $panel }"> |
|---|
| | | <div> |
|---|
| | | <div v-for="(option, index) in column.filters" :key="index"> |
|---|
| | | <input type="text" |
|---|
| | | v-model="option.data" |
|---|
| | | @keyup.enter.native="$panel.confirmFilter()" |
|---|
| | | @input="changeFilterEvent($event, option, $panel)"/> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <template #toolbar_buttons> |
|---|
| | | <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)" /> |
|---|
| | | |
|---|
| | | </template> |
|---|
| | | <template #buttons> |
|---|
| | | <slot name="buttons"></slot> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | |
|---|
| | | <template #pager> |
|---|
| | | <!--使用 pager 插槽--> |
|---|
| | | <!-- 'PrevJump','NextJump', --> |
|---|
| | | <vxe-pager |
|---|
| | | @page-change="handlePageChange" |
|---|
| | | :layouts="[ 'PrevPage', 'Jump','PageCount', 'NextPage', 'Total']" |
|---|
| | | v-model:current-page="basicProp.pageNum" |
|---|
| | | v-model:page-size="basicProp.pageSize" |
|---|
| | | v-model:pager-count="basicProp.pageTotal" |
|---|
| | | :total="basicProp.dataTotal" |
|---|
| | | > |
|---|
| | | </vxe-pager> |
|---|
| | | </template> |
|---|
| | | </vxe-grid> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <style scoped > |
|---|
| | | .main-div { |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | } |
|---|
| | | .el-col{ |
|---|
| | | border: #181818 1px solid; |
|---|
| | | } |
|---|
| | | :deep(.el-table .el-input__wrapper) { |
|---|
| | | box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset; |
|---|
| | | cursor: default; |
|---|
| | | border: none !important; |
|---|
| | | background-color: transparent; |
|---|
| | | } |
|---|
| | | .head{ |
|---|
| | | width: 100%; |
|---|
| | | height: 35px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .main-table{ |
|---|
| | | width: 100%; |
|---|
| | | height: calc(100% - 35px); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .vxe-grid { |
|---|
| | | /* 禁用浏览器默认选中 */ |
|---|
| | | -webkit-user-select: none; |
|---|
| | | -moz-user-select: none; |
|---|
| | | -ms-user-select: none; |
|---|
| | | user-select: none; |
|---|
| | | } |
|---|
| | | :deep(#product .el-dialog__body){ |
|---|
| | | height: 90%; |
|---|
| | | width: 100%; |
|---|
| | | } |
|---|
| | | </style> |
|---|
