form.vue 4.73 KB
<template>
  <div>
    <BasicDrawer
      destroyOnClose
      showFooter
      v-bind="$attrs"
      @register="registerDrawer"
      width="50%"
      @ok="handleSubmit"
    >
      <BasicForm @register="registerForm">

      </BasicForm>
      <div class="footer">
        <Button type="primary" @click="fnTest">
          测试链接
        </Button>
      </div>
    </BasicDrawer>
  </div>
</template>
<script lang="ts" setup name="sqlApi">
import {
  getBigViewSql,
  saveDataViewSql, testDataViewSql
} from "/@/api/bigscreen/center/bigscreenCenter";
import {BasicDrawer, useDrawerInner} from "/@/components/Drawer";
import { Button } from 'ant-design-vue';
import {BasicForm, useForm} from "/@/components/Form";
import {schemas} from "/@/views/dataview/sqlApi/config/config";
import {nextTick, ref} from "vue";
import {useUtils} from "/@/views/dataview/publicApi/hooks/useUtils";
import {useI18n} from "/@/hooks/web/useI18n";
import {useMessage} from "/@/hooks/web/useMessage";
import {buildUUID} from "/@/utils/uuid";
const { t } = useI18n();
const isUpdate = ref(false);
const { createMessage } = useMessage();
const emits = defineEmits(['success', 'register']);
const putId = ref('');
const sshId = ref('');
const sslId = ref('');
const {
  resetReqHttpType,
  resetUpdateSchema,
} = useUtils();

const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
  await resetFields();
  await nextTick();
  setFieldsValue(resetReqHttpType);
  const title = `${
    !data.isUpdate ? t('visual.dataview.addtext') : t('visual.dataview.editText')
  }${t('visual.dataview.publicInterface')}`;
  setDrawerProps({ title });
  updateSchema(resetUpdateSchema);
  isUpdate.value = data.isUpdate;
  !isUpdate.value ? (putId.value = '') : (putId.value = data.record?.id);
  if (isUpdate.value) {
    const _data = await getBigViewSql(data?.record?.id)
    !isUpdate.value ? (sshId.value = '') : (sshId.value = _data?.ssh?.id);
    !isUpdate.value ? (sslId.value = '') : (sslId.value = _data?.ssl?.id);
    console.log(_data,'_data')
    await setFieldsValue({
      ..._data,
      ssh_ip: _data?.ssh?.ip,
      ssh_port: _data?.ssh?.port,
      ssh_sshName: _data?.ssh?.sshName,
      ssh_privateKey: _data?.ssh?.privateKey ? [{ uid: buildUUID(), name: '公钥文件', url: _data?.ssh?.privateKey }] : [],
      ssh_sshPassword: _data?.ssh?.sshPassword,
      ssh_verifyMethod: _data?.ssh?.verifyMethod
    });
  }
  });

const [registerForm, { resetFields, validate, setFieldsValue, updateSchema,getFieldsValue }] = useForm({
  labelWidth: 160,
  schemas: schemas(),
  showActionButtonGroup: false,
});

const handleSubmit = async () => {
  try {
    setDrawerProps({ loading: true });
    const values = await validate();
    if (!values) return;
    const processedData = {
      ...values,
      id: !putId.value ? null : putId.value,
      ssl: !sslId.value ? null : {id: sslId.value},
      ssh: {
        id: !sshId.value ? null : sshId.value,
        ip: values.ssh_ip,
        port: values.ssh_port,
        sshName: values.ssh_sshName,
        privateKey: values.ssh_privateKey?.[0]?.url || '',
        privateKeyFileName: values.ssh_privateKey?.[0]?.name || '',
        sshPassword: values.ssh_sshPassword,
        verifyMethod: values.ssh_verifyMethod
      }
    }
    delete processedData.ssh_ip
    delete processedData.ssh_port
    delete processedData.ssh_privateKey
    delete processedData.ssh_sshPassword
    delete processedData.ssh_verifyMethod
    const res = await saveDataViewSql(processedData);
    if (res?.id) {
      createMessage.success(t('common.createSuccessText'));
      closeDrawer();
      emits('success');
    }else {
      createMessage.error(t('common.createFailedText'))
    }
  } finally {
    setDrawerProps({ loading: false });
  }
}
const fnTest = async () => {
  const values = getFieldsValue();
  const {
    ssh_ip,
    ssh_port,
    ssh_privateKey,
    ssh_sshPassword,
    ssh_verifyMethod,
    ...restValues
  } = values;

// 2. 创建新对象时直接排除这些字段
  const processedData: any = {
    ...restValues, // 这里不包含 ssh_* 字段
    id: putId.value || null,
    ssl: sslId.value ? { id: sslId.value } : null,
    ssh: {
      id: sshId.value || null,
      ip: ssh_ip,
      port: ssh_port,
      sshName: values.ssh_sshName,
      privateKey: values.ssh_privateKey?.[0]?.url || '',
      privateKeyFileName: values.ssh_privateKey?.[0]?.name || '',
      sshPassword: ssh_sshPassword,
      verifyMethod: ssh_verifyMethod
    }
  };
  const res = await testDataViewSql(processedData);
  if (res === false) {
    createMessage.error('测试链接失败')
  }else if (res === true){
    createMessage.success('测试链接成功')
  }
}
</script>
<style lang="less" scoped>
.footer {
  margin-top: 50px;
  text-align: right;
}
</style>