settings.ts 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188
  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. // action: `/api/system/device/upload-image/`,
  118. name: "file",
  119. withCredentials: false,
  120. uploadRequest: async ({ action, file, onProgress }: { action: string; file: any; onProgress: Function }) => {
  121. // @ts-ignore
  122. const data = new FormData();
  123. data.append("file", file);
  124. return await request({
  125. url: action,
  126. method: "post",
  127. timeout: 60000,
  128. headers: {
  129. "Content-Type": "multipart/form-data"
  130. },
  131. data,
  132. onUploadProgress: (p: any) => {
  133. onProgress({percent: Math.round((p.loaded / p.total) * 100)});
  134. }
  135. });
  136. },
  137. successHandle(ret: any) {
  138. // 上传完成后的结果处理, 此处应返回格式为{url:xxx,key:xxx}
  139. return {
  140. url: getBaseURL(ret.data.url),
  141. // url: getBaseURL(ret.data.image_url),
  142. key: ret.data.id,
  143. ...ret.data
  144. };
  145. }
  146. },
  147. valueBuilder(context: any){
  148. const { row, key } = context
  149. return getBaseURL(row[key])
  150. }
  151. })
  152. setLogger({level: 'error'});
  153. // 设置自动染色
  154. const dictComponentList = ['dict-cascader', 'dict-checkbox', 'dict-radio', 'dict-switch', 'dict-tree'];
  155. dictComponentList.forEach((val) => {
  156. getType(val).column.component.color = 'auto';
  157. getType(val).column.align = 'center';
  158. });
  159. // 设置placeholder 的默认值
  160. const placeholderComponentList = [
  161. {key: 'text', placeholder: "请输入"},
  162. {key: 'textarea', placeholder: "请输入"},
  163. {key: 'input', placeholder: "请输入"},
  164. {key: 'password', placeholder: "请输入"}
  165. ]
  166. placeholderComponentList.forEach((val) => {
  167. if (getType(val.key)?.search?.component) {
  168. getType(val.key).search.component.placeholder = val.placeholder;
  169. } else if (getType(val.key)?.search) {
  170. getType(val.key).search.component = {placeholder: val.placeholder};
  171. }
  172. if (getType(val.key)?.form?.component) {
  173. getType(val.key).form.component.placeholder = val.placeholder;
  174. } else if (getType(val.key)?.form) {
  175. getType(val.key).form.component = {placeholder: val.placeholder};
  176. }
  177. if (getType(val.key)?.column?.align) {
  178. getType(val.key).column.align = 'center'
  179. } else if (getType(val.key)?.column) {
  180. getType(val.key).column = {align: 'center'};
  181. } else if (getType(val.key)) {
  182. getType(val.key).column = {align: 'center'};
  183. }
  184. });
  185. },
  186. };