uniapp-ZHSQ/packages/workOrderDashboard/index/index.vue

<template>
	<view class="box">
		<div class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
			<div class="searchBox_add">
				<div class="searchBox_left">
					<u-icon bold color="#000" size="40" name="arrow-left" @click="headerBackClick"></u-icon>
				</div>
				<div class="searchBox_mid">工作台</div>
				<div class="searchBox_right"></div>
			</div>
		</div>

    <div class="tabList">
      <div
        :class="active == 1 ? 'tab active' : 'tab'"
        @click="headerTabsClick(1)"
      >
        待指派 <span>({{awaitingNumb}})</span>
      </div>
      <div
        :class="active == 2 ? 'tab active' : 'tab'"
        @click="headerTabsClick(2)"
      >
        进行中 <span>({{ underwayNum }})</span>
      </div>
      <div
        :class="active == 4 ? 'tab active' : 'tab'"
        @click="headerTabsClick(4)"
      >
        已作废 <span>({{ discardNum }})</span>
      </div>
      <div
        :class="active == 3 ? 'tab active' : 'tab'"
        @click="headerTabsClick(3)"
      >
        已完成 <span>({{ doneNum }})</span>
      </div>
    </div>

		<div class="orderList" v-for="(item, index) in list" :key="index">
      <div class="orderItem" @click="handlerDetailClick(item.id)">
        <div :class="['orderItemTit', statusType[item.status].style]">
          <div class="orderItemTit_left">工单编号：{{ item.order_code }}</div>
          <div class="orderItemTit_right">{{ item.create_time }}</div>
        </div>
        <div class="orderItem_row">
          <div class="df">
            <div class="orderItem_row_label">小区房源名称</div>
            <div class="orderItem_row_con">{{ item.room.name }}</div>
          </div>

          <div :class="['orderItem_row_state', statusType[item.status].color]">
            {{ statusType[item.status].desc }}
          </div>
        </div>

        <div class="orderItem_row">
          <div class="orderItem_row_label">报修类型</div>
          <div class="orderItem_row_con">{{ item.ac.category_name }}</div>
        </div>

        <div class="orderItem_row">
          <div class="orderItem_row_label">问题描述</div>
          <div class="orderItem_row_con">{{ item.problem_description }}</div>
        </div>

        <div class="orderItem_row">
          <div class="orderItem_row_label">上门时间</div>
          <div class="orderItem_row_con">{{ item.service_time }}</div>
        </div>

        <div class="orderItem_row">
          <div class="orderItem_row_label">联系人</div>
          <div class="orderItem_row_con">{{ item.contact_name }}</div>
        </div>

        <div class="orderItem_row">
          <div class="orderItem_row_label">联系人手机号</div>
          <div class="orderItem_row_con">{{ item.contact_phone }}</div>
        </div>
      </div>
    </div>

	</view>
</template> 

<script>
import { request, NavgateTo, menuButtonInfo } from '../../../utils';
import { apiArr } from '../../../api/v2Community';
export default {
	data() {
		return {
			top: "",
			localHeight: "",
			active: 1,
			page_num: 1,
      page_size: 10,
      flag: false, // 是否下拉请求接口
      list: [], // 列表数组
			awaitingNumb: '', // 待维修工单数量
			underwayNum: '', // 进行中工单数量
			doneNum: '', // 已完成工单数量
			discardNum: '', // 已废弃工单数量
			// 状态枚举类型
      statusType: {
        1: {
          desc: "待指派",
          style: "orderItemTit_state1",
          color: "orderItem_row_state1"
        },
        2: {
          desc: "进行中",
          style: "orderItemTit_state2",
          color: "orderItem_row_state2"
        },
        3: {
          desc: "已完成",
          style: "orderItemTit_state3",
          color: "orderItem_row_state3"
        },
        4: {
          desc: "已作废",
          style: "orderItemTit_state4",
          color: "orderItem_row_state4"
        },
      },
		}
	},
	methods: {
		handlerDetailClick(id) {
      NavgateTo(`../detail/index?id=${id}`);
    },
    headerTabsClick(e) {
      console.log("111", e);
      this.active = e;
      this.list = [];
      this.flag = false;
      this.page_num = 1;
      this.getTabsList();
    },
		async init() {
			const [awaitingNumb, underwayNum, doneNum, discardNum] = await Promise.all([
				this.awaitingRes(),
				this.underwayRes(),
				this.doneRes(),
				this.discardRes(),
			]);
			this.awaitingNumb = awaitingNumb;
			this.underwayNum = underwayNum;
			this.discardNum = discardNum;
			this.doneNum = doneNum;
		},
    async getTabsList() {
      const res = await request(apiArr.getWorkOrderCrudList, "POST", {
        status: this.active,
        page_num: this.page_num,
        page_size: this.page_size,
      });

      if (res.rows) {
        let flag = false;
        if (res.rows.length == this.page_size) {
          flag = true;
        } else {
          flag = false;
        }
        this.list = this.list.concat(res.rows || []);
        this.flag = flag;
        this.page_num = this.page_num + 1;
      }
    },
		// 待维修工单数量
		async awaitingRes() {
			const res = await request(apiArr.getWorkOrderCrudList, "POST", {
        status: 1,
        page_num: this.page_num,
        page_size: this.page_size,
      });
			return res.total;
		},
		// 进行中工单数量
		async underwayRes() {
			const res = await request(apiArr.getWorkOrderCrudList, "POST", {
        status: 2,
        page_num: this.page_num,
        page_size: this.page_size,
      });
			return res.total;
		},
		// 已废弃工单数量
		async discardRes() {
			const res = await request(apiArr.getWorkOrderCrudList, "POST", {
        status: 4,
        page_num: this.page_num,
        page_size: this.page_size,
      });
			return res.total;
		},
		// 已完成工单数量
		async doneRes() {
			const res = await request(apiArr.getWorkOrderCrudList, "POST", {
        status: 3,
        page_num: this.page_num,
        page_size: this.page_size,
      });
			return res.total;
		},

		headerBackClick() {
			uni.navigateBack({
				delta: 1
			});
		},
	},

  onLoad(options) {
    const meun = menuButtonInfo();
    this.top = meun.top;
    this.localHeight = meun.height;
  },
  onShow() {
    this.page_num = 1;
    this.list = [];
    this.init();
		this.getTabsList();
  },
  onReachBottom() {
    if (this.flag) {
      this.init();
    }
  },
}
</script>

<style>
@import url("./index.css");
</style>