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.
320 lines
7.8 KiB
320 lines
7.8 KiB
<style lang="scss" scoped>
|
|
.d-form{
|
|
&>.u-form-item{
|
|
position:relative;
|
|
&.tip{
|
|
margin-bottom:17rpx;
|
|
}
|
|
.textinput{
|
|
width:100%;
|
|
display:flex;
|
|
align-items: center;
|
|
.u-input{
|
|
flex-grow: 1;
|
|
}
|
|
button{
|
|
margin-top:14rpx;
|
|
flex-shrink: 0;
|
|
margin-left:30rpx;
|
|
}
|
|
}
|
|
.u-input,textarea{
|
|
background:#F7F7F7;
|
|
margin-top:14rpx;
|
|
border-radius: 24rpx;
|
|
width:100%;
|
|
}
|
|
textarea{
|
|
height:auto;
|
|
min-height:160rpx;
|
|
padding:20rpx;
|
|
}
|
|
.plant-youbian{
|
|
padding:18rpx 18rpx;
|
|
border-radius: 24rpx;
|
|
width:100%;
|
|
display:flex;
|
|
align-items: center;
|
|
flex-direction: row-reverse;
|
|
justify-content: space-between;
|
|
background:#F7F7F7;
|
|
margin-top:14rpx;
|
|
color:rgb(48,49,51);
|
|
&.noData{
|
|
color:rgb(192, 196, 204);
|
|
}
|
|
&:before{
|
|
transform: rotate(90deg);
|
|
color:rgb(48,49,51);
|
|
}
|
|
}
|
|
.u-upload{
|
|
background:#F7F7F7;
|
|
border-radius: 8rpx;
|
|
padding:20rpx;
|
|
min-height:260rpx;
|
|
margin-top:14rpx;
|
|
align-content: flex-start;
|
|
&/deep/ .u-upload__wrap__preview{
|
|
border-radius: 10rpx;
|
|
&>.u-upload__wrap__preview__image{
|
|
height:170rpx!important;
|
|
width:170rpx!important;
|
|
}
|
|
&>.u-upload__deletable{
|
|
width:30rpx;
|
|
height:30rpx;
|
|
}
|
|
}
|
|
.album{
|
|
background:#fff;
|
|
border-radius: 20rpx;
|
|
width:170rpx;
|
|
height:170rpx;
|
|
text{
|
|
color:#ccc;
|
|
font-size:22rpx;
|
|
display:flex;
|
|
justify-content: center;
|
|
height:100%;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
&:before{
|
|
color:#777;
|
|
font-size:40rpx;
|
|
margin-bottom:6rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.dateRange{
|
|
display:flex;
|
|
width:100%;
|
|
margin-top:14rpx;
|
|
align-items: center;
|
|
text{
|
|
width:50%;
|
|
background:#F7F7F7;
|
|
border-radius: 24rpx;
|
|
height:80rpx;
|
|
line-height: 80rpx;
|
|
padding:0 20rpx;
|
|
&.noData{
|
|
color:rgb(192, 196, 204);
|
|
}
|
|
}
|
|
}
|
|
.checkBox{
|
|
margin-top:14rpx;
|
|
}
|
|
.calendar{
|
|
display:flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width:100%;
|
|
height:80rpx;
|
|
margin-top:14rpx;
|
|
background: #f7f7f7;
|
|
border-radius: 24rpx;
|
|
padding:0 20rpx;
|
|
color:#333;
|
|
&.noData{
|
|
color:#BFBFBF;
|
|
}
|
|
text{
|
|
color:#BFBFBF;
|
|
}
|
|
}
|
|
.tip{
|
|
position:absolute;
|
|
bottom:-20rpx;
|
|
font-size:20rpx;
|
|
color:#FBA83C;
|
|
}
|
|
&/deep/ .u-form-item__body__right__message{
|
|
margin-left:0!important;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
<template>
|
|
<view class="d-form">
|
|
<u-form-item :class="{tip:!!tip}" :label="label" :prop="field" :required="required">
|
|
<view v-if="/^text$|^number$|^digit$/.test(type)" class="textinput">
|
|
<u-input :placeholder="placeholder||`请输入${label}`" :type="type" :value="value" @input="$emit('input',e)">
|
|
<text v-if="suffix" slot="suffix">{{suffix}}</text>
|
|
</u-input>
|
|
<button v-if="btnText" @click="btnFun" class="cu-btn bg-green shadow">{{btnText}}</button>
|
|
</view>
|
|
<view v-if="type=='select'" class="plant-youbian" :class="{noData:!/^\d+$/.test(value)}" @click="show=true">{{/^\d+$/.test(value)&&columns[0][value][keyName]||placeholder||`请选择${label}`}}</view>
|
|
<u-upload v-if="type=='upImg'" :fileList="imgs" previewFullImage multiple :maxCount="num" @delete="delImg" @afterRead="afterRead">
|
|
<view class="album">
|
|
<text class="plant-paizhao">添加照片</text>
|
|
</view>
|
|
</u-upload>
|
|
<textarea v-if="type=='textarea'" auto-height :value="value" :placeholder="placeholder||`请输入${label}`" @input="$emit('input',e)"/>
|
|
<view v-if="type=='dateRange'" class="dateRange">
|
|
<text style="margin-right:20rpx;" :class="{noData:!value[0]}" @click="dateType='start';show=true">{{value[0]||startPlaceholder||'开始时间'}}</text>
|
|
-
|
|
<text style="margin-left:20rpx;" :class="{noData:!value[1]}" @click="dateType='end';show=true">{{value[1]||endPlaceholder||'结束时间'}}</text>
|
|
</view>
|
|
<view v-if="type=='checkBox'" class="checkBox">
|
|
<u-checkbox-group :value="[]" @change="$emit('select',e)" >
|
|
<u-checkbox :customStyle="{marginRight: '30rpx'}" v-for="(v, k) in columns" :key="k" activeColor="#D9F6E9" iconColor="#10C176" :label="v.label" :name="v.value" />
|
|
</u-checkbox-group>
|
|
</view>
|
|
<view v-if="type=='calendar'" class="calendar" @click="$refs.calendar.open()" :class="{noData:!value}">{{value||placeholder||`请选择${label}`}} <text class="plant-rili"/></view>
|
|
|
|
<view class="tip" v-if="tip">{{tip}}</view>
|
|
</u-form-item>
|
|
<u-picker
|
|
v-if="type=='select'"
|
|
:columns="columns"
|
|
:show="show"
|
|
:keyName="keyName"
|
|
:defaultIndex="[value||0]"
|
|
closeOnClickOverlay
|
|
@close="show=false"
|
|
@cancel="show=false"
|
|
@confirm="$emit('select',$event.indexs[0]);show=false"/>
|
|
<u-datetime-picker
|
|
v-if="type=='dateRange'"
|
|
:show="show"
|
|
mode="date"
|
|
:value="date"
|
|
:maxDate="maxDate"
|
|
:minDate="minDate"
|
|
closeOnClickOverlay
|
|
@close="show=false"
|
|
@cancel="show=false"
|
|
@confirm="$emit('selectRDate',{value:new Date($event.value).format('yyyy-MM-dd'),type:dateType});show=false"/>
|
|
<uni-calendar
|
|
ref="calendar"
|
|
v-if="type=='calendar'"
|
|
:insert="false"
|
|
lunar
|
|
@confirm="$emit('input',$event.fulldate)"/>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import request,{host} from '@/common/request'
|
|
export default{
|
|
props:{
|
|
label:{
|
|
type:String,
|
|
default:"",
|
|
},
|
|
suffix:{
|
|
type:String,
|
|
default:"",
|
|
},
|
|
field:{
|
|
type:String,
|
|
default:"",
|
|
},
|
|
tip:{
|
|
type:String,
|
|
default:'',
|
|
},
|
|
required:{
|
|
type:Boolean,
|
|
default:false,
|
|
},
|
|
placeholder:{
|
|
type:String,
|
|
default:"",
|
|
},
|
|
keyName:{
|
|
type:String,
|
|
default:"label",
|
|
},
|
|
type:{
|
|
type:String,
|
|
default:"text"
|
|
},
|
|
num:{
|
|
type:Number,
|
|
default:1,
|
|
},
|
|
columns:{
|
|
type:Array,
|
|
default:()=>[]
|
|
},
|
|
value:{
|
|
type:[String,Number,Array],
|
|
default:"",
|
|
},
|
|
btnText:{
|
|
type:String,
|
|
default:"",
|
|
},
|
|
btnFun:{
|
|
type:Function,
|
|
default:()=>{}
|
|
},
|
|
startPlaceholder:"",
|
|
endPlaceholder:"",
|
|
},
|
|
data(){
|
|
return{
|
|
downValue:[],
|
|
show:false,
|
|
dateType:"start",
|
|
imgList:[],
|
|
}
|
|
},
|
|
computed:{
|
|
date(){
|
|
if(this.dateType=='start')return this.value[0]||new Date().format('yyyy-MM-dd');
|
|
else return this.value[1]||new Date().format('yyyy-MM-dd');
|
|
},
|
|
maxDate(){
|
|
if(this.type=='dateRange' && this.dateType=='start' && this.value[1])return new Date(this.value[1]).getTime();
|
|
},
|
|
minDate(){
|
|
if(this.type=='dateRange' && this.dateType=='end' && this.value[0])return new Date(this.value[0]).getTime();
|
|
},
|
|
imgs(){
|
|
if(this.type=='upImg')return this.value.map((v,index)=>({url:`${host(null,"/sys/common/static")}/${v}`,status:"success",index,type:'saved'})).concat(this.imgList.map((v,index)=>Object.assign(v,{index,type:'unsaved'})))
|
|
return []
|
|
}
|
|
},
|
|
methods:{
|
|
async afterRead(e){
|
|
this.imgList=this.imgList.concat(e.file.map(v=>Object.assign(v,{
|
|
status: 'uploading',
|
|
message:"上传中",
|
|
})))
|
|
for(var i=0; i<e.file.length;i++){
|
|
var res=await request('/sys/common/upload',{
|
|
file:e.file[i]
|
|
})
|
|
if(res.statu ||true){
|
|
this.imgList.some((v,k)=>{
|
|
if(v==e.file[i]){
|
|
v.status='success'
|
|
v.message=''
|
|
v.tempUrl=res.data.data
|
|
this.$set(this.imgList,k,this.imgList[k])
|
|
return true
|
|
}
|
|
return false
|
|
})
|
|
}else{
|
|
this.imgList=this.imgList.filter(v=>!v==e.file[i])
|
|
}
|
|
}
|
|
this.$emit('imgs',this.imgs.map(v=>({saved:v.url,unsaved:v.tempUrl})[v.type]))
|
|
},
|
|
delImg({file}){
|
|
if(file.type=='unsaved'){
|
|
this.imgList.splice(file.index,1)
|
|
}else{
|
|
this.$emit("input",this.value.filter(v=>v.index!=file.index).map(v=>v.url))
|
|
}
|
|
this.$emit('imgs',this.imgs.map(v=>({saved:v.url,unsaved:v.tempUrl})[v.type]))
|
|
},
|
|
},
|
|
}
|
|
</script>
|