ip设置模块

src/api/systemConfig/ipTheChange.js

+import request from '@/utils/request'
+
+/**
+ * IP设置 - 查询信息
+ * @param {*} query 
+ * @returns 
+ */
+export function show(query) {
+  return request({
+    url: '/ip/show',
+    method: 'get',
+    params: query
+  })
+}
+
+/**
+ * IP设置 - 更新数据
+ * @param {*} data 
+ * @returns 
+ */
+export function update(data) {
+  return request({
+    url: '/ip/update',
+    method: 'post',
+    data: data
+  })
+}
\ No newline at end of file

src/views/systemConfig/IPTheChange/IP设置.md

+++ "b/src/views/systemConfig/IPTheChange/IP\350\256\276\347\275\256.md"

src/views/systemConfig/IPTheChange/index.vue

+<script setup name="IPTheChange">
+import { onMounted, ref, toRefs } from 'vue'
+import FormBox from './modules/formBox.vue'
+import { show } from '@/api/systemConfig/ipTheChange.js'
+
+const ipList = ref([])
+
+// 获取数据
+const getQueryAll = async () => {
+  const { data } = await show({})
+  ipList.value = data
+}
+
+const formConfirm = () => {
+  getQueryAll()
+}
+
+onMounted(() => {
+  getQueryAll()
+})
+</script>
+
+<template>
+  <div class="app-container scroller">
+    <PageTitle>
+      <template #title>IP设置</template>
+    </PageTitle>
+    <div class="app-container__body">
+      <FormBox v-for="(item,index) in ipList" :key="index" :itemData="item"  @confirm="formConfirm" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.app-container__body {
+  .contentActive {
+    height: 400px;
+    .item {
+      display: flex;
+      height: 32px;
+      color: #7a8495;
+      .key {
+        padding-left: 5px;
+        width: 300px;
+        vertical-align: middle;
+        float: left;
+        font-size: 14px;
+        font-weight: 700;
+        box-sizing: border-box;
+      }
+      .value {
+        flex: 1;
+        line-height: 32px;
+      }
+    }
+  }
+  :deep(.el-collapse-item__wrap){
+    border: none;
+  }
+  :deep(.el-collapse-item){
+    margin-bottom: 6px;
+  }
+  :deep(.el-collapse-item__header) {
+    height: 32px;
+    padding-left: 20px;
+    background: #7a8495;
+    color: #fff;
+  }
+  :deep(.el-collapse-item__header.is-active) {
+    background: #2c9ef7;
+  }
+}
+</style>
\ No newline at end of file

src/views/systemConfig/IPTheChange/modules/formBox.vue

+<script setup lang="ts" name="FormBox">
+import { onMounted, ref, toRefs, reactive, watch } from "vue";
+import type { FormInstance } from "element-plus";
+import { ElMessage } from "element-plus";
+import { update } from '@/api/systemConfig/ipTheChange.js'
+
+const props = defineProps<{
+  itemData: Object;
+}>();
+
+const emit = defineEmits(["confirm"]);
+
+const data = reactive({
+  form: <any>{},
+  rules: {
+    networkInterface: [
+      {
+        required: true,
+        message: "请输入网卡",
+        trigger: ["blur"],
+      },
+    ],
+    inetAddress: [
+      {
+        required: true,
+        message: "请输入IP地址",
+        trigger: ["blur"],
+      },
+    ],
+    subnetMask: [
+      {
+        required: true,
+        message: "请输入子网掩码",
+        trigger: ["blur"],
+      },
+    ],
+    gateway: [
+      {
+        required: true,
+        message: "请输入默认网关",
+        trigger: ["blur"],
+      },
+    ],
+    dns: [
+      {
+        required: true,
+        message: "请输入DNS",
+        trigger: ["blur"],
+      },
+    ],
+  },
+});
+
+const { form, rules } = toRefs(data);
+
+const formRef = ref<FormInstance>();
+const readOnly = ref(true);
+const title = ref('');
+
+const onSubmit = () => {
+  formRef.value?.validate((valid) => {
+    if (valid) {
+      updateFunc()
+    } else {
+    }
+  });
+}
+
+const updateFunc = () => {
+  update(form.value).then((res) => {
+    const { flag } = res;
+    if (flag) {
+      ElMessage.success("更新成功");
+      readOnly.value = true;
+      emit("confirm");
+    }
+  });
+}
+
+const onCancel = () => {
+  readOnly.value = true;
+  const data = JSON.parse(JSON.stringify(props.itemData));
+  form.value = { ...form.value, ...data };
+}
+
+watch(
+  () => props.itemData,
+  (newVal) => {
+    if (props.itemData) {
+      const data = JSON.parse(JSON.stringify(props.itemData));
+      form.value = { ...form.value, ...data };
+      title.value = data.networkInterface;
+    }
+  },
+  { deep: true, immediate: true }
+);
+
+</script>
+
+<template>
+  <div class="formBox">
+    <el-divider content-position="left">{{ title }}</el-divider>
+    <div class="formBox-content">
+      <div class="formBox-left">
+        <!-- <div class="edit-icon" @click="readOnly = false">
+          <el-icon :size="16" color="#fff">
+            <edit />
+          </el-icon>
+        </div> -->
+      </div>
+      <el-form ref="formRef" class="form" :model="form" :rules="rules" label-width="100px" :disabled="readOnly">
+        <el-form-item label="网卡" prop="networkInterface" required>
+          <el-input v-model="form.networkInterface"></el-input>
+        </el-form-item>
+        <el-form-item label="IP地址" prop="inetAddress" required>
+          <el-input v-model="form.inetAddress"></el-input>
+        </el-form-item>
+        <el-form-item label="子网掩码" prop="subnetMask" required>
+          <el-input v-model="form.subnetMask"></el-input>
+        </el-form-item>
+        <el-form-item label="默认网关" prop="gateway" required>
+          <el-input v-model="form.gateway"></el-input>
+        </el-form-item>
+        <el-form-item label="DNS" prop="dns" required>
+          <el-input v-model="form.dns"></el-input>
+        </el-form-item>
+        <!-- <div v-if="!readOnly" style="display: flex;justify-content: flex-end;margin-top: 2px;">
+          <el-button @click="onCancel">取消</el-button>
+          <el-button type="primary" @click="onSubmit">确定</el-button>
+        </div> -->
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.formBox {
+  width: 100%;
+  &-content {
+    display: flex;
+    width: 100%;
+  }
+  &-left {
+    width: 98px;
+    padding-left: 30px;
+    .edit-icon {
+      width: 30px;
+      height: 30px;
+      text-align: center;
+      line-height: 30px;
+      border-radius: 50%;
+      background: #2c9ef7;
+      color: #fff;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+  .form{
+    width: 45%;
+    :deep(.el-form-item__label) {
+    background: #f0f0f0;
+    }
+    :deep(.el-form-item) {
+      margin-bottom: 5px;
+    }
+    :deep(.el-form-item__error) {
+      left: auto;
+      right: 83px;
+      top: 24%;
+    }
+  }
+}
+</style>
\ No newline at end of file