settings.ts 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
  1. // 引入fast-crud
  2. import {FastCrud, useTypes} from '@fast-crud/fast-crud';
  3. const {getType} = useTypes();
  4. import '@fast-crud/fast-crud/dist/style.css';
  5. import {setLogger} from '@fast-crud/fast-crud';
  6. import {getBaseURL} from '/@/utils/baseUrl';
  7. // element
  8. import ui from '@fast-crud/ui-element';
  9. import {request} from '/@/utils/service';
  10. //扩展包
  11. import {FsExtendsEditor, FsExtendsUploader } from '@fast-crud/fast-extends';
  12. import '@fast-crud/fast-extends/dist/style.css';
  13. import {successNotification} from '/@/utils/message';
  14. import XEUtils from "xe-utils";
  15. export default {
  16. async install(app: any, options: any) {
  17. // 先安装ui
  18. app.use(ui);
  19. // 然后安装FastCrud
  20. app.use(FastCrud, {
  21. //i18n, //i18n配置,可选,默认使用中文,具体用法请看demo里的 src/i18n/index.js 文件
  22. // 此处配置公共的dictRequest(字典请求)
  23. async dictRequest({dict,url}: any) {
  24. const {isTree} = dict
  25. //根据dict的url,异步返回一个字典数组
  26. return await request({url: url, params: dict.params || {}}).then((res: any) => {
  27. if (isTree) {
  28. return XEUtils.toArrayTree(res.data, {parentKey: 'parent'})
  29. }
  30. return res.data
  31. });
  32. },
  33. //公共crud配置
  34. commonOptions() {
  35. return {
  36. request: {
  37. //接口请求配置
  38. //你项目后台接口大概率与fast-crud所需要的返回结构不一致,所以需要配置此项
  39. //请参考文档http://fast-crud.docmirror.cn/api/crud-options/request.html
  40. transformQuery: ({page, form, sort}: any) => {
  41. if (sort.asc !== undefined) {
  42. form['ordering'] = `${sort.asc ? '' : '-'}${sort.prop}`;
  43. }
  44. //转换为你pageRequest所需要的请求参数结构
  45. return {page: page.currentPage, limit: page.pageSize, ...form};
  46. },
  47. transformRes: ({res}: any) => {
  48. //将pageRequest的返回数据,转换为fast-crud所需要的格式
  49. //return {records,currentPage,pageSize,total};
  50. // 检查返回的数据结构
  51. if (res && res.data) {
  52. // 如果data.items存在且是数组
  53. if (res.data.items && Array.isArray(res.data.items)) {
  54. return {
  55. records: res.data.items,
  56. currentPage: res.page||res.data.page || 1,
  57. pageSize: res.limit || res.data.limit || 20,
  58. total: res.data.total || res.total || res.data.items.length
  59. };
  60. }
  61. // 如果data本身就是数组
  62. else if (Array.isArray(res.data)) {
  63. return {
  64. records: res.data,
  65. currentPage: res.page || 1,
  66. pageSize: res.limit || 20,
  67. total: res.total || res.data.length
  68. };
  69. }
  70. // 其他情况
  71. return {
  72. records: res.data,
  73. currentPage: res.page || 1,
  74. pageSize: res.limit || 20,
  75. total: res.total || 0
  76. };
  77. }
  78. },
  79. },
  80. form: {
  81. afterSubmit(ctx: any) {
  82. // 增加crud提示
  83. if (ctx.res.code == 2000) {
  84. successNotification(ctx.res.msg);
  85. }
  86. },
  87. },
  88. /* search: {
  89. layout: 'multi-line',
  90. collapse: true,
  91. col: {
  92. span: 4,
  93. },
  94. options: {
  95. labelCol: {
  96. style: {
  97. width: '100px',
  98. },
  99. },
  100. },
  101. }, */
  102. };
  103. },
  104. logger: { off: { tableColumns: false } }
  105. });
  106. //富文本
  107. app.use(FsExtendsEditor, {
  108. wangEditor: {
  109. width: 300,
  110. },
  111. });
  112. // 文件上传
  113. app.use(FsExtendsUploader, {
  114. defaultType: "form",
  115. form: {
  116. action: `/api/system/file/`,
  117. name: "file",
  118. withCredentials: false,
  119. uploadRequest: async ({ action, file, onProgress }: { action: string; file: any; onProgress: Function }) => {
  120. // @ts-ignore
  121. const data = new FormData();
  122. data.append("file", file);
  123. return await request({
  124. url: action,
  125. method: "post",
  126. timeout: 60000,
  127. headers: {
  128. "Content-Type": "multipart/form-data"
  129. },
  130. data,
  131. onUploadProgress: (p: any) => {
  132. onProgress({percent: Math.round((p.loaded / p.total) * 100)});
  133. }
  134. });
  135. },
  136. successHandle(ret: any) {
  137. // 上传完成后的结果处理, 此处应返回格式为{url:xxx,key:xxx}
  138. return {
  139. url: getBaseURL(ret.data.url),
  140. key: ret.data.id,
  141. ...ret.data
  142. };
  143. }
  144. },
  145. valueBuilder(context: any){
  146. const { row, key } = context
  147. return getBaseURL(row[key])
  148. }
  149. })
  150. setLogger({level: 'error'});
  151. // 设置自动染色
  152. const dictComponentList = ['dict-cascader', 'dict-checkbox', 'dict-radio', 'dict-select', 'dict-switch', 'dict-tree'];
  153. dictComponentList.forEach((val) => {
  154. getType(val).column.component.color = 'auto';
  155. getType(val).column.align = 'center';
  156. });
  157. // 设置placeholder 的默认值
  158. const placeholderComponentList = [
  159. {key: 'text', placeholder: "请输入"},
  160. {key: 'textarea', placeholder: "请输入"},
  161. {key: 'input', placeholder: "请输入"},
  162. {key: 'password', placeholder: "请输入"}
  163. ]
  164. placeholderComponentList.forEach((val) => {
  165. if (getType(val.key)?.search?.component) {
  166. getType(val.key).search.component.placeholder = val.placeholder;
  167. } else if (getType(val.key)?.search) {
  168. getType(val.key).search.component = {placeholder: val.placeholder};
  169. }
  170. if (getType(val.key)?.form?.component) {
  171. getType(val.key).form.component.placeholder = val.placeholder;
  172. } else if (getType(val.key)?.form) {
  173. getType(val.key).form.component = {placeholder: val.placeholder};
  174. }
  175. if (getType(val.key)?.column?.align) {
  176. getType(val.key).column.align = 'center'
  177. } else if (getType(val.key)?.column) {
  178. getType(val.key).column = {align: 'center'};
  179. } else if (getType(val.key)) {
  180. getType(val.key).column = {align: 'center'};
  181. }
  182. });
  183. },
  184. };