You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
357 lines
9.6 KiB
357 lines
9.6 KiB
<template>
|
|
<view class="app-container">
|
|
<view style="display: flex;flex-direction: column;background-color: #fff;padding-bottom: 50px;">
|
|
|
|
<view class="item">
|
|
<text class="item_text">合同编号：</text>
|
|
<input v-model="formobj.salesContractNumber" placeholder="" class="item_input" clearable />
|
|
</view>
|
|
<view class="item">
|
|
<text class="item_text" style="margin-left: -9px;">合同日期：</text>
|
|
<uni-datetime-picker type="date" :clear-icon="false" v-model="formobj.contractSigningDate"
|
|
@change="contractSigningDateChange" />
|
|
</view>
|
|
<view class="item">
|
|
<text class="item_text" style="margin-left: -9px;">出库日期：</text>
|
|
<uni-datetime-picker type="date" :clear-icon="false" v-model="formobj.deliveryDate"
|
|
@change="deliveryDateChange" />
|
|
</view>
|
|
<view class="item">
|
|
<text class="item_text" style="margin-left: -9px;">原油名称：</text>
|
|
<uni-data-select style="flex-grow: 1;" v-model="formobj.crudeName" :localdata="crudeList"
|
|
@change="crudeChange"></uni-data-select>
|
|
</view>
|
|
<view class="item">
|
|
<text class="item_text">原油编号：</text>
|
|
<input v-model="formobj.crudeNumber" placeholder="" :disabled="true" class="item_input" clearable />
|
|
</view>
|
|
<view class="item">
|
|
<text class="item_text" style="margin-left: -9px;">油罐编号：</text>
|
|
<uni-data-select style="flex-grow: 1;" v-model="formobj.tankName" :localdata="tankList"
|
|
@change="tankChange"></uni-data-select>
|
|
</view>
|
|
<view class="item">
|
|
<text class="item_text">流量仪器：</text>
|
|
<input v-model="formobj.flowmeterName" placeholder="" :disabled="true" class="item_input" clearable />
|
|
</view>
|
|
<view class="item">
|
|
<text class="item_text">净重：</text>
|
|
<input v-model="formobj.weight" placeholder="" type="number" @input="input1" class="item_input" clearable />
|
|
</view>
|
|
<view class="item">
|
|
<text class="item_text">原油价值：</text>
|
|
<input v-model="formobj.value" placeholder="" type="number" @input="input2" class="item_input" clearable />
|
|
</view>
|
|
<view class="item">
|
|
<text class="item_text">备注：</text>
|
|
<input v-model="formobj.remarks" placeholder="" class="item_input" clearable />
|
|
</view>
|
|
<view class="item">
|
|
<text class="item_text" style="margin-right:21px;">登记材料：</text>
|
|
<view style="flex: 1;">
|
|
<text class="text_upload" @click="uploadImage">上传</text>
|
|
</view>
|
|
</view>
|
|
<scroll-view style="width: 100%;white-space: nowrap; overflow: hidden;" scroll-x="true">
|
|
<view style="margin-top: 15px;display: inline-block;flex-direction: row; justify-content: center;">
|
|
<view v-for="(item,index) in formobj.crudeOilOutboundFiles" :key="index"
|
|
style="display: inline-block;">
|
|
<view
|
|
style="margin-left: 20rpx;margin-right: 20rpx;display: flex;flex-direction: row; justify-content: center;">
|
|
<image :src="item" style="width: 180rpx;height: 160rpx;z-index: 1;" mode="aspectFill"
|
|
@click="showImage(index)">
|
|
</image>
|
|
<image src="../../static/icon_delete.png"
|
|
style="margin-left: -33rpx;margin-top: 5rpx;width: 30rpx;height: 30rpx;z-index: 2;"
|
|
@click="deleteItem(item)">
|
|
</image>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import config from '@/common/config.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
uploadAction: config.baseUrl + "/file/upload",
|
|
crudeLists: [],
|
|
crudeList: [],
|
|
tankLists: [],
|
|
tankList: [],
|
|
formobj: {
|
|
sid: "",
|
|
salesContractNumber: "",
|
|
contractSigningDate: "",
|
|
deliveryDate: "",
|
|
crudeSid: "",
|
|
crudeName: "",
|
|
crudeNumber: "",
|
|
tankSid: "",
|
|
tankName: "",
|
|
flowmeterName: "",
|
|
oilType: "",
|
|
weight: "",
|
|
value: "",
|
|
remarks: "",
|
|
crudeOilOutboundFiles :[
|
|
// 'https://tse4-mm.cn.bing.net/th/id/OIP-C.n609VUNve7V_xgkSttfjSQHaEo?w=275&h=180&c=7&r=0&o=5&pid=1.7',
|
|
// 'https://tse1-mm.cn.bing.net/th/id/OIP-C.5IdmyJvdYpAv2SzbaR1y8QHaEo?w=276&h=180&c=7&r=0&o=5&pid=1.7',
|
|
// 'https://tse1-mm.cn.bing.net/th/id/OIP-C.UCTs_1Ee45pr2ZGH6PlKxgHaEo?w=276&h=180&c=7&r=0&o=5&pid=1.7',
|
|
// 'https://tse1-mm.cn.bing.net/th/id/OIP-C.UCTs_1Ee45pr2ZGH6PlKxgHaEo?w=276&h=180&c=7&r=0&o=5&pid=1.7',
|
|
],
|
|
|
|
}
|
|
}
|
|
},
|
|
|
|
onLoad() {
|
|
this.initData()
|
|
},
|
|
methods: {
|
|
input1(e) {
|
|
//正则表达试
|
|
e.detail.value = e.target.value.match(/^\d*(\.?\d{0,2})/g)[0];
|
|
console.log(e)
|
|
//重新赋值给input
|
|
this.$nextTick(() => {
|
|
this.formobj.weight = e.detail.value
|
|
})
|
|
},
|
|
input2(e) {
|
|
//正则表达试
|
|
e.detail.value = e.target.value.match(/^\d*(\.?\d{0,2})/g)[0];
|
|
console.log(e)
|
|
//重新赋值给input
|
|
this.$nextTick(() => {
|
|
this.formobj.value = e.detail.value
|
|
})
|
|
},
|
|
uploadImage() {
|
|
let that = this
|
|
uni.chooseImage({
|
|
count: 9,
|
|
sizeType: ['original', 'compressed'],
|
|
sourceType: ['camera', 'album'], //这要注意，camera掉拍照，album是打开手机相册
|
|
success: (res) => {
|
|
console.log(res);
|
|
const tempFilePaths = res.tempFilePaths;
|
|
for (let i = 0; i < tempFilePaths.length; i++) {
|
|
that.aaa(tempFilePaths[i])
|
|
}
|
|
}
|
|
});
|
|
},
|
|
aaa(path) {
|
|
|
|
uni.uploadFile({
|
|
url: this.uploadAction, //服务器地址
|
|
fileType: "image", //ZFB必填,不然报错
|
|
filePath: path, //这个就是我们上面拍照返回或者先中照片返回的数组
|
|
name: 'file',
|
|
success: (uploadFileRes) => {
|
|
|
|
let imgData = JSON.parse(uploadFileRes.data)
|
|
console.log(imgData);
|
|
console.log(imgData.data.fullUrl);
|
|
|
|
this.formobj.crudeOilOutboundFiles.push(imgData.data.fullUrl)
|
|
|
|
}
|
|
});
|
|
},
|
|
showImage(index) {
|
|
uni.previewImage({
|
|
current: index,
|
|
urls: this.formobj.crudeOilOutboundFiles
|
|
});
|
|
},
|
|
deleteItem(item) {
|
|
let _this = this
|
|
uni.showModal({
|
|
title: '温馨提示',
|
|
content: '确定要删除图片吗？',
|
|
success(res) {
|
|
if (res.confirm) {
|
|
_this.formobj.crudeOilOutboundFiles.splice(_this.formobj.crudeOilOutboundFiles.indexOf(
|
|
item), 1)
|
|
}
|
|
}
|
|
});
|
|
|
|
},
|
|
onNavigationBarButtonTap(e) {
|
|
console.log(e)
|
|
|
|
if (e.index === 0) {
|
|
console.log("crudeoutboundSave>>>", this.formobj);
|
|
this.$api.crudeoutboundSave(this.formobj).then(res => {
|
|
console.log("crudeoutboundSave>>>", res);
|
|
uni.navigateBack({
|
|
delta: 1,
|
|
animationType: 'pop-out',
|
|
animationDuration: 200
|
|
});
|
|
})
|
|
|
|
} else {
|
|
uni.showToast({
|
|
title: "正在完善中。。。",
|
|
icon: "none"
|
|
})
|
|
}
|
|
|
|
|
|
},
|
|
contractSigningDateChange(e) {
|
|
console.log('----dateChange事件:', e);
|
|
this.formobj.contractSigningDate = e
|
|
|
|
|
|
},
|
|
deliveryDateChange(e) {
|
|
console.log('----dateChange事件:', e);
|
|
this.formobj.deliveryDate = e
|
|
|
|
},
|
|
crudeChange(e) {
|
|
console.log('e>>>>>', e);
|
|
const choose = this.crudeLists.filter((item) => item.sid === e)
|
|
console.log(">>>>>>>>>getType", choose[0])
|
|
this.formobj.crudeSid = choose[0].sid
|
|
this.formobj.crudeName = choose[0].name
|
|
this.formobj.crudeNumber = choose[0].number
|
|
console.log(">>>>>>>>>crudeSid", this.formobj.crudeSid)
|
|
console.log(">>>>>>>>>crudeName", this.formobj.crudeName)
|
|
// 获取油罐类型 数据字典
|
|
this.$api.tankinfoListBySid({
|
|
crudeSid: choose[0].sid,
|
|
}).then(res => {
|
|
console.log("tankinfoList>>>", res);
|
|
// this.resinfo = res
|
|
this.tankLists = res
|
|
this.tankList = []
|
|
for (var i = 0; i < this.tankLists.length; i++) {
|
|
let item = {
|
|
"value": this.tankLists[i].sid,
|
|
"text": this.tankLists[i].number
|
|
}
|
|
this.tankList.push(item)
|
|
}
|
|
})
|
|
|
|
},
|
|
tankChange(e) {
|
|
console.log('e>>>>>', e);
|
|
const choose = this.tankLists.filter((item) => item.sid === e)
|
|
console.log(">>>>>>>>>getType", choose[0])
|
|
this.formobj.tankSid = choose[0].sid
|
|
this.formobj.tankName = choose[0].number
|
|
this.formobj.flowmeterName = choose[0].flowmeterName
|
|
|
|
console.log(">>>>>>>>>tankSid", this.formobj.tankSid)
|
|
console.log(">>>>>>>>>tankName", this.formobj.tankName)
|
|
// this.queryParams.type = e
|
|
},
|
|
initData() {
|
|
// 获取原油类型 数据字典
|
|
this.$api.crudeinfoList({}).then(res => {
|
|
console.log("crudeinfoList>>>", res);
|
|
// this.resinfo = res
|
|
this.crudeLists = res
|
|
this.crudeList = []
|
|
for (var i = 0; i < this.crudeLists.length; i++) {
|
|
let item = {
|
|
"value": this.crudeLists[i].sid,
|
|
"text": this.crudeLists[i].name
|
|
}
|
|
this.crudeList.push(item)
|
|
}
|
|
|
|
})
|
|
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.app-container {
|
|
background: #fff;
|
|
padding-top: 10px;
|
|
height: 100% !important;
|
|
}
|
|
|
|
.item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
margin-top: 15px;
|
|
margin-right: 10px;
|
|
|
|
.item_text {
|
|
flex: 0.6;
|
|
font-size: 18px;
|
|
text-align: right;
|
|
}
|
|
|
|
.item_input {
|
|
flex: 1;
|
|
font-size: 16px;
|
|
height: 40px;
|
|
border-radius: 4px;
|
|
border: 1px solid #e5e5e5;
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
|
|
}
|
|
|
|
.text_upload {
|
|
font-size: 16px;
|
|
height: 40px;
|
|
border-radius: 5px;
|
|
color: #fff;
|
|
padding: 2px 15px;
|
|
background: #018AD2;
|
|
}
|
|
|
|
.item_left_input {
|
|
width: 20%;
|
|
}
|
|
|
|
.item_left_text {
|
|
height: 30px;
|
|
margin-left: 20px;
|
|
line-height: 30px;
|
|
color: #018AD2;
|
|
padding: 0px 15px;
|
|
border: 1.5px solid #018AD2;
|
|
border-radius: 5px;
|
|
|
|
}
|
|
|
|
.item_right {
|
|
flex: 1;
|
|
justify-items: center;
|
|
|
|
.item_right_list_text {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.item_right_list_delect {
|
|
color: #5E94FF;
|
|
margin-left: 20px;
|
|
font-size: 16px;
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|