调试mk
This commit is contained in:
@@ -0,0 +1,271 @@
|
||||
<template>
|
||||
<div ref="page" class="mk-public-biz-view">
|
||||
<basic-container>
|
||||
<div class="mk-public-biz-view__title">{{ pageTitle }}</div>
|
||||
<el-descriptions v-if="detail" :column="2" border>
|
||||
<el-descriptions-item
|
||||
v-for="item in visibleFields"
|
||||
:key="item.prop"
|
||||
:label="item.label"
|
||||
:span="item.span || 1"
|
||||
>
|
||||
{{ displayValue(detail[item.prop]) }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<el-empty v-else description="暂无数据" />
|
||||
</basic-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getMkPublicDetail, postMkPublicProcessMessage } from '@/api/mk-process';
|
||||
|
||||
const FIELD_MAP = {
|
||||
'project-apply': [
|
||||
{ label: '申请单号', prop: 'applyNo' },
|
||||
{ label: '项目编号', prop: 'projectCode' },
|
||||
{ label: '项目名称', prop: 'projectName', span: 2 },
|
||||
{ label: '审核状态', prop: 'approvalStatusName' },
|
||||
{ label: '当前节点', prop: 'currentNode' },
|
||||
{ label: '当前处理人', prop: 'currentProcessor' },
|
||||
{ label: '所属组织', prop: 'deptName' },
|
||||
{ label: '备注', prop: 'remark', span: 2 },
|
||||
],
|
||||
'contract-manage': [
|
||||
{ label: '合同编号', prop: 'contractNo' },
|
||||
{ label: '合同名称', prop: 'contractName', span: 2 },
|
||||
{ label: '合同类别', prop: 'contractCategory' },
|
||||
{ label: '审核状态', prop: 'approvalStatusName' },
|
||||
{ label: '当前节点', prop: 'currentNode' },
|
||||
{ label: '当前处理人', prop: 'currentProcessor' },
|
||||
{ label: '甲方', prop: 'partyA' },
|
||||
{ label: '乙方', prop: 'partyB' },
|
||||
{ label: '项目名称', prop: 'projectName', span: 2 },
|
||||
],
|
||||
'waybill-manage': [
|
||||
{ label: '运单号', prop: 'waybillNo' },
|
||||
{ label: '项目', prop: 'projectName' },
|
||||
{ label: '客户合同', prop: 'contractName' },
|
||||
{ label: '客户名称', prop: 'customerName' },
|
||||
{ label: '货物名称', prop: 'cargoName' },
|
||||
{ label: '承运商', prop: 'carrierName' },
|
||||
{ label: '当前过程节点', prop: 'currentProcessNode' },
|
||||
{ label: '发货地', prop: 'departureName' },
|
||||
{ label: '收货地', prop: 'arrivalName' },
|
||||
],
|
||||
'pre-settlement': [
|
||||
{ label: '预结算单号', prop: 'preSettlementNo' },
|
||||
{ label: '合同名称', prop: 'contractName' },
|
||||
{ label: '项目名称', prop: 'projectName' },
|
||||
{ label: '结算金额', prop: 'settlementAmount' },
|
||||
{ label: '审核状态', prop: 'approvalStatusName' },
|
||||
{ label: '当前节点', prop: 'currentNode' },
|
||||
{ label: '当前处理人', prop: 'currentProcessor' },
|
||||
{ label: '备注', prop: 'remark', span: 2 },
|
||||
],
|
||||
'formal-settlement': [
|
||||
{ label: '正式结算单号', prop: 'formalSettlementNo' },
|
||||
{ label: '预结算单号', prop: 'preSettlementNos' },
|
||||
{ label: '项目名称', prop: 'projectName' },
|
||||
{ label: '合同名称', prop: 'contractName' },
|
||||
{ label: '结算金额', prop: 'settlementAmount' },
|
||||
{ label: '审核状态', prop: 'approvalStatusName' },
|
||||
{ label: '当前节点', prop: 'currentNode' },
|
||||
{ label: '当前处理人', prop: 'currentProcessor' },
|
||||
],
|
||||
'payment-application': [
|
||||
{ label: '付款申请号', prop: 'paymentNo' },
|
||||
{ label: '付款类型', prop: 'paymentTypeName' },
|
||||
{ label: '收款方', prop: 'payeeName' },
|
||||
{ label: '项目名称', prop: 'projectName' },
|
||||
{ label: '申请金额', prop: 'applyAmount' },
|
||||
{ label: '审核状态', prop: 'approvalStatusName' },
|
||||
{ label: '当前节点', prop: 'currentNode' },
|
||||
{ label: '当前处理人', prop: 'currentProcessor' },
|
||||
],
|
||||
};
|
||||
|
||||
const TITLE_MAP = {
|
||||
'project-apply': '查看项目信息',
|
||||
'contract-manage': '查看合同信息',
|
||||
'waybill-manage': '查看运单信息',
|
||||
'pre-settlement': '查看预结算信息',
|
||||
'formal-settlement': '查看正式结算信息',
|
||||
'payment-application': '查看付款申请信息',
|
||||
};
|
||||
|
||||
export default {
|
||||
name: 'MkPublicBizView',
|
||||
data() {
|
||||
return {
|
||||
detail: null,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
bizType() {
|
||||
return this.$route.meta.bizType || this.$route.query.bizType || '';
|
||||
},
|
||||
pageTitle() {
|
||||
return TITLE_MAP[this.bizType] || '查看详情';
|
||||
},
|
||||
visibleFields() {
|
||||
return FIELD_MAP[this.bizType] || [];
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.handleIframeHeight = () => this.sendIframeHeight();
|
||||
this.handleProcessMessage = event => this.onProcessMessage(event);
|
||||
document.addEventListener('DOMContentLoaded', this.handleIframeHeight, false);
|
||||
window.addEventListener('message', this.handleProcessMessage);
|
||||
},
|
||||
mounted() {
|
||||
document.documentElement.classList.add('mk-iframe-page');
|
||||
document.body.classList.add('mk-iframe-page');
|
||||
const app = document.getElementById('app');
|
||||
if (app) app.classList.add('mk-iframe-page');
|
||||
this.loadDetail();
|
||||
this.handleIframeHeight();
|
||||
window.addEventListener('load', this.handleIframeHeight);
|
||||
this.mkHeightTimers = [300, 800, 1600].map(delay => setTimeout(this.handleIframeHeight, delay));
|
||||
if (typeof ResizeObserver === 'undefined') return;
|
||||
this.mkHeightObserver = new ResizeObserver(() => this.handleIframeHeight());
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.page) this.mkHeightObserver.observe(this.$refs.page);
|
||||
this.mkHeightObserver.observe(document.body);
|
||||
});
|
||||
},
|
||||
beforeUnmount() {
|
||||
document.removeEventListener('DOMContentLoaded', this.handleIframeHeight, false);
|
||||
window.removeEventListener('load', this.handleIframeHeight);
|
||||
window.removeEventListener('message', this.handleProcessMessage);
|
||||
(this.mkHeightTimers || []).forEach(timer => clearTimeout(timer));
|
||||
if (this.mkHeightObserver) {
|
||||
this.mkHeightObserver.disconnect();
|
||||
this.mkHeightObserver = null;
|
||||
}
|
||||
document.documentElement.classList.remove('mk-iframe-page');
|
||||
document.body.classList.remove('mk-iframe-page');
|
||||
const app = document.getElementById('app');
|
||||
if (app) app.classList.remove('mk-iframe-page');
|
||||
},
|
||||
methods: {
|
||||
loadDetail() {
|
||||
const id = this.getFormId();
|
||||
if (!id || !this.bizType) return;
|
||||
getMkPublicDetail(this.bizType, id).then(res => {
|
||||
this.detail = res.data?.data || null;
|
||||
this.handleIframeHeight();
|
||||
});
|
||||
},
|
||||
sendIframeHeight() {
|
||||
this.$nextTick(() => {
|
||||
window.parent.postMessage({ height: document.body.clientHeight }, '*');
|
||||
});
|
||||
},
|
||||
onProcessMessage(event) {
|
||||
const data = event && event.data;
|
||||
if (!data || typeof data !== 'object') return;
|
||||
if (data.height && !data.status && !data.type) return;
|
||||
if (data.type === 'formValues' || data.type === 'afterSubmit') return;
|
||||
const formValues = data.formValues;
|
||||
if (data.status === 'submit') {
|
||||
this.submitData(formValues);
|
||||
} else if (data.status === 'save') {
|
||||
this.saveData(formValues);
|
||||
}
|
||||
if (data.type === 'getFormValues') {
|
||||
window.parent.postMessage({ type: 'formValues', formData: this.buildFormData() }, '*');
|
||||
}
|
||||
},
|
||||
submitData(lbpmFormValues) {
|
||||
const formData = this.buildFormData();
|
||||
this.postFormData('submit', lbpmFormValues, formData);
|
||||
if (!lbpmFormValues) return;
|
||||
const parameters = Object.assign({}, lbpmFormValues, {
|
||||
loginName: this.getLoginName(lbpmFormValues),
|
||||
formInstanceId: this.getFormId(),
|
||||
subject: formData.subject,
|
||||
});
|
||||
window.parent.postMessage({ type: 'afterSubmit', success: true, parameters }, '*');
|
||||
},
|
||||
saveData(lbpmFormValues) {
|
||||
this.postFormData('save', lbpmFormValues, this.buildFormData());
|
||||
},
|
||||
postFormData(status, formValues, formData) {
|
||||
const payload = { status, formValues: formValues || {}, formData };
|
||||
postMkPublicProcessMessage(this.bizType, payload).catch(error => {
|
||||
console.error('公开页提交流程数据失败：', error);
|
||||
});
|
||||
},
|
||||
buildFormData() {
|
||||
const detail = this.detail || {};
|
||||
return {
|
||||
...detail,
|
||||
id: this.getFormId() || detail.id,
|
||||
subject: this.pageTitle,
|
||||
formInstanceId: this.getFormId(),
|
||||
};
|
||||
},
|
||||
getFormId() {
|
||||
return this.$route.query.id || this.detail?.id || '';
|
||||
},
|
||||
getLoginName(formValues = {}) {
|
||||
return (
|
||||
formValues.loginName ||
|
||||
this.$route.query.loginName ||
|
||||
this.$route.query.submitIdentity ||
|
||||
''
|
||||
);
|
||||
},
|
||||
displayValue(value) {
|
||||
if (value === null || value === undefined || value === '') return '-';
|
||||
if (Array.isArray(value)) return value.join('、') || '-';
|
||||
if (typeof value === 'object') return JSON.stringify(value);
|
||||
return value;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
html.mk-iframe-page,
|
||||
html.mk-iframe-page body,
|
||||
html.mk-iframe-page #app,
|
||||
html.mk-iframe-page #app.mk-iframe-page {
|
||||
height: auto !important;
|
||||
min-height: 100%;
|
||||
overflow: visible;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mk-public-biz-view {
|
||||
min-height: 100%;
|
||||
padding: 12px 0 24px;
|
||||
box-sizing: border-box;
|
||||
background: #f0f2f5;
|
||||
|
||||
:deep(.basic-container) {
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
&__title {
|
||||
position: relative;
|
||||
padding-left: 12px;
|
||||
margin: 8px 0 16px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 22px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 2px;
|
||||
width: 4px;
|
||||
height: 18px;
|
||||
background: #409eff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user