@@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>