diff --git a/package.json b/package.json index 9c367c2..6e3ee9f 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "file-saver": "^2.0.2", "js-cookie": "^2.2.1", "nprogress": "^0.2.0", + "signature_pad": "^3.0.0-beta.4", "ua-parser-js": "^0.7.23", "vue": "^2.6.12", "vue-clipboard2": "^0.3.1", diff --git a/public/favicon.ico b/public/favicon.ico index fecfd12..5d4011d 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/src/assets/icons/image-carousel.svg b/src/assets/icons/image-carousel.svg new file mode 100644 index 0000000..c86564e --- /dev/null +++ b/src/assets/icons/image-carousel.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/image-select.svg b/src/assets/icons/image-select.svg new file mode 100644 index 0000000..284e4ab --- /dev/null +++ b/src/assets/icons/image-select.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/image.svg b/src/assets/icons/image.svg index fdbdfbe..4991ff0 100644 --- a/src/assets/icons/image.svg +++ b/src/assets/icons/image.svg @@ -1 +1 @@ - + \ No newline at end of file diff --git a/src/assets/icons/text.svg b/src/assets/icons/text.svg new file mode 100644 index 0000000..4e31e3d --- /dev/null +++ b/src/assets/icons/text.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/indexLogo.png b/src/assets/images/indexLogo.png index 70f28ac..f9a292f 100644 Binary files a/src/assets/images/indexLogo.png and b/src/assets/images/indexLogo.png differ diff --git a/src/components/Form/DescText/index.vue b/src/components/Form/DescText/index.vue index c2bc77c..a28404b 100644 --- a/src/components/Form/DescText/index.vue +++ b/src/components/Form/DescText/index.vue @@ -1,5 +1,5 @@ @@ -11,10 +11,16 @@ export default { value: { type: String, default: '' + }, + color: { + type: String, + default: '#000000' + }, + textAlign: { + type: String, + default: 'left' } }, - methods: { - - } + methods: {} } diff --git a/src/components/Form/SignPad/index.css b/src/components/Form/SignPad/index.css new file mode 100644 index 0000000..1b74337 --- /dev/null +++ b/src/components/Form/SignPad/index.css @@ -0,0 +1,77 @@ +*, +*::before, +*::after { + box-sizing: border-box; +} +.signature-pad { + position: relative; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + font-size: 10px; + width: 100%; + height: 100%; + max-width: 700px; + max-height: 460px; + border: 1px solid #e8e8e8; + background-color: #fff; + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.08) inset; + border-radius: 4px; + padding: 16px; +} +.signature-pad::before, +.signature-pad::after { + position: absolute; + z-index: -1; + content: ""; + width: 40%; + height: 10px; + bottom: 10px; + background: transparent; + box-shadow: 0 8px 12px rgba(0, 0, 0, 0.4); +} +.signature-pad::before { + left: 20px; + -webkit-transform: skew(-3deg) rotate(-3deg); + transform: skew(-3deg) rotate(-3deg); +} +.signature-pad::after { + right: 20px; + -webkit-transform: skew(3deg) rotate(3deg); + transform: skew(3deg) rotate(3deg); +} +.signature-pad--body { + position: relative; + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + border: 1px solid #f4f4f4; +} +.signature-pad--body canvas { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + border-radius: 4px; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.02) inset; +} +.signature-pad--footer { + color: #c3c3c3; + text-align: center; + font-size: 1.2em; + margin-top: 8px; +} +.signature-pad--actions { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + margin-top: 8px; +} diff --git a/src/components/Form/SignPad/index.vue b/src/components/Form/SignPad/index.vue new file mode 100644 index 0000000..a3db561 --- /dev/null +++ b/src/components/Form/SignPad/index.vue @@ -0,0 +1,125 @@ + + + + diff --git a/src/components/generator/config.js b/src/components/generator/config.js index ba61b71..b11f3fc 100644 --- a/src/components/generator/config.js +++ b/src/components/generator/config.js @@ -489,7 +489,7 @@ export const selectComponents = [ } ] -// 布局型组件 【左面板】 +// 图片型组件 【左面板】 export const imageComponents = [ { typeId: 'IMAGE', @@ -529,7 +529,7 @@ export const imageComponents = [ showClearable: false, showRegList: false, tag: 'el-carousel', - tagIcon: 'image', + tagIcon: 'image-carousel', layout: 'colFormItem', span: 24, required: true, @@ -556,7 +556,7 @@ export const imageComponents = [ showClearable: false, showRegList: false, tag: 'image-select', - tagIcon: 'image', + tagIcon: 'image-select', layout: 'colFormItem', span: 24, required: true, @@ -564,12 +564,35 @@ export const imageComponents = [ changeTag: true }, multiple: false, - __slot__: { - options: [{ - label: '选项1', - value: 1 - }] + options: [{ + label: '选项1', + value: 1 + }], + style: {width: '100%'} + } +] + +// 辅助型组件 【左面板】 +export const assistComponents = [ + { + typeId: 'DESC_TEXT', + __config__: { + label: '文字描述', + defaultValue: '描述文字', + showDefaultValue: true, + showRequired: false, + showClearable: false, + showRegList: false, + tag: 'desc-text', + tagIcon: 'text', + layout: 'colFormItem', + span: 24, + required: true, + regList: [], + changeTag: false }, + color: '', + textAlign: 'left', style: {width: '100%'} } ] diff --git a/src/utils/convert.js b/src/utils/convert.js index d5483d1..a5c4854 100644 --- a/src/utils/convert.js +++ b/src/utils/convert.js @@ -3,7 +3,7 @@ * */ import _ from 'lodash' -import {imageComponents, inputComponents, selectComponents} from '@/components/generator/config' +import {assistComponents, imageComponents, inputComponents, selectComponents} from '@/components/generator/config' /** * 表单json转换为后台需要的对象 @@ -48,7 +48,7 @@ export function dbDataConvertForItemJson(data) { } if (!typeMap.size > 0) { // 根据类型获取默认数据 - _.concat(inputComponents, selectComponents, imageComponents).forEach(item => { + _.concat(inputComponents, selectComponents, imageComponents, assistComponents).forEach(item => { typeMap.set(item.typeId, item) }) } @@ -171,7 +171,7 @@ const dataParams = { }, // 图片选择 'IMAGE_SELECT': { - 'options': '__slot__.options', + 'options': 'options', 'multiple': 'multiple' }, // 图片轮播 diff --git a/src/views/form/RightPanel.vue b/src/views/form/RightPanel.vue index 953c252..7a79c64 100644 --- a/src/views/form/RightPanel.vue +++ b/src/views/form/RightPanel.vue @@ -7,7 +7,7 @@ - + +