Dining_Hall/pages/inspectionEntry/inspectionRecord.vue

278 lines
7.8 KiB
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.goodNum }}</span>
</div>
<div class="list-item">
<span>待 报 废 量:</span>
<span style="color: #f9ae3d">{{ item.scrapNum }}</span>
</div>
<div class="list-item">
<span>检 验 日 期:</span>
<span>{{ item.checkTime }}</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.goodNum }}</div>
</u-col>
<u-col span="6">
<div style="text-align: end">待报废量:{{ pop.scrapNum }}</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="checkTime" borderBottom>
<u-input
v-model="formData.checkTime"
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>
<!-- loading -->
<u-loading-page :loading="isLoading" icon-size="39" style="z-index: 99999"></u-loading-page>
</view>
</template>
<script>
import config from '@/config'
import { getCheckRecordList, getCheckRecordDetail } from '@/api/aqSafety'
export default {
data() {
return {
actionUrl: config.baseUrl + config.uploadFileUrl,
token: uni.getStorageSync('App-Token'),
isLoading: false,
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: '', // 经办人
checkTime: '', // 经办日期
goodNum: '', // 可继续使用数量
backNum: '', // 待报废量
remark: '', // 备注
fileList: [], // 上传图片-处理前
uploadPaths: [] // 上传图片-处理后
},
}
},
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 getCheckRecordList(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 })
}
console.log('🚀 ~ getDetail ~ params', params)
const res = await getCheckRecordDetail(params)
console.log('🚀 ~ getDetail ~ res', res)
this.formData = res.data
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>