SmartStorage/pages/fix/fix.vue

426 lines
9.0 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.repairStatus != '维修完成'"
style="margin-right: 15rpx;"
@change="checkClick(fetch)"
>
<checkbox :checked="fetch.checked" />
</checkbox-group>
<view class="upper-lef">
{{ fetch.createName.slice(0, 1) }}
</view>
<view class="upper-rig">
<h4 style="font-size: 16px;">{{ fetch.createName }}</h4>
<h4 style="color: #989898;">{{ fetch.backUnit }}</h4>
</view>
</view>
<view
class="fetch-lower"
@click="seeDetail(fetch.repairStatus, fetch.taskId)"
>
<view>
<span>维修单号</span>
<h4>{{ fetch.repairCode }}</h4>
</view>
<view>
<span>退料工程</span>
<h4>{{ fetch.backPro }}</h4>
</view>
<view>
<span>工机具类型</span>
<h4>{{ fetch.type }}</h4>
</view>
<view>
<span>申请日期</span>
<h4>{{ fetch.createTime }}</h4>
</view>
</view>
<view class="sticky-area">
<image src="/static/passed.png" v-show="fetch.repairStatus == '维修完成'" mode=""></image>
<image src="/static/noPass.png" v-show="fetch.repairStatus != '维修完成'" mode=""></image>
</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"
size="32"
@click="closePopup"
>
</uni-icons>
</view>
<view class="select-area">
<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>
</view>
</template>
<script>
import { basePath } from '../../public'
export default {
data() {
return {
allChecked: false,
examFormData: {
ifPass: '',
noPassReason: ''
},
ifPassRange: [
{ text: '是', value: '0' },
{ text: '否', value: '1' }
],
rules: {
ifPass: {
rules: [
{
required: true,
errorMessage: '请选择是否通过!'
}
]
}
},
fetchMaterialList: [
],
examList: []
}
},
methods: {
seeDetail (ifPass, id) {
if (ifPass == '维修完成') {
uni.showToast({
icon: 'none',
title: '维修已完成!'
})
} else {
uni.navigateTo({
url: `/pages/fixDetail/fixDetail?id=${id}`
})
}
},
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 () {
let that = this
that.examList = that.fetchMaterialList.filter((item) => {
return item.checked == true
})
if (that.examList.length == 0) {
uni.showToast({
icon: 'none',
title: '未选中审核项!'
})
} else {
uni.showModal({
title: '提交',
content: '是否确认提交?',
confirmText: '提交',
success: (res) => {
if (res.confirm) {
console.log(that.examList);
// 提交审核
uni.request({
url: basePath + '/repair/endRepairTask',
method: 'POST',
header: {
'content-type': 'application/json',
'Authorization': uni.getStorageSync('token')
},
data: that.examList,
success: (res) => {
console.log(res);
uni.showToast({
icon: 'none',
duration: 2500,
title: res.data.msg
})
}
})
}
}
})
}
},
closePopup () {
this.$refs.popup.close()
},
seeExam (name) {
console.log(name);
this.$refs.popup.open()
},
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
// 获取维修任务列表
uni.request({
url: basePath + '/repair/getRepairTaskList',
method: 'GET',
header: {
'content-type': 'application/json',
'Authorization': uni.getStorageSync('token')
},
data: {},
success: (res) => {
console.log(res);
if (res.data.code == 200) {
for (let i = 0; i < res.data.rows.length; i++) {
if (res.data.rows[i].repairStatus != '维修完成') {
res.data.rows[i].checked = false
}
}
that.fetchMaterialList = res.data.rows
console.log(that.fetchMaterialList);
}
}
})
}
}
</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;
display: flex;
justify-content: center;
align-items: center;
background-color: #3A89FF;
color: #fff;
font-size: 24px;
}
.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;
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;
}
}
.sticky-area{
position: absolute;
top: 0;
right: 0;
width: 9vh;
height: 8vh;
image{
width: 100%;
height: 100%;
}
}
}
.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: 60vh;
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;
.submit-btn{
background-color: #409EFF;
color: #fff;
}
}
}
</style>