Commit c49d4e95 authored by hong-IT-99's avatar hong-IT-99

update code

parent e5d98702
import { defineComponent, Ref, ref, watch } from 'vue';
// import { i18n } from 'src/boot/i18n';
import { i18n } from 'src/boot/i18n';
// import { isEmail } from '../../../boot/functions';
// import { isMobilePhone } from '../../../boot/functions';
import UploadImage from '../../upload-image/index.vue';
......@@ -51,6 +51,21 @@ export default defineComponent({
imageUrl: urlFileLocal.value
})
}
const product_code = [
(val?: string) =>
(val && val.trim().length) ||
i18n.global.t(
'artist.artistInformation.validateMessages.requireProducCode'
),
];
const url_embed = [
(val?: string) =>
(val && val.trim().length) ||
i18n.global.t(
'artist.artistInformation.validateMessages.requireUrlembed'
),
];
return {
uploadAvatar,
SubbmitData,
......@@ -59,7 +74,9 @@ export default defineComponent({
code,
embeddedUrl,
status,
ResetData
ResetData,
product_code,
url_embed
};
},
......
......@@ -2,11 +2,10 @@
<q-dialog
persistent
:model-value="openAddHotProduct"
@update:model-value="$emit('update:openAddHotProduct', $event)"
@update:model-value="$emit('update:openAddHotProduct', $event)"
>
<q-card style="min-width: 600px" bordered>
<q-form greedy >
<q-form greedy @submit="SubbmitData">
<q-card-section>
<q-item>
<q-item-section>
......@@ -21,22 +20,26 @@
<q-card-section>
<div class="row q-col-gutter-sm">
<div class="col-12">
<q-card flat style="max-height:200px" v-if="urlFileLocal">
<div align=center>
<q-img :src="urlFileLocal" style="max-height:200px;aspect-ratio: 16/9;" >
</q-img>
</div>
<q-card flat style="max-height: 200px" v-if="urlFileLocal">
<div align="center">
<q-img
:src="urlFileLocal"
style="max-height: 200px; aspect-ratio: 16/9"
>
</q-img>
</div>
</q-card>
<UploadImage
class="q-mt-md"
:isBtn="true"
:isBtn="true"
@selectedFile="uploadAvatar"
></UploadImage>
<q-input
v-model="code"
v-model="code"
label="
Mã sản phẩm
"
:rules="product_code"
type="text"
class="q-my-sm"
outlined
......@@ -44,29 +47,22 @@
clearable
></q-input>
<q-input
v-model="embeddedUrl"
v-model="embeddedUrl"
label="Url embed"
:rules="url_embed"
hide-bottom-space
type="text"
class="q-my-sm"
outlined
clearable
></q-input>
</div>
<div style="padding-top: 13px; padding-left: 12px">
<span class="text-body1">{{
</div>
<div style="padding-top: 13px; padding-left: 12px">
<span class="text-body1">{{
$t('userPage.dialogLabel.fieldLabels.status')
}}</span
>
<q-toggle
v-model="status"
:false-value="2"
:true-value="1"
/>
</div>
}}</span>
<q-toggle v-model="status" :false-value="2" :true-value="1" />
</div>
</div>
</q-card-section>
<q-card-actions align="right">
......@@ -78,12 +74,11 @@
@click="$emit('click:CloseBtnAddHotProduct')"
/>
<q-btn
color="primary"
no-caps
style="width: 90px"
:label="$t('customer.crudActions.save')"
@click="SubbmitData"
type="submit"
/>
</q-card-actions>
</q-form>
......
<template>
<q-dialog
persistent
:model-value="openUpdateHotProduct"
@update:model-value="$emit('update:openUpadateHotProduct', $event)"
>
<q-card style="min-width: 600px" bordered>
<q-form greedy @submit="SubbmitDataUpdate">
<q-card-section>
<q-item>
<q-item-section>
<q-item-label class="text-h6 text-weight-regular">{{
$t('artist.dialogLabel.title.addHotProduct')
}}</q-item-label>
</q-item-section>
</q-item>
</q-card-section>
<q-separator />
<q-card-section>
<div class="row q-col-gutter-sm">
<div class="col-12">
<q-card flat style="max-height: 200px" v-if="urlFileLocal">
<div align="center">
<q-img
:src="urlFileLocal"
style="max-height: 200px; aspect-ratio: 16/9"
>
</q-img>
</div>
</q-card>
<UploadImage
class="q-mt-md"
:isBtn="true"
@selectedFile="uploadAvatar"
></UploadImage>
<q-input
v-model="code"
label="
Mã sản phẩm
"
:rules="product_code"
type="text"
class="q-my-sm"
outlined
hide-bottom-space
clearable
></q-input>
<q-input
v-model="embeddedUrl"
label="Url embed"
:rules="url_embed"
hide-bottom-space
type="text"
class="q-my-sm"
outlined
clearable
></q-input>
</div>
<div style="padding-top: 13px; padding-left: 12px">
<span class="text-body1">{{
$t('userPage.dialogLabel.fieldLabels.status')
}}</span>
<q-toggle v-model="status" :false-value="2" :true-value="1" />
</div>
</div>
</q-card-section>
<q-card-actions align="right">
<q-btn
color="grey"
no-caps
style="width: 90px"
:label="$t('customer.crudActions.cancel')"
@click="$emit('click:CloseBtnUpdateHotProduct')"
/>
<q-btn
color="primary"
no-caps
style="width: 90px"
:label="$t('customer.crudActions.save')"
type="submit"
/>
</q-card-actions>
</q-form>
</q-card>
</q-dialog>
</template>
<script lang="ts" src="./updateHotProduc.ts"></script>
import { defineComponent, PropType, Ref, ref, watch } from 'vue';
import { i18n } from 'src/boot/i18n';
// import { isEmail } from '../../../boot/functions';
// import { isMobilePhone } from '../../../boot/functions';
import UploadImage from '../../upload-image/index.vue';
import { ProductType } from 'src/assets/type';
export default defineComponent({
components: {
UploadImage,
},
props: {
openUpdateHotProduct: {
type: Boolean,
requied: true,
},
dataUpdate: {
type: Object as PropType<ProductType>,
requied: false,
},
},
setup(props, context) {
const file: Ref<File | string> = ref('');
const code: Ref<string> = ref('');
const embeddedUrl: Ref<string> = ref('');
const urlFileLocal: Ref<string> = ref('');
const status: Ref<number> = ref(2);
const id: Ref<number | null> = ref(null);
const uploadAvatar = (value: FileList) => {
urlFileLocal.value = URL.createObjectURL(value[0]);
file.value = value[0];
};
watch(
() => props.openUpdateHotProduct,
(value) => {
if (value) {
id.value = props.dataUpdate?.id as number;
code.value = props.dataUpdate?.code as string;
embeddedUrl.value = props.dataUpdate?.embeddedUrl as string;
status.value = props.dataUpdate?.status as number;
urlFileLocal.value = props.dataUpdate?.imageUrl as string;
}
}
);
const ResetData = () => {
file.value = '';
code.value = '';
embeddedUrl.value = '';
urlFileLocal.value = '';
status.value = 2;
};
const SubbmitDataUpdate = () => {
context.emit('click:CloseBtnUpdateHotProduct');
context.emit('UpdateData', {
file: file.value,
code: code.value,
status: status.value,
embeddedUrl: embeddedUrl.value,
imageUrl: urlFileLocal.value,
id:id.value
});
};
const product_code = [
(val?: string) =>
(val && val.trim().length) ||
i18n.global.t(
'artist.artistInformation.validateMessages.requireProducCode'
),
];
const url_embed = [
(val?: string) =>
(val && val.trim().length) ||
i18n.global.t(
'artist.artistInformation.validateMessages.requireUrlembed'
),
];
return {
uploadAvatar,
SubbmitDataUpdate,
urlFileLocal,
file,
code,
embeddedUrl,
status,
ResetData,
product_code,
url_embed,
id,
};
},
emits: [
'UpdateData',
'update:statusHotProduct',
'selectedFile',
'click:CloseBtnUpdateHotProduct',
'update:openUpadateHotProduct',
],
});
import { i18n } from 'src/boot/i18n';
import { defineComponent, onMounted, Ref, ref } from 'vue';
import Pagination from 'components/pagination/index.vue';
import { ProductType } from 'src/assets/type';
export default defineComponent({
components: {
Pagination,
......@@ -91,13 +92,26 @@ export default defineComponent({
pageIndex.value = 1;
void getListHotProduct();
};
const updateProduct = (item: { row: ProductType }) => {
context.emit('setDataUpdate', {
code: item.row.code,
embeddedUrl: item.row.embeddedUrl,
id: item.row.id,
imageUrl: item.row.imageUrl,
name: item.row.name,
status: item.row.status,
});
context.emit('click:openUpadateHotProduct'
);
};
const clickAdd = () => {
context.emit('click:addHotProduct');
};
const deleteRow = (index: number) => {
context.emit('deleteRow', index);
};
onMounted(() => {
void getListHotProduct();
});
......@@ -111,7 +125,14 @@ export default defineComponent({
getListHotProduct,
changePageSize,
clickAdd,
updateProduct,
};
},
emits: ['click:addHotProduct', 'reset', 'deleteRow'],
emits: [
'click:addHotProduct',
'reset',
'deleteRow',
'click:openUpadateHotProduct',
'setDataUpdate'
],
});
......@@ -3,7 +3,7 @@
<q-space></q-space>
<div class="col-auto">
<q-btn
@click="clickAdd"
@click="clickAdd"
color="primary"
no-caps
style="width: 100px"
......@@ -23,51 +23,54 @@
<template v-slot:body-cell-status="rowData">
<q-td>
<div align="center">
<q-checkbox
<q-checkbox
:true-value="1"
:false-value="2"
v-model="rowData.value"
:false-value="2"
v-model="rowData.value"
/>
</div>
</q-td>
</template>
<template v-slot:body-cell-STT="item">
<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="item">
<template v-slot:body-cell-action="item">
<q-td style="padding: 0; height: 100%">
<div align="center">
<q-btn flat round color="primary" icon="mdi-circle-edit-outline">
<q-tooltip>
Sửa
</q-tooltip>
</q-btn>
<q-btn flat round color="primary" @click="deleteRow(item.rowIndex)" icon="mdi-delete-outline">
<q-tooltip>
Xóa
</q-tooltip>
</q-btn>
<q-btn
flat
round
color="primary"
icon="mdi-circle-edit-outline"
@click="updateProduct(item)"
>
<q-tooltip> Sửa </q-tooltip>
</q-btn>
<q-btn
flat
round
color="primary"
@click="deleteRow(item.rowIndex)"
icon="mdi-delete-outline"
>
<q-tooltip> Xóa </q-tooltip>
</q-btn>
</div>
</q-td>
</template>
<template v-slot:body-cell-imageUrl="rowData">
<q-td style="padding: 0; height: 100%">
<div align="center">
<q-img
:src="rowData.value"
style="width: 100%"
>
</q-img>
<q-img :src="rowData.value" style="max-width: 70px"> </q-img>
</div>
</q-td>
</template>
</q-table>
</div>
</div>
</template>
......
......@@ -104,6 +104,7 @@ export default {
requireUserName: 'Tên đăng nhập không hợp lệ',
requirePassword: 'Vui lòng nhập mật khẩu',
requireFullName: 'Vui lòng nhập họ tên',
requireEmail: 'Vui lòng nhập Email',
isEmail: 'Email không hợp lệ',
requireMobileNumber: 'Vui lòng nhập số điện thoại',
......@@ -182,6 +183,7 @@ export default {
requireName: 'Vui lòng nhập Tên đơn vị',
requireRepresentative: 'Vui lòng nhập Người đại diện',
requireFields: 'Vui lòng chọn Lĩnh vực',
requireEmail: 'Vui lòng nhập Email',
isEmail: 'Email không hợp lệ',
requirePhoneNumber: 'Vui lòng nhập Số điện thoại',
......@@ -419,6 +421,8 @@ export default {
whatsapp: 'Whatsapp',
},
validateMessages: {
requireProducCode: 'Vui lòng nhập mã sản phẩm',
requireUrlembed: 'Vui lòng nhập Url Embed',
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',
......
......@@ -86,11 +86,13 @@
</q-tab-panel>
<q-tab-panel name="hotProduct">
<HotProduct
:products="products"
@deleteRow="confirmDeleteRow($event)"
@reset="resetOldData"
:DataInsertHotProduct="DataInsertHotProduct"
@click:addHotProduct="openAddHotProduct = true"
:products="products"
@click:openUpadateHotProduct="openUpdateHotProduct = true"
@setDataUpdate="SetProduct($event)"
></HotProduct>
</q-tab-panel>
</q-tab-panels>
......@@ -131,6 +133,12 @@
v-model:open-add-hot-product="openAddHotProduct"
@click:CloseBtnAddHotProduct="openAddHotProduct = false"
></AddHotProductDialog>
<UpdateHotProduct
:dataUpdate="DataUpdatHotProduct"
@UpdateData="UpdateData($event)"
@click:CloseBtnUpdateHotProduct="openUpdateHotProduct = false"
v-model:open-update-hot-product="openUpdateHotProduct"
></UpdateHotProduct>
<div class="col-12 q-mt-md">
<div class="row">
<q-space></q-space>
......
......@@ -14,7 +14,7 @@ import { AxiosResponse } from 'axios';
import moment from 'moment';
import { i18n } from 'src/boot/i18n';
import { Dialog, Notify } from 'quasar';
import UpdateHotProduct from 'components/artist-information/UpdateHotProduct/index.vue';
import {
ArtistInfoType,
FieldType,
......@@ -41,6 +41,7 @@ export default defineComponent({
UploadEmbedDialog,
AddHotProductDialog,
EditBankAccountDialog,
UpdateHotProduct,
},
watch: {
tab(value) {
......@@ -63,7 +64,7 @@ export default defineComponent({
const isOpenAddAccountBankDialog: Ref<boolean> = ref(false);
const isOpenEditAccountBankDialog: Ref<boolean> = ref(false);
const openAddHotProduct: Ref<boolean> = ref(false);
const openUpdateHotProduct: Ref<boolean> = ref(false);
const isOpenDialogEmbed: Ref<boolean> = ref(false);
const fieldOptions: Ref<FieldType[]> = ref([]);
const nationalityOptions: Ref<NationalityType[]> = ref([]);
......@@ -156,6 +157,7 @@ export default defineComponent({
//satate hot product
const statusHotProduct: Ref<number> = ref(2);
const DataInsertHotProduct: Ref<ProductType | null> = ref(null);
const DataUpdatHotProduct: Ref<ProductType | null> = ref(null);
const getInformationArtist = async () => {
const response = (await api({
......@@ -285,8 +287,6 @@ export default defineComponent({
});
};
const openDialogAddHotProduct = () => {
console.log('object');
// console.log(openAddHotProduct.value);
openAddHotProduct.value = true;
};
const openDialogAddAccBank = () => {
......@@ -346,6 +346,7 @@ export default defineComponent({
const pushData = (value: ProductType) => {
products.value.push(value);
console.log(products.value);
};
const reset = ref(null);
const resetOldData = () => {
......@@ -413,7 +414,20 @@ export default defineComponent({
}
} catch (error) {}
};
const UpdateData = (value:ProductType)=>{
for(let i=0; i<products.value.length;i++){
if(products.value[i].id === value?.id){
// console.log(products.value[i],'Item đẹpo');
products.value[i] = value
}
}
// console.log(products.value);
};
const SetProduct = (value: ProductType) => {
DataUpdatHotProduct.value= value
};
onMounted(() => {
void getInformationArtist();
void getFieldOptions();
......@@ -496,6 +510,10 @@ export default defineComponent({
deleteRowItem,
confirmDeleteRow,
updateInformationArtist,
openUpdateHotProduct,
SetProduct,
DataUpdatHotProduct,
UpdateData
};
},
});
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