重构组件代码 人员选择和系统人员选择放一起 根据文档优化灾害预警模块

src/api/push-object/index.ts

@@ -1,38 +0,0 @@
-import { http } from '@/utils/http/axios';
-import type { PushObjectUserInfoResponse, UserGroupOption, PushObjectGroupInfoResponse } from '@/types/push-object';
-
-/**
- * 全量查询用户组
- */
-export const getAllUserGroup = () => {
-  return http.request<{ groupVOList: UserGroupOption[] }>({
-    url: '/userGroup/ToPushObjectQueryUserGroupList',
-    method: 'post',
-  });
-};
-
-/**
- * 查询用户组人员情况
- */
-export const getUserGroupDetailByIds = (userGroupList: number[]) => {
-  return http.request<PushObjectGroupInfoResponse[]>({
-    url: '/userGroup/queryUserGroupDetailByIds',
-    method: 'post',
-    data: { userGroupList },
-  });
-};
-
-/**
- * 查询推送人员
- */
-export const queryAvailableUserList = () => {
-  return http.request<PushObjectUserInfoResponse[]>(
-    {
-      url: '/user/queryAvailableUserList',
-      method: 'get',
-    },
-    {
-      ignoreTargetTenantId: true,
-    },
-  );
-};

src/api/system/person-group.ts

@@ -7,6 +7,7 @@ import {
   QueryPersonGroupPageRes,
   QueryPersonGroupDetailRes,
   QueryAvailablePersonPageRes,
+  UserGroupOption,
 } from '@/types/person-group/type';
 
 /**
@@ -52,6 +53,16 @@ export function queryUserGroupPage(params: QueryPersonGroupPageParams): Promise<
   });
 }
 
+/**
+ * 全量查询用户组
+ */
+export const getAllUserGroup = () => {
+  return http.request<{ groupVOList: UserGroupOption[] }>({
+    url: '/userGroup/ToPushObjectQueryUserGroupList',
+    method: 'post',
+  });
+};
+
 /**
  * @description: 查询用户组详情
  */
@@ -63,7 +74,7 @@ export function queryUserGroupDetail(userGroupId: number): Promise<QueryPersonGr
 }
 
 /**
- * 查询用户组人员情况
+ * 批量查询用户组情况
  */
 export const getUserGroupDetailByIds = (userGroupList: number[]) => {
   return http.request<QueryPersonGroupDetailRes[]>({

src/types/disaster-precaution/index.ts

@@ -22,6 +22,7 @@ interface BasicResponse {
 
 export interface TaskManagementListResponse extends BasicResponse {
   effectStatus: number;
+  updatedAt: string;
 }
 
 export interface TaskExecutionListResponse extends BasicResponse {
@@ -29,7 +30,7 @@ export interface TaskExecutionListResponse extends BasicResponse {
 }
 
 export interface TaskManagementItemResponse
-  extends Omit<TaskManagementListResponse, 'deptName' | 'inspectType' | 'overdue' | 'effectStatus' | 'taskState'> {
+  extends Omit<TaskManagementListResponse, 'deptName' | 'inspectType' | 'overdue' | 'effectStatus' | 'taskState' | 'updatedAt'> {
   inspectType: number | null;
   deptIdList: string[] | string;
   inspectRequirement: string;

src/types/person-group/type.ts

@@ -1,5 +1,10 @@
 import type { PaginationRequest, PaginationResponse } from '@/types/common/type';
 
+export interface UserGroupOption {
+  name: string;
+  id: number;
+}
+
 /** 用户组编辑表单 */
 export interface PersonGroupForm {
   id?: number | null;
@@ -100,5 +105,10 @@ export interface QueryPersonGroupDetailRes {
   userGroupId: number;
 }
 
+export interface UserGroupInfo extends QueryPersonGroupDetailRes {
+  isExpand: boolean;
+  isHidden: boolean;
+}
+
 /** 查询可选用户列表后端返回data */
 export type QueryAvailablePersonPageRes = PaginationResponse<PersonGroupItem>;

src/types/push-object/index.ts

@@ -1,27 +1,6 @@
-export interface UserGroupOption {
-  name: string;
-  id: number;
-}
-export interface PushObjectGroupInfoResponse {
-  userGroupId: number;
-  name: string;
-  total: number;
-  userList: UserInfo[];
-}
-
-export interface PushObjectUserInfoResponse extends UserInfo {
-  deptName: string;
-  deptId: number;
-}
-
 export interface UserInfo {
   id: number;
   realname: string;
   username: string;
   isSelected?: boolean;
 }
-
-export interface UserGroupInfo extends PushObjectGroupInfoResponse {
-  isExpand: boolean;
-  isHidden: boolean;
-}

src/views/disaster/WorkRecord.md

@@ -37,6 +37,6 @@
 - [ ] 任务执行做到看模板情况
 - [ ] 任务模板的接口、数据结构重构，组件重构
 ### 灾害防范模块
-- [ ] 有许多公用逻辑可以抽成hook和util(后续优化)
-- [ ] 有很多字段和后端不一样，时间来不及修改（后续优化）
-- [ ] 有很多公共组件可以在进行二次封装，后续完成后再进行优化
+- [x] 有许多公用逻辑可以抽成hook和util(后续优化)
+- [x] 有很多字段和后端不一样，时间来不及修改（后续优化）
+- [x] 有很多公共组件可以在进行二次封装，后续完成后再进行优化

src/views/disaster/components/Group.vue

@@ -11,7 +11,7 @@
     <div class="user-info" :class="[group.isExpand ? 'expanded' : 'hidden']" ref="userInfoRefs">
       <div class="user-info--left">
         <el-tag type="primary" v-for="user in group.userList" :key="user.id">
-          {{ user.username }}-{{ user.realname }}
+          {{ user.realname }}（{{ user.staffNo }}）{{ user.deptName }}
         </el-tag>
       </div>
       <div class="user-info--right" v-if="group.isHidden">
@@ -26,7 +26,7 @@
 
 <script lang="ts" setup>
   import { ref, watch } from 'vue';
-  import type { UserGroupInfo } from '@/types/push-object';
+  import type { UserGroupInfo } from '@/types/person-group/type';
   import { ArrowUp, ArrowDown } from '@element-plus/icons-vue';
   const userInfoRefs = ref<Record<string, HTMLElement>>({});
   const userGroupInfo = ref<UserGroupInfo[]>();

src/views/disaster/components/GroupSelect.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="group-select-container">
+    <el-select v-model="selectedGroups" multiple placeholder="请选择分组" filterable @change="handleChange" :disabled="disabled">
+      <el-option v-for="item in groupOptions" :key="item.id" :value="item.id" :label="item.name" />
+    </el-select>
+    <span @click="showGroupInfo" v-if="selectedGroups.length > 0" class="group-info-span"> 人员详情 </span>
+
+    <el-dialog
+      v-model="groupInfo"
+      title="人员详情"
+      align-center
+      :close-on-click-modal="false"
+      :destroy-on-close="true"
+      class="customDialog--pushObject"
+    >
+      <Group :userGroupInfo="userGroupInfo" />
+    </el-dialog>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, watch } from 'vue';
+  import type { UserGroupOption,UserGroupInfo } from '@/types/person-group/type';
+  import { getUserGroupDetailByIds } from '@/api/system/person-group';
+  import Group from './Group.vue';
+
+  const props = defineProps<{
+    modelValue: number[];
+    groupOptions: UserGroupOption[];
+    disabled?: boolean;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'update:modelValue', value: number[]): void;
+    (e: 'change', value: number[]): void;
+  }>();
+
+  const selectedGroups = ref<number[]>([]);
+
+  const groupInfo = ref(false);
+  const userGroupInfo = ref<UserGroupInfo[]>([]);
+
+  const showGroupInfo = () => {
+    groupInfo.value = true;
+    getUserGroupInfo();
+  };
+
+  const handleChange = (value: number[]) => {
+    emit('update:modelValue', value);
+    emit('change', value);
+  };
+
+  const getUserGroupInfo = async () => {
+    const res = await getUserGroupDetailByIds(selectedGroups.value);
+    userGroupInfo.value = res.map((item) => ({
+      ...item,
+      isExpand: false,
+      isHidden: false,
+    }));
+  };
+
+  // 监听 props 中的 modelValue 变化，更新内部的 selectedGroups
+  watch(
+    () => props.modelValue,
+    (newValue) => {
+      selectedGroups.value = [...newValue];
+    },
+    { immediate: true },
+  );
+</script>
+
+<style lang="scss" scoped>
+  .group-select-container {
+    position: relative;
+    width: 100%;
+  }
+
+  .group-info-span {
+    position: absolute;
+    left: 0;
+    bottom: -30px;
+    cursor: pointer;
+    font-size: 10cpx;
+    color: $primary-color;
+  }
+</style>

src/views/disaster/components/SelectGroup.vue

@@ -1,107 +0,0 @@
-<template>
-  <div class="select-group-container">
-    <el-form :model="ruleForm" ref="ruleFormRef">
-      <el-form-item
-        label="选择分组"
-        prop="userGroupList"
-        :rules="[{ required: true, message: '请选择分组' }]"
-        class="user-group-list"
-      >
-        <el-select
-          v-model="ruleForm.userGroupList"
-          multiple
-          placeholder="请选择分组"
-          filterable
-          @change="emits('userGroupListChange', ruleForm.userGroupList)"
-        >
-          <el-option v-for="item in groupOptions" :key="item.id" :value="item.id" :label="item.name" />
-        </el-select>
-        <span @click="showGroupInfo" v-if="ruleForm.userGroupList.length > 0" class="group-info-span"> 人员详情 </span>
-      </el-form-item>
-    </el-form>
-    <el-dialog
-      v-model="groupInfo"
-      title="人员详情"
-      align-center
-      :close-on-click-modal="false"
-      :destroy-on-close="true"
-      class="customDialog--pushObject"
-    >
-      <Group :userGroupInfo="userGroupInfo" />
-    </el-dialog>
-  </div>
-</template>
-
-<script lang="ts" setup>
-  import { ref, reactive, watch, onMounted } from 'vue';
-  import type { FormInstance } from 'element-plus';
-  import type { UserGroupInfo, UserGroupOption } from '@/types/push-object';
-  import { getUserGroupDetailByIds, getAllUserGroup } from '@/api/push-object';
-  import Group from './Group.vue';
-  const props = defineProps<{
-    userGroupList: number[];
-  }>();
-  interface RuleForm {
-    userGroupList: number[];
-  }
-  const groupOptions = ref<UserGroupOption[]>([]);
-  const ruleFormRef = ref<FormInstance>();
-  const ruleForm = reactive<RuleForm>({
-    userGroupList: [],
-  });
-  const groupInfo = ref(false);
-  const showGroupInfo = () => {
-    groupInfo.value = true;
-    getUserGroupInfo();
-  };
-  const userGroupInfo = ref<UserGroupInfo[]>([]);
-  const getUserGroupInfo = async () => {
-    const res = await getUserGroupDetailByIds(ruleForm.userGroupList);
-    userGroupInfo.value = res.map((item) => ({
-      ...item,
-      isExpand: false,
-      isHidden: false,
-    }));
-  };
-  const emits = defineEmits<{
-    (e: 'userGroupListChange', userGroupList: number[]): void;
-  }>();
-  const validateForm = () => {
-    return new Promise((resolve) => {
-      ruleFormRef.value?.validate((valid) => {
-        resolve(valid);
-      });
-    });
-  };
-  defineExpose({
-    validateForm,
-  });
-  onMounted(async () => {
-    const res = await getAllUserGroup();
-    groupOptions.value = res.groupVOList;
-  });
-  watch(
-    () => props.userGroupList,
-    (newUserGroupList) => {
-      ruleForm.userGroupList = newUserGroupList ?? [];
-    },
-    { immediate: true },
-  );
-</script>
-
-<style lang="scss" scoped>
-  .select-group-container {
-    width: 100%;
-  }
-  .user-group-list {
-    position: relative;
-  }
-  .group-info-span {
-    position: absolute;
-    left: 0;
-    bottom: -30px;
-    cursor: pointer;
-    font-size: 10cpx;
-    color: $primary-color;
-  }
-</style>

src/views/disaster/disaster-control/PageDisposalManagement.vue

@@ -15,7 +15,7 @@
             @update:searchData="handleSearch"
           >
             <template #reportDeptIds>
-              <el-select v-model="searchData.reportDeptIds" multiple placeholder="请选择上报单位" class="custom-select">
+              <el-select v-model="searchData.reportDeptIds" multiple placeholder="请选择上报单位" filterable class="custom-select">
                 <el-option v-for="item in firstLevelDepts" :key="item.id" :label="item.deptName" :value="item.id" />
               </el-select>
             </template>

src/views/disaster/disaster-precaution/src/components/CreateTaskItem.vue

@@ -2,16 +2,15 @@
   <div class="info-container">
     <BasicForm ref="basicFormRef" :formData="ruleFormData" :formRules="formRules" :formConfig="ruleFormConfig">
       <template #deptName>
-        <el-tree-select
+        <el-select
           v-model="ruleFormData.deptIdList"
-          :data="deptList"
-          check-strictly
           multiple
-          node-key="id"
-          :props="{ label: 'deptName', children: 'children' }"
           placeholder="请选择被检查（自查）单位"
-          class="custom-tree-select"
-        />
+          filterable
+          class="custom-select"
+        >
+          <el-option v-for="item in firstLevelDepts" :key="item.id" :label="item.deptName" :value="item.id" />
+        </el-select>
       </template>
       <template #inspectType>
         <div class="task-type-container">
@@ -24,14 +23,7 @@
         </div>
       </template>
       <template #userGroupList>
-        <div class="user-group-list">
-          <el-select v-model="ruleFormData.userGroupList" multiple placeholder="请选择检查责任人" filterable>
-            <el-option v-for="item in groupOptions" :key="item.id" :value="item.id" :label="item.name" />
-          </el-select>
-          <span class="group-info-span" @click="showGroupInfo" v-show="ruleFormData.userGroupList.length > 0">
-            人员详情
-          </span>
-        </div>
+        <GroupSelect v-model="ruleFormData.userGroupList" :groupOptions="groupOptions" />
       </template>
       <template #isPush>
         <el-radio-group v-model="ruleFormData.isPush">
@@ -40,16 +32,6 @@
         </el-radio-group>
       </template>
     </BasicForm>
-    <el-dialog
-      v-model="groupInfo"
-      title="人员详情"
-      align-center
-      :close-on-click-modal="false"
-      :destroy-on-close="true"
-      class="customDialog--pushObject"
-    >
-      <Group :userGroupInfo="userGroupInfo" />
-    </el-dialog>
   </div>
 </template>
 
@@ -62,35 +44,20 @@
   import { INSPECT_TYPE_OPTIONS } from '../constants/task-execution';
   import { TASK_TEMPLATE_LIST } from '../constants/template-detail';
   import { IS_PUSH } from '@/views/disaster/constant';
-  import type { UserGroupOption, UserGroupInfo } from '@/types/push-object';
-  import { getUserGroupDetailByIds, getAllUserGroup } from '@/api/push-object';
-  import Group from '@/views/disaster/components/Group.vue';
+  import type { UserGroupOption } from '@/types/person-group/type';
+  import { getAllUserGroup } from '@/api/system/person-group';
   import { getAllDepartments } from '@/api/auth/dept';
-  import type { DeptTreeItem } from '@/types/dept/type';
+  import type { DeptTree } from '@/types/dept/type';
+  import GroupSelect from '@/views/disaster/components/GroupSelect.vue';
+  import { formatDeptTree } from '@/views/disaster/utils/formatDeptTree';
   import { useUserInfoHook } from '@/views/disaster/hooks/userInfo';
 
   const { realname } = useUserInfoHook();
 
   const groupOptions = ref<UserGroupOption[]>([]);
-  const groupInfo = ref(false);
-  const userGroupInfo = ref<UserGroupInfo[]>([]);
-  const deptList = ref<DeptTreeItem[]>([]);
+  const firstLevelDepts = ref<DeptTree[]>([]);
   const basicFormRef = ref<InstanceType<typeof BasicForm>>();
 
-  const getUserGroupInfo = async () => {
-    const res = await getUserGroupDetailByIds(ruleFormData.userGroupList);
-    userGroupInfo.value = res.map((item) => ({
-      ...item,
-      isExpand: false,
-      isHidden: false,
-    }));
-  };
-
-  const showGroupInfo = () => {
-    groupInfo.value = true;
-    getUserGroupInfo();
-  };
-
   const handleTaskTypeChange = (taskType: number | null) => {
     ruleFormData.templateId = taskType;
   };
@@ -113,7 +80,7 @@
   };
   const getDeptList = async () => {
     const res = await getAllDepartments();
-    deptList.value = res;
+    firstLevelDepts.value = formatDeptTree(res);
   };
   const getUserGroupList = async () => {
     const res = await getAllUserGroup();
@@ -136,7 +103,7 @@
 <style scoped lang="scss">
   @use '@/views/disaster/style/info-container.scss' as *;
   @use '../style/task-item.scss' as *;
-  .custom-tree-select {
+  .custom-select {
     :deep(.el-select__selection) {
       min-height: 24px;
       max-height: 64px;

src/views/disaster/disaster-precaution/src/components/EditTaskItem.vue

@@ -12,14 +12,7 @@
         </div>
       </template>
       <template #userGroupList>
-        <div class="user-group-list">
-          <el-select v-model="ruleFormData.userGroupList" multiple placeholder="请选择检查责任人" filterable>
-            <el-option v-for="item in groupOptions" :key="item.id" :value="item.id" :label="item.name" />
-          </el-select>
-          <span class="group-info-span" @click="showGroupInfo" v-show="ruleFormData.userGroupList.length > 0">
-            人员详情
-          </span>
-        </div>
+        <GroupSelect v-model="ruleFormData.userGroupList" :groupOptions="groupOptions" />
       </template>
       <template #isPush>
         <el-radio-group v-model="ruleFormData.isPush">
@@ -28,16 +21,6 @@
         </el-radio-group>
       </template>
     </BasicForm>
-    <el-dialog
-      v-model="groupInfo"
-      title="人员详情"
-      align-center
-      :close-on-click-modal="false"
-      :destroy-on-close="true"
-      class="customDialog--pushObject"
-    >
-      <Group :userGroupInfo="userGroupInfo" />
-    </el-dialog>
   </div>
 </template>
 
@@ -50,29 +33,17 @@
   import { INSPECT_TYPE_OPTIONS } from '../constants/task-execution';
   import { TASK_TEMPLATE_LIST } from '../constants/template-detail';
   import { IS_PUSH } from '@/views/disaster/constant';
-  import type { UserGroupOption, UserGroupInfo } from '@/types/push-object';
-  import { getUserGroupDetailByIds, getAllUserGroup } from '@/api/push-object';
-  import Group from '@/views/disaster/components/Group.vue';
+  import type { UserGroupOption } from '@/types/person-group/type';
+  import { getAllUserGroup } from '@/api/system/person-group';
   import { viewTaskManagementDetail } from '@/api/disaster-precaution';
-
+  import GroupSelect from '@/views/disaster/components/GroupSelect.vue';
   const props = defineProps<{
     id: number;
   }>();
 
   const groupOptions = ref<UserGroupOption[]>([]);
-  const groupInfo = ref(false);
-  const userGroupInfo = ref<UserGroupInfo[]>([]);
   const basicFormRef = ref<InstanceType<typeof BasicForm>>();
 
-  const getUserGroupInfo = async () => {
-    const res = await getUserGroupDetailByIds(ruleFormData.userGroupList);
-    userGroupInfo.value = res.map((item) => ({
-      ...item,
-      isExpand: false,
-      isHidden: false,
-    }));
-  };
-
   const getTaskManagementItemInfo = async () => {
     const res = await viewTaskManagementDetail(props.id);
     for (const key in res) {
@@ -85,11 +56,6 @@
     cloneRuleFormData();
   };
 
-  const showGroupInfo = () => {
-    groupInfo.value = true;
-    getUserGroupInfo();
-  };
-
   const handleTaskTypeChange = (taskType: number | null) => {
     ruleFormData.templateId = taskType;
   };
@@ -130,11 +96,4 @@
 <style scoped lang="scss">
   @use '@/views/disaster/style/info-container.scss' as *;
   @use '../style/task-item.scss' as *;
-  .custom-tree-select {
-    :deep(.el-select__selection) {
-      min-height: 24px;
-      max-height: 64px;
-      overflow-y: auto;
-    }
-  }
 </style>

src/views/disaster/disaster-precaution/src/components/ViewTaskItem.vue

@@ -17,12 +17,7 @@
         </div>
       </template>
       <template #userGroupList>
-        <div class="user-group-list">
-          <el-select v-model="ruleFormData.userGroupList" multiple placeholder="请选择检查责任人" disabled>
-            <el-option v-for="item in groupOptions" :key="item.id" :value="item.id" :label="item.name" />
-          </el-select>
-          <span class="group-info-span" @click="showGroupInfo"> 人员详情 </span>
-        </div>
+        <GroupSelect v-model="ruleFormData.userGroupList" :groupOptions="groupOptions" disabled />
       </template>
       <template #isPush>
         <el-radio-group v-model="ruleFormData.isPush" disabled>
@@ -31,28 +26,18 @@
         </el-radio-group>
       </template>
     </BasicForm>
-    <el-dialog
-      v-model="groupInfo"
-      title="人员详情"
-      align-center
-      :close-on-click-modal="false"
-      :destroy-on-close="true"
-      class="customDialog--pushObject"
-    >
-      <Group :userGroupInfo="userGroupInfo" />
-    </el-dialog>
   </div>
 </template>
 
 <script setup lang="ts">
   import BasicForm from '@/components/BasicForm.vue';
   import { useFormConfigHook } from '@/hooks/useFormConfigHook';
-  import Group from '@/views/disaster/components/Group.vue';
+  import GroupSelect from '@/views/disaster/components/GroupSelect.vue';
   import { TASK_MANAGEMENT_FROM_CONFIG_EDIT, TASK_MANAGEMENT_FROM_DATA, TASK_MANAGEMENT_FROM_RULES } from '../config';
   import { onMounted, ref } from 'vue';
   import { TaskManagementRuleForm } from '../type';
-  import { getAllUserGroup, getUserGroupDetailByIds } from '@/api/push-object';
-  import type { UserGroupOption, UserGroupInfo } from '@/types/push-object';
+  import type { UserGroupOption } from '@/types/person-group/type';
+  import { getAllUserGroup } from '@/api/system/person-group';
   import { INSPECT_TYPE_OPTIONS } from '../constants/task-execution';
   import { TASK_TEMPLATE_LIST } from '../constants/template-detail';
   import { IS_PUSH } from '@/views/disaster/constant';
@@ -65,8 +50,6 @@
 
   const basicFormRef = ref<InstanceType<typeof BasicForm>>();
   const groupOptions = ref<UserGroupOption[]>([]);
-  const groupInfo = ref(false);
-  const userGroupInfo = ref<UserGroupInfo[]>([]);
 
   const handleTaskTypeChange = (taskType: number | null) => {
     ruleFormData.taskTemplate = taskType;
@@ -97,20 +80,6 @@
     cloneRuleFormData();
   };
 
-  const getUserGroupInfo = async () => {
-    const res = await getUserGroupDetailByIds(ruleFormData.userGroupList);
-    userGroupInfo.value = res.map((item) => ({
-      ...item,
-      isExpand: false,
-      isHidden: false,
-    }));
-  };
-
-  const showGroupInfo = () => {
-    groupInfo.value = true;
-    getUserGroupInfo();
-  };
-
   const getUserGroupList = async () => {
     const res = await getAllUserGroup();
     groupOptions.value = res.groupVOList;

src/views/disaster/disaster-precaution/src/config/table.ts

@@ -47,6 +47,7 @@ const BASIC_TABLE_COLUMNS = {
     prop: 'dueCompleteTime',
     label: '应完成时间',
     align: 'center',
+    width: '200cpx',
   },
   TASK_STAGE: {
     prop: 'taskState',
@@ -85,6 +86,12 @@ export const TASK_MANAGEMENT_TABLE_COLUMNS: TableColumnProps[] = [
     width: '120cpx',
   },
   BASIC_TABLE_COLUMNS.TASK_STAGE,
+  {
+    prop: 'updatedAt',
+    label: '创建时间',
+    align: 'center',
+    width: '200cpx',
+  },
   BASIC_TABLE_COLUMNS.ACTION,
 ];
 

src/views/disaster/disaster-precaution/src/style/task-item.scss

@@ -1,4 +1,3 @@
-@use '@/styles/variables.scss' as *;
 :deep(.el-date-editor) {
   --el-date-editor-width: 100%;
 }
@@ -8,15 +7,3 @@
   gap: 10cpx;
   width: 100%;
 }
-.user-group-list {
-  width: 100%;
-  position: relative;
-}
-.group-info-span {
-  position: absolute;
-  left: 0;
-  bottom: -30px;
-  cursor: pointer;
-  font-size: 10cpx;
-  color: $primary-color;
-}

src/views/disaster/disaster-warning/src/components/CreateDefenseNoticeItem.vue

@@ -48,7 +48,7 @@
   import { IS_PUSH } from '@/views/disaster/constant';
   import { onMounted, ref } from 'vue';
   import { DefenseNoticeRuleForm } from '../type';
-  import SelectGroup from '@/views/disaster/components/SelectGroup.vue';
+  import SelectGroup from './SelectGroup.vue';
   import type { FileItem } from '@/views/disaster/types';
   import { useDisasterWarningHook } from '../hook';
   import { useUserInfoHook } from '@/views/disaster/hooks/userInfo';

src/views/disaster/disaster-warning/src/components/CreateWarningInfoItem.vue

@@ -43,7 +43,7 @@
   import { WARNING_INFO_FROM_CONFIG, WARNING_INFO_FROM_DATA, WARNING_INFO_FROM_RULES } from '../config';
   import { onMounted, ref } from 'vue';
   import { WarningInfoRuleForm } from '../type';
-  import SelectGroup from '@/views/disaster/components/SelectGroup.vue';
+  import SelectGroup from './SelectGroup.vue';
   import { useUserInfoHook } from '@/views/disaster/hooks/userInfo';
   import { useDisasterWarningHook } from '../hook';
   import { IS_PUSH } from '@/views/disaster/constant';

src/views/disaster/disaster-warning/src/components/EditDefenseNoticeItem.vue

@@ -47,7 +47,7 @@
   import { DEFENSE_NOTICE_FROM_CONFIG, DEFENSE_NOTICE_FROM_DATA, DEFENSE_NOTICE_FROM_RULES } from '../config';
   import { onMounted, ref } from 'vue';
   import { DefenseNoticeRuleForm } from '../type';
-  import SelectGroup from '@/views/disaster/components/SelectGroup.vue';
+  import SelectGroup from './SelectGroup.vue';
   import type { FileItem } from '@/views/disaster/types';
   import { IS_PUSH } from '@/views/disaster/constant';
   import { useDisasterWarningHook } from '../hook';

src/views/disaster/disaster-warning/src/components/EditWarningInfoItem.vue

@@ -40,7 +40,7 @@
 <script setup lang="ts">
   import { onMounted, ref } from 'vue';
   import BasicForm from '@/components/BasicForm.vue';
-  import SelectGroup from '@/views/disaster/components/SelectGroup.vue';
+  import SelectGroup from './SelectGroup.vue';
   import { useFormConfigHook } from '@/hooks/useFormConfigHook';
   import { WARNING_INFO_FROM_CONFIG, WARNING_INFO_FROM_DATA, WARNING_INFO_FROM_RULES } from '../config';
   import { WarningInfoRuleForm } from '../type';

src/views/disaster/disaster-warning/src/components/SelectGroup.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="select-group-container">
+    <el-form :model="ruleForm" ref="ruleFormRef">
+      <el-form-item label="选择分组" prop="userGroupList" :rules="[{ required: true, message: '请选择分组' }]">
+        <GroupSelect
+          v-model="ruleForm.userGroupList"
+          :groupOptions="groupOptions"
+          @change="emits('userGroupListChange', $event)"
+        />
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch, onMounted } from 'vue';
+  import type { FormInstance } from 'element-plus';
+  import type { UserGroupOption } from '@/types/person-group/type';
+  import { getAllUserGroup } from '@/api/system/person-group';
+  import GroupSelect from '@/views/disaster/components/GroupSelect.vue';
+
+  const props = defineProps<{
+    userGroupList: number[];
+  }>();
+
+  interface RuleForm {
+    userGroupList: number[];
+  }
+
+  const groupOptions = ref<UserGroupOption[]>([]);
+  const ruleFormRef = ref<FormInstance>();
+  const ruleForm = reactive<RuleForm>({
+    userGroupList: [],
+  });
+
+  const emits = defineEmits<{
+    (e: 'userGroupListChange', userGroupList: number[]): void;
+  }>();
+
+  const validateForm = () => {
+    return new Promise((resolve) => {
+      ruleFormRef.value?.validate((valid) => {
+        resolve(valid);
+      });
+    });
+  };
+
+  defineExpose({
+    validateForm,
+  });
+
+  onMounted(async () => {
+    const res = await getAllUserGroup();
+    groupOptions.value = res.groupVOList;
+  });
+
+  watch(
+    () => props.userGroupList,
+    (newUserGroupList) => {
+      ruleForm.userGroupList = newUserGroupList ?? [];
+    },
+    { immediate: true },
+  );
+</script>
+
+<style lang="scss" scoped>
+  .select-group-container {
+    width: 100%;
+  }
+</style>