table.d.ts 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274
  1. import type { TagProps, ButtonType, FormInstance, ButtonProps, TableColumnCtx, ColProps } from 'element-plus'
  2. import { Component, ComponentPublicInstance } from 'vue'
  3. import Table from '/@/components/table/index.vue'
  4. import type { PopconfirmProps } from 'element-plus'
  5. import { Mutable } from 'element-plus/es/utils'
  6. declare global {
  7. /* baTable */
  8. interface BaTable {
  9. // 表格 ref,通常在 页面onMounted 时赋值
  10. ref?: typeof Table
  11. // 表格对应数据表的主键字段
  12. pk?: string
  13. // 表格数据,通过getIndex加载
  14. data?: TableRow[]
  15. // 路由 remark,后台菜单规则备注信息
  16. remark?: string | null
  17. // 表格加载状态
  18. loading?: boolean
  19. // 当前选中行
  20. selection?: TableRow[]
  21. // 表格列定义
  22. column: TableColumn[]
  23. // 数据总量
  24. total?: number
  25. // 字段搜索,快速搜索,分页等数据
  26. filter?: {
  27. page?: number
  28. limit?: number
  29. order?: string
  30. quickSearch?: string
  31. search?: comSearchData[]
  32. [key: string]: any
  33. }
  34. // 默认排序字段和排序方式
  35. defaultOrder?: { prop: string; order: string }
  36. // 拖动排序限位字段:例如拖动行pid=1,那么拖动目的行pid也需要为1
  37. dragSortLimitField?: string
  38. // 接受url的query参数并自动触发通用搜索
  39. acceptQuery?: boolean
  40. // 显示公共搜索
  41. showComSearch?: boolean
  42. // 不需要'双击编辑'的字段,type=selection的列为 undefined
  43. dblClickNotEditColumn?: (string | undefined)[]
  44. // 是否展开所有子项,树状表格专用属性
  45. expandAll?: boolean
  46. // 当前表格所在页面的路由 path
  47. routePath?: string
  48. // 表格扩展数据,随意定义,以便一些自定义数据可以随baTable实例传递
  49. extend?: anyObj
  50. }
  51. interface TableRenderPublicInstance extends ComponentPublicInstance {
  52. $attrs: {
  53. renderValue: any
  54. renderRow: TableRow
  55. renderField: TableColumn
  56. }
  57. }
  58. /* baTableForm */
  59. interface BaTableForm {
  60. // 表单ref,实例化表格时通常无需传递
  61. ref?: FormInstance | undefined
  62. // 表单项label的宽度
  63. labelWidth?: number
  64. // 当前操作:add=添加,edit=编辑
  65. operate?: string
  66. // 被操作数据ID,支持批量编辑:add=[0],edit=[1,2,n]
  67. operateIds?: string[]
  68. // 表单数据,内含用户输入
  69. items?: anyObj
  70. // 提交按钮状态
  71. submitLoading?: boolean
  72. // 默认表单数据(添加时)
  73. defaultItems?: anyObj
  74. // 表单加载状态
  75. loading?: boolean
  76. // 表单扩展数据,随意定义,以便一些自定义数据可以随baTable实例传递
  77. extend?: anyObj
  78. }
  79. /* BaTable前置处理函数(前置埋点) */
  80. interface BaTableBefore {
  81. // 获取表格数据前
  82. getIndex?: () => boolean | void
  83. // 删除前
  84. postDel?: ({ ids }: { ids: string[] }) => boolean | void
  85. // 编辑请求前
  86. requestEdit?: ({ id }: { id: string }) => boolean | void
  87. // 双击表格具体操作执行前
  88. onTableDblclick?: ({ row, column }: { row: TableRow; column: TableColumn }) => boolean | void
  89. // 表单切换前
  90. toggleForm?: ({ operate, operateIds }: { operate: string; operateIds: string[] }) => boolean | void
  91. // 表单提交前
  92. onSubmit?: ({ formEl, operate, items }: { formEl: FormInstance | undefined; operate: string; items: anyObj }) => boolean | void
  93. // 表格内事件响应前
  94. onTableAction?: ({ event, data }: { event: string; data: anyObj }) => boolean | void
  95. // 表格顶部菜单事件响应前
  96. onTableHeaderAction?: ({ event, data }: { event: string; data: anyObj }) => boolean | void
  97. // 表格初始化前
  98. mount?: () => boolean | void
  99. [key: string]: Function | undefined
  100. }
  101. /* BaTable后置处理函数(后置埋点) */
  102. interface BaTableAfter {
  103. // 表格数据请求后
  104. getIndex?: ({ res }: { res: ApiResponse }) => void
  105. // 删除请求后
  106. postDel?: ({ res }: { res: ApiResponse }) => void
  107. // 编辑表单请求后
  108. requestEdit?: ({ res }: { res: ApiResponse }) => void
  109. // 双击单元格操作执行后
  110. onTableDblclick?: ({ row, column }: { row: TableRow; column: TableColumn }) => void
  111. // 表单切换后
  112. toggleForm?: ({ operate, operateIds }: { operate: string; operateIds: string[] }) => void
  113. // 表单提交后
  114. onSubmit?: ({ res }: { res: ApiResponse }) => void
  115. // 表格事件响应后
  116. onTableAction?: ({ event, data }: { event: string; data: anyObj }) => void
  117. // 表格顶部事件菜单响应后
  118. onTableHeaderAction?: ({ event, data }: { event: string; data: anyObj }) => void
  119. [key: string]: Function | undefined
  120. }
  121. interface ComSearch {
  122. form: anyObj
  123. fieldData: Map<string, any>
  124. }
  125. /* 表格列 */
  126. interface TableColumn extends Partial<TableColumnCtx<TableRow>> {
  127. // 是否显示
  128. show?: boolean
  129. // 是否在下拉菜单的复选框显示 默认为true显示
  130. enableColumnDisplayControl?: boolean
  131. // 渲染为:icon|switch|image|images|tag|url|datetime|buttons|customTemplate|customRender|slot
  132. render?:
  133. | 'icon'
  134. | 'switch'
  135. | 'image'
  136. | 'images'
  137. | 'tag'
  138. | 'tags'
  139. | 'url'
  140. | 'datetime'
  141. | 'color'
  142. | 'buttons'
  143. | 'customTemplate'
  144. | 'customRender'
  145. | 'slot'
  146. // 操作按钮组
  147. buttons?: OptButton[]
  148. // 渲染为Tag时:el-tag 组件的主题
  149. effect?: TagProps['effect']
  150. // 渲染为Tag时:el-tag 组件的size
  151. size?: TagProps['size']
  152. // 自定义数据:比如渲染为Tag时,可以指定不同值时的Tag的Type属性 { open: 'success', close: 'info' }
  153. custom?: any
  154. // 谨慎使用:自定义渲染模板,方法可返回html内容,请确保返回内容是xss安全的
  155. customTemplate?: (row: TableRow, field: TableColumn, value: any, column: TableColumnCtx<TableRow>, index: number) => string
  156. // 自定义组件/函数渲染
  157. customRender?: string | Component
  158. // 自定义渲染为 slot 时,slot的名称
  159. slotName?: string
  160. // 渲染为链接时,链接的打开方式
  161. target?: aTarget
  162. // 渲染为:url 时的点击事件
  163. click?: (row: TableRow, field: TableColumn, value: any, column: TableColumnCtx<TableRow>, index: number) => any
  164. // 渲染为 datetime 时的格式化方式,字母可以自由组合:y=年,m=月,d=日,h=时,M=分,s=秒,默认:yyyy-mm-dd hh:MM:ss
  165. timeFormat?: string
  166. // 默认值
  167. default?: any
  168. // 值替换数据,如{open: '开'}
  169. replaceValue?: any
  170. // 使用了 render 属性时,渲染前对字段值的预处理方法,请返回新值
  171. renderFormatter?: (row: TableRow, field: TableColumn, value: any, column: TableColumnCtx<TableRow>, index: number) => any
  172. // 通用搜索操作符,默认值为=,false禁用此字段通用搜索,支持的操作符见下定义
  173. operator?: boolean | OperatorStr
  174. // 通用搜索框的placeholder
  175. operatorPlaceholder?: string
  176. // 公共搜索渲染方式:上方的 render=tag|switch 时公共搜索也会渲染为下拉,数字会渲染为范围筛选,时间渲染为时间选择器等
  177. comSearchRender?: 'remoteSelect' | 'select' | 'date' | 'customRender' | 'slot'
  178. // 公共搜索自定义组件/函数渲染
  179. comSearchCustomRender?: string | Component
  180. // 公共搜索自定义渲染为 slot 时,slot 的名称
  181. comSearchSlotName?: string
  182. // 公共搜索自定义渲染时,外层 el-col 的属性(仅 customRender、slot支持)
  183. comSearchColAttr?: Partial<ColProps>
  184. // 公共搜索,是否显示字段的 label
  185. comSearchShowLabel?: boolean
  186. // 远程属性
  187. remote?: {
  188. pk?: string
  189. field?: string
  190. params?: anyObj
  191. multiple?: boolean
  192. remoteUrl: string
  193. }
  194. }
  195. /* 表格右侧操作按钮 */
  196. interface OptButton {
  197. // 渲染方式:tipButton=带tip的按钮,confirmButton=带确认框的按钮,moveButton=移动按钮,basicButton=普通按钮
  198. render: 'tipButton' | 'confirmButton' | 'moveButton' | 'basicButton'
  199. name: string
  200. // 自动使用 t() 包裹,请使用语言翻译key,比如 admin.infoBtn
  201. title?: string
  202. text?: string
  203. class?: string
  204. type: ButtonType
  205. icon: string
  206. popconfirm?: Partial<Mutable<PopconfirmProps>>
  207. disabledTip?: boolean
  208. // 自定义点击事件
  209. click?: (row: TableRow, field: TableColumn) => void
  210. // 按钮是否显示,请返回布尔值
  211. display?: (row: TableRow, field: TableColumn) => boolean
  212. // 按钮是否禁用,请返回布尔值
  213. disabled?: (row: TableRow, field: TableColumn) => boolean
  214. // 自定义el-button属性
  215. attr?: Partial<Mutable<ButtonProps>>
  216. }
  217. /* 表格行 */
  218. interface TableRow extends anyObj {
  219. children?: TableRow[]
  220. }
  221. /* 表头支持的按钮 */
  222. type HeaderOptButton = 'refresh' | 'add' | 'edit' | 'delete' | 'unfold' | 'recycle bin' | 'comSearch' | 'quickSearch' | 'columnDisplay'
  223. /* 通用搜索操作符支持的值 */
  224. type OperatorStr =
  225. | 'eq' // 等于,默认值
  226. | 'ne' // 不等于
  227. | 'gt' // 大于
  228. | 'egt' // 大于等于
  229. | 'lt' // 小于
  230. | 'elt' // 小于等于
  231. | 'LIKE'
  232. | 'NOT LIKE'
  233. | 'IN'
  234. | 'NOT IN'
  235. | 'RANGE' // 范围,将生成两个输入框 以输入最小值和最大值
  236. | 'NOT RANGE'
  237. | 'NULL' // 是否为NULL,将生成单个复选框
  238. | 'NOT NULL'
  239. | 'FIND_IN_SET'
  240. // 不推荐使用的,因为部分符号不利于网络传输
  241. | '='
  242. | '<>'
  243. | '>'
  244. | '>='
  245. | '<'
  246. | '<='
  247. /* 链接打开方式 */
  248. type aTarget = '_blank' | '_self'
  249. /* 通用搜索事件返回的Data */
  250. interface comSearchData {
  251. field: string
  252. val: string
  253. operator: string
  254. render?: string
  255. }
  256. interface ElTreeData {
  257. label: string
  258. children?: ElTreeData[]
  259. }
  260. }