7x31
/
cmdb
mirror of https://github.com/veops/cmdb.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Define display fields

This commit is contained in:
pycook 2020-02-08 17:36:54 +08:00
parent 87deba2e46
commit 780c51c364
1 changed files with 183 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

258
cmdb-ui/src/views/cmdb/ci/index.vue
View File

@ -1,78 +1,126 @@
<template> <template>
<a-card :bordered="false"> <div>
<a-spin :tip="loadTip" :spinning="loading"> <a-card :bordered="false">
<search-form ref="search" @refresh="refreshTable" :preferenceAttrList="preferenceAttrList" /> <a-spin :tip="loadTip" :spinning="loading">
<search-form ref="search" @refresh="refreshTable" :preferenceAttrList="preferenceAttrList" />
<ci-detail ref="detail" :typeId="typeId" /> <ci-detail ref="detail" :typeId="typeId" />
<div class="table-operator"> <div class="table-operator">
<a-button <a-button
type="primary" type="primary"
icon="plus" icon="plus"
@click="$refs.create.visible = true; $refs.create.action='create'" @click="$refs.create.visible = true; $refs.create.action='create'"
>新建</a-button> >新建</a-button>
<a-dropdown v-action:edit v-if="selectedRowKeys.length > 0"> <a-button class="right" @click="showDrawer(typeId)">显示字段</a-button>
<a-menu slot="overlay"> <a-dropdown v-action:edit v-if="selectedRowKeys.length > 0">
<a-menu-item <a-menu slot="overlay">
key="batchUpdate" <a-menu-item
@click="$refs.create.visible = true; $refs.create.action='update'" key="batchUpdate"
> @click="$refs.create.visible = true; $refs.create.action='update'"
<span @click="$refs.create.visible = true"> >
<a-icon type="edit" />&nbsp;修改 <span @click="$refs.create.visible = true">
</span> <a-icon type="edit" />&nbsp;修改
</a-menu-item> </span>
<a-menu-item key="batchDownload" @click="batchDownload"> </a-menu-item>
<json-excel :fetch="batchDownload" name="cmdb.xls"> <a-menu-item key="batchDownload" @click="batchDownload">
<a-icon type="download" />&nbsp;下载 <json-excel :fetch="batchDownload" name="cmdb.xls">
</json-excel> <a-icon type="download" />&nbsp;下载
</a-menu-item> </json-excel>
<a-menu-item key="batchDelete" @click="batchDelete"> </a-menu-item>
<a-icon type="delete" />删除 <a-menu-item key="batchDelete" @click="batchDelete">
</a-menu-item> <a-icon type="delete" />删除
</a-menu> </a-menu-item>
<a-button style="margin-left: 8px"> </a-menu>
批量操作 <a-button style="margin-left: 8px">
<a-icon type="down" /> 批量操作
</a-button> <a-icon type="down" />
</a-dropdown> </a-button>
</div> </a-dropdown>
<s-table </div>
bordered <s-table
ref="table" bordered
size="middle" ref="table"
rowKey="ci_id" size="middle"
:columns="columns" rowKey="ci_id"
:data="loadInstances" :columns="columns"
:alert="options.alert" :data="loadInstances"
:rowSelection="options.rowSelection" :alert="options.alert"
:scroll="{ x: scrollX, y: scrollY }" :rowSelection="options.rowSelection"
:pagination="{ showTotal: (total, range) => `${range[0]}-${range[1]} 共 ${total} 条记录`, pageSizeOptions: pageSizeOptions}" :scroll="{ x: scrollX, y: scrollY }"
showPagination="auto" :pagination="{ showTotal: (total, range) => `${range[0]}-${range[1]} 共 ${total} 条记录`, pageSizeOptions: pageSizeOptions}"
:pageSize="25" showPagination="auto"
> :pageSize="25"
<template :slot="col.dataIndex" slot-scope="text, record" v-for="col in columns"> >
<editable-cell <template :slot="col.dataIndex" slot-scope="text, record" v-for="col in columns">
:key="'edit_' + col.dataIndex" <editable-cell
:text="text" :key="'edit_' + col.dataIndex"
@change="onCellChange(record.key, col.dataIndex, $event, record[col.dataIndex])" :text="text"
/> @change="onCellChange(record.key, col.dataIndex, $event, record[col.dataIndex])"
</template> />
<span slot="action" slot-scope="text, record">
<template>
<a
@click="$refs.detail.visible = true; $refs.detail.ciId = record.key; $refs.detail.create()"
>详情</a>
<a-divider type="vertical" />
<a @click="deleteCI(record)">删除</a>
</template> </template>
</span>
</s-table>
<create-instance-form @refresh="refreshTable" ref="create" @submit="batchUpdate" /> <span slot="action" slot-scope="text, record">
</a-spin> <template>
</a-card> <a
@click="$refs.detail.visible = true; $refs.detail.ciId = record.key; $refs.detail.create()"
>详情</a>
<a-divider type="vertical" />
<a @click="deleteCI(record)">删除</a>
</template>
</span>
</s-table>
<create-instance-form @refresh="refreshTable" ref="create" @submit="batchUpdate" />
</a-spin>
</a-card>
<template>
<div>
<a-drawer
title="显示字段定义"
:width="600"
@close="onClose"
:visible="visible"
:wrapStyle="{height: 'calc(100% - 108px)', overflow: 'auto', paddingBottom: '108px'}"
>
<template>
<a-transfer
:dataSource="attrList"
:showSearch="true"
:listStyle="{
width: '230px',
height: '500px',
}"
:titles="['未选属性','已选属性']"
:render="item=>item.title"
:targetKeys="selectedAttrList"
@change="handleChange"
@search="handleSearch"
>
<span slot="notFoundContent">没数据</span>
</a-transfer>
</template>
<div
:style="{
position: 'absolute',
left: 0,
bottom: 0,
width: '100%',
borderTop: '1px solid #e9e9e9',
padding: '10px 16px',
background: '#fff',
textAlign: 'right',
}"
>
<a-button :style="{marginRight: '8px'}" @click="onClose">取消</a-button>
<a-button @click="subInstanceSubmit" type="primary">提交</a-button>
</div>
</a-drawer>
</div>
</template>
</div>
</template> </template>
<script> <script>
@ -85,8 +133,9 @@ import CreateInstanceForm from './modules/CreateInstanceForm'
import EditableCell from './modules/EditableCell' import EditableCell from './modules/EditableCell'
import CiDetail from './modules/CiDetail' import CiDetail from './modules/CiDetail'
import { searchCI, updateCI, deleteCI } from '@/api/cmdb/ci' import { searchCI, updateCI, deleteCI } from '@/api/cmdb/ci'
import { getSubscribeAttributes } from '@/api/cmdb/preference' import { getSubscribeAttributes, subscribeCIType } from '@/api/cmdb/preference'
import { notification } from 'ant-design-vue' import { notification } from 'ant-design-vue'
import { getCITypeAttributesByName } from '@/api/cmdb/CITypeAttr'
var valueTypeMap = { var valueTypeMap = {
'0': 'int', '0': 'int',
@ -123,6 +172,10 @@ export default {
preferenceAttrList: [], preferenceAttrList: [],
selectedAttrList: [],
attrList: [],
visible: false,
instanceList: [], instanceList: [],
// 表头 // 表头
columns: [], columns: [],
@ -202,6 +255,58 @@ export default {
}, },
inject: ['reload'], inject: ['reload'],
methods: { methods: {
showDrawer () {
this.getAttrList()
},
getAttrList () {
getCITypeAttributesByName(this.typeId).then(res => {
const attributes = res.attributes
getSubscribeAttributes(this.typeId).then(_res => {
const attrList = []
const selectedAttrList = []
const subAttributes = _res.attributes
this.instanceSubscribed = _res.is_subscribed
subAttributes.forEach(item => {
selectedAttrList.push(item.id.toString())
})
attributes.forEach(item => {
const data = {
key: item.id.toString(),
title: item.alias || item.name
}
attrList.push(data)
})
this.attrList = attrList
this.selectedAttrList = selectedAttrList
this.visible = true
})
})
},
onClose () {
this.visible = false
this.reload()
},
subInstanceSubmit () {
subscribeCIType(this.typeId, this.selectedAttrList)
.then(res => {
notification.success({
message: '修改成功'
})
this.reload()
})
.catch(e => {
notification.error({
message: e.response.data.message
})
})
},
handleChange (targetKeys, direction, moveKeys) {
this.selectedAttrList = targetKeys
},
handleSearch (dir, value) {},
setColumnWidth () { setColumnWidth () {
let rows = [] let rows = []
try { try {
@ -445,15 +550,18 @@ export default {
} }
</script> </script>
<style> <style lang='less' scoped>
.ant-table-thead > tr > th, /deep/ .ant-table-thead > tr > th,
.ant-table-tbody > tr > td { /deep/ .ant-table-tbody > tr > td {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
} }
.spin-content { /deep/ .spin-content {
border: 1px solid #91d5ff; border: 1px solid #91d5ff;
background-color: #e6f7ff; background-color: #e6f7ff;
padding: 30px; padding: 30px;
} }
.right {
float: right;
}
</style> </style>