661 lines
18 KiB
Vue
661 lines
18 KiB
Vue
<template>
|
||
<view class="hzIndex">
|
||
<hzHeader title="物资申请"></hzHeader>
|
||
<!-- <view class="banner-box">
|
||
<image v-if="currentTabIndex == 0" src="/static/images//epidemic/epidemic-banner.jpeg" mode=""></image>
|
||
<image v-if="currentTabIndex == 1" src="/static/images//epidemic/epidemic-banner.jpeg" mode=""></image>
|
||
</view> -->
|
||
<view class="hzContent">
|
||
<view class="main">
|
||
<view class="tab-box">
|
||
<view class="tab-item" :class="currentTabIndex == 0 ? 'active' : ''" @click="currentTabIndex = 0">物资申请<view class="activeLine" v-if="currentTabIndex == 0"></view></view>
|
||
<view class="tab-item" :class="currentTabIndex == 1 ? 'active' : ''" @click="currentTabIndex = 1">申请记录<view class="activeLine" v-if="currentTabIndex == 1"></view></view>
|
||
</view>
|
||
<view v-if="currentTabIndex == 0">
|
||
<view class="form-box" style="border-radius: 10upx; margin: 20upx 0px;">
|
||
<view class="form-item" style="border: none;">
|
||
<text class="label">姓 名:</text>
|
||
<view class="ipt-box"><input class="top-t" v-model="formData.userName" placeholder="请输入姓名" type="text" maxlength="50" disabled="true" /></view>
|
||
</view>
|
||
<view class="form-item" style="border: none;">
|
||
<text class="label">联系方式:</text>
|
||
<view class="ipt-box"><input class="top-t" v-model="formData.phone" placeholder="请输入联系方式" type="text" maxlength="50" disabled="true" /></view>
|
||
</view>
|
||
<view class="form-item" style="border: none;">
|
||
<text class="label">部 门:</text>
|
||
<view class="ipt-box"><input class="top-t" v-model="formData.orgName" placeholder="请输入部门" type="text" maxlength="50" disabled="true" /></view>
|
||
</view>
|
||
<view class="form-item" >
|
||
<text class="label">事 由:</text>
|
||
<view class="ipt-box">
|
||
<textarea style="border: 1px solid #eee;width:auto;height: 160upx;padding: 10upx;border-radius: 10upx;font-size: 26upx;color: #666;" v-model="formData.reason" maxlength="120" placeholder="请输入(120字以内)"/>
|
||
<!-- <input class="top-t" v-model="formData.reason" placeholder="请输入部门" type="text" maxlength="50" disabled="true" /> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-for="(item, index) in formData.supplies" :key="index" class="form-box" >
|
||
<view>
|
||
<view class="visitor">
|
||
<view class="form-item">
|
||
<text class="label">物 资：</text>
|
||
<view class="select">
|
||
<image class="arrow" src="/static/icons/right-arrow.png" mode=""></image>
|
||
<picker class="picker" :range="supplyNames" @change="changeDosage($event, index)" range-key="name" >
|
||
<view>{{ supplyNames[item.nameIndex].name }}</view>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
<view class="form-item">
|
||
<text class="label">单 位：</text>
|
||
<view class="ipt-box"><input class="name" v-model="supplyNames[item.nameIndex].unit " type="text" disabled="true" /></view>
|
||
</view>
|
||
<view class="form-item">
|
||
<text class="label">数 量：</text>
|
||
<view class="ipt-box">
|
||
<view class="">
|
||
<input class="name" v-model="item.num" type="number" placeholder="请输入数量" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="form-item">
|
||
<text class="label">备 注：</text>
|
||
<view class="ipt-box">
|
||
<view class="">
|
||
<textarea style="border: 1px solid #eee;width:auto;height: 160upx;padding: 10upx;border-radius: 10upx;font-size: 26upx;color: #666;" v-model="item.remarks" maxlength="120" placeholder="请输入(120字以内)"/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="form-item" v-if="formData.supplies.length > 0 && index > 0">
|
||
<image class="jian" src="../../static/imgs/jian.png" @click="jianBtn(index)" alt=""></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 添加 -->
|
||
<view id="addbtn" class="add clear" @click="addBtn()">
|
||
<view class="addbtn"><text >+ 新增</text></view>
|
||
</view>
|
||
<view class="form-box" style="border-radius: 10upx;margin-top: 20upx;padding-top: 0px;">
|
||
<view class="form-item" >
|
||
<text class="label">审批人:</text>
|
||
<view class="ipt-box select">
|
||
<image class="arrow" src="/static/icons/right-arrow.png" mode=""></image>
|
||
<picker class="picker" v-if="examList.length > 0" :range="examList" @change="changeExamList" range-key="name">
|
||
<view>{{ examList[examIndex].name }}</view>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="occupied"></view>
|
||
<view class="footer-btn footer-btn-color" @click="submit()"><view class="btn">提交</view></view>
|
||
</view>
|
||
|
||
<view class="list-box" v-if="currentTabIndex == 1">
|
||
<view class="list-item" v-for="(item, index) in list" :key="index" @click="toDetail(item)">
|
||
<view class="title">
|
||
<!-- <text class="line"></text> -->
|
||
<image src="/static/img/materialIcon.png" mode="" style="width: 35upx;height: 40upx;margin-left: 20upx;vertical-align: middle;"></image>
|
||
<text class="text">物资申请</text>
|
||
<text v-if="item.EXAMINE_STATE ==0" class="statusred" style="color: #ff9000;background-color: #FFEFE3;" >待审核</text>
|
||
<text v-if="item.EXAMINE_STATE ==2" class="statusred" style="color: #BD1515;background-color: #F6DFDF;">已拒绝</text>
|
||
<text v-if="item.EXAMINE_STATE ==1" class="statusred" style="color: #0DB0A7;background-color: #C1EFEA;">已通过</text>
|
||
</view>
|
||
<view class="content">
|
||
<view class="info-item">
|
||
<view class="fl-text">申请人:</view>
|
||
<view class="fr-text">{{item.USER_NAME}}</view>
|
||
</view>
|
||
<view class="info-item">
|
||
<view class="fl-text">联系电话:</view>
|
||
<view class="fr-text">{{item.PHONE}}</view>
|
||
</view>
|
||
<view class="info-item">
|
||
<view class="fl-text">预定日期:</view>
|
||
<view class="fr-text">{{formatDate(item.GMT_CREATED,'dateTime')}}</view>
|
||
</view>
|
||
<view class="info-item">
|
||
<view class="fl-text">申请物资:</view>
|
||
<view class="fr-text">
|
||
<text v-for="(item1, index1) in item.detailList" :key="index1">
|
||
<!-- <text v-if="index1!=0">，</text> -->
|
||
<br v-if="index1!=0">
|
||
{{ item1.MATERIAL_NAME+"("+item1.SPECS+"*"+item1.NUM+")" }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="info-item" style="width: 100%;text-align: center;" @click="details(item)">
|
||
<text style="width: 100%;color: #4db4ea;font-size: 28upx;">点击查看详情</text>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<content-none v-if="currentTabIndex != 0 && list.length == 0" :padTop="20"></content-none>
|
||
</view>
|
||
<load-more v-show="currentTabIndex == 1" :loadingType="loadingType" :contentText="contentText"></load-more>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { materialAdd,materialList,getMaterialExamUser,getMaterialInfoList} from '@/common/api.js';
|
||
import { callbackRequest, convertImgToBase64, alertTip, getStorage,wxSdk,uploadImg ,formatDate} from '@/common/util.js';
|
||
import loadMore from '@/components/loadMore.vue';
|
||
import contentNone from '@/components/contentNone.vue';
|
||
import datetimePicker from '@/components/dateTime.vue';
|
||
import uniNumberBox from '@/components/uni-number-box/uni-number-box.vue';
|
||
import { pathToBase64 } from '@/js_sdk/mmmm-image-tools/index.js';
|
||
let currentTime = new Date().getTime();
|
||
let millisecond = 24 * 7 * 60 * 60 * 1000;
|
||
export default {
|
||
data() {
|
||
return {
|
||
userId: getStorage('userInfo').userId, //登录用户id
|
||
user: getStorage('userInfo'),
|
||
formatDate:formatDate,
|
||
selectedTime: '',
|
||
currentTabIndex: 0,
|
||
page: 1,
|
||
pageSize: 10,
|
||
supplyNames: [],
|
||
supplyNameIndex: 0,
|
||
list: [],
|
||
userName: getStorage('userInfo').userName,
|
||
DeptName: getStorage('userInfo').userId,
|
||
phone: getStorage('userInfo').telnumber,
|
||
loadingType: 0, //0-loading前；1-loading中；2-没有更多了
|
||
contentText: {
|
||
contentdown: '上拉加载更多',
|
||
contentrefresh: '正在加载...',
|
||
contentnomore: '没有更多数据了'
|
||
},
|
||
formData:{
|
||
userId: getStorage('userInfo').userId,
|
||
userName: getStorage('userInfo').userName,
|
||
phone: getStorage('userInfo').telnumber,
|
||
orgId: getStorage('userInfo').department_id,
|
||
orgName: getStorage('userInfo').departmentName,
|
||
reason:"",
|
||
examinePersonId:'',
|
||
examinePersonName:'',
|
||
supplies:[
|
||
{
|
||
name:"",
|
||
nameIndex:'0',
|
||
specs:"",
|
||
num:"",
|
||
remarks:""
|
||
}
|
||
]
|
||
},
|
||
examIndex:0,
|
||
examList:[]
|
||
};
|
||
},
|
||
components: {
|
||
loadMore,
|
||
datetimePicker,
|
||
contentNone,
|
||
uniNumberBox
|
||
},
|
||
watch: {
|
||
currentTabIndex: function(newVal, oldVal) {
|
||
this.currentTabIndex = newVal;
|
||
if (this.currentTabIndex==1) {
|
||
this.page = 1;
|
||
this.loadingType = 0;
|
||
this.materialList();
|
||
}else{
|
||
this.getMaterialInfoList();
|
||
this.getMaterialExamUser();
|
||
}
|
||
},
|
||
},
|
||
onLoad(option) {
|
||
this.currentTabIndex = option.currentTabIndex || 0;
|
||
|
||
if (this.currentTabIndex == 0) {
|
||
this.getMaterialInfoList();
|
||
this.getMaterialExamUser();
|
||
}else{
|
||
this.page = 1;
|
||
this.loadingType = 0;
|
||
this.materialList();
|
||
}
|
||
},
|
||
methods: {
|
||
getMaterialExamUser(){
|
||
let params = {
|
||
method: getMaterialExamUser,
|
||
data: {
|
||
userId: getStorage('userInfo').userId,
|
||
departmentId:getStorage('userInfo').deptIdUrl,
|
||
}
|
||
};
|
||
callbackRequest(params).then(res => {
|
||
res = res.data;
|
||
if (res.returnCode == 1) {
|
||
console.log(res);
|
||
this.examList = res.returnData;
|
||
} else {
|
||
alertTip(res.returnMsg);
|
||
}
|
||
});
|
||
},
|
||
|
||
getMaterialInfoList(){
|
||
let params = {
|
||
method: getMaterialInfoList,
|
||
data: {
|
||
userId: getStorage('userInfo').userId,
|
||
}
|
||
};
|
||
callbackRequest(params).then(res => {
|
||
res = res.data;
|
||
if (res.returnCode == 1) {
|
||
console.log(res);
|
||
this.supplyNames = res.returnData;
|
||
} else {
|
||
alertTip(res.returnMsg);
|
||
}
|
||
});
|
||
},
|
||
changeExamList(e){
|
||
this.examIndex = e.detail.value;
|
||
this.formData.examinePersonId = this.examList[this.examIndex].id;
|
||
this.formData.examinePersonName = this.examList[this.examIndex].name;
|
||
},
|
||
|
||
// 选择剂型
|
||
changeDosage(e,index) {
|
||
let cur = this;
|
||
cur.formData.supplies[index].name =this.supplyNames[e.detail.value].name ;
|
||
cur.formData.supplies[index].nameIndex =e.detail.value;
|
||
},
|
||
|
||
materialList() {
|
||
var data = { userId: this.userId, pageNum: this.page, pageSize: this.pageSize };
|
||
let params = {
|
||
method: materialList,
|
||
data: data
|
||
};
|
||
callbackRequest(params).then(res => {
|
||
if (res.data.returnCode == 1) {
|
||
let result = res.data.returnData;
|
||
if (this.page == 1) {
|
||
this.list = result;
|
||
} else {
|
||
if (result.length > 0) {
|
||
this.list = this.list.concat(result);
|
||
console.log(this.list)
|
||
this.loadingType = 0;
|
||
} else {
|
||
this.loadingType = 2;
|
||
}
|
||
}
|
||
} else {
|
||
alertTip(res.data.returnMsg);
|
||
}
|
||
});
|
||
},
|
||
toDetail: function(item) {
|
||
uni.navigateTo({
|
||
url: '/pages/epidemic/epidemic-supplies-detail?item=' + JSON.stringify(item)
|
||
});
|
||
},
|
||
|
||
confirm(e) {
|
||
this.selectedTime = e.fulldate;
|
||
},
|
||
// 添加一个药品表单
|
||
addBtn() {
|
||
var obj = { nameIndex: '0',name:"", specs: '',num:'',remarks:''};
|
||
this.formData.supplies.push(obj);
|
||
this.number ++;
|
||
},
|
||
// 删除一个药品表单
|
||
jianBtn(index) {
|
||
// $delete : Vue的语法，响应式
|
||
this.$delete(this.formData.supplies, index);
|
||
},
|
||
submit() {
|
||
console.log(this.formData);
|
||
for(var i=0;i<this.formData.supplies.length;i++){
|
||
this.formData.supplies[i].name = this.supplyNames[this.formData.supplies[i].nameIndex].name;
|
||
this.formData.supplies[i].specs = this.supplyNames[this.formData.supplies[i].nameIndex].unit;
|
||
let obj = this.formData.supplies[i];
|
||
if(!obj.num){
|
||
alertTip('请输入数量');
|
||
return;
|
||
}
|
||
}
|
||
this.formData.examinePersonId = this.examList[this.examIndex].id;
|
||
this.formData.examinePersonName = this.examList[this.examIndex].name;
|
||
let params = {
|
||
method: materialAdd,
|
||
data: this.formData
|
||
};
|
||
callbackRequest(params).then(res => {
|
||
if (res.data.returnCode == 1) {
|
||
alertTip(res.data.returnMsg);
|
||
setTimeout(function() {
|
||
uni.navigateTo({
|
||
url: '/pages/epidemic/epidemic-supplies?currentTabIndex=1'
|
||
});
|
||
}, 1500);
|
||
} else {
|
||
alertTip(res.data.returnMsg);
|
||
}
|
||
});
|
||
}
|
||
},
|
||
onReachBottom() {
|
||
if (this.loadingType !== 0 || this.currentTabIndex == 0) {
|
||
return;
|
||
}
|
||
this.loadingType = 1;
|
||
this.page = this.page + 1;
|
||
this.materialList();
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import '@/static/css/common.scss';
|
||
page {
|
||
// background: #f8f8f8;
|
||
}
|
||
|
||
// .container {
|
||
// position: relative;
|
||
// overflow: hidden;
|
||
// background: #f8f8f8;
|
||
// min-height: 100vh;
|
||
// .banner-box {
|
||
// width: 100%;
|
||
// height: 240upx;
|
||
// position: absolute;
|
||
// top: 0;
|
||
// left: 0;
|
||
// image {
|
||
// width: 100%;
|
||
// height: 100%;
|
||
// }
|
||
// }
|
||
// }
|
||
.main {
|
||
margin: 180upx 10upx 0;
|
||
position: relative;
|
||
z-index: 10;
|
||
.tab-box {
|
||
overflow: hidden;
|
||
// border-radius: 10upx 10upx 0 0;
|
||
// background: rgba(132, 149, 167, 0.8);
|
||
height: 80upx;
|
||
.tab-item {
|
||
float: left;
|
||
height: 70upx;
|
||
width: 30%;
|
||
font-size: 30upx;
|
||
// color: #e5f6ff;
|
||
// text-align: center;
|
||
line-height: 70upx;
|
||
}
|
||
.active {
|
||
// background: #fff;
|
||
color: #333;
|
||
border-radius: 10upx 10upx 0 0;
|
||
font-weight: bold;
|
||
}
|
||
.activeLine{
|
||
background: linear-gradient( 90deg, #50CBA1 0%, #06AEA6 100%), #5685F2;
|
||
border-radius: 10upx;
|
||
width: 80upx;
|
||
height: 10upx;
|
||
}
|
||
}
|
||
.form-box {
|
||
padding: 20upx 30upx 0upx;
|
||
margin-bottom: 20upx;
|
||
background: #fff;
|
||
.form-item {
|
||
overflow: hidden;
|
||
border-bottom: 1px solid #eee;
|
||
padding: 30upx 0;
|
||
.label {
|
||
float: left;
|
||
width: 150upx;
|
||
font-size: 28upx;
|
||
color: #333;
|
||
font-weight: bold;
|
||
line-height: 50upx;
|
||
}
|
||
.ipt-box {
|
||
margin-left: 160upx;
|
||
input {
|
||
width: 100%;
|
||
height: 50upx;
|
||
line-height: 50upx;
|
||
font-size: 26upx;
|
||
color: #666;
|
||
}
|
||
.pic {
|
||
width: 60upx;
|
||
height: 60upx;
|
||
line-height: 80upx;
|
||
}
|
||
}
|
||
.select {
|
||
.arrow {
|
||
float: right;
|
||
width: 16upx;
|
||
height: 29upx;
|
||
margin-top: 10upx;
|
||
}
|
||
input {
|
||
width: 70%;
|
||
}
|
||
}
|
||
.tip-c {
|
||
color: #929292;
|
||
font-size: 25upx;
|
||
margin-left: 20upx;
|
||
}
|
||
.jian {
|
||
width: 50upx;
|
||
height: 50upx;
|
||
margin-left: 280upx;
|
||
}
|
||
.select {
|
||
.arrow {
|
||
float: right;
|
||
width: 16upx;
|
||
height: 29upx;
|
||
margin-top: 10upx;
|
||
}
|
||
|
||
.picker {
|
||
height: 50upx;
|
||
line-height: 50upx;
|
||
font-size: 26upx;
|
||
color: #666;
|
||
}
|
||
}
|
||
}
|
||
.upload-box {
|
||
.label {
|
||
float: none;
|
||
}
|
||
.img-box {
|
||
overflow: hidden;
|
||
padding-top: 25upx;
|
||
.img-item {
|
||
float: left;
|
||
width: 210upx;
|
||
height: 210upx;
|
||
border: 1px solid #ddd;
|
||
margin: 0 20upx 20upx 0upx;
|
||
position: relative;
|
||
.img {
|
||
display: block;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.remove-btn {
|
||
position: absolute;
|
||
top: -18upx;
|
||
right: -18upx;
|
||
width: 44upx;
|
||
height: 44upx;
|
||
z-index: 2;
|
||
}
|
||
}
|
||
.upload-btn {
|
||
.img {
|
||
width: 60upx;
|
||
height: 60upx;
|
||
margin: 75upx auto 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.sure-btn {
|
||
width: 100%;
|
||
height: 80upx;
|
||
font-size: 28upx;
|
||
color: #fff;
|
||
text-align: center;
|
||
line-height: 80upx;
|
||
border-radius: 8upx;
|
||
background: #0066cc;
|
||
background: linear-gradient(to right, #ffc200, #ff9000); /*设置按钮为渐变颜色*/
|
||
margin-top: 50upx;
|
||
}
|
||
}
|
||
.form-box .form-item:last-child {
|
||
border-bottom: 0px;
|
||
}
|
||
.list-box {
|
||
margin-top: 20upx;
|
||
.list-item {
|
||
background: #fff;
|
||
margin-bottom: 20upx;
|
||
border-radius: 15upx;
|
||
.title {
|
||
border-bottom: #f8f8f8 5upx solid;
|
||
height: 100upx;
|
||
line-height: 100upx;
|
||
.line {
|
||
display: inline-block;
|
||
width: 10upx;
|
||
height: 32upx;
|
||
background: $assistColor;
|
||
margin-top: 4upx;
|
||
}
|
||
.text {
|
||
display: inline-block;
|
||
color: #444;
|
||
font-size: 32upx;
|
||
font-weight: bold;
|
||
margin-left: 20upx;
|
||
vertical-align: middle;
|
||
}
|
||
.status {
|
||
font-size: 26upx;
|
||
color: $assistColor;
|
||
float: right;
|
||
}
|
||
.status1 {
|
||
font-size: 26upx;
|
||
color: #5063c3;
|
||
float: right;
|
||
}
|
||
.status2 {
|
||
font-size: 26upx;
|
||
color: red;
|
||
float: right;
|
||
}
|
||
.statusred {
|
||
width: 160upx;
|
||
height: 60upx;
|
||
line-height: 60upx;
|
||
text-align: center;
|
||
font-size: 24upx;
|
||
border-radius: 50upx;
|
||
float: right;
|
||
margin-right: 30upx;
|
||
margin-top: 25upx;
|
||
}
|
||
}
|
||
.content {
|
||
padding: 10upx 20upx;
|
||
// padding:10upx 10upx 60upx 10upx;
|
||
.info-item {
|
||
overflow: hidden;
|
||
padding-bottom: 10upx;
|
||
.fl-text {
|
||
float: left;
|
||
font-size: 28upx;
|
||
color: #999;
|
||
line-height: 40upx;
|
||
}
|
||
.fr-text {
|
||
float: right;
|
||
font-size: 26upx;
|
||
color: #999;
|
||
line-height: 40upx;
|
||
width: 70%;
|
||
text-align: right;
|
||
}
|
||
}
|
||
}
|
||
.comment-btn {
|
||
float: right;
|
||
font-size: 24upx;
|
||
border-radius: 10upx;
|
||
color: #fff;
|
||
line-height: 50upx;
|
||
text-align: center;
|
||
min-width: 140upx;
|
||
background-color: #00c277;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
#addbtn {
|
||
height: 100upx;
|
||
background-color: #ffffff;
|
||
border-radius: 20upx;
|
||
color: #333333;
|
||
position: relative;
|
||
margin-top: 20upx;
|
||
line-height: 100upx;
|
||
text-align: center;
|
||
text {
|
||
font-size: 38upx;
|
||
color: #00c277;
|
||
}
|
||
}
|
||
.addbtn view text:nth-child(1) {
|
||
font-size: 38upx;
|
||
color: #00c277;
|
||
}
|
||
.addbtn view text:nth-child(2) {
|
||
font-size: 32upx;
|
||
color: #00c277;
|
||
}
|
||
.tips {
|
||
font-size: 22upx;
|
||
// margin-left: 80upx;
|
||
margin-top: 20upx;
|
||
}
|
||
.num-box {
|
||
float: right;
|
||
width: 220upx;
|
||
// height: 20upx;
|
||
}
|
||
</style>
|