feat:完成了应收款管理页面显示

This commit is contained in:
sundongyu 2024-04-06 19:00:30 +08:00
parent 855f64b21c
commit 51cabf8107
7 changed files with 193 additions and 35 deletions

View File

@ -1,10 +1,26 @@
import Mock from "mockjs" import Mock from "mockjs"
const data = Mock.mock({ const data = Mock.mock({
"items|10": [ "list|200": [
{ {
"id|+1": 1, "id|+1": 1,
"name": "@cname", "name": "@cname",
"studentnumber": "@integer(1000000000,9999999999)",
"department": `@pick(['机电工程系', '护理分院','建筑系','材料科学与工程系','环境科学与工程系'])`,
"major": `@pick(['机械制造与自动化', '材料科学与工程', '环境科学与工程', '建筑工程', '护理学'])`,
"grade": `@pick(['机制1班', '材料1班', '环境1班', '建筑1班','护理1班'])`,
"tuition": `@pick(['已付学费', '未缴学费'])`,
} }
] ]
}) })
export default [] export default [
{
url: '/get-sdy-managment-list',
method: 'get',
response: () => {
return {
code: 200,
data: data
}
}
}
]

View File

@ -0,0 +1,5 @@
import request from '@/utils/request'
export function APIReceivablesList() {
return request.get('/get-sdy-managment-list')
}

View File

@ -4,7 +4,7 @@
<t-content> <t-content>
<RouterView /> <RouterView />
</t-content> </t-content>
<t-footer>Footer</t-footer> <t-footer style="height: 2px">Footer</t-footer>
</t-layout> </t-layout>
</div> </div>
</template> </template>

View File

@ -11,41 +11,93 @@
> >
<t-row> <t-row>
<t-col :span="3"> <t-col :span="3">
<t-form-item label="部门" name="department"> <t-form-item label="姓名" name="name">
<t-tree-select :data="DEPARTMENT" clearable /> <t-input v-model="formData.name"></t-input>
</t-form-item>
</t-col>
<t-col :span="3">
<t-form-item label="学号" name="studentnumber">
<t-input v-model="formData.studentnumber"></t-input>
</t-form-item>
</t-col>
<t-col :span="3">
<t-form-item label="部门" name="studentnumber">
<t-tree-select
v-model="formData.department"
:data="DEPARTMENT"
clearable
/>
</t-form-item> </t-form-item>
</t-col> </t-col>
<t-col :span="3"> <t-col :span="3">
<t-form-item label="专业" name="major"> <t-form-item label="专业" name="major">
<t-tree-select :data="MAJOR" clearable /> <t-tree-select v-model="formData.major" :data="MAJOR" clearable />
</t-form-item>
</t-col>
<t-col :span="3">
<t-form-item label="班级" name="grade">
<t-tree-select :data="GRADE" clearable />
</t-form-item>
</t-col>
<t-col :span="3">
<t-form-item label="其他条件" name="condition">
<t-tree-select :data="CONDITION" clearable />
</t-form-item> </t-form-item>
</t-col> </t-col>
</t-row> </t-row>
<t-row> <t-row style="margin-top: 0.5rem">
<t-col :push="10" :span="2" style="margin-top: 1rem"> <t-col :span="3">
<t-button class="button">搜索</t-button> <t-form-item label="班级" name="grade">
<t-button>重置</t-button> <t-tree-select v-model="formData.grade" :data="GRADE" clearable />
</t-form-item>
</t-col>
<t-col :span="3">
<t-form-item label="其他条件" name="tuition">
<t-tree-select
v-model="formData.tuition"
:data="CONDITION"
clearable
/>
</t-form-item>
</t-col>
<t-col :push="4" :span="2" style="margin-top: 0.2rem">
<t-button type="submit" class="button">搜索</t-button>
<t-button type="reset">重置</t-button>
</t-col> </t-col>
</t-row> </t-row>
</t-form> </t-form>
</div> </div>
<div class="table">
<t-table
row-key="id"
:data="tableData"
:columns="columns"
:hover="true"
table-layout="auto"
:pagination="pagination"
:show-header="true"
cell-empty-content="-"
lazy-load
@row-click="handleRowClick"
:loading="loading"
>
<template #tuition="{ row }">
<t-tag v-if="row.tuition === '未缴学费'" theme="danger">{{
row.tuition
}}</t-tag>
<t-tag v-else theme="success">{{ row.tuition }}</t-tag>
</template>
</t-table>
</div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, reactive } from 'vue' import { ref, reactive, onMounted } from 'vue'
import {
ErrorCircleFilledIcon,
CheckCircleFilledIcon,
CloseCircleFilledIcon
} from 'tdesign-icons-vue-next'
import { APIReceivablesList } from '@/api/receivables-management/management'
// //
const formData = reactive({}) const formData = reactive({
name: '',
studentnumber: '',
department: '',
major: '',
grade: '',
tuition: ''
})
// //
const DEPARTMENT = [ const DEPARTMENT = [
{ {
@ -53,48 +105,134 @@ const DEPARTMENT = [
value: '机电工程系' value: '机电工程系'
}, },
{ {
label: '护理', label: '护理分院',
value: '护理' value: '护理分院'
}, },
{ {
label: '建筑系', label: '建筑系',
value: '建筑系' value: '建筑系'
},
{
label: '材料科学与工程系',
value: '材料科学与工程系'
},
{
label: '环境科学与工程系',
value: '环境科学与工程系'
} }
] ]
// //
const MAJOR = [ const MAJOR = [
{ {
label: '电子信息工程', label: '机械制造与自动化',
value: '电子信息工程' value: '机械制造与自动化'
},
{
label: '材料科学与工程',
value: '材料科学与工程'
},
{
label: '环境科学与工程',
value: '环境科学与工程'
},
{
label: '建筑工程',
value: '建筑工程'
},
{
label: '护理学',
value: '护理学'
} }
] ]
// //
const GRADE = [ const GRADE = [
{ {
label: '2019', label: '机制1班',
value: '2019' value: '机制1班'
},
{
label: '材料1班',
value: '材料1班'
},
{
label: '环境1班',
value: '环境1班'
},
{
label: '建筑1班',
value: '建筑1班'
},
{
label: '护理1班',
value: '护理1班'
} }
] ]
// //
const CONDITION = [ const CONDITION = [
{ {
label: '已缴费', label: '已付学费',
value: '已缴费' value: '已付学费'
},
{
label: '未缴学费',
value: '未缴学费'
} }
] ]
// //
const onSubmit = () => { const onSubmit = () => {
console.log(formData) console.log(formData)
} }
//
const onReset = () => {
console.log('重置成功')
}
//
const tableData = ref([])
//
const loading = ref(false)
//
const handleRowClick = e => {
console.log(e)
}
//
const columns = ref([
{ colKey: 'serial-number' },
{ colKey: 'name', title: '姓名' },
{ colKey: 'studentnumber', title: '学号' },
{ colKey: 'department', title: '部门' },
{ colKey: 'major', title: '专业' },
{ colKey: 'grade', title: '班级' },
{ colKey: 'tuition', title: '是否缴费' }
])
//
const pagination = {
defaultCurrent: 1,
defaultPageSize: 5,
total: 50
}
//
const ReceivablesList = async () => {
const res = await APIReceivablesList()
tableData.value = res.data.list
console.log(res.data.list)
console.log(tableData)
}
onMounted(() => {
ReceivablesList()
})
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.form { .form {
background-color: #fff; background-color: #fff;
height: 3rem; height: 6rem;
padding-top: 0.5rem; padding-top: 0.5rem;
} }
.button { .button {
margin-right: 1rem; margin-right: 1rem;
margin-left: 3rem; margin-left: 3rem;
} }
.table {
margin-top: 1rem;
}
</style> </style>

View File

@ -186,7 +186,7 @@ pre {
.back-color { .back-color {
background-color: #f5f7fb; background-color: #f5f7fb;
padding: 16px 24px; padding: 16px 24px;
height: calc(100vh - 128px); height: calc(94vh - 64px);
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
} }

View File

@ -26,7 +26,7 @@
.back-color { .back-color {
background-color: #f5f7fb; background-color: #f5f7fb;
padding: 16px 24px; padding: 16px 24px;
height: calc(95vh - 64px); height: calc(94vh - 64px);
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
} }

View File

@ -1,7 +1,6 @@
// 进行axios二次封装使用请求与响应拦截器 // 进行axios二次封装使用请求与响应拦截器
import axios from "axios"; import axios from "axios";
import { MessagePlugin } from "tdesign-vue-next"; import { MessagePlugin } from "tdesign-vue-next";
import { useRouter } from "vue-router";
// import { refreshToken } from '@/apis/token' // import { refreshToken } from '@/apis/token'
// import { useTokenStore } from '@/stores/index' // import { useTokenStore } from '@/stores/index'