From eda75f0599d5cf2863ecde114c0da26cfc986969 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 03 六月 2025 09:23:17 +0800
Subject: [PATCH] 顶部样式修改
---
src/views/warehouseManagement/index.vue | 248 +++++++++++++++++++++++++++++++++++++++++++++++++
src/assets/styles/sidebar.scss | 1
src/layout/index.vue | 2
src/layout/components/Sidebar/index.vue | 5
src/store/modules/app.js | 2
5 files changed, 252 insertions(+), 6 deletions(-)
diff --git a/src/assets/styles/sidebar.scss b/src/assets/styles/sidebar.scss
index a1a80ea..eb6a1c8 100644
--- a/src/assets/styles/sidebar.scss
+++ b/src/assets/styles/sidebar.scss
@@ -226,6 +226,7 @@
// when menu collapsed
.el-menu--vertical {
+ width: 120px !important; /* 璁剧疆涓�涓浐瀹氱殑瀹藉害 */
&>.el-menu {
.svg-icon {
//margin-right: 16px;
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index db83af1..4d40e28 100644
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@@ -4,14 +4,12 @@
<el-scrollbar wrap-class="scrollbar-wrapper">
<el-menu
:default-active="activeMenu"
- :collapse="false"
:background-color="getMenuBackground"
:text-color="getMenuTextColor"
:unique-opened="true"
:active-text-color="theme"
- :collapse-transition="true"
+ :collapse="false"
mode="vertical"
- :class="sideTheme"
>
<sidebar-item
v-for="(route, index) in sidebarRouters"
@@ -79,7 +77,6 @@
border: none;
height: 100%;
width: 100% !important;
-
.el-menu-item, .el-sub-menu__title {
&:hover {
background-color: var(--menu-hover, rgba(0, 0, 0, 0.06)) !important;
diff --git a/src/layout/index.vue b/src/layout/index.vue
index a71347d..60738ba 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -99,7 +99,7 @@
}
.hideSidebar .fixed-header {
- width: calc(100% - 54px);
+ width: calc(100% - 120px);
}
.sidebarHide .fixed-header {
diff --git a/src/store/modules/app.js b/src/store/modules/app.js
index 0c1a7f8..e5bbcb0 100644
--- a/src/store/modules/app.js
+++ b/src/store/modules/app.js
@@ -5,7 +5,7 @@
{
state: () => ({
sidebar: {
- opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
+ opened: true,
withoutAnimation: false,
hide: false
},
diff --git a/src/views/warehouseManagement/index.vue b/src/views/warehouseManagement/index.vue
new file mode 100644
index 0000000..06ca93f
--- /dev/null
+++ b/src/views/warehouseManagement/index.vue
@@ -0,0 +1,248 @@
+<template>
+ <div class="app-container">
+ <el-form :inline="true" :model="queryParams" class="search-form">
+ <el-form-item label="鎼滅储">
+ <el-input
+ v-model="queryParams.searchText"
+ placeholder="璇疯緭鍏ュ叧閿瘝"
+ clearable
+ :style="{ width: '100%' }"
+ />
+ </el-form-item>
+ <el-form-item label="渚涘簲鍟嗗悕绉�">
+ <el-input
+ v-model="queryParams.supplierName"
+ placeholder="璇疯緭鍏�"
+ clearable
+ :style="{ width: '100%' }"
+ />
+ </el-form-item>
+ <el-form-item label="缁熶竴浜鸿瘑鍒彿">
+ <el-input
+ v-model="queryParams.identifyNumber"
+ placeholder="璇疯緭鍏�"
+ clearable
+ :style="{ width: '100%' }"
+ />
+ </el-form-item>
+ <el-form-item label="缁忚惀鍦板潃">
+ <el-input
+ v-model="queryParams.address"
+ placeholder="璇疯緭鍏�"
+ clearable
+ :style="{ width: '100%' }"
+ />
+ </el-form-item>
+ <el-form-item>
+ <el-button type="primary" @click="handleQuery">鏌ヨ</el-button>
+ <el-button @click="resetQuery">閲嶇疆</el-button>
+ </el-form-item>
+ </el-form>
+ <el-card>
+ <!-- 鏍囩椤� -->
+ <el-tabs
+ v-model="activeTab"
+ class="info-tabs"
+ @tab-click="handleTabClick"
+ >
+ <el-tab-pane
+ v-for="tab in tabs"
+ :key="tab.name"
+ :label="tab.label"
+ :name="tab.name"
+ />
+ </el-tabs>
+ <!-- 鎿嶄綔鎸夐挳鍖� -->
+ <el-row :gutter="24" class="table-toolbar">
+ <el-button type="primary" :icon="Plus" >鏂板缓</el-button
+ >
+ <el-button type="danger" :icon="Delete">鍒犻櫎</el-button>
+ <el-button type="info" :icon="Download">瀵煎嚭</el-button>
+ </el-row>
+ <div>
+ <el-table :data="tableData" border :span-method="mergeSameRows">
+ <el-table-column type="selection" width="55" align="center" />
+ <el-table-column label="搴忓彿" type="index" width="60" align="center" />
+ <el-table-column prop="name" label="渚涜揣鍟嗗悕绉�" width="180" />
+ <el-table-column prop="type" label="鐓ょ" />
+ <el-table-column prop="unit" label="鍗曚綅" />
+ <el-table-column prop="number" label="搴撳瓨鏁伴噺" />
+ <el-table-column prop="money" label="鍗曚环锛堝惈绋庯級" />
+ <el-table-column prop="money1" label="鎬讳环锛堝惈绋庯級" />
+ <el-table-column prop="money2" label="鎴愭湰鍗曚环" />
+ <el-table-column prop="money3" label="鍒╂鼎" />
+ <el-table-column prop="createUser" label="鐧昏浜�" />
+ <el-table-column prop="createTime" label="鐧昏鏃ユ湡" />
+ </el-table>
+ </div>
+ </el-card>
+ </div>
+</template>
+
+<script setup>
+import {onMounted, ref} from "vue";
+import {Delete, Download, Plus} from "@element-plus/icons-vue";
+
+const tableData = ref([])
+const columns = ref([])
+const tableLoading = ref(false);
+const total = ref(0);
+// 褰撳墠鏍囩
+const activeTab = ref("pendingInbound");
+const tabName = ref("pendingInbound");
+// 鏍囩椤垫暟鎹�
+const tabs = reactive([
+ { name: "pendingInbound", label: "寰呭叆搴�" },
+ { name: "officialInventory", label: "姝ｅ紡搴撳瓨" },
+]);
+// 鏌ヨ鍙傛暟
+const queryParams = reactive({
+ searchText: "",
+ supplierName: "",
+ identifyNumber: "",
+ address: "",
+})
+onMounted(() => {
+ handleTabClick({ props: { name: "supplier" } });
+});
+// 鏍囩椤电偣鍑�
+const handleTabClick = (tab) => {
+ getList();
+ tableLoading.value = true;
+ tabName.value = tab.props.name;
+ tableData.value = [];
+ getList();
+ // switch (tabName.value) {
+ // case "pendingInbound":
+ // columns.value = pendingColumns;
+ // break;
+ // case "officialInventory":
+ // columns.value = officialColumns;
+ // break;
+ // }
+ setTimeout(() => {
+ tableLoading.value = false;
+ }, 500);
+};
+// 鐐瑰嚮鏌ヨ
+const handleQuery = () => {
+ tableLoading.value = true;
+ setTimeout(() => {
+ tableLoading.value = false;
+ }, 500);
+}
+const getList = () => {
+ tableLoading.value = true;
+ setTimeout(() => {
+ // 鏆傛椂寮曞叆娴嬭瘯鏁版嵁
+ tableData.value = [
+ { name: "渚涘簲鍟咥", type: "鍔ㄥ姏鐓�", unit: "鍚�", number: 100, money: 500 },
+ { name: "渚涘簲鍟咥", type: "鍔ㄥ姏鐓�", unit: "鍚�", number: 100, money: 500 },
+ { name: "渚涘簲鍟咮", type: "鐒︾叅", unit: "鍚�", number: 300, money: 789 },
+ { name: "渚涘簲鍟咮", type: "鐒︾叅", unit: "鍚�", number: 256, money: 800 },
+ { name: "渚涘簲鍟咰", type: "鏃犵儫鐓�", unit: "鍚�", number: 256, money: 700 }
+ ];
+ total.value = tableData.value.length;
+ tableLoading.value = false;
+ }, 500);
+};
+// 閲嶇疆鏌ヨ
+const resetQuery = () => {
+ Object.keys(queryParams).forEach((key) => {
+ if (key !== "pageNum" && key !== "pageSize") {
+ queryParams[key] = "";
+ }
+ });
+ handleQuery();
+};
+// 鍚堝苟鐩稿悓琛岀殑鏂规硶
+const mergeSameRows = ({ row, column, rowIndex, columnIndex }) => {
+ const fieldsToMerge = ['number', 'money']
+
+ if (fieldsToMerge.includes(column.property)) {
+ const prevRow = tableData.value[rowIndex - 1]
+ const nextRow = tableData.value[rowIndex + 1]
+ // 鍒ゆ柇褰撳墠琛屽拰涓嬩竴琛屾槸鍚︾浉绛�
+ if (
+ (!prevRow || prevRow[column.property] !== row[column.property]) &&
+ (!nextRow || nextRow[column.property] === row[column.property])
+ ) {
+ let count = 1
+ while (
+ tableData.value[rowIndex + count] &&
+ tableData.value[rowIndex + count][column.property] === row[column.property]
+ ) {
+ count++
+ }
+ return { rowspan: count, colspan: 1 }
+ } else if (prevRow && prevRow[column.property] === row[column.property]) {
+ // 闅愯棌琚悎骞剁殑鍗曞厓鏍�
+ return { rowspan: 0, colspan: 0 }
+ }
+ return { rowspan: 1, colspan: 1 }
+ }
+
+ // 鍏朵粬鍒椾笉鍚堝苟
+ return { rowspan: 1, colspan: 1 }
+}
+</script>
+
+<style scoped>
+.app-container{
+ box-sizing: border-box;
+}
+.search-form {
+ background-color: #fff;
+ padding: 20px 20px 0 20px;
+ margin-bottom: 20px;
+ border-radius: 4px;
+ box-shadow: var(--el-box-shadow-light);
+}
+.search-form :deep(.el-form-item) {
+ margin-bottom: 16px;
+ width: 100%;
+}
+
+/* 鍝嶅簲寮忓竷灞� */
+@media screen and (min-width: 768px) {
+ .search-form :deep(.el-form-item) {
+ width: 50%;
+ }
+}
+@media screen and (min-width: 1200px) {
+ .search-form :deep(.el-form-item) {
+ width: 18%;
+ }
+}
+
+.table-toolbar {
+ margin-bottom: 20px;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px;
+}
+
+:deep(.el-table) {
+ margin-bottom: 20px;
+ overflow-x: auto;
+}
+
+:deep(.el-table th) {
+ background-color: #f5f7fa;
+}
+
+/* 鍝嶅簲寮忔牱寮� */
+@media screen and (max-width: 768px) {
+ :deep(.el-table) {
+ width: 100%;
+ overflow-x: auto;
+ }
+}
+/* 琛ㄦ牸宸ュ叿鏍� */
+.table-toolbar, .table-toolbar > * {
+ margin: 0 0 0 0 !important;
+}
+.table-toolbar{
+ margin-bottom: 20px !important;
+}
+</style>
\ No newline at end of file
--
Gitblit v1.9.3