nnbp_ui/src/views/mb/task/index.vue

<template>
  <div>
    <van-nav-bar
      title="热线工单"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="body">
      <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="option1" />
        <van-dropdown-item v-model="value2" :options="option2" />
      </van-dropdown-menu>

      <div class="listcontent" :style="`height:${bodyheight}px`">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <div
              style="padding: 10px 10px; padding-bottom: 0"
              v-for="item in tasklist"
            >
              <div class="item" @click="gotodetail(item)">
                <div>
                  <div class="header">
                    <div>任务编号:{{ item.taskCode }}</div>
                    <div class="time">{{ item.taskTime }}</div>
                  </div>
                  <div class="body">
                    <div class="status">{{task_status.filter(
                  (i) => i.value.toString() === (item.status??"").toString()
                )[0]?.label ?? "-"}}</div>

                    <van-row>
                      <van-col span="24"
                        ><div>
                          热线类型:{{
                            task_event_type.filter(
                              (i) =>
                                i.value.toString() ===
                                (item.taskEventType??"").toString()
                            )[0]?.label ?? "-"
                          }}
                        </div></van-col
                      >
                      <van-col span="12"> <div>联系人:{{item.taskReporter}}</div></van-col>
                      <van-col span="12"><div>联系方式:{{item.taskComplainConnect}}</div></van-col>
                      <van-col span="24"
                        ><div>任务内容: {{ item.taskContent }}</div></van-col
                      >
                    </van-row>
                  </div>
                </div>
              </div>
            </div>
          </van-list>
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineComponent, ref, onMounted, watch, computed } from "vue";
import { useDict } from "@/utils/dict";
import router from "../../../router";
import {
  listTask,
  getTask,
  delTask,
  addTask,
  updateTask,
} from "@/api/system/task";

const tasklist = ref([]);
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);

const { task_status, task_event_category, task_event_type } = useDict(
  "task_status",
  "task_event_category",
  "task_event_type"
);

const bodyheight = ref(0);
bodyheight.value = document.body.clientHeight - 48 - 46;
const value1 = ref(0);
const value2 = ref("0");
const option1 = [
  { text: "我的", value: 0 },
  { text: "全部", value: 1 },
];
const option2 = computed(() => {
  return [{ text: "全部", value: "0" }].concat(task_status.value.map((i) => {
    return { text: i.label, value: i.value };
  }));
});

const gotodetail = (item) => {
  router.push(`/mb/task/detail/${item.taskId}`);
}

const pagec = ref(1);


const onLoad = () => {
  if (refreshing.value) {
    tasklist.value = [];
    refreshing.value = false;
    pagec.value = 1;
  }
  var p = { pageSize: 10, pageNum: pagec.value++ };
  if (value2.value !== '0') {
    p['status'] =parseInt(value2.value)
  }
  listTask(p).then((res) => {
    // finished.value = true;
    loading.value = false;
    tasklist.value = tasklist.value.concat(res.rows);
    if (res.total <= tasklist.value.length) {
      finished.value = true;
    }
  });

};

watch(() => value2.value, () => {
  refreshing.value = true;
  onLoad();
})


const onRefresh = () => {
  // 清空列表数据
  finished.value = false;
  loading.value = true;
  refreshing.value = true;
  onLoad();
};

const onClickLeft = () => {
  router.back();
};
</script>

<style lang="scss">
body {
  position: fixed;
  width: 100%;
  top: -1px;
}

.listcontent {
  overflow-y: auto;

  .item {
    background: #fff;
    border: 1px solid rgba(209, 217, 221,0.4);
    padding: 10px 15px;
    font-size: 10px;
    border-radius: 5px;
    .header {
      color: #3d6dc5;
      font-weight: bold;
      position: relative;
      padding-bottom: 8px;
      border-bottom: 1px solid rgba(209, 217, 221,0.4);
      .time {
        position: absolute;
        right: 0;
        top: 0;
        color: #283247;
        opacity: 0.7;
        font-weight: 400;
      }
    }
    .body {
      padding-top: 10px;
      padding-bottom: 10px;
      position: relative;
      color: #283247;
      opacity: 0.8;
      .status {
        position: absolute;
        top: 10px;
        color: #dc2828;
        right: 0px;
        font-weight: bold;
      }
      .van-col {
        margin: 3px 0;
      }
    }
  }
}
</style>