asan-service/pages/admin/serials-exel/index.vue

<template>
  <div>
    <CustomSubHeader>
      <CBreadcrumb class="border-0 mb-0">{{ title }}</CBreadcrumb>
    </CustomSubHeader>
    <CRow>
      <CCol xl="6">
        <CCard>
          <CCardBody>
            <h3>افزودن فایل اکسل</h3>
            <el-divider></el-divider>
            <input ref="file" type="file" class="d-block" />
            <p v-if="validation.file" class="text-danger mt-3">{{ validation.file.msg }}</p>
            <el-button type="success" class="mt-3" size="small" style="color: #fff" @click="post">افزودن</el-button>
          </CCardBody>
        </CCard>
      </CCol>

      <CCol xl="6">
        <CCard>
          <CCardBody>
            <h3>لیست فایل های افزوده شده</h3>
            <el-divider></el-divider>
            <el-table :data="files" style="width: 100%">
              <el-table-column type="index" label="#"> </el-table-column>

              <el-table-column label="نام فایل" width="">
                <template slot-scope="scope">
                  <a
                    download
                    target="_blank"
                    title="برای دانلود کلیک کنید"
                    :href="scope.row.url + scope.row.name"
                    style="color: blue; display: block; direction: ltr !important; text-align: right"
                  >
                    {{ scope.row.name }}
                  </a>
                </template>
              </el-table-column>

              <el-table-column label="حذف" width="60" align="left">
                <template slot-scope="scope">
                  <CButton :key="scope.row._id" color="danger" variant="outline" @click="del(scope.row.name)">
                    <i class="fal fa-trash-alt"></i>
                  </CButton>
                </template>
              </el-table-column>
            </el-table>
          </CCardBody>
        </CCard>
      </CCol>
    </CRow>
  </div>
</template>

<script>
export default {
  name: 'AddminGuaranteeSerials',
  layout: 'admin',
  async asyncData({ $axios, error, query }) {
    try {
      const type = query?.type
      if (!type) throw new Error('invalid type')
      const files = await $axios.get('/api/admin/serialExels', {
        params: { type }
      })
      return {
        files: files.data
      }
    } catch (e) {
      console.log(e)
      error({ status: 500, message: 'there is a problem here' })
    }
  },
  data() {
    return {
      files: null,
      validation: {}
    }
  },
  head() {
    return {
      title: this.title
    }
  },
  computed: {
    type() {
      return this.$route.query?.type
    },
    title() {
      if (this.type === 'guaranteeSerial') return 'فایل اکسل شماره سریال گارانتی'
      else return 'فایل اکسل شماره سریال کالا'
    }
  },
  watch: {
    type(newVal, oldVal) {
      this.$nuxt.refresh()
    }
  },
  methods: {
    post() {
      this.validation = {}
      const data = new FormData()
      data.append('type', this.type)
      data.append('file', this.$refs.file.files[0])
      this.$axios
        .post('/api/admin/addExel', 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)
        })
    },
    del(name) {
      this.$confirm('این مورد حذف شود؟', 'هشدار', {
        confirmButtonText: 'بله',
        cancelButtonText: 'لغو',
        type: 'warning'
      })
        .then(() => {
          this.$axios
            .delete(`/api/admin/removeExel/${name}`, {
              params: {
                type: this.type
              }
            })
            .then(response => {
              this.$message({
                type: 'success',
                message: 'آیتم حذف شد'
              })
              this.files = this.files.filter(item => item.name !== name)
            })
            .catch(err => {
              this.$message({
                type: 'error',
                message: err.response.data.message
              })
            })
        })
        .catch(() => {
          this.$message({
            type: 'warning',
            message: 'عملیات لغو شد'
          })
        })
    }
  }
}
</script>