gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat：修改inputTags的组件 去除页面假数据

Browse Source
This commit is contained in:
zhangyu
2021-04-22 10:36:29 +08:00
parent c8f2afca96
commit 05cf68fe6e
5 changed files with 78 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
nezha-fronted/package.json
View File

@@ -11,6 +11,7 @@
"lint": "eslint --fix --ext .js,.vue src" "lint": "eslint --fix --ext .js,.vue src"
}, },
"dependencies": { "dependencies": {
"@johmun/vue-tags-input": "^2.1.0",
"@riophae/vue-treeselect": "^0.4.0", "@riophae/vue-treeselect": "^0.4.0",
"@svgdotjs/svg.js": "^3.0.16", "@svgdotjs/svg.js": "^3.0.16",
"@svgdotjs/svg.panzoom.js": "^2.1.1", "@svgdotjs/svg.panzoom.js": "^2.1.1",

2
nezha-fronted/src/components/common/clickSearch.vue
View File

@@ -111,7 +111,7 @@ export default {
}, },
destroyed () { destroyed () {
window.removeEventListener('resize', this.needMore) window.removeEventListener('resize', this.needMore)
}, }
} }
</script> </script>

48
nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue
View File

@@ -167,19 +167,25 @@
</el-form-item> </el-form-item>
<span class="param-box-row-eq">=</span> <span class="param-box-row-eq">=</span>
<el-form-item class="param-box-row-value" :prop="'paramObj.' + index + '.value'"> <el-form-item class="param-box-row-value" :prop="'paramObj.' + index + '.value'">
<el-select <!-- <el-select-->
v-model="item.value" <!-- v-model="item.value"-->
multiple <!-- multiple-->
filterable <!-- filterable-->
allow-create <!-- allow-create-->
:ref="'select'+ index" <!-- :ref="'select'+ index"-->
placeholder="value" size="mini" <!-- placeholder="value" size="mini"-->
default-first-option <!-- default-first-option-->
popper-class="config-dropdown hide-element" <!-- popper-class="config-dropdown hide-element"-->
@change="(val)=>{paramObjchange(val,index)}" <!-- @change="(val)=>{paramObjchange(val,index)}"-->
> <!-- >-->
<span slot="empty" class=""></span> <!-- <span slot="empty" class=""></span>-->
</el-select> <!-- </el-select>-->
<vue-tags-input
v-model="item.tags"
:tags="item.value"
:maxlength="32"
@tags-changed="(newTags)=>{tagsChange(newTags, index)}"
/>
</el-form-item> </el-form-item>
<span class="param-box-row-symbol" :id="'moduel-remove-param-'+index" @click="removeParam(index)"><i class="nz-icon nz-icon-shanchu1" style="color:#666;"></i></span> <span class="param-box-row-symbol" :id="'moduel-remove-param-'+index" @click="removeParam(index)"><i class="nz-icon nz-icon-shanchu1" style="color:#666;"></i></span>
</div> </div>
@@ -255,6 +261,7 @@
<script> <script>
import { noSpecialChar, port, nzNumber } from '../js/validate' import { noSpecialChar, port, nzNumber } from '../js/validate'
import selectWalk from '../popBox/selectWalk' import selectWalk from '../popBox/selectWalk'
import VueTagsInput from '@johmun/vue-tags-input'
export default { export default {
name: 'editEndpointBoxNew', name: 'editEndpointBoxNew',
@@ -275,7 +282,8 @@ export default {
} }
}, },
components: { components: {
'select-walk': selectWalk 'select-walk': selectWalk,
VueTagsInput
}, },
data () { data () {
return { return {
@@ -562,6 +570,9 @@ export default {
} }
this.editEndpoint.labelModule.splice(index, 1) this.editEndpoint.labelModule.splice(index, 1)
}, },
tagsChange (newTags, index) {
this.editEndpoint.paramObj[index].value = newTags.map(item => item.text)
},
// 将param转为json字符串格式 // 将param转为json字符串格式
paramToJson (param) { paramToJson (param) {
const tempParam = {} const tempParam = {}
@@ -840,6 +851,15 @@ export default {
top: 14px; top: 14px;
cursor: pointer; cursor: pointer;
} }
/deep/ .ti-input{
min-height: 30px;
overflow-x: hidden;
border-radius: 2px;
padding: 0;
}
/deep/ .ti-tag{
background-color: #FA901C;
}
</style> </style>
<style> <style>
.sub-label { .sub-label {

49
nezha-fronted/src/components/common/rightBox/moduleBox.vue
View File

@@ -159,19 +159,26 @@
</el-form-item> </el-form-item>
<span class="param-box-row-eq">=</span> <span class="param-box-row-eq">=</span>
<el-form-item class="param-box-row-value" :prop="'paramObj.' + index + '.value'"> <el-form-item class="param-box-row-value" :prop="'paramObj.' + index + '.value'">
<el-select <!-- <el-select-->
v-model="item.value" <!-- v-model=""-->
multiple <!-- multiple-->
filterable <!-- filterable-->
allow-create <!-- allow-create-->
:ref="'select'+ index" <!-- :ref="'select'+ index"-->
placeholder="value" size="mini" <!-- placeholder="value" size="mini"-->
default-first-option <!-- default-first-option-->
popper-class="config-dropdown hide-element" <!-- popper-class="config-dropdown hide-element"-->
@change="(val)=>{paramObjchange(val,index)}" <!-- @change="(val)=>{paramObjchange(val,index)}"-->
> <!-- >-->
<span slot="empty" class=""></span> <!-- <span slot="empty" class=""></span>-->
</el-select> <!-- </el-select>-->
<vue-tags-input
v-model="item.tags"
:tags="item.value"
:maxlength="32"
@tags-changed="(newTags)=>{tagsChange(newTags, index)}"
/>
</el-form-item> </el-form-item>
<span class="param-box-row-symbol" :id="'moduel-remove-param-'+index" @click="removeParam(index)"><i class="nz-icon nz-icon-shanchu1" style="color:#666;"></i></span> <span class="param-box-row-symbol" :id="'moduel-remove-param-'+index" @click="removeParam(index)"><i class="nz-icon nz-icon-shanchu1" style="color:#666;"></i></span>
</div> </div>
@@ -247,6 +254,7 @@
<script> <script>
import { noSpecialChar, port, nzNumber } from '../js/validate' import { noSpecialChar, port, nzNumber } from '../js/validate'
import selectWalk from '../popBox/selectWalk' import selectWalk from '../popBox/selectWalk'
import VueTagsInput from '@johmun/vue-tags-input'
export default { export default {
name: 'moduleBox', name: 'moduleBox',
@@ -255,7 +263,8 @@ export default {
currentProject: Object currentProject: Object
}, },
components: { components: {
'select-walk': selectWalk 'select-walk': selectWalk,
VueTagsInput
}, },
data () { data () {
return { return {
@@ -541,6 +550,9 @@ export default {
} }
this.editModule.labelModule.splice(index, 1) this.editModule.labelModule.splice(index, 1)
}, },
tagsChange (newTags, index) {
this.editModule.paramObj[index].value = newTags.map(item => item.text)
},
// 将param转为json字符串格式 // 将param转为json字符串格式
paramToJson (param) { paramToJson (param) {
const tempParam = {} const tempParam = {}
@@ -818,6 +830,15 @@ export default {
top: 14px; top: 14px;
cursor: pointer; cursor: pointer;
} }
/deep/ .ti-input{
min-height: 30px;
overflow-x: hidden;
border-radius: 2px;
padding: 0;
}
/deep/ .ti-tag{
background-color: #FA901C;
}
</style> </style>
<style> <style>
.sub-label { .sub-label {

9
nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
View File

@@ -158,9 +158,13 @@ export default {
}, },
state: { state: {
label: 'state', label: 'state',
key: 'state', key: 'states',
type: 'checkBox', type: 'checkBox',
children: [], children: [
{ key: 'Down', value: 0, name: 'Down' },
{ key: 'Up', value: 1, name: 'Up' },
{ key: 'Suspended', value: 0, name: 'Suspended' }
],
show: true, show: true,
showMore: false, showMore: false,
width: 0, width: 0,
@@ -277,7 +281,6 @@ export default {
}) })
} }
}) })
this.titleSearchList.state.children = [{ key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }, { key: 'up', value: 'up', name: 'up' }, { key: 'down', value: 'down', name: 'up' }]
}, },
batchModify () { batchModify () {
if (!this.batchDeleteObjs.length) { if (!this.batchDeleteObjs.length) {