Skip to content

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

update

parent a4742087
Hide whitespace changes
Inline Side-by-side
Showing with 248 additions and 121 deletions
src/components/artist-information/add-new-artist-dialog/NewArtistDialog.ts
View file @ d32877b5
......@@ -14,110 +14,153 @@ export default defineComponent({
artistName: { type: String, required: true },
birthday: { type: String, required: true },
sex: { type: Number, required: true },
nationality: { type: String, required: true },
nationality: { type: Number, required: true },
status: { type: Number, required: true },
address: { type: String, required: true },
field: { type: String, required: true },
work: { type: String, required: true },
qualification: { type: String, required: true },
artistLevel: { type: String, required: true },
field: { type: Number, required: true },
work: { type: Number, required: true },
qualification: { type: Number, required: true },
artistLevel: { type: Number, required: true },
phoneNumber: { type: String, required: true },
email: { type: String, required: true },
facebook: { type: String, required: true },
facebookMessage: { type: String, required: true },
instagram: { type: String, required: true },
whatsapp: { type: String, required: true },
sexOptions: { type: Array, required: true },
fieldOptions: { type: Array, required: true },
nationalityOptions: { type: Array, required: true },
professionOptions: { type: Array, required: true },
artistLevelOptions: { type: Array, required: true },
workOptions: { type: Array, required: true },
},
setup() {
const userNameRules = [
const artistCodeRules = [
(val?: string) =>
(val && val.trim().length) ||
i18n.global.t('customer.validateMessages.requireUserName'),
i18n.global.t(
'artist.artistInformation.validateMessages.requireArtistCode'
),
];
const customerNameRules = [
const fullNameRules = [
(val?: string) =>
(val && val.trim().length) ||
i18n.global.t('customer.validateMessages.requireCustomerName'),
i18n.global.t(
'artist.artistInformation.validateMessages.requireFullName'
),
];
const businessNameRules = [
const artistNameRules = [
(val?: string) =>
(val && val.trim().length) ||
i18n.global.t('customer.validateMessages.requireBusinessName'),
i18n.global.t(
'artist.artistInformation.validateMessages.requireArtistName'
),
];
const taxCodeRules = [
(val?: number) =>
const birthdayRules = [
(val?: string) =>
val !== undefined ||
i18n.global.t('customer.validateMessages.requireTaxCode'),
i18n.global.t(
'artist.artistInformation.validateMessages.requireBirthday'
),
];
const phoneRules = [
const emailRules = [
(val?: string) =>
(val && val.trim().length) ||
i18n.global.t('customer.validateMessages.requirePhone'),
i18n.global.t('artist.artistInformation.validateMessages.requireEmail'),
(val: string) =>
isMobilePhone(val) ||
i18n.global.t('customer.validateMessages.isPhone'),
isEmail(val) ||
i18n.global.t('artist.artistInformation.validateMessages.isEmail'),
];
const emailRules = [
const addressRules = [
(val?: string) =>
(val && val.trim().length) ||
i18n.global.t('customer.validateMessages.requireEmail'),
(val: string) =>
isEmail(val) || i18n.global.t('customer.validateMessages.isEmail'),
i18n.global.t(
'artist.artistInformation.validateMessages.requireAddress'
),
];
const addressRules = [
const phoneNumberRules = [
(val?: string) =>
(val && val.trim().length) ||
i18n.global.t('customer.validateMessages.requireAddress'),
i18n.global.t(
'artist.artistInformation.validateMessages.requirePhoneNumber'
),
(val: string) =>
isMobilePhone(val) ||
i18n.global.t('artist.artistInformation.validateMessages.isPhone'),
];
const businessTypeRules = [
const sexRules = [
(val?: number) =>
val !== undefined ||
i18n.global.t('customer.validateMessages.requireBusinessType'),
i18n.global.t('artist.artistInformation.validateMessages.requireSex'),
];
const ratingsRules = [
const nationalityRules = [
(val?: number) =>
val !== undefined ||
i18n.global.t('customer.validateMessages.requireRatings'),
i18n.global.t(
'artist.artistInformation.validateMessages.requireNationality'
),
];
const representativeRules = [
(val?: string) =>
(val && val.trim().length) ||
i18n.global.t('customer.validateMessages.requireRepresentative'),
const fieldRules = [
(val?: number) =>
val !== undefined ||
i18n.global.t('artist.artistInformation.validateMessages.requireField'),
];
const positionRules = [
(val?: string) =>
(val && val.trim().length) ||
i18n.global.t('customer.validateMessages.requiredPosition'),
const workRules = [
(val?: number) =>
val !== undefined ||
i18n.global.t('artist.artistInformation.validateMessages.requiredWork'),
];
const qualificationRules = [
(val?: number) =>
val !== undefined ||
i18n.global.t(
'artist.artistInformation.validateMessages.requireQualification'
),
];
const artistLevelRules = [
(val?: number) =>
val !== undefined ||
i18n.global.t(
'artist.artistInformation.validateMessages.requireArtistLevel'
),
];
return {
userNameRules,
customerNameRules,
businessNameRules,
taxCodeRules,
artistCodeRules,
fullNameRules,
artistNameRules,
birthdayRules,
emailRules,
ratingsRules,
addressRules,
businessTypeRules,
representativeRules,
positionRules,
phoneRules,
phoneNumberRules,
sexRules,
nationalityRules,
fieldRules,
workRules,
qualificationRules,
artistLevelRules,
};
},
emits: [
'update:isOpenNewArtistDialog',
'click:CloseBtn',
'update:userName',
'update:customerName',
'update:businessName',
'update:taxCode',
'update:artistCode',
'update:fullName',
'update:artistName',
'update:birthday',
'update:email',
'update:ratings',
'update:facebook',
'update:facebookMessage',
'update:instagram',
'update:whatsapp',
'update:address',
'update:businessType',
'update:representative',
'update:position',
'update:phone',
'update:phoneNumber',
'update:sex',
'update:nationality',
'update:field',
'update:work',
'update:qualification',
'update:artistLevel',
'update:status',
'addNewCustomer',
'addNewArtist',
],
});
src/components/artist-information/add-new-artist-dialog/index.vue
View file @ d32877b5
......@@ -5,7 +5,7 @@
@update:model-value="$emit('update:isOpenNewArtistDialog', $event)"
>
<q-card style="min-width: 900px" bordered>
<q-form greedy @submit.prevent="$emit('addNewCustomer')">
<q-form greedy @submit.prevent="$emit('addNewArtist')">
<q-card-section>
<q-item>
<q-item-section>
......@@ -22,22 +22,22 @@
<div class="col-6">
<q-input
:model-value="artistCode"
@update:model-value="$emit('update:businessName', $event)"
@update:model-value="$emit('update:artistCode', $event)"
:label="
$t('artist.artistInformation.titleDataField.artistCode')
"
type="text"
class="q-my-sm"
outlined
:rules="businessNameRules"
:rules="artistCodeRules"
hide-bottom-space
clearable
></q-input>
<q-input
:model-value="fullName"
@update:model-value="$emit('update:userName', $event)"
@update:model-value="$emit('update:fullName', $event)"
:label="$t('artist.artistInformation.titleDataField.fullName')"
:rules="userNameRules"
:rules="fullNameRules"
hide-bottom-space
type="text"
class="q-my-sm"
......@@ -46,82 +46,78 @@
></q-input>
<q-input
:model-value="artistName"
@update:model-value="$emit('update:customerName', $event)"
@update:model-value="$emit('update:artistName', $event)"
:label="
$t('artist.artistInformation.titleDataField.artistName')
"
type="text"
class="q-my-sm"
outlined
:rules="customerNameRules"
:rules="artistNameRules"
hide-bottom-space
clearable
></q-input>
<q-input
:model-value="birthday"
@update:model-value="$emit('update:customerName', $event)"
@update:model-value="$emit('update:birthday', $event)"
:label="$t('artist.artistInformation.titleDataField.birthday')"
type="text"
class="q-my-sm"
outlined
:rules="customerNameRules"
:rules="birthdayRules"
hide-bottom-space
clearable
></q-input>
<q-input
:model-value="email"
@update:model-value="$emit('update:customerName', $event)"
@update:model-value="$emit('update:email', $event)"
:label="$t('artist.artistInformation.titleDataField.email')"
type="text"
class="q-my-sm"
outlined
:rules="customerNameRules"
:rules="emailRules"
hide-bottom-space
clearable
></q-input>
<q-input
:model-value="facebook"
@update:model-value="$emit('update:customerName', $event)"
@update:model-value="$emit('update:facebook', $event)"
:label="$t('artist.artistInformation.titleDataField.facebook')"
type="text"
class="q-my-sm"
outlined
:rules="customerNameRules"
hide-bottom-space
clearable
></q-input>
<q-input
:model-value="facebookMessage"
@update:model-value="$emit('update:customerName', $event)"
@update:model-value="$emit('update:facebookMessage', $event)"
:label="
$t('artist.artistInformation.titleDataField.facebookMessage')
"
type="text"
class="q-my-sm"
outlined
:rules="customerNameRules"
hide-bottom-space
clearable
></q-input>
<q-input
:model-value="instagram"
@update:model-value="$emit('update:customerName', $event)"
@update:model-value="$emit('update:instagram', $event)"
:label="$t('artist.artistInformation.titleDataField.instagram')"
type="text"
class="q-my-sm"
outlined
:rules="customerNameRules"
hide-bottom-space
clearable
></q-input>
<q-input
:model-value="whatsapp"
@update:model-value="$emit('update:customerName', $event)"
@update:model-value="$emit('update:whatsapp', $event)"
:label="$t('artist.artistInformation.titleDataField.whatsapp')"
type="text"
class="q-my-sm"
outlined
:rules="customerNameRules"
hide-bottom-space
clearable
></q-input>
......@@ -130,37 +126,38 @@
<div class="col-6">
<q-input
:model-value="address"
@update:model-value="$emit('update:customerName', $event)"
@update:model-value="$emit('update:address', $event)"
:label="$t('artist.artistInformation.titleDataField.address')"
type="text"
class="q-my-sm"
outlined
:rules="customerNameRules"
:rules="addressRules"
hide-bottom-space
clearable
></q-input>
<q-input
:model-value="phoneNumber"
@update:model-value="$emit('update:customerName', $event)"
@update:model-value="$emit('update:phoneNumber', $event)"
:label="
$t('artist.artistInformation.titleDataField.phoneNumber')
"
type="text"
class="q-my-sm"
outlined
:rules="customerNameRules"
:rules="phoneNumberRules"
hide-bottom-space
clearable
></q-input>
<q-select
:model-value="sex"
@update:model-value="$emit('update:businessType', $event)"
@update:model-value="$emit('update:sex', $event)"
:label="$t('artist.artistInformation.titleDataField.sex')"
:rules="businessTypeRules"
:rules="sexRules"
:options="sexOptions"
emit-value
map-options
option-value="id"
option-label="text"
option-label="name"
type="text"
class="q-my-sm"
outlined
......@@ -169,15 +166,16 @@
></q-select>
<q-select
:model-value="nationality"
@update:model-value="$emit('update:businessType', $event)"
@update:model-value="$emit('update:nationality', $event)"
:label="
$t('artist.artistInformation.titleDataField.nationality')
"
:rules="businessTypeRules"
:options="nationalityOptions"
:rules="nationalityRules"
emit-value
map-options
option-value="id"
option-label="text"
option-label="name"
type="text"
class="q-my-sm"
outlined
......@@ -186,13 +184,14 @@
></q-select>
<q-select
:model-value="field"
@update:model-value="$emit('update:businessType', $event)"
@update:model-value="$emit('update:field', $event)"
:label="$t('artist.artistInformation.titleDataField.field')"
:rules="businessTypeRules"
:rules="fieldRules"
:options="fieldOptions"
emit-value
map-options
option-value="id"
option-label="text"
option-label="name"
type="text"
class="q-my-sm"
outlined
......@@ -201,13 +200,14 @@
></q-select>
<q-select
:model-value="work"
@update:model-value="$emit('update:businessType', $event)"
@update:model-value="$emit('update:work', $event)"
:label="$t('artist.artistInformation.titleDataField.work')"
:rules="businessTypeRules"
:rules="workRules"
:options="workOptions"
emit-value
map-options
option-value="id"
option-label="text"
option-label="name"
type="text"
class="q-my-sm"
outlined
......@@ -216,15 +216,16 @@
></q-select>
<q-select
:model-value="qualification"
@update:model-value="$emit('update:businessType', $event)"
@update:model-value="$emit('update:qualification', $event)"
:label="
$t('artist.artistInformation.titleDataField.qualification')
"
:rules="businessTypeRules"
:rules="qualificationRules"
:options="professionOptions"
emit-value
map-options
option-value="id"
option-label="text"
option-label="name"
type="text"
class="q-my-sm"
outlined
......@@ -233,15 +234,16 @@
></q-select>
<q-select
:model-value="artistLevel"
@update:model-value="$emit('update:businessType', $event)"
@update:model-value="$emit('update:artistLevel', $event)"
:label="
$t('artist.artistInformation.titleDataField.artistLevel')
"
:rules="businessTypeRules"
:rules="artistLevelRules"
:options="artistLevelOptions"
emit-value
map-options
option-value="id"
option-label="text"
option-label="name"
type="text"
class="q-my-sm"
outlined
......
src/i18n/vi/index.ts
View file @ d32877b5
......@@ -269,6 +269,23 @@ export default {
instagram: 'Instagram',
whatsapp: 'Whatsapp',
},
validateMessages: {
requireArtistCode: 'Vui lòng nhập mã nghệ sỹ',
requireFullName: 'Vui lòng nhập họ tên nghệ sỹ',
requireArtistName: 'Vui lòng nhập nghệ danh',
requireBirthday: 'Vui lòng chọn ngày sinh',
requireEmail: 'Vui lòng nhập email',
isEmail: 'Email không hợp lệ',
requireAddress: 'Vui lòng nhập địa chỉ',
requirePhoneNumber: 'Vui lòng nhập số điện thoại',
isPhone: 'Số điện thoại không hợp lệ',
requireSex: 'Vui lòng chọn giới tính',
requireNationality: 'Vui lòng chọn quốc tịch',
requireField: 'Vui lòng chọn lĩnh vực',
requiredWork: 'Vui lòng chọn công việc',
requireQualification: 'Vui lòng chọn độ chuyên',
requireArtistLevel: 'Vui lòng chọn xếp hạng',
},
},
bankAccount: {
tableColumnsBank: {
......
src/pages/nghe-sy/artist.ts
View file @ d32877b5
......@@ -114,17 +114,17 @@ export default defineComponent({
const pageSize = ref(20);
const totalPage = ref(10);
const fullNameKeyword = ref('');
const sexOptions = ref([
{ id: 1, name: 'Nam' },
{ id: 2, name: 'Nữ' },
]);
const fieldOptions: Ref<FieldType[]> = ref([]);
const nationalityOptions: Ref<NationalityType[]> = ref([]);
const professionOptions: Ref<QualificationType[]> = ref([]);
const artistLevelOptions: Ref<ArtistLevelType[]> = ref([]);
const workOptions: Ref<WorkType[]> = ref([]);
const fieldSelected: Ref<number | undefined> = ref();
const professionOptions = ref([
{ id: 1, text: 'Chuyên nghiệp' },
{ id: 2, text: 'Nghiệp dư' },
]);
const professionSelected: Ref<number | undefined> = ref();
const artistLevelOptions = ref([
{ id: 1, text: 'VIP_1' },
{ id: 2, text: 'VIP_2' },
]);
const artistLevelSelected: Ref<number | undefined> = ref();
const isOpenNewArtistDialog = ref(false);
......@@ -134,13 +134,13 @@ export default defineComponent({
const artistName: Ref<string | undefined> = ref();
const birthday: Ref<string | undefined> = ref();
const sex: Ref<number | undefined> = ref();
const nationality: Ref<string | undefined> = ref();
const nationality: Ref<number | undefined> = ref();
const address: Ref<string | undefined> = ref();
const status: Ref<number> = ref(1);
const field: Ref<string | undefined> = ref();
const work: Ref<string | undefined> = ref();
const qualification: Ref<string | undefined> = ref();
const artistLevel: Ref<string | undefined> = ref();
const field: Ref<number | undefined> = ref();
const work: Ref<number | undefined> = ref();
const qualification: Ref<number | undefined> = ref();
const artistLevel: Ref<number | undefined> = ref();
const phoneNumber: Ref<string | undefined> = ref();
const email: Ref<string | undefined> = ref();
const facebook: Ref<string | undefined> = ref();
......@@ -194,19 +194,53 @@ export default defineComponent({
}
};
// const getNationalityOptions = async () => {
// const response = (await api({
// url: API_PATHS.getFieldOptions,
// method: 'GET',
// params: {},
// })) as AxiosResponse<BaseResponseBody<NationalityType[]>>;
// if (response.data.error.code === config.API_RES_CODE.OK.code) {
// fieldOptions.value = response.data.data;
// }
// };
const getNationalityOptions = async () => {
const response = (await api({
url: API_PATHS.getNationalityOptions,
method: 'GET',
params: {},
})) as AxiosResponse<BaseResponseBody<NationalityType[]>>;
if (response.data.error.code === config.API_RES_CODE.OK.code) {
nationalityOptions.value = response.data.data;
}
};
const getArtistLevelOptions = async () => {
const response = (await api({
url: API_PATHS.getArtistLevelOptions,
method: 'GET',
params: {},
})) as AxiosResponse<BaseResponseBody<ArtistLevelType[]>>;
if (response.data.error.code === config.API_RES_CODE.OK.code) {
artistLevelOptions.value = response.data.data;
}
};
const getQualificationOptions = async () => {
const response = (await api({
url: API_PATHS.getQualificationOptions,
method: 'GET',
params: {},
})) as AxiosResponse<BaseResponseBody<QualificationType[]>>;
if (response.data.error.code === config.API_RES_CODE.OK.code) {
professionOptions.value = response.data.data;
}
};
const getWorkOptions = async () => {
const response = (await api({
url: API_PATHS.getWorkOptions,
method: 'GET',
params: {},
})) as AxiosResponse<BaseResponseBody<WorkType[]>>;
if (response.data.error.code === config.API_RES_CODE.OK.code) {
workOptions.value = response.data.data;
}
};
onMounted(() => {
void getListArtists();
void getFieldOptions();
void getNationalityOptions();
void getArtistLevelOptions();
void getQualificationOptions();
void getWorkOptions();
});
return {
userTableColumnsArtist,
......@@ -234,6 +268,7 @@ export default defineComponent({
facebookMessage,
instagram,
whatsapp,
sexOptions,
filterListArtist,
totalPage,
changePageSize,
......@@ -245,6 +280,12 @@ export default defineComponent({
artistLevelSelected,
artistLevelOptions,
getFieldOptions,
nationalityOptions,
getNationalityOptions,
workOptions,
getArtistLevelOptions,
getQualificationOptions,
getWorkOptions,
};
},
});
src/pages/nghe-sy/index.vue
View file @ d32877b5
......@@ -24,7 +24,7 @@
<q-select
v-model="professionSelected"
:options="professionOptions"
option-label="text"
option-label="name"
option-value="id"
dense
outlined
......@@ -35,7 +35,7 @@
<q-select
v-model="artistLevelSelected"
:options="artistLevelOptions"
option-label="text"
option-label="name"
option-value="id"
dense
outlined
......@@ -101,6 +101,30 @@
</div>
<AddNewArtistDialog
v-model:is-open-new-artist-dialog="isOpenNewArtistDialog"
artistCode
v-model:full-name="fullName"
v-model:artist-name="artistName"
v-model:birthday="birthday"
v-model:sex="sex"
v-model:nationality="nationality"
v-model:status="status"
v-model:address="address"
v-model:field="field"
v-model:work="work"
v-model:qualification="qualification"
v-model:artist-level="artistLevel"
v-model:phone-number="phoneNumber"
v-model:email="email"
v-model:facebook="facebook"
v-model:facebook-message="facebookMessage"
v-model:instagram="instagram"
v-model:whatsapp="whatsapp"
:sex-options="sexOptions"
:field-options="fieldOptions"
:nationality-options="nationalityOptions"
:profession-options="professionOptions"
:artist-level-options="artistLevelOptions"
:work-options="workOptions"
@click:CloseBtn="isOpenNewArtistDialog = false"
></AddNewArtistDialog>
</div>
......
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