目录代码整合
This commit is contained in:
aixianling
@@ -0,0 +1,252 @@
|
||||
<template>
|
||||
<div class="add-config" :class="[activeStep == 1 ? 'formLayout' : '']">
|
||||
<ai-detail>
|
||||
<ai-title slot="title" :title="detailTitle" isShowBack isShowBottomBorder @onBackClick="handleBack"/>
|
||||
<template slot="step">
|
||||
<div class="step">
|
||||
<el-steps :active="activeStep" simple>
|
||||
<el-step v-for="(step,i) in processList" :key="i" v-bind="step" :icon="getStepIcon(i)"/>
|
||||
</el-steps>
|
||||
</div>
|
||||
</template>
|
||||
<template #content v-if="refresh">
|
||||
<baseInfo ref="baseInfo" :instance="instance" :dict="dict" v-show="activeStep==0"/>
|
||||
<applyForm ref="applyForm" :value="filedList" :instance="instance" :dict="dict" v-show="activeStep==1"/>
|
||||
<attachmentMaterial ref="attachmentMaterial" :instance="instance" v-show="activeStep==2"/>
|
||||
<processApproval ref="processApproval" :approvalSteps="applyForm.approvalSteps" :instance="instance"
|
||||
:dict="dict" v-show="activeStep==3"/>
|
||||
</template>
|
||||
<template #footer>
|
||||
<el-button class="btn" v-if="activeStep==0" @click="handleBack">取消</el-button>
|
||||
<el-button class="btn" v-else @click="preStep">上一步</el-button>
|
||||
<el-button class="btn" type="primary" v-if="[0,1,2].includes(activeStep)" @click="nextStep">下一步</el-button>
|
||||
<el-button class="btn" type="primary" v-if="activeStep==3" @click="save">保存</el-button>
|
||||
</template>
|
||||
</ai-detail>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {applyForm, attachmentMaterial, baseInfo, processApproval} from './index'
|
||||
|
||||
export default {
|
||||
name: "addConfig",
|
||||
provide() {
|
||||
return {
|
||||
config: this
|
||||
}
|
||||
},
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
row: Object,
|
||||
processType: String
|
||||
},
|
||||
components: {baseInfo, applyForm, attachmentMaterial, processApproval},
|
||||
data() {
|
||||
return {
|
||||
activeStep: 0,
|
||||
baseInfo: {},
|
||||
applyForm: {
|
||||
tableId: "",
|
||||
approvalSteps: "",
|
||||
},
|
||||
processAnnexDefs: [],
|
||||
detailObj: {
|
||||
tableInfo: {}
|
||||
},
|
||||
refresh: true,
|
||||
filedList: [],
|
||||
tableFieldInfos: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
processList() {
|
||||
return [
|
||||
{title: '基本信息', activeIndex: 0},
|
||||
{title: '申请表单', activeIndex: 1},
|
||||
{title: '附件材料', activeIndex: 2},
|
||||
{title: '审批流程', activeIndex: 3}
|
||||
]
|
||||
},
|
||||
detailTitle() {
|
||||
return this.detailObj?.id ? "编辑事项" : "添加事项"
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 上一步
|
||||
* */
|
||||
preStep() {
|
||||
this.activeStep--
|
||||
},
|
||||
/**
|
||||
* 下一步
|
||||
*/
|
||||
nextStep() {
|
||||
switch (this.activeStep) {
|
||||
case 0:
|
||||
this.handleBaseInfo()
|
||||
break
|
||||
case 1:
|
||||
this.$refs['applyForm'].onConfirm().then(res => {
|
||||
if (!res.length) {
|
||||
return this.$message.error('表单配置不能为空')
|
||||
}
|
||||
this.tableFieldInfos = res
|
||||
this.activeStep++
|
||||
})
|
||||
break
|
||||
case 2:
|
||||
this.$refs['attachmentMaterial'].handleAttachmentMaterial().then(res => {
|
||||
this.annexs = res
|
||||
this.activeStep++
|
||||
}).catch(err => {
|
||||
console.error(err);
|
||||
})
|
||||
break
|
||||
}
|
||||
},
|
||||
handleBaseInfo() {
|
||||
this.$refs['baseInfo'].banseInfoForm().then(res => {
|
||||
if (res) {
|
||||
// this.$refs['applyForm'].getFormList()
|
||||
this.baseInfo = res
|
||||
this.activeStep++
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 保存
|
||||
*/
|
||||
save() {
|
||||
this.$refs['processApproval'].handleProcessApproval().then(res => {
|
||||
this.instance.post(`/app/approval-process-def/add-update`, {
|
||||
...this.detailObj,
|
||||
...this.baseInfo,
|
||||
processDefStatus: Number(this.baseInfo.processDefStatus),
|
||||
tableInfo: {
|
||||
...this.detailObj.tableInfo,
|
||||
tableFieldInfos: this.tableFieldInfos
|
||||
},
|
||||
tableType: 0,
|
||||
processAnnexDefs: this.annexs.map(e => ({...e, mustFill: Number(e.mustFill)})),
|
||||
processNodeList: res.processNodeList,
|
||||
processType: this.processType
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success("保存成功")
|
||||
this.$router.push({query:{}})
|
||||
}
|
||||
})
|
||||
}).catch(err => {
|
||||
console.error(err);
|
||||
})
|
||||
},
|
||||
getDetail(id) {
|
||||
this.instance.post(`/app/approval-process-def/info-id`, null, {params: {id}}).then(res => {
|
||||
if (res?.data) {
|
||||
this.detailObj = res.data
|
||||
this.filedList = res.data.tableInfo.tableFieldInfos
|
||||
this.refreshDetail()
|
||||
}
|
||||
})
|
||||
},
|
||||
getStepIcon(rowIndex) {
|
||||
if (rowIndex < this.activeStep) return "iconfont iconSteps_Finished"
|
||||
else if (this.activeStep == rowIndex) return "iconfont iconSteps_In_Progress"
|
||||
return ""
|
||||
},
|
||||
refreshDetail() {
|
||||
this.refresh = false
|
||||
this.$nextTick(() => this.refresh = true)
|
||||
},
|
||||
handleBack() {
|
||||
this.$router.push({query: {}})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (this.row?.id) {
|
||||
this.getDetail(this.row?.id)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.add-config {
|
||||
height: 100%;
|
||||
|
||||
&.formLayout {
|
||||
::v-deep .ai-detail__content--wrapper {
|
||||
max-width: 100%;
|
||||
height: calc(100%)!important;
|
||||
padding: 0!important;
|
||||
overflow: hidden!important;
|
||||
}
|
||||
}
|
||||
|
||||
.step {
|
||||
width: 100%;
|
||||
height: 72px;
|
||||
font-size: 14px;
|
||||
|
||||
.el-steps {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 72px;
|
||||
padding: 0 calc(50% - 380px);
|
||||
|
||||
|
||||
::v-deep .el-step {
|
||||
font-weight: bold;
|
||||
|
||||
::v-deep .el-step__icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: #fff;
|
||||
|
||||
.iconfont {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-step__main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.el-step__arrow {
|
||||
background: #D0D4DC;
|
||||
margin: 0 8px;
|
||||
height: 2px;
|
||||
|
||||
&:before, &:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.is-process {
|
||||
color: #2266FF;
|
||||
}
|
||||
|
||||
.is-wait {
|
||||
color: #666;
|
||||
border-color: #D0D4DC;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 92px;
|
||||
height: 32px;
|
||||
|
||||
&:nth-child(2) {
|
||||
margin-left: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user