回访模板管理

admin-ui/src/assets/styles/extend.scss

@@ -223,7 +223,7 @@
   padding: 20px 20px 20px 0px;
   border-radius: 5px;
   overflow-y: auto;
-  height: calc(100vh - 420px);
+  max-height: calc(100vh - 420px);
   .moptions {
     margin-bottom: 20px !important;
     .minp {
@@ -281,76 +281,85 @@
     font-weight: bold;
     margin-top: 10px;
   }
-}
-.items {
-  .vtitle {
-    text-align: left;
-    font-size: 15px;
-    padding: 10px 0px 8px 0px;
-    font-weight: bold;
-    position: relative;
-    .ifnull {
-      color: red;
+  .items {
+    .vtitle {
+      text-align: left;
+      font-size: 15px;
+      padding: 10px 0px 8px 0px;
+      font-weight: bold;
+      position: relative;
+      .ifnull {
+        color: red;
+      }
+      .tm {
+        padding-left: 5px;
+      }
     }
-    .tm {
-      padding-left: 5px;
+    textarea {
+      background-color: #f3f3f3;
+      border-radius: 5px;
+      padding: 7px;
+      font-size: 14px;
+      height: 70px;
+      width: 100%;
+      border: 0px;
+      margin-top: 6px;
+    }
+    input {
+      background-color: #f3f3f3;
+      border-radius: 5px;
+      padding: 10px;
+      font-size: 14px;
+      width: 100%;
+      border: 0px;
+      margin-top: 3px;
+    }
+    .fjian {
+      width: 100%;
+      margin-top: 6px;
+    }
+    .mchoice {
+      background-color: #f3f3f3;
+      margin-top: 5px;
+      padding: 9px;
+      border-radius: 5px;
+      font-size: 14px;
+      color: #656363;
+      .omit {
+        width: 80%;
+        float: left;
+      }
+      .gx {
+        font-weight: bold;
+        color: #4581fb;
+        padding-left: 5px;
+      }
+      .icon {
+        float: right;
+        margin-top: 3px;
+      }
+    }
+    .ops {
+      overflow: hidden;
+      .op {
+        padding: 8px;
+        background-color: #f7f7f7;
+        margin-top: 6px;
+        font-size: 14px;
+        margin-right: 10px;
+        border-radius: 3px;
+        float: left;
+        color: #656363;
+        &.active {
+          background-color: #4581fb;
+          color: white;
+        }
+      }
     }
   }
-  textarea {
-    background-color: #f3f3f3;
-    border-radius: 5px;
-    padding: 7px;
-    font-size: 14px;
-    height: 60px;
-    width: 100%;
-    border: 0px;
-  }
-  input {
-    background-color: #f3f3f3;
-    border-radius: 5px;
-    padding: 10px;
-    font-size: 14px;
+  .tjiao {
     width: 100%;
+    background-color: #4581fb;
     border: 0px;
   }
-  .fjian {
-    padding-left: 18px;
-    color: #2196f3;
-    padding-bottom: 5px;
-  }
-}
-.mchoice {
-  background-color: #f3f3f3;
-  margin-top: 5px;
-  padding: 9px;
-  border-radius: 5px;
-  font-size: 14px;
-  color: #656363;
-  .omit {
-    width: 80%;
-    float: left;
-  }
-  .gx {
-    font-weight: bold;
-    color: #4581fb;
-    padding-left: 5px;
-  }
-  .icon {
-    float: right;
-    margin-top: 3px;
-  }
 }
-  .op {
-    padding: 8px;
-    background-color: #f7f7f7;
-    margin-top: 10px;
-    font-size: 14px;
-    margin-right: 10px;
-    border-radius: 3px;
-    float: left;
-    color: #656363;
-    &.active {
-      background-color: #4581fb;
-      color: white;
-    }
-  }

admin-ui/src/views/work/follow/template/edit.vue

@@ -1,11 +1,23 @@
 <template>
   <div class="cmain" style="overflow: hidden">
-    <div class="fv">
-      <div class="f">
+    <el-row>
+      <el-col :span="16">
         <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-          <el-form-item label="模板名称" prop="title">
-            <el-input v-model="form.title" placeholder="请输入标题" clearable />
-          </el-form-item>
+          <el-row>
+            <el-col :span="18">
+              <el-form-item label="模板名称" prop="title">
+                <el-input v-model="form.title" placeholder="请输入标题" clearable />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="状态" prop="state">
+                <el-select v-model="form.state" placeholder="请选择">
+                  <el-option label="启用" :value="0"></el-option>
+                  <el-option label="停用" :value="1"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
           <el-form-item label="问题选项" prop="op">
             <div class="mbg">
               <el-form-item :label="'' + (index + 1)" v-for="(item, index) in form.op" :key="item.key" :prop="'op.' + index + '.name'" :rules="rules.dynamic" class="moptions">
@@ -28,13 +40,13 @@
                 <div class="mcopy" @click="copy(item)">复制</div>
               </el-form-item>
               <div class="addBtn">
-                <el-button icon="el-icon-plus" @click="add()">添加内容</el-button>
+                <el-button icon="el-icon-plus" @click="add()">添加问题</el-button>
               </div>
             </div>
           </el-form-item>
         </el-form>
-      </div>
-      <div class="f" style="flex: 0.5">
+      </el-col>
+      <el-col :span="8">
         <div class="div-mc">
           <div class="guise-mobile guise-mobile-2">
             <div class="guise-mobile-show" ref="scrollbar">
@@ -51,30 +63,26 @@
                   <input v-if="item.input == '填空'" placeholder="请输入" :disabled="true" />
                   <textarea v-if="item.input == '多行文本'" :disabled="true" placeholder="请输入"></textarea>
                   <input type="number" v-if="item.input == '电话'" placeholder="请输入" :disabled="true" />
-                  <div class="mchoice" v-if="item.input == '单选' || item.input == '多选' || item.input == '判断'">
-                    <div v-if="item.selects.length <= 4">
-                      <div v-for="(op, i) in item.selects" :key="op.name">
-                        <div class="op" :class="{ active: op.check }" @click="check(item, op)">{{ op.name }}</div>
-                        <!--如果选项要输入显示手动输入框-->
-                        <textarea v-if="op.input && op.check" v-model="op.s_value" :placeholder="'请输入' + op.name" style="margin-top: 5px; float: left"></textarea>
-                      </div>
-                    </div>
-                    <div v-else>
-                      <span>点击选择</span>
-                      <i class="el-icon-caret-bottom icon"></i>
+                  <div v-if="item.input == '附件'"><el-button class="fjian" icon="el-icon-upload">选择文件</el-button></div>
+                  <div class="ops" v-if="item.selects.length <= 4">
+                    <div v-for="(op, i) in item.selects" :key="op.name">
+                      <div class="op">{{ op.name }}</div>
                     </div>
                   </div>
-                  <div v-if="item.input == '附件'"><el-button style="width: 100%" icon="el-icon-upload">选择文件</el-button></div>
+                  <div v-else class="mchoice">
+                    <span>点击选择</span>
+                    <i class="el-icon-caret-bottom icon"></i>
+                  </div>
                 </div>
               </div>
               <el-divider>结束</el-divider>
-              <el-button type="primary" style="width: 100%; background-color: #4581fb; border: 0px">提交</el-button>
+              <el-button type="primary" class="tjiao">提交</el-button>
               <!--手机展示内容放置区-->
             </div>
           </div>
         </div>
-      </div>
-    </div>
+      </el-col>
+    </el-row>
     <div class="mfooter">
       <el-button type="primary" @click="submitForm">确 定</el-button>
       <el-button @click="$layer.close(layerid)">取 消</el-button>
@@ -86,7 +94,7 @@
 export default {
   data() {
     return {
-      form: { tag: 1, state: 0, op: [] },
+      form: { state: 0, op: [] },
       nulls: ['必填', '非必填'],
       selects: ['填空', '单选', '多选', '判断', '附件', '多行文本', '电话'],
       rules: {
@@ -127,10 +135,10 @@ export default {
     //添加内容
     add() {
       this.form.op.push({ name: '', ifnull: '必填', input: '填空', selects: [], show: false });
-      /* this.$nextTick(() => {
+      this.$nextTick(() => {
         let scrollElem = this.$refs.scrollbar;
         scrollElem.scrollTo({ top: scrollElem.scrollHeight, behavior: 'smooth' });
-      }); */
+      });
     },
     //删除问题
     del(item) {