315 lines
8.5 KiB
Vue
315 lines
8.5 KiB
Vue
<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>
|