feat:初步完成了应收页面

This commit is contained in:
sundongyu 2024-04-06 14:17:20 +08:00
parent 5b66b7a60f
commit 5213fce8ff
5 changed files with 120 additions and 48 deletions

View File

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

View File

@ -10,7 +10,7 @@
:labelWidth="80" :labelWidth="80"
class="login-form" class="login-form"
> >
<h2 class="login-title">登录</h2> <h2 class="login-title">登录</h2>
<t-form-item name="account"> <t-form-item name="account">
<t-input <t-input
clearable clearable
@ -39,31 +39,31 @@
</template> </template>
<script setup> <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"; // import { DesktopIcon, LockOnIcon } from "tdesign-icons-vue";
const INITIAL_DATA = { const INITIAL_DATA = {
account: "", account: '',
password: "", password: ''
}; }
const formData = reactive({ const formData = reactive({
...INITIAL_DATA, ...INITIAL_DATA
}); })
const onReset = () => { const onReset = () => {
MessagePlugin.success("重置成功"); MessagePlugin.success('重置成功')
}; }
const onSubmit = ({ validateResult, firstError }) => { const onSubmit = ({ validateResult, firstError }) => {
if (validateResult === true) { if (validateResult === true) {
MessagePlugin.success("提交成功"); MessagePlugin.success('提交成功')
} else { } else {
console.log("Errors: ", validateResult); console.log('Errors: ', validateResult)
MessagePlugin.warning(firstError); MessagePlugin.warning(firstError)
} }
}; }
</script> </script>
<style lang="scss" scoped> <style lang="less" scoped>
.login-container { .login-container {
position: absolute; position: absolute;
width: 100%; width: 100%;
@ -73,16 +73,16 @@ const onSubmit = ({ validateResult, firstError }) => {
overflow: hidden; overflow: hidden;
} }
.login-form { .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 { .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>

View File

@ -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>

View File

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

View File

@ -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;