From 7eaa49afbc214fbc79560137f556538cac691845 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 10:08:39 +0800
Subject: [PATCH] =?UTF-8?q?feat(router):=20=E6=B7=BB=E5=8A=A0=E5=BA=94?=
 =?UTF-8?q?=E7=94=A8=E7=AE=A1=E7=90=86=E7=9B=B8=E5=85=B3=E8=B7=AF=E7=94=B1?=
 =?UTF-8?q?=E5=92=8C=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在 router/index.js 中引入应用管理路由
- 新增应用管理路由配置文件 applicationManagement.js
- 实现雇则风筛规则和雇则风筛记录两个页面组件
- 添加表格数据加载、查询、重置等功能- 实现新增、编辑、删除等操作的模拟
---
 .../generatedRouter/applicationManagement.js  |  29 +++
 src/router/index.js                           |   7 +-
 .../employRecord/index.vue                    | 180 ++++++++++++++
 .../employRule/index.vue                      | 225 ++++++++++++++++++
 4 files changed, 440 insertions(+), 1 deletion(-)
 create mode 100644 src/router/generatedRouter/applicationManagement.js
 create mode 100644 src/views/applicationManagement/employRecord/index.vue
 create mode 100644 src/views/applicationManagement/employRule/index.vue

diff --git a/src/router/generatedRouter/applicationManagement.js b/src/router/generatedRouter/applicationManagement.js
new file mode 100644
index 0000000..ac6453e
--- /dev/null
+++ b/src/router/generatedRouter/applicationManagement.js
@@ -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
diff --git a/src/router/index.js b/src/router/index.js
index 6fa3613..c3bc81b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -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,
diff --git a/src/views/applicationManagement/employRecord/index.vue b/src/views/applicationManagement/employRecord/index.vue
new file mode 100644
index 0000000..239fcf1
--- /dev/null
+++ b/src/views/applicationManagement/employRecord/index.vue
@@ -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>
\ No newline at end of file
diff --git a/src/views/applicationManagement/employRule/index.vue b/src/views/applicationManagement/employRule/index.vue
new file mode 100644
index 0000000..9effebe
--- /dev/null
+++ b/src/views/applicationManagement/employRule/index.vue
@@ -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>
\ No newline at end of file