综合展示，附件挂载添加cad查看功能

surprise

2024-04-22 fa7ba545bb58983c8dab5f96cd1f010a48d7420c

 src/views/Tools/ModelProperty.vue

@@ -1,26 +1,18 @@
<template>
  <Popup
    ref="pop"
    :title="title"
    @close="close(true)"
    width="400px"
    @cancel="close(false)"
    top="0vh"
    left="30vh"
  >
    <el-tabs
      v-model="activeName"
      @tab-click="handleClick"
    >
      <el-tab-pane
        label="属性"
        name="first"
      >
        <el-form
          ref="form"
          :model="formInline"
          label-width="80px"
        >
  <Popup ref="pop"
         :title="title"
         @close="close(true)"
         width="400px"
         @cancel="close(false)"
         top="0vh"
         left="30vh">
    <el-tabs v-model="activeName"
             @tab-click="handleClick">
      <el-tab-pane label="属性"
                   name="first">
        <el-form ref="form"
                 :model="formInline"
                 label-width="80px">
          <el-form-item :label="$t('common.name')">
            {{formInline.name}}
          </el-form-item>
@@ -37,49 +29,33 @@
        </el-form>

      </el-tab-pane>
      <el-tab-pane
        label="附件"
        name="second"
      >
      <el-tab-pane label="附件"
                   name="second">

        <el-table
          :data="tableData"
          ref="filterTable"
          height="calc(100% - 130px)"
          border
          style="width: 100%"
          @selection-change="handleAttatchChange"
        >
          <el-table-column
            type="selection"
            width="70"
          />
          <el-table-column
            width="60"
            type="index"
            :label="$t('common.index')"
          />
          <el-table-column
            prop="name"
            :label="$t('common.name')"
          />
        <el-table :data="tableData"
                  ref="filterTable"
                  height="calc(100% - 130px)"
                  border
                  style="width: 100%"
                  @selection-change="handleAttatchChange">
          <el-table-column type="selection"
                           width="70" />
          <el-table-column width="60"
                           type="index"
                           :label="$t('common.index')" />
          <el-table-column prop="name"
                           :label="$t('common.name')" />

          <el-table-column
            prop="sizes"
            :label="$t('common.size')"
            :formatter="statSizeChange"
          />
          <el-table-column
            align="center"
            :label="$t('common.operate')"
            min-width="100"
          >
          <el-table-column prop="sizes"
                           :label="$t('common.size')"
                           :formatter="statSizeChange" />
          <el-table-column align="center"
                           :label="$t('common.operate')"
                           min-width="100">
            <template slot-scope="scope">
              <el-link
                v-if="matchState(scope, /[]/)"
                @click="setAttatchDetail(scope.$index, scope.row)"
                class="elLink"
              >{{ $t('common.see') }}</el-link>
              <el-link v-if="matchState(scope, /[]/)"
                       @click="setAttatchDetail(scope.$index, scope.row)"
                       class="elLink">{{ $t('common.see') }}</el-link>

            </template>
          </el-table-column>
@@ -88,36 +64,26 @@
      </el-tab-pane>

    </el-tabs>
    <el-dialog
      title="预览"
      :append-to-body="false"
      :visible.sync="dialog.dialogVisible"
      width="70%"
      :modal="false"
      :close-on-click-modal="false"
    >
      <div
        v-if="dialog.isPdf"
        class="pdfClass"
      >
        <iframe
          :src="dialog.src"
          type="application/x-google-chrome-pdf"
          width="100%"
          height="100%"
        >
    <el-dialog title="预览"
               :append-to-body="false"
               :visible.sync="dialog.dialogVisible"
               width="70%"
               :modal="false"
               :close-on-click-modal="false">
      <div v-if="dialog.isPdf"
           class="pdfClass">
        <iframe :src="dialog.src"
                type="application/x-google-chrome-pdf"
                width="100%"
                height="100%">
        </iframe>
      </div>
      <div
        v-if="dialog.isJpg"
        class="pdfClass"
      >
      <div v-if="dialog.isJpg"
           class="pdfClass">

        <el-image
          style="width:100%; height:100%"
          :src="dialog.src"
          :preview-src-list="[dialog.src]"
        >
        <el-image style="width:100%; height:100%"
                  :src="dialog.src"
                  :preview-src-list="[dialog.src]">
        </el-image>

      </div>
@@ -128,7 +94,7 @@
<script>

import Popup from "./Popup";
import { comprehensive_selectFiles, comprehensive_selectModelByGuid } from '../../api/api.js'
import { comprehensive_selectFiles,comprehensive_selectModelByGuid,meta_selectConvertToDwg } from '../../api/api.js'
import { getToken } from "@/utils/auth";

export default {
@@ -137,7 +103,7 @@
    Popup,
  },
  mixins: [],
  data() {
  data () {
    return {
      title: "在线地图",
      left: undefined,
@@ -172,22 +138,22 @@
  methods: {

    // 关闭弹窗
    close(isCloseBtn, removeLayer = true) {
    close (isCloseBtn,removeLayer=true) {
      //   removeLayer && this.removeImageLayer();

      // 重置data值
      Object.assign(this.$data, this.$options.data());
      !isCloseBtn && this.$refs.pop.close();
      Object.assign(this.$data,this.$options.data());
      !isCloseBtn&&this.$refs.pop.close();
    },
    // 打开弹窗
    async open() {
    async open () {

      this.close(true);

      this.$refs.pop.open();
      this.title = this.$store.state.catModelInfo.name;
      this.title=this.$store.state.catModelInfo.name;

      this.formInline = this.$store.state.catModelInfo;
      this.formInline=this.$store.state.catModelInfo;

    },

@@ -195,95 +161,109 @@
    //   this.mapCollection.tokne = token;
    // },
    // 附件=>表格选择
    handleAttatchChange(val) {
      this.attacgSelection = val;
    handleAttatchChange (val) {
      this.attacgSelection=val;
    },
    statSizeChange(row, column) {
    statSizeChange (row,column) {
      return this.stateFormatSizes(row.sizes)
    },
    stateFormatSizes(res) {
      if (res >= 1024) {
        const val = parseFloat(res / 1024).toFixed(3);
        return val + ' GB';
    stateFormatSizes (res) {
      if(res>=1024) {
        const val=parseFloat(res/1024).toFixed(3);
        return val+' GB';
      } else {
        return res + ' MB';
        return res+' MB';
      }
    },
    matchState(state = "", reg) {
      var row = state.row;
      var name = row.name;
      if (
        name.indexOf('.pdf') != -1
        || name.indexOf('.jpg') != -1
        || name.indexOf('.gif') != -1
        || name.indexOf('.png') != -1
        || name.indexOf('.jpeg') != -1
        || name.indexOf('.PDF') != -1
        || name.indexOf('.JPG') != -1
        || name.indexOf('.GIF') != -1
        || name.indexOf('.PNG') != -1
        || name.indexOf('.JPEG') != -1
        || name.indexOf('.BMP') != -1
        || name.indexOf('.bmp') != -1
    matchState (state="",reg) {
      var row=state.row;
      var name=row.name;
      if(
        name.indexOf('.pdf')!=-1
        ||name.indexOf('.jpg')!=-1
        ||name.indexOf('.gif')!=-1
        ||name.indexOf('.png')!=-1
        ||name.indexOf('.jpeg')!=-1
        ||name.indexOf('.PDF')!=-1
        ||name.indexOf('.JPG')!=-1
        ||name.indexOf('.GIF')!=-1
        ||name.indexOf('.PNG')!=-1
        ||name.indexOf('.JPEG')!=-1
        ||name.indexOf('.BMP')!=-1
        ||name.indexOf('.bmp')!=-1
        ||name.indexOf('.dwg')!=-1
      ) {
        return true;
      }
      return false;
    },
    handleClick(tab, event) {
      if (tab.name == "second") {
    handleClick (tab,event) {
      if(tab.name=="second") {
        this.getAttacthFlieList();
      }
    },

    //附件列表查询
    async getAttacthFlieList() {
      var obj = {
    async getAttacthFlieList () {
      var obj={
        eventid: this.$store.state.catModelInfo.id,
        tabName: "lf.sys_style"
      };
      const res = await comprehensive_selectFiles(obj);
      if (res.code != 200) {
      const res=await comprehensive_selectFiles(obj);
      if(res.code!=200) {
        this.$message.error('列表调用失败');
        return
      }
      this.tableData = res.result;
      this.tableData=res.result;
    },

    //附件查看
    setAttatchDetail(index, row) {
    setAttatchDetail (index,row) {
      this.refreshAttatchDetail()
      var name = row.name;
      if (name.indexOf('.pdf') != -1 || name.indexOf('.PDF') != -1) {
        this.dialog.dialogVisible = true;
        this.dialog.isPdf = true;
        var url = BASE_URL + "/comprehensive/downloadForView?guid=" + row.guid + "&token=" + getToken();
        this.dialog.src = url
      } else if (
        name.indexOf('.jpg') != -1
        || name.indexOf('.gif') != -1
        || name.indexOf('.png') != -1
        || name.indexOf('.jpeg') != -1
        || name.indexOf('.JPG') != -1
        || name.indexOf('.GIF') != -1
        || name.indexOf('.PNG') != -1
        || name.indexOf('.JPEG') != -1
        || name.indexOf('.BMP') != -1
        || name.indexOf('.bmp') != -1) {
        this.dialog.dialogVisible = true;
        this.dialog.isJpg = true;
        var url = BASE_URL + "/comprehensive/downloadForView?guid=" + row.guid + "&token=" + getToken();
        this.dialog.src = url
      var name=row.name;
      if(name.indexOf('.pdf')!=-1||name.indexOf('.PDF')!=-1) {
        this.dialog.dialogVisible=true;
        this.dialog.isPdf=true;
        var url=BASE_URL+"/comprehensive/downloadForView?guid="+row.guid+"&token="+getToken();
        this.dialog.src=url
      } else if(
        name.indexOf('.jpg')!=-1
        ||name.indexOf('.gif')!=-1
        ||name.indexOf('.png')!=-1
        ||name.indexOf('.jpeg')!=-1
        ||name.indexOf('.JPG')!=-1
        ||name.indexOf('.GIF')!=-1
        ||name.indexOf('.PNG')!=-1
        ||name.indexOf('.JPEG')!=-1
        ||name.indexOf('.BMP')!=-1
        ||name.indexOf('.bmp')!=-1
        ||name.indexOf('.BMP')!=-1) {
        this.dialog.dialogVisible=true;
        this.dialog.isJpg=true;
        var url=BASE_URL+"/comprehensive/downloadForView?guid="+row.guid+"&token="+getToken();
        this.dialog.src=url
      } else if(name.indexOf('.dwg')!=-1) {
        this.handleCAD(row)
      }
    },
    refreshAttatchDetail() {
      this.dialog.src = "";
      this.dialog.dialogVisible = false;
      this.dialog.isPdf = false;
      this.dialog.isJpg = false;
    async handleCAD (row) {
      const data=await meta_selectConvertToDwg({ id: row.id,type: true });
      if(data.result) {
        var url=iisHost+"/dwg/cad/browse/?file=data/"+data.result;
        window.open(url)
      } else {
        return this.$message("数据转换失败，无法预览");
      }

    },
    refreshAttatchDetail () {
      this.dialog.src="";
      this.dialog.dialogVisible=false;
      this.dialog.isPdf=false;
      this.dialog.isJpg=false;
    },
  },
  mounted() {
  mounted () {

  }
};