Merge pull request #129 from veops/dev_ui

前端更新

Author: pycook

cmdb-ui/src/modules/cmdb/components/cmdbGrant/ciTypeGrant.vue

@@ -1,6 +1,14 @@
 <template>
   <div class="ci-type-grant">
-    <vxe-table size="mini" stripe class="ops-stripe-table" :data="filterTableData" :max-height="`${tableHeight}px`">
+    <vxe-table
+      ref="xTable"
+      size="mini"
+      stripe
+      class="ops-stripe-table"
+      :data="filterTableData"
+      :max-height="`${tableHeight}px`"
+      :row-style="(params) => getCurrentRowStyle(params, addedRids)"
+    >
       <vxe-column field="name"></vxe-column>
       <vxe-column v-for="col in columns" :key="col" :field="col" :title="permMap[col]">
         <template #default="{row}">
@@ -37,6 +45,7 @@ import _ from 'lodash'
 import { permMap } from './constants.js'
 import { grantCiType, revokeCiType } from '../../api/CIType'
 import ReadCheckbox from './readCheckbox.vue'
+import { getCurrentRowStyle } from './utils'
 
 export default {
   name: 'CiTypeGrant',
@@ -55,10 +64,13 @@ export default {
       type: String,
       default: 'ci_type',
     },
+    addedRids: {
+      type: Array,
+      default: () => [],
+    },
   },
   computed: {
     filterTableData() {
-      console.log(_.cloneDeep(this.tableData))
       const _tableData = this.tableData.filter((data) => {
         const _intersection = _.intersection(
           Object.keys(data),
@@ -90,6 +102,7 @@ export default {
     }
   },
   methods: {
+    getCurrentRowStyle,
     async handleChange(e, col, row) {
       if (e.target.checked) {
         await grantCiType(this.CITypeId, row.rid, { perms: [col] }).catch(() => {

cmdb-ui/src/modules/cmdb/components/cmdbGrant/grantComp.vue

@@ -9,6 +9,8 @@
         @grantDepart="grantDepart"
         @grantRole="grantRole"
         @getTableData="getTableData"
+        ref="grant_ci_type"
+        :addedRids="addedRids"
       />
     </template>
     <template
@@ -25,6 +27,8 @@
         @grantRole="grantRole"
         @getTableData="getTableData"
         @openReadGrantModal="openReadGrantModal"
+        ref="grant_ci"
+        :addedRids="addedRids"
       />
     </template>
     <template v-if="cmdbGrantType.includes('type_relation')">
@@ -36,6 +40,8 @@
         @grantDepart="grantDepart"
         @grantRole="grantRole"
         @getTableData="getTableData"
+        ref="grant_type_relation"
+        :addedRids="addedRids"
       />
     </template>
     <template v-if="cmdbGrantType.includes('relation_view')">
@@ -47,6 +53,8 @@
         @grantDepart="grantDepart"
         @grantRole="grantRole"
         @getTableData="getTableData"
+        ref="grant_relation_view"
+        :addedRids="addedRids"
       />
     </template>
 
@@ -108,6 +116,7 @@ export default {
       attrGroup: [],
       filerPerimissions: {},
       loading: false,
+      addedRids: [], // 本次新增的rid
     }
   },
   computed: {
@@ -282,6 +291,12 @@ export default {
           })
         )
       }
+      this.addedRids = rids
+      this.$nextTick(() => {
+        setTimeout(() => {
+          this.$refs[`grant_${grantType}`].$refs.xTable.elemStore['main-body-wrapper'].scrollTo(0, 0)
+        }, 300)
+      })
     },
     openReadGrantModal(col, row) {
       this.$refs.readGrantModal.open(col, row)

cmdb-ui/src/modules/cmdb/components/cmdbGrant/relationViewGrant.vue

@@ -1,6 +1,14 @@
 <template>
   <div class="ci-relation-grant">
-    <vxe-table size="mini" stripe class="ops-stripe-table" :data="tableData" :max-height="`${tableHeight}px`">
+    <vxe-table
+      ref="xTable"
+      size="mini"
+      stripe
+      class="ops-stripe-table"
+      :data="tableData"
+      :max-height="`${tableHeight}px`"
+      :row-style="(params) => getCurrentRowStyle(params, addedRids)"
+    >
       <vxe-column field="name"></vxe-column>
       <vxe-column v-for="col in columns" :key="col" :field="col" :title="permMap[col]">
         <template #default="{row}">
@@ -18,6 +26,8 @@
 <script>
 import { permMap } from './constants.js'
 import { grantRelationView, revokeRelationView } from '../../api/preference.js'
+import { getCurrentRowStyle } from './utils'
+
 export default {
   name: 'RelationViewGrant',
   inject: ['loading', 'isModal'],
@@ -34,6 +44,10 @@ export default {
       type: String,
       default: 'relation_view',
     },
+    addedRids: {
+      type: Array,
+      default: () => [],
+    },
   },
   data() {
     return {
@@ -53,6 +67,7 @@ export default {
     },
   },
   methods: {
+    getCurrentRowStyle,
     grantDepart() {
       this.$emit('grantDepart', this.grantType)
     },

cmdb-ui/src/modules/cmdb/components/cmdbGrant/typeRelationGrant.vue

@@ -1,6 +1,14 @@
 <template>
   <div class="ci-relation-grant">
-    <vxe-table size="mini" stripe class="ops-stripe-table" :data="tableData" :max-height="`${tableHeight}px`">
+    <vxe-table
+      ref="xTable"
+      size="mini"
+      stripe
+      class="ops-stripe-table"
+      :data="tableData"
+      :max-height="`${tableHeight}px`"
+      :row-style="(params) => getCurrentRowStyle(params, addedRids)"
+    >
       <vxe-column field="name"></vxe-column>
       <vxe-column v-for="col in columns" :key="col" :field="col" :title="permMap[col]">
         <template #default="{row}">
@@ -18,6 +26,8 @@
 <script>
 import { permMap } from './constants.js'
 import { grantTypeRelation, revokeTypeRelation } from '../../api/CITypeRelation.js'
+import { getCurrentRowStyle } from './utils'
+
 export default {
   name: 'TypeRelationGrant',
   inject: ['loading', 'isModal'],
@@ -34,6 +44,10 @@ export default {
       type: Array,
       default: null,
     },
+    addedRids: {
+      type: Array,
+      default: () => [],
+    },
   },
   data() {
     return {
@@ -53,6 +67,7 @@ export default {
     },
   },
   methods: {
+    getCurrentRowStyle,
     grantDepart() {
       this.$emit('grantDepart', this.grantType)
     },

cmdb-ui/src/modules/cmdb/components/cmdbGrant/utils.js

@@ -0,0 +1,4 @@
+export const getCurrentRowStyle = ({ row }, addedRids) => {
+    const idx = addedRids.findIndex(item => item.rid === row.rid)
+    return idx > -1 ? 'background-color:#E0E7FF!important' : ''
+}