byh24/11/4 完善规则页面

src/lsjbxm/jituangongneng/rule.vue

@@ -27,7 +27,7 @@
             </el-col>
             <el-col :span="1">
                 <div class="grid-content ep-bg-purple">
-                    <el-button type="primary" size="small">
+                    <el-button type="primary" size="small" @click="listgz">
                         <el-icon>
                             <Search/>
                         </el-icon>
@@ -37,7 +37,7 @@
             </el-col>
             <el-col :span="3">
                 <div class="grid-content ep-bg-purple">
-                    <el-button size="small">
+                    <el-button size="small"  @click="clear_input">
                         <el-icon>
                             <Refresh/>
                         </el-icon>
@@ -70,7 +70,7 @@
             </el-col>
             <el-col :span="1">
                 <div class="grid-content ep-bg-purple">
-                    <el-button type="danger" plain size="small">
+                    <el-button type="danger" plain size="small" @click="open_button_deletegz">
                         <el-icon>
                             <Delete/>
                         </el-icon>
@@ -113,9 +113,14 @@
             <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 type="text" size="small" >设置提示语</el-button>
+<!--                   给@click绑定两个或以上事件时，要给方法加括号，否则方法不会被调用-->
+                    <el-button type="text" size="small"
+                               @click="open_table_updategz();this.table_update_row=scope.row">
+                        修改
+                    </el-button>
+<!--                    .prevent 是一个 Vue.js 事件修饰符，目的是调用 event.preventDefault() 来阻止元素的默认事件行为。-->
+<!--                    例如，如果这个按钮在一个表单中，点击按钮通常会触发表单提交。而 .prevent 会阻止这种默认行为发生。-->
                     <el-button
                             @click.prevent="deletegz(scope.row)"
                             type="text"
@@ -250,6 +255,73 @@
         </template>
     </el-dialog>
 
+    <!--列表修改规则弹出窗口-->
+    <el-dialog v-model="dialogForm_table_Update" title="修改规则" width="500">
+        <el-form :model="form">
+            <el-form-item label="新规则名称" :label-width="100" label-position="left" required>
+                <el-input v-model="newgzname" 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="update_table_gz">确定</el-button>
+                <el-button @click="dialogForm_table_Update = false">取消</el-button>
+            </div>
+        </template>
+    </el-dialog>
+
+    <!--删除规则弹出窗口-->
+    <el-dialog v-model="dialogForm_button_delete" title="修改规则" width="500">
+        <el-form :model="form">
+            <el-form-item label="要删除的规则名称" :label-width="150" label-position="left" required>
+                <el-input v-model="form.gzname" placeholder="请输入要删除的规则名称" style="width: 200px"/>
+            </el-form-item>
+
+        </el-form>
+        <template #footer>
+            <div class="dialog-footer">
+                <el-button type="primary" @click="deletegz_button">确定</el-button>
+                <el-button @click="dialogForm_button_delete = false">取消</el-button>
+            </div>
+        </template>
+    </el-dialog>
+
 </template>
 
 <script>
@@ -289,22 +361,31 @@ export default {
 
             },
             newgzname:'',
+            table_update_row:null,
 
             dialogFormUpdateVisible: false,//修改规则弹窗控制
-
+            dialogForm_table_Update: false,//列表修改规则弹窗控制
+            dialogForm_button_delete: false,//删除规则弹窗
             dialogFormAddVisible: false,// 添加规则弹窗控制
             formLabelWidth:'140px',
 
         }
     },
 
-    mounted(){  // 是 Vue.js 生命周期钩子之一，主要在组件实例被挂载后立即调用
+// 是 Vue.js 生命周期钩子之一，主要在组件实例被挂载后立即调用
+    mounted(){
         this.listgz()
     },
     methods: {
         // 列出规则
         listgz() {
-            http.lsjbGet("/guize/queryGuiZe.lsjb",null).then(res=>{
+            let obj = {
+                gzname: this.gzmc,       //规则名称
+                luncishu: this.lcs,      // 轮次数
+                luncitime: this.lcsj,    // 轮次时间
+                jiangetime: this.jgsc,   // 间隔时长
+            }
+            http.lsjbGet("/guize/queryGuiZe.lsjb", obj).then(res=>{
                 this.guizelist = res
             })
 
@@ -312,7 +393,7 @@ export default {
         //打开添加窗口
         open_addgz() {
             // 重置表单
-            this.clear()
+            this.clear_form()
             //打开添加窗口
             this.dialogFormAddVisible = true
         },
@@ -326,7 +407,8 @@ export default {
         //     //关闭添加窗口
         //     this.dialogFormAddVisible=false
         // },
-        //上面那样写，在添加之后有时能直接显示新添加的数据，有时候不好用
+        //上面那样写，在添加之后有时能直接显示新添加的数据，有时候不好用，下面这么写会自动刷新页面
+
         //添加规则
         addgz() {
             http.lsjbPost("/guize/addGuiZe.lsjb",this.form).then(() => {
@@ -339,7 +421,9 @@ export default {
                 console.error("添加失败:", error);
             });
         },
-        clear() {
+
+        //清空表单
+        clear_form() {
             this.form.gzname = ''
             this.form.luncishu = ''
             this.form.luncitime = ''
@@ -347,7 +431,7 @@ export default {
             this.newgzname = ''
         },
 
-        //删除规则
+        //列表删除规则
         deletegz(row) {
 
             this.$confirm("确认删除"+row.gzname+"吗？").then(()=>{
@@ -365,14 +449,14 @@ export default {
             }).catch(()=>{})
 
         },
+
         //打开修改规则弹窗
         open_updategz(){
             //清空表单
-            this.clear()
+            this.clear_form()
 
             this.dialogFormUpdateVisible = true
         },
-
         //修改规则
         updategz() {
 
@@ -398,6 +482,78 @@ export default {
             });
         },
 
+        //打开列表修改规则弹窗
+        open_table_updategz(){
+            //清空表单
+            this.clear_form()
+            // 打开列表修改窗口
+            this.dialogForm_table_Update = true
+        },
+
+        //列表修改规则
+        update_table_gz() {
+            //！！！！！这里的顺序要和dialog弹窗里的顺序一致，要不然总是识别不到,修修改改两个小时QAQ！！！！！
+            let obj={
+                gzname: this.table_update_row.gzname,         //原规则名称
+
+                newgzname: this.newgzname,        //新规则名称
+                luncishu: this.form.luncishu,     // 轮次数
+                luncitime: this.form.luncitime,   // 轮次时间
+                jiangetime: this.form.jiangetime, // 间隔时长
+
+            }
+
+            http.lsjbPost("/guize/updateGuiZe.lsjb",obj).then(()=>{
+                //更新显示的规则列表
+                return this.listgz()
+
+            }).then(() => {
+                // 关闭列表修改窗口
+                this.dialogForm_table_Update = false;
+            }).catch(error => {
+                console.error("修改失败:", error);
+            });
+        },
+
+        //清空输入框
+        clear_input() {
+            this.gzmc = ''
+            this.lcs = ''
+            this.lcsj = ''
+            this.jgsc = ''
+        },
+
+        //打开按钮删除规则弹窗
+        open_button_deletegz(){
+            //清空表单
+            this.clear_form()
+            // 打开按钮删除规则弹窗
+            this.dialogForm_button_delete = true
+        },
+        //按钮删除规则
+        deletegz_button() {
+
+            this.$confirm("确认删除"+this.form.gzname+"吗？").then(()=>{
+                let obj = {
+                    gzname : this.form.gzname
+                }
+                http.lsjbPost("/guize/deleteGuiZe.lsjb",obj).then(()=>{
+                    //更新显示的规则列表
+                    return this.listgz()
+                }).then(()=>{
+                    //关闭按钮删除规则弹窗
+                    this.dialogForm_button_delete = false
+                }).catch(error => {
+                    console.error("删除失败:", error);
+                });
+
+            }).catch(()=>{})
+
+        },
+
+
+
+
         // addguize() {
         //     let GZ = {
         //         gzmc: this.form.gzmc,

vue.config.js

@@ -6,7 +6,7 @@ module.exports = defineConfig({
         port: 8080,
         proxy: {
             "/abcdefg": {
-                target: "http://localhost:80/",
+                target: "http://localhost:9090/",
                 changeOrigin: true,
                 pathRewrite: {"/abcdefg": ""},
                 secure: false