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
Hide 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 {
// xóa công việc
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 = {
artistFullName: string;
field: string;
fieldId: number;
id: number
id: number;
};
export type ArtistOwnerAdd = {
......@@ -531,7 +531,7 @@ export type ListBooking = {
favoriteScore: number;
performStatus: number;
fee: string;
bookingRandomCode:string
bookingRandomCode: string;
};
export type ListArrayArtist = {
......@@ -849,3 +849,35 @@ export type AddConfigHotProduct = {
imageUrl: string;
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({
{ id: 2, name: 'Sản phẩm nổi bật' },
]);
const uploadAvatar = (value: FileList) => {
console.log(value, 'value');
dialogCrop.value = true;
imageCrop.value = URL.createObjectURL(value[0]);
......
src/components/detailBooking/index.vue
View file @ e663444e
......@@ -3,8 +3,9 @@
persistent
:model-value="showDialog"
@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-card-section>
<q-item>
......@@ -71,59 +72,64 @@
<div class="col-4 fs-14 color">
{{ $t('listBooking.titleColumnsTable.status') }}:
</div>
<div class="col-8 fs-14">
<div class="col-8 fs-14">
<q-chip
size="sm"
color="secondary"
v-if="detailInfoBooking.status === 0"
>Chờ nhận</q-chip
>Chưa hoàn thành</q-chip
>
<q-chip
size="sm"
color="info"
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
size="sm"
color="secondary"
v-if="detailInfoBooking.performStatus === 0"
>Chờ nhận</q-chip
color="warning"
v-else-if="detailInfoBooking.status === 2"
>Đã hủy</q-chip
>
<q-chip
size="sm"
color="info"
v-else-if="detailInfoBooking.performStatus === 1"
>Đã thực hiện</q-chip
color="warning"
v-else-if="detailInfoBooking.status === 3"
>Hết hạn</q-chip
>
<q-chip
size="sm"
color="warning"
v-else-if="detailInfoBooking.performStatus === 2"
>Chưa thực hiện</q-chip
v-else-if="detailInfoBooking.status === 4"
>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
size="sm"
color="warning"
v-else-if="detailInfoBooking.performStatus === 3"
>Hoãn lịch</q-chip
color="secondary"
v-if="detailInfoBooking.performStatus === 0"
>Chưa xác nhận</q-chip
>
<q-chip
size="sm"
color="warning"
v-else-if="detailInfoBooking.performStatus === 4"
>Hủy lịch</q-chip
>
<q-chip size="sm" color="secondary" v-else
>Thay đổi lịch</q-chip
color="info"
v-else-if="detailInfoBooking.performStatus === 1"
>Đã xác nhận</q-chip
>
<q-chip size="sm" color="warning" v-else>Từ chối</q-chip>
</div>
<div class="col-4 fs-14 color">
......@@ -133,11 +139,11 @@
</div>
</div>
<!-- <v-row>
<v-row>
<v-col>
<tableDeposit :id="detailInfoBooking.id"></tableDeposit>
</v-col>
</v-row> -->
</v-row>
</q-card-section>
<q-separator />
<q-card-actions align="right">
......@@ -157,10 +163,10 @@
<script lang="ts">
import { defineComponent, PropType, watch } from 'vue';
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({
components: {
// tableDeposit,
tableDeposit,
},
props: {
showDialog: {
......
src/components/detailBooking/tableDeposit/add.vue
View file @ e663444e
<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-form greedy>
<q-card-section>
......@@ -82,39 +86,76 @@
</div>
</div>
</div>
<div class="row flex-center" style="padding-top: 10px">
<div class="col-3 text-weight-medium">
<div>Hình thức đặt cọc</div>
<div class="row" style="padding-top: 10px">
<div class="col-6">
<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 class="col-6">
<q-select
emit-value
map-options
label="Tên ngân hàng"
:options="depositOptions"
option-value="id"
option-label="name"
type="text"
class="q-my-sm"
class="q-ma-sm"
outlined
hide-bottom-space
clearable
dense
></q-select>
</div>
</div>
<div class="row flex-center">
<div class="col-3 text-weight-medium">
<div>Thời gian đặt cọc:</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 class="col-6">
<q-select
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 class="col-6">
<q-input
:model-value="birthday"
@update:model-value="$emit('update:birthday', $event)"
class="q-my-sm"
class="q-ma-sm"
outlined
@click="openDialog = true"
dense
label="Thời gian đặt cọc:"
hide-bottom-space
>
<template v-slot:default>
......@@ -139,17 +180,13 @@
</template>
</q-input>
</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">
<q-input
type="text"
class="q-my-sm"
class="q-ma-sm"
outlined
label="Số tiền đặt cọc:"
hide-bottom-space
clearable
dense
......
src/components/detailBooking/tableDeposit/index.vue
View file @ e663444e
<template>
<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>
<div class="col-auto">
<!-- <div class="col-auto">
<q-btn
class="q-mr-sm"
color="primary"
......@@ -12,7 +15,7 @@
@click="showDialog = true"
>
</q-btn>
</div>
</div> -->
<div class="col-12 q-mt-sm">
<q-table
......@@ -23,69 +26,115 @@
separator="cell"
:rows-per-page-label="$t('recordPerPage')"
wrap-cells
flat
bordered
hide-pagination
:pagination="{
rowsPerPage: 0,
}"
virtual-scroll
class="sticky-header-table"
>
<!-- <template v-slot:body-cell-action="rowData">
<q-td style="padding: 0; text-align: center">
<q-btn
flat
round
color="primary"
icon="mdi-information-outline"
@click="detail(rowData.row.id)"
>
<q-tooltip :offset="[10, 10]">{{
$t('listBooking.toolTipMessage')
}}</q-tooltip>
</q-btn>
<template v-slot:body-cell-action="rowData">
<q-td style="text-align: center; padding: 0">
<div style="display: flex">
<q-btn
v-if="rowData.row.status === 0"
@click="handleUpdate(rowData.row)"
flat
round
color="primary"
icon="mdi-pencil-outline"
>
<q-tooltip :offset="[20, 10]">Cập nhật</q-tooltip>
</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>
</template> -->
<!-- <template v-slot:body-cell-stt="item">
</template>
<template v-slot:body-cell-stt="item">
<q-td :item="item" style="text-align: center">
{{ 1 + item.rowIndex + pageSize * (pageIndex - 1) }}
{{ 1 + item.rowIndex + 20 * (1 - 1) }}
</q-td>
</template> -->
</template>
<!-- <template v-slot:body-cell-status="item">
<q-td align="center">
<template v-for="(data, idx) in ListStatusBooking">
<q-chip
v-if="item.row.status === data.id"
:key="`status-${idx}-${item}`"
size="sm"
label
:color="data.color"
>{{ data.name }}</q-chip
>
</template>
<template v-slot:body-cell-type="item">
<q-td :item="item" align="center">
<div v-if="item.row.formality">{{ item.row.formality.name }}</div>
</q-td>
</template> -->
</template>
<template v-slot:body-cell-image="item">
<q-td :item="item" align="center">
<q-img
:src="formatUrl(item.row.image)"
spinner-color="white"
style="height: 140px; max-width: 150px"
/>
</q-td>
</template>
<!-- <template v-slot:body-cell-performStatus="item">
<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 v-slot:body-cell-numberBanking="item">
<q-td :item="item" align="center">
<div>{{ item.row.accountNumber }}</div>
</q-td>
</template>
<!-- userName banking numberBanking money status -->
<template v-slot:body-cell-status="item">
<q-td align="center">
<template v-for="(data, idx) in ListPerformStatus">
<template v-for="(data, idx) in ListStatusBooking">
<q-chip
v-if="item.row.performStatus === data.id"
:key="`performStatus-${idx}-${item}`"
v-if="item.row.status === data.value"
:key="`status-${idx}-${item}`"
size="sm"
label
:color="data.color"
>{{ data.name }}</q-chip
>{{ data.text }}</q-chip
>
</template>
</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>
</q-table>
<div>
......@@ -95,8 +144,20 @@
@SetAvatar="setAvatar($event)"
@deleteAvatar="deleteAvatar"
v-model:show-dialog="showDialog"
@click:CloseBtn="showDialog = false"
></addNewDialog>
</div>
<div>
<update
v-model:show-dialog="dialogUpdate"
:dataItem="dataItem"
@SetAvatar="setAvatar($event)"
@deleteAvatar="deleteAvatar"
@click:CloseBtn="dialogUpdate = false"
@success="getList"
></update>
</div>
</div>
<!-- <detailBooking
......@@ -112,10 +173,12 @@ import { api, BaseResponseBody } from 'src/boot/axios';
import { config, API_PATHS } from 'src/assets/configurations.example';
import { AxiosResponse } from 'axios';
import addNewDialog from '../../detailBooking/tableDeposit/add.vue';
import update from '../../detailBooking/tableDeposit/update.vue';
import { ListDeposit, FileUploadType } from 'src/assets/type';
export default defineComponent({
components: {
addNewDialog,
update,
},
props: {
id: {
......@@ -129,120 +192,100 @@ export default defineComponent({
name: 'stt',
field: 'stt',
required: true,
headerStyle: 'text-align: center !important; width: 4%',
headerStyle: 'text-align: center !important; width:20%',
align: 'center',
label: 'STT',
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',
field: 'userName',
required: true,
headerStyle: 'text-align: center !important; width: 9%',
label: 'Tên chủ thẻ',
headerStyle: 'text-align: center !important; width:20%',
align: 'left',
sortable: false,
},
{
name: 'address',
field: 'address',
name: 'banking',
field: 'banking',
required: true,
headerStyle: 'text-align: center !important; width: 13%',
label: 'Tên ngân hàng',
headerStyle: 'text-align: center !important; width:20%',
align: 'left',
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',
field: 'fromTime',
name: 'numberBanking',
field: 'numberBanking',
required: true,
headerStyle: 'text-align: center !important; width: 9%',
label: 'Số tài khoản',
headerStyle: 'text-align: center !important; width:20%',
align: 'left',
sortable: false,
},
{
name: 'toTime',
field: 'toTime',
name: 'time',
field: 'time',
required: true,
headerStyle: 'text-align: center !important; width: 9%',
label: 'Thời gian ',
headerStyle: 'text-align: center !important; width:20%',
align: 'left',
sortable: false,
},
{
name: 'fee',
field: 'fee',
name: 'money',
field: 'money',
required: true,
headerStyle: 'text-align: center !important; width: 9%',
label: 'Số tiền',
headerStyle: 'text-align: center !important; width:20%',
align: 'left',
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',
field: 'status',
required: true,
headerStyle: 'text-align: center !important; width: 8%',
label: 'Trạng thái',
headerStyle: 'text-align: center !important; width:20%',
align: 'center',
sortable: false,
},
{
name: 'performStatus',
field: 'performStatus',
required: true,
headerStyle: 'text-align: center !important; width: 8%',
align: 'center',
sortable: false,
},
{
name: 'action',
field: 'action',
required: true,
headerStyle: 'text-align: center !important; width: 7%',
label: 'Chức năng',
headerStyle: 'text-align: center !important; width:20%',
align: 'center',
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 listDeposit: Ref<unknown[]> = ref([]);
const showDialog = ref(false);
......@@ -260,6 +303,21 @@ export default defineComponent({
const deleteAvatar = () => {
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) => {
try {
......@@ -267,8 +325,7 @@ export default defineComponent({
bodyFormData.append('file', file);
const response = (await api({
headers: { 'Content-Type': 'multipart/form-data' },
url: config.API_IMAGE_ENDPOINT, // pro
// url: 'http://103.147.34.20:10705/file/upload/', // test
url: config.API_IMAGE_ENDPOINT,
method: 'POST',
data: bodyFormData,
......@@ -311,9 +368,17 @@ export default defineComponent({
setAvatar,
callApiUploadAvatar,
deleteAvatar,
formatUrl,
ListStatusBooking,
image,
birthday,
dataItem,
dialogUpdate,
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 @@
.sticky-header-table {
// / height or max-height is important /
max-height: calc(100vh - 13.5rem);
// max-width: 100vw;
.q-table__top,
.q-table__bottom,
......
src/pages/cau-hinh-doi-tac-truyen-thong/index.vue
View file @ e663444e
<template>
<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">
{{ $t('configPartner.title') }} 123
{{ $t('configPartner.title') }}
<q-separator vertical spaced />
</div>
<q-space></q-space>
......
src/pages/danh-sach-booking/index.vue
View file @ e663444e
......@@ -381,7 +381,7 @@ export default defineComponent({
const ListStatusBooking = ref([
{ id: 0, name: 'Chưa hoàn thành', color: 'secondary' },
{ 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: 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