RMYY_CallCenter_UI/CallCenterWe.../RMYYAPP/pages/myTask/comDispatch/comDispatchD.../comDispatchD...

<template>
  <page-meta :root-font-size="getFontSizeValue"></page-meta>
  <view class="wrapper">
    <view class="detailContent">
      <view class="contentTable">
        <text class="contentTitle">工单编号：</text>
        <text class="contentText">{{ detailContentData.F_WorkOrderCode }}</text>
        <!-- <text class="textState" v-show="detailContentData.StateName">{{ detailContentData.StateName }}</text> -->
      </view>
      <view class="contentTable" v-show="detailContentData.StateName">
        <text class="contentTitle">工单状态：</text>
        <text class="textState" style="margin-left: 10px">{{
          detailContentData.StateName
        }}</text>
      </view>
      <view class="contentTable">
        <text class="contentTitle">工单类型：</text>
        <text class="contentText">{{
          $mHelper.findParents(
            orderTypeList,
            detailContentData.F_WorkOrderCategory
          )
        }}</text>
      </view>
      <view class="contentTable">
        <text class="contentTitle">申请科室：</text>
        <text class="contentText">{{
          $mHelper.findParents(departList, detailContentData.F_ApplicationDept)
        }}</text>
      </view>
	  <view class="contentTable">
	    <text class="contentTitle">科室位置：</text>
	    <text class="contentText">{{ detailContentData.F_Location }}</text>
	  </view>
      <view class="contentTable">
        <text class="contentTitle">科室电话：</text>
        <text class="contentText">{{ detailContentData.F_DeptPhone }}</text>
      </view>
      <view class="contentTable">
        <text class="contentTitle">申请时间：</text>
        <text class="contentText">{{ detailContentData.F_CreateTime }}</text>
      </view>
      <view class="contentTable">
        <text class="contentTitle">申请人员：</text>
        <text class="contentText">{{ detailContentData.applicantname }}</text>
      </view>
      <view class="contentTable">
        <text class="contentTitle">联系电话：</text>
        <text class="contentText" style="margin-top: -5px"
          >{{ detailContentData.F_Phone }}
          <uni-icons
            @click="callHandle(detailContentData.F_Phone)"
            class="frContentText"
            type="phone"
            size="30"
          ></uni-icons
        ></text>
      </view>
      <view class="contentTable">
        <view class="contentTitle">工单内容：</view>
        <view class="contentText">{{ detailContentData.F_Content }}</view>
      </view>
      <view class="contentTable">
        <text class="contentTitle">申请位置：</text>
        <text class="contentText">{{ detailContentData.F_Location }}</text>
      </view>
      <!-- <view class="contentTable">
				<text class="contentTitle">送达地点：</text>
				<text class="contentText">{{ detailContentData.F_ToPlace }}</text>
			</view> -->
      <!-- <view class="contentTable">
				<text class="contentTitle">紧急情况：</text>
				<text class="contentText">{{ detailContentData.F_EmergencyTypes }}</text>
			</view> -->
      <view class="contentTable">
        <text class="contentTitle">超时时限：</text>
        <text class="contentText">{{ detailContentData.GapTime }}</text>
      </view>
      <view class="contentTable">
        <text class="contentTitle">接单人员：</text>
        <text class="contentText" v-if="detailContentData.DealManName">{{
          detailContentData.DealManName
        }}</text>
      </view>
      <view class="contentTable">
        <text class="contentTitle">联系电话：</text>
        <text class="contentText" style="margin-top: -5px"
          >{{ detailContentData.DealManPhone }}
          <uni-icons
            @click="callHandle(detailContentData.DealManPhone)"
            class="frContentText"
            type="phone"
            size="30"
            v-if="detailContentData.DealManPhone"
          ></uni-icons
        ></text>
      </view>
      <view
        class="contentTable"
        v-show="isDD.indexOf('DD') >= 0 || isDD === 'GLY'"
      >
        <text class="contentTitle">接单时间：</text>
        <text class="contentText">{{ detailContentData.F_AcceptTime }}</text>
      </view>
      <view class="contentTable">
        <text class="contentTitle">完成时间：</text>
        <text class="contentText">{{ detailContentData.F_Endtime }}</text>
      </view>
      <view class="contentTable">
        <text class="contentTitle">完成时长：</text>
        <text class="contentText">{{ detailContentData.SpendTime }}</text>
      </view>
      <view class="contentTable">
        <text class="contentTitle">配送信息：</text>
        <text
          class="contentText"
          v-if="!String(this.detailContentData.PSInfo)"
        ></text>
        <div style="color: #525252">
          <div v-for="item in detailContentData.PSInfo">
            <span v-if="item.F_ToDept && item.F_ToDept != '0'"
              >送达科室：{{
                $mHelper.findParents(departList, item.F_ToDept)
              }}-</span
            >
            <span v-if="findIndex >= 0">{{
              $mHelper.findParents(orderTypeBBXXList, item.F_DicId) +
              "（" +
              item.F_Number +
              "）"
            }}</span>
            <span v-if="findIndex < 0">{{
              item.F_DicName + "（" + item.F_Number + "）"
            }}</span>
            <span v-if="item.F_IsBorrow == 1">(借)</span>
            <span v-if="item.F_IsBorrow == 2">(还)</span>
            <span v-if="item.F_PaidInQuantity"
              >(实收数量:{{ item.F_PaidInQuantity }})</span
            >
            <span v-else></span>
          </div>
        </div>

        <!-- <view class="contentText" style="" v-for="item in detailContentData.PSInfo">
					<text v-if="item.F_DicName">{{item.F_DicName + '（'+ item.F_Number + '）'}}</text>
					<text v-else class="contentText"></text>
				</view> -->
      </view>
      <view class="contentTable">
        <text class="contentTitle">异常配送信息：</text>
        <text
          class="contentText"
          v-if="!String(this.detailContentData.SDInfo)"
        ></text>
        <div style="color: #525252">
          <div v-for="item in detailContentData.SDInfo">
            <span v-if="item.F_ToDept && item.F_ToDept != '0'"
              >送达科室：{{
                $mHelper.findParents(departList, item.F_ToDept)
              }}-</span
            >
            <span v-if="findIndex >= 0">{{
              $mHelper.findParents(orderTypeBBXXList, item.F_DicId) +
              "（" +
              item.F_Number +
              "）"
            }}</span>
            <span v-if="findIndex < 0">{{
              (item.F_DicName || "") + "（" + item.F_Number + "）"
            }}</span>
            <span v-if="item.F_IsBorrow == 1">(借)</span>
            <span v-if="item.F_IsBorrow == 2">(还)</span>
            <span v-if="item.F_PaidInQuantity"
              >(实收数量:{{ item.F_PaidInQuantity }})</span
            >
            <span v-else></span>
          </div>
        </div>

        <!-- <view class="contentText" style="" v-for="item in detailContentData.PSInfo">
					<text v-if="item.F_DicName">{{item.F_DicName + '（'+ item.F_Number + '）'}}</text>
					<text v-else class="contentText"></text>
				</view> -->
      </view>
      <view class="contentTable" v-if="detailContentData.F_Recipient">
        <text class="contentTitle">接收人：</text>
        <text class="contentText">{{ detailContentData.F_Recipient }}</text>
      </view>
      <view class="contentTable" v-if="detailContentData.F_Recipient">
        <text class="contentTitle">是否异常：</text>
        <text class="contentText">{{
          detailContentData.F_IsAbnormal == 0 ? "否" : "是"
        }}</text>
      </view>
      <!-- <view class="contentTable" v-if="detailContentData.F_WorkOrderCodes">
				<text class="contentTitle">关联工单：</text>
				<text class="contentText">{{ detailContentData.F_WorkOrderCodes }}</text>
			</view> -->
      <view class="contentTable">
        <text class="contentTitle"
          >附&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;件：</text
        >
        <view class="contentText" style="margin-top: 10px">
          <view class="contentText" style="margin-top: 10px">
            <text v-for="item in detailContentData.FileUrl">
              <img
                :src="item.F_FileUrl"
                class="imgstyle"
                v-if="fileType.indexOf(item.F_FileType) > -1"
                @click="downloadFile(item.F_FileUrl)"
              />
              <img
                src="@/static/file.png"
                class="imgstyle"
                v-else
                @click="downloadFile(item.F_FileUrl)"
              />
            </text>
            <text v-for="item in detailContentData.DealFileUrl">
              <img
                :src="item.F_FileUrl"
                class="imgstyle"
                v-if="fileType.indexOf(item.F_FileType) > -1"
                @click="downloadFile(item.F_FileUrl)"
              />
              <img
                src="@/static/file.png"
                class="imgstyle"
                v-else
                @click="downloadFile(item.F_FileUrl)"
              />
            </text>
            <text v-for="item in detailContentData.CollectFile">
              <img
                :src="item.F_FileUrl"
                class="imgstyle"
                v-if="fileType.indexOf(item.F_FileType) > -1"
                @click="downloadFile(item.F_FileUrl)"
              />
              <img
                src="@/static/file.png"
                class="imgstyle"
                v-else
                @click="downloadFile(item.F_FileUrl)"
              />
            </text>
          </view>
          <!-- <uni-file-picker readonly :value="getFileData(detailContentData.FileUrl)" :imageStyles="imageStyles" file-mediatype="image"/> -->
          <!-- <uni-file-picker readonly :value="getFileData(detailContentData.FileUrl)" :imageStyles="imageStyles" file-mediatype="image" v-if="detailContentData.FileUrl"/> -->
          <!-- <uni-file-picker readonly :value="getFileData(detailContentData.DealFileUrl)" :imageStyles="imageStyles" file-mediatype="image" v-if="detailContentData.DealFileUrl"/>
					<uni-file-picker readonly :value="getFileData(detailContentData.CollectFile)" :imageStyles="imageStyles" file-mediatype="image" v-if="detailContentData.CollectFile"/> -->
        </view>
      </view>
    </view>
    <yiLine>
      <view></view>
    </yiLine>

    <view class="operationButton" v-show="orderButtonData">
      <!-- <view class="operationButton" > -->
      <view>
        <text class="operationButtonTitle">操作</text>
        <buttonsComponents
          class="buttons"
          :order-button-data="orderButtonData"
          :wid="workorderid"
          :orderType="workOrdertype"
          :departid="departid"
          :applicationDept="applicationDept"
          :maintenancer="
            $mHelper.findUserName(
              userCodeList,
              detailContentData.F_Maintenancer
            )
          "
        />
      </view>
    </view>

    <yiLine>
      <view></view>
    </yiLine>
    <view style="background-color: #fff; padding: 17px">
      <view class="segmentedControlWrapper">
        <uni-segmented-control
          :current="segmenter.current"
          :values="segmenter.items"
          @clickItem="onClickSegmentedControl"
          styleType="text"
          activeColor="#007aff"
        />
      </view>
      <view class="handleProcess">
        <view v-show="current == 0">
          <uni-steps
            :options="orderProcessDate"
            :steteName="'gdlc'"
            v-if="orderProcessDate"
          />
          <view class="contentTable noCon" v-else> 暂时无相关记录 </view>
        </view>
        <view v-show="current == 2">
          <view
            class="detailContent showType"
            v-for="item in evaluateDate"
            :key="item.F_Id"
          >
            <view class="contentTable">
              <text class="contentTitle">服务态度：</text>
              <htz-rate
                v-model="item.F_Attitude"
                :readonly="true"
                :size="30"
                :type="2"
              ></htz-rate>
              <text class="contentTitle">{{
                item.F_Attitude | getEvaluateFilters
              }}</text>
            </view>
            <view class="contentTable">
              <text class="contentTitle">维修质量：</text>
              <htz-rate
                v-model="item.F_Quality"
                :size="30"
                :type="2"
              ></htz-rate>
              <text class="contentTitle">{{
                item.F_Quality | getEvaluateFilters
              }}</text>
            </view>
            <view class="contentTable">
              <text class="contentTitle">完工时效：</text>
              <htz-rate
                v-model="item.F_Efficiency"
                :size="30"
                :type="2"
              ></htz-rate>
              <text class="contentTitle">{{
                item.F_Efficiency | getEvaluateFilters
              }}</text>
            </view>
            <view class="contentTable">
              <text class="contentTitle">文字评价：</text>
              <text class="contentText">{{ item.F_EvaluateContent }}</text>
            </view>
          </view>
          <view class="contentTable noCon" v-show="evaluateDate">
            暂时无相关记录
          </view>
        </view>
        <view v-show="current == 1">
          <view
            class="detailContent showType"
            v-for="item in sonData"
            :key="item.F_Id"
          >
            <view class="contentTable">
              <text class="contentTitle">工单编号：</text>
              <text class="contentText">{{ item.F_WorkOrderCode }}</text>
            </view>
            <view class="contentTable">
              <text class="contentTitle">接单人员：</text>
              <text class="contentText"
                >{{ item.DealManName }}-{{ item.DealManPhone }}</text
              >
            </view>
            <view class="contentTable">
              <text class="contentTitle">接单时间：</text>
              <text class="contentText">{{ item.F_AcceptTime }}</text>
            </view>
          </view>
          <view class="contentTable noCon" v-show="!sonData"> 暂时数据 </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import yiLine from "@/components/yi-line/yi-line.vue";
import buttonsComponents from "pages/myTask/workOrderDetail/button/button";
import pageData from "@/pages/myTask/repairList/addRepair/pageData.js";
import uniSteps from "@/pages/components/steps/index.vue";
import htzRate from "@/pages/components/htz-rate/htz-rate.vue";
const segmenterData = {
  0: ["工单流程", "关联工单", "工单评价"],
  1: ["工单流程", "工单评价"],
};
export default {
  components: {
    yiLine,
    buttonsComponents,
    uniSteps,
    htzRate,
  },
  filters: {
    getEvaluateFilters(state) {
      const data = {
        1: "不满意",
        2: "不满意",
        3: "基本满意",
        4: "满意",
        5: "满意",
      };
      return data[state];
    },
  },
  data() {
    return {
      isDD: uni.getStorageSync("roleCode"),
      getFontSizeValue: "1rem",
      active: 1,
      current: 0,
      workorderid: "", // 工单id
      sms_id: "", // 消息id
      tap: "", //工单切换
      roleCode: "", //角色
      departList: [], //部门数据
      orderTypeList: [], // 工单状态
      orderTypeBBXXList: [], //标本信息
      userCodeList: [], //用户信息
      detailContentData: {}, // 详情内容
      orderButtonData: [],
      departid: "",
      applicationDept: "",
      workOrdertype: "",
      sonData: [],
      findIndex: -1,
      evaluateDate: [], // 评价
      orderProcessDate: [], // 工单流程
      workOrderButton: [], // 工单按钮权限
      fileType: [".png", ".jpg", ".webp", ".bmp", ".jpeg"],
      segmenter: {
        current: 0,
        items: ["0", "1", "2"],
        type: "",
      },
      imageStyles: {
        width: 64,
        height: 64,
        border: {
          radius: "20%",
        },
      },
      isDisplay: {
        displaySegmentedControl: false, // 分段器
      },
    };
  },
  onLoad(optioin) {
    this.getFontSizeValue = uni.getStorageSync("fontSizeValue") + "rem";
    this.workorderid = optioin.wid;
    this.sms_id = optioin.sms_id;
    this.getGongDanType();
    this.getGongDanTypeBBXX();
    this.getDetail(0);
    this.getDetail(1);
    this.getDetail(2);
    this.getDetail(3);
    console.log(this.sms_id);
    console.log(optioin.buttons);
    if (this.sms_id) {
      this.getButtons();
    } else if (optioin.buttons) {
      JSON.parse(optioin.buttons).forEach((v) => {
        let btn = this.$mButtonConfig[v.key];
        if (btn != undefined) {
          this.orderButtonData.push(btn);
        }
      });
    }
    // pageData.getDet((res, data) => {
    // 	console.log(data)
    // 	this.departList = data
    // })
    this.departList = JSON.parse(uni.getStorageSync("deptTreeData"));

    pageData.getApplicant("", (res) => {
      this.userCodeList = res;
    });
    // this.isDisplay.displaySegmentedControl = true
    // this.segmenter.type = 0
    // this.segmenter.items = segmenterData[0]

    if (this.sms_id) {
      this.isDisplay.displaySegmentedControl = true;
      this.segmenter.type = 0;
      this.segmenter.items = ["工单流程", "关联工单", "工单评价"];
      this.getDetail(2);
    } else {
      this.isDisplay.displaySegmentedControl = true;
      this.segmenter.type = optioin.segmenter;
      this.segmenter.items = segmenterData[optioin.segmenter];
      this.getDetail(2);
    }
    this.roleCode = uni.getStorageSync("roleCode");
  },
  methods: {
    callHandle(phone) {
      if (!phone) {
        this.$mHelper.toast("无号码信息");
        return;
      }
      uni.makePhoneCall({
        phoneNumber: phone, //仅为示例
      });
    },
    getButtons() {
      this.orderButtonData = [];
      const params = {
        SMS_Id: this.sms_id,
      };
      this.$http.get("InternalMessages/GetButtons", params).then((res) => {
        if (res.state.toLowerCase() === "success") {
          res.rows[0].Buttons.forEach((v) => {
            let btn = this.$mButtonConfig[v.key];
            if (btn != undefined) {
              this.orderButtonData.push(btn);
            }
          });
        }
      });
    },
    getGongDanType() {
      let dataOrderType = [];
      const params = {
        pid: 0,
        flag: 1,
      };
      this.$http.get("GongDanType/GetList", params).then((res) => {
        if (res.state.toLowerCase() === "success") {
          this.orderTypeList = res.data;
        }
      });
    },
    getGongDanTypeBBXX() {
      let dataOrderType = [];
      const params = {
        pid: 0,
        flag: 1,
      };
      this.$http.get("GongDanType/GetBBXXList", params).then((res) => {
        if (res.state.toLowerCase() === "success") {
          this.orderTypeBBXXList = res.data;
        }
      });
    },
    getGongDanType() {
      let dataOrderType = [];
      const params = {
        pid: 0,
        flag: 1,
      };
      this.$http.get("GongDanType/GetList", params).then((res) => {
        if (res.state.toLowerCase() === "success") {
          this.orderTypeList = res.data;
        }
      });
    },
    getFileData(fileData) {
      let newFile = [];
      if (fileData && fileData.length > 0) {
        fileData.forEach((element, index) => {
          const obj = {};
          obj.url = element.F_FileUrl;
          obj.extname = element.F_FileType.split(".")[1];
          obj.name = element.F_FileName;
          newFile.push(obj);
        });
      }
      return newFile;
    },
    getDetail(type) {
      const params = {
        WorkOrderCode: this.workorderid,
        type: type,
      };
      this.$http
        .get("Scheduling/GetWorkOrder", params)
        .then((response) => {
          if (response.state.toLowerCase() === "success") {
            if (type == 0) {
              this.detailContentData =
                response.data && response.data.length > 0
                  ? response.data[0]
                  : {};
              // console.log(this.detailContentData.F_WorkOrderCategory,'88999')
              this.workOrdertype = this.detailContentData.F_WorkOrderCategory;
              this.applicationDept = this.detailContentData.F_ApplicationDept;
              const identification = this.$mHelper.findParents(
                this.orderTypeList,
                this.F_WorkOrderCategory
              );

              if (identification) {
                this.findIndex = identification.indexOf("标本");
              }
            } else if (type == 1) {
              this.orderProcessDate = [];
              response.data.forEach((v) => {
                this.orderProcessDate.push({
                  F_OperationTime: v.F_OperationTime,
                  username: v.username,
                  F_LogContent: v.F_LogContent,
                });
              });
              console.log(this.orderProcessDate);
            } else if (type == 2) {
              this.evaluateDate = response.data;
            } else if (type == 3) {
              if (response.data == null) {
                this.segmenter.items = segmenterData[1];
                this.segmenter.type = "1";
              }
              this.sonData = response.data;
            }
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    onClickSegmentedControl(e) {
      this.current = e.currentIndex;
      switch (String(e.currentIndex)) {
        case "0":
          this.tap = 1;
          break;
        case "1":
          this.tap = 2;
          break;
        case "2":
          this.tap = 3;
          break;
      }
      this.getDetail(this.tap);
    },
    downloadFile(url) {
      uni.downloadFile({
        url: encodeURI(url), //仅为示例，并非真实的资源
        success: (res) => {
          if (res.statusCode === 200) {
            uni.openDocument({
              filePath: res.tempFilePath,
              success: (res) => {},
            });
          }
        },
      });
    },
  },
};
</script>

<style lang="scss">
/deep/ .uni-file-picker[data-v-363ace0e] {
  display: inline-block !important;
  width: 20% !important;
}
.noCon {
  height: 200px;
  text-align: center;
  // font-size: 14px;
  color: #525252;
}
/deep/.segmented-control__text {
  font-size: 1rem;
}
/deep/ .set2-test {
  font-size: 1rem;
}
/deep/.set-2 .set-view .setTitle {
  font-size: 1rem;
}
/deep/.set-2 .set-view .setCon {
  font-size: 1rem;
}
.imgstyle {
  width: 64px;
}
.wrapper {
  // background-color: #fff;
  // height: 100vh;
  // padding: 10px 20px 0 20px;
  .showType {
    background-color: #fff;
    padding: 10px 13px;
    border-radius: 10px;
    box-shadow: 0px 4px 16px 0px rgba(69, 91, 99, 0.13);
    margin-bottom: 25px;
  }
  .detailContent {
    // margin: 0 0 15px 0;
    padding: 17px;
    background-color: #fff;

    .contentTable {
      margin: 0 0 10px 0;
      display: flex;
      .contentTitle {
        // font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
        font-weight: 700;
        // text-align-last: justify;
        font-style: normal;
        // font-size: 14px;
        color: #555555;
        width: 34%;
        display: inline-block;
        text-align: right;
      }

      .frContentText {
        font-size: 25px !important;
        color: #1e90ff !important;
        margin-left: 15px !important;
      }

      .contentText {
        width: 66%;
        color: #525252;
        // font-size: 14px;
        margin-left: 10px;
      }

      .textState {
        // position: absolute;
        // right: 15px;
        // font-size: 12px;
        border: 1px solid #52c41a;
        padding: 2px 5px;
        color: #52c41a;
        background-color: rgba(195, 239, 161, 0.2);
        border-radius: 5px;
      }

      .fx {
        // right: 70px;
        border: 1px solid #ff6e54;
        color: #ff6e54;
        background-color: rgba(255, 110, 84, 0.2);
        margin-left: 20px;
      }
    }
  }

  .operationButton {
    margin: 5px 0;
    padding: 17px;
    background-color: #fff;

    .operationButtonTitle {
      font-weight: 700;
    }

    .buttons {
      margin: 15px 0 0 0;
    }
  }

  .equipmentInfo {
    width: 100%;
    margin-top: 15px;
    border: 1px solid rgb(229, 229, 229);
    box-shadow: 0px 4px 16px 0px rgba(69, 91, 99, 0.05);
    margin-bottom: 20px;
    border-radius: 5px;

    .trCon {
      width: 100%;
      // font-size: 14px;

      .tdCon {
        display: inline-block;
        padding: 10px 0px;
        color: rgb(102, 102, 102);
        width: 31%;
        padding-right: 5px;
        text-align: center;
      }
    }
  }

  .handleProcess {
    margin: 15px 0;

    .handleProcessTitle {
      font-weight: 700;
    }

    .handleProcessContent {
      margin: 8px 0 0 0;

      .handleProcessContentTime text {
        // font-size: 14px;
        color: #73d13d;
      }

      .handleProcessContentText text {
        // font-size: 14px;
        color: #525252;
      }
    }
  }
}
</style>