443 lines
14 KiB
Vue
443 lines
14 KiB
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="paginatedItems" :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="">
|
|
<template slot-scope="scope">
|
|
{{new Date(scope.row.created_at).toLocaleString('fa-IR') }}
|
|
</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>
|
|
<div style="direction:ltr; textAlign:center; marginTop:20px;">
|
|
<el-pagination
|
|
v-if="paginate"
|
|
background
|
|
layout="prev, pager, next"
|
|
:current-page="currentPage"
|
|
:page-count="totalPages"
|
|
@current-change="handlePageChange"
|
|
>
|
|
</el-pagination>
|
|
</div>
|
|
</CCardBody>
|
|
</CCard>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'AdminGpsWithdraw',
|
|
layout: 'admin',
|
|
async asyncData({ $axios, error, query }) {
|
|
try {
|
|
const page = parseInt(query.page) || 1
|
|
const rows = parseInt(query.rows) || 10
|
|
|
|
// Map filter query to status
|
|
let status = undefined
|
|
if (query.filter === 'dep') status = 2
|
|
else if (query.filter === 'accept') status = 1
|
|
else if (query.filter === 'pend') status = 0
|
|
|
|
const params = {
|
|
page,
|
|
rows
|
|
}
|
|
if (status !== undefined) {
|
|
params.status = status
|
|
}
|
|
if (query.search) {
|
|
params.search = query.search
|
|
}
|
|
|
|
const { data } = await $axios.get('/api/admin/gps/withdraw', {
|
|
params
|
|
})
|
|
|
|
return {
|
|
requestsData: data.data,
|
|
totalDocuments: data.totalDocuments || 0,
|
|
totalPages: data.totalPages || 1,
|
|
filterText: query.search || ''
|
|
}
|
|
} catch (error) {
|
|
console.log(error)
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
requestsData: [],
|
|
totalDocuments: 0,
|
|
totalPages: 1,
|
|
centerDialogVisible: false,
|
|
requestData: {},
|
|
filterText: '',
|
|
trackingNumber: null,
|
|
pageSize: 10
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
config() {
|
|
return this.$config
|
|
},
|
|
statusValue() {
|
|
// Map filterType to status integer
|
|
if (this.filterType === 'dep') return 2
|
|
if (this.filterType === 'accept') return 1
|
|
if (this.filterType === 'pend') return 0
|
|
return undefined // 'all' returns undefined to show all
|
|
},
|
|
filteredItems() {
|
|
// No client-side filtering needed - all filtering is done on backend
|
|
return this.requestsData
|
|
},
|
|
totalFilteredItems() {
|
|
return this.filteredItems.length
|
|
},
|
|
paginatedItems() {
|
|
return this.filteredItems
|
|
},
|
|
currentPage() {
|
|
return parseInt(this.$route.query?.page) || 1
|
|
},
|
|
paginate() {
|
|
return this.totalPages > 1
|
|
},
|
|
filterType: {
|
|
get() {
|
|
return this.$route.query?.filter || 'all'
|
|
},
|
|
set(val) {
|
|
this.$router.push({
|
|
name: 'admin-gps-withdraw',
|
|
query: {
|
|
filter: val,
|
|
page: 1 // Reset to first page when filter changes
|
|
}
|
|
})
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
// Initialize filterText from route query
|
|
if (this.$route.query.search) {
|
|
this.filterText = this.$route.query.search
|
|
}
|
|
},
|
|
beforeDestroy() {
|
|
// Clear search timeout on component destroy
|
|
if (this.searchTimeout) {
|
|
clearTimeout(this.searchTimeout)
|
|
}
|
|
},
|
|
watch: {
|
|
filterText(newVal, oldVal) {
|
|
// Only update route if value actually changed (avoid circular updates)
|
|
if (newVal === oldVal) return
|
|
|
|
// Clear existing timeout
|
|
if (this.searchTimeout) {
|
|
clearTimeout(this.searchTimeout)
|
|
}
|
|
|
|
// If search is cleared (empty), update immediately without debounce
|
|
const isCleared = !newVal || !newVal.trim()
|
|
const wasNotEmpty = oldVal && oldVal.trim()
|
|
|
|
if (isCleared && wasNotEmpty) {
|
|
// Immediately update when clearing
|
|
this.updateSearchQuery(newVal)
|
|
} else {
|
|
// Debounce search to avoid too many requests
|
|
this.searchTimeout = setTimeout(() => {
|
|
this.updateSearchQuery(newVal)
|
|
}, 500) // 500ms debounce
|
|
}
|
|
},
|
|
filterType() {
|
|
this.fetchData(1)
|
|
},
|
|
'$route.query.page'() {
|
|
this.fetchData()
|
|
},
|
|
'$route.query.search'(newVal, oldVal) {
|
|
// Sync filterText with route query (only if different to avoid loop)
|
|
const searchValue = newVal || ''
|
|
if (searchValue !== this.filterText) {
|
|
this.filterText = searchValue
|
|
}
|
|
// Always fetch data when search query changes
|
|
if (newVal !== oldVal) {
|
|
this.fetchData(1)
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
updateSearchQuery(searchValue) {
|
|
// Prevent circular update - check if route query already matches
|
|
const currentSearch = this.$route.query.search || ''
|
|
const newSearch = searchValue && searchValue.trim() ? searchValue.trim() : undefined
|
|
|
|
if (currentSearch === (newSearch || '')) return
|
|
|
|
// Update route query - this will trigger $route.query.search watcher
|
|
this.$router.push({
|
|
name: 'admin-gps-withdraw',
|
|
query: {
|
|
...this.$route.query,
|
|
search: newSearch,
|
|
page: 1 // Reset to first page when search changes
|
|
}
|
|
})
|
|
},
|
|
async fetchData(page = null) {
|
|
const currentPage = page || this.currentPage
|
|
try {
|
|
const params = {
|
|
page: currentPage,
|
|
rows: this.pageSize
|
|
}
|
|
|
|
// Add status parameter if filterType is set
|
|
if (this.statusValue !== undefined) {
|
|
params.status = this.statusValue
|
|
}
|
|
|
|
// Add search parameter from route query (source of truth)
|
|
const searchQuery = this.$route.query.search
|
|
if (searchQuery && searchQuery.trim()) {
|
|
params.search = searchQuery.trim()
|
|
}
|
|
|
|
const { data } = await this.$axios.get('/api/admin/gps/withdraw', {
|
|
params
|
|
})
|
|
this.requestsData = data.data
|
|
this.totalDocuments = data.totalDocuments || 0
|
|
this.totalPages = data.totalPages || 1
|
|
} catch (error) {
|
|
console.log(error)
|
|
this.$message({
|
|
type: 'error',
|
|
message: 'خطا در دریافت اطلاعات'
|
|
})
|
|
}
|
|
},
|
|
handlePageChange(page) {
|
|
this.$router.push({
|
|
name: 'admin-gps-withdraw',
|
|
query: {
|
|
...this.$route.query,
|
|
page
|
|
}
|
|
})
|
|
},
|
|
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>
|