Dining_Hall/pages/stockTaking/takingRecord.vue

<template>
  <view>
    <div class="cont">
      <!-- 搜索 -->
      <div class="search">
        <u-input
          v-model="keyWord"
          placeholder="请输入搜索内容"
          suffixIcon="search"
          suffixIconStyle="color: #666"
          shape="circle"
          @blur="handleSearch"
        ></u-input>
      </div>
      <!-- 列表 -->
      <div class="list-cont" v-for="(item, index) in tableList" :key="index" @click="handleCheck(item)">
        <u-row justify="space-between" customStyle="margin-bottom: 10px; padding: 0 15px;">
          <u-col span="6">
            <div>{{ item.name }}</div>
          </u-col>
          <u-col span="6">
            <div style="text-align: end; color: #999">{{ item.model }}</div>
          </u-col>
        </u-row>
        <u-line style="margin-bottom: 5px"></u-line>
        <div class="list-item">
          <span>盘 盈 量：</span>
          <span style="color: #5ae725">{{ item.pyNum }}</span>
        </div>
        <div class="list-item">
          <span>盘 亏 量：</span>
          <span style="color: #f9ae3d">{{ item.pkNum }}</span>
        </div>
        <div class="list-item">
          <span>盘点日期：</span>
          <span>{{ item.startTime }}~{{ item.endTime }}</span>
        </div>
      </div>

      <u-loadmore :status="status" line v-if="tableList.length > 10" />

      <!-- 空状态 -->
      <u-empty v-if="tableList.length == 0" mode="data"></u-empty>
    </div>

    <!-- 弹出层 -->
    <u-popup :show="showType" mode="center" :closeOnClickOverlay="false" round="8" zIndex="10070">
      <div class="uPopup">
        <div class="pop-title">盘点记录</div>
        <div class="top-box">
          <u-row justify="space-between" customStyle="margin-bottom: 10px;">
            <u-col span="6">
              <div>{{ pop.name }}</div>
            </u-col>
            <u-col span="6">
              <div style="text-align: end">{{ pop.model }}</div>
            </u-col>
          </u-row>
          <u-row justify="space-between" customStyle="margin-bottom: 10px;">
            <u-col span="6">
              <div>盘盈量：{{ pop.pyNum }}</div>
            </u-col>
            <u-col span="6">
              <div style="text-align: end">盘亏量{{ pop.pkNum }}</div>
            </u-col>
          </u-row>
        </div>
        <u-line style="margin-bottom: 10px"></u-line>
        <u-form :model="formData" ref="uForm" labelWidth="auto" labelPosition="left">
          <u-form-item label="盘点人" prop="manager" borderBottom>
            <u-input
              v-model="formData.manager"
              placeholder="盘点人"
              border="none"
              inputAlign="right"
              readonly
            ></u-input>
          </u-form-item>
          <u-form-item label="盘点日期" prop="time" borderBottom>
            <u-input
              v-model="formData.time"
              placeholder="盘点日期"
              border="none"
              inputAlign="right"
              readonly
            ></u-input>
          </u-form-item>
          <u-form-item label="备注" prop="remark">
            <u-textarea
              v-model="formData.remark"
              placeholder="备注"
              :rows="5"
              maxlength="200"
              count
              disabled
            ></u-textarea>
          </u-form-item>
          <u-form-item label="附件" prop="fileList">
            <uni-file-picker v-model="formData.fileList" :auto-upload="false" ref="files" limit="9" readonly />
          </u-form-item>
        </u-form>
        <div class="btn">
          <u-button plain text="关 闭" style="margin: 8px 0" @click="showType = false"></u-button>
        </div>
      </div>
    </u-popup>

    <!-- 日期 -->
    <u-datetime-picker
      v-if="showPickerTime"
      :show="showPickerTime"
      v-model="dataTime"
      mode="date"
      @cancel="showPickerTime = false"
      @confirm="confirmTime"
    ></u-datetime-picker>
  </view>
</template>

<script>
import config from '@/config'
import { getTakeStockRecordList, getTakeStockRecordDetail } from '@/api/aqSafety'

export default {
  data() {
    return {
      actionUrl: config.baseUrl + config.uploadFileUrl,
      token: uni.getStorageSync('App-Token'),
      showPickerTime: false,
      dataTime: Number(new Date()),
      keyWord: '',
      status: 'loadmore',
      pageNum: 1,
      pageSize: 10,
      total: 0,
      tableList: [],
      showType: false,
      inventoryPopList: [],
      typePopName: '',
      pop: {},
      formData: {
        modelId: '', // 安全工器具id
        manager: '', // 盘点人
        pyNum: '', // 盘盈量
        backNum: '', // 盘亏量
        remark: '', // 备注
        fileList: [], // 图片
      },
    }
  },
  onLoad() {
    this.getList()
  },
  methods: {
    handleSearch() {
      this.pageSize = 10
      this.getList()
    },
    async getList() {
      try {
        const params = {
          encryptedData: JSON.stringify({ keyWord: this.keyWord }),
          pageNum: this.pageNum,
          pageSize: this.pageSize
        }
        console.log('🚀 ~ getList ~ params', params)
        const res = await getTakeStockRecordList(params)
        console.log('🚀 ~ getList ~ res', res)
        this.tableList = res.data.list
        this.total = res.data.total
      } catch (error) {
        console.log('🚀 ~ getList ~ error', error)
      }
    },
    onReachBottom() {
      console.log('🚀 ~ onReachBottom ~ ')
      if (this.total < 10 || this.total == this.tableList.length) {
        this.status = 'nomore'
        return
      }
      this.status = 'loading'
      setTimeout(() => {
        this.pageSize += 10
        this.getList()
        if (this.tableList.length != this.total) this.status = 'loadmore'
        else this.status = 'nomore'
      }, 500)
      console.log('加载..', this.pageSize)
    },
    // 获取详情
    async getDetail() {
      try {
        const params = {
          encryptedData: JSON.stringify({ id: this.pop.id, applyId: this.pop.applyId })
        }
        console.log('🚀 ~ getDetail ~ params', params)
        const res = await getTakeStockRecordDetail(params)
        console.log('🚀 ~ getDetail ~ res', res)
        this.formData = res.data
        this.formData.time = this.formData.startTime + '~' + this.formData.endTime
        if (this.formData.fileList && this.formData.fileList.length > 0) {
          this.formData.fileList.forEach(item => {
            item.url = config.fileUrl + item.fileUrl + '?token=' + this.token
          })
        }
      } catch (error) {
        console.log('🚀 ~ getDetail ~ error', error)
      }
    },
    // 查看详情
    handleCheck(item) {
      console.log('🚀 ~ handleCheck ~ item:', item)
      this.pop = item
      this.getDetail()
      this.showType = true
    }
  }
}
</script>

<style lang="scss">
page {
  /* padding: 15px; */
  background-color: #f8f8f8;
}
.cont {
  padding: 15px;
}
.search {
  margin-bottom: 15px;
}
.list-cont {
  padding: 15px 0;
  margin-bottom: 15px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);

  .list-item {
    padding: 5px 15px;
  }
}
.uPopup {
  width: 90vw;
  min-height: 80vh;
  background-color: #fff;
  border-radius: 8px;
  padding: 15px;
  box-sizing: border-box;
  .pop-title {
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 10px;
    text-align: center;
    color: #777;
  }

  .top-box {
    padding: 15px;
    background-color: #7dd5a9;
    color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  }

  .btn {
    position: absolute;
    bottom: 0px;
    width: calc(90vw - 30px);
    display: flex;
  }
}
</style>