X-web/src/views/modules/tech/product-draw-detail-dialog.vue

<template>
  <div>
    <el-dialog title="图纸详情" width="70%" :close-on-click-modal="false" :visible.sync="visible">
      <!--      <div class="my-title">图纸详情</div>-->
      <div>
        <template v-for="(item, index) in dataList">
          <e-desc :title="item.drawingName" column="3" style="margin-bottom: 20px">
            <e-desc-item label="附件" span="2">
              <div v-for="(item, index) in item.attachList" style="display: inline">
                <span v-if="index > 0">,</span>
                <a :key="item.fileName + index" type="primary" href="#" @click="previewFile(item.fileName, item.url)">{{
                  item.fileName }}</a>
              </div>
            </e-desc-item>
          </e-desc>
        </template>
        <div></div>
      </div>
      <span slot="footer">
        <el-button @click="onChose">返回</el-button>
      </span>
    </el-dialog>
    <!-- 文件预览 -->
    <preview-component v-if="previewVisible" ref="preview" />
  </div>
</template>

<script>
import EDesc from '../common/e-desc'
import EDescItem from '../common/e-desc-item'
import { downloadUrl } from '@/api/file'
import UploadComponent from '../common/upload-component'
import PreviewComponent from '../common/preview-component'
export default {
  name: 'product-draw-detail-dialog',
  components: {
    PreviewComponent,
    UploadComponent,
    EDesc,
    EDescItem
  },
  data() {
    return {
      visible: false,
      previewVisible: false,
      dataList: [],
      downloadUrl: downloadUrl
    }
  },
  methods: {
    onChose() {
      this.visible = false
    },
    async init(drawList) {
      this.visible = true
      this.dataList = drawList
    },
    // 预览
    previewFile(fileName, url) {
      this.previewVisible = true
      this.$nextTick(() => {
        this.$refs.preview.init(fileName, url)
      })
    }
  }
}
</script>

<style scoped></style>