feat:项目管理-审计内容-优化表格内容编辑、保存、删除功能
This commit is contained in:
182
src/views/pwl/pwlProject/components/EditModal.vue
Normal file
182
src/views/pwl/pwlProject/components/EditModal.vue
Normal file
@@ -0,0 +1,182 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:visible="visible"
|
||||
title="编辑行数据"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
:confirm-loading="loading"
|
||||
width="600px"
|
||||
>
|
||||
<a-form layout="vertical">
|
||||
<template v-for="field in processedFields" :key="field.key">
|
||||
<a-form-item :label="field.title" v-if="!field.children">
|
||||
<template v-if="field.type === 'textarea'">
|
||||
<a-textarea
|
||||
v-model:value="formData[field.dataIndex]"
|
||||
:rows="4"
|
||||
:placeholder="`请输入${field.title}`"
|
||||
/>
|
||||
</template>
|
||||
<template v-else-if="field.dataIndex === 'workPaperIndex'">
|
||||
<a-textarea
|
||||
v-model:value="formData[field.dataIndex]"
|
||||
:rows="4"
|
||||
:placeholder="'每行一个文件,格式为:file_id||文件名||url'"
|
||||
/>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-input
|
||||
v-model:value="formData[field.dataIndex]"
|
||||
:placeholder="`请输入${field.title}`"
|
||||
/>
|
||||
</template>
|
||||
</a-form-item>
|
||||
|
||||
<!-- 处理嵌套字段(如职务下的党内、行政) -->
|
||||
<template v-else-if="field.children">
|
||||
<div class="nested-fields">
|
||||
<div class="field-group-title">{{ field.title }}</div>
|
||||
<div class="field-group-content">
|
||||
<a-form-item
|
||||
v-for="childField in field.children"
|
||||
:key="childField.key"
|
||||
:label="childField.title"
|
||||
class="nested-field-item"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="formData[childField.dataIndex]"
|
||||
:placeholder="`请输入${childField.title}`"
|
||||
/>
|
||||
</a-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch, computed } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
const props = defineProps<{
|
||||
visible: boolean;
|
||||
record: any;
|
||||
fields: any[];
|
||||
}>();
|
||||
|
||||
const emit = defineEmits(['update:visible', 'save']);
|
||||
|
||||
const loading = ref(false);
|
||||
const formData = ref({});
|
||||
|
||||
const hasWorkPaperIndexField = computed(() => {
|
||||
return (props.fields || []).some((field) => {
|
||||
return field?.dataIndex === 'workPaperIndex' || field?.key === 'workPaperIndex';
|
||||
});
|
||||
});
|
||||
|
||||
// 处理字段,将嵌套结构展平
|
||||
const processedFields = computed(() => {
|
||||
const processed: any[] = [];
|
||||
|
||||
props.fields.forEach(field => {
|
||||
if (field.children && Array.isArray(field.children)) {
|
||||
// 处理有子字段的情况(如职务)
|
||||
processed.push({
|
||||
...field,
|
||||
children: field.children.flatMap(child =>
|
||||
child.children && Array.isArray(child.children)
|
||||
? child.children // 如果是多层嵌套,直接取孙子字段
|
||||
: child // 否则就是子字段
|
||||
)
|
||||
});
|
||||
} else {
|
||||
processed.push(field);
|
||||
}
|
||||
});
|
||||
|
||||
return processed;
|
||||
});
|
||||
|
||||
watch(() => props.visible, (visible) => {
|
||||
if (visible && props.record) {
|
||||
// 深拷贝记录数据
|
||||
const recordCopy = JSON.parse(JSON.stringify(props.record));
|
||||
|
||||
// 特殊处理workPaperIndex:如果是对象数组,转换为字符串数组
|
||||
if (hasWorkPaperIndexField.value && recordCopy.workPaperIndex && Array.isArray(recordCopy.workPaperIndex)) {
|
||||
recordCopy.workPaperIndex = recordCopy.workPaperIndex.map(item => {
|
||||
if (typeof item === 'object') {
|
||||
// 如果是对象,转换为字符串格式:file_id||文件名||url
|
||||
return `${item.fileId || ''}||${item.fileName || ''}||${item.fileUrl || ''}`;
|
||||
}
|
||||
return item;
|
||||
}).join('\n');
|
||||
}
|
||||
|
||||
formData.value = recordCopy;
|
||||
}
|
||||
}, { immediate: true });
|
||||
|
||||
const handleOk = () => {
|
||||
if (!formData.value) {
|
||||
message.warning('没有数据可保存');
|
||||
return;
|
||||
}
|
||||
|
||||
// 处理workPaperIndex:将字符串转换回对象数组
|
||||
const dataToSave = JSON.parse(JSON.stringify(formData.value));
|
||||
|
||||
if (hasWorkPaperIndexField.value && dataToSave.workPaperIndex && typeof dataToSave.workPaperIndex === 'string') {
|
||||
const lines = dataToSave.workPaperIndex.split('\n').filter(line => line.trim() !== '');
|
||||
dataToSave.workPaperIndex = lines.map(line => {
|
||||
const parts = line.split('||');
|
||||
if (parts.length >= 3) {
|
||||
return {
|
||||
fileId: parts[0] || '',
|
||||
fileName: parts[1] || '',
|
||||
fileUrl: parts[2] || ''
|
||||
};
|
||||
}
|
||||
return line;
|
||||
});
|
||||
}
|
||||
|
||||
loading.value = true;
|
||||
emit('save', dataToSave);
|
||||
loading.value = false;
|
||||
emit('update:visible', false);
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
emit('update:visible', false);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.nested-fields {
|
||||
margin-bottom: 16px;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 4px;
|
||||
padding: 12px;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.field-group-title {
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.field-group-content {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.nested-field-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user