asan-service/pages/admin/agents/_agent.vue

<template>
  <div>
    <CustomSubHeader>
      <CBreadcrumb class="border-0 mb-0">{{ title }}</CBreadcrumb>
      <el-tag v-if="agent._updatedBy && agent._updatedBy.first_name" type="primary" class="ml-1">
        <span>ایجاد یا اصلاح کننده: </span>
        <span> {{ agent._updatedBy.first_name + ' ' + agent._updatedBy.last_name }} </span>
      </el-tag>
      <el-tag v-if="agent._revoked && agent._revokedBy.first_name" type="danger">
        <span>صلب امتیاز شده توسط: </span>
        <span> {{ agent._revokedBy.first_name + ' ' + agent._revokedBy.last_name }} </span>
      </el-tag>
      <CButton
        v-if="updatePermission && !agent._revoked"
        size="sm"
        color="warning"
        class="mr-auto"
        @click="goToUpdatePage"
      >
        <span style="color: #fff"> تغییر اطلاعات نماینده </span>
      </CButton>
      <CButton size="sm" color="danger" class="mr-1" @click="revoke">
        <span style="color: #fff">ابطال امتیاز نماینده</span>
      </CButton>
      <CButton
        size="sm"
        color="primary"
        :class="updatePermission && !agent._revoked ? 'mr-1' : 'mr-auto'"
        @click="$router.go(-1)"
        >برگشت به صفحه قبل</CButton
      >
    </CustomSubHeader>

    <CRow>
      <CCol lg="12">
        <CCard>
          <CCardBody>
            <h6>گزارش کلی عملکرد نماینده:</h6>
            <CRow class="align-items-stretch mt-3">
              <CCol sm="6" md="4" class="mb-1">
                <div class="card" style="height: 100%">
                  <div class="card-body d-flex align-items-center p-3">
                    <div class="ml-3 text-white bg-warning p-3">
                      <i class="fal fa-inbox"></i>
                    </div>
                    <div>
                      <div class="text-value text-info">{{ getAgentInboxCount('unread') }}</div>
                      <div class="text-muted text-uppercase font-weight-bold small">صندوق ورودی (دیده نشده)</div>
                    </div>
                  </div>
                </div>
              </CCol>

              <CCol sm="6" md="4" class="mb-1">
                <div class="card" style="height: 100%">
                  <div class="card-body d-flex align-items-center p-3">
                    <div class="ml-3 text-white bg-danger p-3">
                      <i class="fal fa-inbox"></i>
                    </div>
                    <div>
                      <div class="text-value text-info">{{ getAgentInboxCount('ttl') }}</div>
                      <div class="text-muted text-uppercase font-weight-bold small">صندوق ورودی (در انتظار پذیرش)</div>
                    </div>
                  </div>
                </div>
              </CCol>

              <CCol sm="6" md="4" class="mb-1">
                <div class="card" style="height: 100%">
                  <div class="card-body d-flex align-items-center p-3">
                    <div class="ml-3 text-white bg-success p-3">
                      <i class="fal fa-inbox"></i>
                    </div>
                    <div>
                      <div class="text-value text-info">{{ getAgentInboxCount('atl') }}</div>
                      <div class="text-muted text-uppercase font-weight-bold small">صندوق ورودی (پذیرش شده)</div>
                    </div>
                  </div>
                </div>
              </CCol>

              <CCol sm="6" md="4" class="mb-1">
                <div class="card" style="height: 100%">
                  <div class="card-body d-flex align-items-center p-3">
                    <div class="ml-3 text-white bg-primary p-3">
                      <i class="fas fa-wrench"></i>
                    </div>
                    <div>
                      <div class="text-value text-info">{{ agentPr.length }}</div>
                      <div class="text-muted text-uppercase font-weight-bold small">درخواست قطعه</div>
                    </div>
                  </div>
                </div>
              </CCol>

              <CCol sm="6" md="4" class="mb-1">
                <div class="card" style="height: 100%">
                  <div class="card-body d-flex align-items-center p-3">
                    <div class="ml-3 text-white bg-primary p-3">
                      <i class="fas fa-backpack"></i>
                    </div>
                    <div>
                      <div class="text-value text-info">{{ agentOpr.length }}</div>
                      <div class="text-muted text-uppercase font-weight-bold small">درخواست قطعه داغی</div>
                    </div>
                  </div>
                </div>
              </CCol>

              <CCol sm="6" md="4" class="mb-1">
                <div class="card" style="height: 100%">
                  <div class="card-body d-flex align-items-center p-3">
                    <div class="ml-3 text-white bg-primary p-3">
                      <i class="fab fa-buffer"></i>
                    </div>
                    <div>
                      <div class="text-value text-info">{{ agentBr.length }}</div>
                      <div class="text-muted text-uppercase font-weight-bold small">درخواست کالای بافر</div>
                    </div>
                  </div>
                </div>
              </CCol>
            </CRow>
          </CCardBody>
        </CCard>
      </CCol>

      <CCol lg="12">
        <CCard>
          <CCardBody>
            <h6>تغییر وضعیت آپلود مدارک</h6>
            <el-divider></el-divider>
            <CButtonGroup>
              <CButton :color="agent.upload ? 'primary' : 'light'" @click="updateStatus('uploadOn')">
                دسترسی آپلود
              </CButton>

              <CButton :color="!agent.upload ? 'primary' : 'light'" @click="updateStatus('uploadOff')">
                عدم دسترسی آپلود
              </CButton>
            </CButtonGroup>
          </CCardBody>
        </CCard>
      </CCol>

      <CCol lg="12">
        <CCard>
          <CCardBody>
            <h6>دسترسی ویرایش اطلاعات نمایندگی</h6>
            <el-divider></el-divider>
            <CButtonGroup>
              <CButton :color="agent.editAccess ? 'primary' : 'light'" @click="updateStatus('editAccessOn')">
                دسترسی ویرایش
              </CButton>

              <CButton :color="!agent.editAccess ? 'primary' : 'light'" @click="updateStatus('editAccessOff')">
                عدم دسترسی ویرایش
              </CButton>
            </CButtonGroup>
          </CCardBody>
        </CCard>
      </CCol>

      <CCol lg="6">
        <CCard>
          <CCardBody>
            <h6>مشخصات فردی نماینده:</h6>
            <el-divider></el-divider>
            <nuxt-link :to="{ name: 'admin-customers-customer', params: { customer: agent.user_id } }"
              >مشاهده اکانت کاربری</nuxt-link
            >
            <el-divider></el-divider>
            <CForm>
              <CInput label="نام مشتری" horizontal disabled :value="agent.full_name" />
              <CInput label="کد ملی" horizontal disabled :value="agent.national_code" />
              <CInput label="شماره شناسنامه" horizontal disabled :value="agent.id_number" />
              <CInput label="محل صدور" horizontal disabled :value="agent.place_of_issue" />
              <CInput label="تاریخ تولد" horizontal disabled :value="agent.birth_date" />
              <CInput label="نام پدر" horizontal disabled :value="agent.fathers_name" />
              <CInput label="میزان تحصیلات" horizontal disabled :value="agent.education_level" />
              <CInput label="وضعیت نظام وظیفه" horizontal disabled :value="agent.military_status" />
              <CTextarea label="گواهینامه های تخصصی اخذ شده" horizontal disabled rows="5" :value="agent.certificates" />
            </CForm>
          </CCardBody>
        </CCard>
      </CCol>

      <CCol lg="6">
        <CCard>
          <CCardBody>
            <h6>اطلاعات تماس:</h6>
            <el-divider></el-divider>

            <CForm>
              <CInput label="استان" horizontal disabled :value="agent.province_name" />
              <CInput label="شهر" horizontal disabled :value="agent.city_name" />
              <CInput label="نام شرکت/تعمیرگاه" horizontal disabled :value="agent.store_name" />
              <CInput label="کد پستی" horizontal disabled :value="agent.postal_code" />
              <CInput label="تلفن همراه" horizontal disabled :value="agent.mobile_number" />
              <CInput label="تلفن شرکت/تعمیرگاه" horizontal disabled :value="agent.tel_number" />
              <CInput label="فکس شرکت/تعمیرگاه" horizontal disabled :value="agent.fax_number" />
              <CInput label="کد اقتصادی" horizontal disabled :value="agent.economic_code" />
              <CInput label="ایمیل" horizontal disabled :value="agent.email" />
              <CTextarea label="آدرس" horizontal disabled rows="5" :value="agent.address" />
            </CForm>
          </CCardBody>
        </CCard>
      </CCol>

      <CCol lg="6">
        <CCard>
          <CCardBody>
            <h6>مشخصات مکان نماینده:</h6>
            <el-divider></el-divider>
            <CForm>
              <CInput label="جواز کسب" horizontal disabled :value="business_license" />
              <CInput label="نوع مالکیت" horizontal disabled :value="ownership_type" />
              <CInput label="متراژ کل (متر)" horizontal disabled :value="agent.total_area" />
              <CInput label="متراژ محل تعمیرات (متر)" horizontal disabled :value="agent.repair_area" />
              <CInput label="متراژ انبار (متر)" horizontal disabled :value="agent.stock_area" />
              <CInput label="طبقه محل مراجعه مشتریان" horizontal disabled :value="agent.customer_reference_floor" />

              <CInput label="موقعیت مکانی" horizontal disabled :value="place_location" />
              <CInput label="موقعیت جغرافیایی" horizontal disabled :value="geo_location" />
              <CInput label="تعداد و ابعاد تابلو" horizontal disabled :value="agent.banner_info" />
              <CInput label="تعداد تکنسین های تعمیرگاه" horizontal disabled :value="agent.repair_technicians" />
              <CInput label="تعداد استادکار تعمیرگاه" horizontal disabled :value="agent.repair_masters" />
              <CInput label="تعداد کارکنان اداری" horizontal disabled :value="agent.office_workers" />
              <CInput label="تعداد پیک موتوری" horizontal disabled :value="agent.bike_deliveries" />
            </CForm>
          </CCardBody>
        </CCard>
      </CCol>

      <CCol lg="6">
        <CCard>
          <CCardBody>
            <h6>آشنایی با آسان سرویس:</h6>
            <el-divider></el-divider>
            <CForm>
              <CInput label="نحوه آشنایی با شرکت" horizontal disabled :value="know_asanServ_from" />
              <CTextarea
                label="در صورتیکه معرف دارید مشخصات ایشان را ذکر کنید"
                horizontal
                disabled
                rows="5"
                :value="agent.introducer_info"
              />

              <CInput
                label="میزان آشنایی با محصولات آسان سرویس"
                horizontal
                disabled
                :value="asanServ_products_knowledge"
              />
              <CInput
                label="آیا در زمینه فروش لوازم جانبی موبایل و کامپیوتر فعالیت دارید؟"
                horizontal
                disabled
                :value="computer_saling_exp"
              />
              <CTextarea
                label="در صورت فعالیت فروش، نام شرکت و نوع محصول را نام ببرید"
                horizontal
                disabled
                rows="5"
                :value="agent.computer_saling_description"
              />
            </CForm>
          </CCardBody>
        </CCard>
      </CCol>

      <CCol lg="6">
        <CCard>
          <CCardBody>
            <h6>سایر توضیحات:</h6>
            <el-divider></el-divider>
            <CForm>
              <CTextarea label="سایر توضیحات" horizontal disabled rows="5" :value="agent.more_descriptions" />
            </CForm>
          </CCardBody>
        </CCard>
      </CCol>

      <CCol lg="6">
        <CCard>
          <CCardBody>
            <h6>سابقه فعالیت:</h6>
            <el-divider></el-divider>
            <CForm>
              <CInput
                label="سابقه فعالیت در تعمیر ابزار جانبی موبایل و کامپیوتر (سال)"
                horizontal
                disabled
                :value="agent.computer_repair_exp"
              />
              <CInput
                label="سابقه فعالیت در تعمیر لوزام صوتی و تصویری (سال)"
                horizontal
                disabled
                :value="agent.multimedia_repair_exp"
              />
              <CInput label="سابقه در محل کسب (سال)" horizontal disabled :value="agent.business_exp" />
            </CForm>
          </CCardBody>
        </CCard>
      </CCol>

      <CCol lg="12">
        <CCard>
          <CCardBody>
            <h6>نمایندگی نشان تجاری دیگر:</h6>
            <el-divider></el-divider>
            <el-table :data="agent.other_representations" style="width: 100%">
              <el-table-column type="index" label="#"> </el-table-column>

              <el-table-column prop="trademark" label="نشان تجاری" width=""> </el-table-column>

              <el-table-column prop="company_name" label="نام شرکت" width=""> </el-table-column>

              <el-table-column prop="cooperation_history" label="سابقه همکاری (سال)" width=""> </el-table-column>

              <el-table-column prop="cooperation_start_year" label="سال شروع همکاری" width=""> </el-table-column>
            </el-table>
          </CCardBody>
        </CCard>
      </CCol>

      <CCol v-for="item in agentAssetCategories" :key="item.fieldName" lg="12">
        <CCard>
          <CCardBody>
            <CRow>
              <CCol>
                <h6>
                  {{ item.title }}
                  (عکس های آپلود شده)

                  <el-button
                    size="small"
                    :type="editFiles === item.fieldName ? 'success' : 'info'"
                    @click="toggleEditFiles(item.fieldName)"
                  >
                    <span style="color: #fff"> ویرایش مدارک </span>
                  </el-button>
                </h6>
                <el-divider></el-divider>

                <template v-if="editFiles === item.fieldName">
                  <RepresentationImageUploader
                    :name="item.fieldName"
                    :files-list="agent[item.fieldName] || []"
                    :representation_code="agent.representation_code"
                    is-admin
                  />
                </template>
                <template v-else>
                  <el-image
                    v-for="image in agent[item.fieldName] || []"
                    :key="image._id"
                    style="width: 100px; height: 100px"
                    :src="image.url"
                    :preview-src-list="getImagePreviewList(agent[item.fieldName] || [])"
                    fit="cover"
                    class="ml-2"
                  >
                  </el-image>
                </template>
              </CCol>
            </CRow>
          </CCardBody>
        </CCard>
      </CCol>
    </CRow>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'AdminAgentDetails',
  layout: 'admin',
  async asyncData({ $axios, params, error }) {
    try {
      const allData = await Promise.all([
        // agent
        $axios.get(`/api/admin/agentDetails/${params.agent}`),
        // agentInbox
        $axios.get(`/api/admin/agentInbox/${params.agent}`),
        // agent buffer request
        $axios.get(`/api/admin/agentBr/${params.agent}`),
        // agent oldPiece request
        $axios.get(`/api/admin/agentOpr/${params.agent}`),
        // agent piece request
        $axios.get(`/api/admin/agentPr/${params.agent}`)
      ])
      const agent = allData[0]
      const agentInbox = allData[1]
      const agentBr = allData[2]
      const agentOpr = allData[3]
      const agentPr = allData[4]

      return {
        agent: agent.data,
        agentInbox: agentInbox.data,
        agentBr: agentBr.data,
        agentOpr: agentOpr.data,
        agentPr: agentPr.data
      }
    } catch (e) {
      error({ status: 404, message: 'Page not found' })
    }
  },
  data() {
    return {
      title: 'مشاهده درخواست نمایندگی',
      agent: null,
      agentInbox: null,
      agentBr: null,
      agentOpr: null,
      agentPr: null,
      editFiles: '',
      validation: {}
    }
  },
  head() {
    return {
      title: this.title
    }
  },
  computed: {
    ...mapGetters({
      agentAssetCategories: 'front/agentAssetCategories'
    }),
    updatePermission() {
      return this.$auth.user.permissions.includes('agentUpdate')
    },
    business_license() {
      if (this.agent.business_license) return 'دارد'
      else return 'ندارد'
    },
    ownership_type() {
      if (this.agent.ownership_type === 'owner') return 'مالک'
      else if (this.agent.ownership_type === 'rent') return 'استیجاری'
      else return 'سرقفلی'
    },
    place_location() {
      if (this.agent.place_location === 'tech_passage') return 'مرکز صنف موبایل و کامپیوتر'
      else return 'سایر'
    },
    geo_location() {
      if (this.agent.geo_location === 'main_street') return 'خیابان اصلی'
      else if (this.agent.geo_location === 'side_street') return 'خیابان فرعی'
      else if (this.agent.geo_location === 'alley') return 'کوچه'
      else if (this.agent.geo_location === 'inside_passage') return 'داخل پاساژ'
      else return 'بر پاساژ'
    },
    know_asanServ_from() {
      if (this.agent.know_asanServ_from === 'company_agents') return 'نماینده فروش'
      else if (this.agent.know_asanServ_from === 'website') return 'وب سایت'
      else if (this.agent.know_asanServ_from === 'company_workers') return 'پرسنل سازمان'
      else if (this.agent.know_asanServ_from === 'exhibition') return 'نمایشگاه'
      else if (this.agent.know_asanServ_from === 'introduced') return 'معرفی'
      else return 'سایر'
    },
    asanServ_products_knowledge() {
      if (this.agent.asanServ_products_knowledge === 4) return 'زیاد'
      else if (this.agent.asanServ_products_knowledge === 3) return 'نسبتاً خوب'
      else if (this.agent.asanServ_products_knowledge === 2) return 'متوسط'
      else if (this.agent.asanServ_products_knowledge === 1) return 'کم'
      else return 'خیلی کم'
    },
    computer_saling_exp() {
      if (this.agent.computer_saling_exp) return 'دارد'
      else return 'ندارد'
    }
  },
  watch: {
    editFiles(newVal, oldVal) {
      this.$nuxt.refresh()
    }
  },
  methods: {
    goToUpdatePage() {
      const title = 'هشدار'
      const msg =
        'توجه داشته باشید با تغییر اطللاعات نماینده اطلاعات چاپی روی رسید پذیرش موقت مشتریان تحت تاثیر قرار خواهند گرفت.'
      this.$confirm(msg, title, {
        confirmButtonText: 'رفتن به صفحه ویرایش',
        cancelButtonText: 'لغو',
        type: 'warning'
      })
        .then(() => {
          this.$router.push({ name: 'admin-agentUpdate', query: { agent: this.agent._id } })
        })
        .catch(() => {
          this.$message({
            type: 'warning',
            message: 'عملیات لغو شد'
          })
        })
    },
    getAgentInboxCount(status) {
      return this.agentInbox.filter(item => {
        if (status === 'unread') return !item.seen
        if (status === 'ttl') return !item.ItemReceptionTransNumber
        if (status === 'atl') return item.ItemReceptionTransNumber
        return false
      }).length
    },
    updateStatus(status) {
      if (status === this.agent.status) return
      const title = 'هشدار'
      function getMsg() {
        const msg1 = 'با تغییر وضعیت فرم به بررسی مدارک بلافاصله پیامک اطلاع رسانی برای متقاضی ارسال خواهد شد'
        const msg2 =
          'با تغییر وضعیت به رد شده یا تایید شده دیگر امکان تغییر وضعیت نخواهید داشت و پیامک تغییر وضعیت بلافاصله برای متقاضی ارسال خواهد شد، ادامه میدهید؟'
        const msg3 = 'پیامک ایجاد دسرترسی آپلود برای متقاضی ارسال خواهد شد، ادامه میدهید؟'
        const msg4 = 'با برداشتن دسترسی آپلود پیامکی برای متقاضی ارسال نخواهد شد'
        const msg5 = 'پیامک ایجاد دسرترسی ویرایش برای متقاضی ارسال خواهد شد، ادامه میدهید؟'
        const msg6 = 'با برداشتن دسترسی ویرایش پیامکی برای متقاضی ارسال نخواهد شد'

        if (status === 'verification') return msg1
        else if (status === 'rejected' || status === 'accepted') return msg2
        else if (status === 'uploadOn') return msg3
        else if (status === 'uploadOff') return msg4
        else if (status === 'editAccessOn') return msg5
        else return msg6
      }

      this.$confirm(getMsg(), title, {
        confirmButtonText: 'ادامه',
        cancelButtonText: 'لغو',
        type: 'warning'
      })
        .then(() => {
          this.$axios
            .put(`/api/admin/representationStatus/${this.agent._id}`, { status })
            .then(response => {
              this.$message({
                type: 'success',
                message: response.data.message
              })
              this.$nuxt.refresh()
            })
            .catch(err => {
              this.$message({
                type: 'error',
                message: err.response.data.message
              })
            })
        })
        .catch(() => {
          this.$message({
            type: 'warning',
            message: 'عملیات لغو شد'
          })
        })
    },
    getImagePreviewList(images) {
      return images.map(item => item.url)
    },
    async revoke() {
      try {
        const title1 = ' هشدار - مرحله اول'
        const title2 = ' هشدار - مرحله دوم'
        const title3 = ' هشدار - مرحله آخر'

        const msg1 = 'امتیاز نمایندگی از این نماینده صلب خواهد شد!'
        const msg2 =
          'با ابطال امتیاز نمایندگی دیگر امکان تغییر وجود ندارد و در صورت نیاز به اعطای مجدد امتیاز نمایندگی به این کاربر نیاز به ثبت درخواست مجدد توسط خود کاربر خواهد بود. '
        const msg3 = 'ادامه میدهید؟'

        /// first step
        await this.$confirm(msg1, title1, {
          confirmButtonText: 'ادامه',
          cancelButtonText: 'لغو',
          type: 'warning'
        })
        /// second step
        await this.$confirm(msg2, title2, {
          confirmButtonText: 'متوجه شدم ',
          cancelButtonText: 'لغو',
          type: 'warning'
        })
        /// the last confirmation and send request
        await this.$confirm(msg3, title3, {
          confirmButtonText: 'ابطال نمایندگی ',
          cancelButtonText: 'لغو',
          type: 'warning'
        })

        /// send request
        this.$axios
          .post(`/api/admin/revokeAgent/${this.agent._id}`)
          .then(res => {
            this.$message({
              type: 'success',
              message: res.data.message
            })
            this.$router.push({ name: 'admin-agents', query: { agent: true } })
          })
          .catch(() => {
            this.$message({
              type: 'error',
              message: 'مشکلی در روند انجام عملیات پیش آمده'
            })
          })
      } catch (e) {
        this.$message({
          type: 'warning',
          message: 'عملیات لغو شد'
        })
      }
    },
    toggleEditFiles(fieldName) {
      this.editFiles === fieldName ? (this.editFiles = '') : (this.editFiles = fieldName)
    }
  }
}
</script>