xiaodou-ai-admin/src/pages/Iot/sys/noticeway.vue

<template>
<a-spin :spinning="state.loading" >
  <a-row :gutter="[16, 16]">
      <a-col span="16" >
        <a-card
          title="参数配置"
        >
        <template v-slot:extra >
          <a-button type="primary" @click="openModal" >{{modelRef.tenantId ? '修改配置' : '创建配置'}}</a-button>
        </template>
          <a-row>
            <a-col  span="24" class="email" >
            <a-form  v-if="modelRef.tenantId" >
              <a-form-item label="MQTT 服务地址" >
                {{ state.sys.mqttServerUrl }}
              </a-form-item>
              <a-form-item label="COAP 服务地址" >
                {{ state.sys.coapServerUrl }}
              </a-form-item>
              <a-form-item label="HTTP 服务地址" >
                {{ state.sys.httpServerUrl }}
              </a-form-item>
              <a-form-item label="邮件地址📧" >
                {{ state.sys.mailSetting?.host }}
              </a-form-item>
              <a-form-item label="邮件协议🔗" >
                {{ state.sys.mailSetting?.protocol }}
              </a-form-item>
              <a-form-item label="邮件账号🔢" >
                {{ state.sys.mailSetting?.username }}
              </a-form-item>
              <a-form-item label="邮件密码🫥" >
                {{ state.sys.mailSetting?.password }}
              </a-form-item>
            </a-form>

            <a-empty  v-else description="暂无邮箱信息" />
            </a-col>
          </a-row>
        </a-card>

      </a-col>
      <a-col span="18" >
      </a-col>
  </a-row>
</a-spin>
  <modal-pro
    :label="modalTitle"
    :open="state.visible"
    ok-text="确定"
    cancel-text="取消"
    @cancel="state.visible = false"
    @ok="ok"
  >
  <a-form :label-col="{span: 6}" :wrapper-col="{span: 14}">
    <a-form-item label="MQTT 服务地址" v-bind="validateInfos.mqttServerUrl">
      <a-input allowClear v-model:value="state.sys.mqttServerUrl"  />
    </a-form-item>
    <a-form-item label="COAP 服务地址" v-bind="validateInfos.coapServerUrl">
      <a-input allowClear v-model:value="state.sys.coapServerUrl"  />
    </a-form-item>
    <a-form-item label="HTTP 服务地址" v-bind="validateInfos.httpServerUrl">
      <a-input allowClear v-model:value="state.sys.httpServerUrl"  />
    </a-form-item>
    <a-form-item label="邮件地址" v-bind="validateInfos.host">
      <a-input allowClear v-model:value="modelRef.host"  />
    </a-form-item>
    <a-form-item label="邮件端口" v-bind="validateInfos.port">
      <a-input allowClear v-model:value="modelRef.port"  />
    </a-form-item>
    <a-form-item label="邮件协议" v-bind="validateInfos.protocol">
      <a-input allowClear v-model:value="modelRef.protocol"  />
    </a-form-item>
    <a-form-item label="邮件账号" v-bind="validateInfos.username">
      <a-input allowClear v-model:value="modelRef.username"  />
    </a-form-item>
    <a-form-item label="邮件密码" v-bind="validateInfos.password">
      <a-input allowClear v-model:value="modelRef.password"  />
    </a-form-item>
   </a-form>
  </modal-pro>
</template>

<script lang="ts" setup >
import { SysController } from '@/controller'
import { computed, onMounted, reactive } from 'vue'
import { Form } from 'ant-design-vue'

const state = reactive<{
  sys: Partial<IOT.API.SYS.Sys>,
  visible: boolean
  loading: boolean
}>({
  sys: {},
  visible: false,
  loading: false
})

const modalTitle = computed(() => modelRef.id ? '修改邮箱' : '创建邮箱')

const modelRef = reactive({
  tenantId: '',
  host: '',
  port: '',
  protocol: '',
  username: '',
  password: ''
})

const useForm = Form.useForm

const { resetFields, validate, validateInfos } = useForm(modelRef, reactive({
  host: [{ required: true, message: '请填写邮件地址' }],
  port: [{ required: true, message: '请填写邮件端口' }],
  protocol: [{ required: true, message: '请填写邮件协议' }],
  username: [{ required: true, message: '请填写邮件账号' }],
  password: [{ required: true, message: '请填写邮件密码' }]
}))

const ok = () => {
  validate().then(async () => {
    if (modelRef.tenantId) {
      await SysController.updateSysConf({ ...state.sys, mailSetting: modelRef })
    } else {
      await SysController.addSysConf({ ...state.sys, mailSetting: modelRef })
    }

    state.visible = false
    getLogo()
  })
}

const openModal = () => {
  state.visible = true
}

const getLogo = async () => {
  state.loading = true
  const { data } = await SysController.sysConf()
  state.loading = false
  console.log('data:', data)

  state.sys = data || { mailSetting: {} }
  resetFields(data.mailSetting || { mailSetting: {} })
  modelRef.tenantId = data ? data.tenantId : ''

  console.log('  modelRef.id :', modelRef)
}

onMounted(() => {
  getLogo()
})

</script>

<style lang="less" scoped >
.logo-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .logo {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 1px solid #ccc;
  }

}

.email {
  display: flex;
  // justify-content: center;
  margin-left: 70px;
  margin-top: 20px;
  font-size: 22px;
}

.label {
  font-size: 32px;
  margin-top: 20px;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>