提交 41327db6 authored 作者: Ras's avatar Ras

完成表关系页面的实现,以及一些分页功能实现

上级 e8bd2ff6
......@@ -25,7 +25,7 @@ service.interceptors.response.use(
// 数据请求成功后 相应操作
const responseData = res.data
if (responseData.code !== 200) {
ElMessage.error(responseData.msg)
ElMessage.error(responseData.message)
}
return responseData
},
......
import { request } from "../config";
// 查询日志
export function getQueryxyunLog() {
export function getQueryxyunLog(pageNo?: number, pageSize?: number) {
return request({
url: "/api/log/list",
method: "get"
method: "get",
params: { pageNo, pageSize },
});
}
import { request } from "../config";
// 定时任务列表
export function getQuartzJobList() {
return request({
url: "/api/quartz/job/list",
method: "get",
});
}
// 定时任务创建
export function addQuartzJob(data?: any) {
return request({
url: "/api/quartz/job/create",
method: "post",
data,
});
}
// 定时任务删除
export function deleteQuartzJob(parameters: { id: any }) {
return request({
url: "/api/quartz/job/delete",
method: "delete",
params: parameters,
});
}
// 定时任务编辑
export function putQuartzJob(parameters: any) {
return request({
url: "/api/quartz/job/update",
method: "put",
data: parameters,
});
}
// 定时任务暂停
export function deleteQuartzJobPause(parameters?: any) {
return request({
url: "/api/quartz/job/pause",
method: "get",
params: parameters,
});
}
// 定时任务启动
export function deleteQuartzJobResume(parameters?: any) {
return request({
url: "/api/quartz/job/resume",
method: "get",
params: parameters,
});
}
......@@ -18,9 +18,30 @@ export function putSynchronization(data: any) {
}
// 手动开启同步
export function getManual() {
return request({
url: '/api/manual/synchronization',
method: 'get',
})
}
// 开启自动同步
export function getStart() {
return request({
url: '/api/start/synchronization',
method: 'get',
})
}
// 关闭自动同步
export function getOff() {
return request({
url: '/api/turn/off/synchronization',
method: 'get',
})
}
// 手动重新同步错误同步
export function getabnormal() {
return request({
url: '/api/abnormal/synchronization',
method: 'get'
})
}
import { request } from "../config";
// 查询表关系
export function getTableRelation(pageNo?: number, pageSize?: number) {
return request({
url: "/api/table/relation/list",
method: "get",
params: { pageNo, pageSize },
});
}
// 表关系录入
export function addTableRelation(inVo: any) {
return request({
url: "/api/table/relation/create",
method: "post",
data: inVo,
});
}
// 修改表关系
export function editTableRelation(inVo: any) {
return request({
url: "/api/table/relation/update",
method: "put",
data: inVo,
});
}
// 删除表关系
export function deleteTableRelation(idList: any) {
return request({
url: "/api/table/relation/delete",
method: "delete",
params: { idList },
});
}
<template>
<el-card>
<!-- 筛选框 -->
<el-form
:model="form"
ref="resetFormData"
style="margin-top: 50px"
@keyup.enter.native="onSubmit"
>
<el-form :model="form" ref="resetFormData" style="margin-top: 50px" @keyup.enter.native="onSubmit">
<el-space :size="30">
<el-form-item label="任务类别:" prop="leibie">
<el-input
placeholder="请输入任务类别"
v-model="form.leibie"
></el-input>
<el-input placeholder="请输入任务类别" v-model="form.leibie"></el-input>
</el-form-item>
<el-form-item label="任务状态:">
<el-select
v-model="form.region"
placeholder="请选择任务状态"
prop="region"
>
<el-option
v-for="(item, index) in options"
:key="index"
:label="item.label"
:value="item.value"
></el-option>
<el-select v-model="form.region" placeholder="请选择任务状态" prop="region">
<el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
......@@ -44,50 +28,27 @@
<!-- table框 -->
<el-table :data="tableData" style="width: 100%" border stripe flexible>
<el-table-column type="selection" width="55" align="center" />
<el-table-column
type="index"
label="#"
:index="indexMethod"
align="center"
/>
<el-table-column type="index" label="#" :index="indexMethod" align="center" />
<el-table-column prop="jobClassName" label="任务类名" align="center" />
<el-table-column prop="cronExpression" label="cron表达式" align="center" />
<el-table-column prop="parameter" label="参数" align="center" />
<el-table-column prop="description" label="描述" align="center" />
<el-table-column
prop="status"
label="状态"
width="100"
align="center"
:filters="[
<el-table-column prop="status" label="状态" width="100" align="center" :filters="[
{ text: '已启动', value: '0' },
{ text: '已暂停', value: '1' },
]"
:filter-method="filterTag"
filter-placement="bottom-end"
>
]" :filter-method="filterTag" filter-placement="bottom-end">
<template #default="scope">
<el-tag
:type="scope.row.status === '已启动' ? '' : 'success'"
disable-transitions
>{{ scope.row.status }}</el-tag
>
<el-tag :type="scope.row.status === '已启动' ? '' : 'success'" disable-transitions>{{ scope.row.status }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="operation" label="操作" align="center" width="150px">
<template #default="scope">
<span
class="el-dropdown-link"
@click="handleNow(scope)"
style="color: #409eff; cursor: pointer; margin-top: 2px"
>启动</span
>
<span class="el-dropdown-link" @click="handleNow(scope)"
style="color: #409eff; cursor: pointer; margin-top: 2px">启动</span>
<el-divider direction="vertical" />
<el-dropdown
:hide-on-click="false"
style="color: #409eff; cursor: pointer; margin-top: 2px"
>
<el-dropdown :hide-on-click="false" style="color: #409eff; cursor: pointer; margin-top: 2px">
<span class="el-dropdown-link">
更多
<el-icon class="el-icon--right">
......@@ -96,15 +57,9 @@
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="restartNow"
>立即执行</el-dropdown-item
>
<el-dropdown-item @click="handleEdit(scope)"
>编辑</el-dropdown-item
>
<el-dropdown-item @click="handleDelete(scope)"
>删除</el-dropdown-item
>
<el-dropdown-item @click="restartNow">立即执行</el-dropdown-item>
<el-dropdown-item @click="handleEdit(scope)">编辑</el-dropdown-item>
<el-dropdown-item @click="handleDelete(scope)">删除</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
......@@ -113,38 +68,15 @@
</el-table>
<!-- 分页区域 -->
<div class="demo-pagination-block" style="margin-top: 20px">
<el-pagination
v-model:currentPage="currentPage"
v-model:page-size="pageSize"
:page-sizes="[10, 20, 30]"
small
:disabled="disabled"
:background="background"
layout="->, sizes, prev, pager, next"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
<el-pagination v-model:currentPage="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30]" small
:disabled="disabled" :background="background" layout="->, sizes, prev, pager, next" :total="total"
@size-change="handleSizeChange" @current-change="handleCurrentChange" />
</div>
<!-- 对话框区域 -->
<el-dialog
v-model="dialogVisible"
:title="titleName"
width="50%"
:before-close="handleClose"
>
<el-form
:mode="taskForm"
label-position="right"
label-width="100px"
style="padding: 5%"
>
<el-form-item
label="任务类别"
prop="jobClassName"
:rules="[{ required: true, message: '请输入任务类别:' }]"
>
<el-dialog v-model="dialogVisible" :title="titleName" width="50%" :before-close="handleClose">
<el-form :mode="taskForm" label-position="right" label-width="100px" style="padding: 5%">
<el-form-item label="任务类别" prop="jobClassName" :rules="[{ required: true, message: '请输入任务类别:' }]">
<el-input v-model="taskForm.jobClassName" placeholder="请输入任务类别:" clearable></el-input>
</el-form-item>
<el-form-item label="cron表达式:" prop="cronExpression">
......@@ -172,9 +104,7 @@
<template #footer>
<span class="dialog-footer">
<el-button @click="handleClose">Cancel</el-button>
<el-button type="primary" @click="dialogVisible = false"
>Confirm</el-button
>
<el-button type="primary" @click="dialogVisible = false">Confirm</el-button>
</span>
</template>
</el-dialog>
......@@ -189,7 +119,7 @@ import { ElForm, ElMessage, ElMessageBox } from "element-plus";
// table的index列
const indexMethod = (index: number) => {
index = 1;
return index ++;
return index++;
};
const options = ref([
{ label: "全部", value: "0" },
......@@ -241,6 +171,7 @@ const form = reactive({
const dialogVisible = ref(false);
// 表单的标题
const titleName = ref("");
const onSubmit = () => {
const { region, leibie } = form;
console.log("查询" + region + "--" + leibie);
......@@ -325,4 +256,5 @@ const setCorn = (data: any) => {
};
</script>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
</style>
......@@ -20,6 +20,7 @@
ref="ruleFormRef"
:rules="rules"
:model="sybchronizationForm"
:disabled="isDisabled"
label-position="right"
label-width="100px"
class="demo-ruleForm"
......@@ -92,6 +93,9 @@
import {
getSynchronization,
putSynchronization,
getStart,
getManual,
getOff,
} from "@/services/api/synchronization/synchronizationAPI";
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
......@@ -110,8 +114,8 @@ const rules = ref<FormRules>({
dbid: [{ required: true, message: "数据库ID不为空", trigger: "blur" }],
lang: [{ required: true, message: "语言不为空", trigger: "blur" }],
uid: [{ required: true, message: "账号不为空", trigger: "blur" }],
pwd: [{ required: true, message: "密码不为空", trigger: "blur" }]
});
pwd: [{ required: true, message: "密码不为空", trigger: "blur" }],
});
const ruleFormRef = ref<FormInstance>();
onMounted(async () => {
const { data: res } = await getSynchronization();
......@@ -119,20 +123,29 @@ onMounted(async () => {
console.log(res);
});
const isDisabled = ref(false);
const handleOpen = () => {
if (isDisabled.value === true) return;
isDisabled.value = true;
console.log("启动同步");
const handleOpen = async () => {
// if (isDisabled.value === true) return;
const res: any = await getStart();
if (res.code === 200) {
isDisabled.value = !isDisabled.value;
return ElMessage({ type: "success", message: "自动启动成功" });
}
};
const handleClose = () => {
if (isDisabled.value === false) return;
isDisabled.value = false;
console.log("关闭同步");
const handleClose = async () => {
// if (isDisabled.value === false) return;
const res: any = await getOff();
if (res.code === 200) {
isDisabled.value = !isDisabled.value;
return ElMessage({ type: "success", message: "关闭成功" });
}
};
const handleManual = () => {
const handleManual = async () => {
if (isDisabled.value === true) return;
isDisabled.value = true;
console.log("手动同步");
const res: any = await getManual();
if (res.code === 200) {
isDisabled.value = !isDisabled.value;
return ElMessage({ type: "success", message: "手动启动成功" });
}
};
const handleSave = (formEl: FormInstance | undefined) => {
if (!formEl) return;
......@@ -141,7 +154,6 @@ const handleSave = (formEl: FormInstance | undefined) => {
const res: any = await putSynchronization(sybchronizationForm.value);
if (res.code === 200)
return ElMessage({ message: "保存参数成功!", type: "success" });
ElMessage({ message: "保存参数失败!", type: "error" });
} else {
console.log("校验失败", fields);
return false;
......
<template>
<el-card>
<div>
<el-form-item>
<el-button type="primary" @click="addToTableRelation">添加</el-button>
</el-form-item>
</div>
<div>
<el-table :data="tableRelationList" style="width: 100%; margin-bottom: 20px" row-key="id" border>
<el-table-column type="selection" width="55" />
<el-table-column prop="tableName" label="表名称" width="255" />
<el-table-column prop="tableHeader" label="表名" align="center" width="225" />
<el-table-column prop="tableDate" label="表头日期字段" align="center" />
<el-table-column prop="subTableHeader" label="父表名(-1代表没有)" align="center" />
<el-table-column prop="primaryKey" label="主键" align="center" />
<el-table-column prop="foreignKey" label="外键" align="center" />
<el-table-column prop="createTime" label="创建时间" align="center" />
<el-table-column fixed="right" label="操作" align="center">
<template #default="scope">
<el-button link type="primary" size="small" @click="modifyTableRelation(scope.row)">修改
</el-button>
<el-button link type="danger" size="small" @click="cutOutTableRelation(scope.row.id)">删除
</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination v-model:currentPage="currentPage" v-model:page-size="pageSize"
layout="->, total, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
@current-change="handleCurrentChange" />
</div>
</el-card>
<!-- 添加对话框 -->
<el-dialog v-model="dialogVisible" title="表关系管理" width="50%" :before-close="handleClose">
<div>
<el-form ref="tableRelationRef" :model="tableRelationForm" :rules="rules" label-width="150px" status-icon>
<el-form-item label="表名称:" prop="tableName">
<el-input v-model="tableRelationForm.tableName" placeholder="请输入表名称"></el-input>
</el-form-item>
<el-form-item label="表名:" prop="tableHeader">
<el-input v-model="tableRelationForm.tableHeader" placeholder="请输入表名称"></el-input>
</el-form-item>
<el-form-item label="表头日期字段:" prop="tableDate">
<el-input v-model="tableRelationForm.tableDate" placeholder="请输入表名称"></el-input>
</el-form-item>
<el-form-item label="父表名(-1代表没有):" prop="subTableHeader">
<el-input v-model="tableRelationForm.subTableHeader" placeholder="请输入表名称"></el-input>
</el-form-item>
<el-form-item label="外键:" prop="primaryKey">
<el-input v-model="tableRelationForm.primaryKey" placeholder="请输入表名称"></el-input>
</el-form-item>
<el-form-item label="表名称:" prop="foreignKey">
<el-input v-model="tableRelationForm.foreignKey" placeholder="请输入表名称"></el-input>
</el-form-item>
</el-form>
</div>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">关闭</el-button>
<el-button type="primary" @click="onConfirm(tableRelationRef)">确认</el-button>
</span>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { ElMessageBox, FormInstance, FormRules, ElMessage } from 'element-plus'
import { getTableRelation, addTableRelation, editTableRelation, deleteTableRelation } from '@/services/api/tableRelation/tableRelationAPI'
const tableRelationRef = ref<FormInstance>()
const tableRelationList = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const modifyId = ref()
const tableRelationForm = ref({
children: [],
tableName: "",
tableHeader: "",
tableDate: "",
subTableHeader: "",
primaryKey: "",
foreignKey: ""
})
const rules = ref({})
const dialogVisible = ref(false)
const init = (val?: number, pageSize?: number) => {
getTableRelation(val, pageSize).then((res: any) => {
tableRelationList.value = res.data.records
total.value = res.data.total
console.log(res);
console.log("表关系数据", tableRelationList.value);
})
}
init()
// 添加按钮
const addToTableRelation = () => {
dialogVisible.value = true
};
const handleSizeChange = (val: number) => {
if (val === pageSize.value) val = currentPage.value
init(val, pageSize.value)
}
const handleCurrentChange = (val: number) => {
init(val, pageSize.value)
}
const handleClose = () => {
dialogVisible.value = false
}
const modifyTableRelation = (scope: any) => {
console.log(scope);
tableRelationForm.value = scope
modifyId.value = scope.id
dialogVisible.value = true
}
// 删除
const cutOutTableRelation = (id: any) => {
console.log(id);
ElMessageBox.confirm(
'请确认删除?',
'删除',
{
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
}
)
.then(() => {
deleteTableRelation(id).then((res: any) => {
if (res.code === 200) {
init()
ElMessage({
type: 'success',
message: '删除成功!',
})
}
})
})
.catch(() => {
ElMessage({
type: 'info',
message: '取消删除!',
})
})
}
// 添加修改
const onConfirm = (formEl: FormInstance | undefined) => {
if (!formEl) return
formEl.validate((valid, fields) => {
if (valid) {
if (!modifyId.value) {
Reflect.deleteProperty(tableRelationForm.value, 'children')
addTableRelation({ recordsList: [tableRelationForm.value] }).then((res: any) => {
if (res.code !== 200) return ElMessage({ type: 'error', message: "添加失败!" })
init()
ElMessage({ type: 'error', message: "添加成功!" })
formEl.resetFields()
})
} else {
// 删除children属性
Reflect.deleteProperty(tableRelationForm.value, 'children')
editTableRelation({ recordsList: [tableRelationForm.value] }).then((res: any) => {
if (res.code !== 200) return ElMessage({ type: 'error', message: "修改失败!" })
init()
ElMessage({ type: 'error', message: "修改成功!" })
formEl.resetFields()
})
}
} else {
console.log("校验失败", fields);
}
})
dialogVisible.value = false
}
</script>
<style lang="scss">
</style>
<template>
<div class="router">
<el-card>
<el-space
direction="vertical"
alignment="align-items: left"
style="margin-top: 30px"
>
<el-space direction="vertical" alignment="align-items: left" style="margin-top: 30px">
<!-- 过滤条件框 -->
<div>
<el-form :model="filterForm">
<el-space :size="40">
<el-form-item label="选择时间:">
<el-date-picker
v-model="filterForm.dateTime"
type="datetimerange"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
@change="dateChange"
/>
<el-date-picker v-model="filterForm.dateTime" type="datetimerange" range-separator="至"
start-placeholder="开始时间" end-placeholder="结束时间" @change="dateChange" />
</el-form-item>
<el-form-item label="名称:" width="60px">
<el-input v-model="filterForm.name" />
<el-input v-model="filterForm.name" placeholder="请输入名称" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleScreen">筛选</el-button>
......@@ -34,61 +24,32 @@
<el-divider />
<!-- 表格 -->
<el-table
v-loading="loading"
:data="tableList"
border
stripe
style="width: 100%"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" />
<el-table-column
prop="flag"
label="同步状态"
:filters="[
<el-table v-loading="loading" :data="tableList" border stripe style="width: 100%"
@selection-change="handleSelectionChange">
<!-- <el-table-column type="selection" width="55" /> -->
<el-table-column type="index" :index="indexMethod(1)" />
<el-table-column prop="flag" label="同步状态" :filters="[
{ text: '同步成功', value: '0' },
{ text: '同步失败', value: '1' },
]"
:filter-method="filterTag"
:filter-multiple="false"
filter-placement="bottom-end"
align="center"
>
]" :filter-method="filterTag" :filter-multiple="false" filter-placement="bottom-end" align="center">
<template #default="scope">
{{ scope.row.flag }}
</template>
</el-table-column>
<el-table-column prop="name" label="名称" />
<el-table-column prop="content" label="内容" />
<el-table-column prop="createTime" label="创建时间" />
<el-table-column prop="name" label="名称" align="center" />
<el-table-column prop="content" label="内容" align="center" />
<el-table-column prop="createTime" label="创建时间" align="center" />
<el-table-column fixed="right" label="操作" align="center">
<template #default="scope">
<el-button
link
type="primary"
size="small"
@click="handleDetails(scope.row)"
>详情</el-button
>
<el-button link type="primary" size="small" @click="handleDetails(scope.row)">详情</el-button>
</template>
</el-table-column>
</el-table>
<div style="margin-top: 20px">
<el-pagination
v-model:currentPage="currentPage"
v-model:page-size="pageSize"
:page-sizes="[10, 20, 30]"
:small="small"
:disabled="disabled"
:background="background"
layout="->, total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
hide-on-single-page
/>
<el-pagination v-model:currentPage="currentPage" v-model:page-size="pageSize" :small="small"
:disabled="disabled" :background="background" layout="->, total, prev, pager, next, jumper" :total="total"
@size-change="handleSizeChange" @current-change="handleCurrentChange" hide-on-single-page />
</div>
</el-card>
......@@ -133,13 +94,8 @@
<!-- 详情页面 -->
<el-dialog v-model="visible" title="详情页面" width="40%">
<el-form
:model="detailForm"
label-position="left"
label-width="100px"
style="padding: 0 5%"
:disabled="(disabled = true)"
>
<el-form :model="detailForm" label-position="left" label-width="100px" style="padding: 0 5%"
:disabled="(disabled = true)">
<el-form-item label="名称:">
<el-input v-model="detailForm.name" placeholder="名称为" />
</el-form-item>
......@@ -150,11 +106,7 @@
<el-input v-model="detailForm.content" placeholder="内容为" />
</el-form-item>
<el-form-item label="请求参数:">
<el-input
type="textarea"
v-model="detailForm.data"
placeholder="请求参数为"
/>
<el-input type="textarea" v-model="detailForm.data" placeholder="请求参数为" />
</el-form-item>
<el-form-item label="同步时长:">
<el-input v-model="detailForm.costime" placeholder="同步时长为为" />
......@@ -179,6 +131,7 @@
import { ref } from "vue";
import moment from "moment";
import { ElTable } from "element-plus";
import { getQueryxyunLog } from '@/services/api/log/logApi'
import { useXyunLogTableList } from "./tableConfigData/useXyunLog";
interface List {
......@@ -200,7 +153,9 @@ const detailForm = ref({
costime: "",
createTime: "",
});
const dialogVisible = ref(false);
const indexMethod = (index: number) => {
return index++
}
const visible = ref(false);
// 多选框
const multipleSelection = ref<List[]>([]);
......@@ -208,11 +163,11 @@ const multipleSelection = ref<List[]>([]);
// 总页数
// const total = ref(0);
// 当前页数
const currentPage = ref(4);
const currentPage = ref(1);
// 每页条数
const pageSize = ref(10);
const pageSize = ref(20);
// 是否使用小型分页样式
const small = ref(true);
const small = ref(false);
// 是否为分页按钮添加背景色
const background = ref(false);
// 是否禁用分页
......@@ -231,15 +186,8 @@ const { tableList, total, loading } = useXyunLogTableList();
// 同步成功/失败
const filterTag = (value: Boolean, row: any) => {
console.log(row.flag);
return row.flag === value
// console.log(value);
// if(value) {
// tableList.value.forEach(item => {
// console.log(item);
// })
// }
};
const dateChange = (value: any) => {
......@@ -253,23 +201,14 @@ const dateChange = (value: any) => {
const handleSelectionChange = (val: List[]) => {
multipleSelection.value = val;
};
// 点击弹出页面
const addDialogVisible = () => {
dialogVisible.value = true;
};
// 详情
const handleDetails = (scope: any) => {
console.log(filterForm.value);
detailForm.value = scope;
visible.value = true;
};
// 对话框取消按钮
const arr: any = [];
const cancelVisible = () => {
detailForm.value = arr;
dialogVisible.value = false;
};
const cancelVisible1 = () => {
const arr: any = [];
detailForm.value = arr;
......@@ -280,13 +219,19 @@ const handleScreen = () => {
console.log("点击筛选");
};
// 分页
const page = (val: number) => {
getQueryxyunLog(val).then((res) => {
tableList.value = res.data.records
});
}
// 每页新条数
const handleSizeChange = (val: number) => {
console.log(`${val} items per page`);
page(val)
};
// 新页数
const handleCurrentChange = (val: number) => {
console.log(`current page: ${val}`);
page(val)
};
</script>
<style scoped></style>
<style scoped>
</style>
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论