开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 钉钉老单据改造-前端操作手册（以保证金登记为例） -> 正文阅读

[JavaScript知识库]钉钉老单据改造-前端操作手册（以保证金登记为例）

一、需要后端配合

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" //备注
};

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

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

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

在这里插入图片描述

name

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

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

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

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