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

mock/modules/sdy.js

@@ -9,6 +9,7 @@ const data = Mock.mock({
       "major": `@pick(['机械制造与自动化', '材料科学与工程', '环境科学与工程', '建筑工程', '护理学'])`,
       "grade": `@pick(['机制1班', '材料1班', '环境1班', '建筑1班','护理1班'])`,
       "tuition": `@pick(['已付学费', '未缴学费'])`,
+      "tu": 16800,
     }
   ]
 })

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

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "axios": "^1.6.8",
+        "dayjs": "^1.11.10",
         "less": "^4.2.0",
         "mockjs": "^1.1.0",
         "pinia": "^2.1.7",
@@ -998,7 +999,8 @@
     },
     "node_modules/dayjs": {
       "version": "1.11.10",
-      "license": "MIT"
+      "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.10.tgz",
+      "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
     },
     "node_modules/debug": {
       "version": "4.3.4",

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "axios": "^1.6.8",
+    "dayjs": "^1.11.10",
     "less": "^4.2.0",
     "mockjs": "^1.1.0",
     "pinia": "^2.1.7",

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/layout/components/LayoutAside.vue

@@ -8,13 +8,19 @@
         <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>
           <t-icon name="application" />
         </template>
         <t-menu-item value="2-1" to="/accounts">
-          <span>菜单二</span>
+          <span>应收款管理</span>
         </t-menu-item>
       </t-submenu>
     </t-menu>

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,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"
@@ -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,12 +97,13 @@
             >
           </template>
         </t-base-table>
-    </div>
+      </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,10 +223,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 +349,7 @@ const resetting = () => {
     billType: "",
     stockDate: "",
   };
-  tableList();
+  getNewTable();
 };
 
 // 查询
@@ -355,10 +360,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 +454,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();
@@ -474,7 +479,7 @@ onMounted(() => {
   }
 }
 .table-box {
-  height: 41rem;
+  height: 42rem;
   background-color: @base-white-color;
   padding: 1rem;
   padding-top: 0;

src/pages/receivables-management/Bill.vue

@@ -0,0 +1,354 @@
+<template>
+  <div class="back-color">
+    <div>
+      <div class="invoiceContainer">
+        <div class="invoiceHeade">
+          <div class="headeLeft"></div>
+          <div class="headeMiddle">
+            <span class="title">xxx增值税电子普通发票</span>
+            <hr />
+            <hr />
+          </div>
+          <div class="headeRight">
+            <ul>
+              <li><label> 发票代码： </label><span>1234</span></li>
+              <li><label> 发票号码： </label><span>223</span></li>
+              <li>
+                <label> 开票日期： </label><span>{{ InvoiceData.xdate }}</span>
+              </li>
+              <li><label> 校验码： </label><span>111111</span></li>
+            </ul>
+          </div>
+        </div>
+        <div class="invoiceBody">
+          <div class="userInfo">
+            <div class="buy">缴费方</div>
+            <div class="buyInfo">
+              <ul>
+                <li>
+                  <label>学生姓名：</label><span>{{ InvoiceData.xname }}</span>
+                </li>
+                <li>
+                  <label>学号：</label><span>{{ InvoiceData.xstudent }}</span>
+                </li>
+                <li style="display: flex">
+                  <label>电话：</label
+                  ><t-input
+                    size="small"
+                    style="width: 300px"
+                    v-model="InvoiceData.xphone"
+                  />
+                </li>
+                <li style="display: flex">
+                  <label>缴费方式：</label
+                  ><t-input
+                    size="small"
+                    style="width: 300px"
+                    v-model="InvoiceData.xpayment"
+                  />
+                </li>
+              </ul>
+            </div>
+            <div class="password">缴费方</div>
+            <div class="department">
+              <ul>
+                <li>
+                  <label>学生部门：</label
+                  ><span>{{ InvoiceData.xdepartment }}</span>
+                </li>
+                <li>
+                  <label>学生班级：</label><span>{{ InvoiceData.xgrade }}</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div class="Table">
+            备入
+            <div>
+              <t-textarea
+                placeholder="请输入内容"
+                v-model="InvoiceData.xremark"
+              />
+            </div>
+          </div>
+          <div class="saleInfo">
+            <div class="total">价税合计(大写)</div>
+
+            <span class="max"
+              ><t-input
+                size="small"
+                style="width: 150px; padding-top: 0.2rem"
+                v-model="InvoiceData.xchargebig"
+            /></span>
+            <div class="total2" style="display: flex">
+              (小写)
+              <span style="display: flex"
+                >￥<t-input
+                  size="small"
+                  style="width: 150px; padding-top: 0.2rem"
+                  v-model="InvoiceData.xcharge"
+                />
+              </span>
+            </div>
+          </div>
+          <div class="userInfo2">
+            <div class="buy">收费方</div>
+            <div class="buyInfo">
+              <ul>
+                <li><label>名称：</label><span>xxxxxxx学院</span></li>
+                <li>
+                  <label>纳税人识别号：</label><span>12443536377484848</span>
+                </li>
+                <li>
+                  <label>地址、&nbsp;&nbsp;&nbsp;电话：</label
+                  ><span>11223443532</span>
+                </li>
+                <li><label>开户行及账号：</label><span>中国农业银行</span></li>
+              </ul>
+            </div>
+            <div class="remark">备注</div>
+          </div>
+          <div class="userInfo3">
+            <ul class="invoicetFooter" style="display: flex">
+              <li style="display: flex">
+                <label>收款人:</label
+                ><t-input
+                  size="small"
+                  style="width: 100px"
+                  v-model="InvoiceData.xpayee"
+                />
+              </li>
+              <li style="display: flex">
+                <label>复核:</label
+                ><t-input
+                  size="small"
+                  style="width: 100px"
+                  v-model="InvoiceData.xreviewer"
+                />
+              </li>
+              <li style="display: flex">
+                <label>开票人:</label
+                ><t-input
+                  size="small"
+                  style="width: 100px"
+                  v-model="InvoiceData.xdrawer"
+                />
+              </li>
+              <li><label>销售方：（章）</label></li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useRoute } from 'vue-router'
+import dayjs from 'dayjs'
+
+const Route = useRoute()
+//后端会返回发票的数据
+const InvoiceData = ref({
+  //发票日期
+  xdate: dayjs().format('YYYY-MM-DD'),
+  //学生姓名
+  xname: Route.query.firstName,
+  //学号
+  xstudent: 12346,
+  //电话
+  xphone: '',
+  //缴费方式
+  xpayment: '',
+  // 学生部门
+  xdepartment: Route.query.status,
+  //学生班级
+  xgrade: Route.query.classname,
+  //备注
+  xremark: '',
+  // 应收费(小写)
+  xcharge: Route.query.letters[0],
+  // 应收费(大写)
+  xchargebig: '',
+  //收款人
+  xpayee: '',
+  //复核人
+  xreviewer: '',
+  //开票人
+  xdrawer: ''
+})
+</script>
+
+<style lang="scss" scoped>
+.headeRight {
+  width: 240px;
+  height: 100%;
+  font-size: 16px;
+  line-height: 30px;
+  text-align: left;
+  float: left;
+}
+.headeRight > ul {
+  display: inline-block;
+  margin-left: 16px;
+  margin-top: 10px;
+}
+.invoicetFooter > li {
+  margin-top: 16px;
+  margin-right: 100px;
+  margin-left: 11px;
+  display: inline-block;
+}
+.max {
+  display: inline-block;
+  margin-top: 5px;
+  margin-left: 4px;
+}
+.total {
+  width: 270px;
+  height: 100%;
+  font-size: 17px;
+  line-height: 30px;
+  text-align: center;
+  border-right: 1px solid black;
+  float: left;
+  padding-top: 0.25rem;
+}
+.total2 {
+  width: 270px;
+  height: 100%;
+  font-size: 17px;
+  line-height: 30px;
+  text-align: center;
+  margin-right: 130px;
+  float: right;
+  margin-top: 0.25rem;
+}
+.buyer {
+  width: 30px;
+  height: 100%;
+  font-size: 17px;
+  text-align: center;
+  border-right: 1px solid black;
+  float: left;
+}
+.title {
+  font-size: 33px;
+  display: inline-block;
+  margin-top: 50px;
+  font-family: '仿宋';
+}
+.headeMiddle {
+  width: 400px;
+  height: 100%;
+  font-size: 17px;
+  line-height: 30px;
+  text-align: center;
+  float: left;
+}
+.headeLeft {
+  width: 300px;
+  height: 100%;
+  font-size: 17px;
+  line-height: 30px;
+  text-align: center;
+  float: left;
+}
+.buy {
+  width: 30px;
+  height: 100%;
+  font-size: 17px;
+  line-height: 30px;
+  text-align: center;
+  border-right: 1px solid black;
+  border-left: 1px solid black;
+  float: left;
+}
+.buyInfo {
+  width: 510px;
+  height: 100%;
+  font-size: 16px;
+  line-height: 25px;
+  text-align: left;
+  border-right: 1px solid black;
+  float: left;
+}
+.department {
+  height: 100%;
+  font-size: 16px;
+  line-height: 25px;
+  text-align: left;
+  float: left;
+}
+.password {
+  width: 30px;
+  height: 100%;
+  font-size: 17px;
+  line-height: 30px;
+  text-align: center;
+  border-right: 1px solid black;
+  float: left;
+}
+.remark {
+  width: 30px;
+  height: 100%;
+  font-size: 17px;
+  line-height: 50px;
+  text-align: center;
+  border-right: 1px solid black;
+  float: left;
+}
+ul {
+  list-style-type: none;
+  margin: 0;
+  padding-left: 5px;
+}
+.invoiceContainer {
+  width: 1000px;
+  margin: 0 auto;
+  border-top: 1px solid black;
+}
+.invoiceHeade {
+  width: 1000px;
+  height: 140px;
+  border-bottom: 1px solid black;
+  border-left: 1px solid black;
+  border-right: 1px solid black;
+}
+.userInfo {
+  width: 1000px;
+  height: 100px;
+  border-bottom: 1px solid black;
+  border-right: 1px solid black;
+}
+.userInfo2 {
+  width: 1000px;
+  height: 100px;
+  border-right: 1px solid black;
+}
+.userInfo3 {
+  width: 1000px;
+  height: 100px;
+  border-top: 1px solid black;
+}
+.Table {
+  width: 999px;
+  height: 400px;
+  border-bottom: 1px solid black;
+  border-left: 1px solid black;
+  border-right: 1px solid black;
+}
+.sum {
+  width: 1000px;
+  height: 50px;
+  border-bottom: 1px solid black;
+}
+.saleInfo {
+  width: 999px;
+  height: 40px;
+  border-bottom: 1px solid black;
+  border-right: 1px solid black;
+  border-left: 1px solid black;
+}
+</style>

src/pages/receivables-management/accountReceivable.vue

@@ -78,6 +78,11 @@
           }}</t-tag>
           <t-tag v-else theme="success">{{ row.tuition }}</t-tag>
         </template>
+        <template #action="{ row }">
+          <t-button v-if="row.tuition === '未缴学费'" @click="handleTicket(row)"
+            >清缴学费</t-button
+          >
+        </template>
       </t-table>
     </div>
   </div>
@@ -88,6 +93,8 @@ import {
   APIReceivablesList,
   APIReceivablesAdd
 } from '@/api/receivables-management/management'
+import { useRouter } from 'vue-router'
+const router = useRouter()
 //表单数据
 const formData = reactive({
   name: '',
@@ -179,12 +186,40 @@ const CONDITION = [
 ]
 // 表格数据
 const tableData = ref([])
+// 表格头数据
+const columns = ref([
+  { colKey: 'serial-number' },
+  { colKey: 'name', title: '姓名' },
+  { colKey: 'studentnumber', title: '学号' },
+  { colKey: 'department', title: '部门' },
+  { colKey: 'major', title: '专业' },
+  { colKey: 'grade', title: '班级' },
+  { colKey: 'tuition', title: '是否缴费' },
+  { colKey: 'action', title: '操作', align: 'center' }
+])
+// 表格分页数据
+let pagination = {
+  defaultCurrent: 1,
+  defaultPageSize: 10,
+  total: 50
+}
 //表单提交
 const onSubmit = async () => {
+  if (
+    formData.name ||
+    formData.studentnumber ||
+    formData.department ||
+    formData.major ||
+    formData.grade ||
+    formData.tuition
+  ) {
     const res = await APIReceivablesAdd(formData)
     console.log(res)
-  tableData.value = res
+    tableData.value = Array.from(res)
     pagination.total = res.length
+  } else {
+    alert('请填写完整信息')
+  }
 }
 // 表格加载状态
 const loading = ref(false)
@@ -196,23 +231,6 @@ const onReset = () => {
 const handleRowClick = e => {
   console.log(e)
 }
-// 表格头数据
-const columns = ref([
-  { colKey: 'serial-number' },
-  { colKey: 'name', title: '姓名' },
-  { colKey: 'studentnumber', title: '学号' },
-  { colKey: 'department', title: '部门' },
-  { colKey: 'major', title: '专业' },
-  { colKey: 'grade', title: '班级' },
-  { colKey: 'tuition', title: '是否缴费' }
-])
-
-// 表格分页数据
-let pagination = {
-  defaultCurrent: 1,
-  defaultPageSize: 5,
-  total: 50
-}
 //获取表格数据
 const ReceivablesList = async () => {
   loading.value = true
@@ -229,6 +247,13 @@ const onPageChange = (Newpage, PreviousPagePrev) => {
     clearInterval(timerId)
   }, 300)
 }
+//跳转票据页面
+const handleTicket = row => {
+  router.push({
+    path: '/billCollected',
+    query: row
+  })
+}
 onMounted(() => {
   ReceivablesList()
 })

src/pages/receivables-management/billCollected.vue

@@ -0,0 +1,198 @@
+<template>
+  <div class="back-color">
+    <t-table
+      ref="tableRef"
+      row-key="key"
+      :columns="columns"
+      :data="data"
+      :editable-cell-state="editableCellState"
+      bordered
+      lazy-load
+    >
+      <template #operation="{ row }">
+        <t-button theme="default" variant="text" @click="handleEdit(row)"
+          >填写电子票据</t-button
+        >
+      </template>
+    </t-table>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import { ref, computed } from 'vue'
+import { Input, Select } from 'tdesign-vue-next'
+import { useRoute } from 'vue-router'
+import { useRouter } from 'vue-router'
+import dayjs from 'dayjs'
+
+const route = useRoute()
+const router = useRouter()
+const initData = new Array(1).fill(null).map((_, i) => ({
+  key: String(i + 1),
+  //学生姓名
+  firstName: route.query.name,
+  //学生部门
+  status: route.query.department,
+  //学生班级
+  classname: route.query.grade,
+  letters: [],
+  createTime: dayjs().format('YYYY-MM-DD')
+}))
+//学生部门
+const STATUS_OPTIONS = [
+  { label: '机电工程系', value: '机电工程系' },
+  { label: '护理分院', value: '护理分院' },
+  { label: '建筑系', value: '建筑系' },
+  { label: '材料科学与工程系', value: '材料科学与工程系' },
+  { label: '审批环境科学与工程系过期', value: '审批环境科学与工程系过期' }
+]
+//学生班级
+const CLASS_NAME = [
+  { label: '机制1班', value: '机制1班' },
+  { label: '材料1班', value: '材料1班' },
+  { label: '环境1班', value: '环境1班' },
+  { label: '建筑1班', value: '建筑1班' },
+  { label: '护理1班', value: '护理1班' }
+]
+const align = ref('left')
+const data = ref([...initData])
+const editableCellState = cellParams => {
+  const { row } = cellParams
+  return row.status !== 2
+}
+const tableRef = ref()
+const columns = computed(() => [
+  {
+    title: '学生姓名',
+    colKey: 'firstName',
+    align: align.value,
+    edit: {
+      component: Input,
+      props: {
+        clearable: true,
+        autofocus: true
+      },
+      validateTrigger: 'change',
+      on: editContext => ({
+        onBlur: () => {
+          console.log('失去焦点', editContext)
+        },
+        onEnter: ctx => {
+          ctx?.e?.preventDefault()
+          console.log('onEnter', ctx)
+        }
+      }),
+      abortEditOnEvent: ['onEnter'],
+      onEdited: context => {
+        console.log(context)
+        const newData = [...data.value]
+        newData.splice(context.rowIndex, 1, context.newRowData)
+        data.value = newData
+        console.log('Edit firstName:', context)
+      },
+      defaultEditable: true
+    }
+  },
+  {
+    title: '学生部门',
+    colKey: 'status',
+    cell: (h, { row }) =>
+      STATUS_OPTIONS.find(t => t.value === row.status)?.label,
+    edit: {
+      component: Select,
+      props: {
+        clearable: true,
+        options: STATUS_OPTIONS
+      },
+      on: editContext => ({
+        onChange: params => {
+          console.log('status changed', editContext, params)
+        }
+      }),
+      onEdited: context => {
+        data.value.splice(context.rowIndex, 1, context.newRowData)
+      }
+    }
+  },
+  {
+    title: '学生班级',
+    colKey: 'classname',
+    cell: (h, { row }) =>
+      CLASS_NAME.find(t => t.value === row.classname)?.label,
+    edit: {
+      component: Select,
+      props: {
+        clearable: true,
+        options: CLASS_NAME
+      },
+      on: editContext => ({
+        onChange: params => {
+          console.log('status changed', editContext, params)
+        }
+      }),
+      onEdited: context => {
+        data.value.splice(context.rowIndex, 1, context.newRowData)
+      }
+    }
+  },
+  {
+    title: '学生状态',
+    colKey: 'letters',
+    cell: (h, { row }) => row.letters.join('、'),
+    edit: {
+      keepEditMode: true,
+      component: Select,
+      props: () => {
+        return {
+          multiple: true,
+          minCollapsedNum: 1,
+          options: [
+            { label: '初级学生', value: '2000元' },
+            { label: '中级学生', value: '3000元' },
+            { label: '高级学生', value: '4000元' },
+            { label: '老年学生', value: '5000元' },
+            { label: '神级学生', value: '6000元' }
+          ].filter(t => (t.show === undefined ? true : t.show()))
+        }
+      },
+      onEdited: context => {
+        data.value.splice(context.rowIndex, 1, context.newRowData)
+      }
+    }
+  },
+  {
+    title: '应缴金额',
+    colKey: 'letters',
+    cell: (h, { row }) => row.letters.join('、'),
+    edit: {
+      keepEditMode: true,
+      component: Select,
+      props: () => {
+        return {
+          multiple: true,
+          minCollapsedNum: 1
+        }
+      },
+      onEdited: context => {
+        data.value.splice(context.rowIndex, 1, context.newRowData)
+      }
+    }
+  },
+  {
+    title: '创建日期',
+    colKey: 'createTime'
+  },
+  {
+    title: '操作',
+    colKey: 'operation'
+  }
+])
+const handleEdit = row => {
+  router.push({
+    path: 'bill-bill',
+    query: row
+  })
+  console.log(row)
+}
+</script>
+<style scoped lang="less"></style>

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/router/modules/receivables-management.js

@@ -15,6 +15,18 @@ const ReceivablesManagement = [
           title: "应收款管理",
         },
       },
+      {
+        path: "/billCollected",
+        name: "BillCollected",
+        component: () => import("@/pages/receivables-management/billCollected.vue"),
+        meta: { title: "票据收款", hidden: false },
+      },
+      {
+        path: "/bill-bill",
+        name: "BillBill",
+        component: () => import("@/pages/receivables-management/Bill.vue"),
+        meta: { title: "票据", hidden: false },
+      }
     ],
   },
 ];

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: () => {

src/style/index.css

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

src/style/index.less

@@ -49,3 +49,7 @@ a:active {
 .t-button--variant-text .t-button__text:hover {
     color: #8799a3;
 }
+// 禁用的颜色
+ .t-is-disabled .t-button__text{
+    color: #d3d3d3 !important;
+}