feat: 票据领用管理页面布局完成,左侧树状图完成(还没有加点击事件)

This commit is contained in:
ycy 2024-04-07 18:02:23 +08:00
parent e0ea35c789
commit ec58a2a81c
8 changed files with 481 additions and 201 deletions

View File

@ -13,6 +13,29 @@ const StockList = Mock.mock({
}, },
], ],
}); });
const personName = () => {
return [
{
label: "员工名单",
children: [
{
label: "孙东宇",
},
{
label: "杨春宇",
},
{
label: "吕才卓",
},
{
label: "刘欣宇",
},
],
},
];
};
const CancelList = Mock.mock({ const CancelList = Mock.mock({
"list|20-30": [ "list|20-30": [
{ {
@ -49,4 +72,15 @@ export default [
}; };
}, },
}, },
{
url: "/api/personName",
method: "get",
response: () => {
const list = personName();
return {
code: 200,
data: 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

@ -11,6 +11,9 @@
<t-menu-item value="1-2" to="/Bill/BillCancel"> <t-menu-item value="1-2" to="/Bill/BillCancel">
<span>票据退库管理</span> <span>票据退库管理</span>
</t-menu-item> </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>

View File

@ -1,116 +1,129 @@
<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="scarchData" ref="form"
label-width="calc(2em + 40px)" :data="scarchData"
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; margin-top: 1px"> >
<t-form-item label="票据编号:" name="billserial"> <div style="margin-left: 1rem">
<t-input v-model="scarchData.billserial" maxlength="10"></t-input> <t-form-item label="票据编号:" name="billserial">
</t-form-item> <t-input v-model="scarchData.billserial" maxlength="10"></t-input>
</t-form-item>
<t-form-item label="退库日期:" name="appleDate"> <t-form-item label="退库日期:" name="appleDate">
<t-date-picker v-model="scarchData.appleDate" clearable /> <t-date-picker v-model="scarchData.appleDate" clearable />
</t-form-item> </t-form-item>
<t-form-item label="票据类型:" name="billType"> <t-form-item
<t-select label="票据类型:"
v-model="scarchData.billType" name="billType"
placeholder="请选择票据类型" style="margin-bottom: 0.3rem"
clearable
> >
<t-option <t-select
v-for="item in billType" v-model="scarchData.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"
<t-form-item label="审批状态:" name="approvalStatus"> :value="item.value"
<t-select :label="item.label"
v-model="scarchData.approvalStatus" ></t-option>
placeholder="请选择审批状态" </t-select>
clearable </t-form-item>
<t-form-item
label="审批状态:"
name="approvalStatus"
style="margin-bottom: 0.3rem"
> >
<t-option <t-select
v-for="item in approvalStatus" v-model="scarchData.approvalStatus"
:key="item.value" placeholder="请选择审批状态"
:value="item.value" clearable
:label="item.label" >
></t-option> <t-option
</t-select> v-for="item in approvalStatus"
</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
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 #approvalStatus="{ row }"> <t-button theme="primary" type="submit">查询</t-button>
<div v-for="item in approvalStatus" :key="item"> <t-button theme="primary" type="reset">重置</t-button>
<t-tag </t-form-item>
v-if="row.approvalStatus === item.value" </t-form>
:theme="tagColor(row.approvalStatus)" </t-header>
variant="light" <t-content class="table-box">
> <div class="table-header">
{{ item.label }} <div>
</t-tag> <h4 style="font-size: 110%">票据列表</h4>
</div> </div>
</template> <div>
<template #status="slotProps"> <t-button
<t-button shape="circle"
theme="default" theme="primary"
variant="text" @click="refresh"
size="small" style="margin-left: 0.8rem"
@click="Approve(slotProps)" >
> <template #icon><load-icon /></template>
<span v-if="slotProps.row.approvalStatus === 0">{{ "审批" }}</span> </t-button>
<span v-if="slotProps.row.approvalStatus === 3">{{ </div>
"重新审批" </div>
}}</span> <t-base-table
</t-button> hover
</template> row-key="index"
</t-base-table> :loading="loading"
</div> :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-space>
<t-dialog <t-dialog
ref="postForm" ref="postForm"
@ -434,7 +447,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;
@ -449,4 +462,3 @@ onMounted(() => {
justify-content: space-between; justify-content: space-between;
} }
</style> </style>
@/api/finance-bill-manage/cancelList

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,98 +1,104 @@
<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; margin-top: 1px"> >
<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"
@ -473,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;
@ -488,4 +494,3 @@ onMounted(() => {
justify-content: space-between; justify-content: space-between;
} }
</style> </style>
@/api/finance-bill-manage/stockList

View File

@ -1,6 +1,7 @@
import Layout from "@/layout/index.vue"; import Layout from "@/layout/index.vue";
import BillStockURL 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 BillCancelURL from "@/pages/finance-bill-manage/billCancel.vue";
import BillReceiptURL from "@/pages/finance-bill-manage/billReceipt.vue";
const financeBillManage = [ const financeBillManage = [
{ {
@ -22,7 +23,15 @@ const financeBillManage = [
name: "billCancel", name: "billCancel",
component: BillCancelURL, component: BillCancelURL,
meta: { meta: {
title: "票据上传", title: "票据退库",
},
},
{
path: "BillReceipt",
name: "billReceipt",
component: BillReceiptURL,
meta: {
title: "票据领用",
}, },
}, },
], ],

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,
});