From 242de2c684a019b89e7a9dafedb0ce7f87e1a29a Mon Sep 17 00:00:00 2001
From: PBK-Bin <bin@PBK6.cn>
Date: Tue, 27 Jul 2021 21:23:13 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E7=AE=80=E5=8D=95=E8=B0=83=E6=95=B4?=
 =?UTF-8?q?=E4=B8=80=E4=B8=8B=E9=97=AE=E5=8D=B7=E7=BC=96=E8=BE=91=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E5=A4=B4=E9=83=A8=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/form/editor/RightPanel.vue | 39 ++++++++++++++++------------
 src/views/form/editor/index.vue      | 37 +++++++++++++++++++++-----
 src/views/form/index.vue             | 30 +++++++++------------
 3 files changed, 66 insertions(+), 40 deletions(-)

diff --git a/src/views/form/editor/RightPanel.vue b/src/views/form/editor/RightPanel.vue
index df21fa4..c0a6031 100644
--- a/src/views/form/editor/RightPanel.vue
+++ b/src/views/form/editor/RightPanel.vue
@@ -933,12 +933,12 @@
           >
             <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-form-item>-->
+          <!--          <el-form-item-->
+          <!--            v-if="activeData.__config__.tag === 'el-cascader'"-->
+          <!--            label="任选层级"-->
+          <!--          >-->
+          <!--            <el-switch v-model="activeData.props.props.checkStrictly" />-->
+          <!--          </el-form-item>-->
           <el-form-item
             v-if="activeData.__config__.tag === 'el-cascader'"
             label="是否多选"
@@ -990,12 +990,12 @@
           >
             <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-form-item>-->
+          <!--          <el-form-item-->
+          <!--            v-if="activeData.disabled !== undefined"-->
+          <!--            label="是否禁用"-->
+          <!--          >-->
+          <!--            <el-switch v-model="activeData.disabled" />-->
+          <!--          </el-form-item>-->
           <el-form-item
             v-if="activeData.__config__.tag === 'el-select'"
             label="能否搜索"
@@ -1404,9 +1404,16 @@ export default {
     addSelectItem() {
       let lastItem = _.last(this.activeData.__slot__.options);
       this.activeData.__slot__.options.push({
-        label: '',
-        value: lastItem ? lastItem.value === 0 ? _.max(_.values(this.activeData.__slot__.options.map(item =>
-          item.value))) + 1 : lastItem.value + 1 : 1
+        label: "",
+        value: lastItem
+          ? lastItem.value === 0
+            ? _.max(
+                _.values(
+                  this.activeData.__slot__.options.map((item) => item.value)
+                )
+              ) + 1
+            : lastItem.value + 1
+          : 1,
       });
     },
     async blukAddSelectItems() {
@@ -1617,7 +1624,7 @@ export default {
 .right-board {
   width: 350px;
   position: absolute;
-  right: 17px;
+  right: 0px;
   top: 0;
   padding-top: 3px;
   background-color: #fff;
diff --git a/src/views/form/editor/index.vue b/src/views/form/editor/index.vue
index c32d1af..5ad0332 100644
--- a/src/views/form/editor/index.vue
+++ b/src/views/form/editor/index.vue
@@ -37,7 +37,7 @@
             <el-scrollbar class="center-scrollbar">
                 <el-row v-if="formConf" :gutter="formConf.gutter" class="center-board-row">
                     <el-row align="middle" justify="center" type="flex">
-                        <el-col :span="20" class="text-center">
+                        <el-col class="form-head-title">
                             <h4 class="form-name-text" contenteditable="true"
                                 @blur="(event)=>{
                                     this.formConf.title=event.target.innerText;
@@ -48,7 +48,7 @@
                         </el-col>
                     </el-row>
                     <el-row align="middle" justify="center" type="flex">
-                        <el-col :span="23">
+                        <el-col class="form-head-desc">
                             <Tinymce v-if="editDescription" v-model="formConf.description"
                                      placeholder="请输入表单描述"
                                      @blur="editDescription=false" @input="saveProjectInfo"
@@ -64,7 +64,7 @@
                             <!--                            </p>-->
                         </el-col>
                     </el-row>
-                    <el-divider />
+                    <el-divider class="form-head-divider" />
                     <el-form
                         :disabled="formConf.disabled"
                         :label-position="formConf.labelPosition"
@@ -421,8 +421,33 @@ export default {
 @import '@/assets/styles/form/index';
 </style>
 <style lang="scss" scoped>
-.form-name-text:hover{
-  border: 1px dashed #7b7b7b;
-  min-height: 100px;
+
+.center-board {
+
+  .center-board-row {
+    margin-right: 10px;
+  }
+
+  .form-head-title {
+    padding: 0 10px;
+    text-align: center;
+
+    .form-name-text:hover{
+      border: 1px dashed #7b7b7b;
+      min-height: 100px;
+    }
+
+  }
+
+  .form-head-desc {
+    padding: 0 10px;
+  }
+
+  .form-head-divider {
+    margin-right: 10px;
+    margin-left: 10px;
+    width: auto;
+  }
 }
+
 </style>
diff --git a/src/views/form/index.vue b/src/views/form/index.vue
index c9d92c1..a732682 100644
--- a/src/views/form/index.vue
+++ b/src/views/form/index.vue
@@ -1,23 +1,16 @@
 <template>
     <div class="form-index-container">
         <el-card class="header-container">
-            <el-row align="middle" type="flex">
-                <el-col :span="2">
-                    <i class="el-icon-back" @click="$router.back(-1)" />
-                </el-col>
-                <el-col :span="3" :xs="6">
-                    <img class="header-logo" src="@/assets/images/indexLogo.svg" @click="$router.push({path:'/home'})">
-                </el-col>
-                <el-col :span="1" :xs="3">
-                    <el-button icon="el-icon-view" type="primary" @click="openPreviewHandle">
-                        预览
-                    </el-button>
-                </el-col>
-                <el-col :span="2" :xs="3">
-                    <el-button icon="el-icon-folder-add" type="success" @click="saveProjectAsTemplateHandle">
-                        保存为模板
-                    </el-button>
-                </el-col>
+            <el-row align="middle" type="flex" :gutter="5">
+                <i class="el-icon-back" @click="$router.back(-1)" />
+                <img class="header-logo" src="@/assets/images/indexLogo.svg" @click="$router.push({path:'/home'})">
+                <el-col />
+                <el-button type="primary" icon="el-icon-view" @click="previewDialogVisible=true">
+                    预览
+                </el-button>
+                <el-button type="success" icon="el-icon-folder-add" @click="saveProjectAsTemplateHandle">
+                    保存为模板
+                </el-button>
             </el-row>
         </el-card>
         <div class="main-container">
@@ -139,13 +132,14 @@ export default {
 .header-container {
   width: 100%;
   height: 50px;
+  padding: 0 20px;
 
   .el-icon-back {
     font-size: 22px;
     font-weight: 550;
     cursor: pointer;
     color: #000;
-    margin-left: 40px;
+    margin-right: 75px;
 
     &:hover {
       color: rgb(32, 160, 255);