<template>
|
<default-header-page-layout ref="page" :title="type=='add'?'新增班组':'编辑班组'">
|
<view class="page-frame">
|
<u-form :model="form" :rules="rules" ref="uForm" label-width="65" labelAlign="right">
|
|
<!-- <u-form-item required label="班组名称:" prop="shiftName">
|
<u-input placeholder="请输入班组名称" v-model="form.shiftName"></u-input>
|
</u-form-item> -->
|
|
<!-- <u-form-item required label="班组名称">
|
<view class="input-box" @click="shiftTypeShow=true">
|
{{form.shiftTypeName}}
|
<u-icon @click.native.stop="clearValue('shiftTypeName',$event)" v-if="form.shiftTypeName"
|
color="#dadbde" size="25" name="close-circle"
|
style="position: absolute;top:6rpx;right:10rpx;"></u-icon>
|
<view v-show="!Boolean(form.shiftTypeName)" style="font-size:20rpx;color:rgb(192, 196, 204)">
|
请选择班组名称
|
</view>
|
</view>
|
</u-form-item>
|
<view v-show="form.shiftTypeName!=undefined&&!Boolean(form.shiftTypeName)"
|
style="font-size:23rpx;color:#f56c6c;margin:-10rpx 0 -10rpx 130rpx;">
|
班组类型不能为空
|
</view> -->
|
|
<u-form-item required label="班组名称:" prop="shiftName">
|
<u-input :readonly="true" :disabled="type=='edit'" placeholder="请选择班组名称" v-model="form.shiftName" @click.native="shiftTypeShow=true"></u-input>
|
</u-form-item>
|
|
<u-form-item required label="开始时间:" prop="shiftStartTime">
|
<u-input :readonly="true" placeholder="请选择开始时间" v-model="form.shiftStartTime"
|
@click.native="showTimePicker('start')"></u-input>
|
</u-form-item>
|
|
<!--项目完成时所有选择器的input加上 :readonly="true" -->
|
<u-form-item required label="结束时间:" prop="shiftEndTime">
|
<u-input :readonly="true" placeholder="请选择结束时间" v-model="form.shiftEndTime"
|
@click.native="showTimePicker('end')"></u-input>
|
</u-form-item>
|
|
<u-form-item required label="是否隔日:" prop="isNextDay">
|
<u-input :readonly="true" placeholder="请选择是否隔日" v-model="form.isNextDay" @click.native="dayShow=true"></u-input>
|
</u-form-item>
|
|
<u-form-item label="班组长:">
|
<u-textarea :placeholderStyle="{fontSize:45+'rpx',color:'rgb(192, 196, 204)'}"
|
v-model="form.shiftRemark" placeholder="请输入班组长"></u-textarea>
|
</u-form-item>
|
</u-form>
|
|
<!-- 班制选择器 -->
|
<u-picker closeOnClickOverlay :show="shiftTypeShow" :columns="shiftTypeList" keyName="name"
|
@confirm="shiftTypeConfirm" @cancel="shiftTypeShow=false" @close="shiftTypeShow=false"></u-picker>
|
|
<!-- 时间选择器 -->
|
<u-datetime-picker closeOnClickOverlay :show="timeShow" @confirm="timeConfirm" mode="time"
|
@close="timeShow=false" @cancel="timeShow=false"></u-datetime-picker>
|
|
<!-- 是否隔日选择器 -->
|
<u-picker closeOnClickOverlay :show="dayShow" :columns="dayList" keyName="name" @confirm="dayConfirm"
|
@cancel="dayShow=false" @close="dayShow=false"></u-picker>
|
<!-- 班组长选择器 -->
|
<!-- <u-picker closeOnClickOverlay :show="userShow" :columns="userList" keyName="name" @confirm="userConfirm"
|
@cancel="userShow=false" @close="userShow=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 {editShiftInfo,addShiftInfo} from '@/api/shift/index.js'
|
// import {
|
// getUserList
|
// } from '@/api/common/index.js'
|
export default {
|
name: 'createShift',
|
components: {
|
DefaultHeaderPageLayout
|
},
|
data() {
|
return {
|
type: '',
|
form: {
|
shiftName: '',
|
shiftStartTime: '',
|
shiftEndTime: '',
|
isNextDay: null,
|
shiftRemark: ''
|
},
|
rules: {
|
shiftName: [{
|
required: true,
|
message: '班组名称不能为空',
|
trigger: ['change', 'blur']
|
}],
|
shiftStartTime: [{
|
required: true,
|
message: '开始时间不能为空',
|
trigger: ['change']
|
}],
|
shiftEndTime: [{
|
required: true,
|
message: '结束时间不能为空',
|
trigger: ['change']
|
}],
|
isNextDay: [{
|
required: true,
|
message: '是否隔日不能为空',
|
trigger: ['change']
|
}],
|
},
|
// 班组类型
|
shiftTypeShow: false,
|
shiftTypeList: [
|
[{
|
name: '白班'
|
},
|
{
|
|
name: '晚班'
|
}
|
]
|
],
|
// 时间
|
timeShow: false,
|
timeType: '', //区分是开始时间选择器还说结束时间选择器
|
// 班组长
|
dayShow: false,
|
dayList: [
|
[{
|
code: true,
|
name: '是'
|
}, {
|
code: false,
|
name: '否'
|
}]
|
]
|
}
|
},
|
|
created() {
|
// this.getUserList()
|
},
|
methods: {
|
// 班组确认
|
shiftTypeConfirm(e) {
|
const {
|
value
|
} = e
|
if (!value) {
|
return this.shiftTypeShow = false
|
}
|
this.form.shiftName = value[0].name
|
this.shiftTypeShow = false
|
},
|
|
// 显示时间选择器
|
showTimePicker(type) {
|
this.timeShow = true
|
this.timeType = type
|
|
},
|
|
|
|
// 时间确认
|
timeConfirm({
|
value
|
}) {
|
if (!value) {
|
return this.timeShow = false
|
}
|
if (this.timeType == 'start') {
|
this.form.shiftStartTime = value
|
} else {
|
this.form.shiftEndTime = value
|
}
|
|
this.timeShow = false
|
|
},
|
|
// 是否隔日确认
|
dayConfirm({
|
value
|
}) {
|
if (!value) {
|
return this.dayShow = false
|
}
|
this.form.isNextDay = value[0].name
|
|
this.dayShow = false
|
},
|
|
// 获取人员列表
|
// async getUserList() {
|
// try {
|
// const {
|
// data
|
// } = await getUserList()
|
// this.userList = [data]
|
// } catch (error) {
|
// console.log(error)
|
// }
|
// },
|
|
// 显示班组长选择器
|
// showUser() {
|
// uni.hideKeyboard()
|
// this.userShow = true
|
// },
|
|
// userConfirm(e) {
|
// const {
|
// value
|
// } = e
|
// if (!value) {
|
// return this.userShow = false
|
// }
|
// this.form.shiftTeamLeaderId = value[0].id
|
// this.form.shiftTeamLeaderName = value[0].name
|
|
// this.userShow = false
|
// },
|
|
async submit() {
|
let form ={...this.form}
|
form.isNextDay=form.isNextDay=='是'?true:false
|
console.log(form);
|
if(this.type=='add') {
|
try{
|
await addShiftInfo(form)
|
this.$modal('新增成功', () => {
|
this.toShiftIndex()
|
})
|
}catch(e){
|
//TODO handle the exception
|
console.log(e);
|
}
|
}else{
|
try{
|
await editShiftInfo(form)
|
this.$modal('编辑成功', () => {
|
this.toShiftIndex()
|
})
|
}catch(e){
|
//TODO handle the exception
|
console.log(e);
|
}
|
}
|
|
},
|
toShiftIndex(){
|
uni.navigateTo({
|
url: `/pages/shift/index`,
|
success: () => {
|
this.form = {
|
shiftName: '',
|
shiftStartTime: '',
|
shiftEndTime: '',
|
isNextDay: null,
|
shiftRemark: ''
|
}
|
}
|
});
|
},
|
},
|
|
// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
|
onReady() {
|
this.$refs.uForm.setRules(this.rules);
|
},
|
onLoad(item) {
|
this.type = item.type
|
if (this.type == 'edit') {
|
this.form = {
|
id:item.id,
|
shiftName: item.shiftName,
|
shiftStartTime:moment(moment(item.shiftStartTime,'HH:mm')).format('HH:mm'),
|
shiftEndTime: moment(moment(item.shiftEndTime,'HH:mm')).format('HH:mm'),
|
isNextDay: item.isNextDay?'是':'否',
|
shiftRemark: item.shiftRemark
|
}
|
}
|
}
|
}
|
</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>
|
