<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>
|
<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>
|
<div class="item-title">
|
<span>2.实验设备</span>
|
</div>
|
|
<div class="header-title">
|
<div class="header-title-left">
|
<img src="@/assets/public/headercard.png" />
|
<div>三 、检测方法及开发</div>
|
</div>
|
</div>
|
<div class="header-title">
|
<div class="header-title-left">
|
<img src="@/assets/public/headercard.png" />
|
<div>四 、实验步骤</div>
|
</div>
|
</div>
|
<div class="header-title">
|
<div class="header-title-left">
|
<img src="@/assets/public/headercard.png" />
|
<div>五 、数据采集及分析</div>
|
</div>
|
</div>
|
<div class="header-title">
|
<div class="header-title-left">
|
<img src="@/assets/public/headercard.png" />
|
<div>六 、结果评估</div>
|
</div>
|
</div>
|
<div class="header-title">
|
<div class="header-title-left">
|
<img src="@/assets/public/headercard.png" />
|
<span>注意事项</span>
|
</div>
|
</div>
|
<div class="add-project-footer">
|
<el-button type="primary" class="save-btn">保存</el-button>
|
<el-button>存草稿</el-button>
|
</div>
|
</template>
|
<SelectMember ref="selectMember" />
|
</Card>
|
</template>
|
|
<script>
|
export default {
|
name: "AddProject",
|
data() {
|
return {
|
form: {},
|
rules: {
|
name: [
|
{ required: true, message: "请输入项目组名称", trigger: "blur" },
|
],
|
description: [
|
{ required: true, message: "请输入项目组描述", trigger: "blur" },
|
],
|
},
|
};
|
},
|
methods: {
|
submitForm() {
|
this.$refs.form.validate((valid) => {
|
if (valid) {
|
console.log("submit!");
|
}
|
});
|
},
|
addMember() {
|
this.$refs.selectMember.open();
|
},
|
memberList(i) {
|
switch (i) {
|
case 1:
|
return [1];
|
case 2:
|
return [1];
|
case 3:
|
return [1, 2, 3, 4, 5, 6, 7, 8];
|
case 4:
|
return [1, 2, 3, 4, 5, 6, 7, 8];
|
default:
|
break;
|
}
|
},
|
},
|
};
|
</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;
|
}
|
}
|
</style>
|
