gaoluyang
2026-08-06 377c0a70c094d024aeb0bb94f4b791c6d5530c1e
src/views/productionManagement/productionReporting/components/formDia.vue
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,185 @@
<template>
  <div>
    <el-dialog
        v-model="dialogFormVisible"
        title="生产报工"
        width="70%"
        @close="closeDia"
    >
      <el-form :model="form" label-width="140px" label-position="top" :rules="rules" ref="formRef">
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="排产数量:" prop="schedulingNum">
              <el-input v-model="form.schedulingNum" placeholder="请输入" clearable disabled/>
            </el-form-item>
          </el-col>
               <el-col :span="12">
                  <el-form-item label="待生产数量:" prop="pendingNum">
                     <el-input v-model="form.pendingNum" placeholder="请输入" clearable disabled/>
                  </el-form-item>
               </el-col>
        </el-row>
        <el-row :gutter="30">
               <el-col :span="12">
                  <el-form-item label="本次生产数量:" prop="finishedNum">
                     <el-input-number
                        v-model="form.finishedNum"
                        placeholder="请输入"
                        :min="0"
                        :step="0.1"
                        :precision="2"
                        clearable
                        style="width: 100%"
                        @change="changeNum"
                     />
                  </el-form-item>
               </el-col>
          <el-col :span="12">
            <el-form-item label="单价(元):" prop="unitPrice">
              <el-input v-model="form.unitPrice" placeholder="请输入" clearable @input="calculateTotalPrice"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="总价(元):" prop="totalPrice">
              <el-input v-model="form.totalPrice" placeholder="请输入" clearable disabled/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
               <el-col :span="12">
                  <el-form-item label="生产人:" prop="schedulingUserId">
                     <el-select
                        v-model="form.schedulingUserId"
                        placeholder="选择人员"
                        style="width: 100%;"
                filterable
                default-first-option
                :reserve-keyword="false"
                     >
                        <el-option
                           v-for="user in userList"
                           :key="user.userId"
                           :label="user.nickName"
                           :value="user.userId"
                        />
                     </el-select>
                  </el-form-item>
               </el-col>
          <el-col :span="12">
            <el-form-item label="生产日期:" prop="schedulingDate">
              <el-date-picker
                  v-model="form.schedulingDate"
                  type="date"
                  placeholder="请选择日期"
                  value-format="YYYY-MM-DD"
                  format="YYYY-MM-DD"
                  clearable
                  style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确认</el-button>
          <el-button @click="closeDia">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import {ref} from "vue";
// import {getStaffJoinInfo, staffJoinAdd, staffJoinUpdate} from "@/api/personnelManagement/onboarding.js";
import {userListNoPageByTenantId} from "@/api/system/user.js";
import {productionReport, productionReportUpdate} from "@/api/productionManagement/productionReporting.js";
const { proxy } = getCurrentInstance()
const emit = defineEmits(['close'])
const userList = ref([])
const dialogFormVisible = ref(false);
const operationType = ref('')
const data = reactive({
  form: {
      successNum: "",
      schedulingNum: "",
      finishedNum: "",
      schedulingUserId: "",
      schedulingDate: "",
      unitPrice: "",
      totalPrice: "",
  },
  rules: {
      schedulingNum: [{ required: true, message: "请输入", trigger: "blur" },],
  },
});
const { form, rules } = toRefs(data);
// æ‰“开弹框
const openDialog = (type, row) => {
  operationType.value = type;
  dialogFormVisible.value = true;
   userListNoPageByTenantId().then((res) => {
      userList.value = res.data;
   });
   form.value = {...row}
}
const changeNum = (value) => {
   if (value > form.value.schedulingNum) {
      form.value.finishedNum = form.value.schedulingNum;
      proxy.$modal.msgWarning('本次生产数量不可大于排产数量')
   }
   form.value.pendingNum = form.value.schedulingNum - form.value.finishedNum;
   calculateTotalPrice();
}
// è®¡ç®—总价
const calculateTotalPrice = () => {
   const quantity = Number(form.value.finishedNum ?? 0);
   const unitPrice = Number(form.value.unitPrice ?? 0);
   if (quantity > 0 && unitPrice > 0) {
      form.value.totalPrice = (quantity * unitPrice).toFixed(2);
   } else {
      form.value.totalPrice = '0.00';
   }
}
// æäº¤äº§å“è¡¨å•
const submitForm = () => {
  proxy.$refs.formRef.validate(valid => {
    if (valid) {
      form.value.staffState = 1
      if (operationType.value === "add") {
            productionReport(form.value).then(res => {
          proxy.$modal.msgSuccess("提交成功");
          closeDia();
        })
      } else {
            productionReportUpdate(form.value).then(res => {
          proxy.$modal.msgSuccess("提交成功");
          closeDia();
        })
      }
    }
  })
}
// å…³é—­å¼¹æ¡†
const closeDia = () => {
  proxy.resetForm("formRef");
  dialogFormVisible.value = false;
  emit('close')
};
defineExpose({
  openDialog,
});
</script>
<style scoped>
</style>