From 559721bc55467d3664df2356d177278f98bd9948 Mon Sep 17 00:00:00 2001
From: wangqing <smalljop@foxmail.com>
Date: Thu, 13 May 2021 17:48:50 +0800
Subject: [PATCH] =?UTF-8?q?ui=E6=9B=B4=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Form/ImageSelect/index.vue  |   1 +
 src/components/Form/ImageSelect1/index.vue |  58 ++++++++++++
 src/components/Form/index.js               |   2 +
 src/components/generator/config.js         |  29 ++++++
 src/components/parser/Parser.vue           |   3 +-
 src/router/modules/form.js                 |   2 +-
 src/router/modules/root.js                 |  22 ++---
 src/store/modules/form.js                  |  34 +++++++
 src/views/form/PreView.vue                 |   7 +-
 src/views/form/editor.vue                  |  15 ++-
 src/views/form/logic.vue                   |   5 +-
 src/views/form/newIndex.vue                | 102 ++++++++++++---------
 src/views/form/publish.vue                 |   5 +-
 src/views/form/setting.vue                 |   4 +-
 src/views/form/statistics.vue              |   7 +-
 src/views/home/NewIndex.vue                |  13 ++-
 src/views/test.vue                         |   7 +-
 17 files changed, 236 insertions(+), 80 deletions(-)
 create mode 100644 src/components/Form/ImageSelect1/index.vue
 create mode 100644 src/store/modules/form.js

diff --git a/src/components/Form/ImageSelect/index.vue b/src/components/Form/ImageSelect/index.vue
index 67b3af0..17a9ee3 100644
--- a/src/components/Form/ImageSelect/index.vue
+++ b/src/components/Form/ImageSelect/index.vue
@@ -52,6 +52,7 @@ export default {
     methods: {
         onChange(e) {
             console.log(e)
+            console.log(JSON.stringify(this.options))
             this.$emit('change', e)
         }
     }
diff --git a/src/components/Form/ImageSelect1/index.vue b/src/components/Form/ImageSelect1/index.vue
new file mode 100644
index 0000000..334c670
--- /dev/null
+++ b/src/components/Form/ImageSelect1/index.vue
@@ -0,0 +1,58 @@
+<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>
+
diff --git a/src/components/Form/index.js b/src/components/Form/index.js
index 31fb11f..d326e2a 100644
--- a/src/components/Form/index.js
+++ b/src/components/Form/index.js
@@ -1,8 +1,10 @@
 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)
     }
 }
diff --git a/src/components/generator/config.js b/src/components/generator/config.js
index 225df4a..5ed558e 100644
--- a/src/components/generator/config.js
+++ b/src/components/generator/config.js
@@ -539,6 +539,35 @@ export const imageComponents = [
         src: '',
         fit: 'contain',
         alt: ''
+    },
+    {
+        typeId: 'IMAGE',
+        __config__: {
+            label: '图片选择',
+            showLabel: false,
+            labelWidth: null,
+            defaultValue: 1,
+            showDefaultValue: false,
+            showRequired: false,
+            showClearable: false,
+            showRegList: false,
+            tag: 'image-select',
+            tagIcon: 'image',
+            layout: 'colFormItem',
+            span: 24,
+            required: true,
+            regList: [],
+            changeTag: true
+        },
+        multiple: false,
+        options: [{
+            label: '选项2',
+            value: 1
+        }, {
+            label: '选项二',
+            value: 2
+        }],
+        style: {width: '100%'}
     }
 ]
 
diff --git a/src/components/parser/Parser.vue b/src/components/parser/Parser.vue
index 5fe9a44..89bffa9 100644
--- a/src/components/parser/Parser.vue
+++ b/src/components/parser/Parser.vue
@@ -85,7 +85,8 @@ function renderFrom(h) {
     )
 }
 
-function formBtns() {
+// eslint-disable-next-line no-unused-vars
+function formBtns(h) {
     const {formConfCopy} = this
     let style = {
         'background-color': formConfCopy.submitBtnColor,
diff --git a/src/router/modules/form.js b/src/router/modules/form.js
index e70ea39..6507d4c 100644
--- a/src/router/modules/form.js
+++ b/src/router/modules/form.js
@@ -1,6 +1,6 @@
 export default [
     {
-        path: '/form1',
+        path: '/project/form',
         meta: {requireLogin: false},
         component: () => import(/* webpackChunkName: 'root' */ '@/views/form/newIndex.vue'),
         children: [
diff --git a/src/router/modules/root.js b/src/router/modules/root.js
index 94a65b2..88c635b 100644
--- a/src/router/modules/root.js
+++ b/src/router/modules/root.js
@@ -51,15 +51,15 @@ export default [
             }
         ]
     },
-    {
-        path: '/home1',
-        meta: {requireLogin: false},
-        component: () => import(/* webpackChunkName: 'root' */ '@/views/home/NewIndex')
-    },
+    // {
+    //     path: '/home1',
+    //     meta: {requireLogin: false},
+    //     component: () => import(/* webpackChunkName: 'root' */ '@/views/home/NewIndex')
+    // },
     {
         path: '/home',
         meta: {requireLogin: true},
-        component: () => import(/* webpackChunkName: 'root' */ '@/views/home/index.vue'),
+        component: () => import(/* webpackChunkName: 'root' */ '@/views/home/NewIndex'),
         children: [
             {
                 path: '/',
@@ -96,12 +96,12 @@ export default [
                 path: 'template/preview',
                 meta: {requireLogin: true},
                 component: () => import(/* webpackChunkName: 'root' */ '@/views/project/TemplatePreview.vue')
-            },
-            {
-                path: 'form',
-                meta: {requireLogin: true},
-                component: () => import(/* webpackChunkName: 'root' */ '@/views/form/index.vue')
             }
+            // {
+            //     path: 'form',
+            //     meta: {requireLogin: true},
+            //     component: () => import(/* webpackChunkName: 'root' */ '@/views/form/index.vue')
+            // }
         ]
     }, {
         path: '/project/preview',
diff --git a/src/store/modules/form.js b/src/store/modules/form.js
new file mode 100644
index 0000000..9eaeee7
--- /dev/null
+++ b/src/store/modules/form.js
@@ -0,0 +1,34 @@
+const state = {
+    // 是否折叠
+    isCollapse: false
+}
+
+const getters = {
+    isCollapse: state => {
+        return state.isCollapse
+    }
+}
+
+const actions = {
+    setIsCollapse(context, payload) {
+        return new Promise(resolve => {
+            // 模拟登录成功，写入 token 信息
+            context.commit('setIsCollapse', payload)
+            resolve()
+        })
+    }
+}
+
+const mutations = {
+    setIsCollapse(state, status) {
+        state.isCollapse = status
+    }
+}
+
+export default {
+    namespaced: true,
+    state,
+    actions,
+    getters,
+    mutations
+}
diff --git a/src/views/form/PreView.vue b/src/views/form/PreView.vue
index b739465..c6a4dec 100644
--- a/src/views/form/PreView.vue
+++ b/src/views/form/PreView.vue
@@ -40,11 +40,9 @@ export default {
     components: {
         ProjectForm
     },
-    props: {
-        projectKey: null
-    },
     data() {
         return {
+            projectKey: null,
             mobilePreviewUrl: '',
             projectConfig: {
                 projectKey: '',
@@ -53,6 +51,7 @@ export default {
         }
     },
     mounted() {
+        this.projectKey = this.$route.query.key
         let url = window.location.protocol + '//' + window.location.host
         this.mobilePreviewUrl = `${url}/project/view?key=${this.projectKey}`
         this.$set(this.projectConfig, 'projectKey', this.projectKey)
@@ -64,7 +63,7 @@ export default {
 
 .preview-container {
     margin: 0;
-    padding: 0;
+    padding-top: 30px;
     background-color: #f7f7f7;
 }
 /deep/ .el-tabs__header {
diff --git a/src/views/form/editor.vue b/src/views/form/editor.vue
index 6f15c6f..a57bcad 100644
--- a/src/views/form/editor.vue
+++ b/src/views/form/editor.vue
@@ -5,7 +5,7 @@
                 <div class="components-list">
                     <div v-for="(item, listIndex) in leftComponents" :key="listIndex">
                         <div class="components-title">
-                            <svg-icon name="component"/>
+                            <svg-icon name="component" />
                             {{ item.title }}
                         </div>
                         <draggable
@@ -24,7 +24,7 @@
                                 @click="addComponent(element)"
                             >
                                 <div class="components-body">
-                                    <svg-icon :name="element.__config__.tagIcon"/>
+                                    <svg-icon :name="element.__config__.tagIcon" />
                                     {{ element.__config__.label }}
                                 </div>
                             </div>
@@ -64,7 +64,7 @@
                             <!--                            </p>-->
                         </el-col>
                     </el-row>
-                    <el-divider/>
+                    <el-divider />
                     <el-form
                         :disabled="formConf.disabled"
                         :label-position="formConf.labelPosition"
@@ -128,11 +128,9 @@ export default {
         RightPanel,
         DraggableItem
     },
-    props: {
-        projectKey: null
-    },
     data() {
         return {
+
             idGlobal,
             formConf: null,
             editDescription: true,
@@ -149,6 +147,7 @@ export default {
             activeData: drawingDefalut ? drawingDefalut[0] : null,
             saveDrawingListDebounce: debounce(340, saveDrawingList),
             saveIdGlobalDebounce: debounce(340, saveIdGlobal),
+            projectKey: null,
             leftComponents: [
                 {
                     title: '输入型组件',
@@ -204,11 +203,11 @@ export default {
         // 复制对象 避免修改改变原始对象
         this.formConf = JSON.parse(JSON.stringify(formConf))
         // 项目key
-        let projectKey = this.projectKey
+        this.projectKey = this.$route.query.key
         // 从服务端获取
         this.queryProjectItems()
         // 获取表单配置
-        this.$api.get(`/user/project/${projectKey}`).then(res => {
+        this.$api.get(`/user/project/${this.projectKey}`).then(res => {
             this.formConf.title = res.data.name
             this.formConf.description = res.data.describe
         })
diff --git a/src/views/form/logic.vue b/src/views/form/logic.vue
index ee6c2b9..96f96e3 100644
--- a/src/views/form/logic.vue
+++ b/src/views/form/logic.vue
@@ -134,11 +134,9 @@ import {jsonSimpleClone} from '@/utils/index'
 export default {
     name: 'ProjectLogic',
     components: {},
-    props: {
-        projectKey: null
-    },
     data() {
         return {
+            projectKey: '',
             // 默认逻辑项
             defaultLogicItem: {
                 formItemId: null,
@@ -198,6 +196,7 @@ export default {
         }
     },
     mounted() {
+        this.projectKey = this.$route.query.key
         this.queryProjectItems()
         this.queryProjectLogics()
     },
diff --git a/src/views/form/newIndex.vue b/src/views/form/newIndex.vue
index afcf439..e43a667 100644
--- a/src/views/form/newIndex.vue
+++ b/src/views/form/newIndex.vue
@@ -2,8 +2,8 @@
     <div class="form-index-container">
         <el-card class="header-container">
             <el-row align="middle" type="flex">
-                <el-col :offset="1" :span="1">
-                    <i class="el-icon-back" />
+                <el-col :span="2">
+                    <i class="el-icon-back" @click="$router.back(-1)" />
                 </el-col>
                 <el-col :span="3">
                     <img class="header-logo" src="@/assets/images/indexLogo.png" @click="$router.push({path:'/home'})">
@@ -14,50 +14,21 @@
                 <el-col :span="2">
                     <el-button type="success">保存为模板</el-button>
                 </el-col>
-                <el-col :span="1">
-                    <el-button plain type="primary">主题</el-button>
-                </el-col>
-                <el-col :span="1">
-                    <el-button plain type="success">设置</el-button>
-                </el-col>
-                <el-col :span="1">
-                    <el-button plain type="info">逻辑</el-button>
-                </el-col>
-                <el-col :span="1">
-                    <el-button plain type="warning">统计</el-button>
-                </el-col>
             </el-row>
         </el-card>
         <div class="main-container">
             <div class="left-menu-container">
-                <el-menu :collapse="isCollapse" class="el-menu-vertical" :router="true" default-active="editor">
-                    <el-menu-item index="editor">
-                        <i class="el-icon-edit" />
-                        <span slot="title">编辑</span>
-                    </el-menu-item>
-                    <el-menu-item index="logic">
-                        <i class="el-icon-menu" />
-                        <span slot="title">逻辑</span>
-                    </el-menu-item>
-                    <el-menu-item index="preview">
-                        <i class="el-icon-view" />
-                        <span slot="title">预览</span>
-                    </el-menu-item>
-                    <el-menu-item index="setting">
-                        <i class="el-icon-video-play" />
-                        <span slot="title">发布</span>
-                    </el-menu-item>
-                    <el-menu-item index="setting">
-                        <i class="el-icon-setting" />
-                        <span slot="title">设置</span>
-                    </el-menu-item>
-                    <el-menu-item index="statistics">
-                        <i class="el-icon-data-line" />
-                        <span slot="title">统计</span>
+                <el-menu :collapse="isCollapse" class="el-menu-vertical"
+                         :default-active="defaultActiveMenu"
+                         @select="menuSelectHandle"
+                >
+                    <el-menu-item v-for="menuItem in menuItemList" :key="menuItem.route" :index="menuItem.route">
+                        <i :class="menuItem.icon" />
+                        <span slot="title">{{ menuItem.title }}</span>
                     </el-menu-item>
                 </el-menu>
-                <i v-if="!isCollapse" class="el-icon-d-arrow-left" @click="isCollapse=!isCollapse" />
-                <i v-else class="el-icon-d-arrow-right" @click="isCollapse=!isCollapse" />
+                <i v-if="!isCollapse" class="el-icon-d-arrow-left" @click="collapseHandle" />
+                <i v-else class="el-icon-d-arrow-right" @click="collapseHandle" />
             </div>
             <div class="right-content-container">
                 <router-view />
@@ -72,7 +43,55 @@ export default {
     components: {},
     data() {
         return {
-            isCollapse: false
+            defaultActiveMenu: 'editor',
+            projectKey: null,
+            isCollapse: false,
+            menuItemList: [
+                {
+                    title: '编辑',
+                    icon: 'el-icon-edit',
+                    route: '/project/form/editor'
+                },
+                {
+                    title: '逻辑',
+                    icon: 'el-icon-menu',
+                    route: '/project/form/logic'
+                }, {
+                    title: '预览',
+                    icon: 'el-icon-view',
+                    route: '/project/form/preview'
+                },
+                {
+                    title: '设置',
+                    icon: 'el-icon-setting',
+                    route: '/project/form/setting'
+                },
+                {
+                    title: '发布',
+                    icon: 'el-icon-video-play',
+                    route: '/project/form/publish'
+                }, {
+                    title: '统计',
+                    icon: 'el-icon-data-line',
+                    route: '/project/form/statistics'
+                }
+            ]
+        }
+    },
+    created() {
+        this.projectKey = this.$route.query.key
+        this.defaultActiveMenu = this.$route.path
+        this.isCollapse = this.$store.state.form.isCollapse
+    },
+    methods: {
+        menuSelectHandle(index) {
+            this.$router.replace({path: index, query: {key: this.projectKey}})
+        },
+        collapseHandle() {
+            let isCollapse = !this.isCollapse
+            this.$store.dispatch('form/setIsCollapse', isCollapse).then(() => {
+                this.isCollapse = isCollapse
+            })
         }
     }
 }
@@ -98,6 +117,7 @@ export default {
         font-weight: 550;
         cursor: pointer;
         color: #000;
+        margin-left: 40px;
         &:hover {
             color: rgb(32, 160, 255);
         }
diff --git a/src/views/form/publish.vue b/src/views/form/publish.vue
index e5e1ac5..ed4d3e4 100644
--- a/src/views/form/publish.vue
+++ b/src/views/form/publish.vue
@@ -82,17 +82,16 @@ export default {
     components: {
         VueQr
     },
-    props: {
-        projectKey: null
-    },
     data() {
         return {
             publishStatus: false,
+            projectKey: null,
             writeLink: '',
             qrCodeUrl: ''
         }
     },
     mounted() {
+        this.projectKey = this.$route.query.key
         let url = window.location.protocol + '//' + window.location.host
         this.writeLink = `${url}/s/${this.projectKey}`
         this.getProjectStatus()
diff --git a/src/views/form/setting.vue b/src/views/form/setting.vue
index 3effe3f..6a15827 100644
--- a/src/views/form/setting.vue
+++ b/src/views/form/setting.vue
@@ -713,8 +713,8 @@ export default {
     width: 100%;
     height: 100%;
     min-height: 85vh;
-    padding: 0;
-    margin: 10px 0 0 0;
+    padding-top: 30px;
+    margin: 0;
     background-color: #f7f7f7;
 }
 .project-setting-view {
diff --git a/src/views/form/statistics.vue b/src/views/form/statistics.vue
index 73d0dfe..3a40799 100644
--- a/src/views/form/statistics.vue
+++ b/src/views/form/statistics.vue
@@ -155,11 +155,9 @@ const fixedDefaultLabelFormColumn = {serialNumber: '提交序号', submitAddress
 export default {
     name: 'ProjectStatistics',
     components: {},
-    props: {
-        projectKey: null
-    },
     data() {
         return {
+            projectKey: null,
             customColumnDialogVisible: false,
             // 固定自定义列 如序号等
             fixedCustomColumns: fixedDefaultFormColumn,
@@ -187,6 +185,7 @@ export default {
         }
     },
     mounted() {
+        this.projectKey = this.$route.query.key
         this.queryConditions.projectKey = this.projectKey
         this.queryProjectResult()
         this.queryProjectItems()
@@ -280,7 +279,7 @@ export default {
 .statistics-container {
     width: 100%;
     height: 100%;
-    padding: 0;
+    padding-top: 30px;
     min-height: 85vh;
     background-color: #f7f7f7;
 }
diff --git a/src/views/home/NewIndex.vue b/src/views/home/NewIndex.vue
index de15d72..23ae18f 100644
--- a/src/views/home/NewIndex.vue
+++ b/src/views/home/NewIndex.vue
@@ -38,7 +38,7 @@
                 </div>
             </div>
             <div class="right-container">
-                <el-button type="primary">新建项目</el-button>
+                <el-button type="primary" @click="createBlankTemplate">新建项目</el-button>
                 <el-button>新建项目</el-button>
                 <my-project />
             </div>
@@ -52,11 +52,22 @@
 
 <script>
 import MyProject from '@/views/project/MyProject'
+import {formConf} from '@/components/generator/config'
 
 export default {
     name: 'NewIndex',
     components: {
         MyProject
+    }, methods: {
+        createBlankTemplate() {
+            this.$api.post('/user/project/create', {
+                'describe': formConf.description,
+                'name': formConf.title
+            }).then(res => {
+                console.log(res)
+                this.$router.push({path: '/project/form', query: {key: res.data}})
+            })
+        }
     }
 }
 </script>
diff --git a/src/views/test.vue b/src/views/test.vue
index 558b94c..93b11a1 100644
--- a/src/views/test.vue
+++ b/src/views/test.vue
@@ -1,6 +1,11 @@
 <template>
     <div>
-        <image-select v-model="radio" :options="options" :multiple="true" />
+        <image-select v-model="radio" :options="options" :multiple="false" />
+        <el-radio-group v-model="radio">
+            <el-radio :label="3">备选项</el-radio>
+            <el-radio :label="6">备选项</el-radio>
+            <el-radio :label="9">备选项</el-radio>
+        </el-radio-group>
     </div>
 </template>