Skip to content

Q
quasar-web-base
Commit e663444e authored by Nguyễn Đức Thắng's avatar Nguyễn Đức Thắng
Browse files
Options

update

parent e8799d8b
Show whitespace changes
Inline Side-by-side
Showing with 782 additions and 169 deletions
src/assets/configurations.example.ts
View file @ e663444e
...@@ -170,4 +170,11 @@ export enum API_PATHS { ...@@ -170,4 +170,11 @@ export enum API_PATHS {
// xóa công việc // xóa công việc
workDelete = 'work/delete', workDelete = 'work/delete',
// danh sách ngân hàng
listBank = 'common/bank',
// cập nhật đặt cọc
depositUpdate = 'deposit/update'
} }
src/assets/type.ts
View file @ e663444e
...@@ -314,7 +314,7 @@ export type Contract = { ...@@ -314,7 +314,7 @@ export type Contract = {
artistFullName: string; artistFullName: string;
field: string; field: string;
fieldId: number; fieldId: number;
id: number id: number;
}; };
export type ArtistOwnerAdd = { export type ArtistOwnerAdd = {
...@@ -531,7 +531,7 @@ export type ListBooking = { ...@@ -531,7 +531,7 @@ export type ListBooking = {
favoriteScore: number; favoriteScore: number;
performStatus: number; performStatus: number;
fee: string; fee: string;
bookingRandomCode:string bookingRandomCode: string;
}; };
export type ListArrayArtist = { export type ListArrayArtist = {
...@@ -849,3 +849,35 @@ export type AddConfigHotProduct = { ...@@ -849,3 +849,35 @@ export type AddConfigHotProduct = {
imageUrl: string; imageUrl: string;
salientStatus: number; salientStatus: number;
}; };
export type formality = {
code: null;
id: number;
logo: null;
name: string;
numIndex: number;
status: number;
};
export type dataIteam = {
amountMoney: number;
depositDate: string;
id: number;
content: string;
image: string;
moneyDepositDto: string;
accountNumber: number;
bankId: number;
status: number;
accountName: string;
bankDto: listBank;
artistBooking: ListBooking;
formality: formality[];
};
export type listBank = {
code: string;
id: number;
name: string;
status: number;
};
src/components/artist-information/AddHotProduct/AddHotProductDialog.ts
View file @ e663444e
...@@ -37,7 +37,7 @@ export default defineComponent({ ...@@ -37,7 +37,7 @@ export default defineComponent({
{ id: 2, name: 'Sản phẩm nổi bật' }, { id: 2, name: 'Sản phẩm nổi bật' },
]); ]);
const uploadAvatar = (value: FileList) => { const uploadAvatar = (value: FileList) => {
console.log(value, 'value');
dialogCrop.value = true; dialogCrop.value = true;
imageCrop.value = URL.createObjectURL(value[0]); imageCrop.value = URL.createObjectURL(value[0]);
......
src/components/detailBooking/index.vue
View file @ e663444e
...@@ -3,8 +3,9 @@ ...@@ -3,8 +3,9 @@
persistent persistent
:model-value="showDialog" :model-value="showDialog"
@update:model-value="$emit('update:showDialog', $event)" @update:model-value="$emit('update:showDialog', $event)"
> >
<q-card style="min-width: 56rem" bordered> <q-card style="min-width: 60rem" bordered>
<q-form greedy> <q-form greedy>
<q-card-section> <q-card-section>
<q-item> <q-item>
...@@ -76,54 +77,59 @@ ...@@ -76,54 +77,59 @@
size="sm" size="sm"
color="secondary" color="secondary"
v-if="detailInfoBooking.status === 0" v-if="detailInfoBooking.status === 0"
>Chờ nhận</q-chip >Chưa hoàn thành</q-chip
> >
<q-chip <q-chip
size="sm" size="sm"
color="info" color="info"
v-else-if="detailInfoBooking.status === 1" v-else-if="detailInfoBooking.status === 1"
>Đã nhận</q-chip >Đã hoàn thành</q-chip
> >
<q-chip size="sm" color="warning" v-else>Từ chối</q-chip>
</div>
<div class="col-4 fs-14 color">
{{ $t('listBooking.titleColumnsTable.performStatus') }}:
</div>
<div class="col-8 fs-14">
<q-chip <q-chip
size="sm" size="sm"
color="secondary" color="warning"
v-if="detailInfoBooking.performStatus === 0" v-else-if="detailInfoBooking.status === 2"
>Chờ nhận</q-chip >Đã hủy</q-chip
> >
<q-chip <q-chip
size="sm" size="sm"
color="info" color="warning"
v-else-if="detailInfoBooking.performStatus === 1" v-else-if="detailInfoBooking.status === 3"
>Đã thực hiện</q-chip >Hết hạn</q-chip
> >
<q-chip <q-chip
size="sm" size="sm"
color="warning" color="warning"
v-else-if="detailInfoBooking.performStatus === 2" v-else-if="detailInfoBooking.status === 4"
>Chưa thực hiện</q-chip >Chờ hủy</q-chip
> >
</div>
<div class="col-4 fs-14 color">
{{ $t('listBooking.titleColumnsTable.performStatus') }}:
</div>
<div class="col-8 fs-14">
<q-chip <q-chip
size="sm" size="sm"
color="warning" color="secondary"
v-else-if="detailInfoBooking.performStatus === 3" v-if="detailInfoBooking.performStatus === 0"
>Hoãn lịch</q-chip >Chưa xác nhận</q-chip
> >
<q-chip <q-chip
size="sm" size="sm"
color="warning" color="info"
v-else-if="detailInfoBooking.performStatus === 4" v-else-if="detailInfoBooking.performStatus === 1"
>Hủy lịch</q-chip >Đã xác nhận</q-chip
>
<q-chip size="sm" color="secondary" v-else
>Thay đổi lịch</q-chip
> >
<q-chip size="sm" color="warning" v-else>Từ chối</q-chip>
</div> </div>
<div class="col-4 fs-14 color"> <div class="col-4 fs-14 color">
...@@ -133,11 +139,11 @@ ...@@ -133,11 +139,11 @@
</div> </div>
</div> </div>
<!-- <v-row> <v-row>
<v-col> <v-col>
<tableDeposit :id="detailInfoBooking.id"></tableDeposit> <tableDeposit :id="detailInfoBooking.id"></tableDeposit>
</v-col> </v-col>
</v-row> --> </v-row>
</q-card-section> </q-card-section>
<q-separator /> <q-separator />
<q-card-actions align="right"> <q-card-actions align="right">
...@@ -157,10 +163,10 @@ ...@@ -157,10 +163,10 @@
<script lang="ts"> <script lang="ts">
import { defineComponent, PropType, watch } from 'vue'; import { defineComponent, PropType, watch } from 'vue';
import { ListBooking } from 'src/assets/type'; import { ListBooking } from 'src/assets/type';
// import tableDeposit from '../../components/detailBooking/tableDeposit/index.vue'; import tableDeposit from '../../components/detailBooking/tableDeposit/index.vue';
export default defineComponent({ export default defineComponent({
components: { components: {
// tableDeposit, tableDeposit,
}, },
props: { props: {
showDialog: { showDialog: {
......
src/components/detailBooking/tableDeposit/add.vue
View file @ e663444e
<template> <template>
<q-dialog persistent :model-value="showDialog"> <q-dialog
persistent
:model-value="showDialog"
@submit.prevent="$emit('click:CloseBtn')"
>
<q-card style="min-width: 900px" bordered> <q-card style="min-width: 900px" bordered>
<q-form greedy> <q-form greedy>
<q-card-section> <q-card-section>
...@@ -82,39 +86,76 @@ ...@@ -82,39 +86,76 @@
</div> </div>
</div> </div>
</div> </div>
<div class="row flex-center" style="padding-top: 10px"> <div class="row" style="padding-top: 10px">
<div class="col-3 text-weight-medium"> <div class="col-6">
<div>Hình thức đặt cọc</div> <q-input
emit-value
label="Tên chủ thẻ"
type="text"
class="q-ma-sm"
outlined
hide-bottom-space
clearable
dense
></q-input>
</div> </div>
<div class="col-6"> <div class="col-6">
<q-select <q-select
emit-value emit-value
map-options map-options
label="Tên ngân hàng"
:options="depositOptions" :options="depositOptions"
option-value="id" option-value="id"
option-label="name" option-label="name"
type="text" type="text"
class="q-my-sm" class="q-ma-sm"
outlined outlined
hide-bottom-space hide-bottom-space
clearable clearable
dense dense
></q-select> ></q-select>
</div> </div>
<div class="col-6">
<q-input
emit-value
label="Số tiền đặt cọc"
type="text"
class="q-ma-sm"
outlined
hide-bottom-space
clearable
dense
></q-input>
</div> </div>
<div class="row flex-center"> <div class="col-6">
<div class="col-3 text-weight-medium"> <q-select
<div>Thời gian đặt cọc:</div> emit-value
map-options
label="Hình thức đặt cọc"
:options="depositOptions"
option-value="id"
option-label="name"
type="text"
class="q-ma-sm"
outlined
hide-bottom-space
clearable
dense
></q-select>
</div> </div>
<div class="col-6"> <div class="col-6">
<q-input <q-input
:model-value="birthday" :model-value="birthday"
@update:model-value="$emit('update:birthday', $event)" @update:model-value="$emit('update:birthday', $event)"
class="q-my-sm" class="q-ma-sm"
outlined outlined
@click="openDialog = true" @click="openDialog = true"
dense dense
label="Thời gian đặt cọc:"
hide-bottom-space hide-bottom-space
> >
<template v-slot:default> <template v-slot:default>
...@@ -139,17 +180,13 @@ ...@@ -139,17 +180,13 @@
</template> </template>
</q-input> </q-input>
</div> </div>
</div>
<div class="row flex-center">
<div class="col-3 text-weight-medium">
<div>Số tiền đặt cọc:</div>
</div>
<div class="col-6"> <div class="col-6">
<q-input <q-input
type="text" type="text"
class="q-my-sm" class="q-ma-sm"
outlined outlined
label="Số tiền đặt cọc:"
hide-bottom-space hide-bottom-space
clearable clearable
dense dense
......
src/components/detailBooking/tableDeposit/index.vue
View file @ e663444e
<template> <template>
<div class="row q-col-gutter-sm flex-center q-mt-sm"> <div class="row q-col-gutter-sm flex-center q-mt-sm">
<div class="col-auto q-mt-sm" style="font-size: 18px">
Danh sách đặt cọc
</div>
<q-space></q-space> <q-space></q-space>
<div class="col-auto"> <!-- <div class="col-auto">
<q-btn <q-btn
class="q-mr-sm" class="q-mr-sm"
color="primary" color="primary"
...@@ -12,7 +15,7 @@ ...@@ -12,7 +15,7 @@
@click="showDialog = true" @click="showDialog = true"
> >
</q-btn> </q-btn>
</div> </div> -->
<div class="col-12 q-mt-sm"> <div class="col-12 q-mt-sm">
<q-table <q-table
...@@ -23,69 +26,115 @@ ...@@ -23,69 +26,115 @@
separator="cell" separator="cell"
:rows-per-page-label="$t('recordPerPage')" :rows-per-page-label="$t('recordPerPage')"
wrap-cells wrap-cells
flat
bordered
hide-pagination hide-pagination
:pagination="{
rowsPerPage: 0,
}"
virtual-scroll
class="sticky-header-table" class="sticky-header-table"
> >
<!-- <template v-slot:body-cell-action="rowData"> <template v-slot:body-cell-action="rowData">
<q-td style="padding: 0; text-align: center"> <q-td style="text-align: center; padding: 0">
<div style="display: flex">
<q-btn <q-btn
v-if="rowData.row.status === 0"
@click="handleUpdate(rowData.row)"
flat flat
round round
color="primary" color="primary"
icon="mdi-information-outline" icon="mdi-pencil-outline"
@click="detail(rowData.row.id)"
> >
<q-tooltip :offset="[10, 10]">{{ <q-tooltip :offset="[20, 10]">Cập nhật</q-tooltip>
$t('listBooking.toolTipMessage')
}}</q-tooltip>
</q-btn> </q-btn>
<q-btn
flat
round
color="primary"
icon="mdi-check-circle-outline"
@click="confirmBrowser(rowData.row.id)"
>
<q-tooltip :offset="[20, 10]">Duyệt</q-tooltip>
</q-btn>
<!-- <q-btn
flat
round
size="0.9em"
color="primary"
icon="mdi-block-helper"
@click="confirmRefuse(rowData.row.id)"
>
<q-tooltip :offset="[20, 10]">Từ chối</q-tooltip>
</q-btn> -->
</div>
</q-td> </q-td>
</template> --> </template>
<!-- <template v-slot:body-cell-stt="item"> <template v-slot:body-cell-stt="item">
<q-td :item="item" style="text-align: center"> <q-td :item="item" style="text-align: center">
{{ 1 + item.rowIndex + pageSize * (pageIndex - 1) }} {{ 1 + item.rowIndex + 20 * (1 - 1) }}
</q-td> </q-td>
</template> --> </template>
<!-- <template v-slot:body-cell-status="item"> <template v-slot:body-cell-type="item">
<q-td align="center"> <q-td :item="item" align="center">
<template v-for="(data, idx) in ListStatusBooking"> <div v-if="item.row.formality">{{ item.row.formality.name }}</div>
<q-chip </q-td>
v-if="item.row.status === data.id" </template>
:key="`status-${idx}-${item}`"
size="sm" <template v-slot:body-cell-image="item">
label <q-td :item="item" align="center">
:color="data.color" <q-img
>{{ data.name }}</q-chip :src="formatUrl(item.row.image)"
> spinner-color="white"
style="height: 140px; max-width: 150px"
/>
</q-td>
</template>
<template v-slot:body-cell-time="item">
<q-td :item="item" align="center">
<div>{{ item.row.depositDate }}</div>
</q-td>
</template>
<template v-slot:body-cell-money="item">
<q-td :item="item" align="center">
<div>{{ item.row.amountMoney }}</div>
</q-td>
</template>
<template v-slot:body-cell-userName="item">
<q-td :item="item" align="center">
<div>{{ item.row.accountName }}</div>
</q-td>
</template>
<template v-slot:body-cell-banking="item">
<q-td :item="item" align="center">
<div>{{ item.row.bankName }}</div>
</q-td>
</template> </template>
<template v-slot:body-cell-numberBanking="item">
<q-td :item="item" align="center">
<div>{{ item.row.accountNumber }}</div>
</q-td> </q-td>
</template> --> </template>
<!-- userName banking numberBanking money status -->
<!-- <template v-slot:body-cell-performStatus="item"> <template v-slot:body-cell-status="item">
<q-td align="center"> <q-td align="center">
<template v-for="(data, idx) in ListPerformStatus"> <template v-for="(data, idx) in ListStatusBooking">
<q-chip <q-chip
v-if="item.row.performStatus === data.id" v-if="item.row.status === data.value"
:key="`performStatus-${idx}-${item}`" :key="`status-${idx}-${item}`"
size="sm" size="sm"
label label
:color="data.color" :color="data.color"
>{{ data.name }}</q-chip >{{ data.text }}</q-chip
> >
</template> </template>
</q-td> </q-td>
</template> -->
<template v-slot:body-cell-content="item">
<td>
<div class="ellipsis-3-lines">
{{ !item.row.content ? '' : item.row.content }}
<q-tooltip :offset="[10, 10]" max-width="35%">{{
!item.row.content ? '' : item.row.content
}}</q-tooltip>
</div>
</td>
</template> </template>
</q-table> </q-table>
<div> <div>
...@@ -95,8 +144,20 @@ ...@@ -95,8 +144,20 @@
@SetAvatar="setAvatar($event)" @SetAvatar="setAvatar($event)"
@deleteAvatar="deleteAvatar" @deleteAvatar="deleteAvatar"
v-model:show-dialog="showDialog" v-model:show-dialog="showDialog"
@click:CloseBtn="showDialog = false"
></addNewDialog> ></addNewDialog>
</div> </div>
<div>
<update
v-model:show-dialog="dialogUpdate"
:dataItem="dataItem"
@SetAvatar="setAvatar($event)"
@deleteAvatar="deleteAvatar"
@click:CloseBtn="dialogUpdate = false"
@success="getList"
></update>
</div>
</div> </div>
<!-- <detailBooking <!-- <detailBooking
...@@ -112,10 +173,12 @@ import { api, BaseResponseBody } from 'src/boot/axios'; ...@@ -112,10 +173,12 @@ import { api, BaseResponseBody } from 'src/boot/axios';
import { config, API_PATHS } from 'src/assets/configurations.example'; import { config, API_PATHS } from 'src/assets/configurations.example';
import { AxiosResponse } from 'axios'; import { AxiosResponse } from 'axios';
import addNewDialog from '../../detailBooking/tableDeposit/add.vue'; import addNewDialog from '../../detailBooking/tableDeposit/add.vue';
import update from '../../detailBooking/tableDeposit/update.vue';
import { ListDeposit, FileUploadType } from 'src/assets/type'; import { ListDeposit, FileUploadType } from 'src/assets/type';
export default defineComponent({ export default defineComponent({
components: { components: {
addNewDialog, addNewDialog,
update,
}, },
props: { props: {
id: { id: {
...@@ -129,120 +192,100 @@ export default defineComponent({ ...@@ -129,120 +192,100 @@ export default defineComponent({
name: 'stt', name: 'stt',
field: 'stt', field: 'stt',
required: true, required: true,
headerStyle: 'text-align: center !important; width:20%',
headerStyle: 'text-align: center !important; width: 4%',
align: 'center', align: 'center',
label: 'STT',
sortable: false, sortable: false,
}, },
{
name: 'bookingCode',
field: 'bookingCode',
required: true,
headerStyle: 'text-align: center !important; width: 4%',
align: 'center',
sortable: false,
},
{
name: 'artistName',
field: 'artistName',
required: true,
align: 'left',
headerStyle: 'text-align: center !important; width: 9%',
sortable: false,
},
{ {
name: 'userName', name: 'userName',
field: 'userName', field: 'userName',
required: true, required: true,
label: 'Tên chủ thẻ',
headerStyle: 'text-align: center !important; width: 9%', headerStyle: 'text-align: center !important; width:20%',
align: 'left', align: 'left',
sortable: false, sortable: false,
}, },
{ {
name: 'address', name: 'banking',
field: 'address', field: 'banking',
required: true, required: true,
label: 'Tên ngân hàng',
headerStyle: 'text-align: center !important; width: 13%', headerStyle: 'text-align: center !important; width:20%',
align: 'left', align: 'left',
sortable: false, sortable: false,
}, },
// {
// name: 'content',
// field: 'content',
// required: true,
// label: i18n.global.t('listBooking.titleColumnsTable.content'),
// headerStyle: 'text-align: center !important; width: 13%',
// align: 'left',
// sortable: false,
// },
{ {
name: 'fromTime', name: 'numberBanking',
field: 'fromTime', field: 'numberBanking',
required: true, required: true,
label: 'Số tài khoản',
headerStyle: 'text-align: center !important; width: 9%', headerStyle: 'text-align: center !important; width:20%',
align: 'left', align: 'left',
sortable: false, sortable: false,
}, },
{ {
name: 'toTime', name: 'time',
field: 'toTime', field: 'time',
required: true, required: true,
label: 'Thời gian ',
headerStyle: 'text-align: center !important; width: 9%', headerStyle: 'text-align: center !important; width:20%',
align: 'left', align: 'left',
sortable: false, sortable: false,
}, },
{ {
name: 'fee', name: 'money',
field: 'fee', field: 'money',
required: true, required: true,
label: 'Số tiền',
headerStyle: 'text-align: center !important; width: 9%', headerStyle: 'text-align: center !important; width:20%',
align: 'left', align: 'left',
sortable: false, sortable: false,
}, },
// {
// name: 'favoriteScore',
// field: 'favoriteScore',
// required: true,
// label: i18n.global.t('listBooking.titleColumnsTable.favoriteScore'),
// headerStyle: 'text-align: center !important; width: 7%',
// align: 'center',
// sortable: false,
// },
{ {
name: 'status', name: 'status',
field: 'status', field: 'status',
required: true, required: true,
label: 'Trạng thái',
headerStyle: 'text-align: center !important; width: 8%', headerStyle: 'text-align: center !important; width:20%',
align: 'center', align: 'center',
sortable: false, sortable: false,
}, },
{
name: 'performStatus',
field: 'performStatus',
required: true,
headerStyle: 'text-align: center !important; width: 8%',
align: 'center',
sortable: false,
},
{ {
name: 'action', name: 'action',
field: 'action', field: 'action',
required: true, required: true,
label: 'Chức năng',
headerStyle: 'text-align: center !important; width: 7%', headerStyle: 'text-align: center !important; width:20%',
align: 'center', align: 'center',
sortable: false, sortable: false,
}, },
]; ];
const ListStatusBooking = ref([
{
text: 'Chờ duyệt',
value: 0,
color: 'warning',
},
{
text: 'Đã duyệt',
value: 1,
color: 'info',
},
{
text: 'Từ chối',
value: 2,
color: 'error',
},
]);
const dataItem = ref({});
const dialogUpdate = ref(false);
const birthday: Ref<string | null> = ref(null); const birthday: Ref<string | null> = ref(null);
const listDeposit: Ref<unknown[]> = ref([]); const listDeposit: Ref<unknown[]> = ref([]);
const showDialog = ref(false); const showDialog = ref(false);
...@@ -260,6 +303,21 @@ export default defineComponent({ ...@@ -260,6 +303,21 @@ export default defineComponent({
const deleteAvatar = () => { const deleteAvatar = () => {
image.value = null; image.value = null;
}; };
const formatUrl = (val: string) => {
return config.API_IMAGE_ENDPOINT + val;
};
const handleUpdate = (item: ListDeposit[]) => {
dataItem.value = item;
dialogUpdate.value = true;
};
const confirmBrowser = (id: number) => {
console.log(id);
};
const confirmRefuse = (id: number) => {
console.log(id);
};
const callApiUploadAvatar = async (file: File) => { const callApiUploadAvatar = async (file: File) => {
try { try {
...@@ -267,8 +325,7 @@ export default defineComponent({ ...@@ -267,8 +325,7 @@ export default defineComponent({
bodyFormData.append('file', file); bodyFormData.append('file', file);
const response = (await api({ const response = (await api({
headers: { 'Content-Type': 'multipart/form-data' }, headers: { 'Content-Type': 'multipart/form-data' },
url: config.API_IMAGE_ENDPOINT, // pro url: config.API_IMAGE_ENDPOINT,
// url: 'http://103.147.34.20:10705/file/upload/', // test
method: 'POST', method: 'POST',
data: bodyFormData, data: bodyFormData,
...@@ -311,9 +368,17 @@ export default defineComponent({ ...@@ -311,9 +368,17 @@ export default defineComponent({
setAvatar, setAvatar,
callApiUploadAvatar, callApiUploadAvatar,
deleteAvatar, deleteAvatar,
formatUrl,
ListStatusBooking,
image, image,
birthday, birthday,
dataItem,
dialogUpdate,
UpdateBirtday, UpdateBirtday,
handleUpdate,
confirmBrowser,
confirmRefuse,
}; };
}, },
}); });
......
src/components/detailBooking/tableDeposit/update.vue 0 → 100644
View file @ e663444e
<template>
<q-dialog
persistent
:model-value="showDialog"
@submit.prevent="$emit('click:CloseBtn')"
>
<q-card style="min-width: 900px" bordered>
<q-form greedy>
<q-card-section>
<q-item>
<q-item-section>
<q-item-label class="text-h6 text-weight-regular"
>Cập nhật đặt cọc</q-item-label
>
</q-item-section>
</q-item>
</q-card-section>
<q-separator />
<q-card-section>
<div class="row q-mt-sm flex-center">
<div class="col-8 flex flex-center">
<div>
<q-card class="q-mb-sm" v-if="image !== null">
<q-img
@click="uploadAvatar"
:src="image"
style="
height: 195px;
width: 300px;
cursor: pointer;
object-fit: contain !important;
"
></q-img>
<q-icon
name="mdi-close-circle"
color="red"
style="
position: absolute;
right: 0;
font-size: 18px;
cursor: pointer;
"
@click="deleteAvatar"
></q-icon>
</q-card>
<div
@click="uploadAvatar"
v-else
class="q-mb-sm"
style="
height: 195px;
object-fit: contain !important;
width: 300px;
border: 2px dashed #5d319e;
border-radius: 4px;
cursor: pointer;
"
>
<div
style="
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
"
>
<q-icon
style="color: #5d319e"
name="mdi-cloud-upload"
size="xl"
></q-icon>
Tải ảnh lên
</div>
</div>
<div>
<input
ref="upload"
hidden
type="file"
accept="image/png, image/jpeg"
@change="selectedFile($event.target.files)"
/>
</div>
</div>
</div>
</div>
<div class="row" style="padding-top: 10px">
<div class="col-6">
<q-input
v-model="cardHolder"
label="Tên chủ thẻ"
type="text"
class="q-ma-sm"
outlined
hide-bottom-space
clearable
dense
></q-input>
</div>
<div class="col-6">
<q-select
v-model="bank"
label="Tên ngân hàng"
:options="listBank"
option-value="id"
option-label="code"
type="text"
class="q-ma-sm"
outlined
hide-bottom-space
clearable
dense
use-input
input-debounce="0"
map-options
@filter="filterFn"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
Không có dữ liệu
</q-item-section>
</q-item>
</template>
</q-select>
</div>
<div class="col-6">
<q-input
emit-value
v-model="accountNumber"
label="Số tài khoản"
type="text"
class="q-ma-sm"
outlined
hide-bottom-space
clearable
dense
></q-input>
</div>
<div class="col-6">
<q-input
v-model="amountMoney"
type="text"
class="q-ma-sm"
outlined
label="Số tiền đặt cọc"
hide-bottom-space
clearable
dense
></q-input>
</div>
<div class="col-6">
<q-input
:model-value="birthday"
@update:model-value="$emit('update:birthday', $event)"
class="q-ma-sm"
outlined
@click="openDialog = true"
dense
label="Thời gian đặt cọc"
hide-bottom-space
>
<template v-slot:default>
<q-dialog ref="dialogRef" v-model="openDialog">
<q-card class="q-dialog-plugin">
<q-date
style="width: 100%"
v-model="BirthdayDatePicker"
first-day-of-week="1"
></q-date>
<q-card-actions align="right">
<q-btn
color="primary"
label="Cancel"
@click="onCancelClick"
/>
<q-btn color="primary" label="OK" @click="onOKClick" />
</q-card-actions>
</q-card>
</q-dialog>
</template>
</q-input>
</div>
<div class="col-12">
<q-input
v-model="content"
outlined
dense
class="q-ma-sm"
label="Nội dung chuyển khoản"
type="textarea"
/>
</div>
</div>
</q-card-section>
<q-card-actions align="right">
<q-btn
color="grey"
no-caps
style="width: 90px"
:label="$t('customer.crudActions.cancel')"
@click="$emit('click:CloseBtn')"
/>
<q-btn
@click="handleUpdate"
color="primary"
no-caps
style="width: 90px"
:label="$t('customer.crudActions.save')"
/>
</q-card-actions>
</q-form>
</q-card>
</q-dialog>
</template>
<script lang="ts">
import { Dialog, Notify } from 'quasar';
import { defineComponent, Ref, ref, watch, PropType } from 'vue';
import { API_PATHS } from 'src/assets/configurations.example';
import { config } from 'src/assets/configurations.example';
import { api, BaseResponseBody } from 'src/boot/axios';
import { AxiosResponse } from 'axios';
import {
listTypeFormalityDeposit,
dataIteam,
listBank,
FileUploadType,
} from 'src/assets/type';
import moment from 'moment';
export default defineComponent({
props: {
showDialog: {
type: Boolean,
required: true,
},
dataItem: {
type: Object as PropType<dataIteam>,
},
},
setup(props, context) {
const image: Ref<string | null> = ref(null);
const cardHolder: Ref<string | undefined> = ref('');
watch(
() => props.showDialog,
(value) => {
if (value) {
void getRest();
void getListformalityDeposit();
void getListBank();
void getDetail();
}
}
);
const avatarFile: Ref<File | null> = ref(null);
const birthday: Ref<string | undefined> = ref('');
const BirthdayDatePicker = ref(moment().format('YYYY/MM/DD'));
const openDialog: Ref<boolean> = ref(false);
const content: Ref<string | undefined> = ref('');
const amountMoney: Ref<number | undefined> = ref(0);
const accountNumber: Ref<number | undefined> = ref();
const listBank: Ref<listBank[]> = ref([]);
const bank: Ref<listBank | undefined> = ref();
const depositOptions: Ref<listTypeFormalityDeposit[]> = ref([]);
const options = ref(depositOptions);
const avatarUploaded: Ref<string> = ref('');
const getDetail = () => {
image.value = `${String(config.API_IMAGE_ENDPOINT)}${String(
props.dataItem?.image
)}`;
cardHolder.value = props.dataItem?.accountName;
bank.value = props.dataItem?.bankDto;
birthday.value = props.dataItem?.depositDate;
amountMoney.value = props.dataItem?.amountMoney;
content.value = props.dataItem?.content;
accountNumber.value = props.dataItem?.accountNumber;
};
const onOKClick = () => {
selectDatePicker(BirthdayDatePicker.value);
openDialog.value = false;
};
const onCancelClick = () => {
openDialog.value = false;
};
const selectDatePicker = (value: string) => {
context.emit('UpdateBirtday', formatDatePicker(value));
};
const formatDatePicker = (value: string) => {
return (birthday.value = moment(value).format('DD/MM/YYYY'));
};
const getListformalityDeposit = async () => {
const response = (await api({
url: API_PATHS.formalityDeposit,
method: 'GET',
params: {},
})) as AxiosResponse<BaseResponseBody<listTypeFormalityDeposit[]>>;
if (response.data.error.code === config.API_RES_CODE.OK.code) {
depositOptions.value = response.data.data;
}
};
const filterFn = (val: string, update: (fn: () => void) => void) => {
if (!val) {
update(() => {
options.value = depositOptions.value;
});
return;
} else {
update(() => {
const needle = val.toLowerCase();
options.value = depositOptions.value.filter((option) => {
return option.name.toLowerCase().includes(needle);
});
});
}
};
const handleUpdate = async () => {
if (avatarFile.value) {
avatarUploaded.value = await callApiUploadAvatar(avatarFile.value);
void update(avatarUploaded.value);
} else {
void update(props.dataItem?.image);
}
};
const update = async (image: any) => {
const response = (await api({
url: API_PATHS.depositUpdate,
method: 'POST',
data: {
id: props.dataItem?.id,
artistBooking: {
id: props.dataItem?.artistBooking?.id,
},
amountMoney: amountMoney.value,
image: image as File,
status: 0,
depositDate: `${String(birthday?.value)} 00:00:00`,
formality: {
id: 4,
},
content: content.value,
accountName: cardHolder.value,
bankDto: bank.value,
accountNumber: accountNumber.value,
},
})) as AxiosResponse<BaseResponseBody<listTypeFormalityDeposit[]>>;
if (response.data.error.code === config.API_RES_CODE.OK.code) {
Notify.create({
type: 'positive',
message: 'Cập nhật thông tin đặt cọc thành công',
actions: [{ icon: 'close', color: 'white' }],
});
context.emit('click:CloseBtn');
context.emit('success');
}
};
const getRest = () => {
amountMoney.value = 0;
content.value = '';
image.value = '';
cardHolder.value = '';
birthday.value = '';
bank.value = undefined;
};
const getListBank = async () => {
const response = (await api({
url: API_PATHS.listBank,
method: 'GET',
params: {},
})) as AxiosResponse<BaseResponseBody<listBank[]>>;
if (response.data.error.code === config.API_RES_CODE.OK.code) {
listBank.value = response.data.data;
}
};
const selectedFile = (value: FileList) => {
if (value.length !== 0) {
setAvatar({ file: value[0], url: URL.createObjectURL(value[0]) });
}
};
const setAvatar = (value: { file?: File; url?: string }) => {
avatarFile.value = value.file as File;
image.value = value.url as string;
};
const deleteAvatar = () => {
image.value = null;
};
const upload = ref(null);
const uploadAvatar = () => {
// eslint-disable-next-line
// @ts-ignore
// eslint-disable-next-line
upload.value?.click();
};
const callApiUploadAvatar = async (file: File) => {
try {
const bodyFormData = new FormData();
bodyFormData.append('file', file);
const response = (await api({
headers: { 'Content-Type': 'multipart/form-data' },
url: config.API_IMAGE_ENDPOINT,
method: 'POST',
data: bodyFormData,
})) as AxiosResponse<BaseResponseBody<FileUploadType>>;
if (response.data.error.code === config.API_RES_CODE.OK.code) {
return response.data.data.fileName;
} else {
return '';
}
} catch (error) {
return '';
}
};
return {
selectedFile,
deleteAvatar,
uploadAvatar,
upload,
depositOptions,
getListformalityDeposit,
onOKClick,
onCancelClick,
getListBank,
handleUpdate,
setAvatar,
filterFn,
openDialog,
BirthdayDatePicker,
amountMoney,
content,
image,
cardHolder,
birthday,
listBank,
bank,
accountNumber,
};
},
emits: [
'click:CloseBtn',
'SetAvatar',
'deleteAvatar',
'UpdateBirtday',
'update:birthday',
'success',
],
});
</script>
src/css/app.scss
View file @ e663444e
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
.sticky-header-table { .sticky-header-table {
// / height or max-height is important / // / height or max-height is important /
max-height: calc(100vh - 13.5rem); max-height: calc(100vh - 13.5rem);
// max-width: 100vw; // max-width: 100vw;
.q-table__top, .q-table__top,
.q-table__bottom, .q-table__bottom,
......
src/pages/cau-hinh-doi-tac-truyen-thong/index.vue
View file @ e663444e
<template> <template>
<div class="row q-col-gutter-sm flex-center q-mt-sm"> <div class="row q-col-gutter-sm flex-center q-mt-sm">
<div class="col-auto text-h6 text-weight-regular flex flex-center q-mr-md"> <div class="col-auto text-h6 text-weight-regular flex flex-center q-mr-md">
{{ $t('configPartner.title') }} 123 {{ $t('configPartner.title') }}
<q-separator vertical spaced /> <q-separator vertical spaced />
</div> </div>
<q-space></q-space> <q-space></q-space>
......
src/pages/danh-sach-booking/index.vue
View file @ e663444e
...@@ -381,7 +381,7 @@ export default defineComponent({ ...@@ -381,7 +381,7 @@ export default defineComponent({
const ListStatusBooking = ref([ const ListStatusBooking = ref([
{ id: 0, name: 'Chưa hoàn thành', color: 'secondary' }, { id: 0, name: 'Chưa hoàn thành', color: 'secondary' },
{ id: 1, name: 'Đã hoàn thành', color: 'info' }, { id: 1, name: 'Đã hoàn thành', color: 'info' },
{ id: 2, name: 'Đã hủy', color: 'warning' }, { id: 2, name: 'Đã hủy', color: 'error' },
{ id: 3, name: 'Hết hạn', color: 'warning' }, { id: 3, name: 'Hết hạn', color: 'warning' },
{ id: 4, name: 'Chờ hủy', color: 'warning' }, { id: 4, name: 'Chờ hủy', color: 'warning' },
]); ]);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment