refactor: 悦码项目重构
This commit is contained in:
wangxuefeng
@@ -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>
|
||||
@@ -0,0 +1,9 @@
|
||||
export const projectCfgCols = [
|
||||
{ dataIndex: 'project_id', title: '编号', align: 'center'},
|
||||
{ dataIndex: 'project_name', title: '项目名称', align: 'center'},
|
||||
{ dataIndex: 'mark', title: '项目标识', align: 'center'},
|
||||
{ dataIndex: 'database_name', title: '数据库名', align: 'center'},
|
||||
{ dataIndex: 'is_show', title: '展示状态', align: 'center'},
|
||||
// { dataIndex: 'sort', title: '排序', align: 'center'},
|
||||
{ dataIndex: 'action', title: '操作', align: 'center'},
|
||||
];
|
||||
201
apps/y-code-v1/src/views/config-manage/project-cfg/index.vue
Normal file
201
apps/y-code-v1/src/views/config-manage/project-cfg/index.vue
Normal file
@@ -0,0 +1,201 @@
|
||||
<template>
|
||||
<div class="normal-container project-cfg-box">
|
||||
<div class="header-box">
|
||||
<a-space>
|
||||
<a-input
|
||||
v-model:value="projectName"
|
||||
placeholder="请输入项目名称"
|
||||
allow-clear
|
||||
style="width: 200px"
|
||||
@change="search"
|
||||
/>
|
||||
<a-button type="primary" @click="openCreateModal">新建</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
<div class="content-box">
|
||||
<a-table
|
||||
:columns="projectCfgCols"
|
||||
:data-source="dataList"
|
||||
:pagination="false"
|
||||
size="small"
|
||||
bordered
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.dataIndex === 'is_show'">
|
||||
<a-switch
|
||||
v-model:checked="record.is_show"
|
||||
:checkedValue="1"
|
||||
:unCheckedValue="0"
|
||||
@change="toChangeStatus(record.project_id, $event)"
|
||||
/>
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'action'">
|
||||
<a-space>
|
||||
<a-button
|
||||
type="link"
|
||||
size="small"
|
||||
@click="toGetDetail(record.project_id)"
|
||||
>
|
||||
编辑
|
||||
</a-button>
|
||||
<a-popconfirm
|
||||
title="确定删除？"
|
||||
@confirm="toDelete(record.project_id)"
|
||||
>
|
||||
<a-button type="link" size="small">删除</a-button>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
<a-pagination
|
||||
v-model:current="pageState.page"
|
||||
:total="pageState.total"
|
||||
:page-size="pageState.perPage"
|
||||
:hide-on-single-page="false"
|
||||
size="small"
|
||||
class="pagination-box"
|
||||
@change="toGetProjectList"
|
||||
/>
|
||||
</div>
|
||||
<CreateModal
|
||||
:width="700"
|
||||
:open="modalState.visible"
|
||||
:title="modalState.title"
|
||||
:type="modalState.type"
|
||||
:data="modalState.data"
|
||||
:confirmLoading="saveLoading"
|
||||
@cancel="modalState.visible = false"
|
||||
@ok="toSave"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref, reactive } from "vue";
|
||||
import { message } from "ant-design-vue";
|
||||
import { projectCfgCols } from "./config";
|
||||
import {
|
||||
getProjectList,
|
||||
saveProject,
|
||||
deleteProject,
|
||||
getProjectDetail,
|
||||
updateStatus,
|
||||
} from "./service";
|
||||
import CreateModal from "./components/create-modal.vue";
|
||||
|
||||
const dataList = ref([]);
|
||||
const listLoading = ref(false);
|
||||
const saveLoading = ref(false);
|
||||
const detailLoading = ref(false);
|
||||
const projectName = ref("");
|
||||
|
||||
const modalState = reactive({
|
||||
title: undefined,
|
||||
visible: false,
|
||||
type: "", // add - 新建，edit - 编辑
|
||||
data: {
|
||||
project_name: undefined,
|
||||
is_show: 0,
|
||||
database_address: undefined,
|
||||
database_port: undefined,
|
||||
database_name: undefined,
|
||||
database_username: undefined,
|
||||
database_password: undefined,
|
||||
},
|
||||
});
|
||||
|
||||
const pageState = reactive({
|
||||
page: 1,
|
||||
perPage: 20,
|
||||
total: 0,
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
toGetProjectList();
|
||||
});
|
||||
|
||||
// 获取列表
|
||||
const toGetProjectList = () => {
|
||||
listLoading.value = true;
|
||||
getProjectList({
|
||||
page: pageState.page,
|
||||
perPage: pageState.perPage,
|
||||
projectName: projectName.value,
|
||||
})
|
||||
.then((res) => {
|
||||
dataList.value = res.data.list;
|
||||
pageState.total = res.data.total;
|
||||
})
|
||||
.finally(() => {
|
||||
listLoading.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
// 保存
|
||||
const toSave = (data) => {
|
||||
saveLoading.value = true;
|
||||
saveProject(data)
|
||||
.then(() => {
|
||||
message.success("保存成功");
|
||||
modalState.visible = false;
|
||||
toGetProjectList();
|
||||
})
|
||||
.finally(() => {
|
||||
saveLoading.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
// 获取详情
|
||||
const toGetDetail = (projectId) => {
|
||||
detailLoading.value = true;
|
||||
modalState.visible = true;
|
||||
modalState.title = "编辑";
|
||||
modalState.type = "edit";
|
||||
getProjectDetail({ projectId }).then((res) => {
|
||||
modalState.data = res.data;
|
||||
});
|
||||
};
|
||||
|
||||
// 删除
|
||||
const toDelete = (id) => {
|
||||
deleteProject({ projectId: id }).then(() => {
|
||||
message.success("删除成功");
|
||||
search();
|
||||
});
|
||||
};
|
||||
|
||||
const toChangeStatus = (id, status) => {
|
||||
updateStatus({ project_id: id, status }).then(() => {
|
||||
message.success("修改成功");
|
||||
search();
|
||||
});
|
||||
};
|
||||
|
||||
const search = () => {
|
||||
pageState.page = 1;
|
||||
toGetProjectList();
|
||||
};
|
||||
|
||||
// 点击新建
|
||||
const openCreateModal = () => {
|
||||
modalState.visible = true;
|
||||
modalState.title = "新建";
|
||||
modalState.type = "add";
|
||||
modalState.data = {};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scope>
|
||||
.header-box {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.ycode-ant-table-wrapper {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.pagination-box {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,57 @@
|
||||
import { get, post } from "@/utils/request";
|
||||
|
||||
// 获取项目列表
|
||||
export function getProjectList({ page, perPage, projectName }) {
|
||||
return get({
|
||||
url: `api/v1/project/list`,
|
||||
params: {
|
||||
page,
|
||||
per_page: perPage,
|
||||
project_name: projectName,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// 获取项目详情
|
||||
export function getProjectDetail({ projectId }) {
|
||||
return get({
|
||||
url: `api/v1/project/info`,
|
||||
params: {
|
||||
project_id: projectId,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// 保存
|
||||
export function saveProject(data) {
|
||||
return post({
|
||||
url: `/api/v1/project/save`,
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
// 删除
|
||||
export function deleteProject({ projectId }) {
|
||||
return post({
|
||||
url: `/api/v1/project/del`,
|
||||
data: {
|
||||
project_id: projectId,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// 检测数据库链接
|
||||
export function checkDbConnect(data) {
|
||||
return post({
|
||||
url: `/api/v1/project/check-database-connect`,
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
// 修改展示状态
|
||||
export function updateStatus(data) {
|
||||
return post({
|
||||
url: `/api/v1/project/change-status`,
|
||||
data,
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user