use json view instead of grid view

This commit is contained in:
liangping 2023-11-10 13:57:06 +08:00
parent e8f788de06
commit f91b26abba

View File

@ -10,6 +10,10 @@ import { useRoute } from 'vue-router';
import type { ContractInfo, PaginabledContractStates, PaginabledContracts } from '../types'; import type { ContractInfo, PaginabledContractStates, PaginabledContracts } from '../types';
import { post } from '@/libs'; import { post } from '@/libs';
import { JsonViewer } from "vue3-json-viewer"
// if you used v1.0.5 or latster ,you should add import "vue3-json-viewer/dist/index.css"
import "vue3-json-viewer/dist/index.css";
const chainStore = useBlockchain(); const chainStore = useBlockchain();
const baseStore = useBaseStore(); const baseStore = useBaseStore();
const format = useFormatter(); const format = useFormatter();
@ -86,19 +90,19 @@ function queryContract() {
wasmStore.wasmClient wasmStore.wasmClient
.getWasmContractRawQuery(contractAddress, query.value) .getWasmContractRawQuery(contractAddress, query.value)
.then((x) => { .then((x) => {
result.value = JSON.stringify(x); result.value = x;
}) })
.catch((err) => { .catch((err) => {
result.value = JSON.stringify(err); result.value = err;
}); });
} else { } else {
wasmStore.wasmClient wasmStore.wasmClient
.getWasmContractSmartQuery(contractAddress, query.value) .getWasmContractSmartQuery(contractAddress, query.value)
.then((x) => { .then((x) => {
result.value = JSON.stringify(x); result.value = x;
}) })
.catch((err) => { .catch((err) => {
result.value = JSON.stringify(err); result.value = err;
}); });
} }
} catch (err) { } catch (err) {
@ -122,7 +126,7 @@ const radioContent = [
const selectedRadio = ref('raw'); const selectedRadio = ref('raw');
const query = ref(''); const query = ref('');
const result = ref(''); const result = ref({});
</script> </script>
<template> <template>
<div> <div>
@ -233,18 +237,9 @@ const result = ref('');
<label for="modal-contract-states" class="btn btn-sm btn-circle"></label> <label for="modal-contract-states" class="btn btn-sm btn-circle"></label>
</div> </div>
<div class="overflow-auto"> <div class="overflow-auto">
<table class="table table-compact w-full text-sm"> <JsonViewer :value="state.models?.map(v => ({key: format.hexToString(v.key), value: JSON.parse(format.base64ToString(v.value))}))" :theme="baseStore.theme" style="background: transparent;" copyable boxed sort :expand-depth="5"/>
<tr v-for="(v, index) in state.models" :key="index" class="hover">
<td class="" :data-tip="format.hexToString(v.key)">
<span class="font-bold">{{ format.hexToString(v.key) }}</span>
</td>
<td class="text-left w-3/4" :title="format.base64ToString(v.value)">
{{ format.base64ToString(v.value) }}
</td>
</tr>
</table>
<PaginationBar :limit="pageRequest.limit" :total="state.pagination?.total" <PaginationBar :limit="pageRequest.limit" :total="state.pagination?.total"
:callback="pageload" /> :callback="pageloadState" />
</div> </div>
</div> </div>
</label> </label>
@ -279,8 +274,9 @@ const result = ref('');
</div> </div>
<textarea v-model="query" placeholder="Query String, {}" label="Query String" <textarea v-model="query" placeholder="Query String, {}" label="Query String"
class="my-2 textarea textarea-bordered w-full" /> class="my-2 textarea textarea-bordered w-full" />
<textarea v-model="result" readonly placeholder="Query Result" label="Result"
class="textarea textarea-bordered w-full" /> <JsonViewer :value="result" :theme="baseStore.theme" style="background: transparent;" copyable boxed sort :expand-depth="5"/>
</div> </div>
<div class="mt-4 mb-4 text-center"> <div class="mt-4 mb-4 text-center">
<button class="btn btn-primary px-4 text-white" @click="queryContract()"> <button class="btn btn-primary px-4 text-white" @click="queryContract()">