images/variant-form3-vite
2
0
Fork 0
mirror of https://github.com/vform666/variant-form3-vite.git synced 2024-09-20 04:44:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

3.0.3（2022.03.02）更新：

Browse Source 
1. 修复Pad/H5布局预览的样式显示问题；
2. 修复升级新版element-plus后事件代码编辑弹窗无法显示的问题；
3. 修复provide传递的formConfig属性不能获取最新值的问题，改用provide函数实现；
4. element-plus版本升级到2.0.4。
This commit is contained in:
vdpAdmin 2022-03-02 18:26:55 +08:00
parent 8766345ceb
commit 471c979abb
29 changed files with 155 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -14,7 +14,7 @@
"axios": "^0.24.0",
"clipboard": "^2.0.8",
"core-js": "^3.6.5",
"element-plus": "^1.3.0-beta.9",
"element-plus": "^2.0.4",
"file-saver": "^2.0.5",
"mitt": "^3.0.0",
"sortablejs": "1.14.0",

9
src/components/form-designer/form-widget/container-widget/containerMixin.js
View File

@ -1,4 +1,13 @@
export default {
inject: ['getFormConfig'],
computed: {
formConfig() {
return this.getFormConfig()
},
},
methods: {
appendTableRow(widget) {
this.designer.appendTableRow(widget)

1
src/components/form-designer/form-widget/field-widget/cascader-widget.vue
View File

@ -55,7 +55,6 @@
components: {
FormItemWrapper,
},
inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
data() {
return {
oldFieldValue: null, //field组件change之前的值

1
src/components/form-designer/form-widget/field-widget/checkbox-widget.vue
View File

@ -58,7 +58,6 @@
components: {
FormItemWrapper,
},
inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
data() {
return {
oldFieldValue: null, //field组件change之前的值

1
src/components/form-designer/form-widget/field-widget/color-widget.vue
View File

@ -49,7 +49,6 @@
components: {
FormItemWrapper,
},
inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
data() {
return {
oldFieldValue: null, //field组件change之前的值

1
src/components/form-designer/form-widget/field-widget/date-range-widget.vue
View File

@ -56,7 +56,6 @@
components: {
FormItemWrapper,
},
inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
data() {
return {
oldFieldValue: null, //field组件change之前的值

1
src/components/form-designer/form-widget/field-widget/date-widget.vue
View File

@ -54,7 +54,6 @@
components: {
FormItemWrapper,
},
inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
data() {
return {
oldFieldValue: null, //field组件change之前的值

6
src/components/form-designer/form-widget/field-widget/fieldMixin.js
View File

@ -3,9 +3,13 @@ import FormValidators from '@/utils/validators'
import eventBus from "@/utils/event-bus"
export default {
inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel', 'getOptionData'],
inject: ['refList', 'getFormConfig', 'globalOptionData', 'globalModel', 'getOptionData'],
computed: {
formConfig() {
return this.getFormConfig()
},
widgetSize() {
return this.field.options.size || 'default'
},

1
src/components/form-designer/form-widget/field-widget/file-upload-widget.vue
View File

@ -77,7 +77,6 @@
SvgIcon,
FormItemWrapper,
},
inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
data() {
return {
oldFieldValue: null, //field组件change之前的值

6
src/components/form-designer/form-widget/field-widget/form-item-wrapper.vue
View File

@ -93,8 +93,12 @@
rules: Array,
},
inject: ['formConfig'],
inject: ['getFormConfig'],
computed: {
formConfig() {
return this.getFormConfig()
},
selected() {
return !!this.designer && this.field.id === this.designer.selectedId
},

1
src/components/form-designer/form-widget/field-widget/input-widget.vue
View File

@ -61,7 +61,6 @@
components: {
FormItemWrapper,
},
inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
data() {
return {
oldFieldValue: null, //field组件change之前的值

1
src/components/form-designer/form-widget/field-widget/number-widget.vue
View File

@ -53,7 +53,6 @@
components: {
FormItemWrapper,
},
inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
data() {
return {
oldFieldValue: null, //field组件change之前的值

7
src/components/form-designer/form-widget/field-widget/picture-upload-widget.vue
View File

@ -60,7 +60,6 @@
components: {
FormItemWrapper,
},
inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
data() {
return {
oldFieldValue: null, //field组件change之前的值
@ -180,8 +179,12 @@
handlePictureRemove(file, fileList) {
this.fileList = deepClone(fileList) //this.fileList = fileList
this.updateUploadFieldModelAndEmitDataChange(fileList)
this.uploadBtnHidden = fileList.length >= this.field.options.limit
if (!!this.field.options.onFileRemove) {
let customFn = new Function('file', 'fileList', this.field.options.onFileRemove)
customFn.call(this, file, fileList)
}
},
handelUploadError(err, file, fileList) {

1
src/components/form-designer/form-widget/field-widget/radio-widget.vue
View File

@ -58,7 +58,6 @@
components: {
FormItemWrapper,
},
inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
data() {
return {
oldFieldValue: null, //field组件change之前的值

1
src/components/form-designer/form-widget/field-widget/rate-widget.vue
View File

@ -52,7 +52,6 @@
components: {
FormItemWrapper,
},
inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
data() {
return {
oldFieldValue: null, //field组件change之前的值

1
src/components/form-designer/form-widget/field-widget/rich-editor-widget.vue
View File

@ -71,7 +71,6 @@
// }
quillEditor,
},
inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
data() {
return {
oldFieldValue: null, //field组件change之前的值

1
src/components/form-designer/form-widget/field-widget/select-widget.vue
View File

@ -61,7 +61,6 @@
components: {
FormItemWrapper,
},
inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
data() {
return {
oldFieldValue: null, //field组件change之前的值

1
src/components/form-designer/form-widget/field-widget/slider-widget.vue
View File

@ -50,7 +50,6 @@
components: {
FormItemWrapper,
},
inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
data() {
return {
oldFieldValue: null, //field组件change之前的值

1
src/components/form-designer/form-widget/field-widget/switch-widget.vue
View File

@ -51,7 +51,6 @@
components: {
FormItemWrapper,
},
inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
data() {
return {
oldFieldValue: null, //field组件change之前的值

1
src/components/form-designer/form-widget/field-widget/textarea-widget.vue
View File

@ -53,7 +53,6 @@
components: {
FormItemWrapper,
},
inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
data() {
return {
oldFieldValue: null, //field组件change之前的值

1
src/components/form-designer/form-widget/field-widget/time-range-widget.vue
View File

@ -57,7 +57,6 @@
components: {
FormItemWrapper,
},
inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
data() {
return {
oldFieldValue: null, //field组件change之前的值

1
src/components/form-designer/form-widget/field-widget/time-widget.vue
View File

@ -54,7 +54,6 @@
components: {
FormItemWrapper,
},
inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
data() {
return {
oldFieldValue: null, //field组件change之前的值

11
src/components/form-designer/form-widget/index.vue
View File

@ -53,7 +53,7 @@
provide() {
return {
refList: this.widgetRefList,
formConfig: this.formConfig,
getFormConfig: () => this.formConfig, /* 解决provide传递formConfig属性的响应式更新问题！！ */
globalOptionData: this.optionData,
getOptionData: () => this.optionData,
globalModel: {
@ -172,7 +172,6 @@
<style lang="scss" scoped>
.container-scroll-bar {
:deep(.el-scrollbar__wrap), :deep(.el-scrollbar__view) {
overflow-x: hidden;
}
@ -186,14 +185,6 @@
overflow-y: auto;
.el-form.full-height-width {
/*
margin: 0 auto;
width: 420px;
border-radius: 15px;
//border-width: 10px;
box-shadow: 0 0 1px 10px #495060;
*/
height: 100%;
padding: 3px;
background: #ffffff;

8
src/components/form-designer/setting-panel/index.vue
View File

@ -180,14 +180,6 @@
},
created() {
// eventBus.$on('editEventHandler', (eventName, eventParams) => {
// this.editEventHandler(eventName, eventParams)
// })
// eventBus.$on('editEventHandler', (eventParams) => {
// this.editEventHandler(eventParams[0], eventParams[1])
// })
this.on$('editEventHandler', (eventParams) => {
//debugger
this.editEventHandler(eventParams[0], eventParams[1])

1
src/components/form-designer/setting-panel/property-editor/event-handler/eventMixin.js
View File

@ -7,7 +7,6 @@ export default {
methods: {
editEventHandler(eventName, eventParams) {
this.dispatch('SettingPanel', 'editEventHandler', [eventName, [...eventParams]])
// eventBus.$emit('editEventHandler', [eventName, [...eventParams]])
},
}

18
src/components/form-designer/toolbar-panel/index.vue
View File

@ -44,9 +44,10 @@
<div v-if="showPreviewDialogFlag" class="" v-drag="['.drag-dialog.el-dialog', '.drag-dialog .el-dialog__header']">
<el-dialog :title="i18nt('designer.toolbar.preview')" v-model="showPreviewDialogFlag"
:show-close="true" :close-on-click-modal="false" :close-on-press-escape="false" center
:destroy-on-close="true" custom-class="drag-dialog small-padding-dialog" width="75%" :fullscreen="layoutType === 'H5'">
:destroy-on-close="true" custom-class="drag-dialog small-padding-dialog" width="75%"
:fullscreen="(layoutType === 'H5') || (layoutType === 'Pad')">
<div>
<div class="form-render-wrapper" :class="[layoutType === 'H5' ? 'h5-layout' : '']">
<div class="form-render-wrapper" :class="[layoutType === 'H5' ? 'h5-layout' : (layoutType === 'Pad' ? 'pad-layout' : '')]">
<VFormRender ref="preForm" :form-json="formJson" :form-data="testFormData" :preview-state="true"
:option-data="testOptionData"
@appendButtonClick="testOnAppendButtonClick" @buttonClick="testOnButtonClick"
@ -705,7 +706,7 @@
.form-render-wrapper {
//height: calc(100vh - 142px);
all: revert !important; /* 防止表单继承el-dialog等外部样式，未生效，原因不明？？ */
//all: revert !important; /* 防止表单继承el-dialog等外部样式，未生效，原因不明？？ */
}
.form-render-wrapper.h5-layout {
@ -714,7 +715,16 @@
border-radius: 15px;
//border-width: 10px;
box-shadow: 0 0 1px 10px #495060;
height: calc(100vh - 142px);
height: calc(100vh - 175px);
}
.form-render-wrapper.pad-layout {
margin: 0 auto;
width: 960px;
border-radius: 15px;
//border-width: 10px;
box-shadow: 0 0 1px 10px #495060;
height: calc(100vh - 175px);
}
.node-tree-drawer {

6
src/components/form-render/container-item/grid-col-item.vue
View File

@ -55,7 +55,7 @@
},
},
inject: ['refList', 'globalModel', 'formConfig', 'previewState'],
inject: ['refList', 'globalModel', 'getFormConfig', 'previewState'],
data() {
return {
layoutProps: {
@ -70,6 +70,10 @@
}
},
computed: {
formConfig() {
return this.getFormConfig()
},
customClass() {
return this.widget.options.customClass || ''
},

3
src/components/form-render/index.vue
View File

@ -73,7 +73,7 @@
return {
refList: this.widgetRefList,
sfRefList: this.subFormRefList, //收集SubForm引用
formConfig: this.formConfig,
getFormConfig: () => this.formJsonObj.formConfig, /* 解决provide传递formConfig属性的响应式更新问题！！ */
globalOptionData: this.optionData,
getOptionData: () => this.optionData, /* 该方法用于在异步更新option-data之后重新获取到最新值 */
globalModel: {
@ -357,7 +357,6 @@
this.buildFormModel(newFormJsonObj.widgetList)
this.formJsonObj['formConfig'] = newFormJsonObj.formConfig
// this._provided.formConfig = newFormJsonObj.formConfig //强制更新provide的formConfig对象
this.formJsonObj['widgetList'] = newFormJsonObj.widgetList
this.$nextTick(() => {

215
src/utils/directive.js
View File

@ -11,139 +11,142 @@ export function addDirective(app) {
mounted(el, binding) {
if (!binding.value) return false;
const dragDom = document.querySelector(binding.value[0])
const dragHeader = document.querySelector(binding.value[1])
binding.instance.$nextTick(() => {
const dragDom = document.querySelector(binding.value[0])
const dragHeader = document.querySelector(binding.value[1])
dragHeader.onmouseover = () => (dragHeader.style.cursor = `move`);
dragHeader.onmouseover = () => (dragHeader.style.cursor = `move`);
function down(e, type) {
// 鼠标按下，计算当前元素距离可视区的距离
const disX = type === 'pc' ? e.clientX - dragHeader.offsetLeft : e.touches[0].clientX - dragHeader.offsetLeft;
const disY = type === 'pc' ? e.clientY - dragHeader.offsetTop : e.touches[0].clientY - dragHeader.offsetTop;
function down(e, type) {
// 鼠标按下，计算当前元素距离可视区的距离
const disX = type === 'pc' ? e.clientX - dragHeader.offsetLeft : e.touches[0].clientX - dragHeader.offsetLeft;
const disY = type === 'pc' ? e.clientY - dragHeader.offsetTop : e.touches[0].clientY - dragHeader.offsetTop;
// body当前宽度
const screenWidth = document.body.clientWidth;
// 可见区域高度(应为body高度，可某些环境下无法获取)
const screenHeight = document.documentElement.clientHeight;
// body当前宽度
const screenWidth = document.body.clientWidth;
// 可见区域高度(应为body高度，可某些环境下无法获取)
const screenHeight = document.documentElement.clientHeight;
// 对话框宽度
const dragDomWidth = dragDom.offsetWidth;
// 对话框高度
const dragDomheight = dragDom.offsetHeight;
// 对话框宽度
const dragDomWidth = dragDom.offsetWidth;
// 对话框高度
const dragDomheight = dragDom.offsetHeight;
const minDragDomLeft = dragDom.offsetLeft;
const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth;
const minDragDomLeft = dragDom.offsetLeft;
const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth;
const minDragDomTop = dragDom.offsetTop;
const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight;
const minDragDomTop = dragDom.offsetTop;
const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight;
// 获取到的值带px 正则匹配替换
let styL = getComputedStyle(dragDom).left;
let styT = getComputedStyle(dragDom).top;
// 获取到的值带px 正则匹配替换
let styL = getComputedStyle(dragDom).left;
let styT = getComputedStyle(dragDom).top;
// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
if (styL.includes('%')) {
styL = +document.body.clientWidth * (+styL.replace(/%/g, '') / 100);
styT = +document.body.clientHeight * (+styT.replace(/%/g, '') / 100);
} else {
styL = +styL.replace(/\px/g, '');
styT = +styT.replace(/\px/g, '');
// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
if (styL.includes('%')) {
styL = +document.body.clientWidth * (+styL.replace(/%/g, '') / 100);
styT = +document.body.clientHeight * (+styT.replace(/%/g, '') / 100);
} else {
styL = +styL.replace(/\px/g, '');
styT = +styT.replace(/\px/g, '');
}
return {
disX,
disY,
minDragDomLeft,
maxDragDomLeft,
minDragDomTop,
maxDragDomTop,
styL,
styT,
};
}
return {
disX,
disY,
minDragDomLeft,
maxDragDomLeft,
minDragDomTop,
maxDragDomTop,
styL,
styT,
};
}
function move(e, type, obj) {
let { disX, disY, minDragDomLeft, maxDragDomLeft, minDragDomTop, maxDragDomTop, styL, styT } = obj;
function move(e, type, obj) {
let { disX, disY, minDragDomLeft, maxDragDomLeft, minDragDomTop, maxDragDomTop, styL, styT } = obj;
// 通过事件委托，计算移动的距离
let left = type === 'pc' ? e.clientX - disX : e.touches[0].clientX - disX;
let top = type === 'pc' ? e.clientY - disY : e.touches[0].clientY - disY;
// 通过事件委托，计算移动的距离
let left = type === 'pc' ? e.clientX - disX : e.touches[0].clientX - disX;
let top = type === 'pc' ? e.clientY - disY : e.touches[0].clientY - disY;
// 边界处理
if (-left > minDragDomLeft) {
left = -minDragDomLeft;
} else if (left > maxDragDomLeft) {
left = maxDragDomLeft;
}
// 边界处理
if (-left > minDragDomLeft) {
left = -minDragDomLeft;
} else if (left > maxDragDomLeft) {
left = maxDragDomLeft;
if (-top > minDragDomTop) {
top = -minDragDomTop;
} else if (top > maxDragDomTop) {
top = maxDragDomTop;
}
// 移动当前元素
dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`;
}
if (-top > minDragDomTop) {
top = -minDragDomTop;
} else if (top > maxDragDomTop) {
top = maxDragDomTop;
}
/**
* pc端
* onmousedown 鼠标按下触发事件
* onmousemove 鼠标按下时持续触发事件
* onmouseup 鼠标抬起触发事件
*/
dragHeader.onmousedown = (e) => {
const obj = down(e, 'pc');
document.onmousemove = (e) => {
move(e, 'pc', obj);
};
document.onmouseup = () => {
document.onmousemove = null;
document.onmouseup = null;
};
};
// 移动当前元素
dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`;
}
/**
* pc端
* onmousedown 鼠标按下触发事件
* onmousemove 鼠标按下时持续触发事件
* onmouseup 鼠标抬起触发事件
*/
dragHeader.onmousedown = (e) => {
const obj = down(e, 'pc');
document.onmousemove = (e) => {
move(e, 'pc', obj);
/**
* 移动端
* ontouchstart 当按下手指时，触发ontouchstart
* ontouchmove 当移动手指时，触发ontouchmove
* ontouchend 当移走手指时，触发ontouchend
*/
dragHeader.ontouchstart = (e) => {
const obj = down(e, 'app');
document.ontouchmove = (e) => {
move(e, 'app', obj);
};
document.ontouchend = () => {
document.ontouchmove = null;
document.ontouchend = null;
};
};
document.onmouseup = () => {
document.onmousemove = null;
document.onmouseup = null;
};
};
/**
* 移动端
* ontouchstart 当按下手指时，触发ontouchstart
* ontouchmove 当移动手指时，触发ontouchmove
* ontouchend 当移走手指时，触发ontouchend
*/
dragHeader.ontouchstart = (e) => {
const obj = down(e, 'app');
document.ontouchmove = (e) => {
move(e, 'app', obj);
};
document.ontouchend = () => {
document.ontouchmove = null;
document.ontouchend = null;
};
};
})
},
})
// v-dialogDragWidth: 弹窗宽度拖大 拖小
app.directive('dialogDragWidth', {
mounted(el, binding) {
const dragDom = binding.value.$el.querySelector('.el-dialog')
binding.instance.$nextTick(() => {
const dragDom = binding.value.$el.querySelector('.el-dialog')
el.onmousedown = (e) => {
// 鼠标按下，计算当前元素距离可视区的距离
const disX = e.clientX - el.offsetLeft
el.onmousedown = (e) => {
// 鼠标按下，计算当前元素距离可视区的距离
const disX = e.clientX - el.offsetLeft
document.onmousemove = function(e) {
e.preventDefault() // 移动时禁用默认事件
document.onmousemove = function(e) {
e.preventDefault() // 移动时禁用默认事件
// 通过事件委托，计算移动的距离
const l = e.clientX - disX
dragDom.style.width = `${l}px`
}
// 通过事件委托，计算移动的距离
const l = e.clientX - disX
dragDom.style.width = `${l}px`
document.onmouseup = function(e) {
document.onmousemove = null
document.onmouseup = null
}
}
document.onmouseup = function(e) {
document.onmousemove = null
document.onmouseup = null
}
}
})
}
})