修改 SchoolPicker 組件

TEAMModelBI/ClientApp/src/view/systemConfig/NewMsg/SchoolPicker.vue

@@ -1,8 +1,8 @@
 <template>
     <el-row style="background-color: #FFFFFF; align-items: flex-start;">
-        <el-col :span="8" class="custom-col">
+        <el-col :span="24" class="custom-col">
 
-            <p style="margin: 0; line-height: 1.2">學校列表</p>
+            <!-- <p style="margin: 0; line-height: 1.2">學校列表</p>  -->
 
             <!-- 搜尋欄 -->
             <el-input v-model="wordFilter"
@@ -24,14 +24,8 @@
             </el-scrollbar>
 
         </el-col>
-
-        <el-col :span="8">
-            Column 2            
-        </el-col>
-        <el-col :span="8">Column 3</el-col>
     </el-row>
 
-
 </template>
 
 <script setup>

TEAMModelBI/ClientApp/src/view/systemConfig/NewMsg/index.vue

@@ -9,9 +9,7 @@
         </el-header>
 
         <span style="display: block; font-size: 10px; line-height: 1.2;"><el-button @click="mytest">測試</el-button></span>
- 
-        
-
+         
         <div v-if="active === 0">
             <New_Msg_Type :active="active" @update-active="updateActive" />
         </div>
@@ -38,7 +36,7 @@
     import New_Msg_Type from './new_msg_type.vue'; // 引入组件
     import New_Msg_BatchSelect from './new_msg_BatchSelect.vue'; // 引入组件
     import New_Msg_ID_Select from './new_msg_ID_Select.vue'; // 引入组件
-    import Active_Test from './active/test.vue'; // 引入组件
+    import Active_Test from './active/SchoolPicker.vue'; // 引入组件
     
     import { ChatDotSquare } from '@element-plus/icons-vue'
 

TEAMModelBI/ClientApp/src/view/systemConfig/NewMsg/new_msg_BatchSelect.vue

@@ -1,8 +1,10 @@
 <template>
     <h2> selectedPath : {{selectedPath}} </h2>
+    <h2> currentSpan : {{currentSpan}} </h2>
     <el-row type="flex" justify="center" style="background-color: #ffffff;width:100%; height:80vh">
 
-        <el-col :span="8">
+        <!---<el-col :span="16">-->
+        <el-col :span="currentSpan">
 
             <div v-if="selectedPath === 0">
                 <el-card>
@@ -33,8 +35,8 @@
                     </template>
 
                     <!-- 學區 List -->
-                   
-                    <School_District/>
+
+                    <School_District />
 
                 </el-card>
             </div>
@@ -83,7 +85,7 @@
 
         </el-col>
 
-        <el-col :span="8">
+        <el-col :span="0">
             <!-- 留白 -->
         </el-col>
 
@@ -93,7 +95,24 @@
                     <span class="head-text">接收名單</span>
                 </template>
 
-                <div>內容區域 1</div>
+                <div>
+                    <el-scrollbar style="height: 300px; width: 300px;">
+                        <el-list style="display: flex; flex-direction: column;">
+                            <el-list-item v-for="(item, index) in items" :key="index" class="el-list-item">
+                                
+                                {{ item }}
+
+                                <el-button  size="small" @click="removeSchool(index)">
+                                    <el-icon>
+                                        <CloseBold />
+                                    </el-icon>
+                                </el-button>
+
+                            </el-list-item>
+                        </el-list>
+                    </el-scrollbar>
+
+                </div>
             </el-card>
         </el-col>
     </el-row>
@@ -113,12 +132,18 @@
 
     import { ElMenu, ElMenuItem } from 'element-plus';
 
+    import { CloseBold } from '@element-plus/icons-vue';
+
+    const currentSpan = ref(8); // 初始 span 值
+
     const selectedPath = ref(0);
     // 菜單選擇處理
     const handleMenuSelect = (index) => {
         if (index === '1') {
             selectedPath.value = 1;
 
+            //currentSpan.value = currentSpan.value === 8 ? 16 : 8;
+
         } else if (index === '2') {
             selectedPath.value = 2;
 
@@ -156,6 +181,19 @@
     };
 
 
+    const items = ref([
+        '台北學區',
+        '臺北科技大學',
+        '文化大學',
+        '陽明大學',
+        '致理科大',
+    ]);
+
+    function removeSchool(index) {
+        items.value.splice(index, 1); // 移除指定索引的学校
+        console.log('移除学校:', index);
+    }
+
 </script>
 
 <style scoped>
@@ -189,6 +227,13 @@
         margin-left: auto; /* 左边距自动调整 */
         margin-top: 5%;
     }
+    .el-list-item {
+        padding: 5px 10px !important;
+        line-height: 1.5 !important;
+        height: auto !important;
+        display: flex;
+        justify-content: space-between;
+    }
 
 </style>