componentsConfig.js 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338
  1. export const basicComponents = [
  2. {
  3. type: 'input',
  4. icon: 'icon-input',
  5. options: {
  6. width: '100%',
  7. defaultValue: '',
  8. required: false,
  9. dataType: 'string',
  10. pattern: '',
  11. placeholder: '',
  12. disabled: false,
  13. maxlength: -1,
  14. showWordLimit: false,
  15. }
  16. },
  17. {
  18. type: 'textarea',
  19. icon: 'icon-diy-com-textarea',
  20. options: {
  21. width: '100%',
  22. defaultValue: '',
  23. required: false,
  24. disabled: false,
  25. pattern: '',
  26. placeholder: '',
  27. maxlength: -1,
  28. showWordLimit: false,
  29. }
  30. },
  31. {
  32. type: 'number',
  33. icon: 'icon-number',
  34. options: {
  35. width: '',
  36. required: false,
  37. defaultValue: 0,
  38. min: '',
  39. max: '',
  40. step: 1,
  41. disabled: false,
  42. controlsPosition: ''
  43. }
  44. },
  45. {
  46. type: 'radio',
  47. icon: 'icon-radio-active',
  48. options: {
  49. inline: false,
  50. defaultValue: '',
  51. showLabel: false,
  52. options: [
  53. {
  54. value: 'Option 1',
  55. label: 'Option 1'
  56. },
  57. {
  58. value: 'Option 2',
  59. label: 'Option 2'
  60. },
  61. {
  62. value: 'Option 3',
  63. label: 'Option 3'
  64. }
  65. ],
  66. required: false,
  67. width: '',
  68. remote: false,
  69. remoteOptions: [],
  70. props: {
  71. value: 'value',
  72. label: 'label'
  73. },
  74. remoteFunc: '',
  75. disabled: false,
  76. }
  77. },
  78. {
  79. type: 'checkbox',
  80. icon: 'icon-check-box',
  81. options: {
  82. inline: false,
  83. defaultValue: [],
  84. showLabel: false,
  85. options: [
  86. {
  87. value: 'Option 1'
  88. },
  89. {
  90. value: 'Option 2'
  91. },
  92. {
  93. value: 'Option 3'
  94. }
  95. ],
  96. required: false,
  97. width: '',
  98. remote: false,
  99. remoteOptions: [],
  100. props: {
  101. value: 'value',
  102. label: 'label'
  103. },
  104. remoteFunc: '',
  105. disabled: false,
  106. }
  107. },
  108. {
  109. type: 'time',
  110. icon: 'icon-time',
  111. options: {
  112. defaultValue: '21:19:56',
  113. readonly: false,
  114. disabled: false,
  115. editable: true,
  116. clearable: true,
  117. placeholder: '',
  118. startPlaceholder: '',
  119. endPlaceholder: '',
  120. isRange: false,
  121. arrowControl: true,
  122. format: 'HH:mm:ss',
  123. required: false,
  124. width: '',
  125. }
  126. },
  127. {
  128. type: 'date',
  129. icon: 'icon-date',
  130. options: {
  131. defaultValue: '',
  132. readonly: false,
  133. disabled: false,
  134. editable: true,
  135. clearable: true,
  136. placeholder: '',
  137. startPlaceholder: '',
  138. endPlaceholder: '',
  139. type: 'date',
  140. format: 'yyyy-MM-dd',
  141. timestamp: false,
  142. required: false,
  143. width: '',
  144. }
  145. },
  146. {
  147. type: 'rate',
  148. icon: 'icon-pingfen1',
  149. options: {
  150. defaultValue: null,
  151. max: 5,
  152. disabled: false,
  153. allowHalf: false,
  154. required: false
  155. }
  156. },
  157. {
  158. type: 'color',
  159. icon: 'icon-color',
  160. options: {
  161. defaultValue: '',
  162. disabled: false,
  163. showAlpha: false,
  164. required: false
  165. }
  166. },
  167. {
  168. type: 'select',
  169. icon: 'icon-select',
  170. options: {
  171. defaultValue: '',
  172. multiple: false,
  173. disabled: false,
  174. clearable: false,
  175. placeholder: '',
  176. required: false,
  177. showLabel: false,
  178. width: '',
  179. options: [
  180. {
  181. value: 'Option 1'
  182. },
  183. {
  184. value: 'Option 2'
  185. },{
  186. value: 'Option 3'
  187. }
  188. ],
  189. remote: false,
  190. filterable: false,
  191. remoteOptions: [],
  192. props: {
  193. value: 'value',
  194. label: 'label'
  195. },
  196. remoteFunc: ''
  197. }
  198. },
  199. {
  200. type: 'switch',
  201. icon: 'icon-switch',
  202. options: {
  203. defaultValue: false,
  204. required: false,
  205. disabled: false,
  206. }
  207. },
  208. {
  209. type: 'slider',
  210. icon: 'icon-slider',
  211. options: {
  212. defaultValue: 0,
  213. disabled: false,
  214. required: false,
  215. min: 0,
  216. max: 100,
  217. step: 1,
  218. showInput: false,
  219. range: false,
  220. width: ''
  221. }
  222. },
  223. {
  224. type: 'text',
  225. icon: 'icon-wenzishezhi-',
  226. options: {
  227. defaultValue: 'This is a text',
  228. customClass: '',
  229. }
  230. },
  231. {
  232. type: 'dynamicTable',
  233. icon: 'icon-wenzishezhi-',
  234. options: {
  235. tableData: [],
  236. columns1: [
  237. { prop: 'date', label: '日期', minWidth: '120', align: 'center', tooltip: true, resizable: true },
  238. { prop: 'age', label: '年龄', minWidth: '120', align: 'center', tooltip: true, resizable: true },
  239. { prop: 'gender', label: '性别', minWidth: '120', align: 'center', tooltip: true, resizable: true },
  240. { prop: 'name', label: '姓名', minWidth: '120', align: 'center', tooltip: true, resizable: true },
  241. { prop: 'address', label: '地址', minWidth: '120', align: 'center', tooltip: true, resizable: true }
  242. ],
  243. // showLabel: false,
  244. // width: '',
  245. // remote: false,
  246. tableColumns: [
  247. {
  248. prop: 'prop',
  249. label: '列1',
  250. },
  251. ],
  252. defaultValue: []
  253. }
  254. }
  255. ]
  256. export const advanceComponents = [
  257. {
  258. type: 'blank',
  259. icon: 'icon-zidingyishuju',
  260. options: {
  261. defaultType: 'String'
  262. }
  263. },
  264. {
  265. type: 'imgupload',
  266. icon: 'icon-tupian',
  267. options: {
  268. defaultValue: [],
  269. size: {
  270. width: 100,
  271. height: 100,
  272. },
  273. width: '',
  274. tokenFunc: 'funcGetToken',
  275. token: '',
  276. domain: 'https://tcdn.form.making.link/',
  277. disabled: false,
  278. length: 8,
  279. multiple: false,
  280. isQiniu: false,
  281. isDelete: false,
  282. min: 0,
  283. isEdit: false,
  284. action: 'https://tools-server.making.link/api/transfer'
  285. }
  286. },
  287. {
  288. type: 'editor',
  289. icon: 'icon-fuwenbenkuang',
  290. options: {
  291. defaultValue: '',
  292. width: ''
  293. }
  294. },
  295. {
  296. type: 'cascader',
  297. icon: 'icon-jilianxuanze',
  298. options: {
  299. defaultValue: [],
  300. width: '',
  301. placeholder: '',
  302. disabled: false,
  303. clearable: false,
  304. remote: true,
  305. remoteOptions: [],
  306. props: {
  307. value: 'value',
  308. label: 'label',
  309. children: 'children'
  310. },
  311. remoteFunc: ''
  312. }
  313. }
  314. ]
  315. export const layoutComponents = [
  316. {
  317. type: 'grid',
  318. icon: 'icon-grid-',
  319. columns: [
  320. {
  321. span: 12,
  322. list: []
  323. },
  324. {
  325. span: 12,
  326. list: []
  327. }
  328. ],
  329. options: {
  330. gutter: 0,
  331. justify: 'start',
  332. align: 'top'
  333. }
  334. }
  335. ]