This commit is contained in:
sundongyu 2024-04-06 19:00:34 +08:00
commit 0176354677
11 changed files with 479 additions and 68 deletions

View File

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

View File

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

View File

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

View File

@ -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.use(TDesign);
app.mount('#app') app.mount("#app");

View File

@ -5,83 +5,277 @@
ref="form" ref="form"
:data="formData" :data="formData"
label-width="calc(2em + 40px)" label-width="calc(2em + 40px)"
:layout="formData.layout" layout="inline"
scroll-to-first-error="smooth" scroll-to-first-error="smooth"
class="scarch-from" class="scarch-from"
@reset="resetting"
@submit="headerQuery"
> >
<div style="margin-left: 1rem"> <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"></t-input>
</t-form-item> </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> </t-form-item>
</div> </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-item>
</t-form> </t-form>
</div> </div>
<div class="table-box"> <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 <t-base-table
hover
row-key="index" row-key="index"
:loading="loading"
:data="tableData" :data="tableData"
:columns="columns" :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="look(slotProps)"
>查看</t-button
>
<t-button
theme="default"
variant="text"
size="small"
@click="deleteBtn(slotProps)"
>删除</t-button
>
</template>
</t-base-table>
</div> </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> </div>
</template> </template>
<script setup> <script setup>
import { reactive, ref, onMounted } from "vue"; import { reactive, ref, onMounted } from "vue";
import { MessagePlugin } from "tdesign-vue-next"; import { MessagePlugin } from "tdesign-vue-next";
import { AddIcon, LoadIcon } from "tdesign-icons-vue-next";
import { reqStockList } from "@/api/stockList"; import { reqStockList } from "@/api/stockList";
import { useStock } from "@/stores/billStock";
import { number } from "echarts";
const loading = ref(false);
const visiblePost = ref(false);
const stockList = useStock();
const tableData = ref(); const tableData = ref();
const data = ref();
const columns = ref([ const columns = ref([
{ {
colKey: "serial-number",
title: "序号",
width: 50,
},
{
colKey: "billserial",
title: "票据编号", title: "票据编号",
colkey: "billserial",
align: "center", align: "center",
width: 100, width: "100",
}, },
{ {
colKey: "billType",
title: "票据类型", title: "票据类型",
colkey: "billType",
align: "center", align: "center",
width: 100, width: "100",
}, },
{ {
colKey: "stockNum",
title: "入库数量", title: "入库数量",
colkey: "stockNum",
align: "center", align: "center",
width: 100, width: "100",
}, },
{ {
colKey: "unit",
title: "单位(如:本、张)", title: "单位(如:本、张)",
colkey: "unit",
align: "center", align: "center",
width: 100, width: "100",
}, },
{ {
colKey: "stockDate",
title: "入库日期", title: "入库日期",
colkey: "stockDate",
align: "center", align: "center",
width: 100, width: "100",
}, },
{ {
colKey: "operator",
title: "操作员", title: "操作员",
colkey: "operator",
align: "center", align: "center",
width: 100, width: "100",
}, },
{ {
colKey: "remark",
title: "备注", title: "备注",
colkey: "remark",
align: "center", align: "center",
width: 100, width: "100",
}, },
{ {
colKey: "status", colKey: "status",
@ -92,27 +286,105 @@ const columns = ref([
}, },
]); ]);
const formData = reactive({ const billType = ref([
layout: "inline", { label: "票据类型1", value: 0 },
name: "", { label: "票据类型2", value: 1 },
password: "", { label: "票据类型3", value: 2 },
}); { label: "票据类型4", value: 3 },
{ label: "票据类型5", value: 4 },
]);
const onReset = () => { const tableList = async () => {
MessagePlugin.success("重置成功"); tableData.value = await stockList.getStockList();
data.value = await stockList.getStockList();
pagination.value.total = tableData.value.length;
}; };
const onSubmit = ({ validateResult, firstError }) => { const dialogData = ref({
if (validateResult === true) { billserial: "",
MessagePlugin.success("提交成功"); 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 = ({ validateResult, firstError }) => {
tableData.value = data.value;
if (
formData.value.billserial === "" &&
(formData.value.billType === undefined || formData.value.billType === "") &&
formData.value.stockDate === ""
) {
tableList();
} else { } else {
console.log("Validate Errors: ", firstError, validateResult); const list = tableData.value.filter((item) => {
MessagePlugin.warning(firstError); 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;
});
console.log(list);
tableData.value = list;
// @ts-expect-error
pagination.value.total = list.length;
} }
}; };
const addStock = () => {
visiblePost.value = true;
};
//
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 = () => {};
onMounted(() => { onMounted(() => {
reqStockList(); tableList();
}); });
</script> </script>
@ -132,8 +404,15 @@ onMounted(() => {
height: 41rem; height: 41rem;
background-color: @base-white-color; background-color: @base-white-color;
padding: 1rem; 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; justify-content: space-between;
} }
</style> </style>

View File

@ -14,7 +14,7 @@
> >
<h2 class="login-title">登录</h2> <h2 class="login-title">登录</h2>
<t-form-item name="account"> <t-form-item label="账号" name="account">
<t-input <t-input
clearable clearable
v-model="formData.account" v-model="formData.account"
@ -23,7 +23,7 @@
<desktop-icon slot:string="prefix-icon"></desktop-icon> <desktop-icon slot:string="prefix-icon"></desktop-icon>
</t-input> </t-input>
</t-form-item> </t-form-item>
<t-form-item name="password"> <t-form-item label="密码" name="password">
<t-input <t-input
type="password" type="password"
clearable clearable
@ -35,6 +35,8 @@
</t-form-item> </t-form-item>
<t-form-item> <t-form-item>
<t-button theme="primary" type="submit" block>登录</t-button> <t-button theme="primary" type="submit" block>登录</t-button>
<button @click.prevent="showForgotPasswordModal">忘记密码</button>
</t-form-item> </t-form-item>
</t-form> </t-form>
</div> </div>
@ -45,8 +47,10 @@
<script setup> <script setup>
import { MessagePlugin } from "tdesign-vue-next"; import { MessagePlugin } from "tdesign-vue-next";
import { reactive, ref } from "vue"; import { reactive, ref, onMounted } from "vue";
import { reqUser } from "@/api/login"; import { reqUser } from "@/api/login";
import router from "@/router";
// import { TForm, TFormItem, TInput, TButton } from "tdesign-vue-next";
// import { DesktopIcon, LockOnIcon } from "tdesign-icons-vue"; // import { DesktopIcon, LockOnIcon } from "tdesign-icons-vue";
const INITIAL_DATA = { const INITIAL_DATA = {
@ -90,21 +94,49 @@ const rules = reactive({
}); });
const onReset = () => { const onReset = () => {
//
formData.account = "";
formData.password = "";
MessagePlugin.success("重置成功"); MessagePlugin.success("重置成功");
}; };
const onSubmit = async ({ validateResult, firstError }) => { // const onSubmit = () => {
await reqUser(); // this.$refs.form.validateResult((valid,errors) => {
if (validateResult === true) { // console.log(valid);
MessagePlugin.success("提交成功"); // if (valid) {
} else { // MessagePlugin.success("");
console.log("Errors: ", validateResult); // } else {
MessagePlugin.warning(firstError); // MessagePlugin.error("");
// console.log("Errors: ", errors);
// return false;
// }
// });
// };
const onSubmit = async () => {
try {
const validateResult = await this.$refs.form.validate();
if (validateResult.result) {
await reqUser();
MessagePlugin.success("提交成功");
await router.push("/");
} else {
const firstError = validateResult.errors[0]?.message || "未知错误";
console.log("Errors: ", validateResult.errors);
MessagePlugin.warning(firstError);
}
} catch (error) {
console.error("请求失败:", error);
MessagePlugin.error("提交失败");
} }
}; };
const Login = async () => { // const Login = async () => {
await reqLogin(); // await reqUser();
}; // };
onMounted(() => {
reqUser();
});
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>

View File

@ -0,0 +1,45 @@
<template>
<div>
students
<t-space direction="vertical">
<!-- 按钮操作区域 -->
<div>
<t-radio-group v-model="size" variant="default-filled">
<t-radio-button value="small">小尺寸</t-radio-button>
<t-radio-button value="medium">中尺寸</t-radio-button>
<t-radio-button value="large">大尺寸</t-radio-button>
</t-radio-group>
</div>
<t-space>
<t-checkbox v-model="stripe">显示斑马纹</t-checkbox>
<t-checkbox v-model="bordered">显示表格边框</t-checkbox>
<t-checkbox v-model="hover">显示悬浮效果</t-checkbox>
<t-checkbox v-model="tableLayout">宽度自适应</t-checkbox>
<t-checkbox v-model="showHeader">显示表头</t-checkbox>
</t-space>
<!-- 当数据为空需要占位时会显示 cellEmptyContent -->
<t-table
rowKey="index"
:data="data"
:columns="columns"
:stripe="stripe"
:bordered="bordered"
:hover="hover"
:size="size"
:table-layout="tableLayout ? 'auto' : 'fixed'"
:pagination="pagination"
:showHeader="showHeader"
cellEmptyContent="-"
resizable
></t-table>
</t-space>
</div>
</template>
<script setup>
</script>
<style lang="scss" scoped>
</style>

View File

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

31
src/stores/billStock.js Normal file
View File

@ -0,0 +1,31 @@
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);
if (index !== -1) {
this.stockList[index] = arr;
} else {
arr.id = new Date().getTime();
this.stockList.unshift(arr);
}
},
deleteStockList(item) {
let arr = this.stockList.filter((i) => i.id !== item.id);
this.stockList = arr;
},
},
persist: true,
});

9
src/stores/index.js Normal file
View File

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

View File

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