|
|
@@ -1,75 +1,130 @@
|
|
|
<template>
|
|
|
+ <a-space>
|
|
|
+ <a-button type="primary" class="role_btn role_add" @click="showAddNode">添加节点</a-button>
|
|
|
+<!-- <a-button type="primary" class="role_btn role_add" @click="onDeleteALlNode">删除节点</a-button>-->
|
|
|
+<!-- <a-button type="primary" class="role_btn role_add" @click="onEditNode">编辑节点</a-button>-->
|
|
|
+ </a-space>
|
|
|
|
|
|
- <a-button type="primary" class="role_btn role_add" @click="showAddRole">添加角色</a-button>
|
|
|
+ <!-- 添加点击对话框 -->
|
|
|
+ <a-modal v-model:visible="Visible" title="Title" @ok="handleOk">
|
|
|
+ <template #footer>
|
|
|
+ <a-button key="back" @click="cancel">关闭</a-button>
|
|
|
+ <a-button key="back" @click="resetForm">Reset</a-button>
|
|
|
+ <a-button key="submit" type="primary" @click="onSubmit">Submit</a-button>
|
|
|
+ </template>
|
|
|
+ <a-form
|
|
|
+ ref="formRef"
|
|
|
+ :model="formState"
|
|
|
+ :rules="rules"
|
|
|
+ :label-col="labelCol"
|
|
|
+ :wrapper-col="wrapperCol"
|
|
|
+ >
|
|
|
+ <a-form-item ref="name" name="name">
|
|
|
+ <label>name:</label>
|
|
|
+ <a-input v-model:value="formState.name" />
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+ <a-form-item ref="host" name="host">
|
|
|
+ <label>host:</label>
|
|
|
+ <a-input v-model:value="formState.host" />
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+ <a-form-item ref="port" name="port">
|
|
|
+ <label>port:</label>
|
|
|
+ <a-input v-model:value="formState.port" placeholder="输入服务器端口" />
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+ <a-form-item ref="url" name="url">
|
|
|
+ <label>url:</label>
|
|
|
+ <a-input v-model:value="formState.url" placeholder="输入切换地址url"/>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item>
|
|
|
+ <label>ping类型:</label>
|
|
|
+ <a-select v-model:value="formState.pingType" placeholder="选择ping类型">
|
|
|
+ <a-select-option :value=0>icmp</a-select-option>
|
|
|
+ <a-select-option :value=1>tcpping</a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </a-form-item>
|
|
|
+<!-- <a-form-item :wrapper-col="{ span: 14, offset: 4 }">-->
|
|
|
+<!-- <a-button type="primary" @click="onSubmit">Create</a-button>-->
|
|
|
+<!-- <a-button style="margin-left: 10px" @click="resetForm">Reset</a-button>-->
|
|
|
+<!-- </a-form-item>-->
|
|
|
+ </a-form>
|
|
|
+ </a-modal>
|
|
|
|
|
|
- <!-- 添加角色的对话框 -->
|
|
|
- <Edit :show="addRoleVisible" title="添加用户" :addForm="addForm" @cancelAddRole="cancelAddRole" @resatRole="resatRole" @addRole="addRole"></Edit>
|
|
|
+ <!-- 加载节点信息 -->
|
|
|
+ <a-table :row-selection="rowSelection" :columns="columns" :data-source="datalist" rowKey="id" :style="{ height: '100%', borderRight: 0 }">
|
|
|
|
|
|
- <a-table :columns="columns" :data-source="nodeList" :style="{ height: '100%', borderRight: 0 }">
|
|
|
- <template #bodyCell="{ column }">
|
|
|
- <template v-if="column.key === 'mg_state'">
|
|
|
- <a-switch checked-children="??" un-checked-children="??" />
|
|
|
+ <template #delete="{ record }">
|
|
|
+ <a-popconfirm
|
|
|
+ v-if="datalist.length"
|
|
|
+ title="是否删除这条记录"
|
|
|
+ @confirm="onDeleteNode(record)"
|
|
|
+ >
|
|
|
+ <a>删除</a>
|
|
|
+ </a-popconfirm>
|
|
|
</template>
|
|
|
- </template>
|
|
|
+
|
|
|
+ <template #edit="{ record }">
|
|
|
+ <a @click="onEditNode(record)">编辑</a>
|
|
|
+<!-- <a-popconfirm-->
|
|
|
+<!-- v-if="datalist.length"-->
|
|
|
+<!-- title="编辑"-->
|
|
|
+<!-- @confirm="onDeleteNode(record)"-->
|
|
|
+<!-- >-->
|
|
|
+<!-- <a>Delete</a>-->
|
|
|
+<!-- </a-popconfirm>-->
|
|
|
+ </template>
|
|
|
+
|
|
|
+
|
|
|
</a-table>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
|
-import {defineComponent, onMounted, reactive, ref, toRefs} from "vue";
|
|
|
-import {INode} from "/@/model/node";
|
|
|
-import {nodeReqUse} from "/@/apis/node";
|
|
|
-import Edit from "/@/components/edit.vue"
|
|
|
+import {
|
|
|
+ computed,
|
|
|
+ defineComponent,
|
|
|
+ getCurrentInstance,
|
|
|
+ inject,
|
|
|
+ onMounted,
|
|
|
+ reactive,
|
|
|
+ ref,
|
|
|
+ toRaw,
|
|
|
+ toRefs,
|
|
|
+ unref
|
|
|
+} from "vue";
|
|
|
+import {INode, NodeAddParam} from "/@/model/node";
|
|
|
+import {nodeAddReqUse, nodeReqUse} from "/@/apis/node";
|
|
|
+import { ColumnProps } from "ant-design-vue/lib/table";
|
|
|
+import {it} from "node:test";
|
|
|
+import {message} from "ant-design-vue";
|
|
|
+import router from "/@/router";
|
|
|
+type Key = ColumnProps['key'];
|
|
|
export default defineComponent({
|
|
|
name:"node",
|
|
|
components:{
|
|
|
- Edit
|
|
|
+
|
|
|
},
|
|
|
data(){
|
|
|
return {
|
|
|
- addRoleVisible : false,
|
|
|
- addForm: {
|
|
|
- id: '',
|
|
|
- createTime: new Date(),
|
|
|
- createBy: '',
|
|
|
- roleCode: '001',
|
|
|
- roleName: '测试',
|
|
|
- description: '',
|
|
|
- },
|
|
|
+ labelCol: {
|
|
|
+ span: 4,
|
|
|
+ },
|
|
|
+ wrapperCol: {
|
|
|
+ span: 14,
|
|
|
+ },
|
|
|
+
|
|
|
}
|
|
|
},
|
|
|
- methods : {
|
|
|
- // 显示添加角色对话框
|
|
|
- showAddRole () {
|
|
|
- this.addRoleVisible = true;
|
|
|
- },
|
|
|
-
|
|
|
- // 对话框的中的取消按钮
|
|
|
- cancelAddRole () {
|
|
|
- this.addRoleVisible = false;
|
|
|
- this.editRoleVisible = false;
|
|
|
- },
|
|
|
- // 点击 添加角色对话框的保存
|
|
|
- addRole () {
|
|
|
- // 注意点：这边的 addRoleVisible 设置为false 需要在数据请求回来设置的！
|
|
|
- // this.addRoleVisible = false;
|
|
|
- let addFormObj = JSON.parse(JSON.stringify(this.addForm));
|
|
|
- this.postAddRole({
|
|
|
- query: addFormObj,
|
|
|
- }).then(res => {
|
|
|
- this.$message.info(res.msg);
|
|
|
- this.getDate();
|
|
|
- this.addRoleVisible = false;
|
|
|
- this.addForm = {};
|
|
|
- }).finally(_ => {
|
|
|
- // this.$loading.hide();
|
|
|
- });
|
|
|
- },
|
|
|
- // 对话框的中的重置按钮
|
|
|
- resatRole (obj) {
|
|
|
- this.addForm = obj;
|
|
|
- },
|
|
|
+ mounted() {
|
|
|
+ console.log(this.addRoleVisible);
|
|
|
+ console.log('mounted!')
|
|
|
},
|
|
|
setup() {
|
|
|
+ const formRef = ref()
|
|
|
+ const reload: any = inject('reload')
|
|
|
+ //const reload = inject("reload");
|
|
|
+
|
|
|
const columns = [
|
|
|
{
|
|
|
title: 'Id',
|
|
|
@@ -119,51 +174,167 @@ export default defineComponent({
|
|
|
dataIndex: 'urlStatus',
|
|
|
},
|
|
|
{
|
|
|
- title: 'mg_state',
|
|
|
- key: 'mg_state',
|
|
|
- dataIndex: 'mg_state',
|
|
|
+ title: 'Delete',
|
|
|
+ key: 'delete',
|
|
|
+ dataIndex: 'delete',
|
|
|
+ slots: { customRender: 'delete' },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: 'Edit',
|
|
|
+ key: 'edit',
|
|
|
+ dataIndex: 'edit',
|
|
|
+ slots: { customRender: 'edit' },
|
|
|
},
|
|
|
];
|
|
|
+ let ids = ""
|
|
|
+ const state = reactive({
|
|
|
+ datalist : [] as INode[],
|
|
|
+ selectedTableRow: [] as INode[],
|
|
|
+ loading : false,
|
|
|
+ Visible : false,
|
|
|
+ code: false,
|
|
|
+ })
|
|
|
|
|
|
- const datalist = reactive({
|
|
|
- nodeList : [] as INode[]
|
|
|
+ const rowSelection = {
|
|
|
+ onChange: (selectedRowKeys: Key[], selectedRows) => {
|
|
|
+ //第一个参数控制选不选中，第二个参数是选中列表的数据的集合
|
|
|
+ state.selectedTableRow = selectedRows
|
|
|
+ console.log(state.selectedTableRow);
|
|
|
+ },
|
|
|
+ getCheckboxProps: (record) => ({
|
|
|
+ disabled: record.releaseState === "ONLINE", //控制禁用那个按钮
|
|
|
+ releaseState: record.releaseState,
|
|
|
+ }),
|
|
|
+ };
|
|
|
+
|
|
|
+ const getNodeList = async () => {
|
|
|
+ const node_list = await nodeReqUse(null)
|
|
|
+ state.datalist = node_list.data.nodeList
|
|
|
+ reload()
|
|
|
+ }
|
|
|
+
|
|
|
+ const addNodeList = async (data) => {
|
|
|
+
|
|
|
+ let ret = await nodeAddReqUse(data)
|
|
|
+
|
|
|
+ if (ret.code == 0)
|
|
|
+ {
|
|
|
+ console.log(state.Visible);
|
|
|
+ state.Visible = false
|
|
|
+ await getNodeList()
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ console.log(state.Visible);
|
|
|
+ state.Visible = true
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ onMounted( () =>{
|
|
|
+ getNodeList()
|
|
|
})
|
|
|
|
|
|
- const loading = ref<boolean>(false);
|
|
|
- const visible = ref<boolean>(false);
|
|
|
+ const formState = reactive({
|
|
|
+ name: "",
|
|
|
+ host: "",
|
|
|
+ port: 22,
|
|
|
+ url: "",
|
|
|
+ pingType: undefined,
|
|
|
+ })
|
|
|
|
|
|
- const AddNodeModel = () => {
|
|
|
- visible.value = true;
|
|
|
- };
|
|
|
|
|
|
- const handleOk = () => {
|
|
|
- loading.value = true;
|
|
|
- visible.value= false;
|
|
|
- // setTimeout(() => {
|
|
|
- // loading.value = false;
|
|
|
- // visible.value = false;
|
|
|
- // }, 2000);
|
|
|
+ const rules = {
|
|
|
+ name: [
|
|
|
+ { required: true, message: "输入服务器名称", trigger: "blur" },
|
|
|
+ { min: 1, max: 100, message: "Length should be 3 to 5", trigger: "blur" }
|
|
|
+ ],
|
|
|
+ host: [
|
|
|
+ { required: true, message: "输入服务器IP", trigger: "blur" },
|
|
|
+ { min: 1, max: 100, message: "Length should be 3 to 5", trigger: "blur" }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ const resetForm = () => {
|
|
|
+ formRef.value.resetFields();
|
|
|
};
|
|
|
|
|
|
- const handleCancel = () => {
|
|
|
- visible.value = false;
|
|
|
- };
|
|
|
+ const onSubmit = () =>{
|
|
|
|
|
|
+ const reqdata = {
|
|
|
+ "name" : toRaw(formState).name,
|
|
|
+ "host" : toRaw(formState).host,
|
|
|
+ "port" : toRaw(formState).port,
|
|
|
+ "url" : toRaw(formState).url,
|
|
|
+ "pingType": toRaw(formState).pingType
|
|
|
+ }
|
|
|
+ addNodeList(reqdata)
|
|
|
+ console.log(reqdata);
|
|
|
|
|
|
|
|
|
- onMounted(async () => {
|
|
|
- const node_list = await nodeReqUse(null)
|
|
|
- datalist.nodeList = node_list.data.nodeList
|
|
|
- console.log(datalist)
|
|
|
- })
|
|
|
+ }
|
|
|
+
|
|
|
+ const onEditNode = (record) => {
|
|
|
+ formState.name = record.name
|
|
|
+ formState.host = record.host
|
|
|
+ formState.port = record.port
|
|
|
+ formState.url = record.url
|
|
|
+ formState.pingType = record.pingType
|
|
|
+ state.Visible = true
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ const showAddNode = () => {
|
|
|
+ formState.name = ""
|
|
|
+ formState.host = ""
|
|
|
+ formState.port = 22
|
|
|
+ formState.url = ""
|
|
|
+ formState.pingType = undefined
|
|
|
+ state.Visible = true;
|
|
|
+ }
|
|
|
+ const handleOk= () =>{
|
|
|
+
|
|
|
+ //addNodeList(data.value)
|
|
|
+ state.Visible = false
|
|
|
+ }
|
|
|
+ // 对话框的中的取消按钮
|
|
|
+ const cancel = () => {
|
|
|
+ state.loading = false
|
|
|
+ state.Visible = false
|
|
|
+ }
|
|
|
+
|
|
|
+ const { datalist ,selectedTableRow,loading,Visible } = toRefs(state)
|
|
|
+
|
|
|
+ const onDeleteALlNode = () => {
|
|
|
+ const idsTmp = []
|
|
|
+ selectedTableRow.value.forEach(item => idsTmp.push(item.id))
|
|
|
+ ids = idsTmp.join(",")
|
|
|
+ console.log(ids);
|
|
|
+ }
|
|
|
+
|
|
|
+ const onDeleteNode = ( record )=>{
|
|
|
+ console.log(record.id);
|
|
|
+ }
|
|
|
+
|
|
|
|
|
|
- const { nodeList } = toRefs(datalist)
|
|
|
return{
|
|
|
- visible,
|
|
|
+
|
|
|
+ onDeleteALlNode,
|
|
|
+ showAddNode,
|
|
|
handleOk,
|
|
|
- AddNodeModel,
|
|
|
- nodeList,
|
|
|
- columns
|
|
|
+ cancel,
|
|
|
+ onEditNode,
|
|
|
+ onDeleteNode,
|
|
|
+ rowSelection,
|
|
|
+ resetForm,
|
|
|
+ onSubmit,
|
|
|
+ datalist,
|
|
|
+ selectedTableRow,
|
|
|
+ formRef,
|
|
|
+ formState,
|
|
|
+ rules,
|
|
|
+ columns,
|
|
|
+ loading,
|
|
|
+ Visible,
|
|
|
}
|
|
|
}
|
|
|
})
|
