fix: 修复分组管理中编辑行数据,点击取消数据仍然变化的情况

main
wu.jian2 2 years ago
parent 05523ac1e5
commit f12b46b83b

@ -79,7 +79,7 @@
</el-dialog> </el-dialog>
<!-- 新增或编辑目录弹窗 --> <!-- 新增或编辑目录弹窗 -->
<el-dialog <el-dialog
:title="currentCatalog.code ? '编辑分组':'新建分组'" :title="groupForm.code ? '编辑分组':'新建分组'"
:visible.sync="catalogVisible" :visible.sync="catalogVisible"
custom-class="bs-el-dialog" custom-class="bs-el-dialog"
width="30%" width="30%"
@ -88,7 +88,7 @@
> >
<el-form <el-form
ref="form" ref="form"
:model="currentCatalog" :model="groupForm"
label-width="80px" label-width="80px"
:rules="formRules" :rules="formRules"
class="bs-el-form" class="bs-el-form"
@ -98,7 +98,7 @@
prop="name" prop="name"
> >
<el-input <el-input
v-model.trim="currentCatalog.name" v-model.trim="groupForm.name"
class="bs-el-input" class="bs-el-input"
clearable clearable
/> />
@ -107,7 +107,7 @@
label="排序" label="排序"
> >
<el-input-number <el-input-number
v-model="currentCatalog.orderNum" v-model="groupForm.orderNum"
:min="0" :min="0"
:max="30000" :max="30000"
controls-position="right" controls-position="right"
@ -128,7 +128,9 @@
<el-button <el-button
type="primary" type="primary"
@click="addOrEditCatalog" @click="addOrEditCatalog"
>确定</el-button> >
确定
</el-button>
</span> </span>
</el-dialog> </el-dialog>
</div> </div>
@ -137,7 +139,7 @@
<script> <script>
// import { get, post } from 'data-room-ui/js/utils/http' // import { get, post } from 'data-room-ui/js/utils/http'
// import Icon from 'data-room-ui/assets/images/dataSourceIcon/export' // import Icon from 'data-room-ui/assets/images/dataSourceIcon/export'
import _ from 'lodash' import { cloneDeep } from 'lodash'
export default { export default {
name: 'CatalogEditForm', name: 'CatalogEditForm',
components: { components: {
@ -157,6 +159,11 @@ export default {
searchKey: '', // searchKey: '', //
catalogVisible: false, catalogVisible: false,
currentCatalog: {}, currentCatalog: {},
groupForm: {
code: '',
name: '',
orderNum: ''
},
formVisible: false, formVisible: false,
formRules: { formRules: {
name: [ name: [
@ -168,7 +175,7 @@ export default {
computed: { computed: {
tableList: { tableList: {
get () { get () {
return _.cloneDeep(this.catalogList) return cloneDeep(this.catalogList)
}, },
set () { set () {
@ -198,6 +205,10 @@ export default {
if (!valid) { if (!valid) {
return return
} }
this.currentCatalog = {
...this.currentCatalog,
...this.groupForm
}
if (!this.currentCatalog.id) { if (!this.currentCatalog.id) {
this.$dataRoomAxios.post('/bigScreen/type/add', this.$dataRoomAxios.post('/bigScreen/type/add',
{ {
@ -226,7 +237,7 @@ export default {
this.catalogVisible = true this.catalogVisible = true
}, },
editCatalog (row) { editCatalog (row) {
this.currentCatalog = row this.groupForm = cloneDeep(row)
this.catalogVisible = true this.catalogVisible = true
}, },
// //

@ -57,7 +57,7 @@
</div> </div>
<!-- 新增或编辑目录弹窗 --> <!-- 新增或编辑目录弹窗 -->
<el-dialog <el-dialog
:title="currentCatalog.code ? '编辑分组':'新建分组'" :title="groupForm.code ? '编辑分组':'新建分组'"
:visible.sync="catalogVisible" :visible.sync="catalogVisible"
custom-class="bs-el-dialog" custom-class="bs-el-dialog"
width="30%" width="30%"
@ -66,7 +66,7 @@
> >
<el-form <el-form
ref="form" ref="form"
:model="currentCatalog" :model="groupForm"
label-width="80px" label-width="80px"
:rules="formRules" :rules="formRules"
class="bs-el-form" class="bs-el-form"
@ -76,7 +76,7 @@
prop="name" prop="name"
> >
<el-input <el-input
v-model.trim="currentCatalog.name" v-model.trim="groupForm.name"
class="bs-el-input" class="bs-el-input"
clearable clearable
/> />
@ -85,7 +85,7 @@
label="排序" label="排序"
> >
<el-input-number <el-input-number
v-model="currentCatalog.orderNum" v-model="groupForm.orderNum"
:min="0" :min="0"
:max="30000" :max="30000"
controls-position="right" controls-position="right"
@ -106,15 +106,15 @@
<el-button <el-button
type="primary" type="primary"
@click="addOrEditCatalog" @click="addOrEditCatalog"
>确定</el-button> >
确定
</el-button>
</span> </span>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script> <script>
// import { get, post } from '../../packages/js/utils/http' import { cloneDeep } from 'lodash'
import _ from 'lodash'
export default { export default {
components: { }, components: { },
props: { props: {
@ -141,6 +141,11 @@ export default {
code: '', code: '',
orderNum: 0 orderNum: 0
}, },
groupForm: {
code: '',
name: '',
orderNum: 0
},
formRules: { formRules: {
name: [ name: [
{ required: true, message: '分组名称不能为空', trigger: 'blur' } { required: true, message: '分组名称不能为空', trigger: 'blur' }
@ -166,8 +171,8 @@ export default {
}, },
// //
clickCatalog (catalog) { clickCatalog (catalog) {
this.currentCatalog = _.cloneDeep(catalog) this.currentCatalog = cloneDeep(catalog)
this.activeCatalog = _.cloneDeep(catalog) this.activeCatalog = cloneDeep(catalog)
this.isAll = false this.isAll = false
this.$emit('getPageInfo', { isAll: false, page: catalog }) this.$emit('getPageInfo', { isAll: false, page: catalog })
}, },
@ -182,6 +187,10 @@ export default {
if (!valid) { if (!valid) {
return return
} }
this.currentCatalog = {
...this.currentCatalog,
...this.groupForm
}
if (!this.currentCatalog.id) { if (!this.currentCatalog.id) {
this.$dataRoomAxios.post('/bigScreen/type/add', this.$dataRoomAxios.post('/bigScreen/type/add',
{ {
@ -216,6 +225,7 @@ export default {
}, },
// //
catalogEdit () { catalogEdit () {
this.groupForm = cloneDeep(this.currentCatalog)
this.catalogVisible = true this.catalogVisible = true
}, },
// //

@ -5,6 +5,7 @@
title="分组管理" title="分组管理"
:visible.sync="formVisible" :visible.sync="formVisible"
:append-to-body="true" :append-to-body="true"
custom-class="bs-el-dialog"
destroy-on-close destroy-on-close
class="bs-dialog-wrap bs-el-dialog catalog-edit-wrap" class="bs-dialog-wrap bs-el-dialog catalog-edit-wrap"
> >
@ -82,7 +83,7 @@
</el-dialog> </el-dialog>
<!-- 新增或编辑目录弹窗 --> <!-- 新增或编辑目录弹窗 -->
<el-dialog <el-dialog
:title="currentCatalog.code ? '编辑分组':'新建分组'" :title="groupForm.code ? '编辑分组':'新建分组'"
:visible.sync="catalogVisible" :visible.sync="catalogVisible"
custom-class="bs-el-dialog" custom-class="bs-el-dialog"
width="30%" width="30%"
@ -91,16 +92,17 @@
> >
<el-form <el-form
ref="form" ref="form"
:model="currentCatalog" :model="groupForm"
label-width="80px" label-width="80px"
:rules="formRules" :rules="formRules"
class="bs-el-form"
> >
<el-form-item <el-form-item
label="分组名称" label="分组名称"
prop="name" prop="name"
> >
<el-input <el-input
v-model.trim="currentCatalog.name" v-model.trim="groupForm.name"
class="bs-el-input" class="bs-el-input"
clearable clearable
/> />
@ -109,7 +111,7 @@
label="排序" label="排序"
> >
<el-input-number <el-input-number
v-model="currentCatalog.orderNum" v-model="groupForm.orderNum"
:min="0" :min="0"
:max="30000" :max="30000"
controls-position="right" controls-position="right"
@ -130,13 +132,16 @@
<el-button <el-button
type="primary" type="primary"
@click="addOrEditCatalog" @click="addOrEditCatalog"
>确定</el-button> >
确定
</el-button>
</span> </span>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script> <script>
import { cloneDeep } from 'lodash'
// import { get, post } from 'data-room-ui/js/utils/http' // import { get, post } from 'data-room-ui/js/utils/http'
export default { export default {
name: 'CatalogEditForm', name: 'CatalogEditForm',
@ -161,6 +166,11 @@ export default {
name: [ name: [
{ required: true, message: '分组名称不能为空', trigger: 'blur' } { required: true, message: '分组名称不能为空', trigger: 'blur' }
] ]
},
groupForm: {
code: '',
name: '',
orderNum: 0
} }
} }
}, },
@ -195,6 +205,10 @@ export default {
if (!valid) { if (!valid) {
return return
} }
this.currentCatalog = {
...this.currentCatalog,
...this.groupForm
}
if (!this.currentCatalog.id) { if (!this.currentCatalog.id) {
this.$dataRoomAxios.post('/bigScreen/type/add', this.$dataRoomAxios.post('/bigScreen/type/add',
{ {
@ -223,7 +237,7 @@ export default {
this.catalogVisible = true this.catalogVisible = true
}, },
editCatalog (row) { editCatalog (row) {
this.currentCatalog = row this.groupForm = cloneDeep(row)
this.catalogVisible = true this.catalogVisible = true
}, },
// //
@ -260,6 +274,9 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../assets/style/bsTheme.scss'; @import '../assets/style/bsTheme.scss';
.catalog-edit-wrap{ .catalog-edit-wrap{
::v-deep .el-dialog__body{
min-height: 500px !important;
}
.el-input { .el-input {
width: 200px; width: 200px;
margin-right: 20px; margin-right: 20px;

@ -43,7 +43,7 @@
slot="dropdown" slot="dropdown"
class="dropdown-menu-box bs-el-dropdown-menu" class="dropdown-menu-box bs-el-dropdown-menu"
> >
<el-dropdown-item @click.native="catalogEdit(catalog)"> <el-dropdown-item @click.native="catalogEdit()">
编辑 编辑
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item <el-dropdown-item
@ -66,7 +66,7 @@
</div> </div>
<!-- 新增或编辑目录弹窗 --> <!-- 新增或编辑目录弹窗 -->
<el-dialog <el-dialog
:title="currentCatalog.code ? '编辑分组' : '新建分组'" :title="groupForm.code ? '编辑分组' : '新建分组'"
:visible.sync="catalogVisible" :visible.sync="catalogVisible"
custom-class="bs-el-dialog" custom-class="bs-el-dialog"
width="30%" width="30%"
@ -75,7 +75,7 @@
> >
<el-form <el-form
ref="form" ref="form"
:model="currentCatalog" :model="groupForm"
label-width="80px" label-width="80px"
:rules="formRules" :rules="formRules"
class="bs-el-form" class="bs-el-form"
@ -85,14 +85,14 @@
prop="name" prop="name"
> >
<el-input <el-input
v-model.trim="currentCatalog.name" v-model.trim="groupForm.name"
class="bs-el-input" class="bs-el-input"
clearable clearable
/> />
</el-form-item> </el-form-item>
<el-form-item label="排序"> <el-form-item label="排序">
<el-input-number <el-input-number
v-model="currentCatalog.orderNum" v-model="groupForm.orderNum"
:min="0" :min="0"
:max="30000" :max="30000"
controls-position="right" controls-position="right"
@ -119,9 +119,7 @@
</div> </div>
</template> </template>
<script> <script>
// import { get, post } from '../../packages/js/utils/http' import { cloneDeep } from 'lodash'
import _ from 'lodash'
export default { export default {
components: {}, components: {},
data () { data () {
@ -164,6 +162,11 @@ export default {
id: '', id: '',
code: '' code: ''
}, },
groupForm: {
code: '',
name: '',
orderNum: ''
},
formRules: { formRules: {
name: [{ required: true, message: '分组名称不能为空', trigger: 'blur' }] name: [{ required: true, message: '分组名称不能为空', trigger: 'blur' }]
} }
@ -208,6 +211,10 @@ export default {
if (!valid) { if (!valid) {
return return
} }
this.currentCatalog = {
...this.currentCatalog,
...this.groupForm
}
if (!this.currentCatalog.id) { if (!this.currentCatalog.id) {
this.$dataRoomAxios.post('/bigScreen/type/add', { this.$dataRoomAxios.post('/bigScreen/type/add', {
...this.currentCatalog, ...this.currentCatalog,
@ -236,13 +243,14 @@ export default {
}, },
// //
clickCatalog (catalog) { clickCatalog (catalog) {
this.currentCatalog = _.cloneDeep(catalog) this.currentCatalog = cloneDeep(catalog)
this.activeCatalog = _.cloneDeep(catalog) this.activeCatalog = cloneDeep(catalog)
this.isAll = false this.isAll = false
this.$emit('getPageInfo', { isAll: false, page: catalog }) this.$emit('getPageInfo', { isAll: false, page: catalog })
}, },
// //
catalogEdit () { catalogEdit () {
this.groupForm = cloneDeep(this.currentCatalog)
this.catalogVisible = true this.catalogVisible = true
}, },
// //

Loading…
Cancel
Save