bonus-material-app/src/pages/new-purchase/accept/acceptDetails.vue

421 lines
13 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<!-- 新购验收详情 -->
<view class="accept page-common">
<uni-row :gutter="24" class="search-form">
<uni-col :span="18">
<view>
<uni-easyinput placeholder="请输入内容" v-model="searchValue" maxlength="10" />
</view>
</uni-col>
<uni-col :span="6">
<view class="search" @click="search">查询</view>
</uni-col>
</uni-row>
<uni-row :gutter="24" class="sect-form">
<uni-section title="审核记录" type="line" padding>
<uni-steps :options="auditingList" :active="activeSect" />
</uni-section>
</uni-row>
<uni-row :gutter="24" class="check-form" v-if="!isFinished">
<!-- <div style="display: flex; justify-content: space-between; align-items: center">
<checkbox-group @change="onAllChecked">
<checkbox
color="#409eff"
borderColor="#409eff"
activeBorderColor="#409eff"
:checked="allChecked"
/>
</checkbox-group>
<div>全选 {{ checkedCount }}/{{ tableList.length }}</div>
</div> -->
<div>
<button type="primary" size="mini" @click="handleAllSubmit(true)">合格</button>
</div>
<div>
<button type="warn" size="mini" @click="handleAllSubmit(false)">不合格</button>
</div>
</uni-row>
<scroll-view scroll-y class="scroll-container">
<div
class="table-list-item"
v-for="(item, index) in tableList"
:key="index"
>
<div class="title">
<span>
<!-- <checkbox-group @change="onChangeChecked(item)">
<checkbox
color="#409eff"
borderColor="#409eff"
activeBorderColor="#409eff"
:checked="item.isChecked"
:disabled="item.status != '2'"
/>
</checkbox-group> -->
新购验收
</span>
<span :class="item.status == 2 ? 'pending' : 'completed'">
{{ item.status == 2 ? '未验收' : '已验收' }}
</span>
</div>
<div class="line"></div>
<uni-row :gutter="24">
<uni-col :span="6">物资名称:</uni-col>
<uni-col :span="18"
><div class="cont">{{ item.maTypeName }}</div></uni-col
>
</uni-row>
<uni-row :gutter="24">
<uni-col :span="6">规格型号:</uni-col>
<uni-col :span="18"
><div class="cont">{{ item.typeName }}</div></uni-col
>
</uni-row>
<uni-row :gutter="24">
<uni-col :span="6">到货数量:</uni-col>
<uni-col :span="18"
><div class="cont">{{ item.purchaseNum }}</div></uni-col
>
</uni-row>
<uni-row :gutter="24">
<uni-col :span="6">验收数量:</uni-col>
<uni-col :span="18"
><div class="cont">{{ item.purchaseNum }}</div></uni-col
>
</uni-row>
<uni-row :gutter="24" v-if="item.status != 2">
<uni-col :span="6">原因</uni-col>
<uni-col :span="18"
><div class="cont">{{ item.reason }}</div></uni-col
>
</uni-row>
</div>
<div class="loading-text">
{{ '没有更多数据了~' }}
</div>
</scroll-view>
</view>
</template>
<script setup>
import { ref, reactive, computed } from 'vue'
import { getPurchaseInfo, innerVerify, getSignListApi } from '../../../services/purchase.js'
import { onLoad, onShow } from '@dcloudio/uni-app'
const searchValue = ref('')
const id = ref('')
const taskId = ref('')
const isFinished = ref(false)
const statusList = ref(['2', '12'])
const tableList = ref([])
const allChecked = ref(false)
const auditingList = ref([
{ title: '供应科审核', desc: '' },
{ title: '技术科审核' },
{ title: '库管班审核' },
])
const activeSect = ref(0)
const checkedCount = computed(
() => tableList.value.filter((item) => item.status == 2 && item.isChecked).length,
)
const getSignList = async () => {
try {
const res = await getSignListApi({ taskId: taskId.value })
if (res.code === 200 && res.data && res.data.length > 0) {
auditingList.value = res.data.map((item, index) => {
return {
...item,
title: item.deptName + '审核',
desc: item.auditStatusName + '\n' + (index == 0 ? '姚士超' : item.userName || '') + '\n' + item.createTime + '\n' + (item.auditRemark || '')
}
})
activeSect.value = auditingList.value.length - 1
const auditSteps = [
{ title: '技术科审核', desc: '待审核' },
{ title: '库管班审核', desc: '待审核' }
]
if (auditingList.value.length === 1) {
auditingList.value.push(...auditSteps)
} else if (auditingList.value.length === 2) {
auditingList.value.push(auditSteps[1])
}
}
} catch (error) {
console.log('🚀 ~ getSignList ~ error:', error)
}
}
const getTableList = () => {
let obj = {
id: id.value,
taskId: taskId.value,
statusList: statusList.value,
taskStage: 2,
keyWord: searchValue.value,
}
console.log(obj)
getPurchaseInfo(obj)
.then((res) => {
console.log(res)
tableList.value = res.data.purchaseCheckDetailsList
if (tableList.value.length > 0) {
tableList.value.forEach((item) => {
item.isChecked = false
})
}
console.log(tableList.value)
})
.catch((error) => {
console.log(error)
})
}
const search = () => {
console.log('🚀 ~ search ~ searchValue:', searchValue.value)
getTableList()
}
const handleItem = (item) => {
console.log('🚀 ~ handleItem ~ item:', item)
if (item.status == 2) {
uni.navigateTo({
url: `/pages/new-purchase/accept/conclusion?item=${JSON.stringify(item)}`,
})
} else {
// 提示已验收
uni.showToast({
title: '已完成验收',
icon: 'none',
})
}
}
// 多选框选中
const onChangeChecked = (item) => {
item.isChecked = !item.isChecked
allChecked.value = tableList.value.every((item) => item.isChecked)
console.log('🚀 ~ onChangeChecked ~ item:', item)
}
// 全选
const onAllChecked = () => {
allChecked.value = !allChecked.value
tableList.value.forEach((item) => {
if (item.status == 2) {
console.log('全选的', allChecked.value)
item.isChecked = allChecked.value ? true : false
}
})
console.log('🚀 ~ tableList.value.forEach ~ tableList.value:', tableList.value)
}
// 批量合格
const handleAllSubmit = (bool) => {
console.log('🚀 ~ handleAllSubmit ~ bool:', bool)
const connect = bool ? '确定合格吗?' : '确定不合格吗?'
// 弹框确定
uni.showModal({
title: '提示',
content: connect,
success: async (res) => {
if (res.confirm) {
// 获取选中的行数据
// const checkedRows = tableList.value.filter(item => item.isChecked)
// console.log('🚀 ~ success: ~ checkedRows:', checkedRows)
const purchaseCheckDetailsList = tableList.value.map(item => {
return {
taskId: item.taskId,
typeId: item.typeId,
status: bool ? '3' : '1',
checkResult: bool ? '合格' : '不合格',
manageType: item.manageType
}
})
const param = {
purchaseCheckDetailsList,
verifyPass: bool
}
console.log('🚀 ~ success: ~ param:', param)
try {
const res = await innerVerify(param)
console.log('🚀 ~ success: ~ res:', res)
uni.showToast({
title: '操作成功',
icon: 'success'
})
allChecked.value = false
getTableList()
// 返回
uni.navigateBack()
} catch (error) {
console.log('🚀 ~ success: ~ error:', error)
}
}
},
})
}
onLoad((options) => {
console.log(options)
id.value = options.id
taskId.value = options.taskId
isFinished.value = options.isFinished ? JSON.parse(options.isFinished) : false
getTableList()
getSignList()
})
onShow(() => {
getTableList()
})
</script>
<style lang="scss" scoped>
.accept {
height: 100vh;
word-break: break-all;
background-color: #f7f8fa;
padding: 24rpx;
overflow-y: auto;
.search-form {
display: flex;
align-items: center;
background: #fff;
padding: 24rpx;
border-radius: 20rpx;
margin-bottom: 20rpx;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
:deep(.uni-easyinput__content) {
background-color: #f7f8fa;
border: 2rpx solid #e8e8e8;
border-radius: 12rpx;
height: 80rpx;
transition: all 0.3s ease;
&:focus-within {
border-color: #3784fb;
box-shadow: 0 0 0 2rpx rgba(55, 132, 251, 0.1);
}
}
}
.search {
height: 80rpx;
background: linear-gradient(135deg, #4b8eff 0%, #3784fb 100%);
text-align: center;
line-height: 80rpx;
color: #fff;
border-radius: 12rpx;
font-size: 28rpx;
font-weight: 600;
box-shadow: 0 6rpx 20rpx rgba(55, 132, 251, 0.2);
transition: all 0.3s ease;
&:active {
transform: translateY(2rpx);
opacity: 0.9;
}
}
}
.check-form {
display: flex;
justify-content: space-between;
align-items: center;
background: #fff;
padding: 24rpx 0;
border-radius: 20rpx;
margin-bottom: 20rpx;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
}
.sect-form {
/* display: flex;
justify-content: space-between;
align-items: center; */
background: #fff;
padding: 24rpx 0;
border-radius: 20rpx;
margin-bottom: 20rpx;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
}
.scroll-container {
padding: 0 2rpx;
}
.table-list-item {
margin: 24rpx 0;
padding: 32rpx;
background-color: #fff;
min-height: 300rpx;
border-radius: 20rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
transition: all 0.3s ease;
&:active {
transform: scale(0.985);
background-color: #fafbfc;
}
.title {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20rpx;
span:first-child {
font-size: 32rpx;
font-weight: 600;
color: #3784fb;
letter-spacing: 1rpx;
display: flex;
align-items: center;
}
span:last-child {
padding: 8rpx 28rpx;
border-radius: 8rpx;
font-size: 26rpx;
font-weight: 600;
&.completed {
background-color: rgba(55, 132, 251, 0.1);
color: #3784fb;
}
&.pending {
background-color: rgba(250, 140, 22, 0.1);
color: #fa8c16;
}
}
}
.line {
margin: 24rpx 0;
height: 2rpx;
background: linear-gradient(
90deg,
rgba(232, 232, 232, 0) 0%,
rgba(232, 232, 232, 1) 50%,
rgba(232, 232, 232, 0) 100%
);
}
:deep(.uni-row) {
margin-bottom: 20rpx;
.uni-col-6 {
color: #8c8c8c;
font-size: 28rpx;
font-weight: 500;
}
}
.cont {
display: flex;
justify-content: flex-end;
line-height: 1.8;
color: #262626;
font-size: 28rpx;
font-weight: 500;
}
}
.loading-text {
text-align: center;
font-size: 26rpx;
color: #8c8c8c;
padding: 32rpx 0;
letter-spacing: 1rpx;
}
</style>