<template>
|
<Card>
|
<template style="position: relative">
|
<div class="header-title">
|
<div class="header-title-left">
|
<img src="@/assets/public/headercard.png" />
|
<span>所属实验调度</span>
|
</div>
|
</div>
|
|
<div class="table-container">
|
<el-table :data="experimentData" border style="width: 100%">
|
<el-table-column prop="name" label="所属项目课题方案" />
|
<el-table-column prop="code" label="实验编号" />
|
<el-table-column prop="title" label="实验主题" />
|
<el-table-column prop="startTime" label="实验开始时间" />
|
<el-table-column prop="endTime" label="实验结束时间" />
|
<el-table-column prop="participants" label="参加人员" />
|
<el-table-column prop="status" label="状态" />
|
</el-table>
|
</div>
|
|
<div class="header-title">
|
<div class="header-title-left">
|
<img src="@/assets/public/headercard.png" />
|
<span>申请说明</span>
|
</div>
|
</div>
|
|
<div class="content-box">
|
<AiEditor
|
ref="reasonEditor"
|
v-model="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"
|
>
|
<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" :disabled="!agreement">提交</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" :disabled="!imgSrc">确 认</el-button>
|
</div>
|
</el-dialog>
|
|
<SignatureCanvas
|
:visible="signatureCanvasVisible"
|
@confirm="handleSignatureConfirm"
|
/>
|
</Card>
|
</template>
|
|
<script>
|
import AiEditor from '@/components/AiEditor'
|
import SignatureCanvas from "@/components/SignatureCanvas.vue"
|
|
export default {
|
name: 'StopExperiment',
|
components: {
|
AiEditor,
|
SignatureCanvas
|
},
|
data() {
|
return {
|
experimentData: [{
|
name: '金标准研究项',
|
code: 'DD-EX001',
|
title: '金标准研究项',
|
startTime: '2025-1-2 14:50:19',
|
endTime: '2025-02-27',
|
participants: '范兵, 李天霸, 张三, 李四',
|
status: '已确认'
|
}],
|
editorContent: '',
|
fileList: [],
|
agreement: false,
|
signatureDialogVisible: false,
|
signatureCanvasVisible: false,
|
imgSrc: "",
|
}
|
},
|
methods: {
|
handleFileChange(file, fileList) {
|
this.fileList = fileList
|
},
|
getEditorContent() {
|
return this.$refs.reasonEditor.getContent()
|
},
|
validateForm() {
|
const content = this.getEditorContent()
|
if (!content) {
|
this.$message.error('请填写申请说明')
|
return false
|
}
|
if (!this.agreement) {
|
this.$message.error('请确认申请说明')
|
return false
|
}
|
return true
|
},
|
openSignatureDialog() {
|
this.signatureDialogVisible = true
|
},
|
handleDialogClose() {
|
this.signatureDialogVisible = false
|
this.imgSrc = ""
|
},
|
openSignature() {
|
this.signatureCanvasVisible = true
|
},
|
handleSignatureConfirm(imageData) {
|
this.signatureCanvasVisible = false
|
this.imgSrc = imageData
|
},
|
handleConfirm() {
|
if (!this.imgSrc) {
|
this.$message.warning("请先完成签名确认")
|
return
|
}
|
if (this.validateForm()) {
|
const formData = {
|
reason: this.getEditorContent(),
|
files: this.fileList,
|
experimentInfo: this.experimentData[0],
|
signature: this.imgSrc
|
}
|
console.log('提交的数据：', formData)
|
this.$message.success('提交成功')
|
this.handleDialogClose()
|
}
|
}
|
}
|
}
|
</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";
|
}
|
}
|
}
|
.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>
|
