|
|
@@ -0,0 +1,545 @@
|
|
|
+<template>
|
|
|
+ <el-container>
|
|
|
+ <el-header height="40px" class="content-header">
|
|
|
+ <div class="header-container">
|
|
|
+ <!-- <div class="header-title">安全审计</div> -->
|
|
|
+ <el-form
|
|
|
+ :model="searchformModel"
|
|
|
+ ref="searchForm"
|
|
|
+ label-position="left"
|
|
|
+ class="header-form-detail-inline"
|
|
|
+ inline
|
|
|
+ >
|
|
|
+ <el-form-item label="操作内容" prop="name">
|
|
|
+ <el-input
|
|
|
+ v-model="searchformModel.name"
|
|
|
+ placeholder="请输入网址url"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="表名" prop="name">
|
|
|
+ <el-input
|
|
|
+ v-model="searchformModel.name"
|
|
|
+ placeholder="请输入表名"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="操作类别" prop="name">
|
|
|
+ <el-input
|
|
|
+ v-model="searchformModel.name"
|
|
|
+ placeholder="请输入操作类别"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="操作时间" prop="name">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="searchformModel.value2"
|
|
|
+ type="datetimerange"
|
|
|
+ :picker-options="pickerOptions"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ align="right"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="" prop="">
|
|
|
+ <el-button type="primary" size="mini" @click="handleSubmit"
|
|
|
+ >搜索</el-button
|
|
|
+ >
|
|
|
+ <el-button size="mini" @click="handleReset">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </el-header>
|
|
|
+ <el-container>
|
|
|
+ <el-main>
|
|
|
+ <MyTableHeader
|
|
|
+ :title="tableHeaderTitle"
|
|
|
+ :tabs="tabs"
|
|
|
+ :buttons="buttons"
|
|
|
+ @tabClick="handleTabClick"
|
|
|
+ @buttonClick="handleButtonClick"
|
|
|
+ ></MyTableHeader>
|
|
|
+
|
|
|
+ <MyTable
|
|
|
+ :tableData="tableData"
|
|
|
+ :formData="formData"
|
|
|
+ :minWidth="60"
|
|
|
+ ref="myTableRef"
|
|
|
+ :isOperate="isOperate"
|
|
|
+ @selection-change="handleSelectionChange"
|
|
|
+ >
|
|
|
+ <!-- 自定义操作按钮，传递 row 和 index -->
|
|
|
+ <template #operation="{ row, index }">
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ @click="handleView(row, 'view')"
|
|
|
+ type="primary"
|
|
|
+ >查看</el-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </MyTable>
|
|
|
+ <MyPagination
|
|
|
+ :total="tableTotal"
|
|
|
+ :page-size="pageSize"
|
|
|
+ :current-page="currentPage"
|
|
|
+ @pageChange="pagi_changePage"
|
|
|
+ @sizeChange="pagi_changeSize"
|
|
|
+ ></MyPagination>
|
|
|
+ </el-main>
|
|
|
+ </el-container>
|
|
|
+ </el-container>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import {
|
|
|
+ getTabAccessConfigList,
|
|
|
+ addTabAccessConfig,
|
|
|
+ updateTabAccessConfigById,
|
|
|
+ viewTabAccessConfigById,
|
|
|
+ delTabAccessConfigById,
|
|
|
+ exportTabAccessConfig,
|
|
|
+} from "@/api/unified-access/access-config";
|
|
|
+import MyHeader from "@/components/MyHeader";
|
|
|
+import MyTable from "@/components/MyTable";
|
|
|
+import MyPagination from "@/components/MyPagination";
|
|
|
+import MyTableHeader from "@/components/MyTableHeader";
|
|
|
+export default {
|
|
|
+ name: "access-config",
|
|
|
+ components: {
|
|
|
+ MyHeader,
|
|
|
+ MyTableHeader,
|
|
|
+ MyTable,
|
|
|
+ MyPagination,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ searchformModel: {},
|
|
|
+ pickerOptions: {
|
|
|
+ shortcuts: [
|
|
|
+ {
|
|
|
+ text: "最近一周",
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date();
|
|
|
+ const start = new Date();
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
|
|
+ picker.$emit("pick", [start, end]);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "最近一个月",
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date();
|
|
|
+ const start = new Date();
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
|
|
+ picker.$emit("pick", [start, end]);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "最近三个月",
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date();
|
|
|
+ const start = new Date();
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
|
|
+ picker.$emit("pick", [start, end]);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ showDialog: false,
|
|
|
+ title: "新增",
|
|
|
+ rowObj: {},
|
|
|
+ type: "add",
|
|
|
+ isOperate: false,
|
|
|
+ tableData: [],
|
|
|
+ formData: [
|
|
|
+ {
|
|
|
+ label: "表名",
|
|
|
+ fieldName: "dataManner",
|
|
|
+ type: "input",
|
|
|
+ showInTable: true,
|
|
|
+ value: "",
|
|
|
+ width: "",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "SQL类型",
|
|
|
+ fieldName: "gatewayIp",
|
|
|
+ type: "input",
|
|
|
+ showInTable: true,
|
|
|
+ value: "",
|
|
|
+ width: "",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "SQL命令详情",
|
|
|
+ fieldName: "gatewayPort",
|
|
|
+ type: "input",
|
|
|
+ showInTable: true,
|
|
|
+ value: "",
|
|
|
+ width: "",
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ label: "执行数",
|
|
|
+ fieldName: "runTime",
|
|
|
+ type: "input",
|
|
|
+ showInTable: true,
|
|
|
+ value: "",
|
|
|
+ width: "",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "执行时间",
|
|
|
+ fieldName: "runTime",
|
|
|
+ type: "input",
|
|
|
+ showInTable: true,
|
|
|
+ value: "",
|
|
|
+ width: "",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "最新执行时间",
|
|
|
+ fieldName: "runTime",
|
|
|
+ type: "input",
|
|
|
+ showInTable: true,
|
|
|
+ value: "",
|
|
|
+ width: "",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "事务执行",
|
|
|
+ fieldName: "runTime",
|
|
|
+ type: "input",
|
|
|
+ showInTable: true,
|
|
|
+ value: "",
|
|
|
+ width: "",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "错误数",
|
|
|
+ fieldName: "runTime",
|
|
|
+ type: "input",
|
|
|
+ showInTable: true,
|
|
|
+ value: "",
|
|
|
+ width: "",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "更新行数",
|
|
|
+ fieldName: "runTime",
|
|
|
+ type: "input",
|
|
|
+ showInTable: true,
|
|
|
+ value: "",
|
|
|
+ width: "",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "读取行数",
|
|
|
+ fieldName: "runTime",
|
|
|
+ type: "input",
|
|
|
+ showInTable: true,
|
|
|
+ value: "",
|
|
|
+ width: "",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "执行中",
|
|
|
+ fieldName: "runTime",
|
|
|
+ type: "input",
|
|
|
+ showInTable: true,
|
|
|
+ value: "",
|
|
|
+ width: "",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "最大并发数",
|
|
|
+ fieldName: "runTime",
|
|
|
+ type: "input",
|
|
|
+ showInTable: true,
|
|
|
+ value: "",
|
|
|
+ width: "",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "首次执行时间",
|
|
|
+ fieldName: "runTime",
|
|
|
+ type: "input",
|
|
|
+ showInTable: true,
|
|
|
+ value: "",
|
|
|
+ width: "",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ tableTotal: 0,
|
|
|
+ pageSize: 10,
|
|
|
+ currentPage: 1,
|
|
|
+ selectedRows: [], // 存储选中的行数据
|
|
|
+ searchForm: {},
|
|
|
+ treeSearchVal: "",
|
|
|
+ tableHeaderTitle: "项目列表",
|
|
|
+ tabs: [],
|
|
|
+ buttons: [
|
|
|
+ // {
|
|
|
+ // label: "导出",
|
|
|
+ // type: "primary",
|
|
|
+ // methodName: "action1",
|
|
|
+ // icon: "el-icon-upload",
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // label: "对账",
|
|
|
+ // type: "primary",
|
|
|
+ // methodName: "action2",
|
|
|
+ // icon: "el-icon-download",
|
|
|
+ // },
|
|
|
+ ],
|
|
|
+
|
|
|
+ headerFormData: [
|
|
|
+ {
|
|
|
+ label: "接入方式",
|
|
|
+ fieldName: "dataManner",
|
|
|
+ type: "input",
|
|
|
+ value: "",
|
|
|
+ placeholder: "请输入接入方式",
|
|
|
+ // isRequired: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ fieldName: "status",
|
|
|
+ label: "状态",
|
|
|
+ type: "select",
|
|
|
+ trigger: "change",
|
|
|
+ value: "",
|
|
|
+ isRequired: false,
|
|
|
+ options: [
|
|
|
+ { value: 1, label: "正常" },
|
|
|
+ { value: 0, label: "停用" },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ // {
|
|
|
+ // label: "用户状态",
|
|
|
+ // fieldName: "gender",
|
|
|
+ // type: "select",
|
|
|
+ // value: "",
|
|
|
+ // placeholder: "请选择用户状态",
|
|
|
+ // isRequired: true,
|
|
|
+ // options: [
|
|
|
+ // { label: "男", value: "male" },
|
|
|
+ // { label: "女", value: "female" },
|
|
|
+ // ],
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // label: "生日",
|
|
|
+ // fieldName: "birthdate",
|
|
|
+ // type: "date",
|
|
|
+ // value: "",
|
|
|
+ // placeholder: "请选择生日",
|
|
|
+ // isRequired: false,
|
|
|
+ // },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ // 头部搜索框
|
|
|
+ handleHeaderFormSubmit(form) {
|
|
|
+ this.searchForm = form;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ // 树结构点击
|
|
|
+ handleNodeClick() {},
|
|
|
+ // 列表头部
|
|
|
+ handleTabClick(tab) {
|
|
|
+ this.tabs.forEach((item) => {
|
|
|
+ if (item.label === tab.label) {
|
|
|
+ item.active = true;
|
|
|
+ } else {
|
|
|
+ item.active = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 列表头部功能按钮
|
|
|
+ handleButtonClick(methodName) {
|
|
|
+ console.log(methodName, "methodName");
|
|
|
+
|
|
|
+ switch (methodName) {
|
|
|
+ case "action1":
|
|
|
+ // 新增
|
|
|
+ this.rowObj = {};
|
|
|
+ this.title = "新增";
|
|
|
+ this.showDialog = true;
|
|
|
+ break;
|
|
|
+ case "action2":
|
|
|
+ // 导出
|
|
|
+ if (this.selectedRows.length > 0) {
|
|
|
+ // exportTabAccessConfig().then((res) => {
|
|
|
+ // if (+res.code === 200) {
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ let ids = [];
|
|
|
+ ids = this.selectedRows.map((item) => item.id);
|
|
|
+ this.download(
|
|
|
+ "/web/tab-access-config/export",
|
|
|
+ {
|
|
|
+ ids,
|
|
|
+ },
|
|
|
+ `统一接入配置_${new Date().getTime()}.xlsx`
|
|
|
+ );
|
|
|
+ } else {
|
|
|
+ this.$confirm("请选择列表项?", "提示", {
|
|
|
+ confirmButtonText: "关闭",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ showCancelButton: false,
|
|
|
+ showConfirmButton: false,
|
|
|
+ type: "warning",
|
|
|
+ center: true,
|
|
|
+ })
|
|
|
+ .then(() => {})
|
|
|
+ .catch(() => {});
|
|
|
+ }
|
|
|
+ break;
|
|
|
+
|
|
|
+ default:
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 处理选中项变化
|
|
|
+ handleSelectionChange(selectedRows) {
|
|
|
+ this.selectedRows = selectedRows; // 获取选中的行
|
|
|
+ },
|
|
|
+
|
|
|
+ getList() {
|
|
|
+ getTabAccessConfigList({
|
|
|
+ pageNum: this.currentPage,
|
|
|
+ pageSize: this.pageSize,
|
|
|
+ ...this.searchForm,
|
|
|
+ }).then((res) => {
|
|
|
+ if (+res.code === 200) {
|
|
|
+ this.tableData = res.rows;
|
|
|
+ this.tableTotal = +res.total;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 列表分页
|
|
|
+ pagi_changePage(page) {
|
|
|
+ this.currentPage = page;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ pagi_changeSize(size) {
|
|
|
+ this.pageSize = size;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+
|
|
|
+ // 弹窗
|
|
|
+ handleConfirm() {
|
|
|
+ this.dialogVisible = true;
|
|
|
+ },
|
|
|
+ handleClose() {
|
|
|
+ this.dialogVisible = false;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 编辑
|
|
|
+ handleView(row) {
|
|
|
+ this.rowObj = row;
|
|
|
+ this.title = "查看";
|
|
|
+ this.showDialog = true;
|
|
|
+ },
|
|
|
+ handleEdit(row) {
|
|
|
+ console.log(row, "row");
|
|
|
+ this.rowObj = row;
|
|
|
+ console.log(this.rowObj, "this.rowObj");
|
|
|
+
|
|
|
+ this.title = "编辑";
|
|
|
+ this.showDialog = true;
|
|
|
+ },
|
|
|
+
|
|
|
+ beforeClose() {
|
|
|
+ this.showDialog = false;
|
|
|
+ },
|
|
|
+
|
|
|
+ handleStart(row) {
|
|
|
+ let pForm = {};
|
|
|
+ pForm = { ...row };
|
|
|
+ pForm.status = 1;
|
|
|
+ updateTabAccessConfigById({ ...pForm }).then((res) => {
|
|
|
+ if (+res.code === 200) {
|
|
|
+ this.$message({
|
|
|
+ message: res.msg,
|
|
|
+ type: "success",
|
|
|
+ });
|
|
|
+ this.getList();
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.msg);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleStop(row) {
|
|
|
+ let pForm = {};
|
|
|
+ pForm = { ...row };
|
|
|
+ pForm.status = 0;
|
|
|
+ updateTabAccessConfigById({ ...pForm }).then((res) => {
|
|
|
+ if (+res.code === 200) {
|
|
|
+ this.$message({
|
|
|
+ message: res.msg,
|
|
|
+ type: "success",
|
|
|
+ });
|
|
|
+ this.getList();
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.msg);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleDelete(row) {
|
|
|
+ this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ center: true,
|
|
|
+ type: "warning",
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ delTabAccessConfigById(row.id).then((res) => {
|
|
|
+ if (+res.code === 200) {
|
|
|
+ this.$message({
|
|
|
+ message: res.msg,
|
|
|
+ type: "success",
|
|
|
+ });
|
|
|
+ this.getList();
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.msg);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: "info",
|
|
|
+ message: "已取消删除",
|
|
|
+ });
|
|
|
+ });
|
|
|
+ console.log(row, "row");
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created() {},
|
|
|
+ mounted() {
|
|
|
+ console.log("接入配置");
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.el-main {
|
|
|
+ padding: 0 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.el-icon-search {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #1e80e0;
|
|
|
+}
|
|
|
+
|
|
|
+.header-container {
|
|
|
+ padding: 20px 20px 0 0;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ // align-items: center;
|
|
|
+ line-height: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.header-title {
|
|
|
+ font-size: 20px;
|
|
|
+ width: 360px;
|
|
|
+ // margin-right: 40px;
|
|
|
+}
|
|
|
+
|
|
|
+.btn-box {
|
|
|
+ display: inline-block;
|
|
|
+}
|
|
|
+
|
|
|
+.header-form-detail-inline{
|
|
|
+ width: 100%
|
|
|
+}
|
|
|
+</style>
|
