供应商文件预览、下载、删除

yangfeng

2023-08-29 5159d19ed210ec3e14d157f9ae6221299bd46e34

供应商文件预览、下载、删除

 package-lock.json

@@ -1,15 +1,17 @@
{
  "name": "srm-web",
  "name": "crm-web",
  "version": "0.1.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "srm-web",
      "name": "crm-web",
      "version": "0.1.0",
      "dependencies": {
        "axios": "^1.4.0",
        "core-js": "^3.8.3",
        "docx-preview": "^0.1.18",
        "downloadjs": "^1.4.7",
        "element-ui": "^2.15.13",
        "vue": "^2.6.14",
        "vue-router": "^3.5.1",
@@ -4289,8 +4291,7 @@
    "node_modules/core-util-is": {
      "version": "1.0.3",
      "resolved": "https://registry.npmmirror.com/core-util-is/-/core-util-is-1.0.3.tgz",
      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
      "dev": true
      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
    },
    "node_modules/cosmiconfig": {
      "version": "7.1.0",
@@ -4879,6 +4880,14 @@
        "node": ">=6.0.0"
      }
    },
    "node_modules/docx-preview": {
      "version": "0.1.18",
      "resolved": "https://registry.npmmirror.com/docx-preview/-/docx-preview-0.1.18.tgz",
      "integrity": "sha512-nmkeghp9k4Qw+T3/sttwuMhTnn0gQaq23EN8dLoB7nxb/fEd8S57mh9l8j7SpVgpGg5MSW1WZJffv6Yoy29KaA==",
      "dependencies": {
        "jszip": ">=3.0.0"
      }
    },
    "node_modules/dom-converter": {
      "version": "0.2.0",
      "resolved": "https://registry.npmmirror.com/dom-converter/-/dom-converter-0.2.0.tgz",
@@ -4952,6 +4961,11 @@
      "resolved": "https://registry.npmmirror.com/dotenv-expand/-/dotenv-expand-5.1.0.tgz",
      "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==",
      "dev": true
    },
    "node_modules/downloadjs": {
      "version": "1.4.7",
      "resolved": "https://registry.npmmirror.com/downloadjs/-/downloadjs-1.4.7.tgz",
      "integrity": "sha512-LN1gO7+u9xjU5oEScGFKvXhYf7Y/empUIIEAGBs1LzUq/rg5duiDrkuH5A2lQGd5jfMOb9X9usDa2oVXwJ0U/Q=="
    },
    "node_modules/duplexer": {
      "version": "0.1.2",
@@ -6534,6 +6548,11 @@
        "node": ">= 4"
      }
    },
    "node_modules/immediate": {
      "version": "3.0.6",
      "resolved": "https://registry.npmmirror.com/immediate/-/immediate-3.0.6.tgz",
      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ=="
    },
    "node_modules/immutable": {
      "version": "4.3.2",
      "resolved": "https://registry.npmmirror.com/immutable/-/immutable-4.3.2.tgz",
@@ -6584,8 +6603,7 @@
    "node_modules/inherits": {
      "version": "2.0.4",
      "resolved": "https://registry.npmmirror.com/inherits/-/inherits-2.0.4.tgz",
      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
      "dev": true
      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
    },
    "node_modules/ipaddr.js": {
      "version": "2.1.0",
@@ -6776,8 +6794,7 @@
    "node_modules/isarray": {
      "version": "1.0.0",
      "resolved": "https://registry.npmmirror.com/isarray/-/isarray-1.0.0.tgz",
      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
      "dev": true
      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
    },
    "node_modules/isexe": {
      "version": "2.0.0",
@@ -6936,6 +6953,44 @@
        "graceful-fs": "^4.1.6"
      }
    },
    "node_modules/jszip": {
      "version": "3.10.1",
      "resolved": "https://registry.npmmirror.com/jszip/-/jszip-3.10.1.tgz",
      "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
      "dependencies": {
        "lie": "~3.3.0",
        "pako": "~1.0.2",
        "readable-stream": "~2.3.6",
        "setimmediate": "^1.0.5"
      }
    },
    "node_modules/jszip/node_modules/readable-stream": {
      "version": "2.3.8",
      "resolved": "https://registry.npmmirror.com/readable-stream/-/readable-stream-2.3.8.tgz",
      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
      "dependencies": {
        "core-util-is": "~1.0.0",
        "inherits": "~2.0.3",
        "isarray": "~1.0.0",
        "process-nextick-args": "~2.0.0",
        "safe-buffer": "~5.1.1",
        "string_decoder": "~1.1.1",
        "util-deprecate": "~1.0.1"
      }
    },
    "node_modules/jszip/node_modules/safe-buffer": {
      "version": "5.1.2",
      "resolved": "https://registry.npmmirror.com/safe-buffer/-/safe-buffer-5.1.2.tgz",
      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
    },
    "node_modules/jszip/node_modules/string_decoder": {
      "version": "1.1.1",
      "resolved": "https://registry.npmmirror.com/string_decoder/-/string_decoder-1.1.1.tgz",
      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
      "dependencies": {
        "safe-buffer": "~5.1.0"
      }
    },
    "node_modules/kind-of": {
      "version": "6.0.3",
      "resolved": "https://registry.npmmirror.com/kind-of/-/kind-of-6.0.3.tgz",
@@ -6984,6 +7039,14 @@
      },
      "engines": {
        "node": ">= 0.8.0"
      }
    },
    "node_modules/lie": {
      "version": "3.3.0",
      "resolved": "https://registry.npmmirror.com/lie/-/lie-3.3.0.tgz",
      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
      "dependencies": {
        "immediate": "~3.0.5"
      }
    },
    "node_modules/lilconfig": {
@@ -8320,6 +8383,11 @@
        "node": ">=6"
      }
    },
    "node_modules/pako": {
      "version": "1.0.11",
      "resolved": "https://registry.npmmirror.com/pako/-/pako-1.0.11.tgz",
      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="
    },
    "node_modules/param-case": {
      "version": "3.0.4",
      "resolved": "https://registry.npmmirror.com/param-case/-/param-case-3.0.4.tgz",
@@ -9085,8 +9153,7 @@
    "node_modules/process-nextick-args": {
      "version": "2.0.1",
      "resolved": "https://registry.npmmirror.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
      "dev": true
      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
    },
    "node_modules/progress": {
      "version": "2.0.3",
@@ -9768,6 +9835,11 @@
      "engines": {
        "node": ">= 0.8.0"
      }
    },
    "node_modules/setimmediate": {
      "version": "1.0.5",
      "resolved": "https://registry.npmmirror.com/setimmediate/-/setimmediate-1.0.5.tgz",
      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA=="
    },
    "node_modules/setprototypeof": {
      "version": "1.2.0",
@@ -10624,8 +10696,7 @@
    "node_modules/util-deprecate": {
      "version": "1.0.2",
      "resolved": "https://registry.npmmirror.com/util-deprecate/-/util-deprecate-1.0.2.tgz",
      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
      "dev": true
      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
    },
    "node_modules/utila": {
      "version": "0.4.0",

 package.json

@@ -10,6 +10,8 @@
  "dependencies": {
    "axios": "^1.4.0",
    "core-js": "^3.8.3",
    "docx-preview": "^0.1.18",
    "downloadjs": "^1.4.7",
    "element-ui": "^2.15.13",
    "vue": "^2.6.14",
    "vue-router": "^3.5.1",

 src/api/supplierManage/supplier.js

@@ -81,6 +81,12 @@
    params: data
  })
}
// 下载合同
export const downloadContract = async (data) => {
  return await axios.get(`/api/con/downloadContract`, {
    params: data
  })
}

// 更新所属行业
export function updateIndustry(data) {

 src/router/index.js

@@ -11,6 +11,7 @@
const supplierManage = (resolve) => require(["@/views/supplierManage/index"], resolve)
const purchaseManage = (resolve) => require(["@/views/purchaseManage/index"], resolve)
const productManage = (resolve) => require(["@/views/productManage/index"], resolve)
const PreviewFile = (resolve) => require(["@/views/supplierManage/supplier/PreviewFile"], resolve)

export const routes = [
  {
@@ -68,6 +69,14 @@
    }
  },
  {
    path: "/PreviewFile",
    component: PreviewFile,
    meta: {
      isLogin: true,
      title: "预览"
    }
  },
  {
    path: "*",
    component: () => import("@/views/other/error/404"),
    meta: {

 src/views/supplierManage/supplier/AddSupplier.vue

@@ -160,7 +160,7 @@
                      <span style="margin-left: 5px">合同附件</span>
                    </div>
                  </template>
                  <div class="annex-view">
                  <div v-if="file_id === 0" class="annex-view">
                    <div @click="addAnnexClick">
                      <el-upload
                        class="upload-demo"
@@ -178,13 +178,15 @@
                      </el-upload>
                    </div>
                  </div>
                  <div v-if="file_name && file_name.length > 0" class="file-content">
                  <!-- v-if="file_name && file_name.length > 0" -->
                  <div v-else class="file-content">
                    <div>{{ file_name }}</div>
                    <div>
                      <el-button type="text">预览</el-button>
                      <el-button type="text">下载</el-button>
                      <el-button type="text">删除</el-button>
                      <el-button type="text" @click="previewClick" style="margin-left: 10px">预览</el-button>
                      <el-button type="text" @click="downloadClick">下载</el-button>
                      <el-button type="text" @click="delContractClick">删除</el-button>
                    </div>
                    <div ref="file"></div>
                  </div>
                </el-form-item>
              </el-col>
@@ -208,11 +210,15 @@
  createContract,
  updateSupplier,
  getIndustryList,
  previewContract
  getSupplierTypeList,
  deleteContract
  // previewContract
} from "@/api/supplierManage/supplier"
import EditDropdownDialog from "@/views/other/commonDialog/EditDropdownDialog"
import { getSupplierTypeList } from "@/api/supplierManage/supplier"
import { getMemberListFromGrpc } from "@/api/common/other"
import download from "downloadjs"
// import { renderAsync } from "docx-preview"
// import axios from "axios"
export default {
  name: "AddSupplierDialog",
  props: {
@@ -263,8 +269,10 @@
        infomation: {}
      },
      fileList: [],
      file_name: "",
      file_id: this.addCommonConfig.infomation.fileId
      file_name: this.addCommonConfig.infomation.file_name,
      file_id: this.addCommonConfig.infomation.fileId,
      previewUrl: "",
      loading: false
    }
  },
  created() {
@@ -272,7 +280,7 @@
    this.getIndustryList()
    this.getMemberList()
    if (this.editConfig.title === "修改") {
      this.previewContract()
      // this.previewContract()
    }
  },
  methods: {
@@ -302,14 +310,6 @@
        pageSize: 100
      }).then((res) => {
        this.industryOptions = res.data.data.list
      })
    },
    // 合同附件信息
    async previewContract() {
      await previewContract({
        id: 1
      }).then((res) => {
        console.log(res.data)
      })
    },
    handleClose() {
@@ -364,7 +364,7 @@
        name: data.name || "",
        number: data.number || "",
        phone: data.phone || "",
        responsiblePersonId: data.responsiblePersonId || 0,
        responsiblePersonName: data.responsiblePersonName || "",
        status: data.status || 0,
        supplierType: data.supplierType || "",
        url: data.url || ""
@@ -416,6 +416,37 @@
    handleExceed(files, fileList) {
      console.log(fileList)
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件`)
    },
    // 下载合同
    downloadClick() {
      let url = "/api/con/downloadContract?id=" + this.file_id
      download(url, "", "")
    },
    // 删除合同
    delContractClick() {
      deleteContract({
        id: this.file_id
      }).then((res) => {
        console.log(res)
        this.$message.success(res.msg)
        this.file_id = 0
      })
    },
    // 预览合同
    async previewClick() {
      this.previewUrl = "/api/con/previewContract?id=" + this.file_id
      if (this.file_name.includes("pdf")) {
        window.open(this.previewUrl, "_blank")
      } else {
        let routeUrl = this.$router.resolve({
          path: "/PreviewFile",
          query: {
            //要传的参数
            previewUrl: this.previewUrl
          }
        })
        window.open(routeUrl.href, "_blank")
      }
    }
  }
}

 src/views/supplierManage/supplier/DetailSupplier.vue

@@ -69,7 +69,9 @@
              </ul>
              <div class="business_scope">
                <div class="content-title">{{ "合同附件" }}</div>
                <div class="content-data">{{ record ? record : "--" }}</div>
                <div class="content-data">
                  {{ detailConfig.infomation.contract.fileName ? detailConfig.infomation.contract.fileName : "--" }}
                </div>
              </div>
            </div>
          </div>

 src/views/supplierManage/supplier/PreviewFile.vue

New file
@@ -0,0 +1,61 @@
<template>
  <div class="docx-container">
    <div ref="file"></div>
  </div>
</template>

<script>
import axios from "axios"
import { renderAsync } from "docx-preview"

export default {
  props: {
    url: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      docxOptions: {
        className: "kaimo-docx-666", // string：默认和文档样式类的类名/前缀
        inWrapper: true, // boolean：启用围绕文档内容的包装器渲染
        ignoreWidth: false, // boolean：禁用页面的渲染宽度
        ignoreHeight: false, // boolean：禁止渲染页面高度
        ignoreFonts: false, // boolean：禁用字体渲染
        breakPages: true, // boolean：在分页符上启用分页
        ignoreLastRenderedPageBreak: false, // boolean：在 lastRenderedPageBreak 元素上禁用分页
        experimental: true, // boolean：启用实验功能（制表符停止计算）
        trimXmlDeclaration: true, // boolean：如果为true，解析前会从xmlTemplate 文档中移除 xmlTemplate 声明
        useBase64URL: false, // boolean：如果为true，图片、字体等会转为base 64 URL，否则使用URL.createObjectURL
        useMathMLPolyfill: false, // boolean：包括用于 chrome、edge 等的 MathML polyfill。
        showChanges: false, // boolean：启用文档更改的实验性渲染（插入/删除）
        debug: false // boolean：启用额外的日志记录
      }
    }
  },
  mounted() {
    this.renderFile()
  },
  methods: {
    renderFile() {
      console.log(this.url)
      var previewUrl = this.$route.query.previewUrl
      axios({
        method: "get",
        responseType: "blob",
        url: previewUrl
      }).then((response) => {
        renderAsync(response.data, this.$refs.file, null, this.docxOptions)
      })
    }
  }
}
</script>

<style scoped>
.docx-container ::v-deep .docx-wrapper {
  background-color: #fff;
  padding: 40px 40px;
}
</style>

 src/views/supplierManage/supplier/index.vue

@@ -282,6 +282,7 @@
    addBtnClick() {
      this.editConfig.visible = true
      this.editConfig.title = "新建"
      this.editConfig.infomation = { fileId: 0 }
    },
    // 启用供应商
    async enableClick(row, value) {
@@ -300,7 +301,7 @@
    modifyClick(row) {
      this.editConfig.visible = true
      this.editConfig.title = "修改"
      this.editConfig.infomation = { ...row }
      this.editConfig.infomation = { ...row, file_name: row.contract.fileName }
    },
    // 相关供应商
    raleteClick(row) {