This commit is contained in:
吕才卓 2024-04-08 09:14:41 +08:00
commit 050e0bc6d3
24 changed files with 1532 additions and 127 deletions

View File

@ -9,6 +9,7 @@ const data = Mock.mock({
"major": `@pick(['机械制造与自动化', '材料科学与工程', '环境科学与工程', '建筑工程', '护理学'])`, "major": `@pick(['机械制造与自动化', '材料科学与工程', '环境科学与工程', '建筑工程', '护理学'])`,
"grade": `@pick(['机制1班', '材料1班', '环境1班', '建筑1班','护理1班'])`, "grade": `@pick(['机制1班', '材料1班', '环境1班', '建筑1班','护理1班'])`,
"tuition": `@pick(['已付学费', '未缴学费'])`, "tuition": `@pick(['已付学费', '未缴学费'])`,
"tu": 16800,
} }
] ]
}) })

View File

@ -2,7 +2,7 @@ import Mock from "mockjs";
const StockList = Mock.mock({ const StockList = Mock.mock({
"list|20-30": [ "list|20-30": [
{ {
"id|+1": "0", "id|+1": 0,
billserial: "@integer(100000000,199999999)1", billserial: "@integer(100000000,199999999)1",
billType: "@integer(0,4)", billType: "@integer(0,4)",
stockNum: "@integer(1,2)", stockNum: "@integer(1,2)",
@ -14,6 +14,43 @@ const StockList = Mock.mock({
], ],
}); });
const personName = () => {
return [
{
label: "员工名单",
children: [
{
label: "孙东宇",
},
{
label: "杨春宇",
},
{
label: "吕才卓",
},
{
label: "刘欣宇",
},
],
},
];
};
const CancelList = Mock.mock({
"list|20-30": [
{
"id|+1": 0,
billserial: "@integer(100000000,199999999)1",
billType: "@integer(0,4)",
cancelNum: "@integer(1,10)张",
appleDate: "@date",
proposer: "@cname",
approvalStatus: "@integer(0,3)",
reason: " @integer(10000000000,19999999999)",
},
],
});
export default [ export default [
{ {
url: "/api/stockList", url: "/api/stockList",
@ -25,4 +62,25 @@ export default [
}; };
}, },
}, },
{
url: "/api/cancelList",
method: "get",
response: () => {
return {
code: 200,
data: CancelList,
};
},
},
{
url: "/api/personName",
method: "get",
response: () => {
const list = personName();
return {
code: 200,
data: list,
};
},
},
]; ];

4
package-lock.json generated
View File

@ -9,6 +9,7 @@
"version": "0.0.0", "version": "0.0.0",
"dependencies": { "dependencies": {
"axios": "^1.6.8", "axios": "^1.6.8",
"dayjs": "^1.11.10",
"less": "^4.2.0", "less": "^4.2.0",
"mockjs": "^1.1.0", "mockjs": "^1.1.0",
"pinia": "^2.1.7", "pinia": "^2.1.7",
@ -998,7 +999,8 @@
}, },
"node_modules/dayjs": { "node_modules/dayjs": {
"version": "1.11.10", "version": "1.11.10",
"license": "MIT" "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.10.tgz",
"integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
}, },
"node_modules/debug": { "node_modules/debug": {
"version": "4.3.4", "version": "4.3.4",

View File

@ -10,6 +10,7 @@
}, },
"dependencies": { "dependencies": {
"axios": "^1.6.8", "axios": "^1.6.8",
"dayjs": "^1.11.10",
"less": "^4.2.0", "less": "^4.2.0",
"mockjs": "^1.1.0", "mockjs": "^1.1.0",
"pinia": "^2.1.7", "pinia": "^2.1.7",

View File

@ -0,0 +1,7 @@
import request from "@/utils/requestMock";
const API = {
CANCEL_LIST: "/cancelList",
};
export const reqCancelList = () => request.get(API.CANCEL_LIST);

View File

@ -0,0 +1,7 @@
import request from "@/utils/requestMock";
const API = {
PERSON_LIST: "/personName",
};
export const reqPersonName = () => request.get(API.PERSON_LIST);

View File

@ -8,13 +8,19 @@
<t-menu-item value="1-1" to="/Bill/BillStock"> <t-menu-item value="1-1" to="/Bill/BillStock">
<span>票据入库管理</span> <span>票据入库管理</span>
</t-menu-item> </t-menu-item>
<t-menu-item value="1-2" to="/Bill/BillCancel">
<span>票据退库管理</span>
</t-menu-item>
<t-menu-item value="1-3" to="/Bill/BillReceipt">
<span>票据领用管理</span>
</t-menu-item>
</t-submenu> </t-submenu>
<t-submenu value="2" title="应收款管理"> <t-submenu value="2" title="应收款管理">
<template #icon> <template #icon>
<t-icon name="application" /> <t-icon name="application" />
</template> </template>
<t-menu-item value="2-1" to="/accounts"> <t-menu-item value="2-1" to="/accounts">
<span>菜单二</span> <span>应收款管理</span>
</t-menu-item> </t-menu-item>
</t-submenu> </t-submenu>
</t-menu> </t-menu>

View File

@ -11,4 +11,4 @@
<script setup></script> <script setup></script>
<style lang="scss" scoped></style> <style lang="less" scoped></style>

View File

@ -0,0 +1,464 @@
<template>
<div class="back-color">
<t-layout style="height: 90%; background-color: #f5f7fb">
<t-header class="scarch-box">
<t-form
ref="form"
:data="scarchData"
label-width="calc(2em + 40px)"
layout="inline"
scroll-to-first-error="smooth"
class="scarch-from"
@reset="resetting"
@submit="headerQuery"
>
<div style="margin-left: 1rem">
<t-form-item label="票据编号:" name="billserial">
<t-input v-model="scarchData.billserial" maxlength="10"></t-input>
</t-form-item>
<t-form-item label="退库日期:" name="appleDate">
<t-date-picker v-model="scarchData.appleDate" 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>
<t-form-item
label="审批状态:"
name="approvalStatus"
style="margin-bottom: 0.3rem"
>
<t-select
v-model="scarchData.approvalStatus"
placeholder="请选择审批状态"
clearable
>
<t-option
v-for="item in approvalStatus"
: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>
<t-button theme="primary" type="reset">重置</t-button>
</t-form-item>
</t-form>
</t-header>
<t-content class="table-box">
<div class="table-header">
<div>
<h4 style="font-size: 110%">票据列表</h4>
</div>
<div>
<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"
: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 #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>
<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">
<div>
<t-form
ref="formDialog"
scroll-to-first-error="smooth"
label-align="left"
:rules="FORM_RULES"
:data="dialogData"
:colon="true"
@submit="cancelAdd"
label-width="calc(2em + 55px)"
@reset="onReset"
>
<t-form-item
label="审批人"
name="approver"
style="margin-bottom: 1.5rem; width: 35rem"
>
<t-input
v-model="dialogData.approver"
placeholder="请输入审批人"
></t-input>
</t-form-item>
<t-form-item
label="审批时间"
name="approvalDate"
style="margin-bottom: 1.5rem; width: 35rem"
>
<t-date-picker
v-model="dialogData.approvalDate"
placeholder="请选择审批时间"
clearable
style="width: 35rem"
/>
</t-form-item>
<t-form-item label="审批原因" name="approvalReason">
<t-textarea
v-model="dialogData.approvalReason"
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 { ref, onMounted } from "vue";
import { MessagePlugin } from "tdesign-vue-next";
import { LoadIcon } from "tdesign-icons-vue-next";
import { useCancel } from "@/stores/billCancel";
//
const billType = ref([
{ label: "票据类型1", value: 0 },
{ label: "票据类型2", value: 1 },
{ label: "票据类型3", value: 2 },
{ label: "票据类型4", value: 3 },
{ label: "票据类型5", value: 4 },
]);
//
const approvalStatus = ref([
{ label: "待审批", value: 0 },
{ label: "审核中", value: 1 },
{ label: "审核通过", value: 2 },
{ label: "审核拒绝", value: 3 },
]);
//
const pagination = ref({
defaultCurrent: 1,
defaultPageSize: 10,
total: 50,
});
//
const scarchData = ref({
billserial: "",
billType: "",
appleDate: "",
approvalStatus: [],
});
//
const loading = ref(false);
const visiblePost = ref(false);
const cancelList = useCancel();
const tableData = ref();
const data = ref();
//
const columns = ref([
{
colKey: "serial-number",
title: "序号",
width: 50,
},
{
colKey: "billserial",
title: "票据编号",
align: "center",
width: "100",
},
{
colKey: "billType",
title: "票据类型",
align: "center",
width: "100",
},
{
colKey: "cancelNum",
title: "退库数量",
align: "center",
width: "100",
},
{
colKey: "appleDate",
title: "申请时间",
align: "center",
width: "100",
},
{
colKey: "proposer",
title: "申请人",
align: "center",
width: "100",
},
{
colKey: "approvalStatus",
title: "审批状态",
align: "center",
width: "100",
},
{
colKey: "reason",
title: "退库原因",
ellipsis: true,
align: "center",
width: "100",
},
{
colKey: "status",
title: "操作",
width: 120,
align: "center",
fixed: "right",
},
]);
const FORM_RULES = {
approver: [{ required: true, message: "请输入审批人", trigger: "blur" }],
approvalDate: [
{ required: true, message: "请选择入库日期", trigger: ["blur", "change"] },
],
approvalReason: [
{ required: true, message: "请输入审批原因", trigger: "blur" },
],
};
//
const dialogData = ref({
approver: "",
approvalDate: "",
approvalReason: "",
});
//
const tableList = async () => {
loading.value = true;
tableData.value = await cancelList.getCancelList();
data.value = await cancelList.getCancelList();
pagination.value.total = tableData.value.length;
const timerId = setTimeout(() => {
loading.value = false;
clearInterval(timerId);
}, 300);
};
// tag
const tagColor = (value) => {
switch (value) {
case 0:
return "default";
case 1:
return "warning";
case 2:
return "success";
case 3:
return "danger";
}
};
//
const refresh = () => {
tableList();
};
//
const headerQuery = () => {
tableData.value = data.value;
if (
scarchData.value.billserial === "" &&
(scarchData.value.billType === undefined ||
scarchData.value.billType === "") &&
(scarchData.value.approvalStatus === undefined ||
scarchData.value.approvalStatus === "") &&
scarchData.value.appleDate === ""
) {
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.approvalStatus === item.approvalStatus) {
arrList = item;
}
if (scarchData.value.appleDate === item.appleDate) {
arrList = item;
}
if (
scarchData.value.billserial === "" &&
scarchData.value.billType === "" &&
scarchData.value.stockDate === ""
) {
arrList = item;
}
return arrList;
});
tableData.value = list;
pagination.value.total = list.length;
}
};
//
const resetting = () => {
scarchData.value = {
billserial: "",
billType: "",
appleDate: "",
approvalStatus,
};
getNewTable();
};
const rowItem = ref({});
const Approve = (value) => {
dialogData.value = {
approver: "",
approvalDate: "",
approvalReason: "",
};
visiblePost.value = true;
rowItem.value = value;
};
//
const onReset = () => {};
//
const cancelAdd = async ({ validateResult, firstError }) => {
if (validateResult === true) {
rowItem.value.row.approvalStatus = 1;
await cancelList.editApprovalStatus(rowItem.value);
getNewTable();
MessagePlugin.success("提交成功");
visiblePost.value = false;
} else {
console.log("Validate Errors: ", firstError, validateResult);
}
};
// menuManagement
const getNewTable = () => {
let arr = JSON.parse(localStorage.getItem("CancelList"));
if (arr) {
tableData.value = arr.cancelList;
data.value = arr.cancelList;
pagination.value.total = tableData.value.length;
} else {
tableList();
}
};
onMounted(() => {
getNewTable();
});
</script>
<style lang="less" scoped>
.scarch-box {
width: 100%;
background-color: @base-white-color;
margin-bottom: 2rem;
.scarch-from {
height: 60px;
display: flex;
justify-content: space-between;
align-items: center;
}
}
.table-box {
height: 42rem;
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) {
justify-content: space-between;
}
</style>

View File

@ -0,0 +1,191 @@
<template>
<div class="back-color">
<t-layout style="height: 100%; background-color: #f5f7fb">
<t-aside class="asideTree">
<t-space direction="vertical">
<t-tree
:data="personName"
hover
transition
activable
expandAll
:expand-mutex="mutex"
expand-on-click-node="true"
@click="onClick"
/>
</t-space>
</t-aside>
<t-content>
<t-layout style="height: 100%; background-color: #f5f7fb">
<t-header class="scarch-box">
<t-form
ref="form"
:data="scarchData"
label-width="calc(2em + 40px)"
layout="inline"
scroll-to-first-error="smooth"
class="scarch-from"
@reset="resetting"
@submit="headerQuery"
>
<div style="margin-left: 1rem; margin-top: 1px">
<t-form-item label="票据编号:" name="billserial">
<t-input
v-model="scarchData.billserial"
maxlength="10"
></t-input>
</t-form-item>
</div>
<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>
</t-header>
<t-content class="table-box">
<div class="table-header">
<div>
<h4 style="font-size: 110%">票据列表</h4>
</div>
<div>
<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"
: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 #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>
</t-content>
</t-layout>
</div>
</template>
<script setup>
import { ref, onMounted } 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 scarchData = ref({
billserial: "",
});
//
const personList = async () => {
personName.value = await receiptList.getPersonNameList();
console.log(personName.value);
};
const onClick = (context) => {
//
if (context.node.value === "t1") {
return;
}
console.info("onClick", context);
};
// menuManagement
const getNewTable = () => {
let arr = JSON.parse(localStorage.getItem("ReceiptList"));
if (arr) {
personName.value = arr.personName;
} else {
personList();
}
};
onMounted(() => {
getNewTable();
});
</script>
<style scoped lang="less">
.asideTree {
margin-right: 2rem;
display: flex;
justify-content: center;
padding: 1rem;
}
.scarch-box {
width: 100%;
background-color: @base-white-color;
margin-bottom: 2rem;
.scarch-from {
height: 60px;
display: flex;
justify-content: space-between;
align-items: center;
}
}
.table-box {
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-tree--transition .t-tree__label) {
width: 10rem;
}
:deep(.t-form__controls-content) {
justify-content: space-between;
}
</style>

View File

@ -1,103 +1,109 @@
<template> <template>
<div class="back-color"> <div class="back-color">
<div class="scarch-box"> <t-layout style="height: 90%; background-color: #f5f7fb">
<t-form <t-header class="scarch-box">
ref="form" <t-form
:data="formData" ref="form"
label-width="calc(2em + 40px)" :data="formData"
layout="inline" label-width="calc(2em + 40px)"
scroll-to-first-error="smooth" layout="inline"
class="scarch-from" scroll-to-first-error="smooth"
@reset="resetting" class="scarch-from"
@submit="headerQuery" @reset="resetting"
> @submit="headerQuery"
<div style="margin-left: 1rem"> >
<t-form-item label="票据编号:" name="billserial"> <div style="margin-left: 1rem">
<t-input v-model="formData.billserial" maxlength="10"></t-input> <t-form-item label="票据编号:" name="billserial">
</t-form-item> <t-input v-model="formData.billserial" maxlength="10"></t-input>
</t-form-item>
<t-form-item label="入库日期:" name="stockDate"> <t-form-item label="入库日期:" name="stockDate">
<t-date-picker v-model="formData.stockDate" clearable /> <t-date-picker v-model="formData.stockDate" clearable />
</t-form-item> </t-form-item>
<t-form-item label="票据类型:" name="billType"> <t-form-item
<t-select label="票据类型:"
v-model="formData.billType" name="billType"
placeholder="请选择票据类型" style="margin-bottom: 0.3rem"
clearable
> >
<t-option <t-select
v-for="item in billType" v-model="formData.billType"
:key="item.value" placeholder="请选择票据类型"
:value="item.value" clearable
:label="item.label" >
></t-option> <t-option
</t-select> v-for="item in billType"
</t-form-item> :key="item.value"
</div> :value="item.value"
<t-form-item style="margin-right: 1rem"> :label="item.label"
<t-button theme="primary" type="submit">查询</t-button> ></t-option>
<t-button theme="primary" type="reset">重置</t-button> </t-select>
</t-form-item> </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"
: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> </div>
</template> <t-form-item style="margin-right: 1rem">
<template #status="slotProps"> <t-button theme="primary" type="submit">查询</t-button>
<t-button <t-button theme="primary" type="reset">重置</t-button>
theme="default" </t-form-item>
variant="text" </t-form>
size="small" </t-header>
@click="stockEdit(slotProps)" <t-content class="table-box">
>修改</t-button <div class="table-header">
> <div>
<t-button <h4 style="font-size: 110%">票据列表</h4>
theme="default" </div>
variant="text" <div>
size="small" <t-button theme="primary" size="small" @click="addStock">
@click="stockDelete(slotProps)" <template #icon><add-icon /></template>
>删除</t-button 新增票据
> </t-button>
</template> <t-button
</t-base-table> shape="circle"
</div> 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"
: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>
</t-content>
</t-layout>
<t-space> <t-space>
<t-dialog <t-dialog
ref="postForm" ref="postForm"
v-model:visible="visiblePost" v-model:visible="visiblePost"
header="新增职位" header="新增票据"
width="40%" width="40%"
:confirm-on-enter="true" :confirm-on-enter="true"
:on-close="closePost" :on-close="closePost"
@ -217,10 +223,9 @@
</template> </template>
<script setup> <script setup>
import { reactive, ref, onMounted } from "vue"; import { ref, onMounted } from "vue";
import { MessagePlugin } from "tdesign-vue-next"; import { MessagePlugin } from "tdesign-vue-next";
import { AddIcon, LoadIcon } from "tdesign-icons-vue-next"; import { AddIcon, LoadIcon } from "tdesign-icons-vue-next";
import { reqStockList } from "@/api/stockList";
import { useStock } from "@/stores/billStock"; import { useStock } from "@/stores/billStock";
// //
@ -344,7 +349,7 @@ const resetting = () => {
billType: "", billType: "",
stockDate: "", stockDate: "",
}; };
tableList(); getNewTable();
}; };
// //
@ -355,10 +360,9 @@ const headerQuery = () => {
(formData.value.billType === undefined || formData.value.billType === "") && (formData.value.billType === undefined || formData.value.billType === "") &&
formData.value.stockDate === "" formData.value.stockDate === ""
) { ) {
tableList(); getNewTable();
} else { } else {
const list = tableData.value.filter((item) => { const list = tableData.value.filter((item) => {
console.log(item);
let arrList; let arrList;
if (formData.value.billserial === item.billserial) { if (formData.value.billserial === item.billserial) {
arrList = item; arrList = item;
@ -450,6 +454,7 @@ const getNewTable = () => {
let arr = JSON.parse(localStorage.getItem("menuManagement")); let arr = JSON.parse(localStorage.getItem("menuManagement"));
if (arr) { if (arr) {
tableData.value = arr.stockList; tableData.value = arr.stockList;
data.value = arr.stockList;
pagination.value.total = tableData.value.length; pagination.value.total = tableData.value.length;
} else { } else {
tableList(); tableList();
@ -474,7 +479,7 @@ onMounted(() => {
} }
} }
.table-box { .table-box {
height: 41rem; height: 42rem;
background-color: @base-white-color; background-color: @base-white-color;
padding: 1rem; padding: 1rem;
padding-top: 0; padding-top: 0;

View File

@ -0,0 +1,354 @@
<template>
<div class="back-color">
<div>
<div class="invoiceContainer">
<div class="invoiceHeade">
<div class="headeLeft"></div>
<div class="headeMiddle">
<span class="title">xxx增值税电子普通发票</span>
<hr />
<hr />
</div>
<div class="headeRight">
<ul>
<li><label> 发票代码 </label><span>1234</span></li>
<li><label> 发票号码 </label><span>223</span></li>
<li>
<label> 开票日期 </label><span>{{ InvoiceData.xdate }}</span>
</li>
<li><label> 校验码 </label><span>111111</span></li>
</ul>
</div>
</div>
<div class="invoiceBody">
<div class="userInfo">
<div class="buy">缴费方</div>
<div class="buyInfo">
<ul>
<li>
<label>学生姓名</label><span>{{ InvoiceData.xname }}</span>
</li>
<li>
<label>学号</label><span>{{ InvoiceData.xstudent }}</span>
</li>
<li style="display: flex">
<label>电话</label
><t-input
size="small"
style="width: 300px"
v-model="InvoiceData.xphone"
/>
</li>
<li style="display: flex">
<label>缴费方式</label
><t-input
size="small"
style="width: 300px"
v-model="InvoiceData.xpayment"
/>
</li>
</ul>
</div>
<div class="password">缴费方</div>
<div class="department">
<ul>
<li>
<label>学生部门</label
><span>{{ InvoiceData.xdepartment }}</span>
</li>
<li>
<label>学生班级</label><span>{{ InvoiceData.xgrade }}</span>
</li>
</ul>
</div>
</div>
<div class="Table">
备入
<div>
<t-textarea
placeholder="请输入内容"
v-model="InvoiceData.xremark"
/>
</div>
</div>
<div class="saleInfo">
<div class="total">价税合计(大写)</div>
<span class="max"
><t-input
size="small"
style="width: 150px; padding-top: 0.2rem"
v-model="InvoiceData.xchargebig"
/></span>
<div class="total2" style="display: flex">
(小写)
<span style="display: flex"
><t-input
size="small"
style="width: 150px; padding-top: 0.2rem"
v-model="InvoiceData.xcharge"
/>
</span>
</div>
</div>
<div class="userInfo2">
<div class="buy">收费方</div>
<div class="buyInfo">
<ul>
<li><label>名称</label><span>xxxxxxx学院</span></li>
<li>
<label>纳税人识别号</label><span>12443536377484848</span>
</li>
<li>
<label>地址&nbsp;&nbsp;&nbsp;电话</label
><span>11223443532</span>
</li>
<li><label>开户行及账号</label><span>中国农业银行</span></li>
</ul>
</div>
<div class="remark">备注</div>
</div>
<div class="userInfo3">
<ul class="invoicetFooter" style="display: flex">
<li style="display: flex">
<label>收款人:</label
><t-input
size="small"
style="width: 100px"
v-model="InvoiceData.xpayee"
/>
</li>
<li style="display: flex">
<label>复核:</label
><t-input
size="small"
style="width: 100px"
v-model="InvoiceData.xreviewer"
/>
</li>
<li style="display: flex">
<label>开票人:</label
><t-input
size="small"
style="width: 100px"
v-model="InvoiceData.xdrawer"
/>
</li>
<li><label>销售方</label></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import dayjs from 'dayjs'
const Route = useRoute()
//
const InvoiceData = ref({
//
xdate: dayjs().format('YYYY-MM-DD'),
//
xname: Route.query.firstName,
//
xstudent: 12346,
//
xphone: '',
//
xpayment: '',
//
xdepartment: Route.query.status,
//
xgrade: Route.query.classname,
//
xremark: '',
// ()
xcharge: Route.query.letters[0],
// ()
xchargebig: '',
//
xpayee: '',
//
xreviewer: '',
//
xdrawer: ''
})
</script>
<style lang="scss" scoped>
.headeRight {
width: 240px;
height: 100%;
font-size: 16px;
line-height: 30px;
text-align: left;
float: left;
}
.headeRight > ul {
display: inline-block;
margin-left: 16px;
margin-top: 10px;
}
.invoicetFooter > li {
margin-top: 16px;
margin-right: 100px;
margin-left: 11px;
display: inline-block;
}
.max {
display: inline-block;
margin-top: 5px;
margin-left: 4px;
}
.total {
width: 270px;
height: 100%;
font-size: 17px;
line-height: 30px;
text-align: center;
border-right: 1px solid black;
float: left;
padding-top: 0.25rem;
}
.total2 {
width: 270px;
height: 100%;
font-size: 17px;
line-height: 30px;
text-align: center;
margin-right: 130px;
float: right;
margin-top: 0.25rem;
}
.buyer {
width: 30px;
height: 100%;
font-size: 17px;
text-align: center;
border-right: 1px solid black;
float: left;
}
.title {
font-size: 33px;
display: inline-block;
margin-top: 50px;
font-family: '仿宋';
}
.headeMiddle {
width: 400px;
height: 100%;
font-size: 17px;
line-height: 30px;
text-align: center;
float: left;
}
.headeLeft {
width: 300px;
height: 100%;
font-size: 17px;
line-height: 30px;
text-align: center;
float: left;
}
.buy {
width: 30px;
height: 100%;
font-size: 17px;
line-height: 30px;
text-align: center;
border-right: 1px solid black;
border-left: 1px solid black;
float: left;
}
.buyInfo {
width: 510px;
height: 100%;
font-size: 16px;
line-height: 25px;
text-align: left;
border-right: 1px solid black;
float: left;
}
.department {
height: 100%;
font-size: 16px;
line-height: 25px;
text-align: left;
float: left;
}
.password {
width: 30px;
height: 100%;
font-size: 17px;
line-height: 30px;
text-align: center;
border-right: 1px solid black;
float: left;
}
.remark {
width: 30px;
height: 100%;
font-size: 17px;
line-height: 50px;
text-align: center;
border-right: 1px solid black;
float: left;
}
ul {
list-style-type: none;
margin: 0;
padding-left: 5px;
}
.invoiceContainer {
width: 1000px;
margin: 0 auto;
border-top: 1px solid black;
}
.invoiceHeade {
width: 1000px;
height: 140px;
border-bottom: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
}
.userInfo {
width: 1000px;
height: 100px;
border-bottom: 1px solid black;
border-right: 1px solid black;
}
.userInfo2 {
width: 1000px;
height: 100px;
border-right: 1px solid black;
}
.userInfo3 {
width: 1000px;
height: 100px;
border-top: 1px solid black;
}
.Table {
width: 999px;
height: 400px;
border-bottom: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
}
.sum {
width: 1000px;
height: 50px;
border-bottom: 1px solid black;
}
.saleInfo {
width: 999px;
height: 40px;
border-bottom: 1px solid black;
border-right: 1px solid black;
border-left: 1px solid black;
}
</style>

View File

@ -78,6 +78,11 @@
}}</t-tag> }}</t-tag>
<t-tag v-else theme="success">{{ row.tuition }}</t-tag> <t-tag v-else theme="success">{{ row.tuition }}</t-tag>
</template> </template>
<template #action="{ row }">
<t-button v-if="row.tuition === '未缴学费'" @click="handleTicket(row)"
>清缴学费</t-button
>
</template>
</t-table> </t-table>
</div> </div>
</div> </div>
@ -88,6 +93,8 @@ import {
APIReceivablesList, APIReceivablesList,
APIReceivablesAdd APIReceivablesAdd
} from '@/api/receivables-management/management' } from '@/api/receivables-management/management'
import { useRouter } from 'vue-router'
const router = useRouter()
// //
const formData = reactive({ const formData = reactive({
name: '', name: '',
@ -179,23 +186,6 @@ const CONDITION = [
] ]
// //
const tableData = ref([]) 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([ const columns = ref([
{ colKey: 'serial-number' }, { colKey: 'serial-number' },
@ -204,15 +194,43 @@ const columns = ref([
{ colKey: 'department', title: '部门' }, { colKey: 'department', title: '部门' },
{ colKey: 'major', title: '专业' }, { colKey: 'major', title: '专业' },
{ colKey: 'grade', title: '班级' }, { colKey: 'grade', title: '班级' },
{ colKey: 'tuition', title: '是否缴费' } { colKey: 'tuition', title: '是否缴费' },
{ colKey: 'action', title: '操作', align: 'center' }
]) ])
// //
let pagination = { let pagination = {
defaultCurrent: 1, defaultCurrent: 1,
defaultPageSize: 5, defaultPageSize: 10,
total: 50 total: 50
} }
//
const onSubmit = async () => {
if (
formData.name ||
formData.studentnumber ||
formData.department ||
formData.major ||
formData.grade ||
formData.tuition
) {
const res = await APIReceivablesAdd(formData)
console.log(res)
tableData.value = Array.from(res)
pagination.total = res.length
} else {
alert('请填写完整信息')
}
}
//
const loading = ref(false)
//
const onReset = () => {
ReceivablesList()
}
//
const handleRowClick = e => {
console.log(e)
}
// //
const ReceivablesList = async () => { const ReceivablesList = async () => {
loading.value = true loading.value = true
@ -229,6 +247,13 @@ const onPageChange = (Newpage, PreviousPagePrev) => {
clearInterval(timerId) clearInterval(timerId)
}, 300) }, 300)
} }
//
const handleTicket = row => {
router.push({
path: '/billCollected',
query: row
})
}
onMounted(() => { onMounted(() => {
ReceivablesList() ReceivablesList()
}) })

View File

@ -0,0 +1,198 @@
<template>
<div class="back-color">
<t-table
ref="tableRef"
row-key="key"
:columns="columns"
:data="data"
:editable-cell-state="editableCellState"
bordered
lazy-load
>
<template #operation="{ row }">
<t-button theme="default" variant="text" @click="handleEdit(row)"
>填写电子票据</t-button
>
</template>
</t-table>
</div>
</template>
<script setup lang="jsx">
import { ref, computed } from 'vue'
import { Input, Select } from 'tdesign-vue-next'
import { useRoute } from 'vue-router'
import { useRouter } from 'vue-router'
import dayjs from 'dayjs'
const route = useRoute()
const router = useRouter()
const initData = new Array(1).fill(null).map((_, i) => ({
key: String(i + 1),
//
firstName: route.query.name,
//
status: route.query.department,
//
classname: route.query.grade,
letters: [],
createTime: dayjs().format('YYYY-MM-DD')
}))
//
const STATUS_OPTIONS = [
{ label: '机电工程系', value: '机电工程系' },
{ label: '护理分院', value: '护理分院' },
{ label: '建筑系', value: '建筑系' },
{ label: '材料科学与工程系', value: '材料科学与工程系' },
{ label: '审批环境科学与工程系过期', value: '审批环境科学与工程系过期' }
]
//
const CLASS_NAME = [
{ label: '机制1班', value: '机制1班' },
{ label: '材料1班', value: '材料1班' },
{ label: '环境1班', value: '环境1班' },
{ label: '建筑1班', value: '建筑1班' },
{ label: '护理1班', value: '护理1班' }
]
const align = ref('left')
const data = ref([...initData])
const editableCellState = cellParams => {
const { row } = cellParams
return row.status !== 2
}
const tableRef = ref()
const columns = computed(() => [
{
title: '学生姓名',
colKey: 'firstName',
align: align.value,
edit: {
component: Input,
props: {
clearable: true,
autofocus: true
},
validateTrigger: 'change',
on: editContext => ({
onBlur: () => {
console.log('失去焦点', editContext)
},
onEnter: ctx => {
ctx?.e?.preventDefault()
console.log('onEnter', ctx)
}
}),
abortEditOnEvent: ['onEnter'],
onEdited: context => {
console.log(context)
const newData = [...data.value]
newData.splice(context.rowIndex, 1, context.newRowData)
data.value = newData
console.log('Edit firstName:', context)
},
defaultEditable: true
}
},
{
title: '学生部门',
colKey: 'status',
cell: (h, { row }) =>
STATUS_OPTIONS.find(t => t.value === row.status)?.label,
edit: {
component: Select,
props: {
clearable: true,
options: STATUS_OPTIONS
},
on: editContext => ({
onChange: params => {
console.log('status changed', editContext, params)
}
}),
onEdited: context => {
data.value.splice(context.rowIndex, 1, context.newRowData)
}
}
},
{
title: '学生班级',
colKey: 'classname',
cell: (h, { row }) =>
CLASS_NAME.find(t => t.value === row.classname)?.label,
edit: {
component: Select,
props: {
clearable: true,
options: CLASS_NAME
},
on: editContext => ({
onChange: params => {
console.log('status changed', editContext, params)
}
}),
onEdited: context => {
data.value.splice(context.rowIndex, 1, context.newRowData)
}
}
},
{
title: '学生状态',
colKey: 'letters',
cell: (h, { row }) => row.letters.join('、'),
edit: {
keepEditMode: true,
component: Select,
props: () => {
return {
multiple: true,
minCollapsedNum: 1,
options: [
{ label: '初级学生', value: '2000元' },
{ label: '中级学生', value: '3000元' },
{ label: '高级学生', value: '4000元' },
{ label: '老年学生', value: '5000元' },
{ label: '神级学生', value: '6000元' }
].filter(t => (t.show === undefined ? true : t.show()))
}
},
onEdited: context => {
data.value.splice(context.rowIndex, 1, context.newRowData)
}
}
},
{
title: '应缴金额',
colKey: 'letters',
cell: (h, { row }) => row.letters.join('、'),
edit: {
keepEditMode: true,
component: Select,
props: () => {
return {
multiple: true,
minCollapsedNum: 1
}
},
onEdited: context => {
data.value.splice(context.rowIndex, 1, context.newRowData)
}
}
},
{
title: '创建日期',
colKey: 'createTime'
},
{
title: '操作',
colKey: 'operation'
}
])
const handleEdit = row => {
router.push({
path: 'bill-bill',
query: row
})
console.log(row)
}
</script>
<style scoped lang="less"></style>

View File

@ -1,5 +1,7 @@
import Layout from "@/layout/index.vue"; import Layout from "@/layout/index.vue";
import BillManage from "@/pages/finance-bill-manage/billStock.vue"; import BillStockURL from "@/pages/finance-bill-manage/billStock.vue";
import BillCancelURL from "@/pages/finance-bill-manage/billCancel.vue";
import BillReceiptURL from "@/pages/finance-bill-manage/billReceipt.vue";
const financeBillManage = [ const financeBillManage = [
{ {
@ -11,11 +13,27 @@ const financeBillManage = [
{ {
path: "BillStock", path: "BillStock",
name: "billStock", name: "billStock",
component: BillManage, component: BillStockURL,
meta: { meta: {
title: "票据上传", title: "票据上传",
}, },
}, },
{
path: "BillCancel",
name: "billCancel",
component: BillCancelURL,
meta: {
title: "票据退库",
},
},
{
path: "BillReceipt",
name: "billReceipt",
component: BillReceiptURL,
meta: {
title: "票据领用",
},
},
], ],
}, },
]; ];

View File

@ -15,6 +15,18 @@ const ReceivablesManagement = [
title: "应收款管理", title: "应收款管理",
}, },
}, },
{
path: "/billCollected",
name: "BillCollected",
component: () => import("@/pages/receivables-management/billCollected.vue"),
meta: { title: "票据收款", hidden: false },
},
{
path: "/bill-bill",
name: "BillBill",
component: () => import("@/pages/receivables-management/Bill.vue"),
meta: { title: "票据", hidden: false },
}
], ],
}, },
]; ];

30
src/stores/billCancel.js Normal file
View File

@ -0,0 +1,30 @@
import { defineStore } from "pinia";
import { reqCancelList } from "@/api/finance-bill-manage/cancelList";
export const useCancel = defineStore("CancelList", {
state: () => {
return {
cancelList: [],
};
},
actions: {
async getCancelList() {
let { data } = await reqCancelList();
this.cancelList = data.list;
return this.cancelList;
},
editApprovalStatus(arr) {
console.log(arr);
const index = this.cancelList.findIndex((item) => item.id === arr.row.id);
if (index !== -1) {
console.log("index", index);
this.cancelList[index] = arr.row;
}
},
deleteCancelList(item) {
let arr = this.cancelList.filter((i) => i.id !== item.id);
this.cancelList = arr;
},
},
persist: true,
});

19
src/stores/billReceipt.js Normal file
View File

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

View File

@ -1,5 +1,5 @@
import { defineStore } from "pinia"; import { defineStore } from "pinia";
import { reqStockList } from "@/api/stockList"; import { reqStockList } from "@/api/finance-bill-manage/stockList";
export const useStock = defineStore("menuManagement", { export const useStock = defineStore("menuManagement", {
state: () => { state: () => {

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(94vh - 50px); height: calc(94vh - 64px);
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
} }
@ -203,3 +203,6 @@ a:active {
.t-button--variant-text .t-button__text:hover { .t-button--variant-text .t-button__text:hover {
color: #8799a3; color: #8799a3;
} }
.t-is-disabled .t-button__text {
color: #d3d3d3 !important;
}

View File

@ -49,3 +49,7 @@ a:active {
.t-button--variant-text .t-button__text:hover { .t-button--variant-text .t-button__text:hover {
color: #8799a3; color: #8799a3;
} }
// 禁用的颜色
.t-is-disabled .t-button__text{
color: #d3d3d3 !important;
}