config.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630
  1. // 表单属性【右面板】
  2. export const formConf = {
  3. formRef: 'elForm',
  4. formModel: 'formData',
  5. size: 'medium',
  6. labelPosition: 'right',
  7. labelWidth: 100,
  8. formRules: 'rules',
  9. gutter: 15,
  10. disabled: false,
  11. span: 24,
  12. formBtns: true
  13. }
  14. // 输入型组件 【左面板】
  15. export const inputComponents = [
  16. {
  17. // 组件的自定义配置
  18. __config__: {
  19. label: '单行文本',
  20. labelWidth: null,
  21. showLabel: true,
  22. changeTag: true,
  23. tag: 'el-input',
  24. tagIcon: 'input',
  25. defaultValue: undefined,
  26. required: true,
  27. layout: 'colFormItem',
  28. span: 24,
  29. document: 'https://element.eleme.cn/#/zh-CN/component/input',
  30. // 正则校验规则
  31. regList: []
  32. },
  33. // 组件的插槽属性
  34. __slot__: {
  35. prepend: '',
  36. append: ''
  37. },
  38. // 其余的为可直接写在组件标签上的属性
  39. placeholder: '请输入',
  40. style: { width: '100%' },
  41. clearable: true,
  42. 'prefix-icon': '',
  43. 'suffix-icon': '',
  44. maxlength: null,
  45. 'show-word-limit': false,
  46. readonly: false,
  47. disabled: false
  48. },
  49. {
  50. __config__: {
  51. label: '多行文本',
  52. labelWidth: null,
  53. showLabel: true,
  54. tag: 'el-input',
  55. tagIcon: 'textarea',
  56. defaultValue: undefined,
  57. required: true,
  58. layout: 'colFormItem',
  59. span: 24,
  60. regList: [],
  61. changeTag: true,
  62. document: 'https://element.eleme.cn/#/zh-CN/component/input'
  63. },
  64. type: 'textarea',
  65. placeholder: '请输入',
  66. autosize: {
  67. minRows: 4,
  68. maxRows: 4
  69. },
  70. style: { width: '100%' },
  71. maxlength: null,
  72. 'show-word-limit': false,
  73. readonly: false,
  74. disabled: false
  75. },
  76. {
  77. __config__: {
  78. label: '密码',
  79. showLabel: true,
  80. labelWidth: null,
  81. changeTag: true,
  82. tag: 'el-input',
  83. tagIcon: 'password',
  84. defaultValue: undefined,
  85. layout: 'colFormItem',
  86. span: 24,
  87. required: true,
  88. regList: [],
  89. document: 'https://element.eleme.cn/#/zh-CN/component/input'
  90. },
  91. __slot__: {
  92. prepend: '',
  93. append: ''
  94. },
  95. placeholder: '请输入',
  96. 'show-password': true,
  97. style: { width: '100%' },
  98. clearable: true,
  99. 'prefix-icon': '',
  100. 'suffix-icon': '',
  101. maxlength: null,
  102. 'show-word-limit': false,
  103. readonly: false,
  104. disabled: false
  105. },
  106. {
  107. __config__: {
  108. label: '计数器',
  109. showLabel: true,
  110. changeTag: true,
  111. labelWidth: null,
  112. tag: 'el-input-number',
  113. tagIcon: 'number',
  114. defaultValue: undefined,
  115. span: 24,
  116. layout: 'colFormItem',
  117. required: true,
  118. regList: [],
  119. document: 'https://element.eleme.cn/#/zh-CN/component/input-number'
  120. },
  121. placeholder: '',
  122. min: undefined,
  123. max: undefined,
  124. step: 1,
  125. 'step-strictly': false,
  126. precision: undefined,
  127. 'controls-position': '',
  128. disabled: false
  129. },
  130. {
  131. __config__: {
  132. label: '编辑器',
  133. showLabel: true,
  134. changeTag: true,
  135. labelWidth: null,
  136. tag: 'tinymce',
  137. tagIcon: 'rich-text',
  138. defaultValue: null,
  139. span: 24,
  140. layout: 'colFormItem',
  141. required: true,
  142. regList: [],
  143. document: 'http://tinymce.ax-z.cn'
  144. },
  145. placeholder: '请输入',
  146. height: 300, // 编辑器高度
  147. branding: false // 隐藏右下角品牌烙印
  148. }
  149. ]
  150. // 选择型组件 【左面板】
  151. export const selectComponents = [
  152. {
  153. __config__: {
  154. label: '下拉选择',
  155. showLabel: true,
  156. labelWidth: null,
  157. tag: 'el-select',
  158. tagIcon: 'select',
  159. layout: 'colFormItem',
  160. span: 24,
  161. required: true,
  162. regList: [],
  163. changeTag: true,
  164. document: 'https://element.eleme.cn/#/zh-CN/component/select'
  165. },
  166. __slot__: {
  167. options: [{
  168. label: '选项一',
  169. value: 1
  170. }, {
  171. label: '选项二',
  172. value: 2
  173. }]
  174. },
  175. placeholder: '请选择',
  176. style: { width: '100%' },
  177. clearable: true,
  178. disabled: false,
  179. filterable: false,
  180. multiple: false
  181. },
  182. {
  183. __config__: {
  184. label: '级联选择',
  185. url: 'https://www.fastmock.site/mock/f8d7a54fb1e60561e2f720d5a810009d/fg/cascaderList',
  186. method: 'get',
  187. dataPath: 'list',
  188. dataConsumer: 'options',
  189. showLabel: true,
  190. labelWidth: null,
  191. tag: 'el-cascader',
  192. tagIcon: 'cascader',
  193. layout: 'colFormItem',
  194. defaultValue: [],
  195. dataType: 'dynamic',
  196. span: 24,
  197. required: true,
  198. regList: [],
  199. changeTag: true,
  200. document: 'https://element.eleme.cn/#/zh-CN/component/cascader'
  201. },
  202. options: [{
  203. id: 1,
  204. value: 1,
  205. label: '选项1',
  206. children: [{
  207. id: 2,
  208. value: 2,
  209. label: '选项1-1'
  210. }]
  211. }],
  212. placeholder: '请选择',
  213. style: { width: '100%' },
  214. props: {
  215. props: {
  216. multiple: false,
  217. label: 'label',
  218. value: 'value',
  219. children: 'children'
  220. }
  221. },
  222. 'show-all-levels': true,
  223. disabled: false,
  224. clearable: true,
  225. filterable: false,
  226. separator: '/'
  227. },
  228. {
  229. __config__: {
  230. label: '单选框组',
  231. labelWidth: null,
  232. showLabel: true,
  233. tag: 'el-radio-group',
  234. tagIcon: 'radio',
  235. changeTag: true,
  236. defaultValue: undefined,
  237. layout: 'colFormItem',
  238. span: 24,
  239. optionType: 'default',
  240. regList: [],
  241. required: true,
  242. border: false,
  243. document: 'https://element.eleme.cn/#/zh-CN/component/radio'
  244. },
  245. __slot__: {
  246. options: [{
  247. label: '选项一',
  248. value: 1
  249. }, {
  250. label: '选项二',
  251. value: 2
  252. }]
  253. },
  254. style: {},
  255. size: 'medium',
  256. disabled: false
  257. },
  258. {
  259. __config__: {
  260. label: '多选框组',
  261. tag: 'el-checkbox-group',
  262. tagIcon: 'checkbox',
  263. defaultValue: [],
  264. span: 24,
  265. showLabel: true,
  266. labelWidth: null,
  267. layout: 'colFormItem',
  268. optionType: 'default',
  269. required: true,
  270. regList: [],
  271. changeTag: true,
  272. border: false,
  273. document: 'https://element.eleme.cn/#/zh-CN/component/checkbox'
  274. },
  275. __slot__: {
  276. options: [{
  277. label: '选项一',
  278. value: 1
  279. }, {
  280. label: '选项二',
  281. value: 2
  282. }]
  283. },
  284. style: {},
  285. size: 'medium',
  286. min: null,
  287. max: null,
  288. disabled: false
  289. },
  290. {
  291. __config__: {
  292. label: '开关',
  293. tag: 'el-switch',
  294. tagIcon: 'switch',
  295. defaultValue: false,
  296. span: 24,
  297. showLabel: true,
  298. labelWidth: null,
  299. layout: 'colFormItem',
  300. required: true,
  301. regList: [],
  302. changeTag: true,
  303. document: 'https://element.eleme.cn/#/zh-CN/component/switch'
  304. },
  305. style: {},
  306. disabled: false,
  307. 'active-text': '',
  308. 'inactive-text': '',
  309. 'active-color': null,
  310. 'inactive-color': null,
  311. 'active-value': true,
  312. 'inactive-value': false
  313. },
  314. {
  315. __config__: {
  316. label: '滑块',
  317. tag: 'el-slider',
  318. tagIcon: 'slider',
  319. defaultValue: null,
  320. span: 24,
  321. showLabel: true,
  322. layout: 'colFormItem',
  323. labelWidth: null,
  324. required: true,
  325. regList: [],
  326. changeTag: true,
  327. document: 'https://element.eleme.cn/#/zh-CN/component/slider'
  328. },
  329. disabled: false,
  330. min: 0,
  331. max: 100,
  332. step: 1,
  333. 'show-stops': false,
  334. range: false
  335. },
  336. {
  337. __config__: {
  338. label: '时间选择',
  339. tag: 'el-time-picker',
  340. tagIcon: 'time',
  341. defaultValue: null,
  342. span: 24,
  343. showLabel: true,
  344. layout: 'colFormItem',
  345. labelWidth: null,
  346. required: true,
  347. regList: [],
  348. changeTag: true,
  349. document: 'https://element.eleme.cn/#/zh-CN/component/time-picker'
  350. },
  351. placeholder: '请选择',
  352. style: { width: '100%' },
  353. disabled: false,
  354. clearable: true,
  355. 'picker-options': {
  356. selectableRange: '00:00:00-23:59:59'
  357. },
  358. format: 'HH:mm:ss',
  359. 'value-format': 'HH:mm:ss'
  360. },
  361. {
  362. __config__: {
  363. label: '时间范围',
  364. tag: 'el-time-picker',
  365. tagIcon: 'time-range',
  366. span: 24,
  367. showLabel: true,
  368. labelWidth: null,
  369. layout: 'colFormItem',
  370. defaultValue: null,
  371. required: true,
  372. regList: [],
  373. changeTag: true,
  374. document: 'https://element.eleme.cn/#/zh-CN/component/time-picker'
  375. },
  376. style: { width: '100%' },
  377. disabled: false,
  378. clearable: true,
  379. 'is-range': true,
  380. 'range-separator': '至',
  381. 'start-placeholder': '开始时间',
  382. 'end-placeholder': '结束时间',
  383. format: 'HH:mm:ss',
  384. 'value-format': 'HH:mm:ss'
  385. },
  386. {
  387. __config__: {
  388. label: '日期选择',
  389. tag: 'el-date-picker',
  390. tagIcon: 'date',
  391. defaultValue: null,
  392. showLabel: true,
  393. labelWidth: null,
  394. span: 24,
  395. layout: 'colFormItem',
  396. required: true,
  397. regList: [],
  398. changeTag: true,
  399. document: 'https://element.eleme.cn/#/zh-CN/component/date-picker'
  400. },
  401. placeholder: '请选择',
  402. type: 'date',
  403. style: { width: '100%' },
  404. disabled: false,
  405. clearable: true,
  406. format: 'yyyy-MM-dd',
  407. 'value-format': 'yyyy-MM-dd',
  408. readonly: false
  409. },
  410. {
  411. __config__: {
  412. label: '日期范围',
  413. tag: 'el-date-picker',
  414. tagIcon: 'date-range',
  415. defaultValue: null,
  416. span: 24,
  417. showLabel: true,
  418. labelWidth: null,
  419. required: true,
  420. layout: 'colFormItem',
  421. regList: [],
  422. changeTag: true,
  423. document: 'https://element.eleme.cn/#/zh-CN/component/date-picker'
  424. },
  425. style: { width: '100%' },
  426. type: 'daterange',
  427. 'range-separator': '至',
  428. 'start-placeholder': '开始日期',
  429. 'end-placeholder': '结束日期',
  430. disabled: false,
  431. clearable: true,
  432. format: 'yyyy-MM-dd',
  433. 'value-format': 'yyyy-MM-dd',
  434. readonly: false
  435. },
  436. {
  437. __config__: {
  438. label: '评分',
  439. tag: 'el-rate',
  440. tagIcon: 'rate',
  441. defaultValue: 0,
  442. span: 24,
  443. showLabel: true,
  444. labelWidth: null,
  445. layout: 'colFormItem',
  446. required: true,
  447. regList: [],
  448. changeTag: true,
  449. document: 'https://element.eleme.cn/#/zh-CN/component/rate'
  450. },
  451. style: {},
  452. max: 5,
  453. 'allow-half': false,
  454. 'show-text': false,
  455. 'show-score': false,
  456. disabled: false
  457. },
  458. {
  459. __config__: {
  460. label: '颜色选择',
  461. tag: 'el-color-picker',
  462. tagIcon: 'color',
  463. span: 24,
  464. defaultValue: null,
  465. showLabel: true,
  466. labelWidth: null,
  467. layout: 'colFormItem',
  468. required: true,
  469. regList: [],
  470. changeTag: true,
  471. document: 'https://element.eleme.cn/#/zh-CN/component/color-picker'
  472. },
  473. 'show-alpha': false,
  474. 'color-format': '',
  475. disabled: false,
  476. size: 'medium'
  477. },
  478. {
  479. __config__: {
  480. label: '上传',
  481. tag: 'el-upload',
  482. tagIcon: 'upload',
  483. layout: 'colFormItem',
  484. defaultValue: null,
  485. showLabel: true,
  486. labelWidth: null,
  487. required: true,
  488. span: 24,
  489. showTip: false,
  490. buttonText: '点击上传',
  491. regList: [],
  492. changeTag: true,
  493. fileSize: 2,
  494. sizeUnit: 'MB',
  495. document: 'https://element.eleme.cn/#/zh-CN/component/upload'
  496. },
  497. __slot__: {
  498. 'list-type': true
  499. },
  500. // action: process.env.VUE_APP_BASE_API + "/admin-api/infra/file/upload", // 请求地址
  501. action: '/infra/file/upload', // 请求地址
  502. disabled: false,
  503. accept: '',
  504. name: 'file',
  505. 'auto-upload': true,
  506. 'list-type': 'text',
  507. multiple: false
  508. }
  509. ]
  510. // 布局型组件 【左面板】
  511. export const layoutComponents = [
  512. {
  513. __config__: {
  514. layout: 'rowFormItem',
  515. tagIcon: 'row',
  516. label: '行容器',
  517. layoutTree: true,
  518. document: 'https://element.eleme.cn/#/zh-CN/component/layout#row-attributes'
  519. },
  520. type: 'default',
  521. justify: 'start',
  522. align: 'top'
  523. },
  524. {
  525. __config__: {
  526. label: '按钮',
  527. showLabel: true,
  528. changeTag: true,
  529. labelWidth: null,
  530. tag: 'el-button',
  531. tagIcon: 'button',
  532. span: 24,
  533. layout: 'colFormItem',
  534. document: 'https://element.eleme.cn/#/zh-CN/component/button'
  535. },
  536. __slot__: {
  537. default: '主要按钮'
  538. },
  539. type: 'primary',
  540. icon: 'el-icon-search',
  541. round: false,
  542. size: 'medium',
  543. plain: false,
  544. circle: false,
  545. disabled: false
  546. },
  547. {
  548. __config__: {
  549. layout: 'colFormItem',
  550. tagIcon: 'table',
  551. tag: 'el-table',
  552. document: 'https://element.eleme.cn/#/zh-CN/component/table',
  553. span: 24,
  554. formId: 101,
  555. renderKey: 1595761764203,
  556. componentName: 'row101',
  557. showLabel: true,
  558. changeTag: true,
  559. labelWidth: null,
  560. label: '表格[开发中]',
  561. dataType: 'dynamic',
  562. method: 'get',
  563. dataPath: 'list',
  564. dataConsumer: 'data',
  565. url: 'https://www.fastmock.site/mock/f8d7a54fb1e60561e2f720d5a810009d/fg/tableData',
  566. children: [{
  567. __config__: {
  568. layout: 'raw',
  569. tag: 'el-table-column',
  570. renderKey: 15957617660153
  571. },
  572. prop: 'date',
  573. label: '日期'
  574. }, {
  575. __config__: {
  576. layout: 'raw',
  577. tag: 'el-table-column',
  578. renderKey: 15957617660152
  579. },
  580. prop: 'address',
  581. label: '地址'
  582. }, {
  583. __config__: {
  584. layout: 'raw',
  585. tag: 'el-table-column',
  586. renderKey: 15957617660151
  587. },
  588. prop: 'name',
  589. label: '名称'
  590. }, {
  591. __config__: {
  592. layout: 'raw',
  593. tag: 'el-table-column',
  594. renderKey: 1595774496335,
  595. children: [
  596. {
  597. __config__: {
  598. label: '按钮',
  599. tag: 'el-button',
  600. tagIcon: 'button',
  601. layout: 'raw',
  602. renderKey: 1595779809901
  603. },
  604. __slot__: {
  605. default: '主要按钮'
  606. },
  607. type: 'primary',
  608. icon: 'el-icon-search',
  609. round: false,
  610. size: 'medium'
  611. }
  612. ]
  613. },
  614. label: '操作'
  615. }]
  616. },
  617. data: [],
  618. directives: [{
  619. name: 'loading',
  620. value: true
  621. }],
  622. border: true,
  623. type: 'default',
  624. justify: 'start',
  625. align: 'top'
  626. }
  627. ]