Files
laws_weilai/jero-web/src/views/projectManagement/components/nonConformance.vue
T
2023-09-08 17:30:03 +08:00

700 lines
23 KiB
Java

<template>
<a-card :bordered="false">
<div class="table-page-search-wrapper">
<a-form layout="inline" @keyup.enter.native="searchQuery">
<a-row :gutter="24">
<a-col :md="6" :sm="8">
<div class="box-title-text">
<div class="title-text" :title="$t('title')">
<span>{{$t('title')}}</span>
</div>
<a-input class="box-input" :placeholder="$t('PleaseEnter')+$t('title')"
v-model="queryParam.title"></a-input>
</div>
</a-col>
<a-col :md="6" :sm="8">
<div class="box-title-text">
<div class="title-text" :title="$t('Relevantlawsregulations')">
<span>{{$t('Relevantlawsregulations')}}</span>
</div>
<a-input class="box-input" :placeholder="$t('PleaseEnter')+$t('Relevantlawsregulations')"
v-model="queryParam.lawsName"></a-input>
</div>
</a-col>
<a-col :md="6" :sm="8">
<div class="box-title-text">
<div class="title-text" :title="$t('RelatedItems')">
<span>{{$t('RelatedItems')}}</span>
</div>
<a-select allowClear
class="box-input"
v-model="queryParam.projectId"
:getPopupContainer="triggerNode=> triggerNode.parentNode"
showSearch
optionFilterProp="label"
:autoClearSearchValue="false"
:placeholder="$t('PleaseSelect')+$t('RelatedItems')">
<a-select-option v-for="(item, key) in projectNameList"
:key="key"
:label="item.projectName"
:value="item.id">
<span style="display: inline-block;width: 100%" :title=" item.projectName ">
{{ item.projectName}}
</span>
</a-select-option>
</a-select>
</div>
</a-col>
<template v-if="toggleSearchStatus">
<a-col :md="6" :sm="8">
<div class="box-title-text">
<div class="title-text" :title="$t('problemType')">
<span>{{$t('problemType')}}</span>
</div>
<j-dict-select-tag class="box-input" v-model="queryParam.problemType"
:placeholder="$t('PleaseSelect')+$t('problemType')"
:type="'select'"
@changeQuery="onChange"
:triggerChange="false" :dictCode="'wen4_ti2_lei4_xing2'"/>
</div>
</a-col>
<a-col :md="6" :sm="8">
<div class="box-title-text">
<div class="title-text" :title="$t('statisticalNodes')">
<span>{{$t('statisticalNodes')}}</span>
</div>
<a-select :placeholder="$t('PleaseSelect')+$t('statisticalNodes')"
allowClear
show-search
class="box-input"
optionFilterProp="label"
:getPopupContainer="triggerNode=> triggerNode.parentNode"
v-model="queryParam.dutyTerritory">
<a-select-option v-for="(item, key) in firstLevelDutyTerritoryList"
:key="key"
:label="item.key"
:value="item.key">
<span style="display: inline-block;width: 100%" :title=" item.key ">
{{ item.key }}
</span>
</a-select-option>
</a-select>
</div>
</a-col>
<a-col :md="6" :sm="8">
<div class="box-title-text">
<div class="title-text" :title="$t('Problemstate')">
<span>{{$t('Problemstate')}}</span>
</div>
<a-select allowClear
class="box-input"
v-model="queryParam.problemState"
:getPopupContainer="triggerNode=> triggerNode.parentNode"
showSearch
optionFilterProp="label"
:autoClearSearchValue="false"
:placeholder="$t('PleaseSelect')+$t('Problemstate')">
<a-select-option v-for="(item, key) in ProblemstateList"
:label='item'
:key="key"
:value="item">
<span style="display: inline-block;width: 100%" :title=" item">
{{ item }}
</span>
</a-select-option>
</a-select>
</div>
</a-col>
</template>
<span style="float: right;overflow: hidden;margin-right: 11px" class="table-page-search-submitButtons">
<a-col :md="6" :sm="24">
<a @click="handleToggleSearch">
{{ !toggleSearchStatus ? $t('open') : $t('away') }}
<a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
</a>
<a-button class="box-button" style="margin-left: 8px" @click="searchReset">{{$t('reset')}}</a-button>
<a-button class="box-button" style="margin-left: 8px" type="primary" @click="searchQuery">{{$t('query')}}</a-button>
</a-col>
</span>
</a-row>
</a-form>
</div>
<div class="table-operator">
<div class="operator-text" @click="handleAdd" v-has="'ncrTrack:add'">
<a-icon type="plus"/>
{{$t('newlyAdded')}}
</div>
<div @click="handleExport" v-has="'ncrTrack:exportData'" class="operator-text">
<a-icon type="export" :rotate="-90"/>
{{ $t('export') }}
</div>
</div>
<div>
<a-table
ref="table"
size="middle"
rowKey="uuid"
:components="drag(columns,'columns')"
:loading="loading"
:pagination="false"
:scroll="{x: '100%'}"
@change="tableOnChange"
:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
:data-source="dataSource"
:columns="columns"
>
<!-- <span slot="standard" slot-scope="text,result">-->
<!-- <a @click="designFlowStatusClick(result)" class="textName" :title="text">-->
<!-- {{text}}-->
<!-- </a>-->
<!-- </span>-->
<div slot="CertificationProgress" slot-scope="text,result">
<span v-if="result.problemState == $t('red')" class="box-content-Progress box-content-cou nonConformityColor"
:style="{'width':long=='zh-cn'?'90px' : '120px'}"
>
{{result.problemState ? result.problemState : ''}}
</span>
<span v-if="result.problemState == $t('green')" class="box-content-Progress box-content-cou accordColor"
:style="{'width':long=='zh-cn'?'90px' : '120px'}"
>
{{result.problemState ? result.problemState : ''}}
</span>
<span v-if="result.problemState == $t('yellow')" class="box-content-Progress box-content-cou TrackedColor"
:style="{'width':long=='zh-cn'?'90px' : '120px'}"
>
{{result.problemState ? result.problemState : ''}}
</span>
</div>
<!-- <span slot="problemType" slot-scope="text,result">-->
<!-- <span>{{result.flag== 'NEW'?result.problemType_dictText:result.problemType}}</span>-->
<!-- </span>-->
<span slot="operation" slot-scope="text,record">
<a class="text-operation" v-has="'ncrTrack:check'"
@click="detil(record)">
{{ $t('See') }}
</a>
<a class="text-operation" v-if="record.flag == 'NEW'" v-has="'ncrTrack:edit'"
@click="edit(record)">
{{ $t('edit') }}
</a>
<a class="text-operation" v-if="record.flag == 'NEW'" v-has="'ncrTrack:delete'"
@click="deleteLib(record)">
{{ $t('deleteLib') }}
</a>
</span>
</a-table>
</div>
<div class="page" v-if="dataSource.length > 0">
<a-pagination
:show-total="total => $t('total')+` ${total} `+$t('strip')"
show-quick-jumper
show-size-changer
:page-size.sync="pageSize"
:total="total"
:current="pageNo"
@change="pageOnChange"
@showSizeChange="SizeChange"
/>
</div>
<designCompliance ref="designComplianceRef"/>
<addModel ref="addModelRef" @addModelForm="addModelForm"/>
<detilModel ref="detilModelRef"/>
</a-card>
</template>
<script>
import { getAction, postAction, downloadFile, deleteAction ,downloadFilePost} from '@/api/manage'
import PersonnelSelection from '@/components/PersonnelSelection/index'
import designCompliance from '../../toDoCenter/projectRegulationTasks/components/designCompliance'
import store from '@/store/'
import addModel from './addModelconformance'
import moment from 'moment'
import detilModel from './detilModel'
import { ResizeHeader, ResizeColumnProvide } from '@/mixins/header'
export default {
name: 'projectNonConformance',
components: {
PersonnelSelection,
addModel,
detilModel,
designCompliance
},
mixins:[ResizeHeader, ResizeColumnProvide],
data() {
return {
queryParam: {},
loading: false,
dataSource: [],
selectedRowKeys: [],
projectNameList: [],
firstLevelDutyTerritoryList:[],
ProblemstateList:[this.$t('red'),this.$t('yellow'),this.$t('green'),],
// CertificationColor: {
// $t('red'): 'nonConformityColor',
// $t('green'): 'accordColor',
// $t('yellow'): 'TrackedColor',
// },
toggleSearchStatus: false,
columns: [
{
title: this.$t('title'),
align: 'left',
dataIndex: 'title',
width: 170,
sorter:true,
ellipsis: true
},
{
title: this.$t('Relevantlawsregulations'),
align: 'left',
dataIndex: 'lawsName',
width: 170,
sorter:true,
ellipsis: true
},
{
title: this.$t('RelatedItems'),
align: 'left',
dataIndex: 'projectName',
width: 170,
sorter:true,
ellipsis: true
},
{
title: this.$t('problemType'),
align: 'left',
dataIndex: 'problemType_dictText',
width: 170,
sorter:true,
ellipsis: true,
scopedSlots: { customRender: 'problemType' }
},
{
title: this.$t('statisticalNodes'),
align: 'left',
dataIndex: 'dutyTerritory',
width: 100,
sorter:true,
ellipsis: true
},
{
title: this.$t('creator'),
align: 'left',
dataIndex: 'createBy',
width: 100,
sorter:true,
ellipsis: true
},
{
title: this.$t('Problemstate'),
align: 'left',
dataIndex: 'problemState',
width: 120,
sorter:true,
ellipsis: true,
scopedSlots: { customRender: 'CertificationProgress' }
},
{
title: this.$t('createTime'),
align: 'left',
dataIndex: 'createTime',
sorter:true,
width: 180
},
{
title: this.$t('updateTime'),
align: 'left',
dataIndex: 'updateTime',
sorter:true,
width: 180
},
{
title: this.$t('operation'),
align: 'left',
fixed: 'right',
width: localStorage.getItem('language') == 'zh-cn' ? 160 : 180,
scopedSlots: { customRender: 'operation' }
}
],
total: 0,
pageSize: 10,
pageNo: 1,
orderBy: '1',
orderByField: '',
long: '',
isPersonnelSelection:true,
url: {
page: '/project/projectLawsInventoryEO/queryNotComplianList',
exportData: '/project/projectLawsInventoryEO/exportNotComplianList'
},
content: []
}
},
created() {
if (store.getters.userInfo) {
this.$socketPublic.dispatch('webSocketInit')//初始化ws
}
},
mounted() {
this.long = localStorage.getItem('language') || 'zh-cn'
this.getList()
this.getNameList()
this.getFirstLevelDutyTerritory()
},
watch: {
'$socketPublic.state.msg': {
//处理接收到的消息
handler: function(res) {
let that = this
let data = JSON.parse(res.data)
if (data.msgId) {
this.getList()
}
}
}
},
methods: {
getFirstLevelDutyTerritory() {
getAction('/sys/dictItem/getFirstLevelDutyTerritory', {}).then((res) => {
if (res.success) {
this.firstLevelDutyTerritoryList = res.result
} else {
this.firstLevelDutyTerritoryList = []
}
})
},
getNameList() {
getAction('/project/projectNameInfoEO/queryProjectNameList', {}).then((res) => {
if (res.success) {
this.projectNameList = res.result || []
} else {
this.projectNameList = []
}
})
},
handleToggleSearch() {
this.toggleSearchStatus = !this.toggleSearchStatus
},
searchQuery() {
this.pageNo = 1
this.getList()
},
addModelForm(){
this.getList()
},
onSelectChange(value) {
this.content = []
this.selectedRowKeys = value
if (this.selectedRowKeys && this.selectedRowKeys.length > 0) {
this.dataSource.forEach(res => {
this.selectedRowKeys.forEach(val => {
if (res.uuid == val) {
this.content.push({
id: res.id || res.uuid,
flowType: res.flowType
})
}
})
})
}
},
searchReset() {
this.isPersonnelSelection = false
this.$nextTick(()=>{
this.isPersonnelSelection = true
})
this.pageNo = 1
this.queryParam = {}
this.getList()
},
pageOnChange(page, pageSize) {
this.pageNo = page
this.getList()
},
SizeChange(page, pageSize) {
this.pageNo = 1
this.pageSize = pageSize
this.getList()
},
tableOnChange(pagination, filters, sorter) {
this.orderBy = sorter.order == 'ascend' ? '1' : '2'
this.orderByField = sorter.columnKey
this.getList()
},
onChange(value){
console.log(value)
this.queryParam.problemType_dictText = value
},
getList() {
if(this.queryParam.problemType_dictText){
delete this.queryParam.problemType
}
let query = {
pageNo: this.pageNo,
pageSize: this.pageSize,
orderBy: this.orderBy,
orderByField: this.orderByField,
projectLibraryId: this.$route.query.id,
projectName:this.$route.query.projectName,
...this.queryParam
}
this.loading = true
getAction(this.url.page, query).then((res) => {
if (res.success) {
if (res.result.current > 1 && res.result.records.length == 0) {
this.pageNo = 1
this.getList()
return
}
this.dataSource = res.result.records || []
this.total = res.result.total
this.loading = false
} else {
this.dataSource = []
this.loading = false
}
})
},
handleAdd(){
this.$refs.addModelRef.add()
},
edit(record){
this.$refs.addModelRef.edit(JSON.parse(JSON.stringify(record)))
},
detil(record){
if(record.flag == 'NEW'){
this.$refs.detilModelRef.edit(JSON.parse(JSON.stringify(record)))
}else{
this.designFlowStatusClick(record)
}
},
deleteLib(record){
let _this = this
this.$confirm({
content: _this.$t('ConfirmDelete'),
onOk() {
deleteAction('/project/problemManagementEO/deleteBatch', { ids: record.uuid }).then((res) => {
if (res.success) {
_this.$message.success(_this.$t('OperationSuccessful'))
_this.getList()
} else {
_this.$message.warning(res.message)
}
})
}
})
},
handleExport() {
let query = {
...this.queryParam,
ncrTrackVOList: this.content,
projectLibraryId: this.$route.query.id,
projectName:this.$route.query.projectName,
}
let date = moment(new Date()).format('YYYY-MM-DD')
downloadFilePost(this.url.exportData, this.$t('Problemanagement') + date + '.zip', query, this.Deselect)
},
Deselect() {
this.selectedRowKeys = []
},
PersonnelSelectionChange(value, id) {
this.queryParam[value] = id
this.queryParam = { ...this.queryParam }
console.log(this.queryParam)
},
//流程状态点击事件
designFlowStatusClick(row, name) {
let query = {}
let TaskKey = ''
if (row.flowType == '2') {
if (row.flowStatus == 'Task to be confirmed' || row.flowStatus == 'Duty Person Rejected') {
TaskKey = 'zrrqr'
} else if (row.flowStatus == 'Results to be submitted' || row.flowStatus == 'Non-Compliance' ||row.flowStatus == 'To be tracked') {
TaskKey = 'zrrtjjfw'
} else if (row.flowStatus == 'Results to be reviewed' ||
row.flowStatus == 'Compliance' ||
row.flowStatus == 'NA') {
TaskKey = 'fggcssh'
}
query = {
actiProcInstId: row.actiProcInstId,
projectTaskInventoryId: row.id,
projectLibraryId: this.$route.query.id,
TaskKey: TaskKey,
isDisplay: false,
flowType: row.flowType,
Sponsor: 'regulationOwnerName',
personLiable: 'designDutyIdName',
typeOfDeliverables: 'designDeliverableTypeName',
deliverableTemplate: 'designDeliverableTemplate',
DueDate: 'designDueDate',
remarks: 'designRemark',
}
} else if(row.flowType == '4'){
if (row.flowStatus == 'Task to be confirmed' || row.flowStatus == 'Duty Person Rejected') {
TaskKey = 'zrrqr'
} else if (row.flowStatus == 'Results to be submitted' || row.flowStatus == 'Non-Compliance' ||row.flowStatus == 'To be tracked') {
TaskKey = 'zrrtjjfw'
} else if (row.flowStatus == 'Results to be reviewed' ||
row.flowStatus == 'Compliance' ||
row.flowStatus == 'NA') {
TaskKey = 'fggcssh'
}
query = {
actiProcInstId: row.actiProcInstId,
projectTaskInventoryId: row.id,
projectLibraryId: this.$route.query.id,
TaskKey: TaskKey,
flowType: row.flowType,
isDisplay: false,
Sponsor: 'regulationOwnerName',
personLiable: 'verifyDutyIdName',
typeOfDeliverables: 'verifyDeliverableTypeName',
deliverableTemplate: 'verifyDeliverableTemplate',
DueDate: 'verifyDueDate',
remarks: 'verifyRemark',
}
}
this.$refs.designComplianceRef.getList(JSON.parse(JSON.stringify(query)), row.flowTypeName)
},
standardClick(val) {
let num = val.prcType
let query = {
taskIds: val.taskId,
projectTaskInventoryId: val.projectLawsInventoryId,
projectLibraryId: val.projectLibraryId,
projectName: val.projectName,
id: val.projectLibraryId,
serialNumber: val.serialNumber,
actiProcInstId: val.prcId,
primaryKeyId: val.projectTaskInventoryDetailId,
TaskKey: val.taskDefinitionKey,
isDisplay: val.status == 'NotDone' ? true : false
}
switch (num) {
case '2':
query.flowType = 2
query.Sponsor = 'designInitiatorName'
query.personLiable = 'designDutyName'
query.typeOfDeliverables = 'designDeliverableTypeName'
query.deliverableTemplate = 'designDeliverableTemplate'
query.DueDate = 'designDueDate'
query.remarks = 'designRemark'
break
case '3':
query.flowType = 3
query.Sponsor = 'prehomoInitiatorName'
query.personLiable = 'prehomoDutyName'
query.typeOfDeliverables = 'prehomoDeliverableTypeName'
query.deliverableTemplate = 'prehomoDeliverableTemplate'
query.DueDate = 'prehomoDueDate'
query.remarks = 'prehomoRemark'
break
case '4':
query.flowType = 4
query.Sponsor = 'verifyInitiatorName'
query.personLiable = 'verifyDutyName'
query.typeOfDeliverables = 'verifyDeliverableTypeName'
query.deliverableTemplate = 'verifyDeliverableTemplate'
query.DueDate = 'verifyDueDate'
query.remarks = 'verifyRemark'
break
}
let newUrl = this.$router.resolve({
path: '/taskListProcess',
query: query
})
window.open(newUrl.href, '_blank')
}
}
}
</script>
<style scoped>
@import '~@assets/less/common.less';
.box-title-text {
line-height: 1.4;
display: flex;
align-items: center;
margin-bottom: 10px;
}
.title-text {
width: 110px;
color: #000F16;
display: inline-block;
font-weight: 500;
font-size: 14px;
margin-right: 16px;
margin-top: 3px;
text-align: right;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.box-input {
display: inline-block;
width: 70%;
height: 38px;
margin-top: 2px;
}
.box-button {
height: 38px;
/*margin-top: 2px;*/
}
.page {
text-align: right;
margin-top: 20px;
}
.box-content-Progress {
width: 78px;
height: 32px;
display: inline-block;
text-align: center;
line-height: 32px;
border-radius: 4px;
background: #f1f3f5;
color: #919399;
}
.accordColor {
background: #dbf6e2;
color: #26BD4B;
}
.nonConformityColor {
background: #f3dddd;
color: #E83030;
}
.TrackedColor {
background: #f6ebdb;
color: #FDA71C;
}
.notInvolvedColor {
background: #eef1f4;
color: #707486;
}
.submittedColor {
color: #00B3BE;
background: #ddf3f4;
}
.textName {
width: 100%;
overflow: hidden;
display: -webkit-box;
text-overflow: ellipsis;
/*! autoprefixer: off */
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
/*! autoprefixer: on;*/
text-justify: inter-ideograph;
word-break: break-all
}
</style>