|
@@ -1,15 +1,14 @@
|
|
|
<template>
|
|
|
- // type分别为sm、md、lg
|
|
|
- <Dialog custom-show type="sm" title="任务下达" @confirm="confirmRegister" @close="closeDialog">
|
|
|
+ <Dialog :hide-title="false" custom-show type="sm" title="任务下达" @confirm="confirmRegister" @close="closeDialog">
|
|
|
<div class="dialog-content">
|
|
|
<div class="dialog-body">
|
|
|
- <el-form ref="taskFormRef" :model="newTask">
|
|
|
- <el-form-item label="任务内容" label-width="200px">
|
|
|
- <el-input v-model="newTask.task_description" class="custom-input2" clearable placeholder="请输入相关任务描述" />
|
|
|
+ <el-form ref="taskFormRef" :model="form" :rules="rules">
|
|
|
+ <el-form-item label="任务内容" label-width="200px" prop="task_description">
|
|
|
+ <el-input v-model="form.task_description" class="custom-input2" clearable placeholder="请输入相关任务描述" />
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="任务类型" label-width="200px">
|
|
|
+ <el-form-item label="任务类型" label-width="200px" prop="task_type">
|
|
|
<el-select
|
|
|
- v-model="newTask.task_type"
|
|
|
+ v-model="form.task_type"
|
|
|
placeholder="选择任务类型"
|
|
|
class="custom-select"
|
|
|
size="large"
|
|
@@ -18,27 +17,27 @@
|
|
|
clearable
|
|
|
filterable
|
|
|
>
|
|
|
- <el-option v-for="type in taskTypes" :key="type.id" :label="type.name" />
|
|
|
+ <el-option v-for="type in opt_task_type" :key="type.value" :value="type.value" :label="type.text" />
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="执行单位" label-width="200px">
|
|
|
+ <el-form-item label="执行单位" label-width="200px" prop="unit_name">
|
|
|
<el-select
|
|
|
- v-model="newTask.unit_name"
|
|
|
- placeholder="全部"
|
|
|
+ v-model="form.unit_name"
|
|
|
+ placeholder="选择执行单位"
|
|
|
class="custom-select"
|
|
|
size="large"
|
|
|
popper-class="custom-select-popper"
|
|
|
:teleported="false"
|
|
|
clearable
|
|
|
filterable
|
|
|
- @input="fetchFilteredUnits"
|
|
|
+ @change="handleUnitChange"
|
|
|
>
|
|
|
<el-option v-for="unit in filteredUnits" :key="unit.id" :label="unit.unit_name" :value="unit.unit_name" />
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="执行人" label-width="200px">
|
|
|
+ <el-form-item label="执行人" label-width="200px" prop="executor">
|
|
|
<el-select
|
|
|
- v-model="newTask.executor"
|
|
|
+ v-model="form.executor"
|
|
|
placeholder="请选择执行人"
|
|
|
class="custom-select"
|
|
|
size="large"
|
|
@@ -46,20 +45,33 @@
|
|
|
:teleported="false"
|
|
|
clearable
|
|
|
filterable
|
|
|
- :remote-method="fetchUsers"
|
|
|
- :remote="true"
|
|
|
>
|
|
|
<el-option v-for="user in executorList" :key="user.userId" :label="user.nickName" :value="user.nickName" />
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="登记人" label-width="200px">
|
|
|
- <el-input v-model="newTask.registrar" class="custom-input2" type="text" readonly />
|
|
|
+ <el-form-item label="登记人" label-width="200px" prop="registrar">
|
|
|
+ <el-input v-model="form.registrar" class="custom-input2" type="text" readonly />
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="联系电话" label-width="200px">
|
|
|
- <el-input v-model="newTask.contact_phone" class="custom-input2" placeholder="发布人的联系电话" />
|
|
|
+ <el-form-item label="联系电话" label-width="200px" prop="contact_phone">
|
|
|
+ <el-input v-model="form.contact_phone" class="custom-input2" placeholder="发布人的联系电话" />
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="完成时限" label-width="200px">
|
|
|
- <el-date-picker v-model="newTask.complete_time" type="date" placeholder="选择完成时间" style="width: 100%" />
|
|
|
+ <el-form-item label="完成时限" label-width="200px" prop="expire_time">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="form.expire_time"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ type="date"
|
|
|
+ class="common-date-picker"
|
|
|
+ :teleported="false"
|
|
|
+ popper-class="common-date-popper"
|
|
|
+ placeholder="选择完成时间"
|
|
|
+ style="width: 100%"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="上传图片:" label-width="220px" prop="imgList">
|
|
|
+ <FileUpload v-model="form.imgList" :file-type="['jpg', 'jpeg', 'png']" :limit="9" :file-size="5" class="upload-box" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="上传文件:" label-width="220px" prop="fileList">
|
|
|
+ <FileUpload v-model="form.fileList" :file-type="['mp4', 'avi', 'wmv']" :limit="6" :file-size="1024" class="upload-box" />
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
</div>
|
|
@@ -69,22 +81,45 @@
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
import { ref, reactive, onMounted } from 'vue';
|
|
|
-import { addTask, getUnits, getUser, getUserList } from '@/api/emergencyCommandMap/JointDuty.ts';
|
|
|
+import { addTask, getUnits, getUser, getUserList } from '@/api/emergencyCommandMap/JointDuty';
|
|
|
+const proxy = getCurrentInstance()?.proxy;
|
|
|
|
|
|
-const taskTypes = ref([{ name: '事件处置' }, { name: '防范措施' }, { name: '险情处理' }, { name: '督办任务' }]);
|
|
|
-const newTask = reactive({
|
|
|
+const opt_task_type = [
|
|
|
+ { text: '事件处置', value: '0' },
|
|
|
+ { text: '防范措施', value: '1' },
|
|
|
+ { text: '险情处理', value: '2' },
|
|
|
+ { text: '督办任务', value: '3' }
|
|
|
+];
|
|
|
+// 表单初始数据
|
|
|
+const initFormData = {
|
|
|
task_description: '',
|
|
|
task_type: '',
|
|
|
unit_name: '',
|
|
|
- executor: '',
|
|
|
registrar: '',
|
|
|
+ executor: '',
|
|
|
contact_phone: '',
|
|
|
- complete_time: ''
|
|
|
+ expire_time: '',
|
|
|
+ event_code: '',
|
|
|
+ imgList: [],
|
|
|
+ fileList: []
|
|
|
+};
|
|
|
+
|
|
|
+const data = reactive({
|
|
|
+ form: { ...initFormData },
|
|
|
+ rules: {
|
|
|
+ task_description: [{ required: true, message: '任务描述不能为空', trigger: 'blur' }],
|
|
|
+ task_type: [{ required: true, message: '任务类型不能为空', trigger: 'blur' }],
|
|
|
+ unit_name: [{ required: true, message: '执行单位不能为空', trigger: 'blur' }],
|
|
|
+ registrar: [{ required: true, message: '登记人不能为空', trigger: 'blur' }],
|
|
|
+ executor: [{ required: true, message: '执行人不能为空', trigger: 'blur' }],
|
|
|
+ contact_phone: [{ required: true, message: '联系电话不能为空', trigger: 'blur' }],
|
|
|
+ expire_time: [{ required: true, message: '完成时限不能为空', trigger: 'blur' }]
|
|
|
+ }
|
|
|
});
|
|
|
-const units = ref([]);
|
|
|
+const taskFormRef = ref();
|
|
|
const filteredUnits = ref([]);
|
|
|
const executorList = ref([]);
|
|
|
-
|
|
|
+const { form, rules } = toRefs(data);
|
|
|
const props = defineProps<{
|
|
|
eventId?: string;
|
|
|
}>();
|
|
@@ -92,11 +127,10 @@ const props = defineProps<{
|
|
|
// 获取当前登录用户信息
|
|
|
const fetchUser = async () => {
|
|
|
try {
|
|
|
- const response = await getUser();
|
|
|
+ const response = await getUser({});
|
|
|
if (response.code === 200) {
|
|
|
- // 假设返回的用户信息中包含 username 字段
|
|
|
- newTask.registrar = response.data.user.userName;
|
|
|
- newTask.contact_phone = response.data.user.contactPhone;
|
|
|
+ form.value.registrar = response.data.user.nickName;
|
|
|
+ form.value.contact_phone = response.data.user.phonenumber;
|
|
|
} else {
|
|
|
console.error('获取用户信息失败:', response.msg);
|
|
|
}
|
|
@@ -105,11 +139,20 @@ const fetchUser = async () => {
|
|
|
}
|
|
|
};
|
|
|
|
|
|
-const fetchUnits = async (searchTerm) => {
|
|
|
+const fetchUnits = async () => {
|
|
|
try {
|
|
|
- const response = await getUnits({ search: searchTerm });
|
|
|
+ const response = await getUserList({});
|
|
|
if (response.code === 200) {
|
|
|
- filteredUnits.value = response.data;
|
|
|
+ const units = new Map();
|
|
|
+ response.rows.forEach((unit) => {
|
|
|
+ if (!units.has(unit.deptName)) {
|
|
|
+ units.set(unit.deptName, {
|
|
|
+ unitId: unit.deptId,
|
|
|
+ unit_name: unit.deptName
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ filteredUnits.value = Array.from(units.values());
|
|
|
} else {
|
|
|
console.error('获取单位数据失败:', response.msg);
|
|
|
}
|
|
@@ -118,41 +161,49 @@ const fetchUnits = async (searchTerm) => {
|
|
|
}
|
|
|
};
|
|
|
|
|
|
-const fetchUsers = async (queryString) => {
|
|
|
+const fetchUsers = async (deptId) => {
|
|
|
try {
|
|
|
- const response = await getUserList({ search: queryString });
|
|
|
- if (response.code === 200) {
|
|
|
+ const response = await getUserList({ deptId });
|
|
|
+ if (response.code === 200 && response.rows && Array.isArray(response.rows)) {
|
|
|
executorList.value = response.rows.map((user) => ({
|
|
|
userId: user.userId,
|
|
|
nickName: user.nickName
|
|
|
}));
|
|
|
} else {
|
|
|
- console.error('获取用户列表失败:', response.msg);
|
|
|
+ console.error('获取用户列表失败:', response);
|
|
|
}
|
|
|
} catch (error) {
|
|
|
console.error('请求用户列表失败:', error);
|
|
|
}
|
|
|
};
|
|
|
|
|
|
+const handleUnitChange = async (newUnitName) => {
|
|
|
+ const selectedUnit = filteredUnits.value.find((unit) => unit.unit_name === newUnitName);
|
|
|
+ if (selectedUnit) {
|
|
|
+ await fetchUsers(selectedUnit.unitId);
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
const emit = defineEmits(['update:show']);
|
|
|
|
|
|
const closeDialog = () => {
|
|
|
emit('update:show', false);
|
|
|
};
|
|
|
|
|
|
-const confirmRegister = async () => {
|
|
|
- try {
|
|
|
- newTask.event_code = props.eventId;
|
|
|
- const response = await addTask(newTask);
|
|
|
- if (response.code === 200) {
|
|
|
- console.log('任务登记成功');
|
|
|
- closeDialog();
|
|
|
- } else {
|
|
|
- console.error('任务登记失败:', response.msg);
|
|
|
+const confirmRegister = () => {
|
|
|
+ taskFormRef.value?.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ form.value.event_code = props.eventId;
|
|
|
+ addTask(form.value).then((response) => {
|
|
|
+ if (response.code === 200) {
|
|
|
+ proxy?.$modal.msgSuccess('任务登记成功');
|
|
|
+ closeDialog();
|
|
|
+ } else {
|
|
|
+ console.error('任务登记失败:', response.msg);
|
|
|
+ }
|
|
|
+ });
|
|
|
}
|
|
|
- } catch (error) {
|
|
|
- console.error('请求任务登记失败:', error);
|
|
|
- }
|
|
|
+ });
|
|
|
};
|
|
|
|
|
|
onMounted(() => {
|
|
@@ -163,100 +214,10 @@ onMounted(() => {
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.dialog-wrap {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- left: 0;
|
|
|
- bottom: 0;
|
|
|
- z-index: 2000;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- .overlay {
|
|
|
- background-color: rgba(0, 0, 0, 0.5);
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- z-index: -1;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- .dialog {
|
|
|
- width: 5000px;
|
|
|
- height: 2000px;
|
|
|
- margin: 0 auto;
|
|
|
- background-color: #fff;
|
|
|
- border-radius: 20px;
|
|
|
- }
|
|
|
-}
|
|
|
-.dialog {
|
|
|
- padding: 0 50px;
|
|
|
- .dialog-header {
|
|
|
- width: 100%;
|
|
|
- height: 150px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- .icon-close {
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-.footer {
|
|
|
- height: 64px;
|
|
|
- display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
- margin-bottom: 30px;
|
|
|
- .pagination-container {
|
|
|
- height: 64px;
|
|
|
- margin: 0;
|
|
|
+.dialog-content {
|
|
|
+ :deep(.common-date-popper) {
|
|
|
+ top: -600px !important;
|
|
|
+ left: 0 !important;
|
|
|
}
|
|
|
- :deep(.el-pagination__total) {
|
|
|
- color: #a7ccdf;
|
|
|
- font-size: 32px;
|
|
|
- }
|
|
|
- :deep(.el-pagination) {
|
|
|
- .btn-next,
|
|
|
- .btn-prev {
|
|
|
- background-color: transparent;
|
|
|
- border: none;
|
|
|
- .el-icon {
|
|
|
- font-size: 22px;
|
|
|
- color: #a7ccdf;
|
|
|
- }
|
|
|
- }
|
|
|
- .btn-prev:disabled,
|
|
|
- .btn-next:disabled {
|
|
|
- background-color: transparent;
|
|
|
- border: none;
|
|
|
- }
|
|
|
- .el-pager li {
|
|
|
- width: 64px;
|
|
|
- height: 64px;
|
|
|
- line-height: 64px;
|
|
|
- text-align: center;
|
|
|
- font-size: 32px;
|
|
|
- color: #a7ccdf;
|
|
|
- background-color: #0e3064;
|
|
|
- border: 1px solid #0c57a7;
|
|
|
- margin: 0 6px;
|
|
|
- &:hover {
|
|
|
- background-color: #038dff;
|
|
|
- border: 1px solid #038dff;
|
|
|
- }
|
|
|
- }
|
|
|
- .el-pager li.is-active {
|
|
|
- background-color: #038dff;
|
|
|
- border: 1px solid #038dff;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-.flex {
|
|
|
- display: flex;
|
|
|
- align-items: flex-start;
|
|
|
}
|
|
|
</style>
|