crud.tsx 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424
  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: true,
  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/',
  202. value: 'id',
  203. label: 'name',
  204. }),
  205. form: {
  206. component: {
  207. placeholder: '请填写设备名称',
  208. onChange: async (context: any) => {
  209. // 当选择设备时,自动回填设备编号和设备名称
  210. console.log("onChange context:", context);
  211. // 获取选中的设备ID
  212. const selectedDeviceId = context;
  213. if (!selectedDeviceId) return;
  214. try {
  215. // 通过API获取设备详情
  216. const response = await request({
  217. url: `/api/system/device/${selectedDeviceId}/`,
  218. method: 'get'
  219. });
  220. console.log("response::::",response)
  221. if (response.code==2000) {
  222. const deviceData = response.data;
  223. console.log("设备数据:", deviceData);
  224. // 使用 crudExpose 来设置表单数据
  225. const formData = crudExpose.getFormData();
  226. formData.device_code = deviceData.code;
  227. formData.device_name = deviceData.name;
  228. crudExpose.setFormData(formData);
  229. }
  230. } catch (error) {
  231. console.error("获取设备信息失败:", error);
  232. }
  233. }
  234. },
  235. rules: [{ required: true, message: '请填写设备名称' }],
  236. },
  237. editForm:{
  238. component: { disabled: true },
  239. },
  240. viewForm:{
  241. component: { placeholder: '' },
  242. rules: [{ required: true, message: '' }],
  243. }
  244. },
  245. device_name:{
  246. title: '设备名称',
  247. type: 'input',
  248. column: {
  249. show:true,
  250. minWidth: 120,
  251. },
  252. form: {
  253. show:false,
  254. component: { placeholder: '请填写设备名称' },
  255. rules: [{ required: true, message: '请填写设备名称' }],
  256. },
  257. viewForm:{
  258. component: { placeholder: '' },
  259. rules: [{ required: true, message: '' }],
  260. }
  261. },
  262. quantity:{
  263. title: '报废数量',
  264. type: 'input',
  265. column: {
  266. minWidth: 120,
  267. },
  268. form: {
  269. component: { placeholder: '请填写报废数量'},
  270. rules: [{ required: true, message: '请填写报废数量' }],
  271. },
  272. editForm:{
  273. component: { disabled: true },
  274. },
  275. valueResolve({ form, value }) {
  276. form.quantity = Number(value);
  277. },
  278. viewForm:{
  279. component: { placeholder: '' },
  280. rules: [{ required: true, message: '' }],
  281. }
  282. },
  283. damage_type:{
  284. title: '报损类型',
  285. type: 'dict-select',
  286. dict: dict({
  287. data: [
  288. { label: '报废', value: 0 },
  289. // { label: '维修', value: 1 },
  290. ],
  291. }),
  292. column: {
  293. show:false,
  294. minWidth: 120,
  295. },
  296. form: {
  297. value:0,
  298. show:false,
  299. component: { placeholder: '请填写报损类型'},
  300. rules: [{ required: false, message: '请填写报损类型' }],
  301. },
  302. editForm:{
  303. component: { disabled: true },
  304. },
  305. viewForm:{
  306. component: { placeholder: '' },
  307. rules: [{ required: true, message: '' }],
  308. }
  309. },
  310. damage_reason:{
  311. title: '报废原因',
  312. type: 'input',
  313. column: {
  314. minWidth: 120,
  315. },
  316. form: {
  317. component: { placeholder: '请填写报废原因' },
  318. rules: [{ required: false, message: '请填写报废原因' }],
  319. },
  320. viewForm:{
  321. component: { placeholder: '' },
  322. rules: [{ required: true, message: '' }],
  323. }
  324. },
  325. estimated_loss:{
  326. title: '维修费用',
  327. type: 'input',
  328. column: {
  329. minWidth: 120,
  330. show:false,
  331. // show:compute(({ form }) => {
  332. // // 只有当选择了胜任力标签时才显示配置
  333. // return form && form.damage_type === 1;
  334. // })
  335. },
  336. form: {
  337. show:false,
  338. component: { placeholder: '请填写维修费用' },
  339. rules: [{ required: false, message: '请填写维修费用' }],
  340. // show:compute(({ form }) => {
  341. // // 只有当选择了胜任力标签时才显示配置
  342. // return form && form.damage_type === 1;
  343. // })
  344. },
  345. viewForm:{
  346. component: { placeholder: '' },
  347. rules: [{ required: true, message: '' }],
  348. show:compute(({ form }) => {
  349. // 只有当选择了胜任力标签时才显示配置
  350. return form && form.damage_type === 1;
  351. })
  352. }
  353. },
  354. reporter_person:{
  355. title: '负责人',
  356. type: 'input',
  357. column: {
  358. minWidth: 120,
  359. },
  360. form: {
  361. show:false,
  362. component: { placeholder: '请填写负责人' },
  363. rules: [{ required: false, message: '请填写负责人' }],
  364. },
  365. viewForm:{
  366. component: { placeholder: '' },
  367. rules: [{ required: true, message: '' }],
  368. }
  369. },
  370. status_display:{
  371. title: '状态',
  372. type: 'input',
  373. column: {
  374. minWidth: 120,
  375. },
  376. form: {
  377. show:false,
  378. component: { placeholder: '请填写负责人' },
  379. rules: [{ required: false, message: '请填写负责人' }],
  380. },
  381. viewForm:{
  382. component: { placeholder: '' },
  383. rules: [{ required: true, message: '' }],
  384. }
  385. },
  386. create_datetime:{
  387. title: '创建时间',
  388. type: 'datetime',
  389. column: {
  390. minWidth: 120,
  391. },
  392. form: {
  393. show:false,
  394. }
  395. }
  396. },
  397. },
  398. };
  399. };