diff --git a/src/assets/images/form-bg.png b/src/assets/images/form-bg.png new file mode 100644 index 0000000..986ecdd Binary files /dev/null and b/src/assets/images/form-bg.png differ diff --git a/src/assets/styles/form/home.scss b/src/assets/styles/form/home.scss index 22faecf..2b7f01f 100644 --- a/src/assets/styles/form/home.scss +++ b/src/assets/styles/form/home.scss @@ -87,7 +87,7 @@ $lighterBlue: #1890ff; } .empty-info { position: absolute; - top: 46%; + top: 36%; left: 0; right: 0; text-align: center; diff --git a/src/components/generator/config.js b/src/components/generator/config.js index d3a6974..702a6a8 100644 --- a/src/components/generator/config.js +++ b/src/components/generator/config.js @@ -11,7 +11,7 @@ export const formConf = { span: 24, title: '问卷名称', description: '为了给您提供更好的服务,希望您能抽出几分钟时间,将您的感受和建议告诉我们,我们非常重视每位\n' + - '用户的宝贵意见,期待您的参与!现在我们就马上开始吧!', + '用户的宝贵意见,期待您的参与!现在我们就马上开始吧!', formBtns: true, unFocusedComponentBorder: true } @@ -19,7 +19,7 @@ export const formConf = { // 输入型组件 【左面板】 export const inputComponents = [ { - // 组件的自定义配置 + // 组件的自定义配置 typeId: 'INPUT', __config__: { label: '单行文本', @@ -795,6 +795,7 @@ export const personalInfoComponents = [ layout: 'colFormItem', span: 24, showRegList: false, + regList: [], document: 'https://element.eleme.cn/#/zh-CN/component/input' }, placeholder: '请选择省市县', @@ -814,6 +815,7 @@ export const personalInfoComponents = [ layout: 'colFormItem', span: 24, showRegList: false, + regList: [], document: 'https://element.eleme.cn/#/zh-CN/component/input' }, placeholder: '请选择位置', @@ -833,6 +835,7 @@ export const personalInfoComponents = [ layout: 'colFormItem', span: 24, showRegList: false, + regList: [], document: 'https://element.eleme.cn/#/zh-CN/component/input' }, placeholder: '请验证手机号', diff --git a/src/components/parser/Parser.vue b/src/components/parser/Parser.vue index cbd1e93..baf2d2c 100644 --- a/src/components/parser/Parser.vue +++ b/src/components/parser/Parser.vue @@ -31,6 +31,7 @@ const layouts = { let labelWidth = config.labelWidth ? `${config.labelWidth}px` : null if (config.showLabel === false) labelWidth = '0' let label = config.label + // 显示序号 if (formConfCopy.showNumber) { label = scheme.serialNumber + ': ' + label } @@ -257,25 +258,35 @@ function setValueLabel(event, config, scheme) { let tagOptionKey = processType[config.tag] if (tagOptionKey) { if (event instanceof Array) { + // 多选 其他自定义输入 let labelArr = new Array() + if(!event.includes(0)){ + // 如果多选里没有选择其他,就清掉other + this.$set(this[this.formConf.labelFormModel], `${scheme.__vModel__}other`, '') + // 同时把输入框清空 + document.querySelector('.'+config.tag).querySelector(".item-other-input").value = "" + } event.forEach(item => { // 拼到头部 其他选项 - if (item === 0) { - labelArr.push(this[this.formConf.labelFormModel][`${scheme.__vModel__}other`]) - } else if (item) { - let {label} = getObject(_.get(scheme, tagOptionKey), 'value', item) - labelArr.push(label) - } + let {label} = getObject(_.get(scheme, tagOptionKey), 'value', item) + labelArr.push(label) }) this.$set(this[this.formConf.labelFormModel], scheme.__vModel__, labelArr.join(',')) } else { - // 多选 单选 其他自定义输入 + // 单选 其他自定义输入 if (event == 0) { console.log(this[this.formConf.labelFormModel][`${scheme.__vModel__}other`]) - this.$set(this[this.formConf.labelFormModel], `${scheme.__vModel__}`, this[this.formConf.labelFormModel][`${scheme.__vModel__}other`]) + // 如果选择了其他,把label存在field字段,把输入框内容存在fieldother字段 + let item = _.find(_.get(scheme, tagOptionKey), {'value': event}) + this.$set(this[this.formConf.labelFormModel], scheme.__vModel__, item.label) + this.$set(this[this.formConf.labelFormModel], `${scheme.__vModel__}other`,this[this.formConf.labelFormModel][`${scheme.__vModel__}other`]) } else { let item = _.find(_.get(scheme, tagOptionKey), {'value': event}) this.$set(this[this.formConf.labelFormModel], scheme.__vModel__, item.label) + // 如果没有选择其他,就清掉other + this.$set(this[this.formConf.labelFormModel], `${scheme.__vModel__}other`,'') + // 同时把输入框清空 + document.querySelector('.'+config.tag).querySelector(".item-other-input").value = "" } } } else if (config.tag === 'el-upload') { @@ -404,7 +415,25 @@ export default { }, trigger: 'change' }) } + // 处理其他输入必填校验 + const validateOtherInput = (rule, value, callback) => { + // 0 等于选中其他 + if (value == 0 || (Array.isArray(value) && value.includes(0))) { + if (!this[this.formConf.labelFormModel][`${rule.field}other`]) { + callback(new Error('请输入其他内容')) + } else { + callback() + } + } else { + callback() + } + } if (Array.isArray(config.regList)) { + // 必填其他输入框校验 + if (['RADIO', 'CHECKBOX'].includes(cur.typeId)) { + const required = {validator: validateOtherInput, message: cur.placeholder} + config.regList.push(required) + } if (config.required) { const required = {required: config.required, message: cur.placeholder} if (Array.isArray(config.defaultValue)) { @@ -457,29 +486,33 @@ export default { diff --git a/src/views/form/editor/RightPanel.vue b/src/views/form/editor/RightPanel.vue index df21fa4..c0a6031 100644 --- a/src/views/form/editor/RightPanel.vue +++ b/src/views/form/editor/RightPanel.vue @@ -933,12 +933,12 @@ > - - - - - - + + + + + + - - - - - - + + + + + + - item.value))) + 1 : lastItem.value + 1 : 1 + label: "", + value: lastItem + ? lastItem.value === 0 + ? _.max( + _.values( + this.activeData.__slot__.options.map((item) => item.value) + ) + ) + 1 + : lastItem.value + 1 + : 1, }); }, async blukAddSelectItems() { @@ -1617,7 +1624,7 @@ export default { .right-board { width: 350px; position: absolute; - right: 17px; + right: 0px; top: 0; padding-top: 3px; background-color: #fff; diff --git a/src/views/form/editor/index.vue b/src/views/form/editor/index.vue index 7ca758d..5ad0332 100644 --- a/src/views/form/editor/index.vue +++ b/src/views/form/editor/index.vue @@ -37,7 +37,7 @@ - + { this.formConf.title=event.target.innerText; @@ -48,7 +48,7 @@ - + --> - + - 从左侧拖入或点选组件进行表单设计 + + 从左侧拖入或点选组件进行表单设计 @@ -420,8 +421,33 @@ export default { @import '@/assets/styles/form/index'; diff --git a/src/views/form/index.vue b/src/views/form/index.vue index 4def0cb..a732682 100644 --- a/src/views/form/index.vue +++ b/src/views/form/index.vue @@ -1,29 +1,22 @@ - - - - - - - - - - 预览 - - - - - 保存为模板 - - + + + + + + 预览 + + + 保存为模板 + - @@ -40,20 +33,23 @@ - + - diff --git a/src/views/form/statistics/item.vue b/src/views/form/statistics/item.vue index bcc8cd5..c44de25 100644 --- a/src/views/form/statistics/item.vue +++ b/src/views/form/statistics/item.vue @@ -2,20 +2,33 @@ - + + + + + - :key="file" - :href="file.url" target="_blank" - type="primary" - > - {{ file.fileName }} - + + + + {{ file.fileName }} + + / + + + - {{ getItemValue ? getItemValue : '/' }} + {{ getItemValue || '/' }} @@ -43,6 +56,7 @@ export default { }, computed: { processData() { + console.log('数据', this.projectItemData) return this.resultData ? this.resultData['processData'] : {} }, getItemValue() { @@ -57,3 +71,14 @@ export default { } + diff --git a/src/views/form/statistics/list.vue b/src/views/form/statistics/list.vue index 3ce52ea..86d6dd1 100644 --- a/src/views/form/statistics/list.vue +++ b/src/views/form/statistics/list.vue @@ -47,6 +47,7 @@ {{ scope.row[col] }} + + + + + {{ scope.row[col] }} + + + + + + + + {{ val }} + + + 取 消 确 定 @@ -139,8 +158,12 @@ import ResultItem from './item' import DataFilter from './filter' import {getCheckedColumn, saveCheckedColumn} from '@/utils/db' -const fixedDefaultFormColumn = ['serialNumber', 'submitAddress', 'createTime'] -const fixedDefaultLabelFormColumn = {serialNumber: '提交序号', submitAddress: '提交地址', createTime: '提交时间'} +// 头部固定标签 +const fixedDefaultFormColumn = ['serialNumber'] +const fixedDefaultLabelFormColumn = {serialNumber: '提交序号'} +// 尾部固定标签 +const fixedDefaultFormTailColumn = ['submitAddress', 'createTime'] +const fixedDefaultLabelFormTailColumn = { submitAddress: '提交地址', createTime: '提交时间'} export default { name: 'ProjectStatisticsList', @@ -156,9 +179,12 @@ export default { checkedFilterColumns: [], // 固定自定义列 如序号等 fixedCustomColumns: fixedDefaultFormColumn, + fixedFormTailColumns: fixedDefaultFormTailColumn, // 选中的 checkedFixedCustomColumns: fixedDefaultFormColumn, fixedDefaultLabelFormColumn: fixedDefaultLabelFormColumn, + checkedFixedTailCustomColumns: fixedDefaultFormTailColumn, + fixedDefaultLabelFormTailColumn: fixedDefaultLabelFormTailColumn, // 自定义表单属性 checkOtherCustomColumns: [], otherCustomColumns: [], @@ -223,9 +249,11 @@ export default { this.customColumnDialogVisible = false this.fixedCustomColumns = this.checkedFixedCustomColumns this.otherCustomColumns = this.checkOtherCustomColumns + this.fixedFormTailColumns = this.checkedFixedTailCustomColumns saveCheckedColumn(this.projectKey, { fixedCustomColumns: this.fixedCustomColumns, - otherCustomColumns: this.otherCustomColumns + otherCustomColumns: this.otherCustomColumns, + fixedCustomTailColumns: this.fixedFormTailColumns }) }, getDbCheckedColumns() { @@ -233,7 +261,7 @@ export default { if (!checkedColumn) { return } - let {fixedCustomColumns, otherCustomColumns} = checkedColumn + let {fixedCustomColumns, otherCustomColumns, fixedCustomTailColumns} = checkedColumn if (fixedCustomColumns) { this.fixedCustomColumns = fixedCustomColumns this.checkedFixedCustomColumns = fixedCustomColumns @@ -242,6 +270,10 @@ export default { this.otherCustomColumns = otherCustomColumns this.checkOtherCustomColumns = otherCustomColumns } + if (fixedCustomTailColumns) { + this.fixedCustomTailColumns = fixedCustomTailColumns + this.checkedFixedTailCustomColumns = fixedCustomTailColumns + } }, downloadProjectResultFile() { if (!this.total) { diff --git a/src/views/form/write/index.vue b/src/views/form/write/index.vue index b4a7ce0..75545e6 100644 --- a/src/views/form/write/index.vue +++ b/src/views/form/write/index.vue @@ -84,13 +84,13 @@ export default { } ] }, - created() { + async created() { let key = this.$route.query.key || this.$route.params.key this.projectConfig.projectKey = key let wxCode = getQueryString('code') if (wxCode) { this.wxAuthorizationCode = wxCode - this.getWxAuthorizationUserInfo() + await this.getWxAuthorizationUserInfo() } this.getWxAuthorizationUrl() this.queryProjectSettingStatus() @@ -115,7 +115,12 @@ export default { }, queryProjectSettingStatus() { // 是否能进入填写 - this.$api.get('/user/project/setting-status', {params: {projectKey: this.projectConfig.projectKey}}).then(res => { + this.$api.get('/user/project/setting-status', { + params: { + projectKey: this.projectConfig.projectKey, + wxOpenId: this.wxUserInfo ? this.wxUserInfo.openid : '' + } + }).then(res => { if (res.msg) { this.writeNotStartPrompt = res.msg this.writeStatus = 0 @@ -125,14 +130,13 @@ export default { getWxAuthorizationUserInfo() { let wxAuthorizationCode = this.wxAuthorizationCode // 根据code 获取用户授权信息 - this.$api.get('/authorization/user/info', { + this.$api.get('/wx/jsapi/authorization/user/info', { params: { code: wxAuthorizationCode } }).then(res => { if (res.data) { this.wxUserInfo = res.data - alert(res.data) } }) @@ -233,7 +237,6 @@ export default { if (res.data && res.data.wxWrite) { // 记录微信用户信息 if (res.data.recordWxUser && !this.wxAuthorizationCode) { - console.log(this.wxAuthorizationUrl) location.href = this.wxAuthorizationUrl } else { this.onlyWxOpenHandle() @@ -266,6 +269,8 @@ export default { 'submitOs': ua.os.name, 'submitBrowser': ua.browser.name, 'submitUa': ua, + 'wxUserInfo': this.wxUserInfo, + 'wxOpenId': this.wxUserInfo ? this.wxUserInfo.openid : '', 'originalData': data.formModel, 'processData': data.labelFormModel }).then(() => { diff --git a/src/views/project/my/index.vue b/src/views/project/my/index.vue index 5997e39..d053921 100644 --- a/src/views/project/my/index.vue +++ b/src/views/project/my/index.vue @@ -105,7 +105,7 @@ @@ -200,7 +200,7 @@
从左侧拖入或点选组件进行表单设计