mirror of
http://112.124.100.131/ebiz-ai/ebiz-ai-knowledge-manage.git
synced 2025-12-10 03:16:49 +08:00
feat(router): 添加应用管理相关路由和页面
- 在 router/index.js 中引入应用管理路由 - 新增应用管理路由配置文件 applicationManagement.js - 实现雇则风筛规则和雇则风筛记录两个页面组件 - 添加表格数据加载、查询、重置等功能- 实现新增、编辑、删除等操作的模拟
This commit is contained in:
陈昱达
29
src/router/generatedRouter/applicationManagement.js
Normal file
29
src/router/generatedRouter/applicationManagement.js
Normal file
@@ -0,0 +1,29 @@
|
||||
import layout from '@/views/app/layout/index.vue'
|
||||
|
||||
const applicationManagementRouter = [
|
||||
{
|
||||
path: '/applicationManagement',
|
||||
component: layout,
|
||||
redirect: '/applicationManagement/employRule',
|
||||
name: 'ApplicationManagement',
|
||||
meta: { title: '应用管理', icon: 'el-icon-s-management' },
|
||||
children: [
|
||||
{
|
||||
path: 'employRule',
|
||||
name: 'EmployRule',
|
||||
component: () =>
|
||||
import('@/views/applicationManagement/employRule/index.vue'),
|
||||
meta: { title: '雇则风筛规则', icon: 'el-icon-setting' }
|
||||
},
|
||||
{
|
||||
path: 'employRecord',
|
||||
name: 'EmployRecord',
|
||||
component: () =>
|
||||
import('@/views/applicationManagement/employRecord/index.vue'),
|
||||
meta: { title: '雇则风筛记录', icon: 'el-icon-document' }
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
export default applicationManagementRouter
|
||||
@@ -2,10 +2,15 @@ import Vue from 'vue'
|
||||
import Router from 'vue-router'
|
||||
import App from './app/index'
|
||||
import generatedRouter from './generatedRouter'
|
||||
import applicationManagementRouter from './generatedRouter/applicationManagement'
|
||||
|
||||
Vue.use(Router)
|
||||
|
||||
export const constantRouterMap = [...App, ...generatedRouter] // 静态路由
|
||||
export const constantRouterMap = [
|
||||
...App,
|
||||
...generatedRouter,
|
||||
...applicationManagementRouter
|
||||
] // 静态路由
|
||||
export default new Router({
|
||||
mode: 'hash', //路由模式
|
||||
base: process.env.BASE_URL,
|
||||
|
||||
180
src/views/applicationManagement/employRecord/index.vue
Normal file
180
src/views/applicationManagement/employRecord/index.vue
Normal file
@@ -0,0 +1,180 @@
|
||||
<template>
|
||||
<div class="render-container employ-record">
|
||||
<div class="filter-container">
|
||||
<div class="flex align-items-c justify-content-b">
|
||||
<el-form
|
||||
:model="queryParams"
|
||||
label-width="100px"
|
||||
label-position="top"
|
||||
ref="queryParams"
|
||||
inline
|
||||
>
|
||||
<el-form-item label="记录名称" prop="recordName">
|
||||
<el-input
|
||||
v-model="queryParams.recordName"
|
||||
size="medium"
|
||||
placeholder="请输入记录名称"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" size="medium">
|
||||
<el-option label="全部" value=""></el-option>
|
||||
<el-option
|
||||
v-for="item in statusList"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</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"
|
||||
>查询</el-button
|
||||
>
|
||||
<el-button size="medium" @click="resetQuery">重置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<r-table
|
||||
:columns="tableConfig.columns"
|
||||
:data="tableData"
|
||||
:deletion="false"
|
||||
:total="tableConfig.total"
|
||||
@currentChange="handleCurrentChange"
|
||||
@sizeChange="handleSizeChange"
|
||||
:currentPage="tableConfig.currentPage"
|
||||
:pageSize="tableConfig.pageSize"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'EmployRecord',
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
queryParams: {
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
recordName: '',
|
||||
status: ''
|
||||
},
|
||||
statusList: [{ label: '成功', value: 0 }, { label: '失败', value: 1 }],
|
||||
// 表格配置项
|
||||
tableConfig: {
|
||||
total: 0,
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
columns: [
|
||||
{ prop: 'recordName', key: '记录名称' },
|
||||
{ prop: 'recordDesc', key: '记录描述' },
|
||||
{ prop: 'createTime', key: '创建时间' },
|
||||
{
|
||||
prop: 'status',
|
||||
key: '状态',
|
||||
render: (h, params) => {
|
||||
return h(
|
||||
'el-tag',
|
||||
{
|
||||
props: {
|
||||
type: params.row.status === 0 ? 'success' : 'danger',
|
||||
size: 'small'
|
||||
}
|
||||
},
|
||||
params.row.status === 0 ? '成功' : '失败'
|
||||
)
|
||||
}
|
||||
},
|
||||
{
|
||||
key: '操作',
|
||||
isRedraw: true,
|
||||
render: (h, params) => {
|
||||
return h('div', [
|
||||
h(
|
||||
'el-button',
|
||||
{
|
||||
props: {
|
||||
type: 'text',
|
||||
size: 'mini',
|
||||
icon: 'el-icon-view',
|
||||
title: '查看'
|
||||
},
|
||||
class: 'normal-button',
|
||||
on: { click: () => this.handleView(params.row) }
|
||||
},
|
||||
''
|
||||
)
|
||||
])
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
tableData: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
// 获取列表
|
||||
getList() {
|
||||
this.loading = true
|
||||
// 这里应该调用实际的API接口
|
||||
// 模拟数据
|
||||
setTimeout(() => {
|
||||
this.tableData = [
|
||||
{
|
||||
id: 1,
|
||||
recordName: '记录1',
|
||||
recordDesc: '记录描述1',
|
||||
createTime: '2023-01-01 12:00:00',
|
||||
status: 0
|
||||
}
|
||||
]
|
||||
this.tableConfig.total = 1
|
||||
this.loading = false
|
||||
}, 500)
|
||||
},
|
||||
handleQuery() {
|
||||
this.queryParams.page = 1
|
||||
this.getList()
|
||||
},
|
||||
resetQuery() {
|
||||
this.$refs.queryParams.resetFields()
|
||||
this.handleQuery()
|
||||
},
|
||||
handleView(row) {
|
||||
this.$message.info('查看详情功能待实现')
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
this.queryParams.pageSize = val
|
||||
this.getList()
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.queryParams.page = val
|
||||
this.getList()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.employ-record {
|
||||
padding: 20px;
|
||||
|
||||
.filter-container {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 10px;
|
||||
margin-right: 10px;
|
||||
|
||||
.el-form-item__label {
|
||||
padding-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
225
src/views/applicationManagement/employRule/index.vue
Normal file
225
src/views/applicationManagement/employRule/index.vue
Normal file
@@ -0,0 +1,225 @@
|
||||
<template>
|
||||
<div class="render-container employ-rule">
|
||||
<div class="filter-container">
|
||||
<div class="flex align-items-c justify-content-b">
|
||||
<el-form
|
||||
:model="queryParams"
|
||||
label-width="100px"
|
||||
label-position="top"
|
||||
ref="queryParams"
|
||||
inline
|
||||
>
|
||||
<el-form-item label="规则名称" prop="ruleName">
|
||||
<el-input
|
||||
v-model="queryParams.ruleName"
|
||||
size="medium"
|
||||
placeholder="请输入规则名称"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" size="medium">
|
||||
<el-option label="全部" value=""></el-option>
|
||||
<el-option
|
||||
v-for="item in statusList"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
:key="item.value"
|
||||
></el-option>
|
||||
</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"
|
||||
>查询</el-button
|
||||
>
|
||||
<el-button size="medium" @click="resetQuery">重置</el-button>
|
||||
<el-button size="medium" type="primary" @click="handleAdd"
|
||||
>新增</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<r-table
|
||||
:columns="tableConfig.columns"
|
||||
:data="tableData"
|
||||
:deletion="false"
|
||||
:total="tableConfig.total"
|
||||
@currentChange="handleCurrentChange"
|
||||
@sizeChange="handleSizeChange"
|
||||
:currentPage="tableConfig.currentPage"
|
||||
:pageSize="tableConfig.pageSize"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'EmployRule',
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
queryParams: {
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
ruleName: '',
|
||||
status: ''
|
||||
},
|
||||
statusList: [{ label: '启用', value: 0 }, { label: '停用', value: 1 }],
|
||||
// 表格配置项
|
||||
tableConfig: {
|
||||
total: 0,
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
columns: [
|
||||
{ prop: 'ruleName', key: '规则名称' },
|
||||
{ prop: 'ruleDesc', key: '规则描述' },
|
||||
{ prop: 'createTime', key: '创建时间' },
|
||||
{
|
||||
prop: 'status',
|
||||
key: '状态',
|
||||
render: (h, params) => {
|
||||
return h(
|
||||
'el-tag',
|
||||
{
|
||||
props: {
|
||||
type: params.row.status === 0 ? 'success' : 'danger',
|
||||
size: 'small'
|
||||
}
|
||||
},
|
||||
params.row.status === 0 ? '启用' : '停用'
|
||||
)
|
||||
}
|
||||
},
|
||||
{
|
||||
key: '操作',
|
||||
isRedraw: true,
|
||||
render: (h, params) => {
|
||||
return h('div', [
|
||||
h(
|
||||
'el-button',
|
||||
{
|
||||
props: {
|
||||
type: 'text',
|
||||
size: 'mini',
|
||||
icon: 'el-icon-edit-outline',
|
||||
title: '编辑'
|
||||
},
|
||||
class: 'normal-button',
|
||||
on: { click: () => this.handleEdit(params.row) }
|
||||
},
|
||||
''
|
||||
),
|
||||
h(
|
||||
'el-button',
|
||||
{
|
||||
props: {
|
||||
type: 'text',
|
||||
size: 'mini',
|
||||
icon:
|
||||
params.row.status === 0
|
||||
? 'el-icon-remove-outline'
|
||||
: 'el-icon-circle-check',
|
||||
title: params.row.status === 0 ? '停用' : '启用'
|
||||
},
|
||||
on: { click: () => this.handleToggleStatus(params.row) }
|
||||
}
|
||||
),
|
||||
h('el-button', {
|
||||
props: {
|
||||
type: 'text',
|
||||
size: 'mini',
|
||||
style: 'color: #F56C6C',
|
||||
icon: 'el-icon-delete',
|
||||
title: '删除'
|
||||
},
|
||||
on: { click: () => this.handleDelete(params.row) }
|
||||
})
|
||||
])
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
tableData: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
// 获取列表
|
||||
getList() {
|
||||
this.loading = true
|
||||
// 这里应该调用实际的API接口
|
||||
// 模拟数据
|
||||
setTimeout(() => {
|
||||
this.tableData = [
|
||||
{
|
||||
id: 1,
|
||||
ruleName: '规则1',
|
||||
ruleDesc: '规则描述1',
|
||||
createTime: '2023-01-01 12:00:00',
|
||||
status: 0
|
||||
}
|
||||
]
|
||||
this.tableConfig.total = 1
|
||||
this.loading = false
|
||||
}, 500)
|
||||
},
|
||||
handleQuery() {
|
||||
this.queryParams.page = 1
|
||||
this.getList()
|
||||
},
|
||||
resetQuery() {
|
||||
this.$refs.queryParams.resetFields()
|
||||
this.handleQuery()
|
||||
},
|
||||
handleAdd() {
|
||||
this.$message.info('新增功能待实现')
|
||||
},
|
||||
handleEdit(row) {
|
||||
this.$message.info('编辑功能待实现')
|
||||
},
|
||||
handleToggleStatus(row) {
|
||||
this.$message.info('状态切换功能待实现')
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
this.queryParams.pageSize = val
|
||||
this.getList()
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.queryParams.page = val
|
||||
this.getList()
|
||||
},
|
||||
handleDelete(row) {
|
||||
this.$messageBox(
|
||||
() => {
|
||||
this.$message.success('删除成功')
|
||||
this.getList()
|
||||
},
|
||||
'确认删除该规则吗？',
|
||||
'warning',
|
||||
'警告'
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.employ-rule {
|
||||
padding: 20px;
|
||||
|
||||
.filter-container {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 10px;
|
||||
margin-right: 10px;
|
||||
|
||||
.el-form-item__label {
|
||||
padding-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user