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

chore: install prettier

Browse Source
This commit is contained in:
Viet An
2026-05-04 15:22:27 +07:00
parent 93d29ca7d8
commit bd58e2b847
267 changed files with 22950 additions and 13581 deletions
Download Patch File Download Diff File Expand all files Collapse all files

431
app/components/datatable/DataModel.vue
View File

@@ -1,193 +1,314 @@
<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()">
<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 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 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>
</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>
<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]
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()
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()
tab.value = v.code;
if (v.code === "table") loadData();
}
async function loadData() {
let vfilter = filter? filter.trim() : undefined
if(vfilter) {
let vfilter = filter ? filter.trim() : undefined;
if (vfilter) {
try {
vfilter = JSON.parse(vfilter)
vfilter = JSON.parse(vfilter);
} catch (error) {
alert('Cấu trúc filter có lỗi')
vfilter = undefined
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()
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}
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()
if (!$empty(sort)) {
if (vparams) {
vparams.sort = sort.trim();
} else {
vparams = {sort: sort.trim()}
vparams = { sort: sort.trim() };
}
}
if(vparams) {
if (vparams) {
let url = new URL(baseUrl);
let searchParams = new URLSearchParams(vparams);
url.search = searchParams.toString();
apiUrl.value = baseUrl + url.search
}
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)
})
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)
})
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)
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))
$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})}}
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')
$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)
if ($empty(text)) return (displayData.value = data);
displayData.value = data.filter((v) => v.model.toLowerCase().indexOf(text.toLowerCase()) >= 0);
}
</script>
</script>