增加图片选择，轮播组件

src/assets/styles/index.scss

@@ -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;

src/components/Form/ImageSelect/index.vue

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

src/components/Form/ImageSelect1/index.vue

@@ -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>
-

src/components/Form/index.js

@@ -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)
     }
 }

src/components/generator/config.js

@@ -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,
+        __slot__: {
             options: [{
-            label: '选项2',
+                label: '选项1',
                 value: 1
-        }, {
-            label: '选项二',
-            value: 2
-        }],
+            }]
+        },
         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'
-//     }
-// ]
-//

src/components/render/slots/el-carousel.js

@@ -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
+    }
+}

src/router/modules/form.js

@@ -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},

src/utils/convert.js

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

src/views/account/login.vue

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

src/views/form/RightPanel.vue

@@ -364,6 +364,64 @@
                         <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="数据类型">-->
@@ -567,8 +625,10 @@
                             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"
@@ -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>
@@ -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
@@ -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;

src/views/form/newIndex.vue

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

src/views/form/publish.vue

@@ -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}})
         }
     }
 

src/views/form/statistics.vue

@@ -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;

src/views/form/theme.vue

@@ -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;