crud.tsx 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  1. import type { AddReq, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from '@fast-crud/fast-crud';
  2. import { dict } from '@fast-crud/fast-crud';
  3. import dayjs from 'dayjs';
  4. import * as api from './api';
  5. import { selectAll_1 } from './api';
  6. export default function createCrudOptions(): CreateCrudOptionsRet {
  7. const pageRequest = async (query: any): Promise<any> => {
  8. // 调用你自己的函数从接口获取数据
  9. const data = await selectAll_1(query);
  10. return {
  11. rows: data,
  12. total: data.length
  13. };
  14. };
  15. const editRequest = async (ctx: EditReq) => {
  16. const { form, row } = ctx;
  17. form.id = row.id;
  18. return api.UpdateObj(form);
  19. };
  20. const delRequest = async (ctx: DelReq) => {
  21. const { row } = ctx;
  22. return api.DelObj(row.id);
  23. };
  24. const addRequest = async (req: AddReq) => {
  25. const { form } = req;
  26. return api.AddObj(form);
  27. };
  28. return {
  29. crudOptions: {
  30. container: {
  31. is: 'fs-layout-card'
  32. },
  33. request: {
  34. pageRequest,
  35. addRequest,
  36. editRequest,
  37. delRequest
  38. },
  39. columns: {
  40. id: {
  41. title: 'ID',
  42. key: 'id',
  43. type: 'number',
  44. search: { show: true },
  45. column: {
  46. width: 50,
  47. align:'center',
  48. },
  49. form: {
  50. show: false
  51. }
  52. },
  53. name: {
  54. title: '部门名称',
  55. search: { show: true },
  56. key: 'name',
  57. type: 'text',
  58. column: {
  59. width: 150,
  60. align:'center',
  61. },
  62. form: {
  63. show: true
  64. }
  65. },
  66. // select: {
  67. // title: '状态',
  68. // search: { show: true },
  69. // type: 'dict-select',
  70. // align: 'center',
  71. // // dict: dict({
  72. // // url: '/mock/crud/demo/dict'
  73. // // })
  74. // },
  75. description: {
  76. title: '部门地址',
  77. key: 'description',
  78. type: 'text',
  79. search: { show: true },
  80. column: {
  81. width: 200,
  82. align:'center',
  83. },
  84. },
  85. createTime: {
  86. key: 'createTime',
  87. title: '创建时间',
  88. type: 'text',
  89. column: {
  90. width: 250,
  91. align:'center',
  92. },
  93. search: { show: true },
  94. // naive 默认仅支持数字类型时间戳作为日期输入与输出
  95. // 字符串类型的时间需要转换格式
  96. valueBuilder(context) {
  97. const { value, row, key } = context;
  98. if (value) {
  99. // naive 默认仅支持时间戳作为日期输入与输出
  100. row[key] = dayjs(value).valueOf();
  101. }
  102. },
  103. valueResolve(context) {
  104. const { value, form, key } = context;
  105. if (value) {
  106. form[key] = dayjs(value).format('YYYY-MM-DD HH:mm:ss');
  107. }
  108. }
  109. },
  110. modifyTime: {
  111. title: '修改时间',
  112. key: 'modifyTime',
  113. type: 'text',
  114. align: 'center',
  115. column: {
  116. width: 250,
  117. align:'center',
  118. },
  119. // naive 默认仅支持数字类型时间戳作为日期输入与输出
  120. // 字符串类型的时间需要转换格式
  121. valueBuilder(context) {
  122. const { value, row, key } = context;
  123. if (value) {
  124. // naive 默认仅支持时间戳作为日期输入与输出
  125. row[key] = dayjs(value).valueOf();
  126. }
  127. },
  128. valueResolve(context) {
  129. const { value, form, key } = context;
  130. if (value) {
  131. form[key] = dayjs(value).format('YYYY-MM-DD HH:mm:ss');
  132. }
  133. }
  134. },
  135. createUid: {
  136. title: '创建用户ID',
  137. key: 'createUid',
  138. type: 'file-uploader',
  139. column: {
  140. width: 250,
  141. align:'center',
  142. },
  143. },
  144. disabled: {
  145. key: 'disabled',
  146. title: '状态',
  147. type: 'dict-select',
  148. column: {
  149. width: 100,
  150. align:'center',
  151. },
  152. dict: dict({
  153. url: '/mock/crud/demo/dict'
  154. }),
  155. search: { show: true }
  156. },
  157. // richtext: {
  158. // title: '富文本',
  159. // type: 'editor-wang5',
  160. // column: {
  161. // // cell中不显示
  162. // show: false
  163. // },
  164. // form: {
  165. // col: {
  166. // // 横跨两列
  167. // span: 24
  168. // },
  169. // component: {
  170. // style: {
  171. // height: '300px'
  172. // }
  173. // }
  174. // }
  175. // }
  176. },
  177. }
  178. };
  179. }