Files
laws_weilai/jero-web/src/views/projectManagement/platformItemLibraryDetails/components/ProjectDetails.vue
T
2023-09-13 17:18:07 +08:00

386 lines
11 KiB
Java

<!--平台件-->
<template>
<div class="box">
<div class="box-text">
<div class="header-text">
{{$t('basicInformationOfParameters')}}
</div>
<div class="header-tight">
<a-button v-if="this.$route.query.studioEngineer == this.userInfo().id || administrators" class="box-button"
style="line-height: 32px" @click="edit">
{{$t('edit')}}
</a-button>
</div>
</div>
<div class="content-text">
<div class="text-field">
<span class="text-field-left" :title="$t('entryName')">{{$t('entryName')}}</span>
<span class="text-field-right" :title="queryForm.projectNameId"
>{{queryForm.projectNameId}}</span>
</div>
<div class="text-field">
<span class="text-field-left" :title="$t('brand')">{{$t('brand')}}</span>
<span class="text-field-right" :title="queryForm.brandText"
>{{queryForm.brandText}}</span>
</div>
<div class="text-field">
<span class="text-field-left" :title="$t('configurationItem')">{{$t('configurationItem')}}</span>
<span class="text-field-right" :title="queryForm.configurationItem"
>{{queryForm.configurationItem}}</span>
</div>
</div>
<div class="content-text">
<div class="text-field">
<span class="text-field-left" :title="$t('regulatoryEngineer')">{{$t('regulatoryEngineer')}}</span>
<span class="text-field-right" :title="queryForm.createBy"
>{{queryForm.createBy}}</span>
</div>
<div class="text-field">
<span class="text-field-left" :title="$t('dehicleDevelopmentPlan')">{{$t('dehicleDevelopmentPlan')}}</span>
<span class="text-field-right text-field-right-color"
:title="queryForm.vehicleDevelopmentPlan"
@click="urlClick(queryForm.vehicleDevelopmentPlan)"
>{{queryForm.vehicleDevelopmentPlan}}</span>
</div>
<div class="text-field">
<span class="text-field-left" :title="$t('certificationProgram')">{{$t('certificationProgram')}}</span>
<span class="text-field-right text-field-right-color"
:title="queryForm.attestationPlan"
@click="urlClick(queryForm.attestationPlan)"
>{{queryForm.attestationPlan}}</span>
</div>
</div>
<div class="content-text">
<div class="text-field">
<span class="text-field-left" :title="$t('explain')">{{$t('explain')}}</span>
<span class="text-field-right" :title="queryForm.explanation"
>{{queryForm.explanation}}</span>
</div>
</div>
<div class="box-text" style="margin-top: 10px;margin-bottom: 10px">
<div class="header-text">
{{$t('complianceCertificationProgram')}}
</div>
<div class="header-tight">
<a-button class="box-button"
v-if="this.$route.query.studioEngineer == this.userInfo().id || administrators"
style="line-height: 32px"
@click="settingClick">{{$t('setting')}}
</a-button>
</div>
</div>
<div class="process-content">
<complianceCertificationForm ref="complianceCertificationRef"/>
</div>
<div class="box-text" style="margin-top: 10px">
<div class="header-text">
{{$t('projectStatus')}}
</div>
<div class="header-tight">
<a-button class="box-button"
style="line-height: 32px"
@click="stateExportClick">{{$t('stateExport')}}
</a-button>
<a-button class="box-button"
v-if="activeKey == $t('regulatoryComplianceManagement') || activeKey == $t('certificationActivityManagement')"
style="line-height: 32px"
@click="versionStatisticsClick">{{$t('versionStatistics')}}
</a-button>
</div>
</div>
<projectStatus ref="projectStatusRef"
@currentStatus="currentStatus"
@projectStatusForm="projectStatusForm"/>
<versionStatistics ref="versionStatisticsRef" @versionStatisticsForm="versionStatisticsForm"/>
<addModel :url="url" ref="addModelRef" @addModelList="addModelList"/>
<settingList :url="url" ref="settingListRef" @settingListForm="settingListForm"/>
</div>
</template>
<script>
import * as echarts from 'echarts'
import { getAction, postAction, downloadFile, putAction } from '@/api/manage'
import addModel from './addModel'
import versionStatistics from './versionStatistics'
import complianceCertificationForm from './complianceCertificationForm'
import settingList from './settingList'
import projectStatus from './projectStatus'
import { mapGetters } from 'vuex'
export default {
name: 'ProjectDetails',
components: {
addModel,
settingList,
projectStatus,
versionStatistics,
complianceCertificationForm
},
data() {
return {
queryForm: {},
cut: '',
administrators: false,
activeKey: this.$t('regulatoryComplianceManagement'),
url: {
queryById: 'platform/projectLibraryBase/queryById',
add: 'platform/projectLibraryBase/add',
edit: 'platform/projectLibraryBase/edit',
queryByProjectId: 'platform/projectTaskPlanning/queryByProjectId',
addSettingUrl: 'platform/projectTaskPlanning/add',
editSettingUrl: 'platform/projectTaskPlanning/edit',
settingQueryForm: '/platform/projectTaskPlanning/list'
},
selectedRowKeys: [],
idList: [],
regulatoryCertificationTaskPlanList: []
}
},
mounted() {
this.getForm()
this.administrators = false
this.activeKey = this.$t('regulatoryComplianceManagement')
if (this.userInfo().userRoleList && this.userInfo().userRoleList.length > 0) {
this.userInfo().userRoleList.forEach(res => {
if (res.roleCode == 'admin') {
this.administrators = true
}
})
}
},
methods: {
...mapGetters(['userInfo']),
getForm() {
getAction(this.url.queryById, { id: this.$route.query.id }).then((res) => {
if (res.success) {
this.cut = res.cut
this.queryForm = res.result[0] || {}
if (this.cut == 'en') {
this.queryForm.brandText = this.queryForm.brandTextEn
} else {
this.queryForm.brandText = this.queryForm.brandText
}
} else {
this.queryForm = {}
}
})
},
currentStatus(item) {
this.$emit('TaskListChange', item)
},
settingListForm() {
this.$refs.complianceCertificationRef.getSetting()
},
ListOfRelevantPersonnelClick() {
this.$refs.listOfRelevantPersonnelRef.getData()
},
rxswinClick(){
this.$refs.rxswinModelRef.getData()
},
urlClick(val) {
if (val) {
window.open(val)
}
},
edit() {
this.$refs.addModelRef.editModel(JSON.parse(JSON.stringify(this.queryForm)))
},
addModelList() {
this.getForm()
},
settingClick() {
this.$refs.settingListRef.edit()
},
stateExportClick() {
let query = {
projectLibraryId: this.$route.query.id
}
downloadFile('/platform/projectLibraryBase/exportProjectProgressStatisticsXls',
this.queryForm.projectName+'-'+this.queryForm.projectVersion+'-'+this.$t('projectProgressStatistics') + '.xls', query)
},
versionStatisticsClick() {
this.$refs.versionStatisticsRef.addModel(JSON.parse(JSON.stringify(this.selectedRowKeys)))
},
versionStatisticsForm(value) {
this.$refs.projectStatusRef.versionStatisticsForm(value)
this.selectedRowKeys = JSON.parse(JSON.stringify(value))
},
projectStatusForm(activeKey) {
this.activeKey = activeKey
}
}
}
</script>
<style scoped lang="less">
@import '~@assets/less/common.less';
.box {
padding: 0 24px 24px 24px;
box-sizing: border-box;
}
.header-text {
font-size: 16px;
font-weight: bold;
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;
word-break: break-word;
color: #040B29;
font-weight: 400;
}
}
.text-field-content {
width: 100%;
/*margin-bottom: 34px;*/
.text-field-left {
width: 124px;
display: inline-block;
font-size: 14px;
font-weight: 400;
color: #6F7385;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
float: left;
margin-right: 24px;
margin-top: 3px;
}
.text-field-right {
width: calc(100% - 200px);
display: inline-block;
font-size: 16px;
float: left;
word-break: break-word;
color: #040B29;
font-weight: 400;
}
}
}
.process-content {
margin-top: 4px;
position: relative;
.process-content-content {
background: #fff;
z-index: 1000;
padding: 0 20px;
.process-content-left {
float: left;
}
.process-content-right {
float: left;
margin-left: 7px;
.process-content-right-top {
font-size: 14px;
font-weight: 400;
color: #040B29;
max-width: 155px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.process-content-right-button {
max-width: 155px;
font-size: 12px;
font-weight: 400;
color: #6F7385;
margin-top: -4px;
}
}
}
.process-content-content:first-child {
padding: 0 20px 0 0;
}
.process-content-content:last-child {
padding: 0 0 0 20px;
}
.process-content-right-xian {
height: 2px;
width: calc(100% - 27px);
background: #E6E6E9;
position: absolute;
top: 16px;
}
}
@media screen and (min-width: 600px) and (max-width: 1600px) {
.process-content-right-top {
max-width: 70px !important;
white-space: inherit !important;
overflow: hidden !important;
}
.process-content-right-button {
max-width: 70px !important;
}
}
.text-field-right-color {
color: #00B3BE !important;
cursor: pointer;
}
.box-text {
display: flex;
justify-content: space-between;
height: 72px;
line-height: 80px;
}
.header-tight {
line-height: 90px;
}
.button-text {
padding: 0 13px;
}
.box-button {
margin-left: 12px;
}
</style>