握手流程布局
虚拟清单细节处理
This commit is contained in:
qq787203167
@@ -7,13 +7,15 @@
|
||||
</div>
|
||||
<div class="process-header-btn">
|
||||
<!-- 终止流程-->
|
||||
<a-button class="header-btn termin" @click="terminationProcessClick" type="danger" ghost>{{$t('terminationProcess')}}</a-button>
|
||||
<a-button class="header-btn termin" v-if="isTerminationProcess" @click="terminationProcess" type="danger" ghost>
|
||||
{{$t('terminationProcess')}}
|
||||
</a-button>
|
||||
<!-- 保存-->
|
||||
<a-button class="header-btn prese">{{$t('preservation')}}</a-button>
|
||||
<a-button class="header-btn prese" v-if="isPreservation" @click="preservation">{{$t('preservation')}}</a-button>
|
||||
<!-- 下发-->
|
||||
<a-button class="header-btn issue" type="primary" ghost>{{$t('issue')}}</a-button>
|
||||
<a-button class="header-btn issue" v-if="isIssue" @click="issue" type="primary" ghost>{{$t('issue')}}</a-button>
|
||||
<!-- 提交-->
|
||||
<a-button class="header-btn submit" type="primary" @click="submit">{{$t('submit')}}</a-button>
|
||||
<a-button class="header-btn submit" v-if="isSubmit" @click="submit" type="primary">{{$t('submit')}}</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -22,12 +24,46 @@
|
||||
<script>
|
||||
export default {
|
||||
name: 'headerProcess',
|
||||
props:['title'],
|
||||
methods:{
|
||||
terminationProcessClick(){
|
||||
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
//是否显示终止流程按钮
|
||||
isTerminationProcess: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//是否显示下发按钮
|
||||
isIssue: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//是否显示提交按钮
|
||||
isSubmit: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//是否显示保存按钮
|
||||
isPreservation: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
terminationProcess() {
|
||||
this.$emit('terminationProcess')
|
||||
},
|
||||
preservation() {
|
||||
this.$emit('preservation')
|
||||
},
|
||||
issue() {
|
||||
this.$emit('issue')
|
||||
},
|
||||
submit() {
|
||||
this.$emit('submit')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -81,15 +117,14 @@
|
||||
justify-content: space-between;
|
||||
height: 68px;
|
||||
line-height: 68px;
|
||||
border-top: 1px solid #efefef;
|
||||
border-bottom: 1px solid #efefef;
|
||||
border-bottom: 2px solid #efefef;
|
||||
background: #FFFFFF;
|
||||
|
||||
.process-title {
|
||||
padding-left: 32px;
|
||||
font-size: 16px;
|
||||
font-size: 20px;
|
||||
font-width: 600;
|
||||
|
||||
color: #040B29;
|
||||
.back-to {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<div class="box">
|
||||
<div class="box-text">
|
||||
<div class="header-text">
|
||||
{{$t('essentialInformation')}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-text">
|
||||
<div class="text-field" v-for="(item,index) in projectInformationList" :key="index">
|
||||
<span class="text-field-left" :title="item.title">{{item.title}}</span>
|
||||
<span class="text-field-right"
|
||||
>{{queryForm[item.value]}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAction, postAction, downloadFile, putAction } from '@/api/manage'
|
||||
|
||||
export default {
|
||||
name: 'projectInformation',
|
||||
props: {
|
||||
// {title:'',value:'v-model的绑定值'}
|
||||
projectInformationList: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
// 需要参数urlFrom，获取数据去显示内容
|
||||
url: {
|
||||
type: Object,
|
||||
default: {}
|
||||
},
|
||||
projectInformationId: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
queryForm: {}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getQueryForm()
|
||||
},
|
||||
methods: {
|
||||
getQueryForm() {
|
||||
getAction(this.url.urlFrom, { id: this.projectInformationId }).then((res) => {
|
||||
if (res.success) {
|
||||
this.queryForm = res.result[0] || {}
|
||||
} else {
|
||||
this.queryForm = {}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.box {
|
||||
padding: 0 24px 24px 24px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.box-text {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
|
||||
.header-text {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: #000F16;
|
||||
}
|
||||
}
|
||||
|
||||
.content-text {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.text-field {
|
||||
width: 33%;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.text-field-left {
|
||||
width: 124px;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #6F7385;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
margin-right: 24px;
|
||||
}
|
||||
|
||||
.text-field-right {
|
||||
width: calc(100% - 200px);
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
color: #040B29;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<div class="box">
|
||||
<div class="box-text">
|
||||
<div class="header-text">
|
||||
{{$t('standardContent')}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-text">
|
||||
<div class="text-field" v-for="(item,index) in standardContentList" :key="index">
|
||||
<span class="text-field-left" :title="item.title">{{item.title}}</span>
|
||||
<span class="text-field-right"
|
||||
>{{queryForm[item.value]}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAction, postAction, downloadFile, putAction } from '@/api/manage'
|
||||
|
||||
export default {
|
||||
name: 'standardContent',
|
||||
props: {
|
||||
// {title:'',value:'v-model的绑定值'}
|
||||
standardContentList: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
// 需要参数urlFrom，获取数据去显示内容
|
||||
url: {
|
||||
type: Object,
|
||||
default: {}
|
||||
},
|
||||
standardContentId: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
queryForm: {}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// this.getQueryForm()
|
||||
},
|
||||
methods: {
|
||||
getQueryForm() {
|
||||
getAction(this.url.urlFrom, { id: this.projectInformationId }).then((res) => {
|
||||
if (res.success) {
|
||||
this.queryForm = res.result[0] || {}
|
||||
} else {
|
||||
this.queryForm = {}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.box {
|
||||
padding: 0 24px 24px 24px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.box-text {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 60px;
|
||||
line-height: 40px;
|
||||
|
||||
.header-text {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: #000F16;
|
||||
}
|
||||
}
|
||||
|
||||
.content-text {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.text-field {
|
||||
width: 33%;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.text-field-left {
|
||||
width: 124px;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #6F7385;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
margin-right: 24px;
|
||||
}
|
||||
|
||||
.text-field-right {
|
||||
width: calc(100% - 200px);
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
color: #040B29;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user