crud.tsx 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202
  1. import { CreateCrudOptionsProps, CreateCrudOptionsRet, AddReq, DelReq, EditReq, dict, compute } from '@fast-crud/fast-crud';
  2. import * as api from './api';
  3. import { dictionary } from '/@/utils/dictionary';
  4. import { successMessage } from '../../../utils/message';
  5. import { auth } from '/@/utils/authFunction';
  6. /**
  7. *
  8. * @param crudExpose:index传递过来的示例
  9. * @param context:index传递过来的自定义参数
  10. * @returns
  11. */
  12. export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
  13. const pageRequest = async (query: any) => {
  14. return await api.GetList(query);
  15. };
  16. const editRequest = async ({ form, row }: EditReq) => {
  17. form.id = row.id;
  18. return await api.UpdateObj(form);
  19. };
  20. const delRequest = async ({ row }: DelReq) => {
  21. return await api.DelObj(row.id);
  22. };
  23. const addRequest = async ({ form }: AddReq) => {
  24. return await api.AddObj(form);
  25. };
  26. return {
  27. crudOptions: {
  28. toolbar:{
  29. buttons:{
  30. search:{show:false},
  31. // 刷新按钮
  32. refresh:{
  33. show:false},
  34. // 紧凑模式
  35. compact:{show:false},
  36. // 导出按钮
  37. export:{
  38. text: '导出',
  39. type: 'primary',
  40. size: 'small',
  41. icon: 'upload',
  42. circle: false,
  43. show: false
  44. },
  45. // 列设置按钮
  46. columns:{
  47. show:false
  48. },
  49. }
  50. },
  51. request: {
  52. pageRequest,
  53. addRequest,
  54. editRequest,
  55. delRequest,
  56. },
  57. pagination: {
  58. show: true,
  59. },
  60. actionbar: {
  61. buttons: {
  62. add: {
  63. show: auth('role:Create'),
  64. },
  65. },
  66. },
  67. rowHandle: {
  68. //固定右侧
  69. fixed: 'right',
  70. width: 320,
  71. buttons: {
  72. view: {
  73. show: true,
  74. },
  75. edit: {
  76. show: auth('role:Update'),
  77. },
  78. remove: {
  79. show: auth('role:Delete'),
  80. },
  81. permission: {
  82. type: 'primary',
  83. text: '权限配置',
  84. show: auth('role:Permission'),
  85. click: (clickContext: any): void => {
  86. const { row } = clickContext;
  87. context.RoleDrawer.handleDrawerOpen(row);
  88. context.RoleMenuBtn.setState([]);
  89. context.RoleMenuField.setState([]);
  90. },
  91. },
  92. },
  93. },
  94. form: {
  95. col: { span: 24 },
  96. labelWidth: '100px',
  97. wrapper: {
  98. is: 'el-dialog',
  99. width: '600px',
  100. buttons: {
  101. ok:{
  102. text:'提交',
  103. show:compute((row) => {
  104. return row.mode !=='view'
  105. })
  106. }
  107. }
  108. },
  109. },
  110. columns: {
  111. _index: {
  112. title: '序号',
  113. form: { show: false },
  114. column: {
  115. type: 'index',
  116. align: 'center',
  117. width: '70px',
  118. columnSetDisabled: true, //禁止在列设置中选择
  119. },
  120. },
  121. id: {
  122. title: 'ID',
  123. column: { show: false },
  124. search: { show: false },
  125. form: { show: false },
  126. },
  127. name: {
  128. title: '角色名称',
  129. search: { show: true },
  130. column: {
  131. minWidth: 120,
  132. sortable: 'custom',
  133. },
  134. form: {
  135. rules: [{ required: true, message: '角色名称必填' }],
  136. component: {
  137. placeholder: '请输入角色名称',
  138. },
  139. },
  140. },
  141. key: {
  142. title: '权限标识',
  143. search: { show: false },
  144. column: {
  145. minWidth: 120,
  146. sortable: 'custom',
  147. columnSetDisabled: true,
  148. },
  149. form: {
  150. rules: [{ required: true, message: '权限标识必填' }],
  151. component: {
  152. placeholder: '输入权限标识',
  153. },
  154. },
  155. valueBuilder(context) {
  156. const { row, key } = context;
  157. return row[key];
  158. },
  159. },
  160. sort: {
  161. title: '排序',
  162. search: { show: false },
  163. type: 'number',
  164. column: {
  165. minWidth: 90,
  166. sortable: 'custom',
  167. },
  168. form: {
  169. rules: [{ required: true, message: '排序必填' }],
  170. value: 1,
  171. },
  172. },
  173. status: {
  174. title: '状态',
  175. search: { show: true },
  176. type: 'dict-radio',
  177. column: {
  178. width: 100,
  179. component: {
  180. name: 'fs-dict-switch',
  181. activeText: '',
  182. inactiveText: '',
  183. style: '--el-switch-on-color: var(--el-color-primary); --el-switch-off-color: #dcdfe6',
  184. onChange: compute((context) => {
  185. return () => {
  186. api.UpdateObj(context.row).then((res: APIResponseData) => {
  187. successMessage(res.msg as string);
  188. });
  189. };
  190. }),
  191. },
  192. },
  193. dict: dict({
  194. value: dictionary('button_status_bool'),
  195. }),
  196. },
  197. },
  198. },
  199. };
  200. };