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.

557 lines
16 KiB

10 months ago
<template>
<view class="form-content">
<view class="form">
<u-form
:model="data"
ref="form"
:rules="form.rules"
:error-type='form.errorType'
:border='form.border'
:label-position='form.labelPosition'
:label-width='form.labelWidth'
:label-style='form.labelStyle'
:label-align='form.labelAlign'
>
<u-form-item
:label="item.label"
:prop="item.field"
:required='item.required'
:border-bottom="item.borderBottom"
:label-position='item.labelPosition'
:label-width='item.labelWidth'
:label-style='item.labelStyle'
:label-align='item.labelAlign'
:right-icon='item.rightIcon'
:left-icon='item.leftIcon'
:left-icon-style='item.leftIconStyle'
:right-icon-style='item.rightIconStyle'
v-for="(item,index) in form.formData"
:key="index"
>
<u-input
:type="item.type ||'text'"
v-model="data[item.field]"
:clearable='item.clearable'
:input-align='item.inputAlign'
:placeholder="item.placeholder ? item.placeholder : `请输入${item.label}`"
:disabled='item.disabled'
:maxlength='item.maxlength'
placeholder-style='font-size:28rpx'
:confirm-type='item.confirmType'
:confirm-style='item.confirmStyle'
:focus='item.focus'
:fixed='item.fixed'
:password-icon='item.passwordIcon'
:border='item.border'
:border-color='item.borderColor'
:auto-height='item.autoHeight'
:height='item.height'
:cursor-spacing='item.cursorSpacing'
:selection-start='item.selectionStart'
:selection-end='item.selectionEnd'
:trim='item.trim'
:show-confirmbar='item.showConfirmbar'
:adjust-position='item.adjustPosition'
@blur="blur($event,item.field)"
10 months ago
v-if="item.type == 'text'||item.type == 'number'||item.type == 'idcard'||item.type == 'digit'||item.type == 'tel'||item.type == 'safePassword'||item.type == 'nickname'"
/>
<view class="range" v-if="item.type == 'range'">
<u-input
type="number"
v-model="data[item.field]"
:clearable='item.clearable'
:input-align='item.inputAlign'
:placeholder="item.placeholder ? item.placeholder : `请输入${item.label}`"
:disabled='item.disabled'
:maxlength='item.maxlength'
placeholder-style='font-size:28rpx'
:confirm-type='item.confirmType'
:confirm-style='item.confirmStyle'
:focus='item.focus'
:fixed='item.fixed'
:password-icon='item.passwordIcon'
:border='item.border'
:border-color='item.borderColor'
:auto-height='item.autoHeight'
:height='item.height'
:cursor-spacing='item.cursorSpacing'
:selection-start='item.selectionStart'
:selection-end='item.selectionEnd'
:trim='item.trim'
:show-confirmbar='item.showConfirmbar'
:adjust-position='item.adjustPosition'
style="flex: 1;"
/>
<span style="padding: 0px 20rpx;">-</span>
<u-input
:type="item.type"
v-model="data[item.field]"
:clearable='item.clearable'
:input-align='item.inputAlign'
:placeholder="item.placeholder ? item.placeholder : `请输入${item.label}`"
:disabled='item.disabled'
:maxlength='item.maxlength'
placeholder-style='font-size:28rpx'
:confirm-type='item.confirmType'
:confirm-style='item.confirmStyle'
:focus='item.focus'
:fixed='item.fixed'
:password-icon='item.passwordIcon'
:border='item.border'
:border-color='item.borderColor'
:auto-height='item.autoHeight'
:height='item.height'
:cursor-spacing='item.cursorSpacing'
:selection-start='item.selectionStart'
:selection-end='item.selectionEnd'
:trim='item.trim'
:show-confirmbar='item.showConfirmbar'
:adjust-position='item.adjustPosition'
style="flex: 1;"
/>
</view>
<u-radio-group
v-model="data[item.field]"
:disabled='item.disabled'
:label-disabled='item.labelDisabled'
:shape='item.shape'
:icon-size='item.iconSize'
:active-color='item.activeColor'
:size='item.size'
:width='item.width'
:wrap='item.wrap'
@change="radioGroupChange($event,item.field)"
v-else-if="item.type == 'radio'"
>
<u-radio
:name="cur.value"
:icon-size='cur.iconSize'
:label-size='cur.labelSize'
:shape='cur.shape'
:disabled='cur.disabled'
:label-disabled='cur.labelDisabled'
:active-color='cur.activeColor'
v-for="(cur, key) in item.list" :key="key"
@change="radioChange($event,item.field)"
>
{{cur.label}}
</u-radio>
</u-radio-group>
<u-checkbox-group
:max='item.max'
:disabled='item.disabled'
:label-disabled='item.labelDisabled'
:shape='item.shape'
:icon-size='item.iconSize'
:active-color='item.activeColor'
:size='item.size'
:width='item.width'
:wrap='item.wrap'
@change="checkboxGroupChange($event,item.field)"
v-else-if="item.type == 'checkbox'"
>
<u-checkbox
v-model="cur.checked"
:size='cur.size'
:label-size='cur.labelSize'
:icon-size='cur.iconSize'
:name="cur.value"
:shape='cur.shape'
:disabled='cur.disabled'
:active-color='cur.activeColor'
v-for="(cur, key) in item.list" :key="key"
@change="checkboxChange($event,item.field)"
>
{{cur.label}}
</u-checkbox>
</u-checkbox-group>
<u-input
:type="item.type"
v-model="data[item.field]"
:clearable='item.clearable'
:input-align='item.inputAlign'
:placeholder="item.placeholder ? item.placeholder : `请输入${item.label}`"
:disabled='item.disabled'
:maxlength='item.maxlength'
placeholder-style='font-size:28rpx'
:confirm-type='item.confirmType'
:confirm-style='item.confirmStyle'
:focus='item.focus'
:fixed='item.fixed'
:password-icon='item.passwordIcon'
:border='item.border'
:border-color='item.borderColor'
:auto-height='item.autoHeight'
:height='item.height'
:cursor-spacing='item.cursorSpacing'
:selection-start='item.selectionStart'
:selection-end='item.selectionEnd'
:trim='item.trim'
:show-confirmbar='item.showConfirmbar'
:adjust-position='item.adjustPosition'
v-else-if="item.type == 'textarea'"
/>
<u-switch
v-model="data[item.field]"
:loading='item.loading'
:disabled='item.disabled'
:size='item.size'
:active-color='item.activeColor'
:inactive-color='item.inactiveColor'
:vibrate-short='item.vibrateShort'
:active-value='item.activeValue'
:inactive-value='item.inactiveValue'
@change ='switchChange($event,item.field)'
v-else-if="item.type == 'switch'"
/>
<u-slider
v-model="data[item.field]"
:min='item.min'
:max='item.max'
:step='item.step'
:block-width='item.blockWidth'
:height='item.height'
:inactive-color='item.inactiveColor'
:active-color='item.activeColor'
:block-color='item.blockColor'
:block-style='item.blockStyle'
:disabled='item.disabled'
:use-slot='item.useSlot'
v-else-if="item.type == 'slider'"
/>
<view class="select" v-else-if="item.type == 'singleColumn'" @click="openSingleColumn(item.field,data[item.field],item.list)">
<view class="input" v-if='data[item.field]'>
{{selectFormat(data[item.field],item.list)}}
</view>
<view class="placeholder" v-else>
{{item.placeholder ? item.placeholder : `请选择${item.label}`}}
</view>
<u-icon name="arrow-right" color="#aaaaaa" size="28"></u-icon>
</view>
<view class="select" v-else-if="item.type == 'datetime'" @click="openDatetime(item.field,data[item.field],item.params,item.formatValue)">
<view class="input" v-if='data[item.field]'>
{{data[item.field]}}
</view>
<view class="placeholder" v-else>
{{item.placeholder ? item.placeholder : `请选择${item.label}`}}
</view>
<u-icon name="arrow-right" color="#aaaaaa" size="28"></u-icon>
</view>
<view class="select" v-else-if="item.type == 'region'" @click="openRegion(item.field,data[item.field],item.params,item.formatValue)">
<view class="input" v-if='data[item.field]'>
{{regionText}}
</view>
<view class="placeholder" v-else>
{{item.placeholder ? item.placeholder : `请选择${item.label}`}}
</view>
<u-icon name="arrow-right" color="#aaaaaa" size="28"></u-icon>
</view>
<template v-slot:right v-if="item.isRightButton || item.isRightText ">
<view class="right-button" v-if="item.isRightButton" @click="chickRightButton(item.field)">
10 months ago
{{item.isRightButton}}
</view>
<view class="right-text" v-if="item.isRightText">
{{item.isRightText}}
</view>
</template>
</u-form-item>
</u-form>
<view>
</view>
</view>
<u-select v-model="singleColumnShow" mode="single-column" :default-value='singleColumnDefaultValue' :list="singleColumnList" @confirm="chooseSingleColumn"></u-select>
<u-select v-model="mutilColumnShow" mode="mutil-column" :default-value='mutilColumnDefaultValue' :list="mutilColumnList" @confirm="chooseMutilColumn"></u-select>
<u-picker mode="time" v-model="datetimeShow" :default-time='datetimeDefaultValue' :params="params" @confirm='chooseDatetime'></u-picker>
<u-picker mode="region" v-model="regionShow" :area-code='regionDefaultValue' @confirm='chooseRegion'></u-picker>
<view style="height: constant(safe-area-inset-bottom); height: env(safe-area-inset-bottom);"></view>
</view>
</template>
<script>
// import sparePartsCard from '@/components/sparePartsCard/index.vue'
10 months ago
export default {
// components:{
// sparePartsCard
// },
10 months ago
props: { form: { type: Object, default: {}, require: true }, data: { type: Object, default: {}, require: true }, },
data() {
return {
// 单列模式参数
singleColumnList:[],
singleColumnShow:false,
singleColumnDefaultValue:[],
// 多列模式参数
mutilColumnList:[],
mutilColumnShow:false,
mutilColumnDefaultValue:[],
field:'',
// 时间参数
datetimeShow:false,
params:{
year: true,
month: true,
day: true,
hour: true,
minute: true,
second: true
},
datetimeDefaultValue:'',
// 地区
regionShow:false,
regionDefaultValue:[],
regionText:''
}
},
methods: {
// 单列模式
openSingleColumn(field,val,list){
this.singleColumnList = list
this.field = field
// this.data[this.field] = val ? val :''
// if(val){
// this.singleColumnDefaultValue = [list.findIndex(item=>item.value==val)]
// }else{
// this.singleColumnDefaultValue = []
// }
this.singleColumnShow = true
},
// 单列模式点击确定之后
chooseSingleColumn(e){
console.log(e)
this.$forceUpdate()
this.data[this.field] = e[0].value
console.log(this.data)
this.singleColumnShow = false
this.$emit('singleColumn',this.field,this.data[this.field])
},
// 多列模式
openMutilColumn(field,val,list){
this.mutilColumnList = list
this.field = field
this.data[this.field] = val ? val :''
this.mutilColumnDefaultValue = [list.findIndex(item=>item.value==val)]
this.mutilColumnShow = true
},
// 多列模式点击确定之后
chooseMutilColumn(e){
this.data[this.field] = e[0].value
this.mutilColumnShow = false
this.$forceUpdate()
},
// 日期模式
openDatetime(field,val,params,formatValue){
this.params = params
this.formatValue =formatValue
this.field = field
this.data[this.field] = val ? val :''
this.datetimeDefaultValue = val ? val :''
this.datetimeShow = true
},
// 日期模式点击确定之后
chooseDatetime(e){
let array1 = []
let array2 = []
if(this.formatValue.indexOf('YYYY')>-1){
array1.push(e.year)
}
if(this.formatValue.indexOf('MM')>-1){
array1.push(e.month)
}
if(this.formatValue.indexOf('DD')>-1){
array1.push(e.day)
}
if(this.formatValue.indexOf('hh')>-1){
array2.push(e.hour)
}
if(this.formatValue.indexOf('mm')>-1){
9 months ago
array2.push(e.minute)
10 months ago
}
if(this.formatValue.indexOf('ss')>-1){
array2.push(e.second)
}
let str = array1.join('-') + ' ' + array2.join(':')
this.data[this.field] = str
this.$emit('datetime',this.field,this.data[this.field])
},
// 地区
openRegion(field,val){
console.log(val)
this.field = field
this.data[this.field] = val ? val :[]
if(val){
this.regionDefaultValue = this.data[this.field]
}else{
this.regionDefaultValue = []
}
this.regionShow = true
},
chooseRegion(e){
console.log(e)
this.data[this.field] = [e.province.code,e.city.code,e.area.code]
this.regionText = `${e.province.name}-${e.city.name}-${e.area.name}`
this.$emit('region',this.field,this.data[this.field])
},
selectFormat(val,array){
let str = array.filter(item=>item.value == val)[0].label
return str
},
//单选
radioGroupChange(e,field){
this.$emit('radioGroupChange',e,field)
},
//单选
radioChange(e,field){
this.$emit('radioChange',e,field)
},
// 选中某个复选框时,由checkbox时触发
checkboxChange(e,field) {
this.$emit('checkboxChange',e,field)
},
// 选中任一checkbox时,由checkbox-group触发
checkboxGroupChange(e,field) {
this.$emit('checkboxGroupChange',e,field)
},
switchChange(e,field) {
this.$emit('switchChange',e,field)
},
chickRightButton(field) {
this.$emit('chickRightButton',field)
},
blur(e,field) {
this.$emit('blur',e,field)
},
10 months ago
},
mounted() {
this.$refs.form.setRules(this.form.rules)
this.form.formData.forEach((item,index)=>{
if(!this.data[item.field]){
this.data[item.field] = item.value ? item.value : ''
}
})
}
}
</script>
<style lang="scss" scoped>
.form {
}
::v-deep .uni-searchbar__box {
border: 1px solid #E4E4E4;
justify-content: start;
}
::v-deep .uni-forms-item {
padding: 10px 0px;
// border-bottom: 1px solid #E4E4E4;
margin: 0px;
}
::v-deep .uni-data-checklist{
margin-top: 10rpx!important;
}
::v-deep .uni-forms-item__content{
display: flex;
align-items: center;
}
.input {
height: 72rpx;
line-height: 72rpx;
}
.footer {
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
}
.btns {
display: flex;
button {
flex: 1;
}
.sure {
background: #409eff;
color: white;
border-radius: 0px;
&::after {
border: 1px solid #409eff;
border-radius: 0px;
}
}
.reset {
background: #F5F5F5;
border-radius: 0px;
&::after {
border-radius: 0px;
}
}
}
.select{
display: flex;
align-items: center;
height: 72rpx;
width: 100%;
.input{
flex: 1;
font-size: 28rpx;
color: #000000;
}
.placeholder{
flex: 1;
font-size: 28rpx;
color: #828282;
}
}
.select-popup{
background: white;
border-radius: 30rpx 30rpx 0px 0px;
max-height: 80vh;
overflow-y: auto;
.popup-item{
padding: 32rpx 30rpx;
border-bottom: 1px solid #eeeeee;
text-align: center;
font-size: 30rpx;
}
.line{
background: #F5F5F5;
height: 20rpx;
}
.cancle{
padding: 32rpx 30rpx;
text-align: center;
font-size: 30rpx;
color: red;
}
}
.active{
color: #409eff;
}
.right-button{
background: #409eff;
color: white;
padding:0rpx 30rpx;
border-radius: 16rpx;
text-align: center;
font-size: 28rpx;
}
.range{
display: flex;
align-items: center;
}
</style>