<template>
|
<Card>
|
<template style="position: relative">
|
<div class="header-title">
|
<div class="header-title-left">
|
<img src="@/assets/public/headercard.png" />
|
<div>所属实验调度</div>
|
</div>
|
</div>
|
|
<div class="table-container">
|
<el-table :data="experimentData" border style="width: 100%">
|
<el-table-column type="index" label="序号" width="80"></el-table-column>
|
<el-table-column prop="projectName" label="所属项目课题方案"></el-table-column>
|
<el-table-column prop="experimentCode" label="实验编号"></el-table-column>
|
<el-table-column prop="experimentName" label="实验名称"></el-table-column>
|
<el-table-column prop="experimentDate" label="通知时间"></el-table-column>
|
<el-table-column prop="experimentStartTime" label="实验开始时间"></el-table-column>
|
<el-table-column prop="experimentEndTime" label="实验结束时间"></el-table-column>
|
<el-table-column prop="participantsName" label="参加人员"></el-table-column>
|
<el-table-column prop="status" label="状态">
|
<template slot-scope="scope">
|
<el-tag :type="getStatusType(scope.row.status)">
|
{{ getStatusText(scope.row.status) }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
|
<div class="header-title">
|
<div class="header-title-left">
|
<img src="@/assets/public/headercard.png" />
|
<div>中止原因说明</div>
|
</div>
|
</div>
|
|
<div class="content-box">
|
<AiEditor
|
ref="reasonEditor"
|
:value="editorContent"
|
height="200px"
|
placeholder="请输入申请说明..."
|
/>
|
</div>
|
|
<div class="upload-section">
|
<div class="upload-title">
|
<span>上传文件</span>
|
</div>
|
<el-upload
|
class="upload-demo"
|
action=""
|
:auto-upload="false"
|
:on-change="handleFileChange"
|
:file-list="fileList"
|
:on-remove="handleFileRemove"
|
multiple
|
:limit="5"
|
>
|
<el-button size="small" type="primary">选择文件</el-button>
|
<div slot="tip" class="el-upload__tip">支持格式：.rar .zip .doc .docx .pdf .jpg...</div>
|
</el-upload>
|
</div>
|
|
<div class="footer-section">
|
<div class="footer-content">
|
<el-button type="primary" @click="openSignatureDialog" >提交</el-button>
|
<el-checkbox v-model="agreement">我确认，已仔细实验说明，准确描述本次实验中止全部情况及原因，特此申请中止本次实验。</el-checkbox>
|
</div>
|
</div>
|
</template>
|
|
<!-- 签字确认弹窗 -->
|
<el-dialog
|
title="实验中止确认"
|
:visible.sync="signatureDialogVisible"
|
width="30%"
|
:close-on-click-modal="false"
|
@close="handleDialogClose"
|
>
|
<div class="signature-dialog">
|
<div class="add-group">
|
<div class="required">*</div>
|
<span>签字确认</span>
|
<el-button type="primary" class="el-icon-plus" @click="openSignature">签名</el-button>
|
</div>
|
<img
|
v-if="imgSrc"
|
:src="imgSrc"
|
alt="签名"
|
class="signature-preview"
|
/>
|
</div>
|
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="handleDialogClose">取 消</el-button>
|
<el-button type="primary" @click="handleConfirm">确 认</el-button>
|
</div>
|
</el-dialog>
|
|
<SignatureCanvas
|
:visible="signatureCanvasVisible"
|
@confirm="handleSignatureConfirm"
|
/>
|
</Card>
|
</template>
|
|
<script>
|
import AiEditor from '@/components/AiEditor'
|
import SignatureCanvas from "@/components/SignatureCanvas.vue"
|
import { getDetail, applicationTermination } from './service'
|
|
export default {
|
name: 'StopExperiment',
|
components: {
|
AiEditor,
|
SignatureCanvas
|
},
|
data() {
|
return {
|
id: null,
|
experimentData: [],
|
editorContent: '',
|
fileList: [],
|
agreement: false,
|
signatureDialogVisible: false,
|
signatureCanvasVisible: false,
|
imgSrc: "",
|
loading: false
|
}
|
},
|
created() {
|
this.id = this.$route.query.id
|
if (this.id) {
|
this.getExperimentDetail()
|
} else {
|
this.$message.error('参数错误，缺少实验ID')
|
}
|
},
|
methods: {
|
// 获取实验详情
|
async getExperimentDetail() {
|
try {
|
this.loading = true
|
const res = await getDetail({ id: this.id })
|
if (res) {
|
const data = res
|
this.experimentData = [{...data.experimentDispatch}]
|
} else {
|
this.$message.warning('未获取到实验详情')
|
}
|
} catch (error) {
|
console.error('获取实验详情失败:', error)
|
this.$message.error('获取实验详情失败')
|
} finally {
|
this.loading = false
|
}
|
},
|
handleFileChange(file, fileList) {
|
// this.fileList = fileList
|
this.fileList = [{uid: Date.now(),
|
name: '实验中止申请表.txt',
|
raw: file,
|
size: file.size,
|
url:'https://example.com/files/default-stop-application.pdf',
|
status: 'success'}]
|
},
|
handleFileRemove(file, fileList) {
|
this.fileList = fileList
|
},
|
getEditorContent() {
|
return this.$refs.reasonEditor.getContent()
|
},
|
validateForm() {
|
const content = this.getEditorContent()
|
if (!content || content === '<p></p>' || content.trim() === '<p></p>') {
|
this.$message.error('请填写中止原因说明')
|
return false
|
}
|
if (!this.agreement) {
|
this.$message.error('请先勾选确认申请说明')
|
return false
|
}
|
return true
|
},
|
openSignatureDialog() {
|
if (!this.validateForm()) return
|
this.signatureDialogVisible = true
|
},
|
handleDialogClose() {
|
this.signatureDialogVisible = false
|
this.imgSrc = ""
|
},
|
openSignature() {
|
this.signatureCanvasVisible = true
|
},
|
handleSignatureConfirm(imageData) {
|
this.signatureCanvasVisible = false
|
// this.imgSrc = imageData
|
this.imgSrc = 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
|
},
|
async handleConfirm() {
|
if (!this.imgSrc) {
|
this.$message.warning("请先完成签名确认")
|
return
|
}
|
if (this.validateForm()) {
|
try {
|
this.loading = true
|
|
// 处理多个文件，将文件路径和名称通过逗号拼接
|
let filePaths = '';
|
let fileNames = '';
|
|
if (this.fileList.length > 0) {
|
// 模拟文件路径
|
filePaths = this.fileList.map(file => file.url).join(',')
|
|
// 文件名称通过逗号拼接
|
fileNames = this.fileList.map(file => file.name).join(',')
|
}
|
|
const formData = {
|
id: this.id, // 实验方案id
|
stopReason: this.getEditorContent(), // 中止原因
|
commitSign: this.imgSrc, // 提交签字
|
stopFile: filePaths, // 中止文件路径，多个文件路径通过逗号拼接
|
stopFileName: fileNames // 中止文件名称，多个文件名称通过逗号拼接
|
}
|
|
console.log('提交的数据：', formData)
|
|
await applicationTermination(formData)
|
this.$message.success('提交成功')
|
this.handleDialogClose()
|
// 提交成功后返回列表页
|
this.$router.go(-1)
|
} catch (error) {
|
console.error('提交失败:', error)
|
this.$message.error('提交失败')
|
} finally {
|
this.loading = false
|
}
|
}
|
},
|
getStatusType(status) {
|
const statusMap = {
|
"-1": "info",
|
"1": "warning",
|
"2": "success",
|
"3": "info"
|
};
|
return statusMap[status] || "info";
|
},
|
getStatusText(status) {
|
const statusMap = {
|
"-1": "草稿箱",
|
"1": "待确认",
|
"2": "已确认",
|
"3": "已封存"
|
};
|
return statusMap[status] || "未知";
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="less">
|
.header-title {
|
display: flex;
|
align-items: center;
|
gap: 13px;
|
margin-top: 38px;
|
margin-bottom: 20px;
|
|
.header-title-left {
|
display: flex;
|
align-items: center;
|
gap: 13px;
|
|
img {
|
width: 12px;
|
height: 19px;
|
}
|
|
span {
|
font-weight: bold;
|
font-size: 18px;
|
color: #222222;
|
line-height: 27px;
|
font-family: "Source Han Sans CN Bold Bold";
|
}
|
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;
|
}
|
}
|
}
|
}
|
.header-title:first-child {
|
margin-top: 0;
|
}
|
|
.table-container {
|
margin: 0 25px;
|
}
|
|
.content-box {
|
padding: 0 25px;
|
margin-bottom: 30px;
|
width: 65%;
|
}
|
|
.upload-section {
|
padding: 0 25px;
|
margin-bottom: 30px;
|
|
.upload-title {
|
margin-bottom: 15px;
|
span {
|
font-size: 14px;
|
color: #222222;
|
// &::before {
|
// content: "*";
|
// color: #f56c6c;
|
// margin-right: 4px;
|
// }
|
}
|
}
|
|
.el-upload__tip {
|
color: #909399;
|
font-size: 12px;
|
margin-top: 8px;
|
}
|
}
|
|
.footer-section {
|
padding: 20px 25px;
|
// border-top: 1px solid #e4e7ed;
|
margin-top: 60px;
|
|
.footer-content {
|
display: flex;
|
align-items: center;
|
gap: 20px;
|
|
.el-button {
|
width: 120px;
|
}
|
}
|
}
|
|
.signature-dialog {
|
padding: 0 20px;
|
|
.add-group {
|
display: flex;
|
align-items: center;
|
margin-bottom: 15px;
|
|
.required {
|
color: #f56c6c;
|
margin-right: 4px;
|
}
|
|
span {
|
margin-right: 15px;
|
font-size: 14px;
|
color: #303133;
|
}
|
}
|
|
.signature-preview {
|
width: 200px;
|
height: 100px;
|
border: 2px dashed #049c9a;
|
border-radius: 4px;
|
object-fit: contain;
|
}
|
}
|
|
.dialog-footer {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
padding-top: 20px;
|
|
.el-button {
|
width: 150px;
|
margin: 0 10px;
|
}
|
}
|
</style>
|
