<template>
|
<el-form :model="form" label-width="100px" :rules="formRules" ref="formRef">
|
<el-form-item label="部门名称" prop="deptId">
|
<el-select
|
v-model="form.deptId"
|
placeholder="请选择"
|
clearable
|
disabled
|
>
|
<el-option :label="item.deptName" :value="item.deptId" v-for="(item,index) in productOptions" :key="deptId" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="员工名称" prop="staffId">
|
<el-select
|
v-model="form.staffId"
|
placeholder="请选择"
|
clearable
|
>
|
<el-option :label="item.staffName" :value="item.id" v-for="(item,index) in personList" :key="id" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="劳保类型" prop="dictType">
|
<el-select
|
v-model="form.dictType"
|
placeholder="请选择"
|
clearable
|
>
|
<el-option :label="item.label" :value="item.value" v-for="(item,index) in sys_lavor_issue_type" :key="value" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="劳保防具" prop="dictId">
|
<el-select
|
v-model="form.dictId"
|
placeholder="请选择"
|
clearable
|
>
|
<el-option :label="item.label" :value="item.value" v-for="(item,index) in sys_lavor_issue" :key="value" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="发放数量" prop="num">
|
<el-input-number :step="1" :min="0" style="width: 100%"
|
v-model="form.num"
|
placeholder="请输入"
|
/>
|
</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>
|
</template>
|
|
<script setup>
|
import useFormData from "@/hooks/useFormData";
|
import {ref,onMounted} from "vue";
|
import useUserStore from "@/store/modules/user";
|
import {getStaffOnJob} from "@/api/personnelManagement/onboarding.js";
|
import {deepCopySameProperties} from '@/utils/util'
|
const userStore = useUserStore();
|
import {
|
getDept
|
} from "@/api/collaborativeApproval/approvalProcess.js";
|
const { proxy } = getCurrentInstance();
|
|
|
defineOptions({
|
name: "新增收入",
|
});
|
const { sys_lavor_issue } = proxy.useDict("sys_lavor_issue")
|
const { sys_lavor_issue_type } = proxy.useDict("sys_lavor_issue_type")
|
const formRef = ref(null);
|
const productOptions = ref([]);
|
const personList = ref([]);
|
const formRules = {
|
deptId: [{ required: true, trigger: "blur", message: "请输入" }],
|
dictType: [{ required: true, trigger: "change", message: "请选择" }],
|
staffId: [{ required: true, trigger: "blur", message: "请输入" }],
|
dictId: [{ required: true, trigger: "change", message: "请选择" }],
|
num: [{ required: true, trigger: "change", message: "请选择" }],
|
adoptedDate: [{ required: true, trigger: "change", message: "请选择" }],
|
factoryDate: [{ required: true, trigger: "change", message: "请选择" }],
|
issueDate: [{ required: true, trigger: "change", message: "请选择" }],
|
}
|
|
const { form, resetForm } = useFormData({
|
deptId: undefined, //
|
dictType: undefined,
|
staffId: undefined, //
|
dictId: undefined, //
|
num: undefined, //
|
adoptedDate: undefined,
|
factoryDate: undefined,
|
issueDate: undefined,
|
});
|
const getPersonList = () => {
|
getStaffOnJob().then(res => {
|
personList.value = res.data
|
})
|
};
|
const loadForm = (data) => {
|
deepCopySameProperties(data, form)
|
};
|
|
const getProductOptions = () => {
|
getDept().then((res) => {
|
productOptions.value = res.data;
|
});
|
}
|
// 清除表单校验状态
|
const clearValidate = () => {
|
formRef.value?.clearValidate();
|
};
|
|
// 重置表单数据和校验状态
|
const resetFormAndValidate = () => {
|
resetForm();
|
clearValidate();
|
form.deptId = userStore.currentDeptId
|
getProductOptions();
|
getPersonList();
|
};
|
onMounted(() => {
|
form.deptId = userStore.currentDeptId
|
getProductOptions();
|
getPersonList();
|
})
|
defineExpose({
|
form,
|
resetForm,
|
clearValidate,
|
loadForm,
|
resetFormAndValidate,
|
formRef,
|
});
|
</script>
|
