AnYang_UI/anyangWebAPP/pages/workOrderList/workOrderLis...

<template>
  <view class="wrapper">
    <view v-if="isDisplay.displaySegmentedControl" class="segmentedControlWrapper">
      <uni-segmented-control :current="segmenter.current" :values="segmenter.items" @clickItem="onClickSegmentedControl" styleType="text" activeColor="#007aff"></uni-segmented-control>
      <view class="content">
        <view v-show="segmenter.current === 0"></view>
        <view v-show="segmenter.current === 1"></view>
      </view>
    </view>
    <view class="tableWrapper">
      <uni-table border stripe emptyText="暂无更多数据">
        <!-- 表头行 -->
        <uni-tr>
          <!-- <uni-th align="center">序号</uni-th> -->
          <uni-th align="center">工单单号</uni-th>
          <uni-th align="center">诉求标题</uni-th>
          <uni-th align="center" v-if="isDisplay.displayCallContent">来电内容</uni-th>
          <uni-th align="center">承办单位</uni-th>
          <uni-th align="center">受理人</uni-th>
          <uni-th align="center">办理状态</uni-th>
          <uni-th align="center">时限</uni-th>
          <uni-th align="center">办理时限</uni-th>
        </uni-tr>
        <!-- 表格数据行 -->
        <uni-tr v-for="item in listData" :key="item.F_WorkOrderId">
          <!-- <uni-td align="center">{{  }}</uni-td> -->
          <uni-td align="center">
            <view @click="workOrderIdClick(item.F_WorkOrderId)">
              {{ item.F_WorkOrderId }}
            </view>
          </uni-td>
          <uni-td align="center">{{ item.F_ComTitle | limitContentLength(item) }}</uni-td>
          <uni-td align="center" v-if="isDisplay.displayCallContent">{{ item.F_ComContent | limitContentLength(item) }}</uni-td>
          <uni-td align="center">{{ item.DeptName }}</uni-td>
          <uni-td align="center">{{ item.UserName }}</uni-td>
          <uni-td align="center">{{ item.F_WorkState | workOrderState(item) }}</uni-td>
          <uni-td align="center">{{ item.GapTime }}</uni-td>
          <uni-td align="center">{{ item.LimitTime }}</uni-td>
        </uni-tr>
      </uni-table>
    </view>
    <view>
      <uni-pagination title="标题文字" show-icon="true" :total="dataTotal" current="1" @change="changePages"></uni-pagination>
    </view>
  </view>
</template>

<script>
const urlData = ["WorkOrder/GetList", "WorkOrder/GetLDDealList", "WorkOrder/GetDWDealList", "WorkOrder/GetZXDealList", "WorkOrder/GetTimeOutList", "workorder/GetSupervList"]
const segmenterData = {
  0: ["热线件", "督办件"], // 已办待回访
  1: ["未追加回复", "已追加回复"], // 已办待回访
}
export default {
  data() {
    return {
      listData: [],
      paramsData: {},
      pageNumber: 1,
      dataTotal: 0,
      segmenter: {
        current: 0,
        items: ["0", "1"],
        type: "",
      },
      isDisplay: {
        displaySegmentedControl: false, // 分段器
        displayCallContent: true, // 来电内容
      },
    }
  },
  onLoad(optioin) {
    optioin.page = 1 // 页码
    optioin.pagesize = 10 // 条数
    this.paramsData = optioin
    this.getList(this.paramsData)
    if (optioin.segmenter == undefined || optioin.segmenter == null || optioin.segmenter == "") {
      this.isDisplay.displaySegmentedControl = false
    } else {
      this.isDisplay.displaySegmentedControl = true
      this.segmenter.type = optioin.segmenter
      this.segmenter.items = segmenterData[optioin.segmenter]
    }
    /* 
      displayCallContent
      1：不显示来电内容
    */
    if (String(optioin.displayCallContent) === "1") {
      this.isDisplay.displayCallContent = false
    }
    // 页面
    uni.$on("updateList", (res) => {
      this.listData = []
      this.paramsData.page = 1
      this.paramsData.pagesize = 10
      this.getList(this.paramsData)
      console.log(res)
    })
  },
  onUnload() {
    // 移除监听事件
    uni.$off("updateList")
  },
  methods: {
    getList(optioin) {
      const params = {
        page: optioin.page,
        pagesize: optioin.pagesize,
        tab: optioin.tab == undefined ? "" : optioin.tab,
        state: optioin.state == undefined ? "" : optioin.state,
        jianhang: optioin.jianhang == undefined ? "" : optioin.jianhang,
        phoneType: optioin.phoneType == undefined ? "" : optioin.phoneType,
        db: optioin.db == undefined ? "" : optioin.db,
        isproresult: optioin.isproresult == undefined ? "" : optioin.isproresult,
        tobereply: optioin.tobereply == undefined ? "" : optioin.tobereply,
        token: uni.getStorageSync("token"),
      }
      let workOrderListType = Number(optioin.workOrderListType)
      let url = urlData[workOrderListType]
      this.$http
        .get(url, params)
        .then((response) => {
          if (response.state.toLowerCase() === "success") {
            let data = response.rows
            data = data.reverse()
            this.listData = data.concat(this.listData)
            this.dataTotal = response.total
            uni.stopPullDownRefresh()
          }
        })
        .catch((e) => {
          console.log(e)
        })
    },
    workOrderIdClick(value) {
      uni.navigateTo({
        url: "/pages/workOrderDetail/workOrderDetail?wid=" + value,
      })
    },
    onClickSegmentedControl(e) {
      this.listData = []
      switch (String(this.segmenter.type)) {
        case "0":
          if (String(e.currentIndex) === "0") {
            this.paramsData.db = 0
          } else if (String(e.currentIndex) === "1") {
            this.paramsData.db = 1
          }
          break
        case "1":
          if (String(e.currentIndex) === "0") {
            this.paramsData.isproresult = 1
          } else if (String(e.currentIndex) === "1") {
            this.paramsData.isproresult = 2
          }
          break
      }
      this.getList(this.paramsData)
    },
    changePages(e) {
      this.listData = []
      this.paramsData.page = e.current
      this.paramsData.pagesize = 10
      this.getList(this.paramsData)
    }
  },
  filters: {
    // 工单状态过滤
    workOrderState(value, options) {
      var resultData = ""
      switch (value + "") {
        case "0":
          resultData = "新工单"
          if (options.F_IsReturn == 1) {
            resultData = "新工单（回退）"
          }
          break
        case "1":
          resultData = "待交办"
          break
        case "2":
          resultData = "待查收"
          break
        case "3":
          resultData = "退回审核中"
          break
        case "4":
          resultData = "办理中"
          break
        case "5":
          resultData = "延时审核"
          break
        case "6":
          if (options.F_IsProtect === 2 || options.F_IsProtect === 3) {
            resultData = "已办未果"
          } else {
            resultData = "已办理"
          }
          break
        case "7":
          resultData = "已回访"
          break
        case "8":
          if (options.F_Identification === 0) {
            resultData = "重置转发"
          } else if (options.F_Identification === 1) {
            resultData = "退回重办"
          } else {
            resultData = "重办中"
          }
          break
        case "9":
          resultData = "已结案"
          break
        case "10":
          resultData = "待审核"
          break
        case "11":
          resultData = "重办待交办"
          break
        //              case '12':
        //                  resultData = '待审核';
        //                  break;
        case "13":
          resultData = "重办驳回"
          break
      }
      return resultData
    },

    // 限制内容长度
    limitContentLength(value, options) {
      if (value) {
        if (value.length > 15) {
          value = value.substr(0, 15) + "..."
        }
        return value
      } else {
        return ""
      }
    },
  },
  onPullDownRefresh() {
    this.pageNumber = this.pageNumber + 1
    this.paramsData.page = this.pageNumber
    this.getList(this.paramsData)
    // setTimeout(function () {
    // }, 1500)
  },
}
</script>

<style lang="scss">
.wrapper {
  padding: 5px 0 0 0;
  // .segmentedControlWrapper {
  // }
  .tableWrapper {
    margin: 15px 0 0 0;
  }
}
</style>