385 lines
12 KiB
Vue
385 lines
12 KiB
Vue
<template>
|
||
<div class="p-2 drawingreview">
|
||
<el-card shadow="never">
|
||
<template #header>
|
||
<el-row :gutter="10" class="mb8">
|
||
<el-col :span="1.5">
|
||
<el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['design:drawingreview:add']">新增</el-button>
|
||
</el-col>
|
||
<right-toolbar @queryTable="getList"></right-toolbar>
|
||
</el-row>
|
||
</template>
|
||
<el-table v-loading="loading" :data="drawingreviewList">
|
||
<el-table-column type="index" label="序号" width="100" align="center" />
|
||
<el-table-column label="文件名称" align="center" prop="fileName" />
|
||
<el-table-column label="流程状态" align="center">
|
||
<template #default="scope">
|
||
<dict-tag :options="wf_business_status" :value="scope.row.auditType" />
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="备注" align="center" prop="remark" />
|
||
<el-table-column label="操作" align="center">
|
||
<template #default="scope">
|
||
<el-row :gutter="10" class="mb8"
|
||
><el-col :span="1.5" v-if="scope.row.auditType === 'draft' || scope.row.auditType === 'cancel' || scope.row.auditType === 'back'">
|
||
<el-button size="small" type="primary" icon="Edit" @click="handleUpdate(scope.row)">审核</el-button>
|
||
</el-col>
|
||
<el-col :span="1.5">
|
||
<el-button type="warning" size="small" icon="View" v-if="scope.row.auditType != 'draft'" @click="handleViewInfo(scope.row)"
|
||
>查看流程</el-button
|
||
> </el-col
|
||
><el-col :span="1.5">
|
||
<el-button type="warning" size="small" icon="View" v-if="scope.row.auditType != 'draft'" @click="handleViewHistory(scope.row)"
|
||
>查看历史</el-button
|
||
>
|
||
</el-col></el-row
|
||
>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
|
||
</el-card>
|
||
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
|
||
<el-form ref="drawingreviewFormRef" :model="form" :rules="rules" label-width="80px">
|
||
<el-form-item label="图纸文件" prop="auditType">
|
||
<el-upload ref="uploadRef" class="upload-demo" :http-request="importExcel">
|
||
<template #trigger>
|
||
<el-button type="primary">上传excel</el-button>
|
||
</template>
|
||
</el-upload>
|
||
</el-form-item>
|
||
<el-form-item label="备注" prop="remark">
|
||
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
|
||
</el-form-item>
|
||
</el-form>
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
|
||
<el-button @click="dialog.visible = false">取 消</el-button>
|
||
</div>
|
||
</template>
|
||
</el-dialog>
|
||
<el-dialog draggable title="查看历史" v-model="dialogHistory" width="800px" append-to-body>
|
||
<div>
|
||
<span>选择历史退回记录：</span>
|
||
<el-select v-model="hisId" placeholder="请选择" style="width: 240px" @change="handleShowInfo">
|
||
<el-option v-for="item in hisList" :key="item.id" :label="item.id" :value="item.id" />
|
||
</el-select>
|
||
<div style="margin-top: 20px">
|
||
<span style="color: #0d9df5">查看excel文件</span>
|
||
<div style="margin-top: 20px" 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>编号：</span>
|
||
<span>{{ examineForm.num }}</span>
|
||
</div>
|
||
<div class="head-text"></div>
|
||
</el-row>
|
||
<table style="width: 100%" border="1" cellspacing="1">
|
||
<thead>
|
||
<tr>
|
||
<th colspan="2">工程名称</th>
|
||
<td class="th-bg" colspan="10">{{ examineForm.projectName }}</td>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<th colspan="2">子项名称</th>
|
||
<td class="th-bg" colspan="6">{{ examineForm.subprojectName }}</td>
|
||
<th colspan="2">设计阶段</th>
|
||
<td class="th-bg" colspan="2">{{ examineForm.stage }}</td>
|
||
</tr>
|
||
</tbody>
|
||
<tbody>
|
||
<tr>
|
||
<th colspan="2">专业</th>
|
||
<td class="th-bg" colspan="2">{{ examineForm.professional }}</td>
|
||
<th colspan="2">卷册</th>
|
||
<td class="th-bg" colspan="2">{{ examineForm.volume }}</td>
|
||
<th colspan="2">设计人</th>
|
||
<td class="th-bg" colspan="2">{{ examineForm.designer }}</td>
|
||
</tr>
|
||
</tbody>
|
||
<tbody>
|
||
<tr>
|
||
<th colspan="2">验证内容</th>
|
||
<td class="th-bg" colspan="10">{{ examineForm.verificationContent }}</td>
|
||
</tr>
|
||
</tbody>
|
||
<tbody>
|
||
<tr>
|
||
<th colspan="6">验证意见</th>
|
||
<th class="th-bg" colspan="6">执行意见</th>
|
||
</tr>
|
||
</tbody>
|
||
<tbody>
|
||
<tr>
|
||
<td colspan="6">
|
||
<div style="height: 400px">{{ examineForm.verificationOpinion }}</div>
|
||
</td>
|
||
<td class="th-bg" colspan="6">
|
||
<div style="height: 400px">{{ examineForm.executionOpinion }}</div>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
<tbody>
|
||
<tr>
|
||
<td colspan="6">
|
||
<div style="display: flex; align-items: center; justify-content: space-between">
|
||
<span> 校审： {{ examineForm.proofreading }} </span>
|
||
<span> {{ dateFormat(examineForm.proofreadingDate) }}</span>
|
||
</div>
|
||
</td>
|
||
<td rowspan="2" colspan="6">
|
||
<div>执行人： {{ examineForm.executor }}</div>
|
||
<div style="display: flex; align-items: center; justify-content: flex-end">
|
||
{{ dateFormat(examineForm.executorDate) }}
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="th-bg" colspan="6">
|
||
<div style="display: flex; align-items: center; justify-content: space-between">
|
||
<span>审核 ： {{ examineForm.audit }}</span>
|
||
<span> {{ dateFormat(examineForm.auditDate) }}</span>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup name="Drawingreview">
|
||
import { computed, getCurrentInstance, toRefs } from 'vue';
|
||
import {
|
||
listDrawingreview,
|
||
addDrawingreview,
|
||
updateDrawingreview,
|
||
ObtainHistoricalDesignDrawingsForReview,
|
||
drawingreview
|
||
} from '@/api/design/drawingreview';
|
||
import { useUserStoreHook } from '@/store/modules/user';
|
||
import { fromFile } from 'geotiff';
|
||
const { proxy } = getCurrentInstance();
|
||
const { wf_business_status } = toRefs(proxy?.useDict('wf_business_status'));
|
||
|
||
const userStore = useUserStoreHook();
|
||
const loading = ref(true);
|
||
const buttonLoading = ref(false);
|
||
const total = ref(0);
|
||
const drawingreviewList = ref([]);
|
||
const hisList = ref([]);
|
||
const hisId = ref('');
|
||
const fromData = new FormData();
|
||
const currentProject = computed(() => userStore.selectedProject);
|
||
const dialog = reactive({
|
||
visible: false,
|
||
title: ''
|
||
});
|
||
const dialogHistory = ref(false);
|
||
const initexamineForm = {
|
||
id: undefined,
|
||
projectId: currentProject.value?.id,
|
||
auditType: undefined,
|
||
remark: undefined
|
||
};
|
||
const drawingreviewFormRef = ref();
|
||
const data = reactive({
|
||
form: { ...initexamineForm },
|
||
queryParams: {
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
projectId: currentProject.value?.id,
|
||
auditType: undefined,
|
||
params: {}
|
||
},
|
||
rules: {
|
||
id: [{ required: true, message: '项目ID不能为空', trigger: 'blur' }]
|
||
}
|
||
});
|
||
const { queryParams, form, rules } = toRefs(data);
|
||
const examineForm = ref({
|
||
audit: '',
|
||
auditDate: '',
|
||
auditId: '',
|
||
designer: '',
|
||
executionOpinion: '',
|
||
executor: '',
|
||
executorDate: '',
|
||
executorId: '',
|
||
id: '1',
|
||
num: '',
|
||
professional: '',
|
||
projectId: '',
|
||
projectName: '',
|
||
proofreading: '',
|
||
proofreadingDate: '',
|
||
proofreadingId: '',
|
||
stage: '',
|
||
subprojectId: '',
|
||
subprojectName: '',
|
||
verificationContent: '',
|
||
verificationOpinion: '',
|
||
volume: ''
|
||
});
|
||
// 时间 格式化 YYYY-MM-DD 改为 YYYY年MM月DD日
|
||
const dateFormat = (v) => {
|
||
if (!v) return '-';
|
||
let time = new Date(v);
|
||
let y = time.getFullYear();
|
||
let MM = time.getMonth() + 1;
|
||
MM = MM < 10 ? '0' + MM : MM;
|
||
let d = time.getDate();
|
||
d = d < 10 ? '0' + d : d;
|
||
return y + '年' + MM + '月' + d + '日';
|
||
};
|
||
/** 查询设计-图纸评审列表 */
|
||
const getList = async () => {
|
||
loading.value = true;
|
||
const res = await listDrawingreview(queryParams.value);
|
||
drawingreviewList.value = res.rows;
|
||
total.value = res.total;
|
||
loading.value = false;
|
||
};
|
||
/** 新增按钮操作 */
|
||
const handleAdd = () => {
|
||
reset();
|
||
dialog.visible = true;
|
||
dialog.title = '添加设计-图纸评审';
|
||
};
|
||
/** 表单重置 */
|
||
const reset = () => {
|
||
form.value = { ...initexamineForm };
|
||
drawingreviewFormRef.value?.resetFields();
|
||
};
|
||
function handleUpdate(row) {
|
||
proxy.$tab.closePage(proxy.$route);
|
||
proxy.$router.push({
|
||
path: `/design-management/drawingreview/indexEdit`,
|
||
query: {
|
||
id: row.id,
|
||
type: 'update'
|
||
}
|
||
});
|
||
}
|
||
function handleViewInfo(row) {
|
||
proxy.$tab.closePage(proxy.$route);
|
||
proxy.$router.push({
|
||
path: `/design-management/drawingreview/indexEdit`,
|
||
query: {
|
||
id: row.id,
|
||
type: 'view'
|
||
}
|
||
});
|
||
}
|
||
const handleViewHistory = async (row) => {
|
||
// 查看历史流程记录
|
||
dialogHistory.value = true;
|
||
let res = await ObtainHistoricalDesignDrawingsForReview(row.id);
|
||
console.log(res);
|
||
hisList.value = res;
|
||
hisId.value = hisList.value[0].id;
|
||
getDetails(hisId.value);
|
||
};
|
||
const handleShowInfo = (val) => {
|
||
getDetails(val);
|
||
};
|
||
const getDetails = async (id) => {
|
||
let res = await drawingreview(id);
|
||
examineForm.value = res.data;
|
||
};
|
||
/** 提交按钮 */
|
||
const submitForm = () => {
|
||
drawingreviewFormRef.value?.validate(async (valid) => {
|
||
if (valid) {
|
||
buttonLoading.value = true;
|
||
if (form.value.id) {
|
||
await updateDrawingreview(form.value).finally(() => (buttonLoading.value = false));
|
||
} else {
|
||
await addDrawingreview(form.value, fromData).finally(() => (buttonLoading.value = false));
|
||
}
|
||
proxy?.$modal.msgSuccess('操作成功');
|
||
dialog.visible = false;
|
||
await getList();
|
||
}
|
||
});
|
||
};
|
||
// 上传excel
|
||
function importExcel(options) {
|
||
fromData.append('file', options.file);
|
||
}
|
||
onMounted(() => {
|
||
getList();
|
||
});
|
||
//监听项目id刷新数据
|
||
const listeningProject = watch(
|
||
() => currentProject.value?.id,
|
||
(nid, oid) => {
|
||
queryParams.value.projectId = nid;
|
||
getList();
|
||
}
|
||
);
|
||
|
||
onUnmounted(() => {
|
||
listeningProject();
|
||
});
|
||
</script>
|
||
<style lang="scss">
|
||
.drawingreview {
|
||
.upload-demo {
|
||
width: 100% !important;
|
||
}
|
||
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>
|