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

mock/index.js

@@ -0,0 +1,6 @@
+import sdy from './modules/sdy'
+import ycy from './modules/ycy'
+export default [
+  ...SDY,
+  ...YCY
+]

mock/modules/sdy.js

@@ -0,0 +1,2 @@
+import Mock from "mockjs"
+export default []

mock/modules/ycy.js

@@ -0,0 +1,18 @@
+import Mock from "mockjs";
+const StockList = Mock.mock({
+  "list|20-30": [
+    {
+      "id|+1": "0",
+      billserial: "@integer(10000000000,19999999999)",
+      billType: "@integer(0,5)",
+      stockNum: "前端",
+      unit: "前端",
+      stockDate: "@date",
+      operator: "@cname",
+      remark: " @integer(10000000000,19999999999)",
+    },
+  ],
+});
+export default [
+]
+

src/api/login.js

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

src/layout/components/LayoutAside.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="box">
+  <div style="height: 100%">
     <t-menu>
       <t-submenu value="1" title="财务票据管理">
         <template #icon>
           <t-icon name="application" />
         </template>
         <t-menu-item value="1-1" to="/Bill/BillStock">
-          <span>菜单二</span>
+          <span>票据入库管理</span>
         </t-menu-item>
       </t-submenu>
       <t-submenu value="2" title="应收款管理">

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

@@ -4,28 +4,93 @@
       <t-form
         ref="form"
         :data="formData"
-        label-width="calc(2em + 24px)"
+        label-width="calc(2em + 40px)"
         :layout="formData.layout"
         scroll-to-first-error="smooth"
-        @reset="onReset"
+        class="scarch-from"
-        @submit="onSubmit"
       >
-        <t-form-item label="名字" name="name">
+        <div style="margin-left: 1rem">
-          <t-input v-model="formData.name"></t-input>
+          <t-form-item label="票据编号:" name="name">
-        </t-form-item>
+            <t-input v-model="formData.name"></t-input>
+          </t-form-item>
 
-        <t-form-item label="密码" name="password">
+          <t-form-item label="入库日期:" name="password">
-          <t-input v-model="formData.password" type="password"></t-input>
+            <t-input v-model="formData.password"></t-input>
+          </t-form-item>
+        </div>
+        <t-form-item>
+          <t-button theme="primary" @click="onSubmit">查询</t-button>
+          <t-button theme="primary" @click="onReset">重置</t-button>
         </t-form-item>
       </t-form>
     </div>
+    <div class="table-box">
+      <t-base-table
+        row-key="index"
+        :data="tableData"
+        :columns="columns"
+      ></t-base-table>
+    </div>
   </div>
 </template>
 
 <script setup>
-import { reactive } from "vue";
+import { reactive, ref } from "vue";
 import { MessagePlugin } from "tdesign-vue-next";
 
+const tableData = ref();
+const columns = ref([
+  {
+    title: "票据编号",
+    colkey: "billserial",
+    align: "center",
+    width: 100,
+  },
+  {
+    title: "票据类型",
+    colkey: "billType",
+    align: "center",
+    width: 100,
+  },
+  {
+    title: "入库数量",
+    colkey: "stockNum",
+    align: "center",
+    width: 100,
+  },
+  {
+    title: "单位（如：本、张）",
+    colkey: "unit",
+    align: "center",
+    width: 100,
+  },
+  {
+    title: "入库日期",
+    colkey: "stockDate",
+    align: "center",
+    width: 100,
+  },
+  {
+    title: "操作员",
+    colkey: "operator",
+    align: "center",
+    width: 100,
+  },
+  {
+    title: "备注",
+    colkey: "remark",
+    align: "center",
+    width: 100,
+  },
+  {
+    colKey: "status",
+    title: "操作",
+    width: 120,
+    align: "center",
+    fixed: "right",
+  },
+]);
+
 const formData = reactive({
   layout: "inline",
   name: "",
@@ -49,7 +114,21 @@ const onSubmit = ({ validateResult, firstError }) => {
 <style scoped lang="less">
 .scarch-box {
   width: 100%;
-  height: 10%;
   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;
+}
+/deep/ .t-form__controls-content {
+  justify-content: space-between;
 }
 </style>

src/pages/index.vue

@@ -1,7 +0,0 @@
-<template>
-  <div>111111111111111</div>
-</template>
-
-<script setup lang="ts"></script>
-
-<style scoped lang="less"></style>

src/pages/login/index.vue

@@ -46,6 +46,7 @@
 <script setup>
 import { MessagePlugin } from "tdesign-vue-next";
 import { reactive, ref } from "vue";
+import { reqUser } from "@/api/login";
 // import {login} from "@/api/login";
 // import { DesktopIcon, LockOnIcon } from "tdesign-icons-vue";
 
@@ -54,40 +55,50 @@ const INITIAL_DATA = {
   password: "",
 };
 const from = ref();
+const from = ref();
 const formData = reactive({
   ...INITIAL_DATA,
 });
 
 const rules = reactive({
+  account: [
   account: [
     {
       required: true,
       message: "必须填写",
+      message: "必须填写",
     },
     {
       min: 10,
       message: "输入不正确",
+      message: "输入不正确",
     },
     {
       max: 10,
       message: "输入不正确",
+      message: "输入不正确",
     },
   ],
+  password: [
   password: [
     {
       required: true,
       message: "密码必填",
+      message: "密码必填",
     },
     {
       len: 8,
       message: "请输入 8 位密码",
+      message: "请输入 8 位密码",
     },
     {
       pattern: /[A-Z]+/,
       message: "密码必须包含大写字母",
+      message: "密码必须包含大写字母",
     },
   ],
 });
+});
 
 const onReset = () => {
   MessagePlugin.success("重置成功");
@@ -104,6 +115,14 @@ const onSubmit = () => {
     }
   });
 };
+
+const Login = async () => {
+  await reqLogin();
+};
+
+const Login = async () => {
+  await reqLogin();
+};
 </script>
 
 <style lang="less" scoped>

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

@@ -0,0 +1,100 @@
+<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/router/index.js

@@ -1,5 +1,6 @@
 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 Student from "@/pages/students/student.vue";
 
@@ -7,22 +8,7 @@ import Layout from "@/layout/index.vue";
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
-    {
+
-      path: "/",
-      redirect: "/accounts",
-      meta: { title: "应收款管理", name: "accounts" },
-      component: Layout,
-      children: [
-        {
-          path: "/accounts",
-          name: "Accounts",
-          component: () => import("@/pages/index.vue"),
-          meta: {
-            title: "应收款管理",
-          },
-        },
-      ],
-    },
     {
       path: "/login",
       name: "login",
@@ -34,6 +20,7 @@ const router = createRouter({
       component: Student,
     },
     ...FinanceBillManage,
+    ...ReceivablesManagement
   ],
 });
 

src/router/modules/receivables-management.js

@@ -0,0 +1,22 @@
+import Layout from "@/layout/index.vue";
+
+const ReceivablesManagement = [
+  {
+    path: "/",
+    redirect: "/accounts",
+    meta: { title: "应收款管理", name: "accounts" },
+    component: Layout,
+    children: [
+      {
+        path: "/accounts",
+        name: "Accounts",
+        component: () => import("@/pages/receivables-management/account-receivable.vue"),
+        meta: {
+          title: "应收款管理",
+        },
+      },
+    ],
+  },
+];
+
+export default ReceivablesManagement;

src/utils/request.js

@@ -0,0 +1,73 @@
+// 进行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'
+// 第一步:利用axios对象的create方法，去创建axios实例(其他的配置:基础的路径、超时的时间)
+const request = axios.create({
+  baseURL: "/", // 基础路径上会携带/api
+  timeout: 5000, // 超时的时间的设置
+});
+// 第二步：axios实例添加请求与响应拦截器
+request.interceptors.request.use((config) => {
+  // config配置对象，headers属性请求头，经常给服务器端携带公共参数
+  // 返回配置对象
+  // const { token } = useTokenStore()
+  // if (token) {
+  //   config.headers.Authorization = `Bearer ${token}`
+  // }
+  return config;
+});
+
+// 第三步：axios响应拦截器
+request.interceptors.response.use(
+  (response) => {
+    // 成功回调
+    // 简化数据
+    return response.data;
+  },
+  async (error) => {
+    // 失败回调：处理http网络错误的
+    // 定义一个变量：存储网络错误信息
+    let message = "";
+    const { status } = error.response;
+    // http状态码
+    switch (status) {
+      case 401:
+        // try {
+        //   const tokenStore = useTokenStore()
+        //   const refreshedTokenData = await refreshToken(tokenStore.refreshToken)
+        //   if (refreshedTokenData && refreshedTokenData.data.token) {
+        //     tokenStore.setToken(refreshedTokenData.data.token)
+        //     const originalRequest = error.config
+        //     originalRequest.headers.Authorization = `Bearer ${refreshedTokenData.data.token}`
+        //     return request(originalRequest)
+        //   }
+        // } catch (error) {
+        //   const tokenStore = useTokenStore()
+        //   tokenStore.clearToken()
+        //   useRouter().push('/login')
+        // }
+        break;
+      case 403:
+        message = "无权访问";
+        break;
+      case 404:
+        message = "请求地址错误";
+        break;
+      case 500:
+        message = "服务器出现问题";
+        break;
+      default:
+        message = "网络出现问题";
+        break;
+    }
+    MessagePlugin.error(message);
+    return Promise.reject(error);
+  }
+);
+
+// 对外暴露
+export default request;

vite.config.js

@@ -8,6 +8,15 @@ import { viteMockServe } from "vite-plugin-mock";
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  server: {
+    proxy: {
+      "/api": {
+        target: "http://192.168.1.10:8000",
+        changeOrigin: true,
+      },
+    },
+  },
+
   plugins: [
     vue(),
     vueJsx(),