<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="projectName" label="项目课题方案名称">
|
<el-select
|
ref="projectNameSelect"
|
v-model="form.projectName"
|
filterable
|
remote
|
:remote-method="debouncedSearch"
|
:loading="projectLoading"
|
placeholder="请输入方案名称"
|
@change="handleProjectNameChange"
|
@focus="handleProjectFocus"
|
>
|
<el-option
|
v-for="item in projectOptions"
|
:key="item.id"
|
:label="item.projectName"
|
:value="item.id"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item prop="proposalId" label="项目课题方案编号">
|
<el-select
|
ref="proposalIdSelect"
|
v-model="form.proposalId"
|
filterable
|
remote
|
:remote-method="debouncedSearch"
|
:loading="projectLoading"
|
placeholder="请输入方案编号"
|
@change="handleProposalIdChange"
|
@focus="handleProjectFocus"
|
>
|
<el-option
|
v-for="item in projectOptions"
|
:key="item.id"
|
:label="item.projectCode"
|
:value="item.id"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item prop="projectStage" label="项目阶段">
|
<el-select v-model="form.projectStage" disabled placeholder="请选择">
|
<el-option label="实验室开发阶段" :value="1" />
|
<el-option label="中式试验阶段" :value="2" />
|
<el-option label="生产验证试验阶段" :value="3" />
|
</el-select>
|
</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="experimentDate" label="试验日期">
|
<el-date-picker
|
name="data-test"
|
v-model="form.experimentDate"
|
type="date"
|
placeholder="选择日期"
|
@change="handleDateChange"
|
></el-date-picker>
|
</el-form-item>
|
<el-form-item prop="experimentName" label="实验名称">
|
<el-input v-model="form.experimentName" placeholder="请输入" />
|
</el-form-item>
|
<el-form-item prop="experimentCode" label="实验编号">
|
<el-input v-model="form.experimentCode" placeholder="请输入" disabled/>
|
</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="experimentTime" label="试验时间">
|
<el-date-picker
|
style="width: 100%"
|
v-model="form.experimentTime"
|
type="datetimerange"
|
range-separator="至"
|
start-placeholder="开始时间"
|
end-placeholder="结束时间"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
:default-time="['00:00:00', '23:59:59']"
|
@change="handleTimeRangeChange"
|
></el-date-picker>
|
</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,4,5]" :key="item" class="member-list-card">
|
<div class="member-item">
|
<div class="member-title">
|
{{ ["工艺工程师", "化验师","实验员"][item - 3] }}
|
</div>
|
<div
|
:class="item == 3 ? 'member-name-box' : 'flex1'"
|
>
|
<div
|
:class="
|
item == 3
|
? 'member-name-box'
|
: 'member-name-box-2'
|
"
|
>
|
<div
|
v-for="i in memberList(item)"
|
:key="i.userId"
|
class="member-name"
|
>
|
{{ i.nickName }}
|
</div>
|
</div>
|
</div>
|
<div class="member-change">
|
<div class="member-change-btn" @click="editUserList(item)" v-if="item == 4 || item == 5">修改</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="personCharge" 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 style="padding: 20px 55px 20px 25px">
|
<AIEditor
|
ref="keyNodesEditor"
|
:value="form.keyNodes"
|
:min-height="200"
|
placeholder="请输入关键节点内容"
|
/>
|
</div>
|
|
<div class="add-project-footer">
|
<el-button type="primary" class="save-btn" @click="sendDispatch">保存</el-button>
|
<el-button @click="saveDraft">存草稿</el-button>
|
</div>
|
</el-form>
|
</template>
|
<SelectMember ref="selectMember" @submit="selectUser" />
|
<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'
|
import AIEditor from '@/components/AiEditor'
|
import { getProposalList, addDispatch, updateDispatch } from './service'
|
|
export default {
|
name: "AddProject",
|
components: {
|
SelectMember,
|
AddGroupDialog,
|
AddTaskDialog,
|
AIEditor
|
},
|
data() {
|
return {
|
id: '', // 用于编辑时存储id
|
form: {
|
projectName: '', // 课题方案名称
|
proposalId: '', // 项目课题方案id
|
projectStage: '', // 项目阶段
|
experimentName: '', // 实验名称
|
experimentCode: '', // 实验编号
|
experimentDate: '', // 实验日期
|
experimentTime: [], // 实验时间范围
|
status: -1, // 状态 -1=草稿箱 1=待确认 2=已确认 3=已封存
|
experimentDispatchGroups: [], // 组别列表
|
experimentDispatchParticipants: [], // 参与人员
|
experimentDispatchTasks: [], // 任务列表
|
keyNodes: '' // 关键节点
|
},
|
rules: {
|
projectName: [
|
{ required: true, message: "请输入项目课题方案名称", trigger: "blur" },
|
],
|
proposalId: [
|
{ required: true, message: "请输入项目课题方案编号", trigger: "blur" },
|
],
|
experimentName: [
|
{ required: true, message: "请输入实验名称", trigger: "blur" },
|
],
|
experimentDate: [
|
{ required: true, message: "请选择实验日期", trigger: "change" },
|
],
|
experimentTime: [
|
{ required: true, message: "请选择实验时间范围", trigger: "change" },
|
],
|
},
|
groupTableData: [],
|
taskTableData: [],
|
members: {
|
processEngineer: [], // 工艺工程师
|
experimenter: [], // 实验员
|
analyst: [] // 化验师
|
},
|
selectMemberData: [],
|
ROLE_CONFIG: {
|
"3": { label: "工艺工程师", limit: 1, default: true }, // 工艺工程师
|
"5": { label: "实验员", limit: 8 }, // 实验员
|
"4": { label: "化验师", limit: 8 } // 化验师
|
},
|
currentEditRoleId: null,
|
// 下拉框数据
|
projectOptions: [], // 所有方案数据
|
projectLoading: false, // 加载状态
|
// 缓存数据
|
projectDataMap: new Map(), // 缓存方案数据，key为方案ID
|
};
|
},
|
methods: {
|
// 获取当前用户信息
|
getCurrentUser() {
|
const userInfo = sessionStorage.getItem('userInfo');
|
return userInfo ? JSON.parse(userInfo) : null;
|
},
|
addMember() {
|
// 判断是否选择了项目课题方案
|
if (!this.form.proposalId) {
|
this.$message.warning('请先选择项目课题方案');
|
return;
|
}
|
|
// 获取当前用户信息
|
const currentUser = this.getCurrentUser();
|
// 如果当前用户是工艺工程师，则自动添加到工艺工程师列表中
|
if (currentUser && !this.members.processEngineer.length) {
|
this.members.processEngineer = [{
|
userId: currentUser.userId,
|
nickName: currentUser.nickName,
|
avatar: currentUser.avatar,
|
roleId: 3,
|
roleName: '工艺工程师'
|
}];
|
// 同时更新selectMemberData
|
this.selectMemberData = [...this.members.processEngineer];
|
}
|
|
// 设置当前编辑角色为null，表示是新增操作
|
this.currentEditRoleId = null;
|
|
// 打开选择弹窗，并传入项目ID
|
this.$refs.selectMember.open();
|
// 设置项目ID
|
this.$refs.selectMember.projectId = this.form.proposalId;
|
// 设置已选中的成员
|
this.$nextTick(() => {
|
const selectedMembers = [
|
...this.members.processEngineer,
|
...this.members.experimenter,
|
...this.members.analyst
|
];
|
this.$refs.selectMember.setSelection(selectedMembers);
|
});
|
},
|
editUserList(roleId) {
|
// 判断是否选择了项目课题方案
|
if (!this.form.proposalId) {
|
this.$message.warning('请先选择项目课题方案');
|
return;
|
}
|
|
// 如果是工艺工程师，不允许修改
|
if (roleId === 3) {
|
this.$message.warning('工艺工程师不可修改');
|
return;
|
}
|
|
// 保存当前正在编辑的角色ID
|
this.currentEditRoleId = roleId;
|
|
// 打开选择弹窗，并传入项目ID
|
this.$refs.selectMember.open();
|
// 设置项目ID
|
this.$refs.selectMember.projectId = this.form.proposalId;
|
|
// 设置已选中的成员（只设置当前角色的成员）
|
this.$nextTick(() => {
|
let selectedMembers = [];
|
switch (roleId) {
|
case 5: // 实验员
|
selectedMembers = [...this.members.experimenter];
|
break;
|
case 4: // 化验师
|
selectedMembers = [...this.members.analyst];
|
break;
|
}
|
this.$refs.selectMember.setSelection(selectedMembers);
|
});
|
},
|
selectUser(data) {
|
// 检查每个角色的选择数量限制
|
for (const [roleId, config] of Object.entries(this.ROLE_CONFIG)) {
|
const members = data.filter(item => item.roleId === parseInt(roleId));
|
if (members.length > config.limit) {
|
this.$message.error(`${config.label}最多只能选择${config.limit}个`);
|
return;
|
}
|
}
|
|
// 获取当前正在编辑的角色ID
|
const currentRoleId = this.currentEditRoleId;
|
|
if (currentRoleId === null) {
|
// 如果是新增操作，更新所有角色的数据
|
this.members = {
|
processEngineer: this.members.processEngineer, // 保持工艺工程师不变
|
experimenter: data.filter(item => item.roleId === 5), // 实验员
|
analyst: data.filter(item => item.roleId === 4) // 化验师
|
};
|
} else {
|
// 如果是编辑操作，只更新当前编辑的角色数据
|
if (currentRoleId === 5) { // 实验员
|
this.members.experimenter = data.filter(item => item.roleId === 5);
|
} else if (currentRoleId === 4) { // 化验师
|
this.members.analyst = data.filter(item => item.roleId === 4);
|
}
|
}
|
|
// 更新selectMemberData，合并所有角色的数据
|
this.selectMemberData = [
|
...this.members.processEngineer,
|
...this.members.experimenter,
|
...this.members.analyst
|
];
|
|
this.$refs.selectMember.close();
|
// 清理选择数据
|
this.$nextTick(() => {
|
this.$refs.selectMember.setSelection([]);
|
});
|
},
|
memberList(type) {
|
switch (type) {
|
case 3: // 工艺工程师
|
return this.members.processEngineer;
|
case 5: // 实验员
|
return this.members.experimenter;
|
case 4: // 化验师
|
return this.members.analyst;
|
default:
|
return [];
|
}
|
},
|
submitForm() {
|
this.$refs.form.validate((valid) => {
|
if (valid) {
|
// 构建提交数据
|
const submitData = {
|
...this.form,
|
experimentDispatchGroups: this.groupTableData.map(item => ({
|
groupName: item.groupName,
|
remark: item.remark
|
})),
|
experimentDispatchTasks: this.taskTableData.map(item => ({
|
taskName: item.taskName,
|
personCharge: item.leader,
|
startTime: item.startTime
|
})),
|
experimentDispatchParticipants: [
|
...this.members.processEngineer.map(userId => ({
|
userId,
|
roleType: 3, // 工艺工程师
|
status: 1 // 待确认
|
})),
|
...this.members.experimenter.map(userId => ({
|
userId,
|
roleType: 5, // 实验员
|
status: 1 // 待确认
|
})),
|
...this.members.analyst.map(userId => ({
|
userId,
|
roleType: 4, // 化验师
|
status: 1 // 待确认
|
}))
|
]
|
};
|
|
// TODO: 调用接口提交数据
|
console.log('提交数据:', submitData);
|
}
|
});
|
},
|
|
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)
|
}
|
// 更新表单数据
|
this.form.experimentDispatchGroups = this.groupTableData;
|
},
|
handleAddTask() {
|
// 获取所有参与人员数据
|
const allParticipants = [
|
...this.members.processEngineer,
|
...this.members.experimenter,
|
...this.members.analyst
|
];
|
this.$refs.addTaskDialog.open(null, allParticipants);
|
},
|
handleEditTask(row) {
|
// 获取所有参与人员数据
|
const allParticipants = [
|
...this.members.processEngineer,
|
...this.members.experimenter,
|
...this.members.analyst
|
];
|
this.$refs.addTaskDialog.open(row, allParticipants);
|
},
|
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);
|
const taskData = {
|
id: form.id || '', // 编辑时使用原id，新增时为空
|
taskName: form.taskName,
|
personCharge: form.leader, // 负责人名称
|
startTime: form.startTime,
|
dispatchId: this.id || '', // 实验调度id
|
selectedUsers: form.selectedUsers // 保存选中的用户ID数组
|
};
|
|
if (index > -1) {
|
this.taskTableData.splice(index, 1, taskData);
|
} else {
|
this.taskTableData.push(taskData);
|
}
|
// 更新表单数据
|
this.form.experimentDispatchTasks = this.taskTableData;
|
},
|
// 获取所有编辑器的内容
|
getAllEditorContent() {
|
return {
|
keyNodes: this.$refs.keyNodesEditor.getContent()
|
}
|
},
|
// 统一处理方法
|
handleSubmit(type) {
|
this.$refs.form.validate((valid) => {
|
if (valid) {
|
// 获取所有编辑器内容
|
const editorContents = this.getAllEditorContent()
|
|
// 检查编辑器内容是否为空
|
const isEmptyContent = (content) => {
|
return !content || content === '<p></p>' || content.trim() === '<p></p>'
|
}
|
|
if (isEmptyContent(editorContents.keyNodes)) {
|
this.$message.warning('请填写关键节点')
|
return false
|
}
|
|
// 构建提交数据
|
const formData = {
|
...this.form,
|
keyNodes: editorContents.keyNodes,
|
// 移除不需要传递给后端的字段
|
projectStage: undefined,
|
experimentDispatchGroups: this.groupTableData.map(item => ({
|
groupName: item.groupName,
|
remark: item.remark,
|
dispatchId: this.id || '',
|
id: item.id || ''
|
})),
|
experimentDispatchTasks: this.taskTableData.map(item => ({
|
taskName: item.taskName,
|
personCharge: item.personCharge,
|
startTime: item.startTime,
|
dispatchId: this.id || '',
|
id: item.id || ''
|
})),
|
experimentDispatchParticipants: [
|
...this.members.processEngineer.map(user => ({
|
userId: user.userId,
|
roleType: 3, // 工艺工程师
|
status: 1, // 待确认
|
dispatchId: this.id || '',
|
id: user.id || '',
|
nickName: user.nickName,
|
avatar: user.avatar
|
})),
|
...this.members.experimenter.map(user => ({
|
userId: user.userId,
|
roleType: 5, // 实验员
|
status: 1, // 待确认
|
dispatchId: this.id || '',
|
id: user.id || '',
|
nickName: user.nickName,
|
avatar: user.avatar
|
})),
|
...this.members.analyst.map(user => ({
|
userId: user.userId,
|
roleType: 4, // 化验师
|
status: 1, // 待确认
|
dispatchId: this.id || '',
|
id: user.id || '',
|
nickName: user.nickName,
|
avatar: user.avatar
|
}))
|
],
|
status: type === 'draft' ? -1 : 1, // 草稿箱:-1, 待确认:1
|
experimentStartTime: this.form.experimentTime ? this.form.experimentTime[0] : '',
|
experimentEndTime: this.form.experimentTime ? this.form.experimentTime[1] : ''
|
};
|
|
if (this.id) {
|
formData.id = this.id;
|
}
|
|
const request = this.id ? updateDispatch : addDispatch;
|
|
request(formData).then(res => {
|
if (res.code === 200) {
|
const successMsg = type === 'draft' ? '草稿保存成功' : (this.id ? '更新成功' : '保存成功');
|
this.$message.success(successMsg);
|
this.$router.back();
|
} else {
|
const errorMsg = type === 'draft' ? '草稿保存失败' : (this.id ? '更新失败' : '保存失败');
|
this.$message.error(res.msg || errorMsg);
|
}
|
}).catch(err => {
|
console.error('接口错误：', err);
|
const errorMsg = type === 'draft' ? '草稿保存失败' : (this.id ? '更新失败' : '保存失败');
|
this.$message.error(errorMsg);
|
});
|
} else {
|
this.$message.warning('请填写必填项');
|
return false;
|
}
|
});
|
},
|
|
// 保存
|
sendDispatch() {
|
this.handleSubmit('save');
|
},
|
|
// 保存草稿
|
saveDraft() {
|
this.handleSubmit('draft');
|
},
|
handleDateChange(value) {
|
// 处理日期变化后的逻辑
|
},
|
handleTimeRangeChange(value) {
|
if (value) {
|
this.form.experimentStartTime = value[0];
|
this.form.experimentEndTime = value[1];
|
} else {
|
this.form.experimentStartTime = '';
|
this.form.experimentEndTime = '';
|
}
|
},
|
// 统一的搜索方法
|
async handleProjectSearch(query) {
|
if (query) {
|
this.projectLoading = true;
|
try {
|
// 根据当前激活的输入框决定使用哪个参数
|
const params = {};
|
if (this.$refs.projectNameSelect && this.$refs.projectNameSelect.$el.contains(document.activeElement)) {
|
params.projectName = query;
|
} else if (this.$refs.proposalIdSelect && this.$refs.proposalIdSelect.$el.contains(document.activeElement)) {
|
params.projectCode = query;
|
}
|
|
const res = await getProposalList(params);
|
if (res) {
|
this.projectOptions = res.map(item => ({
|
id: item.id,
|
projectName: item.projectName,
|
projectCode: item.projectCode,
|
projectStage: item.projectStage
|
}));
|
// 更新缓存
|
this.projectOptions.forEach(item => {
|
this.projectDataMap.set(item.id, item);
|
});
|
}
|
} catch (error) {
|
console.error('获取方案列表失败:', error);
|
this.$message.error('获取方案列表失败');
|
} finally {
|
this.projectLoading = false;
|
}
|
} else {
|
this.projectOptions = [];
|
}
|
},
|
|
// 方案名称选择变化
|
handleProjectNameChange(value) {
|
const selectedProject = this.projectOptions.find(item => item.id === value);
|
if (selectedProject) {
|
this.updateFormWithProject(selectedProject);
|
}
|
},
|
|
// 方案编号选择变化
|
handleProposalIdChange(value) {
|
const selectedProject = this.projectOptions.find(item => item.id === value);
|
if (selectedProject) {
|
this.updateFormWithProject(selectedProject);
|
}
|
},
|
|
// 统一的表单更新方法
|
updateFormWithProject(project) {
|
this.form.projectName = project.projectName;
|
this.form.proposalId = project.id;
|
this.form.projectStage = project.projectStage;
|
},
|
|
// 防抖处理
|
debounce(fn, delay) {
|
let timer = null;
|
return function (...args) {
|
if (timer) clearTimeout(timer);
|
timer = setTimeout(() => {
|
fn.apply(this, args);
|
}, delay);
|
};
|
},
|
|
// 获取详情
|
getDetail() {
|
if (this.id) {
|
getDetailById({ id: this.id }).then(res => {
|
if (res.code === 200 && res.data) {
|
const data = res.data
|
// 设置表单数据
|
this.form = {
|
projectName: data.projectName,
|
proposalId: data.proposalId,
|
projectStage: data.projectStage,
|
experimentName: data.experimentName,
|
experimentCode: data.experimentCode,
|
experimentDate: data.experimentDate,
|
experimentTime: [data.experimentStartTime, data.experimentEndTime],
|
status: data.status,
|
experimentDispatchGroups: data.experimentDispatchGroups || [],
|
experimentDispatchParticipants: data.experimentDispatchParticipants || [],
|
experimentDispatchTasks: data.experimentDispatchTasks || [],
|
keyNodes: data.keyNodes || ''
|
}
|
// 设置表格数据
|
this.groupTableData = data.experimentDispatchGroups || []
|
this.taskTableData = data.experimentDispatchTasks || []
|
}
|
}).catch(err => {
|
console.error('获取详情失败：', err)
|
})
|
}
|
},
|
|
// 处理项目选择框获得焦点
|
async handleProjectFocus() {
|
// 如果已经有数据，则不重复请求
|
if (this.projectOptions.length > 0) {
|
return;
|
}
|
this.projectLoading = true;
|
try {
|
const res = await getProposalList({});
|
if (res) {
|
this.projectOptions = res.map(item => ({
|
id: item.id,
|
projectName: item.projectName,
|
projectCode: item.projectCode,
|
projectStage: item.projectStage
|
}));
|
// 更新缓存
|
this.projectOptions.forEach(item => {
|
this.projectDataMap.set(item.id, item);
|
});
|
}
|
} catch (error) {
|
console.error('获取方案列表失败:', error);
|
this.$message.error('获取方案列表失败');
|
} finally {
|
this.projectLoading = false;
|
}
|
}
|
},
|
created() {
|
// 从路由参数中获取id
|
this.id = this.$route.query.id;
|
if (this.id) {
|
// TODO: 获取详情
|
this.getDetail();
|
}
|
// 创建防抖的搜索方法
|
this.debouncedSearch = this.debounce(this.handleProjectSearch, 300);
|
// 初始化时自动添加当前用户为工艺工程师（如果是工艺工程师角色）
|
const currentUser = this.getCurrentUser();
|
if (currentUser) {
|
this.members.processEngineer = [{
|
userId: currentUser.userId,
|
nickName: currentUser.nickName,
|
avatar: currentUser.avatar,
|
roleId: 3,
|
roleName: '工艺工程师'
|
}];
|
// 同时更新selectMemberData
|
this.selectMemberData = [...this.members.processEngineer];
|
}
|
}
|
};
|
</script>
|
|
<style scoped lang="less">
|
.data-test{
|
.el-input__inner{
|
background-color: #F5F7FA;
|
padding-left: 20px !important;
|
}
|
}
|
.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>
|
