HSW_WX/pages/subPackages/repairprocessing-app/detail.vue

<template>
  <div class="repair-detail-box">
    <div
      :class="[
        'repair-content',
        detailStatus === 'unAcceptance' ? 'fixed-page-content' : 'page-content',
      ]"
    >
      <div class="white-box page-1">
        <div class="cell-item">
          <p class="label">当前企业</p>
          <p class="tit">{{ detail.companyName }}</p>
        </div>
        <!-- <div class="cell-item">
          <p class="label">您是想</p>
          <div class="tit">{{ detail.type === "1" ? "报事" : "咨询" }}</div>
        </div> -->
        <div class="cell-item">
          <p class="label">快捷选择</p>
          <div class="tit">{{ detail.serviceType }}</div>
        </div>
        <div class="block-cell-item">
          <p class="label">工单描述</p>
          <div class="tit">
            <div class="textarea">
              {{ !detail.description ? "暂无" : detail.description }}
            </div>
          </div>
        </div>
      </div>
      <div class="white-box page-2">
        <!-- <div class="cell-item">
          <p class="label">位置</p>
          <div class="tit">{{ detail.position === "1" ? "室内" : "公区" }}</div>
        </div> -->
        <div class="block-cell-item">
          <p class="label">补充说明</p>
          <div class="tit">
            <ul class="annex-list-box">
              <li
                class="annex-item"
                v-for="(item, index) in explainAnnexList"
                :key="index"
              >
                {{ item }}
                <img :src="item" alt="" />
              </li>
            </ul>
          </div>
        </div>
        <div class="cell-item flex-item">
          <p class="label">联系方式</p>
          <p class="tit tel-box">
            <span>{{ detail.contact }}</span>
            <!-- {{ detail.phone }} -->
            <TelNum
              :num="detail.contact"
              :showTel="false"
              v-if="detail.contact && detail.contact.length > 0"
            />
          </p>
        </div>
        <div class="cell-item flex-item">
          <p class="label">报事人</p>
          <p class="tit tel-box">
            <span>{{ userId2 }}</span>
            <!-- {{ detail.phone }} -->
            <TelNum :num="detail.phone" :showTel="false" />
          </p>
        </div>
        <div class="cell-item">
          <p class="label">报事时间</p>
          <p class="tit">{{ detail.createdAt }}</p>
        </div>
      </div>
      <div class="white-box page-3 form-part" style="padding-bottom: 120px">
        <div class="custom-item-tit">
          <p class="tit">处理情况</p>
        </div>
        <div class="block-cell-item">
          <p class="label">处理进展</p>
          <div>
            <van-steps
              :active="stepActive"
              :active-color="'#6600FF'"
              :steps="processSteps"
            >
            </van-steps>
          </div>
        </div>

        <div class="cell-item">
          <p class="label">派单人</p>
          <p class="tit">{{ dispatchUserId2 }}</p>
        </div>
        <div class="cell-item">
          <p class="label">派单时间</p>
          <p class="tit">{{ detail.dispatchTime }}</p>
        </div>

        <div class="block-cell-item">
          <p class="label">备注</p>
          <div class="tit">
            <div class="textarea">
              {{ detail.remark == "null" ? "暂无" : detail.remark }}
            </div>
          </div>
        </div>

        <div class="block-cell-item">
          <p class="label">
            处理后拍照<span class="tips">（支持图片上传限20M内，最多6张）</span>
          </p>
          <div class="tit" v-if="detail.status === 'acceptance'">
            <van-uploader
              @delete="deleteRYXXZP"
              :file-list="handleUrlList"
              :max-count="6"
              @after-read="afterRead"
              :show-upload="true"
            >
            </van-uploader>
          </div>
          <div class="tit" v-else>
            <ul class="annex-list-box">
              <li
                class="annex-item"
                v-for="(item, index) in handleUrlList"
                :key="index"
              >
                <img :src="item.url" alt="" />
              </li>
            </ul>
          </div>
        </div>
        <div class="custom-item-tit">
          <p class="tit">处理说明</p>
        </div>
        <div class="custom-textarea-box">
          <uni-easyinput
            :disabled="detail.status !== 'acceptance'"
            type="textarea"
            class="bgcF9F9F9 height218rpx"
            v-model="detail.handleExplain"
            autoHeight
            placeholder="请填写"
            show-word-limit
          >
          </uni-easyinput>
        </div>
        <div class="cell-item">
          <p class="label">结案人</p>
          <p class="tit">{{ handleUserId2 }}</p>
        </div>

        <div class="cell-item">
          <p class="label">结案时间</p>
          <p class="tit">{{ detail.handleTime ? detail.handleTime : "" }}</p>
        </div>
      </div>
    </div>
    <div
      class="repair-bottom bottom-button"
      v-if="detail.status === 'acceptance'"
    >
      <button class="btn" @click="onConfirm">提交</button>
    </div>
  </div>
</template>
<script>
import TelNum from "../../subPackages/components/tel-number";
import vanRate from "../../../wxcomponents/weapp/dist/rate";
import {
  editRepair,
  getRepairDispatchById,
  getByCodes,
  getUserLocalStorageInfo,
} from "@/js_sdk/http";
// import Base from '@/pages/base/base'
// import { editRepair } from '@/service/api_repair'
// import { Toast } from 'vant'
// import auth from '@/service/auth'
// import axios from 'axios'
export default {
  components: {
    TelNum,
    vanRate,
  },
  data() {
    return {
      handleUserId2: "",
      userId2: "",
      dispatchUserId2: "",
      dic_key: ["QUICK_SELECTION", "REPAIR_STATUS"],
      dic_SelectList: {},
      detailId: "", // 详情id
      handleUrlList: [],
      fileUrls: [],
      handleUrls: [],
      detailStatus: "1", // 1  待派单  2已派单
      explainAnnexList: [], // 说明附件 type image、图片 video、视频
      processedAnnexList: [], // 附件 type image、图片 video、视频
      stepActive: 0, // 当前处理到哪一步
      processSteps: [
        {
          id: 1,
          status: 1,
          text: "上报",
        },
        {
          id: 2,
          status: 1,
          text: "已受理",
        },
        {
          id: 3,
          status: 1,
          text: "已处理",
        },
        // {
        //   id: 4,
        //   status: 0,
        //   text: "评价",
        // },
      ], // 处理流程
      evaluateVal: 0, // 评分
      id: "",
      detail: {},
      fileUrlList: [],
      params: {
        id: "",
        handleUrl: "",
        handleTime: "",
        status: "processed",
      },
    };
  },
  onLoad(option) {
    this.id = option.id;
    this.getByCodes();
  },
  methods: {
    async getByCodes() {
      let data = await getByCodes(JSON.stringify(this.dic_key));
      this.dic_SelectList = this.$common.handleDicList(data);
      this.getDetailById();
    },
    onSelect(val) {
      this.value = val.text;
      this.params.handleUserId = val.value + "-" + val.text;
      this.showPicker = false;
    },
    onConfirm(value) {
      if (!this.detail.handleExplain || this.detail.handleExplain.length == 0) {
        this.$showToast("请填写处理说明");
        return;
      }
      this.params.id = this.id;
      //   handleUrlList
      this.params.handleTime = this.detail.handleTime;
      //   this.params.handleUrlList = this.params.handleUrlList.join(",");
      let handleUrlList = [];
      if (this.handleUrlList && this.handleUrlList.length > 0) {
        handleUrlList = this.handleUrlList.map((e) => {
          return e.id;
        });
      }
      this.params.handleExplain = this.detail.handleExplain;
      this.params.updatedBy = getUserLocalStorageInfo().user.id;
      this.params.handleUrl = handleUrlList.join(",");
      editRepair(this.params).then((res) => {
        this.$showToast("结案成功");
        uni.switchTab({
          url: "/pages/index/index",
        });
        // this.$router.push({ path: "/repairprocessing-app" });
      });
    },
    getDetailById() {
      const _this = this;
      getRepairDispatchById(_this.id).then((res) => {
        console.log(res.data);
        if (res.data) {
          let det = _this.getItemJson(res.data);
          this.detail = det;
          this.detail.handleExplain = det.handleExplain;
          if (det.userId != null && det.userId !== "") {
            const test = det.userId.split("-");
            this.detail.phone = test[2];
            this.userId2 = test[1] + "-" + test[2];
          }
          if (det.dispatchUserId != null && det.dispatchUserId !== "") {
            const test = det.dispatchUserId.split("-");
            console.log(test);
            this.dispatchUserId2 = test[1] + "-" + test[2];
          }
          if (det.handleUserId != null && det.handleUserId !== "") {
            // const test = det.handleUserId.split("-");
            // console.log(test);

            this.handleUserId2 = det.handleUserName;
          }

          this.handleUrlList = det.handleUrlList;
          console.log("asodmqowndonq", this.handleUrlList);
          this.explainAnnexList = det.fileUrlViewList;
          //   this.processedAnnexList = det.handleUrlList;
          this.detailStatus = det.status;
          this.params.remark = det.remark;
        }
      });
    },
    getItemJson: function (item) {
      const fileUrls = item.fileUrl ? item.fileUrl.split(",") : [];

      const fileUrlViews = [];
      if (fileUrls !== null && fileUrls.length > 0) {
        fileUrls.forEach((item) => {
          item =
            this.$constant.BASE_URI + "/wx/fileController/download/" + item;
          fileUrlViews.push(item);
        });
      }
      item.fileUrlViewList = fileUrlViews;
      if (!item.handleTime) {
        item.handleTime = this.$common.transServDate(new Date());
      }

      const handleUrls = item.handleUrl ? item.handleUrl.split(",") : [];

      const handleUrlViews = [];
      if (handleUrls !== null && handleUrls.length > 0) {
        handleUrls.forEach((item) => {
          handleUrlViews.push({
            url:
              this.$constant.BASE_URI + "/wx/fileController/download/" + item,
            isImage: true,
          });
        });
      }
      item.handleUrlList = handleUrlViews;
      console.log(item);
      item.serviceType =
        this.dic_SelectList.QUICK_SELECTION[item.serviceType - 1].label;

      switch (item.status) {
        case "unAcceptance":
          this.stepActive = 0;
          break;
        case "acceptance":
          this.stepActive = 1;
          break;
        case "evaluated":
          this.stepActive = 3;
          break;
        case "processed":
          this.stepActive = 2;
          break;
      }

      return item;
    },
    afterRead(event) {
      let that = this;
      const { file } = event.detail;

      try {
        uni.uploadFile({
          url: that.$constant.BASE_URI + "/wx/fileController/upload",
          filePath: file.url,
          name: "file",
          formData: { user: "test" },
          success(res) {
            // 上传完成需要更新 fileList
            let { data } = JSON.parse(res.data);
            console.log(data[0]);

            that.handleUrlList.push({
              id: data[0],
              url:
                that.$constant.BASE_URI + "/FileController/download/" + data[0],
              isImage: true,
            });
            that.handleUrlList = [...that.handleUrlList];
            that.$forceUpdate();
            console.log(that.fileUrlList);
          },
          fail(res) {},
        });
      } catch (error) {}
    },
    beforeDelete(file, detail) {
      // this.handleImagUrlList = []
      const vm = this;
      // name.index代表图片的索引
      vm.handleUrls.splice(detail.index, 1);
      return (file, name) => {
        const fileIndex = name.index;
        vm.handleUrls[detail.index].splice(fileIndex, 1);
      };
    },
    /**
     * 上传图片
     */
    uploadImg(file) {
      const _this = this;
      const formParam = new FormData(); // 创建form对象
      formParam.append("file", file.file); // 通过append向form对象添加数据
      console.log(formParam.get("file")); // FormData私有类对象，访问不到，可以通过get判断值是否传进去
      // upload(formParam).then((res) => {
      //
      // })
      const config = {
        headers: {
          "Content-Type": "multipart/form-data",
          "MVVM-Key": String(new Date().getTime()),
          xx: "anything",
        }, // 这里是重点，需要和后台沟通好请求头，Content-Type不一定是这个值
      }; // 添加请求头
      return new Promise((resolve, reject) => {
        axios
          .post(
            "/smartParkH5Server/wx/fileController/upload",
            formParam,
            config
          )
          .then((response) => {
            let files = response.data.data.substring(
              1,
              response.data.data.length
            );
            files = files.substring(0, files.length - 1);
            _this.handleUrls.push(_this.$common.castEval(files));
          })
          .catch((err, x) => {
            reject(err, x);
          });
      });
    },
  },
};
</script>
<style lang="scss" >
.bottom-button {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  height: 160rpx;
  padding: 35rpx 30rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  .btn {
    height: 100%;
    line-height: 80rpx;
    width: 100%;
    color: #fff;
    background-color: #6600ff;
    font-size: 34rpx;
    border-radius: 10rpx;
  }
}
.repair-detail-box {
  .page-4 {
    .evaluate-box {
      padding: 20rpx 30rpx;
      background: $page-color-base;
      border: 1rpx solid #ebedf0;
      border-radius: 100rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
    }
  }
  width: 100%;
  height: 100%;
  .page-1 {
    .textarea {
      padding: 20rpx;
      border-radius: 10rpx;
      background: $page-color-base;
      box-sizing: border-box;
    }
  }

  .page-3 {
    padding-bottom: 100rpx;
    .input-item {
      padding: 0;
    }
    .custom-item-tit {
      height: 13.333vw;
      font-size: 4.267vw;
      color: #333;
      padding: 2.667vw 0;
      position: relative;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      .tit {
        &::after {
          content: "";
          width: 0.8vw;
          height: 90%;
          background-color: #976dec;
          border-radius: 0.4vw;
          position: absolute;
          left: 0;
          top: 50%;
          -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
        }
      }
    }
    .tit {
      padding-left: 2.667vw;
      position: relative;
    }
  }
  .page-4 {
    .custom-item-tit {
      height: 13.333vw;
      font-size: 4.267vw;
      color: #333;
      padding: 2.667vw 0;
      position: relative;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      .tit {
        &::after {
          content: "";
          width: 0.8vw;
          height: 90%;
          background-color: #976dec;
          border-radius: 0.4vw;
          position: absolute;
          left: 0;
          top: 50%;
          -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
        }
      }
    }
    .tit {
      padding-left: 2.667vw;
      position: relative;
    }
    s .evaluate-box {
      padding: 20px 30px;
      background: $page-color-base;
      border: 1px solid #ebedf0;
      border-radius: 100px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
    }
  }
  .annex-list-box {
    display: flex;
    // flex-wrap: wrap;
    // justify-content: space-between;
    &::after {
      display: block;
      content: "";
      width: 30%;
      height: 0px;
    }
    .annex-item {
      width: 240rpx;
      height: 240rpx;
      border: 1px solid $text4;
      margin-bottom: 20px;
      position: relative;
      overflow: hidden;
      > img {
        width: 240rpx;
        height: 240rpx;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        display: block;
      }
      video {
        width: 100%;
        height: 100%;
      }
    }
  }
  .tel-box {
    display: flex;
    align-items: center;
    /deep/ .custom-tel-component {
      margin-left: 20px;
    }
  }
}
</style>
  <style lang="scss">
.image-repairDispatch-box {
  .van-image-preview__close-icon {
    color: #fff;
    font-size: 64px;
  }
}
</style>s