| 提交 | 用户 | age | ||
| 3f6920 | 1 | <script lang="tsx"> |
| dccc8f | 2 | import { fileListProps } from '../props'; |
| bab28a | 3 | import { isFunction, isDef } from '@/utils/is'; |
| X | 4 | import { useSortable } from '@/hooks/web/useSortable'; |
| 5 | import { useModalContext } from '@/components/Modal/src/hooks/useModalContext'; | |
| beed7f | 6 | import { defineComponent, CSSProperties, watch, nextTick, ref, onMounted } from 'vue'; |
| b28a46 | 7 | import { FileBasicColumn } from '../types/typing'; |
| 3f6920 | 8 | |
| V | 9 | export default defineComponent({ |
| 10 | name: 'FileList', | |
| 11 | props: fileListProps, | |
| beed7f | 12 | setup(props, { emit }) { |
| 3f6920 | 13 | const modalFn = useModalContext(); |
| beed7f | 14 | const sortableContainer = ref<HTMLTableSectionElement>(); |
| B | 15 | |
| 3f6920 | 16 | watch( |
| V | 17 | () => props.dataSource, |
| 18 | () => { | |
| 19 | nextTick(() => { | |
| 20 | modalFn?.redoModalHeight?.(); | |
| 21 | }); | |
| 56a966 | 22 | }, |
| 3f6920 | 23 | ); |
| beed7f | 24 | |
| B | 25 | if (props.openDrag) { |
| 26 | onMounted(() => | |
| 27 | useSortable(sortableContainer, { | |
| 28 | ...props.dragOptions, | |
| 29 | onEnd: ({ oldIndex, newIndex }) => { | |
| 30 | // position unchanged | |
| 31 | if (oldIndex === newIndex) { | |
| 32 | return; | |
| 33 | } | |
| 34 | const { onAfterEnd } = props.dragOptions; | |
| 35 | ||
| 36 | if (isDef(oldIndex) && isDef(newIndex)) { | |
| 37 | const data = [...props.dataSource]; | |
| 38 | ||
| 39 | const [oldItem] = data.splice(oldIndex, 1); | |
| 40 | data.splice(newIndex, 0, oldItem); | |
| 41 | ||
| 42 | nextTick(() => { | |
| 43 | emit('update:dataSource', data); | |
| 44 | ||
| 45 | isFunction(onAfterEnd) && onAfterEnd(data); | |
| 46 | }); | |
| 47 | } | |
| 48 | }, | |
| 49 | }).initSortable(), | |
| 50 | ); | |
| 51 | } | |
| 52 | ||
| 3f6920 | 53 | return () => { |
| V | 54 | const { columns, actionColumn, dataSource } = props; |
| b28a46 | 55 | let columnList: FileBasicColumn[]; |
| 87541d | 56 | columnList = ( |
| X | 57 | actionColumn ? [...columns, actionColumn] : [...columns] |
| 58 | ) as FileBasicColumn[]; | |
| 59 | ||
| 3f6920 | 60 | return ( |
| e7fbd7 | 61 | // x scrollbar |
| B | 62 | <div class="overflow-x-auto"> |
| 63 | <table class="file-table"> | |
| 64 | <colgroup> | |
| 3f6920 | 65 | {columnList.map((item) => { |
| e7fbd7 | 66 | const { width = 0, dataIndex } = item; |
| B | 67 | const style: CSSProperties = { |
| 68 | width: `${width}px`, | |
| 69 | minWidth: `${width}px`, | |
| 70 | }; | |
| 71 | return <col style={width ? style : {}} key={dataIndex} />; | |
| 72 | })} | |
| 73 | </colgroup> | |
| 74 | <thead> | |
| 75 | <tr class="file-table-tr"> | |
| 76 | {columnList.map((item) => { | |
| 77 | const { title = '', align = 'center', dataIndex } = item; | |
| 78 | return ( | |
| 79 | <th class={['file-table-th', align]} key={dataIndex}> | |
| 80 | {title} | |
| 81 | </th> | |
| 82 | ); | |
| 83 | })} | |
| 84 | </tr> | |
| 85 | </thead> | |
| beed7f | 86 | <tbody ref={sortableContainer}> |
| e7fbd7 | 87 | {dataSource.map((record = {}, index) => { |
| 3f6920 | 88 | return ( |
| e7fbd7 | 89 | <tr class="file-table-tr" key={`${index + record.name || ''}`}> |
| B | 90 | {columnList.map((item) => { |
| 91 | const { dataIndex = '', customRender, align = 'center' } = item; | |
| 92 | const render = customRender && isFunction(customRender); | |
| 93 | return ( | |
| 94 | <td class={['file-table-td break-all', align]} key={dataIndex}> | |
| 95 | {render | |
| 96 | ? customRender?.({ text: record[dataIndex], record }) | |
| 97 | : record[dataIndex]} | |
| 98 | </td> | |
| 99 | ); | |
| 100 | })} | |
| 101 | </tr> | |
| 3f6920 | 102 | ); |
| V | 103 | })} |
| e7fbd7 | 104 | </tbody> |
| B | 105 | </table> |
| 106 | </div> | |
| 3f6920 | 107 | ); |
| V | 108 | }; |
| 109 | }, | |
| 110 | }); | |
| 111 | </script> | |
| 112 | <style lang="less"> | |
| 113 | .file-table { | |
| 114 | width: 100%; | |
| 115 | border-collapse: collapse; | |
| 116 | ||
| 117 | .center { | |
| 118 | text-align: center; | |
| 119 | } | |
| 120 | ||
| 121 | .left { | |
| 122 | text-align: left; | |
| 123 | } | |
| 124 | ||
| 125 | .right { | |
| 126 | text-align: right; | |
| 127 | } | |
| 128 | ||
| 129 | &-th, | |
| 130 | &-td { | |
| 131 | padding: 12px 8px; | |
| 132 | } | |
| 133 | ||
| 134 | thead { | |
| 135 | background-color: @background-color-light; | |
| 136 | } | |
| 137 | ||
| 138 | table, | |
| 139 | td, | |
| 140 | th { | |
| 141 | border: 1px solid @border-color-base; | |
| 142 | } | |
| 143 | } | |
| 144 | </style> | |
