添加管理系统基础页面

src/App.vue

@@ -7,14 +7,14 @@
 <style lang="scss">
 @import "./assets/css/index.scss";
 .app-page-wp {
-  position: relative;
-  display: flex;
-  min-height: 100%;
-  width: 100%;
-  .app-page-content {
-    box-sizing: border-box; /*为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制*/
-    min-height: 100%;
-    width: 100%;
-  }
+  // position: relative;
+  // display: flex;
+  // min-height: 100%;
+  // width: 100%;
+  // .app-page-content {
+  //   box-sizing: border-box; /*为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制*/
+  //   min-height: 100%;
+  //   width: 100%;
+  // }
 }
 </style>

src/assets/css/index.scss

@@ -1,3 +1,7 @@
+:root{
+  --color-theme: rgb(28, 175, 131);
+}
+
 * {
   padding: 0;
   margin: 0;

src/components/PageLayout/Header.vue

@@ -15,7 +15,6 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { ref } from "vue";
 </script>
 <style lang="scss" scoped>
 .header-wp {

src/components/PageLayout/Layout.vue

@@ -20,8 +20,7 @@
 <script lang="ts" setup>
 import Header from "./Header.vue";
 import Side from "./Side.vue";
-import Tag from "./tag.vue";
-import { ref } from "vue";
+import Tag from "./Tag.vue";
 </script>
 <style lang="scss" scoped>
 .layout-wp {
@@ -37,7 +36,9 @@ import { ref } from "vue";
   .layout-body {
     background-color: rgb(244, 246, 247);
     .layout-main {
+      padding: 20px;
       min-height: calc(100% - 51px);
+      box-sizing: border-box;
       .layout-content {
         width: 100%;
         height: 100%;

src/components/PageLayout/Side.vue

@@ -1,36 +1,52 @@
 <template>
   <div class="side-wp">
     <lay-menu class="menu-wp" v-model:selected-key="selectedKey" theme="light" v-model:openKeys="openKeys4" :tree="true">
-      <lay-menu-item id="1">
-        <template #title>
-          <lay-icon type="layui-icon-console" />
-          控制中心
-        </template>
-      </lay-menu-item>
-      <lay-sub-menu id="2">
-        <template #title>
-          <lay-icon type="layui-icon-set" />
-          系统管理
-        </template>
-        <lay-menu-item id="3">
-          <span class="child-menu">页面管理</span>
+      <template v-for="item in menu_list">
+        <lay-menu-item :id="item.path" v-if="item.childMenu.length == 0" @click="jumpPage(item.path)">
+          <template #title>
+            <lay-icon :type="item.icon" />
+            {{ item.name }}
+          </template>
         </lay-menu-item>
-        <lay-menu-item id="4">
-          <span class="child-menu">用户管理</span>
-        </lay-menu-item>
-        <lay-menu-item id="5">
-          <span class="child-menu">组织管理</span>
-        </lay-menu-item>
-      </lay-sub-menu>
+        <lay-sub-menu :id="item.path" v-else>
+          <template #title>
+            <lay-icon :type="item.icon" />
+            {{ item.name }}
+          </template>
+          <lay-menu-item :id="items.path" v-for="items in item.childMenu" @click="jumpPage(items.path)">
+            <span class="child-menu">{{ items.name }}</span>
+          </lay-menu-item>
+        </lay-sub-menu>
+      </template>
     </lay-menu>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from "vue";
+import { ref, reactive } from "vue";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+
+const menu_list = reactive([
+  { name: "控制中心", path: "/dashboard", icon: "layui-icon-console", childMenu: [] },
+  {
+    name: "系统管理",
+    path: "/system",
+    icon: "layui-icon-set",
+    childMenu: [
+      { name: "用户管理", path: "/system/user", icon: "layui-icon-set" },
+      { name: "页面管理", path: "/system/webpage", icon: "layui-icon-set" },
+      { name: "组织管理", path: "/system/organization", icon: "layui-icon-set" },
+    ],
+  },
+]);
+const openKeys4 = ref([]);
+const selectedKey = ref("/dashboard");
 
-const openKeys4 = ref(["2"]);
-const selectedKey = ref("1");
+const jumpPage = (path: string) => {
+  router.push(path);
+};
 </script>
 <style lang="scss" scoped>
 .side-wp {
@@ -49,7 +65,7 @@ const selectedKey = ref("1");
       position: relative;
       a {
         background-color: rgb(232, 252, 247) !important;
-        border-right: 2px solid rgb(28, 175, 131) !important;
+        border-right: 2px solid var(--color-theme) !important;
         &::after {
           content: "";
           position: absolute;
@@ -58,14 +74,14 @@ const selectedKey = ref("1");
           z-index: 1;
           transform: rotate(45deg) translateY(-50%);
           transform-origin: center;
-          border-top: 1px solid rgb(28, 175, 131) !important;
-          border-right: 1px solid rgb(28, 175, 131) !important;
+          border-top: 1px solid var(--color-theme) !important;
+          border-right: 1px solid var(--color-theme) !important;
           right: 20px;
           top: 50%;
         }
         span,
         i {
-          color: rgb(28, 175, 131) !important;
+          color: var(--color-theme) !important;
         }
       }
     }

src/components/PageLayout/Tag.vue

@@ -14,7 +14,6 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from "vue";
 </script>
 <style lang="scss" scoped>
 .tag-wp {

src/router/routes.ts

@@ -7,15 +7,14 @@ const routes: Array<RouteRecordRaw> = [
   },
   {
     path: "/",
-    name: "Dashboard",
+    name: "Layout",
     component: () => import("@/components/PageLayout/Layout.vue"),
-    meta: { title: "布局页面" },
     children: [
       {
         path: "/dashboard",
         name: "Dashboard",
         component: () => import("@/views/dashboard/index.vue"),
-        meta: { title: "仪表盘" },
+        meta: { title: "控制中心" },
       },
       {
         path: "/system/user",
@@ -27,13 +26,13 @@ const routes: Array<RouteRecordRaw> = [
         path: "/system/webpage",
         name: "SystemWebpage",
         component: () => import("@/views/system/webpage/index.vue"),
-        meta: { title: "用户管理" },
+        meta: { title: "页面管理" },
       },
       {
         path: "/system/organization",
         name: "SystemOrganization",
         component: () => import("@/views/system/organization/index.vue"),
-        meta: { title: "用户管理" },
+        meta: { title: "组织管理" },
       },
     ],
   },

src/views/404.vue

@@ -1,5 +1,35 @@
 <template>
-  <div>123123</div>
+  <div class="container-wp">
+    <div class="exception-wp">
+      <lay-exception status="404" title="404" describe="跳转页面失败">
+        <template #extra>
+          <lay-button type="primary" @click="onBack()">返回</lay-button>
+        </template>
+      </lay-exception>
+    </div>
+  </div>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { useRouter } from "vue-router";
+const router = useRouter();
+
+const onBack = () => {
+  router.go(-1);
+};
+</script>
+<style lang="scss" scoped>
+.container-wp {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  .exception-wp {
+    display: inline-block;
+    position: absolute;
+    width: 100%;
+    left: 0;
+    top: 40%;
+    transform: translateY(-50%);
+  }
+}
+</style>

src/views/dashboard/index.vue

@@ -1,16 +1,76 @@
 <template>
-  <div class="card-container">
-    <lay-card title="标题"> 内容 </lay-card>
-  </div>
+  <lay-card class="custom-card">
+    <template v-slot:title>
+      <span class="card-title">控制中心</span>
+    </template>
+
+    <template v-slot:body> </template>
+  </lay-card>
 </template>
 
-<script lang="ts" setup>
-import { ref } from "vue";
-</script>
+<script lang="ts" setup></script>
 
-<style>
-.card-container {
-  background: whitesmoke;
-  padding: 20px;
+<style lang="scss" scoped>
+.custom-card {
+  :deep(.layui-card-header) {
+    padding: 16px 24px;
+    height: auto;
+    line-height: normal;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  :deep(.card-title) {
+    position: relative;
+    font-size: 16px;
+    line-height: 20px;
+    font-weight: bold;
+    padding-left: 10px;
+    &::after {
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 4px;
+      height: 20px;
+      background-color: var(--color-theme);
+    }
+  }
+  :deep(.layui-card-header-extra) {
+    float: none;
+    height: auto;
+    line-height: normal;
+  }
+  :deep(.card-button) {
+    height: auto;
+    line-height: normal;
+    padding: 6px 16px;
+    border-radius: 4px;
+    border: 1px solid var(--color-theme);
+    color: var(--color-theme);
+    box-sizing: border-box;
+    &:hover {
+      background-color: var(--color-theme);
+      color: white;
+    }
+  }
+  :deep(.layui-card-body) {
+    padding: 16px 24px;
+  }
+  .form-layout-wp {
+    .form-wp {
+      :deep(.layui-form-item) {
+        padding-right: 10px;
+        .layui-form-label {
+          width: auto !important;
+        }
+      }
+      .form-button-wp {
+        vertical-align: top;
+        display: inline-block;
+      }
+    }
+  }
 }
 </style>

src/views/system/organization/index.vue

@@ -1,5 +1,114 @@
 <template>
-  <div></div>
+  <lay-card class="custom-card">
+    <template v-slot:title>
+      <span class="card-title">组织管理</span>
+    </template>
+    <template v-slot:extra>
+      <lay-button class="card-button">添加组织</lay-button>
+    </template>
+
+    <template v-slot:body>
+      <div class="form-layout-wp">
+        <lay-form class="form-wp" :model="params" mode="inline">
+          <lay-form-item label="组织名称" prop="username">
+            <lay-input v-model="params.username"></lay-input>
+          </lay-form-item>
+          <div class="form-button-wp">
+            <lay-button>搜索</lay-button>
+          </div>
+        </lay-form>
+      </div>
+      <div>
+        <lay-table :columns="columns"> </lay-table>
+      </div>
+    </template>
+  </lay-card>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { ref, reactive } from "vue";
+interface FormItem {
+  username?: String;
+}
+const params: FormItem = reactive({});
+
+const columns = ref([
+  { title: "组织名称", width: "80px", key: "username", sort: "desc" },
+  { title: "组织编码", width: "80px", key: "organization", sort: "desc" },
+  { title: "状态", width: "80px", key: "status", sort: "desc" },
+  { title: "备注", width: "80px", key: "remake" },
+  {
+    title: "操作",
+    width: "150px",
+    customSlot: "operator",
+    key: "operator",
+    fixed: "right",
+    ignoreExport: true,
+  },
+]);
+</script>
+
+<style lang="scss" scoped>
+.custom-card {
+  :deep(.layui-card-header) {
+    padding: 16px 24px;
+    height: auto;
+    line-height: normal;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  :deep(.card-title) {
+    position: relative;
+    font-size: 16px;
+    line-height: 20px;
+    font-weight: bold;
+    padding-left: 10px;
+    &::after {
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 4px;
+      height: 20px;
+      background-color: var(--color-theme);
+    }
+  }
+  :deep(.layui-card-header-extra) {
+    float: none;
+    height: auto;
+    line-height: normal;
+  }
+  :deep(.card-button) {
+    height: auto;
+    line-height: normal;
+    padding: 6px 16px;
+    border-radius: 4px;
+    border: 1px solid var(--color-theme);
+    color: var(--color-theme);
+    box-sizing: border-box;
+    &:hover {
+      background-color: var(--color-theme);
+      color: white;
+    }
+  }
+  :deep(.layui-card-body) {
+    padding: 16px 24px;
+  }
+  .form-layout-wp {
+    .form-wp {
+      :deep(.layui-form-item) {
+        padding-right: 10px;
+        .layui-form-label {
+          width: auto !important;
+        }
+      }
+      .form-button-wp {
+        vertical-align: top;
+        display: inline-block;
+      }
+    }
+  }
+}
+</style>

src/views/system/user/components/Update.vue

@@ -0,0 +1,47 @@
+<template>
+  <lay-layer v-model="visible" :shade="false" :area="['500px', '450px']" :btn="operator">
+    <div style="padding: 20px">
+      <lay-form :model="params" ref="layFormRef11" required>
+        <lay-form-item label="用户名" prop="username">
+          <lay-input v-model="params.username" />
+        </lay-form-item>
+        <lay-form-item label="组织" prop="organization">
+          <lay-input v-model="params.organization" type="password" />
+        </lay-form-item>
+        <lay-form-item label="备注" prop="desc">
+          <lay-textarea placeholder="请输入备注" v-model="params.desc" />
+        </lay-form-item>
+      </lay-form>
+    </div>
+  </lay-layer>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive } from "vue";
+interface ModelInfo {
+  visible: boolean;
+  isUpdate: boolean;
+}
+interface ModelParams {
+  username?: string;
+  organization?: string;
+  desc?: string;
+}
+const modelParams: ModelParams = reactive({});
+const modeInfo: ModelInfo = ref({ visible: false, isUpdate: false });
+
+const show = (params: ModelParams) => {
+  modeInfo.visible = true;
+};
+const operator = ref([
+  {
+    text: "确认",
+    callback: () => {},
+  },
+  {
+    text: "取消",
+    callback: () => {},
+  },
+]);
+defineExpose({ show });
+</script>

src/views/system/user/index.vue

@@ -1,5 +1,126 @@
 <template>
-  <div></div>
+  <lay-card class="custom-card">
+    <template v-slot:title>
+      <span class="card-title">用户管理</span>
+    </template>
+    <template v-slot:extra>
+      <lay-button class="card-button" @click="handleUpdate">添加用户</lay-button>
+    </template>
+
+    <template v-slot:body>
+      <div class="form-layout-wp">
+        <lay-form class="form-wp" :model="params" mode="inline">
+          <lay-form-item label="用户名" prop="username">
+            <lay-input v-model="params.username"></lay-input>
+          </lay-form-item>
+          <lay-form-item label="用户名" prop="username">
+            <lay-input v-model="params.username"></lay-input>
+          </lay-form-item>
+          <div class="form-button-wp">
+            <lay-button>搜索</lay-button>
+          </div>
+        </lay-form>
+      </div>
+      <div>
+        <lay-table :columns="columns"> </lay-table>
+      </div>
+    </template>
+    <Update ref="updateRef" />
+  </lay-card>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { ref, reactive } from "vue";
+import Update from "./components/Update.vue";
+
+let updateRef = ref();
+
+interface FormItem {
+  username?: String;
+}
+const params: FormItem = reactive({});
+
+const columns = ref([
+  { title: "用户名", width: "80px", key: "username", sort: "desc" },
+  { title: "组织", width: "80px", key: "organization", sort: "desc" },
+  { title: "状态", width: "80px", key: "status", sort: "desc" },
+  { title: "备注", width: "80px", key: "remake" },
+  {
+    title: "操作",
+    width: "150px",
+    customSlot: "operator",
+    key: "operator",
+    fixed: "right",
+    ignoreExport: true,
+  },
+]);
+
+const handleUpdate = () => {
+  updateRef.value.show();
+};
+</script>
+
+<style lang="scss" scoped>
+.custom-card {
+  :deep(.layui-card-header) {
+    padding: 16px 24px;
+    height: auto;
+    line-height: normal;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  :deep(.card-title) {
+    position: relative;
+    font-size: 16px;
+    line-height: 20px;
+    font-weight: bold;
+    padding-left: 10px;
+    &::after {
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 4px;
+      height: 20px;
+      background-color: var(--color-theme);
+    }
+  }
+  :deep(.layui-card-header-extra) {
+    float: none;
+    height: auto;
+    line-height: normal;
+  }
+  :deep(.card-button) {
+    height: auto;
+    line-height: normal;
+    padding: 6px 16px;
+    border-radius: 4px;
+    border: 1px solid var(--color-theme);
+    color: var(--color-theme);
+    box-sizing: border-box;
+    &:hover {
+      background-color: var(--color-theme);
+      color: white;
+    }
+  }
+  :deep(.layui-card-body) {
+    padding: 16px 24px;
+  }
+  .form-layout-wp {
+    .form-wp {
+      :deep(.layui-form-item) {
+        padding-right: 10px;
+        .layui-form-label {
+          width: auto !important;
+        }
+      }
+      .form-button-wp {
+        vertical-align: top;
+        display: inline-block;
+      }
+    }
+  }
+}
+</style>

src/views/system/webpage/index.vue

@@ -1,5 +1,97 @@
 <template>
-  <div></div>
+  <lay-card class="custom-card">
+    <template v-slot:title>
+      <span class="card-title">页面管理</span>
+    </template>
+    <template v-slot:extra>
+      <lay-button class="card-button">添加页面</lay-button>
+    </template>
+
+    <template v-slot:body>
+      <div>
+        <lay-table :columns="columns"> </lay-table>
+      </div>
+    </template>
+  </lay-card>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { ref } from "vue";
+
+const columns = ref([
+  { title: "页面名称", key: "username", sort: "desc" },
+  {
+    title: "操作",
+    width: "150px",
+    customSlot: "operator",
+    key: "operator",
+    fixed: "right",
+    ignoreExport: true,
+  },
+]);
+</script>
+
+<style lang="scss" scoped>
+.custom-card {
+  :deep(.layui-card-header) {
+    padding: 16px 24px;
+    height: auto;
+    line-height: normal;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  :deep(.card-title) {
+    position: relative;
+    font-size: 16px;
+    line-height: 20px;
+    font-weight: bold;
+    padding-left: 10px;
+    &::after {
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 4px;
+      height: 20px;
+      background-color: var(--color-theme);
+    }
+  }
+  :deep(.layui-card-header-extra) {
+    float: none;
+    height: auto;
+    line-height: normal;
+  }
+  :deep(.card-button) {
+    height: auto;
+    line-height: normal;
+    padding: 6px 16px;
+    border-radius: 4px;
+    border: 1px solid var(--color-theme);
+    color: var(--color-theme);
+    box-sizing: border-box;
+    &:hover {
+      background-color: var(--color-theme);
+      color: white;
+    }
+  }
+  :deep(.layui-card-body) {
+    padding: 16px 24px;
+  }
+  .form-layout-wp {
+    .form-wp {
+      :deep(.layui-form-item) {
+        padding-right: 10px;
+        .layui-form-label {
+          width: auto !important;
+        }
+      }
+      .form-button-wp {
+        vertical-align: top;
+        display: inline-block;
+      }
+    }
+  }
+}
+</style>