271 lines
7.6 KiB
Vue
271 lines
7.6 KiB
Vue
<template>
|
||
<el-dialog v-model="isShowDialog" title="变更单详情" draggable width="60vw" :close-on-click-modal="false" :destroy-on-close="true">
|
||
<el-card :body-style="{ padding: '20px' }" style="border: none; box-shadow: none">
|
||
<div class="dialog-footer">
|
||
<div class="btn-item" @click="onLoad">
|
||
<img src="./icon/down.png" />
|
||
<span>导出</span>
|
||
</div>
|
||
</div>
|
||
<el-form ref="formRef" :model="formData" label-width="100px" id="formContent" style="width: 75%; margin-left: 10%">
|
||
<div class="table-content" id="table-content">
|
||
<el-row class="mb20" style="display: flex; justify-content: center">
|
||
<h2>设计变更申请单（总承包）</h2>
|
||
</el-row>
|
||
<el-row class="mb10" style="display: flex; justify-content: space-between">
|
||
<div class="head-text">
|
||
<span>NO：</span>
|
||
<span>{{ formData.formNo }}</span>
|
||
</div>
|
||
<!-- <div class="head-text">
|
||
<span>填报时间：</span>
|
||
<span>{{ formData.createdAt }}</span>
|
||
</div> -->
|
||
</el-row>
|
||
<table style="width: 100%" border="1" cellspacing="1">
|
||
<thead>
|
||
<tr>
|
||
<th width="150">工程名称</th>
|
||
<td class="th-bg">{{ formData.projectName }}</td>
|
||
<th width="150">提出单位</th>
|
||
<td class="th-bg">{{ formData.submitUnit }}</td>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<th width="150">专业</th>
|
||
<td class="th-bg">{{ formData.specialty }}</td>
|
||
<th width="150">提出日期</th>
|
||
<td class="th-bg">{{ parseTime(formData.submitDate, '{y}-{m}-{d}') }}</td>
|
||
</tr>
|
||
</tbody>
|
||
<thead>
|
||
<tr>
|
||
<th width="150">卷册名称</th>
|
||
<td class="th-bg">{{ formData.volumeName }}</td>
|
||
<th width="150">附图</th>
|
||
<td class="th-bg">
|
||
<el-image
|
||
v-for="(item, i) of formData.attachmentPicList"
|
||
:key="i"
|
||
style="width: 100px; height: 100px"
|
||
:src="item.url"
|
||
fit="cover"
|
||
:preview-src-list="[item.url]"
|
||
/>
|
||
</td>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<th width="150">卷册号</th>
|
||
<td colspan="3">{{ formData.volumeNo }}</td>
|
||
</tr>
|
||
</tbody>
|
||
<thead>
|
||
<tr>
|
||
<th width="150">变更原因</th>
|
||
<td colspan="3">{{ formData.changeReason }}</td>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<th width="150">变更内容</th>
|
||
<td colspan="3">{{ formData.changeContent }}</td>
|
||
</tr>
|
||
</tbody>
|
||
<tbody>
|
||
<tr>
|
||
<th width="150">变更费用估算（附计算表）</th>
|
||
<td colspan="3">
|
||
<div>
|
||
<span
|
||
v-for="(item, i) of formData.costEstimationFileList"
|
||
:key="i"
|
||
style="color: rgb(41 145 255);cursor: pointer"
|
||
@click="onOpen(item.url)"
|
||
>{{item.originalName}}</span>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</el-form>
|
||
</el-card>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, reactive } from 'vue';
|
||
import { listDesignChange, getDesignChange, delDesignChange, addDesignChange, updateDesignChange } from '@/api/design/designChange';
|
||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||
import { downLoadOss } from '@/api/system/oss';
|
||
// 响应式状态
|
||
const isShowDialog = ref(false);
|
||
const initFormData: DesignChangeForm = {
|
||
id: undefined,
|
||
formNo: undefined,
|
||
projectName: undefined,
|
||
submitUnit: undefined,
|
||
specialty: undefined,
|
||
submitDate: undefined,
|
||
volumeName: undefined,
|
||
volumeNo: undefined,
|
||
attachmentPic: undefined,
|
||
changeReason: [],
|
||
changeContent: undefined,
|
||
costEstimation: undefined,
|
||
costEstimationFile: undefined,
|
||
fileId: undefined,
|
||
status: undefined,
|
||
remark: undefined
|
||
};
|
||
const data = reactive<PageData<DesignChangeForm, DesignChangeQuery>>({
|
||
formData: { ...initFormData }
|
||
});
|
||
const design_change_reason_type = ref([]);
|
||
const { formData } = toRefs(data);
|
||
// 打开弹窗
|
||
const openDialog = (row?: any, types) => {
|
||
resetForm();
|
||
design_change_reason_type.value = types;
|
||
if (row?.id) {
|
||
getInfos(row.id, types);
|
||
}
|
||
isShowDialog.value = true;
|
||
};
|
||
// 获取详情数据
|
||
const getInfos = async (id: string, types) => {
|
||
const res = await getDesignChange(id);
|
||
Object.assign(formData.value, res.data);
|
||
// 数据处理
|
||
if (formData.value.changeReason) {
|
||
let arr = formData.value.changeReason.split(',');
|
||
var changeReason = types.filter((item) => arr.includes(item.value.toString())).map((item) => item.label);
|
||
formData.value.changeReason = changeReason.join('，');
|
||
}
|
||
};
|
||
// 重置表单
|
||
const resetForm = () => {
|
||
Object.keys(formData.value).forEach((key) => {
|
||
formData[key] = undefined;
|
||
});
|
||
};
|
||
// 下载文件
|
||
const onOpen = (path: string) => {
|
||
window.open(path, '_blank');
|
||
};
|
||
// 导出
|
||
const onLoad = async () => {
|
||
await downLoadOss({ id: formData.value.id }, '/design/designChange/export/word', '设计变更单.zip');
|
||
};
|
||
|
||
// 关闭弹窗
|
||
const closeDialog = () => {
|
||
isShowDialog.value = false;
|
||
};
|
||
|
||
// 暴露方法给父组件
|
||
defineExpose({
|
||
openDialog,
|
||
closeDialog
|
||
});
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.pic-block {
|
||
margin-right: 8px;
|
||
}
|
||
.file-block {
|
||
width: 100%;
|
||
border: 1px solid var(--el-border-color);
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
position: relative;
|
||
overflow: hidden;
|
||
transition: var(--el-transition-duration-fast);
|
||
margin-bottom: 5px;
|
||
padding: 3px 6px;
|
||
}
|
||
.ml-2 {
|
||
margin-right: 5px;
|
||
}
|
||
::v-deep .el-icon svg {
|
||
height: 100% !important;
|
||
width: 100% !important;
|
||
}
|
||
::v-deep .el-step__icon-inner {
|
||
font-size: 14px !important;
|
||
font-weight: 700 !important;
|
||
}
|
||
.dialog-footer {
|
||
height: 100px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
position: absolute;
|
||
top: 14%;
|
||
right: 10%;
|
||
background: #fff;
|
||
box-shadow: 0px 0px 10px #ddd;
|
||
text-align: center;
|
||
padding: 20px 10px;
|
||
.btn-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
> span {
|
||
padding-top: 5px;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: rgba(51, 51, 51, 1);
|
||
}
|
||
}
|
||
}
|
||
table {
|
||
border-collapse: collapse; //合并为一个单一的边框
|
||
border-color: rgba(199, 199, 199, 1); //边框颜色按实际自定义即可
|
||
}
|
||
thead {
|
||
tr {
|
||
th {
|
||
background-color: rgba(247, 247, 247, 1); //设置表格标题背景色
|
||
height: 35px; //设置单元格最小高度
|
||
text-align: center;
|
||
letter-spacing: 5px;
|
||
padding: 15px;
|
||
}
|
||
td {
|
||
text-align: left;
|
||
height: 35px; //设置单元格最小高度
|
||
padding: 15px;
|
||
}
|
||
.th-bg {
|
||
background-color: rgba(247, 247, 247, 1);
|
||
}
|
||
}
|
||
}
|
||
tbody {
|
||
tr {
|
||
td {
|
||
text-align: left;
|
||
height: 40px; //设置单元格最小高度
|
||
padding: 15px;
|
||
}
|
||
th {
|
||
height: 35px; //设置单元格最小高度
|
||
text-align: center;
|
||
letter-spacing: 5px;
|
||
padding: 15px;
|
||
}
|
||
}
|
||
}
|
||
.table-content {
|
||
box-shadow: 0px 0px 10px #ddd;
|
||
padding: 20px;
|
||
position: relative;
|
||
}
|
||
</style>
|