HSW_WX/pages/subPackages/repairDispatch-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 == null ? "" : 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 @click="lookLookpng(explainAnnexList, index)" class="annex-item"
                v-for="(item, index) in explainAnnexList" :key="index">
                <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.reporter }}</span>
            <TelNum :num="detail.phone" v-if="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="margin-bottom: 100rpx; padding-bottom: 100rpx">
        <div class="custom-item-tit">
          <span class="tit">
            <div style="margin-left: 15px;"> 处理情况</div>
          </span>
        </div>
        <div class="block-cell-item">
          <p class="label">处理进展</p>
          <div class="tit">
            <van-steps :active="stepActive" :active-color="'#6600FF'" :steps="processSteps">
            </van-steps>
          </div>
        </div>

        <div v-if="detail.status == 'unAcceptance'" class="cell-item flex-item"
          style="width: 100%; min-height: 88rpx; padding: 0" @click="openPicker2()">
          <div class="label">处理人</div>
          <div class="tit">
            {{ detail.handleUserName != null ? detail.handleUserName : "" }}
            <!-- {{ detail.handleUserName == null }} -->
          </div>
        </div>
        <div v-if="detail.status != 'unAcceptance'" class="cell-item flex-item"
          style="width: 100%; min-height: 88rpx; padding: 0">
          <div class="label">处理人</div>
           <div class="tit">
           {{ detail.handleUserName != null ? detail.handleUserName : "" }}
<!--           {{ detail.handleUserName == null }} -->
           </div>
        </div>
        <div class="hanlderList">
          <div class="hanlderList-row" v-for="item in handleList">
            <div>
              {{ item.handleUserName }}
            </div>
            <div class="status-box color7ee47b" v-if="item.status == 1">
              待处理
            </div>
            <div class="status-box color7ee47b" v-if="item.status == 2">
              待确认
            </div>
            <div class="status-box color7ee47b" v-if="item.status == 3">
              已完成
            </div>
            <div class="status-box coloreb8488" v-if="item.status == 4" @click="openPicker(item.id)">
              已退回
            </div>
            <div class="status-box color7ee47b" v-if="item.status == 5">
              待处理
            </div>
            <div class="status-box coloreb8488" v-if="item.status == 6">
              已作废
            </div>
          </div>
        </div>
        <van-popup :show="showPicker" position="bottom" round :closeable="false" :close-on-click-overlay="false">
          <div style="display: flex; justify-content: space-between">
            <div style="margin: 32rpx" @click="closePopup()">取消</div>
            <div style="margin: 32rpx" @click="getSelectValue()">确认</div>
          </div>
          <uni-easyinput v-model="name" placeholder="请输入内容" @confirm="getName" @iconClick="getName"
            suffixIcon="search"></uni-easyinput>

          <div style="height: 50vh">
            <van-radio-group :value="theReplacer" @change="getReplacer">

            <div class="list-row1" v-for="(item, index) in columns" :key="index" style="justify-content: space-between">
              {{ item.text }}
              <van-radio  :name="item.value" :value="item.value" >
<!--                {{item.text}}-->
              </van-radio>
            </div>
            </van-radio-group>

          </div>
        </van-popup>

        <div class="custom-item-tit">
          <!-- <p class="tit">备注</p> -->
          <span class="tit">
            <div style="margin-left: 15px;"> 备注</div>
          </span>
        </div>
        <div class="custom-textarea-box">
          <uni-easyinput type="textarea" class="bgcF9F9F9 height218rpx" v-model="params.handleExplain" autoHeight
            placeholder="请填写" show-word-limit :disabled="detail.status != 'unAcceptance'">
          </uni-easyinput>
        </div>
      </div>
      <!-- -->
      <div class="white-box page-4" v-if="detailStatus === 'processed' && detail.isUser === 'true'"
        style="padding-bottom: 120rpx">
        <div class="custom-item-tit">
          <p class="tit">服务评价</p>
        </div>
        <div class="custom-white-box-content">
          <div class="evaluate-box">
            <p class="evaluate-left">企业对本次服务的评价</p>
            <div class="evaluate-right">
              <van-rate :vlaue="evaluateVal" color="#ffd21e" @change="getRate" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--       v-if="detailStatus === 'processed' && detail.isUser === 'true'" -->
    <div class="repair-bottom bottom-button" v-if="stepActive==0">
      <button class="btn" @click="submit">提交</button>
    </div>
    <van-popup :show="showPicker2" position="bottom" round :closeable="false" :close-on-click-overlay="false">
      <div style="display: flex; justify-content: space-between">
        <div style="margin: 32rpx" @click="closePopup2()">取消</div>
        <div style="margin: 32rpx" @click="getSelectValue2()">确认</div>
      </div>
      <uni-easyinput v-model="name2" placeholder="请输入内容" @confirm="getName2" @iconClick="getName2"
                     suffixIcon="search"></uni-easyinput>

      <div style="height: 50vh">
        <div class="list-row1" v-for="(item, index) in columns2" :key="index" style="justify-content: space-between">
          {{ item.text }}
          <van-checkbox :name="item.value" :value="item.value" @change="onChange($event, index)" v-model="item.checked">
          </van-checkbox>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import vanPopup from "../../../wxcomponents/weapp/dist/popup/index";
import vanRate from "../../../wxcomponents/weapp/dist/rate/index";
import TelNum from "../../subPackages/components/tel-number";
// import { getRepairDispatchById, getDispatchToPerson } from "../../service/api_repair";
import {
  getByCodes,
  getRepairDispatchById,
  getUserLocalStorageInfo,
  getDispatchToPerson,
  editRepair,
  editWanderAboutStatus,
  getInfoListByRepairId,
  dispatchType,
  dispatchCancel,
  handleList
} from "@/js_sdk/http";
import Toast from "../../../wxcomponents/weapp/dist/toast/toast";
// import Base from "@/pages/base/base";
// import { editRepair } from "@/service/api_repair";
// import { getCompanyById } from "@/service/api_road_show";
// import { Toast, ImagePreview } from "vant";
export default {
  components: {
    TelNum,
    vanPopup,
    vanRate,
  },
  data() {
    return {

      theReplacer:'',
      radio: "流转",
      columns2: [],
      name2: "",
      dic_key: ["QUICK_SELECTION", "REPAIR_STATUS"],
      dic_SelectList: {},
      detailId: "", // 详情id
      value: "",
      showPicker2: false,
      showPicker: false,
      name: "",
      columns: [],
      result: [],
      pickerValue: 0,
      handleUserNames: "",
      handleUserIds: "",
      detailStatus: "unAcceptance", // 1  待派单  2已派单
      explainAnnexList: [
        {
          type: "image",
          url: "",
        },
      ], // 说明附件 type image、图片 video、视频
      processedAnnexList: [
        {
          type: "image",
          url: "",
        },
      ], // 附件 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: {},
      wanderAboutUserName: "",
      wanderAboutUserId: "",
      isSelectedIndex: 0,
      fileUrlList: [],
      pingParams: {
        id: "",
        evaluateNum: "",
        score: "",
      },
      lzPopuStatus: false,
      userId2: "",
      handleList: [],
      reportRepairInfoId:null,
      params: {
        id: "",
        status: "acceptance",
        dispatchUserId:
          getUserLocalStorageInfo().user.id +
          "-" +
          getUserLocalStorageInfo().user.truename +
          "-" +
          getUserLocalStorageInfo().user.phone, // getUserLocalStorageInfo().user.current
        dispatchTime: this.$common.transServDate(new Date()),
        handleUserId: "",
        remark: "",
      },
    };
  },

  onLoad(option) {
    console.log(option);
    this.id = option.id;

    this.getByCodes();
    this.getInfoListByRepairId()
    getDispatchToPerson({ groupId: "", name: "" }).then((res) => {
      this.columns = res.data;
    });
    getDispatchToPerson({ groupId: "", name: "" }).then((res) => {
      this.columns2 = res.data;
      console.log(this.columns2);
      console.log(res.data);
    });

  },
  methods: {

    async submit() {
      let that = this
      let ischeck = this.columns2.some(item => item.checked);
      console.log(ischeck)

      if(!ischeck){
        that.$showToast("请至少选择一个处理人");
        return
      }
      let param = {
        dispatchType: 1,
        id: that.id,
        handleUserId: that.handleUserIds,
        userId: getUserLocalStorageInfo().user.id,
        handleExplain:that.params.handleExplain
      }
      let data = await dispatchType(param)
      // that.getInfoListByRepairId()
      console.log(data)
      if(data.code == 200) {
        that.$showToast('提交成功');
        uni.navigateBack({});
      }
    },
    async getInfoListByRepairId() {
      let { data } = await getInfoListByRepairId(this.id)
      console.log('getInfoListByRepairId', data)
      this.handleList = data.length > 0 ? data : []
    },
    getRadioStatuts(e) {
      this.radio = e.detail;
      console.log(e);
    },
    async editWanderAboutStatus() {
      try {
        if (!this.wanderAboutUserName || this.wanderAboutUserName.length == 0) {
          this.$showToast("请选择流转人");
          return;
        }
        let param = {
          id: this.id,
          wanderAboutUserId: this.wanderAboutUserId,
        };
        let data = await editWanderAboutStatus(param);
        console.log(data);
        if (data.code == 200) {
          this.$showToast("订单已流转");
          uni.navigateBack({});
        }
      } catch (error) {
        console.log(error);
      }
    },
    changelzPopuStatus(status) {
      this.lzPopuStatus = status;
    },
    liuzhuan() {
      console.log(this.columns2[pickerValue]);
      console.log(123);
    },
    closePopup() {
      this.showPicker = false;
    },
    closePopup2() {
      this.showPicker2 = false;
    },
    getRowValue(event) {
      console.log(event.detail);
      this.result = event.detail;
    },
    getName2() {
      console.log(123, this.name);
      let that = this;
      getDispatchToPerson({ name: this.name2, groupId: "" }).then((res) => {
        that.columns2 = res.data;
        that.pickerValue = 0;
        that.$forceUpdate();
      });
    },

    getName() {
      console.log(123, this.name);
      let that = this;
      getDispatchToPerson({ name: this.name, groupId: "" }).then((res) => {
        that.columns = res.data;
        that.$forceUpdate();
      });
    },
    lookLookpng(imgList, i) {
      console.log(imgList);
      uni.previewImage({
        urls: imgList,
        longPressActions: {
          itemList: ["发送给朋友", "保存图片", "收藏"],
          success: function (data) {
            console.log(data);
          },
          fail: function (err) {
            console.log(err);
          },
        },
      });
    },
    openPicker2() {
      this.showPicker2 = true;
    },
     openPicker(e=null) {
      console.log(e);
      let that = this;
      that.reportRepairInfoId = e ? e : null;

      uni.showModal({
        title: '提示',
        content: '当前派单已被退回，请完成后续处理',
        confirmText:'重新派单',
        cancelText:'任务作废',
        cancelColor:'red',
        success: async function (res) {
          if (res.confirm) {
            that.showPicker = true;
          } else if (res.cancel) {
            console.log('用户点击取消');
            let data = await dispatchCancel({
              dispatchType:2,
              reportRepairId:that.id,
              // handleUserId:that.theReplacer,
              userId: getUserLocalStorageInfo().user.id,
              id:that.reportRepairInfoId,
            })
            that.getInfoListByRepairId()
            that.$showToast("派单已作废");
          }
        }
      });

    },

    closePicker() {
      this.showPicker = false;
    },

    async getByCodes() {
      let data = await getByCodes(JSON.stringify(this.dic_key));
      this.dic_SelectList = this.$common.handleDicList(data);
      this.getDetailById();
    },
    onSelect(event) {
      let val = event.detail.value;
      this.value = val.text;
      this.params.handleUserId = val.value + "-" + val.text;
      this.showPicker = false;
    },

    onChange(event, i) {
      console.log(event.detail);
      // console.log(i);
      this.columns2[i].checked = event.detail ;
    },

async getSelectValue2() {
      let that = this;
      let handleUserNames = [];
      let handleUserIds = [];


      for (let i = 0; i < this.columns2.length; i++) {
        const element = this.columns2[i];
        if (element.checked) {
          handleUserNames.push(element.text);
          console.log(element.value)
          handleUserIds.push(element.value);
        }
      }
      that.handleUserIds=handleUserIds.join(",")
      that.detail.handleUserName=handleUserNames.join(",")
      that.showPicker2 = false;



      // this.showPicker2 = false;

    },
    onChange2(event, i) {
      console.log(event);
      console.log(i);
      this.columns2[i].checked = event.detail;
    },
    async getSelectValue() {

      let that = this;
      if(!that.theReplacer){
        that.$showToast('请选择替换的处理人')
        return
      }
      console.log(that.theReplacer)
      let index = that.handleList.findIndex((row)=>{
        return that.theReplacer===row.handleUserId
      })
      if(index != -1) {
        that.$showToast('该处理人已在列表中请勿重复选择')
        return
      }
      let param = {
        dispatchType:2,
        id:this.id,
        handleUserId:that.theReplacer,
        userId: getUserLocalStorageInfo().user.id,
        reportRepairInfoId:that.reportRepairInfoId,
      }
      let {data } =await dispatchType(param)
      that.getInfoListByRepairId()

      that.showPicker = false;
    },
    getReplacer(e){
      let that = this;
      console.log(e.detail)
      that.theReplacer=e.detail;
      console.log(that.theReplacer)
      // console.log(this.handleList)
      // handleUserId
    },
    onPinConfirm(value) {
      this.pingParams.evaluateNum = this.pingParams.evaluateNum + 1;
      this.pingParams.score = this.pingParams.score + this.evaluateVal;
      this.pingParams.status = "evaluated";
      editRepair(this.pingParams).then((res) => {
        this.$showToast("评价成功");
        uni.navigateBack({});
      });
    },
    onConfirm() {
      let that = this;
      if (
        !that.params.handleUserId ||
        that.params.handleUserId == null ||
        that.params.handleUserId === "" ||
        that.params.handleUserId.length == 0
      ) {
        this.$showToast("请选择处理人");
        return;
      }
      this.params.id = that.id;
      that.params.updatedBy = getUserLocalStorageInfo().user.id;
      editRepair(that.params).then((res) => {
        this.$showToast("派单成功");
        uni.navigateBack({});
      });
    },
    open(item, index) {
      //
      let that = this;
      let fileUrlViewList = that.detail.fileUrlViewList.map((e) => {
        return e.url;
      });
      uni.previewImage({
        urls: fileUrlViewList,
      });
    },
    getDetailById() {
      const _this = this;
      getRepairDispatchById(_this.id).then((res) => {
        if (res.data) {
          const det = _this.getItemJson(res.data);
          this.detail = det;

          this.explainAnnexList = det.fileUrlViewList;
          this.processedAnnexList = det.handleUrlList;
          this.detailStatus = det.status;
          this.wanderAboutUserName = det.wanderAboutUserName
            ? det.wanderAboutUserName
            : "";
          this.params.handleUserId = det.handleUserId;
          console.log('det',det)
          this.params.handleExplain=res.data.handleExplain
          console.log("this.wanderAboutUserName", this.params.handleExplain);

          this.value = det.dispatchUserId;
          if (det.handleUserId != null && det.handleUserId !== "") {
            const test = det.handleUserId.split("-");
            this.value = test[1] + "-" + test[2];
          }

          // if (det.userId != null && det.userId !== "") {
          //   const test = det.userId.split("-");
          //   this.userId2 = test[1] + "-" + test[2];
          // }
          this.pingParams = {
            id: det.id,
            evaluateNum: det.evaluateNum,
            score: det.score,
          };
          // this.evaluateVal = ((det.score == null ? 0 : det.score) / (det.evaluateNum == null ? 1 : det.evaluateNum))
        }
        // const item = _this.getItemJson(res)
      });
    },
    getRate(event) {
      this.evaluateVal = event;
    },
    getItemJson: function (item) {
      //   item.releaseTime = this.$common.transBaseDateTime(item.releaseTime);
      //   item.createdAt = this.$common.transBaseDateTime(item.createdAt);
      item.serviceType =
        this.dic_SelectList.QUICK_SELECTION[item.serviceType - 1].label;

      //   if (item.handleUserId) {
      //     item.handlePhone = item.handleUserId.split("-")[1];
      //   }
      //   item.handleTime = this.$common.transDate(item.handleTime);
      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;
      }
      const fileUrls = item.fileUrl ? item.fileUrl.split(",") : [];
      console.log("files你到底是干嘛的", fileUrls);
      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;

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

      if (handleUrls !== null && handleUrls.length > 0) {
        handleUrls.forEach((item) => {
          if (item.url) {
            const ul = {
              type: "image",
              url: item.url,
            };
            handleUrl.push(ul);
          }
        });
      }
      item.handleUrlList = handleUrl;
      console.log(item);
      return item;
    },
    /**
     *
     */
    quickSelect(item) {
      if (this.quickSleced.val && this.quickSleced.val === item.val) {
        this.quickSleced = {};
      } else {
        this.quickSleced = item;
      }
    },
    /**
     * 上传文件
     */
    afterRead(file) {
      console.log(file);
    },
  },
};
</script>
<style lang="scss">
.list-row1 {
  width: calc(100% - 64rpx);
  padding: 16rpx 32rpx 18rpx 32rpx;
  background: #ffffff;
  display: flex;
  //height: 278rpx;
  border-radius: 8rpx 8rpx 8rpx 8rpx;
}

.hanlderList {
  .hanlderList-row {
    background-color: #fcf9ff;
    display: flex;
    padding: 10rpx 20rpx;
    justify-content: space-between;
  }

  .status-box {
    padding: 5rpx 10rpx;
    border-radius: 1.5rem;
    color: white;
  }

  .color7ee47b {
    background-color: #7ee47b;
  }

  .coloreb8488 {
    background-color: #eb8488;
  }
}

.bottom-button {
  position: fixed;
  z-index: 99;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 160rpx;
  padding: 35rpx 30rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-around;
  box-sizing: border-box;

  .btn {
    height: 100%;
    line-height: 80rpx;
    width: 100%;
    color: #fff;
    background-color: #6600ff;
    font-size: 34rpx;
    border-radius: 10rpx;
  }
}

.titname {
  margin-top: 10rpx;
  margin-bottom: 10rpx;
}

.repair-detail-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: 20rpx 30rpx;
      background: $page-color-base;
      border: 2rpx solid #ebedf0;
      border-radius: 100rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
    }
  }

  .annex-list-box {
    display: flex;
    flex-wrap: wrap;

    &::after {
      display: block;
      content: "";
      width: 30%;
      height: 0rpx;
    }

    .annex-item {
      width: 240rpx;
      height: 240rpx;
      border: 2rpx solid $text4;
      margin-bottom: 20rpx;
      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: 20rpx;
    }
  }
}
</style>
<style lang="scss">
.image-repairDispatch-box {
  .van-image-preview__close-icon {
    color: #fff;
    font-size: 64rpx;
  }
}
</style>