<!-- 项目管理新增、编辑、详情 -->
<template>
<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
<el-form ref="dataForm" :rules="rules" :model="form" label-well-code="right" label-width="120px">
<el-form-item label="项目名称" prop="projectName">
<el-input v-model.trim="form.projectName" :disabled="dialogStatus === 'detail'" type="text" placeholder="必填" clearable/>
</el-form-item>
<el-form-item label="项目简称" prop="projectSimpleName">
<el-input v-model.trim="form.projectSimpleName" :disabled="dialogStatus === 'detail'" type="text" placeholder="必填" clearable/>
</el-form-item>
<el-form-item label="项目经理" prop="projectManager">
<el-input v-model.trim="form.projectManager" :disabled="dialogStatus === 'detail'" type="text" placeholder="必填" clearable/>
</el-form-item>
<el-form-item label="项目开始日期" prop="projectStartTime">
<el-date-picker
v-model="form.projectStartTime"
:disabled="dialogStatus === 'detail'"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
type="date"
placeholder="请选择开始日期"
clearable
/>
</el-form-item>
<el-form-item label="项目结束日期" prop="projectEndTime">
<el-date-picker
v-model="form.projectEndTime"
:disabled="dialogStatus === 'detail'"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
type="date"
placeholder="请选择结束日期"
clearable
/>
</el-form-item>
<el-form-item label="生产设备类型" prop="type">
<el-input v-model.trim="form.type" :disabled="dialogStatus === 'detail'" :placeholder="dialogStatus === 'detail' ? '' : '必填'" type="text" clearable/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="saveData">提交</el-button>
<el-button @click="cancel">取消</el-button>
</div>
</el-dialog>
</template>
<script>
import { getDeviceTypeList } from '@/api/factoryManager/projectManagement'
export default {
name: 'EditProject',
data() {
return {
dialogFormVisible: false, // 对话框是否显示
dialogStatus: '', // 对话框类型：create,update
form: {
projectName: '', // 名称
projectSimpleName: '', // 简称
projectStartTime: '', // 开始日期
projectEndTime: '', // 结束日期
type: '', // 生产设备类型
id: '' // 主键
}, // 表单
textMap: {
update: '编辑',
create: '新增',
detail: '详情'
}, // 表头显示标题
rules: {
projectName: [{ required: true, message: '项目名称不能为空', trigger: ['blur', 'change'] }],
projectSimpleName: [{ required: true, message: '项目简称不能为空', trigger: ['blur', 'change'] }],
projectStartTime: [{ type: 'date', required: true, message: '项目开始日期不能为空', trigger: 'change' }],
projectEndTime: [{ type: 'date', required: true, message: '项目结束日期不能为空', trigger: 'change' }]
} // 前端校验规则
}
},
created() {
this.fetchDeviceTypeList() // 获取生产设备类型列表
},
methods: {
// 获取生产设备类型列表
fetchDeviceTypeList() {
const param = {
product_name: '',
status: '',
principal: ''
}
getDeviceTypeList(param).then(res => {
})
},
// 初始化对话框
initDialog: function(dialogStatus, dialogFormVisible, row = null) {
this.fetchDeviceTypeList()
this.dialogStatus = dialogStatus // 类型 新增create 编辑update 详情detail
this.dialogFormVisible = dialogFormVisible // 对话框显隐
if (dialogStatus === 'create') { // 如果是新增，清除验证
this.resetForm()
this.$nextTick(() => {
this.$refs['dataForm'].clearValidate()
})
} else if (dialogStatus === 'update') { // 如果是修改，将row中数据填写到输入框中
this.form = {
projectName: row.projectName, // 名称
projectSimpleName: row.projectSimpleName, // 简称
projectStartTime: row.projectStartTime, // 开始日期
projectEndTime: row.projectEndTime, // 结束日期
type: row.type, // 生产设备类型
id: row.id
}
}
},
// 重置表单
resetForm() {
this.form = {
projectName: '', // 名称
projectSimpleName: '', // 简称
projectStartTime: '', // 开始日期
projectEndTime: '', // 结束日期
type: '' // 生产设备类型
}
},
// 点击提交
saveData: function() {
if (this.dialogStatus === 'update') {
this.updateData()
} else if (this.dialogStatus === 'create') {
this.createData()
}
},
// 新增数据
createData: function() {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
// addDeviceType(this.form.productName, this.form.productModel, this.form.machineVersion,
// this.form.hardwareVersion, this.form.softwareVersion, this.form.designArchive,
// this.form.batchFiling, this.form.status, this.form.principal,
// this.form.kpi, this.form.quotaSummary, this.quotaSummaryFile, this.form.communicationVersion,
// this.form.productType).then(response => {
// if (response.code === 200) {
// this.$confirm('新增成功，是否继续新增?', '提示', {
// confirmButtonText: '是',
// cancelButtonText: '否',
// type: 'info'
// }).then(() => {
// this.resetForm()
// this.$nextTick(() => {
// this.$refs['dataForm'].clearValidate()
// })
// }).catch(() => {
// this.$emit('watchChild')
// this.dialogFormVisible = false
// })
// }
// })
}
})
},
// 修改数据
updateData: function() {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
// updateDeviceType(this.form.id, this.form.productName, this.form.productModel, this.form.machineVersion,
// this.form.hardwareVersion, this.form.softwareVersion, this.form.designArchive,
// this.form.batchFiling, this.form.status, this.form.principal,
// this.form.kpi, this.form.quotaSummary, this.quotaSummaryFile, this.form.communicationVersion,
// this.form.productType).then(response => {
// if (response.code === 200) {
// this.$message.success('修改成功')
// this.$emit('watchChild')
// this.dialogFormVisible = false
// }
// })
}
})
},
cancel: function() {
this.dialogFormVisible = false
this.$emit('watchChild')
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.el-select{
width: 100%;
}
.el-date-editor{
width: 100%;
}
</style>
