uk_front/pages/home/myDetail/enquiryDetail.vue

<template>
  <div class="page-enquiry-detail com-main com-margin-auto">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">Home</el-breadcrumb-item>
      <el-breadcrumb-item
        :to="{ path: '/home/myDetail', query: { type: 'enquiry' } }"
        >My Enquiry</el-breadcrumb-item
      >
      <el-breadcrumb-item>detail</el-breadcrumb-item>
    </el-breadcrumb>
    <div
      v-if="loading"
      v-loading="loadiding"
      class="com-loading"></div>
    <div v-if="!loading">
      <section class="main-header">
        <h1>Job Name: {{ detail.Enquiry_Title }}</h1>
        <div class="main-header-mid flex between">
          <div class="left"></div>
          <ul class="right">
            <li>Enquiry No: {{ detail.Auto_Number }}</li>
            <li>Enquiry Date:
            {{ formatStepDesc(detail.Created_Time) }}</li>
            <li>Payment Terms: {{ detail.Payment_Terms }}</li>
          </ul>
        </div>
        <div class="steps">
          <el-steps
            :active="computedEnquiryState"
            align-center
            finish-status="success"
            process-status="wait">
            <el-step
              title="Enquiry Submitted"
              :description="formatStepDesc(detail.Enquiry_Created)">
            </el-step>
            <el-step
              title="Enquiry Confirmed"
              :description="formatStepDesc(detail.Enquiry_Allocated)"></el-step>
            <el-step
              title="Quote Drafted"
              :description="formatStepDesc(detail.Quote_Created)"></el-step>
            <el-step
              title="Quote Sent"
              :description="formatStepDesc(detail.Quote_Sent)"></el-step>
            <el-step title="Order Confirmed"></el-step>
            <el-step
              title="Enquiry Closed"
              :description="formatStepDesc(detail.Enquiry_Closed)"></el-step>
          </el-steps>
        </div>
      </section>

      <section
        class=""
        v-if="
          (detail.Website_Message && detail.Website_Message.length > 1) ||
          (detail.Artworklink && detail.Artworklink.length)
        ">
        <p class="sharing-title">Enquiries Information</p>
        <div class="sharing-address">
          <p style="white-space: pre-wrap">{{ detail.Website_Message }}</p>
          <p>
            Artwork link:
            <a
              style="color: blue; text-decoration: underline"
              :href="detail.Artworklink"
              target="_brank"
              >{{ detail.Artworklink }}</a
            >
          </p>
        </div>
      </section>

      <section
        v-if="
          detail.Quotes_Information &&
          detail.Quotes_Information.quotes_details_data?.length
        ">
        <div class="sharing-title">Quotes Information</div>
        <el-table
          :data="[detail.Quotes_Information]"
          :header-cell-style="{
            background: '#fff',
            color: '#101010',
            fontWeight: 'normal',
          }">
          <el-table-column
            width="200"
            prop="Quote_Title"
            label="Quote Name"></el-table-column>
          <el-table-column
            align="center"
            prop="Quote_Stage"
            label="Status">
            <template slot-scope="scope">
              <div>{{ scope.row.Quote_Stage || detail.Quote_Stage }}</div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="Total_Including_Tax"
            label="Grand Total">
            <template slot-scope="scope">
              {{ transformNumber(scope.row.Total_Including_Tax) }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop=""
            label="Date">
            <template slot-scope="scope">
              <div>
                {{
                  formatStepDesc(scope.row.Created_Time)
                }}
              </div>
            </template>
          </el-table-column>
        </el-table>
        <br />
        <el-table
          :header-cell-style="{
            background: '#fff',
            color: '#101010',
            fontWeight: 'normal',
          }"
          :data="detail.Quotes_Information.quotes_details_data"
          style="margin-left: 80px; width: calc(100% - 80px)">
          <el-table-column
            label="S.No"
            type="index"
            width="65"></el-table-column>
          <el-table-column
            min-width="300"
            prop="product_name"
            label="Product Name">
            <template slot-scope="scope">
              <div>
                <div class="text-link">{{ scope.row.product_name }}</div>
                <div
                  style="white-space: pre-wrap"
                  v-if="scope.row.product_description">
                  {{ scope.row.product_description }}
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="quantity"
            label="Quantity"></el-table-column>
          <el-table-column
            align="center"
            prop="list_price"
            label="List Prices">
            <template slot-scope="scope">
              {{ transformNumber(scope.row.list_price) }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="amount"
            label="Amount">
            <template slot-scope="scope">
              {{ transformNumber(scope.row.amount) }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="Tax"
            label="Tax">
            <template slot-scope="scope">
              {{ transformNumber(scope.row.Tax) }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="Discount"
            label="Discount">
            <template slot-scope="scope">
              {{ transformNumber(scope.row.Discount) }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="net_total"
            label="Total">
            <template slot-scope="scope">
              {{ transformNumber(scope.row.net_total) }}
            </template>
          </el-table-column>
        </el-table>
        <div class="table-wrap">
          <table class="total">
            <tr>
              <td>Sub Total</td>
              <td>
                {{ detail.Currency }}&nbsp;
                <div class="num">
                  {{
                    transformNumber(
                      detail.Quotes_Information
                        .quotecalculation__Sub_Total_Amount
                    )
                  }}
                </div>
              </td>
            </tr>
            <tr>
              <td>Total Taxes</td>
              <td>
                {{ detail.Currency }}&nbsp;
                <div class="num">
                  {{ transformNumber(detail.Quotes_Information.Tax_Total) }}
                </div>
              </td>
            </tr>
            <tr>
              <td>Total Discount</td>
              <td>
                {{ detail.Currency }}&nbsp;
                <div class="num">
                  {{
                    transformNumber(detail.Quotes_Information.Discount_Amount)
                  }}
                </div>
              </td>
            </tr>
            <tr>
              <td>Adjustment</td>
              <td>
                {{ detail.Currency }}&nbsp;
                <div class="num">
                  {{ transformNumber(detail.Quotes_Information.Adjustment) }}
                </div>
              </td>
            </tr>
            <tr>
              <td>Grand Total</td>
              <td>
                {{ detail.Currency }}&nbsp;
                <div class="num">
                  {{
                    transformNumber(
                      detail.Quotes_Information.Total_Including_Tax
                    )
                  }}
                </div>
              </td>
            </tr>
          </table>
        </div>
      </section>

      <section v-if="detail.orderInformation.length">
        <div class="sharing-title">Order Information</div>
        <el-table
          :data="detail.orderInformation"
          :header-cell-style="{
            background: '#fff',
            color: '#101010',
            fontWeight: 'normal',
          }"
          :row-style="{ cursor: 'pointer' }"
          @row-click="navToOrderDetail">
          <el-table-column
            width="100"
            label="Order No"
            prop="Reference">
            <template slot-scope="scope">
              <div class="">{{ scope.row.Reference }}</div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="Job name"
            prop="Sales_Order_Title_Job_Name">
            <template slot-scope="scope">
              <div class="text-link">
                {{ scope.row.Sales_Order_Title_Job_Name }}
              </div>
            </template></el-table-column
          >
          <el-table-column
            align="center"
            label="Order Status"
            prop="Order_Stage"></el-table-column>
          <el-table-column
            align="center"
            label="Invoice status"
            prop="Invoice_status1"></el-table-column>
          <el-table-column
            align="center"
            label="Grand Total"
            prop="Total_Including_Tax">
            <template slot-scope="scope">
              {{ transformNumber(scope.row.Total_Including_Tax) }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="Date"
            prop="Sales_Order_Created">
            <template slot-scope="scope">
              <div>{{ formatStepDesc(scope.row.Sales_Order_Created) }}</div>
            </template>
          </el-table-column>
          <el-table-column
            label="Action"
            width="90"
            align="center">
            <template slot-scope="scope">
              <el-button
                size="small"
                type="primary"
                style="background-color: rgb(0, 33, 59); color: #fff"
                @click="navToOrderDetail(scope.row)"
                plain
                >View</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </section>

      <section
        v-if="
          (detail.Emaillink && detail.Emaillink.length) ||
          (detail.Email_link2 && detail.Email_link2.length)
        ">
        <br />
        <br />
        <el-tabs v-model="activeEnquiryMail">
          <el-tab-pane
            v-if="detail.Email_link2 && detail.Email_link2.length"
            label="Initial Quote"
            name="quote">
            <iframe
              :src="detail.Email_link2"
              frameborder="0"
              style="overflow: scroll"
              height="1200px"
              width="100%"></iframe>
          </el-tab-pane>
          <el-tab-pane
            v-if="detail.Emaillink && detail.Emaillink.length"
            label="Initial Enquiry"
            name="enquiry">
            <iframe
              :src="detail.Emaillink"
              frameborder="0"
              style="overflow: scroll"
              height="1200px"
              width="100%"></iframe>
          </el-tab-pane>
        </el-tabs>
      </section>
    </div>
  </div>
</template>

<script>
import { round } from '@/utils/price.js'

export default {
  name: 'EnquiryDetail',
  components: {},
  filters: {},
  props: {},
  data() {
    return {
      activeEnquiryMail: 'quote',
      loading: false,
      detail: { orderInformation: [] },
      stepConfig: {
        'Enquiry Created': 1,
        'Enquiry Confirmed': 2,
        'Quote Drafted': 3,
        'Quote Sent': 4,
        'Order Confirmed': 5,
        'Enquiry Closed': 6,
      },
    }
  },
  computed: {
    computedEnquiryState() {
      if (this.detail.Customize_Pipeline_Stage) {
        return this.stepConfig[this.detail.Customize_Pipeline_Stage]
      }
      return 0
    },
  },
  watch: {},
  created() {
    this.getDetail()
  },
  mounted() {},
  updated() {},
  beforeDestroy() {},
  methods: {
    transformNumber(value) {
      // console.log(value, 'value')
      return round(Number(value)).toFixed(2)
    },
    formatStepDesc(date) {
      return this.$utils.formatTime(date, 'DD/MM/YYYY')
    },
    getDetail() {
      this.$axios
        .post('/uk-api/crmdata/enquiries_detail', {
          accounts_id: this.$store.state.userInfo?.crm_accounts_id || '',
          id: this.$route.query.id,
        })
        .then(res => {
          // console.log(res)
          // eslint-disable-next-line
          if (res.code == 1) {
            if (res.result === '4002' || res.result === null) {
              console.log('id不一致 || 数据空')
              this.$router.replace('/')
              return
            }
            const temp = JSON.parse(JSON.stringify(res.result))
            if (temp.Orders_Information && temp.Orders_Information.Reference) {
              temp.orderInformation = [temp.Orders_Information]
            } else {
              temp.orderInformation = []
            }
            this.detail = temp
            if (!(this.detail.Email_link2 && this.detail.Email_link2.length)) {
              this.activeEnquiryMail = 'enquiry'
            }
          }
        })
        .catch(e => {
          console.log(e, 'eee')
          if (e.response.data.code === 10100) {
            this.$router.replace('/')
            console.log('not login')
          }
        })
    },
    navToOrderDetail(row) {
      console.log(row)
      const url = this.$router.resolve({
        path: '/home/myDetail/orderDetail',
        query: { id: row.sales_orders_id },
      })
      window.open(url.href, '_blank')
    },
  },
}
</script>
<style lang="scss">
.page-enquiry-detail {
  .el-tabs__item {
    font-size: 24px;
    // margin-bottom: 30px;
    font-weight: 600;
  }
  .el-tabs__nav-wrap::after {
    display: none;
  }
}
</style>
<style lang="scss" scoped>
@import './detail.scss';

.table-wrap {
  td:nth-of-type(2) {
    text-align: left;
    .num {
      display: inline-block;
    }
  }
}
// .page-enquiry-detail {
// }
.text-link {
  color: #409eff;
}
</style>