<template>
|
<el-dialog :title="title" :visible.sync="dialogVisible" width="70%" :before-close="handleClose">
|
<div class="task-form">
|
<el-form ref="form" :model="form" :rules="rules" label-width="80px" label-position="top">
|
<el-form-item label="任务名称" prop="taskName">
|
<el-input v-model="form.taskName" placeholder="请输入任务名称" class="custom-input"></el-input>
|
</el-form-item>
|
|
<el-form-item label="负责人" prop="leader">
|
<Table
|
ref="table"
|
:data="tableData"
|
:total="0"
|
class="rwuTable"
|
@selection-change="handleSelectionChange">
|
<el-table-column type="selection" width="55"></el-table-column>
|
<el-table-column prop="role" label="角色" width="120">
|
<template slot-scope="scope">
|
<span>{{ scope.row.role || '实验师' }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="name" label="姓名"></el-table-column>
|
<el-table-column prop="avatar" label="头像" width="80">
|
<template slot-scope="scope">
|
<el-avatar :size="30" :src="scope.row.avatar">{{ scope.row.name.substr(0,1) }}</el-avatar>
|
</template>
|
</el-table-column>
|
<el-table-column prop="createTime" label="创建时间"></el-table-column>
|
</Table>
|
</el-form-item>
|
|
<el-form-item label="开始时间" prop="startTime">
|
<el-date-picker
|
v-model="form.startTime"
|
type="datetime"
|
placeholder="选择开始时间"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
:picker-options="pickerOptions"
|
:default-time="defaultTime">
|
</el-date-picker>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="handleClose">关闭</el-button>
|
<el-button type="primary" @click="handleSubmit">保存</el-button>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
export default {
|
name: "AddTaskDialog",
|
data() {
|
return {
|
dialogVisible: false,
|
title: "新增任务",
|
form: {
|
taskName: "",
|
startTime: "",
|
selectedUsers: [], // 存储选中用户的id数组
|
leader: "" // 存储选中用户的姓名字符串
|
},
|
rules: {
|
taskName: [
|
{ required: true, message: "请输入任务名称", trigger: "blur" }
|
],
|
startTime: [
|
{ required: true, message: "请选择开始时间", trigger: "change" }
|
]
|
},
|
tableData: [],
|
pickerOptions: {
|
shortcuts: [
|
{
|
text: '今天',
|
onClick(picker) {
|
picker.$emit('pick', new Date());
|
}
|
},
|
{
|
text: '明天',
|
onClick(picker) {
|
const date = new Date();
|
date.setTime(date.getTime() + 3600 * 1000 * 24);
|
picker.$emit('pick', date);
|
}
|
},
|
{
|
text: '一周后',
|
onClick(picker) {
|
const date = new Date();
|
date.setTime(date.getTime() + 3600 * 1000 * 24 * 7);
|
picker.$emit('pick', date);
|
}
|
}
|
],
|
disabledDate(time) {
|
return time.getTime() < Date.now() - 8.64e7;
|
}
|
},
|
defaultTime: '09:00:00'
|
};
|
},
|
methods: {
|
open(row) {
|
this.dialogVisible = true;
|
this.getAvailableUsers();
|
|
if (row) {
|
this.title = "编辑任务";
|
this.form = {
|
taskName: row.taskName || '',
|
startTime: row.startTime || '',
|
selectedUsers: row.selectedUsers || [],
|
leader: row.leader || ''
|
};
|
|
// 在表格数据加载完成后设置选中状态
|
this.$nextTick(() => {
|
if (this.$refs.table && this.form.selectedUsers.length) {
|
this.tableData.forEach(row => {
|
if (this.form.selectedUsers.includes(row.id)) {
|
this.$refs.table.toggleRowSelection(row, true);
|
}
|
});
|
}
|
});
|
} else {
|
this.title = "新增任务";
|
this.form = {
|
taskName: "",
|
startTime: "",
|
selectedUsers: [],
|
leader: ""
|
};
|
}
|
},
|
handleClose() {
|
this.dialogVisible = false;
|
this.$refs.form.resetFields();
|
if (this.$refs.table) {
|
this.$refs.table.clearSelection();
|
}
|
this.form = {
|
taskName: "",
|
startTime: "",
|
selectedUsers: [],
|
leader: ""
|
};
|
},
|
handleSelectionChange(selection) {
|
// 更新选中的用户数据
|
this.form.selectedUsers = selection.map(item => item.id);
|
this.form.leader = selection.map(item => item.name).join("、");
|
},
|
handleSubmit() {
|
this.$refs.form.validate(valid => {
|
if (valid) {
|
if (this.form.selectedUsers.length === 0) {
|
this.$message.error("请选择至少一个负责人");
|
return;
|
}
|
|
const submitData = {
|
taskName: this.form.taskName,
|
startTime: this.form.startTime,
|
selectedUsers: this.form.selectedUsers,
|
leader: this.form.leader
|
};
|
|
this.$emit("submit", submitData);
|
this.handleClose();
|
}
|
});
|
},
|
getAvailableUsers() {
|
// 这里可以调用接口获取人员列表
|
this.tableData = [
|
{
|
id: 1,
|
role: "实验师",
|
name: "曾奇胜",
|
avatar: "",
|
createTime: "2024-09-18 00:00:00"
|
},
|
{
|
id: 2,
|
role: "实验师",
|
name: "李四",
|
avatar: "",
|
createTime: "2024-09-18 00:00:00"
|
},
|
{
|
id: 3,
|
role: "实验师",
|
name: "王五",
|
avatar: "",
|
createTime: "2024-09-18 00:00:00"
|
}
|
];
|
}
|
}
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.task-form {
|
padding: 0 20px;
|
|
.custom-input {
|
width: 100%;
|
}
|
}
|
|
.rwuTable {
|
margin: 10px 0;
|
width: 100%;
|
}
|
|
::v-deep .el-dialog__body {
|
padding: 15px 24px 0px 14px !important;
|
}
|
|
.dialog-footer {
|
margin-top: 20px;
|
text-align: center !important;
|
button {
|
width: 150px;
|
}
|
}
|
|
::v-deep .el-date-editor {
|
width: 100%;
|
}
|
</style>
|
