10 changed files with 139 additions and 130 deletions
@ -1,109 +1,76 @@ |
|||||||
<template> |
<template> |
||||||
<Dialog title="结果反馈" v-model="dialogVisible"> |
<Dialog title="结果反馈" v-model="dialogVisible" width="800" top="5vh"> |
||||||
<div class="box"> |
<section class="content-wrapper"> |
||||||
<div class="img"> |
<section> |
||||||
<div v-for="item in imgList" :key="item"> |
<section class="label">处理意见</section> |
||||||
<el-image style="width: 180px; height: 180px" :src="item" :preview-src-list="imgList" /> |
<section class="line-height-24px text-16px color-#303133"> {{ detail.feedBack }} </section> |
||||||
</div> |
</section> |
||||||
</div> |
<section> |
||||||
<div class="text">{{ dataValue.feedBack }}</div> |
<section class="label">照片取证</section> |
||||||
</div> |
<section class="image-wrapper"> |
||||||
|
<el-image |
||||||
|
v-for="(photo, index) in detail.fileList" |
||||||
|
:initial-index="index" |
||||||
|
:preview-src-list="detail.fileList.map((i) => i.url)" |
||||||
|
:key="photo.id" |
||||||
|
:src="photo.url" |
||||||
|
class="img" |
||||||
|
/> |
||||||
|
</section> |
||||||
|
</section> |
||||||
|
</section> |
||||||
</Dialog> |
</Dialog> |
||||||
</template> |
</template> |
||||||
<script setup lang="ts"> |
<script setup lang="ts"> |
||||||
import { EnterpriseInspectionsApi, EnterpriseInspectionsVO } from '@/api/enterpriseinspections' |
|
||||||
|
|
||||||
/** 企业检查记录表，用于记录与企业相关的环保检查信息。 表单 */ |
/** 企业检查记录表，用于记录与企业相关的环保检查信息。 表单 */ |
||||||
defineOptions({ name: 'EnterpriseInspectionsForm' }) |
defineOptions({ name: 'EnterpriseInspectionsForm' }) |
||||||
|
|
||||||
const { t } = useI18n() // 国际化 |
|
||||||
const message = useMessage() // 消息弹窗 |
|
||||||
|
|
||||||
const dialogVisible = ref(false) // 弹窗的是否展示 |
const dialogVisible = ref(false) // 弹窗的是否展示 |
||||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用 |
|
||||||
const formType = ref('') // 表单的类型：create - 新增；update - 修改 |
|
||||||
const formData = ref({ |
|
||||||
id: undefined, |
|
||||||
taskId: undefined, |
|
||||||
enterpriseId: undefined |
|
||||||
}) |
|
||||||
// const formRules = reactive({ |
|
||||||
// }) |
|
||||||
const formRef = ref() // 表单 Ref |
|
||||||
|
|
||||||
const dataValue = ref() |
const detail = ref() |
||||||
const imgList = ref([]) |
|
||||||
|
|
||||||
/** 打开弹窗 */ |
/** 打开弹窗 */ |
||||||
const open = async (data) => { |
const open = async (param: any) => { |
||||||
|
detail.value = param |
||||||
dialogVisible.value = true |
dialogVisible.value = true |
||||||
dataValue.value = data |
|
||||||
|
|
||||||
if (data.fileList.length > 0) { |
|
||||||
imgList.value = data.fileList.map((i) => i.url) |
|
||||||
} |
|
||||||
|
|
||||||
console.log('imgList.value=>', imgList.value) |
|
||||||
|
|
||||||
// // 修改时，设置数据 |
|
||||||
// if (id) { |
|
||||||
// formLoading.value = true |
|
||||||
// try { |
|
||||||
// formData.value = await EnterpriseInspectionsApi.getEnterpriseInspections(id) |
|
||||||
// } finally { |
|
||||||
// formLoading.value = false |
|
||||||
// } |
|
||||||
// } |
|
||||||
} |
} |
||||||
|
|
||||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗 |
defineExpose({ open }) // 提供 open 方法，用于打开弹窗 |
||||||
|
</script> |
||||||
|
|
||||||
/** 提交表单 */ |
<style scoped lang="scss"> |
||||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调 |
.content-wrapper { |
||||||
const submitForm = async () => { |
display: grid; |
||||||
// 校验表单 |
grid-template-rows: 1fr; |
||||||
await formRef.value.validate() |
grid-template-columns: 1.5fr 1fr; |
||||||
// 提交请求 |
grid-gap: 20px; |
||||||
formLoading.value = true |
padding-bottom: 20px; |
||||||
try { |
.label { |
||||||
const data = formData.value as unknown as EnterpriseInspectionsVO |
margin-bottom: 20px; |
||||||
if (formType.value === 'create') { |
font-size: 16px; |
||||||
await EnterpriseInspectionsApi.createEnterpriseInspections(data) |
display: flex; |
||||||
message.success(t('common.createSuccess')) |
flex-flow: row nowrap; |
||||||
} else { |
gap: 8px; |
||||||
await EnterpriseInspectionsApi.updateEnterpriseInspections(data) |
line-height: 24px; |
||||||
message.success(t('common.updateSuccess')) |
align-items: center; |
||||||
|
color: #303133; |
||||||
|
&::before { |
||||||
|
content: ''; |
||||||
|
display: block; |
||||||
|
width: 3px; |
||||||
|
height: 16px; |
||||||
|
background-color: var(--el-color-primary); |
||||||
} |
} |
||||||
dialogVisible.value = false |
|
||||||
// 发送操作成功的事件 |
|
||||||
emit('success') |
|
||||||
} finally { |
|
||||||
formLoading.value = false |
|
||||||
} |
} |
||||||
} |
.image-wrapper { |
||||||
|
|
||||||
// /** 重置表单 */ |
|
||||||
// const resetForm = () => { |
|
||||||
// formData.value = { |
|
||||||
// id: undefined, |
|
||||||
// taskId: undefined, |
|
||||||
// enterpriseId: undefined, |
|
||||||
// } |
|
||||||
// formRef.value?.resetFields() |
|
||||||
// } |
|
||||||
</script> |
|
||||||
<style scoped> |
|
||||||
.box { |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
.img { |
|
||||||
display: flex; |
display: flex; |
||||||
flex-direction: row; |
flex-flow: row wrap; |
||||||
flex-wrap: wrap; |
gap: 20px; |
||||||
justify-content: center; |
.img { |
||||||
gap: 15px; |
width: 120px; |
||||||
} |
height: 120px; |
||||||
.text { |
border-radius: 4px; |
||||||
padding: 15px; |
} |
||||||
} |
} |
||||||
} |
} |
||||||
</style> |
</style> |
||||||
|
|||||||
Loading…
Reference in new issue