byh24/10/31-1

src/lsjbxm/gydxhttp.js

@@ -1,7 +0,0 @@
-import axios from "axios";
-axios.defaults.baseURL =''
-axios.defaults.headers.post["Content-Type"]="application/x-www-form-urlencoded;charset=UTF-8"
-//超时
-axios.defaults.timeout=10000
-
-export default axios

src/lsjbxm/jituangongneng/rule.vue

@@ -50,7 +50,7 @@
         <el-row :gutter="2">
             <el-col :span="1">
                 <div class="grid-content ep-bg-purple">
-                    <el-button type="primary" plain size="small" @click="dialogFormVisible = true">
+                    <el-button type="primary" plain size="small" @click="open_addgz">
                         <el-icon>
                             <Plus/>
                         </el-icon>
@@ -60,7 +60,7 @@
             </el-col>
             <el-col :span="1">
                 <div class="grid-content ep-bg-purple">
-                    <el-button type="success" plain size="small">
+                    <el-button type="success" plain size="small" @click="open_updategz">
                         <el-icon>
                             <EditPen/>
                         </el-icon>
@@ -97,25 +97,27 @@
         </el-row>
     </div>
 
+
+<!--    规则表-->
     <div>
         <el-table
-                :data="guize"
+                :data="guizelist"
                 style="width: 100%; padding-top: 5px"
                 fit="true"
                 :header-cell-style="{background:'#f8f8f9'}"
         >
             <el-table-column type="selection" width="55" align="center"/>
-            <el-table-column prop="gzmc" label="规则名称" align="center"/>
-            <el-table-column prop="lcs" label="轮次数" align="center"/>
-            <el-table-column prop="lcsj" label="轮次时间（分钟）" align="center"/>
-            <el-table-column prop="jgsc" label="间隔时长（分钟）" align="center"/>
+            <el-table-column prop="gzname" label="规则名称" align="center"/>
+            <el-table-column prop="luncishu" label="轮次数" align="center"/>
+            <el-table-column prop="luncitime" label="轮次时间（分钟）" align="center"/>
+            <el-table-column prop="jiangetime" label="间隔时长（分钟）" align="center"/>
             <el-table-column label="操作" align="center">
                 <template v-slot:default="scope">
                     <el-button type="text" size="small">设置提示语</el-button>
 
                     <el-button type="text" size="small">修改</el-button>
                     <el-button
-                            @click.prevent="deleteRow(scope.$index, guize)"
+                            @click.prevent="deletegz(scope.row)"
                             type="text"
                             size="small">
                         删除
@@ -143,14 +145,14 @@
     </el-row>
 
 
-  <!--    弹出框-->
-    <el-dialog v-model="dialogFormVisible" title="添加规则" width="500">
+  <!--    添加规则的弹出框-->
+    <el-dialog v-model="dialogFormAddVisible" title="添加规则" width="500">
         <el-form :model="form">
             <el-form-item label="规则名称" :label-width="100" label-position="left" required>
-                <el-input v-model="form.gzmc" placeholder="请输入规则名称" style="width: 200px"/>
+                <el-input v-model="form.gzname" placeholder="请输入规则名称" style="width: 200px"/>
             </el-form-item>
             <el-form-item label="轮次数" label-suffix="(次)" :label-width="100" label-position="left" required>
-                <el-select v-model="form.lcs" style="width: 200px" clearable="true" placeholder=" ">
+                <el-select v-model="form.luncishu" style="width: 200px" clearable="true" placeholder=" ">
                     <el-option
                             v-for="(item) in minutes"
                             :key="item"
@@ -162,7 +164,7 @@
             </el-form-item>
 
             <el-form-item label="轮次时间" label-suffix="(分钟)" :label-width="100" label-position="left" required>
-                <el-select v-model="form.lcsj" style="width: 200px " clearable="true" placeholder=" ">
+                <el-select v-model="form.luncitime" style="width: 200px " clearable="true" placeholder=" ">
                     <el-option
                             v-for="(item) in minutes"
                             :key="item"
@@ -174,7 +176,7 @@
             </el-form-item>
 
             <el-form-item label="间隔时长" label-suffix="(分钟)" :label-width="100" label-position="left" required>
-                <el-select v-model="form.jgsc" style="width: 200px " clearable="true" placeholder=" ">
+                <el-select v-model="form.jiangetime" style="width: 200px " clearable="true" placeholder=" ">
                     <el-option
                             v-for="(item) in minutes"
                             :key="item"
@@ -188,8 +190,59 @@
         </el-form>
         <template #footer>
             <div class="dialog-footer">
-                <el-button type="primary" @click="addguize">确定</el-button>
-                <el-button @click="dialogFormVisible = false">取消</el-button>
+                <el-button type="primary" @click="addgz">确定</el-button>
+                <el-button @click="dialogFormAddVisible = false">取消</el-button>
+            </div>
+        </template>
+    </el-dialog>
+
+<!--修改规则弹出窗口-->
+    <el-dialog v-model="dialogFormUpdateVisible" title="修改规则" width="500">
+        <el-form :model="form">
+            <el-form-item label="规则名称" :label-width="100" label-position="left" required>
+                <el-input v-model="form.gzname" placeholder="请输入规则名称" style="width: 200px"/>
+            </el-form-item>
+            <el-form-item label="轮次数" label-suffix="(次)" :label-width="100" label-position="left" required>
+                <el-select v-model="form.luncishu" style="width: 200px" clearable="true" placeholder=" ">
+                    <el-option
+                        v-for="(item) in minutes"
+                        :key="item"
+                        :label="item"
+                        :value="item">
+                    </el-option>
+                </el-select>
+                <span>(次)</span>
+            </el-form-item>
+
+            <el-form-item label="轮次时间" label-suffix="(分钟)" :label-width="100" label-position="left" required>
+                <el-select v-model="form.luncitime" style="width: 200px " clearable="true" placeholder=" ">
+                    <el-option
+                        v-for="(item) in minutes"
+                        :key="item"
+                        :label="item"
+                        :value="item">
+                    </el-option>
+                </el-select>
+                <span>(分钟)</span>
+            </el-form-item>
+
+            <el-form-item label="间隔时长" label-suffix="(分钟)" :label-width="100" label-position="left" required>
+                <el-select v-model="form.jiangetime" style="width: 200px " clearable="true" placeholder=" ">
+                    <el-option
+                        v-for="(item) in minutes"
+                        :key="item"
+                        :label="item"
+                        :value="item">
+                    </el-option>
+                </el-select>
+                <span>(分钟)</span>
+            </el-form-item>
+
+        </el-form>
+        <template #footer>
+            <div class="dialog-footer">
+                <el-button type="primary" @click="updategz">确定</el-button>
+                <el-button @click="dialogFormUpdateVisible = false">取消</el-button>
             </div>
         </template>
     </el-dialog>
@@ -200,6 +253,8 @@
 // import {reactive, ref} from 'vue'
 import {Refresh, Search} from "@element-plus/icons-vue";
 
+import http from "/src/lsjbxm/lsjbhttp"
+
 export default {
     name: "ruLe",
     computed: {
@@ -217,63 +272,137 @@ export default {
             lcsj: "",
             jgsc: "",
             minutes: Array.from({length: 60}, (_, i) => i + 1),
+            // 以前用的
             guize: [],
+            // form:{
+            //     gzmc: '',
+            //     lcs: '',
+            //     lcsj: '',
+            //     jgsc: '',
+            // },
+            // 现在用的
+            guizelist: [],
+            form:{
+
+            },
 
-            dialogFormVisible :false,// dialog控制
+            dialogFormUpdateVisible: false,//修改规则弹窗控制
+
+            dialogFormAddVisible: false,// 添加规则弹窗控制
             formLabelWidth:'140px',
-            form:{
-                gzmc: '',
-                lcs: '',
-                lcsj: '',
-                jgsc: '',
-            }
+
         }
     },
-    // setup() {
-    //     const dialogTableVisible = ref(false)
-    //     const dialogFormVisible = ref(false)
-    //     const formLabelWidth = '140px'
-    //
-    //     const form = reactive({
-    //         gzmc: '',
-    //         lcs: '',
-    //         lcsj: '',
-    //         jgsc: '',
-    //
-    //     })
-    //     return {
-    //         dialogTableVisible,
-    //         dialogFormVisible,
-    //         formLabelWidth,
-    //         form,
-    //     }
-    // },
+
+    mounted(){  // 是 Vue.js 生命周期钩子之一，主要在组件实例被挂载后立即调用
+        this.listgz()
+    },
     methods: {
-        addguize() {
-            let GZ = {
-                gzmc: this.form.gzmc,
-                lcs: this.form.lcs,
-                lcsj: this.form.lcsj,
-                jgsc: this.form.jgsc,
-            }
-            this.guize.push(GZ)
+        // 列出规则
+        listgz() {
+            http.lsjbGet("/guize/queryGuiZe.lsjb",null).then(res=>{
+                this.guizelist = res
+            })
 
+        },
+        //打开添加窗口
+        open_addgz() {
             // 重置表单
             this.clear()
+            //打开添加窗口
+            this.dialogFormAddVisible = true
+        },
 
-            //关闭弹出框
-            this.dialogFormVisible = false
+        // addgz() {
+        //     http.lsjbGet("/guize/addGuiZe.lsjb",this.form)
+        //
+        //     //更新显示的规则列表
+        //     this.listgz()
+        //
+        //     //关闭添加窗口
+        //     this.dialogFormAddVisible=false
+        // },
+        //上面那样写，在添加之后有时能直接显示新添加的数据，有时候不好用
+        //添加规则
+        addgz() {
+            http.lsjbPost("/guize/addGuiZe.lsjb",this.form).then(() => {
+                // 更新显示的规则列表
+                return this.listgz(); // 返回 Promise
+            }).then(() => {
+                // 关闭添加窗口
+                this.dialogFormAddVisible = false;
+            }).catch(error => {
+                console.error("添加失败:", error);
+            });
         },
         clear() {
-            this.form.gzmc = ''
-            this.form.lcs = ''
-            this.form.lcsj = ''
-            this.form.jgsc = ''
+            this.form.gzname = ''
+            this.form.luncishu = ''
+            this.form.luncitime = ''
+            this.form.jiangetime = ''
         },
-        deleteRow(index, rows) {
-            rows.splice(index, 1);
-            // this.guize.pop(this.addguize[index])
+
+        //删除规则
+        deletegz(row) {
+
+            this.$confirm("确认删除"+row.gzname+"吗？").then(()=>{
+                let obj = {
+                    gzname : row.gzname
+                }
+                http.lsjbPost("/guize/deleteGuiZe.lsjb",obj).then(()=>{
+                    //更新显示的规则列表
+                    return this.listgz()
+                }).catch(error => {
+                    console.error("删除失败:", error);
+                });
+
+
+            }).catch(()=>{})
+
+        },
+        //打开修改规则弹窗
+        open_updategz(){
+            //清空表单
+            this.clear()
+
+            this.dialogFormUpdateVisible = true
         },
+
+        //修改规则
+        updategz() {
+
+            http.lsjbPost("/guize/updateGuiZe.lsjb",this.form).then(()=>{
+                //更新显示的规则列表
+                return this.listgz()
+
+            }).then(() => {
+                // 关闭修改窗口
+                this.dialogFormUpdateVisible = false;
+            }).catch(error => {
+                console.error("修改失败:", error);
+            });
+        },
+
+        // addguize() {
+        //     let GZ = {
+        //         gzmc: this.form.gzmc,
+        //         lcs: this.form.lcs,
+        //         lcsj: this.form.lcsj,
+        //         jgsc: this.form.jgsc,
+        //     }
+        //     this.guize.push(GZ)
+        //
+        //     // 重置表单
+        //     this.clear()
+        //
+        //     //关闭弹出框
+        //     this.dialogFormVisible = false
+        // },
+
+        // deleteRow(index, rows) {
+        //     rows.splice(index, 1);
+        //     // this.guize.pop(this.addguize[index])
+        // },
     }
 
 }

src/lsjbxm/lsjbhttp.js

@@ -0,0 +1,56 @@
+import axios from "axios";
+axios.defaults.baseURL ='abcdefg'
+axios.defaults.headers.post["Content-Type"]="application/x-www-form-urlencoded;charset=UTF-8"
+//超时
+axios.defaults.timeout=10000
+
+axios.interceptors.request.use(
+    config =>{
+        return config
+    },
+    error => {
+        return Promise.reject(error)
+    }
+)
+
+axios.interceptors.response.use( res=>{
+    return res.data
+})
+
+export default {
+    // get请求用来传递查询参数
+    lsjbGet(url,data) {
+        return new Promise((resolve,reject)=>{
+            axios({
+                method:"get",
+                url,
+                // params用于get请求
+                params:data,
+            })
+                .then(res=>{
+                    resolve(res)
+                })
+                .catch(err=>{
+                    reject(err)
+                })
+        })
+    },
+
+    // post请求用来传递更新资源的数据   数据不会暴露在url中，且没有长度限制
+    lsjbPost(url, data) {
+        return new Promise((resolve, reject) => {
+            axios({
+                method: "post",
+                url,
+                // data 用于 post 请求
+                data: data, // 将数据放在请求体中
+            })
+                .then(res => {
+                    resolve(res);
+                })
+                .catch(err => {
+                    reject(err);
+                });
+        });
+    },
+}

src/main.js

@@ -9,7 +9,7 @@ import Vuex from 'vuex';
 
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
-// import axios from "./lsjbxm/gydxhttp";
+import axios from "./lsjbxm/lsjbhttp";
 // 引入el-icon
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 
@@ -28,7 +28,7 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
 
 app.use(ElementPlus, {locale: zhCn})//使用组件
 app.use(router)
-// app.use(axios)
+app.use(axios)
 
 app.mount('#app')
 app.use(store)

vue.config.js

@@ -1,4 +1,16 @@
-const { defineConfig } = require('@vue/cli-service')
+const {defineConfig} = require('@vue/cli-service')
 module.exports = defineConfig({
-  transpileDependencies: true
+    transpileDependencies: true,
+
+    devServer: {
+        port: 8080,
+        proxy: {
+            "/abcdefg": {
+                target: "http://localhost:80/",
+                changeOrigin: true,
+                pathRewrite: {"/abcdefg": ""},
+                secure: false
+            }
+        }
+    }
 })