lanan-system-vue/src/views/company/property/propertykeep/PropertyKeepForm.vue
2024-08-15 20:18:55 +08:00

113 lines
3.4 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="app-container">
<!-- 对话框(添加 / 修改) -->
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="45%" v-dialogDrag append-to-body>
<el-form ref="formRef" :model="formData" :rules="formRules" v-loading="formLoading" label-width="100px">
<el-form-item label="资产id" prop="propertyId">
<el-input v-model="formData.propertyId" placeholder="请输入资产id" />
</el-form-item>
<el-form-item label="维修/保养日期" prop="keepDate">
<el-date-picker clearable v-model="formData.keepDate" type="date" value-format="timestamp"
placeholder="选择维修/保养日期" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="formData.remark" placeholder="请输入备注" />
</el-form-item>
<el-form-item label="附件urls">
<FileUpload v-model="formData.fileUrls" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm" :disabled="formLoading"> </el-button>
<el-button @click="dialogVisible = false"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import * as PropertyKeepApi from '@/api/company/property/propertykeep';
import FileUpload from '@/components/FileUpload';
export default {
name: "PropertyKeepForm",
components: {
FileUpload,
},
data() {
return {
// 弹出层标题
dialogTitle: "",
// 是否显示弹出层
dialogVisible: false,
// 表单的加载中1修改时的数据加载2提交的按钮禁用
formLoading: false,
// 表单参数
formData: {
id: undefined,
propertyId: undefined,
keepDate: undefined,
remark: undefined,
fileUrls: undefined,
},
// 表单校验
formRules: {
},
};
},
methods: {
/** 打开弹窗 */
async open(id) {
this.dialogVisible = true;
this.reset();
// 修改时,设置数据
if (id) {
this.formLoading = true;
try {
const res = await PropertyKeepApi.getPropertyKeep(id);
this.formData = res.data;
this.title = "修改资产维修/保养记录";
} finally {
this.formLoading = false;
}
}
this.title = "新增资产维修/保养记录";
},
/** 提交按钮 */
async submitForm() {
// 校验主表
await this.$refs["formRef"].validate();
this.formLoading = true;
try {
const data = this.formData;
// 修改的提交
if (data.id) {
await PropertyKeepApi.updatePropertyKeep(data);
this.$modal.msgSuccess("修改成功");
this.dialogVisible = false;
this.$emit('success');
return;
}
// 添加的提交
await PropertyKeepApi.createPropertyKeep(data);
this.$modal.msgSuccess("新增成功");
this.dialogVisible = false;
this.$emit('success');
} finally {
this.formLoading = false;
}
},
/** 表单重置 */
reset() {
this.formData = {
id: undefined,
propertyId: undefined,
keepDate: undefined,
remark: undefined,
fileUrls: undefined,
};
this.resetForm("formRef");
}
}
};
</script>