|
|
@@ -0,0 +1,549 @@
|
|
|
+<template>
|
|
|
+ <div class="tagging-confirm">
|
|
|
+ <div class="confirm-container">
|
|
|
+ <!-- 左侧用户信息输入 -->
|
|
|
+ <div class="left-section">
|
|
|
+ <h4 class="section-title">用户信息输入</h4>
|
|
|
+
|
|
|
+ <!-- 输入信息区域 -->
|
|
|
+ <el-form :model="formData" label-position="top" size="small">
|
|
|
+ <!-- 贷款申请编号 -->
|
|
|
+ <el-form-item label="贷款申请编号" prop="businessAttr">
|
|
|
+ <el-input v-model="formData.businessAttr" placeholder="请输入贷款申请编号" style="width: 100%;"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <!-- 合同编号 -->
|
|
|
+ <el-form-item label="合同编号" prop="contractNo">
|
|
|
+ <el-input v-model="formData.contractNo" placeholder="请输入合同编号" style="width: 100%;"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <!-- 用户ID -->
|
|
|
+ <el-form-item label="用户ID" prop="userId">
|
|
|
+ <el-input v-model="formData.userId" placeholder="请输入用户ID" />
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <!-- 用户姓名 -->
|
|
|
+ <el-form-item label="用户姓名" prop="userNm">
|
|
|
+ <el-input v-model="formData.userNm" placeholder="请输入用户姓名" style="width: 100%;"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <!-- 所属机构 -->
|
|
|
+ <el-form-item label="所属机构" prop="userOrg">
|
|
|
+ <el-input v-model="formData.userOrg" placeholder="请输入所属机构" style="width: 100%;"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <!-- 所属行社 -->
|
|
|
+ <el-form-item label="所属行社" prop="userEndpoint">
|
|
|
+ <el-input v-model="formData.userEndpoint" placeholder="请输入所属行社" style="width: 100%;"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <!-- 操作按钮 -->
|
|
|
+ <div class="input-actions">
|
|
|
+ <el-button @click="handleClear">清空</el-button>
|
|
|
+ <el-button type="primary" @click="handleConfirm">确认</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 右侧externalPage组件展示 -->
|
|
|
+ <div class="right-section">
|
|
|
+ <h4 class="section-title">打标确认</h4>
|
|
|
+ <div class="iframe-container" v-if="showTestComponent">
|
|
|
+ <ExternalPage
|
|
|
+ :show-type="'test'"
|
|
|
+ :test-data="formData"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="empty-iframe" v-else>
|
|
|
+ <img src="@/assets/images/noData.png" alt="暂无数据">
|
|
|
+ <p>请输入用户信息并点击确认按钮加载内容</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import ExternalPage from '@/views/aiTagging/externalPage/index.vue';
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'TaggingConfirm',
|
|
|
+ components: {
|
|
|
+ ExternalPage
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 表单数据
|
|
|
+ formData: {
|
|
|
+ // 贷款申请编号
|
|
|
+ businessAttr: '',
|
|
|
+ // 合同编号
|
|
|
+ contractNo: '',
|
|
|
+ // 用户信息
|
|
|
+ userId: yufp.session.userId || '',
|
|
|
+ userNm: yufp.session.userName || '',
|
|
|
+ userOrg: yufp.session.org ? yufp.session.org.name : '',
|
|
|
+ userEndpoint: ''
|
|
|
+ },
|
|
|
+ // 是否显示iframe
|
|
|
+ showIframe: false,
|
|
|
+ // iframe URL
|
|
|
+ iframeUrl: '',
|
|
|
+ // 是否显示测试组件
|
|
|
+ showTestComponent: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // 监听来自externalPage的消息（包括页面加载完成和确认消息）
|
|
|
+ this.setupExternalPageListener();
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ // 清理事件监听器
|
|
|
+ this.removeExternalPageListener();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 设置externalPage监听器
|
|
|
+ setupExternalPageListener() {
|
|
|
+ this.handleExternalPageMessage = (event) => {
|
|
|
+ const data = event.data;
|
|
|
+
|
|
|
+ // 检查是否为externalPage发送的页面加载完成消息
|
|
|
+ if (data && data.type === 'externalPageLoaded') {
|
|
|
+ // 如果已经输入了用户信息，自动发送数据
|
|
|
+ if (this.hasUserData()) {
|
|
|
+ this.sendDataToExternalPage();
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 检查是否为externalPage发送的确认消息
|
|
|
+ else if (data && data.type === 'externalParamsReceived') {
|
|
|
+ // 移除临时确认监听器，避免重复处理
|
|
|
+ if (window.confirmationListener) {
|
|
|
+ window.removeEventListener('message', window.confirmationListener);
|
|
|
+ window.confirmationListener = null;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ window.addEventListener('message', this.handleExternalPageMessage);
|
|
|
+ },
|
|
|
+
|
|
|
+ // 移除externalPage监听器
|
|
|
+ removeExternalPageListener() {
|
|
|
+ if (this.handleExternalPageMessage) {
|
|
|
+ window.removeEventListener('message', this.handleExternalPageMessage);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 检查是否已输入用户信息
|
|
|
+ hasUserData() {
|
|
|
+ return this.formData.businessAttr &&
|
|
|
+ this.formData.contractNo &&
|
|
|
+ this.formData.userId &&
|
|
|
+ this.formData.userNm;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 发送数据到externalPage
|
|
|
+ sendDataToExternalPage() {
|
|
|
+ if (!this.showIframe) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ const iframe = document.querySelector('iframe');
|
|
|
+ if (!iframe) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 监听iframe的load事件，确保页面完全加载完成
|
|
|
+ if (iframe.contentDocument && iframe.contentDocument.readyState === 'complete') {
|
|
|
+ // iframe已经加载完成，直接发送消息
|
|
|
+ this.sendMessageToIframe(iframe);
|
|
|
+ } else {
|
|
|
+ // iframe还在加载中，等待加载完成
|
|
|
+
|
|
|
+ // 设置加载状态监听
|
|
|
+ let isMessageSent = false;
|
|
|
+
|
|
|
+ iframe.onload = () => {
|
|
|
+ if (!isMessageSent) {
|
|
|
+ this.sendMessageToIframe(iframe);
|
|
|
+ isMessageSent = true;
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ // 设置渐进式超时机制，适应不同网络环境
|
|
|
+ const timeouts = [5000, 10000, 15000]; // 5秒、10秒、15秒
|
|
|
+
|
|
|
+ timeouts.forEach((timeout, index) => {
|
|
|
+ setTimeout(() => {
|
|
|
+ if (!isMessageSent) {
|
|
|
+ if (iframe.contentDocument && iframe.contentDocument.readyState === 'complete') {
|
|
|
+ this.sendMessageToIframe(iframe);
|
|
|
+ isMessageSent = true;
|
|
|
+ } else {
|
|
|
+ if (index === timeouts.length - 1) {
|
|
|
+ // 最后一次超时，强制尝试发送消息
|
|
|
+ this.sendMessageToIframe(iframe);
|
|
|
+ isMessageSent = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, timeout);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 确认按钮点击事件
|
|
|
+ handleConfirm() {
|
|
|
+ // 检查必填项
|
|
|
+ if (!this.formData.businessAttr) {
|
|
|
+ this.$message.warning('请输入贷款申请编号');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!this.formData.contractNo) {
|
|
|
+ this.$message.warning('请输入合同编号');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!this.formData.userId) {
|
|
|
+ this.$message.warning('请输入用户ID');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!this.formData.userNm) {
|
|
|
+ this.$message.warning('请输入用户姓名');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 显示测试组件
|
|
|
+ this.showTestComponent = true;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 模拟iframe访问发起逻辑
|
|
|
+ simulateIframeAccess() {
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ // 实际发送消息到iframe
|
|
|
+ sendMessageToIframe(iframe) {
|
|
|
+ if (!iframe.contentWindow) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ const messageData = {
|
|
|
+ type: 'externalParams',
|
|
|
+ business_attr: this.formData.businessAttr,
|
|
|
+ user_id: this.formData.userId,
|
|
|
+ user_nm: this.formData.userNm,
|
|
|
+ user_org: this.formData.userOrg,
|
|
|
+ user_endpoint: this.formData.userEndpoint,
|
|
|
+ contract_no: this.formData.contractNo,
|
|
|
+ timestamp: Date.now(),
|
|
|
+ source: 'taggingConfirm'
|
|
|
+ };
|
|
|
+
|
|
|
+ try {
|
|
|
+ // 发送postMessage到iframe
|
|
|
+ iframe.contentWindow.postMessage(messageData, '*');
|
|
|
+
|
|
|
+ // 监听来自iframe的确认消息
|
|
|
+ this.setupMessageConfirmation();
|
|
|
+ } catch (error) {
|
|
|
+ console.error('发送postMessage失败:', error);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 设置消息确认机制
|
|
|
+ setupMessageConfirmation() {
|
|
|
+ // 监听来自iframe的确认消息
|
|
|
+ const handleConfirmation = (event) => {
|
|
|
+ if (event.data && event.data.type === 'externalParamsReceived') {
|
|
|
+ // 移除事件监听器
|
|
|
+ window.removeEventListener('message', handleConfirmation);
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ window.addEventListener('message', handleConfirmation);
|
|
|
+
|
|
|
+ // 设置渐进式超时机制，适应网络延迟
|
|
|
+ const confirmationTimeouts = [10000, 20000, 30000]; // 10秒、20秒、30秒
|
|
|
+
|
|
|
+ confirmationTimeouts.forEach((timeout, index) => {
|
|
|
+ setTimeout(() => {
|
|
|
+ if (window.confirmationListener === handleConfirmation) {
|
|
|
+ if (index === confirmationTimeouts.length - 1) {
|
|
|
+ // 最终超时
|
|
|
+ window.removeEventListener('message', handleConfirmation);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, timeout);
|
|
|
+ });
|
|
|
+
|
|
|
+ // 保存监听器引用，便于后续清理
|
|
|
+ window.confirmationListener = handleConfirmation;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 清空按钮点击事件
|
|
|
+ handleClear() {
|
|
|
+ // 清空所有输入
|
|
|
+ this.formData.businessAttr = '';
|
|
|
+ this.formData.userId = '';
|
|
|
+ this.formData.userNm = '';
|
|
|
+ this.formData.userOrg = '';
|
|
|
+ this.formData.userEndpoint = '';
|
|
|
+ // 隐藏iframe
|
|
|
+ this.showIframe = false;
|
|
|
+ this.iframeUrl = '';
|
|
|
+
|
|
|
+ this.$message.info('已清空输入内容');
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.tagging-confirm {
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.confirm-container {
|
|
|
+ display: flex;
|
|
|
+ gap: 20px;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+/* 左侧用户信息输入区域 */
|
|
|
+.left-section {
|
|
|
+ flex: 0 0 200px;
|
|
|
+ background-color: #fafafa;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 12px;
|
|
|
+ min-width: 190px;
|
|
|
+ max-width: 200px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 右侧iframe展示区域 */
|
|
|
+.right-section {
|
|
|
+ flex: 2;
|
|
|
+ background-color: #fafafa;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 20px;
|
|
|
+ height: 500px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ min-height: 0; /* 重要：允许内容区域收缩 */
|
|
|
+}
|
|
|
+
|
|
|
+.section-title {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #303133;
|
|
|
+ margin: 0 0 16px 0;
|
|
|
+ text-align: left;
|
|
|
+ flex-shrink: 0; /* 标题不收缩 */
|
|
|
+}
|
|
|
+
|
|
|
+/* iframe容器样式 */
|
|
|
+.iframe-container {
|
|
|
+ flex: 1;
|
|
|
+ min-height: 0;
|
|
|
+ overflow: auto;
|
|
|
+ border: 1px solid #e4e7ed;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: #fff;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ max-height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.iframe-container iframe {
|
|
|
+ flex: 1;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border: none;
|
|
|
+ background-color: #fff;
|
|
|
+ overflow: auto;
|
|
|
+}
|
|
|
+
|
|
|
+/* 状态面板样式 */
|
|
|
+.status-panel {
|
|
|
+ background-color: #f8fafc;
|
|
|
+ border: 1px solid #e2e8f0;
|
|
|
+ border-radius: 6px;
|
|
|
+ padding: 12px 16px;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ font-size: 13px;
|
|
|
+}
|
|
|
+
|
|
|
+.status-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.status-item:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.status-label {
|
|
|
+ font-weight: 600;
|
|
|
+ color: #4a5568;
|
|
|
+ min-width: 100px;
|
|
|
+ margin-right: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.status-value {
|
|
|
+ color: #2d3748;
|
|
|
+ font-family: 'Courier New', monospace;
|
|
|
+ background-color: #edf2f7;
|
|
|
+ padding: 2px 6px;
|
|
|
+ border-radius: 3px;
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.missing-tag {
|
|
|
+ margin-right: 4px;
|
|
|
+ margin-bottom: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 空iframe状态样式 */
|
|
|
+.empty-iframe {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background-color: #f8f9fa;
|
|
|
+ border: 1px dashed #dcdfe6;
|
|
|
+ border-radius: 4px;
|
|
|
+ color: #909399;
|
|
|
+}
|
|
|
+
|
|
|
+.empty-iframe img {
|
|
|
+ width: 80px;
|
|
|
+ height: 80px;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ opacity: 0.6;
|
|
|
+}
|
|
|
+
|
|
|
+.empty-iframe p {
|
|
|
+ font-size: 14px;
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+
|
|
|
+/* 输入信息区域 */
|
|
|
+/* 调整el-form样式 */
|
|
|
+.el-form {
|
|
|
+ margin-bottom: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.el-form-item {
|
|
|
+ margin-bottom: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.el-form-item__label {
|
|
|
+ font-size: 13px;
|
|
|
+ color: #606266;
|
|
|
+ padding-bottom: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 输入操作按钮 */
|
|
|
+.input-actions {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ gap: 8px;
|
|
|
+ margin-top: 16px;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+/* 调整按钮大小 */
|
|
|
+.input-actions .el-button {
|
|
|
+ padding: 6px 12px;
|
|
|
+ font-size: 12px;
|
|
|
+ flex: 1;
|
|
|
+}
|
|
|
+
|
|
|
+/* 确认按钮样式 */
|
|
|
+.input-actions .el-button--primary {
|
|
|
+ flex: 1.5;
|
|
|
+}
|
|
|
+
|
|
|
+/* iframe容器 */
|
|
|
+.iframe-container {
|
|
|
+ flex: 1;
|
|
|
+ border: 1px solid #e8e8e8;
|
|
|
+ border-radius: 4px;
|
|
|
+ overflow: hidden;
|
|
|
+ background-color: #ffffff;
|
|
|
+}
|
|
|
+
|
|
|
+/* 空iframe提示 */
|
|
|
+.empty-iframe {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 60px 20px;
|
|
|
+ color: #909399;
|
|
|
+ background-color: #fafafa;
|
|
|
+ min-height: 400px;
|
|
|
+}
|
|
|
+
|
|
|
+.empty-iframe img {
|
|
|
+ width: 120px;
|
|
|
+ height: 120px;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ opacity: 0.6;
|
|
|
+}
|
|
|
+
|
|
|
+.empty-iframe p {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #909399;
|
|
|
+ margin: 0;
|
|
|
+ line-height: 1.5;
|
|
|
+}
|
|
|
+
|
|
|
+/* 响应式设计 */
|
|
|
+@media (max-width: 768px) {
|
|
|
+ .confirm-container {
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+
|
|
|
+ .left-section {
|
|
|
+ max-width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-section {
|
|
|
+ min-height: 400px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-row {
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-item {
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: flex-start;
|
|
|
+ min-width: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-label {
|
|
|
+ text-align: left;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-item .el-input {
|
|
|
+ width: 100% !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .input-actions {
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+
|
|
|
+ .input-actions .el-button {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
jiayongqiang