HSW_WX/pages/subPackages/serve-confirm/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">

            <van-uploader :file-list="explainAnnexList" disabled class="infoUpload"/>

            <!--            <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>{{ detail.reporter }}</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">
          <div class="tit">
            <div style="padding-left: 15rpx;">
              处理情况
            </div>
          </div>
        </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 == "undefind" ? "暂无" : detail.remark }}
            </div>
          </div>
        </div>

        <div class="block-cell-item">
          <p class="label">
            处理后拍照{{ detail.status }}<span class="tips">（支持图片上传限20M内，最多6张）</span>
          </p>
          <div class="tit">
            <van-uploader @delete="deleteRYXXZP" :file-list="handleUrlList" :max-count="6" @after-read="afterRead"
              :disabled="detail.status == 3" :show-upload="true">
            </van-uploader>
          </div>

        </div>
        <div class="custom-item-tit">
          <div class="tit">
            <div style="margin-left: 15rpx;">
              处理说明
            </div>
          </div>
        </div>
        <div class="custom-textarea-box">
          <uni-easyinput :disabled="detail.status !== '1'" 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 class="custom-item-tit">
          <div class="tit">
            <div style="margin-left: 15rpx;">
              服务确认
            </div>
          </div>
        </div>
        <div>
          <div style="margin-bottom: 15rpx;">
            <van-radio-group :value="confirmForm.status" :disabled="detail.status == 3||detail.status == 4" direction="horizontal" @change="getConfirmFormStatus"
              bind:change="getConfirmStatus">
              <van-radio name="3">通过</van-radio>
              <van-radio name="4">退回</van-radio>
            </van-radio-group>
          </div>
          <div class="custom-textarea-box">
            <uni-easyinput type="textarea" class="bgcF9F9F9 height218rpx" :disabled="detail.status == 3||detail.status == 4"
              v-model="confirmForm.confirmRemark" autoHeight placeholder="请填写" show-word-limit>
            </uni-easyinput>
          </div>
        </div>
      </div>
    </div>
    <div class="repair-bottom bottom-button">
      <button class=" btn" @click="onConfirm" v-if="detail.status == 2">提交</button>
    </div>
  </div>
</template>
<script>
import TelNum from "../../subPackages/components/tel-number";
import vanRate from "../../../wxcomponents/weapp/dist/rate";
import {
  editRepair,
  getHandleInfoById,
  getByCodes,
  getUserLocalStorageInfo, confirmReport
} 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: [],
      confirmForm: {
        status: '3'
      },
      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: {
    getConfirmFormStatus(e){
      console.log(e)
      this.confirmForm.status = e.detail;
    },
    getConfirmStatus(e) {
      console.log(e)
    },
    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;
    },
    async onConfirm() {
      let that = this
      if(that.confirmForm.status==4&&(!that.confirmForm.confirmRemark||that.confirmForm.confirmRemark.length==0)){
        that.$showToast('如选择退回派单请填写原因')
        return
      }
      console.log(that.confirmForm)
      let confirmForm = {
        ...that.confirmForm,
        userId: getUserLocalStorageInfo().user.id,
        id: that.id,
        reportRepairId: that.detail.reportRepairId,
        confirmRemark: that.confirmForm.confirmRemark
      }
      let data = await confirmReport(confirmForm)
      console.log(data)
      if (data.code == 200) {
        that.$showToast("提交成功");
        uni.navigateBack({});
      }
    },
    getDetailById() {
      const _this = this;
      getHandleInfoById(_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.dispatchUserId != null && det.dispatchUserId !== "") {
            const test = det.dispatchUserId.split("-");
            this.dispatchUserId2 = test[1] + "-" + test[2];
          }
          if (det.handleUserId != null && det.handleUserId !== "") {
            this.handleUserId2 = det.handleUserName;
          }

          this.handleUrlList = det.handleUrlList;
          console.log("asodmqowndonq", this.handleUrlList);
          // this.explainAnnexList = det.fileUrlViewList;
          if(det.fileUrl&&det.fileUrl.length > 0) {
            this.explainAnnexList = det.fileUrl.split(',').map(e => {
              return{
                url:this.$constant.BASE_URI + "/wx/fileController/download/" + e,
                isImage: true,
                deletable: false,
              }
            });
          }
          //   this.processedAnnexList = det.handleUrlList;
          this.detailStatus = det.status;
          this.params.remark = det.remark;
          this.confirmForm.confirmRemark = det.confirmRemark=='null'?'':det.confirmRemark
          this.confirmForm.status = det.status

        }
      });
    },
    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) {
        // console.log(status)
        case "0":
          this.stepActive = 0;
          break;
        case "1":
          this.stepActive = 1;
          break;
        case "2":
          this.stepActive = 2;
          break;
        case "3":
          this.stepActive = 3;
        case "4":
          this.stepActive = 4;
        case "5":
          this.stepActive = 5;
          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">
.infoUpload{
  .van-uploader__upload--disabled{
    display: none;
  }
}
.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