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;">
<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">
<span class="icon iconfont">&#xe88e;</span>
<div class="name">wechatApp</div>
@ -4002,9 +4044,9 @@
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1696815443987') format('woff2'),
url('iconfont.woff?t=1696815443987') format('woff'),
url('iconfont.ttf?t=1696815443987') format('truetype');
src: url('iconfont.woff2?t=1698273699449') format('woff2'),
url('iconfont.woff?t=1698273699449') format('woff'),
url('iconfont.ttf?t=1698273699449') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@ -4030,6 +4072,69 @@
<div class="content font-class">
<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">
<span class="icon iconfont wechatApp"></span>
<div class="name">
@ -9952,6 +10057,62 @@
<div class="content symbol">
<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">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#wechatApp"></use>

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

@ -1,8 +1,8 @@
@font-face {
font-family: "iconfont"; /* Project id 3857903 */
src: url('iconfont.woff2?t=1696815443987') format('woff2'),
url('iconfont.woff?t=1696815443987') format('woff'),
url('iconfont.ttf?t=1696815443987') format('truetype');
src: url('iconfont.woff2?t=1698273699449') format('woff2'),
url('iconfont.woff?t=1698273699449') format('woff'),
url('iconfont.ttf?t=1698273699449') format('truetype');
}
.iconfont {
@ -13,6 +13,34 @@
-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 {
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": "",
"description": "",
"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",
"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>
</slot>
<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' }" />
<div style="width:534px">
<a-space :style="{ display: 'flex', justifyContent: 'flex-end' }">
@ -22,7 +25,11 @@
</div>
</template>
</a-popover>
<Expression v-else v-model="ruleList" :canSearchPreferenceAttrList="canSearchPreferenceAttrList" />
<Expression
v-else
v-model="ruleList"
:canSearchPreferenceAttrList="canSearchPreferenceAttrList.filter((attr) => !attr.is_password)"
/>
</div>
</template>
@ -152,14 +159,15 @@ export default {
})
this.ruleList = [...expArray]
} else if (open) {
const _canSearchPreferenceAttrList = this.canSearchPreferenceAttrList.filter((attr) => !attr.is_password)
this.ruleList = isInitOne
? [
{
id: uuidv4(),
type: 'and',
property:
this.canSearchPreferenceAttrList && this.canSearchPreferenceAttrList.length
? this.canSearchPreferenceAttrList[0].name
_canSearchPreferenceAttrList && _canSearchPreferenceAttrList.length
? _canSearchPreferenceAttrList[0].name
: undefined,
exp: 'is',
value: null,

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

@ -14,24 +14,6 @@ export default {
},
},
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) {
switch (attr.value_type) {
case '0':
@ -39,6 +21,12 @@ export default {
case '1':
return 'icon-xianxing-fudianshu'
case '2':
if (attr.is_password) {
return 'icon-xianxing-password'
}
if (attr.is_link) {
return 'icon-xianxing-link'
}
return 'icon-xianxing-wenben'
case '3':
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',
})
}
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>
<span v-if="!isShow && !isTableLoading">{{ showPassword }}</span>
<span v-else>{{ password }}</span>
<a
:style="{ marginLeft: '10px' }"
@click="
() => {
isShow = !isShow
}
"
><a-icon
:type="isShow ? 'eye-invisible' : 'eye'"
/></a>
<a :style="{ marginLeft: '10px' }" @click="getPassword"><a-icon :type="isShow ? 'eye-invisible' : 'eye'"/></a>
</div>
</template>
<script>
import { mapState } from 'vuex'
import { getAttrPassword } from '../../api/CITypeAttr'
export default {
name: 'PasswordField',
props: {
password: {
type: String,
default: '',
ci_id: {
type: Number,
default: 0,
},
attr_id: {
type: Number,
default: 0,
},
},
data() {
return {
isShow: false,
password: '',
}
},
computed: {
@ -36,6 +33,18 @@ export default {
},
...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>

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

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

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

@ -2,10 +2,12 @@ export const valueTypeMap = {
'0': '整数',
'1': '浮点数',
'2': '文本',
'3': 'datetime',
'4': 'date',
'5': 'time',
'6': 'json'
'3': '日期时间',
'4': '日期',
'5': '时间',
'6': 'JSON',
'7': '密码',
'8': '链接'
}
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({
attr_id:attr.id,
editRender,
title: attr.alias || attr.name,
field: attr.name,
@ -127,6 +128,10 @@ export const getPropertyStyle = (attr) => {
return { color: '#08979c', backgroundColor: '#e6fffb' }
case '6':
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'"
:fixed="col.is_fixed ? 'left' : ''"
>
<!-- <template #edit="{row}"><a-input v-model="row[col.field]"></a-input></template> -->
<template #header>
<span class="vxe-handle">
<OpsMoveIcon
@ -107,7 +108,8 @@
<span>{{ col.title }}</span>
</span>
</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
:getPopupContainer="(trigger) => trigger.parentElement"
:style="{ width: '100%', height: '32px' }"
@ -149,8 +151,21 @@
#default="{ row }"
>
<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>
<PasswordField v-else-if="col.is_password && row[col.field]" :password="row[col.field]"></PasswordField>
<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
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-if="col.is_list">
<span
@ -198,8 +213,8 @@
:style="{ color: getChoiceValueIcon(col, row[col.field]).color, marginRight: '5px' }"
:type="getChoiceValueIcon(col, row[col.field]).name"
/>
{{ row[col.field] }}</span
>
{{ row[col.field] }}
</span>
</template>
</template>
</vxe-table-column>
@ -207,6 +222,7 @@
<template #header>
<span>操作</span>
<EditAttrsPopover :typeId="typeId" class="operation-icon" @refresh="refreshAfterEditAttrs" />
<!-- <a-icon class="operation-icon" type="control" /> -->
</template>
<template #default="{ row }">
<a-space>
@ -289,6 +305,7 @@ import PreferenceSearch from '../../components/preferenceSearch/preferenceSearch
import MetadataDrawer from './modules/MetadataDrawer.vue'
import CMDBGrant from '../../components/cmdbGrant'
import { ops_move_icon as OpsMoveIcon } from '@/core/icons'
import { getAttrPassword } from '../../api/CITypeAttr'
export default {
name: 'InstanceList',
@ -348,13 +365,18 @@ export default {
tableDragClassName: [],
resource_type: {},
initialPasswordValue: {},
passwordValue: {},
lastEditCiId: null,
isContinueCloseEdit: true,
}
},
watch: {
'$route.path': function (newPath, oldPath) {
'$route.path': function(newPath, oldPath) {
this.reloadBoard()
},
currentPage: function (newVal, oldVal) {
currentPage: function(newVal, oldVal) {
this.loadTableData(this.sortByTable)
},
},
@ -438,6 +460,12 @@ export default {
})
this.totalNumber = res['numfound']
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')
this.instanceList = res['result'].map((item) => {
jsonAttrList.forEach(
@ -492,14 +520,23 @@ export default {
},
handleEditClose({ row, rowIndex, column }) {
if (!this.isContinueCloseEdit) {
return
}
const $table = this.$refs['xTable'].getVxetableRef()
const data = {}
this.columns.forEach((item) => {
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.lastEditCiId = null
if (JSON.stringify(data) !== '{}') {
updateCI(row.ci_id || row._id, data)
.then(() => {
@ -517,6 +554,12 @@ export default {
$table.revertData(row)
})
}
this.columns.forEach((col) => {
if (col.is_password) {
this.initialPasswordValue[col.field] = ''
this.passwordValue[col.field] = ''
}
})
},
async openBatchDownload() {
@ -716,7 +759,7 @@ export default {
},
onEnd: (params) => {
// 由于开启了虚拟滚动，newIndex和oldIndex是虚拟的
const { newIndex, oldIndex } = params
const { newIndex, oldIndex, from, to } = params
// 从tableDragClassName拿到colid
const fromColid = this.tableDragClassName[oldIndex]
const toColid = this.tableDragClassName[newIndex]
@ -749,6 +792,28 @@ export default {
},
handleEditActived() {
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 }) {
const { property } = column

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

@ -30,7 +30,7 @@
:key="attr.name"
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>
</div>
@ -97,6 +97,7 @@
</template>
<script>
import _ from 'lodash'
import { Descriptions, DescriptionsItem } from 'element-ui'
import { getCITypeGroupById, getCITypes } from '@/modules/cmdb/api/CIType'
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>

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

@ -114,7 +114,7 @@
<a-col :span="2">
<a-form-item>
<a :style="{ color: 'red', marginTop: '2px' }" @click="handleDelete(list.name)">
<a-icon type="delete"/>
<a-icon type="delete" />
</a>
</a-form-item>
</a-col>
@ -122,6 +122,7 @@
<a-button type="primary" ghost icon="plus" @click="handleAdd">新增修改字段</a-button>
</a-form>
</template>
<!-- </a-form> -->
<JsonEditor ref="jsonEditor" @jsonEditorOk="jsonEditorOk" />
</CustomDrawer>
</template>
@ -222,10 +223,18 @@ export default {
}
Object.keys(values).forEach((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')
}
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')
}
if (_tempFind.value_type === '6') {
@ -247,10 +256,18 @@ export default {
Object.keys(values).forEach((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')
}
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')
}
if (_tempFind.value_type === '6') {
@ -258,6 +275,7 @@ export default {
}
})
values.ci_type = _this.typeId
console.log(this.parentsForm)
Object.keys(this.parentsForm).forEach((type) => {
if (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"
:title-help="column.help !== null ? { message: column.help } : null"
:filters="
index < 2 ? null: index === 2
? valueTypeFilters: [{ label: '是', value: true }, { label: '否', value: false },]"
index < 2
? null
: index === 2
? valueTypeFilters
: [
{ label: '是', value: true },
{ label: '否', value: false },
]
"
type="html"
>
<template #default="{ row }">
@ -133,18 +140,6 @@ export default {
width: 100,
help: '仅针对前端',
},
{
field: 'is_password',
title: '是否密码',
width: 100,
help: null,
},
{
field: 'is_link',
title: '是否链接',
width: 110,
help: null,
},
{
field: 'is_computed',
title: '计算属性',
@ -168,7 +163,7 @@ export default {
return this.$store.state.windowHeight
},
},
created: function () {
created: function() {
this.valueTypeFilters = Object.keys(this.valueTypeMap).map((key) => {
return { label: this.valueTypeMap[key], value: key }
})
@ -182,17 +177,32 @@ export default {
async getAttrs() {
this.loading = true
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.searchAttributes()
},
searchAttributes() {
const filterName = XEUtils.toValueString(this.searchKey).trim().toLowerCase()
const filterName = XEUtils.toValueString(this.searchKey)
.trim()
.toLowerCase()
if (filterName) {
const filterRE = new RegExp(filterName, 'gi')
const searchProps = ['name', 'alias', 'value_type']
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) => {
const item = Object.assign({}, row)

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

@ -1,7 +1,13 @@
<template>
<span :id="`ci-detail-attr-${attr.name}`">
<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-if="attr.is_list">
<span
@ -12,10 +18,18 @@
padding: '1px 5px',
margin: '2px',
...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
:style="{ color: getChoiceValueIcon(attr, value).color }"
v-else
:style="{ color: getChoiceValueIcon(attr, value).color, marginRight: '5px' }"
:type="getChoiceValueIcon(attr, value).name"
/>
{{ value }}</span
@ -28,10 +42,18 @@
padding: '1px 5px',
margin: '2px 0',
...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
: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"
/>
{{ ci[attr.name] }}
@ -64,12 +86,19 @@
:key="'New_' + attr.name + choice_idx"
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' }">
<template v-if="choice[1] && choice[1].icon && choice[1].icon.name">
<img
v-if="choice[1].icon.id && choice[1].icon.url"
:src="`/api/common-setting/v1/file/${choice[1].icon.url}`"
:style="{ maxHeight: '13px', maxWidth: '13px', marginRight: '5px' }"
/>
<ops-icon
:style="{ color: choice[1].icon.color }"
v-if="choice[1] && choice[1].icon && choice[1].icon.name"
v-else
:style="{ color: choice[1].icon.color, marginRight: '5px' }"
:type="choice[1].icon.name"
/>
</template>
{{ choice[0] }}
</span>
</a-select-option>
@ -99,6 +128,19 @@
v-else-if="attr.value_type === '4' || attr.value_type === '3'"
: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
size="small"
v-decorator="[
@ -124,9 +166,12 @@ import _ from 'lodash'
import moment from 'moment'
import { updateCI } from '@/modules/cmdb/api/ci'
import JsonEditor from '../../../components/JsonEditor/jsonEditor.vue'
import PasswordField from '../../../components/passwordField/index.vue'
import { getAttrPassword } from '../../../api/CITypeAttr'
export default {
name: 'CiDetailAttrContent',
components: { JsonEditor },
components: { JsonEditor, PasswordField },
props: {
ci: {
type: Object,
@ -174,13 +219,21 @@ export default {
return
}
this.isEdit = true
this.$nextTick(() => {
this.$nextTick(async () => {
if (this.attr.is_list && !this.attr.is_choice) {
this.form.setFieldsValue({
[`${this.attr.name}`]: this.ci[this.attr.name].join(',') || null,
})
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.attr.name}`]: this.ci[this.attr.name] ?? null,
})
@ -192,20 +245,32 @@ export default {
await updateCI(this.ci._id, { [`${this.attr.name}`]: newData })
.then(() => {
this.$message.success('更新成功！')
this.$emit('updateCIByself', { [`${this.attr.name}`]: newData }, this.attr.name)
})
.finally(() => {
.catch(() => {
this.$emit('refresh', this.attr.name)
})
}
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) {
if (!_.isEqual(this.ci[this.attr.name], jsonData)) {
updateCI(this.ci._id, { [`${this.attr.name}`]: jsonData })
.then(() => {
this.$message.success('更新成功！')
this.$emit('updateCIByself', { [`${this.attr.name}`]: jsonData }, this.attr.name)
})
.finally(() => {
.catch(() => {
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 }">
{{ property.alias || property.name }}
</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
class="attribute-card-trigger"
@ -125,14 +127,6 @@ export default {
label: '是否索引',
property: 'is_index',
},
{
label: '是否密码',
property: 'is_password',
},
{
label: '是否链接',
property: 'is_link',
},
]
return {
valueTypeMap,

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

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

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

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

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

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

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

@ -388,7 +388,7 @@ export default {
filterAttributes() {
// 唯一标识 排除掉choice password 计算属性 json
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) {
return _attributes.filter(

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

@ -1,5 +1,11 @@
<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">
<span style="font-size:12px;" slot="tab">定义</span>
<PreValueTag type="add" :item="[]" @add="addNewValue" :disabled="disabled">
@ -170,6 +176,15 @@
</a-col>
</a-row>
</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>
</template>
@ -184,14 +199,22 @@ import { getCITypeGroups } from '../../api/ciTypeGroup'
import { getCITypeCommonAttributesByTypeIds } from '../../api/CITypeAttr'
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 {
name: 'PreValueArea',
components: { draggable, PreValueTag, ColorPicker, Webhook, FilterComp },
components: { draggable, PreValueTag, ColorPicker, Webhook, FilterComp, CustomCodeMirror },
props: {
disabled: {
type: Boolean,
default: true,
},
canDefineScript: {
type: Boolean,
default: false,
},
},
data() {
return {
@ -208,6 +231,17 @@ export default {
ciTypeGroup: [],
typeAttrs: [],
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: {
@ -281,6 +315,14 @@ export default {
const choice_web_hook = this.$refs.webhook.getParams()
choice_web_hook.ret_key = this.form.ret_key
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 {
let choice_other = {}
if (this.choice_other.type_ids && this.choice_other.type_ids.length) {
@ -302,6 +344,13 @@ export default {
this.form.ret_key = choice_web_hook.ret_key ?? ''
})
} else if (choice_other) {
if (choice_other.script) {
this.activeKey = 'script'
this.script = choice_other.script
this.$nextTick(() => {
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 }
@ -311,6 +360,7 @@ export default {
this.$refs.filterComp.visibleChange(true, false)
})
}
}
} else {
this.valueList = choice_value
this.activeKey = 'define'
@ -330,6 +380,16 @@ export default {
this.filterExp = ''
}
},
changeCodeContent(value) {
this.script = value && value.replace('\t', ' ')
},
changeActiveKey(value) {
if (value === 'script') {
this.$nextTick(() => {
this.$refs.codemirror.initCodeMirror(this.script)
})
}
},
},
}
</script>

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

@ -90,9 +90,12 @@
mode="multiple"
show-search
>
<a-select-option v-for="attr in commonAttributes" :key="attr.id" :value="attr.id">{{
attr.alias || attr.name
}}</a-select-option>
<a-select-option
v-for="attr in commonAttributes.filter((attr) => !attr.is_password)"
:key="attr.id"
:value="attr.id"
>{{ attr.alias || attr.name }}</a-select-option
>
</a-select>
</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',
height: '200px',
theme: 'monokai',
smartIndent: true,
tabSize: 4,
lineWrapping: true,
},

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

@ -25,7 +25,7 @@
:expandedKeys="expandedKeys"
>
<a-icon slot="switcherIcon" type="down" />
<template #title="{ key: treeKey, title, isLeaf }">
<template #title="{ key: treeKey, title,isLeaf }">
<ContextMenu
:title="title"
:treeKey="treeKey"
@ -135,7 +135,8 @@
{{ col.title }}</span
>
</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
:getPopupContainer="(trigger) => trigger.parentElement"
:style="{ width: '100%', height: '32px' }"
@ -177,10 +178,20 @@
#default="{row}"
>
<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
v-else-if="col.is_password && row[col.field]"
:password="row[col.field]"
:ci_id="row._id"
:attr_id="col.attr_id"
></PasswordField>
<template v-else-if="col.is_choice">
<template v-if="col.is_list">
@ -333,7 +344,7 @@ import {
} from '@/modules/cmdb/api/CIRelation'
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 { roleHasPermissionToGrant } from '@/modules/acl/api/permission'
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 CMDBGrant from '../../components/cmdbGrant'
import { ops_move_icon as OpsMoveIcon } from '@/core/icons'
import { getAttrPassword } from '../../api/CITypeAttr'
export default {
name: 'RelationViews',
@ -407,6 +419,11 @@ export default {
tableDragClassName: [],
resource_type: {},
initialPasswordValue: {},
passwordValue: {},
lastEditCiId: null,
isContinueCloseEdit: true,
}
},
@ -890,6 +907,12 @@ export default {
calcColumns() {
const width = document.getElementById('relation-views-right').clientWidth
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.$refs.xTable.refreshColumn()
})
@ -1076,15 +1099,47 @@ export default {
}
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 }) {
if (!this.isContinueCloseEdit) {
return
}
const $table = this.$refs['xTable']
const data = {}
this.columns.forEach((item) => {
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) !== '{}') {
updateCI(row.ci_id || row._id, data)
.then(() => {
@ -1102,6 +1157,12 @@ export default {
$table.revertData(row)
})
}
this.columns.forEach((col) => {
if (col.is_password) {
this.initialPasswordValue[col.field] = ''
this.passwordValue[col.field] = ''
}
})
},
deleteCI(record) {
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}">
<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>
<PasswordField v-else-if="col.is_password && row[col.field]" :password="row[col.field]"></PasswordField>
<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
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-if="col.is_list">
<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">
<a-alert message="请先到 我的订阅 页面完成订阅!" banner></a-alert>
</div>
<div class="tree-views" v-else>
<div class="tree-views">
<div class="cmdb-views-header">
<span>
<span class="cmdb-views-header-title">{{ currentCiTypeName }}</span>
@ -193,7 +193,8 @@
{{ col.title }}</span
>
</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
:getPopupContainer="(trigger) => trigger.parentElement"
:style="{ width: '100%', height: '32px' }"
@ -232,13 +233,23 @@
</template>
<template
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>
<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
v-else-if="col.is_password && row[col.field]"
:password="row[col.field]"
:ci_id="row._id"
:attr_id="col.attr_id"
></PasswordField>
<template v-else-if="col.is_choice">
<template v-if="col.is_list">
@ -400,6 +411,7 @@ import PreferenceSearch from '../../components/preferenceSearch/preferenceSearch
import MetadataDrawer from '../ci/modules/MetadataDrawer.vue'
import { intersection } from '@/utils/functions/set'
import { ops_move_icon as OpsMoveIcon } from '@/core/icons'
import { getAttrPassword } from '../../api/CITypeAttr'
export default {
name: 'TreeViews',
@ -454,6 +466,11 @@ export default {
tableDragClassName: [],
// 已经设置过data的node
isSetDataNodes: [],
initialPasswordValue: {},
passwordValue: {},
lastEditCiId: null,
isContinueCloseEdit: true,
}
},
@ -487,7 +504,7 @@ export default {
},
},
watch: {
'$route.path': function (newPath, oldPath) {
'$route.path': function(newPath, oldPath) {
this.newLoad = true
this.typeId = this.$route.params.typeId
this.initPage()
@ -652,6 +669,12 @@ export default {
if (treeViewsRight) {
const width = treeViewsRight.clientWidth - 50
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) {
console.log(e)
@ -918,15 +941,47 @@ export default {
onSelectRangeEnd({ records }) {
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 }) {
if (!this.isContinueCloseEdit) {
return
}
const $table = this.$refs['xTable'].getVxetableRef()
const data = {}
this.columns.forEach((item) => {
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) !== '{}') {
updateCI(row._id, data)
.then(() => {
@ -953,6 +1008,12 @@ export default {
$table.revertData(row)
})
}
this.columns.forEach((col) => {
if (col.is_password) {
this.initialPasswordValue[col.field] = ''
this.passwordValue[col.field] = ''
}
})
},
jsonEditorOk(row, column, jsonData) {
// 后端写数据有快慢，不拉接口直接修改table的数据