zhangwencui
2026-04-30 3fa1df3286670f5480fc1eca31ef81d30b6865f5
src/pages/productionManagement/productionDispatching/components/DispatchModal.vue
@@ -1,149 +1,130 @@
<template>
   <up-popup
      v-model:show="show"
  <up-popup v-model:show="show"
      mode="bottom" 
      :round="20"
      :safeAreaInsetBottom="true"
      @close="handleClose"
      @open="handleOpen"
   >
            @open="handleOpen">
      <view class="dispatch-modal">
         <!-- 头部 -->
         <view class="modal-header">
            <text class="modal-title">生产派工</text>
            <view class="close-btn" @click="handleClose">
               <up-icon name="close" size="20" color="#999"></up-icon>
        <view class="close-btn"
              @click="handleClose">
          <up-icon name="close"
                   size="20"
                   color="#999"></up-icon>
            </view>
         </view>
         <!-- 表单内容 -->
         <view class="modal-content">
            <up-form
               :model="form"
        <up-form :model="form"
               ref="formRef"
               :rules="rules"
               labelWidth="120"
            >
                 labelWidth="120">
               <!-- 项目基本信息 -->
               <view class="form-section">
                  <text class="section-title">项目信息</text>
                  <up-form-item label="项目名称" prop="projectName">
                     <up-input
                        v-model="form.projectName"
            <up-form-item label="项目名称"
                          prop="projectName">
              <up-input v-model="form.projectName"
                        disabled 
                        placeholder="项目名称"
                     />
                        placeholder="项目名称" />
                  </up-form-item>
                  <up-form-item label="产品大类" prop="productCategory">
                     <up-input
                        v-model="form.productCategory"
            <up-form-item label="产品大类"
                          prop="productCategory">
              <up-input v-model="form.productCategory"
                        disabled 
                        placeholder="产品大类"
                     />
                        placeholder="产品大类" />
                  </up-form-item>
               </view>
               <!-- 数量信息 -->
               <view class="form-section">
                  <text class="section-title">数量信息</text>
                  <up-form-item label="总数量" prop="quantity">
                     <up-input
                        v-model="form.quantity"
            <up-form-item label="总数量"
                          prop="quantity">
              <up-input v-model="form.quantity"
                        disabled 
                        placeholder="总数量"
                     />
                        placeholder="总数量" />
                  </up-form-item>
                  <up-form-item label="待排产数量" prop="pendingQuantity">
                     <up-input
                        v-model="form.pendingQuantity"
            <up-form-item label="待排产数量"
                          prop="pendingQuantity">
              <up-input v-model="form.pendingQuantity"
                        disabled 
                        placeholder="待排产数量"
                     />
                        placeholder="待排产数量" />
                  </up-form-item>
                  <up-form-item label="本次排产数量" prop="schedulingNum" required>
                     <up-number-box
                        v-model="form.schedulingNum"
            <up-form-item label="本次排产数量"
                          prop="schedulingNum"
                          required>
              <up-number-box v-model="form.schedulingNum"
                        :min="0"
                        :max="form.pendingQuantity"
                        :step="0.1"
                        :precision="2"
                        @change="handleNumChange"
                     />
                             @change="handleNumChange" />
                  </up-form-item>
               </view>
               <!-- 派工信息 -->
               <view class="form-section">
                  <text class="section-title">派工信息</text>
                  <up-form-item label="派工人" prop="schedulingUserId" required>
                     <up-input
                        v-model="selectedUserName"
            <up-form-item label="派工人"
                          prop="schedulingUserId"
                          required>
              <up-input v-model="selectedUserName"
                        placeholder="请选择派工人"
                        readonly
                        @click="showUserPicker = true"
                        suffixIcon="arrow-down"
                     />
                        suffixIcon="arrow-down" />
                  </up-form-item>
                  <up-form-item label="派工日期" prop="schedulingDate" required>
                     <up-input
                        v-model="form.schedulingDate"
            <up-form-item label="派工日期"
                          prop="schedulingDate"
                          required>
              <up-input v-model="form.schedulingDate"
                        placeholder="请选择派工日期"
                        readonly
                        @click="showDatePicker = true"
                        suffixIcon="calendar"
                     />
                        suffixIcon="calendar" />
                  </up-form-item>
               </view>
            </up-form>
         </view>
         <!-- 底部按钮 -->
         <view class="modal-footer">
            <up-button
               @click="handleClose"
        <up-button @click="handleClose"
               text="取消"
               type="info"
               plain
               :customStyle="{ marginRight: '12px', flex: 1 }"
            />
            <up-button
               @click="handleConfirm"
                   :customStyle="{ marginRight: '12px', flex: 1 }" />
        <up-button @click="handleConfirm"
               text="确认派工"
               type="primary"
               :customStyle="{ flex: 1 }"
               :loading="submitting"
            />
                   :loading="submitting" />
         </view>
      </view>
      <!-- 人员选择器 -->
      <up-picker
         v-model="showUserPicker"
    <up-picker v-model="showUserPicker"
         :columns="userColumns"
         @confirm="handleUserSelect"
         @cancel="showUserPicker = false"
      />
               @cancel="showUserPicker = false" />
      <!-- 日期选择器 -->
      <up-datetime-picker
         v-model="showDatePicker"
    <up-datetime-picker v-model="showDatePicker"
         mode="date"
         @confirm="handleDateSelect"
         @cancel="showDatePicker = false"
      />
                        @cancel="showDatePicker = false" />
   </up-popup>
</template>
<script setup>
import { ref, reactive, computed, getCurrentInstance } from 'vue';
  import { ref, reactive, computed, getCurrentInstance } from "vue";
import { userListNoPageByTenantId } from "@/api/system/user.js";
import { productionDispatch } from "@/api/productionManagement/productionOrder.js";
  // import { productionDispatch } from "@/api/productionManagement/productionOrder.js";
import useUserStore from "@/store/modules/user";
import dayjs from "dayjs";
const { proxy } = getCurrentInstance();
const userStore = useUserStore();
const emit = defineEmits(['confirm']);
  const emit = defineEmits(["confirm"]);
// 弹窗显示状态
const show = ref(false);
@@ -158,14 +139,14 @@
const userColumns = computed(() => [
   userList.value.map(user => ({
      label: user.nickName,
      value: user.userId
   }))
      value: user.userId,
    })),
]);
// 选中的用户名称(用于显示)
const selectedUserName = computed(() => {
   const user = userList.value.find(u => u.userId === form.schedulingUserId);
   return user ? user.nickName : '';
    return user ? user.nickName : "";
});
// 表单数据
@@ -177,27 +158,27 @@
   schedulingUserId: "",
   schedulingDate: "",
   pendingQuantity: 0,
   id: "" // 原始记录ID
    id: "", // 原始记录ID
});
// 表单验证规则
const rules = reactive({
   schedulingNum: [
      { required: true, message: "请输入排产数量", trigger: "blur" }
      { required: true, message: "请输入排产数量", trigger: "blur" },
   ],
   schedulingUserId: [
      { required: true, message: "请选择派工人", trigger: "change" }
      { required: true, message: "请选择派工人", trigger: "change" },
   ],
   schedulingDate: [
      { required: true, message: "请选择派工日期", trigger: "change" }
   ]
      { required: true, message: "请选择派工日期", trigger: "change" },
    ],
});
// 表单引用
const formRef = ref();
// 打开弹窗
const open = async (rowData) => {
  const open = async rowData => {
   try {
      // 加载用户列表
      const res = await userListNoPageByTenantId();
@@ -208,31 +189,31 @@
         ...rowData,
         schedulingNum: 0,
         schedulingUserId: userStore.id,
         schedulingDate: dayjs().format("YYYY-MM-DD")
        schedulingDate: dayjs().format("YYYY-MM-DD"),
      });
      
      show.value = true;
   } catch (error) {
      uni.showToast({
         title: '加载用户列表失败',
         icon: 'error'
        title: "加载用户列表失败",
        icon: "error",
      });
   }
};
// 处理数量变化
const handleNumChange = (value) => {
  const handleNumChange = value => {
   if (value > form.pendingQuantity) {
      form.schedulingNum = form.pendingQuantity;
      uni.showToast({
         title: '排产数量不可大于待排产数量',
         icon: 'none'
        title: "排产数量不可大于待排产数量",
        icon: "none",
      });
   }
};
// 处理用户选择
const handleUserSelect = (params) => {
  const handleUserSelect = params => {
   if (params.value && params.value.length > 0) {
      form.schedulingUserId = params.value[0];
   }
@@ -240,7 +221,7 @@
};
// 处理日期选择
const handleDateSelect = (params) => {
  const handleDateSelect = params => {
   if (params.value) {
      form.schedulingDate = dayjs(params.value).format("YYYY-MM-DD");
   }
@@ -256,8 +237,8 @@
      
      if (form.schedulingNum <= 0) {
         uni.showToast({
            title: '排产数量必须大于0',
            icon: 'none'
          title: "排产数量必须大于0",
          icon: "none",
         });
         return;
      }
@@ -265,20 +246,19 @@
      submitting.value = true;
      
      // 提交派工数据
      await productionDispatch(form);
      // await productionDispatch(form);
      
      uni.showToast({
         title: '派工成功',
         icon: 'success'
        title: "派工成功",
        icon: "success",
      });
      
      handleClose();
      emit('confirm');
      emit("confirm");
   } catch (error) {
      uni.showToast({
         title: '派工失败',
         icon: 'error'
        title: "派工失败",
        icon: "error",
      });
   } finally {
      submitting.value = false;
@@ -305,13 +285,13 @@
      schedulingUserId: "",
      schedulingDate: "",
      pendingQuantity: 0,
      id: ""
      id: "",
   });
};
// 暴露方法
defineExpose({
   open
    open,
});
</script>