UI: batch update relation

2025-08-07 20:48:31 +08:00 · 2020-04-01 11:09:41 +08:00
parent 764d2fac3f
commit c31be0f753
12 changed files with 204 additions and 15 deletions
--- a/cmdb-ui/package.json
+++ b/cmdb-ui/package.json
@@ -15,7 +15,7 @@
    "@antv/data-set": "^0.10.2",
    "@handsontable-pro/vue": "^3.1.1",
    "@handsontable/vue": "^4.1.1",
-    "ant-design-vue": "1.5.0-beta.1",
+    "ant-design-vue": "1.5.0",
    "axios": "^0.19.0",
    "core-js": "^3.1.2",
    "enquire.js": "^2.1.6",
--- a/cmdb-ui/src/App.vue
+++ b/cmdb-ui/src/App.vue
@@ -1,9 +1,9 @@
 <template>
-  <a-locale-provider :locale="locale">
+  <a-config-provider :locale="locale">
    <div id="app">
      <router-view v-if="alive" />
    </div>
-  </a-locale-provider>
+  </a-config-provider>
 </template>

 <script>
--- a/cmdb-ui/src/api/cmdb/CIRelation.js
+++ b/cmdb-ui/src/api/cmdb/CIRelation.js
@@ -28,3 +28,11 @@ export function statisticsCIRelation (params) {
    params: params
  })
 }
+
+export function batchUpdateCIRelation (ciIds, parents) {
+  return axios({
+    url: '/v0.1/ci_relations/batch',
+    method: 'POST',
+    data: { ci_ids: ciIds, parents: parents }
+  })
+}
--- a/cmdb-ui/src/core/lazy_lib/components_use.js
+++ b/cmdb-ui/src/core/lazy_lib/components_use.js
@@ -8,7 +8,7 @@
 */
 import Vue from 'vue'
 import {
-  LocaleProvider,
+  ConfigProvider,
  Layout,
  Input,
  InputNumber,
@@ -50,7 +50,7 @@ import {
 } from 'ant-design-vue'
 // import VueCropper from 'vue-cropper'

-Vue.use(LocaleProvider)
+Vue.use(ConfigProvider)
 Vue.use(Layout)
 Vue.use(Input)
 Vue.use(InputNumber)
--- a/cmdb-ui/src/locales/lang/en-US.js
+++ b/cmdb-ui/src/locales/lang/en-US.js
@@ -74,6 +74,7 @@ export default {
    batchOperate: 'Batch operation',
    confirmBatchUpdate: 'Confirm batch modification?',
    batchUpdate: 'Batch update',
+    batchUpdateRelation: 'Create or update relation',
    batchUpdateSuccess: 'Batch update successfully',
    confirmDelete: 'Confirm deleting ?',
    attribute: 'Attributes',
--- a/cmdb-ui/src/locales/lang/zh-CN.js
+++ b/cmdb-ui/src/locales/lang/zh-CN.js
@@ -74,6 +74,7 @@ export default {
    batchOperate: '批量操作',
    confirmBatchUpdate: '确认要批量修改吗 ?',
    batchUpdate: '批量修改',
+    batchUpdateRelation: '创建|修改 关系',
    batchUpdateSuccess: '批量修改成功',
    confirmDelete: '真的要删除吗 ?',
    attribute: '属性',
--- a/cmdb-ui/src/views/cmdb/ci/index.vue
+++ b/cmdb-ui/src/views/cmdb/ci/index.vue
@@ -20,12 +20,20 @@
                @click="$refs.create.visible = true; $refs.create.action='update'"
              >
                <span @click="$refs.create.visible = true">
-                  <a-icon type="edit" />&nbsp;{{ $t('button.update') }}
+                  <a-icon type="edit" />{{ $t('button.update') }}
+                </span>
+              </a-menu-item>
+              <a-menu-item
+                key="batchUpdateRelation"
+                @click="$refs.batchUpdateRelation.visible = true"
+              >
+                <span @click="$refs.batchUpdateRelation.visible = true">
+                  <a-icon type="link" />{{ $t('ci.batchUpdateRelation') }}
                </span>
              </a-menu-item>
              <a-menu-item key="batchDownload" @click="batchDownload">
                <json-excel :fetch="batchDownload" name="cmdb.xls">
-                  <a-icon type="download" />&nbsp;{{ $t('button.download') }}
+                  <a-icon type="download" />&nbsp;&nbsp;&nbsp;&nbsp;{{ $t('button.download') }}
                </json-excel>
              </a-menu-item>
              <a-menu-item key="batchDelete" @click="batchDelete">
@@ -73,6 +81,7 @@
        </s-table>

        <create-instance-form @refresh="refreshTable" ref="create" @submit="batchUpdate" />
+        <batch-update-relation :typeId="typeId" ref="batchUpdateRelation" @submit="batchUpdateRelation" />
      </a-spin>
    </a-card>

@@ -130,9 +139,11 @@ import JsonExcel from 'vue-json-excel'

 import SearchForm from './modules/SearchForm'
 import CreateInstanceForm from './modules/CreateInstanceForm'
+import BatchUpdateRelation from './modules/BatchUpdateRelation'
 import EditableCell from './modules/EditableCell'
 import CiDetail from './modules/CiDetail'
 import { searchCI, updateCI, deleteCI } from '@/api/cmdb/ci'
+import { batchUpdateCIRelation } from '@/api/cmdb/CIRelation'
 import { getSubscribeAttributes, subscribeCIType } from '@/api/cmdb/preference'
 import { notification } from 'ant-design-vue'
 import { getCITypeAttributesByName } from '@/api/cmdb/CITypeAttr'
@@ -155,6 +166,7 @@ export default {
    JsonExcel,
    SearchForm,
    CreateInstanceForm,
+    BatchUpdateRelation,
    CiDetail
  },
  data () {
@@ -486,6 +498,38 @@ export default {
        }
      })
    },
+    batchUpdateRelation (values) {
+      const that = this
+      this.$confirm({
+        title: that.$t('tip.warning'),
+        content: that.$t('ci.confirmBatchUpdate'),
+        onOk () {
+          that.loading = true
+          that.loadTip = that.$t('ci.batchUpdate')
+          const payload = {}
+          Object.keys(values).forEach(key => {
+            if (values[key] || values[key] === 0) {
+              payload[key] = values[key]
+            }
+          })
+          batchUpdateCIRelation(that.selectedRowKeys, payload).then(() => {
+            that.loading = false
+              notification.success({
+                message: that.$t('ci.batchUpdateSuccess')
+              })
+              that.$refs.create.visible = false
+
+              that.$refs.table.clearSelected()
+          }).catch(e => {
+              console.log(e)
+              that.loading = false
+              notification.error({
+                message: e.response.data.message
+              })
+            })
+        }
+      })
+    },
    batchDelete () {
      const that = this
      this.$confirm({
--- a/cmdb-ui/src/views/cmdb/ci/modules/BatchUpdateRelation.vue
+++ b/cmdb-ui/src/views/cmdb/ci/modules/BatchUpdateRelation.vue
@@ -0,0 +1,80 @@
+<template>
+  <a-drawer
+    :title="$t('ci.batchUpdateRelation')"
+    width="50%"
+    @close="() => { visible = false; $emit('refresh', true) }"
+    :visible="visible"
+    :wrapStyle="{ overflow: 'auto' }"
+  >
+    <a-form :form="form" :layout="formLayout" @submit="commitUpdateRelation">
+      <a-button type="primary" @click="commitUpdateRelation">Submit</a-button>
+      <a-form-item
+        v-bind="formItemLayout"
+        :label="item.alias || item.name"
+        v-for="item in parentCITypes"
+        :key="item.id"
+      >
+        <template v-for="_item in item.attributes">
+          <a-input
+            v-decorator="[_item.name, {validateTrigger: ['submit'], rules: []}]"
+            style="width: 100%"
+            v-if="_item.id == item.unique_id"
+            :key="_item.id"
+            :placeholder="_item.alias || _item.name"
+          />
+        </template>
+      </a-form-item>
+    </a-form>
+  </a-drawer>
+</template>
+
+<script>
+import { getCITypeParent } from '@/api/cmdb/CITypeRelation'
+
+export default {
+  props: {
+    typeId: {
+      type: Number,
+      required: true
+    }
+  },
+  data () {
+    return {
+      action: '',
+      form: this.$form.createForm(this),
+      parentCITypes: [],
+      visible: false,
+
+      formItemLayout: {
+        labelCol: {
+          xs: { span: 24 },
+          sm: { span: 8 }
+        },
+        wrapperCol: {
+          xs: { span: 24 },
+          sm: { span: 16 }
+        }
+      },
+      formLayout: 'horizontal'
+    }
+  },
+  created () {
+    this.getParentCITypes()
+  },
+  methods: {
+    getParentCITypes () {
+      getCITypeParent(this.typeId).then(res => {
+        this.parentCITypes = res.parents
+      })
+    },
+    commitUpdateRelation (e) {
+      e.preventDefault()
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          this.$emit('submit', values)
+        }
+      })
+    }
+  }
+}
+</script>
--- a/cmdb-ui/yarn.lock
+++ b/cmdb-ui/yarn.lock
@@ -2017,10 +2017,10 @@ ansi-styles@^3.2.0, ansi-styles@^3.2.1:
  dependencies:
    color-convert "^1.9.0"

-ant-design-vue@1.5.0-beta.1:
-  version "1.5.0-beta.1"
-  resolved "https://registry.yarnpkg.com/ant-design-vue/-/ant-design-vue-1.5.0-beta.1.tgz#9396e1bb4435c9bc5dc224e2bd888a000144a8f9"
-  integrity sha512-Fv5vxO+qHakbjsswgZ70/bjiZK4FphdFxv31VjBJKfhA5Ud7K6sNqC0BVpYS8nL0BwxGCVG8I30efNdU3VifnA==
+ant-design-vue@1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/ant-design-vue/-/ant-design-vue-1.5.0.tgz#2e2c5658cf1211be06fbee95a18eee02965e089f"
+  integrity sha512-12+mTowYNZZhsXFR848BZRWGtZrWGayJx9j8Dv3gpgPBU4Abi86tz0hUSbnp8RXL6wb7xNcE9JoawNeE9Y83+Q==
  dependencies:
    "@ant-design/icons" "^2.1.1"
    "@ant-design/icons-vue" "^2.0.0"