.

src/components/employeeRecord/employeeList.vue

@@ -3,6 +3,8 @@
         <div class="handle-area">
             <div class="flex1">
                 <template v-if="!isUnEmployee">
+                    <el-button @click="callSelector" style="margin-right: 10px; height:32px;">选择部门/员工</el-button>
+                    <el-button @click="callStoreSelector" style="margin-right: 10px; height:32px;">选择门店/员工</el-button>
                     <el-select v-model="clerkType" placeholder="选择类型" @change="reGetList" class="m-r-10">
                         <el-option
                             v-for="(type, index) in typeLsit"
@@ -35,8 +37,9 @@
                         :picker-options="pickerOptions2">
                     </el-date-picker>
                 </div>
+                <el-input v-model="searchParam" placeholder="请输入姓名或手机号" style="width: 218px;margin-left:10px;" @keyup.enter.native="searchFn" clearable @clear="searchFn"></el-input>
             </div>
-            <el-button type="primary">导出<i class="el-icon-upload el-icon--right"></i></el-button>
+            <el-button type="primary" v-if="!isUnEmployee" @click="showExportSet">导出<i class="el-icon-upload el-icon--right"></i></el-button>
         </div>
         <el-table
             class="list-table"
@@ -66,12 +69,14 @@
             width="480px">
            <handle-dialog :employee="employeeObj" :handleType="handleType" :typeTitle="typeTitle" @handleSuccess="handleSuccess"></handle-dialog>
         </el-dialog>
+        <vue-selector></vue-selector>
     </div>
 </template>
 <script>
 import { getRequest, postRequest, postJsonRequest } from '@/api/api';
 import listItem from "components/employeeRecord/listItem";
 import handleDialog from "components/employeeRecord/handleDialog";
+import vueSelector from "components/common/vueSelector";
 export default {
     name: "employeeRecordList",
     props: {
@@ -82,7 +87,8 @@ export default {
     },
     components: {
         listItem,
-        handleDialog
+        handleDialog,
+        vueSelector
     },
     data() {
         return {
@@ -129,10 +135,21 @@ export default {
             employeeObj: {},
             fireDate: [],
             startDate: "",
-            endDate: ""
+            endDate: "",
+            showSelector: true,
+            searchParam: ""
         };
     },
     methods: {
+        searchFn() {
+            this.getEmloyeeList();
+        },
+        callSelector() {
+            this.showSelector = true;
+        },
+        showExportSet() {
+            this.$emit("showExportSetFn");
+        },
         handleSuccess() {
             this.dialogVisible = false;
             this.getEmloyeeList();
@@ -172,7 +189,8 @@ export default {
                 sortColumn: ths.sortColumn,
                 clerkType: ths.clerkType == 0 ? "" : ths.clerkType,
                 startDate: ths.startDate,
-                endDate: ths.endDate
+                endDate: ths.endDate,
+                searchParam: ths.searchParam
             };
             getRequest(url, params)
             .then(res => {

src/components/employeeRecord/exportSet.vue

+<template>
+    <div class="export-set-container">
+        <div class="title">已选择字段<span>导出的列表中将按顺序显示这些字段（可拖拽排序）</span></div>
+        <div class="cho-list">
+            <template v-for="tem in origin">
+                <div class="cho" v-if="tem.checked" :key="tem.fieldCode">{{tem.fieldName}}</div>
+            </template>
+        </div>
+        <div class="cho-area">
+            <div class="title">选择需要导出的字段</div>
+            <div class="cho-area-group">
+                <div class="group-div">
+                    <div class="group-title"></div>
+                    <ul class="group-son-list">
+                        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox></ul>
+                </div>
+                <div class="group-div" v-for="(group, index) in tempList" :key="group.fieldCode+index">
+                    <div class="group-title">{{group.title}}</div>
+                    <ul class="group-son-list">
+                        <template v-for="items in origin">
+                            <li :key="items.fieldCode" v-if="items.parentCode == group.fieldCode">
+                                <el-checkbox :label="items.fieldName" :key="items.fieldCode" v-model="items.checked">{{items.fieldName}}</el-checkbox>
+                            </li>
+                        </template>
+                    </ul>
+                </div>
+            </div>
+        </div>
+        <div class="handle-cho-btn">
+            <el-button type="primary" class="export-btn" @click="exportCho">导出<i class="iconfont icon-icon_yunxiazai"></i></el-button>
+            <el-button @click="cancelCho">取消</el-button>
+        </div>
+    </div>
+</template>
+<script>
+import { getRequest, postRequest, postJsonRequest } from '@/api/api';
+import { deepClone, formatDate } from '@/utils/index';
+export default {
+    name: "export-set",
+    data() {
+        return {
+            tempList: [],
+            checkList: [],
+            origin: [],
+            checkAll: false,
+            isIndeterminate: false
+        };
+    },
+    methods: {
+        handleCheckAllChange(val) {
+            console.log(val);
+            this.origin.forEach(tem => {
+                tem.checked = val;
+            });
+        },
+        getTemplate() {
+            let ths = this;
+            getRequest("/haoban-manage-web/record/employee-find-template", {})
+            .then(res => {
+                if (res.data.errorCode == 1) {
+                    ths.formatTemplateList(res.data.result);
+                } else {
+                    ths.$message.error({
+                        message: res.data.message
+                    });
+                }
+            })
+            .catch(e => {
+                ths.$message.error({
+                    message: e.message
+                });
+            });
+        },
+        formatTemplateList(list) {
+            let ths = this;
+            let fieldList = [];
+            let origin = [];
+            let copyData = list;
+            list.forEach(tem => {
+                tem.title = tem.fieldName;
+                tem.checked = false;
+                let arr = [];
+                copyData.forEach(li => {
+                    if (li.parentCode == tem.fieldCode) {
+                        arr.push(li);
+                    }
+                });
+                arr.sort(function(a,b){
+                    return a.sort*1-b.sort*1;
+                });
+                if (arr.length > 0) tem["childrens"] = arr;
+                if (tem.parentCode == 0) {
+                    fieldList.push(tem);
+                }
+                // origin.push(tem);
+            });
+            fieldList.sort(function(a,b){
+                return a.sort*1-b.sort*1;
+            });
+            fieldList.forEach(group => {
+               origin = origin.concat(group.childrens); 
+            });
+            // origin.sort(function(a,b){
+            //     return a.sort*1-b.sort*1;
+            // });
+            this.origin = origin;
+            this.tempList = fieldList;
+            console.log(fieldList, "模板");
+        },
+        cancelCho() {
+            this.origin.forEach(tem => {
+                tem.checked = false;
+            });
+            this.$emit("cancelCho");
+        },
+        exportCho() {
+            let arr = [];
+            let ths = this;
+            this.origin.forEach(tem => {
+                if (tem.checked) {
+                    arr.push({
+                        fieldCode: tem.fieldCode,
+                        fieldName: tem.fieldName
+                    })
+                }
+            });
+            let params = {};
+            params["exportTitleContent"] = JSON.stringify(arr);
+            console.log(params);
+            getRequest("/haoban-manage-web/record/define-export", params)
+            .then(res => {
+                console.log(res, "res");
+            })
+            .catch(e => {
+                ths.$message({
+                    message: e.message
+                });
+            });
+        }
+    },
+    beforeMount() {
+        this.getTemplate();
+    }
+}
+</script>
+<style lang="scss">
+.export-set-container {
+    background: #fff;
+    padding: 25px;
+    .title {
+        font-size:16px;
+        font-family:PingFangSC-Medium;
+        font-weight:500;
+        color:rgba(48,49,51,1);
+        span {
+            font-size:14px;
+            font-family:PingFangSC-Regular;
+            font-weight:400;
+            color:rgba(144,147,153,1);
+            margin-left: 20px;
+        }
+    }
+    .cho-list {
+        padding: 34px 0;
+        border-bottom: 1px solid #E4E7ED;
+        display: flex;
+        flex-wrap: wrap;
+        margin-bottom: 44px;
+        .cho {
+            padding: 0 15px;
+            box-sizing: border-box;
+            height:32px;
+            background:rgba(236,245,255,1);
+            border:1px solid rgba(217,236,255,1);
+            border-radius:4px;
+            color: #409EFF;
+            box-sizing: border-box;
+            text-align: center;
+            line-height: 32px;
+            font-size: 12px;
+            margin-right: 10px;
+            margin-bottom: 20px;
+            cursor: pointer;
+            &.osen {
+                background:rgba(64,158,255,1);
+                color: #fff;
+            }
+        }
+    }
+    .cho-area {
+        margin-top: 60px;
+        font-size:14px;
+        font-family:PingFangSC-Medium;
+        font-weight:500;
+        color:rgba(96,98,102,1);
+        .group-div {
+            display: flex;
+            margin-bottom: 50px;
+            &:first-child {
+                margin-top: 60px;
+            }
+            .group-title {
+                width: 100px;
+                font-weight:400;
+                color:rgba(96,98,102,1);
+            }
+            .group-son-list {
+                flex: 1;
+                display: flex;
+                flex-wrap: wrap;
+                li {
+                    width: 180px;
+                    margin-bottom: 25px;
+                }
+            }
+        }
+    }
+    .handle-cho-btn {
+        text-align: center;
+        .export-btn{
+            margin-right: 10px;
+            .iconfont {
+                color: #fff;
+                margin-left: 5px;
+            }
+        }
+    }
+}
+</style>
+
+

src/components/employeeRecord/handleDialog.vue

@@ -6,7 +6,7 @@
             :rules="rules"
             ref="ruleForm"
         >
-            <template v-if="typeTitle == '办理离职'">
+            <template v-if="typeTitle == '办理离职' || typeTitle == '修改离职信息'">
                 <el-form-item label="最后工作日:" prop="date">
                     <el-date-picker
                         style="width: 280px;"
@@ -63,7 +63,7 @@
             </el-form-item>
         </el-form>
         <div class="button-box">
-            <el-button type="primary" @click="submitHandle">{{typeTitle == '办理转正' ? '确认转正' : '确认办理'}}</el-button>
+            <el-button type="primary" @click="submitHandle">{{typeTitle == '办理转正' ? '确认转正' : typeTitle == '修改离职信息' ? '确认修改' : '确认办理'}}</el-button>
         </div>
     </div>
 </template>
@@ -147,6 +147,15 @@ export default {
                                     fireDate: ths.ruleForm.date
                                 },
                                 url: "/haoban-manage-web/record/fire-work"
+                            },
+                            changeFireInfo: {
+                                params: {
+                                    fireReason: ths.ruleForm.reason,
+                                    remark: ths.ruleForm.remarks,
+                                    recordId: ths.employee.recordId,
+                                    fireDate: ths.ruleForm.date
+                                },
+                                url: "/haoban-manage-web/record/fire-work"
                             }
                         };
                         ths.subRequest(typeObj[ths.handleType].params, typeObj[ths.handleType].url);

src/views/contacts/employeeRecord.vue

 <template>
     <div class="e-record-container">
+        <template v-if="!showExportSet">
             <div class="top-area">
                 <div class="top-title">
                     <span class="title-span">在职员工</span>
@@ -14,16 +15,22 @@
                     </div>
                 </div>
             </div>
-        <employee-list></employee-list>
+            <employee-list @showExportSetFn="showExportSetFn"></employee-list>
+        </template>
+        <template v-else>
+            <export-set @cancelCho="cancelCho"></export-set>
+        </template>
     </div>
 </template>
 <script>
 import { getRequest, postRequest, postJsonRequest } from '@/api/api';
+import exportSet from "components/employeeRecord/exportSet";
 import employeeList from "components/employeeRecord/employeeList";
 export default {
     name: "employeeRecord",
     components: {
-        employeeList
+        employeeList,
+        exportSet
     },
     data() {
         return {
@@ -38,10 +45,17 @@ export default {
                 onTrialCount: "试用",
                 noStatusCount: "无状态"
             },
-            countObj: {}
+            countObj: {},
+            showExportSet: false
         };
     },
     methods: {
+        cancelCho() {
+            this.showExportSet = false;
+        },
+        showExportSetFn() {
+            this.showExportSet = true;
+        },
         getEmployeeCount() {
             let ths = this;
             getRequest("/haoban-manage-web/record/employee-count-detail", {})

src/views/contacts/recordInfo.vue

@@ -2,7 +2,7 @@
     <div class="commom-container clerk-detail-container">
         <p class="t-rt"><a class="a-href" @click="getPdf()">打印员工档案</a></p>
         <div id="pdfDom">
-            <div class="employee-detail">
+            <div class="employee-detail-cell">
                 <div class="head-info">
                     <p class="head-cell"><img :src="info.headPic" class="head-img"></p>
                     <p class="head-cell name">{{info.clerkName}}<span>{{statusList[info.clerkStatus - 1]}}</span></p>
@@ -24,29 +24,38 @@
                                 <span class="radio"></span>
                             <div class="hurdle"></div></div>
                             <p class="position">{{his.positionName}}</p>
-                            <p>{{historyStatus[his.historyStatus * 1 - 1]}}</p>
+                            <p>{{historyStatus[his.historyStatus * 1 - 1]}}<a class="a-href m-l-10 fs-12" @click="editHis" v-if="his.historyStatus == 3">编辑</a></p>
                             <p>{{!!his.storeName ? his.storeName : his.groupName}}</p>
                         </div>
                     </li>
                 </ul>
             </div>
         </div>
+        <el-dialog
+            title="修改离职信息"
+            :visible.sync="dialogVisible"
+            width="480px">
+            <handle-dialog :employee="staticInfo" handleType="changeFireInfo" typeTitle="修改离职信息" @handleSuccess="handleSuccess"></handle-dialog>
+        </el-dialog>
     </div>
 </template>
 <script>
 import { getRequest, postRequest, postJsonRequest } from '@/api/api';
 import { deepClone, formatDate } from '@/utils/index';
 import editableCell from "components/employeeRecord/editableCell";
+import handleDialog from "components/employeeRecord/handleDialog";
 export default {
     name: "recordInfo",
     components: {
-        editableCell
+        editableCell,
+        handleDialog
     },
     filters: {
         formatDate
     },
     data() {
         return {
+            dialogVisible: false,
             htmlTitle: "员工档案",
             info: {},
             staticInfo: {},
@@ -58,6 +67,7 @@ export default {
         }
     },
     methods: {
+        handleSuccess() {},
         getEmployeeDetail() { // 获取员工详情
             let ths = this;
             let params = {
@@ -133,7 +143,7 @@ export default {
                     clerkInfo[tem.fieldCode] = arr;
                     cInfo[tem.fieldCode] = arr.slice(0);
                 }
-                // console.log(tem.fieldType, tem.fieldName, tem.fieldOperations, tem);
+                console.log(tem.fieldType, tem.fieldName, tem.fieldOperations, tem);
                 tem.title = tem.fieldName;
                 let arr = [];
                 copyData.forEach(li => {
@@ -182,13 +192,18 @@ export default {
         },
         formatMileStone(list) {
             let ths = this;
-            console.log(list, "dddddd");
+            list.sort(function(a,b){
+                return a.historyDate*1-b.historyDate*1;
+            });
             let arr = [];
             for (let i = 0, len = list.length; i < len; i += 4){
                 arr.push(list.slice(i, i + 4));
             }
             console.log(arr, "dddddd");
             ths.mileStone = arr;
+        },
+        editHis() {
+            this.dialogVisible = true;
         }
     },
     beforeMount() {
@@ -200,7 +215,7 @@ export default {
 <style lang="scss">
     .clerk-detail-container {
         padding: 30px;
-        .employee-detail {
+        .employee-detail-cell {
             .head-info {
                 margin: 20px 0 70px;
                 text-align: center;

src/views/contacts/recordIo.vue

 <template>
     <div class="io-container">
+        <template v-if="!dialogVisible">
             <ul class="tip-area">
                 <li class="tip">姓名必须和好办企业通讯录中的员工姓名保持一致，手机号必须为员工注册好办的手机号</li>
                 <li class="tip">员工档案导入时，直接以手机号去做匹配，通讯录中不存在的将无法导入（模板中配置的部门、职位、code，这些字段信息请保持与企业通讯录中一致，这几个字段的信息将不会修改通讯录的信息，直接取该成员对应的通讯录的字段信息）</li>
@@ -44,8 +45,8 @@
             <div class="handle-area import" v-else-if="type == 'export'">
                 <div class="step-div" style="margin-bottom :90px;">
                     <span class="ft-large">①</span>导出员工档案
-                <a class="d-u-btn" href="http://www.gicdev.com/haoban-manage-web/record/export-record-template.json">
-                    <el-button type="primary">下载<i class="iconfont icon-icon_yunxiazai m-l-5"></i></el-button>
+                    <a class="d-u-btn">
+                        <el-button type="primary" @click="callExport">下载<i class="iconfont icon-icon_yunxiazai m-l-5"></i></el-button>
                     </a>
 
                 </div>
@@ -126,15 +127,21 @@
                     :total="total">
                 </el-pagination>
             </div>
+        </template>
+        <template v-else>
+            <export-set @cancelCho="cancelCho"></export-set>
+        </template>
     </div>
 </template>
 <script>
 import uploadExcelComponent from "components/uploadExcel/index";
 import { getRequest, postRequest, postJsonRequest } from '@/api/api';
+import exportSet from "components/employeeRecord/exportSet";
 export default {
     name: "employee-io",
     components: {
-        uploadExcelComponent
+        uploadExcelComponent,
+        exportSet
     },
     data() {
         let  local = window.location.origin;
@@ -150,7 +157,8 @@ export default {
             pageSize: 20,
             currentPage: 1,
             total: 0,
-            tempList: []
+            tempList: [],
+            dialogVisible: false
         };
     },
     methods: {
@@ -226,6 +234,12 @@ export default {
         getChange(file, fileList) {
             console.log(file, fileList);
             this.fileList = fileList;
+        },
+        callExport() {
+            this.dialogVisible = true;
+        },
+        cancelCho() {
+            this.dialogVisible = false;
         }
     },
     beforeMount() {

src/views/contacts/unemployee.vue

@@ -2,17 +2,18 @@
     <div class="e-record-container">
         <div class="top-area">
             <div class="top-title">
-                <span class="title-span">在职员工</span>
-                <a href="#/recordIo?importCode=record">
+                <span class="title-span">
+                    离职员工</span>
+                <!-- <a href="#/recordIo?importCode=record">
                     <el-button type="primary">导入员工档案<i class="el-icon-upload el-icon--right"></i></el-button>
-                </a>
+                </a> -->
             </div>
-            <div class="e-type-num-title">
+            <!-- <div class="e-type-num-title">
                 <div class="type-cell" v-for="(count, key) in countObj" :key="key" :class="key == 'onWorkCout' || key == 'noTypeWorkCount' ? 'with-bdr' : ''">
                     <p class="type-name">{{typeObj[key]}}</p>
                     <p class="num">{{count}}</p>
                 </div>
-            </div>
+            </div> -->
         </div>
         <employee-list :isUnEmployee="true"></employee-list>
     </div>
@@ -42,28 +43,28 @@ export default {
         };
     },
     methods: {
-        getEmployeeCount() {
-            let ths = this;
-            getRequest("/haoban-manage-web/record/employee-count-detail", {})
-            .then(res => {
-                console.log(res, "res count");
-                if (res.data.errorCode == 1) {
-                    ths.countObj = res.data.result;
-                } else {
-                    ths.$message.error({
-                        message: res.data.message
-                    });
-                }
-            })
-            .catch(e => {
-                ths.$message.error({
-                    message: e.message
-                });
-            });
-        }
+        // getEmployeeCount() {
+        //     let ths = this;
+        //     getRequest("/haoban-manage-web/record/employee-count-detail", {})
+        //     .then(res => {
+        //         console.log(res, "res count");
+        //         if (res.data.errorCode == 1) {
+        //             ths.countObj = res.data.result;
+        //         } else {
+        //             ths.$message.error({
+        //                 message: res.data.message
+        //             });
+        //         }
+        //     })
+        //     .catch(e => {
+        //         ths.$message.error({
+        //             message: e.message
+        //         });
+        //     });
+        // }
     },
     beforeMount() {
-        this.getEmployeeCount();
+        // this.getEmployeeCount();
     }
 };
 </script>

static/css/public.css

@@ -341,6 +341,9 @@ input:focus {
 .c-303133 {
   color: #303133;
 }
+.m-l-10 {
+  margin-left: 10px;
+}
 .m-l-16 {
   margin-left: 16px;
 }