elink-star
/
tduck-front
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

增加图片选择，轮播组件

old
wangqing 4 years ago
parent
9697b15a4c
commit
e0f635ad7b
14 changed files with 264 additions and 325 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      src/assets/styles/index.scss
  2. 1
      src/components/Form/ImageSelect/index.vue
  3. 58
      src/components/Form/ImageSelect1/index.vue
  4. 2
      src/components/Form/index.js
  5. 204
      src/components/generator/config.js
  6. 13
      src/components/render/slots/el-carousel.js
  7. 5
      src/router/modules/form.js
  8. 9
      src/utils/convert.js
  9. 3
      src/views/account/login.vue
  10. 269
      src/views/form/RightPanel.vue
  11. 6
      src/views/form/newIndex.vue
  12. 5
      src/views/form/publish.vue
  13. 5
      src/views/form/statistics.vue
  14. 4
      src/views/form/theme.vue

5
src/assets/styles/index.scss
View File

@ -87,16 +87,21 @@ div:focus {
.flex-row {
display: flex;
flex-direction: row;
box-sizing: border-box;
}
.flex-column {
display: flex;
flex-direction: column;
box-sizing: border-box;
}
.desc-text {
color: rgba(155, 155, 155, 100);
font-size: 14px;
text-align: left;
}
.width-full {
width: 100% !important;
}
.text-overflow {
overflow: hidden;
text-overflow: ellipsis;

1
src/components/Form/ImageSelect/index.vue
View File

@ -82,6 +82,7 @@ export default {
.el-radio-group,
.el-checkbox-group {
display: flex !important;
flex-wrap: wrap;
}
.img-radio-item {
display: flex;

58
src/components/Form/ImageSelect1/index.vue
View File

@ -1,58 +0,0 @@
<script>
import Emitter from 'element-ui/src/mixins/emitter'
export default {
name: 'ImageSelect1',
componentName: 'ImageSelect1',
mixins: [Emitter],
inject: {
elFormItem: {
default: ''
}
},
props: {
value: {},
options: Array,
disabled: Boolean,
min: Number,
max: Number,
size: String,
fill: String,
textColor: String
},
computed: {
_elFormItemSize() {
return (this.elFormItem || {}).elFormItemSize
},
checkboxGroupSize() {
return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size
}
},
watch: {
value(value) {
this.dispatch('ElFormItem', 'el.form.change', [value])
}
}
}
</script>
<template>
<div class="el-checkbox-group" role="group" aria-label="checkbox-group">
<div v-for="option in options" :key="option.value" class="img-radio-item">
<el-image
class="image"
:src="option.image"
fit="scale-down"
:preview-src-list="[option.image]"
/>
<el-radio :label="option.value">{{ option.label }}</el-radio>
</div>
</div>
</template>

2
src/components/Form/index.js
View File

@ -1,10 +1,8 @@
const ImageSelect = require('./ImageSelect/index').default
const ImageSelect1 = require('./ImageSelect1/index').default
const DescText = require('./DescText/index').default
export default {
install: Vue => {
Vue.component(ImageSelect.name, ImageSelect)
Vue.component(ImageSelect1.name, ImageSelect1)
Vue.component(DescText.name, DescText)
}
}

204
src/components/generator/config.js
View File

@ -80,38 +80,6 @@ export const inputComponents = [
readonly: false,
disabled: false
},
// },
// {
// typeId: 3,
// __config__: {
// label: '密码',
// showLabel: true,
// labelWidth: null,
// changeTag: true,
// tag: 'el-input',
// tagIcon: 'password',
// defaultValue: undefined,
// layout: 'colFormItem',
// span: 24,
// required: true,
// regList: [],
// document: 'https://element.eleme.cn/#/zh-CN/component/input'
// },
// __slot__: {
// prepend: '',
// append: ''
// },
// placeholder: '请输入',
// 'show-password': true,
// style: {width: '100%'},
// clearable: true,
// 'prefix-icon': '',
// 'suffix-icon': '',
// maxlength: null,
// 'show-word-limit': false,
// readonly: false,
// disabled: false
// },
{
typeId: 'NUMBER_INPUT',
__config__: {
@ -224,6 +192,7 @@ export const selectComponents = [
label: '单选框组',
labelWidth: null,
showLabel: true,
showRegList: false,
tag: 'el-radio-group',
tagIcon: 'radio',
changeTag: true,
@ -258,6 +227,7 @@ export const selectComponents = [
defaultValue: [],
span: 24,
showLabel: true,
showRegList: false,
labelWidth: null,
layout: 'colFormItem',
optionType: 'default',
@ -290,6 +260,7 @@ export const selectComponents = [
tagIcon: 'switch',
defaultValue: false,
span: 24,
showRegList: false,
showLabel: true,
labelWidth: null,
layout: 'colFormItem',
@ -314,6 +285,7 @@ export const selectComponents = [
tag: 'el-slider',
tagIcon: 'slider',
defaultValue: null,
showRegList: false,
span: 24,
showLabel: true,
layout: 'colFormItem',
@ -339,6 +311,7 @@ export const selectComponents = [
defaultValue: null,
span: 24,
showLabel: true,
showRegList: false,
layout: 'colFormItem',
labelWidth: null,
required: true,
@ -414,6 +387,7 @@ export const selectComponents = [
tag: 'el-date-picker',
tagIcon: 'date-range',
defaultValue: null,
showRegList: false,
span: 24,
showLabel: true,
labelWidth: null,
@ -443,6 +417,7 @@ export const selectComponents = [
defaultValue: 0,
span: 24,
showLabel: true,
showRegList: false,
labelWidth: null,
layout: 'colFormItem',
required: true,
@ -466,6 +441,7 @@ export const selectComponents = [
span: 24,
defaultValue: null,
showLabel: true,
showRegList: false,
labelWidth: null,
layout: 'colFormItem',
required: true,
@ -487,6 +463,7 @@ export const selectComponents = [
layout: 'colFormItem',
defaultValue: null,
showLabel: true,
showRegList: false,
labelWidth: null,
required: true,
span: 24,
@ -541,16 +518,43 @@ export const imageComponents = [
alt: ''
},
{
typeId: 'IMAGE',
typeId: 'IMAGE_CAROUSEL',
__config__: {
label: '图片选择',
showLabel: false,
label: '图片轮播',
showLabel: true,
labelWidth: null,
defaultValue: 1,
defaultValue: null,
showDefaultValue: false,
showRequired: false,
showClearable: false,
showRegList: false,
tag: 'el-carousel',
tagIcon: 'image',
layout: 'colFormItem',
span: 24,
required: true,
regList: [],
changeTag: true
},
__slot__: {
options: [{
label: '文字',
image: 'https://qiniu.smileyi.top/757b505cfd34c64c85ca5b5690ee5293/b128cf03901945d6b6df46cf6acbfa01.jpg'
}]
},
style: {width: '100%'}
},
{
typeId: 'IMAGE_SELECT',
__config__: {
label: '图片选择',
showLabel: true,
labelWidth: null,
defaultValue: null,
showDefaultValue: true,
showRequired: true,
showClearable: false,
showRegList: false,
tag: 'image-select',
tagIcon: 'image',
layout: 'colFormItem',
@ -560,128 +564,12 @@ export const imageComponents = [
changeTag: true
},
multiple: false,
options: [{
label: '选项2',
value: 1
}, {
label: '选项二',
value: 2
}],
__slot__: {
options: [{
label: '选项1',
value: 1
}]
},
style: {width: '100%'}
}
]
// // 布局型组件 【左面板】
// export const layoutComponents = [
// {
// __config__: {
// layout: 'rowFormItem',
// tagIcon: 'row',
// label: '行容器',
// layoutTree: true,
// document: 'https://element.eleme.cn/#/zh-CN/component/layout#row-attributes'
// },
// type: 'default',
// justify: 'start',
// align: 'top'
// },
// {
// __config__: {
// label: '按钮',
// showLabel: true,
// changeTag: true,
// labelWidth: null,
// tag: 'el-button',
// tagIcon: 'button',
// span: 24,
// layout: 'colFormItem',
// document: 'https://element.eleme.cn/#/zh-CN/component/button'
// },
// __slot__: {
// default: '主要按钮'
// },
// type: 'primary',
// icon: 'el-icon-search',
// round: false,
// size: 'medium',
// plain: false,
// circle: false,
// disabled: false
// },
// {
// __config__: {
// layout: 'colFormItem',
// tagIcon: 'table',
// tag: 'el-table',
// document: 'https://element.eleme.cn/#/zh-CN/component/table',
// span: 24,
// formId: 101,
// renderKey: 1595761764203,
// componentName: 'row101',
// showLabel: true,
// changeTag: true,
// labelWidth: null,
// label: '表格[开发中]',
// children: [{
// __config__: {
// layout: 'raw',
// tag: 'el-table-column',
// renderKey: 15957617660153
// },
// prop: 'date',
// label: '日期'
// }, {
// __config__: {
// layout: 'raw',
// tag: 'el-table-column',
// renderKey: 15957617660152
// },
// prop: 'address',
// label: '地址'
// }, {
// __config__: {
// layout: 'raw',
// tag: 'el-table-column',
// renderKey: 15957617660151
// },
// prop: 'name',
// label: '名称'
// }, {
// __config__: {
// layout: 'raw',
// tag: 'el-table-column',
// renderKey: 1595774496335,
// children: [
// {
// __config__: {
// label: '按钮',
// tag: 'el-button',
// tagIcon: 'button',
// layout: 'raw',
// renderKey: 1595779809901
// },
// __slot__: {
// default: '主要按钮'
// },
// type: 'primary',
// icon: 'el-icon-search',
// round: false,
// size: 'medium'
// }
// ]
// },
// label: '操作'
// }]
// },
// data: [{
// date: '2016-05-02',
// name: '王小虎',
// address: '上海市普陀区金沙江路 1518 弄'
// }],
// border: true,
// type: 'default',
// justify: 'start',
// align: 'top'
// }
// ]
//

13
src/components/render/slots/el-carousel.js
View File

@ -0,0 +1,13 @@
export default {
options(h, conf, key) {
const list = []
let style = 'height: 100%;'
conf.__slot__.options.forEach(item => {
list.push(<el-carousel-item style={'text-align: center;'}>
<span>{item.label}</span>
<el-image fit="contain" style={style} src={item.image}></el-image>
</el-carousel-item>)
})
return list
}
}

5
src/router/modules/form.js
View File

@ -34,6 +34,11 @@ export default [
meta: {requireLogin: true},
component: () => import(/* webpackChunkName: 'root' */ '@/views/form/publish')
},
{
path: 'theme',
meta: {requireLogin: true},
component: () => import(/* webpackChunkName: 'root' */ '@/views/form/theme')
},
{
path: 'statistics',
meta: {requireLogin: true},

9
src/utils/convert.js
View File

@ -168,6 +168,15 @@ const dataParams = {
'IMAGE': {
'src': 'src',
'alt': 'alt'
},
// 图片选择
'IMAGE_SELECT': {
'options': '__slot__.options',
'multiple': 'multiple'
},
// 图片轮播
'IMAGE_CAROUSEL': {
'options': '__slot__.options'
}
}

3
src/views/account/login.vue
View File

@ -507,9 +507,6 @@ export default {
.code-input {
width: 150px;
}
.width-full {
width: 100%;
}
.account-login-form {
text-align: left;
}

269
src/views/form/RightPanel.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="right-board">
<el-tabs v-model="currentTab" class="center-tabs">
<el-tab-pane label="组件属性" name="field" />
<el-tab-pane label="组件属性" name="field"/>
</el-tabs>
<div class="field-box">
<el-scrollbar class="right-scrollbar">
@ -21,7 +21,7 @@
:label="item.__config__.label"
:value="item.__config__.tagIcon"
>
<svg-icon :name="item.__config__.tagIcon" class="node-icon" />
<svg-icon :name="item.__config__.tagIcon" class="node-icon"/>
<!-- <svg-icon class="node-icon" :icon-class="item.__config__.tagIcon" />-->
<span> {{ item.__config__.label }}{{ item.__config__.tagIcon }}</span>
</el-option>
@ -38,16 +38,16 @@
v-if="activeData.__config__.label!==undefined&&activeData.__config__.showLabel!==false"
label="标题"
>
<el-input v-model="activeData.__config__.label" placeholder="请输入标题" @input="changeRenderKey" />
<el-input v-model="activeData.__config__.label" placeholder="请输入标题" @input="changeRenderKey"/>
</el-form-item>
<el-form-item v-if="activeData.placeholder!==undefined" label="占位提示">
<el-input v-model="activeData.placeholder" placeholder="请输入占位提示" @input="changeRenderKey" />
<el-input v-model="activeData.placeholder" placeholder="请输入占位提示" @input="changeRenderKey"/>
</el-form-item>
<el-form-item v-if="activeData['start-placeholder']!==undefined" label="开始占位">
<el-input v-model="activeData['start-placeholder']" placeholder="请输入占位提示" />
<el-input v-model="activeData['start-placeholder']" placeholder="请输入占位提示"/>
</el-form-item>
<el-form-item v-if="activeData['end-placeholder']!==undefined" label="结束占位">
<el-input v-model="activeData['end-placeholder']" placeholder="请输入占位提示" />
<el-input v-model="activeData['end-placeholder']" placeholder="请输入占位提示"/>
</el-form-item>
<el-form-item v-if="activeData.__config__.span!==undefined" label="表单栅格">
<el-slider v-model="activeData.__config__.span" :max="24" :min="1" :marks="{12:''}"
@ -57,14 +57,14 @@
<el-form-item v-if="activeData.__config__.layout==='rowFormItem'&&activeData.gutter!==undefined"
label="栅格间隔"
>
<el-input-number v-model="activeData.gutter" :min="0" placeholder="栅格间隔" />
<el-input-number v-model="activeData.gutter" :min="0" placeholder="栅格间隔"/>
</el-form-item>
<el-form-item v-if="activeData.__config__.layout==='rowFormItem'&&activeData.type!==undefined"
label="布局模式"
>
<el-radio-group v-model="activeData.type">
<el-radio-button label="default" />
<el-radio-button label="flex" />
<el-radio-button label="default"/>
<el-radio-button label="flex"/>
</el-radio-group>
</el-form-item>
<el-form-item v-if="activeData.justify!==undefined&&activeData.type==='flex'" label="水平排列">
@ -79,9 +79,9 @@
</el-form-item>
<el-form-item v-if="activeData.align!==undefined&&activeData.type==='flex'" label="垂直排列">
<el-radio-group v-model="activeData.align">
<el-radio-button label="top" />
<el-radio-button label="middle" />
<el-radio-button label="bottom" />
<el-radio-button label="top"/>
<el-radio-button label="middle"/>
<el-radio-button label="bottom"/>
</el-radio-group>
</el-form-item>
<!-- <el-form-item v-if="activeData.__config__.labelWidth!==undefined" label="标签宽度">-->
@ -118,10 +118,10 @@
/>
</el-form-item>
<el-form-item v-if="activeData.__slot__&&activeData.__slot__.prepend!==undefined" label="前缀">
<el-input v-model="activeData.__slot__.prepend" placeholder="请输入前缀" />
<el-input v-model="activeData.__slot__.prepend" placeholder="请输入前缀"/>
</el-form-item>
<el-form-item v-if="activeData.__slot__&&activeData.__slot__.append!==undefined" label="后缀">
<el-input v-model="activeData.__slot__.append" placeholder="请输入后缀" />
<el-input v-model="activeData.__slot__.append" placeholder="请输入后缀"/>
</el-form-item>
<el-form-item v-if="activeData['prefix-icon']!==undefined" label="前图标">
<el-input v-model="activeData['prefix-icon']" placeholder="请输入前图标名称">
@ -148,28 +148,28 @@
</el-input>
</el-form-item>
<el-form-item v-if="activeData.__config__.tag === 'el-cascader'" label="选项分隔符">
<el-input v-model="activeData.separator" placeholder="请输入选项分隔符" />
<el-input v-model="activeData.separator" placeholder="请输入选项分隔符"/>
</el-form-item>
<el-form-item v-if="activeData.autosize !== undefined" label="最小行数">
<el-input-number v-model="activeData.autosize.minRows" :min="1" placeholder="最小行数" />
<el-input-number v-model="activeData.autosize.minRows" :min="1" placeholder="最小行数"/>
</el-form-item>
<el-form-item v-if="activeData.autosize !== undefined" label="最大行数">
<el-input-number v-model="activeData.autosize.maxRows" :min="1" placeholder="最大行数" />
<el-input-number v-model="activeData.autosize.maxRows" :min="1" placeholder="最大行数"/>
</el-form-item>
<el-form-item v-if="isShowMin" label="最小值">
<el-input-number v-model="activeData.min" placeholder="最小值" />
<el-input-number v-model="activeData.min" placeholder="最小值"/>
</el-form-item>
<el-form-item v-if="isShowMax" label="最大值">
<el-input-number v-model="activeData.max" placeholder="最大值" />
<el-input-number v-model="activeData.max" placeholder="最大值"/>
</el-form-item>
<el-form-item v-if="activeData.height!==undefined" label="组件高度">
<el-input-number v-model="activeData.height" placeholder="高度" @input="changeRenderKey" />
<el-input-number v-model="activeData.height" placeholder="高度" @input="changeRenderKey"/>
</el-form-item>
<el-form-item v-if="isShowStep" label="步长">
<el-input-number v-model="activeData.step" placeholder="步数" />
<el-input-number v-model="activeData.step" placeholder="步数"/>
</el-form-item>
<el-form-item v-if="activeData.__config__.tag === 'el-input-number'" label="精度">
<el-input-number v-model="activeData.precision" :min="0" placeholder="精度" />
<el-input-number v-model="activeData.precision" :min="0" placeholder="精度"/>
</el-form-item>
<el-form-item v-if="activeData.__config__.tag === 'el-input-number'" label="按钮位置">
<el-radio-group v-model="activeData['controls-position']">
@ -189,10 +189,10 @@
</el-input>
</el-form-item>
<el-form-item v-if="activeData['active-text'] !== undefined" label="开启提示">
<el-input v-model="activeData['active-text']" placeholder="请输入开启提示" />
<el-input v-model="activeData['active-text']" placeholder="请输入开启提示"/>
</el-form-item>
<el-form-item v-if="activeData['inactive-text'] !== undefined" label="关闭提示">
<el-input v-model="activeData['inactive-text']" placeholder="请输入关闭提示" />
<el-input v-model="activeData['inactive-text']" placeholder="请输入关闭提示"/>
</el-form-item>
<el-form-item v-if="activeData['active-value'] !== undefined" label="开启值">
<el-input
@ -236,13 +236,13 @@
:style="{ width: '100%' }"
clearable
>
<el-option label="图片" value="image/*" />
<el-option label="视频" value="video/*" />
<el-option label="音频" value="audio/*" />
<el-option label="excel" value=".xls,.xlsx" />
<el-option label="word" value=".doc,.docx" />
<el-option label="pdf" value=".pdf" />
<el-option label="txt" value=".txt" />
<el-option label="图片" value="image/*"/>
<el-option label="视频" value="video/*"/>
<el-option label="音频" value="audio/*"/>
<el-option label="excel" value=".xls,.xlsx"/>
<el-option label="word" value=".doc,.docx"/>
<el-option label="pdf" value=".pdf"/>
<el-option label="txt" value=".txt"/>
</el-select>
</el-form-item>
<el-form-item v-if="activeData.__config__.fileSize !== undefined" label="文件大小">
@ -250,9 +250,9 @@
<el-select slot="append" v-model="activeData.__config__.sizeUnit"
:style="{ width: '66px' }"
>
<el-option label="KB" value="KB" />
<el-option label="MB" value="MB" />
<el-option label="GB" value="GB" />
<el-option label="KB" value="KB"/>
<el-option label="MB" value="MB"/>
<el-option label="GB" value="GB"/>
</el-select>
</el-input>
</el-form-item>
@ -277,12 +277,12 @@
label="按钮类型"
>
<el-select v-model="activeData.type" :style="{ width: '100%' }">
<el-option label="primary" value="primary" />
<el-option label="success" value="success" />
<el-option label="warning" value="warning" />
<el-option label="danger" value="danger" />
<el-option label="info" value="info" />
<el-option label="text" value="text" />
<el-option label="primary" value="primary"/>
<el-option label="success" value="success"/>
<el-option label="warning" value="warning"/>
<el-option label="danger" value="danger"/>
<el-option label="info" value="info"/>
<el-option label="text" value="text"/>
</el-select>
</el-form-item>
<el-form-item
@ -290,16 +290,16 @@
v-show="'picture-card' !== activeData['list-type']"
label="按钮文字"
>
<el-input v-model="activeData.__config__.buttonText" placeholder="请输入按钮文字" />
<el-input v-model="activeData.__config__.buttonText" placeholder="请输入按钮文字"/>
</el-form-item>
<el-form-item
v-if="activeData.__config__.tag === 'el-button'"
label="按钮文字"
>
<el-input v-model="activeData.__slot__.default" placeholder="请输入按钮文字" />
<el-input v-model="activeData.__slot__.default" placeholder="请输入按钮文字"/>
</el-form-item>
<el-form-item v-if="activeData['range-separator'] !== undefined" label="分隔符">
<el-input v-model="activeData['range-separator']" placeholder="请输入分隔符" />
<el-input v-model="activeData['range-separator']" placeholder="请输入分隔符"/>
</el-form-item>
<el-form-item v-if="activeData['picker-options'] !== undefined" label="时间段">
<el-input
@ -326,9 +326,9 @@
>
<div v-for="(item, index) in activeData.__slot__.options" :key="index" class="select-item">
<div class="select-line-icon option-drag">
<i class="el-icon-s-operation" />
<i class="el-icon-s-operation"/>
</div>
<el-input v-model="item.label" placeholder="选项名" size="small" />
<el-input v-model="item.label" placeholder="选项名" size="small"/>
<!-- <el-input-->
<!-- placeholder="选项值"-->
<!-- size="small"-->
@ -338,7 +338,7 @@
<div class="close-btn select-line-icon"
@click="activeData.__slot__.options.splice(index, 1)"
>
<i class="el-icon-remove-outline" />
<i class="el-icon-remove-outline"/>
</div>
</div>
</draggable>
@ -361,9 +361,67 @@
添加其他
</el-button>
</div>
<el-divider />
<el-divider/>
</template>
<template
v-if="['image-select','el-carousel'].indexOf(activeData.__config__.tag) > -1"
>
<el-divider>选项</el-divider>
<draggable
:list="activeData.__slot__.options"
:animation="340"
group="selectItem"
handle=".option-drag"
>
<div v-for="(item, index) in activeData.__slot__.options" :key="index" class="select-item">
<div class="select-line-icon option-drag">
<i class="el-icon-s-operation"/>
</div>
<div class="width-full">
<div class="flex-row">
<el-input v-model="item.label" placeholder="选项名" size="small"/>
<div class="close-btn select-line-icon"
@click="activeData.__slot__.options.splice(index, 1)"
>
<i class="el-icon-remove-outline"/>
</div>
</div>
<div class="flex-row">
<el-input v-model="item.image" placeholder="图片" size="small"/>
<el-upload
ref="logoUpload"
style="text-align: center;"
accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP"
:headers="getUploadHeader"
:on-success="(response, file, fileList)=>{
item.image = response.data
$set(activeData.__slot__.options,index,item)
closeUploadProgressHandle()
}"
:on-progress="uploadProgressHandle"
:action="getUploadUrl"
:show-file-list="false">
<div class=" select-line-icon" slot="trigger">
<i class="el-icon-upload"/>
</div>
</el-upload>
</div>
</div>
</div>
</draggable>
<div style="margin-left: 20px;">
<el-button
style="padding-bottom: 0;"
icon="el-icon-circle-plus-outline"
type="text"
@click="addImageSelectItem"
>
添加选项
</el-button>
</div>
<el-divider/>
</template>
<template v-if="['el-cascader'].indexOf(activeData.__config__.tag) > -1">
<el-divider>选项</el-divider>
<!-- <el-form-item label="数据类型">-->
@ -430,7 +488,7 @@
添加父级
</el-button>
</div>
<el-divider />
<el-divider/>
</template>
<el-form-item v-if="activeData.__config__.optionType !== undefined" label="选项样式">
@ -444,40 +502,40 @@
</el-radio-group>
</el-form-item>
<el-form-item v-if="activeData['active-color'] !== undefined" label="开启颜色">
<el-color-picker v-model="activeData['active-color']" />
<el-color-picker v-model="activeData['active-color']"/>
</el-form-item>
<el-form-item v-if="activeData['inactive-color'] !== undefined" label="关闭颜色">
<el-color-picker v-model="activeData['inactive-color']" />
<el-color-picker v-model="activeData['inactive-color']"/>
</el-form-item>
<el-form-item v-if="activeData.__config__.showLabel !== undefined
&& activeData.__config__.labelWidth !== undefined" label="显示标签"
>
<el-switch v-model="activeData.__config__.showLabel" />
<el-switch v-model="activeData.__config__.showLabel"/>
</el-form-item>
<el-form-item v-if="activeData.branding !== undefined" label="品牌烙印">
<el-switch v-model="activeData.branding" @input="changeRenderKey" />
<el-switch v-model="activeData.branding" @input="changeRenderKey"/>
</el-form-item>
<el-form-item v-if="activeData['allow-half'] !== undefined" label="允许半选">
<el-switch v-model="activeData['allow-half']" />
<el-switch v-model="activeData['allow-half']"/>
</el-form-item>
<el-form-item v-if="activeData['show-text'] !== undefined" label="辅助文字">
<el-switch v-model="activeData['show-text']" @change="rateTextChange" />
<el-switch v-model="activeData['show-text']" @change="rateTextChange"/>
</el-form-item>
<el-form-item v-if="activeData['show-score'] !== undefined" label="显示分数">
<el-switch v-model="activeData['show-score']" @change="rateScoreChange" />
<el-switch v-model="activeData['show-score']" @change="rateScoreChange"/>
</el-form-item>
<el-form-item v-if="activeData['show-stops'] !== undefined" label="显示间断点">
<el-switch v-model="activeData['show-stops']" />
<el-switch v-model="activeData['show-stops']"/>
</el-form-item>
<el-form-item v-if="activeData.range !== undefined" label="范围选择">
<el-switch v-model="activeData.range" @change="rangeChange" />
<el-switch v-model="activeData.range" @change="rangeChange"/>
</el-form-item>
<el-form-item
v-if="activeData.__config__.border !== undefined && activeData.__config__.optionType === 'default'"
label="是否带边框"
>
<el-switch v-model="activeData.__config__.border" />
<el-switch v-model="activeData.__config__.border"/>
</el-form-item>
<el-form-item v-if="activeData.__config__.tag === 'el-color-picker'" label="颜色格式">
<el-select
@ -516,59 +574,61 @@
</el-radio-group>
</el-form-item>
<el-form-item v-if="activeData['show-word-limit'] !== undefined" label="输入统计">
<el-switch v-model="activeData['show-word-limit']" />
<el-switch v-model="activeData['show-word-limit']"/>
</el-form-item>
<el-form-item v-if="activeData.__config__.tag === 'el-input-number'" label="严格步数">
<el-switch v-model="activeData['step-strictly']" />
<el-switch v-model="activeData['step-strictly']"/>
</el-form-item>
<el-form-item v-if="activeData.__config__.tag === 'el-cascader'" label="任选层级">
<el-switch v-model="activeData.props.props.checkStrictly" />
<el-switch v-model="activeData.props.props.checkStrictly"/>
</el-form-item>
<el-form-item v-if="activeData.__config__.tag === 'el-cascader'" label="是否多选">
<el-switch v-model="activeData.props.props.multiple" />
<el-switch v-model="activeData.props.props.multiple"/>
</el-form-item>
<el-form-item v-if="activeData.__config__.tag === 'el-cascader'" label="展示全路径">
<el-switch v-model="activeData['show-all-levels']" />
<el-switch v-model="activeData['show-all-levels']"/>
</el-form-item>
<el-form-item v-if="activeData.__config__.tag === 'el-cascader'" label="可否筛选">
<el-switch v-model="activeData.filterable" />
<el-switch v-model="activeData.filterable"/>
</el-form-item>
<el-form-item v-if="activeData.clearable !== undefined" label="能否清空">
<el-switch v-model="activeData.clearable" />
<el-switch v-model="activeData.clearable"/>
</el-form-item>
<el-form-item v-if="activeData.__config__.showTip !== undefined" label="显示提示">
<el-switch v-model="activeData.__config__.showTip" />
<el-switch v-model="activeData.__config__.showTip"/>
</el-form-item>
<el-form-item v-if="activeData.__config__.tag === 'el-upload'" label="多选文件">
<el-switch v-model="activeData.multiple" />
<el-switch v-model="activeData.multiple"/>
</el-form-item>
<el-form-item v-if="activeData.__config__.tag === 'el-upload'" label="文件个数">
<el-input-number v-model="activeData.limit" />
<el-input-number v-model="activeData.limit"/>
</el-form-item>
<!-- <el-form-item v-if="activeData['auto-upload'] !== undefined" label="自动上传">-->
<!-- <el-switch v-model="activeData['auto-upload']" />-->
<!-- </el-form-item>-->
<el-form-item v-if="activeData.readonly !== undefined" label="是否只读">
<el-switch v-model="activeData.readonly" />
<el-switch v-model="activeData.readonly"/>
</el-form-item>
<el-form-item v-if="activeData.disabled !== undefined" label="是否禁用">
<el-switch v-model="activeData.disabled" />
<el-switch v-model="activeData.disabled"/>
</el-form-item>
<el-form-item v-if="activeData.__config__.tag === 'el-select'" label="能否搜索">
<el-switch v-model="activeData.filterable" />
<el-switch v-model="activeData.filterable"/>
</el-form-item>
<el-form-item v-if="activeData.__config__.tag === 'el-select'" label="是否多选">
<el-switch v-model="activeData.multiple" @change="multipleChange" />
<el-switch v-model="activeData.multiple" @change="multipleChange"/>
</el-form-item>
<el-form-item v-if="activeData.__config__.tag === 'el-image'" label="图片地址">
<el-input v-model="activeData.src" placeholder="请输入图片url地址" />
<el-input v-model="activeData.src" placeholder="请输入图片url地址"/>
<el-upload
ref="logoUpload"
style="text-align: center;"
accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP"
:headers="getUploadHeader"
:on-progress="uploadProgressHandle"
:on-success="(response, file, fileList)=>{
activeData.src = response.data
closeUploadProgressHandle()
}"
:action="getUploadUrl"
:show-file-list="false"
@ -580,7 +640,7 @@
v-if="activeData.__config__.required !== undefined&&activeData.__config__.showRequired!==false"
label="是否必填"
>
<el-switch v-model="activeData.__config__.required" />
<el-switch v-model="activeData.__config__.required"/>
</el-form-item>
<template v-if="activeData.__config__.layoutTree">
@ -594,7 +654,8 @@
>
<span slot-scope="{ node, data }">
<span class="node-label">
<svg-icon :name="data.__config__?data.__config__.tagIcon:data.tagIcon" class="node-icon" />
<svg-icon :name="data.__config__?data.__config__.tagIcon:data.tagIcon"
class="node-icon"/>
{{ node.label }}
</span>
</span>
@ -611,13 +672,13 @@
class="reg-item"
>
<span class="close-btn" @click="activeData.__config__.regList.splice(index, 1)">
<i class="el-icon-close" />
<i class="el-icon-close"/>
</span>
<el-form-item label="表达式">
<el-input v-model="item.pattern" placeholder="请输入正则" />
<el-input v-model="item.pattern" placeholder="请输入正则"/>
</el-form-item>
<el-form-item label="错误提示" style="margin-bottom: 0;">
<el-input v-model="item.message" placeholder="请输入错误提示" />
<el-input v-model="item.message" placeholder="请输入错误提示"/>
</el-form-item>
</div>
<div style="margin-left: 20px;">
@ -629,13 +690,13 @@
</el-form>
<el-form v-show="currentTab === 'form'" size="small" label-width="90px">
<el-form-item label="表单名">
<el-input v-model="formConf.formRef" placeholder="请输入表单名（ref）" />
<el-input v-model="formConf.formRef" placeholder="请输入表单名（ref）"/>
</el-form-item>
<el-form-item label="表单模型">
<el-input v-model="formConf.formModel" placeholder="请输入数据模型" />
<el-input v-model="formConf.formModel" placeholder="请输入数据模型"/>
</el-form-item>
<el-form-item label="校验模型">
<el-input v-model="formConf.formRules" placeholder="请输入校验模型" />
<el-input v-model="formConf.formRules" placeholder="请输入校验模型"/>
</el-form-item>
<el-form-item label="表单尺寸">
<el-radio-group v-model="formConf.size">
@ -664,26 +725,26 @@
</el-radio-group>
</el-form-item>
<el-form-item label="标签宽度">
<el-input v-model.number="formConf.labelWidth" type="number" placeholder="请输入标签宽度" />
<el-input v-model.number="formConf.labelWidth" type="number" placeholder="请输入标签宽度"/>
</el-form-item>
<el-form-item label="栅格间隔">
<el-input-number v-model="formConf.gutter" :min="0" placeholder="栅格间隔" />
<el-input-number v-model="formConf.gutter" :min="0" placeholder="栅格间隔"/>
</el-form-item>
<el-form-item label="禁用表单">
<el-switch v-model="formConf.disabled" />
<el-switch v-model="formConf.disabled"/>
</el-form-item>
<el-form-item label="表单按钮">
<el-switch v-model="formConf.formBtns" />
<el-switch v-model="formConf.formBtns"/>
</el-form-item>
<el-form-item label="显示未选中组件边框">
<el-switch v-model="formConf.unFocusedComponentBorder" />
<el-switch v-model="formConf.unFocusedComponentBorder"/>
</el-form-item>
</el-form>
</el-scrollbar>
</div>
<treeNode-dialog :visible.sync="dialogVisible" title="添加选项" @commit="addNode" />
<icons-dialog :visible.sync="iconsVisible" :current="activeData[currentIconModel]" @select="setIcon" />
<treeNode-dialog :visible.sync="dialogVisible" title="添加选项" @commit="addNode"/>
<icons-dialog :visible.sync="iconsVisible" :current="activeData[currentIconModel]" @select="setIcon"/>
</div>
</template>
@ -724,6 +785,7 @@ export default {
props: ['showField', 'activeData', 'formConf'],
data() {
return {
loading:null,
currentTab: 'field',
currentNode: null,
dialogVisible: false,
@ -894,17 +956,22 @@ export default {
})
},
addSelectItem() {
this.activeData.__slot__.options.push({
label: '',
value: this.activeData.__slot__.options.length + 1
})
},
addImageSelectItem() {
this.activeData.__slot__.options.push({
label: '',
image: '',
value: this.activeData.__slot__.options.length + 1
})
},
addSelectOtherItem() {
let item = this.activeData.__slot__.options.find(item => {
return item.value == 0
})
console.log(item)
if (item) {
return
}
@ -913,6 +980,19 @@ export default {
value: 0
})
},
uploadProgressHandle() {
this.loading = this.$loading({
lock: true,
text: '上传中',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
},
closeUploadProgressHandle(){
setTimeout(() => {
this.loading.close();
}, 100);
},
addTreeItem() {
++this.idGlobal
this.dialogVisible = true
@ -924,12 +1004,12 @@ export default {
<span>{node.label}</span>
<span class="node-operation">
<i on-click={() => this.append(data)}
class="el-icon-plus"
title="添加"
class="el-icon-plus"
title="添加"
></i>
<i on-click={() => this.remove(node, data)}
class="el-icon-delete"
title="删除"
class="el-icon-delete"
title="删除"
></i>
</span>
</div>
@ -1076,6 +1156,7 @@ export default {
display: flex;
border: 1px dashed #fff;
box-sizing: border-box;
align-items: center;
& .close-btn {
cursor: pointer;
color: #f56c6c;

6
src/views/form/newIndex.vue
View File

@ -56,10 +56,10 @@ export default {
title: '逻辑',
icon: 'el-icon-menu',
route: '/project/form/logic'
}, {
title: '预览',
}, {
title: '外观',
icon: 'el-icon-view',
route: '/project/form/preview'
route: '/project/form/theme'
},
{
title: '设置',

5
src/views/form/publish.vue
View File

@ -75,7 +75,6 @@
<script>
import VueQr from 'vue-qr'
import {getCurrentDomain} from '@/utils'
export default {
name: 'ProjectPublish',
@ -145,9 +144,7 @@ export default {
return new Blob([uInt8Array], {type: contentType})
},
toFeedbackPageHandle() {
let currentDomain = getCurrentDomain()
let url = `${currentDomain}/project/form?key=${this.projectKey}&active=5`
window.location.href = url
this.$router.replace({path: '/project/form/statistics', query: {key: this.projectKey}})
}
}

5
src/views/form/statistics.vue
View File

@ -69,7 +69,7 @@
:with-header="false"
>
<el-scrollbar style="height: 100%;">
<el-card class="box-card">
<el-card class="detail-container">
<div slot="header" class="clearfix">
<span>提交详情</span>
</div>
@ -296,6 +296,9 @@ export default {
width: 80%;
margin: 6px auto;
}
.detail-container {
padding: 10px;
}
.filter-table-view {
width: 80%;
margin: 0 auto;

4
src/views/form/theme.vue
View File

@ -2,7 +2,7 @@
<div class="theme-container">
<el-row>
<el-col :span="5" :offset="1">
<el-scrollbar style="height: 77vh;">
<el-scrollbar>
<div class="left-container">
<p class="theme-title">外观主题</p>
<el-row>
@ -404,9 +404,9 @@ export default {
line-height: 20px;
border-radius: 7px;
text-align: center;
padding: 30px;
border: 1px solid rgba(255, 255, 255, 100);
background-color: white;
height: 90vh;
}
.style-btn {
line-height: 30px;

Write Preview
Loading…
Cancel
Save