花名册建表以及基础信息功能增删改查功能

src/api/position/JobPositionService.js

@@ -29,6 +29,13 @@ export default class JobPositionService {
       params: {id: id}
     })
   }
+  getJobPositionByOff (id) {
+    return request({
+      url: '/job/job_position/getJobPositionByOff',
+      method: 'get',
+      params: {id: id}
+    })
+  }
   queryAllPosition () {
     return request({
       url: '/job/job_position/queryAllPosition',

src/api/rank/RankService.js

@@ -15,6 +15,13 @@ export default class RankService {
       params: {id: id}
     })
   }
+  getRankByPosition (id) {
+    return request({
+      url: '/rank/rank/getRankByPosition',
+      method: 'get',
+      params: {id: id}
+    })
+  }
   save (inputForm) {
     return request({
       url: `/rank/rank/save`,

src/api/roster/RosterService.js

@@ -0,0 +1,32 @@
+import request from '@/utils/httpRequest'
+
+export default class RosterService {
+  list (params) {
+    return request({
+      url: '/roster/base/list',
+      method: 'get',
+      params: params
+    })
+  }
+  queryById (id) {
+    return request({
+      url: '/roster/base/queryById',
+      method: 'get',
+      params: {id: id}
+    })
+  }
+  save (inputForm) {
+    return request({
+      url: `/roster/base/save`,
+      method: 'post',
+      data: inputForm
+    })
+  }
+  delete (ids) {
+    return request({
+      url: '/roster/base/delete',
+      method: 'delete',
+      params: {ids: ids}
+    })
+  }
+}

src/components/treeSelect/treeSelect.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-select :value="valueTitle" :size="size"  :disabled="disabled" :clearable="clearable" :placeholder="placeholderText" @clear="clearHandle">
+  <el-select :value="valueTitle" :size="size" :disabled="disabled" :clearable="clearable" :placeholder="placeholderText" @clear="clearHandle">
     <el-option :value="valueTitle"  :label="valueTitle" class="options">
       <el-tree  id="tree-option"
         ref="selectTree"
@@ -8,7 +8,7 @@
         :show-checkbox="showCheckbox"
         :props="props"
         highlight-current
-        :node-key="props.value"    
+        :node-key="props.value"
         :default-expanded-keys="defaultExpandedKey"
         @check-change="handleCheckChange"
         @node-click="handleNodeClick">
@@ -179,7 +179,7 @@ export default {
         return
       }
       if (node['disabled']) {
-        this.$message.warning('节点（' + node[this.props.label] + '）被禁止选择，请重新选择。')
+        // this.$message.warning('节点（' + node[this.props.label] + '）被禁止选择，请重新选择。')
         return
       }
       if (this.isOnlySelectLeaf && node.children.length > 0) {
@@ -285,4 +285,4 @@ export default {
   .el-tree-node__content:hover{
     background-color: #f5f7fa;
   } */
-</style>
+</style>

src/views/modules/roster/Roster.vue

@@ -0,0 +1,33 @@
+<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

@@ -0,0 +1,622 @@
+<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
+  <div>
+    <el-dialog
+      :title="title"
+      :close-on-click-modal="false"
+      v-dialogDrag
+      width="1000px"
+      @close="close"
+      @keyup.enter.native="doSubmit"
+      :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-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-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item prop="officeId" :rules="[{required: true, message: '部门不能为空', trigger: 'blur'}]" label="部门">
+              <SelectTree
+                ref="officeTree"
+                :props="{
+                  value: 'id',             // ID字段名
+                  label: 'name',         // 显示名称
+                  children: 'children'    // 子级字段名
+                }"
+
+                :url="`/sys/office/treeData?type=2`"
+                :value="inputForm.officeId"
+                :clearable="true"
+                :accordion="true"
+                @getValue="(value) => {inputForm.officeId=value}"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="职位" prop="jobPositionId"
+                          :rules="[
+                 ]">
+              <el-select v-model="inputForm.jobPositionId" style="width:100%" placeholder="请选择职位">
+                <el-option
+                  v-for="item in jobPositionList"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="职务" prop="positionId"
+                          :rules="[
+                 ]">
+              <el-select v-model="inputForm.positionId" style="width:100%" placeholder="请选择职务">
+                <el-option
+                  v-for="item in positionList"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="职级" prop="rankId"
+                          :rules="[
+                 ]">
+              <el-select v-model="inputForm.rankId" style="width:100%" placeholder="请选择职级">
+                <el-option
+                  v-for="item in rankList"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="工号" prop="jobNo"
+                          :rules="[
+                 ]">
+              <el-input v-model="inputForm.jobNo" placeholder="请填写工号"     ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="证件类型" prop="certificatesType"
+                          :rules="[{required: true, message: '证件类型不能为空', trigger: 'blur'}
+                 ]">
+              <el-select v-model="inputForm.certificatesType" placeholder="请选择证件类型" style="width:100%;">
+                <el-option
+                  v-for="item in $dictUtils.getDictList('certificates_type')"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="证件号" prop="idCard"
+                          :rules="[{required: true, message: '证件号不能为空', trigger: 'blur'}
+                 ]">
+              <el-input v-model="inputForm.idCard" placeholder="请填写证件号"     ></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-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-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-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="合同类型" prop="contractType"
+                          :rules="[
+                 ]">
+              <el-select v-model="inputForm.contractType" placeholder="请选择合同类型" style="width:100%;">
+                <el-option
+                  v-for="item in $dictUtils.getDictList('contract_type')"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="员工类型" prop="workerType"
+                          :rules="[{required: true, message: '员工类型不能为空', trigger: 'blur'}
+                 ]">
+              <el-select v-model="inputForm.workerType" placeholder="请选择员工类型" style="width:100%;">
+                <el-option
+                  v-for="item in $dictUtils.getDictList('worker_type')"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="入职日期" prop="onboardingDate"
+                          :rules="[{required: true, message: '入职日期不能为空', trigger: 'blur'}
+                 ]">
+              <el-date-picker
+                style="width: 100%"
+                v-model="inputForm.onboardingDate"
+                type="date"
+                placeholder="选择入职日期">
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="历史工龄" prop="seniority"
+                          :rules="[
+                 ]">
+              <el-input v-model="inputForm.seniority" placeholder="请填写历史工龄"     ></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-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="性别" prop="sex"
+                          :rules="[
+                 ]">
+              <el-select v-model="inputForm.sex" placeholder="请选择性别" style="width:100%;">
+                <el-option
+                  v-for="item in $dictUtils.getDictList('sex')"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="出生日期" prop="birthDate"
+                          :rules="[{required: true, message: '出生日期不能为空', trigger: 'blur'}
+                 ]">
+              <el-date-picker
+                style="width: 100%"
+                v-model="inputForm.birthDate"
+                type="date"
+                placeholder="选择出生日期">
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="工作地点" prop="workPlace"
+                          :rules="[
+                 ]">
+              <el-input v-model="inputForm.workPlace" placeholder="请填写工作地点"     ></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-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="入职年度就业情形" prop="employmentSituation"
+                          :rules="[
+                 ]">
+              <el-select v-model="inputForm.employmentSituation" placeholder="请选择入职年度就业情形" style="width:100%;">
+                <el-option
+                  v-for="item in $dictUtils.getDictList('employment_situation')"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="工时制度" prop="workingHour"
+                          :rules="[
+                 ]">
+              <el-select v-model="inputForm.workingHour" placeholder="请选择入职年度就业情形" style="width:100%;">
+                <el-option
+                  v-for="item in $dictUtils.getDictList('working_hour_type')"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="民族" prop="ethnic"
+                          :rules="[
+                 ]">
+              <el-input v-model="inputForm.ethnic" placeholder="请填写民族"     ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="户口类型" prop="accountType"
+                          :rules="[
+                 ]">
+              <el-select v-model="inputForm.accountType" placeholder="请选择户口类型" style="width:100%;">
+                <el-option
+                  v-for="item in $dictUtils.getDictList('account_type')"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="户口所在地" prop="accountAddr"
+                          :rules="[
+                 ]">
+              <el-input v-model="inputForm.accountAddr" placeholder="请填写户口所在地"     ></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-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-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="最高学历" prop="highestEducation"
+                          :rules="[
+                 ]">
+              <el-select v-model="inputForm.highestEducation" placeholder="请选择最高学历" style="width:100%;">
+                <el-option
+                  v-for="item in $dictUtils.getDictList('highest_education')"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="政治面貌" prop="politicalFace"
+                          :rules="[
+                 ]">
+              <el-select v-model="inputForm.politicalFace" placeholder="请选择政治面貌" style="width:100%;">
+                <el-option
+                  v-for="item in $dictUtils.getDictList('political_face')"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="婚姻状况" prop="maritalStatus"
+                          :rules="[
+                 ]">
+              <el-select v-model="inputForm.maritalStatus" placeholder="请选择婚姻状况" style="width:100%;">
+                <el-option
+                  v-for="item in $dictUtils.getDictList('marital_status')"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="血型" prop="bloodType"
+                          :rules="[
+                 ]">
+              <el-select v-model="inputForm.bloodType" placeholder="请选择血型" style="width:100%;">
+                <el-option
+                  v-for="item in $dictUtils.getDictList('blood_type')"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="紧急联系人姓名" prop="emergencyContactName"
+                          :rules="[
+                 ]">
+              <el-input v-model="inputForm.emergencyContactName" placeholder="请填写紧急联系人姓名"     ></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-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-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-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-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-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-form-item>
+          </el-col>
+          <el-col :span="21">
+            <el-form-item label="备注" prop="remarks"
+                          :rules="[
+                 ]">
+              <el-input type="textarea" style="width:100%" maxlength="1000" v-model="inputForm.remarks" placeholder="请填写备注"     ></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+      </el-form>
+      <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>
+    </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  import RankService from '@/api/rank/RankService'
+  import SelectTree from '@/components/treeSelect/treeSelect.vue'
+  import RankSystemTableService from '@/api/rank/RankSystemTableService'
+  import JobPositionService from '@/api/position/JobPositionService'
+  import RosterService from '@/api/roster/RosterService'
+  export default {
+    data () {
+      return {
+        title: '',
+        method: '',
+        visible: false,
+        loading: false,
+        inputForm: {
+          name: '',
+          officeId: '',
+          jobPositionId: '',
+          positionId: '',
+          rankId: '',
+          jobNo: '',
+          certificatesType: '',
+          idCard: '',
+          certificatesFront: '',
+          certificatesBack: '',
+          mobile: '',
+          contractType: '',
+          workerType: '',
+          onboardingDate: '',
+          seniority: '',
+          contractCompany: '',
+          sex: '',
+          birthDate: '',
+          workPlace: '',
+          contactAddress: '',
+          employmentSituation: '',
+          workingHour: '',
+          ethnic: '',
+          accountType: '',
+          accountAddr: '',
+          origin: '',
+          liveAddr: '',
+          highestEducation: '',
+          politicalFace: '',
+          maritalStatus: '',
+          bloodType: '',
+          emergencyContactName: '',
+          emergencyContactTel: '',
+          spouseName: '',
+          childName: '',
+          qq: '',
+          wechat: '',
+          email: '',
+          remarks: ''
+        },
+        jobPositionList: [],
+        positionList: [],
+        rankList: []
+      }
+    },
+    rankService: null,
+    rankSystemTableService: null,
+    jobPositionService: null,
+    rosterService: null,
+    watch: {
+      'inputForm.officeId': {
+        handler () {
+          this.changeOffice(this.inputForm.officeId)
+        }
+      },
+      'inputForm.positionId': {
+        handler () {
+          this.changePosition(this.inputForm.positionId)
+        }
+      }
+    },
+    created () {
+      this.rankService = new RankService()
+      this.rankSystemTableService = new RankSystemTableService()
+      this.jobPositionService = new JobPositionService()
+      this.rosterService = new RosterService()
+    },
+    components: {
+      SelectTree
+    },
+    methods: {
+      init (method, id) {
+        this.queryAllPosition()
+        this.method = method
+        this.inputForm = {
+          name: '',
+          officeId: '',
+          jobPositionId: '',
+          positionId: '',
+          rankId: '',
+          jobNo: '',
+          certificatesType: '',
+          idCard: '',
+          certificatesFront: '',
+          certificatesBack: '',
+          mobile: '',
+          contractType: '',
+          workerType: '',
+          onboardingDate: '',
+          seniority: '',
+          contractCompany: '',
+          sex: '',
+          birthDate: '',
+          workPlace: '',
+          contactAddress: '',
+          employmentSituation: '',
+          workingHour: '',
+          ethnic: '',
+          accountType: '',
+          accountAddr: '',
+          origin: '',
+          liveAddr: '',
+          highestEducation: '',
+          politicalFace: '',
+          maritalStatus: '',
+          bloodType: '',
+          emergencyContactName: '',
+          emergencyContactTel: '',
+          spouseName: '',
+          childName: '',
+          qq: '',
+          wechat: '',
+          email: '',
+          remarks: ''
+        }
+        this.inputForm.id = id
+        if (method === 'add') {
+          this.title = `新建花名册`
+        } else if (method === 'edit') {
+          this.title = '修改花名册'
+        } else if (method === 'view') {
+          this.title = '查看花名册'
+        }
+        this.visible = true
+        this.loading = false
+        this.$nextTick(() => {
+          this.$refs.inputForm.resetFields()
+          if (method === 'edit' || method === 'view') { // 修改或者查看
+            this.loading = true
+            this.rosterService.queryById(this.inputForm.id).then(({data}) => {
+              this.inputForm = this.recover(this.inputForm, data)
+              this.inputForm = JSON.parse(JSON.stringify(this.inputForm))
+              this.loading = false
+            })
+          }
+        })
+      },
+      // 表单提交
+      doSubmit () {
+        this.$refs['inputForm'].validate((valid) => {
+          if (valid) {
+            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')
+            this.rosterService.save(this.inputForm).then(({data}) => {
+              this.close()
+              this.$message.success(data)
+              this.$emit('refreshDataList')
+              this.loading = false
+            }).catch(() => {
+              this.loading = false
+            })
+          }
+        })
+      },
+      close () {
+        this.$refs.inputForm.resetFields()
+        this.visible = false
+      },
+      queryAllPosition () {
+        this.rankSystemTableService.queryAllPosition().then(({data}) => {
+          this.positionList = JSON.parse(JSON.stringify(data))
+        })
+      },
+      getJobPositionByOff () {
+        const id = this.inputForm.officeId
+        if (id !== null && id !== undefined && id !== '') {
+          this.jobPositionService.getJobPositionByOff(id).then(({data}) => {
+            this.jobPositionList = JSON.parse(JSON.stringify(data))
+          })
+        } else {
+          this.jobPositionList = []
+        }
+      },
+      changeOffice () {
+        this.getJobPositionByOff()
+      },
+      getRankByPosition () {
+        const id = this.inputForm.positionId
+        if (id !== null && id !== undefined && id !== '') {
+          this.rankService.getRankByPosition(id).then(({data}) => {
+            this.rankList = JSON.parse(JSON.stringify(data))
+          })
+        } else {
+          this.rankList = []
+        }
+      },
+      changePosition () {
+        this.getRankByPosition()
+      }
+    }
+  }
+</script>

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

@@ -0,0 +1,173 @@
+<template>
+  <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>
+      <el-form-item>
+        <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}" 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>
+        </template>
+      </vxe-toolbar>
+      <div style="height: calc(100% - 80px);">
+        <vxe-table
+          border="inner"
+          auto-resize
+          resizable
+          height="auto"
+          :loading="loading"
+          size="small"
+          ref="rosterTable"
+          show-header-overflow
+          show-overflow
+          highlight-hover-row
+          :menu-config="{}"
+          :print-config="{}"
+          :export-config="{}"
+          @sort-change="sortChangeHandle"
+          :sort-config="{remote:true}"
+          :data="dataList"
+          :import-config="{}"
+          :checkbox-config="{}">
+          <vxe-column type="seq" width="40"></vxe-column>
+          <vxe-column type="checkbox"  width="40px"></vxe-column>
+          <vxe-column title="姓名" field="name">
+            <template slot-scope="scope">
+              <el-link  type="primary" :underline="false" v-if="hasPermission('roster:base:view')"  @click="view(scope.row.id)">{{scope.row.name}}</el-link>
+              <span v-else>{{scope.row.name}}</span>
+            </template>
+          </vxe-column>
+          <vxe-column width="200px"  title="证件号" field="idCard" > </vxe-column>
+          <vxe-column width="200px"  title="入职日期" field="onboardingDate" > </vxe-column>
+
+          <vxe-column title="操作" width="200px" fixed="right" align="center">
+            <template  slot-scope="scope">
+              <el-button v-if="hasPermission('roster:base:view')" type="text" icon="el-icon-view" size="small" @click="view(scope.row.id)">查看</el-button>
+              <el-button v-if="hasPermission('roster:base:edit')" type="text" icon="el-icon-edit" size="small" @click="edit(scope.row.id)">修改</el-button>
+              <el-button v-if="hasPermission('roster:base:del')" type="text"  icon="el-icon-delete" size="small" @click="del(scope.row.id)">删除</el-button>
+            </template>
+          </vxe-column>
+        </vxe-table>
+        <vxe-pager
+          background
+          size="small"
+          :current-page="tablePage.currentPage"
+          :page-size="tablePage.pageSize"
+          :total="tablePage.total"
+          :page-sizes="[10, 20, 100, 1000, {label: '全量数据', value: 1000000}]"
+          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
+          @page-change="currentChangeHandle">
+        </vxe-pager>
+      </div>
+    </div>
+    <!-- 弹窗, 新增 / 修改 -->
+    <RosterForm  ref="rosterForm" @refreshDataList="refreshList"></RosterForm>
+  </div>
+</template>
+
+<script>
+  import RosterService from '@/api/roster/RosterService'
+  import RosterForm from './RosterForm'
+  export default {
+    data () {
+      return {
+        searchForm: {
+        },
+        dataList: [],
+        tablePage: {
+          total: 0,
+          currentPag1e: 1,
+          pageSize: 10,
+          orders: []
+        },
+        loading: false
+      }
+    },
+    rosterService: null,
+    created () {
+      this.rosterService = new RosterService()
+    },
+    components: {
+      RosterForm
+    },
+    activated () {
+      this.refreshList()
+    },
+
+    methods: {
+      // 获取数据列表
+      refreshList () {
+        this.loading = true
+        this.rosterService.list({
+          'current': this.tablePage.currentPage,
+          'size': this.tablePage.pageSize,
+          'orders': this.tablePage.orders,
+          ...this.searchForm
+        }).then(({data}) => {
+          this.dataList = data.records
+          this.tablePage.total = data.total
+          this.loading = false
+        })
+      },
+      // 当前页
+      currentChangeHandle ({ currentPage, pageSize }) {
+        this.tablePage.currentPage = currentPage
+        this.tablePage.pageSize = pageSize
+        this.refreshList()
+      },
+      // 排序
+      sortChangeHandle (column) {
+        this.tablePage.orders = []
+        if (column.order != null) {
+          this.tablePage.orders.push({column: this.$utils.toLine(column.property), asc: column.order === 'asc'})
+        }
+        this.refreshList()
+      },
+      // 新增
+      add () {
+        this.$refs.rosterForm.init('add', '')
+      },
+      // 修改
+      edit (id) {
+        id = id || this.$refs.rosterTable.getCheckboxRecords().map(item => {
+          return item.id
+        })[0]
+        this.$refs.rosterForm.init('edit', id)
+      },
+      // 查看
+      view (id) {
+        this.$refs.rosterForm.init('view', id)
+      },
+      // 删除
+      del (id) {
+        let ids = id || this.$refs.rosterTable.getCheckboxRecords().map(item => {
+          return item.id
+        }).join(',')
+        this.$confirm(`确定删除所选项吗?`, '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          this.loading = true
+          this.rosterService.delete(ids).then(({data}) => {
+            this.$message.success(data)
+            this.refreshList()
+            this.loading = false
+          })
+        })
+      },
+      resetSearch () {
+        this.$refs.searchForm.resetFields()
+        this.refreshList()
+      }
+    }
+  }
+</script>