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

feat:预定义值支持脚本&&密码存储&&一些bugfix (#239)

This commit is contained in:
wang-liang0615 2023-10-27 11:10:43 +08:00 committed by GitHub
parent 9791a184e3
commit 3d716eff3e
30 changed files with 7382 additions and 6760 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

167
cmdb-ui/public/iconfont/demo_index.html
View File

@ -54,6 +54,48 @@
<div class="content unicode" style="display: block;"> <div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe894;</span>
<div class="name">icon-xianxing-password</div>
<div class="code-name">&amp;#xe894;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe895;</span>
<div class="name">icon-xianxing-link</div>
<div class="code-name">&amp;#xe895;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe892;</span>
<div class="name">itsm-oneclick download</div>
<div class="code-name">&amp;#xe892;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe893;</span>
<div class="name">itsm-package download</div>
<div class="code-name">&amp;#xe893;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe891;</span>
<div class="name">weixin</div>
<div class="code-name">&amp;#xe891;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe88f;</span>
<div class="name">itsm-again</div>
<div class="code-name">&amp;#xe88f;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe890;</span>
<div class="name">itsm-next</div>
<div class="code-name">&amp;#xe890;</div>
</li>
<li class="dib"> <li class="dib">
<span class="icon iconfont">&#xe88e;</span> <span class="icon iconfont">&#xe88e;</span>
<div class="name">wechatApp</div> <div class="name">wechatApp</div>
@ -4002,9 +4044,9 @@
<pre><code class="language-css" <pre><code class="language-css"
>@font-face { >@font-face {
font-family: 'iconfont'; font-family: 'iconfont';
src: url('iconfont.woff2?t=1696815443987') format('woff2'), src: url('iconfont.woff2?t=1698273699449') format('woff2'),
url('iconfont.woff?t=1696815443987') format('woff'), url('iconfont.woff?t=1698273699449') format('woff'),
url('iconfont.ttf?t=1696815443987') format('truetype'); url('iconfont.ttf?t=1698273699449') format('truetype');
} }
</code></pre> </code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3> <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@ -4030,6 +4072,69 @@
<div class="content font-class"> <div class="content font-class">
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-xianxing-password"></span>
<div class="name">
icon-xianxing-password
</div>
<div class="code-name">.icon-xianxing-password
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-xianxing-link"></span>
<div class="name">
icon-xianxing-link
</div>
<div class="code-name">.icon-xianxing-link
</div>
</li>
<li class="dib">
<span class="icon iconfont a-itsm-oneclickdownload"></span>
<div class="name">
itsm-oneclick download
</div>
<div class="code-name">.a-itsm-oneclickdownload
</div>
</li>
<li class="dib">
<span class="icon iconfont a-itsm-packagedownload"></span>
<div class="name">
itsm-package download
</div>
<div class="code-name">.a-itsm-packagedownload
</div>
</li>
<li class="dib">
<span class="icon iconfont a-Frame4"></span>
<div class="name">
weixin
</div>
<div class="code-name">.a-Frame4
</div>
</li>
<li class="dib">
<span class="icon iconfont itsm-again"></span>
<div class="name">
itsm-again
</div>
<div class="code-name">.itsm-again
</div>
</li>
<li class="dib">
<span class="icon iconfont itsm-next"></span>
<div class="name">
itsm-next
</div>
<div class="code-name">.itsm-next
</div>
</li>
<li class="dib"> <li class="dib">
<span class="icon iconfont wechatApp"></span> <span class="icon iconfont wechatApp"></span>
<div class="name"> <div class="name">
@ -9952,6 +10057,62 @@
<div class="content symbol"> <div class="content symbol">
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-xianxing-password"></use>
</svg>
<div class="name">icon-xianxing-password</div>
<div class="code-name">#icon-xianxing-password</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-xianxing-link"></use>
</svg>
<div class="name">icon-xianxing-link</div>
<div class="code-name">#icon-xianxing-link</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#a-itsm-oneclickdownload"></use>
</svg>
<div class="name">itsm-oneclick download</div>
<div class="code-name">#a-itsm-oneclickdownload</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#a-itsm-packagedownload"></use>
</svg>
<div class="name">itsm-package download</div>
<div class="code-name">#a-itsm-packagedownload</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#a-Frame4"></use>
</svg>
<div class="name">weixin</div>
<div class="code-name">#a-Frame4</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#itsm-again"></use>
</svg>
<div class="name">itsm-again</div>
<div class="code-name">#itsm-again</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#itsm-next"></use>
</svg>
<div class="name">itsm-next</div>
<div class="code-name">#itsm-next</div>
</li>
<li class="dib"> <li class="dib">
<svg class="icon svg-icon" aria-hidden="true"> <svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#wechatApp"></use> <use xlink:href="#wechatApp"></use>

34
cmdb-ui/public/iconfont/iconfont.css
View File

@ -1,8 +1,8 @@
@font-face { @font-face {
font-family: "iconfont"; /* Project id 3857903 */ font-family: "iconfont"; /* Project id 3857903 */
src: url('iconfont.woff2?t=1696815443987') format('woff2'), src: url('iconfont.woff2?t=1698273699449') format('woff2'),
url('iconfont.woff?t=1696815443987') format('woff'), url('iconfont.woff?t=1698273699449') format('woff'),
url('iconfont.ttf?t=1696815443987') format('truetype'); url('iconfont.ttf?t=1698273699449') format('truetype');
} }
.iconfont { .iconfont {
@ -13,6 +13,34 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.icon-xianxing-password:before {
content: "\e894";
}
.icon-xianxing-link:before {
content: "\e895";
}
.a-itsm-oneclickdownload:before {
content: "\e892";
}
.a-itsm-packagedownload:before {
content: "\e893";
}
.a-Frame4:before {
content: "\e891";
}
.itsm-again:before {
content: "\e88f";
}
.itsm-next:before {
content: "\e890";
}
.wechatApp:before { .wechatApp:before {
content: "\e88e"; content: "\e88e";
} }

2
cmdb-ui/public/iconfont/iconfont.js
View File

File diff suppressed because one or more lines are too long

49
cmdb-ui/public/iconfont/iconfont.json
View File

@ -5,6 +5,55 @@
"css_prefix_text": "", "css_prefix_text": "",
"description": "", "description": "",
"glyphs": [ "glyphs": [
{
"icon_id": "37830610",
"name": "icon-xianxing-password",
"font_class": "icon-xianxing-password",
"unicode": "e894",
"unicode_decimal": 59540
},
{
"icon_id": "37830609",
"name": "icon-xianxing-link",
"font_class": "icon-xianxing-link",
"unicode": "e895",
"unicode_decimal": 59541
},
{
"icon_id": "37822199",
"name": "itsm-oneclick download",
"font_class": "a-itsm-oneclickdownload",
"unicode": "e892",
"unicode_decimal": 59538
},
{
"icon_id": "37822198",
"name": "itsm-package download",
"font_class": "a-itsm-packagedownload",
"unicode": "e893",
"unicode_decimal": 59539
},
{
"icon_id": "37772067",
"name": "weixin",
"font_class": "a-Frame4",
"unicode": "e891",
"unicode_decimal": 59537
},
{
"icon_id": "37632784",
"name": "itsm-again",
"font_class": "itsm-again",
"unicode": "e88f",
"unicode_decimal": 59535
},
{
"icon_id": "37632783",
"name": "itsm-next",
"font_class": "itsm-next",
"unicode": "e890",
"unicode_decimal": 59536
},
{ {
"icon_id": "37590786", "icon_id": "37590786",
"name": "wechatApp", "name": "wechatApp",

BIN
cmdb-ui/public/iconfont/iconfont.ttf
View File

Binary file not shown.

BIN
cmdb-ui/public/iconfont/iconfont.woff
View File

Binary file not shown.

BIN
cmdb-ui/public/iconfont/iconfont.woff2
View File

Binary file not shown.

16
cmdb-ui/src/components/CMDBFilterComp/index.vue
View File

@ -12,7 +12,10 @@
<a-button type="primary" ghost>条件过滤<a-icon type="filter"/></a-button> <a-button type="primary" ghost>条件过滤<a-icon type="filter"/></a-button>
</slot> </slot>
<template slot="content"> <template slot="content">
<Expression v-model="ruleList" :canSearchPreferenceAttrList="canSearchPreferenceAttrList" /> <Expression
v-model="ruleList"
:canSearchPreferenceAttrList="canSearchPreferenceAttrList.filter((attr) => !attr.is_password)"
/>
<a-divider :style="{ margin: '10px 0' }" /> <a-divider :style="{ margin: '10px 0' }" />
<div style="width:534px"> <div style="width:534px">
<a-space :style="{ display: 'flex', justifyContent: 'flex-end' }"> <a-space :style="{ display: 'flex', justifyContent: 'flex-end' }">
@ -22,7 +25,11 @@
</div> </div>
</template> </template>
</a-popover> </a-popover>
<Expression v-else v-model="ruleList" :canSearchPreferenceAttrList="canSearchPreferenceAttrList" /> <Expression
v-else
v-model="ruleList"
:canSearchPreferenceAttrList="canSearchPreferenceAttrList.filter((attr) => !attr.is_password)"
/>
</div> </div>
</template> </template>
@ -152,14 +159,15 @@ export default {
}) })
this.ruleList = [...expArray] this.ruleList = [...expArray]
} else if (open) { } else if (open) {
const _canSearchPreferenceAttrList = this.canSearchPreferenceAttrList.filter((attr) => !attr.is_password)
this.ruleList = isInitOne this.ruleList = isInitOne
? [ ? [
{ {
id: uuidv4(), id: uuidv4(),
type: 'and', type: 'and',
property: property:
this.canSearchPreferenceAttrList && this.canSearchPreferenceAttrList.length _canSearchPreferenceAttrList && _canSearchPreferenceAttrList.length
? this.canSearchPreferenceAttrList[0].name ? _canSearchPreferenceAttrList[0].name
: undefined, : undefined,
exp: 'is', exp: 'is',
value: null, value: null,

24
cmdb-ui/src/components/CMDBValueTypeMapIcon/index.vue
View File

@ -14,24 +14,6 @@ export default {
}, },
}, },
methods: { methods: {
getPropertyStyle(attr) {
switch (attr.value_type) {
case '0':
return { color: '#cf1322', backgroundColor: '#fff1f0' }
case '1':
return { color: '#d4b106', backgroundColor: '#feffe6' }
case '2':
return { color: '#d46b08', backgroundColor: '#fff7e6' }
case '3':
return { color: '#531dab', backgroundColor: '#f9f0ff' }
case '4':
return { color: '#389e0d', backgroundColor: '#f6ffed' }
case '5':
return { color: '#08979c', backgroundColor: '#e6fffb' }
case '6':
return { color: '#c41d7f', backgroundColor: '#fff0f6' }
}
},
getPropertyIcon(attr) { getPropertyIcon(attr) {
switch (attr.value_type) { switch (attr.value_type) {
case '0': case '0':
@ -39,6 +21,12 @@ export default {
case '1': case '1':
return 'icon-xianxing-fudianshu' return 'icon-xianxing-fudianshu'
case '2': case '2':
if (attr.is_password) {
return 'icon-xianxing-password'
}
if (attr.is_link) {
return 'icon-xianxing-link'
}
return 'icon-xianxing-wenben' return 'icon-xianxing-wenben'
case '3': case '3':
return 'icon-xianxing-datetime' return 'icon-xianxing-datetime'

7
cmdb-ui/src/modules/cmdb/api/CITypeAttr.js
View File

@ -168,3 +168,10 @@ export function calcComputedAttribute(attr_id) {
method: 'PUT', method: 'PUT',
}) })
} }
export function getAttrPassword(ci_id, attr_id) {
return axios({
url: `/v0.1/ci/${ci_id}/attributes/${attr_id}/password`,
method: 'Get',
})
}

35
cmdb-ui/src/modules/cmdb/components/passwordField/index.vue
View File

@ -2,32 +2,29 @@
<div> <div>
<span v-if="!isShow && !isTableLoading">{{ showPassword }}</span> <span v-if="!isShow && !isTableLoading">{{ showPassword }}</span>
<span v-else>{{ password }}</span> <span v-else>{{ password }}</span>
<a <a :style="{ marginLeft: '10px' }" @click="getPassword"><a-icon :type="isShow ? 'eye-invisible' : 'eye'"/></a>
:style="{ marginLeft: '10px' }"
@click="
() => {
isShow = !isShow
}
"
><a-icon
:type="isShow ? 'eye-invisible' : 'eye'"
/></a>
</div> </div>
</template> </template>
<script> <script>
import { mapState } from 'vuex' import { mapState } from 'vuex'
import { getAttrPassword } from '../../api/CITypeAttr'
export default { export default {
name: 'PasswordField', name: 'PasswordField',
props: { props: {
password: { ci_id: {
type: String, type: Number,
default: '', default: 0,
},
attr_id: {
type: Number,
default: 0,
}, },
}, },
data() { data() {
return { return {
isShow: false, isShow: false,
password: '',
} }
}, },
computed: { computed: {
@ -36,6 +33,18 @@ export default {
}, },
...mapState('cmdbStore', ['isTableLoading']), ...mapState('cmdbStore', ['isTableLoading']),
}, },
methods: {
getPassword() {
if (this.isShow) {
this.isShow = false
} else {
getAttrPassword(this.ci_id, this.attr_id).then((res) => {
this.password = res.value
this.isShow = true
})
}
},
},
} }
</script> </script>

1
cmdb-ui/src/modules/cmdb/components/webhook/body.vue
View File

@ -68,7 +68,6 @@ export default {
lineNumbers: true, lineNumbers: true,
mode: 'python', mode: 'python',
height: '200px', height: '200px',
smartIndent: true,
tabSize: 4, tabSize: 4,
lineWrapping: true, lineWrapping: true,
}, },

10
cmdb-ui/src/modules/cmdb/utils/const.js
View File

@ -2,10 +2,12 @@ export const valueTypeMap = {
'0': '整数', '0': '整数',
'1': '浮点数', '1': '浮点数',
'2': '文本', '2': '文本',
'3': 'datetime', '3': '日期时间',
'4': 'date', '4': '日期',
'5': 'time', '5': '时间',
'6': 'json' '6': 'JSON',
'7': '密码',
'8': '链接'
} }
export const defautValueColor = [ export const defautValueColor = [

5
cmdb-ui/src/modules/cmdb/utils/helper.js
View File

@ -85,6 +85,7 @@ export function getCITableColumns(data, attrList, width = 1600, height) {
} }
columns.push({ columns.push({
attr_id:attr.id,
editRender, editRender,
title: attr.alias || attr.name, title: attr.alias || attr.name,
field: attr.name, field: attr.name,
@ -127,6 +128,10 @@ export const getPropertyStyle = (attr) => {
return { color: '#08979c', backgroundColor: '#e6fffb' } return { color: '#08979c', backgroundColor: '#e6fffb' }
case '6': case '6':
return { color: '#c41d7f', backgroundColor: '#fff0f6' } return { color: '#c41d7f', backgroundColor: '#fff0f6' }
case '7':
return { color: '#0390CC', backgroundColor: '#e6fffb' }
case '8':
return { color: '#144BD9', backgroundColor: '#fff0f6' }
} }
} }

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

@ -99,6 +99,7 @@
:cell-type="col.value_type === '2' ? 'string' : 'auto'" :cell-type="col.value_type === '2' ? 'string' : 'auto'"
:fixed="col.is_fixed ? 'left' : ''" :fixed="col.is_fixed ? 'left' : ''"
> >
<!-- <template #edit="{row}"><a-input v-model="row[col.field]"></a-input></template> -->
<template #header> <template #header>
<span class="vxe-handle"> <span class="vxe-handle">
<OpsMoveIcon <OpsMoveIcon
@ -107,7 +108,8 @@
<span>{{ col.title }}</span> <span>{{ col.title }}</span>
</span> </span>
</template> </template>
<template v-if="col.is_choice" #edit="{ row }"> <template v-if="col.is_choice || col.is_password" #edit="{ row }">
<vxe-input v-if="col.is_password" v-model="passwordValue[col.field]" />
<a-select <a-select
:getPopupContainer="(trigger) => trigger.parentElement" :getPopupContainer="(trigger) => trigger.parentElement"
:style="{ width: '100%', height: '32px' }" :style="{ width: '100%', height: '32px' }"
@ -149,8 +151,21 @@
#default="{ row }" #default="{ row }"
> >
<span v-if="col.value_type === '6' && row[col.field]">{{ row[col.field] }}</span> <span v-if="col.value_type === '6' && row[col.field]">{{ row[col.field] }}</span>
<a v-else-if="col.is_link" :href="`${row[col.field]}`" target="_blank">{{ row[col.field] }}</a> <a
<PasswordField v-else-if="col.is_password && row[col.field]" :password="row[col.field]"></PasswordField> v-else-if="col.is_link && row[col.field]"
:href="
row[col.field].startsWith('http') || row[col.field].startsWith('https')
? `${row[col.field]}`
: `http://${row[col.field]}`
"
target="_blank"
>{{ row[col.field] }}</a
>
<PasswordField
v-else-if="col.is_password && row[col.field]"
:ci_id="row._id"
:attr_id="col.attr_id"
></PasswordField>
<template v-else-if="col.is_choice"> <template v-else-if="col.is_choice">
<template v-if="col.is_list"> <template v-if="col.is_list">
<span <span
@ -198,8 +213,8 @@
:style="{ color: getChoiceValueIcon(col, row[col.field]).color, marginRight: '5px' }" :style="{ color: getChoiceValueIcon(col, row[col.field]).color, marginRight: '5px' }"
:type="getChoiceValueIcon(col, row[col.field]).name" :type="getChoiceValueIcon(col, row[col.field]).name"
/> />
{{ row[col.field] }}</span {{ row[col.field] }}
> </span>
</template> </template>
</template> </template>
</vxe-table-column> </vxe-table-column>
@ -207,6 +222,7 @@
<template #header> <template #header>
<span>操作</span> <span>操作</span>
<EditAttrsPopover :typeId="typeId" class="operation-icon" @refresh="refreshAfterEditAttrs" /> <EditAttrsPopover :typeId="typeId" class="operation-icon" @refresh="refreshAfterEditAttrs" />
<!-- <a-icon class="operation-icon" type="control" /> -->
</template> </template>
<template #default="{ row }"> <template #default="{ row }">
<a-space> <a-space>
@ -289,6 +305,7 @@ import PreferenceSearch from '../../components/preferenceSearch/preferenceSearch
import MetadataDrawer from './modules/MetadataDrawer.vue' import MetadataDrawer from './modules/MetadataDrawer.vue'
import CMDBGrant from '../../components/cmdbGrant' import CMDBGrant from '../../components/cmdbGrant'
import { ops_move_icon as OpsMoveIcon } from '@/core/icons' import { ops_move_icon as OpsMoveIcon } from '@/core/icons'
import { getAttrPassword } from '../../api/CITypeAttr'
export default { export default {
name: 'InstanceList', name: 'InstanceList',
@ -348,13 +365,18 @@ export default {
tableDragClassName: [], tableDragClassName: [],
resource_type: {}, resource_type: {},
initialPasswordValue: {},
passwordValue: {},
lastEditCiId: null,
isContinueCloseEdit: true,
} }
}, },
watch: { watch: {
'$route.path': function (newPath, oldPath) { '$route.path': function(newPath, oldPath) {
this.reloadBoard() this.reloadBoard()
}, },
currentPage: function (newVal, oldVal) { currentPage: function(newVal, oldVal) {
this.loadTableData(this.sortByTable) this.loadTableData(this.sortByTable)
}, },
}, },
@ -438,6 +460,12 @@ export default {
}) })
this.totalNumber = res['numfound'] this.totalNumber = res['numfound']
this.columns = this.getColumns(res.result, this.preferenceAttrList) this.columns = this.getColumns(res.result, this.preferenceAttrList)
this.columns.forEach((col) => {
if (col.is_password) {
this.initialPasswordValue[col.field] = ''
this.passwordValue[col.field] = ''
}
})
const jsonAttrList = this.attrList.filter((attr) => attr.value_type === '6') const jsonAttrList = this.attrList.filter((attr) => attr.value_type === '6')
this.instanceList = res['result'].map((item) => { this.instanceList = res['result'].map((item) => {
jsonAttrList.forEach( jsonAttrList.forEach(
@ -492,14 +520,23 @@ export default {
}, },
handleEditClose({ row, rowIndex, column }) { handleEditClose({ row, rowIndex, column }) {
if (!this.isContinueCloseEdit) {
return
}
const $table = this.$refs['xTable'].getVxetableRef() const $table = this.$refs['xTable'].getVxetableRef()
const data = {} const data = {}
this.columns.forEach((item) => { this.columns.forEach((item) => {
if (!_.isEqual(row[item.field], this.initialInstanceList[rowIndex][item.field])) { if (!_.isEqual(row[item.field], this.initialInstanceList[rowIndex][item.field])) {
data[item.field] = row[item.field] || null data[item.field] = row[item.field] ?? null
}
})
Object.keys(this.initialPasswordValue).forEach((key) => {
if (this.initialPasswordValue[key] !== this.passwordValue[key]) {
data[key] = this.passwordValue[key]
} }
}) })
this.isEditActive = false this.isEditActive = false
this.lastEditCiId = null
if (JSON.stringify(data) !== '{}') { if (JSON.stringify(data) !== '{}') {
updateCI(row.ci_id || row._id, data) updateCI(row.ci_id || row._id, data)
.then(() => { .then(() => {
@ -517,6 +554,12 @@ export default {
$table.revertData(row) $table.revertData(row)
}) })
} }
this.columns.forEach((col) => {
if (col.is_password) {
this.initialPasswordValue[col.field] = ''
this.passwordValue[col.field] = ''
}
})
}, },
async openBatchDownload() { async openBatchDownload() {
@ -716,7 +759,7 @@ export default {
}, },
onEnd: (params) => { onEnd: (params) => {
// 由于开启了虚拟滚动，newIndex和oldIndex是虚拟的 // 由于开启了虚拟滚动，newIndex和oldIndex是虚拟的
const { newIndex, oldIndex } = params const { newIndex, oldIndex, from, to } = params
// 从tableDragClassName拿到colid // 从tableDragClassName拿到colid
const fromColid = this.tableDragClassName[oldIndex] const fromColid = this.tableDragClassName[oldIndex]
const toColid = this.tableDragClassName[newIndex] const toColid = this.tableDragClassName[newIndex]
@ -749,6 +792,28 @@ export default {
}, },
handleEditActived() { handleEditActived() {
this.isEditActive = true this.isEditActive = true
const passwordCol = this.columns.filter((col) => col.is_password)
this.$nextTick(() => {
const editRecord = this.$refs.xTable.getVxetableRef().getEditRecord()
const { row, column } = editRecord
if (passwordCol.length && this.lastEditCiId !== row._id) {
this.$nextTick(async () => {
for (let i = 0; i < passwordCol.length; i++) {
await getAttrPassword(row._id, passwordCol[i].attr_id).then((res) => {
this.initialPasswordValue[passwordCol[i].field] = res.value
this.passwordValue[passwordCol[i].field] = res.value
})
}
this.isContinueCloseEdit = false
await this.$refs.xTable.getVxetableRef().clearEdit()
this.isContinueCloseEdit = true
this.$nextTick(() => {
this.$refs.xTable.getVxetableRef().setEditCell(row, column.field)
})
})
}
this.lastEditCiId = row._id
})
}, },
getCellStyle({ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex }) { getCellStyle({ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex }) {
const { property } = column const { property } = column

16
cmdb-ui/src/modules/cmdb/views/ci/modules/CiDetail.vue
View File

@ -30,7 +30,7 @@
:key="attr.name" :key="attr.name"
v-for="attr in group.attributes" v-for="attr in group.attributes"
> >
<CiDetailAttrContent :ci="ci" :attr="attr" @refresh="refresh" /> <CiDetailAttrContent :ci="ci" :attr="attr" @refresh="refresh" @updateCIByself="updateCIByself" />
</el-descriptions-item> </el-descriptions-item>
</el-descriptions> </el-descriptions>
</div> </div>
@ -97,6 +97,7 @@
</template> </template>
<script> <script>
import _ from 'lodash'
import { Descriptions, DescriptionsItem } from 'element-ui' import { Descriptions, DescriptionsItem } from 'element-ui'
import { getCITypeGroupById, getCITypes } from '@/modules/cmdb/api/CIType' import { getCITypeGroupById, getCITypes } from '@/modules/cmdb/api/CIType'
import { getCIHistory } from '@/modules/cmdb/api/history' import { getCIHistory } from '@/modules/cmdb/api/history'
@ -292,6 +293,19 @@ export default {
} }
} }
}, },
updateCIByself(params, editAttrName) {
const _ci = { ..._.cloneDeep(this.ci), ...params }
this.ci = _ci
const _find = this.treeViewsLevels.find((level) => level.name === editAttrName)
// 修改的字段为树形视图订阅的字段 则全部reload
setTimeout(() => {
if (_find) {
this.reload()
} else {
this.handleSearch()
}
}, 500)
},
}, },
} }
</script> </script>

28
cmdb-ui/src/modules/cmdb/views/ci/modules/CreateInstanceForm.vue
View File

@ -114,7 +114,7 @@
<a-col :span="2"> <a-col :span="2">
<a-form-item> <a-form-item>
<a :style="{ color: 'red', marginTop: '2px' }" @click="handleDelete(list.name)"> <a :style="{ color: 'red', marginTop: '2px' }" @click="handleDelete(list.name)">
<a-icon type="delete"/> <a-icon type="delete" />
</a> </a>
</a-form-item> </a-form-item>
</a-col> </a-col>
@ -122,6 +122,7 @@
<a-button type="primary" ghost icon="plus" @click="handleAdd">新增修改字段</a-button> <a-button type="primary" ghost icon="plus" @click="handleAdd">新增修改字段</a-button>
</a-form> </a-form>
</template> </template>
<!-- </a-form> -->
<JsonEditor ref="jsonEditor" @jsonEditorOk="jsonEditorOk" /> <JsonEditor ref="jsonEditor" @jsonEditorOk="jsonEditorOk" />
</CustomDrawer> </CustomDrawer>
</template> </template>
@ -222,10 +223,18 @@ export default {
} }
Object.keys(values).forEach((k) => { Object.keys(values).forEach((k) => {
const _tempFind = this.attributeList.find((item) => item.name === k) const _tempFind = this.attributeList.find((item) => item.name === k)
if (_tempFind.value_type === '3' && values[k]) { if (
_tempFind.value_type === '3' &&
values[k] &&
Object.prototype.toString.call(values[k]) === '[object Object]'
) {
values[k] = values[k].format('YYYY-MM-DD HH:mm:ss') values[k] = values[k].format('YYYY-MM-DD HH:mm:ss')
} }
if (_tempFind.value_type === '4' && values[k]) { if (
_tempFind.value_type === '4' &&
values[k] &&
Object.prototype.toString.call(values[k]) === '[object Object]'
) {
values[k] = values[k].format('YYYY-MM-DD') values[k] = values[k].format('YYYY-MM-DD')
} }
if (_tempFind.value_type === '6') { if (_tempFind.value_type === '6') {
@ -247,10 +256,18 @@ export default {
Object.keys(values).forEach((k) => { Object.keys(values).forEach((k) => {
const _tempFind = this.attributeList.find((item) => item.name === k) const _tempFind = this.attributeList.find((item) => item.name === k)
if (_tempFind.value_type === '3' && values[k]) { if (
_tempFind.value_type === '3' &&
values[k] &&
Object.prototype.toString.call(values[k]) === '[object Object]'
) {
values[k] = values[k].format('YYYY-MM-DD HH:mm:ss') values[k] = values[k].format('YYYY-MM-DD HH:mm:ss')
} }
if (_tempFind.value_type === '4' && values[k]) { if (
_tempFind.value_type === '4' &&
values[k] &&
Object.prototype.toString.call(values[k]) === '[object Object]'
) {
values[k] = values[k].format('YYYY-MM-DD') values[k] = values[k].format('YYYY-MM-DD')
} }
if (_tempFind.value_type === '6') { if (_tempFind.value_type === '6') {
@ -258,6 +275,7 @@ export default {
} }
}) })
values.ci_type = _this.typeId values.ci_type = _this.typeId
console.log(this.parentsForm)
Object.keys(this.parentsForm).forEach((type) => { Object.keys(this.parentsForm).forEach((type) => {
if (this.parentsForm[type].value) { if (this.parentsForm[type].value) {
values[`$${type}.${this.parentsForm[type].attr}`] = this.parentsForm[type].value values[`$${type}.${this.parentsForm[type].attr}`] = this.parentsForm[type].value

46
cmdb-ui/src/modules/cmdb/views/ci/modules/MetadataDrawer.vue
View File

@ -51,8 +51,15 @@
:sortable="index < 3 ? true : false" :sortable="index < 3 ? true : false"
:title-help="column.help !== null ? { message: column.help } : null" :title-help="column.help !== null ? { message: column.help } : null"
:filters=" :filters="
index < 2 ? null: index === 2 index < 2
? valueTypeFilters: [{ label: '是', value: true }, { label: '否', value: false },]" ? null
: index === 2
? valueTypeFilters
: [
{ label: '是', value: true },
{ label: '否', value: false },
]
"
type="html" type="html"
> >
<template #default="{ row }"> <template #default="{ row }">
@ -133,18 +140,6 @@ export default {
width: 100, width: 100,
help: '仅针对前端', help: '仅针对前端',
}, },
{
field: 'is_password',
title: '是否密码',
width: 100,
help: null,
},
{
field: 'is_link',
title: '是否链接',
width: 110,
help: null,
},
{ {
field: 'is_computed', field: 'is_computed',
title: '计算属性', title: '计算属性',
@ -168,7 +163,7 @@ export default {
return this.$store.state.windowHeight return this.$store.state.windowHeight
}, },
}, },
created: function () { created: function() {
this.valueTypeFilters = Object.keys(this.valueTypeMap).map((key) => { this.valueTypeFilters = Object.keys(this.valueTypeMap).map((key) => {
return { label: this.valueTypeMap[key], value: key } return { label: this.valueTypeMap[key], value: key }
}) })
@ -182,17 +177,32 @@ export default {
async getAttrs() { async getAttrs() {
this.loading = true this.loading = true
const { attributes = [] } = await getCITypeAttributesByName(this.typeId) const { attributes = [] } = await getCITypeAttributesByName(this.typeId)
this.tableData = attributes this.tableData = attributes.map((attr) => {
if (attr.is_password) {
attr.value_type = '7'
}
if (attr.is_link) {
attr.value_type = '8'
}
return attr
})
this.loading = false this.loading = false
this.searchAttributes() this.searchAttributes()
}, },
searchAttributes() { searchAttributes() {
const filterName = XEUtils.toValueString(this.searchKey).trim().toLowerCase() const filterName = XEUtils.toValueString(this.searchKey)
.trim()
.toLowerCase()
if (filterName) { if (filterName) {
const filterRE = new RegExp(filterName, 'gi') const filterRE = new RegExp(filterName, 'gi')
const searchProps = ['name', 'alias', 'value_type'] const searchProps = ['name', 'alias', 'value_type']
const rest = this.tableData.filter((item) => const rest = this.tableData.filter((item) =>
searchProps.some((key) => XEUtils.toValueString(item[key]).toLowerCase().indexOf(filterName) > -1) searchProps.some(
(key) =>
XEUtils.toValueString(item[key])
.toLowerCase()
.indexOf(filterName) > -1
)
) )
this.list = rest.map((row) => { this.list = rest.map((row) => {
const item = Object.assign({}, row) const item = Object.assign({}, row)

91
cmdb-ui/src/modules/cmdb/views/ci/modules/ciDetailAttrContent.vue
View File

@ -1,7 +1,13 @@
<template> <template>
<span :id="`ci-detail-attr-${attr.name}`"> <span :id="`ci-detail-attr-${attr.name}`">
<span v-if="!isEdit || attr.value_type === '6'"> <span v-if="!isEdit || attr.value_type === '6'">
<template v-if="attr.value_type === '6'">{{ JSON.stringify(ci[attr.name] || {}) }}</template> <PasswordField
:style="{ display: 'inline-block' }"
v-if="attr.is_password && ci[attr.name]"
:ci_id="ci._id"
:attr_id="attr.id"
></PasswordField>
<template v-else-if="attr.value_type === '6'">{{ JSON.stringify(ci[attr.name] || {}) }}</template>
<template v-else-if="attr.is_choice"> <template v-else-if="attr.is_choice">
<template v-if="attr.is_list"> <template v-if="attr.is_list">
<span <span
@ -12,10 +18,18 @@
padding: '1px 5px', padding: '1px 5px',
margin: '2px', margin: '2px',
...getChoiceValueStyle(attr, value), ...getChoiceValueStyle(attr, value),
display: 'inline-flex',
alignItems: 'center',
}" }"
> >
<img
v-if="getChoiceValueIcon(attr, value).id && getChoiceValueIcon(attr, value).url"
:src="`/api/common-setting/v1/file/${getChoiceValueIcon(attr, value).url}`"
:style="{ maxHeight: '13px', maxWidth: '13px', marginRight: '5px' }"
/>
<ops-icon <ops-icon
:style="{ color: getChoiceValueIcon(attr, value).color }" v-else
:style="{ color: getChoiceValueIcon(attr, value).color, marginRight: '5px' }"
:type="getChoiceValueIcon(attr, value).name" :type="getChoiceValueIcon(attr, value).name"
/> />
{{ value }}</span {{ value }}</span
@ -28,10 +42,18 @@
padding: '1px 5px', padding: '1px 5px',
margin: '2px 0', margin: '2px 0',
...getChoiceValueStyle(attr, ci[attr.name]), ...getChoiceValueStyle(attr, ci[attr.name]),
display: 'inline-flex',
alignItems: 'center',
}" }"
> >
<img
v-if="getChoiceValueIcon(attr, ci[attr.name]).id && getChoiceValueIcon(attr, ci[attr.name]).url"
:src="`/api/common-setting/v1/file/${getChoiceValueIcon(attr, ci[attr.name]).url}`"
:style="{ maxHeight: '13px', maxWidth: '13px', marginRight: '5px' }"
/>
<ops-icon <ops-icon
:style="{ color: getChoiceValueIcon(attr, ci[attr.name]).color }" v-else
:style="{ color: getChoiceValueIcon(attr, ci[attr.name]).color, marginRight: '5px' }"
:type="getChoiceValueIcon(attr, ci[attr.name]).name" :type="getChoiceValueIcon(attr, ci[attr.name]).name"
/> />
{{ ci[attr.name] }} {{ ci[attr.name] }}
@ -64,12 +86,19 @@
:key="'New_' + attr.name + choice_idx" :key="'New_' + attr.name + choice_idx"
v-for="(choice, choice_idx) in attr.choice_value" v-for="(choice, choice_idx) in attr.choice_value"
> >
<span :style="choice[1] ? choice[1].style || {} : {}"> <span :style="{ ...(choice[1] ? choice[1].style : {}), display: 'inline-flex', alignItems: 'center' }">
<ops-icon <template v-if="choice[1] && choice[1].icon && choice[1].icon.name">
:style="{ color: choice[1].icon.color }" <img
v-if="choice[1] && choice[1].icon && choice[1].icon.name" v-if="choice[1].icon.id && choice[1].icon.url"
:type="choice[1].icon.name" :src="`/api/common-setting/v1/file/${choice[1].icon.url}`"
/> :style="{ maxHeight: '13px', maxWidth: '13px', marginRight: '5px' }"
/>
<ops-icon
v-else
:style="{ color: choice[1].icon.color, marginRight: '5px' }"
:type="choice[1].icon.name"
/>
</template>
{{ choice[0] }} {{ choice[0] }}
</span> </span>
</a-select-option> </a-select-option>
@ -99,6 +128,19 @@
v-else-if="attr.value_type === '4' || attr.value_type === '3'" v-else-if="attr.value_type === '4' || attr.value_type === '3'"
:showTime="attr.value_type === '4' ? false : { format: 'HH:mm:ss' }" :showTime="attr.value_type === '4' ? false : { format: 'HH:mm:ss' }"
/> />
<!-- <a-input
size="small"
@focus="(e) => handleFocusInput(e, attr)"
v-decorator="[
attr.name,
{
validateTrigger: ['submit'],
rules: [{ required: attr.is_required }],
},
]"
style="width: 100%"
v-else-if="attr.value_type === '6'"
/> -->
<a-input <a-input
size="small" size="small"
v-decorator="[ v-decorator="[
@ -124,9 +166,12 @@ import _ from 'lodash'
import moment from 'moment' import moment from 'moment'
import { updateCI } from '@/modules/cmdb/api/ci' import { updateCI } from '@/modules/cmdb/api/ci'
import JsonEditor from '../../../components/JsonEditor/jsonEditor.vue' import JsonEditor from '../../../components/JsonEditor/jsonEditor.vue'
import PasswordField from '../../../components/passwordField/index.vue'
import { getAttrPassword } from '../../../api/CITypeAttr'
export default { export default {
name: 'CiDetailAttrContent', name: 'CiDetailAttrContent',
components: { JsonEditor }, components: { JsonEditor, PasswordField },
props: { props: {
ci: { ci: {
type: Object, type: Object,
@ -174,13 +219,21 @@ export default {
return return
} }
this.isEdit = true this.isEdit = true
this.$nextTick(() => { this.$nextTick(async () => {
if (this.attr.is_list && !this.attr.is_choice) { if (this.attr.is_list && !this.attr.is_choice) {
this.form.setFieldsValue({ this.form.setFieldsValue({
[`${this.attr.name}`]: this.ci[this.attr.name].join(',') || null, [`${this.attr.name}`]: this.ci[this.attr.name].join(',') || null,
}) })
return return
} }
if (this.attr.is_password) {
await getAttrPassword(this.ci._id, this.attr.id).then((res) => {
this.form.setFieldsValue({
[`${this.attr.name}`]: res.value ?? null,
})
})
return
}
this.form.setFieldsValue({ this.form.setFieldsValue({
[`${this.attr.name}`]: this.ci[this.attr.name] ?? null, [`${this.attr.name}`]: this.ci[this.attr.name] ?? null,
}) })
@ -192,20 +245,32 @@ export default {
await updateCI(this.ci._id, { [`${this.attr.name}`]: newData }) await updateCI(this.ci._id, { [`${this.attr.name}`]: newData })
.then(() => { .then(() => {
this.$message.success('更新成功！') this.$message.success('更新成功！')
this.$emit('updateCIByself', { [`${this.attr.name}`]: newData }, this.attr.name)
}) })
.finally(() => { .catch(() => {
this.$emit('refresh', this.attr.name) this.$emit('refresh', this.attr.name)
}) })
} }
this.isEdit = false this.isEdit = false
}, },
// handleFocusInput(e, attr) {
// console.log('focus')
// if (this.attr.value_type === '6') {
// e.preventDefault()
// e.stopPropagation()
// // e.srcElement.blur()
// const jsonData = this.form.getFieldValue(attr.name)
// this.$refs.jsonEditor.open(null, null, jsonData ? JSON.parse(jsonData) : {})
// }
// },
jsonEditorOk(jsonData) { jsonEditorOk(jsonData) {
if (!_.isEqual(this.ci[this.attr.name], jsonData)) { if (!_.isEqual(this.ci[this.attr.name], jsonData)) {
updateCI(this.ci._id, { [`${this.attr.name}`]: jsonData }) updateCI(this.ci._id, { [`${this.attr.name}`]: jsonData })
.then(() => { .then(() => {
this.$message.success('更新成功！') this.$message.success('更新成功！')
this.$emit('updateCIByself', { [`${this.attr.name}`]: jsonData }, this.attr.name)
}) })
.finally(() => { .catch(() => {
this.$emit('refresh', this.attr.name) this.$emit('refresh', this.attr.name)
}) })
} }

12
cmdb-ui/src/modules/cmdb/views/ci_types/attributeCard.vue
View File

@ -8,7 +8,9 @@
<div :class="{ 'attribute-card-name': true, 'attribute-card-name-default-show': property.default_show }"> <div :class="{ 'attribute-card-name': true, 'attribute-card-name-default-show': property.default_show }">
{{ property.alias || property.name }} {{ property.alias || property.name }}
</div> </div>
<div class="attribute-card_value-type">{{ valueTypeMap[property.value_type] }}</div> <div v-if="property.is_password" class="attribute-card_value-type">密码</div>
<div v-else-if="property.is_link" class="attribute-card_value-type">链接</div>
<div v-else class="attribute-card_value-type">{{ valueTypeMap[property.value_type] }}</div>
</div> </div>
<div <div
class="attribute-card-trigger" class="attribute-card-trigger"
@ -125,14 +127,6 @@ export default {
label: '是否索引', label: '是否索引',
property: 'is_index', property: 'is_index',
}, },
{
label: '是否密码',
property: 'is_password',
},
{
label: '是否链接',
property: 'is_link',
},
] ]
return { return {
valueTypeMap, valueTypeMap,

182
cmdb-ui/src/modules/cmdb/views/ci_types/attributeEditForm.vue
View File

@ -84,7 +84,12 @@
</a-input-number> </a-input-number>
<a-input <a-input
style="width: 100%" style="width: 100%"
v-else-if="currentValueType === '2' || currentValueType === '5'" v-else-if="
currentValueType === '2' ||
currentValueType === '5' ||
currentValueType === '7' ||
currentValueType === '8'
"
v-decorator="['default_value', { rules: [{ required: false }] }]" v-decorator="['default_value', { rules: [{ required: false }] }]"
> >
</a-input> </a-input>
@ -148,13 +153,13 @@
label="必须" label="必须"
> >
<a-switch <a-switch
@change="onChange" @change="(checked) => onChange(checked, 'is_required')"
name="is_required" name="is_required"
v-decorator="['is_required', { rules: [], valuePropName: 'checked' }]" v-decorator="['is_required', { rules: [], valuePropName: 'checked' }]"
/> />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="6" v-if="currentValueType !== '6'"> <a-col :span="6" v-if="currentValueType !== '6' && currentValueType !== '7'">
<a-form-item :label-col="{ span: 8 }" :wrapper-col="horizontalFormItemLayout.wrapperCol" label="唯一"> <a-form-item :label-col="{ span: 8 }" :wrapper-col="horizontalFormItemLayout.wrapperCol" label="唯一">
<a-switch <a-switch
:disabled="isShowComputedArea" :disabled="isShowComputedArea"
@ -228,7 +233,7 @@
/> />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="6" v-if="currentValueType !== '6'"> <a-col :span="6" v-if="currentValueType !== '6' && currentValueType !== '7'">
<a-form-item <a-form-item
:label-col="currentValueType === '2' ? horizontalFormItemLayout.labelCol : { span: 8 }" :label-col="currentValueType === '2' ? horizontalFormItemLayout.labelCol : { span: 8 }"
:wrapper-col="horizontalFormItemLayout.wrapperCol" :wrapper-col="horizontalFormItemLayout.wrapperCol"
@ -236,14 +241,14 @@
> >
<a-switch <a-switch
:disabled="isShowComputedArea" :disabled="isShowComputedArea"
@change="onChange" @change="(checked) => onChange(checked, 'is_sortable')"
name="is_sortable" name="is_sortable"
v-decorator="['is_sortable', { rules: [], valuePropName: 'checked' }]" v-decorator="['is_sortable', { rules: [], valuePropName: 'checked' }]"
/> />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="6" v-if="currentValueType !== '6'"> <a-col :span="6" v-if="currentValueType !== '6' && currentValueType !== '7'">
<a-form-item <a-form-item
:label-col="currentValueType === '2' ? { span: 8 } : horizontalFormItemLayout.labelCol" :label-col="currentValueType === '2' ? { span: 8 } : horizontalFormItemLayout.labelCol"
:wrapper-col="horizontalFormItemLayout.wrapperCol" :wrapper-col="horizontalFormItemLayout.wrapperCol"
@ -275,31 +280,6 @@
/> />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="6" v-if="currentValueType === '2'">
<a-form-item
:label-col="horizontalFormItemLayout.labelCol"
:wrapper-col="horizontalFormItemLayout.wrapperCol"
label="密码"
>
<a-switch
:disabled="isShowComputedArea"
@change="(checked) => onChange(checked, 'is_password')"
name="is_password"
v-decorator="['is_password', { rules: [], valuePropName: 'checked' }]"
/>
</a-form-item>
</a-col>
<a-col :span="6" v-if="currentValueType === '2'">
<a-form-item :label-col="{ span: 8 }" :wrapper-col="horizontalFormItemLayout.wrapperCol" label="链接">
<a-switch
:disabled="isShowComputedArea"
@change="(checked) => onChange(checked, 'is_link')"
name="is_link"
v-decorator="['is_link', { rules: [], valuePropName: 'checked' }]"
/>
</a-form-item>
</a-col>
<a-divider style="font-size:14px;margin-top:6px;">高级设置</a-divider> <a-divider style="font-size:14px;margin-top:6px;">高级设置</a-divider>
<a-row> <a-row>
<a-col :span="24"> <a-col :span="24">
@ -307,12 +287,17 @@
<FontArea ref="fontArea" /> <FontArea ref="fontArea" />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="24" v-if="currentValueType !== '6'"> <a-col :span="24" v-if="!['6', '7'].includes(currentValueType)">
<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="预定义值"> <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="预定义值">
<PreValueArea v-if="drawerVisible" ref="preValueArea" :disabled="isShowComputedArea" /> <PreValueArea
v-if="drawerVisible"
:canDefineScript="canDefineScript"
ref="preValueArea"
:disabled="isShowComputedArea"
/>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="24" v-if="currentValueType !== '6'"> <a-col :span="24" v-if="!['6', '7'].includes(currentValueType)">
<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }"> <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
<template slot="label"> <template slot="label">
<span <span
@ -340,7 +325,7 @@
<a-switch <a-switch
:disabled="!canDefineComputed" :disabled="!canDefineComputed"
@change="(checked) => onChange(checked, 'is_computed')" @change="(checked) => onChange(checked, 'is_computed')"
name="is_password" name="is_computed"
v-decorator="['is_computed', { rules: [], valuePropName: 'checked' }]" v-decorator="['is_computed', { rules: [], valuePropName: 'checked' }]"
/> />
<ComputedArea <ComputedArea
@ -366,6 +351,7 @@
</template> </template>
<script> <script>
import _ from 'lodash'
import moment from 'moment' import moment from 'moment'
import vueJsonEditor from 'vue-json-editor' import vueJsonEditor from 'vue-json-editor'
import { import {
@ -434,6 +420,9 @@ export default {
wrapperCol: { span: 4 }, wrapperCol: { span: 4 },
} }
}, },
canDefineScript() {
return this.canDefineComputed
},
}, },
mounted() {}, mounted() {},
methods: { methods: {
@ -463,28 +452,30 @@ export default {
}) })
if (this.currentValueType === '2') { if (this.currentValueType === '2') {
this.form.setFieldsValue({ this.form.setFieldsValue({
is_password: false,
is_link: false,
is_index: true, is_index: true,
}) })
} }
} }
} }
if (checked && property === 'is_password') {
this.form.setFieldsValue({
is_link: false,
})
}
if (checked && property === 'is_link') {
this.form.setFieldsValue({
is_password: false,
})
}
if (property === 'is_list') { if (property === 'is_list') {
this.form.setFieldsValue({ this.form.setFieldsValue({
default_value: checked ? [] : '', default_value: checked ? [] : '',
}) })
} }
if (checked && property === 'is_sortable') {
this.$message.warning('选中排序，则必须也要选中！')
this.form.setFieldsValue({
is_required: true,
})
}
if (!checked && property === 'is_required' && this.form.getFieldValue('is_sortable')) {
this.$message.warning('选中排序，则必须也要选中！')
this.$nextTick(() => {
this.form.setFieldsValue({
is_required: true,
})
})
}
}, },
async handleEdit(record, attributes) { async handleEdit(record, attributes) {
@ -494,90 +485,91 @@ export default {
} catch { } catch {
this.canDefineComputed = false this.canDefineComputed = false
} }
const _record = _.cloneDeep(record)
if (_record.is_password) {
_record.value_type = '7'
}
if (_record.is_link) {
_record.value_type = '8'
}
this.drawerTitle = '编辑属性' this.drawerTitle = '编辑属性'
this.drawerVisible = true this.drawerVisible = true
this.record = record this.record = _record
this.currentValueType = record.value_type this.currentValueType = _record.value_type
this.$nextTick(() => { this.$nextTick(() => {
this.form.setFieldsValue({ this.form.setFieldsValue({
id: record.id, id: _record.id,
alias: record.alias, alias: _record.alias,
name: record.name, name: _record.name,
value_type: record.value_type, value_type: _record.value_type,
is_required: record.is_required, is_required: _record.is_required,
default_show: record.default_show, default_show: _record.default_show,
}) })
if (record.value_type !== '6') { if (!['6', '7'].includes(_record.value_type)) {
this.form.setFieldsValue({ this.form.setFieldsValue({
is_list: record.is_list, is_list: _record.is_list,
is_unique: record.is_unique, is_unique: _record.is_unique,
is_index: record.is_index, is_index: _record.is_index,
is_sortable: record.is_sortable, is_sortable: _record.is_sortable,
is_computed: record.is_computed, is_computed: _record.is_computed,
}) })
} }
if (record.value_type === '2') { console.log(_record)
this.form.setFieldsValue({ if (_record.default) {
is_password: record.is_password,
is_link: record.is_link,
})
}
console.log(record)
if (record.default) {
this.$nextTick(() => { this.$nextTick(() => {
if (record.value_type === '0') { if (_record.value_type === '0') {
this.form.setFieldsValue({ this.form.setFieldsValue({
default_value: record.default.default ? [record.default.default] : [], default_value: _record.default.default ? [_record.default.default] : [],
}) })
} else if (record.value_type === '6') { } else if (_record.value_type === '6') {
this.default_value_json = record?.default?.default || null this.default_value_json = _record?.default?.default || null
} else if (record.value_type === '3' || record.value_type === '4') { } else if (_record.value_type === '3' || _record.value_type === '4') {
if (record?.default?.default === '$created_at' || record?.default?.default === '$updated_at') { if (_record?.default?.default === '$created_at' || _record?.default?.default === '$updated_at') {
this.defaultForDatetime = record.default.default this.defaultForDatetime = _record.default.default
this.form.setFieldsValue({ this.form.setFieldsValue({
default_value: record?.default?.default, default_value: _record?.default?.default,
}) })
} else { } else {
this.defaultForDatetime = '$custom_time' this.defaultForDatetime = '$custom_time'
this.form.setFieldsValue({ this.form.setFieldsValue({
default_value: record.default && record.default.default ? moment(record.default.default) : null, default_value: _record.default && _record.default.default ? moment(_record.default.default) : null,
}) })
} }
} else { } else {
this.$nextTick(() => { this.$nextTick(() => {
this.form.setFieldsValue({ this.form.setFieldsValue({
default_value: record.default && record.default.default ? record.default.default : null, default_value: _record.default && _record.default.default ? _record.default.default : null,
}) })
}) })
} }
}) })
} else { } else {
this.default_value_json = {} this.default_value_json = {}
if (record.value_type === '0') { if (_record.value_type === '0') {
this.form.setFieldsValue({ this.form.setFieldsValue({
default_value: [], default_value: [],
}) })
} else if (record.value_type !== '6') { } else if (_record.value_type !== '6') {
this.form.setFieldsValue({ this.form.setFieldsValue({
default_value: null, default_value: null,
}) })
} }
} }
this.isShowComputedArea = record.is_computed this.isShowComputedArea = _record.is_computed
if (record.is_computed) { if (_record.is_computed) {
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.computedArea.setData({ this.$refs.computedArea.setData({
compute_expr: record.compute_expr, compute_expr: _record.compute_expr,
compute_script: record.compute_script, compute_script: _record.compute_script,
}) })
}) })
} }
const _find = attributes.find((item) => item.id === record.id) const _find = attributes.find((item) => item.id === _record.id)
if (record.value_type !== '6') { if (!['6', '7'].includes(_record.value_type)) {
this.$refs.preValueArea.setData({ this.$refs.preValueArea.setData({
choice_value: (_find || {}).choice_value || [], choice_value: (_find || {}).choice_value || [],
choice_web_hook: record.choice_web_hook, choice_web_hook: _record.choice_web_hook,
choice_other: record.choice_other || undefined, choice_other: _record.choice_other || undefined,
}) })
} }
this.$refs.fontArea.setData({ this.$refs.fontArea.setData({
@ -633,13 +625,20 @@ export default {
values = { ...values, ...computedAreaData } values = { ...values, ...computedAreaData }
} else { } else {
// 如果是非计算属性，就看看有没有预定义值 // 如果是非计算属性，就看看有没有预定义值
if (values.value_type !== '6') { if (!['6', '7'].includes(values.value_type)) {
const preValueAreaData = this.$refs.preValueArea.getData() const preValueAreaData = this.$refs.preValueArea.getData()
values = { ...values, ...preValueAreaData } values = { ...values, ...preValueAreaData }
} }
} }
const fontOptions = this.$refs.fontArea.getData() const fontOptions = this.$refs.fontArea.getData()
if (values.value_type === '7') {
values.value_type = '2'
values.is_password = true
}
if (values.value_type === '8') {
values.value_type = '2'
values.is_link = true
}
if (values.id) { if (values.id) {
await this.updateAttribute(values.id, { ...values, option: { fontOptions } }, isCalcComputed) await this.updateAttribute(values.id, { ...values, option: { fontOptions } }, isCalcComputed)
} else { } else {
@ -660,7 +659,6 @@ export default {
handleOk() { handleOk() {
this.$emit('ok') this.$emit('ok')
}, },
handleChangeValueType(value) { handleChangeValueType(value) {
this.currentValueType = value this.currentValueType = value
this.$nextTick(() => { this.$nextTick(() => {

128
cmdb-ui/src/modules/cmdb/views/ci_types/ceateNewAttribute.vue
View File

@ -1,9 +1,14 @@
<template> <template>
<a-form :form="form" class="create-new-attribute"> <a-form
:form="form"
class="create-new-attribute"
:label-col="formItemLayout.labelCol"
:wrapper-col="formItemLayout.wrapperCol"
>
<a-divider style="font-size:14px;margin-top:6px;">基础设置</a-divider> <a-divider style="font-size:14px;margin-top:6px;">基础设置</a-divider>
<a-row> <a-row>
<a-col :span="12"> <a-col :span="12">
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="属性名(英文)"> <a-form-item label="属性名(英文)">
<a-input <a-input
name="name" name="name"
placeholder="英文" placeholder="英文"
@ -24,28 +29,33 @@
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="别名"> <a-form-item label="别名">
<a-input name="alias" v-decorator="['alias', { rules: [] }]" /> <a-input name="alias" v-decorator="['alias', { rules: [] }]" />
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
<a-row> <a-row>
<a-col :span="12"> <a-col :span="12">
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="数据类型"> <a-form-item label="数据类型">
<a-select <a-select
name="value_type" name="value_type"
style="width: 100%" style="width: 100%"
v-decorator="['value_type', { rules: [{ required: true }], initialValue: '2' }]" v-decorator="['value_type', { rules: [{ required: true }], initialValue: '2' }]"
@change="handleChangeValueType" @change="handleChangeValueType"
> >
<a-select-option :value="key" :key="key" v-for="(value, key) in valueTypeMap">{{ value }}</a-select-option> <a-select-option :value="key" :key="key" v-for="(value, key) in valueTypeMap">
{{ value }}
<span class="value-type-des" v-if="key === '3'">yyyy-mm-dd HH:MM:SS</span>
<span class="value-type-des" v-if="key === '4'">yyyy-mm-dd</span>
<span class="value-type-des" v-if="key === '5'">HH:MM:SS</span>
</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="currentValueType === '6' ? 24 : 12"> <a-col :span="currentValueType === '6' ? 24 : 12">
<a-form-item <a-form-item
:label-col="{ span: currentValueType === '6' ? 4 : 8 }" :label-col="{ span: currentValueType === '6' ? 4 : 8 }"
:wrapper-col="{ span: currentValueType === '6' ? 18 : 12 }" :wrapper-col="{ span: currentValueType === '6' ? 18 : 15 }"
label="默认值" label="默认值"
> >
<template> <template>
@ -74,7 +84,12 @@
</a-select> </a-select>
<a-input <a-input
style="width: 100%" style="width: 100%"
v-else-if="currentValueType === '2' || currentValueType === '5'" v-else-if="
currentValueType === '2' ||
currentValueType === '5' ||
currentValueType === '7' ||
currentValueType === '8'
"
v-decorator="['default_value', { rules: [{ required: false }] }]" v-decorator="['default_value', { rules: [{ required: false }] }]"
> >
</a-input> </a-input>
@ -140,13 +155,13 @@
label="必须" label="必须"
> >
<a-switch <a-switch
@change="onChange" @change="(checked) => onChange(checked, 'is_required')"
name="is_required" name="is_required"
v-decorator="['is_required', { rules: [], valuePropName: 'checked' }]" v-decorator="['is_required', { rules: [], valuePropName: 'checked' }]"
/> />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="6" v-if="currentValueType !== '6'"> <a-col :span="6" v-if="currentValueType !== '6' && currentValueType !== '7'">
<a-form-item :label-col="{ span: 8 }" :wrapper-col="horizontalFormItemLayout.wrapperCol" label="唯一"> <a-form-item :label-col="{ span: 8 }" :wrapper-col="horizontalFormItemLayout.wrapperCol" label="唯一">
<a-switch <a-switch
:disabled="isShowComputedArea" :disabled="isShowComputedArea"
@ -216,7 +231,7 @@
/> />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="6" v-if="currentValueType !== '6'"> <a-col :span="6" v-if="currentValueType !== '6' && currentValueType !== '7'">
<a-form-item <a-form-item
:label-col="currentValueType === '2' ? horizontalFormItemLayout.labelCol : { span: 8 }" :label-col="currentValueType === '2' ? horizontalFormItemLayout.labelCol : { span: 8 }"
:wrapper-col="horizontalFormItemLayout.wrapperCol" :wrapper-col="horizontalFormItemLayout.wrapperCol"
@ -224,14 +239,14 @@
> >
<a-switch <a-switch
:disabled="isShowComputedArea" :disabled="isShowComputedArea"
@change="onChange" @change="(checked) => onChange(checked, 'is_sortable')"
name="is_sortable" name="is_sortable"
v-decorator="['is_sortable', { rules: [], valuePropName: 'checked' }]" v-decorator="['is_sortable', { rules: [], valuePropName: 'checked' }]"
/> />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="6" v-if="currentValueType !== '6'"> <a-col :span="6" v-if="currentValueType !== '6' && currentValueType !== '7'">
<a-form-item <a-form-item
:label-col="currentValueType === '2' ? { span: 8 } : horizontalFormItemLayout.labelCol" :label-col="currentValueType === '2' ? { span: 8 } : horizontalFormItemLayout.labelCol"
:wrapper-col="horizontalFormItemLayout.wrapperCol" :wrapper-col="horizontalFormItemLayout.wrapperCol"
@ -263,30 +278,6 @@
/> />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="6" v-if="currentValueType === '2'">
<a-form-item
:label-col="horizontalFormItemLayout.labelCol"
:wrapper-col="horizontalFormItemLayout.wrapperCol"
label="密码"
>
<a-switch
:disabled="isShowComputedArea"
@change="(checked) => onChange(checked, 'is_password')"
name="is_password"
v-decorator="['is_password', { rules: [], valuePropName: 'checked' }]"
/>
</a-form-item>
</a-col>
<a-col :span="6" v-if="currentValueType === '2'">
<a-form-item :label-col="{ span: 8 }" :wrapper-col="horizontalFormItemLayout.wrapperCol" label="链接">
<a-switch
:disabled="isShowComputedArea"
@change="(checked) => onChange(checked, 'is_link')"
name="is_link"
v-decorator="['is_link', { rules: [], valuePropName: 'checked' }]"
/>
</a-form-item>
</a-col>
<a-divider style="font-size:14px;margin-top:6px;">高级设置</a-divider> <a-divider style="font-size:14px;margin-top:6px;">高级设置</a-divider>
<a-row> <a-row>
<a-col :span="24"> <a-col :span="24">
@ -294,12 +285,12 @@
<FontArea ref="fontArea" /> <FontArea ref="fontArea" />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="24" v-if="currentValueType !== '6'"> <a-col :span="24" v-if="!['6', '7'].includes(currentValueType)">
<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="预定义值"> <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="预定义值">
<PreValueArea ref="preValueArea" :disabled="isShowComputedArea" /> <PreValueArea ref="preValueArea" :canDefineScript="canDefineScript" :disabled="isShowComputedArea" />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="24"> <a-col :span="24" v-if="!['6', '7'].includes(currentValueType)">
<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }"> <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
<template slot="label"> <template slot="label">
<span <span
@ -327,7 +318,7 @@
<a-switch <a-switch
:disabled="!canDefineComputed" :disabled="!canDefineComputed"
@change="(checked) => onChange(checked, 'is_computed')" @change="(checked) => onChange(checked, 'is_computed')"
name="is_password" name="is_computed"
v-decorator="['is_computed', { rules: [], valuePropName: 'checked' }]" v-decorator="['is_computed', { rules: [], valuePropName: 'checked' }]"
/> />
<ComputedArea ref="computedArea" v-if="isShowComputedArea" :canDefineComputed="canDefineComputed" /> <ComputedArea ref="computedArea" v-if="isShowComputedArea" :canDefineComputed="canDefineComputed" />
@ -369,7 +360,7 @@ export default {
valueTypeMap, valueTypeMap,
formItemLayout: { formItemLayout: {
labelCol: { span: 8 }, labelCol: { span: 8 },
wrapperCol: { span: 12 }, wrapperCol: { span: 15 },
}, },
horizontalFormItemLayout: { horizontalFormItemLayout: {
labelCol: { span: 16 }, labelCol: { span: 16 },
@ -386,6 +377,11 @@ export default {
defaultForDatetime: '', defaultForDatetime: '',
} }
}, },
computed: {
canDefineScript() {
return this.canDefineComputed
},
},
methods: { methods: {
handleSubmit(isCloseModal = true) { handleSubmit(isCloseModal = true) {
this.form.validateFields(async (err, values) => { this.form.validateFields(async (err, values) => {
@ -428,7 +424,7 @@ export default {
values = { ...values, ...computedAreaData } values = { ...values, ...computedAreaData }
} else { } else {
// 如果是非计算属性，就看看有没有预定义值 // 如果是非计算属性，就看看有没有预定义值
if (values.value_type !== '6') { if (!['6', '7'].includes(values.value_type)) {
const preValueAreaData = this.$refs.preValueArea.getData() const preValueAreaData = this.$refs.preValueArea.getData()
values = { ...values, ...preValueAreaData } values = { ...values, ...preValueAreaData }
} }
@ -437,17 +433,25 @@ export default {
// is_index进行操作，除了文本 索引隐藏掉 文本 索引默认是true // is_index进行操作，除了文本 索引隐藏掉 文本 索引默认是true
// 框里的5种类型 is_index=true // 框里的5种类型 is_index=true
// json类型 is_index=false // json类型、密码、链接 is_index=false
if (values.value_type === '6') { if (['6', '7', '8'].includes(values.value_type)) {
values.is_index = false values.is_index = false
} else if (values.value_type !== '2') { } else if (values.value_type !== '2') {
values.is_index = true values.is_index = true
} }
if (values.value_type === '7') {
values.value_type = '2'
values.is_password = true
}
if (values.value_type === '8') {
values.value_type = '2'
values.is_link = true
}
const { attr_id } = await createAttribute({ ...values, option: { fontOptions } }) const { attr_id } = await createAttribute({ ...values, option: { fontOptions } })
this.form.resetFields() this.form.resetFields()
this.currentValueType = '2' this.currentValueType = '2'
if (values.value_type !== '6') { if (!['6'].includes(values.value_type) && !values.is_password) {
this.$refs.preValueArea.valueList = [] this.$refs.preValueArea.valueList = []
} }
this.$emit('done', attr_id, data, isCloseModal) this.$emit('done', attr_id, data, isCloseModal)
@ -485,29 +489,27 @@ export default {
is_index: false, is_index: false,
is_sortable: false, is_sortable: false,
}) })
if (this.currentValueType === '2') {
this.form.setFieldsValue({
is_password: false,
is_link: false,
})
}
} }
} }
if (checked && property === 'is_password') {
this.form.setFieldsValue({
is_link: false,
})
}
if (checked && property === 'is_link') {
this.form.setFieldsValue({
is_password: false,
})
}
if (property === 'is_list') { if (property === 'is_list') {
this.form.setFieldsValue({ this.form.setFieldsValue({
default_value: checked ? [] : '', default_value: checked ? [] : '',
}) })
} }
if (checked && property === 'is_sortable') {
this.$message.warning('选中排序，则必须也要选中！')
this.form.setFieldsValue({
is_required: true,
})
}
if (!checked && property === 'is_required' && this.form.getFieldValue('is_sortable')) {
this.$message.warning('选中排序，则必须也要选中！')
this.$nextTick(() => {
this.form.setFieldsValue({
is_required: true,
})
})
}
}, },
onJsonChange(value) { onJsonChange(value) {
this.default_value_json_right = true this.default_value_json_right = true
@ -548,4 +550,8 @@ export default {
background-color: #2f54eb; background-color: #2f54eb;
} }
} }
.value-type-des {
font-size: 10px;
color: #a9a9a9;
}
</style> </style>

3
cmdb-ui/src/modules/cmdb/views/ci_types/computedArea.vue
View File

@ -36,7 +36,7 @@ export default {
showCalcComputed: { showCalcComputed: {
type: Boolean, type: Boolean,
default: false, default: false,
} },
}, },
data() { data() {
return { return {
@ -48,7 +48,6 @@ export default {
mode: 'python', mode: 'python',
height: '200px', height: '200px',
theme: 'monokai', theme: 'monokai',
smartIndent: true,
tabSize: 4, tabSize: 4,
lineWrapping: true, lineWrapping: true,
readOnly: !this.canDefineComputed, readOnly: !this.canDefineComputed,

2
cmdb-ui/src/modules/cmdb/views/ci_types/index.vue
View File

@ -388,7 +388,7 @@ export default {
filterAttributes() { filterAttributes() {
// 唯一标识 排除掉choice password 计算属性 json // 唯一标识 排除掉choice password 计算属性 json
const _attributes = this.allAttributes.filter( const _attributes = this.allAttributes.filter(
(item) => !item.is_choice && !item.is_password && !item.is_computed && item.value_type !== '6' (item) => !item.is_choice && !item.is_computed && !['6', '7'].includes(item.value_type)
) )
if (this.filterInput) { if (this.filterInput) {
return _attributes.filter( return _attributes.filter(

76
cmdb-ui/src/modules/cmdb/views/ci_types/preValueArea.vue
View File

@ -1,5 +1,11 @@
<template> <template>
<a-tabs id="preValueArea" v-model="activeKey" size="small" :tabBarStyle="{ borderBottom: 'none' }"> <a-tabs
id="preValueArea"
v-model="activeKey"
@change="changeActiveKey"
size="small"
:tabBarStyle="{ borderBottom: 'none' }"
>
<a-tab-pane key="define" :disabled="disabled"> <a-tab-pane key="define" :disabled="disabled">
<span style="font-size:12px;" slot="tab">定义</span> <span style="font-size:12px;" slot="tab">定义</span>
<PreValueTag type="add" :item="[]" @add="addNewValue" :disabled="disabled"> <PreValueTag type="add" :item="[]" @add="addNewValue" :disabled="disabled">
@ -170,6 +176,15 @@
</a-col> </a-col>
</a-row> </a-row>
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="script" :disabled="disabled || !canDefineScript">
<span style="font-size:12px;" slot="tab">脚本</span>
<CustomCodeMirror
codeMirrorId="cmdb-pre-value"
ref="codemirror"
@changeCodeContent="changeCodeContent"
></CustomCodeMirror>
<!-- <codemirror style="z-index: 9999" :options="cmOptions" v-model="script"></codemirror> -->
</a-tab-pane>
</a-tabs> </a-tabs>
</template> </template>
@ -184,14 +199,22 @@ import { getCITypeGroups } from '../../api/ciTypeGroup'
import { getCITypeCommonAttributesByTypeIds } from '../../api/CITypeAttr' import { getCITypeCommonAttributesByTypeIds } from '../../api/CITypeAttr'
import FilterComp from '@/components/CMDBFilterComp' import FilterComp from '@/components/CMDBFilterComp'
import CustomCodeMirror from '@/components/CustomCodeMirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/monokai.css'
require('codemirror/mode/python/python.js')
export default { export default {
name: 'PreValueArea', name: 'PreValueArea',
components: { draggable, PreValueTag, ColorPicker, Webhook, FilterComp }, components: { draggable, PreValueTag, ColorPicker, Webhook, FilterComp, CustomCodeMirror },
props: { props: {
disabled: { disabled: {
type: Boolean, type: Boolean,
default: true, default: true,
}, },
canDefineScript: {
type: Boolean,
default: false,
},
}, },
data() { data() {
return { return {
@ -208,6 +231,17 @@ export default {
ciTypeGroup: [], ciTypeGroup: [],
typeAttrs: [], typeAttrs: [],
filterExp: '', filterExp: '',
script:
'class ChoiceValue(object):\n @staticmethod\n def values():\n """\n 执行入口, 返回预定义值\n :return: 返回一个列表, 值的类型同属性的类型\n 例如:\n return ["在线", "下线"]\n """\n return []',
cmOptions: {
lineNumbers: true,
mode: 'python',
height: '200px',
theme: 'monokai',
tabSize: 4,
lineWrapping: true,
readOnly: this.disabled || !this.canDefineScript,
},
} }
}, },
watch: { watch: {
@ -281,6 +315,14 @@ export default {
const choice_web_hook = this.$refs.webhook.getParams() const choice_web_hook = this.$refs.webhook.getParams()
choice_web_hook.ret_key = this.form.ret_key choice_web_hook.ret_key = this.form.ret_key
return { choice_value: [], choice_web_hook, choice_other: null } return { choice_value: [], choice_web_hook, choice_other: null }
} else if (this.activeKey === 'script') {
return {
choice_value: [],
choice_web_hook: null,
choice_other: {
script: this.script,
},
}
} else { } else {
let choice_other = {} let choice_other = {}
if (this.choice_other.type_ids && this.choice_other.type_ids.length) { if (this.choice_other.type_ids && this.choice_other.type_ids.length) {
@ -302,14 +344,22 @@ export default {
this.form.ret_key = choice_web_hook.ret_key ?? '' this.form.ret_key = choice_web_hook.ret_key ?? ''
}) })
} else if (choice_other) { } else if (choice_other) {
this.activeKey = 'choice_other' if (choice_other.script) {
const { type_ids, attr_id, filter } = choice_other this.activeKey = 'script'
this.choice_other = { type_ids, attr_id } this.script = choice_other.script
this.filterExp = filter
if (type_ids && type_ids.length) {
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.filterComp.visibleChange(true, false) this.$refs.codemirror.initCodeMirror(choice_other.script)
}) })
} else {
this.activeKey = 'choice_other'
const { type_ids, attr_id, filter } = choice_other
this.choice_other = { type_ids, attr_id }
this.filterExp = filter
if (type_ids && type_ids.length) {
this.$nextTick(() => {
this.$refs.filterComp.visibleChange(true, false)
})
}
} }
} else { } else {
this.valueList = choice_value this.valueList = choice_value
@ -330,6 +380,16 @@ export default {
this.filterExp = '' this.filterExp = ''
} }
}, },
changeCodeContent(value) {
this.script = value && value.replace('\t', ' ')
},
changeActiveKey(value) {
if (value === 'script') {
this.$nextTick(() => {
this.$refs.codemirror.initCodeMirror(this.script)
})
}
},
}, },
} }
</script> </script>

9
cmdb-ui/src/modules/cmdb/views/custom_dashboard/chartForm.vue
View File

@ -90,9 +90,12 @@
mode="multiple" mode="multiple"
show-search show-search
> >
<a-select-option v-for="attr in commonAttributes" :key="attr.id" :value="attr.id">{{ <a-select-option
attr.alias || attr.name v-for="attr in commonAttributes.filter((attr) => !attr.is_password)"
}}</a-select-option> :key="attr.id"
:value="attr.id"
>{{ attr.alias || attr.name }}</a-select-option
>
</a-select> </a-select>
</a-form-model-item> </a-form-model-item>
<a-form-model-item <a-form-model-item

1
cmdb-ui/src/modules/cmdb/views/discovery/editDrawer.vue
View File

@ -185,7 +185,6 @@ if __name__ == "__main__":
mode: 'python', mode: 'python',
height: '200px', height: '200px',
theme: 'monokai', theme: 'monokai',
smartIndent: true,
tabSize: 4, tabSize: 4,
lineWrapping: true, lineWrapping: true,
}, },

75
cmdb-ui/src/modules/cmdb/views/relation_views/index.vue
View File

@ -25,7 +25,7 @@
:expandedKeys="expandedKeys" :expandedKeys="expandedKeys"
> >
<a-icon slot="switcherIcon" type="down" /> <a-icon slot="switcherIcon" type="down" />
<template #title="{ key: treeKey, title, isLeaf }"> <template #title="{ key: treeKey, title,isLeaf }">
<ContextMenu <ContextMenu
:title="title" :title="title"
:treeKey="treeKey" :treeKey="treeKey"
@ -135,7 +135,8 @@
{{ col.title }}</span {{ col.title }}</span
> >
</template> </template>
<template v-if="col.is_choice" #edit="{ row }"> <template v-if="col.is_choice || col.is_password" #edit="{ row }">
<vxe-input v-if="col.is_password" v-model="passwordValue[col.field]" />
<a-select <a-select
:getPopupContainer="(trigger) => trigger.parentElement" :getPopupContainer="(trigger) => trigger.parentElement"
:style="{ width: '100%', height: '32px' }" :style="{ width: '100%', height: '32px' }"
@ -177,10 +178,20 @@
#default="{row}" #default="{row}"
> >
<span v-if="col.value_type === '6' && row[col.field]">{{ row[col.field] }}</span> <span v-if="col.value_type === '6' && row[col.field]">{{ row[col.field] }}</span>
<a v-else-if="col.is_link" :href="`${row[col.field]}`" target="_blank">{{ row[col.field] }}</a> <a
v-else-if="col.is_link && row[col.field]"
:href="
row[col.field].startsWith('http') || row[col.field].startsWith('https')
? `${row[col.field]}`
: `http://${row[col.field]}`
"
target="_blank"
>{{ row[col.field] }}</a
>
<PasswordField <PasswordField
v-else-if="col.is_password && row[col.field]" v-else-if="col.is_password && row[col.field]"
:password="row[col.field]" :ci_id="row._id"
:attr_id="col.attr_id"
></PasswordField> ></PasswordField>
<template v-else-if="col.is_choice"> <template v-else-if="col.is_choice">
<template v-if="col.is_list"> <template v-if="col.is_list">
@ -333,7 +344,7 @@ import {
} from '@/modules/cmdb/api/CIRelation' } from '@/modules/cmdb/api/CIRelation'
import { getCITypeAttributesById } from '@/modules/cmdb/api/CITypeAttr' import { getCITypeAttributesById } from '@/modules/cmdb/api/CITypeAttr'
import { searchCI2, updateCI, deleteCI } from '@/modules/cmdb/api/ci' import { searchCI2, updateCI, deleteCI, searchCI } from '@/modules/cmdb/api/ci'
import { getCITypes } from '../../api/CIType' import { getCITypes } from '../../api/CIType'
import { roleHasPermissionToGrant } from '@/modules/acl/api/permission' import { roleHasPermissionToGrant } from '@/modules/acl/api/permission'
import { searchResourceType } from '@/modules/acl/api/resource' import { searchResourceType } from '@/modules/acl/api/resource'
@ -347,6 +358,7 @@ import PasswordField from '../../components/passwordField/index.vue'
import PreferenceSearch from '../../components/preferenceSearch/preferenceSearch.vue' import PreferenceSearch from '../../components/preferenceSearch/preferenceSearch.vue'
import CMDBGrant from '../../components/cmdbGrant' import CMDBGrant from '../../components/cmdbGrant'
import { ops_move_icon as OpsMoveIcon } from '@/core/icons' import { ops_move_icon as OpsMoveIcon } from '@/core/icons'
import { getAttrPassword } from '../../api/CITypeAttr'
export default { export default {
name: 'RelationViews', name: 'RelationViews',
@ -407,6 +419,11 @@ export default {
tableDragClassName: [], tableDragClassName: [],
resource_type: {}, resource_type: {},
initialPasswordValue: {},
passwordValue: {},
lastEditCiId: null,
isContinueCloseEdit: true,
} }
}, },
@ -890,6 +907,12 @@ export default {
calcColumns() { calcColumns() {
const width = document.getElementById('relation-views-right').clientWidth const width = document.getElementById('relation-views-right').clientWidth
this.columns = getCITableColumns(this.instanceList, this.preferenceAttrList, width) this.columns = getCITableColumns(this.instanceList, this.preferenceAttrList, width)
this.columns.forEach((col) => {
if (col.is_password) {
this.initialPasswordValue[col.field] = ''
this.passwordValue[col.field] = ''
}
})
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.xTable.refreshColumn() this.$refs.xTable.refreshColumn()
}) })
@ -1076,15 +1099,47 @@ export default {
} }
return _editRender return _editRender
}, },
handleEditActived() {}, handleEditActived() {
const passwordCol = this.columns.filter((col) => col.is_password)
this.$nextTick(() => {
const editRecord = this.$refs.xTable.getVxetableRef().getEditRecord()
const { row, column } = editRecord
if (passwordCol.length && this.lastEditCiId !== row._id) {
this.$nextTick(async () => {
for (let i = 0; i < passwordCol.length; i++) {
await getAttrPassword(row._id, passwordCol[i].attr_id).then((res) => {
this.initialPasswordValue[passwordCol[i].field] = res.value
this.passwordValue[passwordCol[i].field] = res.value
})
}
this.isContinueCloseEdit = false
await this.$refs.xTable.getVxetableRef().clearEdit()
this.isContinueCloseEdit = true
this.$nextTick(() => {
this.$refs.xTable.getVxetableRef().setEditCell(row, column.field)
})
})
}
this.lastEditCiId = row._id
})
},
handleEditClose({ row, rowIndex, column }) { handleEditClose({ row, rowIndex, column }) {
if (!this.isContinueCloseEdit) {
return
}
const $table = this.$refs['xTable'] const $table = this.$refs['xTable']
const data = {} const data = {}
this.columns.forEach((item) => { this.columns.forEach((item) => {
if (!_.isEqual(row[item.field], this.initialInstanceList[rowIndex][item.field])) { if (!_.isEqual(row[item.field], this.initialInstanceList[rowIndex][item.field])) {
data[item.field] = row[item.field] || null data[item.field] = row[item.field] ?? null
} }
}) })
Object.keys(this.initialPasswordValue).forEach((key) => {
if (this.initialPasswordValue[key] !== this.passwordValue[key]) {
data[key] = this.passwordValue[key]
}
})
this.lastEditCiId = null
if (JSON.stringify(data) !== '{}') { if (JSON.stringify(data) !== '{}') {
updateCI(row.ci_id || row._id, data) updateCI(row.ci_id || row._id, data)
.then(() => { .then(() => {
@ -1102,6 +1157,12 @@ export default {
$table.revertData(row) $table.revertData(row)
}) })
} }
this.columns.forEach((col) => {
if (col.is_password) {
this.initialPasswordValue[col.field] = ''
this.passwordValue[col.field] = ''
}
})
}, },
deleteCI(record) { deleteCI(record) {
const that = this const that = this

17
cmdb-ui/src/modules/cmdb/views/resource_search/index.vue
View File

@ -96,8 +96,21 @@
> >
<template v-if="col.value_type === '6' || col.is_link || col.is_password || col.is_choice" #default="{row}"> <template v-if="col.value_type === '6' || col.is_link || col.is_password || col.is_choice" #default="{row}">
<span v-if="col.value_type === '6' && row[col.field]">{{ JSON.stringify(row[col.field]) }}</span> <span v-if="col.value_type === '6' && row[col.field]">{{ JSON.stringify(row[col.field]) }}</span>
<a v-else-if="col.is_link" :href="`${row[col.field]}`" target="_blank">{{ row[col.field] }}</a> <a
<PasswordField v-else-if="col.is_password && row[col.field]" :password="row[col.field]"></PasswordField> v-else-if="col.is_link && row[col.field]"
:href="
row[col.field].startsWith('http') || row[col.field].startsWith('https')
? `${row[col.field]}`
: `http://${row[col.field]}`
"
target="_blank"
>{{ row[col.field] }}</a
>
<PasswordField
v-else-if="col.is_password && row[col.field]"
:ci_id="row._id"
:attr_id="col.attr_id"
></PasswordField>
<template v-else-if="col.is_choice"> <template v-else-if="col.is_choice">
<template v-if="col.is_list"> <template v-if="col.is_list">
<span <span

77
cmdb-ui/src/modules/cmdb/views/tree_views/index.vue
View File

@ -3,7 +3,7 @@
<div v-if="!subscribeTreeViewCiTypesLoading && subscribeTreeViewCiTypes.length === 0"> <div v-if="!subscribeTreeViewCiTypesLoading && subscribeTreeViewCiTypes.length === 0">
<a-alert message="请先到 我的订阅 页面完成订阅!" banner></a-alert> <a-alert message="请先到 我的订阅 页面完成订阅!" banner></a-alert>
</div> </div>
<div class="tree-views" v-else> <div class="tree-views">
<div class="cmdb-views-header"> <div class="cmdb-views-header">
<span> <span>
<span class="cmdb-views-header-title">{{ currentCiTypeName }}</span> <span class="cmdb-views-header-title">{{ currentCiTypeName }}</span>
@ -193,7 +193,8 @@
{{ col.title }}</span {{ col.title }}</span
> >
</template> </template>
<template v-if="col.is_choice" #edit="{ row }"> <template v-if="col.is_choice || col.is_password" #edit="{ row }">
<vxe-input v-if="col.is_password" v-model="passwordValue[col.field]" />
<a-select <a-select
:getPopupContainer="(trigger) => trigger.parentElement" :getPopupContainer="(trigger) => trigger.parentElement"
:style="{ width: '100%', height: '32px' }" :style="{ width: '100%', height: '32px' }"
@ -232,13 +233,23 @@
</template> </template>
<template <template
v-if="col.value_type === '6' || col.is_link || col.is_password || col.is_choice" v-if="col.value_type === '6' || col.is_link || col.is_password || col.is_choice"
#default="{ row }" #default="{row}"
> >
<span v-if="col.value_type === '6' && row[col.field]">{{ row[col.field] }}</span> <span v-if="col.value_type === '6' && row[col.field]">{{ row[col.field] }}</span>
<a v-else-if="col.is_link" :href="`${row[col.field]}`" target="_blank">{{ row[col.field] }}</a> <a
v-else-if="col.is_link && row[col.field]"
:href="
row[col.field].startsWith('http') || row[col.field].startsWith('https')
? `${row[col.field]}`
: `http://${row[col.field]}`
"
target="_blank"
>{{ row[col.field] }}</a
>
<PasswordField <PasswordField
v-else-if="col.is_password && row[col.field]" v-else-if="col.is_password && row[col.field]"
:password="row[col.field]" :ci_id="row._id"
:attr_id="col.attr_id"
></PasswordField> ></PasswordField>
<template v-else-if="col.is_choice"> <template v-else-if="col.is_choice">
<template v-if="col.is_list"> <template v-if="col.is_list">
@ -400,6 +411,7 @@ import PreferenceSearch from '../../components/preferenceSearch/preferenceSearch
import MetadataDrawer from '../ci/modules/MetadataDrawer.vue' import MetadataDrawer from '../ci/modules/MetadataDrawer.vue'
import { intersection } from '@/utils/functions/set' import { intersection } from '@/utils/functions/set'
import { ops_move_icon as OpsMoveIcon } from '@/core/icons' import { ops_move_icon as OpsMoveIcon } from '@/core/icons'
import { getAttrPassword } from '../../api/CITypeAttr'
export default { export default {
name: 'TreeViews', name: 'TreeViews',
@ -454,6 +466,11 @@ export default {
tableDragClassName: [], tableDragClassName: [],
// 已经设置过data的node // 已经设置过data的node
isSetDataNodes: [], isSetDataNodes: [],
initialPasswordValue: {},
passwordValue: {},
lastEditCiId: null,
isContinueCloseEdit: true,
} }
}, },
@ -487,7 +504,7 @@ export default {
}, },
}, },
watch: { watch: {
'$route.path': function (newPath, oldPath) { '$route.path': function(newPath, oldPath) {
this.newLoad = true this.newLoad = true
this.typeId = this.$route.params.typeId this.typeId = this.$route.params.typeId
this.initPage() this.initPage()
@ -652,6 +669,12 @@ export default {
if (treeViewsRight) { if (treeViewsRight) {
const width = treeViewsRight.clientWidth - 50 const width = treeViewsRight.clientWidth - 50
this.columns = getCITableColumns(res.result, this.currentAttrList, width) this.columns = getCITableColumns(res.result, this.currentAttrList, width)
this.columns.forEach((col) => {
if (col.is_password) {
this.initialPasswordValue[col.field] = ''
this.passwordValue[col.field] = ''
}
})
} }
} catch (e) { } catch (e) {
console.log(e) console.log(e)
@ -918,15 +941,47 @@ export default {
onSelectRangeEnd({ records }) { onSelectRangeEnd({ records }) {
this.selectedRowKeys = records.map((i) => i.ci_id || i._id) this.selectedRowKeys = records.map((i) => i.ci_id || i._id)
}, },
handleEditActived() {}, handleEditActived() {
const passwordCol = this.columns.filter((col) => col.is_password)
this.$nextTick(() => {
const editRecord = this.$refs.xTable.getVxetableRef().getEditRecord()
const { row, column } = editRecord
if (passwordCol.length && this.lastEditCiId !== row._id) {
this.$nextTick(async () => {
for (let i = 0; i < passwordCol.length; i++) {
await getAttrPassword(row._id, passwordCol[i].attr_id).then((res) => {
this.initialPasswordValue[passwordCol[i].field] = res.value
this.passwordValue[passwordCol[i].field] = res.value
})
}
this.isContinueCloseEdit = false
await this.$refs.xTable.getVxetableRef().clearEdit()
this.isContinueCloseEdit = true
this.$nextTick(() => {
this.$refs.xTable.getVxetableRef().setEditCell(row, column.field)
})
})
}
this.lastEditCiId = row._id
})
},
handleEditClose({ row, rowIndex, column }) { handleEditClose({ row, rowIndex, column }) {
if (!this.isContinueCloseEdit) {
return
}
const $table = this.$refs['xTable'].getVxetableRef() const $table = this.$refs['xTable'].getVxetableRef()
const data = {} const data = {}
this.columns.forEach((item) => { this.columns.forEach((item) => {
if (!_.isEqual(row[item.field], this.initialInstanceList[rowIndex][item.field])) { if (!_.isEqual(row[item.field], this.initialInstanceList[rowIndex][item.field])) {
data[item.field] = row[item.field] || null data[item.field] = row[item.field] ?? null
} }
}) })
Object.keys(this.initialPasswordValue).forEach((key) => {
if (this.initialPasswordValue[key] !== this.passwordValue[key]) {
data[key] = this.passwordValue[key]
}
})
this.lastEditCiId = null
if (JSON.stringify(data) !== '{}') { if (JSON.stringify(data) !== '{}') {
updateCI(row._id, data) updateCI(row._id, data)
.then(() => { .then(() => {
@ -953,6 +1008,12 @@ export default {
$table.revertData(row) $table.revertData(row)
}) })
} }
this.columns.forEach((col) => {
if (col.is_password) {
this.initialPasswordValue[col.field] = ''
this.passwordValue[col.field] = ''
}
})
}, },
jsonEditorOk(row, column, jsonData) { jsonEditorOk(row, column, jsonData) {
// 后端写数据有快慢，不拉接口直接修改table的数据 // 后端写数据有快慢，不拉接口直接修改table的数据