Merge branch 'dev' of https://gitea.dykj.co/sundongyu/dykj-college-back-office-management-system into dev

mock/modules/ycy.js

@@ -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)",
@@ -14,6 +14,43 @@ const StockList = Mock.mock({
   ],
 });
 
+const personName = () => {
+  return [
+    {
+      label: "员工名单",
+      children: [
+        {
+          label: "孙东宇",
+        },
+        {
+          label: "杨春宇",
+        },
+        {
+          label: "吕才卓",
+        },
+        {
+          label: "刘欣宇",
+        },
+      ],
+    },
+  ];
+};
+
+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 [
   {
     url: "/api/stockList",
@@ -25,4 +62,25 @@ export default [
       };
     },
   },
+  {
+    url: "/api/cancelList",
+    method: "get",
+    response: () => {
+      return {
+        code: 200,
+        data: CancelList,
+      };
+    },
+  },
+  {
+    url: "/api/personName",
+    method: "get",
+    response: () => {
+      const list = personName();
+      return {
+        code: 200,
+        data: list,
+      };
+    },
+  },
 ];

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

@@ -0,0 +1,7 @@
+import request from "@/utils/requestMock";
+
+const API = {
+  CANCEL_LIST: "/cancelList",
+};
+
+export const reqCancelList = () => request.get(API.CANCEL_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/api/login.js

@@ -1,8 +1,8 @@
 import request from "@/utils/request";
 // 统一管理接口
 const API = {
-  LOGIN_URL: "/api/user",
+  LOGIN_URL: "/api/login",
 };
 
-export const reqUser = () => request.get(API.LOGIN_URL);
+export const reqUser = () => request.post(API.LOGIN_URL);
 export const reqUserone = (data) => request.post(API.LOGIN_URL, data);

src/layout/components/LayoutAside.vue

@@ -8,6 +8,12 @@
         <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-menu-item value="1-3" to="/Bill/BillReceipt">
+          <span>票据领用管理</span>
+        </t-menu-item>
       </t-submenu>
       <t-submenu value="2" title="应收款管理">
         <template #icon>

src/layout/components/LayoutContent.vue

@@ -11,4 +11,4 @@
 
 <script setup></script>
 
-<style lang="scss" scoped></style>
+<style lang="less" scoped></style>

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

@@ -0,0 +1,464 @@
+<template>
+  <div class="back-color">
+    <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"
+              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>
+            <t-form-item
+              label="审批状态:"
+              name="approvalStatus"
+              style="margin-bottom: 0.3rem"
+            >
+              <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>
+      </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-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: 42rem;
+  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>

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,103 +1,109 @@
 <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">
-          <t-form-item label="票据编号:" name="billserial">
-            <t-input v-model="formData.billserial"></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="look(slotProps)"
-            >查看</t-button
-          >
-          <t-button
-            theme="default"
-            variant="text"
-            size="small"
-            @click="deleteBtn(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"
         v-model:visible="visiblePost"
-        header="新增职位"
+        header="新增票据"
         width="40%"
         :confirm-on-enter="true"
         :on-close="closePost"
@@ -217,175 +223,247 @@
 </template>
 
 <script setup>
-import { reactive, 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'
-// import { number } from "echarts";
+import { ref, onMounted } from "vue";
+import { MessagePlugin } from "tdesign-vue-next";
+import { AddIcon, LoadIcon } from "tdesign-icons-vue-next";
+import { useStock } from "@/stores/billStock";
 
-const loading = ref(false)
-const visiblePost = ref(false)
-const stockList = useStock()
-const tableData = ref()
-const data = ref()
+// 数据
+const loading = ref(false);
+const visiblePost = ref(false);
+const stockList = useStock();
+const tableData = ref();
+const data = ref();
+// 表格表头
 const columns = ref([
   {
-    colKey: 'serial-number',
-    title: '序号',
-    width: 50
+    colKey: "serial-number",
+    title: "序号",
+    width: 50,
   },
   {
-    colKey: 'billserial',
-    title: '票据编号',
-    align: 'center',
-    width: '100'
+    colKey: "billserial",
+    title: "票据编号",
+    align: "center",
+    width: "100",
   },
   {
-    colKey: 'billType',
-    title: '票据类型',
-    align: 'center',
-    width: '100'
+    colKey: "billType",
+    title: "票据类型",
+    align: "center",
+    width: "100",
   },
   {
-    colKey: 'stockNum',
-    title: '入库数量',
-    align: 'center',
-    width: '100'
+    colKey: "stockNum",
+    title: "入库数量",
+    align: "center",
+    width: "100",
   },
   {
-    colKey: 'unit',
-    title: '单位（如：本、张）',
-    align: 'center',
-    width: '100'
+    colKey: "unit",
+    title: "单位（如：本、张）",
+    align: "center",
+    width: "100",
   },
   {
-    colKey: 'stockDate',
-    title: '入库日期',
-    align: 'center',
-    width: '100'
+    colKey: "stockDate",
+    title: "入库日期",
+    align: "center",
+    width: "100",
   },
   {
-    colKey: 'operator',
-    title: '操作员',
-    align: 'center',
-    width: '100'
+    colKey: "operator",
+    title: "操作员",
+    align: "center",
+    width: "100",
   },
   {
-    colKey: 'remark',
-    title: '备注',
-    align: 'center',
-    width: '100'
+    colKey: "remark",
+    title: "备注",
+    align: "center",
+    width: "100",
   },
   {
-    colKey: 'status',
-    title: '操作',
+    colKey: "status",
+    title: "操作",
     width: 120,
-    align: 'center',
-    fixed: 'right'
-  }
-])
+    align: "center",
+    fixed: "right",
+  },
+]);
 
+// 票据类型
 const billType = ref([
-  { label: '票据类型1', value: 0 },
-  { label: '票据类型2', value: 1 },
-  { label: '票据类型3', value: 2 },
-  { label: '票据类型4', value: 3 },
-  { label: '票据类型5', value: 4 }
-])
+  { label: "票据类型1", value: 0 },
+  { label: "票据类型2", value: 1 },
+  { label: "票据类型3", value: 2 },
+  { label: "票据类型4", value: 3 },
+  { label: "票据类型5", value: 4 },
+]);
 
+// 获取票据列表
 const tableList = async () => {
-  tableData.value = await stockList.getStockList()
-  data.value = await stockList.getStockList()
-  pagination.value.total = tableData.value.length
-}
+  loading.value = true;
+  tableData.value = await stockList.getStockList();
+  data.value = await stockList.getStockList();
+  pagination.value.total = tableData.value.length;
+  const timerId = setTimeout(() => {
+    loading.value = false;
+    clearInterval(timerId);
+  }, 300);
+};
 
+// 刷新列表
+const refresh = () => {
+  tableList();
+};
+
+// 弹出框表单
 const dialogData = ref({
-  billserial: '',
-  stockNum: number,
-  unit: '',
-  operator: '',
-  remark: '',
-  stockDate: ''
-})
+  billserial: "",
+  stockNum: Number,
+  unit: "",
+  operator: "",
+  remark: "",
+  stockDate: "",
+});
+
+// 查询表单
 const formData = ref({
-  billserial: '',
-  billType: '',
-  stockDate: ''
-})
+  billserial: "",
+  billType: "",
+  stockDate: "",
+});
+
+// 分页
 const pagination = ref({
   defaultCurrent: 1,
   defaultPageSize: 10,
-  total: 50
-})
+  total: 50,
+});
+
+// 查询表单重置
 const resetting = () => {
   formData.value = {
-    billserial: '',
-    billType: '',
-    stockDate: ''
-  }
-  tableList()
-}
+    billserial: "",
+    billType: "",
+    stockDate: "",
+  };
+  getNewTable();
+};
 
-const headerQuery = ({ validateResult, firstError }) => {
-  tableData.value = data.value
+// 查询
+const headerQuery = () => {
+  tableData.value = data.value;
   if (
-    formData.value.billserial === '' &&
-    (formData.value.billType === undefined || formData.value.billType === '') &&
-    formData.value.stockDate === ''
+    formData.value.billserial === "" &&
+    (formData.value.billType === undefined || formData.value.billType === "") &&
+    formData.value.stockDate === ""
   ) {
-    tableList()
+    getNewTable();
   } else {
-    const list = tableData.value.filter(item => {
-      console.log(item)
-      let arrList
+    const list = tableData.value.filter((item) => {
+      let arrList;
       if (formData.value.billserial === item.billserial) {
-        arrList = item
+        arrList = item;
       }
       if (formData.value.billType === item.billType) {
-        arrList = item
+        arrList = item;
       }
       if (formData.value.stockDate === item.stockDate) {
-        arrList = item
+        arrList = item;
       }
       if (
-        formData.value.billserial === '' &&
-        formData.value.billType === '' &&
-        formData.value.stockDate === ''
+        formData.value.billserial === "" &&
+        formData.value.billType === "" &&
+        formData.value.stockDate === ""
       ) {
-        arrList = item
+        arrList = item;
       }
-      return arrList
-    })
-    console.log(list)
-
-    tableData.value = list
+      return arrList;
+    });
+    tableData.value = list;
     // @ts-expect-error
-    pagination.value.total = list.length
+    pagination.value.total = list.length;
   }
-}
-
+};
+// 打开窗口
 const addStock = () => {
-  visiblePost.value = true
-}
+  visiblePost.value = true;
+  dialogData.value = {
+    billserial: "",
+    stockNum: "",
+    unit: "",
+    operator: "",
+    remark: "",
+    stockDate: "",
+  };
+};
+
+// 关闭窗口
+const closePost = () => {
+  visiblePost.value = false;
+};
 // 表单校验
 const FORM_RULES = {
-  billserial: [{ required: true, message: '请输入票据编号', trigger: 'blur' }],
+  billserial: [{ required: true, message: "请输入票据编号", trigger: "blur" }],
   billType: [
-    { required: true, message: '请选择票据类型', trigger: ['blur', 'change'] }
+    { required: true, message: "请选择票据类型", trigger: ["blur", "change"] },
   ],
-  stockNum: [{ required: true, message: '请输入库存数量', trigger: 'blur' }],
-  unit: [{ required: true, message: '请输入单位', trigger: 'blur' }],
+  stockNum: [{ required: true, message: "请输入库存数量", trigger: "blur" }],
+  unit: [{ required: true, message: "请输入单位", trigger: "blur" }],
   stockDate: [
-    { required: true, message: '请选择入库日期', trigger: ['blur', 'change'] }
+    { required: true, message: "请选择入库日期", trigger: ["blur", "change"] },
   ],
-  operator: [{ required: true, message: '请输入操作员', trigger: 'blur' }]
-}
-const stockAdd = () => {}
+  operator: [{ required: true, message: "请输入操作员", trigger: "blur" }],
+};
+
+// 新增
+const stockAdd = async ({ validateResult, firstError }) => {
+  if (validateResult === true) {
+    await stockList.addStockList(dialogData.value);
+    getNewTable();
+    MessagePlugin.success("提交成功");
+    visiblePost.value = false;
+  } else {
+    console.log("Validate Errors: ", firstError, validateResult);
+  }
+};
+
+// 修改
+const stockEdit = (item) => {
+  visiblePost.value = true;
+  tableData.value.forEach((itemTable) => {
+    if (itemTable.id === item.row.id) {
+      dialogData.value = itemTable;
+    }
+  });
+};
+
+// 删除
+const stockDelete = async (itme) => {
+  await stockList.deleteStockList(itme.row);
+  getNewTable();
+};
+
+// 弹出框表单重置
+const onReset = () => {};
+
+// 判断menuManagement里面是否存在数据
+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();
+  }
+};
 
 onMounted(() => {
-  tableList()
-})
+  getNewTable();
+});
 </script>
 
 <style scoped lang="less">
@@ -401,7 +479,7 @@ onMounted(() => {
   }
 }
 .table-box {
-  height: 41rem;
+  height: 42rem;
   background-color: @base-white-color;
   padding: 1rem;
   padding-top: 0;

src/pages/login/index.vue

@@ -33,10 +33,15 @@
                 <lock-on-icon slot:string="prefix-icon"></lock-on-icon>
               </t-input>
             </t-form-item>
-            <t-form-item>
+            <t-form-item class="form-actions">
               <t-button theme="primary" type="submit" block>登录</t-button>
-
-              <button @click.prevent="showForgotPasswordModal">忘记密码</button>
+              <div class="forgot-password-spacer"></div>
+              <t-button
+                type="text"
+                @click="handleForgotPasswordClick"
+                class="text"
+                >修改密码</t-button
+              >
             </t-form-item>
           </t-form>
         </div>
@@ -137,6 +142,11 @@ const onSubmit = async () => {
 onMounted(() => {
   reqUser();
 });
+
+function handleForgotPasswordClick() {
+  router.push("/password-reset")
+}
+
 </script>
 
 <style lang="less" scoped>
@@ -145,7 +155,7 @@ onMounted(() => {
   position: absolute;
   width: 100%;
   height: 100%;
-  background: url(../../assets/bg.jpeg);
+  background: url(../../assets/bg.jpg);
   background-size: cover;
   overflow: hidden;
 }
@@ -174,4 +184,18 @@ onMounted(() => {
   align-items: center;
   justify-content: center;
 }
+.form-actions {
+  display: flex;
+  justify-content: space-between;
+}
+.forgot-password-spacer {
+  flex-grow: 1;
+  width: 0;
+  height: 0;
+  margin-left: 3rem;
+}
+.text {
+  padding-left: 1.8rem;
+  padding-right: 1.8rem;
+}
 </style>

src/pages/password/index.vue

@@ -0,0 +1,197 @@
+<template>
+  <div class="password-container">
+    <div class="password-form">
+      <t-form
+        :data="formData"
+        :rules="rules"
+        ref="form"
+        @reset="onReset"
+        @submit="onSubmit"
+        @validate="onValidate"
+      >
+        <t-form-item label="学号" name="account">
+          <t-input
+            v-model="formData.account"
+            placeholder="请输入学号"
+          ></t-input>
+        </t-form-item>
+        <t-form-item label="密码" name="password">
+          <t-input
+            type="password"
+            v-model="formData.password"
+            placeholder="请输入密码"
+          ></t-input>
+        </t-form-item>
+        <t-form-item label="确认密码" name="rePassword">
+          <t-input
+            type="password"
+            v-model="formData.rePassword"
+            placeholder="请再次输入密码"
+          ></t-input>
+        </t-form-item>
+        <t-form-item style="margin-left: 6rem">
+          <t-space size="10px">
+            <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>
+  </div>
+</template>
+
+<script setup>
+import { MessagePlugin } from "tdesign-vue-next";
+import { reactive } from "vue";
+import router from "@/router";
+
+const INITIAL_DATA = {
+  account: "",
+  password: "",
+  rePassword: "",
+};
+
+const formData = reactive({
+  ...INITIAL_DATA,
+});
+
+const rules = reactive({
+  account: [
+    {
+      required: true,
+      message: "学号必填",
+      type: "error",
+    },
+    {
+      min: 10,
+      message: "输入不正确",
+    },
+    {
+      max: 10,
+      message: "输入不正确",
+    },
+  ],
+  password: [
+    {
+      required: true,
+      message: "密码必填",
+      type: "error",
+    },
+    {
+      len: 8,
+      message: "请输入 8 位密码",
+    },
+    {
+      pattern: /[A-Z]+/,
+      message: "密码必须包含大写字母",
+    },
+  ],
+  rePassword: [
+    {
+      required: true,
+      message: "密码必填",
+      type: "error",
+    },
+    {
+      len: 8,
+      message: "请输入 8 位密码",
+    },
+    {
+      pattern: /[A-Z]+/,
+      message: "密码必须包含大写字母",
+    },
+  ],
+});
+
+const onReset = () => {
+  MessagePlugin.success("重置成功");
+};
+
+const onSubmit = ({ validateResult, firstError }) => {
+  if (validateResult === true) {
+    MessagePlugin.success("提交成功");
+  } else {
+    console.log("Errors: ", validateResult);
+    MessagePlugin.warning(firstError);
+  }
+};
+const onValidate = ({ validateResult, firstError }) => {
+  if (validateResult === true) {
+    console.log("Validate Success");
+  } else {
+    console.log("Validate Errors: ", firstError, validateResult);
+  }
+};
+// 自定义异步校验器，使用 resolve 返回结果控制校验结果、校验信息、校验结果类型
+const userNameValidator = (val) =>
+  new Promise((resolve) => {
+    const timer = setTimeout(() => {
+      if (["Zhang", "Li", "Wang"].includes(val)) {
+        resolve({
+          result: true,
+        });
+      } else {
+        resolve({
+          result: false,
+          message: "用户名不存在",
+          type: "error",
+        });
+      }
+      clearTimeout(timer);
+    }, 10);
+  });
+// 自定义校验器，不同的值输出不同的校验结果。支持异步校验（文案选自某密码重置站点，如有侵权，请联系我们删除）
+const passwordValidator = (val) => {
+  if (val.length > 0 && val.length <= 2) {
+    return {
+      result: false,
+      message: "太简单了！再开动一下你的小脑筋吧！",
+      type: "error",
+    };
+  }
+  if (val.length > 2 && val.length < 4) {
+    return {
+      result: false,
+      message: "还差一点点，就是一个完美的密码了！",
+      type: "warning",
+    };
+  }
+  return {
+    result: true,
+    message: "太强了，你确定自己记得住吗！",
+    type: "success",
+  };
+};
+// 自定义异步校验器
+const rePassword = (val) =>
+  new Promise((resolve) => {
+    const timer = setTimeout(() => {
+      resolve(formData.password === val);
+      clearTimeout(timer);
+    });
+  });
+</script>
+
+<style lang="less" scoped>
+.password-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background-image: url(../../assets/bg1.jpg);
+  background-size: cover;
+  padding: 2rem;
+}
+.password-form {
+  width: 26%;
+  height: 35%;
+  background-color: rgba(255, 255, 255, 0.8);
+  border-radius: 1.25rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+</style>

src/pages/students/student.vue

@@ -39,7 +39,8 @@
 </template>
 
 <script setup>
+import { MessagePlugin } from "tdesign-vue-next";
+import { ref } from "vue";
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="less" scoped></style>

src/router/index.js

@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from "vue-router";
 import FinanceBillManage from "./modules/financeBillManage";
 import ReceivablesManagement from "./modules/receivables-management";
 import Login from "@/pages/login/index.vue";
+import Password from "@/pages/password/index.vue";
 import Student from "@/pages/students/student.vue";
 
 import Layout from "@/layout/index.vue";
@@ -14,6 +15,11 @@ const router = createRouter({
       name: "login",
       component: Login,
     },
+    {
+      path: "/password-reset",
+      name: "password",
+      component: Password,
+    },
     {
       path: "/student",
       name: "student",

src/router/modules/financeBillManage.js

@@ -1,5 +1,7 @@
 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";
+import BillReceiptURL from "@/pages/finance-bill-manage/billReceipt.vue";
 
 const financeBillManage = [
   {
@@ -11,11 +13,27 @@ const financeBillManage = [
       {
         path: "BillStock",
         name: "billStock",
-        component: BillManage,
+        component: BillStockURL,
         meta: {
           title: "票据上传",
         },
       },
+      {
+        path: "BillCancel",
+        name: "billCancel",
+        component: BillCancelURL,
+        meta: {
+          title: "票据退库",
+        },
+      },
+      {
+        path: "BillReceipt",
+        name: "billReceipt",
+        component: BillReceiptURL,
+        meta: {
+          title: "票据领用",
+        },
+      },
     ],
   },
 ];

src/stores/billCancel.js

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

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

src/stores/billStock.js

@@ -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: () => {
@@ -15,12 +15,16 @@ export const useStock = defineStore("menuManagement", {
     },
     addStockList(arr) {
       const index = this.stockList.findIndex((item) => item.id === arr.id);
+      console.log(arr);
       if (index !== -1) {
         this.stockList[index] = arr;
+        console.log(this.stockList, "222");
       } else {
         arr.id = new Date().getTime();
         this.stockList.unshift(arr);
+        localStorage.setItem("stockList", JSON.stringify(this.stockList));
       }
+      return this.stockList;
     },
     deleteStockList(item) {
       let arr = this.stockList.filter((i) => i.id !== item.id);

src/style/index.css

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

src/style/index.less

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