提交 379507d7 authored 作者: liuluyu's avatar liuluyu

更新只读状态

上级 c2023d3b
......@@ -21,28 +21,29 @@
<div class="tab-content readonly-content">
<component
:is="getComponent(node.formUrl || node.formListUrl)"
:disabled="true"
:readonly="true"
:disabled="innerDisabled"
:readonly="innerReadonly"
:form-data="getFormData(node.id)"
:current-flow-node="node"
/>
</div>
</a-tab-pane>
<!-- 可编辑选项卡:索引等于 currentNodeIndex 的节点 -->
<!-- 当前节点选项卡:根据disabled/readonly状态决定是否可编辑 -->
<a-tab-pane v-if="editableNode" :key="editableNode.id" :tab="editableNode.name">
<template #tab>
<span>
{{ editableNode.name }}
<a-tag color="green" size="small" class="tab-tag">可编辑</a-tag>
<a-tag v-if="innerDisabled || innerReadonly" color="blue" size="small" class="tab-tag">只读</a-tag>
<a-tag v-else color="green" size="small" class="tab-tag">可编辑</a-tag>
</span>
</template>
<div class="tab-content editable-content">
<component
:is="getComponent(editableNode.formUrl || editableNode.formListUrl)"
:ref="setEditableFormRef"
:disabled="false"
:readonly="false"
:disabled="innerDisabled"
:readonly="innerReadonly"
:form-data="currentFormData"
:current-flow-node="editableNode"
@update:form-data="handleFormDataUpdate"
......@@ -124,6 +125,16 @@
type: String,
default: '',
},
// 表单是否禁用
disabled: {
type: Boolean,
default: false,
},
// 表单是否只读
readonly: {
type: Boolean,
default: false,
},
});
const emit = defineEmits(['update:visible', 'submit', 'close', 'form-data-update', 'register']);
......@@ -165,6 +176,8 @@
const innerExternalFormData = ref<Record<string, any>>(props.externalFormData || {});
const innerTitle = ref<string>(props.title || '表单处理');
const innerProcDefId = ref<string>(props.procDefId || '');
const innerDisabled = ref<boolean>(props.disabled || false);
const innerReadonly = ref<boolean>(props.readonly || false);
// useModalInner receives data written by useModal.openModal
const [registerInner, { setModalProps: innerSetModalProps }] = useModalInner(async (data: any) => {
......@@ -174,6 +187,8 @@
if (data.externalFormData) innerExternalFormData.value = data.externalFormData;
if (data.procDefId) innerProcDefId.value = data.procDefId;
if (data.title) innerTitle.value = data.title;
if (data.disabled !== undefined) innerDisabled.value = !!data.disabled;
if (data.readonly !== undefined) innerReadonly.value = !!data.readonly;
// ensure drawer opens
visibleRef.value = true;
// reset form data for new nodes/data
......@@ -200,11 +215,18 @@
const drawerTitle = computed(() => innerTitle.value || props.title);
const drawerWidth = computed(() => props.width);
// 只读节点:索引小于 currentNodeIndex 的节点
// 只读节点:根据disabled/readonly状态决定
const readonlyNodes = computed(() => {
if (!innerWorkflowNodes.value || innerWorkflowNodes.value.length === 0) {
return [];
}
// 如果设置了disabled或readonly参数,所有节点都视为只读
if (innerDisabled.value || innerReadonly.value) {
console.log('所有节点都设置为只读,因为disabled:', innerDisabled.value, '或readonly:', innerReadonly.value);
return innerWorkflowNodes.value;
}
const idx = innerCurrentNodeIndex.value;
console.log('只读节点 - 当前索引:', idx);
console.log(
......@@ -221,8 +243,14 @@
return nodes;
});
// 可编辑节点:索引等于 currentNodeIndex 的节点
// 可编辑节点:根据disabled/readonly状态决定
const editableNode = computed(() => {
// 如果设置了disabled或readonly参数,不显示可编辑节点
if (innerDisabled.value || innerReadonly.value) {
console.log('不显示可编辑节点,因为disabled:', innerDisabled.value, '或readonly:', innerReadonly.value);
return null;
}
if (!innerWorkflowNodes.value || innerWorkflowNodes.value.length === 0) {
return null;
}
......
......@@ -275,6 +275,9 @@
externalFormData,
title: data?.taskName || '表单',
showFooter: false,
// 设置表单为只读状态
disabled: true,
readonly: true,
});
};
......
......@@ -11,7 +11,7 @@
<a-form ref="formRef" :model="formFields" layout="vertical" class="styled-form">
<!-- 执行状态 -->
<a-form-item label="执行状态" name="executeStatus">
<a-select v-model:value="formFields.executeStatus" placeholder="请选择执行状态">
<a-select v-model:value="formFields.executeStatus" :disabled="disabled || readonly" placeholder="请选择执行状态">
<a-select-option value="0">
<span class="status-option">
<span class="status-indicator pending"></span>
......@@ -42,28 +42,45 @@
<!-- 时间选择区域 -->
<div class="form-row">
<a-form-item label="实际开始时间" name="actualStartTime" class="form-item-half">
<a-date-picker v-model:value="formFields.actualStartTime" placeholder="选择时间" format="YYYY-MM-DD"></a-date-picker>
<a-date-picker
v-model:value="formFields.actualStartTime"
:disabled="disabled || readonly"
placeholder="选择时间"
format="YYYY-MM-DD"
></a-date-picker>
</a-form-item>
<a-form-item label="实际结束时间" name="actualEndTime" class="form-item-half" :rules="endDateRules">
<a-date-picker v-model:value="formFields.actualEndTime" placeholder="选择时间" format="YYYY-MM-DD"></a-date-picker>
<a-date-picker
v-model:value="formFields.actualEndTime"
:disabled="disabled || readonly"
placeholder="选择时间"
format="YYYY-MM-DD"
></a-date-picker>
</a-form-item>
</div>
<!-- 执行记录 -->
<a-form-item label="执行记录" name="executeEcord">
<a-textarea v-model:value="formFields.executeEcord" :rows="3" placeholder="请输入执行记录和详细说明..." show-count :maxlength="500" />
<a-textarea
v-model:value="formFields.executeEcord"
:disabled="disabled || readonly"
:rows="3"
placeholder="请输入执行记录和详细说明..."
show-count
:maxlength="500"
/>
</a-form-item>
<!-- 附件上传 -->
<a-form-item label="相关附件" name="attachments">
<JUpload v-model:value="formFields.attachments" desText="支持扩展名: .rar .zip .doc .docx .pdf .jpg..." />
<JUpload v-model:value="formFields.attachments" :disabled="disabled || readonly" desText="支持扩展名: .rar .zip .doc .docx .pdf .jpg..." />
</a-form-item>
</a-form>
</div>
<!-- 表单底部按钮 -->
<div class="form-footer">
<div v-if="!readonly" class="form-footer">
<a-space :size="12">
<a-button @click="resetForm">重置</a-button>
<a-button type="primary" @click="submitForm">保存</a-button>
......@@ -278,6 +295,12 @@
const submitForm = async () => {
try {
// 只读模式下不允许提交
if (props.readonly) {
message.warning('只读模式下无法提交表单');
return;
}
// 验证表单
try {
await formRef.value.validate();
......@@ -343,6 +366,11 @@
};
const resetForm = () => {
// 只读模式下不允许重置
if (props.readonly) {
message.warning('只读模式下无法重置表单');
return;
}
formRef.value.resetFields();
// 重置为初始化的数据
initFormData();
......@@ -357,7 +385,10 @@
if (props.formData && props.formData.id && Object.keys(props.formData).length > 1) {
console.log('props.formData已有完整数据,直接使用,不再查询接口');
initFormData();
// 只在非只读模式下注册提交回调
if (!props.readonly) {
planFormStore.registerSubmitCallback(submitForm);
}
return;
}
......@@ -382,7 +413,10 @@
}
}
// 只在非只读模式下注册提交回调
if (!props.readonly) {
planFormStore.registerSubmitCallback(submitForm);
}
});
// 监听路由参数变化
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论