asan-service/pages/admin/customers/index.vue

<template>
  <div>
    <CustomSubHeader>
      <CBreadcrumb class="border-0 mb-0">{{ title }}</CBreadcrumb>
    </CustomSubHeader>

    <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="warning" :class="filterType === 'new' && 'selected'" @click="filterType = 'new'"
                >جدیدها</CButton
              >
              <CButton
                color="warning"
                :class="filterType === 'customers' && 'selected'"
                @click="filterType = 'customers'"
                >مشتریان</CButton
              >
              <CButton color="success" :class="filterType === 'agents' && 'selected'" @click="filterType = 'agents'"
                >نمایندگان</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>

    <CCard>
      <CCardHeader>
        <slot name="header">
          <CIcon name="cil-grid" />
          {{ list_title }}
        </slot>
      </CCardHeader>

      <CCardBody>
        <el-table
          v-loading="fetching"
          :data="filteredItems"
          :row-class-name="({ row, rowIndex }) => !row.seenByAdmin && 'unread'"
          style="width: 100%"
        >
          <el-table-column type="index" label="#"> </el-table-column>

          <el-table-column label="نام" width="">
            <template slot-scope="scope">
              {{ scope.row.first_name + ' ' + scope.row.last_name }}
            </template>
          </el-table-column>

          <el-table-column prop="national_code" label="کد ملی" width=""> </el-table-column>

          <el-table-column prop="mobile_number" label="شماره موبایل" width=""> </el-table-column>

          <el-table-column prop="verity_businessCode" label="کد مشتری (وریتی)" width=""> </el-table-column>
          <el-table-column prop="verity_businessID" label="آیدی (وریتی)" width=""> </el-table-column>

          <el-table-column prop="panatech_businessCode" label="کد مشتری (پاناتک)" width=""> </el-table-column>
          <el-table-column prop="panatech_businessID" label="آیدی (پاناتک)" width=""> </el-table-column>

          <el-table-column prop="province_name" label="استان" width=""> </el-table-column>
          <el-table-column prop="city_name" label="شهر" width=""> </el-table-column>

          <el-table-column prop="city_name" label="تاریخ ثبت نام" width="">
            <template slot-scope="scope">
              <span>{{ $jDate(scope.row.created_at) }}</span>
            </template>
          </el-table-column>

          <el-table-column label="ویرایش" width="65" align="center">
            <template slot-scope="scope">
              <CButton
                :key="scope.row._id"
                color="success"
                variant="outline"
                :to="{ name: 'admin-customers-customer', params: { customer: scope.row._id } }"
              >
                <i class="fal fa-edit"></i>
              </CButton>
            </template>
          </el-table-column>
        </el-table>
      </CCardBody>
    </CCard>
  </div>
</template>

<script>
export default {
  name: 'AdminCustomersList',
  layout: 'admin',
  data() {
    return {
      title: 'مشتریان',
      list_title: 'لیست',
      users: [],
      fetching: false,
      filterText: ''
    }
  },
  head() {
    return {
      title: this.title
    }
  },
  computed: {
    filteredItems() {
      const filterUsersByType = this.users.filter(item => {
        if (this.filterType === 'all') return item
        else if (this.filterType === 'new' && !item.seenByAdmin) return item
        else if (this.filterType === 'customers' && !item.isAgent) return item
        else if (this.filterType === 'agents' && item.isAgent) return item
        else return null
      })
      const filterText = this.filterText
      if (!this.filterText.length) return filterUsersByType
      else {
        return filterUsersByType.filter(item => {
          return (
            item.first_name.includes(filterText) ||
            item.last_name.includes(filterText) ||
            item.mobile_number.includes(filterText) ||
            item.national_code.includes(filterText) ||
            item.verity_businessID?.includes(filterText) ||
            item.verity_businessCode?.includes(filterText) ||
            item.panatech_businessID?.includes(filterText) ||
            item.panatech_businessCode?.includes(filterText) ||
            item.province_name?.includes(filterText) ||
            item.city_name?.includes(filterText) ||
            (item.first_name + ' ' + item.last_name).includes(filterText)
          )
        })
      }
    },
    filterType: {
      get() {
        return this.$route.query?.filter
      },
      set(val) {
        this.$router.push({ name: 'admin-customers', query: { filter: val } })
      }
    }
  },
  async mounted() {
    try {
      this.fetching = true
      const users = await this.$axios.get('/api/admin/users')
      this.users = users.data
      this.fetching = false
    } catch (err) {
      this.$fetchError()
    }
  }
}
</script>

<style scopped lang="scss">
.selected {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
  z-index: 2;
}

.unread {
  background: rgba(orange, 0.1) !important;
}
</style>