feat: 增加规则管理页面

- 规则管理包括类型筛选 、功能按钮、列表界面
This commit is contained in:
Huangzhe
2025-04-10 11:47:45 +08:00
parent 42763161a9
commit d6a95c7204
2 changed files with 125 additions and 5 deletions

View File

@@ -9,3 +9,15 @@ export function getDocByPage(data){
data
})
}
/**
* 获取规则列表
* @param {Object} data - 查询参数 默认为空对象
*/
export function getRuleList(data={}){
return request({
url: getUrl('/docManage/extractRule/list'),
method: 'post',
data
})
}

View File

@@ -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>
<style lang="scss" scoped></style>