<template>
|
<el-dialog :title="modalOptions.title" v-model="visible" @close="close" width="60%">
|
<el-form :model="form" label-width="100px" :rules="formRules" ref="formRef">
|
<el-form-item label="岗位名称" prop="deptPositionId">
|
<el-tree-select
|
v-model="form.deptPositionId"
|
:data="deptPositionTree"
|
:props="{ value: 'id', label: 'label', children: 'children', disabled: checkDisabled }"
|
placeholder="请选择岗位"
|
clearable
|
check-strictly
|
:render-after-expand="false"
|
check-on-click-node
|
@change="handlePositionChange"
|
>
|
<template #default="{ data }">
|
<span>
|
<el-tag size="small" :type="data.type===1 ? 'success' : 'warning'" effect="plain" style="margin-right:4px;">
|
{{ data.type === 1 ? '部门' : '岗位' }}
|
</el-tag>
|
{{ data.label }}
|
</span>
|
</template>
|
</el-tree-select>
|
</el-form-item>
|
<el-form-item label="进厂日期" prop="factoryDate">
|
<el-date-picker style="width: 100%" v-model="form.factoryDate" format="YYYY-MM-DD" value-format="YYYY-MM-DD" type="date" placeholder="请选择日期" clearable />
|
</el-form-item>
|
<el-form-item label="发放日期" prop="issueDate">
|
<el-date-picker style="width: 100%" v-model="form.issueDate" format="YYYY-MM-DD" value-format="YYYY-MM-DD" type="date" placeholder="请选择日期" clearable />
|
</el-form-item>
|
<el-form-item label="员工与数量" required>
|
<div style="width:100%">
|
<el-table :data="form.laborIssueList" border size="small" :span-method="arraySpanMethod">
|
<el-table-column label="员工名称" width="220">
|
<template #default="scope">
|
<span>{{ personList.find(p => p.id === scope.row.staffId)?.staffName }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="劳保用品" prop="dictName" align="center" />
|
<el-table-column label="发放数量" align="center" width="150">
|
<template #default="scope">
|
<el-input-number v-model="scope.row.num" :min="0" :step="1" />
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" width="120" align="center">
|
<template #default="scope">
|
<el-button link type="danger" size="small" @click="removeItemRow(scope.$index)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<el-button type="primary" @click="sendForm" :loading="loading">{{ modalOptions.confirmText }}</el-button>
|
<el-button @click="closeModal">{{ modalOptions.cancelText }}</el-button>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script setup>
|
import { ref, getCurrentInstance, onMounted, nextTick } from 'vue'
|
import { useModal } from "@/hooks/useModal";
|
import { add, update } from "@/api/lavorissce/ledger";
|
import useFormData from "@/hooks/useFormData";
|
import useUserStore from "@/store/modules/user";
|
import {staffOnJobListPage} from "@/api/personnelManagement/employeeRecord.js";
|
import { getDept } from "@/api/collaborativeApproval/approvalProcess.js";
|
import { getDeptPositionTree, getDeptPositionByDeptIdLabor } from "@/api/lavorissce/issue";
|
import { deepCopySameProperties } from '@/utils/util'
|
import { ElMessage } from "element-plus";
|
import {staffJoinListPage} from "@/api/personnelManagement/onboarding.js";
|
|
const { proxy } = getCurrentInstance()
|
|
defineOptions({ name: "收入新增编辑" });
|
const emits = defineEmits(["success"]);
|
|
const formRef = ref(null)
|
const userStore = useUserStore();
|
const { sys_lavor_issue } = proxy.useDict("sys_lavor_issue")
|
const { sys_lavor_issue_type } = proxy.useDict("sys_lavor_issue_type")
|
|
const productOptions = ref([]);
|
const personList = ref([]);
|
const deptPositionTree = ref([]);
|
const laborSuppliesOptions = ref([]);
|
|
const formRules = {
|
deptPositionId: [{ required: true, trigger: "blur", message: "请输入" }],
|
adoptedDate: [{ required: true, trigger: "change", message: "请选择" }],
|
factoryDate: [{ required: true, trigger: "change", message: "请选择" }],
|
issueDate: [{ required: true, trigger: "change", message: "请选择" }],
|
}
|
|
const { form, resetForm } = useFormData({
|
deptPositionId: undefined,
|
dictType: undefined,
|
dictId: undefined,
|
adoptedDate: undefined,
|
factoryDate: undefined,
|
issueDate: undefined,
|
laborIssueList: [ { staffId: undefined, num: undefined } ],
|
});
|
|
function getPersonList() {
|
staffOnJobListPage({current: -1, size:-1, staffState: 1}).then(res => { personList.value = res.data.records })
|
}
|
function getProductOptions() {
|
getDept().then(res => { productOptions.value = res.data })
|
}
|
|
function clearValidate() { formRef.value?.clearValidate() }
|
function resetFormAndValidate() {
|
resetForm()
|
clearValidate()
|
getProductOptions()
|
getPersonList()
|
}
|
|
function removeItemRow(index) {
|
form.laborIssueList.splice(index, 1)
|
}
|
|
const {
|
id,
|
visible,
|
loading,
|
openModal,
|
modalOptions,
|
closeModal,
|
} = useModal({ title: "劳保台账" });
|
|
function sendForm() {
|
formRef.value?.validate(async valid => {
|
if (!valid) return
|
if (!Array.isArray(form.laborIssueList) || form.laborIssueList.length === 0) {
|
ElMessage.error('请至少添加一行员工与数量')
|
return
|
}
|
for (const row of form.laborIssueList) {
|
if (!row.staffId) { ElMessage.error('请选择员工'); return }
|
if (!row.dictId) { ElMessage.error('请选择劳保用品'); return }
|
if (row.num == null || row.num === '' || Number(row.num) < 0) { ElMessage.error('请输入数量'); return }
|
}
|
const payload = { ...form }
|
const { code } = id.value ? await update({ id: id.value, ...payload }) : await add(payload)
|
if (code == 200) {
|
emits("success")
|
ElMessage({ message: "操作成功", type: "success" })
|
close()
|
} else {
|
loading.value = false
|
}
|
})
|
}
|
|
function close() {
|
resetFormAndValidate()
|
closeModal()
|
}
|
|
async function loadForm(row) {
|
openModal(row.id)
|
await nextTick()
|
deepCopySameProperties(row, form)
|
}
|
// 将部门岗位数据转换为树形结构
|
function mapDeptToTree(d) {
|
const node = {
|
id: d.id,
|
label: d.name,
|
type: d.type,
|
children: [],
|
}
|
const kids = Array.isArray(d.children) ? d.children : []
|
for (const c of kids) {
|
if (c.type === 1) {
|
node.children.push(mapDeptToTree(c))
|
} else if (c.type === 2) {
|
node.children.push({
|
id: c.id,
|
label: c.name,
|
type: c.type,
|
})
|
}
|
}
|
return node
|
}
|
|
async function loadDeptPositionTree() {
|
try {
|
const res = await getDeptPositionTree()
|
const data = res?.data || res || []
|
deptPositionTree.value = data.map(d => mapDeptToTree(d))
|
} catch (e) {
|
console.error('加载部门岗位树失败:', e)
|
deptPositionTree.value = []
|
}
|
}
|
|
async function handlePositionChange(deptPositionId) {
|
console.log('选择的岗位ID:', deptPositionId)
|
if (!deptPositionId) {
|
laborSuppliesOptions.value = []
|
form.dictId = undefined
|
form.laborIssueList = []
|
return
|
}
|
const res = await getDeptPositionByDeptIdLabor({ id: deptPositionId })
|
laborSuppliesOptions.value = res?.data || []
|
|
const staffRes = await staffJoinListPage({ current: -1, size: -1, staffState: 1, deptPositionId: deptPositionId })
|
const staffList = staffRes?.data?.records || []
|
personList.value = staffList
|
const suppliesList = laborSuppliesOptions.value || []
|
|
if (staffList.length > 0 && suppliesList.length > 0) {
|
form.laborIssueList = []
|
staffList.forEach(staff => {
|
suppliesList.forEach(supply => {
|
form.laborIssueList.push({
|
staffId: staff.id,
|
dictId: supply.dictId,
|
dictName: supply.dictName,
|
num: supply.num || 0
|
})
|
})
|
})
|
} else {
|
form.laborIssueList = []
|
}
|
}
|
|
function arraySpanMethod({ row, column, rowIndex, columnIndex }) {
|
if (columnIndex === 0) {
|
const staffId = row.staffId
|
const sameStaffRows = form.laborIssueList.filter(item => item.staffId === staffId)
|
const firstIndex = form.laborIssueList.findIndex(item => item.staffId === staffId)
|
if (rowIndex === firstIndex) {
|
return {
|
rowspan: sameStaffRows.length,
|
colspan: 1
|
}
|
} else {
|
return {
|
rowspan: 0,
|
colspan: 0
|
}
|
}
|
}
|
}
|
|
function checkDisabled(data) {
|
return data.type === 1
|
}
|
|
onMounted(() => {
|
loadDeptPositionTree()
|
getPersonList()
|
})
|
|
defineExpose({ openModal, loadForm })
|
</script>
|
