aiot-app/pages/tour_tally/order/order.vue

<template>
  <view>
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      title="巡点检工单"
      @clickLeft="back"
    ></uni-nav-bar>

    <view class="search-box">
      <uni-section>
        <uni-easyinput
          @clear="clearSearch"
          prefixIcon="search"
          style="width: 460rpx"
          v-model="code"
          placeholder="工单编号"
        >
        </uni-easyinput>
      </uni-section>
      <button class="search_btn" @click="doSearch">搜索</button>
      <image
        class="menu_icon"
        @click="showSearch"
        src="~@/static/pda/menu.svg"
      ></image>
    </view>

    <view v-show="showTab">
      <view class="top-wrapper">
        <view class="tab_box rx-sc">
          <view
            class="tab_item"
            v-for="(item, index) in tabList"
            :key="index"
            :class="{ active: pickTabIndex == index }"
          >
            <view @click="changeChartsTab(index)" class="badge-c">
              {{ item.label }}
              <u-badge max="99" :value="item.number" absolute></u-badge>
            </view>
          </view>
        </view>
      </view>
    </view>

    <OrderTask
      v-for="(item, index) in tabList"
      :key="index"
      v-show="index === pickTabIndex"
      :list="item.list"
      :type="tabList.value"
      :groupId="groupId"
      @changeGroup="onChangeGroup"
    ></OrderTask>

    <u-toast ref="uToast"></u-toast>

    <MySearch
      :show.sync="searchShow"
      :formItems="formItems"
      @search="confirmSearch"
      ref="mySearchRef"
    ></MySearch>
  </view>
</template>

<script>
import { isObjectEmpty } from "@/utils/utils.js";
import { getWorkOrderList, getRuleList, workPage } from "@/api/myTicket";
import OrderTask from "./OrderTask.vue";
import { post, postJ } from "@/utils/api.js";

export default {
  components: {
    OrderTask,
  },
  data() {
    return {
      showTab: true,
      page: 1,
      size: 10,
      isEnd: false,
      tabList: [
        {
          value: 0,
          label: "待接收",
          list: [],
          number: 0,
        },
        {
          value: 2,
          label: "执行中",
          list: [],
          number: 0,
        },
        {
          value: 3,
          label: "已完成",
          list: [],
          number: 0,
        },
        {
          value: 4,
          label: "全部",
          list: [],
          isNone: !this.$isAuthorities("eam:tour_tally:listAll"),
          number: 0,
        },
      ],
      pickTabIndex: 0,
      qrContent: null,
      barType: 0,
      searchShow: false,
      code: "",
      groupId: null,
      searchForm: {},
      formItems: [
        {
          label: "规则名称：",
          prop: "ruleId",
          component: "MySelect",
          props: {
            localdata: [],
            dataKey: "name",
            dataValue: "id",
          },
        },
        {
          label: "时间：",
          prop: "startEndTime",
          component: "MyDateRange",
          props: {
            type: "daterange",
          },
        },
      ],
    };
  },
  onLoad() {
    this.getRuleList();
  },
  onShow() {
    this.getFirstList();
    this.getStatus();
  },
  onReachBottom() {
    this.getList();
  },
  methods: {
    getStatus() {
      getWorkOrderList({
        orderStatus: [0],
        type: 1,
        pageNum: 1,
        size: 1,
      }).then((res) => {
        console.log(res, "res ===");
        this.tabList[0].number = res.count;
      });
      getWorkOrderList({
        orderStatus: [2],
        type: 1,
        pageNum: 1,
        size: 1,
      }).then((res) => {
        this.tabList[1].number = res.count;
      });
    },
    getCount() {
      statistics().then((data) => {
        console.log("onsole.log(data)-----------");
        console.log(data);
        this.tabList = this.tabList.map((item) => {
          switch (item.value) {
            case "0":
              return {
                ...item,
                badge: {
                  value: data.maintenanceNum,
                },
              };
            case "2":
              return {
                ...item,
                badge: {
                  value: data.patrolInspection,
                },
              };
            case "3":
              return {
                ...item,
                badge: {
                  value: data.quantityNum,
                },
              };
            case "4":
              return {
                ...item,
                badge: {
                  value: data.repairsNum,
                },
              };
          }
        });
      });
    },
    getFirstList: function () {
      this.page = 1;
      this.isEnd = false;
      this.getList();
    },
    getList() {
      if (this.isEnd) {
        this.$refs.uToast.show({
          message: "暂无更多数据",
          duration: 1000,
        });
        return;
      }
      uni.showLoading({
        title: "加载中",
      });

      let params = {
        orderStatus: [this.tabList[this.pickTabIndex].value],
        type: 1,
        pageNum: this.page,
        size: this.size,
        ...this.searchForm,
      };

      if (this.groupId) {
        params.teamId = this.groupId;
      }

      console.log(this.showTab);

      if (!this.showTab || this.pickTabIndex == 3) {
        delete params.orderStatus;
      }
      let api = this.pickTabIndex == 3 ? workPage : getWorkOrderList;

      // return
      api(params)
        .then((res) => {
          // this.tabList[this.pickTabIndex].list = res.list
          // isEnd = this.tabList[this.pickTabIndex].list >= res.count
          if (this.page == 1) {
            this.tabList[this.pickTabIndex].list = res.list;
          } else {
            this.tabList[this.pickTabIndex].list.push(...res.list);
          }
          this.page += 1;
          this.isEnd = this.tabList[this.pickTabIndex].list.length >= res.count;
          uni.hideLoading();
        })
        .catch(() => {
          uni.hideLoading();
        });
    },
    changeChartsTab(index) {
      this.pickTabIndex = index;
      this.groupId = null;
      this.getFirstList();
    },
    onChangeGroup(groupId) {
      this.groupId = groupId;
      this.getFirstList();
    },

    async getRuleList() {
      let params = {
        status: 1,
        type: 1,
        pageNum: 1,
        size: -1,
      };
      const res = await getRuleList(params);
      this.formItems.find((item) => item.prop === "ruleId").props.localdata =
        res;
    },
    clearSearch() {
      this.code = "";
      this.doSearch();
    },
    doSearch() {
      this.isEnd = false;
      this.page = 1;
      this.searchForm.code = this.code;
      this.showTab = isObjectEmpty(this.searchForm);
      this.getList();
    },
    showSearch() {
      this.searchShow = true;
    },
    confirmSearch(e) {
      console.log(e);
      let data = JSON.parse(JSON.stringify(e));
      if (data.startEndTime) {
        var [startTime, endTime] = data.startEndTime;
        delete data.startEndTime;
        this.searchForm = {
          ...data,
          startTime,
          endTime,
        };
      } else {
        this.searchForm = {
          ...data,
        };
      }
      console.log(this.searchForm);
      this.doSearch();
    },
  },
};
</script>

<style lang="scss" scoped>
.top-wrapper {
  display: flex;
  align-items: center;
  background-color: #fff;
  position: relative;

  .tab_box {
    width: 100%;
    height: 68rpx;

    .tab_item {
      height: 68rpx;
      line-height: 68rpx;
      padding: 0 20rpx;
      font-size: 32rpx;
      // color: #979C9E;
    }

    .active {
      box-sizing: border-box;
      border-bottom: 6rpx solid $theme-color;
      color: $theme-color;
    }
  }
}

.tab-title {
  position: fixed;
  z-index: 99;
  width: 100%;
  padding: 10rpx;
  // display: flex;
  // justify-content: space-between;
  height: $tab-height;
  line-height: $tab-height;
  background-color: #ffffff;
  border-bottom: 1px solid #f2f2f2;
  // box-sizing: border-box;
  white-space: nowrap;
  overflow: auto hidden;
  display: flex;

  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 10px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }

  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #535353;
  }

  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #ededed;
  }

  .tab-item {
    flex: 1;
    text-align: center;
    display: inline-block;
    font-size: 32rpx;
    color: $uni-text-color-grey;
  }

  .tab-item.active {
    color: $j-primary-border-green;
    border-bottom: 1px solid $j-primary-border-green;
  }

  .title-num {
    font-size: 26rpx;
  }

  .title-red {
    display: inline-block;
    font-size: 22rpx;
    padding: 0 10rpx;
    border-radius: 50rpx;
    color: #ffffff;
    background: red;
    line-height: 38rpx;
    position: absolute;
    top: 10rpx;
    min-width: 18rpx;
  }
}

.badge-c {
  position: relative;
}

/deep/.u-badge {
  top: 0;
  right: 0;
  transform: translate(90%, 20%);
}

.search-box {
  background-color: #fff;
  display: flex;
  width: 750rpx;
  height: 88rpx;
  padding: 16rpx 32rpx;
  align-items: center;
  gap: 16rpx;
  justify-content: space-between;

  /deep/.uni-section {
    margin-top: 0px;
  }

  /deep/.uni-section-header {
    padding: 0px;
  }

  .search_btn {
    width: 120rpx;
    height: 70rpx;
    line-height: 70rpx;
    padding: 0 24rpx;
    background: $theme-color;
    font-size: 32rpx;
    color: #fff;
    margin: 0;
    margin-left: 26rpx;
  }

  .menu_icon {
    width: 44rpx;
    height: 44rpx;
    margin-left: 14rpx;
  }
}
</style>