1.金鹰黄金-劳保统计页面展示数据修改

gaoluyang

2025-11-20 2e340d09cf3e7c060216cb980c466586c27ecc2d

 src/views/lavorissue/ledger/Modal.vue

@@ -1,70 +1,238 @@
<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-tree-select
          v-model="form.deptPositionId"
          :data="deptPositionTree"
          :props="{ value: 'id', label: 'label', children: 'children' }"
          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="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 { getDeptPositionTree, 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 deptPositionTree = 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)
}
// 将部门岗位数据转换为树形结构
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 = []
  }
}

defineExpose({
  openModal,
  loadForm,
});
async function handlePositionChange(deptPositionId) {
  console.log('选择的岗位ID:', deptPositionId)
  if (!deptPositionId) {
    laborSuppliesOptions.value = []
    form.dictId = undefined
    return
  }
  const res = await getDeptPositionByDeptIdLabor({ id: deptPositionId })
  laborSuppliesOptions.value = res?.data || []
}

onMounted(() => {
  loadDeptPositionTree()
  getPersonList()
})

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