lanju-app/src/pages/quality/ProductSample/index.vue

<template>
  <view class="page-product-receipt">
    <!--  页面头  -->
    <page-head title="成品留样"/>

    <u-form class="form" ref="form" label-width="180rpx" style="margin-top: 10px">
      <u-form-item label="首检日期">
        <u-input @click="showCalendar = true" placeholder="请选择日期" v-model="checkTime" :clearable="false"/>
        <u-icon name="close-circle-fill" @click="clear" color="rgb(96, 98, 102)" size="28"></u-icon>
      </u-form-item>
    </u-form>

    <view class="scroll">
      <view v-for="(item,index) in list" :key="index">
        <u-form style="margin-top: 10rpx" class="form2">
          <view>

            <lj-list-row label="物料名称:" :value="item.materialName"/>
            <lj-list-row label="来料批次号:" :value="item.incomeBatchNo"/>
            <lj-list-row label="留样时间:" :value="formatDate(item.sampleTime,'未留样')"/>

            <view v-if="!item.sampleTime" class="righttitle">
              <view @click.stop="handelOption(item)" class="boder-icon-rigth"> 留样</view>
            </view>

          </view>
        </u-form>
      </view>
    </view>

    <u-calendar v-model="showCalendar" :mode="mode" @change="changeTime"></u-calendar>
  </view>
</template>
<script lang="ts">
import {Component} from 'vue-property-decorator';
import {BasePage} from '@/components/base/page';
import model from './model';
import moment from 'moment';
import PageHead from "@/components/page-head/page-head.vue";
import LjListRow from "@/components/lanju/lj-list-row/index.vue";

@Component({
  components: {
    LjListRow,
    PageHead,
  },
})
export default class ProductSample extends BasePage {
  model = model;
  checkTime: any = moment().format('YYYY-MM-DD');
  showCalendar = false;
  mode = 'date';
  queryParams = {
    queryDate: undefined
  }
  list: any = [];

  clear() {
    this.checkTime = null;
  }

  async changeTime(e) {
    console.log(e.result);
    this.checkTime = e.result
    await this.getList();
  }

  onLoad() {
    this.getList();
  }

  async handelOption(item) {
    const that = this;
    console.log(item)
    uni.showModal({
      title: '提示',
      content: '是否选择留样',
      confirmText: '确定',
      cancelText: '取消',
      success: async function (res) {
        //点击确定
        if (res.confirm) {
          await that.model.updateQcCheckSampleTask({
            id: item.id,
            sampleTime: new Date(),
            sampleNum:'1盒',
            sampleAddress:'成品留样室'
          });
          if (that.model.confirmCode === 200) {
            await that.getList();
          }
        }
      }
    });
  }

  async getList() {
    let time = this.checkTime;
    if (!time) {
      time = moment().format('YYYY-MM-DD');
    }
    this.queryParams.queryDate = time;
    await this.model.selectQcCheckSampleTaskList(this.queryParams);
    this.list = this.model.list;
  }

  //时间转换
  formatDate(time: any, msg: String) {
    if (!time) {
      return msg
    }
    return moment(time).format('YYYY-MM-DD HH:mm:ss')
  }

}
</script>
<style lang="scss" scoped>
.form {
  background-color: #fff;
  padding: 0 40rpx;
  border-radius: 10rpx;
  box-shadow: 0 0 20rpx 0 rgba(128, 128, 128, 0.2);

  .u-form-item {
    padding: 30rpx 0;
    line-height: 35rpx;
  }

  .row {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex: 1;
  }
}

.scroll {

  .form2 {
    background-color: #fff;
    padding: 10rpx 25rpx 10rpx 25rpx;
    border-radius: 10rpx;
    box-shadow: 0 0 20rpx 0 rgba(128, 128, 128, 0.2);
    color: #8d8989;

    .row-list {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin-top: 10rpx;

      .list-label {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 30%;
      }

      .list-text {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 70%;
      }

    }

    .righttitle {
      display: flex;
      justify-content: flex-end;

      .boder-icon-rigth {
        border: 1rpx solid #fa3534;
        width: 130rpx;
        text-align: center;
        background: #fa3534;
        color: #ffffff;
        margin-top: 10px;
      }

    }
  }
}
</style>