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>{{ userId2 }}</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">
          <p class="tit">处理情况</p>
        </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"
        >
          <div class="label">流转/派单</div>
          <div class="tit">
            <van-radio-group :value="radio" @change="getRadioStatuts">
              <van-radio name="流转">流转</van-radio>
              <van-radio name="派单">派单</van-radio>
            </van-radio-group>
          </div>
        </div>
        <div
          v-if="detail.status == 'unAcceptance' && radio == '派单'"
          class="cell-item flex-item"
          style="width: 100%; min-height: 88rpx; padding: 0"
          @click="openPicker()"
        >
          <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
          v-if="detail.wanderAboutStatus == '未流转' && radio == '流转'"
          class="cell-item flex-item"
          style="width: 100%; min-height: 88rpx; padding: 0"
          @click="openPicker2()"
        >
          <div class="label">流转给</div>
          <div class="tit">
            {{ wanderAboutUserName != null ? wanderAboutUserName : "" }}
            <!-- {{ detail.handleUserName == null }} -->
          </div>
        </div>
        <div
          v-if="detail.wanderAboutStatus != '未流转'"
          class="cell-item flex-item"
          style="width: 100%; min-height: 88rpx; padding: 0"
        >
          <div class="label">流转给</div>
          <div class="tit">
            {{ wanderAboutUserName != null ? wanderAboutUserName : "" }}
            <!-- {{ detail.handleUserName == null }} -->
          </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">
            <div
              class="list-row1"
              v-for="(item, index) in columns"
              :key="index"
              style="justify-content: space-between"
            >
              {{ item.text }}
              <van-checkbox
                :name="item.value"
                @change="onChange($event, index)"
                v-model="item.checked"
              >
              </van-checkbox>
            </div>
          </div>
        </van-popup>

        <div class="custom-item-tit">
          <p class="tit">备注</p>
        </div>
        <div class="custom-textarea-box">
          <uni-easyinput
            type="textarea"
            class="bgcF9F9F9 height218rpx"
            v-model="params.remark"
            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="detailStatus === 'processed' && detail.isUser === 'true'"
    >
      <button class="btn" @click="onPinConfirm">评价提交</button>
    </div>
    <div
      class="repair-bottom bottom-button"
      v-if="
        detail.status === 'unAcceptance' && detail.wanderAboutStatus == '未流转'
      "
    >
      <button class="btn" @click="onConfirm()" v-if="radio == '派单'">
        派单
      </button>

      <button
        class="btn"
        @click="editWanderAboutStatus()"
        v-if="radio == '流转'"
      >
        流转
      </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"
            @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,
} 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 {
      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: "",
      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();
    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: {
    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);
          },
        },
      });
    },
    openPicker() {
      this.showPicker = true;
    },
    openPicker2() {
      this.showPicker2 = true;
    },
    closePicker() {
      this.showPicker = false;
    },
    closePicker2() {
      this.showPicker2 = 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;
    },
    onChange2(event, i) {
      console.log(event);
      console.log(i);
      this.columns2[i].checked = event.detail;
    },
    onChange(event, i) {
      console.log(event);
      console.log(i);
      this.columns[i].checked = event.detail;
    },
    getSelectValue2() {
      let that = this;

      try {
        let wanderAboutUserId = [];
        let wanderAboutUserName = [];
        for (let i = 0; i < that.columns2.length; i++) {
          const element = that.columns2[i];
          if (element.checked) {
            wanderAboutUserName.push(element.text);
            wanderAboutUserId.push(element.value);
          }
        }
        let AllwanderAboutUserName = Array.from(
          new Set(
            wanderAboutUserName.concat(
              that.wanderAboutUserName.length > 0
                ? that.wanderAboutUserName.split(",")
                : []
            )
          )
        );
        let AllHandleUserIds = Array.from(
          new Set(
            wanderAboutUserId.concat(
              that.wanderAboutUserId.length > 0
                ? that.wanderAboutUserId.split(",")
                : []
            )
          )
        );
        that.wanderAboutUserName = AllwanderAboutUserName.toString();
        that.wanderAboutUserId = AllHandleUserIds.toString();
        that.$forceUpdate();
        that.showPicker2 = false;
      } catch (error) {
        console.log(error);
      }
    },
    getSelectValue() {
      let handleUserNames = [];
      let handleUserIds = [];
      for (let i = 0; i < this.columns.length; i++) {
        const element = this.columns[i];
        if (element.checked) {
          handleUserNames.push(element.text);
          handleUserIds.push(element.value);
        }
      }
      console.log(this.handleUserNames.split(","));
      let AllHandleUserNames = Array.from(
        new Set(
          handleUserNames.concat(
            this.handleUserNames.length > 0
              ? this.handleUserNames.split(",")
              : []
          )
        )
      );
      console.log(AllHandleUserNames);
      let AllHandleUserIds = Array.from(
        new Set(
          handleUserIds.concat(
            this.handleUserIds.length > 0 ? this.handleUserIds.split(",") : []
          )
        )
      );
      this.detail.handleUserName = AllHandleUserNames.toString();
      this.params.handleUserId = AllHandleUserIds.toString();
      console.log(this.columns);
      this.$forceUpdate();
      this.showPicker = false;
    },
    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
            : "";
          console.log("this.wanderAboutUserName", this.wanderAboutUserName);
          this.params.handleUserId = det.handleUserId;
          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.params.remark = det.remark == "null" ? "" : det.remark;
          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;
}
.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>