<template>
|
<div>
|
<el-dialog
|
:title="!dataForm.id ? '新建' : '编辑'"
|
:close-on-click-modal="false"
|
width="80%"
|
:visible.sync="addVisible">
|
<!-- 添加内容-->
|
<el-form :model="dataForm" label-width="100px" ref="dataForm">
|
<el-row :gutter="20">
|
<el-col :xs="24":sm="6":md="6":lg="6":xl="6">
|
<el-form-item label="名称" prop="name">
|
<el-input v-model="dataForm.name" placeholder="名称" clearable></el-input>
|
</el-form-item>
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
<!-- 按钮 -->
|
<span slot="footer" class="dialog-footer">
|
<el-button size="mini" @click="cancel">取消</el-button>
|
<el-button size="mini" class="active" type="primary" @click="dataFormSubmit()">保存</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { deviceTypeUpdate,deviceTypeCreate } from '@/api/Api'
|
export default {
|
props: ['addVisible','row'],
|
data() {
|
return {
|
visible: false,
|
dataForm: {
|
id: 0, // title显示新增还是修改
|
name: ''
|
}
|
|
}
|
},
|
watch: {
|
addVisible: {
|
handler (val) {
|
if (val) {
|
this.init()
|
}
|
},
|
immediate: true
|
}
|
},
|
created () {
|
console.log('add create');
|
this.init(this.row)
|
},
|
methods: {
|
init(row) {
|
if (this.$refs['dataForm']) {
|
this.$refs['dataForm'].resetFields()
|
}
|
if (row !== undefined) {
|
this.dataForm.id = row.id
|
this.dataForm.name = row.name
|
|
} else {
|
this.dataForm.id = ''
|
}
|
},
|
/* 查询使用部门*/
|
cancel () {
|
this.$emit('close')
|
},
|
/* 提交*/
|
dataFormSubmit() {
|
if (this.dataForm.id === '') { // 新增
|
deviceTypeCreate(this.dataForm).then(res => {
|
this.$message({
|
message: '新增成功',
|
type: 'success',
|
duration: 1500,
|
onClose: () => {
|
this.$emit('confirm')
|
this.visible = false
|
}
|
})
|
})
|
} else {
|
deviceTypeUpdate(this.dataForm).then(res => {
|
this.$message({
|
message: '修改成功',
|
type: 'success',
|
duration: 1500,
|
onClose: () => {
|
this.$emit('confirm')
|
this.visible = false
|
}
|
})
|
})
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.el-form-item__content {
|
.el-select,.el-input {
|
width: 100%;
|
}
|
}
|
.avatar-uploader .el-upload {
|
border: 1px dashed #d9d9d9;
|
border-radius: 6px;
|
cursor: pointer;
|
position: relative;
|
overflow: hidden;
|
}
|
.avatar-uploader .el-upload:hover {
|
border-color: #409EFF;
|
}
|
.avatar-uploader-icon {
|
font-size: 28px;
|
color: #8c939d;
|
width: 178px;
|
height: 178px;
|
line-height: 178px;
|
text-align: center;
|
}
|
.avatar {
|
width: 178px;
|
height: 178px;
|
display: block;
|
}
|
</style>
|
