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

<template>
  <div>
    <van-nav-bar
      title="热线工单"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
      <template #right>
        <van-icon name="plus" />
      </template>
    </van-nav-bar>
    <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="12"
                        ><div>
                          工单来源:{{
                            task_type.filter(
                              (i) =>
                                i.value.toString() ===
                                (item.taskType ?? "").toString()
                            )[0]?.label ?? "-"
                          }}
                        </div></van-col
                      >
                      <van-col span="12"
                        ><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>
                    <van-row v-if="item.status == 2 && ((item.tblTaskLogList??[]).filter(i=>i.taskStatus==-1).length<1)">
                        <van-col span="24">
                         <div style="text-align:right">
                            <van-button type="primary" size="small" @click.stop="daoda(item)">到达现场</van-button>
                          </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,
  ddTask,
} from "@/api/system/task";
import { Toast } from "vant";

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

const { task_status, task_event_category, task_event_type,task_type } = useDict(
  "task_status",
  "task_event_category",
  "task_event_type",
  "task_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();
};
const onClickRight = () => {
  router.push("/mb/task/add")
};

const daoda = (item) => {
  ddTask({
    taskId: item.taskId,
    taskStatus: -1,
    logDes: JSON.stringify({"desc":"到达"})
  }).then(res => {
    Toast.success("成功");
    onRefresh();
  })
}

</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>