<template>
|
<a-card
|
:bordered='false'
|
:class="'cust-erp-sub-tab'"
|
>
|
<a-table
|
ref='table'
|
bordered
|
rowKey='id'
|
:columns='columns'
|
:dataSource='dataSource'
|
:pagination='ipagination'
|
@change='handleTableChange'
|
>
|
<template
|
v-for='col in columns'
|
:slot='col.dataIndex'
|
slot-scope='text, record, index'
|
>
|
<div :key='col.dataIndex'>
|
<a-input
|
v-if="col.dataIndex == 'userId'"
|
:value='text'
|
@change='(e) => handleChange(e, record.key, col, index)'
|
:disabled="repairOrderStatus=='4'"
|
/>
|
<a-input-number
|
:value='text'
|
v-if="col.dataIndex == 'actualHour'"
|
:min='0'
|
:max='99999'
|
@change='(e)=>handleChange(e, record.key, col, index)'
|
:disabled="repairOrderStatus=='4'"
|
/>
|
|
<!-- <a-switch @change='(e)=>onChange(e, record.key, col, index)' :value='text' :disabled="repairOrderStatus=='4'"-->
|
<!-- v-if="col.dataIndex == 'principalContractor'" />-->
|
<a-select
|
default-value='0'
|
:value='text'
|
:disabled="repairOrderStatus=='4'"
|
v-if="col.dataIndex == 'principalContractor'"
|
style="width: 100%;"
|
@change='(e)=>handleChange(e, record.key, col, index)'
|
>
|
<a-select-opt-group>
|
<a-select-option
|
value='1'
|
style="width: 100%;"
|
>
|
是
|
</a-select-option>
|
<a-select-option
|
value='0'
|
style="width: 100%;"
|
>
|
否
|
</a-select-option>
|
</a-select-opt-group>
|
|
</a-select>
|
<!-- <a-range-picker-->
|
<!-- :ranges="{ Today: [moment(), moment()], 'This Month': [moment(), moment().endOf('month')] }"-->
|
<!-- :show-time="{ format: 'HH:mm' }"-->
|
<!-- format="YYYY-MM-DD HH:mm"-->
|
<!-- :placeholder="['Start Time', 'End Time']"-->
|
<!-- v-if="col.dataIndex == 'startTime'" @change='onDateChange'-->
|
<!-- />-->
|
<a-date-picker
|
:disabled="repairOrderStatus=='4'"
|
:value='text'
|
format='YYYY-MM-DD HH:mm'
|
:show-time="{ defaultValue: moment('00:00', 'HH:mm') }"
|
v-if="col.dataIndex == 'startTime'"
|
@change='(e)=>handleChange(e, record.key, col, index)'
|
/>
|
<!-- :disabled="repairOrderStatus=='4'"-->
|
<a-date-picker
|
:value='text'
|
format='YYYY-MM-DD HH:mm'
|
:show-time="{ defaultValue: moment('00:00', 'HH:mm') }"
|
v-if="col.dataIndex == 'endTime'"
|
@change='(e)=>handleChange(e, record.key, col, index)'
|
/>
|
|
<!-- <a-input-number-->
|
<!-- :value='text'-->
|
<!-- v-if="col.dataIndex == 'theoreticalTime'"-->
|
<!-- :min='0'-->
|
<!-- :max='99999'-->
|
<!-- :read-only='true'-->
|
<!-- @change='(e)=>handleChange(e, record.key, col, index)'-->
|
<!-- :disabled="true"-->
|
<!-- />-->
|
</div>
|
</template>
|
<span
|
slot='action'
|
slot-scope='text, record,index'
|
>
|
<a
|
:disabled="repairOrderStatus=='4'"
|
@click='handleDelete(index)'
|
>删除</a>
|
</span>
|
</a-table>
|
<a-button
|
style='width: 100%; margin-top: 16px; margin-bottom: 8px'
|
type='dashed'
|
icon='plus'
|
@click='addHour'
|
:disabled="this.repairOrderStatus=='4' || this.repairOrderStatus=='2'"
|
>添加实际工时
|
<!-- :disabled="mainId.status=='4'" -->
|
</a-button>
|
<div :style="{width: '100%',border: '1px solid #e9e9e9',padding: '10px 16px',background: '#fff',}">
|
<a-row :style="{textAlign:'right'}">
|
<a-button
|
:style="{marginRight: '8px'}"
|
@click='handleCancel'
|
>
|
取消
|
</a-button>
|
<!-- <a-button
|
@click='handleOk(1)'
|
type='primary'
|
:style="{marginRight: '8px'}"
|
:disabled="this.repairOrderStatus=='4' || this.repairOrderStatus=='2'"
|
>暂存
|
</a-button> -->
|
<a-button
|
@click='handleOk(0)'
|
type='primary'
|
:disabled="this.repairOrderStatus=='4' || this.repairOrderStatus=='2'"
|
>保存
|
</a-button>
|
</a-row>
|
<!-- :disabled="false" -->
|
</div>
|
<actual-hour-user-select
|
ref='actualUserSelect'
|
@sendUserRecord='sendUserRecord'
|
>
|
</actual-hour-user-select>
|
</a-card>
|
</template>
|
<script>
|
import { postAction, getAction } from '@/api/manage'
|
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
|
import pick from 'lodash.pick'
|
import JEllipsis from '@/components/jeecg/JEllipsis'
|
import ActualHourUserSelect from './select/ActualHourUserSelect.vue'
|
import moment from 'moment'
|
|
export default {
|
name: 'RepairOrderActualWorkHoursList',
|
mixins: [JeecgListMixin],
|
components: {
|
JEllipsis,
|
ActualHourUserSelect
|
|
},
|
// props: {
|
// mainId: {
|
// type: Object,
|
// required: false,
|
// default: {}
|
// }
|
// },
|
props: {
|
repairOrderId: {
|
type: String,
|
required: false,
|
},
|
repairOrderStatus: {
|
type: String,
|
required: false,
|
default: ''
|
},
|
teamId: {
|
type: String,
|
required: false,
|
default: ''
|
}
|
},
|
data() {
|
return {
|
title: '实际工时',
|
flag: false,//主页面的标记位 用于区分是否确认过工单工艺 来区分table页展示 工单工序 还是产品工序
|
model: {},
|
obj: {},
|
maskClosable: true,
|
confirmLoading: false,
|
form: this.$form.createForm(this),
|
/* 分页参数 */
|
ipagination: {
|
current: 1,
|
pageSize: 99,
|
pageSizeOptions: ['99', '199'],
|
showTotal: (total, range) => {
|
return range[0] + '-' + range[1] + ' 共' + total + '条'
|
},
|
showQuickJumper: true,
|
showSizeChanger: true,
|
total: 0
|
},
|
validatorRules: {
|
userId: {
|
rules: [
|
{ required: true, message: '请填写人员!' }
|
]
|
},
|
actual_hour: {
|
rules: [
|
{ required: false, message: '请填写工时!' }
|
]
|
}
|
},
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 7 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 16 }
|
},
|
drawerWidth: '100%',
|
visible: false,
|
disableSubmit: false,
|
disableSelect: false,
|
loading: false,
|
dataSource: [],
|
columns: [
|
{
|
title: '#',
|
dataIndex: '',
|
key: 'rowIndex',
|
width: 60,
|
align: 'center',
|
customRender: function (t, r, index) {
|
return parseInt(index) + 1
|
}
|
},
|
{
|
title: '*人员名称',
|
dataIndex: 'userId',
|
align: 'center',
|
scopedSlots: { customRender: 'userId' },
|
// className: 'red',
|
width: 200
|
},
|
{
|
title: '*主承修人',
|
dataIndex: 'principalContractor',
|
align: 'center',
|
scopedSlots: { customRender: 'principalContractor' },
|
// className: 'red',
|
width: 150
|
},
|
{
|
title: '*实际工时',
|
dataIndex: 'actualHour',
|
align: 'center',
|
// className: 'red',
|
scopedSlots: { customRender: 'actualHour' },
|
width: 150
|
},
|
{
|
title: '开始时间',
|
dataIndex: 'startTime',
|
scopedSlots: { customRender: 'startTime' },
|
align: 'center',
|
width: 200
|
},
|
{
|
title: '结束时间',
|
dataIndex: 'endTime',
|
align: 'center',
|
scopedSlots: { customRender: 'endTime' },
|
width: 200
|
|
},
|
|
{
|
title: '理论工时',
|
dataIndex: 'theoreticalTime',
|
align: 'center'
|
// scopedSlots: { customRender: 'theoreticalTime' },
|
,
|
width: 150
|
},
|
{
|
title: '操作',
|
dataIndex: 'action',
|
align: 'center',
|
width: 150,
|
scopedSlots: { customRender: 'action' }
|
}
|
],
|
url: {
|
list: '/eam/repairOrder/listRepairOrderActualWorkHoursByMainId',
|
confirmHour: '/eam/repairOrderActualHours/add'
|
},
|
changeIndex: 0
|
}
|
},
|
|
watch: {
|
repairOrderId: {
|
immediate: true,
|
handler(val) {
|
if (this.repairOrderId) {
|
this.clearList()
|
this.queryParam['repairOrderId'] = val
|
this.loadData(1)
|
}
|
}
|
}
|
},
|
methods: {
|
moment,
|
onChange(checked) {
|
console.log(`a-switch to ${checked}`)
|
},
|
//时间选择修改
|
onStartTimeChange() {
|
console.log()
|
|
},
|
onEndTimeChange() {
|
console.log()
|
|
},
|
addHour() {
|
this.dataSource.push({ userId: '', repairOrderId: this.repairOrderId, actualHour: 0, username: '', realname: '' })
|
},
|
handleCancel() {
|
this.$bus.$emit('closeDrawer')
|
},
|
close() {
|
this.$emit('close')
|
this.dataSource = []
|
this.disableSubmit = false
|
this.visible = false
|
},
|
handleDelete(index) {
|
console.log(index)
|
this.dataSource.splice(index, 1)
|
},
|
|
handleOk(saveStatus) {
|
const that = this
|
if (saveStatus == 0) {
|
let workHoursDataSource = that.dataSource
|
for (let i = 0; i < workHoursDataSource.length; i++) {
|
if (workHoursDataSource[i].userId == undefined || workHoursDataSource[i].userId == null || workHoursDataSource[i].userId == '') {
|
that.$message.warning('请选择第' + (i + 1) + '行维修人员！')
|
return false
|
}
|
if (workHoursDataSource[i].actualHour == undefined || workHoursDataSource[i].actualHour == null || workHoursDataSource[i].actualHour == '') {
|
that.$message.warning('请填写第' + (i + 1) + '行实际工时！')
|
return false
|
}
|
}
|
}
|
if (that.dataSource.length === 0) {
|
that.$message.warning('请选择人员！')
|
return
|
}
|
this.form.validateFields((err, values) => {
|
if (!err) {
|
that.confirmLoading = true
|
let formData = {}
|
// formData.repairOrderId = that.mainId.id;
|
formData.repairOrderId = that.repairOrderId
|
formData.repairOrderActualWorkHoursList = that.dataSource
|
for (let i = 0; i < formData.repairOrderActualWorkHoursList.length; i++) {
|
const start = formData.repairOrderActualWorkHoursList[i].startTime
|
const end = formData.repairOrderActualWorkHoursList[i].endTime
|
formData.repairOrderActualWorkHoursList[i].startTime = this.formattedTime(start);
|
|
formData.repairOrderActualWorkHoursList[i].endTime = this.formattedTime(end);
|
// formData.repairOrderActualWorkHoursList[i].startTime = moment(start).format('yyyy-MM-DD HH:mm')
|
// formData.repairOrderActualWorkHoursList[i].endTime = moment(end).format('yyyy-MM-DD HH:mm')
|
}
|
// formData.equipmentId = that.equipmentId;
|
let obj = obj = postAction(this.url.confirmHour, formData)
|
obj.then((res) => {
|
if (res.success) {
|
that.$message.success(res.message)
|
that.$emit('ok')
|
} else {
|
that.$message.warning(res.message)
|
}
|
}).finally(() => {
|
that.confirmLoading = false
|
that.close()
|
that.loadData(1)
|
})
|
}
|
})
|
},
|
formattedTime(originalTime) {
|
|
// 创建 Date 对象
|
const date = new Date(originalTime)
|
|
// 检查 Date 对象是否有效
|
if (isNaN(date.getTime())) return '无效时间'
|
|
// 获取年、月、日、时、分
|
const year = date.getFullYear()
|
const month = String(date.getMonth() + 1).padStart(2, '0')
|
const day = String(date.getDate()).padStart(2, '0')
|
const hours = String(date.getHours()).padStart(2, '0')
|
const minutes = String(date.getMinutes()).padStart(2, '0')
|
// 拼接成指定格式
|
return `${year}-${month}-${day} ${hours}:${minutes}`
|
},
|
|
handleChange(value, key, column, index) {
|
let that = this
|
const temp = [...that.dataSource]
|
const target = temp[index]
|
if (target) {
|
if ('userId' == column.dataIndex) {
|
target['userId'] = value.target.value
|
}
|
if ('principalContractor' == column.dataIndex) {
|
target['principalContractor'] = value
|
if (value === '1') {
|
for (var i = 0; i < temp.length; i++) {
|
if (i !== index) {
|
temp[i]['principalContractor'] = '0';
|
}
|
}
|
}
|
}
|
|
if ('actualHour' == column.dataIndex) {
|
if (target['theoreticalTime'] !== null && target['theoreticalTime'] < value) {
|
that.$message.error('请检查第' + (index + 1) + '行实际工时不能小于理论工时,请重新填写')
|
target['actualHour'] = null;
|
} else if (target['theoreticalTime'] === null || target['theoreticalTime'] === undefined) {
|
that.$message.error('请检查第' + (index + 1) + '请先填写开始时间与结束时间')
|
target['actualHour'] = null;
|
} else {
|
target['actualHour'] = value
|
}
|
|
}
|
// if ('theoreticalTime' == column.dataIndex) {
|
// target['theoreticalTime'] = value
|
// }
|
if ('startTime' == column.dataIndex) {
|
|
if (target['endTime'] == null) {
|
target['startTime'] = value
|
} else {
|
const diffInHours = this.getTimeDiff(value, target['endTime'])
|
if (diffInHours < 0) {
|
target['startTime'] = ''
|
target['theoreticalTime'] = ''
|
that.$message.error('开始时间不能小于结束时间,请重新选择')
|
} else {
|
if (target['actualHour'] !== null) {
|
if (diffInHours < target['actualHour']) {
|
target['startTime'] = ''
|
target['theoreticalTime'] = ''
|
that.$message.error('实际工时不能小于理论工时,请重新填写')
|
} else {
|
target['startTime'] = value
|
target['theoreticalTime'] = diffInHours
|
}
|
} else {
|
target['startTime'] = value
|
target['theoreticalTime'] = diffInHours
|
}
|
}
|
}
|
}
|
|
if ('endTime' == column.dataIndex) {
|
if (target['startTime'] == null) {
|
target['endTime'] = value
|
} else {
|
const diffInHours = this.getTimeDiff(target['startTime'], value)
|
if (diffInHours < 0) {
|
target['endTime'] = ''
|
target['theoreticalTime'] = ''
|
that.$message.error('开始时间不能小于结束时间,请重新选择')
|
} else {
|
if (target['actualHour'] !== null) {
|
if (diffInHours < target['actualHour']) {
|
target['endTime'] = ''
|
target['theoreticalTime'] = ''
|
that.$message.error('实际工时不能小于理论工时,请重新填写')
|
} else {
|
target['endTime'] = value
|
target['theoreticalTime'] = diffInHours
|
}
|
} else {
|
target['endTime'] = value
|
target['theoreticalTime'] = diffInHours
|
}
|
}
|
|
}
|
}
|
that.dataSource = temp
|
}
|
},
|
onSearchUser(index) {
|
this.recordIndex = index
|
// this.$refs.actualUserSelect.list(this.mainId.teamId)
|
this.$refs.actualUserSelect.list(this.teamId)
|
this.$refs.actualUserSelect.title = '人员选择'
|
},
|
sendUserRecord(data, val) {
|
let record = data.record
|
const temp = [...this.dataSource]
|
const target = temp[this.recordIndex]
|
if (target) {
|
console.log(record)
|
target.userId = record.id
|
target.username = record.username
|
target.realname = record.realname
|
this.dataSource = temp
|
}
|
},
|
clearList() {
|
this.dataSource = []
|
this.ipagination.current = 1
|
},
|
// 获取开始时间和结束时间的时间差
|
getTimeDiff(startTime, endTime) {
|
const start = moment(startTime, 'YYYY-MM-DD HH:mm:ss')
|
const end = moment(endTime, 'YYYY-MM-DD HH:mm:ss')
|
const diff = end.diff(start)
|
var duration = moment.duration(diff)
|
var diffInHours = duration.asHours()
|
return diffInHours.toFixed(1)
|
}
|
}
|
|
}
|
</script>
|
|
<style scoped>
|
/deep/ .red {
|
color: red;
|
}
|
</style>
|
