feat: 添加交通违规 违规行为

src/components/formItems/selectableInput/SelectableInput.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="selectable-input-container">
+    <el-input
+      v-model="modelValue"
+      style="width: 360px"
+      :placeholder="placeholder || '请输入' + selectValue.label"
+      clearable
+    >
+      <template #prepend>
+        <el-select v-model="selectValue" style="width: 100px" value-key="value" :validate-event="false">
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :value="item"
+            :label="item.label"
+            :disabled="item.disabled"
+          />
+        </el-select>
+      </template>
+    </el-input>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+
+  const props = defineProps<{
+    placeholder?: string;
+    options: SelectOption[]; // options.value为选择的键
+  }>();
+
+  const modelValue = ref(''); // modelValue 为选择的值
+  const selectValue = ref<SelectOption>(props.options[0]);
+
+  function setValue(key: string, val: string) {
+    if (!props.options.some((item) => item.value === key)) return;
+    selectValue.value = props.options.find((item) => item.value === key)!;
+    modelValue.value = val;
+  }
+
+  function getValue() {
+    return {
+      key: selectValue.value.value,
+      value: modelValue.value,
+    };
+  }
+
+  defineExpose({
+    setValue,
+    getValue,
+  });
+</script>
+
+<style scoped></style>

src/views/traffic/regulation/RegulationItem.vue

@@ -39,8 +39,7 @@
       case 'regulation-edit':
         return defineAsyncComponent(() => import('./components/RegulationEdit.vue'));
       case 'notice-create':
-        return defineAsyncComponent(() => import('./components/NoticeView.vue'));
-      // return defineAsyncComponent(() => import('./components/NoticeCreate.vue'));
+        return defineAsyncComponent(() => import('./components/NoticeCreate.vue'));
       case 'notice-edit':
         return defineAsyncComponent(() => import('./components/NoticeEdit.vue'));
       case 'notice-view':

src/views/traffic/violation/act/Act.vue

@@ -1,7 +1,135 @@
 <template>
-  <div> </div>
+  <div class="safety-platform-container">
+    <header class="safety-platform-container__header">
+      <div class="breadcrumb-title"> 违规行为记录 </div>
+    </header>
+    <main class="safety-platform-container__main">
+      <div class="search-table-container">
+        <header>
+          <!-- 按钮 -->
+          <el-button type="primary" class="search-table-container--button" :icon="Plus" @click=""> 新建记录 </el-button>
+          <el-button plain class="search-table-container--button" @click=""> 批量导入 </el-button>
+
+          <div class="act-search">
+            <section class="select-box">
+              <SelectableInput :options="ACT_TABLE_SEARCH_OPTIONS" />
+              <span>违规类型：</span>
+              <el-select v-model="searchData.actName" placeholder="请选择违规类型" class="select-box--select">
+              </el-select>
+              <span>通知状态：</span>
+              <el-select v-model="searchData.status" placeholder="请选择通知状态" class="select-box--select">
+              </el-select>
+              <el-date-picker
+                v-model="searchData.actTime"
+                type="datetimerange"
+                range-separator="至"
+                start-placeholder="开始时间"
+                end-placeholder="结束时间"
+              />
+            </section>
+            <section class="search-btn">
+              <el-button type="primary" @click="handleSearch">查询</el-button>
+              <el-button @click="">重置</el-button>
+              <el-button @click="">导出</el-button>
+            </section>
+          </div>
+        </header>
+        <!-- 表格 -->
+        <BasicTable
+          :tableConfig="tableConfig"
+          :tableData="tableData"
+          @update:pageSize="handleSizeChange"
+          @update:pageNumber="handleCurrentChange"
+        >
+        </BasicTable>
+      </div>
+    </main>
+  </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+  import BasicTable from '@/components/BasicTable.vue';
+  import useTableConfig from '@/hooks/useTableConfigHook';
+  import SelectableInput from '@/components/formItems/selectableInput/SelectableInput.vue';
+  import { TABLE_OPTIONS, VIOLATION_ACT_TABLE_COLUMNS } from './configs/tables';
+  import { ACT_TABLE_SEARCH_OPTIONS } from './constants';
+  import { ref, reactive, onMounted } from 'vue';
+  import { Search, Plus } from '@element-plus/icons-vue';
+  import { useRouter } from 'vue-router';
+
+  const router = useRouter();
+
+  // 搜索栏
+  const searchData = reactive<any>({
+    actName: null,
+    status: null,
+    actTime: null,
+  });
+  function handleSearch() {
+    // tabelQuery.value.queryParam = {};
+    // if (searchData.plateNo) {
+    //   tabelQuery.value.queryParam.plateNo = searchData.plateNo;
+    // }
+    getTabelData();
+  }
+  // 表格
+  const { tableConfig, pagination } = useTableConfig(VIOLATION_ACT_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></style>
+<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 *;
+  .act-search-input {
+    max-width: 500px;
+  }
+  .act-search {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+  }
+  .select-box {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 32px;
+  }
+  .search-btn {
+    display: flex;
+  }
+</style>

src/views/traffic/violation/act/configs/tables.ts

@@ -0,0 +1,87 @@
+import type { TableColumnProps } from '@/types/basic-table';
+
+// 基础表格样式配置
+export const TABLE_OPTIONS = {
+  emptyText: '暂无数据',
+  loading: true,
+  maxHeight: 'calc(70vh - 150px)',
+};
+
+export const VIOLATION_ACT_TABLE_COLUMNS: TableColumnProps[] = [
+  {
+    label: '序号',
+    align: 'center',
+    width: '80px',
+    type: 'index',
+  },
+  {
+    label: '车主',
+    prop: 'driverName',
+    align: 'center',
+    width: '80px',
+  },
+  {
+    label: '车牌号',
+    prop: 'vehicleNo',
+    align: 'center',
+    width: '80px',
+  },
+  {
+    label: '所属部门',
+    prop: 'deptName',
+    align: 'center',
+    width: '80px',
+  },
+  {
+    label: '违规类型',
+    prop: 'actName',
+    align: 'center',
+    width: '80px',
+  },
+  {
+    label: '车速',
+    prop: 'speed',
+    align: 'center',
+    minWidth: '120px',
+  },
+
+  {
+    label: '抓拍图片',
+    prop: 'actPic',
+    slot: 'actPic',
+    align: 'center',
+    minWidth: '120px',
+  },
+  {
+    label: '违规地点',
+    prop: 'actPosition',
+    align: 'center',
+    minWidth: '120px',
+  },
+  {
+    label: '时间',
+    prop: 'actTime',
+    align: 'center',
+    width: '200px',
+  },
+  {
+    label: '数据来源',
+    prop: 'dataSource',
+    align: 'center',
+    width: '200px',
+  },
+  {
+    label: '通知状态',
+    prop: 'status',
+    align: 'center',
+    width: '200px',
+  },
+  {
+    label: '操作',
+    prop: 'action',
+    slot: 'action',
+    fixed: 'right',
+    width: '200px',
+    align: 'center',
+  },
+];

src/views/traffic/violation/act/constants.ts

@@ -0,0 +1,17 @@
+export const ACT_TABLE_SEARCH_OPTIONS: SelectOption[] = [
+  {
+    label: '车牌号',
+    value: 'vehicleNo',
+    disabled: false,
+  },
+  {
+    label: '车主',
+    value: 'driverName',
+    disabled: false,
+  },
+  {
+    label: '所属部门',
+    value: 'deptName',
+    disabled: false,
+  },
+];