顶部样式修改

gaoluyang

3 天以前 eda75f0599d5cf2863ecde114c0da26cfc986969

顶部样式修改

 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;

 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;

 src/layout/index.vue

@@ -99,7 +99,7 @@
}

.hideSidebar .fixed-header {
  width: calc(100% - 54px);
  width: calc(100% - 120px);
}

.sidebarHide .fixed-header {

 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
      },

 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: "供应商A", type: "动力煤", unit: "吨", number: 100, money: 500 },
      { name: "供应商A", type: "动力煤", unit: "吨", number: 100, money: 500 },
      { name: "供应商B", type: "焦煤", unit: "吨", number: 300, money: 789 },
      { name: "供应商B", type: "焦煤", unit: "吨", number: 256, money: 800 },
      { name: "供应商C", 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>