sundongyu/dykj-college-back-office-management-system
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

✨ feat: 票据领用管理页面完成

Browse Source
This commit is contained in:
ycy 2024-04-08 10:37:44 +08:00
parent ec58a2a81c
commit dfc4cf59e3
5 changed files with 269 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
mock/modules/ycy.js
View File

@ -13,6 +13,60 @@ const StockList = Mock.mock({
},
],
});
const ReceiptList = Mock.mock([
{
"list|20-30": [
{
"id|+1": 0,
billserial: "@integer(100000000,199999999)1",
proposer: "孙东宇",
billType: "@integer(0,4)",
receiptNum: "@integer(1,10)张",
receiptDate: "@date",
useInfo: "@csentence",
},
],
},
{
"list|20-30": [
{
"id|+1": 0,
billserial: "@integer(100000000,199999999)1",
proposer: "杨春宇",
billType: "@integer(0,4)",
receiptNum: "@integer(1,10)张",
receiptDate: "@date",
useInfo: "@csentence",
},
],
},
{
"list|20-30": [
{
"id|+1": 0,
billserial: "@integer(100000000,199999999)1",
proposer: "吕才卓",
billType: "@integer(0,4)",
receiptNum: "@integer(1,10)张",
receiptDate: "@date",
useInfo: "@csentence",
},
],
},
{
"list|20-30": [
{
"id|+1": 0,
billserial: "@integer(100000000,199999999)1",
proposer: "刘欣宇",
billType: "@integer(0,4)",
receiptNum: "@integer(1,10)张",
receiptDate: "@date",
useInfo: "@csentence",
},
],
},
]);
const personName = () => {
return [
@ -83,4 +137,31 @@ export default [
};
},
},
{
url: "/api/receiptList",
method: "post",
response: (req) => {
if (req.body.name === "孙东宇") {
return {
code: 200,
data: ReceiptList[0].list,
};
} else if (req.body.name === "杨春宇") {
return {
code: 200,
data: ReceiptList[1].list,
};
} else if (req.body.name === "吕才卓") {
return {
code: 200,
data: ReceiptList[2].list,
};
} else {
return {
code: 200,
data: ReceiptList[3].list,
};
}
},
},
];

2
src/api/finance-bill-manage/receiptList.js
View File

@ -2,6 +2,8 @@ import request from "@/utils/requestMock";
const API = {
PERSON_LIST: "/personName",
RECEIPT_LIST: "/receiptList",
};
export const reqPersonName = () => request.get(API.PERSON_LIST);
export const reqReceiptList = (data) => request.post(API.RECEIPT_LIST, data);

2
src/pages/finance-bill-manage/billCancel.vue
View File

@ -371,7 +371,7 @@ const headerQuery = () => {
if (
scarchData.value.billserial === "" &&
scarchData.value.billType === "" &&
scarchData.value.stockDate === ""
scarchData.value.appleDate === ""
) {
arrList = item;
}

208
src/pages/finance-bill-manage/billReceipt.vue
View File

@ -35,6 +35,28 @@
maxlength="10"
></t-input>
</t-form-item>
<t-form-item label="领用时间:" name="receiptDate">
<t-date-picker v-model="scarchData.receiptDate" clearable />
</t-form-item>
<t-form-item
label="票据类型:"
name="billType"
style="margin-bottom: 0.3rem"
>
<t-select
v-model="scarchData.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 style="margin-right: 1rem">
<t-button theme="primary" type="submit">查询</t-button>
@ -75,32 +97,6 @@
}}</span>
</div>
</template>
<template #approvalStatus="{ row }">
<div v-for="item in approvalStatus" :key="item">
<t-tag
v-if="row.approvalStatus === item.value"
:theme="tagColor(row.approvalStatus)"
variant="light"
>
{{ item.label }}
</t-tag>
</div>
</template>
<template #status="slotProps">
<t-button
theme="default"
variant="text"
size="small"
@click="Approve(slotProps)"
>
<span v-if="slotProps.row.approvalStatus === 0">{{
"审批"
}}</span>
<span v-if="slotProps.row.approvalStatus === 3">{{
"重新审批"
}}</span>
</t-button>
</template>
</t-base-table>
</t-content>
</t-layout>
@ -110,35 +106,156 @@
</template>
<script setup>
import { ref, onMounted } from "vue";
import { ref, onMounted, nextTick } from "vue";
import { MessagePlugin } from "tdesign-vue-next";
import { LoadIcon } from "tdesign-icons-vue-next";
import { useReceiptList } from "@/stores/billReceipt";
const receiptList = useReceiptList();
const personName = ref([]);
const tableData = ref([]);
const data = ref([]);
const columns = ref([
{
colKey: "serial-number",
title: "序号",
width: 50,
},
{
colKey: "billserial",
title: "票据编号",
align: "center",
width: 100,
},
{
colKey: "proposer",
title: "申请人",
align: "center",
width: 100,
},
{
colKey: "billType",
title: "票据类型",
align: "center",
width: 100,
},
{
colKey: "receiptNum",
title: "领用数量",
align: "center",
width: 100,
},
{
colKey: "receiptDate",
title: "领用时间",
align: "center",
width: 100,
},
{
colKey: "useInfo",
title: "用途",
ellipsis: true,
align: "center",
width: 200,
},
]);
// 票据类型
const billType = ref([
{ label: "票据类型1", value: 0 },
{ label: "票据类型2", value: 1 },
{ label: "票据类型3", value: 2 },
{ label: "票据类型4", value: 3 },
{ label: "票据类型5", value: 4 },
]);
// 查询表单
const scarchData = ref({
billserial: "",
});
// 分页
const pagination = ref({
defaultCurrent: 1,
defaultPageSize: 10,
total: 50,
});
// 获取票据列表
const personList = async () => {
personName.value = await receiptList.getPersonNameList();
console.log(personName.value);
};
const onClick = (context) => {
// 查询
const headerQuery = () => {
tableData.value = data.value;
console.log(
scarchData.value.billserial,
scarchData.value.billType,
scarchData.value.receiptDate
);
if (
scarchData.value.billserial === "" &&
(scarchData.value.billType === undefined ||
scarchData.value.billType === "") &&
(scarchData.value.receiptDate === undefined ||
scarchData.value.receiptDate === "")
) {
getNewTable();
} else {
const list = tableData.value.filter((item) => {
let arrList;
if (scarchData.value.billserial === item.billserial) {
arrList = item;
}
if (scarchData.value.billType === item.billType) {
arrList = item;
}
if (scarchData.value.receiptDate === item.receiptDate) {
arrList = item;
}
if (
scarchData.value.billserial === "" &&
scarchData.value.billType === "" &&
scarchData.value.receiptDate === ""
) {
arrList = item;
}
return arrList;
});
tableData.value = list;
pagination.value.total = list.length;
}
};
// 查询表单重置
const resetting = () => {
scarchData.value = {
billserial: "",
billType: "",
receiptDate: "",
};
getNewTable();
};
const onClick = async (context) => {
// 判断是否为顶层节点（无父节点）
if (context.node.value === "t1") {
return;
}
console.info("onClick", context);
// 获取票据列表
tableData.value = await receiptList.getReceiptList({
name: context.node.label,
});
data.value = await receiptList.getReceiptList({
name: context.node.label,
});
pagination.value.total = tableData.value.length;
};
// 刷新列表
const refresh = () => {
getTableData();
};
// 判断menuManagement里面是否存在数据
const getNewTable = () => {
const getPersonName = () => {
let arr = JSON.parse(localStorage.getItem("ReceiptList"));
if (arr) {
personName.value = arr.personName;
@ -146,9 +263,32 @@ const getNewTable = () => {
personList();
}
};
// 判断menuManagement里面是否存在数据
const getTableData = async () => {
let arr = JSON.parse(localStorage.getItem("ReceiptList"));
if (arr.receiptList.length > 0) {
tableData.value = arr.receiptList;
} else {
await nextTick();
// 找到第一个具有子节点的节点并模拟点击
const firstNodeWithChildren = personName.value.find(
(node) => Array.isArray(node.children) && node.children.length > 0
);
if (firstNodeWithChildren) {
const simulatedContext = {
node: {
label: "孙东宇",
},
};
onClick(simulatedContext);
}
}
};
onMounted(() => {
getNewTable();
onMounted(async () => {
getPersonName();
getTableData();
// 等待 personName 数据加载完成
});
</script>

12
src/stores/billReceipt.js
View File

@ -1,10 +1,14 @@
import { defineStore } from "pinia";
import { reqPersonName } from "@/api/finance-bill-manage/receiptList";
import {
reqPersonName,
reqReceiptList,
} from "@/api/finance-bill-manage/receiptList";
export const useReceiptList = defineStore("ReceiptList", {
state: () => {
return {
personName: [],
receiptList: [],
};
},
actions: {
@ -14,6 +18,12 @@ export const useReceiptList = defineStore("ReceiptList", {
console.log(this.personName);
return this.personName;
},
async getReceiptList(obj) {
const { data } = await reqReceiptList(obj);
this.receiptList = data;
return this.receiptList;
},
},
persist: true,
});