样式

src/assets/styles/form/home.scss

@@ -1,10 +1,10 @@
-@import '../resources/variables';
+@import "../resources/variables";
 $selectedColor: rgba(24, 144, 255, 0.05);
 $lighterBlue: #1890ff;
 .form-edit-container {
   position: relative;
   width: 100%;
-    height: calc(100vh - 60px);
+  height: 100vh;
   overflow-y: hidden;
 }
 .components-list {
@@ -55,7 +55,7 @@ $lighterBlue: #1890ff;
   left: 10px;
   top: 0;
   margin-top: 5px;
-    height: calc(100vh - 80px);
+  height: calc(100vh - 20px);
   background-color: rgba(255, 255, 255, 100);
   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
   border: 1px solid rgba(255, 255, 255, 100);
@@ -64,13 +64,13 @@ $lighterBlue: #1890ff;
   border-bottom: none;
 }
 .left-scrollbar {
-    height: calc(100vh - 80px);
+  height: calc(100vh - 20px);
   overflow: hidden;
   margin: 5px;
   border-radius: 7px;
 }
 .center-scrollbar {
-    height: calc(100vh - 60px);
+  height: 100vh;
   overflow: hidden;
   width: 90%;
   margin: 20px auto 0;

src/views/form/editor/IconsDialog.vue

@@ -1,32 +1,26 @@
 
 <template>
   <div class="icon-dialog">
-        <el-dialog
+    <el-dialog v-bind="$attrs"
-            v-bind="$attrs"
                width="980px"
                :modal-append-to-body="false"
                v-on="$listeners"
                @open="onOpen"
-            @close="onClose"
+               @close="onClose">
-        >
       <div slot="title">
         选择图标
-                <el-input
+        <el-input v-model="key"
-                    v-model="key"
                   size="mini"
                   :style="{width: '260px'}"
                   placeholder="请输入图标名称"
                   prefix-icon="el-icon-search"
-                    clearable
+                  clearable />
-                />
       </div>
       <ul class="icon-ul">
-                <li
+        <li v-for="icon in iconList"
-                    v-for="icon in iconList"
             :key="icon"
             :class="active===icon?'active-item':''"
-                    @click="onSelect(icon)"
+            @click="onSelect(icon)">
-                >
           <i :class="icon" />
           <div>{{ icon }}</div>
         </li>
@@ -43,7 +37,7 @@ const originList = iconList.map(name => `el-icon-${name}`)
 export default {
   inheritAttrs: false,
   props: ['current'],
-    data() {
+  data () {
     return {
       iconList: originList,
       active: null,
@@ -51,7 +45,7 @@ export default {
     }
   },
   watch: {
-        key(val) {
+    key (val) {
       if (val) {
         this.iconList = originList.filter(name => name.indexOf(val) > -1)
       } else {
@@ -60,13 +54,13 @@ export default {
     }
   },
   methods: {
-        onOpen() {
+    onOpen () {
       this.active = this.current
       this.key = ''
     },
-        onClose() {
+    onClose () {
     },
-        onSelect(icon) {
+    onSelect (icon) {
       this.active = icon
       this.$emit('select', icon)
       this.$emit('update:visible', false)
@@ -120,7 +114,7 @@ export default {
     box-sizing: border-box;
 
     .el-dialog__header {
-      padding-top: 14px;
+      // padding-top: 14px;
     }
 
     .el-dialog__body {

src/views/form/index.vue

@@ -13,13 +13,14 @@
                 </el-button>
             </el-row>
         </el-card> -->
-    <div class="main-container">
+    <div v-if="!previewDialogVisible"
+         class="main-container">
       <div class="left-menu-container">
         <el-menu :collapse="isCollapse"
                  :default-active="defaultActiveMenu"
                  class="el-menu-vertical">
           <el-menu-item class="el-menu-item-per"
-                        v-for="menuItem in (publishStatus?menuItemList2:menuItemList)"
+                        v-for="menuItem in (publishStatus===1?menuItemList1:publishStatus===2?menuItemList2:menuItemList3)"
                         :key="menuItem.key"
                         :index="menuItem.route"
                         @click="menuSelectHandle(menuItem.route,menuItem.key)">
@@ -43,12 +44,19 @@
         <router-view />
       </div>
     </div>
-    <el-dialog :visible.sync="previewDialogVisible"
+    <div v-if="previewDialogVisible">
+      <pre-view :key="previewKey"
+                :showCloseBtn="true"
+                :preview-qrcode="true"
+                @diaCancal="diaCancal" />
+    </div>
+    <!-- <el-dialog :visible.sync="previewDialogVisible"
+               class="dialog"
                destroy-on-close
                fullscreen>
       <pre-view :key="previewKey"
                 :preview-qrcode="true" />
-    </el-dialog>
+    </el-dialog> -->
   </div>
 </template>
 
@@ -61,13 +69,13 @@ export default {
   components: { PreView },
   data () {
     return {
-      publishStatus: true,
+      publishStatus: 1,
       previewKey: +new Date(),
       previewDialogVisible: false,
       defaultActiveMenu: '',
       projectKey: null,
       isCollapse: false,
-      menuItemList: [
+      menuItemList1: [
         {
           key: 'edit',
           title: '编辑',
@@ -141,6 +149,23 @@ export default {
           title: '返回',
           icon: 'el-icon-back'
         }
+      ], menuItemList3: [
+        {
+          key: 'static',
+          title: '统计',
+          icon: 'el-icon-data-line',
+          route: '/project/form/statistics'
+        },
+        {
+          key: 'preview',
+          title: '预览',
+          icon: 'el-icon-view'
+        },
+        {
+          key: 'back',
+          title: '返回',
+          icon: 'el-icon-back'
+        }
       ]
     }
   },
@@ -154,16 +179,20 @@ export default {
 
   },
   methods: {
+    diaCancal () {
+      this.previewDialogVisible = false
+    },
 
     getProjectStatus () {
       this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/${this.projectKey}`).then(res => {
 
-        if (res.data.status == 1) {
+        console.log('状态', res.data.status)
-          this.publishStatus = false
+        this.publishStatus = res.data.status
-        } else {
-          this.publishStatus = true
 
+        if (this.publishStatus === 3) {
+          this.menuSelectHandle('/project/form/statistics', 'static')
         }
+
       })
     },
 
@@ -239,13 +268,13 @@ export default {
 
 .main-container {
   width: 100vw;
-  height: calc(100vh - 60px);
+  height: 100vh;
   display: flex;
   flex-direction: row;
 
   .right-content-container {
-    width: calc(100vw - 100px);
+    width: 100vw;
-    height: calc(100vh - 60px);
+    height: 100vh;
     overflow-x: hidden;
   }
 }
@@ -284,6 +313,9 @@ export default {
     }
   }
 }
+::v-deep.el-dialog__header {
+  padding-top: 0px;
+}
 
 ::v-deep.preview-container {
   background-color: #ffffff;

src/views/form/preview/index.vue

@@ -1,6 +1,12 @@
 <template>
   <div class="preview-container">
-        <el-tabs v-if="projectConfig.projectKey" type="card">
+    <el-button v-if="showCloseBtn"
+               @click="diaCancal"
+               class="btn_close"
+               icon="el-icon-close"
+               circle></el-button>
+    <el-tabs v-if="projectConfig.projectKey"
+             type="card">
       <el-tab-pane>
         <span slot="label"><i class="el-icon-mobile" />
           手机
@@ -10,10 +16,10 @@
           <div class="preview-phone">
             <iframe id="preview-html"
                     :src="mobilePreviewUrl"
-                                class="preview-html" frameborder="0"
+                    class="preview-html"
+                    frameborder="0"
                     name="preview-html"
-                                scrolling="auto"
+                    scrolling="auto" />
-                        />
           </div>
         </div>
         <!-- <div v-if="mobilePreviewUrl&&previewQrcode" class="qrcode-view">
@@ -28,10 +34,8 @@
           电脑
         </span>
         <el-scrollbar style="height: 77vh;overflow-x: hidden!important;">
-                    <project-form
+          <project-form v-if="projectConfig.projectKey"
-                        v-if="projectConfig.projectKey"
+                        :project-config="projectConfig" />
-                        :project-config="projectConfig"
-                    />
         </el-scrollbar>
       </el-tab-pane>
     </el-tabs>
@@ -49,9 +53,13 @@ export default {
     // VueQr
   },
   props: {
-        previewQrcode: null
+    previewQrcode: null,
+    showCloseBtn: {
+      type: Boolean,
+      default: false
+    }
   },
-    data() {
+  data () {
     return {
       projectKey: null,
       mobilePreviewUrl: '',
@@ -61,24 +69,34 @@ export default {
       }
     }
   },
-    mounted() {
+  mounted () {
     this.projectKey = this.$route.query.key
     let url = window.location.protocol + '//' + window.location.host
     this.mobilePreviewUrl = `${url}/${process.env.VUE_APP_PUBLIC_PATH}/project/view?key=${this.projectKey}`
     this.$set(this.projectConfig, 'projectKey', this.projectKey)
+  },
+  methods: {
+    diaCancal () {
+      this.$emit("diaCancal")
+    },
   }
 }
 </script>
 
 <style lang="scss" scoped>
-
 .preview-container {
   margin: 0;
-  padding-top: 30px;
+  padding-top: 15px;
   background-color: #f7f7f7;
+  position: relative;
+}
+.btn_close {
+  position: absolute;
+  right: 200px;
+  top: 20px;
 }
-::v-deep .el-tabs--card>.el-tabs__header .el-tabs__nav{
+::v-deep .el-tabs--card > .el-tabs__header .el-tabs__nav {
-  border: 1px solid #E4E7ED!important;
+  border: 1px solid #e4e7ed !important;
 }
 ::v-deep .el-tabs__header {
   width: 300px;
@@ -110,16 +128,16 @@ div.preview-layer .preview-bg {
 div.preview-layer .preview-phone {
   width: 372px;
   height: 744px;
-  background: url('~@/assets/images/appearset_bgc_big.png');
+  background: url("~@/assets/images/appearset_bgc_big.png");
   background-size: 372px 744px;
   z-index: 1000;
 }
 
-.qrcode-view{
+.qrcode-view {
   position: absolute;
   top: 0;
   right: 20px;
-  p{
+  p {
     text-align: center;
     font-size: 12px;
     color: #303133;
@@ -142,5 +160,4 @@ div.preview-layer .preview-phone {
   border-bottom-width: 0;
   border-left-width: 0;
 }
-
 </style>

src/views/form/publish/index.vue

@@ -236,6 +236,7 @@ export default {
           this.msgSuccess('停止成功')
           this.$parent.getProjectStatus()
           this.getProjectStatus()
+          // this.$router.push({ path: '/home' })
         }
       })
     },

src/views/form/setting/index.vue

@@ -6,8 +6,7 @@
             class="project-setting-container"
             justify="center"
             type="flex">
-      <el-col :offset="3"
+      <el-col :span="6"
-              :span="5"
               class="project-setting-view">
         <p class="project-setting-title">
           提交设置
@@ -104,7 +103,8 @@
           </el-col>
         </el-row> -->
       </el-col>
-      <el-col :span="6"
+      <el-col :offset="3"
+              :span="6"
               class="project-setting-view text-center">
         <p class="project-setting-title">
           回收设置
@@ -776,7 +776,7 @@ export default {
 <style scoped>
 .project-setting-container {
   width: 100%;
-  height: 100%;
+  height: 100vh;
   min-height: 85vh;
   padding-top: 30px;
   margin: 0;
@@ -784,7 +784,7 @@ export default {
 }
 
 .project-setting-view {
-  height: 100%;
+  height: 98%;
   line-height: 20px;
   border-radius: 7px;
   color: rgba(16, 16, 16, 100);

src/views/form/statistics/public.vue

@@ -150,7 +150,7 @@ export default {
 }
 .el-main {
   background-color: rgba(247, 247, 247, 90);
-  height: calc(100vh - 60px);
+  height: 100vh;
 }
 @media screen and (max-width: 750px) {
   .public-result-table {

src/views/form/theme/index.vue

@@ -1,25 +1,26 @@
 <template>
   <div class="theme-container">
-    <div class="left-container">
+    <div v-if="false"
+         class="left-container">
       <el-scrollbar class="left-scrollbar-container">
         <p class="theme-title">外观主题</p>
         <el-row>
-          <el-col :span="3">
+          <el-col :span="6">
             <span class="theme-prompt-text">风格</span>
           </el-col>
           <el-col v-for="item in styleList"
                   :key="item.key"
-                  :span="3">
+                  :span="6">
             <span :class="{'style-btn-active':activeStyle==item.key}"
                   class="style-btn"
                   @click="activeStyleHandle(item)">{{ item.label }}</span>
           </el-col>
         </el-row>
-        <el-row>
+        <el-row style="margin-top:20px">
-          <el-col :span="3">
+          <el-col :span="6">
             <span class="theme-prompt-text">颜色</span>
           </el-col>
-          <el-col :span="3">
+          <el-col :span="6">
             <span :class="{'style-btn-active':activeColor==''}"
                   class="style-btn"
                   @click="activeColorHandle('')">全部</span>
@@ -27,7 +28,7 @@
           <el-col v-for="c in colorList"
                   :key="c"
                   :class="{'style-btn-active':activeColor==c}"
-                  :span="3"
+                  :span="6"
                   :style="{backgroundColor: c}"
                   class="color-btn"
                   @click.native="activeColorHandle(c)" />
@@ -391,7 +392,7 @@ export default {
 
 <style scoped>
 .theme-container {
-  width: 100%;
+  width: 100vw;
   height: 100%;
   background-color: #f7f7f7;
   overflow: hidden;
@@ -407,7 +408,7 @@ export default {
   border: 1px solid rgba(255, 255, 255, 100);
   background-color: white;
   width: 20%;
-  height: calc(100vh - 60px);
+  height: 100vh;
 }
 .left-scrollbar-container {
   height: 100%;
@@ -481,7 +482,7 @@ export default {
 }
 .right-container {
   width: 310px;
-  height: calc(100vh - 60px);
+  height: 100vh;
   line-height: 20px;
   text-align: center;
   padding: 22px;

src/views/form/write/index.vue

@@ -307,13 +307,24 @@ export default {
         'orgType': this.orgType,//人员所属类型(组织:agency;部门:dept;网格:grid)	
         'realName': this.realName,//填写人姓名	
         //'accessKey':this.accessKey
-      }).then(() => {
+      }).then((res) => {
+
+        if (res.code !== 0) {
+          this.$message(
+            {
+              message: res.msg,
+              type: 'warning'
+            }
+          )
+        } else {
           this.writeStatus = 2
           if (this.userProjectSetting.submitJumpUrl) {
             setTimeout(() => {
               window.location.replace(this.userProjectSetting.submitJumpUrl)
             }, 1000)
           }
+        }
+
 
       })
     }