erp/web
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changes

Browse Source
This commit is contained in:
Viet An
2026-05-19 10:00:15 +07:00
parent 1283757903
commit 5768a8a9fb
7 changed files with 170 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
app/components/SearchBox.vue
View File

@@ -4,7 +4,7 @@
class="field has-addons"
:id="$id()"
>
<div class="control has-icons-left has-icons-right is-expanded">
<div :class="['control has-icons-left has-icons-right is-expanded', isLoading && 'is-loading']">
<div
:class="['dropdown', pos, { 'is-active': focused }]"
style="width: 100%"
@@ -26,7 +26,7 @@
@blur="lostFocus"
@keyup.enter="pressEnter"
@keyup.esc="lostFocus"
@keyup="beginSearch"
@input="(e) => debouncedGetSuggestions(e.target.value)"
v-model="value"
:placeholder="placeholder"
/>
@@ -47,20 +47,18 @@
class="dropdown-menu"
style="min-width: 100%"
role="menu"
@click="doClick()"
>
<div
class="dropdown-content px-3"
class="dropdown-content"
style="min-width: 100%"
>
<ScrollBox
v-if="data.length > 0"
v-if="suggestions.length > 0"
v-bind="{
data: data,
data: suggestions,
name: field,
fontsize: 14,
maxheight: '200px',
notick: true,
maxHeight: '200px',
}"
@selected="choose"
/>
@@ -68,12 +66,7 @@
v-else
class="has-text-grey px-2 py-1"
>
<Icon
v-if="isLoading"
name="svg-spinners:90-ring"
:size="22"
/>
<span v-else>Không có giá trị thoả mãn</span>
Không có giá trị thoả mãn
</p>
</div>
</div>
@@ -116,12 +109,12 @@
</button>
</div>
<div
class="control"
v-if="addon"
class="control"
>
<button
class="button is-success is-light"
@click="addNew()"
@click="addNew"
style="height: 100%"
type="button"
>
@@ -144,6 +137,9 @@
</template>
<script setup>
import ScrollBox from "@/components/datatable/ScrollBox.vue";
import { debounce } from "es-toolkit";
const props = defineProps({
api: String,
field: String,
@@ -160,20 +156,17 @@ const props = defineProps({
placeholder: String,
searchfield: Array,
});
const { $copy, $dialog, $empty, $find, $findapi, $findIndex, $getdata, $id, $nonAccent, $store } = useNuxtApp();
const emit = defineEmits(["option", "modalevent"]);
const search = ref();
const data = ref([]);
const suggestions = ref([]);
const isLoading = ref(false);
const timer = ref();
const value = ref();
const selected = ref();
const showmodal = ref();
const params = ref(props.api && $findapi(props.api).params);
const orgdata = ref();
const focused = ref(false);
const count1 = ref(0);
const count2 = ref(0);
const pos = ref();
getPos();
@@ -183,12 +176,12 @@ if (props.vdata) {
orgdata.value.forEach((v) => (v.search = $nonAccent(v[props.field])));
}
if (props.first) {
data.value = orgdata.value ? $copy(orgdata.value) : await getData();
suggestions.value = orgdata.value ? $copy(orgdata.value) : await getData();
if (props.optionid) {
let f = {};
f[props.field] = props.optionid;
if (props.optionid > 0) f = { id: props.optionid };
selected.value = $find(data.value, f);
selected.value = $find(suggestions.value, f);
if (selected.value && props.vdata) {
value.value = selected.value[props.field];
}
@@ -201,7 +194,7 @@ if (selected.value) doSelect(selected.value);
watch(
() => props.optionid,
() => {
if (props.optionid) selected.value = $find(data.value, { id: props.optionid });
if (props.optionid) selected.value = $find(suggestions.value, { id: props.optionid });
if (selected.value) doSelect(selected.value);
else value.value = undefined;
},
@@ -210,7 +203,7 @@ watch(
watch(
() => props.filter,
async () => {
data.value = await getData();
suggestions.value = await getData();
},
);
@@ -220,10 +213,10 @@ watch(
if (newVal) {
orgdata.value = $copy(props.vdata);
orgdata.value.forEach((v) => (v.search = $nonAccent(v[props.field])));
data.value = $copy(orgdata.value);
suggestions.value = $copy(orgdata.value);
selected.value = undefined;
value.value = undefined;
if (props.optionid) selected.value = $find(data.value, { id: props.optionid });
if (props.optionid) selected.value = $find(suggestions.value, { id: props.optionid });
if (selected.value) doSelect(selected.value);
}
},
@@ -231,30 +224,22 @@ watch(
function choose(v) {
focused.value = false;
count1.value = 0;
count2.value = 0;
doSelect(v);
}
function setFocus() {
focused.value = true;
count1.value = 0;
count2.value = 0;
}
function lostFocus() {
setTimeout(() => {
if (focused.value && count1.value === 0) focused.value = false;
if (focused.value) focused.value = false;
}, 200);
}
function pressEnter() {
if (data.value.length === 0) return;
choose(data.value[0]);
}
function doClick() {
count1.value += 1;
if (suggestions.value.length === 0) return;
choose(suggestions.value[0]);
}
function doSelect(option) {
@@ -272,45 +257,46 @@ function clearValue() {
emit("modalevent", { name: "option", data: null });
}
watch(value, (newVal) => {
if (newVal === "") clearValue();
});
function findObject(val) {
const rows = $copy(orgdata.value);
if ($empty(val)) data.value = rows;
if ($empty(val)) suggestions.value = rows;
else {
const text = $nonAccent(val);
data.value = rows.filter((v) => v.search.toLowerCase().indexOf(text.toLowerCase()) >= 0);
suggestions.value = rows.filter((v) => v.search.toLowerCase().indexOf(text.toLowerCase()) >= 0);
}
}
async function getData() {
isLoading.value = false;
isLoading.value = true;
params.value.filter = props.filter;
const data = await $getdata(props.api, undefined, params.value);
isLoading.value = true;
isLoading.value = false;
return data;
}
async function getApi(val) {
async function getSuggestions(val) {
if (props.vdata) return findObject(val);
const text = val ? val.toLowerCase() : "";
const f = {};
const filter_or = {};
// Sử dụng searchfield nếu có, nếu không thì dùng column
const fieldsToSearch = props.searchfield || props.column;
fieldsToSearch.map((v) => {
f[`${v}__icontains`] = text;
fieldsToSearch.forEach((v) => {
filter_or[`${v}__icontains`] = text;
});
params.value.filter_or = f;
params.value.filter_or = filter_or;
if (props.filter) params.value.filter = $copy(props.filter);
data.value = await $getdata(props.api, undefined, params.value);
isLoading.value = true;
suggestions.value = await $getdata(props.api, undefined, params.value);
isLoading.value = false;
}
function beginSearch(e) {
const val = e.target.value;
search.value = val;
clearTimeout(timer.value);
timer.value = setTimeout(() => getApi(val), 150);
}
const debouncedGetSuggestions = debounce(getSuggestions, 200);
function addNew() {
showmodal.value = props.addon;
@@ -325,14 +311,14 @@ function dataevent(v) {
}
// Tìm và cập nhật trong danh sách
const idx = $findIndex(data.value, { id: v.id });
const idx = $findIndex(suggestions.value, { id: v.id });
if (idx < 0) {
// Nếu chưa có trong danh sách, thêm vào đầu
data.value.unshift(v);
suggestions.value.unshift(v);
console.log("Added new item to data:", v);
} else {
// Nếu đã có, cập nhật
data.value[idx] = v;
suggestions.value[idx] = v;
console.log("Updated existing item in data:", v);
}
@@ -358,7 +344,6 @@ function dataevent(v) {
// Đóng modal
showmodal.value = undefined;
console.log("SearchBox data after update:", data.value);
}
function viewInfo() {
@@ -391,9 +376,14 @@ function getPos() {
}
</script>
<style scoped>
.control.is-loading::after {
inset-inline-end: 2.75em;
}
.field:not(:last-child) {
margin-bottom: 0;
}
.button.is-success {
&.is-light {
--bulma-button-background-l: 89%;

2
app/components/datatable/ContextMenu.vue
View File

@@ -406,7 +406,7 @@
v-bind="{
data: props.filterData,
name: props.field.name,
maxheight: '380px',
maxHeight: '380px',
perpage: 20,
}"
@selected="doSelect"

3
app/components/datatable/DataTable.vue
View File

@@ -349,9 +349,6 @@ const getStyle = function (field, record) {
return val;
};
const getSettingStyle = function (name, field) {
if (name === "table") {
console.log("tablesetting", tablesetting);
}
if (!tablesetting || tablesetting.length === 0) {
// manual temp fix
tablesetting = [

179
app/components/datatable/ScrollBox.vue
View File

@@ -1,23 +1,29 @@
<template>
<div :style="`max-height: ${maxheight}; overflow-y: auto;`">
<div
:style="{
maxHeight,
overflowY: 'auto',
}"
>
<div
v-for="(v, i) in rows"
:key="i"
class="field is-grouped my-0"
class=""
>
<button
class="button is-white fs-14 font-normal w-full is-justify-content-start py-1.5"
class="button is-white rounded-none fs-14 font-normal w-full is-justify-content-space-between"
type="button"
@click="doClick(v, i)"
>
<span>{{ $stripHtml(v[name] || v.fullname || v.code || "n/a", 75) }}</span>
<span
v-if="checked[i] && notick !== true"
class="icon has-text-primary"
class="icon right-3"
>
<Icon
name="material-symbols:check-rounded"
:size="17"
class="has-text-primary"
/>
</span>
</button>
@@ -82,85 +88,98 @@
</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) {
const f = {};
if (this.show?.time) {
f.create_time = "desc";
}
<script setup>
const props = defineProps({
data: Array,
name: String,
maxHeight: String,
perpage: Number,
sort: String,
selects: String,
keyval: String,
show: Object,
notick: Boolean,
});
if (this.sort.startsWith("-")) {
f[this.sort.slice(1)] = "desc";
} else {
f[this.sort] = "asc";
}
const emit = defineEmits(["selected"]);
const { $copy, $multiSort, $remove } = useNuxtApp();
const currentPage = ref(1);
const total = ref(props.data.length);
const rows = ref(props.data.slice(0, props.perpage));
const selected = ref([]);
const checked = ref({});
const array = ref([]);
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);
}
}
},
getdata();
watch(
() => props.data,
() => getdata(),
{ deep: true },
);
watch(
() => props.selects,
(newVal) => {
console.log("props.selects changed", newVal);
getSelect();
},
};
{ deep: true },
);
function getdata() {
currentPage.value = 1;
array.value = $copy(props.data);
if (props.sort) {
const f = {};
if (props.show?.time) {
f.create_time = "desc";
}
if (props.sort.startsWith("-")) {
f[props.sort.slice(1)] = "desc";
} else {
f[props.sort] = "asc";
}
$multiSort(array.value, f);
}
rows.value = array.value.slice(0, props.perpage);
getSelect();
}
function getSelect() {
if (!props.selects) return;
selected.value = [];
checked.value = {};
props.selects.map((v) => {
const idx = rows.value.findIndex((x) => x[props.keyval ? props.keyval : props.name] === v);
if (idx >= 0) {
selected.value.push(rows.value[idx]);
checked.value[idx] = true;
}
});
}
function doClick(v, i, type) {
checked.value = { [i]: true };
const idx = selected.value.findIndex((x) => x.id === v.id);
idx >= 0 ? $remove(selected.value) : selected.value.push(v);
emit("selected", v, type);
}
function handleScroll(e) {
const bottom = e.target.scrollHeight - e.target.scrollTop - 5 < e.target.clientHeight;
if (bottom) {
if (total.value ? total.value > rows.value.length : true) {
currentPage.value += 1;
let arr = array.value.filter(
(_, index) => index >= (currentPage.value - 1) * props.perpage && index < currentPage.value * props.perpage,
);
rows.value = rows.value.concat(arr);
}
}
}
</script>
<style scoped>
.button.is-ghost {

18
app/plugins/00-datatable.js
View File

@@ -73,9 +73,23 @@ export default defineNuxtPlugin(() => {
return val === undefined || val === null || val === "";
};
const toRawDeep = function (observed) {
const val = toRaw(observed);
if (val instanceof Date) return val;
if (Array.isArray(val)) return val.map(toRawDeep);
if (val === null) return null;
if (typeof val === "object") {
const entries = Object.entries(val).map(([key, val]) => [key, toRawDeep(val)]);
return Object.fromEntries(entries);
}
return val;
};
const copy = function (val) {
if (empty(val)) return val;
return JSON.parse(JSON.stringify(val));
return structuredClone(toRawDeep(val));
};
const clone = function (obj) {

4
app/plugins/02-connection.js
View File

@@ -573,6 +573,10 @@ export default defineNuxtPlugin((nuxtApp) => {
params: {
values:
"id,code,name,manufacturer,manufacturer__name,os,os__name,battery,battery__code,screen,cpu,cpu__name,gpu,gpu__name,camera_system,camera_system__code,sim,sim__code,network_technology,network_technology__name,charging_technology,charging_technology__code,external_storage,external_storage__max_capacity,ip_rating,ip_rating__code,design,create_time,update_time",
distinct_values: {
label: { type: "Concat", field: ["name", "os__name", "manufacturer__name"] },
},
summary: "annotate",
},
},
{

4
build.sh
View File

@@ -6,5 +6,5 @@ python3 envprod.py
PROJECT="erp"
IMAGE="web"
docker build -t docker.bigdatatech.vn/$PROJECT/$IMAGE:latest .
docker push docker.bigdatatech.vn/$PROJECT/$IMAGE:latest
docker build -t docker.bigdatatech.vn/erp/web:latest .
docker push docker.bigdatatech.vn/erp/web:latest