Skip to content

Q
quasar-web-base
Commit 49a74b25 authored by Võ Quang Thành Đạt's avatar Võ Quang Thành Đạt
Browse files
Options

create customer page

parent db1fd0e0
Hide whitespace changes
Inline Side-by-side
Showing with 393 additions and 270 deletions
src/assets/configurations.example.ts
View file @ 49a74b25
...@@ -51,4 +51,8 @@ export enum API_PATHS { ...@@ -51,4 +51,8 @@ export enum API_PATHS {
getDetailUnit = 'artistOwner/detail', getDetailUnit = 'artistOwner/detail',
updateUnit = 'artistOwner/update', updateUnit = 'artistOwner/update',
addArtist = 'artist/add', addArtist = 'artist/add',
listCustomers = 'customer',
listCustomerLevel = 'customerLevel',
addCustomer = 'customer/add',
deleteCustomer = 'customer/delete',
} }
src/assets/type.ts
View file @ 49a74b25
...@@ -216,3 +216,28 @@ export type DetailUnit = { ...@@ -216,3 +216,28 @@ export type DetailUnit = {
fields: Array<FieldType>; fields: Array<FieldType>;
contracts: Array<Contract>; contracts: Array<Contract>;
}; };
export type CustomerType = {
id: number;
code: string;
userName: string;
fullName: string;
companyName: string;
taxCode: string;
email: string;
status: number;
phone: string;
password: string;
address: string;
type: string;
representative: string;
position: string;
level: string;
};
export type CustomerLevelType = {
id: number;
name: string;
description: string;
level: number;
status: number;
};
src/components/customer/add-new-customer-dialog/AddNewCustomerDialog.ts
View file @ 49a74b25
import { defineComponent } from 'vue'; import { defineComponent, PropType, Ref, ref, watch } from 'vue';
import { i18n } from 'src/boot/i18n'; import { i18n } from 'src/boot/i18n';
import { isEmail } from '../../../boot/functions'; import { isEmail } from '../../../boot/functions';
import { isMobilePhone } from '../../../boot/functions'; import { isMobilePhone } from '../../../boot/functions';
import { CustomerLevelType } from 'src/assets/type';
export default defineComponent({ export default defineComponent({
props: { props: {
...@@ -9,27 +10,84 @@ export default defineComponent({ ...@@ -9,27 +10,84 @@ export default defineComponent({
type: Boolean, type: Boolean,
required: true, required: true,
}, },
ratingsOptions: {type: Array, required: true}, levelOptions: {
businessTypeOptions: {type: Array, required: true}, type: Array as PropType<CustomerLevelType[]>,
userName: { type: String, required: true }, required: true,
customerName: { type: String, required: true }, },
businessName: { type: String, required: true },
taxCode: { type: Number, required: true },
email: { type: String, required: true },
ratings: { type: String, required: true },
address: { type: String, required: true },
businessType: { type: String, required: true },
representative: { type: String, required: true },
position: { type: String, required: true },
phone: { type: String, required: true },
status: { type: Boolean, required: true },
}, },
setup() { setup(props, context) {
watch(
() => props.showDialog,
(value) => {
if (value) {
void resetData();
}
}
);
const code: Ref<string | null> = ref(null);
const userName: Ref<string | null> = ref(null);
const fullName: Ref<string | null> = ref(null);
const companyName: Ref<string | null> = ref(null);
const taxCode: Ref<string | null> = ref(null);
const email: Ref<string | null> = ref(null);
const status: Ref<number | null> = ref(2);
const phone: Ref<string | null> = ref(null);
const password: Ref<string | null> = ref(null);
const address: Ref<string | null> = ref(null);
const type: Ref<string | null> = ref(null);
const representative: Ref<string | null> = ref(null);
const position: Ref<string | null> = ref(null);
const level: Ref<CustomerLevelType | null> = ref(null);
const confirmAddCustomer = () => {
context.emit('addNewCustomer', {
code: code.value,
userName: userName.value,
fullName: fullName.value,
companyName: companyName.value,
taxCode: taxCode.value,
email: email.value,
status: status.value,
phone: phone.value,
password: password.value,
address: address.value,
type: type.value,
representative: representative.value,
position: position.value,
level: level.value,
});
};
const resetData = () => {
code.value = null;
userName.value = null;
fullName.value = null;
companyName.value = null;
taxCode.value = null;
email.value = null;
status.value = 2;
phone.value = null;
password.value = null;
address.value = null;
type.value = null;
representative.value = null;
position.value = null;
level.value = null;
};
const userNameRules = [ const userNameRules = [
(val?: string) => (val?: string) =>
(val && val.trim().length) || (val && val.trim().length) ||
i18n.global.t('customer.validateMessages.requireUserName'), i18n.global.t('customer.validateMessages.requireUserName'),
]; ];
const passwordRules = [
(val?: string) =>
(val && val.trim().length) ||
i18n.global.t('customer.validateMessages.requirePassword'),
];
const codeRules = [
(val?: string) =>
(val && val.trim().length) ||
i18n.global.t('customer.validateMessages.requireCode'),
];
const customerNameRules = [ const customerNameRules = [
(val?: string) => (val?: string) =>
(val && val.trim().length) || (val && val.trim().length) ||
...@@ -41,18 +99,18 @@ export default defineComponent({ ...@@ -41,18 +99,18 @@ export default defineComponent({
i18n.global.t('customer.validateMessages.requireBusinessName'), i18n.global.t('customer.validateMessages.requireBusinessName'),
]; ];
const taxCodeRules = [ const taxCodeRules = [
(val?: number) => (val?: number) =>
val !== undefined || val !== undefined ||
i18n.global.t('customer.validateMessages.requireTaxCode'), i18n.global.t('customer.validateMessages.requireTaxCode'),
]; ];
const phoneRules = [ const phoneRules = [
(val?: string) => (val?: string) =>
(val && val.trim().length) || (val && val.trim().length) ||
i18n.global.t('customer.validateMessages.requirePhone'), i18n.global.t('customer.validateMessages.requirePhone'),
(val: string) => (val: string) =>
isMobilePhone(val) || isMobilePhone(val) ||
i18n.global.t('customer.validateMessages.isPhone'), i18n.global.t('customer.validateMessages.isPhone'),
]; ];
const emailRules = [ const emailRules = [
(val?: string) => (val?: string) =>
(val && val.trim().length) || (val && val.trim().length) ||
...@@ -76,19 +134,21 @@ export default defineComponent({ ...@@ -76,19 +134,21 @@ export default defineComponent({
i18n.global.t('customer.validateMessages.requireRatings'), i18n.global.t('customer.validateMessages.requireRatings'),
]; ];
const representativeRules = [ const representativeRules = [
(val?: string) => (val?: string) =>
(val && val.trim().length) || (val && val.trim().length) ||
i18n.global.t('customer.validateMessages.requireRepresentative'), i18n.global.t('customer.validateMessages.requireRepresentative'),
]; ];
const positionRules = [ const positionRules = [
(val?: string) => (val?: string) =>
(val && val.trim().length) || (val && val.trim().length) ||
i18n.global.t('customer.validateMessages.requiredPosition'), i18n.global.t('customer.validateMessages.requiredPosition'),
]; ];
return { return {
userNameRules, userNameRules,
customerNameRules, customerNameRules,
businessNameRules, businessNameRules,
passwordRules,
codeRules,
taxCodeRules, taxCodeRules,
emailRules, emailRules,
ratingsRules, ratingsRules,
...@@ -97,23 +157,22 @@ export default defineComponent({ ...@@ -97,23 +157,22 @@ export default defineComponent({
representativeRules, representativeRules,
positionRules, positionRules,
phoneRules, phoneRules,
userName,
fullName,
companyName,
taxCode,
email,
status,
phone,
password,
address,
type,
representative,
position,
level,
code,
confirmAddCustomer,
}; };
}, },
emits: [ emits: ['update:showDialog', 'click:CloseBtn', 'addNewCustomer'],
'update:showDialog',
'click:CloseBtn',
'update:userName',
'update:customerName',
'update:businessName',
'update:taxCode',
'update:email',
'update:ratings',
'update:address',
'update:businessType',
'update:representative',
'update:position',
'update:phone',
'update:status',
'addNewCustomer',
],
}); });
src/components/customer/add-new-customer-dialog/index.vue
View file @ 49a74b25
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
@update:model-value="$emit('update:showDialog', $event)" @update:model-value="$emit('update:showDialog', $event)"
> >
<q-card style="min-width: 900px" bordered> <q-card style="min-width: 900px" bordered>
<q-form greedy @submit.prevent="$emit('addNewCustomer')"> <q-form greedy @submit.prevent="confirmAddCustomer">
<q-card-section> <q-card-section>
<q-item> <q-item>
<q-item-section> <q-item-section>
...@@ -21,94 +21,82 @@ ...@@ -21,94 +21,82 @@
<div class="row q-col-gutter-sm"> <div class="row q-col-gutter-sm">
<div class="col-6"> <div class="col-6">
<q-input <q-input
:model-value="userName" v-model="userName"
@update:model-value="$emit('update:userName', $event)"
:label="$t('customer.dialogLabel.fieldLabels.userName')" :label="$t('customer.dialogLabel.fieldLabels.userName')"
:rules="userNameRules" :rules="userNameRules"
hide-bottom-space hide-bottom-space
type="text" type="text"
class="q-my-sm" class="q-my-sm"
outlined outlined
clearable
></q-input> ></q-input>
<q-input <q-input
:model-value="customerName" v-model="password"
@update:model-value="$emit('update:customerName', $event)" :label="$t('customer.dialogLabel.fieldLabels.password')"
:rules="passwordRules"
hide-bottom-space
type="password"
class="q-my-sm"
outlined
></q-input>
<q-input
v-model="code"
:label="$t('customer.dialogLabel.fieldLabels.code')"
:rules="codeRules"
hide-bottom-space
type="text"
class="q-my-sm"
outlined
></q-input>
<q-input
v-model="fullName"
:label="$t('customer.dialogLabel.fieldLabels.customerName')" :label="$t('customer.dialogLabel.fieldLabels.customerName')"
type="text" type="text"
class="q-my-sm" class="q-my-sm"
outlined outlined
:rules="customerNameRules" :rules="customerNameRules"
hide-bottom-space hide-bottom-space
clearable
></q-input> ></q-input>
<q-input <q-input
:model-value="businessName" v-model="companyName"
@update:model-value="$emit('update:businessName', $event)"
:label="$t('customer.dialogLabel.fieldLabels.businessName')" :label="$t('customer.dialogLabel.fieldLabels.businessName')"
type="text" type="text"
class="q-my-sm" class="q-my-sm"
outlined outlined
:rules="businessNameRules" :rules="businessNameRules"
hide-bottom-space hide-bottom-space
clearable
></q-input> ></q-input>
<q-input <q-input
:model-value="taxCode" v-model="taxCode"
@update:model-value="$emit('update:taxCode', $event)"
:label="$t('customer.dialogLabel.fieldLabels.taxCode')" :label="$t('customer.dialogLabel.fieldLabels.taxCode')"
type="number" type="number"
class="q-my-sm" class="q-my-sm"
outlined outlined
:rules="taxCodeRules" :rules="taxCodeRules"
hide-bottom-space hide-bottom-space
clearable
></q-input> ></q-input>
<q-input <q-input
:model-value="email" v-model="address"
@update:model-value="$emit('update:email', $event)" :label="$t('customer.dialogLabel.fieldLabels.address')"
:label="$t('customer.dialogLabel.fieldLabels.email')"
type="text" type="text"
class="q-my-sm" class="q-my-sm"
:rules="addressRules"
outlined outlined
:rules="emailRules"
hide-bottom-space hide-bottom-space
clearable
></q-input> ></q-input>
<q-select
:model-value="ratings"
@update:model-value="$emit('update:ratings', $event)"
:label="$t('customer.dialogLabel.fieldLabels.ratings')"
:options="ratingsOptions"
:rules="ratingsRules"
emit-value
map-options
option-value="id"
option-label="text"
type="text"
class="q-my-sm"
outlined
hide-bottom-space
clearable
></q-select>
</div> </div>
<div class="col-6"> <div class="col-6">
<q-input <q-input
:model-value="address" v-model="email"
@update:model-value="$emit('update:address', $event)" :label="$t('customer.dialogLabel.fieldLabels.email')"
:label="$t('customer.dialogLabel.fieldLabels.address')"
type="text" type="text"
class="q-my-sm" class="q-my-sm"
:rules="addressRules"
outlined outlined
:rules="emailRules"
hide-bottom-space hide-bottom-space
clearable
></q-input> ></q-input>
<q-select <q-input
:model-value="businessType" v-model="type"
@update:model-value="$emit('update:businessType', $event)"
:label="$t('customer.dialogLabel.fieldLabels.businessType')" :label="$t('customer.dialogLabel.fieldLabels.businessType')"
:options="businessTypeOptions"
:rules="businessTypeRules" :rules="businessTypeRules"
emit-value emit-value
map-options map-options
...@@ -117,52 +105,54 @@ ...@@ -117,52 +105,54 @@
class="q-my-sm" class="q-my-sm"
outlined outlined
hide-bottom-space hide-bottom-space
></q-input>
<q-select
v-model="level"
:label="$t('customer.dialogLabel.fieldLabels.ratings')"
:options="levelOptions"
:rules="ratingsRules"
map-options
option-value="id"
option-label="name"
type="text"
class="q-my-sm"
outlined
clearable clearable
hide-bottom-space
></q-select> ></q-select>
<q-input <q-input
:model-value="representative" v-model="representative"
emit-value
@update:model-value="$emit('update:representative', $event)"
:label="$t('customer.dialogLabel.fieldLabels.representative')" :label="$t('customer.dialogLabel.fieldLabels.representative')"
class="q-my-sm" class="q-my-sm"
type="text" type="text"
outlined outlined
:rules="representativeRules" :rules="representativeRules"
hide-bottom-space hide-bottom-space
clearable
></q-input> ></q-input>
<q-input <q-input
:model-value="position" v-model="position"
emit-value
@update:model-value="$emit('update:position', $event)"
:label="$t('customer.dialogLabel.fieldLabels.position')" :label="$t('customer.dialogLabel.fieldLabels.position')"
class="q-my-sm" class="q-my-sm"
type="text" type="text"
outlined outlined
:rules="positionRules" :rules="positionRules"
hide-bottom-space hide-bottom-space
clearable
></q-input> ></q-input>
<q-input <q-input
:model-value="phone" v-model="phone"
emit-value
@update:model-value="$emit('update:phone', $event)"
:label="$t('customer.dialogLabel.fieldLabels.phone')" :label="$t('customer.dialogLabel.fieldLabels.phone')"
class="q-my-sm" class="q-my-sm"
type="number" type="number"
:rules="phoneRules" :rules="phoneRules"
outlined outlined
hide-bottom-space hide-bottom-space
clearable
></q-input> ></q-input>
<div style="padding-top: 13px; padding-left: 12px"> <div style="padding-top: 13px; padding-left: 12px">
<span class="text-body1">{{ <span class="text-body1">{{
$t('customer.dialogLabel.fieldLabels.status') $t('customer.dialogLabel.fieldLabels.status')
}}</span }}</span
><q-toggle ><q-toggle :true-value="1" :false-value="2" v-model="status" />
:model-value="status"
@update:model-value="$emit('update:status', $event)"
/>
</div> </div>
</div> </div>
</div> </div>
......
src/i18n/vi/index.ts
View file @ 49a74b25
...@@ -317,6 +317,8 @@ export default { ...@@ -317,6 +317,8 @@ export default {
fieldLabels: { fieldLabels: {
userName: 'Tên đăng nhập *', userName: 'Tên đăng nhập *',
customerName: 'Họ tên *', customerName: 'Họ tên *',
password: 'Mật khẩu *',
code: 'Mã khách hàng *',
businessName: 'Tên doanh nghiệp *', businessName: 'Tên doanh nghiệp *',
taxCode: 'Mã số thuế *', taxCode: 'Mã số thuế *',
email: 'Email *', email: 'Email *',
...@@ -332,6 +334,7 @@ export default { ...@@ -332,6 +334,7 @@ export default {
toolTipMessage: { toolTipMessage: {
updateCustomerInfo: 'Cập nhật', updateCustomerInfo: 'Cập nhật',
informationCustomer: 'Thông tin', informationCustomer: 'Thông tin',
deleteCustomer: 'Xoá',
}, },
crudActions: { crudActions: {
save: 'Lưu', save: 'Lưu',
...@@ -339,6 +342,8 @@ export default { ...@@ -339,6 +342,8 @@ export default {
}, },
validateMessages: { validateMessages: {
requireUserName: 'Vui lòng nhập Tên đăng nhập', requireUserName: 'Vui lòng nhập Tên đăng nhập',
requirePassword: 'Vui lòng nhập Mật khẩu',
requireCode: 'Vui lòng nhập Mã khách hàng',
requireCustomerName: 'Vui lòng nhập Họ tên', requireCustomerName: 'Vui lòng nhập Họ tên',
requireBusinessName: 'Vui lòng nhập Tên Doanh nghiệp', requireBusinessName: 'Vui lòng nhập Tên Doanh nghiệp',
requireTaxCode: 'Vui lòng nhập Mã số thuế', requireTaxCode: 'Vui lòng nhập Mã số thuế',
...@@ -355,13 +360,13 @@ export default { ...@@ -355,13 +360,13 @@ export default {
confirmActionsTitle: { confirmActionsTitle: {
confirmDeleteUserTitle: 'Xác nhận', confirmDeleteUserTitle: 'Xác nhận',
confirmDeleteUserCancelBtnLabel: 'Huỷ', confirmDeleteUserCancelBtnLabel: 'Huỷ',
confirmDeleteUserContent: 'Bạn có chắc muốn xoá tài khoản', confirmDeleteUserContent: 'Bạn có chắc muốn xoá khách hàng này không ?',
confirmResetPasswordContent: confirmResetPasswordContent:
'Bạn có muốn reset mật khẩu của người dùng này không', 'Bạn có muốn reset mật khẩu của người dùng này không ?',
}, },
actionMessages: { actionMessages: {
addNewUserAccess: 'Thêm tài khoản thành công', addNewUserAccess: 'Thêm tài khoản thành công',
deleteUserAccess: 'Xoá tài khoản thành công', deleteUserAccess: 'Xoá khách hàng thành công',
updateUserAccess: 'Cập nhật 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', resetPasswordAccess: 'Reset mật khẩu thành công',
}, },
......
src/pages/khach-hang/customer.ts
View file @ 49a74b25
import { i18n } from 'src/boot/i18n'; import { i18n } from 'src/boot/i18n';
import { defineComponent, onMounted, ref, Ref } from 'vue'; import { defineComponent, onMounted, Ref, ref } from 'vue';
import Pagination from 'components/pagination/index.vue'; import Pagination from 'components/pagination/index.vue';
import AddNewCustomerDialogComponent from '../../components/customer/add-new-customer-dialog/index.vue'; import AddNewCustomerDialogComponent from '../../components/customer/add-new-customer-dialog/index.vue';
import UpdateNewCustomerDialogComponent from '../../components/customer/update-new-customer-dialog/index.vue'; import UpdateNewCustomerDialogComponent from '../../components/customer/update-new-customer-dialog/index.vue';
// import { API_PATHS } from 'src/assets/configurations.example'; import { API_PATHS, config } from 'src/assets/configurations';
export type CustomerInfoType = { import { AxiosResponse } from 'axios';
id: number; import { api, BaseResponseBody } from 'src/boot/axios';
userName: string | null; import {
customerName: string | null; CustomerType,
businessName: string | null; PaginationResponse,
taxCode: number; CustomerLevelType,
email: string | null; } from 'src/assets/type';
ratings: string | null; import { Dialog, Notify } from 'quasar';
address: string | null;
businessType: string | null;
representative: string | null;
position: string | null;
phone: string | null;
status: number;
};
export default defineComponent({ export default defineComponent({
components: { components: {
AddNewCustomerDialogComponent, AddNewCustomerDialogComponent,
...@@ -37,11 +30,11 @@ export default defineComponent({ ...@@ -37,11 +30,11 @@ export default defineComponent({
sortable: false, sortable: false,
}, },
{ {
name: 'customerCode', name: 'code',
field: 'customerCode', field: 'code',
required: true, required: true,
label: i18n.global.t('customer.tableColumnsCustomer.customerCode'), label: i18n.global.t('customer.tableColumnsCustomer.customerCode'),
align: 'left', align: 'center',
headerStyle: 'text-align: center !important;', headerStyle: 'text-align: center !important;',
sortable: false, sortable: false,
}, },
...@@ -64,8 +57,8 @@ export default defineComponent({ ...@@ -64,8 +57,8 @@ export default defineComponent({
sortable: false, sortable: false,
}, },
{ {
name: 'businessName', name: 'companyName',
field: 'businessName', field: 'companyName',
required: true, required: true,
label: i18n.global.t('customer.tableColumnsCustomer.businessName'), label: i18n.global.t('customer.tableColumnsCustomer.businessName'),
headerStyle: 'text-align: center !important;', headerStyle: 'text-align: center !important;',
...@@ -91,8 +84,8 @@ export default defineComponent({ ...@@ -91,8 +84,8 @@ export default defineComponent({
sortable: false, sortable: false,
}, },
{ {
name: 'ratings', name: 'level',
field: 'ratings', field: 'level',
required: true, required: true,
label: i18n.global.t('customer.tableColumnsCustomer.ratings'), label: i18n.global.t('customer.tableColumnsCustomer.ratings'),
headerStyle: 'text-align: center !important;', headerStyle: 'text-align: center !important;',
...@@ -122,104 +115,145 @@ export default defineComponent({ ...@@ -122,104 +115,145 @@ export default defineComponent({
const pageIndex = ref(1); const pageIndex = ref(1);
const pageSize = ref(20); const pageSize = ref(20);
const totalPage = ref(10); const totalPage = ref(10);
const companyNameSelected: Ref<string | null> = ref(null);
const taxCodeSelected: Ref<string | null> = ref(null);
const levelSelected: Ref<CustomerLevelType | null> = ref(null);
const id: Ref<number | undefined> = ref(undefined);
const code: Ref<string | null> = ref(null);
const userName: Ref<string | null> = ref(null);
const fullName: Ref<string | null> = ref(null);
const companyName: Ref<string | null> = ref(null);
const taxCode: Ref<string | null> = ref(null);
const email: Ref<string | null> = ref(null);
const status: Ref<number | null> = ref(2);
const phone: Ref<string | null> = ref(null);
const password: Ref<string | null> = ref(null);
const address: Ref<string | null> = ref(null);
const type: Ref<string | null> = ref(null);
const representative: Ref<string | null> = ref(null);
const position: Ref<string | null> = ref(null);
const level: Ref<CustomerLevelType | null> = ref(null);
const id: Ref<number> = ref(0); const levelOptions: Ref<CustomerLevelType[] | null> = ref([]);
const businessName: Ref<string | undefined> = ref(); const getListCustomers = async () => {
const taxCode: Ref<number | undefined> = ref(); try {
const userName: Ref<string | undefined> = ref(); const response = (await api({
const email: Ref<string | undefined> = ref(); url: API_PATHS.listCustomers,
const address: Ref<string | undefined> = ref(); method: 'GET',
const customerName: Ref<string | undefined> = ref(); params: {
const ratings: Ref<number | undefined> = ref(); pageIndex: pageIndex.value,
const ratingsOptions = ref([ pageSize: pageSize.value,
{ id: 1, text: 'VIP_1' }, customerLevel: levelSelected.value?.id,
{ id: 2, text: 'VIP_2' }, },
{ id: 3, text: 'VIP_3' }, })) as AxiosResponse<
]); BaseResponseBody<PaginationResponse<CustomerType>>
const businessType: Ref<number | undefined> = ref(); >;
const businessTypeOptions = ref([ if (response.data.error.code === config.API_RES_CODE.OK.code) {
{ id: 1, text: 'Doanh nghiệp A' }, userTableRowsCustomer.value = response.data.data.data;
{ id: 2, text: 'Doanh nghiệp B' }, totalPage.value = response.data.data.totalPages;
{ id: 3, text: 'Doanh nghiệp C' }, console.log(response.data.data);
]); }
const representative: Ref<string | undefined> = ref(); } catch (error) {}
const position: Ref<string | undefined> = ref();
const phone: Ref<string | undefined> = ref();
const status: Ref<boolean | number> = ref(true);
const getListCustomer = () => {
// const response = (await api({
// url: API_PATHS.getListArtist,
// method: 'GET',
// params: {
// pageIndex: pageIndex.value,
// pageSize: pageSize.value,
// },
// })) as AxiosResponse<BaseResponseBody<unknown>>;
const fakeData: unknown[] = [
{
id: 1,
stt: 1,
customerCode: '0001',
userName: 'DuongNA01',
fullName: 'Nguyễn Tùng Dương',
businessName: 'TNHH Hà Đông',
taxCode: '1234567890',
email: 'info@hadong.vn',
ratings: 'VIP_1',
status: 1,
},
{
id: 2,
stt: 2,
customerCode: '0001',
userName: 'DuongNA01',
fullName: 'Nguyễn Tùng Dương',
businessName: 'TNHH Hà Đông',
taxCode: '1234567890',
email: 'info@hadong.vn',
ratings: 'VIP_1',
status: 0,
},
];
userTableRowsCustomer.value = fakeData;
}; };
const filterListCustomer = () => { const getCustomerLevelOptions = async () => {
// const response = (await api({ const response = (await api({
// url: API_PATHS.filterListArtist, url: API_PATHS.listCustomerLevel,
// method: 'GET', method: 'GET',
// params: { params: {},
// businessName: businessName.value })) as AxiosResponse<BaseResponseBody<CustomerLevelType[]>>;
// taxCode: taxCode.value if (response.data.error.code === config.API_RES_CODE.OK.code) {
// ratings: ratings.value levelOptions.value = response.data.data;
// }, }
// })) as AxiosResponse<BaseResponseBody<Artist[]>>; };
// userTableRowsArtist.value = response.data.data const confirmDeleteCustomer = (id: number) => {
Dialog.create({
title: i18n.global.t(
'customer.confirmActionsTitle.confirmDeleteUserTitle'
),
message: i18n.global.t(
'customer.confirmActionsTitle.confirmDeleteUserContent'
),
cancel: i18n.global.t(
'customer.confirmActionsTitle.confirmDeleteUserCancelBtnLabel'
),
color: 'negative',
}).onOk(() => {
void deleteCustomer(id);
});
};
const deleteCustomer = async (id: number) => {
try {
const deleteResult = (await api({
url: API_PATHS.deleteCustomer,
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('customer.actionMessages.deleteUserAccess'),
});
void getListCustomers();
}
} catch (error) {}
};
const addCustomer = async (item: CustomerType) => {
try {
const response = (await api({
url: API_PATHS.addCustomer,
method: 'POST',
data: {
code: item.code,
userName: item.userName,
fullName: item.fullName,
companyName: item.companyName,
taxCode: item.taxCode,
email: item.email,
status: item.status,
phone: item.phone,
password: item.password,
address: item.address,
type: item.type,
representative: item.representative,
position: item.position,
level: item.level,
},
})) as AxiosResponse<BaseResponseBody<unknown>>;
if (response.data.error.code === config.API_RES_CODE.OK.code) {
Notify.create({
type: 'positive',
message: i18n.global.t('artist.actionMessages.addNewArtistAccess'),
});
void getListCustomers();
showDialog.value = false;
}
} catch (error) {}
}; };
const changePageSize = () => { const changePageSize = () => {
pageIndex.value = 1; pageIndex.value = 1;
void getListCustomer(); void getListCustomers();
}; };
const openAddCustomerDialog = () => { const openAddCustomerDialog = () => {
showDialog.value = true; showDialog.value = true;
userName.value = ''; userName.value = null;
customerName.value = ''; fullName.value = null;
businessName.value = ''; companyName.value = null;
taxCode.value = undefined; taxCode.value = null;
email.value = ''; email.value = null;
ratings.value = undefined; level.value = null;
address.value = ''; address.value = null;
businessType.value = undefined; type.value = null;
representative.value = ''; representative.value = null;
position.value = ''; position.value = null;
phone.value = ''; phone.value = null;
status.value = 2;
}; };
const addNewCustomer = () => {
//gọi api thêm mới
try {
} catch (error) {}
};
const getDetailCustomer = () => { const getDetailCustomer = () => {
// gọi api chi tiết cần có id để lấy value cho từng customer // gọi api chi tiết cần có id để lấy value cho từng customer
// const response = (await api({ // const response = (await api({
...@@ -250,40 +284,45 @@ export default defineComponent({ ...@@ -250,40 +284,45 @@ export default defineComponent({
}; };
onMounted(() => { onMounted(() => {
void getListCustomer(); void getListCustomers();
void getCustomerLevelOptions();
}); });
return { return {
openUpdateCustomerDialog, openUpdateCustomerDialog,
updateCustomer, updateCustomer,
openAddCustomerDialog, openAddCustomerDialog,
addNewCustomer, addCustomer,
showDialogUpdate, showDialogUpdate,
showDialog, showDialog,
id, id,
userName, userName,
customerName, fullName,
businessName, companyName,
taxCode, taxCode,
code,
password,
type,
email, email,
ratings, level,
ratingsOptions, levelOptions,
address, address,
businessType,
businessTypeOptions,
representative, representative,
position, position,
levelSelected,
phone, phone,
companyNameSelected,
taxCodeSelected,
status, status,
userTableColumnsCustomer, userTableColumnsCustomer,
userTableRowsCustomer, userTableRowsCustomer,
getListCustomer, getListCustomers,
pageIndex, pageIndex,
pageSize, pageSize,
filterListCustomer,
// getDetailCustomer,
dataTest, dataTest,
totalPage, totalPage,
changePageSize, changePageSize,
getCustomerLevelOptions,
confirmDeleteCustomer,
}; };
}, },
}); });
src/pages/khach-hang/index.vue
View file @ 49a74b25
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<q-space></q-space> <q-space></q-space>
<div class="col-2"> <div class="col-2">
<q-input <q-input
v-model="businessName" v-model="companyNameSelected"
dense dense
outlined outlined
:label="$t('customer.tableColumnsCustomer.businessName')" :label="$t('customer.tableColumnsCustomer.businessName')"
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
</div> </div>
<div class="col-2"> <div class="col-2">
<q-input <q-input
v-model="taxCode" v-model="taxCodeSelected"
dense dense
outlined outlined
:label="$t('customer.tableColumnsCustomer.taxCode')" :label="$t('customer.tableColumnsCustomer.taxCode')"
...@@ -25,9 +25,9 @@ ...@@ -25,9 +25,9 @@
</div> </div>
<div class="col-2" dense outlined> <div class="col-2" dense outlined>
<q-select <q-select
v-model="ratings" v-model="levelSelected"
:options="ratingsOptions" :options="levelOptions"
option-label="text" option-label="name"
option-value="id" option-value="id"
dense dense
outlined outlined
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
no-caps no-caps
:label="$t('crudActions.search')" :label="$t('crudActions.search')"
style="width: 100px" style="width: 100px"
@click="filterListCustomer" @click="getListCustomers"
> >
</q-btn> </q-btn>
</div> </div>
...@@ -65,13 +65,15 @@ ...@@ -65,13 +65,15 @@
separator="cell" separator="cell"
hide-pagination hide-pagination
> >
<template v-slot:body-cell-stt="item">
<q-td style="padding: 0; height: 100%">
<div align="center">
{{ item.rowIndex + 1 }}
</div>
</q-td>
</template>
<template v-slot:body-cell-action="rowData"> <template v-slot:body-cell-action="rowData">
<q-td style="padding: 0" class="flex flex-center"> <q-td style="padding: 0" class="flex flex-center">
<q-btn flat round color="primary" icon="mdi-information-outline">
<q-tooltip :offset="[20, 10]">{{
$t('customer.toolTipMessage.informationCustomer')
}}</q-tooltip>
</q-btn>
<q-btn <q-btn
flat flat
round round
...@@ -83,18 +85,29 @@ ...@@ -83,18 +85,29 @@
$t('customer.toolTipMessage.updateCustomerInfo') $t('customer.toolTipMessage.updateCustomerInfo')
}}</q-tooltip> }}</q-tooltip>
</q-btn> </q-btn>
<q-btn
flat
round
color="primary"
icon="mdi-delete-outline"
@click="confirmDeleteCustomer(rowData.row.id)"
>
<q-tooltip :offset="[20, 10]">{{
$t('customer.toolTipMessage.deleteCustomer')
}}</q-tooltip>
</q-btn>
</q-td> </q-td>
</template> </template>
<template v-slot:body-cell-status="rowData"> <template v-slot:body-cell-status="rowData">
<q-td> <q-td>
<div align="center"> <div align="center">
<q-chip <q-chip
:color="rowData.value ? 'positive' : 'orange'" :color="rowData.value === 1 ? 'positive' : 'orange'"
text-color="white" text-color="white"
size="sm" size="sm"
> >
{{ {{
rowData.value rowData.value === 1
? $t('customer.statusLabel.active') ? $t('customer.statusLabel.active')
: $t('customer.statusLabel.inactive') : $t('customer.statusLabel.inactive')
}} }}
...@@ -109,30 +122,17 @@ ...@@ -109,30 +122,17 @@
v-model:pageSize="pageSize" v-model:pageSize="pageSize"
:totalPage="totalPage" :totalPage="totalPage"
@update:pageSize="changePageSize" @update:pageSize="changePageSize"
@update:currentPage="getListCustomer" @update:currentPage="getListCustomers"
/> />
<AddNewCustomerDialogComponent <AddNewCustomerDialogComponent
v-model:show-dialog="showDialog" v-model:show-dialog="showDialog"
v-model:user-name="userName" :level-options="levelOptions"
v-model:customer-name="customerName"
v-model:business-name="businessName"
v-model:tax-code="taxCode"
v-model:email="email"
v-model:ratings="ratings"
v-model:address="address"
v-model:business-type="businessType"
v-model:representative="representative"
v-model:position="position"
v-model:phone="phone"
v-model:status="status"
:ratings-options="ratingsOptions"
:business-type-options="businessTypeOptions"
@click:CloseBtn="showDialog = false" @click:CloseBtn="showDialog = false"
@addNewCustomer="addNewCustomer" @addNewCustomer="addCustomer"
></AddNewCustomerDialogComponent> ></AddNewCustomerDialogComponent>
<UpdateNewCustomerDialogComponent <!-- <UpdateNewCustomerDialogComponent
v-model:show-dialog-update="showDialogUpdate" v-model:show-dialog-update="showDialogUpdate"
v-model:user-name="userName" v-model:user-name="userName"
v-model:customer-name="customerName" v-model:customer-name="customerName"
...@@ -150,7 +150,7 @@ ...@@ -150,7 +150,7 @@
:business-type-options="businessTypeOptions" :business-type-options="businessTypeOptions"
@click:CloseBtn="showDialogUpdate = false" @click:CloseBtn="showDialogUpdate = false"
@updateNewCustomer="updateCustomer" @updateNewCustomer="updateCustomer"
></UpdateNewCustomerDialogComponent> ></UpdateNewCustomerDialogComponent> -->
</div> </div>
</div> </div>
</div> </div>
......
src/pages/nghe-sy/index.vue
View file @ 49a74b25
...@@ -104,7 +104,7 @@ ...@@ -104,7 +104,7 @@
flat flat
round round
color="primary" color="primary"
icon="mdi-delete" icon="mdi-delete-outline"
@click="confirmDeleteArtist(item.row.id)" @click="confirmDeleteArtist(item.row.id)"
> >
<q-tooltip :offset="[20, 10]">{{ <q-tooltip :offset="[20, 10]">{{
......
src/pages/them-nghe-sy/AddArtist.ts
View file @ 49a74b25
...@@ -368,7 +368,8 @@ export default defineComponent({ ...@@ -368,7 +368,8 @@ export default defineComponent({
avatar: avatar.value, avatar: avatar.value,
artistCode: artistCode.value, artistCode: artistCode.value,
artistName: artistName.value, artistName: artistName.value,
birthday: birthday.value, // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
birthday: birthday.value + '00:00:00',
sex: sex.value, sex: sex.value,
address: address.value, address: address.value,
phoneNumber: phoneNumber.value, phoneNumber: phoneNumber.value,
......
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