<template>
|
<div class="fp">
|
<div class="fp_list">
|
<div class="fp_list_item">
|
<div class="fp_list_item_left">
|
<b>*</b>
|
<span>计划生产数量：</span>
|
</div>
|
<div class="fp_list_item_right">
|
<input type="number" v-model="form.num" placeholder="请输入" />
|
</div>
|
</div>
|
<div class="fp_list_item" @click="openTime">
|
<div class="fp_list_item_left">
|
<b>*</b>
|
<span>计划开工日期：</span>
|
</div>
|
<div class="fp_list_item_right">
|
<span class="black" v-if="form.startTime">{{form.startTime}}</span>
|
<span v-else>年 / 月 / 日</span>
|
<van-icon name="arrow" color="#999999" />
|
</div>
|
</div>
|
<div class="fp_list_item" @click="openSB">
|
<div class="fp_list_item_left">
|
<span>生产设备</span>
|
</div>
|
<div class="fp_list_item_right">
|
<span v-if="form.equipmentName" class="black">{{form.equipmentName}}</span>
|
<span v-else>请选择</span>
|
<van-icon name="arrow" color="#999999" />
|
</div>
|
</div>
|
<div class="fp_list_item1" v-show="form.equipmentName">
|
<div class="fp_list_item_left">
|
<span>生产人员</span>
|
</div>
|
<div class="fp_list_item_right">
|
<van-checkbox-group v-model="form.personnelId" direction="horizontal" v-show="personnelData.length > 0">
|
<van-checkbox :name="item.id" v-for="item in personnelData" checked-color="#4275FC">{{item.text}}</van-checkbox>
|
</van-checkbox-group>
|
<div class="wu" v-show="personnelData.length === 0">
|
<span>暂无数据</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="fp_footer">
|
<div class="fp_footer_close" @click="go">取消</div>
|
<button class="fp_footer_submit" @click="submit" v-preventReClick>确认</button>
|
</div>
|
</div>
|
<!-- 选择时间 -->
|
<van-calendar v-model:show="isOpenDate" color="#4275FC" @confirm="onConfirm" />
|
<!-- 选择设备 -->
|
<van-popup v-model:show="show1" position="bottom" round :style="{ height: '50%' }">
|
<van-picker
|
title="选择生产设备"
|
:columns="equipment"
|
@confirm="onConfirms1"
|
@cancel="onCancel1"
|
/>
|
</van-popup>
|
</template>
|
|
<script setup lang="ts">
|
import { ref, reactive, onMounted } from 'vue'
|
import { gsdate } from "@/utils/utils"
|
import { useRoute, useRouter } from "vue-router"
|
import { distributeById, getFindAll, getDeviceByCondition } from '@/apis/PlanningAPI'
|
import { Toast } from 'vant'
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
// 控制选择设备
|
const show1 = ref<boolean>(false)
|
|
// 表单待提交数据
|
const form = reactive<{equipmentName: string, num: string, startTime: string, personnelId: Array<any>, equipmentId: string}>({
|
num: route.query.num as string, // 生产数量
|
startTime: gsdate(new Date()), // 开始时间
|
equipmentId: '', // 设备id
|
equipmentName: '', // 设备名称
|
personnelId: [] // 人员id
|
})
|
|
// 设备数据
|
let equipment: any = ref([])
|
|
// 人员数据
|
let personnelData = ref([])
|
|
// 控制选择日期显示隐藏
|
const isOpenDate = ref<boolean>(false)
|
|
// 确认选择日期
|
const onConfirm = (values: any) => {
|
form.startTime = gsdate(values)
|
isOpenDate.value = false;
|
}
|
|
// 打开选择时间弹框
|
const openTime = () => {
|
isOpenDate.value = true
|
}
|
|
// 打开选择设备弹框
|
const openSB = () => {
|
show1.value = true
|
}
|
|
// 确认选择设备
|
const onConfirms1 = (value: any, index: any) => {
|
form.equipmentId = value.id
|
form.equipmentName = value.text
|
personnelData.value = []
|
getFindAll({
|
deviceId: form.equipmentId
|
}).then(res => {
|
if (res.code === 200 && res.data && res.data.length !== 0) {
|
form.personnelId = []
|
let arr: any = []
|
res.data.forEach((item: any) => {
|
arr.push({ text: item.dmodel.name + '-' + item.umodel.name, id: item.userId })
|
})
|
personnelData.value = arr
|
}
|
show1.value = false
|
})
|
};
|
|
// 关闭生产设备
|
const onCancel1 = () => {
|
show1.value = false
|
}
|
|
// 返回
|
const go = () => {
|
router.go(-1)
|
}
|
|
// 提交分配
|
const submit = () => {
|
if (!form.num) return Toast('计划生产数量不能为空！')
|
if (!form.startTime) return Toast('计划开始日期不能为空！')
|
distributeById({
|
planId: route.query.jhid,
|
planNum: form.num,
|
planDate: form.startTime,
|
proGroupId: form.equipmentId,
|
proUserList: form.personnelId
|
}).then(res => {
|
if (res.code === 200) {
|
Toast.success({ message: '分配成功', duration: 2000, forbidClick: true })
|
setTimeout(() => {
|
router.go(-1)
|
}, 2000)
|
}
|
})
|
}
|
|
// 查询设备
|
const getDeviceByConditions = () => {
|
getDeviceByCondition({})
|
.then(res => {
|
if (res.code === 200) {
|
res.data.forEach((element: any) => {
|
equipment.value.push({ text: element.code + '-' + element.name, id: element.id })
|
})
|
}
|
})
|
}
|
|
onMounted(() => {
|
getDeviceByConditions()
|
})
|
</script>
|
|
<style scoped>
|
.van-radio-group--horizontal, .van-checkbox-group--horizontal {
|
flex-direction: column !important;
|
}
|
.fp .fp_list .fp_list_item1 .fp_list_item_right[data-v-4a3f2565] .van-checkbox:nth-child(1) {
|
margin-top: 10px !important;
|
}
|
.fp .fp_list .fp_list_item1 .fp_list_item_right[data-v-4a3f2565] .van-checkbox:not(:first-child) {
|
margin-top: 20px !important;
|
}
|
</style>
|
|
<style lang="scss" scoped>
|
.fp {
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
background: #F7F7F7;
|
.fp_list {
|
display: flex;
|
flex-direction: column;
|
.fp_list_item1 {
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
padding: 20px 30px;
|
box-sizing: border-box;
|
background: #ffffff;
|
border-bottom: 1px solid #ececec;
|
.fp_list_item_left {
|
flex-shrink: 0;
|
margin-bottom: 20px;
|
b {
|
color: $nav-stateColor4;
|
font-size: 28px;
|
margin-right: 5px;
|
}
|
span {
|
color: #222222;
|
font-size: 30px;
|
font-weight: 400;
|
}
|
}
|
.fp_list_item_right v-deep {
|
display: flex;
|
align-items: center;
|
.wu {
|
width: 100%;
|
margin: 30px 0;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
span {
|
font-size: 26px;
|
color: black;
|
}
|
}
|
.van-checkbox {
|
margin-right: 5px !important;
|
margin-top: 10px !important;
|
&:nth-child(1) {
|
margin-top: 0 !important;
|
}
|
&:nth-child(2) {
|
margin-top: 0 !important;
|
}
|
&:nth-child(3) {
|
margin-top: 0 !important;
|
}
|
.van-checkbox__label {
|
color: black !important;
|
}
|
}
|
.black {
|
color: black !important;
|
}
|
input {
|
width: 180px;
|
height: 60px;
|
border-radius: 8px;
|
border: 1PX solid #E5E5E5;
|
padding: 0 30px;
|
text-align: right;
|
font-size: 25px;
|
}
|
span {
|
font-size: 28px;
|
font-weight: 400;
|
color: #999999;
|
margin-right: 20px;
|
}
|
}
|
}
|
.fp_list_item {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 0 30px;
|
height: 98px;
|
box-sizing: border-box;
|
background: #ffffff;
|
border-bottom: 1px solid #ececec;
|
.fp_list_item_left {
|
flex-shrink: 0;
|
b {
|
color: $nav-stateColor4;
|
font-size: 28px;
|
margin-right: 5px;
|
}
|
span {
|
color: #222222;
|
font-size: 30px;
|
font-weight: 400;
|
}
|
}
|
.fp_list_item_right {
|
display: flex;
|
align-items: center;
|
.wu {
|
text-align: center;
|
span {
|
font-size: 26px;
|
color: black;
|
}
|
}
|
.black {
|
color: black !important;
|
}
|
input {
|
width: 180px;
|
height: 60px;
|
border-radius: 8px;
|
border: 1PX solid #E5E5E5;
|
padding: 0 30px;
|
text-align: right;
|
font-size: 25px;
|
}
|
span {
|
font-size: 28px;
|
font-weight: 400;
|
color: #999999;
|
margin-right: 20px;
|
}
|
}
|
}
|
}
|
.fp_footer {
|
width: 100%;
|
padding-left: 30px;
|
padding-right: 30px;
|
padding-bottom: 68px;
|
box-sizing: border-box;
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.fp_footer_close {
|
width: 334px;
|
height: 88px;
|
background: #FFFFFF;
|
box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.08);
|
border-radius: 8px;
|
font-size: 30px;
|
font-weight: 500;
|
color: #666666;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
.fp_footer_submit {
|
width: 334px;
|
height: 88px;
|
border: none;
|
background: $nav-color;
|
box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.08);
|
border-radius: 8px;
|
font-size: 30px;
|
font-weight: 500;
|
color: #ffffff;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
}
|
}
|
</style>
|
