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

<template>
  <div>
    <CustomSubHeader>
      <CBreadcrumb class="border-0 mb-0"> دستگاه ها</CBreadcrumb>
      <CButton size="sm" color="success" class="mr-auto" @click="download">خروجی اکسل</CButton>
    </CustomSubHeader>

    <CRow>
      <CCol xl="8">
        <CCard>
          <CCardBody>
            <CRow>
              <CCol xl="8">
                <h3>اضافه کردن یا به روزرسانی با فایل اکسل</h3>
                <el-divider></el-divider>
                <input ref="file" type="file" class="d-block" />
                <el-button type="success" class="mt-3" size="small" @click="post">افزودن</el-button>
              </CCol>
              <CCol xl="4">
                <h3>دستور عمل</h3>
                <el-divider></el-divider>
                <p>
                  برای اضافه کردن دستگاه جدید فقط کافی است فایل نمونه رو دانلود کنید و به ترتیب مقادیر رو وارد کنید .
                  <br />
                  برای به روزرسانی یک دستگاه به صورت تکی یا عمده داخل فایل نمونه IMEI را قرار داده و مقادیر جدید آن را
                  ثبت کنید و آپلود کنید
                </p>
                <a
                  download
                  target="_blank"
                  title="برای دانلود کلیک کنید"
                  href="/example.xlsx"
                  style="color: blue; display: block; direction: ltr !important; text-align: right"
                >
                  فایل نمونه
                </a>
              </CCol>
            </CRow>
          </CCardBody>
        </CCard>
      </CCol>
      <CCol xl="4">
        <CCard>
          <CCardHeader>
            <slot name="header">
              <i class="fas fa-filter"></i>
              <b>فیلتر ها</b>
            </slot>
          </CCardHeader>

          <CCardBody>
            <CRow>
              <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" style="width: 100%">
          <el-table-column type="index" label="#"> </el-table-column>

          <el-table-column prop="model" label="مدل" width="150px"> </el-table-column>
          <el-table-column prop="IMEI" label=" IMEI" width="150px"> </el-table-column>

          <!-- <el-table-column prop="tomanPrice" label="قیمت دستگاه(تومان)" width=""> </el-table-column> -->
          <!-- <el-table-column prop="dollarProfit" label="سود دلاری فروشنده" width=""> </el-table-column> -->
          <el-table-column prop="score" label="امتیاز فروش" width=""> </el-table-column>
          <!-- <el-table-column prop="renewalProfit" label="سود تمدید" width=""> </el-table-column> -->

          <el-table-column prop="profit" label="سود تومانی فروشنده" width=""> </el-table-column>

          <el-table-column label="وضعیت" width="">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status == 1" type="success">نصب شده</el-tag>
              <el-tag v-else type="danger"> نصب نشده</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </CCardBody>
    </CCard>
  </div>
</template>

<script>
import FileDownload from 'js-file-download'
export default {
  name: 'AdminGpsDevicesList',
  layout: 'admin',
  async asyncData({ $axios, error, query }) {
    try {
      const { data } = await $axios.get('/api/admin/gps/device')

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

  computed: {
    config() {
      return this.$config
    },
    filteredItems() {
      const filterText = this.filterText
      if (!this.filterText.length) return this.devices
      else {
        return this.devices.filter(item => {
          return item.IMEI.includes(filterText) || item.model.includes(filterText)
        })
      }
    }
  },
  methods: {
    post() {
      this.validation = {}
      const data = new FormData()
      data.append('file', this.$refs.file.files[0])
      this.$axios
        .post('/api/admin/gps/device/exel', data)
        .then(res => {
          console.log('🚀 ~ file: index.vue ~ line 108 ~ post ~ res', res)
          this.$message({
            type: 'success',
            message: 'فایل با موفقیت ارسال شد'
          })
          this.$refs.file.value = null
          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)
        })
    },
    async download() {
      const x = await this.$axios.get('/api/admin/gps/device/exel')
      FileDownload(x.data, 'device.csv')
    }
  }
}
</script>