water-design-const-web/src/views/basic/owner-manage/addOrEditForm.vue

139 lines
4.2 KiB
Vue

<template>
<!-- 基础管理-业主单位-新增或编辑 -->
<div>
<el-form
:model="addOrEditForm"
:rules="addOrEditFormRules"
ref="addOrEditFormRef"
label-position="left"
label-width="auto"
>
<el-form-item label="业主单位名称" prop="unitName">
<el-row>
<el-col :span="20">
<el-input v-model="addOrEditForm.unitName" placeholder="请输入业主单位名称"/>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="主单位负责人" prop="unitMan">
<el-row>
<el-col :span="20">
<el-input v-model="addOrEditForm.unitMan" placeholder="请输入主单位负责人"/>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="主单位负责人电话" prop="phone">
<el-row>
<el-col :span="20">
<el-input v-model="addOrEditForm.phone" placeholder="请输入主单位负责人电话"/>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="主单位地址" prop="address">
<el-row>
<el-col :span="20">
<el-input v-model="addOrEditForm.address" placeholder="请输入主单位地址"/>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-row>
<el-col :span="20">
<el-input v-model="addOrEditForm.remark" placeholder="请输入备注"/>
</el-col>
</el-row>
</el-form-item>
<el-form-item>
<el-button @click="cancel">取消</el-button>
<el-button type="primary" @click="submitForm">确定</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import {addOwnerApi, editOwnerApi,} from '@/api/basic/owner-manage'
export default {
name: 'AddOrEditForm',
data() {
return {
addOrEditForm: {
unitName: '',
unitMan: '',
phone: '',
address: '',
remark: '',
id: undefined,
},
addOrEditFormRules: {
unitName: [{required: true, message: '请输入业主单位名称', trigger: 'blur'}],
unitMan: [{required: true, message: '请输入主单位负责人', trigger: 'blur'}],
},
}
},
methods: {
cancel() {
this.addOrEditForm.unitName='';
this.addOrEditForm.unitMan='';
this.addOrEditForm.phone='';
this.addOrEditForm.address='';
this.addOrEditForm.remark='';
this.addOrEditForm.id=undefined;
this.$emit('closeAddOrEditFormDialog', false)
},
submitForm() {
this.$refs.addOrEditFormRef.validate(async (valid) => {
if (valid) {
// 组装参数
const params = {
unitName: this.addOrEditForm.unitName?.trim() ?? '',
unitMan: this.addOrEditForm.unitMan?.trim() ?? '',
phone: this.addOrEditForm.phone?.trim() ?? '',
address: this.addOrEditForm.address?.trim() ?? '',
remark: this.addOrEditForm.remark?.trim() ?? '',
}
if (this.addOrEditForm.id) {
params.id = this.addOrEditForm.id
}
const API = this.addOrEditForm.id ? editOwnerApi : addOwnerApi
const res = await API(params)
if (res.code === 200) {
this.$modal.msgSuccess(this.addOrEditForm.id ? '修改成功' : '新增成功')
this.addOrEditForm.unitName='';
this.addOrEditForm.unitMan='';
this.addOrEditForm.phone='';
this.addOrEditForm.address='';
this.addOrEditForm.remark='';
this.addOrEditForm.id=undefined;
this.$emit('closeAddOrEditFormDialog', true)
}
} else {
return false
}
})
},
resetForm() {
this.$refs.addOrEditFormRef.resetFields()
},
setFormData(data) {
const {unitName,unitMan, phone,address, remark, id} = data
this.addOrEditForm.unitName = unitName
this.addOrEditForm.unitMan = unitMan
this.addOrEditForm.phone = phone
this.addOrEditForm.address = address
this.addOrEditForm.remark = remark
this.addOrEditForm.id = id
},
},
}
</script>