| | |
| | | <template> |
| | | <up-popup |
| | | v-model:show="show" |
| | | mode="bottom" |
| | | <uni-popup |
| | | ref="popupRef" |
| | | type="bottom" |
| | | :round="20" |
| | | :safeAreaInsetBottom="true" |
| | | @close="handleClose" |
| | |
| | | > |
| | | <!-- 项目基本信息 --> |
| | | <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> |
| | |
| | | <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> |
| | |
| | | /> |
| | | </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> |
| | |
| | | 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 : ''; |
| | | }); |
| | | |
| | | // 表单数据 |
| | |
| | | |
| | | // 表单验证规则 |
| | | 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" } |
| | | // ] |
| | | }); |
| | | |
| | | // 表单引用 |
| | |
| | | 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' |
| | |
| | | } |
| | | }; |
| | | |
| | | // 处理用户选择 |
| | | 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', |
| | |
| | | |
| | | // 关闭弹窗 |
| | | const handleClose = () => { |
| | | show.value = false; |
| | | showUserPicker.value = false; |
| | | showDatePicker.value = false; |
| | | |
| | | popupRef.value.close() |
| | | // 重置表单 |
| | | Object.assign(form, { |
| | | projectName: "", |
| | |
| | | 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 { |