{"version":3,"file":"form-base-table2.mjs","names":[],"sources":["../../../../../../packages/components/form-base/src/form-base-table.vue"],"sourcesContent":["<script setup lang=\"ts\" name=\"form-base-table\">\nimport { computed, reactive, ref, watch } from 'vue'\nimport { useGlobalConfig } from '@pit-element-plus/components/config-provider'\nimport { formBaseTableEmits, formBaseTableProps } from './form-base-table'\nimport formBaseTableColumn from './form-base-table-column.vue'\nimport formBaseTableColumnVirtually from './form-base-table-column-virtually.vue'\nimport type { FormBaseColumns, FormBaseColumnsItem } from './form-base'\n\nconst props = defineProps(formBaseTableProps)\nconst emit = defineEmits(formBaseTableEmits)\nconst current = ref(null)\nconst dataTable = ref()\n\nconst defaultSort = ref({})\nconst orderArray: any = ref([])\nconst refreshTable = ref(true)\n\nconst tableHeadBackground = useGlobalConfig('tableHeadBackground')\nconst tableBackground = computed(() => {\n  if (tableHeadBackground.value) {\n    return { background: tableHeadBackground.value }\n  }\n  return {}\n})\n\ntype StateType = {\n  columns: FormBaseColumns\n}\n\nconst state = reactive<StateType>({\n  columns: [],\n})\n\nwatch(\n  () => props.columns,\n  (val) => {\n    Object.assign(state.columns, val)\n  },\n  {\n    deep: true,\n    immediate: true,\n  }\n)\n\nconst getColumnsExpand = computed(() => {\n  return state.columns.filter((item) => item.expand)\n})\n\nconst getColumns = computed(() => {\n  return state.columns.filter((item) => !item.expand)\n})\n\nconst handleHeaderCellClass = ({ column }: any) => {\n  orderArray.value!.forEach((element: any) => {\n    if (column.property === element.prop) {\n      column.order = element.order\n    }\n  })\n}\n\nconst handleSortChange = ({ prop, order }: any) => {\n  if (order) {\n    //参与排序\n    // let flagIsHave = false;\n    orderArray.value = orderArray.value!.filter(\n      (item: any) => item.prop !== prop\n    )\n    // orderArray.value!.forEach((element: any) => {\n    //   if (element.prop === prop) {\n    //     element.order = order;\n    //     flagIsHave = true;\n    //   }\n    // });\n    orderArray.value!.push({\n      prop,\n      order,\n    })\n  } else {\n    //不参与排序\n    orderArray.value! = orderArray.value!.filter((element: any) => {\n      return element.prop !== prop\n    })\n  }\n  emit('table-sort-change', orderArray.value)\n}\n\nconst handleCurrentChangePage = (val: number) => {\n  emit('current-change', val)\n}\n\nconst handleSizeChange = (val: number) => {\n  emit('size-change', val)\n}\n\nconst handleCurrentChange = (row: any) => {\n  // todo 再次点击选中的取消\n  if (!current.value) {\n    current.value = row\n  } else {\n    current.value = null\n  }\n  if (props.isVirtuallyTable) {\n    emit('table-current-change', row.row)\n  } else {\n    emit('table-current-change', row)\n  }\n}\n\nconst handleRowDblclick = (row: any) => {\n  if (props.isVirtuallyTable) {\n    emit('table-row-dblclick', row.row)\n  } else {\n    emit('table-row-dblclick', row)\n  }\n}\n\nconst handleSelectionChange = (row: any) => {\n  emit('table-selection-change', row)\n}\n\nconst handleClickInfo = (columns: FormBaseColumnsItem, row: any) => {\n  emit('click-info', columns, row)\n}\n\nconst tableLoadFn = (\n  row: any,\n  treeNode: unknown,\n  resolve: (date: any[]) => void\n) => {\n  if (props.tableLoad) {\n    props.tableLoad(row).then((res: any) => {\n      resolve(res)\n    })\n  }\n}\n\nconst doLayout = () => {\n  dataTable.value!.doLayout()\n}\n\nconst clearSelection = () => {\n  dataTable.value!.clearSelection()\n}\n\nconst setCurrentRow = (row: any) => {\n  dataTable.value!.setCurrentRow(row)\n}\n\nconst toggleRowSelection = (row: any, selected: boolean) => {\n  dataTable.value!.toggleRowSelection(row, selected)\n}\n\nconst setRefreshTable = (val: boolean) => {\n  refreshTable.value = val\n}\n\nconst dataTableRef = () => {\n  return dataTable.value\n}\n\ndefineExpose({\n  setRefreshTable,\n  doLayout,\n  clearSelection,\n  setCurrentRow,\n  toggleRowSelection,\n  dataTableRef,\n})\n</script>\n\n<template>\n  <div class=\"el-form-base-main\">\n    <div v-if=\"refreshTable\" class=\"el-form-base-table\">\n      <slot name=\"tableWarp\">\n        <!-- 多选表格 -->\n        <el-table\n          v-if=\"props.rowSingle && !props.tableLazy && !props.isVirtuallyTable\"\n          ref=\"dataTable\"\n          :data=\"props.tableData\"\n          :border=\"true\"\n          :row-key=\"props.rowKey\"\n          :span-method=\"props.spanMethod\"\n          :default-expand-all=\"props.defaultExpandAll\"\n          :header-cell-style=\"tableBackground\"\n          :tree-props=\"{ children: 'children', hasChildren: 'hasChildren2' }\"\n          style=\"width: 100%\"\n          :default-sort=\"defaultSort\"\n          :header-cell-class-name=\"handleHeaderCellClass\"\n          :row-class-name=\"props.rowClassName\"\n          :cell-class-name=\"props.cellClassName\"\n          height=\"100%\"\n          @sort-change=\"handleSortChange\"\n          @selection-change=\"handleSelectionChange\"\n          @row-dblclick=\"handleRowDblclick\"\n        >\n          <form-base-table-column\n            v-for=\"(item, index) in getColumnsExpand\"\n            :key=\"index\"\n            :column=\"item as any\"\n            :columnsData=\"getColumnsExpand\"\n            @click-info=\"handleClickInfo\"\n          />\n          <el-table-column\n            type=\"selection\"\n            :align=\"props.selectionAlign\"\n            :width=\"props.selectionWidth\"\n            :fixed=\"props.selectionFixed\"\n          />\n          <el-table-column\n            v-if=\"props.noTableIndex\"\n            type=\"index\"\n            :align=\"props.indexAlign\"\n            :width=\"props.indexWidth\"\n            label=\"序号\"\n            :fixed=\"props.indexFixed\"\n          />\n          <form-base-table-column\n            v-for=\"(item, index) in getColumns\"\n            :key=\"index\"\n            :column=\"item as any\"\n            :columnsData=\"getColumns\"\n            @click-info=\"handleClickInfo\"\n          />\n          <template #empty>\n            <el-empty description=\"暂无数据\" :image-size=\"120\" />\n          </template>\n        </el-table>\n        <!-- 单选表格 -->\n        <el-table\n          v-if=\"!props.rowSingle && !props.isVirtuallyTable && !props.tableLazy\"\n          ref=\"dataTable\"\n          :data=\"props.tableData\"\n          :border=\"true\"\n          :row-key=\"props.rowKey\"\n          :span-method=\"props.spanMethod\"\n          :default-expand-all=\"props.defaultExpandAll\"\n          highlight-current-row\n          :header-cell-style=\"tableBackground\"\n          :tree-props=\"{ children: 'children', hasChildren: 'hasChildren2' }\"\n          style=\"width: 100%\"\n          :default-sort=\"defaultSort\"\n          :header-cell-class-name=\"handleHeaderCellClass\"\n          height=\"100%\"\n          :row-class-name=\"props.rowClassName\"\n          :cell-class-name=\"props.cellClassName\"\n          @sort-change=\"handleSortChange\"\n          @current-change=\"handleCurrentChange\"\n          @row-dblclick=\"handleRowDblclick\"\n        >\n          <form-base-table-column\n            v-for=\"(item, index) in getColumnsExpand\"\n            :key=\"index\"\n            :column=\"item as any\"\n            :columnsData=\"getColumnsExpand\"\n            @click-info=\"handleClickInfo\"\n          />\n          <el-table-column\n            v-if=\"props.noTableIndex\"\n            type=\"index\"\n            :align=\"props.indexAlign\"\n            :width=\"props.indexWidth\"\n            label=\"序号\"\n            :fixed=\"props.indexFixed\"\n          />\n          <form-base-table-column\n            v-for=\"(item, index) in getColumns\"\n            :key=\"index\"\n            :column=\"item as any\"\n            :columnsData=\"getColumns\"\n            @click-info=\"handleClickInfo\"\n          />\n          <template #empty>\n            <el-empty description=\"暂无数据\" :image-size=\"120\" />\n          </template>\n        </el-table>\n        <!-- 单选懒加载表格 -->\n        <el-table\n          v-if=\"!props.rowSingle && props.tableLazy\"\n          ref=\"dataTable\"\n          :data=\"props.tableData\"\n          height=\"100%\"\n          :border=\"true\"\n          style=\"width: 100%\"\n          :row-key=\"props.rowKey\"\n          :span-method=\"props.spanMethod\"\n          :header-cell-style=\"tableBackground\"\n          highlight-current-row\n          :lazy=\"props.tableLazy\"\n          :load=\"tableLoadFn\"\n          :default-sort=\"defaultSort\"\n          :header-cell-class-name=\"handleHeaderCellClass\"\n          :tree-props=\"{ children: 'children', hasChildren: 'hasChildren' }\"\n          :row-class-name=\"props.rowClassName\"\n          :cell-class-name=\"props.cellClassName\"\n          @sort-change=\"handleSortChange\"\n          @current-change=\"handleCurrentChange\"\n          @row-dblclick=\"handleRowDblclick\"\n        >\n          <el-table-column\n            v-if=\"props.noTableIndex\"\n            type=\"index\"\n            :align=\"props.indexAlign\"\n            :width=\"props.indexWidth\"\n            label=\"序号\"\n            :fixed=\"props.indexFixed\"\n          />\n          <form-base-table-column\n            v-for=\"item in state.columns\"\n            :key=\"item.prop\"\n            :column=\"item as any\"\n            :columnsData=\"state.columns\"\n            @click-info=\"handleClickInfo\"\n          />\n          <template #empty>\n            <el-empty description=\"暂无数据\" :image-size=\"120\" />\n          </template>\n        </el-table>\n        <!-- 多选懒加载表格 -->\n        <el-table\n          v-if=\"props.rowSingle && props.tableLazy\"\n          ref=\"dataTable\"\n          :data=\"props.tableData\"\n          height=\"100%\"\n          :border=\"true\"\n          style=\"width: 100%\"\n          :row-key=\"props.rowKey\"\n          :span-method=\"props.spanMethod\"\n          :header-cell-style=\"tableBackground\"\n          highlight-current-row\n          :lazy=\"props.tableLazy\"\n          :load=\"tableLoadFn\"\n          :default-sort=\"defaultSort\"\n          :header-cell-class-name=\"handleHeaderCellClass\"\n          :tree-props=\"{ children: 'children', hasChildren: 'hasChildren' }\"\n          :row-class-name=\"props.rowClassName\"\n          :cell-class-name=\"props.cellClassName\"\n          @sort-change=\"handleSortChange\"\n          @selection-change=\"handleSelectionChange\"\n          @row-dblclick=\"handleRowDblclick\"\n        >\n          <el-table-column\n            type=\"selection\"\n            :align=\"props.selectionAlign\"\n            :width=\"props.selectionWidth\"\n            :fixed=\"props.selectionFixed\"\n          />\n          <el-table-column\n            v-if=\"props.noTableIndex\"\n            type=\"index\"\n            :align=\"props.indexAlign\"\n            :width=\"props.indexWidth\"\n            label=\"序号\"\n            :fixed=\"props.indexFixed\"\n          />\n          <form-base-table-column\n            v-for=\"item in state.columns\"\n            :key=\"item.prop\"\n            :column=\"item as any\"\n            :columnsData=\"state.columns\"\n            @click-info=\"handleClickInfo\"\n          />\n          <template #empty>\n            <el-empty description=\"暂无数据\" :image-size=\"120\" />\n          </template>\n        </el-table>\n        <!-- 单选虚拟化表格 -->\n        <VxeTable\n          v-if=\"!props.rowSingle && !props.tableLazy && props.isVirtuallyTable\"\n          ref=\"dataTable\"\n          show-overflow\n          border\n          height=\"100%\"\n          :row-id=\"rowKey\"\n          :row-config=\"{\n            isHover: true,\n            isCurrent: true,\n            keyField: rowKey,\n          }\"\n          :column-config=\"{ resizable: true }\"\n          :tree-config=\"{\n            transform: true,\n            rowField: rowKey,\n            parentField: 'parentId',\n            expandAll: props.defaultExpandAll,\n          }\"\n          :scroll-y=\"{ gt: 20 }\"\n          :data=\"props.tableData\"\n          @cell-dblclick=\"handleRowDblclick\"\n          @cell-click=\"handleCurrentChange\"\n        >\n          <VxeColumn\n            v-if=\"props.noTableIndex\"\n            type=\"seq\"\n            title=\"序号\"\n            align=\"center\"\n            :width=\"props.indexWidth\"\n          />\n          <form-base-table-column-virtually\n            v-for=\"item in state.columns\"\n            :key=\"item.prop\"\n            :column=\"item as any\"\n            :columnsData=\"state.columns\"\n            @click-info=\"handleClickInfo\"\n          />\n        </VxeTable>\n        <!-- 多选虚拟化表格 -->\n        <div\n          v-if=\"props.rowSingle && !props.tableLazy && props.isVirtuallyTable\"\n        >\n          单选虚拟化表格\n        </div>\n      </slot>\n    </div>\n    <div v-if=\"props.noPagination\" class=\"el-form-base-pagination\">\n      <div class=\"el-form-base-pagination-right\">\n        <el-pagination\n          background\n          :current-page=\"props.pagination.pageNumber\"\n          :page-sizes=\"[10, 20, 30, 50, 100]\"\n          :page-size=\"props.pagination.pageSize\"\n          layout=\"total, sizes, prev, pager, next\"\n          :total=\"props.pagination.total\"\n          @size-change=\"handleSizeChange\"\n          @current-change=\"handleCurrentChangePage\"\n        />\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":""}