<template>
|
<el-dialog
|
:title="dialogTitle"
|
:visible.sync="dialogVisible"
|
width="90%"
|
top="5vh"
|
:close-on-click-modal="false"
|
@close="handleClose"
|
>
|
<div class="approval-dialog">
|
<!-- 左侧审批内容 -->
|
<div class="approval-content">
|
<Card class="approval-content-card">
|
<template style="position: relative">
|
<div class="header-title" style="width: 100%">
|
<div class="header-title-left">
|
<img src="@/assets/public/headercard.png" />
|
<div>所属项目组</div>
|
</div>
|
</div>
|
<Table :height="null" :total="0" :data="tableData">
|
<template>
|
<el-table-column prop="teamName" label="项目组名称" />
|
<el-table-column prop="personCharge" label="项目负责人" />
|
<el-table-column prop="staffName" label="项目组成员" />
|
<el-table-column prop="createTime" label="创建时间" />
|
</template>
|
</Table>
|
|
<el-form
|
ref="form"
|
:model="form"
|
:rules="rules"
|
inline
|
label-position="top"
|
style="margin-top: 18px"
|
>
|
<el-row :gutter="20">
|
<el-col :span="24">
|
<el-form-item prop="reportTitle" label="报告标题">
|
<el-input
|
v-model="form.reportTitle"
|
style="width: 100%"
|
placeholder="请输入报告标题"
|
disabled
|
/>
|
</el-form-item>
|
<el-form-item
|
prop="reportCode"
|
label="报告编号"
|
style="margin-left: 100px"
|
>
|
<el-input
|
v-model="form.reportCode"
|
style="width: 100%"
|
placeholder="请输入报告编号"
|
disabled
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item prop="developPerson" label="制定人">
|
<el-input
|
v-model="form.developPerson"
|
style="width: 100%"
|
placeholder="请输入制定人"
|
disabled
|
/>
|
</el-form-item>
|
<el-form-item
|
prop="developDate"
|
label="制定日期"
|
style="margin-left: 100px"
|
>
|
<el-date-picker
|
:prefix-icon="null"
|
v-model="form.developDate"
|
type="date"
|
disabled
|
placeholder="请选择日期"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<div class="header-title" style="width: 100%">
|
<div class="header-title-left">
|
<img src="@/assets/public/headercard.png" />
|
<div>报告正文</div>
|
</div>
|
</div>
|
<el-form-item prop="reportText" style="margin-top: 18px">
|
<ai-editor
|
:value="form.reportText"
|
style="width: 100%"
|
placeholder="请输入报告正文"
|
:readOnly="true"
|
/>
|
</el-form-item>
|
<div class="header-title" style="width: 100%">
|
<div class="header-title-left">
|
<img src="@/assets/public/headercard.png" />
|
<span class="noRequire">附件</span>
|
</div>
|
</div>
|
<el-form-item prop="name" style="margin-top: -18px">
|
<el-upload
|
action="#"
|
:file-list="fileList"
|
disabled
|
:on-preview="handlePreview"
|
>
|
<!-- <el-button size="small" type="primary" disabled>点击上传</el-button> -->
|
</el-upload>
|
</el-form-item>
|
</el-form>
|
</template>
|
<!-- <SelectMember ref="selectMember" /> -->
|
</Card>
|
</div>
|
<!-- 右侧审批流程 -->
|
<div class="approval-flow">
|
<div class="flow-content">
|
<approval-process :processData="form.processData" />
|
</div>
|
</div>
|
</div>
|
<div class="approval-dialog-approve" v-if="type == 'approve'">
|
<el-row :span="24">
|
<el-col :span="12">
|
<div class="status">
|
<div class="status-title">审批结果</div>
|
<div class="status-content">
|
<div
|
class="resolve"
|
:class="status == '1' && 'activeStatus'"
|
@click.stop="status = 1"
|
>
|
通过
|
</div>
|
<div
|
class="reject"
|
:class="status == '2' && 'activeStatus'"
|
@click.stop="status = 2"
|
>
|
驳回
|
</div>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="remark">
|
<div class="remark-title">审批意见</div>
|
<el-input
|
type="textarea"
|
v-model="remark"
|
placeholder="请输入审批意见"
|
/>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="handleClose">取 消</el-button>
|
<el-button type="primary" @click="handleApprove" v-if="type == 'approve'"
|
>确 定</el-button
|
>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
import ApprovalProcess from "@/components/approvalProcess";
|
import AiEditor from "@/components/AiEditor";
|
import { getDetail, audit } from "../../service";
|
import apiConfig from "@/utils/baseurl";
|
|
export default {
|
name: "ApprovalDialog",
|
components: {
|
ApprovalProcess,
|
AiEditor,
|
},
|
props: {
|
visible: {
|
type: Boolean,
|
default: false,
|
},
|
type: {
|
type: String,
|
default: "approve", // approve-审批，view-查看
|
},
|
data: {
|
type: Object,
|
default: () => ({}),
|
},
|
},
|
data() {
|
return {
|
dialogVisible: false,
|
form: {
|
reportCode: "",
|
reportTitle: "",
|
reportText: "",
|
developPerson: "",
|
developPersonName: "",
|
developDate: "",
|
reportType: 2,
|
status: 1,
|
teamId: "",
|
qaReportFiles: [],
|
commitPersonId: null,
|
processData: [],
|
},
|
tableData: [],
|
fileList: [], // 附件列表
|
rules: {},
|
status: "1",
|
remark: "",
|
};
|
},
|
computed: {
|
dialogTitle() {
|
return this.type == "approve" ? "审批" : "审批详情";
|
},
|
},
|
watch: {
|
visible: {
|
handler(val) {
|
this.dialogVisible = val;
|
if (val && this.data.id) {
|
this.getDetail();
|
}
|
},
|
immediate: true,
|
},
|
},
|
methods: {
|
handlePreview(file) {
|
console.log("url", file);
|
if (file && file.url) {
|
if (file.url && file.url.startsWith(apiConfig.showImgUrl)) {
|
window.open(file.url, "_blank");
|
} else {
|
let newUrl = apiConfig.showImgUrl + file.url;
|
window.open(newUrl, "_blank");
|
}
|
}
|
},
|
getDetail() {
|
getDetail(this.data.id)
|
.then((res) => {
|
if (res) {
|
this.form = { ...res, processData: [] };
|
// 组装流程数据
|
let processData = [];
|
// 提交节点
|
processData.push({
|
type: "primary",
|
mode: "list",
|
fields: [
|
{ label: "提交人：", value: res.updateBy || "" },
|
{ label: "提交时间：", value: res.createTime || "" },
|
],
|
});
|
if (res.status == 2 || res.status == 4) {
|
processData.push({
|
type:
|
res.status == 2
|
? "primary"
|
: res.status == 4
|
? "primary"
|
: "warning",
|
mode: "list",
|
fields: [
|
{
|
label: "审核结果：",
|
value:
|
res.status == 2
|
? "通过"
|
: res.status == 4
|
? "驳回"
|
: "待审批",
|
},
|
{ label: "审批意见：", value: res.auditRemark || "" },
|
{
|
label: "审核人：",
|
value: res.auditPersonName || res.auditPersonId || "",
|
},
|
{ label: "审核时间：", value: res.auditTime || "" },
|
],
|
});
|
} else {
|
processData.push({
|
type: "warning",
|
mode: "list",
|
fields: [{ label: "等待审核" }],
|
});
|
}
|
|
// this.form = res;
|
this.tableData = [
|
{
|
...res.projectTeamVO,
|
staffName: res.projectTeamVO.staffs
|
.map((item) => item.nickName)
|
.join(","),
|
},
|
];
|
this.fileList =
|
res.qaReportFileList.map((item) => {
|
return {
|
...item,
|
name: item.fileName,
|
url: item.fileUrl,
|
};
|
}) || [];
|
this.$nextTick(() => {
|
this.form.processData = processData;
|
});
|
} else {
|
this.$message.error(res.message || "获取详情失败");
|
}
|
})
|
.catch((err) => {
|
// console.error('获取详情失败:', err);
|
// this.$message.error('获取详情失败');
|
});
|
},
|
handleClose() {
|
// this.$emit("update:visible", false);
|
this.$emit("close");
|
this.form.approvalComment = "";
|
},
|
handleApprove() {
|
if (this.status == "2" && !this.remark) {
|
this.$message.warning("请输入审批意见");
|
return;
|
}
|
const params = {
|
id: this.data.id,
|
auditStatus: this.status == "1" ? 2 : 4, // 1=通过(2)，2=驳回(4)
|
auditRemark: this.remark,
|
};
|
audit(params)
|
.then((res) => {
|
if (res) {
|
this.$message.success("审批成功");
|
this.$emit("close");
|
// this.$emit("refresh");
|
} else {
|
this.$message.error(res.message || "审批失败");
|
}
|
})
|
.catch((err) => {
|
// console.error("审批失败:", err);
|
// this.$message.error("审批失败");
|
});
|
},
|
handleReject() {
|
if (!this.form.approvalComment) {
|
this.$message.warning("请输入审批意见");
|
return;
|
}
|
this.$emit("reject", {
|
...this.form,
|
status: "rejected",
|
});
|
},
|
},
|
};
|
</script>
|
|
<style scoped lang="less">
|
::v-deep .el-dialog__header {
|
border-bottom: 1px solid #e4e7ed;
|
}
|
|
.approval-dialog {
|
display: flex;
|
min-height: 60vh;
|
max-height: 80vh;
|
|
.approval-content {
|
flex: 1;
|
margin-right: 20px;
|
background: #ffffff;
|
box-shadow: 0px 4px 12px 4px rgba(0, 0, 0, 0.08);
|
border-radius: 10px;
|
}
|
|
.approval-flow {
|
padding: 20px 10px;
|
width: 305px;
|
// flex: 1;
|
background: #ffffff;
|
box-shadow: 0px 4px 12px 4px rgba(0, 0, 0, 0.08);
|
border-radius: 10px;
|
|
.flow-title {
|
font-size: 16px;
|
font-weight: bold;
|
margin-bottom: 20px;
|
color: #303133;
|
}
|
|
.flow-content {
|
height: calc(100% - 40px);
|
overflow-y: auto;
|
|
.el-form--inline .el-form-item {
|
margin-right: 83px;
|
}
|
}
|
}
|
}
|
|
.approval-content-card {
|
height: calc(100% - 10px) !important;
|
box-shadow: none !important;
|
}
|
|
.header-title {
|
// display: flex;
|
align-items: center;
|
flex-wrap: wrap;
|
margin-bottom: 20px;
|
gap: 13px;
|
|
.header-title-left {
|
display: flex;
|
align-items: center;
|
gap: 13px;
|
margin-top: 18px;
|
|
img {
|
width: 12px;
|
height: 19px;
|
}
|
|
div {
|
flex-shrink: 0;
|
font-weight: bold;
|
font-size: 18px;
|
color: #222222;
|
line-height: 27px;
|
font-family: "Source Han Sans CN Bold Bold";
|
|
&:before {
|
content: "*";
|
color: #f56c6c;
|
margin-right: 4px;
|
}
|
}
|
|
span {
|
flex-shrink: 0;
|
font-weight: bold;
|
font-size: 18px;
|
color: #222222;
|
line-height: 27px;
|
font-family: "Source Han Sans CN Bold Bold";
|
}
|
}
|
|
.header-title-left :first-child {
|
margin-top: 0;
|
}
|
}
|
|
.header-title:first-child {
|
.header-title-left {
|
margin-top: 0;
|
}
|
}
|
|
.item-title {
|
padding-left: 25px;
|
|
span {
|
flex-shrink: 0;
|
font-weight: bold;
|
font-size: 14px;
|
color: #222222;
|
line-height: 27px;
|
font-family: "Source Han Sans CN Bold Bold";
|
margin: 18px 0;
|
|
&:before {
|
content: "*";
|
color: #f56c6c;
|
margin-right: 4px;
|
}
|
}
|
}
|
|
.approval-dialog-approve {
|
padding: 28px 10px;
|
// display: flex;
|
align-content: center;
|
|
.status {
|
margin-right: 40px;
|
max-width: 60%;
|
}
|
|
// align-items: center;
|
.status-title {
|
color: #222222;
|
font-family: "SourceHanSansCN-Medium";
|
line-height: 14px;
|
margin-bottom: 16px;
|
}
|
|
.status-content {
|
display: flex;
|
align-items: center;
|
width: 100%;
|
gap: 16px;
|
background: #ffffff;
|
border-radius: 10px;
|
border: 1px solid rgba(4, 156, 154, 0.5);
|
|
.resolve {
|
border-radius: 10px;
|
flex: 1;
|
font-size: 16px;
|
// padding: 5px 55px;
|
font-weight: 400;
|
color: #333333;
|
cursor: pointer;
|
line-height: 32px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.reject {
|
flex: 1;
|
border-radius: 10px;
|
font-size: 16px;
|
line-height: 32px;
|
// padding: 5px 55px;
|
font-weight: 400;
|
color: #333333;
|
cursor: pointer;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.activeStatus {
|
background: #ebfefd;
|
color: #049c9a;
|
box-shadow: 0px 0px 6px 0px rgba(10, 109, 108, 0.25);
|
border-radius: 10px;
|
}
|
}
|
|
.remark-title {
|
color: #222222;
|
font-family: "SourceHanSansCN-Medium";
|
line-height: 14px;
|
margin-bottom: 16px;
|
}
|
}
|
|
.dialog-footer {
|
align-items: center;
|
display: flex;
|
justify-content: center;
|
gap: 20px;
|
|
button {
|
width: 150px;
|
}
|
}
|
</style>
|
