crud.tsx 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266
  1. import * as api from './api';
  2. import { UserPageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions, CreateCrudOptionsProps, CreateCrudOptionsRet } from '@fast-crud/fast-crud';
  3. export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
  4. const pageRequest = async (query: UserPageQuery) => {
  5. const { search, ...otherParams } = query;
  6. const newQueryParams = {
  7. request_modular: search,
  8. ...otherParams
  9. };
  10. return await api.GetList(newQueryParams);
  11. };
  12. const editRequest = async ({ form, row }: EditReq) => {
  13. form.id = row.id;
  14. return await api.UpdateObj(form);
  15. };
  16. const delRequest = async ({ row }: DelReq) => {
  17. return await api.DelObj(row.id);
  18. };
  19. const addRequest = async ({ form }: AddReq) => {
  20. return await api.AddObj(form);
  21. };
  22. return {
  23. crudOptions: {
  24. request: {
  25. pageRequest,
  26. addRequest,
  27. editRequest,
  28. delRequest,
  29. },
  30. actionbar: {
  31. buttons: {
  32. add: {
  33. show: false,
  34. },
  35. },
  36. },
  37. rowHandle: {
  38. fixed:'right',
  39. width: 100,
  40. buttons: {
  41. view: {
  42. type: 'text',
  43. },
  44. edit: {
  45. show: false,
  46. },
  47. remove: {
  48. show: false,
  49. },
  50. },
  51. },
  52. columns: {
  53. _index: {
  54. title: '序号',
  55. form: { show: false },
  56. column: {
  57. //type: 'index',
  58. align: 'center',
  59. width: '70px',
  60. columnSetDisabled: true, //禁止在列设置中选择
  61. formatter: (context) => {
  62. //计算序号,你可以自定义计算规则,此处为翻页累加
  63. let index = context.index ?? 1;
  64. let pagination = crudExpose!.crudBinding.value.pagination;
  65. return ((pagination!.currentPage ?? 1) - 1) * pagination!.pageSize + index + 1;
  66. },
  67. },
  68. },
  69. search: {
  70. title: '请求模块搜索',
  71. column: {
  72. show: false,
  73. },
  74. search: {
  75. autoSearchTrigger: false,
  76. show: true,
  77. component: {
  78. props: {
  79. clearable: true,
  80. },
  81. placeholder: '请输入请求模块',
  82. },
  83. },
  84. //form: {
  85. // show: false,
  86. // component: {
  87. // props: {
  88. // clearable: true,
  89. // },
  90. // },
  91. //},
  92. },
  93. request_modular: {
  94. title: '请求模块',
  95. search: {
  96. disabled: false,
  97. },
  98. type: 'input',
  99. column:{
  100. minWidth: 100,
  101. },
  102. form: {
  103. disabled: true,
  104. component: {
  105. placeholder: '请输入请求模块',
  106. },
  107. },
  108. },
  109. request_path: {
  110. title: '请求地址',
  111. search: {
  112. disabled: false,
  113. },
  114. type: 'input',
  115. column:{
  116. minWidth: 200,
  117. },
  118. form: {
  119. disabled: true,
  120. component: {
  121. placeholder: '请输入请求地址',
  122. },
  123. },
  124. },
  125. request_body: {
  126. column: {
  127. showOverflowTooltip: true,
  128. width: 200, //列宽
  129. minWidth: 100, //最小列宽
  130. },
  131. title: '请求参数',
  132. search: {
  133. disabled: true,
  134. },
  135. disabled: true,
  136. type: 'textarea',
  137. form: {
  138. component: {
  139. props: {
  140. type: 'textarea',
  141. },
  142. autosize: {
  143. minRows: 2,
  144. maxRows: 8,
  145. },
  146. placeholder: '请输入关键词',
  147. },
  148. },
  149. },
  150. request_method: {
  151. title: '请求方法',
  152. type: 'input',
  153. search: {
  154. disabled: false,
  155. },
  156. column:{
  157. minWidth: 100,
  158. },
  159. form: {
  160. disabled: true,
  161. component: {
  162. placeholder: '请输入请求方法',
  163. },
  164. },
  165. component: { props: { color: 'auto' } }, // 自动染色
  166. },
  167. request_msg: {
  168. title: '操作说明',
  169. disabled: true,
  170. form: {
  171. component: {
  172. span: 12,
  173. },
  174. },
  175. },
  176. request_ip: {
  177. title: 'IP地址',
  178. search: {
  179. disabled: false,
  180. },
  181. type: 'input',
  182. column:{
  183. minWidth: 115,
  184. },
  185. form: {
  186. disabled: true,
  187. component: {
  188. placeholder: '请输入IP地址',
  189. },
  190. },
  191. component: { props: { color: 'auto' } }, // 自动染色
  192. },
  193. create_datetime: {
  194. title: '操作时间',
  195. column: {
  196. minWidth: 100,
  197. }
  198. },
  199. request_browser: {
  200. title: '请求浏览器',
  201. type: 'input',
  202. column:{
  203. minWidth: 120,
  204. },
  205. form: {
  206. disabled: true,
  207. },
  208. component: { props: { color: 'auto' } }, // 自动染色
  209. },
  210. response_code: {
  211. title: '响应码',
  212. search: {
  213. disabled: true,
  214. },
  215. type: 'input',
  216. column:{
  217. minWidth: 100,
  218. },
  219. form: {
  220. disabled: true,
  221. },
  222. component: { props: { color: 'auto' } }, // 自动染色
  223. },
  224. request_os: {
  225. title: '操作系统',
  226. disabled: true,
  227. search: {
  228. disabled: true,
  229. },
  230. type: 'input',
  231. column:{
  232. minWidth: 120,
  233. },
  234. form: {
  235. disabled: true,
  236. },
  237. component: { props: { color: 'auto' } }, // 自动染色
  238. },
  239. json_result: {
  240. title: '返回信息',
  241. search: {
  242. disabled: true,
  243. },
  244. type: 'input',
  245. column:{
  246. minWidth: 150,
  247. },
  248. form: {
  249. disabled: true,
  250. },
  251. component: { props: { color: 'auto' } }, // 自动染色
  252. },
  253. creator_name: {
  254. title: '操作人',
  255. column:{
  256. minWidth: 100,
  257. },
  258. form: {
  259. disabled: true,
  260. },
  261. },
  262. },
  263. },
  264. };
  265. };