From b0fc3b05f29015e2cba0ef7d4d283fd34b9b7bbd Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Wed, 8 Apr 2026 13:59:14 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(select):=20=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E6=89=B9=E6=AC=A1=E5=92=8C=E4=BB=93=E5=BA=93=E8=BF=87=E6=BB=A4?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=EF=BC=8C=E4=BC=98=E5=8C=96=E5=BA=93=E5=AD=98?=
 =?UTF-8?q?=E9=80=89=E6=8B=A9=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/mes/cal/plan/CalPlanTeamList.vue | 109 ++++++++-------------
 src/views/mes/cal/plan/CalShiftList.vue    |   8 +-
 2 files changed, 44 insertions(+), 73 deletions(-)

diff --git a/src/views/mes/cal/plan/CalPlanTeamList.vue b/src/views/mes/cal/plan/CalPlanTeamList.vue
index 2e5cb5ff2..abcaa5b1b 100644
--- a/src/views/mes/cal/plan/CalPlanTeamList.vue
+++ b/src/views/mes/cal/plan/CalPlanTeamList.vue
@@ -3,11 +3,11 @@
   <div>
     <!-- 操作栏 -->
     <el-button
-      v-if="!readonly"
+      v-if="!isDetail"
       type="primary"
       plain
       size="small"
-      @click="openForm('create')"
+      @click="openTeamSelect"
       class="mb-10px"
     >
       <Icon icon="ep:plus" class="mr-5px" /> 添加班组
@@ -28,7 +28,7 @@
           <el-table-column label="班组编码" align="center" prop="teamCode" min-width="100" />
           <el-table-column label="班组名称" align="center" prop="teamName" min-width="100" />
           <el-table-column label="备注" align="center" prop="remark" min-width="120" />
-          <el-table-column v-if="!readonly" label="操作" align="center" width="80">
+          <el-table-column v-if="!isDetail" label="操作" align="center" width="80">
             <template #default="scope">
               <el-button link type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
             </template>
@@ -69,42 +69,26 @@
       </el-col>
     </el-row>
 
-    <!-- 表单弹窗：添加/修改 -->
-    <Dialog :title="dialogTitle" v-model="dialogVisible" width="500px">
-      <el-form
-        ref="formRef"
-        :model="formData"
-        :rules="formRules"
-        label-width="80px"
-        v-loading="formLoading"
-      >
-        <el-form-item label="班组" prop="teamId">
-          <CalTeamSelect v-model="formData.teamId" class="!w-1/1" />
-        </el-form-item>
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" />
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
-        <el-button @click="dialogVisible = false">取 消</el-button>
-      </template>
-    </Dialog>
+    <!-- 班组多选弹窗 -->
+    <CalTeamSelectDialog ref="teamDialogRef" :multiple="true" @selected="handleTeamsSelected" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { CalPlanTeamApi, CalPlanTeamVO } from '@/api/mes/cal/plan/team'
 import { CalTeamMemberApi, CalTeamMemberVO } from '@/api/mes/cal/team/member'
-import CalTeamSelect from '@/views/mes/cal/team/components/CalTeamSelect.vue'
+import { CalTeamVO } from '@/api/mes/cal/team'
+import CalTeamSelectDialog from '@/views/mes/cal/team/components/CalTeamSelectDialog.vue'
 
 defineOptions({ name: 'CalPlanTeamList' })
 
 const props = defineProps<{
   planId: number // 排班计划编号
-  readonly?: boolean // 是否只读模式 TODO @AI：【听我的】，参考别的模块，基于 formType 做判断；你参考下；
+  formType: string // 表单的类型：create / update / detail
 }>()
 
+const isDetail = computed(() => props.formType === 'detail') // DONE @AI：【听我的】，参考别的模块，基于 formType 做判断；你参考下；
+
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 
@@ -145,59 +129,44 @@ const handleTeamSelect = async (row: CalPlanTeamVO | null) => {
   }
 }
 
-// ==================== 添加/修改 ====================
-const dialogVisible = ref(false) // 弹窗的是否展示
-const dialogTitle = ref('') // 弹窗的标题
-const formLoading = ref(false) // 表单的加载中
-const formRef = ref() // 表单 Ref
-const formData = ref({
-  id: undefined as number | undefined,
-  planId: undefined as number | undefined,
-  teamId: undefined as number | undefined,
-  remark: undefined as string | undefined
-})
-const formRules = reactive({
-  teamId: [{ required: true, message: '班组不能为空', trigger: 'blur' }]
-})
+// ==================== 多选班组批量添加 ====================
+const teamDialogRef = ref()
 
-/** 打开表单弹窗 */
-const openForm = async (type: string) => {
-  dialogVisible.value = true
-  dialogTitle.value = t('action.' + type)
-  resetForm()
+/** 打开班组多选弹窗 */
+const openTeamSelect = () => {
+  // 传入已关联的班组 ID 列表，方便高亮已选
+  const existingTeamIds = list.value.map((item) => item.teamId)
+  teamDialogRef.value.open(existingTeamIds)
 }
 
-/** 提交表单 */
-const submitForm = async () => {
-  // 校验表单
-  if (!formRef) return
-  const valid = await formRef.value.validate()
-  if (!valid) return
-  // 提交请求
-  formLoading.value = true
+/** 多选班组确认后，批量创建关联 */
+const handleTeamsSelected = async (rows: CalTeamVO[]) => {
+  if (!rows || rows.length === 0) {
+    return
+  }
+  // 过滤掉已经存在的班组
+  const existingTeamIds = new Set(list.value.map((item) => item.teamId))
+  const newTeams = rows.filter((team) => !existingTeamIds.has(team.id))
+  if (newTeams.length === 0) {
+    message.warning('所选班组已全部添加过')
+    return
+  }
+  // 逐个创建（后端为单条创建接口）
+  loading.value = true
   try {
-    const data = formData.value as unknown as CalPlanTeamVO
-    await CalPlanTeamApi.createPlanTeam(data)
-    message.success(t('common.createSuccess'))
-    dialogVisible.value = false
-    // 刷新列表
+    for (const team of newTeams) {
+      await CalPlanTeamApi.createPlanTeam({
+        planId: props.planId,
+        teamId: team.id
+      } as unknown as CalPlanTeamVO)
+    }
+    message.success(`成功添加 ${newTeams.length} 个班组`)
     await getList()
   } finally {
-    formLoading.value = false
+    loading.value = false
   }
 }
 
-/** 重置表单 */
-const resetForm = () => {
-  formData.value = {
-    id: undefined,
-    planId: props.planId,
-    teamId: undefined,
-    remark: undefined
-  }
-  formRef.value?.resetFields()
-}
-
 /** 删除按钮操作 */
 const handleDelete = async (id: number) => {
   try {
diff --git a/src/views/mes/cal/plan/CalShiftList.vue b/src/views/mes/cal/plan/CalShiftList.vue
index 38268ea6c..fee4174b7 100644
--- a/src/views/mes/cal/plan/CalShiftList.vue
+++ b/src/views/mes/cal/plan/CalShiftList.vue
@@ -3,7 +3,7 @@
   <div>
     <!-- 操作栏 -->
     <el-button
-      v-if="!readonly"
+      v-if="!isDetail"
       type="primary"
       plain
       size="small"
@@ -19,7 +19,7 @@
       <el-table-column label="开始时间" align="center" prop="startTime" width="100" />
       <el-table-column label="结束时间" align="center" prop="endTime" width="100" />
       <el-table-column label="备注" align="center" prop="remark" min-width="150" />
-      <el-table-column v-if="!readonly" label="操作" align="center" width="120">
+      <el-table-column v-if="!isDetail" label="操作" align="center" width="120">
         <template #default="scope">
           <el-button link type="primary" @click="openForm('update', scope.row)">编辑</el-button>
           <el-button link type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
@@ -84,9 +84,11 @@ defineOptions({ name: 'CalShiftList' })
 
 const props = defineProps<{
   planId: number // 排班计划编号
-  readonly?: boolean // 是否只读模式 TODO @AI：【听我的】，参考别的模块，基于 formType 做判断；你参考下；
+  formType: string // 表单的类型：create / update / detail
 }>()
 
+const isDetail = computed(() => props.formType === 'detail') // DONE @AI：【听我的】，参考别的模块，基于 formType 做判断；你参考下；
+
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗