jiliangxiaochengxu/pages/assay/assayList.vue

<!-- @format -->

<template>
  <view class="container">
    <!-- <view style="margin: 15rpx 0">
			<view class="contentItems" @click="handleDetails" v-for="item of 2">
				<u-checkbox :customStyle="{ marginBottom: '8px' }"> 器具名称</u-checkbox>
				<view class="content">
					<view class="title">器具出厂编号
						<text style="margin-left: 50rpx"> 2024845782 </text>
					</view>
				</view>
				<view class="content">
					<view class="title">器具内部编号
						<text style="margin-left: 50rpx"> ygjpx-05 </text>
					</view>
				</view>
				<view class="content">
					<view class="title">制造单位</view>
					<view class="message">上海光正医疗有限公司</view>
				</view>
				<view class="content">
					<view class="title">规格型号</view>
					<view class="message">20kg*10</view>
				</view>
			</view>
		</view> -->
    <view style="margin: 15rpx 0">
      <view v-for="item in ledgerList" class="contentItems">
        <u-checkbox-group placement="column" @change="changeCheckBox(item)">
          <view>
            <view
              class=""
              style="display: flex; justify-content: space-between"
            >
              <view style="display: flex" class="">
                <u-checkbox :name="item.id"></u-checkbox>
                <span style="font-weight: 700; font-size: 36rpx">{{
                  item.name
                }}</span>
              </view>
              <view
                style="padding-top: 5rpx"
                :style="{
                  color: recordColor[recordStatus(item.fillingStatus)],
                }"
                >{{ recordStatus(item.fillingStatus) }}</view
              >
            </view>
            <view
              style="margin: 10rpx 30rpx; color: #606266; line-height: 50rpx"
              class=""
            >
              <view
                >唯一标识：<span>
                  {{ item.instrNo }}
                </span>
              </view>
              <span style="line-height: 50rpx">
                制造单位：{{ item.manufactoryName }}
              </span>
              <br />
              <view style="display: flex; justify-content: space-between">
                <view>器具用途：{{ item.purposeName }}</view>
                <view> 规格型号：{{ item.modelSpecific }}</view>
              </view>
              <span
                style="
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  line-height: 50rpx;
                "
                class=""
              >
                <span> 出厂编号： {{ item.serialNumber }}</span>
                <span> 内部编号： {{ item.internalNumber }}</span>
              </span>
            </view>
          </view>
        </u-checkbox-group>
      </view>
    </view>
    <view
      style="
        background: #fff;
        padding: 20rpx 0;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        display: flex;
      "
    >
      <u-button
        @click="handleApplicat"
        style="width: 95%; margin: 0 auto"
        type="primary"
        >确定</u-button
      >
    </view>
  </view>
</template>

<script>
import { pageAudit } from "@/api/assay";
import { useDict, paraseDict } from "@/utils/index";
export default {
  data() {
    return {
      selectedItems: [],
      recordColor: {
        已撤回: "#fa3534",
        已接收: "#2979ff",
        待提交: "#2979ff",
        备案中: "#2979ff",
        已拒绝: "#fa3534",
        勿备案: "#fa3534",
        未备案: "#909399",
        免备案: "#909399",
        已退回: "#fa3534",
      },
      record: [], //备案字典
      activeContent: "我的申请",
      tabsList: [
        {
          name: "我的申请",
        },
      ],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderByColumn: "createTime",
        isAsc: "Desc",
      },
      ledgerList: [],
      total: 0,
      loading: false,
      finished: false,
    };
  },
  onLoad(options) {
    useDict("ejian_instrFillingStatus").then((res) => {
      this.record = res;
    });
    this.queryParams.excludeIds = options.ids;
    this.getList();
  },
  computed: {
    // //检定状态
    // verificationStatus() {
    // 	return (row) => {
    // 		return paraseDict(this.verification, row);
    // 	};
    // },
    // //申请状态
    // applicationStatus() {
    // 	return (row) => {
    // 		return paraseDict(this.application, row);
    // 	};
    // },
    //备案状态
    recordStatus() {
      return (row) => {
        return paraseDict(this.record, row);
      };
    },
  },
  methods: {
    changeCheckBox(val) {
      console.log("val", val);
      console.log(this.selectedItems);
      if (this.selectedItems.indexOf(val) === -1) {
        this.selectedItems.push(val);
      } else {
        this.selectedItems.splice(this.selectedItems.indexOf(val), 1);
      }

      console.log("selectedItems", this.selectedItems);
    },
    getList() {
      pageAudit({
        ...this.queryParams,
      }).then(({ rows, total }) => {
        this.ledgerList = rows;
        this.total = total;
      });
    },
    onReachBottom() {
      //触底事件
      if (this.queryParams.pageNum * this.queryParams.pageSize >= this.total) {
        uni.showToast({
          title: "没有更多数据了",
          icon: "none",
          duration: 1000,
        });
        setTimeout(() => {
          uni.hideLoading();
        }, 500);
      } else {
        if (this.queryParams.pageNum <= this.queryParams.pageNum - 1) {
          setTimeout(() => {
            uni.hideLoading();
          }, 500);
        } else {
          uni.showLoading({
            title: "加载中",
          });
          this.queryParams.pageNum++;

          pageAudit({
            ...this.queryParams,
          }).then(({ rows, total }) => {
            this.ledgerList = [...this.ledgerList, ...rows];
            this.total = total;
          });
        }
        setTimeout(() => {
          uni.hideLoading();
        }, 500);
      }
    },
    handleDetails() {
      uni.navigateTo({
        url: "/pages/assay/assayDetails",
        success: (res) => {},
        fail: () => {},
        complete: () => {},
      });
    },
    handleApplicat() {
      getApp().globalData.deptListBeiAn = this.selectedItems;
      console.log(
        "getApp().globalData.deptListBeiAn ",
        getApp().globalData.deptListBeiAn
      );
      uni.$emit("query", {
        a: "two",
      });
      uni.navigateBack();
    },
    handleChange(row) {
      this.activeContent = row.name;
    },
    handleCurrentForm() {},
  },
};
</script>

<style lang="scss" scoped>
.createFixed {
  background: #2979ff;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90rpx;
  height: 90rpx;
  border-radius: 50%;
  position: fixed;
  right: 30rpx;
  bottom: 200rpx;
}

.createNew {
  font-size: 30rpx;
  margin: 20rpx 0 20rpx 20rpx;
  color: #3c9ff3;
}

.container {
  height: 100vh;
  background: rgb(243, 244, 249);

  .contentItems {
    width: 93%;
    border-radius: 6px;
    background: #fff;
    margin: 0rpx auto 20rpx;
    padding: 20rpx 30rpx 20rpx;

    .content {
      border-bottom: 1px solid rgb(242, 242, 242);
      padding: 24rpx 0;
      display: flex;
      justify-content: space-between;
    }

    .content:last-child {
      border-bottom: none;
    }

    .title {
      font-size: 26rpx;
      color: black;
      letter-spacing: 3rpx;
    }

    .message {
      font-size: 26rpx;
      color: rgb(146, 146, 146);
    }
  }
}
</style>