@agile-team/wl-skills-kit 1.0.0

package/files/demo/sale/demo/metallurgical-spec/index.scss

@@ -0,0 +1,264 @@
+/*
+ * @Author: ChenYu ycyplus@gmail.com
+ * @Date: 2025-12-31 15:25:40
+ * @LastEditors: ChenYu ycyplus@gmail.com
+ * @LastEditTime: 2026-01-03 23:47:09
+ * @FilePath: \cx-ui-sale\src\views\sale\demo\metallurgical-spec\index.scss
+ * @Description: 冶金规范模板 - 样式表
+ * Copyright (c) 2025 by CHENY, All Rights Reserved 😎.
+ */
+
+.metallurgical-spec-page {
+  // 变量定义
+  $spacing: 16px;
+  $small-spacing: 12px;
+  $tiny-spacing: 10px;
+  $border-radius: 4px;
+  $transition-fast: 0.2s;
+  $transition-normal: 0.3s;
+
+  // 性能优化
+  contain: layout style;
+  will-change: auto;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 8px;
+  background: #fff;
+  margin: 8px;
+
+  // 顶部标签页
+  .main-tabs {
+    margin-bottom: $spacing;
+    background: #fff;
+    padding: 0 $spacing;
+    border-radius: $border-radius;
+  }
+
+  // 明细表格容器（替代Splitter）
+  .detail-tables-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: $spacing;
+    overflow: hidden;
+    contain: layout style;
+    transform: translateZ(0); // 强制硬件加速
+
+    // 未选择树节点时的提示
+    .no-tree-selection-tip {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: #fff;
+      border-radius: $border-radius;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+
+      :deep(.el-empty) {
+        .el-empty__description {
+          font-size: 16px;
+          color: #909399;
+          margin-top: $spacing;
+        }
+      }
+    }
+
+    // 表格内容容器
+    .tables-content {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: $spacing;
+      overflow: hidden;
+    }
+    .main-table-section,
+    .experiment-section {
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      contain: layout style;
+      background: #fff;
+      border-radius: $border-radius;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+
+    .main-table-section {
+      padding: $spacing;
+    }
+
+    .experiment-section {
+      padding: $spacing;
+      max-height: 350px;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+
+      .experiment-header {
+        flex-shrink: 0;
+        margin-bottom: $small-spacing;
+      }
+      // 强制表格滚动
+      :deep(.base-table) {
+        overflow: auto !important;
+
+        .el-table {
+          .el-table__body-wrapper {
+            max-height: 250px !important;
+            overflow-y: scroll !important;
+            overflow-x: auto !important;
+          }
+        }
+
+        // 确保滚动条可见
+        .el-table__body-wrapper::-webkit-scrollbar {
+          width: 12px;
+          background: #f0f0f0;
+        }
+
+        .el-table__body-wrapper::-webkit-scrollbar-thumb {
+          background: #c0c0c0;
+          border-radius: 6px;
+
+          &:hover {
+            background: #a0a0a0;
+          }
+        }
+      }
+    }
+  }
+
+  // 拖动提示图标
+  .drag-hint-icon {
+    font-size: 18px;
+    color: #909399;
+    margin-right: 8px;
+    cursor: ns-resize;
+    user-select: none;
+    font-weight: bold;
+  }
+
+  // 列表页内容
+  .list-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    background: #fff;
+    border-radius: $border-radius;
+    padding: $spacing;
+    overflow: hidden;
+    // 分页器包装器
+    .pagination-wrapper {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      margin-top: $spacing;
+      padding-top: $small-spacing;
+    }
+
+    .list-table-container {
+      flex: 1;
+      min-height: 0;
+      overflow: hidden;
+    }
+  }
+
+  // 详情包装器
+  .detail-wrapper {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+
+    // 主内容区域包装器（左右拖动布局）
+    .detail-content-wrapper {
+      flex: 1;
+      overflow: hidden;
+    }
+  }
+
+  // 顶部搜索区域间距
+  :deep(.base-query) {
+    margin-bottom: $spacing;
+  }
+
+  // 详情区域（右侧内容）
+  .detail-area {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    background: #fff;
+    border-radius: $border-radius;
+    padding: $spacing;
+  }
+
+  // 详情标签页按钮组
+  .detail-tabs-buttons {
+    flex-shrink: 0;
+    margin-bottom: $spacing;
+  }
+
+  // 详情内容区域
+  .detail-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+
+    // 工具栏下间距
+    .toolbar-spacing {
+      margin-bottom: $tiny-spacing;
+      flex-shrink: 0;
+    }
+
+    // 表格容器
+    .table-container {
+      flex: 1;
+      min-height: 0;
+      overflow: hidden;
+    }
+
+    // 明细信息的表格容器（固定高度，给实验表格留空间）
+    &[data-tab="detail"] {
+      // 移除 table-container 固定高度，让 C_Splitter 控制
+      .detail-tables-splitter {
+        flex: 1;
+      }
+    }
+
+    // 实验项目信息区域头部
+    .experiment-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: $small-spacing;
+
+      .experiment-title {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+
+        .title-arrow {
+          font-size: 16px;
+          color: #606266;
+        }
+
+        .title-text {
+          font-size: 14px;
+          font-weight: 600;
+          color: #303133;
+        }
+      }
+    }
+
+    // 明细信息占位
+    .detail-info-placeholder {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #909399;
+      font-size: 16px;
+    }
+  }
+}

package/files/demo/sale/demo/metallurgical-spec/index.vue

@@ -0,0 +1,309 @@
+<!--
+ * @Author: ChenYu ycyplus@gmail.com
+ * @Date: 2025-12-31 15:10:30
+ * @LastEditors: ChenYu ycyplus@gmail.com
+ * @LastEditTime: 2026-01-03 09:15:45
+ * @FilePath: \cx-ui-sale\src\views\sale\demo\metallurgical-spec\index.vue
+ * @Description: 冶金规范模板 - 经典主明细布局（精简优化版）
+ * Copyright (c) 2025 by CHENY, All Rights Reserved 😎.
+ -->
+
+<template>
+  <div class="metallurgical-spec-page">
+    <!-- 主标签页 -->
+    <el-tabs v-model="activeTab" class="main-tabs">
+      <el-tab-pane
+        v-for="tab in mainTabsConfig"
+        :key="tab.name"
+        :label="tab.label"
+        :name="tab.name"
+      />
+    </el-tabs>
+
+    <!-- 列表页面 -->
+    <div v-show="activeTab === 'list'" class="list-content">
+      <BaseQuery
+        :form="unifiedQueryForm"
+        :items="listQueryItemsConfig"
+        :columns="5"
+        labelWidth="120px"
+        @select="handleUnifiedQuerySearch"
+        @reset="handleUnifiedQueryReset"
+      />
+
+      <BaseTable
+        :data="listTableData"
+        :columns="listTableColumnsConfig"
+        :loading="listLoading"
+        height="100%"
+      />
+
+      <div class="pagination-wrapper">
+        <jh-pagination
+          :current-page="listPagination.pageNum"
+          :page-size="listPagination.pageSize"
+          :total="listPagination.total"
+          @current-change="handleListPageChange"
+          @size-change="handleListSizeChange"
+        />
+      </div>
+    </div>
+
+    <!-- 详情页面 -->
+    <div v-show="activeTab === 'detail'" class="detail-wrapper">
+      <BaseQuery
+        :form="unifiedQueryForm"
+        :items="listQueryItemsConfig"
+        :columns="5"
+        labelWidth="120px"
+        @select="handleUnifiedQuerySearch"
+        @reset="handleUnifiedQueryReset"
+      />
+
+      <!-- 左右布局 -->
+      <jh-drag-col :left-width="300" class="detail-content-wrapper">
+        <template #left>
+          <C_Tree
+            :tabs="treeTabsConfig"
+            :tree-data="treeData"
+            :tree-props="treeProps"
+            :default-active-tab="treeActiveTab"
+            @node-click="handleNodeClick"
+            @tab-change="handleTreeTabChange"
+          />
+        </template>
+
+        <template #right>
+          <div class="detail-area">
+            <!-- 详情标签页 -->
+            <div class="detail-tabs-buttons">
+              <el-button-group>
+                <el-button
+                  v-for="tab in detailTabsConfig"
+                  :key="tab.name"
+                  :type="detailActiveTab === tab.name ? 'primary' : ''"
+                  size="small"
+                  @click="detailActiveTab = tab.name"
+                >
+                  {{ tab.label }}
+                </el-button>
+              </el-button-group>
+            </div>
+
+            <!-- 基本信息 -->
+            <div v-if="detailActiveTab === 'basic'" class="detail-content">
+              <BaseQuery
+                :form="detailQueryForm"
+                :items="detailQueryItemsConfig"
+                :columns="5"
+                @select="handleDetailQuerySearch"
+                @reset="handleDetailQueryReset"
+              />
+
+              <BaseToolbar :items="toolbarItems" size="small" />
+
+              <BaseTable
+                :data="tableData"
+                :columns="tableColumnsConfig"
+                :loading="loading"
+                height="100%"
+                @selection-change="handleSelectionChange"
+              />
+
+              <div class="pagination-wrapper">
+                <jh-pagination
+                  :current-page="pagination.pageNum"
+                  :page-size="pagination.pageSize"
+                  :total="pagination.total"
+                  @current-change="handlePageChange"
+                  @size-change="handleSizeChange"
+                />
+              </div>
+            </div>
+
+            <!-- 明细信息 -->
+            <div v-if="detailActiveTab === 'detail'" class="detail-content">
+              <BaseQuery
+                :form="detailQueryForm"
+                :items="detailQueryItemsConfig"
+                :columns="5"
+                @select="handleDetailQuerySearch"
+                @reset="handleDetailQueryReset"
+              />
+
+              <BaseToolbar :items="detailToolbarItems" size="small" />
+
+              <!-- 主明细表格区域 -->
+              <div class="detail-tables-container">
+                <!-- 未选择节点时的提示 -->
+                <div v-if="!isTreeNodeSelected" class="no-tree-selection-tip">
+                  <el-empty
+                    description="请先点击左侧树节点选择数据"
+                    :image-size="120"
+                  >
+                    <template #image>
+                      <el-icon :size="60" color="#909399">
+                        <ArrowLeft />
+                      </el-icon>
+                    </template>
+                  </el-empty>
+                </div>
+
+                <!-- 选择节点后显示表格数据 -->
+                <div v-else class="tables-content">
+                  <C_Splitter direction="vertical">
+                    <div class="main-table-section">
+                      <BaseTable
+                        :key="updateKey"
+                        :data="tableData"
+                        :columns="tableColumnsConfig"
+                        :loading="loading"
+                        height="300px"
+                        @selection-change="handleSelectionChange"
+                        @row-click="handleRowClick"
+                      />
+                    </div>
+                    <div>
+                      <div class="experiment-section">
+                        <div class="experiment-header">
+                          <div class="experiment-title">
+                            <el-icon class="title-arrow"><ArrowDown /></el-icon>
+                            <span class="title-text">实验项目信息</span>
+                          </div>
+                        </div>
+
+                        <BaseTable
+                          :key="updateKey"
+                          :data="experimentData"
+                          :columns="experimentColumnsConfig"
+                          :loading="loading"
+                          height="250px"
+                          :max-height="250"
+                          style="overflow-y: auto"
+                        />
+
+                        <div class="pagination-wrapper">
+                          <jh-pagination
+                            :current-page="experimentPagination.pageNum"
+                            :page-size="experimentPagination.pageSize"
+                            :total="experimentPagination.total"
+                            @current-change="handleExperimentPageChange"
+                            @size-change="handleExperimentSizeChange"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </C_Splitter>
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </jh-drag-col>
+    </div>
+  </div>
+
+  <!-- 主表格编辑弹窗 -->
+  <c_formModal
+    ref="mainModalRef"
+    :form-items="mainModalConfig.formItems"
+    :api="mainModalConfig.api"
+    :width="mainModalConfig.width"
+    :columns="mainModalConfig.columns"
+    :label-width="mainModalConfig.labelWidth"
+    :title-prefix="mainModalConfig.titlePrefix"
+    @ok="handleMainModalOk"
+  />
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted, watch, nextTick } from "vue";
+import { ArrowDown, ArrowLeft } from "@element-plus/icons-vue";
+import c_formModal from "@/components/local/c_formModal/index.vue";
+import C_Splitter from "@/components/global/C_Splitter/index.vue";
+import {
+  // 状态
+  activeTab,
+  treeActiveTab,
+  detailActiveTab,
+  loading,
+  listLoading,
+  treeData,
+  tableData,
+  listTableData,
+  experimentData,
+  updateKey,
+  currentSelectedRow,
+  isTreeNodeSelected,
+  unifiedQueryForm,
+  detailQueryForm,
+  pagination,
+  listPagination,
+  experimentPagination,
+  // 配置
+  mainTabsConfig,
+  treeTabsConfig,
+  detailTabsConfig,
+  treeProps,
+  listQueryItemsConfig,
+  detailQueryItemsConfig,
+  tableColumnsConfig,
+  listTableColumnsConfig,
+  experimentColumnsConfig,
+  toolbarItems,
+  detailToolbarItems,
+  // 方法
+  handleNodeClick,
+  handleUnifiedQuerySearch,
+  handleUnifiedQueryReset,
+  handleListPageChange,
+  handleListSizeChange,
+  handleDetailQuerySearch,
+  handleDetailQueryReset,
+  handlePageChange,
+  handleSizeChange,
+  handleSelectionChange,
+  handleRowClick,
+  handleExperimentPageChange,
+  handleExperimentSizeChange,
+  handleTreeTabChange,
+  // 主表格编辑弹窗相关
+  mainModalConfig,
+  handleMainModalOk,
+  initData,
+  loadListData,
+  loadExperimentData,
+  cleanup
+} from "./data";
+
+// 弹窗引用
+const mainModalRef = ref<InstanceType<typeof c_formModal>>();
+
+// 生命周期
+onMounted(() => {
+  activeTab.value === "list" ? loadListData() : initData();
+  // 延迟设置弹窗引用，确保组件已完全挂载
+  nextTick(() => {
+    if (typeof window !== "undefined" && mainModalRef.value) {
+      (window as any).mainModalRef = mainModalRef.value;
+    }
+  });
+});
+
+onUnmounted(cleanup);
+
+// 标签切换监听
+watch(activeTab, (newTab) => {
+  newTab === "detail" ? initData() : loadListData();
+});
+
+watch(detailActiveTab, (newTab) => {
+  if (newTab === "detail" && currentSelectedRow.value) {
+    loadExperimentData(currentSelectedRow.value);
+  }
+});
+</script>
+
+<style scoped lang="scss">
+@import "./index.scss";
+</style>