fix: 风险列表

src/api/business-rules/rules-api.js

@@ -22,25 +22,23 @@ export const rulesApi = {
   },
 
   /**
-   * 规则查询
+   * 规则树结构查询
    */
-  queryRulesList: (params) => {
-    return getRequest(`/supports/risk/selectRisk?key=${params}`);
+  queryRulesTree: () => {
+    return getRequest('/supports/risk/rule/tree');
   },
-
   /**
-   * 规则数结构查询
+   * 规则列表查询
    */
-  queryRulesTree: () => {
-    return getRequest('/supports/risk/selectAllCategory');
+  queryRulesList: (params) => {
+    return getRequest(`/supports/risk/rule/queryPage?pageNum=${params.pageNum}&pageSize=${params.pageSize}&key=${params.selectedRulesId}`);
   },
   /**
    * 提交规则表单数据
    */
   submitRulesForm: (params) => {
-    return postRequest('/supports/risk/add', params);
+    return postRequest('/supports/risk/rule/create', params);
   },
-
   /**
    * 查询单条规则详情
    */

src/views/business-rules/risk-rules/components/rules-list/index.vue

@@ -1,191 +1,233 @@
-<!--
-  *  风险树列表
-  *
-  * @Author:    DCCloud
-  * @Date:      2025-05-28 20:46:18
--->
 <template>
-  <a-card class="employee-container">
-    <div class="header">
-      <a-typography-title :level="5">规则详情</a-typography-title>
-      <div class="query-operate">
-        <a-button @click="goDetailPage" class="smart-margin-left10">
-          <template #icon>
-          </template>
-          新增
-        </a-button>
-      </div>
-    </div>
-
-    <a-table
-      size="small"
-      :columns="columns"
-      :data-source="tableData"
-      :pagination="false"
-      :loading="tableLoading"
-      bordered
-    >
-      <template #bodyCell="{ record, column }">
-        <template v-if="column.dataIndex === 'operate'">
-          <div class="smart-table-operate">
-            <a-button v-privilege="'system:employee:update'" type="link" size="small" @click="goDetailPage(record)">编辑</a-button>
-          </div>
-        </template>
+  <div class="table-demo">
+    <bs-table v-bind="tableOptions">
+      <template #searchRight>
+        <a-space>
+          <a-button type="primary" @click="openEditDrawer">
+            <template #icon>
+              <PlusOutlined />
+            </template>
+            <span>新增</span>
+          </a-button>
+        </a-space>
       </template>
-    </a-table>
-  </a-card>
+    </bs-table>
+  </div>
 </template>
-<script setup lang="ts">
-  import { onMounted } from 'vue';
-  import { useRouter } from 'vue-router';
-  import _ from 'lodash';
-  import { computed, createVNode, reactive, ref, watch } from 'vue';
-  import { rulesApi } from '/@/api/business-rules/rules-api';
-  import { smartSentry } from '/@/lib/smart-sentry';
-  import useDict from '/@/utils/dict-util';
 
-  onMounted(async () => {
-    // await initDict();
-    queryRules();
-  });
+<script setup>
+  import BsTable, { useBsTable } from '/@/components/BsUi/Table/index.js';
+  import { onMounted, ref ,watch} from 'vue';
+  import { pick } from 'lodash';
+  import { rulesApi } from '/@/api/business-rules/rules-api';
 
   // ----------------------- 以下是字段定义 emits props ---------------------
 
   const props = defineProps({
-    selectedRulesId: Number,
-    breadcrumb: Array,
+    selectedRulesId: String,
   });
-
   // ----------------------- 表格/列表/ 搜索 ---------------------
-  //字段
-  const columns = ref([
-    {
-      title: '风险维度',
-      dataIndex: 'riskDimension',
-      align: 'center',
-      width: 85,
-    },
-    {
-      title: '风险指标',
-      dataIndex: 'riskMetrics',
-      align: 'center',
-      width: 110,
-    },
-    {
-      title: '指标定义',
-      dataIndex: 'definedMetrics',
-      align: 'center',
-      width: 100,
-    },
-    {
-      title: '条件运算符',
-      dataIndex: 'operator',
-      align: 'center',
-      width: 100,
-    },
-    {
-      title: '条件控制值',
-      dataIndex: 'conditionalValue',
-      align: 'center',
-      width: 100,
-      ellipsis: true,
-    },
-    {
-      title: '提醒方式',
-      dataIndex: 'remindWay',
-      align: 'center',
-      width: 100,
-    },
-    {
-      title: '提醒时间(每天)',
-      dataIndex: 'remindTime',
-      align: 'center',
-      width: 120,
-    },
-    {
-      title: '风险等级',
-      dataIndex: 'riskGrade',
-      align: 'center',
-      width: 100,
-      ellipsis: true,
-    },
-    {
-      title: '状态',
-      dataIndex: 'enable',
-      align: 'center',
-      width: 100,
-    },
-    {
-      title: '操作',
-      dataIndex: 'operate',
-      align: 'center',
-      fixed: 'right',
-      width: 140,
+
+  const selectedRulesId = ref(props.selectedRulesId);
+
+  const {
+    tableOptions,
+    setTablePropsValue: setValue,
+    getTablePropsValue: getValue,
+  } = useBsTable({
+    tableOptions: {
+      gridOptions: {
+        loading: false,
+        columns: [
+          {
+            title: '风险维度',
+            field: 'riskDimension',
+            width: 85,
+            ellipsis: true,
+          },
+          {
+            title: '风险模板',
+            field: 'riskModel',
+            width: 85,
+            ellipsis: true,
+          },
+          {
+            title: '风险等级',
+            field: 'riskLevel',
+          },
+          {
+            title: '风险指标',
+            field: 'riskMetrics',
+
+            width: 110,
+            ellipsis: true,
+          },
+          {
+            title: '指标定义',
+            field: 'definedMetrics',
+
+            width: 100,
+            ellipsis: true,
+          },
+          {
+            title: '条件运算符',
+            field: 'operator',
+
+            width: 100,
+            ellipsis: true,
+          },
+          {
+            title: '条件控制值',
+            field: 'conditionalValue',
+
+            width: 100,
+            ellipsis: true,
+          },
+          {
+            title: '提醒方式',
+            field: 'remindWay',
+
+            width: 100,
+            ellipsis: true,
+          },
+          {
+            title: '提醒时间(每天)',
+            field: 'remindTime',
+
+            width: 120,
+            ellipsis: true,
+          },
+          {
+            title: '风险等级',
+            field: 'riskGrade',
+
+            width: 100,
+            ellipsis: true,
+          },
+          {
+            title: '状态',
+            field: 'enable',
+
+            width: 100,
+            ellipsis: true,
+          },
+
+          {
+            field: 'action',
+            title: '操作',
+          },
+        ],
+      },
+      searchConfig: {
+        enabled: true,
+        fieldSpan: 4,
+        fields: [
+          {
+            field: 'name',
+            label: '',
+            component: 'a-input',
+            componentProps: {
+              placeholder: '请输入服务商名称',
+            },
+          },
+          {
+            field: 'name1',
+            label: '',
+            component: 'a-select',
+            componentProps: {
+              placeholder: '请选择地址',
+            },
+          },
+          {
+            field: 'name2',
+            label: '',
+            component: 'a-select',
+            componentProps: {
+              placeholder: '请选择服务商类型',
+            },
+          },
+        ],
+        onSearch() {
+          fetchTableData2();
+        },
+        onReset() {
+          fetchTableData2();
+        },
+      },
+      pagerConfig: {
+        enabled: true,
+        pageSize: 10,
+        pageNum: 1,
+        total: 100,
+        onChange: () => {
+          fetchTableData2();
+        },
+      },
+      toolbarConfig: {
+        onRefresh() {
+          fetchTableData2();
+        },
+      },
     },
-  ]);
-  const tableData = ref();
-  const selectedRulesId = ref();
-  const tableLoading = ref(false);
-
-  // 查询
-  async function queryRules() {
-    tableLoading.value = true;
-    try {
-      selectedRulesId.value = props.selectedRulesId;
-      let res = await rulesApi.queryRulesList(selectedRulesId.value);
-      tableData.value = res.data;
-    } catch (error) {
-      smartSentry.captureError(error);
-    } finally {
-      tableLoading.value = false;
-    }
-  }
+  });
 
   //检测数据变化
-  watch(
-    () => props.selectedRulesId,
-    () => {
-      if (props.selectedRulesId !== selectedRulesId.value) {
-        queryRules()
-      }
-    },
-    { immediate: true }
-  );
-
-  // ----------------------- 添加、修改、禁用、重置密码、页面跳转 ------------------------------------
-  const router = useRouter();
-  function goDetailPage(record) {
-    console.log('record', record);
-    router.push({
-      path: '/business-rules/create-rules',
-      query: {
-        id: record.id,
-      },
+ watch(
+  () => props.selectedRulesId,
+  (newValue) => {
+   selectedRulesId.value=newValue;
+   fetchTableData2();
+  },
+  { immediate: true }
+);
+
+  const getSearchParams = () => {
+    return getValue('searchConfig.data');
+  };
+  const getPageInfo = () => {
+    return pick(getValue('pagerConfig'), ['pageNum', 'pageSize']);
+  };
+
+  async function fetchTableData2() {
+    setValue('gridOptions.loading', true);
+
+    const params = {
+      ...getSearchParams(),
+      ...getPageInfo(),
+      selectedRulesId:selectedRulesId.value,
+    };
+
+    rulesApi.queryRulesList(params).then((res) => {
+      setValue('gridOptions.data', res.data.list);
+      setValue('gridOptions.loading', false);
     });
   }
-</script>
-<style scoped lang="less">
-  .employee-container {
-    height: 100%;
-  }
+  const fetchTableData = () => {
+    setValue('gridOptions.loading', true);
 
-  .header {
-    display: flex;
-    align-items: center;
-  }
+    const params = {
+      ...getSearchParams(),
+      ...getPageInfo(),
+      selectedRulesId:selectedRulesId.value,
+    };
 
-  .query-operate {
-    margin-left: auto;
-    display: flex;
-    align-items: center;
-    margin-bottom: 20px;
-  }
+    rulesApi.queryRulesList(params).then((res) => {
+      console.log('res', res);
+      setValue('gridOptions.data', res.data.list);
+      setValue('gridOptions.loading', false);
+    });
+  };
 
-  .btn-group {
-    margin: 10px 0;
+  onMounted(() => {
+    console.log('表格已加载');
+    fetchTableData2();
+  });
+  const openEditDrawer = () => {
+    addOrEditDrawerRef.value.showDrawer();
+  };
+</script>
 
-    .btn {
-      margin-right: 8px;
-    }
+<style scoped lang="scss">
+  .table-demo {
   }
 </style>

src/views/business-rules/risk-rules/components/task-rules-tree/index.vue

@@ -6,9 +6,6 @@
 -->
 <template>
   <a-card class="tree-container">
-    <a-row class="smart-margin-bottom10">
-      <a-input v-model:value.trim="keywords" placeholder="请输入部门名称" />
-    </a-row>
     <a-tree
       v-model:selectedKeys="selectedKeys"
       v-model:checkedKeys="checkedKeys"

src/views/business-rules/risk-rules/index.vue

@@ -8,12 +8,12 @@
   <div class="height100">
     <a-row :gutter="24" class="height100">
       <a-col :span="5">
-        <DepartmentTree ref="departmentTree" />
+        <RulesTree ref="rulesTreeRef" />
       </a-col>
 
       <a-col :span="19" class="height100">
         <div class="employee-box height100">
-          <EmployeeList style="flex-grow: 2.5" class="employee" :selectedRulesId="selectedRulesId" />
+          <RulesList style="flex-grow: 2.5" class="employee" :selectedRulesId="selectedRulesId" />
         </div>
       </a-col>
     </a-row>
@@ -22,19 +22,19 @@
 <script setup>
 import _ from 'lodash';
 import { computed, ref } from 'vue';
-import DepartmentTree from './components/task-rules-tree/index.vue';
-import EmployeeList from './components/rules-list/index.vue';
+import RulesTree from './components/task-rules-tree/index.vue';
+import RulesList from './components/rules-list/index.vue';
 
-const departmentTree = ref();
+const rulesTreeRef = ref();
 
 // 当前选中的目录id
 const selectedRulesId = computed(() => {
-  if (departmentTree.value) {
-    let selectedKeys = departmentTree.value.selectedKeys;
-    console.log("selectedDepartmentId", _.isEmpty(selectedKeys) ? null : selectedKeys[0]);
-    return _.isEmpty(selectedKeys) ? null : selectedKeys[0];
+  if (rulesTreeRef.value) {
+    let selectedKeys = rulesTreeRef.value.selectedKeys;
+    console.log("selectedDepartmentId", _.isEmpty(selectedKeys) ? '' : selectedKeys[0]);
+    return _.isEmpty(selectedKeys) ? '' : selectedKeys[0];
   }
-  return null;
+  return '';
 });
 
 </script>