Merge branch 'dev' of https://gitea.dykj.co/sundongyu/dykj-college-back-office-management-system into dev
This commit is contained in:
吕才卓
commit
351232b4be
|
|
@ -1,10 +1,61 @@
|
|||
import Mock from "mockjs"
|
||||
const data = Mock.mock({
|
||||
"items|10": [
|
||||
"list|200": [
|
||||
{
|
||||
"id|+1": 1,
|
||||
"id|+1": '1',
|
||||
"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
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
url: '/post-sdy-managment-find',
|
||||
method: 'post',
|
||||
response: (req) => {
|
||||
if (req.body.name !== '') {
|
||||
return data.list.filter(item => item.name.includes(req.body.name))
|
||||
}
|
||||
else if (req.body.studentnumber !== '') {
|
||||
const studentnumber = Number(req.body.studentnumber)
|
||||
if (!isNaN(studentnumber)) {
|
||||
return data.list.filter(item => item.studentnumber === studentnumber)
|
||||
} else {
|
||||
return {
|
||||
code: 400,
|
||||
message: 'Invalid student number format'
|
||||
}
|
||||
}
|
||||
}
|
||||
else if (req.body.department !== '') {
|
||||
return data.list.filter(item => item.department.includes(req.body.department))
|
||||
}
|
||||
else if (req.body.major !== '') {
|
||||
return data.list.filter(item => item.major.includes(req.body.major))
|
||||
}
|
||||
else if (req.body.grade !== '') {
|
||||
return data.list.filter(item => item.grade.includes(req.body.grade))
|
||||
}
|
||||
else if (req.body.tuition !== '') {
|
||||
return data.list.filter(item => item.tuition.includes(req.body.tuition))
|
||||
}
|
||||
return {
|
||||
code: 200,
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
|
|
@ -3,8 +3,8 @@ const StockList = Mock.mock({
|
|||
"list|20-30": [
|
||||
{
|
||||
"id|+1": "0",
|
||||
billserial: "@integer(10000000000,19999999999)",
|
||||
billType: "@integer(0,5)",
|
||||
billserial: "@integer(100000000,199999999)1",
|
||||
billType: "@integer(0,4)",
|
||||
stockNum: "@integer(1,2)",
|
||||
unit: "@cword(张本,1)",
|
||||
stockDate: "@date",
|
||||
|
|
@ -19,12 +19,9 @@ export default [
|
|||
url: "/api/stockList",
|
||||
method: "get",
|
||||
response: () => {
|
||||
const obj = {
|
||||
list: StockList,
|
||||
};
|
||||
return {
|
||||
code: 200,
|
||||
data: obj,
|
||||
data: StockList,
|
||||
};
|
||||
},
|
||||
},
|
||||
|
|
|
|||
1220
package-lock.json
generated
1220
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
|
|
@ -13,6 +13,7 @@
|
|||
"less": "^4.2.0",
|
||||
"mockjs": "^1.1.0",
|
||||
"pinia": "^2.1.7",
|
||||
"pinia-plugin-persistedstate": "^3.2.1",
|
||||
"tdesign-vue-next": "^1.9.3",
|
||||
"vite-plugin-mock": "^3.0.1",
|
||||
"vue": "^3.4.21",
|
||||
|
|
|
|||
8
src/api/receivables-management/management.js
Normal file
8
src/api/receivables-management/management.js
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
export function APIReceivablesList() {
|
||||
return request.get('/get-sdy-managment-list')
|
||||
}
|
||||
export function APIReceivablesAdd(data) {
|
||||
return request.post('/post-sdy-managment-find', data)
|
||||
}
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
<t-content>
|
||||
<RouterView />
|
||||
</t-content>
|
||||
<t-footer>Footer</t-footer>
|
||||
<t-footer style="height: 2px">Footer</t-footer>
|
||||
</t-layout>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
23
src/main.js
23
src/main.js
|
|
@ -1,16 +1,19 @@
|
|||
import './style/index.css'
|
||||
import "./style/index.css";
|
||||
|
||||
import { createApp } from 'vue'
|
||||
import { createPinia } from 'pinia'
|
||||
import TDesign from 'tdesign-vue-next';
|
||||
import { createApp } from "vue";
|
||||
import { createPinia } from "pinia";
|
||||
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
|
||||
import TDesign from "tdesign-vue-next";
|
||||
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import App from "./App.vue";
|
||||
import router from "./router";
|
||||
|
||||
const app = createApp(App)
|
||||
const app = createApp(App);
|
||||
|
||||
app.use(createPinia())
|
||||
app.use(router)
|
||||
const pinia = createPinia();
|
||||
pinia.use(piniaPluginPersistedstate);
|
||||
app.use(pinia);
|
||||
app.use(router);
|
||||
app.use(TDesign);
|
||||
|
||||
app.mount('#app')
|
||||
app.mount("#app");
|
||||
|
|
|
|||
|
|
@ -5,83 +5,278 @@
|
|||
ref="form"
|
||||
:data="formData"
|
||||
label-width="calc(2em + 40px)"
|
||||
:layout="formData.layout"
|
||||
layout="inline"
|
||||
scroll-to-first-error="smooth"
|
||||
class="scarch-from"
|
||||
@reset="resetting"
|
||||
@submit="headerQuery"
|
||||
>
|
||||
<div style="margin-left: 1rem">
|
||||
<t-form-item label="票据编号:" name="name">
|
||||
<t-input v-model="formData.name"></t-input>
|
||||
<t-form-item label="票据编号:" name="billserial">
|
||||
<t-input v-model="formData.billserial" maxlength="10"></t-input>
|
||||
</t-form-item>
|
||||
|
||||
<t-form-item label="入库日期:" name="password">
|
||||
<t-input v-model="formData.password"></t-input>
|
||||
<t-form-item label="入库日期:" name="stockDate">
|
||||
<t-date-picker v-model="formData.stockDate" clearable />
|
||||
</t-form-item>
|
||||
<t-form-item label="票据类型:" name="billType">
|
||||
<t-select
|
||||
v-model="formData.billType"
|
||||
placeholder="请选择票据类型"
|
||||
clearable
|
||||
>
|
||||
<t-option
|
||||
v-for="item in billType"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
></t-option>
|
||||
</t-select>
|
||||
</t-form-item>
|
||||
</div>
|
||||
<t-form-item>
|
||||
<t-button theme="primary" @click="onSubmit">查询</t-button>
|
||||
<t-button theme="primary" @click="onReset">重置</t-button>
|
||||
<t-form-item style="margin-right: 1rem">
|
||||
<t-button theme="primary" type="submit">查询</t-button>
|
||||
<t-button theme="primary" type="reset">重置</t-button>
|
||||
</t-form-item>
|
||||
</t-form>
|
||||
</div>
|
||||
<div class="table-box">
|
||||
<div class="table-header">
|
||||
<div>
|
||||
<h4 style="font-size: 110%">票据列表</h4>
|
||||
</div>
|
||||
<div>
|
||||
<t-button theme="primary" size="small" @click="addStock">
|
||||
<template #icon><add-icon /></template>
|
||||
新增票据
|
||||
</t-button>
|
||||
<t-button
|
||||
shape="circle"
|
||||
theme="primary"
|
||||
@click="refresh"
|
||||
style="margin-left: 0.8rem"
|
||||
>
|
||||
<template #icon><load-icon /></template>
|
||||
</t-button>
|
||||
</div>
|
||||
</div>
|
||||
<t-base-table
|
||||
hover
|
||||
row-key="index"
|
||||
:loading="loading"
|
||||
:data="tableData"
|
||||
:columns="columns"
|
||||
></t-base-table>
|
||||
:pagination="pagination"
|
||||
class="table"
|
||||
:max-height="650"
|
||||
>
|
||||
<template #billType="{ row }">
|
||||
<div v-for="item in billType" :key="item">
|
||||
<span v-if="row.billType === item.value">{{ item.label }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #status="slotProps">
|
||||
<t-button
|
||||
theme="default"
|
||||
variant="text"
|
||||
size="small"
|
||||
@click="stockEdit(slotProps)"
|
||||
>修改</t-button
|
||||
>
|
||||
<t-button
|
||||
theme="default"
|
||||
variant="text"
|
||||
size="small"
|
||||
@click="stockDelete(slotProps)"
|
||||
>删除</t-button
|
||||
>
|
||||
</template>
|
||||
</t-base-table>
|
||||
</div>
|
||||
<t-space>
|
||||
<t-dialog
|
||||
ref="postForm"
|
||||
v-model:visible="visiblePost"
|
||||
header="新增职位"
|
||||
width="40%"
|
||||
:confirm-on-enter="true"
|
||||
:on-close="closePost"
|
||||
:confirm-btn="null"
|
||||
:cancel-btn="null"
|
||||
>
|
||||
<t-space direction="vertical" style="width: 100%">
|
||||
<div>
|
||||
<t-form
|
||||
ref="formDialog"
|
||||
scroll-to-first-error="smooth"
|
||||
label-align="left"
|
||||
:rules="FORM_RULES"
|
||||
:data="dialogData"
|
||||
:colon="true"
|
||||
@submit="stockAdd"
|
||||
label-width="calc(2em + 55px)"
|
||||
layout="inline"
|
||||
@reset="onReset"
|
||||
>
|
||||
<t-form-item
|
||||
label="票据编号"
|
||||
name="billserial"
|
||||
:span="10"
|
||||
style="margin-bottom: 0.5rem"
|
||||
>
|
||||
<t-input
|
||||
v-model="dialogData.billserial"
|
||||
placeholder="请输入票据编号"
|
||||
></t-input>
|
||||
</t-form-item>
|
||||
<t-form-item
|
||||
label="票据类型"
|
||||
name="billType"
|
||||
:span="12"
|
||||
style="width: 16rem; margin-bottom: 0.5rem"
|
||||
>
|
||||
<t-select
|
||||
v-model="dialogData.billType"
|
||||
clearable
|
||||
placeholder="请选择票据类型"
|
||||
>
|
||||
<t-option
|
||||
v-for="item in billType"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</t-select>
|
||||
</t-form-item>
|
||||
<t-form-item
|
||||
label="入库数量"
|
||||
name="stockNum"
|
||||
:span="12"
|
||||
style="margin-bottom: 0.5rem"
|
||||
>
|
||||
<t-input
|
||||
type="number"
|
||||
v-model="dialogData.stockNum"
|
||||
placeholder="请输入内容"
|
||||
></t-input>
|
||||
</t-form-item>
|
||||
<t-form-item
|
||||
label="入库单位"
|
||||
name="unit"
|
||||
:span="10"
|
||||
style="margin-bottom: 0.5rem"
|
||||
>
|
||||
<t-input
|
||||
v-model="dialogData.unit"
|
||||
placeholder="请输入入库单位"
|
||||
></t-input>
|
||||
</t-form-item>
|
||||
<t-form-item
|
||||
label="入库时间"
|
||||
name="unit"
|
||||
:span="10"
|
||||
style="width: 16rem; margin-bottom: 0.5rem"
|
||||
>
|
||||
<t-date-picker
|
||||
v-model="dialogData.stockDate"
|
||||
placeholder="请选择入库时间"
|
||||
clearable
|
||||
/>
|
||||
</t-form-item>
|
||||
<t-form-item
|
||||
label="操作员"
|
||||
name="unit"
|
||||
:span="10"
|
||||
style="margin-bottom: 0.5rem"
|
||||
>
|
||||
<t-input
|
||||
v-model="dialogData.operator"
|
||||
placeholder="请输入操作员"
|
||||
></t-input>
|
||||
</t-form-item>
|
||||
<t-form-item label="备注" name="remark" style="width: 33.6rem">
|
||||
<t-textarea
|
||||
v-model="dialogData.remark"
|
||||
placeholder="请输入备注"
|
||||
></t-textarea>
|
||||
</t-form-item>
|
||||
<t-form-item>
|
||||
<t-space size="small">
|
||||
<t-button theme="primary" type="submit">提交</t-button>
|
||||
<t-button theme="default" variant="base" type="reset"
|
||||
>重置</t-button
|
||||
>
|
||||
</t-space>
|
||||
</t-form-item>
|
||||
</t-form>
|
||||
</div>
|
||||
</t-space>
|
||||
</t-dialog>
|
||||
</t-space>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref, onMounted } from "vue";
|
||||
import { MessagePlugin } from "tdesign-vue-next";
|
||||
import { AddIcon, LoadIcon } from "tdesign-icons-vue-next";
|
||||
import { reqStockList } from "@/api/stockList";
|
||||
import { useStock } from "@/stores/billStock";
|
||||
|
||||
// 数据
|
||||
const loading = ref(false);
|
||||
const visiblePost = ref(false);
|
||||
const stockList = useStock();
|
||||
const tableData = ref();
|
||||
const data = ref();
|
||||
// 表格表头
|
||||
const columns = ref([
|
||||
{
|
||||
colKey: "serial-number",
|
||||
title: "序号",
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
colKey: "billserial",
|
||||
title: "票据编号",
|
||||
colkey: "billserial",
|
||||
align: "center",
|
||||
width: 100,
|
||||
width: "100",
|
||||
},
|
||||
{
|
||||
colKey: "billType",
|
||||
title: "票据类型",
|
||||
colkey: "billType",
|
||||
align: "center",
|
||||
width: 100,
|
||||
width: "100",
|
||||
},
|
||||
{
|
||||
colKey: "stockNum",
|
||||
title: "入库数量",
|
||||
colkey: "stockNum",
|
||||
align: "center",
|
||||
width: 100,
|
||||
width: "100",
|
||||
},
|
||||
{
|
||||
colKey: "unit",
|
||||
title: "单位（如：本、张）",
|
||||
colkey: "unit",
|
||||
align: "center",
|
||||
width: 100,
|
||||
width: "100",
|
||||
},
|
||||
{
|
||||
colKey: "stockDate",
|
||||
title: "入库日期",
|
||||
colkey: "stockDate",
|
||||
align: "center",
|
||||
width: 100,
|
||||
width: "100",
|
||||
},
|
||||
{
|
||||
colKey: "operator",
|
||||
title: "操作员",
|
||||
colkey: "operator",
|
||||
align: "center",
|
||||
width: 100,
|
||||
width: "100",
|
||||
},
|
||||
{
|
||||
colKey: "remark",
|
||||
title: "备注",
|
||||
colkey: "remark",
|
||||
align: "center",
|
||||
width: 100,
|
||||
width: "100",
|
||||
},
|
||||
{
|
||||
colKey: "status",
|
||||
|
|
@ -92,27 +287,177 @@ const columns = ref([
|
|||
},
|
||||
]);
|
||||
|
||||
const formData = reactive({
|
||||
layout: "inline",
|
||||
name: "",
|
||||
password: "",
|
||||
});
|
||||
// 票据类型
|
||||
const billType = ref([
|
||||
{ label: "票据类型1", value: 0 },
|
||||
{ label: "票据类型2", value: 1 },
|
||||
{ label: "票据类型3", value: 2 },
|
||||
{ label: "票据类型4", value: 3 },
|
||||
{ label: "票据类型5", value: 4 },
|
||||
]);
|
||||
|
||||
const onReset = () => {
|
||||
MessagePlugin.success("重置成功");
|
||||
// 获取票据列表
|
||||
const tableList = async () => {
|
||||
loading.value = true;
|
||||
tableData.value = await stockList.getStockList();
|
||||
data.value = await stockList.getStockList();
|
||||
pagination.value.total = tableData.value.length;
|
||||
const timerId = setTimeout(() => {
|
||||
loading.value = false;
|
||||
clearInterval(timerId);
|
||||
}, 300);
|
||||
};
|
||||
|
||||
const onSubmit = ({ validateResult, firstError }) => {
|
||||
// 刷新列表
|
||||
const refresh = () => {
|
||||
tableList();
|
||||
};
|
||||
|
||||
// 弹出框表单
|
||||
const dialogData = ref({
|
||||
billserial: "",
|
||||
stockNum: Number,
|
||||
unit: "",
|
||||
operator: "",
|
||||
remark: "",
|
||||
stockDate: "",
|
||||
});
|
||||
|
||||
// 查询表单
|
||||
const formData = ref({
|
||||
billserial: "",
|
||||
billType: "",
|
||||
stockDate: "",
|
||||
});
|
||||
|
||||
// 分页
|
||||
const pagination = ref({
|
||||
defaultCurrent: 1,
|
||||
defaultPageSize: 10,
|
||||
total: 50,
|
||||
});
|
||||
|
||||
// 查询表单重置
|
||||
const resetting = () => {
|
||||
formData.value = {
|
||||
billserial: "",
|
||||
billType: "",
|
||||
stockDate: "",
|
||||
};
|
||||
tableList();
|
||||
};
|
||||
|
||||
// 查询
|
||||
const headerQuery = () => {
|
||||
tableData.value = data.value;
|
||||
if (
|
||||
formData.value.billserial === "" &&
|
||||
(formData.value.billType === undefined || formData.value.billType === "") &&
|
||||
formData.value.stockDate === ""
|
||||
) {
|
||||
tableList();
|
||||
} else {
|
||||
const list = tableData.value.filter((item) => {
|
||||
console.log(item);
|
||||
let arrList;
|
||||
if (formData.value.billserial === item.billserial) {
|
||||
arrList = item;
|
||||
}
|
||||
if (formData.value.billType === item.billType) {
|
||||
arrList = item;
|
||||
}
|
||||
if (formData.value.stockDate === item.stockDate) {
|
||||
arrList = item;
|
||||
}
|
||||
if (
|
||||
formData.value.billserial === "" &&
|
||||
formData.value.billType === "" &&
|
||||
formData.value.stockDate === ""
|
||||
) {
|
||||
arrList = item;
|
||||
}
|
||||
return arrList;
|
||||
});
|
||||
tableData.value = list;
|
||||
// @ts-expect-error
|
||||
pagination.value.total = list.length;
|
||||
}
|
||||
};
|
||||
// 打开窗口
|
||||
const addStock = () => {
|
||||
visiblePost.value = true;
|
||||
dialogData.value = {
|
||||
billserial: "",
|
||||
stockNum: "",
|
||||
unit: "",
|
||||
operator: "",
|
||||
remark: "",
|
||||
stockDate: "",
|
||||
};
|
||||
};
|
||||
|
||||
// 关闭窗口
|
||||
const closePost = () => {
|
||||
visiblePost.value = false;
|
||||
};
|
||||
// 表单校验
|
||||
const FORM_RULES = {
|
||||
billserial: [{ required: true, message: "请输入票据编号", trigger: "blur" }],
|
||||
billType: [
|
||||
{ required: true, message: "请选择票据类型", trigger: ["blur", "change"] },
|
||||
],
|
||||
stockNum: [{ required: true, message: "请输入库存数量", trigger: "blur" }],
|
||||
unit: [{ required: true, message: "请输入单位", trigger: "blur" }],
|
||||
stockDate: [
|
||||
{ required: true, message: "请选择入库日期", trigger: ["blur", "change"] },
|
||||
],
|
||||
operator: [{ required: true, message: "请输入操作员", trigger: "blur" }],
|
||||
};
|
||||
|
||||
// 新增
|
||||
const stockAdd = async ({ validateResult, firstError }) => {
|
||||
if (validateResult === true) {
|
||||
await stockList.addStockList(dialogData.value);
|
||||
getNewTable();
|
||||
MessagePlugin.success("提交成功");
|
||||
visiblePost.value = false;
|
||||
} else {
|
||||
console.log("Validate Errors: ", firstError, validateResult);
|
||||
MessagePlugin.warning(firstError);
|
||||
}
|
||||
};
|
||||
|
||||
// 修改
|
||||
const stockEdit = (item) => {
|
||||
visiblePost.value = true;
|
||||
tableData.value.forEach((itemTable) => {
|
||||
if (itemTable.id === item.row.id) {
|
||||
dialogData.value = itemTable;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 删除
|
||||
const stockDelete = async (itme) => {
|
||||
await stockList.deleteStockList(itme.row);
|
||||
getNewTable();
|
||||
};
|
||||
|
||||
// 弹出框表单重置
|
||||
const onReset = () => {};
|
||||
|
||||
// 判断menuManagement里面是否存在数据
|
||||
const getNewTable = () => {
|
||||
let arr = JSON.parse(localStorage.getItem("menuManagement"));
|
||||
if (arr) {
|
||||
tableData.value = arr.stockList;
|
||||
pagination.value.total = tableData.value.length;
|
||||
} else {
|
||||
tableList();
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
reqStockList();
|
||||
getNewTable();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -132,8 +477,15 @@ onMounted(() => {
|
|||
height: 41rem;
|
||||
background-color: @base-white-color;
|
||||
padding: 1rem;
|
||||
padding-top: 0;
|
||||
.table-header {
|
||||
height: 3rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
/deep/ .t-form__controls-content {
|
||||
}
|
||||
:deep(.t-form__controls-content) {
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,100 +0,0 @@
|
|||
<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="3">
|
||||
<t-form-item label="部门" name="department">
|
||||
<t-tree-select :data="DEPARTMENT" clearable />
|
||||
</t-form-item>
|
||||
</t-col>
|
||||
<t-col :span="3">
|
||||
<t-form-item label="专业" name="major">
|
||||
<t-tree-select :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-col>
|
||||
</t-row>
|
||||
<t-row>
|
||||
<t-col :push="10" :span="2" style="margin-top: 1rem">
|
||||
<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: '机电工程系'
|
||||
},
|
||||
{
|
||||
label: '护理系',
|
||||
value: '护理系'
|
||||
},
|
||||
{
|
||||
label: '建筑系',
|
||||
value: '建筑系'
|
||||
}
|
||||
]
|
||||
//专业数据
|
||||
const MAJOR = [
|
||||
{
|
||||
label: '电子信息工程',
|
||||
value: '电子信息工程'
|
||||
}
|
||||
]
|
||||
//班级数据
|
||||
const GRADE = [
|
||||
{
|
||||
label: '2019',
|
||||
value: '2019'
|
||||
}
|
||||
]
|
||||
//其他条件数据
|
||||
const CONDITION = [
|
||||
{
|
||||
label: '已缴费',
|
||||
value: '已缴费'
|
||||
}
|
||||
]
|
||||
//表单提交
|
||||
const onSubmit = () => {
|
||||
console.log(formData)
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.form {
|
||||
background-color: #fff;
|
||||
height: 3rem;
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
.button {
|
||||
margin-right: 1rem;
|
||||
margin-left: 3rem;
|
||||
}
|
||||
</style>
|
||||
249
src/pages/receivables-management/accountReceivable.vue
Normal file
249
src/pages/receivables-management/accountReceivable.vue
Normal file
|
|
@ -0,0 +1,249 @@
|
|||
<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="3">
|
||||
<t-form-item label="姓名" name="name">
|
||||
<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-col>
|
||||
<t-col :span="3">
|
||||
<t-form-item label="专业" name="major">
|
||||
<t-tree-select v-model="formData.major" :data="MAJOR" clearable />
|
||||
</t-form-item>
|
||||
</t-col>
|
||||
</t-row>
|
||||
<t-row style="margin-top: 0.5rem">
|
||||
<t-col :span="3">
|
||||
<t-form-item label="班级" name="grade">
|
||||
<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-row>
|
||||
</t-form>
|
||||
</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"
|
||||
@page-change="onPageChange"
|
||||
: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>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import {
|
||||
APIReceivablesList,
|
||||
APIReceivablesAdd
|
||||
} from '@/api/receivables-management/management'
|
||||
//表单数据
|
||||
const formData = reactive({
|
||||
name: '',
|
||||
studentnumber: '',
|
||||
department: '',
|
||||
major: '',
|
||||
grade: '',
|
||||
tuition: ''
|
||||
})
|
||||
//部门数据
|
||||
const DEPARTMENT = [
|
||||
{
|
||||
label: '机电工程系',
|
||||
value: '机电工程系'
|
||||
},
|
||||
{
|
||||
label: '护理分院',
|
||||
value: '护理分院'
|
||||
},
|
||||
{
|
||||
label: '建筑系',
|
||||
value: '建筑系'
|
||||
},
|
||||
{
|
||||
label: '材料科学与工程系',
|
||||
value: '材料科学与工程系'
|
||||
},
|
||||
{
|
||||
label: '环境科学与工程系',
|
||||
value: '环境科学与工程系'
|
||||
}
|
||||
]
|
||||
//专业数据
|
||||
const MAJOR = [
|
||||
{
|
||||
label: '机械制造与自动化',
|
||||
value: '机械制造与自动化'
|
||||
},
|
||||
{
|
||||
label: '材料科学与工程',
|
||||
value: '材料科学与工程'
|
||||
},
|
||||
{
|
||||
label: '环境科学与工程',
|
||||
value: '环境科学与工程'
|
||||
},
|
||||
{
|
||||
label: '建筑工程',
|
||||
value: '建筑工程'
|
||||
},
|
||||
{
|
||||
label: '护理学',
|
||||
value: '护理学'
|
||||
}
|
||||
]
|
||||
//班级数据
|
||||
const GRADE = [
|
||||
{
|
||||
label: '机制1班',
|
||||
value: '机制1班'
|
||||
},
|
||||
{
|
||||
label: '材料1班',
|
||||
value: '材料1班'
|
||||
},
|
||||
{
|
||||
label: '环境1班',
|
||||
value: '环境1班'
|
||||
},
|
||||
{
|
||||
label: '建筑1班',
|
||||
value: '建筑1班'
|
||||
},
|
||||
{
|
||||
label: '护理1班',
|
||||
value: '护理1班'
|
||||
}
|
||||
]
|
||||
//其他条件数据
|
||||
const CONDITION = [
|
||||
{
|
||||
label: '已付学费',
|
||||
value: '已付学费'
|
||||
},
|
||||
{
|
||||
label: '未缴学费',
|
||||
value: '未缴学费'
|
||||
}
|
||||
]
|
||||
// 表格数据
|
||||
const tableData = ref([])
|
||||
//表单提交
|
||||
const onSubmit = async () => {
|
||||
const res = await APIReceivablesAdd(formData)
|
||||
console.log(res)
|
||||
tableData.value = res
|
||||
pagination.total = res.length
|
||||
}
|
||||
// 表格加载状态
|
||||
const loading = ref(false)
|
||||
//表单重置
|
||||
const onReset = () => {
|
||||
ReceivablesList()
|
||||
}
|
||||
// 表格点击事件
|
||||
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: '是否缴费' }
|
||||
])
|
||||
|
||||
// 表格分页数据
|
||||
let pagination = {
|
||||
defaultCurrent: 1,
|
||||
defaultPageSize: 5,
|
||||
total: 50
|
||||
}
|
||||
//获取表格数据
|
||||
const ReceivablesList = async () => {
|
||||
loading.value = true
|
||||
const res = await APIReceivablesList()
|
||||
tableData.value = res.data.list
|
||||
pagination.total = res.data.list.length
|
||||
loading.value = false
|
||||
}
|
||||
// 监听分页变化事件
|
||||
const onPageChange = (Newpage, PreviousPagePrev) => {
|
||||
loading.value = true
|
||||
const timerId = setTimeout(() => {
|
||||
loading.value = false
|
||||
clearInterval(timerId)
|
||||
}, 300)
|
||||
}
|
||||
onMounted(() => {
|
||||
ReceivablesList()
|
||||
})
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.form {
|
||||
background-color: #fff;
|
||||
height: 6rem;
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
.button {
|
||||
margin-right: 1rem;
|
||||
margin-left: 3rem;
|
||||
}
|
||||
.table {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -10,7 +10,7 @@ const ReceivablesManagement = [
|
|||
{
|
||||
path: "/accounts",
|
||||
name: "Accounts",
|
||||
component: () => import("@/pages/receivables-management/account-receivable.vue"),
|
||||
component: () => import("@/pages/receivables-management/accountReceivable.vue"),
|
||||
meta: {
|
||||
title: "应收款管理",
|
||||
},
|
||||
|
|
|
|||
35
src/stores/billStock.js
Normal file
35
src/stores/billStock.js
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
import { defineStore } from "pinia";
|
||||
import { reqStockList } from "@/api/stockList";
|
||||
|
||||
export const useStock = defineStore("menuManagement", {
|
||||
state: () => {
|
||||
return {
|
||||
stockList: [],
|
||||
};
|
||||
},
|
||||
actions: {
|
||||
async getStockList() {
|
||||
let { data } = await reqStockList();
|
||||
this.stockList = data.list;
|
||||
return this.stockList;
|
||||
},
|
||||
addStockList(arr) {
|
||||
const index = this.stockList.findIndex((item) => item.id === arr.id);
|
||||
console.log(arr);
|
||||
if (index !== -1) {
|
||||
this.stockList[index] = arr;
|
||||
console.log(this.stockList, "222");
|
||||
} else {
|
||||
arr.id = new Date().getTime();
|
||||
this.stockList.unshift(arr);
|
||||
localStorage.setItem("stockList", JSON.stringify(this.stockList));
|
||||
}
|
||||
return this.stockList;
|
||||
},
|
||||
deleteStockList(item) {
|
||||
let arr = this.stockList.filter((i) => i.id !== item.id);
|
||||
this.stockList = arr;
|
||||
},
|
||||
},
|
||||
persist: true,
|
||||
});
|
||||
9
src/stores/index.js
Normal file
9
src/stores/index.js
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
import { createPinia } from "pinia";
|
||||
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
|
||||
|
||||
const pinia = createPinia();
|
||||
pinia.use(piniaPluginPersistedstate);
|
||||
|
||||
export { store };
|
||||
|
||||
export default store;
|
||||
|
|
@ -186,7 +186,7 @@ pre {
|
|||
.back-color {
|
||||
background-color: #f5f7fb;
|
||||
padding: 16px 24px;
|
||||
height: calc(100vh - 128px);
|
||||
height: calc(94vh - 50px);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
.back-color {
|
||||
background-color: #f5f7fb;
|
||||
padding: 16px 24px;
|
||||
height: calc(95vh - 64px);
|
||||
height: calc(94vh - 64px);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
// 进行axios二次封装：使用请求与响应拦截器
|
||||
import axios from "axios";
|
||||
import { MessagePlugin } from "tdesign-vue-next";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
// import { refreshToken } from '@/apis/token'
|
||||
// import { useTokenStore } from '@/stores/index'
|
||||
|
|
|
|||
|
|
@ -10,12 +10,11 @@ import { viteMockServe } from "vite-plugin-mock";
|
|||
export default defineConfig({
|
||||
server: {
|
||||
proxy: {
|
||||
'api': {
|
||||
url : 'http://localhost:8080',
|
||||
"/api": {
|
||||
target: "http://192.168.1.10:8000",
|
||||
changeOrigin: true,
|
||||
rewrite: (path) => path.replace(/^\/api/, '')
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
vue(),
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user