mirror of https://github.com/veops/cmdb.git
Revert "add 添加属性库和模型模块"
This commit is contained in:
pycook
pycook
parent
64c3b9da3b
commit
5cdb4ecd2a
|
|
@ -1,374 +0,0 @@
|
||||||
<template>
|
|
||||||
<a-card :bordered="false">
|
|
||||||
|
|
||||||
<div class="action-btn">
|
|
||||||
<a-button @click="handleCreate" type="primary" style="margin-right: 0.3rem;">{{ btnName }}</a-button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<s-table
|
|
||||||
:alert="options.alert"
|
|
||||||
:columns="columns"
|
|
||||||
:data="loadData"
|
|
||||||
:rowKey="record=>record.id"
|
|
||||||
:rowSelection="options.rowSelection"
|
|
||||||
:scroll="scroll"
|
|
||||||
:showPagination="showPagination"
|
|
||||||
ref="table"
|
|
||||||
size="middle"
|
|
||||||
|
|
||||||
>
|
|
||||||
<div slot="filterDropdown" slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }" class="custom-filter-dropdown">
|
|
||||||
<a-input
|
|
||||||
v-ant-ref="c => searchInput = c"
|
|
||||||
:placeholder="`Search ${column.dataIndex}`"
|
|
||||||
:value="selectedKeys[0]"
|
|
||||||
@change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
|
|
||||||
@pressEnter="() => handleSearch(selectedKeys, confirm, column)"
|
|
||||||
style="width: 188px; margin-bottom: 8px; display: block;"
|
|
||||||
/>
|
|
||||||
<a-button
|
|
||||||
type="primary"
|
|
||||||
@click="() => handleSearch(selectedKeys, confirm, column)"
|
|
||||||
icon="search"
|
|
||||||
size="small"
|
|
||||||
style="width: 90px; margin-right: 8px"
|
|
||||||
>Search</a-button>
|
|
||||||
<a-button
|
|
||||||
@click="() => handleReset(clearFilters, column)"
|
|
||||||
size="small"
|
|
||||||
style="width: 90px"
|
|
||||||
>Reset</a-button>
|
|
||||||
</div>
|
|
||||||
<a-icon slot="filterIcon" slot-scope="filtered" type="search" :style="{ color: filtered ? '#108ee9' : undefined }" />
|
|
||||||
|
|
||||||
<template slot="nameSearchRender" slot-scope="text">
|
|
||||||
<span v-if="columnSearchText.name">
|
|
||||||
<template v-for="(fragment, i) in text.toString().split(new RegExp(`(?<=${columnSearchText.name})|(?=${columnSearchText.name})`, 'i'))">
|
|
||||||
<mark v-if="fragment.toLowerCase() === columnSearchText.name.toLowerCase()" :key="i" class="highlight">{{ fragment }}</mark>
|
|
||||||
<template v-else>{{ fragment }}</template>
|
|
||||||
</template>
|
|
||||||
</span>
|
|
||||||
<template v-else>{{ text }}</template>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template slot="aliasSearchRender" slot-scope="text">
|
|
||||||
<span v-if="columnSearchText.alias">
|
|
||||||
<template v-for="(fragment, i) in text.toString().split(new RegExp(`(?<=${columnSearchText.alias})|(?=${columnSearchText.alias})`, 'i'))">
|
|
||||||
<mark v-if="fragment.toLowerCase() === columnSearchText.alias.toLowerCase()" :key="i" class="highlight">{{ fragment }}</mark>
|
|
||||||
<template v-else>{{ fragment }}</template>
|
|
||||||
</template>
|
|
||||||
</span>
|
|
||||||
<template v-else>{{ text }}</template>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<span slot="is_check" slot-scope="text">
|
|
||||||
<a-icon type="check" v-if="text"/>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span slot="action" slot-scope="text, record">
|
|
||||||
<template>
|
|
||||||
<a @click="handleEdit(record)">编辑</a>
|
|
||||||
<a-divider type="vertical"/>
|
|
||||||
<a @click="handleDelete(record)">删除</a>
|
|
||||||
</template>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
</s-table>
|
|
||||||
<AttributeForm ref="attributeForm" :handleOk="handleOk"> </AttributeForm>
|
|
||||||
|
|
||||||
</a-card>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { STable } from '@/components'
|
|
||||||
import AttributeForm from './module/attributeForm'
|
|
||||||
import { valueTypeMap } from './module/const'
|
|
||||||
import { deleteAttributesById, searchAttributes } from '@/api/cmdb/CITypeAttr'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'Index',
|
|
||||||
components: {
|
|
||||||
STable,
|
|
||||||
AttributeForm
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
scroll: { x: 1400, y: 500 },
|
|
||||||
btnName: '新增属性',
|
|
||||||
|
|
||||||
CITypeName: this.$route.params.CITypeName,
|
|
||||||
CITypeId: this.$route.params.CITypeId,
|
|
||||||
|
|
||||||
formLayout: 'vertical',
|
|
||||||
|
|
||||||
attributes: [],
|
|
||||||
allAttributes: [],
|
|
||||||
transferData: [],
|
|
||||||
transferTargetKeys: [],
|
|
||||||
transferSelectedKeys: [],
|
|
||||||
originTargetKeys: [],
|
|
||||||
|
|
||||||
pagination: {
|
|
||||||
defaultPageSize: 20
|
|
||||||
},
|
|
||||||
showPagination: false,
|
|
||||||
columnSearchText: {
|
|
||||||
alias: '',
|
|
||||||
name: ''
|
|
||||||
},
|
|
||||||
columns: [
|
|
||||||
{
|
|
||||||
title: '名称',
|
|
||||||
dataIndex: 'alias',
|
|
||||||
sorter: false,
|
|
||||||
width: 200,
|
|
||||||
scopedSlots: {
|
|
||||||
customRender: 'aliasSearchRender',
|
|
||||||
filterDropdown: 'filterDropdown',
|
|
||||||
filterIcon: 'filterIcon'
|
|
||||||
},
|
|
||||||
onFilter: (value, record) => record.alias.toLowerCase().includes(value.toLowerCase()),
|
|
||||||
onFilterDropdownVisibleChange: (visible) => {
|
|
||||||
if (visible) {
|
|
||||||
setTimeout(() => {
|
|
||||||
this.searchInput.focus()
|
|
||||||
}, 0)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '英文名',
|
|
||||||
dataIndex: 'name',
|
|
||||||
sorter: false,
|
|
||||||
width: 200,
|
|
||||||
scopedSlots: {
|
|
||||||
customRender: 'nameSearchRender',
|
|
||||||
filterDropdown: 'filterDropdown',
|
|
||||||
filterIcon: 'filterIcon'
|
|
||||||
},
|
|
||||||
onFilter: (value, record) => record.name.toLowerCase().includes(value.toLowerCase()),
|
|
||||||
onFilterDropdownVisibleChange: (visible) => {
|
|
||||||
if (visible) {
|
|
||||||
setTimeout(() => {
|
|
||||||
this.searchInput.focus()
|
|
||||||
}, 0)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '类型',
|
|
||||||
dataIndex: 'value_type',
|
|
||||||
sorter: false,
|
|
||||||
width: 100,
|
|
||||||
scopedSlots: { customRender: 'value_type' },
|
|
||||||
customRender: (text) => valueTypeMap[text]
|
|
||||||
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '唯一',
|
|
||||||
dataIndex: 'is_unique',
|
|
||||||
width: 80,
|
|
||||||
sorter: false,
|
|
||||||
scopedSlots: { customRender: 'is_check' }
|
|
||||||
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '索引',
|
|
||||||
dataIndex: 'is_index',
|
|
||||||
sorter: false,
|
|
||||||
width: 80,
|
|
||||||
scopedSlots: { customRender: 'is_check' }
|
|
||||||
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '排序',
|
|
||||||
dataIndex: 'is_sortable',
|
|
||||||
sorter: false,
|
|
||||||
width: 80,
|
|
||||||
scopedSlots: { customRender: 'is_check' }
|
|
||||||
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '链接',
|
|
||||||
dataIndex: 'is_link',
|
|
||||||
sorter: false,
|
|
||||||
width: 80,
|
|
||||||
scopedSlots: { customRender: 'is_check' }
|
|
||||||
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '密码',
|
|
||||||
dataIndex: 'is_password',
|
|
||||||
sorter: false,
|
|
||||||
width: 100,
|
|
||||||
scopedSlots: { customRender: 'is_check' }
|
|
||||||
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '列表',
|
|
||||||
dataIndex: 'is_list',
|
|
||||||
sorter: false,
|
|
||||||
scopedSlots: { customRender: 'is_check' }
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
title: '操作',
|
|
||||||
dataIndex: 'action',
|
|
||||||
width: 100,
|
|
||||||
fixed: 'right',
|
|
||||||
scopedSlots: { customRender: 'action' }
|
|
||||||
}
|
|
||||||
],
|
|
||||||
loadData: parameter => {
|
|
||||||
console.log('loadData.parameter', parameter)
|
|
||||||
|
|
||||||
return searchAttributes()
|
|
||||||
.then(res => {
|
|
||||||
this.allAttributes = res.attributes
|
|
||||||
return {
|
|
||||||
data: res.attributes
|
|
||||||
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
mdl: {},
|
|
||||||
// 高级搜索 展开/关闭
|
|
||||||
advanced: false,
|
|
||||||
// 查询参数
|
|
||||||
queryParam: {},
|
|
||||||
// 表头
|
|
||||||
|
|
||||||
selectedRowKeys: [],
|
|
||||||
selectedRows: [],
|
|
||||||
|
|
||||||
// custom table alert & rowSelection
|
|
||||||
options: {
|
|
||||||
alert: false,
|
|
||||||
rowSelection: null
|
|
||||||
},
|
|
||||||
optionAlertShow: false
|
|
||||||
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
beforeCreate () {
|
|
||||||
this.form = this.$form.createForm(this)
|
|
||||||
},
|
|
||||||
|
|
||||||
computed: {
|
|
||||||
|
|
||||||
formItemLayout () {
|
|
||||||
const { formLayout } = this
|
|
||||||
return formLayout === 'horizontal' ? {
|
|
||||||
labelCol: { span: 4 },
|
|
||||||
wrapperCol: { span: 14 }
|
|
||||||
} : {}
|
|
||||||
},
|
|
||||||
|
|
||||||
horizontalFormItemLayout () {
|
|
||||||
return {
|
|
||||||
labelCol: { span: 5 },
|
|
||||||
wrapperCol: { span: 12 }
|
|
||||||
}
|
|
||||||
},
|
|
||||||
buttonItemLayout () {
|
|
||||||
const { formLayout } = this
|
|
||||||
return formLayout === 'horizontal' ? {
|
|
||||||
wrapperCol: { span: 14, offset: 4 }
|
|
||||||
} : {}
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
this.getAttributes()
|
|
||||||
this.setScrollY()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handleSearch (selectedKeys, confirm, column) {
|
|
||||||
confirm()
|
|
||||||
this.columnSearchText[column.dataIndex] = selectedKeys[0]
|
|
||||||
},
|
|
||||||
|
|
||||||
handleReset (clearFilters, column) {
|
|
||||||
clearFilters()
|
|
||||||
this.columnSearchText[column.dataIndex] = ''
|
|
||||||
},
|
|
||||||
|
|
||||||
getAttributes () {
|
|
||||||
searchAttributes().then(res => {
|
|
||||||
this.allAttributes = res.attributes
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
setScrollY () {
|
|
||||||
this.scroll.y = window.innerHeight - this.$refs.table.$el.offsetTop - 200
|
|
||||||
},
|
|
||||||
|
|
||||||
handleEdit (record) {
|
|
||||||
this.$refs.attributeForm.handleEdit(record)
|
|
||||||
},
|
|
||||||
handleDelete (record) {
|
|
||||||
this.deleteAttribute(record.id)
|
|
||||||
},
|
|
||||||
handleOk () {
|
|
||||||
this.$refs.table.refresh()
|
|
||||||
},
|
|
||||||
|
|
||||||
handleCreate () {
|
|
||||||
this.$refs.attributeForm.handleCreate()
|
|
||||||
},
|
|
||||||
|
|
||||||
deleteAttribute (attrId) {
|
|
||||||
deleteAttributesById(attrId)
|
|
||||||
.then(res => {
|
|
||||||
this.$message.success(`删除成功`)
|
|
||||||
this.handleOk()
|
|
||||||
})
|
|
||||||
.catch(err => this.requestFailed(err))
|
|
||||||
},
|
|
||||||
requestFailed (err) {
|
|
||||||
const msg = ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试'
|
|
||||||
this.$message.error(`${msg}`)
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
watch: {}
|
|
||||||
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.search {
|
|
||||||
margin-bottom: 54px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fold {
|
|
||||||
width: calc(100% - 216px);
|
|
||||||
display: inline-block
|
|
||||||
}
|
|
||||||
|
|
||||||
.operator {
|
|
||||||
margin-bottom: 18px;
|
|
||||||
}
|
|
||||||
.action-btn {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
.custom-filter-dropdown {
|
|
||||||
padding: 8px;
|
|
||||||
border-radius: 4px;
|
|
||||||
background: #fff;
|
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
|
|
||||||
}
|
|
||||||
|
|
||||||
.highlight {
|
|
||||||
background-color: rgb(255, 192, 105);
|
|
||||||
padding: 0px;
|
|
||||||
}
|
|
||||||
@media screen and (max-width: 900px) {
|
|
||||||
.fold {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,339 +0,0 @@
|
||||||
<template>
|
|
||||||
<a-drawer
|
|
||||||
:closable="false"
|
|
||||||
:title="drawerTitle"
|
|
||||||
:visible="drawerVisible"
|
|
||||||
@close="onClose"
|
|
||||||
placement="right"
|
|
||||||
width="30%"
|
|
||||||
>
|
|
||||||
|
|
||||||
<a-form :form="form" :layout="formLayout" @submit="handleSubmit">
|
|
||||||
|
|
||||||
<a-form-item
|
|
||||||
:label-col="formItemLayout.labelCol"
|
|
||||||
:wrapper-col="formItemLayout.wrapperCol"
|
|
||||||
label="属性名(英文)"
|
|
||||||
>
|
|
||||||
<a-input
|
|
||||||
name="name"
|
|
||||||
placeholder="英文"
|
|
||||||
v-decorator="['name', {rules: [{ required: true, message: '请输入属性名'},{message: '不能以数字开头，可以是英文 数字以及下划线 (_)', pattern: RegExp('^(?!\\d)[a-zA-Z_0-9]+$')}]} ]"
|
|
||||||
/>
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item
|
|
||||||
:label-col="formItemLayout.labelCol"
|
|
||||||
:wrapper-col="formItemLayout.wrapperCol"
|
|
||||||
label="别名"
|
|
||||||
>
|
|
||||||
<a-input
|
|
||||||
name="alias"
|
|
||||||
v-decorator="['alias', {rules: []} ]"
|
|
||||||
/>
|
|
||||||
</a-form-item>
|
|
||||||
|
|
||||||
<a-form-item
|
|
||||||
:label-col="formItemLayout.labelCol"
|
|
||||||
:wrapper-col="formItemLayout.wrapperCol"
|
|
||||||
label="数据类型"
|
|
||||||
>
|
|
||||||
|
|
||||||
<a-select
|
|
||||||
name="value_type"
|
|
||||||
style="width: 120px"
|
|
||||||
v-decorator="['value_type', {rules: [{required: true}], } ]"
|
|
||||||
>
|
|
||||||
<a-select-option :value="key" :key="key" v-for="(value, key) in ValueTypeMap">{{ value }}</a-select-option>
|
|
||||||
</a-select>
|
|
||||||
|
|
||||||
</a-form-item>
|
|
||||||
|
|
||||||
<a-form-item
|
|
||||||
:label-col="horizontalFormItemLayout.labelCol"
|
|
||||||
:wrapper-col="horizontalFormItemLayout.wrapperCol"
|
|
||||||
label="是否唯一"
|
|
||||||
>
|
|
||||||
<a-switch
|
|
||||||
@change="onChange"
|
|
||||||
name="is_unique"
|
|
||||||
v-decorator="['is_unique', {rules: [], valuePropName: 'checked',} ]"
|
|
||||||
/>
|
|
||||||
</a-form-item>
|
|
||||||
|
|
||||||
<a-form-item
|
|
||||||
:label-col="horizontalFormItemLayout.labelCol"
|
|
||||||
:wrapper-col="horizontalFormItemLayout.wrapperCol"
|
|
||||||
label="是否索引"
|
|
||||||
>
|
|
||||||
<a-switch
|
|
||||||
@change="onChange"
|
|
||||||
name="is_index"
|
|
||||||
v-decorator="['is_index', {rules: [], valuePropName: 'checked',} ]"
|
|
||||||
/>
|
|
||||||
</a-form-item>
|
|
||||||
|
|
||||||
<a-form-item
|
|
||||||
:label-col="horizontalFormItemLayout.labelCol"
|
|
||||||
:wrapper-col="horizontalFormItemLayout.wrapperCol"
|
|
||||||
label="是否可排序"
|
|
||||||
>
|
|
||||||
<a-switch
|
|
||||||
@change="onChange"
|
|
||||||
name="is_sortable"
|
|
||||||
v-decorator="['is_sortable', {rules: [], valuePropName: 'checked',} ]"
|
|
||||||
/>
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item
|
|
||||||
:label-col="horizontalFormItemLayout.labelCol"
|
|
||||||
:wrapper-col="horizontalFormItemLayout.wrapperCol"
|
|
||||||
label="是否是链接"
|
|
||||||
>
|
|
||||||
<a-switch
|
|
||||||
@change="onChange"
|
|
||||||
name="is_link"
|
|
||||||
v-decorator="['is_link', {rules: [], valuePropName: 'checked',} ]"
|
|
||||||
/>
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item
|
|
||||||
:label-col="horizontalFormItemLayout.labelCol"
|
|
||||||
:wrapper-col="horizontalFormItemLayout.wrapperCol"
|
|
||||||
label="是否是密码"
|
|
||||||
>
|
|
||||||
<a-switch
|
|
||||||
@change="onChange"
|
|
||||||
name="is_password"
|
|
||||||
v-decorator="['is_password', {rules: [], valuePropName: 'checked',} ]"
|
|
||||||
/>
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item
|
|
||||||
:label-col="horizontalFormItemLayout.labelCol"
|
|
||||||
:wrapper-col="horizontalFormItemLayout.wrapperCol"
|
|
||||||
label="是否列表"
|
|
||||||
>
|
|
||||||
<a-switch
|
|
||||||
@change="onChange"
|
|
||||||
name="is_list"
|
|
||||||
v-decorator="['is_list', {rules: [], valuePropName: 'checked',} ]"
|
|
||||||
/>
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item
|
|
||||||
:label-col="formItemLayout.labelCol"
|
|
||||||
:wrapper-col="formItemLayout.wrapperCol"
|
|
||||||
label="预定义值"
|
|
||||||
>
|
|
||||||
<a-textarea
|
|
||||||
:rows="5"
|
|
||||||
name="choice_value"
|
|
||||||
placeholder="多个值使用半角逗号“,”分隔"
|
|
||||||
v-decorator="['choice_value', {rules: []} ]"
|
|
||||||
/>
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item>
|
|
||||||
<a-input
|
|
||||||
name="id"
|
|
||||||
type="hidden"
|
|
||||||
v-decorator="['id', {rules: []} ]"
|
|
||||||
/>
|
|
||||||
</a-form-item>
|
|
||||||
|
|
||||||
<div
|
|
||||||
:style="{
|
|
||||||
position: 'absolute',
|
|
||||||
left: 0,
|
|
||||||
bottom: 0,
|
|
||||||
width: '100%',
|
|
||||||
borderTop: '1px solid #e9e9e9',
|
|
||||||
padding: '0.8rem 1rem',
|
|
||||||
background: '#fff',
|
|
||||||
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<a-button @click="handleSubmit" type="primary" style="margin-right: 1rem">确定</a-button>
|
|
||||||
<a-button @click="onClose">取消</a-button>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</a-form>
|
|
||||||
</a-drawer>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { STable } from '@/components'
|
|
||||||
import { createAttribute, createCITypeAttributes, updateAttributeById } from '@/api/cmdb/CITypeAttr'
|
|
||||||
import { valueTypeMap } from './const'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'AttributeForm',
|
|
||||||
components: {
|
|
||||||
STable
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
|
|
||||||
drawerTitle: '新增属性',
|
|
||||||
drawerVisible: false,
|
|
||||||
CITypeName: this.$route.params.CITypeName,
|
|
||||||
CITypeId: this.$route.params.CITypeId,
|
|
||||||
|
|
||||||
formLayout: 'vertical',
|
|
||||||
|
|
||||||
attributes: [],
|
|
||||||
allAttributes: [],
|
|
||||||
|
|
||||||
ValueTypeMap: valueTypeMap
|
|
||||||
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
beforeCreate () {
|
|
||||||
this.form = this.$form.createForm(this)
|
|
||||||
},
|
|
||||||
|
|
||||||
computed: {
|
|
||||||
|
|
||||||
formItemLayout () {
|
|
||||||
const { formLayout } = this
|
|
||||||
return formLayout === 'horizontal' ? {
|
|
||||||
labelCol: { span: 4 },
|
|
||||||
wrapperCol: { span: 14 }
|
|
||||||
} : {}
|
|
||||||
},
|
|
||||||
|
|
||||||
horizontalFormItemLayout () {
|
|
||||||
return {
|
|
||||||
labelCol: { span: 5 },
|
|
||||||
wrapperCol: { span: 12 }
|
|
||||||
}
|
|
||||||
},
|
|
||||||
buttonItemLayout () {
|
|
||||||
const { formLayout } = this
|
|
||||||
return formLayout === 'horizontal' ? {
|
|
||||||
wrapperCol: { span: 14, offset: 4 }
|
|
||||||
} : {}
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
|
|
||||||
handleCreate () {
|
|
||||||
this.drawerVisible = true
|
|
||||||
},
|
|
||||||
onClose () {
|
|
||||||
this.form.resetFields()
|
|
||||||
this.drawerVisible = false
|
|
||||||
},
|
|
||||||
onChange (e) {
|
|
||||||
console.log(`checked = ${e}`)
|
|
||||||
},
|
|
||||||
|
|
||||||
handleEdit (record) {
|
|
||||||
this.drawerVisible = true
|
|
||||||
console.log(record)
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.form.setFieldsValue({
|
|
||||||
|
|
||||||
id: record.id,
|
|
||||||
alias: record.alias,
|
|
||||||
name: record.name,
|
|
||||||
value_type: record.value_type,
|
|
||||||
is_list: record.is_list,
|
|
||||||
is_unique: record.is_unique,
|
|
||||||
is_index: record.is_index,
|
|
||||||
is_password: record.is_password,
|
|
||||||
is_link: record.is_link,
|
|
||||||
is_sortable: record.is_sortable,
|
|
||||||
choice_value: (record.choice_value || []).join('\n')
|
|
||||||
|
|
||||||
})
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
handleSubmit (e) {
|
|
||||||
e.preventDefault()
|
|
||||||
this.form.validateFields((err, values) => {
|
|
||||||
if (!err) {
|
|
||||||
// eslint-disable-next-line no-console
|
|
||||||
console.log('Received values of form: ', values)
|
|
||||||
if (values.choice_value) {
|
|
||||||
values.choice_value = values.choice_value.split('\n')
|
|
||||||
}
|
|
||||||
|
|
||||||
if (values.id) {
|
|
||||||
this.updateAttribute(values.id, values)
|
|
||||||
} else {
|
|
||||||
this.createAttribute(values)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
updateAttribute (attrId, data) {
|
|
||||||
updateAttributeById(attrId, data)
|
|
||||||
.then(res => {
|
|
||||||
this.$message.success(`更新成功`)
|
|
||||||
this.handleOk()
|
|
||||||
this.onClose()
|
|
||||||
}).catch(err => this.requestFailed(err))
|
|
||||||
},
|
|
||||||
|
|
||||||
createAttribute (data) {
|
|
||||||
createAttribute(data)
|
|
||||||
.then(res => {
|
|
||||||
if (this.CITypeId) {
|
|
||||||
createCITypeAttributes(this.CITypeId, { attr_id: [res.attr_id] })
|
|
||||||
.then(res => {
|
|
||||||
this.$message.success(`添加成功`)
|
|
||||||
this.handleOk()
|
|
||||||
this.onClose()
|
|
||||||
}).catch(err => this.requestFailed(err))
|
|
||||||
} else {
|
|
||||||
this.$message.success(`添加成功`)
|
|
||||||
this.handleOk()
|
|
||||||
this.onClose()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch(err => this.requestFailed(err))
|
|
||||||
},
|
|
||||||
|
|
||||||
requestFailed (err) {
|
|
||||||
const msg = ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试'
|
|
||||||
this.$message.error(`${msg}`)
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
watch: {},
|
|
||||||
props: {
|
|
||||||
handleOk: {
|
|
||||||
type: Function,
|
|
||||||
default: null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.search {
|
|
||||||
margin-bottom: 54px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fold {
|
|
||||||
width: calc(100% - 216px);
|
|
||||||
display: inline-block
|
|
||||||
}
|
|
||||||
|
|
||||||
.operator {
|
|
||||||
margin-bottom: 18px;
|
|
||||||
}
|
|
||||||
.action-btn {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 900px) {
|
|
||||||
.fold {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
export const valueTypeMap = {
|
|
||||||
'0': '整数',
|
|
||||||
'1': '浮点数',
|
|
||||||
'2': '文本',
|
|
||||||
'3': 'datetime',
|
|
||||||
'4': 'date',
|
|
||||||
'5': 'time'
|
|
||||||
}
|
|
||||||
|
|
@ -1,551 +0,0 @@
|
||||||
<template>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<div class="action-btn">
|
|
||||||
<a-button @click="handleCreate" type="primary" style="margin-right: 0.3rem;">{{ singleAttrAction.btnName }}</a-button>
|
|
||||||
<a-button @click="handleUpdate" type="primary">{{ batchBindAttrAction.btnName }}</a-button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<s-table
|
|
||||||
:alert="options.alert"
|
|
||||||
:columns="columns"
|
|
||||||
:data="loadData"
|
|
||||||
:rowKey="record=>record.id"
|
|
||||||
:rowSelection="options.rowSelection"
|
|
||||||
:scroll="scroll"
|
|
||||||
:showPagination="showPagination"
|
|
||||||
ref="table"
|
|
||||||
size="middle"
|
|
||||||
>
|
|
||||||
<div slot="filterDropdown" slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }" class="custom-filter-dropdown">
|
|
||||||
<a-input
|
|
||||||
v-ant-ref="c => searchInput = c"
|
|
||||||
:placeholder="`Search ${column.dataIndex}`"
|
|
||||||
:value="selectedKeys[0]"
|
|
||||||
@change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
|
|
||||||
@pressEnter="() => handleSearch(selectedKeys, confirm, column)"
|
|
||||||
style="width: 188px; margin-bottom: 8px; display: block;"
|
|
||||||
/>
|
|
||||||
<a-button
|
|
||||||
type="primary"
|
|
||||||
@click="() => handleSearch(selectedKeys, confirm, column)"
|
|
||||||
icon="search"
|
|
||||||
size="small"
|
|
||||||
style="width: 90px; margin-right: 8px"
|
|
||||||
>Search</a-button>
|
|
||||||
<a-button
|
|
||||||
@click="() => handleReset(clearFilters, column)"
|
|
||||||
size="small"
|
|
||||||
style="width: 90px"
|
|
||||||
>Reset</a-button>
|
|
||||||
</div>
|
|
||||||
<a-icon slot="filterIcon" slot-scope="filtered" type="search" :style="{ color: filtered ? '#108ee9' : undefined }" />
|
|
||||||
|
|
||||||
<template slot="nameSearchRender" slot-scope="text">
|
|
||||||
<span v-if="columnSearchText.name">
|
|
||||||
<template v-for="(fragment, i) in text.toString().split(new RegExp(`(?<=${columnSearchText.name})|(?=${columnSearchText.name})`, 'i'))">
|
|
||||||
<mark v-if="fragment.toLowerCase() === columnSearchText.name.toLowerCase()" :key="i" class="highlight">{{ fragment }}</mark>
|
|
||||||
<template v-else>{{ fragment }}</template>
|
|
||||||
</template>
|
|
||||||
</span>
|
|
||||||
<template v-else>{{ text }}</template>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template slot="aliasSearchRender" slot-scope="text">
|
|
||||||
<span v-if="columnSearchText.alias">
|
|
||||||
<template v-for="(fragment, i) in text.toString().split(new RegExp(`(?<=${columnSearchText.alias})|(?=${columnSearchText.alias})`, 'i'))">
|
|
||||||
<mark v-if="fragment.toLowerCase() === columnSearchText.alias.toLowerCase()" :key="i" class="highlight">{{ fragment }}</mark>
|
|
||||||
<template v-else>{{ fragment }}</template>
|
|
||||||
</template>
|
|
||||||
</span>
|
|
||||||
<template v-else>{{ text }}</template>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<span slot="is_check" slot-scope="text">
|
|
||||||
<a-icon type="check" v-if="text"/>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span slot="action" slot-scope="text, record">
|
|
||||||
<template>
|
|
||||||
<a @click="handleEdit(record)">编辑</a>
|
|
||||||
<a-divider type="vertical"/>
|
|
||||||
<a @click="handleDelete(record)">删除</a>
|
|
||||||
</template>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
</s-table>
|
|
||||||
<AttributeForm ref="attributeForm" :handleOk="handleOk"> </AttributeForm>
|
|
||||||
|
|
||||||
<a-drawer
|
|
||||||
:closable="false"
|
|
||||||
:title="batchBindAttrAction.drawerTitle"
|
|
||||||
:visible="batchBindAttrAction.drawerVisible"
|
|
||||||
@close="onBatchBindAttrActionClose"
|
|
||||||
placement="right"
|
|
||||||
width="30%"
|
|
||||||
>
|
|
||||||
<a-form :form="form" :layout="formLayout" @submit="handleBatchUpdateSubmit">
|
|
||||||
|
|
||||||
<a-transfer
|
|
||||||
:dataSource="transferData"
|
|
||||||
:render="item=>item.title"
|
|
||||||
:selectedKeys="transferSelectedKeys"
|
|
||||||
:targetKeys="transferTargetKeys"
|
|
||||||
:titles="['当前项', '已选项']"
|
|
||||||
:listStyle="{
|
|
||||||
height: '600px',
|
|
||||||
width: '40%',
|
|
||||||
}"
|
|
||||||
showSearch
|
|
||||||
@change="handleTransferChange"
|
|
||||||
@scroll="handleTransferScroll"
|
|
||||||
@selectChange="handleTransferSelectChange"
|
|
||||||
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div
|
|
||||||
:style="{
|
|
||||||
position: 'absolute',
|
|
||||||
left: 0,
|
|
||||||
bottom: 0,
|
|
||||||
width: '100%',
|
|
||||||
borderTop: '1px solid #e9e9e9',
|
|
||||||
padding: '0.8rem 1rem',
|
|
||||||
background: '#fff',
|
|
||||||
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<a-button @click="handleBatchUpdateSubmit" type="primary" style="margin-right: 1rem">确定</a-button>
|
|
||||||
<a-button @click="onBatchBindAttrActionClose">取消</a-button>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</a-form>
|
|
||||||
|
|
||||||
</a-drawer>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import {
|
|
||||||
createCITypeAttributes,
|
|
||||||
deleteCITypeAttributesById,
|
|
||||||
getCITypeAttributesByName,
|
|
||||||
searchAttributes
|
|
||||||
} from '@/api/cmdb/CITypeAttr'
|
|
||||||
import { STable } from '@/components'
|
|
||||||
import { mixin, mixinDevice } from '@/utils/mixin'
|
|
||||||
import AttributeForm from '@/views/cmdb/attributes/module/attributeForm'
|
|
||||||
import { valueTypeMap } from '@/views/cmdb/attributes/module/const'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'AttributesTable',
|
|
||||||
mixins: [mixin, mixinDevice],
|
|
||||||
components: {
|
|
||||||
STable,
|
|
||||||
AttributeForm
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
form: this.$form.createForm(this),
|
|
||||||
scroll: { x: 1300, y: 600 },
|
|
||||||
singleAttrAction: {
|
|
||||||
btnName: '新增属性',
|
|
||||||
drawerTitle: '新增属性',
|
|
||||||
drawerVisible: false
|
|
||||||
},
|
|
||||||
batchBindAttrAction: {
|
|
||||||
btnName: '绑定属性',
|
|
||||||
drawerTitle: '绑定属性',
|
|
||||||
drawerVisible: false
|
|
||||||
},
|
|
||||||
|
|
||||||
CITypeName: this.$route.params.CITypeName,
|
|
||||||
CITypeId: this.$route.params.CITypeId,
|
|
||||||
|
|
||||||
formLayout: 'vertical',
|
|
||||||
|
|
||||||
attributes: [],
|
|
||||||
allAttributes: [],
|
|
||||||
transferData: [],
|
|
||||||
transferTargetKeys: [],
|
|
||||||
transferSelectedKeys: [],
|
|
||||||
originTargetKeys: [],
|
|
||||||
|
|
||||||
ValueTypeMap: valueTypeMap,
|
|
||||||
pagination: {
|
|
||||||
defaultPageSize: 20
|
|
||||||
},
|
|
||||||
showPagination: false,
|
|
||||||
columnSearchText: {
|
|
||||||
alias: '',
|
|
||||||
name: ''
|
|
||||||
},
|
|
||||||
columns: [
|
|
||||||
{
|
|
||||||
title: '名称',
|
|
||||||
dataIndex: 'alias',
|
|
||||||
sorter: false,
|
|
||||||
width: 200,
|
|
||||||
scopedSlots: {
|
|
||||||
customRender: 'aliasSearchRender',
|
|
||||||
filterDropdown: 'filterDropdown',
|
|
||||||
filterIcon: 'filterIcon'
|
|
||||||
},
|
|
||||||
onFilter: (value, record) => record.alias.toLowerCase().includes(value.toLowerCase()),
|
|
||||||
onFilterDropdownVisibleChange: (visible) => {
|
|
||||||
if (visible) {
|
|
||||||
setTimeout(() => {
|
|
||||||
this.searchInput.focus()
|
|
||||||
}, 0)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '英文名',
|
|
||||||
dataIndex: 'name',
|
|
||||||
sorter: false,
|
|
||||||
width: 200,
|
|
||||||
scopedSlots: {
|
|
||||||
customRender: 'nameSearchRender',
|
|
||||||
filterDropdown: 'filterDropdown',
|
|
||||||
filterIcon: 'filterIcon'
|
|
||||||
},
|
|
||||||
onFilter: (value, record) => record.name.toLowerCase().includes(value.toLowerCase()),
|
|
||||||
onFilterDropdownVisibleChange: (visible) => {
|
|
||||||
if (visible) {
|
|
||||||
setTimeout(() => {
|
|
||||||
this.searchInput.focus()
|
|
||||||
}, 0)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '类型',
|
|
||||||
dataIndex: 'value_type',
|
|
||||||
sorter: false,
|
|
||||||
width: 100,
|
|
||||||
scopedSlots: { customRender: 'value_type' },
|
|
||||||
customRender: (text) => valueTypeMap[text]
|
|
||||||
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '唯一',
|
|
||||||
dataIndex: 'is_unique',
|
|
||||||
width: 50,
|
|
||||||
sorter: false,
|
|
||||||
scopedSlots: { customRender: 'is_check' }
|
|
||||||
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '索引',
|
|
||||||
dataIndex: 'is_index',
|
|
||||||
sorter: false,
|
|
||||||
width: 50,
|
|
||||||
scopedSlots: { customRender: 'is_check' }
|
|
||||||
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '排序',
|
|
||||||
dataIndex: 'is_sortable',
|
|
||||||
sorter: false,
|
|
||||||
width: 50,
|
|
||||||
scopedSlots: { customRender: 'is_check' }
|
|
||||||
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '链接',
|
|
||||||
dataIndex: 'is_link',
|
|
||||||
sorter: false,
|
|
||||||
width: 50,
|
|
||||||
scopedSlots: { customRender: 'is_check' }
|
|
||||||
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '密码',
|
|
||||||
dataIndex: 'is_password',
|
|
||||||
sorter: false,
|
|
||||||
width: 50,
|
|
||||||
scopedSlots: { customRender: 'is_check' }
|
|
||||||
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '列表',
|
|
||||||
dataIndex: 'is_list',
|
|
||||||
sorter: false,
|
|
||||||
width: 50,
|
|
||||||
scopedSlots: { customRender: 'is_check' }
|
|
||||||
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '必须',
|
|
||||||
dataIndex: 'is_required',
|
|
||||||
sorter: false,
|
|
||||||
width: 50,
|
|
||||||
scopedSlots: { customRender: 'is_check' }
|
|
||||||
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '默认显示',
|
|
||||||
dataIndex: 'default_show',
|
|
||||||
sorter: false,
|
|
||||||
scopedSlots: { customRender: 'is_check' }
|
|
||||||
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '操作',
|
|
||||||
dataIndex: 'action',
|
|
||||||
width: 100,
|
|
||||||
fixed: 'right',
|
|
||||||
scopedSlots: { customRender: 'action' }
|
|
||||||
}
|
|
||||||
],
|
|
||||||
loadData: parameter => {
|
|
||||||
console.log('loadData.parameter', parameter)
|
|
||||||
return getCITypeAttributesByName(this.CITypeName)
|
|
||||||
.then(res => {
|
|
||||||
this.attributes = res.attributes
|
|
||||||
this.setTransferData()
|
|
||||||
|
|
||||||
return {
|
|
||||||
data: res.attributes
|
|
||||||
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
mdl: {},
|
|
||||||
// 高级搜索 展开/关闭
|
|
||||||
advanced: false,
|
|
||||||
// 查询参数
|
|
||||||
queryParam: {},
|
|
||||||
// 表头
|
|
||||||
|
|
||||||
selectedRowKeys: [],
|
|
||||||
selectedRows: [],
|
|
||||||
|
|
||||||
// custom table alert & rowSelection
|
|
||||||
options: {
|
|
||||||
alert: false,
|
|
||||||
rowSelection: null
|
|
||||||
},
|
|
||||||
optionAlertShow: false
|
|
||||||
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
beforeCreate () {
|
|
||||||
},
|
|
||||||
|
|
||||||
computed: {
|
|
||||||
|
|
||||||
removeTransferKeys () {
|
|
||||||
const { originTargetKeys, transferTargetKeys } = this
|
|
||||||
return originTargetKeys.filter(v => !originTargetKeys.includes(v) || !transferTargetKeys.includes(v))
|
|
||||||
},
|
|
||||||
|
|
||||||
addTransferKeys () {
|
|
||||||
const { originTargetKeys, transferTargetKeys } = this
|
|
||||||
return transferTargetKeys.filter(v => !transferTargetKeys.includes(v) || !originTargetKeys.includes(v))
|
|
||||||
},
|
|
||||||
formItemLayout () {
|
|
||||||
const { formLayout } = this
|
|
||||||
return formLayout === 'horizontal' ? {
|
|
||||||
labelCol: { span: 4 },
|
|
||||||
wrapperCol: { span: 14 }
|
|
||||||
} : {}
|
|
||||||
},
|
|
||||||
|
|
||||||
horizontalFormItemLayout () {
|
|
||||||
return {
|
|
||||||
labelCol: { span: 5 },
|
|
||||||
wrapperCol: { span: 12 }
|
|
||||||
}
|
|
||||||
},
|
|
||||||
buttonItemLayout () {
|
|
||||||
const { formLayout } = this
|
|
||||||
return formLayout === 'horizontal' ? {
|
|
||||||
wrapperCol: { span: 14, offset: 4 }
|
|
||||||
} : {}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
this.getAttributes()
|
|
||||||
this.setScrollY()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handleSearch (selectedKeys, confirm, column) {
|
|
||||||
confirm()
|
|
||||||
this.columnSearchText[column.dataIndex] = selectedKeys[0]
|
|
||||||
},
|
|
||||||
|
|
||||||
handleReset (clearFilters, column) {
|
|
||||||
clearFilters()
|
|
||||||
this.columnSearchText[column.dataIndex] = ''
|
|
||||||
},
|
|
||||||
|
|
||||||
getAttributes () {
|
|
||||||
searchAttributes().then(res => {
|
|
||||||
this.allAttributes = res.attributes
|
|
||||||
})
|
|
||||||
},
|
|
||||||
setScrollY () {
|
|
||||||
this.scroll.y = window.innerHeight - this.$refs.table.$el.offsetTop - 250
|
|
||||||
},
|
|
||||||
|
|
||||||
setTransferData () {
|
|
||||||
const data = []
|
|
||||||
const target = []
|
|
||||||
|
|
||||||
this.attributes.forEach(i => target.push(i.id.toString()))
|
|
||||||
|
|
||||||
this.allAttributes.forEach(i => data.push({
|
|
||||||
key: i.id.toString(),
|
|
||||||
title: i.alias,
|
|
||||||
description: ''
|
|
||||||
}))
|
|
||||||
|
|
||||||
this.transferData = data
|
|
||||||
this.transferTargetKeys = target
|
|
||||||
this.originTargetKeys = target
|
|
||||||
},
|
|
||||||
|
|
||||||
handleTransferChange (nextTargetKeys, direction, moveKeys) {
|
|
||||||
this.transferTargetKeys = nextTargetKeys
|
|
||||||
|
|
||||||
console.log('targetKeys: ', nextTargetKeys)
|
|
||||||
console.log('direction: ', direction)
|
|
||||||
console.log('moveKeys: ', moveKeys)
|
|
||||||
console.log('addTransferKeys: ', this.addTransferKeys)
|
|
||||||
console.log('removeTransferKeys: ', this.removeTransferKeys)
|
|
||||||
},
|
|
||||||
|
|
||||||
handleTransferSelectChange (sourceSelectedKeys, targetSelectedKeys) {
|
|
||||||
this.transferSelectedKeys = [...sourceSelectedKeys, ...targetSelectedKeys]
|
|
||||||
console.log('sourceSelectedKeys: ', sourceSelectedKeys)
|
|
||||||
console.log('targetSelectedKeys: ', targetSelectedKeys)
|
|
||||||
},
|
|
||||||
handleTransferScroll (direction, e) {
|
|
||||||
console.log('direction:', direction)
|
|
||||||
console.log('target:', e.target)
|
|
||||||
},
|
|
||||||
|
|
||||||
callback (key) {
|
|
||||||
console.log(key)
|
|
||||||
},
|
|
||||||
|
|
||||||
handleEdit (record) {
|
|
||||||
this.$refs.attributeForm.handleEdit(record)
|
|
||||||
},
|
|
||||||
handleDelete (record) {
|
|
||||||
this.unbindAttribute([record.id])
|
|
||||||
.then(res => {
|
|
||||||
this.$message.success(`删除成功`)
|
|
||||||
this.handleOk()
|
|
||||||
}).catch(err => this.requestFailed(err))
|
|
||||||
},
|
|
||||||
handleOk () {
|
|
||||||
this.$refs.table.refresh()
|
|
||||||
},
|
|
||||||
handleCreate () {
|
|
||||||
this.$refs.attributeForm.handleCreate()
|
|
||||||
},
|
|
||||||
|
|
||||||
handleUpdate () {
|
|
||||||
this.setTransferData()
|
|
||||||
this.batchBindAttrAction.drawerVisible = true
|
|
||||||
},
|
|
||||||
|
|
||||||
onBatchBindAttrActionClose () {
|
|
||||||
this.batchBindAttrAction.drawerVisible = false
|
|
||||||
},
|
|
||||||
|
|
||||||
onChange (e) {
|
|
||||||
console.log(`checked = ${e}`)
|
|
||||||
},
|
|
||||||
|
|
||||||
handleBatchUpdateSubmit (e) {
|
|
||||||
e.preventDefault()
|
|
||||||
const p = []
|
|
||||||
if (this.addTransferKeys && this.addTransferKeys.length) {
|
|
||||||
p.push(this.bindAttribute(this.addTransferKeys))
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.removeTransferKeys && this.removeTransferKeys.length) {
|
|
||||||
p.push(this.unbindAttribute(this.removeTransferKeys))
|
|
||||||
}
|
|
||||||
const that = this
|
|
||||||
Promise.all(p).then(function (values) {
|
|
||||||
console.log(values)
|
|
||||||
that.$message.success(`修改成功`)
|
|
||||||
that.handleOk()
|
|
||||||
that.onBatchBindAttrActionClose()
|
|
||||||
}).catch(err => that.requestFailed(err))
|
|
||||||
},
|
|
||||||
|
|
||||||
bindAttribute (attrIds) {
|
|
||||||
return createCITypeAttributes(this.CITypeId, { attr_id: attrIds })
|
|
||||||
},
|
|
||||||
unbindAttribute (attrIds) {
|
|
||||||
return deleteCITypeAttributesById(this.CITypeId, { attr_id: attrIds })
|
|
||||||
},
|
|
||||||
|
|
||||||
requestFailed (err) {
|
|
||||||
const msg = ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试'
|
|
||||||
this.$message.error(`${msg}`)
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
},
|
|
||||||
watch: {}
|
|
||||||
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.search {
|
|
||||||
margin-bottom: 54px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fold {
|
|
||||||
width: calc(100% - 216px);
|
|
||||||
display: inline-block
|
|
||||||
}
|
|
||||||
|
|
||||||
.operator {
|
|
||||||
margin-bottom: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-btn {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
.ant-transfer {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fixedWidthTable table {
|
|
||||||
table-layout: fixed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fixedWidthTable .ant-table-tbody > tr > td {
|
|
||||||
word-wrap: break-word;
|
|
||||||
word-break: break-all;
|
|
||||||
}
|
|
||||||
.custom-filter-dropdown {
|
|
||||||
padding: 8px;
|
|
||||||
border-radius: 4px;
|
|
||||||
background: #fff;
|
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
|
|
||||||
}
|
|
||||||
|
|
||||||
.highlight {
|
|
||||||
background-color: rgb(255, 192, 105);
|
|
||||||
padding: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 900px) {
|
|
||||||
.fold {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,349 +0,0 @@
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<a-button class="action-btn" @click="handleCreate" type="primary">批量修改</a-button>
|
|
||||||
<s-table
|
|
||||||
v-once
|
|
||||||
:alert="options.alert"
|
|
||||||
:columns="columns"
|
|
||||||
:data="loadData"
|
|
||||||
:pagination="pagination"
|
|
||||||
:rowKey="record=>record.id"
|
|
||||||
:rowSelection="options.rowSelection"
|
|
||||||
:showPagination="showPagination"
|
|
||||||
ref="table"
|
|
||||||
size="middle"
|
|
||||||
:scroll="scroll"
|
|
||||||
>
|
|
||||||
|
|
||||||
<span slot="is_check" slot-scope="text">
|
|
||||||
<a-icon type="check" v-if="text"/>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span slot="action" slot-scope="text, record">
|
|
||||||
<template>
|
|
||||||
<a @click="handleDelete(record)">删除</a>
|
|
||||||
</template>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
</s-table>
|
|
||||||
<a-drawer
|
|
||||||
:closable="false"
|
|
||||||
:title="drawerTitle"
|
|
||||||
:visible="visible"
|
|
||||||
@close="onClose"
|
|
||||||
placement="right"
|
|
||||||
width="30%"
|
|
||||||
>
|
|
||||||
<a-form :form="form" :layout="formLayout" @submit="handleSubmit">
|
|
||||||
|
|
||||||
<a-transfer
|
|
||||||
:dataSource="transferData"
|
|
||||||
:render="item=>item.title"
|
|
||||||
:selectedKeys="transferSelectedKeys"
|
|
||||||
:targetKeys="transferTargetKeys"
|
|
||||||
:titles="['当前项', '已选项']"
|
|
||||||
:listStyle="{
|
|
||||||
height: '600px',
|
|
||||||
width: '40%',
|
|
||||||
|
|
||||||
}"
|
|
||||||
showSearch
|
|
||||||
@change="handleTransferChange"
|
|
||||||
@scroll="handleTransferScroll"
|
|
||||||
@selectChange="handleTransferSelectChange"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div
|
|
||||||
:style="{
|
|
||||||
position: 'absolute',
|
|
||||||
left: 0,
|
|
||||||
bottom: 0,
|
|
||||||
width: '100%',
|
|
||||||
borderTop: '1px solid #e9e9e9',
|
|
||||||
padding: '0.8rem 1rem',
|
|
||||||
background: '#fff',
|
|
||||||
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<a-button @click="handleSubmit" type="primary" style="margin-right: 1rem">确定</a-button>
|
|
||||||
<a-button @click="onClose">取消</a-button>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</a-form>
|
|
||||||
</a-drawer>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
import { STable } from '@/components'
|
|
||||||
import { getCITypeAttributesByName, updateCITypeAttributesById } from '@/api/cmdb/CITypeAttr'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'CheckTable',
|
|
||||||
components: {
|
|
||||||
STable
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
CITypeId: this.$route.params.CITypeId,
|
|
||||||
CITypeName: this.$route.params.CITypeName,
|
|
||||||
|
|
||||||
form: this.$form.createForm(this),
|
|
||||||
scroll: { x: 900, y: 600 },
|
|
||||||
|
|
||||||
visible: false,
|
|
||||||
|
|
||||||
drawerTitle: '',
|
|
||||||
|
|
||||||
formLayout: 'vertical',
|
|
||||||
|
|
||||||
transferData: [],
|
|
||||||
transferTargetKeys: [],
|
|
||||||
transferSelectedKeys: [],
|
|
||||||
originTargetKeys: [],
|
|
||||||
|
|
||||||
attributes: [],
|
|
||||||
|
|
||||||
pagination: {
|
|
||||||
defaultPageSize: 20
|
|
||||||
},
|
|
||||||
showPagination: false,
|
|
||||||
columns: [
|
|
||||||
{
|
|
||||||
title: '属性名',
|
|
||||||
dataIndex: 'alias',
|
|
||||||
sorter: false,
|
|
||||||
width: 200,
|
|
||||||
scopedSlots: { customRender: 'alias' }
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '属性英文名',
|
|
||||||
dataIndex: 'name',
|
|
||||||
sorter: false,
|
|
||||||
width: 200,
|
|
||||||
scopedSlots: { customRender: 'name' }
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '必须',
|
|
||||||
dataIndex: 'is_required',
|
|
||||||
sorter: false,
|
|
||||||
scopedSlots: { customRender: 'is_check' }
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
title: '操作',
|
|
||||||
dataIndex: 'action',
|
|
||||||
width: 100,
|
|
||||||
fixed: 'right',
|
|
||||||
scopedSlots: { customRender: 'action' }
|
|
||||||
}
|
|
||||||
],
|
|
||||||
loadData: parameter => {
|
|
||||||
console.log('loadData.parameter', parameter)
|
|
||||||
return getCITypeAttributesByName(this.CITypeName)
|
|
||||||
.then(res => {
|
|
||||||
this.attributes = res.attributes
|
|
||||||
this.setTransferData()
|
|
||||||
|
|
||||||
return {
|
|
||||||
data: this.attributes.filter(o => o.is_required)
|
|
||||||
}
|
|
||||||
}).catch(err => this.requestFailed(err))
|
|
||||||
},
|
|
||||||
|
|
||||||
mdl: {},
|
|
||||||
// 高级搜索 展开/关闭
|
|
||||||
advanced: false,
|
|
||||||
// 查询参数
|
|
||||||
queryParam: {},
|
|
||||||
|
|
||||||
// custom table alert & rowSelection
|
|
||||||
options: {
|
|
||||||
alert: false,
|
|
||||||
rowSelection: null
|
|
||||||
},
|
|
||||||
optionAlertShow: false
|
|
||||||
|
|
||||||
}
|
|
||||||
},
|
|
||||||
beforeCreate () {
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
|
|
||||||
removeTransferKeys () {
|
|
||||||
const { originTargetKeys, transferTargetKeys } = this
|
|
||||||
return originTargetKeys.filter(v => !originTargetKeys.includes(v) || !transferTargetKeys.includes(v))
|
|
||||||
},
|
|
||||||
|
|
||||||
addTransferKeys () {
|
|
||||||
const { originTargetKeys, transferTargetKeys } = this
|
|
||||||
return transferTargetKeys.filter(v => !transferTargetKeys.includes(v) || !originTargetKeys.includes(v))
|
|
||||||
},
|
|
||||||
|
|
||||||
formItemLayout () {
|
|
||||||
const { formLayout } = this
|
|
||||||
return formLayout === 'horizontal' ? {
|
|
||||||
labelCol: { span: 4 },
|
|
||||||
wrapperCol: { span: 14 }
|
|
||||||
} : {}
|
|
||||||
},
|
|
||||||
|
|
||||||
horizontalFormItemLayout () {
|
|
||||||
return {
|
|
||||||
labelCol: { span: 4 },
|
|
||||||
wrapperCol: { span: 14 }
|
|
||||||
}
|
|
||||||
},
|
|
||||||
buttonItemLayout () {
|
|
||||||
const { formLayout } = this
|
|
||||||
return formLayout === 'horizontal' ? {
|
|
||||||
wrapperCol: { span: 14, offset: 4 }
|
|
||||||
} : {}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
|
|
||||||
setTransferData () {
|
|
||||||
const data = []
|
|
||||||
const target = []
|
|
||||||
this.attributes.forEach(
|
|
||||||
function (i) {
|
|
||||||
data.push({
|
|
||||||
key: i.id.toString(),
|
|
||||||
title: i.alias,
|
|
||||||
description: ''
|
|
||||||
})
|
|
||||||
if (i.is_required) {
|
|
||||||
target.push(i.id.toString())
|
|
||||||
}
|
|
||||||
}
|
|
||||||
)
|
|
||||||
this.transferData = data
|
|
||||||
this.transferTargetKeys = target
|
|
||||||
this.originTargetKeys = target
|
|
||||||
},
|
|
||||||
setScrollY () {
|
|
||||||
this.scroll.y = window.innerHeight - this.$refs.table.$el.offsetTop - 200
|
|
||||||
},
|
|
||||||
|
|
||||||
handleTransferChange (nextTargetKeys, direction, moveKeys) {
|
|
||||||
this.transferTargetKeys = nextTargetKeys
|
|
||||||
|
|
||||||
console.log('targetKeys: ', nextTargetKeys)
|
|
||||||
console.log('direction: ', direction)
|
|
||||||
console.log('moveKeys: ', moveKeys)
|
|
||||||
console.log('addTransferKeys: ', this.addTransferKeys)
|
|
||||||
console.log('removeTransferKeys: ', this.removeTransferKeys)
|
|
||||||
},
|
|
||||||
|
|
||||||
handleTransferSelectChange (sourceSelectedKeys, targetSelectedKeys) {
|
|
||||||
this.transferSelectedKeys = [...sourceSelectedKeys, ...targetSelectedKeys]
|
|
||||||
|
|
||||||
console.log('sourceSelectedKeys: ', sourceSelectedKeys)
|
|
||||||
console.log('targetSelectedKeys: ', targetSelectedKeys)
|
|
||||||
},
|
|
||||||
handleTransferScroll (direction, e) {
|
|
||||||
console.log('direction:', direction)
|
|
||||||
console.log('target:', e.target)
|
|
||||||
},
|
|
||||||
|
|
||||||
handleDelete (record) {
|
|
||||||
console.log(record)
|
|
||||||
|
|
||||||
updateCITypeAttributesById(this.CITypeId, { attributes: [{ attr_id: record.id, is_required: false }] })
|
|
||||||
.then(res => {
|
|
||||||
this.$message.success(`删除成功`)
|
|
||||||
this.handleOk()
|
|
||||||
})
|
|
||||||
.catch(err => this.requestFailed(err))
|
|
||||||
},
|
|
||||||
handleOk () {
|
|
||||||
this.$refs.table.refresh()
|
|
||||||
},
|
|
||||||
|
|
||||||
handleCreate () {
|
|
||||||
this.drawerTitle = '批量修改'
|
|
||||||
this.visible = true
|
|
||||||
},
|
|
||||||
|
|
||||||
onClose () {
|
|
||||||
this.form.resetFields()
|
|
||||||
this.visible = false
|
|
||||||
},
|
|
||||||
|
|
||||||
onChange (e) {
|
|
||||||
console.log(`checked = ${e.target.checked}`)
|
|
||||||
},
|
|
||||||
|
|
||||||
handleSubmit (e) {
|
|
||||||
e.preventDefault()
|
|
||||||
if (this.addTransferKeys || this.removeTransferKeys) {
|
|
||||||
const requestData = []
|
|
||||||
this.addTransferKeys.forEach(function (k) {
|
|
||||||
const data = { attr_id: k, is_required: true }
|
|
||||||
requestData.push(data)
|
|
||||||
})
|
|
||||||
|
|
||||||
this.removeTransferKeys.forEach(function (k) {
|
|
||||||
const data = { attr_id: k, is_required: false }
|
|
||||||
requestData.push(data)
|
|
||||||
})
|
|
||||||
|
|
||||||
const CITypeId = this.CITypeId
|
|
||||||
|
|
||||||
updateCITypeAttributesById(CITypeId, { attributes: requestData }).then(
|
|
||||||
res => {
|
|
||||||
this.$message.success(`更新成功`)
|
|
||||||
this.visible = false
|
|
||||||
this.handleOk()
|
|
||||||
}
|
|
||||||
).catch(err => {
|
|
||||||
this.requestFailed(err)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
requestFailed (err) {
|
|
||||||
const msg = ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试'
|
|
||||||
this.$message.error(`${msg}`)
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
watch: {}
|
|
||||||
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.search {
|
|
||||||
margin-bottom: 54px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fold {
|
|
||||||
width: calc(100% - 216px);
|
|
||||||
display: inline-block
|
|
||||||
}
|
|
||||||
|
|
||||||
.operator {
|
|
||||||
margin-bottom: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-btn {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
.ant-transfer {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
@media screen and (max-width: 900px) {
|
|
||||||
.fold {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,355 +0,0 @@
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<a-button class="action-btn" @click="handleCreate" type="primary">批量修改</a-button>
|
|
||||||
<s-table
|
|
||||||
:alert="options.alert"
|
|
||||||
:columns="columns"
|
|
||||||
:data="loadData"
|
|
||||||
:pagination="pagination"
|
|
||||||
:rowKey="record=>record.id"
|
|
||||||
:rowSelection="options.rowSelection"
|
|
||||||
:showPagination="showPagination"
|
|
||||||
ref="table"
|
|
||||||
size="middle"
|
|
||||||
:scroll="scroll"
|
|
||||||
|
|
||||||
>
|
|
||||||
<span slot="is_check" slot-scope="text">
|
|
||||||
<a-icon type="check" v-if="text"/>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span slot="action" slot-scope="text, record">
|
|
||||||
<template>
|
|
||||||
<a @click="handleDelete(record)">删除</a>
|
|
||||||
</template>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
</s-table>
|
|
||||||
<a-drawer
|
|
||||||
:closable="false"
|
|
||||||
:title="drawerTitle"
|
|
||||||
:visible="visible"
|
|
||||||
@close="onClose"
|
|
||||||
placement="right"
|
|
||||||
width="30%"
|
|
||||||
>
|
|
||||||
<a-form :form="form" :layout="formLayout" @submit="handleSubmit">
|
|
||||||
|
|
||||||
<a-transfer
|
|
||||||
:dataSource="transferData"
|
|
||||||
:render="item=>item.title"
|
|
||||||
:selectedKeys="transferSelectedKeys"
|
|
||||||
:targetKeys="transferTargetKeys"
|
|
||||||
:titles="['当前项', '已选项']"
|
|
||||||
:listStyle="{
|
|
||||||
height: '600px',
|
|
||||||
width: '42%'
|
|
||||||
|
|
||||||
}"
|
|
||||||
showSearch
|
|
||||||
@change="handleTransferChange"
|
|
||||||
@scroll="handleTransferScroll"
|
|
||||||
@selectChange="handleTransferSelectChange"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div
|
|
||||||
:style="{
|
|
||||||
position: 'absolute',
|
|
||||||
left: 0,
|
|
||||||
bottom: 0,
|
|
||||||
width: '100%',
|
|
||||||
borderTop: '1px solid #e9e9e9',
|
|
||||||
padding: '0.8rem 1rem',
|
|
||||||
background: '#fff',
|
|
||||||
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<a-button @click="handleSubmit" type="primary" style="margin-right: 1rem">确定</a-button>
|
|
||||||
<a-button @click="onClose">取消</a-button>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</a-form>
|
|
||||||
</a-drawer>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
import { STable } from '@/components'
|
|
||||||
import { getCITypeAttributesByName, updateCITypeAttributesById } from '@/api/cmdb/CITypeAttr'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'DefaultShowTable',
|
|
||||||
components: {
|
|
||||||
STable
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
|
|
||||||
CITypeId: this.$route.params.CITypeId,
|
|
||||||
CITypeName: this.$route.params.CITypeName,
|
|
||||||
|
|
||||||
form: this.$form.createForm(this),
|
|
||||||
scroll: { x: 1000, y: 600 },
|
|
||||||
|
|
||||||
visible: false,
|
|
||||||
|
|
||||||
drawerTitle: '',
|
|
||||||
|
|
||||||
formLayout: 'vertical',
|
|
||||||
|
|
||||||
transferData: [],
|
|
||||||
transferTargetKeys: [],
|
|
||||||
transferSelectedKeys: [],
|
|
||||||
originTargetKeys: [],
|
|
||||||
|
|
||||||
attributes: [],
|
|
||||||
|
|
||||||
pagination: {
|
|
||||||
defaultPageSize: 20
|
|
||||||
},
|
|
||||||
showPagination: false,
|
|
||||||
columns: [
|
|
||||||
{
|
|
||||||
title: '属性名',
|
|
||||||
dataIndex: 'alias',
|
|
||||||
sorter: false,
|
|
||||||
width: 200,
|
|
||||||
scopedSlots: { customRender: 'alias' }
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '属性英文名',
|
|
||||||
dataIndex: 'name',
|
|
||||||
sorter: false,
|
|
||||||
width: 200,
|
|
||||||
scopedSlots: { customRender: 'name' }
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '默认显示',
|
|
||||||
dataIndex: 'default_show',
|
|
||||||
sorter: false,
|
|
||||||
scopedSlots: { customRender: 'is_check' }
|
|
||||||
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '操作',
|
|
||||||
dataIndex: 'action',
|
|
||||||
width: 100,
|
|
||||||
fixed: 'right',
|
|
||||||
scopedSlots: { customRender: 'action' }
|
|
||||||
}
|
|
||||||
],
|
|
||||||
loadData: parameter => {
|
|
||||||
console.log('loadData.parameter', parameter)
|
|
||||||
return getCITypeAttributesByName(this.CITypeName)
|
|
||||||
.then(res => {
|
|
||||||
this.attributes = res.attributes
|
|
||||||
this.setTransferData()
|
|
||||||
|
|
||||||
return {
|
|
||||||
data: this.attributes.filter(o => o.default_show)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
mdl: {},
|
|
||||||
// 高级搜索 展开/关闭
|
|
||||||
advanced: false,
|
|
||||||
// 查询参数
|
|
||||||
queryParam: {},
|
|
||||||
// 表头
|
|
||||||
|
|
||||||
selectedRowKeys: [],
|
|
||||||
selectedRows: [],
|
|
||||||
|
|
||||||
// custom table alert & rowSelection
|
|
||||||
options: {
|
|
||||||
alert: false,
|
|
||||||
rowSelection: null
|
|
||||||
},
|
|
||||||
optionAlertShow: false
|
|
||||||
|
|
||||||
}
|
|
||||||
},
|
|
||||||
beforeCreate () {
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
|
|
||||||
removeTransferKeys () {
|
|
||||||
const { originTargetKeys, transferTargetKeys } = this
|
|
||||||
return originTargetKeys.filter(v => !originTargetKeys.includes(v) || !transferTargetKeys.includes(v))
|
|
||||||
},
|
|
||||||
|
|
||||||
addTransferKeys () {
|
|
||||||
const { originTargetKeys, transferTargetKeys } = this
|
|
||||||
return transferTargetKeys.filter(v => !transferTargetKeys.includes(v) || !originTargetKeys.includes(v))
|
|
||||||
},
|
|
||||||
|
|
||||||
formItemLayout () {
|
|
||||||
const { formLayout } = this
|
|
||||||
return formLayout === 'horizontal' ? {
|
|
||||||
labelCol: { span: 4 },
|
|
||||||
wrapperCol: { span: 14 }
|
|
||||||
} : {}
|
|
||||||
},
|
|
||||||
|
|
||||||
horizontalFormItemLayout () {
|
|
||||||
return {
|
|
||||||
labelCol: { span: 4 },
|
|
||||||
wrapperCol: { span: 14 }
|
|
||||||
}
|
|
||||||
},
|
|
||||||
buttonItemLayout () {
|
|
||||||
const { formLayout } = this
|
|
||||||
return formLayout === 'horizontal' ? {
|
|
||||||
wrapperCol: { span: 14, offset: 4 }
|
|
||||||
} : {}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
|
|
||||||
setTransferData () {
|
|
||||||
const data = []
|
|
||||||
const target = []
|
|
||||||
this.attributes.forEach(
|
|
||||||
function (i) {
|
|
||||||
data.push({
|
|
||||||
key: i.id.toString(),
|
|
||||||
title: i.alias,
|
|
||||||
description: ''
|
|
||||||
})
|
|
||||||
if (i.default_show) {
|
|
||||||
target.push(i.id.toString())
|
|
||||||
}
|
|
||||||
}
|
|
||||||
)
|
|
||||||
this.transferData = data
|
|
||||||
this.transferTargetKeys = target
|
|
||||||
this.originTargetKeys = target
|
|
||||||
},
|
|
||||||
setScrollY () {
|
|
||||||
this.scroll.y = window.innerHeight - this.$refs.table.$el.offsetTop - 250
|
|
||||||
},
|
|
||||||
|
|
||||||
handleTransferChange (nextTargetKeys, direction, moveKeys) {
|
|
||||||
this.transferTargetKeys = nextTargetKeys
|
|
||||||
|
|
||||||
console.log('targetKeys: ', nextTargetKeys)
|
|
||||||
console.log('direction: ', direction)
|
|
||||||
console.log('moveKeys: ', moveKeys)
|
|
||||||
console.log('addTransferKeys: ', this.addTransferKeys)
|
|
||||||
console.log('removeTransferKeys: ', this.removeTransferKeys)
|
|
||||||
},
|
|
||||||
|
|
||||||
handleTransferSelectChange (sourceSelectedKeys, targetSelectedKeys) {
|
|
||||||
this.transferSelectedKeys = [...sourceSelectedKeys, ...targetSelectedKeys]
|
|
||||||
console.log('sourceSelectedKeys: ', sourceSelectedKeys)
|
|
||||||
console.log('targetSelectedKeys: ', targetSelectedKeys)
|
|
||||||
},
|
|
||||||
handleTransferScroll (direction, e) {
|
|
||||||
console.log('direction:', direction)
|
|
||||||
console.log('target:', e.target)
|
|
||||||
},
|
|
||||||
|
|
||||||
handleDelete (record) {
|
|
||||||
console.log(record)
|
|
||||||
|
|
||||||
updateCITypeAttributesById(this.CITypeId, { attributes: [{ attr_id: record.id, default_show: false }] })
|
|
||||||
.then(res => {
|
|
||||||
this.$message.success(`删除成功`)
|
|
||||||
this.handleOk()
|
|
||||||
})
|
|
||||||
.catch(err => this.requestFailed(err))
|
|
||||||
},
|
|
||||||
handleOk () {
|
|
||||||
this.$refs.table.refresh()
|
|
||||||
},
|
|
||||||
onSelectChange (selectedRowKeys, selectedRows) {
|
|
||||||
this.selectedRowKeys = selectedRowKeys
|
|
||||||
this.selectedRows = selectedRows
|
|
||||||
},
|
|
||||||
|
|
||||||
handleCreate () {
|
|
||||||
this.drawerTitle = '批量修改'
|
|
||||||
this.visible = true
|
|
||||||
},
|
|
||||||
|
|
||||||
onClose () {
|
|
||||||
this.form.resetFields()
|
|
||||||
this.visible = false
|
|
||||||
},
|
|
||||||
|
|
||||||
onChange (e) {
|
|
||||||
console.log(`checked = ${e.target.checked}`)
|
|
||||||
},
|
|
||||||
|
|
||||||
handleSubmit (e) {
|
|
||||||
e.preventDefault()
|
|
||||||
if (this.addTransferKeys || this.removeTransferKeys) {
|
|
||||||
const requestData = []
|
|
||||||
this.addTransferKeys.forEach(function (k) {
|
|
||||||
const data = { 'attr_id': k, 'default_show': true }
|
|
||||||
requestData.push(data)
|
|
||||||
})
|
|
||||||
|
|
||||||
this.removeTransferKeys.forEach(function (k) {
|
|
||||||
const data = { 'attr_id': k, 'default_show': false }
|
|
||||||
requestData.push(data)
|
|
||||||
})
|
|
||||||
|
|
||||||
const CITypeId = this.CITypeId
|
|
||||||
|
|
||||||
updateCITypeAttributesById(CITypeId, { attributes: requestData }).then(
|
|
||||||
res => {
|
|
||||||
this.$message.success(`更新成功`)
|
|
||||||
this.visible = false
|
|
||||||
this.handleOk()
|
|
||||||
}
|
|
||||||
).catch(err => {
|
|
||||||
this.requestFailed(err)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
requestFailed (err) {
|
|
||||||
const msg = ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试'
|
|
||||||
this.$message.error(`${msg}`)
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
watch: {}
|
|
||||||
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.search {
|
|
||||||
margin-bottom: 54px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fold {
|
|
||||||
width: calc(100% - 216px);
|
|
||||||
display: inline-block
|
|
||||||
}
|
|
||||||
|
|
||||||
.operator {
|
|
||||||
margin-bottom: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-btn {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
.ant-transfer {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
@media screen and (max-width: 900px) {
|
|
||||||
.fold {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,89 +0,0 @@
|
||||||
<template>
|
|
||||||
<a-card :bordered="false">
|
|
||||||
|
|
||||||
<a-tabs defaultActiveKey="1">
|
|
||||||
<a-tab-pane key="1" tab="模型属性">
|
|
||||||
|
|
||||||
<AttributesTable></AttributesTable>
|
|
||||||
|
|
||||||
</a-tab-pane>
|
|
||||||
<a-tab-pane forceRender key="2" tab="模型关联">
|
|
||||||
<RelationTable :CITypeId="CITypeId" :CITypeName="CITypeName"></RelationTable>
|
|
||||||
|
|
||||||
</a-tab-pane>
|
|
||||||
|
|
||||||
<a-tab-pane forceRender key="3" tab="必须校验">
|
|
||||||
<CheckTable></CheckTable>
|
|
||||||
|
|
||||||
</a-tab-pane>
|
|
||||||
|
|
||||||
<a-tab-pane forceRender key="4" tab="默认显示属性">
|
|
||||||
<DefaultShowTable></DefaultShowTable>
|
|
||||||
|
|
||||||
</a-tab-pane>
|
|
||||||
|
|
||||||
<a-tab-pane forceRender key="5" tab="属性分组 & 排序">
|
|
||||||
<Group></Group>
|
|
||||||
|
|
||||||
</a-tab-pane>
|
|
||||||
</a-tabs>
|
|
||||||
|
|
||||||
</a-card>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { STable } from '@/components'
|
|
||||||
import AttributesTable from './attributesTable'
|
|
||||||
import RelationTable from './relationTable'
|
|
||||||
import CheckTable from './checkTable'
|
|
||||||
import DefaultShowTable from './defaultShowTable'
|
|
||||||
import Group from './group'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'CITypeDetail',
|
|
||||||
components: {
|
|
||||||
STable,
|
|
||||||
AttributesTable,
|
|
||||||
RelationTable,
|
|
||||||
CheckTable,
|
|
||||||
DefaultShowTable,
|
|
||||||
Group
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
CITypeId: this.$route.params.CITypeId,
|
|
||||||
CITypeName: this.$route.params.CITypeName
|
|
||||||
}
|
|
||||||
},
|
|
||||||
beforeCreate () {
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
},
|
|
||||||
watch: {}
|
|
||||||
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.search {
|
|
||||||
margin-bottom: 54px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fold {
|
|
||||||
width: calc(100% - 216px);
|
|
||||||
display: inline-block
|
|
||||||
}
|
|
||||||
|
|
||||||
.operator {
|
|
||||||
margin-bottom: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 900px) {
|
|
||||||
.fold {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,591 +0,0 @@
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div style="margin-bottom: 2rem">
|
|
||||||
<a-button type="primary" v-if="addGroupBtnVisible" @click="handleAddGroup">添加分组</a-button>
|
|
||||||
|
|
||||||
<template v-else>
|
|
||||||
<span>
|
|
||||||
<a-input
|
|
||||||
size="small"
|
|
||||||
type="text"
|
|
||||||
style="width: 10rem;margin-right: 0.5rem"
|
|
||||||
ref="addGroupInput"
|
|
||||||
v-model.trim="newGroupName" />
|
|
||||||
<a @click="handleCreateGroup" style="margin-right: 0.5rem">保存</a>
|
|
||||||
<a @click="handleCancelCreateGroup">取消</a>
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div :key="index" v-for="(CITypeGroup, index) in CITypeGroups">
|
|
||||||
<div class="group-header">
|
|
||||||
|
|
||||||
<template style="margin-bottom: 2rem;" v-if="!CITypeGroup.editable">
|
|
||||||
|
|
||||||
<span style="margin-right: 0.2rem">{{ CITypeGroup.name }}</span>
|
|
||||||
<span style="color: #c3cdd7; margin-right: 0.5rem">({{ CITypeGroup.attributes.length }})</span>
|
|
||||||
|
|
||||||
<a-button type="link" size="small" @click="handleEditGroupName(index, CITypeGroup)"><a-icon type="edit" /></a-button>
|
|
||||||
</template>
|
|
||||||
<template v-else>
|
|
||||||
<span style="font-size: 1rem">
|
|
||||||
<a-input
|
|
||||||
size="small"
|
|
||||||
type="text"
|
|
||||||
style="width: 15%;margin-right: 0.5rem"
|
|
||||||
ref="editGroupInput"
|
|
||||||
v-model.trim="CITypeGroup.name" />
|
|
||||||
<a @click="handleSaveGroupName(index, CITypeGroup)" style="margin-right: 0.5rem">保存</a>
|
|
||||||
<a @click="handleCancelGroupName(index, CITypeGroup)">取消</a>
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<div style="float: right">
|
|
||||||
|
|
||||||
<a-button-group size="small">
|
|
||||||
<a-tooltip>
|
|
||||||
<template slot="title">
|
|
||||||
上移
|
|
||||||
</template>
|
|
||||||
<a-button icon="arrow-up" size="small" @click="handleMoveGroup(index, index-1)" :disabled="index===0"/>
|
|
||||||
</a-tooltip>
|
|
||||||
|
|
||||||
<a-tooltip>
|
|
||||||
<template slot="title">
|
|
||||||
下移
|
|
||||||
</template>
|
|
||||||
<a-button icon="arrow-down" size="small" @click="handleMoveGroup(index, index+1)" :disabled="index===CITypeGroups.length-1" />
|
|
||||||
</a-tooltip>
|
|
||||||
|
|
||||||
<a-tooltip>
|
|
||||||
<template slot="title">
|
|
||||||
添加属性
|
|
||||||
</template>
|
|
||||||
<a-button icon="plus" size="small" @click="handleAddExistGroupAttr(index)"/>
|
|
||||||
</a-tooltip>
|
|
||||||
<a-tooltip>
|
|
||||||
<template slot="title">
|
|
||||||
删除分组
|
|
||||||
</template>
|
|
||||||
<a-button icon="delete" size="small" @click="handleDeleteGroup(CITypeGroup.id)" :disabled="CITypeGroup.attributes.length!==0" />
|
|
||||||
|
|
||||||
</a-tooltip>
|
|
||||||
|
|
||||||
</a-button-group>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="box"
|
|
||||||
style="min-height: 2rem; margin-bottom: 1.5rem;"
|
|
||||||
>
|
|
||||||
|
|
||||||
<draggable
|
|
||||||
v-model="CITypeGroup.attributes"
|
|
||||||
group="properties"
|
|
||||||
@start="drag=true"
|
|
||||||
@end="handleEnd"
|
|
||||||
@change="handleChange"
|
|
||||||
:filter="'.filter-empty'"
|
|
||||||
:animation="100"
|
|
||||||
tag="div"
|
|
||||||
style="width: 100%; display: flex;flex-flow: wrap"
|
|
||||||
>
|
|
||||||
|
|
||||||
<li
|
|
||||||
class="property-item"
|
|
||||||
v-for="item in CITypeGroup.attributes"
|
|
||||||
:key="item.id"
|
|
||||||
>
|
|
||||||
{{ item.alias }}
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<template
|
|
||||||
v-if="!CITypeGroup.attributes.length"
|
|
||||||
style="height: 2rem"
|
|
||||||
>
|
|
||||||
<li
|
|
||||||
class="property-item-empty"
|
|
||||||
@click="handleAddExistGroupAttr(index)"
|
|
||||||
style="">添加属性</li>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
</draggable>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="group-header">
|
|
||||||
|
|
||||||
<template>
|
|
||||||
|
|
||||||
<span style="margin-right: 0.2rem">更多属性</span>
|
|
||||||
<span style="color: #c3cdd7; margin-right: 0.5rem">({{ otherGroupAttributes.length }})</span>
|
|
||||||
</template>
|
|
||||||
<div style="float: right">
|
|
||||||
<a-button-group size="small">
|
|
||||||
<a-tooltip>
|
|
||||||
<template slot="title">
|
|
||||||
上移
|
|
||||||
</template>
|
|
||||||
<a-button icon="arrow-up" size="small" disabled/>
|
|
||||||
</a-tooltip>
|
|
||||||
|
|
||||||
<a-tooltip>
|
|
||||||
<template slot="title">
|
|
||||||
下移
|
|
||||||
</template>
|
|
||||||
<a-button icon="arrow-down" size="small" disabled />
|
|
||||||
</a-tooltip>
|
|
||||||
|
|
||||||
<a-tooltip>
|
|
||||||
<template slot="title">
|
|
||||||
添加属性
|
|
||||||
</template>
|
|
||||||
<a-button icon="plus" size="small" @click="handleAddOtherGroupAttr"/>
|
|
||||||
</a-tooltip>
|
|
||||||
<a-tooltip>
|
|
||||||
<template slot="title">
|
|
||||||
删除分组
|
|
||||||
</template>
|
|
||||||
<a-button icon="delete" size="small" disabled />
|
|
||||||
|
|
||||||
</a-tooltip>
|
|
||||||
|
|
||||||
</a-button-group>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="box">
|
|
||||||
<draggable
|
|
||||||
v-model="otherGroupAttributes"
|
|
||||||
group="properties"
|
|
||||||
@start="drag=true"
|
|
||||||
@end="handleEnd"
|
|
||||||
@change="handleChange"
|
|
||||||
:animation="0"
|
|
||||||
style="min-height: 2rem; width: 100%; display: flex; flex-flow: wrap">
|
|
||||||
|
|
||||||
<li
|
|
||||||
class="property-item"
|
|
||||||
v-for="item in otherGroupAttributes"
|
|
||||||
:key="item.id"
|
|
||||||
>
|
|
||||||
{{ item.alias }}
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<template
|
|
||||||
v-if="!otherGroupAttributes.length"
|
|
||||||
style="display: block"
|
|
||||||
>
|
|
||||||
<li
|
|
||||||
class="property-item-empty"
|
|
||||||
@click="handleAddOtherGroupAttr"
|
|
||||||
style="">添加属性</li>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
</draggable>
|
|
||||||
</div>
|
|
||||||
<a-modal
|
|
||||||
title="添加字段"
|
|
||||||
:width="'80%'"
|
|
||||||
v-model="modalVisible"
|
|
||||||
@ok="handleSubmit"
|
|
||||||
@cancel="modalVisible = false"
|
|
||||||
|
|
||||||
>
|
|
||||||
<a-form :form="form" @submit="handleSubmit">
|
|
||||||
|
|
||||||
<a-form-item
|
|
||||||
>
|
|
||||||
<a-checkbox-group
|
|
||||||
v-decorator="['checkedAttributes']"
|
|
||||||
style="width: 90%"
|
|
||||||
>
|
|
||||||
|
|
||||||
<a-row :gutter="{ xs: 8, sm: 16, md: 24}" type="flex" justify="start">
|
|
||||||
<a-col
|
|
||||||
v-for="attribute in attributes"
|
|
||||||
:key="attribute.id"
|
|
||||||
:sm="8"
|
|
||||||
:md="6"
|
|
||||||
:lg="4"
|
|
||||||
:xxl="3"
|
|
||||||
style="line-height: 1.8rem"
|
|
||||||
>
|
|
||||||
<a-checkbox
|
|
||||||
:value="attribute.id">
|
|
||||||
{{ attribute.alias }}
|
|
||||||
</a-checkbox>
|
|
||||||
|
|
||||||
</a-col>
|
|
||||||
|
|
||||||
</a-row>
|
|
||||||
</a-checkbox-group>
|
|
||||||
</a-form-item>
|
|
||||||
|
|
||||||
<a-form-item>
|
|
||||||
<a-input
|
|
||||||
name="groupId"
|
|
||||||
type="hidden"
|
|
||||||
v-decorator="['groupId']"
|
|
||||||
/>
|
|
||||||
</a-form-item>
|
|
||||||
|
|
||||||
<a-form-item>
|
|
||||||
<a-input
|
|
||||||
name="groupIndex"
|
|
||||||
type="hidden"
|
|
||||||
v-decorator="['groupIndex']"
|
|
||||||
/>
|
|
||||||
</a-form-item>
|
|
||||||
</a-form>
|
|
||||||
</a-modal>
|
|
||||||
|
|
||||||
</div >
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
import {
|
|
||||||
deleteCITypeGroupById,
|
|
||||||
getCITypeGroupById,
|
|
||||||
createCITypeGroupById,
|
|
||||||
updateCITypeGroupById
|
|
||||||
} from '@/api/cmdb/CIType'
|
|
||||||
import { getCITypeAttributesById, updateCITypeAttributesById } from '@/api/cmdb/CITypeAttr'
|
|
||||||
import draggable from 'vuedraggable'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'Group',
|
|
||||||
components: {
|
|
||||||
draggable
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
form: this.$form.createForm(this),
|
|
||||||
CITypeId: this.$route.params.CITypeId,
|
|
||||||
CITypeName: this.$route.params.CITypeName,
|
|
||||||
CITypeGroups: [],
|
|
||||||
attributes: [],
|
|
||||||
otherGroupAttributes: [],
|
|
||||||
addGroupBtnVisible: true,
|
|
||||||
newGroupName: '',
|
|
||||||
modalVisible: false
|
|
||||||
|
|
||||||
}
|
|
||||||
},
|
|
||||||
beforeCreate () {
|
|
||||||
},
|
|
||||||
created () {
|
|
||||||
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
this.getCITypeGroupData()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
setOtherGroupAttributes () {
|
|
||||||
const orderMap = this.attributes.reduce(function (map, obj) {
|
|
||||||
map[obj.id] = obj.order
|
|
||||||
return map
|
|
||||||
}, {})
|
|
||||||
|
|
||||||
const inGroupAttrKeys = this.CITypeGroups
|
|
||||||
.filter(x => x.attributes && x.attributes.length > 0)
|
|
||||||
.map(x => x.attributes).flat().map(x => x.id)
|
|
||||||
|
|
||||||
this.CITypeGroups.forEach(group => {
|
|
||||||
group.attributes.forEach(attribute => {
|
|
||||||
attribute.order = orderMap[attribute.id]
|
|
||||||
attribute.originOrder = attribute.order
|
|
||||||
attribute.originGroupName = group.name
|
|
||||||
})
|
|
||||||
group.originCount = group.attributes.length
|
|
||||||
group.editable = false
|
|
||||||
group.originOrder = group.order
|
|
||||||
group.originName = group.name
|
|
||||||
group.attributes = group.attributes.sort((a, b) => a.order - b.order)
|
|
||||||
})
|
|
||||||
|
|
||||||
this.otherGroupAttributes = this.attributes.filter(x => !inGroupAttrKeys.includes(x.id)).sort((a, b) => a.order - b.order)
|
|
||||||
this.attributes = this.attributes.sort((a, b) => a.order - b.order)
|
|
||||||
this.CITypeGroups = this.CITypeGroups.sort((a, b) => a.order - b.order)
|
|
||||||
this.otherGroupAttributes.forEach(attribute => {
|
|
||||||
attribute.originOrder = attribute.order
|
|
||||||
})
|
|
||||||
|
|
||||||
console.log('setOtherGroupAttributes', this.CITypeGroups, this.otherGroupAttributes)
|
|
||||||
},
|
|
||||||
getCITypeGroupData () {
|
|
||||||
const promises = [
|
|
||||||
getCITypeAttributesById(this.CITypeId),
|
|
||||||
getCITypeGroupById(this.CITypeId)
|
|
||||||
]
|
|
||||||
Promise.all(promises)
|
|
||||||
.then(values => {
|
|
||||||
this.attributes = values[0].attributes
|
|
||||||
this.CITypeGroups = values[1]
|
|
||||||
this.setOtherGroupAttributes()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
handleEditGroupName (index, CITypeGroup) {
|
|
||||||
CITypeGroup.editable = true
|
|
||||||
this.$set(this.CITypeGroups, index, CITypeGroup)
|
|
||||||
},
|
|
||||||
handleSaveGroupName (index, CITypeGroup) {
|
|
||||||
if (CITypeGroup.name === CITypeGroup.originName) {
|
|
||||||
this.handleCancelGroupName(index, CITypeGroup)
|
|
||||||
} else if (this.CITypeGroups.map(x => x.originName).includes(CITypeGroup.name)) {
|
|
||||||
this.$message.error('分组名称已存在')
|
|
||||||
} else {
|
|
||||||
updateCITypeGroupById(CITypeGroup.id, { name: CITypeGroup.name, attributes: CITypeGroup.attributes.map(x => x.id), order: CITypeGroup.order })
|
|
||||||
.then(res => {
|
|
||||||
CITypeGroup.editable = false
|
|
||||||
this.$set(this.CITypeGroups, index, CITypeGroup)
|
|
||||||
this.$message.success('修改成功')
|
|
||||||
})
|
|
||||||
.catch(err => this.requestFailed(err))
|
|
||||||
}
|
|
||||||
},
|
|
||||||
handleCancelGroupName (index, CITypeGroup) {
|
|
||||||
CITypeGroup.editable = false
|
|
||||||
this.$set(this.CITypeGroups, index, CITypeGroup)
|
|
||||||
},
|
|
||||||
|
|
||||||
handleCancel (CITypeGroup) {
|
|
||||||
CITypeGroup.editable = false
|
|
||||||
},
|
|
||||||
handleAddGroup () {
|
|
||||||
this.addGroupBtnVisible = false
|
|
||||||
},
|
|
||||||
handleCreateGroup () {
|
|
||||||
const groupOrders = this.CITypeGroups.map(x => x.order)
|
|
||||||
|
|
||||||
const maxGroupOrder = Math.max(groupOrders.length, groupOrders.length ? Math.max(...groupOrders) : 0)
|
|
||||||
|
|
||||||
console.log('groupOrder', groupOrders, 'maxOrder', maxGroupOrder)
|
|
||||||
createCITypeGroupById(this.CITypeId, { name: this.newGroupName, order: maxGroupOrder + 1 })
|
|
||||||
.then(res => {
|
|
||||||
this.addGroupBtnVisible = true
|
|
||||||
this.newGroupName = ''
|
|
||||||
this.getCITypeGroupData()
|
|
||||||
})
|
|
||||||
.catch(err => this.requestFailed(err))
|
|
||||||
},
|
|
||||||
handleCancelCreateGroup () {
|
|
||||||
this.addGroupBtnVisible = true
|
|
||||||
this.newGroupName = ''
|
|
||||||
},
|
|
||||||
|
|
||||||
handleMoveGroup (beforeIndex, afterIndex) {
|
|
||||||
const beforeGroup = this.CITypeGroups[beforeIndex]
|
|
||||||
this.CITypeGroups[beforeIndex] = this.CITypeGroups[afterIndex]
|
|
||||||
|
|
||||||
this.$set(this.CITypeGroups, beforeIndex, this.CITypeGroups[afterIndex])
|
|
||||||
this.$set(this.CITypeGroups, afterIndex, beforeGroup)
|
|
||||||
|
|
||||||
this.updatePropertyIndex()
|
|
||||||
},
|
|
||||||
handleAddExistGroupAttr (index) {
|
|
||||||
const group = this.CITypeGroups[index]
|
|
||||||
this.modalVisible = true
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.form.setFieldsValue({
|
|
||||||
checkedAttributes: group.attributes.map(x => x.id),
|
|
||||||
groupId: group.id,
|
|
||||||
groupIndex: index
|
|
||||||
|
|
||||||
})
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
handleAddOtherGroupAttr () {
|
|
||||||
this.modalVisible = true
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.form.setFieldsValue({
|
|
||||||
checkedAttributes: this.otherGroupAttributes.map(x => x.id),
|
|
||||||
groupId: null
|
|
||||||
|
|
||||||
})
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
handleSubmit (e) {
|
|
||||||
e.preventDefault()
|
|
||||||
this.form.validateFields((err, values) => {
|
|
||||||
if (!err) {
|
|
||||||
// eslint-disable-next-line no-console
|
|
||||||
console.log('Received values of form: ', values)
|
|
||||||
|
|
||||||
this.CITypeGroups.forEach(group => {
|
|
||||||
if (group.id === values.groupId) {
|
|
||||||
group.attributes = this.attributes.filter(x => values.checkedAttributes.includes(x.id))
|
|
||||||
} else {
|
|
||||||
group.attributes = group.attributes.filter(x => !values.checkedAttributes.includes(x.id))
|
|
||||||
}
|
|
||||||
})
|
|
||||||
// this.CITypeGroups = this.CITypeGroups
|
|
||||||
|
|
||||||
this.otherGroupAttributes.forEach(attributes => {
|
|
||||||
if (values.groupId === null) {
|
|
||||||
this.otherGroupAttributes = this.otherGroupAttributes.filter(x => values.checkedAttributes.includes(x.id))
|
|
||||||
} else {
|
|
||||||
this.otherGroupAttributes = this.otherGroupAttributes.filter(x => !values.checkedAttributes.includes(x.id))
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
console.log('add group attribute', this.otherGroupAttributes, this.CITypeGroups)
|
|
||||||
this.updatePropertyIndex()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
handleDeleteGroup (groupId) {
|
|
||||||
deleteCITypeGroupById(groupId)
|
|
||||||
.then(res => {
|
|
||||||
this.updatePropertyIndex()
|
|
||||||
})
|
|
||||||
.catch(err => this.requestFailed(err))
|
|
||||||
},
|
|
||||||
handleChange (e) {
|
|
||||||
console.log(e)
|
|
||||||
if (e.hasOwnProperty('moved')) {
|
|
||||||
this.shouldUpdatePropertyIndex = e.moved.newIndex !== e.moved.oldIndex
|
|
||||||
} else {
|
|
||||||
this.shouldUpdatePropertyIndex = true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
handleEnd (e) {
|
|
||||||
if (this.shouldUpdatePropertyIndex) {
|
|
||||||
this.updatePropertyIndex()
|
|
||||||
this.shouldUpdatePropertyIndex = false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
updatePropertyIndex () {
|
|
||||||
const attributes = []
|
|
||||||
let attributeOrder = 0
|
|
||||||
let groupOrder = 0
|
|
||||||
const promises = [
|
|
||||||
|
|
||||||
]
|
|
||||||
|
|
||||||
this.CITypeGroups.forEach(group => {
|
|
||||||
const groupName = group.name
|
|
||||||
|
|
||||||
let groupAttributes = []
|
|
||||||
let groupUpdate = false
|
|
||||||
group.order = groupOrder
|
|
||||||
|
|
||||||
group.attributes.forEach(attribute => {
|
|
||||||
groupAttributes.push(attribute.id)
|
|
||||||
|
|
||||||
if (attribute.originGroupName !== group.name || attribute.originOrder !== attributeOrder) {
|
|
||||||
attributes.push({ attr_id: attribute.id, order: attributeOrder })
|
|
||||||
groupUpdate = true
|
|
||||||
}
|
|
||||||
attributeOrder++
|
|
||||||
})
|
|
||||||
|
|
||||||
groupAttributes = new Set(groupAttributes)
|
|
||||||
if (group.originCount !== groupAttributes.size || groupUpdate || group.originOrder !== group.order) {
|
|
||||||
promises.push(updateCITypeGroupById(group.id, { name: groupName, attributes: [...groupAttributes], order: groupOrder }))
|
|
||||||
}
|
|
||||||
groupOrder++
|
|
||||||
})
|
|
||||||
|
|
||||||
this.otherGroupAttributes.forEach(attribute => {
|
|
||||||
if (attribute.originOrder !== attributeOrder) {
|
|
||||||
console.log('this attribute:', attribute.name, 'old order', attribute.originOrder, 'new order', attributeOrder)
|
|
||||||
attributes.push({ attr_id: attribute.id, order: attributeOrder })
|
|
||||||
}
|
|
||||||
|
|
||||||
attributeOrder++
|
|
||||||
})
|
|
||||||
|
|
||||||
if (attributes && attributes.length > 0) {
|
|
||||||
promises.unshift(updateCITypeAttributesById(this.CITypeId, { attributes: attributes }))
|
|
||||||
}
|
|
||||||
|
|
||||||
const that = this
|
|
||||||
Promise.all(promises)
|
|
||||||
.then(values => {
|
|
||||||
that.$message.success(`修改成功`)
|
|
||||||
that.getCITypeGroupData()
|
|
||||||
that.modalVisible = false
|
|
||||||
})
|
|
||||||
.catch(err => that.requestFailed(err))
|
|
||||||
},
|
|
||||||
requestFailed (err) {
|
|
||||||
const msg = ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试'
|
|
||||||
this.$message.error(`${msg}`)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {}
|
|
||||||
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.search {
|
|
||||||
margin-bottom: 54px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fold {
|
|
||||||
width: calc(100% - 216px);
|
|
||||||
display: inline-block
|
|
||||||
}
|
|
||||||
|
|
||||||
.operator {
|
|
||||||
margin-bottom: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.group-header {
|
|
||||||
font-size: 1.15rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.property-item {
|
|
||||||
width: calc(20% - 2rem);
|
|
||||||
margin:0.5rem 0.8rem;
|
|
||||||
border:1px solid #d9d9d9;
|
|
||||||
border-radius: 5px;
|
|
||||||
cursor: pointer;overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-align: center;
|
|
||||||
height: 2.5rem;
|
|
||||||
line-height: 2.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.property-item:hover{
|
|
||||||
border:1px dashed #40a9ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.property-item-empty {
|
|
||||||
width: calc(100% - 10px);
|
|
||||||
margin:0.5rem 0.8rem;
|
|
||||||
border:1px dashed #d9d9d9;
|
|
||||||
cursor: pointer;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-align: center;
|
|
||||||
height: 3.5rem;
|
|
||||||
line-height: 3.5rem;
|
|
||||||
color: #40a9ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 900px) {
|
|
||||||
.fold {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,291 +0,0 @@
|
||||||
<template>
|
|
||||||
<a-card :bordered="false">
|
|
||||||
|
|
||||||
<a-list
|
|
||||||
:dataSource="CITypes"
|
|
||||||
:grid="{ gutter: 20, column: 4 }"
|
|
||||||
class="ci-type-list"
|
|
||||||
itemLayout="horizontal"
|
|
||||||
size="small"
|
|
||||||
>
|
|
||||||
<a-list-item slot="renderItem" slot-scope="item">
|
|
||||||
|
|
||||||
<template v-if="item === null">
|
|
||||||
<a-button class="new-btn" type="dashed" @click="handleCreate">
|
|
||||||
<a-icon type="plus"/>
|
|
||||||
新增
|
|
||||||
</a-button>
|
|
||||||
</template>
|
|
||||||
<template v-else>
|
|
||||||
<a-card
|
|
||||||
:bodyStyle="{padding: '0.9rem 0.8rem'}"
|
|
||||||
:hoverable="true"
|
|
||||||
>
|
|
||||||
<template class="ant-card-actions" slot="actions">
|
|
||||||
<router-link
|
|
||||||
:to="{ name: 'ci_type_detail', params: { CITypeName: item.name, CITypeId: item.id }}"
|
|
||||||
>
|
|
||||||
<a-icon type="setting" />
|
|
||||||
</router-link>
|
|
||||||
<a-icon type="edit" @click="handleEdit(item)"/>
|
|
||||||
</template>
|
|
||||||
<a-card-meta>
|
|
||||||
<div slot="title" style="margin-bottom: 3px">{{ item.alias || item.name }}</div>
|
|
||||||
<a-avatar
|
|
||||||
:src="item.icon_url"
|
|
||||||
class="card-avatar"
|
|
||||||
size="large"
|
|
||||||
slot="avatar"
|
|
||||||
style="color: #7f9eb2; backgroundColor: #e1eef6; padding-left: -1rem;"
|
|
||||||
>
|
|
||||||
{{ item.name[0].toUpperCase() }}
|
|
||||||
</a-avatar>
|
|
||||||
<div class="meta-content" slot="description">{{ item.name }}</div>
|
|
||||||
</a-card-meta>
|
|
||||||
|
|
||||||
</a-card>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
</a-list-item>
|
|
||||||
|
|
||||||
</a-list>
|
|
||||||
|
|
||||||
<a-drawer
|
|
||||||
:closable="false"
|
|
||||||
:title="drawerTitle"
|
|
||||||
:visible="drawerVisible"
|
|
||||||
@close="onClose"
|
|
||||||
placement="right"
|
|
||||||
width="30%"
|
|
||||||
>
|
|
||||||
<a-form :form="form" :layout="formLayout" @submit="handleSubmit">
|
|
||||||
|
|
||||||
<a-form-item
|
|
||||||
:label-col="formItemLayout.labelCol"
|
|
||||||
:wrapper-col="formItemLayout.wrapperCol"
|
|
||||||
label="模型名(英文)"
|
|
||||||
>
|
|
||||||
<a-input
|
|
||||||
name="name"
|
|
||||||
placeholder="英文"
|
|
||||||
v-decorator="['name', {rules: [{ required: true, message: '请输入属性名'},{message: '不能以数字开头，可以是英文 数字以及下划线 (_)', pattern: RegExp('^(?!\\d)[a-zA-Z_0-9]+$')}]} ]"
|
|
||||||
/>
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item
|
|
||||||
:label-col="formItemLayout.labelCol"
|
|
||||||
:wrapper-col="formItemLayout.wrapperCol"
|
|
||||||
label="别名"
|
|
||||||
>
|
|
||||||
<a-input
|
|
||||||
name="alias"
|
|
||||||
v-decorator="['alias', {rules: []} ]"
|
|
||||||
/>
|
|
||||||
</a-form-item>
|
|
||||||
|
|
||||||
<a-form-item
|
|
||||||
:label-col="formItemLayout.labelCol"
|
|
||||||
:wrapper-col="formItemLayout.wrapperCol"
|
|
||||||
label="唯一标识*"
|
|
||||||
>
|
|
||||||
|
|
||||||
<a-select
|
|
||||||
name="unique_key"
|
|
||||||
style="width: 200px"
|
|
||||||
v-decorator="['unique_key', {rules: [{required: true}], } ]"
|
|
||||||
>
|
|
||||||
<a-select-option :key="item.id" :value="item.id" v-for="item in allAttributes">{{ item.alias || item.name }}</a-select-option>
|
|
||||||
</a-select>
|
|
||||||
|
|
||||||
</a-form-item>
|
|
||||||
|
|
||||||
<a-form-item>
|
|
||||||
<a-input
|
|
||||||
name="id"
|
|
||||||
type="hidden"
|
|
||||||
v-decorator="['id', {rules: []} ]"
|
|
||||||
/>
|
|
||||||
</a-form-item>
|
|
||||||
|
|
||||||
<div
|
|
||||||
:style="{
|
|
||||||
position: 'absolute',
|
|
||||||
left: 0,
|
|
||||||
bottom: 0,
|
|
||||||
width: '100%',
|
|
||||||
borderTop: '1px solid #e9e9e9',
|
|
||||||
padding: '0.8rem 1rem',
|
|
||||||
background: '#fff',
|
|
||||||
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<a-button @click="handleSubmit" type="primary" style="margin-right: 1rem">确定</a-button>
|
|
||||||
<a-button @click="onClose">取消</a-button>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</a-form>
|
|
||||||
</a-drawer>
|
|
||||||
|
|
||||||
</a-card>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
import { getCITypes, createCIType, updateCIType } from '@/api/cmdb/CIType'
|
|
||||||
import { searchAttributes } from '@/api/cmdb/CITypeAttr'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'CITypeList',
|
|
||||||
components: {},
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
CITypes: [],
|
|
||||||
allAttributes: [],
|
|
||||||
form: this.$form.createForm(this),
|
|
||||||
|
|
||||||
drawerVisible: false,
|
|
||||||
|
|
||||||
drawerTitle: '',
|
|
||||||
|
|
||||||
formLayout: 'vertical'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
|
|
||||||
formItemLayout () {
|
|
||||||
const { formLayout } = this
|
|
||||||
return formLayout === 'horizontal' ? {
|
|
||||||
labelCol: { span: 4 },
|
|
||||||
wrapperCol: { span: 14 }
|
|
||||||
} : {}
|
|
||||||
},
|
|
||||||
|
|
||||||
horizontalFormItemLayout () {
|
|
||||||
return {
|
|
||||||
labelCol: { span: 4 },
|
|
||||||
wrapperCol: { span: 14 }
|
|
||||||
}
|
|
||||||
},
|
|
||||||
buttonItemLayout () {
|
|
||||||
const { formLayout } = this
|
|
||||||
return formLayout === 'horizontal' ? {
|
|
||||||
wrapperCol: { span: 14, offset: 4 }
|
|
||||||
} : {}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
this.getCITypes()
|
|
||||||
this.getAttributes()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
getCITypes () {
|
|
||||||
getCITypes().then(res => {
|
|
||||||
this.CITypes = res.ci_types
|
|
||||||
this.CITypes.unshift(null)
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
getAttributes () {
|
|
||||||
searchAttributes().then(res => {
|
|
||||||
this.allAttributes = res.attributes
|
|
||||||
})
|
|
||||||
},
|
|
||||||
handleCreate () {
|
|
||||||
this.drawerTitle = '新增模型'
|
|
||||||
this.drawerVisible = true
|
|
||||||
},
|
|
||||||
onClose () {
|
|
||||||
this.form.resetFields()
|
|
||||||
this.drawerVisible = false
|
|
||||||
},
|
|
||||||
handleEdit (record) {
|
|
||||||
this.drawerTitle = '编辑模型'
|
|
||||||
this.drawerVisible = true
|
|
||||||
|
|
||||||
console.log(record)
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.form.setFieldsValue({
|
|
||||||
id: record.id,
|
|
||||||
alias: record.alias,
|
|
||||||
name: record.name,
|
|
||||||
unique_key: record.unique_id
|
|
||||||
|
|
||||||
})
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
handleSubmit (e) {
|
|
||||||
e.preventDefault()
|
|
||||||
this.form.validateFields((err, values) => {
|
|
||||||
if (!err) {
|
|
||||||
// eslint-disable-next-line no-console
|
|
||||||
console.log('Received values of form: ', values)
|
|
||||||
|
|
||||||
if (values.id) {
|
|
||||||
this.updateCIType(values.id, values)
|
|
||||||
} else {
|
|
||||||
this.createCIType(values)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
createCIType (data) {
|
|
||||||
createCIType(data)
|
|
||||||
.then(res => {
|
|
||||||
this.$message.success(`添加成功`)
|
|
||||||
this.drawerVisible = false
|
|
||||||
this.getCITypes()
|
|
||||||
})
|
|
||||||
.catch(err => this.requestFailed(err))
|
|
||||||
},
|
|
||||||
|
|
||||||
updateCIType (CITypeId, data) {
|
|
||||||
updateCIType(CITypeId, data)
|
|
||||||
.then(res => {
|
|
||||||
this.$message.success(`修改成功`)
|
|
||||||
this.drawerVisible = false
|
|
||||||
this.getCITypes()
|
|
||||||
})
|
|
||||||
.catch(err => this.requestFailed(err))
|
|
||||||
},
|
|
||||||
requestFailed (err) {
|
|
||||||
const msg = ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试'
|
|
||||||
this.$message.error(`${msg}`)
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
props: {},
|
|
||||||
watch: {}
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.search {
|
|
||||||
margin-bottom: 54px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fold {
|
|
||||||
width: calc(100% - 216px);
|
|
||||||
display: inline-block
|
|
||||||
}
|
|
||||||
|
|
||||||
.operator {
|
|
||||||
margin-bottom: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-btn {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.new-btn {
|
|
||||||
background-color: #fff;
|
|
||||||
border-radius: 2px;
|
|
||||||
width: 100%;
|
|
||||||
height: 7.5rem;
|
|
||||||
}
|
|
||||||
@media screen and (max-width: 900px) {
|
|
||||||
.fold {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,337 +0,0 @@
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<a-button class="action-btn" @click="handleCreate" type="primary">新增关系</a-button>
|
|
||||||
<s-table
|
|
||||||
:alert="options.alert"
|
|
||||||
:columns="columns"
|
|
||||||
:data="loadData"
|
|
||||||
:pagination="pagination"
|
|
||||||
:rowKey="record=>record.id"
|
|
||||||
:rowSelection="options.rowSelection"
|
|
||||||
:showPagination="showPagination"
|
|
||||||
ref="table"
|
|
||||||
size="middle"
|
|
||||||
:scroll="scroll"
|
|
||||||
>
|
|
||||||
|
|
||||||
<span slot="is_check" slot-scope="text">
|
|
||||||
<a-icon type="check" v-if="text"/>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span slot="action" slot-scope="text, record">
|
|
||||||
<template>
|
|
||||||
<a @click="handleDelete(record)">删除</a>
|
|
||||||
</template>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
</s-table>
|
|
||||||
<a-drawer
|
|
||||||
:closable="false"
|
|
||||||
:title="drawerTitle"
|
|
||||||
:visible="visible"
|
|
||||||
@close="onClose"
|
|
||||||
placement="right"
|
|
||||||
width="30%"
|
|
||||||
>
|
|
||||||
<a-form :form="form" :layout="formLayout" @submit="handleSubmit">
|
|
||||||
|
|
||||||
<a-form-item
|
|
||||||
:label-col="formItemLayout.labelCol"
|
|
||||||
:wrapper-col="formItemLayout.wrapperCol"
|
|
||||||
label="源模型"
|
|
||||||
>
|
|
||||||
<a-select
|
|
||||||
name="source_ci_type_id"
|
|
||||||
style="width: 120px"
|
|
||||||
v-decorator="['source_ci_type_id', {rules: [], } ]"
|
|
||||||
>
|
|
||||||
<a-select-option :value="CIType.id" :key="CIType.id" v-for="CIType in CITypes" v-if="CITypeId === CIType.id">{{ CIType.alias }}</a-select-option>
|
|
||||||
</a-select>
|
|
||||||
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item
|
|
||||||
:label-col="formItemLayout.labelCol"
|
|
||||||
:wrapper-col="formItemLayout.wrapperCol"
|
|
||||||
label="目标模型"
|
|
||||||
>
|
|
||||||
<a-select
|
|
||||||
name="ci_type_id"
|
|
||||||
style="width: 120px"
|
|
||||||
v-decorator="['ci_type_id', {rules: [], } ]"
|
|
||||||
>
|
|
||||||
<a-select-option :value="CIType.id" :key="CIType.id" v-for="CIType in CITypes">{{ CIType.alias }}</a-select-option>
|
|
||||||
</a-select>
|
|
||||||
</a-form-item>
|
|
||||||
|
|
||||||
<a-form-item
|
|
||||||
:label-col="formItemLayout.labelCol"
|
|
||||||
:wrapper-col="formItemLayout.wrapperCol"
|
|
||||||
label="关联关系"
|
|
||||||
>
|
|
||||||
<a-select
|
|
||||||
name="relation_type_id"
|
|
||||||
style="width: 120px"
|
|
||||||
v-decorator="['relation_type_id', {rules: [], } ]"
|
|
||||||
>
|
|
||||||
<a-select-option :value="relationType.id" :key="relationType.id" v-for="relationType in relationTypes">{{ relationType.name }}
|
|
||||||
</a-select-option>
|
|
||||||
</a-select>
|
|
||||||
|
|
||||||
</a-form-item>
|
|
||||||
|
|
||||||
<div
|
|
||||||
:style="{
|
|
||||||
position: 'absolute',
|
|
||||||
left: 0,
|
|
||||||
bottom: 0,
|
|
||||||
width: '100%',
|
|
||||||
borderTop: '1px solid #e9e9e9',
|
|
||||||
padding: '0.8rem 1rem',
|
|
||||||
background: '#fff',
|
|
||||||
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<a-button @click="handleSubmit" type="primary" style="margin-right: 1rem">确定</a-button>
|
|
||||||
<a-button @click="onClose">取消</a-button>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</a-form>
|
|
||||||
</a-drawer>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { createRelation, deleteRelation, getCITypeChildren, getRelationTypes } from '@/api/cmdb/CITypeRelation'
|
|
||||||
import { getCITypes } from '@/api/cmdb/CIType'
|
|
||||||
|
|
||||||
import { STable } from '@/components'
|
|
||||||
import PageView from '@/layouts/PageView'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'RelationTable',
|
|
||||||
components: {
|
|
||||||
PageView,
|
|
||||||
STable
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
CITypeId: parseInt(this.$route.params.CITypeId),
|
|
||||||
CITypeName: this.$route.params.CITypeName,
|
|
||||||
form: this.$form.createForm(this),
|
|
||||||
scroll: { x: 1300, y: 600 },
|
|
||||||
|
|
||||||
visible: false,
|
|
||||||
|
|
||||||
drawerTitle: '',
|
|
||||||
|
|
||||||
formLayout: 'vertical',
|
|
||||||
|
|
||||||
CITypes: [],
|
|
||||||
relationTypes: [],
|
|
||||||
|
|
||||||
pagination: {
|
|
||||||
defaultPageSize: 20
|
|
||||||
},
|
|
||||||
showPagination: false,
|
|
||||||
columns: [
|
|
||||||
{
|
|
||||||
title: '源模型英文名',
|
|
||||||
dataIndex: 'source_ci_type_name',
|
|
||||||
sorter: false,
|
|
||||||
width: 200,
|
|
||||||
scopedSlots: { customRender: 'source_ci_type_name' }
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '关联类型',
|
|
||||||
dataIndex: 'relation_type',
|
|
||||||
sorter: false,
|
|
||||||
width: 100,
|
|
||||||
scopedSlots: { customRender: 'name' }
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '目标模型名',
|
|
||||||
dataIndex: 'alias',
|
|
||||||
sorter: false,
|
|
||||||
scopedSlots: { customRender: 'alias' }
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '操作',
|
|
||||||
dataIndex: 'action',
|
|
||||||
width: 100,
|
|
||||||
fixed: 'right',
|
|
||||||
scopedSlots: { customRender: 'action' }
|
|
||||||
}
|
|
||||||
],
|
|
||||||
loadData: parameter => {
|
|
||||||
console.log('loadData.parameter', parameter)
|
|
||||||
const CITypeId = this.CITypeId
|
|
||||||
const CITypeName = this.CITypeName
|
|
||||||
|
|
||||||
console.log('this CITypeId ', CITypeId, 'type', typeof CITypeName, 'CITypeName', CITypeName)
|
|
||||||
|
|
||||||
return getCITypeChildren(this.CITypeId)
|
|
||||||
.then(res => {
|
|
||||||
let data = res.children
|
|
||||||
|
|
||||||
data = data.map(function (obj, index) {
|
|
||||||
obj.source_ci_type_name = CITypeName
|
|
||||||
obj.source_ci_type_id = CITypeId
|
|
||||||
return obj
|
|
||||||
})
|
|
||||||
|
|
||||||
return {
|
|
||||||
data: data
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
mdl: {},
|
|
||||||
// 高级搜索 展开/关闭
|
|
||||||
advanced: false,
|
|
||||||
// 查询参数
|
|
||||||
queryParam: {},
|
|
||||||
// custom table alert & rowSelection
|
|
||||||
options: {
|
|
||||||
alert: false,
|
|
||||||
rowSelection: null
|
|
||||||
},
|
|
||||||
optionAlertShow: false
|
|
||||||
|
|
||||||
}
|
|
||||||
},
|
|
||||||
beforeCreate () {
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
formItemLayout () {
|
|
||||||
const { formLayout } = this
|
|
||||||
return formLayout === 'horizontal' ? {
|
|
||||||
labelCol: { span: 4 },
|
|
||||||
wrapperCol: { span: 14 }
|
|
||||||
} : {}
|
|
||||||
},
|
|
||||||
|
|
||||||
horizontalFormItemLayout () {
|
|
||||||
return {
|
|
||||||
labelCol: { span: 4 },
|
|
||||||
wrapperCol: { span: 14 }
|
|
||||||
}
|
|
||||||
},
|
|
||||||
buttonItemLayout () {
|
|
||||||
const { formLayout } = this
|
|
||||||
return formLayout === 'horizontal' ? {
|
|
||||||
wrapperCol: { span: 14, offset: 4 }
|
|
||||||
} : {}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
this.getCITypes()
|
|
||||||
this.getRelationTypes()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
setScrollY () {
|
|
||||||
this.scroll.y = window.innerHeight - this.$refs.table.$el.offsetTop - 250
|
|
||||||
},
|
|
||||||
|
|
||||||
getCITypes () {
|
|
||||||
getCITypes().then(res => {
|
|
||||||
this.CITypes = res.ci_types
|
|
||||||
})
|
|
||||||
},
|
|
||||||
getRelationTypes () {
|
|
||||||
getRelationTypes().then(res => {
|
|
||||||
this.relationTypes = res
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
callback (key) {
|
|
||||||
console.log(key)
|
|
||||||
},
|
|
||||||
handleDelete (record) {
|
|
||||||
console.log(record)
|
|
||||||
|
|
||||||
deleteRelation(record.source_ci_type_id, record.id)
|
|
||||||
.then(res => {
|
|
||||||
this.$message.success(`删除成功`)
|
|
||||||
|
|
||||||
this.handleOk()
|
|
||||||
}).catch(err => this.requestFailed(err))
|
|
||||||
},
|
|
||||||
handleOk () {
|
|
||||||
this.$refs.table.refresh()
|
|
||||||
},
|
|
||||||
|
|
||||||
handleCreate () {
|
|
||||||
this.drawerTitle = '新增关系'
|
|
||||||
this.visible = true
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.form.setFieldsValue({
|
|
||||||
source_ci_type_id: this.CITypeId
|
|
||||||
|
|
||||||
})
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
onClose () {
|
|
||||||
this.form.resetFields()
|
|
||||||
this.visible = false
|
|
||||||
},
|
|
||||||
|
|
||||||
onChange (e) {
|
|
||||||
console.log(`checked = ${e.target.checked}`)
|
|
||||||
},
|
|
||||||
|
|
||||||
handleSubmit (e) {
|
|
||||||
e.preventDefault()
|
|
||||||
this.form.validateFields((err, values) => {
|
|
||||||
if (!err) {
|
|
||||||
// eslint-disable-next-line no-console
|
|
||||||
console.log('Received values of form: ', values)
|
|
||||||
|
|
||||||
createRelation(values.source_ci_type_id, values.ci_type_id, values.relation_type_id)
|
|
||||||
.then(res => {
|
|
||||||
this.$message.success(`添加成功`)
|
|
||||||
this.onClose()
|
|
||||||
this.handleOk()
|
|
||||||
}).catch(err => this.requestFailed(err))
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
requestFailed (err) {
|
|
||||||
const msg = ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试'
|
|
||||||
this.$message.error(`${msg}`)
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
watch: {}
|
|
||||||
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.search {
|
|
||||||
margin-bottom: 54px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fold {
|
|
||||||
width: calc(100% - 216px);
|
|
||||||
display: inline-block
|
|
||||||
}
|
|
||||||
|
|
||||||
.operator {
|
|
||||||
margin-bottom: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-btn {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 900px) {
|
|
||||||
.fold {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in New Issue