标签管理
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