@agile-team/wl-skills-kit 1.0.0

package/files/demo/sale/demo/billet-flame-cut-plan/index.scss

@@ -0,0 +1,155 @@
+.billet-flame-cut-plan {
+  padding: 8px;
+  background-color: #f5f5f5;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 8px;
+
+  .main-tabs {
+    background: #fff;
+    padding: 10px 10px;
+  }
+
+  .search-form {
+    .search-row {
+      margin-bottom: 8px;
+
+      :deep(.el-col) {
+        width: 20%;
+        flex: unset;
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      :deep(.el-form-item) {
+        margin-bottom: 0;
+        width: 100%;
+
+        .el-form-item__content {
+          flex: 1;
+          margin-left: 0 !important;
+        }
+      }
+    }
+  }
+
+  .el-divider--horizontal {
+    margin: 16px 0;
+  }
+
+    .cut-info-divider {
+      margin: 8px 0 16px 0 !important;
+    }
+  .action-buttons {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+
+    .el-button + .el-button {
+      margin-left: 0;
+    }
+  }
+
+  .el-button--small {
+    font-size: 14px;
+  }
+
+  .page-container {
+    margin-top: 16px;
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .table-section {
+    margin-top: 16px;
+  }
+}
+
+// 子标题线条样式调整
+:deep(.el-divider__text.is-left) {
+  left: 0px;
+}
+
+:deep(.el-divider__text.is-left:after) {
+  content: "";
+  width: 4px;
+  height: 16px;
+  position: absolute;
+  left: 6px;
+  top: 4px;
+  background-color: rgba(85.8, 119.1, 255, 1);
+}
+
+// 覆盖tabs的样式
+.main-tab {
+  :deep(.el-tabs__header) {
+    margin-bottom: 0;
+  }
+
+  :deep(.el-tabs__nav) {
+    .el-tabs__active-bar {
+      background-color: transparent;
+    }
+
+    .el-tabs__item {
+      padding: 0 10px;
+      color: #666;
+      box-shadow: 0px -4px 5px 0px rgba(0, 0, 0, 0.05);
+      border-top-left-radius: 4px;
+      border-top-right-radius: 4px;
+
+      &:last-child {
+        padding-right: 10px;
+      }
+
+      &:nth-child(2) {
+        padding-left: 10px;
+      }
+    }
+
+    .is-active {
+      background-color: #fff;
+      color: #000;
+    }
+  }
+}
+
+// 主内容区域 - 左右布局
+.main-content {
+  display: flex;
+  gap: 16px;
+  height: calc(100vh - 280px);
+  align-items: flex-start; // 确保顶部对齐
+
+  .left-panel,
+  .right-panel {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-width: 0; // 防止内容溢出
+  }
+
+  .left-panel {
+    .pagination-wrapper {
+      margin-top: 16px;
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
+
+  // 确保两个表格的divider和表头对齐
+  :deep(.el-divider) {
+    margin: 16px 0 !important;
+  }
+
+  :deep(.el-table) {
+    flex: 1;
+    
+    .el-table__header-wrapper {
+      background-color: #fafafa;
+    }
+  }
+}

package/files/demo/sale/demo/billet-flame-cut-plan/index.vue

@@ -0,0 +1,117 @@
+<!--
+ * @Author: ChenYu ycyplus@gmail.com
+ * @Date: 2025-06-13 18:38:58
+ * @LastEditors: ChenYu ycyplus@gmail.com
+ * @LastEditTime: 2026-01-04 00:29:09
+ * @FilePath: \cx-ui-sale\src\views\sale\demo\billet-flame-cut-plan\index.vue
+ * @Description: 钢坯火切计划 - 视图层
+ * Copyright (c) 2025 by CHENY, All Rights Reserved 😎.
+ -->
+<template>
+  <div class="app-container app-page-container">
+    <el-tabs v-model="activeTab" class="main-tab">
+      <el-tab-pane label="火切计划" name="plan">
+        <!-- 搜索栏 -->
+        <BaseQuery
+          :form="queryParam"
+          :items="queryItems"
+          :columns="5"
+          @select="select"
+          @reset="select"
+        />
+        <!-- 工具栏 -->
+        <BaseToolbar :items="toolbars" />
+        <!-- 主内容区域 - 左右布局 -->
+        <div class="main-content">
+          <!-- 左侧：计划信息 -->
+          <div class="left-panel">
+            <el-divider content-position="left">计划信息</el-divider>
+            <BaseTable
+              ref="tableRef"
+              :data="list"
+              :columns="columns"
+              :render-type="renderType"
+              :loading="loading"
+            />
+            <!-- 分页 -->
+            <jh-pagination
+              v-show="page.total > 0"
+              :total="page.total"
+              v-model:currentPage="page.current"
+              v-model:pageSize="page.size"
+              @current-change="select"
+              @size-change="select"
+              class="pagination-wrapper"
+            />
+          </div>
+          <!-- 右侧：切割信息 -->
+          <div class="right-panel">
+            <el-divider content-position="left" class="cut-info-divider">切割信息</el-divider>
+            <BaseTable
+              :data="cutList"
+              :columns="cutColumns"
+              :render-type="renderType"
+              :loading="loading"
+            />
+          </div>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="火切实绩" name="result">
+        <!-- 预留火切实绩内容 -->
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+  <!-- 表单弹窗 -->
+  <c_formModal 
+    ref="modalRef" 
+    :form-items="modalConfig.formItems"
+    :api="modalConfig.api"
+    :width="modalConfig.width"
+    :columns="modalConfig.columns"
+    :label-width="modalConfig.labelWidth"
+    :title-prefix="modalConfig.titlePrefix"
+    @ok="select" 
+  />
+</template>
+
+<script setup lang="ts">
+import c_formModal from "@/components/local/c_formModal/index.vue";
+import { createPageHook, renderType } from "./data";
+import "./index.scss";
+
+// 弹窗引用
+const modalRef = ref();
+
+// 创建页面Hook实例
+const Page = createPageHook(modalRef);
+
+// 解构使用
+const {
+  activeTab,
+  queryParam,
+  page,
+  tableRef,
+  list,
+  cutList,
+  loading,
+  queryItems,
+  toolbars,
+  columns,
+  cutColumns,
+  modalConfig
+} = Page;
+
+// 查询数据
+const select = async () => {
+  await Page.select();
+};
+
+// 初始化
+onMounted(() => {
+  select();
+});
+</script>
+
+<style scoped lang="scss">
+@import "./index.scss";
+</style>

package/files/demo/sale/demo/domestic-trade-order/data.ts

@@ -0,0 +1,308 @@
+/*
+ * @Author: ChenYu ycyplus@gmail.com
+ * @Date: 2025-06-13 18:38:58
+ * @LastEditors: ChenYu ycyplus@gmail.com
+ * @LastEditTime: 2026-01-04 09:20:35
+ * @FilePath: \cx-ui-sale\src\views\sale\demo\domestic-trade-order\data.ts
+ * @Description: 内贸订单 - 数据逻辑层（配置和业务逻辑）
+ * Copyright (c) 2025 by CHENY, All Rights Reserved 😎.
+ */
+import type { Ref } from "vue";
+import {
+  AbstractPageQueryHook,
+  BaseQueryItemDesc,
+  ActionButtonDesc,
+  TableColumnDesc,
+  BusLogicDataType
+} from "@/types/page";
+
+import type { BaseFormItemDesc } from "@jhlc/common-core/src/components/form/common/type";
+import { useTableDelete } from "@/composables/useTableDelete";
+
+// 表格渲染类型
+export const renderType = ref<"dataTable" | "agGrid">("dataTable");
+
+/**
+ * API 配置 - 统一管理所有接口地址
+ */
+export const API_CONFIG = {
+  list: "/api/domestic-trade-order/list",
+  remove: "/api/domestic-trade-order/remove",
+  getById: "/api/domestic-trade-order/getOneById",
+  save: "/api/domestic-trade-order/save",
+  update: "/api/domestic-trade-order/update"
+} as const;
+
+/**
+ * 查询项配置
+ */
+export const queryItemsConfig: BaseQueryItemDesc<any>[] = [
+  {
+    name: "companyName",
+    label: "公司名称",
+    placeholder: "请选择"
+  },
+  {
+    name: "groupOrderNo",
+    label: "集团订单号",
+    placeholder: "请输入"
+  },
+  {
+    name: "productionOrderNo",
+    label: "产销订单号",
+    placeholder: "请输入"
+  },
+  {
+    name: "orderStatus",
+    label: "订单状态",
+    placeholder: "请选择",
+    logicType: BusLogicDataType.dict,
+    logicValue: "ORDER_STATUS"
+  },
+  {
+    name: "dateRange",
+    type: "range",
+    startName: "startDate",
+    endName: "endDate",
+    label: "日期录入",
+    logicType: BusLogicDataType.date,
+    rangeSeparator: "至",
+    placeholder: "开始"
+  },
+  {
+    name: "salesCompany",
+    label: "销售公司",
+    placeholder: "请选择",
+    logicType: BusLogicDataType.dict,
+    logicValue: "SALES_COMPANY"
+  },
+  {
+    name: "salesOrg",
+    label: "销售机构",
+    placeholder: "请选择",
+    logicType: BusLogicDataType.dict,
+    logicValue: "SALES_ORG"
+  },
+  {
+    name: "salesEmployeeId",
+    label: "销售员工号",
+    placeholder: "请选择",
+    logicType: BusLogicDataType.dict,
+    logicValue: "SALES_EMPLOYEE"
+  },
+  {
+    name: "productSegment",
+    label: "产品板块",
+    placeholder: "请选择",
+    logicType: BusLogicDataType.dict,
+    logicValue: "PRODUCT_SEGMENT"
+  }
+];
+
+/**
+ * Modal 弹窗配置
+ */
+export const modalConfig = {
+  titlePrefix: "内贸订单",
+  width: "850px",
+  columns: 2,
+  labelWidth: "110px",
+  formItems: [
+    {
+      name: "foreignTradeOrderNo",
+      label: "外贸订单号",
+      required: true,
+      placeholder: "请输入外贸订单号"
+    },
+    {
+      name: "period",
+      label: "周期",
+      required: true,
+      placeholder: "请选择"
+    },
+    {
+      name: "salesOrg",
+      label: "销售机构",
+      required: true,
+      placeholder: "请选择"
+    },
+    {
+      name: "manufacturingBase",
+      label: "制造基地",
+      required: true,
+      placeholder: "请选择"
+    },
+    {
+      name: "orderWeight",
+      label: "订单重量",
+      required: true,
+      placeholder: "请输入订单重量"
+    },
+    {
+      name: "weightedAverage",
+      label: "加权平均",
+      placeholder: "请输入加权平均"
+    },
+    {
+      name: "settlementUser",
+      label: "结算用户",
+      required: true,
+      placeholder: "请输入结算用户"
+    },
+    {
+      name: "finalUser",
+      label: "最终用户",
+      placeholder: "请输入最终用户"
+    },
+    {
+      name: "orderStatus",
+      label: "订单状态",
+      required: true,
+      placeholder: "请选择"
+    },
+    {
+      name: "merchandiser",
+      label: "跟单员",
+      placeholder: "请输入跟单员"
+    },
+    {
+      name: "salesperson",
+      label: "销售员",
+      placeholder: "请输入销售员"
+    },
+    {
+      name: "productionOrder",
+      label: "产销订单",
+      placeholder: "请输入产销订单"
+    }
+  ] as BaseFormItemDesc<any>[],
+  api: {
+    getById: API_CONFIG.getById,
+    save: API_CONFIG.save,
+    update: API_CONFIG.update
+  }
+};
+
+/**
+ * 创建页面Hook实例
+ * @param modalRef 弹窗引用
+ */
+export function createPage(modalRef: Ref<any>) {
+  let Page = new (class extends AbstractPageQueryHook {
+    constructor() {
+      super({
+        url: {
+          list: API_CONFIG.list,
+          remove: API_CONFIG.remove
+        }
+      });
+    }
+
+    // 查询项配置
+    queryDef(): BaseQueryItemDesc<any>[] {
+      return queryItemsConfig;
+    }
+
+    // 工具栏配置
+    toolbarDef(): ActionButtonDesc[] {
+      return [
+        {
+          name: "add",
+          label: "新增",
+          type: "primary",
+          onClick: () => modalRef.value?.open()
+        },
+        { label: "整单复制", plain: true, onClick: () => {} },
+        { label: "审核", type: "success", onClick: () => {} },
+        { label: "价格审核", type: "success", onClick: () => {} },
+        { label: "生效", type: "success", onClick: () => {} },
+        { label: "绿通放行", type: "success", onClick: () => {} },
+        { label: "生成采购计划", plain: true, onClick: () => {} },
+        { label: "一键生成采购合同", plain: true, onClick: () => {} },
+        { label: "天管订货产品确认函", plain: true, onClick: () => {} },
+        { label: "同步产销订单", plain: true, onClick: () => {} },
+        { label: "下发预处理", plain: true, onClick: () => {} },
+        { label: "下发校验", plain: true, onClick: () => {} },
+        { label: "技术、交期评审", plain: true, onClick: () => {} },
+        { label: "合同分款", plain: true, onClick: () => {} },
+        { label: "查看合同", plain: true, onClick: () => {} },
+        { label: "退回", type: "danger", onClick: () => {} }
+      ];
+    }
+
+    // 表格列配置
+    columnsDef(): TableColumnDesc<any>[] {
+      const self = this;
+      const handleDelete = useTableDelete(API_CONFIG.remove, () =>
+        self.select()
+      );
+
+      return [
+        { type: "selection", width: 55 },
+        { label: "外贸订单号", name: "foreignTradeOrderNo", minWidth: 150 },
+        {
+          label: "周期",
+          name: "period",
+          minWidth: 80,
+          align: "center",
+          defaultSlot: ({ row }: any) => {
+            return h(
+              resolveComponent("ElTag") as any,
+              { type: "danger", effect: "light", size: "small" },
+              () => row.period
+            );
+          }
+        },
+        { label: "销售机构", name: "salesOrg", minWidth: 120 },
+        { label: "制造基地", name: "manufacturingBase", minWidth: 120 },
+        {
+          label: "订单重量",
+          name: "orderWeight",
+          minWidth: 100,
+          align: "right"
+        },
+        {
+          label: "加权平均",
+          name: "weightedAverage",
+          minWidth: 100,
+          align: "right"
+        },
+        {
+          label: "结算用户",
+          name: "settlementUser",
+          minWidth: 200,
+          showOverflowTooltip: true
+        },
+        {
+          label: "最终目的地",
+          name: "finalUser",
+          minWidth: 120,
+          showOverflowTooltip: true
+        },
+        { label: "订单状态", name: "orderStatus", minWidth: 120 },
+        { label: "跟单员", name: "merchandiser", minWidth: 90 },
+        { label: "销售员", name: "salesperson", minWidth: 90 },
+        { label: "产销订单", name: "productionOrder", minWidth: 120 },
+        {
+          label: "操作",
+          width: 150,
+          fixed: "right",
+          operations: [
+            {
+              name: "edit",
+              label: "编辑",
+              onClick: (row: any) => modalRef.value?.edit(row.id)
+            },
+            {
+              name: "remove",
+              label: "删除",
+              onClick: (row: any) => handleDelete({ id: row.id })
+            }
+          ]
+        }
+      ];
+    }
+  })();
+
+  return Page.create() as any;
+}

package/files/demo/sale/demo/domestic-trade-order/index.scss

@@ -0,0 +1,99 @@
+/**
+ * 内贸订单 - 样式层
+ */
+
+.app-container {
+  margin: 8px;
+  &.app-page-container {
+    padding: 16px;
+    background-color: #fff;
+  }
+}
+
+.base-toolbar-content {
+  flex-wrap: wrap;
+}
+
+// 查询区域下拉框宽度统一
+:deep(.base-query) {
+  .el-select {
+    width: 100%;
+  }
+}
+
+// 工具栏按钮样式
+:deep(.base-toolbar) {
+  .el-button.is-plain {
+    font-size: 12px;
+  }
+}
+
+// 玻璃风格按钮 - 淡蓝色高级玻璃质感
+:deep(.glass-button) {
+  position: relative;
+  background: linear-gradient(
+    135deg,
+    rgba(135, 206, 250, 0.25) 0%,
+    rgba(173, 216, 230, 0.15) 50%,
+    rgba(135, 206, 250, 0.2) 100%
+  ) !important;
+  backdrop-filter: blur(16px) !important;
+  -webkit-backdrop-filter: blur(16px) !important;
+  border: 1px solid rgba(135, 206, 250, 0.4) !important;
+  box-shadow: 0 4px 16px rgba(135, 206, 250, 0.15),
+    inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
+  color: #2c5f8a !important;
+  font-weight: 500;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+
+  // 添加光泽效果
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 50%;
+    background: linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0.2) 0%,
+      rgba(255, 255, 255, 0) 100%
+    );
+    border-radius: inherit;
+    pointer-events: none;
+  }
+
+  &:hover {
+    background: linear-gradient(
+      135deg,
+      rgba(135, 206, 250, 0.35) 0%,
+      rgba(173, 216, 230, 0.25) 50%,
+      rgba(135, 206, 250, 0.3) 100%
+    ) !important;
+    border-color: rgba(64, 158, 255, 0.6) !important;
+    box-shadow: 0 8px 24px rgba(135, 206, 250, 0.25),
+      inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.2) !important;
+    color: #1a4a75 !important;
+    transform: translateY(-1px);
+  }
+
+  &:active {
+    transform: translateY(0);
+    box-shadow: 0 2px 8px rgba(135, 206, 250, 0.2),
+      inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
+  }
+}
+// 表格区域
+:deep(.el-table) {
+  .el-table__header {
+    th {
+      background-color: #f5f7fa;
+    }
+  }
+}
+
+// 分页区域
+:deep(.jh-pagination) {
+  margin-top: 16px;
+  justify-content: flex-end;
+}