@agile-team/wl-skills-kit 1.0.0

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

@@ -0,0 +1,77 @@
+<!--
+ * @Author: ChenYu ycyplus@gmail.com
+ * @Date: 2025-12-31 11:03:17
+ * @LastEditors: ChenYu ycyplus@gmail.com
+ * @LastEditTime: 2026-01-01 22:21:41
+ * @FilePath: \cx-ui-sale\src\views\sale\demo\domestic-trade-order\index.vue
+ * @Description: 内贸订单 - 视图层（内贸订单列表的查询、新增、编辑、删除）
+ * Copyright (c) 2025 by CHENY, All Rights Reserved 😎.
+ -->
+<template>
+  <div class="app-container app-page-container">
+    <!-- 搜索栏 -->
+    <BaseQuery
+      :form="queryParam"
+      :items="queryItems"
+      :columns="5"
+      :auto-select="false"
+      @select="select"
+      @reset="select"
+    />
+    <!-- 工具栏 -->
+    <BaseToolbar :items="toolbars" :rightItems="rightToolbars" />
+    <!-- 表格 -->
+    <BaseTable
+      ref="tableRef"
+      :data="list"
+      :columns="columns"
+      :render-type="renderType"
+      showToolbar
+    />
+    <!-- 分页 -->
+    <jh-pagination
+      v-show="page.total && page.total > 0"
+      :total="page.total || 0"
+      v-model:currentPage="page.current"
+      v-model:pageSize="page.size"
+      @current-change="select"
+      @size-change="select"
+    />
+  </div>
+  <!-- 表单弹窗 -->
+  <c_formModal ref="modalRef" v-bind="modalConfig" @ok="select" />
+</template>
+
+<script setup lang="ts">
+import c_formModal from "@/components/local/c_formModal/index.vue";
+import { createPage, renderType, modalConfig } from "./data";
+
+// 弹窗引用
+const modalRef = ref<InstanceType<typeof c_formModal>>();
+
+// 创建页面Hook实例
+const Page = createPage(modalRef);
+
+// 解构使用
+const { page, queryParam, list, queryItems, toolbars, columns, select } = Page;
+
+// TODO: 右侧工具栏 - 临时用于切换表格类型演示，未来需删除除）
+const rightToolbars = [
+  {
+    label: "切换表格",
+    classnames: ["glass-button"],
+    onClick: () => {
+      renderType.value = renderType.value === "dataTable" ? "agGrid" : "dataTable";
+    }
+  }
+];
+
+// 初始化
+onMounted(() => {
+  select();
+});
+</script>
+
+<style scoped lang="scss">
+@import "./index.scss";
+</style>

package/files/demo/sale/demo/heat-batch-return/data.ts

@@ -0,0 +1,367 @@
+/*
+ * @Author: ChenYu ycyplus@gmail.com
+ * @Date: 2025-06-13 18:38:58
+ * @LastEditors: ChenYu ycyplus@gmail.com
+ * @LastEditTime: 2026-01-04 08:52:20
+ * @FilePath: \cx-ui-sale\src\views\sale\demo\heat-batch-return\data.ts
+ * @Description: 炉次返送 - 数据逻辑层
+ * Copyright (c) 2025 by CHENY, All Rights Reserved 😎.
+ */
+import { ref, reactive, h } from "vue";
+import { TableColumnDesc } from "@jhlc/common-core/src/components/table/base-table/type";
+import { ActionButtonDesc } from "@jhlc/common-core/src/components/toolbar/type";
+import type { BaseFormItemDesc } from "@jhlc/common-core/src/components/form/common/type";
+import axios from "axios";
+import { ElMessage } from "element-plus";
+
+// 计划炉号点击处理函数
+function handlePlanFurnaceNoClick(row: any) {
+  ElMessage.info(`查看计划炉号: ${row.plannedFurnaceNumber} 的详细信息`);
+  // 这里可以添加跳转到计划炉号详情页面或打开详情弹窗的逻辑
+}
+
+/**
+ * 表格列配置 - 待返送
+ */
+export const pendingColumnsConfig: TableColumnDesc<any>[] = [
+  { type: "selection", width: 55 },
+  {
+    label: "计划炉号",
+    name: "plannedFurnaceNumber",
+    defaultSlot: ({ row }: any) => {
+      return h(
+        "span",
+        {
+          style: "color: #409eff; cursor: pointer; text-decoration: underline;",
+          onClick: () => handlePlanFurnaceNoClick(row)
+        },
+        row.plannedFurnaceNumber
+      );
+    }
+  },
+  { label: "计划顺序号", name: "plannedSequenceNumber", width: 120 },
+  { label: "熔炼号", name: "smeltingNumber", width: 150 },
+  { label: "内部钢种", name: "internalSteelGrade", width: 120 },
+  { label: "铸机号", name: "castingMachineNumber", width: 120 }
+];
+
+/**
+ * 表格列配置 - 已返送
+ */
+export const returnedColumnsConfig: TableColumnDesc<any>[] = [
+  { type: "selection", width: 55 },
+  {
+    label: "计划炉号",
+    name: "plannedFurnaceNumber",
+    defaultSlot: ({ row }: any) => {
+      return h(
+        "span",
+        {
+          style: "color: #409eff; cursor: pointer; text-decoration: underline;",
+          onClick: () => handlePlanFurnaceNoClick(row)
+        },
+        row.plannedFurnaceNumber
+      );
+    }
+  },
+  { label: "计划顺序号", name: "plannedSequenceNumber", width: 120 },
+  { label: "熔炼号", name: "smeltingNumber", width: 150 },
+  { label: "内部钢种", name: "internalSteelGrade", width: 120 },
+  { label: "铸机号", name: "castingMachineNumber", width: 120 }
+];
+
+/**
+ * Loading状态
+ */
+export const pendingLoading = ref(false);
+export const returnedLoading = ref(false);
+
+/**
+ * 待返送数据
+ */
+export const pendingData = reactive({
+  list: [] as any[],
+  total: 0
+});
+
+/**
+ * 已返送数据
+ */
+export const returnedData = reactive({
+  list: [] as any[],
+  total: 0
+});
+
+/**
+ * 待返送分页
+ */
+export const pendingPagination = reactive({
+  page: 1,
+  pageSize: 15
+});
+
+/**
+ * 已返送分页
+ */
+export const returnedPagination = reactive({
+  page: 1,
+  pageSize: 15
+});
+
+/**
+ * 选中的行
+ */
+export const pendingSelectedRows = ref<any[]>([]);
+export const returnedSelectedRows = ref<any[]>([]);
+
+/**
+ * API 配置 - 统一管理所有接口地址
+ */
+export const API_CONFIG = {
+  list: "/api/furnace-batch/list",
+  save: "/api/furnace-batch/save",
+  update: "/api/furnace-batch/update",
+  getById: "/api/furnace-batch/getOneById"
+} as const;
+
+/**
+ * 获取待返送数据
+ */
+export const fetchPendingData = async () => {
+  pendingLoading.value = true;
+
+  try {
+    const params = {
+      page: pendingPagination.page,
+      pageSize: pendingPagination.pageSize,
+      type: "pending"
+    };
+
+    const response = await axios.get(API_CONFIG.list, { params });
+
+    if (response.data.code === 200) {
+      pendingData.list = response.data.data.list;
+      pendingData.total = response.data.data.total;
+    } else {
+      ElMessage.error(response.data.message || "获取数据失败");
+    }
+  } catch (error) {
+    console.error("获取待返送数据失败:", error);
+    ElMessage.error("获取数据失败");
+  } finally {
+    pendingLoading.value = false;
+  }
+};
+
+/**
+ * 获取已返送数据
+ */
+export const fetchReturnedData = async () => {
+  returnedLoading.value = true;
+
+  try {
+    const params = {
+      page: returnedPagination.page,
+      pageSize: returnedPagination.pageSize,
+      type: "returned"
+    };
+
+    const response = await axios.get(API_CONFIG.list, { params });
+
+    if (response.data.code === 200) {
+      returnedData.list = response.data.data.list;
+      returnedData.total = response.data.data.total;
+    } else {
+      ElMessage.error(response.data.message || "获取数据失败");
+    }
+  } catch (error) {
+    console.error("获取已返送数据失败:", error);
+    ElMessage.error("获取数据失败");
+  } finally {
+    returnedLoading.value = false;
+  }
+};
+
+/**
+ * 待返送分页变化
+ */
+export const handlePendingPageChange = (page: number) => {
+  pendingPagination.page = page;
+  fetchPendingData();
+};
+
+export const handlePendingSizeChange = (size: number) => {
+  pendingPagination.pageSize = size;
+  pendingPagination.page = 1;
+  fetchPendingData();
+};
+
+/**
+ * 已返送分页变化
+ */
+export const handleReturnedPageChange = (page: number) => {
+  returnedPagination.page = page;
+  fetchReturnedData();
+};
+
+export const handleReturnedSizeChange = (size: number) => {
+  returnedPagination.pageSize = size;
+  returnedPagination.page = 1;
+  fetchReturnedData();
+};
+
+/**
+ * 选择变化
+ */
+export const handlePendingSelectionChange = (selection: any[]) => {
+  pendingSelectedRows.value = selection;
+};
+
+export const handleReturnedSelectionChange = (selection: any[]) => {
+  returnedSelectedRows.value = selection;
+};
+
+/**
+ * 查询
+ */
+export const handleQuery = () => {
+  pendingPagination.page = 1;
+  returnedPagination.page = 1;
+  fetchPendingData();
+  fetchReturnedData();
+};
+
+/**
+ * 新增返送炉次弹窗配置
+ */
+export const modalConfig = {
+  titlePrefix: "返送炉次",
+  width: "60%",
+  columns: 4,
+  labelWidth: "90px",
+  formItems: [
+    {
+      name: "ponoNumber",
+      label: "PONO号",
+      placeholder: "请输入"
+    },
+    {
+      name: "continuousCasterNumber",
+      label: "连铸机号",
+      required: true,
+      placeholder: "请选择",
+      customProps: () => ({
+        clearable: true,
+        options: [
+          { label: "1", value: "1" },
+          { label: "2", value: "2" },
+          { label: "3", value: "3" }
+        ]
+      })
+    },
+    {
+      name: "internalSteelGrade",
+      label: "内部钢种",
+      required: true,
+      placeholder: "请输入"
+    },
+    {
+      name: "castSlabType",
+      label: "铸坯类型",
+      required: true,
+      placeholder: "请选择",
+      customProps: () => ({
+        clearable: true,
+        options: [
+          { label: "类型1", value: "type1" },
+          { label: "类型2", value: "type2" },
+          { label: "类型3", value: "type3" }
+        ]
+      })
+    },
+    {
+      name: "slabCount",
+      label: "坯数",
+      required: true,
+      placeholder: "请输入",
+      rules: [
+        { required: true, message: "请输入坯数", trigger: "blur" },
+        { pattern: /^\d+$/, message: "坯数必须为数字", trigger: "blur" }
+      ]
+    },
+    {
+      name: "thickness",
+      label: "厚度",
+      required: true,
+      placeholder: "请输入",
+      rules: [
+        { required: true, message: "请输入厚度", trigger: "blur" },
+        { pattern: /^\d+(\.\d+)?$/, message: "厚度必须为数字", trigger: "blur" }
+      ]
+    },
+    {
+      name: "width",
+      label: "宽度",
+      required: true,
+      placeholder: "请输入",
+      rules: [
+        { required: true, message: "请输入宽度", trigger: "blur" },
+        { pattern: /^\d+(\.\d+)?$/, message: "宽度必须为数字", trigger: "blur" }
+      ]
+    },
+    {
+      name: "length",
+      label: "长度",
+      required: true,
+      placeholder: "请输入",
+      rules: [
+        { required: true, message: "请输入长度", trigger: "blur" },
+        { pattern: /^\d+(\.\d+)?$/, message: "长度必须为数字", trigger: "blur" }
+      ]
+    },
+    {
+      name: "lengthUpperLimit",
+      label: "长度上限",
+      required: true,
+      placeholder: "请输入",
+      rules: [
+        { required: true, message: "请输入长度上限", trigger: "blur" },
+        {
+          pattern: /^\d+(\.\d+)?$/,
+          message: "长度上限必须为数字",
+          trigger: "blur"
+        }
+      ]
+    },
+    {
+      name: "widthUpperLimit",
+      label: "宽度上限",
+      required: true,
+      placeholder: "请输入",
+      rules: [
+        { required: true, message: "请输入宽度上限", trigger: "blur" },
+        {
+          pattern: /^\d+(\.\d+)?$/,
+          message: "宽度上限必须为数字",
+          trigger: "blur"
+        }
+      ]
+    }
+  ] as BaseFormItemDesc<any>[],
+  api: {
+    getById: API_CONFIG.getById,
+    save: API_CONFIG.save,
+    update: API_CONFIG.update
+  }
+};
+
+/**
+ * 工具栏配置生成
+ */
+export const getToolbarConfig = (callbacks: {
+  onReturn: () => void;
+  onQuery: () => void;
+}): ActionButtonDesc[] => [
+  { label: "炉次返送", type: "primary", onClick: callbacks.onReturn },
+  { label: "查询", type: "primary", onClick: callbacks.onQuery }
+];

package/files/demo/sale/demo/heat-batch-return/index.scss

@@ -0,0 +1,100 @@
+/**
+ * 炉次返送 - 样式层
+ */
+
+.furnace-batch-page-container {
+  width: 100%;
+  height: calc(100% - 16px);
+  padding: 8px;
+  background-color: #f5f5f5;
+}
+
+.furnace-batch-page {
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+}
+
+// 工具栏容器
+.toolbar-container {
+  flex-shrink: 0;
+  padding: 16px 16px 0 16px;
+  margin-bottom: 16px;
+}
+
+.page-container {
+  display: flex;
+  gap: 6px;
+  flex: 1;
+  overflow: hidden;
+}
+
+// 左右区块通用样式
+.section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background-color: #fff;
+  position: relative;
+  padding: 0 16px 16px 16px;
+  overflow: hidden;
+
+  &.left-section {
+    padding-right: 8px;
+  }
+
+  &.right-section {
+    padding-left: 8px;
+  }
+}
+
+// 表格容器
+.table-box {
+  flex: 1;
+  overflow: hidden;
+}
+
+// 区块标题
+.section-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px;
+  height: 24px;
+  background: rgba(67, 104, 255, 0.1);
+
+  .title-bar {
+    width: 4px;
+    height: 80%;
+    background-color: #4368FF;
+    margin-right: 6px;
+    margin-left: 8px;
+  }
+
+  .section-title {
+    margin: 0;
+    font-size: 14px;
+    font-weight: 500;
+    color: #000000;
+  }
+}
+
+// 分页容器
+.pagination-container {
+  margin-top: 16px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .pagination-info {
+    font-size: 14px;
+    color: #666;
+  }
+}
+
+// 分页样式调整
+:deep(.el-pagination) {
+  position: sticky;
+}

package/files/demo/sale/demo/heat-batch-return/index.vue

@@ -0,0 +1,170 @@
+<!--
+ * @Author: ChenYu ycyplus@gmail.com
+ * @Date: 2025-06-13 18:38:58
+ * @LastEditors: ChenYu ycyplus@gmail.com
+ * @LastEditTime: 2026-01-04 08:29:26
+ * @FilePath: \cx-ui-sale\src\views\sale\demo\heat-batch-return\index.vue
+ * @Description: 炉次返送 - 视图层（待炉次返送与已炉次返送数据管理）
+ * Copyright (c) 2025 by CHENY, All Rights Reserved 😎.
+ -->
+<template>
+  <div class="furnace-batch-page-container">
+    <div class="furnace-batch-page">
+      <!-- 工具栏单独占一行 -->
+      <div class="toolbar-container">
+        <BaseToolbar :items="pendingToolbarItems" />
+      </div>
+
+      <!-- 表格内容区域 -->
+      <div class="page-container">
+        <!-- 左侧：待炉次返送 -->
+        <div class="section left-section">
+          <!-- 标题 -->
+          <div class="section-header">
+            <div class="title-bar"></div>
+            <h2 class="section-title">待炉次返送</h2>
+          </div>
+
+          <!-- 表格 -->
+          <div class="table-box">
+            <BaseTable
+              :data="pendingData.list"
+              :columns="pendingColumnsConfig"
+              :loading="pendingLoading"
+              border
+              stripe
+              size="small"
+              height="100%"
+              @selection-change="handlePendingSelectionChange"
+            />
+          </div>
+
+          <!-- 分页 -->
+          <div class="pagination-container">
+            <div class="pagination-info">共{{ pendingData.total }}条</div>
+            <jh-pagination
+              v-model:currentPage="pendingPagination.page"
+              v-model:pageSize="pendingPagination.pageSize"
+              :total="pendingData.total"
+              :page-sizes="[15, 30, 50, 100]"
+              layout="prev, pager, next, sizes, jumper"
+              size="small"
+              @current-change="handlePendingPageChange"
+              @size-change="handlePendingSizeChange"
+            />
+          </div>
+        </div>
+
+        <!-- 右侧：已炉次返送 -->
+        <div class="section right-section">
+          <!-- 标题 -->
+          <div class="section-header">
+            <div class="title-bar"></div>
+            <h2 class="section-title">已炉次返送</h2>
+          </div>
+
+          <!-- 表格 -->
+          <div class="table-box">
+            <BaseTable
+              :data="returnedData.list"
+              :columns="returnedColumnsConfig"
+              :loading="returnedLoading"
+              border
+              stripe
+              size="small"
+              height="100%"
+              @selection-change="handleReturnedSelectionChange"
+            />
+          </div>
+
+          <!-- 分页 -->
+          <div class="pagination-container">
+            <div class="pagination-info">共{{ returnedData.total }}条</div>
+            <jh-pagination
+              v-model:currentPage="returnedPagination.page"
+              v-model:pageSize="returnedPagination.pageSize"
+              :total="returnedData.total"
+              :page-sizes="[15, 30, 50, 100]"
+              layout="prev, pager, next, sizes, jumper"
+              size="small"
+              @current-change="handleReturnedPageChange"
+              @size-change="handleReturnedSizeChange"
+            />
+          </div>
+        </div>
+      </div>
+    </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="handleModalOk"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from "vue";
+import c_formModal from "@/components/local/c_formModal/index.vue";
+import {
+  pendingColumnsConfig,
+  returnedColumnsConfig,
+  pendingLoading,
+  returnedLoading,
+  pendingData,
+  returnedData,
+  pendingPagination,
+  returnedPagination,
+  fetchPendingData,
+  fetchReturnedData,
+  handlePendingPageChange,
+  handlePendingSizeChange,
+  handleReturnedPageChange,
+  handleReturnedSizeChange,
+  handlePendingSelectionChange,
+  handleReturnedSelectionChange,
+  handleQuery,
+  getToolbarConfig,
+  modalConfig
+} from "./data";
+import "./index.scss";
+
+// 弹窗引用
+const modalRef = ref<InstanceType<typeof c_formModal>>();
+
+// 待返送工具栏配置
+const pendingToolbarItems = computed(() =>
+  getToolbarConfig({
+    onReturn: () => modalRef.value?.open(),
+    onQuery: handleQuery
+  })
+);
+
+// 弹窗操作成功回调
+const handleModalOk = () => {
+  fetchPendingData();
+  fetchReturnedData();
+};
+
+// 初始化数据
+onMounted(() => {
+  fetchPendingData();
+  fetchReturnedData();
+});
+</script>
+
+<style scoped lang="scss">
+@import "./index.scss";
+
+.input-suffix {
+  color: #909399;
+  font-size: 12px;
+  padding-right: 0px;
+}
+</style>