aiot-app/pages/pcs/list.vue

<template>
  <view class="mainBox">
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      :title="getTitle"
      @clickLeft="back"
    >
    </uni-nav-bar>

    <view class="top-wrapper">
      <uni-section>
        <uni-easyinput
          prefixIcon="search"
          style="width: 460rpx"
          v-model="keyWord"
          placeholder="工单单号，计划单号，记录规则名称"
        >
        </uni-easyinput>
      </uni-section>
      <button class="search_btn" @click="doSearch">搜索</button>
    </view>
    <div style="height: 100rpx; width: 475rpx"></div>
    <view class="wrapper">
      <u-list @scrolltolower="scrolltolower" class="listContent">
        <view
          v-for="(item, index) in tableList"
          :key="index"
          style="position: relative"
        >
          <myCard
            :item="item"
            :index="index + 1"
            :btnList="btnList"
            :columns="columns"
            :title="item.code"
            :status="statusMap[item.status]"
            @goDetail="goDetail(item, 'view')"
            @edit="goDetail(item, 'edit')"
          >
          </myCard>
        </view>
        <view style="width: 100%; height: 40rpx"></view>
        <view style="margin-top: 20vh" v-if="tableList.length == 0">
          <u-empty iconSize="150" textSize="32" text="暂无数据"> </u-empty>
        </view>
      </u-list>
    </view>

    <u-toast ref="uToast"></u-toast>
    <workOrderReport
      ref="workOrderReportRef"
      :pageName="pageName"
      @refresh="successInit"
    ></workOrderReport>
  </view>
</template>

<script>
import dictMixns from "@/mixins/dictMixins";
import myCard from "./components/myCard.vue";
import workOrderReport from "./components/workOrderReport.vue";
import { producetaskrulerecordQueryRecordWorkOrderPage } from "@/api/recordRules/index";
export default {
  components: {
    myCard,
    workOrderReport,
  },
  mixins: [dictMixns],
  props: {
    pageName: {
      default: "",
    },
  },
  data() {
    return {
      statusMap: {
        0: "未报工",
        1: "执行中",
        2: "已执行",
      },
      planTypeList: {
        productionRecords: 2,
        steamInjectionInspectionRecord: 3,
        solidWasteRecord: 4,
        qualityTestRecords: 5,
        boilerOperationRecord: 6,
      },
      btnList: [
        {
          name: "报工",
          apiName: "edit",
          btnType: "primary",

          judge: [
            {
              key: "status",
              value: [1],
            },
          ],
        },
      ],
      columns: [
        [
          {
            label: "计划单号：",
            prop: "planCode",
            className: "perce100",
          },
        ],
        [
          {
            label: "记录规则名称：",
            prop: "ruleName",
            className: "perce100",
          },
        ],
        [
          {
            label: "场站名称：",
            className: "perce100",
            prop: "productLineName",
          },
        ],
        [
          {
            className: "perce100",
            label: "班组：",
            prop: "teamName",
          },
        ],
        [
          {
            label: "工单生成时间：",
            className: "perce100",
            prop: "createTime",
          },
        ],
        [
          {
            label: "检查时间：",
            className: "perce100",
            prop: "checkStartTime",
          },
        ],
        [
          {
            label: "报工时间：",
            className: "perce100",
            prop: "checkFinishTime",
          },
        ],
        [
          {
            label: "执行人：",
            className: "perce100",
            prop: "executeUsers",
            formatter: (row) => {
              return row.executeUsers.map((i) => i.userName).join(",");
            },
          },
        ],
        [
          {
            label: "甲方检查人：",
            prop: "contactName",
            isNone: this.pageName != "steamInjectionInspectionRecord",
          },
          {
            label: "处理方：",
            prop: "supplierName",
            isNone: this.pageName != "solidWasteRecord",
          },
          {
            label: "联合站检查人：",
            prop: "contactName",
            isNone: this.pageName != "qualityTestRecords",
          },
        ],
        [
          {
            label: "操作：",
            prop: "action",
            type: "action",
            className: "perce100",
          },
        ],
      ].filter((item) => !item.isNone),

      tableList: [],
      page: 1,
      size: 10,
      isEnd: false,
      keyWord: "",
      userInfo: {},
    };
  },
  computed: {
    getTitle() {
      return this.pageName == "productionRecords"
        ? "生产记录"
        : this.pageName == "steamInjectionInspectionRecord"
          ? "注汽检查记录"
          : this.pageName == "solidWasteRecord"
            ? "固废记录"
            : this.pageName == "qualityTestRecords"
              ? "质量检查检测记录"
              : "锅炉运行记录";
    },
  },
  created() {
    this.requestDict("记录规则类型");
  },
  onLoad() {},

  methods: {
    goDetail(item, type) {
      console.log(item, "item");
      this.$refs.workOrderReportRef.open(item, type);
    },

    successInit() {
      uni.showLoading({
        title: "加载中",
      });

      let data = {
        pageNum: 1,
        size: this.tableList.length,
        keyword: this.keyWord,
        planType: this.planTypeList[this.pageName],
        currentLoginUserId: this.userInfo.userId,
      };

      producetaskrulerecordQueryRecordWorkOrderPage(data)
        .then((res) => {
          this.tableList = res.list;
        })
        .then(() => {
          uni.hideLoading();
        });
    },
    doSearch() {
      this.isEnd = false;
      this.page = 1;
      this.getList();
    },
    //获取列表信息
    getList() {
      this.userInfo = uni.getStorageSync("userInfo");
      if (this.isEnd || !this.userInfo.userId) {
        return;
      }
      uni.showLoading({
        title: "加载中",
      });

      let data = {
        pageNum: this.page,
        size: this.size,
        keyword: this.keyWord,
        planType: this.planTypeList[this.pageName],
        currentLoginUserId: this.userInfo.userId,
      };

      producetaskrulerecordQueryRecordWorkOrderPage(data)
        .then((res) => {
          if (this.page === 1) {
            this.tableList = res.list;
          } else {
            this.tableList.push(...res.list);
          }
          this.page += 1;
          this.isEnd = this.tableList.length >= res.count;
        })
        .then(() => {
          uni.hideLoading();
        });
    },
    scrolltolower() {
      if (this.isEnd) {
        return;
      }
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
.mainBox {
  background-color: #f3f8fb;
}

// .wrapper{

// }
.top-wrapper {
  background-color: #fff;
  display: flex;
  width: 750rpx;
  height: 88rpx;
  padding: 16rpx 32rpx;
  align-items: center;
  // gap: 16rpx;
  position: absolute;
  z-index: 999;
  // top: 44px;
  // // #ifdef APP-PLUS
  // top: 140rpx;

  // // #endif
  /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>