SmartStorage/pages/crashExam/crashExam.vue

675 lines
15 KiB
Vue

<template>
<view>
<view
class="single-fetch"
v-for="(fetch, index) in fetchMaterialList"
:key="index"
>
<view class="fetch-upper">
<!-- <checkbox-group
v-show="fetch.taskStatus == 58"
style="margin-right: 15rpx;"
@change="checkClick(fetch)"
>
<checkbox :checked="fetch.checked" />
</checkbox-group> -->
<view class="upper-lef">
{{ fetch.createBy == null ? '' : fetch.createBy.slice(0, 1) }}
</view>
<view class="upper-rig">
<h4 style="font-size: 16px;">{{ fetch.createBy }}</h4>
<h4 style="color: #989898;">{{ fetch.unitName }}</h4>
</view>
</view>
<view class="fetch-lower">
<view>
<span>报废单号</span>
<h4>{{ fetch.scrapNum }}</h4>
</view>
<view>
<span>报废工程</span>
<h4>{{ fetch.projectName }}</h4>
</view>
<view>
<span>工机具类型</span>
<h4>{{ fetch.itemType }}</h4>
</view>
<view>
<span>报废数量</span>
<h4>{{ fetch.scrapNum2 }}</h4>
</view>
<view>
<span>申请日期</span>
<h4>{{ fetch.createTime }}</h4>
</view>
</view>
<view class="fetch-btns">
<view
style="background-color: #3788FF;"
@click="seeDetail(fetch.taskId, fetch.taskStatus, 0)"
>
<uni-icons style="color: #fff;" type="eye"></uni-icons>
查看
</view>
<view
style="background-color: #09dcfc;"
v-show="fetch.taskStatus == '58'"
@click="seeListExamDetail(fetch.scrapAuditorSetList)"
>
<uni-icons style="color: #fff;" type="chat"></uni-icons>
审批详情
</view>
<view
style="background-color: #FCA30D;"
v-show="fetch.taskStatus == 58 && fetch.already != '0' && fetch.ableExam"
@click="seeDetail(fetch.taskId, fetch.taskStatus, 1)"
>
<uni-icons style="color: #fff;" type="auth"></uni-icons>
审核
</view>
</view>
<view class="sticky-area">
<h4
:class="[
{ red: fetch.taskStatus == 61 },
{ green: fetch.taskStatus == 59 }
]"
>
{{ fetch.taskStatusName }}
</h4>
</view>
</view>
<!-- <view class="btm-sticky">
<view class="checked">
<checkbox-group @tap="checkAll" style="margin-right: 15rpx;">
<checkbox :checked="allChecked" />
</checkbox-group>
<text>全选</text>
</view>
<view
class="exam"
@click="toggleExam"
>
审核
</view>
</view> -->
<uni-popup
ref="popup"
type="center"
:mask-click="false"
>
<view class="popup">
<view class="pop-top">
<h4>审批</h4>
<uni-icons
style="color: #AAAAAA; font-weight: bold;"
type="closeempty"
@click="closePopup"
>
</uni-icons>
</view>
<h4 style="width: 85%; margin: 2vh auto; font-weight: normal; text-align: center;">是否通过审批?</h4>
<view class="select-area">
<view @click="modalConfirm">通过</view>
<view @click="modalReject">驳回</view>
<!-- <uni-forms ref="examForm" :modelValue="examFormData" :rules="rules" label-position="top">
<uni-forms-item name="ifPass" required label="是否通过" label-width="150">
<uni-data-select
v-model="examFormData.ifPass"
:localdata="ifPassRange"
:clear="false"
@change="ifPassChange"
></uni-data-select>
</uni-forms-item>
<uni-forms-item required v-show="examFormData.ifPass == '1'" name="noPassReason" label="不通过原因" label-width="150">
<uni-easyinput type="textarea" v-model="examFormData.noPassReason" placeholder="请输入内容"></uni-easyinput>
</uni-forms-item>
<button class="submit-btn" @click="formSubmit">确认</button>
</uni-forms> -->
</view>
</view>
</uni-popup>
<uni-popup
ref="popup2"
type="center"
:mask-click="false"
>
<view class="popup2">
<view class="pop-top">
<h4>审批详情</h4>
<uni-icons
style="color: #AAAAAA; font-weight: bold;"
type="closeempty"
@click="closePopup2"
>
</uni-icons>
</view>
<view class="select-area">
<!-- <view class="area-top">
<span>审批部门</span>
<span>审批状态</span>
<span>审批意见</span>
</view> -->
<uni-table ref="table" border stripe emptyText="暂无更多数据">
<uni-tr>
<uni-th align="center">审批部门</uni-th>
<uni-th align="center" width="150">审批状态</uni-th>
<uni-th align="center">审批意见</uni-th>
</uni-tr>
<uni-tr
v-for="(dept, index) in examDetailList"
:key="dept.id"
>
<uni-td align="center">
{{ dept.deptName }}
</uni-td>
<uni-td align="center">
<view
:class="[
{ 'orange': dept.status == '0' },
{ 'green': dept.status == '1' },
{ 'red': dept.status == '2' }
]"
>
{{ dept.mark }}
</view>
</uni-td>
<uni-td align="center">
{{ dept.reasonRejection == null ? '--' : dept.reasonRejection }}
</uni-td>
</uni-tr>
</uni-table>
<!-- <view
class="single-dept"
v-for="(dept, index) in examDetailList"
:key="dept.id"
>
<span>{{ dept.deptName }}</span>
<span>{{ dept.mark }}</span>
<span>{{ dept.reasonRejection == null ? '--' : dept.reasonRejection }}</span>
</view> -->
</view>
</view>
</uni-popup>
<u-loading-page :loading="showLoading" color="#000" loading-text="提交中,请稍后..."></u-loading-page>
</view>
</template>
<script>
export default {
data() {
return {
showLoading: false,
allChecked: false,
examFormData: {
ifPass: '',
noPassReason: ''
},
ifPassRange: [
{ text: '是', value: '0' },
{ text: '否', value: '1' }
],
rules: {
ifPass: {
rules: [
{
required: true,
errorMessage: '请选择是否通过!'
}
]
}
},
fetchMaterialList: [
],
taskIdList: [],
subArr: [],
subObj: {},
auditList: [],
examDetailList: []
}
},
methods: {
seeDetail (taskId, taskStatus, able) {
uni.navigateTo({
url: `/pages/crashExam/crashExamDetails?taskId=${taskId}&taskStatus=${taskStatus}&able=${able}`
})
},
seeListExamDetail (examList) {
console.log(examList);
examList.forEach(item => {
switch (item.status) {
case '0':
item.mark = '待审批'
break;
case '1':
item.mark = '通过'
break;
case '2':
item.mark = '已驳回'
break;
}
})
this.examDetailList = examList
this.$refs.popup2.open()
/* let transList = QS.stringify(examList)
uni.navigateTo({
url: `/pages/preCrashDeptList/preCrashDeptList?list=${transList}`
}) */
},
checkAll() {
this.allChecked = !this.allChecked
if (this.allChecked) {
this.fetchMaterialList.map(item => {
if (item.checked == false) {
item.checked = true
}
})
} else {
this.fetchMaterialList.map(item => {
if (item.checked == true) {
item.checked = false
}
})
}
},
checkClick(item) {
item.checked = !item.checked
if (!item.checked) {
this.allChecked = false
} else {
const goods = this.fetchMaterialList.every(item => {
return item.checked === true
})
if (goods) {
this.allChecked = true
} else {
this.allChecked = false
}
}
},
toggleExam (info) {
let that = this
that.subArr = []
that.auditList = that.fetchMaterialList.filter((item) => {
return item.checked == true
})
that.taskIdList = that.fetchMaterialList.filter((item) => {
return item.checked == true
}).map((subItem) => {
return {
taskId: subItem['taskId']
}
})
if (that.taskIdList.length == 0) {
uni.showToast({
icon: 'none',
title: '未选中审核项!'
})
} else {
for (let i = 0; i < that.taskIdList.length; i++) {
that.subArr.push(that.taskIdList[i].taskId)
}
that.openPopup()
/* uni.showModal({
title: '审核通过',
content: '确认审核通过吗?',
confirmText: '通过',
success: (res) => {
if (res.confirm) {
that.subObj = {
checkResult: '通过',
taskIdList: that.subArr
}
console.log(that.subObj);
that.subInStore(that.subObj)
}
}
}) */
}
},
subInStore (obj) {
let that = this
that.showLoading = true
// 通过审核或驳回
that.$api.crashExam.crashExamAudit(obj).then(res => {
console.log(res);
if (res.data.code == 200) {
that.showLoading = false
uni.showToast({
icon: 'none',
title: res.data.msg,
success: () => {
that.closePopup()
uni.redirectTo({
url: '/pages/crashExam/crashExam'
})
}
})
} else {
that.showLoading = false
uni.showToast({
icon: 'none',
title: res.data.msg
})
}
})
},
openPopup () {
this.$refs.popup.open()
},
closePopup () {
this.$refs.popup.close()
},
closePopup2 () {
this.$refs.popup2.close()
},
modalConfirm () {
let that = this
that.subObj = {
checkResult: '通过',
taskIdList: that.taskIdList
}
console.log(that.subObj);
that.subInStore(that.subObj)
},
modalReject () {
let that = this
that.subObj = {
checkResult: '驳回',
taskIdList: that.taskIdList
}
console.log(that.subObj);
that.subInStore(that.subObj)
},
formSubmit () {
let that = this
that.$refs.examForm.validate().then(formData => {
console.log(formData);
that.$refs.popup.close()
})
},
ifPassChange (e) {
let that = this
console.log(e);
if (e == 1) {
that.rules = {
ifPass: {
rules: [
{
required: true,
errorMessage: '请选择是否通过!'
}
]
},
noPassReason: {
rules: [
{
required: true,
errorMessage: '请填写不通过原因!'
}
]
}
}
} else {
that.examFormData.noPassReason = ''
that.rules = {
ifPass: {
rules: [
{
required: true,
errorMessage: '请选择是否通过!'
}
]
}
}
}
}
},
onShow() {
let that = this
// 初始化查询报废审核清单
that.$api.crashExam.crashExamList().then(res => {
console.log(res);
if (res.data.total != 0) {
res.data.rows.forEach(item => {
item.ableExam = true
item.scrapAuditorSetList.forEach(roleList => {
if (roleList.deptId == uni.getStorageSync('userInfo').sysUser.deptId) {
if (roleList.status != '0') {
item.already = '0'
}
} else {
item.ableExam = false
}
})
})
that.fetchMaterialList = res.data.rows
console.log(that.fetchMaterialList);
} else {
uni.showToast({
icon: 'none',
title: '暂无数据!'
})
}
}).catch(err => {
console.log(err);
})
}
}
</script>
<style lang="scss">
body{
background-color: #f8f8f8;
box-sizing: border-box;
padding-bottom: 10vh;
}
.single-fetch{
width: 95%;
margin: 20rpx auto;
background-color: #fff;
border-radius: 15rpx;
box-sizing: border-box;
padding: 15rpx;
position: relative;
.fetch-upper{
width: 100%;
box-sizing: border-box;
padding: 15rpx;
border-bottom: 1px solid #D7D7D7;
display: flex;
align-items: center;
.upper-lef{
width: 12%;
height: 5vh;
border-radius: 15rpx;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
background-color: #3788FF;
color: #fff;
}
.upper-rig{
flex: 1;
box-sizing: border-box;
padding: 10rpx 20rpx;
display: flex;
flex-direction: column;
justify-content: space-around;
h4{
font-weight: normal;
font-size: 14px;
}
}
}
.fetch-lower{
width: 100%;
box-sizing: border-box;
padding: 15rpx;
border-bottom: 1px solid #D7D7D7;
view{
width: 100%;
display: flex;
align-items: center;
margin-bottom: 15rpx;
font-size: 14px;
span{
color: #9D9D9D;
padding-right: 20rpx;
}
h4{
color: #000;
font-size: 14px;
font-weight: normal;
}
}
view:last-child{
margin-bottom: 0;
}
}
.fetch-btns{
width: 100%;
box-sizing: border-box;
padding: 15rpx;
display: flex;
justify-content: flex-end;
view{
box-sizing: border-box;
padding: 8rpx 25rpx;
border-radius: 15rpx;
color: #fff;
margin-right: 15rpx;
font-size: 14px;
}
view:last-child{
margin-right: 0;
}
}
.sticky-area{
position: absolute;
top: 20rpx;
right: 20rpx;
/* width: 11vh;
height: 10vh;
image{
width: 100%;
height: 100%;
} */
h4{
box-sizing: border-box;
padding: 8rpx 20rpx;
border-radius: 15rpx;
font-size: 14px;
font-weight: normal;
background-color: #fff;
border: 1px solid #3788FF;
color: #3788FF;
}
.red{
color: #FF4141;
border-color: #FF4141;
}
.green{
color: #1BD30B;
border-color: #1BD30B;
}
}
}
.btm-sticky{
position: fixed;
bottom: 0;
left: 0;
width: 100%;
box-sizing: border-box;
padding: 15rpx 30rpx;
background-color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
.checked{
display: flex;
align-items: center;
}
.exam{
box-sizing: border-box;
padding: 10rpx 50rpx;
border-radius: 30rpx;
background-color: #3788FF;
font-size: 14px;
color: #fff;
}
}
.popup{
width: 80vw;
height: 20vh;
background-color: #fff;
border-radius: 15rpx;
overflow: hidden;
background: linear-gradient(#D9E7FE, #fff, #fff, #fff);
.pop-top{
width: 100%;
height: 5vh;
box-sizing: border-box;
padding: 0 25rpx;
display: flex;
justify-content: space-between;
align-items: center;
}
.select-area{
width: 85%;
margin: 40rpx auto;
display: flex;
justify-content: space-around;
align-items: center;
view{
box-sizing: border-box;
font-size: 30rpx;
padding: 12rpx 24rpx;
background-color: #3788FF;
color: #fff;
border-radius: 20rpx;
}
}
}
.popup2{
width: 80vw;
height: 80vh;
background-color: #fff;
border-radius: 15rpx;
overflow-y: auto;
background: linear-gradient(#D9E7FE, #fff, #fff, #fff);
.pop-top{
width: 100%;
height: 5vh;
box-sizing: border-box;
padding: 0 25rpx;
display: flex;
justify-content: space-between;
align-items: center;
}
.select-area{
width: 85%;
margin: 40rpx auto;
font-size: 14px;
.red, .orange, .green{
width: 50%;
margin-left: 25%;
color: #fff;
border-radius: 10rpx;
}
.red{
background-color: #FF4141;
}
.orange{
background-color: #FCA20D;
}
.green{
background-color: #1BD30B;
}
}
}
</style>