服务器新增/编辑完成

src/api/network/index.ts

@@ -19,6 +19,8 @@ export default {
   },
   server: {
     getList: (params?: object) => get('/network/server/list', params),
+    addItem: (params?: object) => post('/network/server/add', params),
+    editItem: (params?: object) => put('/network/server/edit', params),
     deleteItem: (params?: object) => del('/network/server/delete', params),
     getDetail: (params?: object) => get('/network/get', params),
     changeServerStatus: (params?: object) => post('/network/server/status', params),

src/views/network/server/component/list.vue

@@ -18,7 +18,7 @@
                 <template #default="scope">
                     
                     <el-button @click="toDetail(scope.row.id)" size="small" type="text">详情</el-button>
-                    <el-button size="small" link key="info" type="info" @click="onOpenEditSign(scope.row)">编辑</el-button>
+                    <el-button size="small" link key="info" type="info" @click="toEdit(scope.row.id)">编辑</el-button>
                    
                     <el-popover placement="bottom" :width="160" trigger="click">
                         <template #reference>
@@ -157,6 +157,9 @@ export default defineComponent({
         const toDetail = (id: number) => {
             router.push(`/network/server/detail/${id}`)
         };
+        const toEdit = (id: number) => {
+            router.push(`/network/server/edit/${id}`)
+        };
         // 监听双向绑定 queryForm 的变化
 		watch(
             () => props.queryForm,
@@ -175,6 +178,7 @@ export default defineComponent({
         return {
             fetchList,
             toDetail,
+            toEdit,
             onChangeStatus,
             onRowDel,
             onHandleSizeChange,

src/views/network/server/create.vue

@@ -1,110 +1,51 @@
 <template>
 	<el-card class="system-dic-container" style="position: relative;">
 		<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
-			<el-tab-pane label="标准视图" name="first">
+			<el-tab-pane label="新建服务器" name="first">
 				<el-collapse v-model="activeViewName">
                     <el-collapse-item title="基本信息" name="1">
                         <div class="collapse-wrap">
-                            <el-form style="width: 600px;margin: 0 auto;" :model="form" label-width="68px">
+                            <el-form style="width: 600px;margin: 0 auto;" :model="form" label-width="70px">
                                 <el-form-item label="名称">
                                     <el-input v-model="form.name" placeholder="请填写名称" />
                                 </el-form-item>
                                 <el-form-item label="类型">
                                     <el-select v-model="form.types" placeholder="请选择类型">
                                         <el-option
-                                            v-for="dict in network_tunnel_type"
+                                            v-for="dict in network_server_type"
                                             :key="dict.value"
                                             :label="dict.label"
                                             :value="dict.value">
                                         </el-option>
                                     </el-select>
                                 </el-form-item>
-                                <el-form-item v-show="form.types!='serial'" label="地址">
-                                    <el-input v-model="form.addr" placeholder="端口号，IP:端口" />
+                                <el-form-item label="地址">
+                                    <el-input v-model="form.addr" placeholder="端口号" />
                                 </el-form-item>
-                                <el-form-item label="禁用">
-                                    <el-switch style="--el-switch-on-color: #dc1414;" v-model="form.status" />
+                                <el-form-item label="启用">
+                                    <el-switch v-model="form.status" />
                                 </el-form-item>
                             </el-form>
                         </div>
                     </el-collapse-item>
-                    <el-collapse-item v-show="form.types=='serial'" title="串口参数" name="2">
-                        <div class="collapse-wrap">
-                            <el-form style="width: 600px;margin: 0 auto;" :model="form" label-width="68px">
-                                <el-form-item label="端口">
-                                    <el-button>/dev/ttyS0</el-button>
-                                </el-form-item>
-                                <el-form-item label="波特率">
-                                    <el-select v-model="form.serial.baud_rate" placeholder="请选择波特率">
-                                        <el-option label="150" :value="150" />
-                                        <el-option label="200" :value="200" />
-                                        <el-option label="300" :value="300" />
-                                        <el-option label="600" :value="600" />
-                                        <el-option label="1200" :value="1200" />
-                                        <el-option label="1800" :value="1800" />
-                                        <el-option label="2400" :value="2400" />
-                                        <el-option label="4800" :value="4800" />
-                                        <el-option label="7200" :value="7200" />
-                                        <el-option label="9600" :value="9600" />
-                                        <el-option label="14400" :value="14400" />
-                                        <el-option label="19200" :value="19200" />
-                                        <el-option label="28800" :value="28800" />
-                                        <el-option label="38400" :value="38400" />
-                                        <el-option label="57600" :value="57600" />
-                                        <el-option label="76800" :value="76800" />
-                                        <el-option label="115200" :value="115200" />
-                                        <el-option label="230400" :value="230400" />
-                                    </el-select>
-                                </el-form-item>
-                                <el-form-item label="数据位">
-                                    <el-select v-model="form.serial.data_bits" placeholder="请选择数据位">
-                                        <el-option label="5" :value="5" />
-                                        <el-option label="6" :value="6" />
-                                        <el-option label="7" :value="7" />
-                                        <el-option label="8" :value="8" />
-                                    </el-select>
-                                </el-form-item>
-                                <el-form-item label="停止位">
-                                    <el-select v-model="form.serial.stop_bits" placeholder="请选择停止位">
-                                        <el-option label="1" :value="1" />
-                                        <el-option label="2" :value="2" />
-                                    </el-select>
-                                </el-form-item>
-                                <el-form-item label="检验位">
-                                    <el-select v-model="form.serial.parity" placeholder="请选择检验位">
-                                        <el-option label="无" :value="0" />
-                                        <el-option label="偶" :value="1" />
-                                        <el-option label="奇" :value="2" />
-                                    </el-select>
-                                </el-form-item>
-                            </el-form>
-                        </div>
-                    </el-collapse-item>
-                    <el-collapse-item v-show="form.type!='serial'" title="心跳包" name="4">
-                        <el-form style="width: 600px;margin: 0 auto;" :model="form" label-width="68px">
-                            <el-form-item label="启用">
-                                <el-switch v-model="form.heartbeat.enable" />
-                            </el-form-item>
-                        </el-form>
-                    </el-collapse-item>
-                    <el-collapse-item v-if="form.types=='serial'||form.types=='tcp-client'||form.types=='udp-client'" title="断线重连" name="4">
-                        <el-form style="width: 600px;margin: 0 auto;" :model="form" label-width="68px">
-                            <el-form-item label="启用">
-                                <el-switch v-model="form.retry.enable" />
-                            </el-form-item>
-                            <el-form-item label="间隔">
-                                <el-input-number v-model="form.retry.timeout" :min="0" @change="handleChange" />
-                            </el-form-item>
-                            <el-form-item label="最大次数">
-                                <el-input-number v-model="form.retry.maximum" :min="0" @change="handleChange" />
+                    <el-collapse-item title="注册包" name="2">
+                        <el-form style="width: 600px;margin: 0 auto;" :model="form" label-width="82px">
+                            <el-form-item label="正则表达式">
+                                <el-input v-model="form.register.regex" placeholder="请填写名称" />
                             </el-form-item>
                         </el-form>
                     </el-collapse-item>
-                    <el-collapse-item title="协议适配" name="5">
+                    <el-collapse-item title="协议适配" name="3">
                         <el-form style="width: 600px;margin: 0 auto;" :model="form" label-width="68px">
                             <el-form-item label="协议">
                                 <el-select v-model="form.protocol.name" placeholder="请选择协议适配">
-                                    <el-option label="Modbus RTU" value="Modbus RTU" />
+                                    <el-option
+                                        v-for="dict in network_protocols"
+                                        :key="dict.value"
+                                        :label="dict.label"
+                                        :value="dict.value">
+                                    </el-option>
+                                    <!-- <el-option label="Modbus RTU" value="Modbus RTU" />
                                     <el-option label="Modbus TCP" value="Modbus TCP" />
                                     <el-option label="Omron Hostlink" value="Omron Hostlink" />
                                     <el-option label="Omron FINS UDP" value="Omron FINS UDP" />
@@ -114,7 +55,7 @@
                                     <el-option label="Simatic S7-300" value="Simatic S7-300" />
                                     <el-option label="Simatic S7-400" value="Simatic S7-400" />
                                     <el-option label="Simatic S7-1200" value="Simatic S7-1200" />
-                                    <el-option label="Simatic S7-1500" value="Simatic S7-1500" />
+                                    <el-option label="Simatic S7-1500" value="Simatic S7-1500" /> -->
                                 </el-select>
                             </el-form-item>
                             <el-form-item label="协议参数">
@@ -170,7 +111,7 @@ interface TableDataState {
     form: object
 }
 export default defineComponent({
-	name: 'tunnelCreate',
+	name: 'serverCreate',
 	components: { codeEditor, serverDetail },
 	props: {
 		type: {
@@ -183,41 +124,32 @@ export default defineComponent({
         const { proxy } = getCurrentInstance() as any;
 		const route = useRoute();
         const router = useRouter();
-        const { network_tunnel_type } = proxy.useDict('network_tunnel_type');
+        const { network_server_type, network_protocols } = proxy.useDict('network_server_type', 'network_protocols');
 		
         const state = reactive<TableDataState>({
-            // id: "",
 			resourceModalPro: {
 				mode: '',
 				content: ''
 			},
 			detail:{},
-            activeViewName: ['1','2','3','4','5'],
+            activeViewName: ['1','2','3'],
             form:{
+                id: "",
+
                 // 名称
-                name: '新建通道',
+                name: '新建服务器',
                 // 类型
-                types: 'serial',
+                types: 'tcp',
                 // 禁用
-                status: true,
+                status: false,
                 // 地址
                 addr: '',
-                // 串口参数
-                serial:{
-                    baud_rate: 9600,
-                    data_bits: 8,
-                    stop_bits: 1,
-                    parity: 0
-                },
-                // 断线重连
-                retry: {
-                    enable: true,
-                    timeout: 30,
-                    maximum: 0,
+                register: {
+                    regex: "^\w+$"
                 },
                 // 协议适配
                 protocol: {
-                    name: "Modbus RTU",
+                    name: "ModbusTCP",
                     options: {}
                 },
                 // 心跳包
@@ -227,9 +159,12 @@ export default defineComponent({
                     regex: "^\\w+$",
                     text: "",
                     timeout: 30
-                }
+                },
+                // 设备
+                devices: []
             }
 		});
+        const mirrorRef = ref('mirrorRef')
 		const activeName = ref('first')
 		const getDetail = () => {
 			const id = route.params && route.params.id;
@@ -240,22 +175,15 @@ export default defineComponent({
 		};
         const submit = () => {
             console.log(state.form)
-            // 串口参数-检验位-无
-            if(state.form.serial.parity == 0) {
-                state.form.serial.rs485 = false
-                delete state.form.serial.port
-            }
-            // 串口参数-检验位-偶/奇
-            if(state.form.serial.parity == 1 || state.form.serial.parity == 2) {
-                state.form.serial.port = null
-                delete state.form.serial.rs485
-            }
             let params = {
                 ...state.form
             }
+            if(mirrorRef.value.getValue()) {
+                state.form.protocol.options = eval("(" + mirrorRef.value.getValue() + ")")
+            }
             console.log(params)
             // return
-            api.tunnel.addItem({...state.form}).then((res: any) => {
+            api.server.addItem({...state.form}).then((res: any) => {
 				console.log(res);
                 ElMessage.success('添加成功')
                 router.go(-1);
@@ -267,36 +195,9 @@ export default defineComponent({
         };
 		onMounted(() => {
             
-			let obj = {
-						// "id": 1,
-						// "name": "新建服务器",
-						// "type": "tcp",
-						// "addr": "10010",
-						// "register": {
-						// 	"regex": "^\\w+$"
-						// },
-						// "heartbeat": {
-						// 	"enable": false,
-						// 	"timeout": 30,
-						// 	"regex": "^\\w+$"
-						// },
-						// "protocol": {
-						// 	"name": "ModbusTCP",
-						// 	"options": {}
-						// },
-						// "devices": [
-						// 	{
-						// 		"station": 1,
-						// 		"product_id": ""
-						// 	}
-						// ],
-						// "disabled": false,
-						// "updated": "2022-08-26T15:10:07+08:00",
-						// "created": "2022-08-20T18:44:20+08:00",
-						// "running": true
-					}
-					var jsonData = JSON.stringify(obj);
-					state.resourceModalPro.content = JSON.stringify(JSON.parse(jsonData),null,4);
+			let obj = {}
+			var jsonData = JSON.stringify(obj);
+			state.resourceModalPro.content = JSON.stringify(JSON.parse(jsonData),null,4);
 		});
 		const handleClick = (tab: TabsPaneContext, event: Event) => {
 			console.log(tab, event)
@@ -304,10 +205,12 @@ export default defineComponent({
 
 		return {
 			Edit,
+            mirrorRef,
 			activeName,
 			getDetail,
 			handleClick,
-            network_tunnel_type,
+            network_server_type,
+            network_protocols,
 			// editDicRef,
 			// editAttrRef,
 			// editFunRef,

src/views/network/server/edit.vue

@@ -0,0 +1,271 @@
+<template>
+	<el-card class="system-dic-container" style="position: relative;">
+		<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+			<el-tab-pane label="编辑服务器" name="first">
+				<el-collapse v-model="activeViewName">
+                    <el-collapse-item title="基本信息" name="1">
+                        <div class="collapse-wrap">
+                            <el-form style="width: 600px;margin: 0 auto;" :model="form" label-width="70px">
+                                <el-form-item label="名称">
+                                    <el-input v-model="form.name" placeholder="请填写名称" />
+                                </el-form-item>
+                                <el-form-item label="类型">
+                                    <el-select v-model="form.types" placeholder="请选择类型">
+                                        <el-option
+                                            v-for="dict in network_server_type"
+                                            :key="dict.value"
+                                            :label="dict.label"
+                                            :value="dict.value">
+                                        </el-option>
+                                    </el-select>
+                                </el-form-item>
+                                <el-form-item label="地址">
+                                    <el-input v-model="form.addr" placeholder="端口号" />
+                                </el-form-item>
+                                <el-form-item label="启用">
+                                    <el-switch v-model="form.status" />
+                                </el-form-item>
+                            </el-form>
+                        </div>
+                    </el-collapse-item>
+                    <el-collapse-item title="注册包" name="2">
+                        <el-form style="width: 600px;margin: 0 auto;" :model="form" label-width="82px">
+                            <el-form-item label="正则表达式">
+                                <el-input v-model="form.register.regex" placeholder="请填写名称" />
+                            </el-form-item>
+                        </el-form>
+                    </el-collapse-item>
+                    <el-collapse-item title="协议适配" name="3">
+                        <el-form style="width: 600px;margin: 0 auto;" :model="form" label-width="68px">
+                            <el-form-item label="协议">
+                                <el-select v-model="form.protocol.name" placeholder="请选择协议适配">
+                                    <el-option
+                                        v-for="dict in network_protocols"
+                                        :key="dict.value"
+                                        :label="dict.label"
+                                        :value="dict.value">
+                                    </el-option>
+                                    <!-- <el-option label="Modbus RTU" value="Modbus RTU" />
+                                    <el-option label="Modbus TCP" value="Modbus TCP" />
+                                    <el-option label="Omron Hostlink" value="Omron Hostlink" />
+                                    <el-option label="Omron FINS UDP" value="Omron FINS UDP" />
+                                    <el-option label="Omron FINS TCP" value="Omron FINS TCP" />
+                                    <el-option label="Simatic S7-200 Smart" value="Simatic S7-200 Smart" />
+                                    <el-option label="Simatic S7-200" value="Simatic S7-200" />
+                                    <el-option label="Simatic S7-300" value="Simatic S7-300" />
+                                    <el-option label="Simatic S7-400" value="Simatic S7-400" />
+                                    <el-option label="Simatic S7-1200" value="Simatic S7-1200" />
+                                    <el-option label="Simatic S7-1500" value="Simatic S7-1500" /> -->
+                                </el-select>
+                            </el-form-item>
+                            <el-form-item label="协议参数">
+                                <codeEditor class="params" ref="mirrorRef"
+                                :mode="resourceModalPro.mode"
+                                :content="resourceModalPro.content"
+                                >
+                                </codeEditor>
+                            </el-form-item>
+                        </el-form>
+                    </el-collapse-item>
+                </el-collapse>
+			</el-tab-pane>
+			<!-- <el-tab-pane label="专家视图" name="second">
+                <h1>专家视图</h1>
+            </el-tab-pane> -->
+		</el-tabs>
+		<div style="position: absolute;right:20px;top: 20px;">
+			<el-button size="medium">取消</el-button>
+            <el-button @click="submit" size="medium" type="primary">提交</el-button>
+		</div>
+
+	  	 <!-- <codeEditor ref="mirrorRef"
+	  :mode="resourceModalPro.mode"
+	  :content="resourceModalPro.content"
+	  >
+	  </codeEditor> -->
+	</el-card>
+</template>
+<script lang="ts">
+import { toRefs, reactive, onMounted, ref, defineComponent, getCurrentInstance } from 'vue';
+import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue';
+import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
+import type { TabsPaneContext } from 'element-plus'
+import codeEditor from '/@/components/codeEditor/index.vue'
+
+import serverDetail from './component/serverDetail.vue'
+
+import { useRoute, useRouter } from 'vue-router';
+
+import api from '/@/api/network';
+
+interface TableDataState {
+	// ids: number[];
+	// id: string;
+    activeViewName: string[];
+	resourceModalPro: {
+		mode: string,
+		content: string,
+		// content: object,
+	},
+	detail: object,
+    form: object
+}
+export default defineComponent({
+	name: 'serverCreate',
+	components: { codeEditor, serverDetail },
+	props: {
+		type: {
+			type: String,
+			default: ''
+		}
+	},
+
+	setup(props, context) {
+        const { proxy } = getCurrentInstance() as any;
+		const route = useRoute();
+        const router = useRouter();
+        const { network_server_type, network_protocols } = proxy.useDict('network_server_type', 'network_protocols');
+		
+        const state = reactive<TableDataState>({
+            // id: "",
+			resourceModalPro: {
+				mode: '',
+				content: ''
+			},
+			detail:{},
+            activeViewName: ['1','2','3'],
+            form:{
+                // 名称
+                name: '新建服务器',
+                // 类型
+                types: 'tcp',
+                // 禁用
+                status: false,
+                // 地址
+                addr: '',
+                register: {
+                    regex: "^\w+$"
+                },
+                // 协议适配
+                protocol: {
+                    name: "ModbusTCP",
+                    options: {}
+                },
+                // 心跳包
+                heartbeat: {
+                    enable: false,
+                    hex: "",
+                    regex: "^\\w+$",
+                    text: "",
+                    timeout: 30
+                },
+                // 设备
+                devices: []
+            }
+		});
+        const mirrorRef = ref('mirrorRef')
+		const activeName = ref('first')
+		const getDetail = () => {
+			const id = route.params && route.params.id;
+			api.server.getDetail({"id": id}).then((res: any) => {
+				console.log(res)
+                const {id, name, types, status, addr, register, protocol, heartbeat, devices} = res
+                state.form["id"] = id
+                state.form["name"] = name
+                state.form["types"] = types
+                state.form["status"] = status
+                state.form["addr"] = addr
+                state.form["register"] = JSON.parse(register)
+                state.form["protocol"] = JSON.parse(protocol)
+                state.form["heartbeat"] = JSON.parse(heartbeat)
+                state.form["devices"] = JSON.parse(devices)
+
+                console.log(JSON.parse(protocol).options)
+                let jsonData = JSON.stringify(JSON.parse(protocol).options);
+				state.resourceModalPro.content = JSON.stringify(JSON.parse(jsonData),null,4);
+                console.log(state.resourceModalPro.content)
+                mirrorRef.value.setValue(state.resourceModalPro.content);
+				// state.detail = res
+                console.log(state.form)
+			})
+		};
+        const submit = () => {
+            console.log(state.form)
+            let params = {
+                ...state.form
+            }
+            if(mirrorRef.value.getValue()) {
+                state.form.protocol.options = eval("(" + mirrorRef.value.getValue() + ")")
+            }
+            console.log(params)
+            // return
+            api.server.editItem({...state.form}).then((res: any) => {
+				console.log(res);
+                ElMessage.success('添加成功')
+                router.go(-1);
+                // const { list, total, page } = res
+                // state.data = list
+                // state.total = total
+                // state.param.page = page
+			});
+        };
+		onMounted(() => {
+            getDetail()
+			// let obj = {}
+			// var jsonData = JSON.stringify(obj);
+			// state.resourceModalPro.content = JSON.stringify(JSON.parse(jsonData),null,4);
+		});
+		const handleClick = (tab: TabsPaneContext, event: Event) => {
+			console.log(tab, event)
+		}
+
+		return {
+			Edit,
+            mirrorRef,
+			activeName,
+			getDetail,
+			handleClick,
+            network_server_type,
+            network_protocols,
+			// editDicRef,
+			// editAttrRef,
+			// editFunRef,
+			// editEventRef,
+			// editTabRef,
+            submit,
+			...toRefs(props),
+			...toRefs(state),
+		};
+	},
+});
+</script>
+
+<style>
+.CodeMirror {
+  width: 100%;
+  height: 600px;
+  font-size: 16px;
+}
+</style>
+<style lang="scss" scoped>
+::v-deep .el-collapse-item__header {
+    position: relative;
+    padding-left: 20px;
+    .el-collapse-item__arrow {
+        margin: 0!important;
+        position: absolute;
+        left: 0;
+        right: 0;
+        
+    }
+}
+::v-deep .el-input,
+::v-deep .el-input-number {
+    width: 500px;
+}
+::v-deep .params {
+    width: 600px;
+}
+
+</style>
+