|
|
@@ -14,7 +14,7 @@ const props = defineProps({
|
|
|
})
|
|
|
|
|
|
const tableOriginColumnsField = ref()
|
|
|
-const handleColumns = (columns: any) => {
|
|
|
+const handleColumns = (columns: any, status?: string) => {
|
|
|
const newColumns = columns.map((item: any) => {
|
|
|
let curColumn: any = {
|
|
|
title: item.title,
|
|
|
@@ -22,35 +22,37 @@ const handleColumns = (columns: any) => {
|
|
|
sortable: true
|
|
|
}
|
|
|
// 设置插槽
|
|
|
- if (item.type === 'status') {
|
|
|
+ if (item.type === 'status' && status !== 'all') {
|
|
|
curColumn = {
|
|
|
...curColumn,
|
|
|
slots: { default: 'status' }
|
|
|
}
|
|
|
- } else if (item.type === 'link') {
|
|
|
+ } else if (item.type === 'link' && status !== 'all') {
|
|
|
curColumn = {
|
|
|
...curColumn,
|
|
|
- slots: { default: 'bookingNo' }
|
|
|
+ slots: { default: 'link' }
|
|
|
}
|
|
|
- } else if (item.type === 'mode') {
|
|
|
+ } else if (item.type === 'mode' && status !== 'all') {
|
|
|
curColumn = {
|
|
|
...curColumn,
|
|
|
- slots: { default: 'mode' }
|
|
|
+ slots: { default: 'mode' },
|
|
|
+ formatter: ({ cellValue }: any) => {
|
|
|
+ return cellValue
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
// 格式化
|
|
|
if (item.formatter === 'date') {
|
|
|
curColumn = {
|
|
|
...curColumn,
|
|
|
- sortBy: ({ row, column }: any) => {
|
|
|
- return dayjs(row[column.field]).unix()
|
|
|
- },
|
|
|
- formatter: ({ cellValue }: any) => dayjs(cellValue).format('YYYY/MM/DD ') || '--'
|
|
|
+ formatter: ({ cellValue }: any) =>
|
|
|
+ cellValue ? dayjs(cellValue).format('MMM-YYYY-DD ') : '--'
|
|
|
}
|
|
|
} else if (item.formatter === 'dateTime') {
|
|
|
curColumn = {
|
|
|
...curColumn,
|
|
|
- formatter: ({ cellValue }: any) => dayjs(cellValue).format('YYYY/MM/DD HH:mm:ss') || '--'
|
|
|
+ formatter: ({ cellValue }: any) =>
|
|
|
+ cellValue ? dayjs(cellValue).format('MMM-YYYY-DD HH:mm:ss') : '--'
|
|
|
}
|
|
|
}
|
|
|
return curColumn
|
|
|
@@ -59,8 +61,8 @@ const handleColumns = (columns: any) => {
|
|
|
}
|
|
|
|
|
|
// 获取表格列
|
|
|
-const getTableColumns = async (isInit: boolean) => {
|
|
|
- tableLoading.value = true
|
|
|
+const getTableColumns = async () => {
|
|
|
+ tableLoadingColumn.value = true
|
|
|
await $api.getOperationTableColumns().then((res: any) => {
|
|
|
if (res.code === 200) {
|
|
|
bookingTable.value.columns = [
|
|
|
@@ -71,37 +73,60 @@ const getTableColumns = async (isInit: boolean) => {
|
|
|
}
|
|
|
})
|
|
|
nextTick(() => {
|
|
|
- !isInit && (tableLoading.value = false)
|
|
|
+ tableRef.value && autoWidth(bookingTable.value, tableRef.value)
|
|
|
+ tableLoadingColumn.value = false
|
|
|
+ selectedNumber.value = 0
|
|
|
+ selectedTableData.value = []
|
|
|
})
|
|
|
}
|
|
|
|
|
|
const pageInfo = ref({ pageNo: 1, pageSize: 20, total: 0 })
|
|
|
+const tempSearch = ref()
|
|
|
+// 获得表格数据后赋值
|
|
|
+const assignTableData = (data: any) => {
|
|
|
+ bookingTable.value.data = data.searchData || []
|
|
|
+ pageInfo.value.total = Number(data.rc) || 0
|
|
|
+ tempSearch.value = data.tmp_search
|
|
|
+ // 拥有所有字段的表格
|
|
|
+ setTimeout(() => {
|
|
|
+ allTable.value.columns = handleColumns(bookingTable.value.columns, 'all')
|
|
|
+ allTable.value.data = data.searchData || []
|
|
|
+ // 为了让导出的表格列宽度自适应
|
|
|
+ nextTick(() => {
|
|
|
+ allTableRef.value && autoWidth(allTable.value, allTableRef.value)
|
|
|
+ })
|
|
|
+ }, 1000)
|
|
|
+}
|
|
|
|
|
|
let searchdata: any = {}
|
|
|
// 获取表格数据
|
|
|
-const getTableData = async (isInit: boolean, isPageChange?: boolean) => {
|
|
|
+const getTableData = async (isPageChange?: boolean) => {
|
|
|
const rc = isPageChange ? pageInfo.value.total : -1
|
|
|
- tableLoading.value = true
|
|
|
+ tableLoadingTableData.value = true
|
|
|
await $api
|
|
|
.SearchOperationLog({
|
|
|
cp: pageInfo.value.pageNo,
|
|
|
ps: pageInfo.value.pageSize,
|
|
|
- rc,
|
|
|
+ rc: -1,
|
|
|
...searchdata
|
|
|
})
|
|
|
.then((res: any) => {
|
|
|
if (res.code === 200) {
|
|
|
- bookingTable.value.data = res.data.searchData
|
|
|
- pageInfo.value.total = Number(res.data.rc)
|
|
|
+ assignTableData(res.data)
|
|
|
}
|
|
|
})
|
|
|
- nextTick(() => {
|
|
|
- !isInit && (tableLoading.value = false)
|
|
|
- })
|
|
|
+ .finally(() => {
|
|
|
+ selectedNumber.value = 0
|
|
|
+ selectedTableData.value = []
|
|
|
+ nextTick(() => {
|
|
|
+ tableRef.value && autoWidth(bookingTable.value, tableRef.value)
|
|
|
+ tableLoadingTableData.value = false
|
|
|
+ })
|
|
|
+ })
|
|
|
}
|
|
|
const SearchOperationLog = (val: any) => {
|
|
|
searchdata = val
|
|
|
- tableLoading.value = true
|
|
|
+ tableLoadingTableData.value = true
|
|
|
$api
|
|
|
.SearchOperationLog({
|
|
|
cp: pageInfo.value.pageNo,
|
|
|
@@ -111,16 +136,20 @@ const SearchOperationLog = (val: any) => {
|
|
|
})
|
|
|
.then((res: any) => {
|
|
|
if (res.code === 200) {
|
|
|
- bookingTable.value.data = res.data.searchData
|
|
|
- pageInfo.value.total = Number(res.data.rc)
|
|
|
- tableLoading.value = false
|
|
|
+ assignTableData(res.data)
|
|
|
}
|
|
|
})
|
|
|
+ .finally(() => {
|
|
|
+ selectedNumber.value = 0
|
|
|
+ selectedTableData.value = []
|
|
|
+ nextTick(() => {
|
|
|
+ tableRef.value && autoWidth(bookingTable.value, tableRef.value)
|
|
|
+ tableLoadingTableData.value = false
|
|
|
+ })
|
|
|
+ })
|
|
|
}
|
|
|
onMounted(() => {
|
|
|
- tableLoading.value = true
|
|
|
- Promise.all([getTableColumns(true), getTableData(true)]).finally(() => {
|
|
|
- tableLoading.value = false
|
|
|
+ Promise.all([getTableColumns(), getTableData()]).finally(() => {
|
|
|
nextTick(() => {
|
|
|
tableRef.value && autoWidth(bookingTable.value, tableRef.value)
|
|
|
})
|
|
|
@@ -196,37 +225,117 @@ const bookingTable = ref<VxeGridProps<any>>({
|
|
|
modes: ['current', 'selected', 'all']
|
|
|
}
|
|
|
})
|
|
|
+const allTableRef = ref<VxeGridInstance>()
|
|
|
+const allTable = ref<VxeGridProps<any>>({
|
|
|
+ columns: [],
|
|
|
+ data: [],
|
|
|
+ showHeaderOverflow: true,
|
|
|
+ showOverflow: true,
|
|
|
+ scrollY: { enabled: true, oSize: 5, gt: 2 },
|
|
|
+ scrollX: { enabled: true, gt: 2 },
|
|
|
+ exportConfig: {
|
|
|
+ types: ['csv', 'html', 'txt', 'xlsx'],
|
|
|
+ modes: ['current', 'selected', 'all']
|
|
|
+ }
|
|
|
+})
|
|
|
|
|
|
// 实现行点击样式
|
|
|
useRowClickStyle(tableRef)
|
|
|
|
|
|
const downloadDialogRef = ref()
|
|
|
const handleDownload = () => {
|
|
|
- downloadDialogRef.value.openDialog()
|
|
|
+ const curSelectedColumns: string[] = []
|
|
|
+ tableRef.value?.columns?.forEach((item: any) => {
|
|
|
+ if (item.field) {
|
|
|
+ curSelectedColumns.push(item.title)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ downloadDialogRef.value.openDialog(
|
|
|
+ curSelectedColumns,
|
|
|
+ selectedNumber.value || pageInfo.value.total
|
|
|
+ )
|
|
|
}
|
|
|
|
|
|
-// 导出表格
|
|
|
-const exportTable = () => {
|
|
|
- tableRef.value?.exportData({
|
|
|
+const exportLoading = ref(false)
|
|
|
+// 获取导出表格数据
|
|
|
+const getExportTableData = (status: number) => {
|
|
|
+ // 如果有选中表格行数据，那么只到处选中的数据
|
|
|
+ if (selectedNumber.value > 0) {
|
|
|
+ exportTable(status)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ exportLoading.value = true
|
|
|
+ const buildColumnString = (columns: any[]): string => {
|
|
|
+ return columns
|
|
|
+ .filter((item) => item.field)
|
|
|
+ .map((item) => item.title)
|
|
|
+ .join(',')
|
|
|
+ }
|
|
|
+
|
|
|
+ let column = ''
|
|
|
+ if (status === 1) {
|
|
|
+ column = buildColumnString(bookingTable.value.columns)
|
|
|
+ } else {
|
|
|
+ column = buildColumnString(allTable.value.columns)
|
|
|
+ }
|
|
|
+ $api
|
|
|
+ .OperationLogDownload({
|
|
|
+ selected_fields: column,
|
|
|
+ tmp_search: tempSearch.value
|
|
|
+ })
|
|
|
+ .then((res: any) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ allTable.value.data = res.data.Data || []
|
|
|
+ nextTick(() => {
|
|
|
+ exportLoading.value = false
|
|
|
+ // 导出数据
|
|
|
+ exportTable(status)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ exportLoading.value = false
|
|
|
+ })
|
|
|
+}
|
|
|
+// 导出表格 status: 1 导出当前表格 2 导出所有字段表格
|
|
|
+const exportTable = (status: number) => {
|
|
|
+ const exportConfig: any = {
|
|
|
type: 'xlsx',
|
|
|
message: false,
|
|
|
- filename: `Booking List_${dayjs().format('YYYYMMDDHH[h]mm[m]ss[s]')}`,
|
|
|
- columnFilterMethod: ({ column }: any) => {
|
|
|
- // 筛选选中导出的列
|
|
|
- return column.field
|
|
|
+ filename: `Opeartion Log_${dayjs().format('YYYYMMDDHH[h]mm[m]ss[s]')}`
|
|
|
+ }
|
|
|
+ if (status === 1) {
|
|
|
+ exportConfig.columnFilterMethod = ({ column }: any) => {
|
|
|
+ const index = bookingTable.value.columns.findIndex((item: any) => item.field === column.field)
|
|
|
+ // 排除复选框列
|
|
|
+ return column.field && index !== -1
|
|
|
}
|
|
|
- })
|
|
|
+ exportConfig.columns = bookingTable.value.columns
|
|
|
+ }
|
|
|
+ if (selectedNumber.value > 0) {
|
|
|
+ exportConfig.dataFilterMethod = ({ row }: any) => {
|
|
|
+ const index = selectedTableData.value.findIndex(
|
|
|
+ (item: any) => item._X_ROW_KEY === row._X_ROW_KEY
|
|
|
+ )
|
|
|
+ return index !== -1
|
|
|
+ }
|
|
|
+ }
|
|
|
+ allTableRef.value?.exportData(exportConfig)
|
|
|
}
|
|
|
|
|
|
-const tableLoading = ref(false)
|
|
|
+const tableLoadingColumn = ref(false)
|
|
|
+const tableLoadingTableData = ref(false)
|
|
|
|
|
|
const selectedNumber = ref(0)
|
|
|
+const selectedTableData = ref([])
|
|
|
// 复选框选中事件
|
|
|
const handleCheckboxChange = ({ records }: any) => {
|
|
|
selectedNumber.value = records.length
|
|
|
+ selectedTableData.value = records
|
|
|
}
|
|
|
const handleCheckAllChange = ({ records }: any) => {
|
|
|
selectedNumber.value = records.length
|
|
|
+ selectedTableData.value = records
|
|
|
}
|
|
|
defineExpose({
|
|
|
SearchOperationLog
|
|
|
@@ -234,7 +343,12 @@ defineExpose({
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
- <div style="padding: 0px 20px">
|
|
|
+ <div
|
|
|
+ style="padding: 0px 20px"
|
|
|
+ class="booking-table"
|
|
|
+ v-loading.fullscreen.lock="exportLoading"
|
|
|
+ element-loading-background="rgb(43, 47, 54, 0.7)"
|
|
|
+ >
|
|
|
<div class="table-tools">
|
|
|
<div class="left-total-records">{{ selectedNumber }} Selected</div>
|
|
|
<div class="right-tools-btn">
|
|
|
@@ -246,7 +360,7 @@ defineExpose({
|
|
|
</div>
|
|
|
<vxe-grid
|
|
|
ref="tableRef"
|
|
|
- v-vloading="tableLoading"
|
|
|
+ v-vloading="tableLoadingTableData || tableLoadingColumn"
|
|
|
:height="props.height"
|
|
|
:style="{ border: 'none' }"
|
|
|
v-bind="bookingTable"
|
|
|
@@ -254,9 +368,9 @@ defineExpose({
|
|
|
@checkbox-all="handleCheckAllChange"
|
|
|
>
|
|
|
<!-- 空数据时的插槽 -->
|
|
|
- <template #suggestion>
|
|
|
+ <template #empty v-if="!tableLoadingTableData && bookingTable.data.length === 0">
|
|
|
<VEmpty>
|
|
|
- <template #default>
|
|
|
+ <template #suggestion>
|
|
|
<p style="color: var(--color-neutral-3)">
|
|
|
We support the following references number to find booking:
|
|
|
</p>
|
|
|
@@ -267,17 +381,8 @@ defineExpose({
|
|
|
</template>
|
|
|
</VEmpty>
|
|
|
</template>
|
|
|
- <!-- Transportation Mode字段的插槽 -->
|
|
|
- <template #mode>
|
|
|
- <div>
|
|
|
- <span class="font_family icon-icon_ocean_b" style="font-size: 24px"></span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <!-- Status字段的插槽 -->
|
|
|
- <template #status="{ row, column }">
|
|
|
- <VTag :type="row[column.field]">{{ row[column.field] }}</VTag>
|
|
|
- </template>
|
|
|
</vxe-grid>
|
|
|
+ <vxe-grid :height="10" ref="allTableRef" class="all-table" v-bind="allTable"> </vxe-grid>
|
|
|
<div class="bottom-pagination">
|
|
|
<div class="left-total-records">Total {{ pageInfo.total }}</div>
|
|
|
<div class="right-pagination">
|
|
|
@@ -289,12 +394,12 @@ defineExpose({
|
|
|
background
|
|
|
layout="sizes, prev, pager, next"
|
|
|
:total="pageInfo.total"
|
|
|
- @size-change="getTableData(false, true)"
|
|
|
- @current-change="getTableData(false, true)"
|
|
|
+ @size-change="getTableData(true)"
|
|
|
+ @current-change="getTableData(true)"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <DownloadDialog @export="exportTable" ref="downloadDialogRef" />
|
|
|
+ <DownloadDialog @export="getExportTableData" ref="downloadDialogRef" />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -331,4 +436,14 @@ defineExpose({
|
|
|
align-items: center;
|
|
|
}
|
|
|
}
|
|
|
+.booking-table {
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .all-table {
|
|
|
+ position: absolute;
|
|
|
+ top: -100000px;
|
|
|
+ width: 20px;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
AmandaG