From 4b4530087295f9b53dcff84888b7a08c07640846 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 03 六月 2025 14:57:50 +0800
Subject: [PATCH] 整体样式修改
---
src/views/basicInformation/index.vue | 27 ------
src/views/warehouseManagement/index.vue | 58 -------------
src/assets/styles/index.scss | 26 ++++++
src/views/salesOutbound/index.vue | 111 +++++++++++++++++++++++++++
src/layout/components/TagsView/index.vue | 4
src/components/Table/ETable.vue | 2
6 files changed, 143 insertions(+), 85 deletions(-)
diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index d31507c..7e29432 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -124,9 +124,33 @@
//main-container鍏ㄥ眬鏍峰紡
.app-container {
padding: 20px;
- background-color: #f5f7fa;
+ background-color: #F7F7F7;
min-height: calc(100vh - 84px);
}
+.search-form {
+ background: #fff;
+ padding: 20px 20px 0 20px;
+ margin-bottom: 20px;
+ border-radius: 4px;
+ box-shadow: var(--el-box-shadow-light);
+}
+.table-toolbar {
+ margin-bottom: 20px;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px;
+}
+/* 鍝嶅簲寮忓竷灞� */
+@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%;
+ }
+}
.components-container {
margin: 30px 50px;
diff --git a/src/components/Table/ETable.vue b/src/components/Table/ETable.vue
index 1574660..7a5b922 100644
--- a/src/components/Table/ETable.vue
+++ b/src/components/Table/ETable.vue
@@ -6,6 +6,7 @@
:border="border"
:show-selection="showSelection"
:max-height="maxHeight"
+ :header-cell-style="{ background: '#EBEEF5', color: '#3D3D3D' }"
@selection-change="handleSelectionChange"
@row-click="handleRowClick"
@row-dblclick="handleRowDblClick"
@@ -20,7 +21,6 @@
v-bind="col"
:show-overflow-tooltip="shouldShowTooltip(col, tableData)"
:formatter="(row, column, cellValue) => cellValue == null || cellValue === '' ? '--' : cellValue"
- align="center"
>
<template v-if="col.slot" #default>
<slot></slot>
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
index 0839b2a..6321343 100644
--- a/src/layout/components/TagsView/index.vue
+++ b/src/layout/components/TagsView/index.vue
@@ -259,7 +259,7 @@
<style lang="scss" scoped>
.tags-view-container {
- height: 30px;
+ height: 34px;
width: 100%;
position: fixed; /* 灏嗗ご閮ㄥ浐瀹� */
top: 50px; /* 鍦ㄩ《閮ㄥ浐瀹� */
@@ -292,7 +292,7 @@
&.active {
border-radius: 10px 10px 0px 0px;
- background-color: #F2F2F4 !important;
+ background-color: #F7F7F7 !important;
color: #165DFF;
}
}
diff --git a/src/views/basicInformation/index.vue b/src/views/basicInformation/index.vue
index c77fc2d..9a35c6a 100644
--- a/src/views/basicInformation/index.vue
+++ b/src/views/basicInformation/index.vue
@@ -68,7 +68,7 @@
@delete="handleDeleteSuccess"
:show-selection="true"
:border="true"
- :maxHeight="440"
+ :maxHeight="480"
/>
</div>
<pagination
@@ -509,28 +509,6 @@
</script>
<style scoped>
-.app-container {
- padding: 20px;
- background-color: #f5f7fa;
- box-sizing: border-box;
- min-height: calc(100vh - 84px);
-}
-.search-form {
- background: #fff;
- padding: 20px 20px 0 20px;
- margin-bottom: 20px;
- border-radius: 4px;
- box-shadow: var(--el-box-shadow-light);
-}
-.el-form-item__label{
- padding: 0 5px 0 0 !important;
- font-weight: 500;
-}
-.search-form :deep(.el-form-item) {
- margin-bottom: 16px;
- width: 100%;
-}
-
/* 鍝嶅簲寮忓竷灞� */
@media screen and (min-width: 768px) {
.search-form :deep(.el-form-item) {
@@ -541,9 +519,6 @@
.search-form :deep(.el-form-item) {
width: 16%;
}
-}
-.info-tabs {
- margin-bottom: 20px;
}
.table-toolbar {
margin-bottom: 20px;
diff --git a/src/views/salesOutbound/index.vue b/src/views/salesOutbound/index.vue
new file mode 100644
index 0000000..f104b4a
--- /dev/null
+++ b/src/views/salesOutbound/index.vue
@@ -0,0 +1,111 @@
+<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">
+ <el-tab-pane
+ v-for="tab in tabs"
+ :key="tab.name"
+ :label="tab.label"
+ :name="tab.name"
+ />
+ </el-tabs>
+ <!-- 鎿嶄綔鎸夐挳鍖� -->
+ <el-space>
+ <el-button type="primary" :icon="Plus" @click="handleAdd">鏂板缓</el-button>
+ <el-button type="danger" :icon="Delete" @click="handleDelete">鍒犻櫎</el-button>
+ <el-button type="info" :icon="Download" @click="handleExport">瀵煎嚭</el-button>
+ </el-space>
+ </el-card>
+ </div>
+</template>
+
+<script setup>
+import {ref, reactive} from "vue";
+import {Delete, Download, Plus} from "@element-plus/icons-vue";
+
+const activeTab = ref("out");
+// 鏍囩椤垫暟鎹�
+const tabs = reactive([
+ { name: "out", label: "閿�鍞嚭搴�" },
+]);
+const tableLoading = ref(false);
+// 鏌ヨ鍙傛暟
+const queryParams = reactive({
+ searchText: "",
+ supplierName: "",
+ identifyNumber: "",
+ address: "",
+})
+
+// 鐐瑰嚮鏌ヨ
+const handleQuery = () => {
+ tableLoading.value = true;
+ setTimeout(() => {
+ tableLoading.value = false;
+ }, 500);
+}
+// 閲嶇疆鏌ヨ
+const resetQuery = () => {
+ Object.keys(queryParams).forEach((key) => {
+ if (key !== "pageNum" && key !== "pageSize") {
+ queryParams[key] = "";
+ }
+ });
+ handleQuery();
+};
+// 鏂板鍑哄簱
+const handleAdd = () => {
+
+};
+// 鍒犻櫎鍑哄簱
+const handleDelete = () => {
+
+};
+// 瀵煎嚭鍑哄簱
+const handleExport = () => {
+
+};
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/warehouseManagement/index.vue b/src/views/warehouseManagement/index.vue
index 1bdec21..b0ce67e 100644
--- a/src/views/warehouseManagement/index.vue
+++ b/src/views/warehouseManagement/index.vue
@@ -53,12 +53,12 @@
/>
</el-tabs>
<!-- 鎿嶄綔鎸夐挳鍖� -->
- <el-row :gutter="24" class="table-toolbar">
+ <el-space>
<el-button type="primary" :icon="Plus" >鏂板缓</el-button>
<el-button type="danger" :icon="Delete">鍒犻櫎</el-button>
<el-button type="info" plain :icon="Download">瀵煎嚭</el-button>
<el-button type="success" plain :icon="Refresh" v-if="activeTab=== 'officialInventory'" @click="mergeRows">鍚堝苟</el-button>
- </el-row>
+ </el-space>
<div>
<el-table :data="tableData" border @selection-change="selectionChange">
<el-table-column type="selection" width="55" align="center" />
@@ -77,7 +77,6 @@
<el-table-column fixed="right" label="鎿嶄綔" min-width="90" align="center">
<template #default>
<el-button link type="primary" size="small">缂栬緫</el-button>
- <el-button link type="danger" size="small">鍒犻櫎</el-button>
</template>
</el-table-column>
</el-table>
@@ -284,58 +283,7 @@
</script>
<style scoped>
-.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;
+ margin: 20px 0;
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3