fix: 删除无用box
This commit is contained in:
chenjinsong
@@ -304,7 +304,7 @@ export default {
|
|||||||
{ required: true, message: this.$t('validate.required'), trigger: 'change' }
|
{ required: true, message: this.$t('validate.required'), trigger: 'change' }
|
||||||
],
|
],
|
||||||
authProtocolPort: [
|
authProtocolPort: [
|
||||||
{ required: true, message: this.$t('validate.required'), trigger: 'change' },
|
// { required: true, message: this.$t('validate.required'), trigger: 'change' },
|
||||||
{ validator: port, trigger: 'blur' }
|
{ validator: port, trigger: 'blur' }
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -1,612 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="right-box right-box-edit-endpoint" v-clickoutside="{obj:editEndpoint,func:clickOutside}">
|
|
||||||
<!-- begin--顶部按钮-->
|
|
||||||
<div class="right-box-top-btns right-box-form-delete">
|
|
||||||
<button @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien" id="edit-ep-del" type="button" v-has="['project_endpoint_delete', 'asset_endpoint_delete']" v-if="editEndpoint.id">
|
|
||||||
<span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
|
|
||||||
<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<!-- end--顶部按钮-->
|
|
||||||
|
|
||||||
<!-- begin--标题-->
|
|
||||||
<div class="right-box-title">{{$t("project.endpoint.editEndpoint") }}</div>
|
|
||||||
<!-- end--标题-->
|
|
||||||
|
|
||||||
<!-- begin--表单-->
|
|
||||||
<div class="right-box-form-box">
|
|
||||||
<el-form class="right-box-form right-box-form-left" :model="editEndpoint" label-position = "top" label-width="120px" :rules="rules" ref="endpointForm">
|
|
||||||
<!--project-->
|
|
||||||
<el-form-item :label="$t('project.project.projectName')" prop="project.id">
|
|
||||||
<el-select @change="((val) => {changeProject(val);})" value-key="id" popper-class="config-dropdown" v-model="editEndpoint.projectId" placeholder="" size="small" id="edit-endpoint-input-project">
|
|
||||||
<el-option :id="'edit-project-'+item.id" v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<!--module-->
|
|
||||||
<el-form-item :label="$t('project.module.module')" prop="module.id">
|
|
||||||
<el-select @change="((val) => {changeModule(val);})" value-key="id" popper-class="config-dropdown" v-model="editEndpoint.moduleId" placeholder="" size="small" id="edit-endpoint-input-project">
|
|
||||||
<el-option :id="'edit-module-'+item.id" v-for="item in moduleList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<!--asset-->
|
|
||||||
<el-form-item :label="$t('asset.asset')" prop="assetId">
|
|
||||||
<el-autocomplete
|
|
||||||
id="edit-endpoint-input-project"
|
|
||||||
:fetch-suggestions="assetSuggestion"
|
|
||||||
v-model.trim="editEndpoint.asset.host"
|
|
||||||
placeholder=""
|
|
||||||
@select="selectAsset"
|
|
||||||
@change.native="inputAsset"
|
|
||||||
size="small"
|
|
||||||
:disabled="true"
|
|
||||||
value-key="host"
|
|
||||||
popper-class="no-style-class"
|
|
||||||
style="width: 100%;"
|
|
||||||
>
|
|
||||||
</el-autocomplete>
|
|
||||||
</el-form-item>
|
|
||||||
<!--host-->
|
|
||||||
<el-form-item :label="$t('project.endpoint.host')" prop="host">
|
|
||||||
<el-input placeholder="" v-model="editEndpoint.host" size="small" id="edit-endpoint-input-host"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<!--port-->
|
|
||||||
<el-form-item :label="$t('project.endpoint.port')" prop="port">
|
|
||||||
<el-input placeholder="" v-model="editEndpoint.port" size="small" id="edit-endpoint-input-port"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<!--path-->
|
|
||||||
<el-form-item :label="$t('project.endpoint.path')" prop="path" v-if="editEndpoint.module.type.toLowerCase() == 'http'">
|
|
||||||
<el-input placeholder="" v-model="editEndpoint.path" size="small" id="edit-endpoint-input-path"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<!--param-->
|
|
||||||
<el-form-item class="right-box-form-param" v-if="editEndpoint.module.type.toLowerCase() == 'http'">
|
|
||||||
<template slot="label">
|
|
||||||
<span>{{$t('project.endpoint.param')}}</span>
|
|
||||||
</template>
|
|
||||||
<div style="text-align: right">
|
|
||||||
<button style="display: none;">第一个button会出现意料之外的hover样式，找不到原因，只好加个不可见的button规避问题</button>
|
|
||||||
<!--<button type="button" id="edit-clear-all" @click="clearAllParam" class="nz-btn nz-btn-size-normal nz-btn-style-light">-->
|
|
||||||
<!--<span><i class="nz-icon nz-icon-delete"></i></span>-->
|
|
||||||
<!--</button>-->
|
|
||||||
<span id="edit-add-param" @click="addParam" class="right-box-form-add">
|
|
||||||
<i style="" class="nz-icon nz-icon-create-square"></i>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="param-box param-box-module">
|
|
||||||
<div style="height: 100%; overflow: auto" id="edit-endpoint-params">
|
|
||||||
<div v-for="(item, index) in editEndpoint.paramObj" :key="index" class="param-box-row">
|
|
||||||
<el-form-item class="param-box-row-key" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}" :prop="'paramObj.' + index + '.key'">
|
|
||||||
<el-input placeholder="key" size="mini" v-model="item.key"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<span class="param-box-row-eq">=</span>
|
|
||||||
<el-form-item class="param-box-row-value" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}" :prop="'paramObj.' + index + '.value'">
|
|
||||||
<el-input placeholder="value" size="mini" v-model="item.value"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<span class="param-box-row-symbol" @click="removeParam(index)"><i class="nz-icon nz-icon-shanchu1" style="color: #666666"></i></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-form-item>
|
|
||||||
<!--label-->
|
|
||||||
<el-form-item :label="$t('project.endpoint.labels')" class="right-box-form-param">
|
|
||||||
|
|
||||||
<div style="text-align: right;margin-bottom: 5px">
|
|
||||||
<button style="display: none;">第一个button会出现意料之外的hover样式，找不到原因，只好加个不可见的button规避问题</button>
|
|
||||||
<!--<button id="module-clear-all" type="button" @click="clearAllParam" class="nz-btn nz-btn-size-normal nz-btn-style-light">-->
|
|
||||||
<!--<span><i class="nz-icon nz-icon-delete"></i></span>-->
|
|
||||||
<!--</button>-->
|
|
||||||
<span id="module-add-label" type="button" @click="addLabel" class="right-box-form-add">
|
|
||||||
<span><i style="font-size: 16px;" class="nz-icon nz-icon-create-square"></i></span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="param-box param-box-module">
|
|
||||||
<div ref="labelBoxScrollbar" style="height: 100%; overflow: auto;" id="edit-endpoint-labels">
|
|
||||||
<div v-for="(item, index) in editEndpoint.labelModule" :key="index" class="param-box-row" >
|
|
||||||
<el-form-item class="param-box-row-key" :rules="[{required: true, message: $t('validate.required'), trigger: 'blur'},{ pattern: /[a-zA-Z_:][a-zA-Z0-9_:]*/, message: $t('validate.key') ,trigger: 'blur'}]" :prop="'labelModule.' + index + '.key'">
|
|
||||||
<el-input placeholder="key" size="mini" v-model="item.key"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<span class="param-box-row-eq">=</span>
|
|
||||||
<el-form-item class="param-box-row-value" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}" :prop="'labelModule.' + index + '.value'">
|
|
||||||
<el-input placeholder="value" size="mini" v-model="item.value"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<span class="param-box-row-symbol" :id="'moduel-remove-label-'+index" @click="removeLabel(index)"><i class="nz-icon nz-icon-shanchu1" style="color:#666;"></i></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-form-item>
|
|
||||||
<!--enable-->
|
|
||||||
<el-form-item :label="$t('config.account.enable')">
|
|
||||||
<el-switch v-model.number="editEndpoint.enabled" active-color="#ee9d3f" :active-value="1" :inactive-value="0" id="edit-endpoint-input-enabled"></el-switch>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- end--表单-->
|
|
||||||
|
|
||||||
<!--底部按钮-->
|
|
||||||
<div class="right-box__footer">
|
|
||||||
<button v-cancel="{obj:editEndpoint,func:esc}" id="ep-edit-esc" class="footer__btn footer__btn--light">
|
|
||||||
<span>{{$t('overall.cancel')}}</span>
|
|
||||||
</button>
|
|
||||||
<button :class="{'nz-btn-disabled':prevent_opt.save}" :disabled="prevent_opt.save" @click="save" class="footer__btn" id="ep-edit-save">
|
|
||||||
<span>{{$t('overall.save')}}</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'endpointBox',
|
|
||||||
props: {
|
|
||||||
endpoint: Object
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
editEndpoint: {},
|
|
||||||
subBox: { show: false, title: this.$t('overall.asset') }, // asset子弹框
|
|
||||||
assetSearch: { host: '', sn: '', text: '', label: 'IP', dropdownShow: false }, // 侧滑框中asset的搜索相关
|
|
||||||
assetPageObj: { pageNo: 1, pageSize: 11, total: 0 },
|
|
||||||
selectedAsset: { id: '', host: '', sn: '' }, // endpoint侧滑框中选中的asset
|
|
||||||
projectList: [],
|
|
||||||
moduleList: [],
|
|
||||||
assetList: [],
|
|
||||||
rules: {
|
|
||||||
'project.id': [
|
|
||||||
{ required: true, message: this.$t('validate.required'), trigger: 'change' }
|
|
||||||
],
|
|
||||||
'module.id': [
|
|
||||||
{ required: true, message: this.$t('validate.required'), trigger: 'change' }
|
|
||||||
],
|
|
||||||
assetId: [
|
|
||||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
||||||
],
|
|
||||||
port: [
|
|
||||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
||||||
],
|
|
||||||
path: [
|
|
||||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
// endpoint弹框中asset子弹框控制
|
|
||||||
showSubBox (show) {
|
|
||||||
this.subBox.show = show
|
|
||||||
},
|
|
||||||
|
|
||||||
/* 关闭弹框 */
|
|
||||||
esc (refresh) {
|
|
||||||
this.$emit('close', refresh)
|
|
||||||
},
|
|
||||||
|
|
||||||
/* 关闭子弹框 */
|
|
||||||
subEsc () {
|
|
||||||
this.subBox.show = false
|
|
||||||
},
|
|
||||||
|
|
||||||
clickOutside () {
|
|
||||||
this.esc(false)
|
|
||||||
},
|
|
||||||
|
|
||||||
// 清除param
|
|
||||||
clearAllParam () {
|
|
||||||
this.editEndpoint.paramObj = []
|
|
||||||
},
|
|
||||||
|
|
||||||
// 新增param
|
|
||||||
addParam () {
|
|
||||||
this.editEndpoint.paramObj.push({ key: '', value: '' })
|
|
||||||
},
|
|
||||||
|
|
||||||
// 移除单个param
|
|
||||||
removeParam (index) {
|
|
||||||
this.editEndpoint.paramObj.splice(index, 1)
|
|
||||||
},
|
|
||||||
|
|
||||||
// 将param转为json字符串格式
|
|
||||||
paramToJson (param) {
|
|
||||||
const tempParam = {}
|
|
||||||
for (let i = 0; i < param.length; i++) {
|
|
||||||
eval('tempParam["' + param[i].key + '"]="' + param[i].value + '"')
|
|
||||||
}
|
|
||||||
const jsonString = JSON.stringify(tempParam)
|
|
||||||
if (jsonString == '{}') {
|
|
||||||
return ''
|
|
||||||
} else {
|
|
||||||
return jsonString
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// 新增label
|
|
||||||
addLabel () {
|
|
||||||
this.editEndpoint.labelModule.push({ key: '', value: '' })
|
|
||||||
},
|
|
||||||
// 移除单个Label
|
|
||||||
removeLabel (index) {
|
|
||||||
this.editEndpoint.labelModule.splice(index, 1)
|
|
||||||
},
|
|
||||||
|
|
||||||
// 将labels转为json字符串格式
|
|
||||||
labelsToJson (param) {
|
|
||||||
const tempParam = {}
|
|
||||||
for (let i = 0; i < param.length; i++) {
|
|
||||||
eval('tempParam["' + param[i].key + '"]="' + param[i].value + '"')
|
|
||||||
}
|
|
||||||
const jsonString = JSON.stringify(tempParam)
|
|
||||||
if (jsonString == '{}') {
|
|
||||||
return ''
|
|
||||||
} else {
|
|
||||||
return jsonString
|
|
||||||
}
|
|
||||||
},
|
|
||||||
/* 获取project列表 */
|
|
||||||
getProjectList () {
|
|
||||||
return new Promise(resolve => {
|
|
||||||
this.$get('project', { pageSize: -1, pageNo: 1 }).then(response => {
|
|
||||||
if (response.code === 200) {
|
|
||||||
this.projectList = response.data.list
|
|
||||||
if (!this.editEndpoint.projectId && this.projectList.length > 0) {
|
|
||||||
this.editEndpoint.projectId = this.projectList[0].id
|
|
||||||
}
|
|
||||||
}
|
|
||||||
resolve()
|
|
||||||
})
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
// project下拉框点击事件
|
|
||||||
changeProject (projectId) {
|
|
||||||
this.getModuleList(projectId)
|
|
||||||
this.editEndpoint.projectId = projectId
|
|
||||||
this.editEndpoint.moduleId = ''
|
|
||||||
},
|
|
||||||
|
|
||||||
// project下拉框点击事件
|
|
||||||
changeModule (moduleId) {
|
|
||||||
const newModule = this.moduleList.find(item => { return item.id == this.endpoint.moduleId })
|
|
||||||
this.editEndpoint.moduleId = moduleId
|
|
||||||
this.editEndpoint.port = newModule.port
|
|
||||||
this.editEndpoint.path = newModule.path
|
|
||||||
this.editEndpoint.paramObj = newModule.paramObj
|
|
||||||
},
|
|
||||||
|
|
||||||
// 获取endpoint弹框中的asset子弹框里asset列表数据
|
|
||||||
getAssetList (currentPage) {
|
|
||||||
if (currentPage) {
|
|
||||||
this.assetPageObj.pageNo = currentPage
|
|
||||||
} else {
|
|
||||||
this.assetPageObj.pageNo = 1
|
|
||||||
}
|
|
||||||
this.$get('asset', this.assetPageObj).then(response => {
|
|
||||||
if (response.code === 200) {
|
|
||||||
this.assetList = response.data.list
|
|
||||||
this.assetPageObj.total = response.data.total
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
// endpoint弹框中的asset子弹框搜索
|
|
||||||
searchAsset () {
|
|
||||||
if (this.assetSearch.label == 'IP') {
|
|
||||||
this.assetSearch.host = this.assetSearch.text
|
|
||||||
this.assetSearch.sn = ''
|
|
||||||
} else if (this.assetSearch.label == 'SN') {
|
|
||||||
this.assetSearch.sn = this.assetSearch.text
|
|
||||||
this.assetSearch.host = ''
|
|
||||||
}
|
|
||||||
this.assetPageObj = Object.assign({}, this.assetPageObj, this.assetSearch)
|
|
||||||
this.getAssetList(false)
|
|
||||||
},
|
|
||||||
|
|
||||||
// endpoint弹框中的asset子弹框里asset选择事件
|
|
||||||
selectAsset (obj) {
|
|
||||||
this.selectedAsset = obj
|
|
||||||
this.editEndpoint.host = obj.host
|
|
||||||
this.editEndpoint.assetId = obj.id
|
|
||||||
this.$refs.endpointForm.validate()
|
|
||||||
},
|
|
||||||
inputAsset (e) {
|
|
||||||
this.editEndpoint.assetId = ''
|
|
||||||
const host = e.target.value
|
|
||||||
if (host) {
|
|
||||||
for (let i = 0; i < this.assetList.length; i++) {
|
|
||||||
if (host == this.assetList[i].host) {
|
|
||||||
this.editEndpoint.assetId = this.assetList[i].id
|
|
||||||
this.selectedAsset = this.assetList[i]
|
|
||||||
this.editEndpoint.host = host
|
|
||||||
break
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 获取endpoint弹框中module下拉框数据
|
|
||||||
getModuleList (projectId, setCurModule = false) {
|
|
||||||
this.$get('module', { projectId: projectId }).then(response => {
|
|
||||||
if (response.code === 200) {
|
|
||||||
for (let i = 0; i < response.data.list.length; i++) {
|
|
||||||
try {
|
|
||||||
const tempObj = JSON.parse(response.data.list[i].param)
|
|
||||||
response.data.list[i].paramObj = []
|
|
||||||
for (const k in tempObj) {
|
|
||||||
response.data.list[i].paramObj.push({ key: k, value: tempObj[k] })
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.moduleList = response.data.list
|
|
||||||
if (setCurModule) {
|
|
||||||
this.editEndpoint.moduleId = this.moduleList.find(item => { return item.id == this.editEndpoint.moduleId }).id
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// 保存endpoint
|
|
||||||
save () {
|
|
||||||
if (this.prevent_opt.save) { return } ;
|
|
||||||
this.prevent_opt.save = true
|
|
||||||
this.$refs.endpointForm.validate(valide => {
|
|
||||||
if (valide) {
|
|
||||||
this.editEndpoint.param = this.paramToJson(this.editEndpoint.paramObj)
|
|
||||||
this.editEndpoint.labels = this.labelsToJson(this.editEndpoint.labelModule)
|
|
||||||
const requestData = []
|
|
||||||
requestData.push(this.editEndpoint)
|
|
||||||
this.$put('endpoint', requestData).then(response => {
|
|
||||||
this.prevent_opt.save = false
|
|
||||||
if (response.code === 200) {
|
|
||||||
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
|
|
||||||
this.esc(true)
|
|
||||||
} else {
|
|
||||||
this.$message.error(response.msg)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
this.prevent_opt.save = false
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
// 删除endpoint
|
|
||||||
del () {
|
|
||||||
if (this.prevent_opt.save) { return } ;
|
|
||||||
this.prevent_opt.save = true
|
|
||||||
this.$confirm(this.$t('tip.confirmDelete'), {
|
|
||||||
confirmButtonText: this.$t('tip.yes'),
|
|
||||||
cancelButtonText: this.$t('tip.no'),
|
|
||||||
type: 'warning'
|
|
||||||
}).then(() => {
|
|
||||||
this.$delete('endpoint?ids=' + this.editEndpoint.id).then(response => {
|
|
||||||
this.prevent_opt.save = false
|
|
||||||
if (response.code === 200) {
|
|
||||||
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.deleteSuccess') })
|
|
||||||
this.esc(true)
|
|
||||||
} else {
|
|
||||||
this.$message.error(response.msg)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}).catch(() => {
|
|
||||||
this.prevent_opt.save = false
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// endpoint弹框的asset子弹框顶部搜索条件选中事件
|
|
||||||
dropdownSelect (label) {
|
|
||||||
this.assetSearch.label = label
|
|
||||||
this.assetSearch.dropdownShow = false
|
|
||||||
},
|
|
||||||
/* asset搜索建议 */
|
|
||||||
assetSuggestion (queryString, callback) {
|
|
||||||
let data = []
|
|
||||||
if (!queryString) {
|
|
||||||
data = this.assetList
|
|
||||||
} else {
|
|
||||||
for (let i = 0; i < this.assetList.length; i++) {
|
|
||||||
if (this.assetList[i].host.indexOf(queryString.toLowerCase()) != -1) {
|
|
||||||
data.push(this.assetList[i])
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
callback(data)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
this.getProjectList().then(response => {
|
|
||||||
this.getModuleList(this.editEndpoint.projectId)
|
|
||||||
})
|
|
||||||
this.getAssetList()
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
endpoint: {
|
|
||||||
immediate: true,
|
|
||||||
deep: true,
|
|
||||||
handler (n, o) {
|
|
||||||
this.editEndpoint = JSON.parse(JSON.stringify(n))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.nz-btn-edit-ok{
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
right:0;
|
|
||||||
}
|
|
||||||
.nz-btn-edit-esc{
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
left:0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* begin--搜索框*/
|
|
||||||
.endpoint-asset-search {
|
|
||||||
display: inline-block;
|
|
||||||
position: relative;
|
|
||||||
margin-top: -16px;
|
|
||||||
}
|
|
||||||
.endpoint-asset-search button {
|
|
||||||
height: 22px !important;
|
|
||||||
}
|
|
||||||
.endpoint-asset-search-dropdown {
|
|
||||||
position: absolute;
|
|
||||||
top: 25px;
|
|
||||||
background-color: #444;
|
|
||||||
border-radius: 4px;
|
|
||||||
width: 44px;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
.endpoint-asset-search-dropdown-item {
|
|
||||||
text-align: center;
|
|
||||||
line-height: 22px;
|
|
||||||
height: 22px;
|
|
||||||
cursor: default;
|
|
||||||
color: white;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
.endpoint-asset-label-txt {
|
|
||||||
display: inline-block;
|
|
||||||
width: 19px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.endpoint-asset-search-dropdown-item:first-of-type {
|
|
||||||
border-radius: 4px 4px 0 0;
|
|
||||||
}
|
|
||||||
.endpoint-asset-search-dropdown-item:last-of-type {
|
|
||||||
border-radius: 0 0 4px 4px;
|
|
||||||
}
|
|
||||||
.endpoint-asset-search-dropdown-item:hover {
|
|
||||||
background-color: #222;
|
|
||||||
color: #ff9900;
|
|
||||||
}
|
|
||||||
.endpoint-asset-search-input {
|
|
||||||
display: inline-block;
|
|
||||||
width: 150px;
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
/* end--搜索框*/
|
|
||||||
|
|
||||||
/* begin--table*/
|
|
||||||
.endpoint-sub-table {
|
|
||||||
padding-top: 30px;
|
|
||||||
height: 440px;
|
|
||||||
}
|
|
||||||
.line-100 {
|
|
||||||
margin-bottom: 3px;
|
|
||||||
}
|
|
||||||
.endpoint-sub-table-head {
|
|
||||||
line-height: 28px;
|
|
||||||
height: 30px;
|
|
||||||
}
|
|
||||||
.endpoint-sub-table-row, .endpoint-sub-table-row-disabled {
|
|
||||||
line-height: 28px;
|
|
||||||
height: 30px;
|
|
||||||
color: #656565;
|
|
||||||
}
|
|
||||||
.endpoint-sub-table-row:hover {
|
|
||||||
background-color: #dadada;
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
.endpoint-sub-table-row-active {
|
|
||||||
background-color: #dadada;
|
|
||||||
}
|
|
||||||
.endpoint-sub-table-row-selected {
|
|
||||||
background-color: #656565;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
.endpoint-sub-table-col {
|
|
||||||
display: inline-block;
|
|
||||||
width: calc(50% - 15px);
|
|
||||||
padding-left: 10px;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.endpoint-sub-table-paginate-all {
|
|
||||||
position: absolute;
|
|
||||||
left: 10px;
|
|
||||||
bottom: 17px;
|
|
||||||
color: #5a5a5a;
|
|
||||||
}
|
|
||||||
.endpoint-sub-table-body {
|
|
||||||
font-size: 15px;
|
|
||||||
position: relative;
|
|
||||||
overflow: auto;
|
|
||||||
height: calc(100% - 34px);
|
|
||||||
}
|
|
||||||
.endpoint-sub-table-body-dialog {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: #e9ebec;
|
|
||||||
position: absolute;
|
|
||||||
opacity: 0.2;
|
|
||||||
}
|
|
||||||
.endpoints-clear-btn {
|
|
||||||
margin: 6px 0 0 7px;
|
|
||||||
}
|
|
||||||
/* end--table*/
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.right-box-edit-endpoint .el-pagination__total {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
right-box-edit-endpoint .pagination {
|
|
||||||
padding-top: 12px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.endpoint-sub-table-paginate .el-pager li, .endpoint-sub-table-paginate .el-pagination .btn-next, .endpoint-sub-table-paginate .el-pagination .btn-prev {
|
|
||||||
font-size: 13px;
|
|
||||||
min-width: 20px !important;
|
|
||||||
-webkit-box-sizing: border-box;
|
|
||||||
box-sizing: border-box;
|
|
||||||
text-align: center;
|
|
||||||
border: 1px solid rgba(154,154,154,0.20);
|
|
||||||
border-radius: 2px;
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
.endpoint-sub-table-paginate .el-pagination.is-background .el-pager li:not(.disabled).active {
|
|
||||||
color: white !important;
|
|
||||||
}
|
|
||||||
.endpoint-sub-table-paginate .el-pagination.is-background .el-pager li:not(.disabled):hover {
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
.right-box-edit-endpoint .el-pagination .el-pager li.btn-quicknext, .right-box-edit-endpoint .el-pager li.btn-quickprev {
|
|
||||||
line-height: 20px;
|
|
||||||
}
|
|
||||||
.right-box-edit-endpoint .el-pagination .el-pager .more::before {
|
|
||||||
line-height: 20px;
|
|
||||||
}
|
|
||||||
.right-box-edit-endpoint .el-pager li.number{
|
|
||||||
font-family: NotoSansSC-Regular;
|
|
||||||
color: #666666;
|
|
||||||
letter-spacing: 0;
|
|
||||||
font-weight:normal;
|
|
||||||
}
|
|
||||||
.right-box-edit-endpoint .el-pager li.number.active{
|
|
||||||
font-family: NotoSansSC-Regular;
|
|
||||||
color: #FFFFFF;
|
|
||||||
letter-spacing: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.endpoint-sub-table-paginate .el-pagination.is-background .el-pager li:not(.disabled).active {
|
|
||||||
background-color: $global-text-color-active;
|
|
||||||
border-radius: 2px;
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
.right-box-edit-endpoint .el-pager li:hover, .right-box-edit-endpoint .el-pagination .btn-next:hover, .right-box-edit-endpoint .el-pagination .btn-prev:hover {
|
|
||||||
font-family: NotoSansSC-Regular;
|
|
||||||
color: #666666;
|
|
||||||
letter-spacing: 0;
|
|
||||||
font-weight:normal;
|
|
||||||
}
|
|
||||||
.right-box-edit-endpoint .el-pagination__sizes .el-input .el-input__inner, .right-box-edit-endpoint .el-pagination__editor.el-input .el-input__inner{
|
|
||||||
height: 20px;
|
|
||||||
border-color: rgba(154,154,154,0.20);
|
|
||||||
}
|
|
||||||
.right-box-edit-endpoint .el-pagination__sizes .el-input .el-input__inner:hover{
|
|
||||||
border-color: rgba(154,154,154,0.20);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,338 +0,0 @@
|
|||||||
<template>
|
|
||||||
<transition name="right-box">
|
|
||||||
<div class="right-box right-box-panel z-top" v-if="rightBox.show">
|
|
||||||
<!-- begin--顶部按钮-->
|
|
||||||
<div class="right-box-top-btns">
|
|
||||||
<button type="button" @click="save" class="nz-btn nz-btn-size-normal nz-btn-style-normal">
|
|
||||||
<span class="top-tool-btn-txt">{{$t('overall.save')}}</span>
|
|
||||||
</button>
|
|
||||||
<button type="button" @click="esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-style-square">
|
|
||||||
<span class="top-tool-btn-txt"><i class="nz-icon nz-icon-close"></i></span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<!-- end--顶部按钮-->
|
|
||||||
|
|
||||||
<!-- begin--标题-->
|
|
||||||
<div class="right-box-title">{{rightBox.title}}</div>
|
|
||||||
<!-- end--标题-->
|
|
||||||
|
|
||||||
<!-- begin--表单-->
|
|
||||||
<div class="right-box-form">
|
|
||||||
<el-form :model="chartSaveInfo" ref="chartSaveInfo">
|
|
||||||
<el-form-item label="Chart Name" prop="title" :rules="{ required: true, type: 'string', message: '请输入图表名称', trigger: 'change' }">
|
|
||||||
<el-input size="small" maxlength="64" show-word-limit v-model="chartSaveInfo.title"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item v-if="isCreatePanel" label="Panel Name" prop="name" :rules="{ required: true, type: 'string', message: '请输入看板名称', trigger: 'change' }">
|
|
||||||
<el-input size="small" maxlength="64" show-word-limit v-model="chartSaveInfo.name"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item v-else label="Select Panel" prop="panelId" :rules="{ required: true, type: 'number', message: '请选择看板', trigger: 'change' }">
|
|
||||||
<el-select ref="panelSelect" width="100%" v-model="chartSaveInfo.panelId"
|
|
||||||
popper-class="" placeholder="" size="small"
|
|
||||||
@change="panelSelect"
|
|
||||||
filterable>
|
|
||||||
<el-option v-for="(item, index) in panelList"
|
|
||||||
:key="index"
|
|
||||||
:value="item.id"
|
|
||||||
:label="item.name">{{item.name}}</el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- end--表单-->
|
|
||||||
|
|
||||||
<!-- begin--底部按钮-->
|
|
||||||
<!--
|
|
||||||
<div class="right-box-bottom-btns">
|
|
||||||
<div @click="esc()" :class="{'right-box-bottom-btn-50': true}" class="right-box-bottom-btn right-box-bottom-btn-cancel">{{$t('overall.cancel')}}</div><div @click="save()" class="right-box-bottom-btn right-box-bottom-btn-50">{{panel.id == '' ? $t('overall.create') : $t('overall.save')}}</div>
|
|
||||||
</div>
|
|
||||||
-->
|
|
||||||
<!-- end--底部按钮-->
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</transition>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import bus from '../../../libs/bus'
|
|
||||||
import axios from 'axios'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'metricPrePanelBox',
|
|
||||||
props: {
|
|
||||||
chartInfo: Object,
|
|
||||||
elementTarget: Object,
|
|
||||||
seriesData: Array,
|
|
||||||
chartCount: String,
|
|
||||||
series: Array
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
rightBox: { // 面板弹出框相关
|
|
||||||
show: false,
|
|
||||||
title: this.$t('dashboard.panel.createPanelTitle')
|
|
||||||
},
|
|
||||||
isCreatePanel: false,
|
|
||||||
// 创建看板信息
|
|
||||||
chartSaveInfo: {
|
|
||||||
title: '', // 图表名称
|
|
||||||
name: '', // panel名称
|
|
||||||
panelId: '' // 选择以后panelId
|
|
||||||
},
|
|
||||||
panelList: [],
|
|
||||||
panelItem: {}, // 保存看板信息
|
|
||||||
panelId: 0,
|
|
||||||
createChartList: [] // 创建多个图表的图表信息
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
show (show) {
|
|
||||||
this.rightBox.show = show
|
|
||||||
},
|
|
||||||
setTitle (title) {
|
|
||||||
this.rightBox.title = title
|
|
||||||
},
|
|
||||||
setIsCreatePanel (isCreate) {
|
|
||||||
this.isCreatePanel = isCreate
|
|
||||||
},
|
|
||||||
setChartTitle (title) {
|
|
||||||
this.chartSaveInfo.title = title
|
|
||||||
},
|
|
||||||
// 选择看板
|
|
||||||
panelSelect (id) {
|
|
||||||
if (id) {
|
|
||||||
const panel = this.panelList.find(p => p.id === id)
|
|
||||||
if (panel) {
|
|
||||||
this.panelItem = panel
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 生成图表的时候,使用该函数,汇总创建图表参数
|
|
||||||
getOptions () {
|
|
||||||
// this.$refs.chartInfo.validate((valid) => {
|
|
||||||
const params = {
|
|
||||||
// panelId: this.panelId,
|
|
||||||
// title: this.chartSaveInfo.title,
|
|
||||||
type: this.chartInfo.type,
|
|
||||||
span: this.chartInfo.span,
|
|
||||||
height: this.chartInfo.height
|
|
||||||
}
|
|
||||||
// 多图模式
|
|
||||||
if (this.chartCount === 'multiple') {
|
|
||||||
this.createChartList = []
|
|
||||||
this.seriesData.forEach((queryItem) => {
|
|
||||||
const soleParam = Object.assign({}, params)
|
|
||||||
const elements = []
|
|
||||||
// 图表中每条线的名字,后半部分
|
|
||||||
// let host = `${queryItem.metric.__name__}`;//up,
|
|
||||||
// let charTitle=`${queryItem.metric.__name__}`;//up,
|
|
||||||
let host = ''// up,
|
|
||||||
let charTitle = ''
|
|
||||||
if (queryItem.metric.__name__) {
|
|
||||||
host = `${queryItem.metric.__name__}`// up,
|
|
||||||
charTitle = `${queryItem.metric.__name__}`// up,
|
|
||||||
}
|
|
||||||
const tagsArr = Object.keys(queryItem.metric)// ["__name__","asset","idc","instance","job","module","project"]
|
|
||||||
// 判断是否有数据
|
|
||||||
if (queryItem.values.length > 0 && tagsArr.length > 0) {
|
|
||||||
host += '{'
|
|
||||||
tagsArr.forEach((tag, i) => {
|
|
||||||
if (tag !== '__name__') {
|
|
||||||
host += `${tag}="${queryItem.metric[tag]}",`
|
|
||||||
}
|
|
||||||
if (tag === 'asset') {
|
|
||||||
const labVal = `${queryItem.metric[tag]}`
|
|
||||||
if (labVal !== '') {
|
|
||||||
charTitle += `(${queryItem.metric[tag]})`
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
if (host.endsWith(',')) { host = host.substr(0, host.length - 1) }
|
|
||||||
host += '}'
|
|
||||||
}
|
|
||||||
soleParam.title = charTitle
|
|
||||||
elements.push({
|
|
||||||
expression: host,
|
|
||||||
type: this.elementTarget.type
|
|
||||||
})
|
|
||||||
soleParam.elements = elements
|
|
||||||
this.addMultipleChart(soleParam)
|
|
||||||
})
|
|
||||||
} else if (this.chartCount === 'single') {
|
|
||||||
params.title = this.chartSaveInfo.title
|
|
||||||
const elements = []
|
|
||||||
if (this.elementTarget.type === 'normal') {
|
|
||||||
const metricStr = bus.tagsToString(this.elementTarget.metric, this.elementTarget.selectedTagList)
|
|
||||||
elements.push({
|
|
||||||
expression: metricStr,
|
|
||||||
type: this.elementTarget.type
|
|
||||||
})
|
|
||||||
} else if (this.elementTarget.type === 'expert') {
|
|
||||||
elements.push({
|
|
||||||
expression: this.elementTarget.expression,
|
|
||||||
type: this.elementTarget.type
|
|
||||||
})
|
|
||||||
}
|
|
||||||
params.elements = elements
|
|
||||||
// if (valid) {
|
|
||||||
this.addCharts(params)
|
|
||||||
// }
|
|
||||||
}
|
|
||||||
// });
|
|
||||||
},
|
|
||||||
// 新建单个图表single
|
|
||||||
addCharts (params) {
|
|
||||||
this.$post('panel/' + this.panelId + '/charts', params).then(response => {
|
|
||||||
if (response.code === 200) {
|
|
||||||
const panelId = this.panelId
|
|
||||||
this.esc()
|
|
||||||
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
|
|
||||||
this.$confirm(this.$t('dashboard.metric.goPanelTip'), this.$t('tip.saveSuccess'), {
|
|
||||||
confirmButtonText: this.$t('tip.yes'),
|
|
||||||
cancelButtonText: this.$t('tip.no'),
|
|
||||||
type: 'success'
|
|
||||||
}).then(() => {
|
|
||||||
// this.$store.state.assetData.moduleData = 'panel';
|
|
||||||
this.$store.state.showPanel.id = panelId
|
|
||||||
this.$store.state.showPanel.name = this.panelItem.name
|
|
||||||
this.$router.push({
|
|
||||||
path: '/panel',
|
|
||||||
query: {
|
|
||||||
t: +new Date()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
this.$emit('reload')
|
|
||||||
} else {
|
|
||||||
this.$message.error(response.msg)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
// 创建多个图表
|
|
||||||
addMultipleChart (params) {
|
|
||||||
this.createChartList.push(params)
|
|
||||||
if (this.seriesData.length === this.createChartList.length) {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
const api = []
|
|
||||||
this.createChartList.forEach((item) => {
|
|
||||||
api.push(this.$post('panel/' + this.panelId + '/charts', item))
|
|
||||||
})
|
|
||||||
axios.all(api).then((res) => {
|
|
||||||
let successFlag = true
|
|
||||||
res.forEach((item) => {
|
|
||||||
if (item.code !== 200) {
|
|
||||||
successFlag = false
|
|
||||||
}
|
|
||||||
})
|
|
||||||
if (successFlag) {
|
|
||||||
// this.saveDisabled = true; // 创建成功后,不能再次创建
|
|
||||||
const panelId = this.panelId
|
|
||||||
this.createChartList = []
|
|
||||||
this.esc()
|
|
||||||
|
|
||||||
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
|
|
||||||
this.$confirm(this.$t('dashboard.metric.goPanelTip'), this.$t('tip.saveSuccess'), {
|
|
||||||
confirmButtonText: this.$t('tip.yes'),
|
|
||||||
cancelButtonText: this.$t('tip.no'),
|
|
||||||
type: 'success'
|
|
||||||
}).then(() => {
|
|
||||||
// this.$store.state.assetData.moduleData = 'panel';
|
|
||||||
this.$store.state.showPanel.id = panelId
|
|
||||||
this.$store.state.showPanel.name = this.panelItem.name
|
|
||||||
this.$router.push({
|
|
||||||
path: '/panel',
|
|
||||||
query: {
|
|
||||||
t: +new Date()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
// this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
|
|
||||||
// this.elementTarget = {};
|
|
||||||
/*
|
|
||||||
this.$confirm(this.$t("dashboard.metric.goPanelTip"), this.$t("tip.saveSuccess"), {
|
|
||||||
confirmButtonText: this.$t("tip.yes"),
|
|
||||||
cancelButtonText: this.$t("tip.no"),
|
|
||||||
type: 'info'
|
|
||||||
}).then(() => {
|
|
||||||
alert('multi-ok');
|
|
||||||
/*
|
|
||||||
this.$router.push({
|
|
||||||
path: `/console/panel/detail/${this.panelId}/${this.productId}`,
|
|
||||||
query: {
|
|
||||||
panel: this.panelItem.name,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
*/
|
|
||||||
// });
|
|
||||||
this.$emit('reload')
|
|
||||||
} else {
|
|
||||||
this.$message.error('Something is wrong')
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
save: function () {
|
|
||||||
this.$refs.chartSaveInfo.validate((flag) => {
|
|
||||||
if (flag) { // 再判断弹出窗口内内容是否正确
|
|
||||||
if (this.isCreatePanel) { // 创建看板
|
|
||||||
this.panelItem.name = this.chartSaveInfo.name
|
|
||||||
this.$post('panel', this.panelItem).then(response => {
|
|
||||||
if (response.code === 200) {
|
|
||||||
this.panelId = response.data.panel.id
|
|
||||||
this.panelItem = response.data.panel
|
|
||||||
this.getOptions()
|
|
||||||
} else {
|
|
||||||
this.$message.error(response.msg)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
} else { // 选择看板
|
|
||||||
this.panelId = this.chartSaveInfo.panelId
|
|
||||||
this.getOptions()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
esc: function () {
|
|
||||||
this.rightBox.show = false
|
|
||||||
// 取消创建modal
|
|
||||||
this.panelList = []
|
|
||||||
this.chartSaveInfo.panelId = '' // 选择panel
|
|
||||||
this.chartSaveInfo.name = '' // panel名称创建
|
|
||||||
if (this.$refs.chartSaveInfo) {
|
|
||||||
this.$refs.chartSaveInfo.resetFields()
|
|
||||||
}
|
|
||||||
if (this.$refs.panelSelect) {
|
|
||||||
this.chartSaveInfo.panelId = ''
|
|
||||||
this.panelId = 0
|
|
||||||
// this.$refs.panelSelect..reset();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
getTableData: function () {
|
|
||||||
this.$get('panel?pageNo=1&pageSize=-1').then(response => {
|
|
||||||
if (response.code === 200) {
|
|
||||||
this.panelList = response.data.list
|
|
||||||
} else {
|
|
||||||
this.panelList = []
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created () {
|
|
||||||
|
|
||||||
},
|
|
||||||
mounted: function () {
|
|
||||||
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.z-top{
|
|
||||||
z-index: 50;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,100 +0,0 @@
|
|||||||
<template>
|
|
||||||
<!--start--param编辑框-->
|
|
||||||
<transition name="right-sub-box">
|
|
||||||
<div @click.stop class="right-sub-box" v-if="editParamBox.show" :style="'top: ' + editParamBox.top + 'px; left: ' + editParamBox.left + 'px;'">
|
|
||||||
<div class="param-box">
|
|
||||||
<div v-for="(item, index) in currentModule.paramObj" :key="index" class="param-box-row">
|
|
||||||
<el-input placeholder="key" class="param-box-row-key" size="mini" v-model="item.key"></el-input>
|
|
||||||
<span class="param-box-row-eq">=</span>
|
|
||||||
<el-input placeholder="value" class="param-box-row-value" size="mini" v-model="item.value"></el-input>
|
|
||||||
<span class="param-box-row-symbol" @click="removeParam(index)"><i class="nz-icon nz-icon-minus"></i></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div style="width: 100%; text-align: center; height: 25px;">
|
|
||||||
<el-button @click="addParam" style="height: 18px; line-height: 18px; padding-top: 0; padding-bottom: 0;" size="mini"><i class="nz-icon nz-icon-plus"></i></el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</transition>
|
|
||||||
<!--end--param编辑框-->
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'paramEditBox',
|
|
||||||
props: {
|
|
||||||
editParamBox: Object,
|
|
||||||
paramObj: Array
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
/* begin--子弹框*/
|
|
||||||
.right-sub-box {
|
|
||||||
width: 170px;
|
|
||||||
height: 225px;
|
|
||||||
position: fixed;
|
|
||||||
z-index: 2;
|
|
||||||
padding: 0 0 0 10px;
|
|
||||||
}
|
|
||||||
.param-box {
|
|
||||||
height: 200px;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
.param-box-row {
|
|
||||||
padding: 7px 0 0 0;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.param-box-row:last-of-type {
|
|
||||||
padding-bottom: 7px;
|
|
||||||
}
|
|
||||||
.param-box-row-key, .param-box-row-value {
|
|
||||||
display: inline-block;
|
|
||||||
width: 50px;
|
|
||||||
}
|
|
||||||
.param-box-row-eq {
|
|
||||||
display: inline-block;
|
|
||||||
width: 18px;
|
|
||||||
text-align: center;
|
|
||||||
height: 22px;
|
|
||||||
line-height: 22px;
|
|
||||||
color: #c4c7cF;
|
|
||||||
}
|
|
||||||
.param-box-row-symbol:first-of-type {
|
|
||||||
font-size: 18px;
|
|
||||||
color: #bbbbbb;
|
|
||||||
text-align: center;
|
|
||||||
display: inline-block;
|
|
||||||
position: absolute;
|
|
||||||
top: 7px;
|
|
||||||
right: 34px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.param-box-row-symbol:last-of-type {
|
|
||||||
font-size: 12px;
|
|
||||||
color: #bbbbbb;
|
|
||||||
border: 1px solid #bbbbbb;
|
|
||||||
text-align: center;
|
|
||||||
height: 12px;
|
|
||||||
width: 14px;
|
|
||||||
display: inline-block;
|
|
||||||
position: absolute;
|
|
||||||
top: 12px;
|
|
||||||
left: 135px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.param-box-row-symbol>i {
|
|
||||||
position: absolute;
|
|
||||||
top: 1px;
|
|
||||||
right: 1px;
|
|
||||||
}
|
|
||||||
/* end--param*/
|
|
||||||
</style>
|
|
||||||
@@ -1,223 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="right-box right-box-role" v-clickoutside="{obj:editRole,func:clickOutside}">
|
|
||||||
<!-- begin--顶部按钮-->
|
|
||||||
<div class="right-box-top-btns right-box-form-delete">
|
|
||||||
<button @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien" id="roles-edit-del"
|
|
||||||
type="button" v-has="'role_delete'"
|
|
||||||
v-if="editRole.id && !detail">
|
|
||||||
<span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
|
|
||||||
<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<!-- end--顶部按钮-->
|
|
||||||
|
|
||||||
<!-- begin--标题-->
|
|
||||||
<div class="right-box-title">{{editRole.id ? ($t("config.roles.editRole")) : $t("config.roles.createRole")}}</div>
|
|
||||||
<!-- end--标题-->
|
|
||||||
|
|
||||||
<!-- begin--表单-->
|
|
||||||
<div class="right-box-form-box">
|
|
||||||
<el-form :disabled="detail" :model="editRole" :rules="rules" class="right-box-form right-box-form-left" label-position = "top" label-width="120px" ref="roleForm">
|
|
||||||
<!--name-->
|
|
||||||
<el-form-item :label="$t('config.roles.name')" prop="name">
|
|
||||||
<el-input maxlength="64" placeholder="" id="role-box-input-name"
|
|
||||||
show-word-limit size="small" type="text" v-model="editRole.name"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item :label="$t('config.roles.description')">
|
|
||||||
<el-input :rows="2" size='mini' type="textarea" v-model="editRole.remark" id="role-box-input-remark"/>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<el-form-item :label="$t('config.roles.permission')">
|
|
||||||
<!--<div class="tree-option">
|
|
||||||
<button type="button" class="nz-btn nz-btn-size-small-new nz-btn-style-light-new option-btn" style="margin-left: 0px;" @click="expandAllOrNone" :class="{'btn-active':expandAllFlag}">展开/收缩</button>
|
|
||||||
<button type="button" class="nz-btn nz-btn-size-small-new nz-btn-style-light-new option-btn" @click="selectAllOrNone" :class="{'btn-active':selectAllFlag}"><span ><i class="nz-icon nz-icon-delete"></i></span></button>
|
|
||||||
</div>-->
|
|
||||||
<el-tree :data="menus" :default-expand-all="expandAllFlag" :props="{label:labelFormatter}" @check-change="selectChange" class="tree-border" node-key="id" ref="menuTree" show-checkbox id="role-box-input-menus">
|
|
||||||
<div slot-scope="{ node, data }">
|
|
||||||
<span>
|
|
||||||
<i v-if="data.type == '1'" class="el-icon-menu"></i>
|
|
||||||
<i v-if="data.type == '2'" class="el-icon-edit"></i>
|
|
||||||
</span>
|
|
||||||
{{$t(data.i18n)}}
|
|
||||||
</div>
|
|
||||||
</el-tree>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
<!-- end--表单-->
|
|
||||||
<!--底部按钮-->
|
|
||||||
<div class="right-box__footer" v-if="!detail">
|
|
||||||
<button v-cancel="{obj:editRole,func:esc}" class="footer__btn footer__btn--light"
|
|
||||||
id="roles-esc">
|
|
||||||
<span>{{$t('overall.cancel')}}</span>
|
|
||||||
</button>
|
|
||||||
<button :class="{'nz-btn-disabled':prevent_opt.save}" :disabled="prevent_opt.save" @click="save" class="footer__btn"
|
|
||||||
id="roles-save">
|
|
||||||
<span>{{$t('overall.save')}}</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'roleBox',
|
|
||||||
props: {
|
|
||||||
role: Object,
|
|
||||||
detail: Boolean
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
rules: { // 表单校验规则
|
|
||||||
name: [
|
|
||||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
||||||
]
|
|
||||||
},
|
|
||||||
editRole: {},
|
|
||||||
menus: [],
|
|
||||||
selectAllFlag: false,
|
|
||||||
expandAllFlag: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
/* 关闭弹框 */
|
|
||||||
esc (refresh) {
|
|
||||||
this.$emit('close', refresh)
|
|
||||||
},
|
|
||||||
clickOutside () {
|
|
||||||
this.esc(false)
|
|
||||||
},
|
|
||||||
/* 保存 */
|
|
||||||
save () {
|
|
||||||
this.$refs.roleForm.validate(valid => {
|
|
||||||
if (valid) {
|
|
||||||
this.prevent_opt.save = true
|
|
||||||
if (this.editRole.id) {
|
|
||||||
this.$put('sys/role', this.editRole).then(response => {
|
|
||||||
if (response.code === 200) {
|
|
||||||
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
|
|
||||||
this.esc(true)
|
|
||||||
} else {
|
|
||||||
this.$message.error(response.msg)
|
|
||||||
}
|
|
||||||
this.prevent_opt.save = false
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
this.$post('sys/role', this.editRole).then(response => {
|
|
||||||
if (response.code === 200) {
|
|
||||||
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
|
|
||||||
this.esc(true)
|
|
||||||
} else {
|
|
||||||
this.$message.error(response.msg)
|
|
||||||
}
|
|
||||||
this.prevent_opt.save = false
|
|
||||||
})
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
/* 删除 */
|
|
||||||
del () {
|
|
||||||
this.$confirm(this.$t('tip.confirmDelete'), {
|
|
||||||
confirmButtonText: this.$t('tip.yes'),
|
|
||||||
cancelButtonText: this.$t('tip.no'),
|
|
||||||
type: 'warning'
|
|
||||||
}).then(() => {
|
|
||||||
this.$delete('sys/role/?ids=' + this.editRole.id).then(response => {
|
|
||||||
if (response.code === 200) {
|
|
||||||
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.deleteSuccess') })
|
|
||||||
this.esc(true)
|
|
||||||
} else {
|
|
||||||
this.$message.error(response.msg)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
},
|
|
||||||
getMenus: function () {
|
|
||||||
this.menus = []
|
|
||||||
|
|
||||||
this.$get('sys/menu').then(response => {
|
|
||||||
if (response.code == 200) {
|
|
||||||
this.menus = response.data.list
|
|
||||||
} else {
|
|
||||||
this.$message.error('load menu faild')
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
labelFormatter: function (data, node) {
|
|
||||||
return data && data.i18n ? this.$t(data.i18n) : data.name
|
|
||||||
},
|
|
||||||
selectChange: function (data, isCheck, childIsCheck) {
|
|
||||||
if (this.$refs.menuTree) {
|
|
||||||
this.editRole.menuIds = this.$refs.menuTree.getCheckedKeys(true)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
selectAllOrNone: function () {
|
|
||||||
if (this.$refs.menuTree) {
|
|
||||||
if (!this.selectAllFlag) {
|
|
||||||
this.$refs.menuTree.setCheckedNodes(this.menus)
|
|
||||||
} else {
|
|
||||||
this.$refs.menuTree.setCheckedNodes([])
|
|
||||||
}
|
|
||||||
this.selectAllFlag = !this.selectAllFlag
|
|
||||||
}
|
|
||||||
},
|
|
||||||
expandAllOrNone: function () {
|
|
||||||
this.expandAllFlag = !this.expandAllFlag
|
|
||||||
const $self = this
|
|
||||||
if (this.$refs.menuTree) {
|
|
||||||
this.menus.forEach(t => {
|
|
||||||
$self.$refs.menuTree.store.nodesMap[t.id].expanded = $self.expandAllFlag
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created () {
|
|
||||||
this.getMenus()
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
if (this.$refs.menuTree && this.editRole.menuIds && this.editRole.menuIds.length > 0) {
|
|
||||||
this.$refs.menuTree.setCheckedKeys(this.editRole.menuIds, true)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
// 将prop里的user转为组件内部对象
|
|
||||||
role: {
|
|
||||||
immediate: true,
|
|
||||||
deep: true,
|
|
||||||
handler (n) {
|
|
||||||
this.editRole = JSON.parse(JSON.stringify(n))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style lang="scss">
|
|
||||||
.right-box-role .tree-border{
|
|
||||||
margin-top: 5px;
|
|
||||||
border: 1px solid #e5e6e7;
|
|
||||||
background: #fff none;
|
|
||||||
border-radius: 4px;
|
|
||||||
/*margin-top: 40px;*/
|
|
||||||
}
|
|
||||||
.right-box-role .tree-option{
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
.right-box-role .option-btn{
|
|
||||||
margin: 6px 0 0 7px;
|
|
||||||
}
|
|
||||||
.right-box-role .btn-active{
|
|
||||||
color: #ee9d3f;
|
|
||||||
font-weight: bold;
|
|
||||||
border-color: #ee9d3f !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<style scoped>
|
|
||||||
.form-item-title{
|
|
||||||
position: absolute;
|
|
||||||
left: -120px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Reference in New Issue
Block a user