`fix`

ruoyi-ui-vue3/src/views/rules/index.vue

@@ -32,7 +32,7 @@
           <div>
             <el-button type="primary" @click="goadd">添加</el-button>
             <el-button type="danger">批量删除</el-button>
-            <el-button type="primary" plain>显示字段</el-button>
+            <el-button type="primary" plain @click="ziduanshow=true">显示字段</el-button>
           </div>
         </div>
       </template>
@@ -41,14 +41,44 @@
           <el-col :span="24">
             <el-table :data="tabledata" border>
               <el-table-column type="selection" width="55" />
-              <el-table-column label="规则编号"></el-table-column>
-              <el-table-column label="规则名称"></el-table-column>
-              <el-table-column label="触发类型"></el-table-column>
-              <el-table-column label="设备"></el-table-column>
-              <el-table-column label="传感器"></el-table-column>
-              <el-table-column label="触发条件值"></el-table-column>
-              <el-table-column label="描述"></el-table-column>
-              <el-table-column label="操作"></el-table-column>
+              <el-table-column v-for="item in cloumdata.filter(i=>i.visible)" :prop="item.prop" :label="item.label" ></el-table-column>
+              <el-table-column prop="sn" label="操作">
+                <template #default="scope">
+                  <div>
+                    <el-button
+                      link
+                      @click="
+                    "
+                    >
+                      <el-tooltip effect="dark" content="编辑">
+                        <el-icon>
+                          <Memo />
+                        </el-icon>
+                      </el-tooltip>
+                    </el-button>
+                    <el-button
+                      link
+                      @click="
+                    "
+                    >
+                      <el-tooltip effect="dark" content="编辑">
+                        <el-icon>
+                          <Edit />
+                        </el-icon>
+                      </el-tooltip>
+                    </el-button>
+                    <el-popconfirm title="确定删除该编码?" @confirm="">
+                      <template #reference>
+                        <el-button link
+                        ><el-tooltip effect="dark" content="删除"
+                        ><el-icon><Delete /></el-icon></el-tooltip
+                        ></el-button>
+                      </template>
+                    </el-popconfirm>
+                  </div>
+                </template>
+
+              </el-table-column>
 
             </el-table>
           </el-col>
@@ -73,26 +103,61 @@
     </el-card>
 
 
+    <el-dialog
+      title="字段显示"
+      v-model="ziduanshow"
+      width="50%"
+      @close="ziduanshow = false"
+    >
+      <div style="display: flex;flex-wrap: wrap;align-content: center;justify-content: center;align-items: center;">
+        <el-checkbox v-for="item in cloumdata" v-model="item.visible" :label="item.label" size="large" />
+      </div>
+
+    </el-dialog>
+
   </div>
 </template>
 
 <script setup lang="ts" name="Units">
-import {ref} from "vue";
+import {onMounted, ref} from "vue";
 import {useRoute, useRouter} from "vue-router";
+import { listRule,addRule,updateRule,delRule,getRule } from "@/api/data/rule"
+
 import data from "@/views/system/dict/data.vue";
 
+const ziduanshow = ref(false);
+const cloumdata = ref([
+  {label: '规则编号', prop:'sn',visible:true},
+  {label: '规则名称', prop:'name',visible:true},
+  {label: '触发类型', prop:'type',visible:true},
+  {label: '设备', prop:'equipmentId',visible:true},
+  {label: '传感器', prop:'sensorId',visible:true},
+  {label: '触发条件值', prop:'triggeringCondition',visible:true},
+  {label: '描述', prop:'description',visible:true},
+]);
 
 const route = useRoute();
 const router = useRouter();
 
 const searchform = ref({rulename:""})
-const tabledata = ref([1,2,3])
+const tabledata = ref([])
 
 const goadd = ()=>{
   router.push("/rules/add")
 }
 
 
+const getalldata=()=>{
+  listRule({}).then(res=>{
+    tabledata.value=res.rows
+  })
+}
+
+onMounted(()=>{
+  getalldata()
+})
+
+
 
 </script>