changes
This commit is contained in:
Xuan Loi
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@@ -0,0 +1 @@
|
||||
node_modules
|
||||
18
.nuxt/app.config.mjs
Normal file
18
.nuxt/app.config.mjs
Normal file
@@ -0,0 +1,18 @@
|
||||
|
||||
import { _replaceAppConfig } from '#app/config'
|
||||
import { defuFn } from 'defu'
|
||||
|
||||
const inlineConfig = {
|
||||
"nuxt": {}
|
||||
}
|
||||
|
||||
// Vite - webpack is handled directly in #app/config
|
||||
if (import.meta.hot) {
|
||||
import.meta.hot.accept((newModule) => {
|
||||
_replaceAppConfig(newModule.default)
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
export default /*@__PURE__*/ defuFn(inlineConfig)
|
||||
1
.nuxt/component-chunk.mjs
Normal file
1
.nuxt/component-chunk.mjs
Normal file
@@ -0,0 +1 @@
|
||||
export default {}
|
||||
546
.nuxt/components.d.ts
vendored
Normal file
546
.nuxt/components.d.ts
vendored
Normal file
@@ -0,0 +1,546 @@
|
||||
|
||||
import type { DefineComponent, SlotsType } from 'vue'
|
||||
type IslandComponent<T extends DefineComponent> = T & DefineComponent<{}, {refresh: () => Promise<void>}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, SlotsType<{ fallback: { error: unknown } }>>
|
||||
type HydrationStrategies = {
|
||||
hydrateOnVisible?: IntersectionObserverInit | true
|
||||
hydrateOnIdle?: number | true
|
||||
hydrateOnInteraction?: keyof HTMLElementEventMap | Array<keyof HTMLElementEventMap> | true
|
||||
hydrateOnMediaQuery?: string
|
||||
hydrateAfter?: number
|
||||
hydrateWhen?: boolean
|
||||
hydrateNever?: true
|
||||
}
|
||||
type LazyComponent<T> = (T & DefineComponent<HydrationStrategies, {}, {}, {}, {}, {}, {}, { hydrated: () => void }>)
|
||||
interface _GlobalComponents {
|
||||
'Caption': typeof import("../components/Caption.vue")['default']
|
||||
'Modal': typeof import("../components/Modal.vue")['default']
|
||||
'SearchBox': typeof import("../components/SearchBox.vue")['default']
|
||||
'SvgIcon': typeof import("../components/SvgIcon.vue")['default']
|
||||
'Tooltip': typeof import("../components/Tooltip.vue")['default']
|
||||
'TopMenu': typeof import("../components/TopMenu.vue")['default']
|
||||
'CommonAvatarbox': typeof import("../components/common/Avatarbox.vue")['default']
|
||||
'CommonEditor': typeof import("../components/common/Editor.vue")['default']
|
||||
'CommonInputEmail': typeof import("../components/common/InputEmail.vue")['default']
|
||||
'CommonInputNumber': typeof import("../components/common/InputNumber.vue")['default']
|
||||
'CommonInputPhone': typeof import("../components/common/InputPhone.vue")['default']
|
||||
'CommonJobView': typeof import("../components/common/JobView.vue")['default']
|
||||
'CommonNoteInfo': typeof import("../components/common/NoteInfo.vue")['default']
|
||||
'CommonNotebox': typeof import("../components/common/Notebox.vue")['default']
|
||||
'CommonPhone': typeof import("../components/common/Phone.vue")['default']
|
||||
'DatatableContextMenu': typeof import("../components/datatable/ContextMenu.vue")['default']
|
||||
'DatatableCreateTemplate': typeof import("../components/datatable/CreateTemplate.vue")['default']
|
||||
'DatatableDataModel': typeof import("../components/datatable/DataModel.vue")['default']
|
||||
'DatatableDataTable': typeof import("../components/datatable/DataTable.vue")['default']
|
||||
'DatatableDataView': typeof import("../components/datatable/DataView.vue")['default']
|
||||
'DatatableEditLabel': typeof import("../components/datatable/EditLabel.vue")['default']
|
||||
'DatatableFieldAttribute': typeof import("../components/datatable/FieldAttribute.vue")['default']
|
||||
'DatatableFilterOption': typeof import("../components/datatable/FilterOption.vue")['default']
|
||||
'DatatableFormatOption': typeof import("../components/datatable/FormatOption.vue")['default']
|
||||
'DatatableMenuSave': typeof import("../components/datatable/MenuSave.vue")['default']
|
||||
'DatatableModelInfo': typeof import("../components/datatable/ModelInfo.vue")['default']
|
||||
'DatatableNewField': typeof import("../components/datatable/NewField.vue")['default']
|
||||
'DatatablePagination': typeof import("../components/datatable/Pagination.vue")['default']
|
||||
'DatatableScrollBox': typeof import("../components/datatable/ScrollBox.vue")['default']
|
||||
'DatatableTableOption': typeof import("../components/datatable/TableOption.vue")['default']
|
||||
'DatatableTableSetting': typeof import("../components/datatable/TableSetting.vue")['default']
|
||||
'DatatableTimeOption': typeof import("../components/datatable/TimeOption.vue")['default']
|
||||
'DatatableFormatColorText': typeof import("../components/datatable/format/ColorText.vue")['default']
|
||||
'DatatableFormatDate': typeof import("../components/datatable/format/FormatDate.vue")['default']
|
||||
'DatatableFormatNumber': typeof import("../components/datatable/format/FormatNumber.vue")['default']
|
||||
'DatatableFormatTime': typeof import("../components/datatable/format/FormatTime.vue")['default']
|
||||
'Datepicker': typeof import("../components/datepicker/Datepicker.vue")['default']
|
||||
'DatepickerEventDetail': typeof import("../components/datepicker/EventDetail.vue")['default']
|
||||
'DatepickerEventMultiMonth': typeof import("../components/datepicker/EventMultiMonth.vue")['default']
|
||||
'DatepickerEventOneMonth': typeof import("../components/datepicker/EventOneMonth.vue")['default']
|
||||
'DatepickerEventSummary': typeof import("../components/datepicker/EventSummary.vue")['default']
|
||||
'DatepickerPickDay': typeof import("../components/datepicker/PickDay.vue")['default']
|
||||
'DatepickerPickMonth': typeof import("../components/datepicker/PickMonth.vue")['default']
|
||||
'DatepickerPickYear': typeof import("../components/datepicker/PickYear.vue")['default']
|
||||
'DatepickerViewEvent': typeof import("../components/datepicker/ViewEvent.vue")['default']
|
||||
'DialogApprovalCode': typeof import("../components/dialog/ApprovalCode.vue")['default']
|
||||
'DialogConfirm': typeof import("../components/dialog/Confirm.vue")['default']
|
||||
'DialogCountDown': typeof import("../components/dialog/CountDown.vue")['default']
|
||||
'DialogDelete': typeof import("../components/dialog/Delete.vue")['default']
|
||||
'DialogError': typeof import("../components/dialog/Error.vue")['default']
|
||||
'DialogInfo': typeof import("../components/dialog/Info.vue")['default']
|
||||
'DialogSuccess': typeof import("../components/dialog/Success.vue")['default']
|
||||
'MaintabConfiguration': typeof import("../components/maintab/Configuration.vue")['default']
|
||||
'MaintabDataDeletion': typeof import("../components/maintab/DataDeletion.vue")['default']
|
||||
'MediaCamera': typeof import("../components/media/Camera.vue")['default']
|
||||
'MediaChipImage': typeof import("../components/media/ChipImage.vue")['default']
|
||||
'MediaCropImage': typeof import("../components/media/CropImage.vue")['default']
|
||||
'MediaFileCount': typeof import("../components/media/FileCount.vue")['default']
|
||||
'MediaFileGallery': typeof import("../components/media/FileGallery.vue")['default']
|
||||
'MediaFileInfo': typeof import("../components/media/FileInfo.vue")['default']
|
||||
'MediaFileList': typeof import("../components/media/FileList.vue")['default']
|
||||
'MediaFileShow': typeof import("../components/media/FileShow.vue")['default']
|
||||
'MediaFileUpload': typeof import("../components/media/FileUpload.vue")['default']
|
||||
'MediaImageAttr': typeof import("../components/media/ImageAttr.vue")['default']
|
||||
'MediaImageGallery': typeof import("../components/media/ImageGallery.vue")['default']
|
||||
'MediaImageShow': typeof import("../components/media/ImageShow.vue")['default']
|
||||
'MediaImagebox': typeof import("../components/media/Imagebox.vue")['default']
|
||||
'MediaPicture': typeof import("../components/media/Picture.vue")['default']
|
||||
'MediaUploadProgress': typeof import("../components/media/UploadProgress.vue")['default']
|
||||
'MediaYoutubeVideo': typeof import("../components/media/YoutubeVideo.vue")['default']
|
||||
'MenuMarkData': typeof import("../components/menu/MarkData.vue")['default']
|
||||
'MenuAction': typeof import("../components/menu/MenuAction.vue")['default']
|
||||
'MenuAdd': typeof import("../components/menu/MenuAdd.vue")['default']
|
||||
'MenuCV': typeof import("../components/menu/MenuCV.vue")['default']
|
||||
'MenuCheck': typeof import("../components/menu/MenuCheck.vue")['default']
|
||||
'MenuCollab': typeof import("../components/menu/MenuCollab.vue")['default']
|
||||
'MenuDocker': typeof import("../components/menu/MenuDocker.vue")['default']
|
||||
'MenuParam': typeof import("../components/menu/MenuParam.vue")['default']
|
||||
'MenuPhone': typeof import("../components/menu/MenuPhone.vue")['default']
|
||||
'MenuRights': typeof import("../components/menu/MenuRights.vue")['default']
|
||||
'MenuStaff': typeof import("../components/menu/MenuStaff.vue")['default']
|
||||
'MenuUser': typeof import("../components/menu/MenuUser.vue")['default']
|
||||
'ParameterApps': typeof import("../components/parameter/Apps.vue")['default']
|
||||
'ParameterCodeName': typeof import("../components/parameter/CodeName.vue")['default']
|
||||
'ParameterCommon': typeof import("../components/parameter/Common.vue")['default']
|
||||
'ParameterDataSetting': typeof import("../components/parameter/DataSetting.vue")['default']
|
||||
'ParameterEmailSetup': typeof import("../components/parameter/EmailSetup.vue")['default']
|
||||
'ParameterNameDetail': typeof import("../components/parameter/NameDetail.vue")['default']
|
||||
'ParameterSettingFields': typeof import("../components/parameter/SettingFields.vue")['default']
|
||||
'ServerContainerMgnt': typeof import("../components/server/ContainerMgnt.vue")['default']
|
||||
'ServerCpuRam': typeof import("../components/server/CpuRam.vue")['default']
|
||||
'ServerDiskInfo': typeof import("../components/server/DiskInfo.vue")['default']
|
||||
'ServerDockerContainer': typeof import("../components/server/DockerContainer.vue")['default']
|
||||
'ServerInfo': typeof import("../components/server/ServerInfo.vue")['default']
|
||||
'SnackbarError': typeof import("../components/snackbar/Error.vue")['default']
|
||||
'SnackbarInfo': typeof import("../components/snackbar/Info.vue")['default']
|
||||
'SnackbarSnackBar': typeof import("../components/snackbar/SnackBar.vue")['default']
|
||||
'SnackbarSuccess': typeof import("../components/snackbar/Success.vue")['default']
|
||||
'UserChangePass': typeof import("../components/user/ChangePass.vue")['default']
|
||||
'UserConfirmCode': typeof import("../components/user/ConfirmCode.vue")['default']
|
||||
'UserCreateUser': typeof import("../components/user/CreateUser.vue")['default']
|
||||
'UserEditUser': typeof import("../components/user/EditUser.vue")['default']
|
||||
'UserLogout': typeof import("../components/user/Logout.vue")['default']
|
||||
'UserNewUser': typeof import("../components/user/NewUser.vue")['default']
|
||||
'UserProfile': typeof import("../components/user/Profile.vue")['default']
|
||||
'UserSetPassword': typeof import("../components/user/SetPassword.vue")['default']
|
||||
'UserInfo': typeof import("../components/user/UserInfo.vue")['default']
|
||||
'NuxtWelcome': typeof import("../node_modules/nuxt/dist/app/components/welcome.vue")['default']
|
||||
'NuxtLayout': typeof import("../node_modules/nuxt/dist/app/components/nuxt-layout")['default']
|
||||
'NuxtErrorBoundary': typeof import("../node_modules/nuxt/dist/app/components/nuxt-error-boundary.vue")['default']
|
||||
'ClientOnly': typeof import("../node_modules/nuxt/dist/app/components/client-only")['default']
|
||||
'DevOnly': typeof import("../node_modules/nuxt/dist/app/components/dev-only")['default']
|
||||
'ServerPlaceholder': typeof import("../node_modules/nuxt/dist/app/components/server-placeholder")['default']
|
||||
'NuxtLink': typeof import("../node_modules/nuxt/dist/app/components/nuxt-link")['default']
|
||||
'NuxtLoadingIndicator': typeof import("../node_modules/nuxt/dist/app/components/nuxt-loading-indicator")['default']
|
||||
'NuxtTime': typeof import("../node_modules/nuxt/dist/app/components/nuxt-time.vue")['default']
|
||||
'NuxtRouteAnnouncer': typeof import("../node_modules/nuxt/dist/app/components/nuxt-route-announcer")['default']
|
||||
'NuxtImg': typeof import("../node_modules/@nuxt/image/dist/runtime/components/NuxtImg.vue")['default']
|
||||
'NuxtPicture': typeof import("../node_modules/@nuxt/image/dist/runtime/components/NuxtPicture.vue")['default']
|
||||
'NuxtPage': typeof import("../node_modules/nuxt/dist/pages/runtime/page")['default']
|
||||
'NoScript': typeof import("../node_modules/nuxt/dist/head/runtime/components")['NoScript']
|
||||
'Link': typeof import("../node_modules/nuxt/dist/head/runtime/components")['Link']
|
||||
'Base': typeof import("../node_modules/nuxt/dist/head/runtime/components")['Base']
|
||||
'Title': typeof import("../node_modules/nuxt/dist/head/runtime/components")['Title']
|
||||
'Meta': typeof import("../node_modules/nuxt/dist/head/runtime/components")['Meta']
|
||||
'Style': typeof import("../node_modules/nuxt/dist/head/runtime/components")['Style']
|
||||
'Head': typeof import("../node_modules/nuxt/dist/head/runtime/components")['Head']
|
||||
'Html': typeof import("../node_modules/nuxt/dist/head/runtime/components")['Html']
|
||||
'Body': typeof import("../node_modules/nuxt/dist/head/runtime/components")['Body']
|
||||
'NuxtIsland': typeof import("../node_modules/nuxt/dist/app/components/nuxt-island")['default']
|
||||
'NuxtRouteAnnouncer': IslandComponent<typeof import("../node_modules/nuxt/dist/app/components/server-placeholder")['default']>
|
||||
'LazyCaption': LazyComponent<typeof import("../components/Caption.vue")['default']>
|
||||
'LazyModal': LazyComponent<typeof import("../components/Modal.vue")['default']>
|
||||
'LazySearchBox': LazyComponent<typeof import("../components/SearchBox.vue")['default']>
|
||||
'LazySvgIcon': LazyComponent<typeof import("../components/SvgIcon.vue")['default']>
|
||||
'LazyTooltip': LazyComponent<typeof import("../components/Tooltip.vue")['default']>
|
||||
'LazyTopMenu': LazyComponent<typeof import("../components/TopMenu.vue")['default']>
|
||||
'LazyCommonAvatarbox': LazyComponent<typeof import("../components/common/Avatarbox.vue")['default']>
|
||||
'LazyCommonEditor': LazyComponent<typeof import("../components/common/Editor.vue")['default']>
|
||||
'LazyCommonInputEmail': LazyComponent<typeof import("../components/common/InputEmail.vue")['default']>
|
||||
'LazyCommonInputNumber': LazyComponent<typeof import("../components/common/InputNumber.vue")['default']>
|
||||
'LazyCommonInputPhone': LazyComponent<typeof import("../components/common/InputPhone.vue")['default']>
|
||||
'LazyCommonJobView': LazyComponent<typeof import("../components/common/JobView.vue")['default']>
|
||||
'LazyCommonNoteInfo': LazyComponent<typeof import("../components/common/NoteInfo.vue")['default']>
|
||||
'LazyCommonNotebox': LazyComponent<typeof import("../components/common/Notebox.vue")['default']>
|
||||
'LazyCommonPhone': LazyComponent<typeof import("../components/common/Phone.vue")['default']>
|
||||
'LazyDatatableContextMenu': LazyComponent<typeof import("../components/datatable/ContextMenu.vue")['default']>
|
||||
'LazyDatatableCreateTemplate': LazyComponent<typeof import("../components/datatable/CreateTemplate.vue")['default']>
|
||||
'LazyDatatableDataModel': LazyComponent<typeof import("../components/datatable/DataModel.vue")['default']>
|
||||
'LazyDatatableDataTable': LazyComponent<typeof import("../components/datatable/DataTable.vue")['default']>
|
||||
'LazyDatatableDataView': LazyComponent<typeof import("../components/datatable/DataView.vue")['default']>
|
||||
'LazyDatatableEditLabel': LazyComponent<typeof import("../components/datatable/EditLabel.vue")['default']>
|
||||
'LazyDatatableFieldAttribute': LazyComponent<typeof import("../components/datatable/FieldAttribute.vue")['default']>
|
||||
'LazyDatatableFilterOption': LazyComponent<typeof import("../components/datatable/FilterOption.vue")['default']>
|
||||
'LazyDatatableFormatOption': LazyComponent<typeof import("../components/datatable/FormatOption.vue")['default']>
|
||||
'LazyDatatableMenuSave': LazyComponent<typeof import("../components/datatable/MenuSave.vue")['default']>
|
||||
'LazyDatatableModelInfo': LazyComponent<typeof import("../components/datatable/ModelInfo.vue")['default']>
|
||||
'LazyDatatableNewField': LazyComponent<typeof import("../components/datatable/NewField.vue")['default']>
|
||||
'LazyDatatablePagination': LazyComponent<typeof import("../components/datatable/Pagination.vue")['default']>
|
||||
'LazyDatatableScrollBox': LazyComponent<typeof import("../components/datatable/ScrollBox.vue")['default']>
|
||||
'LazyDatatableTableOption': LazyComponent<typeof import("../components/datatable/TableOption.vue")['default']>
|
||||
'LazyDatatableTableSetting': LazyComponent<typeof import("../components/datatable/TableSetting.vue")['default']>
|
||||
'LazyDatatableTimeOption': LazyComponent<typeof import("../components/datatable/TimeOption.vue")['default']>
|
||||
'LazyDatatableFormatColorText': LazyComponent<typeof import("../components/datatable/format/ColorText.vue")['default']>
|
||||
'LazyDatatableFormatDate': LazyComponent<typeof import("../components/datatable/format/FormatDate.vue")['default']>
|
||||
'LazyDatatableFormatNumber': LazyComponent<typeof import("../components/datatable/format/FormatNumber.vue")['default']>
|
||||
'LazyDatatableFormatTime': LazyComponent<typeof import("../components/datatable/format/FormatTime.vue")['default']>
|
||||
'LazyDatepicker': LazyComponent<typeof import("../components/datepicker/Datepicker.vue")['default']>
|
||||
'LazyDatepickerEventDetail': LazyComponent<typeof import("../components/datepicker/EventDetail.vue")['default']>
|
||||
'LazyDatepickerEventMultiMonth': LazyComponent<typeof import("../components/datepicker/EventMultiMonth.vue")['default']>
|
||||
'LazyDatepickerEventOneMonth': LazyComponent<typeof import("../components/datepicker/EventOneMonth.vue")['default']>
|
||||
'LazyDatepickerEventSummary': LazyComponent<typeof import("../components/datepicker/EventSummary.vue")['default']>
|
||||
'LazyDatepickerPickDay': LazyComponent<typeof import("../components/datepicker/PickDay.vue")['default']>
|
||||
'LazyDatepickerPickMonth': LazyComponent<typeof import("../components/datepicker/PickMonth.vue")['default']>
|
||||
'LazyDatepickerPickYear': LazyComponent<typeof import("../components/datepicker/PickYear.vue")['default']>
|
||||
'LazyDatepickerViewEvent': LazyComponent<typeof import("../components/datepicker/ViewEvent.vue")['default']>
|
||||
'LazyDialogApprovalCode': LazyComponent<typeof import("../components/dialog/ApprovalCode.vue")['default']>
|
||||
'LazyDialogConfirm': LazyComponent<typeof import("../components/dialog/Confirm.vue")['default']>
|
||||
'LazyDialogCountDown': LazyComponent<typeof import("../components/dialog/CountDown.vue")['default']>
|
||||
'LazyDialogDelete': LazyComponent<typeof import("../components/dialog/Delete.vue")['default']>
|
||||
'LazyDialogError': LazyComponent<typeof import("../components/dialog/Error.vue")['default']>
|
||||
'LazyDialogInfo': LazyComponent<typeof import("../components/dialog/Info.vue")['default']>
|
||||
'LazyDialogSuccess': LazyComponent<typeof import("../components/dialog/Success.vue")['default']>
|
||||
'LazyMaintabConfiguration': LazyComponent<typeof import("../components/maintab/Configuration.vue")['default']>
|
||||
'LazyMaintabDataDeletion': LazyComponent<typeof import("../components/maintab/DataDeletion.vue")['default']>
|
||||
'LazyMediaCamera': LazyComponent<typeof import("../components/media/Camera.vue")['default']>
|
||||
'LazyMediaChipImage': LazyComponent<typeof import("../components/media/ChipImage.vue")['default']>
|
||||
'LazyMediaCropImage': LazyComponent<typeof import("../components/media/CropImage.vue")['default']>
|
||||
'LazyMediaFileCount': LazyComponent<typeof import("../components/media/FileCount.vue")['default']>
|
||||
'LazyMediaFileGallery': LazyComponent<typeof import("../components/media/FileGallery.vue")['default']>
|
||||
'LazyMediaFileInfo': LazyComponent<typeof import("../components/media/FileInfo.vue")['default']>
|
||||
'LazyMediaFileList': LazyComponent<typeof import("../components/media/FileList.vue")['default']>
|
||||
'LazyMediaFileShow': LazyComponent<typeof import("../components/media/FileShow.vue")['default']>
|
||||
'LazyMediaFileUpload': LazyComponent<typeof import("../components/media/FileUpload.vue")['default']>
|
||||
'LazyMediaImageAttr': LazyComponent<typeof import("../components/media/ImageAttr.vue")['default']>
|
||||
'LazyMediaImageGallery': LazyComponent<typeof import("../components/media/ImageGallery.vue")['default']>
|
||||
'LazyMediaImageShow': LazyComponent<typeof import("../components/media/ImageShow.vue")['default']>
|
||||
'LazyMediaImagebox': LazyComponent<typeof import("../components/media/Imagebox.vue")['default']>
|
||||
'LazyMediaPicture': LazyComponent<typeof import("../components/media/Picture.vue")['default']>
|
||||
'LazyMediaUploadProgress': LazyComponent<typeof import("../components/media/UploadProgress.vue")['default']>
|
||||
'LazyMediaYoutubeVideo': LazyComponent<typeof import("../components/media/YoutubeVideo.vue")['default']>
|
||||
'LazyMenuMarkData': LazyComponent<typeof import("../components/menu/MarkData.vue")['default']>
|
||||
'LazyMenuAction': LazyComponent<typeof import("../components/menu/MenuAction.vue")['default']>
|
||||
'LazyMenuAdd': LazyComponent<typeof import("../components/menu/MenuAdd.vue")['default']>
|
||||
'LazyMenuCV': LazyComponent<typeof import("../components/menu/MenuCV.vue")['default']>
|
||||
'LazyMenuCheck': LazyComponent<typeof import("../components/menu/MenuCheck.vue")['default']>
|
||||
'LazyMenuCollab': LazyComponent<typeof import("../components/menu/MenuCollab.vue")['default']>
|
||||
'LazyMenuDocker': LazyComponent<typeof import("../components/menu/MenuDocker.vue")['default']>
|
||||
'LazyMenuParam': LazyComponent<typeof import("../components/menu/MenuParam.vue")['default']>
|
||||
'LazyMenuPhone': LazyComponent<typeof import("../components/menu/MenuPhone.vue")['default']>
|
||||
'LazyMenuRights': LazyComponent<typeof import("../components/menu/MenuRights.vue")['default']>
|
||||
'LazyMenuStaff': LazyComponent<typeof import("../components/menu/MenuStaff.vue")['default']>
|
||||
'LazyMenuUser': LazyComponent<typeof import("../components/menu/MenuUser.vue")['default']>
|
||||
'LazyParameterApps': LazyComponent<typeof import("../components/parameter/Apps.vue")['default']>
|
||||
'LazyParameterCodeName': LazyComponent<typeof import("../components/parameter/CodeName.vue")['default']>
|
||||
'LazyParameterCommon': LazyComponent<typeof import("../components/parameter/Common.vue")['default']>
|
||||
'LazyParameterDataSetting': LazyComponent<typeof import("../components/parameter/DataSetting.vue")['default']>
|
||||
'LazyParameterEmailSetup': LazyComponent<typeof import("../components/parameter/EmailSetup.vue")['default']>
|
||||
'LazyParameterNameDetail': LazyComponent<typeof import("../components/parameter/NameDetail.vue")['default']>
|
||||
'LazyParameterSettingFields': LazyComponent<typeof import("../components/parameter/SettingFields.vue")['default']>
|
||||
'LazyServerContainerMgnt': LazyComponent<typeof import("../components/server/ContainerMgnt.vue")['default']>
|
||||
'LazyServerCpuRam': LazyComponent<typeof import("../components/server/CpuRam.vue")['default']>
|
||||
'LazyServerDiskInfo': LazyComponent<typeof import("../components/server/DiskInfo.vue")['default']>
|
||||
'LazyServerDockerContainer': LazyComponent<typeof import("../components/server/DockerContainer.vue")['default']>
|
||||
'LazyServerInfo': LazyComponent<typeof import("../components/server/ServerInfo.vue")['default']>
|
||||
'LazySnackbarError': LazyComponent<typeof import("../components/snackbar/Error.vue")['default']>
|
||||
'LazySnackbarInfo': LazyComponent<typeof import("../components/snackbar/Info.vue")['default']>
|
||||
'LazySnackbarSnackBar': LazyComponent<typeof import("../components/snackbar/SnackBar.vue")['default']>
|
||||
'LazySnackbarSuccess': LazyComponent<typeof import("../components/snackbar/Success.vue")['default']>
|
||||
'LazyUserChangePass': LazyComponent<typeof import("../components/user/ChangePass.vue")['default']>
|
||||
'LazyUserConfirmCode': LazyComponent<typeof import("../components/user/ConfirmCode.vue")['default']>
|
||||
'LazyUserCreateUser': LazyComponent<typeof import("../components/user/CreateUser.vue")['default']>
|
||||
'LazyUserEditUser': LazyComponent<typeof import("../components/user/EditUser.vue")['default']>
|
||||
'LazyUserLogout': LazyComponent<typeof import("../components/user/Logout.vue")['default']>
|
||||
'LazyUserNewUser': LazyComponent<typeof import("../components/user/NewUser.vue")['default']>
|
||||
'LazyUserProfile': LazyComponent<typeof import("../components/user/Profile.vue")['default']>
|
||||
'LazyUserSetPassword': LazyComponent<typeof import("../components/user/SetPassword.vue")['default']>
|
||||
'LazyUserInfo': LazyComponent<typeof import("../components/user/UserInfo.vue")['default']>
|
||||
'LazyNuxtWelcome': LazyComponent<typeof import("../node_modules/nuxt/dist/app/components/welcome.vue")['default']>
|
||||
'LazyNuxtLayout': LazyComponent<typeof import("../node_modules/nuxt/dist/app/components/nuxt-layout")['default']>
|
||||
'LazyNuxtErrorBoundary': LazyComponent<typeof import("../node_modules/nuxt/dist/app/components/nuxt-error-boundary.vue")['default']>
|
||||
'LazyClientOnly': LazyComponent<typeof import("../node_modules/nuxt/dist/app/components/client-only")['default']>
|
||||
'LazyDevOnly': LazyComponent<typeof import("../node_modules/nuxt/dist/app/components/dev-only")['default']>
|
||||
'LazyServerPlaceholder': LazyComponent<typeof import("../node_modules/nuxt/dist/app/components/server-placeholder")['default']>
|
||||
'LazyNuxtLink': LazyComponent<typeof import("../node_modules/nuxt/dist/app/components/nuxt-link")['default']>
|
||||
'LazyNuxtLoadingIndicator': LazyComponent<typeof import("../node_modules/nuxt/dist/app/components/nuxt-loading-indicator")['default']>
|
||||
'LazyNuxtTime': LazyComponent<typeof import("../node_modules/nuxt/dist/app/components/nuxt-time.vue")['default']>
|
||||
'LazyNuxtRouteAnnouncer': LazyComponent<typeof import("../node_modules/nuxt/dist/app/components/nuxt-route-announcer")['default']>
|
||||
'LazyNuxtImg': LazyComponent<typeof import("../node_modules/@nuxt/image/dist/runtime/components/NuxtImg.vue")['default']>
|
||||
'LazyNuxtPicture': LazyComponent<typeof import("../node_modules/@nuxt/image/dist/runtime/components/NuxtPicture.vue")['default']>
|
||||
'LazyNuxtPage': LazyComponent<typeof import("../node_modules/nuxt/dist/pages/runtime/page")['default']>
|
||||
'LazyNoScript': LazyComponent<typeof import("../node_modules/nuxt/dist/head/runtime/components")['NoScript']>
|
||||
'LazyLink': LazyComponent<typeof import("../node_modules/nuxt/dist/head/runtime/components")['Link']>
|
||||
'LazyBase': LazyComponent<typeof import("../node_modules/nuxt/dist/head/runtime/components")['Base']>
|
||||
'LazyTitle': LazyComponent<typeof import("../node_modules/nuxt/dist/head/runtime/components")['Title']>
|
||||
'LazyMeta': LazyComponent<typeof import("../node_modules/nuxt/dist/head/runtime/components")['Meta']>
|
||||
'LazyStyle': LazyComponent<typeof import("../node_modules/nuxt/dist/head/runtime/components")['Style']>
|
||||
'LazyHead': LazyComponent<typeof import("../node_modules/nuxt/dist/head/runtime/components")['Head']>
|
||||
'LazyHtml': LazyComponent<typeof import("../node_modules/nuxt/dist/head/runtime/components")['Html']>
|
||||
'LazyBody': LazyComponent<typeof import("../node_modules/nuxt/dist/head/runtime/components")['Body']>
|
||||
'LazyNuxtIsland': LazyComponent<typeof import("../node_modules/nuxt/dist/app/components/nuxt-island")['default']>
|
||||
'LazyNuxtRouteAnnouncer': LazyComponent<IslandComponent<typeof import("../node_modules/nuxt/dist/app/components/server-placeholder")['default']>>
|
||||
}
|
||||
|
||||
declare module 'vue' {
|
||||
export interface GlobalComponents extends _GlobalComponents { }
|
||||
}
|
||||
|
||||
export const Caption: typeof import("../components/Caption.vue")['default']
|
||||
export const Modal: typeof import("../components/Modal.vue")['default']
|
||||
export const SearchBox: typeof import("../components/SearchBox.vue")['default']
|
||||
export const SvgIcon: typeof import("../components/SvgIcon.vue")['default']
|
||||
export const Tooltip: typeof import("../components/Tooltip.vue")['default']
|
||||
export const TopMenu: typeof import("../components/TopMenu.vue")['default']
|
||||
export const CommonAvatarbox: typeof import("../components/common/Avatarbox.vue")['default']
|
||||
export const CommonEditor: typeof import("../components/common/Editor.vue")['default']
|
||||
export const CommonInputEmail: typeof import("../components/common/InputEmail.vue")['default']
|
||||
export const CommonInputNumber: typeof import("../components/common/InputNumber.vue")['default']
|
||||
export const CommonInputPhone: typeof import("../components/common/InputPhone.vue")['default']
|
||||
export const CommonJobView: typeof import("../components/common/JobView.vue")['default']
|
||||
export const CommonNoteInfo: typeof import("../components/common/NoteInfo.vue")['default']
|
||||
export const CommonNotebox: typeof import("../components/common/Notebox.vue")['default']
|
||||
export const CommonPhone: typeof import("../components/common/Phone.vue")['default']
|
||||
export const DatatableContextMenu: typeof import("../components/datatable/ContextMenu.vue")['default']
|
||||
export const DatatableCreateTemplate: typeof import("../components/datatable/CreateTemplate.vue")['default']
|
||||
export const DatatableDataModel: typeof import("../components/datatable/DataModel.vue")['default']
|
||||
export const DatatableDataTable: typeof import("../components/datatable/DataTable.vue")['default']
|
||||
export const DatatableDataView: typeof import("../components/datatable/DataView.vue")['default']
|
||||
export const DatatableEditLabel: typeof import("../components/datatable/EditLabel.vue")['default']
|
||||
export const DatatableFieldAttribute: typeof import("../components/datatable/FieldAttribute.vue")['default']
|
||||
export const DatatableFilterOption: typeof import("../components/datatable/FilterOption.vue")['default']
|
||||
export const DatatableFormatOption: typeof import("../components/datatable/FormatOption.vue")['default']
|
||||
export const DatatableMenuSave: typeof import("../components/datatable/MenuSave.vue")['default']
|
||||
export const DatatableModelInfo: typeof import("../components/datatable/ModelInfo.vue")['default']
|
||||
export const DatatableNewField: typeof import("../components/datatable/NewField.vue")['default']
|
||||
export const DatatablePagination: typeof import("../components/datatable/Pagination.vue")['default']
|
||||
export const DatatableScrollBox: typeof import("../components/datatable/ScrollBox.vue")['default']
|
||||
export const DatatableTableOption: typeof import("../components/datatable/TableOption.vue")['default']
|
||||
export const DatatableTableSetting: typeof import("../components/datatable/TableSetting.vue")['default']
|
||||
export const DatatableTimeOption: typeof import("../components/datatable/TimeOption.vue")['default']
|
||||
export const DatatableFormatColorText: typeof import("../components/datatable/format/ColorText.vue")['default']
|
||||
export const DatatableFormatDate: typeof import("../components/datatable/format/FormatDate.vue")['default']
|
||||
export const DatatableFormatNumber: typeof import("../components/datatable/format/FormatNumber.vue")['default']
|
||||
export const DatatableFormatTime: typeof import("../components/datatable/format/FormatTime.vue")['default']
|
||||
export const Datepicker: typeof import("../components/datepicker/Datepicker.vue")['default']
|
||||
export const DatepickerEventDetail: typeof import("../components/datepicker/EventDetail.vue")['default']
|
||||
export const DatepickerEventMultiMonth: typeof import("../components/datepicker/EventMultiMonth.vue")['default']
|
||||
export const DatepickerEventOneMonth: typeof import("../components/datepicker/EventOneMonth.vue")['default']
|
||||
export const DatepickerEventSummary: typeof import("../components/datepicker/EventSummary.vue")['default']
|
||||
export const DatepickerPickDay: typeof import("../components/datepicker/PickDay.vue")['default']
|
||||
export const DatepickerPickMonth: typeof import("../components/datepicker/PickMonth.vue")['default']
|
||||
export const DatepickerPickYear: typeof import("../components/datepicker/PickYear.vue")['default']
|
||||
export const DatepickerViewEvent: typeof import("../components/datepicker/ViewEvent.vue")['default']
|
||||
export const DialogApprovalCode: typeof import("../components/dialog/ApprovalCode.vue")['default']
|
||||
export const DialogConfirm: typeof import("../components/dialog/Confirm.vue")['default']
|
||||
export const DialogCountDown: typeof import("../components/dialog/CountDown.vue")['default']
|
||||
export const DialogDelete: typeof import("../components/dialog/Delete.vue")['default']
|
||||
export const DialogError: typeof import("../components/dialog/Error.vue")['default']
|
||||
export const DialogInfo: typeof import("../components/dialog/Info.vue")['default']
|
||||
export const DialogSuccess: typeof import("../components/dialog/Success.vue")['default']
|
||||
export const MaintabConfiguration: typeof import("../components/maintab/Configuration.vue")['default']
|
||||
export const MaintabDataDeletion: typeof import("../components/maintab/DataDeletion.vue")['default']
|
||||
export const MediaCamera: typeof import("../components/media/Camera.vue")['default']
|
||||
export const MediaChipImage: typeof import("../components/media/ChipImage.vue")['default']
|
||||
export const MediaCropImage: typeof import("../components/media/CropImage.vue")['default']
|
||||
export const MediaFileCount: typeof import("../components/media/FileCount.vue")['default']
|
||||
export const MediaFileGallery: typeof import("../components/media/FileGallery.vue")['default']
|
||||
export const MediaFileInfo: typeof import("../components/media/FileInfo.vue")['default']
|
||||
export const MediaFileList: typeof import("../components/media/FileList.vue")['default']
|
||||
export const MediaFileShow: typeof import("../components/media/FileShow.vue")['default']
|
||||
export const MediaFileUpload: typeof import("../components/media/FileUpload.vue")['default']
|
||||
export const MediaImageAttr: typeof import("../components/media/ImageAttr.vue")['default']
|
||||
export const MediaImageGallery: typeof import("../components/media/ImageGallery.vue")['default']
|
||||
export const MediaImageShow: typeof import("../components/media/ImageShow.vue")['default']
|
||||
export const MediaImagebox: typeof import("../components/media/Imagebox.vue")['default']
|
||||
export const MediaPicture: typeof import("../components/media/Picture.vue")['default']
|
||||
export const MediaUploadProgress: typeof import("../components/media/UploadProgress.vue")['default']
|
||||
export const MediaYoutubeVideo: typeof import("../components/media/YoutubeVideo.vue")['default']
|
||||
export const MenuMarkData: typeof import("../components/menu/MarkData.vue")['default']
|
||||
export const MenuAction: typeof import("../components/menu/MenuAction.vue")['default']
|
||||
export const MenuAdd: typeof import("../components/menu/MenuAdd.vue")['default']
|
||||
export const MenuCV: typeof import("../components/menu/MenuCV.vue")['default']
|
||||
export const MenuCheck: typeof import("../components/menu/MenuCheck.vue")['default']
|
||||
export const MenuCollab: typeof import("../components/menu/MenuCollab.vue")['default']
|
||||
export const MenuDocker: typeof import("../components/menu/MenuDocker.vue")['default']
|
||||
export const MenuParam: typeof import("../components/menu/MenuParam.vue")['default']
|
||||
export const MenuPhone: typeof import("../components/menu/MenuPhone.vue")['default']
|
||||
export const MenuRights: typeof import("../components/menu/MenuRights.vue")['default']
|
||||
export const MenuStaff: typeof import("../components/menu/MenuStaff.vue")['default']
|
||||
export const MenuUser: typeof import("../components/menu/MenuUser.vue")['default']
|
||||
export const ParameterApps: typeof import("../components/parameter/Apps.vue")['default']
|
||||
export const ParameterCodeName: typeof import("../components/parameter/CodeName.vue")['default']
|
||||
export const ParameterCommon: typeof import("../components/parameter/Common.vue")['default']
|
||||
export const ParameterDataSetting: typeof import("../components/parameter/DataSetting.vue")['default']
|
||||
export const ParameterEmailSetup: typeof import("../components/parameter/EmailSetup.vue")['default']
|
||||
export const ParameterNameDetail: typeof import("../components/parameter/NameDetail.vue")['default']
|
||||
export const ParameterSettingFields: typeof import("../components/parameter/SettingFields.vue")['default']
|
||||
export const ServerContainerMgnt: typeof import("../components/server/ContainerMgnt.vue")['default']
|
||||
export const ServerCpuRam: typeof import("../components/server/CpuRam.vue")['default']
|
||||
export const ServerDiskInfo: typeof import("../components/server/DiskInfo.vue")['default']
|
||||
export const ServerDockerContainer: typeof import("../components/server/DockerContainer.vue")['default']
|
||||
export const ServerInfo: typeof import("../components/server/ServerInfo.vue")['default']
|
||||
export const SnackbarError: typeof import("../components/snackbar/Error.vue")['default']
|
||||
export const SnackbarInfo: typeof import("../components/snackbar/Info.vue")['default']
|
||||
export const SnackbarSnackBar: typeof import("../components/snackbar/SnackBar.vue")['default']
|
||||
export const SnackbarSuccess: typeof import("../components/snackbar/Success.vue")['default']
|
||||
export const UserChangePass: typeof import("../components/user/ChangePass.vue")['default']
|
||||
export const UserConfirmCode: typeof import("../components/user/ConfirmCode.vue")['default']
|
||||
export const UserCreateUser: typeof import("../components/user/CreateUser.vue")['default']
|
||||
export const UserEditUser: typeof import("../components/user/EditUser.vue")['default']
|
||||
export const UserLogout: typeof import("../components/user/Logout.vue")['default']
|
||||
export const UserNewUser: typeof import("../components/user/NewUser.vue")['default']
|
||||
export const UserProfile: typeof import("../components/user/Profile.vue")['default']
|
||||
export const UserSetPassword: typeof import("../components/user/SetPassword.vue")['default']
|
||||
export const UserInfo: typeof import("../components/user/UserInfo.vue")['default']
|
||||
export const NuxtWelcome: typeof import("../node_modules/nuxt/dist/app/components/welcome.vue")['default']
|
||||
export const NuxtLayout: typeof import("../node_modules/nuxt/dist/app/components/nuxt-layout")['default']
|
||||
export const NuxtErrorBoundary: typeof import("../node_modules/nuxt/dist/app/components/nuxt-error-boundary.vue")['default']
|
||||
export const ClientOnly: typeof import("../node_modules/nuxt/dist/app/components/client-only")['default']
|
||||
export const DevOnly: typeof import("../node_modules/nuxt/dist/app/components/dev-only")['default']
|
||||
export const ServerPlaceholder: typeof import("../node_modules/nuxt/dist/app/components/server-placeholder")['default']
|
||||
export const NuxtLink: typeof import("../node_modules/nuxt/dist/app/components/nuxt-link")['default']
|
||||
export const NuxtLoadingIndicator: typeof import("../node_modules/nuxt/dist/app/components/nuxt-loading-indicator")['default']
|
||||
export const NuxtTime: typeof import("../node_modules/nuxt/dist/app/components/nuxt-time.vue")['default']
|
||||
export const NuxtRouteAnnouncer: typeof import("../node_modules/nuxt/dist/app/components/nuxt-route-announcer")['default']
|
||||
export const NuxtImg: typeof import("../node_modules/@nuxt/image/dist/runtime/components/NuxtImg.vue")['default']
|
||||
export const NuxtPicture: typeof import("../node_modules/@nuxt/image/dist/runtime/components/NuxtPicture.vue")['default']
|
||||
export const NuxtPage: typeof import("../node_modules/nuxt/dist/pages/runtime/page")['default']
|
||||
export const NoScript: typeof import("../node_modules/nuxt/dist/head/runtime/components")['NoScript']
|
||||
export const Link: typeof import("../node_modules/nuxt/dist/head/runtime/components")['Link']
|
||||
export const Base: typeof import("../node_modules/nuxt/dist/head/runtime/components")['Base']
|
||||
export const Title: typeof import("../node_modules/nuxt/dist/head/runtime/components")['Title']
|
||||
export const Meta: typeof import("../node_modules/nuxt/dist/head/runtime/components")['Meta']
|
||||
export const Style: typeof import("../node_modules/nuxt/dist/head/runtime/components")['Style']
|
||||
export const Head: typeof import("../node_modules/nuxt/dist/head/runtime/components")['Head']
|
||||
export const Html: typeof import("../node_modules/nuxt/dist/head/runtime/components")['Html']
|
||||
export const Body: typeof import("../node_modules/nuxt/dist/head/runtime/components")['Body']
|
||||
export const NuxtIsland: typeof import("../node_modules/nuxt/dist/app/components/nuxt-island")['default']
|
||||
export const NuxtRouteAnnouncer: IslandComponent<typeof import("../node_modules/nuxt/dist/app/components/server-placeholder")['default']>
|
||||
export const LazyCaption: LazyComponent<typeof import("../components/Caption.vue")['default']>
|
||||
export const LazyModal: LazyComponent<typeof import("../components/Modal.vue")['default']>
|
||||
export const LazySearchBox: LazyComponent<typeof import("../components/SearchBox.vue")['default']>
|
||||
export const LazySvgIcon: LazyComponent<typeof import("../components/SvgIcon.vue")['default']>
|
||||
export const LazyTooltip: LazyComponent<typeof import("../components/Tooltip.vue")['default']>
|
||||
export const LazyTopMenu: LazyComponent<typeof import("../components/TopMenu.vue")['default']>
|
||||
export const LazyCommonAvatarbox: LazyComponent<typeof import("../components/common/Avatarbox.vue")['default']>
|
||||
export const LazyCommonEditor: LazyComponent<typeof import("../components/common/Editor.vue")['default']>
|
||||
export const LazyCommonInputEmail: LazyComponent<typeof import("../components/common/InputEmail.vue")['default']>
|
||||
export const LazyCommonInputNumber: LazyComponent<typeof import("../components/common/InputNumber.vue")['default']>
|
||||
export const LazyCommonInputPhone: LazyComponent<typeof import("../components/common/InputPhone.vue")['default']>
|
||||
export const LazyCommonJobView: LazyComponent<typeof import("../components/common/JobView.vue")['default']>
|
||||
export const LazyCommonNoteInfo: LazyComponent<typeof import("../components/common/NoteInfo.vue")['default']>
|
||||
export const LazyCommonNotebox: LazyComponent<typeof import("../components/common/Notebox.vue")['default']>
|
||||
export const LazyCommonPhone: LazyComponent<typeof import("../components/common/Phone.vue")['default']>
|
||||
export const LazyDatatableContextMenu: LazyComponent<typeof import("../components/datatable/ContextMenu.vue")['default']>
|
||||
export const LazyDatatableCreateTemplate: LazyComponent<typeof import("../components/datatable/CreateTemplate.vue")['default']>
|
||||
export const LazyDatatableDataModel: LazyComponent<typeof import("../components/datatable/DataModel.vue")['default']>
|
||||
export const LazyDatatableDataTable: LazyComponent<typeof import("../components/datatable/DataTable.vue")['default']>
|
||||
export const LazyDatatableDataView: LazyComponent<typeof import("../components/datatable/DataView.vue")['default']>
|
||||
export const LazyDatatableEditLabel: LazyComponent<typeof import("../components/datatable/EditLabel.vue")['default']>
|
||||
export const LazyDatatableFieldAttribute: LazyComponent<typeof import("../components/datatable/FieldAttribute.vue")['default']>
|
||||
export const LazyDatatableFilterOption: LazyComponent<typeof import("../components/datatable/FilterOption.vue")['default']>
|
||||
export const LazyDatatableFormatOption: LazyComponent<typeof import("../components/datatable/FormatOption.vue")['default']>
|
||||
export const LazyDatatableMenuSave: LazyComponent<typeof import("../components/datatable/MenuSave.vue")['default']>
|
||||
export const LazyDatatableModelInfo: LazyComponent<typeof import("../components/datatable/ModelInfo.vue")['default']>
|
||||
export const LazyDatatableNewField: LazyComponent<typeof import("../components/datatable/NewField.vue")['default']>
|
||||
export const LazyDatatablePagination: LazyComponent<typeof import("../components/datatable/Pagination.vue")['default']>
|
||||
export const LazyDatatableScrollBox: LazyComponent<typeof import("../components/datatable/ScrollBox.vue")['default']>
|
||||
export const LazyDatatableTableOption: LazyComponent<typeof import("../components/datatable/TableOption.vue")['default']>
|
||||
export const LazyDatatableTableSetting: LazyComponent<typeof import("../components/datatable/TableSetting.vue")['default']>
|
||||
export const LazyDatatableTimeOption: LazyComponent<typeof import("../components/datatable/TimeOption.vue")['default']>
|
||||
export const LazyDatatableFormatColorText: LazyComponent<typeof import("../components/datatable/format/ColorText.vue")['default']>
|
||||
export const LazyDatatableFormatDate: LazyComponent<typeof import("../components/datatable/format/FormatDate.vue")['default']>
|
||||
export const LazyDatatableFormatNumber: LazyComponent<typeof import("../components/datatable/format/FormatNumber.vue")['default']>
|
||||
export const LazyDatatableFormatTime: LazyComponent<typeof import("../components/datatable/format/FormatTime.vue")['default']>
|
||||
export const LazyDatepicker: LazyComponent<typeof import("../components/datepicker/Datepicker.vue")['default']>
|
||||
export const LazyDatepickerEventDetail: LazyComponent<typeof import("../components/datepicker/EventDetail.vue")['default']>
|
||||
export const LazyDatepickerEventMultiMonth: LazyComponent<typeof import("../components/datepicker/EventMultiMonth.vue")['default']>
|
||||
export const LazyDatepickerEventOneMonth: LazyComponent<typeof import("../components/datepicker/EventOneMonth.vue")['default']>
|
||||
export const LazyDatepickerEventSummary: LazyComponent<typeof import("../components/datepicker/EventSummary.vue")['default']>
|
||||
export const LazyDatepickerPickDay: LazyComponent<typeof import("../components/datepicker/PickDay.vue")['default']>
|
||||
export const LazyDatepickerPickMonth: LazyComponent<typeof import("../components/datepicker/PickMonth.vue")['default']>
|
||||
export const LazyDatepickerPickYear: LazyComponent<typeof import("../components/datepicker/PickYear.vue")['default']>
|
||||
export const LazyDatepickerViewEvent: LazyComponent<typeof import("../components/datepicker/ViewEvent.vue")['default']>
|
||||
export const LazyDialogApprovalCode: LazyComponent<typeof import("../components/dialog/ApprovalCode.vue")['default']>
|
||||
export const LazyDialogConfirm: LazyComponent<typeof import("../components/dialog/Confirm.vue")['default']>
|
||||
export const LazyDialogCountDown: LazyComponent<typeof import("../components/dialog/CountDown.vue")['default']>
|
||||
export const LazyDialogDelete: LazyComponent<typeof import("../components/dialog/Delete.vue")['default']>
|
||||
export const LazyDialogError: LazyComponent<typeof import("../components/dialog/Error.vue")['default']>
|
||||
export const LazyDialogInfo: LazyComponent<typeof import("../components/dialog/Info.vue")['default']>
|
||||
export const LazyDialogSuccess: LazyComponent<typeof import("../components/dialog/Success.vue")['default']>
|
||||
export const LazyMaintabConfiguration: LazyComponent<typeof import("../components/maintab/Configuration.vue")['default']>
|
||||
export const LazyMaintabDataDeletion: LazyComponent<typeof import("../components/maintab/DataDeletion.vue")['default']>
|
||||
export const LazyMediaCamera: LazyComponent<typeof import("../components/media/Camera.vue")['default']>
|
||||
export const LazyMediaChipImage: LazyComponent<typeof import("../components/media/ChipImage.vue")['default']>
|
||||
export const LazyMediaCropImage: LazyComponent<typeof import("../components/media/CropImage.vue")['default']>
|
||||
export const LazyMediaFileCount: LazyComponent<typeof import("../components/media/FileCount.vue")['default']>
|
||||
export const LazyMediaFileGallery: LazyComponent<typeof import("../components/media/FileGallery.vue")['default']>
|
||||
export const LazyMediaFileInfo: LazyComponent<typeof import("../components/media/FileInfo.vue")['default']>
|
||||
export const LazyMediaFileList: LazyComponent<typeof import("../components/media/FileList.vue")['default']>
|
||||
export const LazyMediaFileShow: LazyComponent<typeof import("../components/media/FileShow.vue")['default']>
|
||||
export const LazyMediaFileUpload: LazyComponent<typeof import("../components/media/FileUpload.vue")['default']>
|
||||
export const LazyMediaImageAttr: LazyComponent<typeof import("../components/media/ImageAttr.vue")['default']>
|
||||
export const LazyMediaImageGallery: LazyComponent<typeof import("../components/media/ImageGallery.vue")['default']>
|
||||
export const LazyMediaImageShow: LazyComponent<typeof import("../components/media/ImageShow.vue")['default']>
|
||||
export const LazyMediaImagebox: LazyComponent<typeof import("../components/media/Imagebox.vue")['default']>
|
||||
export const LazyMediaPicture: LazyComponent<typeof import("../components/media/Picture.vue")['default']>
|
||||
export const LazyMediaUploadProgress: LazyComponent<typeof import("../components/media/UploadProgress.vue")['default']>
|
||||
export const LazyMediaYoutubeVideo: LazyComponent<typeof import("../components/media/YoutubeVideo.vue")['default']>
|
||||
export const LazyMenuMarkData: LazyComponent<typeof import("../components/menu/MarkData.vue")['default']>
|
||||
export const LazyMenuAction: LazyComponent<typeof import("../components/menu/MenuAction.vue")['default']>
|
||||
export const LazyMenuAdd: LazyComponent<typeof import("../components/menu/MenuAdd.vue")['default']>
|
||||
export const LazyMenuCV: LazyComponent<typeof import("../components/menu/MenuCV.vue")['default']>
|
||||
export const LazyMenuCheck: LazyComponent<typeof import("../components/menu/MenuCheck.vue")['default']>
|
||||
export const LazyMenuCollab: LazyComponent<typeof import("../components/menu/MenuCollab.vue")['default']>
|
||||
export const LazyMenuDocker: LazyComponent<typeof import("../components/menu/MenuDocker.vue")['default']>
|
||||
export const LazyMenuParam: LazyComponent<typeof import("../components/menu/MenuParam.vue")['default']>
|
||||
export const LazyMenuPhone: LazyComponent<typeof import("../components/menu/MenuPhone.vue")['default']>
|
||||
export const LazyMenuRights: LazyComponent<typeof import("../components/menu/MenuRights.vue")['default']>
|
||||
export const LazyMenuStaff: LazyComponent<typeof import("../components/menu/MenuStaff.vue")['default']>
|
||||
export const LazyMenuUser: LazyComponent<typeof import("../components/menu/MenuUser.vue")['default']>
|
||||
export const LazyParameterApps: LazyComponent<typeof import("../components/parameter/Apps.vue")['default']>
|
||||
export const LazyParameterCodeName: LazyComponent<typeof import("../components/parameter/CodeName.vue")['default']>
|
||||
export const LazyParameterCommon: LazyComponent<typeof import("../components/parameter/Common.vue")['default']>
|
||||
export const LazyParameterDataSetting: LazyComponent<typeof import("../components/parameter/DataSetting.vue")['default']>
|
||||
export const LazyParameterEmailSetup: LazyComponent<typeof import("../components/parameter/EmailSetup.vue")['default']>
|
||||
export const LazyParameterNameDetail: LazyComponent<typeof import("../components/parameter/NameDetail.vue")['default']>
|
||||
export const LazyParameterSettingFields: LazyComponent<typeof import("../components/parameter/SettingFields.vue")['default']>
|
||||
export const LazyServerContainerMgnt: LazyComponent<typeof import("../components/server/ContainerMgnt.vue")['default']>
|
||||
export const LazyServerCpuRam: LazyComponent<typeof import("../components/server/CpuRam.vue")['default']>
|
||||
export const LazyServerDiskInfo: LazyComponent<typeof import("../components/server/DiskInfo.vue")['default']>
|
||||
export const LazyServerDockerContainer: LazyComponent<typeof import("../components/server/DockerContainer.vue")['default']>
|
||||
export const LazyServerInfo: LazyComponent<typeof import("../components/server/ServerInfo.vue")['default']>
|
||||
export const LazySnackbarError: LazyComponent<typeof import("../components/snackbar/Error.vue")['default']>
|
||||
export const LazySnackbarInfo: LazyComponent<typeof import("../components/snackbar/Info.vue")['default']>
|
||||
export const LazySnackbarSnackBar: LazyComponent<typeof import("../components/snackbar/SnackBar.vue")['default']>
|
||||
export const LazySnackbarSuccess: LazyComponent<typeof import("../components/snackbar/Success.vue")['default']>
|
||||
export const LazyUserChangePass: LazyComponent<typeof import("../components/user/ChangePass.vue")['default']>
|
||||
export const LazyUserConfirmCode: LazyComponent<typeof import("../components/user/ConfirmCode.vue")['default']>
|
||||
export const LazyUserCreateUser: LazyComponent<typeof import("../components/user/CreateUser.vue")['default']>
|
||||
export const LazyUserEditUser: LazyComponent<typeof import("../components/user/EditUser.vue")['default']>
|
||||
export const LazyUserLogout: LazyComponent<typeof import("../components/user/Logout.vue")['default']>
|
||||
export const LazyUserNewUser: LazyComponent<typeof import("../components/user/NewUser.vue")['default']>
|
||||
export const LazyUserProfile: LazyComponent<typeof import("../components/user/Profile.vue")['default']>
|
||||
export const LazyUserSetPassword: LazyComponent<typeof import("../components/user/SetPassword.vue")['default']>
|
||||
export const LazyUserInfo: LazyComponent<typeof import("../components/user/UserInfo.vue")['default']>
|
||||
export const LazyNuxtWelcome: LazyComponent<typeof import("../node_modules/nuxt/dist/app/components/welcome.vue")['default']>
|
||||
export const LazyNuxtLayout: LazyComponent<typeof import("../node_modules/nuxt/dist/app/components/nuxt-layout")['default']>
|
||||
export const LazyNuxtErrorBoundary: LazyComponent<typeof import("../node_modules/nuxt/dist/app/components/nuxt-error-boundary.vue")['default']>
|
||||
export const LazyClientOnly: LazyComponent<typeof import("../node_modules/nuxt/dist/app/components/client-only")['default']>
|
||||
export const LazyDevOnly: LazyComponent<typeof import("../node_modules/nuxt/dist/app/components/dev-only")['default']>
|
||||
export const LazyServerPlaceholder: LazyComponent<typeof import("../node_modules/nuxt/dist/app/components/server-placeholder")['default']>
|
||||
export const LazyNuxtLink: LazyComponent<typeof import("../node_modules/nuxt/dist/app/components/nuxt-link")['default']>
|
||||
export const LazyNuxtLoadingIndicator: LazyComponent<typeof import("../node_modules/nuxt/dist/app/components/nuxt-loading-indicator")['default']>
|
||||
export const LazyNuxtTime: LazyComponent<typeof import("../node_modules/nuxt/dist/app/components/nuxt-time.vue")['default']>
|
||||
export const LazyNuxtRouteAnnouncer: LazyComponent<typeof import("../node_modules/nuxt/dist/app/components/nuxt-route-announcer")['default']>
|
||||
export const LazyNuxtImg: LazyComponent<typeof import("../node_modules/@nuxt/image/dist/runtime/components/NuxtImg.vue")['default']>
|
||||
export const LazyNuxtPicture: LazyComponent<typeof import("../node_modules/@nuxt/image/dist/runtime/components/NuxtPicture.vue")['default']>
|
||||
export const LazyNuxtPage: LazyComponent<typeof import("../node_modules/nuxt/dist/pages/runtime/page")['default']>
|
||||
export const LazyNoScript: LazyComponent<typeof import("../node_modules/nuxt/dist/head/runtime/components")['NoScript']>
|
||||
export const LazyLink: LazyComponent<typeof import("../node_modules/nuxt/dist/head/runtime/components")['Link']>
|
||||
export const LazyBase: LazyComponent<typeof import("../node_modules/nuxt/dist/head/runtime/components")['Base']>
|
||||
export const LazyTitle: LazyComponent<typeof import("../node_modules/nuxt/dist/head/runtime/components")['Title']>
|
||||
export const LazyMeta: LazyComponent<typeof import("../node_modules/nuxt/dist/head/runtime/components")['Meta']>
|
||||
export const LazyStyle: LazyComponent<typeof import("../node_modules/nuxt/dist/head/runtime/components")['Style']>
|
||||
export const LazyHead: LazyComponent<typeof import("../node_modules/nuxt/dist/head/runtime/components")['Head']>
|
||||
export const LazyHtml: LazyComponent<typeof import("../node_modules/nuxt/dist/head/runtime/components")['Html']>
|
||||
export const LazyBody: LazyComponent<typeof import("../node_modules/nuxt/dist/head/runtime/components")['Body']>
|
||||
export const LazyNuxtIsland: LazyComponent<typeof import("../node_modules/nuxt/dist/app/components/nuxt-island")['default']>
|
||||
export const LazyNuxtRouteAnnouncer: LazyComponent<IslandComponent<typeof import("../node_modules/nuxt/dist/app/components/server-placeholder")['default']>>
|
||||
|
||||
export const componentNames: string[]
|
||||
1989
.nuxt/dev/index.mjs
Normal file
1989
.nuxt/dev/index.mjs
Normal file
File diff suppressed because it is too large
Load Diff
1
.nuxt/dev/index.mjs.map
Normal file
1
.nuxt/dev/index.mjs.map
Normal file
File diff suppressed because one or more lines are too long
18
.nuxt/dist/server/client.manifest.json
vendored
Normal file
18
.nuxt/dist/server/client.manifest.json
vendored
Normal file
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"@vite/client": {
|
||||
"prefetch": true,
|
||||
"isEntry": true,
|
||||
"file": "@vite/client",
|
||||
"css": [],
|
||||
"module": true,
|
||||
"resourceType": "script"
|
||||
},
|
||||
"/home/loitx/dev/utopia/system/node_modules/nuxt/dist/app/entry.js": {
|
||||
"resourceType": "script",
|
||||
"module": true,
|
||||
"prefetch": true,
|
||||
"preload": true,
|
||||
"isEntry": true,
|
||||
"file": "/home/loitx/dev/utopia/system/node_modules/nuxt/dist/app/entry.js"
|
||||
}
|
||||
}
|
||||
1
.nuxt/dist/server/client.manifest.mjs
vendored
Normal file
1
.nuxt/dist/server/client.manifest.mjs
vendored
Normal file
@@ -0,0 +1 @@
|
||||
export { default } from "file:///home/loitx/dev/utopia/system/node_modules/@nuxt/vite-builder/dist/runtime/client.manifest.mjs"
|
||||
1
.nuxt/dist/server/server.mjs
vendored
Normal file
1
.nuxt/dist/server/server.mjs
vendored
Normal file
@@ -0,0 +1 @@
|
||||
export { default } from "file:///home/loitx/dev/utopia/system/node_modules/@nuxt/vite-builder/dist/runtime/vite-node.mjs"
|
||||
36
.nuxt/imports.d.ts
vendored
Normal file
36
.nuxt/imports.d.ts
vendored
Normal file
@@ -0,0 +1,36 @@
|
||||
export { useScriptTriggerConsent, useScriptEventPage, useScriptTriggerElement, useScript, useScriptGoogleAnalytics, useScriptPlausibleAnalytics, useScriptCrisp, useScriptClarity, useScriptCloudflareWebAnalytics, useScriptFathomAnalytics, useScriptMatomoAnalytics, useScriptGoogleTagManager, useScriptGoogleAdsense, useScriptSegment, useScriptMetaPixel, useScriptXPixel, useScriptIntercom, useScriptHotjar, useScriptStripe, useScriptLemonSqueezy, useScriptVimeoPlayer, useScriptYouTubePlayer, useScriptGoogleMaps, useScriptNpm, useScriptUmamiAnalytics, useScriptSnapchatPixel } from '#app/composables/script-stubs';
|
||||
export { isVue2, isVue3 } from 'vue-demi';
|
||||
export { defineNuxtLink } from '#app/components/nuxt-link';
|
||||
export { useNuxtApp, tryUseNuxtApp, defineNuxtPlugin, definePayloadPlugin, useRuntimeConfig, defineAppConfig } from '#app/nuxt';
|
||||
export { useAppConfig, updateAppConfig } from '#app/config';
|
||||
export { defineNuxtComponent } from '#app/composables/component';
|
||||
export { useAsyncData, useLazyAsyncData, useNuxtData, refreshNuxtData, clearNuxtData } from '#app/composables/asyncData';
|
||||
export { useHydration } from '#app/composables/hydrate';
|
||||
export { callOnce } from '#app/composables/once';
|
||||
export { useState, clearNuxtState } from '#app/composables/state';
|
||||
export { clearError, createError, isNuxtError, showError, useError } from '#app/composables/error';
|
||||
export { useFetch, useLazyFetch } from '#app/composables/fetch';
|
||||
export { useCookie, refreshCookie } from '#app/composables/cookie';
|
||||
export { onPrehydrate, prerenderRoutes, useRequestHeader, useRequestHeaders, useResponseHeader, useRequestEvent, useRequestFetch, setResponseStatus } from '#app/composables/ssr';
|
||||
export { onNuxtReady } from '#app/composables/ready';
|
||||
export { preloadComponents, prefetchComponents, preloadRouteComponents } from '#app/composables/preload';
|
||||
export { abortNavigation, addRouteMiddleware, defineNuxtRouteMiddleware, setPageLayout, navigateTo, useRoute, useRouter } from '#app/composables/router';
|
||||
export { isPrerendered, loadPayload, preloadPayload, definePayloadReducer, definePayloadReviver } from '#app/composables/payload';
|
||||
export { useLoadingIndicator } from '#app/composables/loading-indicator';
|
||||
export { getAppManifest, getRouteRules } from '#app/composables/manifest';
|
||||
export { reloadNuxtApp } from '#app/composables/chunk';
|
||||
export { useRequestURL } from '#app/composables/url';
|
||||
export { usePreviewMode } from '#app/composables/preview';
|
||||
export { useRouteAnnouncer } from '#app/composables/route-announcer';
|
||||
export { useRuntimeHook } from '#app/composables/runtime-hook';
|
||||
export { useHead, useHeadSafe, useServerHeadSafe, useServerHead, useSeoMeta, useServerSeoMeta, injectHead } from '#app/composables/head';
|
||||
export { onBeforeRouteLeave, onBeforeRouteUpdate, useLink } from 'vue-router';
|
||||
export { withCtx, withDirectives, withKeys, withMemo, withModifiers, withScopeId, onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, onErrorCaptured, onMounted, onRenderTracked, onRenderTriggered, onServerPrefetch, onUnmounted, onUpdated, computed, customRef, isProxy, isReactive, isReadonly, isRef, markRaw, proxyRefs, reactive, readonly, ref, shallowReactive, shallowReadonly, shallowRef, toRaw, toRef, toRefs, triggerRef, unref, watch, watchEffect, watchPostEffect, watchSyncEffect, isShallow, effect, effectScope, getCurrentScope, onScopeDispose, defineComponent, defineAsyncComponent, resolveComponent, getCurrentInstance, h, inject, hasInjectionContext, nextTick, provide, mergeModels, toValue, useModel, useAttrs, useCssModule, useCssVars, useSlots, useTransitionState, useId, useTemplateRef, useShadowRoot, Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue';
|
||||
export { requestIdleCallback, cancelIdleCallback } from '#app/compat/idle-callback';
|
||||
export { setInterval } from '#app/compat/interval';
|
||||
export { useStore } from '../stores/index';
|
||||
export { defineStore, acceptHMRUpdate, usePinia, storeToRefs } from '../node_modules/@pinia/nuxt/dist/runtime/composables';
|
||||
export { useImage } from '../node_modules/@nuxt/image/dist/runtime/composables';
|
||||
export { storages as piniaPluginPersistedstate } from '../node_modules/pinia-plugin-persistedstate/dist/nuxt/runtime/storages';
|
||||
export { useNuxtDevTools } from '../node_modules/@nuxt/devtools/dist/runtime/use-nuxt-devtools';
|
||||
export { definePageMeta } from '../node_modules/nuxt/dist/pages/runtime/composables';
|
||||
1
.nuxt/manifest/latest.json
Normal file
1
.nuxt/manifest/latest.json
Normal file
@@ -0,0 +1 @@
|
||||
{"id":"dev","timestamp":1767953360905}
|
||||
1
.nuxt/manifest/meta/dev.json
Normal file
1
.nuxt/manifest/meta/dev.json
Normal file
@@ -0,0 +1 @@
|
||||
{"id":"dev","timestamp":1767953360905,"matcher":{"static":{},"wildcard":{},"dynamic":{}},"prerendered":[]}
|
||||
17
.nuxt/nitro.json
Normal file
17
.nuxt/nitro.json
Normal file
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"date": "2026-01-09T10:09:26.908Z",
|
||||
"preset": "nitro-dev",
|
||||
"framework": {
|
||||
"name": "nuxt",
|
||||
"version": "3.17.3"
|
||||
},
|
||||
"versions": {
|
||||
"nitro": "2.11.12"
|
||||
},
|
||||
"dev": {
|
||||
"pid": 6871,
|
||||
"workerAddress": {
|
||||
"socketPath": "\u0000nitro-worker-6871-1-1-5503.sock"
|
||||
}
|
||||
}
|
||||
}
|
||||
25
.nuxt/nuxt.d.ts
vendored
Normal file
25
.nuxt/nuxt.d.ts
vendored
Normal file
@@ -0,0 +1,25 @@
|
||||
// Generated by nuxi
|
||||
/// <reference types="@pinia/nuxt" />
|
||||
/// <reference types="@nuxt/image" />
|
||||
/// <reference types="@nuxt/telemetry" />
|
||||
/// <reference types="@nuxt/devtools" />
|
||||
/// <reference types="pinia-plugin-persistedstate" />
|
||||
/// <reference path="types/builder-env.d.ts" />
|
||||
/// <reference types="nuxt" />
|
||||
/// <reference path="types/app-defaults.d.ts" />
|
||||
/// <reference path="types/plugins.d.ts" />
|
||||
/// <reference path="types/build.d.ts" />
|
||||
/// <reference path="types/schema.d.ts" />
|
||||
/// <reference path="types/app.config.d.ts" />
|
||||
/// <reference types="@pinia/nuxt" />
|
||||
/// <reference types="vue-router" />
|
||||
/// <reference path="types/middleware.d.ts" />
|
||||
/// <reference path="types/nitro-middleware.d.ts" />
|
||||
/// <reference path="types/layouts.d.ts" />
|
||||
/// <reference path="components.d.ts" />
|
||||
/// <reference path="imports.d.ts" />
|
||||
/// <reference path="types/imports.d.ts" />
|
||||
/// <reference path="schema/nuxt.schema.d.ts" />
|
||||
/// <reference path="types/nitro.d.ts" />
|
||||
|
||||
export {}
|
||||
9
.nuxt/nuxt.json
Normal file
9
.nuxt/nuxt.json
Normal file
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"_hash": "iqGp068BWfiAu_k2dQDM8pZ97MTfxOPxasPvGUynqSY",
|
||||
"project": {
|
||||
"rootDir": "/home/loitx/dev/utopia/system"
|
||||
},
|
||||
"versions": {
|
||||
"nuxt": "3.17.3"
|
||||
}
|
||||
}
|
||||
17
.nuxt/schema/nuxt.schema.d.ts
vendored
Normal file
17
.nuxt/schema/nuxt.schema.d.ts
vendored
Normal file
@@ -0,0 +1,17 @@
|
||||
export interface NuxtCustomSchema {
|
||||
|
||||
}
|
||||
export type CustomAppConfig = Exclude<NuxtCustomSchema['appConfig'], undefined>
|
||||
type _CustomAppConfig = CustomAppConfig
|
||||
|
||||
declare module '@nuxt/schema' {
|
||||
interface NuxtConfig extends Omit<NuxtCustomSchema, 'appConfig'> {}
|
||||
interface NuxtOptions extends Omit<NuxtCustomSchema, 'appConfig'> {}
|
||||
interface CustomAppConfig extends _CustomAppConfig {}
|
||||
}
|
||||
|
||||
declare module 'nuxt/schema' {
|
||||
interface NuxtConfig extends Omit<NuxtCustomSchema, 'appConfig'> {}
|
||||
interface NuxtOptions extends Omit<NuxtCustomSchema, 'appConfig'> {}
|
||||
interface CustomAppConfig extends _CustomAppConfig {}
|
||||
}
|
||||
3
.nuxt/schema/nuxt.schema.json
Normal file
3
.nuxt/schema/nuxt.schema.json
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"id": "#"
|
||||
}
|
||||
192
.nuxt/tsconfig.json
Normal file
192
.nuxt/tsconfig.json
Normal file
@@ -0,0 +1,192 @@
|
||||
// Generated by nuxi
|
||||
{
|
||||
"compilerOptions": {
|
||||
"paths": {
|
||||
"nitropack/types": [
|
||||
"../node_modules/nitropack/types"
|
||||
],
|
||||
"nitropack/runtime": [
|
||||
"../node_modules/nitropack/runtime"
|
||||
],
|
||||
"nitropack": [
|
||||
"../node_modules/nitropack"
|
||||
],
|
||||
"defu": [
|
||||
"../node_modules/defu"
|
||||
],
|
||||
"h3": [
|
||||
"../node_modules/h3"
|
||||
],
|
||||
"consola": [
|
||||
"../node_modules/consola"
|
||||
],
|
||||
"ofetch": [
|
||||
"../node_modules/ofetch"
|
||||
],
|
||||
"@unhead/vue": [
|
||||
"../node_modules/@unhead/vue"
|
||||
],
|
||||
"@nuxt/devtools": [
|
||||
"../node_modules/@nuxt/devtools"
|
||||
],
|
||||
"@vue/runtime-core": [
|
||||
"../node_modules/@vue/runtime-core"
|
||||
],
|
||||
"@vue/compiler-sfc": [
|
||||
"../node_modules/@vue/compiler-sfc"
|
||||
],
|
||||
"unplugin-vue-router/client": [
|
||||
"../node_modules/unplugin-vue-router/client"
|
||||
],
|
||||
"@nuxt/schema": [
|
||||
"../node_modules/@nuxt/schema"
|
||||
],
|
||||
"nuxt": [
|
||||
"../node_modules/nuxt"
|
||||
],
|
||||
"vite/client": [
|
||||
"../node_modules/vite/client"
|
||||
],
|
||||
"~": [
|
||||
".."
|
||||
],
|
||||
"~/*": [
|
||||
"../*"
|
||||
],
|
||||
"@": [
|
||||
".."
|
||||
],
|
||||
"@/*": [
|
||||
"../*"
|
||||
],
|
||||
"~~": [
|
||||
".."
|
||||
],
|
||||
"~~/*": [
|
||||
"../*"
|
||||
],
|
||||
"@@": [
|
||||
".."
|
||||
],
|
||||
"@@/*": [
|
||||
"../*"
|
||||
],
|
||||
"#shared": [
|
||||
"../shared"
|
||||
],
|
||||
"assets": [
|
||||
"../assets"
|
||||
],
|
||||
"assets/*": [
|
||||
"../assets/*"
|
||||
],
|
||||
"public": [
|
||||
"../public"
|
||||
],
|
||||
"public/*": [
|
||||
"../public/*"
|
||||
],
|
||||
"#app": [
|
||||
"../node_modules/nuxt/dist/app"
|
||||
],
|
||||
"#app/*": [
|
||||
"../node_modules/nuxt/dist/app/*"
|
||||
],
|
||||
"vue-demi": [
|
||||
"../node_modules/nuxt/dist/app/compat/vue-demi"
|
||||
],
|
||||
"#image": [
|
||||
"../node_modules/@nuxt/image/dist/runtime"
|
||||
],
|
||||
"#image/*": [
|
||||
"../node_modules/@nuxt/image/dist/runtime/*"
|
||||
],
|
||||
"#vue-router": [
|
||||
"../node_modules/vue-router"
|
||||
],
|
||||
"#unhead/composables": [
|
||||
"../node_modules/nuxt/dist/head/runtime/composables/v3"
|
||||
],
|
||||
"#imports": [
|
||||
"./imports"
|
||||
],
|
||||
"#app-manifest": [
|
||||
"./manifest/meta/dev"
|
||||
],
|
||||
"#components": [
|
||||
"./components"
|
||||
],
|
||||
"#build": [
|
||||
"."
|
||||
],
|
||||
"#build/*": [
|
||||
"./*"
|
||||
]
|
||||
},
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true,
|
||||
"target": "ESNext",
|
||||
"allowJs": true,
|
||||
"resolveJsonModule": true,
|
||||
"moduleDetection": "force",
|
||||
"isolatedModules": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"strict": true,
|
||||
"noUncheckedIndexedAccess": false,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"noImplicitOverride": true,
|
||||
"module": "preserve",
|
||||
"noEmit": true,
|
||||
"lib": [
|
||||
"ESNext",
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"webworker"
|
||||
],
|
||||
"jsx": "preserve",
|
||||
"jsxImportSource": "vue",
|
||||
"types": [],
|
||||
"moduleResolution": "Bundler",
|
||||
"useDefineForClassFields": true,
|
||||
"noImplicitThis": true,
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"include": [
|
||||
"../**/*",
|
||||
"../.config/nuxt.*",
|
||||
"./nuxt.d.ts",
|
||||
"../node_modules/@pinia/nuxt/runtime",
|
||||
"../node_modules/@pinia/nuxt/dist/runtime",
|
||||
"../node_modules/@nuxt/image/runtime",
|
||||
"../node_modules/@nuxt/image/dist/runtime",
|
||||
"../n/runtime",
|
||||
"../n/dist/runtime",
|
||||
"../node_modules/@nuxt/devtools/runtime",
|
||||
"../node_modules/@nuxt/devtools/dist/runtime",
|
||||
"../node_modules/@nuxt/telemetry/runtime",
|
||||
"../node_modules/@nuxt/telemetry/dist/runtime",
|
||||
".."
|
||||
],
|
||||
"exclude": [
|
||||
"../dist",
|
||||
"../.data",
|
||||
"../node_modules",
|
||||
"../node_modules/nuxt/node_modules",
|
||||
"../node_modules/@pinia/nuxt/node_modules",
|
||||
"../node_modules/@nuxt/image/node_modules",
|
||||
"../node_modules/pinia-plugin-persistedstate/node_modules",
|
||||
"../node_modules/@nuxt/devtools/node_modules",
|
||||
"../node_modules/@nuxt/telemetry/node_modules",
|
||||
"../node_modules/@pinia/nuxt/runtime/server",
|
||||
"../node_modules/@pinia/nuxt/dist/runtime/server",
|
||||
"../node_modules/@nuxt/image/runtime/server",
|
||||
"../node_modules/@nuxt/image/dist/runtime/server",
|
||||
"../n/runtime/server",
|
||||
"../n/dist/runtime/server",
|
||||
"../node_modules/@nuxt/devtools/runtime/server",
|
||||
"../node_modules/@nuxt/devtools/dist/runtime/server",
|
||||
"../node_modules/@nuxt/telemetry/runtime/server",
|
||||
"../node_modules/@nuxt/telemetry/dist/runtime/server",
|
||||
"../.output"
|
||||
]
|
||||
}
|
||||
137
.nuxt/tsconfig.server.json
Normal file
137
.nuxt/tsconfig.server.json
Normal file
@@ -0,0 +1,137 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"strict": true,
|
||||
"noEmit": true,
|
||||
"target": "ESNext",
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Bundler",
|
||||
"allowJs": true,
|
||||
"resolveJsonModule": true,
|
||||
"jsx": "preserve",
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"jsxFactory": "h",
|
||||
"jsxFragmentFactory": "Fragment",
|
||||
"paths": {
|
||||
"#imports": [
|
||||
"./types/nitro-imports"
|
||||
],
|
||||
"~/*": [
|
||||
"../*"
|
||||
],
|
||||
"@/*": [
|
||||
"../*"
|
||||
],
|
||||
"~~/*": [
|
||||
"../*"
|
||||
],
|
||||
"@@/*": [
|
||||
"../*"
|
||||
],
|
||||
"nitropack/types": [
|
||||
"../node_modules/nitropack/types"
|
||||
],
|
||||
"nitropack/runtime": [
|
||||
"../node_modules/nitropack/runtime"
|
||||
],
|
||||
"nitropack": [
|
||||
"../node_modules/nitropack"
|
||||
],
|
||||
"defu": [
|
||||
"../node_modules/defu"
|
||||
],
|
||||
"h3": [
|
||||
"../node_modules/h3"
|
||||
],
|
||||
"consola": [
|
||||
"../node_modules/consola"
|
||||
],
|
||||
"ofetch": [
|
||||
"../node_modules/ofetch"
|
||||
],
|
||||
"@unhead/vue": [
|
||||
"../node_modules/@unhead/vue"
|
||||
],
|
||||
"@nuxt/devtools": [
|
||||
"../node_modules/@nuxt/devtools"
|
||||
],
|
||||
"@vue/runtime-core": [
|
||||
"../node_modules/@vue/runtime-core"
|
||||
],
|
||||
"@vue/compiler-sfc": [
|
||||
"../node_modules/@vue/compiler-sfc"
|
||||
],
|
||||
"unplugin-vue-router/client": [
|
||||
"../node_modules/unplugin-vue-router/client"
|
||||
],
|
||||
"@nuxt/schema": [
|
||||
"../node_modules/@nuxt/schema"
|
||||
],
|
||||
"nuxt": [
|
||||
"../node_modules/nuxt"
|
||||
],
|
||||
"vite/client": [
|
||||
"../node_modules/vite/client"
|
||||
],
|
||||
"#shared": [
|
||||
"../shared"
|
||||
],
|
||||
"assets": [
|
||||
"../assets"
|
||||
],
|
||||
"assets/*": [
|
||||
"../assets/*"
|
||||
],
|
||||
"public": [
|
||||
"../public"
|
||||
],
|
||||
"public/*": [
|
||||
"../public/*"
|
||||
],
|
||||
"#build": [
|
||||
"./"
|
||||
],
|
||||
"#build/*": [
|
||||
"./*"
|
||||
],
|
||||
"#internal/nuxt/paths": [
|
||||
"../node_modules/nuxt/dist/core/runtime/nitro/utils/paths"
|
||||
],
|
||||
"#image": [
|
||||
"../node_modules/@nuxt/image/dist/runtime"
|
||||
],
|
||||
"#image/*": [
|
||||
"../node_modules/@nuxt/image/dist/runtime/*"
|
||||
],
|
||||
"#unhead/composables": [
|
||||
"../node_modules/nuxt/dist/head/runtime/composables/v3"
|
||||
]
|
||||
},
|
||||
"lib": [
|
||||
"esnext",
|
||||
"webworker",
|
||||
"dom.iterable"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"./types/nitro-nuxt.d.ts",
|
||||
"../node_modules/@pinia/nuxt/runtime/server",
|
||||
"../node_modules/@nuxt/image/runtime/server",
|
||||
"../n/runtime/server",
|
||||
"../node_modules/@nuxt/devtools/runtime/server",
|
||||
"../node_modules/@nuxt/telemetry/runtime/server",
|
||||
"./types/nitro.d.ts",
|
||||
"../**/*",
|
||||
"../server/**/*"
|
||||
],
|
||||
"exclude": [
|
||||
"../node_modules",
|
||||
"../node_modules/nuxt/node_modules",
|
||||
"../node_modules/@pinia/nuxt/node_modules",
|
||||
"../node_modules/@nuxt/image/node_modules",
|
||||
"../node_modules/pinia-plugin-persistedstate/node_modules",
|
||||
"../node_modules/@nuxt/devtools/node_modules",
|
||||
"../node_modules/@nuxt/telemetry/node_modules",
|
||||
"../dist"
|
||||
]
|
||||
}
|
||||
7
.nuxt/types/app-defaults.d.ts
vendored
Normal file
7
.nuxt/types/app-defaults.d.ts
vendored
Normal file
@@ -0,0 +1,7 @@
|
||||
|
||||
declare module 'nuxt/app/defaults' {
|
||||
type DefaultAsyncDataErrorValue = null
|
||||
type DefaultAsyncDataValue = null
|
||||
type DefaultErrorValue = null
|
||||
type DedupeOption = boolean | 'cancel' | 'defer'
|
||||
}
|
||||
31
.nuxt/types/app.config.d.ts
vendored
Normal file
31
.nuxt/types/app.config.d.ts
vendored
Normal file
@@ -0,0 +1,31 @@
|
||||
|
||||
import type { CustomAppConfig } from 'nuxt/schema'
|
||||
import type { Defu } from 'defu'
|
||||
|
||||
|
||||
declare const inlineConfig = {
|
||||
"nuxt": {}
|
||||
}
|
||||
type ResolvedAppConfig = Defu<typeof inlineConfig, []>
|
||||
type IsAny<T> = 0 extends 1 & T ? true : false
|
||||
|
||||
type MergedAppConfig<Resolved extends Record<string, unknown>, Custom extends Record<string, unknown>> = {
|
||||
[K in keyof (Resolved & Custom)]: K extends keyof Custom
|
||||
? unknown extends Custom[K]
|
||||
? Resolved[K]
|
||||
: IsAny<Custom[K]> extends true
|
||||
? Resolved[K]
|
||||
: Custom[K] extends Record<string, any>
|
||||
? Resolved[K] extends Record<string, any>
|
||||
? MergedAppConfig<Resolved[K], Custom[K]>
|
||||
: Exclude<Custom[K], undefined>
|
||||
: Exclude<Custom[K], undefined>
|
||||
: Resolved[K]
|
||||
}
|
||||
|
||||
declare module 'nuxt/schema' {
|
||||
interface AppConfig extends MergedAppConfig<ResolvedAppConfig, CustomAppConfig> { }
|
||||
}
|
||||
declare module '@nuxt/schema' {
|
||||
interface AppConfig extends MergedAppConfig<ResolvedAppConfig, CustomAppConfig> { }
|
||||
}
|
||||
24
.nuxt/types/build.d.ts
vendored
Normal file
24
.nuxt/types/build.d.ts
vendored
Normal file
@@ -0,0 +1,24 @@
|
||||
declare module "#build/app-component.mjs";
|
||||
declare module "#build/nitro.client.mjs";
|
||||
declare module "#build/plugins.client.mjs";
|
||||
declare module "#build/css.mjs";
|
||||
declare module "#build/fetch.mjs";
|
||||
declare module "#build/error-component.mjs";
|
||||
declare module "#build/layouts.mjs";
|
||||
declare module "#build/middleware.mjs";
|
||||
declare module "#build/nuxt.config.mjs";
|
||||
declare module "#build/paths.mjs";
|
||||
declare module "#build/root-component.mjs";
|
||||
declare module "#build/plugins.server.mjs";
|
||||
declare module "#build/test-component-wrapper.mjs";
|
||||
declare module "#build/image-options.mjs";
|
||||
declare module "#build/devtools/settings.mjs";
|
||||
declare module "#build/runtime.vue-devtools-client.7MLPiAuXoif6XsIY8CZEwf71-YdXciZa7od8VgMYwaY.js";
|
||||
declare module "#build/routes.mjs";
|
||||
declare module "#build/pages.mjs";
|
||||
declare module "#build/router.options.mjs";
|
||||
declare module "#build/unhead-options.mjs";
|
||||
declare module "#build/unhead.config.mjs";
|
||||
declare module "#build/components.plugin.mjs";
|
||||
declare module "#build/component-names.mjs";
|
||||
declare module "#build/components.islands.mjs";
|
||||
1
.nuxt/types/builder-env.d.ts
vendored
Normal file
1
.nuxt/types/builder-env.d.ts
vendored
Normal file
@@ -0,0 +1 @@
|
||||
import "vite/client";
|
||||
368
.nuxt/types/imports.d.ts
vendored
Normal file
368
.nuxt/types/imports.d.ts
vendored
Normal file
@@ -0,0 +1,368 @@
|
||||
// Generated by auto imports
|
||||
export {}
|
||||
declare global {
|
||||
const abortNavigation: typeof import('../../node_modules/nuxt/dist/app/composables/router')['abortNavigation']
|
||||
const acceptHMRUpdate: typeof import('../../node_modules/@pinia/nuxt/dist/runtime/composables')['acceptHMRUpdate']
|
||||
const addRouteMiddleware: typeof import('../../node_modules/nuxt/dist/app/composables/router')['addRouteMiddleware']
|
||||
const callOnce: typeof import('../../node_modules/nuxt/dist/app/composables/once')['callOnce']
|
||||
const cancelIdleCallback: typeof import('../../node_modules/nuxt/dist/app/compat/idle-callback')['cancelIdleCallback']
|
||||
const clearError: typeof import('../../node_modules/nuxt/dist/app/composables/error')['clearError']
|
||||
const clearNuxtData: typeof import('../../node_modules/nuxt/dist/app/composables/asyncData')['clearNuxtData']
|
||||
const clearNuxtState: typeof import('../../node_modules/nuxt/dist/app/composables/state')['clearNuxtState']
|
||||
const computed: typeof import('vue')['computed']
|
||||
const createError: typeof import('../../node_modules/nuxt/dist/app/composables/error')['createError']
|
||||
const customRef: typeof import('vue')['customRef']
|
||||
const defineAppConfig: typeof import('../../node_modules/nuxt/dist/app/nuxt')['defineAppConfig']
|
||||
const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
|
||||
const defineComponent: typeof import('vue')['defineComponent']
|
||||
const defineNuxtComponent: typeof import('../../node_modules/nuxt/dist/app/composables/component')['defineNuxtComponent']
|
||||
const defineNuxtLink: typeof import('../../node_modules/nuxt/dist/app/components/nuxt-link')['defineNuxtLink']
|
||||
const defineNuxtPlugin: typeof import('../../node_modules/nuxt/dist/app/nuxt')['defineNuxtPlugin']
|
||||
const defineNuxtRouteMiddleware: typeof import('../../node_modules/nuxt/dist/app/composables/router')['defineNuxtRouteMiddleware']
|
||||
const definePageMeta: typeof import('../../node_modules/nuxt/dist/pages/runtime/composables')['definePageMeta']
|
||||
const definePayloadPlugin: typeof import('../../node_modules/nuxt/dist/app/nuxt')['definePayloadPlugin']
|
||||
const definePayloadReducer: typeof import('../../node_modules/nuxt/dist/app/composables/payload')['definePayloadReducer']
|
||||
const definePayloadReviver: typeof import('../../node_modules/nuxt/dist/app/composables/payload')['definePayloadReviver']
|
||||
const defineStore: typeof import('../../node_modules/@pinia/nuxt/dist/runtime/composables')['defineStore']
|
||||
const effect: typeof import('vue')['effect']
|
||||
const effectScope: typeof import('vue')['effectScope']
|
||||
const getAppManifest: typeof import('../../node_modules/nuxt/dist/app/composables/manifest')['getAppManifest']
|
||||
const getCurrentInstance: typeof import('vue')['getCurrentInstance']
|
||||
const getCurrentScope: typeof import('vue')['getCurrentScope']
|
||||
const getRouteRules: typeof import('../../node_modules/nuxt/dist/app/composables/manifest')['getRouteRules']
|
||||
const h: typeof import('vue')['h']
|
||||
const hasInjectionContext: typeof import('vue')['hasInjectionContext']
|
||||
const inject: typeof import('vue')['inject']
|
||||
const injectHead: typeof import('../../node_modules/nuxt/dist/app/composables/head')['injectHead']
|
||||
const isNuxtError: typeof import('../../node_modules/nuxt/dist/app/composables/error')['isNuxtError']
|
||||
const isPrerendered: typeof import('../../node_modules/nuxt/dist/app/composables/payload')['isPrerendered']
|
||||
const isProxy: typeof import('vue')['isProxy']
|
||||
const isReactive: typeof import('vue')['isReactive']
|
||||
const isReadonly: typeof import('vue')['isReadonly']
|
||||
const isRef: typeof import('vue')['isRef']
|
||||
const isShallow: typeof import('vue')['isShallow']
|
||||
const isVue2: typeof import('../../node_modules/nuxt/dist/app/compat/vue-demi')['isVue2']
|
||||
const isVue3: typeof import('../../node_modules/nuxt/dist/app/compat/vue-demi')['isVue3']
|
||||
const loadPayload: typeof import('../../node_modules/nuxt/dist/app/composables/payload')['loadPayload']
|
||||
const markRaw: typeof import('vue')['markRaw']
|
||||
const mergeModels: typeof import('vue')['mergeModels']
|
||||
const navigateTo: typeof import('../../node_modules/nuxt/dist/app/composables/router')['navigateTo']
|
||||
const nextTick: typeof import('vue')['nextTick']
|
||||
const onActivated: typeof import('vue')['onActivated']
|
||||
const onBeforeMount: typeof import('vue')['onBeforeMount']
|
||||
const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
|
||||
const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
|
||||
const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
|
||||
const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
|
||||
const onDeactivated: typeof import('vue')['onDeactivated']
|
||||
const onErrorCaptured: typeof import('vue')['onErrorCaptured']
|
||||
const onMounted: typeof import('vue')['onMounted']
|
||||
const onNuxtReady: typeof import('../../node_modules/nuxt/dist/app/composables/ready')['onNuxtReady']
|
||||
const onPrehydrate: typeof import('../../node_modules/nuxt/dist/app/composables/ssr')['onPrehydrate']
|
||||
const onRenderTracked: typeof import('vue')['onRenderTracked']
|
||||
const onRenderTriggered: typeof import('vue')['onRenderTriggered']
|
||||
const onScopeDispose: typeof import('vue')['onScopeDispose']
|
||||
const onServerPrefetch: typeof import('vue')['onServerPrefetch']
|
||||
const onUnmounted: typeof import('vue')['onUnmounted']
|
||||
const onUpdated: typeof import('vue')['onUpdated']
|
||||
const piniaPluginPersistedstate: typeof import('../../node_modules/pinia-plugin-persistedstate/dist/nuxt/runtime/storages')['storages']
|
||||
const prefetchComponents: typeof import('../../node_modules/nuxt/dist/app/composables/preload')['prefetchComponents']
|
||||
const preloadComponents: typeof import('../../node_modules/nuxt/dist/app/composables/preload')['preloadComponents']
|
||||
const preloadPayload: typeof import('../../node_modules/nuxt/dist/app/composables/payload')['preloadPayload']
|
||||
const preloadRouteComponents: typeof import('../../node_modules/nuxt/dist/app/composables/preload')['preloadRouteComponents']
|
||||
const prerenderRoutes: typeof import('../../node_modules/nuxt/dist/app/composables/ssr')['prerenderRoutes']
|
||||
const provide: typeof import('vue')['provide']
|
||||
const proxyRefs: typeof import('vue')['proxyRefs']
|
||||
const reactive: typeof import('vue')['reactive']
|
||||
const readonly: typeof import('vue')['readonly']
|
||||
const ref: typeof import('vue')['ref']
|
||||
const refreshCookie: typeof import('../../node_modules/nuxt/dist/app/composables/cookie')['refreshCookie']
|
||||
const refreshNuxtData: typeof import('../../node_modules/nuxt/dist/app/composables/asyncData')['refreshNuxtData']
|
||||
const reloadNuxtApp: typeof import('../../node_modules/nuxt/dist/app/composables/chunk')['reloadNuxtApp']
|
||||
const requestIdleCallback: typeof import('../../node_modules/nuxt/dist/app/compat/idle-callback')['requestIdleCallback']
|
||||
const resolveComponent: typeof import('vue')['resolveComponent']
|
||||
const setInterval: typeof import('../../node_modules/nuxt/dist/app/compat/interval')['setInterval']
|
||||
const setPageLayout: typeof import('../../node_modules/nuxt/dist/app/composables/router')['setPageLayout']
|
||||
const setResponseStatus: typeof import('../../node_modules/nuxt/dist/app/composables/ssr')['setResponseStatus']
|
||||
const shallowReactive: typeof import('vue')['shallowReactive']
|
||||
const shallowReadonly: typeof import('vue')['shallowReadonly']
|
||||
const shallowRef: typeof import('vue')['shallowRef']
|
||||
const showError: typeof import('../../node_modules/nuxt/dist/app/composables/error')['showError']
|
||||
const storeToRefs: typeof import('../../node_modules/@pinia/nuxt/dist/runtime/composables')['storeToRefs']
|
||||
const toRaw: typeof import('vue')['toRaw']
|
||||
const toRef: typeof import('vue')['toRef']
|
||||
const toRefs: typeof import('vue')['toRefs']
|
||||
const toValue: typeof import('vue')['toValue']
|
||||
const triggerRef: typeof import('vue')['triggerRef']
|
||||
const tryUseNuxtApp: typeof import('../../node_modules/nuxt/dist/app/nuxt')['tryUseNuxtApp']
|
||||
const unref: typeof import('vue')['unref']
|
||||
const updateAppConfig: typeof import('../../node_modules/nuxt/dist/app/config')['updateAppConfig']
|
||||
const useAppConfig: typeof import('../../node_modules/nuxt/dist/app/config')['useAppConfig']
|
||||
const useAsyncData: typeof import('../../node_modules/nuxt/dist/app/composables/asyncData')['useAsyncData']
|
||||
const useAttrs: typeof import('vue')['useAttrs']
|
||||
const useCookie: typeof import('../../node_modules/nuxt/dist/app/composables/cookie')['useCookie']
|
||||
const useCssModule: typeof import('vue')['useCssModule']
|
||||
const useCssVars: typeof import('vue')['useCssVars']
|
||||
const useError: typeof import('../../node_modules/nuxt/dist/app/composables/error')['useError']
|
||||
const useFetch: typeof import('../../node_modules/nuxt/dist/app/composables/fetch')['useFetch']
|
||||
const useHead: typeof import('../../node_modules/nuxt/dist/app/composables/head')['useHead']
|
||||
const useHeadSafe: typeof import('../../node_modules/nuxt/dist/app/composables/head')['useHeadSafe']
|
||||
const useHydration: typeof import('../../node_modules/nuxt/dist/app/composables/hydrate')['useHydration']
|
||||
const useId: typeof import('vue')['useId']
|
||||
const useImage: typeof import('../../node_modules/@nuxt/image/dist/runtime/composables')['useImage']
|
||||
const useLazyAsyncData: typeof import('../../node_modules/nuxt/dist/app/composables/asyncData')['useLazyAsyncData']
|
||||
const useLazyFetch: typeof import('../../node_modules/nuxt/dist/app/composables/fetch')['useLazyFetch']
|
||||
const useLink: typeof import('vue-router')['useLink']
|
||||
const useLoadingIndicator: typeof import('../../node_modules/nuxt/dist/app/composables/loading-indicator')['useLoadingIndicator']
|
||||
const useModel: typeof import('vue')['useModel']
|
||||
const useNuxtApp: typeof import('../../node_modules/nuxt/dist/app/nuxt')['useNuxtApp']
|
||||
const useNuxtData: typeof import('../../node_modules/nuxt/dist/app/composables/asyncData')['useNuxtData']
|
||||
const useNuxtDevTools: typeof import('../../node_modules/@nuxt/devtools/dist/runtime/use-nuxt-devtools')['useNuxtDevTools']
|
||||
const usePinia: typeof import('../../node_modules/@pinia/nuxt/dist/runtime/composables')['usePinia']
|
||||
const usePreviewMode: typeof import('../../node_modules/nuxt/dist/app/composables/preview')['usePreviewMode']
|
||||
const useRequestEvent: typeof import('../../node_modules/nuxt/dist/app/composables/ssr')['useRequestEvent']
|
||||
const useRequestFetch: typeof import('../../node_modules/nuxt/dist/app/composables/ssr')['useRequestFetch']
|
||||
const useRequestHeader: typeof import('../../node_modules/nuxt/dist/app/composables/ssr')['useRequestHeader']
|
||||
const useRequestHeaders: typeof import('../../node_modules/nuxt/dist/app/composables/ssr')['useRequestHeaders']
|
||||
const useRequestURL: typeof import('../../node_modules/nuxt/dist/app/composables/url')['useRequestURL']
|
||||
const useResponseHeader: typeof import('../../node_modules/nuxt/dist/app/composables/ssr')['useResponseHeader']
|
||||
const useRoute: typeof import('../../node_modules/nuxt/dist/app/composables/router')['useRoute']
|
||||
const useRouteAnnouncer: typeof import('../../node_modules/nuxt/dist/app/composables/route-announcer')['useRouteAnnouncer']
|
||||
const useRouter: typeof import('../../node_modules/nuxt/dist/app/composables/router')['useRouter']
|
||||
const useRuntimeConfig: typeof import('../../node_modules/nuxt/dist/app/nuxt')['useRuntimeConfig']
|
||||
const useRuntimeHook: typeof import('../../node_modules/nuxt/dist/app/composables/runtime-hook')['useRuntimeHook']
|
||||
const useScript: typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScript']
|
||||
const useScriptClarity: typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptClarity']
|
||||
const useScriptCloudflareWebAnalytics: typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptCloudflareWebAnalytics']
|
||||
const useScriptCrisp: typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptCrisp']
|
||||
const useScriptEventPage: typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptEventPage']
|
||||
const useScriptFathomAnalytics: typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptFathomAnalytics']
|
||||
const useScriptGoogleAdsense: typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptGoogleAdsense']
|
||||
const useScriptGoogleAnalytics: typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptGoogleAnalytics']
|
||||
const useScriptGoogleMaps: typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptGoogleMaps']
|
||||
const useScriptGoogleTagManager: typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptGoogleTagManager']
|
||||
const useScriptHotjar: typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptHotjar']
|
||||
const useScriptIntercom: typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptIntercom']
|
||||
const useScriptLemonSqueezy: typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptLemonSqueezy']
|
||||
const useScriptMatomoAnalytics: typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptMatomoAnalytics']
|
||||
const useScriptMetaPixel: typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptMetaPixel']
|
||||
const useScriptNpm: typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptNpm']
|
||||
const useScriptPlausibleAnalytics: typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptPlausibleAnalytics']
|
||||
const useScriptSegment: typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptSegment']
|
||||
const useScriptSnapchatPixel: typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptSnapchatPixel']
|
||||
const useScriptStripe: typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptStripe']
|
||||
const useScriptTriggerConsent: typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptTriggerConsent']
|
||||
const useScriptTriggerElement: typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptTriggerElement']
|
||||
const useScriptUmamiAnalytics: typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptUmamiAnalytics']
|
||||
const useScriptVimeoPlayer: typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptVimeoPlayer']
|
||||
const useScriptXPixel: typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptXPixel']
|
||||
const useScriptYouTubePlayer: typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptYouTubePlayer']
|
||||
const useSeoMeta: typeof import('../../node_modules/nuxt/dist/app/composables/head')['useSeoMeta']
|
||||
const useServerHead: typeof import('../../node_modules/nuxt/dist/app/composables/head')['useServerHead']
|
||||
const useServerHeadSafe: typeof import('../../node_modules/nuxt/dist/app/composables/head')['useServerHeadSafe']
|
||||
const useServerSeoMeta: typeof import('../../node_modules/nuxt/dist/app/composables/head')['useServerSeoMeta']
|
||||
const useShadowRoot: typeof import('vue')['useShadowRoot']
|
||||
const useSlots: typeof import('vue')['useSlots']
|
||||
const useState: typeof import('../../node_modules/nuxt/dist/app/composables/state')['useState']
|
||||
const useStore: typeof import('../../stores/index')['useStore']
|
||||
const useTemplateRef: typeof import('vue')['useTemplateRef']
|
||||
const useTransitionState: typeof import('vue')['useTransitionState']
|
||||
const watch: typeof import('vue')['watch']
|
||||
const watchEffect: typeof import('vue')['watchEffect']
|
||||
const watchPostEffect: typeof import('vue')['watchPostEffect']
|
||||
const watchSyncEffect: typeof import('vue')['watchSyncEffect']
|
||||
const withCtx: typeof import('vue')['withCtx']
|
||||
const withDirectives: typeof import('vue')['withDirectives']
|
||||
const withKeys: typeof import('vue')['withKeys']
|
||||
const withMemo: typeof import('vue')['withMemo']
|
||||
const withModifiers: typeof import('vue')['withModifiers']
|
||||
const withScopeId: typeof import('vue')['withScopeId']
|
||||
}
|
||||
// for type re-export
|
||||
declare global {
|
||||
// @ts-ignore
|
||||
export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
|
||||
import('vue')
|
||||
}
|
||||
// for vue template auto import
|
||||
import { UnwrapRef } from 'vue'
|
||||
declare module 'vue' {
|
||||
interface ComponentCustomProperties {
|
||||
readonly abortNavigation: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/router')['abortNavigation']>
|
||||
readonly acceptHMRUpdate: UnwrapRef<typeof import('../../node_modules/@pinia/nuxt/dist/runtime/composables')['acceptHMRUpdate']>
|
||||
readonly addRouteMiddleware: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/router')['addRouteMiddleware']>
|
||||
readonly callOnce: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/once')['callOnce']>
|
||||
readonly cancelIdleCallback: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/compat/idle-callback')['cancelIdleCallback']>
|
||||
readonly clearError: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/error')['clearError']>
|
||||
readonly clearNuxtData: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/asyncData')['clearNuxtData']>
|
||||
readonly clearNuxtState: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/state')['clearNuxtState']>
|
||||
readonly computed: UnwrapRef<typeof import('vue')['computed']>
|
||||
readonly createError: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/error')['createError']>
|
||||
readonly customRef: UnwrapRef<typeof import('vue')['customRef']>
|
||||
readonly defineAppConfig: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/nuxt')['defineAppConfig']>
|
||||
readonly defineAsyncComponent: UnwrapRef<typeof import('vue')['defineAsyncComponent']>
|
||||
readonly defineComponent: UnwrapRef<typeof import('vue')['defineComponent']>
|
||||
readonly defineNuxtComponent: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/component')['defineNuxtComponent']>
|
||||
readonly defineNuxtLink: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/components/nuxt-link')['defineNuxtLink']>
|
||||
readonly defineNuxtPlugin: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/nuxt')['defineNuxtPlugin']>
|
||||
readonly defineNuxtRouteMiddleware: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/router')['defineNuxtRouteMiddleware']>
|
||||
readonly definePageMeta: UnwrapRef<typeof import('../../node_modules/nuxt/dist/pages/runtime/composables')['definePageMeta']>
|
||||
readonly definePayloadPlugin: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/nuxt')['definePayloadPlugin']>
|
||||
readonly definePayloadReducer: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/payload')['definePayloadReducer']>
|
||||
readonly definePayloadReviver: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/payload')['definePayloadReviver']>
|
||||
readonly defineStore: UnwrapRef<typeof import('../../node_modules/@pinia/nuxt/dist/runtime/composables')['defineStore']>
|
||||
readonly effect: UnwrapRef<typeof import('vue')['effect']>
|
||||
readonly effectScope: UnwrapRef<typeof import('vue')['effectScope']>
|
||||
readonly getAppManifest: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/manifest')['getAppManifest']>
|
||||
readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
|
||||
readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
|
||||
readonly getRouteRules: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/manifest')['getRouteRules']>
|
||||
readonly h: UnwrapRef<typeof import('vue')['h']>
|
||||
readonly hasInjectionContext: UnwrapRef<typeof import('vue')['hasInjectionContext']>
|
||||
readonly inject: UnwrapRef<typeof import('vue')['inject']>
|
||||
readonly injectHead: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/head')['injectHead']>
|
||||
readonly isNuxtError: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/error')['isNuxtError']>
|
||||
readonly isPrerendered: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/payload')['isPrerendered']>
|
||||
readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>
|
||||
readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
|
||||
readonly isReadonly: UnwrapRef<typeof import('vue')['isReadonly']>
|
||||
readonly isRef: UnwrapRef<typeof import('vue')['isRef']>
|
||||
readonly isShallow: UnwrapRef<typeof import('vue')['isShallow']>
|
||||
readonly isVue2: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/compat/vue-demi')['isVue2']>
|
||||
readonly isVue3: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/compat/vue-demi')['isVue3']>
|
||||
readonly loadPayload: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/payload')['loadPayload']>
|
||||
readonly markRaw: UnwrapRef<typeof import('vue')['markRaw']>
|
||||
readonly mergeModels: UnwrapRef<typeof import('vue')['mergeModels']>
|
||||
readonly navigateTo: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/router')['navigateTo']>
|
||||
readonly nextTick: UnwrapRef<typeof import('vue')['nextTick']>
|
||||
readonly onActivated: UnwrapRef<typeof import('vue')['onActivated']>
|
||||
readonly onBeforeMount: UnwrapRef<typeof import('vue')['onBeforeMount']>
|
||||
readonly onBeforeRouteLeave: UnwrapRef<typeof import('vue-router')['onBeforeRouteLeave']>
|
||||
readonly onBeforeRouteUpdate: UnwrapRef<typeof import('vue-router')['onBeforeRouteUpdate']>
|
||||
readonly onBeforeUnmount: UnwrapRef<typeof import('vue')['onBeforeUnmount']>
|
||||
readonly onBeforeUpdate: UnwrapRef<typeof import('vue')['onBeforeUpdate']>
|
||||
readonly onDeactivated: UnwrapRef<typeof import('vue')['onDeactivated']>
|
||||
readonly onErrorCaptured: UnwrapRef<typeof import('vue')['onErrorCaptured']>
|
||||
readonly onMounted: UnwrapRef<typeof import('vue')['onMounted']>
|
||||
readonly onNuxtReady: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/ready')['onNuxtReady']>
|
||||
readonly onPrehydrate: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/ssr')['onPrehydrate']>
|
||||
readonly onRenderTracked: UnwrapRef<typeof import('vue')['onRenderTracked']>
|
||||
readonly onRenderTriggered: UnwrapRef<typeof import('vue')['onRenderTriggered']>
|
||||
readonly onScopeDispose: UnwrapRef<typeof import('vue')['onScopeDispose']>
|
||||
readonly onServerPrefetch: UnwrapRef<typeof import('vue')['onServerPrefetch']>
|
||||
readonly onUnmounted: UnwrapRef<typeof import('vue')['onUnmounted']>
|
||||
readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']>
|
||||
readonly piniaPluginPersistedstate: UnwrapRef<typeof import('../../node_modules/pinia-plugin-persistedstate/dist/nuxt/runtime/storages')['storages']>
|
||||
readonly prefetchComponents: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/preload')['prefetchComponents']>
|
||||
readonly preloadComponents: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/preload')['preloadComponents']>
|
||||
readonly preloadPayload: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/payload')['preloadPayload']>
|
||||
readonly preloadRouteComponents: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/preload')['preloadRouteComponents']>
|
||||
readonly prerenderRoutes: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/ssr')['prerenderRoutes']>
|
||||
readonly provide: UnwrapRef<typeof import('vue')['provide']>
|
||||
readonly proxyRefs: UnwrapRef<typeof import('vue')['proxyRefs']>
|
||||
readonly reactive: UnwrapRef<typeof import('vue')['reactive']>
|
||||
readonly readonly: UnwrapRef<typeof import('vue')['readonly']>
|
||||
readonly ref: UnwrapRef<typeof import('vue')['ref']>
|
||||
readonly refreshCookie: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/cookie')['refreshCookie']>
|
||||
readonly refreshNuxtData: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/asyncData')['refreshNuxtData']>
|
||||
readonly reloadNuxtApp: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/chunk')['reloadNuxtApp']>
|
||||
readonly requestIdleCallback: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/compat/idle-callback')['requestIdleCallback']>
|
||||
readonly resolveComponent: UnwrapRef<typeof import('vue')['resolveComponent']>
|
||||
readonly setInterval: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/compat/interval')['setInterval']>
|
||||
readonly setPageLayout: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/router')['setPageLayout']>
|
||||
readonly setResponseStatus: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/ssr')['setResponseStatus']>
|
||||
readonly shallowReactive: UnwrapRef<typeof import('vue')['shallowReactive']>
|
||||
readonly shallowReadonly: UnwrapRef<typeof import('vue')['shallowReadonly']>
|
||||
readonly shallowRef: UnwrapRef<typeof import('vue')['shallowRef']>
|
||||
readonly showError: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/error')['showError']>
|
||||
readonly storeToRefs: UnwrapRef<typeof import('../../node_modules/@pinia/nuxt/dist/runtime/composables')['storeToRefs']>
|
||||
readonly toRaw: UnwrapRef<typeof import('vue')['toRaw']>
|
||||
readonly toRef: UnwrapRef<typeof import('vue')['toRef']>
|
||||
readonly toRefs: UnwrapRef<typeof import('vue')['toRefs']>
|
||||
readonly toValue: UnwrapRef<typeof import('vue')['toValue']>
|
||||
readonly triggerRef: UnwrapRef<typeof import('vue')['triggerRef']>
|
||||
readonly tryUseNuxtApp: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/nuxt')['tryUseNuxtApp']>
|
||||
readonly unref: UnwrapRef<typeof import('vue')['unref']>
|
||||
readonly updateAppConfig: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/config')['updateAppConfig']>
|
||||
readonly useAppConfig: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/config')['useAppConfig']>
|
||||
readonly useAsyncData: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/asyncData')['useAsyncData']>
|
||||
readonly useAttrs: UnwrapRef<typeof import('vue')['useAttrs']>
|
||||
readonly useCookie: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/cookie')['useCookie']>
|
||||
readonly useCssModule: UnwrapRef<typeof import('vue')['useCssModule']>
|
||||
readonly useCssVars: UnwrapRef<typeof import('vue')['useCssVars']>
|
||||
readonly useError: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/error')['useError']>
|
||||
readonly useFetch: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/fetch')['useFetch']>
|
||||
readonly useHead: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/head')['useHead']>
|
||||
readonly useHeadSafe: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/head')['useHeadSafe']>
|
||||
readonly useHydration: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/hydrate')['useHydration']>
|
||||
readonly useId: UnwrapRef<typeof import('vue')['useId']>
|
||||
readonly useImage: UnwrapRef<typeof import('../../node_modules/@nuxt/image/dist/runtime/composables')['useImage']>
|
||||
readonly useLazyAsyncData: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/asyncData')['useLazyAsyncData']>
|
||||
readonly useLazyFetch: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/fetch')['useLazyFetch']>
|
||||
readonly useLink: UnwrapRef<typeof import('vue-router')['useLink']>
|
||||
readonly useLoadingIndicator: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/loading-indicator')['useLoadingIndicator']>
|
||||
readonly useModel: UnwrapRef<typeof import('vue')['useModel']>
|
||||
readonly useNuxtApp: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/nuxt')['useNuxtApp']>
|
||||
readonly useNuxtData: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/asyncData')['useNuxtData']>
|
||||
readonly useNuxtDevTools: UnwrapRef<typeof import('../../node_modules/@nuxt/devtools/dist/runtime/use-nuxt-devtools')['useNuxtDevTools']>
|
||||
readonly usePinia: UnwrapRef<typeof import('../../node_modules/@pinia/nuxt/dist/runtime/composables')['usePinia']>
|
||||
readonly usePreviewMode: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/preview')['usePreviewMode']>
|
||||
readonly useRequestEvent: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/ssr')['useRequestEvent']>
|
||||
readonly useRequestFetch: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/ssr')['useRequestFetch']>
|
||||
readonly useRequestHeader: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/ssr')['useRequestHeader']>
|
||||
readonly useRequestHeaders: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/ssr')['useRequestHeaders']>
|
||||
readonly useRequestURL: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/url')['useRequestURL']>
|
||||
readonly useResponseHeader: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/ssr')['useResponseHeader']>
|
||||
readonly useRoute: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/router')['useRoute']>
|
||||
readonly useRouteAnnouncer: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/route-announcer')['useRouteAnnouncer']>
|
||||
readonly useRouter: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/router')['useRouter']>
|
||||
readonly useRuntimeConfig: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/nuxt')['useRuntimeConfig']>
|
||||
readonly useRuntimeHook: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/runtime-hook')['useRuntimeHook']>
|
||||
readonly useScript: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScript']>
|
||||
readonly useScriptClarity: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptClarity']>
|
||||
readonly useScriptCloudflareWebAnalytics: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptCloudflareWebAnalytics']>
|
||||
readonly useScriptCrisp: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptCrisp']>
|
||||
readonly useScriptEventPage: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptEventPage']>
|
||||
readonly useScriptFathomAnalytics: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptFathomAnalytics']>
|
||||
readonly useScriptGoogleAdsense: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptGoogleAdsense']>
|
||||
readonly useScriptGoogleAnalytics: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptGoogleAnalytics']>
|
||||
readonly useScriptGoogleMaps: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptGoogleMaps']>
|
||||
readonly useScriptGoogleTagManager: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptGoogleTagManager']>
|
||||
readonly useScriptHotjar: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptHotjar']>
|
||||
readonly useScriptIntercom: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptIntercom']>
|
||||
readonly useScriptLemonSqueezy: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptLemonSqueezy']>
|
||||
readonly useScriptMatomoAnalytics: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptMatomoAnalytics']>
|
||||
readonly useScriptMetaPixel: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptMetaPixel']>
|
||||
readonly useScriptNpm: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptNpm']>
|
||||
readonly useScriptPlausibleAnalytics: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptPlausibleAnalytics']>
|
||||
readonly useScriptSegment: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptSegment']>
|
||||
readonly useScriptSnapchatPixel: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptSnapchatPixel']>
|
||||
readonly useScriptStripe: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptStripe']>
|
||||
readonly useScriptTriggerConsent: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptTriggerConsent']>
|
||||
readonly useScriptTriggerElement: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptTriggerElement']>
|
||||
readonly useScriptUmamiAnalytics: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptUmamiAnalytics']>
|
||||
readonly useScriptVimeoPlayer: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptVimeoPlayer']>
|
||||
readonly useScriptXPixel: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptXPixel']>
|
||||
readonly useScriptYouTubePlayer: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/script-stubs')['useScriptYouTubePlayer']>
|
||||
readonly useSeoMeta: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/head')['useSeoMeta']>
|
||||
readonly useServerHead: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/head')['useServerHead']>
|
||||
readonly useServerHeadSafe: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/head')['useServerHeadSafe']>
|
||||
readonly useServerSeoMeta: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/head')['useServerSeoMeta']>
|
||||
readonly useShadowRoot: UnwrapRef<typeof import('vue')['useShadowRoot']>
|
||||
readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>
|
||||
readonly useState: UnwrapRef<typeof import('../../node_modules/nuxt/dist/app/composables/state')['useState']>
|
||||
readonly useStore: UnwrapRef<typeof import('../../stores/index')['useStore']>
|
||||
readonly useTemplateRef: UnwrapRef<typeof import('vue')['useTemplateRef']>
|
||||
readonly useTransitionState: UnwrapRef<typeof import('vue')['useTransitionState']>
|
||||
readonly watch: UnwrapRef<typeof import('vue')['watch']>
|
||||
readonly watchEffect: UnwrapRef<typeof import('vue')['watchEffect']>
|
||||
readonly watchPostEffect: UnwrapRef<typeof import('vue')['watchPostEffect']>
|
||||
readonly watchSyncEffect: UnwrapRef<typeof import('vue')['watchSyncEffect']>
|
||||
readonly withCtx: UnwrapRef<typeof import('vue')['withCtx']>
|
||||
readonly withDirectives: UnwrapRef<typeof import('vue')['withDirectives']>
|
||||
readonly withKeys: UnwrapRef<typeof import('vue')['withKeys']>
|
||||
readonly withMemo: UnwrapRef<typeof import('vue')['withMemo']>
|
||||
readonly withModifiers: UnwrapRef<typeof import('vue')['withModifiers']>
|
||||
readonly withScopeId: UnwrapRef<typeof import('vue')['withScopeId']>
|
||||
}
|
||||
}
|
||||
7
.nuxt/types/layouts.d.ts
vendored
Normal file
7
.nuxt/types/layouts.d.ts
vendored
Normal file
@@ -0,0 +1,7 @@
|
||||
import type { ComputedRef, MaybeRef } from 'vue'
|
||||
export type LayoutKey = "default"
|
||||
declare module 'nuxt/app' {
|
||||
interface PageMeta {
|
||||
layout?: MaybeRef<LayoutKey | false> | ComputedRef<LayoutKey | false>
|
||||
}
|
||||
}
|
||||
7
.nuxt/types/middleware.d.ts
vendored
Normal file
7
.nuxt/types/middleware.d.ts
vendored
Normal file
@@ -0,0 +1,7 @@
|
||||
import type { NavigationGuard } from 'vue-router'
|
||||
export type MiddlewareKey = never
|
||||
declare module 'nuxt/app' {
|
||||
interface PageMeta {
|
||||
middleware?: MiddlewareKey | NavigationGuard | Array<MiddlewareKey | NavigationGuard>
|
||||
}
|
||||
}
|
||||
14
.nuxt/types/nitro-config.d.ts
vendored
Normal file
14
.nuxt/types/nitro-config.d.ts
vendored
Normal file
@@ -0,0 +1,14 @@
|
||||
// Generated by nitro
|
||||
|
||||
// App Config
|
||||
import type { Defu } from 'defu'
|
||||
|
||||
|
||||
|
||||
type UserAppConfig = Defu<{}, []>
|
||||
|
||||
declare module "nitropack/types" {
|
||||
interface AppConfig extends UserAppConfig {}
|
||||
|
||||
}
|
||||
export {}
|
||||
141
.nuxt/types/nitro-imports.d.ts
vendored
Normal file
141
.nuxt/types/nitro-imports.d.ts
vendored
Normal file
@@ -0,0 +1,141 @@
|
||||
declare global {
|
||||
const __buildAssetsURL: typeof import('../../node_modules/nuxt/dist/core/runtime/nitro/utils/paths')['buildAssetsURL']
|
||||
const __publicAssetsURL: typeof import('../../node_modules/nuxt/dist/core/runtime/nitro/utils/paths')['publicAssetsURL']
|
||||
const appendCorsHeaders: typeof import('../../node_modules/h3')['appendCorsHeaders']
|
||||
const appendCorsPreflightHeaders: typeof import('../../node_modules/h3')['appendCorsPreflightHeaders']
|
||||
const appendHeader: typeof import('../../node_modules/h3')['appendHeader']
|
||||
const appendHeaders: typeof import('../../node_modules/h3')['appendHeaders']
|
||||
const appendResponseHeader: typeof import('../../node_modules/h3')['appendResponseHeader']
|
||||
const appendResponseHeaders: typeof import('../../node_modules/h3')['appendResponseHeaders']
|
||||
const assertMethod: typeof import('../../node_modules/h3')['assertMethod']
|
||||
const cachedEventHandler: typeof import('../../node_modules/nitropack/dist/runtime/internal/cache')['cachedEventHandler']
|
||||
const cachedFunction: typeof import('../../node_modules/nitropack/dist/runtime/internal/cache')['cachedFunction']
|
||||
const callNodeListener: typeof import('../../node_modules/h3')['callNodeListener']
|
||||
const clearResponseHeaders: typeof import('../../node_modules/h3')['clearResponseHeaders']
|
||||
const clearSession: typeof import('../../node_modules/h3')['clearSession']
|
||||
const createApp: typeof import('../../node_modules/h3')['createApp']
|
||||
const createAppEventHandler: typeof import('../../node_modules/h3')['createAppEventHandler']
|
||||
const createError: typeof import('../../node_modules/h3')['createError']
|
||||
const createEvent: typeof import('../../node_modules/h3')['createEvent']
|
||||
const createEventStream: typeof import('../../node_modules/h3')['createEventStream']
|
||||
const createRouter: typeof import('../../node_modules/h3')['createRouter']
|
||||
const defaultContentType: typeof import('../../node_modules/h3')['defaultContentType']
|
||||
const defineAppConfig: typeof import('../../node_modules/nuxt/dist/core/runtime/nitro/utils/config')['defineAppConfig']
|
||||
const defineCachedEventHandler: typeof import('../../node_modules/nitropack/dist/runtime/internal/cache')['defineCachedEventHandler']
|
||||
const defineCachedFunction: typeof import('../../node_modules/nitropack/dist/runtime/internal/cache')['defineCachedFunction']
|
||||
const defineEventHandler: typeof import('../../node_modules/h3')['defineEventHandler']
|
||||
const defineLazyEventHandler: typeof import('../../node_modules/h3')['defineLazyEventHandler']
|
||||
const defineNitroErrorHandler: typeof import('../../node_modules/nitropack/dist/runtime/internal/error/utils')['defineNitroErrorHandler']
|
||||
const defineNitroPlugin: typeof import('../../node_modules/nitropack/dist/runtime/internal/plugin')['defineNitroPlugin']
|
||||
const defineNodeListener: typeof import('../../node_modules/h3')['defineNodeListener']
|
||||
const defineNodeMiddleware: typeof import('../../node_modules/h3')['defineNodeMiddleware']
|
||||
const defineRenderHandler: typeof import('../../node_modules/nitropack/dist/runtime/internal/renderer')['defineRenderHandler']
|
||||
const defineRequestMiddleware: typeof import('../../node_modules/h3')['defineRequestMiddleware']
|
||||
const defineResponseMiddleware: typeof import('../../node_modules/h3')['defineResponseMiddleware']
|
||||
const defineRouteMeta: typeof import('../../node_modules/nitropack/dist/runtime/internal/meta')['defineRouteMeta']
|
||||
const defineTask: typeof import('../../node_modules/nitropack/dist/runtime/internal/task')['defineTask']
|
||||
const defineWebSocket: typeof import('../../node_modules/h3')['defineWebSocket']
|
||||
const defineWebSocketHandler: typeof import('../../node_modules/h3')['defineWebSocketHandler']
|
||||
const deleteCookie: typeof import('../../node_modules/h3')['deleteCookie']
|
||||
const dynamicEventHandler: typeof import('../../node_modules/h3')['dynamicEventHandler']
|
||||
const eventHandler: typeof import('../../node_modules/h3')['eventHandler']
|
||||
const fetchWithEvent: typeof import('../../node_modules/h3')['fetchWithEvent']
|
||||
const fromNodeMiddleware: typeof import('../../node_modules/h3')['fromNodeMiddleware']
|
||||
const fromPlainHandler: typeof import('../../node_modules/h3')['fromPlainHandler']
|
||||
const fromWebHandler: typeof import('../../node_modules/h3')['fromWebHandler']
|
||||
const getCookie: typeof import('../../node_modules/h3')['getCookie']
|
||||
const getHeader: typeof import('../../node_modules/h3')['getHeader']
|
||||
const getHeaders: typeof import('../../node_modules/h3')['getHeaders']
|
||||
const getMethod: typeof import('../../node_modules/h3')['getMethod']
|
||||
const getProxyRequestHeaders: typeof import('../../node_modules/h3')['getProxyRequestHeaders']
|
||||
const getQuery: typeof import('../../node_modules/h3')['getQuery']
|
||||
const getRequestFingerprint: typeof import('../../node_modules/h3')['getRequestFingerprint']
|
||||
const getRequestHeader: typeof import('../../node_modules/h3')['getRequestHeader']
|
||||
const getRequestHeaders: typeof import('../../node_modules/h3')['getRequestHeaders']
|
||||
const getRequestHost: typeof import('../../node_modules/h3')['getRequestHost']
|
||||
const getRequestIP: typeof import('../../node_modules/h3')['getRequestIP']
|
||||
const getRequestPath: typeof import('../../node_modules/h3')['getRequestPath']
|
||||
const getRequestProtocol: typeof import('../../node_modules/h3')['getRequestProtocol']
|
||||
const getRequestURL: typeof import('../../node_modules/h3')['getRequestURL']
|
||||
const getRequestWebStream: typeof import('../../node_modules/h3')['getRequestWebStream']
|
||||
const getResponseHeader: typeof import('../../node_modules/h3')['getResponseHeader']
|
||||
const getResponseHeaders: typeof import('../../node_modules/h3')['getResponseHeaders']
|
||||
const getResponseStatus: typeof import('../../node_modules/h3')['getResponseStatus']
|
||||
const getResponseStatusText: typeof import('../../node_modules/h3')['getResponseStatusText']
|
||||
const getRouteRules: typeof import('../../node_modules/nitropack/dist/runtime/internal/route-rules')['getRouteRules']
|
||||
const getRouterParam: typeof import('../../node_modules/h3')['getRouterParam']
|
||||
const getRouterParams: typeof import('../../node_modules/h3')['getRouterParams']
|
||||
const getSession: typeof import('../../node_modules/h3')['getSession']
|
||||
const getValidatedQuery: typeof import('../../node_modules/h3')['getValidatedQuery']
|
||||
const getValidatedRouterParams: typeof import('../../node_modules/h3')['getValidatedRouterParams']
|
||||
const handleCacheHeaders: typeof import('../../node_modules/h3')['handleCacheHeaders']
|
||||
const handleCors: typeof import('../../node_modules/h3')['handleCors']
|
||||
const isCorsOriginAllowed: typeof import('../../node_modules/h3')['isCorsOriginAllowed']
|
||||
const isError: typeof import('../../node_modules/h3')['isError']
|
||||
const isEvent: typeof import('../../node_modules/h3')['isEvent']
|
||||
const isEventHandler: typeof import('../../node_modules/h3')['isEventHandler']
|
||||
const isMethod: typeof import('../../node_modules/h3')['isMethod']
|
||||
const isPreflightRequest: typeof import('../../node_modules/h3')['isPreflightRequest']
|
||||
const isStream: typeof import('../../node_modules/h3')['isStream']
|
||||
const isWebResponse: typeof import('../../node_modules/h3')['isWebResponse']
|
||||
const lazyEventHandler: typeof import('../../node_modules/h3')['lazyEventHandler']
|
||||
const nitroPlugin: typeof import('../../node_modules/nitropack/dist/runtime/internal/plugin')['nitroPlugin']
|
||||
const parseCookies: typeof import('../../node_modules/h3')['parseCookies']
|
||||
const promisifyNodeListener: typeof import('../../node_modules/h3')['promisifyNodeListener']
|
||||
const proxyRequest: typeof import('../../node_modules/h3')['proxyRequest']
|
||||
const readBody: typeof import('../../node_modules/h3')['readBody']
|
||||
const readFormData: typeof import('../../node_modules/h3')['readFormData']
|
||||
const readMultipartFormData: typeof import('../../node_modules/h3')['readMultipartFormData']
|
||||
const readRawBody: typeof import('../../node_modules/h3')['readRawBody']
|
||||
const readValidatedBody: typeof import('../../node_modules/h3')['readValidatedBody']
|
||||
const removeResponseHeader: typeof import('../../node_modules/h3')['removeResponseHeader']
|
||||
const runTask: typeof import('../../node_modules/nitropack/dist/runtime/internal/task')['runTask']
|
||||
const sanitizeStatusCode: typeof import('../../node_modules/h3')['sanitizeStatusCode']
|
||||
const sanitizeStatusMessage: typeof import('../../node_modules/h3')['sanitizeStatusMessage']
|
||||
const sealSession: typeof import('../../node_modules/h3')['sealSession']
|
||||
const send: typeof import('../../node_modules/h3')['send']
|
||||
const sendError: typeof import('../../node_modules/h3')['sendError']
|
||||
const sendIterable: typeof import('../../node_modules/h3')['sendIterable']
|
||||
const sendNoContent: typeof import('../../node_modules/h3')['sendNoContent']
|
||||
const sendProxy: typeof import('../../node_modules/h3')['sendProxy']
|
||||
const sendRedirect: typeof import('../../node_modules/h3')['sendRedirect']
|
||||
const sendStream: typeof import('../../node_modules/h3')['sendStream']
|
||||
const sendWebResponse: typeof import('../../node_modules/h3')['sendWebResponse']
|
||||
const serveStatic: typeof import('../../node_modules/h3')['serveStatic']
|
||||
const setCookie: typeof import('../../node_modules/h3')['setCookie']
|
||||
const setHeader: typeof import('../../node_modules/h3')['setHeader']
|
||||
const setHeaders: typeof import('../../node_modules/h3')['setHeaders']
|
||||
const setResponseHeader: typeof import('../../node_modules/h3')['setResponseHeader']
|
||||
const setResponseHeaders: typeof import('../../node_modules/h3')['setResponseHeaders']
|
||||
const setResponseStatus: typeof import('../../node_modules/h3')['setResponseStatus']
|
||||
const splitCookiesString: typeof import('../../node_modules/h3')['splitCookiesString']
|
||||
const toEventHandler: typeof import('../../node_modules/h3')['toEventHandler']
|
||||
const toNodeListener: typeof import('../../node_modules/h3')['toNodeListener']
|
||||
const toPlainHandler: typeof import('../../node_modules/h3')['toPlainHandler']
|
||||
const toWebHandler: typeof import('../../node_modules/h3')['toWebHandler']
|
||||
const toWebRequest: typeof import('../../node_modules/h3')['toWebRequest']
|
||||
const unsealSession: typeof import('../../node_modules/h3')['unsealSession']
|
||||
const updateSession: typeof import('../../node_modules/h3')['updateSession']
|
||||
const useAppConfig: typeof import('../../node_modules/nitropack/dist/runtime/internal/config')['useAppConfig']
|
||||
const useBase: typeof import('../../node_modules/h3')['useBase']
|
||||
const useEvent: typeof import('../../node_modules/nitropack/dist/runtime/internal/context')['useEvent']
|
||||
const useNitroApp: typeof import('../../node_modules/nitropack/dist/runtime/internal/app')['useNitroApp']
|
||||
const useRuntimeConfig: typeof import('../../node_modules/nitropack/dist/runtime/internal/config')['useRuntimeConfig']
|
||||
const useSession: typeof import('../../node_modules/h3')['useSession']
|
||||
const useStorage: typeof import('../../node_modules/nitropack/dist/runtime/internal/storage')['useStorage']
|
||||
const writeEarlyHints: typeof import('../../node_modules/h3')['writeEarlyHints']
|
||||
}
|
||||
export { useNitroApp } from 'nitropack/runtime/internal/app';
|
||||
export { useRuntimeConfig, useAppConfig } from 'nitropack/runtime/internal/config';
|
||||
export { defineNitroPlugin, nitroPlugin } from 'nitropack/runtime/internal/plugin';
|
||||
export { defineCachedFunction, defineCachedEventHandler, cachedFunction, cachedEventHandler } from 'nitropack/runtime/internal/cache';
|
||||
export { useStorage } from 'nitropack/runtime/internal/storage';
|
||||
export { defineRenderHandler } from 'nitropack/runtime/internal/renderer';
|
||||
export { defineRouteMeta } from 'nitropack/runtime/internal/meta';
|
||||
export { getRouteRules } from 'nitropack/runtime/internal/route-rules';
|
||||
export { useEvent } from 'nitropack/runtime/internal/context';
|
||||
export { defineTask, runTask } from 'nitropack/runtime/internal/task';
|
||||
export { defineNitroErrorHandler } from 'nitropack/runtime/internal/error/utils';
|
||||
export { appendCorsHeaders, appendCorsPreflightHeaders, appendHeader, appendHeaders, appendResponseHeader, appendResponseHeaders, assertMethod, callNodeListener, clearResponseHeaders, clearSession, createApp, createAppEventHandler, createError, createEvent, createEventStream, createRouter, defaultContentType, defineEventHandler, defineLazyEventHandler, defineNodeListener, defineNodeMiddleware, defineRequestMiddleware, defineResponseMiddleware, defineWebSocket, defineWebSocketHandler, deleteCookie, dynamicEventHandler, eventHandler, fetchWithEvent, fromNodeMiddleware, fromPlainHandler, fromWebHandler, getCookie, getHeader, getHeaders, getMethod, getProxyRequestHeaders, getQuery, getRequestFingerprint, getRequestHeader, getRequestHeaders, getRequestHost, getRequestIP, getRequestPath, getRequestProtocol, getRequestURL, getRequestWebStream, getResponseHeader, getResponseHeaders, getResponseStatus, getResponseStatusText, getRouterParam, getRouterParams, getSession, getValidatedQuery, getValidatedRouterParams, handleCacheHeaders, handleCors, isCorsOriginAllowed, isError, isEvent, isEventHandler, isMethod, isPreflightRequest, isStream, isWebResponse, lazyEventHandler, parseCookies, promisifyNodeListener, proxyRequest, readBody, readFormData, readMultipartFormData, readRawBody, readValidatedBody, removeResponseHeader, sanitizeStatusCode, sanitizeStatusMessage, sealSession, send, sendError, sendIterable, sendNoContent, sendProxy, sendRedirect, sendStream, sendWebResponse, serveStatic, setCookie, setHeader, setHeaders, setResponseHeader, setResponseHeaders, setResponseStatus, splitCookiesString, toEventHandler, toNodeListener, toPlainHandler, toWebHandler, toWebRequest, unsealSession, updateSession, useBase, useSession, writeEarlyHints } from 'h3';
|
||||
export { buildAssetsURL as __buildAssetsURL, publicAssetsURL as __publicAssetsURL } from '/home/loitx/dev/utopia/system/node_modules/nuxt/dist/core/runtime/nitro/utils/paths';
|
||||
export { defineAppConfig } from '/home/loitx/dev/utopia/system/node_modules/nuxt/dist/core/runtime/nitro/utils/config';
|
||||
6
.nuxt/types/nitro-middleware.d.ts
vendored
Normal file
6
.nuxt/types/nitro-middleware.d.ts
vendored
Normal file
@@ -0,0 +1,6 @@
|
||||
export type MiddlewareKey = never
|
||||
declare module 'nitropack' {
|
||||
interface NitroRouteConfig {
|
||||
appMiddleware?: MiddlewareKey | MiddlewareKey[] | Record<MiddlewareKey, boolean>
|
||||
}
|
||||
}
|
||||
34
.nuxt/types/nitro-nuxt.d.ts
vendored
Normal file
34
.nuxt/types/nitro-nuxt.d.ts
vendored
Normal file
@@ -0,0 +1,34 @@
|
||||
|
||||
/// <reference path="nitro-middleware.d.ts" />
|
||||
/// <reference path="./schema.d.ts" />
|
||||
|
||||
import type { RuntimeConfig } from 'nuxt/schema'
|
||||
import type { H3Event } from 'h3'
|
||||
import type { LogObject } from 'consola'
|
||||
import type { NuxtIslandContext, NuxtIslandResponse, NuxtRenderHTMLContext } from 'nuxt/app'
|
||||
|
||||
declare module 'nitropack' {
|
||||
interface NitroRuntimeConfigApp {
|
||||
buildAssetsDir: string
|
||||
cdnURL: string
|
||||
}
|
||||
interface NitroRuntimeConfig extends RuntimeConfig {}
|
||||
interface NitroRouteConfig {
|
||||
ssr?: boolean
|
||||
noScripts?: boolean
|
||||
/** @deprecated Use `noScripts` instead */
|
||||
experimentalNoScripts?: boolean
|
||||
}
|
||||
interface NitroRouteRules {
|
||||
ssr?: boolean
|
||||
noScripts?: boolean
|
||||
/** @deprecated Use `noScripts` instead */
|
||||
experimentalNoScripts?: boolean
|
||||
appMiddleware?: Record<string, boolean>
|
||||
}
|
||||
interface NitroRuntimeHooks {
|
||||
'dev:ssr-logs': (ctx: { logs: LogObject[], path: string }) => void | Promise<void>
|
||||
'render:html': (htmlContext: NuxtRenderHTMLContext, context: { event: H3Event }) => void | Promise<void>
|
||||
'render:island': (islandResponse: NuxtIslandResponse, context: { event: H3Event, islandContext: NuxtIslandContext }) => void | Promise<void>
|
||||
}
|
||||
}
|
||||
17
.nuxt/types/nitro-routes.d.ts
vendored
Normal file
17
.nuxt/types/nitro-routes.d.ts
vendored
Normal file
@@ -0,0 +1,17 @@
|
||||
// Generated by nitro
|
||||
import type { Serialize, Simplify } from "nitropack/types";
|
||||
declare module "nitropack/types" {
|
||||
type Awaited<T> = T extends PromiseLike<infer U> ? Awaited<U> : T
|
||||
interface InternalApi {
|
||||
'/__nuxt_error': {
|
||||
'default': Simplify<Serialize<Awaited<ReturnType<typeof import('../../node_modules/nuxt/dist/core/runtime/nitro/handlers/renderer').default>>>>
|
||||
}
|
||||
'/__nuxt_island/**': {
|
||||
'default': Simplify<Serialize<Awaited<ReturnType<typeof import('../../server/#internal/nuxt/island-renderer').default>>>>
|
||||
}
|
||||
'/_ipx/**': {
|
||||
'default': Simplify<Serialize<Awaited<ReturnType<typeof import('../../node_modules/@nuxt/image/dist/runtime/ipx').default>>>>
|
||||
}
|
||||
}
|
||||
}
|
||||
export {}
|
||||
3
.nuxt/types/nitro.d.ts
vendored
Normal file
3
.nuxt/types/nitro.d.ts
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
/// <reference path="./nitro-routes.d.ts" />
|
||||
/// <reference path="./nitro-config.d.ts" />
|
||||
/// <reference path="./nitro-imports.d.ts" />
|
||||
44
.nuxt/types/plugins.d.ts
vendored
Normal file
44
.nuxt/types/plugins.d.ts
vendored
Normal file
@@ -0,0 +1,44 @@
|
||||
// Generated by Nuxt'
|
||||
import type { Plugin } from '#app'
|
||||
|
||||
type Decorate<T extends Record<string, any>> = { [K in keyof T as K extends string ? `$${K}` : never]: T[K] }
|
||||
|
||||
type InjectionType<A extends Plugin> = A extends {default: Plugin<infer T>} ? Decorate<T> : unknown
|
||||
|
||||
type NuxtAppInjections =
|
||||
InjectionType<typeof import("../../node_modules/@pinia/nuxt/dist/runtime/payload-plugin.js")> &
|
||||
InjectionType<typeof import("../../node_modules/nuxt/dist/app/plugins/revive-payload.client.js")> &
|
||||
InjectionType<typeof import("../../node_modules/nuxt/dist/head/runtime/plugins/unhead.js")> &
|
||||
InjectionType<typeof import("../../node_modules/nuxt/dist/pages/runtime/plugins/router.js")> &
|
||||
InjectionType<typeof import("../../node_modules/nuxt/dist/app/plugins/browser-devtools-timing.client.js")> &
|
||||
InjectionType<typeof import("../../node_modules/nuxt/dist/app/plugins/navigation-repaint.client.js")> &
|
||||
InjectionType<typeof import("../../node_modules/nuxt/dist/app/plugins/check-outdated-build.client.js")> &
|
||||
InjectionType<typeof import("../../node_modules/nuxt/dist/app/plugins/revive-payload.server.js")> &
|
||||
InjectionType<typeof import("../../node_modules/nuxt/dist/app/plugins/chunk-reload.client.js")> &
|
||||
InjectionType<typeof import("../../node_modules/@pinia/nuxt/dist/runtime/plugin.vue3.js")> &
|
||||
InjectionType<typeof import("../../node_modules/nuxt/dist/pages/runtime/plugins/prefetch.client.js")> &
|
||||
InjectionType<typeof import("../../node_modules/nuxt/dist/pages/runtime/plugins/check-if-page-unused.js")> &
|
||||
InjectionType<typeof import("../../node_modules/@nuxt/devtools/dist/runtime/plugins/devtools.server.js")> &
|
||||
InjectionType<typeof import("../../node_modules/@nuxt/devtools/dist/runtime/plugins/devtools.client.js")> &
|
||||
InjectionType<typeof import("../../node_modules/pinia-plugin-persistedstate/dist/nuxt/runtime/plugin.js")> &
|
||||
InjectionType<typeof import("../../node_modules/nuxt/dist/app/plugins/dev-server-logs.js")> &
|
||||
InjectionType<typeof import("../../node_modules/nuxt/dist/app/plugins/check-if-layout-used.js")> &
|
||||
InjectionType<typeof import("../../plugins/00-datatable.js")> &
|
||||
InjectionType<typeof import("../../plugins/01-common.js")> &
|
||||
InjectionType<typeof import("../../plugins/02-connection.js")> &
|
||||
InjectionType<typeof import("../../plugins/03-api-loader.js")> &
|
||||
InjectionType<typeof import("../../plugins/04-components.js")>
|
||||
|
||||
declare module '#app' {
|
||||
interface NuxtApp extends NuxtAppInjections { }
|
||||
|
||||
interface NuxtAppLiterals {
|
||||
pluginName: 'vue-devtools-client' | 'nuxt:revive-payload:client' | 'nuxt:head' | 'nuxt:router' | 'nuxt:browser-devtools-timing' | 'nuxt:revive-payload:server' | 'nuxt:chunk-reload' | 'pinia' | 'nuxt:global-components' | 'nuxt:prefetch' | 'nuxt:checkIfPageUnused' | 'pinia-plugin-persistedstate' | 'nuxt:checkIfLayoutUsed'
|
||||
}
|
||||
}
|
||||
|
||||
declare module 'vue' {
|
||||
interface ComponentCustomProperties extends NuxtAppInjections { }
|
||||
}
|
||||
|
||||
export { }
|
||||
128
.nuxt/types/schema.d.ts
vendored
Normal file
128
.nuxt/types/schema.d.ts
vendored
Normal file
@@ -0,0 +1,128 @@
|
||||
import { NuxtModule, RuntimeConfig } from '@nuxt/schema'
|
||||
declare module '@nuxt/schema' {
|
||||
interface NuxtOptions {
|
||||
/**
|
||||
* Configuration for `@pinia/nuxt`
|
||||
*/
|
||||
["pinia"]: typeof import("@pinia/nuxt").default extends NuxtModule<infer O> ? O : Record<string, any>
|
||||
/**
|
||||
* Configuration for `@nuxt/image`
|
||||
*/
|
||||
["image"]: typeof import("@nuxt/image").default extends NuxtModule<infer O> ? O : Record<string, any>
|
||||
/**
|
||||
* Configuration for `pinia-plugin-persistedstate/nuxt`
|
||||
*/
|
||||
["piniaPluginPersistedstate"]: typeof import("pinia-plugin-persistedstate/nuxt").default extends NuxtModule<infer O> ? O : Record<string, any>
|
||||
/**
|
||||
* Configuration for `@nuxt/devtools`
|
||||
*/
|
||||
["devtools"]: typeof import("@nuxt/devtools").default extends NuxtModule<infer O> ? O : Record<string, any>
|
||||
/**
|
||||
* Configuration for `@nuxt/telemetry`
|
||||
*/
|
||||
["telemetry"]: typeof import("@nuxt/telemetry").default extends NuxtModule<infer O> ? O : Record<string, any>
|
||||
}
|
||||
interface NuxtConfig {
|
||||
/**
|
||||
* Configuration for `@pinia/nuxt`
|
||||
*/
|
||||
["pinia"]?: typeof import("@pinia/nuxt").default extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
|
||||
/**
|
||||
* Configuration for `@nuxt/image`
|
||||
*/
|
||||
["image"]?: typeof import("@nuxt/image").default extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
|
||||
/**
|
||||
* Configuration for `pinia-plugin-persistedstate/nuxt`
|
||||
*/
|
||||
["piniaPluginPersistedstate"]?: typeof import("pinia-plugin-persistedstate/nuxt").default extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
|
||||
/**
|
||||
* Configuration for `@nuxt/devtools`
|
||||
*/
|
||||
["devtools"]?: typeof import("@nuxt/devtools").default extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
|
||||
/**
|
||||
* Configuration for `@nuxt/telemetry`
|
||||
*/
|
||||
["telemetry"]?: typeof import("@nuxt/telemetry").default extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
|
||||
modules?: (undefined | null | false | NuxtModule<any> | string | [NuxtModule | string, Record<string, any>] | ["@pinia/nuxt", Exclude<NuxtConfig["pinia"], boolean>] | ["@nuxt/image", Exclude<NuxtConfig["image"], boolean>] | ["pinia-plugin-persistedstate/nuxt", Exclude<NuxtConfig["piniaPluginPersistedstate"], boolean>] | ["@nuxt/devtools", Exclude<NuxtConfig["devtools"], boolean>] | ["@nuxt/telemetry", Exclude<NuxtConfig["telemetry"], boolean>])[],
|
||||
}
|
||||
}
|
||||
declare module 'nuxt/schema' {
|
||||
interface NuxtOptions {
|
||||
/**
|
||||
* Configuration for `@pinia/nuxt`
|
||||
* @see https://www.npmjs.com/package/@pinia/nuxt
|
||||
*/
|
||||
["pinia"]: typeof import("@pinia/nuxt").default extends NuxtModule<infer O> ? O : Record<string, any>
|
||||
/**
|
||||
* Configuration for `@nuxt/image`
|
||||
* @see https://www.npmjs.com/package/@nuxt/image
|
||||
*/
|
||||
["image"]: typeof import("@nuxt/image").default extends NuxtModule<infer O> ? O : Record<string, any>
|
||||
/**
|
||||
* Configuration for `pinia-plugin-persistedstate/nuxt`
|
||||
* @see https://www.npmjs.com/package/pinia-plugin-persistedstate/nuxt
|
||||
*/
|
||||
["piniaPluginPersistedstate"]: typeof import("pinia-plugin-persistedstate/nuxt").default extends NuxtModule<infer O> ? O : Record<string, any>
|
||||
/**
|
||||
* Configuration for `@nuxt/devtools`
|
||||
* @see https://www.npmjs.com/package/@nuxt/devtools
|
||||
*/
|
||||
["devtools"]: typeof import("@nuxt/devtools").default extends NuxtModule<infer O> ? O : Record<string, any>
|
||||
/**
|
||||
* Configuration for `@nuxt/telemetry`
|
||||
* @see https://www.npmjs.com/package/@nuxt/telemetry
|
||||
*/
|
||||
["telemetry"]: typeof import("@nuxt/telemetry").default extends NuxtModule<infer O> ? O : Record<string, any>
|
||||
}
|
||||
interface NuxtConfig {
|
||||
/**
|
||||
* Configuration for `@pinia/nuxt`
|
||||
* @see https://www.npmjs.com/package/@pinia/nuxt
|
||||
*/
|
||||
["pinia"]?: typeof import("@pinia/nuxt").default extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
|
||||
/**
|
||||
* Configuration for `@nuxt/image`
|
||||
* @see https://www.npmjs.com/package/@nuxt/image
|
||||
*/
|
||||
["image"]?: typeof import("@nuxt/image").default extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
|
||||
/**
|
||||
* Configuration for `pinia-plugin-persistedstate/nuxt`
|
||||
* @see https://www.npmjs.com/package/pinia-plugin-persistedstate/nuxt
|
||||
*/
|
||||
["piniaPluginPersistedstate"]?: typeof import("pinia-plugin-persistedstate/nuxt").default extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
|
||||
/**
|
||||
* Configuration for `@nuxt/devtools`
|
||||
* @see https://www.npmjs.com/package/@nuxt/devtools
|
||||
*/
|
||||
["devtools"]?: typeof import("@nuxt/devtools").default extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
|
||||
/**
|
||||
* Configuration for `@nuxt/telemetry`
|
||||
* @see https://www.npmjs.com/package/@nuxt/telemetry
|
||||
*/
|
||||
["telemetry"]?: typeof import("@nuxt/telemetry").default extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
|
||||
modules?: (undefined | null | false | NuxtModule<any> | string | [NuxtModule | string, Record<string, any>] | ["@pinia/nuxt", Exclude<NuxtConfig["pinia"], boolean>] | ["@nuxt/image", Exclude<NuxtConfig["image"], boolean>] | ["pinia-plugin-persistedstate/nuxt", Exclude<NuxtConfig["piniaPluginPersistedstate"], boolean>] | ["@nuxt/devtools", Exclude<NuxtConfig["devtools"], boolean>] | ["@nuxt/telemetry", Exclude<NuxtConfig["telemetry"], boolean>])[],
|
||||
}
|
||||
interface RuntimeConfig {
|
||||
app: {
|
||||
buildId: string,
|
||||
|
||||
baseURL: string,
|
||||
|
||||
buildAssetsDir: string,
|
||||
|
||||
cdnURL: string,
|
||||
},
|
||||
|
||||
nitro: {
|
||||
envPrefix: string,
|
||||
},
|
||||
}
|
||||
interface PublicRuntimeConfig {
|
||||
piniaPluginPersistedstate: any,
|
||||
}
|
||||
}
|
||||
declare module 'vue' {
|
||||
interface ComponentCustomProperties {
|
||||
$config: RuntimeConfig
|
||||
}
|
||||
}
|
||||
0
.nuxt/types/vue-shim.d.ts
vendored
Normal file
0
.nuxt/types/vue-shim.d.ts
vendored
Normal file
7
Dockerfile
Executable file
7
Dockerfile
Executable file
@@ -0,0 +1,7 @@
|
||||
FROM node:18-alpine
|
||||
WORKDIR /src
|
||||
COPY . .
|
||||
RUN rm -rf node_modules
|
||||
RUN npm install --legacy-peer-deps
|
||||
RUN npm run build
|
||||
RUN npm install pm2 -g
|
||||
75
README.md
Normal file
75
README.md
Normal file
@@ -0,0 +1,75 @@
|
||||
# Nuxt Minimal Starter
|
||||
|
||||
Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
|
||||
|
||||
## Setup
|
||||
|
||||
Make sure to install dependencies:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm install
|
||||
|
||||
# pnpm
|
||||
pnpm install
|
||||
|
||||
# yarn
|
||||
yarn install
|
||||
|
||||
# bun
|
||||
bun install
|
||||
```
|
||||
|
||||
## Development Server
|
||||
|
||||
Start the development server on `http://localhost:3000`:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm run dev
|
||||
|
||||
# pnpm
|
||||
pnpm dev
|
||||
|
||||
# yarn
|
||||
yarn dev
|
||||
|
||||
# bun
|
||||
bun run dev
|
||||
```
|
||||
|
||||
## Production
|
||||
|
||||
Build the application for production:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm run build
|
||||
|
||||
# pnpm
|
||||
pnpm build
|
||||
|
||||
# yarn
|
||||
yarn build
|
||||
|
||||
# bun
|
||||
bun run build
|
||||
```
|
||||
|
||||
Locally preview production build:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm run preview
|
||||
|
||||
# pnpm
|
||||
pnpm preview
|
||||
|
||||
# yarn
|
||||
yarn preview
|
||||
|
||||
# bun
|
||||
bun run preview
|
||||
```
|
||||
|
||||
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
|
||||
5
app.vue
Normal file
5
app.vue
Normal file
@@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<NuxtLayout>
|
||||
<NuxtPage />
|
||||
</NuxtLayout>
|
||||
</template>
|
||||
1
apps
Submodule
1
apps
Submodule
Submodule apps added at a67f7482df
335
assets/styles/main.scss
Executable file
335
assets/styles/main.scss
Executable file
@@ -0,0 +1,335 @@
|
||||
|
||||
@use "bulma/sass/utilities/initial-variables.scss" as *;
|
||||
@use "bulma/sass/utilities/mixins.scss" as *;
|
||||
|
||||
$color:(
|
||||
primary: #3392ec, //#008000,
|
||||
findata: #ff8829,
|
||||
danger: #f14668,
|
||||
dark: #686868,
|
||||
twitter: #3392ec
|
||||
);
|
||||
$size: (
|
||||
one: 10px,
|
||||
two: 17px,
|
||||
three: 30px,
|
||||
four: 40px,
|
||||
five: 50px,
|
||||
six: 60px
|
||||
);
|
||||
|
||||
@mixin cbox($width, $height, $font, $background) {
|
||||
display:flex;
|
||||
width: $width;
|
||||
height: $height;
|
||||
border: 1.5px solid #ff8829;
|
||||
font-size: $font;
|
||||
-webkit-border-radius: 50%;
|
||||
-moz-border-radius: 50%;
|
||||
-ms-border-radius: 50%;
|
||||
border-radius: 50%;
|
||||
color: #ff8829;
|
||||
font-weight: bold;
|
||||
background-color: $background;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
@each $name, $hex in $color {
|
||||
@each $n, $v in $size {
|
||||
.cbox-#{$name}-#{$n}{
|
||||
@include cbox($v*2, $v*2, $v*1.1, white);
|
||||
border-color: $hex ;
|
||||
color: $hex;
|
||||
}
|
||||
}
|
||||
}
|
||||
@each $name, $hex in $color {
|
||||
@each $n, $v in $size {
|
||||
.cbox-fill-#{$name}-#{$n}{
|
||||
@include cbox($v*2, $v*2, $v, $hex);
|
||||
border-color: $hex ;
|
||||
color: findColorInvert($hex);
|
||||
}
|
||||
}
|
||||
}
|
||||
@for $i from 10 through 40 {
|
||||
.fs-#{$i} {
|
||||
font-size: $i + px;
|
||||
}
|
||||
}
|
||||
@for $i from 10 through 40 {
|
||||
.fsb-#{$i} {
|
||||
font-size: $i + px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.fullheight {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.textsize {
|
||||
@include mobile {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.header-logo{
|
||||
background: url('/logo.svg') no-repeat center center;
|
||||
background-size: 140px;
|
||||
width: 170px
|
||||
}
|
||||
|
||||
.border-bottom {
|
||||
border-bottom: 1px solid hsl(0, 0%, 90%);
|
||||
}
|
||||
|
||||
.carousel-height {
|
||||
width: 100%;
|
||||
height: 80vh;
|
||||
@include mobile {
|
||||
height: 110vh;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-mt20 {
|
||||
@include mobile {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-px10 {
|
||||
@include mobile {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-pt10 {
|
||||
@include mobile {
|
||||
padding-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-pt80 {
|
||||
padding-top: 120px;
|
||||
@include mobile {
|
||||
padding-top: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
.fullhd-pt30 {
|
||||
padding-top: 30px;
|
||||
@include until($fullhd) {
|
||||
padding-top: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.media-width {
|
||||
width: 120px !important;
|
||||
@include mobile {
|
||||
width: 112px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.hideon-mobile {
|
||||
@include mobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.maintext {
|
||||
margin-top: 20px;
|
||||
font-size: 40px;
|
||||
line-height:3rem;
|
||||
font-weight: 600;
|
||||
@include mobile {
|
||||
font-size: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
.subtext {
|
||||
margin-top: 30px;
|
||||
font-size: 1.2rem;
|
||||
line-height: 2rem;
|
||||
@include mobile {
|
||||
line-height: 1.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 10 through 50 {
|
||||
.fs-#{$i} {
|
||||
font-size: $i + px;
|
||||
}
|
||||
};
|
||||
|
||||
@for $i from 10 through 50 {
|
||||
.fsb-#{$i} {
|
||||
font-size: $i + px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.dotslide {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.activetab {
|
||||
border: 2px solid #3392ec; //#008000; // #0AB412
|
||||
border-radius: 8px;
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
color: white;
|
||||
background-color: #3392ec; //#008000;
|
||||
}
|
||||
|
||||
.blockdiv {
|
||||
max-width: 1900px !important;
|
||||
background-color: #FFFFFF;
|
||||
height: 100vh;
|
||||
//margin-top: 40px !important;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
padding-top: 60px;
|
||||
padding-bottom: 40px;
|
||||
|
||||
@include until($desktop) {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
padding-top: 65px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
padding-left: 16px;
|
||||
padding-right:16px;
|
||||
padding-top: 65px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
.columns .column {
|
||||
@include mobile {
|
||||
padding-left: 0px;
|
||||
padding-right:0px;
|
||||
}
|
||||
}
|
||||
|
||||
.padding-desktop {
|
||||
@media screen and (min-width: $desktop) {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.padding-text {
|
||||
padding-left: 15%;
|
||||
padding-right: 5%;
|
||||
@include until($desktop) {
|
||||
padding-left: 0%;
|
||||
padding-right: 0%;
|
||||
}
|
||||
@include until($fullhd) {
|
||||
padding-left: 0%;
|
||||
padding-right: 0%;
|
||||
}
|
||||
}
|
||||
|
||||
.padding-image{
|
||||
padding-left: 5%;
|
||||
padding-right: 15%;
|
||||
@include until($fullhd) {
|
||||
padding-left: 0%;
|
||||
padding-right: 0%;
|
||||
}
|
||||
@include until($desktop) {
|
||||
padding-left: 15%;
|
||||
padding-right: 15%;
|
||||
}
|
||||
@include mobile {
|
||||
padding-left: 0%;
|
||||
padding-right: 0%;
|
||||
}
|
||||
}
|
||||
|
||||
.imgcontainer {
|
||||
position: relative;
|
||||
width: 100% !important;
|
||||
max-width: 500px;
|
||||
}
|
||||
.centered {
|
||||
position: absolute;
|
||||
top: 80%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
color:black;
|
||||
}
|
||||
|
||||
.tooltip .tooltiptext {
|
||||
visibility: hidden;
|
||||
background-color: #555;
|
||||
color: #fff;
|
||||
border-radius: 6px;
|
||||
position: absolute;
|
||||
margin-left: 0px;
|
||||
z-index: 999;
|
||||
bottom: 110%;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
padding: 6px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.to-left {
|
||||
right: 30px;
|
||||
}
|
||||
|
||||
@mixin tooltipshow() {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
min-width: 300px;
|
||||
z-index: 999;
|
||||
background-color: #F7F18A;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.tooltip:hover .tooltiptext {
|
||||
@include tooltipshow()
|
||||
}
|
||||
|
||||
.tooltip:hover .tooltiptext .to-left {
|
||||
@include tooltipshow()
|
||||
}
|
||||
|
||||
@mixin dot($background) {
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
text-align: center;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
background-color: $background;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
@each $name, $hex in $color {
|
||||
.dot-#{$name} {
|
||||
@include dot($hex);
|
||||
}
|
||||
}
|
||||
6
build.sh
Normal file
6
build.sh
Normal file
@@ -0,0 +1,6 @@
|
||||
python3 envprod.py
|
||||
PROJECT="utopia"
|
||||
IMAGE="system"
|
||||
|
||||
docker build -t docker.bigdatatech.vn/$PROJECT/$IMAGE:latest .
|
||||
docker push docker.bigdatatech.vn/$PROJECT/$IMAGE:latest
|
||||
6
builddev.sh
Normal file
6
builddev.sh
Normal file
@@ -0,0 +1,6 @@
|
||||
python3 envdev.py
|
||||
PROJECT="utopia"
|
||||
IMAGE="system-dev"
|
||||
|
||||
docker build -t docker.bigdatatech.vn/$PROJECT/$IMAGE:latest .
|
||||
docker push docker.bigdatatech.vn/$PROJECT/$IMAGE:latest
|
||||
14
components/Caption.vue
Normal file
14
components/Caption.vue
Normal file
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<span :class="`icon-text fsb-${props.size||17} ${props.type || 'has-text-findata'}`">
|
||||
<span>{{ title }}</span>
|
||||
<SvgIcon id="ignore" v-bind="{name: 'right.svg', type: props.type? props.type.replace('has-text-', '') : null,
|
||||
size: (props.size>=30? props.size*0.7 : props.size) || 20, alt: 'Mũi tên chỉ hướng'}"></SvgIcon>
|
||||
</span>
|
||||
</template>
|
||||
<script setup>
|
||||
var props = defineProps({
|
||||
type: String,
|
||||
size: Number,
|
||||
title: String
|
||||
})
|
||||
</script>
|
||||
70
components/Modal.vue
Normal file
70
components/Modal.vue
Normal file
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<div class="modal is-active" @click="doClick">
|
||||
<div class="modal-background" :style="`opacity:${count===0? 0.7 : 0.3} !important;'`"></div>
|
||||
<div class="modal-card" :id="docid" :style="`width:${vWidth};`">
|
||||
<header class="modal-card-head my-0 py-2" v-if="title">
|
||||
<div style="width: 100%;">
|
||||
<div class="field is-grouped">
|
||||
<div class="control is-expanded has-text-left">
|
||||
<p class="fsb-18 has-text-dark" v-html="title"></p>
|
||||
</div>
|
||||
<div class="control has-text-right">
|
||||
<button class="delete is-medium" @click="closeModal()"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<section class="modal-card-body px-4 py-4" :style="`min-height:${height? height : '700px'}`">
|
||||
<component :is="getComponent()" v-bind="props.vbind" @modalevent="modalEvent" @close="closeModal" />
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { onMounted, defineAsyncComponent } from 'vue'
|
||||
import { useStore } from '~/stores/index'
|
||||
const emit = defineEmits(['close', 'remove'])
|
||||
const store = useStore()
|
||||
const { $id } = useNuxtApp()
|
||||
var props = defineProps({
|
||||
component: String,
|
||||
width: String,
|
||||
height: String,
|
||||
vbind: Object,
|
||||
title: String
|
||||
})
|
||||
function getComponent() {
|
||||
let arr = props.component.split('/')
|
||||
if(arr.length===2) {
|
||||
return defineAsyncComponent(() => import(`@/components/${arr[0]}/${arr[1]}.vue`))
|
||||
} else {
|
||||
return defineAsyncComponent(() => import(`@/components/${arr[0]}.vue`))
|
||||
}
|
||||
}
|
||||
const docid = $id()
|
||||
const viewport = store.viewport
|
||||
var title = props.title
|
||||
var count = 0
|
||||
var lock = false
|
||||
var vWidth = viewport<=2? '100%' : props.width || '60%'
|
||||
const closeModal = function() {
|
||||
if(!lock) emit('close')
|
||||
}
|
||||
const modalEvent = function(ev) {
|
||||
emit(ev.name, ev.data)
|
||||
}
|
||||
const doClick = function(e) {
|
||||
//e.stopPropagation()
|
||||
if(!e.srcElement.offsetParent) return
|
||||
if(document.getElementById(docid)) {
|
||||
if(!document.getElementById(docid).contains(e.target)) {
|
||||
closeModal()
|
||||
}
|
||||
}
|
||||
}
|
||||
onMounted(()=> {
|
||||
window.addEventListener('keydown', (e) => {if(e.key==='Escape') closeModal()})
|
||||
const collection = document.getElementsByClassName("modal-background")
|
||||
count = collection.length
|
||||
})
|
||||
</script>
|
||||
202
components/SearchBox.vue
Normal file
202
components/SearchBox.vue
Normal file
@@ -0,0 +1,202 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="field has-addons">
|
||||
<div class="control has-icons-left is-expanded">
|
||||
<div :class="`dropdown ${ pos || ''} ${focused? 'is-active' : ''}`" style="width: 100%;">
|
||||
<div class="dropdown-trigger" style="width: 100%;">
|
||||
<input :disabled="disabled" :class="`input ${error? 'is-danger' : ''} ${disabled? 'has-text-dark' : ''}`" type="text"
|
||||
@focus="setFocus" @blur="lostFocus" @keyup.enter="pressEnter" @keyup="beginSearch" v-model="value" />
|
||||
</div>
|
||||
<div class="dropdown-menu" role="menu">
|
||||
<div class="dropdown-content px-3" style="min-width: 250px;">
|
||||
<p class="has-text-findata" v-if="data.length===0">Không có giá trị thỏa mãn</p>
|
||||
<ScrollBox v-bind="{data: data, name: field, fontsize: 14, maxheight: '200px'}" @selected="choose" v-else></ScrollBox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="icon is-left">
|
||||
<SvgIcon v-bind="{name: 'magnify.svg', type: 'gray', size: 22}"></SvgIcon>
|
||||
</span>
|
||||
</div>
|
||||
<div class="control" v-if="viewaddon">
|
||||
<button class="button is-dark px-2" @click="viewInfo()">
|
||||
<SvgIcon v-bind="{name: 'view.svg', type: 'white', size: 22}"></SvgIcon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="control" v-if="addon">
|
||||
<button class="button is-primary px-2" @click="addNew()">
|
||||
<SvgIcon v-bind="{name: 'add1.png', type: 'white', size: 22}"></SvgIcon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<Modal @dataevent="dataevent" @close="showmodal=undefined" v-bind="showmodal" v-if="showmodal"></Modal>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
const emit = defineEmits(['option', 'modalevent'])
|
||||
import ScrollBox from '~/components/datatable/ScrollBox'
|
||||
const { $nonAccent, $find, $getdata, $copy, $empty, $findapi, $findIndex} = useNuxtApp()
|
||||
var props = defineProps({
|
||||
api: String,
|
||||
field: String,
|
||||
column: Array,
|
||||
first: Boolean,
|
||||
optionid: Number,
|
||||
filter: Object,
|
||||
addon: Object,
|
||||
viewaddon: Object,
|
||||
position: String,
|
||||
disabled: Boolean,
|
||||
vdata: Object
|
||||
})
|
||||
var search = undefined
|
||||
var data = ref([])
|
||||
var timer = undefined
|
||||
var value = ref()
|
||||
var selected = undefined
|
||||
var showmodal = ref()
|
||||
var params = props.api? $findapi(props.api)['params'] : {}
|
||||
var orgdata = undefined
|
||||
var error = false
|
||||
var focused = ref(false)
|
||||
var count1 = 0
|
||||
var count2 = 0
|
||||
var pos = undefined
|
||||
async function initData() {
|
||||
getPos()
|
||||
if(props.vdata) {
|
||||
orgdata = $copy(props.vdata)
|
||||
orgdata.map(v=>v.search = $nonAccent(v[props.field]))
|
||||
}
|
||||
if(props.first) {
|
||||
data.value = orgdata? $copy(orgdata) : await getData()
|
||||
if(props.optionid) {
|
||||
let f = {}
|
||||
f[props.field] = props.optionid
|
||||
if(props.optionid>0) f = {id: props.optionid}
|
||||
selected = $find(data.value, f)
|
||||
if(selected && props.vdata) {
|
||||
return value.value = selected[props.field]
|
||||
}
|
||||
}
|
||||
} else if(props.optionid) {
|
||||
selected = await $getdata(props.api, {id: props.optionid}, undefined, true)
|
||||
}
|
||||
if(selected) doSelect(selected)
|
||||
}
|
||||
/*watch(()=> {
|
||||
optionid: function(newVal) {
|
||||
if(optionid) selected = $find(data, {id: optionid})
|
||||
if(selected) doSelect(selected)
|
||||
else value = undefined
|
||||
}
|
||||
filter: async function(newVal) {
|
||||
data = await getData()
|
||||
},
|
||||
vdata: function(newval) {
|
||||
if(newval) {
|
||||
orgdata = $copy(props.vdata)
|
||||
orgdata.map(v=>v.search = $nonAccent(v[field]))
|
||||
data = $copy(orgdata)
|
||||
selected = undefined
|
||||
value = undefined
|
||||
if(optionid) selected = $find(data, {id: optionid})
|
||||
if(selected) doSelect(selected)
|
||||
}
|
||||
}
|
||||
}}*/
|
||||
function choose(v) {
|
||||
focused.value = false
|
||||
count1 = 0
|
||||
count2 = 0
|
||||
doSelect(v)
|
||||
}
|
||||
function setFocus() {
|
||||
focused.value = true
|
||||
count1 = 0
|
||||
count2 = 0
|
||||
}
|
||||
function lostFocus() {
|
||||
setTimeout(()=>{
|
||||
focused.value = false
|
||||
if($empty(value.value)) emit('option', null)
|
||||
}, 200)
|
||||
}
|
||||
function pressEnter() {
|
||||
if(data.length===0) return
|
||||
choose(data[0])
|
||||
}
|
||||
function doClick() {
|
||||
count1 += 1
|
||||
}
|
||||
function doSelect(option) {
|
||||
if($empty(option)) return
|
||||
selected = option
|
||||
value.value = selected[props.field]
|
||||
emit('option', option)
|
||||
emit('modalevent', {name: 'option', data: option})
|
||||
}
|
||||
function findObject(val) {
|
||||
let rows = $copy(orgdata)
|
||||
if($empty(val)) data.value = rows
|
||||
else {
|
||||
let text = $nonAccent(val)
|
||||
data.value = rows.filter(v=>v.search.toLowerCase().indexOf(text.toLowerCase())>=0)
|
||||
}
|
||||
}
|
||||
async function getData() {
|
||||
params.filter = props.filter
|
||||
params.sort = '-id'
|
||||
let data = await $getdata(props.api, undefined, params)
|
||||
return data
|
||||
}
|
||||
async function getApi(val) {
|
||||
if(props.vdata) return findObject(val)
|
||||
let text = val? val.toLowerCase() : ''
|
||||
let f = {}
|
||||
props.column.map(v=>{
|
||||
f[`${v}__icontains`] = text
|
||||
})
|
||||
params.filter_or = f
|
||||
if(props.filter) params.filter = $copy(props.filter)
|
||||
data.value = await $getdata(props.api, undefined, params)
|
||||
}
|
||||
function beginSearch(e) {
|
||||
let val = e.target.value
|
||||
search = val
|
||||
if (timer) clearTimeout(timer)
|
||||
timer = setTimeout(() => getApi(val), 150)
|
||||
if($empty(val)) emit('option', null)
|
||||
}
|
||||
function addNew() {
|
||||
showmodal.value = $copy(props.addon)
|
||||
}
|
||||
function dataevent(v) {
|
||||
let idx = $findIndex(data.value, {id: v.id})
|
||||
idx<0? data.value.push(v) : data.value[idx] = v
|
||||
doSelect(v)
|
||||
}
|
||||
function viewInfo() {
|
||||
if(!selected) return $dialog('Vui lòng lựa chọn trước khi xem thông tin.', 'Thông báo')
|
||||
let copy = $copy(props.viewaddon)
|
||||
copy.vbind = {row: selected}
|
||||
showmodal.value = copy
|
||||
}
|
||||
function getPos() {
|
||||
switch(props.position) {
|
||||
case 'is-top-left':
|
||||
pos = 'is-up is-left'
|
||||
break;
|
||||
case 'is-top-right':
|
||||
pos = 'is-up is-right'
|
||||
break;
|
||||
case 'is-bottom-left':
|
||||
pos = 'is-right'
|
||||
break;
|
||||
case 'is-bottom-right':
|
||||
pos = 'is-right'
|
||||
break;
|
||||
}
|
||||
}
|
||||
initData()
|
||||
</script>
|
||||
43
components/SvgIcon.vue
Normal file
43
components/SvgIcon.vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<nuxt-img loading="lazy" :alt="alt" :class="`svg-${type || 'findata'}`" :style="`width: ${size || 26}px;`" :src="`/icon/${name || 'check.svg'}`"/>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['name', 'size', 'type', 'alt']
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.svg-primary {
|
||||
filter: brightness(0) saturate(100%) invert(48%) sepia(97%) saturate(2023%) hue-rotate(188deg) brightness(98%) contrast(89%);
|
||||
}
|
||||
.svg-danger {
|
||||
filter: brightness(0) saturate(100%) invert(16%) sepia(100%) saturate(2983%) hue-rotate(351deg) brightness(101%) contrast(131%);
|
||||
}
|
||||
.svg-findata {
|
||||
filter: brightness(0) saturate(100%) invert(61%) sepia(85%) saturate(1880%) hue-rotate(340deg) brightness(101%) contrast(101%);
|
||||
}
|
||||
.svg-warning {
|
||||
filter: invert(86%) sepia(24%) saturate(5381%) hue-rotate(347deg) brightness(100%) contrast(103%);
|
||||
}
|
||||
.svg-blue {
|
||||
filter: invert(9%) sepia(98%) saturate(7147%) hue-rotate(248deg) brightness(94%) contrast(145%);
|
||||
}
|
||||
.svg-green {
|
||||
filter: invert(43%) sepia(99%) saturate(1326%) hue-rotate(88deg) brightness(97%) contrast(95%);
|
||||
}
|
||||
.svg-grey {
|
||||
filter: invert(100%) sepia(0%) saturate(213%) hue-rotate(133deg) brightness(86%) contrast(93%);
|
||||
}
|
||||
.svg-gray {
|
||||
filter: invert(35%) sepia(10%) saturate(18%) hue-rotate(338deg) brightness(97%) contrast(82%);
|
||||
}
|
||||
.svg-gray1 {
|
||||
filter: invert(34%) sepia(6%) saturate(71%) hue-rotate(315deg) brightness(95%) contrast(88%);
|
||||
}
|
||||
.svg-white {
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
.svg-black {
|
||||
filter: invert(0%) sepia(100%) saturate(0%) hue-rotate(235deg) brightness(107%) contrast(107%);
|
||||
}
|
||||
</style>
|
||||
14
components/Tooltip.vue
Normal file
14
components/Tooltip.vue
Normal file
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<span class="tooltip">
|
||||
<span v-html="props.html"></span>
|
||||
<span class="tooltiptext" v-html="props.tooltip"></span>
|
||||
</span>
|
||||
</template>
|
||||
<script setup>
|
||||
import { defineAsyncComponent } from 'vue';
|
||||
var props = defineProps({
|
||||
html: String,
|
||||
tooltip: String,
|
||||
width: Number
|
||||
})
|
||||
</script>
|
||||
122
components/TopMenu.vue
Executable file
122
components/TopMenu.vue
Executable file
@@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<nav class="navbar is-fixed-top has-shadow px-3" role="navigation">
|
||||
<div class="navbar-brand mr-3">
|
||||
<span class="navbar-item mr-3">
|
||||
<SvgIcon v-bind="{ name: 'dot.svg', size: 18, type: 'green' }"</SvgIcon>
|
||||
<span class="fsb-20" style="color:#008000">{{$dayjs().format('DD/MM')}}</span>
|
||||
</span>
|
||||
<span class="navbar-item header-logo" aria-label="về trang chủ"></span>
|
||||
<a role="button" class="navbar-burger" id="burger" aria-label="menu" aria-expanded="false" data-target="navMenu" @click="handleClick()">
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="navbar-menu" id="navMenu">
|
||||
<div class="navbar-start">
|
||||
<template v-for="(v,i) in leftmenu" :key="i" :id="v.code">
|
||||
<a class="navbar-item" v-if="!v.submenu" @click="changeTab(v)">
|
||||
<span :class="`fsb-17 ${currentTab.code===v.code? 'activetab' : ''}`">{{ v[lang] }}</span>
|
||||
</a>
|
||||
<div class="navbar-item has-dropdown is-hoverable" v-else>
|
||||
<a class="navbar-item" @click="changeTab(v)">
|
||||
<span :class="`icon-text ${currentTab.code===v.code? 'activetab' : ''}`">
|
||||
<span class="fsb-17">{{v[lang]}}</span>
|
||||
<SvgIcon style="padding-top:4px;" v-bind="{name: 'down2.svg',
|
||||
type: currentTab.code===v.code? 'white' : 'dark', size: 15}">
|
||||
</SvgIcon>
|
||||
</span>
|
||||
</a>
|
||||
<div class="navbar-dropdown has-background-light">
|
||||
<a
|
||||
class="navbar-item has-background-light fs-15 has-text-black py-1 border-bottom"
|
||||
v-for="x in v.submenu"
|
||||
@click="changeTab(v, x)"
|
||||
>
|
||||
{{ x[lang] }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="navbar-end">
|
||||
<!-- <span class="navbar-item">
|
||||
<LanguageToggle @langChanged="changeLang"></LanguageToggle>
|
||||
</span> -->
|
||||
<a class="navbar-item" @click="changeTab(tabConfig)">
|
||||
<SvgIcon v-bind="{name: 'configuration.svg', type: 'findata', size: 24}"></SvgIcon>
|
||||
</a>
|
||||
<a class="navbar-item" @click="openProfile()" v-if="avatar">
|
||||
<Avatarbox v-bind="avatar" ></Avatarbox>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
<script setup>
|
||||
import { onMounted } from 'vue'
|
||||
import { useStore } from '~/stores/index'
|
||||
import { useRoute } from 'vue-router'
|
||||
const router = useRouter()
|
||||
const store = useStore()
|
||||
const route = useRoute()
|
||||
const emit = defineEmits(['changetab', 'langChanged'])
|
||||
const { $clone, $find, $filter } = useNuxtApp()
|
||||
var lang = ref(store.lang)
|
||||
var menu = $filter(store.common, {category: 'topmenu'})
|
||||
menu.map(v=>{
|
||||
let arr = $filter(store.common, {category: 'submenu', classify: v.code})
|
||||
v.submenu = arr.length>0? arr : null
|
||||
})
|
||||
var leftmenu = $filter(store.common, {category: 'topmenu', classify: 'left'})
|
||||
var currentTab = ref(leftmenu[0])
|
||||
var subTab = ref()
|
||||
var tabConfig = $find(menu, {code: 'configuration'})
|
||||
var avatar = ref()
|
||||
var isAdmin = ref()
|
||||
const handleClick = function() {
|
||||
const target = document.getElementById('burger');
|
||||
target.classList.toggle('is-active');
|
||||
const target1 = document.getElementById('navMenu');
|
||||
target1.classList.toggle('is-active');
|
||||
}
|
||||
const closeMenu = function() {
|
||||
if(!document) return
|
||||
const target = document.getElementById('burger');
|
||||
const target1 = document.getElementById('navMenu');
|
||||
if(!target) return
|
||||
if(target.classList.contains('is-active')) {
|
||||
target.classList.remove('is-active')
|
||||
target1.classList.remove('is-active')
|
||||
}
|
||||
}
|
||||
function changeLang(val) {
|
||||
lang.value = val
|
||||
emit('langChanged')
|
||||
}
|
||||
function changeTab(tab, subtab) {
|
||||
currentTab.value = tab
|
||||
subTab.value = subtab
|
||||
emit('changetab', tab, subtab)
|
||||
closeMenu()
|
||||
let query = subtab? {tab: tab.code, subtab: subtab.code} : {tab: tab.code}
|
||||
router.push({query: query})
|
||||
}
|
||||
function openProfile() {
|
||||
let modal = {component: 'user/Profile', width: '1100px', height: '400px', title: 'User profile'}
|
||||
store.commit('showmodal', modal)
|
||||
}
|
||||
let found = route.query.tab? $find(menu, {code: route.query.tab}) : null
|
||||
changeTab(found || leftmenu[0])
|
||||
onMounted(()=> {
|
||||
if(!store.login) return
|
||||
avatar.value = {image: null, text: store.login.fullname.substring(0,1).toUpperCase(), size: 'two', type: 'findata'}
|
||||
isAdmin.value = store.login.type__code==='admin'
|
||||
})
|
||||
watch(() => store.login, (newVal, oldVal) => {
|
||||
if(!newVal) return
|
||||
avatar.value = {image: null, text: store.login.fullname.substring(0,1).toUpperCase(), size: 'two', type: 'findata'}
|
||||
isAdmin.value = store.login.type__code==='admin'
|
||||
})
|
||||
</script>
|
||||
15
components/common/Avatarbox.vue
Normal file
15
components/common/Avatarbox.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div :class="`cbox-${type}-${size} mx-0 px-0`" @click="$emit('justclick')" :style="image? 'border: none' : ''">
|
||||
<figure class="image" v-if="image">
|
||||
<img class="is-rounded" :src="`${$path()}download?name=${image}`">
|
||||
</figure>
|
||||
<div v-else>
|
||||
<span>{{text}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['text', 'image', 'type', 'size']
|
||||
}
|
||||
</script>
|
||||
36
components/common/Editor.vue
Normal file
36
components/common/Editor.vue
Normal file
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<ClientOnly>
|
||||
<QuillEditor v-model:content="content" content-type="html" theme="snow" :toolbar="toolbarOptions" @text-change="textChange"
|
||||
style="font-size: 16px; height: 450px;" />
|
||||
</ClientOnly>
|
||||
</template>
|
||||
<script setup>
|
||||
import { QuillEditor } from '@vueup/vue-quill'
|
||||
import '@vueup/vue-quill/dist/vue-quill.snow.css'
|
||||
const emit = defineEmits(['content', 'modalevent'])
|
||||
var props = defineProps({
|
||||
text: String,
|
||||
row: Object,
|
||||
pagename: String,
|
||||
api: String
|
||||
})
|
||||
// Custom toolbar options
|
||||
const toolbarOptions = [
|
||||
[{ header: [1, 2, 3, 4, 5, 6, false] }],
|
||||
['bold', 'italic', 'underline', 'strike'],
|
||||
['blockquote', 'code-block'],
|
||||
[{ header: 1 }, { header: 2 }],
|
||||
[{ list: 'ordered' }, { list: 'bullet' }],
|
||||
[{ script: 'sub' }, { script: 'super' }],
|
||||
[{ indent: '-1' }, { indent: '+1' }],
|
||||
[{ color: [] }, { background: [] }],
|
||||
[{ align: [] }],
|
||||
['clean'],
|
||||
['link', 'image', 'video']
|
||||
]
|
||||
var content = props.text
|
||||
function textChange() {
|
||||
emit('content', content)
|
||||
emit('modalevent', {name: 'content', data: content})
|
||||
}
|
||||
</script>
|
||||
37
components/common/InputEmail.vue
Normal file
37
components/common/InputEmail.vue
Normal file
@@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<div class="control has-icons-left">
|
||||
<input :class="`input ${error? 'is-danger' : ''} ${disabled? 'has-text-black' : ''}`" type="text"
|
||||
:placeholder="placeholder || ''" v-model="value" @keyup="doCheck" :disabled="disabled || false">
|
||||
<span class="icon is-left">
|
||||
<SvgIcon v-bind="{name: 'email.svg', type: 'gray', size: 21}"></SvgIcon>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['record', 'attr', 'placeholder', 'disabled'],
|
||||
data() {
|
||||
return {
|
||||
value: this.record[this.attr]? this.$copy(this.record[this.attr]) : undefined,
|
||||
error: undefined
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
record: function(newVal) {
|
||||
this.value = this.record[this.attr]? this.$copy(this.record[this.attr]) : undefined
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
doCheck() {
|
||||
if(this.$empty(this.value)) {
|
||||
this.value = undefined
|
||||
this.error = false
|
||||
return this.$emit('email', null)
|
||||
}
|
||||
let check = this.$errEmail(this.value)
|
||||
this.error = check? true : false
|
||||
this.$emit('email', this.value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
40
components/common/InputNumber.vue
Normal file
40
components/common/InputNumber.vue
Normal file
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<div class="control has-icons-left">
|
||||
<input :class="`input ${disabled? 'has-text-black' : ''}`" type="text" :placeholder="placeholder || ''" v-model="value" @keyup="doCheck"
|
||||
:disabled="disabled || false">
|
||||
<span class="icon is-left">
|
||||
<SvgIcon v-bind="{name: 'calculator.svg', type: 'gray', size: 22}"></SvgIcon>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['record', 'attr', 'placeholder', 'disabled'],
|
||||
data() {
|
||||
return {
|
||||
value: this.record[this.attr]? this.$copy(this.record[this.attr]) : undefined,
|
||||
timer: undefined
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if(this.value) this.value = this.$numtoString(this.value)
|
||||
},
|
||||
watch: {
|
||||
record: function(newVal) {
|
||||
this.value = this.$numtoString(this.record[this.attr])
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
doCheck() {
|
||||
if(this.timer) clearTimeout(this.timer)
|
||||
this.timer = setTimeout(()=>this.checkChange(), 500)
|
||||
},
|
||||
checkChange() {
|
||||
if(!this.$empty(this.value)) {
|
||||
this.value = this.$numtoString(this.$formatNumber(this.value))
|
||||
this.$emit('number', this.$formatNumber(this.value))
|
||||
} else this.$formatNumber('number', null)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
37
components/common/InputPhone.vue
Normal file
37
components/common/InputPhone.vue
Normal file
@@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<div class="control has-icons-left">
|
||||
<input :class="`input ${error? 'is-danger' : ''} ${disabled? 'has-text-black' : ''}`" type="text"
|
||||
:placeholder="placeholder || ''" v-model="value" @keyup="doCheck" :disabled="disabled || false">
|
||||
<span class="icon is-left">
|
||||
<SvgIcon v-bind="{name: 'phone.png', type: 'gray', size: 20}"></SvgIcon>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['record', 'attr', 'placeholder', 'disabled'],
|
||||
data() {
|
||||
return {
|
||||
value: this.record[this.attr]? this.$copy(this.record[this.attr]) : undefined,
|
||||
error: undefined
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
record: function(newVal) {
|
||||
this.value = this.record[this.attr]? this.$copy(this.record[this.attr]) : undefined
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
doCheck() {
|
||||
if(this.$empty(this.value)) {
|
||||
this.value = undefined
|
||||
this.error = false
|
||||
return this.$emit('phone', null)
|
||||
}
|
||||
let check = this.$errPhone(this.value)
|
||||
this.error = check? true : false
|
||||
this.$emit('phone', this.value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
107
components/common/JobView.vue
Normal file
107
components/common/JobView.vue
Normal file
@@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="columns is-multiline mx-0">
|
||||
<div class="column is-3">
|
||||
<div class="field">
|
||||
<label class="label">{{findLang('name')}}<b class="ml-1 has-text-danger">*</b></label>
|
||||
<div class="control">
|
||||
<input class="input has-text-black" type="text" placeholder="" disabled v-model="record.fullname">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-6">
|
||||
<div class="field">
|
||||
<label class="label">{{findLang('job')}}<b class="ml-1 has-text-danger">*</b></label>
|
||||
<div class="control">
|
||||
<input class="input has-text-black" type="text" placeholder="" disabled v-model="record.job__title">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-3">
|
||||
<div class="field">
|
||||
<label class="label">{{findLang('phone')}}<b class="ml-1 has-text-danger">*</b></label>
|
||||
<div class="control">
|
||||
<input class="input has-text-black" type="text" placeholder="" disabled v-model="record.phone">
|
||||
</div>
|
||||
<p class="help is-danger" v-if="errors.phone">{{ errors.phone }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<div class="field">
|
||||
<label class="label">Email<b class="ml-1 has-text-danger">*</b></label>
|
||||
<div class="control">
|
||||
<input class="input has-text-black" type="text" disabled placeholder="" v-model="record.email">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-5">
|
||||
<div class="field">
|
||||
<label class="label">{{findLang('address')}}<b class="ml-1 has-text-danger">*</b></label>
|
||||
<div class="control">
|
||||
<input class="input has-text-black" type="text" disabled placeholder="" v-model="record.address">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-3">
|
||||
<div class="field">
|
||||
<label class="label">{{findLang('apply-date')}}<b class="ml-1 has-text-danger">*</b></label>
|
||||
<div class="control">
|
||||
<input class="input has-text-black" type="text" placeholder="" disabled :value="$dayjs(record.create_time).format('DD/MM/YYYY hh:mm')">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-9">
|
||||
<div class="field">
|
||||
<label class="label">Link<b class="ml-1 has-text-danger">*</b></label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" disabled placeholder="" v-model="record.link">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-3">
|
||||
<div class="field">
|
||||
<label class="label">{{findLang('status')}}<b class="ml-1 has-text-danger">*</b></label>
|
||||
<div class="control">
|
||||
<SearchBox v-bind="{api:'applyresult', field: store.lang==='en'? 'en' : 'name', column:[store.lang==='en'? 'en' : 'name'],
|
||||
first: true, optionid: record.result, sort: 'name', position: 'is-top-left'}" @option="selected('_result', $event)"></SearchBox>
|
||||
</div>
|
||||
<p class="help is-danger" v-if="errors.url_web">{{ errors.url_web }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-12">
|
||||
<div class="mt-3">
|
||||
<button class="button is-primary has-text-white" @click="save()">{{findLang('save')}}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { useStore } from '~/stores/index'
|
||||
export default {
|
||||
setup() {
|
||||
const store = useStore()
|
||||
return { store }
|
||||
},
|
||||
props: ['pagename', 'row'],
|
||||
data() {
|
||||
return {
|
||||
errors: {},
|
||||
record: this.$copy(this.row || {})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
findLang(code) {
|
||||
let found = this.$find(this.store.common, {code: code})
|
||||
return found? found[this.store.lang] : null
|
||||
},
|
||||
selected(attr, obj) {
|
||||
this.record.result = obj.id
|
||||
},
|
||||
async save() {
|
||||
let found = this.$findapi('jobapply')
|
||||
await this.$updaterow('jobapply', this.record, found.params.values, this.pagename)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
121
components/common/NoteInfo.vue
Normal file
121
components/common/NoteInfo.vue
Normal file
@@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<div>
|
||||
<template v-if="data">
|
||||
<article class="message is-findata" v-if="data.length===0">
|
||||
<div class="message-body py-2 fs-16">
|
||||
Chưa có <b>ghi chú</b> nào được lưu
|
||||
</div>
|
||||
</article>
|
||||
<template v-else>
|
||||
<article class="media" v-for="(v,i) in data">
|
||||
<figure class="media-left">
|
||||
<Avatarbox v-bind="{text: v.user__fullname.substring(0,1).toUpperCase(), size: 'two', type: 'findata'}" />
|
||||
</figure>
|
||||
<div class="media-content">
|
||||
<div>
|
||||
<p class="fs-15">
|
||||
{{ v.detail }}
|
||||
</p>
|
||||
<p class="mt-1 has-text-grey">
|
||||
<span class="icon-text">
|
||||
<span>{{v.user__fullname}}</span>
|
||||
<span class="ml-3">{{ $dayjs(v['create_time']).fromNow(true) }}</span>
|
||||
<template v-if="login.id===v.user">
|
||||
<a class="ml-3" @click="edit(v)">
|
||||
<SvgIcon v-bind="{name: 'pen1.svg', type: 'gray', size: 22}"></SvgIcon>
|
||||
</a>
|
||||
<a class="ml-3" @click="askConfirm(v, i)">
|
||||
<SvgIcon v-bind="{name: 'bin.svg', type: 'gray', size: 22}"></SvgIcon>
|
||||
</a>
|
||||
</template>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
</template>
|
||||
<div class="field is-grouped mt-3">
|
||||
<div class="control is-expanded">
|
||||
<textarea class="textarea" rows="1" placeholder="Viết ghi chú tại đây" v-model="detail"></textarea>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button class="button is-primary has-text-white" @click="save()">Lưu</button>
|
||||
</div>
|
||||
</div>
|
||||
<Modal @close="showmodal=undefined" v-bind="showmodal" v-if="showmodal" @confirm="confirm()"></Modal>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['row', 'api', 'pagename'],
|
||||
data() {
|
||||
return {
|
||||
data: undefined,
|
||||
detail: undefined,
|
||||
vbind2: {image: undefined, text: 'ABC', size: 'two', type: 'findata'},
|
||||
current: undefined,
|
||||
showmodal: undefined,
|
||||
obj: undefined
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
if(!this.row) return
|
||||
this.data = await this.$getdata(this.api, {ref: this.row.id})
|
||||
},
|
||||
computed: {
|
||||
login: {
|
||||
get: function() {return this.$store.state.login},
|
||||
set: function(val) {this.$store.commit("updateLogin", {login: val})}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async save() {
|
||||
if(this.$empty(this.detail)) return this.$snackbar('Chưa nhập nội dung ghi chú')
|
||||
let data = {user: this.$store.state.login.id, detail: this.detail, ref: this.row.id}
|
||||
if(this.current) {
|
||||
data = this.$copy(this.current)
|
||||
data.detail = this.detail
|
||||
}
|
||||
let rs = data.id? await this.$updateapi(this.api, data) : await this.$insertapi(this.api, data)
|
||||
if(!rs) return
|
||||
this.detail = undefined
|
||||
if(this.current) {
|
||||
this.current = undefined
|
||||
let idx = this.$findIndex(this.data, {id: rs.id})
|
||||
this.$set(this.data, idx, rs)
|
||||
} else {
|
||||
this.data.push(rs)
|
||||
let rows = this.$copy(this.$store.state[this.pagename].data)
|
||||
let idx = this.$findIndex(rows, {id: this.row.id})
|
||||
let copy = this.$copy(this.row)
|
||||
copy.count_note += 1
|
||||
rows[idx] = copy
|
||||
this.$store.commit('updateState', {name: this.pagename, key: 'update', data: {data: rows}})
|
||||
}
|
||||
},
|
||||
edit(v) {
|
||||
this.current = this.$copy(v)
|
||||
this.detail = v.detail
|
||||
},
|
||||
askConfirm(v, i) {
|
||||
this.obj = {v: v, i: i}
|
||||
this.showmodal = {component: `dialog/Confirm`,vbind: {content: 'Bạn có muốn xóa ghi chú này không?', duration: 10},
|
||||
title: 'Xóa ghi chú', width: '500px', height: '100px'}
|
||||
},
|
||||
async confirm() {
|
||||
let v = this.obj.v
|
||||
let i = this.obj.i
|
||||
let rs = await this.$deleteapi(this.api, v.id)
|
||||
if(rs==='error') return
|
||||
this.$delete(this.data, i)
|
||||
let rows = this.$copy(this.$store.state[this.pagename].data)
|
||||
let idx = this.$findIndex(rows, {id: this.row.id})
|
||||
let copy = this.$copy(this.row)
|
||||
copy.count_note -= 1
|
||||
rows[idx] = copy
|
||||
this.$store.commit('updateState', {name: this.pagename, key: 'update', data: {data: rows}})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
14
components/common/Notebox.vue
Normal file
14
components/common/Notebox.vue
Normal file
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<span class="dot-primary" @click="doClick()">{{ row.count_note || '+' }}</span>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['row', 'api', 'pagename'],
|
||||
methods: {
|
||||
doClick() {
|
||||
let obj = {component: 'common/NoteInfo', title: 'Ghi chú', width: '50%', vbind: {row: this.row, api: this.api, pagename: this.pagename}}
|
||||
this.$emit('open', {name: 'dataevent', data: {modal: obj}})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
54
components/common/Phone.vue
Normal file
54
components/common/Phone.vue
Normal file
@@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<div>
|
||||
<p class="fsb-30">{{ text }}
|
||||
<a class="ml-5" @click="copy()">
|
||||
<SvgIcon v-bind="{name: 'copy.svg', type: 'gray', size: 24}"></SvgIcon>
|
||||
</a>
|
||||
</p>
|
||||
<p class="buttons mt-5 pt-2">
|
||||
<button class="button is-primary has-text-white mr" @click="call()">Call</button>
|
||||
<button class="button is-primary has-text-white mr-2" @click="sms()">SMS</button>
|
||||
<button class="button is-dark mr-2" @click="openZalo()">Zalo</button>
|
||||
</p>
|
||||
<Modal @close="showmodal=undefined" v-bind="showmodal" v-if="showmodal"></Modal>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['row', 'pagename'],
|
||||
data() {
|
||||
return {
|
||||
text: undefined,
|
||||
phone: this.row.customer__phone || this.row.party__phone || this.row.phone,
|
||||
showmodal: undefined
|
||||
}
|
||||
},
|
||||
created() {
|
||||
var format = function(s) {
|
||||
return `${s.slice(0,3)} ${s.slice(3,6)} ${s.slice(6, 20)}`
|
||||
}
|
||||
this.text = format(this.phone)
|
||||
},
|
||||
methods: {
|
||||
call() {
|
||||
window.open(`tel:${this.phone}`)
|
||||
},
|
||||
sms() {
|
||||
window.open(`sms:${this.phone}`)
|
||||
},
|
||||
sendSms() {
|
||||
let api = this.row.code.indexOf('CN')>=0? 'customersms' : undefined
|
||||
if(this.row.code.indexOf('LN')>=0) api = 'loansms'
|
||||
else if(this.row.code.indexOf('TS')>=0) api = 'collateralsms'
|
||||
this.showmodal = {component: 'user/Sms', title: 'Nhắn tin SMS', width: '50%', height: '400px',
|
||||
vbind: {row: this.row, pagename: this.pagename, api: api}}
|
||||
},
|
||||
copy() {
|
||||
this.$copyToClipboard(this.phone)
|
||||
},
|
||||
openZalo() {
|
||||
window.open(`https://zalo.me/${this.phone}`, '_blank')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
540
components/datatable/ContextMenu.vue
Normal file
540
components/datatable/ContextMenu.vue
Normal file
@@ -0,0 +1,540 @@
|
||||
<template>
|
||||
<span class="tooltip">
|
||||
<a
|
||||
class="mr-4"
|
||||
@click="checkFilter() ? false : $emit('modalevent', { name: 'dosort', data: 'az' })"
|
||||
>
|
||||
<SvgIcon
|
||||
v-bind="{ name: 'az.svg', type: checkFilter() ? 'grey' : 'primary', size: 22 }"
|
||||
></SvgIcon>
|
||||
</a>
|
||||
<span
|
||||
class="tooltiptext"
|
||||
style="top: 60%; bottom: unset; min-width: max-content; left: 25px"
|
||||
v-html="'Sắp xếp tăng dần'"
|
||||
></span>
|
||||
</span>
|
||||
<span class="tooltip">
|
||||
<a
|
||||
class="mr-4"
|
||||
@click="checkFilter() ? false : $emit('modalevent', { name: 'dosort', data: 'za' })"
|
||||
>
|
||||
<SvgIcon
|
||||
v-bind="{ name: 'az.svg', type: checkFilter() ? 'grey' : 'primary', size: 22 }"
|
||||
></SvgIcon>
|
||||
</a>
|
||||
<span
|
||||
class="tooltiptext"
|
||||
style="top: 60%; bottom: unset; min-width: max-content; left: 25px"
|
||||
>Sắp xếp giảm dần</span
|
||||
>
|
||||
</span>
|
||||
<span class="tooltip">
|
||||
<a class="mr-4" @click="moveLeft()">
|
||||
<SvgIcon v-bind="{ name: 'left5.png', type: 'primary', size: 22 }"></SvgIcon>
|
||||
</a>
|
||||
<span
|
||||
class="tooltiptext"
|
||||
style="top: 60%; bottom: unset; min-width: max-content; left: 25px"
|
||||
>Chuyển cột sang trái</span
|
||||
>
|
||||
</span>
|
||||
<span class="tooltip">
|
||||
<a class="mr-4" @click="moveRight()">
|
||||
<SvgIcon v-bind="{ name: 'right5.png', type: 'primary', size: 22 }"></SvgIcon>
|
||||
</a>
|
||||
<span
|
||||
class="tooltiptext"
|
||||
style="top: 60%; bottom: unset; min-width: max-content; left: 25px"
|
||||
>Chuyển cột sang phải</span
|
||||
>
|
||||
</span>
|
||||
<span class="tooltip">
|
||||
<a class="mr-4" @click="resizeWidth()">
|
||||
<SvgIcon v-bind="{ name: 'thick.svg', type: 'primary', size: 22 }"></SvgIcon>
|
||||
</a>
|
||||
<span
|
||||
class="tooltiptext"
|
||||
style="top: 60%; bottom: unset; min-width: max-content; left: 25px"
|
||||
>Tăng độ rộng cột</span
|
||||
>
|
||||
</span>
|
||||
<span class="tooltip">
|
||||
<a class="mr-4" @click="resizeWidth(true)">
|
||||
<SvgIcon v-bind="{ name: 'thin.svg', type: 'primary', size: 23 }"></SvgIcon>
|
||||
</a>
|
||||
<span
|
||||
class="tooltiptext"
|
||||
style="top: 60%; bottom: unset; min-width: max-content; left: 25px"
|
||||
>Giảm độ rộng cột</span
|
||||
>
|
||||
</span>
|
||||
<span class="tooltip">
|
||||
<a class="mr-4" @click="hideField()">
|
||||
<SvgIcon v-bind="{ name: 'eye-off.svg', type: 'primary', size: 23 }"></SvgIcon>
|
||||
</a>
|
||||
<span
|
||||
class="tooltiptext"
|
||||
style="top: 60%; bottom: unset; min-width: max-content; left: 25px"
|
||||
>Ẩn cột</span
|
||||
>
|
||||
</span>
|
||||
<!-- <template v-if="store.login ? store.login.is_admin : false"> -->
|
||||
<span class="tooltip">
|
||||
<a class="mr-4" @click="currentField.mandatory ? false : doRemove()">
|
||||
<SvgIcon v-bind="{ name: 'bin.svg', type: 'primary', size: 23 }"></SvgIcon>
|
||||
</a>
|
||||
<span
|
||||
class="tooltiptext"
|
||||
style="top: 60%; bottom: unset; min-width: max-content; left: 25px"
|
||||
>Xóa cột</span
|
||||
>
|
||||
</span>
|
||||
<span class="tooltip">
|
||||
<a
|
||||
class="mr-4"
|
||||
:class="currentField.format === 'number' ? null : 'has-text-grey-light'"
|
||||
@click="
|
||||
currentField.format === 'number'
|
||||
? $emit('modalevent', { name: 'copyfield', data: currentField })
|
||||
: false
|
||||
"
|
||||
>
|
||||
<SvgIcon v-bind="{ name: 'copy.svg', type: 'primary', size: 22 }"></SvgIcon>
|
||||
</a>
|
||||
<span
|
||||
class="tooltiptext"
|
||||
style="top: 60%; bottom: unset; min-width: max-content; left: 25px"
|
||||
>Sao chép cột</span
|
||||
>
|
||||
</span>
|
||||
<span class="tooltip">
|
||||
<a class="mr-4" @click="fieldList()">
|
||||
<SvgIcon v-bind="{ name: 'menu4.png', type: 'primary', size: 22 }"></SvgIcon>
|
||||
</a>
|
||||
<span
|
||||
class="tooltiptext"
|
||||
style="top: 60%; bottom: unset; min-width: max-content; left: 25px"
|
||||
>Danh sách cột</span
|
||||
>
|
||||
</span>
|
||||
<span class="tooltip">
|
||||
<a class="mr-4" @click="createField()">
|
||||
<SvgIcon v-bind="{ name: 'add.png', type: 'primary', size: 22 }"></SvgIcon>
|
||||
</a>
|
||||
<span
|
||||
class="tooltiptext"
|
||||
style="top: 60%; bottom: unset; min-width: max-content; left: 25px"
|
||||
>Tạo cột mới</span
|
||||
>
|
||||
</span>
|
||||
<span class="tooltip">
|
||||
<a class="mr-4" @click="tableOption()">
|
||||
<SvgIcon v-bind="{ name: 'more.svg', type: 'primary', size: 22 }"></SvgIcon>
|
||||
</a>
|
||||
<span
|
||||
class="tooltiptext"
|
||||
style="top: 60%; bottom: unset; min-width: max-content; left: 25px"
|
||||
>Tùy chọn bảng</span
|
||||
>
|
||||
</span>
|
||||
<span class="tooltip">
|
||||
<a class="mr-4" @click="saveSetting()">
|
||||
<SvgIcon v-bind="{ name: 'save.svg', type: 'primary', size: 22 }"></SvgIcon>
|
||||
</a>
|
||||
<span
|
||||
class="tooltiptext"
|
||||
style="top: 60%; bottom: unset; min-width: max-content; left: 25px"
|
||||
>Lưu thiết lập</span
|
||||
>
|
||||
</span>
|
||||
<!-- </template> -->
|
||||
<div class="panel-tabs mb-2">
|
||||
<a
|
||||
v-for="(v, i) in getMenu().filter((x) =>
|
||||
currentField.format === 'number'
|
||||
? currentField.formula
|
||||
? true
|
||||
: x.code !== 'formula'
|
||||
: !['filter', 'formula'].find((y) => y === x.code)
|
||||
)"
|
||||
:key="i"
|
||||
:class="selectTab.code === v.code ? 'is-active' : 'has-text-primary'"
|
||||
@click="changeTab(v)"
|
||||
>
|
||||
{{ v.name }}
|
||||
</a>
|
||||
</div>
|
||||
<div v-if="currentTab === 'detail'">
|
||||
<p class="fs-14 mt-3">
|
||||
<strong> Tên trường: </strong> {{ currentField.name }}
|
||||
<a @click="copyContent(currentField.name)">
|
||||
<span class="tooltip">
|
||||
<SvgIcon
|
||||
class="ml-1"
|
||||
v-bind="{ name: 'copy.svg', type: 'primary', size: 16 }"
|
||||
></SvgIcon>
|
||||
<span
|
||||
class="tooltiptext"
|
||||
style="top: 60%; bottom: unset; min-width: max-content; left: 25px"
|
||||
>Copy</span
|
||||
>
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
<label class="label fs-14 mt-3">Mô tả<span class="has-text-danger"> *</span></label>
|
||||
<div class="field has-addons">
|
||||
<div class="control is-expanded">
|
||||
<input
|
||||
class="input fs-14"
|
||||
type="text"
|
||||
@change="changeLabel($event.target.value)"
|
||||
v-model="label"
|
||||
/>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button class="button" @click="editLabel()">
|
||||
<SvgIcon v-bind="{ name: 'pen.svg', type: 'dark', size: 19 }"></SvgIcon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<p class="help is-danger" v-if="errors.find((v) => v.name === 'label')">
|
||||
{{ errors.find((v) => v.name === "label").msg }}
|
||||
</p>
|
||||
<div class="field mt-3">
|
||||
<label class="label fs-14"
|
||||
>Kiểu dữ liệu<span class="has-text-danger"> * </span></label
|
||||
>
|
||||
<div class="control fs-14">
|
||||
<span class="mr-4" v-for="(v, i) in datatype">
|
||||
<span class="icon-text" v-if="radioType === v">
|
||||
<SvgIcon
|
||||
v-bind="{ name: 'radio-checked.svg', type: 'gray', size: 22 }"
|
||||
></SvgIcon>
|
||||
</span>
|
||||
{{ v.name }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field is-horizontal" v-if="currentField.format === 'number'">
|
||||
<div class="field-body">
|
||||
<div class="field">
|
||||
<label class="label fs-14"
|
||||
>Đơn vị <span class="has-text-danger"> * </span>
|
||||
</label>
|
||||
<div class="control">
|
||||
<SearchBox
|
||||
v-bind="{
|
||||
vdata: moneyunit,
|
||||
field: 'name',
|
||||
column: ['name'],
|
||||
first: true,
|
||||
position: 'is-top-left',
|
||||
}"
|
||||
@option="selected('_account', $event)"
|
||||
></SearchBox>
|
||||
</div>
|
||||
<p class="help has-text-danger" v-if="errors.find((v) => v.name === 'unit')">
|
||||
{{ errors.find((v) => v.name === "unit").msg }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="field is-narrow">
|
||||
<label class="label fs-14">Phần thập phân</label>
|
||||
<div class="control">
|
||||
<input
|
||||
class="input"
|
||||
type="text"
|
||||
placeholder=""
|
||||
v-model="decimal"
|
||||
@input="changeDecimal($event.target.value)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field is-horizontal mt-3">
|
||||
<div class="field-body">
|
||||
<div class="field">
|
||||
<label class="label fs-14">Định dạng nâng cao</label>
|
||||
<p class="control fs-14">
|
||||
<span
|
||||
class="mr-4"
|
||||
v-for="(v, i) in colorchoice.filter((v) => v.code !== 'condition')"
|
||||
>
|
||||
<a class="icon-text" @click="changeTemplate(v)">
|
||||
<SvgIcon
|
||||
v-bind="{
|
||||
name: `radio-${radioTemplate === v.code ? '' : 'un'}checked.svg`,
|
||||
type: 'gray',
|
||||
size: 22,
|
||||
}"
|
||||
>
|
||||
</SvgIcon>
|
||||
</a>
|
||||
{{ v.name }}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt-3" v-if="radioTemplate === 'option'">
|
||||
<button class="button is-primary is-small has-text-white" @click="showSidebar()">
|
||||
<span class="fs-14">{{
|
||||
`${currentField.template ? "Sửa" : "Tạo"} định dạng`
|
||||
}}</span>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
<div v-else-if="currentTab === 'value'">
|
||||
<ScrollBox
|
||||
v-bind="{
|
||||
data: props.filterData,
|
||||
name: props.field.name,
|
||||
maxheight: '380px',
|
||||
perpage: 20,
|
||||
}"
|
||||
@selected="doSelect"
|
||||
/>
|
||||
</div>
|
||||
<Modal
|
||||
v-bind="showmodal"
|
||||
v-if="showmodal"
|
||||
@label="changeLabel"
|
||||
@updatefields="updateFields"
|
||||
@close="close"
|
||||
></Modal>
|
||||
</template>
|
||||
<script setup>
|
||||
import { useStore } from "@/stores/index";
|
||||
import ScrollBox from "~/components/datatable/ScrollBox";
|
||||
const store = useStore();
|
||||
const {
|
||||
$copy,
|
||||
$stripHtml,
|
||||
$clone,
|
||||
$arrayMove,
|
||||
$snackbar,
|
||||
$copyToClipboard,
|
||||
} = useNuxtApp();
|
||||
var props = defineProps({
|
||||
pagename: String,
|
||||
field: Object,
|
||||
filters: Object,
|
||||
filterData: Object,
|
||||
width: String,
|
||||
});
|
||||
const emit = defineEmits(["modalevent", "changepos", "close"]);
|
||||
var colorchoice = store.colorchoice;
|
||||
var errors = [];
|
||||
var currentTab = ref("value");
|
||||
var currentField = $copy(props.field);
|
||||
var pagedata = store[props.pagename];
|
||||
var fields = [];
|
||||
var label = currentField.label;
|
||||
var showmodal = ref();
|
||||
const checkFilter = function () {};
|
||||
const getMenu = function () {
|
||||
let field = currentField;
|
||||
field.disable = "display,tooltip";
|
||||
let arr = field.disable ? field.disable.split(",") : undefined;
|
||||
let array = arr
|
||||
? store.menuchoice.filter((v) => arr.findIndex((x) => x === v.code) < 0)
|
||||
: store.menuchoice;
|
||||
//if (store.login ? !(store.login.is_admin === false) : true) array = [array[0]];
|
||||
return array;
|
||||
};
|
||||
var selectTab = getMenu()[0];
|
||||
var datatype = store.datatype;
|
||||
var current = 1;
|
||||
var value1 = undefined;
|
||||
var value2 = undefined;
|
||||
var moneyunit = store.moneyunit;
|
||||
var radioType = store.datatype.find((v) => v.code === currentField.format);
|
||||
var selectUnit =
|
||||
currentField.format === "number"
|
||||
? moneyunit.find((v) => v.detail === currentField.unit)
|
||||
: undefined;
|
||||
var bgcolor = undefined;
|
||||
var radioBGcolor = colorchoice.find((v) => v.code === "none");
|
||||
var color = undefined;
|
||||
var radioColor = colorchoice.find((v) => v.code === "none");
|
||||
var textsize = undefined;
|
||||
var radioSize = colorchoice.find((v) => v.code === "none");
|
||||
var minwidth = undefined;
|
||||
var radioWidth = colorchoice.find((v) => v.code === "none");
|
||||
var radioMaxWidth = colorchoice.find((v) => v.code === "none");
|
||||
var maxwidth = undefined;
|
||||
var selectAlign = undefined;
|
||||
var radioAlign = colorchoice.find((v) => v.code === "none");
|
||||
var radioTemplate = ref(
|
||||
colorchoice.find((v) => v.code === (currentField.template ? "option" : "none"))["code"]
|
||||
);
|
||||
var selectPlacement = store.placement.find((v) => v.code === "is-right");
|
||||
var selectScheme = store.colorscheme.find((v) => v.code === "is-primary");
|
||||
var radioTooltip = store.colorchoice.find((v) => v.code === "none");
|
||||
var selectField = undefined;
|
||||
var tags = currentField.tags
|
||||
? currentField.tags.map((v) => fields.find((x) => x.name === v))
|
||||
: [];
|
||||
var formula = currentField.formula ? currentField.formula : undefined;
|
||||
var decimal = currentField.decimal;
|
||||
let shortmenu = store.menuchoice.filter((x) =>
|
||||
currentField.format === "number"
|
||||
? currentField.formula
|
||||
? true
|
||||
: x.code !== "formula"
|
||||
: !["filter", "formula"].find((y) => y === x.code)
|
||||
);
|
||||
var selectTab = shortmenu.find((v) => selectTab.code === v.code)
|
||||
? selectTab
|
||||
: menuchoice.find((v) => v.code === "value");
|
||||
var search = undefined;
|
||||
// if(selectTab.code==='value') {
|
||||
// let self = this
|
||||
// setTimeout(function() {self.$refs[currentField.name]? self.$refs[currentField.name].focus() : false}, 50)
|
||||
// }
|
||||
//==============================================================
|
||||
function moveLeft() {
|
||||
let copy = $clone(pagedata);
|
||||
let i = copy.fields.findIndex((v) => v.name === props.field.name);
|
||||
let idx = i - 1 >= 0 ? i - 1 : copy.fields.length - 1;
|
||||
$arrayMove(copy.fields, i, idx);
|
||||
copy.update = { fields: copy.fields };
|
||||
store.commit(props.pagename, copy);
|
||||
emit("changepos");
|
||||
}
|
||||
function moveRight() {
|
||||
let copy = $clone(pagedata);
|
||||
let i = copy.fields.findIndex((v) => v.name === props.field.name);
|
||||
let idx = copy.fields.length - 1 > i ? i + 1 : 0;
|
||||
$arrayMove(copy.fields, i, idx);
|
||||
copy.update = { fields: copy.fields };
|
||||
store.commit(props.pagename, copy);
|
||||
emit("changepos");
|
||||
}
|
||||
function hideField() {
|
||||
let copy = $clone(store[props.pagename]);
|
||||
let found = copy.fields.find((v) => v.name === props.field.name);
|
||||
found.show = false;
|
||||
copy.update = { fields: copy.fields };
|
||||
store.commit(props.pagename, copy);
|
||||
emit("close");
|
||||
}
|
||||
function doRemove() {
|
||||
let copy = $clone(store[props.pagename]);
|
||||
let idx = copy.fields.findIndex((v) => v.name === props.field.name);
|
||||
copy.fields.splice(idx, 1);
|
||||
copy.update = { fields: copy.fields };
|
||||
store.commit(props.pagename, copy);
|
||||
emit("close");
|
||||
}
|
||||
function fieldList() {
|
||||
showmodal.value = {
|
||||
component: "datatable/TableOption",
|
||||
vbind: { pagename: props.pagename },
|
||||
title: "Danh sách cột",
|
||||
width: "50%",
|
||||
height: "630px",
|
||||
};
|
||||
}
|
||||
function tableOption() {
|
||||
showmodal.value = {
|
||||
component: "datatable/TableSetting",
|
||||
vbind: { pagename: props.pagename },
|
||||
title: "Tùy chọn bảng",
|
||||
width: "40%",
|
||||
height: "400px",
|
||||
};
|
||||
}
|
||||
const getFields = function () {
|
||||
fields = pagedata ? $copy(pagedata.fields) : [];
|
||||
fields.map(
|
||||
(v) => (v.caption = (v.label ? v.label.indexOf("<") >= 0 : false) ? v.name : v.label)
|
||||
);
|
||||
};
|
||||
const doSelect = function (evt) {
|
||||
emit("modalevent", { name: "selected", data: evt[props.field.name] });
|
||||
};
|
||||
const changeLabel = function (text) {
|
||||
currentField.label = text;
|
||||
updateFields(currentField);
|
||||
};
|
||||
function editLabel() {
|
||||
showmodal.value = {
|
||||
component: "datatable/EditLabel",
|
||||
width: "500px",
|
||||
height: "300px",
|
||||
vbind: { label: label },
|
||||
};
|
||||
}
|
||||
const changeTemplate = function (v) {
|
||||
radioTemplate.value = v.code;
|
||||
let copy = $copy(currentField);
|
||||
copy.template = v.code;
|
||||
updateFields(copy);
|
||||
};
|
||||
function createField() {
|
||||
showmodal.value = {
|
||||
component: "datatable/NewField",
|
||||
vbind: { pagename: props.pagename },
|
||||
title: "Tạo cột mới",
|
||||
width: "50%",
|
||||
height: "630px",
|
||||
};
|
||||
}
|
||||
function copyContent(value) {
|
||||
$copyToClipboard(value);
|
||||
}
|
||||
function close() {
|
||||
showmodal.value = undefined;
|
||||
}
|
||||
const updateFields = function (field, type) {
|
||||
let copy = $clone(store[props.pagename]);
|
||||
let idx = copy.fields.findIndex((v) => v.name === field.name);
|
||||
copy.fields[idx] = field;
|
||||
store.commit(props.pagename, copy);
|
||||
};
|
||||
const changeTab = function (v) {
|
||||
currentTab.value = v.code;
|
||||
selectTab = v;
|
||||
};
|
||||
const saveSetting = function () {
|
||||
showmodal.value = {
|
||||
component: "datatable/MenuSave",
|
||||
vbind: { pagename: props.pagename, classify: 4 },
|
||||
title: "Lưu thiết lập",
|
||||
width: "500px",
|
||||
height: "400px",
|
||||
};
|
||||
};
|
||||
const showSidebar = function () {
|
||||
let event = { name: "template", field: currentField };
|
||||
let title = "Danh sách cột";
|
||||
if (event.name === "bgcolor")
|
||||
title = `Đổi màu nền: ${event.field.name} / ${$stripHtml(event.field.label, 30)}`;
|
||||
else if (event.name === "color")
|
||||
title = `Đổi màu chữ: ${event.field.name} / ${$stripHtml(event.field.label, 30)}`;
|
||||
else if (event.name === "template")
|
||||
title = `Định dạng nâng cao: ${$stripHtml(event.field.label, 30)}`;
|
||||
showmodal.value = {
|
||||
component: "datatable/FormatOption",
|
||||
vbind: { event: event, currentField: currentField, pagename: props.pagename },
|
||||
width: "850px",
|
||||
height: "700px",
|
||||
title: title,
|
||||
};
|
||||
};
|
||||
function resizeWidth(minus) {
|
||||
let val = maxwidth || minwidth || 80;
|
||||
val = minus ? parseInt(val - 0.1 * val) : parseInt(val + 0.1 * val);
|
||||
if (val > 1000) return $snackbar("Độ rộng cột lớn hơn giới hạn cho phép");
|
||||
else if (val < 20) return $snackbar("Độ rộng cột nhỏ hơn giới hạn cho phép");
|
||||
radioMaxWidth = store.colorchoice.find((v) => v.code === "option");
|
||||
radioWidth = store.colorchoice.find((v) => v.code === "option");
|
||||
maxwidth = val;
|
||||
currentField.maxwidth = val;
|
||||
minwidth = val;
|
||||
currentField.minwidth = val;
|
||||
updateFields(currentField);
|
||||
}
|
||||
</script>
|
||||
431
components/datatable/CreateTemplate.vue
Normal file
431
components/datatable/CreateTemplate.vue
Normal file
@@ -0,0 +1,431 @@
|
||||
<template>
|
||||
<div v-if="docid">
|
||||
<div class="field is-horizontal">
|
||||
<div class="field-body">
|
||||
<div class="field">
|
||||
<label class="label">Đối tượng</label>
|
||||
<p class="control fs-14">
|
||||
<b-radio v-for="(v,i) in types" :key="i" v-model="type"
|
||||
:native-value="v" @input="changeType(v)">
|
||||
{{v.name}}
|
||||
</b-radio>
|
||||
</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">Kích cỡ</label>
|
||||
<p class="control fs-14">
|
||||
<b-radio v-for="(v,i) in sizes.filter(v=>type? (type.code==='tag'? v.code!=='is-small' : 1>0) : true)" :key="i" v-model="size"
|
||||
:native-value="v" @input="changeType(v)">
|
||||
{{v.name}}
|
||||
</b-radio>
|
||||
</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label" v-if="['tag'].find(v=>v===type.code)">Hình khối</label>
|
||||
<p class="control fs-14" v-if="['tag'].find(v=>v===type.code)">
|
||||
<b-radio v-for="(v,i) in shapes" :key="i" v-model="shape"
|
||||
:native-value="v" @input="changeType(v)">
|
||||
{{v.name}}
|
||||
</b-radio>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field is-horizontal" v-if="['tag'].find(v=>v===type.code)">
|
||||
<div class="field-body">
|
||||
<div class="field" v-if="type.code!=='tag'">
|
||||
<label class="label">Outline</label>
|
||||
<p class="control fs-14">
|
||||
<b-radio v-for="(v,i) in outlines" :key="i" v-model="outline"
|
||||
:native-value="v" @input="changeType(v)">
|
||||
{{v.name}}
|
||||
</b-radio>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tags" v-if="type.code==='tag'">
|
||||
<a :class="getClass(v)" v-for="(v,i) in colorscheme" :key="i"
|
||||
@click="doSelect(v)" :ref="'tag' + i"> {{v.name}} </a>
|
||||
</div>
|
||||
<div class="pt-2" v-else-if="type.code==='span'">
|
||||
<a class="mr-3" :class="getSpanClass(v)" v-for="(v,i) in colorscheme" :key="i"
|
||||
@click="doSelectSpan(v)" :ref="'span' + i"> {{v.name}} </a>
|
||||
</div>
|
||||
<div :class="`tabs is-boxed mt-5 mb-5 ${tab.code==='template'? '' : 'pb-2'}`">
|
||||
<ul>
|
||||
<li :class="tab.code===v.code? 'is-active' : ''"
|
||||
v-for="(v,i) in tabs" :key="i" @click="changeTab(v)"><a class="fs-15">{{v.name}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<template v-if="tab.code==='selected'">
|
||||
<a v-for="(v,i) in tags" :key="i" @click="selected=v">
|
||||
<div class="field is-grouped is-grouped-multiline mt-4">
|
||||
<p class="control">
|
||||
<a :class="v.class">
|
||||
{{v.name}}
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<input class="input is-small" type="text" v-model="v.name">
|
||||
</p>
|
||||
<p class="control">
|
||||
<a @click="remove(i)">
|
||||
<SvgIcon v-bind="{name: 'close.svg', type: 'danger', size: 22}"></SvgIcon>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control has-text-right ml-5" v-if="selected? selected.id===v.id : false">
|
||||
<SvgIcon v-bind="{name: 'tick.svg', type: 'primary', size: 22}"></SvgIcon>
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<template v-else-if="tab.code==='condition'">
|
||||
<div class="mb-5" v-if="selected">
|
||||
<b-radio v-for="(v,i) in conditions" :key="i" v-model="condition"
|
||||
:native-value="v" @input="changeCondition(v)">
|
||||
{{v.name}}
|
||||
</b-radio>
|
||||
</div>
|
||||
|
||||
<template v-if="condition? condition.code==='yes' : false">
|
||||
<div class="field mt-3">
|
||||
<label class="label fs-14">Chọn trường xây dựng biểu thức <span class="has-text-danger"> * </span> </label>
|
||||
<div class="control">
|
||||
<b-taginput
|
||||
size="is-small"
|
||||
v-model="tagsField"
|
||||
:data="pageData? pageData.fields.filter(v=>v.format==='number') : []"
|
||||
type="is-dark is-light"
|
||||
autocomplete
|
||||
:open-on-focus="true"
|
||||
field="name"
|
||||
icon="plus"
|
||||
placeholder="Chọn trường"
|
||||
>
|
||||
<template slot-scope="props">
|
||||
<span class="mr-3 has-text-danger has-text-weight-bold"> {{props.option.name}}</span>
|
||||
<span :class="tagsField.find(v=>v.id===props.option.id)? 'has-text-dark' : ''"> {{$stripHtml(props.option.label, 50)}} </span>
|
||||
</template>
|
||||
<template slot="empty">
|
||||
Không có trường thỏa mãn
|
||||
</template>
|
||||
</b-taginput>
|
||||
</div>
|
||||
<p class="help has-text-danger" v-if="errors.find(v=>v.name==='tagsField')"> {{errors.find(v=>v.name==='tagsField').message}} </p>
|
||||
</div>
|
||||
<div class="field mt-1" v-if="tagsField.length>0">
|
||||
<p class="help is-primary"> Click đúp vào để thêm vào biểu thức.</p>
|
||||
<div class="tagsField">
|
||||
<a @dblclick="expression = expression? (expression + ' ' + v.name) : v.name"
|
||||
class="tag is-rounded" v-for="(v,i) in tagsField" :key="i">
|
||||
<span class="tooltip">
|
||||
{{v.name}}
|
||||
<span class="tooltiptext">{{ $stripHtml(v.label) }}</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label fs-14">Biểu thức có dạng Đúng / Sai <span class="has-text-danger"> * </span> </label>
|
||||
<p class="control is-expanded">
|
||||
<input class="input" type="text" v-model="expression" placeholder="Tạo biểu thức tại đây">
|
||||
</p>
|
||||
<p class="help has-text-danger" v-if="errors.find(v=>v.name==='expression')"> {{errors.find(v=>v.name==='expression').message}} </p>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<template v-else-if="tab.code==='option' && selected">
|
||||
<div class="field is-horizontal border-bottom pb-2 mt-1">
|
||||
<div class="field-body">
|
||||
<div class="field">
|
||||
<label class="label fs-14">Màu nền </label>
|
||||
<p class="control fs-14">
|
||||
<b-radio v-for="(v,i) in colorchoice.filter(v=>v.code!=='condition')" :key="i" v-model="radioBGcolor"
|
||||
:native-value="v" @input="changeStyle()">
|
||||
{{v.name}}
|
||||
</b-radio>
|
||||
</p>
|
||||
</div>
|
||||
<div class="field" v-if="radioBGcolor? radioBGcolor.code==='option' : false">
|
||||
<label class="label fs-14"> Mã màu <span class="has-text-danger"> * </span> </label>
|
||||
<p class="control fs-14">
|
||||
<input type="color" v-model="bgcolor" @change="changeStyle()">
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field is-horizontal border-bottom pb-2">
|
||||
<div class="field-body">
|
||||
<div class="field">
|
||||
<label class="label fs-14">Màu chữ </label>
|
||||
<p class="control fs-14">
|
||||
<b-radio v-for="(v,i) in colorchoice.filter(v=>v.code!=='condition')" :key="i" v-model="radioColor"
|
||||
:native-value="v" @input="changeStyle()">
|
||||
{{v.name}}
|
||||
</b-radio>
|
||||
</p>
|
||||
</div>
|
||||
<div class="field" v-if="radioColor? radioColor.code==='option' : false">
|
||||
<label class="label fs-14"> Mã màu <span class="has-text-danger"> * </span> </label>
|
||||
<p class="control fs-14">
|
||||
<input type="color" v-model="color" @change="changeStyle()">
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field is-horizontal border-bottom pb-2">
|
||||
<div class="field-body">
|
||||
<div class="field">
|
||||
<label class="label fs-14">Cỡ chữ </label>
|
||||
<p class="control fs-14">
|
||||
<b-radio v-for="(v,i) in colorchoice.filter(v=>v.code!=='condition')" :key="i" v-model="radioSize"
|
||||
:native-value="v" @input="changeStyle()">
|
||||
{{v.name}}
|
||||
</b-radio>
|
||||
</p>
|
||||
</div>
|
||||
<div class="field" v-if="radioSize? radioSize.code==='option' : false">
|
||||
<label class="label fs-14"> Cỡ chữ <span class="has-text-danger"> * </span> </label>
|
||||
<p class="control fs-14">
|
||||
<input class="input is-small" type="text" placeholder="Nhập số" v-model="textsize" @change="changeStyle()">
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="tab.code==='template'">
|
||||
<p class="mb-3">
|
||||
<a @click="copyContent()" class="mr-6">
|
||||
<span class="icon-text">
|
||||
<SvgIcon class="mr-2" v-bind="{name: 'copy.svg', type: 'primary', siz: 18}"></SvgIcon>
|
||||
<span class="fs-16">Copy</span>
|
||||
</span>
|
||||
</a>
|
||||
<a @click="paste()" class="mr-6">
|
||||
<span class="icon-text">
|
||||
<SvgIcon class="mr-2" v-bind="{name: 'pen1.svg', type: 'primary', siz: 18}"></SvgIcon>
|
||||
<span class="fs-16">Paste</span>
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
<div>
|
||||
<textarea class="textarea fs-14" rows="8" v-model="text" @dblclick="doCheck"></textarea>
|
||||
</div>
|
||||
<p class="mt-5">
|
||||
<span class="icon-text fsb-18">
|
||||
Replace
|
||||
<SvgIcon v-bind="{name: 'right.svg', type: 'dark', size: 22}"></SvgIcon>
|
||||
</span>
|
||||
</p>
|
||||
<div class="field is-grouped mt-4">
|
||||
<div class="control">
|
||||
<p class="fsb-14 mb-1">Đoạn text</p>
|
||||
<input class="input" type="text" placeholder="" v-model="source">
|
||||
</div>
|
||||
<div class="control">
|
||||
<p class="fsb-14 mb-1">Thay bằng</p>
|
||||
<input class="input" type="text" placeholder="" v-model="target">
|
||||
</div>
|
||||
<div class="control pl-5">
|
||||
<button class="button is-primary is-outlined mt-5" @click="replace()">Replace</button>
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt-5">
|
||||
<button class="button is-primary has-text-white" @click="changeTemplate()">Áp dụng</button>
|
||||
</p>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { useStore } from '@/stores/index'
|
||||
const store = useStore()
|
||||
const { $id, $copy, $empty, $stripHtml, $calc, $remove, $copyToClipboard } = useNuxtApp()
|
||||
var props = defineProps({
|
||||
pagename: String,
|
||||
field: Object
|
||||
})
|
||||
var colorscheme = store.colorscheme
|
||||
var colorchoice = store.colorchoice
|
||||
var pageData = store[props.pagename]
|
||||
var field = props.field
|
||||
var type = undefined
|
||||
var size = undefined
|
||||
var types = [{code: 'span', name: 'span'}, {code: 'tag', name: 'tag'}]
|
||||
var sizes = [{code: 'is-small', name: 'Nhỏ', value: 'is-size-6'}, {code: 'is-normal', name: 'Trung bình', value: 'is-size-5'},
|
||||
{code: 'is-medium', name: 'Lớn', value: 'is-size-4'}]
|
||||
var shapes = [{code: 'default', name: 'Mặc định'}, {code: 'is-rounded', name: 'Tròn góc'}]
|
||||
var shape = undefined
|
||||
var outlines = [{code: 'default', name: 'Mặc định'}, {code: 'is-outlined', name: 'Outline'}]
|
||||
var outline = undefined
|
||||
var conditions = [{code: 'no', name: 'Không áp dụng'}, {code: 'yes', name: 'Có áp dụng'}]
|
||||
var condition = undefined
|
||||
var tags = []
|
||||
var selected = undefined
|
||||
var tabs = [{code: 'selected', name: 'Bước 1: Tạo nội dung'}, {code: 'condition', name: 'Bước 2: Đặt điều kiện'}, {code: 'option', name: 'Bước 3: Chọn màu, cỡ chữ'},
|
||||
{code: 'template', name: 'Bước 4: Mã lệnh & áp dụng'}]
|
||||
var tab = ref(undefined)
|
||||
var tagsField = []
|
||||
var errors = []
|
||||
var expression = ''
|
||||
var text = ref(null)
|
||||
var radioBGcolor = undefined
|
||||
var radioColor = undefined
|
||||
var radioSize = undefined
|
||||
var bgcolor = undefined
|
||||
var color = undefined
|
||||
var textsize = undefined
|
||||
var source = undefined
|
||||
var target = $copy(field.name)
|
||||
|
||||
const initData = function() {
|
||||
type = types.find(v=>v.code==='tag')
|
||||
size = sizes.find(v=>v.code==='is-normal')
|
||||
shape = shapes.find(v=>v.code==='is-rounded')
|
||||
outline = shapes.find(v=>v.code==='default')
|
||||
if($empty(field.template)) tab.value =tabs.find(v=>v.code==='selected')
|
||||
else {
|
||||
text.value =$copy(field.template)
|
||||
tab.value =tabs.find(v=>v.code==='template')
|
||||
}
|
||||
condition =conditions.find(v=>v.code==='no')
|
||||
}
|
||||
/*watch: {
|
||||
expression: function(newVal) {
|
||||
if($empty(newVal)) return
|
||||
elsecheckExpression()
|
||||
},
|
||||
tab: function(newVal, oldVal) {
|
||||
if(oldVal===undefined) return
|
||||
if(newVal.code==='template') {
|
||||
let value = '<div>'
|
||||
tags.map((v,i)=>{
|
||||
value += '<span class="' + v.class + (tags.length>i+1? ' mr-2' : '') + '" '
|
||||
if(v.style) value += 'style="' + v.style + '" '
|
||||
value += (v.expression? ' v-if="' + v.expression + '"' : '') + '>' + v.name + '</span>'
|
||||
})
|
||||
value += '</div>'
|
||||
text = value
|
||||
} else if(newVal.code==='option') {
|
||||
if(!selected) return
|
||||
radioBGcolor =selected.bgcolor?colorchoice.find(v=>v.code==='option') :colorchoice.find(v=>v.code==='none')
|
||||
radioColor =selected.color?colorchoice.find(v=>v.code==='option') :colorchoice.find(v=>v.code==='none')
|
||||
radioSize =selected.textsize?colorchoice.find(v=>v.code==='option') :colorchoice.find(v=>v.code==='none')
|
||||
bgcolor =selected.bgcolor?selected.bgcolor : undefined
|
||||
color =selected.color?selected.color : undefined
|
||||
textsize =selected.textsize?selected.textsize : undefined
|
||||
} else if(newVal.code==='condition') {
|
||||
condition = conditions.find(v=>v.code==='no')
|
||||
tagsField = []
|
||||
expression = ''
|
||||
if(selected?selected.expression : false) {
|
||||
condition =conditions.find(v=>v.code==='yes')
|
||||
tagsField =$copy(selected.tags)
|
||||
expression =$copy(selected.formula)
|
||||
}
|
||||
}
|
||||
}
|
||||
},*/
|
||||
function changeTab(v) {
|
||||
tab.value = v
|
||||
}
|
||||
const paste = async function() {
|
||||
text.value = await navigator.clipboard.readText()
|
||||
}
|
||||
const replace = function() {
|
||||
if($empty(text.value)) return
|
||||
text.value =text.value.replaceAll(source,target)
|
||||
}
|
||||
const doCheck = function() {
|
||||
let text = window.getSelection().toString()
|
||||
if($empty(text)) return
|
||||
source = text
|
||||
}
|
||||
const changeStyle = function() {
|
||||
selected.bgcolor =selected.color =selected.textsize =selected.style = undefined
|
||||
let style = ''
|
||||
if(radioBGcolor.code==='option'? !$empty(bgcolor) : false) {
|
||||
selected.bgcolor =bgcolor
|
||||
style += 'background-color: ' +bgcolor + ' !important; '
|
||||
}
|
||||
if(radioColor.code==='option'? !$empty(color) : false) {
|
||||
selected.color =color
|
||||
style += 'color: ' +color + ' !important; '
|
||||
}
|
||||
if(radioSize.code==='option'?$isNumber(textsize) : false) {
|
||||
selected.textsize =textsize
|
||||
style += 'font-size: ' +textsize + 'px !important; '
|
||||
}
|
||||
$empty(style)? false :selected.style = style
|
||||
}
|
||||
const changeCondition = function(v) {
|
||||
if(v.code==='no')selected.expression = undefined
|
||||
}
|
||||
const copyContent = function() {
|
||||
$copyToClipboard(text.value)
|
||||
}
|
||||
const changeTemplate = function() {
|
||||
let copy = pageData
|
||||
let found = copy.fields.find(v=>v.name===field.name)
|
||||
found.template = text.value
|
||||
store.commit(props.pagename, copy)
|
||||
}
|
||||
const checkExpression = function() {
|
||||
errors = []
|
||||
let val =$copy(expression)
|
||||
let exp =$copy(expression)
|
||||
tagsField.forEach(v => {
|
||||
let myRegExp = new RegExp(v.name, 'g')
|
||||
val = val.replace(myRegExp, Math.random())
|
||||
exp = exp.replace(myRegExp, "formatNumber(row['" + v.name + "'])")
|
||||
})
|
||||
try {
|
||||
let value =$calc(val)
|
||||
if(isNaN(value) || value===Number.POSITIVE_INFINITY || value===Number.NEGATIVE_INFINITY) {
|
||||
errors.push({name: 'expression', message: 'Biểu thức không hợp lệ'})
|
||||
} else if(!(eval(value)===true || eval(value)===false)) {
|
||||
errors.push({name: 'expression', message: 'Biểu thức không hợp lệ'})
|
||||
} else if(selected) {
|
||||
selected.expression = exp
|
||||
selected.formula =expression
|
||||
selected.tags =$copy(tagsField)
|
||||
}
|
||||
}
|
||||
catch(err) {
|
||||
errors.push({name: 'expression', message: 'Biểu thức không hợp lệ'})
|
||||
}
|
||||
returnerrors.length>0? false : true
|
||||
}
|
||||
const changeType = function(v) {
|
||||
}
|
||||
const doSelect = function(v) {
|
||||
tags.push({id:$id(), name: v.name, class:getClass(v)})
|
||||
tab =tabs.find(v=>v.code==='selected')
|
||||
selected =tags[tags.length-1]
|
||||
}
|
||||
const doSelectSpan = function(v) {
|
||||
tags.push({id:$id(), name: v.name, class:getSpanClass(v)})
|
||||
tab =tabs.find(v=>v.code==='selected')
|
||||
selected =tags[tags.length-1]
|
||||
}
|
||||
const remove = function(i) {
|
||||
$remove(tags, i)
|
||||
}
|
||||
const getClass = function(v) {
|
||||
let value =type.code + ' ' + v.code + ' ' +size.code + (shape.code==='default'? '' : ' ' +shape.code)
|
||||
value += (outline.code==='default'? '' : ' ' +outline.code)
|
||||
return value
|
||||
}
|
||||
const getSpanClass = function(v) {
|
||||
let value = 'has-text-' + v.name.toLowerCase() + ' ' +size.value
|
||||
return value
|
||||
}
|
||||
initData()
|
||||
var docid = $id()
|
||||
</script>
|
||||
193
components/datatable/DataModel.vue
Normal file
193
components/datatable/DataModel.vue
Normal file
@@ -0,0 +1,193 @@
|
||||
<template>
|
||||
<div class="columns mx-0">
|
||||
<div class="column is-2">
|
||||
<Caption class="mb-2" v-bind="{title: 'Tên model (bảng)', type: 'has-text-warning'}"></Caption>
|
||||
<div class="mb-2">
|
||||
<input class="input" v-model="text" placeholder="Tìm model" @change="findModel()">
|
||||
</div>
|
||||
<div style="max-height: 80vh; overflow: auto;">
|
||||
<div :class="`py-1 border-bottom is-clickable ${current.model===v.model? 'has-background-primary has-text-white' : ''}`"
|
||||
v-for="v in displayData" @click="changeMenu(v)">
|
||||
{{ v.model}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-10 py-0 px-0">
|
||||
<div class="tabs mb-3">
|
||||
<ul>
|
||||
<li :class="`${v.code===tab? 'is-active has-text-weight-bold fs-18' : 'fs-18'}`" v-for="v in tabs">
|
||||
<a @click="changeTab(v)">{{v.name}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div v-if="tab==='datatype'">
|
||||
<Caption class="mb-2" v-bind="{title: 'Kiểu dữ liệu (type)', type: 'has-text-warning'}"></Caption>
|
||||
<div style="max-height:75vh; overflow-y: auto;">
|
||||
<div class="py-1 border-bottom is-clickable" v-for="x in current.fields">
|
||||
{{ x.name}}
|
||||
<span class="ml-6 has-text-grey">{{ x.type }}</span>
|
||||
<a class="ml-6 has-text-primary" v-if="x.model" @click="openModel(x)">{{ x.model }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<template v-else-if="tab==='table'">
|
||||
<div class="columns mx-0 mb-0 pb-0">
|
||||
<div class="column is-5">
|
||||
<Caption class="mb-1" v-bind="{title: 'Values', type: 'has-text-warning'}"></Caption>
|
||||
<input class="input" rows="1" v-model="values" placeholder="Tên trường không chứa dấu cách, vd: code,name">
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<Caption class="mb-1" v-bind="{title: 'Filter', type: 'has-text-warning'}"></Caption>
|
||||
<input class="input" rows="1" v-model="filter" placeholder="{'code': 'xyz'}">
|
||||
</div>
|
||||
<div class="column is-2">
|
||||
<Caption class="mb-1" v-bind="{title: 'Sort', type: 'has-text-warning'}"></Caption>
|
||||
<input class="input" rows="1" v-model="sort" placeholder="vd: -code,name">
|
||||
</div>
|
||||
<div class="column is-1">
|
||||
<Caption class="mb-1" v-bind="{title: 'Load', type: 'has-text-warning'}"></Caption>
|
||||
<div>
|
||||
<button class="button is-primary has-text-white" @click="loadData()">Load</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Caption class="mb-1" v-bind="{title: 'Query', type: 'has-text-warning'}"></Caption>
|
||||
<div class="mb-2">
|
||||
{{ query }}
|
||||
<a class="has-text-primary ml-5" @click="copy()">copy</a>
|
||||
<p>{{apiUrl}}
|
||||
<a class="has-text-primary ml-5" @click="$copyToClipboard(apiUrl)">copy</a>
|
||||
<a class="has-text-primary ml-5" target="_blank" :href="apiUrl">open</a>
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<DataTable v-bind="{pagename: pagename}" v-if="pagedata" />
|
||||
</div>
|
||||
</template>
|
||||
<div v-else>
|
||||
<img id="image" :src="filePath" alt="">
|
||||
<p class="pl-5">
|
||||
<a class="mr-5" @click="downloadFile()">
|
||||
<SvgIcon v-bind="{name: 'download.svg', type: 'black', size: 24}"></SvgIcon>
|
||||
</a>
|
||||
<a target="_blank" :href="filePath">
|
||||
<SvgIcon v-bind="{name: 'open.svg', type: 'black', size: 24}"></SvgIcon>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Modal @close="showmodal=undefined" v-bind="showmodal" v-if="showmodal"></Modal>
|
||||
</template>
|
||||
<script setup>
|
||||
import { useStore } from '@/stores/index'
|
||||
const { $getdata, $getapi, $createField, $clone, $getpage, $empty, $copyToClipboard, $find, $multiSort, $download, $getpath } = useNuxtApp()
|
||||
const store = useStore()
|
||||
var pagename = 'pagedata3'
|
||||
var pagedata = ref()
|
||||
pagedata.value = $getpage()
|
||||
pagedata.value.perPage = 10
|
||||
store.commit(pagename, pagedata)
|
||||
let list = ['LogEntry', 'Permission', 'ContentType', 'Session', 'Group']
|
||||
var data = (await $getdata('getmodel')).filter(v=>list.findIndex(x=>x===v.model)<0)
|
||||
data = $multiSort(data, {model: 'asc'})
|
||||
var current = ref({fields: []})
|
||||
var tabs = [{code: 'datatype', name: 'Kiểu dữ liệu'}, {code: 'table', name: 'Dữ liệu'}, {code: 'datamodel', name: 'Data model'}]
|
||||
var tab = ref('datatype')
|
||||
var datatable = ref()
|
||||
var query = ref()
|
||||
var values, filter
|
||||
var apiUrl = ref()
|
||||
var showmodal = ref()
|
||||
var text = null
|
||||
var displayData = ref(data)
|
||||
var filePath = `${$getpath()}static/files/datamodel.png`
|
||||
var sort = "-id"
|
||||
current.value = data[0]
|
||||
function changeMenu(v) {
|
||||
values = undefined
|
||||
filter = undefined
|
||||
sort = undefined
|
||||
current.value = v
|
||||
if(tab.value==='table') loadData()
|
||||
}
|
||||
async function changeTab(v) {
|
||||
tab.value = v.code
|
||||
if(v.code==='table') loadData()
|
||||
}
|
||||
async function loadData() {
|
||||
let vfilter = filter? filter.trim() : undefined
|
||||
if(vfilter) {
|
||||
try {
|
||||
vfilter = JSON.parse(vfilter)
|
||||
} catch (error) {
|
||||
alert('Cấu trúc filter có lỗi')
|
||||
vfilter = undefined
|
||||
}
|
||||
}
|
||||
let params = {values: $empty(values)? undefined : values.trim(), filter: filter, sort: $empty(sort)? undefined : sort.trim()}
|
||||
let modelName = current.value.model
|
||||
let found = {name: modelName.toLowerCase().replace('_', ''), url: `data/${modelName}/`, url_detail: `data-detail/${modelName}/`, params: params}
|
||||
query.value = $clone(found)
|
||||
let rs = await $getapi([found])
|
||||
if(rs==='error') return alert('Đã xảy ra lỗi, hãy xem lại câu lệnh.')
|
||||
datatable.value = rs[0].data.rows
|
||||
showData()
|
||||
|
||||
// api query
|
||||
const baseUrl = $getpath() + `${query.value.url}`
|
||||
apiUrl.value = baseUrl
|
||||
let vparams = !$empty(values)? {values: values} : null
|
||||
if(!$empty(filter)) {
|
||||
vparams = vparams? {values: values, filter:filter} : {filter:filter}
|
||||
}
|
||||
if(!$empty(sort)) {
|
||||
if(vparams) {
|
||||
vparams.sort = sort.trim()
|
||||
} else {
|
||||
vparams = {sort: sort.trim()}
|
||||
}
|
||||
}
|
||||
if(vparams) {
|
||||
let url = new URL(baseUrl);
|
||||
let searchParams = new URLSearchParams(vparams);
|
||||
url.search = searchParams.toString();
|
||||
apiUrl.value = baseUrl + url.search
|
||||
}
|
||||
}
|
||||
function showData() {
|
||||
let arr = []
|
||||
if(!$empty(values)) {
|
||||
let arr1 = values.trim().split(',')
|
||||
arr1.map(v=>{
|
||||
let val = v.trim()
|
||||
let field = $createField(val, val, 'string', true)
|
||||
arr.push(field)
|
||||
})
|
||||
} else {
|
||||
current.value.fields.map(v=>{
|
||||
let field = $createField(v.name, v.name, 'string', true)
|
||||
arr.push(field)
|
||||
})
|
||||
}
|
||||
let clone = $clone(pagedata.value)
|
||||
clone.fields = arr
|
||||
clone.data = datatable.value
|
||||
pagedata.value = undefined
|
||||
setTimeout(()=>pagedata.value = clone)
|
||||
}
|
||||
function copy() {
|
||||
$copyToClipboard(JSON.stringify(query.value))
|
||||
}
|
||||
function openModel(x) {
|
||||
showmodal.value = {component: 'datatable/ModelInfo', title: x.model, width: '70%', height: '600px',
|
||||
vbind: {data: data, info: $find(data, {model: x.model})}}
|
||||
}
|
||||
function downloadFile() {
|
||||
$download(`${$getpath()}download/?name=datamodel.png&type=file`, 'datamodel.png')
|
||||
}
|
||||
function findModel() {
|
||||
if($empty(text)) return displayData.value = data
|
||||
displayData.value = data.filter(v=>v.model.toLowerCase().indexOf(text.toLowerCase())>=0)
|
||||
}
|
||||
</script>
|
||||
422
components/datatable/DataTable.vue
Normal file
422
components/datatable/DataTable.vue
Normal file
@@ -0,0 +1,422 @@
|
||||
<template>
|
||||
<div class="field is-grouped is-grouped-multiline pl-2" v-if="filters? filters.length>0 : false">
|
||||
<div class="control mr-5">
|
||||
<a class="button is-primary is-small has-text-white has-text-weight-bold" @click="updateData({filters: []})">
|
||||
<span class="fs-14">Xóa lọc</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="control pr-2 mr-5">
|
||||
<span class="icon-text">
|
||||
<SvgIcon v-bind="{name: 'sigma.svg', type: 'primary', size: 20}"></SvgIcon>
|
||||
<span class="fsb-18 has-text-primary">{{totalRows}}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="control" v-for="(v,i) in filters" :key="i">
|
||||
<div class="tags has-addons is-marginless">
|
||||
<a class="tag is-primary has-text-white is-marginless" @click="showCondition(v)">{{v.label.indexOf('>')>=0? $stripHtml(v.label,30) : v.label}}</a>
|
||||
<a class="tag is-delete is-marginless has-text-black-bis" @click="removeFilter(i)"></a>
|
||||
</div>
|
||||
<span class="help has-text-black-bis">
|
||||
{{v.sort? v.sort : (v.select? ('[' + (v.select.length>0? $stripHtml(v.select[0],20) : '') + '...Σ' + v.select.length + ']') :
|
||||
(v.condition))}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-container mb-0" ref="container" id="docid">
|
||||
<table class="table is-fullwidth is-bordered is-narrow is-hoverable" :style="tableStyle">
|
||||
<thead>
|
||||
<tr>
|
||||
<th v-for="(field,i) in displayFields" :key="i" :style="field.headerStyle">
|
||||
<div @click="showField(field)" :style="field.dropStyle">
|
||||
<a v-if="field.label.indexOf('<')<0">{{field.label}}</a>
|
||||
<a v-else>
|
||||
<component :is="dynamicComponent(field.label)" :row="v" @clickevent="clickEvent($event, v, field)" />
|
||||
</a>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(v,i) in displayData" :key="i">
|
||||
<td v-for="(field, j) in displayFields" :key="j" :id="`${field.name}`" :style="v[`${field.name}color`]"
|
||||
@dblclick="doubleClick(field, v)">
|
||||
<component :is="dynamicComponent(field.template)" :row="v" v-if="field.template" @clickevent="clickEvent($event, v, field)" />
|
||||
<span v-else>{{ v[field.name] }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<DatatablePagination v-bind="{data: data, perPage: perPage}" @changepage="changePage" v-if="showPaging"></DatatablePagination>
|
||||
</div>
|
||||
<Modal @close="close" @selected="doSelect" @confirm="confirmRemove" v-bind="showmodal" v-if="showmodal"></Modal>
|
||||
</template>
|
||||
<script setup>
|
||||
import { createApp } from "vue/dist/vue.esm-bundler.js"
|
||||
import { ref, defineComponent } from 'vue'
|
||||
import { useStore } from '~/stores/index'
|
||||
const emit = defineEmits(['edit', 'insert', 'dataevent'])
|
||||
const { $copy, $empty, $unique, $multiSort, $remove, $calc, $calculate, $find, $formatNumber, $stripHtml, $calculateData, $deleterow } = useNuxtApp()
|
||||
const store = useStore()
|
||||
var props = defineProps({
|
||||
pagename: String
|
||||
})
|
||||
function dynamicComponent(htmlString) {
|
||||
return defineComponent({
|
||||
template: htmlString,
|
||||
props: {
|
||||
row: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
var timer = undefined
|
||||
var showPaging = ref(false)
|
||||
var totalRows = ref(0)
|
||||
var currentPage = 1
|
||||
var displayFields = ref([])
|
||||
var displayData = []
|
||||
var pagedata = store[props.pagename]
|
||||
var tablesetting = $copy(pagedata.tablesetting || store.tablesetting)
|
||||
var perPage = Number($find(tablesetting, {code: 'per-page'}, 'detail')) || 20
|
||||
var filters = $copy(pagedata.filters || [])
|
||||
var currentField
|
||||
var filterData = []
|
||||
var currentsetting
|
||||
var scrollbar
|
||||
var fields
|
||||
var currentRow
|
||||
var data = $copy(pagedata.data)
|
||||
var showmodal = ref()
|
||||
watch(() => store[props.pagename], (newVal, oldVal) => {
|
||||
updateChange()
|
||||
})
|
||||
function updateChange() {
|
||||
pagedata = store[props.pagename]
|
||||
if(!pagedata.update) return
|
||||
if(pagedata.update.data) data = $copy(pagedata.update.data)
|
||||
if(pagedata.update.filters) {
|
||||
doFilter(pagedata.update.filters)
|
||||
updateShow()
|
||||
return //exit
|
||||
}
|
||||
if(filters.length>0) doFilter(filters)
|
||||
if(pagedata.update.fields || pagedata.update.data) updateShow()
|
||||
}
|
||||
const updateShow = function(full_data) {
|
||||
let arr = pagedata.fields.filter(v=>v.show)
|
||||
if(full_data===false) displayData = $copy(data)
|
||||
else displayData = $copy(data.filter((ele,index) => (index>=(currentPage-1)*perPage && index<currentPage*perPage)))
|
||||
displayData.map(v=>{
|
||||
arr.map(x=>v[`${x.name}color`] = getStyle(x, v))
|
||||
})
|
||||
arr.map(v=>{
|
||||
v.headerStyle = getSettingStyle('header', v)
|
||||
v.dropStyle = getSettingStyle('dropdown', v)
|
||||
})
|
||||
displayFields.value = arr
|
||||
showPagination()
|
||||
}
|
||||
function confirmRemove() {
|
||||
$deleterow(pagedata.api.name, currentRow.id, props.pagename, true)
|
||||
}
|
||||
const clickEvent = function(event, row, field) {
|
||||
let name = typeof event === "string"? event : event.name
|
||||
let data = typeof event === "string"? event : event.data
|
||||
if(name==='remove') {
|
||||
currentRow = row
|
||||
showmodal.value = {component: `dialog/Confirm`,vbind: {content: 'Bạn có muốn xóa bản ghi này không?', duration: 10},
|
||||
title: 'Xác nhận', width: '500px', height: '100px'}
|
||||
}
|
||||
emit(name, row, field, data)
|
||||
}
|
||||
const showField = async function(field) {
|
||||
if(pagedata.contextMenu===false || field.menu==='no') return
|
||||
currentField = field
|
||||
filterData = $unique(pagedata.data, [field.name])
|
||||
//let doc = this.$refs[`th${field.name}`]
|
||||
//let width = (doc? doc.length>0 : false)? doc[0].getBoundingClientRect().width : 100
|
||||
let width = 100
|
||||
if(pagedata.setting) currentsetting = $copy(pagedata.setting)
|
||||
showmodal.value = {vbind: {pagename: props.pagename, field: field, filters: filters, filterData: filterData, width: width},
|
||||
component: 'datatable/ContextMenu', title: field.name, width: '650px', height: '500px'} //$stripHtml(field.label)
|
||||
}
|
||||
const getStyle = function(field, record) {
|
||||
var stop = false
|
||||
let val = tablesetting.find(v=>v.code==='td-border')? tablesetting.find(v=>v.code==='td-border').detail
|
||||
: 'border: solid 1px rgb(44, 44, 44); '
|
||||
val = val.indexOf(';')>=0? val : val + ';'
|
||||
if(field.bgcolor? !Array.isArray(field.bgcolor) : false) {
|
||||
val += ` background-color:${field.bgcolor}; `
|
||||
} else if(field.bgcolor? Array.isArray(field.bgcolor) : false) {
|
||||
field.bgcolor.map(v=>{
|
||||
if(v.type==='search') {
|
||||
if(record[field.name] && !stop? record[field.name].toLowerCase().indexOf(v.keyword.toLowerCase())>=0 : false) {
|
||||
val += ` background-color:${v.color}; `
|
||||
stop = true
|
||||
}
|
||||
} else {
|
||||
let res = $calculate(record, v.tags, v.expression)
|
||||
if(res.success && res.value && !stop) {
|
||||
val += ` background-color:${v.color}; `
|
||||
stop = true
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
stop = false
|
||||
if(field.color? !Array.isArray(field.color) : false) {
|
||||
val += ` color:${field.color}; `
|
||||
} else if(field.color? Array.isArray(field.color) : false) {
|
||||
field.color.map(v=>{
|
||||
if(v.type==='search') {
|
||||
if(record[field.name] && !stop? record[field.name].toLowerCase().indexOf(v.keyword.toLowerCase())>=0 : false) {
|
||||
val += ` color:${v.color}; `
|
||||
stop = true
|
||||
}
|
||||
} else {
|
||||
let res = $calculate(record, v.tags, v.expression)
|
||||
if(res.success && res.value && !stop) {
|
||||
val += ` color:${v.color}; `
|
||||
stop = true
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
stop = false
|
||||
if(field.textsize? !Array.isArray(field.textsize) : false) {
|
||||
val += ` font-size:${field.textsize}px; `
|
||||
} else if(field.textsize? Array.isArray(field.textsize) : false) {
|
||||
field.textsize.map(v=>{
|
||||
if(v.type==='search') {
|
||||
if(record[field.name] && !stop? record[field.name].toLowerCase().indexOf(v.keyword.toLowerCase())>=0 : false) {
|
||||
val += ` font-size:${v.size}px; `
|
||||
stop = true
|
||||
}
|
||||
}
|
||||
else {
|
||||
let res = $calculate(record, v.tags, v.expression)
|
||||
if(res.success && res.value && !stop) {
|
||||
val += ` font-size:${v.size}px; `
|
||||
stop = true
|
||||
}
|
||||
}
|
||||
})
|
||||
} else val += ` font-size:${tablesetting.find(v=>v.code==='table-font-size').detail}px;`
|
||||
if(field.textalign) val += ` text-align:${field.textalign}; `
|
||||
if(field.minwidth) val += ` min-width:${field.minwidth}px; `
|
||||
if(field.maxwidth) val += ` max-width:${field.maxwidth}px; `
|
||||
return val
|
||||
}
|
||||
const getSettingStyle = function(name, field) {
|
||||
let value = ''
|
||||
if(name==='container') {
|
||||
value = 'min-height:' + tablesetting.find(v=>v.code==='container-height').detail + 'rem; '
|
||||
} else if(name==='table') {
|
||||
value += 'background-color:' + tablesetting.find(v=>v.code==='table-background').detail + '; '
|
||||
value += 'font-size:' + tablesetting.find(v=>v.code==='table-font-size').detail + 'px;'
|
||||
value += 'color:' + tablesetting.find(v=>v.code==='table-font-color').detail + '; '
|
||||
} else if(name==='header') {
|
||||
value += 'background-color:' + tablesetting.find(v=>v.code==='header-background').detail + '; '
|
||||
if(field.minwidth) value += ' min-width: ' + field.minwidth + 'px; '
|
||||
if(field.maxwidth) value += ' max-width: ' + field.maxwidth + 'px; '
|
||||
} else if(name==='menu') {
|
||||
let arg = tablesetting.find(v=>v.code==='menu-width').detail
|
||||
arg = field? (field.menuwidth? field.menuwidth : arg) : arg
|
||||
value += 'width:' + arg + 'rem; '
|
||||
value += 'min-height:' + tablesetting.find(v=>v.code==='menu-min-height').detail + 'rem; '
|
||||
value += 'max-height:' + tablesetting.find(v=>v.code==='menu-max-height').detail + 'rem; '
|
||||
value += "overflow:auto; "
|
||||
} else if(name==='dropdown') {
|
||||
value += 'font-size:' + tablesetting.find(v=>v.code==='header-font-size').detail + 'px; '
|
||||
let found = filters.find(v=>v.name===field.name)
|
||||
found? value += 'color:' + tablesetting.find(v=>v.code==='header-filter-color').detail + '; '
|
||||
:value += 'color:' + tablesetting.find(v=>v.code==='header-font-color').detail + '; '
|
||||
}
|
||||
return value
|
||||
}
|
||||
function changePage(page) {
|
||||
currentPage = page
|
||||
updateShow()
|
||||
}
|
||||
const showPagination = function() {
|
||||
showPaging.value = pagedata.pagination===false? false : true
|
||||
totalRows.value = data.length
|
||||
if(showPaging.value && pagedata.api) {
|
||||
if(pagedata.api.full_data===false) totalRows.value = pagedata.api.total_rows
|
||||
showPaging.value = totalRows.value > perPage
|
||||
}
|
||||
}
|
||||
const close = function() {
|
||||
showmodal.value = undefined
|
||||
}
|
||||
const frontendFilter = function(newVal) {
|
||||
let checkValid = function(name, x, filter) {
|
||||
if($empty(x[name])) return false
|
||||
else {
|
||||
let text = ''
|
||||
filter.map((y,k)=>{
|
||||
text += `${k>0? (filter[k-1].operator==='and'? ' &&' : ' ||') : ''} ${$formatNumber(x[name])}
|
||||
${y.condition==='='? '==' : (y.condition==='<>'? '!==' : y.condition)} ${$formatNumber(y.value)}`
|
||||
})
|
||||
return $calc(text)
|
||||
}
|
||||
}
|
||||
newVal = $copy(newVal)
|
||||
var data = $copy(pagedata.data)
|
||||
newVal.filter(m=>m.select || m.filter).map(v => {
|
||||
if(v.select) {
|
||||
data = data.filter(x => v.select.findIndex(y => $empty(y)? $empty(x[v.name]) : (y===x[v.name])) >-1)
|
||||
} else if(v.filter) {
|
||||
data = data.filter(x => checkValid(v.name, x, v.filter))
|
||||
}
|
||||
})
|
||||
let sort = {}
|
||||
let format = {}
|
||||
let list = filters.filter(x=>x.sort)
|
||||
list.map(v=>{
|
||||
sort[v.name] = v.sort === "az" ? "asc" : "desc"
|
||||
format[v.name] = v.format;
|
||||
})
|
||||
return list.length>0? $multiSort(data, sort, format) : data
|
||||
}
|
||||
const backendFilter = function(newVal) {
|
||||
|
||||
}
|
||||
const doFilter = function(newVal, nonset) {
|
||||
if(currentPage>1 && nonset!==true) currentPage = 1
|
||||
if(pagedata.api.full_data) {
|
||||
data = frontendFilter(newVal)
|
||||
pagedata.dataFilter = $copy(data)
|
||||
store.commit(props.pagename, pagedata)
|
||||
emit('changedata', newVal)
|
||||
}
|
||||
else {
|
||||
if(timer) clearTimeout(timer)
|
||||
timer = setTimeout(() => backendFilter(newVal), 200)
|
||||
}
|
||||
pagedata.filters = newVal
|
||||
store.commit(props.pagename, pagedata)
|
||||
emit('changefilter', newVal? newVal.length>0 : false)
|
||||
}
|
||||
const doSelect = function(value) {
|
||||
showmodal.value = undefined
|
||||
let field = currentField
|
||||
let found = filters.find(v=>v.name===field.name)
|
||||
if(found) {
|
||||
!found.select? found.select = [] : false
|
||||
let idx = found.select.findIndex(x=>x===value)
|
||||
idx>=0? $remove(found.select, idx) : found.select.push(value)
|
||||
if(found.select.length===0) {
|
||||
idx = filters.findIndex(v=>v.name===field.name)
|
||||
if(idx>=0) $remove(filters, idx)
|
||||
}
|
||||
} else {
|
||||
filters.push({name: field.name, label: field.label, select: [value], format: field.format})
|
||||
}
|
||||
doFilter(filters)
|
||||
updateShow()
|
||||
}
|
||||
const doubleScroll = function(element) {
|
||||
var _scrollbar= document.createElement('div');
|
||||
_scrollbar.appendChild(document.createElement('div'));
|
||||
_scrollbar.style.overflow= 'auto';
|
||||
_scrollbar.style.overflowY= 'hidden';
|
||||
_scrollbar.firstChild.style.width= element.scrollWidth+'px';
|
||||
_scrollbar.firstChild.style.height = '1px'
|
||||
_scrollbar.firstChild.appendChild(document.createTextNode('\xA0'));
|
||||
var running = false;
|
||||
_scrollbar.onscroll= function() {
|
||||
if(running) {
|
||||
running = false;
|
||||
return;
|
||||
}
|
||||
running = true;
|
||||
element.scrollLeft= _scrollbar.scrollLeft;
|
||||
};
|
||||
element.onscroll= function() {
|
||||
if(running) {
|
||||
running = false;
|
||||
return;
|
||||
}
|
||||
running = true;
|
||||
_scrollbar.scrollLeft= element.scrollLeft;
|
||||
}
|
||||
element.parentNode.insertBefore(scrollbar, element)
|
||||
_scrollbar.scrollLeft= element.scrollLeft
|
||||
scrollbar = _scrollbar
|
||||
}
|
||||
const removeFilter = function(i) {
|
||||
$remove(filters, i)
|
||||
doFilter(filters)
|
||||
updateShow()
|
||||
}
|
||||
const scrollbarVisible = function() {
|
||||
let element = this.$refs['container']
|
||||
if(!element) return
|
||||
let result = element.scrollWidth > element.clientWidth? true : false
|
||||
if(scrollbar) {
|
||||
element.parentNode.removeChild(scrollbar)
|
||||
scrollbar = undefined
|
||||
}
|
||||
if(result) doubleScroll(element)
|
||||
}
|
||||
const updateData = async function(newVal) {
|
||||
if(newVal.columns) { //change attribute
|
||||
fields = $copy(newVal.columns)
|
||||
let _fields = fields.filter(v=>v.show)
|
||||
data.map(v=>{
|
||||
_fields.map(x=>v[`${x.name}color`] = getStyle(x, v))
|
||||
})
|
||||
return updateShow()
|
||||
}
|
||||
if(newVal.tablesetting) {
|
||||
tablesetting = newVal.tablesetting
|
||||
perPage = $formatNumber(tablesetting.find(v=>v.code=="per-page").detail)
|
||||
currentPage = 1
|
||||
}
|
||||
tablesetting = $copy(pagedata.tablesetting || gridsetting)
|
||||
if(tablesetting) {
|
||||
perPage = pagedata.perPage? pagedata.perPage : Number(tablesetting.find(v=>v.code==='per-page').detail)
|
||||
}
|
||||
if(newVal.fields) {
|
||||
fields = $copy(newVal.fields)
|
||||
} else fields = $copy(pagedata.fields)
|
||||
if(newVal.data || newVal.fields) {
|
||||
let copy = $copy(newVal.data || data)
|
||||
this.data = $calculateData(copy, fields)
|
||||
let fields = fields.filter(v=>v.show)
|
||||
data.map(v=>{
|
||||
fields.map(x=>v[`${x.name}color`] = getStyle(x, v))
|
||||
})
|
||||
}
|
||||
if(newVal.filters) filters = $copy(newVal.filters)
|
||||
else if(pagedata.filters) filters = $copy(pagedata.filters)
|
||||
if(newVal.data || newVal.fields || newVal.filters) {
|
||||
let copy = $copy(filters)
|
||||
filters.map((v,i)=>{
|
||||
let idx = $findIndex(fields, {name: v.name})
|
||||
let index = $findIndex(copy, {name: v.name})
|
||||
if(idx<0 && index>=0) $delete(copy, index)
|
||||
else if(idx>=0 && index>=0) copy[index].label = fields[idx].label
|
||||
})
|
||||
filters = copy
|
||||
doFilter(filters)
|
||||
}
|
||||
if(newVal.data || newVal.fields || newVal.filters || newVal.tablesetting) updateShow()
|
||||
if(newVal.data || newVal.fields) setTimeout(()=> scrollbarVisible(), 100)
|
||||
if(newVal.highlight) setTimeout(()=>highlight(newVal.highlight), 50)
|
||||
}
|
||||
const doubleClick = function(field, v) {
|
||||
currentField = field
|
||||
doSelect(v[field.name])
|
||||
}
|
||||
var tableStyle = getSettingStyle('table')
|
||||
setTimeout(()=> updateShow(), 200)
|
||||
</script>
|
||||
<style scoped>
|
||||
:deep(.table tbody tr:hover td, .table tbody tr:hover th) {
|
||||
background-color: hsl(0, 0%, 78%);
|
||||
color: rgb(0, 0, 0);
|
||||
}
|
||||
</style>
|
||||
402
components/datatable/DataView.vue
Normal file
402
components/datatable/DataView.vue
Normal file
@@ -0,0 +1,402 @@
|
||||
<template>
|
||||
<TimeOption
|
||||
v-bind="{ pagename: vpagename, api: api, timeopt: timeopt, filter: optfilter, importdata: props.importdata, newDataAvailable: newDataAvailable, params: vparams }"
|
||||
ref="timeopt" @option="timeOption" @excel="exportExcel" @add="insert" @manual-refresh="manualRefresh" @refresh-data="refreshData"
|
||||
@import="openImportModal" class="mb-3" v-if="timeopt"></TimeOption>
|
||||
<DataTable v-bind="{ pagename: vpagename }" @edit="edit" @insert="insert" @dataevent="dataEvent" v-if="pagedata" />
|
||||
<Modal @close="showmodal = undefined" v-bind="showmodal" v-if="showmodal" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import TimeOption from '~/components/datatable/TimeOption'
|
||||
import { useStore } from '~/stores/index'
|
||||
import { ref, watch, onBeforeUnmount } from 'vue'
|
||||
|
||||
const emit = defineEmits(['modalevent', 'dataevent', 'dataUpdated'])
|
||||
const store = useStore()
|
||||
|
||||
const props = defineProps({
|
||||
pagename: String,
|
||||
api: String,
|
||||
setting: String,
|
||||
filter: Object,
|
||||
params: Object,
|
||||
data: Object,
|
||||
modal: Object,
|
||||
timeopt: Object,
|
||||
realtime: Object,
|
||||
importdata: Object
|
||||
})
|
||||
|
||||
const { $copy, $find, $findapi, $getapi, $setpage, $clone, $stripHtml, $snackbar, $dayjs } = useNuxtApp()
|
||||
|
||||
const showmodal = ref()
|
||||
const pagedata = ref()
|
||||
const newDataAvailable = ref(false)
|
||||
const pendingNewData = ref(null)
|
||||
const lastDataHash = ref(null)
|
||||
const pollingInterval = ref(null)
|
||||
|
||||
let vpagename = props.pagename
|
||||
let vfilter = props.filter ? $copy(props.filter) : undefined
|
||||
let vparams = props.params ? $copy(props.params) : undefined
|
||||
let connection = undefined
|
||||
let optfilter = props.filter || (props.params ? props.params.filter : undefined)
|
||||
|
||||
const realtimeConfig = ref({ time: 0, update: "true" })
|
||||
|
||||
if (props.realtime) {
|
||||
realtimeConfig.value = { time: props.realtime.time || 0, update: props.realtime.update }
|
||||
}
|
||||
|
||||
if (vparams?.filter) {
|
||||
for (const [key, value] of Object.entries(vparams.filter)) {
|
||||
if (value.toString().indexOf('$') >= 0) {
|
||||
vparams.filter[key] = store[value.replace('$', '')].id
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const generateDataHash = (data) => {
|
||||
if (!data) return null
|
||||
try {
|
||||
// Use a replacer with JSON.stringify to create a stable string representation
|
||||
// by sorting the keys of any object. This ensures the hash is consistent
|
||||
// even if the API returns objects with keys in a different order.
|
||||
const replacer = (key, value) =>
|
||||
value && typeof value === 'object' && !Array.isArray(value)
|
||||
? Object.keys(value)
|
||||
.sort()
|
||||
.reduce((sorted, key) => {
|
||||
sorted[key] = value[key];
|
||||
return sorted;
|
||||
}, {})
|
||||
: value;
|
||||
|
||||
const stringToHash = JSON.stringify(data, replacer);
|
||||
|
||||
return stringToHash.split('').reduce((a, b) => {
|
||||
a = ((a << 5) - a) + b.charCodeAt(0)
|
||||
return a & a
|
||||
}, 0)
|
||||
} catch (e) {
|
||||
console.error('Error generating data hash:', e);
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
const startAutoCheck = () => {
|
||||
if (pollingInterval.value) clearInterval(pollingInterval.value)
|
||||
if (realtimeConfig.value.time && realtimeConfig.value.time > 0) {
|
||||
pollingInterval.value = setInterval(() => checkDataChanges(), realtimeConfig.value.time * 1000)
|
||||
}
|
||||
}
|
||||
|
||||
const checkDataChanges = async () => {
|
||||
try {
|
||||
const connlist = []
|
||||
const conn1 = $findapi(props.api)
|
||||
|
||||
if (vfilter) {
|
||||
const filter = $copy(conn1.params.filter) || {}
|
||||
for (const [key, value] of Object.entries(vfilter)) {
|
||||
filter[key] = value
|
||||
}
|
||||
for (const [key, value] of Object.entries(filter)) {
|
||||
if (value.toString().indexOf('$') >= 0) {
|
||||
filter[key] = store[value.replace('$', '')].id
|
||||
}
|
||||
}
|
||||
conn1.params.filter = filter
|
||||
}
|
||||
|
||||
if (vparams) conn1.params = $copy(vparams)
|
||||
|
||||
delete conn1.params.sort
|
||||
delete conn1.params.values
|
||||
|
||||
conn1.params.summary = 'aggregate'
|
||||
conn1.params.distinct_values = JSON.stringify({
|
||||
total_count: { type: 'Count', field: 'id' },
|
||||
last_updated: { type: 'Max', field: 'update_time' },
|
||||
last_created: { type: 'Max', field: 'create_time' }
|
||||
})
|
||||
|
||||
connlist.push(conn1)
|
||||
|
||||
const rs = await $getapi(connlist)
|
||||
const obj = $find(rs, { name: props.api })
|
||||
const newMetadata = obj ? obj.data.rows : {}
|
||||
const newHash = generateDataHash(newMetadata)
|
||||
|
||||
if (lastDataHash.value === null) {
|
||||
lastDataHash.value = newHash
|
||||
return
|
||||
}
|
||||
|
||||
if (newHash !== lastDataHash.value) {
|
||||
lastDataHash.value = newHash
|
||||
|
||||
if (realtimeConfig.value.update === "true") {
|
||||
await loadFullDataAsync()
|
||||
emit('dataUpdated', { newData: store[vpagename].data, autoUpdate: true, hasChanges: true })
|
||||
} else {
|
||||
newDataAvailable.value = true
|
||||
emit('dataUpdated', { newData: null, autoUpdate: false, hasChanges: true })
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error checking data:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const loadFullDataAsync = async () => {
|
||||
try {
|
||||
const connlist = []
|
||||
const conn1 = $findapi(props.api)
|
||||
|
||||
if (vfilter) {
|
||||
const filter = $copy(conn1.params.filter) || {}
|
||||
for (const [key, value] of Object.entries(vfilter)) {
|
||||
filter[key] = value
|
||||
}
|
||||
for (const [key, value] of Object.entries(filter)) {
|
||||
if (value.toString().indexOf('$') >= 0) {
|
||||
filter[key] = store[value.replace('$', '')].id
|
||||
}
|
||||
}
|
||||
conn1.params.filter = filter
|
||||
}
|
||||
|
||||
if (vparams) conn1.params = $copy(vparams)
|
||||
|
||||
delete conn1.params.summary
|
||||
delete conn1.params.distinct_values
|
||||
|
||||
connlist.push(conn1)
|
||||
|
||||
const rs = await $getapi(connlist)
|
||||
const obj = $find(rs, { name: props.api })
|
||||
const newData = obj ? $copy(obj.data.rows) : []
|
||||
|
||||
updateDataDisplay(newData)
|
||||
} catch (error) {
|
||||
console.error('Error loading full data:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const openImportModal = () => {
|
||||
const copy = $copy(props.importdata)
|
||||
showmodal.value = copy
|
||||
}
|
||||
|
||||
const updateDataDisplay = (newData) => {
|
||||
const copy = $clone(store[vpagename])
|
||||
copy.data = newData
|
||||
copy.update = { data: newData }
|
||||
store.commit(vpagename, copy)
|
||||
newDataAvailable.value = false
|
||||
pendingNewData.value = null
|
||||
}
|
||||
|
||||
const manualRefresh = () => {
|
||||
if (pendingNewData.value) {
|
||||
updateDataDisplay(pendingNewData.value)
|
||||
}
|
||||
}
|
||||
|
||||
const refreshData = async () => {
|
||||
if (pollingInterval.value) clearInterval(pollingInterval.value);
|
||||
newDataAvailable.value = false;
|
||||
pendingNewData.value = null;
|
||||
|
||||
await getApi();
|
||||
|
||||
// After a manual refresh, force a metadata check to get the correct new hash.
|
||||
lastDataHash.value = null;
|
||||
await checkDataChanges();
|
||||
|
||||
newDataAvailable.value = false;
|
||||
startAutoCheck();
|
||||
}
|
||||
|
||||
watch(() => props.realtime, (newVal) => {
|
||||
if (newVal) {
|
||||
realtimeConfig.value.time = newVal.time || 0
|
||||
realtimeConfig.value.update = newVal.update === true
|
||||
startAutoCheck()
|
||||
}
|
||||
}, { deep: true })
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (pollingInterval.value) clearInterval(pollingInterval.value)
|
||||
})
|
||||
|
||||
const timeOption = (v) => {
|
||||
if (!v) return getApi()
|
||||
|
||||
if (v.filter_or) {
|
||||
if (vfilter) vfilter = undefined
|
||||
if (vparams) {
|
||||
vparams.filter_or = v.filter_or
|
||||
} else {
|
||||
const found = $copy($findapi(props.api))
|
||||
found.params.filter_or = v.filter_or
|
||||
if (props.filter) {
|
||||
const filter = $copy(props.filter)
|
||||
for (const [key, value] of Object.entries(filter)) {
|
||||
if (value.toString().indexOf('$') >= 0) {
|
||||
filter[key] = store[value.replace('$', '')].id
|
||||
}
|
||||
}
|
||||
found.params.filter = filter
|
||||
}
|
||||
vparams = found.params
|
||||
}
|
||||
return getApi()
|
||||
}
|
||||
|
||||
let filter = vfilter ? vfilter : (props.params ? props.params.filter || {} : {})
|
||||
for (const [key, value] of Object.entries(v.filter)) {
|
||||
filter[key] = value
|
||||
}
|
||||
|
||||
for (const [key, value] of Object.entries(filter)) {
|
||||
if (value.toString().indexOf('$') >= 0) {
|
||||
filter[key] = store[value.replace('$', '')].id
|
||||
}
|
||||
}
|
||||
|
||||
if (vfilter) {
|
||||
vfilter = filter
|
||||
vparams = undefined
|
||||
} else if (vparams) {
|
||||
vparams.filter = filter
|
||||
vparams.filter_or = undefined
|
||||
}
|
||||
|
||||
if (!vfilter && !vparams) vfilter = filter
|
||||
getApi()
|
||||
}
|
||||
|
||||
const edit = (v) => {
|
||||
const copy = props.modal ? $copy(props.modal) : {}
|
||||
const f = copy.vbind ? copy.vbind : { pagename: vpagename, api: props.api, row: v }
|
||||
f.pagename = vpagename
|
||||
f.row = v
|
||||
copy.vbind = f
|
||||
showmodal.value = copy
|
||||
}
|
||||
|
||||
const insert = () => {
|
||||
const copy = props.modal ? $copy(props.modal) : {}
|
||||
const f = copy.vbind ? copy.vbind : { pagename: vpagename, api: props.api }
|
||||
f.pagename = vpagename
|
||||
copy.vbind = f
|
||||
showmodal.value = copy
|
||||
}
|
||||
|
||||
const getApi = async () => {
|
||||
const connlist = []
|
||||
let row = props.setting?.id ? $copy(props.setting) : undefined
|
||||
|
||||
if (!row) {
|
||||
const found = $find(store.settings.filter(v => v), props.setting > 0 ? { id: props.setting } : { name: props.setting })
|
||||
if (found) row = $copy(found)
|
||||
}
|
||||
|
||||
if (!row) {
|
||||
const conn = $findapi('usersetting')
|
||||
conn.params.filter = props.setting > 0 ? { id: props.setting } : { name: props.setting }
|
||||
connlist.push(conn)
|
||||
}
|
||||
|
||||
let data = props.data ? $copy(props.data) : undefined
|
||||
|
||||
if (!data) {
|
||||
const conn1 = $findapi(props.api)
|
||||
if (vfilter) {
|
||||
const filter = conn1.params.filter || {}
|
||||
for (const [key, value] of Object.entries(vfilter)) {
|
||||
filter[key] = value
|
||||
}
|
||||
for (const [key, value] of Object.entries(filter)) {
|
||||
if (value.toString().indexOf('$') >= 0) {
|
||||
filter[key] = store[value.replace('$', '')].id
|
||||
}
|
||||
}
|
||||
conn1.params.filter = filter
|
||||
}
|
||||
if (vparams) conn1.params = vparams
|
||||
connection = conn1
|
||||
connlist.push(conn1)
|
||||
}
|
||||
|
||||
let obj = undefined
|
||||
if (connlist.length > 0) {
|
||||
const rs = await $getapi(connlist)
|
||||
const ele = $find(rs, { name: 'usersetting' })
|
||||
if (ele) {
|
||||
row = $find(ele.data.rows, { name: props.setting.name || props.setting })
|
||||
const copy = $copy(store.settings)
|
||||
copy.push(row)
|
||||
store.commit('settings', copy)
|
||||
}
|
||||
obj = $find(rs, { name: props.api })
|
||||
if (obj) data = $copy(obj.data.rows)
|
||||
}
|
||||
|
||||
pagedata.value = $setpage(vpagename, row, obj)
|
||||
const copy = $clone(pagedata.value)
|
||||
copy.data = data
|
||||
copy.update = { data: data }
|
||||
store.commit(vpagename, copy)
|
||||
|
||||
// lastDataHash.value = generateDataHash(data); // This is now handled by checkDataChanges after a refresh.
|
||||
}
|
||||
|
||||
const dataEvent = (v, field, data) => {
|
||||
if (data?.modal) {
|
||||
const copy = $copy(data.modal)
|
||||
const f = copy.vbind ? copy.vbind : {}
|
||||
if (!f.api) f.api = props.api
|
||||
f.pagename = vpagename
|
||||
if (!f.row) f.row = v
|
||||
copy.vbind = f
|
||||
copy.field = field
|
||||
showmodal.value = copy
|
||||
}
|
||||
emit('modalevent', { name: 'dataevent', data: { row: v, field: field } })
|
||||
emit('dataevent', v, field)
|
||||
}
|
||||
|
||||
const exportExcel = async () => {
|
||||
if (!props.api) return
|
||||
|
||||
const found = $findapi('exportcsv')
|
||||
found.params = connection.params
|
||||
const fields = pagedata.value.fields
|
||||
.filter(v => (v.show && v.export !== 'no') || v.export === 'yes')
|
||||
.map(x => ({ name: x.name, label: $stripHtml(x.label) }))
|
||||
found.params.fields = JSON.stringify(fields)
|
||||
found.url = connection.url.replace('data/', 'exportcsv/')
|
||||
const rs = await $getapi([found])
|
||||
|
||||
if (rs === 'error') {
|
||||
$snackbar('Đã xảy ra lỗi. Vui lòng thử lại.')
|
||||
return
|
||||
}
|
||||
|
||||
const url = window.URL.createObjectURL(new Blob([rs[0].data]))
|
||||
const link = document.createElement('a')
|
||||
const fileName = `${$dayjs(new Date()).format('YYYYMMDDhhmmss')}-data.csv`
|
||||
link.href = url
|
||||
link.setAttribute('download', fileName)
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
link.remove()
|
||||
}
|
||||
|
||||
if (!props.timeopt) await getApi()
|
||||
startAutoCheck()
|
||||
</script>
|
||||
82
components/datatable/EditLabel.vue
Normal file
82
components/datatable/EditLabel.vue
Normal file
@@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<div>
|
||||
<p class="fsb-20 mb-5">Điều chỉnh tiêu đề</p>
|
||||
<div v-for="(v, i) in arr" :key="i" :class="(i>0? 'mt-4' : null)">
|
||||
<p class="fsb-14">Dòng thứ {{(i+1)}}<span class="has-text-danger"> *</span></p>
|
||||
<div class="field has-addons mt-1">
|
||||
<div class="control is-expanded">
|
||||
<input class="input" type="text" v-model="v.label">
|
||||
</div>
|
||||
<div class="control">
|
||||
<a class="button px-2 is-primary" @click="add()">
|
||||
<span>
|
||||
<SvgIcon v-bind="{name: 'add1.png', type: 'white', size: 17}"></SvgIcon></span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="control" @click="remove(i)" v-if="(i>0)">
|
||||
<a class="button px-2 is-dark">
|
||||
<span>
|
||||
<SvgIcon v-bind="{name: 'bin.svg', type: 'white', size: 17}"></SvgIcon>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<p class="help has-text-danger" v-if="v.error"> {{v.error}} </p>
|
||||
</div>
|
||||
<div class="buttons mt-5">
|
||||
<button class="button is-primary has-text-white" @click="update()">Cập nhật</button>
|
||||
<button class="button is-dark" @click="$emit('close')">Hủy bỏ</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['label'],
|
||||
data() {
|
||||
return {
|
||||
arr: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
let arr1 = this.label.replace('<div>', '').replace('</div>', '').split("</p>")
|
||||
arr1.map(v=>{
|
||||
if(!this.$empty(v)) {
|
||||
let label = v + '</p>'
|
||||
label = this.$stripHtml(label)
|
||||
this.arr.push({label: label})
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
add() {
|
||||
this.arr.push({label: undefined})
|
||||
},
|
||||
remove(i) {
|
||||
this.$remove(this.arr, i)
|
||||
},
|
||||
checkError() {
|
||||
let error = false
|
||||
this.arr.map(v=>{
|
||||
if(this.$empty(v.label)) {
|
||||
v.error = 'Nội dung không được bỏ trống'
|
||||
error = true
|
||||
}
|
||||
})
|
||||
if(error) this.arr = this.$copy(this.arr)
|
||||
return error
|
||||
},
|
||||
update() {
|
||||
if(this.checkError()) return
|
||||
let label = ''
|
||||
if(this.arr.length>1) {
|
||||
this.arr.map((v,i)=>{
|
||||
label += `<p${i<this.arr.length-1? ' style="border-bottom: 1px solid white;"' : ''}>${v.label.trim()}</p>`
|
||||
})
|
||||
label = `<div>${label}</div>`
|
||||
} else label = this.arr[0].label.trim()
|
||||
this.$emit('modalevent', {name: 'label', data: label})
|
||||
this.$emit('close')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
88
components/datatable/FieldAttribute.vue
Normal file
88
components/datatable/FieldAttribute.vue
Normal file
@@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<div>
|
||||
<template v-if="keys.length>0">
|
||||
<div class="field is-horizontal" v-for="(v,i) in keys" :key="i">
|
||||
<div class="field-body">
|
||||
<div class="field is-narrow">
|
||||
<div class="control">
|
||||
<input class="input fs-14" type="text" placeholder="" v-model="keys[i]">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input class="input fs-14" type="text" placeholder="" v-model="values[i]">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field is-narrow">
|
||||
<p class="control">
|
||||
<a @click="addAttr()">
|
||||
<SvgIcon v-bind="{name: 'add1.png', type: 'gray', size: 18}"></SvgIcon>
|
||||
</a>
|
||||
<a class="ml-2" @click="remove(i)">
|
||||
<SvgIcon v-bind="{name: 'bin1.svg', type: 'gray', size: 18}"></SvgIcon>
|
||||
</a>
|
||||
<a class="ml-2" @click="jsonData(v, i)">
|
||||
<SvgIcon v-bind="{name: 'apps.svg', type: 'gray', size: 18}"></SvgIcon>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="mb-6" v-else>
|
||||
<button class="button is-primary has-text-white" @click="addAttr()">Thêm thuộc tính</button>
|
||||
</div>
|
||||
<div class="buttons mt-5">
|
||||
<a class="button is-primary has-text-white" @click="update()">Cập nhật</a>
|
||||
</div>
|
||||
<Modal @close="comp=undefined" @update="doUpdate"
|
||||
v-bind="{component: comp, width: '40%', height: '300px', vbind: vbind}" v-if="comp"></Modal>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['field', 'close'],
|
||||
data() {
|
||||
return {
|
||||
keys: [],
|
||||
values: [],
|
||||
comp: undefined,
|
||||
vbind: undefined,
|
||||
current: undefined
|
||||
}
|
||||
},
|
||||
created() {
|
||||
Object.keys(this.field).map(v=>{
|
||||
this.keys.push(v)
|
||||
this.values.push(this.field[v])
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
doUpdate(v) {
|
||||
this.values[this.current.i] = v
|
||||
},
|
||||
jsonData(v, i) {
|
||||
this.current = {v: v, i: i}
|
||||
this.vbind = {field: this.$empty(this.values[i]) || typeof this.values[i] === 'string'? {} : this.values[i], close: true}
|
||||
this.comp = 'datatable/FieldAttribute'
|
||||
},
|
||||
addAttr() {
|
||||
this.keys.push(undefined)
|
||||
this.values.push(undefined)
|
||||
},
|
||||
remove(i) {
|
||||
this.$remove(this.keys, i)
|
||||
this.$remove(this.values, i)
|
||||
},
|
||||
update() {
|
||||
let obj = {}
|
||||
this.keys.map((v,i)=>{
|
||||
if(!this.$empty(v)) obj[v] = v.indexOf('__in')>0? this.values[i].split(',') : this.values[i]
|
||||
})
|
||||
this.$emit('update', obj)
|
||||
this.$emit('modalevent', {name: 'update', data: obj})
|
||||
if(this.close) this.$emit('close')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
170
components/datatable/FilterOption.vue
Normal file
170
components/datatable/FilterOption.vue
Normal file
@@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="field mt-3 mb-1" v-if="field.format==='number'">
|
||||
<label class="label fs-14">Chọn trường<span class="has-text-danger"> * </span> </label>
|
||||
<div class="control">
|
||||
<b-taginput
|
||||
size="is-small"
|
||||
v-model="tagsField"
|
||||
:data="pageData? pageData.fields.filter(v=>v.format==='number') : []"
|
||||
type="is-dark is-light"
|
||||
autocomplete
|
||||
:open-on-focus="true"
|
||||
field="name"
|
||||
icon="plus"
|
||||
placeholder="Chọn trường"
|
||||
>
|
||||
<template slot-scope="props">
|
||||
<span class="mr-3 has-text-danger has-text-weight-bold"> {{props.option.name}}</span>
|
||||
<span :class="tagsField.find(v=>v.id===props.option.id)? 'has-text-dark' : ''"> {{$stripHtml(props.option.label, 60)}} </span>
|
||||
</template>
|
||||
<template slot="empty">
|
||||
Không có trường thỏa mãn
|
||||
</template>
|
||||
</b-taginput>
|
||||
</div>
|
||||
<p class="help has-text-danger" v-if="errors.find(v=>v.name==='tagsField')"> {{errors.find(v=>v.name==='tagsField').message}} </p>
|
||||
</div>
|
||||
<div class="mt-2" v-if="tagsField.length>0">
|
||||
<a @dblclick="expression = expression? (expression + ' ' + v.name) : v.name"
|
||||
class="tag is-rounded" v-for="(v,i) in tagsField" :key="i">
|
||||
<span class="tooltip">
|
||||
{{ v.name }}
|
||||
<span class="tooltiptext" style="top: 60%; bottom: unset; min-width: max-content; left: 25px;">{{ $stripHtml(v.label) }}</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="field is-horizontal mt-3">
|
||||
<div class="field-body">
|
||||
<div class="field" v-if="field.format==='number'">
|
||||
<label class="label fs-14">Biểu thức có dạng Đúng / Sai <span class="has-text-danger"> * </span> </label>
|
||||
<p class="control is-expanded">
|
||||
<input class="input is-small" type="text" v-model="expression">
|
||||
</p>
|
||||
<p class="help has-text-danger" v-if="errors.find(v=>v.name==='expression')"> {{errors.find(v=>v.name==='expression').message}} </p>
|
||||
</div>
|
||||
|
||||
<div class="field" v-else>
|
||||
<label class="label"> Chuỗi kí tự <span class="has-text-danger"> * </span>
|
||||
</label>
|
||||
<p class="control">
|
||||
<input
|
||||
class="input is-small"
|
||||
type="text"
|
||||
placeholder=""
|
||||
v-model="searchText"
|
||||
@change="changeStyle()"
|
||||
/>
|
||||
</p>
|
||||
<p
|
||||
class="help has-text-danger"
|
||||
v-if="errors.find((v) => v.name === 'searchText')"
|
||||
>
|
||||
{{ errors.find((v) => v.name === "searchText").msg }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="field is-narrow" v-if="filterType==='color'">
|
||||
<label class="label fs-14"> Mã màu <span class="has-text-danger"> * </span> </label>
|
||||
<p class="control fs-14">
|
||||
<input type="color" v-model="color" @change="changeStyle()">
|
||||
</p>
|
||||
<p class="help has-text-danger" v-if="errors.find(v=>v.name==='color')"> {{errors.find(v=>v.name==='color').message}} </p>
|
||||
</div>
|
||||
<div class="field is-narrow" v-else-if="filterType==='size'">
|
||||
<label class="label fs-14"> Cỡ chữ <span class="has-text-danger"> * </span> </label>
|
||||
<p class="control fs-14">
|
||||
<input class="input is-small" type="text" placeholder="Nhập số" v-model="size" @change="changeStyle()">
|
||||
</p>
|
||||
<p class="help has-text-danger" v-if="errors.find(v=>v.name==='size')"> {{errors.find(v=>v.name==='size').message}} </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['filterObj', 'filterType', 'pagename', 'field'],
|
||||
data() {
|
||||
return {
|
||||
tagsField: [],
|
||||
expression: undefined,
|
||||
form: undefined,
|
||||
color: undefined,
|
||||
size: undefined,
|
||||
errors: [],
|
||||
searchText: undefined
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.color = this.filterObj.color
|
||||
this.size = this.filterObj.size
|
||||
this.expression = this.filterObj.expression? this.filterObj.expression : this.field.name
|
||||
if(this.filterObj.tags) {
|
||||
this.filterObj.tags.map(v=>{
|
||||
this.tagsField.push(this.pageData.fields.find(x=>x.name===v))
|
||||
})
|
||||
} else if(this.field.format==='number') this.tagsField.push(this.pageData.fields.find(v=>v.name===this.field.name))
|
||||
},
|
||||
watch: {
|
||||
expression: function(newVal) {
|
||||
if(this.$empty(newVal)) return
|
||||
else this.changeStyle()
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
colorscheme: {
|
||||
get: function() {return this.$store.state.colorscheme},
|
||||
set: function(val) {this.$store.commit("updateColorScheme", {colorscheme: val})}
|
||||
},
|
||||
pageData: {
|
||||
get: function() {return this.$store.state[this.pagename]},
|
||||
set: function(val) {this.$store.commit('updateStore', {name: this.pagename, data: val})}
|
||||
},
|
||||
colorchoice: {
|
||||
get: function() {return this.$store.state.colorchoice},
|
||||
set: function(val) {this.$store.commit("updateColorChoice", {colorchoice: val})}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeStyle() {
|
||||
let check = this.field.format==='number'? this.checkExpression() : this.checkCondition()
|
||||
if(!check) return
|
||||
var row = this.field.format==='number'? {expression: this.expression, tags: this.tagsField.map(v=>v.name)}
|
||||
: {keyword: this.searchText, type: 'search'}
|
||||
this.filterType==='color'? row.color = this.color : row.size = this.size
|
||||
this.$emit('databack', row)
|
||||
},
|
||||
checkCondition() {
|
||||
this.errors = []
|
||||
if(this.filterType==='color' && this.$empty(this.color)) this.errors.push({name: 'color', message: 'Chọn màu'})
|
||||
if(this.filterType==='size' && this.$empty(this.size)) this.errors.push({name: 'size', message: 'Nhập cỡ chữ'})
|
||||
if(this.$empty(this.searchText)) this.errors.push({name: 'searchText', message: 'Chưa nhập chuỗi kí tự'})
|
||||
return this.errors.length>0? false : true
|
||||
},
|
||||
checkExpression() {
|
||||
this.errors = []
|
||||
if(this.filterType==='color' && this.$empty(this.color)) this.errors.push({name: 'color', message: 'Chọn màu'})
|
||||
if(this.filterType==='size' && this.$empty(this.size)) this.errors.push({name: 'size', message: 'Nhập cỡ chữ'})
|
||||
let val = this.$copy(this.expression)
|
||||
let exp = this.$copy(this.expression)
|
||||
this.tagsField.forEach(v => {
|
||||
let myRegExp = new RegExp(v.name, 'g')
|
||||
val = val.replace(myRegExp, Math.random())
|
||||
exp = exp.replace(myRegExp, "field.formatNumber(row['" + v.name + "'])")
|
||||
})
|
||||
try {
|
||||
let value = this.$calc(val)
|
||||
if(isNaN(value) || value===Number.POSITIVE_INFINITY || value===Number.NEGATIVE_INFINITY) {
|
||||
this.errors.push({name: 'expression', message: 'Biểu thức không hợp lệ'})
|
||||
} else if(!(eval(value)===true || eval(value)===false)) {
|
||||
this.errors.push({name: 'expression', message: 'Biểu thức không hợp lệ'})
|
||||
}
|
||||
}
|
||||
catch(err) {
|
||||
this.errors.push({name: 'expression', message: 'Biểu thức không hợp lệ'})
|
||||
}
|
||||
return this.errors.length>0? false : true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
207
components/datatable/FormatOption.vue
Normal file
207
components/datatable/FormatOption.vue
Normal file
@@ -0,0 +1,207 @@
|
||||
<template>
|
||||
<div v-if="['bgcolor', 'color', 'textsize'].find((x) => x === sideBar)">
|
||||
<p class="has-text-right has-text-grey is-italic fs-13">
|
||||
Màu sắc sẽ hiển thị theo điều kiện Đúng / Sai, mã lệnh do hệ thống tự sinh
|
||||
</p>
|
||||
<div class="tabs is-boxed">
|
||||
<ul>
|
||||
<li v-for="(v, i) in tabs" :key="i" :class="tab.code === v.code ? 'is-active' : ''" @click="tab = v">
|
||||
<a>{{ v.name }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template v-if="tab.code === 'expression' && ['bgcolor', 'color', 'textsize'].find((x) => x === sideBar)">
|
||||
<template v-if="radio ? radio.code === 'condition' && sideBar === 'bgcolor' : false">
|
||||
<div v-for="(v, i) in bgcolorFilter" :key="v.id" class="px-4">
|
||||
<FilterOption
|
||||
v-bind="{ filterObj: v, filterType: 'color', pagename: pagename, field: openField }"
|
||||
:ref="v.id"
|
||||
@databack="doConditionFilter($event, 'bgcolor', v.id)"
|
||||
/>
|
||||
<p class="fs-14 mt-1" :class="currentField.format === 'string' ? 'mb-1' : 'mb-2'">
|
||||
<a class="has-text-primary mr-5" @click="addCondition(bgcolorFilter)" v-if="bgcolorFilter.length <= 30">
|
||||
Thêm
|
||||
</a>
|
||||
<a class="has-text-danger" @click="removeCondition(bgcolorFilter, i)" v-if="bgcolorFilter.length > 1">
|
||||
Bớt
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else-if="radio ? radio.code === 'condition' && sideBar === 'color' : false">
|
||||
<div v-for="(v, i) in colorFilter" :key="v.id" class="px-4">
|
||||
<FilterOption
|
||||
v-bind="{ filterObj: v, filterType: 'color', pagename: pagename, field: openField }"
|
||||
:ref="v.id"
|
||||
@databack="doConditionFilter($event, 'color', v.id)"
|
||||
/>
|
||||
<p class="fs-14 mt-1" :class="currentField.format === 'string' ? 'mb-1' : 'mb-2'">
|
||||
<a class="has-text-primary mr-5" @click="addCondition(colorFilter)" v-if="colorFilter.length <= 30"> Thêm </a>
|
||||
<a class="has-text-danger" @click="removeCondition(colorFilter, i)" v-if="colorFilter.length > 1"> Bớt </a>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else-if="radio ? radio.code === 'condition' && sideBar === 'textsize' : false">
|
||||
<div v-for="(v, i) in sizeFilter" :key="v.id" class="px-4">
|
||||
<FilterOption
|
||||
v-bind="{ filterObj: v, filterType: 'size', pagename: pagename, field: openField }"
|
||||
:ref="v.id"
|
||||
@databack="doConditionFilter($event, 'textsize', v.id)"
|
||||
/>
|
||||
<p class="fs-14 mt-1" :class="currentField.format === 'string' ? 'mb-1' : 'mb-2'">
|
||||
<a class="has-text-primary mr-5" @click="addCondition(sizeFilter)" v-if="sizeFilter.length <= 30"> Thêm </a>
|
||||
<a class="has-text-danger" @click="removeCondition(sizeFilter, i)" v-if="sizeFilter.length > 1"> Bớt </a>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<template v-else-if="tab.code === 'script' && ['bgcolor', 'color', 'textsize'].find((x) => x === sideBar)">
|
||||
<p class="my-4 mx-4">
|
||||
<a @click="copyContent(script ? script : '')" class="mr-6">
|
||||
<span class="icon-text">
|
||||
<SvgIcon class="mr-2" v-bind="{ name: 'copy.svg', type: 'primary', siz: 18 }"></SvgIcon>
|
||||
<span class="fs-16">Copy</span>
|
||||
</span>
|
||||
</a>
|
||||
<a @click="paste()" class="mr-6">
|
||||
<span class="icon-text">
|
||||
<SvgIcon class="mr-2" v-bind="{ name: 'pen1.svg', type: 'primary', siz: 18 }"></SvgIcon>
|
||||
<span class="fs-16">Paste</span>
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
<div class="mx-4">
|
||||
<textarea class="textarea fs-14" rows="8" v-model="script" @change="checkScript()" @dblclick="doCheck"></textarea>
|
||||
</div>
|
||||
<p class="mt-5 mx-4">
|
||||
<span class="icon-text fsb-18">
|
||||
Replace
|
||||
<SvgIcon v-bind="{ name: 'right.svg', type: 'dark', size: 22 }"></SvgIcon>
|
||||
</span>
|
||||
</p>
|
||||
<div class="field is-grouped mx-4 mt-4">
|
||||
<div class="control">
|
||||
<p class="fsb-14 mb-1">Đoạn text</p>
|
||||
<input class="input" type="text" placeholder="" v-model="source" />
|
||||
</div>
|
||||
<div class="control">
|
||||
<p class="fsb-14 mb-1">Thay bằng</p>
|
||||
<input class="input" type="text" placeholder="" v-model="target" />
|
||||
</div>
|
||||
<div class="control pl-5">
|
||||
<button class="button is-primary is-rounded is-outlined mt-5" @click="replace()">Replace</button>
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt-5 pt-2 mx-4">
|
||||
<span class="icon-text fsb-18">
|
||||
Thay đổi màu
|
||||
<SvgIcon v-bind="{ name: 'right.svg', type: 'dark', size: 22 }"></SvgIcon>
|
||||
</span>
|
||||
</p>
|
||||
<p class="mx-4 mt-4"><button class="button is-primary is-rounded" @click="changeScript()">Cập nhật</button></p>
|
||||
</template>
|
||||
<TableOption v-bind="{ pagename: pagename }" v-else-if="sideBar === 'option'"> </TableOption>
|
||||
<CreateTemplate v-else-if="sideBar === 'template'" v-bind="{ pagename: pagename, field: openField }">
|
||||
</CreateTemplate>
|
||||
</template>
|
||||
<script setup>
|
||||
// FilterOption: () => import("@/components/datatable/FilterOption"),
|
||||
// TableOption: () => import("@/components/datatable/TableOption"),
|
||||
//CreateTemplate: () => import("@/components/datatable/CreateTemplate")
|
||||
import CreateTemplate from "~/components/datatable/CreateTemplate";
|
||||
const { $id, $copy, $empty, $stripHtml } = useNuxtApp();
|
||||
var props = defineProps({
|
||||
event: Object,
|
||||
currentField: Object,
|
||||
pagename: String,
|
||||
});
|
||||
var currentField = props.currentField;
|
||||
var event = props.event;
|
||||
var openField = {};
|
||||
var bgcolorFilter = [];
|
||||
var colorFilter = [];
|
||||
var sizeFilter = [];
|
||||
var sideBar = undefined;
|
||||
var script = undefined;
|
||||
var radio = undefined;
|
||||
var tabs = [
|
||||
{ code: "expression", name: "Biểu thức" },
|
||||
{ code: "script", name: "Mã lệnh" },
|
||||
];
|
||||
var tab = { code: "expression", name: "Biểu thức" };
|
||||
var source = undefined;
|
||||
var target = $copy(currentField.name);
|
||||
|
||||
const initData = function () {
|
||||
openField = event.field;
|
||||
sideBar = event.name;
|
||||
script = event.script;
|
||||
radio = event.radio;
|
||||
let field = event.field;
|
||||
bgcolorFilter = [{ id: $id() }];
|
||||
if (field.bgcolor) {
|
||||
if (Array.isArray(field.bgcolor)) bgcolorFilter = $copy(field.bgcolor);
|
||||
}
|
||||
colorFilter = [{ id: $id() }];
|
||||
if (field.color) {
|
||||
if (Array.isArray(field.color)) colorFilter = $copy(field.color);
|
||||
}
|
||||
sizeFilter = [{ id: $id() }];
|
||||
if (field.textsize) {
|
||||
if (Array.isArray(field.textsize)) sizeFilter = field.textsize;
|
||||
}
|
||||
};
|
||||
|
||||
const doCheck = function () {
|
||||
let text = window.getSelection().toString();
|
||||
if ($empty(text)) return;
|
||||
source = text;
|
||||
};
|
||||
const replace = function () {
|
||||
if ($empty(script)) return;
|
||||
script = script.replaceAll(source, target);
|
||||
};
|
||||
const paste = async function () {
|
||||
script = await navigator.clipboard.readText();
|
||||
};
|
||||
const addCondition = function (arr) {
|
||||
arr.push({ id: $id() });
|
||||
};
|
||||
const removeCondition = function (arr, i) {
|
||||
$delete(arr, i);
|
||||
};
|
||||
const copyContent = function (value) {
|
||||
$copyToClipboard(value);
|
||||
};
|
||||
const checkScript = function () {
|
||||
if ($empty(script)) return;
|
||||
try {
|
||||
JSON.parse(script);
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
const changeScript = function () {
|
||||
if (!checkScript()) return;
|
||||
let copy = $copy(openField);
|
||||
copy[sideBar] = JSON.parse(script);
|
||||
$emit("modalevent", { name: "updatefields", data: copy });
|
||||
};
|
||||
const doConditionFilter = function (v, type, id) {
|
||||
v.id = id;
|
||||
let copy = $copy(currentField);
|
||||
if (copy[type] ? Array.isArray(copy[type]) : false) {
|
||||
let idx = copy[type].findIndex((x) => x.id === id);
|
||||
idx >= 0 ? (copy[type][idx] = v) : copy[type].push(v);
|
||||
} else copy[type] = [v];
|
||||
$emit("modalevent", { name: "updatefields", data: copy });
|
||||
};
|
||||
initData();
|
||||
console.log(sideBar);
|
||||
</script>
|
||||
161
components/datatable/MenuSave.vue
Normal file
161
components/datatable/MenuSave.vue
Normal file
@@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<div class="mb-4" v-if="currentsetting ? currentsetting.user === login.id : false">
|
||||
<p class="fs-16 has-text-findata">
|
||||
Đang mở: <b>{{ $stripHtml(currentsetting.name, 40) }}</b>
|
||||
</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label fs-14">Chọn chế độ lưu <span class="has-text-danger"> * </span></label>
|
||||
<div class="control is-expanded fs-14">
|
||||
<a class="mr-5" v-if="isOverwrite()" @click="changeType('overwrite')">
|
||||
<span class="icon-text">
|
||||
<SvgIcon
|
||||
v-bind="{
|
||||
name: radioSave === 'overwrite' ? 'radio-checked.svg' : 'radio-unchecked.svg',
|
||||
type: 'gray',
|
||||
size: 22,
|
||||
}"
|
||||
></SvgIcon>
|
||||
Ghi đè
|
||||
</span>
|
||||
</a>
|
||||
<a @click="changeType('new')">
|
||||
<span class="icon-text">
|
||||
<SvgIcon
|
||||
v-bind="{ name: radioSave === 'new' ? 'radio-checked.svg' : 'radio-unchecked.svg', type: 'gray', size: 22 }"
|
||||
></SvgIcon>
|
||||
Tạo mới
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="radioSave === 'new'">
|
||||
<div class="field mt-4 px-0 mx-0">
|
||||
<label class="label fs-14">Tên thiết lập <span class="has-text-danger"> * </span></label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" placeholder="" v-model="name" ref="name" v-on:keyup.enter="saveSetting" />
|
||||
</div>
|
||||
<div class="help has-text-danger" v-if="errors.find((v) => v.name === 'name')">
|
||||
{{ errors.find((v) => v.name === "name").msg }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="field mt-4 px-0 mx-0">
|
||||
<label class="label fs-14"> Mô tả </label>
|
||||
<p class="control is-expanded">
|
||||
<textarea class="textarea" rows="4" v-model="note"></textarea>
|
||||
</p>
|
||||
</div>
|
||||
<!--
|
||||
<div class="field mt-4 px-0 mx-0">
|
||||
<label class="label fs-14">Loại thiết lập <span class="has-text-danger"> * </span>
|
||||
</label>
|
||||
<div class="control is-expanded fs-14">
|
||||
<span class="mr-4" v-for="(v,i) in $filter(store.settingtype, {code: ['private', 'public']})">
|
||||
<a class="icon-text" @click="changeOption(v)">
|
||||
<SvgIcon v-bind="{name: `radio-${radioOption===v.code? '' : 'un'}checked.svg`, type: radioOption===v.code? 'primary' : 'gray', size: 22}"></SvgIcon>
|
||||
</a>
|
||||
{{v.name}}
|
||||
</span>
|
||||
</div>
|
||||
</div>-->
|
||||
</template>
|
||||
<div class="field mt-5 px-0 mx-0">
|
||||
<label class="label fs-14" v-if="status !== undefined" :class="status ? 'has-text-primary' : 'has-text-danger'">
|
||||
{{ status ? "Lưu thiết lập thành công." : "Lỗi. Lưu thiết lập thất bại." }}
|
||||
</label>
|
||||
<p class="control is-expanded">
|
||||
<a class="button is-primary has-text-white" @click="saveSetting()">Lưu lại</a>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { useStore } from "@/stores/index";
|
||||
const emit = defineEmits([]);
|
||||
const store = useStore();
|
||||
var props = defineProps({
|
||||
pagename: String,
|
||||
classify: String,
|
||||
option: String,
|
||||
data: Object,
|
||||
focus: Boolean,
|
||||
});
|
||||
const { $empty, $copy, $filter, $stripHtml, $updateapi, $insertapi, $findIndex, $snackbar } = useNuxtApp();
|
||||
var pagename = props.pagename;
|
||||
var radioOption = ref();
|
||||
var login = { id: 1 };
|
||||
var errors = [];
|
||||
var radioType = undefined;
|
||||
var radioDefault = 0;
|
||||
var radioSave = ref("new");
|
||||
var note = undefined;
|
||||
var status = undefined;
|
||||
var name = undefined;
|
||||
var currentsetting = undefined;
|
||||
var pagedata = store[props.pagename];
|
||||
async function saveSetting() {
|
||||
errors = [];
|
||||
let detail = pagename ? { fields: pagedata.fields } : {};
|
||||
if (pagename) {
|
||||
let element = pagedata.tablesetting || {};
|
||||
if (element !== store.originsetting) detail.tablesetting = element;
|
||||
if (pagedata.filters ? pagedata.filters.length > 0 : false) {
|
||||
detail.filters = pagedata.filters;
|
||||
}
|
||||
}
|
||||
if (props.option) detail.option = props.option;
|
||||
if (props.data) detail.data = props.data;
|
||||
let data = {
|
||||
user: login.id,
|
||||
name: name,
|
||||
detail: detail,
|
||||
note: note,
|
||||
type: radioType.id,
|
||||
classify: props.classify ? props.classify : store.settingclass.find((v) => v.code === "data-field").id,
|
||||
default: radioDefault,
|
||||
update_time: new Date(),
|
||||
};
|
||||
let result;
|
||||
if (radioSave.value === "new") {
|
||||
if ($empty(name)) {
|
||||
return errors.push({ name: "name", msg: "Tên thiết lập không được bỏ trống" });
|
||||
}
|
||||
result = await $insertapi("usersetting", data);
|
||||
} else {
|
||||
let copy = $copy(currentsetting);
|
||||
copy.detail = detail;
|
||||
copy.update_time = new Date();
|
||||
result = await $updateapi("usersetting", copy);
|
||||
}
|
||||
if (radioSave.value === "new") {
|
||||
emit("modalevent", { name: "opensetting", data: result });
|
||||
} else {
|
||||
let idx = $findIndex(store.settings, { id: result.id });
|
||||
if (idx >= 0) {
|
||||
let copy = $copy(store.settings);
|
||||
copy[idx] = result;
|
||||
store.commit("settings", copy);
|
||||
}
|
||||
$snackbar("Lưu thiết lập thành công");
|
||||
emit("modalevent", { name: "updatesetting", data: result });
|
||||
emit("close");
|
||||
}
|
||||
}
|
||||
function isOverwrite() {
|
||||
return true;
|
||||
}
|
||||
function changeType(value) {
|
||||
radioSave.value = value;
|
||||
}
|
||||
function changeOption(v) {
|
||||
radioOption.value = v.code;
|
||||
}
|
||||
function initData() {
|
||||
radioType = store.settingtype.find((v) => v.code === "private");
|
||||
if (props.pagename) currentsetting = $copy(pagedata.setting ? pagedata.setting : undefined);
|
||||
if (!currentsetting) radioSave.value = "new";
|
||||
else if (currentsetting.user !== login.id) radioSave.value = "new";
|
||||
else radioSave.value = "overwrite";
|
||||
}
|
||||
initData();
|
||||
</script>
|
||||
159
components/datatable/ModelInfo.vue
Normal file
159
components/datatable/ModelInfo.vue
Normal file
@@ -0,0 +1,159 @@
|
||||
<template>
|
||||
<div class="tabs">
|
||||
<ul>
|
||||
<li :class="`${v.code === tab ? 'is-active has-text-weight-bold fs-18' : 'fs-18'}`" v-for="v in tabs">
|
||||
<a @click="changeTab(v)">{{ v.name }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<template v-if="tab === 'datatype'">
|
||||
<Caption class="mb-3" v-bind="{ title: 'Kiểu dữ liệu (type)', type: 'has-text-warning' }"></Caption>
|
||||
<div class="py-1 border-bottom is-clickable" v-for="x in current.fields">
|
||||
{{ x.name }}
|
||||
<span class="ml-6 has-text-grey">{{ x.type }}</span>
|
||||
<a class="ml-6 has-text-primary" v-if="x.model" @click="openModel(x)">{{ x.model }}</a>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="columns mx-0 mb-0 pb-0">
|
||||
<div class="column is-7">
|
||||
<Caption class="mb-2" v-bind="{ title: 'Values', type: 'has-text-warning' }"></Caption>
|
||||
<input class="input" rows="1" v-model="values" />
|
||||
</div>
|
||||
<div class="column is-4s">
|
||||
<Caption class="mb-2" v-bind="{ title: 'Filter', type: 'has-text-warning' }"></Caption>
|
||||
<input class="input" rows="1" v-model="filter" />
|
||||
</div>
|
||||
<div class="column is-1">
|
||||
<Caption class="mb-2" v-bind="{ title: 'Load', type: 'has-text-warning' }"></Caption>
|
||||
<div>
|
||||
<button class="button is-primary has-text-white" @click="loadData()">Load</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Caption class="mb-2" v-bind="{ title: 'Query', type: 'has-text-warning' }"></Caption>
|
||||
<div class="mb-4">
|
||||
{{ query }}
|
||||
<a class="has-text-primary ml-5" @click="copy()">copy</a>
|
||||
<p>
|
||||
{{ apiUrl }}
|
||||
<a class="has-text-primary ml-5" @click="$copyToClipboard(apiUrl)">copy</a>
|
||||
<a class="has-text-primary ml-5" target="_blank" :href="apiUrl">open</a>
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<Caption class="mb-2" v-bind="{ title: 'Data', type: 'has-text-warning' }"></Caption>
|
||||
<DataTable v-bind="{ pagename: pagename }" v-if="pagedata" />
|
||||
</div>
|
||||
</template>
|
||||
<Modal @close="showmodal = undefined" v-bind="showmodal" v-if="showmodal"></Modal>
|
||||
</template>
|
||||
<script setup>
|
||||
import { useStore } from "@/stores/index";
|
||||
var props = defineProps({
|
||||
data: Array,
|
||||
info: Object,
|
||||
});
|
||||
const { $getdata, $getapi, $createField, $clone, $getpage, $empty, $copyToClipboard, $find } = useNuxtApp();
|
||||
const store = useStore();
|
||||
var pagename = "pagedata99";
|
||||
var pagedata = ref();
|
||||
pagedata.value = $getpage();
|
||||
store.commit(pagename, pagedata);
|
||||
let list = ["LogEntry", "Permission", "ContentType", "Session", "Group"];
|
||||
var current = ref({ fields: [] });
|
||||
var tabs = [
|
||||
{ code: "datatype", name: "Kiểu dữ liệu" },
|
||||
{ code: "table", name: "Dữ liệu" },
|
||||
];
|
||||
var tab = ref("datatype");
|
||||
var datatable = ref();
|
||||
var query = ref();
|
||||
var values, filter;
|
||||
var apiUrl = ref();
|
||||
var showmodal = ref();
|
||||
var data = props.data;
|
||||
current.value = props.info;
|
||||
function changeMenu(v) {
|
||||
values = undefined;
|
||||
filter = undefined;
|
||||
current.value = v;
|
||||
if (tab.value === "table") loadData();
|
||||
}
|
||||
async function changeTab(v) {
|
||||
tab.value = v.code;
|
||||
if (v.code === "table") loadData();
|
||||
}
|
||||
async function loadData() {
|
||||
let vfilter = filter ? filter.trim() : undefined;
|
||||
if (vfilter) {
|
||||
try {
|
||||
vfilter = JSON.parse(vfilter);
|
||||
} catch (error) {
|
||||
alert("Cấu trúc filter có lỗi");
|
||||
vfilter = undefined;
|
||||
}
|
||||
}
|
||||
let params = { values: values ? values.trim() : undefined, filter: filter };
|
||||
let modelName = current.value.model;
|
||||
let found = {
|
||||
name: modelName.toLowerCase().replace("_", ""),
|
||||
url: `data/${modelName}/`,
|
||||
url_detail: `data-detail/${modelName}/`,
|
||||
params: params,
|
||||
};
|
||||
query.value = $clone(found);
|
||||
let rs = await $getapi([found]);
|
||||
if (rs === "error") return alert("Đã xảy ra lỗi, hãy xem lại câu lệnh.");
|
||||
datatable.value = rs[0].data.rows;
|
||||
showData();
|
||||
|
||||
// api query
|
||||
const baseUrl = "https://api.y99.vn/" + `${query.value.url}`;
|
||||
apiUrl.value = baseUrl;
|
||||
let vparams = !$empty(values) ? { values: values } : null;
|
||||
if (!$empty(filter)) {
|
||||
vparams = vparams ? { values: values, filter: filter } : { filter: filter };
|
||||
}
|
||||
if (vparams) {
|
||||
let url = new URL(baseUrl);
|
||||
let searchParams = new URLSearchParams(vparams);
|
||||
url.search = searchParams.toString();
|
||||
apiUrl.value = baseUrl + url.search;
|
||||
}
|
||||
}
|
||||
function showData() {
|
||||
let arr = [];
|
||||
if (!$empty(values)) {
|
||||
let arr1 = values.trim().split(",");
|
||||
arr1.map((v) => {
|
||||
let val = v.trim();
|
||||
let field = $createField(val, val, "string", true);
|
||||
arr.push(field);
|
||||
});
|
||||
} else {
|
||||
current.value.fields.map((v) => {
|
||||
let field = $createField(v.name, v.name, "string", true);
|
||||
arr.push(field);
|
||||
});
|
||||
}
|
||||
let clone = $clone(pagedata.value);
|
||||
clone.fields = arr;
|
||||
clone.data = datatable.value;
|
||||
pagedata.value = undefined;
|
||||
setTimeout(() => (pagedata.value = clone));
|
||||
}
|
||||
function copy() {
|
||||
$copyToClipboard(JSON.stringify(query.value));
|
||||
}
|
||||
function openModel(x) {
|
||||
showmodal.value = {
|
||||
component: "datatable/ModelInfo",
|
||||
title: x.model,
|
||||
width: "70%",
|
||||
height: "600px",
|
||||
vbind: { data: data, info: $find(data, { model: x.model }) },
|
||||
};
|
||||
}
|
||||
</script>
|
||||
s
|
||||
334
components/datatable/NewField.vue
Normal file
334
components/datatable/NewField.vue
Normal file
@@ -0,0 +1,334 @@
|
||||
<template>
|
||||
<div class="tabs is-boxed">
|
||||
<ul>
|
||||
<li :class="selectType.code===v.code? 'is-active fs-16' : 'fs-16'" v-for="v in fieldType">
|
||||
<a @click="selectType = v"><span>{{ v.name }}</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<template v-if="selectType.code==='formula'">
|
||||
<b-radio :class="i===1? 'ml-5' : null" v-model="choice" v-for="(v,i) in choices" :key="i"
|
||||
:native-value="v.code">
|
||||
<span :class="v.code===choice? 'fsb-16' : 'fs-16'">{{v.name}}</span>
|
||||
</b-radio>
|
||||
<div class="has-background-light mt-3 px-3 py-3">
|
||||
<div class="tags are-medium mb-0" v-if="choice==='function'">
|
||||
<span :class="`tag ${func===v.code? 'is-primary' : 'is-dark'} is-rounded is-clickable`"
|
||||
v-for="(v,i) in funcs" :key="i" @click="changeFunc(v)" @dblclick="addFunc(v)">{{v.name}}</span>
|
||||
</div>
|
||||
<template v-else>
|
||||
<div class="field px-0 mx-0">
|
||||
<label class="label fs-14">Chọn trường<span class="has-text-danger"> *</span> </label>
|
||||
<div class="control">
|
||||
<!--<b-taginput
|
||||
size="is-small"
|
||||
v-model="tags"
|
||||
:data="fields.filter(v=>v.format==='number')"
|
||||
type="is-dark is-light"
|
||||
autocomplete
|
||||
:open-on-focus="true"
|
||||
field="caption"
|
||||
icon="plus"
|
||||
placeholder="Chọn trường"
|
||||
>
|
||||
<template slot-scope="props">
|
||||
<span class="mr-3 has-text-danger">{{props.option.name}}</span>
|
||||
<span :class="tags.find(v=>v.id===props.option.id)? 'has-text-dark' : ''">{{$stripHtml(props.option.label,50)}}</span>
|
||||
</template>
|
||||
<template slot="empty">
|
||||
Không có trường thỏa mãn
|
||||
</template>
|
||||
</b-taginput>-->
|
||||
</div>
|
||||
<p class="help has-text-danger" v-if="errors.find(v=>v.name==='tags')"> {{errors.find(v=>v.name==='tags').message}} </p>
|
||||
</div>
|
||||
<div class="field mt-3" v-if="tags.length>0">
|
||||
<p class="help is-primary mb-1">Click đúp vào để thêm vào công thức tính.</p>
|
||||
<div class="tags mb-2">
|
||||
<span @dblclick="formula = formula? (formula + ' ' + v.name) : v.name" class="tag is-dark is-rounded is-clickable"
|
||||
v-for="v in tags">
|
||||
{{v.name}}
|
||||
</span>
|
||||
</div>
|
||||
<div class="tags">
|
||||
<span v-for="(v,i) in operator" :key="i">
|
||||
<span @dblclick="addOperator(v)" class="tag is-primary is-rounded is-clickable mr-4">
|
||||
<span class="fs-16">{{v.code}}</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="field mt-3 px-0 mx-0">
|
||||
<label class="label fs-14">Công thức tính <span class="has-text-danger"> * </span> </label>
|
||||
<p class="control">
|
||||
<textarea class="textarea" rows="3" type="text" :placeholder="placeholder" v-model="formula"> </textarea>
|
||||
</p>
|
||||
<p class="help has-text-danger" v-if="errors.find(v=>v.name==='formula')"> {{errors.find(v=>v.name==='formula').message}} </p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field is-horizontal mt-3 px-0 mx-0">
|
||||
<div class="field-body">
|
||||
<div class="field">
|
||||
<label class="label fs-14">Hiển thị theo <span class="has-text-danger"> * </span> </label>
|
||||
<div class="control">
|
||||
<b-autocomplete
|
||||
size="is-small"
|
||||
icon-right="magnify"
|
||||
:value="selectUnit? selectUnit.name : ''"
|
||||
placeholder=""
|
||||
:keep-first=true
|
||||
:open-on-focus=true
|
||||
:data="moneyunit"
|
||||
field="name"
|
||||
@select="option => selectUnit = option">
|
||||
</b-autocomplete>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label fs-14">Phần thập phân</label>
|
||||
<div class="control">
|
||||
<input class="input is-small" type="text" placeholder="" v-model="decimal">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="field px-0 mx-0">
|
||||
<label class="label">Tên trường <span class="has-text-danger"> * </span> </label>
|
||||
<p class="control">
|
||||
<input class="input" type="text" placeholder="Tên trường phải là duy nhất" v-model="name"
|
||||
:readonly="selectType? selectType.code==='formula': false">
|
||||
</p>
|
||||
<p class="help has-text-danger" v-if="errors.find(v=>v.name==='name')"> {{errors.find(v=>v.name==='name').message}} </p>
|
||||
<p class="help has-text-primary" v-else> Tên trường do hệ thống tự sinh.</p>
|
||||
</div>
|
||||
<div class="mt-5">
|
||||
<label class="label">Mô tả<span class="has-text-danger"> *</span></label>
|
||||
<div class="field has-addons">
|
||||
<div class="control is-expanded" >
|
||||
<input
|
||||
class="input"
|
||||
type="text"
|
||||
v-model="label"
|
||||
/>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button class="button" @click="editLabel()">
|
||||
<span><SvgIcon v-bind="{name: 'pen.svg', type: 'dark', size: 17}"></SvgIcon></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<p class="help has-text-danger" v-if="errors.find(v=>v.name==='label')"> {{errors.find(v=>v.name==='label').message}} </p>
|
||||
</div>
|
||||
<div class="field mt-5" v-if="selectType.code==='empty'">
|
||||
<label class="label"
|
||||
>Kiểu dữ liệu
|
||||
<span class="has-text-danger"> * </span>
|
||||
</label>
|
||||
<div class="control fs-14">
|
||||
<span class="mr-4" v-for="(v,i) in datatype">
|
||||
<a class="icon-text" @click="changeType(v)">
|
||||
<SvgIcon v-bind="{name: `radio-${radioType.code===v.code? '' : 'un'}checked.svg`, type: 'gray', size: 22}"></SvgIcon>
|
||||
</a>
|
||||
{{v.name}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field mt-5">
|
||||
<p class="control">
|
||||
<a class="button is-primary has-text-white"
|
||||
@click="selectType.code==='formula'? createField() : createEmptyField()">Tạo cột</a>
|
||||
</p>
|
||||
</div>
|
||||
<Modal v-bind="showmodal" v-if="showmodal" @label="changeLabel" @close="close"></Modal>
|
||||
</template>
|
||||
<script setup>
|
||||
import { useStore } from '@/stores/index'
|
||||
import ScrollBox from '~/components/datatable/ScrollBox'
|
||||
const emit = defineEmits(['modalevent'])
|
||||
const store = useStore()
|
||||
const { $id, $copy, $clone, $empty, $stripHtml, $createField, $calc, $isNumber } = useNuxtApp()
|
||||
var props = defineProps({
|
||||
pagename: String,
|
||||
field: Object,
|
||||
filters: Object,
|
||||
filterData: Object,
|
||||
width: String
|
||||
})
|
||||
const moneyunit = store.moneyunit
|
||||
const datatype = store.datatype
|
||||
var showmodal = ref()
|
||||
var pagedata = store[props.pagename]
|
||||
var selectUnit = moneyunit.find(v=>v.code==='one')
|
||||
var data = []
|
||||
var current = 1
|
||||
var filterData = []
|
||||
var loading = false
|
||||
var fieldType = [{code: 'formula', name: 'Tạo công thức'}, {code: 'empty', name: 'Tạo cột rỗng'}]
|
||||
var errors = []
|
||||
var tags = []
|
||||
var formula = undefined
|
||||
var name = `f${$id().toLocaleLowerCase()}`
|
||||
var label = undefined
|
||||
var errors = []
|
||||
var selectType = fieldType.find(v=>v.code==='empty')
|
||||
var radioType = ref(datatype.find(v=>v.code==='string'))
|
||||
var fields = []
|
||||
var options = undefined
|
||||
var columns = $copy(pagedata.fields.filter(v=>v.format==='number'))
|
||||
var decimal = undefined
|
||||
var choices = [{code: 'column', name: 'Dùng cột dữ liệu'}, {code: 'function', name: 'Dùng hàm số'}]
|
||||
var choice = 'column'
|
||||
var funcs = [{code: 'sum', name: 'Sum'}, {code: 'max', name: 'Max'}, {code: 'min', name: 'Min'}, {code: 'avg', name: 'Avg'}]
|
||||
var func = 'sum'
|
||||
var placeholder = 'Minh hoạ công thức: f10001 + f10002'
|
||||
var args = undefined
|
||||
var operator = [{code: '+', name: 'Cộng'}, {code: '-', name: 'Trừ'}, {code: '*', name: 'Nhân'}, {code: '/', name: 'Chia'}, {code: '>', name: 'Lớn hơn'},
|
||||
{code: '>=', name: 'Lớn hơn hoặc bằng'}, {code: '<', name: 'Nhỏ hơn'}, {code: '<=', name: 'Nhỏ hơn hoặc bằng'}, {code: '==', name: 'Bằng'},
|
||||
{code: '&&', name: 'Và'}, {code: '||', name: 'Hoặc'}, {code: 'iif', name: 'Điều kiện rẽ nhánh'}]
|
||||
function editLabel() {
|
||||
if($empty(label)) return
|
||||
showmodal.value = {component: 'datatable/EditLabel', width: '500px', height: '300px', vbind: {label: label}}
|
||||
}
|
||||
function close() {
|
||||
showmodal.value = null
|
||||
}
|
||||
function changeLabel(evt) {
|
||||
label = evt
|
||||
showmodal.value = null
|
||||
}
|
||||
function changeType(v) {
|
||||
radioType.value = v
|
||||
}
|
||||
function addFunc(v) {
|
||||
formula = (formula? formula + ' ' : '') + v.name + '(C0: C2)'
|
||||
}
|
||||
function addOperator(v) {
|
||||
let text = v.code==='iif'? 'a>b? c : d' : v.code
|
||||
formula = `${formula || ''} ${text}`
|
||||
}
|
||||
function changeFunc(v) {
|
||||
placeholder = `${v.name}(C0:C2) hoặc ${v.name}(C0,C1,C2). C là viết tắt của cột dữ liệu, số thứ tự của cột bắt đầu từ 0`
|
||||
func = v.code
|
||||
}
|
||||
function getFields() {
|
||||
fields = pagedata? $copy(pagedata.fields) : []
|
||||
fields.map(v=>v.caption = (v.label? v.label.indexOf('<')>=0 : false)? v.name : v.label)
|
||||
}
|
||||
function checkFunc() {
|
||||
let error = false
|
||||
let val = formula.trim().replaceAll(' ', '')
|
||||
if(val.toLowerCase().indexOf(func)<0) error = true
|
||||
let start = val.toLowerCase().indexOf('(')
|
||||
let end = val.toLowerCase().indexOf(')')
|
||||
if( start<0 || end<0) error = true
|
||||
let content = val.substring(start+1, end)
|
||||
if($empty(content)) error = true
|
||||
let content1 = content.replaceAll(':', ',')
|
||||
let arr = content1.split(',')
|
||||
arr.map(v=>{
|
||||
let arr1 = v.toLowerCase().split('c')
|
||||
if(arr1.length!==2) error = true
|
||||
else if(!$isNumber(arr1[1])) error = true
|
||||
})
|
||||
return error? 'error' : content
|
||||
}
|
||||
function checkValid() {
|
||||
errors = []
|
||||
if(tags.length===0 && choice==='column') {
|
||||
errors.push({name: 'tags', message: 'Chưa chọn trường xây dựng công thức.'})
|
||||
}
|
||||
if(!$empty(formula)? $empty(formula.trim()) : true) {
|
||||
errors.push({name: 'formula', message: 'Công thức không được bỏ trống.'})
|
||||
}
|
||||
if(!$empty(label)? $empty(label.trim()) : true )
|
||||
errors.push({name: 'label', message: 'Mô tả không được bỏ trống.'})
|
||||
else if(pagedata.fields.find(v=>v.label.toLowerCase()===label.toLowerCase())) {
|
||||
errors.push({name: 'label', message: 'Mô tả bị trùng. Hãy đặt mô tả khác.'})
|
||||
}
|
||||
if(errors.length>0) return false
|
||||
//check formula in case use column
|
||||
if(choice==='column') {
|
||||
let val = $copy(formula)
|
||||
tags.forEach(v => {
|
||||
let myRegExp = new RegExp(v.name, 'g')
|
||||
val = val.replace(myRegExp, Math.random())
|
||||
})
|
||||
try {
|
||||
let value = $calc(val)
|
||||
if(isNaN(value) || value===Number.POSITIVE_INFINITY || value===Number.NEGATIVE_INFINITY) {
|
||||
errors.push({name: 'formula', message: 'Công thức không hợp lệ'})
|
||||
}
|
||||
}
|
||||
catch(err) {
|
||||
console.log(err)
|
||||
errors.push({name: 'formula', message: 'Công thức không hợp lệ'})
|
||||
}
|
||||
} else {
|
||||
if(checkFunc()==='error') errors.push({name: 'formula', message: `Hàm ${func.toUpperCase()} không hợp lệ`})
|
||||
}
|
||||
return errors.length>0? false : true
|
||||
}
|
||||
function createField() {
|
||||
if(!checkValid()) return
|
||||
let field = $createField(name.trim(), label.trim(), 'number', true)
|
||||
field.formula = formula.trim().replaceAll(' ', '')
|
||||
if(choice==='function') {
|
||||
field.func = func
|
||||
field.vals = checkFunc()
|
||||
} else field.tags = tags.map(v=>v.name)
|
||||
field.level = Math.max(...pagedata.fields.map(v=>v.level? v.level : 0)) + 1
|
||||
field.unit = selectUnit.detail
|
||||
field.decimal = decimal
|
||||
field.disable = 'search,value'
|
||||
let copy = $copy(pagedata)
|
||||
copy.fields.push(field)
|
||||
store.commit(props.pagename, copy)
|
||||
emit('newfield', field)
|
||||
tags = []
|
||||
formula = undefined
|
||||
label = undefined
|
||||
name = `f${$id()}`
|
||||
emit('close')
|
||||
}
|
||||
function createEmptyField() {
|
||||
errors = []
|
||||
if(!$empty(name)? $empty(name.trim()) : true )
|
||||
errors.push({name: 'name', message: 'Tên không được bỏ trống.'})
|
||||
else if(pagedata.fields.find(v=>v.name.toLowerCase()===name.toLowerCase())) {
|
||||
errors.push({name: 'name', message: 'Tên trường bị trùng. Hãy đặt tên khác.'})
|
||||
}
|
||||
if(!$empty(label)? $empty(label.trim()) : true )
|
||||
errors.push({name: 'label', message: 'Mô tả không được bỏ trống.'})
|
||||
else if(pagedata.fields.find(v=>v.label.toLowerCase()===label.toLowerCase())) {
|
||||
errors.push({name: 'label', message: 'Mô tả bị trùng. Hãy đặt mô tả khác.'})
|
||||
}
|
||||
if(errors.length>0) return
|
||||
let field = $createField(name.trim(), label.trim(), radioType.value.code, true)
|
||||
if(selectType.code==='chart') field = createChartField()
|
||||
let copy = $clone(pagedata)
|
||||
copy.fields.push(field)
|
||||
copy.update = {fields: copy.fields}
|
||||
store.commit(props.pagename, copy)
|
||||
//pagedata = copy
|
||||
emit('newfield', field)
|
||||
label = undefined
|
||||
name = `f${$id()}`
|
||||
emit('close')
|
||||
}
|
||||
function createChartField() {
|
||||
let array = pagedata.fields.filter(v=>v.format==='number' && v.show)
|
||||
if(args) array = $copy(args)
|
||||
let text = ''
|
||||
array.map((v,i)=>text += `'${v.name}${i<array.length-1? "'," : "'"}`)
|
||||
let label = ''
|
||||
array.map((v,i)=>label += `'${$stripHtml(v.label)}${i<array.length-1? "'," : "'"}`)
|
||||
let field = $createField(name.trim(), label.trim(), radioType.value.code, true)
|
||||
field.chart = 'yes'
|
||||
field.template = `<TrendingChart class="is-clickable" v-bind="{row: row, fields: [${text}], labels: [${label}], width: '80', height: '26', 'header': ['stock_code', 'name']}"/>`
|
||||
return field
|
||||
}
|
||||
//============
|
||||
getFields()
|
||||
</script>
|
||||
64
components/datatable/Pagination.vue
Normal file
64
components/datatable/Pagination.vue
Normal file
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<nav class="pagination mx-0" role="navigation" aria-label="pagination">
|
||||
<ul class="pagination-list" v-if="pageInfo">
|
||||
<li v-for="v in pageInfo">
|
||||
<a v-if="currentPage===v" class="pagination-link is-current has-background-primary has-text-white" :aria-label="`Page ${v}`" aria-current="page">{{ v }}</a>
|
||||
<a v-else href="#" class="pagination-link" :aria-label="`Goto page ${v}`" @click="changePage(v)">{{ v }}</a>
|
||||
</li>
|
||||
<a @click="previous()" class="pagination-previous ml-5">
|
||||
<SvgIcon v-bind="{name: 'left1.svg', type: 'dark', size: 20, alt: 'Tìm kiếm'}"></SvgIcon>
|
||||
</a>
|
||||
<a @click="next()" class="pagination-next">
|
||||
<SvgIcon v-bind="{name: 'right.svg', type: 'dark', size: 20, alt: 'Tìm kiếm'}"></SvgIcon>
|
||||
</a>
|
||||
</ul>
|
||||
</nav>
|
||||
</template>
|
||||
<script setup>
|
||||
const emit = defineEmits(['changepage'])
|
||||
var props = defineProps({
|
||||
data: Array,
|
||||
perPage: Number
|
||||
})
|
||||
var currentPage = 1
|
||||
var totalRows = props.data.length
|
||||
var lastPage = parseInt(totalRows / props.perPage)
|
||||
if(lastPage*props.perPage<totalRows) lastPage += 1
|
||||
var pageInfo = ref()
|
||||
function pages(current_page, last_page, onSides = 2) {
|
||||
// pages
|
||||
let pages = [];
|
||||
// Loop through
|
||||
for (let i = 1; i <= last_page; i++) {
|
||||
// Define offset
|
||||
let offset = (i == 1 || last_page) ? onSides + 1 : onSides;
|
||||
// If added
|
||||
if (i == 1 || (current_page - offset <= i && current_page + offset >= i) ||
|
||||
i == current_page || i == last_page) {
|
||||
pages.push(i);
|
||||
} else if (i == current_page - (offset + 1) || i == current_page + (offset + 1)) {
|
||||
pages.push('...');
|
||||
}
|
||||
}
|
||||
return pages;
|
||||
}
|
||||
function changePage(page) {
|
||||
if(page==='...') return
|
||||
currentPage = page
|
||||
pageInfo.value = pages(page, lastPage, 2)
|
||||
emit('changepage', page)
|
||||
}
|
||||
pageInfo.value = pages(1, lastPage, 2)
|
||||
watch(() => props.data, (newVal, oldVal) => {
|
||||
totalRows = props.data.length
|
||||
lastPage = parseInt(totalRows / props.perPage)
|
||||
if(lastPage*props.perPage<totalRows) lastPage += 1
|
||||
pageInfo.value = pages(1, lastPage, 2)
|
||||
})
|
||||
function previous() {
|
||||
if(currentPage>1) changePage(currentPage-1)
|
||||
}
|
||||
function next() {
|
||||
if(currentPage<lastPage) changePage(currentPage+1)
|
||||
}
|
||||
</script>
|
||||
111
components/datatable/ScrollBox.vue
Normal file
111
components/datatable/ScrollBox.vue
Normal file
@@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<div class="px-2" :style="`max-height: ${maxheight}; overflow-y: auto;`">
|
||||
<div class="field is-grouped py-1 border-bottom my-0" v-for="(v, i) in rows" :key="i">
|
||||
<p class="control is-expanded py-0 fs-14 hyperlink" @click="doClick(v,i)">
|
||||
{{ $stripHtml(v[name] || v.fullname || v.code || 'n/a', 75) }}
|
||||
<span class="icon has-text-primary" v-if="checked[i] && notick!==true">
|
||||
<SvgIcon v-bind="{name: 'tick.svg', type: 'primary', size: 15}"></SvgIcon>
|
||||
</span>
|
||||
</p>
|
||||
<p class="control py-0" v-if="show">
|
||||
<span class="icon-text has-text-grey mr-2 fs-13" v-if="show.author">
|
||||
<SvgIcon v-bind="{name: 'user.svg', type: 'gray', size: 15}"></SvgIcon>
|
||||
<span>{{ v[show.author] }}</span>
|
||||
</span>
|
||||
<span class="icon-text has-text-grey mr-2 fs-13" v-if="show.view">
|
||||
<SvgIcon v-bind="{name: 'view.svg', type: 'gray', size: 15}"></SvgIcon>
|
||||
<span>{{ v[show.view] }}</span>
|
||||
</span>
|
||||
<span class="fs-13 has-text-grey" v-if="show.time">{{$dayjs(v['create_time']).fromNow(true)}}</span>
|
||||
<span class="tooltip">
|
||||
<a class="icon ml-1" v-if="show.link" @click="doClick(v,i, 'newtab')">
|
||||
<SvgIcon v-bind="{name: 'opennew.svg', type: 'gray', size: 15}"></SvgIcon>
|
||||
</a>
|
||||
<span class="tooltiptext">Mở trong tab mớ</span>
|
||||
</span>
|
||||
<span class="tooltip" v-if="show.rename">
|
||||
<a class="icon ml-1" @click="$emit('rename', v, i)">
|
||||
<SvgIcon v-bind="{name: 'pen1.svg', type: 'gray', size: 15}"></SvgIcon>
|
||||
</a>
|
||||
<span class="tooltiptext">Đổi tên</span>
|
||||
</span>
|
||||
<span class="tooltip" v-if="show.rename">
|
||||
<a class="icon has-text-danger ml-1" @click="$emit('remove', v, i)">
|
||||
<SvgIcon v-bind="{name: 'bin1.svg', type: 'gray', size: 15}"></SvgIcon>
|
||||
</a>
|
||||
<span class="tooltiptext">Xóa</span>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['data', 'name', 'maxheight', 'perpage', 'sort', 'selects', 'keyval', 'show', 'notick'],
|
||||
data() {
|
||||
return {
|
||||
currentPage: 1,
|
||||
total: this.data.length,
|
||||
rows: this.data.slice(0, this.perpage),
|
||||
selected: [],
|
||||
checked: {},
|
||||
time: undefined,
|
||||
array: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getdata()
|
||||
},
|
||||
watch: {
|
||||
data: function(newVal) {
|
||||
this.getdata()
|
||||
},
|
||||
selects: function(newVal) {
|
||||
this.getSelect()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getdata() {
|
||||
this.currentPage = 1
|
||||
this.array = this.$copy(this.data)
|
||||
if(this.sort!==false) {
|
||||
let f = {}
|
||||
let showtime = this.show? this.show.time : false
|
||||
showtime? f['create_time'] = 'desc' : f[this.name] = 'asc'
|
||||
this.$multiSort(this.array, f)
|
||||
}
|
||||
this.rows = this.array.slice(0, this.perpage)
|
||||
this.getSelect()
|
||||
},
|
||||
getSelect() {
|
||||
if(!this.selects) return
|
||||
this.selected = []
|
||||
this.checked = {}
|
||||
this.selects.map(v=>{
|
||||
let idx = this.rows.findIndex(x=>x[this.keyval? this.keyval : this.name]===v)
|
||||
if(idx>=0) {
|
||||
this.selected.push(this.rows[idx])
|
||||
this.checked[idx] = true
|
||||
}
|
||||
})
|
||||
},
|
||||
doClick(v, i, type) {
|
||||
this.checked[i] = this.checked[i]? false : true
|
||||
this.checked = this.$copy(this.checked)
|
||||
let idx = this.selected.findIndex(x=>x.id===v.id)
|
||||
idx>=0? this.$remove(this.selected) : this.selected.push(v)
|
||||
this.$emit('selected', v, type)
|
||||
},
|
||||
handleScroll(e) {
|
||||
const bottom = e.target.scrollHeight - e.target.scrollTop -5 < e.target.clientHeight
|
||||
if (bottom) {
|
||||
if(this.total? this.total>this.rows.length : true) {
|
||||
this.currentPage +=1
|
||||
let arr = this.array.filter((ele,index) => (index>=(this.currentPage-1)*this.perpage && index<this.currentPage*this.perpage))
|
||||
this.rows = this.rows.concat(arr)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
99
components/datatable/TableOption.vue
Normal file
99
components/datatable/TableOption.vue
Normal file
@@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr class="fs-14">
|
||||
<th>#</th>
|
||||
<th>Tên trường</th>
|
||||
<th>Tên cột</th>
|
||||
<th>...</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="fs-14" v-for="(v, i) in fields">
|
||||
<td>{{ i }}</td>
|
||||
<td>
|
||||
<a class="has-text-primary" @click="openField(v, i)">{{ v.name }}</a>
|
||||
</td>
|
||||
<td>{{ $stripHtml(v.label, 50) }}</td>
|
||||
<td>
|
||||
<a class="mr-4" @click="moveDown(v, i)">
|
||||
<SvgIcon v-bind="{ name: 'down1.png', type: 'dark', size: 18 }"></SvgIcon>
|
||||
</a>
|
||||
<a class="mr-4" @click="moveUp(v, i)">
|
||||
<SvgIcon v-bind="{ name: 'up.png', type: 'dark', size: 18 }"></SvgIcon>
|
||||
</a>
|
||||
<a @click="askConfirm(v, i)">
|
||||
<SvgIcon v-bind="{ name: 'bin1.svg', type: 'dark', size: 18 }"></SvgIcon>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<Modal @close="showmodal = undefined" @update="update" @confirm="remove" v-bind="showmodal" v-if="showmodal"></Modal>
|
||||
</template>
|
||||
<script setup>
|
||||
import { useStore } from "@/stores/index";
|
||||
const emit = defineEmits(["close"]);
|
||||
const { $stripHtml, $clone, $arrayMove, $remove } = useNuxtApp();
|
||||
const store = useStore();
|
||||
var props = defineProps({
|
||||
pagename: String,
|
||||
});
|
||||
var showmodal = ref();
|
||||
var current;
|
||||
var pagedata = store[props.pagename];
|
||||
var fields = ref(pagedata.fields);
|
||||
function openField(v, i) {
|
||||
current = { v: v, i: i };
|
||||
showmodal.value = {
|
||||
component: "datatable/FieldAttribute",
|
||||
title: `${v.name} / ${$stripHtml(v.label)}`,
|
||||
width: "50%",
|
||||
height: "400px",
|
||||
vbind: { field: v },
|
||||
};
|
||||
}
|
||||
function update(data) {
|
||||
fields.value[current.i] = data;
|
||||
let copy = $clone(pagedata);
|
||||
copy.fields = fields.value;
|
||||
copy.update = { fields: fields.value };
|
||||
store.commit(props.pagename, copy);
|
||||
showmodal.value = undefined;
|
||||
emit("close");
|
||||
}
|
||||
function updateField() {
|
||||
let copy = $clone(pagedata);
|
||||
copy.fields = fields.value;
|
||||
copy.update = { fields: fields.value };
|
||||
store.commit(props.pagename, copy);
|
||||
}
|
||||
function moveDown(v, i) {
|
||||
let idx = i === fields.value.length - 1 ? 0 : i + 1;
|
||||
fields.value = $arrayMove(fields.value, i, idx);
|
||||
updateField();
|
||||
}
|
||||
function moveUp(v, i) {
|
||||
let idx = i === 0 ? fields.value.length - 1 : i - 1;
|
||||
fields.value = $arrayMove(fields.value, i, idx);
|
||||
updateField();
|
||||
}
|
||||
function askConfirm(v, i) {
|
||||
current = { v: v, i: i };
|
||||
showmodal.value = {
|
||||
component: `dialog/Confirm`,
|
||||
vbind: { content: "Bạn có muốn xóa cột này không?", duration: 10 },
|
||||
title: "Xóa cột",
|
||||
width: "500px",
|
||||
height: "100px",
|
||||
};
|
||||
}
|
||||
function remove() {
|
||||
let arr = [current.v];
|
||||
arr.map((v) => {
|
||||
let idx = fields.value.findIndex((x) => x.name === v.name);
|
||||
$remove(fields.value, idx);
|
||||
});
|
||||
updateField();
|
||||
}
|
||||
</script>
|
||||
112
components/datatable/TableSetting.vue
Normal file
112
components/datatable/TableSetting.vue
Normal file
@@ -0,0 +1,112 @@
|
||||
<template>
|
||||
<div class="field is-horizontal">
|
||||
<div class="field-body">
|
||||
<div class="field">
|
||||
<label class="label fs-14"> Cỡ chữ của bảng <span class="has-text-danger"> * </span> </label>
|
||||
<p class="control fs-14">
|
||||
<input class="input is-small" type="text" :value="tablesetting.find(v=>v.code==='table-font-size').detail"
|
||||
@change="changeSetting($event.target.value, 'table-font-size')">
|
||||
</p>
|
||||
</div>
|
||||
<div class="field" >
|
||||
<label class="label fs-14"> Cỡ chữ tiêu đề <span class="has-text-danger"> * </span> </label>
|
||||
<p class="control fs-14">
|
||||
<p class="control fs-14">
|
||||
<input class="input is-small" type="text" :value="tablesetting.find(v=>v.code==='header-font-size').detail"
|
||||
@change="changeSetting($event.target.value, 'header-font-size')">
|
||||
</p>
|
||||
</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label fs-14"> Số dòng trên 1 trang <span class="has-text-danger"> * </span> </label>
|
||||
<p class="control fs-14">
|
||||
<input class="input is-small" type="text" :value="tablesetting.find(v=>v.code==='per-page').detail"
|
||||
@change="changeSetting($event.target.value, 'per-page')">
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field is-horizontal mt-5">
|
||||
<div class="field-body">
|
||||
<div class="field">
|
||||
<label class="label fs-14"> Màu nền bảng <span class="has-text-danger"> * </span> </label>
|
||||
<p class="control fs-14">
|
||||
<input type="color" :value="tablesetting.find(v=>v.code==='table-background').detail"
|
||||
@change="changeSetting($event.target.value, 'table-background')">
|
||||
</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label fs-14"> Màu chữ <span class="has-text-danger"> * </span> </label>
|
||||
<p class="control fs-14">
|
||||
<input type="color" :value="tablesetting.find(v=>v.code==='table-font-color').detail"
|
||||
@change="changeSetting($event.target.value, 'table-font-color')">
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field is-horizontal mt-5">
|
||||
<div class="field-body">
|
||||
<div class="field">
|
||||
<label class="label fs-14"> Màu chữ tiêu đề <span class="has-text-danger"> * </span> </label>
|
||||
<p class="control fs-14">
|
||||
<input type="color" :value="tablesetting.find(v=>v.code==='header-font-color').detail"
|
||||
@change="changeSetting($event.target.value, 'header-font-color')">
|
||||
</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label fs-14"> Màu nền tiêu đề <span class="has-text-danger"> * </span> </label>
|
||||
<p class="control fs-14">
|
||||
<input type="color" :value="tablesetting.find(v=>v.code==='header-background').detail"
|
||||
@change="changeSetting($event.target.value, 'header-background')">
|
||||
</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label fs-14"> Màu chữ khi filter<span class="has-text-danger"> * </span> </label>
|
||||
<p class="control fs-14">
|
||||
<input type="color" :value="tablesetting.find(v=>v.code==='header-filter-color').detail"
|
||||
@change="changeSetting($event.target.value, 'header-filter-color')">
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field is-horizontal mt-5">
|
||||
<div class="field-body">
|
||||
<div class="field" >
|
||||
<label class="label fs-14"> Đường viền <span class="has-text-danger"> * </span> </label>
|
||||
<p class="control fs-14">
|
||||
<input class="input is-small" type="text"
|
||||
:value="tablesetting.find(v=>v.code==='td-border')? tablesetting.find(v=>v.code==='td-border').detail : undefined"
|
||||
@change="changeSetting($event.target.value, 'td-border')">
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { useStore } from '@/stores/index'
|
||||
const store = useStore()
|
||||
var props = defineProps({
|
||||
pagename: String
|
||||
})
|
||||
const { $copy, $clone, $empty } = useNuxtApp()
|
||||
var pagedata = $clone(store[props.pagename])
|
||||
var errors = []
|
||||
var radioNote = 'no'
|
||||
var tablesetting = pagedata.tablesetting
|
||||
let found = tablesetting.find(v=>v.code==='note')
|
||||
if(found? found.detail!=='@' : false) radioNote = 'yes'
|
||||
function changeSetting(value, code) {
|
||||
if(code==='note' && $empty(value)) return
|
||||
let copy = $copy(tablesetting)
|
||||
let found = copy.find(v=>v.code===code)
|
||||
if(found) found.detail = value
|
||||
else {
|
||||
found = $copy(tablesetting.find(v=>v.code===code))
|
||||
found.detail = value
|
||||
copy.push(found)
|
||||
}
|
||||
tablesetting = copy
|
||||
pagedata.tablesetting = tablesetting
|
||||
store.commit(props.pagename, pagedata)
|
||||
}
|
||||
</script>
|
||||
378
components/datatable/TimeOption.vue
Normal file
378
components/datatable/TimeOption.vue
Normal file
@@ -0,0 +1,378 @@
|
||||
<template>
|
||||
<div class="pb-1" style="border-bottom: 2px solid #3c5b63" v-if="array || !enableTime">
|
||||
<div class="columns mx-0 mb-0">
|
||||
<div class="column is-8 px-0 pb-0" v-if="enableTime">
|
||||
<div class="field is-grouped is-grouped-multiline mb-0">
|
||||
<div class="control mb-0">
|
||||
<Caption v-bind="{ title: lang === 'vi' ? 'Thời gian' : 'Time', type: 'has-text-warning' }" />
|
||||
</div>
|
||||
<div class="control mb-0" v-for="v in array" :key="v.code">
|
||||
<span class="icon-text fsb-16 has-text-warning px-1" v-if="v.code === current">
|
||||
<SvgIcon v-bind="{ name: 'tick.png', size: 20 }"></SvgIcon>
|
||||
<span>{{ v.name }}</span>
|
||||
</span>
|
||||
<span class="icon-text has-text-grey hyperlink px-1 fsb-16" @click="changeOption(v)" v-else>{{
|
||||
v.name
|
||||
}}</span>
|
||||
</div>
|
||||
<span v-if="newDataAvailable" class="has-text-danger is-italic is-size-6 ml-2">Có dữ liệu mới, vui lòng làm
|
||||
mới.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-4 px-0">
|
||||
<div class="field is-grouped is-grouped-multiline mb-0">
|
||||
<div class="control mb-0">
|
||||
<Caption v-bind="{
|
||||
type: 'has-text-warning',
|
||||
title: lang === 'vi' ? `Tìm ${viewport === 1 ? '' : 'kiếm'}` : 'Search',
|
||||
}" />
|
||||
</div>
|
||||
<div class="control mb-0">
|
||||
<input class="input is-small" type="text" v-model="text"
|
||||
:style="`${viewport === 1 ? 'width:150px;' : ''} border: 1px solid #BEBEBE;`" @keyup="startSearch"
|
||||
id="input" :placeholder="lang === 'vi' ? 'Nhập từ khóa...' : 'Enter keyword...'" />
|
||||
</div>
|
||||
<div class="control mb-0">
|
||||
<span class="tooltip" v-if="importdata">
|
||||
<a class="mr-2" @click="openImport()">
|
||||
<SvgIcon v-bind="{
|
||||
name: 'upload.svg',
|
||||
type: 'findata',
|
||||
size: 22
|
||||
}"></SvgIcon>
|
||||
</a>
|
||||
<span class="tooltiptext" style="min-width: max-content">
|
||||
{{ lang === "vi" ? "Nhập dữ liệu" : "Import data" }}
|
||||
</span>
|
||||
</span>
|
||||
<span class="tooltip" v-if="enableAdd">
|
||||
<a class="mr-2" @click="$emit('add')">
|
||||
<SvgIcon v-bind="{ name: 'add1.png', type: 'findata', size: 22 }"></SvgIcon>
|
||||
</a>
|
||||
<span class="tooltiptext" style="min-width: max-content">{{
|
||||
lang === "vi" ? "Thêm mới" : "Add new"
|
||||
}}</span>
|
||||
</span>
|
||||
<span class="tooltip">
|
||||
<a class="mr-2" @click="$emit('excel')">
|
||||
<SvgIcon v-bind="{ name: 'excel.png', type: 'findata', size: 22 }"></SvgIcon>
|
||||
</a>
|
||||
<span class="tooltiptext" style="min-width: max-content">{{
|
||||
lang === "vi" ? "Xuất excel" : "Export excel"
|
||||
}}</span>
|
||||
</span>
|
||||
|
||||
<span class="tooltip">
|
||||
<a @click="$emit('refresh-data')">
|
||||
<SvgIcon v-bind="{ name: 'refresh.svg', type: 'findata', size: 22 }"></SvgIcon>
|
||||
</a>
|
||||
<span class="tooltiptext" style="min-width: max-content">{{
|
||||
lang === "vi" ? "Làm mới" : "Refresh"
|
||||
}}</span>
|
||||
|
||||
</span>
|
||||
<a class="button is-primary is-loading is-small ml-3" v-if="loading"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Modal @close="showmodal = undefined" v-bind="showmodal" v-if="showmodal"></Modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { useStore } from "@/stores/index"
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const store = useStore()
|
||||
return { store }
|
||||
},
|
||||
|
||||
props: ["pagename", "api", "timeopt", "filter", "realtime", "newDataAvailable", "params", "importdata"],
|
||||
|
||||
data() {
|
||||
return {
|
||||
options: [
|
||||
{ code: 0, name: this.lang === "vi" ? "Hôm nay" : "Today" },
|
||||
{ code: 1, name: "1D" },
|
||||
{ code: 7, name: "7D" },
|
||||
{ code: 30, name: "1M" },
|
||||
{ code: 90, name: "3M" },
|
||||
{ code: 180, name: "6M" },
|
||||
{ code: 360, name: "1Y" },
|
||||
{ code: 36000, name: this.lang === "vi" ? "Tất cả" : "All" },
|
||||
],
|
||||
showmodal: undefined,
|
||||
current: 7,
|
||||
search: undefined,
|
||||
timer: undefined,
|
||||
text: undefined,
|
||||
status: [{ code: 100, name: "Chọn" }],
|
||||
array: undefined,
|
||||
enableAdd: true,
|
||||
enableTime: true,
|
||||
choices: [], // Sẽ được cập nhật động từ pagedata
|
||||
viewport: this.store.viewport,
|
||||
pagedata: undefined,
|
||||
loading: false,
|
||||
pollingInterval: null,
|
||||
searchableFields: [] // Lưu thông tin các field có thể tìm kiếm
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
pagename(newVal) {
|
||||
this.updateSearchableFields()
|
||||
}
|
||||
},
|
||||
|
||||
async created() {
|
||||
console.log("TimeOption created")
|
||||
|
||||
// Cập nhật searchable fields ngay từ đầu
|
||||
this.updateSearchableFields()
|
||||
|
||||
if (this.viewport < 5) {
|
||||
this.options = [
|
||||
{ code: 0, name: "Hôm nay" },
|
||||
{ code: 1, name: "1D" },
|
||||
{ code: 7, name: "7D" },
|
||||
{ code: 30, name: "1M" },
|
||||
{ code: 90, name: "3M" },
|
||||
{ code: 36000, name: "Tất cả" },
|
||||
]
|
||||
}
|
||||
|
||||
this.checkTimeopt()
|
||||
if (!this.enableTime) return this.$emit("option")
|
||||
|
||||
let found = this.$findapi(this.api)
|
||||
found.commit = undefined
|
||||
|
||||
let filter = this.$copy(this.filter)
|
||||
if (filter) {
|
||||
//dynamic parameter
|
||||
for (const [key, value] of Object.entries(filter)) {
|
||||
if (value.toString().indexOf("$") >= 0) {
|
||||
filter[key] = this.store[value.replace("$", "")].id
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (found.params.filter) {
|
||||
if (!filter) filter = {}
|
||||
for (const [key, value] of Object.entries(found.params.filter)) {
|
||||
filter[key] = value
|
||||
}
|
||||
}
|
||||
|
||||
this.options.map((v) => {
|
||||
let f = filter ? this.$copy(filter) : {}
|
||||
f["create_time__date__gte"] = this.$dayjs()
|
||||
.subtract(v.code, "day")
|
||||
.format("YYYY-MM-DD")
|
||||
v.filter = f
|
||||
})
|
||||
|
||||
this.$emit("option", this.$find(this.options, { code: this.current }))
|
||||
|
||||
let f = {}
|
||||
this.options.map((v) => {
|
||||
f[`${v.code}`] = {
|
||||
type: "Count",
|
||||
field: "create_time__date",
|
||||
filter: v.filter
|
||||
}
|
||||
})
|
||||
|
||||
let params = { summary: "aggregate", distinct_values: f }
|
||||
found.params = params
|
||||
|
||||
try {
|
||||
let rs = await this.$getapi([found])
|
||||
for (const [key, value] of Object.entries(rs[0].data.rows)) {
|
||||
let found = this.$find(this.options, { code: Number(key) })
|
||||
if (found) {
|
||||
found.name = `${found.name} (${value})`
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching data:", error)
|
||||
}
|
||||
|
||||
this.array = this.$copy(this.options)
|
||||
},
|
||||
|
||||
mounted() {
|
||||
if (this.realtime) {
|
||||
const interval = typeof this.realtime === "number" ? this.realtime * 1000 : 5000
|
||||
this.pollingInterval = setInterval(this.refresh, interval)
|
||||
}
|
||||
},
|
||||
|
||||
beforeUnmount() {
|
||||
if (this.pollingInterval) {
|
||||
clearInterval(this.pollingInterval)
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
lang: function () {
|
||||
return this.store.lang
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
// Lấy các field có thể tìm kiếm từ API params.values
|
||||
updateSearchableFields() {
|
||||
try {
|
||||
// Lấy API config
|
||||
const found = this.$findapi(this.api)
|
||||
|
||||
if (!found) {
|
||||
console.warn('Không tìm thấy API config')
|
||||
this.choices = []
|
||||
this.searchableFields = []
|
||||
return
|
||||
}
|
||||
|
||||
// Ưu tiên lấy values từ props.params, nếu không có thì lấy từ API config
|
||||
let valuesString = ''
|
||||
|
||||
if (this.params && this.params.values) {
|
||||
// Lấy từ props.params (ưu tiên cao nhất)
|
||||
valuesString = this.params.values
|
||||
console.log('Using values from props.params')
|
||||
} else if (found.params && found.params.values) {
|
||||
// Lấy từ API config mặc định
|
||||
valuesString = found.params.values
|
||||
console.log('Using values from API default params')
|
||||
} else {
|
||||
console.warn('Không tìm thấy API values trong props hoặc config')
|
||||
this.choices = []
|
||||
this.searchableFields = []
|
||||
return
|
||||
}
|
||||
|
||||
// Parse values string từ API
|
||||
let fieldNames = valuesString.split(',').map(v => v.trim())
|
||||
|
||||
console.log('Raw fieldNames:', fieldNames)
|
||||
console.log('Total fields:', fieldNames.length)
|
||||
|
||||
// Lấy pagedata để lấy label
|
||||
this.pagedata = this.store[this.pagename]
|
||||
|
||||
// Lấy tất cả các field để search (không lọc format)
|
||||
const searchable = fieldNames.filter(fieldName => {
|
||||
// Loại bỏ các field kỹ thuật
|
||||
if (fieldName === 'id' ||
|
||||
fieldName === 'create_time' ||
|
||||
fieldName === 'update_time' ||
|
||||
fieldName === 'created_at' ||
|
||||
fieldName === 'updated_at') {
|
||||
return false
|
||||
}
|
||||
return true
|
||||
})
|
||||
|
||||
// Lấy tên và label các field
|
||||
this.choices = searchable
|
||||
this.searchableFields = searchable.map(fieldName => {
|
||||
// Lấy field base name (trước dấu __)
|
||||
const baseFieldName = fieldName.split('__')[0]
|
||||
const fieldInfo = this.pagedata && this.pagedata.fields
|
||||
? this.pagedata.fields.find(f => f.name === baseFieldName)
|
||||
: null
|
||||
|
||||
return {
|
||||
name: fieldName,
|
||||
label: fieldInfo ? fieldInfo.label : fieldName
|
||||
}
|
||||
})
|
||||
|
||||
console.log('Searchable fields:', this.searchableFields)
|
||||
console.log('Choices:', this.choices)
|
||||
console.log('Total searchable fields:', this.choices.length)
|
||||
} catch (error) {
|
||||
console.error('Error updating searchable fields:', error)
|
||||
this.choices = []
|
||||
this.searchableFields = []
|
||||
}
|
||||
},
|
||||
|
||||
refresh() {
|
||||
let found = this.$find(this.options, { code: this.current })
|
||||
this.changeOption(found)
|
||||
},
|
||||
|
||||
changeOption(v) {
|
||||
this.current = v.code
|
||||
if (this.search) {
|
||||
this.text = undefined
|
||||
this.search = undefined
|
||||
}
|
||||
this.$emit("option", this.$find(this.array, { code: this.current }))
|
||||
},
|
||||
|
||||
doSearch() {
|
||||
// Cập nhật choices trước khi search
|
||||
this.updateSearchableFields()
|
||||
|
||||
this.pagedata = this.store[this.pagename]
|
||||
|
||||
if (!this.pagedata || !this.pagedata.fields) {
|
||||
console.warn('Không có pagedata hoặc fields')
|
||||
return
|
||||
}
|
||||
|
||||
let fields = this.pagedata.fields.filter(
|
||||
(v) => this.choices.findIndex((x) => x === v.name) >= 0
|
||||
)
|
||||
|
||||
if (fields.length === 0) {
|
||||
console.warn('Không tìm thấy field để tìm kiếm')
|
||||
return
|
||||
}
|
||||
|
||||
let f = {}
|
||||
fields.map((v) => {
|
||||
f[`${v.name}__icontains`] = this.search
|
||||
})
|
||||
|
||||
console.log('Search filter:', f)
|
||||
this.$emit("option", { filter_or: f })
|
||||
},
|
||||
|
||||
openImport() {
|
||||
if (!this.importdata) return
|
||||
// Emit event lên parent (DataView)
|
||||
this.$emit('import', this.importdata)
|
||||
},
|
||||
|
||||
startSearch(val) {
|
||||
this.search = this.$empty(val.target.value)
|
||||
? ""
|
||||
: val.target.value.trim()
|
||||
|
||||
if (this.timer) clearTimeout(this.timer)
|
||||
this.timer = setTimeout(() => this.doSearch(), 300)
|
||||
},
|
||||
|
||||
checkTimeopt() {
|
||||
if (this.timeopt > 0) {
|
||||
let obj = this.$find(this.options, { code: this.$formatNumber(this.timeopt) })
|
||||
if (obj) this.current = obj.code
|
||||
}
|
||||
if (this.timeopt ? this.$empty(this.timeopt.disable) : true) return
|
||||
if (this.timeopt.disable.indexOf("add") >= 0) this.enableAdd = false
|
||||
if (this.timeopt.disable.indexOf("time") >= 0) this.enableTime = false
|
||||
if (this.timeopt.time) {
|
||||
let obj = this.$find(this.options, { code: this.$formatNumber(this.timeopt.time) })
|
||||
if (obj) this.current = obj.code
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
10
components/datatable/format/ColorText.vue
Normal file
10
components/datatable/format/ColorText.vue
Normal file
@@ -0,0 +1,10 @@
|
||||
<template>
|
||||
<span :style="{ color: color }">{{ text }}</span>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
text: { type: String, required: true },
|
||||
color: { type: String, default: "#000" }
|
||||
})
|
||||
</script>
|
||||
10
components/datatable/format/FormatDate.vue
Normal file
10
components/datatable/format/FormatDate.vue
Normal file
@@ -0,0 +1,10 @@
|
||||
<template>
|
||||
<span :style="color? `color:${color}` : ''">{{ $dayjs(date).format('DD/MM/YYYY') }}</span>
|
||||
</template>
|
||||
<script setup>
|
||||
const { $dayjs } = useNuxtApp()
|
||||
const props = defineProps({
|
||||
date: String,
|
||||
color: String
|
||||
})
|
||||
</script>
|
||||
10
components/datatable/format/FormatNumber.vue
Normal file
10
components/datatable/format/FormatNumber.vue
Normal file
@@ -0,0 +1,10 @@
|
||||
<template>
|
||||
<span :style="color? `color:${color}` : ''">{{ $numtoString(value) }}</span>
|
||||
</template>
|
||||
<script setup>
|
||||
const { $numtoString } = useNuxtApp()
|
||||
const props = defineProps({
|
||||
value: Number,
|
||||
color: String
|
||||
})
|
||||
</script>
|
||||
10
components/datatable/format/FormatTime.vue
Normal file
10
components/datatable/format/FormatTime.vue
Normal file
@@ -0,0 +1,10 @@
|
||||
<template>
|
||||
<span :style="color? `color:${color}` : ''">{{ $numtoString(value) }}</span>
|
||||
</template>
|
||||
<script setup>
|
||||
const { $numtoString } = useNuxtApp()
|
||||
const props = defineProps({
|
||||
value: Number,
|
||||
color: String
|
||||
})
|
||||
</script>
|
||||
130
components/datepicker/Datepicker.vue
Normal file
130
components/datepicker/Datepicker.vue
Normal file
@@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<div class="control has-icons-left" :id="docid">
|
||||
<div :class="`dropdown ${ pos || ''} ${focused? 'is-active' : ''}`" style="width: 100%;">
|
||||
<div class="dropdown-trigger" style="width: 100%;">
|
||||
<input :disabled="disabled" :class="`input ${error? 'is-danger' : ''} ${disabled? 'has-text-dark' : ''}`" type="text" placeholder="MM/DD/YYYY"
|
||||
maxlength="10" @focus="setFocus" @blur="lostFocus" @keyup.enter="pressEnter" @keyup="checkDate" v-model="show" />
|
||||
</div>
|
||||
<div class="dropdown-menu" role="menu" @click="doClick()">
|
||||
<div class="dropdown-content" style="min-width: 260px;">
|
||||
<PickDay class="py-2 px-2" v-bind="{date: date}" @date="selectDate"></PickDay>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="icon is-left">
|
||||
<SvgIcon v-bind="{name: 'calendar.svg', type: 'gray', size: 21}"></SvgIcon>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['record', 'attr', 'position', 'mindate', 'maxdate', 'disabled'],
|
||||
data() {
|
||||
return {
|
||||
date: undefined,
|
||||
show: undefined,
|
||||
error: false,
|
||||
focused: false,
|
||||
docid: this.$id(),
|
||||
count1: 0,
|
||||
count2: 0,
|
||||
pos: undefined
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getPos()
|
||||
if(this.record) {
|
||||
this.date = this.record[this.attr]? this.$copy(this.record[this.attr]) : undefined
|
||||
if(this.date) this.show = this.$dayjs(this.date).format('DD/MM/YYYY')
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
record: function(newVal) {
|
||||
if(this.record) {
|
||||
this.date = this.record[this.attr]? this.$copy(this.record[this.attr]) : undefined
|
||||
if(this.date) this.show = this.$dayjs(this.date).format('DD/MM/YYYY')
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
pressEnter() {
|
||||
this.checkDate()
|
||||
if(!this.error) this.focused = false
|
||||
},
|
||||
setFocus() {
|
||||
this.focused = true
|
||||
this.count1 = 0
|
||||
this.count2 = 0
|
||||
},
|
||||
lostFocus() {
|
||||
let self = this
|
||||
setTimeout(()=>{
|
||||
if(self.focused && self.count1===0) self.focused = false
|
||||
}, 200)
|
||||
},
|
||||
processEvent(event) {
|
||||
var doc = document.getElementById(this.docid)
|
||||
if(!doc) return
|
||||
this.count2 += 1
|
||||
var isClickInside = false
|
||||
isClickInside = doc.contains(event.target);
|
||||
if(!isClickInside && this.focused) {
|
||||
if(this.count2-1!==this.count1) {
|
||||
this.focused = false
|
||||
this.count1 = 0
|
||||
this.count2 = 0
|
||||
}
|
||||
}
|
||||
},
|
||||
doClick() {
|
||||
this.count1 += 1
|
||||
},
|
||||
selectDate(v) {
|
||||
this.date = v
|
||||
this.show = this.$dayjs(v).format('DD/MM/YYYY')
|
||||
this.$emit('date', this.date)
|
||||
if(this.focused) this.focused = false
|
||||
this.count1 = 0
|
||||
this.count2 = 0
|
||||
},
|
||||
getDate(value) {
|
||||
let v = value.replace(/\D/g,'').slice(0, 10);
|
||||
if (v.length >= 5) {
|
||||
return `${v.slice(0,2)}/${v.slice(2,4)}/${v.slice(4)}`;
|
||||
}
|
||||
else if (v.length >= 3) {
|
||||
return `${v.slice(0,2)}/${v.slice(2)}`;
|
||||
}
|
||||
return v
|
||||
},
|
||||
checkDate() {
|
||||
if(!this.focused) this.setFocus()
|
||||
this.error = false
|
||||
this.date = undefined
|
||||
if(this.$empty(this.show)) return this.$emit('date', null)
|
||||
this.show = this.getDate(this.show)
|
||||
let val = `${this.show.substring(6,10)}-${this.show.substring(3,5)}-${this.show.substring(0,2)}`
|
||||
if(this.$dayjs(val, "YYYY-MM-DD", true).isValid()) {
|
||||
this.date = val
|
||||
this.$emit('date', this.date)
|
||||
} else this.error = true
|
||||
},
|
||||
getPos() {
|
||||
switch(this.position) {
|
||||
case 'is-top-left':
|
||||
this.pos = 'is-up is-left'
|
||||
break;
|
||||
case 'is-top-right':
|
||||
this.pos = 'is-up is-right'
|
||||
break;
|
||||
case 'is-bottom-left':
|
||||
this.pos = 'is-right'
|
||||
break;
|
||||
case 'is-bottom-right':
|
||||
this.pos = 'is-right'
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
185
components/datepicker/EventDetail.vue
Normal file
185
components/datepicker/EventDetail.vue
Normal file
@@ -0,0 +1,185 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="field is-grouped mb-4 border-bottom" v-if="1<0">
|
||||
<div class="control pl-2" v-if="mode!=='simple'">
|
||||
<a class="mr-1" @click="previousYear()">
|
||||
<SvgIcon v-bind="{name: 'doubleleft.svg', type: 'gray', size: 18}"></SvgIcon>
|
||||
</a>
|
||||
<a @click="previousMonth()" v-if="type==='days'">
|
||||
<SvgIcon v-bind="{name: 'left1.svg', type: 'gray', size: 18}"></SvgIcon>
|
||||
</a>
|
||||
</div>
|
||||
<div class="control is-expanded has-text-centered">
|
||||
<span class="fsb-16 hyperlink mr-3" @click="type='months'" v-if="type==='days'">{{`Tháng ${month}`}}</span>
|
||||
<span class="fsb-16 hyperlink" @click="type='years'">{{ caption || year }}</span>
|
||||
</div>
|
||||
<div class="control pr-2" v-if="mode!=='simple'">
|
||||
<a class="mr-1" @click="nextMonth()" v-if="type==='days'">
|
||||
<SvgIcon v-bind="{name: 'right.svg', type: 'gray', size: 18}"></SvgIcon>
|
||||
</a>
|
||||
<a @click="nextYear()">
|
||||
<SvgIcon v-bind="{name: 'doubleright.svg', type: 'gray', size: 18}"></SvgIcon>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="type==='days'">
|
||||
<div :class="`columns mx-0 ${i===weeks.length-1? 'mb-1' : ''}`" v-for="(v,i) in weeks" :key="i">
|
||||
<div class="column px-3 py-1 has-text-centered" v-for="(m,h) in v.dates" :key="h" style="min-height: 100px;"
|
||||
:style="`border-right: 1px solid #DCDCDC; border-bottom: 1px solid #DCDCDC; ${(viewport>1 && h===0 || viewport===1)? 'border-left: 1px solid #DCDCDC;' : ''}
|
||||
${i===0? 'border-top: 1px solid #DCDCDC;' : ''}`">
|
||||
<p class="mb-1" v-if="i===0"><b>{{ $find(dateOfWeek, {id: h}).text}}</b></p>
|
||||
<span class="has-background-primary has-text-white px-1 py-1" v-if="m.date===today">{{ m.dayPrint }}</span>
|
||||
<span v-else>{{m.dayPrint}}</span>
|
||||
<div class="has-text-left fs-15 mt-1" v-if="m.event && m.currentMonth===m.mothCondition">
|
||||
<p :class="`pt-1 ${j===m.event.length-1? '' : 'border-bottom'}`" v-for="(h,j) in m.event">
|
||||
<SvgIcon v-bind="{name: h.icon, type: h.color, size: 16}"></SvgIcon>
|
||||
<a class="ml-3" @click="openEvent(h)">{{ h.text }}</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Modal @close="showmodal=undefined" v-bind="showmodal" v-if="showmodal"></Modal>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['date', 'events', 'mode', 'vyear', 'vmonth'],
|
||||
data() {
|
||||
return {
|
||||
dates: [],
|
||||
dateOfWeek: [{id: 0, text: "CN"}, {id: 1, text: "T2"}, {id: 2, text: "T3"}, {id: 3, text: "T4"},
|
||||
{id: 4, text: "T5",}, {id: 5, text: "T6"}, {id: 6, text: "T7"}],
|
||||
weeks: [],
|
||||
today: this.$dayjs().format('YYYY/MM/DD'),
|
||||
year: undefined,
|
||||
month: undefined,
|
||||
type: 'days',
|
||||
caption: undefined,
|
||||
action: undefined,
|
||||
curdate: undefined,
|
||||
showmodal: undefined,
|
||||
viewport: 5
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.showDate()
|
||||
},
|
||||
watch: {
|
||||
date: function(newVal) {
|
||||
if(newVal) this.showDate()
|
||||
},
|
||||
vmonth: function(newVal) {
|
||||
this.showDate()
|
||||
},
|
||||
events: function(newVal) {
|
||||
this.showDate()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async openEvent(event) {
|
||||
let row = await this.$getdata('sale', {id: event.sale}, undefined, true)
|
||||
this.showmodal = {title: 'Bán hàng', height: '500px', width: '90%', component: 'sale/Sale', vbind: {row: row, highlight: event.id}}
|
||||
},
|
||||
compiledComponent(value) {
|
||||
return {
|
||||
template: `${value}`
|
||||
}
|
||||
},
|
||||
showDate() {
|
||||
this.curdate = this.date? this.date.replaceAll('-', '/') : undefined
|
||||
this.year = this.$dayjs(this.curdate || this.today).year()
|
||||
this.month = this.$dayjs(this.curdate || this.today).month() + 1
|
||||
if(this.vyear) this.year = this.$copy(this.vyear)
|
||||
if(this.vmonth) this.month = this.$copy(this.vmonth)
|
||||
this.getDates()
|
||||
},
|
||||
chooseToday() {
|
||||
this.$emit('date', this.today.replaceAll('/', '-'))
|
||||
this.year = this.$dayjs(this.today).year()
|
||||
this.month = this.$dayjs(this.today).month() + 1
|
||||
this.getDates()
|
||||
},
|
||||
changeCaption(v) {
|
||||
this.caption = v
|
||||
},
|
||||
selectMonth(v) {
|
||||
this.month = v
|
||||
this.getDates()
|
||||
this.type = 'days'
|
||||
},
|
||||
selectYear(v) {
|
||||
this.year = v
|
||||
this.getDates()
|
||||
this.type = 'days'
|
||||
},
|
||||
getDates() {
|
||||
this.caption = undefined
|
||||
this.dates = this.allDaysInMonth(this.year, this.month)
|
||||
this.dates.map(v=>{
|
||||
let event = this.events? this.$filter(this.events, {isodate: v.date}) : undefined
|
||||
if(event.length>0) v.event = event
|
||||
})
|
||||
this.weeks = this.$unique(this.dates, ['week']).map(v=>{return {week: v.week}})
|
||||
this.weeks.map(v=>{
|
||||
v.dates = this.dates.filter(x=>x.week===v.week)
|
||||
})
|
||||
},
|
||||
nextMonth() {
|
||||
let month = this.month + 1
|
||||
if(month>12) {
|
||||
month = 1
|
||||
this.year += 1
|
||||
}
|
||||
this.month = month
|
||||
this.getDates()
|
||||
},
|
||||
previousMonth() {
|
||||
let month = this.month - 1
|
||||
if(month===0) {
|
||||
month = 12
|
||||
this.year -= 1
|
||||
}
|
||||
this.month = month
|
||||
this.getDates()
|
||||
},
|
||||
nextYear() {
|
||||
if(this.type==='years') return this.action = {name: 'next', id: this.$id()}
|
||||
this.year += 1
|
||||
this.getDates()
|
||||
},
|
||||
previousYear() {
|
||||
if(this.type==='years') return this.action = {name: 'previous', id: this.$id()}
|
||||
this.year -= 1
|
||||
this.getDates()
|
||||
},
|
||||
choose(m) {
|
||||
this.$emit('date', m.date.replaceAll('/', '-'))
|
||||
},
|
||||
createDate(v, x, y) {
|
||||
return v + '/' + (x<10? '0' + x.toString() : x.toString()) + '/' + (y<10? '0' + y.toString() : y.toString())
|
||||
},
|
||||
allDaysInMonth(year, month) {
|
||||
let days = Array.from({length: this.$dayjs(this.createDate(year, month, 1)).daysInMonth()}, (_, i) => i + 1)
|
||||
let arr = []
|
||||
days.map(v=>{
|
||||
for (let i = 0; i < 7; i++) {
|
||||
let thedate = this.$dayjs(this.createDate(year, month, v)).weekday(i)
|
||||
let date = this.$dayjs(new Date(thedate.$d)).format("YYYY/MM/DD")
|
||||
let dayPrint = this.$dayjs(new Date(thedate.$d)).format("DD")
|
||||
let mothCondition = this.$dayjs(date).month() +1
|
||||
let currentMonth = month
|
||||
let found = arr.find(x=>x.date===date)
|
||||
if(!found) {
|
||||
let dayOfWeek = this.$dayjs(date).day()
|
||||
let week = this.$dayjs(date).week()
|
||||
let ele = {date: date, week: week, day: v, dayOfWeek: dayOfWeek, dayPrint: dayPrint, mothCondition: mothCondition, currentMonth: currentMonth}
|
||||
arr.push(ele)
|
||||
}
|
||||
}
|
||||
})
|
||||
return arr
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
17
components/datepicker/EventMultiMonth.vue
Normal file
17
components/datepicker/EventMultiMonth.vue
Normal file
@@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="columns is-multiline mx-0">
|
||||
<div class="column is-4" v-for="v in months">
|
||||
<EventSummary v-bind="{events: events, mode: 'simple', vyear: v.year, vmonth: v.month}"></EventSummary>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
components: {
|
||||
EventSummary: () => import('@/components/datepicker/EventSummary')
|
||||
},
|
||||
props: ['events', 'months']
|
||||
}
|
||||
</script>
|
||||
52
components/datepicker/EventOneMonth.vue
Normal file
52
components/datepicker/EventOneMonth.vue
Normal file
@@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<div class="columns mx-0">
|
||||
<div class="column is-narrow" v-if="1<0">
|
||||
<EventSummary></EventSummary>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="mb-4">
|
||||
<span class="fsb-17 mr-4">{{ `T${vmonth}/${vyear}` }}</span>
|
||||
<a class="mr-2" @click="previous()"><SvgIcon v-bind="{name: 'left1.svg', type: 'dark', size: 18}"></SvgIcon></a>
|
||||
<a class="mr-3" @click="next()"><SvgIcon v-bind="{name: 'right.svg', type: 'dark', size: 18}"></SvgIcon></a>
|
||||
<a @click="refresh()"><SvgIcon v-bind="{name: 'refresh.svg', type: 'dark', size: 18}"></SvgIcon></a>
|
||||
</div>
|
||||
<EventDetail v-bind="{events: events, vyear: vyear, vmonth: vmonth}"></EventDetail>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import EventSummary from '@/components/datepicker/EventSummary'
|
||||
import EventDetail from '@/components/datepicker/EventDetail'
|
||||
</script>
|
||||
<script>
|
||||
export default {
|
||||
props: ['events', 'year', 'month'],
|
||||
data() {
|
||||
return {
|
||||
vyear: this.year? this.$copy(this.year) : undefined,
|
||||
vmonth: this.month? this.$copy(this.month) : undefined
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
next() {
|
||||
let month = this.vmonth + 1
|
||||
if(month>12) {
|
||||
month = 1
|
||||
this.vyear += 1
|
||||
}
|
||||
this.vmonth = month
|
||||
},
|
||||
previous() {
|
||||
let month = this.vmonth - 1
|
||||
if(month===0) {
|
||||
month = 12
|
||||
this.vyear -= 1
|
||||
}
|
||||
this.vmonth = month
|
||||
},
|
||||
refresh() {
|
||||
this.$emit('refresh')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
192
components/datepicker/EventSummary.vue
Normal file
192
components/datepicker/EventSummary.vue
Normal file
@@ -0,0 +1,192 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="field is-grouped mb-4 border-bottom">
|
||||
<div class="control pl-2" v-if="mode!=='simple'">
|
||||
<a class="mr-1" @click="previousYear()">
|
||||
<SvgIcon v-bind="{name: 'doubleleft.svg', type: 'gray', size: 18}"></SvgIcon>
|
||||
</a>
|
||||
<a @click="previousMonth()" v-if="type==='days'">
|
||||
<SvgIcon v-bind="{name: 'left1.svg', type: 'gray', size: 18}"></SvgIcon>
|
||||
</a>
|
||||
</div>
|
||||
<div class="control is-expanded has-text-centered">
|
||||
<span class="fsb-16 hyperlink mr-3" @click="mode==='simple'? false : type='PickMonth'" v-if="type==='days'">{{`Tháng ${month}`}}</span>
|
||||
<span class="fsb-16 hyperlink" @click="mode==='simple'? false : type='PickYear'">{{ caption || year }}</span>
|
||||
</div>
|
||||
<div class="control pr-2" v-if="mode!=='simple'">
|
||||
<a class="mr-1" @click="nextMonth()" v-if="type==='days'">
|
||||
<SvgIcon v-bind="{name: 'right.svg', type: 'gray', size: 18}"></SvgIcon>
|
||||
</a>
|
||||
<a @click="nextYear()">
|
||||
<SvgIcon v-bind="{name: 'doubleright.svg', type: 'gray', size: 18}"></SvgIcon>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="type==='days'">
|
||||
<div class="columns is-mobile mx-0">
|
||||
<div class="column px-2 py-1 has-text-grey-dark" v-for="(m,h) in dateOfWeek" :key="h">
|
||||
{{ m.text }}
|
||||
</div>
|
||||
</div>
|
||||
<div :class="`columns is-mobile mx-0 ${i===weeks.length-1? 'mb-1' : ''}`" v-for="(v,i) in weeks" :key="i">
|
||||
<div class="column px-3 py-1 fs-14" v-for="(m,h) in v.dates" :key="h">
|
||||
<a v-if="m.event && m.currentMonth===m.mothCondition">
|
||||
<Tooltip v-bind="{html: m.event.html, tooltip: m.event.tooltip}"></Tooltip>
|
||||
</a>
|
||||
<span class="has-background-findata has-text-white px-1 py-1" v-else-if="m.date===today">{{ m.dayPrint }}</span>
|
||||
<span v-else>{{m.dayPrint}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="mode!=='simple'">
|
||||
<div class="border-bottom"></div>
|
||||
<div class="mt-2">
|
||||
<span class="ml-2 mr-2">Hôm nay: </span>
|
||||
<span class="has-text-primary hyperlink" @click="chooseToday()">{{ $dayjs(today).format('DD/MM/YYYY') }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div v-else-if="type==='PickMonth'">
|
||||
<PickMonth @month="selectMonth"></PickMonth>
|
||||
</div>
|
||||
<div v-else-if="type==='PickYear'">
|
||||
<PickYear v-bind="{year: year, month: month, action: action}" @year="selectYear" @caption="changeCaption"></PickYear>
|
||||
</div>
|
||||
<Modal @close="showmodal=undefined" v-bind="showmodal" v-if="showmodal"></Modal>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
components: {
|
||||
PickMonth: () => import('@/components/datepicker/PickMonth'),
|
||||
PickYear: () => import('@/components/datepicker/PickYear')
|
||||
},
|
||||
props: ['date', 'events', 'mode', 'vyear', 'vmonth'],
|
||||
data() {
|
||||
return {
|
||||
dates: [],
|
||||
dateOfWeek: [{id: 0, text: "CN"}, {id: 1, text: "T2"}, {id: 2, text: "T3"}, {id: 3, text: "T4"},
|
||||
{id: 4, text: "T5",}, {id: 5, text: "T6"}, {id: 6, text: "T7"}],
|
||||
weeks: [],
|
||||
today: this.$dayjs().format('YYYY/MM/DD'),
|
||||
year: undefined,
|
||||
month: undefined,
|
||||
type: 'days',
|
||||
caption: undefined,
|
||||
action: undefined,
|
||||
curdate: undefined,
|
||||
showmodal: undefined
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.showDate()
|
||||
},
|
||||
watch: {
|
||||
date: function(newVal) {
|
||||
if(newVal) this.showDate()
|
||||
},
|
||||
events: function(newVal) {
|
||||
this.showDate()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showDate() {
|
||||
this.curdate = this.date? this.date.replaceAll('-', '/') : undefined
|
||||
this.year = this.$dayjs(this.curdate || this.today).year()
|
||||
this.month = this.$dayjs(this.curdate || this.today).month() + 1
|
||||
if(this.vyear) this.year = this.$copy(this.vyear)
|
||||
if(this.vmonth) this.month = this.$copy(this.vmonth)
|
||||
this.getDates()
|
||||
},
|
||||
chooseToday() {
|
||||
this.$emit('date', this.today.replaceAll('/', '-'))
|
||||
this.year = this.$dayjs(this.today).year()
|
||||
this.month = this.$dayjs(this.today).month() + 1
|
||||
this.getDates()
|
||||
},
|
||||
changeCaption(v) {
|
||||
this.caption = v
|
||||
},
|
||||
selectMonth(v) {
|
||||
this.month = v
|
||||
this.getDates()
|
||||
this.type = 'days'
|
||||
},
|
||||
selectYear(v) {
|
||||
this.year = v
|
||||
this.getDates()
|
||||
this.type = 'days'
|
||||
},
|
||||
getDates() {
|
||||
this.caption = undefined
|
||||
this.dates = this.allDaysInMonth(this.year, this.month)
|
||||
this.dates.map(v=>{
|
||||
let event = this.events? this.$find(this.events, {isodate: v.date}) : undefined
|
||||
if(event) v.event = event
|
||||
})
|
||||
this.weeks = this.$unique(this.dates, ['week']).map(v=>{return {week: v.week}})
|
||||
this.weeks.map(v=>{
|
||||
v.dates = this.dates.filter(x=>x.week===v.week)
|
||||
})
|
||||
},
|
||||
nextMonth() {
|
||||
let month = this.month + 1
|
||||
if(month>12) {
|
||||
month = 1
|
||||
this.year += 1
|
||||
}
|
||||
this.month = month
|
||||
this.getDates()
|
||||
},
|
||||
previousMonth() {
|
||||
let month = this.month - 1
|
||||
if(month===0) {
|
||||
month = 12
|
||||
this.year -= 1
|
||||
}
|
||||
this.month = month
|
||||
this.getDates()
|
||||
},
|
||||
nextYear() {
|
||||
if(this.type==='PickYear') return this.action = {name: 'next', id: this.$id()}
|
||||
this.year += 1
|
||||
this.getDates()
|
||||
},
|
||||
previousYear() {
|
||||
if(this.type==='PickYear') return this.action = {name: 'previous', id: this.$id()}
|
||||
this.year -= 1
|
||||
this.getDates()
|
||||
},
|
||||
choose(m) {
|
||||
this.$emit('date', m.date.replaceAll('/', '-'))
|
||||
},
|
||||
createDate(v, x, y) {
|
||||
return v + '/' + (x<10? '0' + x.toString() : x.toString()) + '/' + (y<10? '0' + y.toString() : y.toString())
|
||||
},
|
||||
allDaysInMonth(year, month) {
|
||||
var weekday = require('dayjs/plugin/weekday')
|
||||
this.$dayjs.extend(weekday)
|
||||
var weekOfYear = require('dayjs/plugin/weekOfYear')
|
||||
this.$dayjs.extend(weekOfYear)
|
||||
let days = Array.from({length: this.$dayjs(this.createDate(year, month, 1)).daysInMonth()}, (_, i) => i + 1)
|
||||
let arr = []
|
||||
days.map(v=>{
|
||||
for (let i = 0; i < 7; i++) {
|
||||
let thedate = this.$dayjs(this.createDate(year, month, v)).weekday(i)
|
||||
let date = this.$dayjs(new Date(thedate.$d)).format("YYYY/MM/DD")
|
||||
let dayPrint = this.$dayjs(new Date(thedate.$d)).format("DD")
|
||||
let mothCondition = this.$dayjs(date).month() +1
|
||||
let currentMonth = month
|
||||
let found = arr.find(x=>x.date===date)
|
||||
if(!found) {
|
||||
let dayOfWeek = this.$dayjs(date).day()
|
||||
let week = this.$dayjs(date).week()
|
||||
let ele = {date: date, week: week, day: v, dayOfWeek: dayOfWeek, dayPrint: dayPrint, mothCondition: mothCondition, currentMonth: currentMonth}
|
||||
arr.push(ele)
|
||||
}
|
||||
}
|
||||
})
|
||||
return arr
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
169
components/datepicker/PickDay.vue
Normal file
169
components/datepicker/PickDay.vue
Normal file
@@ -0,0 +1,169 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="field is-grouped mb-4 border-bottom">
|
||||
<div class="control pl-2">
|
||||
<a class="mr-1" @click="previousYear()">
|
||||
<SvgIcon v-bind="{name: 'doubleleft.svg', type: 'gray', size: 18}"></SvgIcon>
|
||||
</a>
|
||||
<a @click="previousMonth()" v-if="type==='days'">
|
||||
<SvgIcon v-bind="{name: 'left1.svg', type: 'gray', size: 18}"></SvgIcon>
|
||||
</a>
|
||||
</div>
|
||||
<div class="control is-expanded has-text-centered">
|
||||
<span class="fsb-16 mr-3" @click="type='months'" v-if="type==='days'">{{`T${month}`}}</span>
|
||||
<span class="fsb-16" @click="type='years'">{{ caption || year }}</span>
|
||||
</div>
|
||||
<div class="control pr-2">
|
||||
<a class="mr-1" @click="nextMonth()" v-if="type==='days'">
|
||||
<SvgIcon v-bind="{name: 'right.svg', type: 'gray', size: 18}"></SvgIcon>
|
||||
</a>
|
||||
<a @click="nextYear()">
|
||||
<SvgIcon v-bind="{name: 'doubleright.svg', type: 'gray', size: 18}"></SvgIcon>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="type==='days'">
|
||||
<div class="columns is-mobile mx-0">
|
||||
<div class="column px-2 py-1 has-text-grey-dark" v-for="(m,h) in dateOfWeek" :key="h">
|
||||
{{ m.text }}
|
||||
</div>
|
||||
</div>
|
||||
<div :class="`columns is-mobile mx-0 ${i===weeks.length-1? 'mb-1' : ''}`" v-for="(v,i) in weeks" :key="i">
|
||||
<div class="column px-3 py-1" v-for="(m,h) in v.dates" :key="h">
|
||||
<a class="fs-14" @click="choose(m)">
|
||||
<span class="has-background-primary has-text-white px-1 py-1" v-if="m.date===curdate">{{ m.dayPrint }}</span>
|
||||
<span class="has-background-findata has-text-white px-1 py-1" v-else-if="m.date===today">{{ m.dayPrint }}</span>
|
||||
<span class="has-text-grey" v-else-if="m.currentMonth!==m.mothCondition">{{ m.dayPrint }}</span>
|
||||
<span v-else>{{m.dayPrint}}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-bottom"></div>
|
||||
<div class="mt-2">
|
||||
<span class="ml-2 mr-2">Hôm nay: </span>
|
||||
<span class="has-text-primary" @click="chooseToday()">{{ $dayjs(today).format('DD/MM/YYYY') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="type==='months'">
|
||||
<PickMonth @month="selectMonth"></PickMonth>
|
||||
</div>
|
||||
<div v-else-if="type==='years'">
|
||||
<PickYear v-bind="{year: year, month: month, action: action}" @year="selectYear" @caption="changeCaption"></PickYear>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import PickMonth from '@/components/datepicker/PickMonth'
|
||||
import PickYear from '@/components/datepicker/PickYear'
|
||||
const { $id, $dayjs, $unique} = useNuxtApp()
|
||||
const emit = defineEmits(['date'])
|
||||
var props = defineProps({
|
||||
date: String
|
||||
})
|
||||
var dates = []
|
||||
var dateOfWeek = [{id: 0, text: "CN"}, {id: 1, text: "T2"}, {id: 2, text: "T3"}, {id: 3, text: "T4"},
|
||||
{id: 4, text: "T5",}, {id: 5, text: "T6"}, {id: 6, text: "T7"}]
|
||||
var weeks = ref([])
|
||||
var year= undefined
|
||||
var month = undefined
|
||||
var type = 'days'
|
||||
var caption = undefined
|
||||
var action = undefined
|
||||
var curdate = undefined
|
||||
var today = new Date()
|
||||
|
||||
function showDate() {
|
||||
curdate = props.date? props.date.replaceAll('-', '/') : undefined
|
||||
year = $dayjs(curdate || today).year()
|
||||
month = $dayjs(curdate || today).month() + 1
|
||||
getDates()
|
||||
}
|
||||
function chooseToday() {
|
||||
emit('date', today.replaceAll('/', '-'))
|
||||
year = $dayjs(today).year()
|
||||
month = $dayjs(today).month() + 1
|
||||
getDates()
|
||||
}
|
||||
function changeCaption(v) {
|
||||
caption = v
|
||||
}
|
||||
function selectMonth(v) {
|
||||
month = v
|
||||
getDates()
|
||||
type = 'days'
|
||||
}
|
||||
function selectYear(v) {
|
||||
year = v
|
||||
getDates()
|
||||
type = 'days'
|
||||
}
|
||||
function getDates() {
|
||||
caption = undefined
|
||||
dates = allDaysInMonth(year, month)
|
||||
weeks.value = $unique(dates, ['week']).map(v=>{return {week: v.week}})
|
||||
weeks.value.map(v=>{
|
||||
v.dates = dates.filter(x=>x.week===v.week)
|
||||
})
|
||||
}
|
||||
function nextMonth() {
|
||||
month = month + 1
|
||||
if(month>12) {
|
||||
month = 1
|
||||
year += 1
|
||||
}
|
||||
getDates()
|
||||
}
|
||||
function previousMonth() {
|
||||
month = month - 1
|
||||
if(month===0) {
|
||||
month = 12
|
||||
year -= 1
|
||||
}
|
||||
getDates()
|
||||
}
|
||||
function nextYear() {
|
||||
if(type==='years') return action = {name: 'next', id: $id()}
|
||||
year += 1
|
||||
getDates()
|
||||
}
|
||||
function previousYear() {
|
||||
if(type==='years') return action = {name: 'previous', id: $id()}
|
||||
year -= 1
|
||||
getDates()
|
||||
}
|
||||
function choose(m) {
|
||||
emit('date', m.date.replaceAll('/', '-'))
|
||||
}
|
||||
function createDate(v, x, y) {
|
||||
return v + '/' + (x<10? '0' + x.toString() : x.toString()) + '/' + (y<10? '0' + y.toString() : y.toString())
|
||||
}
|
||||
function allDaysInMonth(year, month) {
|
||||
|
||||
let days = Array.from({length: $dayjs(createDate(year, month, 1)).daysInMonth()}, (_, i) => i + 1)
|
||||
let arr = []
|
||||
days.map(v=>{
|
||||
for (let i = 0; i < 7; i++) {
|
||||
let thedate = $dayjs(createDate(year, month, v)).weekday(i)
|
||||
let date = $dayjs(new Date(thedate.$d)).format("YYYY/MM/DD")
|
||||
let dayPrint = $dayjs(new Date(thedate.$d)).format("DD")
|
||||
let mothCondition = $dayjs(date).month() +1
|
||||
let currentMonth = month
|
||||
let found = arr.find(x=>x.date===date)
|
||||
if(!found) {
|
||||
let dayOfWeek = $dayjs(date).day()
|
||||
let week = $dayjs(date).week()
|
||||
let ele = {date: date, week: week, day: v, dayOfWeek: dayOfWeek, dayPrint: dayPrint, mothCondition: mothCondition, currentMonth: currentMonth}
|
||||
arr.push(ele)
|
||||
}
|
||||
}
|
||||
})
|
||||
return arr
|
||||
}
|
||||
// display
|
||||
showDate()
|
||||
// change date
|
||||
watch(() => props.date, (newVal, oldVal) => {
|
||||
showDate()
|
||||
})
|
||||
|
||||
</script>
|
||||
16
components/datepicker/PickMonth.vue
Normal file
16
components/datepicker/PickMonth.vue
Normal file
@@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<div class="columns is-mobile is-multiline mx-0">
|
||||
<div class="column is-4 px-3" v-for="v in months">
|
||||
<span class="hyperlink fs-14" @click="$emit('month', v)">{{ `Tháng ${v}` }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
months: [1,2,3,4,5,6,7,8,9,10,11,12]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
55
components/datepicker/PickYear.vue
Normal file
55
components/datepicker/PickYear.vue
Normal file
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<div class="columns is-mobile is-multiline mx-0">
|
||||
<div class="column is-4 has-text-centered" v-for="(v,i) in years">
|
||||
<span class="hyperlink" :class="i===0 || i===11? 'has-text-grey' : ''" @click="$emit('year', v)">{{ `${v}` }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['year', 'month', 'action'],
|
||||
data() {
|
||||
return {
|
||||
years: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.years = [this.year]
|
||||
for(let i = 1; i < 7; i++) {
|
||||
this.years.push(this.year+i)
|
||||
this.years.push(this.year-i)
|
||||
}
|
||||
this.years.sort(function(a, b) {return a - b;})
|
||||
this.years = this.years.slice(0,12)
|
||||
this.$emit('caption', `${this.years[1]}-${this.years[10]}`)
|
||||
},
|
||||
watch: {
|
||||
action: function(newVal) {
|
||||
if(newVal.name==='next') this.next()
|
||||
if(newVal.name==='previous') this.previous()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
next() {
|
||||
let year = this.years[this.years.length-1]
|
||||
this.years = []
|
||||
for(let i = 0; i < 12; i++) {
|
||||
this.years.push(year+i)
|
||||
}
|
||||
this.years.sort(function(a, b) {return a - b;})
|
||||
this.years = this.years.slice(0,12)
|
||||
this.$emit('caption', `${this.years[1]}-${this.years[10]}`)
|
||||
},
|
||||
previous() {
|
||||
let year = this.years[0]
|
||||
this.years = []
|
||||
for(let i = 0; i < 12; i++) {
|
||||
this.years.push(year-i)
|
||||
}
|
||||
this.years.sort(function(a, b) {return a - b;})
|
||||
this.years = this.years.slice(0,12)
|
||||
this.$emit('caption', `${this.years[1]}-${this.years[10]}`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
16
components/datepicker/ViewEvent.vue
Normal file
16
components/datepicker/ViewEvent.vue
Normal file
@@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<div>
|
||||
<span v-html="row.event.name"></span>
|
||||
<!--<p v-for="v in data">{{ v.text }}</p>-->
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['row'],
|
||||
data() {
|
||||
return {
|
||||
data: this.row.event.arr
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
69
components/dialog/ApprovalCode.vue
Normal file
69
components/dialog/ApprovalCode.vue
Normal file
@@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<div>
|
||||
<Caption v-bind="{title: 'Nhập mã duyệt'}"></Caption>
|
||||
<div class="field is-grouped mt-5">
|
||||
<div class="control mr-5" v-for="v in [1,2,3,4]">
|
||||
<input class="input is-dark" style="font-size: 18px; max-width: 40px; font-weight:bold; text-align: center;" type="password"
|
||||
maxlength="1" :id="`input${v}`" v-model="data[v]" @keyup="changeNext(v)" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<a @click="reset()">Nhập lại</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data: {},
|
||||
code: undefined
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
if(!this.approvalcode && this.$store.state.login.approval_code) this.approvalcode = this.$store.state.login.approval_code
|
||||
if(!this.approvalcode) {
|
||||
let user = await this.$getdata('user', {id: this.$store.state.login.id}, undefined, true)
|
||||
this.approvalcode = user.approval_code
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.reset()
|
||||
},
|
||||
computed: {
|
||||
approvalcode: {
|
||||
get: function() {return this.$store.state['approvalcode']},
|
||||
set: function(val) {this.$store.commit('updateStore', {name: 'approvalcode', data: val})}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
checkError() {
|
||||
if(Object.keys(this.data).length<4) return true
|
||||
let code = ''
|
||||
for (const [key, value] of Object.entries(this.data)) {
|
||||
if(!this.$empty(value)) code += value.toString()
|
||||
}
|
||||
if(this.$empty(code) || !this.$isNumber(code)) return true
|
||||
this.code = code
|
||||
return false
|
||||
},
|
||||
checkValid() {
|
||||
if(this.checkError()) return this.$snackbar('Mã phê duyệt không hợp lệ')
|
||||
if(this.code!==this.approvalcode) return this.$snackbar('Mã phê duyệt không chính xác')
|
||||
this.$emit('modalevent', {name: 'approvalcode', data: this.code})
|
||||
this.$emit('close')
|
||||
},
|
||||
changeNext(v) {
|
||||
if(this.$empty(this.data[v])) return
|
||||
else if(v===4) return this.checkValid()
|
||||
let doc = document.getElementById(`input${v+1}`)
|
||||
if(doc) doc.focus()
|
||||
},
|
||||
reset() {
|
||||
this.data = {}
|
||||
let doc = document.getElementById(`input1`)
|
||||
if(doc) doc.focus()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
34
components/dialog/Confirm.vue
Normal file
34
components/dialog/Confirm.vue
Normal file
@@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<div>
|
||||
<p v-html="content"></p>
|
||||
<p class="border-bottom mt-3 mb-5"></p>
|
||||
<div class="field is-grouped">
|
||||
<div class="control is-expanded">
|
||||
<button class="button is-primary has-text-white" @click="confirm()">{{ store.lang==='en'? 'Accept' : 'Đồng ý'}} </button>
|
||||
<button class="button is-dark ml-5" @click="cancel()">{{store.lang==='en'? 'Cancel' : 'Hủy bỏ'}} </button>
|
||||
</div>
|
||||
<div class="control" v-if="duration">
|
||||
<CountDown v-bind="{duration: duration}" @close="cancel()"></CountDown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { useStore } from '~/stores/index'
|
||||
export default {
|
||||
setup() {
|
||||
const store = useStore()
|
||||
return { store }
|
||||
},
|
||||
props: ['content', 'duration'],
|
||||
methods: {
|
||||
cancel() {
|
||||
this.$emit('close')
|
||||
},
|
||||
confirm() {
|
||||
this.$emit('modalevent', {name: 'confirm'})
|
||||
this.cancel()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
75
components/dialog/CountDown.vue
Normal file
75
components/dialog/CountDown.vue
Normal file
@@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<div id="countdown">
|
||||
<div id="countdown-number"></div>
|
||||
<svg><circle r="18" cx="20" cy="20" color="red"></circle></svg>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['duration'],
|
||||
data() {
|
||||
return {
|
||||
timer: undefined,
|
||||
countdown: this.duration || 10
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
var countdownNumberEl = document.getElementById('countdown-number')
|
||||
countdownNumberEl.textContent = this.countdown;
|
||||
this.timer = setInterval(()=>this.startCount(), 1000)
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearInterval(this.timer)
|
||||
},
|
||||
methods: {
|
||||
startCount() {
|
||||
this.countdown -= 1
|
||||
var countdownNumberEl = document.getElementById('countdown-number')
|
||||
countdownNumberEl.textContent = this.countdown;
|
||||
if(this.countdown===0) {
|
||||
clearInterval(this.timer)
|
||||
this.$emit('close')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
#countdown {
|
||||
position: relative;
|
||||
margin: auto;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
#countdown-number {
|
||||
color: black;
|
||||
display: inline-block;
|
||||
line-height: 40px;
|
||||
}
|
||||
:deep(svg) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
transform: rotateY(-180deg) rotateZ(-90deg);
|
||||
}
|
||||
:deep(svg circle) {
|
||||
stroke-dasharray: 113px;
|
||||
stroke-dashoffset: 0px;
|
||||
stroke-linecap: round;
|
||||
stroke-width: 2px;
|
||||
stroke: black;
|
||||
fill: none;
|
||||
animation: countdown 10s linear infinite forwards;
|
||||
}
|
||||
@keyframes countdown {
|
||||
from {
|
||||
stroke-dashoffset: 0px;
|
||||
}
|
||||
to {
|
||||
stroke-dashoffset: 113px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
47
components/dialog/Delete.vue
Normal file
47
components/dialog/Delete.vue
Normal file
@@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<div>
|
||||
<p v-html="content"></p>
|
||||
<p class="border-bottom mt-4 mb-5"></p>
|
||||
<div class="field is-grouped">
|
||||
<div class="control is-expanded">
|
||||
<button class="button is-danger" @click="remove()">Đồng ý</button>
|
||||
<button class="button is-dark ml-5" @click="cancel()">Hủy bỏ</button>
|
||||
</div>
|
||||
<div class="control" v-if="duration">
|
||||
<CountDown v-bind="{duration: duration}" @close="cancel()"></CountDown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['content', 'duration', 'vbind', 'setdeleted'],
|
||||
methods: {
|
||||
cancel() {
|
||||
this.$emit('close')
|
||||
},
|
||||
async remove() {
|
||||
let pagename = this.vbind.pagename
|
||||
let pagedata = this.$store.state[pagename]
|
||||
let name = pagedata.origin_api.name || this.vbind.api
|
||||
let id = this.vbind.row.id
|
||||
let result
|
||||
if(this.setdeleted) {
|
||||
let record = await this.$getdata(name, {id: id}, undefined, true)
|
||||
record.deleted = 1
|
||||
result = await this.$updateapi(name, record)
|
||||
} else result = await this.$deleteapi(name, id)
|
||||
if(result==='error') return this.$dialog('Đã xảy ra lỗi, xóa dữ liệu thất bại', 'Lỗi', 'Error')
|
||||
this.$snackbar('Dữ liệu đã được xoá khỏi hệ thống', undefined, 'Success')
|
||||
let arr = Array.isArray(id)? id : [{id: id}]
|
||||
let copy = this.$copy(this.$store.state[pagename].data)
|
||||
arr.map(x=>{
|
||||
let index = copy.findIndex(v=>v.id===x.id)
|
||||
index>=0? this.$delete(copy,index) : false
|
||||
})
|
||||
this.$store.commit('updateState', {name: pagename, key: 'update', data: {data: copy}})
|
||||
this.cancel()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
28
components/dialog/Error.vue
Normal file
28
components/dialog/Error.vue
Normal file
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="field is-grouped">
|
||||
<div class="control is-expanded pr-3" v-html="content"></div>
|
||||
<div class="control">
|
||||
<SvgIcon v-bind="{name: 'error.svg', type: 'danger', size: 24}"></SvgIcon>
|
||||
</div>
|
||||
</div>
|
||||
<p class="border-bottom mt-3 mb-5"></p>
|
||||
<div class="field is-grouped">
|
||||
<div class="control is-expanded">
|
||||
<button class="button is-danger has-text-white" @click="cancel()">Đóng</button>
|
||||
</div>
|
||||
<div class="control" v-if="duration">
|
||||
<CountDown v-bind="{duration: duration}" @close="cancel()"></CountDown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
var props = defineProps({
|
||||
content: String,
|
||||
duration: Number
|
||||
})
|
||||
function cancel() {
|
||||
this.$emit('close')
|
||||
}
|
||||
</script>
|
||||
24
components/dialog/Info.vue
Normal file
24
components/dialog/Info.vue
Normal file
@@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<div>
|
||||
<p v-html="content"></p>
|
||||
<p class="border-bottom mt-3 mb-5"></p>
|
||||
<div class="field is-grouped">
|
||||
<div class="control is-expanded">
|
||||
<button class="button is-dark has-text-white" @click="cancel()">Đóng</button>
|
||||
</div>
|
||||
<div class="control" v-if="duration">
|
||||
<CountDown v-bind="{duration: duration}" @close="cancel()"></CountDown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['content', 'duration'],
|
||||
methods: {
|
||||
cancel() {
|
||||
this.$emit('close')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
29
components/dialog/Success.vue
Normal file
29
components/dialog/Success.vue
Normal file
@@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="field is-grouped">
|
||||
<div class="control is-expanded pr-3" v-html="content"></div>
|
||||
<div class="control">
|
||||
<SvgIcon v-bind="{name: 'check2.svg', type: 'primary', size: 24}"></SvgIcon>
|
||||
</div>
|
||||
</div>
|
||||
<p class="border-bottom mt-3 mb-5"></p>
|
||||
<div class="field is-grouped">
|
||||
<div class="control is-expanded">
|
||||
<button class="button is-primary has-text-white" @click="cancel()">Đóng</button>
|
||||
</div>
|
||||
<div class="control" v-if="duration">
|
||||
<CountDown v-bind="{duration: duration}" @close="cancel()"></CountDown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['content', 'duration'],
|
||||
methods: {
|
||||
cancel() {
|
||||
this.$emit('close')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
40
components/maintab/Configuration.vue
Normal file
40
components/maintab/Configuration.vue
Normal file
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<div class="columns mx-0">
|
||||
<div class="column is-2">
|
||||
<div class="py-1" v-for="v in array">
|
||||
<a :class="(current? current.code===v.code : false)? 'has-text-primary has-text-weight-bold' : ''" @click="changeTab(v)">{{ v.name }}</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-10">
|
||||
<div class="fsb-20 mb-3" v-if="current">{{ current.name }}</div>
|
||||
<DataView v-bind="current.vbind" v-if="current"></DataView>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { useStore } from '~/stores/index'
|
||||
const store = useStore()
|
||||
const { $clone } = useNuxtApp()
|
||||
|
||||
var array = [
|
||||
{code: 'systemsetting', name: 'System setting', vbind: {api: 'systemsetting', setting: 'common-fields-1', pagename: 'pagedata8.8.8',
|
||||
timeopt: 36000,
|
||||
modal: {component: 'parameter/Common', title: 'System setting', vbind: {api: 'systemsetting'}}}},
|
||||
|
||||
{code: 'emailsetup', name: 'Email setup', vbind: {api: 'emailsetup', setting: 'email-setup', pagename: 'pagedata8.8.8',
|
||||
timeopt: 36000,
|
||||
modal: {component: 'parameter/EmailSetup', title: 'Email setup', width: '600px', height: '300px', vbind: {api: 'emailsetup'}}}},
|
||||
|
||||
{code: 'settingfields', name: 'Setting fields',
|
||||
vbind: {api: 'settingfields', setting: 'system-setting-fields', pagename: 'pagedata8.8.8', timeopt: 36000,
|
||||
modal: {component: 'parameter/SettingFields', title: 'Setting fields', vbind: {api: 'settingfields'}}}}
|
||||
]
|
||||
var current = ref(array[0])
|
||||
function changeTab(v) {
|
||||
current.value = null
|
||||
let copy = $clone(store['pagedata8.8.8'])
|
||||
copy.filters = []
|
||||
store.commit('pagedata8.8.8', copy)
|
||||
setTimeout(()=>current.value = v)
|
||||
}
|
||||
</script>
|
||||
72
components/maintab/DataDeletion.vue
Normal file
72
components/maintab/DataDeletion.vue
Normal file
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<div class="columns is-centered mx-0">
|
||||
<div class="column is-6">
|
||||
<article class="message is-danger">
|
||||
<div class="message-header">
|
||||
<p class="fsb-20 has-text-white">{{$lang('warning')}}</p>
|
||||
</div>
|
||||
<div class="message-body has-text-black fs-17">
|
||||
{{$lang('alert')}}
|
||||
</div>
|
||||
</article>
|
||||
<div class="field is-horizontal">
|
||||
<div class="field-body">
|
||||
<div class="field is-narrow">
|
||||
<label class="label">{{ $lang('confirm') }} <b class="has-text-danger">*</b></label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" :placeholder="$lang('info')" v-model="text">
|
||||
</div>
|
||||
<p class="help has-text-danger" v-if="errors.text">{{ errors.text }}</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">{{ $lang('hash') }} <b class="has-text-danger">*</b></label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" placeholder="secret key" v-model="password">
|
||||
</div>
|
||||
<p class="help has-text-danger" v-if="errors.password">{{ errors.password }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-5">
|
||||
<button :class="`button is-danger ${loading? 'is-loading' : ''} has-text-white`" @click="deletion()">
|
||||
Xóa dữ liệu
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
const { $empty, $insertapi, $snackbar, $lang } = useNuxtApp()
|
||||
var text = ref()
|
||||
var password = ref()
|
||||
var hash = ref()
|
||||
var loading = ref(false)
|
||||
var errors = ref({})
|
||||
async function sha256(str) {
|
||||
const buffer = await crypto.subtle.digest("SHA-256", new TextEncoder().encode(str));
|
||||
return Array.from(new Uint8Array(buffer)).map(b => b.toString(16).padStart(2, '0')).join('');
|
||||
}
|
||||
async function checkError() {
|
||||
errors.value = {}
|
||||
if(text.value!=='delete') errors.value.text = "Chưa nhập xác nhận xóa"
|
||||
if($empty(password.value)) errors.value.password = "Chưa nhập chuỗi bí mật"
|
||||
else {
|
||||
hash.value = await sha256(password.value)
|
||||
if(hash.value !=='8816f9082eb2a9adf08dca6e0273d40908f409b6f8ca60bbeedd5d8d437c603b') {
|
||||
errors.value.password = "Chuỗi bí mật không chính xác"
|
||||
}
|
||||
}
|
||||
return Object.keys(errors.value).length>0
|
||||
}
|
||||
async function deletion() {
|
||||
let rs = await checkError()
|
||||
if(rs) return
|
||||
loading.value = true
|
||||
rs = await $insertapi('datadeletion', {password: password.value, hash: hash.value})
|
||||
if(rs==='error') $snackbar($lang('delete-error'))
|
||||
else $snackbar($lang('delete-success'))
|
||||
text.value = undefined
|
||||
password.value = undefined
|
||||
loading.value = false
|
||||
}
|
||||
</script>
|
||||
84
components/media/Camera.vue
Normal file
84
components/media/Camera.vue
Normal file
@@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<div>
|
||||
<div><video ref="video" id="video" width="640" height="480" autoplay></video></div>
|
||||
<div class="mt-2">
|
||||
<button class="button is-primary" id="snap" v-on:click="capture()">Chụp ảnh</button>
|
||||
<a class="ml-6" @click="switchView()">
|
||||
<SvgIcon v-bind="{name: 'camera_switch.svg', type: 'black', size: 40}"></SvgIcon>
|
||||
</a>
|
||||
</div>
|
||||
<canvas v-show="false" ref="canvas" id="canvas" width="640" height="480"></canvas>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data: function() {
|
||||
return {
|
||||
video: {},
|
||||
canvas: {},
|
||||
current: 'front'
|
||||
}
|
||||
},
|
||||
mounted: function() {
|
||||
this.openCamera()
|
||||
},
|
||||
beforeDestroy() {
|
||||
var vidTrack = this.video.srcObject.getVideoTracks()
|
||||
vidTrack.forEach(track => {
|
||||
track.stop()
|
||||
track.enabled = false
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
openCamera() {
|
||||
let f = this.current==='front'? {facingMode: "user"} : {facingMode: {exact: "environment"}}
|
||||
this.video = this.$refs.video;
|
||||
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
|
||||
navigator.mediaDevices.getUserMedia({ video: f, audio: false }).then(stream => {
|
||||
video.srcObject = stream;
|
||||
this.video.play();
|
||||
});
|
||||
}
|
||||
},
|
||||
capture() {
|
||||
this.canvas = this.$refs.canvas;
|
||||
let scale = 600 / this.video.videoWidth;
|
||||
let w = this.video.videoWidth * scale;
|
||||
let h = this.video.videoHeight * scale;
|
||||
this.canvas.width = w;
|
||||
this.canvas.height = h;
|
||||
var context = this.canvas
|
||||
.getContext("2d")
|
||||
.drawImage(this.video,0,0,w,h);
|
||||
this.canvas.toBlob(blod=>this.saveAs(blod))
|
||||
},
|
||||
async saveAs(blod) {
|
||||
var form = new FormData();
|
||||
let name = `${this.$id()}.png`
|
||||
this.fileName = `${this.$dayjs(new Date()).format("YYYYMMDDhhmmss")}-${name}`
|
||||
form.append('filename', this.fileName)
|
||||
form.append('name', name)
|
||||
form.append('file', blod)
|
||||
form.append('type', 'image')
|
||||
form.append('size', 100)
|
||||
form.append('user', this.$store.state.login.id)
|
||||
let result = await this.$insertapi('upload', form)
|
||||
if(result==='error') return
|
||||
let row = result.rows[0]
|
||||
const file = new File([blod], name, {type: "image/png"})
|
||||
row.source = {file: file}
|
||||
this.$emit('modalevent', {name: 'selectimage', data: row})
|
||||
this.$emit('close')
|
||||
},
|
||||
switchView() {
|
||||
this.current = this.current==='front'? 'back' : 'front'
|
||||
var vidTrack = this.video.srcObject.getVideoTracks()
|
||||
vidTrack.forEach(track => {
|
||||
track.stop()
|
||||
track.enabled = false
|
||||
})
|
||||
this.openCamera()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
81
components/media/ChipImage.vue
Normal file
81
components/media/ChipImage.vue
Normal file
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="image-container">
|
||||
<a @click="open()"><img :src="image" style="max-height: 86vh !important;"></a>
|
||||
<div class="image-label">
|
||||
<span class="is-clickable" @click="copyImage()" v-if="display.findIndex(v=>v==='copy')>=0">
|
||||
<SvgIcon v-bind="{name: 'copy.svg', type: 'primary', size: 20}"></SvgIcon>
|
||||
</span>
|
||||
<span class="is-clickable ml-5" @click="download()" v-if="display.findIndex(v=>v==='download')>=0">
|
||||
<SvgIcon v-bind="{name: 'download.svg', type: 'primary', size: 20}"></SvgIcon>
|
||||
</span>
|
||||
<span class="is-clickable ml-5" @click="askConfirm()" v-if="display.findIndex(v=>v==='delete')>=0">
|
||||
<SvgIcon v-bind="{name: 'bin1.svg', type: 'danger', size: 18}"></SvgIcon>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<Modal @close="showmodal=undefined" @remove="remove" @confirm="remove()" v-bind="showmodal" v-if="showmodal"></Modal>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { useStore } from '~/stores/index'
|
||||
export default {
|
||||
setup() {
|
||||
const store = useStore()
|
||||
return { store }
|
||||
},
|
||||
props: ['row', 'api', 'pagename', 'file', 'image', 'show', 'extend'],
|
||||
data() {
|
||||
return {
|
||||
showmodal: undefined,
|
||||
display: this.show || []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
open() {
|
||||
if(!this.file || this.extend===false) return
|
||||
this.showmodal = {title: this.file.file__name, component: 'media/ChipImage',
|
||||
vbind: {extend: false, show: this.show, file: this.file,
|
||||
image: `${this.$getpath()}download/?name=${this.file.file__file || this.file.file}&type=file`}}
|
||||
},
|
||||
info() {
|
||||
if(!this.file) return
|
||||
this.showmodal = {vbind: {file: this.file}, component: 'media/ImageAttr',
|
||||
title: 'Thông tin trích xuất từ hình ảnh', width: '35%', height: '50vh'}
|
||||
},
|
||||
find() {
|
||||
this.showmodal = {vbind: {row: this.row, api: this.api, pagename: this.pagename}, component: 'ekyc/IDcheck',
|
||||
title: 'Kiểm tra CMT / CCCD / HC / GPLX / CMT-CA / CMT-QD', width: '90%', height: '70vh'}
|
||||
},
|
||||
download() {
|
||||
let name = this.file? this.file.file__name || this.file.name : 'download'
|
||||
let path = `${this.$getpath()}download/?name=${this.file.file__file || this.file.file}&type=file`
|
||||
this.$download(path, name)
|
||||
},
|
||||
askConfirm() {
|
||||
let text = this.store.lang==='en'? 'Do you agree to delete this image' : `Bạn có đồng ý <b>xóa hình ảnh</b> này không?`
|
||||
this.showmodal = {component: `dialog/Confirm`,title: this.store.lang==='en'? 'Confirm' : 'Xác nhận', width: '500px', height: '100px',
|
||||
vbind: {content: text, duration: 10}}
|
||||
},
|
||||
remove() {
|
||||
this.showmodal = undefined
|
||||
this.$emit('modalevent', {name: 'remove'})
|
||||
this.$emit('remove')
|
||||
},
|
||||
async copyImage() {
|
||||
try {
|
||||
const response = await fetch(`${this.$getpath()}download/?name=${this.file.file__file || this.file.file}&type=file`);
|
||||
const blob = await response.blob()
|
||||
await navigator.clipboard.write([
|
||||
new ClipboardItem({
|
||||
[blob.type]: blob
|
||||
})
|
||||
])
|
||||
this.$snackbar('Copied to clipboard')
|
||||
} catch (err) {
|
||||
console.error(err.name, err.message)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
91
components/media/CropImage.vue
Normal file
91
components/media/CropImage.vue
Normal file
@@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<div class="tile is-ancestor py-5 px-3 mx-0" v-if="image">
|
||||
<div class="tile is-1"/>
|
||||
<div class="tile is-7">
|
||||
<Cropper
|
||||
ref="cropper"
|
||||
:src="image"
|
||||
@change="onChange"
|
||||
:stencil-props="getRatio" />
|
||||
</div>
|
||||
<div class="tile is-1"> </div>
|
||||
<div class="tile">
|
||||
<div v-if="avatar!==true">
|
||||
<p class="mt-2 fs-16">Chọn tỷ lệ hoặc nhập chiều rộng và cao</p>
|
||||
<div class="tags are-medium mt-2">
|
||||
<a :class="curRatio.k===v.k? 'tag is-primary' : 'tag'" v-for="(v,i) in ratios" :key="i" @click="curRatio=v">{{v.k}}</a>
|
||||
</div>
|
||||
<div class="block mt-5">
|
||||
<b-radio v-model="radio"
|
||||
native-value="replace">
|
||||
Ghi đè
|
||||
</b-radio>
|
||||
<b-radio v-model="radio" class="ml-3"
|
||||
native-value="new">
|
||||
Tạo file mới
|
||||
</b-radio>
|
||||
</div>
|
||||
<p class="mt-4">
|
||||
<a class="button is-primary mr-4 mb-2" :class="loading? 'is-loading' : ''" @click="updateImage()">Lưu lại</a>
|
||||
</p>
|
||||
<p class="mt-2" v-if="coordinates">
|
||||
Hình ảnh cắt, {{'W: ' + coordinates.width + ', H: ' + coordinates.height + ', W/H: ' + coordinates.ratio}}
|
||||
</p>
|
||||
</div>
|
||||
<div class="is-italic has-text-grey" v-else>* Di chuyển khung để chọn hình ảnh phù hợp</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { CircleStencil, Cropper } from 'vue-advanced-cropper'
|
||||
import 'vue-advanced-cropper/dist/style.css'
|
||||
export default {
|
||||
components: {
|
||||
Cropper,
|
||||
CircleStencil
|
||||
},
|
||||
props: ['selected', 'image', 'avatar'],
|
||||
data() {
|
||||
return {
|
||||
coordinates: undefined,
|
||||
ratios: [{k: '1/1'}, {k: '5/4'}, {k:'4/3'}, {k: '3/2'}, {k: '5/3'}, {k:'16/9'}, {k: '2/1'}, {k: '3/1'}, {k: '4/5'}, {k: '3/4'}, {k: '2/3'}, {k: '3/5'}, {k: '9/16'}, {k: '1/2'}, {k: '1/3'}],
|
||||
curRatio: {k: '1/1'},
|
||||
radio: this.avatar? 'new' : 'replace',
|
||||
rectangle: true,
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getRatio() {
|
||||
return {aspectRatio: this.$calc(this.curRatio.k)}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onChange({ coordinates, canvas}) {
|
||||
this.coordinates = coordinates
|
||||
this.coordinates.ratio = (this.coordinates.width*1.00 / this.coordinates.height).toFixed(2)
|
||||
},
|
||||
updateImage() {
|
||||
const { canvas } = this.$refs.cropper.getResult()
|
||||
if (canvas) canvas.toBlob(blod=>this.saveAs(blod))
|
||||
},
|
||||
async saveAs(blod) {
|
||||
this.loading = true
|
||||
var form = new FormData();
|
||||
let name = this.selected.file.indexOf('-')>0? this.selected.file.substring(15, this.selected.file.length) : this.selected.file
|
||||
this.fileName = this.$dayjs(new Date()).format("YYYYMMDDhhmmss") + '-' + name
|
||||
if(this.radio==='replace') this.fileName = this.selected.file
|
||||
form.append('filename', this.fileName)
|
||||
form.append('name', name)
|
||||
form.append('file', blod)
|
||||
form.append('type', 'file')
|
||||
form.append('size', this.selected.size)
|
||||
form.append('user', this.$store.state.login.id)
|
||||
let result = await this.$insertapi('upload', form)
|
||||
this.loading = false
|
||||
if(result==='error') return
|
||||
this.$emit('modalevent', {name: 'image', data: result.rows[0]})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
32
components/media/FileCount.vue
Normal file
32
components/media/FileCount.vue
Normal file
@@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<div>
|
||||
<span class="tooltip">
|
||||
<span class="dot-twitter" @click="doClick()">{{ row[attr] || 0 }}</span>
|
||||
<span class="tooliptext">Hồ sơ</span>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['row', 'api', 'pagename', 'attr'],
|
||||
methods: {
|
||||
async doClick() {
|
||||
let obj
|
||||
if(this.attr==='image_count') {
|
||||
let rs = await this.$getdata(this.api, {ref: this.row.id, file__type: 2})
|
||||
if(rs.length>0) {
|
||||
obj = {component: 'media/ImageShow', title: 'Hồ sơ', width: '80%', height: '70vh',
|
||||
vbind: {row: this.row, image: rs.map(v=>v.file__file), pagename: this.pagename, api: this.api}}
|
||||
} else {
|
||||
obj = {component: 'media/ImageGallery', vbind: {row: this.row, pagename: this.pagename, api: this.api},
|
||||
width: '50%', height: '500px', title: 'Hình ảnh'}
|
||||
}
|
||||
} else {
|
||||
let vbind = {row: this.row, api: this.api, setting: 'media-fields', filter: {ref: this.row.id, file__type: 1}}
|
||||
obj = {component: 'media/FileList', title: 'Hồ sơ', width: '50%', height: '300px', vbind: vbind}
|
||||
}
|
||||
this.$emit('open', {name: 'dataevent', data: {modal: obj}})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user