周宾
5 天以前 20215f3e0a35ab72d3011b3c88574ca8a15b7773
src/pages/productionManagement/productionDispatching/components/DispatchModal.vue
@@ -1,7 +1,7 @@
<template>
   <up-popup
      v-model:show="show"
      mode="bottom"
   <uni-popup
      ref="popupRef"
      type="bottom"
      :round="20"
      :safeAreaInsetBottom="true"
      @close="handleClose"
@@ -26,19 +26,33 @@
            >
               <!-- 项目基本信息 -->
               <view class="form-section">
                  <text class="section-title">项目信息</text>
                  <up-form-item label="项目名称" prop="projectName">
                  <text class="section-title">产品信息</text>
               <!--    <up-form-item label="项目名称" prop="projectName">
                     <up-input 
                        v-model="form.projectName" 
                        disabled 
                        placeholder="项目名称"
                     />
                  </up-form-item>
                  </up-form-item> -->
                  <up-form-item label="产品大类" prop="productCategory">
                     <up-input 
                        v-model="form.productCategory" 
                        disabled 
                        placeholder="产品大类"
                     />
                  </up-form-item>
                  <up-form-item label="规格型号" prop="specificationModel">
                     <up-input
                        v-model="form.specificationModel"
                        disabled
                        placeholder="规格型号"
                     />
                  </up-form-item>
                  <up-form-item label="绑定机器" prop="speculativeTradingName">
                     <up-input
                        v-model="form.speculativeTradingName"
                        disabled
                        placeholder="绑定机器"
                     />
                  </up-form-item>
               </view>
@@ -76,22 +90,14 @@
               <view class="form-section">
                  <text class="section-title">派工信息</text>
                  <up-form-item label="派工人" prop="schedulingUserId" required>
                     <up-input
                        v-model="selectedUserName"
                        placeholder="请选择派工人"
                        readonly
                        @click="showUserPicker = true"
                        suffixIcon="arrow-down"
                     />
                     <uni-data-select v-model="form.schedulingUserId" :localdata="userColumns" :clear="false"></uni-data-select>
                  </up-form-item>
                  <up-form-item label="派工日期" prop="schedulingDate" required>
                     <up-input
                        v-model="form.schedulingDate"
                        placeholder="请选择派工日期"
                        readonly
                        @click="showDatePicker = true"
                        suffixIcon="calendar"
                     />
                     <uni-datetime-picker type="date" :clear-icon="false" v-model="form.schedulingDate">
                        <view class="datetime-picker-value">
                           {{form.schedulingDate}}
                        </view>
                     </uni-datetime-picker>
                  </up-form-item>
               </view>
            </up-form>
@@ -115,23 +121,7 @@
            />
         </view>
      </view>
      <!-- 人员选择器 -->
      <up-picker
         v-model="showUserPicker"
         :columns="userColumns"
         @confirm="handleUserSelect"
         @cancel="showUserPicker = false"
      />
      <!-- 日期选择器 -->
      <up-datetime-picker
         v-model="showDatePicker"
         mode="date"
         @confirm="handleDateSelect"
         @cancel="showDatePicker = false"
      />
   </up-popup>
   </uni-popup>
</template>
<script setup>
@@ -146,26 +136,16 @@
const emit = defineEmits(['confirm']);
// 弹窗显示状态
const show = ref(false);
const popupRef = ref();
const submitting = ref(false);
// 选择器显示状态
const showUserPicker = ref(false);
const showDatePicker = ref(false);
// 用户列表
const userList = ref([]);
const userColumns = computed(() => [
   userList.value.map(user => ({
      label: user.nickName,
const userColumns = computed(() => {
   return userList.value.map(user => ({
      text: user.nickName,
      value: user.userId
   }))
]);
// 选中的用户名称(用于显示)
const selectedUserName = computed(() => {
   const user = userList.value.find(u => u.userId === form.schedulingUserId);
   return user ? user.nickName : '';
});
// 表单数据
@@ -182,15 +162,15 @@
// 表单验证规则
const rules = reactive({
   schedulingNum: [
      { required: true, message: "请输入排产数量", trigger: "blur" }
   ],
   schedulingUserId: [
      { required: true, message: "请选择派工人", trigger: "change" }
   ],
   schedulingDate: [
      { required: true, message: "请选择派工日期", trigger: "change" }
   ]
   // schedulingNum: [
   //    { required: true, message: "请输入排产数量", trigger: "blur" }
   // ],
   // schedulingUserId: [
   //    { required: true, message: "请选择派工人", trigger: "change" }
   // ],
   // schedulingDate: [
   //    { required: true, message: "请选择派工日期", trigger: "change" }
   // ]
});
// 表单引用
@@ -210,9 +190,9 @@
         schedulingUserId: userStore.id,
         schedulingDate: dayjs().format("YYYY-MM-DD")
      });
      show.value = true;
      popupRef.value.open()
   } catch (error) {
      console.log(error)
      uni.showToast({
         title: '加载用户列表失败',
         icon: 'error'
@@ -231,29 +211,30 @@
   }
};
// 处理用户选择
const handleUserSelect = (params) => {
   if (params.value && params.value.length > 0) {
      form.schedulingUserId = params.value[0];
   }
   showUserPicker.value = false;
};
// 处理日期选择
const handleDateSelect = (params) => {
   if (params.value) {
      form.schedulingDate = dayjs(params.value).format("YYYY-MM-DD");
   }
   showDatePicker.value = false;
};
// 确认派工
const handleConfirm = async () => {
   if(!form.schedulingNum){
      uni.showToast({
         title: '请输入排产数量',
         icon:'none'
      })
      return
   }
   if(!form.schedulingUserId){
      uni.showToast({
         title: '请选择派工人',
         icon:'none'
      })
      return
   }
   if(!form.schedulingDate){
      uni.showToast({
         title: '请选择派工日期',
         icon:'none'
      })
      return
   }
   try {
      // 表单验证
      const valid = await formRef.value?.validate();
      if (!valid) return;
      if (form.schedulingNum <= 0) {
         uni.showToast({
            title: '排产数量必须大于0',
@@ -292,10 +273,7 @@
// 关闭弹窗
const handleClose = () => {
   show.value = false;
   showUserPicker.value = false;
   showDatePicker.value = false;
   popupRef.value.close()
   // 重置表单
   Object.assign(form, {
      projectName: "",
@@ -353,6 +331,24 @@
   flex: 1;
   padding: 0 20px;
   overflow-y: auto;
   .datetime-picker-value{
      font-size: 14px;
      border: 1px solid #e5e5e5;
      box-sizing: border-box;
      border-radius: 4px;
      padding: 0 5px;
      padding-left: 10px;
      position: relative;
      display: flex;
      -webkit-user-select: none;
      -moz-user-select: none;
      user-select: none;
      flex-direction: row;
      align-items: center;
      width: 100%;
      flex: 1;
      height: 35px;
   }
}
.form-section {