[Update] 添加改密计划详情页面-资产或节点页面（1）

src/i18n/langs/cn.json

@@ -645,7 +645,9 @@
       "DateJoined": "创建日期",
       "DateUpdated": "更新日期",
       "ManualRunPlan": "手动执行计划",
-      "Run": "执行"
+      "Run": "执行",
+      "addAsset": "添加资产",
+      "addNode": "添加节点"
     },
     "Corporation": "公司",
     "Edition": "版本",

src/views/xpack/ChangeAuthPlan/ChangeAuthPlanDetail/ChangeAuthPlanAsset.vue

@@ -1,13 +0,0 @@
-<template>
-  <div>asset or node</div>
-</template>
-
-<script>
-export default {
-  name: 'ChangeAuthPlanAsset'
-}
-</script>
-
-<style scoped>
-
-</style>

src/views/xpack/ChangeAuthPlan/ChangeAuthPlanDetail/ChangeAuthPlanAsset/AssetRelationCard.vue

@@ -0,0 +1,90 @@
+<template>
+  <IBox :fa="icon" :type="type" :title="title" v-bind="$attrs">
+    <table style="width: 100%">
+      <tr>
+        <td colspan="2">
+          <AssetSelect ref="assetSelect" @getAsset="getAsset" />
+        </td>
+      </tr>
+      <tr>
+        <td colspan="2">
+          <el-button :type="type" size="small" @click="addObjects">{{ $t('common.Add') }}</el-button>
+        </td>
+      </tr>
+    </table>
+  </IBox>
+</template>
+
+<script>
+import IBox from '@/components/IBox/index'
+import AssetSelect from '@/components/AssetSelect/index'
+export default {
+  name: 'AssetRelationCard',
+  components: {
+    IBox,
+    AssetSelect
+  },
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    icon: {
+      type: String,
+      default: ''
+    },
+    type: {
+      type: String,
+      default: 'primary'
+    },
+    value: {
+      type: [Array, Number, String],
+      default: () => []
+    },
+    performAdd: {
+      type: Function,
+      default: (objects, that) => {}
+    },
+    onAddSuccess: {
+      type: Function,
+      default(that) {
+        this.$log.debug('AssetSelect value', that.assets)
+        this.$message.success(this.$t('common.updateSuccessMsg'))
+        setTimeout(() => location.reload(), 500)
+      }
+    }
+  },
+  data() {
+    return {
+      assets: []
+    }
+  },
+  methods: {
+    addObjects() {
+      this.performAdd(this.assets, this).then(
+        () => this.onAddSuccess(this)
+      )
+    },
+    getAsset(assets) {
+      this.assets = assets
+    }
+  }
+}
+</script>
+
+<style scoped>
+  b, strong {
+    font-weight: 700;
+    font-size: 13px;
+  }
+
+  tr td {
+    line-height: 1.42857;
+    padding: 8px;
+    vertical-align: top;
+  }
+
+  tr.item td {
+    border-top: 1px solid #e7eaec;
+  }
+</style>

src/views/xpack/ChangeAuthPlan/ChangeAuthPlanDetail/ChangeAuthPlanAsset/index.vue

@@ -0,0 +1,121 @@
+<template>
+  <el-row :gutter="20">
+    <el-col :md="14" :sm="24">
+      <ListTable ref="listTable" :table-config="tableConfig" :header-actions="headerActions" />
+    </el-col>
+    <el-col :md="10" :sm="24">
+      <AssetRelationCard type="primary" v-bind="assetRelationConfig" />
+      <RelationCard type="info" style="margin-top: 15px" v-bind="nodeRelationConfig" />
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import ListTable from '@/components/ListTable/index'
+import RelationCard from '@/components/RelationCard/index'
+import AssetRelationCard from './AssetRelationCard'
+
+export default {
+  name: 'ChangeAuthPlanAsset',
+  components: {
+    ListTable, RelationCard, AssetRelationCard
+  },
+  props: {
+    object: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      tableConfig: {
+        url: `/api/v1/xpack/change-auth-plan/plan/${this.object.id}/assets/`,
+        columns: [
+          'hostname', 'ip'
+        ],
+        tableAttrs: {
+          border: false
+        }
+      },
+      headerActions: {
+        hasExport: false,
+        hasImport: false,
+        hasRefresh: false,
+        hasCreate: false,
+        hasBulkDelete: false,
+        hasBulkUpdate: false,
+        hasLeftActions: false,
+        hasSearch: false,
+        hasRightActions: false
+      },
+      assetRelationConfig: {
+        icon: 'fa-edit',
+        title: this.$t('xpack.ChangeAuthPlan.addAsset'),
+        performAdd: (items, vm) => {
+          const relationUrl = `/api/v1/xpack/change-auth-plan/plan/${this.object.id}/asset/add/`
+          const data = {
+            assets: items
+          }
+          return this.$axios.patch(relationUrl, data)
+        }
+      },
+      nodeRelationConfig: {
+        icon: 'fa-edit',
+        title: this.$t('xpack.ChangeAuthPlan.addNode'),
+        objectsAjax: {
+          url: `/api/v1/assets/nodes/`,
+          processResults(data) {
+            let results = data.results
+            results = results.map((item) => {
+              return { label: item.full_value, value: item.id }
+            })
+            const more = !!data.next
+            return { results: results, pagination: more, total: data.count }
+          }
+        },
+        hasObjectsId: this.object.nodes,
+        performAdd: (items) => {
+          const relationUrl = `/api/v1/xpack/change-auth-plan/plan/${this.object.id}/`
+          const nodes = items.map(v => v.value)
+          const data = {
+            nodes: Array.from(new Set([...this.object.nodes, ...nodes]))
+          }
+          return this.$axios.patch(relationUrl, data)
+        },
+        onAddSuccess: (objects, that) => {
+          this.$log.debug('Select value', that.select2.value)
+          that.iHasObjects = [...that.iHasObjects, ...objects]
+          that.$refs.select2.clearSelected()
+          this.$message.success(this.$t('common.updateSuccessMsg'))
+          setTimeout(() => location.reload(), 500)
+        },
+        performDelete: (item) => {
+          const nodes = this.object.nodes
+          const deleteNode = item.value
+          nodes.splice(nodes.indexOf(deleteNode), 1)
+          const data = {
+            nodes: nodes
+          }
+          const relationUrl = `/api/v1/xpack/change-auth-plan/plan/${this.object.id}/`
+          return this.$axios.patch(relationUrl, data)
+        },
+        onDeleteSuccess: (obj, that) => {
+          const theRemoveIndex = that.iHasObjects.findIndex((v) => v.value === obj.value)
+          that.iHasObjects.splice(theRemoveIndex, 1)
+          while (that.select2.disabledValues.indexOf(obj.value) !== -1) {
+            const i = that.select2.disabledValues.indexOf(obj.value)
+            this.$log.debug('disabled values remove index: ', i)
+            that.select2.disabledValues.splice(i, 1)
+          }
+          this.$message.success(this.$t('common.deleteSuccessMsg'))
+          setTimeout(() => location.reload(), 500)
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/xpack/ChangeAuthPlan/ChangeAuthPlanDetail/index.vue

@@ -9,7 +9,7 @@
 <script>
 import { GenericDetailPage } from '@/layout/components'
 import ChangeAuthPlanInfo from './ChangeAuthPlanInfo'
-import ChangeAuthPlanAsset from './ChangeAuthPlanAsset'
+import ChangeAuthPlanAsset from './ChangeAuthPlanAsset/index'
 import ChangeAuthPlanExecutionList from './ChangeAuthPlanExecution/ChangeAuthPlanExecutionList'
 
 export default {