<template>
|
<el-dialog
|
title="导出员工"
|
:visible.sync="isVisible"
|
width="800px"
|
@close="handleClose"
|
>
|
<div style="font-size: 16px;font-weight: 400;height: 35px;margin-top: -30px;color: #409EFF;">
|
请勾选需要导出的字段
|
</div>
|
<!-- 全选行 -->
|
<div style="margin-top: 20px; padding-left: 20px;">
|
<el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">
|
全部字段
|
</el-checkbox>
|
</div>
|
<!-- 网格布局替代表格 -->
|
<el-checkbox-group
|
v-model="checkedCities"
|
class="field-grid"
|
@change="handleCheckedCitiesChange"
|
>
|
<div v-for="field in allFields" :key="field.value" class="grid-item">
|
<el-checkbox :label="field.value">{{ field.label }}</el-checkbox>
|
</div>
|
</el-checkbox-group>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="handleClose">取 消</el-button>
|
<el-button type="primary" @click="handleConfirm">确 定</el-button>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
// 预定义的所有可导出字段
|
const ALL_EXPORT_FIELDS = [
|
{ label: '档案号', value: 'archivesNumb' },
|
{ label: '编号', value: 'empNumb' },
|
{ label: '姓名', value: 'empName' },
|
{ label: '性别', value: 'sexName' },
|
{ label: '身份证号码', value: 'certificateNumb' },
|
{ label: '出生日期', value: 'birthdate' },
|
{ label: '年龄', value: 'age' },
|
{ label: '民族', value: 'nationName' },
|
{ label: '籍贯', value: 'nativePlaceName' },
|
{ label: '政治面貌', value: 'politicsName' },
|
{ label: '婚姻状况', value: 'marriageName' },
|
{ label: '身高 (cm)', value: 'stature' },
|
{ label: '学历', value: 'educationName' },
|
{ label: '部门 (护卫点)', value: 'allDeptName' },
|
{ label: '岗位', value: 'jobName' },
|
{ label: '员工类别', value: 'empTypeName' },
|
{ label: '联系电话', value: 'telePhone' },
|
{ label: '现住址', value: 'currentAddress' },
|
{ label: '户籍地址', value: 'censusAddress' },
|
{ label: '入职日期', value: 'entryDate' },
|
{ label: '社保档位', value: 'insuranceTypeName' },
|
{ label: '银行名称', value: 'bankName' },
|
{ label: '银行账号', value: 'bankNumb' },
|
{ label: '保安员证号', value: 'guardNumb' },
|
{ label: '档案状态', value: 'archivesStatusName' },
|
{ label: '合同状态', value: 'contractStatusName' },
|
{ label: '工作证', value: 'empCardStatusName' },
|
{ label: '员工手册', value: 'handbookStatusName' },
|
{ label: '相关证件', value: 'certificateListName' },
|
{ label: '家庭成员及关系 1', value: 'family' },
|
{ label: '家庭成员及关系 2', value: 'urgencyPhone' },
|
{ label: '入司工龄', value: 'seniority' },
|
{ label: '年假天数', value: 'annualLeave' },
|
{ label: '备注', value: 'remark' }
|
]
|
|
export default {
|
name: 'ExportDialog',
|
props: {
|
visible: {
|
type: Boolean,
|
default: false
|
},
|
// 默认选中的字段数组（传入则自动勾选这些字段）
|
selectedFields: {
|
type: Array,
|
default: null
|
}
|
},
|
data() {
|
return {
|
isVisible: false,
|
checkAll: false,
|
isIndeterminate: false,
|
checkedCities: [],
|
cityOptions: [],
|
fieldRows: [],
|
allFields: ALL_EXPORT_FIELDS
|
}
|
},
|
watch: {
|
visible(val) {
|
this.isVisible = val
|
if (val) {
|
this.initFields()
|
}
|
},
|
isVisible(val) {
|
this.$emit('update:visible', val)
|
}
|
},
|
methods: {
|
initFields() {
|
const fieldsToUse = [...this.allFields]
|
const allValues = fieldsToUse.map(f => f.value)
|
|
if (this.selectedFields && this.selectedFields.length > 0) {
|
this.checkedCities = this.selectedFields.filter(f => allValues.includes(f))
|
} else {
|
this.checkedCities = []
|
}
|
|
const checkedCount = this.checkedCities.length
|
this.checkAll = checkedCount === allValues.length
|
this.isIndeterminate = checkedCount > 0 && checkedCount < allValues.length
|
},
|
handleCheckAllChange(val) {
|
this.checkedCities = val ? this.allFields.map(f => f.value) : []
|
this.isIndeterminate = false
|
},
|
handleCheckedCitiesChange(value) {
|
const checkedCount = value.length
|
this.checkAll = checkedCount === this.allFields.length
|
this.isIndeterminate = checkedCount > 0 && checkedCount < this.allFields.length
|
},
|
|
handleClose() {
|
this.isVisible = false
|
this.$emit('update:visible', false)
|
this.$emit('cancel')
|
},
|
|
handleConfirm() {
|
this.isVisible = false
|
this.$emit('update:visible', false)
|
this.$emit('confirm', this.checkedCities)
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.field-grid {
|
display: grid;
|
grid-template-columns: repeat(3, 1fr);
|
gap: 8px 16px;
|
margin-top: 16px;
|
padding: 0 10px 10px 20px; /* 与左侧全选行对齐 */
|
border-bottom: 1px dashed #ccc; /* 模仿原表格的下划线效果 */
|
}
|
|
.grid-item {
|
display: flex;
|
align-items: center;
|
height: 40px; /* 与原表格行高一致 */
|
border-bottom: 1px dashed #ccc; /* 每行之间保留虚线 */
|
}
|
|
/* 最后一个网格行取消下边框（可选） */
|
.grid-item:last-child,
|
.grid-item:nth-last-child(-n+3) { /* 若最后一行不足三个，可根据实际情况调整 */
|
border-bottom: none;
|
}
|
|
/* 调整复选框标签样式 */
|
.el-checkbox {
|
/deep/ .el-checkbox__label {
|
color: #606266;
|
font-size: 14px;
|
}
|
}
|
</style>
|
