feat: 票据退库管理页面完成

This commit is contained in:
ycy 2024-04-07 16:03:27 +08:00
parent 68e6e55810
commit dcf662b4f4
11 changed files with 544 additions and 12 deletions

View File

@ -2,7 +2,7 @@ import Mock from "mockjs";
const StockList = Mock.mock({
"list|20-30": [
{
"id|+1": "0",
"id|+1": 0,
billserial: "@integer(100000000,199999999)1",
billType: "@integer(0,4)",
stockNum: "@integer(1,2)",
@ -13,6 +13,20 @@ const StockList = Mock.mock({
},
],
});
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 [
{
@ -25,4 +39,14 @@ export default [
};
},
},
{
url: "/api/cancelList",
method: "get",
response: () => {
return {
code: 200,
data: CancelList,
};
},
},
];

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

@ -8,6 +8,9 @@
<t-menu-item value="1-1" to="/Bill/BillStock">
<span>票据入库管理</span>
</t-menu-item>
<t-menu-item value="1-2" to="/Bill/BillCancel">
<span>票据退库管理</span>
</t-menu-item>
</t-submenu>
<t-submenu value="2" title="应收款管理">
<template #icon>

View File

@ -0,0 +1,452 @@
<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-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-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-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>
</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>
</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">
<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: 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) {
justify-content: space-between;
}
</style>
@/api/finance-bill-manage/cancelList

View File

@ -11,7 +11,7 @@
@reset="resetting"
@submit="headerQuery"
>
<div style="margin-left: 1rem">
<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>
@ -97,7 +97,7 @@
<t-dialog
ref="postForm"
v-model:visible="visiblePost"
header="新增职位"
header="新增票据"
width="40%"
:confirm-on-enter="true"
:on-close="closePost"
@ -217,10 +217,9 @@
</template>
<script setup>
import { reactive, ref, onMounted } from "vue";
import { 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";
//
@ -344,7 +343,7 @@ const resetting = () => {
billType: "",
stockDate: "",
};
tableList();
getNewTable();
};
//
@ -355,10 +354,9 @@ const headerQuery = () => {
(formData.value.billType === undefined || formData.value.billType === "") &&
formData.value.stockDate === ""
) {
tableList();
getNewTable();
} else {
const list = tableData.value.filter((item) => {
console.log(item);
let arrList;
if (formData.value.billserial === item.billserial) {
arrList = item;
@ -450,6 +448,7 @@ const getNewTable = () => {
let arr = JSON.parse(localStorage.getItem("menuManagement"));
if (arr) {
tableData.value = arr.stockList;
data.value = arr.stockList;
pagination.value.total = tableData.value.length;
} else {
tableList();
@ -489,3 +488,4 @@ onMounted(() => {
justify-content: space-between;
}
</style>
@/api/finance-bill-manage/stockList

View File

@ -1,5 +1,6 @@
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";
const financeBillManage = [
{
@ -11,7 +12,15 @@ const financeBillManage = [
{
path: "BillStock",
name: "billStock",
component: BillManage,
component: BillStockURL,
meta: {
title: "票据上传",
},
},
{
path: "BillCancel",
name: "billCancel",
component: BillCancelURL,
meta: {
title: "票据上传",
},

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

View File

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

View File

@ -186,7 +186,7 @@ pre {
.back-color {
background-color: #f5f7fb;
padding: 16px 24px;
height: calc(94vh - 50px);
height: calc(94vh - 64px);
overflow-y: auto;
overflow-x: hidden;
}
@ -203,3 +203,6 @@ a:active {
.t-button--variant-text .t-button__text:hover {
color: #8799a3;
}
.t-is-disabled .t-button__text {
color: #d3d3d3 !important;
}

View File

@ -48,4 +48,8 @@ a:active {
// 改变文字按钮移入的颜色
.t-button--variant-text .t-button__text:hover {
color: #8799a3;
}
// 禁用的颜色
.t-is-disabled .t-button__text{
color: #d3d3d3 !important;
}