mirror of https://github.com/veops/cmdb.git
属性库
This commit is contained in:
wang-liang0615
parent
2471af867a
commit
348a34d862
|
|
@ -1,213 +1,212 @@
|
||||||
<template>
|
<template>
|
||||||
<a-modal wrapClassName="attrbute-store-wrapper" width="80%" :visible="visible" @cancel="handleCancel">
|
<a-modal wrapClassName="attrbute-store-wrapper" width="80%" :visible="visible" @cancel="handleCancel">
|
||||||
<template slot="title">
|
<template slot="title">
|
||||||
<div class="attrbute-store-header">
|
<div class="attrbute-store-header">
|
||||||
<span>属性库</span>
|
<span>属性库</span>
|
||||||
<div class="attrbute-store-search">
|
<div class="attrbute-store-search">
|
||||||
<a-input-group compact>
|
<a-input-group compact>
|
||||||
<a-select class="attrbute-store-search-select" v-model="searchKey">
|
<a-select class="attrbute-store-search-select" v-model="searchKey">
|
||||||
<a-select-option value="alias">
|
<a-select-option value="alias">
|
||||||
别名
|
别名
|
||||||
</a-select-option>
|
</a-select-option>
|
||||||
<a-select-option value="name">
|
<a-select-option value="name">
|
||||||
名称
|
名称
|
||||||
</a-select-option>
|
</a-select-option>
|
||||||
</a-select>
|
</a-select>
|
||||||
<a-input
|
<a-input
|
||||||
ref="input"
|
ref="input"
|
||||||
slot="default"
|
slot="default"
|
||||||
class="attrbute-store-search-input"
|
class="attrbute-store-search-input"
|
||||||
v-model="searchValue"
|
v-model="searchValue"
|
||||||
@pressEnter="pressEnter"
|
@pressEnter="pressEnter"
|
||||||
allowClear
|
allowClear
|
||||||
@change="handleInput"
|
@change="handleInput"
|
||||||
>
|
>
|
||||||
<a-icon slot="suffix" type="search" @click="pressEnter" :style="{ cursor: 'pointer' }" />
|
<a-icon slot="suffix" type="search" @click="pressEnter" :style="{ cursor: 'pointer' }" />
|
||||||
</a-input>
|
</a-input>
|
||||||
</a-input-group>
|
</a-input-group>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</div>
|
||||||
<a-spin :spinning="loading" :style="{ height: '100%' }">
|
</template>
|
||||||
<a-row v-if="attrList.length">
|
<a-spin :spinning="loading" :style="{ height: '100%' }">
|
||||||
<a-col
|
<a-row v-if="attrList.length">
|
||||||
class="attrbute-store-col"
|
<a-col
|
||||||
:xxl="4"
|
class="attrbute-store-col"
|
||||||
:xl="6"
|
:xxl="4"
|
||||||
:lg="8"
|
:xl="6"
|
||||||
:md="12"
|
:lg="8"
|
||||||
:sm="24"
|
:md="12"
|
||||||
v-for="item in attrList"
|
:sm="24"
|
||||||
:key="item.id"
|
v-for="item in attrList"
|
||||||
>
|
:key="item.id"
|
||||||
<AttributeCard
|
>
|
||||||
@ok="
|
<AttributeCard
|
||||||
() => {
|
@ok="
|
||||||
searchAttributes()
|
() => {
|
||||||
}
|
searchAttributes()
|
||||||
"
|
}
|
||||||
:isStore="true"
|
"
|
||||||
:property="item"
|
:isStore="true"
|
||||||
/>
|
:property="item"
|
||||||
</a-col>
|
/>
|
||||||
</a-row>
|
</a-col>
|
||||||
<a-empty v-else>
|
</a-row>
|
||||||
<img slot="image" :src="require('@/assets/data_empty.png')" />
|
<a-empty v-else>
|
||||||
<span slot="description"> 暂无数据 </span>
|
<img slot="image" :src="require('@/assets/data_empty.png')" />
|
||||||
</a-empty>
|
<span slot="description"> 暂无数据 </span>
|
||||||
</a-spin>
|
</a-empty>
|
||||||
<template slot="footer">
|
</a-spin>
|
||||||
<a-pagination
|
<template slot="footer">
|
||||||
size="small"
|
<a-pagination
|
||||||
show-size-changer
|
size="small"
|
||||||
show-quick-jumper
|
show-size-changer
|
||||||
:current="tablePage.currentPage"
|
show-quick-jumper
|
||||||
:total="tablePage.totalResult"
|
:current="tablePage.currentPage"
|
||||||
:show-total="(total, range) => `当前展示 ${range[0]}-${range[1]} 条数据, 共 ${total} 条`"
|
:total="tablePage.totalResult"
|
||||||
:page-size="tablePage.pageSize"
|
:show-total="(total, range) => `当前展示 ${range[0]}-${range[1]} 条数据, 共 ${total} 条`"
|
||||||
:default-current="1"
|
:page-size="tablePage.pageSize"
|
||||||
@change="pageOrSizeChange"
|
:default-current="1"
|
||||||
@showSizeChange="pageOrSizeChange"
|
@change="pageOrSizeChange"
|
||||||
:pageSizeOptions="['20', '50', '100', '200']"
|
@showSizeChange="pageOrSizeChange"
|
||||||
/>
|
:pageSizeOptions="['20', '50', '100', '200']"
|
||||||
</template>
|
/>
|
||||||
</a-modal>
|
</template>
|
||||||
</template>
|
</a-modal>
|
||||||
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { searchAttributes } from '../../api/CITypeAttr'
|
import { searchAttributes } from '../../api/CITypeAttr'
|
||||||
import AttributeCard from './attributeCard.vue'
|
import AttributeCard from './attributeCard.vue'
|
||||||
export default {
|
export default {
|
||||||
name: 'AttributeStore',
|
name: 'AttrbuteStore',
|
||||||
components: { AttributeCard },
|
components: { AttributeCard },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
visible: false,
|
visible: false,
|
||||||
attrList: [],
|
attrList: [],
|
||||||
tablePage: {
|
tablePage: {
|
||||||
currentPage: 1,
|
currentPage: 1,
|
||||||
pageSize: 50,
|
pageSize: 50,
|
||||||
totalResult: 0,
|
totalResult: 0,
|
||||||
},
|
},
|
||||||
loading: false,
|
loading: false,
|
||||||
searchKey: 'alias',
|
searchKey: 'alias',
|
||||||
searchValue: '',
|
searchValue: '',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
open() {
|
||||||
|
this.visible = true
|
||||||
|
this.searchAttributes()
|
||||||
|
},
|
||||||
|
handleCancel() {
|
||||||
|
this.visible = false
|
||||||
|
},
|
||||||
|
async searchAttributes(currentPage = 1, pageSize = this.tablePage.pageSize) {
|
||||||
|
this.loading = true
|
||||||
|
const params = {
|
||||||
|
page: currentPage,
|
||||||
|
page_size: pageSize,
|
||||||
|
}
|
||||||
|
if (this.searchKey && this.searchValue) {
|
||||||
|
params[this.searchKey] = this.searchValue
|
||||||
|
}
|
||||||
|
searchAttributes(params)
|
||||||
|
.then((res) => {
|
||||||
|
this.attrList = res.attributes
|
||||||
|
this.tablePage = {
|
||||||
|
...this.tablePage,
|
||||||
|
currentPage: res.page,
|
||||||
|
pageSize: res.page_size,
|
||||||
|
totalResult: res.numfound,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
this.loading = false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
pageOrSizeChange(currentPage, pageSize) {
|
||||||
|
this.searchAttributes(currentPage, pageSize)
|
||||||
|
},
|
||||||
|
pressEnter() {
|
||||||
|
this.searchAttributes(1)
|
||||||
|
},
|
||||||
|
handleInput(e) {
|
||||||
|
if (!e.target.value) {
|
||||||
|
this.pressEnter()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
},
|
||||||
open() {
|
}
|
||||||
this.visible = true
|
</script>
|
||||||
this.searchAttributes()
|
|
||||||
},
|
|
||||||
handleCancel() {
|
|
||||||
this.visible = false
|
|
||||||
},
|
|
||||||
async searchAttributes(currentPage = 1, pageSize = this.tablePage.pageSize) {
|
|
||||||
this.loading = true
|
|
||||||
const params = {
|
|
||||||
page: currentPage,
|
|
||||||
page_size: pageSize,
|
|
||||||
}
|
|
||||||
if (this.searchKey && this.searchValue) {
|
|
||||||
params[this.searchKey] = this.searchValue
|
|
||||||
}
|
|
||||||
searchAttributes(params)
|
|
||||||
.then((res) => {
|
|
||||||
this.attrList = res.attributes
|
|
||||||
this.tablePage = {
|
|
||||||
...this.tablePage,
|
|
||||||
currentPage: res.page,
|
|
||||||
pageSize: res.page_size,
|
|
||||||
totalResult: res.numfound,
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
this.loading = false
|
|
||||||
})
|
|
||||||
},
|
|
||||||
pageOrSizeChange(currentPage, pageSize) {
|
|
||||||
this.searchAttributes(currentPage, pageSize)
|
|
||||||
},
|
|
||||||
pressEnter() {
|
|
||||||
this.searchAttributes(1)
|
|
||||||
},
|
|
||||||
handleInput(e) {
|
|
||||||
if (!e.target.value) {
|
|
||||||
this.pressEnter()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.attrbute-store-wrapper {
|
.attrbute-store-wrapper {
|
||||||
.attrbute-store-col {
|
.attrbute-store-col {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.attrbute-store-wrapper {
|
||||||
|
.ant-modal-body {
|
||||||
|
height: 70vh;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.attrbute-store-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
@import '~@/style/static.less';
|
||||||
|
|
||||||
|
.attrbute-store-search {
|
||||||
|
width: 300px;
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 60px;
|
||||||
|
.ant-input-group.ant-input-group-compact > *:first-child,
|
||||||
|
.ant-input-group.ant-input-group-compact > .ant-select:first-child > .ant-select-selection {
|
||||||
|
border-top-left-radius: 20px !important;
|
||||||
|
border-bottom-left-radius: 20px !important;
|
||||||
|
background-color: #custom_colors[color_1];
|
||||||
|
color: #fff;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.ant-select-focused .ant-select-selection,
|
||||||
|
.ant-select-selection:focus {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
.ant-select-selection__rendered {
|
||||||
|
margin-right: 12px;
|
||||||
|
}
|
||||||
|
.ant-select-arrow {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 10px;
|
||||||
|
right: 8px;
|
||||||
|
}
|
||||||
|
.attrbute-store-search-select {
|
||||||
|
width: 65px;
|
||||||
|
.ant-select-selection-selected-value {
|
||||||
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
.attrbute-store-search-input {
|
||||||
|
|
||||||
<style lang="less">
|
|
||||||
.attrbute-store-wrapper {
|
|
||||||
.ant-modal-body {
|
|
||||||
height: 70vh;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
.attrbute-store-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<style lang="less">
|
|
||||||
@import '~@/style/static.less';
|
|
||||||
|
|
||||||
.attrbute-store-search {
|
|
||||||
width: 300px;
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-right: 60px;
|
width: calc(100% - 65px);
|
||||||
.ant-input-group.ant-input-group-compact > *:first-child,
|
.ant-input {
|
||||||
.ant-input-group.ant-input-group-compact > .ant-select:first-child > .ant-select-selection {
|
background-color: #f0f5ff;
|
||||||
border-top-left-radius: 20px !important;
|
|
||||||
border-bottom-left-radius: 20px !important;
|
|
||||||
background-color: #custom_colors[color_1];
|
|
||||||
color: #fff;
|
|
||||||
border: none;
|
border: none;
|
||||||
}
|
border-radius: 20px;
|
||||||
.ant-select-focused .ant-select-selection,
|
&:focus {
|
||||||
.ant-select-selection:focus {
|
box-shadow: none;
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
.ant-select-selection__rendered {
|
|
||||||
margin-right: 12px;
|
|
||||||
}
|
|
||||||
.ant-select-arrow {
|
|
||||||
color: #fff;
|
|
||||||
font-size: 10px;
|
|
||||||
right: 8px;
|
|
||||||
}
|
|
||||||
.attrbute-store-search-select {
|
|
||||||
width: 65px;
|
|
||||||
.ant-select-selection-selected-value {
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.attrbute-store-search-input {
|
|
||||||
display: inline-block;
|
|
||||||
width: calc(100% - 65px);
|
|
||||||
.ant-input {
|
|
||||||
background-color: #f0f5ff;
|
|
||||||
border: none;
|
|
||||||
border-radius: 20px;
|
|
||||||
&:focus {
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue