settings.ts 8.3 KB

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