前端组件

# 1.下拉框 TgSelect

名称	描述	类型	默认值
data-type	基础参数KEY	String	--
data	扩展项，和 data-type 不能同时使用	Array	--
multiple	多选	Boolean	false
update	回调方法	function
show-all	是否展示选项“全部”	Boolean	false

# 1. 1.基础

<TgSelect v-model="form.emsAttribute" data-type="EMS_ATTRIBUTE" />
<!-- 
如果需要根据查询出来的数据进一步进行筛选，请使用如下方法 
data-reg-exp  值为正则表达式
-->
<TgSelect v-model="form.operType" data-type="OPER_TYPE" :data-reg-exp="/^A/"  />

1
2
3
4
5
6

# 1.2. 扩展

<TgSelect v-model="form.tableCode" :data="[{value: '1',label: 'label'}]" />

# 1.3. 多选

<!-- multiple  -->
<TgSelect v-model="form.emsAttribute" data-type="EMS_ATTRIBUTE"  multiple />

1
2

# 1.4. 回调方法

<!-- update -->
<TgSelect v-model="form.emsAttribute" data-type="EMS_ATTRIBUTE" @update="updateSelect" />

1
2

# 2.放大镜 TgChoose

名称	描述	类型	默认值
data-type	基础参数 key	String	--
init	初始化时是否触发查询接口设置对应的值	Boolean	false
update	回调方法	function

显示CODE|NAME     <TgChoose v-model="form.cbecElist" data-type="CBEC_ELIST"  />
只显示CODE        <TgChoose v-model="form.cbecElist" data-type="CBEC_ELIST" show="CODE" />

1
2

# 2.1. 放大镜回调方法

<!--  @update="updateChoose" -->
<TgChoose v-model="form.baseCustoms" data-type="BASE_CUSTOMS" :where="{key:'value'}" @update="updateChoose" />

1
2

const updateChoose = (row)=>{
  // row   {code:"code",name: "code"}
  // form.value.carNo = row.code 
}

1
2
3
4

# 2.2. 放大镜扩展功能

名称	描述	类型
extend	自定义放大镜	object	url	自定义请求地址
			table	弹框显示的表格数据
			code
			name
			data	搜索条件时附带的额外参数，若没有，则不传

<TgChoose v-model="form.cbecElist" :extend="extendData" />

/*
	url 	接口请求地址
	table	弹框显示的表格内容
	where	弹框中查询条件，默认是模糊匹配
	code	显示数据 code
	name	显示数据 name
	注：扩展的放大镜，查询的接口和通用查询接口规则一致
*/
const extendData = {
  url:'/baseCar/selectPageList',
  table: [{
    // prop: 'code',
    prop: 'vehicleNo',
    label: '车牌号'
  },{
    // prop: 'name',
    prop: 'vehicleTypeName',
    label: '车辆类型/车辆性质'
  },{
    prop: 'icCode',
    label: 'IC卡号'
  }],
  where: {
    label: '车牌号',
    key: 'vehicleNo'
  },
  code: 'icCode',
  name: 'vehicleTypeName',
  data: {test: 1}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

# 2.3. 两个放大镜关联设置

<tg-choose
  v-model="form.carNo"
  :extend="extendData"
  @update="carNoChoose"
/>
<tg-choose v-model="form.icCard" data-type="BASE_IC_CARD" />

1
2
3
4
5
6

const state = reactive({
  flag: 1
})

const handleShow = (type,row)=>{
  show(type,row)
  state.flag = 1
}

const carNoChoose =row =>{
  if( state.flag <= 3) {
    state.flag ++
    return
  }    
  form.value.icCard = row.icCode;
}
defineExpose({
  show: handleShow
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 3.按钮 TgButton

<!--
	icon 参数为  element plus 中图标库对应的名称
-->
<tg-button icon="Finished" name="批量通过" />

<!--
	如果图标为自定义图表，可以使用如下方法
-->
<tg-button>
    <el-icon><Finished /></el-icon>
    批量通过
</tg-button>

1
2
3
4
5
6
7
8
9
10
11
12

# 4. 上传EXCEL

注：后端校验逻辑业务实现

<tg-upload-excel action="/cbeArrival/importExcel" />
<!-- 上传时附带的额外参数 -->
<tg-upload-excel action="/cbeArrival/importExcel" :data="{id: 1}" :on-success="onSuccess"/>

1
2
3

import TgUploadExcel from "@coreComponents/TgUpload/TgUploadExcel.vue";
// 上传成功后的回调
const onSuccess = ()=>{ }

1
2
3

属性	描述	类型	默认值	必填
action	请求 URL	string	—	是
data	上传时附带的额外参数	Record<string, any>	—	否
on-success	文件上传成功时的钩子		—	否

# 5. 日期选择器

<tg-date-picker
  v-model="form.date"
  :shortcuts="[]"
/>

1
2
3
4

名称	描述	类型	默认值	必填
shortcuts	设置快捷选项，需要传入数组对象	Array<{ text : string , value : Date \| Function }> (opens new window)		否

# 6. 代码高亮 highlightjs

<highlightjs autodetect :code="scope.row.sqlStr" />

名称	描述	类型	默认值	必填
code	显示的代码	string		是
autodetect	是否自动换行	Boolean	false	否

# 7. TgCodemirror 在线代码编辑器

<tg-codemirror v-model="form.code" />

import TgCodemirror from "@coreComponents/GzyqCodemirror.vue";

上次更新: 2024/3/21 08:50:37

← 页面模型前端公共方法→