get-container=“body“ 解决 vant Popup 弹出层 选项框随页面滚动分离问题

最新推荐文章于 2024-04-25 15:53:37 发布
原创 最新推荐文章于 2024-04-25 15:53:37 发布 · 1w 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#web app #vue.js #前端

本文介绍如何使用get-container=body属性解决van-popup组件在页面滚动时出现的分离问题，通过设置此属性，使弹出层高度固定，避免随页面滚动而错位。

前言：
上篇文章写到了 vant Popup 弹出层 + Picker 选择器 实现选择列表，van-popup 里面加了一个get-container="body"属性，页面有两个van-popup，页面就会出现弹出层 选项框随页面滚动分离，get-container="body"属性就解决了这个问题

没加属性之前的效果：
在这里插入图片描述
第一个van-popup

在这里插入图片描述
第二个van-popup

在这里插入图片描述
加上属性之前的效果：
在这里插入图片描述
第一个van-popup
在这里插入图片描述
第二个van-popup

在这里插入图片描述

当设置了get-container="body"属性之后，van-popup的高度就会根据当前页面窗口的高度固定，从而解决页面滚动分离问题
Popup 弹出层 + Picker 选择器 实现选择列表请看下篇文章，链接: https://blog.youkuaiyun.com/pxhing/article/details/105793133.

VantUI Tab标签页 里使用 DropdownMenu下拉菜单的 bug
ZionHH的博客
03-09 1万+
日常踩坑笔记 如果你的van-tabs有animated属性，并且里面有使用van-dropdown-menu下拉菜单组件，你会发现，我的下拉菜单去哪了？ <!-- 下面这种 --> <van-tabs v-model="active" animated> <van-tab title="标签 1"> <van-dropdown-menu&gt...
getContainer
sss12554的专栏
05-11 3019
public static WTContainer getContainer(String containerName) {         int[] index = { 0 };         try {             QuerySpec qs = new QuerySpec(WTContainer.class);             SearchCondition s...
ant design vue 的getPopupContainer
呆呆狗
10-28 5261
的样式，做修改，如果 style 标签上开启了 scoped，肯定不会生效。在 ant design vue 中，有几个组件是有。默认是渲染到body 上的，所以如果你想要对。属性的，比如：下拉菜单。
vant van-dropdown-item 鼠标滚动背景也滚动bug修复\get-container无效
weixin_45271385的博客
11-18 1930
项目中遇到下拉会随背景滚动的问题 然后使用get-container绑定父元素没有用 因为看样式他的position依旧为fixed,最大号的就是绑定#app/body了 <van-dropdown-menu > <van-dropdown-item get-container="#app" v-model="repairService" :options="option1"
vue引用vant组件库，一个页面同时绑定多个popup弹框
yaya07755的专栏
12-29 3871
<div class="item mt30"> <div class="name">配送方式</div> <div class="right"> <strong>邮寄</strong> <van-icon name="ellipsis" @click="showPopup"/>...
【前端疑难杂症bug——vant-popup避坑】
爪爪爪爪哇的博客
01-19 1790
当在vant-popup中再嵌套一个popup。子popup的高度会受限于父popup。会导致子的元素出现遮挡，即个别元素无法正常展示。
ios键盘出来的时候会把页面往上顶，导致van-popup弹出被挡一部分
11-11
首先，用户的问题是：查找解决iOS系统中键盘弹出时将页面上顶，导致van-popup弹出框被遮挡一部分问题的方法。"van-popup"听起来像是Vant UI库中的弹出组件。 用户引用了站内引用[1]，其中提到了一个解决方案：使用@...
<template> <div class="sec-container"> <van-popup v-model:show="showFeedbackModal" :style="{ width: '100%', height: '100%', overflow: 'auto' }" position="right" round closeable @close="handleFeedbackClose" > <!-- 炉批号--> <van-popup v-model:show="heatModal" :style="{ width: '100%', height: '100%', overflow: 'auto' }" position="right" round closeable :lock-scroll="true" @close="handleHeatClose" > <van-field v-model="heatData.heatNo" clearable @click="handleHeatNo" label="炉号" is-link readonly /> <van-field v-model="heatData.batchNo" clearable @click="handleBatchNo" label="批号" is-link readonly /> <div class="search-btn"> <van-button type="primary" @click="commitHeat" style="margin-left: 5px">提交 </van-button> </div> </van-popup> <!-- 异常--> <van-popup v-model:show="exceptionModal" :style="{ width: '100%', height: '100%', overflow: 'auto' }" position="right" round closeable @close="handleExceptionModalClose" > <van-field v-model="exceptionParam.exceptionType" clearable @click="handleExceptionType" label="异常类型" is-link readonly /> <van-field v-model="exceptionParam.exceptionMsg" rows="3" autosize label="异常描述" type="textarea" maxlength="500" placeholder="请输入异常描述" show-word-limit /> <div class="search-btn"> <van-button type="primary" @click="commitException">提交 </van-button> </div> </van-popup> <!-- 异常类型选择--> <van-popup v-model:show="showPicker" round position="bottom"> <van-picker :columns="exceptionTypeList" @cancel="showPicker = false" @confirm="onExceptionTypeConfirm" /> </van-popup> <!-- 炉号选择--> <van-popup v-model:show="showHeatNoPicker" round position="bottom"> <van-picker :columns="heatNoList" @cancel="showHeatNoPicker = false" @confirm="onHeatNoConfirm" /> </van-popup> <!-- 批号选择--> <van-popup v-model:show="showBatchNoPicker" round position="bottom"> <van-picker :columns="batchNoList" @cancel="showBatchNoPicker = false" @confirm="onBatchNoConfirm" /> </van-popup> <!-- root选择--> <van-popup v-model:show="showRootPicker" round position="bottom"> <van-picker :columns="rootBatchNoList" @cancel="showRootPicker = false" @confirm="onRootConfirm" /> </van-popup> <!-- fill选择--> <van-popup v-model:show="showFillPicker" round position="bottom"> <van-picker :columns="fillBatchNoList" @cancel="showFillPicker = false" @confirm="onFillConfirm" /> </van-popup> <!-- wps选择--> <van-popup v-model:show="showWpsModal" :style="{ width: '100%', height: '100%', overflow: 'auto' }" position="right" round closeable @close="handleWpsClose" > <a-table sticky style="width: 98%" :scroll="{ x: '100%' }" :columns="wpsColumns" :dataSource="addWpsData" bordered size="middle" :loading="loading" :pagination="false" rowKey="id" > <template #bodyCell="{ column, record }"> <template v-if="column.key === 'action'"> <a-button type="link" @click="addWps(record)" v-resource="[ { url: '/service-piping/cp/pipe/pre/work/order/detail', method: 'GET' } ]" >添加</a-button > </template> </template> </a-table> </van-popup> <!-- 焊缝批号选择--> <van-popup v-model:show="showWeldHeatModal" :style="{ width: '100%', height: '100%', overflow: 'auto' }" position="right" round closeable @close="handleWeldHeatClose" > <van-field v-model="weldHeatData.rootBatchNo" clearable @click="handleRoot" label="root" is-link readonly /> <van-field v-model="weldHeatData.fillBatchNo" clearable @click="handleFill" label="fill" is-link readonly /> <div class="search-btn"> <van-button type="primary" @click="commitWeldHeat">提交 </van-button> </div> </van-popup> <!-- 新增小票明细--> <van-popup v-model:show="showCutFeedbackAddModal" :style="{ width: '100%', height: '100%', overflow: 'auto' }" position="right" round closeable @close="handleCutFeedbackAddClose" > <a-table sticky v-if="feedbackType === '下料' || feedbackType === '装配'" style="width: 98%" :scroll="{ x: '100%' }" :columns="cutColumns" :dataSource="addCutData" bordered size="middle" :loading="loading" :pagination="false" rowKey="id" > <template #bodyCell="{ column, record }"> <template v-if="column.key === 'action'"> <a-button type="link" @click="addData(record)" :disabled="record.canFeedback==false" v-resource="[ { url: '/service-piping/cp/pipe/pre/work/order/detail', method: 'GET' } ]" >添加</a-button > </template> </template> </a-table> <a-table sticky v-if="feedbackType === '焊接'" style="width: 98%" :scroll="{ x: '100%' }" :columns="weldColumns" :dataSource="addWeldData" bordered size="middle" :loading="loading" :pagination="false" rowKey="id" > <template #bodyCell="{ column, record }"> <template v-if="column.key === 'action'"> <a-button type="link" @click="addData(record)" :disabled="record.canFeedback==false" v-resource="[ { url: '/service-piping/cp/pipe/pre/work/order/detail', method: 'GET' } ]" >添加</a-button > </template> </template> </a-table> </van-popup> <van-cell-group :title=" feedbackType === '下料' ? '管路下料反馈' : feedbackType === '装配' ? '管路装配反馈' : '管路焊接反馈' " > <van-field v-model="feedbackParam.workDate" is-link readonly clearable label="反馈日期" placeholder="请选择反馈日期" @click="showDatePicker = true" /> <van-field v-model="feedbackParam.remark" rows="3" autosize label="备注" type="textarea" maxlength="500" placeholder="请输入备注" show-word-limit /> <van-field v-model="feedbackParam.helperName" autosize label="协助人名" readonly v-if="feedbackType === '焊接'" /> <van-field v-model="feedbackParam.helperNo" label="协助人IC号" @input="inputHelperNo" placeholder="请输入协助人IC号" v-if="feedbackType === '焊接'" /> <div class="search-btn"> <van-button type="primary" @click="addFeedbackDetail" style="margin-left:5px;margin-right: 10px">添加物量</van-button> <van-button type="primary" @click="commitFeedbackDetail">提交</van-button> <a-table sticky v-if="feedbackType === '下料'" :scroll="{ x: '100%' }" style="width: 98%" :columns="cutColumns" :dataSource="cutData" bordered size="middle" :loading="loading" :pagination="false" rowKey="id" > <template #bodyCell="{ column, record }"> <template v-if="column.key === 'action'"> <a-button type="link" @click="delCutData(record)" v-resource="[ { url: '/service-piping/cp/pipe/pre/work/order/detail', method: 'GET' } ]" >删除</a-button > <a-button type="link" @click="saveException(record)" v-resource="[ { url: '/service-piping/cp/pipe/pre/work/order/detail', method: 'GET' } ]" >异常上报</a-button > </template> </template> </a-table> <a-table sticky v-if="feedbackType === '装配'" :scroll="{ x: '100%' }" style="width: 98%" :columns="assyColumns" :dataSource="partData" bordered size="middle" :loading="loading" :pagination="false" rowKey="id" > <template #bodyCell="{ column, record }"> <template v-if="column.key === 'action'"> <a-button type="link" @click="delAssyData(record)" v-resource="[ { url: '/service-piping/cp/pipe/pre/work/order/detail', method: 'GET' } ]" >删除</a-button > <a-button type="link" @click="saveException(record)" v-resource="[ { url: '/service-piping/cp/pipe/pre/work/order/detail', method: 'GET' } ]" >异常上报</a-button > <a-button type="link" @click="saveHeat(record)" v-resource="[ { url: '/service-piping/cp/pipe/pre/work/order/detail', method: 'GET' } ]" >选择炉批号</a-button > </template> </template> </a-table> <a-table sticky v-if="feedbackType === '装配' || feedbackType === '焊接'" :scroll="{ x: '100%' }" style="width: 98%" :columns="weldingColumns" :dataSource="weldData" bordered size="middle" :loading="loading" :pagination="false" rowKey="id" > <template #bodyCell="{ column, record }"> <template v-if="column.key === 'action'"> <a-button type="link" @click="delWeldData(record)" v-resource="[ { url: '/service-piping/cp/pipe/pre/work/order/detail', method: 'GET' } ]" >删除</a-button > <a-button type="link" @click="saveException(record)" v-resource="[ { url: '/service-piping/cp/pipe/pre/work/order/detail', method: 'GET' } ]" >异常上报</a-button > <a-button type="link" @click="saveWps(record)" v-if="feedbackType === '焊接'" v-resource="[ { url: '/service-piping/cp/pipe/pre/work/order/detail', method: 'GET' } ]" >选择WPSNo</a-button > <a-button type="link" @click="saveWeldHeat(record)" v-if="feedbackType === '焊接'" v-resource="[ { url: '/service-piping/cp/pipe/pre/work/order/detail', method: 'GET' } ]" >选择批号</a-button > </template> </template> </a-table> </div> </van-cell-group> <van-calendar v-model:show="showDatePicker" @confirm="onDateConfirm" /> </van-popup> <van-popup v-model:show="showDetailModal" :style="{ width: '100%', height: '100%', overflow: 'auto' }" position="right" round closeable @close="handleDetailClose" > <van-cell-group title="管路下料数据" v-if="detailType === '下料'"> <van-field name="projectNo" label="项目"> <template #input> {{ detailTable.dataSource.length > 0 ? detailTable.dataSource[0].printName : '' }} </template> </van-field> <van-field name="inspClass" label="派工单号"> <template #input> {{ detailTable.dataSource.length > 0 ? detailTable.dataSource[0].orderNo : '' }} ({{ detailTable.dataSource.length > 0 ? detailTable.dataSource[0].shopMatOrderNo : '' }}) </template> </van-field> </van-cell-group> <van-cell-group title="材料清单" v-if="detailType === '装配'"> <van-field name="projectNo" label="项目"> <template #input> {{ detailTable.dataSource.length > 0 ? detailTable.dataSource[0].projectNo : '' }} </template> </van-field> <van-field name="inspClass" label="派工单号"> <template #input> {{ detailData.orderNo }} </template> </van-field> <van-field name="inspClass" label="下料领料单"> <template #input> {{ detailData.cutMatListNo }} </template> </van-field> <van-field name="inspClass" label="装配领料单"> <template #input> {{ detailData.assyMatListNo }} </template> </van-field> </van-cell-group> <van-cell-group title="装配套料件材料清单" v-if="detailType === 'nesting'"> <van-field name="inspClass" label="派工单号"> <template #input> {{ detailTable.dataSource.length > 0 ? detailTable.dataSource[0].orderNo : '' }} </template> </van-field> </van-cell-group> <van-form ref="addCommentsFormRef" @submit="handleSave"> <a-table sticky :scroll="{ x: '100%' }" :columns=" detailType == 'show' ? detailTable.columns : detailType == '下料' ? detailTable.cutColumns : detailType == '装配' ? detailTable.assyColumns : detailTable.nestingColumns " style="width: 98%" :dataSource="detailTable.dataSource" bordered size="middle" :loading="loading" :pagination="false" rowKey="id" ref="detailTableRef" > </a-table> </van-form> </van-popup> <div class="top-content"> <div class="project-content"> <div class=""></div> </div> <div class="btn-content"> <div class="btn-right" @click="openSearchDialog"> <SearchOutlined style="font-size: 20px; color: #004688" /> <p class="speNorm">搜索</p> </div> </div> </div> <div class="bot-content" @scroll="handleScroll"> <a-table sticky :scroll="{ x: '100%' }" :columns="columns" :dataSource="data" bordered size="middle" :loading="loading" :pagination="false" rowKey="id" > <template #bodyCell="{ column, record }"> <template v-if="column.key === 'action'"> <a-button type="link" @click="showData(record, 'show')" v-resource="[{ url: '/service-piping/cp/pipe/pre/work/order/detail', method: 'GET' }]" >查看</a-button > <a-button type="link" @click="showData(record, '下料')" v-resource="[{ url: '/service-piping/cp/pipe/pre/work/order/detail', method: 'GET' }]" >下料单</a-button > <a-button type="link" @click="showData(record, '装配')" v-resource="[{ url: '/service-piping/cp/pipe/pre/work/order/detail', method: 'GET' }]" >材料单</a-button > <a-button type="link" @click="showData(record, 'nesting')" v-resource="[{ url: '/service-piping/cp/pipe/pre/work/order/detail', method: 'GET' }]" >套料件材料单</a-button > <a-button type="link" @click="feedback(record, '下料')" v-resource="[{ url: '/service-piping/cp/pipe/pre/work/order/detail', method: 'GET' }]" >下料反馈</a-button > <a-button type="link" @click="feedback(record, '装配')" v-resource="[{ url: '/service-piping/cp/pipe/pre/work/order/detail', method: 'GET' }]" >装配反馈</a-button > <a-button type="link" @click="feedback(record, '焊接')" v-resource="[{ url: '/service-piping/cp/pipe/pre/work/order/detail', method: 'GET' }]" >焊接反馈</a-button > </template> </template> </a-table> </div> <van-popup v-model:show="searchOpen" position="right" :style="{ width: popupWidth, height: '100%', overflow: 'hidden' }" round closeable @close="handleDetailClose" > <div class="search-content"> <div class="search-top"> <div class="search-project-back" v-if="projectType" @click="handleBack"> <LeftOutlined style="font-size: 15px; color: #004688; margin-top: 3px" />返回 </div> <div class="search-titles"> <span>{{ !projectType ? '搜索' : '搜索项目' }}</span> </div> </div> <div class="search-state"> <van-cell-group inset> <van-field v-model="searchState.projectNo" clearable label="项目" readonly @click="handleProject" /> <van-field v-model="searchState.orderNo" clearable label="派工单号" placeholder="请输入派工单号" /> </van-cell-group> <project-panel ref="projectpanelRef" @get="getProj"></project-panel> </div> <div class="search-btn"> <van-button type="warning" color="#9A9A9A" @click="onReset">重置</van-button> <van-button type="primary" @click="onSearch">查询 </van-button> </div> </div> </van-popup> </div> </template> <script setup> import { ref, onMounted, onUnmounted, onActivated, computed, watch, createVNode, reactive } from 'vue' import { SearchOutlined, LeftOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue' import * as serve from '@/api/cp/pipeOrderInfo' import ProjectPanel from '@/components/ProjectPanel.vue' import dayjs from 'dayjs' import { Buffer } from 'buffer' import localforage from 'localforage' import { useHomePage } from '@/stores/homePage' import { Modal } from 'ant-design-vue' import { getBuildBases } from '@/api/common/index.js' import { showConfirmDialog, showNotify } from 'vant' import { cloneDeep } from 'lodash-es' const showFillPicker = ref(false) const showRootPicker = ref(false) const submitting = ref(false) const orgNo = ref(undefined) const orderNo = ref(undefined) const projectNo = ref(undefined) const pipeNo = ref(undefined) const pipeVersion = ref(undefined) const showDatePicker = ref(false) const feedbackParam = ref({}) const exceptionParam = ref({}) const detailData = ref({}) const applyDate = ref(undefined) const weldTable = reactive({ toolbar: { // buttons: [{ code: "addCar", name: "添加物料" }] }, resToolbar: { buttons: [ { code: 'qualifiedWeld', name: '合格' }, { code: 'unqualifiedWeld', name: '不合格' }, { code: 'cancelWeld', name: '取消' } ] }, selectedRowKeys: [], selectedRows: [], columns: [ { title: '管号', dataIndex: 'pipeNo', width: 120 }, { title: '焊缝号', dataIndex: 'weldNo', width: 150 }, { title: '焊缝长度', dataIndex: 'length', width: 150 }, { title: '焊接日期', type: 'date', dataIndex: 'weldDate', width: 150 } // { // title: "操作", // key: "action", // align: "center", // width: 90, // sorter: false, // scopedSlots: { customRender: "action" }, // fixed: "right", // formInvisible: true // } ], resColumns: [ { title: '项目', dataIndex: 'projectNo', width: 90, type: 'project' }, { title: '管号', dataIndex: 'pipeNo', width: 120 }, { title: '版本号', dataIndex: 'pipeVersion', width: 120 }, { title: '焊缝号', dataIndex: 'weldNo', width: 150 }, { title: '检验结果', dataIndex: 'status', type: 'select', width: 80, customRender: function (text) { if (text.record.status) { return stateColumns.value.find((item) => item.value == text.record.status).text } else { return '新建' } } }, { title: '小票删除', dataIndex: 'pipeDelFlag', width: 80 }, { title: '小票暂停', dataIndex: 'pipePauseFlag', width: 80 }, { title: '小票最新版', dataIndex: 'pipeTopFlag', width: 80 }, { title: '焊缝删除', dataIndex: 'delFlag', width: 80 }, { title: '操作', key: 'action', align: 'center', width: 200, sorter: false, scopedSlots: { customRender: 'action' }, fixed: 'right', formInvisible: true } ], dataSource: [] }) const detailType = ref('') const feedbackType = ref('') const showType = ref('') window.Buffer = Buffer const homePage = useHomePage() const saveData = ref({}) const stateColumns = ref([ { value: 0, text: '新建' }, { value: -1, text: '不合格' }, { value: 1, text: '检验中' }, { value: 2, text: '合格' } ]) const showDetailModal = ref(false) const showFeedbackModal = ref(false) const showCutFeedbackAddModal = ref(false) const showWpsModal = ref(false) const showWeldHeatModal = ref(false) const showPicker = ref(false) const showHeatNoPicker = ref(false) const showBatchNoPicker = ref(false) const buildBaseList = ref([]) const data = ref([]) const cutData = ref([]) const partData = ref([]) const weldData = ref([]) const addCutData = ref([]) // const addPartData = ref([]) const loading = ref(false) const dataCount = ref(0) const searchState = ref({ size: 20, page: 0, projectNo: undefined, inspClass: undefined, orderNo: undefined }) const searchOpen = ref(false) const projectpanelRef = ref(null) const projectType = ref(false) const popupWidth = ref('30%') const isLast = ref(false) const detailTable = reactive({ toolbar: { buttons: [{ code: 'addPipe', name: '添加物料' }] }, resToolbar: { buttons: [ { code: 'qualifiedPipe', name: '合格' }, { code: 'unqualifiedPipe', name: '不合格' }, { code: 'cancelPipe', name: '取消' } ] }, selectedRowKeys: [], selectedRows: [], columns: [ { title: '项目', dataIndex: 'projectNo', width: 50, condition: true, type: 'project', options: { options: [], fieldNames: { label: 'projId', value: 'projId' } } }, { title: '图号', dataIndex: 'drawNo', width: 170 }, { title: '作业对象', dataIndex: 'block', width: 70 }, { title: '小票号', dataIndex: 'pipeNo', width: 150 }, { title: '版本号', dataIndex: 'pipeVersion', width: 60 }, { title: '最新版', dataIndex: 'isTopVersion', width: 60, type: 'select', options: { options: [ { label: 'Y', value: 'Y' }, { label: 'N', value: 'N' } ] } }, { title: '是否删除', dataIndex: 'isDelete', width: 80, type: 'select', options: { options: [ { label: 'Y', value: 'Y' }, { label: 'N', value: 'N' } ] } }, { title: '是否暂停', dataIndex: 'isPause', width: 80, type: 'select', options: { options: [ { label: 'Y', value: 'Y' }, { label: 'N', value: 'N' } ] } }, { title: '下料定额工时', dataIndex: 'cutQuotaWorkhour', width: 100 }, { title: '装配定额工时', dataIndex: 'assyQuotaWorkhour', width: 100 }, { title: '焊接定额工时', dataIndex: 'weldingQuotaWorkhour', width: 100 }, { title: '下料完成时间', dataIndex: 'realCutFinishDate', type: 'date', width: 100 }, { title: '装配完成时间', dataIndex: 'realAssyFinishDate', type: 'date', width: 100 }, { title: '焊接完成时间', dataIndex: 'realWeldingFinishDate', type: 'date', width: 100 } ], assyColumns: [ { title: '管号', dataIndex: 'pipeNo', width: 90 }, { title: '页号', dataIndex: 'pageNo', width: 90 }, { title: '件号', dataIndex: 'partNo', width: 90 }, { title: '零件描述', dataIndex: 'erpMatDesc', width: 90 }, { title: '物资编码', dataIndex: 'matNo', width: 90 }, { title: '物资描述', dataIndex: 'matDesp', width: 90 }, { title: '零件备注', dataIndex: 'cutRemark', width: 90 }, { title: '涂装代码', dataIndex: 'paintNo', width: 90 }, { title: '总', dataIndex: 'total', width: 90 }, { title: '需求', dataIndex: 'needNum', width: 90 }, { title: '使用余料', dataIndex: 'isUsedShopMat', width: 90 } ], nestingColumns: [ { title: '图纸号', dataIndex: 'drawNo', width: 90 }, { title: '管号', dataIndex: 'pipeNo', width: 90 }, { title: '件号', dataIndex: 'partNo', width: 90 }, { title: '零件描述', dataIndex: 'matDesp', width: 90 }, { title: '套料图号', dataIndex: 'cutBomPrintNo', width: 90 }, { title: '套料件号', dataIndex: 'partNumber', width: 90 }, { title: '材质', dataIndex: 'material', width: 90 }, { title: '板厚', dataIndex: 'partThickness', width: 90 }, { title: 'CJP', dataIndex: 'cjp', width: 90 }, { title: '筐号', dataIndex: 'basketNo', width: 90 } ], cutColumns: [ { title: '分段', dataIndex: 'block', width: 90 }, { title: '图纸号', dataIndex: 'drawNo', width: 120 }, { title: '小票号', dataIndex: 'pipeNo', width: 120 }, { title: '等级', dataIndex: 'pipeClass', width: 80 }, { title: '材料名', dataIndex: 'materialDesp', width: 80 }, { title: '页数', dataIndex: 'pageNo', width: 80 }, { title: '管段', dataIndex: 'info', width: 80 }, { title: '管长MM', dataIndex: 'length', width: 80 }, { title: '弯管', dataIndex: 'groove', width: 80 }, { title: '备注', dataIndex: 'cutRemark', width: 80 }, { title: '炉号', dataIndex: 'heatNo', width: 80 }, { title: '通舱件', dataIndex: 'isThroughCabin', width: 80 }, { title: '修改方式', dataIndex: 'modifyType', width: 80 } ], dataSource: [] }) const columns = computed(() => { return [ { title: '操作', dataIndex: 'action', width: 140, key: 'action' }, { title: '派工单号', dataIndex: 'orderNo', width: 120, condition: true }, { title: '基地', dataIndex: 'orgNo', type: 'buildCase', width: 80, condition: true }, { title: '总长度', dataIndex: 'totalLength', width: 70 }, { title: '总重量', dataIndex: 'totalWeight', width: 70 }, { title: '总寸口数', dataIndex: 'totalInch', width: 80 }, { title: '物量统计', dataIndex: 'pipeCount', width: 80 }, { title: '下料工位号', dataIndex: 'cutWorkSpaceNo', width: 80 }, { title: '下料开始日期', dataIndex: 'cutStartDate', type: 'date', width: 100 }, { title: '下料结束日期', dataIndex: 'cutEndDate', type: 'date', width: 100 }, { title: '下料状态', dataIndex: 'cutStatus', width: 80, type: 'select', options: { options: [ { value: 'Y', label: 'Y' }, { value: 'N', label: 'N' } ] } }, { title: '装配工位号', dataIndex: 'assyWorkSpaceNo', width: 80 }, { title: '装配工位类型', dataIndex: 'assyWorkSpaceType', width: 100 }, { title: '装配开始日期', dataIndex: 'assyStartDate', type: 'date', width: 100 }, { title: '装配结束日期', dataIndex: 'assyEndDate', type: 'date', width: 100 }, { title: '装配状态', dataIndex: 'assyStatus', width: 80, type: 'select', options: { options: [ { value: 'Y', label: 'Y' }, { value: 'N', label: 'N' } ] } }, { title: '焊接工位号', dataIndex: 'weldingWorkSpaceNo', width: 80 }, { title: '焊接工位类型', dataIndex: 'weldingWorkSpaceType', width: 100 }, { title: '焊接开始日期', dataIndex: 'weldingStartDate', type: 'date', width: 100 }, { title: '焊接结束日期', dataIndex: 'weldingEndDate', type: 'date', width: 100 }, { title: '焊接状态', dataIndex: 'weldingStatus', width: 80, type: 'select', options: { options: [ { value: 'Y', label: 'Y' }, { value: 'N', label: 'N' } ] } }, { title: '派工单状态', dataIndex: 'status', width: 100, type: 'select', formatter: (data) => data.cellValue == -1 ? '作废' : data.cellValue == 0 ? '新建' : data.cellValue == 1 ? '作业中' : data.cellValue == 2 ? '已完成' : '', options: { options: [ { value: -1, label: '作废' }, { value: 0, label: '新建' }, { value: 1, label: '作业中' }, { value: 2, label: '已完成' } ] } }, { title: '下料领料单号', dataIndex: 'cutMatListNo', width: 120 }, { title: '装配领料单号', dataIndex: 'assyMatListNo', width: 120 }, { title: '创建人', dataIndex: 'createUserNo', type: 'employeeDescription', options: { fieldNames: { label: 'createUserName', value: 'createUserNo' } }, width: 110 }, { title: '创建时间', dataIndex: 'createDataDate', formatter: ({ row }) => { return row.createDate ? dayjs(row.createDate).format('YYYY-MM-DD') : '-' }, width: 80, invisible: false, type: 'date' } ] }) const weldColumns = computed(() => { return [ { title: '操作', dataIndex: 'action', width: 140, key: 'action' }, { title: '项目', dataIndex: 'projectNo', width: 50, type: 'project', options: { options: [], fieldNames: { label: 'projId', value: 'projId' } } }, { title: '小票号', dataIndex: 'pipeNo', width: 150 }, { title: '版本号', dataIndex: 'pipeVersion', width: 60 }, { title: '焊缝号', dataIndex: 'weldNo', width: 170 }, { title: '描述', dataIndex: 'notFeedbackMsg', width: 80 } ] }) const cutColumns = computed(() => { return [ { title: '操作', dataIndex: 'action', width: 140, key: 'action' }, { title: '项目', dataIndex: 'projectNo', width: 50, type: 'project' }, { title: '小票号', dataIndex: 'pipeNo', condition: true, width: 150 }, { title: '版本号', condition: true, dataIndex: 'pipeVersion', width: 60 }, { title: '描述', dataIndex: 'notFeedbackMsg', width: 80 } ] }) const assyColumns = computed(() => { return [ { title: '操作', dataIndex: 'action', width: 140, key: 'action' }, { title: '项目', dataIndex: 'projectNo', width: 50 }, { title: '小票号', dataIndex: 'pipeNo', width: 150 }, { title: '版本号', dataIndex: 'pipeVersion', width: 60 }, { title: '零件号', dataIndex: 'partNo', width: 100 }, { title: '物资编码', dataIndex: 'matNo', width: 100 }, { title: '零件规格', dataIndex: 'partSize', width: 100 }, { title: '炉号', dataIndex: 'heatNo', width: 120 }, { title: '批号', dataIndex: 'batchNo', width: 120 } ] }) const weldingColumns = computed(() => { const baseColumns = [ { title: '操作', dataIndex: 'action', width: 140, key: 'action' }, { title: '项目', dataIndex: 'projectNo', width: 50 }, { title: '小票号', dataIndex: 'pipeNo', width: 150 }, { title: '版本号', dataIndex: 'pipeVersion', width: 60 }, { title: '焊缝号', dataIndex: 'weldNo', width: 170 } ]; // 只在焊接反馈时添加焊接相关列 if (feedbackType.value === '焊接') { return [ ...baseColumns, { title: 'WPS NO', dataIndex: 'wpsNo', width: 80 }, { title: '焊接方法', dataIndex: 'weldProcess', width: 100 }, { title: '焊材规格', dataIndex: 'weldingMatSpec', width: 150 }, { title: '批号', children: [ { title: '打底', dataIndex: 'rootBatchNo', width: 60 }, { title: '盖面', dataIndex: 'fillBatchNo', width: 60 } ], width: 120 }, { title: '证书', children: [ { title: '打底', dataIndex: 'rootWeldCert', width: 60 }, { title: '盖面', dataIndex: 'fillWeldCert', width: 60 } ], width: 120 } ]; } return baseColumns; }) const exceptionTypeList = ref([]) const heatNoList = ref([]) const batchNoList = ref([]) const exceptionModal = ref(false) const heatModal = ref(false) const heatData = ref({}) const partInfo = ref({}) const addWeldData = ref([]) const currentWeldData = ref({}) const addWpsData = ref([]) const wpsColumns = computed(() => { return [ { title: '操作', dataIndex: 'action', width: 140, key: 'action' }, { title: 'WPS NO', dataIndex: 'wpsNo', width: 80 }, { title: '焊接方法', dataIndex: 'process', width: 80 }, { title: '焊材规格', dataIndex: 'grade', width: 80 }, { title: '焊接类型', dataIndex: 'type', width: 80 } ] }) const rootBatchNoList = ref([]) const fillBatchNoList = ref([]) const rootBatchNoOldList = ref([]) const fillBatchNoOldList = ref([]) const weldHeatData = ref({}) const onDateConfirm = (val) => { let resDate = dayjs(val).format('YYYY-MM-DD') feedbackParam.value.workDate = resDate showDatePicker.value = false } const loadData = (type) => { loading.value = true serve.getOrderList(searchState.value).then(async (res) => { if (type == 'scroll') { data.value.push(...res.content) } else { data.value = res.content } dataCount.value = res.totalElements || 0 isLast.value = res.last loading.value = false }) } const handleScroll = (e) => { const element = e.target if (element.scrollTop + element.clientHeight >= element.scrollHeight) { if (!isLast.value) { searchState.value.page++ loadData('scroll') } } } const openSearchDialog = () => { searchOpen.value = true } const handleProject = () => { projectType.value = true projectpanelRef.value.open = true projectpanelRef.value.init() } const handleBack = () => { projectType.value = false projectpanelRef.value.open = false } const handleClose = () => { projectType.value = false projectpanelRef.value.open = false } const handleDetailClose = () => { showDetailModal.value = false } const handleFeedbackClose = () => { showFeedbackModal.value = false } const handleCutFeedbackAddClose = () => { showCutFeedbackAddModal.value = false } const handleWpsClose = () => { showWpsModal.value = false } const handleWeldHeatClose = () => { weldHeatData.value = {} showWeldHeatModal.value = false } const handleExceptionModalClose = () => { exceptionModal.value = false } const handleHeatClose = () => { heatModal.value = false } const handleResize = () => { if (window.innerWidth < 1000) { popupWidth.value = '60%' } else { popupWidth.value = '30%' } } const getProj = (val) => { searchState.value.projectNo = val.projId searchState.value.projNo = val.projNo handleClose() } const onSearch = () => { searchState.value.page = 0 loadData() searchOpen.value = false } const onReset = () => { searchState.value.page = 0 searchState.value.projectNo = undefined searchState.value.projNo = undefined searchState.value.inspClass = undefined searchState.value.orderNo = undefined } const handleBeforeUnload = () => { if (!homePage.isOnline) { Modal.confirm({ title: '浏览器当前处于离线状态,是否继续?', icon: createVNode(ExclamationCircleOutlined), content: createVNode( 'div', { style: 'color:red;' }, '一旦刷新,将无法继续使用' ), onOk() { console.log('OK') }, onCancel() { console.log('Cancel') } }) } } watch( () => homePage.isOnline, async (newVal) => { if (!newVal) { try { const listData = await localforage.getItem('downloadList') if (listData) { const list = JSON.parse(listData) list.forEach((item) => { item.isDownload = true }) data.value = list } } catch (error) { console.error('Error parsing list data:', error) } } else { onReset() loadData() } } ) onMounted(() => { getBuildBase() if (homePage.isOnline) { loadData() } serve.getDislist({ code: 'CP_EXCEPTION_TYPE' }).then((res) => { exceptionTypeList.value = res.map((item) => ({ text: item.name, value: item.name })) }) handleResize() window.addEventListener('resize', handleResize) window.addEventListener('beforeunload', handleBeforeUnload) }) onUnmounted(() => { window.removeEventListener('resize', handleResize) window.removeEventListener('beforeunload', handleBeforeUnload) }) onActivated(async () => { if (!homePage.isOnline) { try { const listData = await localforage.getItem('downloadList') if (listData) { const list = JSON.parse(listData) list.forEach((item) => { item.isDownload = true }) data.value = list } } catch (error) { console.error('Error parsing list data:', error) } } }) const getBuildBase = () => { getBuildBases().then((res) => { buildBaseList.value = res.map((item) => ({ value: item.orgNo, text: item.name })) }) } const feedback = (record, type) => { console.log('feedbackType', type) feedbackType.value = type feedbackParam.value = {} orgNo.value = record.orgNo orderNo.value = record.orderNo projectNo.value = record.projectNo if (type == '下料') { cutData.value = [] } else if (type == '装配') { partData.value = [] weldData.value = [] } else if (type == '焊接') { weldData.value = [] } console.log('record', record) console.log('orderNo.value', orderNo.value) showFeedbackModal.value = true } const showData = (record, showTypeStr) => { detailType.value = showTypeStr orderNo.value = record.orderNo console.log('detailType.value', detailType.value) if (showTypeStr == 'show') { serve .getOrderDetail({ orderNo: record.orderNo, projectNo: record.projectNo }) .then((res) => { console.log(res) detailTable.dataSource = res showDetailModal.value = true }) } else if (showTypeStr == '下料') { serve.getPreCutWorkOrderPrintList({ orderNo: record.orderNo }).then((res) => { if (!res.error) { detailData.value = res[0] detailTable.dataSource = res[0].matList console.log('res', res[0]) console.log('res.matList', res[0].matList) showDetailModal.value = true } }) } else if (showTypeStr == '装配') { serve.getPreAssyWorkOrderPrintList({ orderNo: record.orderNo }).then((res) => { if (!res.error) { detailData.value = res detailTable.dataSource = res.matList console.log('res', res) console.log('res.matList', res.matList) showDetailModal.value = true } }) } else if (showTypeStr == 'nesting') { serve.getPreNestingPartPrintList({ orderNo: record.orderNo }).then((res) => { if (!res.error) { detailTable.dataSource = res console.log('res', res) showDetailModal.value = true } }) } } const handleSave = () => { if (showType.value == 'qcOrder') { console.log('applyDate', applyDate.value) let saveApplyData = { id: saveData.value.id, applyDate: dayjs(applyDate.value) } if (!saveApplyData.applyDate) { showNotify({ type: 'success', message: '请选择日期' }) return } serve.applyOrder(saveApplyData).then(() => { showNotify({ type: 'success', message: '操作成功' }) }) } else { let param = cloneDeep(saveData.value) if (showType.value == 'result') { param.editType = 1 param.id = saveData.value.id } else { param.getEditType = 0 if ('edit' == showType.value) { param.id = saveData.value.id } } if (param.mainUserNo && param.mainUserNo.value) { param.mainUserName = param.mainUserNo.label param.mainUserNo = param.mainUserNo.value } else { param.mainUserNo = '' } param.pipeList = detailTable.dataSource param.weldList = weldTable.dataSource serve.saveOrderList(param).then(() => { showNotify({ type: 'success', message: '操作成功' }) // if(type.value != 'result'){ showDetailModal.value = false // } }) } } const addFeedbackDetail = () => { if (feedbackType.value == '下料') { serve.findCutNotFeedbackPipe({ orderNo: orderNo.value }).then((res) => { addCutData.value = res }) } else if (feedbackType.value == '装配') { serve.findAssyNotFeedbackPipe({ orderNo: orderNo.value }).then((res) => { addCutData.value = res }) } else if (feedbackType.value == '焊接') { serve.findWeldingNotFeedbackPipe({ orderNo: orderNo.value }).then((res) => { addWeldData.value = res }) } showCutFeedbackAddModal.value = true } const addData = (record) => { console.log('record', record) let dataSource = [] if (feedbackType.value == '下料') { dataSource = cutData.value } else if (feedbackType.value == '装配') { dataSource = partData.value } else if (feedbackType.value == '焊接') { dataSource = weldData.value } let isExist = true if (feedbackType.value == '焊接') { isExist = dataSource.some( (dataItem) => dataItem.projectNo === record.projectNo && dataItem.pipeNo === record.pipeNo && dataItem.pipeVersion === record.pipeVersion && dataItem.weldNo === record.weldNo ) } else { isExist = dataSource.some( (dataItem) => dataItem.projectNo === record.projectNo && dataItem.pipeNo === record.pipeNo && dataItem.pipeVersion === record.pipeVersion ) } if (isExist) { showNotify({ type: 'danger', message: '此条数据已添加到反馈清单！' }) return } else { if (feedbackType.value == '下料') { cutData.value.push(record) showNotify({ type: 'success', message: '添加成功！' }) } else if (feedbackType.value == '装配') { console.log('装配') console.log('record.partData.value', partData.value) console.log('record.preFeedbackPartList', record.preFeedbackPartList) if (record.preFeedbackPartList.length > 0) { partData.value.push(...record.preFeedbackPartList) } if (record.preFeedbackWeldList.length > 0) { weldData.value.push(...record.preFeedbackWeldList) } showNotify({ type: 'success', message: '添加成功！' }) } else if (feedbackType.value == '焊接') { weldData.value.push(record) showNotify({ type: 'success', message: '添加成功！' }) } } } const delCutData = (record) => { cutData.value = cutData.value.filter((x) => { return !( x.projectNo === record.projectNo && x.pipeNo === record.pipeNo && x.pipeVersion === record.pipeVersion ) }) } const delAssyData = (record) => { showConfirmDialog({ title: '请确认是否要进行删除', message: '该操作一旦执行无法撤回，并将删除该小票的所有零件？', confirmButtonText: '确认', cancelButtonText: '取消' }).then(() => { partData.value = partData.value.filter((x) => { return !( x.projectNo === record.projectNo && x.pipeNo === record.pipeNo && x.pipeVersion === record.pipeVersion ) }) }) } const delWeldData = (record) => { weldData.value = weldData.value.filter((x) => { return !( x.projectNo === record.projectNo && x.pipeNo === record.pipeNo && x.pipeVersion === record.pipeVersion && x.weldNo === record.weldNo ) }) } const handleExceptionType = () => { showPicker.value = true } const handleHeatNo = () => { showHeatNoPicker.value = true } const handleRoot = () => { showRootPicker.value = true } const handleFill = () => { showFillPicker.value = true } const handleBatchNo = () => { showBatchNoPicker.value = true } const onExceptionTypeConfirm = ({ selectedOptions }) => { showPicker.value = false exceptionParam.value.exceptionType = selectedOptions[0].value console.log('exceptionParam', exceptionParam.value) } const commitException = () => { console.log('exceptionParam', exceptionParam.value) const submitData = [ { projectNo: projectNo.value, bomNo: pipeNo.value, bomVersion: pipeVersion.value, orgNo: orgNo.value, exceptionType: exceptionParam.value.exceptionType, exceptionMsg: exceptionParam.value.exceptionMsg } ] serve.postExceptionManage(submitData).then(() => { showNotify({ type: 'success', message: '上报成功！' }) exceptionModal.value = false }) } const saveException = (record) => { console.log('record', record) exceptionParam.value = {} projectNo.value = record.projectNo pipeNo.value = record.pipeNo pipeVersion.value = record.pipeVersion exceptionModal.value = true } const commitFeedbackDetail = () => { if (submitting.value) return submitting.value = true const submitData = { orderNo: orderNo.value, process: feedbackType.value, workDate: feedbackParam.value.workDate, remark: feedbackParam.value.remark, helperNo: feedbackParam.value.helperNo ? feedbackParam.value.helperNo : '', pipeList: cutData.value, partList: partData.value, weldList: weldData.value } let apiPromise if (feedbackType.value == '下料') { if (cutData.value.length == 0) { showNotify({ type: 'danger', message: '请选择下料数据！' }) submitting.value = false return } apiPromise = serve.cutFeedback(submitData) } else if (feedbackType.value == '装配') { if (partData.value.length == 0) { showNotify({ type: 'danger', message: '请选择零件数据！' }) submitting.value = false return } const pipeMap = new Map() cutData.value.forEach((pipeItem) => { const key = `${pipeItem.projectNo}-${pipeItem.pipeNo}-${pipeItem.pipeVersion}` pipeMap.set(key, { ...pipeItem, weldList: [] }) }) weldData.value.forEach((weldItem) => { const key = `${weldItem.projectNo}-${weldItem.pipeNo}-${weldItem.pipeVersion}` if (pipeMap.has(key)) { pipeMap.get(key).weldList.push(weldItem) } }) submitData.pipeList = Array.from(pipeMap.values()) delete submitData.weldList apiPromise = serve.assyFeedback(submitData) } else if (feedbackType.value == '焊接') { if (weldData.value.length == 0) { showNotify({ type: 'danger', message: '请选择焊接数据！' }) submitting.value = false return } apiPromise = serve.weldingFeedback(submitData) } apiPromise .then(() => { showNotify({ type: 'success', message: '反馈成功！' }) showFeedbackModal.value = false }) .finally(() => { submitting.value = false }) } const saveHeat = (record) => { console.log('saveHeat', record) heatData.value = {} partInfo.value = record heatNoList.value = [] serve.findHeatDropList({ heatNo: '', matNo: record.matNo }).then((res) => { heatNoList.value = res.map((item) => ({ value: item, text: item })) }) heatModal.value = true } const onHeatNoConfirm = ({ selectedOptions }) => { showHeatNoPicker.value = false heatData.value.heatNo = selectedOptions[0].value batchNoList.value = [] serve .findBatchDropList({ batchNo: '', matNo: partInfo.value.matNo, heatNo: heatData.value.heatNo }) .then((res) => { batchNoList.value = res.map((item) => ({ value: item, text: item })) }) console.log('heatData.value', heatData.value) } const onBatchNoConfirm = ({ selectedOptions }) => { showBatchNoPicker.value = false heatData.value.batchNo = selectedOptions[0].value console.log('heatData.value', heatData.value) } const commitHeat = () => { partData.value.forEach((x) => { if (x.id === partInfo.value.id) { x.heatNo = heatData.value.heatNo x.batchNo = heatData.value.batchNo } }) showNotify({ type: 'success', message: '操作成功' }) heatModal.value = false } const inputHelperNo = () => { console.log('feedbackParam.helperNo', feedbackParam.value.helperNo) feedbackParam.value.helperName = '获取失败' if (feedbackParam.value.helperNo.length >= 7) { serve.getUserByCode({ code: feedbackParam.value.helperNo }).then((res) => { console.log('res', res) if (res && res.name) { feedbackParam.value.helperName = res.name } }) } } const saveWps = (record) => { currentWeldData.value = record serve.getWldPiPeiWpsList({ weldId: record.id }).then((res) => { addWpsData.value = res showWpsModal.value = true }) } const addWps = (record) => { weldData.value.forEach((x) => { if (x.id === currentWeldData.value.id) { x.wpsNo = record.wpsNo x.weldProcess = record.process x.weldingMatSpec = record.grade x.rootGrade = record.rootGrade x.fillGrade = record.fillGrade } }) showNotify({ type: 'success', message: '操作成功' }) showWpsModal.value = false } const saveWeldHeat = (record) => { if (!record.wpsNo) { showNotify({ type: 'success', message: '请先选择wpsNo' }) return } currentWeldData.value = record serve.getQcWeldMatSnDropList({ grade: record.rootGrade }).then((res) => { rootBatchNoOldList.value = res rootBatchNoList.value = res.map((item) => ({ text: item.batchNo, value: item.batchNo })) serve.getQcWeldMatSnDropList({ grade: record.fillGrade }).then((fillRes) => { fillBatchNoOldList.value = fillRes fillBatchNoList.value = fillRes.map((item) => ({ text: item.batchNo, value: item.batchNo })) showWeldHeatModal.value = true }) }) } const onRootConfirm = ({ selectedOptions }) => { showRootPicker.value = false weldHeatData.value.rootBatchNo = selectedOptions[0].value const foundItem = rootBatchNoOldList.value.find( (item) => item.batchNo == weldHeatData.value.rootBatchNo ) if (foundItem) { weldHeatData.value.rootWeldCert = foundItem.certNo } } const onFillConfirm = ({ selectedOptions }) => { showFillPicker.value = false weldHeatData.value.fillBatchNo = selectedOptions[0].value const foundItem = fillBatchNoOldList.value.find( (item) => item.batchNo == weldHeatData.value.fillBatchNo ) if (foundItem) { weldHeatData.value.fillWeldCert = foundItem.certNo } } const commitWeldHeat = () => { weldData.value.forEach((x) => { if (x.id === currentWeldData.value.id) { x.rootBatchNo = weldHeatData.value.rootBatchNo x.fillBatchNo = weldHeatData.value.fillBatchNo x.rootWeldCert = weldHeatData.value.rootWeldCert x.fillWeldCert = weldHeatData.value.fillWeldCert } }) showNotify({ type: 'success', message: '操作成功' }) showWeldHeatModal.value = false } </script> <style lang="scss" scoped> :deep .urgentFlag-active { background: #ffb656; } :deep .abnormalFlag-active { background: #fb7171; } :deep .anticon-search { line-height: 0 !important; } @import '@/styles/common.scss'; .search-content { width: 100%; overflow: hidden; // height: 100%; .search-top { width: 100%; height: 50px; margin-top: 20px; display: flex; justify-content: center; align-content: center; .search-project-back { font-size: 14px; display: flex; align-content: center; position: absolute; left: 10px; color: #004688; } .search-titles { height: 100%; display: flex; justify-content: center; align-content: center; color: #004688; span { font-size: 15px; margin-left: 5px; } } } .search-state { width: 100%; height: calc(100% - 45px - 10px); position: absolute; bottom: 0; overflow: hidden; overflow-y: scroll; } } .action-buttons { display: flex; align-items: center; justify-content: space-around; } </style> 其中 <van-popup v-model:show="heatModal" :style="{ width: '100%', height: '100%', overflow: 'auto' }" position="right" round closeable :lock-scroll="true" @close="handleHeatClose" > <van-field v-model="heatData.heatNo" clearable @click="handleHeatNo" label="炉号" is-link readonly /> <van-field v-model="heatData.batchNo" clearable @click="handleBatchNo" label="批号" is-link readonly /> <div class="search-btn"> <van-button type="primary" @click="commitHeat" style="margin-left: 5px">提交 </van-button> </div> </van-popup>有滚动穿透的现象，向下滚动就出现背景的页面
11-13
滚动穿透问题在移动端弹窗中非常常见，尤其是在使用 `position="right"` 的侧滑弹窗时。虽然你已经设置了 `:lock-scroll="true"`，但嵌套的 `van-popup` 之间可能会导致锁屏失效。 ### 解决方案 #### ✅ 方法一：...
<template> <div class="sec-container"> <van-popup v-model:show="showDetailModal" :style="{ width: showType === 'qcOrder'?'30%':'100%', height: '100%', overflow: 'auto' }" position="right" round closeable @close="handleDetailClose" > <van-form ref="addCommentsFormRef" @submit="handleSave"> <!-- 检验单信息 --> <van-cell-group title="检验单信息" v-if="showType === 'qcOrder'"> <!-- <van-field--> <!-- v-model="saveData.applyDate"--> <!-- is-link--> <!-- readonly--> <!-- clearable--> <!-- @click="handleDate"--> <!-- placeholder="请选择提出时间"--> <!-- />--> <van-field v-model="saveData.applyDate" is-link readonly label="提出时间" placeholder="点击选择日期" @click="showDatePicker = true" /> <van-popup v-model:show="showDatePicker" round position="bottom"> <van-date-picker v-model="saveData.applyDate" @confirm="onConfirm" @cancel="showDatePicker = false" /> </van-popup> </van-cell-group> <!-- 编辑/新增时的表单 --> <van-cell-group title="检验单信息" v-if="showType === 'show' || showType === 'result'"> <van-field name="radio" label="检验状态" v-if="showType === 'result'"> <template #input> <van-radio-group v-model="saveData.status" direction="horizontal"> <van-radio name="0">新建</van-radio> <van-radio name="1">检验中</van-radio> <van-radio name="2">合格</van-radio> <van-radio name="-1">不合格</van-radio> </van-radio-group> </template> </van-field> <van-field name="projectNo" label="项目"> <template #input> {{saveData.projectNo}} </template> </van-field> <van-field name="inspClass" label="检验大类" > <template #input> {{saveData.inspClassStr}} </template> </van-field> <van-field name="inspType" label="检验类型" > <template #input> {{saveData.inspTypeName}} </template> </van-field> <van-field name="orgNo" label="基地" > <template #input> {{saveData.orgName}} </template> </van-field> <van-field name="workzone" label="作业区" > <template #input> {{saveData.workzoneName}} </template> </van-field> <van-field name="inspLoc" label="检验地点" > <template #input> {{saveData.inspLoc}} </template> </van-field> <van-field name="mainUserNo" label="负责人" > <template #input> {{saveData.mainUserName}} </template> </van-field> <van-field name="tel" label="联系方式"> <template #input> {{saveData.tel}} </template> </van-field> </van-cell-group> <!-- 管路信息 --> <van-cell-group title="管路信息" v-if="showType != 'qcOrder'"> <!-- 简化显示 --> <div class="search-btn" v-if="showType === 'result'"> <van-button type="primary" @click="changeStatus(1,'pipe')" style="margin-right:10px">合格</van-button> <van-button type="primary" @click="changeStatus(-1,'pipe')" style="margin-right:10px">不合格 </van-button> <van-button type="primary" @click="changeStatus(2,'pipe')" style="margin-right:10px">取消 </van-button> </div> <a-table sticky v-if="showType == 'show'" :scroll="{ x: '100%' }" :columns="pipeTable.columns" :dataSource="pipeTable.dataSource" bordered size="middle" :loading="loading" :pagination="false" rowKey="id" ref="pipeTableRef" > </a-table> <a-table sticky v-if="showType == 'result'" :scroll="{ x: '100%' }" :columns="pipeTable.resColumns" :dataSource="pipeTable.dataSource" bordered size="middle" :loading="loading" :pagination="false" rowKey="id" ref="pipeTableRef" :row-selection="{ selectedRowKeys: pipeTable.selectedRowKeys, onChange: onSelectChange }" > </a-table> </van-cell-group> <!-- 焊缝信息 --> <van-cell-group title="焊缝信息" v-if="showType != 'qcOrder'"> <div class="search-btn" v-if="showType === 'result'"> <van-button type="primary" @click="changeStatus(1,'weld')" style="margin-right:10px">合格</van-button> <van-button type="primary" @click="changeStatus(-1,'weld')" style="margin-right:10px">不合格 </van-button> <van-button type="primary" @click="changeStatus(2,'weld')" style="margin-right:10px">取消 </van-button> </div> <a-table sticky v-if="showType == 'show'" :scroll="{ x: '100%' }" :columns="weldTable.columns" :dataSource="weldTable.dataSource" bordered size="middle" :loading="loading" :pagination="false" rowKey="id" ref="weldTableRef" > </a-table> <a-table sticky v-if="showType == 'result'" :scroll="{ x: '100%' }" :columns="weldTable.resColumns" :dataSource="weldTable.dataSource" bordered size="middle" :loading="loading" :pagination="false" rowKey="id" ref="weldTableRef" :row-selection="{ selectedRowKeys: weldTable.selectedRowKeys, onChange: onWeldSelectChange }" > </a-table> </van-cell-group> <!-- 提交按钮 --> <div style="margin: 16px;"> <van-button round block type="default" @click="handleDetailClose">取消</van-button> <van-button round block type="primary" @click = 'handleSave' native-type="submit" v-if=" showType === 'result' || showType === 'qcOrder'">提交</van-button> </div> </van-form> </van-popup> <div class="top-content"> <div class="project-content"> <div class=""></div> </div> <div class="btn-content"> <div class="btn-right" @click="openSearchDialog"> <SearchOutlined style="font-size: 20px; color: #004688" /> <p class="speNorm">搜索</p> </div> </div> </div> <div class="bot-content" @scroll="handleScroll"> <a-table sticky :scroll="{ x: '100%' }" :columns="columns" :dataSource="data" bordered size="middle" :loading="loading" :pagination="false" rowKey="id" > <template #bodyCell="{ column, record }"> <template v-if="column.key === 'action'"> <a-button type="link" @click="showData(record,'show')" v-resource="[{ url: '/service-piping/cp/insp/order', method: 'POST' }]">查看</a-button> <a-button type="link" @click="showData(record,'result')" v-resource="[{ url: '/service-piping/cp/insp/order', method: 'POST' }]">结果维护</a-button> <a-button type="link" @click="showData(record,'qcOrder')" v-if="record.applyFlag!='Y'" >申请检验</a-button> </template> </template> </a-table> </div> <van-popup v-model:show="searchOpen" position="right" :style="{ width: popupWidth, height: '100%', overflow: 'hidden' }" round closeable @close="handleDetailClose" > <div class="search-content"> <div class="search-top"> <div class="search-project-back" v-if="projectType" @click="handleBack"> <LeftOutlined style="font-size: 15px; color: #004688; margin-top: 3px" />返回 </div> <div class="search-titles"> <span>{{ !projectType ? '搜索' : '搜索项目' }}</span> </div> </div> <div class="search-state"> <van-cell-group inset> <van-field v-model="searchState.projectNo" clearable label="项目" readonly @click="handleProject" /> <van-field v-model="searchState.orderNo" clearable label="检验单号" /> <van-field v-model="searchState.inspClass" clearable @click="handleInspClass" label="检验大类" is-link readonly /> </van-cell-group> <van-popup v-model:show="showPicker" round position="bottom"> <van-picker :columns="inspColumns" @cancel="showPicker = false" @confirm="onInspClassConfirm" /> </van-popup> <project-panel ref="projectpanelRef" @get="getProj"></project-panel> </div> <div class="search-btn"> <van-button type="warning" color="#9A9A9A" @click="onReset">重置</van-button> <van-button type="primary" @click="onSearch">查询 </van-button> </div> </div> </van-popup> </div> </template> <script setup> import { ref, onMounted, onUnmounted, onActivated, computed, watch, createVNode, reactive } from 'vue' import { SearchOutlined, LeftOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue' import * as serve from '@/api/cp/pipeInspection' import ProjectPanel from '@/components/ProjectPanel.vue' import dayjs from 'dayjs' import { Buffer } from 'buffer' import { useRouter } from 'vue-router' import localforage from 'localforage' import { useHomePage } from '@/stores/homePage' import { Modal } from 'ant-design-vue' import {getBuildBases} from "@/api/common/index.js"; import {showNotify} from "vant"; import { cloneDeep } from 'lodash-es' const showDatePicker = ref(false); const onSelectChange = (keys, rows) => { pipeTable.selectedRowKeys = keys pipeTable.selectedRows = rows } const onWeldSelectChange = (keys, rows) => { weldTable.selectedRowKeys = keys weldTable.selectedRows = rows } const workZoneNos = ref([]) const statusOptions = ref([ { value: -1, text: "不合格" }, { value: 0, text: "新建" }, { value: 1, text: "合格" }, { value: 2, text: "取消" } ]) // const inspClassOptions = [ // { text: '焊前检验', value: 'HQ' }, // { text: '焊后检验', value: 'HH' }, // { text: '压力检验', value: 'PT' }, // { text: '完工检验', value: 'HP' }, // { text: '其他检验', value: 'JY' }, // ] const currProjectNo =ref(null) const selectInsp = ref([]) const weldTable = reactive({ toolbar: { // buttons: [{ code: "addCar", name: "添加物料" }] }, resToolbar: { buttons: [{ code: "qualifiedWeld", name: "合格" },{ code: "unqualifiedWeld", name: "不合格" },{ code: "cancelWeld", name: "取消" }] }, selectedRowKeys: [], selectedRows: [], columns: [ { title: "管号", dataIndex: "pipeNo", width: 120, }, { title: "焊缝号", dataIndex: "weldNo", width: 150, }, { title: "焊缝长度", dataIndex: "length", width: 150, }, { title: "焊接日期", type: "date", dataIndex: "weldDate", width: 150, }, // { // title: "操作", // key: "action", // align: "center", // width: 90, // sorter: false, // scopedSlots: { customRender: "action" }, // fixed: "right", // formInvisible: true // } ], resColumns: [ { title: "项目", dataIndex: "projectNo", width: 90, type: "project", }, { title: "管号", dataIndex: "pipeNo", width: 120, }, { title: "版本号", dataIndex: "pipeVersion", width: 120, }, { title: "焊缝号", dataIndex: "weldNo", width: 150, }, { title: "检验结果", dataIndex: "status", type: "select", width: 80, customRender: function (text) { if (text.record.status) { return stateColumns.value.find( (item) => item.value == text.record.status ).text } else { return '新建' } } }, { title: "小票删除", dataIndex: "pipeDelFlag", width: 80, }, { title: "小票暂停", dataIndex: "pipePauseFlag", width: 80, }, { title: "小票最新版", dataIndex: "pipeTopFlag", width: 80, }, { title: "焊缝删除", dataIndex: "delFlag", width: 80, }, { title: "操作", key: "action", align: "center", width: 200, sorter: false, scopedSlots: { customRender: "action" }, fixed: "right", formInvisible: true } ], dataSource: [] }) const showType = ref('') window.Buffer = Buffer const router = useRouter() const homePage = useHomePage() const saveData = ref({}) const stateColumns = ref( [{ value: 0, text: "新建" }, { value: -1, text: "不合格" }, { value: 1, text: "检验中" }, { value: 2, text: "合格" },] ) const showDetailModal = ref(false) const inspColumns = ref([ { value: 'HQ', text: "焊前检验" }, { value: 'HH', text: "焊后检验" }, { value: 'PT', text: "压力检验" }, { value: 'HP', text: "完工检验" }, { value: 'JY', text: "其他检验" }, ]) const showPicker = ref(false) const buildBaseList = ref([]) const data = ref([]) const loading = ref(false) const dataCount = ref(0) const searchState = ref({ size: 20, page: 0, projectNo: undefined, inspClass: undefined, orderNo: undefined, }) const searchOpen = ref(false) const projectpanelRef = ref(null) const projectType = ref(false) const popupWidth = ref('30%') const isLast = ref(false) const statusList = ref([ { text: '新建', value: 0 }, { text: '进行中', value: 1 }, { text: '已完成', value: 2 } ]) const pipeTable = reactive({ toolbar: { buttons: [{ code: "addPipe", name: "添加物料" }] }, resToolbar: { buttons: [{ code: "qualifiedPipe", name: "合格" },{ code: "unqualifiedPipe", name: "不合格" },{ code: "cancelPipe", name: "取消" }] }, selectedRowKeys: [], selectedRows: [], columns: [ { title: "图号", dataIndex: "drawNo", width: 120, }, { title: "作业对象", dataIndex: "block", width: 150, }, { title: "托盘号", dataIndex: "instPalletNo", width: 150, }, { title: "管号", dataIndex: "pipeNo", width: 120, }, { title: "页号", dataIndex: "pageNo", width: 80, }, { title: "暂停", dataIndex: "isPause", width: 80, }, { title: "删除", dataIndex: "isDelete", width: 80, }, { title: "最新版", dataIndex: "isTopVersion", width: 80, }, { title: "装配承包商", dataIndex: "assyCoopName", width: 150, }, { title: "焊接承包商", dataIndex: "weldingCoopName", width: 150, }, { title: "焊前检验单", dataIndex: "weldingPreOrderNo", width: 150, }, { title: "焊后检验单", dataIndex: "weldingPostOrderNo", width: 150, }, { title: "压力检验单", dataIndex: "ptOrderNo", width: 150, }, { title: "完工/预制放行检验单", dataIndex: "preFinishOrderNo", width: 150, }, { title: "PMI检验单", dataIndex: "pmiOrderNo", width: 150, }, { title: "焊后热处理检验单", dataIndex: "pwhtOrderNo", width: 150, }, { title: "硬度检验单", dataIndex: "hardnessOrderNo", width: 150, }, { title: "铁素体检验单", dataIndex: "ferriteOrderNo", width: 150, }, // { // title: "操作", // key: "action", // align: "center", // sorter: false, // scopedSlots: { customRender: "action" }, // fixed: "right", // formInvisible: true // } ], resColumns: [ { title: "项目", dataIndex: "projectNo", width: 90, type: "project", }, { title: "管号", dataIndex: "pipeNo", width: 120, }, { title: "版本号", dataIndex: "pipeVersion", width: 80, }, { title: "删除", dataIndex: "isDelete", width: 80, }, { title: "暂停", dataIndex: "isPause", width: 80, }, { title: "最新版", dataIndex: "isTopVersion", width: 80, }, { title: "检验结果", dataIndex: "status", type: "select", width: 80, customRender: function (text) { if (text.record.status) { return statusOptions.value.find( (item) => item.value == text.record.status ).text } else { return '新建' } } }, { title: "操作", key: "action", align: "center", width: 200, sorter: false, scopedSlots: { customRender: "action" }, fixed: "right", formInvisible: true } ], dataSource: [] }) const columns = computed(() => { return [ { title: '项目号', dataIndex: 'projectNo', width: 120 }, { title: "基地", dataIndex: "orgNo", condition: true, width: 90, customRender: function (text) { if (text.record.orgNo) return buildBaseList.value.find( (item) => item.value == text.record.orgNo ).text }, }, { title: "检验单号", dataIndex: "orderNo", condition: true, width: 150 }, { dataIndex: "workzoneName", title: "作业区", width: 150, }, { title: "QC单号", dataIndex: "qcOrderNo", condition: true, width: 150 }, { title: "申请检验时间", dataIndex: "createDate", width: 150, type: "datetime", align: "center", customRender: function (text) { if (text.record.createDate) return dayjs(text.record.createDate).format('YYYY-MM-DD HH:mm:ss') }, }, { title: "检验大类", dataIndex: "inspClass", type: "select", width: 100, condition: true, customRender: function (text) { if (text.record.inspClass) return inspColumns.value.find( (item) => item.value == text.record.inspClass ).text }, }, { title: "检验类型", dataIndex: "inspTypeName", width: 150, }, { title: "创建时间", dataIndex: "createDate", width: 150, type: "datetime", customRender: function (text) { if (text.record.createDate) return dayjs(text.record.createDate).format('YYYY-MM-DD HH:mm:ss') }, }, { title: "创建人", dataIndex: "createUserId", width: 120, type: "employeeDescription", options: { fieldNames: { label: "createUserName", value: "createUserId" } } }, { title: "管数量", dataIndex: "pipeNum", width: 80 }, { title: "状态", dataIndex: "status", type: "select", width: 80, condition: true, customRender: function (text) { if (text.record.status) { return statusOptions.value.find( (item) => item.value == text.record.status ).text } else { return '新建' } } }, { title: '操作', dataIndex: 'action', width: 140, key: 'action' } ] }) const loadData = (type) => { loading.value = true serve.getOrderList(searchState.value).then(async (res) => { for (let item of res.content) { item.targetStorageDate = item.targetStorageDate ? dayjs(item.targetStorageDate).format('YYYY-MM-DD') : '' item.isDownload = false let value = await localforage.getItem(item.id.toString()) if (value instanceof Blob && value.size > 0 && value.type === 'application/pdf') { item.isDownload = true } } if (type == 'scroll') { data.value.push(...res.content) } else { data.value = res.content } dataCount.value = res.totalElements || 0 isLast.value = res.last loading.value = false }) } const handleScroll = (e) => { const element = e.target if (element.scrollTop + element.clientHeight >= element.scrollHeight) { if (!isLast.value) { searchState.value.page++ loadData('scroll') } } } const openSearchDialog = () => { searchOpen.value = true } const handleProject = () => { projectType.value = true projectpanelRef.value.open = true projectpanelRef.value.init() } const handleBack = () => { projectType.value = false projectpanelRef.value.open = false } const handleClose = () => { projectType.value = false projectpanelRef.value.open = false } const handleDetailClose = () => { showDetailModal.value = false } const handleResize = () => { if (window.innerWidth < 1000) { popupWidth.value = '60%' } else { popupWidth.value = '30%' } } const getProj = (val) => { searchState.value.projectNo = val.projId searchState.value.projNo = val.projNo handleClose() } const onSearch = () => { searchState.value.page = 0 loadData() searchOpen.value = false } const onReset = () => { searchState.value.page = 0 searchState.value.projectNo = undefined searchState.value.projNo = undefined searchState.value.inspClass = undefined searchState.value.orderNo = undefined } const handleBeforeUnload = () => { if (!homePage.isOnline) { Modal.confirm({ title: '浏览器当前处于离线状态,是否继续?', icon: createVNode(ExclamationCircleOutlined), content: createVNode( 'div', { style: 'color:red;' }, '一旦刷新,将无法继续使用' ), onOk() { console.log('OK') }, onCancel() { console.log('Cancel') } }) } } watch( () => homePage.isOnline, async (newVal) => { if (!newVal) { try { const listData = await localforage.getItem('downloadList') if (listData) { const list = JSON.parse(listData) list.forEach((item) => { item.isDownload = true }) data.value = list } } catch (error) { console.error('Error parsing list data:', error) } } else { onReset() loadData() } } ) const onInspClassConfirm = ({ selectedOptions }) => { showPicker.value = false searchState.value.inspClass = selectedOptions[0].value } const handleInspClass = () => { showPicker.value = true } onMounted(() => { getBuildBase() serve.getWorkZone({majors:'管路'}).then((res) => { workZoneNos.value = res.status == 200 ? res.data.map((item) => { return { label: item.name, value: item.code, } }) : []; }) if (homePage.isOnline) { loadData() } handleResize() window.addEventListener('resize', handleResize) window.addEventListener('beforeunload', handleBeforeUnload) }) onUnmounted(() => { window.removeEventListener('resize', handleResize) window.removeEventListener('beforeunload', handleBeforeUnload) }) onActivated(async () => { if (!homePage.isOnline) { try { const listData = await localforage.getItem('downloadList') if (listData) { const list = JSON.parse(listData) list.forEach((item) => { item.isDownload = true }) data.value = list } } catch (error) { console.error('Error parsing list data:', error) } } }) const getBuildBase = () => { getBuildBases().then((res) => { buildBaseList.value = res.map((item) => ({ value: item.orgNo, text: item.name })) }) } const showData = (record,showTypeStr) => { serve.getOrderList({id:record.id}).then((res) => { console.log('res.data',res) console.log('res.data',res.data) console.log('res.data.content',res.content) saveData.value = res.content[0] saveData.value.mainUserNo = { label: saveData.value.mainUserName, value: saveData.value.mainUserNo } saveData.value.status = saveData.value.status+'' pipeTable.dataSource = res.content[0].pipeList console.log('pipeTable.dataSource',pipeTable.dataSource) weldTable.dataSource = res.content[0].weldList currProjectNo.value = res.content[0].projectNo showDetailModal.value = true showType.value = showTypeStr saveData.value.inspClassStr = inspColumns.value.find( (item) => item.value == saveData.value.inspClass ).text saveData.value.orgName = buildBaseList.value.find( (item) => item.value == saveData.value.orgNo ).text serve.getInsp({ projName: res.content[0].projectNo, professionNo: "CP" }).then((res) => { selectInsp.value = res.map((item) => { return { label: item.MSVALUE+"", value: item.MSKEY+"", } }) }) }) } const onConfirm = ({ selectedValues }) => { saveData.applyDate = selectedValues.join('-'); console.log('saveData.applyDate',saveData.applyDate) console.log('selectedValues',selectedValues) showDatePicker.value = false; }; const changeStatus = (stateNum,type)=>{ console.log('pipeTable',pipeTable.selectedRows) console.log('weldTable',weldTable.selectedRows) if(type === 'pipe' ){ if(pipeTable.selectedRows.length === 0 ){ showNotify({ type: 'danger', message: '请选择一条数据' }) return } pipeTable.dataSource = pipeTable.dataSource.map(item => { const selectedItem = pipeTable.selectedRows.find(row => row.id === item.id); return selectedItem ? { ...item, status: stateNum } : item; }); } if(type === 'weld'){ if(weldTable.selectedRows.length === 0 ){ showNotify({ type: 'danger', message: '请选择一条数据' }) return } weldTable.dataSource = weldTable.dataSource.map(item => { const selectedItem = weldTable.selectedRows.find(row => row.id === item.id); return selectedItem ? { ...item, status: stateNum } : item; }); } console.log('pipeTable.dataSource',pipeTable.dataSource) console.log('weldTable.dataSource',weldTable.dataSource) } const handleSave = () => { let param = cloneDeep(saveData.value) if(showType.value == 'result'){ param.editType = 1 param.id = saveData.value.id } else { param.getEditType = 0 if('edit' == showType.value){ param.id = saveData.value.id } } if (param.mainUserNo && param.mainUserNo.value) { param.mainUserName = param.mainUserNo.label param.mainUserNo = param.mainUserNo.value } else { param.mainUserNo = '' } param.pipeList = pipeTable.dataSource param.weldList = weldTable.dataSource serve.saveOrderList(param).then(() => { showNotify({ type: 'success', message: '操作成功' }) // if(type.value != 'result'){ showDetailModal.value = false // } }) } </script> <style lang="scss" scoped> :deep .urgentFlag-active { background: #ffb656; } :deep .abnormalFlag-active { background: #fb7171; } :deep .anticon-search { line-height: 0 !important; } </style> <style lang="scss" scoped> @import '@/styles/common.scss'; .search-content { width: 100%; overflow: hidden; // height: 100%; .search-top { width: 100%; height: 50px; margin-top: 20px; display: flex; justify-content: center; align-content: center; .search-project-back { font-size: 14px; display: flex; align-content: center; position: absolute; left: 10px; color: #004688; } .search-titles { height: 100%; display: flex; justify-content: center; align-content: center; color: #004688; span { font-size: 15px; margin-left: 5px; } } } .search-state { width: 100%; height: calc(100% - 45px - 10px); position: absolute; bottom: 0; overflow: hidden; overflow-y: scroll; } } .action-buttons { display: flex; align-items: center; justify-content: space-around; } </style> 点击申请检验后点击提出时间没有弹出日期选择框
09-17
您的代码中存在一个问题：日期选择器的弹出层被嵌套在另一个弹出层（`van-popup`）中，Vant UI 的弹出层组件在嵌套使用时需要特殊处理。以下是修复方案： ### 问题分析 1. 日期选择器被嵌套在 `showDetailModal` 弹...
<template> <div class="sec-container"> <van-popup teleport="body" v-model:show="showFeedbackModal" :style="{ width: '100%', height: '100%', overflow: 'auto' }" position="right" round closeable @close="handleFeedbackClose" > <!-- 炉批号--> <van-popup teleport="body" v-model:show="heatModal" :style="{ width: '100%', height: '100%', overflow: 'auto' }" position="right" round closeable @close="handleHeatClose" > <van-field v-model="heatData.heatNo" clearable @click="handleHeatNo" label="炉号" is-link readonly /> <van-field v-model="heatData.batchNo" clearable @click="handleBatchNo" label="批号" is-link readonly /> <div class="search-btn"> <van-button type="primary" @click="commitHeat" style="margin-left: 5px">提交</van-button> </div> </van-popup> <!-- 异常--> <van-popup teleport="body" v-model:show="exceptionModal" :style="{ width: '100%', height: '100%', overflow: 'auto' }" position="right" round closeable @close="handleExceptionModalClose" > <van-field v-model="exceptionParam.exceptionType" clearable @click="handleExceptionType" label="异常类型" is-link readonly /> <van-field v-model="exceptionParam.exceptionMsg" rows="3" autosize label="异常描述" type="textarea" maxlength="500" placeholder="请输入异常描述" show-word-limit /> <div class="search-btn"> <van-button type="primary" @click="commitException">提交</van-button> </div> </van-popup> <!-- 异常类型选择--> <van-popup teleport="body" v-model:show="showPicker" round position="bottom"> <van-picker :columns="exceptionTypeList" @cancel="showPicker = false" @confirm="onExceptionTypeConfirm" /> </van-popup> <!-- 炉号选择--> <van-popup teleport="body" v-model:show="showHeatNoPicker" round position="bottom"> <van-picker :columns="heatNoList" @cancel="showHeatNoPicker = false" @confirm="onHeatNoConfirm" /> </van-popup> <!-- 批号选择--> <van-popup teleport="body" v-model:show="showBatchNoPicker" round position="bottom"> <van-picker :columns="batchNoList" @cancel="showBatchNoPicker = false" @confirm="onBatchNoConfirm" /> </van-popup> <!-- root选择--> <van-popup teleport="body" v-model:show="showRootPicker" round position="bottom"> <van-picker :columns="rootBatchNoList" @cancel="showRootPicker = false" @confirm="onRootConfirm" /> </van-popup> <!-- fill选择--> <van-popup teleport="body" v-model:show="showFillPicker" round position="bottom"> <van-picker :columns="fillBatchNoList" @cancel="showFillPicker = false" @confirm="onFillConfirm" /> </van-popup> <!-- wps选择--> <van-popup teleport="body" v-model:show="showWpsModal" :style="{ width: '100%', height: '100%', overflow: 'auto' }" position="right" round closeable @close="handleWpsClose" > <a-table sticky style="width: 98%" :scroll="{ x: '100%' }" :columns="wpsColumns" :dataSource="addWpsData" bordered size="middle" :loading="loading" :pagination="false" rowKey="id" > <template #bodyCell="{ column, record }"> <template v-if="column.key === 'action'"> <a-button type="link" @click="addWps(record)" v-resource="[ { url: '/service-piping/cp/pipe/pre/work/order/detail', method: 'GET' } ]" >添加 </a-button > </template> </template> </a-table> </van-popup> <!-- 焊缝批号选择--> <van-popup teleport="body" v-model:show="showWeldHeatModal" :style="{ width: '100%', height: '100%', overflow: 'auto' }" position="right" round closeable @close="handleWeldHeatClose" > <van-field v-model="weldHeatData.rootBatchNo" clearable @click="handleRoot" label="打底" is-link readonly /> <van-field v-model="weldHeatData.fillBatchNo" clearable @click="handleFill" label="盖面" is-link readonly /> <div class="search-btn"> <van-button type="primary" @click="commitWeldHeat" style="margin-left: 5px">提交</van-button> </div> </van-popup> <!-- 新增小票明细--> <van-popup teleport="body" v-model:show="showCutFeedbackAddModal" :style="{ width: '100%', height: '100%', overflow: 'auto' }" position="right" round closeable @close="handleCutFeedbackAddClose" > <a-table sticky v-if="feedbackType === '下料' || feedbackType === '装配'" style="width: 98%" :scroll="{ x: '100%' }" :columns="cutColumns" :dataSource="addCutData" bordered size="middle" :loading="loading" :pagination="false" rowKey="id" > <template #bodyCell="{ column, record }"> <template v-if="column.key === 'action'"> <a-button type="link" @click="addData(record)" :disabled="record.canFeedback==false" v-resource="[ { url: '/service-piping/cp/pipe/pre/work/order/detail', method: 'GET' } ]" >添加 </a-button > </template> </template> </a-table> <a-table sticky v-if="feedbackType === '焊接'" style="width: 98%" :scroll="{ x: '100%' }" :columns="weldColumns" :dataSource="addWeldData" bordered size="middle" :loading="loading" :pagination="false" rowKey="id" > <template #bodyCell="{ column, record }"> <template v-if="column.key === 'action'"> <a-button type="link" @click="addData(record)" v-resource="[ { url: '/service-piping/cp/pipe/pre/work/order/detail', method: 'GET' } ]" >添加 </a-button > </template> </template> </a-table> </van-popup> <van-cell-group :title=" feedbackType === '下料' ? '管路下料反馈' : feedbackType === '装配' ? '管路装配反馈' : '管路焊接反馈' " > <van-field v-model="feedbackParam.workDate" is-link readonly clearable label="作业日期" placeholder="请选择作业日期" @click="showDatePicker = true" /> <van-field v-model="feedbackParam.remark" rows="3" autosize label="备注" type="textarea" maxlength="500" placeholder="请输入备注" show-word-limit /> <van-field v-model="feedbackParam.helperName" autosize label="协助人名" readonly v-if="feedbackType === '焊接'" /> <van-field v-model="feedbackParam.helperNo" label="协助人IC号" @input="inputHelperNo" placeholder="请输入协助人IC号" v-if="feedbackType === '焊接'" /> <div class="search-btn"> <van-button type="primary" @click="addFeedbackDetail" style="margin-left:5px;margin-right: 10px">添加物量 </van-button> <van-button type="primary" @click="commitFeedbackDetail">提交</van-button> <a-table sticky v-if="feedbackType === '下料'" :scroll="{ x: '100%' }" style="width: 98%" :columns="cutColumns" :dataSource="cutData" bordered size="middle" :loading="loading" :pagination="false" rowKey="id" > <template #bodyCell="{ column, record }"> <template v-if="column.key === 'action'"> <a-button type="link" @click="delCutData(record)" v-resource="[ { url: '/service-piping/cp/pipe/pre/work/order/detail', method: 'GET' } ]" >删除 </a-button > <a-button type="link" @click="saveException(record)" v-resource="[ { url: '/service-piping/cp/pipe/pre/work/order/detail', method: 'GET' } ]" >异常上报 </a-button > </template> </template> </a-table> <a-table sticky v-if="feedbackType === '装配'" :scroll="{ x: '100%' }" style="width: 98%" :columns="assyColumns" :dataSource="partData" bordered size="middle" :loading="loading" :pagination="false" rowKey="id" > <template #bodyCell="{ column, record }"> <template v-if="column.key === 'action'"> <a-button type="link" @click="delAssyData(record)" v-resource="[ { url: '/service-piping/cp/pipe/pre/work/order/detail', method: 'GET' } ]" >删除 </a-button > <a-button type="link" @click="saveException(record)" v-resource="[ { url: '/service-piping/cp/pipe/pre/work/order/detail', method: 'GET' } ]" >异常上报 </a-button > <a-button type="link" @click="saveHeat(record)" v-resource="[ { url: '/service-piping/cp/pipe/pre/work/order/detail', method: 'GET' } ]" >选择炉批号 </a-button > </template> </template> </a-table> <a-table sticky v-if="feedbackType === '装配' || feedbackType === '焊接'" :scroll="{ x: '100%' }" style="width: 98%" :columns="weldingColumns" :dataSource="weldData" bordered size="middle" :loading="loading" :pagination="false" rowKey="id" > <template #bodyCell="{ column, record }"> <template v-if="column.key === 'action'"> <a-button type="link" @click="delWeldData(record)" v-resource="[ { url: '/service-piping/cp/pipe/pre/work/order/detail', method: 'GET' } ]" >删除 </a-button > <a-button type="link" @click="saveException(record)" v-resource="[ { url: '/service-piping/cp/pipe/pre/work/order/detail', method: 'GET' } ]" >异常上报 </a-button > <a-button type="link" @click="saveWps(record)" v-if="feedbackType === '焊接'" v-resource="[ { url: '/service-piping/cp/pipe/pre/work/order/detail', method: 'GET' } ]" >选择WPS NO </a-button > <a-button type="link" @click="saveWeldHeat(record)" v-if="feedbackType === '焊接'" v-resource="[ { url: '/service-piping/cp/pipe/pre/work/order/detail', method: 'GET' } ]" >选择批号 </a-button > </template> </template> </a-table> </div> </van-cell-group> <van-calendar v-model:show="showDatePicker" @confirm="onDateConfirm"/> </van-popup> <van-popup teleport="body" v-model:show="showDetailModal" :style="{ width: '100%', height: '100%', overflow: 'auto' }" position="right" round closeable @close="handleDetailClose" > <van-cell-group title="管路下料数据" v-if="detailType === '下料'"> <van-field name="projectNo" label="项目"> <template #input> {{ detailTable.dataSource.length > 0 ? detailTable.dataSource[0].printName : '' }} </template> </van-field> <van-field name="inspClass" label="派工单号"> <template #input> {{ detailTable.dataSource.length > 0 ? detailTable.dataSource[0].orderNo : '' }} ({{ detailTable.dataSource.length > 0 ? detailTable.dataSource[0].shopMatOrderNo : '' }}) </template> </van-field> </van-cell-group> <van-cell-group title="材料清单" v-if="detailType === '装配'"> <van-field name="projectNo" label="项目"> <template #input> {{ detailTable.dataSource.length > 0 ? detailTable.dataSource[0].projectNo : '' }} </template> </van-field> <van-field name="inspClass" label="派工单号"> <template #input> {{ detailData.orderNo }}</template> </van-field> <van-field name="inspClass" label="下料领料单"> <template #input> {{ detailData.cutMatListNo }}</template> </van-field> <van-field name="inspClass" label="装配领料单"> <template #input> {{ detailData.assyMatListNo }}</template> </van-field> </van-cell-group> <van-cell-group title="装配套料件材料清单" v-if="detailType === 'nesting'"> <van-field name="inspClass" label="派工单号"> <template #input> {{ detailTable.dataSource.length > 0 ? detailTable.dataSource[0].orderNo : '' }} </template> </van-field> </van-cell-group> <van-form ref="addCommentsFormRef" @submit="handleSave"> <a-table sticky :scroll="{ x: '100%' }" :columns=" detailType == 'show' ? detailTable.columns : detailType == '下料' ? detailTable.cutColumns : detailType == '装配' ? detailTable.assyColumns : detailTable.nestingColumns " style="width: 98%" :dataSource="detailTable.dataSource" bordered size="middle" :loading="loading" :pagination="false" rowKey="id" ref="detailTableRef" > </a-table> </van-form> </van-popup> <div class="top-content"> <div class="project-content"> <div class=""></div> </div> <div class="btn-content"> <div class="btn-right" @click="openSearchDialog"> <SearchOutlined style="font-size: 20px; color: #004688"/> <p class="speNorm">搜索</p> </div> </div> </div> <div class="bot-content" @scroll="handleScroll"> <a-table sticky :scroll="{ x: '100%' }" :columns="columns" :dataSource="data" bordered size="middle" :loading="loading" :pagination="false" rowKey="id" > <template #bodyCell="{ column, record }"> <template v-if="column.key === 'action'"> <a-button type="link" @click="showData(record, 'show')" v-resource="[{ url: '/service-piping/cp/pipe/pre/work/order/detail', method: 'GET' }]" >查看 </a-button > <a-button type="link" @click="showData(record, '下料')" v-resource="[{ url: '/service-piping/cp/pipe/pre/work/order/detail', method: 'GET' }]" >下料单 </a-button > <a-button type="link" @click="showData(record, '装配')" v-resource="[{ url: '/service-piping/cp/pipe/pre/work/order/detail', method: 'GET' }]" >材料单 </a-button > <a-button type="link" @click="showData(record, 'nesting')" v-resource="[{ url: '/service-piping/cp/pipe/pre/work/order/detail', method: 'GET' }]" >套料件材料单 </a-button > <a-button type="link" @click="feedback(record, '下料')" v-resource="[{ url: '/service-piping/cp/pipe/pre/work/order/detail', method: 'GET' }]" >下料反馈 </a-button > <a-button type="link" @click="feedback(record, '装配')" v-resource="[{ url: '/service-piping/cp/pipe/pre/work/order/detail', method: 'GET' }]" >装配反馈 </a-button > <a-button type="link" @click="feedback(record, '焊接')" v-resource="[{ url: '/service-piping/cp/pipe/pre/work/order/detail', method: 'GET' }]" >焊接反馈 </a-button > </template> </template> </a-table> </div> <van-popup teleport="body" v-model:show="searchOpen" position="right" :style="{ width: popupWidth, height: '100%', overflow: 'hidden' }" round closeable @close="handleDetailClose" > <div class="search-content"> <div class="search-top"> <div class="search-project-back" v-if="projectType" @click="handleBack"> <LeftOutlined style="font-size: 15px; color: #004688; margin-top: 3px"/> 返回 </div> <div class="search-titles"> <span>{{ !projectType ? '搜索' : '搜索项目' }}</span> </div> </div> <div class="search-state"> <van-cell-group inset> <van-field v-model="searchState.projectNo" clearable label="项目" readonly @click="handleProject" /> <van-field v-model="searchState.orderNo" clearable label="派工单号" placeholder="请输入派工单号" /> </van-cell-group> <project-panel ref="projectpanelRef" @get="getProj"></project-panel> </div> <div class="search-btn"> <van-button type="warning" color="#9A9A9A" @click="onReset">重置</van-button> <van-button type="primary" @click="onSearch">查询</van-button> </div> </div> </van-popup> </div> </template> <script setup> import { ref, onMounted, onUnmounted, onActivated, computed, watch, createVNode, reactive } from 'vue' import {SearchOutlined, LeftOutlined, ExclamationCircleOutlined} from '@ant-design/icons-vue' import * as serve from '@/api/cp/pipeOrderInfo' import ProjectPanel from '@/components/ProjectPanel.vue' import dayjs from 'dayjs' import {Buffer} from 'buffer' import localforage from 'localforage' import {useHomePage} from '@/stores/homePage' import {Modal} from 'ant-design-vue' import {getBuildBases} from '@/api/common/index.js' import {showConfirmDialog, showNotify} from 'vant' import {cloneDeep} from 'lodash-es' const showFillPicker = ref(false) const showRootPicker = ref(false) const submitting = ref(false) const orgNo = ref(undefined) const orderNo = ref(undefined) const projectNo = ref(undefined) const pipeNo = ref(undefined) const pipeVersion = ref(undefined) const showDatePicker = ref(false) const feedbackParam = ref({}) const exceptionParam = ref({}) const detailData = ref({}) const applyDate = ref(undefined) const weldTable = reactive({ toolbar: { // buttons: [{ code: "addCar", name: "添加物料" }] }, resToolbar: { buttons: [ {code: 'qualifiedWeld', name: '合格'}, {code: 'unqualifiedWeld', name: '不合格'}, {code: 'cancelWeld', name: '取消'} ] }, selectedRowKeys: [], selectedRows: [], columns: [ { title: '管号', dataIndex: 'pipeNo', width: 120 }, { title: '焊缝号', dataIndex: 'weldNo', width: 150 }, { title: '焊缝长度', dataIndex: 'length', width: 150 }, { title: '焊接日期', type: 'date', dataIndex: 'weldDate', width: 150 } // { // title: "操作", // key: "action", // align: "center", // width: 90, // sorter: false, // scopedSlots: { customRender: "action" }, // fixed: "right", // formInvisible: true // } ], resColumns: [ { title: '项目', dataIndex: 'projectNo', width: 90, type: 'project' }, { title: '管号', dataIndex: 'pipeNo', width: 120 }, { title: '版本号', dataIndex: 'pipeVersion', width: 120 }, { title: '焊缝号', dataIndex: 'weldNo', width: 150 }, { title: '检验结果', dataIndex: 'status', type: 'select', width: 80, customRender: function (text) { if (text.record.status) { return stateColumns.value.find((item) => item.value == text.record.status).text } else { return '新建' } } }, { title: '小票删除', dataIndex: 'pipeDelFlag', width: 80 }, { title: '小票暂停', dataIndex: 'pipePauseFlag', width: 80 }, { title: '小票最新版', dataIndex: 'pipeTopFlag', width: 80 }, { title: '焊缝删除', dataIndex: 'delFlag', width: 80 }, { title: '操作', key: 'action', align: 'center', width: 200, sorter: false, scopedSlots: {customRender: 'action'}, fixed: 'right', formInvisible: true } ], dataSource: [] }) const detailType = ref('') const feedbackType = ref('') const showType = ref('') window.Buffer = Buffer const homePage = useHomePage() const saveData = ref({}) const stateColumns = ref([ {value: 0, text: '新建'}, {value: -1, text: '不合格'}, {value: 1, text: '检验中'}, {value: 2, text: '合格'} ]) const showDetailModal = ref(false) const showFeedbackModal = ref(false) const showCutFeedbackAddModal = ref(false) const showWpsModal = ref(false) const showWeldHeatModal = ref(false) const showPicker = ref(false) const showHeatNoPicker = ref(false) const showBatchNoPicker = ref(false) const buildBaseList = ref([]) const data = ref([]) const cutData = ref([]) const partData = ref([]) const weldData = ref([]) const addCutData = ref([]) // const addPartData = ref([]) const loading = ref(false) const dataCount = ref(0) const searchState = ref({ size: 20, page: 0, projectNo: undefined, inspClass: undefined, orderNo: undefined }) const searchOpen = ref(false) const projectpanelRef = ref(null) const projectType = ref(false) const popupWidth = ref('30%') const isLast = ref(false) const detailTable = reactive({ toolbar: { buttons: [{code: 'addPipe', name: '添加物料'}] }, resToolbar: { buttons: [ {code: 'qualifiedPipe', name: '合格'}, {code: 'unqualifiedPipe', name: '不合格'}, {code: 'cancelPipe', name: '取消'} ] }, selectedRowKeys: [], selectedRows: [], columns: [ { title: '项目', dataIndex: 'projectNo', width: 50, condition: true, type: 'project', options: { options: [], fieldNames: {label: 'projId', value: 'projId'} } }, { title: '图号', dataIndex: 'drawNo', width: 170 }, { title: '作业对象', dataIndex: 'block', width: 70 }, { title: '小票号', dataIndex: 'pipeNo', width: 150 }, { title: '版本号', dataIndex: 'pipeVersion', width: 60 }, { title: '最新版', dataIndex: 'isTopVersion', width: 60, type: 'select', options: { options: [ {label: 'Y', value: 'Y'}, {label: 'N', value: 'N'} ] } }, { title: '是否删除', dataIndex: 'isDelete', width: 80, type: 'select', options: { options: [ {label: 'Y', value: 'Y'}, {label: 'N', value: 'N'} ] } }, { title: '是否暂停', dataIndex: 'isPause', width: 80, type: 'select', options: { options: [ {label: 'Y', value: 'Y'}, {label: 'N', value: 'N'} ] } }, { title: '下料定额工时', dataIndex: 'cutQuotaWorkhour', width: 100 }, { title: '装配定额工时', dataIndex: 'assyQuotaWorkhour', width: 100 }, { title: '焊接定额工时', dataIndex: 'weldingQuotaWorkhour', width: 100 }, { title: '下料完成时间', dataIndex: 'realCutFinishDate', type: 'date', width: 100 }, { title: '装配完成时间', dataIndex: 'realAssyFinishDate', type: 'date', width: 100 }, { title: '焊接完成时间', dataIndex: 'realWeldingFinishDate', type: 'date', width: 100 } ], assyColumns: [ { title: '管号', dataIndex: 'pipeNo', width: 90 }, { title: '页号', dataIndex: 'pageNo', width: 90 }, { title: '件号', dataIndex: 'partNo', width: 90 }, { title: '零件描述', dataIndex: 'erpMatDesc', width: 90 }, { title: '物资编码', dataIndex: 'matNo', width: 90 }, { title: '物资描述', dataIndex: 'matDesp', width: 90 }, { title: '零件备注', dataIndex: 'cutRemark', width: 90 }, { title: '涂装代码', dataIndex: 'paintNo', width: 90 }, { title: '总', dataIndex: 'total', width: 90 }, { title: '需求', dataIndex: 'needNum', width: 90 }, { title: '使用余料', dataIndex: 'isUsedShopMat', width: 90 } ], nestingColumns: [ { title: '图纸号', dataIndex: 'drawNo', width: 90 }, { title: '管号', dataIndex: 'pipeNo', width: 90 }, { title: '件号', dataIndex: 'partNo', width: 90 }, { title: '零件描述', dataIndex: 'matDesp', width: 90 }, { title: '套料图号', dataIndex: 'cutBomPrintNo', width: 90 }, { title: '套料件号', dataIndex: 'partNumber', width: 90 }, { title: '材质', dataIndex: 'material', width: 90 }, { title: '板厚', dataIndex: 'partThickness', width: 90 }, { title: 'CJP', dataIndex: 'cjp', width: 90 }, { title: '筐号', dataIndex: 'basketNo', width: 90 } ], cutColumns: [ { title: '分段', dataIndex: 'block', width: 90 }, { title: '图纸号', dataIndex: 'drawNo', width: 120 }, { title: '小票号', dataIndex: 'pipeNo', width: 120 }, { title: '等级', dataIndex: 'pipeClass', width: 80 }, { title: '材料名', dataIndex: 'materialDesp', width: 80 }, { title: '页数', dataIndex: 'pageNo', width: 80 }, { title: '管段', dataIndex: 'info', width: 80 }, { title: '管长MM', dataIndex: 'length', width: 80 }, { title: '弯管', dataIndex: 'groove', width: 80 }, { title: '备注', dataIndex: 'cutRemark', width: 80 }, { title: '炉号', dataIndex: 'heatNo', width: 80 }, { title: '通舱件', dataIndex: 'isThroughCabin', width: 80 }, { title: '修改方式', dataIndex: 'modifyType', width: 80 } ], dataSource: [] }) const columns = computed(() => { return [ { title: '操作', dataIndex: 'action', width: 140, key: 'action' }, { title: '派工单号', dataIndex: 'orderNo', width: 120, condition: true }, { title: '基地', dataIndex: 'orgNo', type: 'buildCase', width: 80, condition: true }, { title: '总长度', dataIndex: 'totalLength', width: 70 }, { title: '总重量', dataIndex: 'totalWeight', width: 70 }, { title: '总寸口数', dataIndex: 'totalInch', width: 80 }, { title: '物量统计', dataIndex: 'pipeCount', width: 80 }, { title: '下料工位号', dataIndex: 'cutWorkSpaceNo', width: 80 }, { title: '下料开始日期', dataIndex: 'cutStartDate', type: 'date', width: 100 }, { title: '下料结束日期', dataIndex: 'cutEndDate', type: 'date', width: 100 }, { title: '下料状态', dataIndex: 'cutStatus', width: 80, type: 'select', options: { options: [ {value: 'Y', label: 'Y'}, {value: 'N', label: 'N'} ] } }, { title: '装配工位号', dataIndex: 'assyWorkSpaceNo', width: 80 }, { title: '装配工位类型', dataIndex: 'assyWorkSpaceType', width: 100 }, { title: '装配开始日期', dataIndex: 'assyStartDate', type: 'date', width: 100 }, { title: '装配结束日期', dataIndex: 'assyEndDate', type: 'date', width: 100 }, { title: '装配状态', dataIndex: 'assyStatus', width: 80, type: 'select', options: { options: [ {value: 'Y', label: 'Y'}, {value: 'N', label: 'N'} ] } }, { title: '焊接工位号', dataIndex: 'weldingWorkSpaceNo', width: 80 }, { title: '焊接工位类型', dataIndex: 'weldingWorkSpaceType', width: 100 }, { title: '焊接开始日期', dataIndex: 'weldingStartDate', type: 'date', width: 100 }, { title: '焊接结束日期', dataIndex: 'weldingEndDate', type: 'date', width: 100 }, { title: '焊接状态', dataIndex: 'weldingStatus', width: 80, type: 'select', options: { options: [ {value: 'Y', label: 'Y'}, {value: 'N', label: 'N'} ] } }, { title: '派工单状态', dataIndex: 'status', width: 100, type: 'select', formatter: (data) => data.cellValue == -1 ? '作废' : data.cellValue == 0 ? '新建' : data.cellValue == 1 ? '作业中' : data.cellValue == 2 ? '已完成' : '', options: { options: [ {value: -1, label: '作废'}, {value: 0, label: '新建'}, {value: 1, label: '作业中'}, {value: 2, label: '已完成'} ] } }, { title: '下料领料单号', dataIndex: 'cutMatListNo', width: 120 }, { title: '装配领料单号', dataIndex: 'assyMatListNo', width: 120 }, { title: '创建人', dataIndex: 'createUserNo', type: 'employeeDescription', options: { fieldNames: { label: 'createUserName', value: 'createUserNo' } }, width: 110 }, { title: '创建时间', dataIndex: 'createDataDate', formatter: ({row}) => { return row.createDate ? dayjs(row.createDate).format('YYYY-MM-DD') : '-' }, width: 80, invisible: false, type: 'date' } ] }) const weldColumns = computed(() => { return [ { title: '操作', dataIndex: 'action', width: 140, key: 'action' }, { title: '项目', dataIndex: 'projectNo', width: 50, type: 'project', options: { options: [], fieldNames: {label: 'projId', value: 'projId'} } }, { title: '小票号', dataIndex: 'pipeNo', width: 150 }, { title: '版本号', dataIndex: 'pipeVersion', width: 60 }, { title: '焊缝号', dataIndex: 'weldNo', width: 170 }, { title: '描述', dataIndex: 'notFeedbackMsg', width: 80 } ] }) const cutColumns = computed(() => { return [ { title: '操作', dataIndex: 'action', width: 140, key: 'action' }, { title: '项目', dataIndex: 'projectNo', width: 50, type: 'project' }, { title: '小票号', dataIndex: 'pipeNo', condition: true, width: 150 }, { title: '版本号', condition: true, dataIndex: 'pipeVersion', width: 60 }, { title: '描述', dataIndex: 'notFeedbackMsg', width: 80 } ] }) const assyColumns = computed(() => { return [ { title: '操作', dataIndex: 'action', width: 140, key: 'action' }, { title: '项目', dataIndex: 'projectNo', width: 50 }, { title: '小票号', dataIndex: 'pipeNo', width: 150 }, { title: '版本号', dataIndex: 'pipeVersion', width: 60 }, { title: '零件号', dataIndex: 'partNo', width: 100 }, { title: '物资编码', dataIndex: 'matNo', width: 100 }, { title: '零件规格', dataIndex: 'partSize', width: 100 }, { title: '炉号', dataIndex: 'heatNo', width: 120 }, { title: '批号', dataIndex: 'batchNo', width: 120 } ] }) const weldingColumns = computed(() => { const baseColumns = [ {title: '操作', dataIndex: 'action', width: 140, key: 'action'}, {title: '项目', dataIndex: 'projectNo', width: 50}, {title: '小票号', dataIndex: 'pipeNo', width: 150}, {title: '版本号', dataIndex: 'pipeVersion', width: 60}, {title: '焊缝号', dataIndex: 'weldNo', width: 170} ]; // 只在焊接反馈时添加焊接相关列 if (feedbackType.value === '焊接') { return [ ...baseColumns, {title: 'WPS NO', dataIndex: 'wpsNo', width: 80}, {title: '焊接方法', dataIndex: 'weldProcess', width: 100}, {title: '焊材规格', dataIndex: 'weldingMatSpec', width: 150}, { title: '批号', children: [ {title: '打底', dataIndex: 'rootBatchNo', width: 60}, {title: '盖面', dataIndex: 'fillBatchNo', width: 60} ], width: 120 }, { title: '证书', children: [ {title: '打底', dataIndex: 'rootWeldCert', width: 60}, {title: '盖面', dataIndex: 'fillWeldCert', width: 60} ], width: 120 } ]; } return baseColumns; }) const exceptionTypeList = ref([]) const heatNoList = ref([]) const batchNoList = ref([]) const exceptionModal = ref(false) const heatModal = ref(false) const heatData = ref({}) const partInfo = ref({}) const addWeldData = ref([]) const currentWeldData = ref({}) const addWpsData = ref([]) const wpsColumns = computed(() => { return [ { title: '操作', dataIndex: 'action', width: 140, key: 'action' }, { title: 'WPS NO', dataIndex: 'wpsNo', width: 80 }, { title: '焊接方法', dataIndex: 'process', width: 80 }, { title: '焊材规格', dataIndex: 'grade', width: 80 }, { title: '焊接类型', dataIndex: 'type', width: 80 } ] }) const rootBatchNoList = ref([]) const fillBatchNoList = ref([]) const rootBatchNoOldList = ref([]) const fillBatchNoOldList = ref([]) const weldHeatData = ref({}) const onDateConfirm = (val) => { let resDate = dayjs(val).format('YYYY-MM-DD') feedbackParam.value.workDate = resDate showDatePicker.value = false } const loadData = (type) => { loading.value = true serve.getOrderList(searchState.value).then(async (res) => { if (type == 'scroll') { data.value.push(...res.content) } else { data.value = res.content } dataCount.value = res.totalElements || 0 isLast.value = res.last loading.value = false }) } const handleScroll = (e) => { const element = e.target if (element.scrollTop + element.clientHeight >= element.scrollHeight) { if (!isLast.value) { searchState.value.page++ loadData('scroll') } } } const openSearchDialog = () => { searchOpen.value = true } const handleProject = () => { projectType.value = true projectpanelRef.value.open = true projectpanelRef.value.init() } const handleBack = () => { projectType.value = false projectpanelRef.value.open = false } const handleClose = () => { projectType.value = false projectpanelRef.value.open = false } const handleDetailClose = () => { showDetailModal.value = false } const handleFeedbackClose = () => { showFeedbackModal.value = false } const handleCutFeedbackAddClose = () => { showCutFeedbackAddModal.value = false } const handleWpsClose = () => { showWpsModal.value = false } const handleWeldHeatClose = () => { weldHeatData.value = {} showWeldHeatModal.value = false } const handleExceptionModalClose = () => { exceptionModal.value = false } const handleHeatClose = () => { heatModal.value = false } const handleResize = () => { if (window.innerWidth < 1000) { popupWidth.value = '60%' } else { popupWidth.value = '30%' } } const getProj = (val) => { searchState.value.projectNo = val.projId searchState.value.projNo = val.projNo handleClose() } const onSearch = () => { searchState.value.page = 0 loadData() searchOpen.value = false } const onReset = () => { searchState.value.page = 0 searchState.value.projectNo = undefined searchState.value.projNo = undefined searchState.value.inspClass = undefined searchState.value.orderNo = undefined } const handleBeforeUnload = () => { if (!homePage.isOnline) { Modal.confirm({ title: '浏览器当前处于离线状态,是否继续?', icon: createVNode(ExclamationCircleOutlined), content: createVNode( 'div', { style: 'color:red;' }, '一旦刷新,将无法继续使用' ), onOk() { console.log('OK') }, onCancel() { console.log('Cancel') } }) } } watch( () => homePage.isOnline, async (newVal) => { if (!newVal) { try { const listData = await localforage.getItem('downloadList') if (listData) { const list = JSON.parse(listData) list.forEach((item) => { item.isDownload = true }) data.value = list } } catch (error) { console.error('Error parsing list data:', error) } } else { onReset() loadData() } } ) onMounted(() => { getBuildBase() if (homePage.isOnline) { loadData() } serve.getDislist({code: 'CP_EXCEPTION_TYPE'}).then((res) => { exceptionTypeList.value = res.map((item) => ({ text: item.name, value: item.name })) }) handleResize() window.addEventListener('resize', handleResize) window.addEventListener('beforeunload', handleBeforeUnload) }) onUnmounted(() => { window.removeEventListener('resize', handleResize) window.removeEventListener('beforeunload', handleBeforeUnload) }) onActivated(async () => { if (!homePage.isOnline) { try { const listData = await localforage.getItem('downloadList') if (listData) { const list = JSON.parse(listData) list.forEach((item) => { item.isDownload = true }) data.value = list } } catch (error) { console.error('Error parsing list data:', error) } } }) const getBuildBase = () => { getBuildBases().then((res) => { buildBaseList.value = res.map((item) => ({ value: item.orgNo, text: item.name })) }) } const feedback = (record, type) => { console.log('feedbackType', type) feedbackType.value = type feedbackParam.value = {} orgNo.value = record.orgNo orderNo.value = record.orderNo projectNo.value = record.projectNo if (type == '下料') { cutData.value = [] } else if (type == '装配') { partData.value = [] weldData.value = [] } else if (type == '焊接') { weldData.value = [] } console.log('record', record) console.log('orderNo.value', orderNo.value) showFeedbackModal.value = true } const showData = (record, showTypeStr) => { detailType.value = showTypeStr orderNo.value = record.orderNo console.log('detailType.value', detailType.value) if (showTypeStr == 'show') { serve .getOrderDetail({ orderNo: record.orderNo, projectNo: record.projectNo }) .then((res) => { console.log(res) detailTable.dataSource = res showDetailModal.value = true }) } else if (showTypeStr == '下料') { serve.getPreCutWorkOrderPrintList({orderNo: record.orderNo}).then((res) => { if (!res.error) { detailData.value = res[0] detailTable.dataSource = res[0].matList console.log('res', res[0]) console.log('res.matList', res[0].matList) showDetailModal.value = true } }) } else if (showTypeStr == '装配') { serve.getPreAssyWorkOrderPrintList({orderNo: record.orderNo}).then((res) => { if (!res.error) { detailData.value = res detailTable.dataSource = res.matList console.log('res', res) console.log('res.matList', res.matList) showDetailModal.value = true } }) } else if (showTypeStr == 'nesting') { serve.getPreNestingPartPrintList({orderNo: record.orderNo}).then((res) => { if (!res.error) { detailTable.dataSource = res console.log('res', res) showDetailModal.value = true } }) } } const handleSave = () => { if (showType.value == 'qcOrder') { console.log('applyDate', applyDate.value) let saveApplyData = {id: saveData.value.id, applyDate: dayjs(applyDate.value)} if (!saveApplyData.applyDate) { showNotify({ type: 'success', message: '请选择日期' }) return } serve.applyOrder(saveApplyData).then(() => { showNotify({ type: 'success', message: '操作成功' }) }) } else { let param = cloneDeep(saveData.value) if (showType.value == 'result') { param.editType = 1 param.id = saveData.value.id } else { param.getEditType = 0 if ('edit' == showType.value) { param.id = saveData.value.id } } if (param.mainUserNo && param.mainUserNo.value) { param.mainUserName = param.mainUserNo.label param.mainUserNo = param.mainUserNo.value } else { param.mainUserNo = '' } param.pipeList = detailTable.dataSource param.weldList = weldTable.dataSource serve.saveOrderList(param).then(() => { showNotify({ type: 'success', message: '操作成功' }) // if(type.value != 'result'){ showDetailModal.value = false // } }) } } const addFeedbackDetail = () => { if (feedbackType.value == '下料') { serve.findCutNotFeedbackPipe({orderNo: orderNo.value}).then((res) => { addCutData.value = res }) } else if (feedbackType.value == '装配') { serve.findAssyNotFeedbackPipe({orderNo: orderNo.value}).then((res) => { addCutData.value = res }) } else if (feedbackType.value == '焊接') { serve.findWeldingNotFeedbackPipe({orderNo: orderNo.value}).then((res) => { addWeldData.value = res }) } showCutFeedbackAddModal.value = true } const addData = (record) => { console.log('record', record) let dataSource = [] if (feedbackType.value == '下料') { dataSource = cutData.value } else if (feedbackType.value == '装配') { dataSource = partData.value } else if (feedbackType.value == '焊接') { dataSource = weldData.value } let isExist = true if (feedbackType.value == '焊接') { isExist = dataSource.some( (dataItem) => dataItem.projectNo === record.projectNo && dataItem.pipeNo === record.pipeNo && dataItem.pipeVersion === record.pipeVersion && dataItem.weldNo === record.weldNo ) } else { isExist = dataSource.some( (dataItem) => dataItem.projectNo === record.projectNo && dataItem.pipeNo === record.pipeNo && dataItem.pipeVersion === record.pipeVersion ) } if (isExist) { showNotify({type: 'danger', message: '此条数据已添加到反馈清单！'}) return } else { if (feedbackType.value == '下料') { cutData.value.push(record) showNotify({type: 'success', message: '添加成功！'}) } else if (feedbackType.value == '装配') { console.log('装配') console.log('record.partData.value', partData.value) console.log('record.preFeedbackPartList', record.preFeedbackPartList) if (record.preFeedbackPartList.length > 0) { partData.value.push(...record.preFeedbackPartList) } if (record.preFeedbackWeldList.length > 0) { weldData.value.push(...record.preFeedbackWeldList) } showNotify({type: 'success', message: '添加成功！'}) } else if (feedbackType.value == '焊接') { weldData.value.push(record) showNotify({type: 'success', message: '添加成功！'}) } } } const delCutData = (record) => { cutData.value = cutData.value.filter((x) => { return !( x.projectNo === record.projectNo && x.pipeNo === record.pipeNo && x.pipeVersion === record.pipeVersion ) }) } const delAssyData = (record) => { showConfirmDialog({ title: '请确认是否要进行删除', message: '该操作一旦执行无法撤回，并将删除该小票的所有零件？', confirmButtonText: '确认', cancelButtonText: '取消' }).then(() => { partData.value = partData.value.filter((x) => { return !( x.projectNo === record.projectNo && x.pipeNo === record.pipeNo && x.pipeVersion === record.pipeVersion ) }) }) } const delWeldData = (record) => { weldData.value = weldData.value.filter((x) => { return !( x.projectNo === record.projectNo && x.pipeNo === record.pipeNo && x.pipeVersion === record.pipeVersion && x.weldNo === record.weldNo ) }) } const handleExceptionType = () => { showPicker.value = true } const handleHeatNo = () => { showHeatNoPicker.value = true } const handleRoot = () => { showRootPicker.value = true } const handleFill = () => { showFillPicker.value = true } const handleBatchNo = () => { showBatchNoPicker.value = true } const onExceptionTypeConfirm = ({selectedOptions}) => { showPicker.value = false exceptionParam.value.exceptionType = selectedOptions[0].value console.log('exceptionParam', exceptionParam.value) } const commitException = () => { console.log('exceptionParam', exceptionParam.value) const submitData = [ { projectNo: projectNo.value, bomNo: pipeNo.value, bomVersion: pipeVersion.value, orgNo: orgNo.value, exceptionType: exceptionParam.value.exceptionType, exceptionMsg: exceptionParam.value.exceptionMsg } ] serve.postExceptionManage(submitData).then(() => { showNotify({type: 'success', message: '上报成功！'}) exceptionModal.value = false }) } const saveException = (record) => { console.log('record', record) exceptionParam.value = {} projectNo.value = record.projectNo pipeNo.value = record.pipeNo pipeVersion.value = record.pipeVersion exceptionModal.value = true } const commitFeedbackDetail = () => { if (submitting.value) return submitting.value = true const submitData = { orderNo: orderNo.value, process: feedbackType.value, workDate: feedbackParam.value.workDate, remark: feedbackParam.value.remark, helperNo: feedbackParam.value.helperNo ? feedbackParam.value.helperNo : '', pipeList: cutData.value, partList: partData.value, weldList: weldData.value } let apiPromise if (feedbackType.value == '下料') { if (cutData.value.length == 0) { showNotify({type: 'danger', message: '请选择下料数据！'}) submitting.value = false return } apiPromise = serve.cutFeedback(submitData) } else if (feedbackType.value == '装配') { if (partData.value.length == 0) { showNotify({type: 'danger', message: '请选择零件数据！'}) submitting.value = false return } const pipeMap = new Map() cutData.value.forEach((pipeItem) => { const key = `${pipeItem.projectNo}-${pipeItem.pipeNo}-${pipeItem.pipeVersion}` pipeMap.set(key, { ...pipeItem, weldList: [] }) }) weldData.value.forEach((weldItem) => { const key = `${weldItem.projectNo}-${weldItem.pipeNo}-${weldItem.pipeVersion}` if (pipeMap.has(key)) { pipeMap.get(key).weldList.push(weldItem) } }) submitData.pipeList = Array.from(pipeMap.values()) delete submitData.weldList apiPromise = serve.assyFeedback(submitData) } else if (feedbackType.value == '焊接') { if (weldData.value.length == 0) { showNotify({type: 'danger', message: '请选择焊接数据！'}) submitting.value = false return } apiPromise = serve.weldingFeedback(submitData) } apiPromise .then(() => { showNotify({type: 'success', message: '反馈成功！'}) showFeedbackModal.value = false }) .finally(() => { submitting.value = false }) } const saveHeat = (record) => { console.log('saveHeat', record) heatData.value = {} partInfo.value = record heatNoList.value = [] serve.findHeatDropList({heatNo: '', matNo: record.matNo}).then((res) => { heatNoList.value = res.map((item) => ({ value: item, text: item })) }) heatModal.value = true } const onHeatNoConfirm = ({selectedOptions}) => { showHeatNoPicker.value = false heatData.value.heatNo = selectedOptions[0].value batchNoList.value = [] serve .findBatchDropList({batchNo: '', matNo: partInfo.value.matNo, heatNo: heatData.value.heatNo}) .then((res) => { batchNoList.value = res.map((item) => ({ value: item, text: item })) }) console.log('heatData.value', heatData.value) } const onBatchNoConfirm = ({selectedOptions}) => { showBatchNoPicker.value = false heatData.value.batchNo = selectedOptions[0].value console.log('heatData.value', heatData.value) } const commitHeat = () => { partData.value.forEach((x) => { if (x.id === partInfo.value.id) { x.heatNo = heatData.value.heatNo x.batchNo = heatData.value.batchNo } }) showNotify({ type: 'success', message: '操作成功' }) heatModal.value = false } const inputHelperNo = () => { console.log('feedbackParam.helperNo', feedbackParam.value.helperNo) feedbackParam.value.helperName = '获取失败' if (feedbackParam.value.helperNo.length >= 7) { serve.getUserByCode({code: feedbackParam.value.helperNo}).then((res) => { console.log('res', res) if (res && res.name) { feedbackParam.value.helperName = res.name } }) } } const saveWps = (record) => { currentWeldData.value = record serve.getWldPiPeiWpsList({weldId: record.id}).then((res) => { addWpsData.value = res showWpsModal.value = true }) } const addWps = (record) => { weldData.value.forEach((x) => { if (x.id === currentWeldData.value.id) { x.wpsNo = record.wpsNo x.weldProcess = record.process x.weldingMatSpec = record.grade x.rootGrade = record.rootGrade x.fillGrade = record.fillGrade } }) showNotify({ type: 'success', message: '操作成功' }) showWpsModal.value = false } const saveWeldHeat = (record) => { if (!record.wpsNo) { showNotify({ type: 'success', message: '请先选择wpsNo' }) return } currentWeldData.value = record serve.getQcWeldMatSnDropList({grade: record.rootGrade}).then((res) => { rootBatchNoOldList.value = res rootBatchNoList.value = res.map((item) => ({ text: item.batchNo, value: item.batchNo })) serve.getQcWeldMatSnDropList({grade: record.fillGrade}).then((fillRes) => { fillBatchNoOldList.value = fillRes fillBatchNoList.value = fillRes.map((item) => ({ text: item.batchNo, value: item.batchNo })) showWeldHeatModal.value = true }) }) } const onRootConfirm = ({selectedOptions}) => { showRootPicker.value = false weldHeatData.value.rootBatchNo = selectedOptions[0].value const foundItem = rootBatchNoOldList.value.find( (item) => item.batchNo == weldHeatData.value.rootBatchNo ) if (foundItem) { weldHeatData.value.rootWeldCert = foundItem.certNo } } const onFillConfirm = ({selectedOptions}) => { showFillPicker.value = false weldHeatData.value.fillBatchNo = selectedOptions[0].value const foundItem = fillBatchNoOldList.value.find( (item) => item.batchNo == weldHeatData.value.fillBatchNo ) if (foundItem) { weldHeatData.value.fillWeldCert = foundItem.certNo } } const commitWeldHeat = () => { weldData.value.forEach((x) => { if (x.id === currentWeldData.value.id) { x.rootBatchNo = weldHeatData.value.rootBatchNo x.fillBatchNo = weldHeatData.value.fillBatchNo x.rootWeldCert = weldHeatData.value.rootWeldCert x.fillWeldCert = weldHeatData.value.fillWeldCert } }) showNotify({ type: 'success', message: '操作成功' }) showWeldHeatModal.value = false } </script> <style lang="scss" scoped> :deep .urgentFlag-active { background: #ffb656; } :deep .abnormalFlag-active { background: #fb7171; } :deep .anticon-search { line-height: 0 !important; } @import '@/styles/common.scss'; .search-content { width: 100%; overflow: hidden; // height: 100%; .search-top { width: 100%; height: 50px; margin-top: 20px; display: flex; justify-content: center; align-content: center; .search-project-back { font-size: 14px; display: flex; align-content: center; position: absolute; left: 10px; color: #004688; } .search-titles { height: 100%; display: flex; justify-content: center; align-content: center; color: #004688; span { font-size: 15px; margin-left: 5px; } } } .search-state { width: 100%; height: calc(100% - 45px - 10px); position: absolute; bottom: 0; overflow: hidden; overflow-y: scroll; } } .action-buttons { display: flex; align-items: center; justify-content: space-around; } </style> 改一下如果feedbackType === '焊接' 那么 <a-table sticky v-if="feedbackType === '装配' || feedbackType === '焊接'" :scroll="{ x: '100%' }" style="width: 98%" :columns="weldingColumns" :dataSource="weldData" bordered size="middle" :loading="loading" :pagination="false" rowKey="id" > <template #bodyCell="{ column, record }"> <template v-if="column.key === 'action'"> <a-button type="link" @click="delWeldData(record)" v-resource="[ { url: '/service-piping/cp/pipe/pre/work/order/detail', method: 'GET' } ]" >删除 </a-button > <a-button type="link" @click="saveException(record)" v-resource="[ { url: '/service-piping/cp/pipe/pre/work/order/detail', method: 'GET' } ]" >异常上报 </a-button > <a-button type="link" @click="saveWps(record)" v-if="feedbackType === '焊接'" v-resource="[ { url: '/service-piping/cp/pipe/pre/work/order/detail', method: 'GET' } ]" >选择WPS NO </a-button > <a-button type="link" @click="saveWeldHeat(record)" v-if="feedbackType === '焊接'" v-resource="[ { url: '/service-piping/cp/pipe/pre/work/order/detail', method: 'GET' } ]" >选择批号 </a-button > </template> </template> </a-table> 需要铺满下面的空白页面，现在只占了一小部分
最新发布
11-13
<template #bodyCell="{ column, record }"> <template v-if="column.key === 'action'"> <a-button type="link" @click="delWeldData(record)" v-resource="[ { url: '/service-piping/cp/pipe/pre/work/...
[Vant] van-tabs标签页吸顶\/粘性布局在移动端适配上的一些尝试
wangmj518的专栏
09-13 7340
此外要放弃vant-tabs预设的内容区默认插槽（就是说不要在van-tab那个双标签里写标签页内容，默认插槽在页面上的元素类名是.van-tabs__content），在.header元素的同级手写一个内容区div进行每个标签页的展示，通过v-show="active==='a/b/c/d'"进行切换。
vant弹窗放在子组件显示 不上下居中问题
qq_38935512的博客
11-18 1503
问题分析 ：放在子组件中fixed 混乱，查窗口高端，定位尽然时根据父组件的高度去定位的。 解决方案： 1.将弹出窗口放在父组件中 以插槽slot的方式引入
van-popup弹出层在ios被遮挡问题
cczz66的博客
12-03 7727
适配 ios 遇坑，van-popup 弹出层中组件内容被覆盖，而且键盘弹起时 header 被顶出屏幕，通过调整样式层级可以解决部分覆盖问题，但是 header 被顶出屏幕一直没解决； 后来仔细翻看文档，发现官方预留了 get-container 属性，可以把弹出层挂载到指定元素上，设置get-container="body"，把组件挂载到最外层boby上问题解决。 ...
vue Vant的Popup弹出层滚动问题，底部元素fixed定位异常问题
coldriversnow的专栏
12-21 2091
最近开发移动端h5，用的vant 移动端组件库框架，使用popup弹出层时，需要在底部固定一个操作模块。但我发现在popup组件里使用fixed定位后，如果内容没有超出popup高度，底部fixed内容显示正常，否则内容超出出现滚动条后，底部fixed定位元素随页面滚动，fixed失效。效果如下：正常情况和异常情况对比图（左正右异）：解决办法有两种方式。
vant弹出层popup无法挂载到指定节点
qq_43222063的博客
04-25 2427
在使用vant的popup组件时，希望其只显示在某个div中，否则连标题栏也遮盖住了，使用vant自带的属性，发现并不生效。通过控制台可以看出，popup已经挂载上去了，但popup的样式为position:fixed，这显然不合理，此时，popup内容的位置已经正常，但遮罩层位置还不对，用下组件自带的方法，完整代码如下。解决办法，只能自己修改样式了。页面也没有达到期望的效果。
解决van-popup导致页面无法滑动问题
weixin_54009353的博客
03-17 5405
在vue2中，van-popup组件有一个默认锁定背景滚动 但当背景内容不止一页时就很麻烦，所以这时需要给van-popup标签添加 :lock-srcoll="false" <van-popup v-model="showPopup" :lock-scroll="false"> <img class="popup-close" @click="showPopup = false" src="../assets/images/X.png" /> </van
微信小程序 - vant popup弹出层阻止底层页面滑动
热门推荐
idomyway的博客
08-30 1万+
前言     在小程序编写过程中使用使用vant weapp的popup组件做小程序的弹出层，触屏导致底层页面跟着滑动。 解决方法     使用touch事件阻止属性，@touchmove.stop.prevent指向空事件 van-popup( :show="popupShow" :z-index="999" ...
nuxt+vant用来van-popup移动端滚动失效
weixin_45148145的博客
03-09 814
问题描述：移动端官网跳转路由后的页面，页面无法滚动
van-popup滑动卡顿并且在有时候在ios上经常性滑动卡顿的情况
m0_60067558的博客
11-17 1232
然后苹果手机卡顿情况是pop里层的设置的z-index大于了pop本身的默认z-idenx2008，设置成一样的就可以了。:lock-scroll="false"加了这个属性就可以了具体去看官网。
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值