admin-ui/src/views/iot/network/server/edit.vue

<template>
  <div class="page bg padding border page-full Ipt-2" style="position: relative;">
    <el-tabs v-model="activeName">
      <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="98px">
                <el-form-item label="名称">
                  <el-input v-model="form.name" show-word-limit maxlength="20" placeholder="请填写名称" />
                </el-form-item>
                <el-form-item label="类型">
                  <el-select @change="handleChangeType" 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 v-if="form.types == 'tcp'" label="粘拆包规则">
                  <el-select @change="initData" v-model="stickValue" placeholder="请选择类型">
                    <el-option v-for="dict in stick_type" :key="dict.value" :label="dict.label" :value="dict.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item v-if="form.types == 'tcp' && stickValue">
                  <el-form-item v-if="stickValue == '分隔符'" class="flex-column" label="分隔符">
                    <el-input v-model="stick['delimit,omitempty']" placeholder="请填写分隔符" />
                  </el-form-item>
                  <el-form-item v-if="stickValue == '自定义脚本'" class="flex-column" label="自定义脚本">
                    <el-input v-model="stick['custom,omitempty']" placeholder="请填写自定义脚本" />
                  </el-form-item>
                  <el-form-item v-if="stickValue == '固定长度'" class="flex-column" label="固定长度">
                    <el-input type="number" v-model="stick['fixedLen,omitempty']" placeholder="请填写固定长度" />
                  </el-form-item>
                  <el-form-item v-if="stickValue == '长度字段'" class="flex-column" label="长度">
                    <el-input type="number" v-model="stick['len,omitempty']['len']" placeholder="请填写长度" />
                  </el-form-item>
                  <el-form-item v-if="stickValue == '长度字段'" class="flex-column" label="偏移量">
                    <el-input type="number" v-model="stick['len,omitempty']['offset']" placeholder="请填写偏移量" />
                  </el-form-item>
                  <el-form-item v-if="stickValue == '长度字段'" class="flex-column" label="大小端">
                    <el-select v-model="stick['len,omitempty']['endian']" placeholder="请选择大小端">
                      <el-option label="大端" value="大端" />
                      <el-option label="小端" value="小端" />
                    </el-select>
                  </el-form-item>
                </el-form-item>
                <el-form-item label="地址">
                  <el-input v-model="form.addr" placeholder="端口号" />
                </el-form-item>
                <el-form-item label="开启TLS">
                  <el-radio-group v-model="form.isTls" class="ml-4">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item v-if="form.isTls == 1 && form.types != 'mqtt_server'" label="选择证书">
                  <el-select v-model="form.certificateId" placeholder="请选择证书">
                    <el-option v-for="item in certificateList" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item v-if="form.isTls == 1 && form.types == 'mqtt_server'" label="接入方式">
                  <el-select v-model="form.authType" placeholder="选择接入方式">
                    <el-option label="Basic" :value="1" />
                    <el-option label="AccessToken" :value="2" />
                    <!-- <el-option label="证书" :value="3" /> -->
                  </el-select>
                  <el-form-item v-if="form.authType == 1" class="flex-column" label="用户名">
                    <el-input v-model="form.authUser" placeholder="请填写用户名" />
                  </el-form-item>
                  <el-form-item v-if="form.authType == 1" class="flex-column" label="密码">
                    <el-input v-model="form.authPasswd" placeholder="请填写密码" />
                  </el-form-item>
                  <el-form-item v-if="form.authType == 2" class="flex-column" label="Aceess Token">
                    <el-input v-model="form.accessToken" placeholder="请填写Aceess Token" />
                  </el-form-item>
                </el-form-item>
                <el-form-item label="启用">
                  <el-switch :active-value="1" :inactive-value="0" 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="98px">
              <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="98px">
              <el-form-item label="协议">
                <el-select v-model="form.protocol.name" placeholder="请选择协议适配">
                  <el-option v-for="dict in messageData" :key="dict.types" :label="dict.title" :value="dict.name"></el-option>
                  <!-- 增加系统默认的mqtt选项 -->
                  <el-option label="Sagoo Mqtt" value="SagooMqtt"> </el-option>
                </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-tabs>
    <div style="position: absolute;right:20px;top: 14px;">
      <el-button size="small" @click="$router.replace('/iotmanager/network/server')">取消</el-button>
      <el-button @click="submit" size="small" type="primary">提交</el-button>
    </div>
  </div>
</template>
<script lang="ts">
import { watch, toRefs, reactive, onMounted, ref, defineComponent, getCurrentInstance } from 'vue';
import { ElMessage } from 'element-plus';
import type { TabsPaneContext } from 'element-plus';
import codeEditor from '/@/components/codeEditor/index.vue';

import { useRoute, useRouter } from 'vue-router';

import api from '/@/api/network';
import api2 from '/@/api/system';
import deviceApi from '/@/api/device'

interface TableDataState {
  activeViewName: string[];
  resourceModalPro: {
    mode: string,
    content: string,
  },
  detail: object,
  form: object,
  certificateList: object[];
  messageData: object[];
  stick: {
    // 分隔符
    "delimit,omitempty": string,
    // 自定义脚本
    "custom,omitempty": string,
    // 固定长度
    "fixedLen,omitempty": number,
    // 长度字段
    "len,omitempty": {
      "len": number,
      "offset": number,
      "endian": string
    }
  };
  stick_type: object[];
  stickValue: string;
}
export default defineComponent({
  name: 'serverCreate',
  components: { codeEditor },
  props: {
    type: {
      type: String,
      default: ''
    }
  },

  setup(props) {
    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: "",
      stickValue: "",
      stick: {
        "delimit,omitempty": "",
        "custom,omitempty": "",
        "fixedLen,omitempty": 0,
        "len,omitempty": {
          "len": 0,
          "offset": 0,
          "endian": ""
        }
      },
      stick_type: [
        {
          label: "分隔符",
          value: "分隔符"
        },
        {
          label: "自定义脚本",
          value: "自定义脚本"
        },
        {
          label: "固定长度",
          value: "固定长度"
        },
        {
          label: "长度字段",
          value: "长度字段"
        }
      ],
      resourceModalPro: {
        mode: '',
        content: ''
      },
      messageData: [],
      certificateList: [],
      detail: {},
      activeViewName: ['1', '2', '3'],
      form: {
        // 名称
        name: '',
        // AccessToken
        accessToken: "",
        // 认证密码
        authPasswd: "",
        // 认证用户
        authUser: "",
        // 认证方式（1=Basic，2=AccessToken，3=证书）
        authType: 3,
        // 是否开启TLS
        isTls: 0,
        // 证书id
        certificateId: "",
        // 类型
        types: 'tcp',
        // 禁用
        status: false,
        // 地址
        addr: '',
        register: {
          regex: "^\w+$"
        },
        // 协议适配
        protocol: {
          name: "SagooMqtt",
          options: {}
        },
        // 心跳包
        heartbeat: {
          enable: false,
          hex: "",
          regex: "^\\w+$",
          text: "",
          timeout: 30
        },
        // 设备
        devices: []
      }
    });

    deviceApi.product.getTypesAll({ types: 'protocol' }).then((res: any) => {
      state.messageData = res || [];
    });

    const mirrorRef = ref()
    const activeName = ref('first')
    const getDetail = () => {
      const id = route.params && route.params.id;
      api.server.getDetail({ "id": id }).then((res: any) => {
        const { id, isTls, authType, certificateId, authUser, authPasswd, accessToken, name, types, status, addr, register, protocol, heartbeat, devices, stick } = res
        state.form["id"] = id
        state.form["name"] = name
        state.form["types"] = types
        state.form["status"] = status
        state.form["isTls"] = isTls
        state.form["addr"] = addr
        state.form["authType"] = authType
        state.form["authUser"] = authUser
        state.form["authPasswd"] = authPasswd
        state.form["accessToken"] = accessToken
        state.form["certificateId"] = certificateId
        state.form["register"] = JSON.parse(register)
        state.form["protocol"] = JSON.parse(protocol)
        state.form["heartbeat"] = JSON.parse(heartbeat)
        state.form["devices"] = JSON.parse(devices)
        let stickInfo = JSON.parse(stick)
        if (stickInfo.len && stickInfo.len.endian) {
          state.stick["len,omitempty"] = stickInfo.len
        } else if (stickInfo.fixedLen) {
          state.stick["fixedLen,omitempty"] = stickInfo.fixedLen
        } else if (stickInfo.custom) {
          state.stick["custom,omitempty"] = stickInfo.custom
        } else if (stickInfo.delimit) {
          state.stick["delimit,omitempty"] = stickInfo.delimit
        }
        if (types == 'tcp') {
          if (state.stick['delimit,omitempty']) {
            state.stickValue = '分隔符'
          } else if (state.stick['custom,omitempty']) {
            state.stickValue = '自定义脚本'
          } else if (state.stick['fixedLen,omitempty']) {
            state.stickValue = '固定长度'
          } else if (state.stick['len,omitempty']) {
            state.stickValue = '长度字段'
          }
        }

        let jsonData = JSON.stringify(JSON.parse(protocol).options);
        state.resourceModalPro.content = JSON.stringify(JSON.parse(jsonData), null, 4);
        mirrorRef.value.setValue(state.resourceModalPro.content);
      })
    };
    const submit = () => {
      let params = {
        ...state.form,
        "stick": {
          ...state.stick
        }
      }
      if (mirrorRef.value.getValue()) {
        params.protocol.options = eval("(" + mirrorRef.value.getValue() + ")")
      }
      // return
      api.server.editItem(params).then((res: any) => {
        ElMessage.success('修改成功')
        goBack()
      });
    };
    const goBack = () => {
      router.go(-1);
    }
    const initData = () => {
      state.stick = {
        "delimit,omitempty": "",
        "custom,omitempty": "",
        "fixedLen,omitempty": 0,
        "len,omitempty": {
          "len": 0,
          "offset": 0,
          "endian": ""
        }
      }
    }
    const handleChangeType = () => {
      if (state.form.types != 'mqtt_server' && state.form.isTls == 1) {
        state.form.authType = 3
        return;
      }
      if (state.form.isTls == 0) {
        state.form.authType = ""
      }
    }
    const getCertificateList = () => {
      api2.certificate.getList().then((res: any) => {
        state.certificateList = res.Info;
      })
    }
    watch(
      () => state.form.isTls,
      (value) => {
        if (value == 0) {
          state.form.authType = ""
        }
      }
    );
    onMounted(() => {
      getDetail();
      getCertificateList();
    });

    return {
      mirrorRef,
      activeName,
      getDetail,
      network_server_type,
      network_protocols,
      submit,
      initData,
      handleChangeType,
      getCertificateList,
      ...toRefs(props),
      ...toRefs(state),
    };
  },
});
</script>
<style lang="scss" scoped>
:deep(.el-collapse-item__header) {
  position: relative;
  padding-left: 20px;

  .el-collapse-item__arrow {
    margin: 0 !important;
    position: absolute;
    left: 0;
    right: 0;

  }
}

:deep(.el-input),
:deep(.el-input-number) {
  width: 500px;
}

:deep(.params) {
  width: 600px;
}

:deep(.flex-column) {
  display: flex;
  flex-direction: column;

  .el-form-item__label {
    justify-content: flex-start;
  }
}
</style>