花名册调整

src/api/roster/RosterService.js

@@ -50,4 +50,12 @@ export default class RosterService {
       data: data
     })
   }
+  exportFile (params) {
+    return request({
+      url: '/roster/base/exportFile',
+      method: 'get',
+      params: params,
+      responseType: 'blob'
+    })
+  }
 }

src/views/modules/roster/RosterForm.vue

@@ -382,7 +382,7 @@
             <el-form-item label="民族" prop="ethnic"
                           :rules="[
                  ]">
-              <el-select v-model="inputForm.ethnic" placeholder="请选择民族" style="width:100%;">
+              <el-select v-model="inputForm.ethnic" filterable placeholder="请选择民族" style="width:100%;">
                 <el-option
                   v-for="item in $dictUtils.getDictList('ethnic')"
                   :key="item.value"
@@ -607,7 +607,7 @@
               <el-form-item label="工资卡开户银行" :prop="'rosterBankCardsDTOList[' + index_bank + '].payrollCardOpenBank'"
                             :rules="[
                ]">
-                <el-select v-model="inputForm.rosterBankCardsDTOList[index_bank].payrollCardOpenBank" placeholder="请选择工资卡开户银行"  style="width: 100%;">
+                <el-select v-model="inputForm.rosterBankCardsDTOList[index_bank].payrollCardOpenBank" filterable placeholder="请选择工资卡开户银行"  style="width: 100%;">
                   <el-option
                     v-for="item in $dictUtils.getDictList('bank_name')"
                     :key="item.value"
@@ -1005,7 +1005,7 @@
               <el-form-item label="证书类型" :prop="'rosterCertificateDTOList[' + index_certificate + '].certType'"
                             :rules="[
                ]">
-                <el-select v-model="inputForm.rosterCertificateDTOList[index_certificate].certType" placeholder="请选择证书类型"  style="width: 100%;">
+                <el-select v-model="inputForm.rosterCertificateDTOList[index_certificate].certType" filterable placeholder="请选择证书类型"  style="width: 100%;">
                   <el-option
                     v-for="item in $dictUtils.getDictList('cert_type')"
                     :key="item.value"
@@ -1127,8 +1127,9 @@
             <el-col :span="12">
               <el-form-item label="证书类型" :prop="'certDTOList[' + index_certDto + '].type'"
                             :rules="[
+                            {required: true, message: '证书类型不能为空', trigger: 'change'}
              ]">
-                <el-select v-model="inputForm.certDTOList[index_certDto].type" @change="changeType(index_certDto)" placeholder="请选择证书类型"  style="width: 100%;">
+                <el-select v-model="inputForm.certDTOList[index_certDto].type" filterable @change="changeType(index_certDto)" placeholder="请选择证书类型"  style="width: 100%;">
                   <el-option
                     v-for="item in $dictUtils.getDictList('sys_cert_type')"
                     :key="item.value"
@@ -1141,6 +1142,7 @@
             <el-col :span="12">
               <el-form-item label="证书编号" :prop="'certDTOList[' + index_certDto + '].no'"
                             :rules="[
+                            {required: true, message: '证书编号不能为空', trigger: 'change'}
              ]">
                 <el-input v-model="inputForm.certDTOList[index_certDto].no" placeholder="请填写证书编号"     clearable></el-input>
               </el-form-item>
@@ -1181,6 +1183,7 @@
             <el-col :span="12">
               <el-form-item label="到期日期" :prop="'certDTOList[' + index_certDto + '].expireDate'"
                             :rules="[
+                            {required: true, message: '到期日期不能为空', trigger: 'blur'}
              ]">
                 <el-date-picker
                   placement="bottom-start"
@@ -1318,7 +1321,7 @@
               <el-form-item label="民族" prop="ethnic"
                             :rules="[
                  ]">
-                <el-select v-model="inputForm.ethnic" placeholder="请选择民族" style="width:100%;">
+                <el-select v-model="inputForm.ethnic" filterable placeholder="请选择民族" style="width:100%;">
                   <el-option
                     v-for="item in $dictUtils.getDictList('ethnic')"
                     :key="item.value"
@@ -1846,6 +1849,8 @@
           companyId: '',
           manageOfficeIds: ''
         }
+        this.keydiv1 = Math.random()
+        this.keydiv2 = Math.random()
         this.visible = false
       },
       queryAllPosition () {
@@ -2161,85 +2166,87 @@
           // 给所属公司一个默认值
           if (this.commonJS.isNotEmpty(this.companyList)) {
             if (this.commonJS.isNotEmpty(this.companyList[0])) {
-              this.inputForm.companyId = this.companyList[0].id
+              if (this.commonJS.isEmpty(this.inputForm.companyId)) {
+                this.inputForm.companyId = this.companyList[0].id
+              }
             }
           }
         }
         // 切换为游客
-        if (event === '2') {
-          this.inputForm = {
-            id: this.inputForm.id,
-            name: this.inputForm.name,
-            certificatesType: this.inputForm.certificatesType,
-            idCard: this.inputForm.idCard,
-            certificatesFront: this.inputForm.certificatesFront,
-            certificatesBack: this.inputForm.certificatesBack,
-            mobile: this.inputForm.mobile,
-            sex: this.inputForm.sex,
-            ethnic: this.inputForm.ethnic,
-            bloodType: this.inputForm.bloodType,
-            qq: this.inputForm.qq,
-            wechat: this.inputForm.wechat,
-            email: this.inputForm.email,
-            remarks: this.inputForm.remarks,
-            certificatesFrontLsUrl: this.inputForm.certificatesFrontLsUrl,
-            certificatesBackLsUrl: this.inputForm.certificatesBackLsUrl,
-            officeId: '',
-            jobPositionId: '',
-            positionId: '',
-            rankId: '',
-            jobNo: '',
-            contractType: '',
-            workerType: '',
-            onboardingDate: '',
-            seniority: '',
-            contractCompany: '',
-            birthDate: '',
-            workPlace: '',
-            contactAddress: '',
-            employmentSituation: '',
-            workingHour: '',
-            accountType: '',
-            accountAddr: '',
-            origin: '',
-            liveAddr: '',
-            highestEducation: '',
-            politicalFace: '',
-            maritalStatus: '',
-            emergencyContactName: '',
-            emergencyContactTel: '',
-            spouseName: '',
-            childName: '',
-            rosterContractDTO: {
-              baseId: '',
-              beginDate: '',
-              endDate: '',
-              workEmail: '',
-              workMobile: '',
-              probationPeriodEndDate: '',
-              probationPeriodMonth: ''
-            },
-            rosterBankCardsDTOList: [],
-            rosterEducateDTOList: [],
-            rosterWorkDTOList: [],
-            rosterFamilyDTOList: [],
-            rosterCertificateDTOList: [],
-            rosterFilesDTOList: [],
-            headshot: '',
-            headshotLsUrl: '',
-            rosterLeadershipDTO: {
-              baseId: '',
-              debriefType: '',
-              supervisorId: ''
-            },
-            personType: '',
-            certDTOList: [],
-            postIdList: [],
-            roleIdList: [],
-            companyId: '',
-            manageOfficeIds: ''
-          }
-        }
+        // if (event === '2') {
+        //   this.inputForm = {
+        //     id: this.inputForm.id,
+        //     name: this.inputForm.name,
+        //     certificatesType: this.inputForm.certificatesType,
+        //     idCard: this.inputForm.idCard,
+        //     certificatesFront: this.inputForm.certificatesFront,
+        //     certificatesBack: this.inputForm.certificatesBack,
+        //     mobile: this.inputForm.mobile,
+        //     sex: this.inputForm.sex,
+        //     ethnic: this.inputForm.ethnic,
+        //     bloodType: this.inputForm.bloodType,
+        //     qq: this.inputForm.qq,
+        //     wechat: this.inputForm.wechat,
+        //     email: this.inputForm.email,
+        //     remarks: this.inputForm.remarks,
+        //     certificatesFrontLsUrl: this.inputForm.certificatesFrontLsUrl,
+        //     certificatesBackLsUrl: this.inputForm.certificatesBackLsUrl,
+        //     officeId: '',
+        //     jobPositionId: '',
+        //     positionId: '',
+        //     rankId: '',
+        //     jobNo: '',
+        //     contractType: '',
+        //     workerType: '',
+        //     onboardingDate: '',
+        //     seniority: '',
+        //     contractCompany: '',
+        //     birthDate: '',
+        //     workPlace: '',
+        //     contactAddress: '',
+        //     employmentSituation: '',
+        //     workingHour: '',
+        //     accountType: '',
+        //     accountAddr: '',
+        //     origin: '',
+        //     liveAddr: '',
+        //     highestEducation: '',
+        //     politicalFace: '',
+        //     maritalStatus: '',
+        //     emergencyContactName: '',
+        //     emergencyContactTel: '',
+        //     spouseName: '',
+        //     childName: '',
+        //     rosterContractDTO: {
+        //       baseId: '',
+        //       beginDate: '',
+        //       endDate: '',
+        //       workEmail: '',
+        //       workMobile: '',
+        //       probationPeriodEndDate: '',
+        //       probationPeriodMonth: ''
+        //     },
+        //     rosterBankCardsDTOList: [],
+        //     rosterEducateDTOList: [],
+        //     rosterWorkDTOList: [],
+        //     rosterFamilyDTOList: [],
+        //     rosterCertificateDTOList: [],
+        //     rosterFilesDTOList: [],
+        //     headshot: '',
+        //     headshotLsUrl: '',
+        //     rosterLeadershipDTO: {
+        //       baseId: '',
+        //       debriefType: '',
+        //       supervisorId: ''
+        //     },
+        //     personType: '',
+        //     certDTOList: [],
+        //     postIdList: [],
+        //     roleIdList: [],
+        //     companyId: '',
+        //     manageOfficeIds: ''
+        //   }
+        // }
         this.keydiv1 = Math.random()
         this.keydiv2 = Math.random()
       },

src/views/modules/roster/RosterList.vue

@@ -2,22 +2,61 @@
   <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="name">
+      <el-form-item label="姓名" prop="name">
         <el-input size="small" v-model="searchForm.name" placeholder="姓名" clearable></el-input>
       </el-form-item>
-      <el-form-item prop="mobile">
+      <el-form-item label="电话号码" prop="mobile">
         <el-input size="small" v-model="searchForm.mobile" placeholder="手机号码" clearable></el-input>
       </el-form-item>
-      <el-form-item prop="idCard">
+      <el-form-item label="证件号" prop="idCard">
         <el-input size="small" v-model="searchForm.idCard" placeholder="证件号" clearable></el-input>
       </el-form-item>
+      <el-form-item v-if="showHideItem" label="部门" prop="officeSelect">
+        <SelectTree
+          ref="officeTree"
+          :props="{
+                  value: 'id',             // ID字段名
+                  label: 'name',         // 显示名称
+                  children: 'children'    // 子级字段名
+                }"
+          size="small"
+          :url="`/sys/office/treeData?type=2`"
+          :value="searchForm.officeSelect"
+          :clearable="true"
+          :accordion="true"
+          @getValue="(value) => {searchForm.officeSelect=value}"/>
+      </el-form-item>
+      <el-form-item v-if="showHideItem" label="岗位" prop="postSelect">
+        <el-select v-model="searchForm.postSelect" size="small" filterable @change="$forceUpdate()" style="width:100%" placeholder="岗位" clearable>
+          <el-option
+            v-for="item in postList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item v-if="showHideItem" label="入职日期" prop="dates">
+        <el-date-picker
+          style=""
+          placement="bottom-start"
+          format="yyyy-MM-dd HH:mm:ss"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          v-model="searchForm.dates"
+          type="datetimerange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期">
+        </el-date-picker>
+      </el-form-item>
       <el-form-item>
+        <el-button type="default" @click="showHide" size="small" :icon="showHideIcon">{{showHideName}}</el-button>
         <el-button type="primary" @click="refreshList()" size="small" icon="el-icon-search">查询</el-button>
         <el-button @click="resetSearch()" size="small" icon="el-icon-refresh-right">重置</el-button>
       </el-form-item>
     </el-form>
     <div class="bg-white top">
-      <vxe-toolbar :refresh="{query: refreshList}" import custom>
+      <vxe-toolbar :refresh="{query: refreshList}" import export custom>
         <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>
@@ -43,7 +82,14 @@
           highlight-hover-row
           :menu-config="{}"
           :print-config="{}"
-          :export-config="{}"
+          :export-config="{
+                    remote: true,
+                    filename: `花名册数据${moment(new Date()).format('YYYY-MM-DD')}`,
+                    sheetName: `花名册数据${moment(new Date()).format('YYYY-MM-DD')}`,
+                    exportMethod: exportMethod,
+                    types: ['xlsx'],
+                    modes: ['current', 'selected', 'all']
+                  }"
           @sort-change="sortChangeHandle"
           :sort-config="{remote:true}"
           :data="dataList"
@@ -107,13 +153,21 @@
 <script>
   import RosterService from '@/api/roster/RosterService'
   import RosterForm from './RosterForm'
+  import PostService from '@/api/sys/PostService'
+  import SelectTree from '@/components/treeSelect/treeSelect.vue'
   export default {
     data () {
       return {
+        showHideItem: false,
+        showHideIcon: 'el-icon-arrow-down',
+        showHideName: '展示',
         searchForm: {
           name: '',
           idCard: '',
-          mobile: ''
+          mobile: '',
+          officeSelect: '',
+          postSelect: '',
+          dates: []
         },
         dataList: [],
         tablePage: {
@@ -128,21 +182,38 @@
         activeValue: '',
         showButton: false,
         disableButton: true,
-        personType: ''
+        personType: '',
+        postList: []
       }
     },
     rosterService: null,
+    postService: null,
     created () {
       this.rosterService = new RosterService()
+      this.postService = new PostService()
       this.addTabs()
+      this.queryAllPost()
     },
     components: {
-      RosterForm
+      RosterForm,
+      SelectTree
     },
     activated () {
+      this.queryAllPost()
       this.refreshList()
     },
     methods: {
+      showHide () {
+        if (this.showHideItem === false) {
+          this.showHideItem = true
+          this.showHideIcon = 'el-icon-arrow-up'
+          this.showHideName = '隐藏'
+        } else {
+          this.showHideItem = false
+          this.showHideIcon = 'el-icon-arrow-down'
+          this.showHideName = '展示'
+        }
+      },
       // 获取数据列表
       refreshList () {
         this.loading = true
@@ -268,6 +339,36 @@
           this.refreshList()
           this.loading = false
         })
+      },
+      queryAllPost () {  //  查询所有岗位
+        this.postService.list({current: 1, size: -1}).then(({data}) => {
+          this.postList = data.records
+        })
+      },
+      // 自定义服务端导出
+      exportMethod ({ options }) {
+        // 传给服务端的参数
+        const params = {
+          'current': this.tablePage.currentPage,
+          'size': this.tablePage.pageSize,
+          'orders': this.tablePage.orders,
+          ...this.searchForm,
+          filename: options.filename,
+          sheetName: options.sheetName,
+          isHeader: options.isHeader,
+          original: options.original,
+          mode: options.mode,
+          selectIds: options.mode === 'selected' ? options.data.map(item => item.id) : [],
+          exportFields: options.columns.map(column => column.property)
+        }
+        return this.rosterService.exportFile(params).then((res) => {
+          // 将二进制流文件写入excel表，以下为重要步骤
+          this.$utils.downloadExcel(res.data, options.filename)
+        }).catch(function (err) {
+          if (err.response) {
+            console.log(err.response)
+          }
+        })
       }
     }
   }