Merge pull request #129 from veops/dev_ui

前端更新
2023-07-25 18:19:47 +08:00 · 2023-07-25 18:19:47 +08:00 · b787bd9b7b
parent 5140c0a58f 11f69d8679
commit b787bd9b7b
6 changed files with 195 additions and 126 deletions
--- a/cmdb-ui/src/modules/cmdb/components/cmdbGrant/ciTypeGrant.vue
+++ b/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(() => {
--- a/cmdb-ui/src/modules/cmdb/components/cmdbGrant/grantComp.vue
+++ b/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)
--- a/cmdb-ui/src/modules/cmdb/components/cmdbGrant/relationViewGrant.vue
+++ b/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)
    },
--- a/cmdb-ui/src/modules/cmdb/components/cmdbGrant/typeRelationGrant.vue
+++ b/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)
    },
--- a/cmdb-ui/src/modules/cmdb/components/cmdbGrant/utils.js
+++ b/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' : ''
+}
--- a/cmdb-ui/src/modules/cmdb/views/ci_types/ceateNewAttribute.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci_types/ceateNewAttribute.vue
@ -1,130 +1,137 @@
 <template>
  <a-form :form="form" class="create-new-attribute">
    <a-divider style="font-size:14px;margin-top:6px;">基础设置</a-divider>
-    <a-col :span="12">
-      <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="属性名(英文)">
-        <a-input
-          name="name"
-          placeholder="英文"
-          v-decorator="[
-            'name',
-            {
-              rules: [
-                { required: true, message: '请输入属性名' },
-                { message: '不能以数字开头，可以是英文 数字以及下划线 (_)', pattern: RegExp('^(?!\\d)[a-zA-Z_0-9]+$') },
-                { message: '内置字段', pattern: RegExp('^(?!(id|_id|ci_id|type|_type|ci_type)$).*$') },
-              ],
-            },
-          ]"
-        />
-      </a-form-item>
-    </a-col>
-    <a-col :span="12">
-      <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="别名">
-        <a-input name="alias" v-decorator="['alias', { rules: [] }]" />
-      </a-form-item>
-    </a-col>
-    <a-col :span="12">
-      <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="数据类型">
-        <a-select
-          name="value_type"
-          style="width: 100%"
-          v-decorator="['value_type', { rules: [{ required: true }], initialValue: '2' }]"
-          @change="handleChangeValueType"
-        >
-          <a-select-option :value="key" :key="key" v-for="(value, key) in valueTypeMap">{{ value }}</a-select-option>
-        </a-select>
-      </a-form-item>
-    </a-col>
-    <a-col :span="currentValueType === '6' ? 24 : 12">
-      <a-form-item
-        :label-col="{ span: currentValueType === '6' ? 4 : 8 }"
-        :wrapper-col="{ span: currentValueType === '6' ? 18 : 12 }"
-        label="默认值"
-      >
-        <template>
-          <a-select
-            v-if="form.getFieldValue('is_list')"
-            mode="tags"
-            :style="{ width: '100%' }"
-            v-decorator="['default_value', { rules: [{ required: false }] }]"
-          >
-          </a-select>
-          <a-input-number
-            style="width: 100%"
-            v-else-if="currentValueType === '1'"
-            v-decorator="['default_value', { rules: [{ required: false }] }]"
-          >
-          </a-input-number>
-          <a-select
-            v-decorator="['default_value', { rules: [{ required: false }] }]"
-            mode="tags"
-            v-else-if="currentValueType === '0'"
-            @select="selectIntDefaultValue"
-          >
-            <a-select-option key="$auto_inc_id">
-              自增ID
-            </a-select-option>
-          </a-select>
+    <a-row>
+      <a-col :span="12">
+        <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="属性名(英文)">
          <a-input
-            style="width: 100%"
-            v-else-if="currentValueType === '2' || currentValueType === '5'"
-            v-decorator="['default_value', { rules: [{ required: false }] }]"
-          >
-          </a-input>
-          <a-select
-            allowClear
-            v-decorator="['default_value', { rules: [{ required: false }] }]"
-            v-else-if="currentValueType === '3' && defaultForDatetime !== '$custom_time'"
-            @select="changeDefaultForDatetime"
-          >
-            <a-select-option key="$created_at">
-              创建时间
-            </a-select-option>
-            <a-select-option key="$updated_at">
-              更新时间
-            </a-select-option>
-            <a-select-option key="$custom_time">
-              自定义时间
-            </a-select-option>
-          </a-select>
-          <template v-else-if="currentValueType === '4' || currentValueType === '3'">
-            <a-date-picker
-              style="width: 100%"
-              v-decorator="['default_value', { rules: [{ required: false }] }]"
-              :format="currentValueType === '4' ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm:ss'"
-              :showTime="currentValueType === '4' ? false : { format: 'HH:mm:ss' }"
-            />
-            <a-dropdown
-              :style="{ position: 'absolute', right: '-15px', top: '-10px' }"
-              :trigger="['click']"
-              v-if="currentValueType === '3'"
-            >
-              <a><a-icon type="down" /> </a>
-              <a-menu slot="overlay" @click="onClick">
-                <a-menu-item key="$created_at">
-                  <a>创建时间</a>
-                </a-menu-item>
-                <a-menu-item key="$updated_at">
-                  <a>更新时间</a>
-                </a-menu-item>
-              </a-menu>
-            </a-dropdown>
-          </template>
-
-          <vue-json-editor
-            v-else-if="currentValueType === '6'"
-            :style="{ '--custom-height': `${200}px` }"
-            v-model="default_value_json"
-            :showBtns="false"
-            :mode="'code'"
-            lang="zh"
-            @json-change="onJsonChange"
-            @has-error="onJsonError"
+            name="name"
+            placeholder="英文"
+            v-decorator="[
+              'name',
+              {
+                rules: [
+                  { required: true, message: '请输入属性名' },
+                  {
+                    message: '不能以数字开头，可以是英文 数字以及下划线 (_)',
+                    pattern: RegExp('^(?!\\d)[a-zA-Z_0-9]+$'),
+                  },
+                  { message: '内置字段', pattern: RegExp('^(?!(id|_id|ci_id|type|_type|ci_type)$).*$') },
+                ],
+              },
+            ]"
          />
-        </template>
-      </a-form-item>
-    </a-col>
+        </a-form-item>
+      </a-col>
+      <a-col :span="12">
+        <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="别名">
+          <a-input name="alias" v-decorator="['alias', { rules: [] }]" />
+        </a-form-item>
+      </a-col>
+    </a-row>
+    <a-row>
+      <a-col :span="12">
+        <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="数据类型">
+          <a-select
+            name="value_type"
+            style="width: 100%"
+            v-decorator="['value_type', { rules: [{ required: true }], initialValue: '2' }]"
+            @change="handleChangeValueType"
+          >
+            <a-select-option :value="key" :key="key" v-for="(value, key) in valueTypeMap">{{ value }}</a-select-option>
+          </a-select>
+        </a-form-item>
+      </a-col>
+      <a-col :span="currentValueType === '6' ? 24 : 12">
+        <a-form-item
+          :label-col="{ span: currentValueType === '6' ? 4 : 8 }"
+          :wrapper-col="{ span: currentValueType === '6' ? 18 : 12 }"
+          label="默认值"
+        >
+          <template>
+            <a-select
+              v-if="form.getFieldValue('is_list')"
+              mode="tags"
+              :style="{ width: '100%' }"
+              v-decorator="['default_value', { rules: [{ required: false }] }]"
+            >
+            </a-select>
+            <a-input-number
+              style="width: 100%"
+              v-else-if="currentValueType === '1'"
+              v-decorator="['default_value', { rules: [{ required: false }] }]"
+            >
+            </a-input-number>
+            <a-select
+              v-decorator="['default_value', { rules: [{ required: false }] }]"
+              mode="tags"
+              v-else-if="currentValueType === '0'"
+              @select="selectIntDefaultValue"
+            >
+              <a-select-option key="$auto_inc_id">
+                自增ID
+              </a-select-option>
+            </a-select>
+            <a-input
+              style="width: 100%"
+              v-else-if="currentValueType === '2' || currentValueType === '5'"
+              v-decorator="['default_value', { rules: [{ required: false }] }]"
+            >
+            </a-input>
+            <a-select
+              allowClear
+              v-decorator="['default_value', { rules: [{ required: false }] }]"
+              v-else-if="currentValueType === '3' && defaultForDatetime !== '$custom_time'"
+              @select="changeDefaultForDatetime"
+            >
+              <a-select-option key="$created_at">
+                创建时间
+              </a-select-option>
+              <a-select-option key="$updated_at">
+                更新时间
+              </a-select-option>
+              <a-select-option key="$custom_time">
+                自定义时间
+              </a-select-option>
+            </a-select>
+            <template v-else-if="currentValueType === '4' || currentValueType === '3'">
+              <a-date-picker
+                style="width: 100%"
+                v-decorator="['default_value', { rules: [{ required: false }] }]"
+                :format="currentValueType === '4' ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm:ss'"
+                :showTime="currentValueType === '4' ? false : { format: 'HH:mm:ss' }"
+              />
+              <a-dropdown
+                :style="{ position: 'absolute', right: '-15px', top: '-10px' }"
+                :trigger="['click']"
+                v-if="currentValueType === '3'"
+              >
+                <a><a-icon type="down" /> </a>
+                <a-menu slot="overlay" @click="onClick">
+                  <a-menu-item key="$created_at">
+                    <a>创建时间</a>
+                  </a-menu-item>
+                  <a-menu-item key="$updated_at">
+                    <a>更新时间</a>
+                  </a-menu-item>
+                </a-menu>
+              </a-dropdown>
+            </template>
+
+            <vue-json-editor
+              v-else-if="currentValueType === '6'"
+              :style="{ '--custom-height': `${200}px` }"
+              v-model="default_value_json"
+              :showBtns="false"
+              :mode="'code'"
+              lang="zh"
+              @json-change="onJsonChange"
+              @has-error="onJsonError"
+            />
+          </template>
+        </a-form-item>
+      </a-col>
+    </a-row>

    <a-col :span="6">
      <a-form-item