You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
141 lines
4.3 KiB
Vue
141 lines
4.3 KiB
Vue
<template>
|
|
<view>
|
|
<u-sticky
|
|
class="sticky"
|
|
:custom-nav-height="0"
|
|
>
|
|
<u-navbar
|
|
title="新增派工"
|
|
bg-color="transparent"
|
|
:auto-back="true"
|
|
:title-style="{ fontWeight: 'bold' }"
|
|
safe-area-inset-top
|
|
placeholder
|
|
/>
|
|
</u-sticky>
|
|
<view class="container">
|
|
<!-- 自定义表单校验 -->
|
|
<uni-forms ref="customForm" :rules="customRules" labelWidth="80px" :modelValue="formData">
|
|
<uni-forms-item label="工位" required name="name">
|
|
<u-input v-model="name" placholder="请输入名称" disabled/>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="班别" required name="groupType">
|
|
<uni-data-checkbox v-model="formData.groupType" :localdata="groupTypes" @change="getUserList"/>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="工作日期" required name="planDates">
|
|
<u-input v-model="formData.planDates" placeholder="请选择工作日期" prefixIcon="calendar" @click="show=true"></u-input>
|
|
<u-calendar :show="show" mode="multiple" @confirm="confirm" @close="show=false"></u-calendar>
|
|
</uni-forms-item>
|
|
<uni-forms-item v-if="formData.groupType" required label="工人" name="workerId">
|
|
<uni-data-select v-model="formData.workerId" :localdata="userList"/>
|
|
</uni-forms-item>
|
|
</uni-forms>
|
|
<view class="u-flex justify-end">
|
|
<view @click="submit()">
|
|
<u-button type="primary">
|
|
<uni-icons type="checkbox" class="u-m-r-10"/>
|
|
确定
|
|
</u-button></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from "vue";
|
|
import { onLoad, onReady } from "@dcloudio/uni-app";
|
|
import tab from "@/plugins/tab";
|
|
import modal from "@/plugins/modal";
|
|
import { groupTypes } from "@/api/system/dict/data";
|
|
import { createWorker, getUserList2 } from "@/api/mes/deskArrangement";
|
|
|
|
const formData = ref({
|
|
orgId: undefined,
|
|
groupType: undefined,
|
|
workerId: undefined,
|
|
planDates: undefined,
|
|
orgType: undefined
|
|
})
|
|
|
|
const name = ref('')
|
|
|
|
const userList = ref([])
|
|
/** 工序类型变化，可选负责人跟着变化 */
|
|
const getUserList = ()=>{
|
|
if(formData.value.orgId && formData.value.groupType) {
|
|
getUserList2({ orgId: formData.value.orgId, groupType: formData.value.groupType } ).then(response => {
|
|
userList.value = response.data
|
|
userList.value.forEach(user => {
|
|
user.text = user.nickname;
|
|
user.value = user.id;
|
|
delete user.nickname;
|
|
delete user.id;
|
|
});
|
|
})
|
|
}
|
|
}
|
|
const customForm = ref()
|
|
// 自定义表单校验规则
|
|
const customRules = ref({
|
|
groupType: { rules: [{ required: true, errorMessage: '班别不能为空'}]},
|
|
workerId: { rules: [{ required: true, errorMessage: '工人不能为空'}]},
|
|
planDates: { rules: [{ required: true, errorMessage: '工作日期不能为空'}]}
|
|
})
|
|
|
|
const submit = ()=>{
|
|
customForm.value.validate(async(valid)=>{
|
|
if(!valid){
|
|
// 日期格式化
|
|
for (let i = 0; i < formData.value.planDates.length; i++) {
|
|
const dateObj = new Date(formData.value.planDates[i]);
|
|
formData.value.planDates[i] = dateObj.toISOString().replace('T', ' ').split('.')[0];
|
|
}
|
|
await createWorker(formData.value)
|
|
modal.msgSuccess("保存成功")
|
|
await tab.navigateBack()
|
|
uni.$emit('success', true)
|
|
}
|
|
})
|
|
}
|
|
|
|
onReady(()=>{
|
|
// 设置自定义表单校验规则，必须在节点渲染完毕后执行
|
|
customForm.value.setRules(customRules.value)
|
|
})
|
|
|
|
const show = ref(false)
|
|
const confirm = (e)=>{
|
|
formData.value.planDates = e
|
|
show.value = false
|
|
}
|
|
|
|
onLoad(() => {
|
|
name.value = tab.getParams().name
|
|
formData.value.orgId = tab.getParams().id
|
|
formData.value.orgType = tab.getParams().orgType
|
|
getUserList()
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="sass">
|
|
.sticky
|
|
background: linear-gradient(180deg, #d4e9ff 0%, #f3f9ff 100%)
|
|
backdrop-filter: blur(27.18px)
|
|
box-shadow: 0 1px 1px 0 rgba(0, 72, 145, 0.1), 0 0.5px 0 0 rgba(0, 0, 0, 0.1)
|
|
padding-bottom: 20rpx
|
|
.container
|
|
padding: 20rpx
|
|
margin: 20rpx
|
|
background-color: #ffffff
|
|
.uniui-checkbox:before
|
|
color: #ffffff
|
|
.u-button
|
|
height: 70rpx
|
|
:deep(.u-calendar-header)
|
|
padding: 40rpx
|
|
:deep(.u-calendar-header__title)
|
|
display: block
|
|
:deep(.u-calendar-month__title)
|
|
padding: 40rpx
|
|
</style>
|