asan-service/pages/admin/op-requests/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="filterType === 'all' ? 'primary' : 'light'"
                :class="filterType === 'all' && 'selected'"
                @click="filterType = 'all'"
              >
                <span>همه</span>
                <span> ({{ oprList.length }}) </span>
              </CButton>

              <CButton
                :color="filterType === 'sent' ? 'primary' : 'light'"
                :class="filterType === 'sent' && 'selected'"
                @click="filterType = 'sent'"
              >
                <span>جدید</span>
                <span> ({{ getListCountByStatus('sent') }}) </span>
              </CButton>

              <CButton
                :color="filterType === 'ongoing' ? 'primary' : 'light'"
                :class="filterType === 'ongoing' && 'selected'"
                @click="filterType = 'ongoing'"
              >
                <span>در دست اقدام</span>
                <span> ({{ getListCountByStatus('ongoing') }}) </span>
              </CButton>

              <CButton
                :color="filterType === 'waiting' ? 'primary' : 'light'"
                :class="filterType === 'waiting' && 'selected'"
                @click="filterType = 'waiting'"
              >
                <span>در انتظار قطعه</span>
                <span> ({{ getListCountByStatus('waiting') }} )</span>
              </CButton>

              <CButton
                :color="filterType === 'delivered' ? 'primary' : 'light'"
                :class="filterType === 'delivered' && 'selected'"
                @click="filterType = 'delivered'"
              >
                <span>تحویل شده</span>
                <span> ({{ getListCountByStatus('delivered') }}) </span>
              </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
          :data="filteredItems"
          style="width: 100%"
          :row-class-name="({ row, rowIndex }) => row.status === 'sent' && 'unread'"
        >
          <el-table-column type="index" label="#"> </el-table-column>

          <el-table-column label="تاریخ ثبت درخواست" width="">
            <template slot-scope="scope">
              <span> {{ $jDate(scope.row.sendDate) }} </span>
            </template>
          </el-table-column>

          <el-table-column prop="trackingCode" label="کد پیگیری" width=""> </el-table-column>

          <el-table-column prop="agent_id.province_name" label="استان" width=""> </el-table-column>

          <el-table-column prop="agent_id.city_name" label="شهر" width=""> </el-table-column>

          <el-table-column prop="agent_id.agent_code" label="کد نماینده" width=""> </el-table-column>

          <el-table-column label="وضعیت" width="" align="center">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status === 'sent'" type="info">جدید</el-tag>
              <el-tag v-if="scope.row.status === 'ongoing'" type="primary">در دست اقدام</el-tag>
              <el-tag v-if="scope.row.status === 'waiting'" type="warning">در انتظار قطعه</el-tag>
              <el-tag v-if="scope.row.status === 'delivered'" type="success">تحویل شده</el-tag>
            </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-op-requests-oprId', params: { oprId: scope.row._id } }"
              >
                <i class="fal fa-eye"></i>
              </CButton>
            </template>
          </el-table-column>
        </el-table>
      </CCardBody>
    </CCard>
  </div>
</template>

<script>
export default {
  name: 'AdminOldPieceRequestsList',
  layout: 'admin',
  async asyncData({ $axios, error }) {
    try {
      const oprList = await $axios.get('/api/admin/oprList')
      return {
        oprList: oprList.data
      }
    } catch (err) {
      error({ status: 404, message: 'There is a problem here' })
    }
  },
  data() {
    return {
      title: 'درخواست های قطعه داغی',
      list_title: 'لیست',
      oprList: null,
      filterText: ''
    }
  },
  head() {
    return {
      title: this.title
    }
  },
  computed: {
    filteredItems() {
      const filterData = this.oprList.filter(item =>
        this.filterType === 'all' ? item : item.status === this.filterType
      )
      const filterText = this.filterText
      if (!this.filterText.length) return filterData
      else
        return filterData.filter(item => {
          return (
            item.trackingCode.includes(filterText) ||
            item.agent_id.agent_code.includes(filterText) ||
            item.agent_id.full_name.includes(filterText) ||
            item.agent_id.mobile_number.includes(filterText) ||
            item.agent_id.national_code.includes(filterText) ||
            item.agent_id.province_name.includes(filterText) ||
            item.agent_id.city_name.includes(filterText)
          )
        })
    },
    filterType: {
      get() {
        return this.$route.query.status
      },
      set(val) {
        this.$router.push({ name: 'admin-op-requests', query: { status: val } })
      }
    }
  },
  methods: {
    getListCountByStatus(status) {
      return this.oprList.filter(item => item.status === status).length
    }
  }
}
</script>

<style lang="scss" scopped>
.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;

  span {
    color: #fff;
  }
}

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