crud.tsx 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171
  1. import * as api from './api';
  2. import { UserPageQuery, AddReq, DelReq, EditReq, CreateCrudOptionsProps, CreateCrudOptionsRet ,useCompute} from '@fast-crud/fast-crud';
  3. import dayjs from 'dayjs';
  4. const { compute } = useCompute();
  5. export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
  6. const pageRequest = async (query: UserPageQuery) => {
  7. try {
  8. const res = await api.GetList(query);
  9. return {
  10. ...res,
  11. records: res.data,
  12. total: res.total,
  13. };
  14. } catch (error) {
  15. return {
  16. code: 2000,
  17. msg: 'success',
  18. records: [],
  19. total: 0,
  20. };
  21. }
  22. };
  23. const editRequest = async ({ form, row }: EditReq) => {
  24. form.id = row.id;
  25. return await api.UpdateObj(form);
  26. };
  27. const delRequest = async ({ row }: DelReq) => {
  28. return await api.DelObj(row.id);
  29. };
  30. const addRequest = async ({ form }: AddReq) => {
  31. return await api.AddObj(form);
  32. };
  33. return {
  34. crudOptions: {
  35. request: {
  36. pageRequest,
  37. addRequest,
  38. editRequest,
  39. delRequest,
  40. },
  41. actionbar: {
  42. buttons: {
  43. add: {
  44. show: false,
  45. text: '创建借用单',
  46. },
  47. },
  48. },
  49. rowHandle: {
  50. fixed: 'right',
  51. width: 220,
  52. buttons: {
  53. view: {
  54. show: true,
  55. click: ({ row }) => {
  56. // eslint-disable-next-line no-console
  57. // console.log("row:::",row);
  58. window.dispatchEvent(new CustomEvent('borrow-view', { detail: row }));
  59. },
  60. },
  61. edit: {
  62. show:true,
  63. disabled:compute( ({row})=>{
  64. return row.borrow_type === 0;
  65. }),
  66. click: ({ row }) => {
  67. window.dispatchEvent(new CustomEvent('borrow-edit', { detail: row }));
  68. }
  69. },
  70. remove: {
  71. show: true,
  72. },
  73. },
  74. },
  75. search:{
  76. show:false,
  77. },
  78. toolbar:{
  79. show:true,
  80. },
  81. columns: {
  82. _index: {
  83. title: '序号',
  84. form: { show: false },
  85. column: {
  86. align: 'center',
  87. width: '70px',
  88. columnSetDisabled: true,
  89. formatter: (context: any) => {
  90. let index = context.index ?? 1;
  91. let pagination = crudExpose!.crudBinding.value.pagination;
  92. return ((pagination!.currentPage ?? 1) - 1) * pagination!.pageSize + index + 1;
  93. },
  94. },
  95. },
  96. application_no: { title: '借用单编号', column: { minWidth: 140 } },
  97. borrower_type_label: { title: '借用人角色', column: { minWidth: 100 } },
  98. borrow_type_label: { search: { show: true },title: '借用性质', column: { minWidth: 100 } },
  99. "borrower_info.user_code":{title:"学号/工号",column: { minWidth: 100 }},
  100. borrower_info: {
  101. title: '借用人',
  102. search:{
  103. show:true,
  104. },
  105. column: {
  106. minWidth: 100,
  107. formatter: ({ row }: any) => row.borrower_info?.name || '',
  108. },
  109. form: {
  110. component: {
  111. render: ({ value }: any) => value?.name || '',
  112. },
  113. },
  114. },
  115. emergency_contact: { title: '紧急联系人', column: { show:false, minWidth: 100 } },
  116. emergency_phone: { title: '联系方式', column: { minWidth: 120 } },
  117. team_type_label: { title: '个人/团队', column: { minWidth: 80 } },
  118. team_members: { title: '团队成员', column: { show:false,minWidth: 120 } },
  119. team_members_count: { title: '团队人数', column: { show:false,minWidth: 80 }},
  120. create_datetime: {
  121. title: '创建时间',
  122. column: { minWidth: 160, formatter: ({ value }: any) => (value ? dayjs(value).format('YYYY-MM-DD HH:mm:ss') : '') },
  123. },
  124. status_label: { title: '当前状态', column: { minWidth: 80 } },
  125. actual_start_time: {
  126. title: '借出时间',
  127. column: { minWidth: 140, formatter: ({ value }: any) => (value ? dayjs(value).format('YYYY-MM-DD HH:mm:ss') : '') },
  128. },
  129. expected_end_time: {
  130. title: '预计归还',
  131. column: { minWidth: 140, formatter: ({ value }: any) => (value ? dayjs(value).format('YYYY-MM-DD HH:mm:ss') : '') },
  132. },
  133. actual_end_time: {
  134. title: '完结时间',
  135. column: { minWidth: 140, formatter: ({ value }: any) => (value ? dayjs(value).format('YYYY-MM-DD HH:mm:ss') : '') },
  136. },
  137. return_location: { title: '存放仓库', column: { minWidth: 120 } },
  138. purpose: { title: '借用目的', column: { minWidth: 150 ,show:false} },
  139. expected_start_time: {
  140. title: '预计开始',
  141. column: { minWidth: 140,show:false, formatter: ({ value }: any) => (value ? dayjs(value).format('YYYY-MM-DD HH:mm:ss') : '') },
  142. },
  143. approve_time: {
  144. title: '审批时间',
  145. column: { show:false,minWidth: 140, formatter: ({ value }: any) => (value ? dayjs(value).format('YYYY-MM-DD HH:mm') : '') },
  146. },
  147. approve_remark: { title: '审批备注', column: {show:false, minWidth: 120 } },
  148. total_items: { title: '设备数量', column: { show:false,minWidth: 80 } },
  149. applicant_remark: { title: '申请备注', column: { show:false, minWidth: 120 } },
  150. update_datetime: {
  151. title: '更新时间',
  152. column: { show:false,minWidth: 160, formatter: ({ value }: any) => (value ? dayjs(value).format('YYYY-MM-DD HH:mm:ss') : '') },
  153. },
  154. },
  155. },
  156. };
  157. };