✨ feat:初步完成了应收页面

src/pages/index.vue

@@ -1,7 +0,0 @@
-<template>
-  <div>111111111111111</div>
-</template>
-
-<script setup lang="ts"></script>
-
-<style scoped lang="less"></style>

src/pages/login/index.vue

@@ -10,7 +10,7 @@
         :labelWidth="80"
         class="login-form"
       >
-      <h2 class="login-title">登录</h2>
+        <h2 class="login-title">登录</h2>
         <t-form-item name="account">
           <t-input
             clearable
@@ -39,31 +39,31 @@
 </template>
 
 <script setup>
-import { MessagePlugin } from "tdesign-vue-next";
+import { MessagePlugin } from 'tdesign-vue-next'
-import { reactive } from "vue";
+import { reactive } from 'vue'
 // import { DesktopIcon, LockOnIcon } from "tdesign-icons-vue";
 
 const INITIAL_DATA = {
-  account: "",
+  account: '',
-  password: "",
+  password: ''
-};
+}
 const formData = reactive({
-  ...INITIAL_DATA,
+  ...INITIAL_DATA
-});
+})
 const onReset = () => {
-  MessagePlugin.success("重置成功");
+  MessagePlugin.success('重置成功')
-};
+}
 const onSubmit = ({ validateResult, firstError }) => {
   if (validateResult === true) {
-    MessagePlugin.success("提交成功");
+    MessagePlugin.success('提交成功')
   } else {
-    console.log("Errors: ", validateResult);
+    console.log('Errors: ', validateResult)
-    MessagePlugin.warning(firstError);
+    MessagePlugin.warning(firstError)
   }
-};
+}
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .login-container {
   position: absolute;
   width: 100%;
@@ -73,16 +73,16 @@ const onSubmit = ({ validateResult, firstError }) => {
   overflow: hidden;
 }
 .login-form {
-    width:450px;
+  width: 450px;
-    margin:200px;
+  margin: 200px;
-    background-color:rgba(255,255,255,0.8);
+  background-color: rgba(255, 255, 255, 0.8);
-    padding:80px;
+  padding: 80px;
-    border-radius:20px;
+  border-radius: 20px;
 }
 .login-title {
-    text-align:center;
+  text-align: center;
-    font-size:24px;
+  font-size: 24px;
-    margin-bottom:40px;
+  margin-bottom: 40px;
-    color:#333
+  color: #333;
 }
-</style>
+</style>

src/pages/receivables-management/account-receivable.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="back-color">
+    <div class="form">
+      <t-form
+        ref="form"
+        :data="formData"
+        reset-type="initial"
+        colon
+        @reset="onReset"
+        @submit="onSubmit"
+      >
+        <t-row>
+          <t-col :span="2">
+            <t-form-item label="部门" name="department">
+              <t-tree-select :data="DEPARTMENT" clearable />
+            </t-form-item>
+          </t-col>
+          <t-col :span="2">
+            <t-form-item label="专业" name="major">
+              <t-tree-select clearable />
+            </t-form-item>
+          </t-col>
+          <t-col :span="2">
+            <t-form-item label="班级" name="grade">
+              <t-tree-select clearable />
+            </t-form-item>
+          </t-col>
+          <t-col :span="2">
+            <t-form-item label="其他条件" name="condition">
+              <t-tree-select clearable />
+            </t-form-item>
+          </t-col>
+          <t-col :push="2" :span="2">
+            <t-button class="button">搜索</t-button>
+            <t-button>重置</t-button>
+          </t-col>
+        </t-row>
+      </t-form>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+//表单数据
+const formData = reactive({})
+//部门数据
+const DEPARTMENT = [
+  {
+    label: '财务部',
+    value: '财务部',
+    children: [
+      {
+        label: '会计',
+        value: '会计'
+      }
+    ]
+  }
+]
+</script>
+<style scoped lang="less">
+.form {
+  background-color: #fff;
+  height: 3rem;
+  padding-top: 0.5rem;
+}
+.button {
+  margin-right: 2rem;
+}
+</style>

src/router/index.js

@@ -1,33 +1,20 @@
 import { createRouter, createWebHistory } from "vue-router";
 import FinanceBillManage from "./modules/financeBillManage";
+import ReceivablesManagement from "./modules/receivables-management";
 import Login from "@/pages/login/index.vue";
 
 import Layout from "@/layout/index.vue";
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
-    {
+
-      path: "/",
-      redirect: "/accounts",
-      meta: { title: "应收款管理", name: "accounts" },
-      component: Layout,
-      children: [
-        {
-          path: "/accounts",
-          name: "Accounts",
-          component: () => import("@/pages/index.vue"),
-          meta: {
-            title: "应收款管理",
-          },
-        },
-      ],
-    },
     {
       path: "/login",
       name: "login",
       component: Login,
     },
     ...FinanceBillManage,
+    ...ReceivablesManagement
   ],
 });
 

src/router/modules/receivables-management.js

@@ -0,0 +1,22 @@
+import Layout from "@/layout/index.vue";
+
+const ReceivablesManagement = [
+  {
+    path: "/",
+    redirect: "/accounts",
+    meta: { title: "应收款管理", name: "accounts" },
+    component: Layout,
+    children: [
+      {
+        path: "/accounts",
+        name: "Accounts",
+        component: () => import("@/pages/receivables-management/account-receivable.vue"),
+        meta: {
+          title: "应收款管理",
+        },
+      },
+    ],
+  },
+];
+
+export default ReceivablesManagement;