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>
|