Skip to content

Q
quasar-web-base
Commit c8330db4 authored by Tình Trương's avatar Tình Trương
Browse files
Options

update

parent 7b6b8a02
Hide whitespace changes
Inline Side-by-side
Showing with 250 additions and 140 deletions
src/assets/configurations.example.ts
View file @ c8330db4
......@@ -94,4 +94,5 @@ export enum API_PATHS {
updateConfigSystem = 'config-page/update',
addConfigSystem = 'config-page/add',
deleteConfigSystem = 'config-page/delete',
getListVABInfo = 'information',
}
src/assets/type.ts
View file @ c8330db4
......@@ -511,3 +511,33 @@ export type AddConfigSystem = {
url: string;
numIndex: number;
};
export type VABInfoType = {
id: number;
comName: string;
logo: string;
email: string;
website: string;
phone: string;
address: string;
};
export type DetailVABInfoType = {
id: number;
comName: string;
logo: string;
email: string;
website: string;
phone: string;
address: string;
};
export type UpdateVABInfoType = {
id: number;
comName: string;
logo: string;
email: string;
website: string;
phone: string;
address: string;
};
src/components/configSystem/index.vue
View file @ c8330db4
......@@ -62,11 +62,11 @@
:rules="urlRules"
clearable
></q-input>
<!-- :rules="nameMenuRules" -->
<q-select
:model-value="nameMenu"
@update:model-value="$emit('update:nameMenu', $event)"
:label="$t('listConfigSystem.dialogLabel.fieldLabels.nameMenu')"
:rules="nameMenuRules"
:options="nameMenuOptions"
multiple
map-options
......@@ -236,15 +236,15 @@ export default defineComponent({
(val && val.trim().length) ||
i18n.global.t('listConfigSystem.validateMessages.requireUrl'),
];
const nameMenuRules = [
(val?: number) =>
val !== undefined ||
i18n.global.t('listConfigSystem.validateMessages.requireNameMenu'),
];
// const nameMenuRules = [
// (val?: number) =>
// val !== undefined ||
// i18n.global.t('listConfigSystem.validateMessages.requireNameMenu'),
// ];
return {
namePageRules,
urlRules,
nameMenuRules,
// nameMenuRules,
};
},
emits: [
......
src/components/update-info-vab/update-info-vab-dialog/index.vue
View file @ c8330db4
......@@ -4,7 +4,7 @@
:model-value="isOpened"
@update:model-value="$emit('update:isOpened', $event)"
>
<q-card class="full-width" style="max-width: 60rem" bordered>
<q-card class="full-width" style="max-width: 80rem" bordered>
<q-form
greedy
@submit.prevent="
......@@ -30,55 +30,73 @@
style="max-height: calc(100vh - 10rem)"
>
<div class="row q-col-gutter-sm">
<div class="col-12">
<div class="row flex-center q-pt-sm">
<div>
<q-card style="margin-bottom: 8px" v-if="image !== null">
<div class="col-6">
<div class="row flex-center">
<div class="q-mt-lg">
<q-card v-if="logo !== null">
<q-img
:src="image"
style="height: 268px; width: 350px"
@click="uploadAvatar"
>
</q-img>
:src="logo"
style="height: 390px; width: 350px; cursor: pointer"
></q-img>
<q-icon
name="mdi-close-circle"
style="position: absolute; right: 0; font-size: 18px"
color="red"
style="
position: absolute;
right: 0;
font-size: 18px;
cursor: pointer;
"
@click="deleteAvatar"
></q-icon>
</q-card>
<q-card v-else style="margin-bottom: 8px">
<q-img
src="~/assets/noavatar.png"
style="height: 265px; width: 350px"
></q-img>
</q-card>
<q-card @click="uploadAvatar">
<div align="center" class="flex flex-center q-py-xs">
<div
@click="uploadAvatar"
v-else
style="
height: 390px;
width: 350px;
border: 2px dashed #5d319e;
border-radius: 4px;
cursor: pointer;
"
>
<div
style="
height: 390px;
width: 350px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
"
>
<q-icon
style="color: #5d319e"
name="mdi-plus-circle-outline"
:size="'xs'"
name="mdi-cloud-upload"
size="xl"
></q-icon>
<div class="q-mt-xs">
{{ $t('infoVAB.uploadImg') }}
</div>
Tải ảnh lên
</div>
</div>
<div>
<input
ref="upload"
hidden
type="file"
@change="selectedFile($event.target.files)"
type="file"
accept="image/png, image/jpeg"
/>
</q-card>
</div>
</div>
</div>
</div>
<div class="col-6">
<q-input
:model-value="name"
@update:model-value="$emit('update:name', $event)"
:label="$t('infoVAB.dialogLabel.infoVABLabels.name')"
:model-value="comName"
@update:model-value="$emit('update:comName', $event)"
:label="$t('infoVAB.dialogLabel.infoVABLabels.comName')"
type="text"
class="q-my-sm q-pt-md"
outlined
......@@ -156,7 +174,7 @@
<template v-slot:body-cell-action="">
<q-td style="padding: 0" class="flex flex-center">
<q-btn flat round color="primary" icon="mdi-delete-outline">
<q-tooltip :offset="[20, 10]">{{
<q-tooltip :offset="[10, 10]">{{
$t('infoVAB.toolTipMessage.deleteBankAccount')
}}</q-tooltip>
</q-btn>
......@@ -166,7 +184,7 @@
color="primary"
icon="mdi-account-edit-outline"
>
<q-tooltip :offset="[20, 10]">{{
<q-tooltip :offset="[10, 10]">{{
$t('infoVAB.toolTipMessage.updateBankAccount')
}}</q-tooltip>
</q-btn>
......@@ -242,7 +260,6 @@
import { defineComponent, ref, Ref, PropType } from 'vue';
import InfoVABAddUpdateBankAccountDialog from 'components/update-info-vab/info-vab-add-update-bank-account/index.vue';
import { i18n } from 'src/boot/i18n';
//bankAccount
const bankAccountTableColumnsInfoVAB = [
{
......@@ -318,10 +335,10 @@ export default defineComponent({
required: true,
},
isUpdate: { type: Boolean, default: false },
name: { type: String, required: true },
image: { type: String, required: true },
comName: { type: String, required: true },
logo: { type: String, required: true },
website: { type: String, required: true },
phone: { type: String, required: true },
phone: { type: Number, required: true },
email: { type: String, required: true },
address: { type: String, required: true },
bankAccountList: { type: Array as PropType<unknown[]>, required: true },
......@@ -338,6 +355,7 @@ export default defineComponent({
};
const upload = ref(null);
const uploadAvatar = () => {
console.log(1);
// eslint-disable-next-line
// @ts-ignore
// eslint-disable-next-line
......@@ -407,6 +425,7 @@ export default defineComponent({
selectedFile,
deleteAvatar,
uploadAvatar,
upload,
bankAccountTableColumnsInfoVAB,
addBankAccountDialogIsOpened,
bank,
......@@ -426,12 +445,12 @@ export default defineComponent({
},
emits: [
'update:isOpened',
'update:name',
'update:comName',
'update:website',
'update:phone',
'update:email',
'update:address',
'update:image',
'update:logo',
'SetAvatar',
'deleteAvatar',
'saveInfoVAB',
......
src/i18n/vi/index.ts
View file @ c8330db4
......@@ -846,8 +846,8 @@ export default {
titleBankAccount: 'Danh sách tài khoản ngân hàng thụ hưởng',
tableColumnsInfoVAB: {
stt: 'STT',
name: 'Tên công ty',
image: 'Logo',
comName: 'Tên công ty',
logo: 'Logo',
website: 'Website',
phone: 'Số điện thoại',
email: 'Email',
......@@ -869,7 +869,7 @@ export default {
updateBankAccount: 'Cập nhật ngân hàng thụ hưởng',
},
infoVABLabels: {
name: 'Tên công ty *',
comName: 'Tên công ty *',
website: 'Website *',
phone: 'Số điện thoại *',
email: 'Email *',
......
src/pages/cau-hinh-trang-tinh/index.vue
View file @ c8330db4
......@@ -144,7 +144,6 @@
/>
<AddUpdatePolicyDialog
isUpdate
v-model:isOpened="showDialogUpdate"
v-model:namePage="namePage"
v-model:content="content"
......
src/pages/thong-tin-chung/index.vue
View file @ c8330db4
......@@ -11,47 +11,67 @@
:columns="infoVABTableColumns"
row-key="infoVABName"
separator="cell"
:rows-per-page-label="$t('recordPerPage')"
:pagination="{
rowsPerPage: 0,
}"
wrap-cells
:no-data-label="$t('emptyData')"
hide-pagination
class="sticky-header-table"
>
<template v-slot:body-cell-action="">
<template v-slot:body-cell-action="item">
<q-td style="padding: 0" align="center">
<q-btn
flat
round
color="primary"
icon="mdi-book-edit-outline"
@click="openUpdateInfoVABDialog()"
icon="mdi-account-edit-outline"
@click="openUpdateInfoVABDialog(item.row.id)"
>
<q-tooltip :offset="[20, 10]">{{
<q-tooltip :offset="[10, 10]">{{
$t('infoVAB.toolTipMessage.updateInfoVAB')
}}</q-tooltip>
</q-btn>
<q-btn flat round color="primary" icon="mdi-delete-outline">
<q-tooltip :offset="[20, 10]">{{
<!-- <q-btn flat round color="primary" icon="mdi-delete-outline">
<q-tooltip :offset="[10, 10]">{{
$t('infoVAB.toolTipMessage.updateInfoVAB')
}}</q-tooltip>
</q-btn>
</q-btn> -->
</q-td>
</template>
<template v-slot:body-cell-stt="item">
<q-td :item="item" style="text-align: center">
{{ 1 + item.rowIndex + pageSize * (pageIndex - 1) }}
</q-td>
</template>
<template v-slot:body-cell-image="image">
<template v-slot:body-cell-logo="logo">
<q-td style="padding: auto; height: 100%" class="flex flex-center">
<q-img
style="width: 9rem"
fit="contain"
:ratio="16 / 9"
:src="configImg.API_IMAGE_ENDPOINT + image.row.image"
:src="configImg.API_IMAGE_ENDPOINT + logo.row.logo"
></q-img>
</q-td>
</template>
</q-table>
</div>
<div class="col-12 q-mt-sm">
<Pagination
v-model:currentPage="pageIndex"
v-model:pageSize="pageSize"
:totalPage="totalPage"
@update:pageSize="changePageSize"
@update:currentPage="getListVABInfo"
/>
</div>
<UpdateInfoVABDialog
v-model:isOpened="updateInfoVABDialogIsOpened"
v-model:name="name"
v-model:image="image"
v-model:com-name="comName"
v-model:logo="logo"
v-model:website="website"
v-model:phone="phone"
v-model:email="email"
......@@ -68,10 +88,17 @@ import { i18n } from 'src/boot/i18n';
import { defineComponent, onMounted, ref, Ref } from 'vue';
import { AxiosResponse } from 'axios';
import { api, BaseResponseBody } from 'src/boot/axios';
import { FileUploadType } from 'src/assets/type';
import { config } from 'src/assets/configurations';
import { Notify } from 'quasar';
import Pagination from 'components/pagination/index.vue';
import {
FileUploadType,
PaginationResponse,
VABInfoType,
DetailVABInfoType,
UpdateVABInfoType,
} from 'src/assets/type';
import { config, API_PATHS } from 'src/assets/configurations';
import UpdateInfoVABDialog from 'components/update-info-vab/update-info-vab-dialog/index.vue';
export type AvatarType = {
file?: File;
url?: string | null;
......@@ -79,32 +106,33 @@ export type AvatarType = {
export default defineComponent({
components: {
Pagination,
UpdateInfoVABDialog,
},
setup() {
const infoVABTableColumns = [
// {
// name: 'index',
// field: 'index',
// required: true,
// label: 'STT',
// align: 'center',
// sortable: false,
// },
{
name: 'name',
field: 'name',
name: 'stt',
field: 'stt',
required: true,
label: i18n.global.t('infoVAB.tableColumnsInfoVAB.name'),
label: 'STT',
align: 'center',
sortable: false,
},
{
name: 'comName',
field: 'comName',
required: true,
label: i18n.global.t('infoVAB.tableColumnsInfoVAB.comName'),
headerStyle: 'text-align: center !important;',
align: 'left',
sortable: false,
},
{
name: 'image',
field: 'image',
name: 'logo',
field: 'logo',
required: true,
label: i18n.global.t('infoVAB.tableColumnsInfoVAB.image'),
label: i18n.global.t('infoVAB.tableColumnsInfoVAB.logo'),
headerStyle: 'text-align: center !important;',
align: 'center',
sortable: false,
......@@ -156,83 +184,112 @@ export default defineComponent({
},
];
const infoVABTableRows: Ref<unknown[]> = ref([
{ name: 'VietNam Artist Booking' },
]);
const infoVABTableRows: Ref<unknown[]> = ref([]);
const updateInfoVABDialogIsOpened = ref(false);
const name = ref('');
const phone = ref('');
const email = ref('');
const address = ref('');
const website = ref('');
const image: Ref<string | null> = ref(null);
const comName: Ref<string | null> = ref(null);
const phone: Ref<string> = ref('');
const email: Ref<string> = ref('');
const address: Ref<string> = ref('');
const website: Ref<string> = ref('');
const logo: Ref<string | null> = ref(null);
const imageChange: Ref<string> = ref('');
const infoVABId: Ref<number | undefined> = ref(undefined);
const avatarFile: Ref<File | null> = ref(null);
const avatarUploaded: Ref<string> = ref('');
const pageIndex = ref(1);
const pageSize = ref(20);
const totalPage = ref(1);
const changePageSize = () => {
pageIndex.value = 1;
void getListVABInfo();
};
const VABInfoId: Ref<number | undefined> = ref(undefined);
//gọi api ds
const getListInfoVAB = async () => {
// const response = (await api({
// url: API_PATHS.getListBanner,
// method: 'GET',
// params: {
// name: nameBanner.value,
// },
// })) as AxiosResponse<BaseResponseBody<BannerType[]>>;
// if (response.data.error.code === config.API_RES_CODE.OK.code) {
// bannerTableRows.value = response.data.data;
// }
const getListVABInfo = async () => {
try {
const response = (await api({
url: API_PATHS.getListVABInfo,
method: 'GET',
params: {
pageIndex: pageIndex.value,
pageSize: pageSize.value,
},
})) as AxiosResponse<BaseResponseBody<PaginationResponse<VABInfoType>>>;
if (response.data.error.code === config.API_RES_CODE.OK.code) {
infoVABTableRows.value = response.data.data.data;
totalPage.value = response.data.data.totalPages;
}
} catch (error) {}
};
const openUpdateInfoVABDialog = () => {
void getDetailInfoVAB();
const openUpdateInfoVABDialog = (id: number) => {
void getDetailInfoVAB(id);
updateInfoVABDialogIsOpened.value = true;
};
//gọi api detail
const getDetailInfoVAB = async () => {
// try {
// const response = (await api({
// url: API_PATHS.getDetailBanner,
// method: 'GET',
// params: {
// id: id,
// },
// })) as AxiosResponse<BaseResponseBody<DetailBannerType>>;
// if (response.data.error.code === config.API_RES_CODE.OK.code) {
// bannerId.value = response.data.data.id;
// name.value = response.data.data.name;
// status.value = response.data.data.status;
// }
// } catch (error) {}
const getDetailInfoVAB = async (id: number) => {
try {
const response = (await api({
url: API_PATHS.getDetailInfoVAB,
method: 'GET',
params: {
id: id,
},
})) as AxiosResponse<BaseResponseBody<DetailVABInfoType>>;
if (response.data.error.code === config.API_RES_CODE.OK.code) {
VABInfoId.value = response.data.data.id;
logo.value = config.API_IMAGE_ENDPOINT + response.data.data.logo;
imageChange.value = response.data.data.logo;
comName.value = response.data.data.comName;
email.value = response.data.data.email;
website.value = response.data.data.website;
phone.value = response.data.data.phone;
address.value = response.data.data.address;
}
} catch (error) {}
};
//gọi api update
const updateInfoVAB = async () => {
// const data = {
// id: bannerId.value,
// name: name.value,
// status: status.value,
// };
// const response = (await api({
// url: API_PATHS.updateBanner,
// method: 'POST',
// data,
// })) as AxiosResponse<BaseResponseBody<UpdateBannerType[]>>;
// if (response.data.error.code === config.API_RES_CODE.OK.code) {
// updateBannerDialogIsOpened.value = false;
// Notify.create({
// type: 'positive',
// message: i18n.global.t('banner.actionMessages.updateBannerAccess'),
// actions: [{ icon: 'close', color: 'white' }],
// });
// void getListBanner();
// }
if (avatarFile.value) {
avatarUploaded.value = await callApiUploadAvatar(avatarFile.value);
void confirmUpdatePost(avatarUploaded.value);
} else {
void confirmUpdatePost(imageChange.value);
}
};
const confirmUpdatePost = async (logo: string) => {
const data = {
id: VABInfoId.value,
logo,
comName: comName.value,
email: email.value,
website: website.value,
address: address.value,
phone: phone.value,
};
const response = (await api({
url: API_PATHS.updateInfoVAB,
method: 'POST',
data,
})) as AxiosResponse<BaseResponseBody<UpdateVABInfoType[]>>;
if (response.data.error.code === config.API_RES_CODE.OK.code) {
updateInfoVABDialogIsOpened.value = false;
Notify.create({
type: 'positive',
message: i18n.global.t('post.actionMessages.updatePostAccess'),
actions: [{ icon: 'close', color: 'white' }],
});
void getListVABInfo();
}
};
const setAvatar = (value: { file?: File; url?: string }) => {
avatarFile.value = value.file as File;
image.value = value.url as string;
logo.value = value.url as string;
};
const callApiUploadAvatar = async (file: File) => {
......@@ -255,20 +312,20 @@ export default defineComponent({
}
};
const deleteAvatar = () => {
image.value = null;
logo.value = null;
};
const configImg = config;
onMounted(() => {
void getListInfoVAB();
void getListVABInfo();
});
return {
updateInfoVABDialogIsOpened,
infoVABTableColumns,
infoVABTableRows,
getListInfoVAB,
name,
getListVABInfo,
comName,
phone,
email,
address,
......@@ -277,12 +334,16 @@ export default defineComponent({
openUpdateInfoVABDialog,
getDetailInfoVAB,
updateInfoVAB,
image,
logo,
setAvatar,
callApiUploadAvatar,
deleteAvatar,
configImg,
avatarUploaded,
pageIndex,
pageSize,
totalPage,
changePageSize,
VABInfoId,
};
},
});
......
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