xjc пре 4 година
родитељ
комит
ec20e93549
5 измењених фајлова са 1060 додато и 554 уклоњено
  1. 2 2
      src/views/Home.vue
  2. 320 112
      src/views/message/InnerSurvey.vue
  3. 377 163
      src/views/message/OutSurvey.vue
  4. 359 275
      src/views/message/modelForm.vue
  5. 2 2
      vue.config.js

+ 2 - 2
src/views/Home.vue

@@ -10,8 +10,8 @@
 	<el-container>
 		<el-header>
 			<div class="header">
-				<img class="logo" src="../assets/logo.png" alt="">
-				<div class="siteTitle">中科院期刊微信公众号集中管理平台</div>
+				<!-- <img class="logo" src="../assets/logo.png" alt=""> -->
+				<!-- <div class="siteTitle">中科院期刊微信公众号集中管理平台</div> -->
 			</div>	
 			<div class="nav">
 				<!-- <router-link :class="act?'active':''" to="/index/index" @click.native='active(1)'>首页</router-link>

+ 320 - 112
src/views/message/InnerSurvey.vue

@@ -60,15 +60,16 @@ a {
 .tpl_title {
   font-size: 18px;
   // margin: 20px 0;
-  width:80%;
-  margin:20px auto;
+  width: 80%;
+  margin: 20px auto;
 }
 .tpl_form {
-  margin: 20px;
+  // margin: 20px;
   border: 1px solid #ccc;
   border-radius: 20px;
   /deep/.el-form-item {
     background: none;
+    padding: 10px 20px;
   }
   /deep/.el-form-item__label {
     float: none;
@@ -80,31 +81,36 @@ a {
   }
   /deep/.el-form-item__content {
     width: 100%;
-    .el-radio-group,.el-checkbox-group{
-        display:flex;
-        flex-direction: column;
+    .el-radio-group,
+    .el-checkbox-group {
+      display: flex;
+      flex-direction: column;
     }
-    .cus_select .el-radio{
+    .cus_select .el-radio {
       line-height: 20px;
     }
-    .cus_select .el-checkbox{
+    .cus_select .el-checkbox {
       line-height: 20px;
     }
-    .cus_select .el-radio, .el-radio__input{
+    .cus_select .el-radio,
+    .el-radio__input {
       white-space: normal;
     }
-    .cus_select .el-checkbox, .el-checkbox__input{
-        white-space: normal;
+    .cus_select .el-checkbox,
+    .el-checkbox__input {
+      white-space: normal;
     }
-    .cus_select .el-checkbox__label{
-        display: inline;
+    .cus_select .el-checkbox__label {
+      display: inline;
     }
-    .el-radio__label,.el-checkbox__label{
-      display: inline-block  !important;
+    .el-radio__label,
+    .el-checkbox__label {
+      display: inline-block !important;
       width: 93%;
       vertical-align: top;
     }
-    .el-radio,.el-checkbox{
+    .el-radio,
+    .el-checkbox {
       margin-bottom: 10px;
       margin-right: 1px;
     }
@@ -145,31 +151,46 @@ a {
     border-radius: 60px;
   }
 }
-.message_desc{
+.message_desc {
   width: 80%;
-  margin:auto;
+  margin: auto;
   text-indent: 25px;
   color: #1c388c;
   font-size: 14px;
 }
 // 批注信息
-.tool_text{
-  width:315px;
-  p{
-    margin-bottom:10px;
+.tool_text {
+  width: 315px;
+  p {
+    margin-bottom: 10px;
   }
-  .toolText_img{
-    img{
-      width:100px;
+  .toolText_img {
+    img {
+      width: 100px;
       height: 100px;
-      margin-bottom:5px
-      
+      margin-bottom: 5px;
     }
-    img:nth-child(odd){
+    img:nth-child(odd) {
       margin-right: 5px;
     }
   }
 }
+.group_title {
+  font-size: 16px;
+  font-weight: bold;
+  padding: 10px 0px;
+}
+.groupMain {
+  border: 1px solid #ccc;
+  border-radius: 5px;
+}
+// .require::before {
+//   content: "*";
+//   color: #f56c6c;
+//   margin-right: 4px;
+//   position: absolute;
+//   left: -10px;
+// }
 </style>
 <template>
   <section>
@@ -384,95 +405,227 @@ a {
       <div class="item-main">
         <!-- <img src="../../assets/survey_logo.png" alt="" class="survey_logo" /> -->
         <h5 align="center" class="tpl_title">{{ title }}</h5>
-        <div class="message_desc">{{messageData.desc}}</div>
+        <div class="message_desc">{{ messageData.desc }}</div>
         <el-form
           ref="form2"
           :model="form2"
           class="tpl_form over_y"
           :rules="rules1.rules"
         >
-          <el-form-item
-            v-for="(item, index) in widgetList"
-            :key="index"
-            :label="item.label+item.cntype"
-            :prop="item.label"
-          >
-          <el-tooltip class="item" effect="dark" content="Left Bottom 提示文字" placement="bottom-end">
-                    <i v-if="item.noteDesc||item.noteImgs"
+          <template v-for="(item, index) in widgetList">
+            <el-form-item
+              :key="index"
+              :label="item.label + item.cntype"
+              :prop="item.label"
+              v-if="item.type != 'group'"
+            >
+              <el-tooltip
+                class="item"
+                effect="dark"
+                content="Left Bottom 提示文字"
+                placement="bottom-end"
+              >
+                <i
+                  v-if="item.noteDesc || item.noteImgs"
+                  class="el-icon-info"
+                  style="position: absolute; top: -28px; right: 0px"
+                ></i>
+                <div slot="content" class="tool_text">
+                  <p>{{ item.noteDesc }}</p>
+                  <div class="toolText_img">
+                    <img
+                      :src="item"
+                      alt=""
+                      v-for="(item, index) in item.noteImgs"
+                      :key="index"
+                    />
+                  </div>
+                </div>
+              </el-tooltip>
+              <el-input
+                v-if="item.type == 'input'"
+                v-model="form2[item.label]"
+                :placeholder="item.placeholder"
+              ></el-input>
+              <el-input
+                v-if="item.type == 'textarea'"
+                type="textarea"
+                :rows="4"
+                v-model="form2[item.label]"
+                :placeholder="item.placeholder"
+              ></el-input>
+              <el-radio-group
+                v-if="item.type == 'radio'"
+                v-model="form2[item.label]"
+                class="cus_select"
+              >
+                <el-radio
+                  :label="iitem.label"
+                  v-for="(iitem, index) in item.items"
+                  :key="index"
+                  >{{ iitem.label }}</el-radio
+                >
+              </el-radio-group>
+
+              <el-checkbox-group
+                v-else-if="item.type == 'checkbox'"
+                v-model="form2[item.label]"
+                class="cus_select"
+              >
+                <el-checkbox
+                  :label="iitem.label"
+                  v-for="(iitem, index) in item.items"
+                  :key="index"
+                ></el-checkbox>
+              </el-checkbox-group>
+              <el-upload
+                v-if="item.type == 'image'"
+                action="/api/admin/uploadfile"
+                list-type="picture-card"
+                :data="{ type: item.label }"
+                :on-success="handleSuccess"
+              >
+                <i class="el-icon-plus"></i>
+              </el-upload>
+              <el-upload
+                v-if="item.type == 'file'"
+                class="upload-demo"
+                ref="upload"
+                action="/api/admin/uploadfile"
+                :data="{ type: item.label }"
+                :on-success="handleSuccess"
+              >
+                <!-- <el-button slot="trigger" size="small" type="primary">选取文件</el-button> -->
+                <el-button
+                  style="margin-left: 10px"
+                  size="small"
+                  type="primary"
+                  plain
+                  >添加文件</el-button
+                >
+                <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> -->
+              </el-upload>
+            </el-form-item>
+            <!-- 域组件展示 -->
+            <h6
+              v-if="item.type == 'group'"
+              align="center"
+              class="group_title"
+              :key="'revire_g' + index"
+            >
+              {{ item.label }}
+            </h6>
+            <section
+              class="groupMain"
+              v-if="item.type == 'group'"
+              :key="'review_gi' + index"
+            >
+              <template v-for="(iitem, index) in item.children">
+                <el-form-item
+                  :prop="iitem.label + '(' + item.label + ')'"
+                  :key="'review_gc' + index"
+                  :label="iitem.label + iitem.cntype"
+                >
+                  <el-tooltip
+                    class="item"
+                    effect="dark"
+                    content="Left Bottom 提示文字"
+                    placement="bottom-end"
+                  >
+                    <i
+                      v-if="iitem.noteDesc || iitem.noteImgs"
                       class="el-icon-info"
                       style="position: absolute; top: -28px; right: 0px"
                     ></i>
-                    <div slot="content" class='tool_text'> 
-                      <p>{{item.noteDesc}}</p>
-                      <div class='toolText_img'>
-                        <img :src="item" alt="" v-for="(item,index) in item.noteImgs" :key="index" />
+                    <div slot="content" class="tool_text">
+                      <p>{{ iitem.noteDesc }}</p>
+                      <div class="toolText_img">
+                        <img
+                          :src="iitem"
+                          alt=""
+                          v-for="(iitem, index) in iitem.noteImgs"
+                          :key="'review_gc_noteimgs' + index"
+                        />
                       </div>
                     </div>
                   </el-tooltip>
-            <el-input
-              v-if="item.type == 'input'"
-              v-model="form2[item.label]"
-              :placeholder="item.placeholder"
-            ></el-input>
-            <el-input
-              v-if="item.type == 'textarea'"
-              type="textarea"
-              :rows="4"
-              v-model="form2[item.label]"
-              :placeholder="item.placeholder"
-            ></el-input>
-            <el-radio-group
-              v-if="item.type == 'radio'"
-              v-model="form2[item.label]"
-              class="cus_select"
-            >
-              <el-radio
-                :label="iitem.label"
-                v-for="(iitem, index) in item.items"
-                :key="index"
-                >{{ iitem.label }}</el-radio
-              >
-            </el-radio-group>
+                  <el-input
+                    :class="iitem.require ? 'require' : ''"
+                    v-if="iitem.type == 'input'"
+                    v-model="form2[iitem.label + '(' + item.label + ')']"
+                    :placeholder="iitem.placeholder"
+                  ></el-input>
+                  <el-input
+                    :class="iitem.require ? 'require' : ''"
+                    v-if="iitem.type == 'textarea'"
+                    type="textarea"
+                    v-model="form2[iitem.label + '(' + item.label + ')']"
+                    :placeholder="iitem.placeholder"
+                  ></el-input>
+                  <el-radio-group
+                    class="cus_select"
+                    v-if="iitem.type == 'radio'"
+                    v-model="form2[iitem.label + '(' + item.label + ')']"
+                    :class="iitem.require ? 'require' : ''"
+                  >
+                    <el-radio
+                      :label="iiitem.label"
+                      v-for="(iiitem, index) in iitem.items"
+                      :key="'review_gcr' + index"
+                      >{{ iiitem.label }}</el-radio
+                    >
+                  </el-radio-group>
+                  <el-radio-group
+                    class="cus_select"
+                    v-if="iitem.type == 'checkbox'"
+                    v-model="form2[iitem.label + '(' + item.label + ')']"
+                    :class="iitem.require ? 'require' : ''"
+                  >
+                    <el-checkbox
+                      :label="iiitem.label"
+                      v-for="(iiitem, index) in iitem.items"
+                      :key="'review_gcc' + index"
+                      >{{ iiitem.label }}</el-checkbox
+                    >
+                  </el-radio-group>
+                  <el-upload
+                    :class="iitem.require ? 'require' : ''"
+                    v-if="iitem.type == 'image'"
+                    v-model="form2[iitem.label + '(' + item.label + ')']"
+                    action="/api/admin/uploadfile"
+                    list-type="picture-card"
+                    :on-preview="handlePreview"
+                    :on-remove="handleRemove"
+                  >
+                    <i class="el-icon-plus"></i>
+                  </el-upload>
+                  <el-upload
+                    v-if="iitem.type == 'file'"
+                    class="upload-demo"
+                    ref="upload"
+                    action="/api/admin/uploadfile"
+                    :on-preview="handlePreview"
+                    :on-remove="handleRemove"
+                    :file-list="fileList"
+                    :auto-upload="false"
+                  >
+                    <!-- <el-button slot="trigger" size="small" type="primary">选取文件</el-button> -->
+                    <el-button
+                      style="margin-left: 10px"
+                      size="small"
+                      type="primary"
+                      plain
+                      @click="submitUpload"
+                      >添加文件</el-button
+                    >
+                    <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> -->
+                  </el-upload>
+                </el-form-item>
+              </template>
+            </section>
+            <!-- 域组件end -->
+          </template>
 
-            <el-checkbox-group
-              v-else-if="item.type == 'checkbox'"
-              v-model="form2[item.label]"
-              class="cus_select"
-            >
-              <el-checkbox
-                :label="iitem.label"
-                v-for="(iitem, index) in item.items"
-                :key="index"
-              ></el-checkbox>
-            </el-checkbox-group>
-            <el-upload
-              v-if="item.type == 'image'"
-              action="/api/admin/uploadfile"
-              list-type="picture-card"
-              :data="{ type: item.label }"
-              :on-success="handleSuccess"
-            >
-              <i class="el-icon-plus"></i>
-            </el-upload>
-            <el-upload
-              v-if="item.type == 'file'"
-              class="upload-demo"
-              ref="upload"
-              action="/api/admin/uploadfile"
-              :data="{ type: item.label }"
-              :on-success="handleSuccess"
-            >
-              <!-- <el-button slot="trigger" size="small" type="primary">选取文件</el-button> -->
-              <el-button
-                style="margin-left: 10px"
-                size="small"
-                type="primary"
-                plain
-                >添加文件</el-button
-              >
-              <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> -->
-            </el-upload>
-          </el-form-item>
           <el-form-item v-if="this.widgetList.length">
             <el-button
               size="medium"
@@ -588,7 +741,7 @@ a {
       class="qrcode_dialog"
     >
       <div class="content">
-        <img :src="qrcodeUrl" alt="" width="540px"/>
+        <img :src="qrcodeUrl" alt="" width="540px" />
       </div>
     </el-dialog>
   </section>
@@ -602,7 +755,7 @@ export default {
   data() {
     return {
       //   checked: [],
-      messageData:{},
+      messageData: {},
       rules1: {
         rules: {},
       },
@@ -725,15 +878,14 @@ export default {
       this.qrcodeUrl = row.template_qrcode;
     },
     showMessageAnalyse(row) {
-      if(row.finish_ids.length){
+      if (row.finish_ids.length) {
         this.$router.push({
           path: "/message/innerSurvey/analyse",
           query: { id: row.id, type: row.type },
-      });
-      }else{
-        this.$message({ message: "暂无人员填报"});
+        });
+      } else {
+        this.$message({ message: "暂无人员填报" });
       }
-      
     },
     downloadExcel() {
       this.$api
@@ -831,6 +983,62 @@ export default {
                 { required: true, message: i.placeholder, trigger: "change" },
               ];
             }
+            if (i.type == "image" && i.require) {
+              rules1[i.label] = [
+                { required: true, message: i.placeholder, trigger: "change" },
+              ];
+            }
+            // 域组件rules
+            if (i.type == "group") {
+              i.children.forEach((item) => {
+                if (item.type == "input" && item.require) {
+                  rules1[item.label + "(" + i.label + ")"] = [
+                    {
+                      required: true,
+                      message: item.placeholder,
+                      trigger: "blur",
+                    },
+                  ];
+                }
+                if (item.type == "textarea" && item.require) {
+                  rules1[item.label + "(" + i.label + ")"] = [
+                    {
+                      required: true,
+                      message: item.placeholder,
+                      trigger: "blur",
+                    },
+                  ];
+                }
+                if (item.type == "radio" && item.require) {
+                  rules1[item.label + "(" + i.label + ")"] = [
+                    {
+                      required: true,
+                      message: item.placeholder,
+                      trigger: "change",
+                    },
+                  ];
+                }
+                if (item.type == "checkbox" && item.require) {
+                  rules1[item.label + "(" + i.label + ")"] = [
+                    {
+                      required: true,
+                      message: item.placeholder,
+                      trigger: "change",
+                    },
+                  ];
+                }
+                if (item.type == "image" && item.require) {
+                  rules1[item.label + "(" + i.label + ")"] = [
+                    {
+                      required: true,
+                      message: item.placeholder,
+                      trigger: "change",
+                    },
+                  ];
+                }
+              });
+            }
+            console.log(rules1, 2222222222222);
           });
           this.$set(this.rules1, "rules", rules1);
           //   debugger
@@ -944,7 +1152,7 @@ export default {
                   message: "保存成功!",
                 });
                 this.dialogVisible1 = false;
-                this.getData()
+                this.getData();
               } else {
                 this.$message.error(res.data.message);
               }

+ 377 - 163
src/views/message/OutSurvey.vue

@@ -18,25 +18,25 @@ a {
 }
 // 右边
 .item-main {
-    // margin:34px;
-    // height:600px;
-    background: #FFFFFF;
-    width: 356px;
-    height: 575px;
-    overflow: auto;
-    // border: 1px solid #ddd;
-    // display: none;
-    position: relative;
-    top: 24px;
-    left: 4px;
-    // box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.13);
-    border-radius: 5px;
-    border:1px solid #ccc;
+  // margin:34px;
+  // height:600px;
+  background: #ffffff;
+  width: 356px;
+  height: 575px;
+  overflow: auto;
+  // border: 1px solid #ddd;
+  // display: none;
+  position: relative;
+  top: 24px;
+  left: 4px;
+  // box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.13);
+  border-radius: 5px;
+  border: 1px solid #ccc;
   .el-form.over_y {
     max-height: calc(100vh - 340px);
     overflow: visible;
   }
-  .tpl_form{
+  .tpl_form {
     border: none;
   }
   /deep/.el-form-item__label {
@@ -64,48 +64,53 @@ a {
 .tpl_title {
   font-size: 18px;
   // margin: 20px 0;
-  width:80%;
-  margin:20px auto;
+  width: 80%;
+  margin: 20px auto;
 }
 .tpl_form {
-  margin: 20px;
+  // margin: 20px;
   border: 1px solid #ccc;
   border-radius: 20px;
   /deep/.el-form-item {
     background: none;
+    padding: 10px 20px;
   }
-  
+
   /deep/.el-form-item__content {
     width: 100%;
-    .el-radio-group,.el-checkbox-group{
-        display:flex;
-        flex-direction: column;
+    .el-radio-group,
+    .el-checkbox-group {
+      display: flex;
+      flex-direction: column;
     }
-    .cus_select .el-radio{
+    .cus_select .el-radio {
       line-height: 20px;
     }
-    .el-radio__label,.el-checkbox__label{
-      display: inline-block  !important;
+    .el-radio__label,
+    .el-checkbox__label {
+      display: inline-block !important;
       width: 93%;
       vertical-align: top;
     }
-    .el-radio,.el-checkbox{
+    .el-radio,
+    .el-checkbox {
       margin-bottom: 10px;
       margin-right: 1px;
     }
-    /deep/.cus_select .el-checkbox{
+    /deep/.cus_select .el-checkbox {
       line-height: 20px;
-      margin-right:none;
-
+      margin-right: none;
     }
-    .cus_select .el-radio, .el-radio__input{
+    .cus_select .el-radio,
+    .el-radio__input {
       white-space: normal;
     }
-    .cus_select .el-checkbox, .el-checkbox__input{
-        white-space: normal;
+    .cus_select .el-checkbox,
+    .el-checkbox__input {
+      white-space: normal;
     }
-    .cus_select .el-checkbox__label{
-        display: inline;
+    .cus_select .el-checkbox__label {
+      display: inline;
     }
   }
 }
@@ -133,42 +138,50 @@ a {
     width: 100%;
   }
 }
-.survey_dialog{
-  /deep/.el-dialog{
+.survey_dialog {
+  /deep/.el-dialog {
     // width:25%;
     width: 400px;
     height: 750px;
     margin-top: 20px !important;
     background: url("../../assets/survey_bg.png") no-repeat;
-    background-size:100% 100%;
+    background-size: 100% 100%;
     border-radius: 60px;
   }
 }
-.message_desc{
+.message_desc {
   width: 80%;
-  margin:auto;
+  margin: auto;
   text-indent: 25px;
   color: #1c388c;
   font-size: 14px;
 }
 // 批注信息
-.tool_text{
-  width:315px;
-  p{
-    margin-bottom:10px;
+.tool_text {
+  width: 315px;
+  p {
+    margin-bottom: 10px;
   }
-  .toolText_img{
-    img{
-      width:100px;
+  .toolText_img {
+    img {
+      width: 100px;
       height: 100px;
-      margin-bottom:5px
-      
+      margin-bottom: 5px;
     }
-    img:nth-child(odd){
+    img:nth-child(odd) {
       margin-right: 5px;
     }
   }
 }
+.group_title {
+  font-size: 16px;
+  font-weight: bold;
+  padding: 10px 0px;
+}
+.groupMain {
+  border: 1px solid #ccc;
+  border-radius: 5px;
+}
 </style>
 <template>
   <section>
@@ -347,102 +360,240 @@ a {
       close-on-click-modal
       :show-close="false"
       :visible.sync="dialogVisible1"
-      class="survey_dialog" width="400px" 
+      class="survey_dialog"
+      width="400px"
     >
       <div class="item-main">
         <!-- <img src="../../assets/survey_logo.png" alt="" class="survey_logo" /> -->
         <h5 align="center" class="tpl_title">{{ title }}</h5>
-        <div class="message_desc">{{messageData.desc}}</div>
-        <el-form ref="form2" :model="form2" class="tpl_form over_y" :rules="rules1.rules">
-          <el-form-item
-            v-for="(item, index) in widgetList"
-            :key="index"
-            :label="item.label+item.cntype"
-            :prop="item.label"
-          >
-            <el-tooltip class="item" effect="dark" content="Left Bottom 提示文字" placement="bottom-end">
-                    <i v-if="item.noteDesc||item.noteImgs"
+        <div class="message_desc">{{ messageData.desc }}</div>
+        <el-form
+          ref="form2"
+          :model="form2"
+          class="tpl_form over_y"
+          :rules="rules1.rules"
+        >
+          <template v-for="(item, index) in widgetList">
+            <el-form-item
+              :key="index"
+              :label="item.label + item.cntype"
+              :prop="item.label"
+              v-if="item.type != 'group'"
+            >
+              <el-tooltip
+                class="item"
+                effect="dark"
+                content="Left Bottom 提示文字"
+                placement="bottom-end"
+              >
+                <i
+                  v-if="item.noteDesc || item.noteImgs"
+                  class="el-icon-info"
+                  style="position: absolute; top: -28px; right: 0px"
+                ></i>
+                <div slot="content" class="tool_text">
+                  <p>{{ item.noteDesc }}</p>
+                  <div class="toolText_img">
+                    <img
+                      :src="item"
+                      alt=""
+                      v-for="(item, index) in item.noteImgs"
+                      :key="index"
+                    />
+                  </div>
+                </div>
+              </el-tooltip>
+              <el-input
+                v-if="item.type == 'input'"
+                v-model="form2[item.label]"
+                :placeholder="item.placeholder"
+              ></el-input>
+              <el-input
+                v-if="item.type == 'textarea'"
+                type="textarea"
+                :rows="4"
+                v-model="form2[item.label]"
+                :placeholder="item.placeholder"
+              ></el-input>
+              <el-radio-group
+                v-if="item.type == 'radio'"
+                v-model="form2[item.label]"
+                class="cus_select"
+              >
+                <el-radio
+                  :label="iitem.label"
+                  v-for="(iitem, index) in item.items"
+                  :key="index"
+                  >{{ iitem.label }}</el-radio
+                >
+              </el-radio-group>
+
+              <el-checkbox-group
+                v-else-if="item.type == 'checkbox'"
+                v-model="form2[item.label]"
+                class="cus_select"
+              >
+                <el-checkbox
+                  :label="iitem.label"
+                  v-for="(iitem, index) in item.items"
+                  :key="index"
+                ></el-checkbox>
+              </el-checkbox-group>
+              <el-upload
+                v-if="item.type == 'image'"
+                action="/api/admin/uploadfile"
+                list-type="picture-card"
+                :data="{ type: item.label }"
+                :on-success="handleSuccess"
+              >
+                <i class="el-icon-plus"></i>
+              </el-upload>
+              <el-upload
+                v-if="item.type == 'file'"
+                class="upload-demo"
+                ref="upload"
+                action="/api/admin/uploadfile"
+                :data="{ type: item.label }"
+                :on-success="handleSuccess"
+              >
+                <!-- <el-button slot="trigger" size="small" type="primary">选取文件</el-button> -->
+                <el-button
+                  style="margin-left: 10px"
+                  size="small"
+                  type="primary"
+                  plain
+                  >添加文件</el-button
+                >
+                <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> -->
+              </el-upload>
+            </el-form-item>
+            <!-- 域组件展示 -->
+            <h6
+              v-if="item.type == 'group'"
+              align="center"
+              class="group_title"
+              :key="'revire_g' + index"
+            >
+              {{ item.label }}
+            </h6>
+            <section
+              class="groupMain"
+              v-if="item.type == 'group'"
+              :key="'review_gi' + index"
+            >
+              <template v-for="(iitem, index) in item.children">
+                <el-form-item
+                  :prop="iitem.label + '(' + item.label + ')'"
+                  :key="'review_gc' + index"
+                  :label="iitem.label + iitem.cntype"
+                >
+                  <el-tooltip
+                    class="item"
+                    effect="dark"
+                    content="Left Bottom 提示文字"
+                    placement="bottom-end"
+                  >
+                    <i
+                      v-if="iitem.noteDesc || iitem.noteImgs"
                       class="el-icon-info"
                       style="position: absolute; top: -28px; right: 0px"
                     ></i>
-                    <div slot="content" class='tool_text'> 
-                      <p>{{item.noteDesc}}</p>
-                      <div class='toolText_img'>
-                        <img :src="item" alt="" v-for="(item,index) in item.noteImgs" :key="index" />
+                    <div slot="content" class="tool_text">
+                      <p>{{ iitem.noteDesc }}</p>
+                      <div class="toolText_img">
+                        <img
+                          :src="iitem"
+                          alt=""
+                          v-for="(iitem, index) in iitem.noteImgs"
+                          :key="'review_gc_noteimgs' + index"
+                        />
                       </div>
                     </div>
                   </el-tooltip>
-            <el-input
-              v-if="item.type == 'input'"
-              v-model="form2[item.label]"
-              :placeholder="item.placeholder"
-            ></el-input>
-            <el-input
-              v-if="item.type == 'textarea'"
-              type="textarea"
-              :rows="4"
-              v-model="form2[item.label]"
-              :placeholder="item.placeholder"
-            ></el-input>
-            <el-radio-group
-              v-if="item.type == 'radio'"
-              v-model="form2[item.label]"
-              class="cus_select"
-            >
-              <el-radio
-                :label="iitem.label"
-                v-for="(iitem, index) in item.items"
-                :key="index"
-                >{{ iitem.label }}</el-radio
-              >
-            </el-radio-group>
-
-            <el-checkbox-group
-              v-else-if="item.type == 'checkbox'"
-              v-model="form2[item.label]"
-              class="cus_select"
-            >
-              <el-checkbox
-                :label="iitem.label"
-                v-for="(iitem, index) in item.items"
-                :key="index"
-              ></el-checkbox>
-            </el-checkbox-group>
-            <el-upload
-              v-if="item.type == 'image'"
-              action="/api/admin/uploadfile"
-              list-type="picture-card"
-              :data="{ type: item.label }"
-              :on-success="handleSuccess"
-            >
-              <i class="el-icon-plus"></i>
-            </el-upload>
-            <el-upload
-              v-if="item.type == 'file'"
-              class="upload-demo"
-              ref="upload"
-              action="/api/admin/uploadfile"
-              :data="{ type: item.label }"
-              :on-success="handleSuccess"
-            >
-              <!-- <el-button slot="trigger" size="small" type="primary">选取文件</el-button> -->
-              <el-button
-                style="margin-left: 10px"
-                size="small"
-                type="primary"
-                plain
-                >添加文件</el-button
-              >
-              <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> -->
-            </el-upload>
-          </el-form-item>
+                  <el-input
+                    :class="iitem.require ? 'require' : ''"
+                    v-if="iitem.type == 'input'"
+                    v-model="form2[iitem.label + '(' + item.label + ')']"
+                    :placeholder="iitem.placeholder"
+                  ></el-input>
+                  <el-input
+                    :class="iitem.require ? 'require' : ''"
+                    v-if="iitem.type == 'textarea'"
+                    type="textarea"
+                    v-model="form2[iitem.label + '(' + item.label + ')']"
+                    :placeholder="iitem.placeholder"
+                  ></el-input>
+                  <el-radio-group
+                    class="cus_select"
+                    v-if="iitem.type == 'radio'"
+                    v-model="form2[iitem.label + '(' + item.label + ')']"
+                    :class="iitem.require ? 'require' : ''"
+                  >
+                    <el-radio
+                      :label="iiitem.label"
+                      v-for="(iiitem, index) in iitem.items"
+                      :key="'review_gcr' + index"
+                      >{{ iiitem.label }}</el-radio
+                    >
+                  </el-radio-group>
+                  <el-radio-group
+                    class="cus_select"
+                    v-if="iitem.type == 'checkbox'"
+                    v-model="form2[iitem.label + '(' + item.label + ')']"
+                    :class="iitem.require ? 'require' : ''"
+                  >
+                    <el-checkbox
+                      :label="iiitem.label"
+                      v-for="(iiitem, index) in iitem.items"
+                      :key="'review_gcc' + index"
+                      >{{ iiitem.label }}</el-checkbox
+                    >
+                  </el-radio-group>
+                  <el-upload
+                    :class="iitem.require ? 'require' : ''"
+                    v-if="iitem.type == 'image'"
+                    v-model="form2[iitem.label + '(' + item.label + ')']"
+                    action="/api/admin/uploadfile"
+                    list-type="picture-card"
+                    :on-preview="handlePreview"
+                    :on-remove="handleRemove"
+                  >
+                    <i class="el-icon-plus"></i>
+                  </el-upload>
+                  <el-upload
+                    v-if="iitem.type == 'file'"
+                    class="upload-demo"
+                    ref="upload"
+                    action="/api/admin/uploadfile"
+                    :on-preview="handlePreview"
+                    :on-remove="handleRemove"
+                    :file-list="fileList"
+                    :auto-upload="false"
+                  >
+                    <!-- <el-button slot="trigger" size="small" type="primary">选取文件</el-button> -->
+                    <el-button
+                      style="margin-left: 10px"
+                      size="small"
+                      type="primary"
+                      plain
+                      @click="submitUpload"
+                      >添加文件</el-button
+                    >
+                    <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> -->
+                  </el-upload>
+                </el-form-item>
+              </template>
+            </section>
+            <!-- 域组件end -->
+          </template>
           <el-form-item v-if="this.widgetList.length">
             <el-button
               size="medium"
               type="primary"
               @click="saveResult"
               style="width: 100%"
-              >提交</el-button
+              :disabled="form2.status == 0"
+              >{{ this.form2.status == 1 ? "提交" : "该问卷已禁用" }}</el-button
             >
           </el-form-item>
         </el-form>
@@ -566,9 +717,9 @@ export default {
   data() {
     return {
       //   checked: [],
-      messageData:{},
+      messageData: {},
       rules1: {
-        rules:{}
+        rules: {},
       },
       qrcodeUrl: "",
       cur_message_id: null,
@@ -676,7 +827,7 @@ export default {
             row.status = res.data.data;
           });
         });
-      }else{
+      } else {
         this.$api.editMessageStatus({ id: row.id }).then((res) => {
           row.status = res.data.data;
         });
@@ -688,15 +839,14 @@ export default {
       this.qrcodeUrl = row.template_qrcode;
     },
     showMessageAnalyse(row) {
-      if(row.finish_ids.length){
+      if (row.finish_ids.length) {
         this.$router.push({
           path: "/message/outSurvey/analyse",
           query: { id: row.id, type: row.type },
         });
-      }else{
-        this.$message({ message: "暂无人员填报"});
+      } else {
+        this.$message({ message: "暂无人员填报" });
       }
-      
     },
     downloadExcel() {
       this.$api
@@ -757,6 +907,7 @@ export default {
       this.message_id = row.id;
       this.widgetList = [];
       this.form2 = {};
+      this.form2.status = row.status;
       this.$api.getMessageInfo({ id: row.id }).then((res) => {
         if (res.data.code == 0) {
           this.messageData = res.data.data;
@@ -768,20 +919,83 @@ export default {
               _this.$set(_this.form2, i.label, []);
             }
             //组装rules
-            if(i.type=="input"&&i.require){
-              rules1[i.label] = [{ required: true, message: i.placeholder, trigger: "blur" }]
+            if (i.type == "input" && i.require) {
+              rules1[i.label] = [
+                { required: true, message: i.placeholder, trigger: "blur" },
+              ];
             }
-            if(i.type=="textarea"&&i.require){
-              rules1[i.label] = [{ required: true, message: i.placeholder, trigger: "blur" }]
+            if (i.type == "textarea" && i.require) {
+              rules1[i.label] = [
+                { required: true, message: i.placeholder, trigger: "blur" },
+              ];
             }
-            if(i.type=="radio"&&i.require){
-              rules1[i.label] = [{ required: true, message: i.placeholder, trigger: "change" }]
+            if (i.type == "radio" && i.require) {
+              rules1[i.label] = [
+                { required: true, message: i.placeholder, trigger: "change" },
+              ];
             }
-            if(i.type=="checkbox"&&i.require){
-              rules1[i.label] = [{ required: true, message: i.placeholder, trigger: "change" }]
+            if (i.type == "checkbox" && i.require) {
+              rules1[i.label] = [
+                { required: true, message: i.placeholder, trigger: "change" },
+              ];
+            }
+            if (i.type == "image" && i.require) {
+              rules1[i.label] = [
+                { required: true, message: i.placeholder, trigger: "change" },
+              ];
+            }
+            // 域组件rules
+            if (i.type == "group") {
+              i.children.forEach((item) => {
+                if (item.type == "input" && item.require) {
+                  rules1[item.label + "(" + i.label + ")"] = [
+                    {
+                      required: true,
+                      message: item.placeholder,
+                      trigger: "blur",
+                    },
+                  ];
+                }
+                if (item.type == "textarea" && item.require) {
+                  rules1[item.label + "(" + i.label + ")"] = [
+                    {
+                      required: true,
+                      message: item.placeholder,
+                      trigger: "blur",
+                    },
+                  ];
+                }
+                if (item.type == "radio" && item.require) {
+                  rules1[item.label + "(" + i.label + ")"] = [
+                    {
+                      required: true,
+                      message: item.placeholder,
+                      trigger: "change",
+                    },
+                  ];
+                }
+                if (item.type == "checkbox" && item.require) {
+                  rules1[item.label + "(" + i.label + ")"] = [
+                    {
+                      required: true,
+                      message: item.placeholder,
+                      trigger: "change",
+                    },
+                  ];
+                }
+                if (item.type == "image" && item.require) {
+                  rules1[item.label + "(" + i.label + ")"] = [
+                    {
+                      required: true,
+                      message: item.placeholder,
+                      trigger: "change",
+                    },
+                  ];
+                }
+              });
             }
           });
-          this.$set(this.rules1,"rules",rules1)
+          this.$set(this.rules1, "rules", rules1);
           //   debugger
           this.dialogVisible1 = true;
         }
@@ -876,24 +1090,24 @@ export default {
     saveResult() {
       this.$refs["form2"].validate((valid) => {
         if (valid) {
-        let result = JSON.stringify(this.form2);
-        this.$api
-          .saveSurveyResultOut({
-            message_id: this.message_id,
-            result: result,
-          })
-          .then((res) => {
-            if (res.data.code == 0) {
-              this.$message({
-                type: "success",
-                message: "保存成功!",
-              });
-            } else {
-              this.$message.error(res.data.message);
-            }
-            this.dialogVisible1 = false;
-            this.getData();
-          });
+          let result = JSON.stringify(this.form2);
+          this.$api
+            .saveSurveyResultOut({
+              message_id: this.message_id,
+              result: result,
+            })
+            .then((res) => {
+              if (res.data.code == 0) {
+                this.$message({
+                  type: "success",
+                  message: "保存成功!",
+                });
+              } else {
+                this.$message.error(res.data.message);
+              }
+              this.dialogVisible1 = false;
+              this.getData();
+            });
         }
       });
     },

+ 359 - 275
src/views/message/modelForm.vue

@@ -215,10 +215,10 @@
     display: inline-block;
     width: 28px;
     position: absolute;
-    top: 13px;
+    top: -5px;
   }
   .ctl_btn_note {
-    right: 55px;
+    right: 20px;
     color: #ffb800;
   }
   .ctl_btn_edit {
@@ -229,6 +229,12 @@
     right: -15px;
     color: red;
   }
+  .ctl_btn_move{
+    font-size: 22px;
+  }
+  .gdrag{
+    bottom:15px!important;
+  }
   // 注释弹窗
   /deep/.noteDialog .el-form-item__content {
     margin-right: 0px !important;
@@ -313,6 +319,15 @@
     // }
   }
 }
+.group_title{
+  font-size: 16px;
+  font-weight: bold;
+  padding:10px 0px;
+}
+.groupMain{
+  border:1px solid #ccc;
+  border-radius: 5px;
+}
 </style>
 <template>
   <section>
@@ -383,9 +398,6 @@
             class="wrapper"
             v-model="widgetList"
             handle=".dargBtn"
-            @change="change"
-            @start="start"
-            @end="end"
           >
             <transition-group>
               <el-form-item
@@ -415,11 +427,6 @@
                     <span class="ctl_btn ctl_btn_note" @click="addNote(item)"
                       >注释</span
                     >
-                    <span
-                      class="ctl_btn ctl_btn_edit"
-                      @click="item.edit = !item.edit"
-                      >{{ item.edit ? "编辑" : "保存" }}</span
-                    >
                     <span
                       class="ctl_btn ctl_btn_del"
                       @click="widgetList.splice(index, 1)"
@@ -451,11 +458,6 @@
                     <span class="ctl_btn ctl_btn_note" @click="addNote(item)"
                       >注释</span
                     >
-                    <span
-                      @click="item.edit = !item.edit"
-                      class="ctl_btn ctl_btn_edit"
-                      >{{ item.edit ? "编辑" : "保存" }}</span
-                    >
                     <span
                       @click="widgetList.splice(index, 1)"
                       class="ctl_btn ctl_btn_del"
@@ -480,7 +482,7 @@
                     <el-radio
                       :label="iitem.label"
                       v-for="(iitem, index) in item.items"
-                      :key="index"
+                      :key="'r'+index"
                     >
                       <el-input
                         :readonly="item.edit"
@@ -506,11 +508,6 @@
                     <span class="ctl_btn ctl_btn_note" @click="addNote(item)"
                       >注释</span
                     >
-                    <span
-                      @click="item.edit = !item.edit"
-                      class="ctl_btn ctl_btn_edit"
-                      >{{ item.edit ? "编辑" : "保存" }}</span
-                    >
                     <span
                       @click="widgetList.splice(index, 1)"
                       class="ctl_btn ctl_btn_del"
@@ -535,7 +532,7 @@
                     <el-checkbox
                       :label="iitem.label"
                       v-for="(iitem, index) in item.items"
-                      :key="index"
+                      :key="'c'+index"
                     >
                       <el-input
                         :readonly="item.edit"
@@ -561,11 +558,6 @@
                     <span class="ctl_btn ctl_btn_note" @click="addNote(item)"
                       >注释</span
                     >
-                    <span
-                      @click="item.edit = !item.edit"
-                      class="ctl_btn ctl_btn_edit"
-                      >{{ item.edit ? "编辑" : "保存" }}</span
-                    >
                     <span
                       @click="widgetList.splice(index, 1)"
                       class="ctl_btn ctl_btn_del"
@@ -602,11 +594,6 @@
                     <span class="ctl_btn ctl_btn_note" @click="addNote(item)"
                       >注释</span
                     >
-                    <span
-                      @click="item.edit = !item.edit"
-                      class="ctl_btn ctl_btn_edit"
-                      >{{ item.edit ? "编辑" : "保存" }}</span
-                    >
                     <span
                       @click="widgetList.splice(index, 1)"
                       class="ctl_btn ctl_btn_del"
@@ -614,8 +601,7 @@
                     >
                   </font>
                   <el-button type="primary" class="dargBtn drag" size="mini"
-                    >拖拽移动顺序</el-button
-                  >
+                    >拖拽移动顺序</el-button>
                 </section>
                 <section v-if="item.type == 'file'">
                   <el-input
@@ -644,9 +630,6 @@
                     <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> -->
                   </el-upload>
                   <font>
-                    <span @click="item.edit = !item.edit">{{
-                      item.edit ? "编辑" : "保存"
-                    }}</span>
                     <span @click="widgetList.splice(index, 1)">删除</span>
                   </font>
                   <el-button type="primary" class="dargBtn drag" size="mini"
@@ -664,235 +647,225 @@
                       item.require ? 'require' : '',
                     ]"
                   ></el-input>
-                  <el-form-item
-                    v-for="(iitem, index) in item.children"
-                    :key="index"
-                    :prop="iitem.label"
+                  <vuedraggable
+                    class="wrapper"
+                    v-model="item.children"
+                    handle=".gdrag"
                   >
-                    <section v-if="iitem.type == 'input'">
-                      <el-input
-                        :readonly="iitem.edit"
-                        v-model="iitem.label"
-                        :class="[
-                          iitem.edit ? 'edit_label' : '',
-                          iitem.require ? 'require' : '',
-                        ]"
-                      ></el-input>
-                      <el-input
-                        placeholder="请输入"
-                        v-model="iitem.placeholder"
-                      ></el-input>
-                      <font>
-                        <el-checkbox
-                          class="item_require"
-                          v-model="iitem.require"
-                          >必填</el-checkbox
-                        >
-                        <span
-                          class="ctl_btn ctl_btn_note"
-                          @click="addNote(iitem)"
-                          >注释</span
-                        >
-                        <span
-                          class="ctl_btn ctl_btn_edit"
-                          @click="iitem.edit = !iitem.edit"
-                          >{{ iitem.edit ? "编辑" : "保存" }}</span
-                        >
-                        <span
-                          class="ctl_btn ctl_btn_del"
-                          @click="item.children.splice(index, 1)"
-                          >删除</span
-                        >
-                      </font>
-                    </section>
-                    <section v-if="iitem.type == 'textarea'">
-                      <el-input
-                        :readonly="iitem.edit"
-                        v-model="iitem.label"
-                        :class="[
-                          iitem.edit ? 'edit_label' : '',
-                          iitem.require ? 'require' : '',
-                        ]"
-                      ></el-input>
-                      <el-input
-                        type="textarea"
-                        placeholder="请输入"
-                        v-model="iitem.placeholder"
-                      ></el-input>
-                      <font>
-                        <span
-                          class="ctl_btn ctl_btn_note"
-                          @click="addNote(iitem)"
-                          >注释</span
-                        >
-                        <span
-                          class="ctl_btn ctl_btn_edit"
-                          @click="iitem.edit = !iitem.edit"
-                          >{{ iitem.edit ? "编辑" : "保存" }}</span
-                        >
-                        <span
-                          class="ctl_btn ctl_btn_del"
-                          @click="item.children.splice(index, 1)"
-                          >删除</span
-                        >
-                      </font>
-                    </section>
+                  <transition-group>
+                    <el-form-item
+                      v-for="(iitem, index) in item.children"
+                      :key="'g'+index"
+                      :prop="iitem.label"
+                    >
+                      <section v-if="iitem.type == 'input'">
+                        <el-input
+                          :readonly="iitem.edit"
+                          v-model="iitem.label"
+                          :class="[
+                            iitem.edit ? 'edit_label' : '',
+                            iitem.require ? 'require' : '',
+                          ]"
+                        ></el-input>
+                        <el-input
+                          placeholder="请输入"
+                          v-model="iitem.placeholder"
+                        ></el-input>
+                        <font>
+                          <el-checkbox
+                            class="item_require"
+                            v-model="iitem.require"
+                            >必填</el-checkbox
+                          >
+                          <span
+                            class="ctl_btn ctl_btn_note"
+                            @click="addNote(iitem)"
+                            >注释</span
+                          >
+                          <span
+                            class="ctl_btn ctl_btn_del"
+                            @click="item.children.splice(index, 1)"
+                            >删除</span
+                          >
+                        </font>
+                        <el-button type="primary" class="gdrag drag" size="mini">排序</el-button>
+                      </section>
+                      <section v-if="iitem.type == 'textarea'">
+                        <el-input
+                          :readonly="iitem.edit"
+                          v-model="iitem.label"
+                          :class="[
+                            iitem.edit ? 'edit_label' : '',
+                            iitem.require ? 'require' : '',
+                          ]"
+                        ></el-input>
+                        <el-input
+                          type="textarea"
+                          placeholder="请输入"
+                          v-model="iitem.placeholder"
+                        ></el-input>
+                        <font>
+                          <span
+                            class="ctl_btn ctl_btn_note"
+                            @click="addNote(iitem)"
+                            >注释</span
+                          >
+                          <span
+                            class="ctl_btn ctl_btn_del"
+                            @click="item.children.splice(index, 1)"
+                            >删除</span
+                          >
+                        </font>
+                        <el-button type="primary" class="gdrag drag" size="mini">排序</el-button>
+                      </section>
 
-                    <section v-if="iitem.type == 'radio'" class="radio">
-                      <el-input
-                        :readonly="iitem.edit"
-                        v-model="iitem.label"
-                        :class="[
-                          iitem.edit ? 'edit_label' : '',
-                          iitem.require ? 'require' : '',
-                        ]"
-                      ></el-input
-                      >(单选)
-                      <el-radio-group>
-                        <el-radio
-                          :label="iiitem.label"
-                          v-for="(iiitem, index) in iitem.items"
-                          :key="index"
-                        >
-                          <el-input
-                            :readonly="iitem.edit"
-                            v-model="iiitem.label"
-                            :class="iitem.edit ? 'edit_label' : ''"
-                          ></el-input>
-                          <template v-if="!iitem.edit">
-                            <i
-                              class="el-icon-minus opicon"
-                              @click="minusOption(iitem.items, index)"
-                            ></i
-                            ><i
-                              class="el-icon-plus opicon"
-                              @click="plusOption(iitem.items, index)"
-                            ></i>
-                          </template>
-                        </el-radio>
-                      </el-radio-group>
-                      <font>
-                        <el-checkbox
-                          class="item_require"
-                          v-model="iitem.require"
-                          >必填</el-checkbox
-                        >
-                        <span
-                          class="ctl_btn ctl_btn_note"
-                          @click="addNote(iitem)"
-                          >注释</span
-                        >
-                        <span
-                          @click="iitem.edit = !iitem.edit"
-                          class="ctl_btn ctl_btn_edit"
-                          >{{ iitem.edit ? "编辑" : "保存" }}</span
-                        >
-                        <span
-                          @click="item.children.splice(index, 1)"
-                          class="ctl_btn ctl_btn_del"
-                          >删除</span
-                        >
-                      </font>
-                    </section>
+                      <section v-if="iitem.type == 'radio'" class="radio">
+                        <el-input
+                          :readonly="iitem.edit"
+                          v-model="iitem.label"
+                          :class="[
+                            iitem.edit ? 'edit_label' : '',
+                            iitem.require ? 'require' : '',
+                          ]"
+                        ></el-input
+                        >(单选)
+                        <el-radio-group>
+                          <el-radio
+                            :label="iiitem.label"
+                            v-for="(iiitem, rindex) in iitem.items"
+                            :key="'gr'+rindex"
+                          >
+                            <el-input
+                              :readonly="iitem.edit"
+                              v-model="iiitem.label"
+                              :class="iitem.edit ? 'edit_label' : ''"
+                            ></el-input>
+                            <template v-if="!iitem.edit">
+                              <i
+                                class="el-icon-minus opicon"
+                                @click="minusOption(iitem.items, index)"
+                              ></i
+                              ><i
+                                class="el-icon-plus opicon"
+                                @click="plusOption(iitem.items, index)"
+                              ></i>
+                            </template>
+                          </el-radio>
+                        </el-radio-group>
+                        <font>
+                          <el-checkbox
+                            class="item_require"
+                            v-model="iitem.require"
+                            >必填</el-checkbox
+                          >
+                          <span
+                            class="ctl_btn ctl_btn_note"
+                            @click="addNote(iitem)"
+                            >注释</span
+                          >
+                          <span
+                            @click="item.children.splice(index, 1)"
+                            class="ctl_btn ctl_btn_del"
+                            >删除</span
+                          >
+                        </font>
+                        <el-button type="primary" class="gdrag drag" size="mini">排序</el-button>
+                      </section>
 
-                    <section v-if="iitem.type == 'checkbox'" class="checkbox">
-                      <el-input
-                        :readonly="iitem.edit"
-                        v-model="iitem.label"
-                        :class="[
-                          iitem.edit ? 'edit_label' : '',
-                          iitem.require ? 'require' : '',
-                        ]"
-                      ></el-input
-                      >(多选)
-                      <el-radio-group>
-                        <el-checkbox
-                          :label="iiitem.label"
-                          v-for="(iiitem, index) in iitem.items"
-                          :key="index"
-                        >
-                          <el-input
-                            :readonly="iitem.edit"
-                            v-model="iiitem.label"
-                            :class="iitem.edit ? 'edit_label' : ''"
-                          ></el-input>
-                          <template v-if="!iitem.edit">
-                            <i
-                              class="el-icon-minus opicon"
-                              @click="minusOption(iitem.items, index)"
-                            ></i
-                            ><i
-                              class="el-icon-plus opicon"
-                              @click="plusOption(iitem.items, index)"
-                            ></i>
-                          </template>
-                        </el-checkbox>
-                      </el-radio-group>
-                      <font>
-                        <el-checkbox
-                          class="item_require"
-                          v-model="iitem.require"
-                          >必填</el-checkbox
-                        >
-                        <span
-                          class="ctl_btn ctl_btn_note"
-                          @click="addNote(iitem)"
-                          >注释</span
-                        >
-                        <span
-                          @click="iitem.edit = !iitem.edit"
-                          class="ctl_btn ctl_btn_edit"
-                          >{{ iitem.edit ? "编辑" : "保存" }}</span
-                        >
-                        <span
-                          @click="item.children.splice(index, 1)"
-                          class="ctl_btn ctl_btn_del"
-                          >删除</span
-                        >
-                      </font>
-                    </section>
+                      <section v-if="iitem.type == 'checkbox'" class="checkbox">
+                        <el-input
+                          :readonly="iitem.edit"
+                          v-model="iitem.label"
+                          :class="[
+                            iitem.edit ? 'edit_label' : '',
+                            iitem.require ? 'require' : '',
+                          ]"
+                        ></el-input
+                        >(多选)
+                        <el-radio-group>
+                          <el-checkbox
+                            :label="iiitem.label"
+                            v-for="(iiitem, index) in iitem.items"
+                            :key="'gc'+index"
+                          >
+                            <el-input
+                              :readonly="iitem.edit"
+                              v-model="iiitem.label"
+                              :class="iitem.edit ? 'edit_label' : ''"
+                            ></el-input>
+                            <template v-if="!iitem.edit">
+                              <i
+                                class="el-icon-minus opicon"
+                                @click="minusOption(iitem.items, index)"
+                              ></i
+                              ><i
+                                class="el-icon-plus opicon"
+                                @click="plusOption(iitem.items, index)"
+                              ></i>
+                            </template>
+                          </el-checkbox>
+                        </el-radio-group>
+                        <font>
+                          <el-checkbox
+                            class="item_require"
+                            v-model="iitem.require"
+                            >必填</el-checkbox
+                          >
+                          <span
+                            class="ctl_btn ctl_btn_note"
+                            @click="addNote(iitem)"
+                            >注释</span
+                          >
+                          <span
+                            @click="item.children.splice(index, 1)"
+                            class="ctl_btn ctl_btn_del"
+                            >删除</span
+                          >
+                        </font>
+                        <el-button type="primary" class="gdrag drag" size="mini">排序</el-button>
+                      </section>
 
-                    <section v-if="iitem.type == 'image'">
-                      <!-- <el-input :readonly="item.edit" v-model="item.label" :class="item.edit?'edit_label':''"></el-input> -->
-                      <el-input
-                        :readonly="iitem.edit"
-                        v-model="iitem.label"
-                        :class="[
-                          iitem.edit ? 'edit_label' : '',
-                          iitem.require ? 'require' : '',
-                        ]"
-                      ></el-input>
-                      <el-upload
-                        action="/api/admin/uploadfile"
-                        list-type="picture-card"
-                        :on-preview="handlePreview"
-                        :on-remove="handleRemove"
-                        limit="9"
-                      >
-                        <i class="el-icon-plus"></i>
-                      </el-upload>
-                      <font>
-                        <el-checkbox class="item_require" v-model="iitem.require"
-                          >必填</el-checkbox
+                      <section v-if="iitem.type == 'image'">
+                        <!-- <el-input :readonly="item.edit" v-model="item.label" :class="item.edit?'edit_label':''"></el-input> -->
+                        <el-input
+                          :readonly="iitem.edit"
+                          v-model="iitem.label"
+                          :class="[
+                            iitem.edit ? 'edit_label' : '',
+                            iitem.require ? 'require' : '',
+                          ]"
+                        ></el-input>
+                        <el-upload
+                          action="/api/admin/uploadfile"
+                          list-type="picture-card"
+                          :on-preview="handlePreview"
+                          :on-remove="handleRemove"
+                          limit="9"
                         >
-                        <span
-                          class="ctl_btn ctl_btn_note"
-                          @click="addNote(iitem)"
-                          >注释</span
-                        >
-                        <span
-                          @click="iitem.edit = !iitem.edit"
-                          class="ctl_btn ctl_btn_edit"
-                          >{{ iitem.edit ? "编辑" : "保存" }}</span
-                        >
-                        <span
-                          @click="item.children.splice(index, 1)"
-                          class="ctl_btn ctl_btn_del"
-                          >删除</span
-                        >
-                      </font>
-                    </section>
-                  </el-form-item>
+                          <i class="el-icon-plus"></i>
+                        </el-upload>
+                        <font>
+                          <el-checkbox
+                            class="item_require"
+                            v-model="iitem.require"
+                            >必填</el-checkbox
+                          >
+                          <span
+                            class="ctl_btn ctl_btn_note"
+                            @click="addNote(iitem)"
+                            >注释</span
+                          >
+                          <span
+                            @click="item.children.splice(index, 1)"
+                            class="ctl_btn ctl_btn_del"
+                            >删除</span
+                          >
+                        </font>
+                        <el-button type="primary" class="gdrag drag" size="mini">排序</el-button>
+                      </section>
+                    </el-form-item>
+                  </transition-group>
+                  </vuedraggable>
                 </section>
                 <font style="top: -18px" v-if="item.type == 'group'">
                   <span @click="widgetList.splice(index, 1)">删除</span>
@@ -932,7 +905,7 @@
             </el-form-item>
             <el-form-item>
               <ul class="img_list">
-                <li v-for="(item, index) in noteImgs" :key="index">
+                <li v-for="(item, index) in noteImgs" :key="'note'+index">
                   <img :src="item" alt="" />
                   <p class="move">
                     <i @click="remove(index)" class="el-icon-delete"></i>
@@ -977,8 +950,7 @@
             <h5 align="center" class="tpl_title">{{ title }}</h5>
             <el-form ref="form" :model="form" class="tpl_form over_y">
               <template v-for="(item, index) in widgetList">
-                <h6 v-if="item.type=='group'" align="center" class="tpl_title">----{{ item.label }}----</h6>
-                <el-form-item :key="index" :label="item.label + item.cntype">
+                <el-form-item v-if="item.type!='group'" :key="'review'+index" :label="item.label + item.cntype">
                   <el-tooltip
                     class="item"
                     effect="dark"
@@ -986,7 +958,7 @@
                     placement="bottom-end"
                   >
                     <i
-                      v-if="item.noteDesc||item.noteImgs"
+                      v-if="item.noteDesc || item.noteImgs"
                       class="el-icon-info"
                       style="position: absolute; top: -28px; right: 0px"
                     ></i>
@@ -997,7 +969,7 @@
                           :src="item"
                           alt=""
                           v-for="(item, index) in item.noteImgs"
-                          :key="index"
+                          :key="'noteimgs'+index"
                         />
                       </div>
                     </div>
@@ -1023,7 +995,7 @@
                     <el-radio
                       :label="iitem.label"
                       v-for="(iitem, index) in item.items"
-                      :key="index"
+                      :key="'review_r'+index"
                       >{{ iitem.label }}</el-radio
                     >
                   </el-radio-group>
@@ -1035,7 +1007,7 @@
                     <el-checkbox
                       :label="iitem.label"
                       v-for="(iitem, index) in item.items"
-                      :key="index"
+                      :key="'review_c'+index"
                       >{{ iitem.label }}</el-checkbox
                     >
                   </el-radio-group>
@@ -1071,6 +1043,116 @@
                     <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> -->
                   </el-upload>
                 </el-form-item>
+                <!-- 域组件展示 -->
+                <h6
+                  v-if="item.type == 'group'"
+                  align="center"
+                  class="group_title"
+                  :key="'revire_g'+index"
+                >
+                  {{ item.label }}
+                </h6>
+                <section class="groupMain" v-if="item.type == 'group'" :key="'review_gi'+index">
+                  <template v-for="(iitem, index) in item.children">
+                    <el-form-item
+                      :key="'review_gc'+index"
+                      :label="iitem.label + iitem.cntype"
+                    >
+                      <el-tooltip
+                        class="item"
+                        effect="dark"
+                        content="Left Bottom 提示文字"
+                        placement="bottom-end"
+                      >
+                        <i
+                          v-if="iitem.noteDesc || iitem.noteImgs"
+                          class="el-icon-info"
+                          style="position: absolute; top: -28px; right: 0px"
+                        ></i>
+                        <div slot="content" class="tool_text">
+                          <p>{{ iitem.noteDesc }}</p>
+                          <div class="toolText_img">
+                            <img
+                              :src="iitem"
+                              alt=""
+                              v-for="(iitem, index) in iitem.noteImgs"
+                              :key="'review_gc_noteimgs'+index"
+                            />
+                          </div>
+                        </div>
+                      </el-tooltip>
+                      <el-input
+                        :class="iitem.require ? 'require' : ''"
+                        v-if="iitem.type == 'input'"
+                        v-model="form.label"
+                        :placeholder="iitem.placeholder"
+                      ></el-input>
+                      <el-input
+                        :class="iitem.require ? 'require' : ''"
+                        v-if="iitem.type == 'textarea'"
+                        type="textarea"
+                        v-model="form.label"
+                        :placeholder="iitem.placeholder"
+                      ></el-input>
+                      <el-radio-group
+                        class="cus_select"
+                        v-if="iitem.type == 'radio'"
+                        :class="iitem.require ? 'require' : ''"
+                      >
+                        <el-radio
+                          :label="iiitem.label"
+                          v-for="(iiitem, index) in iitem.items"
+                          :key="'review_gcr'+index"
+                          >{{ iiitem.label }}</el-radio
+                        >
+                      </el-radio-group>
+                      <el-radio-group
+                        class="cus_select"
+                        v-if="iitem.type == 'checkbox'"
+                        :class="iitem.require ? 'require' : ''"
+                      >
+                        <el-checkbox
+                          :label="iiitem.label"
+                          v-for="(iiitem, index) in iitem.items"
+                          :key="'review_gcc'+index"
+                          >{{ iiitem.label }}</el-checkbox
+                        >
+                      </el-radio-group>
+                      <el-upload
+                        :class="iitem.require ? 'require' : ''"
+                        v-if="iitem.type == 'image'"
+                        action="/api/admin/uploadfile"
+                        list-type="picture-card"
+                        :on-preview="handlePreview"
+                        :on-remove="handleRemove"
+                      >
+                        <i class="el-icon-plus"></i>
+                      </el-upload>
+                      <el-upload
+                        v-if="iitem.type == 'file'"
+                        class="upload-demo"
+                        ref="upload"
+                        action="/api/admin/uploadfile"
+                        :on-preview="handlePreview"
+                        :on-remove="handleRemove"
+                        :file-list="fileList"
+                        :auto-upload="false"
+                      >
+                        <!-- <el-button slot="trigger" size="small" type="primary">选取文件</el-button> -->
+                        <el-button
+                          style="margin-left: 10px"
+                          size="small"
+                          type="primary"
+                          plain
+                          @click="submitUpload"
+                          >添加文件</el-button
+                        >
+                        <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> -->
+                      </el-upload>
+                    </el-form-item>
+                  </template>
+                </section>
+                <!-- 域组件end -->
               </template>
               <el-form-item v-if="this.widgetList.length">
                 <el-button
@@ -1122,7 +1204,7 @@ export default {
   components: { vuedraggable, fuEditor },
   data() {
     return {
-      fileList:[],
+      fileList: [],
       noteDesc: "",
       noteImgs: [],
       realImgs: [],
@@ -1227,7 +1309,7 @@ export default {
         {
           type: "group",
           cntype: "",
-          label: "请输入域组件标题",
+          label: "域组件",
           placeholder: "请输入",
           edit: false,
           require: true,
@@ -1238,8 +1320,8 @@ export default {
     };
   },
   methods: {
-    limitUploadNum(files,fileList){
-      this.$message.alert("最多只能上传9张图片!")
+    limitUploadNum(files, fileList) {
+      this.$message.alert("最多只能上传9张图片!");
     },
     showNoteInfo() {
       // this.dialogTitle1 = true
@@ -1248,7 +1330,7 @@ export default {
     activeItem(index) {
       var widgetList = this.widgetList;
       for (let i = 0; i < widgetList.length; i++) {
-        if(widgetList[i].type=="group"){
+        if (widgetList[i].type == "group") {
           if (i == index) {
             this.$set(widgetList[i], "active", !widgetList[i].active);
           } else {
@@ -1265,9 +1347,9 @@ export default {
     upload() {},
     imgchange(file, fileList) {
       var img = this.noteImgs;
-      if(img.length>8){
+      if (img.length > 8) {
         this.$message.error("最多只能上传9张图片!");
-        return 
+        return;
       }
       img.push(fileList.response.data);
       this.noteImgs = img;
@@ -1385,8 +1467,10 @@ export default {
         return val.type == "group" && val.active == 1;
       });
       if (gwidget.length) {
+        item.label = item.label + (gwidget[0].children.length + 1).toString();
         gwidget[0].children.push(item);
       } else {
+        item.label = item.label + (this.widgetList.length + 1).toString();
         this.widgetList.push(item);
       }
     },

+ 2 - 2
vue.config.js

@@ -2,8 +2,8 @@ module.exports={
     devServer:{
         proxy:{
             '/api':{
-                target:'http://39.107.246.59:81',
-                // target:'https://test.scxjc.club',
+                // target:'http://39.107.246.59:81',
+                target:'https://test.scxjc.club',
                 // target:'http://caos.tederen.com',
                 changeOrigin: true,
             }