Swift
341 lines
12 KiB
Vue
341 lines
12 KiB
Vue
<template>
|
|
<user-dashboard-container page-class="guarantee-details agent-guarantee-details" panel-title="جزئیات">
|
|
<div class="agentActions">
|
|
<div class="row">
|
|
<div class="col-12 col-lg-6">
|
|
<div class="statuses">
|
|
<h3>تغییر وضعیت فرم:</h3>
|
|
<div class="btns">
|
|
<!--------------- recieved status btn --------------->
|
|
<button
|
|
class="btn btn-primary"
|
|
:disabled="transaction.status !== 'saved'"
|
|
@click="changeStatus('recieved')"
|
|
>
|
|
{{ getStatusName('recieved') }}
|
|
</button>
|
|
|
|
<!--------------- ongoing status btn --------------->
|
|
<button
|
|
class="btn btn-primary"
|
|
:disabled="transaction.status !== 'recieved'"
|
|
@click="changeStatus('ongoing')"
|
|
>
|
|
{{ getStatusName('ongoing') }}
|
|
</button>
|
|
|
|
<!--------------- waiting status btn --------------->
|
|
<button
|
|
class="btn btn-primary"
|
|
:disabled="
|
|
transaction.status === 'saved' ||
|
|
transaction.status === 'recieved' ||
|
|
transaction.status === 'delivered' ||
|
|
transaction.status === 'waiting'
|
|
"
|
|
@click="changeStatus('waiting')"
|
|
>
|
|
{{ getStatusName('waiting') }}
|
|
</button>
|
|
|
|
<!--------------- delivered status btn --------------->
|
|
<el-popover v-model="deliverPopover" placement="bottom" width="160" @click="deliveryPopover = true">
|
|
<el-input v-model="deliveryCode" placeholder="کد ارسال مرسوله"></el-input>
|
|
<div class="mt-1" style="text-align: center">
|
|
<el-button
|
|
size="mini"
|
|
type="text"
|
|
class="agentsStatus-popover-insideBtn"
|
|
@click="changeStatus('delivered')"
|
|
>ارسال</el-button
|
|
>
|
|
</div>
|
|
<button
|
|
slot="reference"
|
|
class="btn btn-primary"
|
|
:disabled="
|
|
transaction.status === 'saved' ||
|
|
transaction.status === 'recieved' ||
|
|
transaction.status === 'delivered'
|
|
"
|
|
>
|
|
{{ getStatusName('delivered') }}
|
|
</button>
|
|
</el-popover>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-lg-6 mt-4 mt-lg-0">
|
|
<div class="timeLine">
|
|
<h3>تاریخچه وضعیت های فرم:</h3>
|
|
<ul>
|
|
<li v-for="item in statusHistory" :key="item._id" :class="item.status">
|
|
<span> {{ getStatusName(item.status) }} </span>
|
|
<span> {{ $jDateTime(item.date) }} </span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<form action="" class="form form_3">
|
|
<div class="userInfo">
|
|
<div class="formRow">
|
|
<label>کد مشتری:</label>
|
|
<input type="text" disabled :value="transaction.BusinessID" />
|
|
</div>
|
|
<div class="formRow">
|
|
<label>نام و نام خانوادگی:</label>
|
|
<input type="text" disabled :value="transaction.TransCCustom1" />
|
|
</div>
|
|
<div class="formRow">
|
|
<label>شماره تماس:</label>
|
|
<input type="text" disabled :value="transaction.cTel1" />
|
|
</div>
|
|
|
|
<div class="formRow">
|
|
<label>شماره پذیرش موقت:</label>
|
|
<input type="text" disabled :value="transaction.TempReceiptTransNumber" />
|
|
</div>
|
|
<div class="formRow">
|
|
<label>شماره پذیرش دائم:</label>
|
|
<input type="text" disabled :value="transaction.ItemReceptionTransNumber || '-'" />
|
|
</div>
|
|
<div class="formRow">
|
|
<label>تاریخ ارسال فرم:</label>
|
|
<input type="text" disabled :value="$jDate(transaction.TempReceiptTransDate)" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="formRow">
|
|
<label>آدرس:</label>
|
|
<textarea name="" rows="3" disabled :value="transaction.cAddress1"></textarea>
|
|
</div>
|
|
<div class="formRow">
|
|
<label>توضیحات فرم:</label>
|
|
<textarea name="" rows="3" disabled :value="transaction.Description"></textarea>
|
|
</div>
|
|
</form>
|
|
|
|
<hr />
|
|
|
|
<div class="formDB">
|
|
<template v-if="transaction.db_name === 'verity'">
|
|
<i class="fas fa-phone-laptop"></i>
|
|
<span>لوازم جانبی کامپیوتر و موبایل</span>
|
|
</template>
|
|
<template v-if="transaction.db_name === 'panatech'">
|
|
<i class="fas fa-photo-video"></i>
|
|
<span>لوازم صوتی و تصویری خودرو</span>
|
|
</template>
|
|
</div>
|
|
|
|
<div class="tableBox">
|
|
<table class="formItems">
|
|
<thead>
|
|
<tr>
|
|
<th class="index">ردیف</th>
|
|
<th class="itemName">نام کالا</th>
|
|
<th class="quantity">تعداد</th>
|
|
<th class="itemSerial">سریال گارانتی</th>
|
|
<th class="date">تاریخ اتمام گارانتی</th>
|
|
<th v-if="selectorAvailable" class="selector">
|
|
<el-checkbox :value="allItemsAreinDraftsItems" @change="addAllItemsToAgentsDraftItems" />
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr v-for="(item, index) in transaction.items" :key="index + '_guaranteeItemsList'" :title="item.ItemName">
|
|
<td class="index">
|
|
<span>{{ index + 1 }}</span>
|
|
</td>
|
|
<td class="itemName">
|
|
<span class="singleLineTxt">{{ getItemName(item.ItemID) || 'درحال بارگیری ...' }}</span>
|
|
</td>
|
|
<td class="quantity">
|
|
<span>{{ item.MjQty }}</span>
|
|
</td>
|
|
<td class="itemSerial">
|
|
<span>{{ item.SerialNo1 || '-' }}</span>
|
|
</td>
|
|
<td class="date">
|
|
<span>{{ item.GEndDate || '-' }}</span>
|
|
</td>
|
|
<td v-if="selectorAvailable" class="selector">
|
|
<el-checkbox
|
|
:value="isInAgentDraftsItem(item.ItemID, item.SerialNo1)"
|
|
@change="addSelectedItemsToAgentDraftItems(item.ItemID, item.SerialNo1)"
|
|
/>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<table-notice />
|
|
|
|
<div class="addToDraftsBtn">
|
|
<button v-if="agentDraftItems.length" class="btn btn-primary" @click="showDraftsModal = true">
|
|
<span>افزودن موارد انتخاب شده به پیشنویس ها</span>
|
|
<i class="fas fa-link"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<template #body>
|
|
<AddUserItemsToAgentDraft
|
|
:key="addItemsToDraftModalKey"
|
|
:show="showDraftsModal"
|
|
:db_name="transaction.db_name"
|
|
:items="agentDraftItems"
|
|
@closeModal="closeAddItemToDraftModal"
|
|
/>
|
|
</template>
|
|
</user-dashboard-container>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'AccountAgentInboxItemView',
|
|
layout: 'user',
|
|
async asyncData({ $axios, $auth, query, error }) {
|
|
try {
|
|
const tid = query?.tid
|
|
// fetch data from asan-service
|
|
const transaction = await $axios.get(`/api/agent/inbox/${tid}`)
|
|
return {
|
|
transaction: transaction.data
|
|
}
|
|
} catch (e) {
|
|
error({ status: 404, message: 'Page not found' })
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
transaction: null,
|
|
factor: null,
|
|
paymentFactor: null,
|
|
deliverPopover: false,
|
|
deliveryCode: '',
|
|
showDraftsModal: false,
|
|
addItemsToDraftModalKey: 0,
|
|
agentDraftItems: []
|
|
}
|
|
},
|
|
computed: {
|
|
selectorAvailable() {
|
|
return this.transaction.status === 'ongoing' || this.transaction.status === 'waiting'
|
|
},
|
|
products() {
|
|
if (this.$route.query.db_name === 'verity') return this.$store.state.front.verityProducts
|
|
else if (this.$route.query.db_name === 'panatech') return this.$store.state.front.panatechProducts
|
|
else return []
|
|
},
|
|
host() {
|
|
return this.$route.query?.host
|
|
},
|
|
statusHistory() {
|
|
const statusHistory = this.transaction.statusHistory
|
|
return statusHistory.reverse()
|
|
},
|
|
allItemsAreinDraftsItems() {
|
|
return this.agentDraftItems.length === this.transaction.items.length
|
|
}
|
|
},
|
|
methods: {
|
|
closeAddItemToDraftModal() {
|
|
this.showDraftsModal = false
|
|
this.agentDraftItems = []
|
|
this.addItemsToDraftModalKey = Math.random()
|
|
},
|
|
addAllItemsToAgentsDraftItems(val) {
|
|
if (val) this.agentDraftItems = this.transaction.items
|
|
else this.agentDraftItems = []
|
|
},
|
|
addSelectedItemsToAgentDraftItems(id, serial) {
|
|
if (this.isInAgentDraftsItem(id, serial)) {
|
|
this.agentDraftItems = this.agentDraftItems.filter(item => {
|
|
if (serial) return item.SerialNo1 !== serial
|
|
else return item.ItemID !== id
|
|
})
|
|
} else {
|
|
const thisItem = this.transaction.items.find(item => {
|
|
if (serial) return item.SerialNo1 === serial
|
|
else return item.ItemID === id
|
|
})
|
|
this.agentDraftItems.push(thisItem)
|
|
}
|
|
},
|
|
isInAgentDraftsItem(id, serial) {
|
|
return Boolean(
|
|
this.agentDraftItems.find(item => {
|
|
if (serial) return item.SerialNo1 === serial
|
|
else return item.ItemID === id
|
|
})
|
|
)
|
|
},
|
|
getItemName(ItemID) {
|
|
return this.products.find(item => item.ItemID === ItemID)?.ItemName
|
|
},
|
|
getStatusName(status) {
|
|
if (status === 'saved') return 'ثبت شده'
|
|
else if (status === 'recieved') return 'پذیرش'
|
|
else if (status === 'ongoing') return 'در دست اقدام'
|
|
else if (status === 'waiting') return 'در انتظار قطعه'
|
|
else if (status === 'delivered') return 'تحویل شد'
|
|
else return 'invalid status'
|
|
},
|
|
changeStatus(status) {
|
|
const deliveryCode = this.deliveryCode
|
|
const alertTitle = 'هشدار'
|
|
function alertMsg() {
|
|
if (status === 'recieved')
|
|
return 'نماینده گرامی تنها در صورتی که تمام کالاها به دست شما رسیده فرم را پذیرش کنید. در غیر اینصورت هرگونه مسئولیتی در قبال مفقودی کالاها بر عهده شما میباشد.'
|
|
else if (status === 'ongoing') return 'وضعیت فرم را به در دست اقدام تغییر میدهید'
|
|
else if (status === 'waiting') return 'وضعیت فرم را به در انتظار قطعه تغییر میدهید'
|
|
else if (status === 'delivered' && deliveryCode.length)
|
|
return (
|
|
`تغییر وضعیت فرم به ارسال شده با کد ارسال مرسوله "${deliveryCode}".` +
|
|
' در آینده قادر به تغییر این وضعیت یا تغییر کد مرسوله نخواهید بود، ادمه میدهید؟ '
|
|
)
|
|
else if (status === 'delivered')
|
|
return (
|
|
'تغییر وضعیت فرم به ارسال شدوه بدون کد ارسال مرسوله.' +
|
|
' در آینده قادر به تغییر این وضعیت یا افزودن کد مرسوله نخواهید بود، ادامه میدهید؟ '
|
|
)
|
|
}
|
|
|
|
this.$confirm(alertMsg(), alertTitle, {
|
|
confirmButtonText: 'ادامه',
|
|
cancelButtonText: 'لغو',
|
|
type: 'warning'
|
|
})
|
|
.then(() => {
|
|
this.$axios
|
|
.put(`/api/agent/changeTStatus/${this.transaction._id}`, { status, deliveryCode })
|
|
.then(res => {
|
|
this.$message({
|
|
type: 'success',
|
|
message: 'وضعیت فرم با موفقیت تغییر کرد و پیامک اطلاع رسانی برای کاربر ارسال شد'
|
|
})
|
|
this.deliveryCode = ''
|
|
this.$nuxt.refresh()
|
|
})
|
|
.catch(err => {
|
|
this.$message({
|
|
type: 'error',
|
|
message: err.response.data.message
|
|
})
|
|
})
|
|
})
|
|
.catch(() => {
|
|
this.$message({
|
|
type: 'warning',
|
|
message: 'عملیات لغو شد'
|
|
})
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|