jjx-web/pages/store/components/processModal.vue

<template>
  <el-dialog
    title="报价列表"
    :visible.sync="dialogVisible"
    width="60%"
    :before-close="handleClose">
    <view slot="title" class="text-main text-40 m-30 flex justify-between items-center">
      <text>收到的加工申请</text>
      <el-button type="primary" @click.native="dialogVisible = false">关闭</el-button>
    </view>
    <view class="mt-15">
      <view class="request-header">
        <text class="flex-1">申请人</text>
        <text class="flex-1">报价</text>
        <text class="flex-1">补充条款</text>
        <text class="flex-1">附件</text>
        <text class="flex-1">申请时间</text>
        <text class="flex-1">操作</text>
      </view>
      <view class="quote" v-for="(item, index) in quoteList.rows" :key="index">
        <text class="flex-1" v-if="item.user">{{
            item.user.accountType === 1 ? item.user.person.personName : item.user.company.companyName
          }}
        </text>
        <text class="flex-1">{{ item.totalPrice }}元</text>
        <view class="flex-1 flex flex-col justify-start items-start">
          <text>加工方补充条款：{{ item.supplierExt ? item.supplierExt : '无' }}</text>
        </view>
<!--        <text class="flex-1">{{ item.remark }}</text>-->
        <text class="flex-1">
          <file-type v-for="(file, fileIndex) in item.files" :key="fileIndex" :item="file"
                     @click.native="previewFile(file)"/>
        </text>
        <text class="flex-1">{{ item._add_time_str }}</text>
        <text class="flex-1">
          <el-button type="primary" @click.native="createContract(item)" v-if="item.status === 0">选择</el-button>
        </text>
      </view>
    </view>
    <el-dialog title="图片预览" :visible.sync="showImagePreview" width="80%" append-to-body>
      <img v-if="previewImageUrl" class="preview-image" :src="previewImageUrl" alt="附件预览"/>
    </el-dialog>
  </el-dialog>
</template>

<script>
import provinces from "@/uni_modules/vk-uview-ui/libs/address/provinces.json";
import citys from "@/uni_modules/vk-uview-ui/libs/address/citys.json";
import areas from "@/uni_modules/vk-uview-ui/libs/address/areas.json";
import FileType from "../../../components/file-type/file-type.vue";

export default {
  name: "processModal",
  components: {FileType},
  data() {
    return {
      provinceData: provinces,
      cityData: citys,
      areaData: areas,
      id: null,
      info: null,
      dialogVisible: false,
      showImagePreview: false,
      previewImageUrl: '',
      quoteList: [],
      status: 0
    }
  },
  methods: {
    open(info) {
      this.info = info
      this.id = info._id
      this.quoteList = info.quoteList
      this.dialogVisible = true
    },
    handleClose() {
      this.dialogVisible = false
    },
    toQuote() {
      vk.navigateTo(`/pages/process/quote?sheetId=${this.id}`)
    },
    createContract({totalPrice, uid, _id}) {
      vk.callFunction({
        url: 'client/contract/kh/add',
        data: {
          type: 'process',
          productTitle: this.info.title,
          transactionId: vk.pubfn.createOrderNo("P", 20),
          sheetId: this.id,
          quoteId: _id,
          buyer: vk.getVuex('$user.userInfo._id'),
          seller: uid,
          amount: totalPrice,
          partyCount: 2,
          signCount: 0,
        }
      }).then((res) => {
        this.dialogVisible = false
        this.$message({
          message: '选择成功',
          type: 'success'
        })
        setTimeout(() => {
          if (this.info.signMethod === 0) vk.navigateTo('/pages/contract/index?tab=1')
          else {
            if (this.info.signMethod === 1) vk.navigateTo('/pages/store/buyer')
            else vk.navigateTo('/pages/contract/index?tab=0')
          }
        }, 500)
      })
    },
    getFileExt(url = "") {
      const cleanUrl = String(url).split("?")[0].split("#")[0]
      const match = cleanUrl.match(/\.([a-z0-9]+)$/i)
      return match ? match[1].toLowerCase() : ""
    },
    isImageFile(url) {
      return ["png", "jpg", "jpeg", "gif", "webp", "bmp", "svg"].includes(this.getFileExt(url))
    },
    isPdfFile(url) {
      return this.getFileExt(url) === "pdf"
    },
    isOfficeFile(url) {
      return ["doc", "docx", "xls", "xlsx", "ppt", "pptx"].includes(this.getFileExt(url))
    },
    getOfficePreviewUrl(url) {
      return `https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(url)}`
    },
    previewFile(url) {
      if (!url) return
      if (this.isImageFile(url)) {
        this.previewImageUrl = url
        this.showImagePreview = true
        return
      }
      if (this.isPdfFile(url)) {
        window.open(url, "_blank")
        return
      }
      if (this.isOfficeFile(url)) {
        window.open(this.getOfficePreviewUrl(url), "_blank")
        return
      }
      window.open(url, "_blank")
    },
    openDownload(url) {
      this.previewFile(url)
    }
  }
}
</script>

<style lang="scss" scoped>

.request-header {
  border: 1px solid #EDEDED;
  background-color: #FFF8F1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  margin-top: 30px;

  text {
    text-align: center;
  }
}

.quote {
  border-left: 1px solid #EDEDED;
  border-right: 1px solid #EDEDED;
  border-bottom: 1px solid #EDEDED;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;

  text {
    text-align: center;
  }
}

.preview-image {
  display: block;
  max-width: 100%;
  max-height: 75vh;
  margin: 0 auto;
}
</style>