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
Expand all Hide 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 { ...@@ -97,4 +97,14 @@ export enum API_PATHS {
getDetailInfoVAB = 'information/detail', getDetailInfoVAB = 'information/detail',
updateInfoVAB = 'information/update', updateInfoVAB = 'information/update',
getListVABInfo = 'information', 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 = { ...@@ -565,3 +565,105 @@ export type UpdateVABInfoType = {
twtLink: string; twtLink: string;
fbLink: 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 @@ ...@@ -4,7 +4,7 @@
:model-value="isOpened" :model-value="isOpened"
@update:model-value="$emit('update:isOpened', $event)" @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 <q-form
greedy greedy
@submit.prevent=" @submit.prevent="
...@@ -27,53 +27,69 @@ ...@@ -27,53 +27,69 @@
<q-card-section <q-card-section
class="overflow-auto" class="overflow-auto"
style="max-height: calc(100vh - 10rem)" style="max-height: calc(100vh - 15rem)"
> >
<div class="row q-col-gutter-sm"> <div class="row q-col-gutter-sm">
<div class="col-6"> <div class="col-6">
<div class="row flex-center q-pt-sm"> <div class="row flex-center">
<div> <div>
<q-card style="margin-bottom: 8px" v-if="image !== null"> <q-card class="q-mb-sm" v-if="image !== null">
<q-img <q-img
:src="image"
style="height: 268px; width: 350px"
@click="uploadAvatar" @click="uploadAvatar"
> :src="image"
</q-img> style="height: 250px; width: 450px; cursor: pointer"
></q-img>
<q-icon <q-icon
name="mdi-close-circle" name="mdi-close-circle"
color="red" color="red"
style="position: absolute; right: 0; font-size: 18px" style="
position: absolute;
right: 0;
font-size: 18px;
cursor: pointer;
"
@click="deleteAvatar" @click="deleteAvatar"
></q-icon> ></q-icon>
</q-card> </q-card>
<q-card v-else style="margin-bottom: 8px"> <div
<q-img @click="uploadAvatar"
src="~/assets/noavatar.png" v-else
style="height: 265px; width: 350px" class="q-mb-sm"
></q-img> style="
</q-card> height: 250px;
width: 450px;
<q-card @click="uploadAvatar"> border: 2px dashed #5d319e;
<div align="center" class="flex flex-center q-py-xs"> border-radius: 4px;
cursor: pointer;
"
>
<div
style="
height: 250px;
width: 450px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
"
>
<q-icon <q-icon
style="color: #5d319e" style="color: #5d319e"
name="mdi-plus-circle-outline" name="mdi-cloud-upload"
:size="'xs'" size="xl"
></q-icon> ></q-icon>
<div class="q-mt-xs"> Tải ảnh lên
{{ $t('banner.uploadImg') }}
</div>
</div> </div>
</div>
<div>
<input <input
ref="upload" ref="upload"
hidden hidden
type="file"
@change="selectedFile($event.target.files)" @change="selectedFile($event.target.files)"
type="file"
accept="image/png, image/jpeg" accept="image/png, image/jpeg"
/> />
</q-card> </div>
</div> </div>
</div> </div>
</div> </div>
...@@ -88,7 +104,17 @@ ...@@ -88,7 +104,17 @@
:rules="nameRules" :rules="nameRules"
clearable clearable
></q-input> ></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" :model-value="type"
@update:model-value="$emit('update:type', $event)" @update:model-value="$emit('update:type', $event)"
:label="$t('banner.dialogLabel.bannerLabels.type')" :label="$t('banner.dialogLabel.bannerLabels.type')"
...@@ -100,21 +126,19 @@ ...@@ -100,21 +126,19 @@
type="text" type="text"
class="q-my-sm" class="q-my-sm"
outlined outlined
></q-select> ></q-select> -->
<q-select <!-- <q-select
:model-value="location" :model-value="location"
@update:model-value="$emit('update:location', $event)" @update:model-value="$emit('update:location', $event)"
:label="$t('banner.dialogLabel.bannerLabels.location')" :label="$t('banner.dialogLabel.bannerLabels.location')"
:rules="locationRules" :rules="locationRules"
:options="locationOptions" :options="locationOptions"
map-options map-options
option-value="id"
option-label="name"
type="text" type="text"
class="q-my-sm" class="q-my-sm"
outlined outlined
></q-select> ></q-select> -->
<q-input <!-- <q-input
:model-value="urlTarget" :model-value="urlTarget"
@update:model-value="$emit('update:urlTarget', $event)" @update:model-value="$emit('update:urlTarget', $event)"
:label="$t('banner.dialogLabel.bannerLabels.urlTarget')" :label="$t('banner.dialogLabel.bannerLabels.urlTarget')"
...@@ -123,7 +147,7 @@ ...@@ -123,7 +147,7 @@
class="q-my-sm" class="q-my-sm"
outlined outlined
clearable clearable
></q-input> ></q-input> -->
<div class="q-pt-sm"> <div class="q-pt-sm">
<span class="text-body1">{{ <span class="text-body1">{{
$t('banner.dialogLabel.bannerLabels.status') $t('banner.dialogLabel.bannerLabels.status')
...@@ -175,12 +199,11 @@ export default defineComponent({ ...@@ -175,12 +199,11 @@ export default defineComponent({
isUpdate: { type: Boolean, default: false }, isUpdate: { type: Boolean, default: false },
name: { type: String, required: true }, name: { type: String, required: true },
image: { type: String, required: true }, image: { type: String, required: true },
urlTarget: { type: String, required: true }, // urlTarget: { type: String, required: true },
status: { type: Number, required: true }, status: { type: Number, required: true },
type: { type: Number, required: true }, // type: { type: Number, required: true },
typeOptions: { type: Array, required: true }, // typeOptions: { type: Array, required: true },
location: { type: Number, required: true }, numIndex: { type: Number, required: true },
locationOptions: { type: Array, required: true },
}, },
setup(_, context) { setup(_, context) {
const selectedFile = (value: FileList) => { const selectedFile = (value: FileList) => {
...@@ -199,42 +222,43 @@ export default defineComponent({ ...@@ -199,42 +222,43 @@ export default defineComponent({
// eslint-disable-next-line // eslint-disable-next-line
upload.value?.click(); upload.value?.click();
}; };
const urlTargetRules = [ // const urlTargetRules = [
(val?: string) => // (val?: string) =>
(val && val.trim().length) || // (val && val.trim().length) ||
i18n.global.t('banner.validateMessages.requireUrlTarget'), // i18n.global.t('banner.validateMessages.requireUrlTarget'),
]; // ];
const nameRules = [ const nameRules = [
(val?: string) => (val?: string) =>
(val && val.trim().length) || (val && val.trim().length) ||
i18n.global.t('banner.validateMessages.requireName'), i18n.global.t('banner.validateMessages.requireName'),
]; ];
const typeRules = [ // const typeRules = [
(val?: number) => // (val?: number) =>
val !== undefined || // val !== undefined ||
i18n.global.t('banner.validateMessages.requireType'), // i18n.global.t('banner.validateMessages.requireType'),
]; // ];
const locationRules = [ const numIndexRules = [
(val?: number) => (val?: number) =>
val !== undefined || val !== undefined ||
i18n.global.t('banner.validateMessages.requireLocation'), i18n.global.t('banner.validateMessages.requireLocation'),
]; ];
return { return {
urlTargetRules, // urlTargetRules,
nameRules, nameRules,
typeRules, // typeRules,
locationRules, numIndexRules,
selectedFile, selectedFile,
deleteAvatar, deleteAvatar,
uploadAvatar, uploadAvatar,
upload,
}; };
}, },
emits: [ emits: [
'update:isOpened', 'update:isOpened',
'update:name', 'update:name',
'update:urlTarget', // 'update:urlTarget',
'update:type', // 'update:type',
'update:location', 'update:numIndex',
'update:status', 'update:status',
'update:image', 'update:image',
'SetAvatar', '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
This diff is collapsed.
src/pages/banner/index.vue
View file @ f9adb60e
This diff is collapsed.
src/pages/cau-hinh-doi-tac-truyen-thong/index.vue 0 → 100644
View file @ f9adb60e
This diff is collapsed.
src/router/routes.ts
View file @ f9adb60e
...@@ -22,6 +22,7 @@ export enum Pages { ...@@ -22,6 +22,7 @@ export enum Pages {
configSystem = 'cau-hinh-trang-tinh', configSystem = 'cau-hinh-trang-tinh',
news = 'cau-hinh-tin-tuc', news = 'cau-hinh-tin-tuc',
hotProduct = 'cau-hinh-san-pham-noi-bat', hotProduct = 'cau-hinh-san-pham-noi-bat',
configPartner = 'cau-hinh-doi-tac-truyen-thong',
} }
const routes: RouteRecordRaw[] = [ const routes: RouteRecordRaw[] = [
...@@ -134,6 +135,12 @@ const routes: RouteRecordRaw[] = [ ...@@ -134,6 +135,12 @@ const routes: RouteRecordRaw[] = [
component: () => import('pages/cau-hinh-san-pham-noi-bat/index.vue'), component: () => import('pages/cau-hinh-san-pham-noi-bat/index.vue'),
name: Pages.hotProduct, 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