标签管理
This commit is contained in:
caoyang
@@ -0,0 +1,318 @@
|
||||
<template>
|
||||
<div class="process-from">
|
||||
<div class="process-header">
|
||||
<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 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">
|
||||
<span :title="ol.value">{{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){
|
||||
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.process-from{
|
||||
.process-header{
|
||||
position: fixed;
|
||||
top:0;
|
||||
width: 100%;
|
||||
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>
|
||||
@@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<div class="process-detail">
|
||||
<processForm :title="title" :formData="formData" :data="data"></processForm>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import processForm from '@/components/processForm/index'
|
||||
export default {
|
||||
name: 'detail',
|
||||
components:{
|
||||
processForm
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
title:'工程接口人确认符合性要求',
|
||||
formData:[
|
||||
{
|
||||
项目信息:
|
||||
[
|
||||
{
|
||||
area: "项目信息",
|
||||
name: '项目名称',
|
||||
value: "Orion-G1.1"
|
||||
},
|
||||
{
|
||||
area: "项目信息",
|
||||
name: '目标市场',
|
||||
value: "中国"
|
||||
},
|
||||
{
|
||||
area: "项目信息",
|
||||
name: '项目状态',
|
||||
value: "在研"
|
||||
},
|
||||
{
|
||||
area: "项目信息",
|
||||
name: 'Studio工程师',
|
||||
value: "李四"
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
标准内容:
|
||||
[
|
||||
{
|
||||
area: "标准内容",
|
||||
name: 'WVTA ID',
|
||||
value: "字段占位符"
|
||||
},
|
||||
{
|
||||
area: "标准内容",
|
||||
name: 'WVTA ID',
|
||||
value: "字段占位符"
|
||||
},
|
||||
{
|
||||
area: "标准内容",
|
||||
name: 'WVTA ID',
|
||||
value: "字段占位符"
|
||||
},
|
||||
{
|
||||
area: "标准内容",
|
||||
name: 'WVTA ID',
|
||||
value: "字段占位符"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
data:[
|
||||
{
|
||||
name:'李四',
|
||||
role:'法规工程师',
|
||||
content:'设置交付物类型为测试报告',
|
||||
time:'2019-12-31 14:00:00'
|
||||
},
|
||||
{
|
||||
name:'李五',
|
||||
role:'法规工程师',
|
||||
content:'设置交付物类型为测试报告',
|
||||
time:'2019-12-31 14:00:00'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<div class="process">
|
||||
<a-button @click="routeTo">测试表单</a-button>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'process',
|
||||
|
||||
data(){
|
||||
return{
|
||||
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
routeTo(){
|
||||
let newUrl = this.$router.resolve({
|
||||
path: '/docManage/form/detail',
|
||||
query: {}
|
||||
})
|
||||
window.open(newUrl.href, "_blank");
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user