Skip to content

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

update

parent 00f5dcf5
Show whitespace changes
Inline Side-by-side
Showing with 635 additions and 4 deletions
src/assets/enums.ts
View file @ fa7c084a
...@@ -23,3 +23,8 @@ export enum FieldStatus { ...@@ -23,3 +23,8 @@ export enum FieldStatus {
active = 1, active = 1,
inactive = 0, inactive = 0,
} }
export enum PostStatus {
active = 1,
inactive = 0,
}
src/components/add-update-post/index.vue 0 → 100644
View file @ fa7c084a
<template>
<q-dialog
persistent
:model-value="isOpened"
@update:model-value="$emit('update:isOpened', $event)"
>
<q-card class="full-width" style="max-width: 50rem" bordered>
<q-form
greedy
@submit.prevent="
$emit('savePostInfo', {});
$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('post.dialogLabel.title.addPost')
: $t('post.dialogLabel.title.updatePost')
}}</q-item-label>
</q-item-section>
</q-item>
</q-card-section>
<q-separator />
<q-card-section
class="overflow-auto"
style="max-height: calc(100vh - 10rem)"
>
<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')"
type="text"
class="q-my-sm"
outlined
:rules="avatarRules"
clearable
></q-input>
</div>
<div class="col-6">
<q-input
:model-value="name"
@update:model-value="$emit('update:name', $event)"
:label="$t('post.dialogLabel.postLabels.name')"
type="text"
class="q-my-sm"
outlined
:rules="nameRules"
clearable
></q-input>
<q-input
:model-value="description"
@update:model-value="$emit('update:description', $event)"
:label="$t('post.dialogLabel.postLabels.description')"
type="text"
class="q-my-sm"
outlined
></q-input>
<q-input
:model-value="content"
@update:model-value="$emit('update:content', $event)"
:label="$t('post.dialogLabel.postLabels.content')"
:rules="contentRules"
type="textarea"
class="q-my-sm"
outlined
></q-input>
<div class="q-pt-sm">
<span class="text-body1">{{
$t('post.dialogLabel.postLabels.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('post.crudActions.cancel')"
@click="$emit('update:isOpened', false)"
/>
<q-btn
type="submit"
color="primary"
no-caps
style="width: 90px"
:label="$t('post.crudActions.save')"
/>
</div>
</q-card-actions>
</q-form>
</q-card>
</q-dialog>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { i18n } from 'src/boot/i18n';
export default defineComponent({
props: {
isOpened: {
type: Boolean,
required: true,
},
isUpdate: { type: Boolean, default: false },
avatar: { 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 = [
(val?: string) =>
(val && val.trim().length) ||
i18n.global.t('post.validateMessages.requireAvatar'),
];
const contentRules = [
(val?: string) =>
(val && val.trim().length) ||
i18n.global.t('post.validateMessages.requireContent'),
];
const nameRules = [
(val?: string) =>
(val && val.trim().length) ||
i18n.global.t('post.validateMessages.requireName'),
];
return {
contentRules,
nameRules,
avatarRules,
};
},
emits: [
'update:isOpened',
'update:avatar',
'update:name',
'update:description',
'update:content',
'update:status',
'savePostInfo',
],
});
</script>
src/components/units-manager/unit-add-update-bank-account/index.vue
View file @ fa7c084a
...@@ -81,7 +81,7 @@ ...@@ -81,7 +81,7 @@
:label=" :label="
$t('managingUnitAdd.dialogLabel.fieldLabels.numberCard') $t('managingUnitAdd.dialogLabel.fieldLabels.numberCard')
" "
type="text" type="number"
class="q-my-sm" class="q-my-sm"
outlined outlined
:rules="numberCardRules" :rules="numberCardRules"
......
src/i18n/vi/index.ts
View file @ fa7c084a
...@@ -592,7 +592,7 @@ export default { ...@@ -592,7 +592,7 @@ export default {
updateField: 'Cập nhật lĩnh vực hoạt động', updateField: 'Cập nhật lĩnh vực hoạt động',
}, },
fieldLabels: { fieldLabels: {
name: 'Tên lĩnh vực', name: 'Tên lĩnh vực *',
description: 'Mô tả *', description: 'Mô tả *',
status: 'Trạng thái', status: 'Trạng thái',
}, },
...@@ -621,4 +621,61 @@ export default { ...@@ -621,4 +621,61 @@ export default {
updateFieldAccess: 'Cập nhật 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',
}, },
}, },
//bài viết
post: {
title: 'Danh sách bài viết',
tableColumnsPost: {
stt: 'STT',
name: 'Tên bài viết',
avatar: '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',
updateTime: 'Thời gian cập nhật',
status: 'Trạng thái',
action: 'Chức năng',
},
statusLabel: {
active: 'Đang hoạt động',
inactive: 'Ngừng hoạt động',
},
dialogLabel: {
title: {
addPost: 'Thêm bài viết',
updatePost: 'Cập nhật Bài viết',
},
postLabels: {
name: 'Tên bài viết *',
avatar: 'Avatar *',
description: 'Mô tả',
content: 'Nội dung *',
status: 'Trạng thái',
},
},
toolTipMessage: {
updatePost: 'Cập nhật',
deletePost: 'Xoá',
},
crudActions: {
save: 'Lưu',
cancel: 'Đóng',
},
validateMessages: {
requireName: 'Vui lòng nhập Tên bài viết',
requireAvatar: 'Vui lòng chọn Avatar',
requireContent: 'Vui lòng nhập Nội dung',
},
confirmActionsPost: {
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?',
},
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ật bài viết thành công',
},
},
}; };
src/pages/bai-viet/index.vue 0 → 100644
View file @ fa7c084a
<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('post.title') }}
<q-separator vertical spaced />
</div>
<q-space></q-space>
<div class="col-2">
<q-input
v-model="namePost"
type="text"
dense
outlined
label="Tên bài viết"
clearable
></q-input>
</div>
<div class="col-auto">
<q-btn
color="primary"
no-caps
:label="$t('crudActions.search')"
@click="getListPost"
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="openAddPostDialog"
>
</q-btn>
</div>
<div class="col-12 q-mt-sm">
<q-table
:rows="postTableRows"
:columns="postTableColumns"
row-key="postName"
separator="cell"
:no-data-label="$t('emptyData')"
hide-pagination
class="sticky-header-table"
>
<template v-slot:body-cell-action="item">
<q-td style="padding: 0" class="flex flex-center">
<q-btn
flat
round
color="primary"
icon="mdi-account-edit-outline"
@click="openUpdatePostDialog(item.row.id)"
>
<q-tooltip :offset="[20, 10]">{{
$t('post.toolTipMessage.updatePost')
}}</q-tooltip>
</q-btn>
<q-btn
flat
round
color="primary"
icon="mdi-delete-outline"
@click="confirmDeletePost(item.row.id)"
>
<q-tooltip :offset="[20, 10]">{{
$t('post.toolTipMessage.deletePost')
}}</q-tooltip>
</q-btn>
</q-td>
</template>
<template v-slot:body-cell-avatar="avatar">
<q-td style="padding: 0; height: 100%" class="flex flex-center">
<q-img
style="width: 7rem"
fit="contain"
:ratio="16 / 9"
:src="avatar.row.avatar"
></q-img>
</q-td>
</template>
<template v-slot:body-cell-status="rowData">
<q-td>
<div align="center">
<q-chip
:color="
rowData.value === PostStatus.active ? 'positive' : 'orange'
"
text-color="white"
size="sm"
>
{{
rowData.value === PostStatus.active
? $t('post.statusLabel.active')
: $t('post.statusLabel.inactive')
}}
</q-chip>
</div>
</q-td>
</template>
</q-table>
</div>
<AddUpdatePostDialog
v-model:isOpened="addPostDialogIsOpened"
v-model:name="name"
v-model:description="description"
v-model:avatar="avatar"
v-model:content="content"
v-model:status="status"
isUpdate
@savePostInfo="addNewPost"
/>
<AddUpdatePostDialog
v-model:isOpened="updatePostDialogIsOpened"
v-model:name="name"
v-model:description="description"
v-model:avatar="avatar"
v-model:content="content"
v-model:status="status"
@savePostInfo="updateNewPost"
/>
</div>
</template>
<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 { PostStatus } from 'src/assets/enums';
import AddUpdatePostDialog from 'components/add-update-post/index.vue';
import { Dialog, Notify } from 'quasar';
export default defineComponent({
components: {
AddUpdatePostDialog,
},
setup() {
const postTableColumns = [
// {
// name: 'index',
// field: 'index',
// required: true,
// label: 'STT',
// align: 'center',
// sortable: false,
// },
{
name: 'name',
field: 'name',
required: true,
label: i18n.global.t('post.tableColumnsPost.name'),
headerStyle: 'text-align: center !important;',
align: 'left',
sortable: false,
},
{
name: 'avatar',
field: 'avatar',
required: true,
label: i18n.global.t('post.tableColumnsPost.avatar'),
headerStyle: 'text-align: center !important;',
align: 'center',
sortable: false,
},
{
name: 'category',
field: 'category',
required: true,
label: i18n.global.t('post.tableColumnsPost.category'),
headerStyle: 'text-align: center !important;',
align: 'left',
sortable: false,
},
{
name: 'addUser',
field: 'addUser',
required: true,
label: i18n.global.t('post.tableColumnsPost.addUser'),
headerStyle: 'text-align: center !important;',
align: 'left',
sortable: false,
},
{
name: 'addTime',
field: 'addTime',
required: true,
label: i18n.global.t('post.tableColumnsPost.addTime'),
headerStyle: 'text-align: center !important;',
align: 'left',
sortable: false,
},
{
name: 'updateUser',
field: 'updateUser',
required: true,
label: i18n.global.t('post.tableColumnsPost.updateUser'),
headerStyle: 'text-align: center !important;',
align: 'left',
sortable: false,
},
{
name: 'updateTime',
field: 'updateTime',
required: true,
label: i18n.global.t('post.tableColumnsPost.updateTime'),
headerStyle: 'text-align: center !important;',
align: 'left',
sortable: false,
},
{
name: 'status',
field: 'status',
required: true,
label: i18n.global.t('post.tableColumnsPost.status'),
headerStyle: 'text-align: center !important;',
align: 'center',
sortable: false,
},
{
name: 'action',
field: 'action',
required: true,
label: i18n.global.t('post.tableColumnsPost.action'),
headerStyle: 'text-align: center !important;',
align: 'center',
sortable: false,
},
];
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 status: Ref<number> = ref(PostStatus.active);
const postId: Ref<number | undefined> = ref(undefined);
const namePost = ref('');
//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 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);
});
};
//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) {}
};
const openAddPostDialog = () => {
name.value = '';
description.value = '';
status.value = PostStatus.active;
addPostDialogIsOpened.value = true;
};
//gọi api add
const addNewPost = async () => {
// const data = {
// name: name.value,
// description: description.value,
// status: status.value,
// };
// const response = (await api({
// // url: API_PATHS.addPost,
// method: 'POST',
// data,
// })) as AxiosResponse<BaseResponseBody<[]>>;
// if (response.data.error.code === config.API_RES_CODE.OK.code) {
// addPostDialogIsOpened.value = false;
// Notify.create({
// type: 'positive',
// message: i18n.global.t('post.actionMessages.addNewPostAccess'),
// actions: [{ icon: 'close', color: 'white' }],
// });
// void getListPost();
// }
};
const openUpdatePostDialog = (id: number) => {
void getDetailPost(id);
updatePostDialogIsOpened.value = true;
};
//gọi api detail
const getDetailPost = async (id: number) => {
// try {
// const response = (await api({
// url: API_PATHS.getDetailPost,
// method: 'GET',
// params: {
// id: id,
// },
// })) as AxiosResponse<BaseResponseBody<DetailPost>>;
// if (response.data.error.code === config.API_RES_CODE.OK.code) {
// postId.value = response.data.data.id;
// name.value = response.data.data.name;
// description.value = response.data.data.description;
// status.value = response.data.data.status;
// }
// } catch (error) {}
};
//gọi api update
const updateNewPost = async () => {
// const data = {
// id: postId.value,
// name: name.value,
// description: description.value,
// status: status.value,
// };
// const response = (await api({
// // url: API_PATHS.updatePost,
// method: 'POST',
// data,
// })) as AxiosResponse<BaseResponseBody<[]>>;
// if (response.data.error.code === config.API_RES_CODE.OK.code) {
// updatePostDialogIsOpened.value = false;
// Notify.create({
// type: 'positive',
// message: i18n.global.t('post.actionMessages.updatePostAccess'),
// actions: [{ icon: 'close', color: 'white' }],
// });
// void getListPost();
// }
};
onMounted(() => {
void getListPost();
});
return {
addPostDialogIsOpened,
updatePostDialogIsOpened,
postTableColumns,
postTableRows,
getListPost,
PostStatus,
openAddPostDialog,
name,
description,
status,
addNewPost,
confirmDeletePost,
deletePost,
openUpdatePostDialog,
getDetailPost,
updateNewPost,
namePost,
content,
avatar,
postId,
};
},
});
</script>
src/pages/linh-vuc-hoat-dong/index.vue
View file @ fa7c084a
...@@ -39,7 +39,7 @@ ...@@ -39,7 +39,7 @@
<q-table <q-table
:rows="fieldTableRows" :rows="fieldTableRows"
:columns="fieldTableColumns" :columns="fieldTableColumns"
row-key="unitCode" row-key="fieldName"
separator="cell" separator="cell"
:no-data-label="$t('emptyData')" :no-data-label="$t('emptyData')"
hide-pagination hide-pagination
......
src/pages/xep-hang-khach-hang/index.vue
View file @ fa7c084a
...@@ -59,7 +59,7 @@ ...@@ -59,7 +59,7 @@
<q-table <q-table
:rows="customerRankTableRows" :rows="customerRankTableRows"
:columns="customerRankTableColumns" :columns="customerRankTableColumns"
row-key="unitCode" row-key="customerRankCode"
separator="cell" separator="cell"
:no-data-label="$t('emptyData')" :no-data-label="$t('emptyData')"
hide-pagination hide-pagination
......
src/router/routes.ts
View file @ fa7c084a
...@@ -12,6 +12,7 @@ export enum Pages { ...@@ -12,6 +12,7 @@ export enum Pages {
addArtist = 'them-nghe-sy', addArtist = 'them-nghe-sy',
customerRank = 'xep-hang-khach-hang', customerRank = 'xep-hang-khach-hang',
field = 'linh-vuc-hoat-dong', field = 'linh-vuc-hoat-dong',
post = 'bai-viet',
} }
const routes: RouteRecordRaw[] = [ const routes: RouteRecordRaw[] = [
...@@ -74,6 +75,11 @@ const routes: RouteRecordRaw[] = [ ...@@ -74,6 +75,11 @@ const routes: RouteRecordRaw[] = [
component: () => import('pages/linh-vuc-hoat-dong/index.vue'), component: () => import('pages/linh-vuc-hoat-dong/index.vue'),
name: Pages.field, name: Pages.field,
}, },
{
path: 'bai-viet',
component: () => import('pages/bai-viet/index.vue'),
name: Pages.post,
},
], ],
}, },
......
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