<template>
|
<default-header-page-layout ref="page" :title="type=='edit'?'产量编辑':'产量新增'">
|
<view class="page-frame">
|
<u-form :model="form" :rules="rules" ref="uForm" label-width="65" labelAlign="right">
|
<u-form-item required label="计划类型:" prop="planType">
|
<!-- @focus="planTypeShow=true" -->
|
<u-input disabled placeholder="请选择计划类型" v-model="form.planTypeName"></u-input>
|
</u-form-item>
|
|
<u-form-item required label="计划日期:" prop="planTime">
|
<u-input :readonly="true" placeholder="请选择计划日期" v-model="form.planTime"
|
@click.native="timeShow = true"></u-input>
|
</u-form-item>
|
|
<u-form-item required label="班组名称" v-if="mode=='date'" prop="teamType">
|
<u-input :readonly="true" placeholder="请选择班组名称" v-model="form.teamType"
|
@click.native="shiftShow = true"></u-input>
|
</u-form-item>
|
|
<u-form-item required label="计划产量:" prop="planProductionNum">
|
<u-input placeholder="请输入计划产量" v-model="form.planProductionNum" type="number"></u-input>
|
</u-form-item>
|
|
<u-form-item label="备注:">
|
<u-textarea :placeholderStyle="{fontSize:45+'rpx',color:'rgb(192, 196, 204)'}"
|
v-model="form.remarks" placeholder="请输入备注"></u-textarea>
|
</u-form-item>
|
</u-form>
|
|
|
<!-- 计划类型选择器 -->
|
<u-picker closeOnClickOverlay :show="planTypeShow" :columns="[planTypeList]" keyName="name"
|
@confirm="planTypeConfirm" @cancel="planTypeShow=false" @close="planTypeShow=false"></u-picker>
|
|
<!-- 时间选择器 -->
|
<u-datetime-picker closeOnClickOverlay :show="timeShow" @confirm="timeConfirm" :mode="mode"
|
@close="timeShow=false" v-model="value1" @cancel="timeShow=false"></u-datetime-picker>
|
|
<!-- 班组选择器 -->
|
<u-picker closeOnClickOverlay :show="shiftShow" :columns="[shiftList]" keyName="name"
|
@confirm="shiftConfirm" @cancel="shiftShow=false" @close="shiftShow=false"></u-picker>
|
|
<!-- :custom-style="{backgroundColor:'#F18201',color:'#fff',marginTop:10+'px'}" -->
|
<u-button @click="submit" size="large" type="primary" style="margin-top: 10rpx;">提交</u-button>
|
</view>
|
</default-header-page-layout>
|
</template>
|
|
<script>
|
import DefaultHeaderPageLayout from '@/components/DefaultHeaderPageLayout.vue'
|
import moment from 'moment'
|
import qs from 'qs'
|
import {
|
addProductionplaninfo,
|
editProductionplaninfo
|
} from '@/api/production/index.js'
|
export default {
|
name: 'editProd',
|
components: {
|
DefaultHeaderPageLayout
|
},
|
data() {
|
return {
|
value1: Number(new Date()),
|
mode: '',
|
type: '',
|
form: {
|
planType: '',
|
planTypeName: '',
|
planTime: '',
|
teamType: '',
|
planProductionNum: null,
|
remarks: ''
|
},
|
rules: {
|
planTypeName: [{
|
required: true,
|
message: '计划类型不能为空',
|
trigger: ['change', 'blur']
|
}],
|
planTime: [{
|
required: true,
|
message: '计划日期不能为空',
|
trigger: ['change', 'blur']
|
}],
|
planProductionNum: [{
|
required: true,
|
message: '计划产量不能为空',
|
trigger: ['change', 'blur']
|
}],
|
teamType: [{
|
required: true,
|
message: '班组类型不能为空',
|
trigger: ['change', 'blur']
|
}],
|
},
|
// 计划类型
|
planTypeShow: false,
|
planTypeList: [{
|
code: 1,
|
name: '班组计划'
|
},
|
{
|
code: 2,
|
name: '月份计划'
|
}
|
],
|
// 计划类型
|
|
// 计划时间
|
timeShow: false,
|
// 计划时间
|
|
// 班组类型
|
shiftShow: false,
|
shiftList: [{
|
name: '白班'
|
}, {
|
name: '晚班'
|
}],
|
// 班组类型
|
|
}
|
},
|
|
created() {},
|
|
methods: {
|
// 计划类型确认
|
planTypeConfirm(e) {
|
const {
|
value
|
} = e
|
if (!value) {
|
return this.planTypeShow = false
|
}
|
this.form.planTypeName = value[0].name
|
this.form.planType = value[0].code
|
this.planTypeShow = false
|
},
|
|
|
// 时间确认
|
timeConfirm({
|
value,
|
mode
|
}) {
|
if (!value) {
|
return this.timeShow = false
|
}
|
if (mode == 'date') {
|
this.form.planTime = moment(value).format('YYYY-MM-DD')
|
} else {
|
this.form.planTime = moment(value).format('YYYY-MM')
|
}
|
this.timeShow = false
|
|
},
|
|
|
// 班组确认
|
shiftConfirm(e) {
|
const {
|
value
|
} = e
|
if (!value) {
|
return this.shiftShow = false
|
}
|
this.form.teamType = value[0].name
|
this.shiftShow = false
|
},
|
|
|
submit() {
|
let {
|
form
|
} = this
|
this.$refs.uForm.validate().then(async res => {
|
if (this.type == 'add') {
|
try {
|
console.log(form,'form');
|
await addProductionplaninfo(form)
|
this.$modal('新增成功', () => {
|
this.toProductionIndex()
|
})
|
} catch (e) {
|
//TODO handle the exception
|
console.log(e);
|
}
|
} else {
|
try {
|
await editProductionplaninfo(form)
|
this.$modal('编辑成功', () => {
|
this.toProductionIndex()
|
})
|
} catch (e) {
|
//TODO handle the exception
|
console.log(e);
|
}
|
}
|
}).catch(errors => {
|
console.log(errors);
|
})
|
|
},
|
toProductionIndex() {
|
const item = {
|
current: parseInt(this.form.planType) - 1
|
}
|
uni.navigateTo({
|
url: `/pages/production/index?${qs.stringify(item)}`,
|
success: () => {
|
this.form = {
|
planType: '',
|
planTypeName: '',
|
planTime: '',
|
teamType: '',
|
planProductionNum: null,
|
remarks: ''
|
}
|
}
|
});
|
}
|
},
|
// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
|
onReady() {
|
this.$refs.uForm.setRules(this.rules);
|
},
|
onLoad(item) {
|
this.type = item.type
|
if (this.type == 'edit') {
|
this.form = {
|
id: item.id,
|
planType: item.planType,
|
planTypeName: item.planType == 1 ? '班组计划' : '月份计划',
|
planTime: item.planType == 1 ? moment(moment(item.planTime, 'YYYY-MM-DD')).format('YYYY-MM-DD') :
|
moment(moment(item.planTime, 'YYYY-MM')).format('YYYY-MM'),
|
teamType: item.teamType,
|
planProductionNum: item.planProductionNum,
|
remarks: item.remarks
|
}
|
} else {
|
this.form.planType = item.planType
|
this.form.planTypeName = item.planType == 1 ? '班组计划' : '月份计划'
|
}
|
|
if (item.planType == 1) {
|
this.mode = 'date'
|
} else {
|
this.mode = 'year-month'
|
}
|
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
::v-deep .page-frame {
|
width: 90%;
|
height: auto;
|
background-color: #fff;
|
margin: 20px auto;
|
padding: 20px 20px;
|
|
.u-form-item {
|
&__body {
|
&__left {
|
&__content {
|
&__label {
|
font-size: 25px !important;
|
}
|
}
|
}
|
|
&__right {
|
&__message {
|
font-size: 25px !important;
|
}
|
}
|
}
|
}
|
|
uni-input {
|
font-size: 22px !important;
|
}
|
}
|
|
::v-deep .u-tag__text--large {
|
font-size: 20rpx;
|
}
|
|
.input-box {
|
height: 30rpx;
|
position: relative;
|
line-height: 30rpx;
|
border-radius: 4rpx;
|
padding: 6rpx 9rpx;
|
border: 0.5rpx solid #dadbde;
|
width: 100%;
|
font-size: 21.5rpx;
|
color: #303133;
|
}
|
|
.disbaled {
|
background-color: #eee;
|
}
|
</style>
|
