Merge pull request #580 from veops/dev_ui_240716

feat: add history export

cmdb-ui/src/modules/cmdb/api/history.js

@@ -11,7 +11,8 @@ export function getCIHistoryTable(params) {
   return axios({
     url: `/v0.1/history/records/attribute`,
     method: 'GET',
-    params: params
+    params: params,
+    timeout: 30 * 1000
   })
 }
 
@@ -19,7 +20,8 @@ export function getRelationTable(params) {
   return axios({
     url: `/v0.1/history/records/relation`,
     method: 'GET',
-    params: params
+    params: params,
+    timeout: 30 * 1000
   })
 }
 
@@ -27,7 +29,8 @@ export function getCITypesTable(params) {
   return axios({
     url: `/v0.1/history/ci_types`,
     method: 'GET',
-    params: params
+    params: params,
+    timeout: 30 * 1000
   })
 }
 

cmdb-ui/src/modules/cmdb/views/ci/modules/ciDetailTab.vue

@@ -38,6 +38,9 @@
             <a-button type="primary" class="ops-button-ghost" ghost @click="handleRollbackCI()">
               <ops-icon type="shishizhuangtai" />{{ $t('cmdb.ci.rollback') }}
             </a-button>
+            <a-button type="primary" class="ops-button-ghost" ghost @click="handleExport">
+              <ops-icon type="veops-export" />{{ $t('export') }}
+            </a-button>
           </a-space>
           <ci-rollback-form ref="ciRollbackForm" :ciIds="[ciId]" @getCIHistory="getCIHistory" />
           <vxe-table
@@ -88,13 +91,13 @@
               :filters="[]"
               :filter-method="filterAttrMethod"
             ></vxe-table-column>
-            <vxe-table-column field="old" :title="$t('cmdb.history.old')">
+            <vxe-table-column :cell-type="'string'" field="old" :title="$t('cmdb.history.old')">
               <template #default="{ row }">
                 <span v-if="row.value_type === '6'">{{ JSON.parse(row.old) }}</span>
                 <span v-else>{{ row.old }}</span>
               </template>
             </vxe-table-column>
-            <vxe-table-column field="new" :title="$t('cmdb.history.new')">
+            <vxe-table-column :cell-type="'string'" field="new" :title="$t('cmdb.history.new')">
               <template #default="{ row }">
                 <span v-if="row.value_type === '6'">{{ JSON.parse(row.new) }}</span>
                 <span v-else>{{ row.new }}</span>
@@ -402,6 +405,17 @@ export default {
         this.$refs.ciRollbackForm.onOpen()
       })
     },
+    async handleExport() {
+      this.$refs.xTable.exportData({
+        filename: this.$t('cmdb.ci.history'),
+        sheetName: 'Sheet1',
+        type: 'xlsx',
+        types: ['xlsx', 'csv', 'html', 'xml', 'txt'],
+        data: this.ciHistory,
+        isMerge: true,
+        isColgroup: true,
+      })
+    }
   },
 }
 </script>

cmdb-ui/src/modules/cmdb/views/operation_history/modules/ciTable.vue

@@ -7,6 +7,7 @@
       @search="handleSearch"
       @searchFormReset="searchFormReset"
       @searchFormChange="searchFormChange"
+      @export="handleExport"
     ></search-form>
     <vxe-table
       ref="xTable"
@@ -86,13 +87,13 @@
         </template>
       </vxe-column>
       <vxe-column field="attr_alias" :title="$t('cmdb.history.attribute')"></vxe-column>
-      <vxe-column field="old" :title="$t('cmdb.history.old')"></vxe-column>
+      <vxe-column :cell-type="'string'" field="old" :title="$t('cmdb.history.old')"></vxe-column>
-      <vxe-column field="new" :title="$t('cmdb.history.new')"></vxe-column>
+      <vxe-column :cell-type="'string'" field="new" :title="$t('cmdb.history.new')"></vxe-column>
     </vxe-table>
     <pager
       :current-page.sync="queryParams.page"
       :page-size.sync="queryParams.page_size"
-      :page-sizes="[50, 100, 200]"
+      :page-sizes="[50, 100, 200, 500]"
       :total="total"
       :isLoading="loading"
       @change="onChange"
@@ -391,6 +392,37 @@ export default {
     filterOption(input, option) {
       return option.componentOptions.children[0].text.indexOf(input) >= 0
     },
+
+    async handleExport(params) {
+      const hide = this.$message.loading(this.$t('loading'), 0)
+      const res = await getCIHistoryTable({
+        ...params,
+        page: this.queryParams.page,
+        page_size: this.queryParams.page_size,
+      })
+      hide()
+      const data = []
+      res.records.forEach((item) => {
+        item[0].type_id = this.handleTypeId(item[0].type_id)
+        item[1].forEach((subItem) => {
+          subItem.operate_type = this.handleOperateType(subItem.operate_type)
+          subItem.new = subItem.new || ''
+          subItem.old = subItem.old || ''
+          const tempObj = Object.assign(subItem, item[0])
+          data.push(tempObj)
+        })
+      })
+
+      this.$refs.xTable.exportData({
+        filename: this.$t('cmdb.history.ciChange'),
+        sheetName: 'Sheet1',
+        type: 'xlsx',
+        types: ['xlsx', 'csv', 'html', 'xml', 'txt'],
+        isMerge: true,
+        isColgroup: true,
+        data,
+      })
+    }
   },
 }
 </script>

cmdb-ui/src/modules/cmdb/views/operation_history/modules/relation.vue

@@ -5,6 +5,7 @@
       @expandChange="handleExpandChange"
       @search="handleSearch"
       @searchFormReset="searchFormReset"
+      @export="handleExport"
     ></search-form>
     <vxe-table
       ref="xTable"
@@ -122,7 +123,7 @@
     <pager
       :current-page.sync="queryParams.page"
       :page-size.sync="queryParams.page_size"
-      :page-sizes="[50, 100, 200]"
+      :page-sizes="[50, 100, 200, 500]"
       :total="total"
       :isLoading="loading"
       @change="onChange"
@@ -379,6 +380,58 @@ export default {
     filterOption(input, option) {
       return option.componentOptions.children[0].text.indexOf(input) >= 0
     },
+
+    async handleExport(params) {
+      const hide = this.$message.loading(this.$t('loading'), 0)
+      const res = await getRelationTable({
+        ...params,
+        page: this.queryParams.page,
+        page_size: this.queryParams.page_size,
+      })
+      hide()
+      const data = []
+      res.records.forEach((item) => {
+        item[1].forEach((subItem) => {
+          subItem.operate_type = this.handleOperateType(subItem.operate_type)
+          subItem.relation_type_id = this.handleRelationType(subItem.relation_type_id)
+          subItem.first = res.cis[String(subItem.first_ci_id)]
+          subItem.second = res.cis[String(subItem.second_ci_id)]
+
+          const tempObj = Object.assign(subItem, item[0])
+
+          tempObj.changeDescription = this.getExportChangeDescription(tempObj)
+
+          data.push(tempObj)
+        })
+      })
+
+      this.$refs.xTable.exportData({
+        filename: this.$t('cmdb.history.relationChange'),
+        sheetName: 'Sheet1',
+        type: 'xlsx',
+        types: ['xlsx', 'csv', 'html', 'xml', 'txt'],
+        isMerge: true,
+        isColgroup: true,
+        data,
+      })
+    },
+
+    getExportChangeDescription(item) {
+      const first = item.first ? `${item.first.ci_type_alias}${item.first.unique_alias && item.first[item.first.unique] ? `（${item.first.unique_alias}：${item.first[item.first.unique]}）` : ''}` : ''
+      const second = item.second ? `${item.second.ci_type_alias}${item.second.unique_alias && item.second[item.second.unique] ? `（${item.second.unique_alias}：${item.second[item.second.unique]}）` : ''}` : ''
+      let center = ''
+      if (item.changeDescription === this.$t('cmdb.history.noUpdate')) {
+        center = item.relation_type_id
+      } else if (item.operate_type.includes(this.$t('update'))) {
+        center = item.changeArr.join(';')
+      } else if (item.operate_type.includes(this.$t('new'))) {
+        center = item.relation_type_id
+      } else if (item.operate_type.includes(this.$t('delete'))) {
+        center = item.relation_type_id
+      }
+
+      return `${first || ''} => ${center || ''} => ${second || ''}`
+    }
   },
 }
 </script>

cmdb-ui/src/modules/cmdb/views/operation_history/modules/searchForm.vue

@@ -27,7 +27,7 @@
               <a-select-option
                 :value="Object.values(choice)[0]"
                 v-for="(choice, index) in attr.choice_value"
-                :key="'Search_' + attr.name + index"
+                :key="'Search_' + attr.name + Object.values(choice)[0] + index"
               >
                 {{ Object.keys(choice)[0] }}
               </a-select-option>
@@ -42,7 +42,7 @@
                 hideDisabledOptions: true,
                 defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
               }"
-              v-else-if="valueTypeMap[attr.value_type] == 'date' || valueTypeMap[attr.value_type] == 'datetime'"
+              v-else-if="attr.value_type === '3'"
             />
             <a-input v-model="queryParams[attr.name]" style="width: 100%" allowClear v-else />
           </a-form-item>
@@ -85,7 +85,7 @@
                 @change="onChange"
                 format="YYYY-MM-DD HH:mm"
                 :placeholder="[$t('cmdb.history.startTime'), $t('cmdb.history.endTime')]"
-                v-else-if="valueTypeMap[item.value_type] == 'date' || valueTypeMap[item.value_type] == 'datetime'"
+                v-else-if="attr.value_type === '3'"
                 :show-time="{
                   hideDisabledOptions: true,
                   defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
@@ -101,6 +101,9 @@
           <a-button type="primary" html-type="submit" @click="handleSearch">
             {{ $t('query') }}
           </a-button>
+          <a-button :style="{ marginLeft: '8px' }" @click="handleExport">
+            {{ $t('export') }}
+          </a-button>
           <a-button :style="{ marginLeft: '8px' }" @click="handleReset">
             {{ $t('reset') }}
           </a-button>
@@ -155,6 +158,13 @@ export default {
       this.$emit('search', this.queryParams)
     },
 
+    handleExport() {
+      const queryParams = {
+        ...this.queryParams
+      }
+      this.$emit('export', queryParams)
+    },
+
     handleReset() {
       this.queryParams = {
         page: 1,

cmdb-ui/src/modules/cmdb/views/operation_history/modules/typeTable.vue

@@ -5,6 +5,7 @@
       @expandChange="handleExpandChange"
       @search="handleSearch"
       @searchFormReset="searchFormReset"
+      @export="handleExport"
     ></search-form>
     <vxe-table
       ref="xTable"
@@ -121,7 +122,7 @@ export default {
       relationTypeList: null,
       typeList: null,
       userList: [],
-      pageSizeOptions: ['50', '100', '200'],
+      pageSizeOptions: ['50', '100', '200', '500'],
       isExpand: false,
       current: 1,
       pageSize: 50,
@@ -508,6 +509,36 @@ export default {
     filterOption(input, option) {
       return option.componentOptions.children[0].text.indexOf(input) >= 0
     },
+
+    async handleExport(params) {
+      const hide = this.$message.loading(this.$t('loading'), 0)
+      const res = await getCITypesTable({
+        ...params,
+        page: this.queryParams.page,
+        page_size: this.queryParams.page_size,
+      })
+      hide()
+
+      res.result.forEach((item) => {
+        this.handleChangeDescription(item, item.operate_type)
+        item.operate_type = this.handleOperateType(item.operate_type)
+        item.type_id = this.handleTypeId(item.type_id)
+        item.uid = this.handleUID(item.uid)
+        if (item.operate_type.includes(this.$t('update'))) {
+          item.changeDescription = item.changeArr.join(';')
+        }
+      })
+
+      this.$refs.xTable.exportData({
+        filename: this.$t('cmdb.history.ciTypeChange'),
+        sheetName: 'Sheet1',
+        type: 'xlsx',
+        types: ['xlsx', 'csv', 'html', 'xml', 'txt'],
+        isMerge: true,
+        isColgroup: true,
+        data: res.result,
+      })
+    },
   },
 }
 </script>