qhmes/jeecgboot-vue3/src/views/system/appconfig/ThirdAppConfigModal.vue

<template>
  <BasicModal @register="registerModal" :width="860" :title="title" @ok="handleSubmit">
    <a-alert
      v-if="showStreamNodeHint"
      type="info"
      show-icon
      style="margin-bottom: 12px"
      :message="streamNodeHintTitle"
      :description="streamNodeHintDesc"
    />
    <BasicForm @register="registerForm" />
  </BasicModal>
</template>

<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { useForm, BasicForm } from '/@/components/Form';
  import { thirdAppFormSchema } from './ThirdApp.data';
  import { getThirdConfigByTenantId, saveOrUpdateThirdConfig, getDingTalkStreamNodeInfo } from './ThirdApp.api';
  export default defineComponent({
    name: 'ThirdAppConfigModal',
    components: { BasicModal, BasicForm },
    setup(props, { emit }) {
      const title = ref<string>('钉钉配置');
      const showStreamNodeHint = ref(false);
      const streamNodeHintTitle = ref('本机 Stream 节点信息');
      const streamNodeHintDesc = ref('');
      //表单配置
      const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
        schemas: thirdAppFormSchema,
        showActionButtonGroup: false,
        labelCol: { span: 24 },
        wrapperCol: { span: 24 },
      });
      //表单赋值
      const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
        setModalProps({ confirmLoading: true });
        showStreamNodeHint.value = false;
        streamNodeHintDesc.value = '';
        if (data.thirdType == 'dingtalk') {
          title.value = '钉钉配置';
          try {
            const nodeInfo = await getDingTalkStreamNodeInfo();
            if (nodeInfo) {
              showStreamNodeHint.value = true;
              const ips = Array.isArray(nodeInfo.localIps) ? nodeInfo.localIps.join(', ') : '';
              const receiverText = nodeInfo.thisNodeReceiver ? '是（本机将接收回调）' : '否（本机不接收回调）';
              streamNodeHintDesc.value =
                `主机名：${nodeInfo.hostName || '-'}\n本机IP：${ips || '-'}\n当前是否接收：${receiverText}\n` +
                `提示：开启「限制接收节点」后，请将本机局域网 IP 填入「允许接收的IP」`;
            }
          } catch (e) {
            // 接口不可用时忽略
          }
        } else if (data.thirdType == 'kingdee') {
          title.value = '金蝶配置';
        } else {
          title.value = '企业微信配置';
        }
        //重置表单
        await resetFields();
        let values = await getThirdConfigByTenantId({ tenantId: data.tenantId, thirdType: data.thirdType });
        setModalProps({ confirmLoading: false });
        //表单赋值
        if (values) {
          await setFieldsValue(values);
        } else {
          await setFieldsValue(data);
        }
      });

      /**
       * 第三方配置点击事件
       */
      async function handleSubmit() {
        let values = await validate();
        let isUpdate = false;
        if (values.id) {
          isUpdate = true;
        }
        await saveOrUpdateThirdConfig(values, isUpdate);
        emit('success');
        closeModal();
      }

      return {
        title,
        showStreamNodeHint,
        streamNodeHintTitle,
        streamNodeHintDesc,
        registerForm,
        registerModal,
        handleSubmit,
      };
    },
  });
</script>

<style scoped></style>