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

mock/modules/ycy.js

@@ -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,
+      };
+    },
+  },
 ];

src/api/finance-bill-manage/receiptList.js

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

src/layout/components/LayoutAside.vue

@@ -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>

src/pages/finance-bill-manage/billCancel.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="back-color">
-    <div class="scarch-box">
+    <t-layout style="height: 90%; background-color: #f5f7fb">
+      <t-header class="scarch-box">
         <t-form
           ref="form"
           :data="scarchData"
@@ -11,7 +12,7 @@
           @reset="resetting"
           @submit="headerQuery"
         >
-        <div style="margin-left: 1rem; margin-top: 1px">
+          <div style="margin-left: 1rem">
             <t-form-item label="票据编号:" name="billserial">
               <t-input v-model="scarchData.billserial" maxlength="10"></t-input>
             </t-form-item>
@@ -19,7 +20,11 @@
             <t-form-item label="退库日期:" name="appleDate">
               <t-date-picker v-model="scarchData.appleDate" clearable />
             </t-form-item>
-          <t-form-item label="票据类型:" name="billType">
+            <t-form-item
+              label="票据类型:"
+              name="billType"
+              style="margin-bottom: 0.3rem"
+            >
               <t-select
                 v-model="scarchData.billType"
                 placeholder="请选择票据类型"
@@ -33,7 +38,11 @@
                 ></t-option>
               </t-select>
             </t-form-item>
-          <t-form-item label="审批状态:" name="approvalStatus">
+            <t-form-item
+              label="审批状态:"
+              name="approvalStatus"
+              style="margin-bottom: 0.3rem"
+            >
               <t-select
                 v-model="scarchData.approvalStatus"
                 placeholder="请选择审批状态"
@@ -53,8 +62,8 @@
             <t-button theme="primary" type="reset">重置</t-button>
           </t-form-item>
         </t-form>
-    </div>
+      </t-header>
-    <div class="table-box">
+      <t-content class="table-box">
         <div class="table-header">
           <div>
             <h4 style="font-size: 110%">票据列表</h4>
@@ -103,14 +112,18 @@
               size="small"
               @click="Approve(slotProps)"
             >
-            <span v-if="slotProps.row.approvalStatus === 0">{{ "审批" }}</span>
+              <span v-if="slotProps.row.approvalStatus === 0">{{
+                "审批"
+              }}</span>
               <span v-if="slotProps.row.approvalStatus === 3">{{
                 "重新审批"
               }}</span>
             </t-button>
           </template>
         </t-base-table>
-    </div>
+      </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

src/pages/finance-bill-manage/billReceipt.vue

@@ -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>

src/pages/finance-bill-manage/billStock.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="back-color">
-    <div class="scarch-box">
+    <t-layout style="height: 90%; background-color: #f5f7fb">
+      <t-header class="scarch-box">
         <t-form
           ref="form"
           :data="formData"
@@ -11,7 +12,7 @@
           @reset="resetting"
           @submit="headerQuery"
         >
-        <div style="margin-left: 1rem; margin-top: 1px">
+          <div style="margin-left: 1rem">
             <t-form-item label="票据编号:" name="billserial">
               <t-input v-model="formData.billserial" maxlength="10"></t-input>
             </t-form-item>
@@ -19,7 +20,11 @@
             <t-form-item label="入库日期:" name="stockDate">
               <t-date-picker v-model="formData.stockDate" clearable />
             </t-form-item>
-          <t-form-item label="票据类型:" name="billType">
+            <t-form-item
+              label="票据类型:"
+              name="billType"
+              style="margin-bottom: 0.3rem"
+            >
               <t-select
                 v-model="formData.billType"
                 placeholder="请选择票据类型"
@@ -39,8 +44,8 @@
             <t-button theme="primary" type="reset">重置</t-button>
           </t-form-item>
         </t-form>
-    </div>
+      </t-header>
-    <div class="table-box">
+      <t-content class="table-box">
         <div class="table-header">
           <div>
             <h4 style="font-size: 110%">票据列表</h4>
@@ -92,7 +97,8 @@
             >
           </template>
         </t-base-table>
-    </div>
+      </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

src/router/modules/financeBillManage.js

@@ -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: "票据领用",
         },
       },
     ],

src/stores/billReceipt.js

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