洋浦学校 八大中心数据导入通用组件封装

src/components/common/importExcel/importExcel.vue

@@ -0,0 +1,119 @@
+<template>
+    <modal-panel addChildType="slot" :modalTitle="title" :show="showPanel" modalClassName="import-excel-style"
+                 @callback="modalCallback">
+        <div class="card-container">
+            <div class="row-style">
+                <div class="icon-style">
+                    <a-icon type="upload" ref="abc"/>
+                </div>
+                <div class="text-style">
+                    <label for="fileUpload" class="upload-button-style" title="上传文件">上传文件</label>
+                    <a-input id="fileUpload" type="file" style="display: none"
+                             accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+                             ref="fileInputRef"
+                             @change="uploadFile"
+                    />
+                    <div id="fileNameId" class="file-name-style"></div>
+                </div>
+            </div>
+            <div id="tipsId" class="tips-style" style="display:none">
+                {{"*"+tips}}
+            </div>
+        </div>
+    </modal-panel>
+</template>
+<script>
+    /*
+     * 模板导入组件
+     * */
+    import ModalPanel from '../modal/ModalPanel';
+    import {Icon, Input} from 'ant-design-vue';
+    export default{
+        props: {
+            show: {
+                type: Boolean,
+                default: false
+            },
+            modalTitle: {
+                type: String,
+                default: "请选择导入文件"
+            },
+        },
+        data(){
+            return {
+                title: this.modalTitle,//弹出框标题
+                showPanel: this.show,//是否显示
+                file: "",//导入文件
+                tips:"",
+            }
+        },
+        watch: {
+            modalTitle: function (newData) {
+                this.title = newData;
+            },
+            show: function (newData) {
+                this.showPanel = newData;
+            }
+        },
+        methods: {
+            uploadFile:function () {
+                this.tips = "";
+                document.getElementById("tipsId").style.display = "none";
+                const fileInput = document.getElementById("fileUpload");
+                this.file = fileInput.files[0];
+//                let filesize = oFile.size;
+//                document.getElementById("tipsId").style.display = "none";
+//                document.getElementById("errorDivId").style.display = "none";
+                document.getElementById("fileNameId").innerHTML = this.file.name;
+                document.getElementById("fileNameId").title = this.file.name;
+            },
+            modalCallback: function (ary) {
+                if (ary[0] === "ok") {
+                    if(this.file === ""){
+                        document.getElementById("tipsId").style.display = "block";
+                        this.tips = "请选择模板文件";
+                        return;
+                    }
+                    this.$emit("submitData", this.file)
+                } else {
+                    this.file === "";
+                    this.$emit("cancel", [])
+                }
+            },
+        },
+        components: {
+            ModalPanel,
+            AInput: Input,
+            AIcon: Icon
+        },
+    }
+</script>
+<style scoped lang="scss">
+    .import-excel-style {
+        width: 800px !important;
+        .ant-modal-body {
+            padding: 0 !important;
+            .card-container {
+                background: #f5f5f5;
+                overflow: hidden;
+                padding: 0.5rem;
+                .row-style{
+                    display: flex;
+                    .text-style{
+                        display: flex;
+                        .upload-button-style{
+                            cursor: pointer;
+                            color: #31a8fa;
+                            margin-right: 0.5rem;
+                        }
+                    }
+                }
+                .tips-style{
+                    text-align: center;
+                    color: red;
+                    margin-top: 0.5rem;
+                }
+            }
+        }
+    }
+</style>

src/views/screenAdaptation/pages/adminCenter/servicePlatform/moralEducation/physicalList.vue

@@ -17,8 +17,10 @@
                             @click="search"/>
                 </div>
                 <div>
-                    <a-button type="primary" @click="toAdd" class="add-button-style">新增</a-button>
+                    <a-button type="default" @click="toDownload" class="add-button-style">下载模板</a-button>
-                    <a-button type="danger" @click="toClear" class="add-button-style" style="margin-right: 0.5rem">清空</a-button>
+                    <a-button type="primary" @click="toImport" class="add-button-style" style="margin-right: 0.2rem">导入</a-button>
+                    <a-button type="primary" @click="toAdd" class="add-button-style" style="margin-right: 0.2rem">新增</a-button>
+                    <a-button type="danger" @click="toClear" class="add-button-style" style="margin-right: 0.2rem">清空</a-button>
                 </div>
             </div>
             <a-table :columns="tableColumn" :data-source="dataList" :loading="loading" :pagination="false">
@@ -40,8 +42,9 @@
                  @cancel="handleCancel">
             {{isClear?'是否确定删除全部信息？':'是否确定删除此条信息?'}}
         </a-modal>
+        <import-excel :show="showImport" @cancel="cancelImport" @submitData="startImport"/>
         <template v-if="pageType === 1">
-            <PhysicalInfo @cancel="cancel" :monitorId="monitorId"/>
+            <PhysicalInfo @cancel="cancel" :monitorId="monitorId" />
         </template>
     </div>
 </template>
@@ -49,6 +52,7 @@
     import InterConfig from '../interConfig';
     import {Table, Button, Select, Modal, Divider, Cascader, Icon, Input, Pagination} from 'ant-design-vue';
     import PhysicalInfo from './physicalInfo.vue';
+    import ImportExcel from '../../../../../../components/common/importExcel/importExcel.vue';
     const tableColumn = [
         {
             dataIndex: 'index',
@@ -120,6 +124,7 @@
                 totalPage: 0,
                 totalNum: 0,
                 isClear:false,//false 仅仅删除数据 true 清除全部数据
+                showImport:false,//是否显示导入框
             }
         },
         created(){
@@ -188,6 +193,24 @@
                 this.isClear = true;
                 this.visible = true;
             },
+            //下载模板
+            toDownload:function () {
+                //window.location.href = window.location.protocol + "//" + window.location.host + "/dsideal_yy/pro_integration/reactProject/screenAdaptation/template/centerStudentPhysicalTemplate.xls";
+                //BaseConfig._action_path
+                window.location.href = window.location.protocol + "//" + "10.10.14.199"+ "/dsideal_yy/pro_integration/reactProject/screenAdaptation/template/centerStudentPhysicalTemplate.xls"
+            },
+            //弹出导入
+            toImport:function () {
+                this.showImport = true;
+            },
+            //开始导入
+            startImport:function (file) {
+                this.loading = true;
+            },
+            //取消导入
+            cancelImport:function () {
+                this.showImport = false;
+            },
             //确定删除
             handleOk: function () {
                 let param = {
@@ -241,7 +264,8 @@
             AIcon: Icon,
             AInput: Input,
             APagination: Pagination,
-            PhysicalInfo
+            PhysicalInfo,
+            ImportExcel
         }
     }
 </script>