fix: 删除无用box
This commit is contained in:
chenjinsong
@@ -304,7 +304,7 @@ export default {
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'change' }
|
||||
],
|
||||
authProtocolPort: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'change' },
|
||||
// { required: true, message: this.$t('validate.required'), trigger: 'change' },
|
||||
{ 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