installed device page
This commit is contained in:
Mr Swift
@@ -0,0 +1,233 @@
|
||||
<template>
|
||||
<div>
|
||||
<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="danger" :class="filterType === 'rej' && 'selected'" @click="filterType = 'rej'"
|
||||
>رد شده</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.deviceId.model }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="IMEI" label=" IMEI" 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" type="danger"> رد شده</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
|
||||
v-if="scope.row.status == 0 || scope.row.status == 2"
|
||||
:key="scope.row._id"
|
||||
color="success"
|
||||
variant="outline"
|
||||
@click="post(scope.row._id, 'accept')"
|
||||
>
|
||||
<i class="fa fa-check-square"></i>
|
||||
</CButton>
|
||||
<CButton
|
||||
v-if="scope.row.status == 0 || scope.row.status == 1"
|
||||
:key="scope.row._id"
|
||||
color="danger"
|
||||
variant="outline"
|
||||
@click="post(scope.row._id, 'reject')"
|
||||
>
|
||||
<i class="fa fa-window-close"></i>
|
||||
</CButton>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'AdminGpsInstalledDevicesList',
|
||||
layout: 'admin',
|
||||
async asyncData({ $axios, error, query }) {
|
||||
try {
|
||||
const { data } = await $axios.get('/api/admin/gps/register-device')
|
||||
|
||||
return {
|
||||
devices: data.data
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
devices: [],
|
||||
|
||||
device: {},
|
||||
filterText: '',
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
config() {
|
||||
return this.$config
|
||||
},
|
||||
filteredItems() {
|
||||
const filterUsersByType = this.devices.filter(item => {
|
||||
if (this.filterType === 'all') return item
|
||||
// eslint-disable-next-line eqeqeq
|
||||
else if (this.filterType === 'rej') 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.devices.filter(item => {
|
||||
return item.IMEI.includes(filterText) || item.deviceId.model.includes(filterText)
|
||||
})
|
||||
}
|
||||
},
|
||||
filterType: {
|
||||
get() {
|
||||
return this.$route.query?.filter
|
||||
},
|
||||
set(val) {
|
||||
this.$router.push({ name: 'admin-gps-installed-device', query: { filter: val } })
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
hasUnread({ row, rowIndex }) {
|
||||
return row.status === 0 ? 'unreadMsgInCv' : null
|
||||
},
|
||||
post(id, status) {
|
||||
this.$axios
|
||||
.patch(`/api/admin/gps/register-device/${id}/${status}`, {})
|
||||
.then(res => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: res.data.msg
|
||||
})
|
||||
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.data.msg
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.unreadMsgInCv {
|
||||
background: rgba(orange, 0.1) !important;
|
||||
}
|
||||
</style>
|
||||
@@ -24,9 +24,9 @@
|
||||
</CCardBody>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="centerDialogVisible = false">{{
|
||||
$route.query?.type == 'req' ? 'Cancel' : 'Close'
|
||||
$route.query?.type == 'req' ? 'بستن' : 'بستن'
|
||||
}}</el-button>
|
||||
<el-button v-if="$route.query?.type == 'req'" type="primary" @click="confirmUser(user._id)">Confirm</el-button>
|
||||
<el-button v-if="$route.query?.type == 'req'" type="primary" @click="confirmUser(user._id)">تایید</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
|
||||
@@ -0,0 +1,234 @@
|
||||
<template>
|
||||
<div>
|
||||
<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="danger" :class="filterType === 'rej' && 'selected'" @click="filterType = 'rej'"
|
||||
>رد شده</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.deviceId.model }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="IMEI" label=" IMEI" 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" type="danger"> رد شده</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
|
||||
v-if="scope.row.status == 0 || scope.row.status == 2"
|
||||
:key="scope.row._id"
|
||||
color="success"
|
||||
variant="outline"
|
||||
@click="post(scope.row._id, 'accept')"
|
||||
>
|
||||
<i class="fa fa-check-square"></i>
|
||||
</CButton>
|
||||
<CButton
|
||||
v-if="scope.row.status == 0 || scope.row.status == 1"
|
||||
:key="scope.row._id"
|
||||
color="danger"
|
||||
variant="outline"
|
||||
@click="post(scope.row._id, 'reject')"
|
||||
>
|
||||
<i class="fa fa-window-close"></i>
|
||||
</CButton>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'AdminGpsInstalledDevicesList',
|
||||
layout: 'admin',
|
||||
async asyncData({ $axios, error, query }) {
|
||||
try {
|
||||
const { data } = await $axios.get('/api/admin/gps/register-device')
|
||||
|
||||
return {
|
||||
devices: data.data
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
devices: [],
|
||||
|
||||
device: {},
|
||||
filterText: '',
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
config() {
|
||||
return this.$config
|
||||
},
|
||||
filteredItems() {
|
||||
const filterUsersByType = this.devices.filter(item => {
|
||||
if (this.filterType === 'all') return item
|
||||
// eslint-disable-next-line eqeqeq
|
||||
else if (this.filterType === 'rej') 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.devices.filter(item => {
|
||||
return item.IMEI.includes(filterText) || item.deviceId.model.includes(filterText)
|
||||
})
|
||||
}
|
||||
},
|
||||
filterType: {
|
||||
get() {
|
||||
return this.$route.query?.filter
|
||||
},
|
||||
set(val) {
|
||||
this.$router.push({ name: 'admin-gps-installed-device', query: { filter: val } })
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
hasUnread({ row, rowIndex }) {
|
||||
return row.status === 0 ? 'unreadMsgInCv' : null
|
||||
},
|
||||
post(id, status) {
|
||||
this.$axios
|
||||
.patch(`/api/admin/gps/register-device/${id}/${status}`, {})
|
||||
.then(res => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: res.data.msg
|
||||
})
|
||||
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.data.msg
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.unreadMsgInCv {
|
||||
background: rgba(orange, 0.1) !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user