✨ feat: 票据领用管理页面完成

mock/modules/ycy.js

@@ -13,6 +13,60 @@ const StockList = Mock.mock({
     },
   ],
 });
+const ReceiptList = Mock.mock([
+  {
+    "list|20-30": [
+      {
+        "id|+1": 0,
+        billserial: "@integer(100000000,199999999)1",
+        proposer: "孙东宇",
+        billType: "@integer(0,4)",
+        receiptNum: "@integer(1,10)张",
+        receiptDate: "@date",
+        useInfo: "@csentence",
+      },
+    ],
+  },
+  {
+    "list|20-30": [
+      {
+        "id|+1": 0,
+        billserial: "@integer(100000000,199999999)1",
+        proposer: "杨春宇",
+        billType: "@integer(0,4)",
+        receiptNum: "@integer(1,10)张",
+        receiptDate: "@date",
+        useInfo: "@csentence",
+      },
+    ],
+  },
+  {
+    "list|20-30": [
+      {
+        "id|+1": 0,
+        billserial: "@integer(100000000,199999999)1",
+        proposer: "吕才卓",
+        billType: "@integer(0,4)",
+        receiptNum: "@integer(1,10)张",
+        receiptDate: "@date",
+        useInfo: "@csentence",
+      },
+    ],
+  },
+  {
+    "list|20-30": [
+      {
+        "id|+1": 0,
+        billserial: "@integer(100000000,199999999)1",
+        proposer: "刘欣宇",
+        billType: "@integer(0,4)",
+        receiptNum: "@integer(1,10)张",
+        receiptDate: "@date",
+        useInfo: "@csentence",
+      },
+    ],
+  },
+]);
 
 const personName = () => {
   return [
@@ -83,4 +137,31 @@ export default [
       };
     },
   },
+  {
+    url: "/api/receiptList",
+    method: "post",
+    response: (req) => {
+      if (req.body.name === "孙东宇") {
+        return {
+          code: 200,
+          data: ReceiptList[0].list,
+        };
+      } else if (req.body.name === "杨春宇") {
+        return {
+          code: 200,
+          data: ReceiptList[1].list,
+        };
+      } else if (req.body.name === "吕才卓") {
+        return {
+          code: 200,
+          data: ReceiptList[2].list,
+        };
+      } else {
+        return {
+          code: 200,
+          data: ReceiptList[3].list,
+        };
+      }
+    },
+  },
 ];

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

@@ -2,6 +2,8 @@ import request from "@/utils/requestMock";
 
 const API = {
   PERSON_LIST: "/personName",
+  RECEIPT_LIST: "/receiptList",
 };
 
 export const reqPersonName = () => request.get(API.PERSON_LIST);
+export const reqReceiptList = (data) => request.post(API.RECEIPT_LIST, data);

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

@@ -371,7 +371,7 @@ const headerQuery = () => {
       if (
         scarchData.value.billserial === "" &&
         scarchData.value.billType === "" &&
-        scarchData.value.stockDate === ""
+        scarchData.value.appleDate === ""
       ) {
         arrList = item;
       }

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

@@ -35,6 +35,28 @@
                     maxlength="10"
                   ></t-input>
                 </t-form-item>
+
+                <t-form-item label="领用时间:" name="receiptDate">
+                  <t-date-picker v-model="scarchData.receiptDate" clearable />
+                </t-form-item>
+                <t-form-item
+                  label="票据类型:"
+                  name="billType"
+                  style="margin-bottom: 0.3rem"
+                >
+                  <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>
               </div>
               <t-form-item style="margin-right: 1rem">
                 <t-button theme="primary" type="submit">查询</t-button>
@@ -75,32 +97,6 @@
                   }}</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>
@@ -110,35 +106,156 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from "vue";
+import { ref, onMounted, nextTick } 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 tableData = ref([]);
+const data = ref([]);
+const columns = ref([
+  {
+    colKey: "serial-number",
+    title: "序号",
+    width: 50,
+  },
+  {
+    colKey: "billserial",
+    title: "票据编号",
+    align: "center",
+    width: 100,
+  },
+  {
+    colKey: "proposer",
+    title: "申请人",
+    align: "center",
+    width: 100,
+  },
+  {
+    colKey: "billType",
+    title: "票据类型",
+    align: "center",
+    width: 100,
+  },
+  {
+    colKey: "receiptNum",
+    title: "领用数量",
+    align: "center",
+    width: 100,
+  },
+  {
+    colKey: "receiptDate",
+    title: "领用时间",
+    align: "center",
+    width: 100,
+  },
+  {
+    colKey: "useInfo",
+    title: "用途",
+    ellipsis: true,
+    align: "center",
+    width: 200,
+  },
+]);
+// 票据类型
+const billType = ref([
+  { label: "票据类型1", value: 0 },
+  { label: "票据类型2", value: 1 },
+  { label: "票据类型3", value: 2 },
+  { label: "票据类型4", value: 3 },
+  { label: "票据类型5", value: 4 },
+]);
 
 // 查询表单
 const scarchData = ref({
   billserial: "",
 });
 
+// 分页
+const pagination = ref({
+  defaultCurrent: 1,
+  defaultPageSize: 10,
+  total: 50,
+});
+
 // 获取票据列表
 const personList = async () => {
   personName.value = await receiptList.getPersonNameList();
-  console.log(personName.value);
 };
 
-const onClick = (context) => {
+// 查询
+const headerQuery = () => {
+  tableData.value = data.value;
+  console.log(
+    scarchData.value.billserial,
+    scarchData.value.billType,
+    scarchData.value.receiptDate
+  );
+  if (
+    scarchData.value.billserial === "" &&
+    (scarchData.value.billType === undefined ||
+      scarchData.value.billType === "") &&
+    (scarchData.value.receiptDate === undefined ||
+      scarchData.value.receiptDate === "")
+  ) {
+    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.receiptDate === item.receiptDate) {
+        arrList = item;
+      }
+      if (
+        scarchData.value.billserial === "" &&
+        scarchData.value.billType === "" &&
+        scarchData.value.receiptDate === ""
+      ) {
+        arrList = item;
+      }
+      return arrList;
+    });
+    tableData.value = list;
+    pagination.value.total = list.length;
+  }
+};
+// 查询表单重置
+const resetting = () => {
+  scarchData.value = {
+    billserial: "",
+    billType: "",
+    receiptDate: "",
+  };
+  getNewTable();
+};
+
+const onClick = async (context) => {
   // 判断是否为顶层节点（无父节点）
   if (context.node.value === "t1") {
     return;
   }
-  console.info("onClick", context);
+  // 获取票据列表
+  tableData.value = await receiptList.getReceiptList({
+    name: context.node.label,
+  });
+  data.value = await receiptList.getReceiptList({
+    name: context.node.label,
+  });
+  pagination.value.total = tableData.value.length;
+};
+// 刷新列表
+const refresh = () => {
+  getTableData();
 };
-
 // 判断menuManagement里面是否存在数据
-const getNewTable = () => {
+const getPersonName = () => {
   let arr = JSON.parse(localStorage.getItem("ReceiptList"));
   if (arr) {
     personName.value = arr.personName;
@@ -146,9 +263,32 @@ const getNewTable = () => {
     personList();
   }
 };
+// 判断menuManagement里面是否存在数据
+const getTableData = async () => {
+  let arr = JSON.parse(localStorage.getItem("ReceiptList"));
+  if (arr.receiptList.length > 0) {
+    tableData.value = arr.receiptList;
+  } else {
+    await nextTick();
+    // 找到第一个具有子节点的节点并模拟点击
+    const firstNodeWithChildren = personName.value.find(
+      (node) => Array.isArray(node.children) && node.children.length > 0
+    );
+    if (firstNodeWithChildren) {
+      const simulatedContext = {
+        node: {
+          label: "孙东宇",
+        },
+      };
+      onClick(simulatedContext);
+    }
+  }
+};
 
-onMounted(() => {
+onMounted(async () => {
-  getNewTable();
+  getPersonName();
+  getTableData();
+  // 等待 personName 数据加载完成
 });
 </script>
 

src/stores/billReceipt.js

@@ -1,10 +1,14 @@
 import { defineStore } from "pinia";
-import { reqPersonName } from "@/api/finance-bill-manage/receiptList";
+import {
+  reqPersonName,
+  reqReceiptList,
+} from "@/api/finance-bill-manage/receiptList";
 
 export const useReceiptList = defineStore("ReceiptList", {
   state: () => {
     return {
       personName: [],
+      receiptList: [],
     };
   },
   actions: {
@@ -14,6 +18,12 @@ export const useReceiptList = defineStore("ReceiptList", {
       console.log(this.personName);
       return this.personName;
     },
+
+    async getReceiptList(obj) {
+      const { data } = await reqReceiptList(obj);
+      this.receiptList = data;
+      return this.receiptList;
+    },
   },
   persist: true,
 });