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

<template>
  <div>
    <van-nav-bar
      title="工单详情"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="body">
      <div class="listcontent" :style="`height:${bodyheight}px`">
        <van-collapse v-model="activeNames">
          <van-collapse-item class="citem" :title="`${taskinfo.taskCode}工单信息【${task_status.filter((i) => i.value.toString() === taskinfo.status.toString())[0]?.label ?? '-' }】`" name="1">
            <div class="content">
              <van-row>
            <van-col :span="12"
              >事件来源：{{
                task_type.filter(
                  (i) => i.value.toString() === (taskinfo.taskType??"").toString()
                )[0]?.label ?? "-"
              }}</van-col
            >
            <van-col :span="12"
              >班组区域：{{
                (taskinfo.taskDeptRange ?? "")
                  .split(",")
                  .map((i) => {
                    return (
                      alldept.find((p) => {
                        return p.deptId + "" === i + "";
                      })?.deptName ?? "-"
                    );
                  })
                  .join(",")
              }}</van-col
            >
            <van-col :span="12">来件时间：{{ taskinfo.taskTime }} </van-col>
            <van-col :span="12"
              >设施编号：{{ taskinfo.taskFacilitieCode }}</van-col
            >
          </van-row>
          <van-row>
            <van-col :span="12"
              >事件分类：{{
                task_event_type.filter(
                  (i) =>
                    i.value.toString() === (taskinfo.taskEventType??"").toString()
                )[0]?.label ?? "-"
              }}</van-col
            >
            <van-col :span="12">其他工单号：{{ taskinfo.taskOtherId }}</van-col>
            <van-col :span="12"
              >要求完成时间：{{ taskinfo.taskReqCompleteTime }}</van-col
            >
            <van-col :span="12"
              >事件类型：{{
                task_event_category.filter(
                  (i) =>
                    i.value.toString() === (taskinfo.taskEventCategory??"").toString()
                )[0]?.label ?? "-"
              }}</van-col
            >
          </van-row>
          <van-row>
             <van-col :span="12">是否需要确认：{{ taskinfo.remark==="1"?'是':'否' }}</van-col>
            <van-col :span="12">来件备注：{{ taskinfo.taskFromRemark }}</van-col>
            <van-col :span="12"
              >投诉人电话：{{ taskinfo.taskComplainConnect }}</van-col
            >
            <van-col :span="12"
              >接单人：{{
                allusers
                  .filter(
                    (i) =>
                      [taskinfo.taskReporter + ""].indexOf(i.userId + "") != -1
                  )
                  .map((i) => i.nickName)
                  .join(",")
              }}</van-col
            >
            <!-- <van-col :span="12">上报人：{{ taskinfo.taskReporter }}</van-col> -->
          </van-row>
          <van-row>
            <van-col :span="24">详细地址：{{ taskinfo.taskAddr }}</van-col>
            <!-- <van-col :span="24">备注信息：{{ taskinfo.remark }}</van-col> -->
          </van-row>
          <van-row>

            <van-col :span="24">任务内容：{{ taskinfo.taskContent }}</van-col>
            <van-col :span="24">现场照片：</van-col>
          </van-row>

          <van-row>
            <van-col :span="24">
              <ImagePreview
                v-model:src="taskinfo.taskPics"
                :height="'120px'"
                :width="'120px'"
              ></ImagePreview>
            </van-col>
            <van-col
              :span="24"
              v-if="taskinfo.taskPics === null || taskinfo.taskPics === ''"
            >
              <div style="margin-left: 20px">暂无图片</div>
            </van-col>
          </van-row>

          <van-row>
            <van-col :span="24">派单照片：</van-col>
          </van-row>

            <van-row>
            <van-col :span="24">
              <ImagePreview
                v-model:src="taskinfo.taskVideos"
                :height="'120px'"
                :width="'120px'"
              ></ImagePreview>
            </van-col>
            <van-col
              :span="24"
              v-if="taskinfo.taskVideos === null || taskinfo.taskVideos === ''"
            >
              <div style="margin-left: 20px">暂无图片</div>
            </van-col>
          </van-row>

            </div>
          </van-collapse-item>
          <van-collapse-item class="citem" title="派发信息" name="2" v-if="taskinfo.status > 1">
            <van-row>
            <van-col :span="24"
              >负责人：{{
                allusers.filter(
                  (i) =>
                    (JSON.parse(
                          taskinfo.tblTaskLogList.filter(
                            (ii) => ii.taskStatus === 2
                          )[0].logDes
                        ).fzr ?? []
                      ).indexOf(i.userId+"") != -1
                ).map((i) => i.nickName).join(",")
              }}</van-col
            >
            <van-col :span="24"
              >联系方式：{{
                 allusers.filter(
                  (i) =>
                    (JSON.parse(
                          taskinfo.tblTaskLogList.filter(
                            (ii) => ii.taskStatus === 2
                          )[0].logDes
                        ).fzr ?? []
                      ).indexOf(i.userId+"") != -1
                ).map((i) => i.phonenumber).join(",")
              }}</van-col
            >
            <van-col :span="24"
              >处置班组：{{
                alldept
                  .filter(
                    (i) =>
                      (
                        JSON.parse(
                          taskinfo.tblTaskLogList.filter(
                            (ii) => ii.taskStatus === 2
                          )[0].logDes
                        ).fzbz ?? []
                      ).indexOf(i.deptId) != -1
                  )
                  .map((i) => i.deptName)
                  .join(",")
              }}</van-col
            >
            <van-col :span="24"
              >派发时间：{{
                taskinfo.tblTaskLogList.filter((ii) => ii.taskStatus === 2)[0]
                  .createTime
              }}</van-col
            >
          </van-row>
          </van-collapse-item>



          <van-collapse-item class="citem" title="跟踪信息" name="3" v-if="taskinfo.status >= 5">
            <van-row>
            <van-col :span="24"
              >是否及时完成：{{
                JSON.parse(
                    taskinfo.tblTaskLogList.filter(
                      (ii) => ii.taskStatus === 5
                    )[0].logDes ?? "{}"
                  ).isfinsh
              }}</van-col
            >
            <van-col :span="24"
              >回访情况：{{
                JSON.parse(
                    taskinfo.tblTaskLogList.filter(
                      (ii) => ii.taskStatus === 5
                    )[0].logDes ?? "{}"
                  ).hfdes
              }}</van-col
            >
            <van-col :span="24">处置完成日期：{{
                JSON.parse(
                    taskinfo.tblTaskLogList.filter(
                      (ii) => ii.taskStatus === 5
                    )[0].logDes ?? "{}"
                  ).czcompletetime }}</van-col>
            <van-col :span="24">记录人：{{ JSON.parse(
                    taskinfo.tblTaskLogList.filter(
                      (ii) => ii.taskStatus === 5
                    )[0].logDes ?? "{}"
                  ).jlr }}</van-col>
          </van-row>
          </van-collapse-item>


          <van-collapse-item class="citem" title="核查反馈信息" name="5" v-if="taskinfo.status < 5 && (taskinfo.tblTaskLogList.filter((ii) => ii.taskStatus === 6) ?? [])
            .length > 0">
            <van-row>
            <van-col :span="24"
              >核查人员：{{
                JSON.parse(
                    taskinfo.tblTaskLogList.filter(
                      (ii) => ii.taskStatus === 6
                    )[0].logDes ?? "{}"
                  ).hcry
              }}</van-col
            >

            <van-col :span="24">核查时间：{{ JSON.parse(
                    taskinfo.tblTaskLogList.filter(
                      (ii) => ii.taskStatus === 6
                    )[0].logDes ?? "{}"
                  ).hctime }}</van-col>
            <van-col :span="24"
              >核查备注：{{ JSON.parse(
                    taskinfo.tblTaskLogList.filter(
                      (ii) => ii.taskStatus === 6
                    )[0].logDes ?? "{}"
                  ).hcdes }}</van-col
            >
          </van-row>
          </van-collapse-item>

          <van-collapse-item class="citem" title="响应信息" name="7" v-if="(taskinfo.tblTaskLogList.filter((ii) => ii.taskStatus === -1) ?? [])
            .length > 0">
          <div>
            <van-row>
            <van-col :span="24"
              >班组响应时间：{{
                JSON.parse(
                  taskinfo.tblTaskLogList.filter(
                    (ii) => ii.taskStatus === -1
                  )[0].logDes
                ).bzxytime
              }}</van-col
            >
            <van-col :span="24"
              >到达现场时间：{{
                JSON.parse(
                  taskinfo.tblTaskLogList.filter(
                    (ii) => ii.taskStatus === -1
                  )[0].logDes
                ).ddxctime
              }}</van-col
            >
            <van-col :span="24"
              >处置完成时间：{{
                JSON.parse(
                  taskinfo.tblTaskLogList.filter(
                    (ii) => ii.taskStatus === -1
                  )[0].logDes
                ).czwctime
              }}</van-col
            >
            <van-col :span="12"
              >作业时长（小时）：{{
                JSON.parse(
                  taskinfo.tblTaskLogList.filter(
                    (ii) => ii.taskStatus === -1
                  )[0].logDes
                ).zysc
              }}</van-col
            >
            <van-col :span="12"
              >处理时长（小时）：{{
                JSON.parse(
                  taskinfo.tblTaskLogList.filter(
                    (ii) => ii.taskStatus === -1
                  )[0].logDes
                ).clsc
              }}</van-col
            >
            <van-col :span="12"
              >作业负责人：{{
                allusers
                  .filter(
                    (i) =>
                      i.userId + "" ===
                      JSON.parse(
                        taskinfo.tblTaskLogList.filter(
                          (ii) => ii.taskStatus === -1
                        )[0].logDes
                      ).zyfzr +
                        ""
                  )
                  .map((i) => i.nickName)
                  .join(",")
              }}
            </van-col>
            <van-col :span="12"
              >联系方式：{{
                allusers
                  .filter(
                    (i) =>
                      i.userId + "" ===
                      JSON.parse(
                        taskinfo.tblTaskLogList.filter(
                          (ii) => ii.taskStatus === -1
                        )[0].logDes
                      ).zyfzr +
                        ""
                  )
                  .map((i) => i.phonenumber)
                  .join(",")
              }}</van-col
            >

            <van-col :span="12"
              >作业人数：{{
                JSON.parse(
                  taskinfo.tblTaskLogList.filter(
                    (ii) => ii.taskStatus === -1
                  )[0].logDes
                ).zyrs
              }}</van-col
            >

            <van-col :span="12"
              >车辆型号：{{
                JSON.parse(
                  taskinfo.tblTaskLogList.filter(
                    (ii) => ii.taskStatus === -1
                  )[0].logDes
                ).carxh
              }}</van-col
            >
            <van-col :span="12"
              >车牌号码：{{
                JSON.parse(
                  taskinfo.tblTaskLogList.filter(
                    (ii) => ii.taskStatus === -1
                  )[0].logDes
                ).carnumber
              }}</van-col
            >
            <van-col :span="12"
              >公里数：{{
                JSON.parse(
                  taskinfo.tblTaskLogList.filter(
                    (ii) => ii.taskStatus === -1
                  )[0].logDes
                ).gls
              }}</van-col
            >
          </van-row>
          </div>


          </van-collapse-item>
          <van-collapse-item class="citem" title="处置信息" name="4" v-if="taskinfo.status > 2 && taskinfo.status != 4">
             <div class="titleheader" :style="`${'margin-top:0px'}`">
            {{ "权属确认" }}
          </div>
          <div>
            <van-row>
              <van-col :span="24"
                >{{
                  "现场勘查" +
                  ":" +
                  JSON.parse(
                    taskinfo.tblTaskLogList.filter(
                      (ii) => ii.taskStatus === 3
                    )[0].logDes ?? "{}"
                  ).qsdes
                }}
              </van-col>
            </van-row>
          </div>

          <div class="titleheader">
            {{ "工作量" }}
          </div>
          <div>
            <van-row>
              <van-col
                :span="12"
                v-for="(item, index1) in JSON.parse(
                  taskinfo.tblTaskLogList.filter((ii) => ii.taskStatus === 3)[0]
                    .logDes ?? '{}'
                ).gzldata" :style="item['value1'] !==''?'':'display:none' "
                >{{ item.name + ":" + item.value1 +" "+item.unit1 +(item.hasOwnProperty('value2')?(`${item.value2+" "+item.unit2}`):'') }}
              </van-col>
            </van-row>
          </div>

          <div class="titleheader" :style="`${'margin-top:0px'}`">
            {{ "车辆设备" }}
          </div>
          <div>
            <van-row>
              <van-col
                :span="12"
                v-for="(item, index1) in JSON.parse(
                  taskinfo.tblTaskLogList.filter((ii) => ii.taskStatus === 3)[0]
                    .logDes ?? '{}'
                ).clsbdata" :style="item['value1'] !==''?'':'display:none' "
                >{{ item.name + ":" + item.value1 +" "+item.unit1 +(item.hasOwnProperty('value2')?(`${item.value2+" "+item.unit2}`):'') }}
              </van-col>
            </van-row>
          </div>

           <div class="titleheader" :style="`${'margin-top:0px'}`">
            {{ "主材" }}
          </div>
          <div>
            <van-row>
              <van-col
                :span="24"
                v-for="(item, index1) in JSON.parse(
                  taskinfo.tblTaskLogList.filter((ii) => ii.taskStatus === 3)[0]
                    .logDes ?? '{}'
                ).zcdata"
                >
                  <div>{{ item.type }}【{{ item.cz }}、{{ item.gg }}】：{{ item.num }}{{ item.dw }}</div>


              </van-col>
            </van-row>
          </div>

          <div class="titleheader" :style="`${'margin-top:0px'}`">
            {{ "辅材" }}
          </div>
          <div>
            <van-row>
              <van-col
                :span="12"
                v-for="(item, index1) in JSON.parse(
                  taskinfo.tblTaskLogList.filter((ii) => ii.taskStatus === 3)[0]
                    .logDes ?? '{}'
                ).hcdata" :style="item['value1'] !==''?'':'display:none' "
                >{{ item.name + ":" + item.value1 +" "+item.unit1 +(item.hasOwnProperty('value2')?(`${item.value2+" "+item.unit2}`):'') }}
              </van-col>
            </van-row>
          </div>

          <div>
            <div class="titleheader">现场图片</div>
            <van-row>
              <van-col :span="24">
                <ImagePreview
                  v-model:src="
                    JSON.parse(
                      taskinfo.tblTaskLogList.filter(
                        (ii) => ii.taskStatus === 3
                      )[0].logDes ?? '{}'
                    ).images
                  "
                  :height="'120px'"
                  :width="'120px'"
                ></ImagePreview>
              </van-col>
            </van-row>
          </div>
          </van-collapse-item>
          <van-collapse-item class="citem" title="核查信息" name="5" v-if="taskinfo.status > 5">
            <van-row>
            <van-col :span="24"
              >核查人员：{{
                JSON.parse(
                    taskinfo.tblTaskLogList.filter(
                      (ii) => ii.taskStatus === 6
                    )[0].logDes ?? "{}"
                  ).hcry
              }}</van-col
            >

            <van-col :span="24">核查时间：{{ JSON.parse(
                    taskinfo.tblTaskLogList.filter(
                      (ii) => ii.taskStatus === 6
                    )[0].logDes ?? "{}"
                  ).hctime }}</van-col>
            <van-col :span="24"
              >核查备注：{{ JSON.parse(
                    taskinfo.tblTaskLogList.filter(
                      (ii) => ii.taskStatus === 6
                    )[0].logDes ?? "{}"
                  ).hcdes }}</van-col
            >
          </van-row>
          </van-collapse-item>
          <van-collapse-item class="citem" title="驳回信息" name="6" v-if="taskinfo.status == 4">
             <van-row>
            <van-col :span="24"
              >原因备注：{{
                JSON.parse(
                  taskinfo.tblTaskLogList.filter((ii) => ii.taskStatus === 4)[0]
                    .logDes ?? "{}"
                ).resonRemark
              }}</van-col
            >

            <van-col :span="24"
              >驳回时间：{{
                taskinfo.tblTaskLogList.filter((ii) => ii.taskStatus === 4)[0]
                  .createTime
              }}</van-col
            >

            <van-col :span="24">
              <div style="position: relative">
                说明报告：
                <div
                  style="position: absolute; top: 0; left: 60px; width: 100%"
                >
                  <div
                    style="
                      margin-bottom: 10px;
                      color: #4f9eee;
                      display: inline-block;
                      margin-left: 10px;
                    "
                    v-for="i in JSON.parse(
                      taskinfo.tblTaskLogList.filter(
                        (ii) => ii.taskStatus === 4
                      )[0].logDes ?? '{}'
                    ).files?.split(',') ?? []"
                  >
                    <a target="_blank" :href="`${STATICURL + i}`">
                      {{ i.split("/")[i.split("/").length - 1] }}
                    </a>
                  </div>
                </div>
              </div>
            </van-col>
            <van-col :span="24">照片：</van-col>
          </van-row>
          <van-row>
            <van-col :span="24">
              <ImagePreview
                v-model:src="
                  JSON.parse(
                    taskinfo.tblTaskLogList.filter(
                      (ii) => ii.taskStatus === 4
                    )[0].logDes ?? '{}'
                  ).images
                "
                :height="'120px'"
                :width="'120px'"
              ></ImagePreview>
            </van-col>
          </van-row>
          </van-collapse-item>
        </van-collapse>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineComponent, ref, onMounted, watch } from "vue";
import { cloneDeep } from "lodash";
import { listDept, getDept } from "@/api/system/dept";
import ImagePreview from "@/components/ImagePreview";
import { useDict } from "@/utils/dict";
import { useRoute } from "vue-router";
import moment from "moment";
import {
  listTask,
  getTask,
  delTask,
  addTask,
  updateTask,
  distributedTask,
  closeTask,
  czTask,
  gzTask,
  hcTask,
} from "@/api/system/task";
import {
  changeUserStatus,
  listUser,
  resetUserPwd,
  delUser,
  getUser,
  updateUser,
  addUser,
} from "@/api/system/user";
import { treeselect as deptTreeselect } from "@/api/system/dept";
import router from "../../../../router";

const STATICURL = import.meta.env.VITE_APP_BASE_API;
const {
  task_status,
  task_type,
  task_event_type,
  task_event_category,
  task_work,
  task_car,
  task_consumables,
} = useDict(
  "task_status",
  "task_type",
  "task_event_type",
  "task_event_category",
  "task_work",
  "task_car",
  "task_consumables"
);

const route = useRoute();
const bodyheight = ref(0);
bodyheight.value = document.body.clientHeight - 46;

const activeNames = ref(["1"]);

const alldept = ref([]);
listDept().then((response) => {
  alldept.value = cloneDeep(response.data);
});
const allusers = ref([]);
listUser({ pageSize: 1000 }).then((res) => {
  allusers.value = res.rows;
});
const taskinfo = ref({
  taskName: "",
  taskContent: "",
  taskAddr: "-",
  taskLocation: "-",
  taskCode: "-",
  taskType: "1",
  taskEventType: "1",
  taskEventCategory: "1",
  taskFromRemark: "-",
  taskAddrRoad: "-",
  taskOtherId: "-",
  taskTime: "2022-11-11 16:11:11",
  taskReqCompleteTime: "2022-11-11 16:11:11",
  status: 1,
  taskCreater: "-",
  taskReporter: "-",
  taskPics: "",
  remark: "sss",
  taskVideos: "-",
  taskComplainConnect: "-",
  taskDeptRange: "",
  taskFacilitieCode: "",
  tblTaskLogList: [],
});



const gettasklist = () => {
  getTask(Number(route.params.id)).then((res) => {
    var templist = {};
    var list = res.data.tblTaskLogList;
    for (var i in list) {
      var log = list[i];
      if (templist.hasOwnProperty(log.taskStatus + "")) {
        if (
          moment(templist[log.taskStatus + ""].createTime).unix() -
            moment(log.createTime).unix() <
          0
        ) {
          templist[log.taskStatus + ""] = log;
        }
      } else {
        templist[log.taskStatus + ""] = log;
      }
    }
    var lists = [];
    for (var i in templist) {
      lists.push(templist[i]);
    }
    taskinfo.value = res.data;
    taskinfo.value.tblTaskLogList = lists;
    console.log( taskinfo.value)

    // var logs = (taskinfo.value.tblTaskLogList ?? []).filter(
    //   (i) => i.taskStatus == 2
    // );
    // var logs1 = (taskinfo.value.tblTaskLogList ?? []).filter(
    //   (i) => i.taskStatus == -1
    // );
    // if (Array.isArray(logs) && logs.length > 0) {
    //   var log = JSON.parse(logs[0].logDes);
    //   czobj.value.qsdes = log.qsdes;
    // }
    // if (Array.isArray(logs1) && logs1.length > 0) {
    //   var log = JSON.parse(logs1[0].logDes);
    //   if (log.bzxytime) log.bzxytime = moment(log.bzxytime)._d;
    //   if (log.ddxctime) log.ddxctime = moment(log.ddxctime)._d;
    //   if (log.czwctime) log.czwctime = moment(log.czwctime)._d;
    //   xyobj.value = log;
    // }
  });
}

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

<style lang="scss">
body {
  position: fixed;
  width: 100%;
  top: -1px;
}
.listcontent {
  overflow-y: auto;
  padding: 10px;
  .van-col{
    margin-bottom: 10px;
  }
  .citem {
    margin-top: 10px;
    border-radius: 5px;
    border: 1px solid rgba(209, 217, 221, 0.4);
    overflow: hidden;
    .content {
      font-size: 10px;

    }
    .titleheader{
        color:#3d6dc5;
        margin-bottom: 5px;
      }
  }
  .van-cell__title {
    color: #3d6dc5;
    font-weight: bold;
  }
}
</style>