You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

636 lines
16 KiB

10 months ago
<template>
<!-- 添加维修工单 -->
<view class="add-form-container">
<u-form :model="form" ref="form1" label-width="160rpx">
10 months ago
<u-form-item label="保养内容" prop="contents" required class="disabled">
<u-input v-model="form.contents" placeholder="请输入保养内容" maxlength="50" disabled/>
10 months ago
</u-form-item>
10 months ago
<!-- <u-form-item label="保养部位" prop="equipmentParts" required>
<u-input v-model="form.equipmentParts" placeholder="请输入保养部位" maxlength="50" disabled/>
</u-form-item> -->
10 months ago
<u-form-item label="预估人数" prop="peoples" required>
<u-input v-model="form.peoples" type="number" placeholder="请输入预估人数" maxlength="50"/>
</u-form-item>
<u-form-item label="预估分钟" prop="estimatedMinutes" required>
<u-input v-model="form.estimatedMinutes" type="number" placeholder="请输入预估分钟" maxlength="50"/>
</u-form-item>
<u-form-item label="实际分钟" prop="actualMinutes" required>
<u-input v-model="form.actualMinutes" type="number" placeholder="请输入实际分钟" maxlength="50"/>
</u-form-item>
<u-form-item label="责任人" prop="chargePeoples" required>
<view class="select" @click="openSelecUser">
<view class="input" v-if='form.chargePeoples'>
{{selectFormatCheck(form.chargePeoples,selecUserList)}}
</view>
<view class="placeholder" v-else>
请选择维修人员
</view>
<u-icon name="arrow-right" color="#aaaaaa" size="28"></u-icon>
</view>
</u-form-item>
<u-form-item label="完成情况" prop="status" required>
<view class="select" @click="openSingleColumn('status',form.status,jxDetailsStatus,'form')">
<view class="input" v-if='form.status'>
{{selectFormat(form.status,jxDetailsStatus)}}
</view>
<view class="placeholder" v-else>
{{`请选择完成情况`}}
</view>
<u-icon name="arrow-right" color="#aaaaaa" size="28" v-if="!form.id"></u-icon>
</view>
</u-form-item>
<u-form-item label="完成时间" prop="completionTime" required v-if='form.status == 0'>
<view class="select" @click="openDatetime('completionTime',formatDate,params,formatValue)">
<view class="input" v-if='formatDate'>
{{formatDate}}
</view>
<view class="placeholder" v-else>
{{`请选择完成时间`}}
</view>
<u-icon name="arrow-right" color="#aaaaaa" size="28"></u-icon>
</view>
</u-form-item>
<u-form-item label="工程师确认" prop="engineer">
<u-input v-model="form.engineer" placeholder="请输入工程师确认" maxlength="50"/>
</u-form-item>
<u-form-item label="未完成原因" prop="uncompleted" required v-if='form.status == 1'>
<u-input type='textarea' v-model="form.uncompleted" placeholder="请输入未完成原因" maxlength="200"/>
</u-form-item>
</u-form>
<view class="list">
<view class="title">
<span>*</span>备件
</view>
<view class="item " v-for="(item,index) in form.itemNumbers" :key="index">
<view class="item-box">
<view class="spare-title">
<view class="title-txt">
10 months ago
{{item.name}}
10 months ago
</view>
</view>
<u-row gutter="16">
<u-col :span="12">
<view class="dec">
<view class="">
数量:{{item.qty}}
</view>
</view>
</u-col>
</u-row>
</view>
<u-icon name="minus-circle" color="#aaaaaa" size="60" @click="delSpareParts(index)"></u-icon>
</view>
<view class="add-btn">
<u-button type="primary" @click="open"><u-icon name="plus-circle" color="#ffffff"
size="36"></u-icon>添加备件</u-button>
</view>
</view>
<view class="footer">
<view class="btns">
<button class="reset" @click="reset">重置</button>
<button class="sure" @click="submit" :loading='loading' :disabled='loading'>确定</button>
</view>
<view style="height: constant(safe-area-inset-bottom); height: env(safe-area-inset-bottom);"></view>
</view>
<!-- 添加备件 -->
<u-popup v-model="isPopupShow" mode="center" border-radius="14">
<view class="popup-title">添加备件</view>
<view class="popup">
<u-form :model="form1" ref="form1" label-width="160rpx">
<u-form-item :label="`备件`" prop="number" required>
<view class="select" @click="openSingleColumn('number',form1.number,sparePartsList,'form1')">
<view class="input" v-if='form1.number'>
{{selectFormat(form1.number,sparePartsList)}}
</view>
<view class="placeholder" v-else>
请选择备件
</view>
<u-icon name="arrow-right" color="#aaaaaa" size="28"></u-icon>
</view>
</u-form-item>
<u-form-item label="数量" prop="qty" required>
<u-input v-model="form1.qty" type="number" placeholder="请输入故障描述" />
</u-form-item>
</u-form>
</view>
<view class="popup-footer">
<view @click="isPopupShow = false">取消</view>
<view class="sure" @click="addSpare">确认</view>
</view>
</u-popup>
<!-- 选择维修人员 -->
<u-popup v-model="isShowSelecUser" mode="center" border-radius="14">
<view class="popup-title">选择维修人员</view>
<view class="popup">
<u-checkbox-group @change="checkboxGroupChange">
<u-checkbox v-model="item.checked" v-for="(item, index) in selecUserList" :key="index"
:name="item.id">{{item.name}}</u-checkbox>
</u-checkbox-group>
</view>
<view class="popup-footer">
<view @click="isShowSelecUser = false">取消</view>
<view class="sure" @click="chooseUser">确认</view>
</view>
</u-popup>
<u-select v-model="singleColumnShow" mode="single-column" :default-value='singleColumnDefaultValue'
:list="singleColumnList" @confirm="chooseSingleColumn"></u-select>
<u-picker mode="time" v-model="datetimeShow" :default-time='datetimeDefaultValue' :params="params" @confirm='chooseDatetime'></u-picker>
</view>
</template>
<script>
10 months ago
import * as upkeepOrderApi from "@/api/upkeepOrder.js"
10 months ago
import * as sparePartsApi from "@/api/spareParts.js"
import * as deptApi from "@/api/dept.js"
import * as dictApi from "@/api/dict.js"
export default {
data() {
return {
loading: false,
type: "",
// 备件弹窗
isPopupShow: false,
sparePartsList: [],
// 下拉框字段
from:'',//下拉选 是主还是子
singleColumnShow: false,
singleColumnDefaultValue: [],
singleColumnList: [],
field: '',
// 负责人员
selecUserList: [], //负责人员
isShowSelecUser: false,
jxDetailsStatus:[],//完成情况
form: {
number: '',
name:'',
peoples: '',
estimatedMinutes: '',
actualMinutes: '',
chargePeoples: '',
status: '',
completionTime: '',
engineer: '',
uncompleted: '',
itemNumbers:[]
},
formatDate:'',//日期展示
form1: {
number: "",
qty: ''
},
// 时间参数
datetimeShow:false,
params:{
year: true,
month: true,
day: true,
hour: true,
minute: true,
second: true,
timestamp: true,
},
datetimeDefaultValue:'',
formatValue:'YYYY-MM-DD hh:mm:ss'
}
},
methods: {
// 触发提交表单
submit() {
// 校验
if (!this.form.peoples) {
this.$modal.showToast('请输入预估人数')
return;
}
if (this.form.peoples>100) {
this.$modal.showToast('预估人数不得超出100')
return;
}
if (!this.form.estimatedMinutes) {
this.$modal.showToast(`请输入预估分钟`)
return;
}
if (!this.form.actualMinutes) {
this.$modal.showToast('请输入实际分钟')
return;
}
if (!this.form.chargePeoples) {
this.$modal.showToast('请选择负责人')
return;
}
if (!this.form.status) {
this.$modal.showToast('请选择完成情况')
return;
}
if(this.form.status == 0){
if (!this.form.completionTime) {
this.$modal.showToast('请选择完成时间')
return;
}
}
// if (!this.form.engineer) {
// this.$modal.showToast('请输入工程师')
// return;
// }
if(this.form.status == 1){
if (!this.form.uncompleted) {
this.$modal.showToast('请输入未完成原因')
return;
}
}
if (this.form.itemNumbers.length === 0) {
this.$modal.showToast('请选择备件')
return;
}
if (this.form.id) {
10 months ago
this.$modal.confirm('是否修改保养内容').then(() => {
10 months ago
this.$modal.loading('加载中')
this.loading = true
10 months ago
upkeepOrderApi.upkeepOrderDetailUpdate(this.form).then((res) => {
10 months ago
this.$modal.closeLoading()
if (res.data) {
this.$modal.showToast('修改成功')
setTimeout(() => {
this.$tab.navigateBack()
this.loading = false
}, 1500)
} else {
this.$modal.showToast('添加失败')
this.loading = false
}
}).catch(() => {
this.$modal.closeLoading()
this.loading = false
})
})
} else {
this.$modal.confirm('是否添加检修内容').then(() => {
this.$modal.loading('加载中')
this.loading = true
10 months ago
upkeepOrderApi.upkeepOrderDetailCreate(this.form).then((res) => {
10 months ago
this.$modal.closeLoading()
if (res.data) {
this.$modal.showToast('添加成功')
setTimeout(() => {
this.$tab.navigateBack()
this.loading = false
}, 1500)
} else {
this.$modal.showToast('添加失败')
this.loading = false
}
}).catch(() => {
this.$modal.closeLoading()
this.loading = false
})
})
}
},
// 重置
reset() {
if (this.form.id) {
this.form.classes = '';
this.form.faultType = ''
} else {
this.form = {}
}
},
// 获取责任人员列表
async getSelecUser() {
let data = {
classType: this.type,
factoryAreaNumber: this.factoryAreaNumber,
flag: 0
}
let arr = []
if (this.form.chargePeoples) {
arr = this.form.chargePeoples.split(',')
}
await deptApi.getSelecUser(data).then(res => {
res.data.forEach(item => {
item.checked = false
arr.forEach(cur => {
if (item.id == cur) {
item.checked = true
}
})
})
this.selecUserList = res.data
})
},
// 打开人员列表
openSelecUser() {
this.isShowSelecUser = true
},
checkboxGroupChange(e) {
this.chooseUserList = e
},
// 多选选择框回显
selectFormatCheck(val, array) {
const arr = val.split(',').map(parseFloat)
let str = array.filter(item => arr.includes(item.id)).map(item => item.name).join(',')
return str
},
// 选择人员
chooseUser() {
this.form.chargePeoples = this.chooseUserList.join(',')
this.isShowSelecUser = false
},
selectFormat(val, array) {
let str = array.filter(item => item.value == val)[0].label
return str
},
// 单列模式
openSingleColumn(field, val, list,from) {
if (field == 'deviceNumber' && this.form.id) return;
this.from = from
this.singleColumnList = list
this.field = field
if (val) {
this.singleColumnDefaultValue = [list.findIndex(item => item.value == val)]
} else {
this.singleColumnDefaultValue = []
}
this.singleColumnShow = true
},
// 单列模式点击确定之后
chooseSingleColumn(e) {
this[this.from][this.field] = e[0].value
this.singleColumnShow = false
this.$emit('singleColumn', this.field, this.form[this.field])
this.$forceUpdate()
},
// 获取备件列表
async getSparePartsList() {
await sparePartsApi.getSparePartsList().then(res => {
res.data.map(item => {
item.value = item.number
item.label = item.name
})
this.sparePartsList = res.data
})
},
// 打开弹窗
open() {
this.form1 = {
number: "",
10 months ago
name:'',
10 months ago
qty: ''
}
this.isPopupShow = true
},
// 添加配件
addSpare() {
if (!this.form1.number) {
this.$modal.showToast('请选择备件')
return;
}
if (!this.form1.qty) {
this.$modal.showToast('请输入数量')
return;
}
10 months ago
this.form1.name=this.selectFormat(this.form1.number,this.sparePartsList)
10 months ago
if (this.form.itemNumbers && this.form.itemNumbers.length > 0) {
let arr = this.form.itemNumbers.filter(item => item.number == this.form1.number)
if (arr && arr.length > 0) {
this.$modal.showToast('该备件已添加')
return;
}
}
this.form.itemNumbers.push(this.form1)
this.isPopupShow = false
},
// 删除备件
delSpareParts(index) {
this.form.itemNumbers.splice(index, 1)
},
openDatetime(field,val,params,formatValue){
this.params = params
this.formatValue =formatValue
this.field = field
this.form[this.field] = val ? val :''
this.datetimeDefaultValue = val ? val :this.$time.formatDate()
this.datetimeShow = true
},
// 日期模式点击确定之后
chooseDatetime(e){
let array1 = []
let array2 = []
if(this.formatValue.indexOf('YYYY')>-1){
array1.push(e.year)
}
if(this.formatValue.indexOf('MM')>-1){
array1.push(e.month)
}
if(this.formatValue.indexOf('DD')>-1){
array1.push(e.day)
}
if(this.formatValue.indexOf('hh')>-1){
array2.push(e.hour)
}
if(this.formatValue.indexOf('mm')>-1){
array2.push(e.minute)
}
if(this.formatValue.indexOf('ss')>-1){
array2.push(e.second)
}
let str = array1.join('-') + ' ' + array2.join(':')
this.formatDate = str
this.form[this.field] = e.timestamp
},
},
async onLoad(option) {
if (option.type) this.type = option.type;
if (option.factoryAreaNumber) this.factoryAreaNumber = option.factoryAreaNumber;
if (option.number) this.form.number = option.number;
if (option.data && JSON.parse(decodeURIComponent(option.data)) && JSON.parse(decodeURIComponent(option
.data)).id) {
this.form = JSON.parse(decodeURIComponent(option.data))
this.$set(this.form,'itemNumbers',this.form.items)
10 months ago
this.formatDate =this.form.completionTime ? this.$time.formatDate(this.form.completionTime):''
10 months ago
};
10 months ago
console.log(this.form)
10 months ago
this.jxDetailsStatus = await dictApi.getDict('jx_details_status')
await this.getSelecUser()
await this.getSparePartsList()
}
}
</script>
<style lang="scss" scoped>
.add-form-container {
min-height: calc(100vh - 140rpx);
background: white;
10 months ago
padding: 0px 0rpx 140rpx;
}
.u-form-item{
padding: 20rpx 30rpx;
}
.disabled{
background: #f5f5f5;
10 months ago
}
.footer {
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
z-index: 22;
}
.btns {
display: flex;
button {
flex: 1;
}
.sure {
background: #409eff;
color: white;
border-radius: 0px;
&::after {
border: 1px solid #409eff;
border-radius: 0px;
}
}
.reset {
background: #F5F5F5;
border-radius: 0px;
&::after {
border-radius: 0px;
}
}
}
.right-button {
background: #409eff;
color: white;
padding: 0rpx 30rpx;
border-radius: 16rpx;
text-align: center;
font-size: 28rpx;
}
.select {
display: flex;
align-items: center;
height: 72rpx;
width: 100%;
.input {
flex: 1;
font-size: 28rpx;
color: #000000;
}
.placeholder {
flex: 1;
font-size: 28rpx;
color: rgb(192, 196, 204);
}
}
.title {
padding: 32rpx 0px;
position: relative;
span {
position: absolute;
left: -16rpx;
color: #fa3534;
padding-top: 6rpx;
}
}
.list {
10 months ago
padding: 0px 30rpx;
10 months ago
.item {
display: flex;
margin-bottom: 20rpx;
.item-box {
background: #F5F5F5;
border-radius: 12rpx;
flex: 1;
width: 0rpx;
}
.spare-title {
padding: 20rpx 30rpx;
border-bottom: 1px solid #e4e4e4;
.title-txt {
color: #409eff;
font-size: 30rpx;
font-weight: bold;
}
}
.dec {
color: #9c9c9c;
padding: 20rpx 30rpx 20rpx;
}
}
}
.add-btn {
display: flex;
justify-content: flex-start;
align-items: center;
}
.popup-title {
text-align: center;
font-size: 32rpx;
font-weight: bold;
color: #409eff;
padding: 30rpx 30rpx 0px
}
.popup {
width: 600rpx;
padding: 30rpx 60rpx 30rpx;
}
.popup-footer {
display: flex;
border-top: 1px solid #e4e4e4;
view {
line-height: 100rpx;
flex: 1;
text-align: center;
&.sure {
color: #409eff;
}
}
}
::v-deep .u-checkbox-group {
display: grid !important;
}
</style>