asan-service/pages/admin/piece-requests/_prId.vue

<template>
  <div>
    <CustomSubHeader>
      <CBreadcrumb class="border-0 mb-0">{{ title }}</CBreadcrumb>
      <el-tag v-if="pieceRequest._openedBy && pieceRequest._openedBy.first_name" type="primary" class="ml-1">
        <span>اولین مشاهده توسط: </span>
        <span> {{ pieceRequest._openedBy.first_name + ' ' + pieceRequest._openedBy.last_name }} </span>
      </el-tag>
      <el-tag v-if="pieceRequest._updatedBy && pieceRequest._updatedBy.first_name" type="primary" class="ml-1">
        <span>تغییر وضعیت توسط: </span>
        <span> {{ pieceRequest._updatedBy.first_name + ' ' + pieceRequest._updatedBy.last_name }} </span>
      </el-tag>
      <CButton size="sm" color="primary" class="mr-auto" @click="$router.go(-1)">برگشت به صفحه قبل</CButton>
    </CustomSubHeader>

    <CRow>
      <CCol v-if="!pieceRequest.archived && pieceRequest.status !== 'rejected'" lg="12">
        <CCard>
          <CCardBody>
            <CRow>
              <CCol lg="6">
                <h6>تغییر وضعیت فرم</h6>
                <el-divider></el-divider>
                <CButtonGroup>
                  <!-- <CButton
										:color="pieceRequest.status === 'ongoing' ? 'warning' : 'light'"
										@click="updateStatus('ongoing')"
									>
										در دست اقدام
									</CButton> -->

                  <CButton
                    :color="pieceRequest.status === 'waiting' ? 'warning' : 'light'"
                    @click="updateStatus('waiting')"
                  >
                    در انتظار قطعه
                  </CButton>

                  <el-popover
                    v-model="deliverPopover"
                    placement="bottom"
                    width="160"
                    :disabled="pieceRequest.status === 'delivered'"
                    @click="deliveryPopover = true"
                  >
                    <el-input v-model="deliveryCode" placeholder="کد ارسال مرسوله"></el-input>
                    <div class="mt-1" style="text-align: center">
                      <el-button
                        size="mini"
                        type="text"
                        class="agentsStatus-popover-insideBtn"
                        @click="updateStatus('delivered')"
                        >ارسال</el-button
                      >
                    </div>

                    <CButton slot="reference" :color="pieceRequest.status === 'delivered' ? 'success' : 'light'">
                      تحویل شده
                    </CButton>
                  </el-popover>
                </CButtonGroup>
                <div v-if="pieceRequest.status === 'delivered'" class="mt-3">
                  <p>
                    <span>کد ارسال مرسوله: </span>
                    <b>{{ pieceRequest.deliveryCode || '-' }} </b>
                  </p>
                </div>
              </CCol>
              <CCol lg="6">
                <h6>تاریخچه وضعیت های فرم</h6>
                <el-divider></el-divider>
                <el-table :data="pieceRequest.statusHistory" style="width: 100%">
                  <el-table-column prop="name" label="وضعیت">
                    <template slot-scope="scope">
                      <span v-if="scope.row.status === 'temp'">پیشنویس</span>
                      <span v-if="scope.row.status === 'sent'">ارسال</span>
                      <span v-if="scope.row.status === 'ongoing'">در دست اقدام</span>
                      <span v-if="scope.row.status === 'waiting'">در انتظار قطعه</span>
                      <span v-if="scope.row.status === 'delivered'">تحویل شده</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>
              </CCol>
            </CRow>
          </CCardBody>
        </CCard>
      </CCol>

      <CCol lg="12">
        <CCard>
          <CCardBody>
            <el-collapse>
              <el-collapse-item title="مشخصات نماینده">
                <CForm>
                  <CInput label="نام و نام خانوادگی" horizontal disabled :value="pieceRequest.agent_id.full_name" />
                  <CInput label="کد ملی" horizontal disabled :value="pieceRequest.agent_id.national_code" />

                  <CInput label="تلفن همراه" horizontal disabled :value="pieceRequest.agent_id.mobile_number" />
                  <CInput label="تلفن شرکت/تعمیرگاه" horizontal disabled :value="pieceRequest.agent_id.tel_number" />
                  <CInput label="فکس شرکت/تعمیرگاه" horizontal disabled :value="pieceRequest.agent_id.fax_number" />

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

      <CCol lg="12">
        <CCard>
          <CCardBody>
            <CRow>
              <CCol>
                <CForm>
                  <CTextarea label="توضیحات فرم" horizontal disabled rows="5" :value="pieceRequest.description" />
                </CForm>
                <h6>لیست قطعات درخواستی:</h6>
                <el-divider></el-divider>
                <el-table :data="pieceRequest.items" style="width: 100%">
                  <el-table-column type="index" label="#"> </el-table-column>

                  <el-table-column label="تاریخ پذیرش" width="">
                    <template slot-scope="scope">
                      <a :href="scope.row.url" target="_blank" :download="scope.row.name">{{ scope.row.name }}</a>
                    </template>
                  </el-table-column>

                  <el-table-column prop="ItemName" label="نام کالا" width=""></el-table-column>

                  <el-table-column label="سریال گارانتی" width="">
                    <template slot-scope="scope">
                      <span> {{ scope.row.SerialNo1 || '-' }} </span>
                    </template>
                  </el-table-column>

                  <el-table-column label="وضعیت گارانتی" width="">
                    <template slot-scope="scope">
                      <span v-if="scope.row.gStatus">دارد</span>
                      <span v-else>ندارد</span>
                    </template>
                  </el-table-column>

                  <el-table-column prop="pieceName" label="نام قطعه" width=""></el-table-column>

                  <el-table-column prop="pieceCode" label="کد قطعه" width=""></el-table-column>

                  <el-table-column prop="pieceQuantity" label="تعداد" width=""></el-table-column>
                </el-table>
              </CCol>
            </CRow>
          </CCardBody>
        </CCard>
      </CCol>
    </CRow>
  </div>
</template>

<script>
export default {
  name: 'AdminPieceRequestDetails',
  layout: 'admin',
  async asyncData({ $axios, params, error }) {
    try {
      const pieceRequest = await $axios.get(`/api/admin/pr/${params.prId}`)
      return {
        pieceRequest: pieceRequest.data
      }
    } catch (e) {
      error({ status: 404, message: 'Page not found' })
    }
  },
  data() {
    return {
      title: 'مشاهده درخواست قطعه',
      pieceRequest: null,
      deliverPopover: false,
      deliveryCode: '',
      validation: {}
    }
  },
  head() {
    return {
      title: this.title
    }
  },
  methods: {
    updateStatus(status) {
      if (status === this.pieceRequest.status) return
      if (this.pieceRequest.status === 'delivered') return
      const title = 'هشدار'
      function getMsg() {
        const msg1 = 'با تغییر وضعیت فرم به در انتظار قطعه بلافاصله پیامک اطلاع رسانی برای نماینده ارسال خواهد شد'
        const msg2 =
          'با تغییر وضعیت فرم به تحویل شده بلافاصله پیامک اطلاع رسانی برای نماینده ارسال خواهد شد. توجه داشته باشید بعدا نمیتوانید کد ارسال مرسوله را تغییر دهید.'

        if (status === 'ongoing') return msg1
        else return msg2
      }

      this.$confirm(getMsg(), title, {
        confirmButtonText: 'ادامه',
        cancelButtonText: 'لغو',
        type: 'warning'
      })
        .then(() => {
          this.$axios
            .put(`/api/admin/prStatus/${this.pieceRequest._id}`, { status, deliveryCode: this.deliveryCode })
            .then(response => {
              this.$message({
                type: 'success',
                message: response.data.message
              })
              this.deliveryCode = ''
              this.$nuxt.refresh()
            })
            .catch(err => {
              this.$message({
                type: 'error',
                message: err.response.data.message
              })
            })
        })
        .catch(() => {
          this.$message({
            type: 'warning',
            message: 'عملیات لغو شد'
          })
        })
    }
  }
}
</script>