销售出库页面开发

gaoluyang

10 天以前 d13487486a3c3c7cf93bd3bda65dcc0d6af51aa2

 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>