|
|
|
@ -1,27 +1,57 @@ |
|
|
|
<template> |
|
|
|
<template> |
|
|
|
<div class="app-container"> |
|
|
|
<div class="app-container"> |
|
|
|
<el-container> |
|
|
|
<el-container> |
|
|
|
<el-aside style="min-height: 300px;width: 200px;"> |
|
|
|
<el-aside style="min-height: 300px;width: 250px;"> |
|
|
|
<el-input v-model="filterText" prefix-icon="el-icon-search" placeholder="搜索服务..." style="margin-bottom:20px;" size="mini" clearable /> |
|
|
|
<el-button |
|
|
|
|
|
|
|
type="primary" |
|
|
|
|
|
|
|
plain |
|
|
|
|
|
|
|
size="mini" |
|
|
|
|
|
|
|
icon="el-icon-plus" |
|
|
|
|
|
|
|
@click.stop="addService" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
新建服务 |
|
|
|
|
|
|
|
</el-button> |
|
|
|
|
|
|
|
<el-input |
|
|
|
|
|
|
|
v-model="filterText" |
|
|
|
|
|
|
|
prefix-icon="el-icon-search" |
|
|
|
|
|
|
|
placeholder="搜索服务..." |
|
|
|
|
|
|
|
style="margin-bottom:10px;margin-top:10px;" |
|
|
|
|
|
|
|
size="mini" |
|
|
|
|
|
|
|
clearable |
|
|
|
|
|
|
|
/> |
|
|
|
<el-tree |
|
|
|
<el-tree |
|
|
|
ref="tree2" |
|
|
|
ref="serviceTree" |
|
|
|
:data="treeData" |
|
|
|
:data="treeData" |
|
|
|
:props="defaultProps" |
|
|
|
:props="defaultProps" |
|
|
|
:filter-node-method="filterNode" |
|
|
|
:filter-node-method="filterNode" |
|
|
|
:highlight-current="true" |
|
|
|
:highlight-current="true" |
|
|
|
:expand-on-click-node="false" |
|
|
|
:expand-on-click-node="false" |
|
|
|
empty-text="无数据" |
|
|
|
empty-text="无数据" |
|
|
|
node-key="id" |
|
|
|
node-key="serviceId" |
|
|
|
class="filter-tree" |
|
|
|
class="filter-tree" |
|
|
|
default-expand-all |
|
|
|
default-expand-all |
|
|
|
@node-click="onNodeClick" |
|
|
|
@node-click="onNodeClick" |
|
|
|
> |
|
|
|
> |
|
|
|
<span slot-scope="{ node, data }" class="custom-tree-node"> |
|
|
|
<span slot-scope="{ node, data }" class="custom-tree-node"> |
|
|
|
<span v-if="data.label.length < 15">{{ data.label }}</span> |
|
|
|
<div> |
|
|
|
<span v-else> |
|
|
|
<el-tooltip v-show="data.custom" content="自定义服务" class="item" effect="light" placement="top"> |
|
|
|
<el-tooltip :content="data.label" class="item" effect="light" placement="right"> |
|
|
|
<i class="el-icon-warning-outline"></i> |
|
|
|
<span>{{ data.label.substring(0, 15) + '...' }}</span> |
|
|
|
|
|
|
|
</el-tooltip> |
|
|
|
</el-tooltip> |
|
|
|
|
|
|
|
<span v-if="data.label.length < serviceTextLimitSize">{{ data.label }}</span> |
|
|
|
|
|
|
|
<span v-else> |
|
|
|
|
|
|
|
<el-tooltip :content="data.label" class="item" effect="light" placement="right"> |
|
|
|
|
|
|
|
<span>{{ data.label.substring(0, serviceTextLimitSize) + '...' }}</span> |
|
|
|
|
|
|
|
</el-tooltip> |
|
|
|
|
|
|
|
</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<span> |
|
|
|
|
|
|
|
<el-button |
|
|
|
|
|
|
|
v-if="data.custom === 1" |
|
|
|
|
|
|
|
type="text" |
|
|
|
|
|
|
|
size="mini" |
|
|
|
|
|
|
|
icon="el-icon-delete" |
|
|
|
|
|
|
|
title="删除服务" |
|
|
|
|
|
|
|
@click.stop="() => onDelService(data)"/> |
|
|
|
</span> |
|
|
|
</span> |
|
|
|
</span> |
|
|
|
</span> |
|
|
|
</el-tree> |
|
|
|
</el-tree> |
|
|
|
@ -35,10 +65,20 @@ |
|
|
|
<el-button type="primary" icon="el-icon-search" @click="onSearchTable">查询</el-button> |
|
|
|
<el-button type="primary" icon="el-icon-search" @click="onSearchTable">查询</el-button> |
|
|
|
</el-form-item> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
</el-form> |
|
|
|
|
|
|
|
<el-button |
|
|
|
|
|
|
|
v-show="isCustomService" |
|
|
|
|
|
|
|
type="primary" |
|
|
|
|
|
|
|
size="mini" |
|
|
|
|
|
|
|
icon="el-icon-plus" |
|
|
|
|
|
|
|
@click.stop="addRoute" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
新建路由 |
|
|
|
|
|
|
|
</el-button> |
|
|
|
<el-table |
|
|
|
<el-table |
|
|
|
:data="tableData" |
|
|
|
:data="tableData" |
|
|
|
border |
|
|
|
border |
|
|
|
max-height="500" |
|
|
|
max-height="500" |
|
|
|
|
|
|
|
style="margin-top: 10px;" |
|
|
|
> |
|
|
|
> |
|
|
|
<el-table-column |
|
|
|
<el-table-column |
|
|
|
prop="name" |
|
|
|
prop="name" |
|
|
|
@ -69,12 +109,12 @@ |
|
|
|
</el-table-column> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column |
|
|
|
<el-table-column |
|
|
|
prop="ignoreValidate" |
|
|
|
prop="ignoreValidate" |
|
|
|
label="忽略验证" |
|
|
|
label="签名校验" |
|
|
|
width="80" |
|
|
|
width="80" |
|
|
|
> |
|
|
|
> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<span v-if="scope.row.ignoreValidate === 1" style="color:#67C23A">是</span> |
|
|
|
<span v-if="scope.row.ignoreValidate === 0" style="color:#67C23A">校验</span> |
|
|
|
<span v-if="scope.row.ignoreValidate === 0" style="color:#909399">否</span> |
|
|
|
<span v-if="scope.row.ignoreValidate === 1" style="color:#E6A23C">不校验</span> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column |
|
|
|
<el-table-column |
|
|
|
@ -93,7 +133,7 @@ |
|
|
|
width="80" |
|
|
|
width="80" |
|
|
|
> |
|
|
|
> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<span v-if="scope.row.status === 0" style="color:#909399">待审核</span> |
|
|
|
<span v-if="scope.row.status === 0" style="color:#E6A23C">待审核</span> |
|
|
|
<span v-if="scope.row.status === 1" style="color:#67C23A">已启用</span> |
|
|
|
<span v-if="scope.row.status === 1" style="color:#67C23A">已启用</span> |
|
|
|
<span v-if="scope.row.status === 2" style="color:#F56C6C">已禁用</span> |
|
|
|
<span v-if="scope.row.status === 2" style="color:#F56C6C">已禁用</span> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
@ -106,79 +146,170 @@ |
|
|
|
<template slot-scope="scope"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<el-button type="text" size="mini" @click="onTableUpdate(scope.row)">修改</el-button> |
|
|
|
<el-button type="text" size="mini" @click="onTableUpdate(scope.row)">修改</el-button> |
|
|
|
<el-button v-if="scope.row.permission" type="text" size="mini" @click="onTableAuth(scope.row)">授权</el-button> |
|
|
|
<el-button v-if="scope.row.permission" type="text" size="mini" @click="onTableAuth(scope.row)">授权</el-button> |
|
|
|
|
|
|
|
<el-button v-if="scope.row.custom" type="text" size="mini" @click="onTableDel(scope.row)">删除</el-button> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
</el-table> |
|
|
|
<!-- route dialog --> |
|
|
|
|
|
|
|
<el-dialog title="修改路由" :visible.sync="routeDialogVisible" :close-on-click-modal="false"> |
|
|
|
|
|
|
|
<el-form |
|
|
|
|
|
|
|
:model="routeDialogFormData" |
|
|
|
|
|
|
|
label-width="120px" |
|
|
|
|
|
|
|
size="mini" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<el-form-item label="id"> |
|
|
|
|
|
|
|
<el-input v-model="routeDialogFormData.id" readonly="readonly" /> |
|
|
|
|
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
<el-form-item label="uri"> |
|
|
|
|
|
|
|
<el-input v-model="routeDialogFormData.uri" /> |
|
|
|
|
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
<el-form-item label="path"> |
|
|
|
|
|
|
|
<el-input v-model="routeDialogFormData.path" /> |
|
|
|
|
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
<el-form-item label="状态"> |
|
|
|
|
|
|
|
<el-radio-group v-model="routeDialogFormData.status"> |
|
|
|
|
|
|
|
<el-radio :label="1" name="status">启用</el-radio> |
|
|
|
|
|
|
|
<el-radio :label="2" name="status" style="color:#F56C6C">禁用</el-radio> |
|
|
|
|
|
|
|
</el-radio-group> |
|
|
|
|
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
</el-form> |
|
|
|
|
|
|
|
<div slot="footer" class="dialog-footer"> |
|
|
|
|
|
|
|
<el-button @click="routeDialogVisible = false">取 消</el-button> |
|
|
|
|
|
|
|
<el-button type="primary" @click="onRouteDialogSave">保 存</el-button> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
<!-- auth dialog --> |
|
|
|
|
|
|
|
<el-dialog title="路由授权" :visible.sync="authDialogVisible" :close-on-click-modal="false"> |
|
|
|
|
|
|
|
<el-form |
|
|
|
|
|
|
|
:model="authDialogFormData" |
|
|
|
|
|
|
|
label-width="120px" |
|
|
|
|
|
|
|
size="mini" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<el-form-item label="id"> |
|
|
|
|
|
|
|
<el-input v-model="authDialogFormData.routeId" readonly="readonly" /> |
|
|
|
|
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
<el-form-item label="角色"> |
|
|
|
|
|
|
|
<el-checkbox-group v-model="authDialogFormData.roleCode"> |
|
|
|
|
|
|
|
<el-checkbox v-for="item in roles" :key="item.roleCode" :label="item.roleCode">{{ item.description }}</el-checkbox> |
|
|
|
|
|
|
|
</el-checkbox-group> |
|
|
|
|
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
</el-form> |
|
|
|
|
|
|
|
<div slot="footer" class="dialog-footer"> |
|
|
|
|
|
|
|
<el-button @click="authDialogVisible = false">取 消</el-button> |
|
|
|
|
|
|
|
<el-button type="primary" @click="onAuthDialogSave">保 存</el-button> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
</el-main> |
|
|
|
</el-main> |
|
|
|
</el-container> |
|
|
|
</el-container> |
|
|
|
|
|
|
|
<!-- route dialog --> |
|
|
|
|
|
|
|
<el-dialog |
|
|
|
|
|
|
|
:title="routeDialogTitle" |
|
|
|
|
|
|
|
:visible.sync="routeDialogVisible" |
|
|
|
|
|
|
|
:close-on-click-modal="false" |
|
|
|
|
|
|
|
@close="onCloseRouteDialog" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<el-form |
|
|
|
|
|
|
|
ref="routeDialogFormRef" |
|
|
|
|
|
|
|
:model="routeDialogFormData" |
|
|
|
|
|
|
|
:rules="routeDialogFormRules" |
|
|
|
|
|
|
|
label-width="120px" |
|
|
|
|
|
|
|
size="mini" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<el-input v-show="false" v-model="routeDialogFormData.id" /> |
|
|
|
|
|
|
|
<el-form-item label="接口名" prop="name"> |
|
|
|
|
|
|
|
<el-input v-model="routeDialogFormData.name" placeholder="接口名，如：product.goods.list" :disabled="Boolean(routeDialogFormData.id)" /> |
|
|
|
|
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
<el-form-item label="版本号" prop="version"> |
|
|
|
|
|
|
|
<el-input v-model="routeDialogFormData.version" placeholder="版本号，如：1.0" :disabled="Boolean(routeDialogFormData.id)" /> |
|
|
|
|
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
<el-form-item label="uri" prop="uri"> |
|
|
|
|
|
|
|
<el-input v-model="routeDialogFormData.uri" placeholder="如：http://www.xx.com" :disabled="routePropDisabled()" /> |
|
|
|
|
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
<el-form-item label="path" prop="path"> |
|
|
|
|
|
|
|
<el-input v-model="routeDialogFormData.path" placeholder="如：/order/list" :disabled="routePropDisabled()" /> |
|
|
|
|
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
<el-form-item label="签名校验"> |
|
|
|
|
|
|
|
<el-radio-group v-model="routeDialogFormData.ignoreValidate" :disabled="routePropDisabled()"> |
|
|
|
|
|
|
|
<el-radio :label="0" name="ignoreValidate">校验</el-radio> |
|
|
|
|
|
|
|
<el-radio :label="1" name="ignoreValidate">不校验</el-radio> |
|
|
|
|
|
|
|
</el-radio-group> |
|
|
|
|
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
<el-form-item label="统一格式输出"> |
|
|
|
|
|
|
|
<el-radio-group v-model="routeDialogFormData.mergeResult" :disabled="routePropDisabled()"> |
|
|
|
|
|
|
|
<el-radio :label="1" name="mergeResult">是</el-radio> |
|
|
|
|
|
|
|
<el-radio :label="0" name="mergeResult">否</el-radio> |
|
|
|
|
|
|
|
</el-radio-group> |
|
|
|
|
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
<el-form-item label="状态"> |
|
|
|
|
|
|
|
<el-radio-group v-model="routeDialogFormData.status"> |
|
|
|
|
|
|
|
<el-radio :label="1" name="status">启用</el-radio> |
|
|
|
|
|
|
|
<el-radio :label="2" name="status" style="color:#F56C6C">禁用</el-radio> |
|
|
|
|
|
|
|
</el-radio-group> |
|
|
|
|
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
</el-form> |
|
|
|
|
|
|
|
<div slot="footer" class="dialog-footer"> |
|
|
|
|
|
|
|
<el-button @click="routeDialogVisible = false">取 消</el-button> |
|
|
|
|
|
|
|
<el-button type="primary" @click="onRouteDialogSave">保 存</el-button> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
<!-- auth dialog --> |
|
|
|
|
|
|
|
<el-dialog |
|
|
|
|
|
|
|
title="路由授权" |
|
|
|
|
|
|
|
:visible.sync="authDialogVisible" |
|
|
|
|
|
|
|
:close-on-click-modal="false" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<el-form |
|
|
|
|
|
|
|
:model="authDialogFormData" |
|
|
|
|
|
|
|
label-width="120px" |
|
|
|
|
|
|
|
size="mini" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<el-form-item label="id"> |
|
|
|
|
|
|
|
<el-input v-model="authDialogFormData.routeId" readonly="readonly" /> |
|
|
|
|
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
<el-form-item label="角色"> |
|
|
|
|
|
|
|
<el-checkbox-group v-model="authDialogFormData.roleCode"> |
|
|
|
|
|
|
|
<el-checkbox v-for="item in roles" :key="item.roleCode" :label="item.roleCode">{{ item.description }}</el-checkbox> |
|
|
|
|
|
|
|
</el-checkbox-group> |
|
|
|
|
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
</el-form> |
|
|
|
|
|
|
|
<div slot="footer" class="dialog-footer"> |
|
|
|
|
|
|
|
<el-button @click="authDialogVisible = false">取 消</el-button> |
|
|
|
|
|
|
|
<el-button type="primary" @click="onAuthDialogSave">保 存</el-button> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
<!--添加服务--> |
|
|
|
|
|
|
|
<el-dialog |
|
|
|
|
|
|
|
title="添加服务" |
|
|
|
|
|
|
|
:visible.sync="addServiceDialogVisible" |
|
|
|
|
|
|
|
:close-on-click-modal="false" |
|
|
|
|
|
|
|
@close="closeAddServiceDlg" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<el-form |
|
|
|
|
|
|
|
ref="addServiceForm" |
|
|
|
|
|
|
|
:model="addServiceForm" |
|
|
|
|
|
|
|
:rules="addServiceFormRules" |
|
|
|
|
|
|
|
label-width="200px" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<el-form-item label="服务名（serviceId）" prop="serviceId"> |
|
|
|
|
|
|
|
<el-input v-model="addServiceForm.serviceId" placeholder="服务名，如：order-service" /> |
|
|
|
|
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
</el-form> |
|
|
|
|
|
|
|
<span slot="footer" class="dialog-footer"> |
|
|
|
|
|
|
|
<el-button @click="addServiceDialogVisible = false">取 消</el-button> |
|
|
|
|
|
|
|
<el-button type="primary" @click="onAddService">确 定</el-button> |
|
|
|
|
|
|
|
</span> |
|
|
|
|
|
|
|
</el-dialog> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
|
|
|
|
<style> |
|
|
|
|
|
|
|
.custom-tree-node { |
|
|
|
|
|
|
|
flex: 1; |
|
|
|
|
|
|
|
display: flex; |
|
|
|
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
justify-content: space-between; |
|
|
|
|
|
|
|
font-size: 14px; |
|
|
|
|
|
|
|
padding-right: 8px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.el-input.is-disabled .el-input__inner {color: #909399;} |
|
|
|
|
|
|
|
.el-radio__input.is-disabled+span.el-radio__label {color: #909399;} |
|
|
|
|
|
|
|
</style> |
|
|
|
<script> |
|
|
|
<script> |
|
|
|
export default { |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
return { |
|
|
|
|
|
|
|
serviceTextLimitSize: 20, |
|
|
|
filterText: '', |
|
|
|
filterText: '', |
|
|
|
treeData: [], |
|
|
|
treeData: [], |
|
|
|
tableData: [], |
|
|
|
tableData: [], |
|
|
|
serviceId: '', |
|
|
|
serviceId: '', |
|
|
|
searchFormData: {}, |
|
|
|
isCustomService: false, |
|
|
|
|
|
|
|
searchFormData: { |
|
|
|
|
|
|
|
id: '', |
|
|
|
|
|
|
|
serviceId: '' |
|
|
|
|
|
|
|
}, |
|
|
|
defaultProps: { |
|
|
|
defaultProps: { |
|
|
|
children: 'children', |
|
|
|
children: 'children', |
|
|
|
label: 'label' |
|
|
|
label: 'label' |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
routeDialogTitle: '修改路由', |
|
|
|
// dialog |
|
|
|
// dialog |
|
|
|
routeDialogFormData: { |
|
|
|
routeDialogFormData: { |
|
|
|
status: 1 |
|
|
|
id: '', |
|
|
|
|
|
|
|
name: '', |
|
|
|
|
|
|
|
version: '1.0', |
|
|
|
|
|
|
|
uri: '', |
|
|
|
|
|
|
|
path: '', |
|
|
|
|
|
|
|
status: 1, |
|
|
|
|
|
|
|
mergeResult: 1, |
|
|
|
|
|
|
|
ignoreValidate: 0 |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
routeDialogFormRules: { |
|
|
|
|
|
|
|
name: [ |
|
|
|
|
|
|
|
{ required: true, message: '不能为空', trigger: 'blur' }, |
|
|
|
|
|
|
|
{ min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' } |
|
|
|
|
|
|
|
], |
|
|
|
|
|
|
|
version: [ |
|
|
|
|
|
|
|
{ required: true, message: '不能为空', trigger: 'blur' }, |
|
|
|
|
|
|
|
{ min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' } |
|
|
|
|
|
|
|
], |
|
|
|
|
|
|
|
uri: [ |
|
|
|
|
|
|
|
{ required: true, message: '不能为空', trigger: 'blur' }, |
|
|
|
|
|
|
|
{ min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' } |
|
|
|
|
|
|
|
], |
|
|
|
|
|
|
|
path: [ |
|
|
|
|
|
|
|
{ min: 0, max: 100, message: '长度不能超过 100 个字符', trigger: 'blur' } |
|
|
|
|
|
|
|
] |
|
|
|
}, |
|
|
|
}, |
|
|
|
routeDialogVisible: false, |
|
|
|
routeDialogVisible: false, |
|
|
|
roles: [], |
|
|
|
roles: [], |
|
|
|
@ -186,12 +317,23 @@ export default { |
|
|
|
routeId: '', |
|
|
|
routeId: '', |
|
|
|
roleCode: [] |
|
|
|
roleCode: [] |
|
|
|
}, |
|
|
|
}, |
|
|
|
authDialogVisible: false |
|
|
|
authDialogVisible: false, |
|
|
|
|
|
|
|
// addService |
|
|
|
|
|
|
|
addServiceDialogVisible: false, |
|
|
|
|
|
|
|
addServiceForm: { |
|
|
|
|
|
|
|
serviceId: '' |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
addServiceFormRules: { |
|
|
|
|
|
|
|
serviceId: [ |
|
|
|
|
|
|
|
{ required: true, message: '请输入服务名称', trigger: 'blur' }, |
|
|
|
|
|
|
|
{ min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' } |
|
|
|
|
|
|
|
] |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
watch: { |
|
|
|
filterText(val) { |
|
|
|
filterText(val) { |
|
|
|
this.$refs.tree2.filter(val) |
|
|
|
this.$refs.serviceTree.filter(val) |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
created() { |
|
|
|
created() { |
|
|
|
@ -204,6 +346,12 @@ export default { |
|
|
|
this.post('service.list', {}, function(resp) { |
|
|
|
this.post('service.list', {}, function(resp) { |
|
|
|
const respData = resp.data |
|
|
|
const respData = resp.data |
|
|
|
this.treeData = this.convertToTreeData(respData, 0) |
|
|
|
this.treeData = this.convertToTreeData(respData, 0) |
|
|
|
|
|
|
|
this.$nextTick(() => { |
|
|
|
|
|
|
|
// 高亮已选中的 |
|
|
|
|
|
|
|
if (this.serviceId) { |
|
|
|
|
|
|
|
this.$refs.serviceTree.setCurrentKey(this.serviceId) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}) |
|
|
|
}) |
|
|
|
}) |
|
|
|
}, |
|
|
|
}, |
|
|
|
// 树搜索 |
|
|
|
// 树搜索 |
|
|
|
@ -216,6 +364,7 @@ export default { |
|
|
|
if (data.parentId) { |
|
|
|
if (data.parentId) { |
|
|
|
this.serviceId = data.label |
|
|
|
this.serviceId = data.label |
|
|
|
this.searchFormData.serviceId = this.serviceId |
|
|
|
this.searchFormData.serviceId = this.serviceId |
|
|
|
|
|
|
|
this.isCustomService = Boolean(data.custom) |
|
|
|
this.loadTable() |
|
|
|
this.loadTable() |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
@ -250,16 +399,18 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
const children = [] |
|
|
|
const children = [] |
|
|
|
for (let i = 0; i < data.length; i++) { |
|
|
|
for (let i = 0; i < data.length; i++) { |
|
|
|
const item = { label: data[i].serviceId, parentId: 1 } |
|
|
|
data[i].parentId = 1 |
|
|
|
children.push(item) |
|
|
|
data[i].label = data[i].serviceId |
|
|
|
|
|
|
|
children.push(data[i]) |
|
|
|
} |
|
|
|
} |
|
|
|
root.children = children |
|
|
|
root.children = children |
|
|
|
result.push(root) |
|
|
|
result.push(root) |
|
|
|
return result |
|
|
|
return result |
|
|
|
}, |
|
|
|
}, |
|
|
|
// table |
|
|
|
// table |
|
|
|
loadTable: function() { |
|
|
|
loadTable: function(param) { |
|
|
|
this.post('route.list', this.searchFormData, function(resp) { |
|
|
|
const postData = param || this.searchFormData |
|
|
|
|
|
|
|
this.post('route.list', postData, function(resp) { |
|
|
|
this.tableData = resp.data |
|
|
|
this.tableData = resp.data |
|
|
|
}) |
|
|
|
}) |
|
|
|
}, |
|
|
|
}, |
|
|
|
@ -267,8 +418,11 @@ export default { |
|
|
|
this.loadTable() |
|
|
|
this.loadTable() |
|
|
|
}, |
|
|
|
}, |
|
|
|
onTableUpdate: function(row) { |
|
|
|
onTableUpdate: function(row) { |
|
|
|
Object.assign(this.routeDialogFormData, row) |
|
|
|
this.routeDialogTitle = '修改路由' |
|
|
|
this.routeDialogVisible = true |
|
|
|
this.routeDialogVisible = true |
|
|
|
|
|
|
|
this.$nextTick(() => { |
|
|
|
|
|
|
|
Object.assign(this.routeDialogFormData, row) |
|
|
|
|
|
|
|
}) |
|
|
|
}, |
|
|
|
}, |
|
|
|
onTableAuth: function(row) { |
|
|
|
onTableAuth: function(row) { |
|
|
|
this.authDialogFormData.routeId = row.id |
|
|
|
this.authDialogFormData.routeId = row.id |
|
|
|
@ -283,6 +437,28 @@ export default { |
|
|
|
this.authDialogVisible = true |
|
|
|
this.authDialogVisible = true |
|
|
|
}) |
|
|
|
}) |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
onTableDel: function(row) { |
|
|
|
|
|
|
|
this.confirm(`确认要删除路由【${row.id}】吗？`, function(done) { |
|
|
|
|
|
|
|
const data = { |
|
|
|
|
|
|
|
serviceId: this.serviceId, |
|
|
|
|
|
|
|
id: row.id |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
this.post('route.del', data, function() { |
|
|
|
|
|
|
|
done() |
|
|
|
|
|
|
|
this.tip('删除成功') |
|
|
|
|
|
|
|
this.loadTable() |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
onCloseRouteDialog: function() { |
|
|
|
|
|
|
|
this.resetForm('routeDialogFormRef') |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
routePropDisabled: function() { |
|
|
|
|
|
|
|
if (!this.routeDialogFormData.id) { |
|
|
|
|
|
|
|
return false |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
return !this.isCustomService |
|
|
|
|
|
|
|
}, |
|
|
|
loadRouteRole: function() { |
|
|
|
loadRouteRole: function() { |
|
|
|
if (this.roles.length === 0) { |
|
|
|
if (this.roles.length === 0) { |
|
|
|
this.post('role.listall', {}, function(resp) { |
|
|
|
this.post('role.listall', {}, function(resp) { |
|
|
|
@ -290,6 +466,15 @@ export default { |
|
|
|
}) |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
addRoute: function() { |
|
|
|
|
|
|
|
this.routeDialogTitle = '新建路由' |
|
|
|
|
|
|
|
this.routeDialogVisible = true |
|
|
|
|
|
|
|
this.$nextTick(() => { |
|
|
|
|
|
|
|
Object.assign(this.routeDialogFormData, { |
|
|
|
|
|
|
|
id: '' |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
}, |
|
|
|
roleRender: function(row) { |
|
|
|
roleRender: function(row) { |
|
|
|
if (!row.permission) { |
|
|
|
if (!row.permission) { |
|
|
|
return '（公开）' |
|
|
|
return '（公开）' |
|
|
|
@ -302,18 +487,52 @@ export default { |
|
|
|
return html.length > 0 ? html.join(', ') : '<span class="x-red">未授权</span>' |
|
|
|
return html.length > 0 ? html.join(', ') : '<span class="x-red">未授权</span>' |
|
|
|
}, |
|
|
|
}, |
|
|
|
onRouteDialogSave: function() { |
|
|
|
onRouteDialogSave: function() { |
|
|
|
this.routeDialogFormData.serviceId = this.serviceId |
|
|
|
this.$refs.routeDialogFormRef.validate((valid) => { |
|
|
|
this.post('route.update', this.routeDialogFormData, function() { |
|
|
|
if (valid) { |
|
|
|
this.routeDialogVisible = false |
|
|
|
const uri = this.routeDialogFormData.id ? 'route.update' : 'route.add' |
|
|
|
this.loadTable() |
|
|
|
this.routeDialogFormData.serviceId = this.serviceId |
|
|
|
|
|
|
|
this.post(uri, this.routeDialogFormData, function() { |
|
|
|
|
|
|
|
this.routeDialogVisible = false |
|
|
|
|
|
|
|
this.loadTable() |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
}, |
|
|
|
}, |
|
|
|
onAuthDialogSave: function() { |
|
|
|
onAuthDialogSave: function() { |
|
|
|
this.post('route.role.update', this.authDialogFormData, function() { |
|
|
|
this.post('route.role.update', this.authDialogFormData, function() { |
|
|
|
console.log(this.authDialogFormData) |
|
|
|
|
|
|
|
this.authDialogVisible = false |
|
|
|
this.authDialogVisible = false |
|
|
|
this.loadTable() |
|
|
|
this.loadTable() |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
addService: function() { |
|
|
|
|
|
|
|
this.addServiceDialogVisible = true |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
closeAddServiceDlg: function() { |
|
|
|
|
|
|
|
this.$refs.addServiceForm.resetFields() |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
onAddService: function() { |
|
|
|
|
|
|
|
this.$refs.addServiceForm.validate((valid) => { |
|
|
|
|
|
|
|
if (valid) { |
|
|
|
|
|
|
|
this.post('service.custom.add', this.addServiceForm, function(resp) { |
|
|
|
|
|
|
|
this.addServiceDialogVisible = false |
|
|
|
|
|
|
|
this.tip('添加成功') |
|
|
|
|
|
|
|
this.loadTree() |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
onDelService: function(data) { |
|
|
|
|
|
|
|
const serviceId = data.serviceId |
|
|
|
|
|
|
|
this.confirm('确认要删除服务' + serviceId + '吗，【对应的路由配置会一起删除】', function(done) { |
|
|
|
|
|
|
|
const postData = { |
|
|
|
|
|
|
|
serviceId: serviceId |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
this.post('service.custom.del', postData, function() { |
|
|
|
|
|
|
|
done() |
|
|
|
|
|
|
|
this.tip('删除成功') |
|
|
|
|
|
|
|
this.loadTree() |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
tanghc
6 years ago