382 lines
11 KiB
Java
382 lines
11 KiB
Java
<template>
|
|
<div class="process-from">
|
|
<div class="process-header">
|
|
<div class="process-header-top">
|
|
<div></div>
|
|
<div class="right">
|
|
<a-popover placement="bottom" trigger="click" class="right-select">
|
|
<template slot="content">
|
|
<p>Content</p>
|
|
<p>Content</p>
|
|
</template>
|
|
<span>工作空间</span><a-icon type="down" />
|
|
</a-popover>
|
|
<a-icon type="bell" />
|
|
<a-icon type="tool" />
|
|
<a-icon type="question-circle" />
|
|
<i class="right-img"></i>
|
|
</div>
|
|
</div>
|
|
<div class="process-header-title">
|
|
<div class="process-title">
|
|
<a-icon type="arrow-left" class="back-to" @click="backTo"/>
|
|
<span>{{title}}</span>
|
|
</div>
|
|
<div class="process-header-btn">
|
|
<!-- 终止流程-->
|
|
<a-button class="header-btn termin" type="danger" ghost>{{$t('terminationProcess')}}</a-button>
|
|
<!-- 保存-->
|
|
<a-button class="header-btn prese">{{$t('preservation')}}</a-button>
|
|
<!-- 下发-->
|
|
<a-button class="header-btn issue" type="primary" ghost>{{$t('issue')}}</a-button>
|
|
<!-- 提交-->
|
|
<a-button class="header-btn submit" type="primary" @click="submit">{{$t('submit')}}</a-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="process-content">
|
|
<div class="process-content-wrapper" >
|
|
<div v-for="(item,index) in formData" class="content-box">
|
|
<div v-for="val in Object.keys(item)" class="content">
|
|
<div class="process-content-title">
|
|
{{val}}
|
|
</div>
|
|
<div class="text-info" v-if="val == $t('projectInformation')">
|
|
<div class="text-info-content" v-for="(ol,index1) in item[val]">
|
|
<span class="text-info-content-name">
|
|
<span :title="ol.name">{{ol.name}}</span>
|
|
</span>
|
|
<span class="text-info-content-title">
|
|
<span :title="ol.value">{{ol.value ? ol.value : '--'}}</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="text-info" v-if="val == $t('standardContent')">
|
|
<div class="text-info-content" v-for="(ol,index1) in item[val]">
|
|
<span class="text-info-content-name">
|
|
<span :title="ol.name">{{ol.name}}</span>
|
|
</span>
|
|
<span class="text-info-content-title">
|
|
<a href="javascript:;" v-if="ol.name=='交付物模板'" @click="downloadFile">{{ol.value ? ol.value : '--'}}<a-icon type="file-text" style="margin-left: 3px" /></a>
|
|
<span :title="ol.value" v-else>{{ol.value ? ol.value : '--'}}</span>
|
|
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 符合性审查-->
|
|
<div class="process-review">
|
|
<div class="process-review-wrapper">
|
|
<div class="title">{{$t('complianceReview')}}</div>
|
|
<a-form>
|
|
<a-form-model
|
|
class="form"
|
|
:model="form"
|
|
:rules="rules"
|
|
ref="processForm"
|
|
:label-col="{ span: 1 }"
|
|
:wrapper-col="{ span: 8 }"
|
|
>
|
|
<!-- 审查结果-->
|
|
<a-form-model-item :label="$t('reviewResults')" prop="value" class="process-form-item">
|
|
<a-radio-group v-model="form.value" @change="onChange">
|
|
<a-radio :value="1">
|
|
{{$t('accord')}}
|
|
</a-radio>
|
|
<a-radio :value="2">
|
|
{{$t('nonConformity')}}
|
|
</a-radio>
|
|
<a-radio :value="3">
|
|
{{$t('Tracked')}}
|
|
</a-radio>
|
|
<a-radio :value="4">
|
|
{{$t('notInvolved')}}
|
|
</a-radio>
|
|
</a-radio-group>
|
|
</a-form-model-item>
|
|
<!-- 反馈意见-->
|
|
<a-form-model-item :label="$t('feedback')" prop="feedback" class="process-form-item">
|
|
<a-textarea
|
|
v-model="form.feedback"
|
|
:placeholder="$t('pleaseEnter')"
|
|
:auto-size="{ minRows: 5}"
|
|
/>
|
|
</a-form-model-item>
|
|
<!-- 附件-->
|
|
<a-form-model-item :label="$t('feedback')" prop="file" class="process-form-item">
|
|
<a-upload-dragger
|
|
name="file"
|
|
class="fileUpload"
|
|
:multiple="true"
|
|
action=""
|
|
:headers="headers"
|
|
@change="handleChange"
|
|
|
|
>
|
|
<a-icon :type="loading ? 'loading' : 'plus'" />
|
|
</a-upload-dragger>
|
|
</a-form-model-item>
|
|
</a-form-model>
|
|
</a-form>
|
|
</div>
|
|
</div>
|
|
<!-- 审查历史-->
|
|
<div class="review-record">
|
|
<div class="review-record-wrapper">
|
|
<div class="review-record-title">{{$t('approvalHistory')}}</div>
|
|
<a-table :columns="columns" :data-source="data" class="review-record-table" :pagination="false">
|
|
|
|
</a-table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'processForm',
|
|
props:{
|
|
title:String,
|
|
formData:Array,
|
|
data:Array,
|
|
},
|
|
data(){
|
|
return{
|
|
labelCol: {
|
|
xs: { span: 24 },
|
|
sm: { span: 1 },
|
|
},
|
|
wrapperCol: {
|
|
xs: { span: 24 },
|
|
sm: { span: 8 },
|
|
},
|
|
form:{
|
|
|
|
|
|
},
|
|
rules:{
|
|
value:[
|
|
{ required: true, message: this.$t('selectReviewResult'),trigger: 'change'},
|
|
],
|
|
feedback:[
|
|
{ max: 500, message: this.$t('cannotExceed500characters'),trigger: 'change'},
|
|
]
|
|
},
|
|
headers: {
|
|
authorization: 'authorization-text',
|
|
},
|
|
loading:false,
|
|
columns:[
|
|
{
|
|
title: this.$t('Operator'),
|
|
dataIndex: 'name',
|
|
key: 'name',
|
|
},
|
|
{
|
|
title: this.$t('role'),
|
|
dataIndex: 'role',
|
|
key: 'role',
|
|
},
|
|
{
|
|
title: this.$t('operationContent'),
|
|
dataIndex: 'content',
|
|
key: 'content',
|
|
},
|
|
{
|
|
title: this.$t('operationTime'),
|
|
dataIndex: 'time',
|
|
key: 'time',
|
|
},
|
|
]
|
|
}
|
|
},
|
|
mounted() {
|
|
// console.log('dataForm',this.formData)
|
|
},
|
|
methods:{
|
|
// 返回上一页
|
|
backTo(){
|
|
this.$router.go(-1)
|
|
},
|
|
onChange(){
|
|
|
|
},
|
|
handleChange(){
|
|
|
|
},
|
|
//提交
|
|
submit(){
|
|
this.$refs.processForm.validate(valid=>{
|
|
if(valid){
|
|
|
|
}
|
|
})
|
|
},
|
|
//下载文件
|
|
downloadFile(){
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.process-from{
|
|
.process-header{
|
|
position: fixed;
|
|
top:0;
|
|
width: 100%;
|
|
.process-header-top{
|
|
height: 56px;
|
|
line-height: 56px;
|
|
margin: 0 32px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 14px;
|
|
.right{
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
.anticon{
|
|
line-height: 56px;
|
|
margin-left: 15px;
|
|
font-size: 18px;
|
|
}
|
|
.right-select{
|
|
cursor: pointer;
|
|
.anticon-down{
|
|
font-size: 12px;
|
|
margin-right: 15px;
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
.right-img{
|
|
display: inline-block;
|
|
width: 18px;
|
|
height: 18px;
|
|
margin: 19px;
|
|
margin-left: 15px;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
}
|
|
.process-header-title {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
height: 68px;
|
|
line-height: 68px;
|
|
border-top: 1px solid #efefef;
|
|
border-bottom: 1px solid #efefef;
|
|
background: #FFFFFF;
|
|
|
|
.process-title {
|
|
padding-left: 32px;
|
|
font-size: 16px;
|
|
font-width: 600;
|
|
|
|
.back-to {
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
|
|
.process-header-btn {
|
|
padding-right: 22px;
|
|
|
|
.header-btn {
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.process-content{
|
|
margin-top:70px;
|
|
overflow-y: scroll;
|
|
.process-content-wrapper{
|
|
margin: 0 32px;
|
|
.content-box{
|
|
.content{
|
|
font-size: 16px;
|
|
margin: 24px 0;
|
|
.process-content-title{
|
|
font-weight: 600;
|
|
margin-bottom: 24px;
|
|
}
|
|
.text-info{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
.text-info-content{
|
|
width: 33.33%;
|
|
margin-bottom: 8px;
|
|
.text-info-content-name{
|
|
width: 124px;
|
|
font-size: 14px;
|
|
color: #6F7385 ;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
margin-right: 24px;
|
|
display: inline-block;
|
|
}
|
|
.text-info-content-title{
|
|
width: calc(100% - 200px);
|
|
display: inline-block;
|
|
font-size: 16px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
color: #040B29;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.process-review{
|
|
.process-review-wrapper{
|
|
margin:0 32px;
|
|
.title{
|
|
margin-bottom: 24px;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
}
|
|
.review-record{
|
|
.review-record-wrapper{
|
|
margin:0 32px;
|
|
.review-record-title{
|
|
margin-bottom: 24px;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<style lang="less">
|
|
.process-review{
|
|
.process-review-wrapper{
|
|
.process-form-item{
|
|
.ant-col-1{
|
|
min-width: 100px;
|
|
}
|
|
.ant-col-8{
|
|
min-width: 500px;
|
|
}
|
|
.fileUpload{
|
|
.ant-upload{
|
|
width:96px;
|
|
height:96px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|