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>
|