sl-sfy-safety/src/views/emergency/emergency-drill/PageDrillPlanList.vue

<template>
  <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="handleCreateDrillPlan">
            创建演练计划
          </el-button>
          <!-- 搜索栏 -->
          <BasicSearch
            :searchConfig="DRILL_PLAN_LIST_SEARCH_CONFIG"
            :searchData="searchData"
            @update:searchData="handleSearch"
          ></BasicSearch>
        </header>
        <!-- 表格 -->
        <BasicTable
          :tableConfig="tableConfig"
          :tableData="tableData"
          @update:pageSize="handleSizeChange"
          @update:pageNumber="handleCurrentChange"
        >
          <template #action="scope">
            <div class="action-container--div">
              <ActionButton text="查看" @click="handleViewDrillPlan(scope.row.id)"></ActionButton>
              <ActionButton
                v-if="scope.row.status > 0 && scope.row.status <= 3"
                text="演练执行"
                @click=""
              ></ActionButton>
              <ActionButton v-else-if="scope.row.status < 6" text="演练记录" @click=""></ActionButton>
              <ActionButton
                text="删除"
                :popconfirm="{
                  title: '确定要删除?',
                }"
                @confirm="handleDeleteDrillPlan(scope.row.id)"
              />
            </div>
          </template>
        </BasicTable>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
  import { ElButton } from 'element-plus';
  import { Plus } from '@element-plus/icons-vue';
  import { reactive, ref, onMounted } from 'vue';
  import { useRouter } from 'vue-router';
  import BasicSearch from '@/components/BasicSearch.vue';
  import BasicTable from '@/components/BasicTable.vue';
  import ActionButton from '@/components/ActionButton.vue';
  import useTableConfig from '@/hooks/useTableConfigHook';

  import { DRILL_PLAN_LIST_SEARCH_CONFIG } from './configs/plan/search';
  import { TABLE_OPTIONS, DRILL_PLAN_LIST_TABLE_COLUMNS } from './configs/plan/table';

  import { DrillPlanListSearch, DrillPlanItem } from './types';

  import { queryEnergencyDrillPlanList, deleteEmergencyDrillPlan } from '@/api/emergency-drill/emergency-drill';
  import { EMERGENCY_DRILL_STATUS_DICT, EMERGENCY_DRILL_SCOPE_LABEL } from './constants';

  const router = useRouter();
  // 按钮操作
  function handleCreateDrillPlan() {
    router.push({
      name: 'emergency-drill-plan-item',
      query: {
        operate: 'create',
      },
    });
  }

  function handleViewDrillPlan(id: number) {
    router.push({
      name: 'emergency-drill-plan-view',
      query: {
        id: id,
      },
    });
  }

  function handleToExecute(id: number) {
    router.push({
      name: 'emergency-drill-plan-item',
      query: {
        id: id,
        operate: 'execute',
      },
    });
  }

  function handleToRecord(id: number) {
    router.push({
      name: 'emergency-drill-plan-item',
      query: {
        id: id,
        operate: 'record',
      },
    });
  }

  function handleDeleteDrillPlan(id: number) {
    deleteEmergencyDrillPlan(id).then(() => {
      getTabelData();
    });
  }

  // 搜索栏
  const searchData = reactive<DrillPlanListSearch>({});
  function handleSearch() {
    tabelQuery.value.queryParam = searchData;
    getTabelData();
  }

  // 表格
  const { tableConfig, pagination } = useTableConfig(DRILL_PLAN_LIST_TABLE_COLUMNS, TABLE_OPTIONS);

  const tabelQuery = ref({
    pageNumber: pagination.pageNumber,
    pageSize: pagination.pageSize,
    queryParam: {},
  });

  const tableData = ref<DrillPlanItem[]>([]);

  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() {
    tableConfig.loading = true;

    const res = await queryEnergencyDrillPlanList(tabelQuery.value);
    res.records.forEach((item) => {
      item.drillScope = EMERGENCY_DRILL_SCOPE_LABEL[item.drillScope];
      item.responsibleDeptNameList = item.responsibleDeptNameList.replace(/^\[|\]$/g, '');
      item.coordinateDeptNameList = item.coordinateDeptNameList?.replace(/^\[|\]$/g, '');
      item.statusLabel = EMERGENCY_DRILL_STATUS_DICT[item.status];
    });
    tableData.value = res.records;
    pagination.total = res.totalRow;
    tableConfig.loading = false;
  }

  // 初始化
  onMounted(() => {
    getTabelData();
  });
</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 *;
</style>