<template>
|
<el-dialog v-model="centerDialogVisible" title="文档管理" width="500" center>
|
<el-form
|
ref="ruleFormRef"
|
style="max-width: 600px"
|
:model="ruleForm"
|
:rules="rules"
|
label-width="auto"
|
>
|
<el-form-item label="名称" prop="name">
|
<el-input v-model="ruleForm.name" placeholder="请输入文档名称" />
|
</el-form-item>
|
<el-form-item label="请输入文档类型" prop="type">
|
<el-select v-model="ruleForm.type" placeholder="请输入文档类型">
|
<el-option label="合同" value="合同" />
|
<el-option label="报告" value="报告" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="请输入文档状态" prop="status">
|
<el-select v-model="ruleForm.status" placeholder="请输入文档状态">
|
<el-option
|
v-for="option in options"
|
:key="option.value"
|
:label="option.label"
|
:value="option.value"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<el-row>
|
<el-col :span="24" style="text-align: right">
|
<el-button @click="centerDialogVisible = false">取 消</el-button>
|
<el-button type="primary" @click="submit"> 确 定 </el-button>
|
</el-col>
|
</el-row>
|
</template>
|
<fileUpload
|
ref="fileUploadRef"
|
:fileSize="1024"
|
:fileType="['pdf', 'docx', 'txt', 'xlsx', 'pptx....']"
|
:limit="10"
|
v-model:modelValue="modelValue"
|
/>
|
</el-dialog>
|
</template>
|
|
<script setup>
|
import { ref, watch } from "vue";
|
import { addOrEditArchive } from "@/api/archiveManagement";
|
import fileUpload from "@/components/FileUpload/index.vue";
|
import { ElMessage } from "element-plus";
|
|
const centerDialogVisible = defineModel("centerDialogVisible", {
|
type: Boolean,
|
default: false,
|
});
|
|
const props = defineProps({
|
row: {
|
type: Object,
|
default: () => ({}),
|
},
|
});
|
const copyFormData = (data) => {
|
return JSON.parse(JSON.stringify(data));
|
};
|
// 初始化表单数据的辅助函数
|
const initFormData = (rowData) => {
|
if (rowData && rowData.id) {
|
return copyFormData(rowData);
|
}
|
return {
|
name: "",
|
type: "",
|
status: "",
|
storageBlobDTO: [], // 确保 storageBlobDTO 是一个数组
|
};
|
};
|
|
// 初始化表单数据
|
const ruleFormRef = ref(null);
|
const ruleForm = ref(initFormData(props.row));
|
const copyForm = ref();
|
// 监听 row 的变化，更新 ruleForm
|
watch(
|
() => props.row,
|
(newRow) => {
|
copyForm.value = initFormData(newRow);
|
ruleForm.value = JSON.parse(JSON.stringify(copyForm.value));
|
},
|
{ deep: true }
|
);
|
const rules = {
|
name: [{ required: true, message: "请输入文档名称", trigger: "blur" }],
|
type: [{ required: true, message: "请选择文档类型", trigger: "blur" }],
|
status: [{ required: true, message: "请选择文档状态", trigger: "blur" }],
|
};
|
const fileUploadRef = ref(null);
|
const initForm = () => {
|
ruleForm.value = {}
|
fileUploadRef.value.init()
|
};
|
const editForm = (val) => {
|
ruleForm.value = copyForm.value;
|
nextTick(() => {
|
fileUploadRef.value.editInit(val);
|
|
});
|
};
|
defineExpose({
|
initForm,
|
editForm,
|
});
|
const options = [
|
{ value: "有效", label: "有效" },
|
{ value: "无效", label: "无效" },
|
{ value: "作废", label: "作废" },
|
];
|
const emit = defineEmits(["submitForm", "update:modelValue"]);
|
const modelValue = ref([]);
|
const submit = async () => {
|
// 验证表单
|
if (!ruleFormRef.value) return;
|
|
try {
|
const valid = await ruleFormRef.value.validate();
|
if (!valid) {
|
return;
|
}
|
ruleForm.value.storageBlobDTO = modelValue.value; // 确保 ruleForm 是最新的
|
// 调用 API
|
try {
|
const res = await addOrEditArchive(ruleForm.value);
|
ElMessage({
|
type: "success",
|
message: res.msg || "操作成功",
|
});
|
emit("submitForm", res);
|
} catch (error) {
|
ElMessage({
|
type: "error",
|
message: error.msg || "操作失败",
|
});
|
return;
|
}
|
// 发送 emit 事件
|
|
// 关闭对话框
|
centerDialogVisible.value = false;
|
} catch (error) {
|
ElMessage({
|
type: "error",
|
message: error.msg || "操作失败",
|
});
|
}
|
};
|
</script>
|
|
<style lang="less" scoped></style>
|
