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

<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>