<template>
|
<el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
|
<el-form-item label="项目名称" prop="projectName">
|
<el-input
|
v-model="form.projectName"
|
placeholder="请输入项目名称"
|
maxlength="50"
|
/>
|
</el-form-item>
|
<el-form-item label="项目描述" prop="description">
|
<el-input
|
v-model="form.description"
|
type="textarea"
|
:rows="4"
|
placeholder="请输入项目描述"
|
/>
|
</el-form-item>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="开始日期" prop="startDate">
|
<el-date-picker
|
v-model="form.startDate"
|
type="date"
|
format="YYYY-MM-DD"
|
value-format="YYYY-MM-DD"
|
placeholder="选择开始日期"
|
style="width: 100%"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="结束日期" prop="endDate">
|
<el-date-picker
|
v-model="form.endDate"
|
type="date"
|
format="YYYY-MM-DD"
|
value-format="YYYY-MM-DD"
|
placeholder="选择结束日期"
|
style="width: 100%"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-form-item label="项目负责人" prop="managerId">
|
<!-- <el-input
|
v-model="form.managerName"
|
placeholder="请选择项目负责人"
|
readonly
|
@focus="showUserSelect = true"
|
/> -->
|
<!-- <el-input
|
v-model="userSearchKey"
|
placeholder="搜索用户"
|
v-if="showUserSelect"
|
@keyup.enter="searchUsers"
|
style="margin-top: 10px"
|
/> -->
|
<el-select
|
v-model="form.managerId"
|
style="width: 100%; margin-top: 10px"
|
@change="selectUser"
|
filterable
|
remote
|
:remote-method="searchUsers"
|
:loading="userLoading"
|
placeholder="选择项目负责人"
|
>
|
<el-option
|
v-for="user in userList"
|
:key="user.userId"
|
:label="user.nickName"
|
:value="user.userId"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="项目完成度" prop="completionRate">
|
<el-slider v-model="form.completionRate" :max="100" />
|
</el-form-item>
|
<el-form-item label="项目状态" prop="status">
|
<el-radio-group v-model="form.status">
|
<el-radio label="planning">规划中</el-radio>
|
<el-radio label="inProgress">进行中</el-radio>
|
<el-radio label="completed">已完成</el-radio>
|
<el-radio label="paused">已暂停</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</el-form>
|
</template>
|
|
<script setup>
|
import { ref, watch, defineExpose } from 'vue';
|
import { listUser } from '@/api/system/user';
|
import { ElMessage } from 'element-plus';
|
const props = defineProps({
|
form: {
|
type: Object,
|
required: true
|
},
|
rules: {
|
type: Object,
|
required: true
|
},
|
visible: {
|
type: Boolean,
|
required: true
|
}
|
});
|
|
const formRef = ref();
|
const showUserSelect = ref(false);
|
const userSearchKey = ref('');
|
const userList = ref([]);
|
const userLoading = ref(false);
|
// 模拟用户数据
|
const mockUserData = [
|
{ userId: '1', nickName: '张三', userName: 'zhangsan' },
|
{ userId: '2', nickName: '李四', userName: 'lisi' },
|
{ userId: '3', nickName: '王五', userName: 'wangwu' },
|
{ userId: '4', nickName: '赵六', userName: 'zhaoliu' },
|
{ userId: '5', nickName: '钱七', userName: 'qianqi' },
|
{ userId: '6', nickName: '孙八', userName: 'sunba' },
|
{ userId: '7', nickName: '周九', userName: 'zhoujiu' },
|
{ userId: '8', nickName: '吴十', userName: 'wushi' }
|
];
|
// 搜索用户
|
const searchUsers = async (query) => {
|
userLoading.value = true;
|
try {
|
// 模拟网络延迟
|
await new Promise(resolve => setTimeout(resolve, 300));
|
|
// 正确设置用户列表
|
if (!query) {
|
userList.value = [...mockUserData];
|
} else {
|
userList.value = mockUserData.filter(user =>
|
user.nickName.includes(query) || user.userName.includes(query)
|
);
|
}
|
} catch (error) {
|
console.error('搜索用户失败:', error);
|
} finally {
|
userLoading.value = false;
|
}
|
};
|
|
// 选择用户
|
const selectUser = (userId) => {
|
// 先从userList查找，如果找不到再从mockUserData中查找
|
let selectedUser = userList.value.find(user => user.userId === userId);
|
if (!selectedUser) {
|
selectedUser = mockUserData.find(user => user.userId === userId);
|
}
|
|
// 使用Vue.set确保响应式更新
|
if (selectedUser) {
|
Object.assign(props.form, { managerName: selectedUser.nickName });
|
} else {
|
Object.assign(props.form, { managerName: '' });
|
}
|
showUserSelect.value = false;
|
};
|
|
// 重置表单
|
const resetFields = () => {
|
if (formRef.value) {
|
formRef.value.resetFields();
|
}
|
showUserSelect.value = false;
|
userSearchKey.value = '';
|
userList.value = [];
|
};
|
|
// 验证表单
|
const validate = () => {
|
return new Promise((resolve, reject) => {
|
if (formRef.value) {
|
formRef.value.validate((valid) => {
|
if (valid) {
|
// 额外验证：结束日期不能早于开始日期
|
if (props.form.startDate && props.form.endDate) {
|
const startDate = new Date(props.form.startDate);
|
const endDate = new Date(props.form.endDate);
|
if (endDate < startDate) {
|
ElMessage.error('结束日期不能早于开始日期');
|
reject(new Error('日期验证失败'));
|
return;
|
}
|
}
|
resolve();
|
} else {
|
reject(new Error('表单验证失败'));
|
}
|
});
|
} else {
|
resolve();
|
}
|
});
|
};
|
|
// 监听对话框显示状态
|
watch(() => props.visible, (newVisible) => {
|
if (!newVisible) {
|
resetFields();
|
// 延迟重置，确保数据已经提交到后端
|
// setTimeout(() => {
|
// resetFields();
|
// }, 300);
|
}
|
});
|
|
// 暴露方法
|
defineExpose({
|
resetFields,
|
validate
|
});
|
</script>
|
|
<style scoped>
|
|
</style>
|
