297 lines
10 KiB
Vue
297 lines
10 KiB
Vue
<!--
|
||
@desc 自定义表单组件
|
||
@date 20230720
|
||
--------对于整个表单-----------
|
||
labelFormPosition: 表单域提示文字的位置，left-左侧，top-上方
|
||
borderFormBottom: 是否显示表单域的下划线边框
|
||
labelFormWidth: 提示文字的宽度，单位px
|
||
labelFormAlign：lable字体的对齐方式 默认left 可选 center/right
|
||
-->
|
||
|
||
<template>
|
||
<view>
|
||
<u--form :labelPosition="labelFormPosition" :borderBottom="borderFormBottom" :labelWidth="labelFormWidth"
|
||
class="baseform" :labelAlign="labelFormAlign" :labelStyle="labelStyle" :model="formModel" :rules="formRules"
|
||
ref="baseForm">
|
||
<view style="padding-bottom: 40rpx;">
|
||
<u-row v-for="(item,index) in formRow" :key="index">
|
||
<u-col v-for="(row,rowIndex) in item.uCol" :span="row.span ? row.span : spanNumber" :key="rowIndex">
|
||
<u-form-item v-if="row.tag == 'input'" :label="row.label" :prop="row.prop" ref="item1"
|
||
:borderBottom="row.borderBottom" @click="handlerRowInputClickEvent(row,rowIndex)"
|
||
:labelWidth="row.labelWidth" :labelPosition="row.labelPosition" :rightIcon="row.rightIcon"
|
||
:leftIcon="row.leftIcon" :required="row.required"
|
||
:class="(getRule(row.prop)?'ruleFormClass ':'')">
|
||
<u--input v-if="row.type == 'uInput'" :placeholder="row.placeholder" clearable
|
||
v-model="formModel.formData[row.prop]" :suffixIcon="row.suffixIcon"
|
||
:disabled="row.disabled" :border="row.border"
|
||
:disabledColor="row.disabledColor"></u--input>
|
||
|
||
<u--textarea v-if="row.type == 'uTextarea'" v-model="formModel.formData[row.prop]"
|
||
:height="row.height?row.height: 100" :maxlength="row.maxlength ? row.maxlength: '-1'"
|
||
:placeholder="row.placeholder" :suffixIcon="row.suffixIcon" :disabled="row.disabled"
|
||
:border="row.border" :disabledColor="row.disabledColor"></u--textarea>
|
||
<u-radio-group v-if="row.type == 'uRadio'" v-model="formModel.formData[row.prop]"
|
||
@change="handlerRadioChange($event,row,rowIndex)">
|
||
<u-radio :customStyle="{marginRight: '16px'}" v-for="(item, index) in row.options"
|
||
:key="index" :label="item.label" :name="item.value">
|
||
</u-radio>
|
||
</u-radio-group>
|
||
<u-checkbox-group v-if="row.type == 'uCheckbox'" v-model="formModel.formData[row.prop]"
|
||
shape="square" placement="column" @change="handlerCheckboxChange($event,row,rowIndex)">
|
||
<u-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item, index) in row.options"
|
||
:key="index" :label="item.label" :name="item.value"
|
||
:disabled="item.disabled ? true:false">
|
||
</u-checkbox>
|
||
</u-checkbox-group>
|
||
</u-form-item>
|
||
<!-- 简单下拉框 -->
|
||
<u-form-item v-if="row.tag == 'select'" :label="row.label" :prop="row.prop" ref="item2"
|
||
:class="(getRule(row.prop)?'ruleFormClass ':'')" :borderBottom="row.borderBottom"
|
||
@click="row.show = true" :labelWidth="row.labelWidth" :labelPosition="row.labelPosition"
|
||
:rightIcon="row.rightIcon" :leftIcon="row.leftIcon" :required="row.required">
|
||
<!-- keyName，自定义需要展示的text属性键名 -->
|
||
<u-picker :show="row.show" :columns="[row.options]"
|
||
:closeOnClickOverlay="row.closeOnClickOverlay ? true:false"
|
||
@close="handlerSelectClose(row,rowIndex)" @cancel="handlerSelectClose(row,rowIndex)"
|
||
@confirm="selectConfirm($event,row,rowIndex)" :keyName="row.keyName"></u-picker>
|
||
<u--input :placeholder="row.placeholder" v-model="formModel.formData[row.prop]" clearable
|
||
:suffixIcon="row.suffixIcon ? row.suffixIcon:''" :disabled="row.disabled"
|
||
:border="row.border" :disabledColor="row.disabledColor"></u--input>
|
||
</u-form-item>
|
||
<!-- 此组件用于单个选择日期，范围选择日期等
|
||
mode
|
||
为single只能选择单个日期
|
||
为multiple可以选择多个日期
|
||
为range可以选择日期范围
|
||
-->
|
||
<u-form-item v-if="row.tag == 'calendar'" :label="row.label" :prop="row.prop" ref="item2"
|
||
:class="(getRule(row.prop)?'ruleFormClass ':'')" :borderBottom="row.borderBottom"
|
||
@click="row.show = true" :labelWidth="row.labelWidth" :labelPosition="row.labelPosition"
|
||
:rightIcon="row.rightIcon" :leftIcon="row.leftIcon" :required="row.required">
|
||
<!-- keyName，自定义需要展示的text属性键名 -->
|
||
<u-calendar :show="row.show" :mode="row.mode" :showTitle="row.title" round="10"
|
||
:closeOnClickOverlay="row.closeOnClickOverlay ? true:false"
|
||
@close="handlerCalendarClose(row,rowIndex)"
|
||
@confirm="calendarConfirm($event,row,rowIndex)" :maxDate="row.maxDate"
|
||
:minDate="row.minDate" :monthNum="row.monthNum"></u-calendar>
|
||
<u--input :placeholder="row.placeholder" v-model="formModel.formData[row.prop]"
|
||
suffixIcon="calendar" clearable :disabled="row.disabled" :border="row.border"
|
||
:disabledColor="row.disabledColor"></u--input>
|
||
</u-form-item>
|
||
<!-- 此选择器用于时间日期
|
||
mode 配置选择何种日期格式。datetime年月日时分 date为日期选择，time为时间选择，year-month为年月选择
|
||
参数minDate和maxDate可以设置最大值和最小值（传入时间戳）。
|
||
-->
|
||
<u-form-item v-if="row.tag == 'datetime'" :label="row.label" :prop="row.prop" ref="item2"
|
||
:class="(getRule(row.prop)?'ruleFormClass ':'')" :borderBottom="row.borderBottom"
|
||
@click="row.show = true" :labelWidth="row.labelWidth" :labelPosition="row.labelPosition"
|
||
:rightIcon="row.rightIcon" :leftIcon="row.leftIcon" :required="row.required">
|
||
<!-- keyName，自定义需要展示的text属性键名 -->
|
||
<u-datetime-picker :show="row.show" :mode="row.mode" :value="defaultTime(row)"
|
||
:closeOnClickOverlay="row.closeOnClickOverlay ? true:false" :maxDate="row.maxDate"
|
||
:minDate="row.minDate" @confirm="dateTimeConfirm($event,row,rowIndex)"
|
||
@cancel="handlerDateTimeClose(row,rowIndex)"
|
||
@close="handlerDateTimeClose(row,rowIndex)"></u-datetime-picker>
|
||
<u--input :placeholder="row.placeholder" v-model="formModel.formData[row.prop]" clearable
|
||
suffixIcon="arrow-right" :disabled="row.disabled" :border="row.border"
|
||
:disabledColor="row.disabledColor"></u--input>
|
||
</u-form-item>
|
||
</u-col>
|
||
</u-row>
|
||
</view>
|
||
</u--form>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
props: {
|
||
labelFormPosition: {
|
||
type: String,
|
||
default: "left"
|
||
},
|
||
borderFormBottom: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
labelFormWidth: {
|
||
type: [Number, String],
|
||
default: 100
|
||
},
|
||
labelFormAlign: {
|
||
type: String,
|
||
default: "left"
|
||
},
|
||
labelStyle: {
|
||
type: Object,
|
||
default: () => {
|
||
return {
|
||
padding: '10px 0 10px 10px'
|
||
};
|
||
},
|
||
},
|
||
// 表单验证规则
|
||
formRules: {
|
||
type: Object,
|
||
default: () => {
|
||
return {};
|
||
},
|
||
},
|
||
// 表单页面结构数据
|
||
formRow: {
|
||
type: Array,
|
||
default: () => {
|
||
return [];
|
||
},
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
spanNumber: 12,
|
||
formModel: {
|
||
formData: {
|
||
hour: ''
|
||
}
|
||
},
|
||
}
|
||
},
|
||
mounted() {},
|
||
methods: {
|
||
bbb(a, b) {
|
||
console.log(a, "测试", b)
|
||
},
|
||
defaultTime(row) {
|
||
if (row.mode == 'datetime' || row.mode == 'date' || row.mode == 'year-month') {
|
||
return Number(new Date())
|
||
} else if (row.mode == 'time') {
|
||
return new Date().toLocaleTimeString().slice(0, 5)
|
||
} else {
|
||
return
|
||
}
|
||
},
|
||
handlerRowInputClickEvent(row, index) {
|
||
this.$emit("handlerRowInputClickEvent", row, index)
|
||
},
|
||
// 下拉框确认事件
|
||
selectConfirm(value, row, index) {
|
||
this.$emit("selectConfirm", value, row, index)
|
||
row.show = false
|
||
},
|
||
// 下拉框关闭事件
|
||
handlerSelectClose(row, index) {
|
||
row.show = false
|
||
},
|
||
// 日期关闭事件
|
||
handlerCalendarClose(row, index) {
|
||
row.show = false
|
||
},
|
||
// 日期时间关闭事件
|
||
handlerDateTimeClose(row, index) {
|
||
row.show = false
|
||
},
|
||
// 日期确认事件
|
||
calendarConfirm(value, row, index) {
|
||
this.$emit("calendarConfirm", value, row, index)
|
||
row.show = false
|
||
},
|
||
// 日期时间确认事件
|
||
dateTimeConfirm(e, row, index) {
|
||
const timeFormat = uni.$u.timeFormat
|
||
let time = ''
|
||
if (row.mode == 'datetime') {
|
||
time = timeFormat(e.value, 'yyyy-mm-dd hh:MM')
|
||
} else if (row.mode == 'date') {
|
||
time = timeFormat(e.value, 'yyyy-mm-dd')
|
||
} else if (row.mode == 'year-month') {
|
||
time = timeFormat(e.value, 'yyyy-mm')
|
||
} else if (row.mode == 'time') {
|
||
// time = timeFormat(e.value, 'hh:MM')
|
||
time = e.value
|
||
} else {
|
||
time = ''
|
||
}
|
||
this.$emit("dateTimeConfirm", time, row, index)
|
||
row.show = false
|
||
},
|
||
// 复选框change事件
|
||
handlerCheckboxChange(e, row, rowIndex) {
|
||
this.$emit("handlerCheckboxChange", e, row, rowIndex)
|
||
},
|
||
// 单选框change事件
|
||
handlerRadioChange(e, row, rowIndex) {
|
||
this.$emit("handlerRadioChange", e, row, rowIndex)
|
||
},
|
||
setField(propLabel, value) {
|
||
this.$set(this.formModel.formData, propLabel, value);
|
||
},
|
||
incomingParameters(vale) {
|
||
for (let i in vale) {
|
||
this.setField(i, vale[i]);
|
||
}
|
||
},
|
||
// 表单提交
|
||
submitForm(formName) {
|
||
let formRules = {
|
||
formData: {
|
||
...this.formRules
|
||
}
|
||
}
|
||
// this.formRules = formRules
|
||
console.log(this.$refs[formName].validate(), "formRules")
|
||
this.$refs[formName].validate((valid) => {
|
||
if (valid) {
|
||
console.log(valid)
|
||
// this.$emit('onSubmit', this.formModel.formData)
|
||
} else {
|
||
console.log('error submit!!');
|
||
return false
|
||
}
|
||
})
|
||
},
|
||
// 表单重置
|
||
resetForm(formName) {
|
||
this.choiceAssignment({})
|
||
},
|
||
//弹窗赋值
|
||
choiceAssignment(value) {
|
||
this.formModel.formData = Object.assign({}, value)
|
||
},
|
||
getRule(rowList) {
|
||
let requiredType = false
|
||
if (this.formRules[rowList] && this.formRules[rowList].length > 0) {
|
||
this.formRules[rowList].forEach(el => {
|
||
if (el.required) {
|
||
requiredType = true
|
||
}
|
||
})
|
||
}
|
||
return requiredType
|
||
}
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.baseform {
|
||
padding: 20rpx;
|
||
}
|
||
|
||
.u-form-item {
|
||
padding: 0 30rpx;
|
||
}
|
||
|
||
.u-popup {
|
||
flex: none;
|
||
}
|
||
|
||
::v-deep .u-form-item__body__right__message {
|
||
margin: 0 !important;
|
||
}
|
||
|
||
::v-deep .ruleFormClass {
|
||
.u-line {
|
||
border-bottom: 2rpx solid #E6A23C !important;
|
||
}
|
||
}
|
||
</style> |