update code

src/components/artist-information/AddHotProduct/AddHotProductDialog.ts

+import { defineComponent } from 'vue';
+// import { i18n } from 'src/boot/i18n';
+// import { isEmail } from '../../../boot/functions';
+// import { isMobilePhone } from '../../../boot/functions';
+
+export default defineComponent({
+    props: {
+        openAddHotProduct: {
+            type: Boolean,
+            requied: true
+        },
+        status: { type: Boolean || Number, required: false },
+    },
+    setup() {
+
+
+        return {
+
+        };
+    },
+    emits: [
+        'update:openAddHotProduct',
+        'update:status',
+        'click:CloseBtnAddHotProduct'
+    ],
+});

src/components/artist-information/AddHotProduct/index.vue

+<template>
+  <q-dialog
+    persistent
+    :model-value="openAddHotProduct"
+     @update:model-value="$emit('update:openAddHotProduct', $event)"
+  >
+    <q-card style="min-width: 700px" bordered>
+      <q-form greedy >
+        <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-input
+                :label="
+                  $t('artist.artistInformation.titleDataField.artistCode')
+                "
+                type="text"
+                class="q-my-sm"
+                outlined
+                hide-bottom-space
+                clearable
+              ></q-input>
+              <q-input
+                :label="$t('artist.artistInformation.titleDataField.fullName')"
+                hide-bottom-space
+                type="text"
+                class="q-my-sm"
+                outlined
+                clearable
+              ></q-input>
+              <q-input
+                :label="
+                  $t('artist.artistInformation.titleDataField.artistName')
+                "
+                type="text"
+                class="q-my-sm"
+                outlined
+                hide-bottom-space
+                clearable
+              ></q-input>
+              <q-input
+                :label="$t('artist.artistInformation.titleDataField.birthday')"
+                type="text"
+                class="q-my-sm"
+                outlined
+                hide-bottom-space
+                clearable
+              ></q-input>
+              <q-input
+                :label="$t('artist.artistInformation.titleDataField.email')"
+                type="text"
+                class="q-my-sm"
+                outlined
+                hide-bottom-space
+                clearable
+              ></q-input>
+            </div> 
+              <div style="padding-top: 13px; padding-left: 12px">
+                <span class="text-body1">{{
+                $t('userPage.dialogLabel.fieldLabels.status')
+              }}</span
+              >
+              <q-toggle
+              
+                :model-value="status"
+              
+              />
+              </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:CloseBtnAddHotProduct')"
+          />
+          <q-btn
+            type="submit"
+            color="primary"
+            no-caps
+            style="width: 90px"
+            :label="$t('customer.crudActions.save')"
+          />
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script lang="ts" src="./AddHotProductDialog.ts"></script>

src/components/artist-information/add-new-artist-dialog/index.vue

@@ -7,7 +7,7 @@
     <q-card style="min-width: 900px" bordered>
       <q-form greedy @submit.prevent="$emit('addNewArtist')">
         <q-card-section>
-          <q-item>
+          <q-item>t
             <q-item-section>
               <q-item-label class="text-h6 text-weight-regular">{{
                 $t('artist.dialogLabel.title.addArtist')
@@ -16,7 +16,6 @@
           </q-item>
         </q-card-section>
         <q-separator />
-
         <q-card-section>
           <div class="row q-col-gutter-sm">
             <div class="col-6">

src/components/artist-information/hot-product/HotProduct.ts

@@ -11,6 +11,7 @@ export default defineComponent({
   setup() {
     const userTableColumnsHotProduct = [
       {
+        name: 'STT',
         required: true,
         label: 'STT',
         align: 'center',
@@ -98,8 +99,10 @@ export default defineComponent({
       pageIndex,
       pageSize,
       totalPage,
+
       getListHotProduct,
       changePageSize,
     };
   },
+  emits: ['click:addHotProduct']
 });

src/components/artist-information/hot-product/index.vue

@@ -3,6 +3,7 @@
     <q-space></q-space>
     <div class="col-auto">
       <q-btn
+         @click="$emit('click:addHotProduct')"
         color="primary"
         no-caps
         style="width: 100px"
@@ -22,59 +23,51 @@
         <template v-slot:body-cell-status="rowData">
           <q-td>
             <div align="center">
-              <q-checkbox v-model="rowData.value" />
+              <q-checkbox  
+                :true-value="1"
+                :false-value="2" 
+                v-model="rowData.value" 
+              />
             </div>
           </q-td>
         </template>
+         <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>
-          <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('userPage.toolTipMessage.informationUser')
-              }}</q-tooltip> -->
-            </q-btn>
-            <q-btn flat round color="primary" icon="mdi-minus-circle-outline">
-              <!-- <q-tooltip :offset="[20, 10]">{{
-                $t('userPage.toolTipMessage.updateUserInfo')
-              }}</q-tooltip> -->
+          <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" icon="mdi-lock-outline">
-              <!-- <q-tooltip :offset="[20, 10]">{{
-                $t('userPage.toolTipMessage.updateUserInfo')
-              }}</q-tooltip> -->
+            <q-btn flat round color="primary" icon="mdi-delete-outline">
+              <q-tooltip>
+                Xóa
+              </q-tooltip>
             </q-btn>
+            </div>
           </q-td>
         </template>
-      </q-table>
-      <!-- <div class="col-12 q-mt-sm">
-        <Pagination
-          v-model:currentPage="pageIndex"
-          v-model:pageSize="pageSize"
-          :totalPage="totalPage"
-          @update:pageSize="changePageSize"
-          @update:currentPage="getListHotProduct"
-        />
-      </div> -->
-      <!-- <div class="col-12 q-mt-md">
-        <div class="row">
-          <q-space></q-space>
-          <div class="col-auto">
-            <q-btn
-              to="/nghe-sy"
-              color="grey"
-              no-caps
-              :label="$t('crudActions.back')"
-            ></q-btn>
-          </div>
-          <div class="col-auto q-ml-md">
-            <q-btn
-              color="primary"
-              no-caps
-              :label="$t('crudActions.update')"
-            ></q-btn>
-          </div>
+        <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> 
             </div>
-      </div> -->
+          </q-td>
+        </template>
+      </q-table>
+      
     </div>
   </div>
 </template>

src/i18n/vi/index.ts

@@ -359,6 +359,7 @@ export default {
         addArtist: 'Thêm nghệ sỹ',
         updateArtist: 'Cập nhật nghệ sỹ',
         addAccountBank: 'Thêm tài khoản ngân hàng',
+        addHotProduct: 'Thêm sản phẩm nổi bật'
       },
       fieldLabels: {
         accountNumber: 'Mã thẻ',

src/pages/cap-nhat-thong-tin-nghe-sy/index.vue

@@ -84,7 +84,7 @@
             ></BankAccount>
           </q-tab-panel>
           <q-tab-panel name="hotProduct">
-            <HotProduct :products="products"></HotProduct>
+            <HotProduct  @click:addHotProduct="openAddHotProduct = true" :products="products" ></HotProduct>
           </q-tab-panel>
         </q-tab-panels>
       </q-card>
@@ -105,6 +105,7 @@
       @uploadEmbed="isOpenDialogEmbed = false"
       @click:CloseBtn="isOpenDialogEmbed = false"
     ></UploadEmbedDialog>
+    <AddHotProductDialog  v-model:status="status"  v-model:open-add-hot-product="openAddHotProduct"  @click:CloseBtnAddHotProduct="openAddHotProduct = false"></AddHotProductDialog>
     <div class="col-12 q-mt-md">
       <div class="row">
         <q-space></q-space>

src/pages/cap-nhat-thong-tin-nghe-sy/updateInformationArtist.ts

@@ -3,6 +3,7 @@ import PersonalInformation from '../../components/artist-information/personal-in
 import VabAccount from '../../components/artist-information/VAB-account/index.vue';
 import BankAccount from '../../components/artist-information/bank-account/index.vue';
 import HotProduct from '../../components/artist-information/hot-product/index.vue';
+import AddHotProductDialog from '../../components/artist-information/AddHotProduct/index.vue';
 import AddNewBankAccountDialog from 'components/artist-information/bank-account/add-new-bank-account-dialog/index.vue';
 import UploadEmbedDialog from 'components/artist-information/upload-embed-dialog/index.vue';
 import { api, BaseResponseBody } from 'src/boot/axios';
@@ -35,6 +36,7 @@ export default defineComponent({
     HotProduct,
     AddNewBankAccountDialog,
     UploadEmbedDialog,
+    AddHotProductDialog
   },
   watch: {
     tab(value) {
@@ -55,6 +57,8 @@ export default defineComponent({
       console.log('askdaskdkasds');
     };
     const isOpenAddAccountBankDialog: Ref<boolean> = ref(false);
+    const openAddHotProduct: Ref<boolean> = ref(false);
+
     const isOpenDialogEmbed: Ref<boolean> = ref(false);
     const fieldOptions: Ref<FieldType[]> = ref([]);
     const nationalityOptions: Ref<NationalityType[]> = ref([]);
@@ -65,6 +69,7 @@ export default defineComponent({
       { id: 1, name: 'Nam' },
       { id: 2, name: 'Nữ' },
     ]);
+    // const status: Ref<boolean | number> = ref(true);
     const id: Ref<number> = ref(0);
     const account: Ref<string> = ref('');
     const artistCode: Ref<string> = ref('');
@@ -246,6 +251,11 @@ export default defineComponent({
         deleteAccBank(value);
       });
     };
+    const openDialogAddHotProduct = () => {
+      console.log('object');
+      // console.log(openAddHotProduct.value);
+      openAddHotProduct.value = true
+    }
     const openDialogAddAccBank = () => {
       accountNumber.value = null;
       cardNumber.value = null;
@@ -307,11 +317,13 @@ export default defineComponent({
       getWorkOptions,
       bankAccounts,
       products,
+
       account,
       banners,
       shortDescription,
       stories,
       isOpenAddAccountBankDialog,
+      openAddHotProduct,
       clickBtn,
       accountNumber,
       cardNumber,
@@ -326,6 +338,8 @@ export default defineComponent({
       isOpenDialogEmbed,
       deleteAccBank,
       openDialogAddAccBank,
+      openDialogAddHotProduct
+
     };
   },
 });