jsh_erp_app/pages/audit-task/index.vue

<template>
  <view class="picking-task-page">
    <u-navbar
      height="40px"
      title="复核任务"
      bgColor="#F0F6FB"
      autoBack
      placeholder
    >
      <view class="u-nav-slot depot-label" slot="right">
        <view class="name">{{ curDepotName }}</view>
      </view>
    </u-navbar>
    <view class="container_main">
      <u-sticky :offsetTop="offsetTop" bgColor="#F0F6FB">
        <view class="search-box">
          <u-search
            placeholder="请输入单据编号"
            bgColor="#fff"
            shape="square"
            v-model="query.number"
            :showAction="false"
            @search="searchClick"
            @clear="searchClick"
          ></u-search>
          <view class="flex_box" @click="scanCode">
            <view class="scan-text">扫描单据二维码</view>
            <view class="scan-icon">
              <image src="@/static/image/scan-icon.png" mode=""></image>
            </view>
          </view>
        </view>
        <view class="type-box flex_box">
          <view class="type-item" @click="tabClick(1)">
            <view class="type-val">{{ type1 }}</view>
            <u-icon name="arrow-down-fill" color="#999999" size="12"></u-icon>
          </view>
          <view class="type-item" @click="tabClick(2)">
            <view class="type-val">{{ type2 }}</view>
            <u-icon name="arrow-down-fill" color="#999999" size="12"></u-icon>
          </view>
        </view>
      </u-sticky>
      <view class="task-cont">
        <block v-for="(item, i) in list" :key="`${item.id}-${item.status}`">
          <task-card
            :columns="taskColumns"
            :formData="item"
            @handleClickField="handleClickField"
          >
            <!-- 状态 -->
            <view slot="rightTop">
              <u-tag
                v-if="item.status == 6"
                text="待复核"
                plain
                borderColor="rgba(255, 59, 29, 0.2)"
                color="rgba(255, 59, 29, 1)"
                bgColor="rgba(255, 59, 29, 0.2)"
              ></u-tag>
              <u-tag
                v-if="item.status == 2"
                text="复核通过"
                plain
                borderColor="rgba(0, 185, 123, 0.2)"
                color="rgba(0, 185, 123, 1)"
                bgColor="rgba(0, 185, 123, 0.2)"
              ></u-tag>
              <u-tag
                v-if="item.status == 7"
                text="复核驳回"
                plain
                borderColor="rgba(225, 51, 15, 1)"
                color="rgba(255, 255, 255, 1)"
                bgColor="rgba(225, 51, 15, 1)"
              ></u-tag>
            </view>
            <!-- 操作栏 -->
            <view slot="action" class="action-box">
              <view class="action-left-box">
                <text v-if="item.type == '采购订单'"
                  >入库时间： {{ item.operTime }}</text
                >
                <text v-if="item.type == '销售订单'"
                  >出库时间： {{ item.operTime }}</text
                >
              </view>
              <view class="task-bottom">
                <view
                  class="btn btn-1"
                  @click="toAudit(item)"
                  v-if="item.status == 6"
                  >去复核</view
                >
                <view class="btn btn-2" @click="toDetail(item)" v-else
                  >详情</view
                >
              </view>
            </view>
          </task-card>
        </block>
        <u-loadmore v-if="list.length > 0" :status="loadStatus" />
        <u-empty
          mode="data"
          text="暂无内容"
          marginTop="60"
          icon="https://xiangli-erp.oss-cn-hangzhou.aliyuncs.com/APP/no-notifcations.png"
          v-if="list.length == 0"
        ></u-empty>
      </view>
    </view>
    <!-- 状态 -->
    <u-picker
      :show="statusShow"
      keyName="label"
      :defaultIndex="defaultIndex2"
      :columns="statusColumns"
      @confirm="statusConfirm"
      @cancel="statusShow = false"
    ></u-picker>
    <!-- 月份 -->
    <u-picker
      :show="dateShow"
      :defaultIndex="defaultIndex3"
      :columns="dateColumns"
      @confirm="dateConfirm"
      @cancel="dateShow = false"
    ></u-picker>
  </view>
</template>

<script>
import taskCard from "@/components/task-card/task-card.vue";
import { mapGetters } from "vuex";
import { reviewTaskList } from "@/common/request/apis/aduit.js";

export default {
  components: {
    taskCard,
  },
  data() {
    return {
      offsetTop: 0,
      type1: "全部",
      type2: "月份",
      statusShow: false,
      dateShow: false,
      statusColumns: [
        [
          {
            label: "全部",
            id: "",
          },
          {
            label: "待复核",
            id: 6,
          },
          {
            label: "复核通过",
            id: 2,
          },
          {
            label: "复核驳回",
            id: 7,
          },
        ],
      ],
      dateColumns: [
        [
          "全年",
          "一月",
          "二月",
          "三月",
          "四月",
          "五月",
          "六月",
          "七月",
          "八月",
          "九月",
          "十月",
          "十一月",
          "十二月",
        ],
      ],
      defaultIndex2: [],
      defaultIndex3: [],

      taskColumns: [
        {
          title: "单据编号",
          key: "number",
          titleStyle: {
            color: "#333",
            fontSize: "28rpx",
            fontWeight: 500,
          },
          valueStyle: {
            color: "#333",
            fontSize: "28rpx",
            fontWeight: 500,
          },
        },
        {
          title: "供应商名称",
          key: "supplierName",
          isShow(key, formData, col) {
            return formData.type == "采购订单";
          },
        },
        {
          title: "客户名称",
          key: "supplierName",
          isShow(key, formData, col) {
            return formData.type == "销售订单";
          },
        },
        {
          title: "单据日期",
          key: "createTime",
        },
        {
          title: "类别",
          key: "type",
          span: 12,
        },
        {
          title: "入库人",
          key: "operName",
          span: 12,
          isShow(key, formData, col) {
            return formData.type == "采购订单";
          },
        },
        {
          title: "出库人",
          key: "operName",
          span: 12,
          isShow(key, formData, col) {
            return formData.type == "销售订单";
          },
        },
        {
          title: "货物总数",
          key: "goodsQuantity",
          span: 12,
          valueStyle: {
            color: "#0256ff",
          },
        },
        {
          title: "货物种类",
          key: "goodsTypeCount",
          span: 12,
          valueStyle: {
            color: "#0256ff",
          },
        },
      ],
      list: [],
      currentPage: 1,
      pageSize: 10,
      query: {
        beginTime: "",
        endTime: "",
        number: "",
        status: "",
      },
      loadStatus: "loadmore", //加载前值为loadmore，加载中为loading，没有数据为nomore
    };
  },
  computed: {
    ...mapGetters(["depotInfo"]),
    curDepotId() {
      return this.depotInfo ? this.depotInfo.id : "";
    },
    curDepotName() {
      return this.depotInfo ? this.depotInfo.depotName : "";
    },
  },
  onLoad() {
    let systemInfo = uni.getSystemInfoSync();
    let statusBarHeight = systemInfo.statusBarHeight;
    this.offsetTop = statusBarHeight + 40;
    this.loadData();
  },
  onShow() {
    uni.$on("scanFinish", (data) => {
      this.query.number = data;
      this.loadData(true);
    });
    if (uni.getStorageSync("auditTaskRefresh")) {
      this.loadData(true);
      uni.removeStorageSync("auditTaskRefresh");
    }
  },
  onHide() {
    uni.$off("scanFinish");
  },
  onUnload() {
    uni.$off("scanFinish");
  },
  onPullDownRefresh() {
    // 下拉刷新
    this.onRefresh();
  },
  onReachBottom() {
    // 触底加载更多
    this.onLoadMore();
  },
  methods: {
    scanCode() {
      this.$scan.scanCode();
    },
    async onLoadMore() {
      if (this.loadStatus !== "loadmore") return;
      this.loadStatus = "loading";
      try {
        await this.loadData();
      } catch (e) {
        this.loadStatus = "loadmore";
      }
    },
    async onRefresh() {
      try {
        await this.loadData(true);
      } finally {
        uni.stopPullDownRefresh();
      }
    },
    async loadData(isRefresh = false) {
      if (isRefresh) {
        this.currentPage = 1;
        this.list = [];
      }

      try {
        this.loadStatus = "loading";
        const currentPage = this.currentPage;
        const pageSize = this.pageSize;
        const params = {
          currentPage,
          pageSize,
          ...this.query,
          depotId: this.curDepotId,
        };
        console.log("params=====", params);
        const res = await reviewTaskList(params);
        const { rows, total } = res.data;
        console.log("res====", res);
        this.list = [...this.list, ...rows];
        if (currentPage * pageSize < Number(total)) {
          this.currentPage++;
          this.loadStatus = "loadmore";
        } else {
          this.loadStatus = "nomore";
        }
      } catch (error) {}
    },
    searchClick() {
      this.loadData(true);
    },
    tabClick(type) {
      switch (type) {
        case 1:
          this.statusShow = true;
          break;
        case 2:
          this.dateShow = true;
          break;
        default:
          break;
      }
    },
    statusConfirm(val) {
      this.type1 = val.value[0].label;
      this.query.status = val.value[0].id;
      this.statusShow = false;
      this.loadData(true);
    },
    dateConfirm(val) {
      this.type2 = val.value[0];
      this.dateShow = false;
      let month = val.indexs[0];
      this.getLastDayOfMonth(month);
      this.loadData(true);
    },
    // 获取开始时间、结束时间
    getLastDayOfMonth(month) {
      let year = new Date().getFullYear();
      if (month != 0) {
        let monthStart = new Date(year, month, 0).getDate();
        this.query.beginTime = `${year}-${month}-01`;
        this.query.endTime = `${year}-${month}-${monthStart}`;
      } else {
        this.query.beginTime = "";
        this.query.endTime = "";
      }
    },
    handleClickField(key, itemData) {
      console.log("key===", key);
      console.log("itemData===", itemData);
      this.toDetail(itemData);
    },
    // 审核
    toAudit(val) {
      const type = val.type;
      switch (type) {
        case "采购订单":
          uni.navigateTo({
            url: `/pages/purchase/detail?id=${val.id}&auditState=1`,
          });
          break;
        case "销售订单":
          uni.navigateTo({
            url: `/pages/picking-task/detail?id=${val.id}&auditState=1`,
          });
          break;
        default:
          break;
      }
    },
    toDetail(val) {
      const type = val.type;
      switch (type) {
        case "采购订单":
          uni.navigateTo({
            url: `/pages/purchase/detail?id=${val.id}`,
          });
          break;
        case "销售订单":
          uni.navigateTo({
            url: `/pages/picking-task/detail?id=${val.id}`,
          });
          break;
        default:
          break;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.picking-task-page {
  min-height: 100vh;
  background: #f0f6fb;
  .container_main {
    .search-box {
      display: flex;
      align-items: center;
      padding: 0 32rpx;
      .scan-text {
        color: #333;
        font-family: "PingFang SC";
        font-size: 24rpx;
        font-weight: 400;
        margin-right: 20rpx;
        margin-left: 30rpx;
      }
      .scan-icon {
        width: 36rpx;
        height: 36rpx;
        background-color: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        image {
          width: 24rpx;
          height: 24rpx;
        }
      }
    }

    .type-box {
      .type-item {
        width: 50%;
        height: 88rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        .type-val {
          color: #000;
          font-family: "PingFang SC";
          font-size: 28rpx;
          font-weight: 400;
          margin-right: 10rpx;
        }
      }
    }

    .task-cont {
      padding: 0 24rpx;
    }
  }
}

.action-box {
  padding-bottom: 24rpx;
  height: 80rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}

.action-left-box {
  display: inline-flex;
  align-items: center;
  color: #666;
  font-family: "PingFang SC";
  font-size: 24rpx;
  font-weight: 400;
}
.task-bottom {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  .btn {
    width: 144rpx;
    height: 56rpx;
    border-radius: 8rpx;
    font-size: 28rpx;
    line-height: 56rpx;
    text-align: center;
    margin-left: 12rpx;
    font-family: "PingFang SC";
  }
  .btn-1 {
    background: #0256ff;
    color: #fff;
  }
  .btn-2 {
    border: 1px solid #0256ff;
    background: rgba(2, 86, 255, 0.2);
    color: #0256ff;
  }
}
</style>