花名册-合同信息以及银行卡信息

src/views/modules/roster/Roster.vue

@@ -1,33 +0,0 @@
-<template>
-  <div class="el-scrollbar__wrap wrap-white padding-20">
-    <el-tabs v-model="activeName" type="card">
-      <el-tab-pane v-for="item in tabList" :label="item.label" :name="item.value"style="height: calc(100vh - 210px)" lazy>
-        <component :is="item.value" :i="item.value" :index="activeName"></component>
-      </el-tab-pane>
-    </el-tabs>
-  </div>
-</template>
-<script>
-  import RosterList from './tabs/RosterList'
-  export default {
-    components: {
-      RosterList
-    },
-    data () {
-      return {
-        activeName: 'rosterList',
-        tabList: [{
-          label: '在职',
-          value: 'rosterList'
-        }]
-      }
-    },
-    created () {
-      if (this.$route.query.activeName) {
-        this.activeName = this.$route.query.activeName
-      }
-    },
-    methods: {
-    }
-  }
-</script>

src/views/modules/roster/tabs/RosterForm.vue

@@ -10,12 +10,14 @@
       :visible.sync="visible">
       <el-form size="middle" :model="inputForm" ref="inputForm" v-loading="loading" :class="method==='view'?'readonly':''"  :disabled="method==='view'"
                label-width="125px" @submit.native.prevent>
+
+        <el-divider content-position="left"><i class="el-icon-document"></i> 基础信息</el-divider>
         <el-row  :gutter="15">
           <el-col :span="12">
             <el-form-item label="姓名" prop="name"
                           :rules="[{required: true, message: '姓名不能为空', trigger: 'blur'}
                  ]">
-              <el-input v-model="inputForm.name" placeholder="请填写姓名"     ></el-input>
+              <el-input v-model="inputForm.name" placeholder="请填写姓名"     clearable></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="12">
@@ -81,7 +83,7 @@
             <el-form-item label="工号" prop="jobNo"
                           :rules="[
                  ]">
-              <el-input v-model="inputForm.jobNo" placeholder="请填写工号"     ></el-input>
+              <el-input v-model="inputForm.jobNo" placeholder="请填写工号"     clearable></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="12">
@@ -102,28 +104,66 @@
             <el-form-item label="证件号" prop="idCard"
                           :rules="[{required: true, message: '证件号不能为空', trigger: 'blur'}
                  ]">
-              <el-input v-model="inputForm.idCard" placeholder="请填写证件号"     ></el-input>
+              <el-input v-model="inputForm.idCard" placeholder="请填写证件号"     clearable></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="证件照正面" prop="certificatesFront"
                           :rules="[
                  ]">
-              <el-input v-model="inputForm.certificatesFront" placeholder="请填写证件照正面"     ></el-input>
+              <el-popover
+                placement="left"
+                trigger="hover">
+                <el-button style="width: 100%" @click="onPreview(inputForm.certificatesFrontLsUrl)" icon="el-icon-zoom-in"></el-button>
+                <el-upload
+                  slot="reference"
+                class="avatar-uploader"
+                :action="`${$http.BASE_URL}/roster/base/webUpload/upload`"
+                :show-file-list="false"
+                :on-success="handleAvatarSuccessFront"
+                >
+<!--                :before-upload="beforeAvatarUpload"-->
+<!--                <img v-if="certificatesFront" :src="certificatesFront" class="avatar">-->
+                <el-image
+                  v-if="inputForm.certificatesFrontLsUrl"
+                  style="width: 150px; height: 150px; line-height: 150px"
+                  :src="inputForm.certificatesFrontLsUrl"
+                  fit="contain"></el-image>
+                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                </el-upload>
+              </el-popover>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="证件照反面" prop="certificatesBack"
                           :rules="[
                  ]">
-              <el-input v-model="inputForm.certificatesBack" placeholder="请填写证件照反面"     ></el-input>
+              <el-popover
+                placement="left"
+                trigger="hover">
+                <el-button style="width: 100%" @click="onPreview(inputForm.certificatesBackLsUrl)" icon="el-icon-zoom-in"></el-button>
+                <el-upload
+                  slot="reference"
+                class="avatar-uploader"
+                :action="`${$http.BASE_URL}/roster/base/webUpload/upload`"
+                :show-file-list="false"
+                :on-success="handleAvatarSuccessBack"
+                >
+                <el-image
+                  v-if="inputForm.certificatesBackLsUrl"
+                  style="width: 150px; height: 150px; line-height: 150px"
+                  :src="inputForm.certificatesBackLsUrl"
+                  fit="contain"></el-image>
+                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+              </el-upload>
+              </el-popover>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="手机号码" prop="mobile"
                           :rules="[{required: true, message: '手机号码不能为空', trigger: 'blur'}
                  ]">
-              <el-input v-model="inputForm.mobile" placeholder="请填写手机号码"     ></el-input>
+              <el-input v-model="inputForm.mobile" placeholder="请填写手机号码"     clearable></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="12">
@@ -170,14 +210,14 @@
             <el-form-item label="历史工龄" prop="seniority"
                           :rules="[
                  ]">
-              <el-input v-model="inputForm.seniority" placeholder="请填写历史工龄"     ></el-input>
+              <el-input v-model="inputForm.seniority" placeholder="请填写历史工龄"     clearable></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="合同公司" prop="contractCompany"
                           :rules="[
                  ]">
-              <el-input v-model="inputForm.contractCompany" placeholder="请填写合同公司"     ></el-input>
+              <el-input v-model="inputForm.contractCompany" placeholder="请填写合同公司"     clearable></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="12">
@@ -210,14 +250,14 @@
             <el-form-item label="工作地点" prop="workPlace"
                           :rules="[
                  ]">
-              <el-input v-model="inputForm.workPlace" placeholder="请填写工作地点"     ></el-input>
+              <el-input v-model="inputForm.workPlace" placeholder="请填写工作地点"     clearable></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="联系地址" prop="contactAddress"
                           :rules="[
                  ]">
-              <el-input v-model="inputForm.contactAddress" placeholder="请填写联系地址"     ></el-input>
+              <el-input v-model="inputForm.contactAddress" placeholder="请填写联系地址"     clearable></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="12">
@@ -252,7 +292,7 @@
             <el-form-item label="民族" prop="ethnic"
                           :rules="[
                  ]">
-              <el-input v-model="inputForm.ethnic" placeholder="请填写民族"     ></el-input>
+              <el-input v-model="inputForm.ethnic" placeholder="请填写民族"     clearable></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="12">
@@ -273,21 +313,21 @@
             <el-form-item label="户口所在地" prop="accountAddr"
                           :rules="[
                  ]">
-              <el-input v-model="inputForm.accountAddr" placeholder="请填写户口所在地"     ></el-input>
+              <el-input v-model="inputForm.accountAddr" placeholder="请填写户口所在地"     clearable></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="籍贯" prop="origin"
                           :rules="[
                  ]">
-              <el-input v-model="inputForm.origin" placeholder="请填写籍贯"     ></el-input>
+              <el-input v-model="inputForm.origin" placeholder="请填写籍贯"     clearable></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="居住地址" prop="liveAddr"
                           :rules="[
                  ]">
-              <el-input v-model="inputForm.liveAddr" placeholder="请填写居住地址"     ></el-input>
+              <el-input v-model="inputForm.liveAddr" placeholder="请填写居住地址"     clearable></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="12">
@@ -350,49 +390,49 @@
             <el-form-item label="紧急联系人姓名" prop="emergencyContactName"
                           :rules="[
                  ]">
-              <el-input v-model="inputForm.emergencyContactName" placeholder="请填写紧急联系人姓名"     ></el-input>
+              <el-input v-model="inputForm.emergencyContactName" placeholder="请填写紧急联系人姓名"     clearable></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="紧急联系人电话" prop="emergencyContactTel"
                           :rules="[
                  ]">
-              <el-input v-model="inputForm.emergencyContactTel" placeholder="请填写紧急联系人电话"     ></el-input>
+              <el-input v-model="inputForm.emergencyContactTel" placeholder="请填写紧急联系人电话"     clearable></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="配偶姓名" prop="spouseName"
                           :rules="[
                  ]">
-              <el-input v-model="inputForm.spouseName" placeholder="请填写配偶姓名"     ></el-input>
+              <el-input v-model="inputForm.spouseName" placeholder="请填写配偶姓名"     clearable></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="孩子姓名" prop="childName"
                           :rules="[
                  ]">
-              <el-input v-model="inputForm.childName" placeholder="请填写孩子姓名"     ></el-input>
+              <el-input v-model="inputForm.childName" placeholder="请填写孩子姓名"     clearable></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="QQ" prop="qq"
                           :rules="[
                  ]">
-              <el-input v-model="inputForm.qq" placeholder="请填写QQ"     ></el-input>
+              <el-input v-model="inputForm.qq" placeholder="请填写QQ"     clearable></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="微信" prop="wechat"
                           :rules="[
                  ]">
-              <el-input v-model="inputForm.wechat" placeholder="请填写微信"     ></el-input>
+              <el-input v-model="inputForm.wechat" placeholder="请填写微信"     clearable></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="个人邮箱" prop="email"
                           :rules="[
                  ]">
-              <el-input v-model="inputForm.email" placeholder="请填写个人邮箱"     ></el-input>
+              <el-input v-model="inputForm.email" placeholder="请填写个人邮箱"     clearable></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="21">
@@ -403,8 +443,157 @@
             </el-form-item>
           </el-col>
         </el-row>
+        <el-divider content-position="left"><i class="el-icon-document"></i> 合同信息</el-divider>
+        <el-row  :gutter="15">
+          <el-col :span="12">
+            <el-form-item label="当前合同起始日" prop="rosterContractDTO.beginDate"
+                          :rules="[
+                 ]">
+              <el-date-picker
+                style="width: 100%"
+                v-model="inputForm.rosterContractDTO.beginDate"
+                type="date"
+                placeholder="选择当前合同起始日">
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="当前合同终止日" prop="rosterContractDTO.endDate"
+                          :rules="[
+                 ]">
+              <el-date-picker
+                style="width: 100%"
+                v-model="inputForm.rosterContractDTO.endDate"
+                type="date"
+                placeholder="选择当前合同终止日">
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="工作邮箱" prop="rosterContractDTO.workEmail"
+                          :rules="[
+                 ]">
+              <el-input v-model="inputForm.rosterContractDTO.workEmail" placeholder="请填写工作邮箱"     clearable></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="工作电话" prop="rosterContractDTO.workMobile"
+                          :rules="[
+                 ]">
+              <el-input v-model="inputForm.rosterContractDTO.workMobile" placeholder="请填写工作电话"     clearable></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="试用期到期日" prop="rosterContractDTO.probationPeriodEndDate"
+                          :rules="[
+                 ]">
+              <el-date-picker
+                style="width: 100%"
+                v-model="inputForm.rosterContractDTO.probationPeriodEndDate"
+                type="date"
+                placeholder="选择试用期到期日">
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="试用期(月)" prop="rosterContractDTO.probationPeriodMonth"
+                          :rules="[
+                 ]">
+              <el-input v-model="inputForm.rosterContractDTO.probationPeriodMonth" placeholder="请填写试用期(月)" clearable></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-divider content-position="left"><i class="el-icon-document"></i> 银行卡信息</el-divider>
+        <el-row  :gutter="15" v-for="(item,index) in inputForm.rosterBankCardsDTOList">
+          <el-col :span="24">
+            <el-form-item label="" >
+              <el-divider content-position="left"> 银行卡 {{index + 1}}</el-divider>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="工资卡开户银行" :prop="'rosterBankCardsDTOList[' + index + '].payrollCardOpenBank'"
+                          :rules="[
+                 ]">
+              <el-input v-model="inputForm.rosterBankCardsDTOList[index].payrollCardOpenBank" placeholder="请填写工资卡开户银行"     clearable></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="工资卡分支行" :prop="'rosterBankCardsDTOList[' + index + '].payrollCardBranches'"
+                          :rules="[
+                 ]">
+              <el-input v-model="inputForm.rosterBankCardsDTOList[index].payrollCardBranches" placeholder="请填写工资卡分支行"     clearable></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="工资卡银行账号" :prop="'rosterBankCardsDTOList[' + index + '].payrollCardBankAccount'"
+                          :rules="[
+                 ]">
+              <el-input v-model="inputForm.rosterBankCardsDTOList[index].payrollCardBankAccount" placeholder="请填写工资卡银行账号"     clearable></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="工资卡开户名" :prop="'rosterBankCardsDTOList[' + index + '].payrollCardOpeningName'"
+                          :rules="[
+                 ]">
+              <el-input v-model="inputForm.rosterBankCardsDTOList[index].payrollCardOpeningName" placeholder="请填写工资卡开户名"     clearable></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="工资卡照片" :prop="'rosterBankCardsDTOList[' + index + '].payrollCardPic'"
+                          :rules="[
+                 ]">
+              <el-popover
+                placement="left"
+                trigger="hover">
+                <el-button style="width: 100%" @click="onPreview(inputForm.rosterBankCardsDTOList[index].payrollCardPicLsUrl)" icon="el-icon-zoom-in"></el-button>
+                <el-upload
+                  slot="reference"
+                  class="avatar-uploader"
+                  :action="`${$http.BASE_URL}/roster/base/webUpload/upload`"
+                  :show-file-list="false"
+                  :on-success="(response, file, fileList) => {
+                    return handleAvatarSuccessBank(response, file, fileList, index)
+                  }"
+                >
+                  <el-image
+                    v-if="inputForm.rosterBankCardsDTOList[index].payrollCardPicLsUrl"
+                    style="width: 150px; height: 150px; line-height: 150px"
+                    :src="inputForm.rosterBankCardsDTOList[index].payrollCardPicLsUrl"
+                    fit="contain"></el-image>
+                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                </el-upload>
+              </el-popover>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="是否为默认" :prop="'rosterBankCardsDTOList[' + index + '].isDefault'"
+                          :rules="[
+                 ]">
+<!--              <el-input v-model="inputForm.rosterBankCardsDTOList[index].isDefault" placeholder="请填写试用期(月)" clearable></el-input>-->
 
+              <el-radio @change="checkBankDefault(index)" v-model="inputForm.rosterBankCardsDTOList[index].isDefault" label="1" size="mini" style="margin-right: 0px" border>是</el-radio>
+              <el-radio @change="checkBankDefault(index)" v-model="inputForm.rosterBankCardsDTOList[index].isDefault" label="2" size="mini" border>否</el-radio>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24" style="text-align: center">
+            <el-form-item label="" >
+              <el-button style="width: 50%" type="danger" @click="delBank(index)" plain>删除银行卡 {{index + 1}}</el-button>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="15">
+          <el-col :span="24">
+            <el-form-item label="" >
+              <el-button style="width: 100%" type="primary" @click="addRosterBankCard(index)" plain>新增银行卡</el-button>
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
+      <el-image-viewer
+        v-if="showViewer"
+        :on-close="closeViewer"
+        :url-list="[url]"
+        :zIndex=9999></el-image-viewer>
       <span slot="footer" class="dialog-footer">
       <el-button size="small" @click="close()" icon="el-icon-circle-close">关闭</el-button>
       <el-button size="small" type="primary" v-if="method != 'view'" @click="doSubmit()" icon="el-icon-circle-check" v-noMoreClick>确定</el-button>
@@ -419,6 +608,8 @@
   import RankSystemTableService from '@/api/rank/RankSystemTableService'
   import JobPositionService from '@/api/position/JobPositionService'
   import RosterService from '@/api/roster/RosterService'
+  import OSSService from '@/api/sys/OSSService'
+  import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
   export default {
     data () {
       return {
@@ -465,17 +656,32 @@
           qq: '',
           wechat: '',
           email: '',
-          remarks: ''
+          remarks: '',
+          certificatesFrontLsUrl: '',
+          certificatesBackLsUrl: '',
+          rosterContractDTO: {
+            baseId: '',
+            beginDate: '',
+            endDate: '',
+            workEmail: '',
+            workMobile: '',
+            probationPeriodEndDate: '',
+            probationPeriodMonth: ''
+          },
+          rosterBankCardsDTOList: []
         },
         jobPositionList: [],
         positionList: [],
-        rankList: []
+        rankList: [],
+        showViewer: false,
+        url: ''
       }
     },
     rankService: null,
     rankSystemTableService: null,
     jobPositionService: null,
     rosterService: null,
+    ossService: null,
     watch: {
       'inputForm.officeId': {
         handler () {
@@ -493,9 +699,11 @@
       this.rankSystemTableService = new RankSystemTableService()
       this.jobPositionService = new JobPositionService()
       this.rosterService = new RosterService()
+      this.ossService = new OSSService()
     },
     components: {
-      SelectTree
+      SelectTree,
+      ElImageViewer
     },
     methods: {
       init (method, id) {
@@ -540,7 +748,19 @@
           qq: '',
           wechat: '',
           email: '',
-          remarks: ''
+          remarks: '',
+          certificatesFrontLsUrl: '',
+          certificatesBackLsUrl: '',
+          rosterContractDTO: {
+            baseId: '',
+            beginDate: '',
+            endDate: '',
+            workEmail: '',
+            workMobile: '',
+            probationPeriodEndDate: '',
+            probationPeriodMonth: ''
+          },
+          rosterBankCardsDTOList: []
         }
         this.inputForm.id = id
         if (method === 'add') {
@@ -562,6 +782,13 @@
               this.loading = false
             })
           }
+          if (this.inputForm.rosterBankCardsDTOList.length === 0 ||
+                this.inputForm.rosterBankCardsDTOList === [] ||
+                  this.inputForm.rosterBankCardsDTOList === null ||
+                    this.inputForm.rosterBankCardsDTOList === undefined) {
+            this.inputForm.rosterBankCardsDTOList = []
+            // this.addRosterBankCard()
+          }
         })
       },
       // 表单提交
@@ -571,6 +798,15 @@
             this.loading = true
             this.inputForm.birthDate = this.moment(this.inputForm.birthDate).format('YYYY-MM-DD HH:mm:ss')
             this.inputForm.onboardingDate = this.moment(this.inputForm.onboardingDate).format('YYYY-MM-DD HH:mm:ss')
+            if (this.inputForm.rosterContractDTO.beginDate !== null && this.inputForm.rosterContractDTO.beginDate !== undefined && this.inputForm.rosterContractDTO.beginDate !== '') {
+              this.inputForm.rosterContractDTO.beginDate = this.moment(this.inputForm.rosterContractDTO.beginDate).format('YYYY-MM-DD HH:mm:ss')
+            }
+            if (this.inputForm.rosterContractDTO.endDate !== null && this.inputForm.rosterContractDTO.endDate !== undefined && this.inputForm.rosterContractDTO.endDate !== '') {
+              this.inputForm.rosterContractDTO.endDate = this.moment(this.inputForm.rosterContractDTO.endDate).format('YYYY-MM-DD HH:mm:ss')
+            }
+            if (this.inputForm.rosterContractDTO.probationPeriodEndDate !== null && this.inputForm.rosterContractDTO.probationPeriodEndDate !== undefined && this.inputForm.rosterContractDTO.probationPeriodEndDate !== '') {
+              this.inputForm.rosterContractDTO.probationPeriodEndDate = this.moment(this.inputForm.rosterContractDTO.probationPeriodEndDate).format('YYYY-MM-DD HH:mm:ss')
+            }
             this.rosterService.save(this.inputForm).then(({data}) => {
               this.close()
               this.$message.success(data)
@@ -616,7 +852,64 @@
       },
       changePosition () {
         this.getRankByPosition()
+      },
+      handleAvatarSuccessFront (res, file) {
+        this.inputForm.certificatesFront = res.url
+        this.inputForm.certificatesFrontLsUrl = res.lsUrl
+        this.$forceUpdate()
+      },
+      handleAvatarSuccessBack (res, file) {
+        this.inputForm.certificatesBack = res.url
+        this.inputForm.certificatesBackLsUrl = res.lsUrl
+        this.$forceUpdate()
+      },
+      onPreview (url) {
+        if (url !== '' && url !== undefined && url !== null) {
+          this.url = url
+          this.showViewer = true
+        }
+      },
+      // 关闭查看器
+      closeViewer () {
+        this.url = ''
+        this.showViewer = false
+      },
+      addRosterBankCard () {
+        const bankCard = {
+          baseId: '',
+          payrollCardOpenBank: '',
+          payrollCardBranches: '',
+          payrollCardBankAccount: '',
+          payrollCardOpeningName: '',
+          payrollCardPic: '',
+          isDefault: '',
+          payrollCardPicLsUrl: ''
+        }
+        this.inputForm.rosterBankCardsDTOList.push(bankCard)
+      },
+      delBank (index) {
+        this.inputForm.rosterBankCardsDTOList.splice(index, index + 1)
+      },
+      handleAvatarSuccessBank (res, file, fileList, index) {
+        this.inputForm.rosterBankCardsDTOList[index].payrollCardPic = res.url
+        this.inputForm.rosterBankCardsDTOList[index].payrollCardPicLsUrl = res.lsUrl
+        this.$forceUpdate()
+      },
+      checkBankDefault (index) {
+        if (this.inputForm.rosterBankCardsDTOList[index].isDefault === '1') {
+          const list = this.inputForm.rosterBankCardsDTOList
+          for (let i = 0; i < list.length; i++) {
+            if (index !== i) {
+              this.inputForm.rosterBankCardsDTOList[i].isDefault = '2'
+            }
+          }
+        }
       }
     }
   }
 </script>
+<style scoped>
+  /deep/ .el-form-item__content {
+    line-height: 1px;
+  }
+</style>

src/views/modules/roster/tabs/RosterList.vue

@@ -2,8 +2,8 @@
   <div class="page">
     <el-form size="small" :inline="true" class="query-form" ref="searchForm" :model="searchForm" @keyup.enter.native="refreshList()" @submit.native.prevent>
       <!-- 搜索框-->
-      <el-form-item prop="projectName">
-        <el-input size="small" v-model="searchForm.projectName" placeholder="项目名称" clearable></el-input>
+      <el-form-item prop="name">
+        <el-input size="small" v-model="searchForm.name" placeholder="姓名" clearable></el-input>
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="refreshList()" size="small" icon="el-icon-search">查询</el-button>
@@ -15,8 +15,13 @@
         <template #buttons>
           <el-button v-if="hasPermission('roster:base:add')" type="primary" size="small" icon="el-icon-plus" @click="add()">新建</el-button>
           <el-button v-if="hasPermission('roster:base:del')" type="danger"   size="small" icon="el-icon-delete" @click="del()" :disabled="$refs.rosterTable && $refs.rosterTable.getCheckboxRecords().length === 0" plain>删除</el-button>
+          <el-button v-if="showButton" type="primary" size="small" icon="el-icon-arrow-down" @click="showTabs()" plain>展示分类</el-button>
+          <el-button v-if="disableButton" type="primary" size="small" icon="el-icon-arrow-up" @click="disableTabs()" plain>收起分类</el-button>
         </template>
       </vxe-toolbar>
+      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+        <el-tab-pane :key="index" v-for="(item,index) in workerTypeList" :label="item.label" :name="item.label" :value="item.value"></el-tab-pane>
+      </el-tabs>
       <div style="height: calc(100% - 80px);">
         <vxe-table
           border="inner"
@@ -46,7 +51,16 @@
             </template>
           </vxe-column>
           <vxe-column width="200px"  title="证件号" field="idCard" > </vxe-column>
-          <vxe-column width="200px"  title="入职日期" field="onboardingDate" > </vxe-column>
+          <vxe-column width="200px"  title="员工类型" field="workerType" >
+            <template slot-scope="scope">
+              <span> {{$dictUtils.getDictLabel("worker_type", scope.row.workerType)}} </span>
+            </template>
+          </vxe-column>
+          <vxe-column width="200px"  title="入职日期" field="onboardingDate" >
+              <template slot-scope="scope">
+                {{ moment(scope.row.onboardingDate).format('YYYY-MM-DD')}}
+              </template>
+          </vxe-column>
 
           <vxe-column title="操作" width="200px" fixed="right" align="center">
             <template  slot-scope="scope">
@@ -69,7 +83,7 @@
       </div>
     </div>
     <!-- 弹窗, 新增 / 修改 -->
-    <RosterForm  ref="rosterForm" @refreshDataList="refreshList"></RosterForm>
+    <component is="RosterForm"  ref="rosterForm" @refreshDataList="refreshList"></component>
   </div>
 </template>
 
@@ -80,6 +94,7 @@
     data () {
       return {
         searchForm: {
+          name: ''
         },
         dataList: [],
         tablePage: {
@@ -88,12 +103,18 @@
           pageSize: 10,
           orders: []
         },
-        loading: false
+        loading: false,
+        activeName: 'working',
+        workerTypeList: [],
+        activeValue: '',
+        showButton: false,
+        disableButton: true
       }
     },
     rosterService: null,
     created () {
       this.rosterService = new RosterService()
+      this.addTabs()
     },
     components: {
       RosterForm
@@ -101,7 +122,6 @@
     activated () {
       this.refreshList()
     },
-
     methods: {
       // 获取数据列表
       refreshList () {
@@ -110,6 +130,7 @@
           'current': this.tablePage.currentPage,
           'size': this.tablePage.pageSize,
           'orders': this.tablePage.orders,
+          'workerType': this.activeValue,
           ...this.searchForm
         }).then(({data}) => {
           this.dataList = data.records
@@ -167,6 +188,32 @@
       resetSearch () {
         this.$refs.searchForm.resetFields()
         this.refreshList()
+      },
+      handleClick (tab) {
+        const val = tab.$attrs.value
+        if (val === '0') {
+          this.activeValue = ''
+        } else {
+          this.activeValue = val
+        }
+        this.refreshList()
+      },
+      addTabs () {
+        this.workerTypeList = []
+        this.workerTypeList.push({'label': '在职', 'value': '0'})
+        this.$dictUtils.getDictList('worker_type').forEach(item => {
+          this.workerTypeList.push(item)
+        })
+      },
+      showTabs () {
+        this.addTabs()
+        this.showButton = false
+        this.disableButton = true
+      },
+      disableTabs () {
+        this.workerTypeList = []
+        this.showButton = true
+        this.disableButton = false
       }
     }
   }