feat(remind): 优化合同和保险提醒页面的导出功能

yubo

2026-03-10 757c9e97c980118cabb5a2a08c4fd35bbbcaa062

feat(remind): 优化合同和保险提醒页面的导出功能

- 将导出按钮方法重命名为 handleExport，提高代码可读性
- 调整表格列宽度以更好地展示数据内容
- 移除固定备注列宽限制，允许自适应
- 添加导出配置对象，统一管理导出字段和参数
- 在保险提醒页面替换原有导出对话框为通用组件
- 实现标准化的导出确认处理流程
- 新增社保电脑号、转正日期和转正状态导出选项
- 统一各页面导出功能实现方式，提升维护性

 src/components/ExportEmpBase.vue

@@ -55,11 +55,14 @@
  { label: '户籍地址', value: 'censusAddress' },
  { label: '入职日期', value: 'entryDate' },
  { label: '社保档位', value: 'insuranceTypeName' },
  { label: '社保电脑号', value: 'socialNumb' },
  { label: '银行名称', value: 'bankName' },
  { label: '银行账号', value: 'bankNumb' },
  { label: '保安员证号', value: 'guardNumb' },
  { label: '档案状态', value: 'archivesStatusName' },
  { label: '合同状态', value: 'contractStatusName' },
  { label: '转正日期', value: 'probationDate' },
  { label: '转正状态', value: 'probationStatusName' },
  { label: '工作证', value: 'empCardStatusName' },
  { label: '员工手册', value: 'handbookStatusName' },
  { label: '相关证件', value: 'certificateListName' },

 src/views/remind/contract.vue

@@ -11,7 +11,7 @@
      <el-main style="height: 85%;">
        <el-row style="margin: 10px 0 10px 0;">
          <el-col :span="24">
            <el-button type="primary" class="hr-but-all" @click="showDcyg(0)">导出EXCEL</el-button>
            <el-button type="primary" class="hr-but-all" @click="handleExport">导出 EXCEL</el-button>
          </el-col>
        </el-row>
        <el-table
@@ -36,10 +36,10 @@
              >不续签</span>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip prop="empNumb" label="员工编号" />
          <el-table-column show-overflow-tooltip prop="allDeptName" label="部门（护卫点）" width="300" />
          <el-table-column show-overflow-tooltip prop="jobName" label="岗位" width="80" />
          <el-table-column show-overflow-tooltip prop="empName" label="姓名" width="100" />
          <el-table-column show-overflow-tooltip prop="empNumb" label="员工编号" width="120" />
          <el-table-column show-overflow-tooltip prop="allDeptName" label="部门（护卫点）" width="320" />
          <el-table-column show-overflow-tooltip prop="jobName" label="岗位" width="120" />
          <el-table-column show-overflow-tooltip prop="empName" label="姓名" width="120" />
          <el-table-column show-overflow-tooltip prop="certificateNumb" label="身份证号码" width="160" />
          <el-table-column show-overflow-tooltip prop="signingDate" label="合同签订日期" width="110" />
          <el-table-column show-overflow-tooltip prop="endDate" label="合同结束日期" width="110" />
@@ -51,7 +51,7 @@
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip prop="transactor" label="合同办理人" width="100" />
          <el-table-column show-overflow-tooltip prop="remark" label="备注" width="160" />
          <el-table-column show-overflow-tooltip prop="remark" label="备注" />
        </el-table>
        <pagination
          v-show="total>0"
@@ -226,6 +226,23 @@
        beginDate: [{ required: true, message: '请选择合同开始日期', trigger: 'change' }],
        endDate: [{ required: true, validator: this.endDate }],
        remark: [{ max: 512, message: '长度不超过512个字符', trigger: 'blur' }]
      },
      exportConfig: {
        selectedFields: [
          'empNumb', // 从 table 列提取
          'allDeptName',
          'jobName',
          'empName',
          'certificateNumb',
          'signingDate',
          'endDate',
          'contractPeriod',
          'diffDay',
          'transactor',
          'remark'
        ],
        exportUrl: 'hr/empContractInfo/export',
        fileName: '合同到期提醒.xls'
      }
    }
  },
@@ -374,6 +391,24 @@
          })
        }
      })
    },
    // 导出合同信息
    handleExport() {
      const params = { ...this.queryParams }
      params.delFlag = 0
      params.empStatus = 0
      params.exportField = this.exportConfig.selectedFields.join(',')

      this.$download(
        'hr/empContractInfo/export',
        params,
        '合同到期提醒.xls'
      ).then(() => {
        this.$message({
          message: '下载成功!',
          type: 'success'
        })
      })
    }
  }
}

 src/views/remind/insurance5.vue

@@ -56,7 +56,7 @@
            show-overflow-tooltip
            prop="empNumb"
            label="编号"
            width="80"
            width="120"
            sortable="custom"
            :sort-orders="['ascending', 'descending']"
          />
@@ -64,7 +64,6 @@
            show-overflow-tooltip
            prop="allDeptName"
            label="部门（护卫点）"
            width="320"
            sortable="custom"
            :sort-orders="['ascending', 'descending']"
          />
@@ -100,18 +99,17 @@
            show-overflow-tooltip
            prop="nativePlace"
            label="籍贯"
            width="70"
            width="150"
            :formatter="nativePlaceFormat"
          />
          <el-table-column show-overflow-tooltip prop="telePhone" label="联系电话" width="110" />
          <el-table-column show-overflow-tooltip prop="empType" label="员工类型" width="80" :formatter="empTypeFormat" />
          <el-table-column
            prop="insuranceType"
            prop="insuranceTypeName"
            label="社保档位"
            width="240"
            sortable="custom"
            :sort-orders="['ascending', 'descending']"
            :formatter="insuranceTypeFormat"
          />
        </el-table>
        <pagination
@@ -124,217 +122,12 @@
        />
      </el-main>
    </el-container>
    <el-dialog title="导出员工" :visible.sync="dialogShowDcyg" width="40%">
      <div style="font-size: 16px;font-weight: 400;height: 35px;margin-top: -30px;color: #409EFF;">
        请勾选需要导出的字段
      </div>
      <table id="dcygTable" width="100%">
        <tr>
          <td colspan="6" style="text-align: left;">
            <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange" />
            全部字段
          </td>
        </tr>
        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
          <tr>
            <td>档案号</td>
            <td>
              <el-checkbox label="archivesNumb"><span /></el-checkbox>
            </td>
            <td>姓名</td>
            <td>
              <el-checkbox label="empName"><span /></el-checkbox>
            </td>
            <td>性别</td>
            <td>
              <el-checkbox label="sexName"><span /></el-checkbox>
            </td>
          </tr>
          <tr>
            <td>部门(护卫点)</td>
            <td>
              <el-checkbox label="allDeptName"><span /></el-checkbox>
            </td>
            <td>所属岗位</td>
            <td>
              <el-checkbox label="jobName"><span /></el-checkbox>
            </td>
            <td>员工类别</td>
            <td>
              <el-checkbox label="empTypeName"><span /></el-checkbox>
            </td>
          </tr>
          <tr>
            <td>民族</td>
            <td>
              <el-checkbox label="nationName"><span /></el-checkbox>
            </td>
            <td>身份证号码</td>
            <td>
              <el-checkbox label="certificateNumb"><span /></el-checkbox>
            </td>
            <td>年龄</td>
            <td>
              <el-checkbox label="age"><span /></el-checkbox>
            </td>
          </tr>
          <tr>
            <td>婚姻状况</td>
            <td>
              <el-checkbox label="marriageName"><span /></el-checkbox>
            </td>
            <td>身份证有效期</td>
            <td>
              <el-checkbox label="certificateValidity"><span /></el-checkbox>
            </td>
            <td>身高</td>
            <td>
              <el-checkbox label="stature"><span /></el-checkbox>
            </td>
          </tr>
          <tr>
            <td>政治面貌</td>
            <td>
              <el-checkbox label="politicsName"><span /></el-checkbox>
            </td>
            <td>出生日期</td>
            <td>
              <el-checkbox label="birthdate"><span /></el-checkbox>
            </td>
            <td>学历</td>
            <td>
              <el-checkbox label="educationName"><span /></el-checkbox>
            </td>
          </tr>
          <tr>
            <td>籍贯</td>
            <td>
              <el-checkbox label="nativePlaceName"><span /></el-checkbox>
            </td>
            <td>户籍地址</td>
            <td>
              <el-checkbox label="censusAddress"><span /></el-checkbox>
            </td>
            <td>现住址</td>
            <td>
              <el-checkbox label="currentAddress"><span /></el-checkbox>
            </td>
          </tr>
          <tr>
            <td>保安员证号</td>
            <td>
              <el-checkbox label="guardNumb"><span /></el-checkbox>
            </td>
            <td>保安员回执</td>
            <td>
              <el-checkbox label="returnReceipt"><span /></el-checkbox>
            </td>
            <td>档案情况</td>
            <td>
              <el-checkbox label="archivesStatusName"><span /></el-checkbox>
            </td>
          </tr>
          <tr>
            <td>银行名称</td>
            <td>
              <el-checkbox label="bankName"><span /></el-checkbox>
            </td>
            <td>银行账号</td>
            <td>
              <el-checkbox label="bankNumb"><span /></el-checkbox>
            </td>
            <td>电话号码</td>
            <td>
              <el-checkbox label="telePhone"><span /></el-checkbox>
            </td>
          </tr>
          <tr>
            <td>家庭成员及关系1</td>
            <td>
              <el-checkbox label="family"><span /></el-checkbox>
            </td>
            <td>员工状态</td>
            <td>
              <el-checkbox label="empStatusName"><span /></el-checkbox>
            </td>
            <td>离职日期</td>
            <td>
              <el-checkbox label="dimissionDate"><span /></el-checkbox>
            </td>
          </tr>
          <tr>
            <td>入职日期</td>
            <td>
              <el-checkbox label="entryDate"><span /></el-checkbox>
            </td>
            <td>社保档位</td>
            <td>
              <el-checkbox label="insuranceTypeName"><span /></el-checkbox>
            </td>
            <td>社保电脑号</td>
            <td>
              <el-checkbox label="socialNumb"><span /></el-checkbox>
            </td>
          </tr>
          <tr>
            <td>招聘介绍人</td>
            <td>
              <el-checkbox label="introducer"><span /></el-checkbox>
            </td>
            <td>入司工龄</td>
            <td>
              <el-checkbox label="seniority"><span /></el-checkbox>
            </td>
            <td>工作证</td>
            <td>
              <el-checkbox label="empCardStatusName"><span /></el-checkbox>
            </td>
          </tr>
          <tr>
            <td>相关证件</td>
            <td>
              <el-checkbox label="certificateListName"><span /></el-checkbox>
            </td>
            <td>家庭成员及关系2</td>
            <td>
              <el-checkbox label="urgencyPhone"><span /></el-checkbox>
            </td>
            <td>员工手册</td>
            <td>
              <el-checkbox label="handbookStatusName"><span /></el-checkbox>
            </td>
          </tr>
          <tr>
            <td>入职类型</td>
            <td>
              <el-checkbox label="entryTypeName"><span /></el-checkbox>
            </td>
            <td>离职类型</td>
            <td>
              <el-checkbox label="dimissionTypeName"><span /></el-checkbox>
            </td>
            <td>编号</td>
            <td>
              <el-checkbox label="empNumb"><span /></el-checkbox>
            </td>
          </tr>
          <tr>
            <td>年假天数</td>
            <td>
              <el-checkbox label="annualLeave"><span /></el-checkbox>
            </td>
            <td />
            <td />
            <td />
            <td />
          </tr>
        </el-checkbox-group>
      </table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showDcyg(1)">取 消</el-button>
        <el-button type="primary" @click="showDcyg(2)">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 通用导出对话框 -->
    <export-dialog
      :visible.sync="exportDialogVisible"
      :selected-fields="exportConfig.selectedFields"
      @confirm="handleExportConfirm"
    />
  </div>
</template>
<script>
@@ -343,10 +136,12 @@
import Pagination from '@/components/Pagination'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { calculateSeniority, toCardGetUserInfo } from '@/utils/myUtil'
import ExportDialog from '@/components/ExportEmpBase.vue'

export default {
  components: {
    Pagination
    Pagination,
    ExportDialog
  },
  data() {
    return {
@@ -368,12 +163,27 @@
      },
      headerHeight: '30px',
      dialogTableVisible: false,
      dialogShowDcyg: false,
      exportDialogVisible: false,
      exportUrl: '',
      checkAll: false,
      isIndeterminate: false,
      cityOptions: ['archivesNumb', 'allDeptName', 'jobName', 'empName', 'certificateNumb', 'certificateValidity', 'sexName', 'nationName', 'age', 'marriageName', 'stature', 'birthdate', 'politicsName', 'empTypeName', 'educationName', 'nativePlaceName', 'censusAddress', 'currentAddress', 'guardNumb', 'returnReceipt', 'archivesStatusName', 'bankName', 'bankNumb', 'telePhone', 'entryDate', 'insuranceTypeName', 'socialNumb', 'introducer', 'seniority', 'empCardStatusName', 'certificateListName', 'urgencyPhone', 'handbookStatusName', 'family', 'empStatusName', 'dimissionDate', 'entryTypeName', 'dimissionTypeName', 'empNumb', 'annualLeave'],
      checkedCities: [],
      // 导出配置
      exportConfig: {
        selectedFields: [
          'empNumb', // 编号
          'allDeptName', // 部门（护卫点）
          'jobName', // 岗位
          'empName', // 姓名
          'certificateNumb', // 身份证号码
          'sexName', // 性别
          'age', // 年龄
          'educationName', // 学历
          'nativePlaceName', // 籍贯
          'telePhone', // 联系电话
          'empTypeName', // 员工类型
          'insuranceTypeName' // 社保档位
        ],
        exportUrl: 'hr/empBaseInfo/export/insurance',
        fileName: '社保四险员工列表.xls'
      },
      tableData: [],
      sexOptions: [],
      empStatusOptions: [],
@@ -583,43 +393,37 @@
        reader.readAsDataURL(blob)
      })
      reader.onload = function(e) {
        // 获取bolb里面数据时,生成预览
        // 获取 bolb 里面数据时，生成预览
        var img = document.createElement('img')
        img.src = e.target.result
        this_.empBaseInfoForm.imagePath = e.target.result
      }
    },
    // 图片预览
    handleCheckAllChange(val) {
      this.checkedCities = val ? this.cityOptions : []
      this.isIndeterminate = false
    },
    handleCheckedCitiesChange(value) {
      const checkedCount = value.length
      this.checkAll = checkedCount === this.cityOptions.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cityOptions.length
    },
    // 显示导出对话框
    showDcyg(operate) {
      switch (operate) {
        case 0:
          this.dialogShowDcyg = true
          break
        case 1:
          this.dialogShowDcyg = false
          break
        case 2:
          var params = this.queryParams
          params.empStatus = '0'
          params.exportField = this.checkedCities.join(',')
          this.$download('hr/empBaseInfo/export/insurance', { ...params }, '社保四险员工列表.xls').then(() => {
            this.$message({
              message: '下载成功!',
              type: 'success'
            })
          })
          this.exportDialogVisible = true
          break
      }
    },
    // 确认导出
    handleExportConfirm(selectedFields) {
      const params = { ...this.queryParams }
      params.empStatus = '0'
      params.exportField = selectedFields.join(',')

      this.$download(
        this.exportConfig.exportUrl,
        { ...params },
        this.exportConfig.fileName
      ).then(() => {
        this.$message({
          message: '下载成功!',
          type: 'success'
        })
      })
    },
    editSuccess() {
      this.search()
    },

 src/views/remind/probation.vue

@@ -117,16 +117,24 @@
        <el-button @click="dialogIsShow()">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 通用导出对话框 -->
    <export-dialog
      :visible.sync="exportDialogVisible"
      :selected-fields="exportConfig.selectedFields"
      @confirm="handleExportConfirm"
    />
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { dateDifference } from '@/utils/myUtil'
import ExportDialog from '@/components/ExportEmpBase.vue'

export default {
  components: {
    Pagination
    Pagination,
    ExportDialog
  },
  data() {
    return {
@@ -175,6 +183,24 @@
      contractRules: {
        empName: [{ required: true, message: '请选择员工', trigger: 'change' }],
        probationDate: [{ required: true, message: '请选择日期', trigger: 'change' }]
      },
      exportDialogVisible: false,
      exportConfig: {
        selectedFields: [
          'empNumb', // 员工编号
          'allDeptName', // 部门 (护卫点)
          'jobName', // 岗位
          'empName', // 姓名
          'certificateNumb', // 身份证号码
          'birthdate', // 出生日期
          'insuranceTypeName', // 社保档位
          'socialNumb', // 社保电脑号
          'entryDate', // 入职日期
          'probationDate', // 转正日期
          'probationStatusName' // 转正状态
        ],
        exportUrl: 'hr/empBaseInfo/export/probation', // 需要后端提供接口
        fileName: '员工转正提醒.xls'
      }
    }
  },
@@ -340,6 +366,27 @@
          })
        }
      })
    },
    // 显示导出对话框
    showDcyg() {
      this.exportDialogVisible = true
    },
    // 确认导出
    handleExportConfirm(selectedFields) {
      const params = { ...this.queryParams }
      params.empStatus = '0'
      params.exportField = selectedFields.join(',')

      this.$download(
        this.exportConfig.exportUrl,
        { ...params },
        this.exportConfig.fileName
      ).then(() => {
        this.$message({
          message: '下载成功!',
          type: 'success'
        })
      })
    }
  }
}