<template>
<div class="app-container">
<el-card>
<el-form :model="handlerParams" ref="queryForms" size="small" :inline="true" label-width="180px" class="card">
<el-row>
<el-form-item :label="$t('客户名称')+':'">
<span style="margin-left: 8px;">{{handlerParams.customerName}}</span>
</el-form-item>
</el-row>
<el-row >
<el-form-item :label="$t('原计划掉入公海池时间')+':'">
<span style="margin-left: 8px;">{{handlerParams.orgEstimateEnterOpenSeaTime}}</span>
</el-form-item>
</el-row>
<el-row>
<el-form-item :label="$t('申请延期后掉入时间')+':'">
<el-date-picker
v-model="handlerParams.estimateEnterOpenSeaTime"
type="date"
:picker-options="pickerOptions"
value-format="timestamp"
:placeholder="$t('请输入申请延期后掉入时间')">
</el-date-picker>
</el-form-item>
</el-row>
<el-row :span="8">
<el-form-item :label="$t('凭证')+':'" size="medium" :require="true">
<upload v-model="handlerParams.voucher" :limit="1"></upload>
</el-form-item>
</el-row>
<el-row :span="8">
<el-form-item :label="$t('申请理由')+':'" size="medium">
<el-input style="width: 500px;" type="textarea" v-model="handlerParams.reason" />
</el-form-item>
</el-row>
</el-form>
</el-card>
<!-- 只有不需要预付才需要审核 -->
<template>
<div class="page-title">{{$t('审批流程')}}</div>
<work-flow xmlkey="quotation_customer_delay_public" v-model="ccIdArr" />
</template>
<div slot="footer" class="dialog-footer">
<!-- bpmStatus
异常流程状态，1处理中2通过3不通过4已取消
待审核可能没有bpmStatus字段
-->
<template v-if="handlerParams.status == 1">
<el-button type="primary" @click="$router.push(`/bpm/process-instance/detail?id=`+handlerParams.formId)">{{$t('审核中')}}</el-button>
<el-button plain type="primary" @click="cancelAudit">{{$t('取消审核')}}</el-button>
<el-button plain type="primary" @click="$store.dispatch('tagsView/delCurrentView')">{{$t('返回')}}</el-button>
</template>
<template v-else>
<el-button type="primary" @click="submitForm">{{$t('提交')}}</el-button>
<el-button plain type="primary" @click="$store.dispatch('tagsView/delCurrentView')">{{$t('取消')}}</el-button>
</template>
</div>
</div>
</template>
<script>
import upload from '@/components/ImageUpload'
import {getDictData, getDictDatas} from '@/utils/dict'
import {getCustomer,getDelayInfo,creatDelayApproval,cancelDelayApproval} from '@/api/ecw/customer'
import WorkFlow from '@/components/WorkFlow'
import {cancelProcessInstance} from '@/api/bpm/processInstance'
export default {
name: "Delay",
components: {
upload, WorkFlow
},
data() {
return {
// 遮罩层
loading: false,
handlerParams:{
},
customerData:{},
showWorkFlow: false, // 是否显示工作流
dateRangeCreateTime:[],
pickerOptions: {
},
ccIdArr:[]
};
},
watch:{
ccIdArr(){
this.$set(this.handlerParams, 'ccIds', this.ccIdArr.join(','))
}
},
created() {
if(this.$route.query.id){
this.getData(this.$route.query.id)
}
},
methods: {
getData(id){
getCustomer(id).then(response => {
this.customerData = response.data
this.getDely(id)
});
},
getDely(id){
console.log(this.customerData)
let that = this
getDelayInfo({customerId:id}).then(res=>{
if(res.data){
that.handlerParams = res.data
if(!that.handlerParams.orgEstimateEnterOpenSeaTime){
that.handlerParams.orgEstimateEnterOpenSeaTime = that.getNowDate(that.customerData.enterOpenSeaTime)
}
if(that.handlerParams.estimateEnterOpenSeaTime){
that.handlerParams.estimateEnterOpenSeaTime = that.getTime(that.handlerParams.estimateEnterOpenSeaTime)
}else{
that.$set(that.handlerParams,'estimateEnterOpenSeaTime',that.customerData.estimateEnterOpenSeaTime)
}
if(that.handlerParams.ccIds){
var ids = that.handlerParams.ccIds.split(',')
ids.map(v=>{
that.ccIdArr.push(parseInt(v))
})
}
console.log(that.ccIdArr)
}else{
that.handlerParams = {
customerId:that.customerData.id,
customerName:that.customerData.name,
orgEstimateEnterOpenSeaTime: that.getNowDate(that.customerData.enterOpenSeaTime)
}
}
that.pickerOptions = {
disabledDate: (time) => {
var date = new Date(that.handlerParams.orgEstimateEnterOpenSeaTime);
return (
time.getTime() < date.getTime()
);
},
}
})
},
submitForm(){
// if(!this.handlerParams.orderExceptionHandlerResult){
// this.$modal.msgError(this.$t('请选择处理结果'));
// return
// }
// if(!this.handlerParams.fileList||this.handlerParams.fileList.length==0){
// this.$modal.msgError(this.$t('请上传报关资料'));
// return
// }
this.$set(this.handlerParams,'createTime',this.formatDate())
var params = Object.assign({},this.handlerParams)
// var ccIds = Array.isArray(this.handlerParams.ccIds) ? this.handlerParams.ccIds.join(',') : this.handlerParams.ccIds
// params.ccIds = ccIds
params.voucher = Array.isArray(this.handlerParams.voucher) ? this.handlerParams.voucher.join(',') : this.handlerParams.voucher
params.estimateEnterOpenSeaTime = this.getNowDate(this.handlerParams.estimateEnterOpenSeaTime)
creatDelayApproval(params).then(res=>{
this.$modal.msgSuccess(this.$t('提交成功'));
this.$store.dispatch('tagsView/delCurrentView')
})
},
getTime(dateTime){
var date = new Date(dateTime);
return date.getTime()
},
getNowDate(time) {
if(time){
var date = new Date(time);
}else{
var date = new Date();
}
var year = date.getFullYear() // 年
var month = date.getMonth() + 1; // 月
var day = date.getDate(); // 日
// 给一位数的数据前面加 “0”
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (day >= 0 && day <= 9) {
day = "0" + day;
}
return year + "-" + month + "-" + day
},
formatDate() {
var date = new Date()
var year = date.getFullYear()
var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
},
// 取消审核
cancelAudit(){
this.$prompt("请输入取消原因", {
inputPattern: /[\S]+/,
inputErrorMessage: this.$t('不能为空')
}).then(({value}) => {
console.log(this.handlerParams.approvalId)
return cancelDelayApproval({approveId:this.handlerParams.approvalId,reason:value})
})
.then(res => {
this.$store.dispatch('tagsView/delCurrentView')
})
}
}
};
</script>
<style scoped>
.card-title{
font-size: 18px;
font-weight: bold;
margin-top: 10px;
}
.header{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.card{
margin-top: 20px;
}
.dialog-footer{
padding: 40px;
width: 60%;
align-items: center;
display: flex;
/* justify-content: space-between; */
}
</style>