settings.ts 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196
  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) || res.data.results && Array.isArray(res.data.results)) {
  54. const records = res.data.items || res.data.results || [];
  55. return {
  56. records: records,
  57. currentPage: res.page || res.data.page || 1,
  58. pageSize: res.limit || res.data.limit || 20,
  59. total: res.data.total || res.total || records.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. // 如果res或res.data不存在,返回空数据
  80. return {
  81. records: [],
  82. currentPage: 1,
  83. pageSize: 20,
  84. total: 0
  85. };
  86. },
  87. },
  88. form: {
  89. afterSubmit(ctx: any) {
  90. // 增加crud提示
  91. if (ctx.mode !== 'view') { // 只在非查看模式下显示提示
  92. if (ctx.res.code == 2000) {
  93. successNotification(ctx.res.msg || '操作成功');
  94. }
  95. }
  96. },
  97. },
  98. /* search: {
  99. layout: 'multi-line',
  100. collapse: true,
  101. col: {
  102. span: 4,
  103. },
  104. options: {
  105. labelCol: {
  106. style: {
  107. width: '100px',
  108. },
  109. },
  110. },
  111. }, */
  112. };
  113. },
  114. logger: { off: { tableColumns: false } }
  115. });
  116. //富文本
  117. app.use(FsExtendsEditor, {
  118. wangEditor: {
  119. width: 300,
  120. },
  121. });
  122. // 文件上传
  123. app.use(FsExtendsUploader, {
  124. defaultType: "form",
  125. form: {
  126. action: `/api/system/file/`,
  127. name: "file",
  128. withCredentials: false,
  129. uploadRequest: async ({ action, file, onProgress }: { action: string; file: any; onProgress: Function }) => {
  130. // @ts-ignore
  131. const data = new FormData();
  132. data.append("file", file);
  133. return await request({
  134. url: action,
  135. method: "post",
  136. timeout: 60000,
  137. headers: {
  138. "Content-Type": "multipart/form-data"
  139. },
  140. data,
  141. onUploadProgress: (p: any) => {
  142. onProgress({percent: Math.round((p.loaded / p.total) * 100)});
  143. }
  144. });
  145. },
  146. successHandle(ret: any) {
  147. // 上传完成后的结果处理, 此处应返回格式为{url:xxx,key:xxx}
  148. return {
  149. url: getBaseURL(ret.data.url),
  150. key: ret.data.id,
  151. ...ret.data
  152. };
  153. }
  154. },
  155. valueBuilder(context: any){
  156. const { row, key } = context
  157. return getBaseURL(row[key])
  158. }
  159. })
  160. setLogger({level: 'error'});
  161. // 设置自动染色
  162. const dictComponentList = ['dict-cascader', 'dict-checkbox', 'dict-radio', 'dict-select', 'dict-switch', 'dict-tree'];
  163. dictComponentList.forEach((val) => {
  164. getType(val).column.component.color = 'auto';
  165. getType(val).column.align = 'center';
  166. });
  167. // 设置placeholder 的默认值
  168. const placeholderComponentList = [
  169. {key: 'text', placeholder: "请输入"},
  170. {key: 'textarea', placeholder: "请输入"},
  171. {key: 'input', placeholder: "请输入"},
  172. {key: 'password', placeholder: "请输入"}
  173. ]
  174. placeholderComponentList.forEach((val) => {
  175. if (getType(val.key)?.search?.component) {
  176. getType(val.key).search.component.placeholder = val.placeholder;
  177. } else if (getType(val.key)?.search) {
  178. getType(val.key).search.component = {placeholder: val.placeholder};
  179. }
  180. if (getType(val.key)?.form?.component) {
  181. getType(val.key).form.component.placeholder = val.placeholder;
  182. } else if (getType(val.key)?.form) {
  183. getType(val.key).form.component = {placeholder: val.placeholder};
  184. }
  185. if (getType(val.key)?.column?.align) {
  186. getType(val.key).column.align = 'center'
  187. } else if (getType(val.key)?.column) {
  188. getType(val.key).column = {align: 'center'};
  189. } else if (getType(val.key)) {
  190. getType(val.key).column = {align: 'center'};
  191. }
  192. });
  193. },
  194. };