diff --git a/src/api/knowledge/task-page.js b/src/api/knowledge/task-page.js
index 3234169..2ce538a 100644
--- a/src/api/knowledge/task-page.js
+++ b/src/api/knowledge/task-page.js
@@ -8,4 +8,16 @@ export function getDocByPage(data){
     method: 'post',
     data
   })
+}
+
+/**
+ * 获取规则列表
+ * @param {Object} data - 查询参数 默认为空对象
+ */
+export  function getRuleList(data={}){
+  return request({
+    url: getUrl('/docManage/extractRule/list'),
+    method: 'post',
+    data
+  })
 }
\ No newline at end of file
diff --git a/src/views/knowledge/rules/Index.vue b/src/views/knowledge/rules/Index.vue
index 635b4bd..f3f5bca 100644
--- a/src/views/knowledge/rules/Index.vue
+++ b/src/views/knowledge/rules/Index.vue
@@ -1,27 +1,135 @@
 <script>
+import { getRuleList } from '@/api/knowledge/task-page'
+import { computed } from 'vue'
 
 export default {
     name: 'rules',
     data() {
         return {
-            
+            currentPage: 1,
+            tableData: [],
+
+            form: {
+                pickerOptions: void 0,
+                ruleType: '',
+                ruleName: '',
+                value2: []
+            }
+        }
+    },
+    computed: {
+        // 当前的分页数据
+        currentTableDate() {
+            const start = (this.currentPage - 1) * 10;
+            const end = this.currentPage * 10;
+            return this.tableData.slice(start, end);
+        }
+    },
+    beforeMount() {
+        getRuleList().then(res => {
+            const { content } = res.content
+            console.log(content);
+
+            this.tableData = content
+        })
+    },
+    methods: {
+        handleCurrentChange(val) {
+            console.log(`current page: ${val}`);
+
+            this.currentPage = val;
+        },
+
+        edit(row, index) {
+            console.log(row, index);
+        },
+        del(row, index) {
+            console.log(row, index);
         }
     }
 }
 </script>
 
 <template>
-    <div>
+    <div class="rules-container container">
         <el-card>
             <template #header>
                 <div class="card-header">
                     <span>规则管理</span>
                 </div>
             </template>
+            <div class="card-body">
+                <el-form :model="form" label-width="100px">
+                    <!-- 查询条件 -->
+                    <el-row>
+                        <!-- 规则类型 -->
+                        <el-col :span="8">
+                            <el-form-item label="规则类型">
+                                <el-select v-model="form.ruleType" placeholder="请选择规则类型">
+                                    <!-- <el-option v-for="item in ruleTypeOptions" :key="item.value" :label="item.label"
+                                :value="item.value">
+                            </el-option> -->
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <!-- 规则名称 -->
+                        <el-col :span="8">
+                            <el-form-item label="规则名称">
+                                <el-select v-model="form.ruleName" placeholder="请选择规则名称">
+                                    <!-- <el-option v-for="item in ruleNameOptions" :key="item.value" :label="item.label" -->
+                                    <!-- :value="item.value"> -->
+                                    <!-- </el-option> -->
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <!-- 创建时间 -->
+                        <el-col :span="8">
+                            <el-form-item label="创建时间">
+                                <el-date-picker v-model="form.value2" type="daterange" unlink-panels range-separator="至"
+                                    start-placeholder="开始日期" end-placeholder="结束日期"
+                                    :picker-options="form.pickerOptions">
+                                </el-date-picker>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <!-- 功能按钮组： 查询、重置、新增规则 -->
+                    <el-row class="p25">
+                        <el-col :span="16">
+                            <el-button type="primary">查询</el-button>
+                            <el-button type="info">重置</el-button>
+                            <el-button type="primary">新增规则</el-button>
+                        </el-col>
+                    </el-row>
+                </el-form>
+            </div>
+
+            <!-- 下方规则列表 -->
+            <!-- <r-table :data="tableData"></r-table> -->
+            <div class="p20">
+                <el-table :data="currentTableDate">
+                    <el-table-column prop="attribute" label="规则名称"></el-table-column>
+                    <el-table-column prop="category" label="规则类型"></el-table-column>
+                    <el-table-column prop="createdDate" label="创建时间"></el-table-column>
+                    <el-table-column label="操作">
+                        <template #default="scope">
+                            <el-button type="primary" size="mini" plain
+                                @click="edit(scope.row, scope.$index)">编辑</el-button>
+                            <el-button type="danger" size="mini" plain
+                                @click="del(scope.row, scope.$index)">删除</el-button>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </div>
+            <!-- 分页 -->
+            <el-row>
+                <el-col :span="24" class="flex" style="justify-content: right;">
+                    <el-pagination background layout="prev, pager, next" @current-change="handleCurrentChange"
+                        :current-page="currentPage" :hide-on-single-page="true" :total="tableData.length">
+                    </el-pagination>
+                </el-col>
+            </el-row>
         </el-card>
     </div>
 </template>
 
-<style lang="scss" scoped>
-
-</style>
\ No newline at end of file
+<style lang="scss" scoped></style>
\ No newline at end of file