├── public ├── favicon.ico └── index.html ├── babel.config.js ├── src ├── assets │ ├── vform-logo.png │ └── ft-images │ │ ├── t1.png │ │ ├── t2.png │ │ ├── t3.png │ │ ├── t4.png │ │ ├── t5.png │ │ ├── t6.png │ │ ├── t7.png │ │ └── t8.png ├── iconfont │ ├── iconfont.eot │ ├── iconfont.ttf │ ├── iconfont.woff │ ├── iconfont.woff2 │ ├── iconfont.css │ └── iconfont.json ├── icons │ ├── index.js │ └── svg │ │ ├── divider.svg │ │ ├── slider-field.svg │ │ ├── file-upload-field.svg │ │ ├── switch-field.svg │ │ ├── drag.svg │ │ ├── text-field.svg │ │ ├── button.svg │ │ ├── redo.svg │ │ ├── undo.svg │ │ ├── slot-component.svg │ │ ├── textarea-field.svg │ │ ├── section.svg │ │ ├── html-text.svg │ │ ├── number-field.svg │ │ ├── card.svg │ │ ├── custom-component.svg │ │ ├── picture-upload-field.svg │ │ ├── radio-field.svg │ │ ├── table.svg │ │ ├── cascader-field.svg │ │ ├── rate-field.svg │ │ ├── tab.svg │ │ ├── node-tree.svg │ │ ├── select-field.svg │ │ ├── alert.svg │ │ ├── sub-form.svg │ │ ├── slot-field.svg │ │ ├── date-range-field.svg │ │ ├── time-field.svg │ │ ├── time-range-field.svg │ │ ├── github.svg │ │ ├── document.svg │ │ ├── checkbox-field.svg │ │ ├── color-field.svg │ │ ├── grid.svg │ │ └── rich-editor-field.svg ├── utils │ ├── debug-console.js │ ├── config.js │ ├── smart-vue-i18n │ │ ├── utils.js │ │ └── index.js │ ├── emitter.js │ ├── vue3js-generator.js │ ├── beautifierLoader.js │ └── directive.js ├── components │ ├── form-designer │ │ ├── form-widget │ │ │ ├── field-widget │ │ │ │ ├── index.js │ │ │ │ └── html-text-widget.vue │ │ │ └── container-widget │ │ │ │ └── index.js │ │ ├── setting-panel │ │ │ └── property-editor │ │ │ │ ├── index.js │ │ │ │ ├── event-handler │ │ │ │ ├── eventMixin.js │ │ │ │ ├── onClick-editor.vue │ │ │ │ ├── onBlur-editor.vue │ │ │ │ ├── onFocus-editor.vue │ │ │ │ ├── onInput-editor.vue │ │ │ │ ├── onMounted-editor.vue │ │ │ │ ├── onCreated-editor.vue │ │ │ │ ├── onFileRemove.vue │ │ │ │ ├── onBeforeUpload-editor.vue │ │ │ │ ├── onRemoteQuery-editor.vue │ │ │ │ ├── onValidate-editor.vue │ │ │ │ ├── onChange-editor.vue │ │ │ │ ├── onAppendButtonClick-editor.vue │ │ │ │ ├── onUploadError-editor.vue │ │ │ │ ├── onSubFormRowAdd-editor.vue │ │ │ │ ├── onSubFormRowChange-editor.vue │ │ │ │ ├── onUploadSuccess-editor.vue │ │ │ │ ├── onSubFormRowInsert-editor.vue │ │ │ │ └── onSubFormRowDelete-editor.vue │ │ │ │ ├── field-radio │ │ │ │ └── radio-defaultValue-editor.vue │ │ │ │ ├── field-select │ │ │ │ └── select-defaultValue-editor.vue │ │ │ │ ├── field-cascader │ │ │ │ ├── cascader-defaultValue-editor.vue │ │ │ │ ├── checkStrictly-editor.vue │ │ │ │ ├── showAllLevels-editor.vue │ │ │ │ └── cascader-multiple-editor.vue │ │ │ │ ├── field-checkbox │ │ │ │ └── checkbox-defaultValue-editor.vue │ │ │ │ ├── border-editor.vue │ │ │ │ ├── hidden-editor.vue │ │ │ │ ├── clearable-editor.vue │ │ │ │ ├── disabled-editor.vue │ │ │ │ ├── field-button │ │ │ │ ├── round-editor.vue │ │ │ │ ├── circle-editor.vue │ │ │ │ ├── plain-editor.vue │ │ │ │ ├── icon-editor.vue │ │ │ │ └── button-type-editor.vue │ │ │ │ ├── field-slider │ │ │ │ ├── range-editor.vue │ │ │ │ ├── vertical-editor.vue │ │ │ │ └── showStops-editor.vue │ │ │ │ ├── readonly-editor.vue │ │ │ │ ├── required-editor.vue │ │ │ │ ├── editable-editor.vue │ │ │ │ ├── filterable-editor.vue │ │ │ │ ├── buttonStyle-editor.vue │ │ │ │ ├── field-rate │ │ │ │ ├── showText-editor.vue │ │ │ │ ├── allowHalf-editor.vue │ │ │ │ ├── showScore-editor.vue │ │ │ │ ├── rate-max-editor.vue │ │ │ │ ├── lowThreshold-editor.vue │ │ │ │ ├── highThreshold-editor.vue │ │ │ │ └── rate-defaultValue-editor.vue │ │ │ │ ├── labelHidden-editor.vue │ │ │ │ ├── allowCreate-editor.vue │ │ │ │ ├── field-static-text │ │ │ │ ├── fontSize-editor.vue │ │ │ │ ├── preWrap-editor.vue │ │ │ │ └── textContent-editor.vue │ │ │ │ ├── field-switch │ │ │ │ ├── activeText-editor.vue │ │ │ │ ├── inactiveText-editor.vue │ │ │ │ ├── activeColor-editor.vue │ │ │ │ ├── inactiveColor-editor.vue │ │ │ │ ├── switchWidth-editor.vue │ │ │ │ └── switch-defaultValue-editor.vue │ │ │ │ ├── prefixIcon-editor.vue │ │ │ │ ├── showFileList-editor.vue │ │ │ │ ├── suffixIcon-editor.vue │ │ │ │ ├── buttonIcon-editor.vue │ │ │ │ ├── rows-editor.vue │ │ │ │ ├── showWordLimit-editor.vue │ │ │ │ ├── uploadTip-editor.vue │ │ │ │ ├── labelTooltip-editor.vue │ │ │ │ ├── withCredentials-editor.vue │ │ │ │ ├── endPlaceholder-editor.vue │ │ │ │ ├── multipleSelect-editor.vue │ │ │ │ ├── validationHint-editor.vue │ │ │ │ ├── automaticDropdown-editor.vue │ │ │ │ ├── container-sub-form │ │ │ │ ├── showBlankRow-editor.vue │ │ │ │ ├── showRowNumber-editor.vue │ │ │ │ └── sub-form-labelAlign-editor.vue │ │ │ │ ├── container-table-cell │ │ │ │ ├── cellHeight-editor.vue │ │ │ │ ├── cellWidth-editor.vue │ │ │ │ └── wordBreak-editor.vue │ │ │ │ ├── startPlaceholder-editor.vue │ │ │ │ ├── step-editor.vue │ │ │ │ ├── appendButtonDisabled-editor.vue │ │ │ │ ├── container-grid-col │ │ │ │ ├── grid-col-responsive-editor.vue │ │ │ │ ├── grid-col-pull-editor.vue │ │ │ │ ├── grid-col-push-editor.vue │ │ │ │ ├── grid-col-offset-editor.vue │ │ │ │ └── grid-col-span-editor.vue │ │ │ │ ├── limit-editor.vue │ │ │ │ ├── showPassword-editor.vue │ │ │ │ ├── precision-editor.vue │ │ │ │ ├── fileMaxSize-editor.vue │ │ │ │ ├── multipleLimit-editor.vue │ │ │ │ ├── columnWidth-editor.vue │ │ │ │ ├── placeholder-editor.vue │ │ │ │ ├── remote-editor.vue │ │ │ │ ├── requiredHint-editor.vue │ │ │ │ ├── multiple-editor.vue │ │ │ │ ├── field-number │ │ │ │ └── controlsPosition-editor.vue │ │ │ │ ├── displayStyle-editor.vue │ │ │ │ ├── appendButton-editor.vue │ │ │ │ ├── field-color │ │ │ │ └── color-defaultValue-editor.vue │ │ │ │ ├── uploadURL-editor.vue │ │ │ │ ├── labelWidth-editor.vue │ │ │ │ ├── defaultValue-editor.vue │ │ │ │ ├── field-date │ │ │ │ ├── date-valueFormat-editor.vue │ │ │ │ ├── date-defaultValue-editor.vue │ │ │ │ ├── date-type-editor.vue │ │ │ │ └── date-format-editor.vue │ │ │ │ ├── field-html-text │ │ │ │ └── htmlContent-editor.vue │ │ │ │ ├── labelIconClass-editor.vue │ │ │ │ ├── field-divider │ │ │ │ └── contentPosition-editor.vue │ │ │ │ ├── field-date-range │ │ │ │ ├── date-range-valueFormat-editor.vue │ │ │ │ ├── date-range-type-editor.vue │ │ │ │ ├── date-range-defaultValue-editor.vue │ │ │ │ └── date-range-format-editor.vue │ │ │ │ ├── field-time │ │ │ │ ├── time-format-editor.vue │ │ │ │ └── time-defaultValue-editor.vue │ │ │ │ ├── field-time-range │ │ │ │ ├── time-range-format-editor.vue │ │ │ │ └── time-range-defaultValue-editor.vue │ │ │ │ ├── container-grid │ │ │ │ └── colHeight-editor.vue │ │ │ │ ├── label-editor.vue │ │ │ │ ├── optionItems-editor.vue │ │ │ │ ├── type-editor.vue │ │ │ │ ├── labelIconPosition-editor.vue │ │ │ │ ├── max-editor.vue │ │ │ │ ├── size-editor.vue │ │ │ │ ├── min-editor.vue │ │ │ │ ├── textAlign-editor.vue │ │ │ │ ├── maxLength-editor.vue │ │ │ │ ├── minLength-editor.vue │ │ │ │ ├── customClass-editor.vue │ │ │ │ ├── field-file-upload │ │ │ │ └── file-upload-fileTypes-editor.vue │ │ │ │ ├── field-picture-upload │ │ │ │ └── picture-upload-fileTypes-editor.vue │ │ │ │ ├── labelAlign-editor.vue │ │ │ │ ├── propertyMixin.js │ │ │ │ └── validation-editor.vue │ │ ├── refMixinDesign.js │ │ └── widget-panel │ │ │ └── templatesConfig.js │ ├── form-render │ │ ├── container-item │ │ │ ├── index.js │ │ │ ├── container-item-wrapper.vue │ │ │ ├── grid-item.vue │ │ │ └── table-item.vue │ │ └── refMixin.js │ └── svg-icon │ │ └── index.vue ├── styles │ ├── index.scss │ └── global.scss ├── lang │ ├── zh-CN_extension.js │ ├── en-US_extension.js │ ├── zh-CN_render.js │ └── en-US_render.js ├── extension │ ├── extension-helper.js │ └── samples │ │ ├── extension-schema.js │ │ └── extension-sfc-generator.js ├── main.js └── App.vue ├── jsconfig.json ├── .gitignore ├── license.txt ├── install-render.js ├── index_template ├── index_dev.html └── index_prod.html ├── install.js └── package.json /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vform666/variant-form/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /src/assets/vform-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vform666/variant-form/HEAD/src/assets/vform-logo.png -------------------------------------------------------------------------------- /src/iconfont/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vform666/variant-form/HEAD/src/iconfont/iconfont.eot -------------------------------------------------------------------------------- /src/iconfont/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vform666/variant-form/HEAD/src/iconfont/iconfont.ttf -------------------------------------------------------------------------------- /src/assets/ft-images/t1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vform666/variant-form/HEAD/src/assets/ft-images/t1.png -------------------------------------------------------------------------------- /src/assets/ft-images/t2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vform666/variant-form/HEAD/src/assets/ft-images/t2.png -------------------------------------------------------------------------------- /src/assets/ft-images/t3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vform666/variant-form/HEAD/src/assets/ft-images/t3.png -------------------------------------------------------------------------------- /src/assets/ft-images/t4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vform666/variant-form/HEAD/src/assets/ft-images/t4.png -------------------------------------------------------------------------------- /src/assets/ft-images/t5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vform666/variant-form/HEAD/src/assets/ft-images/t5.png -------------------------------------------------------------------------------- /src/assets/ft-images/t6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vform666/variant-form/HEAD/src/assets/ft-images/t6.png -------------------------------------------------------------------------------- /src/assets/ft-images/t7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vform666/variant-form/HEAD/src/assets/ft-images/t7.png -------------------------------------------------------------------------------- /src/assets/ft-images/t8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vform666/variant-form/HEAD/src/assets/ft-images/t8.png -------------------------------------------------------------------------------- /src/iconfont/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vform666/variant-form/HEAD/src/iconfont/iconfont.woff -------------------------------------------------------------------------------- /src/iconfont/iconfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vform666/variant-form/HEAD/src/iconfont/iconfont.woff2 -------------------------------------------------------------------------------- /src/icons/index.js: -------------------------------------------------------------------------------- 1 | const requireAll = requireContext => requireContext.keys().map(requireContext) 2 | const req = require.context('./svg', false, /\.svg$/) 3 | requireAll(req) 4 | -------------------------------------------------------------------------------- /src/utils/debug-console.js: -------------------------------------------------------------------------------- 1 | console.log = (function(logFunc) { 2 | return function () { 3 | if (process.env.NODE_ENV === 'development') { 4 | logFunc.call(console, ...arguments); 5 | } 6 | } 7 | })(console.log) 8 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "######": "本文件用于解决IDEA无法识别Vue项目@符号的问题", 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "paths": { 6 | "@/*": ["src/*"] 7 | } 8 | }, 9 | "exclude": ["node_modules", "dist"] 10 | } 11 | -------------------------------------------------------------------------------- /src/components/form-designer/form-widget/field-widget/index.js: -------------------------------------------------------------------------------- 1 | const requireComponent = require.context('./', false, /\w+\.vue$/) 2 | 3 | let comps = {} 4 | 5 | requireComponent.keys().map(fileName => { 6 | let comp = requireComponent(fileName).default; 7 | comps[comp.name] = comp 8 | }) 9 | 10 | export default comps; 11 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/index.js: -------------------------------------------------------------------------------- 1 | const requireComponent = require.context('./', true, /\w+\.vue$/) //遍历当前目录和子目录 2 | 3 | let comps = {} 4 | 5 | requireComponent.keys().map(fileName => { 6 | let comp = requireComponent(fileName).default; 7 | comps[comp.name] = comp 8 | }) 9 | 10 | export default comps; 11 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/event-handler/eventMixin.js: -------------------------------------------------------------------------------- 1 | import emitter from '@/utils/emitter' 2 | 3 | export default { 4 | mixins: [emitter], 5 | created() {}, 6 | methods: { 7 | editEventHandler(eventName, eventParams) { 8 | this.dispatch('SettingPanel', 'editEventHandler', [eventName, [...eventParams]]) 9 | }, 10 | 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/styles/index.scss: -------------------------------------------------------------------------------- 1 | 2 | html { 3 | height: 100%; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | height: 100%; 9 | margin: 0; /* */ 10 | background-color: #ffffff; 11 | -moz-osx-font-smoothing: grayscale; 12 | -webkit-font-smoothing: antialiased; 13 | text-rendering: optimizeLegibility; 14 | font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif; 15 | } 16 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | /dist0/ 5 | /dist2 6 | .VSCodeCounter 7 | 8 | # local env files 9 | .env.local 10 | .env.*.local 11 | 12 | # Log files 13 | npm-debug.log* 14 | yarn-debug.log* 15 | yarn-error.log* 16 | pnpm-debug.log* 17 | 18 | # Editor directories and files 19 | .idea 20 | .vscode 21 | *.suo 22 | *.ntvs* 23 | *.njsproj 24 | *.sln 25 | *.sw? 26 | /package-lock.json 27 | /VariantForm.iml 28 | yarn.lock 29 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/field-radio/radio-defaultValue-editor.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 15 | 16 | 19 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/field-select/select-defaultValue-editor.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 15 | 16 | 19 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/field-cascader/cascader-defaultValue-editor.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 15 | 16 | 19 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/field-checkbox/checkbox-defaultValue-editor.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 15 | 16 | 19 | -------------------------------------------------------------------------------- /license.txt: -------------------------------------------------------------------------------- 1 | # Variant Form 许可条款 1.0 2 | 3 | 1. 免责声明：任何情况下根据任何法律，本作者不对用户因使用VariantForm产生的侵权、数据损坏丢失、软硬件故障和违法犯罪等问题承担任何责任； 4 | 2. 禁止任何用户对VariantForm进行简单包装后，即声称为自己的产品、销售源码获利； 5 | 3. VariantForm为开源项目，获取到源代码的用户可自由修改源码供自身开发使用，可分发build构建后的库代码，也可分发VariantForm源代码（需保留文件头部的作者声明），本作者保留VariantForm的原始著作权； 6 | 4. 个人或公司用户均可将VariantForm项目应用于商业项目开发，为支持本项目持续开发，请尽量购买VariantForm Pro版源码订阅更新服务； 7 | 5. 如果你不同意本许可条款，请勿使用VariantForm；任何情况下，一旦实际使用VariantForm，则代表你已确定完全同意本许可条款； 8 | 6. 条款内容结束。 9 | -------------------------------------------------------------------------------- /src/icons/svg/divider.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/svg/slider-field.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/utils/config.js: -------------------------------------------------------------------------------- 1 | export const VARIANT_FORM_VERSION = '2.2.9' 2 | 3 | //export const MOCK_CASE_URL = 'https://www.fastmock.site/mock/2de212e0dc4b8e0885fea44ab9f2e1d0/vform/' 4 | export const MOCK_CASE_URL = 'https://ks3-cn-beijing.ksyuncs.com/vform-static/vcase/' 5 | 6 | //export const ACE_BASE_PATH = 'public/lib/ace/src-min-noconflict' 7 | export const ACE_BASE_PATH = 'https://ks3-cn-beijing.ksyun.com/vform2021/ace-mini' 8 | 9 | export const BEAUTIFIER_PATH= 'https://ks3-cn-beijing.ksyun.com/vform2021/js-beautify/1.14.0/beautifier.min.js' 10 | -------------------------------------------------------------------------------- /src/lang/zh-CN_extension.js: -------------------------------------------------------------------------------- 1 | export default { 2 | extension: { 3 | widgetLabel: { 4 | card: '卡片', 5 | alert: '提示', 6 | }, 7 | 8 | setting: { 9 | cardFolded: '是否收起', 10 | cardShowFold: '显示折叠按钮', 11 | cardWidth: '卡片宽度', 12 | cardShadow: '显示阴影', 13 | 14 | alertTitle: '标题', 15 | alertType: '类型', 16 | description: '辅助性文字', 17 | closable: '是否可关闭', 18 | closeText: '关闭按钮文字', 19 | center: '文字居中', 20 | showIcon: '显示图标', 21 | effect: '显示效果', 22 | 23 | }, 24 | 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/border-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 24 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/hidden-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 24 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/clearable-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 24 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/disabled-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 24 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/field-button/round-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 24 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/field-slider/range-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 24 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/readonly-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 24 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/required-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 24 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/editable-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 21 | 22 | 25 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/field-button/circle-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 24 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/field-button/plain-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 21 | 22 | 25 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/filterable-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 24 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/buttonStyle-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 24 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/field-button/icon-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 24 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/field-rate/showText-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 24 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/field-slider/vertical-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 24 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/labelHidden-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 24 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/allowCreate-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 21 | 22 | 25 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/field-rate/allowHalf-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 24 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/field-rate/showScore-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 24 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/field-slider/showStops-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 24 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/field-static-text/fontSize-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 24 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/field-switch/activeText-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 24 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/prefixIcon-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 24 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/showFileList-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 24 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/suffixIcon-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 24 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/buttonIcon-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 24 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/rows-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 21 | 22 | 25 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/showWordLimit-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 24 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/uploadTip-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 21 | 22 | 25 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/field-static-text/preWrap-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 24 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/field-switch/inactiveText-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 24 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/labelTooltip-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 24 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/withCredentials-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 24 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/endPlaceholder-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 24 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/multipleSelect-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 21 | 22 | 25 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/validationHint-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 24 | -------------------------------------------------------------------------------- /src/components/form-render/container-item/index.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue" 2 | 3 | const requireComponent = require.context('./', false, /\w+\.vue$/) 4 | 5 | /** 6 | * 容器组件时递归组件，且内部可以嵌套其他容器，局部注册会找不到组件，必须注册为全局组件，原因不明？！ 7 | * begin 8 | * 9 | let comps = {} 10 | 11 | requireComponent.keys().map(fileName => { 12 | let comp = requireComponent(fileName).default; 13 | comps[comp.name] = comp 14 | }) 15 | 16 | export default comps; 17 | 18 | end */ 19 | 20 | /* 全局注册！！ */ 21 | requireComponent.keys().map(fileName => { 22 | let comp = requireComponent(fileName).default; 23 | Vue.component(comp.name, comp) 24 | }) 25 | -------------------------------------------------------------------------------- /src/lang/en-US_extension.js: -------------------------------------------------------------------------------- 1 | export default { 2 | extension: { 3 | widgetLabel: { 4 | card: 'Card', 5 | alert: 'Alert', 6 | }, 7 | 8 | setting: { 9 | cardFolded: 'Folded', 10 | cardShowFold: 'Show Fold', 11 | cardWidth: 'Width Of Card', 12 | cardShadow: 'Shadow', 13 | 14 | alertTitle: 'Title', 15 | alertType: 'Type', 16 | description: 'Description', 17 | closable: 'Closable', 18 | closeText: 'Text On Close Btn', 19 | center: 'Center', 20 | showIcon: 'Show Icon', 21 | effect: 'Effect', 22 | 23 | }, 24 | 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/automaticDropdown-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 24 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/container-sub-form/showBlankRow-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 24 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/container-sub-form/showRowNumber-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 24 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/container-table-cell/cellHeight-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 24 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/container-table-cell/cellWidth-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 24 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/container-table-cell/wordBreak-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 24 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/field-cascader/checkStrictly-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 24 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/field-cascader/showAllLevels-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 24 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/field-switch/activeColor-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 24 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/startPlaceholder-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 24 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/step-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 24 | -------------------------------------------------------------------------------- /src/iconfont/iconfont.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "iconfont"; /* Project id */ 3 | src: url('iconfont.ttf?t=1620643511304') format('truetype'); 4 | } 5 | 6 | .iconfont { 7 | font-family: "iconfont" !important; 8 | font-size: 16px; 9 | font-style: normal; 10 | -webkit-font-smoothing: antialiased; 11 | -moz-osx-font-smoothing: grayscale; 12 | } 13 | 14 | .icon-insertcolumn:before { 15 | content: "\e753"; 16 | } 17 | 18 | .icon-insertrow:before { 19 | content: "\e754"; 20 | } 21 | 22 | .icon-hide:before { 23 | content: "\e76b"; 24 | } 25 | 26 | .icon-drag:before { 27 | content: "\e61d"; 28 | } 29 | 30 | -------------------------------------------------------------------------------- /src/components/form-designer/form-widget/container-widget/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | 3 | const requireComponent = require.context('./', false, /\w+\.vue$/) 4 | 5 | /** 6 | * 容器组件时递归组件，且内部可以嵌套其他容器，局部注册会找不到组件，必须注册为全局组件，原因不明？！ 7 | * begin 8 | * 9 | let comps = {} 10 | 11 | requireComponent.keys().map(fileName => { 12 | let comp = requireComponent(fileName).default; 13 | comps[comp.name] = comp 14 | }) 15 | 16 | export default comps; 17 | 18 | end */ 19 | 20 | /* 全局注册！！ */ 21 | requireComponent.keys().map(fileName => { 22 | let comp = requireComponent(fileName).default; 23 | Vue.component(comp.name, comp) 24 | }) 25 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/appendButtonDisabled-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 24 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/field-switch/inactiveColor-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 24 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/field-static-text/textContent-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 24 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/container-grid-col/grid-col-responsive-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 24 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/field-switch/switchWidth-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 24 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/limit-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 21 | 22 | 25 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/showPassword-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 21 | 22 | 25 | -------------------------------------------------------------------------------- /src/icons/svg/file-upload-field.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/precision-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 24 | -------------------------------------------------------------------------------- /src/extension/extension-helper.js: -------------------------------------------------------------------------------- 1 | import { 2 | addContainerWidgetSchema, 3 | addBasicFieldSchema, 4 | addAdvancedFieldSchema, 5 | addCustomWidgetSchema 6 | } from '@/components/form-designer/widget-panel/widgetsConfig' 7 | import { 8 | registerCommonProperty, 9 | registerAdvancedProperty, 10 | registerEventProperty 11 | } from '@/components/form-designer/setting-panel/propertyRegister' 12 | 13 | 14 | export default { 15 | addContainerWidgetSchema, 16 | addBasicFieldSchema, 17 | addAdvancedFieldSchema, 18 | addCustomWidgetSchema, 19 | 20 | registerCommonProperty, 21 | registerAdvancedProperty, 22 | registerEventProperty, 23 | } 24 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/fileMaxSize-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 24 | -------------------------------------------------------------------------------- /src/icons/svg/switch-field.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/container-grid-col/grid-col-pull-editor.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 21 | 22 | 25 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/container-grid-col/grid-col-push-editor.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 21 | 22 | 25 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/multipleLimit-editor.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 21 | 22 | 25 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/field-rate/rate-max-editor.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 22 | 23 | 26 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/container-grid-col/grid-col-offset-editor.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 21 | 22 | 25 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import 'babel-polyfill' 2 | import './utils/debug-console' 3 | import Vue from 'vue' 4 | import axios from "axios"; 5 | import App from './App.vue' 6 | import ElementUI from 'element-ui' 7 | import './utils/directive' 8 | import './icons' 9 | 10 | import 'element-ui/lib/theme-chalk/index.css' 11 | import '@/styles/index.scss' 12 | import '@/iconfont/iconfont.css' 13 | 14 | import {loadExtension} from '@/extension/extension-loader' 15 | 16 | loadExtension() 17 | 18 | Vue.use(ElementUI, { size: 'small' }) 19 | 20 | if (typeof window !== 'undefined') { 21 | window.axios = axios 22 | } 23 | 24 | Vue.config.productionTip = false 25 | 26 | new Vue({ 27 | el: "#app", 28 | render: h => h(App), 29 | }) 30 | -------------------------------------------------------------------------------- /install-render.js: -------------------------------------------------------------------------------- 1 | import VFormRender from '@/components/form-render/index.vue' 2 | import {loadExtension} from "@/extension/extension-loader" 3 | import axios from "axios" 4 | 5 | loadExtension() 6 | 7 | VFormRender.install = function (Vue) { 8 | Vue.component(VFormRender.name, VFormRender) 9 | } 10 | 11 | const components = [ 12 | VFormRender 13 | ] 14 | 15 | const install = (Vue) => { 16 | window.axios = axios 17 | components.forEach(component => { 18 | Vue.component(component.name, component) 19 | }) 20 | } 21 | 22 | if (typeof window !== 'undefined' && window.Vue) { /* script方式引入时主动调用install方法！！ */ 23 | install(window.Vue); 24 | } 25 | 26 | export default { 27 | install, 28 | VFormRender 29 | } 30 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/columnWidth-editor.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 23 | 24 | 27 | -------------------------------------------------------------------------------- /src/icons/svg/drag.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/placeholder-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 21 | 22 | 25 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/remote-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 22 | 23 | 26 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/requiredHint-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 21 | 22 | 25 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/field-cascader/cascader-multiple-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 21 | 22 | 25 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/field-rate/lowThreshold-editor.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 21 | 22 | 25 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/multiple-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 21 | 22 | 25 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | <%= htmlWebpackPlugin.options.title %> 10 | 11 | 12 | 15 | 16 |
17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/field-rate/highThreshold-editor.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 21 | 22 | 25 | -------------------------------------------------------------------------------- /src/icons/svg/text-field.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /index_template/index_dev.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | <%= htmlWebpackPlugin.options.title %> 10 | 11 | 12 | 15 | 16 |
17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/field-number/controlsPosition-editor.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 24 | 25 | 28 | -------------------------------------------------------------------------------- /src/icons/svg/button.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/displayStyle-editor.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 23 | 24 | 27 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/appendButton-editor.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 25 | 26 | 29 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/field-color/color-defaultValue-editor.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 22 | 23 | 26 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/uploadURL-editor.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 25 | 26 | 29 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/labelWidth-editor.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 22 | 23 | 26 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/defaultValue-editor.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 22 | 23 | 26 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/field-date/date-valueFormat-editor.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 23 | 24 | 27 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/field-html-text/htmlContent-editor.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 24 | 25 | 30 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/labelIconClass-editor.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 25 | 26 | 29 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/field-divider/contentPosition-editor.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 24 | 25 | 28 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/field-date-range/date-range-valueFormat-editor.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 23 | 24 | 27 | -------------------------------------------------------------------------------- /src/extension/samples/extension-schema.js: -------------------------------------------------------------------------------- 1 | export const cardSchema = { 2 | type: 'card', 3 | category: 'container', 4 | icon: 'card', 5 | widgetList: [], 6 | options: { 7 | name: '', 8 | label: 'card', 9 | hidden: false, 10 | folded: false, 11 | showFold: true, 12 | cardWidth: '100%', 13 | shadow: 'never', 14 | customClass: '', 15 | } 16 | } 17 | 18 | export const alertSchema = { 19 | type: 'alert', 20 | icon: 'alert', 21 | formItemFlag: false, 22 | options: { 23 | name: '', 24 | title: 'Good things are coming...', 25 | type: 'info', 26 | description: '', 27 | closable: true, 28 | closeText: '', 29 | center: true, 30 | showIcon: false, 31 | effect: 'light', 32 | hidden: false, 33 | onClose: '', 34 | customClass: '', 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/field-switch/switch-defaultValue-editor.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 22 | 23 | 26 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/field-time/time-format-editor.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 24 | 25 | 28 | -------------------------------------------------------------------------------- /src/icons/svg/redo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/svg/undo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/field-time-range/time-range-format-editor.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 24 | 25 | 28 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/field-date-range/date-range-type-editor.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 24 | 25 | 28 | -------------------------------------------------------------------------------- /src/components/form-render/container-item/container-item-wrapper.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 16 | 17 | 34 | 35 | 38 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/container-grid/colHeight-editor.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 25 | 26 | 29 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/label-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 27 | 28 | 31 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/field-rate/rate-defaultValue-editor.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 23 | 24 | 27 | -------------------------------------------------------------------------------- /src/components/form-designer/refMixinDesign.js: -------------------------------------------------------------------------------- 1 | export default { 2 | methods: { 3 | initRefList() { 4 | if ((this.refList !== null) && !!this.widget.options.name) { 5 | this.refList[this.widget.options.name] = this 6 | } 7 | }, 8 | 9 | getWidgetRef(widgetName, showError = false) { 10 | let foundRef = this.refList[widgetName] 11 | if (!foundRef && !!showError) { 12 | this.$message.error(this.i18nt('render.hint.refNotFound') + widgetName) 13 | } 14 | return foundRef 15 | }, 16 | 17 | /* 该方法用于组件重名检查！！ */ 18 | registerToRefList(oldRefName) { 19 | if ((this.refList !== null) && !!this.widget.options.name) { 20 | if (!!oldRefName) { 21 | delete this.refList[oldRefName] 22 | } 23 | this.refList[this.widget.options.name] = this 24 | } 25 | }, 26 | 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/optionItems-editor.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 25 | 26 | 29 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/field-time/time-defaultValue-editor.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 23 | 24 | 27 | -------------------------------------------------------------------------------- /src/components/form-render/refMixin.js: -------------------------------------------------------------------------------- 1 | export default { 2 | methods: { 3 | initRefList() { 4 | if ((this.refList !== null) && !!this.widget.options.name) { 5 | this.refList[this.widget.options.name] = this 6 | } 7 | }, 8 | 9 | getWidgetRef(widgetName, showError = false) { 10 | let foundRef = this.refList[widgetName] 11 | if (!foundRef && !!showError) { 12 | this.$message.error(this.i18nt('render.hint.refNotFound') + widgetName) 13 | } 14 | return foundRef 15 | }, 16 | 17 | getFormRef() { /* 获取VFrom引用，必须在VForm组件created之后方可调用 */ 18 | return this.refList['v_form_ref'] 19 | }, 20 | 21 | getComponentByContainer(con) { 22 | if (con.type === 'grid') { //grid-item跟VueGridLayout全局注册组件重名，故特殊处理！！ 23 | return 'vf-grid-item' 24 | } 25 | 26 | return con.type + '-item' 27 | }, 28 | 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/icons/svg/slot-component.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/field-time-range/time-range-defaultValue-editor.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 23 | 24 | 27 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/event-handler/onClick-editor.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 27 | 28 | 31 | -------------------------------------------------------------------------------- /src/icons/svg/textarea-field.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/event-handler/onBlur-editor.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 27 | 28 | 31 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/event-handler/onFocus-editor.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 27 | 28 | 31 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/event-handler/onInput-editor.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 27 | 28 | 31 | -------------------------------------------------------------------------------- /src/iconfont/iconfont.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "", 3 | "name": "", 4 | "font_family": "iconfont", 5 | "css_prefix_text": "icon-", 6 | "description": "", 7 | "glyphs": [ 8 | { 9 | "icon_id": "586931", 10 | "name": "insert-column", 11 | "font_class": "insertcolumn", 12 | "unicode": "e753", 13 | "unicode_decimal": 59219 14 | }, 15 | { 16 | "icon_id": "586932", 17 | "name": "insert-row", 18 | "font_class": "insertrow", 19 | "unicode": "e754", 20 | "unicode_decimal": 59220 21 | }, 22 | { 23 | "icon_id": "1030072", 24 | "name": "hide", 25 | "font_class": "hide", 26 | "unicode": "e76b", 27 | "unicode_decimal": 59243 28 | }, 29 | { 30 | "icon_id": "14772710", 31 | "name": "drag", 32 | "font_class": "drag", 33 | "unicode": "e61d", 34 | "unicode_decimal": 58909 35 | } 36 | ] 37 | } 38 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/event-handler/onMounted-editor.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 27 | 28 | 31 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/field-date/date-defaultValue-editor.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 23 | 24 | 27 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/event-handler/onCreated-editor.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 28 | 29 | 32 | -------------------------------------------------------------------------------- /src/icons/svg/section.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/field-date-range/date-range-defaultValue-editor.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 23 | 24 | 27 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/event-handler/onFileRemove.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 27 | 28 | 31 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/event-handler/onBeforeUpload-editor.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 27 | 28 | 31 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/event-handler/onRemoteQuery-editor.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 27 | 28 | 31 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/event-handler/onValidate-editor.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 27 | 28 | 31 | -------------------------------------------------------------------------------- /src/icons/svg/html-text.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/icons/svg/number-field.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/event-handler/onChange-editor.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 27 | 28 | 31 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/event-handler/onAppendButtonClick-editor.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 27 | 28 | 31 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/event-handler/onUploadError-editor.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 27 | 28 | 31 | -------------------------------------------------------------------------------- /src/icons/svg/card.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/event-handler/onSubFormRowAdd-editor.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 27 | 28 | 31 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/event-handler/onSubFormRowChange-editor.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 27 | 28 | 31 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/event-handler/onUploadSuccess-editor.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 27 | 28 | 31 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/field-date/date-type-editor.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 27 | 28 | 31 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/type-editor.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 30 | 31 | 34 | -------------------------------------------------------------------------------- /src/icons/svg/custom-component.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/event-handler/onSubFormRowInsert-editor.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 27 | 28 | 31 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/event-handler/onSubFormRowDelete-editor.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 27 | 28 | 31 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/labelIconPosition-editor.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 34 | 35 | 38 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/max-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 36 | 37 | 40 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/field-date/date-format-editor.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 27 | 28 | 31 | -------------------------------------------------------------------------------- /install.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios' 2 | 3 | import VFormDesigner from '@/components/form-designer/index.vue' 4 | import VFormRender from '@/components/form-render/index.vue' 5 | import {loadExtension} from "@/extension/extension-loader" 6 | 7 | import '@/utils/directive' 8 | import '@/icons' 9 | import '@/iconfont/iconfont.css' 10 | 11 | loadExtension() 12 | 13 | VFormDesigner.install = function (Vue) { 14 | Vue.component(VFormDesigner.name, VFormDesigner) 15 | } 16 | 17 | VFormRender.install = function (Vue) { 18 | Vue.component(VFormRender.name, VFormRender) 19 | } 20 | 21 | const components = [ 22 | VFormDesigner, 23 | VFormRender 24 | ] 25 | 26 | const install = (Vue) => { 27 | window.axios = axios 28 | components.forEach(component => { 29 | Vue.component(component.name, component) 30 | }) 31 | } 32 | 33 | if (typeof window !== 'undefined' && window.Vue) { /* script方式引入时主动调用install方法！！ */ 34 | install(window.Vue); 35 | } 36 | 37 | export default { 38 | install, 39 | VFormDesigner, 40 | VFormRender 41 | } 42 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/field-date-range/date-range-format-editor.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 27 | 28 | 31 | -------------------------------------------------------------------------------- /src/icons/svg/picture-upload-field.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/svg/radio-field.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 40 | 41 | 46 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/size-editor.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 35 | 36 | 39 | -------------------------------------------------------------------------------- /src/lang/zh-CN_render.js: -------------------------------------------------------------------------------- 1 | export default { 2 | render: { 3 | 4 | hint: { 5 | prompt: '提示', 6 | confirm: '确定', 7 | cancel: '取消', 8 | 9 | selectPlaceholder: '请选择', 10 | timePlaceholder: '选择时间', 11 | startTimePlaceholder: '起始时间', 12 | endTimePlaceholder: '截止时间', 13 | datePlaceholder: '选择日期', 14 | startDatePlaceholder: '起始日期', 15 | endDatePlaceholder: '截止日期', 16 | blankCellContent: '--', 17 | 18 | uploadError: '上传错误: ', 19 | uploadExceed: '最大上传数量(${uploadLimit})已超出.', 20 | unsupportedFileType: '不支持格式: ', 21 | fileSizeExceed: '文件大小已超出: ', 22 | refNotFound: '组件未找到: ', 23 | fieldRequired: '字段值不可为空', 24 | invalidNumber: '数据格式错误', 25 | selectFile: ' 选择文件', 26 | downloadFile: '下载', 27 | removeFile: '移除', 28 | validationFailed: '表单数据校验失败', 29 | 30 | subFormAction: '操作', 31 | subFormAddAction: '新增', 32 | subFormAddActionHint: '新增行', 33 | insertSubFormRow: '插入行', 34 | deleteSubFormRow: '删除行', 35 | nonSubFormType: '组件类型不是子表单', 36 | } 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/utils/smart-vue-i18n/utils.js: -------------------------------------------------------------------------------- 1 | // 值存在 2 | export function isDef(value) { 3 | return value !== undefined && value !== null 4 | } 5 | 6 | // 对象映射 'a.b' {a: {b: 'val'}} 7 | export function get(object, path) { 8 | const keys = path.split('.') 9 | let result = object 10 | 11 | keys.forEach(key => { 12 | result = isDef(result) && isDef(result[key]) ? result[key] : null 13 | }) 14 | 15 | return result 16 | } 17 | 18 | // 是否是对象 19 | export function isObj(x) { 20 | const type = typeof x 21 | return x !== null && (type === 'object' || type === 'function') 22 | } 23 | 24 | // 深拷贝 25 | const { hasOwnProperty } = Object.prototype 26 | 27 | function assignKey(to, from, key) { 28 | const val = from[key] 29 | 30 | if (!isDef(val)) { 31 | return 32 | } 33 | 34 | if (!hasOwnProperty.call(to, key) || !isObj(val)) { 35 | to[key] = val 36 | } else { 37 | to[key] = deepAssign(Object(to[key]), from[key]) 38 | } 39 | } 40 | 41 | export function deepAssign(to, from) { 42 | Object.keys(from).forEach(key => { 43 | assignKey(to, from, key) 44 | }) 45 | 46 | return to 47 | } 48 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/min-editor.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 37 | 38 | 41 | -------------------------------------------------------------------------------- /src/icons/svg/table.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/svg-icon/index.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 38 | 39 | 50 | -------------------------------------------------------------------------------- /src/icons/svg/cascader-field.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/utils/emitter.js: -------------------------------------------------------------------------------- 1 | function broadcast(componentName, eventName, params) { 2 | this.$children.forEach(child => { 3 | var name = child.$options.componentName; 4 | 5 | if (name === componentName) { 6 | child.$emit.apply(child, [eventName].concat(params)); 7 | broadcast.apply(child, [componentName, eventName].concat([params])); //继续遍历子节点！！ 8 | } else { 9 | broadcast.apply(child, [componentName, eventName].concat([params])); 10 | } 11 | }); 12 | } 13 | export default { 14 | methods: { 15 | dispatch(componentName, eventName, params) { 16 | var parent = this.$parent || this.$root; 17 | var name = parent.$options.componentName; 18 | 19 | while (parent && (!name || name !== componentName)) { 20 | parent = parent.$parent; 21 | 22 | if (parent) { 23 | name = parent.$options.componentName; 24 | } 25 | } 26 | if (parent) { 27 | parent.$emit.apply(parent, [eventName].concat(params)); 28 | } 29 | }, 30 | broadcast(componentName, eventName, params) { 31 | broadcast.call(this, componentName, eventName, params); 32 | } 33 | } 34 | }; 35 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/field-button/button-type-editor.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 29 | 30 | 33 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/textAlign-editor.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 27 | 28 | 36 | -------------------------------------------------------------------------------- /src/icons/svg/rate-field.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/svg/tab.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/container-sub-form/sub-form-labelAlign-editor.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 27 | 28 | 37 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/maxLength-editor.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 37 | 38 | 41 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/minLength-editor.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 38 | 39 | 42 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/customClass-editor.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 37 | 38 | 41 | -------------------------------------------------------------------------------- /src/icons/svg/node-tree.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/svg/select-field.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/lang/en-US_render.js: -------------------------------------------------------------------------------- 1 | export default { 2 | render: { 3 | 4 | hint: { 5 | prompt: 'Prompt', 6 | confirm: 'OK', 7 | cancel: 'Cancel', 8 | 9 | selectPlaceholder: 'Pick some item', 10 | timePlaceholder: 'Select time', 11 | startTimePlaceholder: 'Start time', 12 | endTimePlaceholder: 'End time', 13 | datePlaceholder: 'Select date', 14 | startDatePlaceholder: 'Start date', 15 | endDatePlaceholder: 'End date', 16 | blankCellContent: '--', 17 | 18 | uploadError: 'Upload error: ', 19 | uploadExceed: 'The maximum number(${uploadLimit}) of file uploads has been exceeded.', 20 | unsupportedFileType: 'Unsupported format: ', 21 | fileSizeExceed: 'File size out of limit: ', 22 | refNotFound: 'Ref not found: ', 23 | fieldRequired: 'Input value should be not null.', 24 | invalidNumber: 'Invalid number format', 25 | selectFile: ' File...', 26 | downloadFile: 'Download', 27 | removeFile: 'Remove', 28 | validationFailed: 'Form validation failed', 29 | 30 | subFormAction: 'Action', 31 | subFormAddAction: 'Add', 32 | subFormAddActionHint: 'add new row', 33 | insertSubFormRow: 'insert new row', 34 | deleteSubFormRow: 'delete this row', 35 | nonSubFormType: 'The type of widget don\'t match sub-form', 36 | } 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /index_template/index_prod.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | <%= htmlWebpackPlugin.options.title %> 16 | 17 | 18 | 19 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/field-file-upload/file-upload-fileTypes-editor.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 41 | 42 | 45 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/field-picture-upload/picture-upload-fileTypes-editor.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 41 | 42 | 45 | -------------------------------------------------------------------------------- /src/icons/svg/alert.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/svg/sub-form.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/labelAlign-editor.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 34 | 35 | 43 | -------------------------------------------------------------------------------- /src/icons/svg/slot-field.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/svg/date-range-field.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/utils/smart-vue-i18n/index.js: -------------------------------------------------------------------------------- 1 | import {deepAssign, get} from './utils' 2 | 3 | const install = (Vue, options) => { 4 | const proto = Vue.prototype 5 | proto.$si18n = proto.$si18n || {} 6 | // 初始化多语言 7 | deepAssign(proto.$si18n, options) 8 | 9 | const _vm = new Vue({ 10 | data: options 11 | }) 12 | Object.defineProperty(Vue.prototype.$si18n, 'lang', { 13 | get() { 14 | return _vm.lang 15 | } 16 | }) 17 | 18 | proto.$st = (path, ...args) => { 19 | let messages = _vm.messages[_vm.lang] 20 | if (!proto.$si18n.messages) { 21 | if (process.env.NODE_ENV !== 'production') { 22 | console.error('[yxI18n] Locale not correctly registered') 23 | } 24 | return () => path 25 | } 26 | //const message = get(messages, path) || get(messages, path) 27 | const message = get(messages, path) 28 | return typeof message === 'function' 29 | ? message(...args) 30 | : (message !== null ? message : path) 31 | } 32 | 33 | proto.$st2 = (path, path2) => { 34 | let messages = _vm.messages[_vm.lang] 35 | const message = get(messages, path) 36 | return (message !== null) ? message : get(messages, path2) 37 | } 38 | 39 | proto.$si18n.add = (messages = {}) => { 40 | deepAssign(proto.$si18n.messages, messages) 41 | } 42 | 43 | proto.$si18n.setLang = lang => { 44 | _vm.lang = lang 45 | } 46 | 47 | Vue.mixin({ 48 | beforeCreate() { 49 | this.$options.i18n && this.$si18n.add(this.$options.i18n) 50 | } 51 | }) 52 | } 53 | 54 | export default { 55 | install 56 | } 57 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "variant-form", 3 | "version": "2.2.9", 4 | "private": false, 5 | "scripts": { 6 | "serve": "vue-cli-service serve --open src/main.js", 7 | "build": "vue-cli-service build --report --dest dist/build", 8 | "lib": "vue-cli-service build --report --target lib --dest dist/lib --name VFormDesigner install.js", 9 | "lib-render": "vue-cli-service build --report --target lib --dest dist/lib-render --name VFormRender install-render.js", 10 | "lint": "vue-cli-service lint" 11 | }, 12 | "dependencies": { 13 | "axios": "^0.21.1", 14 | "clipboard": "^2.0.8", 15 | "core-js": "^3.6.5", 16 | "element-ui": "^2.15.1", 17 | "file-saver": "^2.0.5", 18 | "vue": "^2.6.11", 19 | "vue2-editor": "^2.10.2", 20 | "vuedraggable": "^2.24.3" 21 | }, 22 | "devDependencies": { 23 | "@vue/cli-plugin-babel": "~4.5.0", 24 | "@vue/cli-plugin-eslint": "~4.5.0", 25 | "@vue/cli-service": "~4.5.0", 26 | "ace-builds": "^1.4.12", 27 | "babel-eslint": "^10.1.0", 28 | "babel-polyfill": "^6.26.0", 29 | "eslint": "^6.7.2", 30 | "eslint-plugin-vue": "^6.2.2", 31 | "mvdir": "^1.0.21", 32 | "sass": "^1.45.1", 33 | "sass-loader": "^8.0.2", 34 | "svg-sprite-loader": "^5.2.1", 35 | "vue-template-compiler": "^2.6.11" 36 | }, 37 | "eslintConfig": { 38 | "root": true, 39 | "env": { 40 | "node": true 41 | }, 42 | "extends": [ 43 | "plugin:vue/essential", 44 | "eslint:recommended" 45 | ], 46 | "parserOptions": { 47 | "parser": "babel-eslint" 48 | }, 49 | "rules": {} 50 | }, 51 | "browserslist": [ 52 | "> 1%", 53 | "last 2 versions", 54 | "not dead" 55 | ] 56 | } 57 | -------------------------------------------------------------------------------- /src/icons/svg/time-field.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/icons/svg/time-range-field.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/propertyMixin.js: -------------------------------------------------------------------------------- 1 | export default { 2 | methods: { 3 | hasConfig(configName) { 4 | if (!this.designer || !this.designer.selectedWidget) { 5 | return false 6 | } 7 | 8 | return this.designer.hasConfig(this.selectedWidget, configName) 9 | }, 10 | 11 | emitDefaultValueChange() { 12 | if (!!this.designer) { 13 | if (!!this.designer.formWidget) { 14 | let fieldWidget = this.designer.formWidget.getWidgetRef(this.designer.selectedWidget.options.name) 15 | if (!!fieldWidget && !!fieldWidget.refreshDefaultValue) { 16 | fieldWidget.refreshDefaultValue() 17 | } 18 | } 19 | } 20 | }, 21 | 22 | inputNumberHandler({target}) { 23 | target.value = target.value.replace(/[^0-9]/gi, '') 24 | }, 25 | 26 | onRemoteChange(val) { 27 | if (!!val) { 28 | this.optionModel.filterable = true 29 | this.optionModel.allowCreate = false 30 | } 31 | }, 32 | 33 | onMultipleSelected(val) { 34 | if (val) { 35 | //debugger 36 | 37 | // 清空已选项，否则console会报错！！ 38 | let foundRef = this.designer.formWidget.getWidgetRef(this.optionModel.name) 39 | if (!!foundRef && !!foundRef.clearSelectedOptions) { 40 | foundRef.clearSelectedOptions() 41 | } 42 | 43 | this.optionModel.defaultValue = [] //清空原默认值!! 44 | } else { 45 | if (!!this.optionModel.defaultValue && (this.optionModel.defaultValue.length > 0)) { 46 | this.optionModel.defaultValue = this.optionModel.defaultValue[0] 47 | } else { 48 | this.optionModel.defaultValue = '' 49 | } 50 | } 51 | }, 52 | 53 | 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /src/icons/svg/github.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/validation-editor.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 45 | 46 | 49 | -------------------------------------------------------------------------------- /src/components/form-designer/setting-panel/property-editor/container-grid-col/grid-col-span-editor.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 45 | 46 | 49 | -------------------------------------------------------------------------------- /src/icons/svg/document.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/form-render/container-item/grid-item.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 56 | 57 | 60 | -------------------------------------------------------------------------------- /src/icons/svg/checkbox-field.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/extension/samples/extension-sfc-generator.js: -------------------------------------------------------------------------------- 1 | import {buildClassAttr, buildContainerWidget, buildFieldWidget} from '@/utils/sfc-generator' 2 | 3 | export const cardTemplateGenerator = function (cw, formConfig) { 4 | const wop = cw.options 5 | //const headerAttr = `header="${wop.label}"` 6 | const classAttr = buildClassAttr(cw) 7 | const styleAttr = !!wop.cardWidth ? `style="{width: ${wop.cardWidth} !important}"` : '' 8 | const shadowAttr = `shadow="${wop.shadow}"` 9 | const vShowAttr = !!wop.hidden ? `v-show="false"` : '' 10 | 11 | const cardTemplate = 12 | `
13 | 14 |
15 | ${wop.label} 16 | ${!!wop.showFold ? `` : ''} 17 |
18 | ${ 19 | cw.widgetList.map(wItem => { 20 | if (wItem.category === 'container') { 21 | return buildContainerWidget(wItem, formConfig) 22 | } else { 23 | return buildFieldWidget(wItem, formConfig) 24 | } 25 | }).join('') 26 | } 27 | 28 |
` 29 | 30 | return cardTemplate 31 | } 32 | 33 | export const alertTemplateGenerator = function(fw, formConfig) { 34 | const wop = fw.options 35 | const titleAttr = `title="${wop.title}"` 36 | const typeAttr = `type=${wop.type}` 37 | const descriptionAttr = !!wop.description ? `description="${wop.description}"` : '' 38 | const closableAttr = `:closable="${wop.closable}"` 39 | const closeTextAttr = !!wop.closeText ? `close-text="${wop.closeText}"` : '' 40 | const centerAttr = `:center="${wop.center}"` 41 | const showIconAttr = `:show-icon="${wop.showIcon}"` 42 | const effectAttr = `effect="${wop.effect}"` 43 | 44 | const alertTemplate = 45 | ` 47 | ` 48 | 49 | return alertTemplate 50 | } 51 | -------------------------------------------------------------------------------- /src/utils/vue3js-generator.js: -------------------------------------------------------------------------------- 1 | import { 2 | buildActiveTabs, 3 | buildDefaultValueListFn, 4 | buildFieldOptionsFn, 5 | buildRulesListFn, buildUploadDataFn 6 | } from "@/utils/vue2js-generator"; 7 | import {traverseFieldWidgets} from "@/utils/util"; 8 | 9 | export const genVue3JS = function (formConfig, widgetList) { 10 | let defaultValueList = [] 11 | let rulesList = [] 12 | let fieldOptions = [] 13 | let uploadData = [] 14 | traverseFieldWidgets(widgetList, (widget) => { 15 | buildDefaultValueListFn(formConfig, widgetList, defaultValueList)(widget) 16 | buildRulesListFn(formConfig, widgetList, rulesList)(widget) 17 | buildFieldOptionsFn(formConfig, widgetList, fieldOptions)(widget) 18 | buildUploadDataFn(formConfig, widgetList, uploadData)(widget) 19 | }) 20 | 21 | const activeTabs = buildActiveTabs(formConfig, widgetList) 22 | 23 | const v3JSTemplate = 24 | ` import { defineComponent, toRefs, reactive, getCurrentInstance } from 'vue' 25 | 26 | export default defineComponent({ 27 | components: {}, 28 | props: {}, 29 | setup() { 30 | const state = reactive({ 31 | ${formConfig.modelName}: { 32 | ${defaultValueList.join('\n')} 33 | }, 34 | 35 | ${formConfig.rulesName}: { 36 | ${rulesList.join('\n')} 37 | }, 38 | 39 | ${activeTabs.join('\n')} 40 | 41 | ${fieldOptions.join('\n')} 42 | 43 | ${uploadData.join('\n')} 44 | }) 45 | 46 | const instance = getCurrentInstance() 47 | 48 | const submitForm = () => { 49 | instance.proxy.$refs['vForm'].validate(valid => { 50 | if (!valid) return 51 | 52 | //TODO: 提交表单 53 | }) 54 | } 55 | 56 | const resetForm = () => { 57 | instance.proxy.$refs['vForm'].resetFields() 58 | } 59 | 60 | return { 61 | ...toRefs(state), 62 | submitForm, 63 | resetForm 64 | } 65 | } 66 | })` 67 | 68 | return v3JSTemplate 69 | } 70 | 71 | -------------------------------------------------------------------------------- /src/icons/svg/color-field.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/svg/grid.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/form-designer/widget-panel/templatesConfig.js: -------------------------------------------------------------------------------- 1 | export const formTemplates = [ 2 | { 3 | title: '单列表单', 4 | imgUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/t1.png', 5 | jsonUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/json1.txt', 6 | description: '表单模板详细说明...' 7 | }, 8 | 9 | { 10 | title: '多列表单', 11 | imgUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/t2.png', 12 | jsonUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/json2.txt', 13 | description: '表单模板详细说明...' 14 | }, 15 | 16 | { 17 | title: '分组表单', 18 | imgUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/t3.png', 19 | jsonUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/json3.txt', 20 | description: '表单模板详细说明...' 21 | }, 22 | 23 | { 24 | title: '标签页表单', 25 | imgUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/t4.png', 26 | jsonUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/json4.txt', 27 | description: '表单模板详细说明...' 28 | }, 29 | 30 | { 31 | title: '主从表单', 32 | imgUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/t5.png', 33 | jsonUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/json5.txt', 34 | description: '表单模板详细说明...' 35 | }, 36 | 37 | { 38 | title: '响应式表单', 39 | imgUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/t6.png', 40 | jsonUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/json6.txt', 41 | description: '表单模板详细说明...' 42 | }, 43 | 44 | { 45 | title: '问卷调查表', 46 | imgUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/t7.png', 47 | jsonUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/json7.txt', 48 | description: '表单模板详细说明...' 49 | }, 50 | 51 | { 52 | title: '固定表格表单', 53 | imgUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/t8.png', 54 | jsonUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/json8.txt', 55 | description: '表单模板详细说明...' 56 | }, 57 | 58 | ] 59 | -------------------------------------------------------------------------------- /src/components/form-render/container-item/table-item.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | 60 | 61 | 71 | -------------------------------------------------------------------------------- /src/utils/beautifierLoader.js: -------------------------------------------------------------------------------- 1 | import {loadRemoteScript} from "@/utils/util"; 2 | import {BEAUTIFIER_PATH} from "@/utils/config"; 3 | 4 | let beautifierObj 5 | 6 | export const beautifierOpts = { 7 | html: { 8 | indent_size: '2', 9 | indent_char: ' ', 10 | max_preserve_newlines: '-1', 11 | preserve_newlines: false, 12 | keep_array_indentation: false, 13 | break_chained_methods: false, 14 | indent_scripts: 'separate', 15 | brace_style: 'end-expand', 16 | space_before_conditional: true, 17 | unescape_strings: false, 18 | jslint_happy: false, 19 | end_with_newline: true, 20 | wrap_line_length: '110', 21 | indent_inner_html: true, 22 | comma_first: false, 23 | e4x: true, 24 | indent_empty_lines: true 25 | }, 26 | js: { 27 | indent_size: '2', 28 | indent_char: ' ', 29 | max_preserve_newlines: '-1', 30 | preserve_newlines: false, 31 | keep_array_indentation: false, 32 | break_chained_methods: false, 33 | indent_scripts: 'normal', 34 | brace_style: 'end-expand', 35 | space_before_conditional: true, 36 | unescape_strings: false, 37 | jslint_happy: true, 38 | end_with_newline: true, 39 | wrap_line_length: '110', 40 | indent_inner_html: true, 41 | comma_first: false, 42 | e4x: true, 43 | indent_empty_lines: true 44 | }, 45 | css: { 46 | indent_size: '2', 47 | indent_char: ' ', 48 | max_preserve_newlines: '-1', 49 | preserve_newlines: false, 50 | keep_array_indentation: false, 51 | break_chained_methods: false, 52 | indent_scripts: 'normal', 53 | brace_style: 'end-expand', 54 | space_before_conditional: true, 55 | unescape_strings: false, 56 | jslint_happy: true, 57 | end_with_newline: true, 58 | wrap_line_length: '110', 59 | indent_inner_html: true, 60 | comma_first: false, 61 | e4x: true, 62 | indent_empty_lines: true 63 | } 64 | } 65 | 66 | export default function loadBeautifier(callback) { 67 | if (beautifierObj) { 68 | callback(beautifierObj) 69 | return 70 | } 71 | 72 | loadRemoteScript(BEAUTIFIER_PATH, () => { 73 | // eslint-disable-next-line no-undef 74 | beautifierObj = beautifier //beautifier为全局对象 75 | callback(beautifierObj) 76 | }) 77 | } 78 | -------------------------------------------------------------------------------- /src/icons/svg/rich-editor-field.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/styles/global.scss: -------------------------------------------------------------------------------- 1 | /* 全局css变量 */ 2 | $--color-primary: #409EFF; 3 | 4 | .primary-color { 5 | color: $--color-primary; 6 | } 7 | 8 | .background-opacity { 9 | background: rgba(64, 158, 255, 0.6); 10 | } 11 | 12 | .form-widget-list { 13 | 14 | .ghost{ 15 | content: ''; 16 | font-size: 0; 17 | height: 3px; 18 | box-sizing: border-box; 19 | background: $--color-primary; 20 | border: 2px solid $--color-primary; 21 | outline-width: 0; 22 | padding: 0; 23 | overflow: hidden; 24 | } 25 | } 26 | 27 | .el-form-item--medium { 28 | .el-radio { 29 | line-height: 36px !important; 30 | } 31 | 32 | .el-rate{ 33 | margin-top: 8px; 34 | } 35 | } 36 | 37 | .el-form-item--small { 38 | .el-radio { 39 | line-height: 32px !important; 40 | } 41 | 42 | .el-rate{ 43 | margin-top: 6px; 44 | } 45 | } 46 | 47 | .el-form-item--mini { 48 | .el-radio { 49 | line-height: 28px !important; 50 | } 51 | 52 | .el-rate{ 53 | margin-top: 4px; 54 | } 55 | } 56 | 57 | .el-card { 58 | margin-top: 3px; 59 | margin-bottom: 3px; 60 | } 61 | 62 | input[type="password"]::-ms-reveal { /* 隐藏IE/Edge原生的密码查看按钮 */ 63 | display: none; 64 | } 65 | 66 | /* 滚动条样式 begin */ 67 | ::-webkit-scrollbar { 68 | width: 8px; 69 | height: 8px; 70 | } 71 | 72 | ::-webkit-scrollbar-track { 73 | width: 8px; 74 | background: rgba(#101F1C, 0.1); 75 | -webkit-border-radius: 2em; 76 | -moz-border-radius: 2em; 77 | border-radius: 2em; 78 | } 79 | 80 | ::-webkit-scrollbar-thumb { 81 | background-color: rgba(#101F1C, 0.35); 82 | background-clip: padding-box; 83 | min-height: 28px; 84 | -webkit-border-radius: 2em; 85 | -moz-border-radius: 2em; 86 | border-radius: 2em; 87 | } 88 | 89 | ::-webkit-scrollbar-thumb:hover { 90 | background-color: rgba(#101F1C, 0.85); 91 | } 92 | 93 | * {//Firefox浏览器滚动条样式 94 | scrollbar-color: #e5e5e5 #f7f7f9; //滚动条轨道颜色、滚动条滑块的颜色 95 | scrollbar-width: thin; //thin模式下滚动条两端的三角按钮会消失 96 | } 97 | 98 | 99 | /* 100 | body {//IE浏览器滚动条样式 101 | scrollbar-shadow-color: #e5e5e5; 102 | scrollbar-face-color: #e5e5e5; 103 | scrollbar-base-color: #ffffff; 104 | scrollbar-arrow-color: #444040; 105 | } 106 | */ 107 | 108 | /* 滚动条样式 end */ 109 | -------------------------------------------------------------------------------- /src/utils/directive.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | 3 | // v-dialogDrag: 弹窗拖拽 4 | Vue.directive('dialogDrag', { 5 | bind(el, binding, vnode, oldVnode) { 6 | const dialogHeaderEl = el.querySelector('.el-dialog__header') 7 | const dragDom = el.querySelector('.el-dialog') 8 | dialogHeaderEl.style.cursor = 'move' 9 | 10 | // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null); 11 | const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null) 12 | 13 | dialogHeaderEl.onmousedown = (e) => { 14 | // 鼠标按下，计算当前元素距离可视区的距离 15 | const disX = e.clientX - dialogHeaderEl.offsetLeft 16 | const disY = e.clientY - dialogHeaderEl.offsetTop 17 | 18 | // 获取到的值带px 正则匹配替换 19 | let styL, styT 20 | 21 | // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px 22 | if (sty.left.includes('%')) { 23 | styL = +document.body.clientWidth * (+sty.left.replace(/%/g, '') / 100) 24 | styT = +document.body.clientHeight * (+sty.top.replace(/%/g, '') / 100) 25 | } else { 26 | styL = +sty.left.replace(/px/g, '') 27 | styT = +sty.top.replace(/px/g, '') 28 | } 29 | 30 | document.onmousemove = function(e) { 31 | // 通过事件委托，计算移动的距离 32 | const l = e.clientX - disX 33 | const t = e.clientY - disY 34 | 35 | // 移动当前元素 36 | dragDom.style.left = `${l + styL}px` 37 | dragDom.style.top = `${t + styT}px` 38 | 39 | // 将此时的位置传出去 40 | // binding.value({x:e.pageX,y:e.pageY}) 41 | } 42 | 43 | document.onmouseup = function(e) { 44 | document.onmousemove = null 45 | document.onmouseup = null 46 | } 47 | } 48 | } 49 | }) 50 | 51 | // v-dialogDragWidth: 弹窗宽度拖大 拖小 52 | Vue.directive('dialogDragWidth', { 53 | bind(el, binding, vnode, oldVnode) { 54 | const dragDom = binding.value.$el.querySelector('.el-dialog') 55 | 56 | el.onmousedown = (e) => { 57 | // 鼠标按下，计算当前元素距离可视区的距离 58 | const disX = e.clientX - el.offsetLeft 59 | 60 | document.onmousemove = function(e) { 61 | e.preventDefault() // 移动时禁用默认事件 62 | 63 | // 通过事件委托，计算移动的距离 64 | const l = e.clientX - disX 65 | dragDom.style.width = `${l}px` 66 | } 67 | 68 | document.onmouseup = function(e) { 69 | document.onmousemove = null 70 | document.onmouseup = null 71 | } 72 | } 73 | } 74 | }) 75 | -------------------------------------------------------------------------------- /src/components/form-designer/form-widget/field-widget/html-text-widget.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 78 | 79 | 83 | --------------------------------------------------------------------------------