Skip to content

E
EMS
提交 b54b8144 authored 作者: hejie's avatar hejie
浏览文件
操作

ci: 🎡 修改plop配置

上级 e4de6f27
隐藏空白字符变更
内嵌 并排
正在显示 包含 46 行增加 和 242 行删除
plop-templates/plopfile.cjs
浏览文件 @ b54b8144
......@@ -98,31 +98,31 @@ module.exports = function (plop) {
title: data.pageTitle
}
});
// actions.push({
// type: "add",
// path: `../src/views/{{lowerCase name}}//hooks.ts`,
// templateFile: "./view/hooks.hbs"
// });
actions.push({
type: "add",
path: `../src/views/{{lowerCase name}}//hooks.ts`,
templateFile: "./view/hooks.hbs"
path: `../src/views/{{lowerCase name}}/components/form.vue`,
templateFile: "./view/components/form.hbs"
});
actions.push({
type: "add",
path: `../src/views/{{lowerCase name}}/form.vue`,
templateFile: "./view/form.hbs"
});
actions.push({
type: "add",
path: `../src/views/{{lowerCase name}}/utils//hook.tsx`,
templateFile: "./view/utils/hook.hbs"
});
actions.push({
type: "add",
path: `../src/views/{{lowerCase name}}/utils//rule.ts`,
templateFile: "./view/utils/rule.hbs"
});
actions.push({
type: "add",
path: `../src/views/{{lowerCase name}}/utils//types.ts`,
templateFile: "./view/utils/types.hbs"
path: `../src/views/{{lowerCase name}}/hook.tsx`,
templateFile: "./view/hook.hbs"
});
// actions.push({
// type: "add",
// path: `../src/views/{{lowerCase name}}/utils//rule.ts`,
// templateFile: "./view/utils/rule.hbs"
// });
// actions.push({
// type: "add",
// path: `../src/views/{{lowerCase name}}/utils//types.ts`,
// templateFile: "./view/utils/types.hbs"
// });
}
// 生成components文件夹
// if (data.hasComp) {
......@@ -171,7 +171,11 @@ module.exports = function (plop) {
}
});
// plopfile.js
plop.setHelper("raw", function (options) {
return options.fn(this);
// plop.setHelper("raw", function (options) {
// return options.fn(this);
// });
// 自定义帮助函数
plop.setHelper("vue", function (text) {
return `{{ ${text} }}`; // 手动生成 Vue 表达式
});
};
src/views/device/form.vue → plop-templates/view/components/form.hbs
浏览文件 @ b54b8144
......@@ -4,11 +4,11 @@ import { ref } from "vue";
// 导入自定义组件 ReCol
import ReCol from "@/components/ReCol";
// 从当前目录的 utils/rule 文件导入表单验证规则
import { formRules } from "./utils/rule";
import { formRules } from "@/utils/rules//rule";
// 从当前目录的 utils/types 文件导入表单属性类型
import { FormProps } from "./utils/types";
import { FormProps } from "@/types/types";
// 从当前目录的 hooks 文件导入公共 Hook
import { usePublicHooks } from "./hooks";
import { usePublicHooks } from "@/hooks/hooks";
/**
* 定义组件的 props，使用 withDefaults 设置默认值
......@@ -76,10 +76,11 @@ defineExpose({ getRef });
placeholder="请选择上级部门"
>
<!-- 自定义选项显示内容 -->
<template #default="{ node }">
<span />
<template #default="{ node, data }">
<!-- 方法2: 使用自定义帮助函数 -->
<span>{{vue "data.name"}}</span>
<!-- 如果不是叶子节点，显示子节点数量 -->
<span v-if="!node.isLeaf"> () </span>
<span v-if="!node.isLeaf"> ({{vue "data.children.length" }}) </span>
</template>
</el-cascader>
</el-form-item>
......
plop-templates/view/utils/hook.hbs → plop-templates/view/hook.hbs
浏览文件 @ b54b8144
import dayjs from "dayjs";
import editForm from "../form.vue";
import editForm from "./components/form.vue";
import { handleTree } from "@/utils/tree";
import { message } from "@/utils/message";
import { getDeptList, addDept, deleteDept, updateDept } from "@/api/systems";
import { usePublicHooks } from "../../{{name}}/hooks";
// import { get{{pascalCase name}}List, add{{pascalCase name}}, delete{{pascalCase name}}, update{{pascalCase name}} } from "@/api/{{name}}";
import { usePublicHooks } from "@/hooks/hooks";
import { addDialog } from "@/components/ReDialog";
import { reactive, ref, onMounted, h } from "vue";
import type { FormItemProps } from "./types";
import type { FormItemProps } from "@/types/types";
import { cloneDeep, isAllEmpty, deviceDetection } from "@pureadmin/utils";
export function useDept() {
const form = reactive({
......
plop-templates/view/hooks.hbs deleted 100644 → 0
浏览文件 @ e4de6f27
// 抽离可公用的工具函数等用于系统管理页面逻辑
// 从 vue 库导入 computed 函数，用于创建计算属性
import { computed } from "vue";
// 从 @pureadmin/utils 库导入 useDark 函数，用于获取当前是否为深色模式
import { useDark } from "@pureadmin/utils";
/**
* 用于系统管理页面的公共 Hook
* 该 Hook 主要用于处理深色模式相关的样式计算
* @returns 包含深色模式状态、开关样式和标签样式的对象
*/
export function usePublicHooks() {
// 调用 useDark 函数获取当前是否为深色模式的状态
const { isDark } = useDark();
/**
* 计算 `el-switch` 组件的样式
* 根据深色模式状态设置开关开启和关闭时的颜色
*/
const switchStyle = computed(() => {
return {
"--el-switch-on-color": "#6abe39", // 开关开启时的颜色
"--el-switch-off-color": "#e84749" // 开关关闭时的颜色
};
});
/**
* 计算 `el-tag` 组件的样式
* 根据传入的状态和深色模式状态设置标签的文本颜色、背景颜色和边框颜色
*/
const tagStyle = computed(() => {
return (status: number) => {
return status === 1
? {
// 状态为 1 时的标签样式
"--el-tag-text-color": isDark.value ? "#6abe39" : "#389e0d",
"--el-tag-bg-color": isDark.value ? "#172412" : "#f6ffed",
"--el-tag-border-color": isDark.value ? "#274a17" : "#b7eb8f"
}
: {
// 状态不为 1 时的标签样式
"--el-tag-text-color": isDark.value ? "#e84749" : "#cf1322",
"--el-tag-bg-color": isDark.value ? "#2b1316" : "#fff1f0",
"--el-tag-border-color": isDark.value ? "#58191c" : "#ffa39e"
};
};
});
return {
/** 当前网页是否为`dark`模式 */
isDark,
/** 表现更鲜明的`el-switch`组件 */
switchStyle,
/** 表现更鲜明的`el-tag`组件 */
tagStyle
};
}
plop-templates/view/utils/rule.hbs deleted 100644 → 0
浏览文件 @ e4de6f27
// 从 vue 库导入 reactive 函数，用于创建响应式对象
import { reactive } from "vue";
// 从 element-plus 库导入 FormRules 类型，用于定义表单验证规则
import type { FormRules } from "element-plus";
// 从 @pureadmin/utils 库导入 isPhone 和 isEmail 函数，用于验证手机号和邮箱格式
import { isPhone, isEmail } from "@pureadmin/utils";
/**
* 自定义表单规则校验
* 此对象包含了部门表单中各个字段的验证规则，使用 reactive 函数将其转换为响应式对象。
*/
export const formRules = reactive(<FormRules>{
// 部门名称字段的验证规则
name: [
// 验证部门名称是否为必填项，若为空则提示 "部门名称为必填项"，在失去焦点时触发验证
{ required: true, message: "部门名称为必填项", trigger: "blur" }
],
// 联系电话字段的验证规则
phone: [
{
/**
* 自定义验证函数，用于验证联系电话格式
* @param rule - 当前验证规则对象
* @param value - 当前字段的值
* @param callback - 验证回调函数，用于返回验证结果
*/
validator: (rule, value, callback) => {
// 若联系电话为空，则直接通过验证
if (value === "") {
callback();
}
// 若联系电话格式不正确，则返回错误信息
else if (!isPhone(value)) {
callback(new Error("请输入正确的手机号码格式"));
}
// 若联系电话格式正确，则通过验证
else {
callback();
}
},
// 在失去焦点时触发验证
trigger: "blur"
// 如果想在点击确定按钮时触发这个校验，trigger 设置成 click 即可
// trigger: "click"
}
],
// 邮箱字段的验证规则
email: [
{
/**
* 自定义验证函数，用于验证邮箱格式
* @param rule - 当前验证规则对象
* @param value - 当前字段的值
* @param callback - 验证回调函数，用于返回验证结果
*/
validator: (rule, value, callback) => {
// 若邮箱为空，则直接通过验证
if (value === "") {
callback();
}
// 若邮箱格式不正确，则返回错误信息
else if (!isEmail(value)) {
callback(new Error("请输入正确的邮箱格式"));
}
// 若邮箱格式正确，则通过验证
else {
callback();
}
},
trigger: "blur"
}
]
});
plop-templates/view/utils/types.hbs deleted 100644 → 0
浏览文件 @ e4de6f27
/**
* 部门表单单项属性接口
* 定义了部门表单中每个字段的类型和属性，用于规范部门相关表单数据的结构。
*/
interface FormItemProps {
/**
* 上级部门选项列表
* 每个选项是一个键值对对象，键为字符串类型，值为任意类型。
*/
higherDeptOptions: Record<string, unknown>[];
/**
* 上级部门 ID
* 用于标识当前部门所属的上级部门，为数字类型。
*/
parentId: number;
/**
* 部门名称
* 用于存储部门的具体名称，为字符串类型。
*/
name: string;
/**
* 部门负责人
* 记录部门负责人的姓名，为字符串类型。
*/
principal: string;
/**
* 联系电话
* 可以是字符串或数字类型，用于存储部门的联系电话。
*/
phone: string | number;
/**
* 邮箱地址
* 用于存储部门的联系邮箱，为字符串类型。
*/
email: string;
/**
* 排序值
* 用于对部门进行排序，为数字类型。
*/
sort: number;
/**
* 部门状态
* 用数字表示部门的状态，如启用、停用等。
*/
status: number;
/**
* 备注信息
* 用于存储关于部门的额外说明信息，为字符串类型。
*/
remark: string;
/**
* 部门 ID
* 可选属性，用于唯一标识一个部门，为数字类型。
*/
id?: number;
}
/**
* 部门表单属性接口
* 包含一个部门表单单项属性对象，用于规范整个部门表单的数据结构。
*/
interface FormProps {
/**
* 表单内联数据
* 包含部门表单各项属性的对象，类型为 FormItemProps。
*/
formInline: FormItemProps;
}
/**
* 导出部门表单单项属性和表单属性类型
* 方便在其他文件中引用这些类型，确保数据类型的一致性。
*/
export type { FormItemProps, FormProps };
plop-templates/view/view.hbs
浏览文件 @ b54b8144
<script setup lang="ts">
import { ref } from 'vue';
import { useDept } from './utils/hook';
import { useDept } from './hook';
import { PureTableBar } from '@/components/RePureTableBar';
import { useRenderIcon } from '@/components/ReIcon/src/hooks';
......
plop-templates/view/form.hbs → src/views/device/components/form.vue
浏览文件 @ b54b8144
......@@ -4,11 +4,11 @@ import { ref } from "vue";
// 导入自定义组件 ReCol
import ReCol from "@/components/ReCol";
// 从当前目录的 utils/rule 文件导入表单验证规则
import { formRules } from "./utils/rule";
import { formRules } from "@/utils/rules//rule";
// 从当前目录的 utils/types 文件导入表单属性类型
import { FormProps } from "./utils/types";
import { FormProps } from "@/types/types";
// 从当前目录的 hooks 文件导入公共 Hook
import { usePublicHooks } from "./hooks";
import { usePublicHooks } from "@/hooks/hooks";
/**
* 定义组件的 props，使用 withDefaults 设置默认值
......@@ -77,6 +77,7 @@ defineExpose({ getRef });
>
<!-- 自定义选项显示内容 -->
<template #default="{ node, data }">
<!-- 方法2: 使用自定义帮助函数 -->
<span>{{ data.name }}</span>
<!-- 如果不是叶子节点，显示子节点数量 -->
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
......
src/views/device/utils/hook.tsx → src/views/device/hook.tsx
浏览文件 @ b54b8144
import dayjs from "dayjs";
import editForm from "../form.vue";
import editForm from "./components/form.vue";
import { handleTree } from "@/utils/tree";
import { message } from "@/utils/message";
import { getDeptList, addDept, deleteDept, updateDept } from "@/api/systems";
import { usePublicHooks } from "../../device/hooks";
// import { getDeviceList, addDevice, deleteDevice, updateDevice } from "@/api/device";
import { usePublicHooks } from "@/hooks/hooks";
import { addDialog } from "@/components/ReDialog";
import { reactive, ref, onMounted, h } from "vue";
import type { FormItemProps } from "./types";
import type { FormItemProps } from "@/types/types";
import { cloneDeep, isAllEmpty, deviceDetection } from "@pureadmin/utils";
export function useDept() {
const form = reactive({
......
src/views/device/index.vue
浏览文件 @ b54b8144
<script setup lang="ts">
import { ref } from "vue";
import { useDept } from "./utils/hook";
import { useDept } from "./hook";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论