refactor: 悦码项目重构

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

@@ -0,0 +1,183 @@
+<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>