curd.tsx 9.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366
  1. import {
  2. AddReq,
  3. CreateCrudOptionsProps,
  4. CreateCrudOptionsRet,
  5. DelReq,
  6. dict,
  7. EditReq,
  8. FormWrapperContext,
  9. ScopeContext,
  10. UserPageQuery,
  11. UserPageRes,
  12. utils
  13. } from '@fast-crud/fast-crud';
  14. import * as api from './api';
  15. import { BorrowingReview, Switchspost } from './api';
  16. import { ElMessage , ElInput, ElDialog, ElButton } from 'element-plus';
  17. import dayjs from 'dayjs';
  18. import { h, ref, computed ,inject,defineAsyncComponent} from "vue";
  19. // import ItemsList from './ItemsList/index.vue';
  20. export const createCrudOptions = function ({ crudExpose ,context, showRejectDialog, rejectReason, currentFormId,expose }: CreateCrudOptionsProps& {
  21. showRejectDialog: Ref<boolean>,
  22. rejectReason: Ref<string>,
  23. currentFormId: Ref<number | null>
  24. }): CreateCrudOptionsRet {
  25. const pageRequest = async (query: UserPageQuery) => {
  26. try {
  27. const res = await api.GetList(query);
  28. console.log("res::::",res)
  29. return {
  30. ...res,
  31. records: res.data,
  32. total: res.total,
  33. };
  34. } catch (error) {
  35. return {
  36. code: 2000,
  37. msg: 'success',
  38. records: [],
  39. total: 0,
  40. };
  41. }
  42. };
  43. const editRequest = async ({ form, row }: EditReq) => {
  44. form.id = row.id;
  45. return await api.UpdateObj(form);
  46. };
  47. const delRequest = async ({ row }: DelReq) => {
  48. return await api.DelObj(row.id);
  49. };
  50. const addRequest = async ({ form }: AddReq) => {
  51. return await api.AddObj(form);
  52. };
  53. //切换合作商
  54. const res = Switchspost(1);
  55. return {
  56. crudOptions: {
  57. request: {
  58. // switchspost,
  59. pageRequest,
  60. addRequest,
  61. editRequest,
  62. delRequest,
  63. },
  64. form: {
  65. labelWidth: computed(() => {
  66. return context.labelWidthRef?.value ? context.labelWidthRef.value + "px" : "100px";
  67. }),
  68. wrapper: {
  69. buttons: {
  70. ok: {
  71. text: "通过",
  72. click: async (ctx: FormWrapperContext) => {
  73. await api.BorrowingReview(ctx.form.id, "approve", "同意借用");
  74. ElMessage.success("审批通过");
  75. ctx.close();
  76. crudExpose.doRefresh();
  77. }
  78. },
  79. reject: {
  80. text: "拒绝",
  81. type: "danger",
  82. click: async (context: FormWrapperContext) => {
  83. currentFormId.value = context.form.id;
  84. showRejectDialog.value = true;
  85. context.close();
  86. crudExpose.doRefresh();
  87. }
  88. },
  89. }
  90. }
  91. },
  92. search:{
  93. show:true,
  94. },
  95. toolbar:{show: false},
  96. actionbar:{show:false},
  97. rowHandle:{
  98. fixed:'right',
  99. width: 100,
  100. show: true,
  101. buttons: {
  102. view: {
  103. show: true,
  104. order:1,
  105. click: ({ row }) => {
  106. // eslint-disable-next-line no-console
  107. // console.log("row:::",row);
  108. window.dispatchEvent(new CustomEvent('borrow-view', { detail: row }));
  109. },
  110. },
  111. edit: { show: false },
  112. remove: { show: false },
  113. // custom: {
  114. // text: "审批",
  115. // order: 5,
  116. // size: "small",
  117. // show: true,
  118. // click({row}) {
  119. // // eslint-disable-next-line no-console
  120. // // console.log("click", context);
  121. // // alert(context);
  122. // try{
  123. // // approvalDialogRef.value.openApprovalDialog(row);
  124. // // BorrowingReview(context.row.id,'approve','同意借用');
  125. // // ElMessage.success('审批通过');
  126. // }catch(err){
  127. // // eslint-disable-next-line no-console
  128. // console.log("error:::::", err);
  129. // ElMessage.error("系统错误!");
  130. // }
  131. // }
  132. // }
  133. // customView: {
  134. // text: '审批',
  135. // type: 'primary',
  136. // size: 'small',
  137. // order: 1,
  138. // show: true,
  139. // }
  140. }
  141. },
  142. columns: {
  143. _index: {
  144. title: '序号',
  145. form: { show: false },
  146. column: {
  147. align: 'center',
  148. width: '70px',
  149. columnSetDisabled: true,
  150. formatter: (context) => {
  151. let index = context.index ?? 1;
  152. let pagination = crudExpose!.crudBinding.value.pagination;
  153. return ((pagination!.currentPage ?? 1) - 1) * pagination!.pageSize + index + 1;
  154. },
  155. },
  156. },
  157. application_no: {
  158. title: '借用单编号',
  159. search: { show: false },
  160. type: 'input',
  161. column: { minWidth: 120 },
  162. form: {
  163. show: true,
  164. component: { placeholder: '请输入借用编号' },
  165. rules: [{ required: false, message: '请输入借用编号' }],
  166. },
  167. },
  168. borrower_type_label: { title: '借用人角色', column: { minWidth: 100 } },
  169. borrow_type_label: {
  170. title: '借用性质',
  171. search: { show: false },
  172. type: 'input',
  173. column: { minWidth: 120 },
  174. form: {
  175. show: true,
  176. component: { placeholder: '请输入借用性质' },
  177. rules: [{ required: false, message: '请输入借用性质' }],
  178. },
  179. },
  180. "borrower_info.user_code": {
  181. title: '学号/工号',
  182. search: { show: true },
  183. type: 'input',
  184. column: { minWidth: 120 },
  185. form: {
  186. show: true,
  187. component: { placeholder: '请输入学号/工号' },
  188. rules: [{ required: false, message: '请输入学号/工号' }],
  189. },
  190. },
  191. "borrower_info.name": {
  192. title: '借用人',
  193. search: { show: true },
  194. type: 'input',
  195. column: { show:true, minWidth: 120 },
  196. form: {
  197. show: true,
  198. component: { placeholder: '请输入借用人' },
  199. rules: [{ required: false, message: '请输入借用人' }],
  200. },
  201. },
  202. emergency_contact: {
  203. title: '借用人',
  204. search: { show: true },
  205. type: 'input',
  206. column: { show:false, minWidth: 120 },
  207. form: {
  208. show: false,
  209. component: { placeholder: '请输入借用人' },
  210. rules: [{ required: false, message: '请输入借用人' }],
  211. },
  212. },
  213. emergency_phone: {
  214. title: '联系方式',
  215. search: { show: false },
  216. type: 'input',
  217. column: {
  218. minWidth: 120
  219. },
  220. form: {
  221. show: true,
  222. component: { placeholder: '请输入联系方式' },
  223. rules: [{ required: false, message: '请输入联系方式' }],
  224. }
  225. },
  226. team_type_label: {
  227. title: '个人/团队',
  228. search: { show: false },
  229. type: 'input',
  230. column: { minWidth: 120 },
  231. form: {
  232. show: true,
  233. component: { placeholder: '请输入个人/团队' },
  234. rules: [{ required: false, message: '请输入个人/团队' }],
  235. },
  236. },
  237. team_members: { title: '团队成员', column: { show:false,minWidth: 120 } },
  238. team_members_count: { title: '团队人数', column: { show:false,minWidth: 80 }},
  239. create_datetime: {
  240. title: '创建时间',
  241. search: { show: false },
  242. type: 'input',
  243. column: { minWidth: 120 },
  244. form: {
  245. show: true,
  246. component: { placeholder: '请输入创建时间' },
  247. rules: [{ required: false, message: '请输入创建时间' }],
  248. },
  249. },
  250. status_label: { title: '当前状态', column: { minWidth: 80 } },
  251. actual_start_time: {
  252. title: '借出时间',
  253. column: { minWidth: 140, formatter: ({ value }: any) => (value ? dayjs(value).format('YYYY-MM-DD HH:mm:ss') : '') },
  254. },
  255. expected_end_time: {
  256. title: '预计归还',
  257. search: { show: false },
  258. type: 'input',
  259. column: { minWidth: 120 },
  260. form: {
  261. show: true,
  262. component: { placeholder: '请输入预计归还时间' },
  263. rules: [{ required: false, message: '请输入预计归还时间' }],
  264. },
  265. },
  266. actual_end_time: {
  267. title: '完结时间',
  268. column: { minWidth: 140, formatter: ({ value }: any) => (value ? dayjs(value).format('YYYY-MM-DD HH:mm:ss') : '') },
  269. },
  270. return_location: { title: '存放仓库', column: { minWidth: 120 } },
  271. purpose: { title: '借用目的', column: { minWidth: 150 ,show:false} },
  272. expected_start_time: {
  273. title: '预计开始',
  274. column: { minWidth: 140,show:true, formatter: ({ value }: any) => (value ? dayjs(value).format('YYYY-MM-DD HH:mm:ss') : '') },
  275. },
  276. approve_time: {
  277. title: '审批时间',
  278. column: { show:false,minWidth: 140, formatter: ({ value }: any) => (value ? dayjs(value).format('YYYY-MM-DD HH:mm') : '') },
  279. from:{show:false}
  280. },
  281. approve_remark: { title: '审批备注', column: {show:false, minWidth: 120 } ,from:{show:false}},
  282. total_items: { title: '设备数量', column: { show:false,minWidth: 80 } },
  283. applicant_remark: { title: '申请备注', column: { show:false, minWidth: 120 } },
  284. update_datetime: {
  285. title: '更新时间',
  286. column: { show:false,minWidth: 160, formatter: ({ value }: any) => (value ? dayjs(value).format('YYYY-MM-DD HH:mm:ss') : '') },
  287. },
  288. approver_name: {
  289. title: '当前审批人',
  290. search: { show: false },
  291. type: 'input',
  292. column: { minWidth: 120 },
  293. form: {
  294. show: false,
  295. component: { placeholder: '请输入当前审批人' },
  296. rules: [{ required: false, message: '请输入当前审批人' }],
  297. },
  298. },
  299. "items[0].device_category_name": {
  300. title: '设备分类',
  301. search: { show: false },
  302. type: 'input',
  303. column: { show:false,minWidth: 120 },
  304. form: {
  305. show: true,
  306. component: { placeholder: '' },
  307. // rules: [{ required: false, message: '请输入当前审批人' }],
  308. },
  309. },
  310. // "items[0].quantity": {
  311. // title: '借用数量',
  312. // search: { show: false },
  313. // type: 'input',
  314. // column: {show:false, minWidth: 120 },
  315. // form: {
  316. // show: true,
  317. // component: { placeholder: '' },
  318. // // rules: [{ required: false, message: '请输入当前审批人' }],
  319. // },
  320. // },
  321. // items: {
  322. // title: '设备列表',
  323. // type: 'input', // 必须是 component 类型
  324. // form: {
  325. // show: true, // 确保表单中显示
  326. // slot: 'ItemsList',
  327. // }
  328. // },
  329. },
  330. },
  331. };
  332. };