U 压缩包解压预览

he wei

2024-01-03 0e86fcacac365d077ec718fe95103a5ae6af3df8

U 压缩包解压预览

 src/pages/resourceManage/product/details/apis.js

@@ -103,3 +103,15 @@
    params: { fileUrl },
  });
};

/**
 * 解压压缩包 并返回内部目录结构及路径
 * @returns
 */
export const decompress = (compressedFileUrl) => {
  return axios({
    method: "GET",
    url: "zipAndRar/decompress",
    params: { compressedFileUrl },
  });
};

 src/pages/resourceManage/product/details/details.vue

@@ -249,6 +249,9 @@
              >锁定版本</a-button
            >
              <a-button type="primary" @click="viewSopFile">SOP查看</a-button>
            <a-button v-if="originalZipUrl" type="primary" @click="preview"
              >原始包预览</a-button
            >
          </template>
        </a-card>
      </a-layout-footer>
@@ -429,16 +432,59 @@
        <a-empty v-else />
      </div>
    </a-modal>

    <a-modal
      :visible="fileTreeViewVisible"
      :footer="null"
      :width="860"
      title="文件列表"
      :destroyOnClose="true"
      @cancel="fileTreeViewVisible = false"
    >
      <div class="log-content">
        <a-tree
          class="file-tree-view"
          v-if="fileTreeView.length"
          :show-line="true"
          defaultExpandAll
          :tree-data="fileTreeView"
        >
          <template slot="custom" slot-scope="item">
            <div class="flex-r space-between">
              <span class="node-title">{{ item.title }} </span>
              <span
                class="icon-wrap"
                v-if="item.isLeaf && viewAble(item.type)"
                title="预览"
                @click="view(item)"
              >
                <a-icon type="file-search" />
              </span>
            </div>
          </template>
        </a-tree>
        <a-empty v-else />
      </div>
    </a-modal>
      <a-modal
          :visible="showSop"
          :footer="null"
          :width="1366"
          title="SOP查看"
          :destroyOnClose="true"
          @cancel="showSop = false">
      @cancel="showSop = false"
    >
          <div style="height: 600px">
              <sop-list :parentCode="parentCode"></sop-list>
          </div>
    </a-modal>
    <a-modal
      :width="600"
      :visible="previewVisible"
      :footer="null"
      @cancel="handleCancel"
    >
      <img alt="" style="width: 100%" :src="imgUrl" />
      </a-modal>
  </div>
</template>
@@ -466,6 +512,7 @@
  getOriginalZip,
  checkExist,
  getzipAndRarInfo,
  decompress,
} from "./apis";
import {
  searchDefaultMailUser,
@@ -485,9 +532,13 @@
  mixins: [WSMixin],
  data() {
    return {
      imgUrl: "",
      previewVisible: false,
            showSop: false,
      fileTreeVisible: false,
      fileTree: [],
      fileTreeViewVisible: false,
      fileTreeView: [],
      userListAll: [],
      mailList: [],
      tester: [],
@@ -1361,7 +1412,7 @@

      return res;
    },
    format(list) {
    format(list, needTime = true) {
      let counter = this.counter();
      let obj = {
        counter,
@@ -1374,10 +1425,14 @@
      //   children: [],
      // };
      list.forEach((v) => {
        let url = v.fileName;
        let url = needTime ? v.fileName : v;
        let fileTime = v.fileTime;
        let arr = url.split("/");
        let splitStr = needTime ? "/" : "\\";
        let arr = url.split(splitStr);
        let fileName = arr.pop();
        let files = fileName.split(".");
        let type = files.length ? files[files.length - 1].toLowerCase() : "";

        let tmp = obj;

        for (let i = 0, len = arr.length; i < len; i++) {
@@ -1388,6 +1443,7 @@
              title: arr[i],
              key: parent.key + "-" + parent.counter(),
              children: [],
              scopedSlots: { title: "custom" },
              counter: this.counter(),
            };
            // tmp[arr[i]].parent.children.push(tmp[arr[i]]);
@@ -1397,10 +1453,13 @@
        }
        // console.log(tmp.children, 'children')
        tmp.children.push({
          url,
          type,
          fileName,
          fileTime,
          key: tmp.key + "-" + tmp.counter(),
          title: fileName + "  " + fileTime,
          title: needTime ? fileName + "  " + fileTime : fileName,
          scopedSlots: { title: "custom" },
          isLeaf: true,
        });
        // console.log(obj, '......')
@@ -1425,13 +1484,14 @@
        return count++;
      };
    },
    // 查看压缩包内文件目录结构
    viewRar() {
      let loading = this.$layer.loading();
      // console.log(this.originalZipUrl);
      getzipAndRarInfo(this.originalZipUrl)
        .then((res) => {
          let { code, data, data2 } = res.data;
          let list = [];
          let list = { children: [] };
          if (code && data) {
            console.log(data2);
            list = this.format(data2);
@@ -1446,6 +1506,71 @@
          this.$layer.close(loading);
          console.log(err);
        });
    },
    // 解压压缩包到服务器 然后返回内部文件的结构和路径 路径可用来预览
    preview() {
      let loading = this.$layer.loading();
      decompress(this.originalZipUrl)
        .then((res) => {
          let { code, data, data2, msg } = res.data;
          let list = [];
          if (code && data) {
            // console.log(data);
            this.$message.success("解析成功");
            let {
              children: [
                {
                  children: [{ children: list1 }],
                },
              ],
            } = this.format(data2, false);
            list = list1;
          } else {
            this.$message.error(msg);
          }
          this.$layer.close(loading);

          this.fileTreeView = list;

          // this.fileTreeView = list.children[0]["children"][0]["children"];
          this.fileTreeViewVisible = true;
          // console.log(list, "===list111");
        })
        .catch((err) => {
          console.log(err);
          this.$layer.close(loading);
        });
    },
    viewAble(type) {
      return ["bmp", "jpg", "jpeg", "png", "pdf", "doc", "docx", "dwg"].some(
        (v) => v == type
      );
    },
    view(obj) {
      switch (obj.type) {
        // 图片
        case "bmp":
        case "jpg":
        case "jpeg":
        case "png":
          this.imgUrl = this.webUrl + obj.url;
          this.previewVisible = true;
          break;
        case "pdf":
          window.open(this.webUrl + obj.url);
          break;
        case "doc":
        case "docx":
        case "dwg":
          this.dwgReview(obj.url);
          break;
        // default:
        //   this.$message.warn("该类型文件暂不支持预览");
        //   break;
      }
    },
    handleCancel() {
      this.previewVisible = false;
    },
  },
  mounted() {
@@ -1637,4 +1762,32 @@
/deep/.ant-descriptions-row .ant-descriptions-item:first-child {
  width: 180px;
}
.file-tree-view /deep/ li {
  // display: flex;
  // flex-direction: row;
  .ant-tree-switcher {
    float: left;
  }
  .ant-tree-node-content-wrapper {
    display: block;
    cursor: auto;
    .ant-tree-title {
      display: block;
    }
  }
  .ant-tree-child-tree {
    flex-basis: 100%;
  }
  .icon-wrap {
    cursor: pointer;
    font-size: 22px;
  }
}
.flex-r {
  display: flex;
  flex-direction: row;
  &.space-between {
    justify-content: space-between;
  }
}
</style>