<template>
|
<div>
|
<el-dialog
|
:title="dialogTitle"
|
:visible.sync="visible"
|
width="80%"
|
:close-on-click-modal="false"
|
@close="handleClose"
|
>
|
<div class="approval-dialog">
|
<!-- 左侧审批内容 -->
|
<div class="approval-content">
|
<Card class="approval-content-card">
|
<template style="position: relative">
|
<el-form
|
ref="form"
|
:model="form"
|
:rules="rules"
|
inline
|
label-position="top"
|
:disabled="type === 'view'"
|
>
|
<div class="header-title" style="margin-bottom: 38px">
|
<div class="header-title-left">
|
<img src="@/assets/public/headercard.png" />
|
<span>一、项目课题方案信息</span>
|
</div>
|
</div>
|
<div style="padding-left: 25px">
|
<el-form-item prop="projectName" label="项目课题方案名称">
|
<el-input
|
v-model="form.projectName"
|
placeholder="请输入"
|
:disabled="true"
|
/>
|
</el-form-item>
|
<el-form-item prop="projectCode" label="项目课题方案编号">
|
<el-input
|
v-model="form.projectCode"
|
placeholder="请输入"
|
:disabled="true"
|
/>
|
</el-form-item>
|
<el-form-item prop="projectStage" label="项目阶段">
|
<el-select
|
v-model="form.projectStage"
|
disabled
|
placeholder="请选择"
|
>
|
<el-option label="实验室开发阶段" :value="1" />
|
<el-option label="中式试验阶段" :value="2" />
|
<el-option label="生产验证试验阶段" :value="3" />
|
</el-select>
|
</el-form-item>
|
</div>
|
|
<div class="header-title" style="margin-bottom: 38px">
|
<div class="header-title-left">
|
<img src="@/assets/public/headercard.png" />
|
<span>二 、实验信息</span>
|
</div>
|
</div>
|
<div style="padding-left: 25px">
|
<el-form-item prop="experimentDate" label="实验日期">
|
<el-date-picker
|
name="data-test"
|
style="width: 100%"
|
v-model="form.experimentDate"
|
type="date"
|
placeholder="选择日期"
|
value-format="yyyy-MM-dd"
|
:disabled="true"
|
></el-date-picker>
|
</el-form-item>
|
<el-form-item prop="experimentName" label="实验名称">
|
<el-input
|
v-model="form.experimentName"
|
placeholder="请输入"
|
:disabled="true"
|
/>
|
</el-form-item>
|
<el-form-item prop="experimentCode" label="实验编号">
|
<el-input
|
v-model="form.experimentCode"
|
placeholder="请输入"
|
:disabled="true"
|
/>
|
</el-form-item>
|
</div>
|
|
<div class="add-group">
|
<span>实验分组</span>
|
</div>
|
<Table
|
:data="groupTableData"
|
:total="0"
|
:height="null"
|
class="groupTable"
|
>
|
<el-table-column
|
type="index"
|
label="序号"
|
width="80"
|
></el-table-column>
|
<el-table-column
|
prop="groupName"
|
label="组别"
|
></el-table-column>
|
<el-table-column prop="remark" label="备注"></el-table-column>
|
</Table>
|
|
<div class="header-title" style="margin-bottom: 38px">
|
<div class="header-title-left">
|
<img src="@/assets/public/headercard.png" />
|
<span>三 、计划时间及人员</span>
|
</div>
|
</div>
|
<div style="padding-left: 25px">
|
<el-form-item prop="experimentTime" label="试验时间">
|
<el-date-picker
|
style="width: 100%"
|
v-model="form.experimentTime"
|
type="datetimerange"
|
range-separator="至"
|
start-placeholder="开始时间"
|
end-placeholder="结束时间"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
:default-time="['00:00:00', '23:59:59']"
|
:disabled="true"
|
></el-date-picker>
|
</el-form-item>
|
</div>
|
|
<div class="add-group">
|
<div>*</div>
|
<span>参加人员</span>
|
</div>
|
<div class="member-list">
|
<div
|
v-for="item in [3, 4, 5]"
|
:key="item"
|
class="member-list-card"
|
>
|
<div class="member-item">
|
<div class="member-title">
|
{{ ["工艺工程师", "化验师", "实验员"][item - 3] }}
|
</div>
|
<div :class="item == 3 ? 'member-name-box' : 'flex1'">
|
<div
|
:class="
|
item == 3 ? 'member-name-box' : 'member-name-box-2'
|
"
|
>
|
<div
|
v-for="i in memberList(item)"
|
:key="i.userId"
|
class="member-name"
|
>
|
{{ i.nickName }}
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="header-title" style="margin-bottom: 38px">
|
<div class="header-title-left">
|
<img src="@/assets/public/headercard.png" />
|
<span>四 、任务分解</span>
|
</div>
|
</div>
|
|
<Table
|
:data="taskTableData"
|
:total="0"
|
:height="null"
|
class="rwuTable"
|
>
|
<el-table-column
|
type="index"
|
label="序号"
|
width="80"
|
></el-table-column>
|
<el-table-column
|
prop="taskName"
|
label="任务名称"
|
></el-table-column>
|
<el-table-column
|
prop="personCharge"
|
label="负责人"
|
></el-table-column>
|
<el-table-column
|
prop="startTime"
|
label="开始时间"
|
></el-table-column>
|
</Table>
|
|
<div class="header-title">
|
<div class="header-title-left">
|
<img src="@/assets/public/headercard.png" />
|
<span>五 、关键节点</span>
|
</div>
|
</div>
|
<div style="padding-left: 25px">
|
<AIEditor
|
ref="keyNodesEditor"
|
:readOnly="true"
|
:value="form.keyNodes"
|
height="200"
|
/>
|
</div>
|
</el-form>
|
</template>
|
</Card>
|
</div>
|
<!-- 右侧审批流程 -->
|
<div class="approval-flow" v-if="type === 'view'">
|
<div class="flow-content">
|
<approval-process :processData="form.processData" />
|
</div>
|
</div>
|
</div>
|
<div class="approval-dialog-approve" v-if="type === 'approve'">
|
<div class="add-group">
|
<div>*</div>
|
<span>签字确认</span>
|
<el-button
|
v-if="type !== 'view'"
|
type="primary"
|
class="el-icon-plus"
|
@click="openSignature"
|
>签名</el-button
|
>
|
</div>
|
<img
|
v-if="imgSrc"
|
style="width: 200px; height: 100px; margin-left: 25px"
|
:src="imgSrc"
|
fit="fit"
|
/>
|
</div>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="handleClose" v-if="type === 'view'">取 消</el-button>
|
<el-button
|
type="primary"
|
@click="handleApprove"
|
v-if="type === 'approve'"
|
>确认</el-button
|
>
|
</div>
|
</el-dialog>
|
<SignatureCanvas
|
:visible="signatureDialogVisible"
|
@confirm="handleSignatureConfirm"
|
@close="signatureDialogVisible = false"
|
/>
|
</div>
|
</template>
|
|
<script>
|
import ApprovalProcess from "@/components/approvalProcess";
|
import SignatureCanvas from "@/components/SignatureCanvas.vue";
|
import AIEditor from "@/components/AiEditor";
|
import { getDetailById, sign } from "./service";
|
|
export default {
|
name: "ApprovalDialog",
|
components: {
|
ApprovalProcess,
|
SignatureCanvas,
|
AIEditor,
|
},
|
props: {
|
visible: {
|
type: Boolean,
|
default: false,
|
},
|
type: {
|
type: String,
|
default: "approve", // approve-审批，view-查看
|
},
|
data: {
|
type: Object,
|
default: () => ({}),
|
},
|
},
|
data() {
|
return {
|
form: {
|
projectName: "",
|
projectCode: "",
|
projectStage: "",
|
experimentName: "",
|
experimentCode: "",
|
experimentDate: "",
|
experimentTime: [],
|
status: "",
|
experimentDispatchGroups: [],
|
experimentDispatchParticipants: [],
|
experimentDispatchTasks: [],
|
keyNodes: "",
|
processData: [],
|
},
|
rules: {
|
projectName: [
|
{
|
required: true,
|
message: "请输入项目课题方案名称",
|
trigger: "blur",
|
},
|
],
|
projectCode: [
|
{
|
required: true,
|
message: "请输入项目课题方案编号",
|
trigger: "blur",
|
},
|
],
|
experimentName: [
|
{ required: true, message: "请输入实验名称", trigger: "blur" },
|
],
|
experimentCode: [
|
{ required: true, message: "请输入实验编号", trigger: "blur" },
|
],
|
experimentDate: [
|
{ required: true, message: "请选择实验日期", trigger: "change" },
|
],
|
experimentTime: [
|
{ required: true, message: "请选择实验时间范围", trigger: "change" },
|
],
|
},
|
imgSrc: "",
|
signatureDialogVisible: false,
|
groupTableData: [],
|
taskTableData: [],
|
members: {
|
processEngineer: [], // 工艺工程师
|
experimenter: [], // 实验员
|
analyst: [], // 化验师
|
},
|
};
|
},
|
computed: {
|
dialogTitle() {
|
return this.type === "approve" ? "确认实验调度" : "实验调度详情";
|
},
|
},
|
watch: {
|
data: {
|
handler(val) {
|
if (val) {
|
this.getDetail(val.id);
|
}
|
},
|
immediate: true,
|
},
|
},
|
methods: {
|
// 获取详情
|
getDetail(id) {
|
getDetailById({ id })
|
.then((res) => {
|
if (res) {
|
const data = res;
|
// 设置表单数据
|
this.form = {
|
projectName: data.projectName,
|
projectCode: data.projectCode,
|
projectStage: data.projectStage,
|
experimentName: data.experimentName,
|
experimentCode: data.experimentCode,
|
experimentDate: data.experimentDate,
|
experimentTime: [
|
data.experimentStartTime,
|
data.experimentEndTime,
|
],
|
status: data.status,
|
experimentDispatchGroups: data.experimentDispatchGroups || [],
|
experimentDispatchParticipants:
|
data.experimentDispatchParticipants || [],
|
experimentDispatchTasks: data.experimentDispatchTasks || [],
|
keyNodes: data.keyNodes,
|
processData: [],
|
};
|
|
// 设置表格数据
|
this.groupTableData = data.experimentDispatchGroups || [];
|
this.taskTableData = data.experimentDispatchTasks || [];
|
|
// 处理参与人员数据
|
this.members = {
|
processEngineer:
|
data.experimentDispatchParticipants.filter(
|
(p) => p.roleType === 3
|
) || [],
|
experimenter:
|
data.experimentDispatchParticipants.filter(
|
(p) => p.roleType === 5
|
) || [],
|
analyst:
|
data.experimentDispatchParticipants.filter(
|
(p) => p.roleType === 4
|
) || [],
|
};
|
|
// 组装流程数据
|
let processData = [];
|
// 提交节点
|
processData.push({
|
type: "primary",
|
mode: "list",
|
fields: [
|
{ label: "提交人：", value: data.createBy || "" },
|
{ label: "提交时间：", value: data.createTime || "" },
|
],
|
});
|
|
// 处理参与人员数据，按角色分类
|
const participants = data.experimentDispatchParticipants || [];
|
const analyst = participants.filter((p) => p.roleType === 4); // 化验师
|
const experimenter = participants.filter((p) => p.roleType === 5); // 实验员
|
|
// 添加确认节点
|
processData.push({
|
type: "success",
|
mode: "card",
|
groups: [
|
{
|
title: "化验师",
|
members: analyst.map((item) => ({
|
name: item.nickName || "",
|
status: item.status === 2 ? "已确认" : "待确认",
|
approveTime: item.status === 2 ? item.signTime : "",
|
avatar: item.avatar || "",
|
})),
|
},
|
{
|
title: "实验员",
|
members: experimenter.map((item) => ({
|
name: item.nickName || "",
|
status: item.status === 2 ? "已确认" : "待确认",
|
approveTime: item.status === 2 ? item.signTime : "",
|
avatar: item.avatar || "",
|
})),
|
},
|
],
|
});
|
|
this.form.processData = processData;
|
}
|
})
|
.catch((err) => {
|
console.error("获取详情失败：", err);
|
this.$message.error("获取详情失败");
|
});
|
},
|
memberList(type) {
|
switch (type) {
|
case 3: // 工艺工程师
|
return this.members.processEngineer;
|
case 5: // 实验员
|
return this.members.experimenter;
|
case 4: // 化验师
|
return this.members.analyst;
|
default:
|
return [];
|
}
|
},
|
handleClose() {
|
this.$emit("close", false);
|
this.$emit("update:data", {}); // 触发事件通知父组件更新data
|
this.signatureDialogVisible = false;
|
this.imgSrc = '';
|
},
|
handleApprove() {
|
// 组装签名数据
|
const params = {
|
dispatchId: this.data.id, // 传递当前调度id
|
confirmSign: this.imgSrc, // 签名图片
|
};
|
sign(params).then(res => {
|
if (res && res.code === 200) {
|
this.$message.success('签字成功');
|
this.handleClose();
|
} else {
|
this.$message.error(res.msg || '签字失败');
|
}
|
}).catch(() => {
|
this.$message.error('签字失败');
|
});
|
},
|
openSignature() {
|
this.signatureDialogVisible = true;
|
},
|
handleSignatureConfirm(imageData) {
|
this.signatureDialogVisible = false;
|
// 模拟上传签名图片，实际应调用上传接口，成功后回显图片链接
|
// TODO: 替换为实际上传接口
|
// uploadSignature(imageData).then(url => { this.imgSrc = url })
|
this.imgSrc = 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'; // 默认图片链接
|
},
|
},
|
};
|
</script>
|
|
<style scoped lang="less">
|
::v-deep .el-dialog__header {
|
border-bottom: 1px solid #e4e7ed;
|
}
|
|
.approval-dialog {
|
display: flex;
|
height: 60vh;
|
|
.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: 40px 20px;
|
width: 405px;
|
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-dialog-approve {
|
margin-top: 26px;
|
}
|
|
.approval-content-card {
|
height: calc(100% - 100px) !important;
|
box-shadow: none !important;
|
}
|
|
.header-title {
|
display: flex;
|
align-items: center;
|
flex-wrap: wrap;
|
gap: 13px;
|
margin-top: 38px;
|
|
.header-title-left {
|
display: flex;
|
align-items: center;
|
gap: 13px;
|
|
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 {
|
margin-top: 0;
|
.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 {
|
img {
|
border: 2px dashed #049c9a;
|
}
|
}
|
|
.add-group {
|
padding-left: 25px;
|
margin-top: 14px;
|
display: flex;
|
align-items: center;
|
margin-bottom: 19px;
|
|
div {
|
color: #f56c6c;
|
}
|
|
span {
|
font-weight: 500;
|
font-size: 14px;
|
color: #222222;
|
line-height: 21px;
|
margin: 0 32px 0 8px;
|
}
|
}
|
|
.groupTable {
|
width: 65%;
|
padding-left: 40px;
|
}
|
.rwuTable {
|
width: 85%;
|
padding-left: 40px;
|
}
|
|
.member-list {
|
margin-top: 18px;
|
display: flex;
|
flex-wrap: wrap;
|
gap: 28px;
|
margin-left: 38px;
|
|
.member-list-card {
|
width: 280px;
|
height: 300px;
|
border-radius: 8px;
|
border: 1px solid #dcdfe6;
|
|
&:nth-child(1) {
|
background: linear-gradient(
|
to bottom,
|
rgba(4, 156, 154, 0.2) 0%,
|
rgba(5, 242, 194, 0) 70%
|
);
|
}
|
|
&:nth-child(2) {
|
background: linear-gradient(
|
to bottom,
|
rgba(5, 160, 193, 0.2) 0%,
|
rgba(5, 242, 194, 0) 70%
|
);
|
}
|
|
&:nth-child(3) {
|
background: linear-gradient(
|
to bottom,
|
rgba(255, 77, 79, 0.2) 0%,
|
rgba(255, 242, 194, 0) 70%
|
);
|
}
|
|
&:nth-child(4) {
|
background: linear-gradient(
|
to bottom,
|
rgba(250, 199, 20, 0.21) 0%,
|
rgba(255, 242, 194, 0) 70%
|
);
|
}
|
|
.member-item {
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
|
.member-title {
|
margin-top: 20px;
|
width: 100%;
|
font-family: "Source Han Sans CN Bold Bold";
|
font-weight: bold;
|
font-size: 16px;
|
color: rgba(0, 0, 0, 0.8);
|
line-height: 16px;
|
text-align: center;
|
}
|
.flex1 {
|
flex: 1;
|
}
|
|
.member-name-box {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.member-name-box-2 {
|
flex: 1;
|
padding: 0 20px;
|
padding-top: 40px;
|
display: grid;
|
grid-template-columns: repeat(4, 1fr);
|
gap: 20px;
|
justify-items: center;
|
align-items: start;
|
}
|
|
.member-name {
|
width: 60px;
|
height: 60px;
|
background: #7d8b79;
|
border-radius: 50%;
|
text-align: center;
|
line-height: 60px;
|
font-weight: 500;
|
font-size: 16px;
|
color: #ffffff;
|
margin: 0;
|
}
|
|
.member-change {
|
display: flex;
|
justify-content: center;
|
padding: 10px 0;
|
margin-top: auto;
|
cursor: pointer;
|
.member-change-btn {
|
background: #fff1f0;
|
border-radius: 4px;
|
border: 1px solid #ffccc7;
|
padding: 1px 8px;
|
font-weight: 400;
|
font-size: 12px;
|
color: #ff4d4f;
|
}
|
}
|
}
|
}
|
}
|
|
.dialog-footer {
|
align-items: center;
|
display: flex;
|
justify-content: center;
|
button {
|
width: 150px;
|
}
|
}
|
</style>
|
