chore(config): 添加项目配置文件和隐私协议
- 新增 .editorconfig 文件统一代码风格配置 - 新增 .env 环境变量配置文件 - 添加开发和生产环境的环境变量配置 - 配置 ESLint 忽略规则文件 - 设置代码检查配置文件 .eslintrc.js - 添加 Git 忽略文件规则 - 创建 Prettier 格式化忽略规则 - 添加隐私政策和服务协议HTML文件 - 实现访问密钥编辑组件基础结构
This commit is contained in:
296
src/views/pwl/pwlProject/components/EditModal.vue
Normal file
296
src/views/pwl/pwlProject/components/EditModal.vue
Normal file
@@ -0,0 +1,296 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:visible="visible"
|
||||
title="编辑行数据"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
:confirm-loading="loading"
|
||||
width="600px"
|
||||
>
|
||||
<template #title>
|
||||
<div class="modal-title">
|
||||
<span>编辑行数据</span>
|
||||
<a-tag v-if="displayRecords.length > 1" color="blue" class="ml-2">
|
||||
同步编辑 {{ displayRecords.length }} 条
|
||||
</a-tag>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<a-alert
|
||||
v-if="displayRecords.length > 1"
|
||||
type="info"
|
||||
show-icon
|
||||
style="margin-bottom: 12px"
|
||||
:message="`已选择 ${displayRecords.length} 条记录，将把当前修改同步到这些记录`"
|
||||
/>
|
||||
<a-list
|
||||
v-if="displayRecords.length > 1"
|
||||
size="small"
|
||||
bordered
|
||||
:data-source="displayRecords"
|
||||
style="margin-bottom: 12px; max-height: 160px; overflow-y: auto"
|
||||
>
|
||||
<template #renderItem="{ item, index }">
|
||||
<a-list-item
|
||||
:class="['record-item', { active: index === selectedRecordIndex }]"
|
||||
@click="selectRecord(index)"
|
||||
>
|
||||
<span class="record-label">#{{ index + 1 }}</span>
|
||||
</a-list-item>
|
||||
</template>
|
||||
</a-list>
|
||||
|
||||
<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="activeFormData[field.dataIndex]"
|
||||
:rows="4"
|
||||
:placeholder="`请输入${field.title}`"
|
||||
/>
|
||||
</template>
|
||||
<template v-else-if="field.dataIndex === 'workPaperIndex'">
|
||||
<a-textarea
|
||||
v-model:value="activeFormData[field.dataIndex]"
|
||||
:rows="4"
|
||||
:placeholder="'每行一个文件，格式为：file_id||文件名||url'"
|
||||
/>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-input
|
||||
v-model:value="activeFormData[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="activeFormData[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[];
|
||||
records?: any[];
|
||||
}>();
|
||||
|
||||
const emit = defineEmits(['update:visible', 'save']);
|
||||
|
||||
const loading = ref(false);
|
||||
const formDataList = ref<any[]>([]);
|
||||
const selectedRecordIndex = ref(0);
|
||||
|
||||
const displayRecords = computed(() => {
|
||||
if (props.records && Array.isArray(props.records) && props.records.length) {
|
||||
return props.records;
|
||||
}
|
||||
if (props.record) return [props.record];
|
||||
return [];
|
||||
});
|
||||
|
||||
const transformRecordToFormData = (record: any) => {
|
||||
if (!record) return {};
|
||||
const recordCopy = JSON.parse(JSON.stringify(record));
|
||||
|
||||
if (
|
||||
hasWorkPaperIndexField.value &&
|
||||
recordCopy.workPaperIndex &&
|
||||
Array.isArray(recordCopy.workPaperIndex)
|
||||
) {
|
||||
recordCopy.workPaperIndex = recordCopy.workPaperIndex
|
||||
.map((item: any) => {
|
||||
if (typeof item === 'object') {
|
||||
return `${item.fileId || ''}||${item.fileName || ''}||${item.fileUrl || ''}`;
|
||||
}
|
||||
return item;
|
||||
})
|
||||
.join('\n');
|
||||
}
|
||||
|
||||
return recordCopy;
|
||||
};
|
||||
|
||||
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) {
|
||||
selectedRecordIndex.value = 0;
|
||||
formDataList.value = displayRecords.value.map((rec) =>
|
||||
transformRecordToFormData(rec)
|
||||
);
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
const handleOk = () => {
|
||||
if (!formDataList.value || formDataList.value.length === 0) {
|
||||
message.warning('没有数据可保存');
|
||||
return;
|
||||
}
|
||||
|
||||
// 处理workPaperIndex：将字符串转换回对象数组
|
||||
const dataToSave = formDataList.value.map((item) => {
|
||||
const cloned = JSON.parse(JSON.stringify(item || {}));
|
||||
if (hasWorkPaperIndexField.value && cloned.workPaperIndex && typeof cloned.workPaperIndex === 'string') {
|
||||
const lines = cloned.workPaperIndex.split('\n').filter((line: string) => line.trim() !== '');
|
||||
cloned.workPaperIndex = lines.map((line: string) => {
|
||||
const parts = line.split('||');
|
||||
if (parts.length >= 3) {
|
||||
return {
|
||||
fileId: parts[0] || '',
|
||||
fileName: parts[1] || '',
|
||||
fileUrl: parts[2] || ''
|
||||
};
|
||||
}
|
||||
return line;
|
||||
});
|
||||
}
|
||||
return cloned;
|
||||
});
|
||||
|
||||
loading.value = true;
|
||||
emit('save', dataToSave);
|
||||
loading.value = false;
|
||||
emit('update:visible', false);
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
emit('update:visible', false);
|
||||
};
|
||||
|
||||
const selectRecord = (index: number) => {
|
||||
if (index < 0 || index >= displayRecords.value.length) return;
|
||||
selectedRecordIndex.value = index;
|
||||
if (!formDataList.value[index]) {
|
||||
formDataList.value[index] = transformRecordToFormData(
|
||||
displayRecords.value[index]
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const activeFormData = computed({
|
||||
get() {
|
||||
if (!displayRecords.value.length) return {};
|
||||
if (!formDataList.value[selectedRecordIndex.value]) {
|
||||
formDataList.value[selectedRecordIndex.value] = transformRecordToFormData(
|
||||
displayRecords.value[selectedRecordIndex.value]
|
||||
);
|
||||
}
|
||||
return formDataList.value[selectedRecordIndex.value] || {};
|
||||
},
|
||||
set(val) {
|
||||
if (!displayRecords.value.length) return;
|
||||
formDataList.value[selectedRecordIndex.value] = val || {};
|
||||
}
|
||||
});
|
||||
</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;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.record-label {
|
||||
display: inline-block;
|
||||
width: 36px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.record-text {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.record-item {
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.record-item:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.record-item.active {
|
||||
background-color: #e6f7ff;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user