流程
This commit is contained in:
@ -21,7 +21,7 @@ const iframeUrl = ref('');
|
||||
const baseUrl = import.meta.env.VITE_APP_BASE_API;
|
||||
|
||||
onMounted(async () => {
|
||||
const url = baseUrl + `/warm-flow-ui/index.html?id=${props.insId}&type=FlowChart&t=${Date.now()}`;
|
||||
const url = `/warm-flow-ui/index.html?id=${props.insId}&type=FlowChart&t=${Date.now()}`;
|
||||
iframeUrl.value = url + '&Authorization=Bearer ' + getToken() + '&clientid=' + import.meta.env.VITE_APP_CLIENT_ID;
|
||||
});
|
||||
</script>
|
||||
|
||||
BIN
src/components/wordDetial/icon/down.png
Normal file
BIN
src/components/wordDetial/icon/down.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 922 B |
273
src/components/wordDetial/index.vue
Normal file
273
src/components/wordDetial/index.vue
Normal file
@ -0,0 +1,273 @@
|
||||
|
||||
import { click } from 'ol/events/condition';
|
||||
import { includes } from 'lodash'; import { map } from 'lodash';
|
||||
<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>
|
||||
Reference in New Issue
Block a user