北京合力金智科技发展有限公司
  1. 文档 / 
  2. 智平台文档 / 
  3. 常见案例 / 
  4. 字段href

智平台文档

字段href

概述

  • 在列表和表单详情一对多关联表列表中, 点击单元格可跳转链接.
  • 可以配置外部链接、系统内路由、弹出窗口
  • 并且对于关联表的单元格点击,可先调用JS增强, 动态修改字段href,

配置

在页面属性-字段href输入框书写123

  • 外部链接: 以http开头的外部链接
  • 系统内路由: 以/开头的系统内部路由
  • 弹窗自定义组件:以.vue为后缀的文件路径, 从views文件夹开始(不必写views)
  • 如果需要JS 增强, 对被关联的表配置JS增强, 只针对一对多关联表生效, 并且是详情(禁用)状态下下点击生效, 对被关联的表配置JS增强, JS增强返回的值可以为:
  • 返回null, undefaind, false 不继续向下执行
  • 返回对象
    • next: 是否继续执行, true/false
    • fieldHref: 重新定义fieldHref, 这个字段为空则使用页面属性配置的fieldHref
    • closeAutoModal: 是否关闭表单弹窗,跳转系统内路由时需要关闭, true/false

备注

  • 链接内可书写${variable}, variable会替换为: 当前列表行内容的这个字段的值record.variable
  • JS增强可返回同步的值, 如false, {next:true}; 可在JS增强中调接口,返回promise, return new Promise(resolve=>{setTimeout(()=>resolve({next:true}),2000)})

配置外链

配置内部路由

  • /online/cgformList/bde7543ab42547c480772ae923813641?fd_name=${fd_text}
  • 点击单元格时, 跳转系统内部路由, 并且查询参数姓名的值为 record.fd_text 的值
  • 效果图 跳转系统内路由

配置弹窗组件

modules/online/cgform/auto/OnlCgformAutoList.vue?propCode=8a828b997e7240f5017e724858b40002&fd_name=${fd_name}&isModalList=1

  • 点击单元格, 会打开一个弹出窗口, 弹窗内容时该路径对应的Vue组件,传递给该组件一些参数

    • 将?后面的查询字符串解析成一个对象, 传递给该组件当作props
    • 如果需要打开内置的列表组件, 需要传递固定的prop名称propCode, 其余的属性当作查询项参数传递给内置列表

  • 效果图 弹窗自定义组件

示例:结合JS增强使用(养老服务对象详情-三种津贴关联表动态打开不同列表)

  • 通过服务对象表的关联表配置, 找到被关联的表, 记录需要用到的信息, 关联表名,关联字段

  • 配置关联表的发放次数字段href(点击这个会执行操作), 页面属性配置fieldHref, 因为是动态计算的, 可以随便写一个数(详情加载动态表单组件是条件加载的,这一步没有值就不渲染)

  • 配置服务对象表的JS增强, form页面

  • 配置点击单元格打开的高龄津贴列表JS增强, 去掉部分字段, 操作列

  • 配置步骤 找到关联表 配置关联表字段href 配置JS增强 配置JS增强

  • 效果图 效果1 效果2 效果3

对应JS增强


// 详情下点击关联表单元格
// 函数名是固定的
//  参数1: 是onlineForm对象, 可获取当前表单每个字段的数据
//  参数2是事件对象, 可获取当前点击的row对应的信息, 和 单元格信息
//  参数3是jvxetable对象(列表) , 可获取整个表格的数据, 目前用不到 
onClickLinkTableCell(onlineForm, event, jvxeTable){
  console.log("onClickLinkTableCell:",{onlineForm, event, jvxeTable});

	// 点击关联表单元格
  const tab = onlineForm.activeTab; // 获取当前激活的tab页名(关联表名), 因为有多个tab页
  const key = event.column.property; // 获取点击的是哪个字段
  const value = event.row.fd_send_type; // 获取这一行的发放类型

  // 如果点击的不是我们想要的关联表 和想要的单元格, 不操作
  if(tab !== 'link_uv_elec_bas_fund_send_static') return
  if(key !== 'fd_count') return
  // 如果点击的发放类型不是 困难,高龄,失能 不操作
  if(![105003,105001,105002].includes(value)) return
  let code = '';
  
  // 获取不同的code, 也就是online表的ID
  if(value === 105003){
    // 高龄
    code = '8a828b997e7240f5017e724858b40002'
  } else if(value === 105001){
    // 困难
    code = '8a828b997e7240f5017e72481c4a0001'
  } else{
    // 失能
    code = '8a828b997e7240f5017e7240f5a20000'
  }

  // 返回next代表继续操作
  // 返回fieldHref代表重写href, 其中propCode属性名固定, fd_card是到跳转列表携带的查询项(做数据关联), isModalList=1 是传递给跳转列表的参数, 对应列表可根据这个参数, 去掉其余查询项, 去掉操作列,
  // closeAutoModal 表示不关闭表单弹窗
  return {
    next: true,
    fieldHref: "modules/online/cgform/auto/OnlCgformAutoList.vue?propCode=" + code + "&fd_card=${fd_card}&isModalList=1",
    closeAutoModal: false
  }
}

被关联表的JS增强

initTableColumns(that, columns){
	if(that.$attrs.isModalList === "1"){
  	console.log("处于弹窗中")
    // 去掉操作列
    that.actionLoading = true;
    // 去掉查询项
    that.onlyShowTable = true;
    // 只展示某些数据列
    const showColumns = ['fd_name', 'fd_send_year', 'fd_send_month', 'fd_send_type', 'fd_subsidy_type', 'fd_send_money']
    columns = columns.filter(v=>showColumns.includes(v.dataIndex))
  }
  return columns;
}

感谢您的反馈。如果您有关于如何使用 KubeSphere 的具体问题，请在 Slack 上提问。如果您想报告问题或提出改进建议，请在 GitHub 存储库中打开问题。

上一篇 : 自己开发页面引入online模块
页面内容