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

data-room-ui/packages/BigScreenList/CatalogEditForm.vue

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

data-room-ui/packages/BigScreenMag/SideMenu.vue

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

data-room-ui/packages/ComponentList/CatalogEditForm.vue

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

data-room-ui/packages/SourceMag/SideMenu.vue

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