From 2a534af2afbf26be35e78a2b68b7cae4b24560d1 Mon Sep 17 00:00:00 2001 From: wangqing Date: Fri, 20 Nov 2020 18:35:42 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E8=A1=A8=E5=8D=95=E5=8A=9F?= =?UTF-8?q?=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/index.js | 4 +- src/assets/styles/home.scss | 3 + src/components/generator/config.js | 36 ++----- src/components/generator/drawingDefalut.js | 36 +------ src/components/parser/example/Index.vue | 4 +- src/utils/db.js | 1 + src/utils/formDataConvert.js | 71 +++++++++++-- src/utils/sign.js | 9 +- src/views/form/RightPanel.vue | 44 +++----- src/views/form/index.vue | 112 ++++++++++++++------- src/views/home/index.vue | 4 +- src/views/project/create.vue | 2 +- 12 files changed, 177 insertions(+), 149 deletions(-) diff --git a/src/api/index.js b/src/api/index.js index 6d2403f..b083602 100644 --- a/src/api/index.js +++ b/src/api/index.js @@ -1,6 +1,6 @@ import axios from 'axios' // import qs from 'qs' -import { MessageBox, Message } from 'element-ui' +import {MessageBox, Message} from 'element-ui' import router from '@/router/index' import store from '@/store/index' import signMd5Utils from '@/utils/sign' @@ -77,7 +77,7 @@ api.interceptors.response.use( const res = response.data if (res.code === 200) { return Promise.resolve(res) - } else if (res.code === 500) { + } else if (res.code === 500 || res.code == 403) { // 这里做错误提示，如果使用了 element ui 则可以使用 Message 进行提示 Message({ message: res.msg || 'Error', diff --git a/src/assets/styles/home.scss b/src/assets/styles/home.scss index 541c62b..399dce2 100644 --- a/src/assets/styles/home.scss +++ b/src/assets/styles/home.scss @@ -4,6 +4,7 @@ $lighterBlue: #409eff; position: relative; width: 100%; height: 100%; + overflow-y: hidden; } .components-list { padding: 8px; @@ -79,6 +80,7 @@ $lighterBlue: #409eff; box-sizing: border-box; background-color: rgba(255, 255, 255, 100); border: 2px solid rgba(255, 255, 255, 100); + overflow-y: hidden; } .center-board { height: 100vh; @@ -112,6 +114,7 @@ $lighterBlue: #409eff; .center-board-row { padding: 12px 12px 15px 12px; box-sizing: border-box; + overflow-y: hidden; & > .el-form { // 69 = 12+15+42 height: calc(100vh - 69px); diff --git a/src/components/generator/config.js b/src/components/generator/config.js index 88e7c07..ee6fcb1 100644 --- a/src/components/generator/config.js +++ b/src/components/generator/config.js @@ -12,7 +12,8 @@ export const formConf = { title: '问卷名称', description: '为了给您提供更好的服务，希望您能抽出几分钟时间，将您的感受和建议告诉我们，我们非常重视每位\n' + '用户的宝贵意见，期待您的参与！现在我们就马上开始吧！', - formBtns: true + formBtns: true, + unFocusedComponentBorder: true } // 输入型组件 【左面板】 @@ -135,25 +136,6 @@ export const inputComponents = [ precision: undefined, 'controls-position': '', disabled: false - }, - { - __config__: { - label: '编辑器', - showLabel: true, - changeTag: true, - labelWidth: null, - tag: 'tinymce', - tagIcon: 'rich-text', - defaultValue: null, - span: 24, - layout: 'colFormItem', - required: true, - regList: [], - document: 'http://tinymce.ax-z.cn' - }, - placeholder: '请输入', - height: 300, // 编辑器高度 - branding: false // 隐藏右下角品牌烙印 } ] @@ -349,7 +331,7 @@ export const selectComponents = [ range: false }, { - typeId: 12, + typeId: 11, __config__: { label: '时间选择', tag: 'el-time-picker', @@ -375,7 +357,7 @@ export const selectComponents = [ 'value-format': 'HH:mm:ss' }, { - typeId: 13, + typeId: 12, __config__: { label: '时间范围', tag: 'el-time-picker', @@ -401,7 +383,7 @@ export const selectComponents = [ 'value-format': 'HH:mm:ss' }, { - typeId: 14, + typeId: 13, __config__: { label: '日期选择', tag: 'el-date-picker', @@ -426,7 +408,7 @@ export const selectComponents = [ readonly: false }, { - typeId: 15, + typeId: 14, __config__: { label: '日期范围', tag: 'el-date-picker', @@ -453,7 +435,7 @@ export const selectComponents = [ readonly: false }, { - typeId: 16, + typeId: 15, __config__: { label: '评分', tag: 'el-rate', @@ -476,7 +458,7 @@ export const selectComponents = [ disabled: false }, { - typeId: 17, + typeId: 16, __config__: { label: '颜色选择', tag: 'el-color-picker', @@ -497,7 +479,7 @@ export const selectComponents = [ size: 'medium' }, { - typeId: 18, + typeId: 17, __config__: { label: '上传', tag: 'el-upload', diff --git a/src/components/generator/drawingDefalut.js b/src/components/generator/drawingDefalut.js index dbc1daf..556c82e 100644 --- a/src/components/generator/drawingDefalut.js +++ b/src/components/generator/drawingDefalut.js @@ -1,37 +1,3 @@ export default [ - { - __config__: { - label: '单行文本', - labelWidth: null, - showLabel: true, - changeTag: true, - tag: 'el-input', - tagIcon: 'input', - defaultValue: undefined, - required: true, - layout: 'colFormItem', - span: 24, - document: 'https://element.eleme.cn/#/zh-CN/component/input', - // 正则校验规则 - regList: [{ - pattern: '/^1(3|4|5|7|8|9)\\d{9}$/', - message: '手机号格式错误' - }] - }, - // 组件的插槽属性 - __slot__: { - prepend: '', - append: '' - }, - __vModel__: 'mobile', - placeholder: '请输入手机号', - style: { width: '100%' }, - clearable: true, - 'prefix-icon': 'el-icon-mobile', - 'suffix-icon': '', - maxlength: 11, - 'show-word-limit': true, - readonly: false, - disabled: false - } + ] diff --git a/src/components/parser/example/Index.vue b/src/components/parser/example/Index.vue index 4e92e3a..77f3b32 100644 --- a/src/components/parser/example/Index.vue +++ b/src/components/parser/example/Index.vue @@ -187,7 +187,7 @@ export default { disabled: false, span: 24, formBtns: true, - unFocusedComponentBorder: false + unFocusedComponentBorder: true }, formConf2: { fields: [ @@ -270,7 +270,7 @@ export default { disabled: false, span: 24, formBtns: true, - unFocusedComponentBorder: false + unFocusedComponentBorder: true } } }, diff --git a/src/utils/db.js b/src/utils/db.js index 407b8c3..eaae2a9 100644 --- a/src/utils/db.js +++ b/src/utils/db.js @@ -30,6 +30,7 @@ export function getIdGlobal(key) { } export function saveIdGlobal(id, key) { + if (key) localStorage.setItem(`${DRAWING_ID}:${key}`, `${id}`) } diff --git a/src/utils/formDataConvert.js b/src/utils/formDataConvert.js index 7ecfac9..f12690a 100644 --- a/src/utils/formDataConvert.js +++ b/src/utils/formDataConvert.js @@ -4,8 +4,7 @@ import _ from 'lodash' * 表单json转换为后台需要的对象 * @param item */ -export function formItemConvertData(item) { - console.log(item) +export function formItemConvertData(item, projectKey) { let data = { 'type': item.typeId, 'formItemId': item.__config__.formId, @@ -13,30 +12,86 @@ export function formItemConvertData(item) { 'defaultValue': item.defaultValue, 'required': item.__config__.required, 'placeholder': item.placeholder, - 'regList': item.__config__.regList + 'regList': item.__config__.regList, + 'projectKey': projectKey } - let extend = {} + let expand = {} let param = dataParams[item.typeId] if (param) { Object.keys(param).forEach(key => { let value = _.get(item, param[key]) - _.set(extend, key, value) + _.set(expand, key, value) }) - _.set(data, 'extend', extend) + _.set(data, 'expand', expand) } - console.log(data) + return data } /** - * 不同属性的存在json的位置不用 使用变量记录key 通过lodash表达式获取 + * 不同属性的存在json的位置不用 使用变量记录key 通过lodash表达式获取 1 2 3 4 为typeId * @type {{'1': {maxlength: string, prepend: string, append: string}}} */ + let dataParams = { + //单行文本 1: { 'prepend': '__slot__.prepend', 'maxlength': 'maxlength', 'append': '__slot__.append' + }, + // 多行文本 + 2: { + 'minRows': 'autosize.minRows', + 'maxRows': 'autosize.maxRows', + 'maxlength': 'maxlength' + }, + //计数器 + 4: { + 'min': 'min', + 'max': 'min', + 'maxlength': 'maxlength', + 'step': 'step', + 'step-strictly': 'step-strictly', + 'precision': 'precision', + 'controls-position': 'controls-position' + }, + //下拉选择 + 5: { + 'options': '__slot__.options', + 'filterable': 'filterable', + 'multiple': 'multiple' + }, + //级联选择 + 6: { + 'options': 'options', + 'filterable': 'filterable', + 'multiple': 'props.props.multiple' + }, + //单选框组 + 7: { + 'options': '__slot__.options', + 'filterable': 'filterable', + 'multiple': 'props.props.multiple' + }, + //单选框组 + 8: { + 'options': '__slot__.options', + 'max': 'max', + 'min': 'min' + }, //开关 + 9: { + + }, + //滑块 + 10:{ + 'min': 'min', + 'max': 'max', + 'step': 'step', + },//时间选择 + 11:{ + } + } diff --git a/src/utils/sign.js b/src/utils/sign.js index a34773a..4840e41 100644 --- a/src/utils/sign.js +++ b/src/utils/sign.js @@ -1,7 +1,7 @@ /* eslint-disable no-alert */ import md5 from 'js-md5' import constants from './constants' - +import _ from 'lodash' export default class sign { /** * json参数升序 @@ -31,13 +31,8 @@ export default class sign { static getSign(url, requestParams) { let urlParams = this.parseQueryString(url) - console.log(urlParams) - let jsonObj = this.mergeObject(urlParams, requestParams) - console.log(jsonObj) + let jsonObj = _.merge(urlParams, requestParams) let requestBody = this.sortAsc(jsonObj) - console.log(requestBody) - console.log(constants.signSecret + JSON.stringify(requestBody)) - console.log(md5(constants.signSecret + JSON.stringify(requestBody)).toLowerCase()) return md5(constants.signSecret + JSON.stringify(requestBody)).toLowerCase() } diff --git a/src/views/form/RightPanel.vue b/src/views/form/RightPanel.vue index 98f48f9..e70f626 100644 --- a/src/views/form/RightPanel.vue +++ b/src/views/form/RightPanel.vue @@ -2,12 +2,8 @@
-
- - - @@ -580,7 +576,6 @@
- @@ -650,7 +645,7 @@ import { inputComponents, selectComponents } from '@/components/generator/config' import { saveFormConf } from '@/utils/db' - +import {debounce} from "throttle-debounce" const dateTimeFormat = { date: 'yyyy-MM-dd', week: 'yyyy 第 WW 周', @@ -767,12 +762,6 @@ export default { } }, computed: { - documentLink() { - return ( - this.activeData.__config__.document - || 'https://element.eleme.cn/#/zh-CN/component/installation' - ) - }, dateOptions() { if ( this.activeData.type !== undefined @@ -816,7 +805,15 @@ export default { saveFormConf(val) }, deep: true - } + }, + activeData : { + handler(val) { + if(val){ + this.dataChange(val) + } + }, + deep: true + }, }, methods: { addReg() { @@ -957,6 +954,9 @@ export default { if (!target) target = selectComponents.find(item => item.__config__.tagIcon === tagIcon) this.$emit('tag-change', target) }, + dataChange: debounce(430, false, function(val) { + this.$emit('data-change', val) + }), changeRenderKey() { if (needRerenderList.includes(this.activeData.__config__.tag)) { this.activeData.__config__.renderKey = +new Date() @@ -967,6 +967,7 @@ export default {