update

src/assets/configurations.example.ts

 export const config = {
   // pro 
-  API_ENDPOINT: 'https://cms.vab.vn/api/',
-  API_IMAGE_ENDPOINT: 'https://cms.vab.vn/file/upload/',
+  // API_ENDPOINT: 'https://cms.vab.vn/api/',
+  // API_IMAGE_ENDPOINT: 'https://cms.vab.vn/file/upload/',
   // dev
-  // API_ENDPOINT: 'http://103.147.34.20:10700/api/',
-  // API_IMAGE_ENDPOINT: 'http://103.147.34.20:10705/file/upload/',
+  API_ENDPOINT: 'http://103.147.34.20:10700/api/',
+  API_IMAGE_ENDPOINT: 'http://103.147.34.20:10705/file/upload/',
 
   API_RES_CODE: {
     OK: {
@@ -129,5 +129,7 @@ export enum API_PATHS {
   accountArtistBrowsing = 'customer/accountArtistBrowsing',
   detailRegisterArtist = 'artist/detailRegister',
   listBookingNotApproval = 'booking/notApproval',
-  bookingBrowsing = 'booking/bookingBrowsing'
+  bookingBrowsing = 'booking/bookingBrowsing',
+  getListDeposit = 'deposit',
+  formalityDeposit = 'common/formalityDeposit' // danh sách hình thức đặt cọc
 }

src/assets/type.ts

@@ -448,6 +448,11 @@ export type ListArrayArtist = {
   id: number;
   artistName: string;
 };
+export type ListDeposit = {
+  artistBookingDepositDtos: []
+
+};
+
 
 export type ListArrayCust = {
   id: number;
@@ -641,7 +646,10 @@ export type AddBannerConfig = {
   updateBy: string;
   updateTime: string;
 };
-
+export type listTypeFormalityDeposit = {
+  id: number;
+  name:string
+ }
 export type ListConfigPartner = {
   id: number;
   name: string;

src/components/customer/openDialogRefusedBrowser.vue

@@ -44,12 +44,12 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, Ref, ref, watch } from 'vue';
+import { defineComponent, Ref, ref, watch } from 'vue';
 import { Dialog, Notify } from 'quasar';
 import { API_PATHS, config } from 'src/assets/configurations.example';
 import { AxiosResponse } from 'axios';
 import { api, BaseResponseBody } from 'src/boot/axios';
-import { emit } from 'cluster';
+// import { emit } from 'cluster';
 export default defineComponent({
   props: {
     openDialogRefusedBrowser: {

src/components/detailBooking/index.vue

@@ -132,6 +132,12 @@
               <div class="col-8 fs-14">{{ detailInfoBooking.content }}</div>
             </div>
           </div>
+
+          <v-row>
+            <v-col>
+              <tableDeposit :id="detailInfoBooking.id"></tableDeposit>
+            </v-col>
+          </v-row>
         </q-card-section>
         <q-separator />
         <q-card-actions align="right">
@@ -151,7 +157,11 @@
 <script lang="ts">
 import { defineComponent, PropType, watch } from 'vue';
 import { ListBooking } from 'src/assets/type';
+import tableDeposit from '../../components/detailBooking/tableDeposit/index.vue';
 export default defineComponent({
+  components: {
+    tableDeposit,
+  },
   props: {
     showDialog: {
       type: Boolean,

src/components/detailBooking/tableDeposit/add.vue

+<template>
+  <q-dialog persistent :model-value="showDialog">
+    <q-card style="min-width: 900px" bordered>
+      <q-form greedy>
+        <q-card-section>
+          <q-item>
+            <q-item-section>
+              <q-item-label class="text-h6 text-weight-regular"
+                >Thêm mới đặt cọc</q-item-label
+              >
+            </q-item-section>
+          </q-item>
+        </q-card-section>
+        <q-separator />
+
+        <q-card-section>
+          <div class="row q-mt-sm flex-center">
+            <div class="col-8 flex flex-center">
+              <div>
+                <q-card class="q-mb-sm" v-if="image !== null">
+                  <q-img
+                    @click="uploadAvatar"
+                    :src="image"
+                    style="
+                      height: 195px;
+                      width: 300px;
+                      cursor: pointer;
+                      object-fit: contain !important;
+                    "
+                  ></q-img>
+                  <q-icon
+                    name="mdi-close-circle"
+                    color="red"
+                    style="
+                      position: absolute;
+                      right: 0;
+                      font-size: 18px;
+                      cursor: pointer;
+                    "
+                    @click="deleteAvatar"
+                  ></q-icon>
+                </q-card>
+                <div
+                  @click="uploadAvatar"
+                  v-else
+                  class="q-mb-sm"
+                  style="
+                    height: 195px;
+                    object-fit: contain !important;
+                    width: 300px;
+                    border: 2px dashed #5d319e;
+                    border-radius: 4px;
+                    cursor: pointer;
+                  "
+                >
+                  <div
+                    style="
+                      height: 100%;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                      flex-direction: column;
+                    "
+                  >
+                    <q-icon
+                      style="color: #5d319e"
+                      name="mdi-cloud-upload"
+                      size="xl"
+                    ></q-icon>
+                    Tải ảnh lên
+                  </div>
+                </div>
+                <div>
+                  <input
+                    ref="upload"
+                    hidden
+                    type="file"
+                    accept="image/png, image/jpeg"
+                    @change="selectedFile($event.target.files)"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="row flex-center" style="padding-top: 10px">
+            <div class="col-3 text-weight-medium">
+              <div>Hình thức đặt cọc</div>
+            </div>
+            <div class="col-6">
+              <q-select
+                emit-value
+                map-options
+                :options="depositOptions"
+                option-value="id"
+                option-label="name"
+                type="text"
+                class="q-my-sm"
+                outlined
+                hide-bottom-space
+                clearable
+                dense
+              ></q-select>
+            </div>
+          </div>
+
+          <div class="row flex-center">
+            <div class="col-3 text-weight-medium">
+              <div>Thời gian đặt cọc:</div>
+            </div>
+            <div class="col-6">
+              <q-input
+                :model-value="birthday"
+                @update:model-value="$emit('update:birthday', $event)"
+                class="q-my-sm"
+                outlined
+                @click="openDialog = true"
+                dense
+                hide-bottom-space
+              >
+                <template v-slot:default>
+                  <q-dialog ref="dialogRef" v-model="openDialog">
+                    <q-card class="q-dialog-plugin">
+                      <q-date
+                        style="width: 100%"
+                        v-model="BirthdayDatePicker"
+                        first-day-of-week="1"
+                      ></q-date>
+
+                      <q-card-actions align="right">
+                        <q-btn
+                          color="primary"
+                          label="Cancel"
+                          @click="onCancelClick"
+                        />
+                        <q-btn color="primary" label="OK" @click="onOKClick" />
+                      </q-card-actions>
+                    </q-card>
+                  </q-dialog>
+                </template>
+              </q-input>
+            </div>
+          </div>
+
+          <div class="row flex-center">
+            <div class="col-3 text-weight-medium">
+              <div>Số tiền đặt cọc:</div>
+            </div>
+            <div class="col-6">
+              <q-input
+                type="text"
+                class="q-my-sm"
+                outlined
+                hide-bottom-space
+                clearable
+                dense
+              ></q-input>
+            </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:CloseBtn')"
+          />
+          <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">
+import { defineComponent, Ref, ref, watch } from 'vue';
+import { config, API_PATHS } from 'src/assets/configurations.example';
+import { api, BaseResponseBody } from 'src/boot/axios';
+import { AxiosResponse } from 'axios';
+import { listTypeFormalityDeposit } from 'src/assets/type';
+import moment from 'moment';
+export default defineComponent({
+  props: {
+    showDialog: {
+      type: Boolean,
+      required: true,
+    },
+    image: { type: String, required: true },
+    birthday: { type: String, required: true },
+  },
+  setup(props, context) {
+    watch(
+      () => props.showDialog,
+      (value) => {
+        if (value) {
+          void getListformalityDeposit();
+        }
+      }
+    );
+
+    const BirthdayDatePicker = ref(moment().format('YYYY/MM/DD'));
+    const openDialog: Ref<boolean> = ref(false);
+    const onOKClick = () => {
+      selectDatePicker(BirthdayDatePicker.value);
+
+      openDialog.value = false;
+    };
+    const onCancelClick = () => {
+      openDialog.value = false;
+    };
+    const selectDatePicker = (value: string) => {
+      context.emit('UpdateBirtday', formatDatePicker(value));
+    };
+    const formatDatePicker = (value: string) => {
+      return moment(value).format('DD/MM/YYYY');
+    };
+    const depositOptions: Ref<listTypeFormalityDeposit[]> = ref([]);
+    const getListformalityDeposit = async () => {
+      const response = (await api({
+        url: API_PATHS.formalityDeposit,
+        method: 'GET',
+        params: {},
+      })) as AxiosResponse<BaseResponseBody<listTypeFormalityDeposit[]>>;
+      if (response.data.error.code === config.API_RES_CODE.OK.code) {
+        depositOptions.value = response.data.data;
+      }
+    };
+    const selectedFile = (value: FileList) => {
+      if (value.length !== 0) {
+        context.emit('SetAvatar', {
+          file: value[0],
+          url: URL.createObjectURL(value[0]),
+        });
+      }
+    };
+    const deleteAvatar = () => {
+      context.emit('deleteAvatar');
+    };
+    const upload = ref(null);
+    const uploadAvatar = () => {
+      // eslint-disable-next-line
+      // @ts-ignore
+      // eslint-disable-next-line
+      upload.value?.click();
+    };
+    return {
+      selectedFile,
+      deleteAvatar,
+      uploadAvatar,
+      upload,
+      depositOptions,
+      getListformalityDeposit,
+      onOKClick,
+      onCancelClick,
+      openDialog,
+      BirthdayDatePicker,
+    };
+  },
+  emits: [
+    'click:CloseBtn',
+    'SetAvatar',
+    'deleteAvatar',
+    'UpdateBirtday',
+    'update:birthday',
+  ],
+});
+</script>

src/components/detailBooking/tableDeposit/index.vue

+<template>
+  <div class="row q-col-gutter-sm flex-center q-mt-sm">
+    <q-space></q-space>
+
+    <div class="col-auto">
+      <q-btn
+        class="q-mr-sm"
+        color="primary"
+        no-caps
+        label="Thêm mới"
+        style="width: 100px"
+        @click="showDialog = true"
+      >
+      </q-btn>
+    </div>
+
+    <div class="col-12 q-mt-sm">
+      <q-table
+        :rows="listDeposit"
+        :columns="tableColumns"
+        :no-data-label="$t('emptyData')"
+        row-key="name"
+        separator="cell"
+        :rows-per-page-label="$t('recordPerPage')"
+        wrap-cells
+        hide-pagination
+        class="sticky-header-table"
+      >
+        <!-- <template v-slot:body-cell-action="rowData">
+          <q-td style="padding: 0; text-align: center">
+            <q-btn
+              flat
+              round
+              color="primary"
+              icon="mdi-information-outline"
+              @click="detail(rowData.row.id)"
+            >
+              <q-tooltip :offset="[10, 10]">{{
+                $t('listBooking.toolTipMessage')
+              }}</q-tooltip>
+            </q-btn>
+          </q-td>
+        </template> -->
+        <!-- <template v-slot:body-cell-stt="item">
+          <q-td :item="item" style="text-align: center">
+            {{ 1 + item.rowIndex + pageSize * (pageIndex - 1) }}
+          </q-td>
+        </template> -->
+
+        <!-- <template v-slot:body-cell-status="item">
+          <q-td align="center">
+            <template v-for="(data, idx) in ListStatusBooking">
+              <q-chip
+                v-if="item.row.status === data.id"
+                :key="`status-${idx}-${item}`"
+                size="sm"
+                label
+                :color="data.color"
+                >{{ data.name }}</q-chip
+              >
+            </template>
+          </q-td>
+        </template> -->
+
+        <!-- <template v-slot:body-cell-performStatus="item">
+          <q-td align="center">
+            <template v-for="(data, idx) in ListPerformStatus">
+              <q-chip
+                v-if="item.row.performStatus === data.id"
+                :key="`performStatus-${idx}-${item}`"
+                size="sm"
+                label
+                :color="data.color"
+                >{{ data.name }}</q-chip
+              >
+            </template>
+          </q-td>
+        </template> -->
+
+        <template v-slot:body-cell-content="item">
+          <td>
+            <div class="ellipsis-3-lines">
+              {{ !item.row.content ? '' : item.row.content }}
+              <q-tooltip :offset="[10, 10]" max-width="35%">{{
+                !item.row.content ? '' : item.row.content
+              }}</q-tooltip>
+            </div>
+          </td>
+        </template>
+      </q-table>
+      <div>
+        <addNewDialog
+          v-model:image="image"
+          v-model:birthday="birthday"
+          @SetAvatar="setAvatar($event)"
+          @deleteAvatar="deleteAvatar"
+          v-model:show-dialog="showDialog"
+        ></addNewDialog>
+      </div>
+    </div>
+
+    <!-- <detailBooking
+        v-model:show-dialog="showDialog"
+        :detail-info-booking="detailInfoBooking"
+        @click:CloseBtn="showDialog = false"
+      ></detailBooking> -->
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent, Ref, ref, onMounted } from 'vue';
+import { api, BaseResponseBody } from 'src/boot/axios';
+import { config, API_PATHS } from 'src/assets/configurations.example';
+import { AxiosResponse } from 'axios';
+import addNewDialog from '../../detailBooking/tableDeposit/add.vue';
+import { ListDeposit, FileUploadType } from 'src/assets/type';
+export default defineComponent({
+  components: {
+    addNewDialog,
+  },
+  props: {
+    id: {
+      type: Number,
+      required: true,
+    },
+  },
+  setup(props) {
+    const tableColumns = [
+      {
+        name: 'stt',
+        field: 'stt',
+        required: true,
+
+        headerStyle: 'text-align: center !important; width: 4%',
+        align: 'center',
+        sortable: false,
+      },
+      {
+        name: 'bookingCode',
+        field: 'bookingCode',
+        required: true,
+
+        headerStyle: 'text-align: center !important; width: 4%',
+        align: 'center',
+        sortable: false,
+      },
+      {
+        name: 'artistName',
+        field: 'artistName',
+        required: true,
+
+        align: 'left',
+        headerStyle: 'text-align: center !important; width: 9%',
+        sortable: false,
+      },
+      {
+        name: 'userName',
+        field: 'userName',
+        required: true,
+
+        headerStyle: 'text-align: center !important; width: 9%',
+        align: 'left',
+        sortable: false,
+      },
+      {
+        name: 'address',
+        field: 'address',
+        required: true,
+
+        headerStyle: 'text-align: center !important; width: 13%',
+        align: 'left',
+        sortable: false,
+      },
+      // {
+      //   name: 'content',
+      //   field: 'content',
+      //   required: true,
+      //   label: i18n.global.t('listBooking.titleColumnsTable.content'),
+      //   headerStyle: 'text-align: center !important; width: 13%',
+      //   align: 'left',
+      //   sortable: false,
+      // },
+      {
+        name: 'fromTime',
+        field: 'fromTime',
+        required: true,
+
+        headerStyle: 'text-align: center !important; width: 9%',
+        align: 'left',
+        sortable: false,
+      },
+      {
+        name: 'toTime',
+        field: 'toTime',
+        required: true,
+
+        headerStyle: 'text-align: center !important; width: 9%',
+        align: 'left',
+        sortable: false,
+      },
+      {
+        name: 'fee',
+        field: 'fee',
+        required: true,
+
+        headerStyle: 'text-align: center !important; width: 9%',
+        align: 'left',
+        sortable: false,
+      },
+      // {
+      //   name: 'favoriteScore',
+      //   field: 'favoriteScore',
+      //   required: true,
+      //   label: i18n.global.t('listBooking.titleColumnsTable.favoriteScore'),
+      //   headerStyle: 'text-align: center !important; width: 7%',
+      //   align: 'center',
+      //   sortable: false,
+      // },
+      {
+        name: 'status',
+        field: 'status',
+        required: true,
+
+        headerStyle: 'text-align: center !important; width: 8%',
+        align: 'center',
+        sortable: false,
+      },
+      {
+        name: 'performStatus',
+        field: 'performStatus',
+        required: true,
+
+        headerStyle: 'text-align: center !important; width: 8%',
+        align: 'center',
+        sortable: false,
+      },
+      {
+        name: 'action',
+        field: 'action',
+        required: true,
+
+        headerStyle: 'text-align: center !important; width: 7%',
+        align: 'center',
+        sortable: false,
+      },
+    ];
+    const birthday: Ref<string | null> = ref(null);
+    const listDeposit: Ref<unknown[]> = ref([]);
+    const showDialog = ref(false);
+    const avatarFile: Ref<File | null> = ref(null);
+    const avatarUploaded: Ref<string> = ref('');
+    const image: Ref<string | null> = ref(null);
+    const setAvatar = (value: { file?: File; url?: string }) => {
+      avatarFile.value = value.file as File;
+      image.value = value.url as string;
+    };
+    const UpdateBirtday = (value: string) => {
+      birthday.value = value;
+    };
+
+    const deleteAvatar = () => {
+      image.value = null;
+    };
+
+    const callApiUploadAvatar = async (file: File) => {
+      try {
+        const bodyFormData = new FormData();
+        bodyFormData.append('file', file);
+        const response = (await api({
+          headers: { 'Content-Type': 'multipart/form-data' },
+          // url: 'https://cms.vab.vn/file/upload/', // pro
+          url: 'http://103.147.34.20:10705/file/upload/', // test
+
+          method: 'POST',
+          data: bodyFormData,
+        })) as AxiosResponse<BaseResponseBody<FileUploadType>>;
+        if (response.data.error.code === config.API_RES_CODE.OK.code) {
+          return response.data.data.fileName;
+        } else {
+          return '';
+        }
+      } catch (error) {
+        return '';
+      }
+    };
+
+    const getList = async () => {
+      try {
+        const response = (await api({
+          url: API_PATHS.getListDeposit,
+          method: 'GET',
+          params: {
+            bookingId: props.id,
+          },
+        })) as AxiosResponse<BaseResponseBody<ListDeposit>>;
+        if (response.data.error.code === config.API_RES_CODE.OK.code) {
+          listDeposit.value = response.data.data.artistBookingDepositDtos;
+        }
+      } catch (error) {}
+    };
+
+    // dialog add
+
+    onMounted(() => {
+      void getList();
+    });
+    return {
+      tableColumns,
+      listDeposit,
+      getList,
+      showDialog,
+      setAvatar,
+      callApiUploadAvatar,
+      deleteAvatar,
+      image,
+      birthday,
+      UpdateBirtday,
+    };
+  },
+});
+</script>

src/pages/bai-viet/index.vue

@@ -461,8 +461,8 @@ export default defineComponent({
         bodyFormData.append('file', file);
         const response = (await api({
           headers: { 'Content-Type': 'multipart/form-data' },
-          url: 'https://cms.vab.vn/file/upload/', // pro
-          // url: 'http://103.147.34.20:10705/file/upload/', // test
+          // url: 'https://cms.vab.vn/file/upload/', // pro
+          url: 'http://103.147.34.20:10705/file/upload/', // test
 
           method: 'POST',
           data: bodyFormData,

src/pages/banner/index.vue

@@ -400,8 +400,8 @@ export default defineComponent({
         bodyFormData.append('file', file);
         const response = (await api({
           headers: { 'Content-Type': 'multipart/form-data' },
-          url: 'https://cms.vab.vn/file/upload/', // pro
-          // url: 'http://103.147.34.20:10705/file/upload/', // test
+          // url: 'https://cms.vab.vn/file/upload/', // pro
+          url: 'http://103.147.34.20:10705/file/upload/', // test
 
           method: 'POST',
           data: bodyFormData,

src/pages/cau-hinh-doi-tac-truyen-thong/index.vue

@@ -408,8 +408,8 @@ export default defineComponent({
         bodyFormData.append('file', file);
         const response = (await api({
           headers: { 'Content-Type': 'multipart/form-data' },
-          url: 'https://cms.vab.vn/file/upload/', // pro
-          // url: 'http://103.147.34.20:10705/file/upload/', // test
+          // url: 'https://cms.vab.vn/file/upload/', // pro
+          url: 'http://103.147.34.20:10705/file/upload/', // test
 
           method: 'POST',
           data: bodyFormData,

src/pages/cau-hinh-san-pham-noi-bat/index.vue

@@ -468,8 +468,8 @@ export default defineComponent({
         bodyFormData.append('file', file);
         const response = (await api({
           headers: { 'Content-Type': 'multipart/form-data' },
-          url: 'https://cms.vab.vn/file/upload/', // pro
-          //  url: 'http://103.147.34.20:10705/file/upload/', // test
+          // url: 'https://cms.vab.vn/file/upload/', // pro
+          url: 'http://103.147.34.20:10705/file/upload/', // test
 
           method: 'POST',
           data: bodyFormData,

src/pages/cau-hinh-tin-tuc/index.vue

@@ -413,8 +413,8 @@ export default defineComponent({
         bodyFormData.append('file', file);
         const response = (await api({
           headers: { 'Content-Type': 'multipart/form-data' },
-          url: 'https://cms.vab.vn/file/upload/', // pro
-          // url: 'http://103.147.34.20:10705/file/upload/', // test
+          // url: 'https://cms.vab.vn/file/upload/', // pro
+          url: 'http://103.147.34.20:10705/file/upload/', // test
           method: 'POST',
           data: bodyFormData,
         })) as AxiosResponse<BaseResponseBody<FileUploadType>>;

src/pages/nghe-si-cho-duyet/index.vue

@@ -233,7 +233,7 @@
 import { i18n } from 'src/boot/i18n';
 import { defineComponent, onMounted, ref, Ref } from 'vue';
 import UpdateArtistsDialogComponent from '../../components/artist-information/browser-new-artist-dialog.vue';
-import { Dialog, Notify } from 'quasar';
+import { Notify } from 'quasar';
 import {
   PaginationResponse,
   ArtistInfoType,
@@ -244,9 +244,6 @@ import {
   WorkType,
   ProvinceType,
   MusicType,
-  BannerType,
-  CardBankType,
-  TypeCardType,
   SchedulesType,
   FileUploadType,
 } from 'src/assets/type';
@@ -256,7 +253,7 @@ import RefusedBrowser from '../../components/artist-information/openDialogRefuse
 import { API_PATHS, config } from 'src/assets/configurations.example';
 import { AxiosResponse } from 'axios';
 import moment from 'moment';
-import { useRoute } from 'vue-router';
+// import { useRoute } from 'vue-router';
 import { Pages } from 'src/router/routes';
 import { Router } from 'src/router';
 export type AvatarType = {