✨ feat:完成了应收款管理页面显示
This commit is contained in:
parent
855f64b21c
commit
51cabf8107
|
@ -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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
5
src/api/receivables-management/management.js
Normal file
5
src/api/receivables-management/management.js
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
export function APIReceivablesList() {
|
||||||
|
return request.get('/get-sdy-managment-list')
|
||||||
|
}
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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'
|
||||||
|
|
Loading…
Reference in New Issue
Block a user