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

mock/modules/sdy.js

@@ -1,10 +1,61 @@
 import Mock from "mockjs"
 const data = Mock.mock({
-  "items|10": [
+  "list|200": [
     {
-      "id|+1": 1,
+      "id|+1": '1',
       "name": "@cname",
+      "studentnumber": "@integer(1000000000,9999999999)",
+      "department": `@pick(['机电工程系', '护理分院','建筑系','材料科学与工程系','环境科学与工程系'])`,
+      "major": `@pick(['机械制造与自动化', '材料科学与工程', '环境科学与工程', '建筑工程', '护理学'])`,
+      "grade": `@pick(['机制1班', '材料1班', '环境1班', '建筑1班','护理1班'])`,
+      "tuition": `@pick(['已付学费', '未缴学费'])`,
     }
   ]
 })
-export default []
+export default [
+  {
+    url: '/get-sdy-managment-list',
+    method: 'get',
+    response: () => {
+      return {
+        code: 200,
+        data: data
+      }
+    }
+  },
+  {
+    url: '/post-sdy-managment-find',
+    method: 'post',
+    response: (req) => {
+      if (req.body.name !== '') {
+        return data.list.filter(item => item.name.includes(req.body.name))
+      }
+      else if (req.body.studentnumber !== '') {
+        const studentnumber = Number(req.body.studentnumber)
+        if (!isNaN(studentnumber)) {
+          return data.list.filter(item => item.studentnumber === studentnumber)
+        } else {
+          return {
+            code: 400,
+            message: 'Invalid student number format'
+          }
+        }
+      }
+      else if (req.body.department !== '') {
+        return data.list.filter(item => item.department.includes(req.body.department))
+      }
+      else if (req.body.major !== '') {
+        return data.list.filter(item => item.major.includes(req.body.major))
+      }
+      else if (req.body.grade !== '') {
+        return data.list.filter(item => item.grade.includes(req.body.grade))
+      }
+      else if (req.body.tuition !== '') {
+        return data.list.filter(item => item.tuition.includes(req.body.tuition))
+      }
+      return {
+        code: 200,
+      }
+    }
+  }
+]

mock/modules/ycy.js

@@ -3,8 +3,8 @@ const StockList = Mock.mock({
   "list|20-30": [
     {
       "id|+1": "0",
-      billserial: "@integer(10000000000,19999999999)",
+      billserial: "@integer(100000000,199999999)1",
-      billType: "@integer(0,5)",
+      billType: "@integer(0,4)",
       stockNum: "@integer(1,2)",
       unit: "@cword(张本,1)",
       stockDate: "@date",
@@ -19,12 +19,9 @@ export default [
     url: "/api/stockList",
     method: "get",
     response: () => {
-      const obj = {
-        list: StockList,
-      };
       return {
         code: 200,
-        data: obj,
+        data: StockList,
       };
     },
   },

package.json

@@ -13,6 +13,7 @@
     "less": "^4.2.0",
     "mockjs": "^1.1.0",
     "pinia": "^2.1.7",
+    "pinia-plugin-persistedstate": "^3.2.1",
     "tdesign-vue-next": "^1.9.3",
     "vite-plugin-mock": "^3.0.1",
     "vue": "^3.4.21",

src/api/receivables-management/management.js

@@ -0,0 +1,8 @@
+import request from '@/utils/request'
+
+export function APIReceivablesList() {
+  return request.get('/get-sdy-managment-list')
+}
+export function APIReceivablesAdd(data) {
+  return request.post('/post-sdy-managment-find', data)
+}

src/layout/components/LayoutContent.vue

@@ -4,7 +4,7 @@
       <t-content>
         <RouterView />
       </t-content>
-      <t-footer>Footer</t-footer>
+      <t-footer style="height: 2px">Footer</t-footer>
     </t-layout>
   </div>
 </template>

src/main.js

@@ -1,16 +1,19 @@
-import './style/index.css'
+import "./style/index.css";
 
-import { createApp } from 'vue'
+import { createApp } from "vue";
-import { createPinia } from 'pinia'
+import { createPinia } from "pinia";
-import TDesign from 'tdesign-vue-next';
+import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
+import TDesign from "tdesign-vue-next";
 
-import App from './App.vue'
+import App from "./App.vue";
-import router from './router'
+import router from "./router";
 
-const app = createApp(App)
+const app = createApp(App);
 
-app.use(createPinia())
+const pinia = createPinia();
-app.use(router)
+pinia.use(piniaPluginPersistedstate);
+app.use(pinia);
+app.use(router);
 app.use(TDesign);
 
-app.mount('#app')
+app.mount("#app");

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

@@ -5,83 +5,278 @@
         ref="form"
         :data="formData"
         label-width="calc(2em + 40px)"
-        :layout="formData.layout"
+        layout="inline"
         scroll-to-first-error="smooth"
         class="scarch-from"
+        @reset="resetting"
+        @submit="headerQuery"
       >
         <div style="margin-left: 1rem">
-          <t-form-item label="票据编号:" name="name">
+          <t-form-item label="票据编号:" name="billserial">
-            <t-input v-model="formData.name"></t-input>
+            <t-input v-model="formData.billserial" maxlength="10"></t-input>
           </t-form-item>
 
-          <t-form-item label="入库日期:" name="password">
+          <t-form-item label="入库日期:" name="stockDate">
-            <t-input v-model="formData.password"></t-input>
+            <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-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>
+        <t-form-item style="margin-right: 1rem">
-          <t-button theme="primary" @click="onSubmit">查询</t-button>
+          <t-button theme="primary" type="submit">查询</t-button>
-          <t-button theme="primary" @click="onReset">重置</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"
-      ></t-base-table>
+        :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>
     </div>
+    <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" style="width: 100%">
+          <div>
+            <t-form
+              ref="formDialog"
+              scroll-to-first-error="smooth"
+              label-align="left"
+              :rules="FORM_RULES"
+              :data="dialogData"
+              :colon="true"
+              @submit="stockAdd"
+              label-width="calc(2em + 55px)"
+              layout="inline"
+              @reset="onReset"
+            >
+              <t-form-item
+                label="票据编号"
+                name="billserial"
+                :span="10"
+                style="margin-bottom: 0.5rem"
+              >
+                <t-input
+                  v-model="dialogData.billserial"
+                  placeholder="请输入票据编号"
+                ></t-input>
+              </t-form-item>
+              <t-form-item
+                label="票据类型"
+                name="billType"
+                :span="12"
+                style="width: 16rem; margin-bottom: 0.5rem"
+              >
+                <t-select
+                  v-model="dialogData.billType"
+                  clearable
+                  placeholder="请选择票据类型"
+                >
+                  <t-option
+                    v-for="item in billType"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </t-select>
+              </t-form-item>
+              <t-form-item
+                label="入库数量"
+                name="stockNum"
+                :span="12"
+                style="margin-bottom: 0.5rem"
+              >
+                <t-input
+                  type="number"
+                  v-model="dialogData.stockNum"
+                  placeholder="请输入内容"
+                ></t-input>
+              </t-form-item>
+              <t-form-item
+                label="入库单位"
+                name="unit"
+                :span="10"
+                style="margin-bottom: 0.5rem"
+              >
+                <t-input
+                  v-model="dialogData.unit"
+                  placeholder="请输入入库单位"
+                ></t-input>
+              </t-form-item>
+              <t-form-item
+                label="入库时间"
+                name="unit"
+                :span="10"
+                style="width: 16rem; margin-bottom: 0.5rem"
+              >
+                <t-date-picker
+                  v-model="dialogData.stockDate"
+                  placeholder="请选择入库时间"
+                  clearable
+                />
+              </t-form-item>
+              <t-form-item
+                label="操作员"
+                name="unit"
+                :span="10"
+                style="margin-bottom: 0.5rem"
+              >
+                <t-input
+                  v-model="dialogData.operator"
+                  placeholder="请输入操作员"
+                ></t-input>
+              </t-form-item>
+              <t-form-item label="备注" name="remark" style="width: 33.6rem">
+                <t-textarea
+                  v-model="dialogData.remark"
+                  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 { 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";
 
+// 数据
+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: "billserial",
     title: "票据编号",
-    colkey: "billserial",
     align: "center",
-    width: 100,
+    width: "100",
   },
   {
+    colKey: "billType",
     title: "票据类型",
-    colkey: "billType",
     align: "center",
-    width: 100,
+    width: "100",
   },
   {
+    colKey: "stockNum",
     title: "入库数量",
-    colkey: "stockNum",
     align: "center",
-    width: 100,
+    width: "100",
   },
   {
+    colKey: "unit",
     title: "单位（如：本、张）",
-    colkey: "unit",
     align: "center",
-    width: 100,
+    width: "100",
   },
   {
+    colKey: "stockDate",
     title: "入库日期",
-    colkey: "stockDate",
     align: "center",
-    width: 100,
+    width: "100",
   },
   {
+    colKey: "operator",
     title: "操作员",
-    colkey: "operator",
     align: "center",
-    width: 100,
+    width: "100",
   },
   {
+    colKey: "remark",
     title: "备注",
-    colkey: "remark",
     align: "center",
-    width: 100,
+    width: "100",
   },
   {
     colKey: "status",
@@ -92,27 +287,177 @@ const columns = ref([
   },
 ]);
 
-const formData = reactive({
+// 票据类型
-  layout: "inline",
+const billType = ref([
-  name: "",
+  { label: "票据类型1", value: 0 },
-  password: "",
+  { label: "票据类型2", value: 1 },
-});
+  { label: "票据类型3", value: 2 },
+  { label: "票据类型4", value: 3 },
+  { label: "票据类型5", value: 4 },
+]);
 
-const onReset = () => {
+// 获取票据列表
-  MessagePlugin.success("重置成功");
+const tableList = async () => {
+  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 onSubmit = ({ validateResult, firstError }) => {
+// 刷新列表
+const refresh = () => {
+  tableList();
+};
+
+// 弹出框表单
+const dialogData = ref({
+  billserial: "",
+  stockNum: Number,
+  unit: "",
+  operator: "",
+  remark: "",
+  stockDate: "",
+});
+
+// 查询表单
+const formData = ref({
+  billserial: "",
+  billType: "",
+  stockDate: "",
+});
+
+// 分页
+const pagination = ref({
+  defaultCurrent: 1,
+  defaultPageSize: 10,
+  total: 50,
+});
+
+// 查询表单重置
+const resetting = () => {
+  formData.value = {
+    billserial: "",
+    billType: "",
+    stockDate: "",
+  };
+  tableList();
+};
+
+// 查询
+const headerQuery = () => {
+  tableData.value = data.value;
+  if (
+    formData.value.billserial === "" &&
+    (formData.value.billType === undefined || formData.value.billType === "") &&
+    formData.value.stockDate === ""
+  ) {
+    tableList();
+  } else {
+    const list = tableData.value.filter((item) => {
+      console.log(item);
+      let arrList;
+      if (formData.value.billserial === item.billserial) {
+        arrList = item;
+      }
+      if (formData.value.billType === item.billType) {
+        arrList = item;
+      }
+      if (formData.value.stockDate === item.stockDate) {
+        arrList = item;
+      }
+      if (
+        formData.value.billserial === "" &&
+        formData.value.billType === "" &&
+        formData.value.stockDate === ""
+      ) {
+        arrList = item;
+      }
+      return arrList;
+    });
+    tableData.value = list;
+    // @ts-expect-error
+    pagination.value.total = list.length;
+  }
+};
+// 打开窗口
+const addStock = () => {
+  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" }],
+  billType: [
+    { required: true, message: "请选择票据类型", trigger: ["blur", "change"] },
+  ],
+  stockNum: [{ required: true, message: "请输入库存数量", trigger: "blur" }],
+  unit: [{ required: true, message: "请输入单位", trigger: "blur" }],
+  stockDate: [
+    { required: true, message: "请选择入库日期", trigger: ["blur", "change"] },
+  ],
+  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);
-    MessagePlugin.warning(firstError);
+  }
+};
+
+// 修改
+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;
+    pagination.value.total = tableData.value.length;
+  } else {
+    tableList();
   }
 };
 
 onMounted(() => {
-  reqStockList();
+  getNewTable();
 });
 </script>
 
@@ -132,8 +477,15 @@ onMounted(() => {
   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-form__controls-content {
+:deep(.t-form__controls-content) {
   justify-content: space-between;
 }
 </style>

src/pages/receivables-management/account-receivable.vue

@@ -1,100 +0,0 @@
-<template>
-  <div class="back-color">
-    <div class="form">
-      <t-form
-        ref="form"
-        :data="formData"
-        reset-type="initial"
-        colon
-        @reset="onReset"
-        @submit="onSubmit"
-      >
-        <t-row>
-          <t-col :span="3">
-            <t-form-item label="部门" name="department">
-              <t-tree-select :data="DEPARTMENT" clearable />
-            </t-form-item>
-          </t-col>
-          <t-col :span="3">
-            <t-form-item label="专业" name="major">
-              <t-tree-select :data="MAJOR" clearable />
-            </t-form-item>
-          </t-col>
-          <t-col :span="3">
-            <t-form-item label="班级" name="grade">
-              <t-tree-select :data="GRADE" clearable />
-            </t-form-item>
-          </t-col>
-          <t-col :span="3">
-            <t-form-item label="其他条件" name="condition">
-              <t-tree-select :data="CONDITION" clearable />
-            </t-form-item>
-          </t-col>
-        </t-row>
-        <t-row>
-          <t-col :push="10" :span="2" style="margin-top: 1rem">
-            <t-button class="button">搜索</t-button>
-            <t-button>重置</t-button>
-          </t-col>
-        </t-row>
-      </t-form>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, reactive } from 'vue'
-//表单数据
-const formData = reactive({})
-//部门数据
-const DEPARTMENT = [
-  {
-    label: '机电工程系',
-    value: '机电工程系'
-  },
-  {
-    label: '护理系',
-    value: '护理系'
-  },
-  {
-    label: '建筑系',
-    value: '建筑系'
-  }
-]
-//专业数据
-const MAJOR = [
-  {
-    label: '电子信息工程',
-    value: '电子信息工程'
-  }
-]
-//班级数据
-const GRADE = [
-  {
-    label: '2019',
-    value: '2019'
-  }
-]
-//其他条件数据
-const CONDITION = [
-  {
-    label: '已缴费',
-    value: '已缴费'
-  }
-]
-//表单提交
-const onSubmit = () => {
-  console.log(formData)
-}
-</script>
-<style scoped lang="less">
-.form {
-  background-color: #fff;
-  height: 3rem;
-  padding-top: 0.5rem;
-}
-.button {
-  margin-right: 1rem;
-  margin-left: 3rem;
-}
-</style>

src/pages/receivables-management/accountReceivable.vue

@@ -0,0 +1,249 @@
+<template>
+  <div class="back-color">
+    <div class="form">
+      <t-form
+        ref="form"
+        :data="formData"
+        reset-type="initial"
+        colon
+        @reset="onReset"
+        @submit="onSubmit"
+      >
+        <t-row>
+          <t-col :span="3">
+            <t-form-item label="姓名" name="name">
+              <t-input v-model="formData.name"></t-input>
+            </t-form-item>
+          </t-col>
+          <t-col :span="3">
+            <t-form-item label="学号" name="studentnumber">
+              <t-input v-model="formData.studentnumber"></t-input>
+            </t-form-item>
+          </t-col>
+          <t-col :span="3">
+            <t-form-item label="部门" name="studentnumber">
+              <t-tree-select
+                v-model="formData.department"
+                :data="DEPARTMENT"
+                clearable
+              />
+            </t-form-item>
+          </t-col>
+          <t-col :span="3">
+            <t-form-item label="专业" name="major">
+              <t-tree-select v-model="formData.major" :data="MAJOR" clearable />
+            </t-form-item>
+          </t-col>
+        </t-row>
+        <t-row style="margin-top: 0.5rem">
+          <t-col :span="3">
+            <t-form-item label="班级" name="grade">
+              <t-tree-select v-model="formData.grade" :data="GRADE" clearable />
+            </t-form-item>
+          </t-col>
+          <t-col :span="3">
+            <t-form-item label="其他条件" name="tuition">
+              <t-tree-select
+                v-model="formData.tuition"
+                :data="CONDITION"
+                clearable
+              />
+            </t-form-item>
+          </t-col>
+          <t-col :push="4" :span="2" style="margin-top: 0.2rem">
+            <t-button type="submit" class="button">搜索</t-button>
+            <t-button type="reset">重置</t-button>
+          </t-col>
+        </t-row>
+      </t-form>
+    </div>
+    <div class="table">
+      <t-table
+        row-key="id"
+        :data="tableData"
+        :columns="columns"
+        :hover="true"
+        table-layout="auto"
+        :pagination="pagination"
+        :show-header="true"
+        cell-empty-content="-"
+        lazy-load
+        @row-click="handleRowClick"
+        @page-change="onPageChange"
+        :loading="loading"
+      >
+        <template #tuition="{ row }">
+          <t-tag v-if="row.tuition === '未缴学费'" theme="danger">{{
+            row.tuition
+          }}</t-tag>
+          <t-tag v-else theme="success">{{ row.tuition }}</t-tag>
+        </template>
+      </t-table>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import {
+  APIReceivablesList,
+  APIReceivablesAdd
+} from '@/api/receivables-management/management'
+//表单数据
+const formData = reactive({
+  name: '',
+  studentnumber: '',
+  department: '',
+  major: '',
+  grade: '',
+  tuition: ''
+})
+//部门数据
+const DEPARTMENT = [
+  {
+    label: '机电工程系',
+    value: '机电工程系'
+  },
+  {
+    label: '护理分院',
+    value: '护理分院'
+  },
+  {
+    label: '建筑系',
+    value: '建筑系'
+  },
+  {
+    label: '材料科学与工程系',
+    value: '材料科学与工程系'
+  },
+  {
+    label: '环境科学与工程系',
+    value: '环境科学与工程系'
+  }
+]
+//专业数据
+const MAJOR = [
+  {
+    label: '机械制造与自动化',
+    value: '机械制造与自动化'
+  },
+  {
+    label: '材料科学与工程',
+    value: '材料科学与工程'
+  },
+  {
+    label: '环境科学与工程',
+    value: '环境科学与工程'
+  },
+  {
+    label: '建筑工程',
+    value: '建筑工程'
+  },
+  {
+    label: '护理学',
+    value: '护理学'
+  }
+]
+//班级数据
+const GRADE = [
+  {
+    label: '机制1班',
+    value: '机制1班'
+  },
+  {
+    label: '材料1班',
+    value: '材料1班'
+  },
+  {
+    label: '环境1班',
+    value: '环境1班'
+  },
+  {
+    label: '建筑1班',
+    value: '建筑1班'
+  },
+  {
+    label: '护理1班',
+    value: '护理1班'
+  }
+]
+//其他条件数据
+const CONDITION = [
+  {
+    label: '已付学费',
+    value: '已付学费'
+  },
+  {
+    label: '未缴学费',
+    value: '未缴学费'
+  }
+]
+// 表格数据
+const tableData = ref([])
+//表单提交
+const onSubmit = async () => {
+  const res = await APIReceivablesAdd(formData)
+  console.log(res)
+  tableData.value = res
+  pagination.total = res.length
+}
+// 表格加载状态
+const loading = ref(false)
+//表单重置
+const onReset = () => {
+ ReceivablesList()
+}
+// 表格点击事件
+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
+  const res = await APIReceivablesList()
+  tableData.value = res.data.list
+  pagination.total = res.data.list.length
+  loading.value = false
+}
+// 监听分页变化事件
+const onPageChange = (Newpage, PreviousPagePrev) => {
+  loading.value = true
+  const timerId = setTimeout(() => {
+    loading.value = false
+    clearInterval(timerId)
+  }, 300)
+}
+onMounted(() => {
+  ReceivablesList()
+})
+</script>
+<style scoped lang="less">
+.form {
+  background-color: #fff;
+  height: 6rem;
+  padding-top: 0.5rem;
+}
+.button {
+  margin-right: 1rem;
+  margin-left: 3rem;
+}
+.table {
+  margin-top: 1rem;
+}
+</style>

src/router/modules/receivables-management.js

@@ -10,7 +10,7 @@ const ReceivablesManagement = [
       {
         path: "/accounts",
         name: "Accounts",
-        component: () => import("@/pages/receivables-management/account-receivable.vue"),
+        component: () => import("@/pages/receivables-management/accountReceivable.vue"),
         meta: {
           title: "应收款管理",
         },

src/stores/billStock.js

@@ -0,0 +1,35 @@
+import { defineStore } from "pinia";
+import { reqStockList } from "@/api/stockList";
+
+export const useStock = defineStore("menuManagement", {
+  state: () => {
+    return {
+      stockList: [],
+    };
+  },
+  actions: {
+    async getStockList() {
+      let { data } = await reqStockList();
+      this.stockList = data.list;
+      return this.stockList;
+    },
+    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);
+      this.stockList = arr;
+    },
+  },
+  persist: true,
+});

src/stores/index.js

@@ -0,0 +1,9 @@
+import { createPinia } from "pinia";
+import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
+
+const pinia = createPinia();
+pinia.use(piniaPluginPersistedstate);
+
+export { store };
+
+export default store;

src/style/index.css

@@ -186,7 +186,7 @@ pre {
 .back-color {
   background-color: #f5f7fb;
   padding: 16px 24px;
-  height: calc(100vh - 128px);
+  height: calc(94vh - 50px);
   overflow-y: auto;
   overflow-x: hidden;
 }

src/style/index.less

@@ -26,7 +26,7 @@
 .back-color {
     background-color: #f5f7fb;
     padding: 16px 24px;
-    height: calc(95vh - 64px);
+    height: calc(94vh - 64px);
     overflow-y: auto;
     overflow-x: hidden;
 }

src/utils/request.js

@@ -1,7 +1,6 @@
 // 进行axios二次封装：使用请求与响应拦截器
 import axios from "axios";
 import { MessagePlugin } from "tdesign-vue-next";
-import { useRouter } from "vue-router";
 
 // import { refreshToken } from '@/apis/token'
 // import { useTokenStore } from '@/stores/index'

vite.config.js

@@ -10,12 +10,11 @@ import { viteMockServe } from "vite-plugin-mock";
 export default defineConfig({
   server: {
     proxy: {
-      'api': {
+      "/api": {
-        url  : 'http://localhost:8080',
+        target: "http://192.168.1.10:8000",
         changeOrigin: true,
-        rewrite: (path) => path.replace(/^\/api/, '')
+      },
-      }
+    },
-    }
   },
   plugins: [
     vue(),