¶Ô±ÈÐÂÎļþ |
| | |
| | | <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> |