80 lines
2.2 KiB
Vue
80 lines
2.2 KiB
Vue
<template>
|
|
<div class="card table-box">
|
|
<div>
|
|
<h3>/product/categories</h3>
|
|
</div>
|
|
<div>
|
|
<h4>{{ paramsValue }}</h4>
|
|
</div>
|
|
<template v-for="(item, index) in tableData" :key="index">
|
|
<MyTable :title="item.title" :columns="item.columns" :tableData="item.data" />
|
|
</template>
|
|
<div>
|
|
<h5>{{ queryTextareaTitle }}</h5>
|
|
<el-input v-model="queryTextareaValue" style="width: 840px" :rows="10" type="textarea" readonly />
|
|
</div>
|
|
<div>
|
|
<h5>{{ returnTextareaTitle }}</h5>
|
|
<el-input v-model="returnTextareaTitleValue" style="width: 840px" :rows="30" type="textarea" readonly />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts" name="productClassIndex">
|
|
import { ZH_DATA } from "./data/zh_data";
|
|
import { EN_DATA } from "./data/en_data";
|
|
import { useUserStore } from "@/stores/modules/user";
|
|
import MyTable from "@/components/MyTable/index.vue";
|
|
import { RETURN_VALUE } from "./example/index";
|
|
const userStore = useUserStore();
|
|
const PARAMS_DATA: any = {
|
|
1: ZH_DATA,
|
|
2: EN_DATA
|
|
};
|
|
const TEXTAREA_TITLES: any = {
|
|
1: "请求示例",
|
|
2: "Request Example"
|
|
};
|
|
const TEXTAREA_TITLES1: any = {
|
|
1: "响应示例",
|
|
2: "Response Example"
|
|
};
|
|
const PARAMS_VALUE: any = {
|
|
1: "公共参数",
|
|
2: "Common parameters"
|
|
};
|
|
|
|
let tableData = ref(ZH_DATA);
|
|
let queryTextareaValue = ref(
|
|
JSON.stringify(
|
|
{
|
|
parent_id: 1,
|
|
language: "zh-cn",
|
|
page: 1,
|
|
size: 50
|
|
},
|
|
null,
|
|
2
|
|
)
|
|
);
|
|
let returnTextareaTitleValue = ref(JSON.stringify(RETURN_VALUE, null, 2));
|
|
let queryTextareaTitle = ref("请求示例");
|
|
let returnTextareaTitle = ref("响应示例");
|
|
let paramsValue = ref("公共参数");
|
|
watch(
|
|
() => userStore.languageValue,
|
|
newVal => {
|
|
tableData.value = PARAMS_DATA[newVal];
|
|
queryTextareaTitle.value = TEXTAREA_TITLES[newVal];
|
|
returnTextareaTitle.value = TEXTAREA_TITLES1[newVal];
|
|
paramsValue.value = PARAMS_VALUE[newVal];
|
|
},
|
|
{
|
|
immediate: true,
|
|
deep: true
|
|
}
|
|
);
|
|
</script>
|
|
|
|
<style scoped></style>
|