From e2c2d034fbce7dd0ecbf5fe4cff0e13c3923c2da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E6=98=B1=E8=BE=BE?= <chen.yuda@ebiz-digits.com>
Date: Thu, 24 Jul 2025 14:08:20 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E5=BA=94=E7=94=A8=E7=AE=A1=E7=90=86):=20?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E8=A7=84=E5=88=99=E7=BC=96=E8=BE=91=E5=92=8C?=
 =?UTF-8?q?=E6=9F=A5=E7=9C=8B=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增规则编辑对话框组件 RuleEditDialog
- 新增规则查看对话框组件 RuleViewDialog
- 实现规则列表页面的新增、编辑和查看功能
- 优化规则列表的展示和操作
---
 babel.config.js                               |  12 +-
 src/api/riskCheck/index.js                    |   4 +
 .../employRule/components/RuleEditDialog.vue  | 308 ++++++++++++++++++
 .../employRule/components/RuleViewDialog.vue  | 246 ++++++++++++++
 .../employRule/index.vue                      | 167 ++++++++--
 5 files changed, 700 insertions(+), 37 deletions(-)
 create mode 100644 src/views/applicationManagement/employRule/components/RuleEditDialog.vue
 create mode 100644 src/views/applicationManagement/employRule/components/RuleViewDialog.vue

diff --git a/babel.config.js b/babel.config.js
index 5d9f8fa..c6ae298 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,11 +1,11 @@
 module.exports = {
   presets: ['@vue/app'],
   plugins: [
-    [
-      'transform-remove-console',
-      {
-        exclude: ['warn', 'error'] // 可选：保留 warn 和 error
-      }
-    ]
+    // [
+    //   'transform-remove-console',
+    //   {
+    //     exclude: ['warn', 'error'] // 可选：保留 warn 和 error
+    //   }
+    // ]
   ]
 }
diff --git a/src/api/riskCheck/index.js b/src/api/riskCheck/index.js
index ffabd59..89087a3 100644
--- a/src/api/riskCheck/index.js
+++ b/src/api/riskCheck/index.js
@@ -1,6 +1,10 @@
 import request from '@/assets/js/utils/request'
 import getUrl from '@/assets/js/utils/get-url'
+// 导出规则相关API
+export * from './rule'
 
+// 导出记录相关API
+export * from './record'
 // 查询审批单风险筛查结果
 export function queryResult(data) {
   return request({
diff --git a/src/views/applicationManagement/employRule/components/RuleEditDialog.vue b/src/views/applicationManagement/employRule/components/RuleEditDialog.vue
new file mode 100644
index 0000000..25ccab1
--- /dev/null
+++ b/src/views/applicationManagement/employRule/components/RuleEditDialog.vue
@@ -0,0 +1,308 @@
+<template>
+  <el-dialog
+    :title="dialogTitle"
+    :visible.sync="dialogVisible"
+    width="600px"
+    @close="handleClose"
+  >
+    <el-form
+      ref="ruleForm"
+      :model="ruleForm"
+      :rules="rules"
+      label-width="120px"
+      v-loading="loading"
+    >
+      <!-- 规则类型下拉选择 -->
+      <el-form-item label="规则类型" prop="ruleType">
+        <el-select
+          v-model="ruleForm.ruleType"
+          placeholder="请选择规则类型"
+          style="width: 100%"
+        >
+          <el-option
+            v-for="item in ruleTypeList"
+            :key="item.typeCode"
+            :label="item.typeName"
+            :value="item.typeCode"
+          >
+          </el-option>
+        </el-select>
+      </el-form-item>
+
+      <!-- 字段类型下拉选择 -->
+      <el-form-item label="字段类型" prop="ruleField">
+        <el-select
+          v-model="ruleForm.ruleField"
+          placeholder="请选择字段类型"
+          style="width: 100%"
+        >
+          <el-option
+            v-for="item in fieldTypeList"
+            :key="item.fieldName"
+            :label="item.fieldComment"
+            :value="item.fieldName"
+          >
+          </el-option>
+        </el-select>
+      </el-form-item>
+
+      <!-- 规则描述文本域 -->
+      <el-form-item label="规则描述" prop="ruleDesc">
+        <el-input
+          type="textarea"
+          v-model="ruleForm.ruleDesc"
+          placeholder="请输入规则描述"
+          :rows="3"
+        ></el-input>
+      </el-form-item>
+
+      <!-- 风险提示话术输入框 -->
+      <el-form-item label="风险提示话术" prop="riskScript">
+        <el-input
+          v-model="ruleForm.riskScript"
+          placeholder="请输入风险提示话术"
+        ></el-input>
+      </el-form-item>
+
+      <!-- 校验内容类型 -->
+      <!--      <el-form-item label="校验内容类型" prop="checkType">-->
+      <!--        <el-select -->
+      <!--          v-model="ruleForm.checkType" -->
+      <!--          placeholder="请选择校验内容类型" -->
+      <!--          style="width: 100%"-->
+      <!--        >-->
+      <!--          <el-option label="表单信息" :value="1"></el-option>-->
+      <!--          <el-option label="文本文件" :value="2"></el-option>-->
+      <!--          <el-option label="图片" :value="3"></el-option>-->
+      <!--        </el-select>-->
+      <!--      </el-form-item>-->
+
+      <!--      &lt;!&ndash; 风险类型 &ndash;&gt;-->
+      <!--      <el-form-item label="风险类型" prop="riskType">-->
+      <!--        <el-select -->
+      <!--          v-model="ruleForm.riskType" -->
+      <!--          placeholder="请选择风险类型" -->
+      <!--          style="width: 100%"-->
+      <!--        >-->
+      <!--          <el-option-->
+      <!--            v-for="item in riskTypeList"-->
+      <!--            :key="item.riskTypeCode"-->
+      <!--            :label="item.riskType"-->
+      <!--            :value="item.riskTypeCode">-->
+      <!--          </el-option>-->
+      <!--        </el-select>-->
+      <!--      </el-form-item>-->
+
+      <!--      &lt;!&ndash; 运行类型 &ndash;&gt;-->
+      <!--      <el-form-item label="运行类型" prop="runType">-->
+      <!--        <el-radio-group v-model="ruleForm.runType">-->
+      <!--          <el-radio label="ai">AI</el-radio>-->
+      <!--          <el-radio label="func">函数</el-radio>-->
+      <!--        </el-radio-group>-->
+      <!--      </el-form-item>-->
+    </el-form>
+
+    <span slot="footer" class="dialog-footer">
+      <el-button
+        type="primary"
+        @click="handleSubmit"
+        :loading="submitLoading"
+        size="medium"
+        >确 定</el-button
+      >
+      <el-button @click="handleClose" size="medium">取 消</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { createRule, updateRule, queryRuleDetail } from '@/api/riskCheck/rule'
+
+export default {
+  name: 'RuleEditDialog',
+  props: {
+    // 对话框是否可见
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    // 是否为编辑模式
+    isEdit: {
+      type: Boolean,
+      default: false
+    },
+    // 当前规则数据
+    ruleData: {
+      type: Object,
+      default: () => ({})
+    },
+    // 规则类型选项列表
+    ruleTypeOptions: {
+      type: Array,
+      default: () => []
+    },
+    // 字段类型选项列表
+    fieldTypeOptions: {
+      type: Array,
+      default: () => []
+    },
+    // 风险类型选项列表
+    riskTypeOptions: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      submitLoading: false,
+      // 表单数据
+      ruleForm: {
+        id: '',
+        ruleType: '',
+        ruleField: '',
+        ruleDesc: '',
+        riskScript: '',
+        checkType: 1,
+        riskType: '',
+        ruleStatus: 0,
+        runType: 'ai'
+      },
+      // 表单验证规则
+      rules: {
+        ruleType: [
+          { required: true, message: '请选择规则类型', trigger: 'change' }
+        ],
+        ruleField: [
+          { required: true, message: '请选择字段类型', trigger: 'change' }
+        ],
+        ruleDesc: [
+          { required: true, message: '请输入规则描述', trigger: 'blur' }
+        ],
+        riskScript: [
+          { required: true, message: '请输入风险提示话术', trigger: 'blur' }
+        ],
+        checkType: [
+          { required: true, message: '请选择校验内容类型', trigger: 'change' }
+        ],
+        riskType: [
+          { required: true, message: '请选择风险类型', trigger: 'change' }
+        ],
+        runType: [
+          { required: true, message: '请选择运行类型', trigger: 'change' }
+        ]
+      }
+    }
+  },
+  computed: {
+    // 对话框标题
+    dialogTitle() {
+      return this.isEdit ? '编辑规则' : '新增规则'
+    },
+    // 对话框可见性
+    dialogVisible: {
+      get() {
+        return this.visible
+      },
+      set(val) {
+        this.$emit('update:visible', val)
+      }
+    },
+    // 规则类型选项列表
+    ruleTypeList() {
+      return this.ruleTypeOptions.length > 0
+        ? this.ruleTypeOptions
+        : [
+            { typeName: '基本信息', typeCode: 'basic_rule' },
+            { typeName: '投保信息', typeCode: 'insurance_rule' }
+          ]
+    },
+    // 字段类型选项列表
+    fieldTypeList() {
+      return this.fieldTypeOptions.length > 0
+        ? this.fieldTypeOptions
+        : [
+            { fieldComment: '保险期限（天）', fieldName: 'insurance_period' },
+            { fieldComment: '投保金额', fieldName: 'insurance_amount' }
+          ]
+    },
+    // 风险类型选项列表
+    riskTypeList() {
+      return this.riskTypeOptions.length > 0
+        ? this.riskTypeOptions
+        : [
+            {
+              riskType: '费率与投保方案不合理风险',
+              riskTypeCode: 'rate_plan_risk'
+            },
+            {
+              riskType: '保险责任不明确风险',
+              riskTypeCode: 'insurance_liability_risk'
+            }
+          ]
+    }
+  },
+  watch: {
+    // 监听规则数据变化
+    ruleData: {
+      handler(val) {
+        if (val && Object.keys(val).length > 0) {
+          this.ruleForm = Object.assign({}, val)
+        } else {
+          this.ruleForm = {
+            id: '',
+            ruleType: '',
+            ruleField: '',
+            ruleDesc: '',
+            riskScript: '',
+            checkType: 1,
+            riskType: '',
+            ruleStatus: 0,
+            runType: 'ai'
+          }
+        }
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    // 关闭对话框
+    handleClose() {
+      this.$refs.ruleForm.resetFields()
+      this.$emit('update:visible', false)
+    },
+    // 提交表单
+    handleSubmit() {
+      this.$refs.ruleForm.validate(valid => {
+        if (valid) {
+          this.submitLoading = true
+          // 根据是否为编辑模式调用不同接口
+          const request = this.isEdit ? updateRule : createRule
+          const params = Object.assign({}, this.ruleForm)
+
+          request(params)
+            .then(response => {
+              this.$message.success(`${this.dialogTitle}成功`)
+              this.$emit('success', response)
+              this.handleClose()
+            })
+            .catch(error => {
+              this.$message.error(
+                `${this.dialogTitle}失败: ` + (error.message || '未知错误')
+              )
+            })
+            .finally(() => {
+              this.submitLoading = false
+            })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.dialog-footer {
+  text-align: right;
+}
+</style>
diff --git a/src/views/applicationManagement/employRule/components/RuleViewDialog.vue b/src/views/applicationManagement/employRule/components/RuleViewDialog.vue
new file mode 100644
index 0000000..7149c61
--- /dev/null
+++ b/src/views/applicationManagement/employRule/components/RuleViewDialog.vue
@@ -0,0 +1,246 @@
+<template>
+  <el-dialog
+    title="查看规则"
+    :visible.sync="dialogVisible"
+    width="600px"
+    @close="handleClose"
+  >
+    <el-form
+      ref="ruleForm"
+      :model="ruleForm"
+      label-width="120px"
+      v-loading="loading"
+    >
+      <!-- 规则类型 -->
+      <el-form-item label="规则类型">
+        <el-select
+          v-model="ruleForm.ruleType"
+          placeholder="请选择规则类型"
+          style="width: 100%"
+          disabled
+        >
+          <el-option
+            v-for="item in ruleTypeList"
+            :key="item.typeCode"
+            :label="item.typeName"
+            :value="item.typeCode"
+          >
+          </el-option>
+        </el-select>
+      </el-form-item>
+
+      <!-- 字段类型 -->
+      <el-form-item label="字段类型">
+        <el-select
+          v-model="ruleForm.ruleField"
+          placeholder="请选择字段类型"
+          style="width: 100%"
+          disabled
+        >
+          <el-option
+            v-for="item in fieldTypeList"
+            :key="item.fieldName"
+            :label="item.fieldComment"
+            :value="item.fieldName"
+          >
+          </el-option>
+        </el-select>
+      </el-form-item>
+
+      <!-- 规则描述 -->
+      <el-form-item label="规则描述">
+        <el-input
+          type="textarea"
+          v-model="ruleForm.ruleDesc"
+          placeholder="请输入规则描述"
+          :rows="3"
+          disabled
+        ></el-input>
+      </el-form-item>
+
+      <!-- 风险提示话术 -->
+      <el-form-item label="风险提示话术">
+        <el-input
+          v-model="ruleForm.riskScript"
+          placeholder="请输入风险提示话术"
+          disabled
+        ></el-input>
+      </el-form-item>
+
+      <!--      &lt;!&ndash; 校验内容类型 &ndash;&gt;-->
+      <!--      <el-form-item label="校验内容类型">-->
+      <!--        <el-select -->
+      <!--          v-model="ruleForm.checkType" -->
+      <!--          placeholder="请选择校验内容类型" -->
+      <!--          style="width: 100%"-->
+      <!--          disabled-->
+      <!--        >-->
+      <!--          <el-option label="表单信息" :value="1"></el-option>-->
+      <!--          <el-option label="文本文件" :value="2"></el-option>-->
+      <!--          <el-option label="图片" :value="3"></el-option>-->
+      <!--        </el-select>-->
+      <!--      </el-form-item>-->
+
+      <!--      &lt;!&ndash; 风险类型 &ndash;&gt;-->
+      <!--      <el-form-item label="风险类型">-->
+      <!--        <el-select -->
+      <!--          v-model="ruleForm.riskType" -->
+      <!--          placeholder="请选择风险类型" -->
+      <!--          style="width: 100%"-->
+      <!--          disabled-->
+      <!--        >-->
+      <!--          <el-option-->
+      <!--            v-for="item in riskTypeList"-->
+      <!--            :key="item.riskTypeCode"-->
+      <!--            :label="item.riskType"-->
+      <!--            :value="item.riskTypeCode">-->
+      <!--          </el-option>-->
+      <!--        </el-select>-->
+      <!--      </el-form-item>-->
+
+      <!--      &lt;!&ndash; 运行类型 &ndash;&gt;-->
+      <!--      <el-form-item label="运行类型">-->
+      <!--        <el-radio-group v-model="ruleForm.runType" disabled>-->
+      <!--          <el-radio label="ai">AI</el-radio>-->
+      <!--          <el-radio label="func">函数</el-radio>-->
+      <!--        </el-radio-group>-->
+      <!--      </el-form-item>-->
+
+      <!-- 规则状态 -->
+      <!--      <el-form-item label="规则状态">-->
+      <!--        <el-switch-->
+      <!--          v-model="ruleForm.ruleStatus"-->
+      <!--          :active-value="1"-->
+      <!--          :inactive-value="0"-->
+      <!--          active-text="启用"-->
+      <!--          inactive-text="未启用"-->
+      <!--          disabled-->
+      <!--        >-->
+      <!--        </el-switch>-->
+      <!--      </el-form-item>-->
+    </el-form>
+
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="handleClose" size="medium">关 闭</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { queryRuleDetail } from '@/api/riskCheck/rule'
+
+export default {
+  name: 'RuleViewDialog',
+  props: {
+    // 对话框是否可见
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    // 当前规则数据
+    ruleData: {
+      type: Object,
+      default: () => ({})
+    },
+    // 规则类型选项列表
+    ruleTypeOptions: {
+      type: Array,
+      default: () => []
+    },
+    // 字段类型选项列表
+    fieldTypeOptions: {
+      type: Array,
+      default: () => []
+    },
+    // 风险类型选项列表
+    riskTypeOptions: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      // 表单数据
+      ruleForm: {
+        id: '',
+        ruleType: '',
+        ruleField: '',
+        ruleDesc: '',
+        riskScript: '',
+        checkType: 1,
+        riskType: '',
+        ruleStatus: 0,
+        runType: 'ai'
+      }
+    }
+  },
+  computed: {
+    // 对话框可见性
+    dialogVisible: {
+      get() {
+        return this.visible
+      },
+      set(val) {
+        this.$emit('update:visible', val)
+      }
+    },
+    // 规则类型选项列表
+    ruleTypeList() {
+      return this.ruleTypeOptions.length > 0
+        ? this.ruleTypeOptions
+        : [
+            { typeName: '基本信息', typeCode: 'basic_rule' },
+            { typeName: '投保信息', typeCode: 'insurance_rule' }
+          ]
+    },
+    // 字段类型选项列表
+    fieldTypeList() {
+      return this.fieldTypeOptions.length > 0
+        ? this.fieldTypeOptions
+        : [
+            { fieldComment: '保险期限（天）', fieldName: 'insurance_period' },
+            { fieldComment: '投保金额', fieldName: 'insurance_amount' }
+          ]
+    },
+    // 风险类型选项列表
+    riskTypeList() {
+      return this.riskTypeOptions.length > 0
+        ? this.riskTypeOptions
+        : [
+            {
+              riskType: '费率与投保方案不合理风险',
+              riskTypeCode: 'rate_plan_risk'
+            },
+            {
+              riskType: '保险责任不明确风险',
+              riskTypeCode: 'insurance_liability_risk'
+            }
+          ]
+    }
+  },
+  watch: {
+    // 监听规则数据变化
+    ruleData: {
+      handler(val) {
+        if (val && Object.keys(val).length > 0) {
+          this.ruleForm = Object.assign({}, val)
+        }
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    // 关闭对话框
+    handleClose() {
+      this.$emit('update:visible', false)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.dialog-footer {
+  text-align: right;
+}
+</style>
diff --git a/src/views/applicationManagement/employRule/index.vue b/src/views/applicationManagement/employRule/index.vue
index d450202..0f65964 100644
--- a/src/views/applicationManagement/employRule/index.vue
+++ b/src/views/applicationManagement/employRule/index.vue
@@ -19,7 +19,12 @@
         >
           <!-- 规则类型下拉选择 -->
           <el-form-item label="规则类型" prop="ruleType">
-            <el-select v-model="queryParams.ruleType" size="medium" clearable placeholder="请选择规则类型">
+            <el-select
+              v-model="queryParams.ruleType"
+              size="medium"
+              clearable
+              placeholder="请选择规则类型"
+            >
               <el-option
                 v-for="item in ruleTypeList"
                 :label="item.typeName"
@@ -28,10 +33,15 @@
               ></el-option>
             </el-select>
           </el-form-item>
-          
+
           <!-- 字段类型下拉选择 -->
           <el-form-item label="字段类型" prop="ruleField">
-            <el-select v-model="queryParams.ruleField" size="medium" clearable placeholder="请选择字段类型">
+            <el-select
+              v-model="queryParams.ruleField"
+              size="medium"
+              clearable
+              placeholder="请选择字段类型"
+            >
               <el-option
                 v-for="item in fieldTypeList"
                 :label="item.fieldComment"
@@ -40,7 +50,7 @@
               ></el-option>
             </el-select>
           </el-form-item>
-          
+
           <!-- 规则描述输入框 -->
           <el-form-item label="规则描述" prop="ruleDesc">
             <el-input
@@ -49,10 +59,15 @@
               placeholder="请输入规则描述"
             ></el-input>
           </el-form-item>
-          
+
           <!-- 规则状态下拉选择 -->
           <el-form-item label="规则状态" prop="ruleStatus">
-            <el-select v-model="queryParams.ruleStatus" size="medium" clearable placeholder="请选择规则状态">
+            <el-select
+              v-model="queryParams.ruleStatus"
+              size="medium"
+              clearable
+              placeholder="请选择规则状态"
+            >
               <el-option
                 v-for="item in statusList"
                 :label="item.label"
@@ -62,7 +77,7 @@
             </el-select>
           </el-form-item>
         </el-form>
-        
+
         <!-- 查询操作按钮 -->
         <div class="mt15 flex align-items-c justify-content-b">
           <el-button size="medium" type="primary" @click="handleQuery"
@@ -75,7 +90,7 @@
         </div>
       </div>
     </div>
-    
+
     <!-- 规则列表表格 -->
     <r-table
       :columns="tableConfig.columns"
@@ -87,21 +102,60 @@
       :currentPage="tableConfig.currentPage"
       :pageSize="tableConfig.pageSize"
     />
+
+    <!-- 规则编辑对话框 -->
+    <rule-edit-dialog
+      :visible.sync="editDialogVisible"
+      :is-edit="isEdit"
+      :rule-data="currentRuleData"
+      :rule-type-options="ruleTypeList"
+      :field-type-options="fieldTypeList"
+      :risk-type-options="riskTypeList"
+      @success="handleEditSuccess"
+    />
+
+    <!-- 规则查看对话框 -->
+    <rule-view-dialog
+      :visible.sync="viewDialogVisible"
+      :rule-data="currentRuleData"
+      :rule-type-options="ruleTypeList"
+      :field-type-options="fieldTypeList"
+      :risk-type-options="riskTypeList"
+    />
   </div>
 </template>
 
 <script>
-import { 
-  getRulePage, 
-  deleteRule, 
-  batchSwitchStatus 
+import {
+  getRulePage,
+  deleteRule,
+  batchSwitchStatus,
+  queryRuleDetail,
+  getRuleList,
+  batchAddRuleType,
+  batchAddField,
+  batchAddRiskType
 } from '@/api/riskCheck/rule'
+import RuleEditDialog from './components/RuleEditDialog.vue'
+import RuleViewDialog from './components/RuleViewDialog.vue'
 
 export default {
   name: 'EmployRule',
+  components: {
+    RuleEditDialog,
+    RuleViewDialog
+  },
   data() {
     return {
       loading: false,
+      // 编辑对话框是否可见
+      editDialogVisible: false,
+      // 查看对话框是否可见
+      viewDialogVisible: false,
+      // 是否为编辑模式
+      isEdit: false,
+      // 当前规则数据
+      currentRuleData: {},
       // 查询参数
       queryParams: {
         page: 1,
@@ -121,18 +175,26 @@ export default {
         { fieldComment: '保险期限（天）', fieldName: 'insurance_period' },
         { fieldComment: '投保金额', fieldName: 'insurance_amount' }
       ],
-      // 规则状态选项列表
-      statusList: [
-        { label: '启用', value: 1 }, 
-        { label: '未启用', value: 0 }
+      // 风险类型选项列表
+      riskTypeList: [
+        {
+          riskType: '费率与投保方案不合理风险',
+          riskTypeCode: 'rate_plan_risk'
+        },
+        {
+          riskType: '保险责任不明确风险',
+          riskTypeCode: 'insurance_liability_risk'
+        }
       ],
+      // 规则状态选项列表
+      statusList: [{ label: '启用', value: 0 }, { label: '未启用', value: 1 }],
       // 表格配置项
       tableConfig: {
         total: 0,
         currentPage: 1,
         pageSize: 10,
         columns: [
-          { prop: 'index', key: '序号', width: 60 },
+          { type: 'index', key: '序号', width: 60 },
           { prop: 'ruleType', key: '规则类型' },
           { prop: 'ruleField', key: '字段类型' },
           { prop: 'ruleDesc', key: '规则描述' },
@@ -145,11 +207,11 @@ export default {
                 'el-tag',
                 {
                   props: {
-                    type: params.row.ruleStatus === 1 ? 'success' : 'info',
+                    type: params.row.ruleStatus === 0 ? 'success' : 'info',
                     size: 'small'
                   }
                 },
-                params.row.ruleStatus === 1 ? '启用' : '未启用'
+                params.row.ruleStatus === 0 ? '启用' : '未启用'
               )
             }
           },
@@ -214,7 +276,7 @@ export default {
                         params.row.ruleStatus === 1
                           ? 'el-icon-remove-outline'
                           : 'el-icon-circle-check',
-                      title: params.row.ruleStatus === 1 ? '停用' : '启用'
+                      title: params.row.ruleStatus === 1 ? '启用' : '停用'
                     },
                     on: { click: () => this.handleToggleStatus(params.row) }
                   },
@@ -237,16 +299,18 @@ export default {
     getList() {
       this.loading = true
       const params = Object.assign({}, this.queryParams)
-      
+
       getRulePage(params)
         .then(response => {
           // 根据实际API返回结构调整，兼容Vue2语法
-          var content = response.content || {}
+          var content = response.content.content || {}
           this.tableData = content.list || []
           this.tableConfig.total = content.total || 0
         })
         .catch(error => {
-          this.$message.error('获取规则列表失败: ' + (error.message || '未知错误'))
+          this.$message.error(
+            '获取规则列表失败: ' + (error.message || '未知错误')
+          )
         })
         .finally(() => {
           this.loading = false
@@ -264,22 +328,61 @@ export default {
     },
     // 新增按钮点击事件
     handleAdd() {
-      this.$message.info('新增功能待实现')
+      this.isEdit = false
+      this.currentRuleData = {}
+      this.editDialogVisible = true
     },
     // 查看详情按钮点击事件
     handleView(row) {
-      this.$message.info('查看详情功能待实现')
+      this.loading = true
+      this.viewDialogVisible = true
+
+      // 获取规则详情
+      queryRuleDetail({ id: row.id })
+        .then(response => {
+          this.currentRuleData = response.content.content || {}
+        })
+        .catch(error => {
+          this.$message.error(
+            '获取规则详情失败: ' + (error.message || '未知错误')
+          )
+          this.viewDialogVisible = false
+        })
+        .finally(() => {
+          this.loading = false
+        })
     },
     // 编辑按钮点击事件
     handleEdit(row) {
-      this.$message.info('编辑功能待实现')
+      this.isEdit = true
+      this.loading = true
+
+      // 获取规则详情
+      queryRuleDetail({ id: row.id })
+        .then(response => {
+          this.currentRuleData = response.content.content || {}
+          this.editDialogVisible = true
+        })
+        .catch(error => {
+          this.$message.error(
+            '获取规则详情失败: ' + (error.message || '未知错误')
+          )
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    },
+    // 编辑成功回调
+    handleEditSuccess() {
+      this.getList() // 刷新列表
     },
     // 启用/停用按钮点击事件
     handleToggleStatus(row) {
+      // 1 停用  0  启用
       // 启用的数据能停用，停用的数据反之
-      const newStatus = row.ruleStatus === 1 ? 'disabled' : 'enable'
-      const statusText = row.ruleStatus === 1 ? '停用' : '启用'
-      
+      const newStatus = row.ruleStatus === 0 ? 'enable' : 'disabled'
+      const statusText = row.ruleStatus === 0 ? '停用' : '启用'
+
       this.$messageBox(
         () => {
           // 调用批量启用/停用接口，传入当前行的ID
@@ -290,7 +393,9 @@ export default {
               row.ruleStatus = row.ruleStatus === 1 ? 0 : 1
             })
             .catch(error => {
-              this.$message.error(`${statusText}失败: ` + (error.message || '未知错误'))
+              this.$message.error(
+                `${statusText}失败: ` + (error.message || '未知错误')
+              )
             })
         },
         `确认${statusText}该规则吗？`,
@@ -348,4 +453,4 @@ export default {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>