|
|
@@ -1,74 +1,126 @@
|
|
|
<template>
|
|
|
- <vxe-table
|
|
|
- :data="data"
|
|
|
- :ref="setMainTableRef"
|
|
|
- border
|
|
|
- :export-config="{}"
|
|
|
- height="auto"
|
|
|
- auto-resize
|
|
|
- sync-resize
|
|
|
- :column-config="{resizable: true}"
|
|
|
- style="{width: 100%}"
|
|
|
- :row-config="{height: 48 , isCurrent: true,isHover:true, useKey: true} "
|
|
|
- :scroll-x="{enabled: false}"
|
|
|
- :scroll-y="{gt: 0 ,enabled: true}"
|
|
|
- show-overflow
|
|
|
- >
|
|
|
- <VxeColumn
|
|
|
- v-for="(item,index) in columns"
|
|
|
- v-bind="columnBind(item)"
|
|
|
- >
|
|
|
- <template
|
|
|
- #header
|
|
|
- v-if="props.store.props.isEditor">
|
|
|
- <el-input
|
|
|
- v-model="columns[index].title"
|
|
|
- @focus="handleFocus(columns?.[index].field)"
|
|
|
- />
|
|
|
- </template>
|
|
|
- <template
|
|
|
- #default="{row , $rowIndex}"
|
|
|
- v-if="item.func && item.func.default"
|
|
|
- >
|
|
|
- <Component
|
|
|
- :is="handleTableColumnDefault(row, $rowIndex, item)"
|
|
|
- />
|
|
|
- </template>
|
|
|
- </VxeColumn>
|
|
|
- </vxe-table>
|
|
|
+ <vxe-grid v-bind="tableGridComputed" :ref="setMainTableRef">
|
|
|
+
|
|
|
+ </vxe-grid>
|
|
|
+ <!-- <vxe-table-->
|
|
|
+ <!-- :data="data"-->
|
|
|
+ <!-- :ref="setMainTableRef"-->
|
|
|
+ <!-- border-->
|
|
|
+ <!-- :export-config="{}"-->
|
|
|
+ <!-- height="auto"-->
|
|
|
+ <!-- auto-resize-->
|
|
|
+ <!-- sync-resize-->
|
|
|
+ <!-- :column-config="{resizable: true}"-->
|
|
|
+ <!-- style="{width: 100%}"-->
|
|
|
+ <!-- :row-config="{height: 48 , isCurrent: true,isHover:true, useKey: true} "-->
|
|
|
+ <!-- :scroll-x="{enabled: false}"-->
|
|
|
+ <!-- :scroll-y="{gt: 0 ,enabled: true}"-->
|
|
|
+ <!-- show-overflow-->
|
|
|
+ <!-- v-bind="tableBind"-->
|
|
|
+ <!-- >-->
|
|
|
+ <!-- <VxeColumn-->
|
|
|
+ <!-- v-for="(item,index) in props.columns"-->
|
|
|
+ <!-- v-bind="columnBind(item)"-->
|
|
|
+ <!-- >-->
|
|
|
+ <!-- <template-->
|
|
|
+ <!-- #header-->
|
|
|
+ <!-- v-if="props.store.props.isEditor">-->
|
|
|
+ <!-- <el-input-->
|
|
|
+ <!-- v-model="columns[index].title"-->
|
|
|
+ <!-- @focus="handleFocus(columns?.[index].field)"-->
|
|
|
+ <!-- />-->
|
|
|
+ <!-- </template>-->
|
|
|
+ <!-- <template-->
|
|
|
+ <!-- #default="{row , $rowIndex}"-->
|
|
|
+ <!-- v-if="item!.func && item!.func.default"-->
|
|
|
+ <!-- >-->
|
|
|
+ <!-- <Component-->
|
|
|
+ <!-- :is="handleTableColumnDefault?.(row, $rowIndex, item)"-->
|
|
|
+ <!-- />-->
|
|
|
+ <!-- </template>-->
|
|
|
+ <!-- </VxeColumn>-->
|
|
|
+ <!-- </vxe-table>-->
|
|
|
</template>
|
|
|
|
|
|
-<script setup lang="ts">
|
|
|
-import {PropType} from "vue";
|
|
|
-import {PageStore} from "@/views/data-base/page-editor-help-v2/page-help-v2";
|
|
|
+<script setup lang="tsx">
|
|
|
+import {ComputedRef} from "vue";
|
|
|
+import {PageHelpTableName, PageStore} from "@/views/data-base/page-editor-help-v2/page-help-v2";
|
|
|
import XEUtils from "xe-utils";
|
|
|
+import {VxeGridProps} from 'vxe-table'
|
|
|
+import {VxeGridPropTypes,} from "vxe-pc-ui/types/components/grid";
|
|
|
+import {ElInput} from 'element-plus'
|
|
|
|
|
|
-const props = defineProps({
|
|
|
- data: Array,
|
|
|
- columns: Array,
|
|
|
- handleTableColumnDefault: {
|
|
|
- type: Function as PropType<(...val: any[]) => void>
|
|
|
- },
|
|
|
- store: {
|
|
|
- type: Object as PropType<PageStore>,
|
|
|
- },
|
|
|
- tableRefName: {
|
|
|
- type: String
|
|
|
+const props = defineProps<{
|
|
|
+ data: any[];
|
|
|
+ columns: any[];
|
|
|
+ store: PageStore,
|
|
|
+ tableRefName: PageHelpTableName,
|
|
|
+ tableBind: any,
|
|
|
+ getSlotsData: (code: string) => any
|
|
|
+}>()
|
|
|
+
|
|
|
+function handleSlots(slots, tmp) {
|
|
|
+ for (let key in slots) {
|
|
|
+ tmp.slots[key] = ({row, rowIndex}) => {
|
|
|
+ const code = slots[key]
|
|
|
+ return props.getSlotsData(row, rowIndex, code)
|
|
|
+ }
|
|
|
}
|
|
|
+}
|
|
|
+
|
|
|
+// @ts-ignore
|
|
|
+const columnBindComputed: ComputedRef<VxeGridPropTypes.Columns> = computed(() => {
|
|
|
+ // @ts-ignore
|
|
|
+ return XEUtils.eachAndReturnList(props!.columns, (item, index) => {
|
|
|
+ const {func, slots, ...temp} = item
|
|
|
+
|
|
|
+ let tmp: any = {...temp, slots: {}}
|
|
|
+ if (props.store?.props.isEditor) {
|
|
|
+ tmp.slots.header = () => {
|
|
|
+ return <ElInput
|
|
|
+ modelValue={props?.columns[index]?.title}
|
|
|
+ onUpdate:modelValue={(value) => {
|
|
|
+ props.columns[index].title = value
|
|
|
+ }}
|
|
|
+ onFocus={() => handleFocus(props.columns?.[index].field)}
|
|
|
+ />
|
|
|
+ }
|
|
|
+ }
|
|
|
+ handleSlots(slots, tmp)
|
|
|
+ return tmp
|
|
|
+ });
|
|
|
+
|
|
|
})
|
|
|
|
|
|
-const columnBind = (item) => {
|
|
|
- const {func, ...temp} = item
|
|
|
- return XEUtils.clone(temp, true)
|
|
|
-}
|
|
|
+// @ts-ignore
|
|
|
+const tableGridComputed: ComputedRef<VxeGridProps> = computed(() => {
|
|
|
+ console.log(columnBindComputed.value)
|
|
|
+ return {
|
|
|
+ data: props.data,
|
|
|
+ columns: columnBindComputed.value,
|
|
|
+ expandConfig: {},
|
|
|
+ height: 'auto',
|
|
|
+ autoResize: true,
|
|
|
+ syncResize: false,
|
|
|
+ columnConfig: {resizable: true},
|
|
|
+ style: {
|
|
|
+ width: '100%',
|
|
|
+ },
|
|
|
+ rowConfig: {height: 48, isCurrent: true, isHover: true, useKey: true},
|
|
|
+ scrollX: {enabled: false},
|
|
|
+ scrollY: {gt: 0, enabled: true},
|
|
|
+ showOverflow: true,
|
|
|
+ ...props.tableBind
|
|
|
+ }
|
|
|
+})
|
|
|
|
|
|
-function setMainTableRef(el) {
|
|
|
+function setMainTableRef(el: any) {
|
|
|
if (typeof props.store !== 'undefined') {
|
|
|
props.store[props.tableRefName].value = el
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-function handleFocus(field) {
|
|
|
+function handleFocus(field: string) {
|
|
|
if (typeof props.store !== 'undefined') {
|
|
|
props.store!.mainTableRef.value.scrollToColumn(field)
|
|
|
}
|
