changes
This commit is contained in:
Viet An
@@ -1,147 +1,144 @@
|
||||
<template>
|
||||
<div
|
||||
class="pb-1"
|
||||
style="border-bottom: 2px solid #3c5b63"
|
||||
v-if="array || !enableTime"
|
||||
class="has-text-primary fixed-grid has-12-cols"
|
||||
style="border-bottom: 2px solid var(--bulma-grey-80)"
|
||||
>
|
||||
<div class="columns mx-0 mb-0">
|
||||
<div class="grid mb-3">
|
||||
<div
|
||||
class="column is-8 px-0 pb-0"
|
||||
v-if="enableTime"
|
||||
class="cell is-col-span-7 is-flex is-align-items-center is-flex-wrap-wrap"
|
||||
style="row-gap: 0.5rem; column-gap: 1rem"
|
||||
>
|
||||
<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>
|
||||
<Caption
|
||||
:title="lang === 'vi' ? 'Thời gian' : 'Time'"
|
||||
type="has-text-orange"
|
||||
/>
|
||||
<div
|
||||
v-for="v in array"
|
||||
:key="v.code"
|
||||
>
|
||||
<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
|
||||
v-if="v.code === current"
|
||||
class="icon-text is-flex-wrap-nowrap font-semibold has-text-orange"
|
||||
>
|
||||
<span class="icon">
|
||||
<Icon
|
||||
name="material-symbols:check-rounded"
|
||||
:size="22"
|
||||
/>
|
||||
</span>
|
||||
<span style="text-wrap: nowrap">{{ v.name }}</span>
|
||||
</span>
|
||||
<span
|
||||
v-else
|
||||
class="icon-text font-semibold has-text-grey is-clickable"
|
||||
style="text-wrap: nowrap"
|
||||
@click="changeOption(v)"
|
||||
>
|
||||
{{ 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 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 && $getEditRights()"
|
||||
>
|
||||
<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 && $getEditRights()"
|
||||
>
|
||||
<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>
|
||||
<div class="cell is-col-span-5 is-flex is-align-items-center is-gap-1 is-flex-wrap-wrap">
|
||||
<Caption
|
||||
:title="lang === 'vi' ? `Tìm ${viewport === 1 ? '' : 'kiếm'}` : 'Search'"
|
||||
type="has-text-orange"
|
||||
/>
|
||||
<input
|
||||
class="input is-small is-orange"
|
||||
type="text"
|
||||
v-model="text"
|
||||
:style="`${viewport === 1 ? 'width:150px;' : ''} border: 1px solid var(--bulma-grey-80); max-width: 160px`"
|
||||
@keyup="startSearch"
|
||||
id="input"
|
||||
:placeholder="lang === 'vi' ? 'Nhập từ khóa...' : 'Enter keyword...'"
|
||||
/>
|
||||
<div class="field has-addons is-flex is-flex-wrap-wrap is-gap-0 is-align-items-center">
|
||||
<span
|
||||
class="tooltip"
|
||||
v-if="importdata && $getEditRights()"
|
||||
>
|
||||
<a
|
||||
class="button is-primary is-loading is-small ml-3"
|
||||
v-if="loading"
|
||||
></a>
|
||||
</div>
|
||||
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 && $getEditRights()"
|
||||
>
|
||||
<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>
|
||||
<p class="control">
|
||||
<button
|
||||
class="button is-ghost has-text-orange fs-14"
|
||||
@click="$emit('excel')"
|
||||
>
|
||||
<span class="icon">
|
||||
<Icon
|
||||
name="mdi:microsoft-excel"
|
||||
:size="22"
|
||||
/>
|
||||
</span>
|
||||
<span>Xuất excel</span>
|
||||
</button>
|
||||
</p>
|
||||
<p class="control">
|
||||
<button
|
||||
class="button is-ghost has-text-orange fs-14"
|
||||
@click="$emit('refresh-data')"
|
||||
>
|
||||
<span class="icon">
|
||||
<Icon
|
||||
name="material-symbols:refresh-rounded"
|
||||
:size="22"
|
||||
/>
|
||||
</span>
|
||||
<span>Làm mới</span>
|
||||
</button>
|
||||
</p>
|
||||
<Icon
|
||||
v-if="loading"
|
||||
name="svg-spinners:90-ring"
|
||||
:size="22"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Modal
|
||||
@close="showmodal = undefined"
|
||||
v-bind="showmodal"
|
||||
v-if="showmodal"
|
||||
></Modal>
|
||||
@close="showmodal = undefined"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user