統購設定頁 追加匯入學校功能

TEAMModelBI/ClientApp/src/language/lang/zh-cn.js

@@ -907,6 +907,7 @@ const zh_cn = {
         inputQuota: '请输入名额',
         school: '学校',
         schoolName: '学校名称',
+        schoolCode: '学校简码',
         inputNumber: '请输入数字',
         receiveNumber: '领取人数',
         operate: '操作',
@@ -915,7 +916,11 @@ const zh_cn = {
         confirmOk: '确定',
         cancel: '取消',
         addSchool: '追加学校',
+        importSchool: '汇入学校',
         extension: '扩充项',
+        action: '动作',
+        import: '汇入',
+        searchSchName: '搜寻学校名称',
     },
     auth:{
         YMPCVCIM: '学情分析模组',

TEAMModelBI/ClientApp/src/language/lang/zh-tw.js

@@ -900,6 +900,7 @@ const zh_tw = {
         inputQuota: '請輸入名額',
         school: '學校',
         schoolName: '學校名稱',
+        schoolCode: '學校簡碼',
         inputNumber: '請輸入數字',
         receiveNumber: '領取人數',
         operate: '操作',
@@ -908,7 +909,11 @@ const zh_tw = {
         confirmOk: '確定',
         cancel: '取消',
         addSchool: '追加學校',
+        importSchool: '匯入學校',
         extension: '擴充項',
+        action: '動作',
+        import: '匯入',
+        searchSchName: '搜尋學校名稱',
     },
     auth:{
         YMPCVCIM: '學情分析模組',

TEAMModelBI/ClientApp/src/view/htcommunity/adminpanel.vue

@@ -1,77 +1,78 @@
-<template>  
-  <div class="containbox">   
-    <el-card class="classcard1" shadow="Always">
-        <span class="classspan">
-            {{$t('purchase.purchasePlatform')}} - {{$t('purchase.productManagement')}}
-        </span>
-      <div style="width: 100%;margin-bottom: 50px;">
-        <el-button type="primary" plain @click="clearform(),(dialogFormVisible= true)"
-          style="float: left;">{{$t('purchase.addNew')}}</el-button>
-      </div>
-      <el-divider />
-      <div class="recordbox" style="width: 100%; height: 87vh" v-loading="loading" element-loading-text="loading...">
-        <el-auto-resizer>
-          <template #default="{ height, width }">
-            <el-table-v2 row-key="id" :columns="columns" :data="tableData" :style="{ width: '100%' }" :width="width" :height="height" :sort-by="sortState" @column-sort="onSort" fixed />
-          </template>
-        </el-auto-resizer>
-      </div>
-    </el-card>
-    <el-dialog v-model="dialogFormVisible" :title="$t('purchase.prodSeatsInfo')" width="1000" @closed="clearform">
-        <el-form :model="form" :rules="rules" ref="ruleFormRef" :label-position="Top">
-            <el-form-item :label="$t('purchase.cityOrDistrict')" :label-width="formLabelWidth" prop="region">
-                <el-select v-model="form.region" :placeholder="$t('purchase.selectCityOrDistrict')" :disabled="isRegionDisabled">
-                    <el-option v-for="item in optionsData" :key="item.code" :label="item.name" :value="item.code" />
-                </el-select>
-            </el-form-item>
-            <el-form-item :label="$t('purchase.prodName')" :label-width="formLabelWidth" prop="name">
-                <el-select v-model="form.name" :placeholder="$t('purchase.selectProd')" @change="handleChange" :disabled="isNameDisabled">
-                    <el-option v-for="item in nameOptions" :key="item.value" :label="item.label" :value="item.value" />
-                </el-select>
-            </el-form-item>
-            <el-form-item :label="$t('purchase.space')" :label-width="formLabelWidth" v-show="isShowSpace">
-                <el-input v-model.number="form.space" style="width: 240px" :placeholder="$t('purchase.inputSpace')" /> &nbsp;&nbsp;({{$t('purchase.unit')}}GB)
-            </el-form-item>
-            <el-form-item :label="$t('purchase.extension')" :label-width="formLabelWidth" v-show="isShowExtensions" style="width: 100%">
-                <el-checkbox v-model="form.extensions" v-for="item in extensions" :key="item.Key" :label="item.Key" :value="item.Key" style="width: 240px">
-                    {{ item.Name }}
-                    <el-input v-model="exqwen[item.Key]" style="width: 100px" :placeholder="$t('purchase.inputNumber')"
-                      v-show="isShowExQwen(item.Key)" />
-                </el-checkbox>
-            </el-form-item>
-            <el-form-item :label="$t('purchase.expirationDate')" :label-width="formLabelWidth" prop="time" style="width: 500px">
-                <el-date-picker v-model="form.time" type="daterange" range-separator="To" :start-placeholder="$t('purchase.startDate')" :end-placeholder="$t('purchase.endDate')" :size="size" format="YYYY/MM/DD" value-format="YYYY-MM-DD" />
-            </el-form-item>
-            <el-form-item :label="$t('purchase.quota')" :label-width="formLabelWidth" prop="qwen">
-                <el-input v-model.number="form.qwen" style="width: 240px" :placeholder="$t('purchase.inputQuota')" />
-            </el-form-item>
-            <el-form-item :label="$t('purchase.school')" :label-width="formLabelWidth">
-                <el-table :data="form.schools" style="width: 100%">
-                    <el-table-column prop="schoolName" :label="$t('purchase.schoolName')">
-                    </el-table-column>
-                    <el-table-column prop="seats" :label="$t('purchase.quota')">
-                        <template #default="scope">
-                            <el-input v-model="scope.row.seats" :placeholder="$t('purchase.inputNumber')" type="number" @input="(value)=>handleInputSeats(value, scope.row.shortCode)"></el-input>
-                        </template>
-                    </el-table-column>
-                    <el-table-column prop="used" :label="$t('purchase.receiveNumber')">
-                    </el-table-column>
-                    <el-table-column :label="$t('purchase.operate')">
-                        <template #default="scope">
-                            <el-button @click="removeSchoolSeat(scope.$index)">{{$t('purchase.remove')}}</el-button>
-                        </template>
-                    </el-table-column>
-                </el-table>
-                <div style="margin-top: 0px; width: 100%; text-align: left; " v-show="isShowCsSchool">
-                    <el-select v-model="selectedSchInfo" filterable value-key="shortCode" :placeholder="$t('purchase.selectSchool')" style="width: 50%">
-                        <el-option v-for="item in csSchoolList" :key="item.shortCode" :label="item.name + ' (' + item.shortCode + ')'" :value="item" />
+<template>
+    <div class="containbox">
+        <el-card class="classcard1" shadow="Always">
+            <span class="classspan">
+                {{$t('purchase.purchasePlatform')}} - {{$t('purchase.productManagement')}}
+            </span>
+            <div style="width: 100%;margin-bottom: 50px;">
+                <el-button type="primary" plain @click="clearform(),(dialogFormVisible= true)"
+                           style="float: left;">{{$t('purchase.addNew')}}</el-button>
+            </div>
+            <el-divider />
+            <div class="recordbox" style="width: 100%; height: 87vh" v-loading="loading" element-loading-text="loading...">
+                <el-auto-resizer>
+                    <template #default="{ height, width }">
+                        <el-table-v2 row-key="id" :columns="columns" :data="tableData" :style="{ width: '100%' }" :width="width" :height="height" :sort-by="sortState" @column-sort="onSort" fixed />
+                    </template>
+                </el-auto-resizer>
+            </div>
+        </el-card>
+        <el-dialog v-model="dialogFormVisible" :title="$t('purchase.prodSeatsInfo')" width="1000" @closed="clearform">
+            <el-form :model="form" :rules="rules" ref="ruleFormRef" :label-position="Top">
+                <el-form-item :label="$t('purchase.cityOrDistrict')" :label-width="formLabelWidth" prop="region">
+                    <el-select v-model="form.region" :placeholder="$t('purchase.selectCityOrDistrict')" :disabled="isRegionDisabled">
+                        <el-option v-for="item in optionsData" :key="item.code" :label="item.name" :value="item.code" />
                     </el-select>
-                    <el-button style="margin-left: 5px;" @click="addSchoolSeat()">{{$t('purchase.confirmOk')}}</el-button>
-                </div>
-                <div style="margin-top: 5px" v-show="isShowSchoolDiv">
-                    <el-button @click="showAddSchool()">{{$t('purchase.addSchool')}}</el-button>
-                </div>
-            </el-form-item>
+                </el-form-item>
+                <el-form-item :label="$t('purchase.prodName')" :label-width="formLabelWidth" prop="name">
+                    <el-select v-model="form.name" :placeholder="$t('purchase.selectProd')" @change="handleChange" :disabled="isNameDisabled">
+                        <el-option v-for="item in nameOptions" :key="item.value" :label="item.label" :value="item.value" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item :label="$t('purchase.space')" :label-width="formLabelWidth" v-show="isShowSpace">
+                    <el-input v-model.number="form.space" style="width: 240px" :placeholder="$t('purchase.inputSpace')" /> &nbsp;&nbsp;({{$t('purchase.unit')}}GB)
+                </el-form-item>
+                <el-form-item :label="$t('purchase.extension')" :label-width="formLabelWidth" v-show="isShowExtensions" style="width: 100%">
+                    <el-checkbox v-model="form.extensions" v-for="item in extensions" :key="item.Key" :label="item.Key" :value="item.Key" style="width: 240px">
+                        {{ item.Name }}
+                        <el-input v-model="exqwen[item.Key]" style="width: 100px" :placeholder="$t('purchase.inputNumber')"
+                                  v-show="isShowExQwen(item.Key)" />
+                    </el-checkbox>
+                </el-form-item>
+                <el-form-item :label="$t('purchase.expirationDate')" :label-width="formLabelWidth" prop="time" style="width: 500px">
+                    <el-date-picker v-model="form.time" type="daterange" range-separator="To" :start-placeholder="$t('purchase.startDate')" :end-placeholder="$t('purchase.endDate')" :size="size" format="YYYY/MM/DD" value-format="YYYY-MM-DD" />
+                </el-form-item>
+                <el-form-item :label="$t('purchase.quota')" :label-width="formLabelWidth" prop="qwen">
+                    <el-input v-model.number="form.qwen" style="width: 240px" :placeholder="$t('purchase.inputQuota')" />
+                </el-form-item>
+                <el-form-item :label="$t('purchase.school')" :label-width="formLabelWidth">
+                    <el-table :data="form.schools" style="width: 100%">
+                        <el-table-column prop="schoolName" :label="$t('purchase.schoolName')">
+                        </el-table-column>
+                        <el-table-column prop="seats" :label="$t('purchase.quota')">
+                            <template #default="scope">
+                                <el-input v-model="scope.row.seats" :placeholder="$t('purchase.inputNumber')" type="number" @input="(value)=>handleInputSeats(value, scope.row.shortCode)"></el-input>
+                            </template>
+                        </el-table-column>
+                        <el-table-column prop="used" :label="$t('purchase.receiveNumber')">
+                        </el-table-column>
+                        <el-table-column :label="$t('purchase.operate')">
+                            <template #default="scope">
+                                <el-button @click="removeSchoolSeat(scope.$index)">{{$t('purchase.remove')}}</el-button>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                    <div style="margin-top: 0px; width: 100%; text-align: left; " v-show="isShowCsSchool">
+                        <el-select v-model="selectedSchInfo" filterable value-key="shortCode" :placeholder="$t('purchase.selectSchool')" style="width: 50%">
+                            <el-option v-for="item in csSchoolList" :key="item.shortCode" :label="item.name + ' (' + item.shortCode + ')'" :value="item" />
+                        </el-select>
+                        <el-button style="margin-left: 5px;" @click="addSchoolSeat()">{{$t('purchase.confirmOk')}}</el-button>
+                    </div>
+                    <div style="margin-top: 5px" v-show="isShowSchoolDiv">
+                        <el-button :loading="delayAddSchool" @click="showAddSchool()">{{$t('purchase.addSchool')}}</el-button>
+                        <el-button :loading="delayImportSchool" @click="showImportSchool()">{{$t('purchase.importSchool')}}</el-button>
+                    </div>
+                </el-form-item>
             </el-form>
             <template #footer>
                 <div class="dialog-footer">
@@ -79,13 +80,41 @@
                     <el-button @click="clearform">{{$t('purchase.cancel')}}</el-button>
                 </div>
             </template>
-    </el-dialog>
-</div>
+        </el-dialog>
+    </div>
+    <div>
+        <el-dialog class="import-school-dialog" v-model="dialogImportSchVisible" :title="$t('purchase.addSchool')">
+            <div class="import-school-div">
+                <el-row>
+                    <el-col :span="4">
+                    </el-col>
+                    <el-col :span="16" class="container-center">
+                        <el-input v-model="filterSchString" :placeholder="$t('purchase.searchSchName')"></el-input>
+                    </el-col>
+                    <el-col :span="4" class="container-right">
+                        <el-button type="primary" @click="importData">{{$t('purchase.import')}}</el-button>
+                    </el-col>
+                </el-row>
+                <c-scrollbar ref="scrollbarRef" width="100%" height="66vh" trigger="hover" direction="y">
+                    <el-table class="import-school-tb" :data="filterSchList" style="width: 100%" @selection-change="handleSelectionChange">
+                        <el-table-column prop="name" :label="$t('purchase.schoolName')"></el-table-column>
+                        <el-table-column prop="shortCode" :label="$t('purchase.schoolCode')"></el-table-column>
+                        <el-table-column type="selection" :label="$t('purchase.action')"></el-table-column>
+                    </el-table>
+                </c-scrollbar>
+            </div>
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="clearImport">{{$t('purchase.cancel')}}</el-button>
+                </span>
+            </template>
+        </el-dialog>
+    </div>
 </template>
   
   <script setup>  
   import { useRouter } from 'vue-router'
-  import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
+  import { ref, reactive, onMounted, computed, getCurrentInstance } from 'vue'
   import { ElMessage, ElMessageBox, TableV2SortOrder } from 'element-plus'
   import option_gl from '@/static/regions/region_gl.json'
   const optionsData = option_gl[0].children
@@ -99,7 +128,11 @@
   const dialogFormVisible = ref(false)
   const isRegionDisabled = ref(false)
   const isNameDisabled = ref(false)
+  const dialogImportSchVisible = ref(false)
   const formLabelWidth = '140px'
+  const delayAddSchool = ref(false)
+  const delayImportSchool = ref(false)
+
   // 檢查數字不可為零
   const validateNum = (rule, value, callback) => {
     if (value === 0) {
@@ -175,6 +208,17 @@
   let isShowExtensions = ref(false)
   let isShowSchoolDiv = ref(false) //顯示學校區域
   let isShowCsSchool = ref(false) //顯示新建學校下拉選單
+  let importSelection = ref([]) //(匯入學校時)選擇中的學校
+  let filterSchString = ref('') //過濾匯入學校列表字串
+  let filterSchList = computed(() => { //過濾後的學校列表(顯示用)
+    if (filterSchString.value != '') {
+        return csSchoolList.value.filter(s => s.name.indexOf(filterSchString.value) !== -1)
+    }
+    else {
+        return csSchoolList.value
+    }
+  })
+
   // 擴充項項目
   const extensions = reactive([
     {
@@ -337,15 +381,37 @@
   const handleInputSeats = (value, shortCode) => {
     form.schools.find(s => s.shortCode == shortCode).seats = value ? Number(value) : ''
   }
-  //學校名額 追加新學校 [待做]下拉選單選擇該縣市的學校
+  //學校名額 追加新學校 
   const showAddSchool = () => {
-      //取得該縣市學校
-      proxy.$api.getCsSchoolByGeo(geo).then((res) => {
-          if (typeof res.err === "string" && res.err.length === 0) {
-              isShowCsSchool.value = true;
-              csSchoolList.value = res.data;
-          }
-      })
+    csSchoolList.value = [];
+    dialogImportSchVisible.value = false;
+    delayAddSchool.value = true;
+    //取得該縣市學校
+    proxy.$api.getCsSchoolByGeo(geo).then((res) => {
+      if (typeof res.err === "string" && res.err.length === 0) {
+          isShowCsSchool.value = true;
+          let schListTemp = res.data;
+          let schExistList = form.schools.map((obj) => obj.shortCode);
+          csSchoolList.value = schListTemp.filter((item) => { return schExistList.indexOf(item.shortCode) < 0 });
+          delayAddSchool.value = false;
+      }
+    })
+  }
+  //學校名額 匯入新學校
+  const showImportSchool = () => {
+    csSchoolList.value = [];
+    isShowCsSchool.value = false;
+    delayImportSchool.value = true;
+    //取得該縣市學校
+    proxy.$api.getCsSchoolByGeo(geo).then((res) => {
+      if (typeof res.err === "string" && res.err.length === 0) {
+          dialogImportSchVisible.value = true;
+          let schListTemp = res.data;
+          let schExistList = form.schools.map((obj) => obj.shortCode);
+          csSchoolList.value = schListTemp.filter((item) => { return schExistList.indexOf(item.shortCode) < 0 });
+          delayImportSchool.value = false;
+      }
+    })
   }
   const addSchoolSeat = () => {
     let schExist = form.schools.find(sch => sch.shortCode == selectedSchInfo.value.shortCode)
@@ -552,12 +618,45 @@
     isShowSchoolDiv.value = false;
     isShowCsSchool.value = false;
   }
+  //匯入學校
+  function importData() {
+      if (importSelection.value.length > 0) {
+          importSelection.value.forEach(function (selectedSchInfo) {
+              form.schools.push({
+                  schoolCode: selectedSchInfo.code,
+                  shortCode: selectedSchInfo.shortCode,
+                  schoolName: selectedSchInfo.name,
+                  seats: 1,
+                  used: 0
+              })
+          });
+      }
+      dialogImportSchVisible.value = false;
+  }
+  // 關閉批次匯入學校子視窗
+  function clearImport() {
+      dialogImportSchVisible.value = false;
+  }
+  // 匯入學校列表filter學校
+  function filterSchoolByString() {
+    console.log('filterSchString.value:', filterSchString.value)
+    if (filterSchString.value != '') {
+        filterSchList.value = csSchoolList.value.filter(s => s.name.indexOf(filterSchString.value) !== -1)
+        console.log('filterSchList', filterSchList.value)
+        if (filterSchList.value) {
+            csSchoolList.value = filterSchList.value
+        }
+    }
+  }
   // 檢查是否為數字型擴充項
   function isShowExQwen(exKey){      
       if (exKey === "cligroup" || exKey === "soknumber" || exKey === "client_volume") { return true; } else { return false; }  
   }
+  function handleSelectionChange (val) {
+        importSelection.value = val;
+  }
     
-    </script>
+  </script>
   <style >
   /* .el-table-v2__cell-text{
     white-space:  normal !important;    
@@ -566,10 +665,10 @@
     width: 100% !important;
     height: auto !important;
   } */
- .el-main  .containbox  {
-  line-height: 50px!important;
-}
-.el-table-v2__cell-text{
+  .containbox  {
+    line-height: 50px!important;
+  }
+  .el-table-v2__cell-text{
     font-size: 16px;
     color:black;
     font-weight:500;  
@@ -579,6 +678,26 @@
     color:black;
     font-weight: bold;    
   }
+  .import-school-dialog {
+    width: 70%;
+    padding: 30px 20px;
+    line-height: 20px !important;
+  }
+  .import-school-div {
+    line-height: 20px !important;
+    padding: 20px;
+  }
+  .import-school-tb {
+    line-height: 10px !important;
+  }
+  .container-right {
+    display: flex;
+    justify-content: end;
+  }
+  .container-center {
+    display: flex;
+    justify-content: center;
+  }
 
   </style>
 <style scoped>