<template>
|
<a-spin :spinning='confirmLoading'>
|
<j-form-container :disabled='formDisabled'>
|
<!-- 主表单区域 -->
|
<a-form-model
|
ref='form'
|
:model='model'
|
:rules='validatorRules'
|
slot='detail'
|
>
|
<a-row>
|
<a-col :span='12'>
|
<a-form-model-item
|
label='计划单编号'
|
:labelCol='labelCol'
|
:wrapperCol='wrapperCol'
|
prop='num'
|
>
|
<a-input
|
v-model='model.num'
|
placeholder='请输入计划单编号'
|
></a-input>
|
</a-form-model-item>
|
</a-col>
|
<a-col :span='12'>
|
<a-form-model-item
|
label='计划名称'
|
:labelCol='labelCol'
|
:wrapperCol='wrapperCol'
|
prop='计划名称'
|
>
|
<a-input
|
v-model='model.name'
|
rows='4'
|
placeholder='请输入计划名称'
|
/>
|
</a-form-model-item>
|
</a-col>
|
<a-col :span='12'>
|
<a-form-model-item
|
label='计划开始日期'
|
:labelCol='labelCol'
|
:wrapperCol='wrapperCol'
|
prop='planStartTime'
|
>
|
<j-date
|
placeholder='请选择计划开始日期'
|
v-model='model.planStartTime'
|
style='width: 100%'
|
:showTime='true'
|
dateFormat='YYYY-MM-DD HH:mm:ss'
|
/>
|
</a-form-model-item>
|
</a-col>
|
<a-col :span='12'>
|
<a-form-model-item
|
label='计划结束日期'
|
:labelCol='labelCol'
|
:wrapperCol='wrapperCol'
|
prop='planEndTime'
|
>
|
<j-date
|
placeholder='请选择计划结束日期'
|
v-model='model.planEndTime'
|
style='width: 100%'
|
:showTime='true'
|
dateFormat='YYYY-MM-DD HH:mm:ss'
|
/>
|
</a-form-model-item>
|
</a-col>
|
<!-- <a-col :span='12'>
|
<a-form-model-item label='实际开始日期' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='actualStartTime'>
|
<j-date
|
placeholder='请选择实际开始日期'
|
v-model='model.actualStartTime'
|
style='width: 100%'
|
:showTime='true'
|
dateFormat='YYYY-MM-DD HH:mm:ss'
|
/>
|
</a-form-model-item>
|
</a-col>
|
<a-col :span='12'>
|
<a-form-model-item label='实际结束日期' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='actualEndTime'>
|
<j-date
|
placeholder='请选择实际开始日期'
|
v-model='model.actualEndTime'
|
style='width: 100%'
|
:showTime='true'
|
dateFormat='YYYY-MM-DD HH:mm:ss'
|
/>
|
</a-form-model-item>
|
</a-col> -->
|
<a-col :span='12'>
|
<a-form-model-item
|
label='附件'
|
:labelCol='labelCol'
|
:wrapperCol='wrapperCol'
|
prop='annex'
|
>
|
<j-upload :returnUrl= "false" :isMultiple="false" v-model="model.file" ></j-upload>
|
</a-form-model-item>
|
</a-col>
|
<a-col :span='12'>
|
<a-form-model-item
|
label='备注'
|
:labelCol='labelCol'
|
:wrapperCol='wrapperCol'
|
prop='remark'
|
>
|
<a-textarea
|
v-model='model.remark'
|
rows='4'
|
placeholder='请输入备注'
|
/>
|
</a-form-model-item>
|
</a-col>
|
|
</a-row>
|
</a-form-model>
|
</j-form-container>
|
<!-- 子表单区域 -->
|
<a-tabs
|
v-model='activeKey'
|
@change='handleChangeTabs'
|
>
|
<a-tab-pane
|
tab='项目性维修明细'
|
:key='refKeys[0]'
|
:forceRender='true'
|
>
|
<j-vxe-table
|
keep-source
|
:ref='refKeys[0]'
|
:loading='projectMaintenanceOrderDetailTable.loading'
|
:columns='projectMaintenanceOrderDetailTable.columns'
|
:dataSource='projectMaintenanceOrderDetailTable.dataSource'
|
:maxHeight='400'
|
:disabled='formDisabled'
|
:rowNumber='true'
|
:rowSelection='true'
|
:alwaysEdit='true'
|
:toolbar='true'
|
:bordered='true'
|
:toolbarConfig='toolbarConfig'
|
:linkage-config='linkageConfig'
|
>
|
<template slot='toolbarPrefix'>
|
<a-button
|
type='primary'
|
@click='selectEquipmentList'
|
:disabled='formDisabled'
|
>选择设备
|
</a-button>
|
</template>
|
|
<template v-slot:supplierId='props'>
|
<a-select
|
v-model='props.row.supplierId'
|
:options='supplierVoList'
|
style='width: 100%'
|
placeholder='请选择'
|
@change='(e) => handleChange(e, props.row)'
|
/>
|
|
</template>
|
<template v-slot:teamId='props'>
|
<a-select
|
v-model='props.row.teamId'
|
:options='teamVoList'
|
style='width: 100%'
|
placeholder='请选择'
|
@change='(e) => handleChange(e, props.row)'
|
/>
|
|
</template>
|
<template v-slot:userId='props'>
|
<a-select
|
v-model='props.row.userId'
|
:options='userVoList'
|
style='width: 100%'
|
placeholder='请选择'
|
@change='(e) => handleChange(e, props.row)'
|
/>
|
<!-- <a-select
|
placeholder="请选择责任人"
|
allowClear
|
showSearch
|
style='width: 100%'
|
v-model="props.row.userId"
|
>
|
<a-select-option v-for="item of userVoList" :value="item.id" :key="item.id" >
|
{{item.realname}}
|
</a-select-option>
|
</a-select> -->
|
</template>
|
</j-vxe-table>
|
</a-tab-pane>
|
</a-tabs>
|
<equipment-select-modal
|
@selectionRows='selectionRows'
|
:equipmentStatus="['2', '3']"
|
ref='EquipmentSelectModal'
|
></equipment-select-modal>
|
</a-spin>
|
</template>
|
|
<script>
|
|
|
import { validateDuplicateValue } from '@/utils/util'
|
import EquipmentSelectModal from '@/components/tools/EquipmentSelection.vue'
|
|
import { JVxeTableModelMixin } from '@/mixins/JVxeTableModelMixin.js'
|
import { JVXETypes } from '@comp/jeecg/JVxeTable'
|
|
import JFormContainer from '@/components/jeecg/JFormContainer'
|
import { getAction } from '@api/manage'
|
import { VALIDATE_FAILED, getRefPromise, validateFormAndTables,validateFormModelAndTables} from '@/components/jeecg/JVxeTable/utils/vxeUtils.js'
|
|
export default {
|
name: 'ProjectMaintenanceOrderForm',
|
mixins: [JVxeTableModelMixin],
|
components: {
|
EquipmentSelectModal,
|
JFormContainer
|
},
|
data() {
|
return {
|
supplierVoList: {},
|
userVoList: {},
|
teamVoList: {},
|
toolbarConfig: {
|
// prefix 前缀；suffix 后缀
|
slot: ['prefix', 'suffix'],
|
// add 新增按钮；remove 删除按钮；clearSelection 清空选择按钮
|
btn: ['remove', 'clearSelection']
|
},
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 6 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 18 }
|
},
|
// 新增时子表默认添加几行空数据
|
addDefaultRowNum: 0,
|
model: {},
|
validatorRules: {
|
num: [
|
{ required: true, message: '请输入计划编号!' },
|
{ validator: (rule, value, callback) => validateDuplicateValue('mom_eam_project_maintenance_order', 'num', value, this.model.id, callback) }
|
],
|
remark: [
|
{ required: false, message: '请输入备注!' }
|
]
|
},
|
linkageConfig: [
|
{ handleVerify: this.handleVerify, key: 'maintenanceAfterUnseal' }
|
],
|
refKeys: ['projectMaintenanceOrderDetail'],
|
tableKeys: ['projectMaintenanceOrderDetail'],
|
activeKey: 'projectMaintenanceOrderDetail',
|
projectMaintenanceOrderDetailTable: {
|
loading: false,
|
dataSource: [],
|
columns: [
|
// {
|
// title: '操作',
|
// key: 'action',
|
// width: '60px',
|
// type: FormTypes.slot, // 定义该列为 自定义插值列
|
// slotName: 'action' // slot 的名称，对应 v-slot 冒号后面和等号前面的内容
|
// },
|
{
|
title: '设备封存明细id',
|
key: 'id',
|
type: JVXETypes.hidden,
|
width: '100px',
|
fixed: 'left'
|
},
|
{
|
title: '项目性维修单id',
|
key: 'projectMaintenanceOrderId',
|
type: JVXETypes.hidden,
|
|
placeholder: '请输入${title}',
|
defaultValue: ''
|
},
|
{
|
title: '设备ID',
|
key: 'equipmentId',
|
type: JVXETypes.hidden,
|
defaultValue: ''
|
},
|
{
|
title: '任务编码',
|
key: 'taskNum',
|
type: JVXETypes.input,
|
width: '180px',
|
align: "center",
|
fixed: 'left',
|
validateRules: [
|
{
|
required: true, // 必填
|
message: '请输入${title}' // 显示的文本
|
}]
|
},
|
{
|
title: '统一编码',
|
key: 'equipmentNum',
|
type: JVXETypes.normal,
|
width: '140px',
|
align: "center",
|
fixed: 'left'
|
},
|
{
|
title: '外委单位',
|
key: 'supplierId',
|
type: JVXETypes.slot,
|
disabled: true,
|
width: '140px',
|
align: "center",
|
slotName: 'supplierId',
|
defaultValue: ''
|
},
|
{
|
title: '外委单位',
|
key: 'supplierId',
|
type: JVXETypes.hidden
|
},
|
{
|
title: '维保方式',
|
key: 'maintenanceMode',
|
type: JVXETypes.select,
|
dictCode: 'maintenance_method',
|
validateRules: [
|
{
|
required: true, // 必填
|
message: '请输入${title}' // 显示的文本
|
}],
|
width: '140px',
|
align: "center",
|
defaultValue: ''
|
},
|
// {
|
// title: '特种设备',
|
// key: 'specificEquipment',
|
// type: JVXETypes.hidden,
|
// disabled: true,
|
// placeholder: '请输入${title}',
|
// defaultValue: ''
|
// },
|
// {
|
// title: '特种设备',
|
// key: 'specificEquipment_dictText',
|
// type: JVXETypes.slot,
|
// disabled: true,
|
// width: '100px',
|
// defaultValue: ''
|
// },
|
{
|
title: '设备名称',
|
key: 'equipmentName',
|
type: JVXETypes.normal,
|
disabled: true,
|
width: '140px',
|
align: "center",
|
defaultValue: ''
|
},
|
{
|
title: '设备型号',
|
key: 'model',
|
type: JVXETypes.normal,
|
disabled: true,
|
width: '140px',
|
align: "center",
|
defaultValue: ''
|
},
|
{
|
title: '设备规格',
|
key: 'specification',
|
type: JVXETypes.normal,
|
disabled: true,
|
width: '140px',
|
align: "center",
|
placeholder: '请输入${title}',
|
defaultValue: ''
|
},
|
{
|
title: '设备状态',
|
key: 'equipmentStatus_dictText',
|
type: JVXETypes.normal,
|
disabled: true,
|
width: '140px',
|
align: "center",
|
// placeholder: '请输入${title}',
|
defaultValue: ''
|
},
|
|
{
|
title: '技术状态',
|
key: 'technologyStatus_dictText',
|
type: JVXETypes.normal,
|
disabled: true,
|
width: '140px',
|
align: "center",
|
defaultValue: ''
|
},
|
{
|
title: '项目内容',
|
key: 'itemName',
|
type: JVXETypes.input,
|
placeholder: '请输入${title}',
|
width: '240px',
|
validateRules: [{
|
required: true, // 必填
|
message: '请输入${title}' // 显示的文本
|
}],
|
align: "center",
|
defaultValue: ''
|
},
|
{
|
title: '紧急程度',
|
key: 'urgency',
|
type: JVXETypes.select,
|
dictCode: 'urgency',
|
placeholder: '请输入${title}',
|
width: '140px',
|
align: "center",
|
defaultValue: ''
|
},
|
{
|
title: '责任班组',
|
key: 'teamId',
|
type: JVXETypes.slot,
|
disabled: true,
|
width: '150px',
|
placeholder: '请输入${title}',
|
defaultValue: '',
|
align: "center",
|
slotName: 'teamId'
|
},
|
{
|
title: '责任班组',
|
key: 'teamId',
|
type: JVXETypes.hidden
|
},
|
{
|
title: '责任人',
|
key: 'userId',
|
type: JVXETypes.slot,
|
disabled: true,
|
width: '160px',
|
placeholder: '请输入${title}',
|
defaultValue: '',
|
align: "center",
|
slotName: 'userId'
|
},
|
{
|
title: '责任人',
|
key: 'userId',
|
type: JVXETypes.hidden
|
},
|
{
|
title: '计划开始时间',
|
key: 'planStartTime',
|
type: JVXETypes.datetime,
|
width: '140px',
|
align: "center",
|
placeholder: '请输入${title}',
|
defaultValue: ''
|
}, {
|
title: '计划完成时间',
|
key: 'planEndTime',
|
type: JVXETypes.datetime,
|
width: '140px',
|
align: "center",
|
placeholder: '请输入${title}',
|
defaultValue: ''
|
},
|
// {
|
// title: '实际开始时间',
|
// key: 'actualStartTime',
|
// type: JVXETypes.datetime,
|
// width: '120px',
|
// placeholder: '请输入${title}',
|
// defaultValue: ''
|
// }, {
|
// title: '实际完成时间',
|
// key: 'actualEndTime',
|
// type: JVXETypes.datetime,
|
// width: '120px',
|
// placeholder: '请输入${title}',
|
// defaultValue: ''
|
// }
|
]
|
},
|
url: {
|
add: '/eam/projectMaintenanceOrder/add',
|
edit: '/eam/projectMaintenanceOrder/edit',
|
supplierVoList: 'eam/projectMaintenanceOrder/getSupplier',
|
userVoList: 'eam/projectMaintenanceOrder/getUser',
|
teamVoList: 'eam/projectMaintenanceOrder/getTeam',
|
getSupplier: '/eam/projectMaintenanceOrder/getSupplier',
|
queryById: '/eam/projectMaintenanceOrder/queryById',
|
projectMaintenanceOrderDetail: {
|
list: '/eam/projectMaintenanceOrder/queryProjectMaintenanceOrderDetailByMainId'
|
},
|
queryUserByTeamId: '/base/team/queryUserByTeamId'
|
}
|
}
|
},
|
props: {
|
//表单禁用
|
disabled: {
|
type: Boolean,
|
default: false,
|
required: false
|
}
|
},
|
computed: {
|
formDisabled() {
|
return this.disabled
|
}
|
},
|
created() {
|
this.getSuppler();
|
this.getTeam();
|
this.getUser();
|
},
|
methods: {
|
|
handleOk() {
|
this.model['annex'] = this.model.file[0].filePath;
|
/** 触发表单验证 */
|
this.getAllTable().then(tables => {
|
/** 一次性验证主表和所有的次表 */
|
return validateFormModelAndTables(this.$refs.form,this.model, tables)
|
}).then(allValues => {
|
/** 一次性验证一对一的所有子表 */
|
return this.validateSubForm(allValues)
|
}).then(allValues => {
|
if (typeof this.classifyIntoFormData !== 'function') {
|
throw this.throwNotFunction('classifyIntoFormData')
|
}
|
let formData = this.classifyIntoFormData(allValues)
|
// 发起请求
|
return this.request(formData)
|
}).catch(e => {
|
if (e.error === VALIDATE_FAILED) {
|
// 如果有未通过表单验证的子表，就自动跳转到它所在的tab
|
this.activeKey = e.index == null ? this.activeKey : this.refKeys[e.index]
|
} else {
|
console.error(e)
|
}
|
})
|
},
|
|
getSuppler() {
|
getAction(this.url.supplierVoList).then((res) => {
|
if (res.success) {
|
this.supplierVoList = res.result
|
} else {
|
this.$message.warn(res.message)
|
}
|
})
|
},
|
|
getUser() {
|
getAction(this.url.userVoList).then((res) => {
|
if (res.success) {
|
this.userVoList = res.result
|
} else {
|
this.$message.warn(res.message)
|
}
|
})
|
},
|
getTeam() {
|
getAction(this.url.teamVoList).then((res) => {
|
if (res.success) {
|
this.teamVoList = res.result
|
} else {
|
this.$message.warn(res.message)
|
}
|
})
|
},
|
// handleChangeTeam(value, data) {
|
// console.log(value)
|
// this.getUserVoList(value)
|
// console.log(data)
|
// this.$nextTick(() => {
|
// this.$set(data, 'teamId', data.teamId)
|
// })
|
// },
|
handleChange(value, data) {
|
console.log(value)
|
console.log(data)
|
this.$nextTick(() => {
|
this.$set(data, 'supplierId', data.supplierId)
|
this.$set(data, 'teamId', data.teamId)
|
this.$set(data, 'userId', data.userId)
|
})
|
},
|
getUserVoList(val) {
|
getAction(this.url.queryUserByTeamId, { teamId: val }).then(res => {
|
if (res.success) {
|
this.userVoList = res.result
|
}
|
else {
|
this.$message.error(res.message);
|
}
|
})
|
},
|
handleVerify(parent) {
|
if (parent == 'Y') {
|
// 必填。
|
}
|
},
|
selectionRows(data) {
|
// 增加选中的设备到列表中
|
this.addSelectedEquipments(data)
|
},
|
//选择设备
|
selectEquipmentList() {
|
let ids = []
|
let tableData = this.$refs.projectMaintenanceOrderDetail.getTableData()
|
let deleteData = this.$refs.projectMaintenanceOrderDetail.getDeleteData()
|
for (let i = 0; i < tableData.length; i++) {
|
ids.push(tableData[i].equipmentId)
|
}
|
this.$refs.EquipmentSelectModal.showModals(ids, tableData)
|
this.$refs.EquipmentSelectModal.title = '选择设备'
|
this.$refs.EquipmentSelectModal.disableSubmit = false
|
},
|
addSelectedEquipments(data) {
|
let tableData = this.$refs.projectMaintenanceOrderDetail.getTableData()
|
let tableStr = tableData.toString()
|
let addRows = []
|
for (let i = 0; i < data.length; i++) {
|
var sealDetail = {}
|
if (tableStr.indexOf(data[i].id) == -1) {
|
sealDetail = {
|
equipmentId: data[i].id,
|
equipmentNum: data[i].num,
|
equipmentName: data[i].name,
|
assetNumber: data[i].assetNumber,
|
specificEquipment_dictText: data[i].specificEquipment_dictText,
|
specificEquipment: data[i].specificEquipment,
|
model: data[i].model,
|
specification: data[i].specification,
|
equipmentStatus_dictText: data[i].equipmentStatus_dictText,
|
equipmentStatus: data[i].equipmentStatus,
|
technologyStatus_dictText: data[i].technologyStatus_dictText,
|
technologyStatus: data[i].technologyStatus,
|
supplierVoList: this.supplierVoList,
|
userVoList: this.userVoList,
|
teamVoList: this.teamVoList,
|
userId: data[i].userId
|
|
}
|
}
|
addRows.push(sealDetail)
|
}
|
this.$refs.projectMaintenanceOrderDetail.clearAllData()
|
this.$refs.projectMaintenanceOrderDetail.pushRows(addRows)
|
},
|
addBefore() {
|
this.projectMaintenanceOrderDetailTable.dataSource = []
|
},
|
getAllTable() {
|
let values = this.tableKeys.map(key => getRefPromise(this, key))
|
return Promise.all(values)
|
},
|
/** 调用完edit()方法之后会自动调用此方法 */
|
editAfter() {
|
this.$nextTick(() => {
|
this.model.file = this.model.annex;
|
})
|
// 加载子表数据
|
if (this.model.id) {
|
let params = { id: this.model.id }
|
this.requestSubTableData(this.url.projectMaintenanceOrderDetail.list, params, this.projectMaintenanceOrderDetailTable)
|
}
|
},
|
//校验所有一对一子表表单
|
validateSubForm(allValues) {
|
if (this.$refs.projectMaintenanceOrderDetail.getTableData().length == 0) {
|
this.$message.warning("请添加维修明细！")
|
return
|
}
|
return new Promise((resolve, reject) => {
|
Promise.all([]).then(() => {
|
resolve(allValues)
|
}).catch(e => {
|
if (e.error === VALIDATE_FAILED) {
|
// 如果有未通过表单验证的子表，就自动跳转到它所在的tab
|
this.activeKey = e.index == null ? this.activeKey : this.refKeys[e.index]
|
} else {
|
console.error(e)
|
}
|
})
|
})
|
},
|
/** 整理成formData */
|
classifyIntoFormData(allValues) {
|
let main = Object.assign(this.model, allValues.formValue)
|
return {
|
...main, // 展开
|
projectMaintenanceOrderDetailList: allValues.tablesValue[0].tableData
|
}
|
},
|
validateError(msg) {
|
this.$message.error(msg)
|
}
|
|
}
|
|
}
|
</script>
|
|
<style scoped>
|
/** tab panel 中有下拉框/日期 这类带下拉效果的，需要加此样式 */
|
|
::v-deep .jeecg-tabs-top {
|
overflow: visible;
|
}
|
|
::v-deep .ant-form-explain {
|
position: absolute;
|
right: -50px;
|
top: 12px;
|
}
|
</style>
|
