龙马ui lm-ui-element表单组件

上一个组件：日历组件

lm-form 表单组件包含 lm-input、lm-select、lm-date-time 、lm-cascader 组件
表单组件必须包含在 element-ui 的 el-form 组件和 el-row 组件中，请确保引入了element-ui 的 ElFrom、ElFormItem、ElRow 组件
表单组件支持表单状态（可编辑修改）和查看状态，不可见状态的切换，只需根据条件设置is-edit属性和disabled属性即可。

所有表单组件Attributes

参数	说明	类型	可选值	默认值
span	位置占位	Number	同 el-col 的span属性	12
label	标题	String	--	''
prop	验证属性值	String	--	''
width	宽度	Number / String	--	--
height	高度	Number / String	--	--
size	尺寸	String	medium / small / mini	--
labelWidth	表单项文字宽度	String	--	--
isEdit	是否是编辑状态	Boolean	--	true
spanStyle	查看状态下样式	Object	--	{}
lmRef	标志以及按回车下一次跳转标志	Array	--	[]
disabled	是否禁用	Boolean	--	--
required	是否必须	Boolean	--	--
marginBottom	表单项下边距	String	--	--

lm-input 输入框

Attributes

参数	说明	类型	可选值	默认值
value	值	String / Number	--	--
appendText	尾部文字	String	--	--
appendIcon	尾部图标	String	--	--
placeholder	placeholder	String	--	请输入
type	类型	String	text，textarea 和其他 原生 input 的 type 值	text
prefixIcon	输入框前置图标	String	--	--
maxlength	最大长度	String / Number	--	--
minlength	最小长度	String / Number	--	--
min	最小值	Number	--	--
max	最大值	Number	--	--
toFixed	保留的小数	Number	--	--
autosize	type="textarea"有效，自动尺寸	Boolean / Object	--	{ minRows: 2 }
elAuto	是否启用el-autocomplete组件	Boolean	--	--
valueKey	elAuto=true 有效，el-autocomplete输入建议对象中用于显示的键名	String	--	name
placement	elAuto=true 有效，el-autocomplete菜单弹出位置	String	--	--
triggerOnFocus	elAuto=true 有效，el-autocomplete组件是否在输入框 focus 时显示建议列表	Boolean	--	false
inputQueryData	elAuto=true 有效，el-autocomplete输入框建议数据	Array	--	[]

Events

事件名	说明	回调参数
change	输入框改变	(any)
enter	回车事件	--

lm-select 下拉选择框和单选按钮

Attributes

参数	说明	类型	可选值	默认值
value	值	String / Number /Array	--	--
formType	表单类型	String	radio / multiSelect	select
list	尾部图标	Array	--	['否','是']
placeholder	placeholder	String / Array	--	请选择
selectClass	select类名	String	--	--
oName	选项文字	String / Array	--	name
oValue	选项值	String / Array	--	value
filterable	是否可搜索	Boolean	--	true
changeFun	下拉框改变的函数	Function / Array	--	--
multiMargin	多个下拉框的边距	String	--	0 10px 0 0
multiList	多个下拉框的数据	Array	--	--

Events

事件名	说明	回调参数
change	下拉框，单选框改变	(value:Object/Array)

lm-date-time 日期时间选择器

Attributes

参数	说明	类型	可选值	默认值
value	值	String / Number /Array / Date	--	--
formType	表单类型	String	rangeDateTime	dateTime
dateTimeType	日期时间类型（同element-ui el-date-picker）	String	year/month/date/dates/ week/datetime/datetimerange/ daterange/monthrange	date
placeholder	placeholder	String / Array	--	请选择
defaultDateTimeValue	默认值	String / Array / Date / Number	--	--
dateTimeValueFormat	时间格式（格式同element-ui el-date-picker）	String	--	--
dateTimeFormat	时间格式（格式同element-ui el-date-picker）	String	--	--
pickerOptions	时间日期配置（配置内容同element-ui el-date-picker配置，formType=rangeDateTime时晴传数组）	Object / Array	--	--
conectionText	formType=rangeDateTime有效，时间范围连接符	String	--	-

Events

事件名	说明	回调参数
change	事件日期改变	(date:String/Number/Date/Array)

lm-cascader 级联选择器

Attributes

参数	说明	类型	可选值	默认值
value	值	String / Number	--	--
placeholder	placeholder	请选择
options	数据	Array	--	--
oName	选项文字	String	--	name
oValue	选项值	String	--	value
filterable	是否可搜索	Boolean	--	true
pickerOptions	级联配置（配置内容同element-ui el-cascader配置 props）	Object	--	--

代码示例

<template>
 <el-form :model="form" ref="form" :rules="rules" class="form" label-width="110px"  size="mini">  
        <el-row >
          <lm-input label="姓名：" v-model="form.name" prop="name" :lm-ref="['name','phoneNum']" :maxlength="20"/>
          <lm-input label="手机号：" v-model="form.phoneNum" prop="phoneNum" type="tel" :lm-ref="['phoneNum','orgId']" v-if="!isCert"/>
        </el-row>
        <el-row >
          <lm-select form-type="select" label="公司：" v-model="form.orgId" :list="addPersonCompanys" prop="orgId"  :lm-ref="['orgId','idcard']" @change="companyChange" :disabled="!!personDetailInfo.position"/>
            <lm-input label="身份证号：" v-model="form.idcard" prop="idcard" :lm-ref="['idcard','sex']" type="idcard"/>
        </el-row>
        <el-row>        
          <lm-select form-type="radio" label="性别：" v-model="form.sex" :list="['女','男']" prop="sex"/>
            <lm-date-time             
                            label="出生日期："
                            prop="birthday"
                            v-model="form.birthday"                 
                            :picker-options="{disabledDate:birthdayDisableFun}"
                            :default-date-time-value="Date.now()-10*365*24*60*60*1000"
                    />
        </el-row>
        <el-row>
                 <lm-date-time :span="16" form-type="rangeDateTime" label="有效时间：" prop="effectiveTime" :placeholder="['请选择开始时间','请选择结束时间']"  :disabled="[false,true]" v-model="form.effectiveTime"  :width="220">
                      <template #dateTimeConection><span style="display: inline-block; margin:auto 10px;">至</span></template>
                    </lm-date-time>
        </el-row>
        <el-row>
         <el-button type="primary" @click="savePersonInfo" style="width:90px;height:40px;">保存</el-button>
</el-row>
      </el-form>
</template>
<script>
    import {validPhone,validIDCard,validRangeDateTime} from "lm-ui-element/lib/utils/lm-validate-methods";
export default {   
    data(){
        return {
                     form:{},//表单
                     rules: {
                           orgId: [{required: true, message: "请选择公司", trigger: ['blur', 'change']}],
                          name: [{required: true,message: '请输入姓名'},{min: 1,max: 10,message: '长度在 1 到 10 个字符'}],
                          phoneNum: [{required: true,message: '请输入联系方式',validator: validPhone},{min: 11,max: 11,message: '11位长度'}],
                          sex: [{required: true,message:'请选择性别',trigger: ['blur', 'change']}],
                          idcard: [{required: true,validator:validIDCard, trigger: ['blur', 'change']}],
                          birthday: [{required: true,message: '请选择出生日期', trigger: ['blur', 'change']}],
                         effectiveTime:[{
                                              required: true,
                                               validator:(rule, value, callback)=> validRangeDateTime(rule, value, callback,'请选择有效日期',this.idcardIsLongPeriod,{startRequired:true}),
                               trigger: ['blur', 'change']}],
                     },//实名表单验证
                     inputWidth:300,
                     idcardIsLongPeriod:true
                },
        
    },
     methods: {
                //保存信息
                async savePersonInfo(){
                    await  this.$refs.form.validate()
                    console.log(this.form)
                },
                //分包单位改变
                companyChange({value}){
                   console.log(value)
                },               
            },
    
}
</script>

下一个组件：地址选择组件