滚动条定位

src/components/icss/AddMedicinePrompt.vue

@@ -1,98 +1,106 @@
 <template>
-  <div class="NoiseTemplateWrapper TemplateWrapper knowledgeWrapper">
-    <crumbs
-      :title="'医学术语静态知识维护-'+title"
-      class="topBack"
-      :param="$route.params"
-      linkTo="MedicinePrompt"
-    ></crumbs>
-    <div class="info-container">
-      <el-form :rules="rules" :model="form" label-width="160px" ref="groups">
-        <el-form-item v-if="!isEdit" label="选择标准术语：" prop="selectedTerm">
-          <el-select
-            v-model="form.selectedTerm"
-            filterable
-            remote
-            clearable
-            :loading="showDrop"
-            loading-text="加载中..."
-            @change="changeWord"
-            @visible-change="handleVisible"
-            value-key="conceptId"
-            @clear="handleClear"
-            ref="termName"
-            placeholder="搜索"
-            :remote-method="searchTerms"
+  <el-scrollbar style="height: 100%" ref="elscrollbar" id="message-container">
+    <div class="NoiseTemplateWrapper TemplateWrapper knowledgeWrapper">
+      <crumbs
+        :title="'医学术语静态知识维护-'+title"
+        class="topBack"
+        :param="$route.params"
+        linkTo="MedicinePrompt"
+      ></crumbs>
+      <div class="info-container">
+        <el-form :rules="rules" :model="form" label-width="160px" ref="groups">
+          <el-form-item v-if="!isEdit" label="选择标准术语：" prop="selectedTerm">
+            <el-select
+              v-model="form.selectedTerm"
+              filterable
+              remote
+              clearable
+              :loading="showDrop"
+              loading-text="加载中..."
+              @change="changeWord"
+              @visible-change="handleVisible"
+              value-key="conceptId"
+              @clear="handleClear"
+              ref="termName"
+              placeholder="搜索"
+              :remote-method="searchTerms"
+            >
+              <el-option
+                v-for="(term,idx) in terms"
+                :key="idx"
+                :label="term.name+(term.typeName?'('+term.typeName+')':'')"
+                :value="term"
+                :title="term.name+(term.typeName?'('+term.typeName+')':'')"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="已选择标准术语：" label-width="160px">{{form.selectedTermName}}</el-form-item>
+          <el-form-item
+            v-if="form.selectedTerm&&(form.typeId==1||form.typeId==3||form.typeId==4||form.typeId==5)"
+            :label="titleChange"
+            prop="titleChange"
+            label-width="160px"
           >
-            <el-option
-              v-for="(term,idx) in terms"
-              :key="idx"
-              :label="term.name+(term.typeName?'('+term.typeName+')':'')"
-              :value="term"
-              :title="term.name+(term.typeName?'('+term.typeName+')':'')"
-            ></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="已选择标准术语：" label-width="160px">{{form.selectedTermName}}</el-form-item>
-        <el-form-item
-          v-if="form.selectedTerm&&(form.typeId==1||form.typeId==3||form.typeId==4||form.typeId==5)"
-          :label="titleChange"
-          prop="titleChange"
-          label-width="160px"
-        >
-          <el-input v-model="form.titleChange"></el-input>
-        </el-form-item>
-        <p class="line"></p>
-        <InfoParagraph
-          v-for="(f,i) in form.prags"
-          v-if="!upload"
-          :key="(i+1)*10000 + showType"
-          :data="f"
-          :index="i"
-          :total="form.prags.length"
-          :isEdit="isEdit"
-          ref="subForm"
-          @add="addParagraph(i)"
-          @del="delParagraph"
-          @reOrder="reOrder"
-          :showType="showType"
-        ></InfoParagraph>
-        <el-form-item v-if="upload" label="标题名称：" prop="fileTitle" label-width="160px">
-          <el-input v-model="form.fileTitle"></el-input>
-        </el-form-item>
-        <el-form-item v-if="upload" label="上传文件：" ref="upload" prop="fileList" label-width="160px">
-          <el-upload
-            @mouseenter.native="handleMouseenter"
-            @mouseleave.native="handleMouseleave"
-            class="upload-demo"
-            :action="config.urls.promptServer"
-            name="upfile"
-            :multiple="false"
-            :limit="1"
-            :on-preview="handlePreview"
-            :on-remove="handleRemove"
-            :before-upload="handleBeforeUpLoad"
-            :before-remove="beforeRemove"
-            :on-change="handleChange"
-            :on-success="handleSuccess"
-            :show-file-list="showFileList"
-            :file-list="form.fileList"
+            <el-input v-model="form.titleChange"></el-input>
+          </el-form-item>
+          <p class="line"></p>
+          <InfoParagraph
+            v-for="(f,i) in form.prags"
+            v-if="!upload"
+            :key="(i+1)*10000 + showType"
+            :data="f"
+            :index="i"
+            :total="form.prags.length"
+            :isEdit="isEdit"
+            ref="subForm"
+            @add="addParagraph(i)"
+            @del="delParagraph"
+            @reOrder="reOrder"
+            :showType="showType"
+          ></InfoParagraph>
+          <el-form-item v-if="upload" label="标题名称：" prop="fileTitle" label-width="160px">
+            <el-input v-model="form.fileTitle"></el-input>
+          </el-form-item>
+          <el-form-item
+            v-if="upload"
+            label="上传文件："
+            ref="upload"
+            prop="fileList"
+            label-width="160px"
           >
-            <el-button size="small" type="primary" v-if="showUpLoad">点击上传</el-button>
-            <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
-          </el-upload>
-          <span class="tipInfo" v-show="isShowTip">{{form.fileList[0]&&form.fileList[0].name}}</span>
-          <!-- <el-button size="small" type="primary" >点击上传</el-button> -->
-        </el-form-item>
-        <el-form-item label-width="160px">
-          <div class="uploadInfo" v-if="isSuccessUpload===1">文件上传中，请稍等...</div>
-        </el-form-item>
-      </el-form>
-      <div class="btn">
-        <el-button type="primary" :disabled="saveDisable" @click="submitForm">确 定</el-button>
+            <el-upload
+              @mouseenter.native="handleMouseenter"
+              @mouseleave.native="handleMouseleave"
+              class="upload-demo"
+              :action="config.urls.promptServer"
+              name="upfile"
+              :multiple="false"
+              :limit="1"
+              :on-preview="handlePreview"
+              :on-remove="handleRemove"
+              :before-upload="handleBeforeUpLoad"
+              :before-remove="beforeRemove"
+              :on-change="handleChange"
+              :on-success="handleSuccess"
+              :show-file-list="showFileList"
+              :file-list="form.fileList"
+            >
+              <el-button size="small" type="primary" v-if="showUpLoad">点击上传</el-button>
+              <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
+            </el-upload>
+            <span class="tipInfo" v-show="isShowTip">{{form.fileList[0]&&form.fileList[0].name}}</span>
+            <!-- <el-button size="small" type="primary" >点击上传</el-button> -->
+          </el-form-item>
+          <el-form-item label-width="160px">
+            <div class="uploadInfo" v-if="isSuccessUpload===1">文件上传中，请稍等...</div>
+          </el-form-item>
+        </el-form>
+        <div class="btn">
+          <el-button type="primary" :disabled="saveDisable" @click="submitForm">确 定</el-button>
+        </div>
       </div>
     </div>
-  </div>
+  </el-scrollbar>
 </template>
 <script>
 /**
@@ -109,6 +117,7 @@ export default {
   },
   data() {
     return {
+      isFixedTop: true,
       isEdit: false,
       isCopy: false,
       title: '添加',
@@ -429,7 +438,7 @@ export default {
     },
 
     // 额外的表单检验
-    formVal(){            
+    formVal() {
       let positiontemp = this.form.prags.map(item => {
         return [...item.position];
       });
@@ -457,8 +466,15 @@ export default {
 
         if (this.form.titleChange.trim() !== '') {
           // console.log('内容不为空');
-          return true
+          return true;
         } else {
+          // this.$nextTick(() => {
+          //   this.$refs.elscrollbar.$refs['wrap'] = 0;
+          // });
+          var div = this.$refs['elscrollbar'].$refs['wrap'];
+          this.$nextTick(() => {
+            div.scrollTop = 0;
+          });
           return false;
         }
         // return;
@@ -475,8 +491,12 @@ export default {
 
         if (this.form.titleChange.trim() !== '') {
           // console.log('内容不为空');
-          return true
+          return true;
         } else {
+          var div = this.$refs['elscrollbar'].$refs['wrap'];
+          this.$nextTick(() => {
+            div.scrollTop = 0;
+          });
           return false;
         }
       }
@@ -487,9 +507,9 @@ export default {
         this.warning('文件上传中，请稍等');
         return;
       }
-      let flagVal = this.formVal()   // 额外的表单校验
+      let flagVal = this.formVal(); // 额外的表单校验
       // console.log(flagVal,'flagVal======================');
-      if(flagVal === false) return
+      if (flagVal === false) return;
       //验证外层表单
       let goOn = true,
         it = null;

src/components/icss/plan/AddPlan.vue

@@ -1,150 +1,152 @@
 <template>
-  <div class="AddPlanWrapper clearfix" @click="close">
-    <crumbs
-      :title="isEdit ? '电子病历方案配置-修改方案' : '电子病历方案配置-添加方案'"
-      class="topBack"
-      :param="$route.params"
-      linkTo="Plan"
-    ></crumbs>
-    <div class="AddPlanBox">
-      <el-row :gutter="20">
-        <el-col :span="16">
-          <el-form ref="form" :model="form" label-width="80px" :rules="rules">
-            <el-form-item label="方案名称" prop="planName">
-              <el-input v-model="form.planName" placeholder="2-30位,可输入汉字、字母、数字和下划线"></el-input>
-            </el-form-item>
-            <el-form-item label="方案编码" prop="planCode">
-              <el-input v-model="form.planCode" placeholder="4-15位,可输入字母、数字和下划线"></el-input>
-            </el-form-item>
-            <el-form-item label="方案配置">
-              <ul>
-                <li>
-                  <div class="title">
-                    <div class="handleIcon" @click="openPlanItems">
-                      <img
-                        src="../../../images/multi.png"
-                        alt="辅助信息"
-                        :class="{'open' : isOpenCloseItems}"
-                      />
+  <el-scrollbar style="height: 100%">
+    <div class="AddPlanWrapper clearfix" @click="close">
+      <crumbs
+        :title="isEdit ? '电子病历方案配置-修改方案' : '电子病历方案配置-添加方案'"
+        class="topBack"
+        :param="$route.params"
+        linkTo="Plan"
+      ></crumbs>
+      <div class="AddPlanBox">
+        <el-row :gutter="20">
+          <el-col :span="16">
+            <el-form ref="form" :model="form" label-width="80px" :rules="rules">
+              <el-form-item label="方案名称" prop="planName">
+                <el-input v-model="form.planName" placeholder="2-30位,可输入汉字、字母、数字和下划线"></el-input>
+              </el-form-item>
+              <el-form-item label="方案编码" prop="planCode">
+                <el-input v-model="form.planCode" placeholder="4-15位,可输入字母、数字和下划线"></el-input>
+              </el-form-item>
+              <el-form-item label="方案配置">
+                <ul>
+                  <li>
+                    <div class="title">
+                      <div class="handleIcon" @click="openPlanItems">
+                        <img
+                          src="../../../images/multi.png"
+                          alt="辅助信息"
+                          :class="{'open' : isOpenCloseItems}"
+                        />
+                      </div>
+                      <h4>辅助信息</h4>
+                      <div class="titlwSwitch">
+                        <el-switch
+                          v-model="switchSubStatus"
+                          :active-value="1"
+                          :inactive-value="0"
+                          active-color="#4BC4D7"
+                          inactive-color="#BBBBBB"
+                        ></el-switch>
+                        <span class="titlwSwitchStatus">{{switchSubStatus === 1 ? '启用中' : '未启用'}}</span>
+                      </div>
                     </div>
-                    <h4>辅助信息</h4>
-                    <div class="titlwSwitch">
-                      <el-switch
-                        v-model="switchSubStatus"
-                        :active-value="1"
-                        :inactive-value="0"
-                        active-color="#4BC4D7"
-                        inactive-color="#BBBBBB"
-                      ></el-switch>
-                      <span class="titlwSwitchStatus">{{switchSubStatus === 1 ? '启用中' : '未启用'}}</span>
-                    </div>
-                  </div>
-                  <transition name="plus-icon">
-                    <div v-if="isOpenCloseItems">
-                      <ul class="sub" v-for="(item,index) in  planDefaultList" :key="item.id">
-                        <li class="planItem">
-                          <div class="sort">
-                            <div class="top">
-                              <img
-                                :src="isTopLight !== index ? require('../../../images/icon_default_top.png') : require('../../../images/icon_hover_top.png')"
-                                alt="上升"
-                                v-if="index !== 0"
-                                @click="sortPlan(item,index,'top')"
-                                @mouseover="handleMouseEnter1(index)"
-                                @mouseleave="handleMouseLeave1(index)"
-                              />
+                    <transition name="plus-icon">
+                      <div v-if="isOpenCloseItems">
+                        <ul class="sub" v-for="(item,index) in  planDefaultList" :key="item.id">
+                          <li class="planItem">
+                            <div class="sort">
+                              <div class="top">
+                                <img
+                                  :src="isTopLight !== index ? require('../../../images/icon_default_top.png') : require('../../../images/icon_hover_top.png')"
+                                  alt="上升"
+                                  v-if="index !== 0"
+                                  @click="sortPlan(item,index,'top')"
+                                  @mouseover="handleMouseEnter1(index)"
+                                  @mouseleave="handleMouseLeave1(index)"
+                                />
+                              </div>
+                              <div class="down">
+                                <img
+                                  :src="isDownLight !== index ? require('../../../images/icon_default_down.png') : require('../../../images/icon_hover_down.png')"
+                                  alt="下降"
+                                  v-if="index !== planDefaultList.length - 1"
+                                  @click="sortPlan(item,index,'down')"
+                                  @mouseover="handleMouseEnter(index)"
+                                  @mouseleave="handleMouseLeave(index)"
+                                />
+                              </div>
                             </div>
-                            <div class="down">
-                              <img
-                                :src="isDownLight !== index ? require('../../../images/icon_default_down.png') : require('../../../images/icon_hover_down.png')"
-                                alt="下降"
-                                v-if="index !== planDefaultList.length - 1"
-                                @click="sortPlan(item,index,'down')"
-                                @mouseover="handleMouseEnter(index)"
-                                @mouseleave="handleMouseLeave(index)"
-                              />
+                            <div class="openOrClose">
+                              <span class="planInfo">{{item.name}}</span>
+                              <div class="switch">
+                                <el-switch
+                                  v-model="item.status"
+                                  :active-value="1"
+                                  :inactive-value="0"
+                                  active-color="#4BC4D7"
+                                  inactive-color="#BBBBBB"
+                                ></el-switch>
+                              </div>
+                              <span class="planStatus">{{item.status === 1 ? '启用中' : '未启用'}}</span>
                             </div>
-                          </div>
-                          <div class="openOrClose">
-                            <span class="planInfo">{{item.name}}</span>
-                            <div class="switch">
-                              <el-switch
-                                v-model="item.status"
-                                :active-value="1"
-                                :inactive-value="0"
-                                active-color="#4BC4D7"
-                                inactive-color="#BBBBBB"
-                              ></el-switch>
+                            <div class="showNum" v-if="item.number">
+                              <span style="marginRight:8px;">默认显示个数</span>
+                              <el-select
+                                v-model="item.number"
+                                placeholder="请选择"
+                                size="small"
+                                :disabled="item.status !== 1 ? true: false"
+                              >
+                                <el-option label="1" value="1"></el-option>
+                                <el-option label="2" value="2"></el-option>
+                                <el-option label="3" value="3"></el-option>
+                                <el-option label="4" value="4"></el-option>
+                                <el-option label="5" value="5"></el-option>
+                                <el-option label="6" value="6"></el-option>
+                              </el-select>
                             </div>
-                            <span class="planStatus">{{item.status === 1 ? '启用中' : '未启用'}}</span>
-                          </div>
-                          <div class="showNum" v-if="item.number">
-                            <span style="marginRight:8px;">默认显示个数</span>
-                            <el-select
-                              v-model="item.number"
-                              placeholder="请选择"
-                              size="small"
-                              :disabled="item.status !== 1 ? true: false"
-                            >
-                              <el-option label="1" value="1"></el-option>
-                              <el-option label="2" value="2"></el-option>
-                              <el-option label="3" value="3"></el-option>
-                              <el-option label="4" value="4"></el-option>
-                              <el-option label="5" value="5"></el-option>
-                              <el-option label="6" value="6"></el-option>
-                            </el-select>
-                          </div>
-                        </li>
-                      </ul>
-                    </div>
-                  </transition>
-                </li>
-                <li>
-                  <div class="title">
-                    <div class="handleIcon">
-                      <img src="../../../images/multi.png" alt="医学知识" />
-                    </div>
-                    <h4>医学知识</h4>
-                    <div class="titlwSwitch">
-                      <el-switch
-                        v-model="switchMedStatus"
-                        :active-value="1"
-                        :inactive-value="0"
-                        active-color="#4BC4D7"
-                        inactive-color="#BBBBBB"
-                      ></el-switch>
-                      <span class="titlwSwitchStatus">{{switchMedStatus === 1 ? '启用中' : '未启用'}}</span>
-                    </div>
-                  </div>
-                </li>
-                <li>
-                  <div class="title">
-                    <div class="handleIcon">
-                      <img src="../../../images/multi.png" alt="医学知识" />
+                          </li>
+                        </ul>
+                      </div>
+                    </transition>
+                  </li>
+                  <li>
+                    <div class="title">
+                      <div class="handleIcon">
+                        <img src="../../../images/multi.png" alt="医学知识" />
+                      </div>
+                      <h4>医学知识</h4>
+                      <div class="titlwSwitch">
+                        <el-switch
+                          v-model="switchMedStatus"
+                          :active-value="1"
+                          :inactive-value="0"
+                          active-color="#4BC4D7"
+                          inactive-color="#BBBBBB"
+                        ></el-switch>
+                        <span class="titlwSwitchStatus">{{switchMedStatus === 1 ? '启用中' : '未启用'}}</span>
+                      </div>
                     </div>
-                    <h4>随访计划</h4>
-                    <div class="titlwSwitch">
-                      <el-switch
-                        v-model="switchFollowStatus"
-                        :active-value="1"
-                        :inactive-value="0"
-                        active-color="#4BC4D7"
-                        inactive-color="#BBBBBB"
-                      ></el-switch>
-                      <span class="titlwSwitchStatus">{{switchFollowStatus === 1 ? '启用中' : '未启用'}}</span>
+                  </li>
+                  <li>
+                    <div class="title">
+                      <div class="handleIcon">
+                        <img src="../../../images/multi.png" alt="医学知识" />
+                      </div>
+                      <h4>随访计划</h4>
+                      <div class="titlwSwitch">
+                        <el-switch
+                          v-model="switchFollowStatus"
+                          :active-value="1"
+                          :inactive-value="0"
+                          active-color="#4BC4D7"
+                          inactive-color="#BBBBBB"
+                        ></el-switch>
+                        <span class="titlwSwitchStatus">{{switchFollowStatus === 1 ? '启用中' : '未启用'}}</span>
+                      </div>
                     </div>
-                  </div>
-                </li>
-              </ul>
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" @click="onSubmit" :disabled="saveDisable">确定</el-button>
-            </el-form-item>
-          </el-form>
-        </el-col>
-      </el-row>
+                  </li>
+                </ul>
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" @click="onSubmit" :disabled="saveDisable">确定</el-button>
+              </el-form-item>
+            </el-form>
+          </el-col>
+        </el-row>
+      </div>
     </div>
-  </div>
+  </el-scrollbar>
 </template>
 <script>
 import api from '@api/icss.js';