You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
909 lines
34 KiB
909 lines
34 KiB
<template>
|
|
<div class="mod-config">
|
|
<el-form
|
|
:inline="true"
|
|
label-position="top"
|
|
style="margin-top: 20px; position: fixed; top: 55px;left: 227px; z-index: 1000; background-color: white; padding: 10px; width: 100%;min-width: 1028px;max-width: 1292px;border: 3px solid #17B3A3;">
|
|
|
|
<el-form-item label="生产订单号(不支持模糊查询)">
|
|
<el-input v-model="searchData.orderNo" style="width: 130px"></el-input>
|
|
<el-checkbox
|
|
v-model="searchData.status"
|
|
label="status"
|
|
style="margin-left: 10px"
|
|
true-label="有效"
|
|
false-label="无效"
|
|
>
|
|
仅查询有效的SOP
|
|
</el-checkbox>
|
|
<el-button @click="getDataList()" type="primary" style="margin-left: 2px;margin-top: 0px">查询</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
<br></br>
|
|
<br></br>
|
|
<fieldset style="margin-top: 5px; width: 100%;min-width: 1020px">
|
|
<legend>产品SOP信息</legend>
|
|
<el-form :inline="true" :model="modelData" label-position="top" label-width="100px" style="margin-top: 0px;">
|
|
<el-form-item label="客户" prop="uCustomer">
|
|
<el-input v-model="modelData.uCustomer" readonly style="width: 310px"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="机种" prop="uModel" style="margin-left: 15px">
|
|
<el-input v-model="modelData.uModel" readonly style="width: 141px"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="颜色标识" prop="uColorID" style="margin-left: 15px">
|
|
<el-input v-model="modelData.uColorID" readonly style="width: 141px"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="生产通知单" prop="docEntry" style="margin-left: 15px">
|
|
<el-input v-model="modelData.docEntry" readonly style="width: 141px"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="日期" prop="postDate" style="margin-left: 15px">
|
|
<el-input v-model="modelData.postDate" readonly style="width: 141px"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-form :inline="true" :model="modelData" label-position="top" label-width="100px" style="margin-top: 0px;">
|
|
<el-form-item label="客户料号" prop="uPn">
|
|
<el-input v-model="modelData.uPn" readonly style="width: 310px"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="二阶料号" prop="uPn2" style="margin-left: 15px">
|
|
<el-input v-model="modelData.uPn2" readonly style="width: 141px"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="样品卡号" prop="uSmplCard" style="margin-left: 15px">
|
|
<el-input v-model="modelData.uSmplCard" readonly style="width: 141px"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="交期" prop="dueDate" style="margin-left: 15px">
|
|
<el-input v-model="modelData.dueDate" readonly style="width: 141px"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="库存数量" prop="onHand" style="margin-left: 15px">
|
|
<el-input v-model="modelData.onHand" readonly style="width: 141px"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-form :inline="true" :model="modelData" label-position="top" label-width="100px" style="margin-top: 0px;">
|
|
<el-form-item label="料号" prop="itemCode">
|
|
<el-input v-model="modelData.itemCode" readonly style="width: 310px"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="计划数量" prop="plannedQty" style="margin-left: 15px">
|
|
<el-input v-model="modelData.plannedQty + modelData.comments + modelData.uPackunit" readonly style="width: 310px"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="制程" prop="uProcess" style="margin-left: 15px">
|
|
<el-input v-model="modelData.uProcess" readonly style="width: 310px"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-form :inline="true" :model="modelData" label-position="top" label-width="100px" style="margin-top: 0px;">
|
|
<el-form-item label="打样原因" prop="uStatus">
|
|
<el-input v-model="modelData.uStatus" readonly style="width: 310px"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="送样数量" prop="uBhbum" style="margin-left: 15px">
|
|
<el-input v-model="modelData.uBhbum" readonly style="width: 141px"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="尺寸" prop="uDimen" style="margin-left: 15px">
|
|
<el-input v-model="modelData.uDimen" readonly style="width: 141px"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="跳距" prop="docEntry" style="margin-left: 15px">
|
|
<el-input v-model="modelData.docEntry" readonly style="width: 141px"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="包装方式" prop="uPackage" style="margin-left: 15px">
|
|
<el-input v-model="modelData.uPackage" readonly style="width: 141px"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-form :inline="true" :model="modelData" label-position="top" label-width="100px" style="margin-top: 0px;">
|
|
<el-form-item label="物料描述" prop="itemName">
|
|
<el-input v-model="modelData.itemName" readonly style="width: 480px"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="R角" prop="uRangle" style="margin-left: 15px">
|
|
<el-input v-model="modelData.uRangle" readonly style="width: 141px"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="C角" prop="uCangle" style="margin-left: 15px">
|
|
<el-input v-model="modelData.uCangle" readonly style="width: 141px"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-form :inline="true" :model="modelData" label-position="top" label-width="100px" style="margin-top: 0px;">
|
|
<el-form-item label="注意事项" prop="uAttn">
|
|
<el-input
|
|
readonly
|
|
type="textarea"
|
|
v-model="modelData.uAttn"
|
|
style="width: 480px"
|
|
:rows="3">
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item label="上下间距" prop="uUddist" style="margin-left: 15px">
|
|
<el-input v-model="modelData.uUddist" readonly style="width: 141px"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="左右间距" prop="uLrdist" style="margin-left: 15px">
|
|
<el-input v-model="modelData.uLrdist" readonly style="width: 141px"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="其他保证标识要求" prop="uPackDesp" style="margin-left: 15px">
|
|
<el-input
|
|
readonly
|
|
type="textarea"
|
|
v-model="modelData.uPackDesp"
|
|
style="width: 140px"
|
|
:rows="7">
|
|
</el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-form :inline="true" :model="modelData" label-position="top" label-width="100px" style="margin-top: 0px;margin-left: 509px">
|
|
<el-form-item label="边距" prop="uEdge">
|
|
<el-input v-model="modelData.uEdge" readonly style="width: 141px;"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="虚线" prop="uDotline" style="margin-left: 15px">
|
|
<el-input v-model="modelData.uDotline" readonly style="width: 141px"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-form :inline="true" :model="modelData" label-position="top" label-width="100px" style="margin-top: 0px;">
|
|
<el-form-item label="SIP" prop="uSip">
|
|
<el-input v-model="modelData.uSip" readonly style="width: 310px"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="样品卡" prop="uYangpinno" style="margin-left: 186px">
|
|
<el-input v-model="modelData.uYangpinno" readonly style="width: 310px"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-form :inline="true" :model="modelData" label-position="top" label-width="100px" style="margin-top: 0px;">
|
|
<el-form-item label="检查记录表" prop="uChSheet">
|
|
<el-input v-model="modelData.uChSheet" readonly style="width: 310px"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-form :inline="true" :model="modelData" label-position="top" label-width="100px" style="margin-top: 0px;">
|
|
<el-form-item label="刀模编号" prop="uMold">
|
|
<el-input v-model="modelData.uMold" readonly style="width: 310px"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="刀模仓位" prop="uMoldNo" style="margin-left: 15px">
|
|
<el-input v-model="modelData.uMoldNo" readonly style="width: 141px"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="刀模编号2" prop="uMold2" style="margin-left: 15px">
|
|
<el-input v-model="modelData.uMold2" readonly style="width: 310px"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="刀模2仓位" prop="uMoldNo2" style="margin-left: 15px">
|
|
<el-input v-model="modelData.uMoldNo2" readonly style="width: 141px"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-form :inline="true" :model="modelData" label-position="top" label-width="100px" style="margin-top: 0px;">
|
|
<el-form-item label="菲林编号" prop="uFilm">
|
|
<el-input v-model="modelData.uFilm" readonly style="width: 310px"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="网版编号" prop="uPlatenum" style="margin-left: 15px">
|
|
<el-input v-model="modelData.uPlatenum" readonly style="width: 141px"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="网版目数" prop="uPlate" style="margin-left: 15px">
|
|
<el-input v-model="modelData.uPlate" readonly style="width: 141px"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="模数" prop="uMoldQty" style="margin-left: 184px">
|
|
<el-input v-model="modelData.uMoldQty" readonly style="width: 141px"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-form :inline="true" :model="modelData" label-position="top" label-width="100px" style="margin-top: 0px;">
|
|
<el-form-item label="油墨型号" prop="uColor">
|
|
<el-input v-model="modelData.uColor" readonly style="width: 310px"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="UL型号" prop="uUl" style="margin-left: 15px">
|
|
<el-input v-model="modelData.uUl" readonly style="width: 310px"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
</fieldset>
|
|
<p>BOM物料清单</p>
|
|
<el-table
|
|
:data="dataList"
|
|
:height="height - 230"
|
|
border
|
|
style="width: 100%;margin-top: -10px">
|
|
<el-table-column prop="itemNo" label="序号" headerAlign="center" align="center" width="50px"></el-table-column>
|
|
<el-table-column prop="componentPartNo" label="物料号" headerAlign="center" width="170px" align="left"></el-table-column>
|
|
<el-table-column prop="partDesc" label="描述" headerAlign="center" align="left"></el-table-column>
|
|
<el-table-column prop="qtyRequired" label="计划数量" headerAlign="center" width="100px" align="right"></el-table-column>
|
|
<el-table-column prop="qtyOnHand" label="库存" headerAlign="center" width="100px" align="right"></el-table-column>
|
|
</el-table>
|
|
<el-form :inline="true" :model="modelData" label-position="top" label-width="100px" style="margin-top: 0px;width: 100%;min-width: 1020px">
|
|
<el-form-item label="ECN#" prop="uEcn">
|
|
<el-input
|
|
readonly
|
|
type="textarea"
|
|
v-model="modelData.uEcn"
|
|
style="width: 310px"
|
|
:rows="3">
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item label="客诉履历" prop="uAttn2">
|
|
<el-input
|
|
readonly
|
|
type="textarea"
|
|
v-model="modelData.uAttn2"
|
|
style="width: 310px"
|
|
:rows="3">
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item label="检查难度" prop="uCheck">
|
|
<el-input v-model="modelData.uCheck" readonly style="width: 141px"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="检查时间" prop="uCheckt">
|
|
<el-input v-model="modelData.uCheckt" readonly style="width: 141px"></el-input>
|
|
</el-form-item>
|
|
<el-checkbox
|
|
disabled
|
|
v-model="modelData.uAttach1"
|
|
style="margin-left: 10px;margin-top: 5px"
|
|
>附件</el-checkbox>
|
|
</el-form>
|
|
<el-form :inline="true" :model="modelData" label-position="top" label-width="100px" style="margin-top: -7px;margin-left: 955px">
|
|
<el-checkbox
|
|
disabled
|
|
v-model="modelData.uAttach2"
|
|
style="margin-left: 10px"
|
|
>图纸</el-checkbox>
|
|
</el-form>
|
|
<el-form :inline="true" :model="modelData" label-position="top" label-width="100px" style="margin-top: 10px;margin-left: 955px">
|
|
<el-checkbox
|
|
disabled
|
|
v-model="modelData.uAttach3"
|
|
style="margin-left: 10px"
|
|
>刀线</el-checkbox>
|
|
</el-form>
|
|
<p>SOP清单</p>
|
|
<el-table
|
|
:height="height - 170"
|
|
:data="sopFileList"
|
|
border
|
|
highlight-current-row
|
|
style="width: 100%;margin-top: -10px">
|
|
<el-table-column
|
|
v-for="(item,index) in columnSopFileList" :key="index"
|
|
:sortable="item.columnSortable"
|
|
:prop="item.columnProp"
|
|
:header-align="item.headerAlign"
|
|
:show-overflow-tooltip="item.showOverflowTooltip"
|
|
:align="item.align"
|
|
:fixed="item.fixed==''?false:item.fixed"
|
|
:min-width="item.columnWidth"
|
|
:label="item.columnLabel">
|
|
<template slot-scope="scope">
|
|
<span v-if="!item.columnHidden"> {{scope.row[item.columnProp]}}</span>
|
|
<span v-if="item.columnImage"><img :src="scope.row[item.columnProp]"
|
|
style="width: 100px; height: 80px"/></span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
label="操作"
|
|
align="center"
|
|
width="100">
|
|
<template slot-scope="scope">
|
|
<!-- <a type="primary" @click="openDialog(scope.row)">查看</a>-->
|
|
<a
|
|
type="text" size="small"
|
|
@click="viewSopFile(scope.row)"
|
|
>查看附件</a>
|
|
<a type="text" size="small" @click="downloadFile(scope.row)">下载</a>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<!-- 弹窗 -->
|
|
<el-dialog title="附件内容"
|
|
:modal="false"
|
|
v-dialogDrag
|
|
:close-on-click-modal="false"
|
|
:visible.sync="dialogVisible" width="427px"
|
|
style="margin-top: -91px;">
|
|
|
|
<!-- 弹窗内容，可以根据需求放置附件内容 -->
|
|
<div>
|
|
<!-- 示例：显示 PDF 文件 -->
|
|
<!-- <embed :src="this.pdfUrl" type="application/pdf" width="100%" height="490px">-->
|
|
<iframe :src="this.pdfUrl" frameborder="0" width="100%" :height="height"></iframe>
|
|
</div>
|
|
|
|
<!-- 弹窗的底部操作 -->
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="dialogVisible = false">关闭</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import {downLoadObjectFile, shopNoticeSearch} from "../../../../api/shopOrder/shopOrder";
|
|
import Vue from 'vue'
|
|
Vue.directive('dialogDrag', {
|
|
bind(el, binding, vnode, oldVnode) {
|
|
//弹框可拉伸最小宽高
|
|
let minWidth = 400;
|
|
let minHeight = 300;
|
|
//初始非全屏
|
|
let isFullScreen = false;
|
|
//当前宽高
|
|
let nowWidth = 0;
|
|
let nowHight = 0;
|
|
//当前顶部高度
|
|
let nowMarginTop = 0;
|
|
//获取弹框头部（这部分可双击全屏）
|
|
const dialogHeaderEl = el.querySelector('.el-dialog__header');
|
|
//弹窗
|
|
const dragDom = el.querySelector('.el-dialog');
|
|
//给弹窗加上overflow auto；不然缩小时框内的标签可能超出dialog；
|
|
dragDom.style.overflow = "auto";
|
|
//清除选择头部文字效果
|
|
dialogHeaderEl.onselectstart = new Function("return false");
|
|
//头部加上可拖动cursor
|
|
dialogHeaderEl.style.cursor = 'move';
|
|
|
|
// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
|
|
const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
|
|
|
|
let moveDown = (e) => {
|
|
// 鼠标按下，计算当前元素距离可视区的距离
|
|
const disX = e.clientX - dialogHeaderEl.offsetLeft;
|
|
const disY = e.clientY - dialogHeaderEl.offsetTop;
|
|
|
|
// 获取到的值带px 正则匹配替换
|
|
let styL, styT;
|
|
|
|
// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
|
|
if (sty.left.includes('%')) {
|
|
styL = +document.body.clientWidth * (+sty.left.replace(/%/g, '') / 100);
|
|
styT = +document.body.clientHeight * (+sty.top.replace(/%/g, '') / 100);
|
|
} else {
|
|
styL = +sty.left.replace(/px/g, '');
|
|
styT = +sty.top.replace(/px/g, '');
|
|
};
|
|
|
|
document.onmousemove = function (e) {
|
|
// 通过事件委托，计算移动的距离
|
|
const l = e.clientX - disX;
|
|
const t = e.clientY - disY;
|
|
|
|
// 移动当前元素
|
|
dragDom.style.left = `${l + styL}px`;
|
|
dragDom.style.top = `${t + styT}px`;
|
|
|
|
//将此时的位置传出去
|
|
//binding.value({x:e.pageX,y:e.pageY})
|
|
};
|
|
|
|
document.onmouseup = function (e) {
|
|
document.onmousemove = null;
|
|
document.onmouseup = null;
|
|
};
|
|
}
|
|
dialogHeaderEl.onmousedown = moveDown;
|
|
//双击(头部)效果不想要可以注释
|
|
dialogHeaderEl.ondblclick = (e) => {
|
|
if (isFullScreen === false) {
|
|
nowHight = dragDom.clientHeight;
|
|
nowWidth = dragDom.clientWidth;
|
|
nowMarginTop = dragDom.style.marginTop;
|
|
dragDom.style.left = 0;
|
|
dragDom.style.top = 0;
|
|
dragDom.style.height = "82VH";
|
|
dragDom.style.width = "100VW";
|
|
dragDom.style.marginTop = 33;
|
|
isFullScreen = true;
|
|
dialogHeaderEl.style.cursor = 'initial';
|
|
dialogHeaderEl.onmousedown = null;
|
|
} else {
|
|
dragDom.style.height = "auto";
|
|
dragDom.style.width = nowWidth + 'px';
|
|
dragDom.style.marginTop = nowMarginTop;
|
|
isFullScreen = false;
|
|
dialogHeaderEl.style.cursor = 'move';
|
|
dialogHeaderEl.onmousedown = moveDown;
|
|
}
|
|
}
|
|
|
|
//拉伸(右下方)效果不想要可以注释
|
|
let resizeEl = document.createElement("div");
|
|
dragDom.appendChild(resizeEl);
|
|
//在弹窗右下角加上一个10-10px的控制块
|
|
resizeEl.style.cursor = 'se-resize';
|
|
resizeEl.style.position = 'absolute';
|
|
resizeEl.style.height = '10px';
|
|
resizeEl.style.width = '10px';
|
|
resizeEl.style.right = '0px';
|
|
resizeEl.style.bottom = '0px';
|
|
resizeEl.style.zIndex = '99';
|
|
//鼠标拉伸弹窗
|
|
resizeEl.onmousedown = (e) => {
|
|
// 记录初始x位置
|
|
let clientX = e.clientX;
|
|
// 鼠标按下，计算当前元素距离可视区的距离
|
|
let disX = e.clientX - resizeEl.offsetLeft;
|
|
let disY = e.clientY - resizeEl.offsetTop;
|
|
|
|
document.onmousemove = function (e) {
|
|
e.preventDefault(); // 移动时禁用默认事件
|
|
|
|
// 通过事件委托，计算移动的距离
|
|
let x = e.clientX - disX + (e.clientX - clientX);//这里 由于elementUI的dialog控制居中的，所以水平拉伸效果是双倍
|
|
let y = e.clientY - disY;
|
|
//比较是否小于最小宽高
|
|
dragDom.style.width = x > minWidth ? `${x}px` : minWidth + 'px';
|
|
dragDom.style.height = y > minHeight ? `${y}px` : minHeight + 'px';
|
|
};
|
|
//拉伸结束
|
|
document.onmouseup = function (e) {
|
|
document.onmousemove = null;
|
|
document.onmouseup = null;
|
|
};
|
|
}
|
|
|
|
//拉伸(右边)效果不想要可以注释
|
|
let resizeElR = document.createElement("div");
|
|
dragDom.appendChild(resizeElR);
|
|
//在弹窗右下角加上一个10-10px的控制块
|
|
resizeElR.style.cursor = 'w-resize';
|
|
resizeElR.style.position = 'absolute';
|
|
resizeElR.style.height = '100%';
|
|
resizeElR.style.width = '10px';
|
|
resizeElR.style.right = '0px';
|
|
resizeElR.style.top = '0px';
|
|
//鼠标拉伸弹窗
|
|
resizeElR.onmousedown = (e) => {
|
|
let elW = dragDom.clientWidth;
|
|
let EloffsetLeft = dragDom.offsetLeft;
|
|
// 记录初始x位置
|
|
let clientX = e.clientX;
|
|
document.onmousemove = function (e) {
|
|
e.preventDefault(); // 移动时禁用默认事件
|
|
//右侧鼠标拖拽位置
|
|
if (clientX > EloffsetLeft + elW - 10 && clientX < EloffsetLeft + elW) {
|
|
//往左拖拽
|
|
if (clientX > e.clientX) {
|
|
if (dragDom.clientWidth < minWidth) {
|
|
} else {
|
|
dragDom.style.width = elW - (clientX - e.clientX) * 2 + 'px';
|
|
}
|
|
}
|
|
//往右拖拽
|
|
if (clientX < e.clientX) {
|
|
dragDom.style.width = elW + (e.clientX - clientX) * 2 + 'px';
|
|
}
|
|
}
|
|
|
|
};
|
|
//拉伸结束
|
|
document.onmouseup = function (e) {
|
|
document.onmousemove = null;
|
|
document.onmouseup = null;
|
|
};
|
|
}
|
|
|
|
//拉伸(左边)效果不想要可以注释
|
|
let resizeElL = document.createElement("div");
|
|
dragDom.appendChild(resizeElL);
|
|
//在弹窗右下角加上一个10-10px的控制块
|
|
resizeElL.style.cursor = 'w-resize';
|
|
resizeElL.style.position = 'absolute';
|
|
resizeElL.style.height = '100%';
|
|
resizeElL.style.width = '10px';
|
|
resizeElL.style.left = '0px';
|
|
resizeElL.style.top = '0px';
|
|
//鼠标拉伸弹窗
|
|
resizeElL.onmousedown = (e) => {
|
|
let elW = dragDom.clientWidth;
|
|
let EloffsetLeft = dragDom.offsetLeft;
|
|
// 记录初始x位置
|
|
let clientX = e.clientX;
|
|
document.onmousemove = function (e) {
|
|
e.preventDefault(); // 移动时禁用默认事件
|
|
//左侧鼠标拖拽位置
|
|
if (clientX > EloffsetLeft && clientX < EloffsetLeft + 10) {
|
|
//往左拖拽
|
|
if (clientX > e.clientX) {
|
|
dragDom.style.width = elW + (clientX - e.clientX) * 2 + 'px';
|
|
}
|
|
//往右拖拽
|
|
if (clientX < e.clientX) {
|
|
if (dragDom.clientWidth < minWidth) {
|
|
} else {
|
|
dragDom.style.width = elW - (e.clientX - clientX) * 2 + 'px';
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
};
|
|
//拉伸结束
|
|
document.onmouseup = function (e) {
|
|
document.onmousemove = null;
|
|
document.onmouseup = null;
|
|
};
|
|
}
|
|
|
|
// 拉伸(下边)效果不想要可以注释
|
|
let resizeElB = document.createElement("div");
|
|
dragDom.appendChild(resizeElB);
|
|
//在弹窗右下角加上一个10-10px的控制块
|
|
resizeElB.style.cursor = 'n-resize';
|
|
resizeElB.style.position = 'absolute';
|
|
resizeElB.style.height = '10px';
|
|
resizeElB.style.width = '100%';
|
|
resizeElB.style.left = '0px';
|
|
resizeElB.style.bottom = '0px';
|
|
//鼠标拉伸弹窗
|
|
resizeElB.onmousedown = (e) => {
|
|
let EloffsetTop = dragDom.offsetTop;
|
|
let ELscrollTop = el.scrollTop;
|
|
let clientY = e.clientY;
|
|
let elH = dragDom.clientHeight;
|
|
document.onmousemove = function (e) {
|
|
e.preventDefault(); // 移动时禁用默认事件
|
|
//底部鼠标拖拽位置
|
|
if (ELscrollTop + clientY > EloffsetTop + elH - 20 && ELscrollTop + clientY < EloffsetTop + elH) {
|
|
//往上拖拽
|
|
if (clientY > e.clientY) {
|
|
if (dragDom.clientHeight < minHeight) {
|
|
} else {
|
|
dragDom.style.height = elH - (clientY - e.clientY) * 2 + 'px';
|
|
}
|
|
}
|
|
//往下拖拽
|
|
if (clientY < e.clientY) {
|
|
dragDom.style.height = elH + (e.clientY - clientY) * 2 + 'px';
|
|
}
|
|
}
|
|
};
|
|
//拉伸结束
|
|
document.onmouseup = function (e) {
|
|
document.onmousemove = null;
|
|
document.onmouseup = null;
|
|
};
|
|
}
|
|
}
|
|
})
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
height: 200,
|
|
fileURL: '',
|
|
pdfUrl: '',
|
|
dataList: [],
|
|
sopFileList: [],
|
|
dialogVisible: false, // 控制弹窗显示与否
|
|
searchData: {
|
|
site: this.$store.state.user.site,
|
|
userName: this.$store.state.user.name,
|
|
orderNo: '',
|
|
status: '有效',
|
|
},
|
|
modelData: {
|
|
uCustomer: '',
|
|
uModel: '',
|
|
uColorID: '',
|
|
docEntry: '',
|
|
postDate: '',
|
|
uPn: '',
|
|
uPn2: '',
|
|
uSmplCard: '',
|
|
dueDate: '',
|
|
onHand: '',
|
|
itemCode: '',
|
|
plannedQty: '',
|
|
uProcess: '',
|
|
uStatus: '',
|
|
uBhbum: '',
|
|
uDimen: '',
|
|
uPackage: '',
|
|
itemName: '',
|
|
uRangle: '',
|
|
uCangle: '',
|
|
uAttn: '',
|
|
uUddist: '',
|
|
uLrdist: '',
|
|
uPackDesp: '',
|
|
uDotline: '',
|
|
uSip: '',
|
|
uYangpinno: '',
|
|
uChSheet: '',
|
|
uMold: '',
|
|
uMoldNo: '',
|
|
uMold2: '',
|
|
uMoldNo2: '',
|
|
uFilm: '',
|
|
uPlatenum: '',
|
|
uPlate: '',
|
|
uMoldQty: '',
|
|
uColor: '',
|
|
uUl: '',
|
|
uEcn: '',
|
|
uAttn2: '',
|
|
uCheck: '',
|
|
uCheckt: '',
|
|
uattach1: '',
|
|
uattach2: '',
|
|
uattach3: '',
|
|
uAttach1: false,
|
|
uAttach2: false,
|
|
uAttach3: false,
|
|
comments: '',
|
|
uPackunit: '',
|
|
uEdge: '',
|
|
},
|
|
columnSopFileList:[
|
|
{
|
|
userId: this.$store.state.user.name,
|
|
functionId: 103004,
|
|
serialNumber: '103004Table4VersionNumber',
|
|
tableId: "103004Table3",
|
|
tableName: "SOP文件表",
|
|
columnProp: "versionNumber",
|
|
headerAlign: "center",
|
|
align: "center",
|
|
columnLabel: "版本号",
|
|
columnHidden: false,
|
|
columnImage: false,
|
|
columnSortable: false,
|
|
sortLv: 0,
|
|
status: true,
|
|
fixed: '',
|
|
columnWidth: 50
|
|
},
|
|
{
|
|
userId: this.$store.state.user.name,
|
|
functionId: 103004,
|
|
serialNumber: '103004Table4FileName',
|
|
tableId: "103004Table3",
|
|
tableName: "SOP文件表",
|
|
columnProp: "fileName",
|
|
headerAlign: "center",
|
|
align: "left",
|
|
columnLabel: "文件名称",
|
|
columnHidden: false,
|
|
columnImage: false,
|
|
columnSortable: false,
|
|
sortLv: 0,
|
|
status: true,
|
|
fixed: '',
|
|
columnWidth: 300
|
|
},
|
|
{
|
|
userId: this.$store.state.user.name,
|
|
functionId: 103004,
|
|
serialNumber: '103004Table4ResourceID',
|
|
tableId: "103004Table2",
|
|
tableName: "SOP文件表",
|
|
columnProp: "resourceInfo",
|
|
headerAlign: "center",
|
|
align: "left",
|
|
columnLabel: "机台编码(名称)",
|
|
columnHidden: false,
|
|
columnImage: false,
|
|
columnSortable: false,
|
|
sortLv: 0,
|
|
status: true,
|
|
fixed: '',
|
|
columnWidth: 120
|
|
},
|
|
{
|
|
userId: this.$store.state.user.name,
|
|
functionId: 103004,
|
|
serialNumber: '103004Table4CreatedBy',
|
|
tableId: "103004Table3",
|
|
tableName: "SOP文件表",
|
|
columnProp: "createdBy",
|
|
headerAlign: "center",
|
|
align: "left",
|
|
columnLabel: "上传人",
|
|
columnHidden: false,
|
|
columnImage: false,
|
|
columnSortable: false,
|
|
sortLv: 0,
|
|
status: true,
|
|
fixed: '',
|
|
columnWidth: 60
|
|
},
|
|
{
|
|
userId: this.$store.state.user.name,
|
|
functionId: 103004,
|
|
serialNumber: '103004Table4CreateDate',
|
|
tableId: "103004Table3",
|
|
tableName: "SOP文件表",
|
|
columnProp: "createDate",
|
|
headerAlign: "center",
|
|
align: "center",
|
|
columnLabel: "上传时间",
|
|
columnHidden: false,
|
|
columnImage: false,
|
|
columnSortable: false,
|
|
sortLv: 0,
|
|
status: true,
|
|
fixed: '',
|
|
columnWidth: 120
|
|
},
|
|
{
|
|
userId: this.$store.state.user.name,
|
|
functionId: 103004,
|
|
serialNumber: '103004Table4EffectiveDate',
|
|
tableId: "103004Table3",
|
|
tableName: "SOP文件表",
|
|
columnProp: "effectiveDate",
|
|
headerAlign: "center",
|
|
align: "center",
|
|
columnLabel: "生效日期",
|
|
columnHidden: false,
|
|
columnImage: false,
|
|
columnSortable: false,
|
|
sortLv: 0,
|
|
status: true,
|
|
fixed: '',
|
|
columnWidth: 80
|
|
},
|
|
{
|
|
userId: this.$store.state.user.name,
|
|
functionId: 103004,
|
|
serialNumber: '103004Table4ExpiryDate',
|
|
tableId: "103004Table3",
|
|
tableName: "SOP文件表",
|
|
columnProp: "expiryDate",
|
|
headerAlign: "center",
|
|
align: "center",
|
|
columnLabel: "失效日期",
|
|
columnHidden: false,
|
|
columnImage: false,
|
|
columnSortable: false,
|
|
sortLv: 0,
|
|
status: true,
|
|
fixed: '',
|
|
columnWidth: 80
|
|
},
|
|
{
|
|
userId: this.$store.state.user.name,
|
|
functionId: 103004,
|
|
serialNumber: '103004Table4Status',
|
|
tableId: "103004Table3",
|
|
tableName: "SOP文件表",
|
|
columnProp: "status",
|
|
headerAlign: "center",
|
|
align: "center",
|
|
columnLabel: "状态",
|
|
columnHidden: false,
|
|
columnImage: false,
|
|
columnSortable: false,
|
|
sortLv: 0,
|
|
status: true,
|
|
fixed: '',
|
|
columnWidth: 50
|
|
},
|
|
],
|
|
}
|
|
},
|
|
mounted() {
|
|
this.$nextTick(() => {
|
|
this.height = window.innerHeight - 225;
|
|
})
|
|
},
|
|
methods: {
|
|
getDataList() {
|
|
let inData = {
|
|
site: this.$store.state.user.site,
|
|
userName: this.$store.state.user.name,
|
|
orderNo: this.searchData.orderNo,
|
|
customer: this.searchData.customer,
|
|
}
|
|
this.dataList = []
|
|
this.sopFileList = []
|
|
shopNoticeSearch(inData).then(({data}) => {
|
|
if (data.code === 0) {
|
|
if ( data.rows1 !== null && data.rows1 !== undefined) {
|
|
data.rows1.uAttach1 = false
|
|
data.rows1.uAttach2 = false
|
|
data.rows1.uAttach3 = false
|
|
if (data.rows1.uattach1 === '有' || data.rows1.uattach1 === 'Y' || data.rows1.uattach1 === '样品') {
|
|
data.rows1.uAttach1 = true
|
|
} else if (data.rows1.uattach1 === '图纸') {
|
|
data.rows1.uAttach2 = true
|
|
} else if (data.rows1.uattach1 === '刀线') {
|
|
data.rows1.uAttach3 = true
|
|
}
|
|
if (data.rows1.uattach2 === '有' || data.rows1.uattach2 === 'Y' || data.rows1.uattach2 === '图纸') {
|
|
data.rows1.uAttach2 = true
|
|
}else if (data.rows1.uattach2 === '刀线') {
|
|
data.rows1.uAttach3 = true
|
|
} else if (data.rows1.uattach2 === '样品'){
|
|
data.rows1.uAttach1 = true
|
|
}
|
|
if (data.rows1.uattach3 === '有' || data.rows1.uattach3 === 'Y' || data.rows1.uattach3 === '刀线') {
|
|
data.rows1.uAttach3 = true
|
|
} else if (data.rows1.uattach3 === '图纸') {
|
|
data.rows1.uAttach2 = true
|
|
} else if (data.rows1.uattach3 === '样品') {
|
|
data.rows1.uAttach1 = true
|
|
}
|
|
this.modelData = data.rows1
|
|
}
|
|
this.dataList = data.rows2
|
|
// 遍历sopFileList，将每个对象的orderRef4赋值给versionNumber
|
|
data.rows3.forEach((item) => {
|
|
item.fileType = item.fileSuffix
|
|
item.versionNumber = item.orderRef4
|
|
item.resourceInfo = item.orderRef3 + '(' + item.resourceDesc + ')'
|
|
if (item.expiryDate !== null) {
|
|
if (new Date(item.expiryDate) < new Date()) {
|
|
item.status = '失效'
|
|
}
|
|
else {
|
|
item.status = '有效'
|
|
}
|
|
} else {
|
|
item.status = '有效'
|
|
}
|
|
if (this.searchData.status === '有效'){
|
|
if (item.status !== '失效'){
|
|
this.sopFileList.push(item)
|
|
}
|
|
} else {
|
|
this.sopFileList.push(item)
|
|
}
|
|
})
|
|
}
|
|
})
|
|
},
|
|
|
|
openDialog(row) {
|
|
let image = ['jpg', 'jpeg', 'png', 'gif', 'bmp']
|
|
let pdf = ['pdf']
|
|
let type = ''
|
|
if (image.includes(row.fileType.toLowerCase())) {
|
|
this.pdfUrl = '/file/' + row.newFileName
|
|
}
|
|
else if (pdf.includes(row.fileType.toLowerCase())) {
|
|
this.pdfUrl = '/file/' + row.newFileName
|
|
}
|
|
else {
|
|
this.$message({
|
|
message: '不支持的文件类型',
|
|
type: 'warning'
|
|
})
|
|
return
|
|
}
|
|
this.dialogVisible = true; // 打开弹窗
|
|
},
|
|
|
|
// 查看文件
|
|
viewSopFile(row) {
|
|
const fileName = row.fileName || row.fileType
|
|
downLoadObjectFile(row).then(({data}) => {
|
|
this.$filePreview.previewFile(data, fileName).then(result => {
|
|
if (result.message) {
|
|
this.$message.success(result.message)
|
|
}
|
|
}).catch(error => {
|
|
this.$message.error('文件预览失败：' + (error.message || '未知错误'))
|
|
})
|
|
}).catch(() => {
|
|
this.$message.error('文件下载失败，请稍后重试')
|
|
})
|
|
},
|
|
// 下载
|
|
downloadFile (row) {
|
|
downLoadObjectFile(row)
|
|
.then(({data}) => {
|
|
// 不限制文件下载类型
|
|
const blob = new Blob([data], {type:'application/octet-stream;charset=utf-8'})
|
|
// 下载文件名称
|
|
const fileName = row.fileName
|
|
// a标签下载
|
|
const linkNode = document.createElement('a')
|
|
linkNode.download = fileName // a标签的download属性规定下载文件的名称
|
|
linkNode.style.display = 'none'
|
|
linkNode.href = URL.createObjectURL(blob) // 生成一个Blob URL
|
|
document.body.appendChild(linkNode)
|
|
linkNode.click() // 模拟在按钮上的一次鼠标单击
|
|
URL.revokeObjectURL(linkNode.href) // 释放URL 对象
|
|
document.body.removeChild(linkNode)
|
|
})
|
|
},
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
.right-align-input ::v-deep .el-input__inner {
|
|
text-align: right;
|
|
}
|
|
|
|
/* 自定义 Dialog 样式使其可拖动 */
|
|
.el-dialog__header {
|
|
cursor: move;
|
|
}
|
|
</style>
|