Skip to content

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

update

parent f9adb60e
Hide whitespace changes
Inline Side-by-side
Showing with 337 additions and 416 deletions
src/assets/configurations.example.ts
View file @ be32b068
...@@ -107,4 +107,7 @@ export enum API_PATHS { ...@@ -107,4 +107,7 @@ export enum API_PATHS {
addConfigPartner = 'config/home/partner/add', addConfigPartner = 'config/home/partner/add',
getDetailConfigPartner = 'config/home/partner/detail', getDetailConfigPartner = 'config/home/partner/detail',
updateConfigPartner = 'config/home/partner/update', updateConfigPartner = 'config/home/partner/update',
getListConfigHotProduct = 'config/home/product',
getDetailConfigHotProduct = 'config/home/product/detail',
updateConfigHotProduct = 'config/home/product/update/salient',
} }
src/assets/type.ts
View file @ be32b068
...@@ -667,3 +667,31 @@ export type addConfigPartnerConfig = { ...@@ -667,3 +667,31 @@ export type addConfigPartnerConfig = {
updateBy: string; updateBy: string;
updateTime: string; updateTime: string;
}; };
export type ListConfigHotProduct = {
id: number;
code: string;
name: string;
artistName: string;
embeddedUrl: string;
imageUrl: string;
salientStatus: number;
};
export type DetailConfigHotProduct = {
id: number;
code: string;
name: string;
artistName: string;
embeddedUrl: string;
imageUrl: string;
salientStatus: number;
};
export type UpdateConfigHotProduct = {
id: number;
code: string;
name: string;
artistName: string;
embeddedUrl: string;
imageUrl: string;
salientStatus: number;
};
src/components/add-update-cau-hinh-doi-tac-truyen-thong/index.vue
View file @ be32b068
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
style="max-height: calc(100vh - 15rem)" 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 q-mt-sm">
<div class="row flex-center"> <div class="row flex-center">
<div> <div>
<q-card class="q-mb-sm" v-if="image !== null"> <q-card class="q-mb-sm" v-if="image !== null">
......
src/components/hotProduct/index.vue
View file @ be32b068
...@@ -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 style="min-width: 80rem" bordered> <q-card class="full-width" style="max-width: 80rem" bordered>
<q-form <q-form
greedy greedy
@submit.prevent=" @submit.prevent="
...@@ -27,196 +27,117 @@ ...@@ -27,196 +27,117 @@
</q-card-section> </q-card-section>
<q-separator /> <q-separator />
<q-card-section> <q-card-section
class="overflow-auto"
style="max-height: calc(100vh - 15rem)"
>
<div class="row q-col-gutter-sm"> <div class="row q-col-gutter-sm">
<div class="col-6 q-py-md"> <div class="col-6 q-mt-sm">
<div class="row flex-center"> <div class="row flex-center">
<q-card v-if="image !== null"> <div>
<q-img <q-card class="q-mb-sm" v-if="imageUrl !== null">
@click="uploadImg" <q-img
:src="image" @click="uploadAvatar"
style="height: 13.75rem; width: 18.75rem; cursor: pointer" :src="imageUrl"
></q-img> style="height: 290px; width: 450px; cursor: pointer"
</q-card> ></q-img>
<div <q-icon
@click="uploadImg" name="mdi-close-circle"
v-else color="red"
style=" style="
height: 13.75rem; position: absolute;
width: 18.75rem; right: 0;
border: 2px dashed #5d319e; font-size: 18px;
border-radius: 4px; cursor: pointer;
cursor: pointer; "
" @click="deleteAvatar"
> ></q-icon>
</q-card>
<div <div
@click="uploadAvatar"
v-else
class="q-mb-sm"
style=" style="
height: 100%; height: 290px;
display: flex; width: 450px;
align-items: center; border: 2px dashed #5d319e;
justify-content: center; border-radius: 4px;
flex-direction: column; cursor: pointer;
" "
> >
<q-icon <div
style="color: #5d319e" style="
name="mdi-cloud-upload" height: 290px;
size="xl" width: 450px;
></q-icon> display: flex;
Tải ảnh lên 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>
<input
ref="upload"
hidden
type="file"
accept="image/png, image/jpeg"
@change="selectedFile($event.target.files)"
/>
</div> </div>
</div> </div>
</div> </div>
<div class="col-6"> <div class="col-6">
<q-input <q-input
:model-value="title" :model-value="artistName"
@update:model-value="$emit('update:title', $event)" @update:model-value="$emit('update:artistName', $event)"
:label="$t('listHotProduct.dialogLabel.fieldLabels.title')" :label="$t('listHotProduct.dialogLabel.fieldLabels.artistName')"
class="q-my-sm" class="q-my-sm"
type="text" type="text"
outlined outlined
:rules="titleRules" :rules="artistNameRules"
clearable clearable
></q-input> ></q-input>
<q-input <q-input
:model-value="urlTarget" :model-value="name"
@update:model-value="$emit('update:urlTarget', $event)" @update:model-value="$emit('update:name', $event)"
:label="$t('listHotProduct.dialogLabel.fieldLabels.urlTarget')" :label="$t('listHotProduct.dialogLabel.fieldLabels.name')"
class="q-my-sm" class="q-my-sm"
type="text" type="text"
outlined outlined
:rules="urlTargetRules" :rules="nameRules"
clearable clearable
></q-input> ></q-input>
<q-input <q-input
:model-value="location" :model-value="embeddedUrl"
@update:model-value="$emit('update:location', $event)" @update:model-value="$emit('update:embeddedUrl', $event)"
:label="$t('listHotProduct.dialogLabel.fieldLabels.location')" :label="
$t('listHotProduct.dialogLabel.fieldLabels.embeddedUrl')
"
class="q-my-sm" class="q-my-sm"
type="text" type="text"
outlined outlined
:rules="embeddedUrlRules"
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('listHotProduct.dialogLabel.fieldLabels.status') $t('listHotProduct.dialogLabel.fieldLabels.salientStatus')
}}</span }}</span
><q-toggle ><q-toggle
:model-value="status" :model-value="salientStatus"
:true-value="SystemHotProductStatus.active" :true-value="SystemHotProductStatus.active"
:false-value="SystemHotProductStatus.inactive" :false-value="SystemHotProductStatus.inactive"
@update:model-value="$emit('update:status', $event)" @update:model-value="$emit('update:salientStatus', $event)"
/>
</div>
</div>
<div class="col-12">
<div>
<q-editor
:model-value="content"
@update:model-value="$emit('update:content', $event)"
ref="editorRef"
placeholder="Nội dung *"
toolbar-text-color="white"
toolbar-toggle-color="yellow-8"
toolbar-bg="primary"
style="height: 20rem"
:toolbar="[
[
{
label: $q.lang.editor.align,
icon: $q.iconSet.editor.align,
fixedLabel: true,
list: 'only-icons',
options: ['left', 'center', 'right', 'justify'],
},
],
[
'bold',
'italic',
'strike',
'underline',
'subscript',
'superscript',
],
['token', 'hr', 'link', 'custom_btn'],
['print', 'fullscreen'],
[
{
label: $q.lang.editor.formatting,
icon: $q.iconSet.editor.formatting,
list: 'no-icons',
options: [
'p',
'h1',
'h2',
'h3',
'h4',
'h5',
'h6',
'code',
],
},
{
label: $q.lang.editor.fontSize,
icon: $q.iconSet.editor.fontSize,
fixedLabel: true,
fixedIcon: true,
list: 'no-icons',
options: [
'size-1',
'size-2',
'size-3',
'size-4',
'size-5',
'size-6',
'size-7',
],
},
{
label: $q.lang.editor.defaultFont,
icon: $q.iconSet.editor.font,
fixedIcon: true,
list: 'no-icons',
options: [
'default_font',
'arial',
'arial_black',
'comic_sans',
'courier_new',
'impact',
'lucida_grande',
'times_new_roman',
'verdana',
],
},
'removeFormat',
],
['quote', 'unordered', 'ordered', 'outdent', 'indent'],
['undo', 'redo'],
['viewsource'],
]"
:fonts="{
arial: 'Arial',
arial_black: 'Arial Black',
comic_sans: 'Comic Sans MS',
courier_new: 'Courier New',
impact: 'Impact',
lucida_grande: 'Lucida Grande',
times_new_roman: 'Times New Roman',
verdana: 'Verdana',
}"
/> />
</div> </div>
</div> </div>
...@@ -254,57 +175,64 @@ export default defineComponent({ ...@@ -254,57 +175,64 @@ export default defineComponent({
required: true, required: true,
}, },
isUpdate: { type: Boolean, default: false }, isUpdate: { type: Boolean, default: false },
image: { type: String, required: true }, imageUrl: { type: String, required: true },
title: { type: String, required: true }, name: { type: String, required: true },
location: { type: String, required: true }, artistName: { type: String, required: true },
content: { type: String, required: true }, embeddedUrl: { type: String, required: true },
urlTarget: { type: String, required: true }, salientStatus: { type: Number, required: true },
status: { type: Number, required: true },
}, },
setup(props, context) { setup(_, context) {
const selectedFile = (value: FileList) => { const selectedFile = (value: FileList) => {
if (value.length !== 0) { context.emit('SetAvatar', {
context.emit('SetAvatar', { file: value[0],
file: value[0], url: URL.createObjectURL(value[0]),
url: URL.createObjectURL(value[0]), });
}); };
} const deleteAvatar = () => {
context.emit('deleteAvatar');
}; };
const upload = ref(null); const upload = ref(null);
const uploadImg = () => { const uploadAvatar = () => {
// eslint-disable-next-line // eslint-disable-next-line
// @ts-ignore // @ts-ignore
// eslint-disable-next-line // eslint-disable-next-line
upload.value?.click(); upload.value?.click();
}; };
const titleRules = [ const nameRules = [
(val?: string) => (val?: string) =>
(val && val.trim().length) || (val && val.trim().length) ||
i18n.global.t('listHotProduct.validateMessages.requireTitle'), i18n.global.t('listHotProduct.validateMessages.requireName'),
]; ];
const urlTargetRules = [ const artistNameRules = [
(val?: string) => (val?: string) =>
(val && val.trim().length) || (val && val.trim().length) ||
i18n.global.t('listHotProduct.validateMessages.requireUrlTarget'), i18n.global.t('listHotProduct.validateMessages.requireArtistName'),
];
const embeddedUrlRules = [
(val?: string) =>
(val && val.trim().length) ||
i18n.global.t('listHotProduct.validateMessages.requireEmbeddedUrl'),
]; ];
return { return {
upload, nameRules,
titleRules, artistNameRules,
urlTargetRules, embeddedUrlRules,
SystemHotProductStatus, SystemHotProductStatus,
uploadImg,
selectedFile, selectedFile,
deleteAvatar,
uploadAvatar,
upload,
}; };
}, },
emits: [ emits: [
'update:isOpened', 'update:isOpened',
'update:image', 'update:imageUrl',
'update:title', 'update:name',
'update:location', 'update:artistName',
'update:content', 'update:embeddedUrl',
'update:urlTarget', 'update:salientStatus',
'update:status',
'SetAvatar', 'SetAvatar',
'deleteAvatar',
'saveHotProductInfo', 'saveHotProductInfo',
], ],
}); });
......
src/i18n/vi/index.ts
View file @ be32b068
...@@ -1144,47 +1144,40 @@ export default { ...@@ -1144,47 +1144,40 @@ export default {
toolTipMessageDelete: 'Xóa', toolTipMessageDelete: 'Xóa',
title: 'Cấu hình Sản phẩm nổi bật', title: 'Cấu hình Sản phẩm nổi bật',
titleColumnsTable: { titleColumnsTable: {
stt: 'STT', artistName: 'Tên nghệ sỹ',
image: 'Ảnh sản phẩm', name: 'Tên sản phẩm',
title: 'Tiêu đề', imageUrl: 'Ảnh sản phẩm',
content: 'Nội dung', embeddedUrl: 'Link Embed',
location: 'Vị trí', salientStatus: 'Trạng thái',
urlTarget: 'Url target',
createTime: 'Người tạo',
createBy: 'T.G tạo',
updateTime: 'Người Cập nhật',
updateBy: 'T.G Cập nhật',
status: 'Trạng thái',
action: 'Chức năng', action: 'Chức năng',
}, },
dialogLabel: { dialogLabel: {
titleUpdate: 'Cập nhật 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', titleAdd: 'Thêm Sản phẩm nổi bật',
fieldLabels: { fieldLabels: {
avatar: 'Ảnh sản phẩm', artistName: 'Tên nghệ sỹ *',
urlTarget: 'Url target', name: 'Tên sản phẩm *',
title: 'Tiêu đề', embeddedUrl: 'Link Embed *',
content: 'Nội dung', salientStatus: 'Trạng thái',
location: 'Vị trí',
status: 'Trạng thái',
}, },
}, },
validateMessages: { validateMessages: {
requireTitle: 'Vui lòng nhập Tiêu đề', requireArtistName: 'Vui lòng nhập Tên nghệ sỹ',
requireUrlTarget: 'Vui lòng nhập Url target', requireName: 'Vui lòng nhập Tên sản phẩm',
requireEmbeddedUrl: 'Vui lòng nhập Link embed',
}, },
crudActions: { crudActions: {
save: 'Lưu', save: 'Lưu',
cancel: 'Đóng', cancel: 'Đóng',
}, },
statusLabel: { statusLabel: {
active: 'Hoạt động', active: 'Hiển thị',
inactive: 'Ngừng hoạt động', inactive: 'Không hiển thị',
}, },
actionMessages: { actionMessages: {
addSuccess: 'Thêm Sản phẩm nổi bật thành công', addSuccess: 'Thêm cấu hính 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', updateSuccess: 'Cập nhật cấu hính 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', deleteSuccess: 'Xóa cấu hình sản phẩm nổi bật thành công',
}, },
}, },
......
src/pages/cau-hinh-san-pham-noi-bat/index.vue
View file @ be32b068
...@@ -7,10 +7,10 @@ ...@@ -7,10 +7,10 @@
<q-space></q-space> <q-space></q-space>
<div class="col-2 sreach"> <div class="col-2 sreach">
<q-input <q-input
v-model="sreachTitle" v-model="name_artist"
dense dense
outlined outlined
:label="$t('listHotProduct.titleColumnsTable.title')" :label="$t('listHotProduct.titleColumnsTable.artistName')"
clearable clearable
></q-input> ></q-input>
</div> </div>
...@@ -21,6 +21,7 @@ ...@@ -21,6 +21,7 @@
color="primary" color="primary"
no-caps no-caps
:label="$t('crudActions.search')" :label="$t('crudActions.search')"
@click="getListConfigHotProduct"
style="width: 100px" style="width: 100px"
> >
</q-btn> </q-btn>
...@@ -63,37 +64,24 @@ ...@@ -63,37 +64,24 @@
$t('listHotProduct.toolTipMessageUpdate') $t('listHotProduct.toolTipMessageUpdate')
}}</q-tooltip> }}</q-tooltip>
</q-btn> </q-btn>
</q-td> <q-btn flat round color="primary" icon="mdi-delete-outline">
</template> <!-- @click="confirmDeleteConfig(item.row.id)" -->
<template v-slot:body-cell-stt="item"> <q-tooltip :offset="[20, 10]">{{
<q-td :item="item" style="text-align: center"> $t('listHotProduct.toolTipMessageDelete')
{{ 1 + item.rowIndex + pageSize * (pageIndex - 1) }}
</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="30%">{{
!item.row.content ? '' : item.row.content
}}</q-tooltip> }}</q-tooltip>
</div> </q-btn>
</td> </q-td>
</template> </template>
<template v-slot:body-cell-imageUrl="imageUrl">
<template v-slot:body-cell-image="image"> <q-td style="padding: auto; height: 100%; text-align: center">
<q-td style="padding: auto; height: 100%" class="flex flex-center">
<q-img <q-img
style="width: 9rem" style="width: 12rem; height: 8rem"
fit="contain" :src="configImg.API_IMAGE_ENDPOINT + imageUrl.row.imageUrl"
:ratio="16 / 9"
:src="configImg.API_IMAGE_ENDPOINT + image.row.image"
></q-img> ></q-img>
</q-td> </q-td>
</template> </template>
<template v-slot:body-cell-status="rowData"> <template v-slot:body-cell-salientStatus="rowData">
<q-td> <q-td>
<div align="center"> <div align="center">
<q-chip <q-chip
...@@ -114,30 +102,51 @@ ...@@ -114,30 +102,51 @@
</div> </div>
</q-td> </q-td>
</template> </template>
<template v-slot:body-cell-embeddedUrl="rowData">
<q-td>
<div align="center">
<a
:href="rowData.row.embeddedUrl"
target="_blank"
style="max-width: 10rem"
>{{ rowData.row.embeddedUrl }}</a
>
</div>
</q-td>
</template>
</q-table> </q-table>
</div> </div>
<div class="col-12 q-mt-sm">
<Pagination
v-model:currentPage="pageIndex"
v-model:pageSize="pageSize"
:totalPage="totalPage"
@update:pageSize="changePageSize"
@update:currentPage="getListConfigHotProduct"
/>
</div>
<AddUpdateHotProductDialog <AddUpdateHotProductDialog
v-model:isOpened="showDialogAdd" v-model:isOpened="showDialogAdd"
v-model:title="title" v-model:name="name"
v-model:content="content" v-model:embeddedUrl="embeddedUrl"
v-model:location="location" v-model:artistName="artistName"
v-model:url-target="urlTarget" v-model:salientStatus="salientStatus"
v-model:status="status" v-model:imageUrl="imageUrl"
v-model:image="image"
@SetAvatar="setAvatar($event)" @SetAvatar="setAvatar($event)"
@deleteAvatar="deleteAvatar"
isUpdate isUpdate
@saveHotProductInfo="addProduct" @saveHotProductInfo="addProduct"
/> />
<AddUpdateHotProductDialog <AddUpdateHotProductDialog
v-model:isOpened="showDialogUpdate" v-model:isOpened="showDialogUpdate"
v-model:title="title" v-model:name="name"
v-model:content="content" v-model:embeddedUrl="embeddedUrl"
v-model:location="location" v-model:artistName="artistName"
v-model:url-target="urlTarget" v-model:salientStatus="salientStatus"
v-model:status="status" v-model:imageUrl="imageUrl"
v-model:image="image"
@SetAvatar="setAvatar($event)" @SetAvatar="setAvatar($event)"
@deleteAvatar="deleteAvatar"
@saveHotProductInfo="updateHotProduct" @saveHotProductInfo="updateHotProduct"
/> />
</div> </div>
...@@ -151,112 +160,67 @@ export type AvatarType = { ...@@ -151,112 +160,67 @@ export type AvatarType = {
import AddUpdateHotProductDialog from 'components/hotProduct/index.vue'; import AddUpdateHotProductDialog from 'components/hotProduct/index.vue';
import { SystemHotProductStatus } from 'src/assets/enums'; import { SystemHotProductStatus } from 'src/assets/enums';
import { i18n } from 'src/boot/i18n'; import { i18n } from 'src/boot/i18n';
import Pagination from 'components/pagination/index.vue';
import { defineComponent, onMounted, Ref, ref } from 'vue'; import { defineComponent, onMounted, Ref, ref } from 'vue';
import { config } from 'src/assets/configurations'; import { config, API_PATHS } from 'src/assets/configurations';
import { AxiosResponse } from 'axios'; import { AxiosResponse } from 'axios';
import { Notify } from 'quasar';
import { api, BaseResponseBody } from 'src/boot/axios'; import { api, BaseResponseBody } from 'src/boot/axios';
import { FileUploadType } from 'src/assets/type'; import {
PaginationResponse,
FileUploadType,
ListConfigHotProduct,
DetailConfigHotProduct,
UpdateConfigHotProduct,
} from 'src/assets/type';
export default defineComponent({ export default defineComponent({
components: { components: {
Pagination,
AddUpdateHotProductDialog, AddUpdateHotProductDialog,
}, },
setup() { setup() {
const tableColumnsNews = [ const tableColumnsNews = [
{ {
name: 'stt', name: 'artistName',
field: 'stt', field: 'artistName',
required: true,
label: i18n.global.t('listHotProduct.titleColumnsTable.stt'),
headerStyle: 'text-align: center !important; width: 5%',
align: 'center',
sortable: false,
},
{
name: 'image',
field: 'image',
required: true, required: true,
label: i18n.global.t('listHotProduct.titleColumnsTable.image'), label: i18n.global.t('listHotProduct.titleColumnsTable.artistName'),
align: 'left', align: 'left',
headerStyle: 'text-align: center !important; width: 10%', headerStyle: 'text-align: center !important; width: 15%',
sortable: false, sortable: false,
}, },
{ {
name: 'title', name: 'name',
field: 'title', field: 'name',
required: true, required: true,
label: i18n.global.t('listHotProduct.titleColumnsTable.title'), label: i18n.global.t('listHotProduct.titleColumnsTable.name'),
align: 'left', align: 'left',
headerStyle: 'text-align: center !important; width: 15%', headerStyle: 'text-align: center !important; width: 15%',
sortable: false, sortable: false,
}, },
{ {
name: 'content', name: 'imageUrl',
field: 'content', field: 'imageUrl',
required: true, required: true,
label: i18n.global.t('listHotProduct.titleColumnsTable.content'), label: i18n.global.t('listHotProduct.titleColumnsTable.imageUrl'),
headerStyle: 'text-align: center !important; width: 20%',
align: 'left', align: 'left',
sortable: false,
},
{
name: 'location',
field: 'location',
required: true,
label: i18n.global.t('listHotProduct.titleColumnsTable.location'),
headerStyle: 'text-align: center !important; width: 5%',
align: 'center',
sortable: false,
},
{
name: 'urlTarget',
field: 'urlTarget',
required: true,
label: i18n.global.t('listHotProduct.titleColumnsTable.urlTarget'),
headerStyle: 'text-align: center !important; width: 10%', headerStyle: 'text-align: center !important; width: 10%',
align: 'center',
sortable: false,
},
{
name: 'createTime',
field: 'createTime',
required: true,
label: i18n.global.t('listHotProduct.titleColumnsTable.createTime'),
headerStyle: 'text-align: center !important; width: 8%',
align: 'left',
sortable: false, sortable: false,
}, },
{ {
name: 'createBy', name: 'embeddedUrl',
field: 'createBy', field: 'embeddedUrl',
required: true, required: true,
label: i18n.global.t('listHotProduct.titleColumnsTable.createBy'), label: i18n.global.t('listHotProduct.titleColumnsTable.embeddedUrl'),
headerStyle: 'text-align: center !important; width: 8%',
align: 'left',
sortable: false,
},
{
name: 'updateTime',
field: 'updateTime',
required: true,
label: i18n.global.t('listHotProduct.titleColumnsTable.updateTime'),
headerStyle: 'text-align: center !important; width: 8%',
align: 'left',
sortable: false,
},
{
name: 'updateBy',
field: 'updateBy',
required: true,
label: i18n.global.t('listHotProduct.titleColumnsTable.updateBy'),
headerStyle: 'text-align: center !important; width: 12%',
align: 'left', align: 'left',
headerStyle: 'text-align: center !important; width: 15%',
sortable: false, sortable: false,
}, },
{ {
name: 'status', name: 'salientStatus',
field: 'status', field: 'salientStatus',
required: true, required: true,
label: i18n.global.t('listHotProduct.titleColumnsTable.status'), label: i18n.global.t('listHotProduct.titleColumnsTable.salientStatus'),
headerStyle: 'text-align: center !important; width: 8%', headerStyle: 'text-align: center !important; width: 8%',
align: 'center', align: 'center',
sortable: false, sortable: false,
...@@ -272,64 +236,53 @@ export default defineComponent({ ...@@ -272,64 +236,53 @@ export default defineComponent({
}, },
]; ];
const listHotProduct: Ref<unknown[]> = ref([ const listHotProduct: Ref<unknown[]> = ref([]);
// {
// stt: 1,
// image: '',
// title: 'Tiêu đề',
// content: 'Tiêu đề....',
// location: 1,
// urlTarget: 'www.aaa.vn',
// createTime: '10/10/2021 00:00:00',
// createBy: '10/10/2021 00:00:00',
// updateTime: '10/10/2021 00:00:00',
// updateBy: '10/10/2021 00:00:00',
// status: 1,
// },
]);
const sreachTitle = ref(''); const name_artist = ref('');
const pageIndex = ref(1); const pageIndex = ref(1);
const pageSize = ref(20); const pageSize = ref(20);
const totalPage = ref(1); const totalPage = ref(1);
const changePageSize = () => { const changePageSize = () => {
pageIndex.value = 1; pageIndex.value = 1;
void getlistHotProduct(); void getListConfigHotProduct();
}; };
const showDialogAdd = ref(false); const showDialogAdd = ref(false);
const showDialogUpdate = ref(false); const showDialogUpdate = ref(false);
const title: Ref<string | null> = ref(null); const name: Ref<string | null> = ref(null);
const location: Ref<string | null> = ref(null); const artistName: Ref<string | null> = ref(null);
const content: Ref<string | null> = ref(null); const embeddedUrl: Ref<string | null> = ref(null);
const urlTarget: Ref<string | null> = ref(null); const salientStatus: Ref<number> = ref(SystemHotProductStatus.active);
const status: Ref<number> = ref(SystemHotProductStatus.active); const imageUrl: Ref<string | null> = ref(null);
const image: Ref<string | null> = ref(null);
const avatarFile: Ref<File | null> = ref(null); const avatarFile: Ref<File | null> = ref(null);
const avatarUploaded: Ref<string> = ref('');
const imageChange: Ref<string> = ref('');
const configImg = config; const configImg = config;
const configHotProductId: Ref<number | undefined> = ref(undefined);
const getlistHotProduct = async () => { const getListConfigHotProduct = async () => {
// try { const response = (await api({
// const response = (await api({ url: API_PATHS.getListConfigHotProduct,
// url: API_PATHS.getlistHotProduct, method: 'GET',
// method: 'GET', params: {
// params: { pageIndex: pageIndex.value,
// pageIndex: pageIndex.value, pageSize: pageSize.value,
// pageSize: pageSize.value, artistName: name_artist.value,
// }, },
// })) as AxiosResponse<BaseResponseBody<PaginationResponse<listHotProduct>>>; })) as AxiosResponse<
// if (response.data.error.code === config.API_RES_CODE.OK.code) { BaseResponseBody<PaginationResponse<ListConfigHotProduct[]>>
// listHotProduct.value = response.data.data.data; >;
// } if (response.data.error.code === config.API_RES_CODE.OK.code) {
// } catch (error) {} listHotProduct.value = response.data.data.data;
totalPage.value = response.data.data.totalPages;
}
}; };
const openAddDialog = () => { const openAddDialog = () => {
title.value = null; name.value = '';
urlTarget.value = null; artistName.value = '';
location.value = null; embeddedUrl.value = '';
content.value = null; imageUrl.value = null;
image.value = null; salientStatus.value = SystemHotProductStatus.active;
status.value = SystemHotProductStatus.active;
showDialogAdd.value = true; showDialogAdd.value = true;
}; };
...@@ -360,62 +313,71 @@ export default defineComponent({ ...@@ -360,62 +313,71 @@ export default defineComponent({
}; };
const openUpdateDialog = (id: number) => { const openUpdateDialog = (id: number) => {
void getDetailPolicy(id); void getDetailConfigHotProduct(id);
showDialogUpdate.value = true;
}; };
// eslint-disable-next-line @typescript-eslint/require-await const getDetailConfigHotProduct = async (id: number) => {
const getDetailPolicy = async (id: number) => {
try { try {
console.log(id); const response = (await api({
showDialogUpdate.value = true; url: API_PATHS.getDetailConfigHotProduct,
method: 'GET',
params: {
id: id,
},
})) as AxiosResponse<BaseResponseBody<DetailConfigHotProduct>>;
if (response.data.error.code === config.API_RES_CODE.OK.code) {
configHotProductId.value = response.data.data.id;
name.value = response.data.data.name;
artistName.value = response.data.data.artistName;
salientStatus.value = response.data.data.salientStatus;
embeddedUrl.value = response.data.data.embeddedUrl;
imageUrl.value =
config.API_IMAGE_ENDPOINT + response.data.data.imageUrl;
imageChange.value = response.data.data.imageUrl;
}
} catch (error) {} } catch (error) {}
}; };
// const getDetailContact = async (id: number) => { const updateHotProduct = async () => {
// try { if (avatarFile.value) {
// const response = (await api({ avatarUploaded.value = await callApiUploadAvatar(avatarFile.value);
// url: API_PATHS.detailContact, void updateConfigHotProduct(avatarUploaded.value);
// method: 'GET', } else {
// params: { void updateConfigHotProduct(imageChange.value);
// id: id, }
// },
// })) as AxiosResponse<BaseResponseBody<ContactType>>;
// if (response.data.error.code === config.API_RES_CODE.OK.code) {
// customerInfo.value = response.data.data;
// showDialogUpdate.value = true;
// }
// } catch (error) {}
// };
const updateHotProduct = () => {
showDialogUpdate.value = false;
}; };
// const updateContact = async (item: ContactType) => { const updateConfigHotProduct = async (imageUrl: string) => {
// try { const data = {
// const response = (await api({ id: configHotProductId.value,
// url: API_PATHS.updateContact, name: name.value,
// method: 'POST', artistName: artistName.value,
// data: { salientStatus: salientStatus.value,
// id: item.id, embeddedUrl: embeddedUrl.value,
// content: item.content, imageUrl,
// status: item.status, };
// }, const response = (await api({
// })) as AxiosResponse<BaseResponseBody<unknown>>; url: API_PATHS.updateConfigHotProduct,
// if (response.data.error.code === config.API_RES_CODE.OK.code) { method: 'POST',
// Notify.create({ data,
// type: 'positive', })) as AxiosResponse<BaseResponseBody<UpdateConfigHotProduct[]>>;
// message: i18n.global.t('listHotProduct.actionMessages.updateAccess'), if (response.data.error.code === config.API_RES_CODE.OK.code) {
// }); showDialogUpdate.value = false;
// void getlistHotProduct(); Notify.create({
// showDialogUpdate.value = false; type: 'positive',
// } message: i18n.global.t(
// } catch (error) {} 'configPartner.actionMessages.updateConfigPartnerAccess'
// }; ),
actions: [{ icon: 'close', color: 'white' }],
});
void getListConfigHotProduct();
}
};
const setAvatar = (value: { file?: File; url?: string }) => { const setAvatar = (value: { file?: File; url?: string }) => {
avatarFile.value = value.file as File; avatarFile.value = value.file as File;
image.value = value.url as string; imageUrl.value = value.url as string;
}; };
const callApiUploadAvatar = async (file: File) => { const callApiUploadAvatar = async (file: File) => {
...@@ -437,35 +399,42 @@ export default defineComponent({ ...@@ -437,35 +399,42 @@ export default defineComponent({
return ''; return '';
} }
}; };
const deleteAvatar = () => {
imageUrl.value = null;
};
onMounted(() => { onMounted(() => {
void getlistHotProduct(); void getListConfigHotProduct();
}); });
return { return {
image, imageUrl,
setAvatar, setAvatar,
callApiUploadAvatar, callApiUploadAvatar,
configImg, configImg,
sreachTitle, name_artist,
listHotProduct, listHotProduct,
tableColumnsNews, tableColumnsNews,
pageIndex, pageIndex,
pageSize, pageSize,
totalPage, totalPage,
changePageSize, changePageSize,
getDetailPolicy, getDetailConfigHotProduct,
SystemHotProductStatus, SystemHotProductStatus,
showDialogUpdate, showDialogUpdate,
showDialogAdd, showDialogAdd,
title, name,
content, artistName,
location, embeddedUrl,
urlTarget, salientStatus,
status,
openUpdateDialog, openUpdateDialog,
updateConfigHotProduct,
updateHotProduct, updateHotProduct,
openAddDialog, openAddDialog,
addProduct, addProduct,
getListConfigHotProduct,
configHotProductId,
avatarUploaded,
deleteAvatar,
}; };
}, },
}); });
......
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