crud.tsx 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292
  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. import { useRouter } from 'vue-router';
  9. export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
  10. const router = useRouter();
  11. const pageRequest = async (query: UserPageQuery) => {
  12. return await api.GetList(query);
  13. };
  14. const editRequest = async ({ form, row }: EditReq) => {
  15. form.id = row.id;
  16. return await api.UpdateObj(form);
  17. };
  18. const delRequest = async ({ row }: DelReq) => {
  19. return await api.DelObj({id:row.id});
  20. };
  21. const addRequest = async ({ form }: AddReq) => {
  22. return await api.AddObj(form);
  23. };
  24. /**
  25. * 懒加载
  26. * @param row
  27. * @returns {Promise<unknown>}
  28. */
  29. const loadContentMethod = (tree: any, treeNode: any, resolve: Function) => {
  30. pageRequest({ pcode: tree.code }).then((res: APIResponseData) => {
  31. resolve(res.data);
  32. });
  33. };
  34. return {
  35. crudOptions: {
  36. toolbar:{
  37. buttons:{
  38. search:{show:false},
  39. // 刷新按钮
  40. refresh:{show:false},
  41. // 紧凑模式
  42. compact:{show:false},
  43. // 导出按钮
  44. export:{
  45. text: '导出',
  46. type: 'primary',
  47. size: 'small',
  48. icon: 'upload',
  49. circle: false,
  50. display: true
  51. },
  52. // 列设置按钮
  53. columns:{
  54. show:false
  55. },
  56. }
  57. },
  58. request: {
  59. pageRequest,
  60. addRequest,
  61. editRequest,
  62. delRequest,
  63. },
  64. actionbar: {
  65. buttons: {
  66. add: {
  67. show: true, // 允许添加标签类别
  68. },
  69. },
  70. },
  71. rowHandle: {
  72. //固定右侧
  73. fixed: 'right',
  74. width: 200,
  75. buttons: {
  76. view: {
  77. show: false, // 移除查看按钮,因为标签类别不需要详情页
  78. },
  79. edit: {
  80. iconRight: 'Edit',
  81. type: 'text',
  82. show: true, // 允许编辑标签类别
  83. },
  84. remove: {
  85. iconRight: 'Delete',
  86. type: 'text',
  87. show: true, // 允许删除标签类别
  88. },
  89. },
  90. },
  91. pagination: {
  92. show: true,
  93. },
  94. table: {
  95. rowKey: 'id',
  96. },
  97. search: {
  98. show: true,
  99. buttons: {
  100. search: {
  101. size: 'small', // 设置查询按钮大小为small
  102. },
  103. reset: {
  104. size: 'small', // 设置重置按钮大小为small
  105. }
  106. }
  107. },
  108. columns: {
  109. _index: {
  110. title: '序号',
  111. form: { show: false },
  112. column: {
  113. type: 'index',
  114. align: 'center',
  115. width: '70px',
  116. columnSetDisabled: true, //禁止在列设置中选择
  117. },
  118. },
  119. name: {
  120. title: '分类名称',
  121. search: {
  122. show: true,
  123. component: {
  124. placeholder: '请输入分类名称',
  125. },
  126. size: 'small',
  127. col:{ span:3},
  128. },
  129. type: 'input',
  130. column: {
  131. minWidth: 120,
  132. },
  133. form: {
  134. rules: [
  135. { required: true, message: '分类名称为必填项' },
  136. ],
  137. },
  138. },
  139. description: {
  140. title: '描述',
  141. search: {
  142. show: true,
  143. component: {
  144. placeholder: '请输入描述',
  145. },
  146. size: 'small',
  147. col:{ span:3},
  148. },
  149. type: 'textarea',
  150. column: {
  151. minWidth: 150,
  152. showOverflowTooltip: true,
  153. },
  154. form: {
  155. component: {
  156. span: 24,
  157. placeholder: '请输入标签描述',
  158. },
  159. },
  160. },
  161. /* icon: {
  162. title: '图标',
  163. type: 'icon-selector',
  164. column: {
  165. minWidth: 80,
  166. component: {
  167. name: 'fs-icon',
  168. props: {
  169. icon: (scope: any) => {
  170. return typeof scope.row.icon === 'string' ? scope.row.icon : '';
  171. }
  172. }
  173. }
  174. },
  175. form: {
  176. component: {
  177. placeholder: '请选择图标'
  178. }
  179. }
  180. }, */
  181. /* color: {
  182. title: '颜色',
  183. type: 'colorpicker',
  184. column: {
  185. minWidth: 100,
  186. component: {
  187. name: 'fs-color-block',
  188. },
  189. },
  190. form: {
  191. value: '#1890ff', // 默认颜色
  192. },
  193. }, */
  194. sort: {
  195. title: '排序',
  196. type: 'number',
  197. column: {
  198. minWidth: 80,
  199. },
  200. form: {
  201. value: 1, // 默认排序值
  202. component: {
  203. placeholder: '请输入排序值,数字越小越靠前'
  204. }
  205. },
  206. },
  207. /* status: {
  208. title: '状态',
  209. type: 'dict-switch',
  210. column: {
  211. minWidth: 90,
  212. component: {
  213. name: 'fs-dict-switch',
  214. },
  215. },
  216. dict: dict({
  217. data: [
  218. { value: true, label: '启用' },
  219. { value: false, label: '禁用' },
  220. ],
  221. }),
  222. form: {
  223. value: true, // 默认启用
  224. },
  225. },
  226. is_default: {
  227. title: '默认分类',
  228. type: 'dict-switch',
  229. column: {
  230. minWidth: 100,
  231. component: {
  232. name: 'fs-dict-switch',
  233. },
  234. },
  235. dict: dict({
  236. data: [
  237. { value: true, label: '是' },
  238. { value: false, label: '否' },
  239. ],
  240. }),
  241. form: {
  242. value: false, // 默认非默认分类
  243. },
  244. }, */
  245. tags_count: {
  246. title: '标签数量',
  247. type: 'number',
  248. column: {
  249. minWidth: 100,
  250. },
  251. form: {
  252. show: false, // 表单中不显示,由系统自动计算
  253. },
  254. },
  255. questions_count: {
  256. title: '问题数量',
  257. type: 'number',
  258. column: {
  259. minWidth: 100,
  260. },
  261. form: {
  262. show: false, // 表单中不显示,由系统自动计算
  263. },
  264. },
  265. create_datetime: {
  266. title: '创建时间',
  267. type: 'datetime',
  268. column: {
  269. minWidth: 160,
  270. },
  271. form: {
  272. show: false, // 表单中不显示,由系统自动生成
  273. },
  274. },
  275. update_datetime: {
  276. title: '更新时间',
  277. type: 'datetime',
  278. column: {
  279. minWidth: 160,
  280. },
  281. form: {
  282. show: false, // 表单中不显示,由系统自动更新
  283. },
  284. },
  285. },
  286. },
  287. };
  288. };