feat: 添加管理规定与通知

src/router/routers/traffic.ts

@@ -49,7 +49,7 @@ const trafficRoutes = {
       parentId: 4000,
       name: 'traffic-regulation-item',
       path: 'regulation-item',
-      component: '/traffic/regulation-item/RegulationItem',
+      component: '/traffic/regulation/RegulationItem',
       redirect: '',
       meta: {
         title: '管理规定与通知详情',
@@ -93,7 +93,7 @@ const trafficRoutes = {
           name: 'traffic-violation-act-item',
           path: 'act-item',
 
-          component: '/traffic/violation/act-item/ActItem',
+          component: '/traffic/violation/act/ActItem',
           meta: {
             activeMenu: '/traffic/violation/act',
             title: '违规行为详情',

src/views/traffic/regulation/Regulation.vue

@@ -1,7 +1,49 @@
 <template>
-  <div> </div>
+  <div class="safety-platform-container">
+    <header class="safety-platform-container__header">
+      <div class="breadcrumb-title"> 交通管理规定与通知 </div>
+      <el-tabs v-model="activeName">
+        <el-tab-pane
+          v-for="item in TRAFFIC_REGULATION_SUBPAGES"
+          :key="item.value"
+          :label="item.label"
+          :name="item.value"
+        />
+      </el-tabs>
+    </header>
+    <main class="safety-platform-container__main">
+      <component :is="dynamicComponent" ref="dynamicComponentRef" />
+    </main>
+  </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+  import { ref, computed, defineAsyncComponent } from 'vue';
+  import { TRAFFIC_REGULATION_SUBPAGES } from './constants';
 
-<style scoped></style>
+  const activeName = ref(TRAFFIC_REGULATION_SUBPAGES[0].value);
+
+  const dynamicComponent = computed(() => {
+    switch (activeName.value) {
+      case TRAFFIC_REGULATION_SUBPAGES[0].value:
+        return defineAsyncComponent(() => import('./components/RegulationTable.vue'));
+      case TRAFFIC_REGULATION_SUBPAGES[1].value:
+        return defineAsyncComponent(() => import('./components/NoticeTable.vue'));
+    }
+  });
+</script>
+
+<style scoped lang="scss">
+  @use '@/styles/page-details-layout.scss' as *;
+  @use '@/styles/page-main-layout.scss' as *;
+  @use '@/styles/basic-table-action.scss' as *;
+  .safety-platform-container__header {
+    padding-bottom: 0 !important;
+  }
+  :deep(.el-tabs__header) {
+    margin: 0;
+  }
+  :deep(.el-tabs__item) {
+    font-size: 14px !important;
+  }
+</style>

src/views/traffic/regulation/RegulationItem.vue

@@ -1,7 +1,68 @@
 <template>
-  <div> </div>
+  <div class="safety-platform-container">
+    <header class="safety-platform-container__header">
+      <BreadcrumbBack />
+      <span class="breadcrumb-title">{{ headerTitle }}</span>
+    </header>
+    <main class="safety-platform-container__main">
+      <component :is="dynamicComponent" ref="dynamicComponentRef" @record-submitted="handleRecordSubmitted" />
+    </main>
+    <!-- <footer class="safety-platform-container__footer">
+    </footer> -->
+    <UploadLoading :form-loading="formLoading" v-if="formLoading" />
+  </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+  import { ref, computed, defineAsyncComponent } from 'vue';
+  import { useRoute } from 'vue-router';
+  import UploadLoading from '@/components/UploadLoading.vue';
 
-<style scoped></style>
+  const formLoading = ref(false);
+  const route = useRoute();
+  const operate = route.query.operate;
+  const headerTitle = computed(() => {
+    switch (operate) {
+      case 'regulation-create':
+        return `创建管理规定`;
+      case 'regulation-edit':
+        return `编辑管理规定`;
+      case 'notice-create':
+        return `创建通知`;
+      case 'notice-edit':
+        return `编辑通知`;
+      default:
+        return '未知操作';
+    }
+  });
+
+  const dynamicComponent = computed(() => {
+    switch (operate) {
+      case 'regulation-create':
+        return defineAsyncComponent(() => import('./components/RegulationCreate.vue'));
+      case 'regulation-edit':
+        return defineAsyncComponent(() => import('./components/RegulationEdit.vue'));
+      case 'notice-create':
+        return defineAsyncComponent(() => import('./components/NoticeCreate.vue'));
+      case 'notice-edit':
+        return defineAsyncComponent(() => import('./components/NoticeEdit.vue'));
+      default:
+        return '';
+    }
+  });
+
+  const dynamicComponentRef = ref();
+
+  function handleRecordSubmitted() {}
+</script>
+
+<style scoped lang="scss">
+  @use '@/styles/page-details-layout.scss' as *;
+  @use '@/styles/page-main-layout.scss' as *;
+
+  .safety-platform-container__header {
+    flex-direction: row !important;
+    justify-content: flex-start !important;
+    gap: 8px !important;
+  }
+</style>

src/views/traffic/regulation/components/NoticeCreate.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>创建管理通知</div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>

src/views/traffic/regulation/components/NoticeEdit.vue

@@ -0,0 +1,7 @@
+<template>
+  <div></div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss"></style>

src/views/traffic/regulation/components/NoticeTable.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="search-table-container">
+    <header>
+      <!-- 按钮 -->
+      <el-button type="primary" class="search-table-container--button" :icon="Plus" @click="handleCreateNotice">
+        新建管理通知
+      </el-button>
+
+      <div class="regulation-search">
+        <el-input
+          class="regulation-search-input"
+          v-model="searchData"
+          placeholder="输入通知标题或文件夹名称"
+          :prefix-icon="Search"
+          clearable
+        >
+        </el-input>
+        <el-button type="primary" @click="getTabelData"> 查询 </el-button>
+      </div>
+    </header>
+    <!-- 表格 -->
+    <BasicTable
+      :tableConfig="tableConfig"
+      :tableData="tableData"
+      @update:pageSize="handleSizeChange"
+      @update:pageNumber="handleCurrentChange"
+    >
+    </BasicTable>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import BasicTable from '@/components/BasicTable.vue';
+  import useTableConfig from '@/hooks/useTableConfigHook';
+  import { TABLE_OPTIONS, REGULATION_TABLE_COLUMNS } from '../configs/tables';
+  import { ref, reactive, onMounted } from 'vue';
+  import { Search, Plus } from '@element-plus/icons-vue';
+  import { useRouter } from 'vue-router';
+
+  const router = useRouter();
+
+  // 搜索栏
+  const searchData = ref('');
+  function handleSearch() {
+    tabelQuery.value.queryParam = searchData;
+    getTabelData();
+  }
+
+  // 表格
+  const { tableConfig, pagination } = useTableConfig(REGULATION_TABLE_COLUMNS, TABLE_OPTIONS);
+
+  const tableData = ref<any[]>([]);
+
+  const tabelQuery = ref({
+    pageNumber: pagination.pageNumber,
+    pageSize: pagination.pageSize,
+    queryParam: {},
+  });
+
+  const handleSizeChange = (value: number) => {
+    pagination.pageSize = value;
+    tabelQuery.value.pageSize = value;
+    getTabelData();
+  };
+  const handleCurrentChange = (value: number) => {
+    pagination.pageNumber = value;
+    tabelQuery.value.pageSize = value;
+    getTabelData();
+  };
+
+  async function getTabelData() {}
+
+  onMounted(async () => {
+    getTabelData();
+  });
+
+  function handleCreateNotice() {
+    router.push({
+      name: 'traffic-regulation-item',
+      query: {
+        operate: 'notice-create',
+      },
+    });
+  }
+</script>
+
+<style scoped lang="scss">
+  @use '@/styles/page-main-layout.scss' as *;
+  .regulation-search-input {
+    max-width: 500px;
+  }
+  .regulation-search {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+  }
+</style>

src/views/traffic/regulation/components/RegulationCreate.vue

@@ -0,0 +1,7 @@
+<template>
+  <div> </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>

src/views/traffic/regulation/components/RegulationEdit.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>创建管理规定</div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>

src/views/traffic/regulation/components/RegulationTable.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="search-table-container">
+    <header>
+      <!-- 按钮 -->
+      <el-button type="primary" class="search-table-container--button" :icon="Plus" @click="handleCreateRegulation">
+        创建演练计划
+      </el-button>
+
+      <div class="regulation-search">
+        <el-input
+          class="regulation-search-input"
+          v-model="searchData"
+          placeholder="输入规定标题或文件夹名称"
+          :prefix-icon="Search"
+          clearable
+        >
+        </el-input>
+        <el-button type="primary" @click="getTabelData"> 查询 </el-button>
+      </div>
+    </header>
+    <!-- 表格 -->
+    <BasicTable
+      :tableConfig="tableConfig"
+      :tableData="tableData"
+      @update:pageSize="handleSizeChange"
+      @update:pageNumber="handleCurrentChange"
+    >
+    </BasicTable>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import BasicTable from '@/components/BasicTable.vue';
+  import useTableConfig from '@/hooks/useTableConfigHook';
+  import { TABLE_OPTIONS, REGULATION_TABLE_COLUMNS } from '../configs/tables';
+  import { ref, reactive, onMounted } from 'vue';
+  import { Search, Plus } from '@element-plus/icons-vue';
+  import { useRouter } from 'vue-router';
+
+  const router = useRouter();
+
+  // 搜索栏
+  const searchData = ref('');
+  function handleSearch() {
+    tabelQuery.value.queryParam = searchData;
+    getTabelData();
+  }
+
+  // 表格
+  const { tableConfig, pagination } = useTableConfig(REGULATION_TABLE_COLUMNS, TABLE_OPTIONS);
+
+  const tableData = ref<any[]>([]);
+
+  const tabelQuery = ref({
+    pageNumber: pagination.pageNumber,
+    pageSize: pagination.pageSize,
+    queryParam: {},
+  });
+
+  const handleSizeChange = (value: number) => {
+    pagination.pageSize = value;
+    tabelQuery.value.pageSize = value;
+    getTabelData();
+  };
+  const handleCurrentChange = (value: number) => {
+    pagination.pageNumber = value;
+    tabelQuery.value.pageSize = value;
+    getTabelData();
+  };
+
+  async function getTabelData() {}
+
+  onMounted(async () => {
+    getTabelData();
+  });
+
+  function handleCreateRegulation() {
+    router.push({
+      name: 'traffic-regulation-item',
+      query: {
+        operate: 'regulation-create',
+      },
+    });
+  }
+</script>
+
+<style scoped lang="scss">
+  @use '@/styles/page-main-layout.scss' as *;
+  .regulation-search-input {
+    max-width: 500px;
+  }
+  .regulation-search {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+  }
+</style>

src/views/traffic/regulation/configs/search.ts

@@ -0,0 +1 @@
+import type { SearchConfig } from '@/types/basic-search';

src/views/traffic/regulation/configs/tables.ts

@@ -0,0 +1,98 @@
+import type { TableColumnProps } from '@/types/basic-table';
+
+// 基础表格样式配置
+export const TABLE_OPTIONS = {
+  emptyText: '暂无数据',
+  loading: true,
+  maxHeight: 'calc(70vh - 150px)',
+};
+
+export const REGULATION_TABLE_COLUMNS: TableColumnProps[] = [
+  {
+    label: '序号',
+    align: 'center',
+    width: '80px',
+    type: 'index',
+  },
+  {
+    label: '规定名称',
+    prop: 'regulationName',
+    slot: 'regulationName',
+    align: 'center',
+    minWidth: '120px',
+  },
+
+  {
+    label: '规定文件',
+    prop: 'regulationDocument',
+    slot: 'regulationDocument',
+    align: 'center',
+    minWidth: '120px',
+  },
+  {
+    label: '生效状态',
+    prop: 'status',
+    align: 'center',
+    minWidth: '120px',
+  },
+  {
+    label: '发布时间',
+    prop: 'dueCompleteTime',
+    align: 'center',
+    width: '200px',
+  },
+
+  {
+    label: '操作',
+    prop: 'action',
+    slot: 'action',
+    fixed: 'right',
+    width: '200px',
+    align: 'center',
+  },
+];
+
+export const NOTICE_TABLE_COLUMNS: TableColumnProps[] = [
+  {
+    label: '序号',
+    align: 'center',
+    width: '80px',
+    type: 'index',
+  },
+  {
+    label: '通知标题',
+    prop: 'noticeName',
+    slot: 'noticeName',
+    align: 'center',
+    minWidth: '120px',
+  },
+
+  {
+    label: '通知文件',
+    prop: 'noticeDocument',
+    slot: 'noticeDocument',
+    align: 'center',
+    minWidth: '120px',
+  },
+  {
+    label: '生效状态',
+    prop: 'status',
+    align: 'center',
+    minWidth: '120px',
+  },
+  {
+    label: '发布时间',
+    prop: 'dueCompleteTime',
+    align: 'center',
+    width: '200px',
+  },
+
+  {
+    label: '操作',
+    prop: 'action',
+    slot: 'action',
+    fixed: 'right',
+    width: '200px',
+    align: 'center',
+  },
+];

src/views/traffic/regulation/constants.ts

@@ -0,0 +1,10 @@
+export const TRAFFIC_REGULATION_SUBPAGES = [
+  {
+    label: '管理规定',
+    value: 'regulation',
+  },
+  {
+    label: '管理通知',
+    value: 'notice',
+  },
+];