Skip to content

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

update

parent f0e30840
Show whitespace changes
Inline Side-by-side
Showing with 1243 additions and 284 deletions
src/assets/configurations.example.ts
View file @ f9adb60e
......@@ -97,4 +97,14 @@ export enum API_PATHS {
getDetailInfoVAB = 'information/detail',
updateInfoVAB = 'information/update',
getListVABInfo = 'information',
getListBanner = 'config/home/banner',
getDetailBanner = 'config/home/banner/detail',
addBanner = 'config/home/banner/add',
updateBanner = 'config/home/banner/update',
deleteBanner = 'config/home/banner/delete',
getListConfigPartner = 'config/home/partner',
deleteConfigPartner = 'config/home/partner/delete',
addConfigPartner = 'config/home/partner/add',
getDetailConfigPartner = 'config/home/partner/detail',
updateConfigPartner = 'config/home/partner/update',
}
src/assets/type.ts
View file @ f9adb60e
......@@ -565,3 +565,105 @@ export type UpdateVABInfoType = {
twtLink: string;
fbLink: string;
};
export type ListBannerConfig = {
id: number;
name: string;
bannerType: string;
numIndex: number;
image: string;
urlTarget: string;
status: number;
createBy: string;
createTime: string;
updateBy: string;
updateTime: string;
};
export type DetailBannerConfig = {
id: number;
name: string;
bannerType: string;
numIndex: number;
image: string;
urlTarget: string;
status: number;
createBy: string;
createTime: string;
updateBy: string;
updateTime: string;
};
export type UpdateBannerConfig = {
id: number;
name: string;
bannerType: string;
numIndex: number;
image: string;
urlTarget: string;
status: number;
createBy: string;
createTime: string;
updateBy: string;
updateTime: string;
};
export type AddBannerConfig = {
name: string;
bannerType: string;
numIndex: number;
image: string;
urlTarget: string;
status: number;
createBy: string;
createTime: string;
updateBy: string;
updateTime: string;
};
export type ListConfigPartner = {
id: number;
name: string;
image: string;
numIndex: number;
status: number;
createBy: string;
createTime: string;
updateBy: string;
updateTime: string;
};
export type DetailConfigPartner = {
id: number;
name: string;
image: string;
numIndex: number;
status: number;
createBy: string;
createTime: string;
updateBy: string;
updateTime: string;
};
export type updateConfigPartnerConfig = {
id: number;
name: string;
image: string;
numIndex: number;
status: number;
createBy: string;
createTime: string;
updateBy: string;
updateTime: string;
};
export type addConfigPartnerConfig = {
name: string;
image: string;
numIndex: number;
status: number;
createBy: string;
createTime: string;
updateBy: string;
updateTime: string;
};
src/components/add-update-banner/index.vue
View file @ f9adb60e
......@@ -4,7 +4,7 @@
:model-value="isOpened"
@update:model-value="$emit('update:isOpened', $event)"
>
<q-card class="full-width" style="max-width: 50rem" bordered>
<q-card class="full-width" style="max-width: 80rem" bordered>
<q-form
greedy
@submit.prevent="
......@@ -27,53 +27,69 @@
<q-card-section
class="overflow-auto"
style="max-height: calc(100vh - 10rem)"
style="max-height: calc(100vh - 15rem)"
>
<div class="row q-col-gutter-sm">
<div class="col-6">
<div class="row flex-center q-pt-sm">
<div class="row flex-center">
<div>
<q-card style="margin-bottom: 8px" v-if="image !== null">
<q-card class="q-mb-sm" v-if="image !== null">
<q-img
:src="image"
style="height: 268px; width: 350px"
@click="uploadAvatar"
>
</q-img>
:src="image"
style="height: 250px; width: 450px; cursor: pointer"
></q-img>
<q-icon
name="mdi-close-circle"
color="red"
style="position: absolute; right: 0; font-size: 18px"
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
class="q-mb-sm"
style="
height: 250px;
width: 450px;
border: 2px dashed #5d319e;
border-radius: 4px;
cursor: pointer;
"
>
<div
style="
height: 250px;
width: 450px;
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('banner.uploadImg') }}
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>
......@@ -88,7 +104,17 @@
:rules="nameRules"
clearable
></q-input>
<q-select
<q-input
:model-value="numIndex"
@update:model-value="$emit('update:numIndex', $event)"
:label="$t('banner.dialogLabel.bannerLabels.numIndex')"
mask="####"
class="q-my-sm"
outlined
:rules="numIndexRules"
clearable
></q-input>
<!-- <q-select
:model-value="type"
@update:model-value="$emit('update:type', $event)"
:label="$t('banner.dialogLabel.bannerLabels.type')"
......@@ -100,21 +126,19 @@
type="text"
class="q-my-sm"
outlined
></q-select>
<q-select
></q-select> -->
<!-- <q-select
:model-value="location"
@update:model-value="$emit('update:location', $event)"
:label="$t('banner.dialogLabel.bannerLabels.location')"
:rules="locationRules"
:options="locationOptions"
map-options
option-value="id"
option-label="name"
type="text"
class="q-my-sm"
outlined
></q-select>
<q-input
></q-select> -->
<!-- <q-input
:model-value="urlTarget"
@update:model-value="$emit('update:urlTarget', $event)"
:label="$t('banner.dialogLabel.bannerLabels.urlTarget')"
......@@ -123,7 +147,7 @@
class="q-my-sm"
outlined
clearable
></q-input>
></q-input> -->
<div class="q-pt-sm">
<span class="text-body1">{{
$t('banner.dialogLabel.bannerLabels.status')
......@@ -175,12 +199,11 @@ export default defineComponent({
isUpdate: { type: Boolean, default: false },
name: { type: String, required: true },
image: { type: String, required: true },
urlTarget: { type: String, required: true },
// urlTarget: { type: String, required: true },
status: { type: Number, required: true },
type: { type: Number, required: true },
typeOptions: { type: Array, required: true },
location: { type: Number, required: true },
locationOptions: { type: Array, required: true },
// type: { type: Number, required: true },
// typeOptions: { type: Array, required: true },
numIndex: { type: Number, required: true },
},
setup(_, context) {
const selectedFile = (value: FileList) => {
......@@ -199,42 +222,43 @@ export default defineComponent({
// eslint-disable-next-line
upload.value?.click();
};
const urlTargetRules = [
(val?: string) =>
(val && val.trim().length) ||
i18n.global.t('banner.validateMessages.requireUrlTarget'),
];
// const urlTargetRules = [
// (val?: string) =>
// (val && val.trim().length) ||
// i18n.global.t('banner.validateMessages.requireUrlTarget'),
// ];
const nameRules = [
(val?: string) =>
(val && val.trim().length) ||
i18n.global.t('banner.validateMessages.requireName'),
];
const typeRules = [
(val?: number) =>
val !== undefined ||
i18n.global.t('banner.validateMessages.requireType'),
];
const locationRules = [
// const typeRules = [
// (val?: number) =>
// val !== undefined ||
// i18n.global.t('banner.validateMessages.requireType'),
// ];
const numIndexRules = [
(val?: number) =>
val !== undefined ||
i18n.global.t('banner.validateMessages.requireLocation'),
];
return {
urlTargetRules,
// urlTargetRules,
nameRules,
typeRules,
locationRules,
// typeRules,
numIndexRules,
selectedFile,
deleteAvatar,
uploadAvatar,
upload,
};
},
emits: [
'update:isOpened',
'update:name',
'update:urlTarget',
'update:type',
'update:location',
// 'update:urlTarget',
// 'update:type',
'update:numIndex',
'update:status',
'update:image',
'SetAvatar',
......
src/components/add-update-cau-hinh-doi-tac-truyen-thong/index.vue 0 → 100644
View file @ f9adb60e
<template>
<q-dialog
persistent
:model-value="isOpened"
@update:model-value="$emit('update:isOpened', $event)"
>
<q-card class="full-width" style="max-width: 80rem" bordered>
<q-form
greedy
@submit.prevent="
$emit('saveConfigPartnerInfo', {});
$emit('update:isOpened', false);
"
>
<q-card-section class="q-pa-none">
<q-item>
<q-item-section>
<q-item-label class="text-h6 text-weight-regular">{{
isUpdate
? $t('configPartner.dialogLabel.title.addConfigPartner')
: $t('configPartner.dialogLabel.title.updateConfigPartner')
}}</q-item-label>
</q-item-section>
</q-item>
</q-card-section>
<q-separator />
<q-card-section
class="overflow-auto"
style="max-height: calc(100vh - 15rem)"
>
<div class="row q-col-gutter-sm">
<div class="col-6">
<div class="row flex-center">
<div>
<q-card class="q-mb-sm" v-if="image !== null">
<q-img
@click="uploadAvatar"
:src="image"
style="height: 250px; width: 450px; cursor: pointer"
></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: 250px;
width: 450px;
border: 2px dashed #5d319e;
border-radius: 4px;
cursor: pointer;
"
>
<div
style="
height: 250px;
width: 450px;
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
@change="selectedFile($event.target.files)"
type="file"
accept="image/png, image/jpeg"
/>
</div>
</div>
</div>
</div>
<div class="col-6">
<q-input
:model-value="name"
@update:model-value="$emit('update:name', $event)"
:label="
$t('configPartner.dialogLabel.configPartnerLabels.name')
"
type="text"
class="q-my-sm"
outlined
:rules="nameRules"
clearable
></q-input>
<q-input
:model-value="numIndex"
@update:model-value="$emit('update:numIndex', $event)"
:label="
$t('configPartner.dialogLabel.configPartnerLabels.numIndex')
"
mask="####"
class="q-my-sm"
outlined
:rules="numIndexRules"
clearable
></q-input>
<!-- <q-select
:model-value="type"
@update:model-value="$emit('update:type', $event)"
:label="$t('banner.dialogLabel.bannerLabels.type')"
:rules="typeRules"
:options="typeOptions"
map-options
option-value="id"
option-label="name"
type="text"
class="q-my-sm"
outlined
></q-select> -->
<!-- <q-select
:model-value="location"
@update:model-value="$emit('update:location', $event)"
:label="$t('banner.dialogLabel.bannerLabels.location')"
:rules="locationRules"
:options="locationOptions"
map-options
type="text"
class="q-my-sm"
outlined
></q-select> -->
<!-- <q-input
:model-value="urlTarget"
@update:model-value="$emit('update:urlTarget', $event)"
:label="$t('banner.dialogLabel.bannerLabels.urlTarget')"
:rules="urlTargetRules"
type="text"
class="q-my-sm"
outlined
clearable
></q-input> -->
<div class="q-pt-sm">
<span class="text-body1">{{
$t('configPartner.dialogLabel.configPartnerLabels.status')
}}</span
><q-toggle
:model-value="status"
:true-value="1"
:false-value="2"
@update:model-value="$emit('update:status', $event)"
/>
</div>
</div>
</div>
</q-card-section>
<q-card-actions align="right">
<div>
<q-btn
color="grey"
no-caps
style="width: 90px"
class="q-mr-sm"
:label="$t('banner.crudActions.cancel')"
@click="$emit('update:isOpened', false)"
/>
<q-btn
type="submit"
color="primary"
no-caps
style="width: 90px"
:label="$t('configPartner.crudActions.save')"
/>
</div>
</q-card-actions>
</q-form>
</q-card>
</q-dialog>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { i18n } from 'src/boot/i18n';
export default defineComponent({
props: {
isOpened: {
type: Boolean,
required: true,
},
isUpdate: { type: Boolean, default: false },
name: { type: String, required: true },
image: { type: String, required: true },
// urlTarget: { type: String, required: true },
status: { type: Number, required: true },
// type: { type: Number, required: true },
// typeOptions: { type: Array, required: true },
numIndex: { type: Number, required: true },
},
setup(_, context) {
const selectedFile = (value: FileList) => {
context.emit('SetAvatar', {
file: value[0],
url: URL.createObjectURL(value[0]),
});
};
const deleteAvatar = () => {
context.emit('deleteAvatar');
};
const upload = ref(null);
const uploadAvatar = () => {
// eslint-disable-next-line
// @ts-ignore
// eslint-disable-next-line
upload.value?.click();
};
// const urlTargetRules = [
// (val?: string) =>
// (val && val.trim().length) ||
// i18n.global.t('banner.validateMessages.requireUrlTarget'),
// ];
const nameRules = [
(val?: string) =>
(val && val.trim().length) ||
i18n.global.t('configPartner.validateMessages.requireName'),
];
// const typeRules = [
// (val?: number) =>
// val !== undefined ||
// i18n.global.t('banner.validateMessages.requireType'),
// ];
const numIndexRules = [
(val?: number) =>
val !== undefined ||
i18n.global.t('configPartner.validateMessages.requireLocation'),
];
return {
// urlTargetRules,
nameRules,
// typeRules,
numIndexRules,
selectedFile,
deleteAvatar,
uploadAvatar,
upload,
};
},
emits: [
'update:isOpened',
'update:name',
// 'update:urlTarget',
// 'update:type',
'update:numIndex',
'update:status',
'update:image',
'SetAvatar',
'deleteAvatar',
'saveConfigPartnerInfo',
],
});
</script>
src/i18n/vi/index.ts
View file @ f9adb60e
......@@ -28,7 +28,7 @@ export default {
emptyData: 'Không có dữ liệu',
crudActions: {
add: 'Thêm',
update: 'Cập nhập',
update: 'Cập nhật',
delete: 'Xoá',
search: 'Tìm kiếm',
details: 'Chi tiết',
......@@ -49,7 +49,7 @@ export default {
actionMessages: {
addNewSuccess: 'Thêm nhóm người dùng thành công',
deleteSuccess: 'Xoá nhóm người dùng thành công',
updateSuccess: 'Cập nhập nhóm người dùng thành công',
updateSuccess: 'Cập nhật nhóm người dùng thành công',
},
fieldLabels: {
......@@ -86,7 +86,7 @@ export default {
dialogLabel: {
title: {
addUser: 'Thêm người dùng',
updateUser: 'Cập nhập người dùng',
updateUser: 'Cập nhật người dùng',
},
fieldLabels: {
userName: 'Tên đăng nhập *',
......@@ -132,11 +132,11 @@ export default {
actionMessages: {
addNewUserAccess: 'Thêm tài khoản thành công',
deleteUserAccess: 'Xoá tài khoản thành công',
updateUserAccess: 'Cập nhập thông tin tài khoản thành công',
updateUserAccess: 'Cập nhật thông tin tài khoản thành công',
resetPasswordAccess: 'Reset mật khẩu thành công',
},
toolTipMessage: {
updateUserInfo: 'Cập nhập',
updateUserInfo: 'Cập nhật',
resetPassword: 'Reset mật khẩu',
deleteUser: 'Xoá',
informationUser: 'Thông tin',
......@@ -163,7 +163,7 @@ export default {
dialogLabel: {
title: {
add: 'Thêm đơn vị chủ quản',
update: 'Cập nhập đơn vị chủ quản',
update: 'Cập nhật đơn vị chủ quản',
},
fieldLabels: {
code: 'Mã đơn vị *',
......@@ -177,7 +177,7 @@ export default {
},
},
toolTipMessage: {
updateInfo: 'Cập nhập',
updateInfo: 'Cập nhật',
information: 'Thông tin',
delete: 'Xóa',
},
......@@ -209,7 +209,7 @@ export default {
addNewManagingUnitsAccess: 'Thêm Đơn vị chủ quản thành công',
deleteManagingUnitsAccess: 'Xoá Đơn vị chủ quản thành công',
updateManagingUnitsAccess:
'Cập nhập thông tin Đơn vị chủ quản thành công',
'Cập nhật thông tin Đơn vị chủ quản thành công',
},
},
......@@ -249,9 +249,9 @@ export default {
dialogLabel: {
title: {
add: 'Thêm nghệ sỹ',
update: 'Cập nhập nghệ sỹ',
update: 'Cập nhật nghệ sỹ',
addBankAccount: 'Thêm ngân hàng thụ hưởng',
updateBankAccount: 'Cập nhập ngân hàng thụ hưởng',
updateBankAccount: 'Cập nhật ngân hàng thụ hưởng',
},
fieldLabels: {
//ds nghệ sỹ
......@@ -269,9 +269,9 @@ export default {
},
},
toolTipMessage: {
updateInfo: 'Cập nhập',
updateInfo: 'Cập nhật',
delete: 'Xóa nghệ sỹ',
updateBankAccount: 'Cập nhập',
updateBankAccount: 'Cập nhật',
deleteBankAccount: 'Xóa ngân hàng',
},
crudActions: {
......@@ -298,7 +298,7 @@ export default {
},
actionMessages: {
unitAddArtistSuccess: 'Thêm hợp đồng nghệ sỹ thành công',
unitUpdateArtistSuccess: 'Cập nhập hợp đồng nghệ sỹ thành công',
unitUpdateArtistSuccess: 'Cập nhật hợp đồng nghệ sỹ thành công',
unitDeleteArtistSuccess: 'Xóa hợp đồng nghệ sỹ thành công',
},
},
......@@ -325,8 +325,8 @@ export default {
dialogLabel: {
title: {
addCustomer: 'Thêm khách hàng',
updateCustomer: 'Cập nhập khách hàng',
editCustomer: 'Cập nhập thông tin khách hàng',
updateCustomer: 'Cập nhật khách hàng',
editCustomer: 'Cập nhật thông tin khách hàng',
},
fieldLabels: {
userName: 'Tên đăng nhập *',
......@@ -346,7 +346,7 @@ export default {
},
},
toolTipMessage: {
updateCustomerInfo: 'Cập nhập',
updateCustomerInfo: 'Cập nhật',
informationCustomer: 'Thông tin',
deleteCustomer: 'Xoá',
},
......@@ -392,7 +392,7 @@ export default {
actionMessages: {
addNewUserAccess: 'Thêm khách hàng thành công',
deleteUserAccess: 'Xoá khách hàng thành công',
updateUserAccess: 'Cập nhập thông tin khách hàng thành công',
updateUserAccess: 'Cập nhật thông tin khách hàng thành công',
resetPasswordAccess: 'Reset mật khẩu thành công',
},
},
......@@ -416,11 +416,11 @@ export default {
addStory: 'Thêm Story',
updateStory: 'Chỉnh sửa Story',
addArtist: 'Thêm nghệ sỹ',
updateArtist: 'Cập nhập nghệ sỹ',
updateArtist: 'Cập nhật nghệ sỹ',
addAccountBank: 'Thêm tài khoản ngân hàng',
editAccountBank: 'Cập nhập tài khoản ngân hàng',
editAccountBank: 'Cập nhật tài khoản ngân hàng',
addHotProduct: 'Thêm sản phẩm nổi bật',
updateHotProduct: 'Cập nhập sản phẩm nổi bật',
updateHotProduct: 'Cập nhật sản phẩm nổi bật',
},
fieldLabels: {
accountOwner: 'Chủ tài khoản',
......@@ -441,11 +441,11 @@ export default {
requireCardType: 'Vui lòng chọn Loại thẻ',
errorIsDefault: 'Nghệ sỹ đã có tài khoản ngân hàng mặc định',
addAccess: 'Thêm tài khoản ngân hàng thành công',
editAccess: 'Cập nhập thông tin tài khoản ngân hàng thành công',
editAccess: 'Cập nhật thông tin tài khoản ngân hàng thành công',
deleteAccess: 'Xoá tài khoản ngân hàng thành công',
deleteStoryAccess: 'Xoá Story thành công',
addHotProductSccess: 'Thêm sản phẩm thành công',
updateHotProductSccess: 'Cập nhập sản phẩm thành công',
updateHotProductSccess: 'Cập nhật sản phẩm thành công',
deleteHotProductSccess: 'Xóa sản phẩm thành công',
},
},
......@@ -458,7 +458,7 @@ export default {
},
actionMessages: {
deleteArtistAccess: 'Xoá nghệ sỹ thành công',
editArtistAccess: 'Cập nhập thông tin nghệ sỹ thành công',
editArtistAccess: 'Cập nhật thông tin nghệ sỹ thành công',
addNewArtistAccess: 'Thêm nghệ sỹ thành công',
EmbedAddSuccess: 'Thêm link Embed thành công',
EmbedUpdateSuccess: 'Thay đổi link Embed thành công',
......@@ -466,7 +466,7 @@ export default {
StoryAddSuccess: 'Thêm Story thành công',
bannerDeleteAccess: 'Xóa banner thành công',
bannerAddAccess: 'Thêm banner thành công',
bannerUpdateAccess: 'Cập nhập banner thành công',
bannerUpdateAccess: 'Cập nhật banner thành công',
},
artistInformation: {
tabLabel: {
......@@ -580,7 +580,7 @@ export default {
uploadBanner: 'Tải lên',
uploadEmbed: 'Tải lên Embed',
uploadStory: 'Tải lên Story',
titleEmbedDialog: 'Cập nhập Link Embed',
titleEmbedDialog: 'Cập nhật Link Embed',
},
//xếp hạng khách hàng
......@@ -601,7 +601,7 @@ export default {
dialogLabel: {
title: {
addCustomerRank: 'Thêm danh mục xếp hạng khách hàng',
updateCustomerRank: 'Cập nhập danh mục xếp hạng khách hàng',
updateCustomerRank: 'Cập nhật danh mục xếp hạng khách hàng',
},
fieldLabels: {
code: 'Mã xếp hạng *',
......@@ -611,7 +611,7 @@ export default {
},
},
toolTipMessage: {
updateCustomerRankInfo: 'Cập nhập',
updateCustomerRankInfo: 'Cập nhật',
deleteCustomerRank: 'Xoá',
},
crudActions: {
......@@ -633,7 +633,7 @@ export default {
addNewCustomerRankAccess: 'Thêm danh mục xếp hạng khách hàng thành công',
deleteCustomerRankAccess: 'Xoá danh mục xếp hạng khách hàng thành công',
updateCustomerRankAccess:
'Cập nhập danh mục xếp hạng khách hàng thành công',
'Cập nhật danh mục xếp hạng khách hàng thành công',
},
},
......@@ -654,7 +654,7 @@ export default {
dialogLabel: {
title: {
addField: 'Thêm lĩnh vực hoạt động',
updateField: 'Cập nhập lĩnh vực hoạt động',
updateField: 'Cập nhật lĩnh vực hoạt động',
},
fieldLabels: {
name: 'Tên lĩnh vực *',
......@@ -663,7 +663,7 @@ export default {
},
},
toolTipMessage: {
updateField: 'Cập nhập',
updateField: 'Cập nhật',
deleteField: 'Xoá',
},
crudActions: {
......@@ -683,7 +683,7 @@ export default {
actionMessages: {
addNewFieldAccess: 'Thêm lĩnh vực hoạt động thành công',
deleteFieldAccess: 'Xoá lĩnh vực hoạt động thành công',
updateFieldAccess: 'Cập nhập lĩnh vực hoạt động thành công',
updateFieldAccess: 'Cập nhật lĩnh vực hoạt động thành công',
},
},
......@@ -698,8 +698,8 @@ export default {
category: 'Danh mục bài viết',
createBy: 'Người thêm',
createTime: 'Thời gian thêm',
updateBy: 'Người cập nhập',
updateTime: 'Thời gian cập nhập',
updateBy: 'Người Cập nhật',
updateTime: 'Thời gian Cập nhật',
status: 'Trạng thái',
action: 'Chức năng',
},
......@@ -710,7 +710,7 @@ export default {
dialogLabel: {
title: {
addPost: 'Thêm bài viết',
updatePost: 'Cập nhập bài viết',
updatePost: 'Cập nhật bài viết',
},
postLabels: {
name: 'Tên bài viết *',
......@@ -721,7 +721,7 @@ export default {
},
},
toolTipMessage: {
updatePost: 'Cập nhập',
updatePost: 'Cập nhật',
deletePost: 'Xoá',
},
crudActions: {
......@@ -742,7 +742,7 @@ export default {
actionMessages: {
addNewPostAccess: 'Thêm bài viết thành công',
deletePostAccess: 'Xoá bài viết thành công',
updatePostAccess: 'Cập nhập bài viết thành công',
updatePostAccess: 'Cập nhật bài viết thành công',
},
},
......@@ -751,7 +751,7 @@ export default {
title: {
postCategory: 'Danh sách danh mục bài viết',
addPost: 'Thêm mới danh mục bài viết',
updatePost: 'Cập nhập danh mục bài viết',
updatePost: 'Cập nhật danh mục bài viết',
listPosts: 'Danh sách bài viết',
listPostsSelected: 'Danh sách bài viết đã chọn',
addPostDialog: 'Thêm bài viết',
......@@ -768,7 +768,7 @@ export default {
stt: 'STT',
name: 'Tên bài viết',
createBy: 'Người sửa gần nhất',
updateTime: 'Thời gian cập nhập gần nhất',
updateTime: 'Thời gian Cập nhật gần nhất',
status: 'Trạng thái',
action: 'Chức năng',
imageMini: 'Ảnh thu nhỏ',
......@@ -783,7 +783,7 @@ export default {
actionMessages: {
addPostCategoryAccess: 'Thêm danh mục bài viết thành công',
deletePostCategoryAccess: 'Xoá danh mục bài viết thành công',
updatePostCategoryAccess: 'Cập nhập danh mục bài viết thành công',
updatePostCategoryAccess: 'Cập nhật danh mục bài viết thành công',
},
confirmActionsTitle: {
confirmDeletePostCategory:
......@@ -798,33 +798,31 @@ export default {
tableColumnsBanner: {
stt: 'STT',
name: 'Tên banner',
type: 'Loại banner',
location: 'Vị trí',
numIndex: 'Vị trí',
image: 'Ảnh',
urlTarget: 'Url targer',
status: 'Trạng thái',
action: 'Chức năng',
},
statusLabel: {
active: 'Đang hoạt động',
inactive: 'Ngừng hoạt động',
active: 'Hiển thị',
inactive: 'Ẩn',
},
dialogLabel: {
title: {
addBanner: 'Thêm banner',
updateBanner: 'Cập nhập banner',
updateBanner: 'Cập nhật banner',
},
bannerLabels: {
name: 'Tên banner *',
type: 'Loại banner *',
location: 'Vị trí *',
bannerType: 'Loại banner *',
numIndex: 'Vị trí *',
image: 'Ảnh',
urlTarget: 'Url target',
urlTarget: 'Path',
status: 'Trạng thái',
},
},
toolTipMessage: {
updateBanner: 'Cập nhập',
updateBanner: 'Cập nhật',
deleteBanner: 'Xoá',
},
crudActions: {
......@@ -832,10 +830,8 @@ export default {
cancel: 'Đóng',
},
validateMessages: {
requireName: 'Vui lòng nhập Tên banner',
requireType: 'Vui lòng chọn Loại banner',
requireLocation: 'Vui lòng chọn Vị trí',
requireUrlTarget: 'Vui lòng nhập Url target',
requireName: 'Vui lòng nhập Tên',
requireLocation: 'Vui lòng nhập Vị trí',
},
confirmActionsTitle: {
confirmDeleteBannerTitle: 'Xác nhận',
......@@ -845,7 +841,59 @@ export default {
actionMessages: {
addNewBannerAccess: 'Thêm banner thành công',
deleteBannerAccess: 'Xoá banner thành công',
updateBannerAccess: 'Cập nhập banner thành công',
updateBannerAccess: 'Cập nhật banner thành công',
},
},
//đối tác truyền thông
configPartner: {
title: 'Đối tác truyền thông',
uploadImg: 'Tải lên ảnh',
tableColumnsConfigPartner: {
name: 'Tên',
numIndex: 'Vị trí',
image: 'Ảnh',
status: 'Trạng thái',
action: 'Chức năng',
},
statusLabel: {
active: 'Hiển thị',
inactive: 'Ẩn',
},
dialogLabel: {
title: {
addConfigPartner: 'Thêm đối tác truyền thông',
updateConfigPartner: 'Cập nhật đối tác truyền thông',
},
configPartnerLabels: {
name: 'Tên *',
numIndex: 'Vị trí *',
image: 'Ảnh',
status: 'Trạng thái',
},
},
toolTipMessage: {
updateConfigPartner: 'Cập nhật',
deleteConfigPartner: 'Xoá',
},
crudActions: {
save: 'Lưu',
cancel: 'Đóng',
},
validateMessages: {
requireName: 'Vui lòng nhập Tên',
requireLocation: 'Vui lòng nhập Vị trí',
},
confirmActionsTitle: {
confirmDeleteConfigPartnerTitle: 'Xác nhận',
confirmDeleteConfigPartnerCancelBtnLabel: 'Huỷ',
confirmDeleteConfigPartnerContent:
'Bạn có chắc chắn muốn xoá Đối tác này không?',
},
actionMessages: {
addNewConfigPartnerAccess: 'Thêm Đối tác thành công',
deleteConfigPartnerAccess: 'Xoá Đối tác thành công',
updateConfigPartnerAccess: 'Cập nhật Đối tác thành công',
},
},
......@@ -873,10 +921,10 @@ export default {
},
dialogLabel: {
title: {
updateInfoVAB: 'Cập nhập thông tin',
updateInfoVAB: 'Cập nhật thông tin',
//ngân hàng
addBankAccount: 'Thêm ngân hàng thụ hưởng',
updateBankAccount: 'Cập nhập ngân hàng thụ hưởng',
updateBankAccount: 'Cập nhật ngân hàng thụ hưởng',
},
infoVABLabels: {
comName: 'Tên công ty *',
......@@ -898,10 +946,10 @@ export default {
},
},
toolTipMessage: {
updateInfoVAB: 'Cập nhập',
updateInfoVAB: 'Cập nhật',
deleteInfoVAB: 'Xoá',
//ngân hàng
updateBankAccount: 'Cập nhập',
updateBankAccount: 'Cập nhật',
deleteBankAccount: 'Xóa ngân hàng',
},
crudActions: {
......@@ -929,7 +977,7 @@ export default {
},
actionMessages: {
deleteInfoVABAccess: 'Xoá thông tin thành công',
updateInfoVABAccess: 'Cập nhập thông tin thành công',
updateInfoVABAccess: 'Cập nhật thông tin thành công',
},
},
......@@ -977,8 +1025,8 @@ export default {
status: 'Trạng thái',
createTime: 'Thời gian tạo',
createBy: 'Người tạo',
updateBy: 'Người cập nhập',
updateTime: 'Thời gian cập nhập',
updateBy: 'Người Cập nhật',
updateTime: 'Thời gian Cập nhật',
action: 'Chức năng',
},
statusLabel: {
......@@ -990,7 +1038,7 @@ export default {
//Cấu hình trang tĩnh
listConfigSystem: {
add: 'Thêm',
toolTipMessageUpdate: 'Cập nhập',
toolTipMessageUpdate: 'Cập nhật',
toolTipMessageDelete: 'Xóa',
title: 'Cấu hình Trang tĩnh',
titleColumnsTable: {
......@@ -1004,7 +1052,7 @@ export default {
},
dialogLabel: {
titleAdd: 'Thêm Cấu hình',
titleUpdate: 'Cập nhập Cấu hình',
titleUpdate: 'Cập nhật Cấu hình',
fieldLabels: {
namePage: 'Tên cấu hình *',
nameMenu: 'Loại menu *',
......@@ -1033,7 +1081,7 @@ export default {
},
actionMessages: {
addSuccess: 'Thêm Cấu hình thành công',
updateSuccess: 'Cập nhập Cấu hình thành công',
updateSuccess: 'Cập nhật Cấu hình thành công',
deleteSuccess: 'Xóa Cấu hình thành công',
},
},
......@@ -1041,7 +1089,7 @@ export default {
//Cấu hình tin tức
listNews: {
add: 'Thêm',
toolTipMessageUpdate: 'Cập nhập',
toolTipMessageUpdate: 'Cập nhật',
toolTipMessageDelete: 'Xóa',
title: 'Cấu hình Tin tức',
titleColumnsTable: {
......@@ -1053,13 +1101,13 @@ export default {
urlTarget: 'Url target',
createTime: 'Người tạo',
createBy: 'T.G tạo',
updateTime: 'Người cập nhập',
updateBy: 'T.G cập nhập',
updateTime: 'Người Cập nhật',
updateBy: 'T.G Cập nhật',
status: 'Trạng thái',
action: 'Chức năng',
},
dialogLabel: {
titleUpdate: 'Cập nhập Tin tức',
titleUpdate: 'Cập nhật Tin tức',
titleAdd: 'Thêm Tin tức',
fieldLabels: {
avatar: 'Ảnh tin tức',
......@@ -1084,7 +1132,7 @@ export default {
},
actionMessages: {
addSuccess: 'Thêm Tin tức thành công',
updateSuccess: 'Cập nhập Tin tức thành công',
updateSuccess: 'Cập nhật Tin tức thành công',
deleteSuccess: 'Xóa Tin tức thành công',
},
},
......@@ -1092,7 +1140,7 @@ export default {
//Cấu hình SP nổi bật
listHotProduct: {
add: 'Thêm',
toolTipMessageUpdate: 'Cập nhập',
toolTipMessageUpdate: 'Cập nhật',
toolTipMessageDelete: 'Xóa',
title: 'Cấu hình Sản phẩm nổi bật',
titleColumnsTable: {
......@@ -1104,13 +1152,13 @@ export default {
urlTarget: 'Url target',
createTime: 'Người tạo',
createBy: 'T.G tạo',
updateTime: 'Người cập nhập',
updateBy: 'T.G cập nhập',
updateTime: 'Người Cập nhật',
updateBy: 'T.G Cập nhật',
status: 'Trạng thái',
action: 'Chức năng',
},
dialogLabel: {
titleUpdate: 'Cập nhập Sản phẩm nổi bật',
titleUpdate: 'Cập nhật Sản phẩm nổi bật',
titleAdd: 'Thêm Sản phẩm nổi bật',
fieldLabels: {
avatar: 'Ảnh sản phẩm',
......@@ -1135,7 +1183,7 @@ export default {
},
actionMessages: {
addSuccess: 'Thêm Sản phẩm nổi bật thành công',
updateSuccess: 'Cập nhập Sản phẩm nổi bật thành công',
updateSuccess: 'Cập nhật Sản phẩm nổi bật thành công',
deleteSuccess: 'Xóa Sản phẩm nổi bật thành công',
},
},
......@@ -1143,7 +1191,7 @@ export default {
//Cấu hình menu
listMenu: {
add: 'Thêm',
toolTipMessageUpdate: 'Cập nhập',
toolTipMessageUpdate: 'Cập nhật',
toolTipMessageDelete: 'Xóa',
title: 'Danh sách Menu',
titleColumnsTable: {
......@@ -1153,13 +1201,13 @@ export default {
// numIndex: 'Vị trí',
// createTime: 'Người tạo',
// createBy: 'Thời gian tạo',
// updateTime: 'Người cập nhập',
// updateBy: 'Thời gian cập nhập',
// updateTime: 'Người Cập nhật',
// updateBy: 'Thời gian Cập nhật',
status: 'Trạng thái',
action: 'Chức năng',
},
dialogLabel: {
titleUpdate: 'Cập nhập Menu',
titleUpdate: 'Cập nhật Menu',
titleAdd: 'Thêm Menu',
fieldLabels: {
name: 'Tên menu',
......@@ -1187,7 +1235,7 @@ export default {
},
actionMessages: {
addSuccess: 'Thêm Menu thành công',
updateSuccess: 'Cập nhập Menu thành công',
updateSuccess: 'Cập nhật Menu thành công',
deleteSuccess: 'Xóa Menu thành công',
},
},
......
src/pages/banner/index.vue
View file @ f9adb60e
......@@ -11,7 +11,7 @@
type="text"
dense
outlined
label="Tên banner"
label="Tên"
clearable
></q-input>
</div>
......@@ -42,19 +42,33 @@
row-key="bannerName"
separator="cell"
:no-data-label="$t('emptyData')"
:rows-per-page-label="$t('recordPerPage')"
:pagination="{
rowsPerPage: 0,
}"
hide-pagination
class="sticky-header-table"
>
<template v-slot:body-cell-action="">
<q-td style="padding: 0" class="flex flex-center">
<q-btn flat round color="primary" icon="mdi-account-edit-outline">
<!-- @click="openUpdateFieldDialog(item.row.id)" -->
<template v-slot:body-cell-action="item">
<q-td style="padding: 0; text-align: center">
<q-btn
flat
round
color="primary"
icon="mdi-account-edit-outline"
@click="openUpdateBannerDialog(item.row.id)"
>
<q-tooltip :offset="[20, 10]">{{
$t('banner.toolTipMessage.updateBanner')
}}</q-tooltip>
</q-btn>
<q-btn flat round color="primary" icon="mdi-delete-outline">
<!-- @click="confirmDeleteField(item.row.id)" -->
<q-btn
flat
round
color="primary"
icon="mdi-delete-outline"
@click="confirmDeleteBanner(item.row.id)"
>
<q-tooltip :offset="[20, 10]">{{
$t('banner.toolTipMessage.deleteBanner')
}}</q-tooltip>
......@@ -81,11 +95,9 @@
</q-td>
</template>
<template v-slot:body-cell-image="image">
<q-td style="padding: auto; height: 100%" class="flex flex-center">
<q-td style="padding: auto; height: 100%; text-align: center">
<q-img
style="width: 9rem"
fit="contain"
:ratio="16 / 9"
style="width: 18rem; height: 6rem"
:src="configImg.API_IMAGE_ENDPOINT + image.row.image"
></q-img>
</q-td>
......@@ -93,16 +105,22 @@
</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="getListBanner"
/>
</div>
<AddUpdateBannerDialog
v-model:isOpened="addBannerDialogIsOpened"
v-model:name="name"
v-model:image="image"
v-model:urlTarget="urlTarget"
v-model:location="location"
v-model:type="type"
v-model:numIndex="numIndex"
v-model:status="status"
:typeOptions="typeOptions"
:locationOptions="locationOptions"
@SetAvatar="setAvatar($event)"
@deleteAvatar="deleteAvatar"
isUpdate
......@@ -113,15 +131,11 @@
v-model:isOpened="updateBannerDialogIsOpened"
v-model:name="name"
v-model:image="image"
v-model:urlTarget="urlTarget"
v-model:location="location"
v-model:type="type"
v-model:numIndex="numIndex"
v-model:status="status"
:typeOptions="typeOptions"
:locationOptions="locationOptions"
@SetAvatar="setAvatar($event)"
@deleteAvatar="deleteAvatar"
@saveUpdateInfo="updateBanner"
@saveBannerInfo="updateBanner"
/>
</div>
</template>
......@@ -130,12 +144,20 @@
import { i18n } from 'src/boot/i18n';
import { defineComponent, onMounted, ref, Ref } from 'vue';
import { AxiosResponse } from 'axios';
import Pagination from 'components/pagination/index.vue';
import { api, BaseResponseBody } from 'src/boot/axios';
import { FileUploadType } from 'src/assets/type';
import { config } from 'src/assets/configurations';
import {
PaginationResponse,
FileUploadType,
ListBannerConfig,
DetailBannerConfig,
UpdateBannerConfig,
AddBannerConfig,
} from 'src/assets/type';
import { config, API_PATHS } from 'src/assets/configurations';
import { BannerStatus } from 'src/assets/enums';
import AddUpdateBannerDialog from 'components/add-update-banner/index.vue';
import { Dialog } from 'quasar';
import { Dialog, Notify } from 'quasar';
export type AvatarType = {
file?: File;
......@@ -144,18 +166,11 @@ export type AvatarType = {
export default defineComponent({
components: {
Pagination,
AddUpdateBannerDialog,
},
setup() {
const bannerTableColumns = [
// {
// name: 'index',
// field: 'index',
// required: true,
// label: 'STT',
// align: 'center',
// sortable: false,
// },
{
name: 'name',
field: 'name',
......@@ -165,24 +180,6 @@ export default defineComponent({
align: 'left',
sortable: false,
},
{
name: 'type',
field: 'type',
required: true,
label: i18n.global.t('banner.tableColumnsBanner.type'),
headerStyle: 'text-align: center !important;',
align: 'left',
sortable: false,
},
{
name: 'location',
field: 'location',
required: true,
label: i18n.global.t('banner.tableColumnsBanner.location'),
headerStyle: 'text-align: center !important;',
align: 'left',
sortable: false,
},
{
name: 'image',
field: 'image',
......@@ -193,12 +190,12 @@ export default defineComponent({
sortable: false,
},
{
name: 'urlTarget',
field: 'urlTarget',
name: 'numIndex',
field: 'numIndex',
required: true,
label: i18n.global.t('banner.tableColumnsBanner.urlTarget'),
label: i18n.global.t('banner.tableColumnsBanner.numIndex'),
headerStyle: 'text-align: center !important;',
align: 'left',
align: 'center',
sortable: false,
},
{
......@@ -221,37 +218,46 @@ export default defineComponent({
},
];
const pageIndex = ref(1);
const pageSize = ref(20);
const totalPage = ref(1);
const changePageSize = () => {
pageIndex.value = 1;
void getListBanner();
};
const bannerTableRows: Ref<unknown[]> = ref([]);
const addBannerDialogIsOpened = ref(false);
const updateBannerDialogIsOpened = ref(false);
const name = ref('');
const urlTarget = ref('');
const image: Ref<string | null> = ref(null);
const type: Ref<number | undefined> = ref(undefined);
const location: Ref<number | undefined> = ref(undefined);
const typeOptions: Ref<unknown[]> = ref([]);
const locationOptions: Ref<unknown[]> = ref([]);
const numIndex: Ref<number | undefined> = ref(undefined);
const status: Ref<number> = ref(BannerStatus.active);
// const bannerId: Ref<number | undefined> = ref(undefined);
const bannerId: Ref<number | undefined> = ref(undefined);
const nameBanner = ref('');
const avatarFile: Ref<File | null> = ref(null);
const avatarUploaded: Ref<string> = ref('');
const imageChange: Ref<string> = ref('');
//gọi api ds
const getListBanner = 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 response = (await api({
url: API_PATHS.getListBanner,
method: 'GET',
params: {
pageIndex: pageIndex.value,
pageSize: pageSize.value,
name: nameBanner.value,
},
})) as AxiosResponse<
BaseResponseBody<PaginationResponse<ListBannerConfig[]>>
>;
if (response.data.error.code === config.API_RES_CODE.OK.code) {
bannerTableRows.value = response.data.data.data;
totalPage.value = response.data.data.totalPages;
}
};
const confirmDeleteBanner = () => {
const confirmDeleteBanner = (id: number) => {
Dialog.create({
title: i18n.global.t(
'banner.confirmActionsTitle.confirmDeleteBannerTitle'
......@@ -264,102 +270,123 @@ export default defineComponent({
),
color: 'negative',
}).onOk(() => {
void deleteBanner();
void deleteBanner(id);
});
};
//gói api xóa
const deleteBanner = async () => {
// try {
// const deleteResult = (await api({
// url: API_PATHS.deleteBanner,
// method: 'GET',
// params: {
// id: id,
// },
// })) as AxiosResponse<BaseResponseBody<unknown>>;
// if (deleteResult.data.error.code === config.API_RES_CODE.OK.code) {
// Notify.create({
// type: 'positive',
// message: i18n.global.t('banner.actionMessages.deleteBannerAccess'),
// });
// void getListBanner();
// }
// } catch (error) {}
const deleteBanner = async (id: number) => {
try {
const deleteResult = (await api({
url: API_PATHS.deleteBanner,
method: 'GET',
params: {
id: id,
},
})) as AxiosResponse<BaseResponseBody<unknown>>;
if (deleteResult.data.error.code === config.API_RES_CODE.OK.code) {
Notify.create({
type: 'positive',
message: i18n.global.t('banner.actionMessages.deleteBannerAccess'),
});
void getListBanner();
}
} catch (error) {}
};
const openAddBannerDialog = () => {
name.value = '';
numIndex.value = undefined;
image.value = null;
status.value = BannerStatus.active;
addBannerDialogIsOpened.value = true;
};
//gọi api add
const addBanner = async () => {
// const data = {
// name: name.value,
// status: status.value,
// };
// const response = (await api({
// url: API_PATHS.addBanner,
// method: 'POST',
// data,
// })) as AxiosResponse<BaseResponseBody<AddBannerType[]>>;
// if (response.data.error.code === config.API_RES_CODE.OK.code) {
// addBannerDialogIsOpened.value = false;
// Notify.create({
// type: 'positive',
// message: i18n.global.t('banner.actionMessages.addNewBannerAccess'),
// actions: [{ icon: 'close', color: 'white' }],
// });
// void getListBanner();
// }
avatarUploaded.value = await callApiUploadAvatar(
avatarFile.value as File
);
const data = {
name: name.value,
image: avatarUploaded.value,
numIndex: numIndex.value,
status: status.value,
};
const response = (await api({
url: API_PATHS.addBanner,
method: 'POST',
data,
})) as AxiosResponse<BaseResponseBody<AddBannerConfig[]>>;
if (response.data.error.code === config.API_RES_CODE.OK.code) {
addBannerDialogIsOpened.value = false;
Notify.create({
type: 'positive',
message: i18n.global.t('banner.actionMessages.addNewBannerAccess'),
actions: [{ icon: 'close', color: 'white' }],
});
void getListBanner();
}
};
const openUpdateBannerDialog = () => {
void getDetailBanner();
const openUpdateBannerDialog = (id: number) => {
void getDetailBanner(id);
updateBannerDialogIsOpened.value = true;
};
//gọi api detail
const getDetailBanner = 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 getDetailBanner = async (id: number) => {
try {
const response = (await api({
url: API_PATHS.getDetailBanner,
method: 'GET',
params: {
id: id,
},
})) as AxiosResponse<BaseResponseBody<DetailBannerConfig>>;
if (response.data.error.code === config.API_RES_CODE.OK.code) {
bannerId.value = response.data.data.id;
name.value = response.data.data.name;
numIndex.value = response.data.data.numIndex;
status.value = response.data.data.status;
image.value = config.API_IMAGE_ENDPOINT + response.data.data.image;
imageChange.value = response.data.data.image;
}
} catch (error) {}
};
//gọi api update
const updateBanner = 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 confirmUpdate(avatarUploaded.value);
} else {
void confirmUpdate(imageChange.value);
}
};
const confirmUpdate = async (image: string) => {
const data = {
id: bannerId.value,
name: name.value,
numIndex: numIndex.value,
status: status.value,
image,
};
const response = (await api({
url: API_PATHS.updateBanner,
method: 'POST',
data,
})) as AxiosResponse<BaseResponseBody<UpdateBannerConfig[]>>;
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();
}
};
const setAvatar = (value: { file?: File; url?: string }) => {
......@@ -401,6 +428,10 @@ export default defineComponent({
bannerTableColumns,
bannerTableRows,
getListBanner,
pageIndex,
pageSize,
totalPage,
changePageSize,
BannerStatus,
openAddBannerDialog,
name,
......@@ -412,17 +443,15 @@ export default defineComponent({
getDetailBanner,
updateBanner,
nameBanner,
urlTarget,
image,
type,
location,
typeOptions,
locationOptions,
numIndex,
setAvatar,
callApiUploadAvatar,
deleteAvatar,
configImg,
avatarUploaded,
bannerId,
confirmUpdate,
};
},
});
......
src/pages/cau-hinh-doi-tac-truyen-thong/index.vue 0 → 100644
View file @ f9adb60e
<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') }}
<q-separator vertical spaced />
</div>
<q-space></q-space>
<div class="col-2">
<q-input
v-model="nameConfigPartner"
type="text"
dense
outlined
label="Tên"
clearable
></q-input>
</div>
<div class="col-auto">
<q-btn
color="primary"
no-caps
:label="$t('crudActions.search')"
@click="getListConfigPartner"
style="width: 7.14rem"
></q-btn>
</div>
<div class="col-auto">
<q-btn
color="primary"
no-caps
:label="$t('crudActions.add')"
style="width: 7.14rem"
@click="openAddConfigPartnerDialog"
>
</q-btn>
</div>
<div class="col-12 q-mt-sm">
<q-table
:rows="configPartnerTableRows"
:columns="configPartnerTableColumns"
row-key="bannerName"
separator="cell"
:no-data-label="$t('emptyData')"
:rows-per-page-label="$t('recordPerPage')"
:pagination="{
rowsPerPage: 0,
}"
hide-pagination
class="sticky-header-table"
>
<template v-slot:body-cell-action="item">
<q-td style="padding: 0; text-align: center">
<q-btn
flat
round
color="primary"
icon="mdi-account-edit-outline"
@click="openUpdateConfigPartnerDialog(item.row.id)"
>
<q-tooltip :offset="[20, 10]">{{
$t('configPartner.toolTipMessage.updateConfigPartner')
}}</q-tooltip>
</q-btn>
<q-btn
flat
round
color="primary"
icon="mdi-delete-outline"
@click="confirmDeleteConfigPartner(item.row.id)"
>
<q-tooltip :offset="[20, 10]">{{
$t('configPartner.toolTipMessage.deleteConfigPartner')
}}</q-tooltip>
</q-btn>
</q-td>
</template>
<template v-slot:body-cell-status="rowData">
<q-td>
<div align="center">
<q-chip
:color="
rowData.value === BannerStatus.active ? 'positive' : 'orange'
"
text-color="white"
size="sm"
>
{{
rowData.value === BannerStatus.active
? $t('configPartner.statusLabel.active')
: $t('configPartner.statusLabel.inactive')
}}
</q-chip>
</div>
</q-td>
</template>
<template v-slot:body-cell-image="image">
<q-td style="padding: auto; height: 100%; text-align: center">
<q-img
style="width: 12rem; height: 8rem"
:src="configImg.API_IMAGE_ENDPOINT + image.row.image"
></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="getListConfigPartner"
/>
</div>
<AddUpdateConfigPartnerDialog
v-model:isOpened="addConfigPartnerDialogIsOpened"
v-model:name="name"
v-model:image="image"
v-model:numIndex="numIndex"
v-model:status="status"
@SetAvatar="setAvatar($event)"
@deleteAvatar="deleteAvatar"
isUpdate
@saveConfigPartnerInfo="addConfigPartner"
/>
<AddUpdateConfigPartnerDialog
v-model:isOpened="updateConfigPartnerDialogIsOpened"
v-model:name="name"
v-model:image="image"
v-model:numIndex="numIndex"
v-model:status="status"
@SetAvatar="setAvatar($event)"
@deleteAvatar="deleteAvatar"
@saveConfigPartnerInfo="updateConfigPartner"
/>
</div>
</template>
<script lang="ts">
import { i18n } from 'src/boot/i18n';
import { defineComponent, onMounted, ref, Ref } from 'vue';
import { AxiosResponse } from 'axios';
import Pagination from 'components/pagination/index.vue';
import { api, BaseResponseBody } from 'src/boot/axios';
import {
PaginationResponse,
FileUploadType,
ListConfigPartner,
DetailConfigPartner,
updateConfigPartnerConfig,
addConfigPartnerConfig,
} from 'src/assets/type';
import { config, API_PATHS } from 'src/assets/configurations';
import { BannerStatus } from 'src/assets/enums';
import AddUpdateConfigPartnerDialog from 'components/add-update-cau-hinh-doi-tac-truyen-thong/index.vue';
import { Dialog, Notify } from 'quasar';
export type AvatarType = {
file?: File;
url?: string | null;
};
export default defineComponent({
components: {
Pagination,
AddUpdateConfigPartnerDialog,
},
setup() {
const configPartnerTableColumns = [
{
name: 'name',
field: 'name',
required: true,
label: i18n.global.t('configPartner.tableColumnsConfigPartner.name'),
headerStyle: 'text-align: center !important;',
align: 'left',
sortable: false,
},
{
name: 'image',
field: 'image',
required: true,
label: i18n.global.t('configPartner.tableColumnsConfigPartner.image'),
headerStyle: 'text-align: center !important;',
align: 'center',
sortable: false,
},
{
name: 'numIndex',
field: 'numIndex',
required: true,
label: i18n.global.t(
'configPartner.tableColumnsConfigPartner.numIndex'
),
headerStyle: 'text-align: center !important;',
align: 'center',
sortable: false,
},
{
name: 'status',
field: 'status',
required: true,
label: i18n.global.t('configPartner.tableColumnsConfigPartner.status'),
headerStyle: 'text-align: center !important;',
align: 'center',
sortable: false,
},
{
name: 'action',
field: 'action',
required: true,
label: i18n.global.t('configPartner.tableColumnsConfigPartner.action'),
headerStyle: 'text-align: center !important;',
align: 'center',
sortable: false,
},
];
const pageIndex = ref(1);
const pageSize = ref(20);
const totalPage = ref(1);
const changePageSize = () => {
pageIndex.value = 1;
void getListConfigPartner();
};
const configPartnerTableRows: Ref<unknown[]> = ref([]);
const addConfigPartnerDialogIsOpened = ref(false);
const updateConfigPartnerDialogIsOpened = ref(false);
const name = ref('');
const image: Ref<string | null> = ref(null);
const numIndex: Ref<number | undefined> = ref(undefined);
const status: Ref<number> = ref(BannerStatus.active);
const configPartnerId: Ref<number | undefined> = ref(undefined);
const nameConfigPartner = ref('');
const avatarFile: Ref<File | null> = ref(null);
const avatarUploaded: Ref<string> = ref('');
const imageChange: Ref<string> = ref('');
//gọi api ds
const getListConfigPartner = async () => {
const response = (await api({
url: API_PATHS.getListConfigPartner,
method: 'GET',
params: {
pageIndex: pageIndex.value,
pageSize: pageSize.value,
name: nameConfigPartner.value,
},
})) as AxiosResponse<
BaseResponseBody<PaginationResponse<ListConfigPartner[]>>
>;
if (response.data.error.code === config.API_RES_CODE.OK.code) {
configPartnerTableRows.value = response.data.data.data;
totalPage.value = response.data.data.totalPages;
}
};
const confirmDeleteConfigPartner = (id: number) => {
Dialog.create({
title: i18n.global.t(
'configPartner.confirmActionsTitle.confirmDeleteConfigPartnerTitle'
),
message: i18n.global.t(
'configPartner.confirmActionsTitle.confirmDeleteConfigPartnerContent'
),
cancel: i18n.global.t(
'configPartner.confirmActionsTitle.confirmDeleteConfigPartnerCancelBtnLabel'
),
color: 'negative',
}).onOk(() => {
void deleteConfigPartner(id);
});
};
//gói api xóa
const deleteConfigPartner = async (id: number) => {
try {
const deleteResult = (await api({
url: API_PATHS.deleteConfigPartner,
method: 'GET',
params: {
id: id,
},
})) as AxiosResponse<BaseResponseBody<unknown>>;
if (deleteResult.data.error.code === config.API_RES_CODE.OK.code) {
Notify.create({
type: 'positive',
message: i18n.global.t(
'configPartner.actionMessages.deleteConfigPartnerAccess'
),
});
void getListConfigPartner();
}
} catch (error) {}
};
const openAddConfigPartnerDialog = () => {
name.value = '';
numIndex.value = undefined;
image.value = null;
status.value = BannerStatus.active;
addConfigPartnerDialogIsOpened.value = true;
};
//gọi api add
const addConfigPartner = async () => {
avatarUploaded.value = await callApiUploadAvatar(
avatarFile.value as File
);
const data = {
name: name.value,
image: avatarUploaded.value,
numIndex: numIndex.value,
status: status.value,
};
const response = (await api({
url: API_PATHS.addConfigPartner,
method: 'POST',
data,
})) as AxiosResponse<BaseResponseBody<addConfigPartnerConfig[]>>;
if (response.data.error.code === config.API_RES_CODE.OK.code) {
addConfigPartnerDialogIsOpened.value = false;
Notify.create({
type: 'positive',
message: i18n.global.t(
'configPartner.actionMessages.addNewBannerAccess'
),
actions: [{ icon: 'close', color: 'white' }],
});
void getListConfigPartner();
}
};
const openUpdateConfigPartnerDialog = (id: number) => {
void getDetailConfigPartner(id);
updateConfigPartnerDialogIsOpened.value = true;
};
//gọi api detail
const getDetailConfigPartner = async (id: number) => {
try {
const response = (await api({
url: API_PATHS.getDetailConfigPartner,
method: 'GET',
params: {
id: id,
},
})) as AxiosResponse<BaseResponseBody<DetailConfigPartner>>;
if (response.data.error.code === config.API_RES_CODE.OK.code) {
configPartnerId.value = response.data.data.id;
name.value = response.data.data.name;
numIndex.value = response.data.data.numIndex;
status.value = response.data.data.status;
image.value = config.API_IMAGE_ENDPOINT + response.data.data.image;
imageChange.value = response.data.data.image;
}
} catch (error) {}
};
//gọi api update
const updateConfigPartner = async () => {
if (avatarFile.value) {
avatarUploaded.value = await callApiUploadAvatar(avatarFile.value);
void confirmUpdate(avatarUploaded.value);
} else {
void confirmUpdate(imageChange.value);
}
};
const confirmUpdate = async (image: string) => {
const data = {
id: configPartnerId.value,
name: name.value,
numIndex: numIndex.value,
status: status.value,
image,
};
const response = (await api({
url: API_PATHS.updateConfigPartner,
method: 'POST',
data,
})) as AxiosResponse<BaseResponseBody<updateConfigPartnerConfig[]>>;
if (response.data.error.code === config.API_RES_CODE.OK.code) {
updateConfigPartnerDialogIsOpened.value = false;
Notify.create({
type: 'positive',
message: i18n.global.t(
'configPartner.actionMessages.updateConfigPartnerAccess'
),
actions: [{ icon: 'close', color: 'white' }],
});
void getListConfigPartner();
}
};
const setAvatar = (value: { file?: File; url?: string }) => {
avatarFile.value = value.file as File;
image.value = value.url as string;
};
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: 'http://cms.vab.xteldev.com/file/upload/',
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 '';
}
};
const deleteAvatar = () => {
image.value = null;
};
const configImg = config;
onMounted(() => {
void getListConfigPartner();
});
return {
addConfigPartnerDialogIsOpened,
updateConfigPartnerDialogIsOpened,
configPartnerTableColumns,
configPartnerTableRows,
getListConfigPartner,
pageIndex,
pageSize,
totalPage,
changePageSize,
BannerStatus,
openAddConfigPartnerDialog,
name,
status,
addConfigPartner,
confirmDeleteConfigPartner,
deleteConfigPartner,
openUpdateConfigPartnerDialog,
getDetailConfigPartner,
updateConfigPartner,
nameConfigPartner,
image,
numIndex,
setAvatar,
callApiUploadAvatar,
deleteAvatar,
configImg,
avatarUploaded,
configPartnerId,
confirmUpdate,
};
},
});
</script>
src/router/routes.ts
View file @ f9adb60e
......@@ -22,6 +22,7 @@ export enum Pages {
configSystem = 'cau-hinh-trang-tinh',
news = 'cau-hinh-tin-tuc',
hotProduct = 'cau-hinh-san-pham-noi-bat',
configPartner = 'cau-hinh-doi-tac-truyen-thong',
}
const routes: RouteRecordRaw[] = [
......@@ -134,6 +135,12 @@ const routes: RouteRecordRaw[] = [
component: () => import('pages/cau-hinh-san-pham-noi-bat/index.vue'),
name: Pages.hotProduct,
},
{
path: 'cau-hinh-doi-tac-truyen-thong',
component: () =>
import('pages/cau-hinh-doi-tac-truyen-thong/index.vue'),
name: Pages.configPartner,
},
],
},
......
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