voiceMate-web/src/views/voice/notice/index.vue

<script setup>
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import SearchItemWrapper from '@/components/SearchItemWrapper';
import useTableHeight from '@/composables/useTableHeight';
import { noticeApi } from '@/api/voice/notice';

const { tableContainer, tableMaxHeight } = useTableHeight();

const router = useRouter();

const loading = ref(false);
const dataPickerValue = ref([]);
const total = ref(0);
const tableData = ref([]);
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  neighbourhoodName: '',  // 小区名称
  status: ''              // 停水状态
})

const statusEnum = {
  // 0: '未知',
  1: '待停水',
  2: '停水中',
  3: '已恢复'
}

// 气泡弹窗 - 是否删除该项
const onConfirm = async ({ id }) => {
  await noticeApi.delWater(id);
  ElMessage.success('删除停水公告成功');
  getList();
}

const getList = async () => {
  const [timeBegin, timeEnd] = dataPickerValue.value || [];

  loading.value = true;

  const { rows, total: t } = await noticeApi.getWaterList({...queryParams.value, timeBegin, timeEnd});

  tableData.value = rows.map(item => ({
    ...item,
    statusText: statusEnum[item.status]
  }));
  
  loading.value = false;
  total.value = t;
};

const jumpDetails = ({ id }) => {
  router.push({
    path: "notice/add",
    query: { id }
  });
}

// 跳转 - 添加停水公告
const handleJumpWaterAdd = () => {
  router.push("notice/add");
}

// 清除检索条件
const handleCleanOptions = () => {
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
    neighbourhoodName: '',  // 小区名称
    status: ''              // 停水状态
  };
  dataPickerValue.value = [];
  getList();
}

onMounted(() => {
  getList();
})

</script>

<template>
  <div class="notice-viewprot">
    <div class="search-card">
      <el-row :gutter="24" class="mb-[24px]">
        <el-col :span="6">
          <SearchItemWrapper>
            <el-input class="search-input" placeholder="小区名称" v-model="queryParams.neighbourhoodName"></el-input>
          </SearchItemWrapper>
        </el-col>
        <el-col :span="6">
          <SearchItemWrapper label="停水状态">
            <el-select v-model="queryParams.status" placeholder="Select" size="large" :empty-values="[null, undefined]">
              <el-option label="全部" value="" />
              <el-option :label="val" :value="key" v-for="val, key in statusEnum" :key="val" />
            </el-select>
          </SearchItemWrapper>
        </el-col>
        <el-col :span="6">
          <SearchItemWrapper label="停水时间">
            <el-date-picker v-model="dataPickerValue" type="daterange" range-separator="-" start-placeholder="起始日期"
              end-placeholder="结束日期" style="width: 100%;" :editable="false" value-format="YYYY-MM-DD" :value-on-clear="null"/>
          </SearchItemWrapper>
        </el-col>
        <el-col :span="6">
          <div class="flex items-center justify-end space-x-[10px]">
            <div class="custom-btn custom-btn_primary" @click="getList">搜索</div>
            <div class="custom-btn custom-btn_default" @click="handleCleanOptions">重置</div>
          </div>
        </el-col>
      </el-row>
    </div>
    
    <div class="add-btn-card">
      <div class="btn space-x-[5px]" @click="handleJumpWaterAdd">
        <el-icon><CirclePlus /></el-icon>
        <span>添加停水公告</span>
      </div>
    </div>

    <div class="table-card">
      <div style="height: 100%;" ref="tableContainer">
        <el-table :data="tableData" style="width: 100%" :max-height="tableMaxHeight" v-loading="loading">
          <el-table-column prop="reason" label="停水原因" align="center" :width="320" :show-overflow-tooltip="{'popper-class': 'custom-tooltip-popper'}" />
          <el-table-column prop="timeBegin" label="停水时间" align="center" />
          <el-table-column prop="timeEnd" label="恢复供水时间" align="center" />
          <el-table-column prop="neighbourhoodName" label="停水范围（小区）" align="center" :show-overflow-tooltip="{'popper-class': 'custom-tooltip-popper'}" ></el-table-column>
          <el-table-column prop="statusText" label="停水状态" align="center" />
          <el-table-column prop="createBy" label="创建人" align="center" />
          <el-table-column prop="createTime" label="创建时间" align="center" />
          <el-table-column prop="address" label="操作" align="center" fixed="right">
            <template #default="scope">
              <div class="flex justify-center space-x-[20px]">
                <span class="text-[#165DFF] cursor-pointer" @click="jumpDetails(scope.row)">编辑</span>
                <span class="text-[#165DFF] cursor-pointer">
                  <el-popconfirm
                    width="220"
                    icon-color="#626AEF"
                    title="确认要删除本条数据吗?"
                    @confirm="onConfirm(scope.row)"
                  >
                    <template #reference>
                      <span>删除</span>
                    </template>
                    <template #actions="{ confirm, cancel }">
                      <el-button size="small" @click="cancel">否</el-button>
                      <el-button type="primary" size="small" @click="confirm">是</el-button>
                    </template>
                  </el-popconfirm>
                </span>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total >= 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.notice-viewprot {
  display: flex;
  flex-flow: column;
  width: 100%;
  height: 100%;
  padding: 28px 24px 18px 24px;
  border-radius: 8px;
  background: #fff;

  .search-card {
    border-bottom: 1px dashed #E5E6EB;
  }

  .add-btn-card {
    display: flex;
    justify-content: flex-start;
    margin: 20px 0;

    .btn {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      border-radius: 8px;
      padding: 7px 16px;
      background: #165DFF;
      color: #fff;
      cursor: pointer;
    }
  }
  
  .table-card {
    height: 100%;
  }
}

</style>

<style lang="scss">
.custom-tooltip-popper {
  width: 500px;
}
</style>