asan-service/pages/account/guarantee/receipt/index.vue

<template>
  <user-dashboard-container page-class="post-receipt" panel-title="رسید ارسال برای گارانتی">
    <div class="note">
      <h2 class="mb-2">توجه:</h2>
      <p>
        *این رسید به منزله ی دریافت کالا توسط واحد خدمات پس از فروش نمیباشد و در صورت دریافت کالاهای مندرج در این رسید
        توسط واحد پذیرش، رسید پذیرش قطعی صادر میگردد.
      </p>
    </div>

    <div class="box-face-receipt">
      <div class="receipt">
        <div class="receipt-head">
          <logo />
          <p>بیجک چاپی</p>
        </div>
        <div class="title">
          <p>برای ارسال این بیجک چاپی را روی بسته ارسال بچسبانید.</p>
        </div>

        <div id="box-face-receipt">
          <div class="receipt-body">
            <div class="senderInfo">
              <div class="row">
                <div class="col-12 col-lg-8 order-1 order-lg-0">
                  <h2>فرستنده:</h2>
                  <div class="infoRow">
                    <p>
                      نام و نام خانوادگی:
                      {{ user.first_name + ' ' + user.last_name }}
                    </p>
                  </div>
                  <div class="infoRow">
                    <p>آدرس: {{ transactionInfo.cAddress1 }}</p>
                  </div>
                  <div class="infoRow">
                    <p>شماره تماس: {{ transactionInfo.cTel1 }}</p>
                  </div>
                </div>
                <div class="col-12 col-lg-4 order-0 order-lg-1 d-flex justify-content-end flex-wrap align-items-start">
                  <div class="topLeft">
                    <b v-if="host === 'ar'">تاریخ صدور: {{ $jDate(transactionInfo.TransDate) }}</b>
                    <b v-if="host === 'as'">تاریخ صدور: {{ $jDate(transactionInfo.TempReceiptTransDate) }}</b>
                  </div>
                  <div class="topLeft">
                    <b>شماره پذیرش موقت: {{ $route.query.ttn }}</b>
                  </div>
                </div>
              </div>
            </div>

            <hr />

            <div class="receiverInfo">
              <div class="row">
                <div class="col-12 col-lg-8 order-1 order-lg-0">
                  <h2>گیرنده:</h2>
                  <div class="infoRow">
                    <p>نام: {{ receiverInfo.name }}</p>
                  </div>
                  <div class="infoRow">
                    <p>آدرس: {{ receiverInfo.address }}</p>
                  </div>
                  <div class="infoRow">
                    <p>کدپستی: {{ receiverInfo.postalCode }}</p>
                  </div>
                  <div class="infoRow">
                    <p>شماره تماس: {{ receiverInfo.phone }}</p>
                  </div>
                </div>
                <div class="col-12 col-lg-4 order-0 order-lg-1 d-flex justify-content-end">
                  <div class="topLeft" :class="host">
                    <div>
                      <logo />
                    </div>
                    <dir v-if="host === 'ar'">
                      <img src="/assets/img/tipaxQR.jpg" alt="tipaxQR Code" />
                      <p>
                        <b>1111642</b>
                      </p>
                    </dir>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="print-btn">
        <button class="btn btn-primary" @click="print('box-face-receipt')">چاپ</button>
      </div>
    </div>

    <div class="box-inner-receipt">
      <div class="receipt">
        <div class="receipt-head">
          <logo />
          <p>فهرست اقلام پذیرش موقت شده</p>
        </div>
        <div class="title">
          <p>این فرم را داخل بسته ارسالی برای گارانتی قرار دهید.</p>
        </div>

        <div id="box-inner-receipt">
          <div class="receipt-body">
            <div class="topBar row">
              <div class="col-12 col-lg-6 logo-side">
                <logo />
              </div>
              <div class="col-12 col-lg-6 d-flex justify-content-end align-items-center">
                <div class="topLeft">
                  <b v-if="host === 'ar'">تاریخ صدور: {{ $jDate(transactionInfo.TransDate) }}</b>
                  <b v-if="host === 'as'">تاریخ صدور: {{ $jDate(transactionInfo.TempReceiptTransDate) }}</b>
                </div>
                <div class="topLeft">
                  <b>شماره پذیرش موقت: {{ $route.query.ttn }}</b>
                </div>
              </div>
            </div>
            <hr />
            <div class="stuff-list">
              <div class="tableBox">
                <table>
                  <thead>
                    <tr>
                      <th>ردیف</th>
                      <th style="min-width: 250px">نام کالا</th>
                      <th style="">تعداد</th>
                      <th style="min-width: 150px">سریال گارانتی</th>
                    </tr>
                  </thead>

                  <tbody>
                    <tr v-for="(item, index) in items" :key="index + '_RecieptItem'">
                      <td>{{ index + 1 }}</td>
                      <td v-if="host === 'ar'">{{ item.ItemName }}</td>
                      <td v-if="host === 'as'">{{ getItemName(item.ItemID) || 'درحال بارگیری ...' }}</td>
                      <td v-if="host === 'ar'">{{ item.NQty }}</td>
                      <td v-if="host === 'as'">{{ item.MjQty }}</td>
                      <td>{{ item.SerialNo1 || '-' }}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <table-notice />
            </div>
          </div>
        </div>
      </div>
      <div class="print-btn">
        <button class="btn btn-primary" @click="print('box-inner-receipt')">چاپ</button>
      </div>
    </div>
  </user-dashboard-container>
</template>

<script>
if (process.client) require('static/assets/js/jQuery.print.min')
export default {
  name: 'AccountGuaranteePostReciept',
  layout: 'user',
  async asyncData({ $axios, $auth, query, error }) {
    try {
      const tempTN = query?.ttn
      const host = query?.host
      const db_name = query?.db_name
      const user = $auth.user

      function businessCode() {
        if (db_name === 'verity') return user.verity_businessCode
        else if (db_name === 'panatech') return user.panatech_businessCode
        else return null
      }

      if (host === 'ar') {
        const transactionItemsData = {
          url: `/api/GetTransactionDetails?BusinessCode=${businessCode()}&TransNumber=${tempTN}&DocAliasID=144&WithSerials=1`,
          db: db_name
        }
        const transactionItems = await $axios.post('/api/cross/getRouteManager', transactionItemsData)
        if (transactionItems.data.error || !transactionItems.data.data.length) throw new Error('invalid values')
        return {
          transactionItems: transactionItems.data.data
        }
      } else if (host === 'as') {
        const transaction = await $axios.get(`/api/user/transaction/${tempTN}`)
        return {
          transaction: transaction.data
        }
      } else throw new Error('invalid values')
    } catch (e) {
      error({ status: 404, message: 'Page not found' })
    }
  },
  data() {
    return {
      transactionItems: null,
      transaction: null
    }
  },
  computed: {
    user() {
      return this.$auth.user
    },
    receiverInfo() {
      const host = this.host
      const main = {
        name: this.$config.recieverName,
        address: this.$config.recieverAddress,
        postalCode: this.$config.recieverPostalCode,
        phone: this.$config.recieverPhone
      }
      if (host === 'ar') return main
      else {
        const agent = this.transaction.agent_id
        return {
          name: agent?.full_name + ' (نمایندگی ' + agent.city_name + ')',
          address: agent?.province_name + '، ' + agent?.city_name + '، ' + agent?.address,
          postalCode: agent?.postal_code,
          phone: agent?.tel_number + ' - ' + agent?.mobile_number
        }
      }
    },
    products() {
      if (this.$route.query.db_name === 'verity') return this.$store.state.front.verityProducts
      else if (this.$route.query.db_name === 'panatech') return this.$store.state.front.panatechProducts
      else return []
    },
    host() {
      return this.$route.query?.host
    },
    items() {
      if (this.host === 'ar') return this.transactionItems
      else if (this.host === 'as') return this.transaction.items
      else return []
    },
    transactionInfo() {
      if (this.host === 'ar') return this.transactionItems[0]
      else if (this.host === 'as') return this.transaction
      else return {}
    }
  },
  methods: {
    getItemName(ItemID) {
      return this.products.find(item => item.ItemID === ItemID)?.ItemName
    },
    print(id) {
      $(`#${id}`).print()
    }
  }
}
</script>