|
@@ -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;
|
|
|
}
|
|
|
}
|
|
|
}
|