asan-service/pages/admin/gps/withdraw/g.vue

<template>
  <div>
    <el-dialog title="اطلاعات کاربر" :visible.sync="centerDialogVisible" width="40%" center>
      <el-descriptions title="" direction="vertical" :column="4" border>
        <el-descriptions-item label="نام و نام خانودگی">{{
          requestData.userId?.first_name + ' ' + requestData.userId?.last_name
        }}</el-descriptions-item>
        <el-descriptions-item label="شماره همراه">{{ requestData.userId?.mobile_number }}</el-descriptions-item>
        <el-descriptions-item label="استان">{{ requestData.userId?.province_name }}</el-descriptions-item>
        <el-descriptions-item label="شهر">{{ requestData.userId?.city_name }}</el-descriptions-item>
        <el-descriptions-item label="کد ملی ">{{ requestData.userId?.national_code }}</el-descriptions-item>
        <el-descriptions-item label="نام فروشگاه">{{ requestData.userId?.shopName }}</el-descriptions-item>
        <el-descriptions-item v-if=" requestData.status == 2" label="شماره پیگیری ">{{ requestData.trackingNumber }}</el-descriptions-item>
      </el-descriptions>
      <CCardBody>
        <el-table :data="[requestData?.card]" style="width: 100%">
          <el-table-column type="index" label="#"> </el-table-column>
          <el-table-column prop="holderName" label="نام صاحب کارت" width="200px"> </el-table-column>
          <el-table-column prop="PAN" label="شماره حساب" width="200px"> </el-table-column>
          <el-table-column prop="IBAN" label="شماره شبا" width=""> </el-table-column>
        </el-table>
      </CCardBody>

      <el-input
        v-if="requestData.status === 1"
        v-model="trackingNumber"
        placeholder="شماره پیگیری"
        style="display: inline-block; max-width: 500px; margin-top: 8px"
      ></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">بستن</el-button>
        <el-button v-if=" requestData.status !== 2" type="primary" @click="patchIt(requestData._id, requestData.status, { trackingNumber })">{{
          requestData.status == 1 ? 'تایید واریز' : 'تایید'
        }}</el-button>
      </span>
    </el-dialog>

    <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="success" :class="filterType === 'dep' && 'selected'" @click="filterType = 'dep'">
                    واریز شده</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.amount }}
            </template>
          </el-table-column>
          <el-table-column prop="dollarAmount" label=" مبلغ دلاری" 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" color="info"> واریز شده</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 :key="scope.row._id" color="info" variant="outline" @click="showDialog(scope.row)">
                <i class="fa fa-eye"></i>
              </CButton>
            </template>
          </el-table-column>
        </el-table>
      </CCardBody>
    </CCard>
  </div>
</template>

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

      return {
        requestsData: data.data
      }
    } catch (error) {
      console.log(error)
    }
  },
  data() {
    return {
      requestsData: [],
      centerDialogVisible: false,
      requestData: {},
      filterText: '',
      trackingNumber: null
    }
  },

  computed: {
    config() {
      return this.$config
    },
    filteredItems() {
      const filterUsersByType = this.requestsData.filter(item => {
        if (this.filterType === 'all') return item
        // eslint-disable-next-line eqeqeq
        else if (this.filterType === 'dep') 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.requestsData.filter(item => {
          return item.userId.mobile_number.includes(filterText) ||
           item.userId.national_code.includes(filterText) ||
           item.userId.last_name.includes(filterText) ||
           item.userId.first_name.includes(filterText) 
        })
      }
    },
    filterType: {
      get() {
        return this.$route.query?.filter
      },
      set(val) {
        this.$router.push({ name: 'admin-gps-withdraw', query: { filter: val } })
      }
    }
  },
  methods: {
    showDialog(data) {
      this.requestData = data
      this.centerDialogVisible = true
    },
    hasUnread({ row, rowIndex }) {
      return row.status === 0 ? 'unreadMsgInCv' : null
    },
    patchIt(id, status, data) {
      let st
      // eslint-disable-next-line eqeqeq
      if (status == 1) {
        st = 'deposit'
        if (!data?.trackingNumber) {
          return this.$message({
            type: 'warning',
            message: 'لطفا شماره پیگیری را وارد کنید'
          })
        }
      } else {
        st = 'accept'
      }

      this.$axios
        .patch(`/api/admin/gps/withdraw/${id}/${st}`, data)
        .then(res => {
          this.$message({
            type: 'success',
            message: res.data.msg
          })
          this.trackingNumber = null
          this.centerDialogVisible = false

          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>