crud.tsx 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485
  1. import { AddReq, CreateCrudOptionsProps, dict,CreateCrudOptionsRet, UserPageQuery,compute } from '@fast-crud/fast-crud';
  2. import * as api from './api';
  3. import { auth } from '/@/utils/authFunction';
  4. import dayjs from 'dayjs';
  5. import { request } from '/@/utils/service'
  6. export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
  7. const pageRequest = async (query: UserPageQuery) => {
  8. return await api.GetList(query);
  9. };
  10. const editRequest = async ({ form, row }: EditReq) => {
  11. form.id = row.id;
  12. return await api.UpdateObj(form);
  13. };
  14. const delRequest = async ({ row }: DelReq) => {
  15. return await api.DelObj(row.id);
  16. };
  17. const addRequest = async ({ form }: AddReq) => {
  18. return await api.AddObj(form);
  19. };
  20. return {
  21. crudOptions: {
  22. request: {
  23. pageRequest,
  24. addRequest,
  25. editRequest,
  26. delRequest,
  27. },
  28. form:{
  29. wrapper: {
  30. buttons: {
  31. ok:{
  32. text:'提交',
  33. show:compute((row) => {
  34. return row.mode !=='view'
  35. })
  36. }
  37. }
  38. }
  39. },
  40. actionbar: {
  41. buttons: {
  42. add: {
  43. show: auth('area:Create'),
  44. },
  45. },
  46. },
  47. toolbar:{
  48. show:false,
  49. },
  50. rowHandle:{
  51. fixed: 'right',
  52. width: 220,
  53. buttons:{
  54. view:{
  55. show:true
  56. },
  57. remove:{
  58. show:true,
  59. },
  60. edit:{
  61. show:true,
  62. }
  63. }
  64. },
  65. pagination: {
  66. show: true,
  67. },
  68. columns: {
  69. _index: {
  70. title: '序号',
  71. form: { show: false },
  72. column: {
  73. type: 'index',
  74. align: 'center',
  75. width: '70px',
  76. columnSetDisabled: true, //禁止在列设置中选择
  77. },
  78. },
  79. search:{
  80. title: '关键字搜索',
  81. search: { show: true,type: 'input', },
  82. type: 'input',
  83. form: {
  84. component: { placeholder: '请输入' },
  85. show:false},
  86. column: {show:false}
  87. },
  88. record_no: {
  89. title: '维护单编号',
  90. search: {
  91. show: false,
  92. },
  93. treeNode: true,
  94. type: 'input',
  95. column: {
  96. minWidth: 120,
  97. },
  98. form: {
  99. show:false,
  100. rules: [
  101. // 表单校验规则
  102. { required: true, message: '名称必填项' },
  103. ],
  104. component: {
  105. placeholder: '请输入',
  106. },
  107. },
  108. viewForm:{
  109. component: { placeholder: '' },
  110. rules: [{ required: true, message: '' }],
  111. }
  112. },
  113. maintenance_title: {
  114. title: '维护标题',
  115. search: {
  116. show: true,
  117. },
  118. treeNode: true,
  119. type: 'input',
  120. column: {
  121. minWidth: 120,
  122. },
  123. form: {
  124. rules: [
  125. // 表单校验规则
  126. { required: true, message: '维护标题必填项' },
  127. ],
  128. component: {
  129. placeholder: '请输入维护标题',
  130. },
  131. },
  132. viewForm:{
  133. component: { placeholder: '' },
  134. rules: [{ required: true, message: '' }],
  135. }
  136. },
  137. maintenance_plan:{
  138. title: '维护计划',
  139. type: 'dict-select',
  140. column: {
  141. show:true,
  142. minWidth: 120,
  143. },
  144. dict: dict({
  145. url: '/api/system/maintenance/plan/',
  146. value: 'id',
  147. label: 'plan_name',
  148. }),
  149. form: {
  150. component: { placeholder: '请选择关联的维护计划' },
  151. rules: [{ required: false, message: '请选择关联的维护计划' }],
  152. },
  153. viewForm:{
  154. component: { placeholder: '' },
  155. rules: [{ required: true, message: '' }],
  156. }
  157. },
  158. device_code:{
  159. title: '设备编号',
  160. type: 'input',
  161. column: {
  162. show:true,
  163. minWidth: 120,
  164. },
  165. form: {
  166. show:true,
  167. component: {
  168. placeholder: '请填写设备编号',
  169. onBlur: async (event: any) => {
  170. // 当输入框失去焦点时,根据编号搜索设备信息
  171. const deviceCode = event.target.value?.trim();
  172. console.log("onBlur deviceCode:", deviceCode);
  173. if (!deviceCode) return;
  174. try {
  175. // 调用API搜索设备信息
  176. const response = await request({
  177. url: `/api/system/device/?code=${encodeURIComponent(deviceCode)}`,
  178. method: 'get'
  179. });
  180. console.log("设备搜索响应:", response);
  181. if (response.code === 2000 && response.data && response.data.length > 0) {
  182. const deviceData = response.data[0]; // 取第一个匹配的设备
  183. console.log("找到设备:", deviceData);
  184. // 使用 crudExpose 来设置表单数据
  185. const formData = crudExpose.getFormData();
  186. formData.device = deviceData.id; // 设置设备ID
  187. formData.device_code = deviceData.code; // 设置设备编号
  188. formData.device_name = deviceData.name; // 设置设备名称
  189. crudExpose.setFormData(formData);
  190. } else {
  191. console.log("未找到匹配的设备");
  192. // 可以在这里显示提示信息
  193. }
  194. } catch (error) {
  195. console.error("搜索设备信息失败:", error);
  196. }
  197. }
  198. /* disabled: true */ // 新增时也禁用,因为会自动回填
  199. },
  200. rules: [{ required: true, message: '请填写设备编号' }],
  201. },
  202. editForm:{
  203. component: { disabled: true },
  204. },
  205. viewForm:{
  206. component: { placeholder: '' },
  207. rules: [{ required: true, message: '' }],
  208. }
  209. },
  210. device:{
  211. title: '设备名称',
  212. type: 'dict-select',
  213. column: {
  214. show:false,
  215. minWidth: 120,
  216. },
  217. dict: dict({
  218. url: '/api/system/device/?has_inventory=1',
  219. value: 'id',
  220. label: 'name',
  221. }),
  222. form: {
  223. show:true,
  224. component: { placeholder: '请选择设备名称',
  225. filterable: true,
  226. },
  227. rules: [{ required: true, message: '请选择设备名称' }],
  228. },
  229. viewForm:{
  230. component: { placeholder: '' },
  231. rules: [{ required: true, message: '' }],
  232. }
  233. },
  234. device_name:{
  235. title: '设备名称',
  236. type: 'input',
  237. column: {
  238. minWidth: 120,
  239. },
  240. form: {
  241. show:false,
  242. component: { placeholder: '请填写标签描述' },
  243. rules: [{ required: false, message: '请填写标签描述' }],
  244. },
  245. viewForm:{
  246. component: { placeholder: '' },
  247. rules: [{ required: false, message: '' }],
  248. }
  249. },
  250. /* device_code:{
  251. title: '设备编码',
  252. type: 'input',
  253. column: {
  254. minWidth: 120,
  255. },
  256. form: {
  257. show:false,
  258. component: { placeholder: '请填写设备编码' },
  259. rules: [{ required: false, message: '请填写设备编码' }],
  260. },
  261. viewForm:{
  262. component: { placeholder: '' },
  263. rules: [{ required: false, message: '' }],
  264. }
  265. }, */
  266. maintenance_items:{
  267. title: '维护项目',
  268. type: 'input',
  269. column: {
  270. show:true,
  271. minWidth: 120,
  272. },
  273. form: {
  274. show:true,
  275. component: { placeholder: '请输入维护项目' },
  276. rules: [{ required: true, message: '请输入维护项目' }],
  277. },
  278. viewForm:{
  279. component: { placeholder: '' },
  280. rules: [{ required: true, message: '' }],
  281. },
  282. valueBuilder({ form, value }) {
  283. // form.maintenance_items = Array.isArray(value) ? value : []
  284. form.maintenance_items = value;
  285. },
  286. valueResolve({ form, value }) {
  287. // console.log('valueResolve:', typeof value, value);
  288. if (Array.isArray(value)) {
  289. form.maintenance_items = value;
  290. } else if (typeof value === 'string') {
  291. form.maintenance_items = value
  292. .split(',')
  293. .map(v => v.trim())
  294. .filter(Boolean);
  295. } else {
  296. form.maintenance_items = [];
  297. }
  298. },
  299. },
  300. maintenance_team:{
  301. title: '维护团队',
  302. type: 'input',
  303. column: {
  304. minWidth: 120,
  305. },
  306. form: {
  307. show:true,
  308. component: { placeholder: '请填写维护团队' },
  309. rules: [{ required: false, message: '请填写维护团队' }],
  310. },
  311. viewForm:{
  312. component: { placeholder: '' },
  313. rules: [{ required: true, message: '' }],
  314. }
  315. },
  316. maintenance_content:{
  317. title: '维护内容',
  318. type: 'input',
  319. column: {
  320. minWidth: 120,
  321. },
  322. form: {
  323. show:true,
  324. component: { placeholder: '请填写维护内容' },
  325. rules: [{ required: true, message: '请填写维护内容' }],
  326. },
  327. viewForm:{
  328. component: { placeholder: '' },
  329. rules: [{ required: true, message: '' }],
  330. }
  331. },
  332. maintenance_person:{
  333. title: '维护人',
  334. type: 'input',
  335. column: {
  336. minWidth: 120,
  337. },
  338. form: {
  339. show:true,
  340. component: { placeholder: '请填写维护人' },
  341. rules: [{ required: true, message: '请填写维护人' }],
  342. },
  343. viewForm:{
  344. component: { placeholder: '' },
  345. rules: [{ required: true, message: '' }],
  346. }
  347. },
  348. planned_date:{
  349. title: '维护日期',
  350. type: 'date',
  351. column: {
  352. minWidth: 120,
  353. // formatter: ({ value }) => (value ? dayjs(value).format('YYYY-MM-DD') : ''),
  354. },
  355. form: {
  356. show:true,
  357. component: { placeholder: '请填写维护日期' },
  358. rules: [{ required: true, message: '请填写维护日期' }],
  359. },
  360. viewForm:{
  361. component: { placeholder: '' },
  362. rules: [{ required: true, message: '' }],
  363. },
  364. valueResolve({ form, value }) {
  365. form.planned_date = value ? dayjs(value).format('YYYY-MM-DD') : null;
  366. },
  367. valueBuilder({ form, value }) {
  368. form.planned_date = value ;
  369. },
  370. },
  371. planned_start_time:{
  372. title: '维护开始时间',
  373. type: 'time',
  374. column: {
  375. show:true,
  376. minWidth: 120,
  377. // format: 'HH:mm:ss',
  378. },
  379. form: {
  380. show:true,
  381. component: {
  382. placeholder: '请填写维护开始时间',
  383. format: 'HH:mm:ss',
  384. valueFormat: 'HH:mm:ss',
  385. },
  386. rules: [{ required: false, message: '请填写维护开始时间' }],
  387. },
  388. viewForm:{
  389. component: { placeholder: '' },
  390. rules: [{ required: true, message: '' }],
  391. },
  392. valueBuilder({ form, value }) {
  393. form.planned_start_time = value
  394. ? dayjs(value, 'HH:mm:ss').toDate()
  395. : null;
  396. },
  397. },
  398. planned_end_time:{
  399. title: '维护结束时间',
  400. type: 'time',
  401. column: {
  402. show:true,
  403. minWidth: 120,
  404. },
  405. form: {
  406. show:true,
  407. component: {
  408. placeholder: '请填写维护结束时间',
  409. format: 'HH:mm:ss',
  410. valueFormat: 'HH:mm:ss',
  411. },
  412. rules: [{ required: false, message: '请填写维护结束时间' }],
  413. },
  414. viewForm:{
  415. component: { placeholder: '' },
  416. rules: [{ required: true, message: '' }],
  417. },
  418. valueBuilder({ form, value }) {
  419. form.planned_end_time = value
  420. ? dayjs(value, 'HH:mm:ss').toDate()
  421. : null;
  422. },
  423. },
  424. status:{
  425. title: '维护状态',
  426. type: 'dict-select',
  427. column: {
  428. show:false,
  429. minWidth: 120,
  430. },
  431. dict: dict({
  432. data: [
  433. { label: '计划中', value: 0},
  434. { label: '进行中', value: 1},
  435. { label: '已完成', value: 2},
  436. { label: '已取消', value: 3 },
  437. { label: '延期', value: 4 },
  438. ],
  439. }),
  440. form: {
  441. show:true,
  442. component: { placeholder: '请选择维护状态' },
  443. rules: [{ required: true, message: '请选择维护状态' }],
  444. },
  445. viewForm:{
  446. component: { placeholder: '' },
  447. rules: [{ required: true, message: '' }],
  448. }
  449. },
  450. status_display:{
  451. title: '维护状态',
  452. type: 'input',
  453. column: {
  454. minWidth: 120,
  455. },
  456. form: {
  457. show:false,
  458. component: { placeholder: '请填写维护状态' },
  459. rules: [{ required: false, message: '请填写维护状态' }],
  460. },
  461. viewForm:{
  462. component: { placeholder: '' },
  463. rules: [{ required: true, message: '' }],
  464. }
  465. },
  466. },
  467. },
  468. };
  469. };