From 1fe0a52c085b530fc196ca5f92377c5574dda940 Mon Sep 17 00:00:00 2001 From: vdpAdmin Date: Tue, 26 Oct 2021 17:51:40 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E7=BB=84=E4=BB=B6=E4=BA=8C?= =?UTF-8?q?=E6=AC=A1=E5=BC=80=E5=8F=91=E7=A4=BA=E4=BE=8B=E7=9A=84SFC?= =?UTF-8?q?=E4=BB=A3=E7=A0=81=E7=94=9F=E6=88=90=EF=BC=9B=E5=88=86=E7=A6=BB?= =?UTF-8?q?iview=E7=89=88=E6=9C=AC=E4=BB=A3=E7=A0=81=E5=88=B0=E7=8B=AC?= =?UTF-8?q?=E7=AB=8B=E4=BB=93=E5=BA=93=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README-iview.md | 152 -- install-iview.js | 49 - install-render-iview.js | 32 - package.json | 6 +- src/App-iview.vue | 22 - src/components-iview/code-editor/index.vue | 131 -- .../form-designer/designer.js | 779 ------- .../form-widget/container-widget.vue | 429 ---- .../form-widget/field-widget.vue | 1580 -------------- .../form-widget/grid-col-widget.vue | 203 -- .../form-designer/form-widget/index.vue | 252 --- .../form-designer/form-widget/tab-pane.vue | 93 - .../form-widget/table-cell-widget.vue | 385 ---- src/components-iview/form-designer/index.vue | 262 --- .../form-designer/setting-panel/index.vue | 1858 ----------------- .../setting-panel/option-items-setting.vue | 272 --- .../form-designer/toolbar-panel/index.vue | 566 ----- .../form-designer/widget-panel/index.vue | 275 --- .../widget-panel/widgetsConfig.js | 901 -------- .../form-render/container-item.vue | 605 ------ .../form-render/grid-col-item.vue | 66 - src/components-iview/form-render/index.vue | 477 ----- src/components-iview/form-render/refMixin.js | 22 - .../form-render/table-cell-item.vue | 61 - src/components-iview/lang/en-US.js | 301 --- src/components-iview/lang/en-US_render.js | 38 - src/components-iview/lang/zh-CN.js | 304 --- src/components-iview/lang/zh-CN_render.js | 38 - src/components-iview/svg-icon/index.vue | 49 - src/components-iview/utils/code-generator.js | 91 - src/components-iview/utils/i18n.js | 54 - src/components-iview/utils/sfc-generator.js | 581 ------ .../utils/vue2js-generator.js | 144 -- .../utils/vue3js-generator.js | 70 - src/extension/extension-loader.js | 19 +- .../samples/extension-sfc-generator.js | 46 + src/main-iview.js | 33 - src/utils/config.js | 2 +- src/utils/sfc-generator.js | 33 +- src/utils/util.js | 4 + 40 files changed, 93 insertions(+), 11192 deletions(-) delete mode 100644 README-iview.md delete mode 100644 install-iview.js delete mode 100644 install-render-iview.js delete mode 100644 src/App-iview.vue delete mode 100644 src/components-iview/code-editor/index.vue delete mode 100644 src/components-iview/form-designer/designer.js delete mode 100644 src/components-iview/form-designer/form-widget/container-widget.vue delete mode 100644 src/components-iview/form-designer/form-widget/field-widget.vue delete mode 100644 src/components-iview/form-designer/form-widget/grid-col-widget.vue delete mode 100644 src/components-iview/form-designer/form-widget/index.vue delete mode 100644 src/components-iview/form-designer/form-widget/tab-pane.vue delete mode 100644 src/components-iview/form-designer/form-widget/table-cell-widget.vue delete mode 100644 src/components-iview/form-designer/index.vue delete mode 100644 src/components-iview/form-designer/setting-panel/index.vue delete mode 100644 src/components-iview/form-designer/setting-panel/option-items-setting.vue delete mode 100644 src/components-iview/form-designer/toolbar-panel/index.vue delete mode 100644 src/components-iview/form-designer/widget-panel/index.vue delete mode 100644 src/components-iview/form-designer/widget-panel/widgetsConfig.js delete mode 100644 src/components-iview/form-render/container-item.vue delete mode 100644 src/components-iview/form-render/grid-col-item.vue delete mode 100644 src/components-iview/form-render/index.vue delete mode 100644 src/components-iview/form-render/refMixin.js delete mode 100644 src/components-iview/form-render/table-cell-item.vue delete mode 100644 src/components-iview/lang/en-US.js delete mode 100644 src/components-iview/lang/en-US_render.js delete mode 100644 src/components-iview/lang/zh-CN.js delete mode 100644 src/components-iview/lang/zh-CN_render.js delete mode 100644 src/components-iview/svg-icon/index.vue delete mode 100644 src/components-iview/utils/code-generator.js delete mode 100644 src/components-iview/utils/i18n.js delete mode 100644 src/components-iview/utils/sfc-generator.js delete mode 100644 src/components-iview/utils/vue2js-generator.js delete mode 100644 src/components-iview/utils/vue3js-generator.js create mode 100644 src/extension/samples/extension-sfc-generator.js delete mode 100644 src/main-iview.js diff --git a/README-iview.md b/README-iview.md deleted file mode 100644 index ffafbb8..0000000 --- a/README-iview.md +++ /dev/null @@ -1,152 +0,0 @@ -# Variant Form iView版 -#### 一款高效的Vue低代码表单，可视化设计，一键生成源码，享受更多摸鱼时间。 - -![image](https://ks3-cn-beijing.ksyuncs.com/vform-static/img/iview_demo.gif) - -
- -### 安装依赖 -``` -npm install -``` - -### 开发调试 -``` -npm run serve -``` - -### 生产打包 -``` -npm run build -``` - -### 表单设计器 + 表单渲染器打包 -``` -npm run lib-iview -``` - -### 表单渲染器打包 -``` -npm run lib-render-iview -``` - -### 浏览器兼容性 -```Chrome（及同内核的浏览器如QQ浏览器、360浏览器等等），Edge, Firefox，Safari，IE 11``` - -
- -### 跟Vue项目集成 - -
- -#### 1. 安装包 - ```bash - npm i vform-builds - ``` -或 - ```bash - yarn add vform-builds - ``` - -
- -#### 2. 引入并全局注册VForm组件 -```javascript -import Vue from 'vue' -import App from './App.vue' - -import ViewUI from 'view-design' //引入iView库 -import VForm from 'vform-builds/dist/VFormDesigner-iView.umd.min.js' //引入iView版本VForm库文件 - -import 'view-design/dist/styles/iview.css' //引入iView样式 -import 'vform-builds/dist/VFormDesigner-iView.css' //引入VForm样式 - -Vue.config.productionTip = false - -Vue.use(ViewUI, {size:'small'}) //全局注册iView -Vue.use(VForm) //全局注册VForm(同时注册了v-form-designer和v-form-render组件) - -new Vue({ - render: h => h(App), -}).$mount('#app') -``` - -
- -#### 3. 在Vue模板中使用表单设计器组件 -```html - - - - - -``` - -
- -#### 4. 在Vue模板中使用表单渲染器组件 -```html - - -``` - -
- -### 资源链接 -
- -文档官网：http://www.vform666.com/ - -在线演示：http://demo.vform666.com/ - -VS Code插件：http://www.vform666.com/pages/plugin/ - -Github仓库：https://github.com/vform666/variant-form - -Gitee备份仓库：https://gitee.com/vdpadmin/variant-form - -更新日志：http://www.vform666.com/pages/changelog/ - -技术交流群：微信搜索“vformAdmin”，或者扫如下二维码加群 - -![image](https://ks3-cn-beijing.ksyuncs.com/vform-static/img/vx-qrcode-242.png) \ No newline at end of file diff --git a/install-iview.js b/install-iview.js deleted file mode 100644 index 8f4e773..0000000 --- a/install-iview.js +++ /dev/null @@ -1,49 +0,0 @@ -import axios from 'axios' - -import VFormDesigner from '@/components-iview/form-designer/index.vue' -import VFormRender from '@/components-iview/form-render/index.vue' -import ContainerWidget from "@/components-iview/form-designer/form-widget/container-widget"; -import ContainerItem from "@/components-iview/form-render/container-item"; - - -import '@/utils/directive' -import '@/icons' -import '@/iconfont/iconfont.css' - - -VFormDesigner.install = function (Vue) { - Vue.component(VFormDesigner.name, VFormDesigner) - Vue.component('container-widget', ContainerWidget) -} - -VFormRender.install = function (Vue) { - Vue.component(VFormRender.name, VFormRender) - Vue.component('container-item', ContainerItem) -} - -const components = [ - VFormDesigner, - VFormRender -] - -const install = (Vue) => { - /* 递归组件如需在递归组件的嵌套组件中使用，必须注册为全局组件，原因不明？？ begin */ - Vue.component('container-widget', ContainerWidget) - Vue.component('container-item', ContainerItem) - /* end */ - - components.forEach(component => { - Vue.component(component.name, component) - }) -} - -if (typeof window !== 'undefined' && window.Vue) { /* script方式引入时主动调用install方法！！ */ - window.axios = axios - install(window.Vue); -} - -export default { - install, - VFormDesigner, - VFormRender -} diff --git a/install-render-iview.js b/install-render-iview.js deleted file mode 100644 index a588f79..0000000 --- a/install-render-iview.js +++ /dev/null @@ -1,32 +0,0 @@ -import VFormRender from '@/components-iview/form-render/index.vue' -import ContainerItem from "@/components-iview/form-render/container-item"; -import axios from "axios"; - -VFormRender.install = function (Vue) { - Vue.component(VFormRender.name, VFormRender) - Vue.component('container-item', ContainerItem) -} - -const components = [ - VFormRender -] - -const install = (Vue) => { - /* 递归组件如需在递归组件的嵌套组件中使用，必须注册为全局组件，原因不明？？ begin */ - Vue.component('container-item', ContainerItem) - /* end */ - - components.forEach(component => { - Vue.component(component.name, component) - }) -} - -if (typeof window !== 'undefined' && window.Vue) { /* script方式引入时主动调用install方法！！ */ - window.axios = axios - install(window.Vue); -} - -export default { - install, - VFormRender -} diff --git a/package.json b/package.json index e116f8f..73d5134 100644 --- a/package.json +++ b/package.json @@ -1,16 +1,12 @@ { "name": "variant-form", - "version": "2.1.0", + "version": "2.1.1", "private": false, "scripts": { "serve": "vue-cli-service serve --open src/main.js", - "serve-iview": "vue-cli-service serve --open src/main-iview.js", "build": "vue-cli-service build --report --dest dist/build", - "build-iview": "vue-cli-service build --open src/main-iview.js --report --dest dist/build-iview", "lib": "vue-cli-service build --report --target lib --dest dist/lib --name VFormDesigner install.js", "lib-render": "vue-cli-service build --report --target lib --dest dist/lib-render --name VFormRender install-render.js", - "lib-iview": "vue-cli-service build --report --target lib --dest dist/lib-iview --name VFormDesigner-iView install-iview.js", - "lib-render-iview": "vue-cli-service build --report --target lib --dest dist/lib-render-iview --name VFormRender-iView install-render-iview.js", "lint": "vue-cli-service lint" }, "dependencies": { diff --git a/src/App-iview.vue b/src/App-iview.vue deleted file mode 100644 index eb1b2ea..0000000 --- a/src/App-iview.vue +++ /dev/null @@ -1,22 +0,0 @@ - - - - - diff --git a/src/components-iview/code-editor/index.vue b/src/components-iview/code-editor/index.vue deleted file mode 100644 index aa877bd..0000000 --- a/src/components-iview/code-editor/index.vue +++ /dev/null @@ -1,131 +0,0 @@ - - - - - - diff --git a/src/components-iview/form-designer/designer.js b/src/components-iview/form-designer/designer.js deleted file mode 100644 index 3bdb58b..0000000 --- a/src/components-iview/form-designer/designer.js +++ /dev/null @@ -1,779 +0,0 @@ -/** - * author: vformAdmin - * email: vdpadmin@163.com - * website: http://www.vform666.com/ - * date: 2021.08.18 - * remark: 如果要分发VForm源码，需在本文件顶部保留此文件头信息！！ - */ - -import {deepClone, generateId, overwriteObj} from "@/utils/util" -import {advancedFields, basicFields, containers} from "@/components/form-designer/widget-panel/widgetsConfig.js"; -import {VARIANT_FORM_VERSION} from "@/utils/config"; - -export function createDesigner(vueInstance) { - let defaultFormConfig = { - modelName: 'formData', - refName: 'vForm', - rulesName: 'rules', - labelWidth: 80, - labelPosition: 'left', - size: '', - labelAlign: 'label-left-align', - cssCode: '', - customClass: '', - functions: '', - layoutType: 'PC', - - onFormCreated: '', - onFormMounted: '', - onFormDataChange: '', - } - - return { - widgetList: [], - formConfig: {cssCode: ''}, - - selectedId: null, - selectedWidget: null, - selectedWidgetName: null, //选中组件名称（唯一） - vueInstance: vueInstance, - - formWidget: null, //表单设计容器 - - historyData: { - index: -1, //index: 0, - maxStep: 20, - steps: [], - }, - - initDesigner() { - this.widgetList = [] - this.formConfig = deepClone(defaultFormConfig) - - //输出版本信息和语雀链接 - console.info(`%cVariantForm %cVer${VARIANT_FORM_VERSION} %chttps://www.yuque.com/variantdev/vform`, - "color:#409EFF;font-size: 22px;font-weight:bolder", - "color:#999;font-size: 12px", - "color:#333" - ) - - this.initHistoryData() - }, - - clearDesigner() { - let emptyWidgetListFlag = (this.widgetList.length === 0) - this.widgetList = [] - this.selectedId = null - this.selectedWidgetName = null - this.selectedWidget = {} //this.selectedWidget = null - overwriteObj(this.formConfig, defaultFormConfig) // - - if (!emptyWidgetListFlag) { - this.emitHistoryChange() - } else { - this.saveCurrentHistoryStep() - } - }, - - getLayoutType() { - return this.formConfig.layoutType || 'PC' - }, - - changeLayoutType(newType) { - this.formConfig.layoutType = newType - }, - - getImportTemplate() { - return { - widgetList: [], - formConfig: deepClone(this.formConfig) - } - }, - - loadFormJson(formJson) { - let modifiedFlag = false - - if (!!formJson && !!formJson.widgetList) { - this.widgetList = formJson.widgetList - modifiedFlag = true - } - if (!!formJson && !!formJson.formConfig) { - //this.formConfig = importObj.formConfig - overwriteObj(this.formConfig, formJson.formConfig) /* 用=赋值，会导致inject依赖注入的formConfig属性变成非响应式 */ - modifiedFlag = true - } - - return modifiedFlag - }, - - setSelected(selected) { - if (!selected) { - this.clearSelected() - return - } - - this.selectedWidget = selected - if (!!selected.id) { - this.selectedId = selected.id - this.selectedWidgetName = selected.options.name - } - }, - - updateSelectedWidgetNameAndRef(selectedWidget, newName) { - this.selectedWidgetName = newName - selectedWidget.options.name = newName - }, - - clearSelected() { - this.selectedId = null - this.selectedWidgetName = null - this.selectedWidget = {} //this.selectedWidget = null - }, - - checkWidgetMove(evt) { /* Only field widget can be dragged into sub-form */ - if (!!evt.draggedContext && !!evt.draggedContext.element) { - let wgCategory = evt.draggedContext.element.category - if (!!evt.to) { - if ((evt.to.className === 'sub-form-table') && (wgCategory === 'container')) { - //this.$Message.info(this.vueInstance.i18nt('designer.hint.onlyFieldWidgetAcceptable')) - return false - } - } - } - - return true - }, - - insertTableRow(widget, insertPos, cloneRowIdx) { - let rowIdx = (insertPos === undefined) ? widget.rows.length : insertPos //确定插入列位置 - let newRow = (cloneRowIdx === undefined) ? deepClone(widget.rows[widget.rows.length - 1]) : deepClone( widget.rows[cloneRowIdx] ) - newRow.id = 'table-row-' + generateId() - newRow.merged = false - newRow.cols.forEach(col => { - col.id = 'table-cell-' + generateId() - col.options.name = col.id - col.merged = false - col.options.colspan = 1 - col.options.rowspan = 1 - }) - widget.rows.splice(rowIdx, 0, newRow) - - let colNo = 0 - while ((rowIdx < widget.rows.length - 1) && (colNo < widget.rows[0].cols.length)) { //越界判断 - let rowMerged = widget.rows[rowIdx + 1].cols[colNo].merged //确定插入位置的单元格是否为合并单元格 - if (!!rowMerged) { - let rowArray = widget.rows - let unMergedCell = {} - let startRowIndex = null - for (let i = rowIdx; i >= 0; i--) { //查找该行已合并的主单元格 - if (!rowArray[i].cols[colNo].merged && (rowArray[i].cols[colNo].options.rowspan > 1)) { - startRowIndex = i - unMergedCell = rowArray[i].cols[colNo] - break - } - } - - let newRowspan = unMergedCell.options.rowspan + 1 - this.setPropsOfMergedRows(widget.rows, startRowIndex, colNo, unMergedCell.options.colspan, newRowspan) - colNo += unMergedCell.options.colspan - } else { - colNo += 1 - } - } - - this.emitHistoryChange() - }, - - insertTableCol(widget, insertPos) { - let colIdx = (insertPos === undefined) ? widget.rows[0].cols.length : insertPos //确定插入列位置 - widget.rows.forEach(row => { - let newCol = deepClone(this.getContainerByType('table-cell')) - newCol.id = 'table-cell-' + generateId() - newCol.options.name = newCol.id - newCol.merged = false - newCol.options.colspan = 1 - newCol.options.rowspan = 1 - row.cols.splice(colIdx, 0, newCol) - }) - - let rowNo = 0 - while((colIdx < widget.rows[0].cols.length - 1) && (rowNo < widget.rows.length)) { //越界判断 - let colMerged = widget.rows[rowNo].cols[colIdx + 1].merged //确定插入位置的单元格是否为合并单元格 - if (!!colMerged) { - let colArray = widget.rows[rowNo].cols - let unMergedCell = {} - let startColIndex = null - for (let i = colIdx; i >= 0; i--) { //查找该行已合并的主单元格 - if (!colArray[i].merged && (colArray[i].options.colspan > 1)) { - startColIndex = i - unMergedCell = colArray[i] - break - } - } - - let newColspan = unMergedCell.options.colspan + 1 - this.setPropsOfMergedCols(widget.rows, rowNo, startColIndex, newColspan, unMergedCell.options.rowspan) - rowNo += unMergedCell.options.rowspan - } else { - rowNo += 1 - } - } - - this.emitHistoryChange() - }, - - setPropsOfMergedCols(rowArray, startRowIndex, startColIndex, newColspan, rowspan) { - for (let i = startRowIndex; i < startRowIndex + rowspan; i++) { - for (let j = startColIndex; j < startColIndex + newColspan; j++) { - if ((i === startRowIndex) && (j === startColIndex)) { - rowArray[i].cols[j].options.colspan = newColspan //合并后的主单元格 - continue - } - - rowArray[i].cols[j].merged = true - rowArray[i].cols[j].options.colspan = newColspan - rowArray[i].cols[j].widgetList = [] - } - } - }, - - setPropsOfMergedRows(rowArray, startRowIndex, startColIndex, colspan, newRowspan) { - for (let i = startRowIndex; i < startRowIndex + newRowspan; i++) { - for (let j = startColIndex; j < startColIndex + colspan; j++) { - if ((i === startRowIndex) && (j === startColIndex)) { - rowArray[i].cols[j].options.rowspan = newRowspan - continue - } - - rowArray[i].cols[j].merged = true - rowArray[i].cols[j].options.rowspan = newRowspan - rowArray[i].cols[j].widgetList = [] - } - } - }, - - setPropsOfSplitCol(rowArray, startRowIndex, startColIndex, colspan, rowspan) { - for (let i = startRowIndex; i < startRowIndex + rowspan; i++) { - for (let j = startColIndex; j < startColIndex + colspan; j++) { - if ((i === startRowIndex) && (j === startColIndex)) { - rowArray[i].cols[j].options.colspan = 1 - continue - } - - rowArray[i].cols[j].merged = false; - rowArray[i].cols[j].options.colspan = 1 - } - } - }, - - setPropsOfSplitRow(rowArray, startRowIndex, startColIndex, colspan, rowspan) { - for (let i = startRowIndex; i < startRowIndex + rowspan; i++) { - for (let j = startColIndex; j < startColIndex + colspan; j++) { - if ((i === startRowIndex) && (j === startColIndex)) { - rowArray[i].cols[j].options.rowspan = 1 //合并后的主单元格 - continue - } - - rowArray[i].cols[j].merged = false; - rowArray[i].cols[j].options.rowspan = 1 - } - } - }, - - mergeTableCol(rowArray, colArray, curRow, curCol, leftFlag, cellWidget) { - let mergedColIdx = !!leftFlag ? curCol : curCol + colArray[curCol].options.colspan - let remainedColIdx = !!leftFlag ? curCol - colArray[curCol - 1].options.colspan : curCol - if (!!colArray[mergedColIdx].widgetList && (colArray[mergedColIdx].widgetList.length > 0)) { //保留widgetList - if (!colArray[remainedColIdx].widgetList || (colArray[remainedColIdx].widgetList.length === 0)) { - colArray[remainedColIdx].widgetList = deepClone(colArray[mergedColIdx].widgetList) - } - } - - let newColspan = colArray[mergedColIdx].options.colspan * 1 + colArray[remainedColIdx].options.colspan * 1 - this.setPropsOfMergedCols(rowArray, curRow, remainedColIdx, newColspan, cellWidget.options.rowspan) - - this.emitHistoryChange() - }, - - mergeTableWholeRow(rowArray, colArray, rowIndex, colIndex) { //需要考虑操作的行存在已合并的单元格！！ - //整行所有单元格行高不一致不可合并！！ - let startRowspan = rowArray[rowIndex].cols[0].options.rowspan - let unmatchedFlag = false - for (let i = 1; i < rowArray[rowIndex].cols.length; i++) { - if (rowArray[rowIndex].cols[i].options.rowspan !== startRowspan) { - unmatchedFlag = true - break; - } - } - if (unmatchedFlag) { - this.vueInstance.$message.info(this.vueInstance.i18nt('designer.hint.rowspanNotConsistentForMergeEntireRow')) - return - } - - let widgetListCols = colArray.filter((colItem) => { - return !colItem.merged && !!colItem.widgetList && (colItem.widgetList.length > 0) - }) - if (!!widgetListCols && (widgetListCols.length > 0)) { //保留widgetList - if ((widgetListCols[0].id !== colArray[0].id) && (!colArray[0].widgetList || - colArray[0].widgetList.length <= 0)) { - colArray[0].widgetList = deepClone( widgetListCols[0].widgetList ) - } - } - - this.setPropsOfMergedCols(rowArray, rowIndex, 0, colArray.length, colArray[colIndex].options.rowspan) - - this.emitHistoryChange() - }, - - mergeTableRow(rowArray, curRow, curCol, aboveFlag, cellWidget) { - let mergedRowIdx = !!aboveFlag ? curRow : curRow + cellWidget.options.rowspan - let remainedRowIdx = !!aboveFlag ? curRow - cellWidget.options.rowspan : curRow - if (!!rowArray[mergedRowIdx].cols[curCol].widgetList && (rowArray[mergedRowIdx].cols[curCol].widgetList.length > 0)) { //保留widgetList - if (!rowArray[remainedRowIdx].cols[curCol].widgetList || (rowArray[remainedRowIdx].cols[curCol].widgetList.length === 0)) { - rowArray[remainedRowIdx].cols[curCol].widgetList = deepClone(rowArray[mergedRowIdx].cols[curCol].widgetList) - } - } - - let newRowspan = rowArray[mergedRowIdx].cols[curCol].options.rowspan * 1 + rowArray[remainedRowIdx].cols[curCol].options.rowspan * 1 - this.setPropsOfMergedRows(rowArray, remainedRowIdx, curCol, cellWidget.options.colspan, newRowspan) - - this.emitHistoryChange() - }, - - mergeTableWholeCol(rowArray, colArray, rowIndex, colIndex) { //需要考虑操作的列存在已合并的单元格！！ - //整列所有单元格列宽不一致不可合并！！ - let startColspan = rowArray[0].cols[colIndex].options.colspan - let unmatchedFlag = false - for (let i = 1; i < rowArray.length; i++) { - if (rowArray[i].cols[colIndex].options.colspan !== startColspan) { - unmatchedFlag = true - break; - } - } - if (unmatchedFlag) { - this.vueInstance.$message.info(this.vueInstance.i18nt('designer.hint.colspanNotConsistentForMergeEntireColumn')) - return - } - - let widgetListCols = [] - rowArray.forEach(rowItem => { - let tempCell = rowItem.cols[colIndex] - if (!tempCell.merged && !!tempCell.widgetList && (tempCell.widgetList.length > 0)) { - widgetListCols.push(tempCell) - } - }) - - let firstCellOfCol = rowArray[0].cols[colIndex] - if (!!widgetListCols && (widgetListCols.length > 0)) { //保留widgetList - if ((widgetListCols[0].id !== firstCellOfCol.id) && (!firstCellOfCol.widgetList || - firstCellOfCol.widgetList.length <= 0)) { - firstCellOfCol.widgetList = deepClone( widgetListCols[0].widgetList ) - } - } - - this.setPropsOfMergedRows(rowArray, 0, colIndex, firstCellOfCol.options.colspan, rowArray.length) - - this.emitHistoryChange() - }, - - undoMergeTableCol(rowArray, rowIndex, colIndex, colspan, rowspan) { - this.setPropsOfSplitCol(rowArray, rowIndex, colIndex, colspan, rowspan) - - this.emitHistoryChange() - }, - - undoMergeTableRow(rowArray, rowIndex, colIndex, colspan, rowspan) { - this.setPropsOfSplitRow(rowArray, rowIndex, colIndex, colspan, rowspan) - - this.emitHistoryChange() - }, - - deleteTableWholeCol(rowArray, colIndex) { //需考虑删除的是合并列！！ - //仅剩一列则不可删除！！ - if (rowArray[0].cols[0].options.colspan === rowArray[0].cols.length) { - return - } - - //整列所有单元格列宽不一致不可删除！！ - let startColspan = rowArray[0].cols[colIndex].options.colspan - let unmatchedFlag = false - for (let i = 1; i < rowArray.length; i++) { - if (rowArray[i].cols[colIndex].options.colspan !== startColspan) { - unmatchedFlag = true - break; - } - } - if (unmatchedFlag) { - this.vueInstance.$message.info(this.vueInstance.i18nt('designer.hint.colspanNotConsistentForDeleteEntireColumn')) - return - } - - rowArray.forEach((rItem) => { - rItem.cols.splice(colIndex, startColspan) - }) - - this.emitHistoryChange() - }, - - deleteTableWholeRow(rowArray, rowIndex) { //需考虑删除的是合并行！！ - //仅剩一行则不可删除！！ - if (rowArray[0].cols[0].options.rowspan === rowArray.length) { - return - } - - //整行所有单元格行高不一致不可删除！！ - let startRowspan = rowArray[rowIndex].cols[0].options.rowspan - let unmatchedFlag = false - for (let i = 1; i < rowArray[rowIndex].cols.length; i++) { - if (rowArray[rowIndex].cols[i].options.rowspan !== startRowspan) { - unmatchedFlag = true - break; - } - } - if (unmatchedFlag) { - this.vueInstance.$message.info(this.vueInstance.i18nt('designer.hint.rowspanNotConsistentForDeleteEntireRow')) - return - } - - rowArray.splice(rowIndex, startRowspan) - - this.emitHistoryChange() - }, - - getContainerByType(typeName) { - let foundCon = null - containers.forEach(con => { - if (!!con.type && (con.type === typeName)) { - foundCon = con - } - }) - - return foundCon - }, - - getFieldWidgetByType(typeName) { - let foundWidget = null - basicFields.forEach(bf => { - if (!!bf.type && (bf.type === typeName)) { - foundWidget = bf - } - }) - - if (!!foundWidget) { - return foundWidget - } - - advancedFields.forEach(af => { - if (!!af.type && (af.type === typeName)) { - foundWidget = af - } - }) - - return foundWidget - }, - - hasConfig(widget, configName) { - let originalWidget = null - if (!!widget.category) { - originalWidget = this.getContainerByType(widget.type) - } else { - originalWidget = this.getFieldWidgetByType(widget.type) - } - - if (!originalWidget || !originalWidget.options) { - return false - } - - return Object.keys(originalWidget.options).indexOf(configName) > -1 - }, - - cloneGridCol(widget, parentWidget) { - let newGridCol = deepClone(this.getContainerByType('grid-col')) - newGridCol.options.span = widget.options.span - let tmpId = generateId() - newGridCol.id = 'grid-col-' + tmpId - newGridCol.options.name = 'gridCol' + tmpId - - parentWidget.cols.push(newGridCol) - }, - - cloneContainer(containWidget) { - if (containWidget.type === 'grid') { - let newGrid = deepClone(this.getContainerByType('grid')) - newGrid.id = newGrid.type + generateId() - newGrid.options.name = newGrid.id - containWidget.cols.forEach(gridCol => { - let newGridCol = deepClone(this.getContainerByType('grid-col')) - let tmpId = generateId() - newGridCol.id = 'grid-col-' + tmpId - newGridCol.options.name = 'gridCol' + tmpId - newGridCol.options.span = gridCol.options.span - newGrid.cols.push(newGridCol) - }) - - return newGrid - } else if (containWidget.type === 'table') { - let newTable = deepClone(this.getContainerByType('table')) - newTable.id = newTable.type + generateId() - newTable.options.name = newTable.id - containWidget.rows.forEach(tRow => { - let newRow = deepClone(tRow) - newRow.id = 'table-row-' + generateId() - newRow.cols.forEach(col => { - col.id = 'table-cell-' + generateId() - col.options.name = col.id - col.widgetList = [] //清空组件列表 - }) - newTable.rows.push(newRow) - }) - - return newTable - } else { - return null - } - }, - - moveUpWidget(parentList, indexOfParentList) { - if (!!parentList) { - if (indexOfParentList === 0) { - this.vueInstance.$message(this.vueInstance.i18nt('designer.hint.moveUpFirstChildHint')) - return - } - - let tempWidget = parentList[indexOfParentList] - parentList.splice(indexOfParentList, 1) - parentList.splice(indexOfParentList - 1, 0, tempWidget) - } - }, - - moveDownWidget(parentList, indexOfParentList) { - if (!!parentList) { - if (indexOfParentList === parentList.length - 1) { - this.vueInstance.$message(this.vueInstance.i18nt('designer.hint.moveDownLastChildHint')) - return - } - - let tempWidget = parentList[indexOfParentList] - parentList.splice(indexOfParentList, 1) - parentList.splice(indexOfParentList + 1, 0, tempWidget) - } - }, - - copyNewFieldWidget(origin) { - let newWidget = deepClone(origin) - let tempId = generateId() - newWidget.id = newWidget.type.replace(/-/g, '') + tempId - newWidget.options.name = newWidget.id - newWidget.options.label = newWidget.type.toLowerCase() - - delete newWidget.displayName - return newWidget - }, - - copyNewContainerWidget(origin) { - let newCon = deepClone(origin) - newCon.id = newCon.type.replace(/-/g, '') + generateId() - newCon.options.name = newCon.id - if (newCon.type === 'grid') { - let newCol = deepClone( this.getContainerByType('grid-col') ) - let tmpId = generateId() - newCol.id = 'grid-col-' + tmpId - newCol.options.name = 'gridCol' + tmpId - newCon.cols.push(newCol) - // - newCol = deepClone(newCol) - tmpId = generateId() - newCol.id = 'grid-col-' + tmpId - newCol.options.name = 'gridCol' + tmpId - newCon.cols.push(newCol) - } else if (newCon.type === 'table') { - let newRow = {cols: []} - newRow.id = 'table-row-' + generateId() - newRow.merged = false - let newCell = deepClone( this.getContainerByType('table-cell') ) - newCell.id = 'table-cell-' + generateId() - newCell.options.name = newCell.id - newCell.merged = false - newCell.options.colspan = 1 - newCell.options.rowspan = 1 - newRow.cols.push(newCell) - newCon.rows.push(newRow) - } else if (newCon.type === 'tab') { - let newTabPane = deepClone( this.getContainerByType('tab-pane') ) - newTabPane.id = 'tab-pane-' + generateId() - newTabPane.options.name = 'tab1' - newTabPane.options.label = 'tab 1' - newCon.tabs.push(newTabPane) - } - //newCon.options.customClass = [] - - delete newCon.displayName - return newCon - }, - - addContainerByDbClick(container) { - let newCon = this.copyNewContainerWidget(container) - this.widgetList.push(newCon) - this.setSelected(newCon) - }, - - addFieldByDbClick(widget) { - let newWidget = this.copyNewFieldWidget(widget) - if (!!this.selectedWidget && this.selectedWidget.type === 'tab') { - //获取当前激活的tabPane - //TODO: - } else if (!!this.selectedWidget && !!this.selectedWidget.widgetList) { - this.selectedWidget.widgetList.push(newWidget) - } else { - this.widgetList.push(newWidget) - } - - this.setSelected(newWidget) - }, - - deleteColOfGrid(gridWidget, colIdx) { - if (!!gridWidget && !!gridWidget.cols) { - gridWidget.cols.splice(colIdx, 1) - } - }, - - addNewColOfGrid(gridWidget) { - const cols = gridWidget.cols - let newGridCol = deepClone(this.getContainerByType('grid-col')) - let tmpId = generateId() - newGridCol.id = 'grid-col-' + tmpId - newGridCol.options.name = 'gridCol' + tmpId - if ((!!cols) && (cols.length > 0)) { - let spanSum = 0 - cols.forEach((col) => { - spanSum += col.options.span - }) - - if (spanSum >= 24) { - //this.$Message.info('列栅格之和超出24') - console.log('列栅格之和超出24') - gridWidget.cols.push(newGridCol) - } else { - newGridCol.options.span = (24 - spanSum) > 12 ? 12 : (24 - spanSum) - gridWidget.cols.push(newGridCol) - } - } else { - gridWidget.cols = [newGridCol] - } - }, - - addTabPaneOfTabs(tabsWidget) { - const tabPanes = tabsWidget.tabs - let newTabPane = deepClone( this.getContainerByType('tab-pane') ) - newTabPane.id = 'tab-pane-' + generateId() - newTabPane.options.name = newTabPane.id - newTabPane.options.label = 'tab ' + (tabPanes.length + 1) - tabPanes.push(newTabPane) - }, - - deleteTabPaneOfTabs(tabsWidget, tpIdx) { - tabsWidget.tabs.splice(tpIdx, 1) - }, - - emitEvent(evtName, evtData) { //用于兄弟组件发射事件 - this.vueInstance.$emit(evtName, evtData) - }, - - handleEvent(evtName, callback) { //用于兄弟组件接收事件 - this.vueInstance.$on(evtName, (data) => callback(data)) - }, - - registerFormWidget(formWidget) { - this.formWidget = formWidget - }, - - initHistoryData() { - this.loadFormContentFromStorage() - this.historyData.index++ - this.historyData.steps[this.historyData.index] = ({ - widgetList: deepClone(this.widgetList), - formConfig: deepClone(this.formConfig) - }) - }, - - emitHistoryChange() { - //console.log('------------', 'Form history changed!') - - if (this.historyData.index === this.historyData.maxStep - 1) { - this.historyData.steps.shift() - } else { - this.historyData.index++ - } - - this.historyData.steps[this.historyData.index] = ({ - widgetList: deepClone(this.widgetList), - formConfig: deepClone(this.formConfig) - }) - - this.saveFormContentToStorage() - - if (this.historyData.index < this.historyData.steps.length - 1) { - this.historyData.steps = this.historyData.steps.slice(0, this.historyData.index + 1) - } - - console.log('history', this.historyData.index) - }, - - saveCurrentHistoryStep() { - this.historyData.steps[this.historyData.index] = deepClone({ - widgetList: this.widgetList, - formConfig: this.formConfig - }) - - this.saveFormContentToStorage() - }, - - undoHistoryStep() { - if (this.historyData.index !== 0) { - this.historyData.index-- - } - console.log('undo', this.historyData.index) - - this.widgetList = deepClone(this.historyData.steps[this.historyData.index].widgetList) - this.formConfig = deepClone(this.historyData.steps[this.historyData.index].formConfig) - }, - - redoHistoryStep() { - if (this.historyData.index !== (this.historyData.steps.length - 1)) { - this.historyData.index++ - } - console.log('redo', this.historyData.index) - - this.widgetList = deepClone(this.historyData.steps[this.historyData.index].widgetList) - this.formConfig = deepClone(this.historyData.steps[this.historyData.index].formConfig) - }, - - undoEnabled() { - return (this.historyData.index > 0) && (this.historyData.steps.length > 0) - }, - - redoEnabled() { - return this.historyData.index < (this.historyData.steps.length - 1) - }, - - saveFormContentToStorage() { - window.localStorage.setItem('widget__list__backup', JSON.stringify(this.widgetList)) - window.localStorage.setItem('form__config__backup', JSON.stringify(this.formConfig)) - }, - - loadFormContentFromStorage() { - let widgetListBackup = window.localStorage.getItem('widget__list__backup') - if (!!widgetListBackup) { - this.widgetList = JSON.parse(widgetListBackup) - } - - let formConfigBackup = window.localStorage.getItem('form__config__backup') - if (!!formConfigBackup) { - //this.formConfig = JSON.parse(formConfigBackup) - overwriteObj(this.formConfig, JSON.parse(formConfigBackup)) /* 用=赋值，会导致inject依赖注入的formConfig属性变成非响应式 */ - } - }, - - - } -} diff --git a/src/components-iview/form-designer/form-widget/container-widget.vue b/src/components-iview/form-designer/form-widget/container-widget.vue deleted file mode 100644 index bd4c2cf..0000000 --- a/src/components-iview/form-designer/form-widget/container-widget.vue +++ /dev/null @@ -1,429 +0,0 @@ - - - - - diff --git a/src/components-iview/form-designer/form-widget/field-widget.vue b/src/components-iview/form-designer/form-widget/field-widget.vue deleted file mode 100644 index d01572e..0000000 --- a/src/components-iview/form-designer/form-widget/field-widget.vue +++ /dev/null @@ -1,1580 +0,0 @@ - - - - - diff --git a/src/components-iview/form-designer/form-widget/grid-col-widget.vue b/src/components-iview/form-designer/form-widget/grid-col-widget.vue deleted file mode 100644 index 03d0f22..0000000 --- a/src/components-iview/form-designer/form-widget/grid-col-widget.vue +++ /dev/null @@ -1,203 +0,0 @@ - - - - - diff --git a/src/components-iview/form-designer/form-widget/index.vue b/src/components-iview/form-designer/form-widget/index.vue deleted file mode 100644 index 7258e0d..0000000 --- a/src/components-iview/form-designer/form-widget/index.vue +++ /dev/null @@ -1,252 +0,0 @@ - - - - - diff --git a/src/components-iview/form-designer/form-widget/tab-pane.vue b/src/components-iview/form-designer/form-widget/tab-pane.vue deleted file mode 100644 index 9b04e44..0000000 --- a/src/components-iview/form-designer/form-widget/tab-pane.vue +++ /dev/null @@ -1,93 +0,0 @@ - - - - - diff --git a/src/components-iview/form-designer/form-widget/table-cell-widget.vue b/src/components-iview/form-designer/form-widget/table-cell-widget.vue deleted file mode 100644 index 15c3afa..0000000 --- a/src/components-iview/form-designer/form-widget/table-cell-widget.vue +++ /dev/null @@ -1,385 +0,0 @@ - - - - - diff --git a/src/components-iview/form-designer/index.vue b/src/components-iview/form-designer/index.vue deleted file mode 100644 index fb33ca8..0000000 --- a/src/components-iview/form-designer/index.vue +++ /dev/null @@ -1,262 +0,0 @@ - - - - - diff --git a/src/components-iview/form-designer/setting-panel/index.vue b/src/components-iview/form-designer/setting-panel/index.vue deleted file mode 100644 index e3292f7..0000000 --- a/src/components-iview/form-designer/setting-panel/index.vue +++ /dev/null @@ -1,1858 +0,0 @@ - - - - - diff --git a/src/components-iview/form-designer/setting-panel/option-items-setting.vue b/src/components-iview/form-designer/setting-panel/option-items-setting.vue deleted file mode 100644 index 1ad3e2d..0000000 --- a/src/components-iview/form-designer/setting-panel/option-items-setting.vue +++ /dev/null @@ -1,272 +0,0 @@ - - - - - diff --git a/src/components-iview/form-designer/toolbar-panel/index.vue b/src/components-iview/form-designer/toolbar-panel/index.vue deleted file mode 100644 index 7051131..0000000 --- a/src/components-iview/form-designer/toolbar-panel/index.vue +++ /dev/null @@ -1,566 +0,0 @@ - - - - - diff --git a/src/components-iview/form-designer/widget-panel/index.vue b/src/components-iview/form-designer/widget-panel/index.vue deleted file mode 100644 index f12bbad..0000000 --- a/src/components-iview/form-designer/widget-panel/index.vue +++ /dev/null @@ -1,275 +0,0 @@ - - - - - diff --git a/src/components-iview/form-designer/widget-panel/widgetsConfig.js b/src/components-iview/form-designer/widget-panel/widgetsConfig.js deleted file mode 100644 index 9c199cf..0000000 --- a/src/components-iview/form-designer/widget-panel/widgetsConfig.js +++ /dev/null @@ -1,901 +0,0 @@ - -export const containers = [ - { - type: 'grid', - category: 'container', - icon: 'grid', - cols: [], - options: { - name: '', - hidden: false, - gutter: 12, - } - }, - - { - type: 'table', - category: 'container', - icon: 'table', - rows: [], - options: { - name: '', - hidden: false, - } - }, - - { - type: 'tab', - category: 'container', - icon: 'tab', - tabs: [], - options: { - name: '', - hidden: false, - displayType: 'card', - size: 'default', - } - }, - - /* - { - type: 'section', - category: 'container', - icon: 'section', - widgetList: [], - options: { - name: '', - hidden: false, - } - }, - */ - - { - type: 'grid-col', - category: 'container', - icon: 'grid-col', - internal: true, - widgetList: [], - options: { - name: '', - hidden: false, - span: 12, - } - }, - - { - type: 'table-cell', - category: 'container', - icon: 'table-cell', - internal: true, - widgetList: [], - merged: false, - options: { - name: '', - cellWidth: '', - cellHeight: '', - colspan: 1, - rowspan: 1, - } - }, - - { - type: 'tab-pane', - category: 'container', - icon: 'tab-pane', - internal: true, - widgetList: [], - options: { - name: '', - label: '', - hidden: false, - active: false, - disabled: false, - } - }, - -] - -export const basicFields = [ - { - type: 'input', - icon: 'text-field', - formItemFlag: true, - options: { - name: '', - label: '', - labelAlign: '', - type: 'text', - defaultValue: '', - placeholder: '', - columnWidth: '200px', - size: '', - labelWidth: null, - labelHidden: false, - readonly: false, - disabled: false, - hidden: false, - clearable: true, - showPassword: false, - required: false, - validation: '', - validationHint: '', - //------------------- - customClass: '', //自定义css类名 - labelIconClass: null, - labelIconPosition: 'rear', - labelTooltip: null, - // minLength: null, - maxLength: null, - showWordLimit: false, - prefixIcon: '', - suffixIcon: '', - //------------------- - onCreated: '', - onMounted: '', - onInput: '', - onChange: '', - onFocus: '', - onBlur: '', - onValidate: '', - }, - }, - { - type: 'textarea', - icon: 'textarea-field', - formItemFlag: true, - options: { - name: '', - label: '', - labelAlign: '', - rows: 3, - defaultValue: '', - placeholder: '', - columnWidth: '200px', - size: '', - labelWidth: null, - labelHidden: false, - readonly: false, - disabled: false, - hidden: false, - required: false, - validation: '', - validationHint: '', - //------------------- - customClass: '', //自定义css类名 - labelIconClass: null, - labelIconPosition: 'rear', - labelTooltip: null, - minLength: null, - maxLength: null, - showWordLimit: false, - //------------------- - onCreated: '', - onMounted: '', - onInput: '', - onChange: '', - onFocus: '', - onBlur: '', - onValidate: '', - }, - }, - - { - type: 'number', - icon: 'number-field', - formItemFlag: true, - options: { - name: '', - label: '', - labelAlign: '', - defaultValue: 0, - placeholder: '', - columnWidth: '200px', - size: '', - labelWidth: null, - labelHidden: false, - disabled: false, - hidden: false, - required: false, - validation: '', - validationHint: '', - //------------------- - customClass: '', //自定义css类名 - labelIconClass: null, - labelIconPosition: 'rear', - labelTooltip: null, - min: -100000000000, - max: 100000000000, - precision: 0, - formatter:'', - step: 1, - controlsPosition: 'right', - //------------------- - onCreated: '', - onMounted: '', - onChange: '', - onFocus: '', - onBlur: '', - onValidate: '', - }, - }, - - { - type: 'radio', - icon: 'radio-field', - formItemFlag: true, - options: { - name: '', - label: '', - labelAlign: '', - defaultValue: null, - columnWidth: '200px', - size: '', - displayStyle: 'inline', - labelWidth: null, - labelHidden: false, - disabled: false, - hidden: false, - optionItems: [ - {label: 'radio 1', value: 1}, - {label: 'radio 2', value: 2}, - {label: 'radio 3', value: 3}, - ], - required: false, - validation: '', - validationHint: '', - //------------------- - customClass: '', //自定义css类名 - labelIconClass: null, - labelIconPosition: 'rear', - labelTooltip: null, - //------------------- - onCreated: '', - onMounted: '', - onChange: '', - onValidate: '', - }, - }, - - { - type: 'checkbox', - icon: 'checkbox-field', - formItemFlag: true, - options: { - name: '', - label: '', - labelAlign: '', - defaultValue: [], - columnWidth: '200px', - size: '', - displayStyle: 'inline', - labelWidth: null, - labelHidden: false, - disabled: false, - hidden: false, - optionItems: [ - {label: 'check 1', value: 1}, - {label: 'check 2', value: 2}, - {label: 'check 3', value: 3}, - ], - required: false, - validation: '', - validationHint: '', - //------------------- - customClass: '', //自定义css类名 - labelIconClass: null, - labelIconPosition: 'rear', - labelTooltip: null, - //------------------- - onCreated: '', - onMounted: '', - onChange: '', - onValidate: '', - }, - }, - - { - type: 'select', - icon: 'select-field', - formItemFlag: true, - options: { - name: '', - label: '', - labelAlign: '', - defaultValue: '', - placeholder: '', - columnWidth: '200px', - size: '', - labelWidth: null, - labelHidden: false, - disabled: false, - hidden: false, - clearable: true, - filterable: false, - allowCreate: false, - remote: false, - automaticDropdown: false, //自动下拉 - multiple: false, - multipleLimit: 0, - optionItems: [ - {label: 'select 1', value: 1}, - {label: 'select 2', value: 2}, - {label: 'select 3', value: 3}, - ], - required: false, - validation: '', - validationHint: '', - //------------------- - customClass: '', //自定义css类名 - labelIconClass: null, - labelIconPosition: 'rear', - labelTooltip: null, - //------------------- - onCreated: '', - onMounted: '', - onRemoteQuery: '', - onChange: '', - onFocus: '', - onBlur: '', - onValidate: '', - }, - }, - - { - type: 'time', - icon: 'time-field', - formItemFlag: true, - options: { - name: '', - label: '', - labelAlign: '', - defaultValue: null, - placeholder: '', - columnWidth: '200px', - size: '', - labelWidth: null, - labelHidden: false, - readonly: false, - disabled: false, - hidden: false, - clearable: true, - editable: false, - format: 'HH:mm:ss', //时间格式 - required: false, - validation: '', - validationHint: '', - //------------------- - customClass: '', //自定义css类名 - labelIconClass: null, - labelIconPosition: 'rear', - labelTooltip: null, - //------------------- - onCreated: '', - onMounted: '', - onChange: '', - onFocus: '', - onBlur: '', - onValidate: '', - }, - }, - - { - type: 'time-range', - icon: 'time-range-field', - formItemFlag: true, - options: { - name: '', - label: '', - labelAlign: '', - defaultValue: null, - startPlaceholder: '', - endPlaceholder: '', - columnWidth: '200px', - size: '', - labelWidth: null, - labelHidden: false, - readonly: false, - disabled: false, - hidden: false, - clearable: true, - editable: false, - format: 'HH:mm:ss', //时间格式 - required: false, - validation: '', - validationHint: '', - //------------------- - customClass: '', //自定义css类名 - labelIconClass: null, - labelIconPosition: 'rear', - labelTooltip: null, - //------------------- - onCreated: '', - onMounted: '', - onChange: '', - onFocus: '', - onBlur: '', - onValidate: '', - }, - }, - - { - type: 'date', - icon: 'date-field', - formItemFlag: true, - options: { - name: '', - label: '', - labelAlign: '', - type: 'date', - defaultValue: null, - placeholder: '', - columnWidth: '200px', - size: '', - labelWidth: null, - labelHidden: false, - readonly: false, - disabled: false, - hidden: false, - clearable: true, - editable: false, - format: 'yyyy-MM-dd', //日期显示格式 - valueFormat: 'yyyy-MM-dd', //日期对象格式 - required: false, - validation: '', - validationHint: '', - //------------------- - customClass: '', //自定义css类名 - labelIconClass: null, - labelIconPosition: 'rear', - labelTooltip: null, - //------------------- - onCreated: '', - onMounted: '', - onChange: '', - onFocus: '', - onBlur: '', - onValidate: '', - }, - }, - - { - type: 'date-range', - icon: 'date-range-field', - formItemFlag: true, - options: { - name: '', - label: '', - labelAlign: '', - type: 'daterange', - defaultValue: null, - startPlaceholder: '', - endPlaceholder: '', - columnWidth: '200px', - size: '', - labelWidth: null, - labelHidden: false, - readonly: false, - disabled: false, - hidden: false, - clearable: true, - editable: false, - format: 'yyyy-MM-dd', //日期显示格式 - valueFormat: 'yyyy-MM-dd', //日期对象格式 - required: false, - validation: '', - validationHint: '', - //------------------- - customClass: '', //自定义css类名 - labelIconClass: null, - labelIconPosition: 'rear', - labelTooltip: null, - //------------------- - onCreated: '', - onMounted: '', - onChange: '', - onFocus: '', - onBlur: '', - onValidate: '', - }, - }, - - { - type: 'switch', - icon: 'switch-field', - formItemFlag: true, - options: { - name: '', - label: '', - size: '', - labelAlign: '', - defaultValue: null, - columnWidth: '200px', - labelWidth: null, - labelHidden: false, - disabled: false, - hidden: false, - //------------------- - customClass: '', //自定义css类名 - labelIconClass: null, - labelIconPosition: 'rear', - labelTooltip: null, - switchWidth: 40, - activeText: '', - inactiveText: '', - activeColor: '', - inactiveColor: '', - //------------------- - onCreated: '', - onMounted: '', - onChange: '', - onValidate: '', - }, - }, - - { - type: 'rate', - icon: 'rate-field', - formItemFlag: true, - options: { - name: '', - label: '', - labelAlign: '', - defaultValue: null, - columnWidth: '200px', - labelWidth: null, - labelHidden: false, - disabled: false, - hidden: false, - required: false, - validation: '', - validationHint: '', - //------------------- - customClass: '', //自定义css类名 - labelIconClass: null, - labelIconPosition: 'rear', - labelTooltip: null, - max: 5, - clearable: true, - // lowThreshold: 2, - // highThreshold: 4, - allowHalf: false, - showText: false, - // showScore: false, - //------------------- - onCreated: '', - onMounted: '', - onChange: '', - onValidate: '', - }, - }, - - { - type: 'color', - icon: 'color-field', - formItemFlag: true, - options: { - name: '', - label: '', - labelAlign: '', - defaultValue: '', - columnWidth: '200px', - size: '', - labelWidth: null, - labelHidden: false, - disabled: false, - hidden: false, - required: false, - validation: '', - validationHint: '', - //------------------- - customClass: '', //自定义css类名 - labelIconClass: null, - labelIconPosition: 'rear', - labelTooltip: null, - //------------------- - onCreated: '', - onMounted: '', - onChange: '', - onValidate: '', - }, - }, - - { - type: 'slider', - icon: 'slider-field', - formItemFlag: true, - options: { - name: '', - label: '', - labelAlign: '', - columnWidth: '200px', - // size: '', - labelWidth: null, - labelHidden: false, - disabled: false, - hidden: false, - required: false, - validation: '', - validationHint: '', - //------------------- - customClass: '', //自定义css类名 - labelIconClass: null, - labelIconPosition: 'rear', - labelTooltip: null, - min: 0, - max: 100, - step: 1, - range: false, - //vertical: false, - height: null, - //------------------- - onCreated: '', - onMounted: '', - onChange: '', - onValidate: '', - }, - }, - - { - type: 'static-text', - icon: 'static-text', - formItemFlag: false, - options: { - name: '', - columnWidth: '200px', - hidden: false, - textContent: 'static text', - //------------------- - customClass: '', //自定义css类名 - //------------------- - onCreated: '', - onMounted: '', - }, - }, - - { - type: 'html-text', - icon: 'html-text', - formItemFlag: false, - options: { - name: '', - columnWidth: '200px', - hidden: false, - htmlContent: 'html text', - //------------------- - customClass: '', //自定义css类名 - //------------------- - onCreated: '', - onMounted: '', - }, - }, - - { - type: 'button', - icon: 'button', - formItemFlag: false, - options: { - name: '', - label: '', - columnWidth: '200px', - size: '', - disabled: false, - hidden: false, - type: '', - plain: false, - // round: false, - circle: false, - icon: null, - - to:"", - replace:false, - target:"_self", - append:false, - - //------------------- - customClass: '', //自定义css类名 - //------------------- - onCreated: '', - onMounted: '', - onClick: '', - }, - }, - - { - type: 'divider', - icon: 'divider', - formItemFlag: false, - options: { - name: '', - label: '', - size:'', - columnWidth: '200px', - direction: 'horizontal', - contentPosition: 'center', - hidden: false, - //------------------- - customClass: '', //自定义css类名 - //------------------- - onCreated: '', - onMounted: '', - }, - }, - - // - -] - -export const advancedFields = [ - { - type: 'picture-upload', - icon: 'picture-upload-field', - formItemFlag: true, - options: { - name: '', - label: '', - labelWidth: null, - labelHidden: false, - disabled: false, - hidden: false, - required: false, - requiredHint: '', - customRule: '', - customRuleHint: '', - //------------------- - uploadURL: '', - uploadTip: '', - withCredentials: false, - multipleSelect: false, - showFileList: true, - // limit: 3, - fileMaxSize: 5, //MB - fileTypes: ['jpeg', 'png'], - fileAccept: "", - //headers: [], - //------------------- - customClass: '', //自定义css类名 - labelIconClass: null, - labelIconPosition: 'rear', - labelTooltip: null, - //------------------- - onCreated: '', - onMounted: '', - onBeforeUpload: '', - onUploadSuccess: '', - onUploadError: '', - onValidate: '', - onUploadPreview:'', - onUploadProgress:'', - //onFileChange: '', - }, - - }, - - { - type: 'file-upload', - icon: 'file-upload-field', - formItemFlag: true, - options: { - name: '', - label: '', - labelWidth: null, - labelHidden: false, - disabled: false, - hidden: false, - required: false, - requiredHint: '', - customRule: '', - customRuleHint: '', - //------------------- - uploadURL: '', - uploadTip: '', - withCredentials: false, - multipleSelect: false, - showFileList: true, - // limit: 3, - fileMaxSize: 20, //MB - fileTypes: ['doc', 'docx', 'xls', 'xlsx'], - fileAccept: "", - //headers: [], - //------------------- - customClass: '', //自定义css类名 - labelIconClass: null, - labelIconPosition: 'rear', - labelTooltip: null, - //------------------- - onCreated: '', - onMounted: '', - onBeforeUpload: '', - onUploadSuccess: '', - onUploadError: '', - onValidate: '', - onUploadPreview:'', - onUploadProgress:'', - //onFileChange: '', - }, - }, - - { - type: 'rich-editor', - icon: 'rich-editor-field', - formItemFlag: true, - options: { - name: '', - label: '', - placeholder: '', - labelWidth: null, - labelHidden: false, - disabled: false, - hidden: false, - required: false, - requiredHint: '', - customRule: '', - customRuleHint: '', - //------------------- - customClass: '', //自定义css类名 - labelIconClass: null, - labelIconPosition: 'rear', - labelTooltip: null, - minLength: null, - maxLength: null, - showWordLimit: false, - //------------------- - onCreated: '', - onMounted: '', - onValidate: '', - }, - }, - - { - type: 'cascader', - icon: 'cascader-field', - formItemFlag: true, - options: { - name: '', - label: '', - defaultValue: '', - placeholder: '', - size: '', - labelWidth: null, - labelHidden: false, - disabled: false, - hidden: false, - clearable: true, - filterable: false, - optionItems: [ - {label: 'select 1', value: 1, children: [{label: 'child 1', value: 11}]}, - {label: 'select 2', value: 2}, - {label: 'select 3', value: 3}, - ], - required: false, - requiredHint: '', - customRule: '', - customRuleHint: '', - //------------------- - customClass: '', //自定义css类名 - labelIconClass: null, - labelIconPosition: 'rear', - labelTooltip: null, - //------------------- - onCreated: '', - onMounted: '', - onChange: '', - onFocus: '', - onBlur: '', - onValidate: '', - }, - }, - -] - -export const customFields = [ - { - type: 'custom', - icon: 'custom-component', - }, - - { - type: 'slot', - icon: 'slot-component', - }, - -] diff --git a/src/components-iview/form-render/container-item.vue b/src/components-iview/form-render/container-item.vue deleted file mode 100644 index 15c02c3..0000000 --- a/src/components-iview/form-render/container-item.vue +++ /dev/null @@ -1,605 +0,0 @@ - - - - - diff --git a/src/components-iview/form-render/grid-col-item.vue b/src/components-iview/form-render/grid-col-item.vue deleted file mode 100644 index 7a509a1..0000000 --- a/src/components-iview/form-render/grid-col-item.vue +++ /dev/null @@ -1,66 +0,0 @@ - - - - - diff --git a/src/components-iview/form-render/index.vue b/src/components-iview/form-render/index.vue deleted file mode 100644 index 789e2db..0000000 --- a/src/components-iview/form-render/index.vue +++ /dev/null @@ -1,477 +0,0 @@ - - - - - diff --git a/src/components-iview/form-render/refMixin.js b/src/components-iview/form-render/refMixin.js deleted file mode 100644 index 81316c5..0000000 --- a/src/components-iview/form-render/refMixin.js +++ /dev/null @@ -1,22 +0,0 @@ -export default { - methods: { - initRefList() { - if ((this.refList !== null) && !!this.widget.options.name) { - this.refList[this.widget.options.name] = this - } - }, - - getWidgetRef(widgetName, showError) { - let foundRef = this.refList[widgetName] - if (!foundRef && !!showError) { - this.$Message.error(this.i18nt('render.hint.refNotFound') + widgetName) - } - return foundRef - }, - - getFormRef() { /* 获取VFrom引用，必须在VForm组件created之后方可调用 */ - return this.refList['v_form_ref'] - }, - - } -} diff --git a/src/components-iview/form-render/table-cell-item.vue b/src/components-iview/form-render/table-cell-item.vue deleted file mode 100644 index 795aa8c..0000000 --- a/src/components-iview/form-render/table-cell-item.vue +++ /dev/null @@ -1,61 +0,0 @@ - - - - - diff --git a/src/components-iview/lang/en-US.js b/src/components-iview/lang/en-US.js deleted file mode 100644 index 972ecfe..0000000 --- a/src/components-iview/lang/en-US.js +++ /dev/null @@ -1,301 +0,0 @@ -export default { - application: { - 'zh-CN': '简体中文', - 'en-US': 'English', - productTitle: 'Online Form Designer', - github: 'GitHub', - document: 'Docs', - qqGroup: 'WeChat Group', - deployment: 'Deployment', - subscription: 'Subscription', - }, - - designer: { - containerTitle: 'Container', - dragHandlerHint: 'drag container or field to layout center', - dragAction: 'drag', - basicFieldTitle: 'Basic Field', - advancedFieldTitle: 'Advanced Field', - customFieldTitle: 'Customized Field', - - noWidgetHint: 'Please select a widget from the left list, drag and drop to this container.', - - widgetLabel: { - grid: 'Grid', - table: 'Table', - tab: 'Tab', - section: 'Section', - 'sub-form': 'SubForm', - 'grid-col': 'GridCol', - 'table-cell': 'TableCell', - 'tab-pane': 'TabPane', - - input: 'Input', - 'input-composite' : 'InputComposite', - textarea: 'Textarea', - number: 'InputNumber', - radio: 'Radio', - checkbox: 'Checkbox', - select: 'Select', - time: 'Time', - 'time-range': 'Time range', - date: 'Date', - 'date-range': 'Date range', - switch: 'Switch', - rate: 'Rate', - color: 'ColorPicker', - slider: 'Slider', - 'static-text': 'Text', - 'html-text': 'HTML', - button: 'Button', - divider: 'Divider', - - 'picture-upload': 'Picture', - 'file-upload': 'File', - 'rich-editor': 'Rich Editor', - cascader: 'Cascader', - - custom: 'Custom Component', - slot: 'Slot' - }, - - hint: { - selectParentWidget: 'Select parent of this widget', - moveUpWidget: 'Move up this widget', - moveDownWidget: 'Move down this widget', - cloneWidget: 'Clone this widget', - insertRow: 'Insert new row', - insertColumn: 'Insert new column', - remove: 'Remove this widget', - cellSetting: 'Cell setting', - dragHandler: 'Drag handler', - copyField: 'Copy field widget', - onlyFieldWidgetAcceptable: 'Only field widget can be dragged into sub-form', - moveUpFirstChildHint: 'First child can not be move up', - moveDownLastChildHint: 'Last child can not be move down', - - closePreview: 'Close', - copyJson: 'Copy', - copyVueCode: 'Copy Vue Code', - copyHtmlCode: 'Copy HTML Code', - copyJsonSuccess: 'Copy succeed', - importJsonSuccess: 'Import succeed', - copyJsonFail: 'Copy failed', - copyVueCodeSuccess: 'Copy succeed', - copyVueCodeFail: 'Copy failed', - copyHtmlCodeSuccess: 'Copy succeed', - copyHtmlCodeFail: 'Copy failed', - saveVueCode: 'Save Vue File', - saveHtmlCode: 'Save Html File', - getFormData: 'Get Data', - resetForm: 'Reset', - disableForm: 'Disable', - enableForm: 'Enable', - exportFormData: 'Form Data', - copyFormData: 'Copy', - saveFormData: 'Save As File', - copyVue2SFC: 'Copy Vue2', - copyVue3SFC: 'Copy Vue3', - copySFCFail: 'Copy failed', - copySFCSuccess: 'Copy succeed', - saveVue2SFC: 'Save As Vue2', - saveVue3SFC: 'Save As Vue3', - fileNameForSave: 'File name:', - saveFileTitle: 'Save as File', - fileNameInputPlaceholder: 'Enter the file name', - - widgetSetting: 'Widget Config', - formSetting: 'Form Config', - - prompt: 'Prompt', - confirm: 'OK', - cancel: 'Cancel', - import: 'Import', - importJsonHint: 'The code to be imported should have the following JSON format.', - invalidOptionsData: 'Invalid data of options:', - lastPaneCannotBeDeleted: 'The last pane cannot be deleted.', - duplicateName: 'Duplicate name: ', - nameRequired: 'Name required.', - - numberValidator: 'Number', - letterValidator: 'Letter', - letterAndNumberValidator: 'LetterAndNumber', - mobilePhoneValidator: 'MobilePhone', - emailValidator: 'Email', - urlValidator: 'URL', - noChineseValidator: 'Non-Chinese', - chineseValidator: 'Chinese', - - rowspanNotConsistentForMergeEntireRow: 'Cells in this row don\'t have the same rowspan, operation failed.', - colspanNotConsistentForMergeEntireColumn: 'Cells in this column don\'t have the same colspan, operation failed.', - rowspanNotConsistentForDeleteEntireRow: 'Cells in this row don\'t have the same rowspan, operation failed.', - colspanNotConsistentForDeleteEntireColumn: 'Cells in this column don\'t have the same colspan, operation failed.', - }, - - toolbar: { - undoHint: 'Undo', - redoHint: 'Redo', - pcLayout: 'PC', - mobileLayout: 'H5', - clear: 'Clear', - preview: 'Preview', - importJson: 'Import JSON', - exportJson: 'Export JSON', - exportCode: 'Export Code', - generateCode: 'Generate Code', - saveCode: 'Save Code', - reloadCode: 'Reload Code', - generateSFC: 'Generate SFC', - }, - - setting: { - basicSetting: 'Basic Setting', - attributeSetting: 'Attribute Setting', - commonSetting: 'Common Setting', - advancedSetting: 'Advanced Setting', - eventSetting: 'Event Setting', - fieldName: 'Unique Name', - label: 'Label', - displayType: 'Type', - defaultValue: 'Default Value', - placeholder: 'Placeholder', - startPlaceholder: 'Start Placeholder', - endPlaceholder: 'End Placeholder', - widgetColumnWidth: 'Width', - widgetSize: 'Size', - displayStyle: 'Display Style', - inlineLayout: 'inline', - blockLayout: 'block', - labelWidth: 'Width Of Label', - rows: 'Rows', - labelHidden: 'Hide Label', - required: 'Required', - validation: 'Validation', - validationHelp: 'Regular expressions supported', - validationHint: 'Validation Hint', - readonly: 'Readonly', - disabled: 'Disabled', - hidden: 'Hidden', - textContent: 'Text', - htmlContent: 'HTML', - clearable: 'Clearable', - editable: 'Editable', - format: 'Format', - valueFormat: 'Value Format', - showPassword: 'Show Reveal', - filterable: 'Filterable', - allowCreate: 'Allow Create', - remote: 'Remote Query', - automaticDropdown: 'Automatic Dropdown', - multiple: 'Multiple', - multipleLimit: 'Multiple Limit', - contentPosition: 'Content Position', - plain: 'Plain', - round: 'Round', - circle: 'Circle', - icon: 'Icon', - optionsSetting: 'Options Setting', - addOption: 'Add Option', - importOptions: 'Import Options', - resetDefault: 'Reset Default', - uploadSetting: 'Upload Setting', - uploadURL: 'Upload URL', - uploadTip: 'Tip Content', - withCredentials: 'Send Cookie', - multipleSelect: 'File Multi-select', - showFileList: 'Show File List', - limit: 'Max Upload Number', - fileMaxSize: 'Max Size(MB)', - fileAccept: 'Upload File Filter', - fileTypes: 'Upload File Types', - fileTypesHelp: 'Allows to add more file types', - headers: 'Request Headers', - - cellWidth: 'width', - cellHeight: 'height', - gutter: 'Gutter(px)', - columnSetting: 'Cols Setting', - colsOfGrid: 'Cols Of Grid:', - colSpanTitle: 'Spans Of Col', - addColumn: 'Add Column', - - tabPaneSetting: 'Tab Panes', - tabPaneType: 'Tab Type', - addTabPane: 'Add Tab Pane', - paneActive: 'Active', - paneDisabled: 'Disable', - - customLabelIcon: 'Custom Label', - labelIconClass: 'Label Icon Class', - labelIconPosition: 'Label Icon Position', - labelTooltip: 'Label Tooltip', - minValue: 'Min Value', - maxValue: 'Max Value', - precision: 'Precision', - formatter: 'Number Formatter', - step: 'Step', - controlsPosition: 'Controls Position', - minLength: 'Min Length', - maxLength: 'Max Length', - showWordLimit: 'Show Word Limit', - prefixIcon: 'Prefix Icon', - suffixIcon: 'Suffix Icon', - inputButton: 'Input Button Setting', - appendButton: 'Append Button', - appendButtonDisabled: 'Button Disabled', - buttonIcon: 'Button Icon', - switchWidth: 'Width of Switch(px)', - activeText: 'Active Text', - inactiveText: 'Inactive Text', - maxStars: 'Stars Max Number', - lowThreshold: 'Low Threshold', - highThreshold: 'High Threshold', - allowHalf: 'Allow Half', - showText: 'Show Text', - showScore: 'Show Score', - range: 'Range', - vertical: 'Vertical', - direction: 'Vertical', - showBlankRow: 'Show Blank Row', - showRowNumber: 'Show Row Number', - to:'Route Redirect To', - target:'Open Page Target', - replace:'Record Redirect History', - append:'Append Route', - - insertColumnToLeft: 'insert column to left', - insertColumnToRight: 'insert column to right', - insertRowAbove: 'insert row above', - insertRowBelow: 'insert row below', - mergeLeftColumn: 'merge left cell', - mergeRightColumn: 'merge right cell', - mergeEntireRow: 'merge entire row', - mergeRowAbove: 'merge cell above', - mergeRowBelow: 'merge cell below', - mergeEntireColumn: 'merge entire column', - undoMergeCol: 'undo merge column', - undoMergeRow: 'undo merge row', - deleteEntireCol: 'delete entire column', - deleteEntireRow: 'delete entire row', - - widgetName: 'Unique Name', - formSize: 'Size', - labelPosition: 'Position Of Label', - topPosition: 'Top', - leftPosition: 'Left', - labelAlign: 'Label Align', - leftAlign: 'Left', - centerAlign: 'Center', - rightAlign: 'Right', - formCss: 'Form CSS', - addCss: 'Edit', - customClass: 'Custom Class', - globalFunctions: 'Global Functions', - addEventHandler: 'Edit', - editWidgetEventHandler: 'Edit Widget Event Handler', - editFormEventHandler: 'Edit Form Event Handler', - - } - - } -} diff --git a/src/components-iview/lang/en-US_render.js b/src/components-iview/lang/en-US_render.js deleted file mode 100644 index 8582386..0000000 --- a/src/components-iview/lang/en-US_render.js +++ /dev/null @@ -1,38 +0,0 @@ -export default { - render: { - - hint: { - prompt: 'Prompt', - confirm: 'OK', - cancel: 'Cancel', - - selectPlaceholder: 'Pick some item', - timePlaceholder: 'Select time', - startTimePlaceholder: 'Start time', - endTimePlaceholder: 'End time', - datePlaceholder: 'Select date', - startDatePlaceholder: 'Start date', - endDatePlaceholder: 'End date', - blankCellContent: '--', - - uploadError: 'Upload error: ', - uploadExceed: 'The maximum number(${uploadLimit}) of file uploads has been exceeded.', - unsupportedFileType: 'Unsupported format: ', - fileSizeExceed: 'File size out of limit: ', - refNotFound: 'Ref not found: ', - fieldRequired: 'Input value should be not null.', - invalidNumber: 'Invalid number format', - selectFile: ' File...', - downloadFile: 'Download', - removeFile: 'Remove', - validationFailed: 'Form validation failed', - - subFormAction: 'Action', - subFormAddAction: 'Add', - subFormAddActionHint: 'add new row', - insertSubFormRow: 'insert new row', - deleteSubFormRow: 'delete this row', - nonSubFormType: 'The type of widget don\'t match sub-form', - } - } -} diff --git a/src/components-iview/lang/zh-CN.js b/src/components-iview/lang/zh-CN.js deleted file mode 100644 index 87d36d0..0000000 --- a/src/components-iview/lang/zh-CN.js +++ /dev/null @@ -1,304 +0,0 @@ -export default { - application: { - 'zh-CN': '简体中文', - 'en-US': 'English', - productTitle: '表单设计器', - github: 'GitHub', - document: '文档', - qqGroup: '技术WX群', - deployment: '私有部署', - subscription: '订阅源码', - }, - - designer: { - containerTitle: '容器', - dragHandlerHint: '鼠标拖拽容器组件或字段组件并放置于表单中', - dragAction: '拖动', - basicFieldTitle: '基础字段', - advancedFieldTitle: '高级字段', - customFieldTitle: '自定义扩展字段', - - noWidgetHint: '请从左侧列表中选择一个组件, 然后用鼠标拖动组件放置于此处.', - - widgetLabel: { - grid: '栅格', - table: '表格', - tab: '标签页', - section: '区块', - 'sub-form': '子表单', - 'grid-col': '栅格列', - 'table-cell': '单元格', - 'tab-pane': '选项卡页', - - input: '单行输入', - 'input-composite' : '复合输入', - textarea: '多行输入', - number: '计数器', - radio: '单选项', - checkbox: '多选项', - select: '下拉选项', - time: '时间', - 'time-range': '时间范围', - date: '日期', - 'date-range': '日期范围', - switch: '开关', - rate: '评分', - color: '颜色选择器', - slider: '滑块', - 'static-text': '静态文字', - 'html-text': 'HTML', - button: '按钮', - divider: '分隔线', - - 'picture-upload': '图片', - 'file-upload': '文件', - 'rich-editor': '富文本', - cascader: '级联选择', - - custom: 'Custom Component', - slot: 'Slot' - }, - - hint: { - selectParentWidget: '选中父组件', - moveUpWidget: '上移组件', - moveDownWidget: '下移组件', - cloneWidget: '复制组件', - insertRow: '插入新行', - insertColumn: '插入新列', - remove: '移除组件', - cellSetting: '单元格操作', - dragHandler: '拖拽手柄', - copyField: '复制字段组件', - onlyFieldWidgetAcceptable: '子表单只能接收字段组件', - moveUpFirstChildHint: '已经移动到最上面', - moveDownLastChildHint: '已经移动到最下面', - - closePreview: '关闭', - copyJson: '复制JSON', - copyVueCode: '复制Vue代码', - copyHtmlCode: '复制HTML代码', - copyJsonSuccess: '复制JSON成功', - importJsonSuccess: '导入JSON成功', - copyJsonFail: '复制JSON失败', - copyVueCodeSuccess: '复制Vue代码成功', - copyVueCodeFail: '复制Vue代码失败', - copyHtmlCodeSuccess: '复制HTML代码成功', - copyHtmlCodeFail: '复制HTML代码失败', - saveVueCode: '保存Vue文件', - saveHtmlCode: '保存Html文件', - getFormData: '获取数据', - resetForm: '重置表单', - disableForm: '禁用编辑', - enableForm: '恢复编辑', - exportFormData: '表单数据', - copyFormData: '复制JSON', - saveFormData: '保存为文件', - copyVue2SFC: '复制Vue2代码', - copyVue3SFC: '复制Vue3代码', - copySFCFail: '复制SFC代码失败', - copySFCSuccess: '复制SFC代码成功', - saveVue2SFC: '保存为Vue2组件', - saveVue3SFC: '保存为Vue3组件', - fileNameForSave: '文件名：', - saveFileTitle: '保存为文件', - fileNameInputPlaceholder: '请输入文件名', - - widgetSetting: '组件设置', - formSetting: '表单设置', - - prompt: '提示', - confirm: '确定', - cancel: '取消', - import: '导入', - importJsonHint: '导入的JSON内容须符合下述格式，以保证顺利导入.', - invalidOptionsData: '无效的选项数据:', - lastPaneCannotBeDeleted: '仅剩一个选项卡页不可删除.', - duplicateName: '组件名称已存在: ', - nameRequired: '组件名称不可为空', - - numberValidator: '数字', - letterValidator: '字母', - letterAndNumberValidator: '数字字母', - mobilePhoneValidator: '手机号码', - emailValidator: '邮箱', - urlValidator: '网址', - noChineseValidator: '非中文字符', - chineseValidator: '仅中文字符', - - rowspanNotConsistentForMergeEntireRow: '存在行高不一致的单元格, 无法合并整行.', - colspanNotConsistentForMergeEntireColumn: '存在列宽不一致的单元格, 无法合并整列.', - rowspanNotConsistentForDeleteEntireRow: '存在行高不一致的单元格, 不可删除整行.', - colspanNotConsistentForDeleteEntireColumn: '存在列宽不一致的单元格, 不可删除整列.', - }, - - toolbar: { - undoHint: '撤销', - redoHint: '重做', - pcLayout: 'PC', - mobileLayout: 'H5', - clear: '清空', - preview: '预览', - importJson: '导入JSON', - exportJson: '导出JSON', - exportCode: '导出代码', - generateCode: '生成代码', - saveCode: '保存代码', - reloadCode: '撤销代码更改', - generateSFC: '生成SFC', - }, - - setting: { - basicSetting: '基本属性', - attributeSetting: '属性设置', - commonSetting: '常见属性', - advancedSetting: '高级属性', - eventSetting: '事件属性', - fieldName: '字段唯一名称', - label: '字段标签', - displayType: '显示类型', - defaultValue: '默认值', - placeholder: '占位内容', - startPlaceholder: '起始占位内容', - endPlaceholder: '截止占位内容', - widgetColumnWidth: '组件列宽', - widgetSize: '组件大小', - displayStyle: '显示样式', - inlineLayout: '行内', - blockLayout: '块', - labelWidth: '标签宽度', - rows: '行数', - labelHidden: '隐藏字段标签', - required: '必填字段', - validation: '字段校验', - validationHelp: '支持输入正则表达式', - validationHint: '校验失败提示', - readonly: '只读', - disabled: '禁用', - hidden: '隐藏', - textContent: '静态文字', - htmlContent: 'HTML', - clearable: '可清除', - editable: '可输入', - format: '显示格式', - valueFormat: '绑定值格式', - showPassword: '可显示密码', - filterable: '可搜索选项', - allowCreate: '允许创建选项', - remote: '可远程搜索', - automaticDropdown: '自动弹出选项', - multiple: '选项可多选', - multipleLimit: '多选数量限制', - contentPosition: '文字位置', - plain: '朴素按钮', - round: '圆角按钮', - circle: '圆形按钮', - icon: '图标', - optionsSetting: '选项设置', - addOption: '增加选项', - importOptions: '导入选项', - resetDefault: '重设选中项', - uploadSetting: '上传参数设置', - uploadURL: '上传地址', - uploadTip: '上传提示内容', - withCredentials: '发送cookie凭证', - multipleSelect: '文件可多选', - showFileList: '显示文件列表', - limit: '最大上传数量', - fileMaxSize: '文件大小限制(MB)', - fileAccept: '上传文件过滤', - fileTypes: '上传文件类型', - fileTypesHelp: '支持添加其他文件类型', - headers: '上传请求头', - - cellWidth: '宽度', - cellHeight: '高度', - gutter: '栅格间隔(像素)', - columnSetting: '栅格属性设置', - colsOfGrid: '当前栅格列:', - colSpanTitle: '栅格列', - addColumn: '增加栅格', - - tabPaneSetting: '选项卡设置', - tabPaneType: '选项卡样式', - addTabPane: '增加选项卡页', - paneActive: '激活', - paneDisabled: '禁用', - - customLabelIcon: '定制字段标签', - labelIconClass: '标签Icon样式', - labelIconPosition: '标签Icon位置', - labelTooltip: '标签文字提示', - minValue: '最小值', - maxValue: '最大值', - precision: '精度', - formatter: '输入框格式', - step: '增减步长', - controlsPosition: '控制按钮位置', - minLength: '最小长度', - maxLength: '最大长度', - showWordLimit: '显示字数统计', - prefixIcon: '头部Icon', - suffixIcon: '尾部Icon', - inputButton: '输入框按钮设置', - appendButton: '添加后置按钮', - appendButtonDisabled: '后置按钮禁用', - buttonIcon: '后置按钮Icon', - switchWidth: '开关宽度（像素）', - activeText: '开启时文字描述', - inactiveText: '关闭时文字描述', - activeColor: '开启时背景色', - inactiveColor: '关闭时背景色', - maxStars: '最大评分值', - lowThreshold: '低分界限值', - highThreshold: '高分界限值', - allowHalf: '允许半选', - showText: '显示辅助文字', - showScore: '显示当前分数', - range: '是否为范围选择', - vertical: '是否竖向显示', - direction: '是否竖向显示', - showBlankRow: '默认显示新行', - showRowNumber: '显示行号', - to:'跳转链接', - target:'浏览器目标', - replace:'记录跳转历史', - append:'路由追加', - - - insertColumnToLeft: '插入左侧列', - insertColumnToRight: '插入右侧列', - insertRowAbove: '插入上方行', - insertRowBelow: '插入下方行', - mergeLeftColumn: '合并左侧单元格', - mergeRightColumn: '合并右侧单元格', - mergeEntireRow: '合并整行', - mergeRowAbove: '合并上方单元格', - mergeRowBelow: '合并下方单元格', - mergeEntireColumn: '合并整列', - undoMergeCol: '撤销列合并', - undoMergeRow: '撤销行合并', - deleteEntireCol: '删除整列', - deleteEntireRow: '删除整行', - - widgetName: '组件唯一名称', - formSize: '全局组件大小', - labelPosition: '字段标签位置', - topPosition: '顶部', - leftPosition: '左边', - labelAlign: '字段标签对齐', - leftAlign: '居左', - centerAlign: '居中', - rightAlign: '居右', - formCss: '表单全局CSS', - addCss: '编写CSS', - customClass: '自定义CSS样式', - globalFunctions: '表单全局函数', - addEventHandler: '编写代码', - editWidgetEventHandler: '组件事件处理', - editFormEventHandler: '表单事件处理', - - } - - } -} diff --git a/src/components-iview/lang/zh-CN_render.js b/src/components-iview/lang/zh-CN_render.js deleted file mode 100644 index 1dd74c4..0000000 --- a/src/components-iview/lang/zh-CN_render.js +++ /dev/null @@ -1,38 +0,0 @@ -export default { - render: { - - hint: { - prompt: '提示', - confirm: '确定', - cancel: '取消', - - selectPlaceholder: '请选择', - timePlaceholder: '选择时间', - startTimePlaceholder: '起始时间', - endTimePlaceholder: '截止时间', - datePlaceholder: '选择日期', - startDatePlaceholder: '起始日期', - endDatePlaceholder: '截止日期', - blankCellContent: '--', - - uploadError: '上传错误: ', - uploadExceed: '最大上传数量(${uploadLimit})已超出.', - unsupportedFileType: '不支持格式: ', - fileSizeExceed: '文件大小已超出: ', - refNotFound: '组件未找到: ', - fieldRequired: '字段值不可为空', - invalidNumber: '数据格式错误', - selectFile: ' 选择文件', - downloadFile: '下载', - removeFile: '移除', - validationFailed: '表单数据校验失败', - - subFormAction: '操作', - subFormAddAction: '新增', - subFormAddActionHint: '新增行', - insertSubFormRow: '插入行', - deleteSubFormRow: '删除行', - nonSubFormType: '组件类型不是子表单', - } - } -} diff --git a/src/components-iview/svg-icon/index.vue b/src/components-iview/svg-icon/index.vue deleted file mode 100644 index 8fc1294..0000000 --- a/src/components-iview/svg-icon/index.vue +++ /dev/null @@ -1,49 +0,0 @@ - - - - - diff --git a/src/components-iview/utils/code-generator.js b/src/components-iview/utils/code-generator.js deleted file mode 100644 index 7cba2c4..0000000 --- a/src/components-iview/utils/code-generator.js +++ /dev/null @@ -1,91 +0,0 @@ -export const generateCode = function(formJson, codeType= 'vue') { - let formJsonStr = JSON.stringify(formJson) - - if (codeType === 'html') { - return ` - - - - - VForm Demo - - - - - - -
- - - -
- - - - - - - -` - - } else { - return ` -` - - } -} diff --git a/src/components-iview/utils/i18n.js b/src/components-iview/utils/i18n.js deleted file mode 100644 index 3a5377a..0000000 --- a/src/components-iview/utils/i18n.js +++ /dev/null @@ -1,54 +0,0 @@ -import Vue from 'vue' -import VueI18n from 'vue-i18n' - -import enLocale from "../lang/en-US"; -import zhLocale from "../lang/zh-CN"; -import enLocale_render from "../lang/en-US_render"; -import zhLocale_render from "../lang/zh-CN_render"; - -import en from 'view-design/dist/locale/en-US'; -import zh from 'view-design/dist/locale/zh-CN'; - -import locale from "view-design/src/locale" - - -const langResources = { - 'en-US': { - ...en, - ...enLocale, - ...enLocale_render - }, - 'zh-CN': { - ...zh, - ...zhLocale, - ...zhLocale_render - } -}; - - -Vue.use(VueI18n); - -export const i18n = new VueI18n({ - locale: localStorage.getItem('v_form_locale') || 'zh-CN', // set locale - messages:langResources // set locale messages -}); - -locale.i18n((key, value) => i18n.t(key, value)) - -export const changeLocale = function(langName) { - i18n.locale = langName - localStorage.setItem('v_form_locale', langName) -} - -export const translate = function(key) { - return i18n._t(key, i18n.locale, i18n._getMessages()) -} - - -export default { - methods: { - i18nt(key) { - return i18n._t(key, i18n.locale, i18n._getMessages()) - } - } -} diff --git a/src/components-iview/utils/sfc-generator.js b/src/components-iview/utils/sfc-generator.js deleted file mode 100644 index 7812819..0000000 --- a/src/components-iview/utils/sfc-generator.js +++ /dev/null @@ -1,581 +0,0 @@ -import {isNotNull} from "@/utils/util"; -import {genVue2JS} from "./vue2js-generator"; -import {beautifierOpts} from "@/utils/beautifierLoader"; -import {genVue3JS} from "./vue3js-generator"; - -function buildClassAttr(ctn, defaultClass) { - const cop = ctn.options - let gridClassArray = [] - !!defaultClass && gridClassArray.push(defaultClass) - !!cop.customClass && (cop.customClass.length > 0) && gridClassArray.push(cop.customClass.join(' ')) - return gridClassArray.length > 0 ? `class="${gridClassArray.join(' ')}"` : '' -} - -const containerTemplates = { //容器组件属性 - 'grid': (ctn, formConfig) => { - const gridClassAttr = buildClassAttr(ctn) - const gridTemplate = -` -${ctn.cols.map(col => { - const colOpt = col.options - const colClassAttr = buildClassAttr(col, 'grid-cell') - return ` - ${col.widgetList.map(cw => { - if (cw.category === 'container') { - return buildContainerWidget(cw, formConfig) - } else { - return buildFieldWidget(cw, formConfig) - } - }).join('') - } - ` - }).join('') -} -` - - return gridTemplate - }, - - 'table': (ctn, formConfig) => { - const tableClassAttr = buildClassAttr(ctn, 'table-layout') - const tableTemplate = -`
- - ${ctn.rows.map(tr => { - return `${ - tr.cols.filter(td => !td.merged).map(td => { - const tdOpt = td.options - const tdClassAttr = buildClassAttr(td, 'table-cell') - const colspanAttr = (!isNaN(tdOpt.colspan) && (tdOpt.colspan !== 1)) ? `colspan="${tdOpt.colspan}"` : '' - const rowspanAttr = (!isNaN(tdOpt.rowspan) && (tdOpt.rowspan !== 1)) ? `rowspan="${tdOpt.rowspan}"` : '' - - let tdStyleArray = [] - !!tdOpt.cellWidth && tdStyleArray.push('width: ' + tdOpt.cellWidth + ' !important') - !!tdOpt.cellHeight && tdStyleArray.push('height: ' + tdOpt.cellHeight + ' !important') - let tdStyleAttr = (tdStyleArray.length > 0) ? `style="${tdStyleArray.join(';')}"` : '' - - return `` - }).join('') - }` - }).join('') - } -
${td.widgetList.map(tw => { - if (tw.category === 'container') { - return buildContainerWidget(tw, formConfig) - } else { - return buildFieldWidget(tw, formConfig) - } - }).join('') - } -
-
` - return tableTemplate - }, - - 'tab': (ctn, formConfig) => { - const tabClassAttr = buildClassAttr(ctn) - const vModel = ctn.tabs && (ctn.tabs.length > 0) ? `v-model="${ctn.options.name}ActiveTab"` : '' - const tabTemplate = -`
- - ${ctn.tabs.map(tab => { - const tabOpt = tab.options - const disabledAttr = (tabOpt.disabled === true) ? `disabled` : '' - return ` - ${tab.widgetList.map(tw => { - if (tw.category === 'container') { - return buildContainerWidget(tw, formConfig) - } else { - return buildFieldWidget(tw, formConfig) - } - }).join('') - }` - }).join('')} - -
` - - return tabTemplate - }, - - 'sub-form': (ctn, formConfig) => { - //TODO: - }, - -} - -function buildContainerWidget(widget, formConfig) { - return containerTemplates[widget.type] ? containerTemplates[widget.type](widget, formConfig) : null -} - -function getElAttrs(widget, formConfig) { //获取El组件属性 - let wop = widget.options - return { - vModel: `v-model="${formConfig.modelName}.${wop.name}"`, - readonly: wop.readonly ? `readonly="true"` : '', - disabled: wop.disabled ? `:disabled="true"` : '', - size: !!wop.size ? `size="${wop.size}"` : '', - type: !!wop.type ? `type="${wop.type === 'number' ? 'text' : wop.type}"` : '', - showPassword: !!wop.showPassword ? `:show-password="${wop.showPassword}"` : '', - placeholder: !!wop.placeholder ? `placeholder="${wop.placeholder}"` : '', - rows: (isNotNull(wop.rows) && !isNaN(wop.rows)) ? `rows="${wop.rows}"` : '', - clearable: !!wop.clearable ? 'clearable' : '', - minlength: (isNotNull(wop.minLength) && !isNaN(wop.minLength)) ? `:minlength="${wop.minLength}"` : '', - maxlength: (isNotNull(wop.maxLength) && !isNaN(wop.maxLength)) ? `:maxlength="${wop.maxLength}"` : '', - showWordLimit: !!wop.showWordLimit ? `:show-word-limit="true"`: '', - prefixIcon: !!wop.prefixIcon ? `prefix="${wop.prefixIcon}"` : '', - suffixIcon: !!wop.suffixIcon ? `suffix="${wop.suffixIcon}"` : '', - controlsPosition: wop.controlsPosition === 'right' ? `controls-outside="right"` : `controls-outside="default"`, - min: (isNotNull(wop.min) && !isNaN(wop.min)) ? `:min="${wop.min}"` : '', - max: (isNotNull(wop.max) && !isNaN(wop.max)) ? `:max="${wop.max}"` : '', - precision: (isNotNull(wop.precision) && !isNaN(wop.precision)) ? `:precision="${wop.precision}"` : '', - step: (isNotNull(wop.step) && !isNaN(wop.step)) ? `:step="${wop.step}"` : '', - filterable: !!wop.filterable ? `filterable` : '', - allowCreate: !!wop.allowCreate ? `allow-create` : '', - defaultFirstOption: (!!wop.filterable && !!wop.allowCreate) ? `default-first-option` : '', - multiple: !!wop.multiple ? `multiple` : '', - multipleLimit: (!isNaN(wop.multipleLimit) && (wop.multipleLimit > 0)) ? `:multiple-limit="${wop.multipleLimit}"` : '', - automaticDropdown: !!wop.automaticDropdown ? `automatic-dropdown` : '', - remote: !!wop.remote ? `remote` : '', - format: !!wop.format ? `format="${wop.format}"` : '', - valueFormat: !!wop.valueFormat ? `value-format="${wop.valueFormat}"` : '', - editable: !!wop.editable ? `:editable="${wop.editable}"` : '', - startPlaceholder: !!wop.startPlaceholder ? `start-placeholder="${wop.startPlaceholder}"` : '', - endPlaceholder: !!wop.endPlaceholder ? `end-placeholder="${wop.endPlaceholder}"` : '', - - activeText: !!wop.activeText ? `active-text="${wop.activeText}"` : '', - inactiveText: !!wop.inactiveText ? `inactive-text="${wop.inactiveText}"` : '', - activeColor: !!wop.activeColor ? `true-color="${wop.activeColor}"` : '', - inactiveColor: !!wop.inactiveColor ? `false-color="${wop.inactiveColor}"` : '', - switchWidth: (!isNaN(wop.switchWidth) && (wop.switchWidth !== 40)) ? `:width="${wop.switchWidth}"` : '', - - rateMax: (!isNaN(wop.max) && (wop.max !== 5)) ? `:max="${wop.max}"` : '', - lowThreshold: (!isNaN(wop.lowThreshold) && (wop.lowThreshold !== 2)) ? `:low-threshold="${wop.lowThreshold}"` : '', - highThreshold: (!isNaN(wop.highThreshold) && (wop.highThreshold !== 4)) ? `:high-threshold="${wop.highThreshold}"` : '', - allowHalf: !!wop.allowHalf ? `allow-half` : '', - showText: !!wop.showText ? `show-text` : '', - showScore: !!wop.showScore ? `show-score` : '', - - sliderMin: (!isNaN(wop.min) && (wop.min !== 0)) ? `:min="${wop.min}"` : '', - sliderMax: (!isNaN(wop.max) && (wop.max !== 100)) ? `:max="${wop.max}"` : '', - sliderStep: (!isNaN(wop.step) && (wop.step !== 1)) ? `:step="${wop.step}"` : '', - sliderRange: !!wop.range ? `range` : '', - sliderVertical: !!wop.vertical ? `vertical` : '', - - uploadAction: !!wop.uploadURL ? `action="${wop.uploadURL}"` : '', - withCredentials: !!wop.withCredentials ? `with-credentials` : '', - multipleSelect: !!wop.multipleSelect ? `multiple` : '', - showFileList: !!wop.showFileList ? `show-upload-list` : '', - limit: !isNaN(wop.limit) ? `:limit="${wop.limit}"` : '', - fileAccept: !!wop.fileAccept ? `:format="${wop.fileAccept}"` : '', - fileTypes: !!wop.fileTypes ? `:accept="${wop.fileTypes}"` : '', - fileMaxSize: !!wop.fileMaxSize? `:max-size="${wop.fileMaxSize}"`:``, - uploadTipSlotChild: !!wop.uploadTip ? `` : '', - pictureUploadIconChild: ``, - fileUploadIconChild: ``, - - buttonType: !!wop.type ? `type="${wop.type}` : '', - buttonPlain: !!wop.plain ? `plain` : '', - buttonRound: !!wop.round ? `round` : '', - buttonCircle: !!wop.circle ? `circle` : '', - buttonIcon: !!wop.icon ? `icon="${wop.icon}"` : '', - contentPosition: (!!wop.contentPosition && (wop.contentPosition !== 'center')) ? `content-position="${wop.contentPosition}"` : '', - - appendButtonChild: !!wop.appendButton ? `` : '', - } -} - -function buildRadioChildren(widget, formConfig) { - let wop = widget.options - const childTag = !!wop.buttonStyle ? 'RadioButton' : 'Radio' - const borderAttr = !!wop.border ? `border` : '' - const styleAttr = `style="display: ${wop.displayStyle}"` - return `<${childTag} v-for="(item, index) in ${wop.name}Options" :key="index" :label="item.value" - :disabled="item.disabled" ${borderAttr} ${styleAttr}>{{item.label}}` -} - -function buildCheckboxChildren(widget, formConfig) { - let wop = widget.options - const childTag = !!wop.buttonStyle ? 'CheckboxButton' : 'Checkbox' - const borderAttr = !!wop.border ? `border` : '' - const styleAttr = `style="display: ${wop.displayStyle}"` - return `<${childTag} v-for="(item, index) in ${wop.name}Options" :key="index" :label="item.value" - :disabled="item.disabled" ${borderAttr} ${styleAttr}>{{item.label}}` -} - -function buildSelectChildren(widget, formConfig) { - let wop = widget.options - const childTag = 'Option' - return `<${childTag} v-for="(item, index) in ${wop.name}Options" :key="index" :label="item.value" - :value="item.value" :disabled="item.disabled">` -} - -function buildDivider(widget, formConfig) { - let wop = widget.options - - return { - size: !!wop.size ? `size="${wop.size}"` : '', - type: (!!wop.contentPosition && (wop.direction !== 'horizontal')) ? `type="vertical"` : `type="horizontal"`, - contentPosition: (!!wop.contentPosition && (wop.contentPosition !== 'center')) ? `orientation="${wop.contentPosition}"` : '', - } -} -function buildInputComposite(widget, formConfig) { - let wop = widget.options - - return { - appendDiv: (wop.prependControl&&wop.prependControlType=='div') ? - `
- ${wop.prependControlText} -
`: '', - prependDiv: (wop.appendControl&&wop.appendControlType=='div') ? - `
- ${wop.appendControlText} -
`: '', - appendButton: (wop.prependControl&&wop.prependControlType=='button') ? - ``: '', - prependButton: (wop.appendControl&&wop.appendControlType=='button') ? - ``: '' - } -} - -const elTemplates = { //字段组件属性 - 'input': (widget, formConfig) => { - const {vModel, readonly, disabled, size, type, showPassword, placeholder, clearable, - maxlength, showWordLimit, prefixIcon, suffixIcon, appendButtonChild} = getElAttrs(widget, formConfig) - return `${appendButtonChild}` - }, - - 'input-composite': (widget, formConfig) => { - const {vModel, readonly, disabled, size, type, showPassword, placeholder, clearable, - maxlength, showWordLimit, prefixIcon, suffixIcon, appendButtonChild} = getElAttrs(widget, formConfig) - - const {appendDiv,prependDiv,appendButton,prependButton} =buildInputComposite(widget, formConfig); - return ` - ${appendDiv} - ${prependDiv} - ${appendButton} - ${prependButton} - ` - }, - - 'textarea': (widget, formConfig) => { - const {vModel, readonly, disabled, size, type, showPassword, placeholder, rows, clearable, - maxlength, showWordLimit} = getElAttrs(widget, formConfig) - return `` - }, - - 'number': (widget, formConfig) => { - const {vModel, disabled, size, type, showPassword, placeholder, controlsPosition, min, max, precision, step - } = getElAttrs(widget, formConfig) - return `` - }, - - 'radio': (widget, formConfig) => { - const {vModel, disabled, size} = getElAttrs(widget, formConfig) - const radioOptions = buildRadioChildren(widget, formConfig) - return `${radioOptions}` - }, - - 'checkbox': (widget, formConfig) => { - const {vModel, disabled, size} = getElAttrs(widget, formConfig) - const checkboxOptions = buildCheckboxChildren(widget, formConfig) - return `${checkboxOptions}` - }, - - 'select': (widget, formConfig) => { - const {vModel, disabled, size, clearable, filterable, allowCreate, defaultFirstOption, automaticDropdown, - multiple, multipleLimit, remote, placeholder} = getElAttrs(widget, formConfig) - const selectOptions = buildSelectChildren(widget, formConfig) - return `` - }, - - 'time': (widget, formConfig) => { - const {vModel, readonly, disabled, size, placeholder, clearable, format, editable - } = getElAttrs(widget, formConfig) - return `` - }, - - 'time-range': (widget, formConfig) => { - const {vModel, readonly, disabled, size, startPlaceholder, endPlaceholder, clearable, format, editable - } = getElAttrs(widget, formConfig) - return `` - }, - - 'date': (widget, formConfig) => { - const {vModel, readonly, disabled, size, type, placeholder, clearable, format, valueFormat, editable - } = getElAttrs(widget, formConfig) - return `` - }, - - 'date-range': (widget, formConfig) => { - const {vModel, readonly, disabled, size, type, startPlaceholder, endPlaceholder, clearable, format, valueFormat, editable - } = getElAttrs(widget, formConfig) - return `` - }, - - 'switch': (widget, formConfig) => { - const {vModel, disabled, activeText, inactiveText, activeColor, inactiveColor, switchWidth - } = getElAttrs(widget, formConfig) - return `` - }, - - 'rate': (widget, formConfig) => { - const {vModel, disabled, rateMax, allowHalf, showText} = getElAttrs(widget, formConfig) - return `` - }, - - 'color': (widget, formConfig) => { - const {vModel, disabled, size - } = getElAttrs(widget, formConfig) - return `` - }, - - 'slider': (widget, formConfig) => { - const {vModel, disabled, sliderMin, sliderMax, sliderStep, sliderRange, sliderVertical - } = getElAttrs(widget, formConfig) - return `` - }, - - 'picture-upload': (widget, formConfig) => { - const {vModel, disabled, uploadAction, withCredentials, multipleSelect, showFileList, limit, - fileAccept,fileTypes,fileMaxSize, - uploadTipSlotChild, pictureUploadIconChild} = getElAttrs(widget, formConfig) - let wop = widget.options - return `${uploadTipSlotChild} ${pictureUploadIconChild}` - }, - - 'file-upload': (widget, formConfig) => { - const {vModel, disabled, uploadAction, withCredentials, multipleSelect, showFileList, limit, - fileAccept,fileTypes,fileMaxSize, - uploadTipSlotChild, fileUploadIconChild} = getElAttrs(widget, formConfig) - let wop = widget.options - return `${uploadTipSlotChild} ${fileUploadIconChild}` - }, - - 'rich-editor': (widget, formConfig) => { - const {vModel, disabled, placeholder - } = getElAttrs(widget, formConfig) - return `` - }, - - 'cascader': (widget, formConfig) => { - const {vModel, disabled, size, clearable, filterable, placeholder} = getElAttrs(widget, formConfig) - let wop = widget.options - const optionsAttr = `:options="${wop.name}Options"` - return `` - }, - - 'static-text': (widget, formConfig) => { - return `
${widget.options.textContent}
` - }, - - 'html-text': (widget, formConfig) => { - return `
` - }, - - 'button': (widget, formConfig) => { - const {buttonType, buttonPlain, buttonRound, buttonCircle, buttonIcon, disabled} = getElAttrs(widget, formConfig) - return `` - }, - - 'divider': (widget, formConfig) => { - const {contentPosition,size,type} = buildDivider(widget, formConfig) - return `` - }, - -} - -function buildFieldWidget(widget, formConfig) { - let wop = widget.options - const label = wop.labelHidden ? '' : wop.label - const labelWidthAttr = wop.labelHidden ? `:label-width="0"` : (!!wop.labelWidth ? `:label-width="${wop.labelWidth}"` : '') - const labelTooltipAttr = wop.labelTooltip ? `title="${wop.labelTooltip}"` : '' - const propAttr = `prop="${wop.name}"` - - let classArray = [] - !!wop.required && classArray.push('required') - !!wop.customClass && (wop.customClass.length > 0) && classArray.push(wop.customClass.join(' ')) - if (!!wop.labelAlign) { - wop.labelAlign !== 'label-left-align' && classArray.push(wop.labelAlign) - } else { - //classArray.push(formConfig.labelAlign || 'label-left-align') - formConfig.labelAlign !== 'label-left-align' && classArray.push(formConfig.labelAlign) - } - const classAttr = (classArray.length > 0) ? `class="${classArray.join(' ')}"` : '' - - let customLabelDom = -`` - !wop.labelIconClass && (customLabelDom = '') - - const fwDom = elTemplates[widget.type] ? elTemplates[widget.type](widget, formConfig) : null - const isFormItem = !!widget.formItemFlag - const vShowAttr = !!wop.hidden ? `v-show="false"` : '' - return isFormItem ? -` - ${customLabelDom} - ${fwDom} -` - : -`
${fwDom}
` -} - -function genTemplate(formConfig, widgetList, vue3Flag = false) { - const submitAttr = !!vue3Flag ? `@submit.prevent` : `@submit.native.prevent` - let childrenList = [] - widgetList.forEach(wgt => { - if (wgt.category === 'container') { - childrenList.push( buildContainerWidget(wgt, formConfig) ) - } else { - childrenList.push( buildFieldWidget(wgt, formConfig) ) - } - }) - - const formTemplate = -`
- ${!!childrenList ? childrenList.join('\n') : ''} -
` - - return formTemplate -} - -const genGlobalCSS = function (formConfig) { - const globalCssTemplate =`${formConfig.cssCode}` - - return globalCssTemplate -} - -const genScopedCSS = function (formConfig, vue3Flag = false) { - //const vDeep = !!vue3Flag ? `::v-deep` : `:deep` - const cssTemplate = -` div.table-container { - table.table-layout { - width: 100%; - table-layout: fixed; - border-collapse: collapse; - - td.table-cell { - display: table-cell; - height: 36px; - border: 1px solid #e1e2e3; - } - } - } - - div.tab-container { - } - - .label-left-align ${!!vue3Flag ? `:deep(.ivu-form-item-label)` : `::v-deep .ivu-form-item-label`} { - text-align: left; - } - - .label-center-align ${!!vue3Flag ? `:deep(.ivu-form-item-label)` : `::v-deep .ivu-form-item-label`} { - text-align: center; - } - - .label-right-align ${!!vue3Flag ? `:deep(.ivu-form-item-label)` : `::v-deep .ivu-form-item-label`} { - text-align: right; - } - - .custom-label { - } - - .static-content-item { - min-height: 20px; - display: flex; - align-items: center; - - ${!!vue3Flag ? `:deep(.ivu-divider-horizontal)` : `::v-deep .ivu-divider-horizontal`} { - margin: 0; - } - }` - - return cssTemplate -} - -export const genSFC = function (formConfig, widgetList, beautifier, vue3Flag = false) { - const html = beautifier.html(genTemplate(formConfig, widgetList, vue3Flag), beautifierOpts.html) - const js = beautifier.js(!!vue3Flag ? genVue3JS(formConfig, widgetList): genVue2JS(formConfig, widgetList), beautifierOpts.js) - const globalCss = beautifier.css(genGlobalCSS(formConfig), beautifierOpts.css) - const scopedCss = beautifier.css(genScopedCSS(formConfig, vue3Flag), beautifierOpts.css) - - return ` - - - - - - - -` -} diff --git a/src/components-iview/utils/vue2js-generator.js b/src/components-iview/utils/vue2js-generator.js deleted file mode 100644 index 9430c6a..0000000 --- a/src/components-iview/utils/vue2js-generator.js +++ /dev/null @@ -1,144 +0,0 @@ -import {isNotNull, traverseContainWidgets, traverseFieldWidgets} from "@/utils/util"; -import {translate} from "@/utils/i18n"; -import FormValidators, {getRegExp} from "@/utils/validators"; - -export function buildDefaultValueListFn(formConfig, widgetList, resultList) { - return function(fieldWidget) { - const fop = fieldWidget.options - const fd = fop.defaultValue - if (isNotNull(fd)) { - resultList.push(`${fop.name}: ${JSON.stringify(fd)},`) - } else { - resultList.push(`${fop.name}: null,`) - } - } -} - -export function buildRulesListFn(formConfig, widgetList, resultList) { - return function(fieldWidget) { - const fop = fieldWidget.options - let fieldRules = [] - if (!!fop.required) { - fieldRules.push(`{ - required: true, - message: '${translate('render.hint.fieldRequired')}', - }`) - } - - if (!!fop.validation) { - let vldName = fop.validation - if (!!FormValidators[vldName]) { - fieldRules.push(`{ - pattern: ${eval( getRegExp(vldName) )}, - trigger: ['blur', 'change'], - message: '${fop.validationHint}' - }`) - } else { - fieldRules.push(`{ - pattern: '${eval(vldName)}', - trigger: ['blur', 'change'], - message: '${fop.validationHint}' - }`) - } - } - - //TODO: 自定义校验函数 - - fieldRules.length > 0 && resultList.push(`${fop.name}: [${fieldRules.join(',')}],`) - } -} - -export function buildFieldOptionsFn(formConfig, widgetList, resultList) { - return function(fieldWidget) { - const fop = fieldWidget.options - const ft = fieldWidget.type - if ((ft === 'radio') || (ft === 'checkbox') || (ft === 'select') || (ft === 'cascader')) { - resultList.push(`${fop.name}Options: ${JSON.stringify(fop.optionItems)},`) - } - } -} - -export function buildUploadDataFn(formConfig, widgetList, resultList) { - return function(fieldWidget) { - const fop = fieldWidget.options - const ft = fieldWidget.type - if ((ft === 'picture-upload') || (ft === 'file-upload')) { - resultList.push(`${fop.name}FileList: [],`) - resultList.push(`${fop.name}UploadHeaders: {},`) - resultList.push(`${fop.name}UploadData: {},`) - } - } -} - -export function buildActiveTabs(formConfig, widgetList) { - let resultList = [] - const handlerFn = function (cw) { - const cop = cw.options - const ct = cw.type - if (ct === 'tab') { - cw.tabs.length > 0 && resultList.push(`'${cop.name}ActiveTab': '${cw.tabs[0].options.name}',`) - } - } - traverseContainWidgets(widgetList, handlerFn) - - return resultList -} - -export const genVue2JS = function (formConfig, widgetList) { - let defaultValueList = [] - let rulesList = [] - let fieldOptions = [] - let uploadData = [] - traverseFieldWidgets(widgetList, (widget) => { - buildDefaultValueListFn(formConfig, widgetList, defaultValueList)(widget) - buildRulesListFn(formConfig, widgetList, rulesList)(widget) - buildFieldOptionsFn(formConfig, widgetList, fieldOptions)(widget) - buildUploadDataFn(formConfig, widgetList, uploadData)(widget) - }) - - const activeTabs = buildActiveTabs(formConfig, widgetList) - - const v2JSTemplate = -` export default { - components: {}, - props: {}, - data() { - return { - ${formConfig.modelName}: { - ${defaultValueList.join('\n')} - }, - - ${formConfig.rulesName}: { - ${rulesList.join('\n')} - }, - - ${activeTabs.join('\n')} - - ${fieldOptions.join('\n')} - - ${uploadData.join('\n')} - } - }, - computed: {}, - watch: {}, - created() { - }, - mounted() { - }, - methods: { - submitForm() { - this.$refs['vForm'].validate(valid => { - if (!valid) return - - //TODO: 提交表单 - }) - }, - - resetForm() { - this.$refs['vForm'].resetFields() - } - } - }` - - return v2JSTemplate -} diff --git a/src/components-iview/utils/vue3js-generator.js b/src/components-iview/utils/vue3js-generator.js deleted file mode 100644 index 09a6208..0000000 --- a/src/components-iview/utils/vue3js-generator.js +++ /dev/null @@ -1,70 +0,0 @@ -import { - buildActiveTabs, - buildDefaultValueListFn, - buildFieldOptionsFn, - buildRulesListFn, buildUploadDataFn -} from "@/utils/vue2js-generator"; -import {traverseFieldWidgets} from "@/utils/util"; - -export const genVue3JS = function (formConfig, widgetList) { - let defaultValueList = [] - let rulesList = [] - let fieldOptions = [] - let uploadData = [] - traverseFieldWidgets(widgetList, (widget) => { - buildDefaultValueListFn(formConfig, widgetList, defaultValueList)(widget) - buildRulesListFn(formConfig, widgetList, rulesList)(widget) - buildFieldOptionsFn(formConfig, widgetList, fieldOptions)(widget) - buildUploadDataFn(formConfig, widgetList, uploadData)(widget) - }) - - const activeTabs = buildActiveTabs(formConfig, widgetList) - - const v3JSTemplate = -` import { defineComponent, toRefs, reactive, getCurrentInstance } from 'vue' - - export default defineComponent({ - components: {}, - props: {}, - setup() { - const state = reactive({ - ${formConfig.modelName}: { - ${defaultValueList.join('\n')} - }, - - ${formConfig.rulesName}: { - ${rulesList.join('\n')} - }, - - ${activeTabs.join('\n')} - - ${fieldOptions.join('\n')} - - ${uploadData.join('\n')} - }) - - const instance = getCurrentInstance() - - const submitForm = () => { - instance.ctx.$refs['vForm'].validate(valid => { - if (!valid) return - - //TODO: 提交表单 - }) - } - - const resetForm = () => { - instance.ctx.$refs['vForm'].resetFields() - } - - return { - ...toRefs(state), - submitForm, - resetForm - } - } - })` - - return v3JSTemplate -} - diff --git a/src/extension/extension-loader.js b/src/extension/extension-loader.js index 0248c41..d662b12 100644 --- a/src/extension/extension-loader.js +++ b/src/extension/extension-loader.js @@ -10,10 +10,13 @@ import * as PEFactory from '@/components/form-designer/setting-panel/property-ed import {cardSchema} from "@/extension/samples/extension-schema" import CardWidget from '@/extension/samples/card/card-widget' import CardItem from '@/extension/samples/card/card-item' +import {registerCWGenerator} from '@/utils/sfc-generator' +import {cardTemplateGenerator} from '@/extension/samples/extension-sfc-generator' import {alertSchema} from "@/extension/samples/extension-schema" import AlertWidget from '@/extension/samples/alert/alert-widget' - +import {registerFWGenerator} from '@/utils/sfc-generator' +import {alertTemplateGenerator} from '@/extension/samples/extension-sfc-generator' export const loadExtension = function () { @@ -22,12 +25,13 @@ export const loadExtension = function () { * 1. 加载组件Json Schema; * 2. 全局注册容器组件，容器组件有两种状态——设计期和运行期，故需要注册两个组件； * 3. 全局注册属性编辑器组件（基本属性、高级属性、事件属性）； - * 4. 加载完毕。 + * 4. 注册容器组件的代码生成器； + * 5. 加载完毕。 */ addContainerWidgetSchema(cardSchema) //加载组件Json Schema /* -------------------------------------------------- */ - Vue.component(CardWidget.name, CardWidget) //设计期的容器组件 - Vue.component(CardItem.name, CardItem) //运行期的容器组件 + Vue.component(CardWidget.name, CardWidget) //注册设计期的容器组件 + Vue.component(CardItem.name, CardItem) //注册运行期的容器组件 /* -------------------------------------------------- */ PERegister.registerCPEditor('cardWidth', 'card-cardWidth-editor', PEFactory.createInputTextEditor('cardWidth', 'extension.setting.cardWidth')) @@ -41,6 +45,8 @@ export const loadExtension = function () { PEFactory.createSelectEditor('shadow', 'extension.setting.cardShadow', {optionItems: shadowOptions})) /* -------------------------------------------------- */ + registerCWGenerator('card', cardTemplateGenerator) //注册容器组件的代码生成器 + /* -------------------------------------------------- */ /* 容器组件加载完毕 end */ /** @@ -48,7 +54,8 @@ export const loadExtension = function () { * 1. 加载组件Json Schema; * 2. 全局注册字段组件，字段组件设计期和运行期共用，故需要仅需注册一个组件； * 3. 全局注册属性编辑器组件（基本属性、高级属性、事件属性）； - * 4. 加载完毕。 + * 4. 注册字段组件的代码生成器； + * 5. 加载完毕。 */ addCustomWidgetSchema(alertSchema) //加载组件Json Schema /* -------------------------------------------------- */ @@ -93,5 +100,7 @@ export const loadExtension = function () { PERegister.registerEPEditor('onClose', 'alert-onClose-editor', PEFactory.createEventHandlerEditor('onClose', [])) /* -------------------------------------------------- */ + registerFWGenerator('alert', alertTemplateGenerator) //注册字段组件的代码生成器 + /* -------------------------------------------------- */ /* 字段组件加载完毕 end */ } diff --git a/src/extension/samples/extension-sfc-generator.js b/src/extension/samples/extension-sfc-generator.js new file mode 100644 index 0000000..f9dbdb6 --- /dev/null +++ b/src/extension/samples/extension-sfc-generator.js @@ -0,0 +1,46 @@ +import {buildClassAttr, buildContainerWidget, buildFieldWidget} from '@/utils/sfc-generator' + +export const cardTemplateGenerator = function (cw, formConfig) { + const wop = cw.options + const headerAttr = `header="${wop.label}"` + const classAttr = buildClassAttr(cw) + const styleAttr = !!wop.cardWidth ? `style="{width: ${wop.cardWidth} !important}"` : '' + const shadowAttr = `shadow="${wop.shadow}"` + const vShowAttr = !!wop.hidden ? `v-show="false"` : '' + + const cardTemplate = +`
+ + ${ + cw.widgetList.map(wItem => { + if (wItem.category === 'container') { + return buildContainerWidget(wItem, formConfig) + } else { + return buildFieldWidget(wItem, formConfig) + } + }).join('') + } + +
` + + return cardTemplate +} + +export const alertTemplateGenerator = function(fw, formConfig) { + const wop = fw.options + const titleAttr = `title="${wop.title}"` + const typeAttr = `type=${wop.type}` + const descriptionAttr = !!wop.description ? `description="${wop.description}"` : '' + const closableAttr = `:closable="${wop.closable}"` + const closeTextAttr = !!wop.closeText ? `close-text="${wop.closeText}"` : '' + const centerAttr = `:center="${wop.center}"` + const showIconAttr = `:show-icon="${wop.showIcon}"` + const effectAttr = `effect="${wop.effect}"` + + const alertTemplate = +` +` + + return alertTemplate +} diff --git a/src/main-iview.js b/src/main-iview.js deleted file mode 100644 index 3847aa4..0000000 --- a/src/main-iview.js +++ /dev/null @@ -1,33 +0,0 @@ -import 'babel-polyfill' -import './utils/debug-console' -import Vue from 'vue' -import axios from "axios"; -import App from './App-iview.vue' -import ViewUI from 'view-design'; -import './utils/directive' -import './icons' - -import ContainerWidget from "@/components-iview/form-designer/form-widget/container-widget"; -import ContainerItem from "@/components-iview/form-render/container-item"; - -import 'view-design/dist/styles/iview.css'; -import '@/styles/index.scss' -import '@/iconfont/iconfont.css' - -/* 递归组件如需在递归组件的嵌套组件中使用，必须注册为全局组件，原因不明？？ begin */ -Vue.component('container-widget', ContainerWidget) -Vue.component('container-item', ContainerItem) -/* end */ -Vue.use(ViewUI, {size:'small'}); - - -if (typeof window !== 'undefined') { - window.axios = axios -} - -Vue.config.productionTip = false - -new Vue({ - el: "#app", - render: h => h(App), -}) diff --git a/src/utils/config.js b/src/utils/config.js index 7e8c26e..3aa2204 100644 --- a/src/utils/config.js +++ b/src/utils/config.js @@ -8,7 +8,7 @@ export const DESIGNER_OPTIONS = { } -export const VARIANT_FORM_VERSION = '2.1.0' +export const VARIANT_FORM_VERSION = '2.1.1' export const MOCK_CASE_URL = 'https://www.fastmock.site/mock/2de212e0dc4b8e0885fea44ab9f2e1d0/vform/' diff --git a/src/utils/sfc-generator.js b/src/utils/sfc-generator.js index 086e0f1..bc540fe 100644 --- a/src/utils/sfc-generator.js +++ b/src/utils/sfc-generator.js @@ -3,7 +3,7 @@ import {genVue2JS} from "@/utils/vue2js-generator"; import {beautifierOpts} from "@/utils/beautifierLoader"; import {genVue3JS} from "@/utils/vue3js-generator"; -function buildClassAttr(ctn, defaultClass) { +export function buildClassAttr(ctn, defaultClass) { const cop = ctn.options let gridClassArray = [] !!defaultClass && gridClassArray.push(defaultClass) @@ -103,7 +103,7 @@ ${ctn.cols.map(col => { } -function buildContainerWidget(widget, formConfig) { +export function buildContainerWidget(widget, formConfig) { return containerTemplates[widget.type] ? containerTemplates[widget.type](widget, formConfig) : null } @@ -358,7 +358,7 @@ const elTemplates = { //字段组件属性 } -function buildFieldWidget(widget, formConfig) { +export function buildFieldWidget(widget, formConfig) { let wop = widget.options const label = wop.labelHidden ? '' : wop.label const labelWidthAttr = wop.labelHidden ? `label-width="0"` : (!!wop.labelWidth ? `label-width="${wop.labelWidth}px"` : '') @@ -370,10 +370,13 @@ function buildFieldWidget(widget, formConfig) { !!wop.customClass && (wop.customClass.length > 0) && classArray.push(wop.customClass.join(' ')) if (!!wop.labelAlign) { wop.labelAlign !== 'label-left-align' && classArray.push(wop.labelAlign) - } else { + } else if (!!widget.formItemFlag) { //classArray.push(formConfig.labelAlign || 'label-left-align') formConfig.labelAlign !== 'label-left-align' && classArray.push(formConfig.labelAlign) } + if (!widget.formItemFlag) { + classArray.push('static-content-item') + } const classAttr = (classArray.length > 0) ? `class="${classArray.join(' ')}"` : '' let customLabelDom = @@ -395,12 +398,12 @@ function buildFieldWidget(widget, formConfig) { const isFormItem = !!widget.formItemFlag const vShowAttr = !!wop.hidden ? `v-show="false"` : '' return isFormItem ? -` +` ${customLabelDom} ${fwDom} ` : -`
${fwDom}
` +`
${fwDom}
` } function genTemplate(formConfig, widgetList, vue3Flag = false) { @@ -512,6 +515,24 @@ const genScopedCSS = function (formConfig, vue3Flag = false) { return cssTemplate } +/** + * 注册容器组件的代码生成器 + * @param containerType 容器类型，必须唯一 + * @param ctGenerator 代码生成器函数，接收两个参数(containerWidget, formConfig)，返回生成的容器组件代码 + */ +export const registerCWGenerator = function (containerType, ctGenerator) { + containerTemplates[containerType] = ctGenerator +} + +/** + * 注册字段组件的代码生成器 + * @param fieldType 字段类型，必须唯一 + * @param ftGenerator 代码生成器函数，接收两个参数(fieldWidget, formConfig)，返回生成的字段组件代码 + */ +export const registerFWGenerator = function (fieldType, ftGenerator) { + elTemplates[fieldType] = ftGenerator +} + export const genSFC = function (formConfig, widgetList, beautifier, vue3Flag = false) { const html = beautifier.html(genTemplate(formConfig, widgetList, vue3Flag), beautifierOpts.html) const js = beautifier.js(!!vue3Flag ? genVue3JS(formConfig, widgetList): genVue2JS(formConfig, widgetList), beautifierOpts.js) diff --git a/src/utils/util.js b/src/utils/util.js index e594656..e024da9 100644 --- a/src/utils/util.js +++ b/src/utils/util.js @@ -134,6 +134,8 @@ export function traverseFieldWidgets(widgetList, handler) { }) } else if (w.type === 'sub-form') { traverseFieldWidgets(w.widgetList, handler) + } else if (w.category === 'container') { //自定义容器 + traverseFieldWidgets(w.widgetList, handler) } }) } @@ -160,6 +162,8 @@ export function traverseContainWidgets(widgetList, handler) { }) } else if (w.type === 'sub-form') { traverseContainWidgets(w.widgetList, handler) + } else if (w.category === 'container') { //自定义容器 + traverseContainWidgets(w.widgetList, handler) } }) }