✨ 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,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

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

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