1.金鹰黄金-劳保管理部门管理修改 2.金鹰黄金-劳保台账新增逻辑修改

gaoluyang

2025-11-20 591392aea7dfdaa526fc50c46cd88245688ee78b

 src/views/lavorissue/ledger/Modal.vue

@@ -1,70 +1,191 @@
<template>
  <el-dialog :title="modalOptions.title" v-model="visible" @close="close" width="30%">
    <Form ref="formRef"></Form>
  <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-select v-model="form.deptPositionId" placeholder="请选择" clearable @change="handlePositionChange">
          <el-option :label="item.name" :value="item.id" v-for="(item,index) in positionOptions" :key="item.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="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="劳保用品" prop="dictId">
        <el-select v-model="form.dictId" placeholder="请选择" clearable>
          <el-option :label="item.dictName" :value="item.dictId" v-for="(item,index) in laborSuppliesOptions" :key="item.dictId" />
        </el-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%">
          <div style="margin-bottom:8px; text-align:right;">
            <el-button size="small" type="primary" @click="addItemRow">新增一行</el-button>
          </div>
          <el-table :data="form.laborIssueList" border size="small">
            <el-table-column label="员工名称" width="220">
              <template #default="scope">
                <el-select v-model="scope.row.staffId" placeholder="请选择" filterable>
                  <el-option :label="p.staffName" :value="p.id" v-for="p in personList" :key="p.id" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="发放数量" align="center">
              <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 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 Form from "./Form.vue";
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 { deptPositionListPage, getDeptPositionByDeptIdLabor } from "@/api/lavorissce/issue";
import { deepCopySameProperties } from '@/utils/util'
import { ElMessage } from "element-plus";

const { proxy } = getCurrentInstance()

defineOptions({
  name: "收入新增编辑",
});

defineOptions({ name: "收入新增编辑" });
const emits = defineEmits(["success"]);

const formRef = ref();
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 positionOptions = ref([]);
const laborSuppliesOptions = ref([]);

const formRules = {
  deptPositionId: [{ required: true, trigger: "blur", message: "请输入" }],
  dictType: [{ required: true, trigger: "change", message: "请选择" }],
  dictId: [{ 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({
  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 addItemRow() {
  form.laborIssueList.push({ staffId: undefined, num: undefined })
}
function removeItemRow(index) {
  form.laborIssueList.splice(index, 1)
}

const {
  id,
  visible,
  loading,
  openModal,
  modalOptions,
  handleConfirm,
  closeModal,
} = useModal({ title: "劳保台账" });

const sendForm = () => {
   proxy.$refs.formRef.$refs.formRef.validate(async valid => {
      if (valid) {
         const {code} = id.value
            ? await update({id: id.value, ...formRef.value.form})
            : await add(formRef.value.form);
         if (code == 200) {
            emits("success");
            ElMessage({message: "操作成功", type: "success"});
            close();
         } else {
            loading.value = false;
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.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
      }
   })
};
}

const close = () => {
   formRef.value.resetFormAndValidate();
  closeModal();
};
function close() {
  resetFormAndValidate()
  closeModal()
}

const loadForm = async (row) => {
  openModal(row.id);
  await nextTick();
  formRef.value.loadForm(row);
async function loadForm(row) {
  openModal(row.id)
  await nextTick()
  deepCopySameProperties(row, form)
}
async function loadPositions() {
  const res = await deptPositionListPage({pageNum: -1, pageSize:-1})
    positionOptions.value = res?.data?.records || res?.data || []
}

};
async function handlePositionChange(deptPositionId) {
  if (!deptPositionId) {
    laborSuppliesOptions.value = []
    form.dictId = undefined
    return
  }
  const res = await getDeptPositionByDeptIdLabor({ id: deptPositionId })
  laborSuppliesOptions.value = res?.data || []
}

defineExpose({
  openModal,
  loadForm,
});
onMounted(() => {
  loadPositions()
  getPersonList()
})

defineExpose({ openModal, loadForm })
</script>