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.
550 lines
16 KiB
550 lines
16 KiB
<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'
|
|
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">
|
|
{{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'
|
|
export default {
|
|
components:{
|
|
sparePartsCard
|
|
},
|
|
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){
|
|
array2.push(e.month)
|
|
}
|
|
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)
|
|
},
|
|
},
|
|
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>
|