mirror of https://github.com/veops/cmdb.git
wang-liang0615
GitHub
commit
4f7eddf906
|
|
@ -47,6 +47,134 @@ export default {
|
|||
this.$store.dispatch('setWindowSize')
|
||||
})
|
||||
)
|
||||
|
||||
// 注册富文本自定义元素
|
||||
const resume = {
|
||||
type: 'attachment',
|
||||
attachmentLabel: '',
|
||||
attachmentValue: '',
|
||||
children: [{ text: '' }], // void 元素必须有一个 children ，其中只有一个空字符串，重要！！！
|
||||
}
|
||||
|
||||
function withAttachment(editor) {
|
||||
// JS 语法
|
||||
const { isInline, isVoid } = editor
|
||||
const newEditor = editor
|
||||
|
||||
newEditor.isInline = (elem) => {
|
||||
const type = DomEditor.getNodeType(elem)
|
||||
if (type === 'attachment') return true // 针对 type: attachment ，设置为 inline
|
||||
return isInline(elem)
|
||||
}
|
||||
|
||||
newEditor.isVoid = (elem) => {
|
||||
const type = DomEditor.getNodeType(elem)
|
||||
if (type === 'attachment') return true // 针对 type: attachment ，设置为 void
|
||||
return isVoid(elem)
|
||||
}
|
||||
|
||||
return newEditor // 返回 newEditor ，重要！！！
|
||||
}
|
||||
Boot.registerPlugin(withAttachment)
|
||||
/**
|
||||
* 渲染“附件”元素到编辑器
|
||||
* @param elem 附件元素，即上文的 myResume
|
||||
* @param children 元素子节点，void 元素可忽略
|
||||
* @param editor 编辑器实例
|
||||
* @returns vnode 节点（通过 snabbdom.js 的 h 函数生成）
|
||||
*/
|
||||
function renderAttachment(elem, children, editor) {
|
||||
// JS 语法
|
||||
|
||||
// 获取“附件”的数据，参考上文 myResume 数据结构
|
||||
const { attachmentLabel = '', attachmentValue = '' } = elem
|
||||
|
||||
// 附件元素 vnode
|
||||
const attachVnode = h(
|
||||
// HTML tag
|
||||
'span',
|
||||
// HTML 属性、样式、事件
|
||||
{
|
||||
props: { contentEditable: false }, // HTML 属性，驼峰式写法
|
||||
style: {
|
||||
display: 'inline-block',
|
||||
margin: '0 3px',
|
||||
padding: '0 3px',
|
||||
backgroundColor: '#e6f7ff',
|
||||
border: '1px solid #91d5ff',
|
||||
borderRadius: '2px',
|
||||
color: '#1890ff',
|
||||
}, // style ，驼峰式写法
|
||||
on: {
|
||||
click() {
|
||||
console.log('clicked', attachmentValue)
|
||||
} /* 其他... */,
|
||||
},
|
||||
},
|
||||
// 子节点
|
||||
[attachmentLabel]
|
||||
)
|
||||
|
||||
return attachVnode
|
||||
}
|
||||
const renderElemConf = {
|
||||
type: 'attachment', // 新元素 type ，重要！！！
|
||||
renderElem: renderAttachment,
|
||||
}
|
||||
Boot.registerRenderElem(renderElemConf)
|
||||
|
||||
/**
|
||||
* 生成“附件”元素的 HTML
|
||||
* @param elem 附件元素，即上文的 myResume
|
||||
* @param childrenHtml 子节点的 HTML 代码，void 元素可忽略
|
||||
* @returns “附件”元素的 HTML 字符串
|
||||
*/
|
||||
function attachmentToHtml(elem, childrenHtml) {
|
||||
// JS 语法
|
||||
|
||||
// 获取附件元素的数据
|
||||
const { attachmentValue = '', attachmentLabel = '' } = elem
|
||||
|
||||
// 生成 HTML 代码
|
||||
const html = `<span data-w-e-type="attachment" data-w-e-is-void data-w-e-is-inline data-attachmentValue="${attachmentValue}" data-attachmentLabel="${attachmentLabel}">${attachmentLabel}</span>`
|
||||
|
||||
return html
|
||||
}
|
||||
const elemToHtmlConf = {
|
||||
type: 'attachment', // 新元素的 type ，重要！！！
|
||||
elemToHtml: attachmentToHtml,
|
||||
}
|
||||
Boot.registerElemToHtml(elemToHtmlConf)
|
||||
|
||||
/**
|
||||
* 解析 HTML 字符串，生成“附件”元素
|
||||
* @param domElem HTML 对应的 DOM Element
|
||||
* @param children 子节点
|
||||
* @param editor editor 实例
|
||||
* @returns “附件”元素，如上文的 myResume
|
||||
*/
|
||||
function parseAttachmentHtml(domElem, children, editor) {
|
||||
// JS 语法
|
||||
|
||||
// 从 DOM element 中获取“附件”的信息
|
||||
const attachmentValue = domElem.getAttribute('data-attachmentValue') || ''
|
||||
const attachmentLabel = domElem.getAttribute('data-attachmentLabel') || ''
|
||||
|
||||
// 生成“附件”元素（按照此前约定的数据结构）
|
||||
const myResume = {
|
||||
type: 'attachment',
|
||||
attachmentValue,
|
||||
attachmentLabel,
|
||||
children: [{ text: '' }], // void node 必须有 children ，其中有一个空字符串，重要！！！
|
||||
}
|
||||
|
||||
return myResume
|
||||
}
|
||||
const parseHtmlConf = {
|
||||
selector: 'span[data-w-e-type="attachment"]', // CSS 选择器，匹配特定的 HTML 标签
|
||||
parseElemHtml: parseAttachmentHtml,
|
||||
}
|
||||
Boot.registerParseElemHtml(parseHtmlConf)
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearInterval(this.timer)
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
topoData: {},
|
||||
exsited_ci: [],
|
||||
}
|
||||
},
|
||||
inject: ['ci_types'],
|
||||
|
|
@ -95,31 +96,33 @@ export default {
|
|||
}
|
||||
const ci_types_list = this.ci_types()
|
||||
res.result.forEach((r) => {
|
||||
const _findCiType = ci_types_list.find((item) => item.id === r._type)
|
||||
newNodes.push({
|
||||
id: `${r._id}`,
|
||||
Class: Node,
|
||||
title: r.ci_type_alias || r.ci_type,
|
||||
name: r.ci_type,
|
||||
side: side,
|
||||
unique_alias: r.unique_alias,
|
||||
unique_name: r.unique,
|
||||
unique_value: r[r.unique],
|
||||
children: [],
|
||||
icon: _findCiType?.icon || '',
|
||||
endpoints: [
|
||||
{
|
||||
id: 'left',
|
||||
orientation: [-1, 0],
|
||||
pos: [0, 0.5],
|
||||
},
|
||||
{
|
||||
id: 'right',
|
||||
orientation: [1, 0],
|
||||
pos: [0, 0.5],
|
||||
},
|
||||
],
|
||||
})
|
||||
if (!this.exsited_ci.includes(r._id)) {
|
||||
const _findCiType = ci_types_list.find((item) => item.id === r._type)
|
||||
newNodes.push({
|
||||
id: `${r._id}`,
|
||||
Class: Node,
|
||||
title: r.ci_type_alias || r.ci_type,
|
||||
name: r.ci_type,
|
||||
side: side,
|
||||
unique_alias: r.unique_alias,
|
||||
unique_name: r.unique,
|
||||
unique_value: r[r.unique],
|
||||
children: [],
|
||||
icon: _findCiType?.icon || '',
|
||||
endpoints: [
|
||||
{
|
||||
id: 'left',
|
||||
orientation: [-1, 0],
|
||||
pos: [0, 0.5],
|
||||
},
|
||||
{
|
||||
id: 'right',
|
||||
orientation: [1, 0],
|
||||
pos: [0, 0.5],
|
||||
},
|
||||
],
|
||||
})
|
||||
}
|
||||
newEdges.push({
|
||||
id: `${r._id}`,
|
||||
source: 'right',
|
||||
|
|
@ -135,11 +138,13 @@ export default {
|
|||
this.canvas.removeEdges(edges)
|
||||
|
||||
const _topoData = _.cloneDeep(this.topoData)
|
||||
_topoData.edges.push(...newEdges)
|
||||
let result
|
||||
const getTreeItem = (data, id) => {
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
if (data[i].id === id) {
|
||||
result = data[i] // 结果赋值
|
||||
result.edges = _topoData.edges
|
||||
break
|
||||
} else {
|
||||
if (data[i].children && data[i].children.length) {
|
||||
|
|
@ -151,10 +156,10 @@ export default {
|
|||
|
||||
getTreeItem(_topoData.nodes.children, sourceNode)
|
||||
result.children.push(...newNodes)
|
||||
_topoData.edges.push(...newEdges)
|
||||
|
||||
this.topoData = _topoData
|
||||
this.canvas.draw(_topoData, {}, () => {})
|
||||
this.exsited_ci = [...new Set([...this.exsited_ci, ...res.result.map((r) => r._id)])]
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ class BaseNode extends TreeNode {
|
|||
container.append(titleContent)
|
||||
container.append(uniqueDom)
|
||||
|
||||
if (opts.options.side && !opts.options.children.length) {
|
||||
if (opts.options.side && (!opts.options.children.length && !(opts.options.edges && opts.options.edges.length && opts.options.edges.find(e => e.source === opts.options.side && e.sourceNode === opts.options.id)))) {
|
||||
const addIcon = $(`<i aria-label="图标: plus-square" class="anticon anticon-plus-square add-icon-${opts.options.side}"><svg viewBox="64 64 896 896" data-icon="plus-square" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M328 544h152v152c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V544h152c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H544V328c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v152H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8z"></path><path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656z"></path></svg></i>`)
|
||||
container.append(addIcon)
|
||||
addIcon.on('click', () => {
|
||||
|
|
|
|||
|
|
@ -194,7 +194,6 @@
|
|||
|
||||
<script>
|
||||
import _ from 'lodash'
|
||||
import { getWX } from '../../api/perm'
|
||||
import { addTrigger, updateTrigger, deleteTrigger, getAllDagsName } from '../../api/CIType'
|
||||
import FilterComp from '@/components/CMDBFilterComp'
|
||||
import EmployeeTreeSelect from '@/views/setting/components/employeeTreeSelect.vue'
|
||||
|
|
@ -264,16 +263,6 @@ export default {
|
|||
}
|
||||
},
|
||||
computed: {
|
||||
filterWxUsers() {
|
||||
if (!this.filterValue) {
|
||||
return this.WxUsers
|
||||
}
|
||||
return this.WxUsers.filter(
|
||||
(user) =>
|
||||
user.nickname.toLowerCase().indexOf(this.filterValue.toLowerCase()) >= 0 ||
|
||||
user.username.toLowerCase().indexOf(this.filterValue.toLowerCase()) >= 0
|
||||
)
|
||||
},
|
||||
canAddTriggerAttr() {
|
||||
return this.attrList.filter((attr) => attr.value_type === '3' || attr.value_type === '4')
|
||||
},
|
||||
|
|
@ -299,7 +288,6 @@ export default {
|
|||
},
|
||||
createFromTriggerTable(attrList) {
|
||||
this.visible = true
|
||||
this.getWxList()
|
||||
// this.getDags()
|
||||
this.attrList = attrList
|
||||
this.triggerId = null
|
||||
|
|
@ -319,7 +307,6 @@ export default {
|
|||
},
|
||||
async open(property, attrList) {
|
||||
this.visible = true
|
||||
this.getWxList()
|
||||
// await this.getDags()
|
||||
this.attrList = attrList
|
||||
if (property.has_trigger) {
|
||||
|
|
@ -393,11 +380,6 @@ export default {
|
|||
this.filterExp = ''
|
||||
this.visible = false
|
||||
},
|
||||
getWxList() {
|
||||
getWX().then((res) => {
|
||||
this.WxUsers = res.filter((item) => item.wx_id)
|
||||
})
|
||||
},
|
||||
filterChange(value) {
|
||||
this.filterValue = value
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue