Files
laws_weilai/jero-web/src/views/toDoCenter/projectRegulationTasks/components/confirmationDrawer.vue
T

482 lines
14 KiB
Java

<template>
<div style="position: relative">
<a-drawer
:title="titleName"
:maskClosable="false"
:width="948"
placement="right"
:closable="true"
@close="handleCancel"
:visible="visible"
style="height: 100%;overflow: auto;padding-bottom: 53px;">
<JLoading :loading="loading">{{$t('Submitting')}}</JLoading>
<div class="box">
<div class="header-text">
{{$t('Listoftreatableregulations')}}
</div>
<a-table
:pagination="false"
class="table"
:scroll="{x: '100%',y:300}"
:data-source="processableList"
rowKey="id"
:columns="columns">
</a-table>
</div>
<div class="box box-two">
<div class="header-text">
{{$t('Listofuntractableregulations')}}
</div>
<a-table
:pagination="false"
class="table"
:scroll="{x: '100%',y:300}"
rowKey="id"
:data-source="noProcessableList"
:columns="noColumns">
<span slot="problemType" slot-scope="text">
<span class="problemTypeText">
{{text}}
</span>
</span>
</a-table>
</div>
<div class="drawer-review">
<div class="header-text">
{{titleName == $t('Taskresponsibilityrecognition') ? this.$t('Taskconfirmationresult'):
this.$t('Compliancetaskhandling')}}
</div>
<a-form-model :model="formInline" class="formAdd" :rules="rules" ref="ruleForm">
<a-row :gutter="24">
<a-col :span="24">
<div class="box-title-text">
<div class="title-text">
<span class="Required">*</span>
<span class="title-text-text" :title="$t('resultofhandling')">{{$t('resultofhandling')}}</span>
</div>
</div>
<a-form-model-item class="itemModel" :prop="'flag'">
<a-radio-group class="box-input"
v-model="formInline.flag">
<a-radio value="Accepted" v-if="titleName == $t('Taskresponsibilityrecognition')">
{{$t('accept')}}
</a-radio>
<a-radio value="Rejected" v-if="titleName == $t('Taskresponsibilityrecognition')">
{{$t('refuse')}}
</a-radio>
<a-radio value="Compliance" v-if="titleName == $t('complianceConfirmation')">
{{$t('accord')}}
</a-radio>
<a-radio value="Non-Compliance" v-if="titleName == $t('complianceConfirmation')">
{{$t('nonConformity')}}
</a-radio>
<a-radio value="To be tracked" v-if="titleName == $t('complianceConfirmation')">
{{$t('Tracked')}}
</a-radio>
<a-radio value="NA" v-if="titleName == $t('complianceConfirmation')">
{{$t('notInvolved')}}
</a-radio>
</a-radio-group>
</a-form-model-item>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col :span="24">
<div class="box-title-text">
<div class="title-text">
<span class="Required">*</span>
<span class="title-text-text" :title="$t('feedbackMessage')">{{$t('feedbackMessage')}}</span>
</div>
</div>
<a-form-model-item class="itemModel" prop="approvalOpinion">
<a-textarea :placeholder="$t('pleaseEnter')+$t('feedbackMessage')"
v-model="formInline.approvalOpinion"
:rows="4"/>
</a-form-model-item>
</a-col>
</a-row>
<a-row :gutter="24" v-if="titleName == $t('complianceConfirmation')">
<a-col :span="24">
<div class="box-title-text">
<div class="title-text">
<span class="title-text-text" :title="$t('enclosure')">{{$t('enclosure')}}</span>
</div>
</div>
<a-form-model-item class="itemModel">
<a-button type="primary" class="button-text"
@click="clickButtonToUpload('approvalFile')">
{{ (formInline.approvalFile === 'null' || formInline.approvalFile === '' ||
formInline.approvalFile == null) ? $t('clickUpload') : $t('viewUploadedFiles')
}}
</a-button>
</a-form-model-item>
</a-col>
</a-row>
</a-form-model>
</div>
<div class="drawer-bootom-button">
<a-button style="margin-right: .8rem" @click="handleCancel">{{$t('cancel')}}</a-button>
<a-button @click="determineClick" type="primary">{{$t('determine')}}</a-button>
</div>
</a-drawer>
<uploadFile ref="uploadFile"
@uploadSuccess="uploadSuccess"/>
</div>
</template>
<script>
import uploadFile from '@/components/uploadFile/file'
import { getAction, postAction, putAction, deleteAction } from '@/api/manage'
import { mapGetters } from 'vuex'
import moment from 'moment'
export default {
name: 'confirmationDrawer',
components: {
uploadFile
},
props: {},
data() {
return {
titleName: '',
allTitle: '',
visible: false,
columns: [
{
title: this.$t('project'),
align: 'left',
dataIndex: 'projectName',
ellipsis: true,
width: 170
},
{
title: this.$t('standard'),
align: 'left',
dataIndex: 'serialNumber',
ellipsis: true,
width: 170
},
{
title: this.$t('areaOfResponsibility'),
align: 'left',
dataIndex: 'dutyTerritoryName',
ellipsis: true,
width: 120
},
{
title: this.$t('taskType'),
align: 'left',
dataIndex: 'flowTypeShow',
ellipsis: true,
width: 150
},
{
title: this.$t('Categoryofdeliverables'),
align: 'left',
dataIndex: 'deliverableTypeName',
ellipsis: true,
width: 120
},
{
title: this.$t('closingDate'),
align: 'left',
dataIndex: 'endTime',
ellipsis: true,
width: 120
}
],
noColumns: [
{
title: this.$t('project'),
align: 'left',
dataIndex: 'projectName',
ellipsis: true,
width: 170
},
{
title: this.$t('standard'),
align: 'left',
dataIndex: 'serialNumber',
ellipsis: true,
width: 170
},
{
title: this.$t('areaOfResponsibility'),
align: 'left',
dataIndex: 'dutyTerritoryName',
ellipsis: true,
width: 120
},
{
title: this.$t('taskType'),
align: 'left',
dataIndex: 'flowTypeShow',
ellipsis: true,
width: 150
},
{
title: this.$t('problemType'),
align: 'left',
dataIndex: 'problemType',
ellipsis: true,
width: 240,
scopedSlots: { customRender: 'problemType' }
}
],
processableList: [],
noProcessableList: [],
loading: false,
rules: {
flag: [
{
required: true,
message: this.$t('resultofhandling') + this.$t('cannotEmpty'),
trigger: 'change'
}
],
approvalOpinion: [
{
required: true,
message: this.$t('feedbackMessage') + this.$t('cannotEmpty'),
trigger: 'blur'
},
{
max: 300,
message: this.$t('feedbackMessage') + this.$t('cannotExceed') + 300 + this.$t('Characters'),
trigger: 'blur'
}
]
},
formInline: {},
uploadName: ''
}
},
methods: {
...mapGetters(['userInfo']),
confirmation(data, name) {
this.visible = true
this.processableList = []
this.noProcessableList = []
this.formInline = {}
data.forEach(res => {
res = JSON.parse(res)
if (name == this.$t('Taskresponsibilityrecognition')) {
//任务责任确认
if (res.taskDefinitionKey == 'zrrqr' || res.taskDefinitionKey == 'dezrrqr') {
this.processableList.push(res)
} else {
if (res.flowType == '2' || res.flowType == '4') {
res.problemType = this.$t('taskNodeMismatch')
} else {
res.problemType = this.$t('taskTypeMismatch')
}
this.noProcessableList.push(res)
}
} else if (name == this.$t('complianceConfirmation')) {
//符合性确认
if (res.taskDefinitionKey == 'zrrtjjfw' || res.taskDefinitionKey == 'dezrrtjjfw') {
this.processableList.push(res)
} else {
if (res.flowType == '2' || res.flowType == '4') {
res.problemType = this.$t('taskNodeMismatch')
} else {
res.problemType = this.$t('taskTypeMismatch')
}
this.noProcessableList.push(res)
}
}
})
this.$nextTick(() => {
this.titleName = name
this.$refs.ruleForm.clearValidate()
})
},
handleCancel() {
this.visible = false
},
determineClick() {
if (this.processableList && this.processableList.length > 0) {
this.$refs.ruleForm.validate(valid => {
if (valid) {
this.loading = true
let taskIds = []
this.processableList.forEach(res => {
taskIds.push(res.taskId)
})
let handlingTime = moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
let query = {
...this.formInline,
taskIds: taskIds.join(','),
userId: this.userInfo().id,
handlingTime: handlingTime
}
postAction('/workFlow/completeTaskBatch', query).then((res) => {
if (res.success) {
this.$message.success(this.$t('OperationSuccessful'))
this.visible = false
this.loading = false
this.$emit('confirmationdrawerList')
} else {
this.loading = false
this.$message.warning(this.$t('operationFailed'))
}
})
}
})
} else {
this.$message.warning(this.$t('thereAreCurrentlyNoRegulationsToHandle'))
}
},
clickButtonToUpload(item) {
this.$refs.uploadFile.perentHandleFunc()
this.$refs.uploadFile.visible = true
this.uploadName = item
getAction('sys/common/getFileInfos', { id: this.formInline[item] }).then((res) => {
if (res.success) {
this.$refs.uploadFile.perentHandleFunc(res.result)
} else {
this.$refs.uploadFile.perentHandleFunc()
}
})
},
/** 上传文件的回调 */
uploadSuccess(data) {
let attIdList = []
if (data && data.length > 0) {
data.map(item => {
attIdList.push(item.id || data.name)
})
}
/** 赋值给当前对应的表单文件 */
this.formInline[this.uploadName] = attIdList.join(',')
this.formInline = { ...this.formInline }
this.$nextTick(() => {
this.$refs.ruleForm.validateField([this.uploadName])
})
}
}
}
</script>
<style scoped>
.box {
margin-bottom: 20px;
}
.box-two {
margin-bottom: 438px;
}
.header-text {
font-size: 16px;
font-weight: bold;
height: 24px;
}
.table {
margin-top: 20px;
}
.drawer-review {
position: absolute;
bottom: 40px;
z-index: 1001;
height: 404px;
width: 100%;
padding: 24px;
border-top: 1px solid #e8e8e8;
left: 0;
background: #fff;
border-radius: 0 0 2px 2px;
}
.formAdd {
margin-top: 10px;
}
.box-title-text {
/*line-height: 1.4;*/
display: flex;
/*align-items: center;*/
}
.title-text {
/*width: 88px;*/
text-align: left;
display: inline-block;
font-weight: 500;
font-size: 14px;
margin-right: 16px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
height: 32px;
line-height: 36px;
color: #000F16;
}
.title-text-fq {
/*width: 130px;*/
text-align: left;
display: inline-block;
font-weight: 500;
font-size: 14px;
margin-right: 16px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
height: 42px;
line-height: 48px;
color: #000F16;
}
.box-input {
display: inline-block;
height: 38px;
width: 100%;
}
.itemModel {
width: 100%;
display: inline-block;
margin-top: 2px;
margin-bottom: 0px;
}
.Required {
color: red;
margin-right: 4px;
}
.title-text-text {
margin-top: 9px;
}
.drawer-bootom-button {
position: absolute;
bottom: 0;
z-index: 1002;
width: 100%;
border-top: 1px solid #e8e8e8;
padding: 10px 16px;
text-align: right;
left: 0;
background: #fff;
border-radius: 0 0 2px 2px;
}
.button-text {
height: 38px;
width: calc(50% - 100px);
line-height: 38px;
background: #fff;
border: 1px #00B3BE solid;
color: #00B3BE;
}
.problemTypeText {
color: red;
}
</style>