2024.9.3 一、加工中心上传SOP（第一版）

二、生产订单-生产通知单（第一版）

src/api/shopOrder/shopOrder.js

@@ -95,6 +95,9 @@ export const deleteShopOrderToolData = data => createAPI('/shopOrder/deleteShopO
 // 更改生产工单工艺路线
 export const shopOrderUpdateRoutingViaRev = data => createAPI('/shopOrder/shopOrderUpdateRoutingViaRev', 'post', data)
 
-// 查询工单的工具信息
+// 查询生产通知单信息
 export const shopNoticeSearch = data => createAPI('/shopOrder/shopNoticeSearch', 'post', data)
 
+// 获取文件
+export const downLoadObjectFile = data => createAPI(`/shopOrder/downLoadObjectFile?id=`+data.id,'post',777)
+

src/views/modules/base/workCenter.vue

@@ -365,11 +365,12 @@
         <el-form-item label="">
           <a href="javascript:void(0);" @click="triggerUpload">SOP文件(点击上传)</a>
           <tr></tr>
-          <el-input v-model="this.fileName" readonly placeholder="文件名称" style="width: 391px"></el-input>
+          <el-input v-model="this.fileName" readonly placeholder="文件名称（仅支持PDF以及图片文件！）" style="width: 391px"></el-input>
           <el-button type="primary" @click="uploadSOPSave">保存</el-button>
           <el-upload class="custom-upload" :file-list="fileList"
                      action="javascript:void(0);" ref="uploadFile"
                      :on-change="onChange" :on-close="closeFileUpdate"
+                     accept=".pdf,image/*"
                      multiple :auto-upload="false"
                      style="text-align: left;margin-top: 0px;margin-left: 6px;display: none;">
           </el-upload>

src/views/modules/shopOrder/shopOrder/shopNotice.vue

@@ -25,80 +25,81 @@
       <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" style="width: 310px"></el-input>
+              <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" style="width: 141px"></el-input>
+              <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" style="width: 141px"></el-input>
+              <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" style="width: 141px"></el-input>
+              <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" style="width: 141px"></el-input>
+              <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" style="width: 310px"></el-input>
+          <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" style="width: 141px"></el-input>
+          <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" style="width: 141px"></el-input>
+          <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" style="width: 141px"></el-input>
+          <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" style="width: 141px"></el-input>
+          <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" style="width: 310px"></el-input>
+          <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" style="width: 310px"></el-input>
+          <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" style="width: 310px"></el-input>
+          <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" style="width: 310px"></el-input>
+          <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" style="width: 141px"></el-input>
+          <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" style="width: 141px"></el-input>
+          <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" style="width: 141px"></el-input>
+          <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" style="width: 141px"></el-input>
+          <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" style="width: 480px"></el-input>
+          <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" style="width: 141px"></el-input>
+          <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" style="width: 141px"></el-input>
+          <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"
@@ -106,13 +107,14 @@
           </el-input>
         </el-form-item>
         <el-form-item label="上下间距" prop="uUddist" style="margin-left: 15px">
-          <el-input v-model="modelData.uUddist" style="width: 141px"></el-input>
+          <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" style="width: 141px"></el-input>
+          <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"
@@ -122,59 +124,59 @@
       </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" style="width: 141px;"></el-input>
+          <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" style="width: 141px"></el-input>
+          <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" style="width: 310px"></el-input>
+          <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" style="width: 310px"></el-input>
+          <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" style="width: 310px"></el-input>
+          <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" style="width: 310px"></el-input>
+          <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" style="width: 141px"></el-input>
+          <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" style="width: 310px"></el-input>
+          <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" style="width: 141px"></el-input>
+          <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" style="width: 310px"></el-input>
+          <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" style="width: 141px"></el-input>
+          <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" style="width: 141px"></el-input>
+          <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" style="width: 141px"></el-input>
+          <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" style="width: 310px"></el-input>
+          <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" style="width: 310px"></el-input>
+          <el-input v-model="modelData.uUl" readonly style="width: 310px"></el-input>
         </el-form-item>
       </el-form>
     </fieldset>
@@ -193,6 +195,7 @@
     <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"
@@ -201,6 +204,7 @@
       </el-form-item>
       <el-form-item label="客诉履历" prop="uAttn2">
         <el-input
+          readonly
           type="textarea"
           v-model="modelData.uAttn2"
           style="width: 310px"
@@ -208,24 +212,27 @@
         </el-input>
       </el-form-item>
       <el-form-item label="检查难度" prop="uCheck">
-        <el-input v-model="modelData.uCheck" style="width: 141px"></el-input>
+        <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" style="width: 141px"></el-input>
+        <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>
@@ -253,20 +260,305 @@
                                              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 {shopNoticeSearch} from "../../../../api/shopOrder/shopOrder";
+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,
@@ -543,7 +835,121 @@ export default {
           })
         }
       })
-    }
+    },
+
+    openDialog(row) {
+      let image = ['jpg', 'jpeg', 'png', 'gif', 'bmp']
+      let pdf = ['pdf']
+      let type = ''
+      row.fileType = row.fileSuffix
+      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) {
+      // 预览文件
+      let image = ['jpg', 'jpeg', 'png', 'gif', 'bmp']
+      let video = ['mp4', 'avi', 'mov', 'wmv', 'flv']
+      let office = ['doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx']
+      let txt = ['txt']
+      let type = ''
+      let pdf = ['pdf']
+      row.fileType = row.fileType
+      if (image.includes(row.fileType.toLowerCase())) {
+        type = 'image/' + row.fileType
+        downLoadObjectFile(row).then(({data}) => {
+          const blob = new Blob([data], { type: type });
+          // 创建URL来生成预览
+          const fileURL = URL.createObjectURL(blob);
+          // 在新标签页中打开文件预览
+          const newTab = window.open(fileURL, '_blank')
+        })
+      }
+      else if (video.includes(row.fileType.toLowerCase())) {
+        type = 'video/' + row.fileType
+        downLoadObjectFile(row).then(({data}) => {
+          const blob = new Blob([data], { type: type });
+          // 创建URL来生成预览
+          const fileURL = URL.createObjectURL(blob);
+          // 在新标签页中打开文件预览
+          const newTab = window.open(fileURL, '_blank')
+        })
+      }
+      else if (txt.includes(row.fileType.toLowerCase())) {
+        type = 'text/plain'
+        downLoadObjectFile(row).then(({data}) => {
+          const blob = new Blob([data], { type: type });
+          // 创建URL来生成预览
+          const fileURL = URL.createObjectURL(blob);
+          // 在新标签页中打开文件预览
+          const newTab = window.open(fileURL, '_blank')
+        })
+      }
+      else if (office.includes(row.fileType.toLowerCase())) {
+        if (row.fileType.toLowerCase() === 'doc' || row.fileType.toLowerCase() === 'docx') {
+          type = 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
+        } else if (row.fileType.toLowerCase() === 'ppt' || row.fileType.toLowerCase() === 'pptx') {
+          type = 'application/vnd.openxmlformats-officedocument.presentationml.presentation'
+        } else {
+          type = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+        }
+        downLoadObjectFile(row).then(({data}) => {
+          const blob = new Blob([data], { type: type });
+          // 创建URL来生成预览
+          const fileURL = URL.createObjectURL(blob);
+          // 在新标签页中打开文件预览
+          const newTab = window.open(fileURL, '_blank')
+        })
+      }
+      else if (pdf.includes(row.fileType.toLowerCase())) {
+        type = 'application/pdf'
+        downLoadObjectFile(row).then(({data}) => {
+          const blob = new Blob([data], { type: type });
+          // 创建URL来生成预览
+          const fileURL = URL.createObjectURL(blob);
+          // 在新标签页中打开文件预览
+          const newTab = window.open(fileURL, '_blank')
+        })
+      }
+      else {
+        this.$message({
+          message: '不支持的文件类型',
+          type: 'warning'
+        })
+      }
+    },
+    // 下载
+    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)
+        })
+    },
   }
 }
 
@@ -554,4 +960,8 @@ export default {
   text-align: right;
 }
 
+/* 自定义 Dialog 样式使其可拖动 */
+.el-dialog__header {
+  cursor: move;
+}
 </style>