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({
"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">
<span>票据退库管理</span>
</t-menu-item>
<t-menu-item value="1-3" to="/Bill/BillReceipt">
<span>票据领用管理</span>
</t-menu-item>
</t-submenu>
<t-submenu value="2" title="应收款管理">
<template #icon>

View File

@ -1,116 +1,129 @@
<template>
<div class="back-color">
<div 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>
<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">
<t-select
v-model="scarchData.billType"
placeholder="请选择票据类型"
clearable
<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-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">
<t-select
v-model="scarchData.approvalStatus"
placeholder="请选择审批状态"
clearable
<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-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>
</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>
<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>
</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>
<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>
</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>
</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"
@ -434,7 +447,7 @@ onMounted(() => {
}
}
.table-box {
height: 41rem;
height: 42rem;
background-color: @base-white-color;
padding: 1rem;
padding-top: 0;
@ -449,4 +462,3 @@ onMounted(() => {
justify-content: space-between;
}
</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>
<div class="back-color">
<div class="scarch-box">
<t-form
ref="form"
:data="formData"
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="formData.billserial" maxlength="10"></t-input>
</t-form-item>
<t-layout style="height: 90%; background-color: #f5f7fb">
<t-header class="scarch-box">
<t-form
ref="form"
:data="formData"
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="formData.billserial" maxlength="10"></t-input>
</t-form-item>
<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-form-item label="入库日期:" name="stockDate">
<t-date-picker v-model="formData.stockDate" clearable />
</t-form-item>
<t-form-item
label="票据类型:"
name="billType"
style="margin-bottom: 0.3rem"
>
<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>
<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"
: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>
<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>
</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-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 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>
</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-dialog
ref="postForm"
@ -473,7 +479,7 @@ onMounted(() => {
}
}
.table-box {
height: 41rem;
height: 42rem;
background-color: @base-white-color;
padding: 1rem;
padding-top: 0;
@ -488,4 +494,3 @@ onMounted(() => {
justify-content: space-between;
}
</style>
@/api/finance-bill-manage/stockList

View File

@ -1,6 +1,7 @@
import Layout from "@/layout/index.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 = [
{
@ -22,7 +23,15 @@ const financeBillManage = [
name: "billCancel",
component: BillCancelURL,
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,
});