上传
This commit is contained in:
qsh
53
src/views/Home/Salary/Comp/DialogCreateSalary.vue
Normal file
53
src/views/Home/Salary/Comp/DialogCreateSalary.vue
Normal file
@@ -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"></script>
|
||||
<script setup name="SalarySlip">
|
||||
import DialogCreateSalary from './Comp/DialogCreateSalary.vue'
|
||||
const searchForm = ref({})
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
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>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-table__indent) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:deep(.el-table__placeholder) {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user