@agile-team/wl-skills-kit 2.11.1 → 2.11.3

package/files/.wl-skills/src/components/local/c_formModal/data.ts

@@ -1,95 +1,95 @@
-/*
- * @Author: ChenYu ycyplus@gmail.com
- * @Date: 2026-01-01 13:30:00
- * @LastEditors: ChenYu ycyplus@gmail.com
- * @LastEditTime: 2026-01-04 08:18:10
- * @FilePath: \cx-ui-sale\src\components\local\c_formModal\data.ts
- * @Description: 表单弹窗组件 - 数据逻辑层
- * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.
- */
-
-import type { Ref } from "vue";
-import { AbstractFormHook } from "@jhlc/common-core/src/page-hooks/form-hook";
-import type { BaseFormItemDesc } from "@jhlc/common-core/src/components/form/common/type";
-import request from "@jhlc/common-core/src/util/request";
-
-export interface ModalApi {
-  getById: string;
-  save: string;
-  update: string;
-}
-
-export type ModalMode = "add" | "edit" | "view";
-
-/**
- * 创建表单弹窗 Hook
- * @param props - 组件 Props
- * @param mode - 当前模式
- * @param emit - 事件触发器
- */
-export function createFormModal(
-  props: {
-    formItems: BaseFormItemDesc<any>[];
-    api: ModalApi;
-    titlePrefix?: string;
-  },
-  mode: Ref<ModalMode>,
-  emit: (event: "ok") => void
-) {
-  const Page = new (class extends AbstractFormHook {
-    constructor() {
-      super({});
-    }
-
-    formItemsDefine(): BaseFormItemDesc<any>[] {
-      return props.formItems;
-    }
-
-    async save() {
-      // 表单验证
-      const valid = await new Promise<boolean>((resolve) => {
-        this.validate((isValid) => resolve(isValid));
-      });
-
-      if (!valid) return;
-
-      // 根据模式调用不同 API
-      const res = await request({
-        url: mode.value === "add" ? props.api.save : props.api.update,
-        method: mode.value === "add" ? "post" : "put",
-        data: this.form.value
-      });
-
-      // 成功提示并关闭
-      this.msgSuccess(res.message || "操作成功");
-      this.visible.value = false;
-      emit("ok");
-
-      return res;
-    }
-
-    async getById(id: string) {
-      const data = await request({
-        url: props.api.getById,
-        method: "get",
-        params: { id }
-      });
-      this.form.value = data.data;
-      return data;
-    }
-  })();
-
-  return Page.create();
-}
-
-/**
- * 计算弹窗标题
- */
-export function computeTitle(mode: ModalMode, titlePrefix: string): string {
-  const prefixMap = {
-    add: "新增",
-    edit: "编辑",
-    view: "查看"
-  };
-  return `${prefixMap[mode]}${titlePrefix}`;
-}
+/*
+ * @Author: ChenYu ycyplus@gmail.com
+ * @Date: 2026-01-01 13:30:00
+ * @LastEditors: ChenYu ycyplus@gmail.com
+ * @LastEditTime: 2026-01-04 08:18:10
+ * @FilePath: \cx-ui-sale\src\components\local\c_formModal\data.ts
+ * @Description: 表单弹窗组件 - 数据逻辑层
+ * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.
+ */
+
+import type { Ref } from "vue";
+import { AbstractFormHook } from "@jhlc/common-core/src/page-hooks/form-hook";
+import type { BaseFormItemDesc } from "@jhlc/common-core/src/components/form/common/type";
+import request from "@jhlc/common-core/src/util/request";
+
+export interface ModalApi {
+  getById: string;
+  save: string;
+  update: string;
+}
+
+export type ModalMode = "add" | "edit" | "view";
+
+/**
+ * 创建表单弹窗 Hook
+ * @param props - 组件 Props
+ * @param mode - 当前模式
+ * @param emit - 事件触发器
+ */
+export function createFormModal(
+  props: {
+    formItems: BaseFormItemDesc<any>[];
+    api: ModalApi;
+    titlePrefix?: string;
+  },
+  mode: Ref<ModalMode>,
+  emit: (event: "ok") => void
+) {
+  const Page = new (class extends AbstractFormHook {
+    constructor() {
+      super({});
+    }
+
+    formItemsDefine(): BaseFormItemDesc<any>[] {
+      return props.formItems;
+    }
+
+    async save() {
+      // 表单验证
+      const valid = await new Promise<boolean>((resolve) => {
+        this.validate((isValid) => resolve(isValid));
+      });
+
+      if (!valid) return;
+
+      // 根据模式调用不同 API
+      const res = await request({
+        url: mode.value === "add" ? props.api.save : props.api.update,
+        method: mode.value === "add" ? "post" : "put",
+        data: this.form.value
+      });
+
+      // 成功提示并关闭
+      this.msgSuccess(res.message || "操作成功");
+      this.visible.value = false;
+      emit("ok");
+
+      return res;
+    }
+
+    async getById(id: string) {
+      const data = await request({
+        url: props.api.getById,
+        method: "get",
+        params: { id }
+      });
+      this.form.value = data.data;
+      return data;
+    }
+  })();
+
+  return Page.create();
+}
+
+/**
+ * 计算弹窗标题
+ */
+export function computeTitle(mode: ModalMode, titlePrefix: string): string {
+  const prefixMap = {
+    add: "新增",
+    edit: "编辑",
+    view: "查看"
+  };
+  return `${prefixMap[mode]}${titlePrefix}`;
+}

package/files/.wl-skills/src/components/local/c_formModal/index.scss

@@ -1,8 +1,8 @@
-/**
- * @Description: c_formModal 样式
- */
-
-.dialog-footer {
-  display: flex;
-  justify-content: flex-end;
-}
+/**
+ * @Description: c_formModal 样式
+ */
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+}

package/files/.wl-skills/src/components/local/c_formModal/index.vue

@@ -1,107 +1,107 @@
-<!--
- * @Author: ChenYu ycyplus@gmail.com
- * @Date: 2026-01-01 13:30:00
- * @LastEditors: ChenYu ycyplus@gmail.com
- * @LastEditTime: 2026-01-04 09:17:43
- * @FilePath: \cx-ui-sale\src\components\local\c_formModal\index.vue
- * @Description: 表单弹窗组件 （新增、编辑、详情）
- * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.
- -->
-<template>
-  <jh-dialog v-model="visible" :width="width" :title="currentTitle">
-    <BaseForm
-      ref="formRef"
-      :form="form"
-      :items="formItems"
-      :columns="columns"
-      :label-width="labelWidth"
-      :disabled="mode === 'view'"
-    />
-    <template #footer>
-      <div class="dialog-footer">
-        <BaseToolbar
-          v-if="mode !== 'view'"
-          :items="cancelConfirmButtons(() => (visible = false), save)"
-        />
-        <BaseToolbar
-          v-else
-          :items="[{ label: '关闭', onClick: () => (visible = false) }]"
-        />
-      </div>
-    </template>
-  </jh-dialog>
-</template>
-
-<script setup lang="ts">
-import type { BaseFormItemDesc } from "@jhlc/common-core/src/components/form/common/type";
-import { cancelConfirmButtons } from "@jhlc/common-core/src/components/toolbar/toolbar-data";
-import {
-  createFormModal,
-  computeTitle,
-  type ModalApi,
-  type ModalMode
-} from "./data";
-
-interface Props {
-  formItems: BaseFormItemDesc<any>[];
-  api: ModalApi;
-  width?: string;
-  columns?: number;
-  labelWidth?: string;
-  titlePrefix?: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  width: "850px",
-  columns: 2,
-  labelWidth: "110px",
-  titlePrefix: "数据"
-});
-
-const emit = defineEmits(["ok"]);
-
-// 当前模式
-const mode = ref<ModalMode>("add");
-
-// 创建页面Hook实例
-const Page = createFormModal(props, mode, emit);
-
-// 解构使用
-const { visible, formRef, form, formItems, save, reset } = Page;
-
-// 计算标题
-const currentTitle = computed(() =>
-  computeTitle(mode.value, props.titlePrefix)
-);
-
-defineExpose({
-  /** 打开新增弹窗 */
-  open(formData?: Record<string, any>) {
-    console.log("🚀 ~ file: index.vue:80 ~ open ~ formData:", formData);
-    mode.value = "add";
-    reset();
-    if (formData) {
-      form.value = {
-        ...formData
-      };
-    }
-    visible.value = true;
-  },
-  /** 打开编辑弹窗 */
-  async edit(id: string) {
-    mode.value = "edit";
-    visible.value = true;
-    await Page.getById(id);
-  },
-  /** 打开详情弹窗（只读） */
-  async view(id: string) {
-    mode.value = "view";
-    visible.value = true;
-    await Page.getById(id);
-  }
-});
-</script>
-
-<style scoped lang="scss">
-@import "./index.scss";
-</style>
+<!--
+ * @Author: ChenYu ycyplus@gmail.com
+ * @Date: 2026-01-01 13:30:00
+ * @LastEditors: ChenYu ycyplus@gmail.com
+ * @LastEditTime: 2026-01-04 09:17:43
+ * @FilePath: \cx-ui-sale\src\components\local\c_formModal\index.vue
+ * @Description: 表单弹窗组件 （新增、编辑、详情）
+ * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.
+ -->
+<template>
+  <jh-dialog v-model="visible" :width="width" :title="currentTitle">
+    <BaseForm
+      ref="formRef"
+      :form="form"
+      :items="formItems"
+      :columns="columns"
+      :label-width="labelWidth"
+      :disabled="mode === 'view'"
+    />
+    <template #footer>
+      <div class="dialog-footer">
+        <BaseToolbar
+          v-if="mode !== 'view'"
+          :items="cancelConfirmButtons(() => (visible = false), save)"
+        />
+        <BaseToolbar
+          v-else
+          :items="[{ label: '关闭', onClick: () => (visible = false) }]"
+        />
+      </div>
+    </template>
+  </jh-dialog>
+</template>
+
+<script setup lang="ts">
+import type { BaseFormItemDesc } from "@jhlc/common-core/src/components/form/common/type";
+import { cancelConfirmButtons } from "@jhlc/common-core/src/components/toolbar/toolbar-data";
+import {
+  createFormModal,
+  computeTitle,
+  type ModalApi,
+  type ModalMode
+} from "./data";
+
+interface Props {
+  formItems: BaseFormItemDesc<any>[];
+  api: ModalApi;
+  width?: string;
+  columns?: number;
+  labelWidth?: string;
+  titlePrefix?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  width: "850px",
+  columns: 2,
+  labelWidth: "110px",
+  titlePrefix: "数据"
+});
+
+const emit = defineEmits(["ok"]);
+
+// 当前模式
+const mode = ref<ModalMode>("add");
+
+// 创建页面Hook实例
+const Page = createFormModal(props, mode, emit);
+
+// 解构使用
+const { visible, formRef, form, formItems, save, reset } = Page;
+
+// 计算标题
+const currentTitle = computed(() =>
+  computeTitle(mode.value, props.titlePrefix)
+);
+
+defineExpose({
+  /** 打开新增弹窗 */
+  open(formData?: Record<string, any>) {
+    console.log("🚀 ~ file: index.vue:80 ~ open ~ formData:", formData);
+    mode.value = "add";
+    reset();
+    if (formData) {
+      form.value = {
+        ...formData
+      };
+    }
+    visible.value = true;
+  },
+  /** 打开编辑弹窗 */
+  async edit(id: string) {
+    mode.value = "edit";
+    visible.value = true;
+    await Page.getById(id);
+  },
+  /** 打开详情弹窗（只读） */
+  async view(id: string) {
+    mode.value = "view";
+    visible.value = true;
+    await Page.getById(id);
+  }
+});
+</script>
+
+<style scoped lang="scss">
+@import "./index.scss";
+</style>