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
Unified 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. 200
      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. 87
      src/views/form/RightPanel.vue
  11. 4
      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 { .flex-row {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
box-sizing: border-box;
} }
.flex-column { .flex-column {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
box-sizing: border-box;
} }
.desc-text { .desc-text {
color: rgba(155, 155, 155, 100); color: rgba(155, 155, 155, 100);
font-size: 14px; font-size: 14px;
text-align: left; text-align: left;
} }
.width-full {
width: 100% !important;
}
.text-overflow { .text-overflow {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;

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

@ -82,6 +82,7 @@ export default {
.el-radio-group, .el-radio-group,
.el-checkbox-group { .el-checkbox-group {
display: flex !important; display: flex !important;
flex-wrap: wrap;
} }
.img-radio-item { .img-radio-item {
display: flex; 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 ImageSelect = require('./ImageSelect/index').default
const ImageSelect1 = require('./ImageSelect1/index').default
const DescText = require('./DescText/index').default const DescText = require('./DescText/index').default
export default { export default {
install: Vue => { install: Vue => {
Vue.component(ImageSelect.name, ImageSelect) Vue.component(ImageSelect.name, ImageSelect)
Vue.component(ImageSelect1.name, ImageSelect1)
Vue.component(DescText.name, DescText) Vue.component(DescText.name, DescText)
} }
} }

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

@ -80,38 +80,6 @@ export const inputComponents = [
readonly: false, readonly: false,
disabled: 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', typeId: 'NUMBER_INPUT',
__config__: { __config__: {
@ -224,6 +192,7 @@ export const selectComponents = [
label: '单选框组', label: '单选框组',
labelWidth: null, labelWidth: null,
showLabel: true, showLabel: true,
showRegList: false,
tag: 'el-radio-group', tag: 'el-radio-group',
tagIcon: 'radio', tagIcon: 'radio',
changeTag: true, changeTag: true,
@ -258,6 +227,7 @@ export const selectComponents = [
defaultValue: [], defaultValue: [],
span: 24, span: 24,
showLabel: true, showLabel: true,
showRegList: false,
labelWidth: null, labelWidth: null,
layout: 'colFormItem', layout: 'colFormItem',
optionType: 'default', optionType: 'default',
@ -290,6 +260,7 @@ export const selectComponents = [
tagIcon: 'switch', tagIcon: 'switch',
defaultValue: false, defaultValue: false,
span: 24, span: 24,
showRegList: false,
showLabel: true, showLabel: true,
labelWidth: null, labelWidth: null,
layout: 'colFormItem', layout: 'colFormItem',
@ -314,6 +285,7 @@ export const selectComponents = [
tag: 'el-slider', tag: 'el-slider',
tagIcon: 'slider', tagIcon: 'slider',
defaultValue: null, defaultValue: null,
showRegList: false,
span: 24, span: 24,
showLabel: true, showLabel: true,
layout: 'colFormItem', layout: 'colFormItem',
@ -339,6 +311,7 @@ export const selectComponents = [
defaultValue: null, defaultValue: null,
span: 24, span: 24,
showLabel: true, showLabel: true,
showRegList: false,
layout: 'colFormItem', layout: 'colFormItem',
labelWidth: null, labelWidth: null,
required: true, required: true,
@ -414,6 +387,7 @@ export const selectComponents = [
tag: 'el-date-picker', tag: 'el-date-picker',
tagIcon: 'date-range', tagIcon: 'date-range',
defaultValue: null, defaultValue: null,
showRegList: false,
span: 24, span: 24,
showLabel: true, showLabel: true,
labelWidth: null, labelWidth: null,
@ -443,6 +417,7 @@ export const selectComponents = [
defaultValue: 0, defaultValue: 0,
span: 24, span: 24,
showLabel: true, showLabel: true,
showRegList: false,
labelWidth: null, labelWidth: null,
layout: 'colFormItem', layout: 'colFormItem',
required: true, required: true,
@ -466,6 +441,7 @@ export const selectComponents = [
span: 24, span: 24,
defaultValue: null, defaultValue: null,
showLabel: true, showLabel: true,
showRegList: false,
labelWidth: null, labelWidth: null,
layout: 'colFormItem', layout: 'colFormItem',
required: true, required: true,
@ -487,6 +463,7 @@ export const selectComponents = [
layout: 'colFormItem', layout: 'colFormItem',
defaultValue: null, defaultValue: null,
showLabel: true, showLabel: true,
showRegList: false,
labelWidth: null, labelWidth: null,
required: true, required: true,
span: 24, span: 24,
@ -541,16 +518,43 @@ export const imageComponents = [
alt: '' alt: ''
}, },
{ {
typeId: 'IMAGE', typeId: 'IMAGE_CAROUSEL',
__config__: { __config__: {
label: '图片选择', label: '图片轮播',
showLabel: false, showLabel: true,
labelWidth: null, labelWidth: null,
defaultValue: 1, defaultValue: null,
showDefaultValue: false, showDefaultValue: false,
showRequired: false, showRequired: false,
showClearable: false, showClearable: false,
showRegList: 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', tag: 'image-select',
tagIcon: 'image', tagIcon: 'image',
layout: 'colFormItem', layout: 'colFormItem',
@ -560,128 +564,12 @@ export const imageComponents = [
changeTag: true changeTag: true
}, },
multiple: false, multiple: false,
__slot__: {
options: [{ options: [{
label: '选项2', label: '选项1',
value: 1 value: 1
}, { }]
label: '选项二', },
value: 2
}],
style: {width: '100%'} 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}, meta: {requireLogin: true},
component: () => import(/* webpackChunkName: 'root' */ '@/views/form/publish') component: () => import(/* webpackChunkName: 'root' */ '@/views/form/publish')
}, },
{
path: 'theme',
meta: {requireLogin: true},
component: () => import(/* webpackChunkName: 'root' */ '@/views/form/theme')
},
{ {
path: 'statistics', path: 'statistics',
meta: {requireLogin: true}, meta: {requireLogin: true},

9
src/utils/convert.js
View File

@ -168,6 +168,15 @@ const dataParams = {
'IMAGE': { 'IMAGE': {
'src': 'src', 'src': 'src',
'alt': 'alt' '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 { .code-input {
width: 150px; width: 150px;
} }
.width-full {
width: 100%;
}
.account-login-form { .account-login-form {
text-align: left; text-align: left;
} }

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

@ -364,6 +364,64 @@
<el-divider/> <el-divider/>
</template> </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"> <template v-if="['el-cascader'].indexOf(activeData.__config__.tag) > -1">
<el-divider>选项</el-divider> <el-divider>选项</el-divider>
<!-- <el-form-item label="数据类型">--> <!-- <el-form-item label="数据类型">-->
@ -567,8 +625,10 @@
style="text-align: center;" style="text-align: center;"
accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP" accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP"
:headers="getUploadHeader" :headers="getUploadHeader"
:on-progress="uploadProgressHandle"
:on-success="(response, file, fileList)=>{ :on-success="(response, file, fileList)=>{
activeData.src = response.data activeData.src = response.data
closeUploadProgressHandle()
}" }"
:action="getUploadUrl" :action="getUploadUrl"
:show-file-list="false" :show-file-list="false"
@ -594,7 +654,8 @@
> >
<span slot-scope="{ node, data }"> <span slot-scope="{ node, data }">
<span class="node-label"> <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 }} {{ node.label }}
</span> </span>
</span> </span>
@ -724,6 +785,7 @@ export default {
props: ['showField', 'activeData', 'formConf'], props: ['showField', 'activeData', 'formConf'],
data() { data() {
return { return {
loading:null,
currentTab: 'field', currentTab: 'field',
currentNode: null, currentNode: null,
dialogVisible: false, dialogVisible: false,
@ -894,17 +956,22 @@ export default {
}) })
}, },
addSelectItem() { addSelectItem() {
this.activeData.__slot__.options.push({ this.activeData.__slot__.options.push({
label: '', label: '',
value: this.activeData.__slot__.options.length + 1 value: this.activeData.__slot__.options.length + 1
}) })
}, },
addImageSelectItem() {
this.activeData.__slot__.options.push({
label: '',
image: '',
value: this.activeData.__slot__.options.length + 1
})
},
addSelectOtherItem() { addSelectOtherItem() {
let item = this.activeData.__slot__.options.find(item => { let item = this.activeData.__slot__.options.find(item => {
return item.value == 0 return item.value == 0
}) })
console.log(item)
if (item) { if (item) {
return return
} }
@ -913,6 +980,19 @@ export default {
value: 0 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() { addTreeItem() {
++this.idGlobal ++this.idGlobal
this.dialogVisible = true this.dialogVisible = true
@ -1076,6 +1156,7 @@ export default {
display: flex; display: flex;
border: 1px dashed #fff; border: 1px dashed #fff;
box-sizing: border-box; box-sizing: border-box;
align-items: center;
& .close-btn { & .close-btn {
cursor: pointer; cursor: pointer;
color: #f56c6c; color: #f56c6c;

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

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

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

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

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

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

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

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

Write Preview
Loading…
Cancel
Save