押金详情【修改】文件上传限制 下载pdf&查看pdf 驳回说明

package-lock.json

@@ -14,6 +14,7 @@
         "core-js": "3.6.5",
         "echarts": "^5.1.1",
         "element-ui": "2.13.2",
+        "file-saver": "^2.0.5",
         "js-cookie": "2.2.0",
         "normalize.css": "7.0.0",
         "nprogress": "0.2.0",
@@ -9224,6 +9225,11 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
+    },
     "node_modules/file-uri-to-path": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
@@ -28279,6 +28285,11 @@
         }
       }
     },
+    "file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
+    },
     "file-uri-to-path": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",

package.json

@@ -19,6 +19,7 @@
     "core-js": "3.6.5",
     "echarts": "^5.1.1",
     "element-ui": "2.13.2",
+    "file-saver": "^2.0.5",
     "js-cookie": "2.2.0",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",

src/components/Common/image-upload.vue

@@ -205,11 +205,12 @@ export default {
       const suffix = file.name.match(/.[^.]+$/)[0]
       // 押金申请上传限制
       if (this.startRestricting) {
-        console.log(this.restrictFilename.join(''))
-        if (fileName.includes(this.restrictFilename.join('')) === -1 || suffix.includes('zip', 'rar', 'gz', 'apk')) {
+        const filterKeywords = this.restrictFilename.filter(k => fileName.includes(k))
+        console.log(filterKeywords)
+        if (!filterKeywords.length || suffix.includes('zip', 'rar', 'gz', 'apk')) {
           this.fileName = `其他文件${suffix}`
-          console.log(this.fileName, '4454')
         }
+        
       }
 
       this.$emit('handleIsFileName', file.name)

src/utils/util.js

@@ -1,6 +1,6 @@
-
-import axios from 'axios'
-import { getToken } from '@/utils/auth'
+import axios from "axios";
+import FileSaver from "file-saver";
+import { getToken } from "@/utils/auth";
 
 /**
  * 删除对象中的空值
@@ -8,10 +8,14 @@ import { getToken } from '@/utils/auth'
  * @returns {Object}
  */
 export function deleteEmptyObj(obj) {
-  let newObj = obj;
-  for(var key in newObj) {
-    if(newObj[key] === '' || newObj[key] === null || newObj[key] === undefined) {
-      delete newObj[key]
+  const newObj = obj;
+  for (var key in newObj) {
+    if (
+      newObj[key] === "" ||
+      newObj[key] === null ||
+      newObj[key] === undefined
+    ) {
+      delete newObj[key];
     }
   }
   return newObj;
@@ -27,7 +31,7 @@ export function deleteEmptyObj(obj) {
 export function findElem(array, attr, val) {
   for (var i = 0; i < array.length; i++) {
     if (array[i][attr] == val) {
-        return i; //返回当前索引值
+      return i; // 返回当前索引值
     }
   }
   return -1;
@@ -40,15 +44,19 @@ export function findElem(array, attr, val) {
  * @returns
  */
 export function createParamsUrl(url, params) {
-  if(typeof(url) == 'undefined' || url == null || url == '') {
-    return '';
+  if (typeof url === "undefined" || url == null || url == "") {
+    return "";
   }
-  if(typeof(params) == 'undefined' || params == null || typeof(params) != 'object') {
-    return '';
+  if (
+    typeof params === "undefined" ||
+    params == null ||
+    typeof params !== "object"
+  ) {
+    return "";
   }
-  url += (url.indexOf("?") != -1) ? "" : "?";
-  for(var k in params) {
-    url += ((url.indexOf("=") != -1) ? "&" : "") + k + "=" + encodeURI(params[k]);
+  url += url.indexOf("?") != -1 ? "" : "?";
+  for (var k in params) {
+    url += (url.indexOf("=") != -1 ? "&" : "") + k + "=" + encodeURI(params[k]);
   }
   return url;
 }
@@ -58,10 +66,10 @@ export function createParamsUrl(url, params) {
  * @param {*} obj
  * @returns
  */
-export function downloadFiles(url, params={}) {
+export function downloadFiles(url, params = {}) {
   params.token = getToken();
-  let newParams = deleteEmptyObj(params);
-  let newUrl = createParamsUrl(url, newParams);
+  const newParams = deleteEmptyObj(params);
+  const newUrl = createParamsUrl(url, newParams);
   window.open(process.env.VUE_APP_BASE_API + newUrl);
 }
 
@@ -72,16 +80,24 @@ export function downloadFiles(url, params={}) {
  */
 export async function handleImport(url, formData) {
   const Result = await new Promise((resolve, reject) => {
-    axios.post(
-      process.env.VUE_APP_BASE_API + url,
-      formData,
-      
-      {headers: { 'Content-Type': 'multipart/form-data', 'x-token': getToken() } })
-    .then(res => {
-      resolve(res.data)
-    }).catch(err => {
-      reject(err)
-    })
+    axios
+      .post(
+        process.env.VUE_APP_BASE_API + url,
+        formData,
+
+        {
+          headers: {
+            "Content-Type": "multipart/form-data",
+            "x-token": getToken(),
+          },
+        }
+      )
+      .then((res) => {
+        resolve(res.data);
+      })
+      .catch((err) => {
+        reject(err);
+      });
   });
   return Result;
 }
@@ -92,16 +108,25 @@ export async function handleImport(url, formData) {
  */
 export async function handleImportTwo(url, formData) {
   const Result = await new Promise((resolve, reject) => {
-    axios.post(
-      process.env.VUE_APP_BASE_API + url,
-      formData,
-      
-      { responseType: 'arraybuffer',headers: { 'Content-Type': 'multipart/form-data', 'x-token': getToken() } })
-    .then(res => {
-      resolve(res.data)
-    }).catch(err => {
-      reject(err)
-    })
+    axios
+      .post(
+        process.env.VUE_APP_BASE_API + url,
+        formData,
+
+        {
+          responseType: "arraybuffer",
+          headers: {
+            "Content-Type": "multipart/form-data",
+            "x-token": getToken(),
+          },
+        }
+      )
+      .then((res) => {
+        resolve(res.data);
+      })
+      .catch((err) => {
+        reject(err);
+      });
   });
   return Result;
 }
@@ -112,11 +137,13 @@ export async function handleImportTwo(url, formData) {
  * @param {*} type
  */
 export function resetDateFormat(date, type) {
-  let newDate = '';
-  if (!date) {return ''}
+  let newDate = "";
+  if (!date) {
+    return "";
+  }
   // type=1: yyyy-MM-dd 转 yyyy-MM-dd HH:mm:ss
-  if(type == 1 || !type) {
-    newDate = date + ' 00:00:00';
+  if (type == 1 || !type) {
+    newDate = date + " 00:00:00";
   }
 }
 
@@ -133,48 +160,79 @@ export function resetDateFormat(date, type) {
  * dateFormat("YYYY-mm-dd HH:MM:SS WWW", date)       2020-02-09 14:45:12 星期日
  * dateFormat("YYYY-mm-dd HH:MM:SS QQQQ", date)      2020-02-09 14:09:36 第一季度
  * dateFormat("YYYY-mm-dd HH:MM:SS WWW QQQQ", date)  2020-02-09 14:46:12 星期日 第一季度
-   */
-export function dateFormat(format,date){
-  let we = date.getDay();                                 // 星期
-  let qut = Math.floor((date.getMonth()+3)/3).toString(); // 季度
+ */
+export function dateFormat(format, date) {
+  const we = date.getDay(); // 星期
+  const qut = Math.floor((date.getMonth() + 3) / 3).toString(); // 季度
   const opt = {
-    "Y+":date.getFullYear().toString(),                 // 年
-    "m+":(date.getMonth()+1).toString(),                // 月(月份从0开始，要+1)
-    "d+":date.getDate().toString(),                     // 日
-    "H+":date.getHours().toString(),                    // 时
-    "M+":date.getMinutes().toString(),                  // 分
-    "S+":date.getSeconds().toString(),                  // 秒
-    "q+":qut, // 季度
-  }
-  const week = {      // 中文数字 (星期)
-    "0":"日",
-    "1":"一",
-    "2":"二",
-    "3":"三",
-    "4":"四",
-    "5":"五",
-    "6":"六"
+    "Y+": date.getFullYear().toString(), // 年
+    "m+": (date.getMonth() + 1).toString(), // 月(月份从0开始，要+1)
+    "d+": date.getDate().toString(), // 日
+    "H+": date.getHours().toString(), // 时
+    "M+": date.getMinutes().toString(), // 分
+    "S+": date.getSeconds().toString(), // 秒
+    "q+": qut, // 季度
   };
-  const quarter = {   // 中文数字（季度）
-    "1" : "一",
-    "2" : "二",
-    "3" : "三",
-    "4" : "四",
+  const week = {
+    // 中文数字 (星期)
+    0: "日",
+    1: "一",
+    2: "二",
+    3: "三",
+    4: "四",
+    5: "五",
+    6: "六",
   };
-  if(/(W+)/.test(format)){
-    format = format.replace(RegExp.$1,(RegExp.$1.length >1 ? (RegExp.$1.length >2 ? '星期'+week[we] : '周'+week[we]) : week[we]))
+  const quarter = {
+    // 中文数字（季度）
+    1: "一",
+    2: "二",
+    3: "三",
+    4: "四",
+  };
+  if (/(W+)/.test(format)) {
+    format = format.replace(
+      RegExp.$1,
+      RegExp.$1.length > 1
+        ? RegExp.$1.length > 2
+          ? "星期" + week[we]
+          : "周" + week[we]
+        : week[we]
+    );
   }
   if (/(Q+)/.test(format)) {
     // 输入一个Q，只输出一个中文数字，输入4个Q，则拼接上字符串
-    format = format.replace(RegExp.$1,(RegExp.$1.length == 4 ? '第'+quarter[qut]+'季度' : quarter[qut]));
+    format = format.replace(
+      RegExp.$1,
+      RegExp.$1.length == 4 ? "第" + quarter[qut] + "季度" : quarter[qut]
+    );
   }
-  for(let k in opt){
-    let r = new RegExp("("+k+")").exec(format);
-    if(r){
+  for (const k in opt) {
+    const r = new RegExp("(" + k + ")").exec(format);
+    if (r) {
       // 若输入的长度不为1，则前面补零
-      format = format.replace(r[1],(RegExp.$1.length == 1 ? opt[k] : opt[k].padStart(RegExp.$1.length,'0')))
+      format = format.replace(
+        r[1],
+        RegExp.$1.length == 1 ? opt[k] : opt[k].padStart(RegExp.$1.length, "0")
+      );
     }
   }
-  return format
+  return format;
 }
 
+/**
+ * @param url {string} pdf地址
+ * @param fileName {string} pdf名称
+ */
+export function downloadPdf(url, fileName) {
+  axios({
+    method: "get",
+    url,
+    responseType: "blob",
+  }).then((res) => {
+    const file = new Blob([res.data], {
+      type: "application/pdf",
+    });
+    FileSaver(file, fileName);
+  });
+}

src/views/engin_deposit/components/deposit-apply-surrender.vue

@@ -1,13 +1,13 @@
 <template>
   <div>
     <div class="sty">
-      <el-page-header @back="goBack" content="申请退押"> </el-page-header>
+      <el-page-header content="申请退押" @back="goBack" />
     </div>
-    <el-divider></el-divider>
+    <el-divider />
     <h3>工程项目信息</h3>
-    <el-divider></el-divider>
+    <el-divider />
     <div class="diy-table-1">
-      <el-form :model="details" ref="form">
+      <el-form ref="form" :model="details">
         <el-row :gutter="0">
           <el-col :xs="12" :sm="8" :lg="8" class="item">
             <div class="label">工程登录编码</div>
@@ -51,7 +51,7 @@
                   v-model="details.refFactoryNo"
                   placeholder="厂工程编码"
                   size="small"
-                ></el-input>
+                />
               </el-form-item>
             </div>
           </el-col>
@@ -73,8 +73,8 @@
             <div class="value">{{ details.refUseUnit }}</div>
           </el-col>
           <el-col :xs="24" :sm="24" :lg="8" class="item">
-            <div class="label"></div>
-            <div class="value"></div>
+            <div class="label" />
+            <div class="value" />
           </el-col>
           <el-col :xs="24" :sm="24" :lg="24" class="item">
             <div class="label">安装时间</div>
@@ -86,8 +86,7 @@
                   placeholder="安装时间"
                   default-time="00:00:00"
                   value-format="yyyy-MM-dd HH:mm:ss"
-                >
-                </el-date-picker>
+                />
               </el-form-item>
             </div>
           </el-col>
@@ -110,7 +109,7 @@
       </el-form>
     </div>
     <h3>货品信息</h3>
-    <el-divider></el-divider>
+    <el-divider />
     <!-- 列表 -->
     <div class="mymain-container">
       <div class="table">
@@ -132,82 +131,82 @@
             prop="materialNumber"
             min-width="160"
             show-overflow-tooltip
-          ></el-table-column>
+          />
           <el-table-column
             align="center"
             label="产品编码"
             prop="materialOldNumber"
             min-width="160"
             show-overflow-tooltip
-          ></el-table-column>
+          />
           <el-table-column
             align="center"
             label="产品名称"
             prop="materialName"
             min-width="160"
             show-overflow-tooltip
-          ></el-table-column>
+          />
           <el-table-column
             align="center"
             label="规格型号"
             prop="specification"
             min-width="160"
             show-overflow-tooltip
-          ></el-table-column>
+          />
           <el-table-column
             align="center"
             label="单价"
             prop="price"
             min-width="160"
             show-overflow-tooltip
-          ></el-table-column>
+          />
           <el-table-column
             align="center"
             label="数量"
             prop="qty"
             min-width="160"
             show-overflow-tooltip
-          ></el-table-column>
+          />
           <el-table-column
             align="center"
             label="金额"
             prop="totalAmount"
             min-width="160"
             show-overflow-tooltip
-          ></el-table-column>
+          />
           <el-table-column
             align="center"
             label="发货数量"
             prop="hasSendQty"
             min-width="160"
             show-overflow-tooltip
-          ></el-table-column>
+          />
           <el-table-column
             align="center"
             label="押金金额"
             prop="depositAmount"
             min-width="160"
             show-overflow-tooltip
-          ></el-table-column>
+          />
           <el-table-column
             align="center"
             label="上交资料"
             prop="dataQty"
             min-width="160"
             show-overflow-tooltip
-          ></el-table-column>
+          />
           <el-table-column
             align="center"
             label="收差全额"
             prop="diffAmount"
             min-width="160"
             show-overflow-tooltip
-          ></el-table-column>
+          />
         </el-table>
       </div>
     </div>
     <h3>上传资料</h3>
-    <el-divider></el-divider>
+    <el-divider />
     <!-- 筛选条件 -->
     <div>
       <el-form
@@ -220,30 +219,29 @@
         <el-row :gutter="20">
           <el-col :xs="24" :sm="12" :lg="24">
             <el-form-item label="工程验收资料" prop="">
-              <imageUpload :fileList="fileList"  :multiple="true" :startRestricting="true" :restrictFilename="restrictFilename"/>
+              <imageUpload :file-list="fileList" :multiple="true" :start-restricting="true" :restrict-filename="restrictFilename" />
             </el-form-item>
           </el-col>
           <el-col :xs="24" :sm="12" :lg="6">
             <el-form-item label="申请人" prop="submitBy">
               <el-input
-              readonly
                 v-model="details.submitName"
+                readonly
                 placeholder="请输入"
-              ></el-input>
+              />
             </el-form-item>
           </el-col>
           <el-col :xs="24" :sm="12" :lg="6">
             <el-form-item label="申请日期" prop="submitTime">
               <el-date-picker
-              readonly
                 v-model="details.submitTime"
+                readonly
                 class="dateStyle"
                 type="datetime"
                 placeholder="选择日期"
-                   default-time="00:00:00"
-                  value-format="yyyy-MM-dd HH:mm:ss"
-              >
-              </el-date-picker>
+                default-time="00:00:00"
+                value-format="yyyy-MM-dd HH:mm:ss"
+              />
 
             </el-form-item>
           </el-col>
@@ -254,17 +252,21 @@
                 type="textarea"
                 placeholder="请输入"
                 class="textareaStyle"
-              ></el-input>
+              />
             </el-form-item>
           </el-col>
           <el-col :xs="24" :sm="24" :lg="24">
             <el-form-item label="">
-              <el-button type="primary" size="small" @click="handleSvse"
-                >保存</el-button
-              >
-              <el-button type="primary" size="small" @click="handleReset"
-                >重置</el-button
-              >
+              <el-button
+                type="primary"
+                size="small"
+                @click="handleSvse"
+              >保存</el-button>
+              <el-button
+                type="primary"
+                size="small"
+                @click="handleReset"
+              >重置</el-button>
             </el-form-item>
           </el-col>
         </el-row>
@@ -280,60 +282,58 @@ import imageUpload from '@/components/Common/image-upload.vue'
 
 export default {
   components: {
-    imageUpload,
+    imageUpload
   },
   data() {
     return {
-      listLoading:false,
+      listLoading: false,
       baseURL: process.env.VUE_APP_BASE_API,
       fileList: [],
       details: {},
       restrictFilename: [
-        '安装结算单', '合同', '竣工明细表', '审核表', '收据', '照片'
+        '结算单', '合同', '明细表', '审核表', '收据', '发票', '照片'
       ]
-    };
+    }
   },
   created() {
     geDetail({ id: this.$parent.depositManageId }).then((res) => {
-      this.details = res.data;
+      this.details = res.data
       res.data.items.forEach((item) => {
         // item.number = (item.qty*100 - item.directTransferQty*100 - item.retiredQty*100) / 100;
-        item.sums1 = ["hasSendQty", "dataQty", "qty"];
-        item.sums2 = ["totalAmount", "diffAmount", "price"];
-      });
-    });
+        item.sums1 = ['hasSendQty', 'dataQty', 'qty']
+        item.sums2 = ['totalAmount', 'diffAmount', 'price']
+      })
+    })
   },
   methods: {
     goBack() {
-      this.$parent.showPage = 1;
+      this.$parent.showPage = 1
     },
     handleSvse() {
-        if (!this.details.installDate) {
-            this.$errorMsg('请选择安装时间')
-            return
-        }
-        this.fileList.forEach(el => {
-            this.details.dataList.push({
-              dataDescribe:el.name,
-              enginOrderNo:this.details.refProjectNo,
-              fileName:el.name,
-              fileUrl:el.url,
-
-            })
-        });
-
+      if (!this.details.installDate) {
+        this.$errorMsg('请选择安装时间')
+        return
+      }
+      this.fileList.forEach(el => {
+        this.details.dataList.push({
+          dataDescribe: el.name,
+          enginOrderNo: this.details.refProjectNo,
+          fileName: el.name,
+          fileUrl: el.url
+        })
+      })
       applyDeposit(this.details).then((res) => {
-        this.$successMsg("申请成功");
-        this.$parent.showPage = 1;
-        this.$parent.deduction=''
+        this.$successMsg('申请成功')
+        this.$parent.showPage = 1
+        this.$parent.deduction = ''
         this.$parent.getList()
-      });
+      })
     },
     handleReset() {
-      this.$refs.form.resetFields();
-    },
-  },
-};
+      this.$refs.form.resetFields()
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -368,5 +368,4 @@ export default {
 }
 }
 
-
 </style>

src/views/engin_deposit/components/deposit_list-detail.vue

@@ -276,11 +276,13 @@
                   class="file"
                   src="@/assets/common/ppt.png"
                 >
+
                 <img
                   v-if="checkFileType(scope.row.fileUrl) == 'pdf'"
                   class="file"
                   src="@/assets/common/pdf.png"
                 >
+
                 <img
                   v-if="checkFileType(scope.row.fileUrl) == 'file'"
                   class="file aaa"
@@ -309,8 +311,17 @@
                 <el-button
                   type="text"
                   class="textColor"
-                  @click="downLoadFn(scope.row.fileUrl)"
+                  @click="downLoadFn(scope.row.fileUrl,scope.row.fileName)"
                 >下载</el-button>
+
+                <el-button
+                  v-if="checkFileType(scope.row.fileUrl) == 'pdf'"
+                  type="text"
+                  class="textColor"
+                  @click="openPdf(scope.row.fileUrl)"
+                >
+                  查看
+                </el-button>
               </template>
             </el-table-column>
           </el-table>
@@ -374,6 +385,10 @@
             <div class="label">验收说明</div>
             <div class="value">{{ details.checkNote }}</div>
           </el-col>
+          <el-col :xs="24" :sm="24" :lg="24" v-if="details.confirmName" class="item">
+            <div class="label">驳回说明</div>
+            <div class="value">{{ details.confirmName }}</div>
+          </el-col>
         </el-row>
       </div>
       <div style="margin: 20px 0">
@@ -607,7 +622,7 @@
 <script>
 import { editInfo, geDetail, geOrderInfo, getListProject } from '@/api/engin_deposit.js'
 import { getList } from '@/api/supply/adjust'
-import { downloadFiles } from '@/utils/util'
+import { downloadFiles, downloadPdf } from '@/utils/util'
 import { getFileUrl } from '@/api/common'
 
 export default {
@@ -697,10 +712,17 @@ export default {
       downloadFiles('/deposit-manage/downZip', { parentId: this.$parent.depositManageId })
     },
     // 下载
-    downLoadFn(v) {
+    downLoadFn(v, fileName) {
+      if (this.checkFileType(v) === 'pdf') {
+        downloadPdf(this.$imageUrl + v, fileName)
+        return
+      }
       getFileUrl({ key: v }).then((res) => {
-        window.open(res.data);
-      });
+        window.open(res.data)
+      })
+    },
+    openPdf(pdfUrl) {
+      window.open(this.$imageUrl + pdfUrl)
     },
     // 检查文件类型
     checkFileType(url) {