aiot-app/pages/maintenance/detail/detail.vue

<template>
  <view class="maintenance-container">
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      title="工单详情"
      @clickLeft="back"
      @clickRight="HandlScanCode"
    ></uni-nav-bar>
    <view class="maintenance-wrapper">
      <view class="maintenance-content">
        <u-subsection
          :list="tabList"
          :current="active"
          @change="handleTabChange"
          active-color="#157a2c"
        ></u-subsection>
        <view class="kd-baseInfo" v-show="active === 0">
          <view class="kd-cell">
            <text class="kd-label">工单编号</text>
            <text class="kd-content">{{ worksheetInfo.code }}</text>
          </view>
          <view class="kd-cell">
            <text class="kd-label">名称</text>
            <text class="kd-content">{{ worksheetInfo.planName }}</text>
          </view>
          <view class="kd-cell">
            <text class="kd-label">设备分类</text>
            <text class="kd-content">{{ worksheetInfo.categoryName }}</text>
          </view>
          <view class="kd-cell">
            <text class="kd-label">设备总数</text>
            <text class="kd-content text-warning"
              >{{ worksheetInfo.finishNum }}/{{ worksheetInfo.total }}</text
            >
          </view>
          <view class="kd-cell">
            <text class="kd-label">计划完成时长</text>
            <text class="kd-content">{{ worksheetInfo.duration }}分钟</text>
          </view>
          <view class="kd-cell">
            <text class="kd-label">实际完成时长</text>
            <text class="kd-content">{{
              finishTime(worksheetInfo.acceptTime, worksheetInfo.finishTime)
            }}</text>
          </view>
          <view class="kd-cell">
            <text class="kd-label">实际开始时间</text>
            <text class="kd-content">{{ worksheetInfo.acceptTime }}</text>
          </view>
          <view class="kd-cell">
            <text class="kd-label">实际完成时间</text>
            <text class="kd-content">{{ worksheetInfo.finishTime }}</text>
          </view>

          <!-- <u-button type="primary" size="large" text="开始执行"></u-button> -->
          <template>
            <template v-if="worksheetInfo.orderStatus === 0">
              <button class="btn-execute" type="primary" @click="handleExecute">
                开始执行
              </button>
              <button class="btn-sparepart" type="warning" @click="handlbpbj">
                申请备品备件
              </button>
              <button
                class="btn-reassignment"
                type="primary"
                @click="handleAssign"
              >
                转派
              </button>
              <!-- <div class="apply-box">
                <button
                  class="btn-reassignment"
                  type="primary"
                  @click="sparepartApply"
                >
                  申请备品备件
                </button>
              </div> -->
            </template>
            <template v-else-if="worksheetInfo.orderStatus === 2">
              <button class="btn-execute" type="primary" @click="handleReport">
                报工
              </button>
              <button class="btn-sparepart" type="warning" @click="handlbpbj">
                申请备品备件
              </button>
            </template>
            <button
              v-else-if="worksheetInfo.orderStatus === 3"
              :disabled="true"
              class="btn-execute"
              type="primary"
            >
              已报工
            </button>
            <!-- <div class="apply-box">
              <button
                v-if="worksheetInfo.status.code !== 3"
                class="btn-reassignment"
                type="primary"
                @click="sparepartApply"
              >
                申请备品备件
              </button>
              <button
                v-if="worksheetInfo.status.code === 0"
                class="btn-reassignment"
                type="primary"
                @click="handleAssign"
              >
                转派
              </button>
            </div> -->
          </template>
        </view>
        <view class="kd-equipment" v-show="active === 1">
          <view class="kd-type-box">
            <view
              :class="{ 'type—active': typeActive === index }"
              v-for="(item, index) in equpStatus"
              :key="index"
              @click="typeChange(index)"
            >
              {{ item.name }}
              <text v-if="item.count > 0" class="count">{{ item.count }}</text>
            </view>
          </view>
          <view class="kd-list-container">
            <u-list @scrolltolower="scrolltolower">
              <u-list-item v-for="(item, index) in euqiList" :key="index">
                <view class="kd-card">
                  <view class="kd-card-wrapper">
                    <view class="kd-cell">
                      <text class="kd-label">设备编码</text>
                      <text class="kd-content">{{ item.code }}</text>
                    </view>
                    <view class="kd-cell">
                      <text class="kd-label">设备名称</text>
                      <text class="kd-content">{{ item.name }}</text>
                    </view>
                    <view class="kd-cell">
                      <text class="kd-label">设备型号</text>
                      <text class="kd-content">{{ item.model }}</text>
                    </view>
                    <view class="kd-cell">
                      <text class="kd-label">设备位置</text>
                      <text class="kd-content">{{
                        item.deviceLocationName.pathName
                      }}</text>
                    </view>
                    <view class="kd-cell">
                      <text class="kd-label">执行结果</text>
                      <text class="kd-content">
                        <text
                          class="status-box text-warning"
                          v-if="item.executeStatus === 0"
                          >待检</text
                        >
                        <text
                          class="status-box text-primary"
                          v-else-if="item.executeStatus === 1"
                          >已检</text
                        >
                        <text
                          class="status-box text-danger"
                          v-else-if="item.executeStatus === 2"
                          >异常</text
                        >
                        <text
                          class="status-box text-primary"
                          v-else-if="item.executeStatus === 3"
                          >已报修</text
                        >
                      </text>
                    </view>
                  </view>
                  <view class="card-footer">
                    <button
                      v-if="item.orderStatus == 2 && item.executeStatus == 0"
                      type="primary"
                      class="primary-btn"
                      @click="handleCheck(item)"
                    >
                      检查
                    </button>
                    <!-- <button type="primary" class="primary-btn" @click="handleExecute" v-if="item.orderStatus == 2 && item.executeStatus == 0">开始执行</button> -->
                    <template v-if="item.orderStatus && item.orderStatus === 3">
                      <button
                        type="default"
                        v-if="item.resultStatus === 2"
                        @click="handLbx(item)"
                      >
                        报修
                      </button>
                      <button
                        type="default"
                        v-else-if="item.resultStatus === 3"
                        @click="handLbxDetail(item)"
                      >
                        报修详情
                      </button>
                    </template>
                    <button
                      type="default"
                      v-if="
                        [0, 2, 3].includes(item.orderStatus) &&
                        item.executeStatus != 0
                      "
                      @click="checkDetail(item)"
                    >
                      详情
                    </button>
                  </view>
                </view>
              </u-list-item>
            </u-list>
          </view>
        </view>
        <view class="spare-parts" v-if="active == 2">
          <pickCard :list="sparePartsApply" />
        </view>

      </view>
    </view>
    <uni-popup ref="inputDialog" type="dialog">
      <uni-popup-dialog
        ref="inputClose"
        mode="input"
        title="您当前已超出计划完成时间，请填写原因"
        placeholder="请输入内容"
        :before-close="true"
        @close="handleClose"
        @confirm="timeoutCauseConfirm"
      ></uni-popup-dialog>
    </uni-popup>
    <u-modal :show="modalShow" title="提示" @confirm="modalShow = false">
      <view>
        您还有
        <text class="text-warning">{{ worksheetInfo.awaitInspectSum }}</text>
        台设备待检，不可报工
      </view>
    </u-modal>
    <Assign ref="assignRef" @success="assignSuccess" />

    <!-- <ScanCode @scancodedate="scancodedate" :model="'uni'"></ScanCode> -->
  </view>
</template>

<script>
import Step from "@/components/Step/Step.vue";
import StepItem from "@/components/Step/StepItem.vue";
import PopSparePart from "../../maintenanceWorkorder/components/PopSparePart.vue";
import {
  getWorkOrderDetail,
  getDeviceList,
  startExecuting,
  signingWork,
  devicestatistics,
} from "@/api/myTicket/index.js";
import {
  getSpareParts,
  getSparePartsApply,
  getWordOrderDetail,
} from "@/api/repair";
import { get, post, postJ } from "@/utils/api.js";
import Assign from "@/components/Assign.vue";
import CellInfo from "@/components/CellInfo.vue";
import KdTabs from "@/components/KdTabs.vue";
import dayjs from "dayjs";
import ScanCode from "@/components/ScanCode.vue";
import pickCard from "@/pages/maintenanceWorkorder/components/pickCard.vue";
export default {
  components: {
    CellInfo,
    KdTabs,
    Assign,
    ScanCode,
    Step,
    StepItem,
    PopSparePart,
    pickCard,
  },
  data() {
    return {
      tabList: ["基本信息", "设备", "备品备件"],
      typeOptions: {
        CREATE: "生成工单",
        SPARE_PARTS_APPLY: "备品备件申请",
        ACCEPTANCE_CHEK: "验收",
        WORK_REPORT: "报工",
      },
      logs: {},
      modalShow: false,
      active: 0,
      typeActive: 0,
      statusList: {
        0: "待接收",
        1: "执行中",
        3: "已完成",
      },
      pageId: "",
      workOrderCode: "",
      worksheetInfo: {
        equiList: [],
        workOrder: {},
      },
      repairInfoLogList: [],
      sparePartsApply: [],
      equpStatus: [
        // {
        //   name: '全部',
        //   value: []
        // },
        {
          name: "全部",
          value: -1,
        },
        {
          name: "待检",
          value: 0,
        },
        {
          name: "已检",
          value: 1,
        },
        {
          name: "异常",
          value: 2,
        },
      ],
      euqiList: [],
      equipPage: 1,
      isEnd: false,
      barType: 0,
      qrContent: null,
    };
  },
  async onLoad(options) {
    this.pageId = options.id;
    this.planId = options.planId;
    // 设备台账跳转详情
    this.getInfo();
  },
  onShow() {
    this.getInfo();
    this.getCount();
    if (this.chooseTab) {
      this.active = 1;
      this.typeChange(2);
    } else {
      this.typeChange(0);
    }
  },
  onHide() {
    uni.$off("scancodedate");
  },
  onUnload() {
    uni.$off("scancodedate");
  },
  methods: {
    // 跳转备品备件
    async handlbpbj() {
      let data = await getWordOrderDetail(this.worksheetInfo.id);
      data.deviceList = data.deviceList.map((item) => {
        return item.substance;
      });
      data["pageType"] = "add";
      uni.navigateTo({
        url: `/pages/maintenanceWorkorder/sparepart/sparepart?data=${JSON.stringify(data)}`,
      });
    },
    //获取备品备件
    async getSparePartsApply(id) {
      const list = await getSparePartsApply(id);
      this.sparePartsApply = list;
    },
    getCount() {
      devicestatistics({
        planId: this.planId,
      }).then((data) => {
        this.equpStatus = this.equpStatus.map((item) => {
          switch (item.name) {
            case "全部":
              return {
                ...item,
                count: data.total,
              };
            case "待检":
              return {
                ...item,
                count: data.isInspectedNum,
              };
            case "已检":
              return {
                ...item,
                count: data.checkedNum,
              };
            case "异常":
              return {
                ...item,
                count: data.abnormalNum,
              };
          }
        });
      });
    },
    // 扫码枪扫码
    cbScancodedate(data) {
      this.Scancodedate(data.code);
    },
    // 相机扫码
    HandlScanCode() {
      let _this = this;
      uni.scanCode({
        onlyFromCamera: true,
        success: function (res) {
          _this.Scancodedate(res.result);
        },
      });
    },
    Scancodedate(code) {
      let _this = this;
      if (this.worksheetInfo.status.code === 0) {
        uni.showModal({
          title: "提示",
          content: "工单未开启执行，不可进行操作，请先点击“开始执行”！",
          confirmText: "开始执行", //这块是确定按钮的文字
          cancelText: "取消", //这块是取消的文字
          success: function (res) {
            if (res.confirm) {
              _this.handleExecute(); // 执行确认后的操作
            } else {
              // 执行取消后的操作
            }
          },
        });
        return;
      }
      this.qrContent = code.trim();
      this.barType = this.setBarType(this.qrContent);
      _this.getData();
    },
    // 设置barType
    setBarType(val) {
      let index = val.indexOf("@_@");
      let result = 0;
      if (index !== -1) {
        let item = val.substr(index + 3, 1);
        if (item) {
          result = Number(item);
        }
      }
      return result;
    },
    // 根据条码请求设备数据
    getData() {
      let par = {
        barType: this.barType,
        qrContent: this.qrContent,
      };
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      postJ(this.apiUrl + "/scan/getAssetInfo", par)
        .then((res) => {
          console.log("扫码接口返回", res);
          let data = res.data;
          this.matchEquipment(data);
        })
        .finally(() => {
          uni.hideLoading();
        });
    },

    matchEquipment(data) {
      let par = {
        assetCode: data.assetCode,
        workOrderId: this.worksheetInfo.id,
      };
      console.log("par", par);
      post(this.apiUrl + "/workOrder/scanMatching", par).then((res) => {
        let data = res.data;
        if (!data) {
          uni.showModal({
            title: "提示",
            content: "本工单中，无此设备！",
            confirmText: "好的", //这块是确定按钮的文字
            showCancel: false,
            success: function (res) {
              if (res.confirm) {
                // 执行确认后的操作
              } else {
                // 执行取消后的操作
              }
            },
          });
        } else {
          // 未报工
          if (this.worksheetInfo.status.code === 1) {
            this.handleCheck(data);
          }
          // 已报工
          if (this.worksheetInfo.status.code === 3) {
            this.checkDetail(data);
          }
        }
      });
    },

    back() {
      uni.navigateBack({
        delta: 1,
      });
    },
    handleAssign() {
      this.$refs.assignRef.open(this.worksheetInfo.id);
    },
    assignSuccess() {
      this.back();
    },
    finishTime(start, end) {
      if (!end) return "";
      let dur = new Date(end).getTime() - new Date(start).getTime();
      return Math.ceil(dur / 1000 / 60) + "分钟";
    },
    // 申请备品备件
    sparepartApply() {
      uni.navigateTo({
        url: `/pages/maintenance/sparepart/sparepart?planCode=${this.worksheetInfo.planCode}&sourceId=${this.worksheetInfo.id}&sourceCode=${this.worksheetInfo.workOrderCode}`,
      });
    },
    // 申请备品备件详情
    sparepartDetail() {
      uni.navigateTo({
        url: `/pages/maintenance/sparepart/sparepartDetail?applyOrder=${this.worksheetInfo.applyOrder}`,
      });
    },
    // 报工
    handleReport() {
      if (this.worksheetInfo.finishNum !== this.worksheetInfo.total) {
        uni.showToast({
          title: "请完成设备检查",
          icon: "none",
        });
        this.active = 1;
        //---------------------------------
      } else {
        if (
          new Date(this.worksheetInfo.acceptTime).getTime() +
            this.worksheetInfo.duration * 60 * 1000 <
          new Date().getTime()
        ) {
          this.$refs.inputDialog.open();
          return;
        }
        this._report();
      }
    },
    handleClose() {
      this.$refs.inputDialog.close();
    },
    timeoutCauseConfirm(value) {
      if (!value) {
        uni.showToast({
          title: "请输入超时原因",
          icon: "none",
        });
        return;
      }
      this.$refs.inputDialog.close();
      this._report(value);
    },
    _report(timeoutCause = "") {
      signingWork({
        id: this.pageId,
        timeoutCause: timeoutCause,
      }).then(() => {
        uni.showToast({
          icon: "success",
          title: "操作成功！",
          duration: 2000,
        });
        this.getInfo();
      });
    },
    // 执行工单
    handleExecute() {
      startExecuting({
        id: this.pageId,
      }).then(() => {
        uni.showToast({
          icon: "success",
          title: "操作成功！",
          duration: 2000,
        });
        this.getInfo();
        if (this.euqiList.length) {
          this.handleCheck(this.euqiList[0]);
        }
      });
    },
    //巡点检设备加载更多
    scrolltolower() {
      if (this.isEnd) return;
      this.equipPage++;
      this.getEquipList();
    },
    // 巡点检设备列表
    getEquipList() {
      const params = {
        planId: this.planId,
        status: this.equpStatus[this.typeActive].value,
        pageNum: 1,
        size: 9999,
      };
      getDeviceList(params).then((data) => {
        if (this.equipPage === 1) {
          this.euqiList = data.list;
        } else {
          this.euqiList.push(...data.list);
        }
        this.isEnd = this.euqiList.length >= data.count;
      });
    },

    handleTabChange(value) {
      console.log(value, "value");
      this.active = value;
      if (value === 1) {
        this.typeChange(0);
      }
    },
    // 设备状态切换
    typeChange(type) {
      this.typeActive = type;
      this.equipPage = 1;
      this.getEquipList();
    },
    // handleCheck({ id, equiName, equiCode, sparePartsJson }) {
    // 	this.$store.commit('maintenance/SET_SPAREPARTSJSON', sparePartsJson)
    // 	uni.navigateTo({
    // 		url: `/pages/maintenance/check/index?workOrderId=${this.pageId}&id=${id}&equiName=${equiName}&equiCode=${equiCode}&applyOrder=${this.worksheetInfo.applyOrder}&workOrderCode=${this.worksheetInfo.workOrderCode}`
    // 	})
    // },
    // checkDetail({ id, equiName, equiCode, sparePartsJson }) {
    // 	this.$store.commit('maintenance/SET_SPAREPARTSJSON', sparePartsJson)
    // 	uni.navigateTo({
    // 		url: `/pages/maintenance/check/detail?workOrderId=${this.pageId}&id=${id}&equiName=${equiName}&equiCode=${equiCode}&applyOrder=${this.worksheetInfo.applyOrder}&workOrderCode=${this.worksheetInfo.workOrderCode}`
    // 	})
    // },
    handleCheck({ id }) {
      uni.navigateTo({
        url: `/pages/maintenance/check/index?id=${id}`,
      });
    },
    checkDetail({ id }) {
      uni.navigateTo({
        url: `/pages/maintenance/check/detail?id=${id}`,
      });
    },
    getInfo() {
      getWorkOrderDetail({
        workId: this.pageId,
      }).then((data) => {
        this.worksheetInfo = data;
        this.getSparePartsApply(data.id);
      });
      getSpareParts({
        workOrderId: this.pageId,
      }).then((data) => {
        let list = JSON.parse(JSON.stringify(data));
        this.repairInfoLogList = list.reverse();
        this.repairInfoLogList.forEach((item) => {
          this.logs[item.id] = {
            id: item.id,
            content: item.content,
            createTime: item.createTime,
            type: item.type,
            remark: item.remark,
            requestUserName: item.requestUserName,
          };
          if (item.type === "SPARE_PARTS_APPLY") {
            this.logs[item.id].content.infoList =
              this.logs[item.id].content &&
              this.logs[item.id].content.infoList &&
              this.logs[item.id].content.infoList.length > 0
                ? this.logs[item.id].content.infoList.map((item) => {
                    return {
                      ...JSON.parse(item.sparePartsList),
                      sparePartsId: item.sparePartsId,
                    };
                  })
                : [];
          }
          console.log("this.logs---------------");
          console.log(this.logs);
        });
      });
    },
    // 报修
    handLbx(item) {
      uni.navigateTo({
        url: `/pages/repair/repair/index?source=4&workOrderCode=${this.workOrderCode}&equiCode=${item.equiCode}&equiId=${item.equiId}&workOrderId=${this.pageId}&equiName=${item.equiName}&equiModel=${item.equiModel}&equiLocation=${item.equiLocation}`,
      });
    },
    // 报修详情
    handLbxDetail(item) {
      uni.navigateTo({
        url: `/pages/repair/detail/detail?id=${item.repairId}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/components/submitted.scss";

/deep/.u-subsection__item__text {
  font-size: 28rpx !important;
}

/deep/.u-cell__body {
  // {
  // 	font-size: 26rpx !important;
  // }
  // padding: 12rpx 12rpx;

  .u-cell__title-text,
  .input-value,
  .uni-input-wrapper {
    font-size: 26rpx !important;
  }
}

.list-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: $uni-text-color-grey;
  padding: 5rpx 20rpx;
}

.font-sm {
  font-size: $uni-font-size-sm;
}

.font-text {
  color: $uni-text-color;
}

.btn-execute {
  background-color: $j-primary-border-green;
  width: 450rpx;
  margin-top: 10vh;
}

.btn-sparepart {
  width: 450rpx;
  margin-top: 20rpx;
}

.btn-reassignment {
  color: $uni-color-primary;
  background-color: transparent;
  border: none;
  box-shadow: none;

  &::after {
    display: none;
  }
}

.maintenance-container {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100vw;
  display: flex;
  flex-direction: column;

  /deep/.u-popup {
    flex: none !important;
  }
}

.maintenance-wrapper {
  position: relative;
  flex: 1;
}

.maintenance-content {
  padding-top: 12rpx;
  box-sizing: border-box;
  // height: calc(100vh - 88rpx);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
}

.kd-cell {
  line-height: 90rpx;
  border-bottom: 1px dashed #dadada;
  display: flex;
  justify-content: space-between;

  .kd-label {
    display: inline-block;
    width: 7em;
    font-weight: bold;
  }

  .kd-content {
    flex: 1;
    text-align: left;
    word-break: break-all;
  }
}

.kd-baseInfo {
  padding: 0 32rpx;
  font-size: 28rpx;
  overflow: auto;
}

.kd-equipment {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .kd-type-box {
    text-align: center;
    padding: 26rpx 0;

    view {
      position: relative;
      display: inline-block;
      width: 120rpx;
      padding: 4rpx 0;
      color: #747474;
      margin: 0 20rpx;
      background-color: rgba(215, 215, 215, 0.5);

      &.type—active {
        background-color: #1e7f35;
        color: #fff;
      }

      .count {
        position: absolute;
        top: -9px;
        right: -9px;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        font-size: 12px;
        background-color: red;
        color: #fff;
      }
    }
  }

  .kd-list-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 12rpx 18rpx;
    background-color: $page-bg;

    .u-list {
      flex: 1;
      height: 100% !important;
    }
  }
}

.spare-parts {
  flex: 1;
  overflow: hidden;
}

.kd-card {
  background-color: #fff;
  margin-bottom: 20rpx;
  padding: 8rpx 0;
  font-size: 28rpx;
  word-break: break-all;

  .kd-card-wrapper {
    padding: 0 30rpx;
    border-bottom: 1px solid #dadada;
  }

  .kd-cell {
    line-height: 60rpx;
  }

  .kd-cell:last-of-type {
    border-bottom: none;
  }

  .status-box {
    margin-right: 16rpx;
  }

  .card-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 8rpx 0 20rpx;

    button {
      width: 180rpx;
      height: 56rpx;
      line-height: 56rpx;
      font-size: 28rpx;
      margin: 0 8rpx;
    }

    .primary-btn {
      background-color: $j-primary-border-green;
    }
  }
}

.apply-box {
  width: 70%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
</style>