crud.tsx 6.0 KB

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