low-code/apps/y-code-v1/src/views/config-manage/project-cfg/components/create-modal.vue

<template>
  <a-modal :open="open" @ok="handleOk">
    <a-form
      :model="formData"
      ref="formRef"
      :rules="formRules"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 20 }"
    >
      <a-form-item label="项目名称" name="project_name">
        <a-input
          placeholder="请输入项目名称，例如：OA"
          v-model:value="formData.project_name"
        />
      </a-form-item>
      <a-form-item label="项目标识" name="mark">
        <a-input placeholder="请输入项目标识，例如：oa" v-model:value="formData.mark" />
      </a-form-item>
      <a-form-item label="展示状态" name="is_show">
        <a-switch
          v-model:checked="formData.is_show"
          :checkedValue="1"
          :unCheckedValue="0"
        />
      </a-form-item>
      <a-form-item label="数据库地址" name="database_address">
        <a-input
          placeholder="请输入数据库地址"
          v-model:value="formData.database_address"
        />
      </a-form-item>
      <a-form-item label="数据库端口" name="database_port">
        <a-input-number
          placeholder="请输入数据库端口"
          v-model:value="formData.database_port"
          style="width: 200px"
        />
      </a-form-item>
      <a-form-item label="数据库名称" name="database_name">
        <a-input
          placeholder="请输入数据库名称"
          v-model:value="formData.database_name"
        />
      </a-form-item>
      <a-form-item label="数据库用户" name="database_username">
        <a-input
          placeholder="请输入数据库用户"
          v-model:value="formData.database_username"
        />
      </a-form-item>
      <a-form-item label="数据库密码" name="database_password">
        <a-space>
          <a-input-password
            placeholder="请输入数据库密码"
            v-model:value="formData.database_password"
          />
          <a-button type="primary" @click="toCheckDbConnect"
            >检测数据库连接</a-button
          >
        </a-space>
      </a-form-item>
      <a-form-item label="数据库驱动" name="drive_type">
        <a-radio-group v-model:value="formData.drive_type">
          <a-radio :value="1">MySQL</a-radio>
          <a-radio :value="2">Click House</a-radio>
        </a-radio-group>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>
import { ref, watch } from "vue";
import { checkDbConnect } from "@/views/config-manage/project-cfg/service";
import { message } from "ant-design-vue";

const props = defineProps({
  open: {
    type: Boolean,
    default: false,
  },
  type: {
    type: String,
    default: "add",
  },
  data: {
    type: Object,
    default: () => ({}),
  },
});

const emit = defineEmits(["ok"]);
const formRules = {
  project_name: [
    { required: true, message: "请输入项目名称", trigger: "submit" },
  ],
  mark: [{ required: true, message: "请输入项目标识", trigger: "submit" }],
  database_address: [
    { required: true, message: "请输入数据库地址", trigger: "submit" },
  ],
  database_port: [
    { required: true, message: "请输入数据库端口", trigger: "submit" },
  ],
  database_name: [
    { required: true, message: "请输入数据库名称", trigger: "submit" },
  ],
};

const formRef = ref();
const formData = ref({
  project_name: undefined,
  mark: undefined,
  is_show: 0,
  database_address: undefined,
  database_port: undefined,
  database_name: undefined,
  database_username: undefined,
  database_password: undefined,
  drive_type: 1,
});

watch(
  () => props.data,
  (newVal) => {
    if (props.type === "add") {
      resetFormData();
    } else {
      formData.value = newVal;
    }
  }
);

// 检查数据库连接
const toCheckDbConnect = () => {
  if (validateConnect()) {
    checkDbConnect({
      database_name: formData.value.database_name,
      database_port: formData.value.database_port,
      database_address: formData.value.database_address,
      database_username: formData.value.database_username,
      database_password: formData.value.database_password,
      drive_type: formData.value.drive_type,
    }).then((res) => {
      message.success(res.message);
    });
  }
};

const validateConnect = () => {
  const fields = {
    database_name: "请输入数据库名称",
    database_port: "请输入数据库端口",
    database_address: "请输入数据库地址",
  };
  for (const key in fields) {
    if (!formData.value[key]) {
      message.error(fields[key]);
      return false;
    }
  }
  return true;
};

const resetFormData = () => {
  formData.value = {
    project_name: undefined,
    mark: undefined,
    is_show: 0,
    database_address: undefined,
    database_port: undefined,
    database_name: undefined,
    database_username: undefined,
    database_password: undefined,
    drive_type: 1,
  };
};

const handleOk = () => {
  formRef.value.validate().then(() => {
    emit("ok", formData.value);
  });
};
</script>