442 lines
16 KiB
Java
442 lines
16 KiB
Java
<template>
|
|
<div class="doc-detail">
|
|
<div class="Virtual-detail-header" style="position: fixed;top: 0">
|
|
<div class="Virtual-detail-title">
|
|
<span style="line-height: 74px;display: inline-block;float: left">
|
|
<a-icon @click="backClick" type="left-circle" theme="filled"
|
|
style="margin-right: 8px;font-size: 30px;color: #21c9cc;"/>
|
|
</span>
|
|
<span>
|
|
{{this.title}}
|
|
</span>
|
|
</div>
|
|
<div class="Virtual-detail-text-right" v-if="textTitle === $t('listOfRegulations')">
|
|
<div class="operator-text" v-has="'projectComment:list'" @click="commentClick">
|
|
<a-icon type="message"/>
|
|
{{$t('comment')}}
|
|
</div>
|
|
<div class="operator-text" v-has="'projectHistoryVersions:list'" @click="historicalVersionClick">
|
|
<a-icon type="clock-circle"/>
|
|
{{$t('historicalVersion')}}
|
|
</div>
|
|
<div class="operator-text" v-has="'projectLawsInventoryLog:page'" @click="UpdateLogClick">
|
|
<a-icon type="reload"/>
|
|
{{$t('UpdateLog')}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="padding: 67px 0 0 0;background: #ffffff;height:100%">
|
|
<div class="detail-content" style="height: 100%">
|
|
<div v-if="isDisplay" class="Virtual-detail-left">
|
|
<div class="Virtual-detail-left-text" :title="$t('projectDetails')"
|
|
v-has="'projectLawsInventory:projectDetails'"
|
|
v-if="isTrue"
|
|
@click="textClick(0,$t('projectDetails'))">
|
|
<a-icon type="container"/>
|
|
{{$t('projectDetails')}}
|
|
</div>
|
|
<div class="Virtual-detail-left-text" v-has="'projectLawsInventory:list'" :title="$t('listOfRegulations')"
|
|
@click="textClick(1,$t('listOfRegulations'))">
|
|
<a-icon type="control"/>
|
|
{{$t('listOfRegulations')}}
|
|
</div>
|
|
<div class="Virtual-detail-left-text" :title="$t('taskList')"
|
|
v-has="'projectLawsInventory:taskList'"
|
|
@click="textClick(2,$t('taskList'))">
|
|
<a-icon type="safety"/>
|
|
{{$t('taskList')}}
|
|
</div>
|
|
<div class="Virtual-detail-left-text" v-has="'ncrTrack:queryPageInfo'" :title="$t('nonConformance')"
|
|
@click="textClick(3,$t('nonConformance'))">
|
|
<a-icon type="safety-certificate"/>
|
|
{{$t('nonConformance')}}
|
|
</div>
|
|
<div class="Virtual-detail-left-text" v-has="'params:manifest:page'"
|
|
:title="$t('TaskParameterCollection')"
|
|
@click="textClick(4,$t('TaskParameterCollection'))">
|
|
<a-icon type="profile"/>
|
|
{{$t('TaskParameterCollection')}}
|
|
</div>
|
|
<div class="Virtual-detail-left-text"
|
|
:title="$t('projectStatus')"
|
|
@click="textClick(5,$t('projectStatus'))">
|
|
<a-icon type="cluster" />
|
|
{{$t('projectStatus')}}
|
|
</div>
|
|
<a-icon @click="textIconClick" type="menu-fold" class="text-icon"/>
|
|
</div>
|
|
<div v-if="!isDisplay" class="Virtual-detail-left-One">
|
|
<div class="Virtual-detail-left-text"
|
|
:title="$t('projectDetails')"
|
|
v-has="'projectLawsInventory:projectDetails'"
|
|
v-if="isTrue"
|
|
@click="textClick(0,$t('projectDetails'))">
|
|
<a-icon type="container"/>
|
|
</div>
|
|
<div class="Virtual-detail-left-text" v-has="'projectLawsInventory:list'" :title="$t('listOfRegulations')"
|
|
@click="textClick(1,$t('listOfRegulations'))">
|
|
<a-icon type="control"/>
|
|
</div>
|
|
<div class="Virtual-detail-left-text" :title="$t('taskList')"
|
|
v-has="'projectLawsInventory:taskList'"
|
|
@click="textClick(2,$t('taskList'))">
|
|
<a-icon type="safety"/>
|
|
</div>
|
|
<div class="Virtual-detail-left-text" v-has="'ncrTrack:queryPageInfo'" :title="$t('nonConformance')"
|
|
@click="textClick(3,$t('nonConformance'))">
|
|
<a-icon type="safety-certificate"/>
|
|
</div>
|
|
<div class="Virtual-detail-left-text" v-has="'params:manifest:page'"
|
|
:title="$t('TaskParameterCollection')"
|
|
@click="textClick(4,$t('TaskParameterCollection'))">
|
|
<a-icon type="profile"/>
|
|
</div>
|
|
<div class="Virtual-detail-left-text"
|
|
:title="$t('projectStatus')"
|
|
@click="textClick(5,$t('projectStatus'))">
|
|
<a-icon type="cluster" />
|
|
</div>
|
|
<a-icon @click="textIconClick" type="menu-unfold" class="text-icon-one"/>
|
|
</div>
|
|
<div class="Virtual-detail-right"
|
|
:style="{'width':isDisplay?'calc(100% - 240px)':'calc(100% - 66px)'}">
|
|
<ProjectDetailsName v-if="textTitle === $t('projectDetails')"/>
|
|
<listOfRegulations v-else-if="textTitle === $t('listOfRegulations')"
|
|
:areaOfResponsibilityList="areaOfResponsibilityList"/>
|
|
<TaskList :isDisplayNum="isDisplayNum" :areaOfResponsibility="areaOfResponsibility"
|
|
v-else-if="textTitle === $t('taskList')"/>
|
|
<TaskParameterCollection v-else-if="textTitle === $t('TaskParameterCollection')"/>
|
|
<nonConformance v-else-if="textTitle === $t('nonConformance')"/>
|
|
<projectStatus @TaskListChange="TaskListChange"
|
|
v-else-if="textTitle === $t('projectStatus')"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<updateLog :url="url" ref="updateLogRef"/>
|
|
<historicalVersionList ref="historicalVersionListRef"/>
|
|
<commentList ref="commentListRef"/>
|
|
<JLoading :loading="loading"></JLoading>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import TaskList from '../components/TaskList'
|
|
import listOfRegulations from '../components/listOfRegulations'
|
|
import ProjectDetailsName from '../components/ProjectDetails'
|
|
import TaskParameterCollection from '../components/TaskParameterCollection'
|
|
import nonConformance from '../components/nonConformance'
|
|
import projectStatus from '../components/projectStatus'
|
|
import updateLog from '@/components/UpdateLog/index'
|
|
import historicalVersionList from '../components/historicalVersionList'
|
|
import commentList from '../components/commentList'
|
|
import { getAction, postAction, deleteAction, downloadFile } from '@/api/manage'
|
|
import { mapGetters } from 'vuex'
|
|
|
|
export default {
|
|
name: 'ProjectDetails',
|
|
components: {
|
|
TaskList,
|
|
listOfRegulations,
|
|
ProjectDetailsName,
|
|
TaskParameterCollection,
|
|
nonConformance,
|
|
updateLog,
|
|
historicalVersionList,
|
|
commentList,
|
|
projectStatus
|
|
},
|
|
data() {
|
|
return {
|
|
title: '',
|
|
isDisplayNum: '',
|
|
textTitle: '',
|
|
isTrue: true,
|
|
loading: false,
|
|
isDisplay: true,
|
|
areaOfResponsibilityList: {},
|
|
url: {
|
|
logList: '/project/projectLawsInventoryLogEO/page',
|
|
historicalVersionUrl: '',
|
|
queryUserPremissionByProjectLibraryId: '/project/projectCertificationDirectoryEO/queryUserPremissionByProjectLibraryId'
|
|
},
|
|
areaOfResponsibility: {},
|
|
engineeringInterfacePerson: ''
|
|
}
|
|
},
|
|
created() {
|
|
document.title = this.$route.query.projectName ? this.$t('projectDetails') + '-' + this.$route.query.projectName : this.$t('projectDetails')
|
|
this.title = this.$route.query.projectName
|
|
},
|
|
mounted() {
|
|
this.getTaskId()
|
|
if (this.$route.query.type) {
|
|
if (this.$route.query.type == '101') {
|
|
this.textColor(this.$t('projectDetails'))
|
|
this.textTitle = this.$t('projectDetails')
|
|
} else if (this.$route.query.type == '102') {
|
|
this.textColor(this.$t('listOfRegulations'))
|
|
this.textTitle = this.$t('listOfRegulations')
|
|
} else if (this.$route.query.type == '103') {
|
|
this.textColor(this.$t('taskList'))
|
|
this.textTitle = this.$t('taskList')
|
|
} else if (this.$route.query.type == '104') {
|
|
this.textColor(this.$t('nonConformance'))
|
|
this.textTitle = this.$t('nonConformance')
|
|
} else if (this.$route.query.type == '105') {
|
|
this.textColor(this.$t('TaskParameterCollection'))
|
|
this.textTitle = this.$t('TaskParameterCollection')
|
|
}
|
|
} else {
|
|
if (this.userInfo().userRoleList && this.userInfo().userRoleList.length > 0) {
|
|
if (this.userInfo().userRoleList.length == 1 && this.userInfo().userRoleList[0].roleCode == 'sdt') {
|
|
this.getList()
|
|
} else {
|
|
this.textColor(0)
|
|
}
|
|
} else {
|
|
this.textColor(0)
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
textIconClick() {
|
|
this.isDisplay = !this.isDisplay
|
|
},
|
|
...mapGetters(['userInfo']),
|
|
textColor(name) {
|
|
let textColor = document.getElementsByClassName('Virtual-detail-left-text-color')
|
|
if (textColor && textColor.length > 0) {
|
|
textColor[0].classList.remove('Virtual-detail-left-text-color')
|
|
}
|
|
let text = document.getElementsByClassName('Virtual-detail-left-text')
|
|
if (name == 0) {
|
|
text[name].classList.add('Virtual-detail-left-text-color')
|
|
this.textTitle = text[name].title
|
|
} else {
|
|
if (text && text.length > 0) {
|
|
for (let i = 0; i < text.length; i++) {
|
|
if (text[i].title == name) {
|
|
text[i].classList.add('Virtual-detail-left-text-color')
|
|
} else if (text[i].title == name) {
|
|
text[i].classList.add('Virtual-detail-left-text-color')
|
|
} else if (text[i].title == name) {
|
|
text[i].classList.add('Virtual-detail-left-text-color')
|
|
} else if (text[i].title == name) {
|
|
text[i].classList.add('Virtual-detail-left-text-color')
|
|
} else if (text[i].title == name) {
|
|
text[i].classList.add('Virtual-detail-left-text-color')
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
textClick(num, name) {
|
|
this.areaOfResponsibilityList = {}
|
|
this.areaOfResponsibility = {}
|
|
this.textTitle = name
|
|
let textColor = document.getElementsByClassName('Virtual-detail-left-text-color')
|
|
if (textColor && textColor.length > 0) {
|
|
textColor[0].classList.remove('Virtual-detail-left-text-color')
|
|
}
|
|
let text = document.getElementsByClassName('Virtual-detail-left-text')
|
|
for (let i = 0; i < text.length; i++) {
|
|
if (text[i].title == name) {
|
|
text[i].classList.add('Virtual-detail-left-text-color')
|
|
} else if (text[i].title == name) {
|
|
text[i].classList.add('Virtual-detail-left-text-color')
|
|
} else if (text[i].title == name) {
|
|
text[i].classList.add('Virtual-detail-left-text-color')
|
|
} else if (text[i].title == name) {
|
|
text[i].classList.add('Virtual-detail-left-text-color')
|
|
} else if (text[i].title == name) {
|
|
text[i].classList.add('Virtual-detail-left-text-color')
|
|
}
|
|
}
|
|
},
|
|
UpdateLogClick() {
|
|
this.$refs.updateLogRef.getList({ projectLibraryId: this.$route.query.id })
|
|
},
|
|
historicalVersionClick() {
|
|
this.$refs.historicalVersionListRef.getList()
|
|
},
|
|
commentClick() {
|
|
this.$refs.commentListRef.getData()
|
|
},
|
|
getTaskId() {
|
|
let query = {
|
|
projectLibraryId: this.$route.query.id
|
|
}
|
|
getAction(this.url.queryUserPremissionByProjectLibraryId, query).then((res) => {
|
|
if (res.success) {
|
|
this.isDisplayNum = res.result
|
|
}
|
|
})
|
|
},
|
|
getList() {
|
|
let query = {
|
|
projectId: this.$route.query.id
|
|
}
|
|
this.loading = true
|
|
postAction('/project/projectRelatedPersonnel/page', query).then((res) => {
|
|
if (res.success) {
|
|
let dataSource = res.result || []
|
|
console.log(dataSource)
|
|
dataSource.forEach(res => {
|
|
if (res.engineeringInterfacePerson || res.certificationEngineer || res.lawEngineer) {
|
|
this.engineeringInterfacePerson += res.engineeringInterfacePerson + ',' + res.certificationEngineer + ',' + res.lawEngineer + ','
|
|
}
|
|
})
|
|
if (this.engineeringInterfacePerson.includes(this.userInfo().id) ||
|
|
this.$route.query.studioEngineer == this.userInfo().id) {
|
|
this.isTrue = true
|
|
} else {
|
|
this.isTrue = false
|
|
}
|
|
this.$nextTick(() => {
|
|
this.textColor(0)
|
|
})
|
|
this.loading = false
|
|
} else {
|
|
this.textColor(0)
|
|
this.loading = false
|
|
}
|
|
})
|
|
},
|
|
TaskListChange(item) {
|
|
if (item.isListing && item.isListing == '1') {
|
|
this.areaOfResponsibilityList = item
|
|
this.textTitle = this.$t('listOfRegulations')
|
|
} else {
|
|
this.areaOfResponsibility = item
|
|
this.textTitle = this.$t('taskList')
|
|
}
|
|
let textColor = document.getElementsByClassName('Virtual-detail-left-text-color')
|
|
if (textColor && textColor.length > 0) {
|
|
textColor[0].classList.remove('Virtual-detail-left-text-color')
|
|
}
|
|
let text = document.getElementsByClassName('Virtual-detail-left-text')
|
|
for (let i = 0; i < text.length; i++) {
|
|
if (text[i].title == this.textTitle) {
|
|
text[i].classList.add('Virtual-detail-left-text-color')
|
|
}
|
|
}
|
|
},
|
|
backClick() {
|
|
this.$router.push({
|
|
path: '/projectLibrary'
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
@import '~@assets/less/common.less';
|
|
|
|
.doc-detail {
|
|
background: #fff;
|
|
height: 100%;
|
|
position: relative;
|
|
|
|
.Virtual-detail-header {
|
|
width: 100%;
|
|
height: 68px;
|
|
line-height: 68px;
|
|
padding: 0 32px 0 32px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
border-bottom: 2px #eff1f3 solid;
|
|
background: #fff;
|
|
|
|
.Virtual-detail-title {
|
|
display: inline-block;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
font-size: 20px;
|
|
font-weight: 400;
|
|
color: #040B29;
|
|
line-height: 68px;
|
|
}
|
|
|
|
.doc-detail-right {
|
|
width: 800px;
|
|
line-height: 68px;
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
.Virtual-detail-left {
|
|
width: 240px;
|
|
flex: 0 0 240px;
|
|
padding: 16px 24px;
|
|
box-sizing: border-box;
|
|
font-size: 16px;
|
|
line-height: 3;
|
|
float: left;
|
|
transition: all 0.2s;
|
|
|
|
.Virtual-detail-left-text {
|
|
padding: 2px 12px;
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
.Virtual-detail-left-One {
|
|
width: 66px;
|
|
flex: 0 0 66px;
|
|
display: inline-block;
|
|
padding: 16px 16px;
|
|
box-sizing: border-box;
|
|
font-size: 18px;
|
|
right: 0;
|
|
transition: all 0.2s;
|
|
|
|
.Virtual-detail-left-text {
|
|
padding: 2px 8px;
|
|
cursor: pointer;
|
|
margin-bottom: 18px;
|
|
color: rgb(0, 0, 0);
|
|
}
|
|
}
|
|
|
|
.Virtual-detail-right {
|
|
border-left: 2px #eff1f3 solid;
|
|
height: 100%;
|
|
float: right;
|
|
overflow: auto;
|
|
transition: all 0.2s;
|
|
}
|
|
}
|
|
|
|
.Virtual-detail-left-text-color {
|
|
background: #eff1f3;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.Virtual-detail-text-right {
|
|
|
|
}
|
|
|
|
.text-icon {
|
|
color: rgb(0, 0, 0);
|
|
font-size: 22px;
|
|
position: absolute;
|
|
left: 200px;
|
|
bottom: 20px;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.text-icon-one {
|
|
color: rgb(0, 0, 0);
|
|
font-size: 22px;
|
|
position: absolute;
|
|
left: 22px;
|
|
bottom: 20px;
|
|
transition: all 0.2s;
|
|
}
|
|
</style> |