Skip to content

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

update

parent bd220fcd
Hide whitespace changes
Inline Side-by-side
Showing with 120 additions and 77 deletions
src/assets/configurations.example.ts
View file @ de9fafa4
......@@ -65,4 +65,6 @@ export enum API_PATHS {
addField = 'field/add',
updateField = 'field/update',
getDetailField = 'field/detail',
getListPost = 'post',
deletePost = 'post/delete',
}
src/assets/type.ts
View file @ de9fafa4
......@@ -313,3 +313,15 @@ export type DetailField = {
description: string;
status: number;
};
export type Post = {
id: number;
name: string;
image: string;
category: string;
createBy: string;
createTime: string;
updateBy: string;
updateTime: string;
status: number;
};
src/components/add-update-post/index.vue
View file @ de9fafa4
......@@ -32,13 +32,13 @@
<div class="row q-col-gutter-sm">
<div class="col-6">
<q-input
:model-value="avatar"
@update:model-value="$emit('update:avatar', $event)"
:label="$t('post.dialogLabel.postLabels.avatar')"
:model-value="image"
@update:model-value="$emit('update:image', $event)"
:label="$t('post.dialogLabel.postLabels.image')"
type="text"
class="q-my-sm"
outlined
:rules="avatarRules"
:rules="imageRules"
clearable
></q-input>
</div>
......@@ -119,17 +119,17 @@ export default defineComponent({
required: true,
},
isUpdate: { type: Boolean, default: false },
avatar: { type: String, required: true },
image: { type: String, required: true },
name: { type: String, required: true },
description: { type: String, required: true },
content: { type: String, required: true },
status: { type: Number, required: true },
},
setup() {
const avatarRules = [
const imageRules = [
(val?: string) =>
(val && val.trim().length) ||
i18n.global.t('post.validateMessages.requireAvatar'),
i18n.global.t('post.validateMessages.requireImage'),
];
const contentRules = [
(val?: string) =>
......@@ -144,12 +144,12 @@ export default defineComponent({
return {
contentRules,
nameRules,
avatarRules,
imageRules,
};
},
emits: [
'update:isOpened',
'update:avatar',
'update:image',
'update:name',
'update:description',
'update:content',
......
src/i18n/vi/index.ts
View file @ de9fafa4
......@@ -628,11 +628,11 @@ export default {
tableColumnsPost: {
stt: 'STT',
name: 'Tên bài viết',
avatar: 'Avatar',
image: 'Avatar',
category: 'Danh mục bài viết',
addUser: 'Người thêm',
addTime: 'Thời gian thêm',
updateUser: 'Người cập nhập',
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ật',
status: 'Trạng thái',
action: 'Chức năng',
......@@ -648,7 +648,7 @@ export default {
},
postLabels: {
name: 'Tên bài viết *',
avatar: 'Avatar *',
image: 'Avatar *',
description: 'Mô tả',
content: 'Nội dung *',
status: 'Trạng thái',
......@@ -664,10 +664,10 @@ export default {
},
validateMessages: {
requireName: 'Vui lòng nhập Tên bài viết',
requireAvatar: 'Vui lòng chọn Avatar',
requireImage: 'Vui lòng chọn Avatar',
requireContent: 'Vui lòng nhập Nội dung',
},
confirmActionsPost: {
confirmActionsTitle: {
confirmDeletePostTitle: 'Xác nhận',
confirmDeletePostCancelBtnLabel: 'Huỷ',
confirmDeletePostContent: 'Bạn có chắc chắn muốn xoá bài viết này không?',
......
src/pages/bai-viet/index.vue
View file @ de9fafa4
......@@ -46,7 +46,7 @@
class="sticky-header-table"
>
<template v-slot:body-cell-action="item">
<q-td style="padding: 0" class="flex flex-center">
<q-td style="padding: 0" class="center">
<q-btn
flat
round
......@@ -71,13 +71,13 @@
</q-btn>
</q-td>
</template>
<template v-slot:body-cell-avatar="avatar">
<q-td style="padding: 0; height: 100%" class="flex flex-center">
<template v-slot:body-cell-image="image">
<q-td style="padding: auto; height: 100%" class="center">
<q-img
style="width: 7rem"
fit="contain"
:ratio="16 / 9"
:src="avatar.row.avatar"
:src="image.row.image"
></q-img>
</q-td>
</template>
......@@ -103,11 +103,21 @@
</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="getListPost"
/>
</div>
<AddUpdatePostDialog
v-model:isOpened="addPostDialogIsOpened"
v-model:name="name"
v-model:description="description"
v-model:avatar="avatar"
v-model:image="image"
v-model:content="content"
v-model:status="status"
isUpdate
......@@ -118,7 +128,7 @@
v-model:isOpened="updatePostDialogIsOpened"
v-model:name="name"
v-model:description="description"
v-model:avatar="avatar"
v-model:image="image"
v-model:content="content"
v-model:status="status"
@savePostInfo="updateNewPost"
......@@ -129,17 +139,19 @@
<script lang="ts">
import { i18n } from 'src/boot/i18n';
import { defineComponent, onMounted, ref, Ref } from 'vue';
// import { API_PATHS } from 'src/assets/configurations';
// import { AxiosResponse } from 'axios';
// import { api, BaseResponseBody } from 'src/boot/axios';
// import { Post, AddPost, DetailPost, UpdatePost } from 'src/assets/type';
// import { config } from 'src/assets/configurations';
import Pagination from 'components/pagination/index.vue';
import { API_PATHS } from 'src/assets/configurations';
import { AxiosResponse } from 'axios';
import { api, BaseResponseBody } from 'src/boot/axios';
import { PaginationResponse, Post } from 'src/assets/type';
import { config } from 'src/assets/configurations';
import { PostStatus } from 'src/assets/enums';
import AddUpdatePostDialog from 'components/add-update-post/index.vue';
import { Dialog, Notify } from 'quasar';
export default defineComponent({
components: {
Pagination,
AddUpdatePostDialog,
},
setup() {
......@@ -162,10 +174,10 @@ export default defineComponent({
sortable: false,
},
{
name: 'avatar',
field: 'avatar',
name: 'image',
field: 'image',
required: true,
label: i18n.global.t('post.tableColumnsPost.avatar'),
label: i18n.global.t('post.tableColumnsPost.image'),
headerStyle: 'text-align: center !important;',
align: 'center',
sortable: false,
......@@ -180,28 +192,28 @@ export default defineComponent({
sortable: false,
},
{
name: 'addUser',
field: 'addUser',
name: 'createBy',
field: 'createBy',
required: true,
label: i18n.global.t('post.tableColumnsPost.addUser'),
label: i18n.global.t('post.tableColumnsPost.createBy'),
headerStyle: 'text-align: center !important;',
align: 'left',
sortable: false,
},
{
name: 'addTime',
field: 'addTime',
name: 'createTime',
field: 'createTime',
required: true,
label: i18n.global.t('post.tableColumnsPost.addTime'),
label: i18n.global.t('post.tableColumnsPost.createTime'),
headerStyle: 'text-align: center !important;',
align: 'left',
sortable: false,
},
{
name: 'updateUser',
field: 'updateUser',
name: 'updateBy',
field: 'updateBy',
required: true,
label: i18n.global.t('post.tableColumnsPost.updateUser'),
label: i18n.global.t('post.tableColumnsPost.updateBy'),
headerStyle: 'text-align: center !important;',
align: 'left',
sortable: false,
......@@ -235,69 +247,82 @@ export default defineComponent({
},
];
const pageIndex = ref(1);
const pageSize = ref(20);
const totalPage = ref(1);
const postTableRows: Ref<unknown[]> = ref([]);
const addPostDialogIsOpened = ref(false);
const updatePostDialogIsOpened = ref(false);
const description = ref('');
const name = ref('');
const content = ref('');
const avatar = ref('');
const image = ref('');
const status: Ref<number> = ref(PostStatus.active);
const postId: Ref<number | undefined> = ref(undefined);
const namePost = ref('');
const changePageSize = () => {
pageIndex.value = 1;
void getListPost();
};
//gọi api ds
const getListPost = async () => {
// const response = (await api({
// url: API_PATHS.getListPost,
// method: 'GET',
// params: {
// name: namePost.value,
// },
// })) as AxiosResponse<BaseResponseBody<[]>>;
// if (response.data.error.code === config.API_RES_CODE.OK.code) {
// postTableRows.value = response.data.data;
// }
const response = (await api({
url: API_PATHS.getListPost,
method: 'GET',
params: {
pageIndex: pageIndex.value,
pageSize: pageSize.value,
name: namePost.value,
},
})) as AxiosResponse<BaseResponseBody<PaginationResponse<Post>>>;
if (response.data.error.code === config.API_RES_CODE.OK.code) {
postTableRows.value = response.data.data.data;
totalPage.value = response.data.data.totalPages;
}
};
const confirmDeletePost = (id: number) => {
Dialog.create({
// title: i18n.global.t('post.confirmActionsTitle.confirmDeletePostTitle'),
// message: i18n.global.t(
// 'field.confirmActionsTitle.confirmDeletePostContent'
// ),
// cancel: i18n.global.t(
// 'field.confirmActionsTitle.confirmDeletePostCancelBtnLabel'
// ),
// color: 'negative',
// }).onOk(() => {
// void deletePost(id);
title: i18n.global.t('post.confirmActionsTitle.confirmDeletePostTitle'),
message: i18n.global.t(
'post.confirmActionsTitle.confirmDeletePostContent'
),
cancel: i18n.global.t(
'post.confirmActionsTitle.confirmDeletePostCancelBtnLabel'
),
color: 'negative',
}).onOk(() => {
void deletePost(id);
});
};
//gói api xóa
const deletePost = async (id: number) => {
// try {
// const deleteResult = (await api({
// // url: API_PATHS.deletePost,
// 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('post.actionMessages.deletePostAccess'),
// });
// void getListPost();
// }
// } catch (error) {}
try {
const deleteResult = (await api({
url: API_PATHS.deletePost,
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('post.actionMessages.deletePostAccess'),
});
void getListPost();
}
} catch (error) {}
};
const openAddPostDialog = () => {
name.value = '';
description.value = '';
content.value = '';
image.value = '';
status.value = PostStatus.active;
addPostDialogIsOpened.value = true;
};
......@@ -377,6 +402,10 @@ export default defineComponent({
void getListPost();
});
return {
pageIndex,
pageSize,
totalPage,
changePageSize,
addPostDialogIsOpened,
updatePostDialogIsOpened,
postTableColumns,
......@@ -395,7 +424,7 @@ export default defineComponent({
updateNewPost,
namePost,
content,
avatar,
image,
postId,
};
},
......
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