@agile-team/wl-skills-kit 1.0.0

package/files/src/components/local/c_formSections/index.vue

@@ -0,0 +1,429 @@
+<!--
+ * @Author: ChenYu ycyplus@gmail.com
+ * @Date: 2026-01-01 13:30:00
+ * @LastEditors: ChenYu ycyplus@gmail.com
+ * @LastEditTime: 2026-01-01 16:30:00
+ * @FilePath: \cx-ui-sale\src\components\local\c_formSections\index.vue
+ * @Description: 表单区块组件 - 集成楼层导航、工具栏、布局切换等功能
+ * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.
+ -->
+<template>
+  <div class="c-form-sections-wrapper">
+    <!-- 顶部标题栏 -->
+    <div v-if="showHeader" class="c-form-header">
+      <span class="header-title">{{ headerTitle }}</span>
+      <div class="header-right">
+        <!-- 布局切换器 -->
+        <div v-if="showLayoutSwitch" class="layout-switcher">
+          <span
+            v-for="option in internalLayoutOptions"
+            :key="option.columns"
+            class="layout-icon"
+            :class="{ active: currentLayout === option.columns }"
+            :title="option.title"
+            @click="currentLayout = option.columns"
+          >
+            {{ option.icon }}
+          </span>
+        </div>
+        <el-divider
+          v-if="showLayoutSwitch && headerActions.length > 0"
+          direction="vertical"
+        />
+        <!-- 顶部操作按钮 -->
+        <template v-for="action in headerActions" :key="action.label">
+          <el-button
+            :type="action.type || ''"
+            size="small"
+            :disabled="action.disabled"
+            @click="action.onClick"
+          >
+            <el-icon v-if="action.icon">
+              <component :is="action.icon" />
+            </el-icon>
+            {{ action.label }}
+          </el-button>
+        </template>
+      </div>
+    </div>
+
+    <!-- 工具栏 -->
+    <div v-if="showToolbar" class="c-form-toolbar">
+      <div class="toolbar-left">
+        <!-- 必填字段过滤开关 -->
+        <span v-if="showRequiredFilter" class="required-toggle">
+          <span class="label">仅显示必填字段</span>
+          <el-switch v-model="showRequiredOnly" size="small" />
+        </span>
+        <!-- 工具栏左侧插槽 -->
+        <slot name="toolbar-left"></slot>
+      </div>
+      <div class="toolbar-right">
+        <!-- 工具栏右侧插槽 -->
+        <slot name="toolbar-right"></slot>
+      </div>
+    </div>
+
+    <!-- 主体内容区域 -->
+    <div class="c-form-content">
+      <!-- 左侧楼层导航 -->
+      <el-tabs
+        v-if="showNavTabs"
+        :tab-position="navTabsPosition"
+        v-model="activeNavTab"
+        @tab-click="handleNavTabClick"
+        class="nav-tabs"
+      >
+        <el-tab-pane
+          v-for="tab in navTabs"
+          :key="tab.name"
+          :label="tab.label"
+          :name="tab.name"
+        />
+      </el-tabs>
+
+      <!-- 表单区域 -->
+      <div class="form-container" ref="formContainerRef">
+        <el-form
+          :label-width="labelWidth"
+          :label-position="labelPosition"
+          :model="form"
+          :rules="rules"
+        >
+          <el-collapse v-model="activeNamesModel">
+            <!-- 循环渲染折叠面板 -->
+            <el-collapse-item
+              v-for="section in visibleSections"
+              :key="section.name"
+              :name="section.name"
+              :id="section.id"
+            >
+              <template #title>
+                <span class="section-title">{{ section.title }}</span>
+                <el-divider />
+              </template>
+
+              <!-- 特殊区块 - 使用具名插槽 -->
+              <slot
+                v-if="section.isSpecial"
+                :name="`special-${section.name}`"
+                :section="section"
+              >
+                <el-row :gutter="gutter">
+                  <el-col :span="24">
+                    <el-empty description="请通过插槽自定义特殊区块内容" />
+                  </el-col>
+                </el-row>
+              </slot>
+
+              <!-- 普通区块 - 循环渲染字段 -->
+              <el-row v-else :gutter="gutter">
+                <el-col
+                  v-for="field in section.fieldsConfig"
+                  :key="field.prop"
+                  :span="currentFieldSpan"
+                >
+                  <el-form-item
+                    :label="field.label"
+                    :prop="field.prop"
+                    :required="field.required"
+                  >
+                    <!-- 下拉选择框 -->
+                    <el-select
+                      v-if="field.type === 'select'"
+                      v-model="form[field.prop]"
+                      :placeholder="field.placeholder || '请选择'"
+                      :clearable="field.clearable !== false"
+                    >
+                      <el-option
+                        v-for="opt in field.options"
+                        :key="opt.value"
+                        :label="opt.label"
+                        :value="opt.value"
+                      />
+                    </el-select>
+
+                    <!-- 多行文本框 -->
+                    <el-input
+                      v-else-if="field.type === 'textarea'"
+                      v-model="form[field.prop]"
+                      type="textarea"
+                      :rows="field.rows || 3"
+                      :placeholder="field.placeholder || '请输入'"
+                    />
+
+                    <!-- 日期选择器 -->
+                    <el-date-picker
+                      v-else-if="field.type === 'date'"
+                      v-model="form[field.prop]"
+                      type="date"
+                      :placeholder="field.placeholder || '选择日期'"
+                      style="width: 100%"
+                    />
+
+                    <!-- 日期时间选择器 -->
+                    <el-date-picker
+                      v-else-if="field.type === 'datetime'"
+                      v-model="form[field.prop]"
+                      type="datetime"
+                      :placeholder="field.placeholder || '选择日期时间'"
+                      style="width: 100%"
+                    />
+
+                    <!-- 数字输入框 -->
+                    <el-input-number
+                      v-else-if="field.type === 'number'"
+                      v-model="form[field.prop]"
+                      :min="field.min"
+                      :max="field.max"
+                      :precision="field.precision"
+                      :step="field.step || 1"
+                      style="width: 100%"
+                    />
+
+                    <!-- 自定义字段 - 使用作用域插槽 -->
+                    <slot
+                      v-else-if="field.type === 'custom'"
+                      :name="`field-${field.prop}`"
+                      :field="field"
+                      :form="form"
+                    >
+                      <el-input
+                        v-model="form[field.prop]"
+                        :placeholder="field.placeholder || '请输入'"
+                      />
+                    </slot>
+
+                    <!-- 默认单行文本输入框 -->
+                    <el-input
+                      v-else
+                      v-model="form[field.prop]"
+                      :placeholder="field.placeholder || '请输入'"
+                    />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </el-collapse-item>
+          </el-collapse>
+        </el-form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import type {
+  SectionConfig,
+  FormDataType,
+  NavTabConfig,
+  HeaderAction,
+  LayoutOption
+} from "./data";
+
+/** 组件 Props */
+interface Props {
+  // ===== 基础配置 =====
+  /** 表单区块配置数组 */
+  sections: SectionConfig[];
+  /** 表单数据对象 */
+  form: FormDataType;
+  /** 激活的折叠面板 name 数组 */
+  activeNames?: string[];
+  /** 表单验证规则 */
+  rules?: any;
+  /** 表单标签宽度 */
+  labelWidth?: string;
+  /** 表单标签位置 */
+  labelPosition?: "left" | "right" | "top";
+  /** 栅格间距 */
+  gutter?: number;
+  /** 每个字段占据的栅格数（外部手动控制时使用，会覆盖内部布局切换） */
+  fieldSpan?: number;
+
+  // ===== 顶部标题栏配置 =====
+  /** 是否显示顶部标题栏 */
+  showHeader?: boolean;
+  /** 标题栏标题文本 */
+  headerTitle?: string;
+  /** 顶部操作按钮 */
+  headerActions?: HeaderAction[];
+
+  // ===== 工具栏配置 =====
+  /** 是否显示工具栏 */
+  showToolbar?: boolean;
+  /** 是否显示必填字段过滤开关 */
+  showRequiredFilter?: boolean;
+
+  // ===== 布局切换配置 =====
+  /** 是否显示布局切换器 */
+  showLayoutSwitch?: boolean;
+  /** 默认布局列数 */
+  defaultLayout?: 2 | 3 | 4 | 5;
+  /** 可选布局列数 */
+  layoutOptions?: Array<2 | 3 | 4 | 5>;
+
+  // ===== 楼层导航配置 =====
+  /** 是否显示楼层导航 */
+  showNavTabs?: boolean;
+  /** 楼层导航位置 */
+  navTabsPosition?: "left" | "right";
+  /** 楼层导航配置（不传则自动从 sections 生成） */
+  navTabs?: NavTabConfig[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  activeNames: () => [],
+  labelWidth: "100px",
+  labelPosition: "right",
+  gutter: 20,
+  fieldSpan: undefined,
+
+  showHeader: false,
+  headerTitle: "主档维护",
+  headerActions: () => [],
+
+  showToolbar: false,
+  showRequiredFilter: false,
+
+  showLayoutSwitch: false,
+  defaultLayout: 5,
+  layoutOptions: () => [2, 3, 4, 5],
+
+  showNavTabs: false,
+  navTabsPosition: "left",
+  navTabs: () => []
+});
+
+/** 组件 Emits */
+interface Emits {
+  (e: "update:activeNames", value: string[]): void;
+}
+
+const emit = defineEmits<Emits>();
+
+// ===== 内部状态 =====
+/** 仅显示必填字段开关 */
+const showRequiredOnly = ref(false);
+
+/** 当前布局列数 */
+const currentLayout = ref<2 | 3 | 4 | 5>(props.defaultLayout);
+
+/** 当前激活的导航标签 */
+const activeNavTab = ref("");
+
+/** 表单容器引用 */
+const formContainerRef = ref<HTMLElement | null>(null);
+
+// ===== 计算属性 =====
+/** 激活的折叠面板（v-model） */
+const activeNamesModel = computed({
+  get: () => props.activeNames,
+  set: (val) => emit("update:activeNames", val)
+});
+
+/**
+ * 🆕 内部布局选项配置
+ */
+const internalLayoutOptions = computed<LayoutOption[]>(() => {
+  return props.layoutOptions.map((col) => ({
+    columns: col,
+    icon: "|".repeat(col),
+    title: `${col}列布局`
+  }));
+});
+
+/**
+ * 🆕 当前字段 span 值
+ * 优先使用外部传入的 fieldSpan，否则根据内部布局计算
+ */
+const currentFieldSpan = computed(() => {
+  if (props.fieldSpan !== undefined) {
+    return props.fieldSpan;
+  }
+  return Math.floor(24 / currentLayout.value);
+});
+
+/**
+ * 🆕 过滤后的区块（根据必填字段过滤）
+ */
+const filteredSections = computed(() => {
+  if (!showRequiredOnly.value) {
+    return props.sections;
+  }
+
+  return props.sections.map((section) => {
+    if (section.isSpecial) {
+      return section;
+    }
+    return {
+      ...section,
+      fieldsConfig: section.fieldsConfig.filter((field) => field.required)
+    };
+  });
+});
+
+/**
+ * 过滤后的可见区块
+ * 根据 section.visible 函数和字段过滤结果判断是否显示
+ */
+const visibleSections = computed(() => {
+  return filteredSections.value.filter((section) => {
+    // 特殊区块：必填模式下隐藏
+    if (section.isSpecial) {
+      return !showRequiredOnly.value;
+    }
+    // 普通区块：有字段才显示
+    const hasFields = section.fieldsConfig.length > 0;
+    const visibleByFunc = section.visible ? section.visible() : true;
+    return hasFields && visibleByFunc;
+  });
+});
+
+/**
+ * 🆕 内部导航标签配置
+ * 如果外部传入则使用外部的，否则自动从 sections 生成
+ */
+const internalNavTabs = computed<NavTabConfig[]>(() => {
+  if (props.navTabs && props.navTabs.length > 0) {
+    return props.navTabs;
+  }
+  // 自动从 sections 生成
+  return props.sections.map((section) => ({
+    name: section.name,
+    label: section.title,
+    sectionName: section.name
+  }));
+});
+
+// ===== 方法 =====
+/** 处理楼层导航点击 */
+const handleNavTabClick = (tab: any) => {
+  const tabName = tab.paneName || tab.props?.name;
+  const tabConfig = internalNavTabs.value.find((t) => t.name === tabName);
+
+  if (!tabConfig?.sectionName) return;
+
+  // 展开对应的 collapse section
+  if (!activeNamesModel.value.includes(tabConfig.sectionName)) {
+    activeNamesModel.value = [...activeNamesModel.value, tabConfig.sectionName];
+  }
+
+  // 滚动到对应区域
+  setTimeout(() => {
+    const section = props.sections.find(
+      (s) => s.name === tabConfig.sectionName
+    );
+    if (section?.id) {
+      const sectionEl = document.getElementById(section.id);
+      if (sectionEl) {
+        sectionEl.scrollIntoView({ behavior: "smooth", block: "start" });
+      }
+    }
+  }, 150);
+};
+</script>
+
+<style scoped lang="scss">
+@import "./index.scss";
+</style>

package/files/src/components/local/c_listModal/data.ts

@@ -0,0 +1,41 @@
+import {
+  AbstractPageQueryHook,
+  BaseQueryItemDesc,
+  ActionButtonDesc,
+  TableColumnDesc
+} from "@/types/page";
+import { RequestMethod } from "@jhlc/types/src/request-type";
+
+export function createPage(
+  listApi: string,
+  constQueryParam: Record<string, any>,
+  queryItemsConfig: BaseQueryItemDesc<any>[],
+  columns: TableColumnDesc<any>[],
+  requestMethod: RequestMethod
+) {
+  let Page = new (class extends AbstractPageQueryHook {
+    constructor() {
+      super({
+        requestMethod: requestMethod,
+        url: {
+          list: listApi
+        },
+        constQueryParam: () => constQueryParam
+      });
+    }
+
+    queryDef(): BaseQueryItemDesc<any>[] {
+      return queryItemsConfig;
+    }
+
+    toolbarDef(): ActionButtonDesc[] {
+      return [];
+    }
+
+    columnsDef(): TableColumnDesc<any>[] {
+      return [{ type: "index", label: "序号", width: 60 }, ...columns];
+    }
+  })();
+
+  return Page.create() as any;
+}

package/files/src/components/local/c_listModal/index.vue

@@ -0,0 +1,136 @@
+<template>
+  <jh-dialog
+    v-model="visible"
+    :width="width"
+    :title="title"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <BaseQuery
+      :form="queryParam"
+      :items="queryItems"
+      :columns="queryColumns"
+      :label-width="queryLabelWidth"
+      @select="select"
+      @reset="resetQuery"
+    />
+
+    <BaseTable
+      ref="tableRef"
+      :data="list"
+      :columns="columns"
+      showToolbar
+      highlightCurrentRow
+      currentRowSelectMethod="click"
+      @row-dblclick="handleRowDblclick"
+    />
+
+    <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"
+    />
+    <template #footer v-if="showFooterButtons">
+      <div class="dialog-footer">
+        <BaseToolbar :items="cancelConfirmButtons(close, confirm)" />
+      </div>
+    </template>
+  </jh-dialog>
+</template>
+
+<script setup lang="ts">
+import { TableColumnDesc, BaseQueryItemDesc } from "@/types/page";
+import { cancelConfirmButtons } from "@jhlc/common-core/src/components/toolbar/toolbar-data";
+import { RequestMethod } from "@jhlc/types/src/request-type";
+import { createPage } from "./data";
+
+interface Props {
+  width?: string;
+  title?: string;
+  queryColumns?: number;
+  queryLabelWidth?: string;
+  queryItems?: BaseQueryItemDesc[];
+  tableColumns?: TableColumnDesc[];
+  apiPath?: string;
+  requestMethod?: RequestMethod;
+  showFooterButtons?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  width: "1200px",
+  title: "",
+  queryColumns: 4,
+  queryLabelWidth: "100px",
+  queryItems: () => [],
+  tableColumns: () => [],
+  apiPath: "",
+  requestMethod: RequestMethod.get,
+  showFooterButtons: true
+});
+
+const emits = defineEmits(["ok"]);
+
+// 弹窗显示状态
+const visible = ref(false);
+// 固定的查询参数
+const constQueryParam = ref<Record<string, any>>({});
+
+const Page = createPage(
+  props.apiPath,
+  constQueryParam.value,
+  props.queryItems,
+  props.tableColumns,
+  props.requestMethod
+);
+
+const {
+  tableRef: tableRef,
+  page: page,
+  list: list,
+  queryParam: queryParam,
+  queryItems: queryItems,
+  columns: columns,
+  select: select,
+  resetQuery: resetQuery
+} = Page;
+
+// 确定函数
+const confirm = () => {
+  const selectedRows = tableRef.value?.getSelection();
+  emits("ok", selectedRows);
+  close();
+};
+
+// 双击行函数
+const handleRowDblclick = (row: any) => {
+  if (!props.showFooterButtons) return;
+  emits("ok", row);
+  close();
+};
+
+// 打开弹窗
+const open = (params: Record<string, any>) => {
+  if (params) {
+    Object.assign(constQueryParam.value, params);
+  }
+  resetQuery();
+  visible.value = true;
+};
+
+// 关闭弹窗
+const close = () => {
+  visible.value = false;
+  list.value = [];
+};
+
+// 暴露方法
+defineExpose({
+  open,
+  close
+});
+</script>
+
+<style scoped lang="scss"></style>

package/files/src/components/local/c_spliterTitle/index.scss

@@ -0,0 +1,25 @@
+.spliter-title {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  background: white;
+  padding: 8px 0;
+
+  .title-bar {
+    width: 4px;
+    height: 20px;
+    background: var(--el-color-primary);
+    margin-right: 8px;
+    flex-shrink: 0;
+  }
+
+  .title-text {
+    line-height: 20px;
+    flex-shrink: 0;
+    margin-right: 8px;
+  }
+
+  .el-divider--horizontal {
+    margin: 18px 0;
+  }
+}

package/files/src/components/local/c_spliterTitle/index.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="spliter-title">
+    <div class="title-bar"></div>
+    <span class="title-text">{{ title }}</span>
+    <el-divider  />
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  title: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  title: ""
+});
+</script>
+
+<style scoped lang="scss">
+@import "./index.scss";
+</style>