asan-service/pages/admin/agentsInbox/_tr.vue

<template>
  <div>
    <CustomSubHeader>
      <CBreadcrumb class="border-0 mb-0">{{ title }}</CBreadcrumb>
      <CButton size="sm" color="primary" class="mr-auto" @click="$router.go(-1)">برگشت به صفحه قبل</CButton>
    </CustomSubHeader>

    <CRow>
      <CCol lg="12">
        <CCard>
          <CCardBody>
            <el-collapse>
              <el-collapse-item title="مشخصات مشتری">
                <CForm>
                  <CInput label="کد مشتری وریتی" horizontal disabled :value="transaction.user_id.verity_businessCode" />
                  <CInput
                    label="کد مشتری پاناتک"
                    horizontal
                    disabled
                    :value="transaction.user_id.panatech_businessCode"
                  />
                  <CInput label="نام" horizontal disabled :value="transaction.user_id.first_name" />
                  <CInput label="نام خانوادگی" horizontal disabled :value="transaction.user_id.last_name" />
                  <CInput label="کد ملی" horizontal disabled :value="transaction.user_id.national_code" />
                  <CInput label="تلفن همراه" horizontal disabled :value="transaction.user_id.mobile_number" />
                  <CInput label="استان" horizontal disabled :value="transaction.user_id.province_name" />
                  <CInput label="شهر" horizontal disabled :value="transaction.user_id.city_name" />
                  <CInput label="آدرس" horizontal disabled :value="transaction.user_id.address" />
                  <CInput label="کد پستی" horizontal disabled :value="transaction.user_id.postal_code" />
                </CForm>
                <el-divider></el-divider>
                <div style="text-align: center">
                  <nuxt-link :to="{ name: 'admin-customers-customer', params: { customer: transaction.user_id._id } }"
                    >مشاهده اکانت مشتری</nuxt-link
                  >
                </div>
              </el-collapse-item>
            </el-collapse>
          </CCardBody>
        </CCard>
      </CCol>

      <CCol lg="12">
        <CCard>
          <CCardBody>
            <el-collapse>
              <el-collapse-item title="مشخصات نماینده">
                <CForm>
                  <CInput label="نام و نام خانوادگی" horizontal disabled :value="transaction.agent_id.full_name" />
                  <CInput label="کد نماینده" horizontal disabled :value="transaction.agent_id.agent_code" />
                  <CInput label="تلفن همراه" horizontal disabled :value="transaction.agent_id.mobile_number" />
                  <CInput label="تلفن شرکت/تعمیرگاه" horizontal disabled :value="transaction.agent_id.tel_number" />
                  <CInput label="فکس شرکت/تعمیرگاه" horizontal disabled :value="transaction.agent_id.fax_number" />
                  <CInput label="استان" horizontal disabled :value="transaction.agent_id.province_name" />
                  <CInput label="شهر" horizontal disabled :value="transaction.agent_id.city_name" />
                  <CInput label="آدرس" horizontal disabled :value="transaction.agent_id.address" />
                  <CInput label="کد پستی" horizontal disabled :value="transaction.agent_id.postal_code" />
                  <CInput label="نام شرکت/تعمیرگاه" horizontal disabled :value="transaction.agent_id.store_name" />
                </CForm>
                <el-divider></el-divider>
                <div style="text-align: center">
                  <nuxt-link :to="{ name: 'admin-agents-agent', params: { agent: transaction.agent_id._id } }"
                    >مشاهده اکانت نماینده</nuxt-link
                  >
                </div>
              </el-collapse-item>
            </el-collapse>
          </CCardBody>
        </CCard>
      </CCol>

      <CCol lg="12">
        <CCard>
          <CCardBody>
            <el-collapse>
              <el-collapse-item title="تاریخچه وضعیت های فرم">
                <el-table :data="transaction.statusHistory" style="width: 100%">
                  <el-table-column prop="name" label="وضعیت">
                    <template slot-scope="scope">
                      <span>{{ getStatusName(scope.row.status) }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="date" label="تاریخ">
                    <template slot-scope="scope">
                      <span style="display: inline-block; direction: ltr">{{ $jDateTime(scope.row.date) }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </el-collapse-item>
            </el-collapse>
          </CCardBody>
        </CCard>
      </CCol>

      <CCol lg="12">
        <CCard>
          <CCardBody>
            <CRow>
              <CCol>
                <CForm>
                  <CInput label="وضعیت فعلی فرم" horizontal disabled :value="getStatusName(transaction.status)" />
                  <CInput label="شماره پذیرش موقت" horizontal disabled :value="transaction.TempReceiptTransNumber" />
                  <CInput
                    label="شماره پذیرش دائم"
                    horizontal
                    disabled
                    :value="transaction.ItemReceptionTransNumber || '-'"
                  />
                  <CInput
                    label="تاریخ پذیرش موقت"
                    horizontal
                    disabled
                    :value="$jDate(transaction.TempReceiptTransDate)"
                  />
                  <CInput
                    label="تاریخ پذیرش دائم"
                    horizontal
                    disabled
                    :value="$jDate(transaction.ItemReceptionTransDate)"
                  />
                  <CTextarea label="آدرس فرم" horizontal disabled rows="5" :value="transaction.cAddress1" />
                  <CTextarea label="توضیحات فرم" horizontal disabled rows="5" :value="transaction.Description" />
                </CForm>
                <h6>لیست کالاهای فرم:</h6>
                <el-divider></el-divider>
                <el-table :data="transaction.items" style="width: 100%">
                  <el-table-column type="index" label="#"> </el-table-column>
                  <el-table-column prop="ItemName" label="نام کالا" width="">
                    <template slot-scope="scope">
                      <span>{{ getItemName(scope.row.ItemID) || 'درحال بارگیری ...' }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="SerialNo1" label="سریال کالا" width="">
                    <template slot-scope="scope">
                      <span>{{ scope.row.SerialNo1 || '-' }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="MjQty" label="تعداد" width=""></el-table-column>
                </el-table>
              </CCol>
            </CRow>
          </CCardBody>
        </CCard>
      </CCol>
    </CRow>
  </div>
</template>

<script>
export default {
  name: 'AdminAgentInboxDetails',
  layout: 'admin',
  async asyncData({ $axios, params, error }) {
    try {
      const transaction = await $axios.get(`/api/admin/allAgentsInbox/${params.tr}`)
      if (!transaction.data.user_id) throw new Error('err')
      return {
        transaction: transaction.data
      }
    } catch (e) {
      error({ status: 404, message: 'Page not found' })
    }
  },
  data() {
    return {
      title: 'مشاهده درخواست کالای بافر',
      transaction: null
    }
  },
  head() {
    return {
      title: this.title
    }
  },
  computed: {
    products() {
      if (this.transaction.db_name === 'verity') return this.$store.state.admin.verityProducts
      else if (this.transaction.db_name === 'panatech') return this.$store.state.admin.panatechProducts
      else return []
    },
    allItemsAreinDraftsItems() {
      return this.agentDraftItems.length === this.transaction.items.length
    }
  },
  methods: {
    getItemName(ItemID) {
      return this.products.find(item => item.ItemID === ItemID)?.ItemName
    },
    getStatusName(status) {
      if (status === 'saved') return 'ثبت شده'
      else if (status === 'recieved') return 'پذیرش'
      else if (status === 'ongoing') return 'در دست اقدام'
      else if (status === 'waiting') return 'در انتظار قطعه'
      else if (status === 'delivered') return 'تحویل شد'
      else return 'invalid status'
    }
  }
}
</script>