You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
310 lines
14 KiB
310 lines
14 KiB
6 months ago
|
@@master_page.html
|
||
|
|
<link href="css/page_interface_detail.css?v=1" rel="stylesheet" />
|
||
|
|
<div id="app">
|
||
|
|
<div v-if="data">
|
||
|
|
<h1>
|
||
|
|
{{data.Name}} <button @click="changeTag" type="button" class="btn btn-danger" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Tooltip on bottom"><i class="mdi-toggle-switch mdi"></i>切换模式</button>
|
||
|
|
</h1>
|
||
|
|
<div class="url">
|
||
|
|
{{ data.HttpMethod }}: {{data.Url}}
|
||
|
|
</div>
|
||
|
|
<div :class="{'hidden': !toggle}" >
|
||
|
|
<div class="parameter" v-if="data.DataModel.DefaultParameters && data.DataModel.DefaultParameters.length > 0">
|
||
|
|
<div class="form-group" v-for="param in data.DataModel.DefaultParameters" :key="param.Name">
|
||
|
|
<label class="control-label" :style="{ display: param.ValueIsReadOnly ? 'none' : 'block' }">{{param.Description}} [ {{ param.Name }} {{param.FieldOperatorString}}]:</label>
|
||
|
|
|
||
|
|
<div v-if="param.ValueType=='Byte[]'">
|
||
|
|
<input @change="handleFileChange($event, param)" class="form-control" type="file" :placeholder="param.ValueType">
|
||
|
|
</div>
|
||
|
|
<div v-else-if="param.ValueIsReadOnly==false">
|
||
|
|
<input v-model="param.Value" type="text" class="form-control" :placeholder="param.ValueType">
|
||
|
|
</div>
|
||
|
|
<div v-else-if="param.ValueIsReadOnly==true" :style="{ display: param.ValueIsReadOnly ? 'none' : 'block' }">
|
||
|
|
<input v-model="param.Value" type="text" class="readonly form-control" readonly="readonly" placeholder="">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="parameter" v-if="data.DataModel.OrderDynamicParemters">
|
||
|
|
<label>
|
||
|
|
排序:
|
||
|
|
</label>
|
||
|
|
<textarea id="txtOrderDynamicParemters" placeholder="格式：[{FieldName:FieldName,OrderByType:0}] ，其中： 0 升序, 1 倒序，FieldName是列表中的列"> </textarea>
|
||
|
|
</div>
|
||
|
|
<div class="parameter" v-if="!data.DataModel.OrderDynamicParemters">
|
||
|
|
<input id="txtOrderDynamicParemters" type="hidden" />
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<button class="btn btn-primary m-r-10" v-on:click="submitRequest"><i class="mdi mdi-check-circle-outline"></i>提交</button>
|
||
|
|
<button class="btn btn-info m-r-10" v-on:click="saveParameters"><i class="mdi-content-save mdi"></i> 保存参数</button>
|
||
|
|
<button class="btn btn btn-pink m-r-10" v-on:click="loadParameters"><i class="mdi-autorenew mdi"></i>加载参数</button>
|
||
|
|
<button class="btn btn btn-secondary m-r-10" v-on:click="submitClose"><i class="mdi-close mdi"></i>关闭页面</button>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<code>{{message}}</code>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div :class="{'hidden': toggle}">
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="control-label">
|
||
|
|
Json参数:
|
||
|
|
</label>
|
||
|
|
<div id="editorJson" class="m-t-10" style="padding:10px;width: 100%; height: 300px;"></div>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<button class="btn btn-primary m-r-10" v-on:click="submitRequestJson"><i class="mdi mdi-check-circle-outline"></i>提交</button>
|
||
|
|
<button class="btn btn-info m-r-10" v-on:click="saveParametersJson"><i class="mdi-content-save mdi"></i> 保存参数</button>
|
||
|
|
<button class="btn btn btn-pink m-r-10" v-on:click="loadParametersJson"><i class="mdi-autorenew mdi"></i>加载参数</button>
|
||
|
|
<button class="btn btn btn-secondary m-r-10" v-on:click="submitClose"><i class="mdi-close mdi"></i>关闭页面</button>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<code>{{message}}</code>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div v-else>
|
||
|
|
<!-- 处理 data 为 null 的情况，可以显示加载中或错误信息 -->
|
||
|
|
<p>Loading...</p>
|
||
|
|
</div>
|
||
|
|
<div id="editor" class="m-t-10" style="padding:10px;width: 100%; height: 300px;"></div>
|
||
|
|
|
||
|
|
<div v-if="responseUrl" class="alert alert-success m-t-10 m-b-10">
|
||
|
|
<div class="m-b-10" v-if="data.HttpMethod=='Post'">Post同时支持Raw、表单和url参数</div>
|
||
|
|
<div class="m-b-10" v-if="data.HttpMethod=='All'">Get Post 都支持,可以是Url参数、表单参数或者Raw</div>
|
||
|
|
{{responseUrl}}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<script src="js/ace/src-min/ace.js"></script>
|
||
|
|
<script>
|
||
|
|
var vueObj = new Vue({
|
||
|
|
el: '#app',
|
||
|
|
data: {
|
||
|
|
data: null,
|
||
|
|
error: null,
|
||
|
|
response: "",
|
||
|
|
responseUrl: null,
|
||
|
|
toggle:true,
|
||
|
|
message: "注意：如果找不到表需要到【菜单：实体表维护】点按钮【同步】建表"
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
// 在组件加载时触发数据获取
|
||
|
|
this.fetchData();
|
||
|
|
var th = this;
|
||
|
|
th.setEditorValue("{}");
|
||
|
|
setTimeout(function () {
|
||
|
|
var value = th.transformJsonArrayToObject(th.data.DataModel.DefaultParameters);
|
||
|
|
th.setEditorJsonValue(JSON.stringify(value,null,4));
|
||
|
|
},2000);
|
||
|
|
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
submitClose: function () {
|
||
|
|
window.close();
|
||
|
|
},
|
||
|
|
submitRequestJson: function () {
|
||
|
|
var vm = this;
|
||
|
|
var json = vm.data; // Uncomment this line
|
||
|
|
// 构造请求
|
||
|
|
var fullUrl = json.Url;
|
||
|
|
var json = ace.edit("editorJson").getValue();
|
||
|
|
try {
|
||
|
|
json = JSON.parse(json);
|
||
|
|
if (Array.isArray(json))
|
||
|
|
{
|
||
|
|
json = { data: json };
|
||
|
|
}
|
||
|
|
} catch (e) {
|
||
|
|
var editor = ace.edit("editor")
|
||
|
|
editor.setValue(JSON.stringify({ message: "json格式不标准" },null,4));
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
var isUrlParameters = this.isUrlParameters(fullUrl);
|
||
|
|
if (isUrlParameters)
|
||
|
|
{
|
||
|
|
fullUrl = this.getUrlByUrlParameters(fullUrl);
|
||
|
|
}
|
||
|
|
// 发送 POST 请求
|
||
|
|
axios.post(fullUrl, json , jwHeader)
|
||
|
|
.then(function (response) {
|
||
|
|
// 更新响应
|
||
|
|
vm.response = JSON.stringify(response.data, null, 4);
|
||
|
|
this.setEditorValue(vm.response);
|
||
|
|
this.setResponseUrl(fullUrl, json, isUrlParameters);
|
||
|
|
|
||
|
|
}.bind(vm))
|
||
|
|
.catch(function (error) {
|
||
|
|
// 处理错误
|
||
|
|
vm.response = "网络错误";
|
||
|
|
}.bind(vm));
|
||
|
|
},
|
||
|
|
submitRequest: function () {
|
||
|
|
|
||
|
|
var vm = this;
|
||
|
|
var json = vm.data; // Uncomment this line
|
||
|
|
// 构造请求
|
||
|
|
var fullUrl = json.Url;
|
||
|
|
var postData = {};
|
||
|
|
if (json.DataModel.DefaultParameters) {
|
||
|
|
json.DataModel.DefaultParameters.forEach(function (param) {
|
||
|
|
postData[param.Name] = param.Value;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if (txtOrderDynamicParemters.value) {
|
||
|
|
postData["OrderDynamicParemters"] = txtOrderDynamicParemters.value;
|
||
|
|
}
|
||
|
|
var isUrlParameters = this.isUrlParameters(fullUrl);
|
||
|
|
if (isUrlParameters) {
|
||
|
|
fullUrl = this.getUrlByUrlParameters(fullUrl);
|
||
|
|
}
|
||
|
|
// 发送 POST 请求
|
||
|
|
axios.post(fullUrl, postData, jwHeader)
|
||
|
|
.then(function (response) {
|
||
|
|
// 更新响应
|
||
|
|
vm.response = JSON.stringify(response.data, null, 4);
|
||
|
|
this.setEditorValue(vm.response);
|
||
|
|
this.setResponseUrl(fullUrl, postData, isUrlParameters);
|
||
|
|
|
||
|
|
}.bind(vm))
|
||
|
|
.catch(function (error) {
|
||
|
|
// 处理错误
|
||
|
|
vm.response = "网络错误";
|
||
|
|
}.bind(vm));
|
||
|
|
},
|
||
|
|
fetchData: function () {
|
||
|
|
var urlParams = new URLSearchParams(window.location.search);
|
||
|
|
var idFromUrl = urlParams.get('id');
|
||
|
|
// 发送 GET 请求
|
||
|
|
axios.get('/PrivateReZeroRoute/100003/GetInternalDetail?id=' + idFromUrl, jwHeader)
|
||
|
|
.then(function (response) {
|
||
|
|
this.data = response.data;
|
||
|
|
this.error = null;
|
||
|
|
document.body.classList.add("lyear-layout-sidebar-close");
|
||
|
|
}.bind(this))
|
||
|
|
.catch(function (error) {
|
||
|
|
// 处理错误
|
||
|
|
this.error = error.message;
|
||
|
|
this.data = null;
|
||
|
|
}.bind(this));
|
||
|
|
},
|
||
|
|
handleFileChange: function (event, param) {
|
||
|
|
// Handle the file change event
|
||
|
|
var file = event.target.files[0];
|
||
|
|
// Assuming you want to read the file as base64 for upload
|
||
|
|
var reader = new FileReader();
|
||
|
|
reader.onload = function () {
|
||
|
|
// Update the param value with the file content
|
||
|
|
param.Value = reader.result;
|
||
|
|
};
|
||
|
|
reader.readAsDataURL(file);
|
||
|
|
},
|
||
|
|
setEditorValue: function (formattedJson) {
|
||
|
|
var editor = ace.edit("editor");
|
||
|
|
editor.setTheme("ace/theme/twilight");
|
||
|
|
editor.setOption("showPrintMargin", false);
|
||
|
|
editor.session.setMode("ace/mode/json5");
|
||
|
|
editor.setValue(formattedJson);
|
||
|
|
editor.selection.clearSelection();
|
||
|
|
editor.resize();
|
||
|
|
|
||
|
|
},
|
||
|
|
setEditorJsonValue: function (formattedJson) {
|
||
|
|
var editor = ace.edit("editorJson");
|
||
|
|
editor.setTheme("ace/theme/twilight");
|
||
|
|
editor.setOption("showPrintMargin", false);
|
||
|
|
editor.session.setMode("ace/mode/json5");
|
||
|
|
editor.setValue(formattedJson);
|
||
|
|
editor.selection.clearSelection();
|
||
|
|
editor.resize();
|
||
|
|
|
||
|
|
},
|
||
|
|
saveParameters: function () {
|
||
|
|
this.message = ("保存成功，点加载可以还原参数");
|
||
|
|
localStorage.setItem("Parameters:" + this.data.Url, JSON.stringify(vueObj.$data.data.DataModel.DefaultParameters));
|
||
|
|
},
|
||
|
|
loadParameters: function () {
|
||
|
|
this.message = ("加载成功，修改后可以保存");
|
||
|
|
var key = "Parameters:" + this.data.Url;
|
||
|
|
if (localStorage.getItem(key)) {
|
||
|
|
var items = JSON.parse(localStorage.getItem(key));
|
||
|
|
vueObj.data.DataModel.DefaultParameters = []; // 清空数组
|
||
|
|
items.forEach(function (item) {
|
||
|
|
vueObj.data.DataModel.DefaultParameters.push(item); // 向数组中添加元素
|
||
|
|
});
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this.message = ("浏览器没有找到保存，请先保存");
|
||
|
|
}
|
||
|
|
},
|
||
|
|
saveParametersJson: function () {
|
||
|
|
this.message = ("保存成功，点加载可以还原参数");
|
||
|
|
var editor = ace.edit("editorJson");
|
||
|
|
localStorage.setItem("ParametersJson:" + this.data.Url, editor.getValue() );
|
||
|
|
},
|
||
|
|
loadParametersJson: function () {
|
||
|
|
this.message = ("加载成功，修改后可以保存");
|
||
|
|
var key = "ParametersJson:" + this.data.Url;
|
||
|
|
if (localStorage.getItem(key)) {
|
||
|
|
var editor = ace.edit("editorJson");
|
||
|
|
editor.setValue(localStorage.getItem(key));
|
||
|
|
editor.selection.clearSelection();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this.message = ("浏览器没有找到保存，请先保存");
|
||
|
|
}
|
||
|
|
},
|
||
|
|
changeTag: function ()
|
||
|
|
{
|
||
|
|
this.toggle = !this.toggle;
|
||
|
|
},
|
||
|
|
transformJsonArrayToObject: function (jsonArray) {
|
||
|
|
let result = {};
|
||
|
|
if (jsonArray) {
|
||
|
|
jsonArray.forEach(item => {
|
||
|
|
if ('Name' in item) {
|
||
|
|
result[item.Name] = null;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
return result;
|
||
|
|
},
|
||
|
|
setResponseUrl: function (fullUrl,json,isUrlParameters)
|
||
|
|
{
|
||
|
|
|
||
|
|
|
||
|
|
// 定义HTTP方法和原始URL
|
||
|
|
var httpMethod = this.data.HttpMethod;
|
||
|
|
var baseUrl = window.location.origin + fullUrl;
|
||
|
|
|
||
|
|
|
||
|
|
if (isUrlParameters)
|
||
|
|
{
|
||
|
|
this.responseUrl = `${httpMethod} : ${baseUrl}`;
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 将postData转换为URL参数
|
||
|
|
var queryParams = tools.jsonToUrl(json);
|
||
|
|
if (queryParams)
|
||
|
|
queryParams = "?" + queryParams;
|
||
|
|
// 使用模板字符串构建完整的响应URL
|
||
|
|
this.responseUrl = `${httpMethod} : ${baseUrl}${queryParams}`;
|
||
|
|
},
|
||
|
|
isUrlParameters: function (fullUrl)
|
||
|
|
{
|
||
|
|
var isUrlParameters = (fullUrl + "").indexOf("/{") > 0 && (fullUrl + "").indexOf("}") > 0;
|
||
|
|
return isUrlParameters;
|
||
|
|
},
|
||
|
|
getUrlByUrlParameters: function (fullUrl) {
|
||
|
|
var url = fullUrl;
|
||
|
|
if (this.data.DataModel.DefaultParameters) {
|
||
|
|
this.data.DataModel.DefaultParameters.forEach(function (param) {
|
||
|
|
var regex = new RegExp("{" + param.Name + "}", "g");
|
||
|
|
url = url.replace(regex, param.Value);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
return url;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|