添加公海客户批量导入弹窗

src/views/highSeasCustomer/formDialog.ts

@@ -0,0 +1,22 @@
+import { ref } from "vue";
+
+
+export const batchImportFormItemList = ref([
+    {
+        key: 'file',
+        label: '上传文件',
+        type:'noDragFile',
+    },
+    {
+        key: 'templateFile',
+        label: '模板示例',
+        type:'',
+        custom:true,
+    },
+    {
+        key: 'tableTemplate',
+        label: '',
+        type:'',
+        custom:true,
+    },
+])

src/views/highSeasCustomer/index.vue

@@ -7,13 +7,13 @@
                         <SearchBlock :searchList="blockSearchList"></SearchBlock>
                     </div>
                     <div class="content_right">
-                        <el-button class="button_refresh">批量导入</el-button>
+                        <el-button class="button_refresh" @click="OpenBatchImportDialog">批量导入</el-button>
                         <el-button class="button_background" @click="OpenSchoolFormDialog()">新增学校</el-button>
                     </div>
                 </div>
             </div>
             <FormSearchGroup :searchList="formSearchList"></FormSearchGroup>
-            <Table :tableColumns="tableColumns" :tableData="tableData">
+            <Table :tableColumns="publicSeasTableColumns" :tableData="tableData">
                 <template #operation="{row}">
                     <div class="table_row_option">
                         <span class="button_editor">认领</span>
@@ -30,6 +30,24 @@
             v-model:visible="schoolVisible" 
             :defaultFormData="schoolDefaultFormData">
         </SchoolFormDialog>
+
+
+        <!--  批量导入 弹窗 -->
+        <FormDialog class="batch_import_form" width="548px" title="批量导入" :visible="batchImportVisible" 
+            :submitLoading="batchImportSubmitLoading" 
+            :defaultFormData="{}" :formItemList="batchImportFormItemList"
+            @close="CloseBatchImportDialog"
+            @confirm="HandleBatchImportComfirm">
+            <template #templateFile>
+                <el-button class="button_refresh">下载模板</el-button>
+            </template>
+            <template #tableTemplate>
+                <Table :hidePagination="true" :tableColumns="templateTableColumns" :tableData="[{},{}]" />
+                <div style="font-size: 12px;">用于分析同一份试卷内不同试卷类型的得分、排名等情况。可下载模块进行填写后导入。</div>
+            </template>
+        </FormDialog>
+        
+    
     </div>
 </template>
 
@@ -41,9 +59,12 @@ import {formSearchList} from './formSearchGroup';
 import SearchBlock from '@/baseComponents/SearchBlock.vue';
 import { blockSearchList } from './searchBlock';
 import Table from '@/baseComponents/Table.vue';
-import {tableColumns} from './table'
+import {publicSeasTableColumns,templateTableColumns} from './table'
 
 import SchoolFormDialog from '@/components/SchoolFormDialog/index.vue'
+import FormDialog from '@/baseComponents/FormDialog.vue';
+
+import {batchImportFormItemList} from './formDialog'
 
 
 // 表格数据
@@ -106,6 +127,23 @@ const OpenSchoolFormDialog = (row?:any)=>{
     schoolVisible.value = true
 }
 
+// 批量导入弹窗有关数据
+
+const batchImportVisible = ref(false)
+const batchImportSubmitLoading = ref(false)
+
+const OpenBatchImportDialog = ()=>{
+    batchImportVisible.value = true   
+}
+
+const CloseBatchImportDialog = ()=>{
+    batchImportVisible.value = false
+}
+
+const HandleBatchImportComfirm = ()=>{
+    CloseBatchImportDialog()
+}
+
 
 </script>
 
@@ -118,4 +156,10 @@ const OpenSchoolFormDialog = (row?:any)=>{
     }
 }
 
+.batch_import_form{
+    :deep(.el-dialog__body){
+        min-height: 345px !important;
+    }
+}
+
 </style>

src/views/highSeasCustomer/table.ts

@@ -1,6 +1,7 @@
 import { ref } from "vue";
 
-export const tableColumns = ref([
+// 公海科目默认列表页的表头数据
+export const publicSeasTableColumns = ref([
   {
     name: 'index',
     label: '序号',
@@ -66,4 +67,48 @@ export const tableColumns = ref([
     custom: true,
     hidden: false
   }
-])
+])
+
+// 批量导入弹窗 的表头数据
+export const templateTableColumns = ref([
+  {
+    name: 'schoolName',
+    label: '学校名称',
+    width: '80',
+    align: 'center',
+    custom: false,
+    hidden: false
+  },
+  {
+    name: 'stage',
+    label: '学段',
+    width: '50',
+    align: 'center',
+    custom: false,
+    hidden: false
+  },
+  {
+    name: 'province',
+    label: '省份',
+    width: '50',
+    align: 'center',
+    custom: false,
+    hidden: false
+  },
+  {
+    name: 'area',
+    label: '地区',
+    width: '50',
+    align: 'center',
+    custom: false,
+    hidden: false
+  },
+  {
+    name: 'detailedAddress',
+    label: '详细地址',
+    minWidth: '100',
+    align: 'center',
+    custom: false,
+    hidden: false
+  }
+]);