<template>
|
<div class="add">
|
<el-dialog
|
:title="isEdit ? '编辑监督计划明细':'新增监督计划明细'"
|
:visible.sync="dialogVisible"
|
width="800px"
|
>
|
<el-form ref="formRef" :model="ruleForm" :rules="rules" label-width="100px">
|
<el-col :span="12">
|
<el-form-item label="监督日期" prop="superviseDate">
|
<el-date-picker
|
v-model="ruleForm.superviseDate"
|
format="yyyy-MM-dd"
|
placeholder="选择日期"
|
style="width: 100%;"
|
type="date"
|
value-format="yyyy-MM-dd"
|
></el-date-picker>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="监督目的" prop="superviseDes">
|
<el-input v-model="ruleForm.superviseDes"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="监督项目" prop="superviseProject">
|
<el-input v-model="ruleForm.superviseProject"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="被监督人" prop="supervisePerson">
|
<el-input v-model="ruleForm.supervisePerson"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item label="监督原因" prop="superviseReason">
|
<el-input v-model="ruleForm.superviseReason"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item label="备注" prop="remarks">
|
<el-input v-model="ruleForm.remarks"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-form>
|
<div slot="footer" class="foot">
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
<el-button :loading="loading" type="primary" @click="submitForm">确 定</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
<script>
|
import { yearPlanDetailAdd, yearPlanDetailEdit } from '../../../../../assets/api/api'
|
export default {
|
props: {
|
planId: {
|
type: Number,
|
default: undefined
|
}
|
},
|
data() {
|
return {
|
loading: false,
|
isEdit: false,
|
dialogVisible: false,
|
ruleForm: {
|
id: undefined,
|
superviseDate: undefined, // 监督日期
|
superviseDes: undefined, // 监督目的
|
superviseProject: undefined, // 监督项目
|
supervisePerson: undefined, // 被监督人
|
superviseReason: undefined, // 监督原因
|
remarks: undefined, // 备注
|
},
|
rules: {
|
superviseDate: [{ required: true, message: '请选择日期', trigger: 'change' }],
|
superviseDes: [{ required: true, message: '请输入监督目的', trigger: 'blur' }],
|
superviseProject: [{ required: true, message: '请输入监督项目', trigger: 'blur' }],
|
supervisePerson: [{ required: true, message: '请输入被监督人', trigger: 'blur' }],
|
superviseReason: [{ required: true, message: '请输入监督原因', trigger: 'blur' }],
|
}
|
}
|
},
|
methods: {
|
formatForm(row) {
|
this.ruleForm.id = undefined
|
this.ruleForm.planId = row.planId
|
this.ruleForm.superviseDate = undefined
|
this.ruleForm.superviseDes = undefined
|
this.ruleForm.superviseProject = undefined
|
this.ruleForm.supervisePerson = undefined
|
this.ruleForm.superviseReason = undefined
|
this.ruleForm.remarks = undefined
|
},
|
renderForm(row) {
|
this.ruleForm.id = row.id
|
this.ruleForm.superviseDate = row.superviseDate
|
this.ruleForm.superviseDes = row.superviseDes
|
this.ruleForm.superviseProject = row.superviseProject
|
this.ruleForm.supervisePerson = row.supervisePerson
|
this.ruleForm.superviseReason = row.superviseReason
|
this.ruleForm.remarks = row.remarks
|
},
|
showDialog(row, type) {
|
console.log(row)
|
if(type) {
|
this.isEdit = true
|
this.renderForm(row)
|
} else {
|
this.formatForm(row)
|
this.isEdit = false
|
}
|
this.dialogVisible = true
|
},
|
closeDialog() {
|
this.dialogVisible = false
|
},
|
async addYearDetail() {
|
const { code, data } = await this.$axios({
|
method: 'post',
|
url: yearPlanDetailAdd,
|
data: this.ruleForm,
|
headers: {
|
'Content-Type': 'application/json'
|
}
|
})
|
this.loading = false
|
if(code == 200) {
|
this.$message({
|
type: 'success',
|
message: '新增成功'
|
})
|
this.closeDialog()
|
this.$emit('submit')
|
} else {
|
this.$message({
|
type: 'error',
|
message: '新增失败'
|
})
|
}
|
},
|
async editYearDetail() {
|
const { code, data } = await this.$axios({
|
method: 'post',
|
url: yearPlanDetailEdit,
|
data: this.ruleForm,
|
headers: {
|
'Content-Type': 'application/json'
|
}
|
})
|
this.loading = false
|
if(code == 200) {
|
this.$message({
|
type: 'success',
|
message: '编辑成功'
|
})
|
this.closeDialog()
|
this.$emit('submit')
|
} else {
|
this.$message({
|
type: 'error',
|
message: '编辑失败'
|
})
|
}
|
},
|
submitForm() {
|
this.$refs.formRef.validate((valid) => {
|
if (valid) {
|
this.loading = true
|
if(this.isEdit) {
|
this.editYearDetail()
|
} else {
|
this.addYearDetail()
|
}
|
} else {
|
return false;
|
}
|
})
|
},
|
}
|
}
|
</script>
|
<style scoped>
|
.foot {
|
width: 100%;
|
}
|
.add >>> .el-dialog__footer {
|
padding-right: 20px;
|
}
|
</style>
|
