From 8e4e56fdf85a6b03b0f37ad2dbb9b7553101ab2b Mon Sep 17 00:00:00 2001
From: wangqing <250543222@qq.com>
Date: Sun, 11 Apr 2021 22:00:52 +0800
Subject: [PATCH] fix

---
 src/api/index.js                 |  5 +++
 src/assets/styles/form/home.scss | 54 ++++++++++++++++++++++++++++++--
 src/views/form/RightPanel.vue    | 10 ++++--
 src/views/form/editor.vue        | 25 ++++++++-------
 src/views/form/logic.vue         |  8 ++---
 src/views/project/create.vue     | 32 +++++++++----------
 6 files changed, 96 insertions(+), 38 deletions(-)

diff --git a/src/api/index.js b/src/api/index.js
index 33cbc3e..0bba539 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -92,6 +92,11 @@ api.interceptors.response.use(
         return Promise.resolve(res)
     },
     error => {
+        Message({
+            message: '服务开小差了，请稍后再试',
+            type: 'error',
+            duration: 5 * 1000
+        })
         return Promise.reject(error)
     }
 )
diff --git a/src/assets/styles/form/home.scss b/src/assets/styles/form/home.scss
index 5d71f79..80dd48a 100644
--- a/src/assets/styles/form/home.scss
+++ b/src/assets/styles/form/home.scss
@@ -7,10 +7,12 @@ $lighterBlue: #e4efff;
     overflow-y: hidden;
     font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
 }
+
 .components-list {
     padding: 8px;
     box-sizing: border-box;
     height: 100%;
+
     .components-item {
         display: inline-block;
         width: 48%;
@@ -18,18 +20,22 @@ $lighterBlue: #e4efff;
         transition: transform 0ms !important;
     }
 }
+
 .components-draggable {
     padding-bottom: 20px;
 }
+
 .components-title {
     font-size: 14px;
     color: #222;
     margin: 6px 2px;
+
     .svg-icon {
         color: #666;
         font-size: 18px;
     }
 }
+
 .components-body {
     padding: 8px 10px;
     background: $selectedColor;
@@ -37,18 +43,22 @@ $lighterBlue: #e4efff;
     cursor: move;
     border: 1px dashed $selectedColor;
     border-radius: 3px;
+
     .svg-icon {
         color: #777;
         font-size: 15px;
     }
+
     &:hover {
         border: 1px dashed #4144f8;
         color: #4480f5;
+
         .svg-icon {
             color: #4144f8;
         }
     }
 }
+
 .left-board {
     width: 260px;
     position: absolute;
@@ -57,35 +67,39 @@ $lighterBlue: #e4efff;
     height: 100vh;
 
 }
+
 .el-menu.el-menu--horizontal {
     border-bottom: none;
 }
+
 .left-scrollbar {
     height: calc(100vh - 290px);
     overflow: hidden;
     margin: 5px;
     border-radius: 7px;
     background-color: rgba(255, 255, 255, 100);
-    //text-align: center;
-    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.4);
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
     border: 1px solid rgba(255, 255, 255, 100);
 }
+
 .center-scrollbar {
     height: calc(100vh - 230px);
     overflow: hidden;
-    width: 80%;
+    width: 90%;
     margin: 20px auto 0;
     box-sizing: border-box;
     background-color: rgb(255, 255, 255);
     border: 2px solid rgba(255, 255, 255, 100);
     overflow-y: hidden;
 }
+
 .center-board {
     height: calc(100vh - 220px);
     width: auto;
     margin: 0 350px 80px 260px;
     box-sizing: border-box;
 }
+
 .empty-info {
     position: absolute;
     top: 46%;
@@ -96,6 +110,7 @@ $lighterBlue: #e4efff;
     color: #0067f3;
     letter-spacing: 4px;
 }
+
 .action-bar {
     position: relative;
     height: 42px;
@@ -105,31 +120,38 @@ $lighterBlue: #e4efff;
     border: 1px solid #f1e8e8;
     border-top: none;
     border-left: none;
+
     .delete-btn {
         color: #f56c6c;
     }
 }
+
 .center-board-row {
     padding: 12px 12px 15px 12px;
     box-sizing: border-box;
     overflow-y: hidden;
+
     & > .el-form {
         // 69 = 12+15+42
         height: calc(100vh - 69px);
     }
 }
+
 .drawing-board {
     height: 100%;
     position: relative;
+
     .components-body {
         padding: 0;
         margin: 0;
         font-size: 0;
     }
+
     .sortable-ghost {
         position: relative;
         display: block;
         overflow: hidden;
+
         &::before {
             content: " ";
             position: absolute;
@@ -141,38 +163,47 @@ $lighterBlue: #e4efff;
             z-index: 2;
         }
     }
+
     .components-item.sortable-ghost {
         width: 100%;
         height: 60px;
         background-color: $selectedColor;
     }
+
     .active-from-item {
         & > .el-form-item {
             background: $selectedColor;
             border-radius: 6px;
         }
+
         & > .drawing-item-copy,
         & > .drawing-item-delete {
             display: initial;
         }
+
         & > .component-name {
             color: $lighterBlue;
         }
     }
+
     .el-form-item {
         margin-bottom: 15px;
     }
 }
+
 .drawing-item {
     position: relative;
     cursor: move;
+
     &.unfocus-bordered:not(.active-from-item) > div:first-child {
         border: 1px dashed #ccc;
     }
+
     .el-form-item {
         padding: 12px 10px;
     }
 }
+
 .drawing-row-item {
     position: relative;
     cursor: move;
@@ -181,21 +212,27 @@ $lighterBlue: #e4efff;
     border-radius: 3px;
     padding: 0 2px;
     margin-bottom: 15px;
+
     .drawing-row-item {
         margin-bottom: 2px;
     }
+
     .el-col {
         margin-top: 22px;
     }
+
     .el-form-item {
         margin-bottom: 0;
     }
+
     .drag-wrapper {
         min-height: 80px;
     }
+
     &.active-from-item {
         border: 1px dashed $lighterBlue;
     }
+
     .component-name {
         position: absolute;
         top: 0;
@@ -206,6 +243,7 @@ $lighterBlue: #e4efff;
         padding: 0 6px;
     }
 }
+
 .drawing-item,
 .drawing-row-item {
     &:hover {
@@ -213,11 +251,13 @@ $lighterBlue: #e4efff;
             background: $selectedColor;
             border-radius: 6px;
         }
+
         & > .drawing-item-copy,
         & > .drawing-item-delete {
             display: initial;
         }
     }
+
     & > .drawing-item-copy,
     & > .drawing-item-delete {
         display: none;
@@ -233,40 +273,48 @@ $lighterBlue: #e4efff;
         cursor: pointer;
         z-index: 1;
     }
+
     & > .drawing-item-copy {
         right: 56px;
         border-color: $lighterBlue;
         color: $lighterBlue;
         background: #fff;
+
         &:hover {
             background: $lighterBlue;
             color: #fff;
         }
     }
+
     & > .drawing-item-delete {
         right: 24px;
         border-color: #f56c6c;
         color: #f56c6c;
         background: #fff;
+
         &:hover {
             background: #f56c6c;
             color: #fff;
         }
     }
 }
+
 .form-name-text:hover {
     border: 1px dashed #7b7b7b;
 }
+
 .form-name-text {
     padding: 6px 10px;
     border: 1px dashed transparent;
     line-height: 30px;
     margin: 0;
 }
+
 .form-name-text input {
     border: none;
     background-color: transparent;
 }
+
 [contenteditable]:focus {
     outline: none;
     background-color: #f4f4f4;
diff --git a/src/views/form/RightPanel.vue b/src/views/form/RightPanel.vue
index d7117ba..ff30c05 100644
--- a/src/views/form/RightPanel.vue
+++ b/src/views/form/RightPanel.vue
@@ -526,7 +526,7 @@
                     <el-form-item v-if="activeData.__config__.tag === 'el-cascader'" label="可否筛选">
                         <el-switch v-model="activeData.filterable"/>
                     </el-form-item>
-                    <el-form-item v-if="activeData.clearable !== undefined&&showClearable" label="能否清空">
+                    <el-form-item v-if="activeData.clearable !== undefined" label="能否清空">
                         <el-switch v-model="activeData.clearable"/>
                     </el-form-item>
                     <el-form-item v-if="activeData.__config__.showTip !== undefined" label="显示提示">
@@ -565,7 +565,7 @@
                             }"
                             :action="getUploadUrl"
                             :show-file-list="false">
-                            <el-button slot="trigger"  size="small" type="text">点击上传图片 *</el-button>
+                            <el-button slot="trigger" size="small" type="text">点击上传图片 *</el-button>
                         </el-upload>
                     </el-form-item>
                     <el-form-item
@@ -683,6 +683,7 @@ import TreeNodeDialog from '@/views/form/TreeNodeDialog'
 import {isNumberStr} from '@/utils/index'
 import IconsDialog from './IconsDialog'
 import {
+    imageComponents,
     inputComponents, selectComponents
 } from '@/components/generator/config'
 import DraggableItem from './DraggableItem'
@@ -825,6 +826,10 @@ export default {
                     label: '输入型组件',
                     options: inputComponents
                 },
+                {
+                    label: '图片型组件',
+                    options: imageComponents
+                },
                 {
                     label: '选择型组件',
                     options: selectComponents
@@ -1046,6 +1051,7 @@ export default {
     top: 0;
     padding-top: 3px;
     background-color: #FFFFFF;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
 
     .field-box {
         position: relative;
diff --git a/src/views/form/editor.vue b/src/views/form/editor.vue
index 36b035c..2a0cbed 100644
--- a/src/views/form/editor.vue
+++ b/src/views/form/editor.vue
@@ -67,8 +67,7 @@
                         :size="formConf.size"
                         :label-position="formConf.labelPosition"
                         :disabled="formConf.disabled"
-                        :label-width="formConf.labelWidth + 'px'"
-                    >
+                        :label-width="formConf.labelWidth + 'px'">
                         <draggable class="drawing-board" :list="drawingList" :animation="340" group="componentsGroup"
                                    @end="onItemEnd">
                             <draggable-item
@@ -245,11 +244,15 @@ export default {
 
             })
         },
-        saveProjectItemInfo(item) {
+        async saveProjectItemInfo(item) {
+            let isSuccess = false
             let params = formItemConvertData(item, this.projectKey)
-            this.$api.post('/user/project/item/create', params).then(res => {
-                item.sort = res.data.sort
+            let pItem = item
+            await this.$api.post('/user/project/item/create', params).then(res => {
+                pItem.sort = res.data.sort
+                isSuccess = true
             })
+            return isSuccess
         },
         queryProjectItems() {
             this.$api.get(`/user/project/item/list`, {params: {key: this.projectKey}}).then(res => {
@@ -268,8 +271,10 @@ export default {
             if (obj.from !== obj.to) {
                 this.activeData = tempActiveData
                 this.activeId = this.idGlobal
+                this.saveProjectItemInfo(tempActiveData).then(res => {
+                    this.onItemEnd(obj)
+                })
             }
-            this.onItemEnd(obj)
         },
         onItemEnd(obj) {
             let params = {'projectKey': this.projectKey}
@@ -288,19 +293,17 @@ export default {
         },
         addComponent(item) {
             const clone = this.cloneComponent(item)
+            this.saveProjectItemInfo(clone)
             this.drawingList.push(clone)
             this.activeFormItem(clone)
         },
-        cloneComponent(origin, save = true) {
+        cloneComponent(origin) {
             const clone = deepClone(origin)
             const config = clone.__config__
             config.span = this.formConf.span // 生成代码时，会根据span做精简判断
             this.createIdAndKey(clone)
             clone.placeholder !== undefined && (clone.placeholder += config.label)
             tempActiveData = clone
-            if (save) {
-                this.saveProjectItemInfo(clone)
-            }
             return tempActiveData
         },
         createIdAndKey(item) {
@@ -347,7 +350,7 @@ export default {
             this.deleteProjectItemInfo(item)
         },
         tagChange(newTag) {
-            newTag = this.cloneComponent(newTag, false)
+            newTag = this.cloneComponent(newTag)
             const config = newTag.__config__
             newTag.__vModel__ = this.activeData.__vModel__
             newTag.sort = this.activeData.sort
diff --git a/src/views/form/logic.vue b/src/views/form/logic.vue
index 5ee351b..9be11df 100644
--- a/src/views/form/logic.vue
+++ b/src/views/form/logic.vue
@@ -24,14 +24,14 @@
                     </el-row>
                 </div>
                 <div v-else>
-                    <el-row>
-                        <el-col :span="12">
+                    <el-row type="flex" align="middle" justify="center">
+                        <el-col :span="11" :offset="1">
                             <p style="font-size: 14px;color: #aaa">共 {{ logicList.length + 1 }}. 条显示逻辑</p>
                         </el-col>
                         <el-col :span="6" :offset="6">
                             <el-button type="primary" size="mini" @click="addLogicHandle">
                                 <i class="el-icon-plus"></i>
-                                <span style="font-size: 18px">添加逻辑</span>
+                                <span style="font-size: 15px">添加逻辑</span>
                             </el-button>
                         </el-col>
                     </el-row>
@@ -193,7 +193,7 @@ export default {
             let index = conditionProjectItemList.findIndex(item => item.id == showFormItemId)
             conditionProjectItemList = _.slice(conditionProjectItemList, 0, index)
             conditionProjectItemList = conditionProjectItemList.filter((item) => {
-                return ['RADIO'].includes(item.type)
+                return ['RADIO','CHECKBOX','SELECT'].includes(item.type)
             })
             return conditionProjectItemList
         },
diff --git a/src/views/project/create.vue b/src/views/project/create.vue
index 58af59a..12caa68 100644
--- a/src/views/project/create.vue
+++ b/src/views/project/create.vue
@@ -2,7 +2,7 @@
     <div class="create-wrapper">
         <div class="back-view">
             <el-button size="mini" round @click="$router.back(-1)">
-                <i class="el-icon-arrow-left" />
+                <i class="el-icon-arrow-left"/>
                 返回
             </el-button>
         </div>
@@ -20,8 +20,7 @@
                         <el-form-item>
                             <el-button type="primary"
                                        class="search-template-btn"
-                                       @click="queryTemplatePage"
-                            >
+                                       @click="queryTemplatePage">
                                 查询
                             </el-button>
                         </el-form-item>
@@ -34,12 +33,10 @@
                              style="background-color: transparent;"
                              mode="horizontal" @select="(index)=>{
                                  this.queryParams.type=index
-                                 this.queryTemplatePage()}"
-                    >
+                                 this.queryTemplatePage()}">
                         <el-menu-item :`index`="null">全部</el-menu-item>
                         <el-menu-item v-for="(item, index) in templateTypeList" :key="index"
-                                      :index="item.id.toString()"
-                        >
+                                      :index="item.id.toString()">
                             {{ item.name }}
                         </el-menu-item>
                     </el-menu>
@@ -52,14 +49,12 @@
             </el-row>
             <div class="project-grid-container">
                 <div
-                    class="project-grid-view"
-                >
+                    class="project-grid-view">
                     <div class="project-template-view"
                          style="display: flex; align-items: center;"
-                         @click="createBlankTemplate"
-                    >
+                         @click="createBlankTemplate">
                         <div style="flex: 1;">
-                            <i style="font-size: 40px; align-items: center;" class="el-icon-plus" />
+                            <i style="font-size: 40px; align-items: center;" class="el-icon-plus"/>
                             <p style="font-size: 14px;">创建一个空白模板</p>
                         </div>
                     </div>
@@ -70,15 +65,14 @@
                         </p>
                         <p style="color: rgba(189, 188, 188, 100); font-size: 12px; margin: 0;">
                             {{ template.likeCount }}人喜欢
-                            <svg-icon name="like" style="width: 12px; height: 12px;" />
+                            <svg-icon name="like" style="width: 12px; height: 12px;"/>
                         </p>
                         <div class="project-template-use-view">
                             <div
                                 class="project-template-use-view-btn"
-                                @click="toProjectTemplate(template.key)"
-                            >
+                                @click="toProjectTemplate(template.key)">
                                 <div>
-                                    <font-icon class="fa fa-eye" style="font-size: 40px;" />
+                                    <font-icon class="fa fa-eye" style="font-size: 40px;"/>
                                 </div>
                                 <el-button type="text">查看</el-button>
                             </div>
@@ -87,7 +81,7 @@
                 </div>
             </div>
         </el-row>
-        <el-row style="height: 20px;" />
+        <el-row style="height: 20px;"/>
         <div>
             <el-pagination
                 v-if="total>10"
@@ -189,7 +183,9 @@ export default {
     border-radius: 3px;
     text-align: center;
     margin: 20px;
-    border: 1px solid rgba(187, 187, 187, 100);
+    //border: 1px solid rgba(187, 187, 187, 100);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
+    background: white;
     position: relative;
 }
 .project-template-view:hover .project-template-use-view {