#821 enhance table comp

WeBankPartners · Apr 21, 2020 · 92afa95 · 92afa95
1 parent 0ac791a
commit 92afa95
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 104 deletions.
diff --git a/cmdb-ui/src/const/actions.js b/cmdb-ui/src/const/actions.js
@@ -169,6 +169,16 @@ export const outerActions = [
   //   actionType: 'filterColumns'
   // }
 ]
+export const newExportOuterActions = [
+  {
+    label: window.vm ? pluginI18n('export') : Vue.t('export'),
+    props: {
+      type: 'primary',
+      icon: 'ios-download-outline'
+    },
+    actionType: 'export'
+  }
+]
 export const exportOuterActions = [
   {
     label: window.vm ? pluginI18n('export') : Vue.t('export'),

diff --git a/cmdb-ui/src/pages/components/cmdb-table/edit-modal.js b/cmdb-ui/src/pages/components/cmdb-table/edit-modal.js
@@ -76,7 +76,6 @@ export default {
           p_guid: '',
           state: '',
           fixed_date: '',
-          isRowEditable: true,
           forceEdit: true
         }
         columns.forEach(x => {
@@ -235,19 +234,21 @@ export default {
           </div>
         )}
         <div style="overflow: auto">
-          <div style={`width: ${this.tableWidth}px`}>
-            {this.columns.map(column => {
-              return (
-                <div
-                  style={`width:${WIDTH}px;display:inline-block;padding:5px;height: 30px;font-weight:600;background-color: #e8eaec`}
-                  key={column.ciTypeAttrId}
-                >
-                  {column.name}
-                </div>
-              )
-            })}
-          </div>
-          {this.renderDataRows()}
+          {this.modalVisible && (
+            <div style={`width: ${this.tableWidth}px`}>
+              {this.columns.map(column => {
+                return (
+                  <div
+                    style={`width:${WIDTH}px;display:inline-block;padding:5px;height: 30px;font-weight:600;background-color: #e8eaec`}
+                    key={column.ciTypeAttrId}
+                  >
+                    {column.name}
+                  </div>
+                )
+              })}
+            </div>
+          )}
+          {this.modalVisible && this.renderDataRows()}
         </div>
         <div style="margin-top:20px;height: 30px">
           <Button

diff --git a/cmdb-ui/src/pages/components/cmdb-table/index.js b/cmdb-ui/src/pages/components/cmdb-table/index.js
@@ -81,13 +81,11 @@ export default {
   methods: {
     pushNewAddedRowToSelections (data) {
       this.selectedRows.push(data)
-      // this.$emit('getSelectedRows', this.selectedRows, true)
     },
     formatTableData () {
       this.data = this.tableData.map((_, index) => {
         let result = {
           ..._,
-          weTableRowId: index + 1,
           isRowEditable: _.forceEdit ? _.isRowEditable : _.isRowEditable && index === 0 ? _.isRowEditable : false,
           weTableForm: { ..._ }
         }
@@ -456,14 +454,7 @@ export default {
             return (
               <div>
                 {this.tableInnerActions.map(_ => {
-                  if (
-                    _.visible
-                      ? _.visible.key === 'nextOperations'
-                        ? !!params.row[_.visible.key].find(op => op === _.actionType) &&
-                          _.visible.value === !params.row['isRowEditable']
-                        : _.visible.value === !!params.row[_.visible.key]
-                      : true
-                  ) {
+                  if (_.visible ? _.visible.value === !!params.row[_.visible.key] : true) {
                     return (
                       <Button
                         {...{ props: { ..._.props } }}

diff --git a/cmdb-ui/src/pages/designing/ci-data.vue b/cmdb-ui/src/pages/designing/ci-data.vue
@@ -76,7 +76,7 @@ import {
   operateCiState
 } from '@/api/server'
 import { setHeaders, baseURL } from '@/api/base.js'
-import { innerActions, pagination, components, exportOuterActions, newOuterActions } from '@/const/actions.js'
+import { pagination, components, newExportOuterActions, newOuterActions } from '@/const/actions.js'
 import { resetButtonDisabled } from '@/const/tableActionFun.js'
 import { formatData } from '../util/format.js'
 import { getExtraInnerActions } from '../util/state-operations.js'
@@ -444,13 +444,13 @@ export default {
           tableData: [],
           outerActions:
             this.$route.name === 'ciDataEnquiry'
-              ? JSON.parse(JSON.stringify(exportOuterActions))
+              ? JSON.parse(JSON.stringify(newExportOuterActions))
               : JSON.parse(JSON.stringify(newOuterActions)),
           innerActions:
             this.$route.name === 'ciDataEnquiry'
               ? null
               : deepClone(
-                innerActions.concat(await getExtraInnerActions()).concat([
+                [].concat(await getExtraInnerActions()).concat([
                   {
                     label: this.$t('compare'),
                     props: {
@@ -845,11 +845,19 @@ export default {
               ..._,
               tooltip: true,
               title: _.name,
-              renderHeader: (h, params) => (
-                <Tooltip content={_.description} placement="top">
-                  <span style="white-space:normal">{_.name}</span>
-                </Tooltip>
-              ),
+              renderHeader: (h, params) => {
+                const d = {
+                  props: {
+                    'min-width': '130px',
+                    'max-width': '500px'
+                  }
+                }
+                return (
+                  <Tooltip {...d} content={_.description} placement="top">
+                    <span style="white-space:normal">{_.name}</span>
+                  </Tooltip>
+                )
+              },
               key: renderKey,
               inputKey: _.propertyName,
               inputType: _.inputType,

diff --git a/cmdb-ui/src/pages/util/state-operations.js b/cmdb-ui/src/pages/util/state-operations.js
@@ -1,5 +1,10 @@
 import { getAllSystemEnumCodes } from '@/api/server.js'
-
+const types = {
+  confirm: 'info',
+  discard: 'warning',
+  startup: 'success',
+  stop: 'error'
+}
 export const getExtraInnerActions = async () => {
   const { data, statusCode } = await getAllSystemEnumCodes({
     filters: [
@@ -15,77 +20,18 @@ export const getExtraInnerActions = async () => {
     return data.contents
       .filter(_ => _.code !== 'insert' && _.code !== 'update' && _.code !== 'delete')
       .map(item => {
-        switch (item.code) {
-          case 'confirm':
-            return {
-              label: item.value,
-              props: {
-                type: 'info',
-                size: 'small'
-              },
-              isLoading: row => !!row.weTableForm.confirmLoading,
-              actionType: 'confirm',
-              visible: {
-                key: 'nextOperations',
-                value: true
-              }
-            }
-          case 'discard':
-            return {
-              label: item.value,
-              props: {
-                type: 'warning',
-                size: 'small'
-              },
-              isLoading: row => !!row.weTableForm.discardLoading,
-              actionType: 'discard',
-              visible: {
-                key: 'nextOperations',
-                value: true
-              }
-            }
-          case 'startup':
-            return {
-              label: item.value,
-              props: {
-                type: 'success',
-                size: 'small'
-              },
-              isLoading: row => !!row.weTableForm.startupLoading,
-              actionType: 'startup',
-              visible: {
-                key: 'nextOperations',
-                value: true
-              }
-            }
-          case 'stop':
-            return {
-              label: item.value,
-              props: {
-                type: 'error',
-                size: 'small'
-              },
-              isLoading: row => !!row.weTableForm.stopLoading,
-              actionType: 'stop',
-              visible: {
-                key: 'nextOperations',
-                value: true
-              }
-            }
-          default:
-            return {
-              label: item.value,
-              props: {
-                type: 'info',
-                size: 'small'
-              },
-              isLoading: row => !!row.weTableForm[`${item.code}Loading`],
-              actionType: item.code,
-              visible: {
-                key: 'nextOperations',
-                value: true
-              }
-            }
+        return {
+          label: item.value,
+          props: {
+            type: types[item.code] || 'info',
+            size: 'small'
+          },
+          isLoading: row => !!row.weTableForm.confirmLoading,
+          actionType: item.code,
+          visible: {
+            key: 'nextOperations',
+            value: true
+          }
         }
       })
   } else {