<template>
|
<div>
|
<!-- 紧急联系人 -->
|
<el-card class="form-card" shadow="never">
|
<template #header>
|
<span class="card-title">
|
<span class="card-title-line">|</span>
|
紧急联系人
|
</span>
|
</template>
|
<el-table :data="form.emergencyContacts" border>
|
<el-table-column label="紧急联系人姓名" prop="name" min-width="160">
|
<template #default="{ row }">
|
<el-input
|
v-model="row.name"
|
placeholder="请输入"
|
clearable
|
maxlength="50"
|
show-word-limit
|
/>
|
</template>
|
</el-table-column>
|
<el-table-column label="紧急联系人关系" prop="relation" min-width="140">
|
<template #default="{ row }">
|
<el-input
|
v-model="row.relation"
|
placeholder="请输入"
|
clearable
|
maxlength="20"
|
show-word-limit
|
/>
|
</template>
|
</el-table-column>
|
<el-table-column label="紧急联系人手机" prop="phone" width="160">
|
<template #default="{ row }">
|
<el-input
|
v-model="row.phone"
|
placeholder="请输入"
|
clearable
|
maxlength="11"
|
show-word-limit
|
/>
|
</template>
|
</el-table-column>
|
<el-table-column label="紧急联系人住址" prop="address" min-width="220">
|
<template #default="{ row }">
|
<el-input
|
v-model="row.address"
|
placeholder="请输入"
|
clearable
|
maxlength="50"
|
show-word-limit
|
/>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" width="80" align="center">
|
<template #default="scope">
|
<el-button
|
v-if="form.emergencyContacts.length > 1"
|
type="primary"
|
link
|
@click="removeEmergencyRow(scope.$index)"
|
>
|
删除
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="table-add-row" @click="addEmergencyRow">新建一行</div>
|
</el-card>
|
|
<!-- 材料附件 -->
|
<el-card class="form-card" shadow="never">
|
<template #header>
|
<div class="card-title">
|
<span class="card-title-line">|</span>
|
<span>材料附件</span>
|
<span class="upload-tip">
|
图片支持jpeg、jpg、png等格式，附件文件支持pdf、rar、zip、doc、docx格式。
|
</span>
|
</div>
|
</template>
|
<el-form-item label="附件">
|
<el-upload
|
v-model:file-list="form.attachments"
|
action="#"
|
:auto-upload="false"
|
multiple
|
list-type="picture-card"
|
>
|
<el-icon>
|
<Plus />
|
</el-icon>
|
</el-upload>
|
</el-form-item>
|
</el-card>
|
</div>
|
</template>
|
|
<script setup>
|
import { toRefs } from "vue";
|
import { Plus } from "@element-plus/icons-vue";
|
|
const props = defineProps({
|
form: { type: Object, required: true },
|
});
|
|
const { form } = toRefs(props);
|
|
const addEmergencyRow = () => {
|
form.value.emergencyContacts.push({
|
name: "",
|
relation: "",
|
phone: "",
|
address: "",
|
});
|
};
|
|
const removeEmergencyRow = (index) => {
|
if (form.value.emergencyContacts.length <= 1) return;
|
form.value.emergencyContacts.splice(index, 1);
|
};
|
</script>
|
|
<style scoped>
|
.form-card {
|
margin-bottom: 16px;
|
}
|
|
.card-title-line {
|
color: #f56c6c;
|
margin-right: 4px;
|
}
|
|
.table-add-row {
|
margin-top: 8px;
|
color: #409eff;
|
cursor: pointer;
|
font-size: 14px;
|
}
|
|
.upload-tip {
|
margin-left: 12px;
|
font-size: 12px;
|
color: #909399;
|
}
|
</style>
|
