crud.tsx 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202
  1. import * as api from './api';
  2. import { dict, UserPageQuery, AddReq, DelReq, EditReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet } from '@fast-crud/fast-crud';
  3. import { dictionary } from '/@/utils/dictionary';
  4. import { successMessage } from '/@/utils/message';
  5. import { auth } from '/@/utils/authFunction';
  6. import tableSelector from '/@/components/tableSelector/index.vue';
  7. import { shallowRef } from 'vue';
  8. export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
  9. const pageRequest = async (query: UserPageQuery) => {
  10. return await api.GetList(query);
  11. };
  12. const editRequest = async ({ form, row }: EditReq) => {
  13. form.id = row.id;
  14. return await api.UpdateObj(form);
  15. };
  16. const delRequest = async ({ row }: DelReq) => {
  17. return await api.DelObj(row.id);
  18. };
  19. const addRequest = async ({ form }: AddReq) => {
  20. return await api.AddObj(form);
  21. };
  22. /**
  23. * 懒加载
  24. * @param row
  25. * @returns {Promise<unknown>}
  26. */
  27. const loadContentMethod = (tree: any, treeNode: any, resolve: Function) => {
  28. pageRequest({ pcode: tree.code }).then((res: APIResponseData) => {
  29. resolve(res.data);
  30. });
  31. };
  32. return {
  33. crudOptions: {
  34. request: {
  35. pageRequest,
  36. addRequest,
  37. editRequest,
  38. delRequest,
  39. },
  40. actionbar: {
  41. buttons: {
  42. add: {
  43. show: auth('area:Create'),
  44. },
  45. },
  46. },
  47. rowHandle: {
  48. //固定右侧
  49. fixed: 'right',
  50. width: 200,
  51. buttons: {
  52. view: {
  53. show: false,
  54. },
  55. edit: {
  56. iconRight: 'Edit',
  57. type: 'text',
  58. show: auth('area:Update'),
  59. },
  60. remove: {
  61. iconRight: 'Delete',
  62. type: 'text',
  63. show: auth('area:Delete'),
  64. },
  65. },
  66. },
  67. pagination: {
  68. show: true,
  69. },
  70. table: {
  71. rowKey: 'id',
  72. lazy: true,
  73. load: loadContentMethod,
  74. treeProps: { children: 'children', hasChildren: 'hasChild' },
  75. },
  76. columns: {
  77. _index: {
  78. title: '序号',
  79. form: { show: false },
  80. column: {
  81. type: 'index',
  82. align: 'center',
  83. width: '70px',
  84. columnSetDisabled: true, //禁止在列设置中选择
  85. },
  86. },
  87. name: {
  88. title: '名称',
  89. search: {
  90. show: true,
  91. },
  92. treeNode: true,
  93. type: 'input',
  94. column: {
  95. minWidth: 120,
  96. },
  97. form: {
  98. rules: [
  99. // 表单校验规则
  100. { required: true, message: '名称必填项' },
  101. ],
  102. component: {
  103. placeholder: '请输入名称',
  104. },
  105. },
  106. },
  107. pcode: {
  108. title: '父级地区',
  109. search: {
  110. disabled: true,
  111. },
  112. width: 130,
  113. type: 'table-selector',
  114. form: {
  115. component: {
  116. name: shallowRef(tableSelector),
  117. vModel: 'modelValue',
  118. displayLabel: compute(({ row }) => {
  119. if (row) {
  120. return row.pcode_info;
  121. }
  122. return null;
  123. }),
  124. tableConfig: {
  125. url: '/api/system/area/',
  126. label: 'name',
  127. value: 'id',
  128. isTree: true,
  129. isMultiple: false,
  130. lazy: true,
  131. load: loadContentMethod,
  132. treeProps: { children: 'children', hasChildren: 'hasChild' },
  133. columns: [
  134. {
  135. prop: 'name',
  136. label: '地区',
  137. width: 150,
  138. },
  139. {
  140. prop: 'code',
  141. label: '地区编码',
  142. },
  143. ],
  144. },
  145. },
  146. },
  147. column: {
  148. show: false,
  149. },
  150. },
  151. code: {
  152. title: '地区编码',
  153. search: {
  154. show: true,
  155. },
  156. type: 'input',
  157. column: {
  158. minWidth: 90,
  159. },
  160. form: {
  161. rules: [
  162. // 表单校验规则
  163. { required: true, message: '地区编码必填项' },
  164. ],
  165. component: {
  166. placeholder: '请输入地区编码',
  167. },
  168. },
  169. },
  170. enable: {
  171. title: '是否启用',
  172. search: {
  173. show: true,
  174. },
  175. type: 'dict-radio',
  176. column: {
  177. minWidth: 90,
  178. component: {
  179. name: 'fs-dict-switch',
  180. activeText: '',
  181. inactiveText: '',
  182. style: '--el-switch-on-color: var(--el-color-primary); --el-switch-off-color: #dcdfe6',
  183. onChange: compute((context) => {
  184. return () => {
  185. api.UpdateObj(context.row).then((res: APIResponseData) => {
  186. successMessage(res.msg as string);
  187. });
  188. };
  189. }),
  190. },
  191. },
  192. dict: dict({
  193. data: dictionary('button_status_bool'),
  194. }),
  195. },
  196. },
  197. },
  198. };
  199. };