表单设计

表单设计

我们所说的表单就是申请单,用户在提交申请的时候,什么地方可以填,需要填写什么内容,是输入还是选择等等,这些都是管理员在后台设置里面定义的。

设计表单的操作就是对照实际的申请单,从系统中选择相应的字段类型,逐一添加,形成一张电子申请单的样式。不同的字段类型,展现给用户的界面也是不同的。比如下拉框,用户就是从几个选项中选择一个内容;比如数值字段,用户只能输入数字等。字段类型可参照下一节“字段”。

以下以“日常费用报销”单为例,为您演示设计表单的操作步骤。

  • 登录审批王之后,首先点击“设置-流程”,点击“流程设计器”。

附流程设计器

  • 在系统弹出的页面中,点击右上角的“新增流程”按钮。

  • 输入流程名称,如“日常费用报销”,点击“好”按钮。

  • 系统默认显示的是流程步骤设计页面,在窗口上方选择“表单”。

表单设计

  • 添加字段。报销单的第一个字段是“所在部门”,为录入的文本,所以添加一个“文本”字段。鼠标点中右侧“添加字段”标签下的“文本”,拖动到左侧的合适位置,然后松开鼠标。或者鼠标直接单击右侧“添加字段”标签下的“文本”,这时,左侧会增加一行“文本”字段。

  • 鼠标选中左侧的“文本”,再点击右侧的“属性”标签,这时出现的就是“文本”字段的所有属性,可酌情修改。修改“字段名”为“所在部门”,不修改“显示名称”。在“公式”一栏的输入框内,输入“{applicant.organization.fullname}”,这样,在填写该表单时,系统将会自动显示“所在部门”为提交人所在部门。关于公式,可参考"字段公式"

文本

  • 报销单的第二块是“报销明细”,其下包括数个字段,实际填写报销单时,可以增加不定行数的明细数据。所以,需要添加一个“表格”字段,并将其下字段都置于此“表格”的范围之内。鼠标点中右侧“添加字段”标签下的“表格”,拖动到左侧的合适位置,然后松开鼠标。也可以直接单击右侧“添加字段”标签下的“表格”,这时,左侧会增加一行“表格”字段。

  • 鼠标选中左侧的此“表格”,点击右侧的“属性”标签,这时出现的就是“表格”字段的所有属性,可修改:“字段名”为“报销明细”,“描述”内则填上“注:若用其他发票代替,请选择实际用途。如购买办公用品由于没有发票而用车票代替,那么费用类别里应该选择办公用品。”

表格

  • 报销明细中的第一个字段是“费用类别”,属于下拉框字段。拖动右侧“下拉框”到左侧的“报销明细”中。

  • 在该下拉框属性下,修改字段名,在“输入选项”框内填上可供选择的选项(以回车为分隔),并将该字段设置为必填字段。

选择框

  • 报销明细中的第二个字段是“报销金额”,属于数值字段,拖动右侧“数值”到左侧的“报销明细”中。

  • 在该数值字段属性处,设置字段名、小数点位数,以及“必填”等。

  • 继续为表格添加“日期”字段,并在该日期字段的属性处设置字段名为“费用产生日期”,以及设置改字段为必填字段。

  • 在表格中继续添加文本字段,并在该字段的属性处设置该字段的字段名为“备注”。

  • 报销单中还有一字段“报销金额合计”,为“报销明细”中的“报销金额”的合计值。所以,需要增加一个“数值”字段,并设置其值为“报销金额”的合计值。这时,我们点击表头区域,通过拖动或单击添加一个“数值”字段,设置字段名为“报销金额合计”,在公式输入栏内填入“sum({报销金额})”。这样,在填写该申请单时,输入明细的报销金额,系统会自动计算并将报销金额合计显示在“报销金额合计”处。

金额合计

  • 点击左侧某字段的右上角的“-”即可删除该字段。

  • 上下拖动字段,则可以更改字段的上下位置。

  • 在界面的左上角有“保存”和“关闭”选项。设计过程中,点击“保存”可随时保存;设计完毕后,点击“关闭”,则保存新表单的内容,并关闭“流程设计器”。

  • 回到表单设置界面,将表单的“启用状态”按钮点开,即可开始使用该表单。

字段

为了更便捷的设计申请单,审批王提供了多种类型的字段类型。

申请单中的字段类型包括了三类:输入类字段、选择类字段、以及其他字段。

输入类字段

输入类字段指通过输入方式添加内容的字段,包括:

  • 文本:适用于输入文本内容的填写框,是最常用的的字段类型,对输入内容没有限制。
  • 数值:要求填写的内容必须是数字,适用于金额、合计等,也可用于计算公式的编写。
  • 日期:可用于选择年月日的日期,格式为“yy-mm-dd”。
  • 日期-时间:在日期的基础上增加了具体的几点几分。
  • 勾选框:用于选择是或否。

选择类字段

  • 下拉框:通过字段属性预置可选择的内容,只可选择一项。
  • 选择用户:可在系统已有的用户中选择,名字将会显示在表单中,已邀请的用户无论激活与否都在选择范围内。
  • 选择部门:可在系统已有的部门中选择,部门的全路径名字将会显示在表单中。
  • 单选:通过字段属性可预置选择项,用户只能选择一项。
  • 多选:通过字段属性可预置选择项,用户可选择多项。
  • Odata:通过字段属性可预置选择项,默认只可选择一项,属性可设置多选;可参照下图,进行配置,必填属性“字段名”必须为下拉数据的id,“Odata API”配置下拉数据的URL地址,“可搜索字段”配置下拉数据相关属性值,“公式”配置下拉数据的显示名,非必填项“过滤条件”按需填写下拉数据的某个属性的条件。

odata

其他类型字段说明

  • 分组:可将说明同一事务的字段进行归类。
  • 表格:插入一个表格,可填写明细信息等。

字段属性

字段属性

  • 字段名:实际存放在数据库中的名字,此名字在同一张申请单中不可重复。今后公式和条件判断都将使用字段名。
  • 显示名称:审批单中实际显示的名字,同一张申请单中可重复,默认的显示名和字段名相同,用户也可自行修改。
  • 必填:必填打勾后,提交的申请单不允许为空,画布上以“*”标记。若不打勾,则在提交申请单时候可以为空。
  • 宽字段:打勾后,字段显示宽度跨两列,不打勾,字段显示宽度只有一列。
  • 列表显示:打勾后,在任何地方,进入高级搜索界面后,选择该字段所在的流程,会在列表显示的时候就会多一列显示此字段的内容。
  • 内容可搜:打勾后,在任何申请单的列表界面,根据该字段的内容,搜索都可搜索到相应申请单。
  • 默认值:根据需要,预置在字段中的值,可修改。
  • 勾选、多选、单选字段属性:输入选项—设置可选项。
  • 用户、部门选择字段属性:选择类型—可选一个还是多个。

注:字段名需唯一,显示名称可以重复。

子表

在日常工作中,一个主表单里面通常还会嵌套另一个表格,我们称之为“子表”。子表的作用类似于明细表,它拥有多行数据,且字段名都是相同的,用户在填写表单时,可以输入任意多行数据。以“日常报销申请单”为例,报销明细就是子表。子表添加的方式如下:

  • 设计表单时,选择“添加字段”下的表格。
  • 选中表格,“属性”的描述中输入“报销明细”。
  • 在该表格中添加不同的字段,比如增加下拉框“报销类别”,输入办公用品、交通费等选项。
  • 添加数值字段“报销金额”,添加日期字段“费用产生日期”。

这样,用户在填写日常报销申请单时,点击“+”就会出现“报销类别”“报销金额”“费用产生日期”三个字段,填写完内容后,子表中会出现这一条记录,再点击“+”,输入一行数据,重复操作,可以将每一笔报销的费用都输入到表格中。

表单模板

如果您熟悉HTML的编写,可以使用 html 自定义表单样式。默认表格样式的表单,一行显示2个字段,宽字段一行显示1个,宽度高度等都是系统固定的,不能通过字段属性进行调整,但是您可以通过导出默认模板,下载html文件,并修改表单的 html 结构和样式来实现自定义功能。

例如,为了实现如下图中的Excel表格样式,具体操作如下:

表单模板

  • 管理员登录系统后,首先点击“设置-流程设置-流程”,点击“资本性支出项目费用指标控制审批单”,进入到流程详情页。
  • 点击右上角的按钮组合键中的“导出默认模板”,下载该流程的默认表单html文件,文件名为'资本性支出项目费用指标控制审批单.html'。
  • 用代码编辑工具或记事本打开html文件,根据实际情况,修改表单的html结构,以及添加css样式。
  • html文件修改完成后,选中所有代码并复制,在流程详情页的“模板”-“表单模板”,点击编辑,将复制的代码粘贴到表单模板中,并保存确认。
<style>
//在这里通过id、class等定义样式
</style>
<div class='instance-template'>
<table class="table-page-title form-table no-border text-align-center" style="width: 100%;display: inline-table;">
<tr class="instance-name">
<td class="instance-table-name-td page-title">
{{instance.name}}
</td>
</tr>
</table>
<table class="table-page-body form-table">
<tr style="height:0px">
//默认是2个字段4列,可通过添加th增加多列,以及设置width的大小来定义每列的宽度
<th style='width: 11%'></th>
<th style='width: 11%'></th>
<th style='width: 8%'></th>
<th style='width: 10%'></th>
<th style='width: 8%'></th>
<th></th>
<th style='width: 12%'></th>
<th></th>
<th style='width: 12%'></th>
<th></th>
</tr>
//下面是表单内容
...
</table>
</div>

以上代码为html文件的默认格式,在不破坏整体结构的前提下,通过增加或删除相关内容,以及增加css样式,改变表单的显示样式。

签字意见设置

意见栏公式

配置意见栏公式,将流程某一步骤处理人的意见显示在申请单的某一栏上。 以下以发文流程为例介绍意见栏公式的配置过程:

  • 进入流程设计器,发文流程中有一步骤叫“领导签发”,需要领导在处理时填写个人意见。
  • 进入申请单设计,添加一个文本类型的字段,鼠标选中新加的文本字段,在右侧栏里切换到“属性”栏,将此字段命名为“领导批示”。
  • 下方“公式”栏里写{yijianlan:{step:"领导签发"}},注意step.后面跟流程某一步骤名。
  • 保存之后,当“领导签发”步骤,领导可以在申请单上看到“领导批示”栏,在其右下角有“签批”按钮。

常见的意见栏公式

常见的意见栏公式如下:

  • 一个步骤一个意见栏:“{yijianlan:{step:"领导签发"}}”。该步骤如果传阅给其他人,并勾选签批字段框,则发件者和收件者的意见都会出现在意见栏中。
  • 只显示传阅人员签批意见栏:“{yijianlan:{step:"集团文书处理",only_cc: true}}”。在文书处理步骤传阅给其他人,可在此意见栏上签批意见;该步骤如果传阅给其他人也只显示收件者的意见。
  • 只显示处理人员意见:“{yijianlan:{step:"领导批示", only_handler:true}}”
  • 多个步骤一个意见栏:“{yijianlan:{step:"股份公司领导意见"}};{yijianlan:{step:"集团公司领导意见"}}”。股份公司领导步骤签的意见和集团公司领导签的意见出现在同一个意见栏上。
  • 图片签名:“{yijianlan:{step:"领导批示", default:"已阅", image_sign: true, only_cc: false}}”,配置了图片签名的处理人,签批意见之后,申请单上会以图片签名结尾。
  • 配置默认意见:“{yijianlan:{step:"领导批示", default:"已阅"}}”,处理人在提交申请单后,在意见栏为空的情况下,系统会默认为您签下“已阅”的意见。

标题公式

审批王中每个提交的申请单都有系统标题,系统默认格式是流程名称+流水号。为了更便捷的定位申请单,申请单的标题可以使用申请单中的某一字段值或多个字段值组合,达到自定义文件标题的目的。

标题公式设置

  • 登录系统,点击“流程设计器”。
  • 通过流程分类找到需要设置文件标题的流程。
  • 点击“表单”选项,进入表单编辑页面,选中表单名称部分,在页面右侧会显示表单属性设置页。
  • 在标题公式一栏中可设施标题显示的内容。

流程标题

标题公式编写

  • 取单个表单字段内容为文件标题:{字段名}。如销售合同申请单需要把合同名称作为文件标题,则为{合同名称}。
  • 取多个表单字段组合为文件标题:{字段名}+{字段名}。如请假申请单需要把请假类型和请假天数作为文件标题,则为{请假类别}+{tianshu}。
  • 默认值加系统字段为文件标题:"默认值"+{字段名}。如用印申请单的文件标题为"申请使用"+{印章类型}。
  • 含有系统字段的文件标题:常用的系统字段如提交日期{submit_date},申请人名称{applicant_name},审批单编号{insname}。如工作周报的文件标题为{applicant.name}+"周报 "+{submit.date}

表单脚本

如果您熟悉脚本的编写,可以通过使用JavaScript脚本语言在表单中添加脚本。除了使用我们提供的公式、条件等格式之外,您还可以通过添加脚本来实现自定义功能。

例如,为了实现对数值型金额字段自动转换成大写金额,可以在表单脚本中输入以下语句:

CoreForm.custom_numToCny = function (num) {

if(isNaN(num))return "无效数值!";

var strPrefix="";

if(num<0)strPrefix ="(负)";

num=Math.abs(num);

if(num>=1000000000000)return "无效数值!";

var strOutput = "";

var strUnit = '仟佰拾亿仟佰拾万仟佰拾元角分';

var strCapDgt='零壹贰叁肆伍陆柒捌玖';

num += "00";

var intPos = num.indexOf('.');

if (intPos >= 0){

num = num.substring(0, intPos) + num.substr(intPos + 1, 2);

}

strUnit = strUnit.substr(strUnit.length - num.length);

for (var i=0; i < num.length; i++){

strOutput += strCapDgt.substr(num.substr(i,1),1) + strUnit.substr(i,1);

}

return strPrefix+strOutput.replace(/零角零分$/, '整').replace(/零[仟佰拾]/g, '零').replace(/零{2,}/g, '零').replace(/零([亿|万])/g, '$1').replace(/零+元/, '元').replace(/亿零{0,3}万/, '亿').replace(/^元/, "零元");

};

字段脚本

CoreForm.custom_numToCny({total});

字段公式

给字段增加公式之后,填写审批单的时候,就无需录入此字段的值,而是由系统根据公式得到相应的值。常见的公式包括:

  • 取一个字段的值:使用“{”和“}” (注意都是半角)将字段名扩起来,如:{请假天数}

  • 基于数值字段的函数:

    • 加:{字段名1}+{字段名2}
    • 减:{字段名1}-{字段名2}
    • 乘:{单价}*{数量}
    • 除:{总金额}/{数量}
  • 基于表格(子表)中的数值字段的函数:

    • 合计: sum({费用})
    • 平均值:average({费用})
    • 计数: count({物品})
    • 最大值:max({费用})
    • 最小值:min({费用})
    • 金额大写:numToRMB({金额})
  • 基于提交人的系统变量:包括姓名、角色、部门等

    • 提交人的姓名:{applicant.name}
    • 提交人所在部门(当申请人属于多个部门时,为所在主部门的全路径): {applicant.organization.fullname}
    • 提交人所在部门(最底层部门名): {applicant.organization.name}
    • 提交人的角色名: {applicant.roles}
    • 提交人的手机: {applicant.mobile}
    • 提交人的固定电话: {applicant.work_phone}
    • 提交人的职务: {applicant.position}
  • 基于姓名表单字段的系统变量:包括姓名、角色、部门等

    • “报销人”所在部门(当报销人属于多个部门时,为所在主部门的全路径): {报销人}.organization.fullname
    • “报销人”所在部门(最底层部门名): {报销人}.organization.name
    • “报销人”的角色名: {报销人}.roles
    • “报销人”的姓名: {报销人}.name
    • “报销人”的手机: {报销人}.mobile
    • “报销人”的固定电话: {报销人}.work_phone
    • “报销人”的职务: {报销人}.position
  • 基于签批字段的公式使用:

    • 显示此步骤所有意见,含传阅 : {traces.步骤名称}
    • 只显示此步骤的传阅意见: {traces.步骤名称.cc}
对于华炎魔方有疑问??
微信扫描二维码,我们的技术专家会为您解答。

我们的技术专家拥有十年以上的管理软件开发经验,无论您询问有关华炎魔方的功能、定价、实施或任何其他方面的问题,他们都将随时准备为您提供帮助。

华炎魔方

华炎魔方是新一代低代码平台,基于商业智能和模型驱动,可以按照业务部门的需求,轻松便捷地创建智能化、移动化、个性化的应用程序。

© 2020 华炎软件. 保留所有权利.