员工信息展示和资料打包下载

.env.development

@@ -1,2 +1,3 @@
-VUE_APP_BACKEND_URL=http://127.0.0.1:8080/smart-community-server
-#VUE_APP_BACKEND_URL=http://zldb.xiaoxinda.com:8088/smart-community-server
+#VUE_APP_BACKEND_URL=http://127.0.0.1:8086/smart-community-server
+#VUE_APP_BACKEND_URL=http://zldb.xiaoxinda.com:8088/smart-community-server
+VUE_APP_BACKEND_URL=http://kr6zr7.natappfree.cc/smart-community-server/

src/api/base/companyInfo.js

@@ -0,0 +1,50 @@
+import request from '@/utils/request'
+import constant from '@/constant'
+
+function list(){
+  return request.post(constant.serverUrl + "/base/companyInfo/list");
+}
+
+function pageList(formData){
+  return request.post(constant.serverUrl + "/base/companyInfo/pageList", formData);
+}
+
+function create(){
+  return request.get(constant.serverUrl + "/base/companyInfo/create");
+}
+
+function edit(id){
+  return request.get(constant.serverUrl + "/base/companyInfo/edit/" + id);
+}
+
+function add(formModel){
+  return request.post(constant.serverUrl + "/base/companyInfo/add", formModel,{
+    headers: {
+      "Content-Type": "application/json"
+    }
+  });
+}
+
+function update(formModel){  
+  return request.post(constant.serverUrl + "/base/companyInfo/update", formModel,{
+    headers: {
+      "Content-Type": "application/json"
+    }
+  });
+}
+
+function remove(id){
+  return request.post(constant.serverUrl + "/base/companyInfo/delete/" + id);
+}
+
+function batchRemove(idList){
+  return request.post(constant.serverUrl + "/base/companyInfo/batchDelete",idList,{
+    headers: {
+      "Content-Type": "application/json"
+    }
+  });
+}
+
+export default {
+  list,create,edit,add,update,remove,batchRemove,pageList
+}

src/api/base/employeeInfo.js

@@ -0,0 +1,50 @@
+import request from '@/utils/request'
+import constant from '@/constant'
+
+function pageList(formData) {
+  return request.post(constant.serverUrl + "/base/employeeInfo/pageList", formData);
+}
+
+function create() {
+  return request.get(constant.serverUrl + "/base/employeeInfo/create");
+}
+
+function edit(id) {
+  return request.get(constant.serverUrl + "/base/employeeInfo/edit/" + id);
+}
+
+function add(formModel) {
+  return request.post(constant.serverUrl + "/base/employeeInfo/add", formModel, {
+    headers: {
+      "Content-Type": "application/json"
+    }
+  });
+}
+
+function update(formModel) {
+  return request.post(constant.serverUrl + "/base/employeeInfo/update", formModel, {
+    headers: {
+      "Content-Type": "application/json"
+    }
+  });
+}
+
+function remove(id) {
+  return request.post(constant.serverUrl + "/base/employeeInfo/delete/" + id);
+}
+
+function batchRemove(idList) {
+  return request.post(constant.serverUrl + "/base/employeeInfo/batchDelete", idList, {
+    headers: {
+      "Content-Type": "application/json"
+    }
+  });
+}
+
+function downloadZip(idList, localPath) {
+  window.open(constant.serverUrl + "/base/employeeInfo/downloadZip?ids=" + idList + "&localPath=" + localPath);
+}
+
+export default {
+  create, edit, add, update, remove, batchRemove, pageList, downloadZip
+}

src/routers/index.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import Router from 'vue-router'
 import Layout from '@/views/layout'
 import Home from '@/views/Home.vue'
+import baseRouters from './modules/base'
 import sysRouters from './modules/sys'
 import { Message } from 'element-ui'
 import NProgress from 'nprogress' // progress bar
@@ -22,7 +23,8 @@ var routes = [
         name: 'home',
         component: Home
       },
-      ...sysRouters
+      ...sysRouters,
+      ...baseRouters
     ]
   },
   {

src/routers/modules/base.js

@@ -0,0 +1,180 @@
+var routers = [
+        {
+                path: '/base/terminalInfo/list',
+                name: 'base-terminalInfo-list',
+                // route level code-splitting
+                // this generates a separate chunk (about.[hash].js) for this route
+                // which is lazy-loaded when the route is visited.
+                component: () => import('@/views/base/terminalInfo-list.vue'),
+                meta: {
+                        roles: ["admin"]
+                }
+        },
+        {
+                path: '/base/electricClientInfo/list',
+                name: 'base-electricClientInfo-list',
+                // route level code-splitting
+                // this generates a separate chunk (about.[hash].js) for this route
+                // which is lazy-loaded when the route is visited.
+                component: () => import('@/views/base/electricClientInfo-list.vue'),
+                meta: {
+                        roles: ["admin"]
+                }
+        },
+        {
+                path: '/base/electricMeterInfo/list',
+                name: 'base-electricMeterInfo-list',
+                // route level code-splitting
+                // this generates a separate chunk (about.[hash].js) for this route
+                // which is lazy-loaded when the route is visited.
+                component: () => import('@/views/base/electricMeterInfo-list.vue'),
+                meta: {
+                        roles: ["admin"]
+                }
+        },
+        {
+                path: '/base/rechargeRecord/list',
+                name: 'base-rechargeRecord-list',
+                // route level code-splitting
+                // this generates a separate chunk (about.[hash].js) for this route
+                // which is lazy-loaded when the route is visited.
+                component: () => import('@/views/base/rechargeRecord-list.vue'),
+                meta: {
+                        roles: ["admin"]
+                }
+        },
+        {
+                path: '/base/rechargeRecordWater/list',
+                name: 'base-rechargeRecordWater-list',
+                // route level code-splitting
+                // this generates a separate chunk (about.[hash].js) for this route
+                // which is lazy-loaded when the route is visited.
+                component: () => import('@/views/base/rechargeRecordWater-list.vue'),
+                meta: {
+                        roles: ["admin"]
+                }
+        },
+        {
+                path: '/base/rechargeRecordProperty/list',
+                name: 'base-rechargeRecordProperty-list',
+                // route level code-splitting
+                // this generates a separate chunk (about.[hash].js) for this route
+                // which is lazy-loaded when the route is visited.
+                component: () => import('@/views/base/rechargeRecordProperty-list.vue'),
+                meta: {
+                        roles: ["admin"]
+                }
+        },
+        {
+                path: '/base/roomInfo/list',
+                name: 'base-roomInfo-list',
+                // route level code-splitting
+                // this generates a separate chunk (about.[hash].js) for this route
+                // which is lazy-loaded when the route is visited.
+                component: () => import('@/views/base/roomInfo-list.vue'),
+                meta: {
+                        roles: ["admin"]
+                }
+        },
+        {
+                path: '/base/rechange/list',
+                name: 'base-rechange-list',
+                // route level code-splitting
+                // this generates a separate chunk (about.[hash].js) for this route
+                // which is lazy-loaded when the route is visited.
+                component: () => import('@/views/base/rechange-list.vue'),
+                meta: {
+                        roles: ["admin"]
+                }
+        },
+        {
+                path: '/base/ownerInfo/list',
+                name: 'base-ownerInfo-list',
+                // route level code-splitting
+                // this generates a separate chunk (about.[hash].js) for this route
+                // which is lazy-loaded when the route is visited.
+                component: () => import('@/views/base/ownerInfo-list.vue'),
+                meta: {
+                        roles: ["admin"]
+                }
+        },
+        {
+                path: '/base/parkingInfo/list',
+                name: 'base-parkingInfo-list',
+                // route level code-splitting
+                // this generates a separate chunk (about.[hash].js) for this route
+                // which is lazy-loaded when the route is visited.
+                component: () => import('@/views/base/parkingInfo-list.vue'),
+                meta: {
+                        roles: ["admin"]
+                }
+        },
+        {
+                path: '/base/parkingApply/list',
+                name: 'base-parkingApply-list',
+                // route level code-splitting
+                // this generates a separate chunk (about.[hash].js) for this route
+                // which is lazy-loaded when the route is visited.
+                component: () => import('@/views/base/parkingApply-list.vue'),
+                meta: {
+                        roles: ["admin"]
+                }
+        },
+        {
+                path: '/base/alarmInfoFence/list',
+                name: 'base-alarmInfoFence-list',
+                // route level code-splitting
+                // this generates a separate chunk (about.[hash].js) for this route
+                // which is lazy-loaded when the route is visited.
+                component: () => import('@/views/base/alarmInfo-fence-list.vue'),
+                meta: {
+                        roles: ["admin"]
+                }
+        },
+        {
+                path: '/base/alarmInfoAlert/list',
+                name: 'base-alarmInfoAlert-list',
+                // route level code-splitting
+                // this generates a separate chunk (about.[hash].js) for this route
+                // which is lazy-loaded when the route is visited.
+                component: () => import('@/views/base/alarmInfo-alert-list.vue'),
+                meta: {
+                        roles: ["admin"]
+                }
+        },
+        {
+                path: '/base/informationInfoComplaint/list',
+                name: 'base-informationInfoComplaint-list',
+                // route level code-splitting
+                // this generates a separate chunk (about.[hash].js) for this route
+                // which is lazy-loaded when the route is visited.
+                component: () => import('@/views/base/informationInfo-complaint-list.vue'),
+                meta: {
+                        roles: ["admin"]
+                }
+        },
+        {
+                path: '/base/informationInfoWarranty/list',
+                name: 'base-informationInfoWarranty-list',
+                // route level code-splitting
+                // this generates a separate chunk (about.[hash].js) for this route
+                // which is lazy-loaded when the route is visited.
+                component: () => import('@/views/base/informationInfo-warranty-list.vue'),
+                meta: {
+                        roles: ["admin"]
+                }
+        },
+        {
+                path: '/base/employeeInfo/list',
+                name: 'base-employeeInfo-list',
+                // route level code-splitting
+                // this generates a separate chunk (about.[hash].js) for this route
+                // which is lazy-loaded when the route is visited.
+                component: () => import('@/views/base/employeeInfo-list.vue'),
+                meta: {
+                        roles: ["admin"]
+                }
+        }
+]
+
+export default routers;

src/routers/modules/sys.js

@@ -53,171 +53,6 @@ var routers = [
                 meta: {
                         roles: ["admin"]
                 }
-        },
-        {
-                path: '/base/terminalInfo/list',
-                name: 'base-terminalInfo-list',
-                // route level code-splitting
-                // this generates a separate chunk (about.[hash].js) for this route
-                // which is lazy-loaded when the route is visited.
-                component: () => import('@/views/base/terminalInfo-list.vue'),
-                meta: {
-                        roles: ["admin"]
-                }
-        },
-        {
-                path: '/base/electricClientInfo/list',
-                name: 'base-electricClientInfo-list',
-                // route level code-splitting
-                // this generates a separate chunk (about.[hash].js) for this route
-                // which is lazy-loaded when the route is visited.
-                component: () => import('@/views/base/electricClientInfo-list.vue'),
-                meta: {
-                        roles: ["admin"]
-                }
-        },
-        {
-                path: '/base/electricMeterInfo/list',
-                name: 'base-electricMeterInfo-list',
-                // route level code-splitting
-                // this generates a separate chunk (about.[hash].js) for this route
-                // which is lazy-loaded when the route is visited.
-                component: () => import('@/views/base/electricMeterInfo-list.vue'),
-                meta: {
-                        roles: ["admin"]
-                }
-        },
-        {
-                path: '/base/rechargeRecord/list',
-                name: 'base-rechargeRecord-list',
-                // route level code-splitting
-                // this generates a separate chunk (about.[hash].js) for this route
-                // which is lazy-loaded when the route is visited.
-                component: () => import('@/views/base/rechargeRecord-list.vue'),
-                meta: {
-                        roles: ["admin"]
-                }
-        },
-        {
-                path: '/base/rechargeRecordWater/list',
-                name: 'base-rechargeRecordWater-list',
-                // route level code-splitting
-                // this generates a separate chunk (about.[hash].js) for this route
-                // which is lazy-loaded when the route is visited.
-                component: () => import('@/views/base/rechargeRecordWater-list.vue'),
-                meta: {
-                        roles: ["admin"]
-                }
-        },
-        {
-                path: '/base/rechargeRecordProperty/list',
-                name: 'base-rechargeRecordProperty-list',
-                // route level code-splitting
-                // this generates a separate chunk (about.[hash].js) for this route
-                // which is lazy-loaded when the route is visited.
-                component: () => import('@/views/base/rechargeRecordProperty-list.vue'),
-                meta: {
-                        roles: ["admin"]
-                }
-        },
-        {
-                path: '/base/roomInfo/list',
-                name: 'base-roomInfo-list',
-                // route level code-splitting
-                // this generates a separate chunk (about.[hash].js) for this route
-                // which is lazy-loaded when the route is visited.
-                component: () => import('@/views/base/roomInfo-list.vue'),
-                meta: {
-                        roles: ["admin"]
-                }
-        },
-        {
-                path: '/base/rechange/list',
-                name: 'base-rechange-list',
-                // route level code-splitting
-                // this generates a separate chunk (about.[hash].js) for this route
-                // which is lazy-loaded when the route is visited.
-                component: () => import('@/views/base/rechange-list.vue'),
-                meta: {
-                        roles: ["admin"]
-                }
-        },
-        {
-                path: '/base/ownerInfo/list',
-                name: 'base-ownerInfo-list',
-                // route level code-splitting
-                // this generates a separate chunk (about.[hash].js) for this route
-                // which is lazy-loaded when the route is visited.
-                component: () => import('@/views/base/ownerInfo-list.vue'),
-                meta: {
-                        roles: ["admin"]
-                }
-        },
-        {
-                path: '/base/parkingInfo/list',
-                name: 'base-parkingInfo-list',
-                // route level code-splitting
-                // this generates a separate chunk (about.[hash].js) for this route
-                // which is lazy-loaded when the route is visited.
-                component: () => import('@/views/base/parkingInfo-list.vue'),
-                meta: {
-                        roles: ["admin"]
-                }
-        },
-        {
-                path: '/base/parkingApply/list',
-                name: 'base-parkingApply-list',
-                // route level code-splitting
-                // this generates a separate chunk (about.[hash].js) for this route
-                // which is lazy-loaded when the route is visited.
-                component: () => import('@/views/base/parkingApply-list.vue'),
-                meta: {
-                        roles: ["admin"]
-                }
-        },
-        {
-                path: '/base/alarmInfoFence/list',
-                name: 'base-alarmInfoFence-list',
-                // route level code-splitting
-                // this generates a separate chunk (about.[hash].js) for this route
-                // which is lazy-loaded when the route is visited.
-                component: () => import('@/views/base/alarmInfo-fence-list.vue'),
-                meta: {
-                        roles: ["admin"]
-                }
-        },
-        {
-                path: '/base/alarmInfoAlert/list',
-                name: 'base-alarmInfoAlert-list',
-                // route level code-splitting
-                // this generates a separate chunk (about.[hash].js) for this route
-                // which is lazy-loaded when the route is visited.
-                component: () => import('@/views/base/alarmInfo-alert-list.vue'),
-                meta: {
-                        roles: ["admin"]
-                }
-        },
-        {
-                path: '/base/informationInfoComplaint/list',
-                name: 'base-informationInfoComplaint-list',
-                // route level code-splitting
-                // this generates a separate chunk (about.[hash].js) for this route
-                // which is lazy-loaded when the route is visited.
-                component: () => import('@/views/base/informationInfo-complaint-list.vue'),
-                meta: {
-                        roles: ["admin"]
-                }
-        },
-        {
-                path: '/base/informationInfoWarranty/list',
-                name: 'base-informationInfoWarranty-list',
-                // route level code-splitting
-                // this generates a separate chunk (about.[hash].js) for this route
-                // which is lazy-loaded when the route is visited.
-                component: () => import('@/views/base/informationInfo-warranty-list.vue'),
-                meta: {
-                        roles: ["admin"]
-                }
         }
 ]
 

src/views/base/employeeInfo-list.vue

@@ -0,0 +1,266 @@
+<template>
+  <div>
+    <el-breadcrumb separator=">">
+      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+      <el-breadcrumb-item>
+        <a href="#">系统管理</a>
+      </el-breadcrumb-item>
+      <el-breadcrumb-item>
+        <a href="/employeeInfo">员工信息</a>
+      </el-breadcrumb-item>
+    </el-breadcrumb>
+    <el-divider></el-divider>
+    <!--
+      要resetFields起作用，必须配置:model和prop
+    -->
+    <el-form ref="queryForm" :model="queryModel" inline class="demo-form-inline">
+      <el-form-item label="公司" prop="companyId">
+        <el-select size="mini" v-model="queryModel.companyId" filterable placeholder="请选择">
+          <el-option
+            v-for="company in companyList"
+            :key="company.id"
+            :label="company.name"
+            :value="company.id"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="姓名" prop="employeeName">
+        <el-input type="text" size="mini" v-model="queryModel.employeeName"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="primary"
+          size="mini"
+          icon="ios-search"
+          @click="changePage(1)"
+          :loading="loading"
+        >查询</el-button>&nbsp;
+        <el-button
+          type="info"
+          size="mini"
+          style="margin-left: 8px"
+          @click="handleReset('queryForm')"
+        >重置</el-button>&nbsp;
+      </el-form-item>
+    </el-form>
+    <el-divider></el-divider>
+    <el-row class="button-group">
+      <el-button
+        type="primary"
+        size="small"
+        plain
+        icon="el-icon-circle-plus"
+        :disabled="multipleSelection.length==0"
+        @click="downConfirm"
+      >打包下载员工资料</el-button>
+    </el-row>
+    <el-table
+      :data="tableData"
+      style="min-height:400px;"
+      v-loading="loading"
+      stripe
+      @sort-change="sortChange"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="55"></el-table-column>
+      <el-table-column prop="no" sort-by="no_" label="编号" sortable="custom" width="100"></el-table-column>
+      <el-table-column
+        prop="companyId"
+        sort-by="company_id"
+        label="所属公司Id"
+        sortable="custom"
+        width="180"
+      ></el-table-column>
+      <el-table-column prop="name" sort-by="name_" label="姓名" sortable="custom" width="250"></el-table-column>
+      <el-table-column prop="photo" label="照片" width="180">
+        <template slot-scope="{row}">
+          <a :href="row.photo" target="_blank">
+            <el-avatar
+              size="small"
+              :src="row.photo+'?x-oss-process=image/resize,m_lfit,h_100,w_100'"
+            ></el-avatar>
+          </a>
+        </template>
+      </el-table-column>
+      <el-table-column prop="sortNo" sort-by="sort_no" label="排序" sortable="custom" width="180"></el-table-column>
+      <el-table-column prop="openId" sort-by="open_id" label="openId" sortable="custom" width="250"></el-table-column>
+    </el-table>
+    <el-pagination
+      :current-page.sync="pageIndex"
+      :total="totalElements"
+      :page-sizes="pageSizeList"
+      @current-change="changePage"
+      @size-change="pageSizeChange"
+      layout="total, sizes, prev, pager, next, jumper"
+    ></el-pagination>
+    <el-dialog :visible.sync="dialogFormVisible" :modal-append-to-body="false" width="30%">
+      <el-form>
+        <el-form-item label="压缩包解压后文件夹所在路径" prop="downPath">
+          <el-input v-model="downPath" placeholder="请输入所在路径" style="width:100%"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">取 消</el-button>
+        <el-button type="primary" @click="downloadZip">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import Constant from "@/constant";
+import employeeInfoApi from "@/api/base/employeeInfo";
+import companyInfoApi from "@/api/base/companyInfo";
+
+import NProgress from "nprogress"; // progress bar
+import "nprogress/nprogress.css"; // progress bar style
+
+export default {
+  data() {
+    var self = this;
+
+    return {
+      queryModel: {
+        companyId: "",
+        employeeName: ""
+      },
+      loading: false,
+      tableData: [],
+      pageIndex: 1,
+      pageSize: 10,
+      totalPages: 0,
+      totalElements: 0,
+      field: "",
+      direction: "",
+      pageSizeList: [10, 20, 30],
+      multipleSelection: [],
+      showModal: false,
+      modalTitle: "",
+      businessKey: "",
+      companyList: [],
+      dialogFormVisible: false,
+      downPath: ""
+    };
+  },
+  methods: {
+    changePage(pageIndex) {
+      var self = this;
+
+      self.loading = true;
+
+      self.pageIndex = pageIndex;
+      var formData = new FormData();
+
+      formData.append("pageIndex", self.pageIndex);
+      formData.append("pageSize", self.pageSize);
+
+      formData.append("employeeName", self.queryModel.employeeName);
+      formData.append("companyId", self.queryModel.companyId);
+
+      if (this.field != null) {
+        formData.append("field", this.field);
+      }
+
+      if (this.direction != null) {
+        formData.append("direction", this.direction);
+      }
+
+      employeeInfoApi
+        .pageList(formData)
+        .then(function(response) {
+          self.loading = false;
+
+          var jsonData = response.data.data;
+
+          self.tableData = jsonData.data;
+          self.totalPages = jsonData.totalPages;
+          self.totalElements = jsonData.recordsTotal;
+        })
+        .catch(error => {
+          self.loading = false;
+          // self.$message.error(error + "");
+        });
+    },
+    pageSizeChange(pageSize) {
+      this.pageSize = pageSize;
+    },
+    sortChange(data) {
+      this.field = data.column.field;
+      this.direction = data.order;
+
+      this.changePage(this.pageIndex);
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+    handleReset(name) {
+      this.$refs[name].resetFields();
+    },
+    onDetailModalClose(refreshed) {
+      //保存成功后回调
+      this.showModal = false;
+
+      if (refreshed) {
+        this.changePage(this.pageIndex);
+      }
+    },
+    queryCompanyList() {
+      var self = this;
+      companyInfoApi
+        .list()
+        .then(function(response) {
+          self.loading = false;
+
+          var jsonData = response.data;
+          if (jsonData.result) {
+            self.companyList = jsonData.data;
+          } else {
+            this.$message.error(jsonData.message + "");
+          }
+        })
+        .catch(error => {
+          self.loading = false;
+          // self.$message.error(error + "");
+        });
+    },
+    downConfirm() {
+      this.dialogFormVisible = true;
+    },
+    downloadZip() {
+      var self = this;
+
+      var idList = this.multipleSelection.map(record => {
+        return record.id;
+      });
+      var localPath = self.downPath;
+      if (localPath == null || localPath.length == 0) {
+        localPath = "C:";
+      }
+      employeeInfoApi.downloadZip(idList, localPath);
+    }
+  },
+  mounted: function() {
+    this.changePage(1);
+    this.queryCompanyList();
+  }
+};
+</script>
+<style lang="scss" scoped>
+.el-breadcrumb {
+  margin: 10px;
+  line-height: 20px;
+}
+
+.el-divider {
+  margin: 5px 0;
+}
+
+.demo-form-inline {
+  margin-left: 10px;
+  text-align: left;
+}
+
+.button-group {
+  margin-left: 10px;
+  text-align: left;
+}
+</style>