spring
8 天以前 ba01c8bd58bea9acbb98c2097765b939a81b21cd
src/views/lavorissue/ledger/Form.vue
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,154 @@
<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>