up

src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <Router-view/>
+      <Router-view />
   </div>
 </template>
 

src/assets/base.css

@@ -5,4 +5,20 @@
 }
 body{
   background-color: #f6f8f9;
+}
+.crumbs{
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+}
+.crumbs span{
+  cursor: pointer;
+}
+.crumbs .active{
+  color: #b9412e;
+}
+.crumbs .title{
+  margin-left: 30px;
+  font-size: 24px;
+  font-weight: 700;
 }

src/router/index.js

@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
+import { Message } from 'element-ui'
 
 Vue.use(VueRouter)
 
@@ -15,12 +16,57 @@ const routes = [
     component: () => import('../views/Layout.vue'),
     redirect: { name: 'tab1' },
     children: [
+      // 项目
       {
         path: '/Layout/tab1',
         name: 'tab1',
         meta: { myInd: 1 },
         component: () => import('../views/Tab1/index.vue')
       },
+      {
+        path: '/Layout/tab2/:id/:p',
+        name: 'tab2',
+        meta: { myInd: 1 },
+        component: () => import('../views/Tab2/index.vue')
+      },
+      {
+        path: '/Layout/tab3/:id/:p/:n',
+        name: 'tab3',
+        meta: { myInd: 1 },
+        component: () => import('../views/Tab3/index.vue')
+      },
+      // 数据
+      {
+        path: '/Layout/tab4',
+        name: 'tab4',
+        meta: { myInd: 2 },
+        component: () => import('../views/Tab4/index.vue')
+      },
+      {
+        path: '/Layout/tab5/:id/:p',
+        name: 'tab5',
+        meta: { myInd: 2 },
+        component: () => import('../views/Tab5/index.vue')
+      },
+      {
+        path: '/Layout/tab6/:id/:p/:n',
+        name: 'tab6',
+        meta: { myInd: 2 },
+        component: () => import('../views/Tab6/index.vue')
+      },
+      {
+        path: '/Layout/tab6Add/:id',
+        name: 'tab6Add',
+        meta: { myInd: 2 },
+        component: () => import('../views/Tab6/add.vue')
+      },
+      // 白名单
+      {
+        path: '/Layout/tab7',
+        name: 'tab7',
+        meta: { myInd: 3 },
+        component: () => import('../views/Tab7/index.vue')
+      },
     ]
   },
 ]

src/utils/api.js

@@ -7,14 +7,54 @@ export const userLogin = (data) => {
     data
   })
 }
-// 获取表相关列表
-export const getBList = (data) => {
+// 获取项目列表
+export const getProjectList = (data) => {
+  return axios({
+    method: 'post',
+    url: '/db/project/list',
+    data
+  })
+}
+// 新增/编辑项目
+export const addProject = (data) => {
+  return axios({
+    method: 'post',
+    url: '/db/project/save',
+    data
+  })
+}
+// 删除项目
+export const delProject = (id) => {
+  return axios({
+    method: 'post',
+    url: `/db/project/remove/${id}`
+  })
+}
+// 通过id获取项目详情
+export const projectInfoById = (id) => {
+  return axios({
+    method: 'post',
+    url: `/db/project/detail//${id}`
+  })
+}
+
+// -----------------表相关
+// 获取表列表
+export const getTabletList = (data) => {
   return axios({
     method: 'post',
     url: '/db/table/getList',
     data
   })
 }
+// 删除表
+export const delTablet = (data) => {
+  return axios({
+    method: 'post',
+    url: '/db/table/removes',
+    data
+  })
+}
 // 新增表
 export const addTable = (data) => {
   return axios({
@@ -23,3 +63,72 @@ export const addTable = (data) => {
     data
   })
 }
+
+// -----------------字段相关
+//获取字段列表
+export const getFieldData = (data) => {
+  return axios({
+    method: 'post',
+    url: "/db/field/getList",
+    data
+  })
+}
+//添加表字段
+export const addField = (data) => {
+  return axios({
+    method: 'post',
+    url: "/db/field/add",
+    data
+  })
+}
+//删除字段
+export const delField = (data) => {
+  return axios({
+    method: 'post',
+    url: '/db/field/delField',
+    data
+  })
+}
+
+// 通过表id获取详细信息
+export const getInfoById = (tableId,data) => {
+  return axios({
+    method: 'post',
+    url: `/db/record/getFieldData/${tableId}`,
+    data
+  })
+}
+
+// 新增数据
+export const recordInsert = (data) => {
+  return axios({
+    method: 'post',
+    url: '/db/record/insert',
+    data
+  })
+}
+
+// 编辑数据
+export const recordUpdate = (data) => {
+  return axios({
+    method: 'post',
+    url: '/db/record/update',
+    data
+  })
+}
+
+// 根据id获取数据详情
+export const recordDetail = (tableId,id) => {
+  return axios({
+    method: 'get',
+    url: `/db/record/detail/${tableId}/${id}`,
+  })
+}
+
+// 删除数据
+export const recordDel = (tableId,ids) => {
+  return axios({
+    method: 'get',
+    url: `/db/record/del/${tableId}/${ids}`,
+  })
+}

src/views/Layout.vue

@@ -13,14 +13,26 @@
     </div>
     <div class="main">
       <div class="left">
+        <div class="title titleOne">内容管理</div>
         <div
           class="row"
+          @click="skip(item.path)"
           v-for="item in tabData"
           :key="item.id"
           :class="{ active: $route.meta.myInd === item.id }"
         >
           {{ item.name }}
         </div>
+        <div class="title">系统管理</div>
+        <div
+          class="row"
+          @click="skip(item.path)"
+          v-for="item in tabData2"
+          :key="item.id"
+          :class="{ active: $route.meta.myInd === item.id }"
+        >
+          {{ item.name }}
+        </div>
       </div>
       <div class="right">
         <Router-view />
@@ -39,14 +51,21 @@ export default {
       userName: "",
       tabData: [
         {
+          id: 2,
+          name: "数据",
+          path: "/Layout/tab4",
+        },
+      ],
+      tabData2: [
+        {
           id: 1,
-          name: "表相关",
+          name: "项目",
           path: "/Layout/tab1",
         },
         {
-          id: 2,
-          name: "...",
-          path: "",
+          id: 3,
+          name: "白名单",
+          path: "/Layout/tab7",
         },
       ],
     };
@@ -57,6 +76,9 @@ export default {
   watch: {},
   //方法集合
   methods: {
+    skip(path) {
+      this.$router.push(path).catch(() => {});
+    },
     outLogin() {
       this.$confirm("确定退出吗?", "提示", {
         confirmButtonText: "确定",
@@ -139,6 +161,17 @@ export default {
       margin-right: 30px;
       width: 220px;
       height: 100%;
+      .title {
+        height: 40px;
+        line-height: 40px;
+        font-weight: 700;
+        font-size: 24px;
+        text-align: center;
+        margin-top: 50px;
+      }
+      .titleOne {
+        margin-top: 0;
+      }
       .row {
         cursor: pointer;
         width: 100%;
@@ -150,7 +183,7 @@ export default {
         color: #b9412e;
       }
     }
-    .right{
+    .right {
       padding: 30px 20px 0;
       flex: 1;
       background-color: #fff;

src/views/Tab1/Dialog.vue

@@ -1,5 +1,9 @@
 <template>
-  <el-dialog title="新增表" :visible.sync="dialogVisible">
+  <el-dialog
+    :title="ruleForm.id ? '编辑项目' : '新增项目'"
+    :visible="dialogVisible"
+    @close="btnX"
+  >
     <el-form
       :model="ruleForm"
       :rules="rules"
@@ -7,11 +11,11 @@
       label-width="100px"
       class="demo-ruleForm"
     >
-      <el-form-item label="表名" prop="name">
-        <el-input v-model="ruleForm.name"></el-input>
+      <el-form-item label="项目名" prop="name">
+        <el-input v-model="ruleForm.name" maxlength="15" show-word-limit></el-input>
       </el-form-item>
       <el-form-item label="备注" prop="remark">
-        <el-input v-model="ruleForm.remark"></el-input>
+        <el-input v-model="ruleForm.remark" maxlength="30" show-word-limit></el-input>
       </el-form-item>
     </el-form>
     <span slot="footer" class="dialog-footer">
@@ -22,7 +26,7 @@
 </template>
 
 <script>
-import { addTable } from "@/utils/api";
+import { addProject, projectInfoById } from "@/utils/api";
 export default {
   name: "tab1Dialog",
   props: {
@@ -36,7 +40,7 @@ export default {
     //这里存放数据
     return {
       ruleForm: {
-        appId: 1,
+        id: null,
         name: "",
         remark: "",
       },
@@ -52,6 +56,11 @@ export default {
   watch: {},
   //方法集合
   methods: {
+    // 封装一个通过id获取详情，让父组件调用
+    async infoById(id) {
+      let res = await projectInfoById(id);
+      this.ruleForm = res.data;
+    },
     // 点击取消
     btnX() {
       this.$refs.ruleForm.resetFields();
@@ -60,10 +69,11 @@ export default {
     async btnOk() {
       try {
         await this.$refs.ruleForm.validate();
-        let res = await addTable(this.ruleForm);
+        let res = await addProject(this.ruleForm);
         if (res.code === 0) {
-          this.$emit('clickSon')
+          this.$emit("clickSon");
           this.btnX();
+          this.$message.success("操作成功");
         } else this.$message.warning(res.msg);
       } catch (error) {
         console.log(error);

src/views/Tab1/index.vue

@@ -5,48 +5,57 @@
         <el-input
           style="width: 380px"
           v-model="pageData.searchKey"
-          placeholder="请输入表名"
+          placeholder="请输入项目名"
         ></el-input>
         <el-button
           type="primary"
           icon="el-icon-search"
-          @click="getBList(pageData)"
+          @click="getProjectList(pageData)"
           >搜索</el-button
         >
       </div>
       <div class="right">
-        <el-button type="danger" :disabled="selecArr.length === 0"
+        <!-- <el-button type="danger" :disabled="selecArr.length === 0"
           >删除</el-button
-        >
+        > -->
         <el-button type="success" @click="dialogVisible = true"
-          >新增表</el-button
+          >新增项目</el-button
         >
       </div>
     </div>
     <div class="table">
-      <el-table
-        :data="tableData"
-        style="width: 100%"
-        @selection-change="selecChange"
-      >
-        <el-table-column type="selection" width="55"> </el-table-column>
+      <el-table :data="tableData" style="width: 100%">
+        <!-- @selection-change="selecChange" -->
+        <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
         <el-table-column label="序号" width="80">
           <template slot-scope="scope">
             {{ scope.$index + (pageData.pageNum - 1) * pageData.pageSize + 1 }}
           </template>
         </el-table-column>
-        <el-table-column prop="name" label="表名"> </el-table-column>
+        <el-table-column prop="name" label="项目名"> </el-table-column>
         <el-table-column prop="remark" label="备注"> </el-table-column>
         <el-table-column label="操作">
-          <el-button type="text">编辑</el-button>
-          <el-button type="text">字段</el-button>
+          <template #default="{ row }">
+            <el-button
+              type="text"
+              @click="$router.push(`/Layout/tab2/${row.id}/${row.name}`)"
+              >表相关</el-button
+            >
+            <el-button type="text" @click="editProject(row.id)">编辑</el-button>
+            <el-button
+              type="text"
+              style="color: #f56c6c"
+              @click="delProject(row.id)"
+              >删除</el-button
+            >
+          </template>
         </el-table-column>
       </el-table>
     </div>
     <!-- 分页器 -->
     <div class="paging">
       <el-pagination
-        :current-page='pageData.pageNum'
+        :current-page="pageData.pageNum"
         @current-change="currentChange"
         @size-change="sizeChange"
         layout="prev, pager, next,sizes,jumper"
@@ -56,15 +65,16 @@
     </div>
     <!-- 点击新增和编辑出现的弹窗 -->
     <Dialog
+      ref="projectRef"
       :dialogVisible.sync="dialogVisible"
-      @clickSon="getBList(pageData)"
+      @clickSon="getProjectList(pageData)"
     />
   </div>
 </template>
 
 <script>
 import Dialog from "./Dialog";
-import { getBList } from "@/utils/api";
+import { getProjectList, delProject } from "@/utils/api";
 export default {
   name: "tab1",
   components: { Dialog },
@@ -79,7 +89,7 @@ export default {
         pageSize: 10,
         searchKey: "",
       },
-      selecArr: [],
+      // selecArr: [],
     };
   },
   //监听属性 类似于data概念
@@ -88,29 +98,52 @@ export default {
   watch: {},
   //方法集合
   methods: {
+    // 点击编辑，调用子组件弹窗的方法
+    editProject(id) {
+      this.$refs.projectRef.infoById(id);
+      this.dialogVisible = true;
+    },
+    // 点击删除项目
+    async delProject(id) {
+      this.$confirm("确定删除吗?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(async () => {
+          let res = await delProject(id);
+          if (res.code === 0) {
+            this.$message.success("删除成功!");
+            this.getProjectList(this.pageData);
+          } else this.$message.warning(res.msg);
+        })
+        .catch(() => {
+          this.$message.info("已取消删除");
+        });
+    },
     // 分页器
     currentChange(val) {
-      this.pageData.pageNum=val
-      this.getBList(this.pageData);
+      this.pageData.pageNum = val;
+      this.getProjectList(this.pageData);
     },
     sizeChange(val) {
-      this.pageData.pageNum=1
-      this.pageData.pageSize=val
-      this.getBList(this.pageData);
-    },
-    selecChange(val) {
-      this.selecArr = val;
+      this.pageData.pageNum = 1;
+      this.pageData.pageSize = val;
+      this.getProjectList(this.pageData);
     },
+    // selecChange(val) {
+    //   this.selecArr = val;
+    // },
     // 封装一个获取表列表的方法
-    async getBList(data) {
-      let res = await getBList(data);
-      this.total=res.data.total
+    async getProjectList(data) {
+      let res = await getProjectList(data);
+      this.total = res.data.total;
       this.tableData = res.data.records;
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
-    this.getBList(this.pageData);
+    this.getProjectList(this.pageData);
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {},
@@ -140,11 +173,11 @@ export default {
   .table {
     /deep/.el-table__body-wrapper {
       width: 1570px;
-      height: 585px;
+      max-height: 585px;
       overflow-y: auto;
     }
   }
-  .paging{
+  .paging {
     position: absolute;
     right: 20px;
     bottom: 40px;

src/views/Tab2/Dialog.vue

@@ -0,0 +1,98 @@
+<template>
+  <el-dialog title="新增表" :visible="dialogVisible" @close="btnX">
+    <el-form
+      :model="ruleForm"
+      :rules="rules"
+      ref="ruleForm"
+      label-width="100px"
+      class="demo-ruleForm"
+    >
+      <el-form-item label="表名" prop="name">
+        <el-input v-model="ruleForm.name" maxlength="15" show-word-limit></el-input>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="ruleForm.remark" maxlength="30" show-word-limit></el-input>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="btnX">取 消</el-button>
+      <el-button type="primary" @click="btnOk">确 定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { addTable } from "@/utils/api";
+export default {
+  name: "tab1Dialog",
+  props: {
+    dialogVisible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      ruleForm: {
+        projectId: null,
+        name: "",
+        remark: "",
+      },
+      rules: {
+        name: [
+          { required: true, message: "不能为空", trigger: "blur" },
+          {
+            pattern: /^\w+$/,
+            message: "只能输入字母,下划线,数字",
+            trigger: "blur",
+          },
+        ],
+        remark: [{ required: true, message: "不能为空", trigger: "blur" }],
+      },
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    // 点击取消
+    btnX() {
+      this.$refs.ruleForm.resetFields();
+      this.$emit("update:dialogVisible", false);
+    },
+    async btnOk() {
+      try {
+        await this.$refs.ruleForm.validate();
+        let res = await addTable(this.ruleForm);
+        if (res.code === 0) {
+          this.$emit("clickSon");
+          this.btnX();
+          this.$message.success("操作成功");
+        } else this.$message.warning(res.msg);
+      } catch (error) {
+        console.log(error);
+      }
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.ruleForm.projectId = Number(this.$route.params.id);
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+//@import url(); 引入公共css类
+</style>

src/views/Tab2/index.vue

@@ -0,0 +1,196 @@
+    <template>
+  <div class="tab2">
+    <div class="crumbs">
+      <div>
+        <span @click="$router.push('/Layout/tab1')"
+          >项目 /</span
+        >
+        <span class="active"> 表 </span>
+      </div>
+      <div class="title">{{ $route.params.p }}</div>
+    </div>
+
+    <div class="search">
+      <div class="left">
+        <el-input
+          style="width: 380px"
+          v-model="pageData.searchKey"
+          placeholder="请输入表名"
+        ></el-input>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          @click="getTabletList(pageData)"
+          >搜索</el-button
+        >
+      </div>
+      <div class="right">
+        <el-button
+          type="danger"
+          :disabled="selecArr.length === 0"
+          @click="delTablet"
+          >删除表</el-button
+        >
+        <el-button type="success" @click="dialogVisible = true"
+          >新增表</el-button
+        >
+      </div>
+    </div>
+    <div class="table">
+      <el-table
+        :data="tableData"
+        style="width: 100%"
+        @selection-change="selecChange"
+      >
+        <el-table-column type="selection" width="55"> </el-table-column>
+        <el-table-column label="序号" width="80">
+          <template slot-scope="scope">
+            {{ scope.$index + (pageData.pageNum - 1) * pageData.pageSize + 1 }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="name" label="表名"> </el-table-column>
+        <el-table-column prop="remark" label="备注"> </el-table-column>
+        <el-table-column label="操作">
+          <template #default="{ row }">
+            <el-button
+              type="text"
+              @click="$router.push(`/Layout/tab3/${row.id}/${$route.params.p}/${row.name}`)"
+              >字段相关</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!-- 分页器 -->
+    <div class="paging">
+      <el-pagination
+        :current-page="pageData.pageNum"
+        @current-change="currentChange"
+        @size-change="sizeChange"
+        layout="prev, pager, next,sizes,jumper"
+        :total="total"
+      >
+      </el-pagination>
+    </div>
+    <!-- 点击新增和编辑出现的弹窗 -->
+    <Dialog
+      ref="projectRef"
+      :dialogVisible.sync="dialogVisible"
+      @clickSon="getTabletList(pageData)"
+    />
+  </div>
+</template>
+
+<script>
+import Dialog from "./Dialog";
+import { getTabletList, delTablet } from "@/utils/api";
+export default {
+  name: "tab2",
+  components: { Dialog },
+  data() {
+    //这里存放数据
+    return {
+      total: 0,
+      dialogVisible: false,
+      tableData: [],
+      pageData: {
+        pageNum: 1,
+        pageSize: 10,
+        searchKey: "",
+        projectId: null,
+      },
+      selecArr: [],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    // 点击删除项目
+    async delTablet() {
+      this.$confirm("确定删除吗?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(async () => {
+          let temp = [];
+          this.selecArr.forEach((v) => {
+            temp.push(v.id);
+          });
+          let res = await delTablet({ids:temp});
+          if (res.code === 0) {
+            this.$message.success("删除成功!");
+            this.getTabletList(this.pageData);
+          } else this.$message.warning(res.msg);
+        })
+        .catch(() => {
+          this.$message.info("已取消删除");
+        });
+    },
+    // 分页器
+    currentChange(val) {
+      this.pageData.pageNum = val;
+      this.getTabletList(this.pageData);
+    },
+    sizeChange(val) {
+      this.pageData.pageNum = 1;
+      this.pageData.pageSize = val;
+      this.getTabletList(this.pageData);
+    },
+    selecChange(val) {
+      this.selecArr = val;
+    },
+    // 封装一个获取表列表的方法
+    async getTabletList(data) {
+      let res = await getTabletList(data);
+      this.total = res.data.total;
+      this.tableData = res.data.records;
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.pageData.projectId = Number(this.$route.params.id);
+    this.getTabletList(this.pageData);
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.tab2 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  .search {
+    display: flex;
+    justify-content: space-between;
+    .left {
+      justify-content: space-between;
+      display: flex;
+      width: 500px;
+    }
+  }
+  .table {
+    /deep/.el-table__body-wrapper {
+      width: 1570px;
+      max-height: 585px;
+      overflow-y: auto;
+    }
+  }
+  .paging {
+    position: absolute;
+    right: 20px;
+    bottom: 40px;
+  }
+}
+</style>

src/views/Tab3/Dialog.vue

@@ -0,0 +1,156 @@
+<template>
+  <el-dialog title="新增字段" :visible="dialogVisible" @close="btnX">
+    <el-form
+      :model="ruleForm"
+      :rules="rules"
+      ref="ruleForm"
+      label-width="100px"
+      class="demo-ruleForm"
+    >
+      <el-form-item label="字段名" prop="name">
+        <el-input
+          v-model="ruleForm.name"
+          maxlength="15"
+          show-word-limit
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="ruleForm.remark"
+          maxlength="30"
+          show-word-limit
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="字段类型">
+        <el-select v-model="ruleForm.type" @change="valueChange">
+          <el-option label="varchar(字符串)" value="varchar"></el-option>
+          <el-option label="datetime(日期)" value="datetime"></el-option>
+          <el-option label="int(数字)" value="int"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="字段长度" prop="length">
+        <el-input
+          :disabled="ruleForm.type === 'datetime'"
+          @input="changeValue"
+          v-model="ruleForm.length"
+          maxlength="3"
+          show-word-limit
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="搜索字段">
+        <el-switch
+          active-color="#13ce66"
+          inactive-color="#ff4949"
+          :disabled="ruleForm.type !== 'varchar'"
+          v-model="ruleForm.isQuery"
+          :active-value="1"
+          :inactive-value="0"
+        >
+        </el-switch>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="btnX">取 消</el-button>
+      <el-button type="primary" @click="btnOk">确 定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { addField } from "@/utils/api";
+export default {
+  name: "tab1Dialog",
+  props: {
+    dialogVisible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      ruleForm: {
+        tableId: null,
+        name: "",
+        remark: "",
+        length: 512,
+        type: "varchar",
+        isQuery: 0,
+      },
+      rules: {
+        name: [
+          { required: true, message: "不能为空", trigger: "blur" },
+          {
+            pattern: /^\w+$/,
+            message: "只能输入字母,下划线,数字",
+            trigger: "blur",
+          },
+        ],
+        remark: [{ required: true, message: "不能为空", trigger: "blur" }],
+        length: [{ required: true, message: "不能为空", trigger: "blur" }],
+      },
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    valueChange(value) {
+      let temp = 0;
+      if (value === "varchar") temp = 512;
+      else if (value === "int") temp = 8;
+      this.ruleForm.length = temp;
+      if (value !== "varchar") this.ruleForm.isQuery = 0;
+    },
+    changeValue(value) {
+      this.ruleForm.length = /^[0-9]*$/.test(parseInt(value))
+        ? String(parseInt(value)).replace(".", "")
+        : "";
+      if (this.ruleForm.type === "int") {
+        if (Number(value) > 8) this.ruleForm.length = 8;
+      }
+      if (this.ruleForm.type === "varchar") {
+        if (Number(value) > 512) this.ruleForm.length = 512;
+      }
+    },
+    // 点击取消
+    btnX() {
+      this.$refs.ruleForm.resetFields();
+      this.$emit("update:dialogVisible", false);
+    },
+    async btnOk() {
+      try {
+        await this.$refs.ruleForm.validate();
+        let obj = { ...this.ruleForm, length: Number(this.ruleForm.length) };
+        let res = await addField([obj]);
+        if (res.code === 0) {
+          this.$emit("clickSon");
+          this.btnX();
+          this.$message.success("操作成功");
+        } else this.$message.warning(res.msg);
+      } catch (error) {
+        console.log(error);
+      }
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.ruleForm.tableId = Number(this.$route.params.id);
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+//@import url(); 引入公共css类
+</style>

src/views/Tab3/index.vue

@@ -0,0 +1,196 @@
+    <template>
+  <div class="tab3">
+    <div class="crumbs">
+      <div>
+        <span @click="$router.push('/Layout/tab1')">项目 /</span>
+        <span @click="$router.go(-1)"> 表 /</span>
+        <span class="active"> 字段</span>
+      </div>
+      <div class="title">{{ $route.params.p }} / {{ $route.params.n }}</div>
+    </div>
+
+    <div class="search">
+      <div class="left">
+        <el-input
+          style="width: 380px"
+          v-model="pageData.searchKey"
+          placeholder="请输入字段名"
+        ></el-input>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          @click="getFieldData(pageData)"
+          >搜索</el-button
+        >
+      </div>
+      <div class="right">
+        <el-button
+          type="danger"
+          :disabled="selecArr.length === 0"
+          @click="delField"
+          >删除字段</el-button
+        >
+        <el-button type="success" @click="dialogVisible = true"
+          >新增字段</el-button
+        >
+      </div>
+    </div>
+    <div class="table">
+      <el-table
+        :data="tableData"
+        style="width: 100%"
+        @selection-change="selecChange"
+      >
+        <el-table-column type="selection" width="55"> </el-table-column>
+        <el-table-column label="序号" width="80">
+          <template slot-scope="scope">
+            {{ scope.$index + (pageData.pageNum - 1) * pageData.pageSize + 1 }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="name" label="字段名"> </el-table-column>
+        <el-table-column prop="remark" label="备注"> </el-table-column>
+        <el-table-column prop="type" label="字段类型"> </el-table-column>
+        <el-table-column prop="length" label="字段长度"> </el-table-column>
+        <el-table-column prop="isQuery" label="搜索字段"> </el-table-column>
+      </el-table>
+    </div>
+    <!-- 分页器 -->
+    <div class="paging">
+      <el-pagination
+        :current-page="pageData.pageNum"
+        @current-change="currentChange"
+        @size-change="sizeChange"
+        layout="prev, pager, next,sizes,jumper"
+        :total="total"
+      >
+      </el-pagination>
+    </div>
+    <!-- 点击新增和编辑出现的弹窗 -->
+    <Dialog
+      ref="projectRef"
+      :dialogVisible.sync="dialogVisible"
+      @clickSon="getFieldData(pageData)"
+    />
+  </div>
+</template>
+
+<script>
+import Dialog from "./Dialog";
+import { getFieldData, delField } from "@/utils/api";
+export default {
+  name: "tab3",
+  components: { Dialog },
+  data() {
+    //这里存放数据
+    return {
+      total: 0,
+      dialogVisible: false,
+      tableData: [],
+      pageData: {
+        tableId: null,
+        pageNum: 1,
+        pageSize: 10,
+        searchKey: "",
+      },
+      selecArr: [],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    // 点击删除项目
+    async delField() {
+      this.$confirm("确定删除吗?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(async () => {
+          let temp = [];
+          this.selecArr.forEach((v) => {
+            temp.push(v.id);
+          });
+          let res = await delField({ ids: temp });
+          if (res.code === 0) {
+            this.$message.success("删除成功!");
+            this.getFieldData(this.pageData);
+          } else this.$message.warning(res.msg);
+        })
+        .catch(() => {
+          this.$message.info("已取消删除");
+        });
+    },
+    // 分页器
+    currentChange(val) {
+      this.pageData.pageNum = val;
+      this.getFieldData(this.pageData);
+    },
+    sizeChange(val) {
+      this.pageData.pageNum = 1;
+      this.pageData.pageSize = val;
+      this.getFieldData(this.pageData);
+    },
+    selecChange(val) {
+      this.selecArr = val;
+    },
+    // 封装一个获取表列表的方法
+    async getFieldData(data) {
+      let res = await getFieldData(data);
+      this.total = res.data.total;
+      this.tableData = res.data.records;
+      this.tableData.forEach((v) => {
+        if (v.isQuery == 1) v.isQuery = "开启";
+        else v.isQuery = "关闭";
+        if (v.type == "varchar") v.type = "varchar(字符串)";
+        else if (v.type == "datetime") v.type = "datetime(日期)";
+        else if (v.type == "int") v.type = "int(数字)";
+      });
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.pageData.tableId = Number(this.$route.params.id);
+    this.getFieldData(this.pageData);
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.tab3 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  .search {
+    display: flex;
+    justify-content: space-between;
+    .left {
+      justify-content: space-between;
+      display: flex;
+      width: 500px;
+    }
+  }
+  .table {
+    /deep/.el-table__body-wrapper {
+      width: 1570px;
+      max-height: 585px;
+      overflow-y: auto;
+    }
+  }
+  .paging {
+    position: absolute;
+    right: 20px;
+    bottom: 40px;
+  }
+}
+</style>

src/views/Tab4/index.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="tab4">
+    <div class="search">
+      <div class="left">
+        <el-input
+          style="width: 380px"
+          v-model="pageData.searchKey"
+          placeholder="请输入项目名"
+        ></el-input>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          @click="getProjectList(pageData)"
+          >搜索</el-button
+        >
+      </div>
+    </div>
+    <div class="table">
+      <el-table :data="tableData" style="width: 100%">
+        <el-table-column label="序号" width="80">
+          <template slot-scope="scope">
+            {{ scope.$index + (pageData.pageNum - 1) * pageData.pageSize + 1 }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="name" label="项目名"> </el-table-column>
+        <el-table-column prop="remark" label="备注"> </el-table-column>
+        <el-table-column label="操作">
+          <template #default="{ row }">
+            <el-button
+              type="text"
+              @click="$router.push(`/Layout/tab5/${row.id}/${row.name}`)"
+              >表数据</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!-- 分页器 -->
+    <div class="paging">
+      <el-pagination
+        :current-page="pageData.pageNum"
+        @current-change="currentChange"
+        @size-change="sizeChange"
+        layout="prev, pager, next,sizes,jumper"
+        :total="total"
+      >
+      </el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getProjectList } from "@/utils/api";
+export default {
+  name: "tab4",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      total: 0,
+      tableData: [],
+      pageData: {
+        pageNum: 1,
+        pageSize: 10,
+        searchKey: "",
+      },
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    // 分页器
+    currentChange(val) {
+      this.pageData.pageNum = val;
+      this.getProjectList(this.pageData);
+    },
+    sizeChange(val) {
+      this.pageData.pageNum = 1;
+      this.pageData.pageSize = val;
+      this.getProjectList(this.pageData);
+    },
+    // 封装一个获取表列表的方法
+    async getProjectList(data) {
+      let res = await getProjectList(data);
+      this.total = res.data.total;
+      this.tableData = res.data.records;
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.getProjectList(this.pageData);
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.tab4 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  .search {
+    display: flex;
+    justify-content: space-between;
+    .left {
+      justify-content: space-between;
+      display: flex;
+      width: 500px;
+    }
+  }
+  .table {
+    /deep/.el-table__body-wrapper {
+      width: 1570px;
+      max-height: 585px;
+      overflow-y: auto;
+    }
+  }
+  .paging {
+    position: absolute;
+    right: 20px;
+    bottom: 40px;
+  }
+}
+</style>

src/views/Tab5/index.vue

@@ -0,0 +1,149 @@
+    <template>
+  <div class="tab5">
+    <div class="crumbs">
+      <div>
+        <span @click="$router.push('/Layout/tab4')"
+          >数据 /</span
+        >
+        <span class="active"> 表 </span>
+      </div>
+      <div class="title">{{ $route.params.p }}</div>
+    </div>
+
+    <div class="search">
+      <div class="left">
+        <el-input
+          style="width: 380px"
+          v-model="pageData.searchKey"
+          placeholder="请输入表名"
+        ></el-input>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          @click="getTabletList(pageData)"
+          >搜索</el-button
+        >
+      </div>
+    </div>
+    <div class="table">
+      <el-table
+        :data="tableData"
+        style="width: 100%"
+      >
+        <el-table-column label="序号" width="80">
+          <template slot-scope="scope">
+            {{ scope.$index + (pageData.pageNum - 1) * pageData.pageSize + 1 }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="name" label="表名"> </el-table-column>
+        <el-table-column prop="remark" label="备注"> </el-table-column>
+        <el-table-column label="操作">
+          <template #default="{ row }">
+            <el-button
+              type="text"
+              @click="$router.push(`/Layout/tab6/${row.id}/${$route.params.p}/${row.name}`)"
+              >字段数据</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!-- 分页器 -->
+    <div class="paging">
+      <el-pagination
+        :current-page="pageData.pageNum"
+        @current-change="currentChange"
+        @size-change="sizeChange"
+        layout="prev, pager, next,sizes,jumper"
+        :total="total"
+      >
+      </el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getTabletList } from "@/utils/api";
+export default {
+  name: "tab5",
+  components: {  },
+  data() {
+    //这里存放数据
+    return {
+      total: 0,
+      tableData: [],
+      pageData: {
+        pageNum: 1,
+        pageSize: 10,
+        searchKey: "",
+        projectId: null,
+      },
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    // 分页器
+    currentChange(val) {
+      this.pageData.pageNum = val;
+      this.getTabletList(this.pageData);
+    },
+    sizeChange(val) {
+      this.pageData.pageNum = 1;
+      this.pageData.pageSize = val;
+      this.getTabletList(this.pageData);
+    },
+    // 封装一个获取表列表的方法
+    async getTabletList(data) {
+      let res = await getTabletList(data);
+      this.total = res.data.total;
+      this.tableData = res.data.records;
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.pageData.projectId = Number(this.$route.params.id);
+    this.getTabletList(this.pageData);
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.tab5 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  .search {
+    display: flex;
+    justify-content: space-between;
+    .left {
+      justify-content: space-between;
+      display: flex;
+      width: 500px;
+    }
+  }
+  .table {
+    /deep/.el-table__body-wrapper {
+      width: 1570px;
+      max-height: 585px;
+      overflow-y: auto;
+    }
+  }
+  .paging {
+    position: absolute;
+    right: 20px;
+    bottom: 40px;
+  }
+}
+</style>

src/views/Tab6/add.vue

@@ -0,0 +1,184 @@
+<!--  -->
+<template>
+  <div class="tab6Add">
+    <i class="el-icon-arrow-left" title="返回" @click="$router.go(-1)"></i>
+    <div class="title">数据{{ ruleForm.id ? "编辑" : "新增" }}</div>
+    <div class="from">
+      <div class="row" v-for="item in data" :key="item.name">
+        <div>{{ item.remark }}：</div>
+        <el-input
+          v-if="item.type === 'varchar'"
+          v-model="ruleForm[item.name]"
+          :maxlength="item.length"
+          show-word-limit
+        ></el-input>
+        <el-input
+          @input="changeInput(item.name)"
+          v-else-if="item.type === 'int'"
+          v-model="ruleForm[item.name]"
+          :maxlength="item.length"
+          show-word-limit
+        ></el-input>
+        <el-date-picker
+          format="yyyy 年 MM 月 dd 日"
+          value-format="yyyy-MM-dd"
+          v-else-if="item.type === 'datetime'"
+          v-model="ruleForm[item.name]"
+          type="date"
+          placeholder="选择日期"
+        >
+        </el-date-picker>
+      </div>
+    </div>
+    <!-- 底部按钮 -->
+    <div class="btn">
+      <el-button @click="$router.go(-1)">返 回</el-button>
+      <el-button type="primary" @click="save">保 存</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  getInfoById,
+  recordInsert,
+  recordDetail,
+  recordUpdate,
+} from "@/utils/api";
+export default {
+  name: "tab6Add",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      tableId: null,
+      ruleForm: {},
+      data: [],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    // 点击保存
+    async save() {
+      if (this.ruleForm.id) {
+        // 是编辑
+        let res = await recordUpdate({
+          id: this.ruleForm.id,
+          record: this.ruleForm,
+          tableId: this.tableId,
+        });
+        if (res.code === 0) {
+          this.$message.success("新增成功");
+          this.$router.go(-1);
+        } else this.$message.warning(res.msg);
+      } else {
+        let res = await recordInsert({
+          record: this.ruleForm,
+          tableId: this.tableId,
+        });
+        if (res.code === 0) {
+          this.$message.success("新增成功");
+          this.$router.go(-1);
+        } else this.$message.warning(res.msg);
+      }
+    },
+    //数字类型只能输入正整数
+    changeInput(val) {
+      let pattern = /^[1-9][0-9]*$/; //正整数的正则表达式
+      //不符合正整数时
+      if (!pattern.test(this.ruleForm[val])) {
+        //input框绑定的内容非数字的全部置为空
+        this.ruleForm[val] = this.ruleForm[val].replace(/[^\d]/g, "");
+      }
+      this.ruleForm[val] = Number(this.ruleForm[val]);
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  async mounted() {
+    // 表格id
+    let id = Number(this.$route.params.id);
+    this.tableId = id;
+
+    // 数据id，用来编辑
+    let k = this.$route.query.k;
+    if (k) {
+      // 如果是编辑
+      k = Number(k);
+      let res1 = await recordDetail(id, k);
+      this.ruleForm = res1.data;
+    }
+    let res = await getInfoById(id, {
+      pageNum: 1,
+      pageSize: 1,
+    });
+    let temp = res.data.fieldNames;
+    this.data = temp.filter((v) => {
+      return v.name !== "id" && v.name !== "update_time";
+    });
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.tab6Add {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  /deep/.el-input__inner {
+    padding-right: 70px;
+  }
+  /deep/.el-icon-arrow-left {
+    position: absolute;
+    left: 10px;
+    top: 0;
+    font-size: 30px;
+    display: block;
+    cursor: pointer;
+  }
+  .title {
+    font-weight: 700;
+    padding-left: 60px;
+    height: 30px;
+    line-height: 30px;
+  }
+  .from {
+    height: 650px;
+    overflow-y: auto;
+    width: 1200px;
+    margin: 20px 0 0 100px;
+    .row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 10px;
+      & > div {
+        width: calc(100% - 910px);
+        text-align: right;
+      }
+      /deep/.el-input {
+        width: 900px;
+      }
+    }
+  }
+  .btn {
+    width: 160px;
+    height: 40px;
+    position: absolute;
+    bottom: 40px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+</style>

src/views/Tab6/index.vue

@@ -0,0 +1,224 @@
+    <template>
+  <div class="tab6">
+    <div class="crumbs">
+      <div>
+        <span @click="$router.push('/Layout/tab1')">数据 /</span>
+        <span @click="$router.go(-1)"> 表 /</span>
+        <span class="active"> 字段</span>
+      </div>
+      <div class="title">{{ $route.params.p }} / {{ $route.params.n }}</div>
+    </div>
+
+    <div class="search">
+      <div class="left">
+        <el-input
+          style="width: 380px"
+          v-model="pageData.searchKey"
+          placeholder="请输入字段名"
+        ></el-input>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          @click="getInfoById(pageData)"
+          >搜索</el-button
+        >
+      </div>
+      <div class="right">
+        <el-button
+          type="danger"
+          :disabled="selecArr.length === 0"
+          @click="recordDel"
+          >删除数据</el-button
+        >
+        <el-button type="success" @click="addData">新增数据</el-button>
+      </div>
+    </div>
+    <div class="table">
+      <el-table
+        :data="tableData"
+        style="width: 100%"
+        @selection-change="selecChange"
+      >
+        <el-table-column type="selection" width="55" fixed> </el-table-column>
+        <el-table-column label="序号" width="80" fixed>
+          <template slot-scope="scope">
+            {{ scope.$index + (pageData.pageNum - 1) * pageData.pageSize + 1 }}
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="80" fixed>
+          <template #default="{ row }">
+            <el-button type="text" @click="editData(row.id)">编辑</el-button>
+          </template>
+        </el-table-column>
+        <el-table-column
+          width="200"
+          v-for="item in tableHead"
+          :key="item.name"
+          :label="`${item.remark}(${item.type})`"
+        >
+          <template #default="{ row }">
+            <span class="tabTxt" :title="row[item.name]">{{
+              row[item.name] ? row[item.name] : "-"
+            }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!-- 分页器 -->
+    <div class="paging">
+      <el-pagination
+        :current-page="pageData.pageNum"
+        @current-change="currentChange"
+        @size-change="sizeChange"
+        layout="prev, pager, next,sizes,jumper"
+        :total="total"
+      >
+      </el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getInfoById, recordDel } from "@/utils/api";
+export default {
+  name: "tab6",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      selecArr: [],
+      total: 0,
+      tableData: [],
+      tableId: null,
+      pageData: {
+        pageNum: 1,
+        pageSize: 10,
+        searchKey: "",
+      },
+      // 表头相关数据
+      tableHead: [],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    // 点击新增数据
+    addData() {
+      this.$router.push(`/Layout/tab6Add/${this.tableId}`);
+    },
+    // 点击编辑
+    editData(id) {
+      this.$router.push(`/Layout/tab6Add/${this.tableId}?k=${id}`);
+    },
+    selecChange(val) {
+      this.selecArr = val;
+    },
+    // 点击删除项目
+    async recordDel() {
+      this.$confirm("确定删除吗?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(async () => {
+          let temp = [];
+          this.selecArr.forEach((v) => {
+            temp.push(v.id);
+          });
+          let res = await recordDel(this.tableId, temp.join(","));
+          if (res.code === 0) {
+            this.$message.success("删除成功!");
+            this.getInfoById(this.pageData);
+          } else this.$message.warning(res.msg);
+        })
+        .catch(() => {
+          this.$message.info("已取消删除");
+        });
+    },
+    // 分页器
+    currentChange(val) {
+      this.pageData.pageNum = val;
+      this.getInfoById(this.pageData);
+    },
+    sizeChange(val) {
+      this.pageData.pageNum = 1;
+      this.pageData.pageSize = val;
+      this.getInfoById(this.pageData);
+    },
+
+    // 封装一个获取表列表的方法
+    async getInfoById(data) {
+      let res = await getInfoById(this.tableId, data);
+      this.total = res.data.fieldData.records.total;
+      this.tableData = res.data.fieldData.records;
+
+      this.tableHead = res.data.fieldNames;
+      this.tableHead.forEach((v) => {
+        if (v.type === "datetime") {
+          this.tableData.forEach((c) => {
+            if (c[v.name]) c[v.name] = c[v.name].substring(0, 10);
+          });
+        }
+
+        if (v.type == "varchar") v.type = "字符串";
+        else if (v.type == "date" || v.type == "datetime") v.type = "日期";
+        else if (v.type == "int") v.type = "数字";
+      });
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  async created() {
+    this.tableId = Number(this.$route.params.id);
+    this.getInfoById(this.pageData);
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.tab6 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  .search {
+    display: flex;
+    justify-content: space-between;
+    .left {
+      justify-content: space-between;
+      display: flex;
+      width: 500px;
+    }
+  }
+  .table {
+    width: 1570px;
+    overflow-x: auto;
+    /deep/.el-table__body-wrapper {
+      width: 1570px;
+      height: 540px;
+      overflow-y: auto;
+    }
+    .tabTxt {
+      cursor: pointer;
+      width: 200px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+  .paging {
+    position: absolute;
+    right: 20px;
+    bottom: 40px;
+  }
+}
+</style>

src/views/Tab7/index.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="tab7">
+    <div class="search">
+      <div class="left">
+        <el-input
+          style="width: 380px"
+          v-model="pageData.searchKey"
+          placeholder="请输入项目名"
+        ></el-input>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          @click="getProjectList(pageData)"
+          >搜索</el-button
+        >
+      </div>
+    </div>
+    <div class="table">
+      <el-table :data="tableData" style="width: 100%">
+        <el-table-column label="序号" width="80">
+          <template slot-scope="scope">
+            {{ scope.$index + (pageData.pageNum - 1) * pageData.pageSize + 1 }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="name" label="项目名"> </el-table-column>
+        <el-table-column prop="remark" label="备注"> </el-table-column>
+        <el-table-column label="操作">
+          <template #default="{ row }">
+            <el-button
+              type="text"
+              @click="$router.push(`/Layout/tab5/${row.id}/${row.name}`)"
+              >表数据</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!-- 分页器 -->
+    <div class="paging">
+      <el-pagination
+        :current-page="pageData.pageNum"
+        @current-change="currentChange"
+        @size-change="sizeChange"
+        layout="prev, pager, next,sizes,jumper"
+        :total="total"
+      >
+      </el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getProjectList } from "@/utils/api";
+export default {
+  name: "tab7",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      total: 0,
+      tableData: [],
+      pageData: {
+        pageNum: 1,
+        pageSize: 10,
+        searchKey: "",
+      },
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    // 分页器
+    currentChange(val) {
+      this.pageData.pageNum = val;
+      this.getProjectList(this.pageData);
+    },
+    sizeChange(val) {
+      this.pageData.pageNum = 1;
+      this.pageData.pageSize = val;
+      this.getProjectList(this.pageData);
+    },
+    // 封装一个获取表列表的方法
+    async getProjectList(data) {
+      let res = await getProjectList(data);
+      this.total = res.data.total;
+      this.tableData = res.data.records;
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.getProjectList(this.pageData);
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.tab7 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  .search {
+    display: flex;
+    justify-content: space-between;
+    .left {
+      justify-content: space-between;
+      display: flex;
+      width: 500px;
+    }
+  }
+  .table {
+    /deep/.el-table__body-wrapper {
+      width: 1570px;
+      max-height: 585px;
+      overflow-y: auto;
+    }
+  }
+  .paging {
+    position: absolute;
+    right: 20px;
+    bottom: 40px;
+  }
+}
+</style>