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

<template>
  <user-dashboard-container page-class="guarantee" panel-title="لیست گارانتی">
    <div class="filter mb-5">
      <h4 style="display: inline-block; margin-left: 15px">مشاهده لیست:</h4>
      <button class="switchBtns btn" :class="type === 'ttl' && 'btn-primary'" @click="type = 'ttl'">
        ارسال شده ها
      </button>
      <button class="switchBtns btn" :class="type === 'atl' && 'btn-primary'" @click="type = 'atl'">
        پذیرش شده ها
      </button>
    </div>
    <div v-loading="fetching" class="tableBox">
      <table class="qaurantee" :class="type === 'atl' && 'atl'">
        <thead>
          <tr>
            <th class="index-atl">ردیف</th>
            <th>شماره پذیرش موقت</th>
            <th>تاریخ ارسال فرم</th>
            <template v-if="type === 'atl'">
              <th>شماره پذیرش دائم</th>
              <th>تاریخ پذیرش</th>
              <th>شماره بیجک</th>
              <th>نظر سنجی</th>
            </template>
            <th class="brand">نوع</th>
            <th>جزئیات</th>
          </tr>
        </thead>
        <tbody>
          <template v-if="filteredList.length">
            <tr v-for="(item, index) in filteredList" :key="item._id">
              <td class="index-atl">
                <span>{{ index + 1 }}</span>
              </td>
              <td>
                <span>{{ item.TempReceiptTransNumber }}</span>
              </td>
              <td>
                <span>{{ $jDate(item.TempReceiptTransDate) }}</span>
              </td>
              <template v-if="type === 'atl'">
                <td>
                  <span>{{ item.ItemReceptionTransNumber }}</span>
                </td>
                <td>
                  <span>{{ $jDate(item.ItemReceptionTransDate) }}</span>
                </td>
                <td>
                  <span>{{ item }}</span>
                </td>
                <td>
                  <span v-if="checkSurveys(item.ItemReceptionTransNumber)" style="color: green">نظر ثبت شده</span>
                  <span v-else>
                    <nuxt-link
                      :to="{ name: 'account-survey', query: { code: item.ItemReceptionTransNumber } }"
                      style="color: #065495; cursor: pointer"
                    >
                      ثبت نظر
                    </nuxt-link>
                  </span>
                </td>
              </template>
              <td class="brand">
                <i
                  v-if="item.db_name === 'verity'"
                  class="fas fa-phone-laptop"
                  title="لوازم جانبی کامپیوتر و موبایل"
                ></i>
                <i v-if="item.db_name === 'panatech'" class="fas fa-photo-video" title="لوازم صوتی و تصویری خودرو"></i>
              </td>
              <td>
                <nuxt-link
                  :to="{
                    name: 'account-guarantee-view',
                    query: {
                      ttn: item.TempReceiptTransNumber,
                      atn: item.ItemReceptionTransNumber || undefined,
                      host: item.host,
                      db_name: item.db_name
                    }
                  }"
                  class="btn btn-primary"
                >
                  مشاهده
                </nuxt-link>
              </td>
            </tr>
          </template>
          <tr v-else>
            <td class="noItem">
              <span>هیچ اطلاعاتی وجود ندارد</span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <table-notice />
  </user-dashboard-container>
</template>

<script>
export default {
  name: 'AccountGuaranteeList',
  layout: 'user',
  data() {
    return {
      verityTransactions: [],
      panatechTransactions: [],
      agentsTransactions: [],
      surveys: [],
      fetching: false
    }
  },
  computed: {
    type: {
      get() {
        return this.$route.query.type
      },
      set(val) {
        this.$router.push({ name: 'account-guarantee', query: { type: val } })
      }
    },
    totalItems() {
      const totalArray = []
      for (const item of this.verityTransactions) {
        totalArray.push({ ...item, host: 'ar', db_name: 'verity' })
      }
      for (const item of this.panatechTransactions) {
        totalArray.push({ ...item, host: 'ar', db_name: 'panatech' })
      }
      for (const item of this.agentsTransactions) {
        totalArray.push({ ...item, host: 'as' })
      }
      return totalArray
    },
    filteredList() {
      return this.totalItems
        .filter(item => {
          if (this.type === 'ttl') return !item.ItemReceptionTransNumber
          else if (this.type === 'atl') return item.ItemReceptionTransNumber
          return false
        })
        .reverse()
    }
  },
  async mounted() {
    try {
      this.fetching = true
      const user = this.$auth.user
      const verityData = {
        url: `/api/GetItemReceptionInfo?BusinessCode=${user.verity_businessCode}`,
        db: 'verity'
      }
      const panatechData = {
        url: `/api/GetItemReceptionInfo?BusinessCode=${user.panatech_businessCode}`,
        db: 'panatech'
      }

      const allData = await Promise.all([
        // fetch verityTransactions
        this.$axios.post('/api/cross/getRouteManager', verityData),
        // fetch panatechTransactions
        this.$axios.post('/api/cross/getRouteManager', panatechData),
        // fetch agentsTransactions
        this.$axios.get('/api/user/transactions'),
        // fetch all surveys
        this.$axios.get('/api/user/surveys')
      ])

      const verityTransactions = allData[0]
      const panatechTransactions = allData[1]
      const agentsTransactions = allData[2]
      const surveys = allData[3]

      this.verityTransactions = verityTransactions.data.data
      this.panatechTransactions = panatechTransactions.data.data
      this.agentsTransactions = agentsTransactions.data
      this.surveys = surveys.data

      this.fetching = false
    } catch (e) {
      this.$arpaError()
    }
  },
  methods: {
    checkSurveys(code) {
      return this.surveys.find(item => item.code === code)
    }
  }
}
</script>