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.
699 lines
18 KiB
699 lines
18 KiB
<template> |
|
<view class="maboxbg" @touchmove.stop v-if="isshow" @click="checkbox(0)"> |
|
<scroll-view class="modtips" @click.stop.prevent> |
|
<view class="title"> |
|
{{title||'提示'}} |
|
</view> |
|
<!-- 输入框 --> |
|
<template v-if="tipstate === 1"> |
|
<view class="inputbx"> |
|
<input v-model="inputtext" :placeholder="placeholder" /> |
|
</view> |
|
</template> |
|
|
|
<!-- 单选框 --> |
|
<template v-else-if="tipstate === 2"> |
|
<view class="selviebx" v-if="!isonecheck"> |
|
<view @click="checkall" v-if="checklength!=checklist.length">全选</view> |
|
<view @click="removeall" v-else>全不选</view> |
|
</view> |
|
<view class="listcheck"> |
|
<view @click="checkitem(index)" v-for="(item,index) in list"> |
|
<image :src="checklist.indexOf(index)==-1?'/static/nocheck.png':'/static/check.png'"></image> |
|
<view>{{item}}</view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<!-- 照片列表 --> |
|
<template v-else-if="tipstate === 3"> |
|
<scroll-view scroll-y="true" class="scvboxs"> |
|
<view v-for="(item,index) in imglist" :key="item.dictKey"> |
|
<view style="display: flex; justify-content: space-between; align-items: center;"> |
|
<!-- 必传照片不足时显示提示文字 --> |
|
<text |
|
:class="{'tpstitl': true,'start': ImagesRequiredFields.find(val => val.key === item.dictKey), 'showTitle': ImagesRequiredFields.find(val => val.key === item.dictKey) && item.imgList.length < 1}"> |
|
{{item.dictValue}} |
|
</text> |
|
<!-- 有模版照片时, 显示模版按钮 --> |
|
<template v-if="Object.keys(details.templatePhotos).includes(item.dictValue)"> |
|
<text @click="handleShowImage(details.templatePhotos[item.dictValue])" |
|
class="showImageBtn">预览模版</text> |
|
</template> |
|
</view> |
|
<view class="imgbx"> |
|
<!-- 循环显示图片 --> |
|
<view v-for="(value,i) in item.imgList"> |
|
<image :src="value.urlRoute" @click="handleShowImage(value.urlRoute)"></image> |
|
<image @click="remove(index,i,item.dictKey)" src="/compoment/cus-selects-fan/cha.png"></image> |
|
</view> |
|
<view @click="updateimg(item.dictKey, index)" v-if="item.imgList.length < maximglength"> |
|
<image src="/static/add.png"></image> |
|
</view> |
|
</view> |
|
</view> |
|
</scroll-view> |
|
<view class="inputbx"> |
|
<input v-model="inputtext" :placeholder="placeholder" /> |
|
</view> |
|
</template> |
|
|
|
<!-- 输入框列表 --> |
|
<template v-else-if="tipstate === 4"> |
|
<scroll-view scroll-y="true" class="scvboxs"> |
|
<view class="inpNumList" @click="checkitem(index)" v-for="(item,index) in inpList"> |
|
<view class="inpNum-title"> |
|
物料名称: {{item.title}} |
|
</view> |
|
<view class="inpNum-title"> |
|
物料总数: {{item.maxNum}} |
|
</view> |
|
<view class="inpNum-value"> |
|
<view class=""> |
|
物料数量: |
|
</view> |
|
<!-- 当输入框类型为数字类型时 --> |
|
<input class="inpNum" v-if="(item.type).toLocaleLowerCase() === 'number' && !item.disabled" |
|
:placeholder="item.placeholder" :disabled="item.disabled" type="number" v-model="item.value" |
|
@input="inputNum(item)" /> |
|
<text v-else-if="item.disabled" style="flex: 1;"> {{item.value}}</text> |
|
</view> |
|
</view> |
|
</scroll-view> |
|
</template> |
|
|
|
<!-- 盘点上架 --> |
|
<template v-else-if="tipstate === 5"> |
|
<scroll-view scroll-y="true" class="scvboxs"> |
|
<!-- 定制品 --> |
|
<template v-if="details.goodsType === '定制品'"> |
|
<view class="inputbx"> |
|
<input v-model="details.upform.article.contractNumber" placeholder="请输入合同号" /> |
|
</view> |
|
<view class="inputbx"> |
|
<input v-model="details.upform.article.orderPackageCode" placeholder="请输入或扫描包条码" /> |
|
</view> |
|
</template> |
|
|
|
<!-- 零担 --> |
|
<template v-if="details.goodsType === '零担'"> |
|
<view class="inputbx"> |
|
<input v-model="details.upform.article.contractNumber" placeholder="请输入订单号" /> |
|
</view> |
|
<view class="inputbx"> |
|
<input v-model="details.upform.article.orderPackageCode" placeholder="请输入或扫描包条码" /> |
|
</view> |
|
</template> |
|
|
|
<!-- 库存品 --> |
|
<template v-if="details.goodsType === '库存品'"> |
|
<view class="inputbx"> |
|
<input v-model="details.upform.stock.orderCode" placeholder="请输入合同号" /> |
|
</view> |
|
<view class="inputbx"> |
|
<input v-model="details.upform.stock.incomingBatch" placeholder="请输入批次号" /> |
|
</view> |
|
<view class="inputbx"> |
|
<input v-model="details.upform.stock.materialName" @input="searchStock" |
|
placeholder="请输入物料编码或物料名称" /> |
|
<view class="select_content"> |
|
<template v-if="details.materialName.length !== 0"> |
|
<view @click="checkSec(val)" v-for="val in details.materialName" :key="val"> |
|
{{val.materialName}} |
|
</view> |
|
</template> |
|
</view> |
|
</view> |
|
<view class="inputbx" @touchstart="handleshowMarket"> |
|
<input v-model="details.upform.stock.marketName" placeholder="请选择商城" disabled="true" /> |
|
<template v-if="details.showMarketList"> |
|
<view :class="{'select_content': true, 'show': details.showMarketList}"> |
|
<view v-for="val in details.marketName" :key="val" |
|
@click="details.upform.stock.marketName = val"> |
|
{{val}} |
|
</view> |
|
</view> |
|
</template> |
|
</view> |
|
<view class="inputbx"> |
|
<input v-model="details.upform.stock.stockNum" placeholder="请输入在库数量" /> |
|
</view> |
|
</template> |
|
|
|
</scroll-view> |
|
</template> |
|
|
|
<!-- 复选框列表 --> |
|
<template v-else-if="tipstate === 6"> |
|
<scroll-view scroll-y="true" class="scvboxs"> |
|
<view class="selviebx" v-if="!isonecheck"> |
|
<view @click="checkallItem" v-if="checklength!=checklist.length">全选</view> |
|
<view @click="invertSelection" v-else>反选</view> |
|
</view> |
|
<view class="listcheck"> |
|
<view> |
|
<image src="/static/check1.png"></image> |
|
<view style=" width: 60px;">在库</view> |
|
{{list[0].value}} |
|
</view> |
|
<view v-for="(item,index) in details.checkSectionList"> |
|
<image @click="singlecheckitem(index)" style="flex: none;" |
|
:src="checklist.indexOf(index)==-1?'/static/nock.png':'/static/check1.png'"></image> |
|
<view style="flex: none; width: 60px;">{{item.title}}</view> |
|
<input type="number" style="border: 1px solid #000;" v-model="item.value" |
|
@input="checkInputNum(item)" :disabled="!details.checklist.includes(index)" /> |
|
</view> |
|
</view> |
|
</scroll-view> |
|
</template> |
|
|
|
<view class="buts"> |
|
<view @click="checkbox(1)" v-if="isshowcancel" class="cancel">{{cancelTxt||'取消'}}</view> |
|
<view @click="checkbox(2)" class="confirm">{{confirmTxt||'确认'}}</view> |
|
</view> |
|
</scroll-view> |
|
</view> |
|
|
|
<!-- 预览图片 --> |
|
<view class="previewPicture-container" v-if="showPreviewPicture" @click.stop="handleShowImage()"> |
|
<img :src="details.previewPictureUrl" class="previewPicture" alt=""> |
|
</view> |
|
</template> |
|
|
|
<script lang="ts" setup> |
|
import functions from '@/utils/functions.js' |
|
import { tiplistType } from '@/interfaces/compoment/tiplist' |
|
import { postqueryfindMaterialList } from '@/api/user.js'; |
|
import { reactive, ref, toRefs, watch } from "vue"; |
|
let details = reactive<any>({ |
|
tipstate: 2, |
|
title: '', |
|
placeholder: '', |
|
isshowcancel: true, |
|
confirmTxt: '', |
|
cancelTxt: '', |
|
success: null, |
|
cancel: null, |
|
close: null, |
|
isshow: false, |
|
list: [], |
|
checklist: [], |
|
inputtext: '', |
|
isonecheck: false, |
|
imglist: [], |
|
maximglength: 3, |
|
checklength: 0, |
|
// 是否是图片列表的修改提交 |
|
isChange: false, |
|
changeImageList: [], |
|
ImagesRequiredFields: [], |
|
inpList: [], |
|
showPreviewPicture: false, |
|
// 预览图片地址 |
|
previewPictureUrl: '/static/changku.png', |
|
// 盘点复选框 |
|
checkSectionList: [], |
|
// 上架 |
|
upform: { |
|
article: { |
|
// 合同号 |
|
contractNumber: '', |
|
// 包条码 |
|
orderPackageCode: '' |
|
}, |
|
stock: { |
|
orderCode: '', |
|
incomingBatch: '', |
|
materialName: '', |
|
marketName: '', |
|
stockNum: '' |
|
} |
|
}, |
|
templatePhotos: { |
|
// 上门照 |
|
"上门照": 'https://htys.oss-cn-chengdu.aliyuncs.com/showImages/1.png', |
|
// 堆码照 |
|
"堆码照": 'https://htys.oss-cn-chengdu.aliyuncs.com/showImages/2.png', |
|
// 签收照 |
|
"签收照": 'https://htys.oss-cn-chengdu.aliyuncs.com/showImages/3.png', |
|
}, |
|
// 商品类型 |
|
goodsType: '定制品', |
|
marketName: [], |
|
materialName: [], |
|
showMarketList: false, |
|
showmaterialList: false, |
|
}) |
|
watch(() => { details.checklist }, () => { |
|
details.checklength = details.checklist.length |
|
}) |
|
// watchEffect(()=>{ |
|
// if(details.checklist.length>-1){ |
|
// details.checklength=details.checklist.length |
|
// } |
|
|
|
// }) |
|
function setdetails(objs : any) { |
|
for (let key in objs) { |
|
details[key] = objs[key] |
|
} |
|
} |
|
function checkitem(index : number) { |
|
console.log('123 :>> ', 123); |
|
if (details.isonecheck) { |
|
if (details.checklist.indexOf(index) == -1) { |
|
details.checklist = [index] |
|
} else { |
|
details.checklist.splice(details.checklist.indexOf(index), 1) |
|
} |
|
return |
|
} |
|
console.log('222 :>> ', 222); |
|
if (details.checklist.indexOf(index) == -1) { |
|
details.checklist.push(index) |
|
} else { |
|
details.checklist.splice(details.checklist.indexOf(index), 1) |
|
} |
|
} |
|
function checkbox(type : number) { |
|
switch (type) { |
|
case 0: |
|
if (details.close) { |
|
details.close(details) |
|
} |
|
break; |
|
case 1: |
|
if (details.cancel) { |
|
details.cancel(details) |
|
} |
|
break; |
|
case 2: |
|
if (details.success) { |
|
details.success(details) |
|
} |
|
break; |
|
} |
|
} |
|
function remove(index : number, i : number, type : string) { |
|
// 是否为提交修改, 记录修改的类型 |
|
if (details.isChange && !details.changeImageList.includes(type)) details.changeImageList.push(type) |
|
details.imglist[index].imgList.splice(i, 1) |
|
} |
|
function updateimg(type : string, index : number) { |
|
// 是否为提交修改, 记录修改的类型 |
|
if (details.isChange && !details.changeImageList.includes(type)) details.changeImageList.push(type) |
|
uni.chooseImage({ |
|
count: details.maximglength, |
|
success: async (chooseImageRes) => { |
|
console.log('chooseImageRes >>>>>>>>', chooseImageRes) |
|
const tempFilePaths = chooseImageRes.tempFilePaths as any; |
|
// let url=await functions.upfile(tempFilePaths[0]) |
|
tempFilePaths.map(async (item) => { |
|
console.log(1232131231) |
|
let url = await functions.upfile(item) |
|
console.log('url :>> ', url); |
|
details.imglist[index].imgList.push({ urlRoute: url.link, type: type, name: url.originalName }) |
|
}) |
|
// uni.uploadFile({ |
|
// url: 'https://www.example.com/upload', //仅为示例，非真实的接口地址 |
|
// filePath: tempFilePaths[0], |
|
// name: 'file', |
|
// success: (uploadFileRes) => { |
|
// console.log(uploadFileRes.data); |
|
// } |
|
// }); |
|
} |
|
}); |
|
} |
|
function checkall() { |
|
console.log('111 :>> ', 111); |
|
details.list.map((item, index) => { |
|
details.checklist.push(index) |
|
}) |
|
} |
|
function removeall() { |
|
console.log('111 :>> ', 111); |
|
details.checklist = [] |
|
} |
|
|
|
// 复选框全选 |
|
function checkallItem() { } |
|
|
|
// 反选 |
|
function invertSelection() { } |
|
|
|
// 单选 |
|
function singlecheckitem(index) { |
|
if (details.isonecheck) { |
|
if (details.checklist.indexOf(index) == -1) { |
|
details.checklist = [index] |
|
} else { |
|
details.checklist.splice(details.checklist.indexOf(index), 1) |
|
} |
|
} else { |
|
if (details.checklist.indexOf(index) == -1) { |
|
details.checklist.push(index) |
|
} else { |
|
details.checklist.splice(details.checklist.indexOf(index), 1) |
|
} |
|
} |
|
// 当未选择时, 数据清零 |
|
details.checkSectionList.forEach((val, i) => { |
|
if (!details.checklist.includes(i)) val.value = 0 |
|
}) |
|
} |
|
|
|
|
|
|
|
function handleShowImage(imgUrl = '/static/changku.png') { |
|
details.previewPictureUrl = imgUrl |
|
details.showPreviewPicture = !details.showPreviewPicture |
|
} |
|
|
|
let isInputN = null |
|
function checkInputNum(item) { |
|
// 重置定时器 |
|
if (isInputN) clearTimeout(isInputN) |
|
|
|
isInputN = setTimeout(() => { |
|
// 计算最大值 |
|
const maxNum = details.list[0].value - details.checkSectionList.reduce((curr, val) => curr + parseInt(val.value), 0) + parseInt(item.value) |
|
console.log('maxNum :>> ', maxNum); |
|
item.value = parseInt(item.value) |
|
if (item.value <= 0 || isNaN(item.value)) item.value = 0 |
|
if (item.value >= maxNum) item.value = maxNum |
|
isInputN = null |
|
// 清除定时器 |
|
clearTimeout(isInputN) |
|
}, 500) |
|
} |
|
|
|
let isInput = null |
|
function inputNum(item) { |
|
// 重置定时器 |
|
if (isInput) clearTimeout(isInput) |
|
|
|
isInput = setTimeout(() => { |
|
item.value = parseInt(item.value) |
|
if (item.value <= item.minNum || isNaN(item.value)) item.value = item.minNum |
|
if (item.value >= item.maxNum) item.value = item.maxNum |
|
clearTimeout(isInput) |
|
}, 300) |
|
} |
|
|
|
function handleshowMarket() { |
|
details.showMarketList = !details.showMarketList |
|
console.log('123 :>> ', 123); |
|
console.log('details.showMarketList :>> ', details.showMarketList); |
|
} |
|
|
|
let _atn : any = null |
|
function searchStock() { |
|
if (_atn) clearTimeout(_atn) |
|
_atn = setTimeout(async () => { |
|
const res = await postqueryfindMaterialList({ materialCode: details.upform.stock.materialName }) |
|
console.log('res :>> ', res); |
|
const { code } = res |
|
if (code === 200) details.materialName = res.data |
|
clearTimeout(_atn) |
|
}, 500) |
|
} |
|
|
|
function checkSec(val) { |
|
details.upform.stock.materialName = val.materialName |
|
details.upform.stock.materialCode = val.materialCode |
|
details.materialName = [] |
|
} |
|
defineExpose({ setdetails }) |
|
const { isonecheck, checklength, imglist, inputtext, checklist, list, isshow, tipstate, title, isshowcancel, placeholder, confirmTxt, cancelTxt, showPreviewPicture, ImagesRequiredFields, maximglength, inpList } = toRefs(details) |
|
</script> |
|
|
|
<style lang="scss"> |
|
.tpstitl { |
|
font-size: 26upx; |
|
width: 550upx; |
|
|
|
&.start { |
|
&::before { |
|
content: '*'; |
|
margin-right: 10upx; |
|
color: #f00; |
|
} |
|
} |
|
|
|
&.showTitle { |
|
&::after { |
|
content: '最少传入三张图片'; |
|
margin-left: 20upx; |
|
color: #f00; |
|
} |
|
} |
|
} |
|
|
|
.maboxbg { |
|
width: 100%; |
|
height: 100%; |
|
position: fixed; |
|
left: 0; |
|
top: 0; |
|
background-color: #00000050; |
|
z-index: 9999; |
|
} |
|
|
|
.modtips { |
|
// height: 50vh; |
|
width: 630upx; |
|
// height: 63upx; |
|
background: #FFFFFF; |
|
border-radius: 7upx; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
padding: 40upx 20upx; |
|
position: absolute; |
|
left: 50%; |
|
top: 50%; |
|
transform: translateX(-50%) translateY(-50%); |
|
box-sizing: border-box; |
|
|
|
.selviebx { |
|
display: flex; |
|
align-items: center; |
|
width: 500upx; |
|
justify-content: flex-start; |
|
|
|
>view { |
|
font-size: 26upx; |
|
color: #d3832a; |
|
} |
|
} |
|
|
|
.title { |
|
font-size: 34upx; |
|
color: #092C4D; |
|
} |
|
|
|
.contents { |
|
max-width: 480upx; |
|
font-size: 29upx; |
|
color: #90A0AF; |
|
margin-top: 30upx; |
|
} |
|
|
|
.scvboxs { |
|
width: 100%; |
|
max-height: 500upx; |
|
} |
|
|
|
.imgbx { |
|
width: 550upx; |
|
// display: grid; |
|
// grid-template-columns: 33% 33% 33%; |
|
display: flex; |
|
// justify-content: ; |
|
margin-top: 20upx; |
|
flex-wrap: wrap; |
|
|
|
>view { |
|
width: 130upx; |
|
height: 130upx; |
|
padding: 10upx; |
|
margin-right: 10upx; |
|
box-sizing: border-box; |
|
border: 1upx solid #e6e6e6; |
|
margin-bottom: 15upx; |
|
border-radius: 8upx; |
|
position: relative; |
|
|
|
>image:nth-of-type(1) { |
|
width: 100%; |
|
height: 100%; |
|
} |
|
|
|
>image:nth-of-type(2) { |
|
width: 28upx; |
|
height: 28upx; |
|
position: absolute; |
|
right: 10upx; |
|
top: 10upx; |
|
} |
|
} |
|
} |
|
|
|
.buts { |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
margin-top: 40upx; |
|
|
|
>view { |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
// width: 260upx; |
|
// height: 88upx; |
|
padding: 15upx 50upx; |
|
border-radius: 8upx; |
|
font-size: 32upx; |
|
} |
|
|
|
>.cancel { |
|
background-color: #F5F5F6; |
|
color: #5A6875; |
|
margin-right: 20upx; |
|
} |
|
|
|
>.confirm { |
|
background-color: #D3832A; |
|
color: #FFFFFF; |
|
} |
|
} |
|
|
|
.inputbx { |
|
margin-top: 30upx; |
|
margin-bottom: 10upx; |
|
border: 1upx solid #092C4D20; |
|
padding: 15upx 30upx; |
|
padding-left: 20upx; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
box-sizing: border-box; |
|
border-radius: 10upx; |
|
font-size: 27upx; |
|
color: #092C4D; |
|
position: relative; |
|
|
|
>input { |
|
width: 480upx; |
|
flex: 1; |
|
} |
|
|
|
.select_content { |
|
position: absolute; |
|
// margin: 0 auto; |
|
z-index: 99; |
|
top: 120%; |
|
left: 50%; |
|
transform: translateX(-50%); |
|
background: #fff; |
|
border: 1upx solid #eee; |
|
width: 100%; |
|
overflow: hidden; |
|
|
|
view { |
|
text-align: center; |
|
padding: 20upx 0; |
|
border-bottom: 1upx solid #000; |
|
|
|
&:last-child { |
|
border-bottom: 0; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.listcheck { |
|
display: flex; |
|
max-height: 50vh; |
|
overflow-y: scroll; |
|
flex-direction: column; |
|
margin-top: 30upx; |
|
|
|
>view { |
|
width: 420upx; |
|
display: flex; |
|
align-items: center; |
|
// justify-content: flex-start; |
|
font-size: 28upx; |
|
padding: 20upx 0; |
|
|
|
>image { |
|
width: 30upx; |
|
height: 30upx; |
|
margin-right: 15upx; |
|
} |
|
} |
|
} |
|
} |
|
|
|
// 预览图片 |
|
.previewPicture-container { |
|
z-index: 99999; |
|
width: 100%; |
|
height: 100%; |
|
background: #65768499; |
|
position: fixed; |
|
top: 0; |
|
left: 0; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
|
|
.previewPicture { |
|
width: 100%; |
|
// height: 50%; |
|
} |
|
} |
|
|
|
// 开启预览的按钮 |
|
.showImageBtn { |
|
font-size: 26upx; |
|
width: fit-content; |
|
white-space: nowrap; |
|
border: 1px solid #d3832a; |
|
color: #d3832a; |
|
padding: 10upx; |
|
border-radius: 10upx; |
|
} |
|
|
|
// 数字输入框 |
|
|
|
|
|
.inpNumList { |
|
margin-bottom: 20upx; |
|
border-bottom: 1upx solid #092C4D20; |
|
|
|
&>view { |
|
margin-bottom: 10upx; |
|
} |
|
|
|
&:last-child { |
|
border-bottom: 0px; |
|
} |
|
|
|
.inpNum-value { |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
|
|
.inpNum { |
|
margin-left: 10upx; |
|
flex: 1; |
|
padding: 5upx 10upx; |
|
border: 1upx solid #afafaf; |
|
border-radius: 10upx; |
|
} |
|
} |
|
} |
|
</style> |