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.
480 lines
12 KiB
480 lines
12 KiB
<template> |
|
<view class="maboxbg" v-if="isshow" @click="checkbox(0)"> |
|
<view class="modtips" @click.stop.prevent v-if="tipstate==1"> |
|
<view class="title"> |
|
{{title||'提示'}} |
|
</view> |
|
<!-- <view class="contents"> |
|
{{content||'提示内容模板'}} |
|
</view> --> |
|
<view class="inputbx"> |
|
<input v-model="inputtext" :placeholder="placeholder" /> |
|
</view> |
|
<view class="buts"> |
|
<view @click="checkbox(1)" v-if="isshowcancel" class="cancel">{{cancelTxt||'取消'}}</view> |
|
<view @click="checkbox(2)" class="confirm">{{confirmTxt||'确认'}}</view> |
|
</view> |
|
</view> |
|
<view class="modtips" @click.stop.prevent v-if="tipstate==2"> |
|
<view class="title"> |
|
{{title||'提示'}} |
|
</view> |
|
<!-- <view class="contents"> |
|
{{content||'提示内容模板'}} |
|
</view> --> |
|
<!-- <view> |
|
<input placeholder="请输入搜索内容"/> |
|
</view> --> |
|
<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> |
|
<view class="buts"> |
|
<view @click="checkbox(1)" v-if="isshowcancel" class="cancel">{{cancelTxt||'取消'}}</view> |
|
<view @click="checkbox(2)" class="confirm">{{confirmTxt||'确认'}}</view> |
|
</view> |
|
</view> |
|
<!-- 照片列表 --> |
|
<view class="modtips" @click.stop.prevent v-if="tipstate==3"> |
|
<view class="title"> |
|
{{title||'提示'}} |
|
</view> |
|
<!-- <view class="contents"> |
|
{{content||'提示内容模板'}} |
|
</view> --> |
|
<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 < 3}"> |
|
{{item.dictValue}} |
|
</text> |
|
<text @click="handleShowImage" class="showImageBtn">预览模版</text> |
|
</view> |
|
<view class="imgbx"> |
|
<view v-for="(value,i) in item.imgList"> |
|
<image :src="value.urlRoute"></image> |
|
<image @click="remove(index,i)" src="/compoment/cus-selects-fan/cha.png"></image> |
|
</view> |
|
<view @click="updateimg(item.dictKey, index)" v-if="imglist.length!=maximglength"> |
|
<image src="/static/add.png"></image> |
|
</view> |
|
</view> |
|
</view> |
|
</scroll-view> |
|
<view class="inputbx"> |
|
<input v-model="inputtext" :placeholder="placeholder" /> |
|
</view> |
|
<view class="buts"> |
|
<view @click="checkbox(1)" v-if="isshowcancel" class="cancel">{{cancelTxt||'取消'}}</view> |
|
<view @click.stop="checkbox(2)" class="confirm">{{confirmTxt||'确认'}}</view> |
|
</view> |
|
</view> |
|
|
|
<!-- 输入框列表 --> |
|
<view class="modtips" @click.stop.prevent v-if="tipstate==4"> |
|
<view class="title"> |
|
{{title||'提示'}} |
|
</view> |
|
<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> |
|
|
|
<up-input v-else :placeholder="item.placeholder" border="surround" :disabled="item.disabled" |
|
:type="item.type" v-model="item.value" clearable></up-input> |
|
</view> |
|
</view> |
|
</scroll-view> |
|
<view class="buts"> |
|
<view @click="checkbox(1)" v-if="isshowcancel" class="cancel">{{cancelTxt||'取消'}}</view> |
|
<view @click="checkbox(2)" class="confirm">{{confirmTxt||'确认'}}</view> |
|
</view> |
|
</view> |
|
</view> |
|
|
|
<!-- 预览图片 --> |
|
<view class="previewPicture-container" v-if="showPreviewPicture" @click.stop="handleShowImage"> |
|
<img src="/static/changku.png" class="previewPicture" alt=""> |
|
</view> |
|
</template> |
|
|
|
<script lang="ts" setup> |
|
import functions from '@/utils/functions.js' |
|
import { tiplistType } from '@/interfaces/compoment/tiplist' |
|
import { reactive, ref, toRefs, watch } from "vue"; |
|
let details = reactive<tiplistType>({ |
|
tipstate: 2, |
|
title: '', |
|
placeholder: '', |
|
isshowcancel: true, |
|
confirmTxt: '', |
|
cancelTxt: '', |
|
success: null, |
|
cancel: null, |
|
close: null, |
|
isshow: false, |
|
list: ['12341131212'], |
|
checklist: [], |
|
inputtext: '', |
|
isonecheck: false, |
|
imglist: [], |
|
maximglength: 3, |
|
checklength: 0, |
|
// 是否是图片列表的修改提交 |
|
isChange: false, |
|
changeImageList: [], |
|
ImagesRequiredFields: [], |
|
inpList: [], |
|
showPreviewPicture: 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) { |
|
if (details.isonecheck) { |
|
if (details.checklist.indexOf(index) == -1) { |
|
details.checklist = [index] |
|
} else { |
|
details.checklist.splice(details.checklist.indexOf(index), 1) |
|
} |
|
return |
|
} |
|
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, i) { |
|
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() { |
|
details.list.map((item, index) => { |
|
details.checklist.push(index) |
|
}) |
|
} |
|
function removeall() { |
|
details.checklist = [] |
|
|
|
} |
|
|
|
function handleShowImage() { |
|
details.showPreviewPicture = !details.showPreviewPicture |
|
} |
|
function inputNum(item) { |
|
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 |
|
} |
|
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 { |
|
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%; |
|
height: 500upx; |
|
} |
|
|
|
.imgbx { |
|
width: 550upx; |
|
display: grid; |
|
grid-template-columns: 33% 33% 33%; |
|
margin-top: 20upx; |
|
|
|
>view { |
|
width: 130upx; |
|
height: 130upx; |
|
padding: 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; |
|
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; |
|
|
|
>input { |
|
width: 480upx; |
|
flex: 1; |
|
} |
|
} |
|
|
|
.listcheck { |
|
display: flex; |
|
flex-direction: column; |
|
margin-top: 30upx; |
|
|
|
>view { |
|
width: 420upx; |
|
display: flex; |
|
align-items: center; |
|
justify-content: flex-start; |
|
font-size: 28upx; |
|
padding: 10upx 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; |
|
|
|
.img { |
|
min-width: 50%; |
|
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; |
|
} |
|
|
|
.inpNum-value { |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
|
|
.inpNum { |
|
margin-left: 20upx; |
|
flex: 1; |
|
padding: 0 10upx; |
|
border: 1upx solid #000; |
|
} |
|
} |
|
} |
|
</style> |