asan-service/pages/admin/gps/installed-device/index.vue

<template>
  <div>
    <CustomSubHeader>
      <CBreadcrumb class="border-0 mb-0"> دستگاه های نصب شده</CBreadcrumb>
    </CustomSubHeader>

    <CRow>
      <CCol xl="6">
        <CCard>
          <CCardHeader>
            <slot name="header">
              <i class="fas fa-filter"></i>
              <b>فیلتر ها</b>
            </slot>
          </CCardHeader>

          <CCardBody>
            <CRow>
              <CCol sm="12">
                <CButtonGroup>
                  <CButton color="primary" :class="filterType === 'all' && 'selected'" @click="filterType = 'all'"
                    >همه</CButton
                  >
                  <CButton color="danger" :class="filterType === 'rej' && 'selected'" @click="filterType = 'rej'"
                    >رد شده</CButton
                  >
                  <CButton color="success" :class="filterType === 'accept' && 'selected'" @click="filterType = 'accept'"
                    >تایید شده</CButton
                  >
                  <CButton color="warning" :class="filterType === 'pend' && 'selected'" @click="filterType = 'pend'"
                    >درانتظار تایید</CButton
                  >
                </CButtonGroup>
              </CCol>
              <CCol sm="12">
                <el-divider></el-divider>
              </CCol>
              <CCol sm="12">
                <h4>جستجو در لیست:</h4>
                <el-input
                  v-model="filterText"
                  clearable
                  placeholder=""
                  style="display: inline-block; max-width: 500px; margin-top: 8px"
                ></el-input>
              </CCol>
            </CRow>
          </CCardBody>
        </CCard>
      </CCol>
    </CRow>

    <CCard>
      <CCardHeader>
        <slot name="header">
          <CIcon name="cil-grid" />
          دستگاه های نصب شده
        </slot>
      </CCardHeader>

      <CCardBody>
        <el-table :data="filteredItems" :row-class-name="hasUnread" style="width: 100%">
          <el-table-column type="index" label="#"> </el-table-column>

          <el-table-column label="مدل" width="150px">
            <template slot-scope="scope">
              {{ scope?.row?.deviceId?.model }}
              {{ scope?.row?.deviceType }}
            </template>
          </el-table-column>
          <el-table-column prop="IMEI" label=" IMEI" width="150px"> </el-table-column>

          <el-table-column label="نام فروشگاه" width="">
            <template slot-scope="scope">
              {{ scope?.row?.userId?.shopName }}
            </template>
          </el-table-column>
          <el-table-column label="کدملی فروشنده" width="">
            <template slot-scope="scope">
              {{ scope?.row?.userId?.national_code }}
            </template>
          </el-table-column>
          <el-table-column label=" نام و نام خانوادگی" width="">
            <template slot-scope="scope">
              {{ scope?.row?.userId?.first_name + ' ' + scope?.row?.userId?.last_name }}
            </template>
          </el-table-column>
          <el-table-column label=" شماره همراه" width="">
            <template slot-scope="scope">
              {{ scope?.row?.userId?.mobile_number }}
            </template>
          </el-table-column>

          <el-table-column label="محل سکونت" width="">
            <template slot-scope="scope">
              {{ scope?.row?.userId?.province_name + ', ' + scope?.row?.userId?.city_name }}
            </template>
          </el-table-column>

          <el-table-column label="وضعیت" width="">
            <template slot-scope="scope">
              <el-tag v-if="scope?.row?.status == 2" type="danger"> رد شده</el-tag>
              <el-tag v-if="scope?.row?.status == 1" type="success">تایید شده</el-tag>

              <el-tag v-if="scope?.row?.status == 0" type="warning"> درانتظار تایید</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="تایید" width="110" align="center">
            <template slot-scope="scope">
              <!-- <CButton
                v-if="scope?.row?.status == 0 || scope?.row?.status == 2"
                :key="scope?.row?._id"
                color="success"
                variant="outline"
                @click="post(scope?.row?._id, 'accept')"
              >
                <i class="fa fa-check-square"></i>
              </CButton> -->
              <CButton
                v-if="scope?.row?.status == 0 || scope?.row?.status == 1"
                :key="scope?.row?._id"
                color="danger"
                variant="outline"
                @click="post(scope?.row?._id, 'reject')"
              >
                <i class="fa fa-window-close"></i>
              </CButton>
            </template>
          </el-table-column>
        </el-table>
      </CCardBody>
    </CCard>
  </div>
</template>

<script>
export default {
  name: 'AdminGpsInstalledDevicesList',
  layout: 'admin',
  async asyncData({ $axios, error, query }) {
    try {
      const { data } = await $axios.get('/api/admin/gps/register-device')

      return {
        devices: data.data
      }
    } catch (error) {
      console.log(error)
    }
  },
  data() {
    return {
      devices: [],

      device: {},
      filterText: ''
    }
  },

  computed: {
    config() {
      return this.$config
    },
    filteredItems() {
      const filterUsersByType = this.devices.filter(item => {
        if (this.filterType === 'all') return item
        // eslint-disable-next-line eqeqeq
        else if (this.filterType === 'rej') return item.status == 2
        // eslint-disable-next-line eqeqeq
        else if (this.filterType === 'accept') return item.status == 1
        // eslint-disable-next-line eqeqeq
        else if (this.filterType === 'pend') return item.status == 0
        else return null
      })
      const filterText = this.filterText
      if (!this.filterText.length) return filterUsersByType
      else {
        return this.devices.filter(item => {
          return item.IMEI.includes(filterText) || item.deviceId.model.includes(filterText)
        })
      }
    },
    filterType: {
      get() {
        return this.$route.query?.filter
      },
      set(val) {
        this.$router.push({ name: 'admin-gps-installed-device', query: { filter: val } })
      }
    }
  },
  methods: {
    hasUnread({ row, rowIndex }) {
      return row.status === 0 ? 'unreadMsgInCv' : null
    },
    post(id, status) {
      this.$axios
        .patch(`/api/admin/gps/register-device/${id}/${status}`, {})
        .then(res => {
          this.$message({
            type: 'success',
            message: res.data.msg
          })
          this.$nuxt.refresh()
        })
        .catch(err => {
          if (err.response.data.status === 401) {
            return this.$message({
              type: 'warning',
              message: 'لطفا دوباره وارد حساب خود شوید'
            })
          }
          if (err.response.status === 422) this.validation = err.response.data.validation
          else {
            console.log(err)
            return this.$message({
              type: 'warning',
              message: err.msg
            })
          }
        })
    }
  }
}
</script>
<style>
.unreadMsgInCv {
  background: rgba(orange, 0.1) !important;
}
</style>