dev-cl
qsh
3 months ago
parent
f3b5079fbe
commit
a9c5d16926
@ -0,0 +1,53 @@ |
||||
<template> |
||||
<Dialog v-model="dialogVisible" title="生成工资条" style="width: 800px"> |
||||
<el-form :model="formData" ref="formRef" :rules="rules" label-width="80px"> |
||||
<el-row :gutter="20"> |
||||
<el-col :span="12" :offset="0"> |
||||
<el-form-item label="年月" prop="yearmonth"> |
||||
<el-date-picker v-model="formData.yearmonth" type="month" placeholder="选择年月" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row :gutter="20"> |
||||
<el-col :span="12" :offset="0"> |
||||
<el-form-item label="导入奖金" size="normal"> |
||||
<UploadFile v-model="formData.files1" :limit="1" :isShowTip="false" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="12" :offset="0"> |
||||
<el-form-item label="导入考勤" size="normal"> |
||||
<UploadFile v-model="formData.files2" :limit="1" :isShowTip="false" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form> |
||||
<template #footer> |
||||
<span> |
||||
<el-button @click="dialogVisible = false">取 消</el-button> |
||||
<el-button type="primary" :disabled="formLoading" @click="handleSave"> |
||||
确 认 生 成 |
||||
</el-button> |
||||
</span> |
||||
</template> |
||||
</Dialog> |
||||
</template> |
||||
|
||||
<script setup name="DialogCreateSalary"> |
||||
const dialogVisible = ref(false) |
||||
|
||||
const formData = ref({}) |
||||
|
||||
const formLoading = ref(false) |
||||
|
||||
const rules = {} |
||||
|
||||
function open() { |
||||
dialogVisible.value = true |
||||
} |
||||
|
||||
defineExpose({ open }) |
||||
|
||||
function handleSave() {} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped></style> |
||||
@ -1,7 +1,354 @@ |
||||
<template> |
||||
<div> 工资条 </div> |
||||
<div> |
||||
<el-form :model="searchForm" ref="searchFormRef" inline> |
||||
<el-form-item> |
||||
<el-input v-model="searchForm.employeeName" placeholder="员工姓名" /> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-date-picker |
||||
v-model="searchForm.month" |
||||
type="month" |
||||
placeholder="年月" |
||||
format="YYYY-MM" |
||||
value-format="YYYY-MM" |
||||
style="width: 100%" |
||||
/> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button @click="handleSearch">查询</el-button> |
||||
<el-button type="primary" plain @click="craeteSalary">生成工资条</el-button> |
||||
<el-button type="primary" @click="importHistorySalary">导入历史工资条</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
|
||||
<el-table |
||||
v-loading="loading" |
||||
:data="tableList" |
||||
border |
||||
stripe |
||||
:default-expand-all="false" |
||||
row-key="id" |
||||
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }" |
||||
:span-method="spanMethod" |
||||
> |
||||
<el-table-column label="姓名" min-width="90px"> |
||||
<template #default="{ row }"> |
||||
<span v-if="row.children && row.children.length"> |
||||
<span>{{ row.yearmonth }}</span> |
||||
<span class="ml-20px">应发工资人数：30人</span> |
||||
</span> |
||||
<span v-else> |
||||
{{ row.name }} |
||||
</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="dept" label="部门" min-width="90px" /> |
||||
<el-table-column prop="job" label="职位" min-width="90px" /> |
||||
<el-table-column label="应发工资" align="center"> |
||||
<el-table-column label="基本工资" min-width="90px"> |
||||
<template #default="{ row }"> |
||||
<el-input-number |
||||
v-if="row.edit" |
||||
v-model="row.jbgz" |
||||
:min="0" |
||||
:controls="false" |
||||
size="small" |
||||
style="width: 65px" |
||||
/> |
||||
<span v-else> {{ row.jbgz }}</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="补贴" min-width="90px"> |
||||
<template #default="{ row }"> |
||||
<el-input-number |
||||
v-if="row.edit" |
||||
v-model="row.jbgz" |
||||
:min="0" |
||||
:controls="false" |
||||
size="small" |
||||
style="width: 65px" |
||||
/> |
||||
<span v-else> {{ row.jbgz }}</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="提成" min-width="90px"> |
||||
<template #default="{ row }"> |
||||
<el-input-number |
||||
v-if="row.edit" |
||||
v-model="row.jbgz" |
||||
:min="0" |
||||
:controls="false" |
||||
size="small" |
||||
style="width: 65px" |
||||
/> |
||||
<span v-else> {{ row.jbgz }}</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="满勤" min-width="90px"> |
||||
<template #default="{ row }"> |
||||
<el-input-number |
||||
v-if="row.edit" |
||||
v-model="row.jbgz" |
||||
:min="0" |
||||
:controls="false" |
||||
size="small" |
||||
style="width: 65px" |
||||
/> |
||||
<span v-else> {{ row.jbgz }}</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="绩效" min-width="90px"> |
||||
<template #default="{ row }"> |
||||
<el-input-number |
||||
v-if="row.edit" |
||||
v-model="row.jbgz" |
||||
:min="0" |
||||
:controls="false" |
||||
size="small" |
||||
style="width: 65px" |
||||
/> |
||||
<span v-else> {{ row.jbgz }}</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="其他" min-width="90px"> |
||||
<template #default="{ row }"> |
||||
<el-input-number |
||||
v-if="row.edit" |
||||
v-model="row.jbgz" |
||||
:min="0" |
||||
:controls="false" |
||||
size="small" |
||||
style="width: 65px" |
||||
/> |
||||
<span v-else> {{ row.jbgz }}</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="小计" min-width="90px" /> |
||||
</el-table-column> |
||||
<el-table-column label="应发工资" align="center"> |
||||
<el-table-column label="基本工资" min-width="90px"> |
||||
<template #default="{ row }"> |
||||
<el-input-number |
||||
v-if="row.edit" |
||||
v-model="row.jbgz" |
||||
:min="0" |
||||
:controls="false" |
||||
size="small" |
||||
style="width: 65px" |
||||
/> |
||||
<span v-else> {{ row.jbgz }}</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="请假" min-width="90px"> |
||||
<template #default="{ row }"> |
||||
<el-input-number |
||||
v-if="row.edit" |
||||
v-model="row.jbgz" |
||||
:min="0" |
||||
:controls="false" |
||||
size="small" |
||||
style="width: 65px" |
||||
/> |
||||
<span v-else> {{ row.jbgz }}</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="缺勤" min-width="90px"> |
||||
<template #default="{ row }"> |
||||
<el-input-number |
||||
v-if="row.edit" |
||||
v-model="row.jbgz" |
||||
:min="0" |
||||
:controls="false" |
||||
size="small" |
||||
style="width: 65px" |
||||
/> |
||||
<span v-else> {{ row.jbgz }}</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="旷工" min-width="90px"> |
||||
<template #default="{ row }"> |
||||
<el-input-number |
||||
v-if="row.edit" |
||||
v-model="row.jbgz" |
||||
:min="0" |
||||
:controls="false" |
||||
size="small" |
||||
style="width: 65px" |
||||
/> |
||||
<span v-else> {{ row.jbgz }}</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="违纪" min-width="90px"> |
||||
<template #default="{ row }"> |
||||
<el-input-number |
||||
v-if="row.edit" |
||||
v-model="row.jbgz" |
||||
:min="0" |
||||
:controls="false" |
||||
size="small" |
||||
style="width: 65px" |
||||
/> |
||||
<span v-else> {{ row.jbgz }}</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="公积金" min-width="90px"> |
||||
<template #default="{ row }"> |
||||
<el-input-number |
||||
v-if="row.edit" |
||||
v-model="row.jbgz" |
||||
:min="0" |
||||
:controls="false" |
||||
size="small" |
||||
style="width: 65px" |
||||
/> |
||||
<span v-else> {{ row.jbgz }}</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="社保" min-width="90px"> |
||||
<template #default="{ row }"> |
||||
<el-input-number |
||||
v-if="row.edit" |
||||
v-model="row.jbgz" |
||||
:min="0" |
||||
:controls="false" |
||||
size="small" |
||||
style="width: 65px" |
||||
/> |
||||
<span v-else> {{ row.jbgz }}</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="所得税" min-width="90px"> |
||||
<template #default="{ row }"> |
||||
<el-input-number |
||||
v-if="row.edit" |
||||
v-model="row.jbgz" |
||||
:min="0" |
||||
:controls="false" |
||||
size="small" |
||||
style="width: 65px" |
||||
/> |
||||
<span v-else> {{ row.jbgz }}</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="其他" min-width="90px"> |
||||
<template #default="{ row }"> |
||||
<el-input-number |
||||
v-if="row.edit" |
||||
v-model="row.jbgz" |
||||
:min="0" |
||||
:controls="false" |
||||
size="small" |
||||
style="width: 65px" |
||||
/> |
||||
<span v-else> {{ row.jbgz }}</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="小计" min-width="90px" /> |
||||
</el-table-column> |
||||
<el-table-column label="实发工资" fixed="right" /> |
||||
<el-table-column label="操作" fixed="right" width="200"> |
||||
<template #default="{ row }"> |
||||
<el-button |
||||
type="primary" |
||||
style="padding: 0" |
||||
v-if="!row.edit && row.yearmonth" |
||||
text |
||||
@click="handleEdit(row)" |
||||
> |
||||
修改 |
||||
</el-button> |
||||
<el-button |
||||
type="primary" |
||||
v-else-if="row.edit && row.yearmonth" |
||||
text |
||||
style="padding: 0" |
||||
@click="handleSave(row)" |
||||
> |
||||
保存 |
||||
</el-button> |
||||
<el-button |
||||
type="danger" |
||||
v-if="row.yearmonth" |
||||
style="padding: 0" |
||||
text |
||||
@click="handleSave(row)" |
||||
> |
||||
封存 |
||||
</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<DialogCreateSalary ref="createSalaryRef" @success="getList" /> |
||||
<DialogImportSalary ref="importSalaryRef" @success="getList" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup name="SalarySlip"> |
||||
import DialogCreateSalary from './Comp/DialogCreateSalary.vue' |
||||
const searchForm = ref({}) |
||||
|
||||
onMounted(() => { |
||||
handleSearch() |
||||
}) |
||||
|
||||
function handleSearch() { |
||||
searchForm.value.pageNO = 1 |
||||
getList() |
||||
} |
||||
|
||||
const loading = ref(false) |
||||
const tableList = ref([]) |
||||
const total = ref(0) |
||||
function getList() { |
||||
tableList.value = [ |
||||
{ |
||||
yearmonth: '2024-06', |
||||
id: 1, |
||||
children: [ |
||||
{ id: 11, name: '张三' }, |
||||
{ id: 12, name: '李四' } |
||||
] |
||||
} |
||||
] |
||||
total.value = 0 |
||||
} |
||||
|
||||
const createSalaryRef = ref() |
||||
function craeteSalary() { |
||||
createSalaryRef.value.open() |
||||
} |
||||
|
||||
function importHistorySalary() {} |
||||
|
||||
function spanMethod({ row, columnIndex }) { |
||||
if (row.children && row.children.length > 0) { |
||||
if (columnIndex === 0) { |
||||
return [1, 21] |
||||
} else if (columnIndex == 21) { |
||||
return [1, 1] |
||||
} else { |
||||
return [0, 0] |
||||
} |
||||
} |
||||
} |
||||
|
||||
function handleEdit(row) { |
||||
row.edit = true |
||||
row.children.forEach((it) => (it.edit = true)) |
||||
} |
||||
|
||||
function handleSave(row) { |
||||
row.edit = false |
||||
row.children.forEach((it) => (it.edit = false)) |
||||
} |
||||
</script> |
||||
|
||||
<script setup name="SalarySlip"></script> |
||||
<style lang="scss" scoped> |
||||
:deep(.el-table__indent) { |
||||
display: none; |
||||
} |
||||
|
||||
<style lang="scss" scoped></style> |
||||
:deep(.el-table__placeholder) { |
||||
display: none; |
||||
} |
||||
</style> |
||||
|
||||
Loading…
Reference in new issue