365 lines
11 KiB
Vue
365 lines
11 KiB
Vue
<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 && $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>
|
|
<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() {
|
|
// 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
|
|
} else if (found.params && found.params.values) {
|
|
// Lấy từ API config mặc định
|
|
valuesString = found.params.values
|
|
} 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())
|
|
// 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
|
|
}
|
|
})
|
|
} 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
|
|
})
|
|
|
|
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> |