crud.tsx 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445
  1. import { AddReq, EditReq, DelReq, CreateCrudOptionsProps,dict, CreateCrudOptionsRet, UserPageQuery,compute } from '@fast-crud/fast-crud';
  2. import * as api from './api';
  3. import { auth } from '/@/utils/authFunction';
  4. import { ja } from 'element-plus/es/locale';
  5. import { ElMessage, ElMessageBox } from 'element-plus'
  6. import { request } from '/@/utils/service'
  7. export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
  8. const pageRequest = async (query: UserPageQuery) => {
  9. return await api.GetList(query);
  10. };
  11. const editRequest = async ({ form, row }: EditReq) => {
  12. form.id = row.id;
  13. return await api.UpdateObj(form);
  14. };
  15. const delRequest = async ({ row }: DelReq) => {
  16. return await api.DelObj(row.id);
  17. };
  18. const addRequest = async ({ form }: AddReq) => {
  19. return await api.AddObj(form);
  20. };
  21. return {
  22. crudOptions: {
  23. request: {
  24. pageRequest,
  25. addRequest,
  26. editRequest,
  27. delRequest,
  28. },
  29. form:{
  30. wrapper: {
  31. buttons: {
  32. ok:{
  33. text:'提交',
  34. show:compute((row) => {
  35. return row.mode !=='view'
  36. })
  37. }
  38. }
  39. }
  40. },
  41. actionbar: {
  42. buttons: {
  43. add: {
  44. show: auth('area:Create'),
  45. },
  46. },
  47. },
  48. toolbar:{
  49. show:false,
  50. },
  51. rowHandle:{
  52. fixed: 'right',
  53. width: 290,
  54. buttons:{
  55. remove:{
  56. show:true,
  57. },
  58. edit:{
  59. show:true,
  60. },
  61. cancelDamage: {
  62. text: '撤销',
  63. type: 'danger',
  64. order: 98,
  65. show: compute(({ row }) => {
  66. return row.status !== 5;
  67. }),
  68. click({ row }) {
  69. ElMessageBox.confirm('确认撤销该报损记录?', '提示', {
  70. confirmButtonText: '确定',
  71. cancelButtonText: '取消',
  72. type: 'warning'
  73. }).then(async () => {
  74. try {
  75. const res = await api.UpdateDamageCancel(row);
  76. console.log("res::::",res)
  77. if (res.code === 2000) {
  78. ElMessage.success('撤销成功')
  79. crudExpose.doRefresh()
  80. } else {
  81. ElMessage.error(res.msg || '撤销失败')
  82. }
  83. } catch (err) {
  84. ElMessage.error('请求失败')
  85. }
  86. }).catch(() => {
  87. // 用户取消操作
  88. })
  89. }
  90. }
  91. }
  92. },
  93. pagination: {
  94. show: true,
  95. },
  96. columns: {
  97. _index: {
  98. title: '序号',
  99. form: { show: false },
  100. column: {
  101. type: 'index',
  102. align: 'center',
  103. width: '70px',
  104. columnSetDisabled: true, //禁止在列设置中选择
  105. },
  106. },
  107. search:{
  108. title: '关键字搜索',
  109. search: { show: true,type: 'input', },
  110. type: 'input',
  111. form: {
  112. component: { placeholder: '请输入' },
  113. show:false},
  114. column: {show:false}
  115. },
  116. damage_no: {
  117. title: '编号',
  118. search: {
  119. show: false,
  120. },
  121. treeNode: true,
  122. type: 'input',
  123. column: {
  124. minWidth: 120,
  125. },
  126. form: {
  127. show:false,
  128. // rules: [
  129. // // 表单校验规则
  130. // // { required: true, message: '名称必填项' },
  131. // ],
  132. component: {
  133. placeholder: '请输入编号',
  134. },
  135. },
  136. viewForm:{
  137. component: { placeholder: '' },
  138. rules: [{ required: true, message: '' }],
  139. }
  140. },
  141. device_code:{
  142. title: '设备编号',
  143. type: 'input',
  144. column: {
  145. show:true,
  146. minWidth: 120,
  147. },
  148. form: {
  149. show:true,
  150. component: {
  151. placeholder: '请填写设备编号',
  152. onBlur: async (event: any) => {
  153. // 当输入框失去焦点时,根据编号搜索设备信息
  154. const deviceCode = event.target.value?.trim();
  155. console.log("onBlur deviceCode:", deviceCode);
  156. if (!deviceCode) return;
  157. try {
  158. // 调用API搜索设备信息
  159. const response = await request({
  160. url: `/api/system/device/?code=${encodeURIComponent(deviceCode)}`,
  161. method: 'get'
  162. });
  163. console.log("设备搜索响应:", response);
  164. if (response.code === 2000 && response.data && response.data.length > 0) {
  165. const deviceData = response.data[0]; // 取第一个匹配的设备
  166. console.log("找到设备:", deviceData);
  167. // 使用 crudExpose 来设置表单数据
  168. const formData = crudExpose.getFormData();
  169. formData.device = deviceData.id; // 设置设备ID
  170. formData.device_code = deviceData.code; // 设置设备编号
  171. formData.device_name = deviceData.name; // 设置设备名称
  172. crudExpose.setFormData(formData);
  173. } else {
  174. console.log("未找到匹配的设备");
  175. // 可以在这里显示提示信息
  176. }
  177. } catch (error) {
  178. console.error("搜索设备信息失败:", error);
  179. }
  180. }
  181. /* disabled: true */ // 新增时也禁用,因为会自动回填
  182. },
  183. rules: [{ required: true, message: '请填写设备编号' }],
  184. },
  185. editForm:{
  186. component: { disabled: true },
  187. },
  188. viewForm:{
  189. component: { placeholder: '' },
  190. rules: [{ required: true, message: '' }],
  191. }
  192. },
  193. device:{
  194. title: '设备名称',
  195. type: 'dict-select',
  196. column: {
  197. show:false,
  198. minWidth: 120,
  199. },
  200. dict: dict({
  201. url: '/api/system/device/?has_inventory=1',
  202. value: 'id',
  203. label: 'name',
  204. }),
  205. form: {
  206. component: {
  207. placeholder: '请填写设备名称',
  208. filterable: true,
  209. onChange: async (context: any) => {
  210. // 当选择设备时,自动回填设备编号和设备名称
  211. console.log("onChange context:", context);
  212. // 获取选中的设备ID
  213. const selectedDeviceId = context;
  214. if (!selectedDeviceId) return;
  215. try {
  216. // 通过API获取设备详情
  217. const response = await request({
  218. url: `/api/system/device/${selectedDeviceId}/`,
  219. method: 'get'
  220. });
  221. console.log("response::::",response)
  222. if (response.code==2000) {
  223. const deviceData = response.data;
  224. console.log("设备数据:", deviceData);
  225. // 使用 crudExpose 来设置表单数据
  226. const formData = crudExpose.getFormData();
  227. formData.device_code = deviceData.code;
  228. formData.device_name = deviceData.name;
  229. crudExpose.setFormData(formData);
  230. }
  231. } catch (error) {
  232. console.error("获取设备信息失败:", error);
  233. }
  234. }
  235. },
  236. rules: [{ required: true, message: '请填写设备名称' }],
  237. },
  238. editForm:{
  239. component: { disabled: true },
  240. },
  241. viewForm:{
  242. component: { placeholder: '' },
  243. rules: [{ required: true, message: '' }],
  244. }
  245. },
  246. device_name:{
  247. title: '设备名称',
  248. type: 'input',
  249. column: {
  250. show:true,
  251. minWidth: 120,
  252. },
  253. form: {
  254. show:false,
  255. component: { placeholder: '请填写设备名称' },
  256. rules: [{ required: true, message: '请填写设备名称' }],
  257. },
  258. viewForm:{
  259. component: { placeholder: '' },
  260. rules: [{ required: true, message: '' }],
  261. }
  262. },
  263. quantity:{
  264. title: '报废数量',
  265. type: 'input',
  266. column: {
  267. minWidth: 120,
  268. },
  269. form: {
  270. component: { placeholder: '请填写报废数量'},
  271. rules: [{ required: true, message: '请填写报废数量' }],
  272. },
  273. editForm:{
  274. component: { disabled: true },
  275. },
  276. valueResolve({ form, value }) {
  277. form.quantity = Number(value);
  278. },
  279. viewForm:{
  280. component: { placeholder: '' },
  281. rules: [{ required: true, message: '' }],
  282. }
  283. },
  284. damage_type:{
  285. title: '报损类型',
  286. type: 'dict-select',
  287. dict: dict({
  288. data: [
  289. { label: '报废', value: 0 },
  290. // { label: '维修', value: 1 },
  291. ],
  292. }),
  293. column: {
  294. show:false,
  295. minWidth: 120,
  296. },
  297. form: {
  298. value:0,
  299. show:false,
  300. component: { placeholder: '请填写报损类型'},
  301. rules: [{ required: false, message: '请填写报损类型' }],
  302. },
  303. editForm:{
  304. component: { disabled: true },
  305. },
  306. viewForm:{
  307. component: { placeholder: '' },
  308. rules: [{ required: true, message: '' }],
  309. }
  310. },
  311. damage_reason:{
  312. title: '报废原因',
  313. type: 'input',
  314. column: {
  315. minWidth: 120,
  316. },
  317. form: {
  318. component: { placeholder: '请填写报废原因' },
  319. rules: [{ required: false, message: '请填写报废原因' }],
  320. },
  321. viewForm:{
  322. component: { placeholder: '' },
  323. rules: [{ required: true, message: '' }],
  324. }
  325. },
  326. estimated_loss:{
  327. title: '维修费用',
  328. type: 'input',
  329. column: {
  330. minWidth: 120,
  331. show:false,
  332. // show:compute(({ form }) => {
  333. // // 只有当选择了胜任力标签时才显示配置
  334. // return form && form.damage_type === 1;
  335. // })
  336. },
  337. form: {
  338. show:false,
  339. component: { placeholder: '请填写维修费用' },
  340. rules: [{ required: false, message: '请填写维修费用' }],
  341. // show:compute(({ form }) => {
  342. // // 只有当选择了胜任力标签时才显示配置
  343. // return form && form.damage_type === 1;
  344. // })
  345. },
  346. viewForm:{
  347. component: { placeholder: '' },
  348. rules: [{ required: true, message: '' }],
  349. show:compute(({ form }) => {
  350. // 只有当选择了胜任力标签时才显示配置
  351. return form && form.damage_type === 1;
  352. })
  353. }
  354. },
  355. reporter_person:{
  356. title: '负责人',
  357. type: 'input',
  358. column: {
  359. minWidth: 120,
  360. },
  361. form: {
  362. show:false,
  363. component: { placeholder: '请填写负责人' },
  364. rules: [{ required: false, message: '请填写负责人' }],
  365. },
  366. viewForm:{
  367. component: { placeholder: '' },
  368. rules: [{ required: true, message: '' }],
  369. }
  370. },
  371. status:{
  372. title: '状态',
  373. type: 'dict-select',
  374. dict: dict({
  375. data: [
  376. { value: 4, label: '已确认' },
  377. { value: 5, label: '已撤销' }
  378. ]
  379. }),
  380. search:{
  381. show:true
  382. },
  383. column:{
  384. show:false
  385. },
  386. form: {
  387. show:false,
  388. }
  389. },
  390. status_display:{
  391. title: '状态',
  392. type: 'input',
  393. column: {
  394. minWidth: 120,
  395. },
  396. form: {
  397. show:false,
  398. component: { placeholder: '请填写负责人' },
  399. rules: [{ required: false, message: '请填写负责人' }],
  400. },
  401. viewForm:{
  402. component: { placeholder: '' },
  403. rules: [{ required: true, message: '' }],
  404. }
  405. },
  406. create_datetime:{
  407. title: '创建时间',
  408. type: 'datetime',
  409. column: {
  410. minWidth: 120,
  411. },
  412. form: {
  413. show:false,
  414. }
  415. }
  416. },
  417. },
  418. };
  419. };