AnYang_UI/anyangWebAPP/pages/transferWork.../transferWork...

<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_CreateTime }}</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">{{ String(detailContentData.F_IsProtect) === "0" ? "普通" : "保密" }}</text>
      </view>
      <view class="contentTable">
        <text class="contentTitle">地址：</text>
        <text class="contentText">{{ detailContentData.AreaName + detailContentData.F_SourceAddress }}</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.SourceName }}</text>
      </view>
    </view>
    <view class="form">
      <form @submit="formSubmit" @reset="formReset">
        <view class="uni-form-item uni-column">
          <view class="title">承办单位：</view>
          <view>
            <bjx-inputs the-style="" :value="formData.deptName" item-key="F_DeptName" placeholder="请输入内容" @list="getDeptData" @select="selectDept" overflow="hide"> </bjx-inputs>
          </view>
        </view>
        <view class="uni-form-item uni-column" v-if="isDisplay.urgentOrOrdinary">
          <view class="uni-title uni-common-pl">办理时限：</view>
          <view class="uni-list">
            <view class="uni-list-cell">
              <view class="uni-list-cell-db">
                <picker @change="bindPickerChangeProcessingTimeLimit" :value="pickerIndex.indexProcessingTimeLimit" :range="processingTimeLimitListData" :range-key="'text'">
                  <view class="uni-input">{{ processingTimeLimitListData[pickerIndex.indexProcessingTimeLimit].text }}</view>
                </picker>
              </view>
            </view>
          </view>
        </view>
        <view class="uni-form-item uni-column" v-if="!isDisplay.urgentOrOrdinary">
          <view class="uni-title uni-common-pl">紧急时限：</view>
          <view class="uni-list">
            <view class="test">
              <input class="uni-input" @click="DatePicker('datetime')" name="emergencyTimeFrame" :value="formData.emergencyTimeFrame" placeholder="紧急时限" />
              <!-- <text @click="DatePicker('datetime')">{{ formData.emergencyTimeFrame }}</text> -->
            </view>
            <mx-date-picker :show="showPicker" type="datetime" :value="formData.emergencyTimeFrame" :show-tips="true" :begin-text="'开始'" :end-text="'结束'" :show-seconds="true" @confirm="ed" @cancel="ed" />
          </view>
        </view>
        <view class="uni-form-item uni-column">
          <view class="title">调度意见：</view>
          <view class="uni-textarea">
            <textarea name="schedulingOpinions" :value="formData.schedulingOpinions" auto-height />
          </view>
        </view>
        <view class="uni-btn-v">
          <button form-type="submit" class="mini-btn" size="mini" type="default">保存</button>
        </view>
      </form>
      <!-- <view>
        <button form-type="submit" class="mini-btn" size="mini" type="default" @click="returnPage">返回</button>
      </view> -->
    </view>
  </view>
</template>

<script>
import BjxInputs from "@/components/bjx-inputs/bjx-inputs.vue"
import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue"
// import bjxList from './list.vue' // 若要查看微信小程序 自定义组件嵌套产生的问题 可打开

export default {
  components: {
    BjxInputs,
    MxDatePicker,
  },
  data() {
    return {
      wid: "", // 工单编号
      detailContentData: {}, // 详情内容
      deptListData: [],
      formData: {
        deptName: "", // 部门名称
        deptId: "", // 部门id
        processingTimeLimit: "1", // 普通时限
        schedulingOpinions: "请于1小时内与来电人取得联系（匿名除外），并于7个工作日内将办理情况反馈来电人，并将办理结果报市长便民公开电话受理中心，同时做好来电人信息保密工作。（若超期将进行通报；若无故不回复，将转交市委市政府督查局。）", // 调度意见
        emergencyTimeFrame: "", // 紧急时限
      },
      pickerIndex: {
        indexProcessingTimeLimit: 0, // 来源index
      },
      processingTimeLimitListData: [
        {
          value: "1",
          text: "一天",
        },
        {
          value: "3",
          text: "三天",
        },
        {
          value: "5",
          text: "五天",
        },
        {
          value: "7",
          text: "七天",
        },
      ],
      isDisplay: {
        urgentOrOrdinary: true,
      },
      showPicker: false,
    }
  },
  onLoad(option) {
    this.wid = option.wid
    // 获取详情
    this.getDetail("0")
    // 获取交办信息
    // this.getDetail("1")
    //获取部门
    this.getDeptList()
  },
  methods: {
    formSubmit: function (e) {
      this.formData.schedulingOpinions = e.detail.value.schedulingOpinions
      console.log("form发生了submit事件，携带数据为：" + JSON.stringify(e.detail.value))
      this.saveData()
    },
    // 保存
    saveData() {
      const params = {
        workorderid: this.wid,
        state: 1, // 保存并交办
        maindeptid: String(this.formData.deptId), // 承办单位
        limittime: this.formData.processingTimeLimit, // 办理时限
        limittimes: this.formData.emergencyTimeFrame, // 紧急办理时限
        assignedopinion: this.formData.schedulingOpinions, //调度意见
        // assignid: "",
        token: uni.getStorageSync("token"),
      }
      this.$http
        .post("/WorkOrder/AssignWorkOrderNew", params)
        .then((response) => {
          if (response.state.toLowerCase() === "success") {
            this.returnPage()
          }
        })
        .catch((e) => {
          console.log(e)
        })
    },
    // 返回列表页
    returnPage() {
      uni.$emit("updateList",{});
      uni.navigateBack({
        delta: 2,
      })
    },

    //获取详情
    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]
              this.isDisplay.urgentOrOrdinary = String(this.detailContentData.F_Level) === "2" ? false : true
            } 
          }
        })
        .catch((e) => {
          console.log(e)
        })
    },

    getDeptList() {
      let params = {
        iscbdw: 2,
        token: uni.getStorageSync("token"),
      }
      this.$http
        .get("/Department/GetDeptList", params)
        .then((response) => {
          if (response.state.toLowerCase() === "success") {
            let data = response.data
            this.deptListData = data
          }
        })
        .catch((e) => {
          console.log(e)
        })
    },

    // 远程加载数据 返回一个对象，{value: 输入框值, callback: 回调函数}
    getDeptData(e) {
      console.log("e", e)
      this.formData.deptName = e.value
      if (!e.value) {
        e.callback(this.deptListData)
      } else {
        let data = []
        this.deptListData.forEach((item) => {
          if (item.F_DeptName.indexOf(e.value) > -1) {
            data.push(item)
          }
        })
        e.callback(data)
      }
    },
    
    selectDept(value) {
      this.formData.deptName = value.F_DeptName
      this.formData.deptId = value.F_DeptId
    },

    //办理时限change
    bindPickerChangeProcessingTimeLimit: function (e) {
      this.pickerIndex.indexProcessingTimeLimit = e.target.value
      this.formData.processingTimeLimit = this.processingTimeLimitListData[e.target.value].value
    },

    DatePicker(type) {
      //显示
      this.type = type
      this.showPicker = true
      this.formData.emergencyTimeFrame = this[type]
    },
    ed(e) {
      //选择
      this.showPicker = false
      if (e) {
        //选择的值
        console.log("value => " + e.value)
        //原始的Date对象
        console.log("date => " + e.date)
        this.timeFormat(e.date)
      }
    },
    timeFormat(date) {
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      month = month < 10 ? "0" + month : month
      let day = date.getDate()
      day = day < 10 ? "0" + day : day
      let hours = date.getHours()
      hours = hours < 10 ? "0" + hours : hours
      let minute = date.getMinutes()
      minute = minute < 10 ? "0" + minute : minute
      let seconds = date.getSeconds()
      seconds = seconds < 10 ? "0" + seconds : seconds
      let time = `${year}-${month}-${day} ${hours}:${minute}:${seconds}`
      this.formData.emergencyTimeFrame = time
    },
  },
}
</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;
      }
      .contentText {
        color: #525252;
      }
    }
  }
  .form {
    .uni-form-item {
      margin: 10px 0 0 0;
      padding: 0 0 5px 0;
      border-bottom: 1px solid #bfbfbf;
    }
    .uni-btn-v {
      margin: 15px 0 0 0;
      text-align: center;
      button {
        background: #1e90ff;
        color: #eee;
      }
    }
  }
}
</style>