SmartStorage/pages/exitMaterial/exitMaterial.vue

315 lines
6.8 KiB
Vue

<template>
<view>
<view
class="single-exit"
v-for="(exit, index) in exitMaterialList"
:key="index"
>
<view class="exit-upper">
<view class="upper-lef">
{{ exit.userName.slice(0, 1) }}
</view>
<view class="upper-rig">
<h4 style="font-size: 16px;">{{ exit.userName }}</h4>
<h4 style="color: #989898;">{{ exit.phone }}</h4>
</view>
</view>
<view class="exit-lower">
<view>
<span>退料单位</span>
<h4>{{ exit.unitName }}</h4>
</view>
<view>
<span>退料工程</span>
<h4>{{ exit.lotName }}</h4>
</view>
<view>
<span>退料类型</span>
<h4>{{ exit.typeName }}</h4>
</view>
<view>
<span>预约时间</span>
<h4>{{ exit.planStartTime }}</h4>
</view>
</view>
<view class="exit-btns">
<view
style="background-color: #3788FF;"
@click="seeDetail(exit.id)"
>
<uni-icons style="color: #fff;" type="eye" size="36"></uni-icons>
查看
</view>
<view style="background-color: #FCA30D;">
<uni-icons style="color: #fff;" type="compose" size="36"></uni-icons>
修改
</view>
<view style="background-color: #FF4242;">
<uni-icons style="color: #fff;" type="trash" size="36"></uni-icons>
删除
</view>
</view>
<view class="sticky-area">
<image src="/static/passed.png" v-show="exit.status == '0'" mode=""></image>
<image src="/static/noPass.png" v-show="exit.status == '1'" mode=""></image>
<image src="/static/noExam.png" v-show="exit.status == '2'" mode=""></image>
</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="exitForm" :modelValue="exitFormData" :rules="rules" label-position="top">
<uni-forms-item name="exitDept" required label="选择退料单位" label-width="150">
<uni-data-select
v-model="exitFormData.exitDept"
:localdata="deptRange"
:clear="false"
></uni-data-select>
</uni-forms-item>
<uni-forms-item name="exitProj" required label="选择退料工程" label-width="150">
<uni-data-select
v-model="exitFormData.exitProj"
:localdata="projRange"
:clear="false"
></uni-data-select>
</uni-forms-item>
<uni-forms-item name="exitTime" required label="选择预退料时间" label-width="150">
<uni-datetime-picker type="date" :clear-icon="false" v-model="exitFormData.exitTime"/>
</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 {
exitFormData: {
exitDept: '',
exitProj: '',
exitTime: ''
},
deptRange: [
{ text: '1', value: '1' },
{ text: '2', value: '2' },
{ text: '3', value: '3' }
],
projRange: [
{ text: '4', value: '4' },
{ text: '5', value: '5' },
{ text: '6', value: '6' }
],
rules: {
exitDept: {
rules: [
{
required: true,
errorMessage: '请选择退料部门!'
}
]
},
exitProj: {
rules: [
{
required: true,
errorMessage: '请选择退料工程!'
}
]
},
exitTime: {
rules: [
{
required: true,
errorMessage: '请选择预退料时间!'
}
]
}
},
exitMaterialList: [
]
}
},
methods: {
closePopup () {
this.$refs.popup.close()
},
formSubmit () {
let that = this
that.$refs.exitForm.validate().then(formData => {
console.log(formData);
that.$refs.popup.close()
})
},
seeDetail (id) {
uni.navigateTo({
url: `/pages/exitMaterialDetail/exitMaterialDetail?id=${id}`
})
}
},
onNavigationBarButtonTap() {
this.$refs.popup.open()
},
onShow() {
let that = this
console.log(uni.getStorageSync('userInfo').sysUser.companyId);
// 初始化获取机具退料申请列表
that.$api.exitMaterial.exitMaterialList({
// companyId: uni.getStorageSync('userInfo').sysUser.companyId
companyId: 1
}, null).then(res => {
console.log(res);
if (res.data.code == 200) {
that.exitMaterialList = res.data.data
}
}).catch(err => {
throw err
})
}
}
</script>
<style lang="scss">
body{
background-color: #f8f8f8;
}
.single-exit{
width: 95%;
margin: 20rpx auto;
background-color: #fff;
border-radius: 15rpx;
box-sizing: border-box;
padding: 15rpx;
position: relative;
.exit-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;
background-color: #409EFF;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
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;
}
}
}
.exit-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;
}
}
.exit-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: 0;
right: 0;
width: 11vh;
height: 10vh;
image{
width: 100%;
height: 100%;
}
}
}
.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>