业务办理
This commit is contained in:
parent
14057b3dcb
commit
ef7ecf76e1
|
|
@ -22,19 +22,6 @@
|
|||
@clear="clearPro"
|
||||
></eselect>
|
||||
</uni-forms-item>
|
||||
<uni-row :gutter="30" style="display: flex; align-items: center;margin-bottom: 10px;">
|
||||
|
||||
<uni-col :span="15">
|
||||
<uni-forms-item label="开始时间" name="reduceStartTime" label-width="90rpx" >
|
||||
<uni-datetime-picker type="date" :clear-icon="false" v-model="formData.reduceStartTime" @change="changeStartTime"/>
|
||||
</uni-forms-item>
|
||||
</uni-col>
|
||||
<uni-col :span="15">
|
||||
<uni-forms-item label="结束时间" name="reduceEndTime" label-width="90rpx" >
|
||||
<uni-datetime-picker type="date" :clear-icon="false" v-model="formData.reduceEndTime" @change="changeEndTime"/>
|
||||
</uni-forms-item>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
<uni-row :gutter="30" style="display: flex; align-items: center;margin-bottom: 10px;">
|
||||
|
||||
<uni-col :span="15">
|
||||
|
|
@ -55,7 +42,20 @@
|
|||
</uni-forms-item>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
<uni-forms-item label="附件">
|
||||
<uni-row :gutter="30" style="display: flex; align-items: center;margin-bottom: 10px;">
|
||||
|
||||
<uni-col :span="15">
|
||||
<uni-forms-item label="开始时间" name="reduceStartTime" label-width="90rpx" >
|
||||
<uni-datetime-picker type="date" :clear-icon="false" v-model="formData.reduceStartTime" @change="changeStartTime"/>
|
||||
</uni-forms-item>
|
||||
</uni-col>
|
||||
<uni-col :span="15">
|
||||
<uni-forms-item label="结束时间" name="reduceEndTime" label-width="90rpx" >
|
||||
<uni-datetime-picker type="date" :clear-icon="false" v-model="formData.reduceEndTime" @change="changeEndTime"/>
|
||||
</uni-forms-item>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
<uni-forms-item label="附件">
|
||||
<div class="upload-wrapper" style="display: flex; flex-wrap: wrap;">
|
||||
<!-- 上传按钮,仅当上传图片数量少于 3 张时显示 -->
|
||||
<div class="upload" @click="uploadImg" v-if="bmFileInfos.length < 3">+</div>
|
||||
|
|
@ -68,11 +68,14 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</uni-forms-item>
|
||||
</uni-forms-item>
|
||||
<uni-row :gutter="24" style="display: flex; align-items: center;margin-bottom: 10px;">
|
||||
<uni-col :span="8">
|
||||
<view class="addBtn" @click="submitNum">减免申请</view>
|
||||
</uni-col>
|
||||
<uni-col :span="8">
|
||||
<view class="addBtn" @click="handleClean" v-if="num1>0">一键去除</view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
</uni-forms>
|
||||
</div>
|
||||
|
|
@ -96,10 +99,10 @@
|
|||
<!-- 表格数据行 -->
|
||||
<uni-tr v-for="(item,index) in typeList" :key="item.id">
|
||||
<uni-td style="font-size: 24rpx;text-align: center;">
|
||||
<uni-datetime-picker type="date" :clear-icon="false" v-model="item.reduceStartTime" />
|
||||
<uni-datetime-picker type="date" :key="componentKey" :clear-icon="false" v-model="item.reduceStartTime" @change="(e) =>updateReduceStart(item,e)"/>
|
||||
</uni-td>
|
||||
<uni-td style="font-size: 24rpx;text-align: center;">
|
||||
<uni-datetime-picker type="date" :clear-icon="false" v-model="item.reduceEndTime" />
|
||||
<uni-datetime-picker type="date" :key="componentKey" :clear-icon="false" v-model="item.reduceEndTime" @change="(e) =>updateReduceEnd(item,e)"/>
|
||||
</uni-td>
|
||||
<uni-td style="font-size: 24rpx;text-align: center;">
|
||||
<uni-easyinput
|
||||
|
|
@ -133,7 +136,7 @@
|
|||
</template>
|
||||
|
||||
<script setup >
|
||||
import { ref, reactive } from 'vue'
|
||||
import { ref, reactive,nextTick } from 'vue'
|
||||
import eselect from '@/components/tree-select/eselect.vue'
|
||||
import { onLoad,onReady } from '@dcloudio/uni-app'
|
||||
import { getUnitList,getProjectList,getThreeType,getFourType,getDirefList,insertApp,getAgreementInfoById,getTypeDataList,leaseTask } from '../../services/back.js';
|
||||
|
|
@ -163,11 +166,14 @@ const typeId = ref("")//类型
|
|||
const maCodeSelectList = ref([])
|
||||
const typeCode = ref("")//规格型号
|
||||
const typeList = ref([])
|
||||
const typeListTemp = ref([])
|
||||
const bmFileInfos = ref([])//图片数组
|
||||
// 定义 form 引用
|
||||
const form = ref(null)
|
||||
const reduceStartTime = ref('')
|
||||
const reduceEndTime = ref('')
|
||||
const componentKey = ref(0)
|
||||
const num1 = ref(0)
|
||||
|
||||
// 定义表单验证规则
|
||||
const rules = ref({
|
||||
|
|
@ -346,6 +352,10 @@ const selectMaCode = (e) => {
|
|||
const paramList = res.data
|
||||
paramList.forEach(item => {
|
||||
item.reduceNum = item.num;
|
||||
item.reduceDays = 0;
|
||||
item.reduceLeaseMoney = 0;
|
||||
item.reduceStartTime = null;
|
||||
item.reduceEndTime = null;
|
||||
typeList.value.push(item)
|
||||
})
|
||||
}).catch(error => {
|
||||
|
|
@ -368,64 +378,92 @@ const selectMaCode = (e) => {
|
|||
console.log(typeList.value)
|
||||
}
|
||||
//提交
|
||||
const submitNum = async() => {
|
||||
const submitNum = () => {
|
||||
|
||||
console.log(typeList.value)
|
||||
// 直接使用引用调用验证方法
|
||||
form.value.validate((valid)=>{
|
||||
form.value.validate(async(valid)=>{
|
||||
console.log('🚀 ~ submitNum ~ valid:', valid)
|
||||
if(!valid){
|
||||
// 校验 preNum 必须大于 0
|
||||
if (typeList.value.length === 0) {
|
||||
console.log('🚀 ~ submitNum ~ typeList.value:', typeList.value)
|
||||
uni.showToast({
|
||||
title: '请添加减免申请数据',
|
||||
icon: 'none',
|
||||
})
|
||||
return
|
||||
}
|
||||
for (let i = 0; i < typeList.value.length; i++) {
|
||||
if (typeList.value[i].preNum <= 0 || !typeList.value[i].preNum) {
|
||||
uni.showToast({
|
||||
title: '预领数量不能为空或等于0',
|
||||
if(bmFileInfos.value.length==0){
|
||||
await uni.showToast({
|
||||
title: '请上传附件!',
|
||||
icon: 'none',
|
||||
})
|
||||
return
|
||||
}
|
||||
// 校验 reduceNum 必须大于 0
|
||||
if (typeList.value.length === 0) {
|
||||
console.log('🚀 ~ submitNum ~ typeList.value:', typeList.value)
|
||||
await uni.showToast({
|
||||
title: '请添加减免申请数据',
|
||||
icon: 'none',
|
||||
})
|
||||
return
|
||||
}
|
||||
}
|
||||
let obj = {
|
||||
"leaseApplyInfo":{
|
||||
"unitId":unitId.value,
|
||||
"projectId":proId.value,
|
||||
"agreementId":agreementId.value,
|
||||
"leasePerson":formData.value.leasePerson,
|
||||
"phone":formData.value.phone,
|
||||
"standardConfigId":configId.value,
|
||||
"applyCode":formData.value.applyCode,
|
||||
|
||||
},
|
||||
"leaseApplyDetailsList":typeList.value
|
||||
}
|
||||
console.log(obj)
|
||||
leaseTask(obj).then( res => {
|
||||
console.log(res)
|
||||
if(res.code==200){
|
||||
console.log('xxxxxxxxxxxxxxxx')
|
||||
uni.showToast({ title: '申请成功', icon: 'none',duration: 1000
|
||||
})
|
||||
setTimeout(() => {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
}, 1000);
|
||||
}else{
|
||||
console.log('yyyyyyyyyyyyy')
|
||||
uni.showToast({ title: res.msg, icon: 'none',duration: 1000 })
|
||||
}
|
||||
}).catch(error => {
|
||||
console.log(error)
|
||||
})
|
||||
let index = typeList.value.findIndex(item => new Date(item.reduceEndTime) < new Date(item.reduceStartTime))
|
||||
let index2 = typeList.value.findIndex(item => item.reduceNum > item.num)
|
||||
let index3 = typeList.value.findIndex(item => item.reduceNum == 0)
|
||||
let index4 = typeList.value.findIndex(item => item.reduceStartTime==null || new Date(item.reduceStartTime).getTime()==0)
|
||||
let index5 = typeList.value.findIndex(item => item.reduceEndTime==null || new Date(item.reduceEndTime).getTime()==0)
|
||||
console.log(index,index2,index3,index4,index5)
|
||||
if(index3>-1){
|
||||
uni.showToast({
|
||||
title: '减免数量不能为0!',
|
||||
icon: 'none',
|
||||
duration: 1000
|
||||
})
|
||||
return
|
||||
}else if(index4>-1){
|
||||
uni.showToast({
|
||||
title: '请先去除减免时间不符合的数据!',
|
||||
icon: 'none',
|
||||
duration: 1000
|
||||
})
|
||||
return
|
||||
}else if(index5>-1){
|
||||
uni.showToast({
|
||||
title: '请先去除减免时间不符合的数据!',
|
||||
icon: 'none',
|
||||
duration: 1000
|
||||
})
|
||||
return
|
||||
}else if(index2>-1){
|
||||
uni.showToast({
|
||||
title: '减免数量不能大于领料数量!',
|
||||
icon: 'none',
|
||||
duration: 1000
|
||||
})
|
||||
return
|
||||
}else if(index>-1){
|
||||
uni.showToast({
|
||||
title: '结束时间不能小于开始时间!',
|
||||
icon: 'none',
|
||||
duration: 1000
|
||||
})
|
||||
return
|
||||
}else{
|
||||
uni.showToast({
|
||||
title: '提交成功!',
|
||||
icon: 'none',
|
||||
duration: 1000
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
|
||||
// for (let i = 0; i < typeList.value.length; i++) {
|
||||
// if (typeList.value[i].reduceNum <= 0 || !typeList.value[i].reduceNum) {
|
||||
// uni.showToast({
|
||||
// title: '减免数量不能为空或等于0',
|
||||
// icon: 'none',
|
||||
// })
|
||||
// return
|
||||
// }
|
||||
// }
|
||||
|
||||
}else{
|
||||
console.log('xxxxxxxxxxxxxxxxxxxxxxxxxx')
|
||||
return;
|
||||
}
|
||||
})
|
||||
|
|
@ -500,7 +538,9 @@ const changeStartTime = (e) => {
|
|||
});
|
||||
// 强制更新视图,确保列表中的减免时间立即更新
|
||||
typeList.value = [...typeList.value];
|
||||
|
||||
}
|
||||
updateNum();
|
||||
// formData.value.reduceStartTime = e.detail.value
|
||||
}
|
||||
// 结束时间
|
||||
|
|
@ -571,6 +611,135 @@ const changeEndTime = (e) => {
|
|||
});
|
||||
// 强制更新视图,确保列表中的减免时间立即更新
|
||||
typeList.value = [...typeList.value];
|
||||
}
|
||||
updateNum();
|
||||
}
|
||||
|
||||
const updateReduceStart = (row,e) => {
|
||||
console.log('🚀 ~ updateReduceStart ~ e:', e)
|
||||
let startTime = new Date(row.reduceStartTime);
|
||||
let startTimeTemp = row.reduceStartTime
|
||||
let endTime = new Date(row.reduceEndTime);
|
||||
let endTimeTemp = row.reduceEndTime
|
||||
let pickStartTime = new Date(row.startTime);
|
||||
let pickEndTime = new Date(row.endTime);
|
||||
// 判断减免开始时间和结束时间是否在领料日期和退料日期之间
|
||||
if (startTime < pickStartTime || startTime > pickEndTime) {
|
||||
console.log(row.reduceStartTime, '....>');
|
||||
|
||||
row.reduceStartTime = null
|
||||
row.reduceDays = 0
|
||||
row.reduceLeaseMoney = 0
|
||||
console.log('11111111111111111111111111111', row.reduceStartTime);
|
||||
nextTick(() => {
|
||||
// 强制更新视图
|
||||
typeList.value = [...typeList.value];
|
||||
componentKey.value++;
|
||||
uni.showToast({
|
||||
title: '请选择有效的减免开始时间!',
|
||||
icon: 'none',
|
||||
duration: 1000
|
||||
});
|
||||
});
|
||||
}else if (startTimeTemp!=null && endTimeTemp!=null && endTime >= startTime) {
|
||||
const oneDay = 24 * 60 * 60 * 1000; // 一天的毫秒数
|
||||
const diffDays = Math.ceil(Math.abs((endTime - startTime) / oneDay)) + (endTime - startTime === 0 ? 1 : 1);
|
||||
row.reduceDays = diffDays
|
||||
if(row.reduceNum && row.reduceDays && row.leasePrice){
|
||||
row.reduceLeaseMoney = row.reduceDays*row.leasePrice*row.reduceNum
|
||||
}
|
||||
// row.leaseDays = diffDays;
|
||||
}else if(endTimeTemp!=null && endTime<startTime){
|
||||
row.reduceStartTime = null
|
||||
row.reduceDays = 0
|
||||
row.reduceLeaseMoney = 0
|
||||
nextTick(() => {
|
||||
// 强制更新视图
|
||||
typeList.value = [...typeList.value];
|
||||
componentKey.value++;
|
||||
uni.showToast({
|
||||
title: '请选择有效的减免开始时间!',
|
||||
icon: 'none',
|
||||
duration: 1000
|
||||
});
|
||||
});
|
||||
}else{
|
||||
row.reduceDays = 0
|
||||
row.reduceLeaseMoney = 0
|
||||
// 强制更新视图
|
||||
typeList.value = [...typeList.value];
|
||||
}
|
||||
// 强制更新视图,确保列表中的减免时间立即更新
|
||||
typeList.value = [...typeList.value];
|
||||
updateNum();
|
||||
}
|
||||
|
||||
const updateReduceEnd = (row,e) => {
|
||||
let startTime = new Date(row.reduceStartTime);
|
||||
let startTimeTemp = row.reduceStartTime
|
||||
let endTimeTemp = row.reduceEndTime
|
||||
let endTime = new Date(row.reduceEndTime);
|
||||
let pickStartTime = new Date(row.startTime);
|
||||
let pickEndTime = new Date(row.endTime);
|
||||
// 判断减免开始时间和结束时间是否在领料日期和退料日期之间
|
||||
if( endTime < pickStartTime || endTime > pickEndTime){
|
||||
row.reduceEndTime = null
|
||||
row.reduceDays = 0
|
||||
row.reduceLeaseMoney = 0
|
||||
nextTick(() => {
|
||||
// 强制更新视图
|
||||
typeList.value = [...typeList.value];
|
||||
componentKey.value++;
|
||||
uni.showToast({
|
||||
title: '请选择有效的减免结束时间!',
|
||||
icon: 'none',
|
||||
duration: 1000
|
||||
});
|
||||
});
|
||||
}else if (startTimeTemp!=null && endTimeTemp!=null && endTime >= startTime) {
|
||||
const oneDay = 24 * 60 * 60 * 1000; // 一天的毫秒数
|
||||
const diffDays = Math.ceil(Math.abs((endTime - startTime) / oneDay)) + (endTime - startTime === 0 ? 1 : 1);
|
||||
row.reduceDays = diffDays
|
||||
if(row.reduceNum && row.reduceDays && row.leasePrice){
|
||||
row.reduceLeaseMoney = row.reduceDays*row.leasePrice*row.reduceNum
|
||||
}
|
||||
|
||||
}else if(startTimeTemp!=null && endTime<startTime){
|
||||
row.reduceEndTime = null
|
||||
row.reduceDays = 0
|
||||
row.reduceLeaseMoney = 0
|
||||
nextTick(() => {
|
||||
// 强制更新视图
|
||||
typeList.value = [...typeList.value];
|
||||
componentKey.value++;
|
||||
uni.showToast({
|
||||
title: '请选择有效的减免结束时间!',
|
||||
icon: 'none',
|
||||
duration: 1000
|
||||
});
|
||||
});
|
||||
}else{
|
||||
row.reduceDays = 0
|
||||
row.reduceLeaseMoney = 0
|
||||
// 强制更新视图
|
||||
typeList.value = [...typeList.value];
|
||||
}
|
||||
// 强制更新视图,确保列表中的减免时间立即更新
|
||||
typeList.value = [...typeList.value];
|
||||
updateNum();
|
||||
}
|
||||
const handleClean = () => {
|
||||
// 过滤掉不符合的数据
|
||||
typeList.value = typeList.value.filter((item, index) => {
|
||||
return index === typeList.value.length - 1 || (item.reduceStartTime && item.reduceEndTime);
|
||||
});
|
||||
// // 更新符合和不符合的数据条数
|
||||
updateNum();
|
||||
}
|
||||
|
||||
const updateNum = () => {
|
||||
if (formData.value.reduceStartTime && formData.value.reduceEndTime) {
|
||||
num1.value= typeList.value.filter(item =>!item.reduceStartTime ||!item.reduceEndTime).length;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -591,34 +760,46 @@ onLoad((options) => {
|
|||
})
|
||||
//上传
|
||||
const uploadImg = (item) => {
|
||||
if(bmFileInfos.value.length>=3){
|
||||
uni.showToast({
|
||||
title: '最多上传3张图片!',
|
||||
icon: 'none',
|
||||
})
|
||||
return
|
||||
}
|
||||
uni.chooseImage({
|
||||
count: 1, //图片可选择数量
|
||||
count: 3 - bmFileInfos.value.length, //图片可选择数量
|
||||
sizeType: ['original', 'compressed'], //original 原图,compressed 压缩图,默认二者都有
|
||||
sourceType: ['album', 'camera',], //album 从相册选图,camera 使用相机,默认二者都有。
|
||||
success: res => {
|
||||
console.log(res)
|
||||
let imgFiles = res.tempFilePaths //图片的本地文件路径列表
|
||||
imgFiles.forEach((filePath) => {
|
||||
console.log('2222222222222222222222')
|
||||
bmFileInfos.value.push({urlTemp:filePath})
|
||||
})
|
||||
console.log('🚀 ~ uploadImg ~ imgFiles:', imgFiles)
|
||||
// imgBeseUrl.value = imgFiles[0]
|
||||
// console.log('本地地址', imgFiles)
|
||||
// console.log('请求地址', baseURL+"/file/upload")
|
||||
bmFileInfos.value.forEach((item,index) => {
|
||||
uni.uploadFile({
|
||||
// url: baseURL+"/file/upload",//app
|
||||
url: "/file/upload",//h5
|
||||
filePath: imgFiles[0],
|
||||
filePath: item.urlTemp,
|
||||
name: 'file',
|
||||
success: (res) => {
|
||||
res = JSON.parse(res.data)
|
||||
console.log('上传成功', res.code);
|
||||
console.log('上传成功', res.data);
|
||||
if(res.code&&res.code==200){
|
||||
let obj = {
|
||||
"name":res.data.name,
|
||||
"url":res.data.url
|
||||
}
|
||||
item.bmFileInfos.value = [obj]
|
||||
bmFileInfos.value[index] = {
|
||||
...bmFileInfos.value[index],
|
||||
name: res.data.name,
|
||||
url: res.data.url
|
||||
};
|
||||
uni.showToast({ title: '上传成功', icon: 'none' })
|
||||
}else{
|
||||
item.bmFileInfos.value = []
|
||||
uni.showToast({ title: '上传失败', icon: 'none' })
|
||||
}
|
||||
},
|
||||
|
|
@ -626,10 +807,17 @@ const uploadImg = (item) => {
|
|||
console.error('上传失败', err);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// this.$refs.vForm.clearValidate()
|
||||
}
|
||||
})
|
||||
}
|
||||
const deleteImg = (index) => {
|
||||
bmFileInfos.value.splice(index, 1);
|
||||
// bmFileInfosTemp.value.splice(index, 1);
|
||||
};
|
||||
|
||||
//删除
|
||||
const delRow = (index) => {
|
||||
console.log(index)
|
||||
|
|
@ -645,6 +833,7 @@ const onChangeNumber = (item) => {
|
|||
setTimeout(()=>{
|
||||
// item.directNum = Number(String(item.directNum).replace(/[^\d.]/g,''))
|
||||
|
||||
|
||||
if (Number(item.reduceNum)<= 0) {
|
||||
item.reduceNum = 0;
|
||||
}
|
||||
|
|
@ -654,6 +843,11 @@ const onChangeNumber = (item) => {
|
|||
icon: 'none',
|
||||
})
|
||||
item.reduceNum = maxNum;
|
||||
}else{
|
||||
if(item.reduceNum && item.reduceDays && item.leasePrice){
|
||||
item.reduceLeaseMoney = item.reduceDays*item.leasePrice*item.reduceNum
|
||||
}
|
||||
typeList.value = [...typeList.value];
|
||||
}
|
||||
},500)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<view class="accept page-common">
|
||||
<div class="card">
|
||||
<uni-forms :model="formData" ref="form" label-width="200rpx" :rule="rules.value" :border="true" >
|
||||
<uni-forms-item label="领用单位:" name="unitId" >
|
||||
<uni-forms-item label="领用单位" name="unitId" >
|
||||
<eselect
|
||||
style="width: 100%; height: 90rpx"
|
||||
v-model="formData.unitId"
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
@clear="clearUnit"
|
||||
></eselect>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="领用工程:" name="proId" >
|
||||
<uni-forms-item label="领用工程" name="proId" >
|
||||
<eselect
|
||||
style="width: 100%; height: 90rpx"
|
||||
v-model="formData.proId"
|
||||
|
|
@ -22,16 +22,16 @@
|
|||
@clear="clearPro"
|
||||
></eselect>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="采购申请编号:" name="applyCode" >
|
||||
<uni-forms-item label="采购申请编号" name="applyCode" >
|
||||
<uni-easyinput v-model="formData.applyCode" maxlength="10" placeholder="请输入领料人" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="领料人:" name="leasePerson" >
|
||||
<uni-forms-item label="领料人" name="leasePerson" >
|
||||
<uni-easyinput v-model="formData.leasePerson" maxlength="10" placeholder="请输入领料人" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="联系电话:" name="phone" >
|
||||
<uni-forms-item label="联系电话" name="phone" >
|
||||
<uni-easyinput v-model="formData.phone" maxlength="11" placeholder="请输入联系电话" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="标准配置:" name="configId" >
|
||||
<uni-forms-item label="标准配置" name="configId" >
|
||||
<eselect
|
||||
style="width: 100%; height: 90rpx"
|
||||
v-model="formData.configId"
|
||||
|
|
@ -41,6 +41,20 @@
|
|||
@clear="clearConfig"
|
||||
></eselect>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="附件" label-width="100rpx" v-if="flagFile">
|
||||
<div class="upload-wrapper" style="display: flex; flex-wrap: wrap;">
|
||||
<!-- 上传按钮,仅当上传图片数量少于 3 张时显示 -->
|
||||
<div class="upload" @click="uploadImg" v-if="bmFileInfos.length < 3">+</div>
|
||||
<!-- 动态展示已上传的图片 -->
|
||||
<div class="upload" @click="uploadImg" v-for="(img, index) in bmFileInfos" :key="index">
|
||||
<div class="image-container">
|
||||
<image :src="img.urlTemp" style="width: 160rpx;height: 160rpx;" mode=""></image>
|
||||
<!-- 删除 logo,这里用一个 span 模拟,可替换为实际的 logo 图片 -->
|
||||
<span class="delete-logo" @click.stop="deleteImg(index)">×</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</uni-forms-item>
|
||||
</uni-forms>
|
||||
</div>
|
||||
<div class="card">
|
||||
|
|
@ -152,9 +166,10 @@ const typeId = ref("")//类型
|
|||
const maCodeSelectList = ref([])
|
||||
const typeCode = ref("")//规格型号
|
||||
const typeList = ref([])
|
||||
|
||||
const bmFileInfos = ref([])//图片数组
|
||||
// 定义 form 引用
|
||||
const form = ref(null)
|
||||
const flagFile = ref(false)
|
||||
|
||||
|
||||
// 定义表单验证规则
|
||||
|
|
@ -242,6 +257,10 @@ const getUnit = () => {
|
|||
}
|
||||
//工程
|
||||
const getProject = async (e) => {
|
||||
flagFile.value = false
|
||||
if (e.typeKey == 'fbs') {
|
||||
flagFile.value = true
|
||||
}
|
||||
console.log('🚀 ~ getProject ~ e:', e)
|
||||
unitId.value = e?.id || ''
|
||||
formData.value.unitId = e?.id || ''
|
||||
|
|
@ -402,15 +421,24 @@ const submitNum = async() => {
|
|||
|
||||
console.log(typeList.value)
|
||||
// 直接使用引用调用验证方法
|
||||
form.value.validate((valid)=>{
|
||||
form.value.validate(async(valid)=>{
|
||||
console.log('🚀 ~ submitNum ~ valid:', valid)
|
||||
if(!valid){
|
||||
if(flagFile.value && bmFileInfos.value.length==0){
|
||||
await uni.showToast({
|
||||
title: '请上传附件',
|
||||
icon: 'none',
|
||||
duration: 1000
|
||||
})
|
||||
return
|
||||
}
|
||||
// 校验 preNum 必须大于 0
|
||||
if (typeList.value.length === 0) {
|
||||
console.log('🚀 ~ submitNum ~ typeList.value:', typeList.value)
|
||||
uni.showToast({
|
||||
await uni.showToast({
|
||||
title: '请添加申请数据',
|
||||
icon: 'none',
|
||||
duration: 1000
|
||||
})
|
||||
return
|
||||
}
|
||||
|
|
@ -419,6 +447,7 @@ const submitNum = async() => {
|
|||
uni.showToast({
|
||||
title: '预领数量不能为空或等于0',
|
||||
icon: 'none',
|
||||
duration: 1000
|
||||
})
|
||||
return
|
||||
}
|
||||
|
|
@ -432,7 +461,7 @@ const submitNum = async() => {
|
|||
"phone":formData.value.phone,
|
||||
"standardConfigId":configId.value,
|
||||
"applyCode":formData.value.applyCode,
|
||||
|
||||
"bmFileInfos": bmFileInfos.value,
|
||||
},
|
||||
"leaseApplyDetailsList":typeList.value
|
||||
}
|
||||
|
|
@ -480,34 +509,46 @@ onLoad((options) => {
|
|||
})
|
||||
//上传
|
||||
const uploadImg = (item) => {
|
||||
if(bmFileInfos.value.length>=3){
|
||||
uni.showToast({
|
||||
title: '最多上传3张图片!',
|
||||
icon: 'none',
|
||||
})
|
||||
return
|
||||
}
|
||||
uni.chooseImage({
|
||||
count: 1, //图片可选择数量
|
||||
count: 3 - bmFileInfos.value.length, //图片可选择数量
|
||||
sizeType: ['original', 'compressed'], //original 原图,compressed 压缩图,默认二者都有
|
||||
sourceType: ['album', 'camera',], //album 从相册选图,camera 使用相机,默认二者都有。
|
||||
success: res => {
|
||||
console.log(res)
|
||||
let imgFiles = res.tempFilePaths //图片的本地文件路径列表
|
||||
imgFiles.forEach((filePath) => {
|
||||
console.log('2222222222222222222222')
|
||||
bmFileInfos.value.push({urlTemp:filePath})
|
||||
})
|
||||
console.log('🚀 ~ uploadImg ~ imgFiles:', imgFiles)
|
||||
// imgBeseUrl.value = imgFiles[0]
|
||||
// console.log('本地地址', imgFiles)
|
||||
// console.log('请求地址', baseURL+"/file/upload")
|
||||
bmFileInfos.value.forEach((item,index) => {
|
||||
uni.uploadFile({
|
||||
// url: baseURL+"/file/upload",//app
|
||||
url: "/file/upload",//h5
|
||||
filePath: imgFiles[0],
|
||||
filePath: item.urlTemp,
|
||||
name: 'file',
|
||||
success: (res) => {
|
||||
res = JSON.parse(res.data)
|
||||
console.log('上传成功', res.code);
|
||||
console.log('上传成功', res.data);
|
||||
if(res.code&&res.code==200){
|
||||
let obj = {
|
||||
"name":res.data.name,
|
||||
"url":res.data.url
|
||||
}
|
||||
item.bmFileInfos.value = [obj]
|
||||
bmFileInfos.value[index] = {
|
||||
...bmFileInfos.value[index],
|
||||
name: res.data.name,
|
||||
url: res.data.url
|
||||
};
|
||||
uni.showToast({ title: '上传成功', icon: 'none' })
|
||||
}else{
|
||||
item.bmFileInfos.value = []
|
||||
uni.showToast({ title: '上传失败', icon: 'none' })
|
||||
}
|
||||
},
|
||||
|
|
@ -515,10 +556,16 @@ const uploadImg = (item) => {
|
|||
console.error('上传失败', err);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// this.$refs.vForm.clearValidate()
|
||||
}
|
||||
})
|
||||
}
|
||||
const deleteImg = (index) => {
|
||||
bmFileInfos.value.splice(index, 1);
|
||||
// bmFileInfosTemp.value.splice(index, 1);
|
||||
};
|
||||
//删除
|
||||
const delRow = (index) => {
|
||||
console.log(index)
|
||||
|
|
@ -736,4 +783,49 @@ const clearConfig = () => {
|
|||
}
|
||||
}
|
||||
}
|
||||
// 上传区域样式
|
||||
.upload {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
background-color: #f7f8fa;
|
||||
border: 2rpx dashed #d9d9d9;
|
||||
border-radius: 12rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 48rpx;
|
||||
color: #bfbfbf;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:active {
|
||||
background-color: #f0f0f0;
|
||||
border-color: #3784fb;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 12rpx;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
.image-container {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.delete-logo {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
font-size: 20px;
|
||||
color: white;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue