@seemusic/ui-components/lib/components/SopBasicTable/SopBasicTable.mjs.map

A Vue 3 UI Library. Uses Composable.

{"version":3,"file":"SopBasicTable.mjs","sources":["../../../src/components/SopBasicTable/SopBasicTable.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { defineComponent, ref } from 'vue';\nimport { ElTable, ElTableColumn } from 'element-plus';\nimport { Icon } from '@iconify/vue';\nimport EditTableCell from './EditTableCell.vue';\nimport { SopPagination } from '../SopPagination';\nimport { extend } from '../../utils';\nimport type { PropType, VNode } from 'vue';\nimport type { Column, PaginationProps } from 'element-plus';\nimport type { Recordable } from '../../shims';\n\nexport type Mutable<Type> = {\n  -readonly [Key in keyof Type]: Type[Key];\n};\n\nexport type ComponentsType = 'ElInput' |\n  'ElInputNumber' |\n  'ElSelect' |\n  'ElSwitch' |\n  'ElTimeSelect' |\n  'ElTimePicker' |\n  'ElSelectV2' |\n  'ElDatePicker' |\n  'ElCascader'\n\nexport interface TableColumn extends Omit<Column, 'width'> {\n  prop?: string\n  customRender?: string\n  // custom 值等于 render 时传入 render 生效，否则它的值就被视为 slot\n  render?: (scope: Recordable) => VNode\n  // 表头的名称\n  label?: string\n  // cell 的类型\n  type?: 'index' | 'selection' | 'expand'\n  // cell 的宽度\n  width?: string | number\n  // 当 prop 对应的值为空时，则显示此内容\n  placeholder?: string\n\n  // 表格编辑开关\n  editable?: boolean\n  // 编辑行\n  editRow?: boolean\n  // 编辑列\n  editColumn?: boolean\n  editColumnScheduler?: () => Promise<boolean>\n  // 是否必填\n  editRule?: boolean\n  editComponent?: ComponentsType\n  editComponentProps?: Recordable\n}\n\nexport interface TableConfig {\n  // 是否开启分页\n  isPagination?: boolean\n  pagination: Partial<Mutable<PaginationProps>>\n}\n\nexport default defineComponent({\n  name: 'SopBasicTable',\n  components: { ElTable, ElTableColumn, EditTableCell },\n  props: {\n    columns: {\n      type: Object as PropType<TableColumn[]>,\n      required: true\n    },\n    data: {\n      type: Array as PropType<Recordable[]>,\n      required: true\n    },\n    config: {\n      type: Object as PropType<TableConfig>,\n      default: () => {\n        return {\n          isPagination: true,\n        };\n      }\n    }\n  },\n  emits: ['edit-column-change', 'current-change', 'size-change'],\n  setup(props, { attrs, slots, emit, expose }) {\n    const tableRef = ref<InstanceType<typeof ElTable> | null>(null);\n    const editRowIndex = ref<number | null>(null);\n    const isCancelEditRow = ref(false);\n\n    const cancelEdit = () => isCancelEditRow.value = true;\n    const getEditRowIndex = () => editRowIndex.value;\n\n    /**\n     * 设置当前被编辑行的索引\n     */\n    function setEditRowIndex(idx: number | number) {\n      editRowIndex.value = idx;\n      // !防止用户频繁调用 cancelEdit 方法\n      isCancelEditRow.value = false;\n    }\n\n    const headerSlot = slots.header ? { header: (scope: Recordable) => slots.header?.(scope) } : {};\n\n    /**\n     * 默认要被渲染的 column\n     */\n    function getDefaultColumn(column: TableColumn) {\n      return <ElTableColumn {...column}>\n        {\n          extend(\n            { default: (scope: Recordable) => slots.default?.(scope) },\n            headerSlot\n          )\n        }\n      </ElTableColumn>;\n    }\n\n    /**\n     * 给带有 editable 的 header 增加编辑 icon\n     */\n    function editHeaderSlot(column: TableColumn) {\n      if (column.editable) {\n        return {\n          header: ({ column }: Recordable) => {\n            return (\n              <>\n                <span>{column.label}</span>\n                <Icon icon='solar:pen-2-outline' />\n              </>\n            );\n          }\n        };\n      }\n      return {};\n    }\n\n    /**\n     * 编辑表格 column\n     */\n    function renderEditCellColumn(column: TableColumn) {\n      return <ElTableColumn {...column}>\n        {\n          extend(\n            {\n              default: (scope: Recordable) => {\n                if (column.editable) {\n                  return (\n                    <EditTableCell\n                      column={column}\n                      scope={scope}\n                      isCancelEditRow={isCancelEditRow.value}\n                      isOpenEdit={scope.$index === editRowIndex.value}\n                      onEdit-column-change={(val: any) => onEditChange(val, scope, column)}\n                      onCancel-edit-row-state-change={() => isCancelEditRow.value = false}\n                    />\n                  );\n                } else {\n                  slots.default?.(scope);\n                }\n              }\n            },\n            editHeaderSlot(column)\n          )\n        }\n      </ElTableColumn>;\n    }\n\n    /**\n     * 单元格 change event\n     */\n    function onEditChange(val: any, scope: Recordable, column: TableColumn) {\n      const { row } = scope;\n      row[column.prop as string] = val;\n      emit('edit-column-change', scope);\n    }\n\n    /**\n     * slot or render Column\n     */\n    function renderCustomColumn(column: TableColumn) {\n      if (column.customRender != 'render') {\n        return <ElTableColumn {...column}>\n          {\n            extend(\n              { default: (scope: Recordable) => slots[column.customRender as string]?.(scope) },\n              headerSlot\n            )\n          }\n        </ElTableColumn>;\n      } else {\n        return <ElTableColumn {...column}>\n          {\n            extend(\n              { default: (scope: Recordable) => column.render?.(scope) },\n              headerSlot\n            )\n          }\n        </ElTableColumn>;\n      }\n    }\n\n    /**\n     * 根据不同情况处理 tableColumn\n     */\n    function renderColumn(column: TableColumn) {\n      if (!Object.keys(column).includes('formatter')) {\n        column['formatter'] = (row: Recordable, _: TableColumn, cellValue: any) => {\n          return cellValue ? cellValue : (column.placeholder || '-');\n        };\n      }\n\n      switch(column.type) {\n        case 'index':\n        case 'selection':\n          return getDefaultColumn(column);\n        // 表格展开 expand 插槽\n        case 'expand':\n          return <ElTableColumn {...column}>\n            {\n              extend(\n                { default: (scope: Recordable) => slots.expand?.(scope) },\n                headerSlot\n              )\n            }\n          </ElTableColumn>;\n      }\n\n      // render-header\n      if (column.renderHeader && typeof column.renderHeader === 'function') {\n        {\n          extend(\n            { default: (scope: Recordable) => slots.default?.(scope) },\n            { header: (scope: Recordable) => column.renderHeader(scope) }\n          );\n        }\n      }\n\n      // render 或 slot\n      if (column.customRender) {\n        return renderCustomColumn(column);\n      }\n\n      // 编辑表格\n      if (column.editable) {\n        return renderEditCellColumn(column);\n      }\n\n      // 其他处理\n      return getDefaultColumn(column);\n    }\n\n\n    expose({\n      tableRef,\n      setEditRowIndex,\n      getEditRowIndex,\n      cancelEdit,\n    });\n    return () => (\n      <div class=\"basic-table\">\n        <ElTable\n          ref={tableRef}\n          class='basic-table'\n          border\n          stripe\n          data={props.data}\n          {...attrs}\n        >\n          {\n            props.columns\n              && props.columns.length\n              && props.columns.map((column) => renderColumn(column))\n          }\n        </ElTable>\n\n        {\n          props.config\n            && props.config.isPagination\n            && <SopPagination\n              {...props.config.pagination}\n              onCurrent-change={(pageNum: number) => emit('current-change', pageNum)}\n              onSize-change={(sizeNum: number) => emit('size-change', sizeNum)}\n            />\n        }\n      </div>\n    );\n  }\n});\n"],"names":["_isSlot","s","Object","prototype","toString","call","_isVNode","defineComponent","name","components","ElTable","ElTableColumn","EditTableCell","props","columns","type","required","data","Array","config","default","isPagination","emits","setup","attrs","slots","emit","expose","tableRef","ref","editRowIndex","isCancelEditRow","cancelEdit","value","getEditRowIndex","setEditRowIndex","idx","headerSlot","header","scope","getDefaultColumn","column","_slot","_createVNode","extend","editHeaderSlot","editable","_Fragment","label","Icon","renderEditCellColumn","_slot2","$index","val","onEditChange","onCancel-edit-row-state-change","row","prop","renderCustomColumn","customRender","_slot3","_slot4","render","renderColumn","_slot5","keys","includes","_","cellValue","placeholder","expand","renderHeader","_mergeProps","length","map","SopPagination","pagination","pageNum","sizeNum"],"mappings":"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"}