|
|
# 流程详情页面自定义字段渲染整理
|
|
|
|
|
|
## 📋 概述
|
|
|
|
|
|
本文档整理了 `/oa/#/flow/detail?module_id=72&flow_id=13469` 页面上关于自定义字段的渲染机制。
|
|
|
|
|
|
## 🏗️ 组件架构
|
|
|
|
|
|
### 1. 页面组件结构
|
|
|
|
|
|
```
|
|
|
detailCommon.vue (主页面组件)
|
|
|
└── DesktopForm.vue (桌面端表单组件)
|
|
|
└── formBuilder.js (字段渲染构建器)
|
|
|
```
|
|
|
|
|
|
### 2. 核心文件位置
|
|
|
|
|
|
- **主页面**: `cz-hjjc-oa/src/views/flow/detailCommon.vue`
|
|
|
- **表单组件**: `cz-hjjc-oa/src/views/flow/DesktopForm.vue`
|
|
|
- **字段构建器**: `cz-hjjc-oa/src/utils/formBuilder.js`
|
|
|
|
|
|
## 🔄 渲染流程
|
|
|
|
|
|
### 1. 数据获取 (`detailCommon.vue`)
|
|
|
|
|
|
```javascript
|
|
|
// getConfig() 方法获取流程配置
|
|
|
async getConfig() {
|
|
|
// 详情页面：获取流程详情
|
|
|
if (/\/detail/.test(this.$route.path) && this.$route.query.flow_id) {
|
|
|
const res = await view(this.$route.query.flow_id);
|
|
|
// 获取字段配置
|
|
|
const { fields } = res?.customModel;
|
|
|
// 获取子表单配置
|
|
|
fields.forEach((field) => {
|
|
|
if (field.sub_custom_model_id) {
|
|
|
getSubForm(field.sub_custom_model_id);
|
|
|
}
|
|
|
});
|
|
|
// 设置字段权限
|
|
|
this.readableFields = this.fields?.map((i) => i.id);
|
|
|
this.writeableFields = this.config?.currentNode?.writeable || [];
|
|
|
}
|
|
|
}
|
|
|
```
|
|
|
|
|
|
### 2. 字段权限处理 (`DesktopForm.vue`)
|
|
|
|
|
|
```364:385:cz-hjjc-oa/src/views/flow/DesktopForm.vue
|
|
|
render(h) {
|
|
|
const authFields = this.fields.map((field) => ({
|
|
|
...field,
|
|
|
_readable:
|
|
|
this.readable.indexOf(field.id) !== -1 || field.type === "label",
|
|
|
_writeable: this.writeable.indexOf(field.id) !== -1,
|
|
|
}));
|
|
|
console.log("authFields",authFields)
|
|
|
if (this.needFlowTitle) {
|
|
|
authFields.unshift({
|
|
|
name: "flow_title",
|
|
|
label: "工作名称",
|
|
|
type: "text",
|
|
|
gs_x: 0,
|
|
|
gs_y: 0,
|
|
|
gs_width: 12,
|
|
|
gs_height: 1,
|
|
|
label_show: 1,
|
|
|
_readable: !this.isFirstNode,
|
|
|
_writeable: this.isFirstNode,
|
|
|
});
|
|
|
}
|
|
|
```
|
|
|
|
|
|
### 3. 字段渲染 (`formBuilder.js`)
|
|
|
|
|
|
```90:114:cz-hjjc-oa/src/utils/formBuilder.js
|
|
|
export default function formBuilder(
|
|
|
device,
|
|
|
info,
|
|
|
h,
|
|
|
row,
|
|
|
pWrite = false,
|
|
|
pReadable = false,
|
|
|
pname
|
|
|
) {
|
|
|
let target = row ? row : this.form;
|
|
|
let formItem;
|
|
|
//下拉选项
|
|
|
let options = [];
|
|
|
if (info?.selection_model) {
|
|
|
options = info.selection_model_items || [];
|
|
|
} else if (info?.stub) {
|
|
|
options = info?.stub?.split(/\r\n/) || [];
|
|
|
}
|
|
|
if (device === "desktop") {
|
|
|
// 可写并且不为查看和子表单下
|
|
|
if (
|
|
|
info._writeable ||
|
|
|
(info.type === "relation" && info._readable) ||
|
|
|
pWrite
|
|
|
) {
|
|
|
```
|
|
|
|
|
|
## 📝 支持的字段类型
|
|
|
|
|
|
### 1. 基础字段类型
|
|
|
|
|
|
#### text (文本输入)
|
|
|
- **可写**: `el-input` 组件
|
|
|
- **只读**: 显示文本值
|
|
|
|
|
|
```116:132:cz-hjjc-oa/src/utils/formBuilder.js
|
|
|
case "text":
|
|
|
formItem = h("el-input", {
|
|
|
props: {
|
|
|
value: target[info.name],
|
|
|
clearable: true,
|
|
|
placeholder: info.help_text,
|
|
|
},
|
|
|
attrs: {
|
|
|
placeholder: info.help_text,
|
|
|
},
|
|
|
on: {
|
|
|
input: (e) => {
|
|
|
this.$set(target, info.name, e);
|
|
|
},
|
|
|
},
|
|
|
});
|
|
|
break;
|
|
|
```
|
|
|
|
|
|
#### textarea (多行文本)
|
|
|
- **可写**: `el-input` type="textarea"
|
|
|
- **只读**: 显示文本值
|
|
|
|
|
|
```133:153:cz-hjjc-oa/src/utils/formBuilder.js
|
|
|
case "textarea":
|
|
|
formItem = h("el-input", {
|
|
|
props: {
|
|
|
type: "textarea",
|
|
|
autosize: {
|
|
|
minRows: 2,
|
|
|
},
|
|
|
value: target[info.name],
|
|
|
clearable: true,
|
|
|
placeholder: info.help_text,
|
|
|
},
|
|
|
attrs: {
|
|
|
placeholder: info.help_text,
|
|
|
},
|
|
|
on: {
|
|
|
input: (e) => {
|
|
|
this.$set(target, info.name, e);
|
|
|
},
|
|
|
},
|
|
|
});
|
|
|
break;
|
|
|
```
|
|
|
|
|
|
#### date (日期选择)
|
|
|
- **可写**: `el-date-picker` type="date"
|
|
|
- **只读**: 格式化显示日期 (YYYY年MM月DD日)
|
|
|
|
|
|
```154:180:cz-hjjc-oa/src/utils/formBuilder.js
|
|
|
case "date":
|
|
|
formItem = h("el-date-picker", {
|
|
|
props: {
|
|
|
type: "date",
|
|
|
"value-format": "yyyy-MM-dd",
|
|
|
format: "yyyy年MM月dd日",
|
|
|
value: target[info.name],
|
|
|
clearable: true,
|
|
|
editable:false,
|
|
|
placeholder: info.help_text,
|
|
|
"picker-options": {
|
|
|
shortcuts: this.shortcuts,
|
|
|
},
|
|
|
},
|
|
|
attrs: {
|
|
|
placeholder: info.help_text,
|
|
|
},
|
|
|
style: {
|
|
|
width: "100%",
|
|
|
},
|
|
|
on: {
|
|
|
input: (e) => {
|
|
|
this.$set(target, info.name, e);
|
|
|
},
|
|
|
},
|
|
|
});
|
|
|
break;
|
|
|
```
|
|
|
|
|
|
#### datetime (日期时间选择)
|
|
|
- **可写**: `el-date-picker` type="datetime"
|
|
|
- **只读**: 格式化显示日期时间 (YYYY年MM月DD日 HH时mm分)
|
|
|
|
|
|
```181:207:cz-hjjc-oa/src/utils/formBuilder.js
|
|
|
case "datetime":
|
|
|
formItem = h("el-date-picker", {
|
|
|
props: {
|
|
|
type: "datetime",
|
|
|
"value-format": "yyyy-MM-dd HH:mm:ss",
|
|
|
format: "yyyy-MM-dd HH:mm",
|
|
|
value: target[info.name],
|
|
|
clearable: true,
|
|
|
editable:false,
|
|
|
placeholder: info.help_text,
|
|
|
"picker-options": {
|
|
|
shortcuts: this.shortcuts,
|
|
|
},
|
|
|
},
|
|
|
style: {
|
|
|
width: "100%",
|
|
|
},
|
|
|
attrs: {
|
|
|
placeholder: info.help_text,
|
|
|
},
|
|
|
on: {
|
|
|
input: (e) => {
|
|
|
this.$set(target, info.name, e);
|
|
|
},
|
|
|
},
|
|
|
});
|
|
|
break;
|
|
|
```
|
|
|
|
|
|
### 2. 选择类型字段
|
|
|
|
|
|
#### select/choice (下拉选择)
|
|
|
- **可写**: `el-select` 组件，支持单选和多选
|
|
|
- **只读**: 显示选项名称（多个用逗号分隔）
|
|
|
|
|
|
```208:263:cz-hjjc-oa/src/utils/formBuilder.js
|
|
|
case "choice":
|
|
|
case "select":
|
|
|
const getSelectValue = () => {
|
|
|
if (!!info.multiple) {
|
|
|
return target[info.name]
|
|
|
? target[info.name]
|
|
|
.toString()
|
|
|
?.split(/,|\|/)
|
|
|
.map((i) => {
|
|
|
return ((isNaN(Number(i)) || !i) ? i : Number(i))
|
|
|
})
|
|
|
: [];
|
|
|
} else {
|
|
|
return (isNaN(Number(target[info.name])) || !target[info.name])
|
|
|
? target[info.name]
|
|
|
: Number(target[info.name]);
|
|
|
}
|
|
|
};
|
|
|
formItem = h(
|
|
|
"el-select",
|
|
|
{
|
|
|
props: {
|
|
|
value: getSelectValue(),
|
|
|
clearable: true,
|
|
|
placeholder: info.help_text,
|
|
|
multiple: !!info.multiple,
|
|
|
// "multiple-limit": info.multiple,
|
|
|
filterable: true,
|
|
|
"value-key": "id",
|
|
|
"reserve-keyword": true,
|
|
|
"allow-create": !!info.is_select2_tag,
|
|
|
"default-first-option": true,
|
|
|
},
|
|
|
style: {
|
|
|
width: "100%",
|
|
|
},
|
|
|
attrs: {
|
|
|
placeholder: info.help_text,
|
|
|
},
|
|
|
on: {
|
|
|
input: (e) => {
|
|
|
this.$set(target, info.name, e.toString());
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
options.map((option) =>
|
|
|
h("el-option", {
|
|
|
key: typeof option === "object" ? option.id : option,
|
|
|
props: {
|
|
|
label: typeof option === "object" ? option.name : option,
|
|
|
value: typeof option === "object" ? option.id : option,
|
|
|
},
|
|
|
})
|
|
|
)
|
|
|
);
|
|
|
break;
|
|
|
```
|
|
|
|
|
|
#### radio (单选)
|
|
|
- **可写**: `el-radio-group` 组件，支持父子级联选择
|
|
|
- **只读**: 用方框+勾号展示所有选项，高亮已选项
|
|
|
- **存储格式**: JSON字符串 `{"parent":"父选项","children":["子选项"]}`
|
|
|
|
|
|
```264:388:cz-hjjc-oa/src/utils/formBuilder.js
|
|
|
case "radio":
|
|
|
// 支持父 radio + 子 radio（单选），子项存储为 JSON（方案 c）
|
|
|
const { parent: radioParent, child: radioChild } = parseNestedRadioStoredValue(target[info.name]);
|
|
|
|
|
|
const nestedOptions = options.map((option) => {
|
|
|
const parsed = parseNestedRadioOption(option);
|
|
|
const label = typeof option === "object" ? option.name : parsed.label;
|
|
|
const value = normalizeRadioValue(label);
|
|
|
const children = typeof option === "string" ? parsed.children : [];
|
|
|
return { option, label, value, children };
|
|
|
});
|
|
|
|
|
|
const onParentChange = (parentValue) => {
|
|
|
const nextParent = normalizeRadioValue(parentValue);
|
|
|
const hit = nestedOptions.find((i) => i.value === nextParent);
|
|
|
if (hit && hit.children && hit.children.length > 0) {
|
|
|
const keepChild = hit.children.includes(radioChild) ? radioChild : "";
|
|
|
this.$set(target, info.name, buildNestedRadioStoredValue(nextParent, keepChild));
|
|
|
} else {
|
|
|
this.$set(target, info.name, nextParent);
|
|
|
}
|
|
|
};
|
|
|
|
|
|
const onChildChange = (parentValue, childValue) => {
|
|
|
this.$set(
|
|
|
target,
|
|
|
info.name,
|
|
|
buildNestedRadioStoredValue(parentValue, normalizeRadioValue(childValue))
|
|
|
);
|
|
|
};
|
|
|
|
|
|
formItem = h(
|
|
|
"el-radio-group",
|
|
|
{
|
|
|
props: {
|
|
|
value: radioParent,
|
|
|
},
|
|
|
attrs: {
|
|
|
placeholder: info.help_text,
|
|
|
},
|
|
|
on: {
|
|
|
input: onParentChange,
|
|
|
},
|
|
|
},
|
|
|
nestedOptions.map((item) => {
|
|
|
const checked = item.value === radioParent;
|
|
|
const showChildren = checked && item.children && item.children.length > 0;
|
|
|
return h(
|
|
|
"el-radio",
|
|
|
{
|
|
|
key: item.value,
|
|
|
props: {
|
|
|
label: item.value,
|
|
|
},
|
|
|
},
|
|
|
[
|
|
|
h(
|
|
|
"span",
|
|
|
{
|
|
|
style: {
|
|
|
color: "rgb(51, 51, 51)",
|
|
|
},
|
|
|
},
|
|
|
item.label
|
|
|
),
|
|
|
showChildren
|
|
|
? h(
|
|
|
"span",
|
|
|
{
|
|
|
style: {
|
|
|
marginLeft: "6px",
|
|
|
color: "rgb(51, 51, 51)",
|
|
|
},
|
|
|
},
|
|
|
"（"
|
|
|
)
|
|
|
: null,
|
|
|
showChildren
|
|
|
? h(
|
|
|
"el-radio-group",
|
|
|
{
|
|
|
style: {
|
|
|
display: "inline-flex",
|
|
|
alignItems: "center",
|
|
|
gap: "10px",
|
|
|
marginLeft: "2px",
|
|
|
marginRight: "2px",
|
|
|
},
|
|
|
props: {
|
|
|
value: radioChild,
|
|
|
},
|
|
|
on: {
|
|
|
input: (v) => onChildChange(item.value, v),
|
|
|
},
|
|
|
},
|
|
|
item.children.map((c) =>
|
|
|
h(
|
|
|
"el-radio",
|
|
|
{
|
|
|
key: `${item.value}__${c}`,
|
|
|
props: {
|
|
|
label: normalizeRadioValue(c),
|
|
|
},
|
|
|
},
|
|
|
c
|
|
|
)
|
|
|
)
|
|
|
)
|
|
|
: null,
|
|
|
showChildren
|
|
|
? h(
|
|
|
"span",
|
|
|
{
|
|
|
style: {
|
|
|
color: "rgb(51, 51, 51)",
|
|
|
},
|
|
|
},
|
|
|
"）"
|
|
|
)
|
|
|
: null,
|
|
|
]
|
|
|
);
|
|
|
})
|
|
|
);
|
|
|
break;
|
|
|
```
|
|
|
|
|
|
### 3. 特殊字段类型
|
|
|
|
|
|
#### budget-source (预算来源)
|
|
|
- **可写**: 使用 `BudgetSourcePickerField` 组件
|
|
|
- **只读**: 显示 `_display` 字段的值
|
|
|
- **存储**: 主字段存储ID，`_display` 字段存储显示文本
|
|
|
|
|
|
```389:407:cz-hjjc-oa/src/utils/formBuilder.js
|
|
|
case "budget-source":
|
|
|
// 可写：hidden input + "选取"按钮 + 弹窗（在独立组件内实现）
|
|
|
formItem = h(BudgetSourcePickerField, {
|
|
|
props: {
|
|
|
fieldName: info.name,
|
|
|
value: target[info.name],
|
|
|
display: target[`${info.name}_display`],
|
|
|
},
|
|
|
on: {
|
|
|
input: (val) => {
|
|
|
this.$set(target, info.name, val);
|
|
|
},
|
|
|
"update:display": (txt) => {
|
|
|
// 用于回显（只读/展示）
|
|
|
this.$set(target, `${info.name}_display`, txt);
|
|
|
},
|
|
|
},
|
|
|
});
|
|
|
break;
|
|
|
```
|
|
|
|
|
|
#### contract-sign (合同签订)
|
|
|
- **可写**: 使用 `ContractSignField` 组件
|
|
|
- **只读**: 显示 `_display` 字段的值
|
|
|
- **功能**: 支持合同签订操作
|
|
|
|
|
|
```408:427:cz-hjjc-oa/src/utils/formBuilder.js
|
|
|
case "contract-sign":
|
|
|
// 合同签订字段：hidden input + "合同签订"按钮 + 弹窗（在独立组件内实现）
|
|
|
formItem = h(ContractSignField, {
|
|
|
props: {
|
|
|
fieldName: info.name,
|
|
|
value: target[info.name],
|
|
|
display: target[`${info.name}_display`],
|
|
|
flowId: this.$route?.query?.flow_id || "",
|
|
|
},
|
|
|
on: {
|
|
|
input: (val) => {
|
|
|
this.$set(target, info.name, val);
|
|
|
},
|
|
|
"update:display": (txt) => {
|
|
|
// 用于回显（只读/展示）
|
|
|
this.$set(target, `${info.name}_display`, txt);
|
|
|
},
|
|
|
},
|
|
|
});
|
|
|
break;
|
|
|
```
|
|
|
|
|
|
#### file (文件上传)
|
|
|
- **可写**: `el-upload` 组件（主表单）或 `vxe-upload`（子表单）
|
|
|
- **只读**: 显示文件列表，可点击查看
|
|
|
- **支持**: 单文件/多文件上传
|
|
|
|
|
|
#### relation-flow (关联流程)
|
|
|
- **可写**: `el-select` 多选，支持搜索和查看关联流程
|
|
|
- **只读**: 显示关联流程的标题链接列表
|
|
|
- **功能**: 支持加载所有相关流程、搜索流程、查看流程详情
|
|
|
|
|
|
```648:857:cz-hjjc-oa/src/utils/formBuilder.js
|
|
|
case "relation-flow":
|
|
|
if (!this.flows[info.name]) {
|
|
|
let extraParam = {}
|
|
|
if (isJSON(info.stub)) {
|
|
|
extraParam = JSON.parse(info.stub)
|
|
|
}
|
|
|
flowList("all", {
|
|
|
page: 1,
|
|
|
page_size: 9999,
|
|
|
is_simple: 1,
|
|
|
custom_model_id: isJSON(info.stub) ? '' : info.stub,
|
|
|
// is_auth: 1,
|
|
|
ids:target[info.name]?target[info.name]:'',
|
|
|
...extraParam
|
|
|
}).then((res) => {
|
|
|
this.$set(this.flows, info.name, res.data.data);
|
|
|
});
|
|
|
}
|
|
|
```
|
|
|
|
|
|
#### relation (关联表单/子表单)
|
|
|
- **可写**: `vxe-table` 表格编辑
|
|
|
- **只读**: 显示子表单数据表格
|
|
|
- **功能**: 支持动态添加/删除子表单行
|
|
|
|
|
|
```858:1016:cz-hjjc-oa/src/utils/formBuilder.js
|
|
|
case "relation":
|
|
|
console.log("123",this.form[info.name])
|
|
|
formItem = h(
|
|
|
"vxe-table",
|
|
|
{
|
|
|
ref: `subForm-${info.name}`,
|
|
|
style: {
|
|
|
"margin-top": "10px",
|
|
|
},
|
|
|
props: {
|
|
|
"min-height": "200px",
|
|
|
border: true,
|
|
|
stripe: true,
|
|
|
data:
|
|
|
this.form[info.name] &&
|
|
|
typeof this.form[info.name] !== "string"
|
|
|
? this.form[info.name]
|
|
|
: [],
|
|
|
"keep-source": true,
|
|
|
"column-config": { resizable: true },
|
|
|
"show-overflow": true,
|
|
|
"edit-rules": info._writeable
|
|
|
? this.subRules[`${info.name}_rules`]
|
|
|
: {},
|
|
|
"edit-config": info._writeable
|
|
|
? {
|
|
|
trigger: "click",
|
|
|
mode: "row",
|
|
|
showStatus: false,
|
|
|
isHover: true,
|
|
|
autoClear: false,
|
|
|
}
|
|
|
: {},
|
|
|
},
|
|
|
on: {
|
|
|
"edit-closed": ({ row, column }) => {
|
|
|
const $table = this.$refs[`subForm-${info.name}`];
|
|
|
if ($table) {
|
|
|
this.$set(
|
|
|
this.form,
|
|
|
info.name,
|
|
|
this.$refs[`subForm-${info.name}`].tableData
|
|
|
);
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
[
|
|
|
info._writeable
|
|
|
? h(
|
|
|
"vxe-column",
|
|
|
{
|
|
|
props: {
|
|
|
width: 56,
|
|
|
align: "center",
|
|
|
},
|
|
|
scopedSlots: {
|
|
|
default: ({ row }) => {
|
|
|
return h("el-button", {
|
|
|
slot: "default",
|
|
|
style: {
|
|
|
padding: "9px",
|
|
|
},
|
|
|
props: {
|
|
|
type: "danger",
|
|
|
size: "small",
|
|
|
icon: "el-icon-minus",
|
|
|
},
|
|
|
on: {
|
|
|
click: async (_) => {
|
|
|
const $table =
|
|
|
this.$refs[`subForm-${info.name}`];
|
|
|
if ($table) {
|
|
|
await $table.remove(row);
|
|
|
this.form[info.name] =
|
|
|
$table.getTableData()?.tableData;
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
});
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
[
|
|
|
h("el-button", {
|
|
|
slot: "header",
|
|
|
style: {
|
|
|
padding: "9px",
|
|
|
},
|
|
|
props: {
|
|
|
type: "primary",
|
|
|
size: "small",
|
|
|
icon: "el-icon-plus",
|
|
|
},
|
|
|
on: {
|
|
|
click: async (_) => {
|
|
|
const $table = this.$refs[`subForm-${info.name}`];
|
|
|
if ($table) {
|
|
|
const record = {};
|
|
|
// 确保子表数据为数组，避免空值时调用 unshift 报错
|
|
|
if (!Array.isArray(this.form[info.name])) {
|
|
|
this.$set(this.form, info.name, []);
|
|
|
}
|
|
|
this.form[info.name].unshift(record);
|
|
|
// 临时数据不好验证长度
|
|
|
// const { row: newRow } = await $table.insert(
|
|
|
// record
|
|
|
// );
|
|
|
await this.$nextTick();
|
|
|
await $table.setEditRow(record);
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
}),
|
|
|
]
|
|
|
)
|
|
|
: "",
|
|
|
...this.subForm
|
|
|
.get(info.sub_custom_model_id)
|
|
|
?.customModel?.fields?.map((subField, subIndex) =>
|
|
|
h("vxe-column", {
|
|
|
props: {
|
|
|
field: subField.name,
|
|
|
title: subField.label,
|
|
|
align: "center",
|
|
|
"min-width": "180",
|
|
|
"edit-render": {},
|
|
|
},
|
|
|
scopedSlots: {
|
|
|
edit: ({ row: myrow }) => {
|
|
|
return formBuilder.bind(this)(
|
|
|
device,
|
|
|
subField,
|
|
|
h,
|
|
|
myrow,
|
|
|
info._writeable,
|
|
|
false
|
|
|
);
|
|
|
},
|
|
|
[["file", "choices", "choice", "select", "radio"].indexOf(
|
|
|
subField.type
|
|
|
) !== -1
|
|
|
? "default"
|
|
|
: false]: ({ row: myrow }) => {
|
|
|
return formBuilder.bind(this)(
|
|
|
device,
|
|
|
subField,
|
|
|
h,
|
|
|
myrow,
|
|
|
false,
|
|
|
true
|
|
|
);
|
|
|
},
|
|
|
},
|
|
|
})
|
|
|
),
|
|
|
]
|
|
|
);
|
|
|
break;
|
|
|
```
|
|
|
|
|
|
### 4. 展示类型字段
|
|
|
|
|
|
#### label (标签)
|
|
|
- 仅用于展示文本，不可编辑
|
|
|
|
|
|
```619:629:cz-hjjc-oa/src/utils/formBuilder.js
|
|
|
case "label":
|
|
|
formItem = h(
|
|
|
"div",
|
|
|
{
|
|
|
props: {
|
|
|
type: "primary",
|
|
|
},
|
|
|
},
|
|
|
info.label
|
|
|
);
|
|
|
break;
|
|
|
```
|
|
|
|
|
|
#### static (静态链接)
|
|
|
- 显示为可点击的链接
|
|
|
|
|
|
```630:644:cz-hjjc-oa/src/utils/formBuilder.js
|
|
|
case "static":
|
|
|
formItem = h(
|
|
|
"el-link",
|
|
|
{
|
|
|
props: {
|
|
|
type: "primary",
|
|
|
},
|
|
|
attrs: {
|
|
|
href: target[info.name],
|
|
|
target: "_blank",
|
|
|
},
|
|
|
},
|
|
|
info.label
|
|
|
);
|
|
|
break;
|
|
|
```
|
|
|
|
|
|
#### hr (分隔线)
|
|
|
- 显示为分隔线
|
|
|
|
|
|
```645:647:cz-hjjc-oa/src/utils/formBuilder.js
|
|
|
case "hr":
|
|
|
formItem = h("el-divider", {}, info.label);
|
|
|
break;
|
|
|
```
|
|
|
|
|
|
## 🔐 字段权限控制
|
|
|
|
|
|
### 权限类型
|
|
|
|
|
|
1. **可读字段** (`_readable`): 字段可见，但不可编辑
|
|
|
2. **可写字段** (`_writeable`): 字段可见且可编辑
|
|
|
|
|
|
### 权限判断逻辑
|
|
|
|
|
|
```364:370:cz-hjjc-oa/src/views/flow/DesktopForm.vue
|
|
|
const authFields = this.fields.map((field) => ({
|
|
|
...field,
|
|
|
_readable:
|
|
|
this.readable.indexOf(field.id) !== -1 || field.type === "label",
|
|
|
_writeable: this.writeable.indexOf(field.id) !== -1,
|
|
|
}));
|
|
|
```
|
|
|
|
|
|
- `label` 类型字段默认可读
|
|
|
- 其他字段根据节点配置的 `readable` 和 `writeable` 字段ID列表判断
|
|
|
|
|
|
### 详情页权限设置
|
|
|
|
|
|
```576:579:cz-hjjc-oa/src/views/flow/detailCommon.vue
|
|
|
this.readableFields = /\/detail/.test(this.$route.path)
|
|
|
? this.fields?.map((i) => i.id)
|
|
|
: this.config?.currentNode?.readable || [];
|
|
|
this.writeableFields = this.config?.currentNode?.writeable || [];
|
|
|
```
|
|
|
|
|
|
- **详情页**: 所有字段可读，无可写字段
|
|
|
- **待办页**: 根据当前节点的 `readable` 和 `writeable` 配置
|
|
|
|
|
|
## ✍️ 会签字段显示
|
|
|
|
|
|
### 会签数据获取
|
|
|
|
|
|
```346:362:cz-hjjc-oa/src/views/flow/DesktopForm.vue
|
|
|
logs: {
|
|
|
handler: function (newVal) {
|
|
|
if (newVal && newVal instanceof Array && newVal.length > 0) {
|
|
|
this.jointlySignLog = newVal.filter(log => {
|
|
|
try {
|
|
|
JSON.parse(log.data)
|
|
|
return log.is_jointly_sign && /custom_field_id/g.test(log.data)
|
|
|
} catch (e) {
|
|
|
return false
|
|
|
}
|
|
|
})
|
|
|
} else {
|
|
|
this.jointlySignLog = []
|
|
|
}
|
|
|
},
|
|
|
immediate: true
|
|
|
}
|
|
|
```
|
|
|
|
|
|
### 会签字段渲染
|
|
|
|
|
|
```1435:1536:cz-hjjc-oa/src/utils/formBuilder.js
|
|
|
if (formItem) {
|
|
|
let jointlySignContent = [];
|
|
|
let isJointly = false;
|
|
|
this.jointlySignLog.forEach((log) => {
|
|
|
const data = JSON.parse(log.data);
|
|
|
Object.entries(data)?.forEach(([key, value]) => {
|
|
|
if (
|
|
|
value.hasOwnProperty("custom_field_id") &&
|
|
|
value["custom_field_id"] === info.id
|
|
|
) {
|
|
|
isJointly = !!log.is_jointly_sign;
|
|
|
if (log.status > 0 && log.user) {
|
|
|
// 对于 budget-source 类型字段，优先显示后端返回的 _display 值
|
|
|
let displayValue = value.value;
|
|
|
if (info.type === 'budget-source') {
|
|
|
// 优先使用主表字段的 _display（与主表字段展示一致）
|
|
|
const displayFieldName = info.name + '_display';
|
|
|
const mainDisplayValue = target[displayFieldName] || '';
|
|
|
if (mainDisplayValue) {
|
|
|
displayValue = mainDisplayValue;
|
|
|
} else if (displayValue) {
|
|
|
// 如果没有 _display，尝试识别并屏蔽 JSON（包括双重编码）
|
|
|
const strValue = String(displayValue);
|
|
|
// 尝试解析 JSON（可能是一层或两层编码）
|
|
|
let isJson = false;
|
|
|
try {
|
|
|
const parsed1 = JSON.parse(strValue);
|
|
|
if (typeof parsed1 === 'object' || Array.isArray(parsed1)) {
|
|
|
isJson = true;
|
|
|
} else if (typeof parsed1 === 'string') {
|
|
|
// 双重编码：第一层解析出来是字符串，再试一次
|
|
|
try {
|
|
|
const parsed2 = JSON.parse(parsed1);
|
|
|
if (typeof parsed2 === 'object' || Array.isArray(parsed2)) {
|
|
|
isJson = true;
|
|
|
}
|
|
|
} catch (e2) {
|
|
|
// 不是双重编码的 JSON
|
|
|
}
|
|
|
}
|
|
|
} catch (e) {
|
|
|
// 不是 JSON 字符串
|
|
|
}
|
|
|
// 如果是 JSON（包括双重编码），不显示
|
|
|
if (isJson || strValue.trim().startsWith('{') || strValue.trim().startsWith('[')) {
|
|
|
displayValue = ''; // 不显示原始 JSON
|
|
|
} else if (typeof displayValue === 'object' || Array.isArray(displayValue)) {
|
|
|
displayValue = ''; // 不显示对象或数组
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
jointlySignContent.push(
|
|
|
h("div", [
|
|
|
h("span", displayValue),
|
|
|
h("br"),
|
|
|
info.is_sign
|
|
|
? log.user?.sign_file?.url
|
|
|
? h("div", {
|
|
|
style: {
|
|
|
display: "flex",
|
|
|
"align-items": "center",
|
|
|
gap: "8px",
|
|
|
}
|
|
|
}, [
|
|
|
h("el-image", {
|
|
|
style: {
|
|
|
"max-height": "80px",
|
|
|
"max-width": "100px",
|
|
|
display: "block",
|
|
|
},
|
|
|
props: {
|
|
|
src: log.user.sign_file.url,
|
|
|
fit: "contain",
|
|
|
alt: log.user?.name || "",
|
|
|
"preview-src-list": [log.user.sign_file.url],
|
|
|
lazy: false,
|
|
|
},
|
|
|
attrs: {
|
|
|
src: log.user.sign_file.url,
|
|
|
},
|
|
|
}),
|
|
|
h(
|
|
|
"span",
|
|
|
{
|
|
|
style: {
|
|
|
"font-size": "16px",
|
|
|
color: "#000",
|
|
|
}
|
|
|
},
|
|
|
log.updated_at
|
|
|
? this.$moment(log.updated_at).format("YYYY年MM月DD日")
|
|
|
: ""
|
|
|
),
|
|
|
])
|
|
|
: h("span", log.user?.name || "")
|
|
|
: "",
|
|
|
])
|
|
|
);
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
```
|
|
|
|
|
|
### 签名显示逻辑
|
|
|
|
|
|
```1587:1672:cz-hjjc-oa/src/utils/formBuilder.js
|
|
|
(() => {
|
|
|
// 检查 is_sign 是否为真值（支持 1, true, "1" 等）
|
|
|
if (info.is_sign && (info.is_sign === 1 || info.is_sign === true || info.is_sign === "1")) {
|
|
|
let log = null;
|
|
|
|
|
|
// 方法1: 从 jointlySignLog 中查找（检查所有字段）
|
|
|
if (this.jointlySignLog && this.jointlySignLog.length > 0) {
|
|
|
log = this.jointlySignLog.find((log) => {
|
|
|
if (log.status > 0 && log.user && log.user.sign_file && log.user.sign_file.url) {
|
|
|
try {
|
|
|
const data = JSON.parse(log.data);
|
|
|
// 检查 data 中是否有匹配当前字段的条目
|
|
|
return Object.values(data).some(
|
|
|
(value) =>
|
|
|
value &&
|
|
|
typeof value === 'object' &&
|
|
|
value.custom_field_id === info.id
|
|
|
);
|
|
|
} catch (e) {
|
|
|
return false;
|
|
|
}
|
|
|
}
|
|
|
return false;
|
|
|
});
|
|
|
}
|
|
|
|
|
|
// 方法2: 如果没找到，从 this.logs 中查找（必须匹配字段ID和类型）
|
|
|
if (!log && this.logs && this.logs.length > 0) {
|
|
|
log = this.logs.find(
|
|
|
(log) =>
|
|
|
log.status > 0 &&
|
|
|
log.user &&
|
|
|
log.user.sign_file &&
|
|
|
log.user.sign_file.url &&
|
|
|
log.node?.fields?.findIndex(
|
|
|
(field) =>
|
|
|
field?.field_id === info.id &&
|
|
|
field.type === "write"
|
|
|
) !== -1
|
|
|
);
|
|
|
}
|
|
|
|
|
|
// 只有当找到匹配当前字段的log时才显示
|
|
|
if (log && log.status > 0 && log.user && log.user.sign_file && log.user.sign_file.url) {
|
|
|
return h("div", {
|
|
|
style: {
|
|
|
"margin-top": "8px",
|
|
|
display: "flex",
|
|
|
"align-items": "center",
|
|
|
gap: "8px",
|
|
|
}
|
|
|
}, [
|
|
|
h("el-image", {
|
|
|
style: {
|
|
|
"max-height": "80px",
|
|
|
"max-width": "100px",
|
|
|
display: "block",
|
|
|
},
|
|
|
props: {
|
|
|
src: log.user.sign_file.url,
|
|
|
fit: "contain",
|
|
|
alt: log.user?.name || "",
|
|
|
"preview-src-list": [log.user.sign_file.url],
|
|
|
lazy: false,
|
|
|
},
|
|
|
attrs: {
|
|
|
src: log.user.sign_file.url,
|
|
|
},
|
|
|
}),
|
|
|
h(
|
|
|
"div",
|
|
|
{
|
|
|
style: {
|
|
|
"font-size": "16px",
|
|
|
color: "#000",
|
|
|
}
|
|
|
},
|
|
|
log.updated_at
|
|
|
? this.$moment(log.updated_at).format("YYYY年MM月DD日")
|
|
|
: ""
|
|
|
),
|
|
|
]);
|
|
|
}
|
|
|
}
|
|
|
return null;
|
|
|
})(),
|
|
|
```
|
|
|
|
|
|
## 📐 字段布局
|
|
|
|
|
|
### Grid布局系统
|
|
|
|
|
|
字段使用 CSS Grid 布局，通过以下属性控制位置：
|
|
|
|
|
|
- `gs_x`: 列起始位置
|
|
|
- `gs_y`: 行起始位置
|
|
|
- `gs_width`: 列跨度
|
|
|
- `gs_height`: 行跨度
|
|
|
|
|
|
```1551:1562:cz-hjjc-oa/src/utils/formBuilder.js
|
|
|
style: {
|
|
|
// +1为了工作标题往下顺延
|
|
|
"grid-column-start": info.gs_x + 1,
|
|
|
"grid-column-end": info.gs_x + 1 + info.gs_width,
|
|
|
"grid-row-start":
|
|
|
info.gs_y + 1 + (info.name === "flow_title" ? 0 : 1),
|
|
|
"grid-row-end":
|
|
|
info.gs_y +
|
|
|
1 +
|
|
|
(info.name === "flow_title" ? 0 : 1) +
|
|
|
info.gs_height,
|
|
|
},
|
|
|
```
|
|
|
|
|
|
## 🔧 自定义脚本支持
|
|
|
|
|
|
### 脚本注入
|
|
|
|
|
|
```321:338:cz-hjjc-oa/src/views/flow/DesktopForm.vue
|
|
|
scriptContent(newVal) {
|
|
|
if (newVal) {
|
|
|
try {
|
|
|
// 使用 $nextTick 确保 DOM 已经渲染完成
|
|
|
this.$nextTick(() => {
|
|
|
try {
|
|
|
this.installSafeEventListenerGuard();
|
|
|
new Function(newVal).bind(this)();
|
|
|
} catch (err) {
|
|
|
console.error('脚本执行错误:', err);
|
|
|
// 不阻止页面正常使用，只记录错误
|
|
|
}
|
|
|
});
|
|
|
} catch (err) {
|
|
|
console.error('脚本编译错误:', err);
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
```
|
|
|
|
|
|
- **新建/编辑**: 使用 `js` 脚本
|
|
|
- **详情查看**: 使用 `view_js` 脚本
|
|
|
|
|
|
### 安全防护
|
|
|
|
|
|
```234:268:cz-hjjc-oa/src/views/flow/DesktopForm.vue
|
|
|
installSafeEventListenerGuard() {
|
|
|
if (window.__oa_safe_listener_guard_installed) return;
|
|
|
window.__oa_safe_listener_guard_installed = true;
|
|
|
|
|
|
const map = new WeakMap();
|
|
|
const origAdd = EventTarget && EventTarget.prototype && EventTarget.prototype.addEventListener;
|
|
|
const origRemove = EventTarget && EventTarget.prototype && EventTarget.prototype.removeEventListener;
|
|
|
if (!origAdd || !origRemove) return;
|
|
|
|
|
|
EventTarget.prototype.addEventListener = function (type, listener, options) {
|
|
|
if (typeof listener === "function") {
|
|
|
let wrapped = map.get(listener);
|
|
|
if (!wrapped) {
|
|
|
wrapped = function (...args) {
|
|
|
try {
|
|
|
return listener.apply(this, args);
|
|
|
} catch (e) {
|
|
|
console.error("[OA Custom Script] event listener error:", e);
|
|
|
}
|
|
|
};
|
|
|
map.set(listener, wrapped);
|
|
|
}
|
|
|
return origAdd.call(this, type, wrapped, options);
|
|
|
}
|
|
|
return origAdd.call(this, type, listener, options);
|
|
|
};
|
|
|
|
|
|
EventTarget.prototype.removeEventListener = function (type, listener, options) {
|
|
|
if (typeof listener === "function") {
|
|
|
const wrapped = map.get(listener);
|
|
|
return origRemove.call(this, type, wrapped || listener, options);
|
|
|
}
|
|
|
return origRemove.call(this, type, listener, options);
|
|
|
};
|
|
|
},
|
|
|
```
|
|
|
|
|
|
## 📊 数据流
|
|
|
|
|
|
### 1. 字段配置获取
|
|
|
|
|
|
```
|
|
|
API调用 (view/preConfig/preDeal)
|
|
|
↓
|
|
|
获取 customModel.fields
|
|
|
↓
|
|
|
获取子表单配置 (subForm)
|
|
|
↓
|
|
|
设置字段权限 (readableFields/writeableFields)
|
|
|
```
|
|
|
|
|
|
### 2. 字段渲染
|
|
|
|
|
|
```
|
|
|
DesktopForm 接收 fields 和权限
|
|
|
↓
|
|
|
遍历 fields，添加 _readable/_writeable
|
|
|
↓
|
|
|
调用 formBuilder 渲染每个字段
|
|
|
↓
|
|
|
根据字段类型和权限选择组件
|
|
|
```
|
|
|
|
|
|
### 3. 数据绑定
|
|
|
|
|
|
```
|
|
|
form 对象存储字段值
|
|
|
↓
|
|
|
通过 this.$set 实现响应式更新
|
|
|
↓
|
|
|
字段值同步到 form[field.name]
|
|
|
```
|
|
|
|
|
|
## 📝 特殊处理
|
|
|
|
|
|
### 1. budget-source 字段
|
|
|
|
|
|
- 存储主值和显示值分离
|
|
|
- 主值存储在 `field.name`
|
|
|
- 显示值存储在 `field.name + '_display'`
|
|
|
- 会签时优先使用 `_display` 字段
|
|
|
|
|
|
### 2. radio 父子级联
|
|
|
|
|
|
- 支持格式：`父选项[子选项1,子选项2]`
|
|
|
- 存储格式：`{"parent":"父选项","children":["子选项"]}`
|
|
|
- 只读模式下用方框+勾号展示
|
|
|
|
|
|
### 3. 关联流程字段
|
|
|
|
|
|
- 支持延迟加载所有流程
|
|
|
- 支持搜索和过滤
|
|
|
- 每个选项可跳转到详情页查看
|
|
|
|
|
|
### 4. 文件上传
|
|
|
|
|
|
- 主表单使用 `el-upload`
|
|
|
- 子表单使用 `vxe-upload`
|
|
|
- 支持多文件上传（最多20个）
|
|
|
- 文件大小限制由 `uploadSize` 配置
|
|
|
|
|
|
## 🎯 总结
|
|
|
|
|
|
流程详情页面的自定义字段渲染系统具有以下特点：
|
|
|
|
|
|
1. **类型丰富**: 支持15+种字段类型，覆盖常用表单需求
|
|
|
2. **权限精细**: 支持字段级别的读写权限控制
|
|
|
3. **布局灵活**: 基于Grid布局，支持任意字段位置和大小
|
|
|
4. **功能强大**: 支持会签、签名、关联等复杂场景
|
|
|
5. **扩展性好**: 支持自定义脚本扩展功能
|
|
|
|
|
|
该系统通过组件化和配置化的方式，实现了高度灵活的表单字段渲染机制。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
