天码科技研发文档

# 表单组件

# 抽屉表单 lg-form-drawer

参数 说明 类型 必须 默认值
drawer 抽屉组件的属性 Object 否

其他方法及用法同lg-form-modal

# 弹窗表单 lg-form-modal

该组件依赖于lg-from，具体用法见lg-from

参数 说明 类型 必须 默认值
modelValue/v-model 表单数据 Object 是
deploy 配置项 Array 否
width 弹窗宽度 Number 否 520
addTitle 添加名称 String 否 添加
editTitle 编辑名称 String 否 修改
sieve 不进行修改校验 Boolean 否 false
close 不自动关闭 Boolean 否 false

# 插槽

名称 说明 调用值
default 默认插槽，插入表单后面
top 插入表单前面
actions 按钮后面的插槽

# 可调用事件

名称 说明 回调参数
change 点击确定回调 筛选后数据

# 可调用事件

名称 说明 回调参数
openAdd 打开添加弹窗
openAdit 打开编辑弹窗
openSure 手动校验
formRef 调用form函数
openClose 手动关闭

案例：

<template>
	<lg-form-modal ref="ruleForms"  v-model="data.form" @change='change'>
	<lg-form-item title='围栏名称' dataIndex='name' :rules="[['required','请输入名称']]">
	<lg-input :maxlength='16' v-model="data.form.name" placeholder="请输入"></lg-input>
	</lg-form-item>
	<lg-form-item  title='监控时间' dataIndex='time' :rules="[['required','请选择']]">
	<lg-range-picker style="width: 100%;" v-model="data.form.time" disabledDate='before' />
	</lg-form-item>
	</lg-form-modal>
	<span v-if="$slots.edit" @click="openEdit()" style="display: inline;">
	<slot name="edit"></slot> 
</span>
	<div v-if="$slots.add" @click="openAdd()"  style="padding-top:10px ;">
	<slot name="add"></slot> 
    </div>
</template>
<script setup>
import {lgFormItem,lgRangePicker,lgInput,lgFormModal} from 'lg-ui' 
import {lgUpdateList} from 'lg-util'
import { ref,reactive } from 'vue'
const ruleForms = ref(null)
const props = defineProps({
	form: {
	type: Object,
	default(){
	return {}
	 },
		},
		});
	    const data = reactive({
				 form:{
					name: '',
					time: [],  
				  }
	           
	          })
	
	// 添加弹窗
	const openAdd = (e) => {
		data.form = {
					name: '',
					time:[],
				}
		ruleForms.value.openAdd()
	}
	
	// 编辑弹窗
	const openEdit = (e) => {
	    data.form = props.form
		ruleForms.value.openEdit()
	}
	
	// 确定回调
	const change = (e,a) => {
	
	lgUpdateList()//刷新表格
	}
</script>

# 表单 lg-from

参数 说明 类型 必须 默认值
modelValue/v-model 表单数据 Object 是
type 状态 String 是 add
deploy 配置项 Array 否
gutter 栅格间隔/具体用法见ant栅格 number/object/array 否 24
span 行占比（栅格） Number 否 24
labelWidth 标题长度 Number/String 否 80px
# deploy
参数 说明 类型 必须 默认值
form 类型 String 是
formItem 表单块属性 Object 否
deploy 组件配置 Object 否

# 插槽

名称 说明 调用值
default 默认插槽，插入表单后面
top 插入表单前面

# 可调用事件

名称 说明 回调参数
validate 校验表单
clearValidate 移除表单项的校验结果。传入待移除的表单项的 name 属性或者 name 组成的数组，如不传则移除整个表单的校验结果

# 表单 lg-form-item

参数 说明 类型 必须 默认值
span 行占比（栅格）（优先使用该配置） Number 否 24
labelWidth 标题长度 （优先使用该配置） Number/String 否 80px
title 标题 String 否
dataIndex 数据标识名称 Array/String 是
placeholder 占位字符 String 否 请输入
rules 校验规则 Array/Object 否

# 插槽

名称 说明 调用值
default 默认插槽，插入表单块

# dataIndex

类型：Array/String

描述：嵌套类型示例

//对象类型
<lg-form-item :dataIndex="['user', 'email']" title="Email">
    <a-input  v-model:value="formState.user.email" />
    </lg-form-item>

//数组类型
  <lg-form-item v-for="(domain, index) in from.options"
      :key="index"
  	 :style="index === 0 ? {}:{paddingLeft:'92px'}" 
      :title="index === 0 ? '字段' : ''"
  		  :rules="['required']" 
      :dataIndex="['options', index]" >
          
           <a-input  placeholder="请输入"  v-model:value="from.options[index]" />
    </lg-form-item>

# rules

类型：Array/Object

描述：规则效验

rules:[
    'required',//如验证名称为required，则取placeholder进行提示
    ['telephone','电话号码'],//如传入数组类型，默认第一个为验证类型第二个为自定义提示信息
    {
     pattern:/^[0-9a-zA-Z_]{5,15}$/,	
	message: '用户名错误'
    },//传入对象类型则表示自定义校验规则
       ],

# 可选正则 rules

名称 说明
required 必填
telephone 电话号码
userName 用户账号
password 密码
passwordPowerful 强密码
path 路径
card 卡号
ip ip地址
idCard 身份证
email 邮箱
fullName 姓名
postalCode 邮政编码
carNum 车牌号
chinese 汉字
number 数字
ordinaryString 英文数字下划线
floating 正浮点数
decimal 浮点数
englishNumbers 英文和数字
object 对象
array 数组

案例：

<template>
	<div>
		<div style="width: 1000px;">
			<lg-form :deploy='deploy' v-model="datas">
					<lg-form-item
					title='名称'
					:span='18'
                    :rules="[['required','请输入名称']]"   
				>
				<lg-input v-model="datas.name"/>
					</lg-form-item>
				</lg-form>
		</div>
	</div>
</template>

<script setup>
    import {lgFormItem,,lgInput,lgForm} from 'lg-ui' 
		import {ref} from 'vue'
			const deploy = ref(
        [{
          form: 'lg-input', 
          title: 'title', 
          dataIndex: 'input',
          span: 10, 
          rules: ['required'], 
          placeholder: '请输入姓名',
        },
     ])

			const datas = ref(
        {
            input: '2222',
            ame: ''
        },
)
		
</script>

<style>
</style>

# 输入类型

注：更多方法见ant文档 (opens new window)

参数 说明 类型 必须 默认值
modelValue/v-model 数据 null 是
placeholder 占位符 String 否 add
disabled 是否禁用 Boolean 否 false
maxlength input/textarea最大输入字数 Number 否 99/150

# 可调用事件

名称 说明 回调参数
change 输入后回调值 value
upload 富文本选择图片后回调（需通过insertFn传入图片地址回显到富文本框） file，insertFn

# lg-input （输入框）

 <template>
  <div>
 <lg-input v-model="datas.text" placeholder="请输入"  :disabled='true'>
        </lg-input>
  </div>
</template>
<script setup>
  	import {ref} from 'vue'

    const text = ref('')
</script>

# lg-textarea （编辑框）

 <template>
  <div>
<lg-textarea v-model="text" placeholder="请输入" :disabled='true'>
        </lg-textarea>
  </div>
</template>
<script setup>
 	import {ref} from 'vue'

  const text = ref('')
</script>

# lg-editor （富文本）

 <template>
  <div>
<lg-editor  v-model="text" placeholder="请输入" :disabled='true' >
        </lg-editor>
  </div>
</template>
<script setup>
 	import {ref} from 'vue'

  const text = ref('')
</script>

# 选择类型

注：更多方法见ant文档 (opens new window)

参数 说明 类型 必须 默认值
modelValue/v-model 数据 null 是
placeholder 占位符 String 否 请选择
disabled 是否禁用 Boolean 否 false
value 数据key值 String 否 value
label 标签值 String 否 label
options 数据源 Array 否
strictFormat 严格模式 Boolean 否 true

# 插槽

名称 说明 调用值
default 默认插槽，用于插入组

# lg-select(下拉单选)

<template>
  <div>
 <lg-select v-model="list" :placeholder="'请选择'"
:options="[{ label: '阿斯顿', value: 123 }, { label: '水电费', value: 456 }]">
 </lg-select>
  </div>
</template>
<script setup>
 	import {ref} from 'vue'

  const list = ref('')
</script>

# lg-selectmany(下拉多选)

 <template>
  <div>
<lg-selectmany v-model="list" :placeholder="'请选择'"
:options="[{ label: '阿斯顿', value: 123 }, { label: '水电费', value: 456 }]">
    
 </lg-selectmany>
  </div>
</template>
<script setup>
 	import {ref} from 'vue'

  const list = ref('')
</script>

# lg-checkbox (多选框)

 <template>
  <div>
 <lg-checkbox v-model="list" 
          :options="[{ label: '阿斯顿', value: 123 }, { label: '水电费', value: 456 }]">
        </lg-checkbox>
  </div>
</template>
<script setup>
 	import {ref} from 'vue'

  const list = ref([])
</script>
//支持数组或数组对象类型['阿斯顿','水电费'] 或[{ label: '阿斯顿', value: 123 }, { label: '水电费', value: 456 }]

# lg-radio(单选框)

 <template>
  <div>
   <lg-radio v-model="list" 
          :options="[{ label: '阿斯顿', value: 123 }, { label: '水电费', value: 456 }]">
        </lg-radio>
  </div>
</template>
<script setup>
 	import {ref} from 'vue'

  const list = ref('')
</script>

//支持数组或数组对象类型['阿斯顿','水电费'] 或[{ label: '阿斯顿', value: 123 }, { label: '水电费', value: 456 }]

# lg-cascader（级联）

参数 说明 类型 必须 默认值
modelValue/v-model 数据 null 是
placeholder 占位符 String 否 请选择
disabled 是否禁用 Boolean 否 false
value 数据key值 String 否 value
label 标签值 String 否 label
children 子级值 String 否 children
options 数据源 Array 否
mode 模式 String 否 radio
changeOnSelect 可只选父级 Boolean 否 true

# mode

类型：String

描述：用于配置选择类型模式

//sieve:"radio"//单选，只返回选中值
//default 默认单选，返回选中值所有父级
//multiple 多选，返回选中值所有父级
//multi_level 多选，只返回选中值

案例：

    
      
 <template>
  <div>
     <lg-cascader v-model="cascader" :options="[{
          value: 'zhejiang',
          label: 'Zhejiang',
          children: [
            {
              value: 'hangzhou',
              label: 'Hangzhou',
              children: [
                {
                  value: 'xihu',
                  label: 'West Lake',
                },
              ],
            },
          ],
        },]" ></lg-cascader>
  </div>
</template>
<script setup>
 	import {ref} from 'vue'

  const cascader = ref([])
</script>

# 时间类型

注：更多方法见ant文档 (opens new window)

参数 说明 类型 必须 默认值
modelValue/v-model 数据 null 是
disabled 是否禁用 Boolean 否 false
disabledDate 可选日期 String/Function 否 all
disabledTime 可选时间 String/Function 否 all
format 时间格式 (1.1.2新增)（仅lg-date-picker支持） String 否 YYYY-MM-DD

# lg-date-picker(选择时间日期)

 <template>
  <div>
<lg-date-picker v-model="date" disabledDate='before' />
  </div>
</template>
<script setup>
 	import {ref} from 'vue'

  const date = ref('2021-11-24')
</script>
//disabledDate 可选日期
-----------------------
// all //所有
// before //禁止今天之前不包括今天
// beforePresent   //今天之前包括今天
// after //今天之后不包括今天
// afterPresent //今天之后包括今天
//自定义函数
//(current)=>{
//		return current && current > dayjs().subtract(1, 'day')
//	}

# lg-range-picker（时间范围选择）

 <template>
  <div>
 <lg-range-picker v-model="date"  ></lg-range-picker>
  </div>
</template>
<script setup>

 	import {ref} from 'vue'

  const date = ref(['2021-11-24','2021-11-28'])
</script>
       //disabledDate 可选日期
-----------------------
// all //所有
// before //禁止今天之前不包括今天
// beforePresent   //今天之前包括今天
// after //今天之后不包括今天
// afterPresent //今天之后包括今天
//自定义函数
//(current)=>{
//		return current && current > dayjs().subtract(1, 'day')
//	}

# lg-time-picker（时间选择）

 <template>
  <div>
 <lg-time-picker v-model="date"  ></lg-time-picker>
  </div>
</template>
<script setup>

 	import {ref} from 'vue'

  const date = ref('09:00')
</script>
       //disabledTime 可选时间
-----------------------
// all //所有
// minutes //禁止选择分钟

//自定义函数
//()=>{
//	disabledHours: () => [0,1]  //不可选时
//   disabledMinutes: () => [0,1,2,4] //不可选分
//	}

# lg-time-range-picker （小时分钟范围选择）

 <template>
  <div>
 <lg-time-range-picker v-model="date" disabledTime='minutes'></lg-time-range-picker>

  </div>
</template>
<script setup>
 	import {ref} from 'vue'

  const date = ref(['09:00','12:00'])

</script>
       
       //disabledTime 可选时间
-----------------------
// all //所有
// minutes //禁止选择分钟

//自定义函数
//()=>{
//	disabledHours: () => [0,1]  //不可选时
//   disabledMinutes: () => [0,1,2,4] //不可选分
//	}

# lg-month-picker （月份选择）

 <template>
  <div>
 <lg-month-picker v-model="datas.date"></lg-month-picker>
  </div>
</template>
<script setup>

 	import {ref} from 'vue'

  const date = ref('2021-11')
</script>
 //disabledDate 可选日期
-----------------------
// all //所有
// before //禁止今天之前不包括当月
// beforePresent   //今天之前包括当月
// after //今天之后不包括当月
// afterPresent //今天之后包括当月
//自定义函数
//(current)=>{
//		return current && current > dayjs().subtract(1, 'day')
//	}

← 安装 →