1.海川开心-新增里面工序固定为包装，单位以及规格写死。新增以及页面加入产线字段（下拉选择，一共4条产线，命名写死为包装产线1.2.3.4这种。）派工...

gaoluyang

2025-12-09 fcd2bbd0d9788d373f2e56be6d8d90eb269c3bcb

 src/views/productionManagement/operationScheduling/components/formDia.vue

@@ -2,162 +2,248 @@
  <div>
    <el-dialog
        v-model="dialogFormVisible"
        :title="operationType === 'add' ? '新增入职' : '编辑人员'"
        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="staffNo">
              <el-input v-model="form.staffNo" placeholder="请输入" clearable disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产品大类：" prop="staffNo">
              <el-input v-model="form.staffNo" placeholder="请输入" clearable disabled/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="总数量：" prop="staffNo">
              <el-input v-model="form.staffNo" placeholder="请输入" clearable disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="本次排产数量：" prop="staffNo">
                     <el-input-number
                        v-model="form.ticketsNum"
                        placeholder="请输入"
                        :min="0"
                        :step="0.1"
                        :precision="2"
                        clearable
                        style="width: 100%"
                     />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
               <el-col :span="12">
                  <el-form-item label="排产人：" prop="staffName">
                     <el-input v-model="form.staffName" placeholder="请输入" clearable/>
                  </el-form-item>
               </el-col>
          <el-col :span="12">
            <el-form-item label="排产日期：" prop="contractStartTime">
              <el-date-picker
                  v-model="form.contractStartTime"
                  type="date"
                  placeholder="请选择日期"
                  value-format="YYYY-MM-DD"
                  format="YYYY-MM-DD"
                  clearable
                  style="width: 100%"
      <el-button type="primary" @click="addRow" style="margin-bottom: 10px;">新增</el-button>
         <span style="font-size: 18px;margin-left: 10px">待排产数量：{{pendingNum}}</span>
<!--         <div style="margin-bottom: 10px; margin-left: 10px;">-->
<!--            <el-form-item label="领用：" style="margin-bottom: 0;">-->
<!--               <el-input v-model="receive" placeholder="请输入领用" style="width: 200px;" />-->
<!--            </el-form-item>-->
<!--         </div>-->
      <el-table :data="tableData" border style="width: 100%" :summary-method="summarizeMainTable" show-summary :row-key="row => row.id">
        <el-table-column label="序号" width="60" align="center">
          <template #default="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="工序" prop="process" width="150">
          <template #default="scope">
                  <el-input v-model="scope.row.process" placeholder="请输入工序" />
          </template>
        </el-table-column>
      <el-table-column label="产线" prop="productionLine" width="150">
          <template #default="scope">
            <el-select
              v-model="scope.row.productionLine"
              placeholder="选择产线"
              style="width: 100%;"
              clearable
            >
              <el-option
                v-for="line in productionLines"
                :key="line.value"
                :label="line.label"
                :value="line.value"
              />
            </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-select>
          </template>
        </el-table-column>
        <el-table-column label="单位" prop="unit" width="90">
          <template #default="scope">
            <el-input v-model="scope.row.unit" placeholder="请输入单位" />
          </template>
        </el-table-column>
        <el-table-column label="口味/品名/规格" prop="type" width="150">
          <template #default="scope">
            <el-input v-model="scope.row.type" placeholder="请输入" />
          </template>
        </el-table-column>
        <el-table-column label="排产数量" width="200" prop="schedulingNum">
          <template #default="scope">
                  <el-input-number
                     v-model="scope.row.schedulingNum"
                     placeholder="请输入"
                     :min="0"
                     :step="0.1"
                     :precision="2"
                     clearable
                     style="width: 100%"
                  />
          </template>
        </el-table-column>
        <el-table-column label="工时定额" width="200" prop="workHours">
          <template #default="scope">
                  <el-input-number
                     v-model="scope.row.workHours"
                     placeholder="请输入"
                     :min="0"
                     :step="0.1"
                     :precision="2"
                     clearable
                     style="width: 100%"
                  />
          </template>
        </el-table-column>
        <el-table-column label="排产日期" prop="schedulingDate" width="200">
          <template #default="scope">
            <el-date-picker v-model="scope.row.schedulingDate" type="date" placeholder="选择日期" style="width: 100%;" value-format="YYYY-MM-DD" format="YYYY-MM-DD"/>
          </template>
        </el-table-column>
        <el-table-column label="排产人" prop="schedulingUserId" width="150">
          <template #default="scope">
                  <el-select
                     v-model="scope.row.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>
          </template>
        </el-table-column>
        <el-table-column label="备注" prop="remark" width="200">
          <template #default="scope">
            <el-input v-model="scope.row.remark" placeholder="请输入备注" />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="80">
          <template #default="scope">
            <el-button type="danger" size="small" @click="removeRow(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
         <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 {ref, getCurrentInstance} from "vue";
import {userListNoPageByTenantId} from "@/api/system/user.js";
import {processScheduling} from "@/api/productionManagement/operationScheduling.js";
const { proxy } = getCurrentInstance()
const { work_step } = proxy.useDict("work_step")
const emit = defineEmits(['close'])

const dialogFormVisible = ref(false);
const operationType = ref('')
const data = reactive({
  form: {
    staffNo: "",
    staffName: "",
    sex: "",
    nativePlace: "",
    postJob: "",
    adress: "",
    firstStudy: "",
    profession: "",
    identityCard: "",
    age: 0,
    phone: "",
    emergencyContact: "",
    emergencyContactPhone: "",
    contractTerm: 0,
    contractStartTime: "",
    contractEndTime: "",
    staffState: "",
  },
  rules: {
    staffNo: [{ required: true, message: "请输入", trigger: "blur" },],
    staffName: [{ required: true, message: "请输入", trigger: "blur" }],
    sex: [{ required: true, message: "请输入", trigger: "blur" }],
    nativePlace: [{ required: true, message: "请输入", trigger: "blur" }],
    postJob: [{ required: true, message: "请输入", trigger: "blur" }],
    adress: [{ required: true, message: "请输入", trigger: "blur" }],
    firstStudy: [{ required: true, message: "请输入", trigger: "blur" }],
    profession: [{ required: true, message: "请输入", trigger: "blur" }],
    identityCard: [{ required: true, message: "请输入", trigger: "blur" }],
    age: [{ required: true, message: "请输入", trigger: "blur" }],
    phone: [{ required: true, message: "请输入", trigger: "blur" }],
    emergencyContact: [{ required: true, message: "请输入", trigger: "blur" }],
    emergencyContactPhone: [{ required: true, message: "请输入", trigger: "blur" }],
    contractTerm: [{ required: true, message: "请输入", trigger: "blur" }],
    contractStartTime: [{ required: true, message: "请输入", trigger: "blur" }],
    contractEndTime: [{ required: true, message: "请输入", trigger: "blur" }],
  },
});
const { form, rules } = toRefs(data);
const tableData = ref([]);
const unitFromRow = ref('');
const idFromRow = ref('');
const specificationModelFromRow = ref('');
const pendingNum = ref(0);
const userList = ref([])
const receive = ref('')
const sunqianUserId = ref('')
// 产线选项
const productionLines = ref([
  { label: '产线1', value: '产线1' },
  { label: '产线2', value: '产线2' },
  { label: '产线3', value: '产线3' },
  { label: '产线4', value: '产线4' }
])

// 打开弹框
const openDialog = (type, row) => {
  operationType.value = type;
  dialogFormVisible.value = true;
  if (operationType.value === 'edit') {
    getStaffJoinInfo(row.id).then(res => {
      form.value = {...res.data}
    })
  }
}
// 提交产品表单
const submitForm = () => {
  proxy.$refs.formRef.validate(valid => {
    if (valid) {
      form.value.staffState = 1
      if (operationType.value === "add") {
        staffJoinAdd(form.value).then(res => {
          proxy.$modal.msgSuccess("提交成功");
          closeDia();
        })
      } else {
        staffJoinUpdate(form.value).then(res => {
          proxy.$modal.msgSuccess("提交成功");
          closeDia();
        })
      }
    }
  })
   pendingNum.value = row?.pendingNum ?? 0;
   unitFromRow.value = row?.unit ?? '';
   idFromRow.value = row?.id ?? '';
   specificationModelFromRow.value = row?.specificationModel ?? '';
	
   userListNoPageByTenantId().then((res) => {
      userList.value = res.data;
      // 找到孙倩的用户ID并设置为默认值
      const sunqianUser = userList.value.find(user => user.nickName === '孙倩');
      if (sunqianUser) {
         sunqianUserId.value = sunqianUser.userId;
      }
      // 在用户列表加载完成后创建行数据
      tableData.value = [createRow()];
   });
}

const createRow = () => ({
   id: idFromRow.value,
   process: '包装',
   schedulingDate: '',
   schedulingNum: null,
   schedulingUserId: sunqianUserId.value, // 默认设置为孙倩的用户ID
   workHours: null,
   unit: unitFromRow.value,
   remark: '',
   type: specificationModelFromRow.value,
   productionLine: '', // 产线字段
});

const submitForm = () => {
   // 1. 检查每一行是否填写完整
   for (let i = 0; i < tableData.value.length; i++) {
      const row = tableData.value[i];
      if (
         !row.process ||
         !row.schedulingDate ||
         row.schedulingNum === '' || row.schedulingNum === null ||
         !row.schedulingUserId ||
         row.workHours === '' || row.workHours === null ||
         !row.unit ||
         !row.productionLine
      ) {
         proxy.$modal.msgError(`第${i + 1}行数据未填写完整`);
         return;
      }
   }
   // 2. 合计排产数量
   const totalSchedulingNum = tableData.value.reduce((sum, row) => {
      return sum + Number(row.schedulingNum || 0);
   }, 0);
   if (totalSchedulingNum > Number(pendingNum.value)) {
      proxy.$modal.msgError('排产数量合计不能超过待排产数量');
      return;
   }
   // 3. 将 receive 字段添加到每条数据中，并移除 loss 字段
   const submitData = tableData.value.map(row => {
      const { loss, ...rest } = row;
      return {
         ...rest,
         receive: receive.value
      };
   });
   processScheduling(submitData).then((res) => {
      proxy.$modal.msgSuccess("提交成功");
      closeDia();
   })
}
const summarizeMainTable = (param) => {
   return proxy.summarizeTable(param, ['schedulingNum']);
};
// 关闭弹框
const closeDia = () => {
  proxy.resetForm("formRef");
  dialogFormVisible.value = false;
  receive.value = '';
  tableData.value = [];
  unitFromRow.value = '';
  idFromRow.value = '';
  specificationModelFromRow.value = '';
  pendingNum.value = 0;
  emit('close')
};
defineExpose({
  openDialog,
});

const addRow = () => {
  tableData.value.push(createRow());
};
const removeRow = (index) => {
  tableData.value.splice(index, 1);
};
</script>

<style scoped>