前端配置保存

Author: M3chD09

WebPage/assets/js/switch.js

@@ -0,0 +1,42 @@
+axios.get('/file/config')
+    .then(function (response) {
+        $("[name='checkbox-sda']").bootstrapSwitch('state',response.data.IsSaveDataAddr,true)
+        $("[name='checkbox-svm']").bootstrapSwitch('state',response.data.IsSaveVariablesToMod,true)
+        $("[name='checkbox-svr']").bootstrapSwitch('state',response.data.IsSaveVariablesToRead,true)
+    })
+    .catch(function (error) {
+        console.log(error);
+    })
+
+$.fn.bootstrapSwitch.defaults.onText = '是';
+$.fn.bootstrapSwitch.defaults.offText = '否';
+$.fn.bootstrapSwitch.defaults.onColor = 'info';
+$.fn.bootstrapSwitch.defaults.offColor = 'danger';
+$.fn.bootstrapSwitch.defaults.size = 'mini';
+$("[name='checkbox-sda']").bootstrapSwitch({
+    onSwitchChange:function(event,state){
+        axios.get('/file/config', {
+            params: {
+                sda: state
+            }
+        })
+    }
+});
+$("[name='checkbox-svr']").bootstrapSwitch({
+    onSwitchChange:function(event,state){
+        axios.get('/file/config', {
+            params: {
+                svr: state
+            }
+        })
+    }
+});
+$("[name='checkbox-svm']").bootstrapSwitch({
+    onSwitchChange:function(event,state){
+        axios.get('/file/config', {
+            params: {
+                svm: state
+            }
+        })
+    }
+});

WebPage/index.html

@@ -5,8 +5,10 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>坠好用的上位机</title>
         <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap-switch/dist/css/bootstrap-switch.min.css" rel="stylesheet">
         <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap-switch/dist/js/bootstrap-switch.min.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/vue-toasted/dist/vue-toasted.min.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
@@ -41,6 +43,7 @@
                 </nav>
 
                 <div class="tab-content" id="nav-tabContent">
+
                     <div class="tab-pane fade show active" id="nav-serialport" role="tabpanel" aria-labelledby="nav-home-tab">
                         <div id="serial">
                             <p><div class="input-group mb-3">
@@ -54,16 +57,22 @@
                                 <p><button class="btn btn-primary" v-on:click="openserial">打开串口</button>
                                 <button class="btn btn-danger" v-on:click="closeserial">关闭串口</button></p>
                         </div>
-                        <div class="input-group" id="fileupload">
+                        <p><div class="input-group" id="fileupload">
                             <div class="input-group-prepend">
                                 <button class="btn btn-primary" v-on:click="upload">上传</button>
                             </div>
                             <div class="custom-file">
                                 <input type="file" class="custom-file-input" @change="choose($event)">
                                 <label class="custom-file-label">{{file.name}}</label>
                             </div>
+                        </div></p>
+                        <div><p><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#variablesModalScrollable">变量列表</button></p></div>
+                        <div id="saveconfig">
+                            <p>保存变量列表 <input type="checkbox" name="checkbox-sda"></p>
+                            <p>保存观察变量 <input type="checkbox" name="checkbox-svr"></p>
+                            <p>保存修改列表 <input type="checkbox" name="checkbox-svm"></p>
                         </div>
-                        <div><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#variablesModalScrollable">变量列表</button></div>
+
                         <div class="modal fade" id="variablesModalScrollable" tabindex="-1" role="dialog">
                             <div class="modal-dialog modal-dialog-scrollable modal-xl" role="document">
                                 <div class="modal-content">
@@ -239,6 +248,7 @@ <h5 class="modal-title" id="NewVariableModLabel">添加变量</h5>
             </div>
         </div>
     </div>
+    <script src="/assets/js/switch.js"></script>
     <script src="/assets/js/toast.js"></script>
     <script src="/assets/js/file.js"></script>
     <script src="/assets/js/serial.js"></script>