<template>
<j-modal
:title="title"
:width="width"
:visible="visible"
:confirmLoading="confirmLoading"
switchFullscreen
@ok="handleOk"
@cancel="handleCancel"
cancelText="关闭">
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<a-row>
<a-col :span="24">
<a-form-item label="图号" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input v-decorator="['drawingNo']" :disabled="true" placeholder="请输入图号"></a-input>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="父图号" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input v-decorator="['parentDrawingNo']" :disabled="true" placeholder="请输入父图号"></a-input>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input v-decorator="['name']" placeholder="请输入名称" :disabled="true"></a-input>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="数量" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input-number v-decorator="['qty', { rules: [{ required: true}]}]" placeholder="请输入数量" style="width: 100%" />
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="工艺" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-select :disabled="true" v-model="technologyTypeModal" :defaultActiveFirstOption="true"
style="width: 250px"
@change="handleProvinceChange">
<a-select-option v-for="technologyType in technologyTypeList" :key="technologyType.type">
{{ technologyType.name }}
</a-select-option>
</a-select>
<a-select :disabled="true" v-model="technologyModal" style="width: 250px">
<a-select-option v-for="technology in technologyList" :key="technology.code">
{{ technology.name }}
</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input-number v-decorator="['sequence']" :disabled="true" placeholder="请输入排序"
style="width: 500px"></a-input-number>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="下图日期/预期完成日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-date placeholder="请选择下图日期/预期完成日期" :disabled="true" v-decorator="['preDate']" :trigger-change="true"
style="width: 100%" />
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="完成人" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-select-user-by-dep v-model="completeBy" :multi="false"></j-select-user-by-dep>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="实际完成时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-date placeholder="请选择实际完成时间" v-decorator="['completeDate', { rules: [{ required: true}]}]"
:trigger-change="true"
style="width: 100%" />
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="工时" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input
v-decorator="['completetime', { rules: [{ required: true, message: '请输入正数!', pattern: '[1-9]\\d*|[1-9]\\d*.\\d*|0.\\d*[1-9]\\d*' }] }]"
placeholder="请输入工时"></a-input>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="延误原因" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input v-decorator="['delayReason']" placeholder="请输入延误原因"></a-input>
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-spin>
</j-modal>
</template>
<script>
import pick from 'lodash.pick'
import { addTransaction, editTransaction } from '@api/schedulerApi'
import { getTechnology, getTechnologyType } from '@api/api'
export default {
name: 'SchedulerCompleteModal',
components: {},
props: {
mainId: {
type: String,
required: false,
default: ''
}
},
data() {
let technologyTypeList
let technologyList
let technologyTypeModal
let technologyModal
return {
form: this.$form.createForm(this),
title: '操作',
width: 800,
visible: false,
model: {},
labelCol: {
xs: { span: 24 },
sm: { span: 5 }
},
completeBy: '',
wrapperCol: {
xs: { span: 24 },
sm: { span: 16 }
},
confirmLoading: false,
detailId: 0,
technologyTypeList,
technologyList,
technologyTypeModal,
technologyModal
}
},
created() {
this.getTechnologyType()
this.getTechnologyList()
this.completeBy = ''
},
methods: {
handleProvinceChange(value) {
this.getTechnologyList(value)
},
add() {
this.edit({})
},
edit(record) {
this.form.resetFields()
this.model = Object.assign({}, record)
this.visible = true
this.technologyModal = record.technology
this.technologyTypeModal = record.technologyType
this.detailId = record.id
this.getTechnologyList(record.technologyType)
this.$nextTick(() => {
this.form.setFieldsValue(pick(this.model, 'drawingNo', 'parentDrawingNo', 'name', 'qty', 'preDate', 'sequence', 'completeDate', 'delayReason', 'completeBy'))
})
},
close() {
this.$emit('close')
this.visible = false
},
handleOk() {
const that = this
if (this.completeBy === '') {
this.$message.warning("请选择完成用户");
} else {
// 触发表单验证
this.form.validateFields((err, values) => {
if (!err) {
that.confirmLoading = true
values.drawingNo = (values.drawingNo || '').trim()
values.name = (values.name || '').trim()
values.parentDrawingNo = (values.parentDrawingNo || '').trim()
let formData = {
'detailId': that.detailId,
'completeBy': that.completeBy,
'completeDate': values.completeDate,
'qty': that.model.qty,
'delayReason': values.delayReason,
'completetime': values.completetime
}
let obj = addTransaction(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()
})
}
})
}
},
handleCancel() {
this.close()
},
popupCallback(row) {
this.form.setFieldsValue(pick(row, 'headerId', 'drawingNo', 'name', 'qty', 'technology', 'preDate', 'weldTechnology', 'weldBy', 'weldDate', 'machiningTechnology', 'machiningBy', 'machiningDate', 'paintTechnology', 'paintBy', 'paintDate', 'completedDate', 'delayReason'))
},
getTechnologyType() {
const that = this
let obj = getTechnologyType()
obj.then((res) => {
if (res.success) {
that.technologyTypeList = res.result
} else {
that.$message.warning(res.message)
}
})
},
getTechnologyList(val) {
const that = this
let obj = getTechnology({ val })
obj.then((res) => {
if (res.success) {
that.technologyList = res.result
} else {
that.$message.warning(res.message)
}
})
}
}
}
</script>
<style scoped>
</style>