U 产品详情页面 原始包预览时 图片可以放大

he wei

2025-02-26 75d229e997cba687ecbda2d7e41d42ed01bf8bfd

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

@@ -84,8 +84,8 @@
                    <template
                      v-if="
                        record.softwares &&
                        record.softwares.length &&
                        canDownloadSoftware
                          record.softwares.length &&
                          canDownloadSoftware
                      "
                    >
                      <a-divider
@@ -120,8 +120,8 @@
                      <a-divider
                        v-if="
                          record.softwares &&
                          record.softwares.length &&
                          canDownloadSoftware
                            record.softwares.length &&
                            canDownloadSoftware
                        "
                        type="vertical"
                      ></a-divider>
@@ -133,8 +133,8 @@
                      <a-divider
                        v-if="
                          record.softwares &&
                          record.softwares.length &&
                          canDownloadSoftware
                            record.softwares.length &&
                            canDownloadSoftware
                        "
                        type="vertical"
                      ></a-divider>
@@ -148,8 +148,8 @@
                      <a-divider
                        v-if="
                          record.softwares &&
                          record.softwares.length &&
                          canDownloadSoftware
                            record.softwares.length &&
                            canDownloadSoftware
                        "
                        type="vertical"
                      ></a-divider>
@@ -192,7 +192,7 @@
            <a-button
              v-if="
                ((canDownloadBom && currentVersion.enabled == 1) || isTester) &&
                !is0120
                  !is0120
              "
              type="primary"
              @click="checkLock('zipDownload')"
@@ -203,8 +203,8 @@
                (((canDownloadBom || canDownloadOriginBom) &&
                  currentVersion.enabled == 1) ||
                  isTester) &&
                originalZipUrl &&
                !is0120
                  originalZipUrl &&
                  !is0120
              "
              type="primary"
              @click="checkLock('OriginalZipDownload')"
@@ -220,8 +220,8 @@
              type="primary"
              v-if="
                softwareList.length &&
                canDownloadSoftware &&
                currentVersion.enabled == 1
                  canDownloadSoftware &&
                  currentVersion.enabled == 1
              "
              @click="showSoftwareDownload"
              >软件下载</a-button
@@ -230,8 +230,8 @@
              type="primary"
              v-if="
                currentVersion.enabled == 0 &&
                canLockBom &&
                (!is0120 || maxVersionid == currentVersion.id)
                  canLockBom &&
                  (!is0120 || maxVersionid == currentVersion.id)
              "
              @click="changeStatus"
              >激活版本</a-button
@@ -248,7 +248,10 @@
              @click="changeStatus"
              >锁定版本</a-button
            >
             <a-button type="primary" @click="viewSopFile">SOP查看</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,17 +432,78 @@
        <a-empty v-else />
      </div>
    </a-modal>
     <a-modal
        :visible="showSop"
        :footer="null"
        :width="1366"
        title="SOP查看"
        :destroyOnClose="true"
        @cancel="showSop = false">
        <div style="height: 600px">
           <sop-list :parentCode="parentCode"></sop-list>
        </div>
     </a-modal>

    <a-modal
      :visible="fileTreeViewVisible"
      :footer="null"
      :width="860"
      title="文件列表"
      :destroyOnClose="true"
      @cancel="fileTreeViewVisible = false"
    >
      <a-input-search
        style="margin-bottom: 8px"
        v-model="searchValue"
        placeholder="输入关键词搜索文件名"
        @change="searchChanged"
      />
      <div class="log-content">
        <a-tree
          class="file-tree-view"
          v-if="fileTreeView.length && treeReset"
          :show-line="true"
          defaultExpandAll
          :tree-data="fileTreeViewRes"
        >
          <template slot="custom" slot-scope="item">
            <div class="flex-r space-between">
              <span v-if="item.title.indexOf(searchValue) > -1"
                >{{ item.title.substr(0, item.title.indexOf(searchValue))
                }}<span style="color: #f50">{{ searchValue }}</span
                >{{
                  item.title.substr(
                    item.title.indexOf(searchValue) + searchValue.length
                  )
                }}</span
              >
              <span v-else 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"
    >
      <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> -->
    <!-- <viewer :images="imgUrl">
      <img alt="" style="width: 100%" :src="imgUrl" />
    </viewer> -->
  </div>
</template>

@@ -466,6 +530,7 @@
  getOriginalZip,
  checkExist,
  getzipAndRarInfo,
  decompress,
} from "./apis";
import {
  searchDefaultMailUser,
@@ -485,9 +550,15 @@
  mixins: [WSMixin],
  data() {
    return {
         showSop: false,
      treeReset: true,
      searchValue: "",
      imgUrl: "",
      previewVisible: false,
      showSop: false,
      fileTreeVisible: false,
      fileTree: [],
      fileTreeViewVisible: false,
      fileTreeView: [],
      userListAll: [],
      mailList: [],
      tester: [],
@@ -739,7 +810,7 @@
    Pop,
    DownloadReason,
    DownloadLogs,
     SopList,
    SopList,
  },
  computed: {
    ...mapGetters("setting", ["affixed"]),
@@ -772,6 +843,21 @@
    hasLock() {
      return this.versionList.some((v) => v.enabled == -1);
    },
    fileTreeViewRes() {
      let resList = this.fileTreeView.filter((v) => {
        let fileName = v.split("\\").pop();
        return fileName.indexOf(this.searchValue) > -1;
      });

      let {
        children: [
          {
            children: [{ children: list }],
          },
        ],
      } = this.format(resList, false);
      return list;
    },
  },
  watch: {
    update(n) {
@@ -800,9 +886,9 @@
    },
  },
  methods: {
     viewSopFile() {
         this.showSop = true;
     },
    viewSopFile() {
      this.showSop = true;
    },
    getRoleUser() {
      getRoleUser(1)
        .then((res) => {
@@ -1361,7 +1447,7 @@

      return res;
    },
    format(list) {
    format(list, needTime = true) {
      let counter = this.counter();
      let obj = {
        counter,
@@ -1374,10 +1460,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 +1478,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 +1488,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 +1519,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 +1541,88 @@
          this.$layer.close(loading);
          console.log(err);
        });
    },
    // 解压压缩包到服务器 然后返回内部文件的结构和路径 路径可用来预览
    preview() {
      this.searchValue = '';
      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;
            list = data2;
          } 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.viewerImg();
          // 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;
    },
    viewerImg() {
      this.$viewerApi({
        images: [this.imgUrl],
        options: {
          initialViewIndex: 0,
        },
      });
    },
    searchChanged() {
      this.treeReset = false;
      this.$nextTick(() => {
        this.treeReset = true;
      });
    },
  },
  mounted() {
@@ -1637,4 +1814,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>