|
|
@@ -14,19 +14,22 @@
|
|
|
:searchData="searchData"
|
|
|
@update:searchData="handleSearch"
|
|
|
/>
|
|
|
- <div
|
|
|
- style="width: 100%; height: 20px; background-color: red; margin-top: 20px"
|
|
|
- v-show="selectedIds.length > 0"
|
|
|
- >
|
|
|
- <span>{{ selectedIds.length }}项</span>
|
|
|
+ <div class="batch-operation--div fadeIn" v-show="selectionItems.length > 0">
|
|
|
+ <span>已选{{ selectionItems.length }}项</span>
|
|
|
+ <div class="batch-operation--div--button">
|
|
|
+ <el-button type="success" v-show="isBatchPublish" @click="handleBatchPublish">批量发布</el-button>
|
|
|
+ <el-button type="primary" v-show="isBatchWithdraw" @click="handleBatchWithdraw">批量撤回</el-button>
|
|
|
+ <el-button type="danger" @click="handleBatchDelete">批量删除</el-button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</header>
|
|
|
<BasicTable
|
|
|
+ ref="basicTableRef"
|
|
|
:table-config="tableConfig"
|
|
|
:table-data="tableData"
|
|
|
@update:pageSize="handleSizeChange"
|
|
|
@update:pageNumber="handleCurrentChange"
|
|
|
- @update:selectedIds="handleSelectedIds"
|
|
|
+ @update:selection="handleSelectionChange"
|
|
|
>
|
|
|
<template #taskName="scope">
|
|
|
<div class="task-name--div">
|
|
|
@@ -87,18 +90,25 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
- import { ref, onMounted, reactive } from 'vue';
|
|
|
+ import { ref, onMounted, reactive, watch } from 'vue';
|
|
|
import { Plus } from '@element-plus/icons-vue';
|
|
|
import BasicTable from '@/components/BasicTable.vue';
|
|
|
import ActionButton from '@/components/ActionButton.vue';
|
|
|
import Search from '@/views/disaster/components/Search.vue';
|
|
|
import useTableConfig from '@/hooks/useTableConfigHook';
|
|
|
- import { getTaskManagementTableData } from '@/api/task-execution/tableData';
|
|
|
- import type { TaskExecutionTableData } from '@/types/task-execution/tableData';
|
|
|
+ import { getTaskManagementListData } from '@/api/disaster-precaution';
|
|
|
+ import type { TaskManagementListResponse } from '@/types/disaster-precaution';
|
|
|
import OverdueIcon from '@/assets/svg/overdue.svg';
|
|
|
+ import { ElMessageBox, ElMessage } from 'element-plus';
|
|
|
import { OVERDUE_STATUS, TASK_TYPE_MAP, TASK_STAGE_MAP } from './src/constants/task-execution';
|
|
|
import { ACTIVE_STATUS, ACTIVE_STATUS_COLOR, ACTIVE_STATUS_MAP } from '@/views/disaster/constant';
|
|
|
- import { TABLE_OPTIONS, TASK_MANAGEMENT_TABLE_COLUMNS, TASK_MANAGEMENT_SEARCH_CONFIG } from './src/config';
|
|
|
+ import {
|
|
|
+ TABLE_OPTIONS_MANAGEMENT,
|
|
|
+ TASK_MANAGEMENT_TABLE_COLUMNS,
|
|
|
+ TASK_MANAGEMENT_SEARCH_CONFIG,
|
|
|
+ TABLE_MANAGEMENT_HEIGHT_DEFAULT,
|
|
|
+ TABLE_MANAGEMENT_HEIGHT_BATCH_OPERATION,
|
|
|
+ } from './src/config';
|
|
|
import { useRouter } from 'vue-router';
|
|
|
const router = useRouter();
|
|
|
const searchData = reactive({
|
|
|
@@ -108,12 +118,56 @@
|
|
|
});
|
|
|
const handleSearch = (data: any) => {
|
|
|
console.log(data);
|
|
|
+ getTableData();
|
|
|
+ };
|
|
|
+ const selectionItems = ref<any[]>([]);
|
|
|
+ const isBatchPublish = ref(false);
|
|
|
+ const isBatchWithdraw = ref(false);
|
|
|
+ const getSelectionIds = (option: ACTIVE_STATUS) => {
|
|
|
+ return selectionItems.value.filter((item) => item.activeStatus === option).map((item) => item.id);
|
|
|
+ };
|
|
|
+ const handleSelectionChange = (selection: any[]) => {
|
|
|
+ selectionItems.value = selection;
|
|
|
+ const publishIds = getSelectionIds(ACTIVE_STATUS.NOT_EFFECTIVE);
|
|
|
+ isBatchPublish.value = Boolean(publishIds.length);
|
|
|
+ const withdrawIds = getSelectionIds(ACTIVE_STATUS.ACTIVE);
|
|
|
+ isBatchWithdraw.value = Boolean(withdrawIds.length);
|
|
|
+ };
|
|
|
+ const openMessageBox = (title: string) => {
|
|
|
+ return ElMessageBox.confirm('', title, {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ return true;
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ return false;
|
|
|
+ });
|
|
|
+ };
|
|
|
+ const handleBatchPublish = async () => {
|
|
|
+ const confirmed = await openMessageBox('确认发布任务吗?');
|
|
|
+ if (!confirmed) return;
|
|
|
+ const publishIds = getSelectionIds(ACTIVE_STATUS.NOT_EFFECTIVE);
|
|
|
+ ElMessage.success('批量发布成功');
|
|
|
+ getTableData();
|
|
|
};
|
|
|
- const selectedIds = ref<number[]>([]);
|
|
|
- const handleSelectedIds = (ids: number[]) => {
|
|
|
- selectedIds.value = ids;
|
|
|
- console.log(ids);
|
|
|
+ const handleBatchWithdraw = async () => {
|
|
|
+ const confirmed = await openMessageBox('确认撤回已发布任务吗?');
|
|
|
+ if (!confirmed) return;
|
|
|
+ const withdrawIds = getSelectionIds(ACTIVE_STATUS.ACTIVE);
|
|
|
+ ElMessage.success('批量撤回成功');
|
|
|
+ getTableData();
|
|
|
+ };
|
|
|
+ const basicTableRef = ref<InstanceType<typeof BasicTable>>();
|
|
|
+ const handleBatchDelete = async () => {
|
|
|
+ const confirmed = await openMessageBox('删除后任务不可恢复,确认删除吗?');
|
|
|
+ if (!confirmed) return;
|
|
|
+ const deleteIds = getSelectionIds(ACTIVE_STATUS.NOT_EFFECTIVE);
|
|
|
+ ElMessage.success('批量删除成功');
|
|
|
+ getTableData();
|
|
|
};
|
|
|
+
|
|
|
const defaultPath = '/disaster-prevention/disaster-precaution/task-item';
|
|
|
const handleCreateTask = () => {
|
|
|
router.push({
|
|
|
@@ -135,20 +189,19 @@
|
|
|
query: { id },
|
|
|
});
|
|
|
};
|
|
|
- const tableData = ref<TaskExecutionTableData[]>([]);
|
|
|
- const { tableConfig, pagination } = useTableConfig(TASK_MANAGEMENT_TABLE_COLUMNS, TABLE_OPTIONS);
|
|
|
+ const tableData = ref<TaskManagementListResponse[]>([]);
|
|
|
+ const { tableConfig, pagination } = useTableConfig(TASK_MANAGEMENT_TABLE_COLUMNS, TABLE_OPTIONS_MANAGEMENT);
|
|
|
const handleSizeChange = (value: number) => {
|
|
|
pagination.pageSize = value;
|
|
|
- tableConfig.loading = true;
|
|
|
getTableData();
|
|
|
};
|
|
|
const handleCurrentChange = (value: number) => {
|
|
|
pagination.pageNumber = value;
|
|
|
- tableConfig.loading = true;
|
|
|
getTableData();
|
|
|
};
|
|
|
const getTableData = async () => {
|
|
|
- const res = await getTaskManagementTableData();
|
|
|
+ tableConfig.loading = true;
|
|
|
+ const res = await getTaskManagementListData();
|
|
|
tableData.value = res;
|
|
|
pagination.total = tableData.value.length;
|
|
|
tableConfig.loading = false;
|
|
|
@@ -156,9 +209,30 @@
|
|
|
onMounted(() => {
|
|
|
getTableData();
|
|
|
});
|
|
|
+ watch(
|
|
|
+ () => selectionItems.value.length,
|
|
|
+ (newLength) => {
|
|
|
+ if (newLength > 0) {
|
|
|
+ tableConfig.height = TABLE_MANAGEMENT_HEIGHT_BATCH_OPERATION;
|
|
|
+ } else {
|
|
|
+ tableConfig.height = TABLE_MANAGEMENT_HEIGHT_DEFAULT;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ );
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
@use '../style/disaster.scss' as *;
|
|
|
@use './src/style/task-execution.scss' as *;
|
|
|
+ .batch-operation--div {
|
|
|
+ @include flex-center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ gap: 60cpx;
|
|
|
+ width: 100%;
|
|
|
+ height: 54cpx;
|
|
|
+ border: 4cpx;
|
|
|
+ padding: 16cpx 25cpx;
|
|
|
+ background-color: #ddefff;
|
|
|
+ margin-top: 20cpx;
|
|
|
+ }
|
|
|
</style>
|