<template>
|
<Card>
|
<template style="position: relative">
|
<el-form
|
ref="form"
|
:model="form"
|
:rules="rules"
|
inline
|
label-position="top"
|
>
|
<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="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>
|
</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="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>
|
</div>
|
|
<div class="add-group">
|
<span>实验分组</span>
|
<el-button type="primary" class="el-icon-plus" @click="handleAddGroup">添加组别</el-button>
|
</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>
|
<el-table-column label="操作" width="200">
|
<template slot-scope="scope">
|
<el-button type="text" @click="handleEditGroup(scope.row)">编辑</el-button>
|
<el-button type="text" @click="handleDeleteGroup(scope.row)">移除</el-button>
|
</template>
|
</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="name" label="试验时间">
|
<el-input v-model="form.name" placeholder="请输入" />
|
</el-form-item>
|
</div>
|
<div class="add-group">
|
<div>*</div>
|
<span>参加人员</span>
|
<el-button type="primary" class="el-icon-plus" @click="addMember">选择参加人员</el-button>
|
</div>
|
<div class="member-list">
|
<div v-for="item in 3" :key="item" class="member-list-card">
|
<div class="member-item">
|
<div class="member-title">
|
{{ ["工艺工程师", "实验员", "化验师"][item - 1] }}
|
</div>
|
<div
|
:class="item == 1 || item == 2 ? 'member-name-box' : 'flex1'"
|
>
|
<div
|
:class="
|
item == 1 || item == 2
|
? 'member-name-box'
|
: 'member-name-box-2'
|
"
|
>
|
<div
|
v-for="i in memberList(item)"
|
:key="i"
|
class="member-name"
|
>
|
张三
|
</div>
|
</div>
|
</div>
|
<div class="member-change">
|
<div class="member-change-btn">修改</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>
|
<el-button type="primary" class="el-icon-plus" @click="handleAddTask">新增任务</el-button>
|
</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="leader" label="负责人"></el-table-column>
|
<el-table-column prop="startTime" label="开始时间"></el-table-column>
|
<el-table-column label="操作" width="200">
|
<template slot-scope="scope">
|
<el-button type="text" @click="handleEditTask(scope.row)">编辑</el-button>
|
<el-button type="text" @click="handleDeleteTask(scope.row)">移除</el-button>
|
</template>
|
</el-table-column>
|
</Table>
|
|
<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>
|
</el-form>
|
</template>
|
<SelectMember ref="selectMember" />
|
<AddGroupDialog ref="addGroupDialog" @submit="handleGroupSubmit" />
|
<AddTaskDialog ref="addTaskDialog" @submit="handleTaskSubmit" />
|
</Card>
|
</template>
|
|
<script>
|
import SelectMember from '@/components/SelectMember'
|
import AddGroupDialog from './components/AddGroupDialog'
|
import AddTaskDialog from './components/AddTaskDialog'
|
export default {
|
name: "AddProject",
|
components: {
|
SelectMember,
|
AddGroupDialog,
|
AddTaskDialog
|
},
|
data() {
|
return {
|
form: {},
|
rules: {
|
name: [
|
{ required: true, message: "请输入项目组名称", trigger: "blur" },
|
],
|
description: [
|
{ required: true, message: "请输入项目组描述", trigger: "blur" },
|
],
|
},
|
groupTableData: [],
|
taskTableData: []
|
};
|
},
|
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;
|
}
|
},
|
handleAddGroup() {
|
this.$refs.addGroupDialog.open()
|
},
|
handleEditGroup(row) {
|
this.$refs.addGroupDialog.open(row)
|
},
|
handleDeleteGroup(row) {
|
this.$confirm('确认删除该组别吗？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
const index = this.groupTableData.findIndex(item => item === row)
|
if (index > -1) {
|
this.groupTableData.splice(index, 1)
|
this.$message.success('删除成功')
|
}
|
}).catch(() => {})
|
},
|
handleGroupSubmit(form) {
|
const index = this.groupTableData.findIndex(item => item.groupName === form.groupName)
|
if (index > -1) {
|
this.groupTableData.splice(index, 1, form)
|
} else {
|
this.groupTableData.push(form)
|
}
|
},
|
handleAddTask() {
|
this.$refs.addTaskDialog.open()
|
},
|
handleEditTask(row) {
|
this.$refs.addTaskDialog.open(row)
|
},
|
handleDeleteTask(row) {
|
this.$confirm('确认删除该任务吗？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
const index = this.taskTableData.findIndex(item => item === row)
|
if (index > -1) {
|
this.taskTableData.splice(index, 1)
|
this.$message.success('删除成功')
|
}
|
}).catch(() => {})
|
},
|
handleTaskSubmit(form) {
|
const index = this.taskTableData.findIndex(item => item.taskName === form.taskName)
|
if (index > -1) {
|
this.taskTableData.splice(index, 1, form)
|
} else {
|
this.taskTableData.push(form)
|
}
|
}
|
},
|
};
|
</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;
|
margin-top: 38px;
|
justify-content: space-between;
|
.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;
|
}
|
}
|
|
.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 {
|
margin-top: 0px;
|
.header-title-left {
|
margin-top: 0;
|
}
|
}
|
|
.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: 340px;
|
height: 400px;
|
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;
|
}
|
}
|
}
|
}
|
}
|
|
.add-project-footer {
|
margin-top: 43px;
|
|
button {
|
width: 220px;
|
}
|
|
.save-btn {
|
margin-right: 20px;
|
}
|
}
|
</style>
|
