index.vue 2.42 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64
<template>
  <dee-dialog
    id="dee-dialog"
    title="装配流程"
    :dialog-visible.sync="visible"
    width="90%"
    custom-class="mobile-dialog"
    :before-close="handleClose"
    close-on-click-modal
  >
    <div v-loading="loading" class="assembly-process">
      <div>
        <p>装配效果图</p>
        <p>装配流程</p>
      </div>
      <div class="img">
        <div>
          <img v-if="imgLeft" :src="imgLeft" alt="" @click="preview(imgLeft)">
          <span v-else>暂无装配效果图</span>
        </div>
        <div>
          <img v-if="imgRight" :src="imgRight" alt="" @click="preview(imgRight)">
          <span v-else> 暂无装配流程 </span>
        </div>
      </div>
    </div>
  </dee-dialog>
</template>
<script>
import { post } from '@/utils/http'
import { previewIMG } from '@/api/previewIMG.js'
export default {
  components: {},

  data() {
    return {
      visible: false,
      loading: true,
      imgLeft: '',
      imgRight: ''
    }
  },
  created() {},
  methods: {
    // 打开弹出框
    open() {
      this.visible = true
      this.$nextTick(() => {
        this.getAssemblyProcess()
      })
    },
    handleClose() {},
    preview(src) {
      previewIMG(src)
    },
    getAssemblyProcess() {
      this.loading = true
      post(
        `ExtProcessPlan/getPaper?aoId=${this.$parent.headerData.aoId}`,
        {},
        'post'
      )
        .then((res) => {
          if (res && res.message.includes('成功')) {
“lixuyan”'s avatar
“lixuyan” committed
65 66
            this.imgLeft = res.items.left
            this.imgRight = res.items.right
67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115
          } else {
            this.$message({
              showClose: true,
              message: res.message,
              type: 'error'
            })
          }
        })
        .catch((err) => console.error(err))
        .finally(() => {
          this.loading = false
        })
    }
  }
}
</script>
<style lang="scss">
.assembly-process {
  > div:first-child {
    display: flex;
    background-color: #b6dde8;
    font-weight: 700;
    font-size: 16px;
    > p {
      width: 50%;
      padding: 10px 0;
      text-align: center;
      &:first-child {
        border-right: 2px solid #cecece;
      }
    }
  }
  > .img {
    display: flex;
    > div {
      width: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 20vh;
      max-height: 70vh;
      img {
        max-height: 100%;
        max-width: 100%;
      }
    }
  }
}
</style>