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

he wei

2025-02-26 75d229e997cba687ecbda2d7e41d42ed01bf8bfd

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

@@ -441,17 +441,32 @@
      :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"
          v-if="fileTreeView.length && treeReset"
          :show-line="true"
          defaultExpandAll
          :tree-data="fileTreeView"
          :tree-data="fileTreeViewRes"
        >
          <template slot="custom" slot-scope="item">
            <div class="flex-r space-between">
              <span class="node-title">{{ item.title }} </span>
              <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)"
@@ -478,14 +493,17 @@
        <sop-list :parentCode="parentCode"></sop-list>
      </div>
    </a-modal>
    <a-modal
    <!-- <a-modal
      :width="600"
      :visible="previewVisible"
      :footer="null"
      @cancel="handleCancel"
    >
      <img alt="" style="width: 100%" :src="imgUrl" />
    </a-modal>
    </a-modal> -->
    <!-- <viewer :images="imgUrl">
      <img alt="" style="width: 100%" :src="imgUrl" />
    </viewer> -->
  </div>
</template>

@@ -532,6 +550,8 @@
  mixins: [WSMixin],
  data() {
    return {
      treeReset: true,
      searchValue: "",
      imgUrl: "",
      previewVisible: false,
      showSop: false,
@@ -822,6 +842,21 @@
    // 有状态为-1的版本在
    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: {
@@ -1509,6 +1544,7 @@
    },
    // 解压压缩包到服务器 然后返回内部文件的结构和路径 路径可用来预览
    preview() {
      this.searchValue = '';
      let loading = this.$layer.loading();
      decompress(this.originalZipUrl)
        .then((res) => {
@@ -1517,14 +1553,15 @@
          if (code && data) {
            // console.log(data);
            this.$message.success("解析成功");
            let {
              children: [
                {
                  children: [{ children: list1 }],
                },
              ],
            } = this.format(data2, false);
            list = list1;
            // let {
            //   children: [
            //     {
            //       children: [{ children: list1 }],
            //     },
            //   ],
            // } = this.format(data2, false);
            // list = list1;
            list = data2;
          } else {
            this.$message.error(msg);
          }
@@ -1554,7 +1591,8 @@
        case "jpeg":
        case "png":
          this.imgUrl = this.webUrl + obj.url;
          this.previewVisible = true;
          this.viewerImg();
          // this.previewVisible = true;
          break;
        case "pdf":
          window.open(this.webUrl + obj.url);
@@ -1572,6 +1610,20 @@
    handleCancel() {
      this.previewVisible = false;
    },
    viewerImg() {
      this.$viewerApi({
        images: [this.imgUrl],
        options: {
          initialViewIndex: 0,
        },
      });
    },
    searchChanged() {
      this.treeReset = false;
      this.$nextTick(() => {
        this.treeReset = true;
      });
    },
  },
  mounted() {
    this.searchAllUserList();