|
|
@@ -2,16 +2,20 @@ |
|
|
|
<div> |
|
|
|
<!-- 选择嵌套模板 --> |
|
|
|
<div class="template_nest" v-if="isTemNest"> |
|
|
|
<AppHeader class="set_position header-wrap" |
|
|
|
theme="white" |
|
|
|
<AppHeader class="set-header-position header-wrap" |
|
|
|
theme="basis" |
|
|
|
showBackBtn |
|
|
|
backBtnTitle="取消" |
|
|
|
:onBackBtnClick="enterDistWork" |
|
|
|
:title="`为“${title}”添加新模板`" |
|
|
|
:class="{'header-bottom-shadow': isNestTempScroll}" |
|
|
|
> |
|
|
|
<div type="primary" class="slot_btn" slot="right" @click="enterNestTempImprove()">选定模板</div> |
|
|
|
<div slot="right" class="edit-template-btn" |
|
|
|
@click.stop="enterNestTempImprove()"> |
|
|
|
选定模板 |
|
|
|
</div> |
|
|
|
</AppHeader> |
|
|
|
<div class="template_select_content"> |
|
|
|
<div class="template_select_content" ref="nestTemplateDesc"> |
|
|
|
<div class="template_connect"> |
|
|
|
<div class="template_info_title"> |
|
|
|
<span>已建立交换关系的模板</span> |
|
|
@@ -19,38 +23,41 @@ |
|
|
|
<div class="template_info" v-for="(item,index) in NestTemplateList" :key="item.Id" @click="isChecked(index,item)"> |
|
|
|
<div class="check_box" :class="{checked:checkedIndex == index}"><i class="el-icon-check"></i></div> |
|
|
|
<span class="template_info_name">{{item.TemplateName}}</span> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 完善嵌套模板信息 --> |
|
|
|
<div class="template_improve" v-if="isNestTemImprove" > |
|
|
|
<AppHeader class="set_position header-wrap" |
|
|
|
theme="white" |
|
|
|
<AppHeader class="set-header-position header-wrap" |
|
|
|
theme="basis" |
|
|
|
showBackBtn |
|
|
|
backBtnTitle="选择模板" |
|
|
|
:onBackBtnClick="enterSelectNestTemp" |
|
|
|
title="完善模板信息" |
|
|
|
:class="{'header-bottom-shadow': isTempImproveScroll}" |
|
|
|
> |
|
|
|
<div type="primary" class="slot_btn" slot="right" @click="addNestTemplate()">创建</div> |
|
|
|
</AppHeader> |
|
|
|
<div class="template_improve_content" > |
|
|
|
<div class="template_improve_info"> |
|
|
|
<div class="template_title">模板名称:</div> |
|
|
|
<div class="template_title_info">{{selectTemplate.TemplateName}}</div> |
|
|
|
</div> |
|
|
|
<div class="template_improve_info"> |
|
|
|
<div class="template_title">创建时间:</div> |
|
|
|
<div class="template_title_info">{{createDate}}</div> |
|
|
|
</div> |
|
|
|
<div class="template_improve_info template_improve_infoInput" v-for="prop in checkNewProjData.CustomProps" :key="prop.Id"> |
|
|
|
<div class="template_title">{{(prop.PropertyName ? prop.PropertyName : '自定义字段') +':'}}</div> |
|
|
|
<div class="template_title_info"> |
|
|
|
<input type="text" class="input_projname" placeholder="点击输入" v-model="prop.PropValue"> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div slot="right" class="edit-template-btn" |
|
|
|
@click.stop="addNestTemplate()"> |
|
|
|
创建 |
|
|
|
</div> |
|
|
|
</AppHeader> |
|
|
|
<div class="summary-wrap" ref="tempImproveDesc"> |
|
|
|
<div class="item"> |
|
|
|
<div class="item-title">模板名称</div> |
|
|
|
<div class="item-value">{{selectTemplate.TemplateName}}</div> |
|
|
|
</div> |
|
|
|
<div class="item"> |
|
|
|
<div class="item-title">创建时间</div> |
|
|
|
<div class="item-value">{{createDate}}</div> |
|
|
|
</div> |
|
|
|
<div class="item" v-for="prop in checkNewProjData.CustomProps" :key="prop.Id"> |
|
|
|
<div class="item-title adjust-title-position" >{{(prop.PropertyName ? prop.PropertyName : '自定义字段') +':'}}</div> |
|
|
|
<div class="item-value"> |
|
|
|
<input v-model="prop.PropValue" type="text" class="prop-value-input"/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
@@ -76,7 +83,11 @@ export default { |
|
|
|
title:this.nestNodeFolder.folderName, |
|
|
|
NestTemplateList:[], |
|
|
|
isTemNest: false, |
|
|
|
isNestTemImprove:false, |
|
|
|
isNestTemImprove:false, |
|
|
|
isNestTempScroll: false,//嵌套模板选择是否滚动 |
|
|
|
nestTemplateDescEl: null, |
|
|
|
isTempImproveScroll: false, |
|
|
|
tempImproveDescEl: null, |
|
|
|
selectTemplate:{},//选择的嵌套模板 |
|
|
|
checkedIndex:0, |
|
|
|
checkNewProjData: { |
|
|
@@ -95,6 +106,22 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
mounted(){ |
|
|
|
this.nestTemplateDescEl = this.$refs.nestTemplateDesc; |
|
|
|
if(this.nestTemplateDescEl) { |
|
|
|
this.nestTemplateDescEl.addEventListener('scroll', this.watchNestTempScroll); |
|
|
|
} |
|
|
|
|
|
|
|
this.tempImproveDescEl = this.$refs.tempImproveDesc; |
|
|
|
if(this.tempImproveDescEl){ |
|
|
|
this.nestTemplateDescEl.addEventListener('scroll',this.watchTempImproveScroll); |
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
beforeDestroy(){ |
|
|
|
this.nestTemplateDescEl && this.nestTemplateDescEl.removeEventListener('scroll', this.watchNestTempScroll); |
|
|
|
this.tempImproveDescEl && this.tempImproveDescEl.removeEventListener('scroll',this.watchTempImproveScroll) |
|
|
|
}, |
|
|
|
methods:{ |
|
|
|
/** |
|
|
|
* 进入嵌套模板信息字段填写 |
|
|
@@ -122,7 +149,8 @@ export default { |
|
|
|
this.checkNewProjData.CustomProps = [...temp]; |
|
|
|
}) |
|
|
|
this.checkNewProjData = {...this.checkNewProjData}; |
|
|
|
}) |
|
|
|
}) |
|
|
|
//debugger; |
|
|
|
}, |
|
|
|
/** |
|
|
|
* 返回到人员分配 |
|
|
@@ -140,7 +168,7 @@ export default { |
|
|
|
showClose: false, |
|
|
|
type: "error", |
|
|
|
}).then(async() => { |
|
|
|
const res = await templateService.queryTemplateNodeByTemplateId(this.selectTemplate.TempalteId); |
|
|
|
const res = await templateService.queryTemplateNodeByTemplateId(this.selectTemplate.TemplateId); |
|
|
|
const node = res.Data; |
|
|
|
let params ={ |
|
|
|
ProjId: this.nestNodeFolder.projId, |
|
|
@@ -176,6 +204,15 @@ export default { |
|
|
|
this.checkedIndex=0; |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
//嵌套模板页面滚动 |
|
|
|
watchNestTempScroll(){ |
|
|
|
this.isNestTempScroll = this.nestTemplateDescEl.scrollTop > 0; |
|
|
|
}, |
|
|
|
//嵌套模板字段信息填充 |
|
|
|
watchTempImproveScroll(){ |
|
|
|
this.isTempImproveScroll = this.tempImproveDescEl.scrollTop > 0; |
|
|
|
} |
|
|
|
}, |
|
|
|
watch:{ |
|
|
|
isTemNestInProp:{ |
|
|
@@ -187,6 +224,16 @@ export default { |
|
|
|
}, |
|
|
|
immediate: true |
|
|
|
}, |
|
|
|
isNestTempScroll(val){ |
|
|
|
if(val){ |
|
|
|
setTimeout(()=>{ |
|
|
|
this.nestTemplateDescEl = this.$refs.nestTemplateDesc; |
|
|
|
if(this.nestTemplateDescEl){ |
|
|
|
this.nestTemplateDescEl.addEventListener('scroll',this.watchNestTempScroll); |
|
|
|
} |
|
|
|
},50) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
@@ -207,24 +254,17 @@ export default { |
|
|
|
text-align: center; |
|
|
|
font-family: PingFangSC-Regular; |
|
|
|
} |
|
|
|
.input_projname{ |
|
|
|
width: 424px; |
|
|
|
height: 44px; |
|
|
|
border-radius: 4px; |
|
|
|
background-color: rgba(233, 233, 235, 1); |
|
|
|
border: 0.5px solid rgba(174, 174, 174, 1); |
|
|
|
font-size: 16px; |
|
|
|
padding-left:16px; |
|
|
|
} |
|
|
|
|
|
|
|
.set_position{ |
|
|
|
position: relative; |
|
|
|
border-top-right-radius: 8px; |
|
|
|
border-top-left-radius: 8px; |
|
|
|
box-shadow: none; |
|
|
|
} |
|
|
|
.template_nest,.template_improve{ |
|
|
|
height:calc(100vh - 50px); |
|
|
|
} |
|
|
|
// .template_improve{ |
|
|
|
// height:calc(100vh - 50px); |
|
|
|
// min-width: 400px; |
|
|
|
// } |
|
|
|
.template_info_title{ |
|
|
|
width: 100%; |
|
|
|
line-height: 44px; |
|
|
@@ -234,7 +274,7 @@ export default { |
|
|
|
border-bottom: 1px solid #DEDEDF; |
|
|
|
} |
|
|
|
.template_select_content{ |
|
|
|
height:calc(100% - 50px); |
|
|
|
height:calc(100vh - 100px); |
|
|
|
overflow-y:scroll; |
|
|
|
.template_info{ |
|
|
|
width: 100%; |
|
|
@@ -278,29 +318,105 @@ export default { |
|
|
|
.template_info:hover{ |
|
|
|
background-color: rgba(50, 50, 60, 0.15); |
|
|
|
} |
|
|
|
.template_improve_content{ |
|
|
|
height:calc(100% - 50px); |
|
|
|
overflow-y:scroll; |
|
|
|
padding: 0 8px; |
|
|
|
box-sizing: border-box; |
|
|
|
.template_improve_info{ |
|
|
|
line-height: 48px; |
|
|
|
width: 100%; |
|
|
|
color: rgba(0, 0, 0, 0.56); |
|
|
|
.template_title{ |
|
|
|
width: 142px; |
|
|
|
display: inline-block; |
|
|
|
text-align: right; |
|
|
|
// .template_improve_content{ |
|
|
|
// height:calc(100% - 50px); |
|
|
|
// overflow-y:scroll; |
|
|
|
// padding: 0 8px; |
|
|
|
// box-sizing: border-box; |
|
|
|
// .template_improve_info{ |
|
|
|
// line-height: 48px; |
|
|
|
// width: 100%; |
|
|
|
// color: rgba(0, 0, 0, 0.56); |
|
|
|
// .template_title{ |
|
|
|
// //width: 142px; |
|
|
|
// width: 30%; |
|
|
|
// display: inline-block; |
|
|
|
// text-align: right; |
|
|
|
|
|
|
|
} |
|
|
|
.template_title_info{ |
|
|
|
display: inline-block; |
|
|
|
margin-left: 8px; |
|
|
|
color: rgba(50, 50, 60, 100); |
|
|
|
} |
|
|
|
// } |
|
|
|
// .template_title_info{ |
|
|
|
// display: inline-block; |
|
|
|
// margin-left: 8px; |
|
|
|
// color: rgba(50, 50, 60, 100); |
|
|
|
// } |
|
|
|
// } |
|
|
|
// .template_improve_infoInput{ |
|
|
|
// line-height: 64px; |
|
|
|
// } |
|
|
|
// .input_projname{ |
|
|
|
// width: 120%; |
|
|
|
// height: 44px; |
|
|
|
// border-radius: 4px; |
|
|
|
// background-color: rgba(233, 233, 235, 1); |
|
|
|
// border: 0.5px solid rgba(174, 174, 174, 1); |
|
|
|
// font-size: 16px; |
|
|
|
// padding-left:16px; |
|
|
|
// } |
|
|
|
// } |
|
|
|
.edit-template-btn, .to-distwork-btn{ |
|
|
|
position: relative; |
|
|
|
left: 24px; |
|
|
|
cursor: pointer; |
|
|
|
padding: 0 16px; |
|
|
|
height: 32px; |
|
|
|
line-height: 32px; |
|
|
|
margin: 9px 0; |
|
|
|
border-radius: 8px; |
|
|
|
background-color: rgba(120, 80, 255, 1); |
|
|
|
color: rgba(245, 245, 247, 100); |
|
|
|
font-size: 14px; |
|
|
|
text-align: center; |
|
|
|
font-family: PingFangSC-Regular; |
|
|
|
|
|
|
|
} |
|
|
|
.template_improve{ |
|
|
|
.summary-wrap { |
|
|
|
height: calc(100vh - 100px - 16px); |
|
|
|
overflow: scroll; |
|
|
|
padding: 0 24px; |
|
|
|
margin: 16px 0 0 0; |
|
|
|
background-color: #fcfcfc; |
|
|
|
|
|
|
|
/* 编辑状态下的模板自定义字段输入框 */ |
|
|
|
.prop-value-input { |
|
|
|
width: 80%; |
|
|
|
height: 44px; |
|
|
|
border-radius: 4px; |
|
|
|
color: rgba(0, 0, 0, 0.56); |
|
|
|
background-color: rgba(233, 233, 235, 1); |
|
|
|
border: 0.5px solid rgba(174, 174, 174, 1); |
|
|
|
font-size: 16px; |
|
|
|
padding-left:16px; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
.template_improve_infoInput{ |
|
|
|
line-height: 64px; |
|
|
|
} |
|
|
|
.item { |
|
|
|
display: flex; |
|
|
|
width: 100%; |
|
|
|
margin: 14px 0; |
|
|
|
font-size: 14px; |
|
|
|
font-family: PingFangSC-Regular; |
|
|
|
color: #32323C; |
|
|
|
.item-title { |
|
|
|
color: #62492f; |
|
|
|
width: 24%; |
|
|
|
text-align: right; |
|
|
|
} |
|
|
|
.item-value { |
|
|
|
margin: 0 0 0 12px; |
|
|
|
&:not(.cover-img-wrap) { |
|
|
|
flex: 1; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.set-header-position { |
|
|
|
position: relative !important; |
|
|
|
color: #32323c !important; |
|
|
|
z-index: 99; |
|
|
|
} |
|
|
|
.adjust-title-position { |
|
|
|
position: relative; |
|
|
|
top: 11px; |
|
|
|
} |
|
|
|
</style> |