钉钉老单据改造-前端操作手册（以保证金登记为例）

一、需要后端配合

1.1 配置模板准备工作

1.1.1 删除已有单据（否则无法创建对应的表单）

确认修改单据所属模块，【保证金登记】属于【财务账款模块】，告知相关后端人员帮你删除该单据，否则创建【保证金登记】模板会报如下错误“当前表单在菜单中已存在，请重新命名”
保证金登记属于财务账款模块
在这里插入图片描述

1.1.2 给出对应单据的数据字段对照表（否则无法创建对应的表单）

在这里插入图片描述

二、前端自定义模板配置

2.1 环境准备

仅仅是在配置模板时选择如下配置

域名：与你配合的后端人员的地址（建议）或者（测试）
公司：【模板定义】在配置模板时选择该公司，配置完成后一定要切走，建议切回“测试”

2.2 创建自定义流程表单

在以上工作都完成后进行如下操作

进入“自定义中心”，入口如下所示
新建流程表单

在这里插入图片描述

2.2.1 表单设计

确保浏览器安装了 Vue 插件（自行解决安装），对照【保证金登记】的原型和 UI 设计图（由产品部提供），配置新增页面的样式
在这里插入图片描述

2.2.1.1 修改预置字段

默认情况，预置字段“项目”、“标题”、“单号”是不允许进行修改的，对于预置字段的属性进行修改，这里以“标题”为例，因为原型中“标题”字段需要必填，需要将预置字段设置为可编辑，然后再修改其必填字段的属性具体操作如下：

步骤1：打开开发者调试模式（浏览器 F12）找到 Vue 插件
步骤2：找到<FormDesign>下的 designer下面的widgetList中的列表，列表项对应的就是当前表单设计的每个字段的组成的列表：
步骤3：修改对应的项（以【标题】为例）

3.1 去除预置字段的限制

在这里插入图片描述

3.2 Edit value 修改为 false 然后保存
3.3 将该项的 options 中的 “requireddisabled” 按照上述的修改方式，改为false
此时可以在“表单设计”中对标题的必填属性进行修改了
注意：然后再将3.2 和3.3 中修改的值改回去，即：isprefabricate:true requireddisabled:true ，至此，预置字段的修改完成

2.2.1.2 按照原型和UI配置其他字段

以“保证金性质”为例，它是一个单选按钮且必填，从左侧拉过来一个单选框在右侧进行调整
在这里插入图片描述

【关联表单】的字段的设置注意事项（以收入合同为例）
设置数据过滤条件：支出合同 - 选择项目下除执行方式为订单的采购合同外所有的支出合同（包括执行方式为合同的采购合同）
如下所示：
基础资料相关的需要用【基础档案】 组件（内部单位、客户、供应商除外，这三个还是要选择【关联表单】）

依次拖拽配置其他字段，最终的表单设计如下图所示
在这里插入图片描述

2.2.1.3 预览表单

预览入口：在这里插入图片描述

当表单设计按照原型和UI 配置好之后，点击预览，跟原型和UI做二次确认，最终预览图如下所示
在这里插入图片描述

2.2.1.3 保存需要处理的表单数据到 widgetList.json 中

将上述预览调整好的表单对应的数据列表copy 出来，copy 方式见 2.2.1.1 的步骤2
在这里插入图片描述
将widgetList copy 保存（对应的单据下创建一个config文件夹 xxx/config/widgetList.json）

2.2.2 修改 widgetList.json 最外层数据（所有组件相同的字段）说明

说明：对于预置字段无需处理：【项目】相关信息、【标题】、【单号】、组织信息，只对手动拖拽的组件进行处理即可

2.2.2.1 最外层json 处理

在这里插入图片描述

统一处理字段：deldisabled / copydisabled / isprefabricate 值均改为 true；
prefabricatename ：预置字段，组件的唯一标识符，命名规则【当前单据类型名称_当前字段名称】（比如depositRegister_depositNature）跟茂森确认过无需创建下面代码，直接自己定义自己使用即可。~~该字段处理的前提，需要在 utils/prefabricate.ts 进行对应单据的定义，追加如下所示代码：~~

//保证金登记
export const PREFABRICATE_DEPOSITREGISTER_TYPE = {
  DEPOSITREGISTER_DEPOSITNATURE: "depositRegister_depositNature", //保证金性质
  DEPOSITREGISTER_DEPOSITTYPE: "depositRegister_depositType", //保证金类型
  DEPOSITREGISTER_INCONTRACT: "depositRegister_inContract", //收入合同
  DEPOSITREGISTER_OUTCONTRACT: "depositRegister_outContract", //支出合同
  DEPOSITREGISTER_INTERNALUNIT: "depositRegister_internalUnit", //内部单位
  DEPOSITREGISTER_CUSTOMER: "depositRegister_customer", //客户
  DEPOSITREGISTER_SUPPLIER: "depositRegister_supplier", //供应商
  DEPOSITREGISTER_AMOUNT: "depositRegister_amount", //保证金金额
  DEPOSITREGISTER_DATE: "depositRegister_date", //缴纳日期
  DEPOSITREGISTER_RETURNDATE: "depositRegister_returnDate", //预计返还日期
  DEPOSITREGISTER_MEMO: "depositRegister_memo" //备注
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14

~~每个字段的 prefabricatename 的值取上面对应的 value值即可~~

id 唯一标识，其值可以跟 prefabricatename 保持一致。

2.2.2.2 options 处理(见 2.2.3 各种组件的 options 处理)

在这里插入图片描述

name

当组件不是【关联表单】时，将后端给的对应字段直接赋值即可。
以【保证金金额】字段为例

"name": "D_AMOUNT",
"label": "保证金金额",
1
2

当组件是关联表单时
options 中的 name 的值和 utils/prefabricate.ts 中对应的字段值保持一致
requireddisabled 来控制该组件是否为必选项，是的话改为 true，不是的话就不用管该字段了
releatedSelect中的那name 值为后端字段的关联表单的主键大部分情况下以_billId结尾比如合同列表 name =“V_FK_CONTRACT_ID_billId”

relatedshowprop 中的name 值为后端字段关联表单对应的名称大部分以_NAME结尾比如合同列表 name = “V_FK_CONTRACT_NAME”