|
|
@@ -6,26 +6,51 @@
|
|
|
<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>
|
|
|
+ <el-button type="primary" class="search-table-container--button" :icon="Plus" @click="handleCreateAct">
|
|
|
+ 新建记录
|
|
|
+ </el-button>
|
|
|
+ <el-button plain class="search-table-container--button" @click=""> 批量导入 </el-button>
|
|
|
+ <RealtimeNotice />
|
|
|
+ </div>
|
|
|
|
|
|
<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="结束时间"
|
|
|
- />
|
|
|
+ <SelectableInput ref="selectableInputRef" :options="ACT_TABLE_SEARCH_OPTIONS" />
|
|
|
+ <div class="select-box--item">
|
|
|
+ <span>违规类型:</span>
|
|
|
+ <el-select v-model="searchData.violationType" placeholder="请选择违规类型" class="select-box--select">
|
|
|
+ <el-option
|
|
|
+ v-for="item in ACT_VIOLATION_TYPE_OPTIONS"
|
|
|
+ :key="item.value"
|
|
|
+ :value="item"
|
|
|
+ :label="item.label"
|
|
|
+ :disabled="item.disabled"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="select-box--item">
|
|
|
+ <span>通知状态:</span>
|
|
|
+ <el-select v-model="searchData.isNotice" placeholder="请选择通知状态" class="select-box--select">
|
|
|
+ <el-option
|
|
|
+ v-for="item in ACT_NOTICE_STATE_OPTIONS"
|
|
|
+ :key="item.value"
|
|
|
+ :value="item"
|
|
|
+ :label="item.label"
|
|
|
+ :disabled="item.disabled"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span>时间:</span>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="searchData.searchTime"
|
|
|
+ type="datetimerange"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始时间"
|
|
|
+ end-placeholder="结束时间"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</section>
|
|
|
<section class="search-btn">
|
|
|
<el-button type="primary" @click="handleSearch">查询</el-button>
|
|
|
@@ -36,11 +61,52 @@
|
|
|
</header>
|
|
|
<!-- 表格 -->
|
|
|
<BasicTable
|
|
|
- :tableConfig="tableConfig"
|
|
|
:tableData="tableData"
|
|
|
+ :tableConfig="tableConfig"
|
|
|
@update:pageSize="handleSizeChange"
|
|
|
@update:pageNumber="handleCurrentChange"
|
|
|
+ @update:selection="handleSelectionChange"
|
|
|
>
|
|
|
+ <template #violateType="scope">
|
|
|
+ <span>{{ ACT_VIOLATION_TYPE_LABEL[scope.row.violateType] }}</span>
|
|
|
+ </template>
|
|
|
+ <template #capturePhotos="scope"> </template>
|
|
|
+ <template #createSource="scope">
|
|
|
+ <span>{{ ACT_NOTICE_DATA_SOURCE_LABEL[scope.row.createSource] }}</span>
|
|
|
+ </template>
|
|
|
+ <template #isNotice="scope">
|
|
|
+ <div class="notice-state">
|
|
|
+ <div
|
|
|
+ :style="{
|
|
|
+ backgroundColor: ACT_NOTICE_STATE_COLOR[scope.row.isNotice],
|
|
|
+ width: '6px',
|
|
|
+ height: '6px',
|
|
|
+ borderRadius: '50%',
|
|
|
+ marginRight: '5px',
|
|
|
+ }"
|
|
|
+ ></div>
|
|
|
+ <span>{{ ACT_NOTICE_STATE_LABEL[scope.row.isNotice] }}</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #action="scope">
|
|
|
+ <ActionButton
|
|
|
+ v-if="scope.row.isNotice === ACT_NOTICE_STATE.INACTIVE"
|
|
|
+ text="编辑"
|
|
|
+ @click="handleEditAct(scope.row.id)"
|
|
|
+ />
|
|
|
+ <ActionButton
|
|
|
+ v-if="scope.row.isNotice === ACT_NOTICE_STATE.INACTIVE"
|
|
|
+ text="通知"
|
|
|
+ @click="handleNoticeAct(scope.row.id)"
|
|
|
+ />
|
|
|
+ <ActionButton
|
|
|
+ text="删除"
|
|
|
+ :popconfirm="{
|
|
|
+ title: '确定要删除?',
|
|
|
+ }"
|
|
|
+ @confirm="handleDeleteAct(scope.row.id)"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
</BasicTable>
|
|
|
</div>
|
|
|
</main>
|
|
|
@@ -51,63 +117,162 @@
|
|
|
import BasicTable from '@/components/BasicTable.vue';
|
|
|
import useTableConfig from '@/hooks/useTableConfigHook';
|
|
|
import SelectableInput from '@/components/formItems/selectableInput/SelectableInput.vue';
|
|
|
+ import ActionButton from '@/components/ActionButton.vue';
|
|
|
+ import RealtimeNotice from './components/RealtimeNotice.vue';
|
|
|
+ import { ElMessage } from 'element-plus';
|
|
|
import { TABLE_OPTIONS, VIOLATION_ACT_TABLE_COLUMNS } from './configs/tables';
|
|
|
- import { ACT_TABLE_SEARCH_OPTIONS } from './constants';
|
|
|
+ import {
|
|
|
+ ACT_NOTICE_DATA_SOURCE_LABEL,
|
|
|
+ ACT_VIOLATION_TYPE,
|
|
|
+ ACT_VIOLATION_TYPE_LABEL,
|
|
|
+ ACT_TABLE_SEARCH_OPTIONS,
|
|
|
+ ACT_VIOLATION_TYPE_OPTIONS,
|
|
|
+ ACT_NOTICE_STATE_OPTIONS,
|
|
|
+ ACT_NOTICE_STATE,
|
|
|
+ ACT_NOTICE_STATE_LABEL,
|
|
|
+ ACT_NOTICE_STATE_COLOR,
|
|
|
+ } from './constants';
|
|
|
import { ref, reactive, onMounted } from 'vue';
|
|
|
import { Search, Plus } from '@element-plus/icons-vue';
|
|
|
import { useRouter } from 'vue-router';
|
|
|
+ import { openMessageBox } from '@/utils/element-plus/messageBox';
|
|
|
+ import type { QueryPageRequest } from '@/types/basic-query';
|
|
|
+ import type { ActTableSearch, ActTableQuery, ActTableData, UpdateActQuery } from './types';
|
|
|
+ import { getActTableList, noticeActData, deleteActData } from '@/api/traffic-violation/traffic-act';
|
|
|
+ import dayjs from 'dayjs';
|
|
|
|
|
|
const router = useRouter();
|
|
|
|
|
|
// 搜索栏
|
|
|
- const searchData = reactive<any>({
|
|
|
- actName: null,
|
|
|
- status: null,
|
|
|
- actTime: null,
|
|
|
- });
|
|
|
+ const selectableInputRef = ref<InstanceType<typeof SelectableInput>>();
|
|
|
+ const searchData = reactive<ActTableSearch>({});
|
|
|
function handleSearch() {
|
|
|
- // tabelQuery.value.queryParam = {};
|
|
|
- // if (searchData.plateNo) {
|
|
|
- // tabelQuery.value.queryParam.plateNo = searchData.plateNo;
|
|
|
- // }
|
|
|
+ if (!selectableInputRef.value) return;
|
|
|
+ tabelQuery.queryParam = {
|
|
|
+ pageType: 1,
|
|
|
+ };
|
|
|
+ const selectableSearch = selectableInputRef.value.getValue();
|
|
|
+ if (selectableSearch) {
|
|
|
+ tabelQuery.queryParam[selectableSearch.key as string] = selectableSearch.value;
|
|
|
+ }
|
|
|
+ if (searchData.isNotice) {
|
|
|
+ tabelQuery.queryParam.isNotice = searchData.isNotice;
|
|
|
+ }
|
|
|
+ if (searchData.violationType) {
|
|
|
+ tabelQuery.queryParam.violationType = searchData.violationType;
|
|
|
+ }
|
|
|
+ if (searchData.searchTime) {
|
|
|
+ tabelQuery.queryParam.startTime = dayjs(searchData.searchTime[0]).format('YYYY-MM-DD HH:MM:ss');
|
|
|
+ tabelQuery.queryParam.endTime = dayjs(searchData.searchTime[1]).format('YYYY-MM-DD HH:MM:ss');
|
|
|
+ }
|
|
|
getTabelData();
|
|
|
}
|
|
|
+
|
|
|
// 表格
|
|
|
+ const basicTableRef = ref<InstanceType<typeof BasicTable>>();
|
|
|
+
|
|
|
const { tableConfig, pagination } = useTableConfig(VIOLATION_ACT_TABLE_COLUMNS, TABLE_OPTIONS);
|
|
|
|
|
|
- const tableData = ref<any[]>([]);
|
|
|
+ const tableData = ref<ActTableData[]>([]);
|
|
|
|
|
|
- const tabelQuery = ref({
|
|
|
+ const tabelQuery = reactive<QueryPageRequest<ActTableQuery>>({
|
|
|
pageNumber: pagination.pageNumber,
|
|
|
pageSize: pagination.pageSize,
|
|
|
- queryParam: {},
|
|
|
+ queryParam: {
|
|
|
+ pageType: 1,
|
|
|
+ },
|
|
|
});
|
|
|
|
|
|
const handleSizeChange = (value: number) => {
|
|
|
- pagination.pageSize = value;
|
|
|
- tabelQuery.value.pageSize = value;
|
|
|
+ pagination.pageNumber = value;
|
|
|
+ tabelQuery.pageSize = value;
|
|
|
getTabelData();
|
|
|
};
|
|
|
const handleCurrentChange = (value: number) => {
|
|
|
pagination.pageNumber = value;
|
|
|
- tabelQuery.value.pageSize = value;
|
|
|
+ tabelQuery.pageSize = value;
|
|
|
getTabelData();
|
|
|
};
|
|
|
|
|
|
- async function getTabelData() {}
|
|
|
+ const handleSelectionChange = (value: any[]) => {};
|
|
|
+
|
|
|
+ // const handleCloseBatchOperation = () => {
|
|
|
+ // if (!basicTableRef.value) return;
|
|
|
+ // basicTableRef.value.clearSelection();
|
|
|
+ // };
|
|
|
+
|
|
|
+ // const handleBatchNotice = async () => {
|
|
|
+ // const confirmed = await openMessageBox('', '确认通知任务吗?', 'warning');
|
|
|
+ // if (!confirmed) return;
|
|
|
+ // const noticeIds = getSelectionIds(ACTIVE_STATUS.NOT_EFFECTIVE);
|
|
|
+ // await noticeActData(noticeIds);
|
|
|
+ // ElMessage.success('批量通知成功');
|
|
|
+ // getTableData();
|
|
|
+ // };
|
|
|
+ // const handleBatchDelete = async () => {
|
|
|
+ // const confirmed = await openMessageBox('', '删除后任务不可恢复,确认删除吗?', 'warning');
|
|
|
+ // if (!confirmed) return;
|
|
|
+ // const deleteIds = getSelectionIds(ACTIVE_STATUS.NOT_EFFECTIVE);
|
|
|
+ // await deleteActData(deleteIds);
|
|
|
+ // ElMessage.success('批量删除成功');
|
|
|
+ // getTableData();
|
|
|
+ // };
|
|
|
+
|
|
|
+ async function getTabelData() {
|
|
|
+ tableConfig.loading = true;
|
|
|
+ const res = await getActTableList(tabelQuery);
|
|
|
+ tableData.value = res.records;
|
|
|
+ pagination.total = res.totalRow;
|
|
|
+ tableConfig.loading = false;
|
|
|
+ }
|
|
|
|
|
|
onMounted(async () => {
|
|
|
- getTabelData();
|
|
|
+ await getTabelData();
|
|
|
});
|
|
|
|
|
|
- function handleCreateRegulation() {
|
|
|
+ function handleCreateAct() {
|
|
|
router.push({
|
|
|
- name: 'traffic-regulation-item',
|
|
|
+ name: 'traffic-violation-act-item',
|
|
|
query: {
|
|
|
- operate: 'regulation-create',
|
|
|
+ operate: 'act-create',
|
|
|
},
|
|
|
});
|
|
|
}
|
|
|
+
|
|
|
+ function handleEditAct(id: number) {
|
|
|
+ router.push({
|
|
|
+ name: 'traffic-violation-act-item',
|
|
|
+ query: {
|
|
|
+ id,
|
|
|
+ operate: 'act-edit',
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }
|
|
|
+ async function handleNoticeAct(id: number) {
|
|
|
+ tableConfig.loading = true;
|
|
|
+ try {
|
|
|
+ await noticeActData(id);
|
|
|
+ } catch (e) {
|
|
|
+ ElMessage.error('通知失败');
|
|
|
+ return;
|
|
|
+ } finally {
|
|
|
+ tableConfig.loading = false;
|
|
|
+ }
|
|
|
+ getTabelData();
|
|
|
+ }
|
|
|
+
|
|
|
+ async function handleDeleteAct(id: number) {
|
|
|
+ tableConfig.loading = true;
|
|
|
+ try {
|
|
|
+ await deleteActData(id);
|
|
|
+ } catch (e) {
|
|
|
+ ElMessage.error('删除失败');
|
|
|
+ return;
|
|
|
+ } finally {
|
|
|
+ tableConfig.loading = false;
|
|
|
+ }
|
|
|
+ getTabelData();
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
@@ -128,8 +293,25 @@
|
|
|
align-items: center;
|
|
|
flex-wrap: wrap;
|
|
|
gap: 32px;
|
|
|
+ &--item {
|
|
|
+ @include flex-center;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ color: rgba(0, 0, 0, 0.85);
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .el-select {
|
|
|
+ width: 200px;
|
|
|
+ }
|
|
|
}
|
|
|
.search-btn {
|
|
|
display: flex;
|
|
|
}
|
|
|
+
|
|
|
+ .notice-state {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-self: center;
|
|
|
+ }
|
|
|
</style>
|