crud.tsx 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  1. import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, UserPageQuery,compute } from '@fast-crud/fast-crud';
  2. import * as api from './api';
  3. import { auth } from '/@/utils/authFunction';
  4. export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
  5. const pageRequest = async (query: UserPageQuery) => {
  6. return await api.GetList(query);
  7. };
  8. const editRequest = async ({ form, row }: EditReq) => {
  9. form.id = row.id;
  10. return await api.UpdateObj(form);
  11. };
  12. const delRequest = async ({ row }: DelReq) => {
  13. return await api.DelObj(row.id);
  14. };
  15. const addRequest = async ({ form }: AddReq) => {
  16. return await api.AddObj(form);
  17. };
  18. return {
  19. crudOptions: {
  20. request: {
  21. pageRequest,
  22. addRequest,
  23. editRequest,
  24. delRequest,
  25. },
  26. form:{
  27. wrapper: {
  28. buttons: {
  29. ok:{
  30. text:'提交',
  31. show:compute((row) => {
  32. return row.mode !=='view'
  33. })
  34. }
  35. }
  36. }
  37. },
  38. actionbar: {
  39. buttons: {
  40. add: {
  41. show: auth('area:Create'),
  42. },
  43. },
  44. },
  45. toolbar:{
  46. show:false,
  47. },
  48. rowHandle:{
  49. buttons:{
  50. remove:{
  51. show:true,
  52. },
  53. edit:{
  54. show:true,
  55. }
  56. }
  57. },
  58. pagination: {
  59. show: true,
  60. },
  61. columns: {
  62. _index: {
  63. title: '序号',
  64. form: { show: false },
  65. column: {
  66. type: 'index',
  67. align: 'center',
  68. width: '70px',
  69. columnSetDisabled: true, //禁止在列设置中选择
  70. },
  71. },
  72. search:{
  73. title: '关键字搜索',
  74. search: { show: true,type: 'input', },
  75. type: 'input',
  76. form: {
  77. component: { placeholder: '请输入' },
  78. show:false},
  79. column: {show:false}
  80. },
  81. name: {
  82. title: '标签名称',
  83. search: {
  84. show: true,
  85. },
  86. treeNode: true,
  87. type: 'input',
  88. column: {
  89. Width: 200,
  90. },
  91. form: {
  92. rules: [
  93. // 表单校验规则
  94. { required: true, message: '名称必填项' },
  95. ],
  96. component: {
  97. placeholder: '请输入名称',
  98. },
  99. },
  100. viewForm:{
  101. component: { placeholder: '' },
  102. rules: [{ required: true, message: '' }],
  103. }
  104. },
  105. color:{
  106. title: '颜色',
  107. type: 'input',
  108. column: {
  109. show:false,
  110. Width: 220,
  111. },
  112. form: {
  113. value:'#FF5722',
  114. show:false,
  115. component: { placeholder: '请填写标签颜色' },
  116. rules: [{ required: true, message: '请填写标签颜色' }],
  117. },
  118. viewForm:{
  119. component: { placeholder: '' },
  120. rules: [{ required: true, message: '' }],
  121. }
  122. },
  123. description:{
  124. title: '标签描述',
  125. type: 'input',
  126. column: {
  127. width: 1000,
  128. },
  129. form: {
  130. component: { placeholder: '请填写标签描述' },
  131. rules: [{ required: false, message: '请填写标签描述' }],
  132. },
  133. viewForm:{
  134. component: { placeholder: '' },
  135. rules: [{ required: true, message: '' }],
  136. }
  137. },
  138. sort:{
  139. title: '排序',
  140. type: 'input',
  141. column: {
  142. minWidth: 120,
  143. },
  144. form: {
  145. value:1,
  146. show:false,
  147. component: { placeholder: '请填写排序' },
  148. rules: [{ required: false, message: '请填写排序' }],
  149. },
  150. viewForm:{
  151. component: { placeholder: '' },
  152. rules: [{ required: true, message: '' }],
  153. }
  154. },
  155. },
  156. },
  157. };
  158. };