317 lines
7.7 KiB
Vue
317 lines
7.7 KiB
Vue
|
<template>
|
|||
|
|
<div class="wrapper">
|
|||
|
|
<!-- 左侧树形目录 -->
|
|||
|
|
<split-pane v-show="!detailVisible" class="cmdb-split" v-on:resize="resize" :min-percent="10" :default-percent="15" split="vertical">
|
|||
|
|
<template slot="paneL">
|
|||
|
|
<Tree ref="treeRef" :type="activeName === 'attr' ? 'normal' : 'search'" @handleNodeClick="handleNodeClick" :update-node="updateNodeGraph" @getList="getList"> </Tree>
|
|||
|
|
</template>
|
|||
|
|
<template slot="paneR">
|
|||
|
|
<el-scrollbar class="full-height">
|
|||
|
|
<el-card shadow="never" class="m-l">
|
|||
|
|
<div class="m-b-sm m-l-xs">配置模型</div>
|
|||
|
|
<!-- 搜索区域 -->
|
|||
|
|
<cb-table-search :configs="searchConfigs" :onSearch="handleSearch" class="service-search m-b-sm">
|
|||
|
|
<template #operate>
|
|||
|
|
<el-button type="primary" icon="el-icon-plus" @click="handlCreate()">新增 </el-button>
|
|||
|
|
</template>
|
|||
|
|
</cb-table-search>
|
|||
|
|
<!-- 卡片 -->
|
|||
|
|
<el-row :gutter="20">
|
|||
|
|
<el-col v-for="(row, index) in list" :xl="6" :lg="8" :md="12" :key="index" class="m-b card-container">
|
|||
|
|
<el-card class="card" shadow="hover" @click.native="goDetail(row)">
|
|||
|
|
<div class="card-content">
|
|||
|
|
<el-avatar :src="row.iconImage"></el-avatar>
|
|||
|
|
<div class="cell-content">
|
|||
|
|
<p class="cell-title">{{ row.name }}</p>
|
|||
|
|
<p class="cell-code">编码：{{ row.code }}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="card-remark">{{ row.remark || '暂无描述' }}</div>
|
|||
|
|
<div class="card-footer">
|
|||
|
|
<el-button type="text" class="operate" @click.stop="handlCreate(row)"> 编辑 </el-button>
|
|||
|
|
<el-button type="text" class="operate" @click.stop="handleRemove(row)"> 删除 </el-button>
|
|||
|
|
</div>
|
|||
|
|
</el-card>
|
|||
|
|
</el-col>
|
|||
|
|
<cb-empty v-if="!list.length"> </cb-empty>
|
|||
|
|
</el-row>
|
|||
|
|
<!-- 分页 -->
|
|||
|
|
<el-row>
|
|||
|
|
<el-col :span="24" class="pull-right">
|
|||
|
|
<el-pagination class="pull-right" @size-change="handleSizeChange" @current-change="getList" background :current-page.sync="params.page" :page-sizes="[12, 16, 24, 32, 40, 80]" :page-size="params.rows" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
</el-card>
|
|||
|
|
</el-scrollbar>
|
|||
|
|
</template>
|
|||
|
|
</split-pane>
|
|||
|
|
<!--详情界面-->
|
|||
|
|
<ModuleDetail v-if="detailVisible" :module-data="moduleData" @goBack="detailVisible = false" />
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
<script>
|
|||
|
|
import { mapState } from 'vuex'
|
|||
|
|
import splitPane from 'vue-splitpane'
|
|||
|
|
import ModuleDetail from './ModuleDetail.vue'
|
|||
|
|
import { getModules, removeModule } from 'services/cmdb/module'
|
|||
|
|
|
|||
|
|
function getSearchConfigs(moduleGroupId, flag) {
|
|||
|
|
return [
|
|||
|
|
{ type: 'Const', value: 'moduleGroupId', initValue: moduleGroupId },
|
|||
|
|
{ type: 'Const', value: 'flag', initValue: flag },
|
|||
|
|
{ type: 'Input', label: '模型名称', value: 'name' }
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
Tree: () => import('./side/index'),
|
|||
|
|
splitPane,
|
|||
|
|
ModuleDetail
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
searchConfigs: getSearchConfigs(),
|
|||
|
|
params: {
|
|||
|
|
page: 1,
|
|||
|
|
rows: 12
|
|||
|
|
},
|
|||
|
|
total: 0,
|
|||
|
|
list: [],
|
|||
|
|
detailVisible: false,
|
|||
|
|
moduleData: {},
|
|||
|
|
loading: true,
|
|||
|
|
currentModuleId: '',
|
|||
|
|
isJsonSuccess: true,
|
|||
|
|
activeName: ''
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
async getList() {
|
|||
|
|
const res = await getModules(this.params)
|
|||
|
|
if (res.success) {
|
|||
|
|
this.list = res.data.rows
|
|||
|
|
this.total = res.data.total
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
handleSearch(param) {
|
|||
|
|
this.params.page = 1
|
|||
|
|
this.params.params = param
|
|||
|
|
this.getList()
|
|||
|
|
},
|
|||
|
|
handleSizeChange(val) {
|
|||
|
|
this.params.page = 1
|
|||
|
|
this.params.rows = val
|
|||
|
|
this.getList()
|
|||
|
|
},
|
|||
|
|
handleRemove({ id, name }) {
|
|||
|
|
this.$confirm(`该操作不可恢复，删除模型将清空该模型下所有配置及关联关系，建议采取禁用操作。是否确认删除【${name}】？`, '提示', {
|
|||
|
|
confirmButtonText: '确定',
|
|||
|
|
cancelButtonText: '取消',
|
|||
|
|
type: 'warning'
|
|||
|
|
}).then(async () => {
|
|||
|
|
const res = await removeModule(id)
|
|||
|
|
if (res.success) {
|
|||
|
|
this.$message.success(res.message)
|
|||
|
|
this.getList()
|
|||
|
|
this.$refs.treeRef.updateSuccess()
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
handlCreate(data = {}) {
|
|||
|
|
this.$refs.treeRef.handleCreate({
|
|||
|
|
type: data.id ? 'update' : 'create',
|
|||
|
|
operate: 'module',
|
|||
|
|
parentId: data.groupId || this.searchConfigs[0].initValue,
|
|||
|
|
data
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
goDetail(data) {
|
|||
|
|
this.moduleData = data
|
|||
|
|
this.detailVisible = true
|
|||
|
|
},
|
|||
|
|
handleImportProps(props) {
|
|||
|
|
this.fieldItemList = [...this.fieldItemList, ...props]
|
|||
|
|
},
|
|||
|
|
resize(a) {
|
|||
|
|
console.log(a)
|
|||
|
|
},
|
|||
|
|
updateNodeGraph() {
|
|||
|
|
if (this.activeName === 'relation') {
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
this.initGraph()
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
handleNodeClick(data) {
|
|||
|
|
const { id, name, parentId } = data
|
|||
|
|
let moduleGroupId = ''
|
|||
|
|
let flag = ''
|
|||
|
|
if (name === '其他') {
|
|||
|
|
moduleGroupId = parentId
|
|||
|
|
flag = false
|
|||
|
|
} else if (id !== 'all') {
|
|||
|
|
moduleGroupId = id
|
|||
|
|
flag = true
|
|||
|
|
}
|
|||
|
|
this.searchConfigs = getSearchConfigs(moduleGroupId, flag)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
<style lang="scss">
|
|||
|
|
.field-item {
|
|||
|
|
margin-top: 10px;
|
|||
|
|
cursor: move;
|
|||
|
|
padding: 5px;
|
|||
|
|
position: relative;
|
|||
|
|
display: flex;
|
|||
|
|
flex: 1 1 auto;
|
|||
|
|
|
|||
|
|
&.select {
|
|||
|
|
border: 1px solid #ddd;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.field-item-name {
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
text-align: right;
|
|||
|
|
padding-right: 10px;
|
|||
|
|
margin: 0;
|
|||
|
|
width: 20%;
|
|||
|
|
height: 30px;
|
|||
|
|
line-height: 30px;
|
|||
|
|
max-width: 110px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.field-item-value {
|
|||
|
|
flex: 1;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.field-item-operate {
|
|||
|
|
margin-left: 10px;
|
|||
|
|
width: 30px;
|
|||
|
|
height: 30px;
|
|||
|
|
border: 1px solid #f0f0f0;
|
|||
|
|
color: #d05d5d;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
text-align: center;
|
|||
|
|
line-height: 30px;
|
|||
|
|
display: block;
|
|||
|
|
font-weight: 600;
|
|||
|
|
cursor: pointer;
|
|||
|
|
z-index: 100;
|
|||
|
|
|
|||
|
|
.icon-delete {
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-weight: 400;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.field-options {
|
|||
|
|
width: 450px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.field-options-title {
|
|||
|
|
padding: 0 16px;
|
|||
|
|
line-height: 40px;
|
|||
|
|
height: 40px;
|
|||
|
|
border-bottom: 1px solid #eee;
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
font-weight: 700;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.field-options-item {
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
display: flex;
|
|||
|
|
|
|||
|
|
label.required:before,
|
|||
|
|
.field-item label.required:before {
|
|||
|
|
display: inline-block;
|
|||
|
|
margin-right: 4px;
|
|||
|
|
content: '*';
|
|||
|
|
font-size: 13px;
|
|||
|
|
color: #f50;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
label.required,
|
|||
|
|
label.labelWidth {
|
|||
|
|
width: 120px;
|
|||
|
|
text-align: right;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icon-guanjianzi {
|
|||
|
|
font-size: 13px;
|
|||
|
|
color: #ffda00;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
span.title {
|
|||
|
|
font-size: inherit;
|
|||
|
|
color: inherit;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item-group {
|
|||
|
|
width: calc(100% - 45px) !important;
|
|||
|
|
padding: 5px 8px;
|
|||
|
|
color: #3c763d;
|
|||
|
|
background-color: #dff0d8;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.wrapper {
|
|||
|
|
height: calc(100vh - 110px);
|
|||
|
|
.leftC {
|
|||
|
|
height: 100%;
|
|||
|
|
margin-left: 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.rightC {
|
|||
|
|
height: 100%;
|
|||
|
|
margin-left: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.float-right {
|
|||
|
|
position: absolute;
|
|||
|
|
right: 10px;
|
|||
|
|
top: 10px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.splitter-pane-resizer {
|
|||
|
|
margin-left: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.field-list-custom {
|
|||
|
|
color: #4082e6;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.el-dropdown-link {
|
|||
|
|
cursor: pointer;
|
|||
|
|
color: #409eff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.el-icon-arrow-down {
|
|||
|
|
font-size: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cmdb-popper {
|
|||
|
|
border-top-color: rgb(30, 84, 213);
|
|||
|
|
|
|||
|
|
.popper__arrow {
|
|||
|
|
border-bottom-color: rgb(30, 84, 213) !important;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.cmdb-split {
|
|||
|
|
.splitter-pane-resizer {
|
|||
|
|
background: #fff !important;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
@import './card.scss';
|
|||
|
|
</style>
|