xiaodou-ai-admin/src/pages/Iot/rule/forwardRule.vue

<template>
<a-card>
  <a-row justify="space-between" >
    <a-col :span="18" >
    <a-form style="width: 100%;"  :label-col="{span: 5}" >
      <a-row style="width: 100%" :gutter="[8, 8]" >

        <a-col :span="6" >
          <a-form-item label="规则ID" >
            <a-input v-model:value="queryParams.ruleId" ></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="规则名称" >
              <a-input v-model:value="queryParams.ruleLabel" ></a-input>
            </a-form-item>
        </a-col>
        <a-col :span="6" >
          <a-form-item label="数据来源" >
              <a-select allowClear v-model:value="queryParams.subjectResource" >
                <a-select-option
                  v-for="item in subjectResourceList"
                  :key="item.key"
                  :value="item.value"
                >
                {{item.name}}
                </a-select-option>
              </a-select>
            </a-form-item>
        </a-col>
        <a-col :span="6" >
          <a-form-item label="触发事件" >
              <a-select allowClear v-model:value="queryParams.subjectEvent" >
                <a-select-option
                  v-for="item in subjectEventList"
                  :key="item.key"
                  :value="item.value"
                >
                {{item.name}}
                </a-select-option>
              </a-select>
            </a-form-item>
        </a-col>
        <a-col :span="6" >
          <a-form-item label="状态" >
              <a-select allowClear v-model:value="queryParams.status" >
                <a-select-option
                  v-for="item in statusList"
                  :key="item.key"
                  :value="item.value"
                >
                {{item.name}}
                </a-select-option>
              </a-select>
            </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    </a-col>
    <a-col>
      <a-space>
        <a-button  type="primary" @click="search">搜索</a-button>
        <a-button type="primary" @click="openModal('add', {})" >创建规则</a-button>
      </a-space>

    </a-col>
  </a-row>
  <a-table
    style="margin-top: 20px;"
    :columns="columns"
    :data-source="state.dataSource"
    :loading="state.loading"
    :pagination="queryParams"
    @change="changePage"
  >
    <template #bodyCell="{column, record}" >
      <template v-if="column.key === 'subjectResource'" >
        {{RuleController.SubjectResourceMap.get(record.subjectResource)?.name}}
      </template>
      <template v-if="column.key === 'subjectEvent'" >
        {{RuleController.SubjectEventMap.get(record.subjectEvent)?.name}}
      </template>
      <template v-if="column.key === 'status'" >
        <a-switch
          v-model:checked="record.status"
          checked-children="运行中"
          un-checked-children="已停止"
          @click="changeStatus(record)"
        />
      </template>
      <template v-if="column.key === 'action'" >
        <a-space>
              <a @click="openDetailModal(record.id)">详情</a>
              <a @click="openModal('update', record)">编辑</a>
              <a-popconfirm
                  title="确实要删除吗？"
                  ok-text="确定"
                  cancel-text="取消"
                  @confirm="delForwardRule(record.id)"
                >
                  <a>删除</a>
                </a-popconfirm>
        </a-space>
      </template>
    </template>
  </a-table>
</a-card>

<!-- 创建规则 -->
<modal-pro
  width="1000px"
  label="创建规则"
  :visible="state.visible"
  @cancel="state.visible = false"
  @ok="ok('visible')"
>
    <a-steps :current="state.stepCount">
        <a-step title="设置转发数据" ></a-step>
        <a-step title="设置转发目标"  />
    </a-steps>
    <div style="margin: 20px 0px;" >
      <div v-if="state.stepCount === 0" >针对部分类型数据提供的快速配置，将引导您完成简单的业务设置。您也可以直接编辑过滤语句，实现更复杂的查询要求</div>
      <div v-else-if="state.stepCount === 1" >您可以设置将数据转发至华为云其他服务或私有服务器。</div>
    </div>
    <form-pro
      v-if="state.stepCount == 0"
      validate
      :formProps="formProps"
      ref="formProo"
    />
    <div v-if="state.stepCount == 1" >
      <a-row>
        <a-col>
          <a-space>
            <a-button type="primary" @click="addForwardState">添加</a-button>
          </a-space>
        </a-col>
      </a-row>
      <a-table
        style="margin-top: 20px;"
        v-if="forwardRuleTargets.length "
        :columns="forwardRuleTargetsColumns"
        :data-source="forwardRuleTargets"
        size="middle"
      >
        <template #bodyCell="{column, record, index}" >
          <template v-if="column.key === 'action'" >
            <a-space>
              <!-- <a @click="updateForwardRuleTargets(record, index)">编辑</a> -->
              <a @click="forwardRuleTargets.splice(index, 1)">删除</a>
            </a-space>
          </template>
        </template>
      </a-table>
      <a-empty v-else :image="Empty.PRESENTED_IMAGE_SIMPLE" />
    </div>
    <!-- <div v-if="state.stepCount == 2" >
      <a-button @click="addForwardRule" >启动规则</a-button>
    </div> -->
</modal-pro>

<modal-pro
  style="width: 800px"
  label="转发目标"
  :visible="state.targetVisible"
  :ok-text=" state.stepCount === 0 ? '下一步' : '确定'"
  @cancel="state.targetVisible = false"
  @ok="ok('targetVisible')"
>
    <a-form :label-col="{span: 4 }" :wrapper-col="{ span: 14 }" style="height: 600px; overflow-y: auto;">
      <a-form-item label="转发目标">
        <a-select
        style="width: 100%;"
        v-model:value="forwardState.targetType"
      >
        <a-select-option
          v-for="item in forwardTatget"
          :key="item.key"
          :value="item.key"
        >
          {{item.name}}
        </a-select-option>
      </a-select>
    </a-form-item>
      <span v-if="forwardState.targetType === 'HTTP'" >
        <a-form-item label="地址" v-bind="validateInfos.endpointUrl">
          <a-input v-model:value="forwardState.endpointUrl" placeholder="请填写http地址" />
        </a-form-item>
        <a-form-item label="方法" v-bind="validateInfos.requestMethod">
          <a-select
            style="width: 100%;"
            v-model:value="forwardState.requestMethod"
          >
            <a-select-option
              v-for="item in HttpRequestMethods"
              :key="item.key"
              :value="item.key"
            >
              {{item.name}}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="超时时间" v-bind="validateInfos.defaultTimeout">
          <a-input-number id="inputNumber" v-model:value="forwardState.defaultTimeout" />
        </a-form-item>
        <a-form-item label="请求头" v-bind="validateInfos.requestHeaders">
          <a-input-group style="margin-top: 10px;" size="large" v-for="(item, index) in forwardState.requestHeaders" :key="index">
            <a-row :gutter="8">
              <a-col :span="5">
                <a-input style="height: 30px;" v-model:value="item.key" placeholder="key" />
              </a-col>
              <a-col :span="8">
                <a-input style="height: 30px;"  v-model:value="item.value" placeholder="value" />
              </a-col>
              <a-col>
                <a-button type="link" danger @click="forwardState.requestHeaders.splice(index, 1)" >删除</a-button>
              </a-col>
            </a-row>
          </a-input-group>
          <a-button style="margin-top: 20px;" @click="addRequestHeaders('requestHeaders')" type="primary" >添加参数</a-button>
        </a-form-item>
      </span>
      <span v-if="forwardState.targetType === 'KAFKA'" >
        <a-form-item label="主题" v-bind="validateInfos.topic" >
          <a-input placeholder="请填写主题" v-model:value="forwardState.topic" ></a-input>
        </a-form-item>
        <a-form-item label="地址" v-bind="validateInfos.topic" >
          <a-input placeholder="请填写地址" v-model:value="forwardState.bootstrapServers" ></a-input>
        </a-form-item>
        <a-form-item label="acks" v-bind="validateInfos.acks" >
          <a-input placeholder="请填写acks" v-model:value="forwardState.acks"  disabled ></a-input>
        </a-form-item>
        <a-form-item label="重试次数" v-bind="validateInfos.retries" >
          <a-input placeholder="请填写重试次数" v-model:value="forwardState.retries"></a-input>
        </a-form-item>
        <a-form-item label="batchSize" v-bind="validateInfos.batchSize" >
          <a-input placeholder="请填写batchSize" v-model:value="forwardState.batchSize"></a-input>
        </a-form-item>
        <a-form-item label="linger" v-bind="validateInfos.linger" >
          <a-input placeholder="请填写linger" v-model:value="forwardState.linger"></a-input>
        </a-form-item>
        <a-form-item label="bufferMemory" v-bind="validateInfos.bufferMemory" >
          <a-input placeholder="请填写bufferMemory" v-model:value="forwardState.bufferMemory"></a-input>
        </a-form-item>
        <a-form-item label="keySerializer" v-bind="validateInfos.keySerializer" >
          <a-input placeholder="请填写keySerializer" v-model:value="forwardState.keySerializer"></a-input>
        </a-form-item>
        <a-form-item label="valueSerializer" v-bind="validateInfos.valueSerializer" >
          <a-input placeholder="请填写valueSerializer" v-model:value="forwardState.valueSerializer"></a-input>
        </a-form-item>
        <a-form-item label="其他参数">
          <a-input-group style="margin-top: 10px;" size="large" v-for="(item, index) in forwardState.otherProperties" :key="index">
            <a-row :gutter="8">
              <a-col :span="5">
                <a-input style="height: 30px;" v-model:value="item.key" placeholder="key" />
              </a-col>
              <a-col :span="8">
                <a-input style="height: 30px;"  v-model:value="item.value" placeholder="value" />
              </a-col>
              <a-col>
                <a-button type="link" danger @click="forwardState.otherProperties.splice(index, 1)" >删除</a-button>
              </a-col>
            </a-row>
          </a-input-group>
          <a-button style="margin-top: 20px;" @click="addRequestHeaders('otherProperties')" type="primary" >添加参数</a-button>
        </a-form-item>
      </span>
      <span v-if="forwardState.targetType === 'MQTT'"  >
        <a-form-item label="主题" v-bind="validateInfos.topic" >
          <a-input placeholder="请填写主题" v-model:value="forwardState.topic" ></a-input>
        </a-form-item>
        <a-form-item label="broker服务器" v-bind="validateInfos.broker" >
          <a-input placeholder="请填写broker服务器" v-model:value="forwardState.broker" ></a-input>
        </a-form-item>
        <a-form-item label="连接超时时间" v-bind="validateInfos.connectTimeout" >
          <a-input-number placeholder="请填写连接超时时间" v-model:value="forwardState.connectTimeout" ></a-input-number>
        </a-form-item>
        <a-form-item label="客户端ID" v-bind="validateInfos.clientId" >
          <a-input-number placeholder="请填写客户端ID" v-model:value="forwardState.clientId" ></a-input-number>
        </a-form-item>
        <a-form-item label="保留消息" >
          <a-switch v-model:checked="forwardState.retainedMessage" checked-children="保留" un-checked-children="不保留" />
        </a-form-item>
        <a-form-item label="清除Session" >
          <a-switch v-model:checked="forwardState.cleanSession" checked-children="清除" un-checked-children="不清除" />
        </a-form-item>
        <a-form-item label="qos" v-bind="validateInfos.qos" >
          <a-input placeholder="请填写qos" v-model:value="forwardState.qos" ></a-input>
        </a-form-item>
        <a-form-item label="用户名" v-bind="validateInfos.userName">
          <a-input placeholder="请填写用户名" v-model:value="forwardState.userName" ></a-input>
        </a-form-item>
        <a-form-item label="密码" v-bind="validateInfos.password" >
          <a-input placeholder="请填写密码" v-model:value="forwardState.password" ></a-input>
        </a-form-item>
      </span>
      <span v-if="forwardState.targetType === 'RABBIT'" >
        <a-form-item label="exchangeName" v-bind="validateInfos.exchangeName">
          <a-input v-model:value="forwardState.exchangeName" placeholder="请填写交换名" />
        </a-form-item>
        <a-form-item label="路由密钥" v-bind="validateInfos.routingKey">
          <a-input v-model:value="forwardState.routingKey" placeholder="请填写路由密钥" />
        </a-form-item>
        <a-form-item label="消息属性" v-bind="validateInfos.messageProperties">
          <a-input v-model:value="forwardState.messageProperties" placeholder="请填写消息属性" />
        </a-form-item>
        <a-form-item label="域名" v-bind="validateInfos.host">
          <a-input v-model:value="forwardState.host" placeholder="请填写域名" />
        </a-form-item>
        <a-form-item label="端口" v-bind="validateInfos.port">
          <a-input v-model:value="forwardState.port" placeholder="请填写端口" />
        </a-form-item>
        <a-form-item label="虚拟主机" v-bind="validateInfos.virtualHost">
          <a-input v-model:value="forwardState.virtualHost" placeholder="请填写虚拟主机" />
        </a-form-item>
        <a-form-item label="自动恢复" >
          <a-switch v-model:checked="forwardState.automaticRecoveryEnabled" checked-children="启用" un-checked-children="未启用" />
        </a-form-item>
        <a-form-item label="连接超时" >
          <a-input v-model:value="forwardState.connectionTimeout" placeholder="请填写连接超时时间" />
        </a-form-item>
        <a-form-item label="握手超时" >
          <a-input v-model:value="forwardState.handshakeTimeout" placeholder="请填写握手超时" />
        </a-form-item>
        <a-form-item label="用户名" v-bind="validateInfos.userName">
          <a-input placeholder="请填写用户名" v-model:value="forwardState.userName" ></a-input>
        </a-form-item>
        <a-form-item label="密码" v-bind="validateInfos.password" >
          <a-input placeholder="请填写密码" v-model:value="forwardState.password" ></a-input>
        </a-form-item>
      </span>
    </a-form>
</modal-pro>

<modal-pro
  style="width: 1000px"
  label="详情"
  :visible="state.detailVisible"
  @cancel="state.detailVisible = false"
  @ok="state.detailVisible  = false"
>
  <a-form  :label-col="{span: 2}" style="height: 600px;overflow: hidden;overflow-y: scroll;">
    <a-form-item label="规则名称"> {{detailForwardRef.ruleLabel}} </a-form-item>
    <a-form-item label="数据来源"> {{RuleController.SubjectResourceMap.get(detailForwardRef.subjectResource)?.name}} </a-form-item>
    <a-form-item label="触发事件"> {{RuleController.SubjectEventMap.get(detailForwardRef.subjectEvent)?.name}} </a-form-item>
    <a-form-item label="状态"> {{detailForwardRef.status ?  '运行中' : '已停止'}} </a-form-item>
    <a-form-item label="HTTP">
      <a-table
        :columns="detailColumn['HTTP']"
        :data-source="detailHTTPList"
        :pagination="false"
      />

    </a-form-item>
    <a-form-item label="Kafka">
      <a-table
        :columns="detailColumn['Kafka']"
        :data-source="detailKAFKAList"
        :pagination="false"
      >

      </a-table>
    </a-form-item>
    <a-form-item label="MQTT">
      <a-table
        :columns="detailColumn['MQTT']"
        :data-source="detailMQTTList"
        :pagination="false"
      >

      </a-table>
    </a-form-item>
    <a-form-item label="RabbitMQ">
      <a-table
        :columns="detailColumn['RabbitMQ']"
        :data-source="detailRABBITList"
        :pagination="false"
      >

      </a-table>
    </a-form-item>
  </a-form>
</modal-pro>
</template>

<script lang='ts' setup >
import { onMounted, reactive, ref } from 'vue'
import { RuleController } from '@/controller/index'
import type { FormItemProps } from '@/components/FormPro/index.vue'
import { Form, Empty } from 'ant-design-vue'
import { computed } from '@vue/reactivity'

const columns = [
  {
    title: '规则名称',
    dataIndex: 'ruleLabel'
  },
  {
    title: '规则ID',
    dataIndex: 'id'
  },
  {
    title: '数据来源',
    dataIndex: 'subjectResource',
    key: 'subjectResource'
  },
  {
    title: '触发事件',
    dataIndex: 'subjectEvent',
    key: 'subjectEvent'
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status'
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action'
  }
]

const formProps: FormItemProps[] = [
  {
    label: '规则名称',
    key: 'ruleLabel',
    type: 'input',
    rules: true,
    value: ''
  },
  {
    label: '数据来源',
    key: 'subjectResource',
    type: 'select',
    rules: true,
    value: '',
    request: async () => await Array.from(RuleController.SubjectResourceMap, ([key, value]) => ({ ...value, value: value.key }))
  },
  {
    label: '触发事件',
    key: 'subjectEvent',
    type: 'select',
    rules: true,
    value: '',
    request: async () => await Array.from(RuleController.SubjectEventMap, ([key, value]) => ({ ...value, value: value.key }))
  },
  {
    label: '规则描述',
    key: 'ruleDescription',
    type: 'textarea',
    rules: false,
    value: ''
  }
]

const formPropsSearch: FormItemProps[] = [
  {
    label: '规则名称',
    key: 'ruleLabel',
    type: 'input',
    rules: false,
    value: ''
  },
  {
    label: '规则ID',
    key: 'ruleId',
    type: 'input',
    rules: false,
    value: ''
  },
  {
    label: '数据来源',
    key: 'subjectResource',
    type: 'select',
    rules: false,
    request: async () => await Array.from(RuleController.SubjectResourceMap, ([key, value]) => ({ ...value, value: value.key }))
  },
  {
    label: '触发事件',
    key: 'subjectEvent',
    type: 'select',
    rules: false,
    request: async () => await Array.from(RuleController.SubjectEventMap, ([key, value]) => ({ ...value, value: value.key }))
  },
  {
    label: '状态',
    key: 'status',
    type: 'select',
    rules: false,
    request: async () => {
      const getData = () => {
        return [
          { name: '所有状态', key: '', value: '' },
          { name: '运行中', key: 'status', value: true },
          { name: '未启动', key: 'status', value: false }
        ]
      }
      return await getData()
    }
  }
]

const forwardRuleTargetsColumns = [
  {
    title: '转发目标',
    dataIndex: 'targetType'
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action'
  }
]

const forwardTatget = [
  { name: 'RabbitMQ', key: 'RABBIT' },
  { name: 'Kafka', key: 'KAFKA' },
  { name: 'HTTP编码', key: 'HTTP' },
  { name: 'MQTT', key: 'MQTT' }
]

const HttpRequestMethods = [
  { name: 'GET', key: 'GET' },
  { name: 'POST', key: 'POST' },
  { name: 'PUT', key: 'PUT' }
]

const subjectResourceList = Array.from(RuleController.SubjectResourceMap, ([key, value]) => ({ ...value, value: value.key }))

const subjectEventList = Array.from(RuleController.SubjectEventMap, ([key, value]) => ({ ...value, value: value.key }))

const statusList = [
  { name: '所有状态', key: '', value: '' },
  { name: '运行中', key: 'status', value: true },
  { name: '未启动', key: 'status', value: false }
]

const detailColumn = reactive({
  HTTP: [
    { title: 'http地址', dataIndex: 'endpointUrl' },
    { title: 'requestMethod', dataIndex: '请求方法' },
    { title: 'defaultTimeout', dataIndex: '超时时间' },
    { title: 'requestHeaders', dataIndex: '请求头' }
  ],
  Kafka: [
    { title: '主题', dataIndex: 'topic' },
    { title: '地址', dataIndex: 'bootstrapServers' },
    { title: 'acks', dataIndex: 'acks' },
    { title: '重试', dataIndex: 'retries' },
    { title: 'batchSize', dataIndex: 'batchSize' },
    { title: 'linger', dataIndex: 'linger' },
    { title: 'bufferMemory', dataIndex: 'bufferMemory' },
    { title: 'keySerializer', dataIndex: 'keySerializer' },
    { title: 'valueSerializer', dataIndex: 'valueSerializer' },
    { title: '其他属性', dataIndex: 'otherProperties' }
  ],
  MQTT: [
    { title: '主题', dataIndex: 'topic' },
    { title: 'broker服务器', dataIndex: 'broker' },
    { title: '连接超时时间', dataIndex: 'connectTimeout' },
    { title: 'clientId', dataIndex: 'clientId' },
    { title: 'retainedMessage', dataIndex: 'retainedMessage' },
    { title: 'cleanSession', dataIndex: 'cleanSession' },
    { title: 'qos', dataIndex: 'qos' },
    { title: '用户名', dataIndex: 'userName' },
    { title: '密码', dataIndex: 'password' }
  ],
  RabbitMQ: [
    { title: '主题', dataIndex: 'exchangeName' },
    { title: '路由密钥', dataIndex: 'routingKey' },
    { title: '消息属性', dataIndex: 'messageProperties' },
    { title: '域名', dataIndex: 'host' },
    { title: '端口', dataIndex: 'port' },
    { title: '虚拟主机', dataIndex: 'virtualHost' },
    { title: '自动恢复', dataIndex: 'automaticRecoveryEnabled' },
    { title: '连接超时', dataIndex: 'connectionTimeout' },
    { title: '握手超时', dataIndex: 'handshakeTimeout' },
    { title: '用户名', dataIndex: 'userName' },
    { title: '密码', dataIndex: 'password' }
  ]
})

const useForm = Form.useForm

const formProo = ref('')

let queryParams = reactive({
  page: 1,
  pageSize: 10,
  total: 0,
  ruleId: '',
  ruleLabel: '',
  status: '',
  subjectEvent: '',
  subjectResource: ''
})

const state = reactive({
  loading: false,
  dataSource: [],
  visible: false,
  targetVisible: false,
  detailVisible: false,
  stepCount: 0,
  opraState: 'add',
  forwardId: ''
})

const requestHeader = { key: '', value: '' }

const detailForwardRef = ref<Partial<IOT.API.RULE.ForwardRule>>({})

const detailHTTPList = computed(() => detailForwardRef.value && detailForwardRef.value.forwardRuleTargets ? detailForwardRef.value.forwardRuleTargets!.filter(item => item.targetType === 'HTTP') : [])
const detailRABBITList = computed(() => detailForwardRef.value && detailForwardRef.value.forwardRuleTargets ? detailForwardRef.value.forwardRuleTargets!.filter(item => item.targetType === 'RABBIT') : [])
const detailKAFKAList = computed(() => detailForwardRef.value && detailForwardRef.value.forwardRuleTargets ? detailForwardRef.value.forwardRuleTargets!.filter(item => item.targetType === 'KAFKA') : [])
const detailMQTTList = computed(() => detailForwardRef.value && detailForwardRef.value.forwardRuleTargets ? detailForwardRef.value.forwardRuleTargets!.filter(item => item.targetType === 'MQTT') : [])

const initForwardState = {
  targetType: '',
  endpointUrl: '',
  requestMethod: 'GET',
  defaultTimeout: 6,
  requestHeaders: [],
  topic: '',
  bootstrapServers: '',
  acks: '-1',
  retries: '0',
  batchSize: '65535',
  linger: '0',
  bufferMemory: '33554432',
  keySerializer: '',
  valueSerializer: '',
  otherProperties: [],
  broker: '',
  connectTimeout: '',
  clientId: '',
  retainedMessage: false,
  cleanSession: false,
  qos: '',
  userName: '',
  password: '',
  exchangeName: '',
  routingKey: '',
  messageProperties: '',
  host: '',
  port: '',
  virtualHost: '/',
  automaticRecoveryEnabled: false,
  connectionTimeout: 60000,
  handshakeTimeout: 10000
}

const forwardR1Ref = ref()

let forwardState = reactive(JSON.parse(JSON.stringify(initForwardState)))

const forwardRuleState = reactive({
  HTTP: {
    endpointUrl: [{ required: true, message: '请填写http地址' }],
    requestMethod: [{ required: true, message: '请填写请求方法' }],
    defaultTimeout: [{ required: true, message: '请填写超时时间' }],
    requestHeaders: [{ required: true, message: '请填写请求头参数' }]
  },
  KAFKA: {
    topic: [{ required: true, message: '请填写主题' }],
    bootstrapServers: [{ required: true, message: '请填写地址' }],
    acks: [{ required: true, message: '请填写acks' }],
    retries: [{ required: true, message: '请填写retries' }],
    batchSize: [{ required: true, message: '请填写batchSize' }],
    linger: [{ required: true, message: '请填写linger' }],
    bufferMemory: [{ required: true, message: '请填写bufferMemory' }],
    keySerializer: [{ required: true, message: '请填写keySerializer' }],
    valueSerializer: [{ required: true, message: '请填写valueSerializer' }]
  },
  RABBIT: {
    exchangeName: [{ required: true, message: '请填写交换名' }],
    routingKey: [{ required: true, message: '请填写路由密钥' }],
    messageProperties: [{ required: true, message: '请填写消息属性' }],
    host: [{ required: true, message: '请填写域名' }],
    port: [{ required: true, message: 'port' }],
    virtualHost: [{ required: true, message: 'virtualHost' }],
    automaticRecoveryEnabled: [{ required: true, message: 'automaticRecoveryEnabled' }],
    connectionTimeout: [{ required: true, message: 'connectionTimeout' }],
    handshakeTimeout: [{ required: true, message: 'handshakeTimeout' }]
  },
  MQTT: {
    topic: [{ required: true, message: '请填写主题' }],
    broker: [{ required: true, message: '请填写broker服务器' }],
    connectTimeout: [{ required: true, message: '请填写连接超时时间' }],
    clientId: [{ required: true, message: '请填写客户端id' }],
    qos: [{ required: true, message: '请填写qos' }],
    userName: [{ required: true, message: '请填写用户名' }],
    password: [{ required: true, message: '请填写密码' }]
  }
})

let forwardRuleTargets = reactive([])

const forwardRuleStateComputed = computed(() => forwardState.targetType === '' ? {} : forwardRuleState[forwardState.targetType])

const { resetFields, validate, validateInfos } = useForm(forwardState, forwardRuleStateComputed)

const changePage = ({ current }) => {
  queryParams.page = current
  getForwardList()
}

const openDetailModal = async (id: string) => {
  state.detailVisible = true
  const { data } = await RuleController.forwardById(id)
  detailForwardRef.value = data
  console.log('detailForwardRef.value :', detailForwardRef.value)

  // const _forwardRuleTargets = data.forwardRuleTargets
}

const openModal = async (opraState: 'add' | 'update', record) => {
  state.opraState = opraState

  if (opraState === 'update') {
    state.forwardId = record.id
    const { data } = await RuleController.forwardById(record.id)
    formProps[0].value = data.ruleLabel
    formProps[1].value = data.subjectResource
    formProps[2].value = data.subjectEvent
    formProps[3].value = data.ruleDescription

    const _forwardRuleTargets = data.forwardRuleTargets

    _forwardRuleTargets.forEach(item => {
      const _requestHeaders = item.requestHeaders
        ? Object.keys(item.requestHeaders).map(key => {
          return {
            key: key,
            value: item!.requestHeaders[key]
          }
        })
        : []
      const _otherProperties = item.otherProperties
        ? Object.keys(item.otherProperties).map(key => {
          return {
            key: key,
            value: item!.otherProperties[key]
          }
        })
        : []
      item.requestHeaders = _requestHeaders
      item.otherProperties = _otherProperties
    })

    console.log('_forwardRuleTargets:', _forwardRuleTargets)

    forwardRuleTargets = reactive(JSON.parse(JSON.stringify(_forwardRuleTargets)))
  }
  state.visible = true
}

const addRequestHeaders = (key: 'requestHeaders' | 'otherProperties') => forwardState[key].push({ ...requestHeader })

const search = (record) => {
  console.log('search', record)
  queryParams = { ...queryParams, ...record }
  getForwardList()
}

const addForwardState = () => {
  state.targetVisible = true
}

const changeStatus = async (record) => RuleController.updateForwardStatus({ id: record.id, status: record.status })

/** 提交转发规则 */
const ok = async (visibleKey: string) => {
  if (state.stepCount === 1) {
    if (state.targetVisible) {
      validate().then(() => {
        console.log('forwardState:', forwardState)
        forwardRuleTargets.push({ ...forwardState })
        forwardState = reactive(JSON.parse(JSON.stringify(initForwardState)))
        state.targetVisible = false
      })
    } else {
      const _otherProperties: Record<string, string> = {}

      forwardRuleTargets.forEach(item => {
        const _requestHeaders: Record<string, string> = {}
        const _otherProperties: Record<string, string> = {}

        item.requestHeaders.forEach(item => {
          _requestHeaders[item.key] = item.value
        })
        item.requestHeaders = _requestHeaders

        item.otherProperties.forEach(item => {
          _otherProperties[item.key] = item.value
        })
        item.otherProperties = _otherProperties
      })

      forwardState.otherProperties.forEach(item => {
        _otherProperties[item.key] = item.value
      })
      if (state.opraState === 'add') {
        await RuleController.postForward({ ...forwardR1Ref.value, forwardRuleTargets })
      } else {
        await RuleController.updateForward({ ...forwardR1Ref.value, forwardRuleTargets, id: state.forwardId })
      }

      state.visible = false
      getForwardList()
    }
  }

  if (state.stepCount === 0) {
    const r1 = await formProo.value.onSubmit()
    if (r1) {
      state.stepCount = 1
      forwardR1Ref.value = r1
    }
  }
}

const delForwardRule = async (id: string) => {
  await RuleController.delForwardRule(id)
  getForwardList()
}

const getForwardList = async () => {
  state.loading = true
  const { data, sum } = await RuleController.pageForward(queryParams)
  state.loading = false
  state.dataSource = data
  queryParams.total = sum
}

onMounted(() => {
  getForwardList()
})
</script>
<style lang='less' scoped >
</style>