<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>
|
<el-form
|
ref="form"
|
:model="form"
|
:rules="rules"
|
inline
|
label-position="top"
|
style="margin-top: 38px"
|
>
|
<el-form-item prop="name" label="项目课题方案名称">
|
<el-input v-model="form.name" placeholder="请输入" />
|
</el-form-item>
|
<el-form-item prop="description" label="项目阶段">
|
<el-input v-model="form.description" placeholder="请输入" />
|
</el-form-item>
|
<el-form-item prop="description" label="项目课题方案编号">
|
<el-input v-model="form.description" placeholder="请输入" />
|
</el-form-item>
|
</el-form>
|
<div class="header-title">
|
<div class="header-title-left">
|
<img src="@/assets/public/headercard.png" />
|
<div>一 、实验目的</div>
|
</div>
|
</div>
|
<AiEditor
|
ref="purposeEditor"
|
v-model="editorContents.purpose"
|
height="200px"
|
placeholder="请输入实验目的..."
|
/>
|
<div class="header-title">
|
<div class="header-title-left">
|
<img src="@/assets/public/headercard.png" />
|
<div>二 、实验拆料和设备</div>
|
</div>
|
</div>
|
<div class="item-title">
|
<span>1.实验材料</span>
|
</div>
|
<AiEditor
|
ref="materialEditor"
|
v-model="editorContents.material"
|
height="200px"
|
placeholder="请输入实验材料..."
|
/>
|
<div class="item-title">
|
<span>2.实验设备</span>
|
</div>
|
<AiEditor
|
ref="equipmentEditor"
|
v-model="editorContents.equipment"
|
height="200px"
|
placeholder="请输入实验设备..."
|
/>
|
<div class="header-title">
|
<div class="header-title-left">
|
<img src="@/assets/public/headercard.png" />
|
<div>三 、检测方法及开发</div>
|
</div>
|
</div>
|
<AiEditor
|
ref="methodEditor"
|
v-model="editorContents.method"
|
height="200px"
|
placeholder="请输入检测方法及开发..."
|
/>
|
<div class="header-title">
|
<div class="header-title-left">
|
<img src="@/assets/public/headercard.png" />
|
<div>四 、实验步骤</div>
|
</div>
|
</div>
|
<AiEditor
|
ref="stepsEditor"
|
v-model="editorContents.steps"
|
height="200px"
|
placeholder="请输入实验步骤..."
|
/>
|
<div class="header-title">
|
<div class="header-title-left">
|
<img src="@/assets/public/headercard.png" />
|
<div>五 、数据采集及分析</div>
|
</div>
|
</div>
|
<AiEditor
|
ref="dataAnalysisEditor"
|
v-model="editorContents.dataAnalysis"
|
height="200px"
|
placeholder="请输入数据采集及分析..."
|
/>
|
<div class="header-title">
|
<div class="header-title-left">
|
<img src="@/assets/public/headercard.png" />
|
<div>六 、结果评估</div>
|
</div>
|
</div>
|
<AiEditor
|
ref="evaluationEditor"
|
v-model="editorContents.evaluation"
|
height="200px"
|
placeholder="请输入结果评估..."
|
/>
|
<div class="header-title">
|
<div class="header-title-left">
|
<img src="@/assets/public/headercard.png" />
|
<span>注意事项</span>
|
</div>
|
</div>
|
<AiEditor
|
ref="notesEditor"
|
v-model="editorContents.notes"
|
height="200px"
|
placeholder="请输入注意事项..."
|
/>
|
<div class="add-project-footer">
|
<el-button type="primary" class="save-btn" @click="handleSave">保存</el-button>
|
<el-button @click="handleSaveDraft">存草稿</el-button>
|
</div>
|
</template>
|
<SelectMember ref="selectMember" />
|
</Card>
|
</template>
|
|
<script>
|
import AiEditor from '@/components/AiEditor'
|
// import { savePlan, saveDraft } from '@/api/approvalPlan'
|
|
export default {
|
name: "AddProject",
|
components: {
|
AiEditor
|
},
|
data() {
|
return {
|
form: {
|
name: '',
|
description: '',
|
purpose: '',
|
material: '',
|
equipment: '',
|
method: '',
|
steps: '',
|
dataAnalysis: '',
|
evaluation: '',
|
notes: ''
|
},
|
editorContents: {
|
purpose: '',
|
material: '',
|
equipment: '',
|
method: '',
|
steps: '',
|
dataAnalysis: '',
|
evaluation: '',
|
notes: ''
|
},
|
rules: {
|
name: [
|
{ required: true, message: "请输入项目组名称", trigger: "blur" },
|
],
|
description: [
|
{ required: true, message: "请输入项目组描述", trigger: "blur" },
|
],
|
purpose: [
|
{ required: true, message: "请输入实验目的", trigger: "blur" },
|
],
|
material: [
|
{ required: true, message: "请输入实验材料", trigger: "blur" },
|
],
|
equipment: [
|
{ required: true, message: "请输入实验设备", trigger: "blur" },
|
],
|
method: [
|
{ required: true, message: "请输入检测方法及开发", trigger: "blur" },
|
],
|
steps: [
|
{ required: true, message: "请输入实验步骤", trigger: "blur" },
|
],
|
dataAnalysis: [
|
{ required: true, message: "请输入数据采集及分析", trigger: "blur" },
|
],
|
evaluation: [
|
{ required: true, message: "请输入结果评估", trigger: "blur" },
|
],
|
notes: [
|
{ required: true, message: "请输入注意事项", trigger: "blur" },
|
],
|
},
|
};
|
},
|
methods: {
|
// 获取所有编辑器的内容
|
getAllEditorContent() {
|
return {
|
purpose: this.$refs.purposeEditor.getContent(),
|
material: this.$refs.materialEditor.getContent(),
|
equipment: this.$refs.equipmentEditor.getContent(),
|
method: this.$refs.methodEditor.getContent(),
|
steps: this.$refs.stepsEditor.getContent(),
|
dataAnalysis: this.$refs.dataAnalysisEditor.getContent(),
|
evaluation: this.$refs.evaluationEditor.getContent(),
|
notes: this.$refs.notesEditor.getContent()
|
}
|
},
|
// 保存
|
handleSave() {
|
this.$refs.form.validate((valid) => {
|
if (valid) {
|
const formData = {
|
...this.form,
|
...this.getAllEditorContent()
|
}
|
console.log('保存数据：', formData)
|
this.$message.success('保存成功')
|
}
|
})
|
},
|
// 保存草稿
|
handleSaveDraft() {
|
const formData = {
|
...this.form,
|
...this.getAllEditorContent(),
|
status: 'draft'
|
}
|
console.log('草稿数据：', formData)
|
this.$message.success('草稿保存成功')
|
},
|
},
|
};
|
</script>
|
|
<style scoped lang="less">
|
.el-form--inline .el-form-item {
|
margin-right: 83px;
|
}
|
|
.header-title {
|
display: flex;
|
align-items: center;
|
flex-wrap: wrap;
|
gap: 13px;
|
|
.header-title-left {
|
display: flex;
|
align-items: center;
|
gap: 13px;
|
margin-top: 38px;
|
|
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;
|
}
|
}
|
|
.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;
|
}
|
}
|
}
|
.header-title:first-child {
|
.header-title-left {
|
margin-top: 0;
|
}
|
}
|
|
.add-project-footer {
|
margin-top: 43px;
|
button {
|
width: 220px;
|
}
|
.save-btn {
|
margin-right: 20px;
|
}
|
}
|
|
.ai-editor-container {
|
width: 75%;
|
margin: 20px 0;
|
border: 1px solid #dcdfe6;
|
border-radius: 4px;
|
background: #fff;
|
}
|
</style>
|
