added online and trigger
This commit is contained in:
@@ -86,6 +86,7 @@
|
||||
:columns="_columns"
|
||||
:data-source="data"
|
||||
v-bind="_props"
|
||||
:scroll="tableScroll"
|
||||
:pagination="false"
|
||||
@resizeColumn="handleResizeColumn"
|
||||
>
|
||||
@@ -289,24 +290,9 @@ import {
|
||||
availableFilterType,
|
||||
MapFilterOpToFaString
|
||||
} from '@core/components/BaseTable/hooks/filterOperator'
|
||||
//import { mapColumnTypeFilterToFilterType } from '@core/type/baseTable'
|
||||
//import { useElementSize } from '@vueuse/core'
|
||||
//import { ContentLoader } from 'vue-content-loader'
|
||||
//skeleton
|
||||
//const skeletonWidth = ref(null)
|
||||
/*const skeletonWidthSize = reactive(
|
||||
useElementSize(skeletonWidth, { width: 0, height: 0 }, { box: 'border-box' })
|
||||
)*/
|
||||
//const skeletonHeight = 357
|
||||
/*const skeletonHeight = ref(null)
|
||||
const skeletonHeightSize = reactive(
|
||||
useElementSize(skeletonHeight, { width: 0, height: 0 }, { box: 'border-box' })
|
||||
)*/
|
||||
/*
|
||||
watch(skeletonHeightSize, (v) => {
|
||||
console.log('ttt', v)
|
||||
})
|
||||
*/
|
||||
|
||||
/** Wide enough for dense action icon rows (e.g. customers); too-narrow fixed cells bleed into neighbors. */
|
||||
const DEFAULT_ACTION_WIDTH = 280
|
||||
|
||||
interface Props {
|
||||
bordered?: boolean
|
||||
@@ -328,7 +314,7 @@ const props = withDefaults(defineProps<Props>(), {
|
||||
driver: 'laravel-sql',
|
||||
mode: 'pro',
|
||||
columns: () => [],
|
||||
scroll: () => ({ x: true }), //y: '100%' //y: 600
|
||||
scroll: () => ({ x: true }),
|
||||
pageSize: () => [5, 10, 20, 50, 100],
|
||||
defaultPageLimit: 10,
|
||||
showPaginate: true,
|
||||
@@ -345,13 +331,30 @@ const filters = ref<Filter[]>([])
|
||||
const order = ref<'asc' | 'desc'>('asc')
|
||||
const orderColumnKey = ref<string | null>(null)
|
||||
const containerRef = ref()
|
||||
//const route = useRoute()
|
||||
const loading = ref<boolean>(false)
|
||||
const tableReady = ref(false)
|
||||
let callApiPromise: Promise<void> | null = null
|
||||
const _props = computed(() => {
|
||||
return omit(props, ['columns', 'pagination', 'dataSource'])
|
||||
return omit(props, ['columns', 'pagination', 'dataSource', 'scroll'])
|
||||
})
|
||||
|
||||
const tableScroll = computed(() => ({
|
||||
x: props.scroll?.x ?? true,
|
||||
...(props.scroll?.y != null ? { y: props.scroll.y } : {})
|
||||
}))
|
||||
|
||||
function isActionColumn(column: BaseTableColumn) {
|
||||
const rawIndex = column.dataIndex
|
||||
const dataIndex = Array.isArray(rawIndex) ? rawIndex.join('.') : String(rawIndex ?? '')
|
||||
const key = column.key != null ? String(column.key) : ''
|
||||
return (
|
||||
column.slot === 'action' ||
|
||||
key === 'action' ||
|
||||
key === 'row_action' ||
|
||||
dataIndex === 'action' ||
|
||||
dataIndex === 'row_action'
|
||||
)
|
||||
}
|
||||
const emit = defineEmits<{
|
||||
(e: 'register', data: BaseTableEmit): void
|
||||
}>()
|
||||
@@ -469,15 +472,17 @@ const _columns = computed(() => {
|
||||
if (!Object.hasOwn(column, 'align')) {
|
||||
column.align = 'center'
|
||||
}
|
||||
if (isActionColumn(column)) {
|
||||
if (!Object.hasOwn(column, 'fixed') || column.fixed == null) {
|
||||
column.fixed = 'right'
|
||||
}
|
||||
const w = Number(column.width)
|
||||
if (!Object.hasOwn(column, 'width') || column.width == null || !Number.isFinite(w) || w < 200) {
|
||||
column.width = DEFAULT_ACTION_WIDTH
|
||||
}
|
||||
}
|
||||
//@ts-ignore
|
||||
column.dataIndex = column.dataIndex.split('.')
|
||||
//if(isArray(column.dataIndex))
|
||||
/*if(!isArray(column.dataIndex)){
|
||||
}*/
|
||||
//column.dataIndex = column.dataIndex.split('.')
|
||||
/*if(){
|
||||
column.dataIndex=
|
||||
}*/
|
||||
column.dataIndex = String(column.dataIndex ?? '').split('.')
|
||||
})
|
||||
return cols
|
||||
})
|
||||
@@ -699,6 +704,19 @@ defineExpose({
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/* Fixed ops column must fully cover neighbors (RTL left / fixed-right) */
|
||||
.ant-table-cell-fix-right,
|
||||
.ant-table-cell-fix-right.ant-table-cell-fix-last-right {
|
||||
background: var(--admin-bg-elevated, var(--admin-bg-surface, #141414)) !important;
|
||||
}
|
||||
|
||||
html.is-dark & {
|
||||
.ant-table-cell-fix-right,
|
||||
.ant-table-cell-fix-right.ant-table-cell-fix-last-right {
|
||||
background: var(--admin-bg-elevated, #1f1f1f) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.table-footer {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
<!-- relative h-full-->
|
||||
<div class="scrollable-container" id="components-affix-demo-target" ref="containerRef">
|
||||
<!--- TODO remove AFFix -->
|
||||
<div class="table-toolbar shrink-0 mb-2">
|
||||
<AAffix :target="() => containerRef">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-center gap-1">
|
||||
@@ -84,10 +85,13 @@
|
||||
</div>
|
||||
</div>
|
||||
</AAffix>
|
||||
</div>
|
||||
<div class="table-body min-h-0 min-w-0 flex-1 overflow-auto">
|
||||
<ATable
|
||||
:columns="_columns"
|
||||
:data-source="data"
|
||||
v-bind="_props"
|
||||
:scroll="tableScroll"
|
||||
:pagination="false"
|
||||
@resizeColumn="handleResizeColumn"
|
||||
>
|
||||
@@ -100,9 +104,10 @@
|
||||
</template>
|
||||
<!-- <template #loading> sdfsdfsdfsd </template>-->
|
||||
</ATable>
|
||||
</div>
|
||||
<!-- absolute bottom-0 w-full-->
|
||||
<!-- absolute bottom-0-->
|
||||
<div class="flex items-center justify-between mt-5 w-full">
|
||||
<div class="table-footer flex items-center justify-between mt-5 w-full shrink-0">
|
||||
<span> {{ totalRecord }} مورد یافت شد </span>
|
||||
<div class="flex items-center gap-2 justify-between">
|
||||
<APagination
|
||||
@@ -296,24 +301,9 @@ import {
|
||||
availableFilterType,
|
||||
MapFilterOpToFaString
|
||||
} from '@core/components/BaseTableOld/hooks/filterOperator'
|
||||
//import { mapColumnTypeFilterToFilterType } from '@core/type/baseTable'
|
||||
//import { useElementSize } from '@vueuse/core'
|
||||
//import { ContentLoader } from 'vue-content-loader'
|
||||
//skeleton
|
||||
//const skeletonWidth = ref(null)
|
||||
/*const skeletonWidthSize = reactive(
|
||||
useElementSize(skeletonWidth, { width: 0, height: 0 }, { box: 'border-box' })
|
||||
)*/
|
||||
//const skeletonHeight = 357
|
||||
/*const skeletonHeight = ref(null)
|
||||
const skeletonHeightSize = reactive(
|
||||
useElementSize(skeletonHeight, { width: 0, height: 0 }, { box: 'border-box' })
|
||||
)*/
|
||||
/*
|
||||
watch(skeletonHeightSize, (v) => {
|
||||
console.log('ttt', v)
|
||||
})
|
||||
*/
|
||||
|
||||
/** Wide enough for dense action icon rows; too-narrow fixed cells bleed into neighbors. */
|
||||
const DEFAULT_ACTION_WIDTH = 280
|
||||
|
||||
interface Props {
|
||||
bordered?: boolean
|
||||
@@ -331,7 +321,7 @@ const props = withDefaults(defineProps<Props>(), {
|
||||
driver: 'laravel-sql',
|
||||
mode: 'pro',
|
||||
columns: () => [],
|
||||
scroll: () => ({ x: true }), //y: '100%' //y: 600
|
||||
scroll: () => ({ x: true }),
|
||||
pageSize: () => [5, 10, 20, 50, 100],
|
||||
defaultPageLimit: 10
|
||||
})
|
||||
@@ -345,11 +335,28 @@ const filters = ref<Filter[]>([])
|
||||
const order = ref<'asc' | 'desc'>('asc')
|
||||
const orderColumnKey = ref<string | null>(null)
|
||||
const containerRef = ref()
|
||||
//const route = useRoute()
|
||||
const loading = ref<boolean>(false)
|
||||
const _props = computed(() => {
|
||||
return omit(props, ['columns', 'pagination', 'dataSource'])
|
||||
return omit(props, ['columns', 'pagination', 'dataSource', 'scroll'])
|
||||
})
|
||||
|
||||
const tableScroll = computed(() => ({
|
||||
x: props.scroll?.x ?? true,
|
||||
...(props.scroll?.y != null ? { y: props.scroll.y } : {})
|
||||
}))
|
||||
|
||||
function isActionColumn(column: BaseTableColumn) {
|
||||
const rawIndex = column.dataIndex
|
||||
const dataIndex = Array.isArray(rawIndex) ? rawIndex.join('.') : String(rawIndex ?? '')
|
||||
const key = column.key != null ? String(column.key) : ''
|
||||
return (
|
||||
column.slot === 'action' ||
|
||||
key === 'action' ||
|
||||
key === 'row_action' ||
|
||||
dataIndex === 'action' ||
|
||||
dataIndex === 'row_action'
|
||||
)
|
||||
}
|
||||
const emit = defineEmits<{
|
||||
(e: 'register', data: BaseTableEmit): void
|
||||
}>()
|
||||
@@ -468,15 +475,17 @@ const _columns = computed(() => {
|
||||
if (!Object.hasOwn(column, 'align')) {
|
||||
column.align = 'center'
|
||||
}
|
||||
if (isActionColumn(column)) {
|
||||
if (!Object.hasOwn(column, 'fixed') || column.fixed == null) {
|
||||
column.fixed = 'right'
|
||||
}
|
||||
const w = Number(column.width)
|
||||
if (!Object.hasOwn(column, 'width') || column.width == null || !Number.isFinite(w) || w < 200) {
|
||||
column.width = DEFAULT_ACTION_WIDTH
|
||||
}
|
||||
}
|
||||
//@ts-ignore
|
||||
column.dataIndex = column.dataIndex.split('.')
|
||||
//if(isArray(column.dataIndex))
|
||||
/*if(!isArray(column.dataIndex)){
|
||||
}*/
|
||||
//column.dataIndex = column.dataIndex.split('.')
|
||||
/*if(){
|
||||
column.dataIndex=
|
||||
}*/
|
||||
column.dataIndex = String(column.dataIndex ?? '').split('.')
|
||||
})
|
||||
return cols
|
||||
})
|
||||
@@ -652,7 +661,6 @@ async function callApi() {
|
||||
onMounted(async () => {
|
||||
await callApi()
|
||||
emit('register', { reload })
|
||||
//console.log('router', route.query)
|
||||
})
|
||||
|
||||
defineExpose({
|
||||
@@ -666,11 +674,26 @@ defineExpose({
|
||||
.@{prefix} {
|
||||
@apply h-full max-w-full flex flex-col min-h-0;
|
||||
.scrollable-container {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
max-width: 100%;
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.table-body {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-x: auto;
|
||||
overflow-y: auto;
|
||||
min-width: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
.table-footer {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.ant-table-cell-fix-right,
|
||||
.ant-table-cell-fix-right.ant-table-cell-fix-last-right {
|
||||
background: var(--admin-bg-elevated, var(--admin-bg-surface, #141414)) !important;
|
||||
}
|
||||
.ant-table-wrapper {
|
||||
border: 1px solid var(--admin-border);
|
||||
|
||||
Reference in New Issue
Block a user