@@ -181,7 +181,8 @@
-
+
+
@@ -252,7 +253,7 @@ import {
// saveIdGlobal,
getFormConf
} from "./utils/db";
-import { debounce } from '@/assets/utils'
+import { debounce } from '@/utils'
const emptyActiveData = { style: {}, autosize: {} };
let oldActiveId;
@@ -296,17 +297,7 @@ export default {
},
watch: {
// eslint-disable-next-line func-names
- "activeData.label": function(val, oldVal) {
- if (
- this.activeData.placeholder === undefined ||
- !this.activeData.tag ||
- oldActiveId !== this.activeId
- ) {
- return;
- }
- this.activeData.placeholder =
- this.activeData.placeholder.replace(oldVal, "") + val;
- },
+
activeId: {
handler(val) {
oldActiveId = val;
@@ -342,6 +333,7 @@ export default {
formConfInDB && (this.formConf = formConfInDB)
}
this.activeFormItem(this.drawingList[0])
+ this.$nextTick(_ => this.getIpadMode())
// const clipboard = new ClipboardJS('#copyNode', {
// text: trigger => {
@@ -359,6 +351,10 @@ export default {
// })
},
methods: {
+ getIpadMode () {
+ const {clientHeight, clientWidth} = this.$refs.ipad
+ this.ipadMode = clientWidth * 0.74> clientHeight ? 'landscape' : 'portrait'
+ },
handlerListChange(val){
const vm = this
this.$store.commit('clearPCondition') // 清除所有条件 重新检测赋值
@@ -448,20 +444,26 @@ export default {
this.drawingList.push(clone);
this.activeFormItem(clone);
},
- getMaxId(){
+ getMaxId () {
if(this.drawingList.length){
- return this.drawingList.reduce((maxId, cmp) => {
- cmp.formId> maxId && (maxId = cmp.formId )
- if(Array.isArray(cmp.children)){
- maxId = cmp.children.reduce((max, child) => Math.max(max, child.formId), maxId)
+ let maxId = 0
+ const loop = (data, parent) => {
+ if(!data) return
+ Array.isArray(data.children) && data.children.forEach(child => loop(child, data))
+ if(Array.isArray(data)) {
+ data.forEach(loop)
+ }else{
+ maxId = Math.max(data.formId, maxId)
}
- return maxId
- }, 0)
+ }
+ loop(this.drawingList)
+ return maxId
}
return 0
},
getNextId(){
- return this.getMaxId() + 1
+ let maxId = this.getMaxId() + 1
+ return maxId
},
cloneComponent(origin) {
const clone = JSON.parse(JSON.stringify(origin));
@@ -538,20 +540,25 @@ export default {
})
},
preview(){
- this.AssembleFormData();
- let htmlCode = makeUpHtml(this.formData, "file");
- let jsCode = makeUpJs(this.formData, "file");
- let cssCode = makeUpCss(this.formData);
- this.$router.push({
- name: "preview",
- params: {
- formData: {
- htmlCode,
- jsCode,
- cssCode
- }
- }
- });
+ this.AssembleFormData();
+ // 这是沿用form-generator 创建文本模板的方法
+
+ // let htmlCode = makeUpHtml(this.formData, "file");
+ // let jsCode = makeUpJs(this.formData, "file");
+ // let cssCode = makeUpCss(this.formData);
+ // this.$router.push({
+ // name: "preview",
+ // params: {
+ // formData: {
+ // htmlCode,
+ // jsCode,
+ // cssCode
+ // }
+ // }
+ // });
+
+ // 这是使用jsx渲染
+ this.$router.push({ name: "jsxPreview", params: { formData: this.formData } });
},
generate(data) {
const func = this[`exec${titleCase(this.operationType)}`];
@@ -732,7 +739,7 @@ export default {
&.portrait{
padding: 45px 25px;
height: 85% !important;
- width: 68%;
+ width: 74%;
min-height: 560px;
}
diff --git a/src/components/DynamicForm/styles/home.styl b/src/components/DynamicForm/styles/home.styl
index b7a4959..85408ca 100644
--- a/src/components/DynamicForm/styles/home.styl
+++ b/src/components/DynamicForm/styles/home.styl
@@ -192,6 +192,7 @@ $lighterBlue = #409EFF;
}
.el-form-item{
margin-bottom: 12px !important;
+ overflow: hidden;
}
}
.drawing-item{
diff --git a/src/components/FormControls/Amount/index.vue b/src/components/FormControls/Amount/index.vue
index 7138c37..573e345 100644
--- a/src/components/FormControls/Amount/index.vue
+++ b/src/components/FormControls/Amount/index.vue
@@ -1,19 +1,19 @@
diff --git a/src/views/custom/preview.vue b/src/views/custom/preview.vue
index 8b1d72c..983082a 100644
--- a/src/views/custom/preview.vue
+++ b/src/views/custom/preview.vue
@@ -23,6 +23,28 @@ const loadVueOption = (jsCode, htmlCode, defaultData) => {
main.template = `
${htmlCode}
`
return main
}
+
+/**
+ * 默认数据 预览已经填写过的表单时
+ * 将以下数据合并到Vue实例中即可
+ */
+const defData = {
+ // "field2": "22",
+ // "field3": "本科",
+ // "field4": "男",
+ // "field5": [
+ // {
+ // "field6": [
+ // "2020-07-01",
+ // "2020-08-03"
+ // ],
+ // "field7": "212",
+ // "field8": "后端",
+ // "field9": []
+ // }
+ // ],
+ // "field10": 21,
+}
export default {
data(){
return{
@@ -33,7 +55,7 @@ export default {
// defaultData 可以将默认formData覆盖到data中
const { jsCode, htmlCode, cssCode } = this.$route.params.formData
loadStyle(cssCode)
- const OPTION = loadVueOption(jsCode, htmlCode, {})
+ const OPTION = loadVueOption(jsCode, htmlCode, defData)
const Form = Vue.extend(OPTION)
new Form().$mount("#customForm")
},
diff --git a/src/views/custom/test.vue b/src/views/custom/test.vue
index bcd2bc0..821fe7d 100644
--- a/src/views/custom/test.vue
+++ b/src/views/custom/test.vue
@@ -1,22 +1,366 @@
-
- TEST
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{item.label}}
+
+
+
+
+
+
+
+
+
+
+ 提交
+ 重置
+
+
+
+
+
+ {{drawerText}}
+
+ submitForm() {
+ const isTableValid = this.checkTableData();
+ this.$refs["elForm"].validate((valid) => {
+ if (!valid) return;
+ if (!isTableValid) return;
+ this.$notify({
+ title: "表单数据",
+ message: "请在控制台中查看数据输出",
+ position: "bottom-right",
+ });
+ console.log("表单数据", this.formData);
+ // TODO 提交表单
+ });
+ },
+ resetForm() {
+ this.$refs["elForm"].resetFields();
+ this.resetTableData();
+ },
+ resetTableData() {
+ Object.keys(this.tableRefs).forEach((vModel) => {
+ const res = this.$refs[vModel].reset();
+ });
+ },
+ checkTableData() {
+ let valid = true;
+ Object.keys(this.tableRefs).forEach((vModel) => {
+ const res = this.$refs[vModel].submit(); // 返回false或表单数据
+ res ? (this.formData[vModel] = res) : (valid = false);
+ });
+ return valid;
+ },
+ showExplain(explainText, title) {
+ if (!explainText) return;
+ this.drawerTitle = title;
+ this.drawerText = explainText;
+ this.drawerVisible = true;
+ },
+ field9BeforeUpload(file) {
+ let isRightSize = file.size / 1024 / 1024 < 20; + if (!isRightSize) { + this.$message.error("文件大小超过 20MB"); + } + return isRightSize; + }, + }, +}; +
\ No newline at end of file