From 32073e198b0fcc84ea1a34030196b49476cf1191 Mon Sep 17 00:00:00 2001 From: "LAPTOP-M3JN6OVS\\45790" <457900427@qq.com> Date: Sun, 7 Feb 2021 20:40:16 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E5=BB=BA=E7=AB=8B=E5=88=9D=E6=AD=A5?= =?UTF-8?q?=E7=9A=84=E7=89=88=E6=9C=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- example/App.vue | 16 +- example/main.js | 13 +- example/mock.js | 14 + package-lock.json | 11864 ++++++++++++++++ package.json | 5 +- .../src/form-item/BaseItem.vue | 261 +- .../src/form-item/config/form-item-config.js | 521 +- .../src/form-item/file-upload/index.vue | 493 +- .../src/form-item/index.vue | 111 +- .../src/form-item/table/index.vue | 123 +- .../src/properties/item-properties.vue | 265 +- .../vue-drag-formdesign/src/utils/index.js | 13 +- 12 files changed, 12933 insertions(+), 766 deletions(-) create mode 100644 example/mock.js create mode 100644 package-lock.json diff --git a/example/App.vue b/example/App.vue index 175271e..a62bf6b 100644 --- a/example/App.vue +++ b/example/App.vue @@ -12,7 +12,7 @@ - + - + - + diff --git a/packages/vue-drag-formdesign/src/form-item/config/form-item-config.js b/packages/vue-drag-formdesign/src/form-item/config/form-item-config.js index 70cc7b5..042f485 100644 --- a/packages/vue-drag-formdesign/src/form-item/config/form-item-config.js +++ b/packages/vue-drag-formdesign/src/form-item/config/form-item-config.js @@ -9,7 +9,7 @@ import {http_get_file_list_url,http_upload_file_url} from '../../utils' export const basicsList = [ { type: "input", // 表单类型 - label: "输入框", // 标题文字 + label: "输入框", // 标题文字 index: 'A', options: { type: "text", @@ -37,10 +37,10 @@ export const basicsList = [ }, { type: "textarea", // 表单类型 - label: "文本框", // 标题文字 + label: "文本框", // 标题文字 index: 'B', options: { - width: "100%", // 宽度 + width: "100%", // 宽度 maxLength: null, defaultValue: "", rows: 4, @@ -61,7 +61,7 @@ export const basicsList = [ }, { type: "number", // 表单类型 - label: "数字输入框", // 标题文字 + label: "数字输入框", // 标题文字 index: 'C', options: { width: "100%", // 宽度 @@ -88,7 +88,7 @@ export const basicsList = [ }, { type: "select", // 表单类型 - label: "下拉选择器", // 标题文字 + label: "下拉选择器", // 标题文字 index: 'D', options: { width: "100%", // 宽度 @@ -121,12 +121,12 @@ export const basicsList = [ }, { type: "checkbox", - label: "多选框", + label: "多选框", index: 'E', options: { disabled: false, //是否禁用 hidden: false, // 是否隐藏,false显示,true隐藏 - defaultValue: [], + defaultValue: [], dynamic: 0, tooptip: '', // 提示 options: [ @@ -151,12 +151,12 @@ export const basicsList = [ }, { type: "radio", // 表单类型 - label: "单选框", // 标题文字 + label: "单选框", // 标题文字 index: 'F', options: { disabled: false, //是否禁用 hidden: false, // 是否隐藏,false显示,true隐藏 - defaultValue: "", // 默认值 + defaultValue: "", // 默认值 dynamic: 0, tooptip: '', // 提示 options: [ @@ -181,7 +181,7 @@ export const basicsList = [ }, { type: "date", // 表单类型 - label: "日期选择框", // 标题文字 + label: "日期选择框", // 标题文字 index: 'G', options: { width: "100%", // 宽度 @@ -208,7 +208,7 @@ export const basicsList = [ }, { type: "time", // 表单类型 - label: "时间选择框", // 标题文字 + label: "时间选择框", // 标题文字 index: 'H', options: { width: "100%", // 宽度 @@ -231,7 +231,7 @@ export const basicsList = [ }, { type: "rate", // 表单类型 - label: "评分", // 标题文字 + label: "评分", // 标题文字 index: 'I', options: { defaultValue: 0, @@ -252,7 +252,7 @@ export const basicsList = [ }, { type: "slider", // 表单类型 - label: "滑动输入条", // 标题文字 + label: "滑动输入条", // 标题文字 index: 'J', options: { width: "100%", // 宽度 @@ -275,21 +275,23 @@ export const basicsList = [ } ] }, - /* { - type: "uploadFile", // 表单类型 - label: "上传文件", // 标题文字 - index: 'K', + { + type: "uploadImg", + label: "上传图片", + index: 'L', options: { - defaultValue: "[]", - multiple: false, + defaultValue: [], + hidden: false, // 是否隐藏,false显示,true隐藏 disabled: false, - tooptip: '', // 提示 - hidden: false, // 是否隐藏,false显示,true隐藏 width: "100%", - limit: 3, + accept:"png,jpg,gif,jpeg", + fileSize: 20, // 最大不能超过10MB + tooptip: '', // 提示 + limit: 1, + placeholder: "上传", headers: {}, - action: http_upload_file_url, - placeholder: "上传" + action: "/upload", + listType: "picture-card" }, model: "", key: "", @@ -301,21 +303,22 @@ export const basicsList = [ ] }, { - type: "uploadImg", - label: "上传图片", - index: 'L', + type: "uploadFile", // 表单类型 + label: "上传文件", // 标题文字 + index: 'K', options: { - defaultValue: "[]", - multiple: false, - hidden: false, // 是否隐藏,false显示,true隐藏 + defaultValue: [], disabled: false, - width: "100%", tooptip: '', // 提示 - limit: 3, - placeholder: "上传", + hidden: false, // 是否隐藏,false显示,true隐藏 + width: "100%", + accept:"png,jpg,gif,bmp,jpeg,xls,xlsx,docx,doc,txt,dwg,pdf", + fileSize: 20, // 最大不能超过10MB + limit: 1, headers: {}, - action: http_upload_file_url, - listType: "picture-card" + action: "/upload", + placeholder: "上传", + listType: "text" }, model: "", key: "", @@ -325,10 +328,10 @@ export const basicsList = [ message: "必填项" } ] - }, */ + }, { type: "cascader", // 表单类型 - label: "级联选择器", // 标题文字 + label: "级联选择器", // 标题文字 index: 'M', options: { disabled: false, //是否禁用 @@ -337,7 +340,7 @@ export const basicsList = [ showSearch: false, // 是否显示搜索框,搜索选择的项的值,而不是文字 placeholder: "请选择", multiple: false, - clearable: false, // 是否显示清除按钮 + clearable: false, // 是否显示清除按钮 dynamic: 0, tooptip: '', // 提示 options: [ @@ -372,10 +375,10 @@ export const basicsList = [ } ] }, - + { type: "switch", // 表单类型 - label: "开关", // 标题文字 + label: "开关", // 标题文字 index: 'N', options: { defaultValue: false, // 默认值 Boolean 类型 @@ -396,7 +399,7 @@ export const basicsList = [ }, { type: "button", // 表单类型 - label: "按钮", // 标题文字 + label: "按钮", // 标题文字 index: 'O', options: { type: "primary", @@ -407,59 +410,391 @@ export const basicsList = [ disabled: false // 是否禁用,false不禁用,true禁用 }, key: "" - } ,{ - type: "batch", - label: "动态表格", - index: 'P', - list: [], - options: { - scrollY: 0, - disabled: false, - hidden: false, // 是否隐藏,false显示,true隐藏 - showLabel: false, - hideSequence: false, - labelWidth: "100", - labelPosition: 'left', - customStyle: "", - customClass: '', - showItem:[] , - width: "100%" + } , + { + type: "text", + label: "标签", + options: { + textAlign: "left", + tooptip: '', // 提示 + hidden: false, // 是否隐藏,false显示,true隐藏 + showRequiredMark: false + }, + key: "" + }, + { + type: "html", + label: "HTML", + options: { + tooptip: '', // 提示 + hidden: false, // 是否隐藏,false显示,true隐藏 + defaultValue: "HTML" + }, + key: "" + },{ + type: "batch", + label: "动态表格", + index: 'P', + list: [], + options: { + scrollY: 0, + disabled: false, + hidden: false, // 是否隐藏,false显示,true隐藏 + showLabel: false, + hideSequence: false, + labelWidth: "100", + labelPosition: 'left', + customStyle: "", + customClass: '', + addText: '增加新数据', + showItem:[] , + width: "100%" + }, + model: "", + key: "" + },{ + type: "batch", + label: "检测项目", + index: 'P1', + list: [ + { + "type": "input", + "label": "测试分类", + "index": "B", + "options": { + "width": "100%", + "maxLength": null, + "defaultValue": "", + "rows": 4, + "clearable": false, + "tooptip": "", + "hidden": false, + "disabled": false, + "placeholder": "测试项分类", + "dynamicHide": false, + "dynamicHideValue": "" + }, + "model": "category", + "key": "input_1612681285611", + "rules": [ + { + "required": false, + "message": "必填项", + "trigger": [ + "change", + "blur" + ] + } + ] }, - model: "", - key: "" - }, - { - type: "text", - label: "标签", - options: { - textAlign: "left", - tooptip: '', // 提示 - hidden: false, // 是否隐藏,false显示,true隐藏 - showRequiredMark: false + { + "type": "input", + "label": "检测项目", + "index": "B", + "options": { + "width": "100%", + "maxLength": null, + "defaultValue": "", + "rows": 4, + "clearable": false, + "tooptip": "", + "hidden": false, + "disabled": false, + "placeholder": "", + "dynamicHide": false, + "dynamicHideValue": "" + }, + "model": "cn", + "key": "input_1612681366818", + "rules": [ + { + "required": true, + "message": "必填项", + "trigger": [ + "change", + "blur" + ] + } + ] }, - key: "" - }, - { - type: "html", - label: "HTML", - options: { - tooptip: '', // 提示 - hidden: false, // 是否隐藏,false显示,true隐藏 - defaultValue: "HTML" + { + "type": "input", + "label": "依据标准", + "index": "B", + "options": { + "width": "100%", + "maxLength": null, + "defaultValue": "", + "rows": 4, + "clearable": false, + "tooptip": "", + "hidden": false, + "disabled": false, + "placeholder": "检测方法标准", + "dynamicHide": false, + "dynamicHideValue": "" + }, + "model": "std_method", + "key": "input_1612681401172", + "rules": [ + { + "required": false, + "message": "必填项", + "trigger": [ + "change", + "blur" + ] + } + ] + }, + { + "type": "input", + "label": "标准章节", + "index": "A", + "options": { + "type": "text", + "width": "100%", + "defaultValue": "", + "placeholder": "请输入", + "clearable": false, + "maxLength": null, + "prepend": "", + "append": "", + "tooptip": "", + "hidden": false, + "disabled": false, + "dynamicHide": false, + "dynamicHideValue": "" + }, + "model": "chapter", + "key": "input_1612681446230", + "rules": [ + { + "required": false, + "message": "必填项", + "trigger": [ + "change", + "blur" + ] + } + ] + }, + { + "type": "input", + "label": "检测条件", + "index": "A", + "options": { + "type": "text", + "width": "100%", + "defaultValue": "常态", + "placeholder": "请输入", + "clearable": false, + "maxLength": null, + "prepend": "", + "append": "", + "tooptip": "", + "hidden": false, + "disabled": false, + "dynamicHide": false, + "dynamicHideValue": "" + }, + "model": "cond", + "key": "input_1612681476307", + "rules": [ + { + "required": false, + "message": "必填项", + "trigger": [ + "change", + "blur" + ] + } + ] + }, + { + "type": "input", + "label": "价格(元)", + "index": "A", + "options": { + "type": "text", + "width": "100%", + "defaultValue": "0", + "placeholder": "请输入", + "clearable": false, + "maxLength": null, + "prepend": "", + "append": "元", + "tooptip": "", + "hidden": false, + "disabled": false, + "dynamicHide": false, + "dynamicHideValue": "" + }, + "model": "price", + "key": "input_1612681496180", + "rules": [ + { + "required": false, + "message": "必填项", + "trigger": [ + "change", + "blur" + ] + } + ] + }, + { + "type": "select", + "label": "测试人", + "index": "D", + "options": { + "width": "100%", + "multiple": false, + "disabled": false, + "clearable": false, + "hidden": false, + "placeholder": "请选择", + "valueKey": "value", + "tooptip": "", + "dynamic": 0, + "options": [ + { + "value": "1", + "label": "下拉框1" + } + ], + "showSearch": false, + "dynamicHide": false, + "dynamicHideValue": "" + }, + "model": "tester", + "key": "select_1612681602534", + "rules": [ + { + "required": false, + "message": "必填项", + "trigger": [ + "change", + "blur" + ] + } + ] + }, + { + "type": "select", + "label": "评价指标", + "index": "D", + "options": { + "width": "100%", + "multiple": false, + "disabled": false, + "clearable": false, + "hidden": false, + "placeholder": "请选择", + "valueKey": "value", + "tooptip": "", + "dynamic": 0, + "options": [ + { + "value": "1", + "label": "下拉框1" + } + ], + "showSearch": false, + "dynamicHide": false, + "dynamicHideValue": "" + }, + "model": "asset", + "key": "select_1612682672564", + "rules": [ + { + "required": false, + "message": "必填项", + "trigger": [ + "change", + "blur" + ] + } + ] + }, + { + "type": "select", + "label": "备注", + "index": "D", + "options": { + "width": "100%", + "multiple": false, + "disabled": false, + "clearable": false, + "hidden": false, + "placeholder": "请选择", + "valueKey": "value", + "tooptip": "", + "dynamic": 0, + "options": [ + { + "value": "1", + "label": "下拉框1" + } + ], + "showSearch": false, + "dynamicHide": false, + "dynamicHideValue": "" + }, + "model": "intro", + "key": "select_1612681641519", + "rules": [ + { + "required": false, + "message": "必填项", + "trigger": [ + "change", + "blur" + ] + } + ] }, - key: "" + ], + "options": { + "scrollY": 0, + "disabled": false, + "hidden": false, + "showLabel": false, + "hideSequence": false, + "labelWidth": "100", + "labelPosition": "top", + "customStyle": "", + "customClass": "", + "addText": "添加新的检测项目", + "showItem": [ + "cn", + "cond", + "intro", + "category", + "std_method", + "asset", + "tester", + "price", + "chapter" + ], + "width": "100%", + "dynamicHide": false, + "dynamicHideValue": "" }, + "model": "testitems", + "key": "batch_1612681186165" + }, ]; - - - + + + // window.$customComponentList = customComponents.list; // 布局控件 export const layoutList = [ { type: "divider", - label: "分割线", + label: "分割线", options: { tooptip: '', // 提示 orientation: "left" @@ -467,17 +802,17 @@ export const layoutList = [ key: "", model: "" }, - /* { - type: "card", - label: "卡片布局", - icon: "icon-qiapian", - list: [], - key: "", - model: "" - },*/ + /* { + type: "card", + label: "卡片布局", + icon: "icon-qiapian", + list: [], + key: "", + model: "" + },*/ { type: "grid", - label: "栅格布局", + label: "栅格布局", columns: [ { span: 12, @@ -496,7 +831,7 @@ export const layoutList = [ }, { type: "table", - label: "表格布局", + label: "表格布局", trs: [ { tds: [ diff --git a/packages/vue-drag-formdesign/src/form-item/file-upload/index.vue b/packages/vue-drag-formdesign/src/form-item/file-upload/index.vue index 9157ec0..0dffeac 100644 --- a/packages/vue-drag-formdesign/src/form-item/file-upload/index.vue +++ b/packages/vue-drag-formdesign/src/form-item/file-upload/index.vue @@ -1,330 +1,253 @@ - - diff --git a/packages/vue-drag-formdesign/src/form-item/table/index.vue b/packages/vue-drag-formdesign/src/form-item/table/index.vue index 7821540..c373d7a 100644 --- a/packages/vue-drag-formdesign/src/form-item/table/index.vue +++ b/packages/vue-drag-formdesign/src/form-item/table/index.vue @@ -1,16 +1,16 @@ - + - - - 增加 + + @@ -107,13 +109,13 @@ export default { required : true }, value: { - type: Object, + type: Array, required : false }, models: { type: Object, required : true - }, + }, config: { type: Object, required : false @@ -127,18 +129,17 @@ export default { type: Boolean , default: false } - }, + }, components: { TableItem,AddOrUpdate }, watch: { value: { // value 需要深度监听及默认先执行handler函数 - handler(val) { - if(val instanceof Array){ + handler(val) { + if(val instanceof Array){ this.models[this.record.model] = val || []; } - }, immediate: true, deep: true @@ -147,10 +148,10 @@ export default { data() { return { addOrUpdateVisible: false, - isVisible: true + isVisible: true }; }, - computed: { + computed: { disabled() { return this.record.options.disabled || this.parentDisabled; }, @@ -159,64 +160,64 @@ export default { } }, methods: { - validationSubform() { + validationSubform() { return true ; }, resetForm() { this.$refs.dynamicValidateForm.resetFields(); }, - removeDomain(index) { + removeDomain(index) { this.$confirm(`确定删除此数据?`, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { - let domains = this.models[this.record.model] - if(domains) { + let domains = this.models[this.record.model] + if(domains) { if (index !== -1) { domains.splice(index, 1); this.$message({ message: '删除成功', type: 'success', - duration: 1000 + duration: 1000 }) } } }) - - + + }, updateDomain(data) { this.addOrUpdateVisible = true - + this.$nextTick(() => { this.$refs.addOrUpdate.init(data) }) }, - addDomain() { + addDomain() { - this.addOrUpdateVisible = true + this.addOrUpdateVisible = true this.$nextTick(() => { - this.$refs.addOrUpdate.init() + this.$refs.addOrUpdate.init() }) - + }, formAdd(form){ this.isVisible = false console.log('formAdd' , form) - let domains = this.models[this.record.model] + let domains = this.models[this.record.model] if(!domains) { const ds = [form] this.models[this.record.model] = ds domains = this.models[this.record.model] } else { - domains.push(form) + domains.push(form) } // 排序 @@ -227,14 +228,14 @@ export default { this.$message({ message: '添加成功', type: 'success', - duration: 1000 + duration: 1000 }) - + }, formUpdate(form){ console.log('formUpdate' , form) - let domains = this.models[this.record.model] + let domains = this.models[this.record.model] for(var i in this.models[this.record.model] ){ if(this.models[this.record.model] [i].id == form.id){ @@ -264,7 +265,7 @@ export default { this.$message({ message: '更新成功', type: 'success', - duration: 1000 + duration: 1000 }) // console.log('this.models[this.record.model] ' , this.models[this.record.model] ) diff --git a/packages/vue-drag-formdesign/src/properties/item-properties.vue b/packages/vue-drag-formdesign/src/properties/item-properties.vue index c5879aa..2f09698 100644 --- a/packages/vue-drag-formdesign/src/properties/item-properties.vue +++ b/packages/vue-drag-formdesign/src/properties/item-properties.vue @@ -3,11 +3,11 @@ --> @@ -77,13 +77,13 @@ - + @@ -96,7 +96,7 @@ - + @@ -114,10 +114,10 @@ 静态数据 动态数据 - + - - + +
@@ -127,8 +127,8 @@ - -
+ + @@ -145,7 +145,7 @@ - + - + - + - + - + - + @@ -173,10 +173,10 @@ 静态数据 动态数据 - + - - + +
@@ -186,9 +186,9 @@ - -
- + + + @@ -199,15 +199,15 @@ :options="options.options" v-model="options.defaultValue" > - + {{checkitem.label}} - - + + @@ -217,10 +217,10 @@ 静态数据 动态数据 - + - - + +
@@ -230,9 +230,9 @@ - -
- + + + @@ -243,21 +243,21 @@ :options="options.options" v-model="options.defaultValue" > - + {{checkitem.label}} - - + + @@ -311,20 +311,20 @@ @@ -351,10 +351,10 @@ :max="options.max || Infinity" v-model="options.defaultValue" /> - + - + @@ -365,16 +365,25 @@ + + + + + + + + + + - - - - + + + @@ -383,6 +392,16 @@ + + + + + + + + + + @@ -397,10 +416,9 @@ - - - - + + + @@ -408,10 +426,10 @@ 静态数据 - 动态数据 + 动态数据 - - + +
@@ -421,23 +439,23 @@ - + -
+
- + - + - - + + @@ -447,6 +465,9 @@ + + + @@ -476,36 +497,36 @@ - + - - + + - - - - - - - - @@ -633,10 +654,10 @@ 'button', 'text', 'html', - 'divider' - ].includes(selectItem.type)" label="tooptip提示" > - - + 'divider' + ].includes(selectItem.type)" label="tooptip提示" > + + @@ -647,11 +668,11 @@ - + - diff --git a/packages/vue-drag-formdesign/src/utils/index.js b/packages/vue-drag-formdesign/src/utils/index.js index 336dc1b..7876c2d 100644 --- a/packages/vue-drag-formdesign/src/utils/index.js +++ b/packages/vue-drag-formdesign/src/utils/index.js @@ -1,17 +1,16 @@ -export const http_get_file_list_url = 'http://localhost:9000/sxfw/file/list'; -export const http_upload_file_url = 'http://localhost:9000/sxfw/file/upload' -export const http_down_file_url = 'http://localhost:9000/sxfw/file/fileDown' +export const http_get_file_list_url = '/file/list'; +export const http_upload_file_url = '/upload' +export const http_down_file_url = '/download' + - export function dynamicFun(script , model) { if(!script) return false - const func = script.indexOf('return') >= 0 ? '{' + script + '}' : 'return (' + script + ')' + const func = script.indexOf('return') >= 0 ? '{' + script + '}' : 'return (' + script + ')' const Fn = new Function('$', func) return Fn(model) } - - \ No newline at end of file + -- Gitee From fd0657fc08a9cc2002ee7ea9412e64d049036f0f Mon Sep 17 00:00:00 2001 From: "LAPTOP-M3JN6OVS\\45790" <457900427@qq.com> Date: Sun, 7 Feb 2021 21:14:19 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E4=BF=AE=E6=AD=A3=E4=B8=80=E4=B8=8B?= =?UTF-8?q?=E4=B8=8D=E5=BF=85=E8=A6=81=E7=9A=84=E4=B8=9C=E8=A5=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/form-item/config/form-item-config.js | 4 +--- packages/vue-drag-formdesign/src/utils/index.js | 6 ------ 2 files changed, 1 insertion(+), 9 deletions(-) diff --git a/packages/vue-drag-formdesign/src/form-item/config/form-item-config.js b/packages/vue-drag-formdesign/src/form-item/config/form-item-config.js index 042f485..f14e3a3 100644 --- a/packages/vue-drag-formdesign/src/form-item/config/form-item-config.js +++ b/packages/vue-drag-formdesign/src/form-item/config/form-item-config.js @@ -1,5 +1,3 @@ - -import {http_get_file_list_url,http_upload_file_url} from '../../utils' /* * author lyf * date 2020-07-06 @@ -782,7 +780,7 @@ export const basicsList = [ "dynamicHideValue": "" }, "model": "testitems", - "key": "batch_1612681186165" + "key": "" }, ]; diff --git a/packages/vue-drag-formdesign/src/utils/index.js b/packages/vue-drag-formdesign/src/utils/index.js index 7876c2d..5ee7c08 100644 --- a/packages/vue-drag-formdesign/src/utils/index.js +++ b/packages/vue-drag-formdesign/src/utils/index.js @@ -1,10 +1,4 @@ -export const http_get_file_list_url = '/file/list'; -export const http_upload_file_url = '/upload' -export const http_down_file_url = '/download' - - - export function dynamicFun(script , model) { if(!script) return false const func = script.indexOf('return') >= 0 ? '{' + script + '}' : 'return (' + script + ')' -- Gitee