yjxp-web/src/views/worker/rescueManagement/shelterSource.vue

<!--庇护场所-->
<template>
  <van-list
    v-model:loading="loading"
    v-model:error="error"
    error-text="请求失败，点击重新加载"
    :finished="finished"
    finished-text="没有更多任务了"
    class="list"
    @load="getList"
  >
    <div
      v-for="(item, index) in taskData"
      :key="item.id"
      class="event-list-item"
    >
      <div class="item-title">
        <div class="item-title-text">庇护场所采集任务</div>
        <div class="item-title-control">
          <van-button type="primary" @click="handleView(item)">
            上报
          </van-button>
        </div>
      </div>
      <div class="item-content">
        <div class="item-data">
          <div class="item-left">
            <i class="icon4" />
            <div class="item-data-label">采集周期：</div>
          </div>
          <div class="item-data-value">{{ get_task_cycle(item.cycle) }}</div>
        </div>
        <div class="item-data">
          <div class="item-left">
            <i class="icon4" />
            <div class="item-data-label">采集范围：</div>
          </div>
          <div class="item-data-value">{{ get_task_range(item.task_range) }}</div>
        </div>
        <div class="item-data">
          <div class="item-left">
            <i class="icon4" />
            <div class="item-data-label">要求采集时间：</div>
          </div>
          <div class="item-data-value">{{ item.task_time }}</div>
        </div>
      </div>
    </div>
  </van-list>
</template>
<script setup lang="ts">
import { ref, reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
import { getTaskList } from "@/api/rescueManagement";
const router = useRouter();
const total = ref(0);
const loading = ref(false);
const error = ref(false);
const finished = ref(false);
const data = reactive({
  queryParams: {
    type: '0', // 庇护场所采集任务
    page: 0,
    pageSize: 10
  }
});

// 巡查周期选项
const cycleOptions = [
  { value: '', label: '全部' },
  { value: '0', label: '每年' },
  { value: '1', label: '每月' },
  { value: '2', label: '每周' },
  { value: '3', label: '每日' },
  { value: '4', label: '一次' }
];
const rangeOptions = {
      '0': '市级',
      '1': '区县级',
      '2': '镇街级',
      '3': '村居级'
};

const get_task_cycle = (cycle: String) => {
  return cycleOptions.find(item => item.value == cycle).label
}
const get_task_range = (range) => {
  return rangeOptions[range]
}

const { queryParams } = toRefs(data);
const taskData = ref([]);

async function getList() {
  loading.value = true;
  queryParams.value.page++;
  getTaskList(queryParams.value)
    .then(res => {
      var items = res.data || [];
      total.value = res.total;
      if (queryParams.value.page == 1) {
        taskData.value = [];
      }
      items.forEach(val => {
        taskData.value.push(val);
      });
      if (queryParams.value.pageSize * queryParams.value.page >= total.value) {
        finished.value = true;
      } else {
        finished.value = false;
      }
    })
    .catch(() => {
      error.value = true;
      finished.value = false;
    })
    .finally(() => {
      loading.value = false;
    });
}
const handleView = (item) => {
  router.push("/rescueGatherResultAdd?id="+item.id+"&type="+item.type+"&area_code="+item.area_code);
}
</script>

<style lang="scss" scoped>
.list {
  height: calc(100vh - 102px);
  overflow-y: auto;
}
.van-doc-block__title {
  color: var(--van-doc-text-color-4);
  margin: 0;
  padding: 32px 16px 16px;
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
}

.event-list-item {
  position: relative;
  margin: 16px 16px 0;
  background: #ffffff;
  border-radius: 4px;
  border: 0.5px solid #eaedf7;
  box-shadow: 0 0 4px 0 #4554661a;
  &:first-child {
    margin-top: 0;
  }
  .item-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 46px;
    background-image: linear-gradient(180deg, #f3f7fd 0%, #ffffff 100%);
    padding: 0 12px;
    .item-title-text {
      font-size: 16px;
      color: #414f64;
      font-weight: 600;
    }

    .item-title-control {
      display: inline-flex;
      justify-content: center;
      align-items: center;
    }
    .van-button {
      width: 73px;
      height: 24px;
      padding: 0;
    }
  }
  .item-content {
    padding: 0 12px 12px;
  }
  .item-data {
    font-size: 14px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: start;
    line-height: 26px;
    .item-left {
      display: flex;
      align-items: center;
      flex-shrink: 0;
    }
    .item-data-label {
      flex-shrink: 0;
      color: #414f64;
    }

    .item-data-value {
      color: #414f64;
    }
  }
}
.van-dropdown-menu {
  :deep(.van-dropdown-menu__bar) {
    background: transparent;
    box-shadow: none;
  }
}
</style>