datagrid com

components/page/dataGrid.vue

@@ -21,6 +21,12 @@
         </div>
         <div class="btns">
             <slot name="buttons"></slot>
+            <Button @click="openImportModal">
+                导入
+            </Button>
+            <Button @click="export2Excel">
+                导出
+            </Button>
             <Button v-if="set&&type=='table'" @click="config=!config">
                 <Icon type="md-build" title="列设置" />
             </Button>
@@ -64,6 +70,9 @@
             </li>
         </ul>
     </Drawer>
+    <Modal v-model="ImportModal" title="导入" fullscreen footer-hide>
+        <ImportExcel v-if="ImportModal" @on-get-data="getData" :columns="columnsNow" />
+    </Modal>
     <FooterToolbar v-if="batch" v-show="footerToolbar">
         <div class="tip">已选{{selectItems.length}}项</div>
         <slot name="batch"></slot>
@@ -96,6 +105,7 @@ export default {
             userConfig: null, //用户页面配置信息。,
             // userId: 1
             userId: this.$store.state.userInfo.userId,
+            ImportModal: false,
         };
     },
     props: {
@@ -212,6 +222,10 @@ export default {
             type: Number,
             default: 40,
         },
+        title: {
+            type: String,
+            default: "导出数据",
+        }
     },
     created() {
         this.columns.forEach((u) => {
@@ -462,6 +476,92 @@ export default {
             this.footerToolbar = false;
             this.$refs.table.selectAll(false);
         },
+        //导入功能
+        openImportModal() {
+            this.ImportModal = true
+        },
+        getData(val) {
+            // alert(JSON.stringify(val))
+            this.$emit("on-import-data", val)
+        },
+        closeImport() {
+            this.ImportModal = false
+        },
+        //导出excel
+        export2Excel() {
+            //当前显示数据
+            var where = [];
+            var conditions = this.conditions;
+            if (conditions) {
+                Object.keys(conditions).forEach((u) => {
+                    let v = conditions[u].value;
+                    let op = conditions[u].op;
+                    if (!this.$u.isNull(v)) {
+                        if (op == "Range") {
+                            let times = [];
+                            v.map((u) => {
+                                if (!this.$u.isNull(u)) {
+                                    times.push(this.$u.toTime(u));
+                                }
+                            });
+                            v = times.join(",");
+                        } else if (op.indexOf("In") > -1) {
+                            v = v.join(",");
+                        }
+                        if (!this.$u.isNull(v)) {
+                            where.push({
+                                fieldName: u,
+                                fieldValue: v,
+                                conditionalType: op,
+                            });
+                        }
+                    }
+                });
+            }
+            let searchs = {
+                pageIndex: 1,
+                conditions: where,
+                pageSize: 1000
+            }
+            this.$api.post(this.action, searchs).then((r) => {
+                let list = []
+                list = r.result.items;
+                const tHeader = []; // 设置Excel的表格第一行的标题
+                const filterVal = []; //list里对象的属性
+                var tempCol = [];
+                var columnsCur = this.$u.clone(this.columnsNow); //导出列标题信息griddata  this.$refs.grid.columnsCur
+                columnsCur.forEach((el) => {
+                    if ((el.hide && !el.import) || (!el.hide && el.key != "action" && el.type != "selection")) {
+                        if (el.code) {
+                            tempCol.push({
+                                key: el.key,
+                                code: el.code
+                            }); //临时存放code数据字典的字段及对应的数据字典code
+                        }
+                        tHeader.push(el.title);
+                        filterVal.push(el.key);
+                    }
+                });
+                list.forEach((e) => {
+                    //给导出数据增加数据字典对应的name
+                    tempCol.forEach((ele) => {
+                        e[ele.key] = this.$u.dirName(
+                            this.$store.getters.dictionaryByKey(ele.code),
+                            e[ele.key]
+                        );
+                    });
+                });
+                let nowDate = this.$u.getNowTime(); //年月日时分秒yyyyMMddhhmmss
+                //获取导出数据结束
+                this.$u.outExcel(this.title +
+                    "(" + nowDate + ")",
+                    tHeader,
+                    filterVal,
+                    list
+                );
+            });
+        },
+        //导入excel
     },
     computed: {
         columnsNow() {

components/page/import/api.js

+import Api from '@/plugins/request'
+import { getJSON } from 'js-cookie';
+export default {
+  index: `${systemUrl}/importcenter/paged`,
+  paged(params) {
+    return Api.post(`${systemUrl}/importcenter/paged`, params);
+  },
+  get(params) {
+    return Api.get(`${systemUrl}/importcenter/get`, params);
+  },
+  create(params) {
+    return Api.post(`${systemUrl}/importcenter/create`, params);
+  },
+  update(params) {
+    return Api.post(`${systemUrl}/importcenter/update`, params);
+  },
+  delete(id) {
+    return Api.delete(`${systemUrl}/importcenter/delete`, {
+      params: {
+        id: id
+      }
+    });
+  },
+  deletes(params) {
+    return Api.post(`${systemUrl}/importcenter/batchdelete`, params);
+  },
+  openExcel(params) {//处理时打开以前上传的excel返回数据
+    return Api.post(`${systemUrl}/importcenter/open`, params);
+  },
+  importUser(params) {//用户管理导入
+    return Api.post(`${systemUrl}/userimportservice/import`, params);
+  },
+  updateimportstatus(params) {//用户管理导入
+    return Api.post(`${systemUrl}/importcenter/updateimportstatus`, params);
+  },
+  
+}

components/page/import/detailExcel.vue

+<template>
+<div class="h100">
+    <Tabs type="card" width="100">
+        <TabPane label="excel数据">
+            <TablePaste hide-table :input-props="inputProps" @on-success="handleSuccess" @on-error="handleError" />
+        </TabPane>
+        <TabPane label="预览">
+            <Table :border="true" :columns="columnsImport" :data="excelData" :height="tableHeight" ref="tableExcel" class="tableCommon"></Table>
+        </TabPane>
+    </Tabs>
+
+</div>
+</template>
+
+<script>
+import Api from "./api";
+export default {
+    name: "detailExcel",
+    data() {
+        return {
+            entity: {},
+            downUrl: fileUrlDown,
+            fileUrlPath: "",
+            excelRows: 100,
+            tableHeight: '',
+            inputProps: {
+                rows: 10,
+                placeholder: "请从Excel复制一段表格数据，粘贴在这里",
+            },
+            columnsImport: [],
+            excelData: []
+
+        };
+    },
+    props: {
+        eid: Number,
+    },
+    created() {
+        this.excelRows = parseInt((window.innerHeight - 231) / 21) + 1;
+        this.inputProps.rows = this.excelRows
+        this.tableHeight = window.innerHeight - 200
+    },
+    mounted() {
+        window.onresize = () => {
+            ///浏览器窗口大小变化
+            return (() => {
+                window.screenHeight = window.innerHeight;
+                this.excelRows = parseInt((window.screenHeight - 231) / 21) + 1;
+                this.inputProps.rows = this.excelRows
+                this.tableHeight = window.innerHeight - 200
+
+            })();
+        };
+    },
+    methods: {
+        handleClose() {
+            this.$emit("on-close");
+        },
+        downFile(path) {
+            //alert(path)
+            let truePath = path;
+            if (truePath.length > 2) {
+                if (
+                    truePath.substring(0, 7).toLowerCase() == "http://" ||
+                    truePath.substring(0, 8).toLowerCase() == "https://"
+                ) {
+                    window.open(truePath, "_blank");
+                } else {
+                    this.fileUrlPath = this.downUrl + path;
+                    window.open(this.fileUrlPath, "_blank");
+                }
+            }
+        },
+        //粘贴excel成功
+        handleSuccess(tableData) {
+            //初始化数据
+            this.excelData = [];
+            this.columnsImport = [];
+            //处理colum和data
+            let tabColum = tableData.columns
+            let tabData = tableData.data
+            let arrData = []
+            tabData.forEach(ele => {
+                let objData = {}
+                tabColum.forEach(el => {
+                    objData[el.title] = ele[el.key]
+                })
+                arrData.push(objData)
+            })
+            //处理title和key一致
+            tabColum.forEach(el => {
+                el.key = el.title
+            })
+
+            this.columnsImport = tabColum;
+            this.columnsImport.unshift({
+                type: 'index',
+                width: 80,
+                align: 'right',
+                title: '序号'
+            })
+            this.excelData = arrData;
+            this.$emit("on-datalength", this.excelData.length)
+        },
+        //粘贴excel失败
+        handleError(tableData, errorIndex) {
+            //console.log(tableData, errorIndex);
+            this.$Message.error("表格数据有误");
+        },
+        //粘贴excel相关end
+
+    },
+    watch: {
+        eid(v) {
+            if (v > 0) {
+                this.load(v);
+            }
+        },
+    },
+};
+</script>

pages/import/index.vue

 <template>
 <div class="h100">
-    <DataGrid :columns="columns" ref="grid" :action="action">
+    <DataGrid :columns="columns" ref="grid" :action="action" title="导入中心">
         <template slot="easySearch">
             <Form ref="formInline" :model="easySearch" inline>
                 <FormItem prop="keys">

plugins/iview.js

@@ -61,6 +61,7 @@ import DTSearch from '@/components/page/dtSearch.vue'
 import InputTime from '@/components/page/inputTime.vue'
 import OutputTime from '@/components/page/outputTime.vue'
 import ViewerImg from '@/components/page/viewer.vue'
+import ImportExcel from '@/components/page/import/process.vue'
 
 // import FormMaking from 'form-making'
 // import 'form-making/dist/FormMaking.css'
@@ -127,6 +128,7 @@ Vue.component("OutputTime", OutputTime)
 Vue.component("ViewerImg", ViewerImg)
 Vue.component("StoreTree", StoreTree)
 Vue.component("StoreSelect", StoreSelect)
+Vue.component("ImportExcel",ImportExcel)