| | |
| | | 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 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"; |
| | | |
| | | const { t } = useI18n() |
| | | const xGrid = ref() |
| | | let filterData = ref({}) |
| | | const gridOptions = reactive({ |
| | |
| | | printConfig: {}, |
| | | importConfig: {}, |
| | | exportConfig: {}, |
| | | scrollY:{ enabled: true },//开启虚拟滚动 |
| | | scrollY:{ enabled: true,gt:0 },//开启虚拟滚动 |
| | | scrollX:{ enabled: true,gt:5 },//开启虚拟滚动 |
| | | showOverflow:true, |
| | | columnConfig: { |
| | | resizable: true, |
| | |
| | | mode: 'row', |
| | | showStatus: true |
| | | },//表头参数 |
| | | columns:[ |
| | | menuConfig: { |
| | | body: { |
| | | options: [ |
| | | [ |
| | | |
| | | { code: 'exportExcelChecked', name: t('components.exportSelected'), prefixIcon: 'vxe-icon-download', visible: true } |
| | | ] |
| | | ] |
| | | } |
| | | }, |
| | | columns:[ |
| | | |
| | | ],//表头按钮 |
| | | toolbarConfig: { |
| | | buttons: [], |
| | | slots: { |
| | | tools: 'toolbar_buttons' |
| | | }, |
| | | // import: false, |
| | | // export: true, |
| | | // print: true, |
| | |
| | | return[ |
| | | columns.map((column, columnIndex) => { |
| | | if (columnIndex === 0) { |
| | | return '合计:' |
| | | return t('basicData.total') |
| | | } |
| | | if (props.childrenData.footList.includes(column.field)) { |
| | | return sumNum(data, column.field) |
| | |
| | | } |
| | | |
| | | }) |
| | | 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({ |
| | |
| | | onMounted(() => { |
| | | gridOptions.columns = props.childrenData.columns |
| | | getReportData() |
| | | addListener(xGrid.value,gridOptions) |
| | | |
| | | |
| | | }) |
| | |
| | | } |
| | | |
| | | |
| | | |
| | | |
| | | </script> |
| | | |
| | | <template> |
| | |
| | | <el-date-picker |
| | | v-model="basicProp.selectDate" |
| | | type="daterange" |
| | | start-placeholder="开始时间" |
| | | end-placeholder="结束时间" |
| | | :start-placeholder="$t('basicData.startDate')" |
| | | :end-placeholder="$t('basicData.endDate')" |
| | | format="YYYY-MM-DD" |
| | | value-format="YYYY-MM-DD" |
| | | /> |
| | |
| | | id="searchButton" |
| | | type="primary" |
| | | style="margin-top: -5px" |
| | | :icon="Search">查询</el-button> |
| | | :icon="Search">{{$t('basicData.search')}}</el-button> |
| | | <div class="order-detail"> |
| | | <vxe-grid |
| | | @filter-change="filterChanged" |
| | |
| | | class="mytable-scrollbar" |
| | | ref="xGrid" |
| | | v-bind="gridOptions" |
| | | v-on="gridEvents" |
| | | > |
| | | <!-- 下拉显示所有信息插槽--> |
| | | <template #content="{ row }"> |
| | |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <template #toolbar_buttons> |
| | | <vxe-button style="margin-right: 0.5rem" |
| | | @click="exportExcel(props.childrenData.exportUrl, |
| | | props.childrenData.exportName, |
| | | basicProp.selectDate)"> |
| | | {{$t('basicData.export')}}</vxe-button> |
| | | </template> |
| | | |
| | | <template #pager> |
| | | <!--使用 pager 插槽--> |
| | | <!-- 'PrevJump','NextJump', --> |
| | |
| | | height: calc(100% - 30px); |
| | | |
| | | } |
| | | |
| | | .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> |