AnYang_UI/anyangWebAPP/pages/workOrderDet.../workOrderDet...

<template>
  <view class="wrapper">
    <view class="detailContent">
      <view class="contentTable">
        <text class="contentTitle">工单编号：</text>
        <text class="contentText">{{ detailContentData.F_WorkOrderId }}</text>
      </view>
      <view class="contentTable">
        <text class="contentTitle">标题：</text>
        <text class="contentText">{{ detailContentData.F_ComTitle }}</text>
      </view>
      <view class="contentTable">
        <text class="contentTitle">来电内容：</text>
        <text class="contentText">{{ detailContentData.F_ComContent }}</text>
      </view>
      <view class="contentTable">
        <text class="contentTitle">工单内容：</text>
        <text class="contentText">{{ detailContentData.F_Content == null ? detailContentData.F_ComContent : detailContentData.F_Content}}</text>
      </view>
      <view class="contentTable">
        <text class="contentTitle">来电人：</text>
        <text class="contentText">{{ detailContentData.F_CusName }}</text>
      </view>
      <view class="contentTable">
        <text class="contentTitle">来电号码：</text>
        <text class="contentText">{{ detailContentData.F_CusPhone }}</text>
      </view>
      <view class="contentTable">
        <text class="contentTitle">来源：</text>
        <text class="contentText">{{ detailContentData.SourceName }}</text>
      </view>
    </view>
    <yiLine>
      <view></view>
    </yiLine>
    <view class="operationButton">
      <view>
        <text class="operationButtonTitle">操作</text>
        <view class="buttons">
          <button class="mini-btn" type="default" size="mini" v-for="item in workOrderButton" @click="callBtnMethods(item.eventName)" :key="item.id">{{ item.text }}</button>
          <!-- <button class="mini-btn" type="default" size="mini"  @click="editBtn">查看</button>
          <button class="mini-btn" type="default" size="mini" @click="editBtn">编辑</button> -->
          <!-- <button class="mini-btn" type="default" size="mini" @click="transferBtn">转派</button> -->
        </view>
      </view>
    </view>
    <yiLine>
      <view></view>
    </yiLine>
    <view class="handleProcess">
      <view>
        <text class="handleProcessTitle">办理过程</text>
        <view class="handleProcessContent" v-for="item in handleProcessListData" :key=item.F_Id>
          <view class="handleProcessContentTime">
            <text>{{ item.F_CreateTime }}</text>
          </view>
          <view class="handleProcessContentText">
            <text>{{ item.F_Message }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import yiLine from "../../components/yi-line/yi-line.vue"
const allButton = {
  1: {
    id: 1,
    text: "查看",
    eventName: "viewBtn",
  },
  2: {
    id: 2,
    text: "编辑",
    eventName: "editBtn",
  }
}
export default {
  components: {
    yiLine,
  },
  data() {
    return {
      wid: "", // 工单id
      detailContentData: {}, // 详情内容
      handleProcessListData: [], // 办理过程
      workOrderButton: [], // 工单按钮权限
    }
  },
  onLoad(option) {
    this.wid = option.wid;
    // 获取详情
    this.getDetail("0");
    // 获取办理过程
    this.getDetail("9");
  },
  methods: {
    getDetail(type) {
      let params = {
        type: type,
        workorderid: this.wid,
        token: uni.getStorageSync("token"),
      }
      this.$http.get("/WorkOrder/GetWorkOrderNew", params).then((response) => {
          if (response.state.toLowerCase() === "success") {
            let data = response.data;
            if (type === "0") {
              this.detailContentData = data.data[0];
              let btnData = data.btndata;
              if (btnData.length > 0) {
                btnData.forEach((element, index) => {
                  let btn = allButton[element.key];
                  if (btn != undefined) {
                    this.workOrderButton.push(btn);
                  }
                });
              }
            } else if (type === "9") {
              this.handleProcessListData = data;
            }
          }
        }).catch((e) => {
          console.log(e);
        })
    },
    callBtnMethods(methodName) {
      this[methodName]();
    },
    viewBtn() {
      uni.navigateTo({
        url: "/pages/viewWorkOrder/viewWorkOrder?wid=" + this.wid,
      })
    },
    editBtn() {
      uni.navigateTo({
        url: "/pages/editWorkOrder/editWorkOrder?wid=" + this.wid,
      })
    },
    transferBtn() {
      uni.navigateTo({
        url: "/pages/transferWorkOrder/transferWorkOrder?wid=" + this.wid,
      })
    },
  },
}
</script>

<style lang="scss">
.wrapper {
  padding: 10px 10px 0 10px;
  .detailContent {
    margin: 0 0 15px 0;
    .contentTable {
      margin: 0 0 5px 0;
      .contentTitle {
        font-weight: 700;
        font-size: 14px;
      }
      .contentText {
        color: #525252;
        font-size: 14px;
      }
    }
  }
  .operationButton {
    margin: 15px 0;
    .operationButtonTitle {
      font-weight: 700;
    }
    .buttons {
      margin: 10px 0 0 0;
      .mini-btn {
        margin-right: 3px;
        color: #fff;
        background: #1e90ff;
      }
    }
  }
  .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>