修改页面布局

src/components/knowledgeExtra/AddDevKnow.vue

@@ -7,141 +7,162 @@
         :param="$route.params"
         linkTo="StaticInfo"
       ></crumbs>
-      <el-tabs
-        style="margin: 70px 20px -20px 20px; background: #fff"
-        v-model="tabActive"
-      >
-        <el-tab-pane label="静态知识" name="one">
-          <div class="info-container">
-            <el-form
-              :rules="rules"
-              :model="form"
-              label-width="160px"
-              ref="groups"
+
+      <div class="info-container">
+        <el-form :rules="rules" :model="form" label-width="160px" ref="groups">
+          <div class="container_top">
+            <el-form-item
+              v-if="!isEdit"
+              label="选择标准术语："
+              prop="selectedTerm"
             >
-              <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="id"
-                  @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 ||
-                    form.typeId == 6)
-                "
-                :label="titleChange"
-                prop="titleChange"
-                label-width="160px"
+              <el-select
+                v-model="form.selectedTerm"
+                filterable
+                remote
+                clearable
+                :loading="showDrop"
+                loading-text="加载中..."
+                @change="changeWord"
+                @visible-change="handleVisible"
+                value-key="id"
+                @clear="handleClear"
+                ref="termName"
+                placeholder="搜索"
+                :remote-method="searchTerms"
               >
-                <el-input v-model="form.titleChange"></el-input>
-              </el-form-item>
-              <p class="line"></p>
-              <DevInfo
-                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"
-                :isCopy="isCopy"
-                ref="subForm"
-                @add="addParagraph(i)"
-                @del="delParagraph"
-                @reOrder="reOrder"
-                :showType="showType"
-              ></DevInfo>
-              <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-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="已选择标准术语："
+              style="margin-left: 40px"
+              label-width="160px"
+              >{{ form.selectedTermName }}</el-form-item
+            >
+          </div>
+
+          <p class="line"></p>
+          <div class="tabs">
+            <div
+              class="tabs_pane"
+              :style="
+                tabActive == 'one'
+                  ? { color: '#fff', background: '#00c7da' }
+                  : ''
+              "
+              @click="tabActive = 'one'"
+            >
+              静态信息
+            </div>
+            <div
+              class="tabs_pane"
+              :style="
+                tabActive == 'two'
+                  ? { color: '#fff', background: '#00c7da' }
+                  : ''
+              "
+              @click="tabActive = 'two'"
+              v-if="AssesComSHow"
+            >
+              评估内容
+            </div>
+          </div>
+          <div class="tab_box_left" v-if="tabActive == 'one'">
+            <el-form-item
+              v-if="
+                form.selectedTerm &&
+                (form.typeId == 1 ||
+                  form.typeId == 3 ||
+                  form.typeId == 4 ||
+                  form.typeId == 5 ||
+                  form.typeId == 6)
+              "
+              :label="titleChange"
+              prop="titleChange"
+              label-width="160px"
+            >
+              <el-input v-model="form.titleChange"></el-input>
+            </el-form-item>
+            <DevInfo
+              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"
+              :isCopy="isCopy"
+              ref="subForm"
+              @add="addParagraph(i)"
+              @del="delParagraph"
+              @reOrder="reOrder"
+              :showType="showType"
+            ></DevInfo>
+            <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-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
                 >
-                  <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 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>
           </div>
-        </el-tab-pane>
-        <el-tab-pane v-if="AssesComSHow" label="评估内容" name="two">
-          <AddAssess :childScaleData="scaleData" ref="assessRef" />
-        </el-tab-pane>
-      </el-tabs>
+          <div v-if="tabActive == 'two'">
+            <AddAssess :childScaleData="scaleData" ref="assessRef" />
+          </div>
+        </el-form>
+      </div>
+
       <div class="btn">
         <el-button type="primary" :disabled="saveDisable" @click="submitForm"
           >确 定</el-button
@@ -417,6 +438,7 @@ export default {
         this.AssesComSHow = true;
       } else {
         this.AssesComSHow = false;
+        this.tabActive = "one";
       }
       this.toAssesTermId = newVal.id;
       this.showType = newVal.type || -1;
@@ -620,7 +642,11 @@ export default {
       });
 
       // 三个表单校验，需全部通过后让goOn outIsVia 为true;
-      await Promise.all([...this.$refs.assessRef.assessCommit(), validate])
+      let all = [validate];
+      if (this.$refs.assessRef) {
+        all.push(...this.$refs.assessRef.assessCommit());
+      }
+      await Promise.all(all)
         .then(() => {
           console.log("allllll");
         })
@@ -710,12 +736,16 @@ export default {
       // this.showSaveDialog(param,'是否'+(this.isEdit?'修改':'保存')+'该静态知识？');
 
       // 评估内容的数据
-      const assessParam = this.$refs.assessRef.formtParams();
-      param.scale = assessParam;
-      param.scale.conceptId = this.toAssesTermId;
-      param.scale.modifier = ""; //fix lei 字段暂时未知
+      if (this.AssesComSHow) {
+        const assessParam = this.$refs.assessRef.formtParams();
+        param.scale = assessParam;
+        param.scale.conceptId = this.toAssesTermId;
+        param.scale.modifier = ""; //fix lei 字段暂时未知
+      }
+
       console.log("param-------");
       console.dir(param);
+      return;
       if (!this.isEdit) {
         // 新增页面
         this.saveDisable = true;
@@ -863,7 +893,7 @@ export default {
 }
 .info-container {
   // background: #fff;
-  padding: 20px;
+  // padding: 20px 0;
   margin: 70px 20px -20px 20px;
   .el-input__inner {
     width: 200px;
@@ -874,17 +904,17 @@ export default {
   .add-prg .el-form-item {
     margin-bottom: 20px;
   }
-  .el-form-item {
-    margin-bottom: 8px !important;
-  }
+  // .el-form-item {
+  //   margin-bottom: 8px !important;
+  // }
 }
 // .cancel span {
 //   color: #22ccc8;
 // }
 .line {
-  border-top: 1px #dcdfe6 solid;
-  margin-bottom: 25px;
-  margin-top: 25px;
+  // border-top: 1px #dcdfe6 solid;
+  background: #dcdfe6;
+  height: 12px;
 }
 .NoiseTemplateWrapper .info-container .el-input__inner {
   width: 250px;
@@ -979,5 +1009,32 @@ export default {
 /deep/ .el-tabs__header {
   padding: 0 10px !important;
 }
+.container_top {
+  display: flex;
+  padding: 10px 30px;
+  align-items: center;
+}
+.tabs {
+  display: flex;
+  margin: 15px 30px;
+  font-size: 14px;
+  height: 31px;
+  border-bottom: 1px solid #e6e6e6;
+  .tabs_pane {
+    width: 92px;
+    height: 32px;
+    border-radius: 6px 6px 0px 0px;
+    border: 1px solid #00c7da;
+    text-align: center;
+    line-height: 32px;
+    margin-right: 15px;
+    box-sizing: border-box;
+    color: #00c7da;
+    cursor: pointer;
+  }
+}
+.tab_box_left {
+  padding: 0 30px;
+}
 </style>