Переглянути джерело

Merge branch 'http_test' into qz_daily_0.0.3

qinzhipeng_v@didiglobal.com 4 роки тому
батько
коміт
a3740e8527

+ 5 - 1
src/components/actionDynamic/index.vue

@@ -55,7 +55,7 @@
       <el-tab-pane label="变更记录" name="Logs">
         <div class="maxHeight">
           <div v-for="(item,index) in changeRecord" :key="index" class="Layout_space_between sign-record">
-            <span>
+            <span class="content">
               <span class="operatorName">{{ item.operator }} : </span>
               <span class="remark">{{ item.remark }}</span>
             </span>
@@ -131,4 +131,8 @@ export default {
   color:rgba(51,59,74,1);
   margin-right: 10px;
 }
+.content {
+  display: inline-block;
+  margin-right: 60px;
+}
 </style>

+ 8 - 1
src/components/redTipTitle/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <p class="redTipword">
+  <p class="redTipword" :style="styles">
     <span class="title" :class="isedit && 'edit'">{{ title }}</span>
   </p>
 </template>
@@ -15,6 +15,13 @@ export default {
       type: Boolean,
       required: false,
       default: false
+    },
+    styles: {
+      type: Object,
+      default: () => {
+        return {}
+      },
+      required: false
     }
   }
 }

+ 2 - 2
src/views/projectManage/publishTask/components/checkboxList.vue

@@ -46,9 +46,9 @@ export default {
 .checkboxList {
   width: 800px;
   .checkbox {
-    width: 130px;
+    // width: 130px;
     // margin-right: 50px;
-    margin: 10px 0px;
+    margin: 10px 40px 10px 0;
   }
 }
 

+ 1 - 1
src/views/projectManage/publishTask/components/multipleSelect.vue

@@ -129,7 +129,7 @@ export default {
 .content {
   display: flex;
   justify-content: space-between;
-  margin: 15px 0;
+  margin: 10px 0;
   .taskId {
     display: inline-block;
     width: 120px;

+ 3 - 3
src/views/projectManage/publishTask/components/onlineCheckList.vue

@@ -185,7 +185,8 @@ export default {
 </script>
 <style scoped lang='scss'>
 .onlineCheckList {
-  max-width: 690px;
+  width: 690px;
+  padding-bottom: 20px;
   .table {
     width: 100%;
     border-radius: 4px;
@@ -228,7 +229,6 @@ export default {
       .onlineItem {
         display: inline-block;
         margin: 10px 20px 0px 0px;
-        width: 130px;
         font-size: 14px;
         border: solid 2px transparent;
         cursor: move;
@@ -248,7 +248,7 @@ export default {
       margin-right: 5px;
     }
     .dragword {
-      font-size: 12px;
+      font-size: 14px;
     }
     .subTitle {
       margin-top: 16px;

+ 3 - 1
src/views/projectManage/publishTask/components/step.vue

@@ -53,12 +53,14 @@ export default {
     left: calc(100% - 2px);
   }
   .subTitle {
-    width: 130px;
+    width: 200px;
     text-align: center;
     margin: 16px 0px 16px 50%;
+    padding: 0 16px;
     background: #fff;
     cursor: pointer;
     position: relative;
+    color: #444;
     .icon {
       position: absolute;
       left: 0px;

+ 77 - 45
src/views/projectManage/publishTask/index.vue

@@ -16,44 +16,49 @@
         <div class="wrap">
           <redTipword title="关联任务" :isedit="edit" />
           <multipleSelect placeholder="🔍 请输入任务名称或ID" :isedit="edit" :data="data.tasks" :task-id="taskId" @change="changeTask" />
-          <div v-if="edit" style="margin-top: 30px">
+          <div v-if="edit" style="margin-top: 40px">
             <redTipword title="选择checklist列表" :isedit="edit" />
             <checkboxList :selected-list="data.selectedBizTemplateIds" :data="temList" @change="updateSelectedTemHandle" />
           </div>
         </div>
         <div class="moduleList wrap">
-          <redTipword v-if="!edit" title="检查项" :isedit="edit" />
-          <div v-for="(item, index) in data.templates" :key="item.parentTemplateId">
-            <div v-if="item.type === 1" class="item">
-              <p :id="`s${item.parentTemplateId}`" class="title">
-                <el-checkbox v-if="!edit" v-model="item.isCheck" :label="item.name" @change="updateCheckItemHandle(item)">{{ item.name }}</el-checkbox>
-                <span v-else class="fontName">{{ item.name }}</span>
-              </p>
-              <onlineCheckList
-                :module-id="item.parentTemplateId"
-                :isedit="edit"
-                :styles="{ marginLeft: '24px' }"
-                :data="item.onlineModule"
-                :task-id="taskId"
-                @changeSelectedHandle="changeOnlineSelectedHandle"
-                @changeRow="changeOnlineModuleRow"
-                @onChangeModuleName="(val, subIdx) => onChangeModuleName(val, subIdx, index)"
-              />
-            </div>
-            <div v-else class="item">
-              <p :id="`s${item.parentTemplateId}`" class="title">
-                <el-checkbox v-if="!edit" v-model="item.isCheck" :label="item.name" @change="updateCheckItemHandle(item)">{{ item.name }}</el-checkbox>
-                <span v-else class="fontName">{{ item.name }}</span>
-              </p>
-              <normal-area
-                v-if="edit"
-                :id="'tem'+item.parentTemplateId"
-                :value.sync="item.content"
-                :empty-text="'点击'"
-                :input-button="'修改模板'"
-                :styles="{ padding: '0 0px 20px 0px', width: '690px', marginLeft: '24px' }"
-              />
-              <div v-else style="margin-left: 24px" v-html="item.content" />
+          <redTipword v-if="!edit" title="检查项" :isedit="edit" :styles="{ marginTop: '40px' }" />
+          <div class="checkBox">
+            <div v-for="(item, index) in data.templates" :key="item.parentTemplateId">
+              <div v-if="item.type === 1" class="item">
+                <p :id="`s${item.parentTemplateId}`" class="title">
+                  <el-checkbox v-if="!edit" v-model="item.isCheck" :label="item.name" class="fontRest" @change="updateCheckItemHandle(item)">{{ item.name }}</el-checkbox>
+                  <span v-else class="fontName">{{ item.name }}</span>
+                </p>
+                <onlineCheckList
+                  :module-id="item.parentTemplateId"
+                  :isedit="edit"
+                  :styles="{ marginLeft: '24px' }"
+                  :data="item.onlineModule"
+                  :task-id="taskId"
+                  @changeSelectedHandle="changeOnlineSelectedHandle"
+                  @changeRow="changeOnlineModuleRow"
+                  @onChangeModuleName="(val, subIdx) => onChangeModuleName(val, subIdx, index)"
+                />
+              </div>
+              <div v-else class="item">
+                <p :id="`s${item.parentTemplateId}`" class="title">
+                  <el-checkbox v-if="!edit" v-model="item.isCheck" :label="item.name" class="fontRest" @change="updateCheckItemHandle(item)">{{ item.name }}</el-checkbox>
+                  <span v-else class="fontName">{{ item.name }}</span>
+                </p>
+                <normal-area
+                  v-if="edit"
+                  :id="'tem'+item.parentTemplateId"
+                  :value.sync="item.content"
+                  :empty-text="'点击'"
+                  :input-button="'修改模板'"
+                  :height="300"
+                  :styles="{ padding: '0 0px 20px 0px', width: '690px', marginLeft: '24px' }"
+                />
+                <div v-else style="padding: 0 0px 20px 0px; margin-left: 24px; overflow-y: auto; width: 690px">
+                  <div v-html="item.content" />
+                </div>
+              </div>
             </div>
           </div>
         </div>
@@ -72,7 +77,7 @@
         </div>
         <actionDynamic :comments="commentlist" :change-record="changeRecordList" @addComment="createCommentHandle" />
       </section>
-      <div v-if="!showEmpty" class="step">
+      <div v-if="!showEmpty" id="stepWrap" class="step">
         <step :data="data.templates" :type-list="data.templates" @goto="scrollToHandle" />
       </div>
     </div>
@@ -155,8 +160,27 @@ export default {
     this.getList()
     // 获取评论列表
     this.getCommentList()
+    // 监听滚动条
+    const container = document.getElementsByClassName('main-wrapper')[0]
+    container.addEventListener('scroll', this.handleScroll) // 监听滚动事件,然后用handleScroll这个方法进行相应的处理
   },
   methods: {
+    // 监听滚动条
+    handleScroll() {
+      const containerWrap = document.getElementsByClassName('main-wrapper')[0]
+      const stepWrap = document.getElementById('stepWrap')
+      const fullHeight = containerWrap.scrollHeight
+      const top = containerWrap.scrollTop
+      if (fullHeight - top <= 900) {
+        stepWrap.style.bottom = '450px'
+        stepWrap.style.top = 'auto'
+      } else {
+        if (stepWrap.style.bottom === '450px') {
+          stepWrap.style.bottom = 'auto'
+          stepWrap.style.top = '150px'
+        }
+      }
+    },
     // 获取checklist详情
     async getList() {
       if (this.taskId) {
@@ -421,7 +445,7 @@ export default {
     scrollToHandle(targe) {
       const anchorH = document.getElementById(targe).offsetTop
       const container = document.getElementsByClassName('main-wrapper')[0]
-      container.scrollTop = anchorH - 20
+      container.scrollTop = anchorH - 30
     },
 
     // 解绑删除任务
@@ -480,7 +504,9 @@ export default {
   }
   .pubconfig {
     .control {
-      padding: 20px 0px 20px 690px;
+      width: 100%;
+      text-align: right;
+      padding: 0px 20px 20px 0px;
     }
   }
   .main-section {
@@ -490,19 +516,25 @@ export default {
     padding: 0 40px;
   }
   .moduleList {
-    margin-top: 40px;
-    padding-bottom: 16px;
-    .title {
-      font-weight: 400;
-      color: #444444;
-      font-size: 14px;
-      margin-bottom: 16px;
-      margin-top: 40px;
+    padding-bottom: 40px;
+    .checkBox {
+      margin-top: 10px;
     }
     .item {
+      // padding-bottom: 30px;
+      .title {
+        font-weight: 400;
+        color: #444444;
+        font-size: 14px;
+        margin: 0px 0px 12px 0px;
+        .fontRest {
+          color: #444;
+          font-weight: 600;
+        }
+      }
       width: 690px;
       .fontName {
-        font-weight: 500;
+        font-weight: 600;
       }
     }
   }