Merge branch 'master' of http://192.168.4.246:3000/zhangs/surveyMaker

src/api/editor.js

@@ -42,7 +42,11 @@ const cncTestDetail = (data)=>{
   return http.post('/cncTest/cncTestDetail',data) 
 }
 
+const createTest = (data)=>{
+  return http.post('/testTheme/createTest',data) 
+}
+
 module.exports = {
-  houseList,cncTestDetail,
+  houseList,cncTestDetail,createTest,
   getUserThemeList, saveTheme, updateTheme, uploadPic,uploadPsd, getPageByThemeId, getPicListByThemeId, delTheme ,cncTestcaseList
 }

src/components/EditPanel.vue

@@ -26,23 +26,20 @@
             alt="">
           <span class="tab-text">属性动作</span>
         </div>
-
       </div>
 
-      <!--<div class="tab" v-show="panelState === 11"-->
-      <!--:class="{ active: panelTabState === 2 }"-->
-      <!--@click="function () { panelTabState = 2 }">文字特效</div>-->
-
     </div>
     <div v-show="panelTabState === 0">
-      <!-- 文字编辑界面特有控件 -->
+
       <div v-show="panelState === 11||panelState===15">
 
         <div
           style="vertical-align: middle;display: flex; flex-direction: row; padding: 12px 0; padding-left: 20px; border-bottom: #E2E4EE solid 1px;"
           v-show="panelState == 15">
           <div>
-            <img style="width:100px; height:100px" src="http://yun-image.elab-plus.com/images/dyb/icon_left.png" alt="">
+            <div :style="{ backgroundImage: 'url(' + element.imgSrc + ')','width':'100px', 'height':'100px','background-repeat': 'no-repeat',
+              'background-position': 'center',
+              'background-size': 'contain'}"></div>
           </div>
           <div style="display:flex; flex-direction: column;margin-left: 16px;">
             <span style="font-size:14px;
@@ -55,7 +52,7 @@
             color:rgba(100,107,129,1);
             margin-bottom: 16px;
             line-height:19px;">
-              3iiiiiii.jpg
+              {{element.imgSrc|currentImageName}}
             </span>
             <div style="width:108px;
             height:28px;
@@ -253,14 +250,20 @@
           </div>
         </div>
       </div>
-
-
       <div style="margin-top: 1px;">
-        <div style="display: inline-flex;" v-show="panelState == 13">
-          <div style="font-size: 14px;color: #999999;letter-spacing: 0; word-break:keep-all;line-height: 40px">轮播特效
+        <div style="width: 100%;display: inline-flex; align-items: center;border-bottom: #E2E4EE solid 1px;
+           padding-top: 12px;padding-bottom: 12px;
+        " v-show="panelState == 13">
+          <div style="font-size:12px;
+          font-family:MicrosoftYaHei;
+          margin-left: 20px;
+          margin-right: 10px;
+          color:rgba(51,51,51,1);letter-spacing: 0; word-break:keep-all;line-height: 40px">轮播特效
           </div>
-          <div style="font-size: 14px;color: #999999;letter-spacing: 0; word-break:keep-all;">
-            <el-select v-model="element.swiperType" placeholder="请选择">
+          <div style="font-size:12px;
+          font-family:MicrosoftYaHei;
+          color:rgba(51,51,51,1);letter-spacing: 0; word-break:keep-all;">
+            <el-select v-model="element.swiperType" placeholder="请选择" size="mini">
               <el-option v-for="(item,index) in carouselTypes" :key="item.value" :label="item.label"
                 :value="item.value">
               </el-option>
@@ -268,7 +271,7 @@
           </div>
         </div>
         <div style="text-align: left;border-bottom: #E2E4EE solid 1px; width: 100%;padding-left: 20px;"
-          v-show="panelState!=15">
+          v-show="panelState!=15 && panelState != 13">
           <div style="display: inline-flex; margin-left: -6px" v-show="panelState == 11">
             <el-checkbox v-model="element.fontWeight" true-label="bold" false-label="normal">加粗</el-checkbox>
           </div>
@@ -282,8 +285,9 @@
 
           <div style="display: inline-flex; padding: 12px 0" v-show="panelState == 12||panelState == 12">
             <div>
-              <img style="width:100px; height:100px" src="http://yun-image.elab-plus.com/images/dyb/icon_left.png"
-                alt="">
+              <div :style="{ backgroundImage: 'url(' + element.imgSrc + ')','width':'100px', 'height':'100px','background-repeat': 'no-repeat',
+              'background-position': 'center',
+              'background-size': 'contain'}"></div>
             </div>
             <div style="display:flex; flex-direction: column;margin-left: 16px;">
               <span style="font-size:14px;
@@ -296,7 +300,7 @@
               color:rgba(100,107,129,1);
               margin-bottom: 16px;
               line-height:19px;">
-                3iiiiiii.jpg
+                {{element.imgSrc|currentImageName}}
               </span>
               <div style="width:108px;
               height:28px;
@@ -308,19 +312,8 @@
               justify-content: center;
               line-height:28px;">替换元素</div>
             </div>
-
-            <!-- <div style="font-size: 14px;color: #999999;letter-spacing: 0; word-break:keep-all;line-height: 40px">图片特效
-            </div> -->
-            <!-- <div style="font-size: 14px;color: #999999;letter-spacing: 0; word-break:keep-all;">
-              <el-select v-model="element.eleCanvas" placeholder="请选择">
-                <el-option v-for="(item,index) in picTypes" :key="item.value" :label="item.label" :value="item.value">
-                </el-option>
-              </el-select>
-            </div> -->
           </div>
-          <!-- <div style="display: inline-flex;" v-show="panelState == 12">
-            <el-checkbox v-model="element.videoEditable">视频</el-checkbox>
-          </div> -->
+
           <div style="display: inline-flex;" v-show="panelState != 14 && panelState != 16 && panelState != 12">
             <el-checkbox v-model="element.elabEditable">可编辑</el-checkbox>
           </div>
@@ -339,7 +332,7 @@
       </div>
 
       <div style="border-bottom: #E2E4EE solid 1px; width: 100%;padding-left: 20px; padding-bottom: 11px;"
-        v-show="panelState!=15">
+        v-show="panelState!=15 ">
         <div>
           <div style="font-size:12px;
           font-family:MicrosoftYaHei;
@@ -392,21 +385,6 @@
 
       </div>
 
-      <!-- 通用控件-->
-      <!--<div class="item">
-        <label>元素对齐方式</label>
-          <div>
-            <el-button size="small"
-                       type="primary"
-                       @click="element.left = '0';">左对齐</el-button>
-            <el-button size="small"
-                       type="primary"
-                       @click="element.left = 375-element.width/2;">居中</el-button>
-            <el-button size="small"
-                       type="primary"
-                       @click="element.left = 750-element.width;">右对齐</el-button>
-          </div>
-      </div>-->
       <div class="item"></div>
       <div style="border-bottom: #E2E4EE solid 1px; padding-bottom: 11px;">
         <div style="display:flex; flex-direction: row;margin-left: 18px;">
@@ -564,23 +542,6 @@
     </div>
 
     <div v-if="panelTabState === 1">
-      <!--<div class="item">
-        <label>动画库</label>
-        <div class="content">
-          <el-select placeholder="请选择动画"
-                     v-model="element.animatedName"
-                     clearable>
-            <el-option v-for="item in animateList"
-                       :label="item.name"
-                       :value="item.id"></el-option>
-          </el-select>
-        </div>
-      </div>-->
-
-      <!--<div style="vertical-align: middle;padding-top: 20px;">-->
-      <!--<div style="font-size: 14px; color: #999999;letter-spacing: 0;text-align: left;float:left;">是否启用</div>-->
-      <!--<el-switch v-model="element.animatedEnabled" @change="isEnabled(element.animatedEnabled)" style="float:right;margin-right: 150px;"></el-switch>-->
-      <!--</div>-->
       <div style="width: 100%;border-bottom: #E2E4EE solid 1px; padding-bottom: 12px; padding-top: 12px;">
         <div style="display:flex; flex-direction: row;width: 100%;justify-content: space-between;align-items: center">
           <span style="font-size:12px;
@@ -651,21 +612,6 @@
 
       </div>
     </div>
-
-    <!--<div v-show="panelTabState === 2">-->
-    <!--<div v-show="panelState === 11" style="margin-top: 40px;border: 1px solid transparent;">-->
-    <!--<div style="font-size: 14px; color: #999999;letter-spacing: 0;text-align: left; float:left;">选择特效</div>-->
-    <!--</div>-->
-    <!--<div v-show="panelState === 11" style="margin-top: 20px; ">-->
-    <!--<div style="background: #EBEDEF;display: inline-flex; width:33.3%;overflow: hidden;text-align: center; cursor: pointer"  v-for="(font,index) in animateFontList">-->
-    <!--<div v-model="element.animatedFont" @click="checkAnimationFont(font)" :title="font.name" :type="font.type"-->
-    <!--:style="{'font-size': '12px',color: element.animatedFont==font.id? 'white':'#999999','letter-spacing': 0, width:'100%','word-break':'keep-all',padding: '20px',-->
-    <!--'background': element.animatedFont==font.id? 'green':'',-->
-    <!--'font-weight': element.animatedFont==font.id? 'bold':''-->
-    <!--}" :hxFont="element.animatedFont" :hxid="font.id">{{font.name}}</div>-->
-    <!--</div>-->
-    <!--</div>-->
-    <!--</div>-->
   </div>
 </template>
 
@@ -1088,6 +1034,12 @@
       elements() {
         return this.$store.state.editor.editorPage.elements
       },
+    },
+    filters: {
+      currentImageName(imageName) {
+        console.log(imageName);
+        return imageName.split("-").pop()
+      }
     }
   }
 

src/components/ImgPanel.vue

@@ -8,11 +8,13 @@
       <div class="ele" :style="{ backgroundImage: 'url(' + (element.morePic[0]?element.morePic[0].filePath:'') + ')' }"
         @click="selectedImg(element)" v-for="element in picList1"></div>
     </template>
+    <template v-else-if="isButton">
+      <div class="ele" :style="{ backgroundImage: 'url(' + element.filePath + ')' }" @click="selectedImg(element)"
+        v-for="element in picList3"></div>
+    </template>
     <template v-else>
-      <div v-if='!isButton' class="ele" :style="{ backgroundImage: 'url(' + element.filePath + ')' }"
-        @click="selectedImg(element)" v-for="element in picList2"></div>
-      <div v-else class="ele" :style="{ backgroundImage: 'url(' + element.filePath + ')' }"
-        @click="selectedImg(element)" v-for="element in picList3"></div>
+      <div class="ele" :style="{ backgroundImage: 'url(' + element.filePath + ')' }" @click="selectedImg(element)"
+        v-for="element in picList2"></div>
     </template>
   </div>
 </template>

src/components/PicturePicker.vue

@@ -87,33 +87,6 @@
             })
           }
         }
-        // var that =this
-        // let file = event.target.files[0]
-        // if (file) {
-        //   const loading = this.$loading({
-        //     lock: true,
-        //     text: 'Loading',
-        //     spinner: 'el-icon-loading',
-        //     background: 'rgba(0, 0, 0, 0.8)'
-        //   });
-        //   http.uploadMaterielFile(file,function (res) {
-        //
-        //     loading.close();
-        //     let img = document.createElement('img')
-        //     img.onload = () => {
-        //       that.$emit('uploaded', {
-        //         'filePath': res,
-        //         'width': img.width,
-        //         'height': img.height
-        //       })
-        //     }
-        //     img.src = res
-        //   }, function(res) {
-        //     if (res.total.percent == 100) {
-        //       loading.close();
-        //     }
-        //   })
-        // }
       },
       multipleUpload(event) {
         let files = event.target.files

src/views/cnctestlists/cncTestLists.html

@@ -1,6 +1,6 @@
 <div class="page">
     <HeaderMain></HeaderMain>
-    <main class="main-content">
+    <main class="main-content" v-loading.fullscreen.lock="fullscreenLoading">
         <div class="title-content">
             <div class="create-test-box">
                 <div class="create-test">创建测试</div>
@@ -33,7 +33,7 @@
                         </div>
                         <span>查看测试</span>
                     </div>
-                    <div class="use-test">
+                    <div class="use-test" @click="useCurrentTest(item)">
                         <div class="use-icon">
                         </div>
                         <span>使用此测试</span>
@@ -43,85 +43,32 @@
         </div>
     </main>
     <div class="dialog" v-show="isShowDialog">
-        <div class="dialog-content">
+        <div class="dialog-content" v-if="cncTestDetailSingle!=null">
             <img class="close" src="../../assets/images/close-white.png" alt="" @click="close">
             <div class="content-box">
-                <div class="dialog-title">标题：测测你的隐形人格</div>
+                <div class="dialog-title">标题：{{cncTestDetailSingle.title}}</div>
                 <div class="dialog-qr" ref="dialogQR" v-loading="loading">
-                    <div class="qr-item">
-                        <span class="title">题目一：你的个人情况是什么样的？</span>
-                        <div class="qr-as-text">
-                            <span>A.50后、60后</span>
-                            <span>A.50后、60后</span>
-                            <span>A.50后、60后</span>
-                            <span>A.50后、60后</span>
-                            <span>A.50后、60后</span>
-                        </div>
-                    </div>
-                    <div class="qr-item">
-                        <span class="title">题目二：你的个人情况是什么样的？</span>
-                        <div class="qr-as-img">
-                            <div class="qr-img">
-                                <img class="qr-image"
-                                    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565170081382&di=376f9d3f796303d14bcae93c939ed6f0&imgtype=0&src=http%3A%2F%2Fpic107.nipic.com%2Ffile%2F20160819%2F21074618_162727428000_2.jpg"
-                                    alt="">
-                                <span class="qr-desc">A.就是否会对减肥后视镜大黄蜂季jdjd度的</span>
-                            </div>
-                            <div class="qr-img">
-                                <img class="qr-image"
-                                    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565170081382&di=376f9d3f796303d14bcae93c939ed6f0&imgtype=0&src=http%3A%2F%2Fpic107.nipic.com%2Ffile%2F20160819%2F21074618_162727428000_2.jpg"
-                                    alt="">
-                                <span class="qr-desc">A.就是否会对减肥后视镜大黄蜂季jdjd度的</span>
-                            </div>
-                            <div class="qr-img">
-                                <img class="qr-image"
-                                    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565170081382&di=376f9d3f796303d14bcae93c939ed6f0&imgtype=0&src=http%3A%2F%2Fpic107.nipic.com%2Ffile%2F20160819%2F21074618_162727428000_2.jpg"
-                                    alt="">
-                                <span class="qr-desc">A.就是否会对减肥后视镜大黄蜂季jdjd度的</span>
-                            </div>
-                            <div class="qr-img">
-                                <img class="qr-image"
-                                    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565170081382&di=376f9d3f796303d14bcae93c939ed6f0&imgtype=0&src=http%3A%2F%2Fpic107.nipic.com%2Ffile%2F20160819%2F21074618_162727428000_2.jpg"
-                                    alt="">
-                                <span class="qr-desc">A.就是否会对减肥后视镜大黄蜂季jdjd度的</span>
-                            </div>
-                            <div class="qr-img">
-                                <img class="qr-image"
-                                    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565170081382&di=376f9d3f796303d14bcae93c939ed6f0&imgtype=0&src=http%3A%2F%2Fpic107.nipic.com%2Ffile%2F20160819%2F21074618_162727428000_2.jpg"
-                                    alt="">
-                                <span class="qr-desc">A.就是否会对减肥后视镜大黄蜂季jdjd度的</span>
-                            </div>
-                            <div class="qr-img">
-                                <img class="qr-image"
-                                    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565170081382&di=376f9d3f796303d14bcae93c939ed6f0&imgtype=0&src=http%3A%2F%2Fpic107.nipic.com%2Ffile%2F20160819%2F21074618_162727428000_2.jpg"
-                                    alt="">
-                                <span class="qr-desc">A.就是否会对减肥后视镜大黄蜂季jdjd度的</span>
-                            </div>
-                            <div class="qr-img">
-                                <img class="qr-image"
-                                    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565170081382&di=376f9d3f796303d14bcae93c939ed6f0&imgtype=0&src=http%3A%2F%2Fpic107.nipic.com%2Ffile%2F20160819%2F21074618_162727428000_2.jpg"
-                                    alt="">
-                                <span class="qr-desc">A.就是否会对减肥后视镜大黄蜂季jdjd度的</span>
-                            </div>
-                            <div class="qr-img">
-                                <img class="qr-image"
-                                    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565170081382&di=376f9d3f796303d14bcae93c939ed6f0&imgtype=0&src=http%3A%2F%2Fpic107.nipic.com%2Ffile%2F20160819%2F21074618_162727428000_2.jpg"
-                                    alt="">
-                                <span class="qr-desc">A.就是否会对减肥后视镜大黄蜂季jdjd度的</span>
+                    <div style="border-bottom: #D4D4D4 solid 1px;"
+                        v-for="(questionItem, index) in cncTestDetailSingle.questionList" :key="index">
+                        <div class="qr-item"
+                            v-if="questionItem.optionList[0]!=null && (questionItem.optionList[0].imageUrl==null||questionItem.optionList[0].imageUrl=='')">
+                            <span class="title">{{index+1|currentOptionNum}}：{{questionItem.content}}</span>
+                            <div class="qr-as-text">
+                                <span v-for="(qrItem, index) in questionItem.optionList"
+                                    :key="qrItem.optionId">{{index+1|transtion}}. {{qrItem.content}}</span>
                             </div>
                         </div>
-                    </div>
-                    <div class="qr-item">
-                        <span class="title">题目一：你的个人情况是什么样的？</span>
-                        <div class="qr-as-text">
-                            <span>A.50后、60后</span>
-                            <span>A.50后、60后</span>
-                            <span>A.50后、60后</span>
-                            <span>A.50后、60后</span>
-                            <span>A.50后、60后</span>
+                        <div class="qr-item" v-else>
+                            <span class="title">{{index+1|currentOptionNum}}：{{questionItem.content}}</span>
+                            <div class="qr-as-img">
+                                <div class="qr-img" v-for="(qrItem, index) in questionItem.optionList"
+                                    :key="qrItem.optionId">
+                                    <img class="qr-image" :src="qrItem.imageUrl" alt="">
+                                    <span class="qr-desc">{{index+1|transtion}}. {{qrItem.content}}</span>
+                                </div>
+                            </div>
                         </div>
                     </div>
-
                 </div>
             </div>
         </div>

src/views/cnctestlists/cncTestLists.scss

@@ -240,6 +240,7 @@
       overflow: hidden;
       display: flex;
       flex-direction: column;
+     
 
       .dialog-title {
         width: 100%;
@@ -260,10 +261,10 @@
         overflow-y: auto;
         padding-left: 30px;
         padding-right: 15px;
-        padding-top: 20px;
-
+        
         .qr-item {
           width: 100%;
+          margin-top: 19px;
           margin-bottom: 20px;
 
           .title {
@@ -279,6 +280,9 @@
             flex-direction: column;
             padding-left: 55px;
             margin-top: 6px;
+            span{
+              font-size: 14px;
+            }
           }
 
           .qr-as-img {

src/views/cnctestlists/cncTestLists.vue

@@ -10,6 +10,7 @@
         },
         data() {
             return {
+                cncTestDetailSingle: null,
                 houseList: [],
                 value: '',
                 isShowDialog: false,
@@ -17,18 +18,51 @@
                 loading: true,
                 currentProject: "所属项目",
                 currentProjectHouseId: "",
+                fullscreenLoading: false,
             }
         },
         created() {
             this.houseList = [];
+            this.fullscreenLoading = true;
             api.houseList().then((res) => {
                 if (res.success) {
                     this.houseList = res.list;
                 }
             });
-
             this.getCncTestcaseList();
         },
+        filters: {
+            transtion(val) {
+                return String.fromCharCode(64 + parseInt(val));
+            },
+            currentOptionNum(section) {
+                var chnNumChar = ["零", "一", "二", "三", "四", "五", "六", "七", "八", "九"];
+                var chnUnitChar = ["", "十", "百", "千", "万", "亿", "万亿", "亿亿"];
+                var strIns = '', chnStr = '';
+                var unitPos = 0;
+                var zero = true;
+                while (section > 0) {
+                    var v = section % 10;
+                    if (v === 0) {
+                        if (!zero) {
+                            zero = true;
+                            chnStr = chnNumChar[v] + chnStr;
+                        }
+                    } else {
+                        zero = false;
+                        strIns = chnNumChar[v];
+                        strIns += chnUnitChar[unitPos];
+                        chnStr = strIns + chnStr;
+                    }
+                    unitPos++;
+                    section = Math.floor(section / 10);
+                }
+                if (chnStr.indexOf("一十") == 0) {
+                    chnStr = chnStr.substr(1);
+                }
+                return "题目" + chnStr;
+            }
+        },
         methods: {
             getCncTestcaseList() {
                 let data = {
@@ -41,37 +75,36 @@
                     if (res.success) {
                         this.pageModel = res.pageModel;
                     }
+                    this.fullscreenLoading = false;
                 })
             },
             cncTestDetail(testcaseId) {
+                let that = this;
                 let data = {
-                    "testcaseId": testcaseId,
+                    testcaseId
                 }
                 api.cncTestDetail(data).then((res) => {
                     if (res.success) {
-                       console.log("cncTestDetail",res)
+                        that.cncTestDetailSingle = res.single;
                     }
+                    that.loading = false;
                 })
             },
             showQRDialog(testcaseId) {
                 this.isShowDialog = true;
                 this.loading = true;
                 this.cncTestDetail(testcaseId);
-                setTimeout(() => {
-                    this.$refs.dialogQR.scroll(0, 0)
-                }, 1);
-                setTimeout(() => {
-                    this.loading = false;
-                }, 3000);
             },
             close() {
                 this.isShowDialog = false;
+                this.cncTestDetailSingle = null;
             },
             handleCommand(command) {
                 this.houseList.forEach(element => {
                     if (element.houseId === command) {
                         this.currentProject = element.houseName;
                         this.currentProjectHouseId = element.houseId;
+                        this.fullscreenLoading = true;
                         this.getCncTestcaseList();
                         return true
                     } else {
@@ -80,7 +113,22 @@
                     }
                 });
 
-            }
+            },
+            useCurrentTest(item) {
+                let data = {
+                    "creator": "admin",
+                    "ownHouseName": item.houseName,
+                    "questionCount": item.questionCount,
+                    "title": item.title,
+                };
+                let that = this;
+                api.createTest(data).then((res) => {
+                    if (res.success) {
+                        that.$router.push({ path: '/h5editor', query: { itemId: res.id } })
+                    }
+                })
+
+            },
         },
     }
 </script>