TgChoosePlus 放大镜

Attributes

属性名	说明	类型	默认值
page	页面模型	Object	{}
dataType	数据源管理中定义的类型，用于获取下拉框数据的	String
entity	绑定数据(配合nameField使用)	Object	{}
codeField	代码字段	String
nameField	name字段，如果不配置，默认是codeField+""	String	{}
target	自定义放大镜	String
disabled	只读	Boolean	false
canClear	是否出现清空按钮	Boolean	false
codeOnly	只显示code	Boolean	false
validate	校验放大镜的值	Boolean	true
codeBehind	code隐藏	Boolean	false
placeholder	placeholder	String	请选择
addEmpty	是否添加空选项	Boolean	false
cascadeField	当前放大镜的关联字段(field1,field2)	String
addon	指定查询条件	Object	{}

Events

名称	说明	类型	参数
conn	添加放大镜的参数	Functon	page,conn
choose	放大镜弹框，选中数据以后回调	Functon	row,entity
error	放大镜弹框，校验输入错误的回调	Functon	row

示例代码

基本用法

<TgChoosePlus :page="page" :entity="page.data.entity" code-field="countryCode" v-model="page.data.entity.countryCode"
              data-type="COUNTRY_LIST"/>

不校验放大镜

设置属性：validate=false
<TgChoosePlus :page="page" :entity="page.data.entity" code-field="countryCode" v-model="page.data.entity.countryCode"
              data-type="COUNTRY_LIST" :validate="false"/>

隐藏code的值

设置属性：codeBehind
<TgChoosePlus :page="page" :entity="page.data.entity" code-field="countryCode" v-model="page.data.entity.countryCode"
              data-type="COUNTRY_LIST" codeBehind/>

双击选中数据回调函数

添加事件:@choose

<TgChoosePlus :page="page" :entity="page.data.entity" code-field="countryCode" v-model="page.data.entity.countryCode"
              data-type="COUNTRY_LIST"
              @choose="chooseAction"/>

<script>
  //选中数据以后的回调函数
  function chooseAction(row) {
    let name = row.name
  }
</script>

自定义放大镜

设置属性：target是引入组件的refCode的值

<TgChoosePlus style="width: 500px"
              :page="page" readonly can-clear canChoose
              target="choose" code-field="type"
              :entity="page.data.entity"
              v-model="page.data.entity.type"/>

<targetChoose refCode="choose" :page="page"></targetChoose>

targetChoose.vue

<template>
  <div>
    <TgDialog
        ref="previewRef"
        title="测试"
        width="1200px"
        @close="page.close">
      <div class="tg_filter">
        <tg-filter-plus enterEmitName="enter" ref="queryForm" :rules="page.data.rules" :page="page"
                        @search="page.search"></tg-filter-plus>
      </div>

      <tg-table-list-plus :showFilterSetting="false" isCheckbox ref="table" :page="page" :table="page.data.table"
                          class="fit">
      </tg-table-list-plus>

    </TgDialog>
  </div>
</template>

<script setup name="PageDemo_FrmEciBaseList2">

  import QueryPage from "@coreQueryPage";
  import apis from '@/web/appDemo/apis'
  import {defaultQueryProps, defaultTableProps} from '@/web/app/setting/componentSetting'
  import {columns, searchFormSchema} from "./setting/list.set"
  import {ref} from "vue";

  let {page} = QueryPage()
  page.context.name = 'PageDemo_FrmEciBaseList2'
  page.data.searchApi = apis.appGen.search

  page.useQueryForm({
    ...defaultQueryProps,
    schema: searchFormSchema,
  })

  page.useTable({
    ...defaultTableProps,
    columns: columns,
    rowkey: 'id',
  })


  let choose = {}
  const previewRef = ref(null)

  //固定的方法名称，放大镜里面需要调用的
  page.show = (thisInstance) => {
    choose = thisInstance
//弹框show
    previewRef.value?.show()

//获取放大镜里面的值  
    let value = thisInstance.props.modelValue
    page.data.entity.gNo = value
//表格查询
    page.search({})
  }
  //表格双击事件，调用放大镜的选择数据的方法，将数据回写到放大镜中
  page.rowClick = (data) => {
    const row = {code: data.gNo, name: data.name}
    choose.exposed.selectData(row)
    previewRef.value?.close()
  }
</script>  

设置extend，修改放大镜的查询的api和表格列的信息

<template>

设置属性：extend

<TgChoosePlus style="width: 500px" :extend="multiExtendData"  
:page="page"  
code-field="code6"  
:entity="page.data.entity"  
v-model="page.data.entity.code6"/>

</template>

<script setup name="PageDemo_Form_TgChooseDemo">
	import EditPage from "@coreEditPage";
	let {page} = EditPage()
	
	//设置放大镜的查询的api，和放大镜打开的表格的列的信息
	const multiExtendData = {  
	url: "/eciNoticeType/selectPageList",  
	table: [  
		{  
		prop: 'code',  
		label: "编码"  
		},  
		{  
		prop: 'name',  
		label: "名称"  
		},  
		{  
		prop: "flowNo",  
		label: "环节"  
		},  
		{  
		prop: "status",  
		label: "状态"  
		},  
	],  
	//查询条件
	where: {  
		label: "编码",  
		key: "code"  
	},  
	code: "code",  
	name: "name",  
	data: {    
	__queryField: "code|A.CODE|s|l|and,name|A.NAME|s|l|and,status|A.STATUS|s|=|and,flowNo|A.FLOW_NO|s|l|and"  
		}  
	};
</script>

后续提供的功能

放大镜带参数

通过自定义事件实现

在数据源中的配置BASE_TRADE_LINK：sql如下：添加 ${type}

SELECT PARA_CODE AS CODE, PARA_NAME AS NAME FROM BASE_PARAMETERS 
WHERE PARA_TYPE = #{type}

组件使用：添加自定义事件

添加事件:@conn="connAction"

<TgChoosePlus :page="page" :entity="page.data.entity" 
			  code-field="code" name-field="name" 
			   v-model="page.data.entity.code"
              data-type="BASE_TRADE_LINK" 
              @conn="connAction"/>


<script>
  //设置当前放大镜的关联条件
function connAction(conn) {  
	conn.addon.type = page.data.entity.type;  
	if (!page.data.entity.type) {  
		conn.message = '请先输入类型'  
	}  
}

</script>

通过属性addon，addon是String类型

在数据源中的配置BASE_TRADE_LINK：sql如下：添加 ${type}

	SELECT PARA_CODE AS CODE, PARA_NAME AS NAME FROM BASE_PARAMETERS 
	 WHERE PARA_TYPE = #{type}

添加属性：
1,cascadeField：字段1，字段2

2,addon：{key:{value:'',condition:'',label:'',inEntity:true}}
    key:字段名
    value:值,当从实体中获取值时，value可以为空，如果不为空均从value中获取值
    condition:条件,支持queryField的条件的方式
    label:提示信息
    inEntity:是否从实体中获取值，默认true

<tg-form ref="editForm" :labelWidth="300" :page="page" :isFirstFocus="false">  
<el-row>  
	<el-col :span="12">  
		<el-form-item  
			label="关联字段类型"  
			prop="type">  
			<tg-input-plus v-model="page.data.entity.type"></tg-input-plus>  
		</el-form-item>  
	</el-col>  
	
	<el-col :span="12">  
		<el-form-item  label="代码"  prop="code">  
		
			<TgChoosePlus :page="page" v-model="page.data.entity.code"  
	code-field="code"  name-field="name"  cascadeField="type"  
	 addon='{"type":{"label":"类型"}}'  :entity="page.data.entity"  
	data-type="BASE_TRADE_LINK"/>  
	
	</el-form-item>  
	</el-col>  
</el-row>  
  
</tg-form>

<script setup name="PageDemo_Form_TgChooseDemo">  
import EditPage from "@coreEditPage";  
  
let {page} = EditPage()  
  
page.data.entity.type = "BASE_TRADE"  

</script>