@@master_page.html
<link href="css/page_interface_detail.css" rel="stylesheet" />
<div id="app">
    <div v-if="data">
        <h1>
            {{data.Name}}
        </h1>
        <div class="url">
            {{ data.HttpMethod }}: {{data.Url}}
        </div>
        <div class="parameter" v-if="data.DataModel.DefaultParameters && data.DataModel.DefaultParameters.length > 0">
            <div v-for="param in data.DataModel.DefaultParameters" :key="param.Name">
                <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" id="param1" :placeholder="param.ValueType">
                </div>
                <div v-else-if="param.ValueIsReadOnly==false">
                    <input v-model="param.Value" type="text" id="param1" :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" readonly="readonly" id="param1" 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>
        <button class="btn btn-success" v-on:click="submitRequest">提交</button>
        <button class="btn btn-close" v-on:click="submitClose">关闭</button>
        <label for="response">结果:</label>
        <textarea id="response" v-model="response" readonly></textarea>
        <span class="alert alert-success">注意：如果找不到表需要到【菜单：实体表维护】点按钮【同步】建表</span>
    </div>  
    <div v-else>
        <!-- 处理 data 为 null 的情况，可以显示加载中或错误信息 -->
        <p>Loading...</p>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            data: null,
            error: null,
            response: ""
        },
        mounted() {
            // 在组件加载时触发数据获取
            this.fetchData();
        },
        methods: {
            submitClose: function () {
                window.close();
            },
            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;
                }
                // 发送 POST 请求
                axios.post(fullUrl, postData, jwHeader)
                    .then(function (response) {
                        // 更新响应
                        vm.response = JSON.stringify(response.data);
                    }.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);
            },
        }
    });
</script>