Merge remote-tracking branch 'origin/master'

src/i18n/langs/cn.json

@@ -395,7 +395,7 @@
     "options": "选项",
     "taskName": "任务名称",
     "dateStart": "开始日期",
-    "versionDetail": ""
+    "versionDetail": "版本详情"
   },
   "perms": {
     "assetPermissions": "资产授权",
@@ -751,6 +751,30 @@
     "GatherUserTaskList": "任务列表",
     "GatherUserTaskCreate": "创建任务",
     "Timer": "定时执行",
-    "GatherUserTaskUpdate": "更新任务"
+    "GatherUserTaskUpdate": "更新任务",
+    "OrganizationList": "组织管理",
+    "OrganizationCreate": "创建组织",
+    "OrganizationUpdate": "更新组织",
+    "OrganizationDetail": "组织详情",
+    "Admin": "管理员",
+    "Auditor": "审计员",
+    "User": "用户",
+    "UserGroup": "用户组",
+    "Asset": "资产",
+    "Domain": "网域",
+    "AdminUser": "管理用户",
+    "SystemUser": "系统用户",
+    "Label": "标签",
+    "License": "许可证",
+    "NoLicense": "暂无许可证",
+    "SubscriptionID": "订阅授权ID",
+    "Corporation": "公司",
+    "Expired": "过期时间",
+    "AssetCount": "资产数量",
+    "Edition": "版本",
+    "LicenseDetail": "许可证详情",
+    "ImportLicense": "导入许可证",
+    "LicenseFile": "许可证文件",
+    "ImportLicenseTip": "请导入许可证"
   }
 }

src/utils/common.js

@@ -79,6 +79,10 @@ export function toSafeLocalDateStr(d) {
 
 export function getApiPath(that) {
   const pagePath = that.$route.path
+  const isOrgPath = pagePath.split('/').indexOf('orgs') !== -1
+  if (isOrgPath) {
+    return `/api/v1/orgs/orgs/${pagePath.split('/').pop()}/`
+  }
   return `/api/v1${pagePath}/`
 }
 

src/views/xpack/License.vue

@@ -1,10 +1,186 @@
 <template>
-  <h1>hello</h1>
+  <div>
+    <GenericDetailPage :object.sync="licenseData" v-bind="config">
+      <div>
+        <el-alert v-if="!isValidateLicense" type="success">
+          {{ this.$t('xpack.ImportLicenseTip') }}
+        </el-alert>
+        <el-row :gutter="20">
+          <el-col :span="14">
+            <DetailCard :title="cardTitle" :items="detailItems" />
+          </el-col>
+          <el-col :span="10">
+            <el-card class="box-card primary">
+              <div slot="header" class="clearfix">
+                <i class="fa fa-info" />
+                <span>{{ cardActions }}</span>
+              </div>
+              <el-table class="el-table" :data="cardActionData" :show-header="false">
+                <el-table-column prop="name" />
+                <el-table-column prop="button" align="right">
+                  <template slot-scope="scope">
+                    <el-button
+                      type="primary"
+                      size="mini"
+                      @click="handleButtonAction(scope.$index, scope.row)"
+                    >
+                      {{ scope.row.button }}
+                    </el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-card>
+          </el-col>
+        </el-row>
+      </div>
+    </GenericDetailPage>
+    <el-dialog :visible.sync="dialogLicenseImport" center>
+      <div slot="title">
+        <h4>{{ this.$t('xpack.ImportLicense') }}</h4>
+      </div>
+      {{ this.$t('xpack.LicenseFile') }}
+      <br>
+      <input type="file" @change="fileChange">
+      <div slot="footer">
+        <el-button @click="dialogLicenseImport = false">{{ $t('common.Cancel') }}</el-button>
+        <el-button type="primary" @click="importLicense">{{ $t('common.Confirm') }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
+import { GenericDetailPage } from '@/layout/components'
+import DetailCard from '@/components/DetailCard/index'
+import { importLicense } from '@/views/xpack/api'
+import { mapGetters } from 'vuex'
+
 export default {
-  name: 'License'
+  name: 'License',
+  components: {
+    GenericDetailPage,
+    DetailCard
+  },
+  data() {
+    return {
+      dialogLicenseImport: false,
+      licenseData: {},
+      licenseFile: {},
+      config: {
+        activeMenu: 'detail',
+        submenu: [
+          {
+            title: this.$t('xpack.LicenseDetail'),
+            name: 'detail'
+          }
+        ],
+        hasRightSide: false,
+        title: this.$t('xpack.LicenseDetail'),
+        actions: {
+          detailApiUrl: '/api/v1/xpack/license/detail'
+        }
+      }
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'publicSettings'
+    ]),
+    isValidateLicense() {
+      return this.publicSettings.XPACK_LICENSE_IS_VALID
+    },
+    cardTitle() {
+      return ''
+    },
+    cardActions() {
+      return this.$t('sessions.quickModify')
+    },
+    cardActionData() {
+      return [
+        {
+          name: '导入许可证',
+          button: '导入',
+          value: 'import'
+        },
+        {
+          name: '技术咨询',
+          button: '咨询',
+          value: 'consult'
+        }
+      ]
+    },
+    detailItems() {
+      if (!this.publicSettings.XPACK_LICENSE_IS_VALID) {
+        return [
+          {
+            key: this.$t('xpack.License'),
+            value: this.$t('xpack.NoLicense')
+          }
+        ]
+      }
+      return [
+        {
+          key: this.$t('xpack.SubscriptionID'),
+          value: this.licenseData.subscription_id
+        },
+        {
+          key: this.$t('xpack.Corporation'),
+          value: this.licenseData.corporation
+        },
+        {
+          key: this.$t('xpack.Expired'),
+          value: this.licenseData.expired
+        },
+        {
+          key: this.$t('xpack.AssetCount'),
+          value: this.licenseData.asset_count !== null ? this.licenseData.asset_count + '' : ''
+        },
+        {
+          key: this.$t('xpack.Edition'),
+          value: this.licenseData.edition
+        }
+      ]
+    }
+  },
+  methods: {
+    handleButtonAction: function(index, row) {
+      switch (row.value) {
+        case 'import':
+          this.importAction()
+          break
+        case 'consult':
+          this.consultAction()
+          break
+        default:
+          console.log('No Match button action: ' + row.value)
+      }
+    },
+    importAction: function() {
+      this.dialogLicenseImport = true
+    },
+    consultAction: function() {
+      const url = 'https://jinshuju.net/f/sQ91MK'
+      window.open(url)
+    },
+    importLicense() {
+      if (this.licenseFile['file'] === undefined) {
+        return
+      }
+      const formData = new FormData()
+      formData.append('file', this.licenseFile['file'])
+      importLicense(formData).then(res => {
+        if (res.status) {
+          this.$message.success(res.msg)
+          setTimeout(() => location.reload(), 500)
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    fileChange(e) {
+      this.licenseFile['file'] = e.target.files[0]
+    }
+  }
 }
 </script>
 

src/views/xpack/Organization.vue

@@ -1,13 +0,0 @@
-<template>
-  <h1>hello</h1>
-</template>
-
-<script>
-export default {
-  name: 'Organization'
-}
-</script>
-
-<style scoped>
-
-</style>

src/views/xpack/api.js

@@ -23,3 +23,14 @@ export function restoreInterface() {
     method: 'get'
   })
 }
+
+export function importLicense(formData) {
+  return request({
+    url: '/api/v1/xpack/license/import',
+    method: 'post',
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    },
+    data: formData
+  })
+}

src/views/xpack/org/OrgFieldsFormatter.vue

@@ -0,0 +1,38 @@
+<template>
+  <el-popover
+    placement="bottom"
+    trigger="click"
+  >
+    <span v-for="item in getCellValue" :key="item">{{ item }} <br></span>
+    <el-button slot="reference" type="text">{{ getCellValueLength }}</el-button>
+  </el-popover>
+</template>
+
+<script>
+import BaseFormatter from '@/components/ListTable/formatters/base'
+export default {
+  name: 'LengthFormatter',
+  extends: BaseFormatter,
+  data() {
+    return {
+      visible: false,
+      dataContent: this.cellValue
+    }
+  },
+  computed: {
+    getCellValueLength() {
+      if (this.cellValue instanceof Array) {
+        return this.cellValue.length
+      }
+      return this.cellValue
+    },
+    getCellValue() {
+      return this.cellValue
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/xpack/org/OrganizationCreateUpdate.vue

@@ -0,0 +1,80 @@
+<template>
+  <GenericCreateUpdatePage v-bind="config" />
+</template>
+
+<script>
+import { GenericCreateUpdatePage } from '@/layout/components'
+
+export default {
+  components: {
+    GenericCreateUpdatePage
+  },
+  data() {
+    return {
+      config: {
+        initial: {
+        },
+        url: '/api/v1/orgs/orgs/',
+        fields: ['name', 'admins', 'auditors', 'users', 'comment'],
+        fieldsMeta: {
+          admins: {
+            label: '管理员',
+            el: {
+              value: [],
+              ajax: {
+                url: '/api/v1/users/users/',
+                processResults(data) {
+                  let results = data.results
+                  results = results.map((item) => {
+                    return { label: item.name + '(' + item.username + ')', value: item.id }
+                  })
+                  const more = !!data.next
+                  return { results: results, pagination: more, total: data.count }
+                }
+              }
+            }
+          },
+          auditors: {
+            label: '审计员',
+            el: {
+              value: [],
+              ajax: {
+                url: '/api/v1/users/users/',
+                processResults(data) {
+                  let results = data.results
+                  results = results.map((item) => {
+                    return { label: item.name + '(' + item.username + ')', value: item.id }
+                  })
+                  const more = !!data.next
+                  return { results: results, pagination: more, total: data.count }
+                }
+              }
+            }
+          },
+          users: {
+            label: '用户',
+            el: {
+              value: [],
+              ajax: {
+                url: '/api/v1/users/users/',
+                processResults(data) {
+                  let results = data.results
+                  results = results.map((item) => {
+                    return { label: item.name + '(' + item.username + ')', value: item.id }
+                  })
+                  const more = !!data.next
+                  return { results: results, pagination: more, total: data.count }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/xpack/org/OrganizationDetail/OrganizationDetail.vue

@@ -0,0 +1,124 @@
+<template>
+  <el-row :gutter="20">
+    <el-col :md="14" :sm="24">
+      <DetailCard :title="cardTitle" :items="detailCardItems" />
+    </el-col>
+    <el-col :md="10" :sm="24">
+      <RelationCard type="primary" v-bind="adminReletionConfig" />
+      <RelationCard type="info" style="margin-top: 15px" v-bind="userReletionConfig" />
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import { DetailCard, RelationCard } from '@/components'
+
+export default {
+  name: 'OrganizationDetail',
+  components: {
+    DetailCard,
+    RelationCard
+  },
+  props: {
+    object: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      userReletionConfig: {
+        icon: 'fa-user',
+        title: this.$t('xpack.User'),
+        objectsAjax: {
+          url: '/api/v1/users/users/?fields_size=mini&order=name',
+          processResults(data) {
+            let results = data.results
+            results = results.map((item) => {
+              return { label: item.name + '(' + item.username + ')', value: item.id }
+            })
+            const more = !!data.next
+            return { results: results, pagination: more, total: data.count }
+          }
+        },
+        hasObjectsId: this.object.users,
+        performAdd: (items) => {
+          const objectId = this.object.id
+          const relationUrl = `/api/v1/orgs/orgs/${objectId}/`
+          const usersId = items.map(v => v.value)
+          const data = { users: usersId }
+          return this.$axios.patch(relationUrl, data)
+        },
+        performDelete: (item) => {
+          const objectId = this.object.id
+          const relationUrl = `/api/v1/orgs/orgs/${objectId}/`
+          const objectOldRelationUsers = this.object.users
+          const objectNewRelationUsers = objectOldRelationUsers.filter(v => v !== item.value)
+          const data = { users: objectNewRelationUsers }
+          return this.$axios.patch(relationUrl, data)
+        }
+      },
+      adminReletionConfig: {
+        icon: 'fa-user',
+        title: this.$t('xpack.Admin'),
+        objectsAjax: {
+          url: '/api/v1/users/users/?fields_size=mini&order=name',
+          processResults(data) {
+            let results = data.results
+            results = results.map((item) => {
+              return { label: item.name + '(' + item.username + ')', value: item.id }
+            })
+            const more = !!data.next
+            return { results: results, pagination: more, total: data.count }
+          }
+        },
+        hasObjectsId: this.object.admin_users,
+        performAdd: (items) => {
+          const objectId = this.object.id
+          const relationUrl = `/api/v1/orgs/orgs/${objectId}/`
+          const adminUsersId = items.map(v => v.value)
+          const data = { admin_users: adminUsersId }
+          return this.$axios.patch(relationUrl, data)
+        },
+        performDelete: (item) => {
+          const objectId = this.object.id
+          const relationUrl = `/api/v1/orgs/orgs/${objectId}/`
+          const objectOldRelationAdminUsers = this.object.admin_users
+          const objectNewRelationAdminUsers = objectOldRelationAdminUsers.filter(v => v !== item.value)
+          const data = { system_users: objectNewRelationAdminUsers }
+          return this.$axios.patch(relationUrl, data)
+        }
+      }
+    }
+  },
+  computed: {
+    cardTitle() {
+      return this.object.name
+    },
+    detailCardItems() {
+      return [
+        {
+          key: this.$t('common.name'),
+          value: this.object.name
+        },
+        {
+          key: this.$t('common.createBy'),
+          value: this.object.created_by
+        },
+        {
+          key: this.$t('common.dateCreated'),
+          value: this.object.date_created
+        },
+        {
+          key: this.$t('common.Comment'),
+          value: this.object.comment
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/xpack/org/OrganizationDetail/index.vue

@@ -0,0 +1,38 @@
+<template>
+  <GenericDetailPage :object.sync="Organization" :active-menu.sync="config.activeMenu" v-bind="config" v-on="$listeners">
+    <keep-alive>
+      <component :is="config.activeMenu" :object="Organization" />
+    </keep-alive>
+  </GenericDetailPage>
+</template>
+
+<script>
+import { GenericDetailPage, TabPage } from '@/layout/components'
+import OrganizationDetail from './OrganizationDetail'
+
+export default {
+  components: {
+    GenericDetailPage,
+    OrganizationDetail,
+    TabPage
+  },
+  data() {
+    return {
+      Organization: {},
+      config: {
+        activeMenu: 'OrganizationDetail',
+        submenu: [
+          {
+            title: this.$t('xpack.OrganizationDetail'),
+            name: 'OrganizationDetail'
+          }
+        ]
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/xpack/org/OrganizationList.vue

@@ -0,0 +1,78 @@
+<template>
+  <GenericListPage :table-config="tableConfig" :header-actions="headerActions" />
+</template>
+
+<script>
+import { GenericListPage } from '@/layout/components'
+import OrgFieldsFormatter from './OrgFieldsFormatter'
+
+export default {
+  components: {
+    GenericListPage
+  },
+  data() {
+    return {
+      tableConfig: {
+        url: '/api/v1/orgs/orgs/',
+        columns: [
+          'name', 'admins', 'auditors', 'users', 'user_groups', 'assets', 'domains',
+          'admin_users', 'system_users', 'labels', 'perms', 'comment', 'actions'
+        ],
+        columnsMeta: {
+          admins: {
+            label: this.$t('xpack.Admin'),
+            formatter: OrgFieldsFormatter
+          },
+          auditors: {
+            label: this.$t('xpack.Auditor'),
+            formatter: OrgFieldsFormatter
+          },
+          users: {
+            label: this.$t('xpack.User'),
+            formatter: OrgFieldsFormatter
+          },
+          user_groups: {
+            label: this.$t('xpack.UserGroup'),
+            formatter: OrgFieldsFormatter
+          },
+          assets: {
+            label: this.$t('xpack.Asset'),
+            formatter: OrgFieldsFormatter
+          },
+          domains: {
+            label: this.$t('xpack.Domain'),
+            formatter: OrgFieldsFormatter
+          },
+          admin_users: {
+            label: this.$t('xpack.AdminUser'),
+            formatter: OrgFieldsFormatter
+          },
+          system_users: {
+            label: this.$t('xpack.SystemUser'),
+            formatter: OrgFieldsFormatter
+          },
+          labels: {
+            label: this.$t('xpack.Admin'),
+            formatter: OrgFieldsFormatter
+          },
+          perms: {
+            label: this.$t('xpack.Label'),
+            formatter: OrgFieldsFormatter
+          }
+        },
+        detailRoute: 'OrganizationDetail'
+      },
+      headerActions: {
+        hasExport: false,
+        hasImport: false,
+        hasRefresh: false,
+        hasBulkDelete: false
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/xpack/router.js

@@ -18,7 +18,7 @@ export default {
       path: 'license',
       component: () => import('@/views/xpack/License.vue'),
       name: 'License',
-      meta: { title: 'License' }
+      meta: { title: i18n.t('xpack.License') }
     },
     {
       path: 'gathered-users',
@@ -46,6 +46,33 @@ export default {
       name: 'GatherUserTaskUpdate',
       meta: { title: i18n.t('xpack.GatherUserTaskUpdate'), action: 'update' },
       hidden: true
+    },
+    {
+      path: 'orgs',
+      component: () => import('@/views/xpack/org/OrganizationList'),
+      name: 'OrganizationList',
+      meta: { title: i18n.t('xpack.OrganizationList') }
+    },
+    {
+      path: 'orgs/create',
+      component: () => import('@/views/xpack/org/OrganizationCreateUpdate'),
+      name: 'OrganizationCreate',
+      hidden: true,
+      meta: { title: i18n.t('xpack.OrganizationCreate'), activeMenu: '/xpack/orgs', action: 'create' }
+    },
+    {
+      path: 'orgs/:id/update',
+      component: () => import('@/views/xpack/org/OrganizationCreateUpdate'),
+      name: 'OrganizationUpdate',
+      hidden: true,
+      meta: { title: i18n.t('xpack.OrganizationUpdate'), activeMenu: '/xpack/orgs', action: 'update' }
+    },
+    {
+      path: 'orgs/:id',
+      component: () => import('@/views/xpack/org/OrganizationDetail/index'),
+      name: 'OrganizationDetail',
+      hidden: true,
+      meta: { title: i18n.t('xpack.OrganizationDetail'), activeMenu: '/xpack/orgs' }
     }
   ]
 }