@arkxos/arkos-app-gateway-manage 0.1.0

package/src/views/ClientList.vue

@@ -0,0 +1,217 @@
+<template>
+	<div class="layout-padding">
+		<div class="layout-padding-auto layout-padding-view">
+			<div class="box-flex-between">
+				<el-button icon="el-icon-folder-add" type="primary" style="margin-left: 5px;" @click="handleCreateClient"></el-button>
+
+				<el-input placeholder="请输入客户端名称" v-model="form.name" class="input-with-select" style="width: 620px;" clearable>
+					<template #prepend>
+						<el-select v-model="form.groupCode" placeholder="请选择分组" style="width: 140px; margin-right: 10px;">
+							<el-option label="所有" value=""/>
+							<el-option v-for="item in groupOptions" :key="item.value" :label="item.label" :value="item.value"/>
+						</el-select>
+						<el-popover placement="bottom" trigger="click">
+							<el-radio v-model="form.status" v-for="item in statusOptions" :key="item.value" :label="item.value">{{item.label}}</el-radio>
+							<template #reference>
+								<el-button>
+									服务状态:{{form.status === '0' ? '启用': form.status === '1' ? '禁用' : '所有'}}<i class="el-icon-caret-bottom el-icon--right"></i>
+								</el-button>
+							</template>
+						</el-popover>
+					</template>
+					<template #append>
+						<el-button icon="el-icon-search" @click="search"></el-button>
+					</template>
+				</el-input>
+			</div>
+
+			<el-table size="small" :data="tableData" height="100%">
+				<el-table-column label="客户端ID(系统生成)" width="300">
+					<template #default="{ row }">
+						<el-tag size="small" type="warning" style="font-weight: bold;">{{row.id}}</el-tag>
+					</template>
+				</el-table-column>
+				<el-table-column label="分组">
+					<template #default="{ row }">
+						<el-tag v-for="group in groupOptions" :key="group.value" v-show="group.value === row.groupCode" size="small" type="">{{group.label}}</el-tag>
+					</template>
+				</el-table-column>
+				<el-table-column label="系统代号>客户端名称">
+					<template #default="{ row }">
+						<span style="font-weight: bold;" v-if="row.systemCode != undefined && row.systemCode != ''">{{row.systemCode}} ></span> {{row.name}}
+					</template>
+				</el-table-column>
+				<el-table-column label="IP地址">
+					<template #default="{ row }">
+						<el-tag size="small" type="success">{{row.ip}}</el-tag>
+					</template>
+				</el-table-column>
+				<el-table-column label="创建时间" prop="createTime" width="220"></el-table-column>
+				<el-table-column label="状态" prop="status" width="100">
+					<template #default="{ row }">
+						<el-tag effect="dark" size="small" v-if="row.status === '0'" type="">启用</el-tag>
+						<el-tag effect="dark" size="small" v-if="row.status === '1'" type="danger">禁用</el-tag>
+					</template>
+				</el-table-column>
+				<el-table-column label="备注" prop="remarks" width="350"></el-table-column>
+				<el-table-column label="操作" width="120">
+					<template #default="{ row }">
+						<el-dropdown trigger="click" @command="handleCommandClient">
+						   <el-button size="small" type="warning">
+						      管理
+									<el-icon><ArrowDown /></el-icon>
+						    </el-button>
+							<template #dropdown>
+						  	<el-dropdown-menu>
+									<el-dropdown-item icon="el-icon-connection" :command="{command:'addGateway', row: row}">注册网关服务</el-dropdown-item>
+									<el-dropdown-item icon="el-icon-tickets" :command="{command:'info', row: row}">详情</el-dropdown-item>
+									<el-dropdown-item icon="el-icon-edit" :command="{command:'edit', row: row}">编辑</el-dropdown-item>
+									<el-dropdown-item :command="{command:'start', row: row}" divided><el-icon color="#409EFF"><CircleCheckFilled /></el-icon>启用</el-dropdown-item>
+									<el-dropdown-item :command="{command:'stop', row: row}"><el-icon color="#ff0000"><CircleCloseFilled /></el-icon>禁用</el-dropdown-item>
+									<el-dropdown-item icon="el-icon-delete" :command="{command:'delete', row: row}" divided>删除</el-dropdown-item>
+						  	</el-dropdown-menu>
+							</template>
+						</el-dropdown>
+					</template>
+				</el-table-column>
+			</el-table>
+			<div class="block">
+				<el-pagination
+					@size-change="handleSizeChange"
+					@current-change="handleCurrentChange"
+					:current-page="currentPage"
+					:page-sizes="[10,  30, 50]"
+					:page-size="pageSize"
+					layout="total, sizes, prev, pager, next, jumper"
+					:total="totalNum">
+				</el-pagination>
+			</div>
+		</div>
+		<el-drawer v-model="drawer" :direction="direction" :before-close="handleClose" :with-header="false" size="26%" @opened="handleOpenedClientInfo">
+			<!-- 父组件传参与子组件方法监听 -->
+			<clientInfoComponent ref="clientInfo" :infoForm="infoForm"></clientInfoComponent>
+		</el-drawer>
+	</div>
+</template>
+
+<script setup>
+import { CircleCheckFilled, CircleCloseFilled, ArrowDown } from '@element-plus/icons-vue'
+</script>
+
+<script>
+import { getCurrentInstance } from 'vue';
+	import {clientPageList, deleteClient, startClient, stopClient} from '../api/client_api.js'
+	import clientInfoComponent from '../component/ClientInfo.vue'
+
+	export default {
+		data() {
+   const me = getCurrentInstance();
+   const groups = me.proxy.GLOBAL_VAR.groups;
+
+			return {
+				form:{
+					name:null,
+					groupCode: null,
+					status: null
+				},
+				ip: null,
+				drawer: false,
+				direction: 'rtl',
+				infoForm:{},
+				tableData: [],
+				currentPage: 1,
+				pageSize: 10,
+				totalNum: 0,
+				statusOptions: [
+					{value: null, label: '所有'},
+					{value: '0',label: '启用'},
+					{value: '1',label: '禁用'},
+				],
+				groupOptions: groups
+			};
+		},
+		created: function() {
+			this.init();
+		},
+		components:{
+			clientInfoComponent
+		},
+		mounted: function() {
+
+		},
+		beforeDestroy: function() {
+
+		},
+		methods:{
+			init() {
+				this.search();
+			},
+			handleSizeChange(val) {
+				this.pageSize = val;
+				this.search();
+			},
+			handleCurrentChange(val) {
+				this.currentPage = val;
+				this.search();
+			},
+			handleCreateClient(){
+				this.$router.push({path:'/createClient',query:{handleType:'add'}});
+			},
+			handleOpenedClientInfo(){
+				this.$refs.clientInfo.init();
+			},
+			handleCommandClient(obj){
+				console.log("command" , obj);
+				let _this = this;
+				if (obj.command === 'addGateway'){
+					this.$router.push({path:'/addClientGateway',query:{client:obj.row}});
+				} else if (obj.command === 'info'){
+					this.drawer = true;
+					this.infoForm = obj.row;
+				}  else if (obj.command === 'edit'){
+					this.infoForm = obj.row;
+					this.$router.push({path:'/createClient',query:{handleType:'edit',client:obj.row}});
+				} else if (obj.command === 'start'){
+					startClient({id:obj.row.id}).then(function(result){
+						_this.GLOBAL_FUN.successMsg();
+						_this.search();
+					});
+				} else if (obj.command === 'stop'){
+					stopClient({id:obj.row.id}).then(function(result){
+						_this.GLOBAL_FUN.successMsg();
+						_this.search();
+					});
+				} else if (obj.command === 'delete'){
+					this.$confirm('确认删除"'+obj.row.name+'"客户端？').then(_ => {
+						deleteClient({id:obj.row.id}).then(function(result){
+							_this.GLOBAL_FUN.successMsg();
+							_this.search();
+						})
+					}).catch(_ => {});
+				}
+			},
+			handleClose(done) {
+				done();
+			},
+			search(){
+				let _this = this;
+				clientPageList({name:this.form.name, status: this.form.status, groupCode: this.form.groupCode, ip: this.ip, currentPage: this.currentPage, pageSize: this.pageSize}).then(function(result){
+					if (result.data){
+						_this.tableData = result.data.records;
+						_this.totalNum = result.data.total;
+					}
+				});
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+.box-flex-between {
+	padding-bottom: 18px;
+}
+
+.block {
+	padding: 0 20px;
+}
+</style>

package/src/views/CreateBalanced.vue

@@ -0,0 +1,341 @@
+<template>
+	<div class="createBalanced">
+		<el-card class="box-card" style="margin-top: 20px;">
+			<template #header>
+				<div class="clear-box">
+					<div lass="clear-l">
+						<span style="font-weight: 500;">负载管理配置</span>
+						<el-popover trigger="click" placement="bottom" width="500">
+							<div style="font-size: 10pt;">
+								<span>配置说明：</span><br/>
+								<span>1. 名称不能重复。</span><br/>
+								<span>2. 路径不能为空，路径规则需要满足gateway断言Path规则，请根据实际API调用路径设置。</span><br/>
+								<span>3. 路径/parent/为默认根路径，不可更改，只做网关路由规则识别，用于区分负载路由路径与普通路由路径。</span><br/>
+								<span>4. 实际转发到服务端不包含该/parent/根路径。</span><br/>
+								<span>5. 网关转发路由规则：http://gateway_host:gateway_port/server-id/api 或 http://gateway_host:gateway_port/api。</span><br/>
+							</div>
+							<template #reference>
+								<el-button style="padding: 3px 0;" icon="el-icon-questionFilled" type="text" title="说明"></el-button>
+							</template>
+						</el-popover>
+					</div>
+					<div class="clear-r">
+						<div style="margin-left: 10px;">
+							<el-button icon="el-icon-delete" size="default" type="warning" @click="resetForm">清 空</el-button>
+						</div>
+						<div style="margin-left: 10px;">
+							<el-button icon="el-icon-tickets" size="default" type="success" @click="submit">发 布</el-button>
+						</div>
+						<div style="margin-left: 10px;">
+							<el-button icon="el-icon-connection" size="default" type="primary" @click="search" title="查找服务端">添加服务</el-button>
+						</div>
+					</div>
+				</div>
+			</template>
+
+			<el-dialog title="添加服务端" v-model="dialogFormVisible" width="40%" :close-on-click-modal="false">
+				<el-table size="mini" :data="routeTableData" style="width: 100%">
+					<el-table-column label="服务ID" prop="id"></el-table-column>
+					<el-table-column label="服务名称" prop="name"></el-table-column>
+					<el-table-column label="服务地址" prop="uri"></el-table-column>
+					<el-table-column label="操作" width="60">
+						<template #default="{ row }">
+							<el-button v-if="row.selected !== true" size="mini" circle icon="el-icon-plus" type="success" title="点击添加" @click="handleAddRegServer(row)"></el-button>
+							<el-button v-if="row.selected === true" size="mini" circle icon="el-icon-check" type="primary" title="已添加" @click="handleAddRegServer(row)"></el-button>
+						</template>
+					</el-table-column>
+				</el-table>
+				<div class="block" style="margin-top: 20px;">
+					<el-pagination
+						@size-change="handleRouteSizeChange"
+						@current-change="handleRouteCurrentChange"
+						:current-page="currentPage"
+						:page-sizes="[10,  30, 50]"
+						:page-size="pageSize"
+						layout="total, sizes, prev, pager, next, jumper"
+						:total="totalNum">
+					</el-pagination>
+				</div>
+				<template #footer>
+					<div class="dialog-footer">
+						<el-button @click="dialogFormVisible = false" size="small">关 闭</el-button>
+					</div>
+				</template>
+
+			</el-dialog>
+
+			<el-row :gutter="24">
+				<el-col :span="8">
+					<el-card class="box-card">
+						<el-form size="small" :rules="rules" ref="form" :model="form" label-width="70px">
+							<el-form-item label="名称" prop="name">
+								<el-input v-model="form.name" style="width: 60%;"></el-input>
+							</el-form-item>
+							<el-form-item label="分组" prop="groupCode">
+								<el-select filterable v-model="form.groupCode" placeholder="请选择分组" style="width: 60%;">
+									<el-option v-for="item in groupOptions" :key="item.value" :label="item.label" :value="item.value" />
+								</el-select>
+							</el-form-item>
+							<el-form-item label="状态" prop="status">
+								<el-radio-group v-model="form.status">
+									<el-radio label="0">启用</el-radio>
+									<el-radio label="1">禁用</el-radio>
+								</el-radio-group>
+							</el-form-item>
+							<el-form-item label="路径" prop="loadUri">
+								<el-row :gutter="20">
+									<el-col :span="4" style="border: 0px solid red; padding: 0;">
+										<el-input v-model="parent" :disabled="true"  title="默认负载地址前缀'/parent/',请不要在自定义地址前加/"></el-input>
+									</el-col>
+									<el-col :span="19" style="border: 0px solid red; padding: 0;">
+										<el-input v-model="form.loadUri" :disabled="uriDisabled" placeholder="请输入网关Path,示例：producer/** 或 producer/api"></el-input>
+									</el-col>
+								</el-row>
+							</el-form-item>
+							<el-form-item label="备注" prop="remarks">
+								<el-input type="textarea" v-model="form.remarks"></el-input>
+							</el-form-item>
+						</el-form>
+					</el-card>
+				</el-col>
+				<el-col :span="16">
+					<el-card class="box-card">
+						<el-table size="small" :data="tableData" style="width: 100%">
+						  <el-table-column prop="routeId" label="路由ID"></el-table-column>
+						  <el-table-column prop="name" label="路由名称"></el-table-column>
+						  <el-table-column prop="uri" label="路由地址"></el-table-column>
+						  <el-table-column label="路由权重" width="80">
+							  <template #default="{ row }">
+								  <el-tag size="small" type="" style="font-weight: bold;">{{row.weight}}</el-tag>
+							  </template>
+						  </el-table-column>
+						  <el-table-column label="配置比例">
+							  <template #default="{ row }">
+							    <div class="block">
+							      <el-slider v-model="row.weight"></el-slider>
+							    </div>
+							  </template>
+						  </el-table-column>
+						  <el-table-column label="操作" width="60">
+						  	<template #default="{ row }">
+						  		<el-button size="mini" circle icon="el-icon-delete" title="删除" style="border: 0px; font-size: 12pt;" @click="handleDeleteServer(row)"></el-button>
+						  	</template>
+						  </el-table-column>
+						</el-table>
+					</el-card>
+				</el-col>
+			</el-row>
+		</el-card>
+	</div>
+</template>
+
+<script>
+
+	import {addBalanced, updateBalanced, loadServerRegList, loadServerNotRegList} from '../api/balanced_api.js'
+
+	export default {
+		data() {
+			return {
+				dialogFormVisible: false,
+				form: {
+					id: null,
+					name:null,
+					groupCode:null,
+					loadUri:null,
+					status: '0',
+					remarks: null
+				},
+				rules: {
+					name: [
+						{ required: true, message: '请输入负载名称', trigger: 'blur' },
+						{ min: 2, max: 40, message: '长度在 2 到 40 个字符', trigger: 'blur' },
+					],
+					groupCode: [
+						{ required: true, message: '请选择分组', trigger: 'change' },
+					],
+					loadUri: [
+						{ required: true, message: '请输入负载地址', trigger: 'blur' },
+						{ min: 2, max: 160, message: '长度在 2 到 160 个字符，如：/test.html', trigger: 'blur' },
+					],
+					status: [
+						{ required: true, message: '请选择状态', trigger: 'change' }
+					],
+					remarks: [
+						{ required: false, message: '请填写备注', trigger: 'blur' },
+						{ min: 2, max: 200, message: '长度在 2 到 200 个字符', trigger: 'blur' },
+					]
+				},
+				parent: '/parent/',
+				handleType: 'add',
+				uriDisabled: false,
+				groupOptions: this.GLOBAL_VAR.groups,
+				currentPage: 1,
+				pageSize: 10,
+				totalNum: 1,
+				routeTableData: [],
+				tableData: []
+			};
+		},
+		created: function() {
+			//在组件创建完毕后加载
+			let query = this.$route.query;
+			if (query){
+				let handleType = query.handleType;
+				if (handleType === 'edit'){
+					let balanced = query.balanced;
+					console.log('balanced', balanced);
+					this.form = balanced;
+					this.handleType = handleType;
+				}
+			}
+		},
+		mounted: function() {
+			this.init();
+		},
+		beforeDestroy: function() {
+
+		},
+		methods: {
+			init(balanced) {
+				this.serverRegList();
+			},
+			goBack() {
+				this.$router.push({ path: '/loadBalanced', query: {} });
+			},
+			handleRouteSizeChange(val) {
+				this.currentPage = val;
+				this.addServerList();
+			},
+			handleRouteCurrentChange(val) {
+				this.currentPage = val;
+				this.addServerList();
+			},
+			handleAddRegServer(row){
+				let isExist = false;
+				this.tableData.forEach((_row, _index)=>{
+					if (_row.routeId === row.id){
+						isExist = true;
+					}
+				});
+				if (isExist){
+					return false;
+				}
+				row.selected = true;
+				console.log(row);
+				let server = {
+					id: null,
+					balancedId: this.form.id,
+					routeId: row.id,
+					name: row.name,
+					uri: row.uri,
+					weight: 0
+				}
+				this.tableData.push(server);
+			},
+			handleDeleteServer(row){
+				let data = [];
+				this.tableData.forEach((_row, _index)=>{
+					if (_row.routeId !== row.routeId){
+						data.push(_row);
+					}
+				});
+				this.tableData = data;
+			},
+			addServerList(){
+				let _this = this;
+				loadServerNotRegList({balancedId: this.form.id, currentPage: this.currentPage, pageSize: this.pageSize}).then(function(result){
+					if (result.data && result.data.records){
+						let lists = result.data.records;
+						//将已被选中的服务置为已选中图标
+						if (lists != null){
+							lists.forEach((row,index)=>{
+								let selected = false;
+								_this.tableData.forEach((_row, _index)=>{
+									if (_row.routeId == row.id){
+										selected = true;
+									}
+								});
+								row.selected = selected;
+							});
+						}
+						_this.routeTableData = lists;
+						_this.totalNum = result.data.total;
+					}
+				});
+			},
+			serverRegList(){
+				if (this.form.id == null || this.form.id == undefined){
+					this.tableData=[];
+					return false;
+				}
+				let _this = this;
+				loadServerRegList({balancedId: this.form.id}).then(function(result){
+					console.log(result);
+					if (result && result.data){
+						_this.tableData = result.data;
+					}
+				});
+			},
+			submit(){
+				let _this = this;
+				let balanced = this.form;
+				balanced.serverList = this.tableData;
+				console.log(balanced);
+				this.$refs['form'].validate((valid) => {
+					if (valid) {
+						if (this.handleType === 'edit'){
+							updateBalanced(balanced).then(function(result){
+								_this.GLOBAL_FUN.successMsg();
+								_this.goBack();
+							});
+						}else {
+							addBalanced(balanced).then(function(result){
+								_this.GLOBAL_FUN.successMsg();
+								_this.goBack();
+							});
+						}
+					}
+				});
+			},
+			search(){
+				this.dialogFormVisible = true;
+				//如果上次已查询，则直接返回页面缓存数据
+				if (this.routeTableData == null || this.routeTableData.length <= 0){
+					this.addServerList();
+					this.handleDelete = false;
+				}
+			},
+			resetForm(){
+				if (this.handleType === 'add'){
+					this.form = {
+						id: null,
+						name:null,
+						groupCode:null,
+						loadUri:null,
+						status: '0',
+						remarks: null
+					}
+				}
+			}
+		}
+	}
+
+</script>
+
+<style lang="scss" scoped>
+.createBalanced {
+	width: 100%;
+
+	.clear-box {
+		width: 100%;
+		display: flex;
+		justify-content: space-between;
+
+		.clear-l,
+		.clear-r {
+			display: flex;
+			align-items: center;
+		}
+	}
+}
+</style>