mirror of
https://github.com/certd/certd.git
synced 2026-05-17 05:37:30 +08:00
🔱: [client] sync upgrade with 21 commits [trident-sync]
Update README.md
This commit is contained in:
xiaojunnuo
@@ -0,0 +1,42 @@
|
||||
import { requestForMock } from "/src/api/service";
|
||||
const request = requestForMock;
|
||||
const apiPrefix = "/mock/FormBase";
|
||||
export function GetList(query) {
|
||||
return request({
|
||||
url: apiPrefix + "/page",
|
||||
method: "get",
|
||||
data: query
|
||||
});
|
||||
}
|
||||
|
||||
export function AddObj(obj) {
|
||||
return request({
|
||||
url: apiPrefix + "/add",
|
||||
method: "post",
|
||||
data: obj
|
||||
});
|
||||
}
|
||||
|
||||
export function UpdateObj(obj) {
|
||||
return request({
|
||||
url: apiPrefix + "/update",
|
||||
method: "post",
|
||||
data: obj
|
||||
});
|
||||
}
|
||||
|
||||
export function DelObj(id) {
|
||||
return request({
|
||||
url: apiPrefix + "/delete",
|
||||
method: "post",
|
||||
params: { id }
|
||||
});
|
||||
}
|
||||
|
||||
export function GetObj(id) {
|
||||
return request({
|
||||
url: apiPrefix + "/info",
|
||||
method: "get",
|
||||
params: { id }
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
import * as api from "./api";
|
||||
export default function ({ crudExpose }) {
|
||||
const pageRequest = async (query) => {
|
||||
return await api.GetList(query);
|
||||
};
|
||||
const editRequest = async ({ form, row }) => {
|
||||
form.id = row.id;
|
||||
return await api.UpdateObj(form);
|
||||
};
|
||||
const delRequest = async ({ row }) => {
|
||||
return await api.DelObj(row.id);
|
||||
};
|
||||
|
||||
const addRequest = async ({ form }) => {
|
||||
return await api.AddObj(form);
|
||||
};
|
||||
return {
|
||||
crudOptions: {
|
||||
request: {
|
||||
pageRequest,
|
||||
addRequest,
|
||||
editRequest,
|
||||
delRequest
|
||||
},
|
||||
form: {
|
||||
wrapper: {
|
||||
buttons: {
|
||||
ok: {
|
||||
text: "保存"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
columns: {
|
||||
name: {
|
||||
title: "姓名",
|
||||
type: "text"
|
||||
},
|
||||
renderLabel: {
|
||||
title: "labelRender",
|
||||
type: "text",
|
||||
form: {
|
||||
title(context) {
|
||||
console.log("render label context:", context);
|
||||
return <div style={{ color: "red" }}>LabelRender</div>;
|
||||
},
|
||||
helper: {
|
||||
text: "配置form.title为一个render方法即可自定义label"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<fs-page>
|
||||
<fs-crud ref="crudRef" v-bind="crudBinding">
|
||||
<template #actionbar-right>
|
||||
<a-alert class="ml-1" type="info" message="基本表单" />
|
||||
</template>
|
||||
</fs-crud>
|
||||
</fs-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, onMounted, nextTick } from "vue";
|
||||
import { useFs } from "@fast-crud/fast-crud";
|
||||
import createCrudOptions from "./crud.jsx";
|
||||
export default defineComponent({
|
||||
name: "FormBase",
|
||||
setup() {
|
||||
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
|
||||
|
||||
// 页面打开后获取列表数据
|
||||
onMounted(async () => {
|
||||
crudExpose.doRefresh();
|
||||
});
|
||||
|
||||
return {
|
||||
crudBinding,
|
||||
crudRef
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,310 @@
|
||||
import mockUtil from "/src/mock/base";
|
||||
|
||||
const options = {
|
||||
name: "FormBase",
|
||||
idGenerator: 0
|
||||
};
|
||||
const list = [
|
||||
{
|
||||
name: "王小虎",
|
||||
age: 15,
|
||||
password: "",
|
||||
status: "2",
|
||||
url: "https://baidu.com"
|
||||
},
|
||||
{
|
||||
name: "张三",
|
||||
age: 18,
|
||||
password: "",
|
||||
url: "https://baidu.com"
|
||||
},
|
||||
{
|
||||
status: "2"
|
||||
}
|
||||
];
|
||||
|
||||
const dictData = [
|
||||
{
|
||||
value: "zhinan",
|
||||
label: "指南",
|
||||
children: [
|
||||
{
|
||||
value: "shejiyuanze",
|
||||
label: "设计原则",
|
||||
children: [
|
||||
{
|
||||
value: "yizhi",
|
||||
label: "一致"
|
||||
},
|
||||
{
|
||||
value: "fankui",
|
||||
label: "反馈"
|
||||
},
|
||||
{
|
||||
value: "xiaolv",
|
||||
label: "效率"
|
||||
},
|
||||
{
|
||||
value: "kekong",
|
||||
label: "可控"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "daohang",
|
||||
label: "导航",
|
||||
children: [
|
||||
{
|
||||
value: "cexiangdaohang",
|
||||
label: "侧向导航"
|
||||
},
|
||||
{
|
||||
value: "dingbudaohang",
|
||||
label: "顶部导航"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "zujian",
|
||||
label: "组件",
|
||||
children: [
|
||||
{
|
||||
value: "basic",
|
||||
label: "Basic",
|
||||
children: [
|
||||
{
|
||||
value: "layout",
|
||||
label: "Layout 布局"
|
||||
},
|
||||
{
|
||||
value: "color",
|
||||
label: "Color 色彩"
|
||||
},
|
||||
{
|
||||
value: "typography",
|
||||
label: "Typography 字体"
|
||||
},
|
||||
{
|
||||
value: "icon",
|
||||
label: "Icon 图标"
|
||||
},
|
||||
{
|
||||
value: "button",
|
||||
label: "Button 按钮"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "form",
|
||||
label: "Form",
|
||||
children: [
|
||||
{
|
||||
value: "radio",
|
||||
label: "Radio 单选框"
|
||||
},
|
||||
{
|
||||
value: "checkbox",
|
||||
label: "Checkbox 多选框"
|
||||
},
|
||||
{
|
||||
value: "input",
|
||||
label: "Input 输入框"
|
||||
},
|
||||
{
|
||||
value: "input-number",
|
||||
label: "InputNumber 计数器"
|
||||
},
|
||||
{
|
||||
value: "select",
|
||||
label: "Select 选择器"
|
||||
},
|
||||
{
|
||||
value: "cascader",
|
||||
label: "Cascader 级联选择器"
|
||||
},
|
||||
{
|
||||
value: "switch",
|
||||
label: "Switch 开关"
|
||||
},
|
||||
{
|
||||
value: "slider",
|
||||
label: "Slider 滑块"
|
||||
},
|
||||
{
|
||||
value: "time-picker",
|
||||
label: "TimePicker 时间选择器"
|
||||
},
|
||||
{
|
||||
value: "date-picker",
|
||||
label: "DatePicker 日期选择器"
|
||||
},
|
||||
{
|
||||
value: "datetime-picker",
|
||||
label: "DateTimePicker 日期时间选择器"
|
||||
},
|
||||
{
|
||||
value: "upload",
|
||||
label: "Upload 上传"
|
||||
},
|
||||
{
|
||||
value: "rate",
|
||||
label: "Rate 评分"
|
||||
},
|
||||
{
|
||||
value: "form",
|
||||
label: "Form 表单"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "data",
|
||||
label: "Data",
|
||||
children: [
|
||||
{
|
||||
value: "table",
|
||||
label: "Table 表格"
|
||||
},
|
||||
{
|
||||
value: "tag",
|
||||
label: "Tag 标签"
|
||||
},
|
||||
{
|
||||
value: "progress",
|
||||
label: "Progress 进度条"
|
||||
},
|
||||
{
|
||||
value: "tree",
|
||||
label: "Tree 树形控件"
|
||||
},
|
||||
{
|
||||
value: "pagination",
|
||||
label: "Pagination 分页"
|
||||
},
|
||||
{
|
||||
value: "badge",
|
||||
label: "Badge 标记"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "notice",
|
||||
label: "Notice",
|
||||
children: [
|
||||
{
|
||||
value: "alert",
|
||||
label: "Alert 警告"
|
||||
},
|
||||
{
|
||||
value: "loading",
|
||||
label: "Loading 加载"
|
||||
},
|
||||
{
|
||||
value: "message",
|
||||
label: "Message 消息提示"
|
||||
},
|
||||
{
|
||||
value: "message-box",
|
||||
label: "MessageBox 弹框"
|
||||
},
|
||||
{
|
||||
value: "notification",
|
||||
label: "Notification 通知"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "navigation",
|
||||
label: "Navigation",
|
||||
children: [
|
||||
{
|
||||
value: "menu",
|
||||
label: "NavMenu 导航菜单"
|
||||
},
|
||||
{
|
||||
value: "tabs",
|
||||
label: "Tabs 标签页"
|
||||
},
|
||||
{
|
||||
value: "breadcrumb",
|
||||
label: "Breadcrumb 面包屑"
|
||||
},
|
||||
{
|
||||
value: "dropdown",
|
||||
label: "Dropdown 下拉菜单"
|
||||
},
|
||||
{
|
||||
value: "steps",
|
||||
label: "Steps 步骤条"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "others",
|
||||
label: "Others",
|
||||
children: [
|
||||
{
|
||||
value: "dialog",
|
||||
label: "Dialog 对话框"
|
||||
},
|
||||
{
|
||||
value: "tooltip",
|
||||
label: "Tooltip 文字提示"
|
||||
},
|
||||
{
|
||||
value: "popover",
|
||||
label: "Popover 弹出框"
|
||||
},
|
||||
{
|
||||
value: "card",
|
||||
label: "Card 卡片"
|
||||
},
|
||||
{
|
||||
value: "carousel",
|
||||
label: "Carousel 走马灯"
|
||||
},
|
||||
{
|
||||
value: "collapse",
|
||||
label: "Collapse 折叠面板"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "ziyuan",
|
||||
label: "资源",
|
||||
children: [
|
||||
{
|
||||
value: "axure",
|
||||
label: "Axure Components"
|
||||
},
|
||||
{
|
||||
value: "sketch",
|
||||
label: "Sketch Templates"
|
||||
},
|
||||
{
|
||||
value: "jiaohu",
|
||||
label: "组件交互文档"
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
options.list = list;
|
||||
options.copyTimes = 1000;
|
||||
const mock = mockUtil.buildMock(options);
|
||||
mock.push({
|
||||
path: "/select/cascadeData",
|
||||
method: "get",
|
||||
handle(req) {
|
||||
return {
|
||||
code: 0,
|
||||
msg: "success",
|
||||
data: dictData
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
export default mock;
|
||||
@@ -0,0 +1,42 @@
|
||||
import { requestForMock } from "/src/api/service";
|
||||
const request = requestForMock;
|
||||
const apiPrefix = "/mock/FormCustomForm";
|
||||
export function GetList(query) {
|
||||
return request({
|
||||
url: apiPrefix + "/page",
|
||||
method: "get",
|
||||
data: query
|
||||
});
|
||||
}
|
||||
|
||||
export function AddObj(obj) {
|
||||
return request({
|
||||
url: apiPrefix + "/add",
|
||||
method: "post",
|
||||
data: obj
|
||||
});
|
||||
}
|
||||
|
||||
export function UpdateObj(obj) {
|
||||
return request({
|
||||
url: apiPrefix + "/update",
|
||||
method: "post",
|
||||
data: obj
|
||||
});
|
||||
}
|
||||
|
||||
export function DelObj(id) {
|
||||
return request({
|
||||
url: apiPrefix + "/delete",
|
||||
method: "post",
|
||||
params: { id }
|
||||
});
|
||||
}
|
||||
|
||||
export function GetObj(id) {
|
||||
return request({
|
||||
url: apiPrefix + "/info",
|
||||
method: "get",
|
||||
params: { id }
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
import * as api from "./api";
|
||||
import { dict } from "@fast-crud/fast-crud";
|
||||
export default function ({ expose }) {
|
||||
const { getFormRef, getFormData } = expose;
|
||||
const pageRequest = async (query) => {
|
||||
return await api.GetList(query);
|
||||
};
|
||||
const editRequest = async ({ form, row }) => {
|
||||
form.id = row.id;
|
||||
return await api.UpdateObj(form);
|
||||
};
|
||||
const delRequest = async ({ row }) => {
|
||||
return await api.DelObj(row.id);
|
||||
};
|
||||
|
||||
const addRequest = async ({ form }) => {
|
||||
return await api.AddObj(form);
|
||||
};
|
||||
return {
|
||||
crudOptions: {
|
||||
request: {
|
||||
pageRequest,
|
||||
addRequest,
|
||||
editRequest,
|
||||
delRequest
|
||||
},
|
||||
columns: {
|
||||
title: {
|
||||
title: "商品标题",
|
||||
type: "text"
|
||||
},
|
||||
code: {
|
||||
title: "商品代码",
|
||||
search: { show: true },
|
||||
type: "text"
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<fs-page>
|
||||
<fs-crud ref="crudRef" v-bind="crudBinding">
|
||||
<template #actionbar-right>
|
||||
<a-divider type="vertical" />
|
||||
<a-button @click="openCustomForm">打开自定义表单对话框</a-button>
|
||||
</template>
|
||||
</fs-crud>
|
||||
</fs-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent, ref, onMounted } from "vue";
|
||||
import { useCrud, useExpose, useColumns } from "@fast-crud/fast-crud";
|
||||
import createCrudOptions from "./crud";
|
||||
import _ from "lodash-es";
|
||||
import { message } from "ant-design-vue";
|
||||
export default defineComponent({
|
||||
name: "FormCustomForm",
|
||||
setup(props, ctx) {
|
||||
// crud组件的ref
|
||||
const crudRef = ref();
|
||||
// crud 配置的ref
|
||||
const crudBinding = ref();
|
||||
// 暴露的方法
|
||||
const { expose } = useExpose({ crudRef, crudBinding });
|
||||
// 你的crud配置
|
||||
const { crudOptions } = createCrudOptions({ expose });
|
||||
// 初始化crud配置
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
|
||||
const { resetCrudOptions } = useCrud({ expose, crudOptions });
|
||||
// 你可以调用此方法，重新初始化crud配置
|
||||
// resetCrudOptions(options)
|
||||
|
||||
// 页面打开后获取列表数据
|
||||
onMounted(() => {
|
||||
expose.doRefresh();
|
||||
});
|
||||
|
||||
// 自定义表单配置
|
||||
const { buildFormOptions } = useColumns();
|
||||
const customOptions = {
|
||||
columns: {
|
||||
customField: {
|
||||
title: "新表单字段",
|
||||
type: "text"
|
||||
},
|
||||
groupField: {
|
||||
title: "分组字段",
|
||||
type: "text"
|
||||
}
|
||||
},
|
||||
form: {
|
||||
wrapper: { title: "自定义表单" },
|
||||
group: {
|
||||
groups: {
|
||||
testGroupName: {
|
||||
header: "分组测试",
|
||||
columns: ["groupField"]
|
||||
}
|
||||
}
|
||||
},
|
||||
doSubmit({ form }) {
|
||||
console.log("form submit:", form);
|
||||
message.info("自定义表单提交:" + JSON.stringify(form));
|
||||
message.warn("抛出异常可以阻止表单关闭");
|
||||
throw new Error("抛出异常可以阻止表单关闭");
|
||||
}
|
||||
}
|
||||
};
|
||||
//使用crudOptions结构来构建自定义表单配置
|
||||
const formOptions = buildFormOptions(customOptions);
|
||||
|
||||
//打开自定义表单
|
||||
const openCustomForm = () => {
|
||||
expose.getFormWrapperRef().open(formOptions);
|
||||
};
|
||||
|
||||
return {
|
||||
crudBinding,
|
||||
crudRef,
|
||||
openCustomForm
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,303 @@
|
||||
import mockUtil from "/src/mock/base";
|
||||
|
||||
const options = {
|
||||
name: "FormCustomForm",
|
||||
idGenerator: 0
|
||||
};
|
||||
const list = [
|
||||
{
|
||||
title: "无线充电宝",
|
||||
code: "100001",
|
||||
images: "https://img0.bdstatic.com/static/searchdetail/img/logo-2X_0c4ef02.png",
|
||||
price: 100,
|
||||
stock: 99,
|
||||
intro: "30000毫安超大容量移动电源充电宝官方原装正品专用便携",
|
||||
content: ""
|
||||
}
|
||||
];
|
||||
|
||||
const dictData = [
|
||||
{
|
||||
value: "zhinan",
|
||||
label: "指南",
|
||||
children: [
|
||||
{
|
||||
value: "shejiyuanze",
|
||||
label: "设计原则",
|
||||
children: [
|
||||
{
|
||||
value: "yizhi",
|
||||
label: "一致"
|
||||
},
|
||||
{
|
||||
value: "fankui",
|
||||
label: "反馈"
|
||||
},
|
||||
{
|
||||
value: "xiaolv",
|
||||
label: "效率"
|
||||
},
|
||||
{
|
||||
value: "kekong",
|
||||
label: "可控"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "daohang",
|
||||
label: "导航",
|
||||
children: [
|
||||
{
|
||||
value: "cexiangdaohang",
|
||||
label: "侧向导航"
|
||||
},
|
||||
{
|
||||
value: "dingbudaohang",
|
||||
label: "顶部导航"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "zujian",
|
||||
label: "组件",
|
||||
children: [
|
||||
{
|
||||
value: "basic",
|
||||
label: "Basic",
|
||||
children: [
|
||||
{
|
||||
value: "layout",
|
||||
label: "Layout 布局"
|
||||
},
|
||||
{
|
||||
value: "color",
|
||||
label: "Color 色彩"
|
||||
},
|
||||
{
|
||||
value: "typography",
|
||||
label: "Typography 字体"
|
||||
},
|
||||
{
|
||||
value: "icon",
|
||||
label: "Icon 图标"
|
||||
},
|
||||
{
|
||||
value: "button",
|
||||
label: "Button 按钮"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "form",
|
||||
label: "Form",
|
||||
children: [
|
||||
{
|
||||
value: "radio",
|
||||
label: "Radio 单选框"
|
||||
},
|
||||
{
|
||||
value: "checkbox",
|
||||
label: "Checkbox 多选框"
|
||||
},
|
||||
{
|
||||
value: "input",
|
||||
label: "Input 输入框"
|
||||
},
|
||||
{
|
||||
value: "input-number",
|
||||
label: "InputNumber 计数器"
|
||||
},
|
||||
{
|
||||
value: "select",
|
||||
label: "Select 选择器"
|
||||
},
|
||||
{
|
||||
value: "cascader",
|
||||
label: "Cascader 级联选择器"
|
||||
},
|
||||
{
|
||||
value: "switch",
|
||||
label: "Switch 开关"
|
||||
},
|
||||
{
|
||||
value: "slider",
|
||||
label: "Slider 滑块"
|
||||
},
|
||||
{
|
||||
value: "time-picker",
|
||||
label: "TimePicker 时间选择器"
|
||||
},
|
||||
{
|
||||
value: "date-picker",
|
||||
label: "DatePicker 日期选择器"
|
||||
},
|
||||
{
|
||||
value: "datetime-picker",
|
||||
label: "DateTimePicker 日期时间选择器"
|
||||
},
|
||||
{
|
||||
value: "upload",
|
||||
label: "Upload 上传"
|
||||
},
|
||||
{
|
||||
value: "rate",
|
||||
label: "Rate 评分"
|
||||
},
|
||||
{
|
||||
value: "form",
|
||||
label: "Form 表单"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "data",
|
||||
label: "Data",
|
||||
children: [
|
||||
{
|
||||
value: "table",
|
||||
label: "Table 表格"
|
||||
},
|
||||
{
|
||||
value: "tag",
|
||||
label: "Tag 标签"
|
||||
},
|
||||
{
|
||||
value: "progress",
|
||||
label: "Progress 进度条"
|
||||
},
|
||||
{
|
||||
value: "tree",
|
||||
label: "Tree 树形控件"
|
||||
},
|
||||
{
|
||||
value: "pagination",
|
||||
label: "Pagination 分页"
|
||||
},
|
||||
{
|
||||
value: "badge",
|
||||
label: "Badge 标记"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "notice",
|
||||
label: "Notice",
|
||||
children: [
|
||||
{
|
||||
value: "alert",
|
||||
label: "Alert 警告"
|
||||
},
|
||||
{
|
||||
value: "loading",
|
||||
label: "Loading 加载"
|
||||
},
|
||||
{
|
||||
value: "message",
|
||||
label: "Message 消息提示"
|
||||
},
|
||||
{
|
||||
value: "message-box",
|
||||
label: "MessageBox 弹框"
|
||||
},
|
||||
{
|
||||
value: "notification",
|
||||
label: "Notification 通知"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "navigation",
|
||||
label: "Navigation",
|
||||
children: [
|
||||
{
|
||||
value: "menu",
|
||||
label: "NavMenu 导航菜单"
|
||||
},
|
||||
{
|
||||
value: "tabs",
|
||||
label: "Tabs 标签页"
|
||||
},
|
||||
{
|
||||
value: "breadcrumb",
|
||||
label: "Breadcrumb 面包屑"
|
||||
},
|
||||
{
|
||||
value: "dropdown",
|
||||
label: "Dropdown 下拉菜单"
|
||||
},
|
||||
{
|
||||
value: "steps",
|
||||
label: "Steps 步骤条"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "others",
|
||||
label: "Others",
|
||||
children: [
|
||||
{
|
||||
value: "dialog",
|
||||
label: "Dialog 对话框"
|
||||
},
|
||||
{
|
||||
value: "tooltip",
|
||||
label: "Tooltip 文字提示"
|
||||
},
|
||||
{
|
||||
value: "popover",
|
||||
label: "Popover 弹出框"
|
||||
},
|
||||
{
|
||||
value: "card",
|
||||
label: "Card 卡片"
|
||||
},
|
||||
{
|
||||
value: "carousel",
|
||||
label: "Carousel 走马灯"
|
||||
},
|
||||
{
|
||||
value: "collapse",
|
||||
label: "Collapse 折叠面板"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "ziyuan",
|
||||
label: "资源",
|
||||
children: [
|
||||
{
|
||||
value: "axure",
|
||||
label: "Axure Components"
|
||||
},
|
||||
{
|
||||
value: "sketch",
|
||||
label: "Sketch Templates"
|
||||
},
|
||||
{
|
||||
value: "jiaohu",
|
||||
label: "组件交互文档"
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
options.list = list;
|
||||
options.copyTimes = 1000;
|
||||
const mock = mockUtil.buildMock(options);
|
||||
mock.push({
|
||||
path: "/select/cascadeData",
|
||||
method: "get",
|
||||
handle(req) {
|
||||
return {
|
||||
code: 0,
|
||||
msg: "success",
|
||||
data: dictData
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
export default mock;
|
||||
@@ -0,0 +1,42 @@
|
||||
import { requestForMock } from "/src/api/service";
|
||||
const request = requestForMock;
|
||||
const apiPrefix = "/mock/formText";
|
||||
export function GetList(query) {
|
||||
return request({
|
||||
url: apiPrefix + "/page",
|
||||
method: "get",
|
||||
data: query
|
||||
});
|
||||
}
|
||||
|
||||
export function AddObj(obj) {
|
||||
return request({
|
||||
url: apiPrefix + "/add",
|
||||
method: "post",
|
||||
data: obj
|
||||
});
|
||||
}
|
||||
|
||||
export function UpdateObj(obj) {
|
||||
return request({
|
||||
url: apiPrefix + "/update",
|
||||
method: "post",
|
||||
data: obj
|
||||
});
|
||||
}
|
||||
|
||||
export function DelObj(id) {
|
||||
return request({
|
||||
url: apiPrefix + "/delete",
|
||||
method: "post",
|
||||
params: { id }
|
||||
});
|
||||
}
|
||||
|
||||
export function GetObj(id) {
|
||||
return request({
|
||||
url: apiPrefix + "/info",
|
||||
method: "get",
|
||||
params: { id }
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
import * as api from "./api";
|
||||
export default function ({ expose }) {
|
||||
const pageRequest = async (query) => {
|
||||
return await api.GetList(query);
|
||||
};
|
||||
const editRequest = async ({ form, row }) => {
|
||||
form.id = row.id;
|
||||
return await api.UpdateObj(form);
|
||||
};
|
||||
const delRequest = async ({ row }) => {
|
||||
return await api.DelObj(row.id);
|
||||
};
|
||||
|
||||
const addRequest = async ({ form }) => {
|
||||
return await api.AddObj(form);
|
||||
};
|
||||
return {
|
||||
crudOptions: {
|
||||
request: {
|
||||
pageRequest,
|
||||
addRequest,
|
||||
editRequest,
|
||||
delRequest
|
||||
},
|
||||
form: {
|
||||
wrapper: {
|
||||
is: "a-drawer"
|
||||
}
|
||||
},
|
||||
columns: {
|
||||
name: {
|
||||
title: "姓名",
|
||||
type: "text", //虽然不写也能正确显示组件，但不建议省略它
|
||||
search: { show: true },
|
||||
form: {
|
||||
component: {
|
||||
maxlength: 20
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<fs-page>
|
||||
<fs-crud ref="crudRef" v-bind="crudBinding" />
|
||||
</fs-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent, ref, onMounted } from "vue";
|
||||
import { useCrud } from "@fast-crud/fast-crud";
|
||||
import createCrudOptions from "./crud";
|
||||
import { useExpose } from "@fast-crud/fast-crud";
|
||||
export default defineComponent({
|
||||
name: "FormText",
|
||||
setup() {
|
||||
// crud组件的ref
|
||||
const crudRef = ref();
|
||||
// crud 配置的ref
|
||||
const crudBinding = ref();
|
||||
// 暴露的方法
|
||||
const { expose } = useExpose({ crudRef, crudBinding });
|
||||
// 你的crud配置
|
||||
const { crudOptions } = createCrudOptions({ expose });
|
||||
// 初始化crud配置
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
|
||||
const { resetCrudOptions } = useCrud({ expose, crudOptions });
|
||||
// 你可以调用此方法，重新初始化crud配置
|
||||
// resetCrudOptions(options)
|
||||
|
||||
// 页面打开后获取列表数据
|
||||
onMounted(() => {
|
||||
expose.doRefresh();
|
||||
});
|
||||
|
||||
return {
|
||||
crudBinding,
|
||||
crudRef
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,40 @@
|
||||
import mockUtil from "/src/mock/base";
|
||||
const options = {
|
||||
name: "formText",
|
||||
idGenerator: 0
|
||||
};
|
||||
const list = [
|
||||
{
|
||||
name: "王小虎",
|
||||
date: "2016-05-02",
|
||||
status: "0",
|
||||
province: "1",
|
||||
avatar: "https://alicdn.antdv.com/vue.png",
|
||||
show: true,
|
||||
city: "sz",
|
||||
address: "123123",
|
||||
zip: "518000",
|
||||
intro: "王小虎是element-plus的table示例出现的名字"
|
||||
},
|
||||
{
|
||||
name: "张三",
|
||||
date: "2016-05-04",
|
||||
status: "1",
|
||||
province: "2"
|
||||
},
|
||||
{
|
||||
name: "李四",
|
||||
date: 2232433534511,
|
||||
status: "1",
|
||||
province: "0"
|
||||
},
|
||||
{
|
||||
name: "王五",
|
||||
date: "2016-05-03",
|
||||
status: "2",
|
||||
province: "wh,gz"
|
||||
}
|
||||
];
|
||||
options.list = list;
|
||||
const mock = mockUtil.buildMock(options);
|
||||
export default mock;
|
||||
@@ -0,0 +1,42 @@
|
||||
import { requestForMock } from "/src/api/service";
|
||||
const request = requestForMock;
|
||||
const apiPrefix = "/mock/FormGroupTabs";
|
||||
export function GetList(query) {
|
||||
return request({
|
||||
url: apiPrefix + "/page",
|
||||
method: "get",
|
||||
data: query
|
||||
});
|
||||
}
|
||||
|
||||
export function AddObj(obj) {
|
||||
return request({
|
||||
url: apiPrefix + "/add",
|
||||
method: "post",
|
||||
data: obj
|
||||
});
|
||||
}
|
||||
|
||||
export function UpdateObj(obj) {
|
||||
return request({
|
||||
url: apiPrefix + "/update",
|
||||
method: "post",
|
||||
data: obj
|
||||
});
|
||||
}
|
||||
|
||||
export function DelObj(id) {
|
||||
return request({
|
||||
url: apiPrefix + "/delete",
|
||||
method: "post",
|
||||
params: { id }
|
||||
});
|
||||
}
|
||||
|
||||
export function GetObj(id) {
|
||||
return request({
|
||||
url: apiPrefix + "/info",
|
||||
method: "get",
|
||||
params: { id }
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,114 @@
|
||||
import * as api from "./api";
|
||||
import { dict } from "@fast-crud/fast-crud";
|
||||
export default function ({ expose }) {
|
||||
const { getFormRef, getFormData } = expose;
|
||||
const pageRequest = async (query) => {
|
||||
return await api.GetList(query);
|
||||
};
|
||||
const editRequest = async ({ form, row }) => {
|
||||
form.id = row.id;
|
||||
return await api.UpdateObj(form);
|
||||
};
|
||||
const delRequest = async ({ row }) => {
|
||||
return await api.DelObj(row.id);
|
||||
};
|
||||
|
||||
const addRequest = async ({ form }) => {
|
||||
return await api.AddObj(form);
|
||||
};
|
||||
return {
|
||||
crudOptions: {
|
||||
request: {
|
||||
pageRequest,
|
||||
addRequest,
|
||||
editRequest,
|
||||
delRequest
|
||||
},
|
||||
columns: {
|
||||
title: {
|
||||
title: "商品标题",
|
||||
type: "text"
|
||||
},
|
||||
code: {
|
||||
title: "商品代码",
|
||||
search: { show: true },
|
||||
type: "text",
|
||||
form: {
|
||||
rules: [{ required: true, message: "此项必填" }]
|
||||
}
|
||||
},
|
||||
images: {
|
||||
title: "图片",
|
||||
type: "image-uploader"
|
||||
},
|
||||
price: {
|
||||
title: "价格",
|
||||
sortable: true
|
||||
},
|
||||
store: {
|
||||
title: "库存",
|
||||
type: "number"
|
||||
},
|
||||
intro: {
|
||||
title: "简介",
|
||||
type: "textarea",
|
||||
column: {
|
||||
ellipsis: true,
|
||||
showTitle: true
|
||||
}
|
||||
},
|
||||
content: {
|
||||
title: "详情",
|
||||
type: "editor-ueditor",
|
||||
form: {
|
||||
labelWidth: "0px"
|
||||
}
|
||||
}
|
||||
},
|
||||
form: {
|
||||
group: {
|
||||
groupType: "tabs", //collapse， tabs
|
||||
accordion: false,
|
||||
groups: {
|
||||
base: {
|
||||
slots: {
|
||||
tab: (scope) => {
|
||||
return (
|
||||
<span style={{ color: scope.hasError ? "red" : "green" }}>
|
||||
<fs-icon icon={"ion:eye"}></fs-icon>
|
||||
商品基础
|
||||
</span>
|
||||
);
|
||||
}
|
||||
},
|
||||
icon: "el-icon-goods",
|
||||
columns: ["code", "title", "images"]
|
||||
},
|
||||
price: {
|
||||
tab: "库存价格",
|
||||
icon: "el-icon-price-tag",
|
||||
columns: ["store", "price"]
|
||||
},
|
||||
info: {
|
||||
tab: "详情",
|
||||
collapsed: true, //默认折叠
|
||||
icon: "el-icon-warning-outline",
|
||||
columns: ["intro", "content"]
|
||||
}
|
||||
// custom: {
|
||||
// title: "自定义",
|
||||
// collapsed: false,
|
||||
// show(context) {
|
||||
// console.log("custom context", context);
|
||||
// return context.mode === "view";
|
||||
// },
|
||||
// disabled: false,
|
||||
// icon: "el-icon-warning-outline",
|
||||
// columns: ["custom", "custom2"]
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<fs-page>
|
||||
<fs-crud ref="crudRef" v-bind="crudBinding" />
|
||||
</fs-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent, ref, onMounted } from "vue";
|
||||
import { useCrud } from "@fast-crud/fast-crud";
|
||||
import createCrudOptions from "./crud";
|
||||
import { useExpose } from "@fast-crud/fast-crud";
|
||||
export default defineComponent({
|
||||
name: "FormGroupTabs",
|
||||
setup() {
|
||||
// crud组件的ref
|
||||
const crudRef = ref();
|
||||
// crud 配置的ref
|
||||
const crudBinding = ref();
|
||||
// 暴露的方法
|
||||
const { expose } = useExpose({ crudRef, crudBinding });
|
||||
// 你的crud配置
|
||||
const { crudOptions } = createCrudOptions({ expose });
|
||||
// 初始化crud配置
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
|
||||
const { resetCrudOptions } = useCrud({ expose, crudOptions });
|
||||
// 你可以调用此方法，重新初始化crud配置
|
||||
// resetCrudOptions(options)
|
||||
|
||||
// 页面打开后获取列表数据
|
||||
onMounted(() => {
|
||||
expose.doRefresh();
|
||||
});
|
||||
|
||||
return {
|
||||
crudBinding,
|
||||
crudRef
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,303 @@
|
||||
import mockUtil from "/src/mock/base";
|
||||
|
||||
const options = {
|
||||
name: "FormGroupTabs",
|
||||
idGenerator: 0
|
||||
};
|
||||
const list = [
|
||||
{
|
||||
title: "无线充电宝",
|
||||
code: "100001",
|
||||
images: "https://img0.bdstatic.com/static/searchdetail/img/logo-2X_0c4ef02.png",
|
||||
price: 100,
|
||||
stock: 99,
|
||||
intro: "30000毫安超大容量移动电源充电宝官方原装正品专用便携",
|
||||
content: ""
|
||||
}
|
||||
];
|
||||
|
||||
const dictData = [
|
||||
{
|
||||
value: "zhinan",
|
||||
label: "指南",
|
||||
children: [
|
||||
{
|
||||
value: "shejiyuanze",
|
||||
label: "设计原则",
|
||||
children: [
|
||||
{
|
||||
value: "yizhi",
|
||||
label: "一致"
|
||||
},
|
||||
{
|
||||
value: "fankui",
|
||||
label: "反馈"
|
||||
},
|
||||
{
|
||||
value: "xiaolv",
|
||||
label: "效率"
|
||||
},
|
||||
{
|
||||
value: "kekong",
|
||||
label: "可控"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "daohang",
|
||||
label: "导航",
|
||||
children: [
|
||||
{
|
||||
value: "cexiangdaohang",
|
||||
label: "侧向导航"
|
||||
},
|
||||
{
|
||||
value: "dingbudaohang",
|
||||
label: "顶部导航"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "zujian",
|
||||
label: "组件",
|
||||
children: [
|
||||
{
|
||||
value: "basic",
|
||||
label: "Basic",
|
||||
children: [
|
||||
{
|
||||
value: "layout",
|
||||
label: "Layout 布局"
|
||||
},
|
||||
{
|
||||
value: "color",
|
||||
label: "Color 色彩"
|
||||
},
|
||||
{
|
||||
value: "typography",
|
||||
label: "Typography 字体"
|
||||
},
|
||||
{
|
||||
value: "icon",
|
||||
label: "Icon 图标"
|
||||
},
|
||||
{
|
||||
value: "button",
|
||||
label: "Button 按钮"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "form",
|
||||
label: "Form",
|
||||
children: [
|
||||
{
|
||||
value: "radio",
|
||||
label: "Radio 单选框"
|
||||
},
|
||||
{
|
||||
value: "checkbox",
|
||||
label: "Checkbox 多选框"
|
||||
},
|
||||
{
|
||||
value: "input",
|
||||
label: "Input 输入框"
|
||||
},
|
||||
{
|
||||
value: "input-number",
|
||||
label: "InputNumber 计数器"
|
||||
},
|
||||
{
|
||||
value: "select",
|
||||
label: "Select 选择器"
|
||||
},
|
||||
{
|
||||
value: "cascader",
|
||||
label: "Cascader 级联选择器"
|
||||
},
|
||||
{
|
||||
value: "switch",
|
||||
label: "Switch 开关"
|
||||
},
|
||||
{
|
||||
value: "slider",
|
||||
label: "Slider 滑块"
|
||||
},
|
||||
{
|
||||
value: "time-picker",
|
||||
label: "TimePicker 时间选择器"
|
||||
},
|
||||
{
|
||||
value: "date-picker",
|
||||
label: "DatePicker 日期选择器"
|
||||
},
|
||||
{
|
||||
value: "datetime-picker",
|
||||
label: "DateTimePicker 日期时间选择器"
|
||||
},
|
||||
{
|
||||
value: "upload",
|
||||
label: "Upload 上传"
|
||||
},
|
||||
{
|
||||
value: "rate",
|
||||
label: "Rate 评分"
|
||||
},
|
||||
{
|
||||
value: "form",
|
||||
label: "Form 表单"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "data",
|
||||
label: "Data",
|
||||
children: [
|
||||
{
|
||||
value: "table",
|
||||
label: "Table 表格"
|
||||
},
|
||||
{
|
||||
value: "tag",
|
||||
label: "Tag 标签"
|
||||
},
|
||||
{
|
||||
value: "progress",
|
||||
label: "Progress 进度条"
|
||||
},
|
||||
{
|
||||
value: "tree",
|
||||
label: "Tree 树形控件"
|
||||
},
|
||||
{
|
||||
value: "pagination",
|
||||
label: "Pagination 分页"
|
||||
},
|
||||
{
|
||||
value: "badge",
|
||||
label: "Badge 标记"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "notice",
|
||||
label: "Notice",
|
||||
children: [
|
||||
{
|
||||
value: "alert",
|
||||
label: "Alert 警告"
|
||||
},
|
||||
{
|
||||
value: "loading",
|
||||
label: "Loading 加载"
|
||||
},
|
||||
{
|
||||
value: "message",
|
||||
label: "Message 消息提示"
|
||||
},
|
||||
{
|
||||
value: "message-box",
|
||||
label: "MessageBox 弹框"
|
||||
},
|
||||
{
|
||||
value: "notification",
|
||||
label: "Notification 通知"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "navigation",
|
||||
label: "Navigation",
|
||||
children: [
|
||||
{
|
||||
value: "menu",
|
||||
label: "NavMenu 导航菜单"
|
||||
},
|
||||
{
|
||||
value: "tabs",
|
||||
label: "Tabs 标签页"
|
||||
},
|
||||
{
|
||||
value: "breadcrumb",
|
||||
label: "Breadcrumb 面包屑"
|
||||
},
|
||||
{
|
||||
value: "dropdown",
|
||||
label: "Dropdown 下拉菜单"
|
||||
},
|
||||
{
|
||||
value: "steps",
|
||||
label: "Steps 步骤条"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "others",
|
||||
label: "Others",
|
||||
children: [
|
||||
{
|
||||
value: "dialog",
|
||||
label: "Dialog 对话框"
|
||||
},
|
||||
{
|
||||
value: "tooltip",
|
||||
label: "Tooltip 文字提示"
|
||||
},
|
||||
{
|
||||
value: "popover",
|
||||
label: "Popover 弹出框"
|
||||
},
|
||||
{
|
||||
value: "card",
|
||||
label: "Card 卡片"
|
||||
},
|
||||
{
|
||||
value: "carousel",
|
||||
label: "Carousel 走马灯"
|
||||
},
|
||||
{
|
||||
value: "collapse",
|
||||
label: "Collapse 折叠面板"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "ziyuan",
|
||||
label: "资源",
|
||||
children: [
|
||||
{
|
||||
value: "axure",
|
||||
label: "Axure Components"
|
||||
},
|
||||
{
|
||||
value: "sketch",
|
||||
label: "Sketch Templates"
|
||||
},
|
||||
{
|
||||
value: "jiaohu",
|
||||
label: "组件交互文档"
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
options.list = list;
|
||||
options.copyTimes = 1000;
|
||||
const mock = mockUtil.buildMock(options);
|
||||
mock.push({
|
||||
path: "/select/cascadeData",
|
||||
method: "get",
|
||||
handle(req) {
|
||||
return {
|
||||
code: 0,
|
||||
msg: "success",
|
||||
data: dictData
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
export default mock;
|
||||
@@ -0,0 +1,42 @@
|
||||
import { requestForMock } from "/src/api/service";
|
||||
const request = requestForMock;
|
||||
const apiPrefix = "/mock/FormGroup";
|
||||
export function GetList(query) {
|
||||
return request({
|
||||
url: apiPrefix + "/page",
|
||||
method: "get",
|
||||
data: query
|
||||
});
|
||||
}
|
||||
|
||||
export function AddObj(obj) {
|
||||
return request({
|
||||
url: apiPrefix + "/add",
|
||||
method: "post",
|
||||
data: obj
|
||||
});
|
||||
}
|
||||
|
||||
export function UpdateObj(obj) {
|
||||
return request({
|
||||
url: apiPrefix + "/update",
|
||||
method: "post",
|
||||
data: obj
|
||||
});
|
||||
}
|
||||
|
||||
export function DelObj(id) {
|
||||
return request({
|
||||
url: apiPrefix + "/delete",
|
||||
method: "post",
|
||||
params: { id }
|
||||
});
|
||||
}
|
||||
|
||||
export function GetObj(id) {
|
||||
return request({
|
||||
url: apiPrefix + "/info",
|
||||
method: "get",
|
||||
params: { id }
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,143 @@
|
||||
import * as api from "./api";
|
||||
export default function ({ expose }) {
|
||||
const pageRequest = async (query) => {
|
||||
return await api.GetList(query);
|
||||
};
|
||||
const editRequest = async ({ form, row }) => {
|
||||
form.id = row.id;
|
||||
return await api.UpdateObj(form);
|
||||
};
|
||||
const delRequest = async ({ row }) => {
|
||||
return await api.DelObj(row.id);
|
||||
};
|
||||
|
||||
const addRequest = async ({ form }) => {
|
||||
return await api.AddObj(form);
|
||||
};
|
||||
return {
|
||||
crudOptions: {
|
||||
request: {
|
||||
pageRequest,
|
||||
addRequest,
|
||||
editRequest,
|
||||
delRequest
|
||||
},
|
||||
columns: {
|
||||
title: {
|
||||
title: "商品标题",
|
||||
type: "text"
|
||||
},
|
||||
code: {
|
||||
title: "商品代码",
|
||||
search: { show: true },
|
||||
type: "text"
|
||||
},
|
||||
images: {
|
||||
title: "图片",
|
||||
type: "image-uploader"
|
||||
},
|
||||
price: {
|
||||
title: "价格",
|
||||
sortable: true
|
||||
},
|
||||
store: {
|
||||
title: "库存",
|
||||
type: "number"
|
||||
},
|
||||
intro: {
|
||||
title: "简介",
|
||||
type: "textarea",
|
||||
column: {
|
||||
ellipsis: true,
|
||||
showTitle: true
|
||||
}
|
||||
},
|
||||
content: {
|
||||
title: "详情",
|
||||
type: "editor-ueditor",
|
||||
form: {
|
||||
labelWidth: "0px"
|
||||
}
|
||||
},
|
||||
slotField: {
|
||||
title: "插槽示例",
|
||||
type: "text"
|
||||
},
|
||||
product: {
|
||||
title: "未分组字段",
|
||||
type: "text",
|
||||
form: {
|
||||
col: { span: 24 },
|
||||
helper: "未分组的字段会显示在这里，一般来说你应该把所有字段都编入分组内"
|
||||
}
|
||||
},
|
||||
hidden1: {
|
||||
title: "隐藏1",
|
||||
type: "text",
|
||||
form: {
|
||||
show: false
|
||||
},
|
||||
column: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
hidden2: {
|
||||
title: "隐藏2",
|
||||
type: "text",
|
||||
form: {
|
||||
show: false
|
||||
},
|
||||
column: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
},
|
||||
form: {
|
||||
group: {
|
||||
type: "collapse", // tab
|
||||
accordion: true, //手风琴模式
|
||||
groups: {
|
||||
base: {
|
||||
slots: {
|
||||
//自定义header
|
||||
header: () => {
|
||||
return (
|
||||
<span style={"color:green"}>
|
||||
商品基础
|
||||
<CheckOutlined style={"margin-left:10px;"} />
|
||||
</span>
|
||||
);
|
||||
}
|
||||
},
|
||||
columns: ["code", "title", "images", "invalidKey"]
|
||||
},
|
||||
price: {
|
||||
header: "库存价格",
|
||||
columns: ["store", "price"]
|
||||
},
|
||||
info: {
|
||||
header: "详情",
|
||||
collapsed: true, //默认折叠
|
||||
columns: ["intro", "content", "slotField"]
|
||||
},
|
||||
hiddenTest: {
|
||||
header: "分组隐藏测试", //如果组里面的所有的组件都配置了隐藏,则本分组隐藏
|
||||
columns: ["hidden1", "hidden2"]
|
||||
}
|
||||
// custom: {
|
||||
// title: "自定义",
|
||||
// collapsed: false,
|
||||
// show(context) {
|
||||
// console.log("custom context", context);
|
||||
// return context.mode === "view";
|
||||
// },
|
||||
// disabled: false,
|
||||
// icon: "el-icon-warning-outline",
|
||||
// columns: ["custom", "custom2"]
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<fs-page>
|
||||
<fs-crud ref="crudRef" v-bind="crudBinding">
|
||||
<template #form_slotField="scope">
|
||||
<a-tooltip title="这是一个字段插槽示例">
|
||||
<a-input v-model:value="scope.form.slotField" placeholder="我是插槽字段"
|
||||
/></a-tooltip>
|
||||
</template>
|
||||
</fs-crud>
|
||||
</fs-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent, ref, onMounted } from "vue";
|
||||
import { useCrud } from "@fast-crud/fast-crud";
|
||||
import createCrudOptions from "./crud";
|
||||
import { useExpose } from "@fast-crud/fast-crud";
|
||||
export default defineComponent({
|
||||
name: "FormGroup",
|
||||
setup() {
|
||||
// crud组件的ref
|
||||
const crudRef = ref();
|
||||
// crud 配置的ref
|
||||
const crudBinding = ref();
|
||||
// 暴露的方法
|
||||
const { expose } = useExpose({ crudRef, crudBinding });
|
||||
// 你的crud配置
|
||||
const { crudOptions } = createCrudOptions({ expose });
|
||||
// 初始化crud配置
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
|
||||
const { resetCrudOptions } = useCrud({ expose, crudOptions });
|
||||
// 你可以调用此方法，重新初始化crud配置
|
||||
// resetCrudOptions(options)
|
||||
|
||||
// 页面打开后获取列表数据
|
||||
onMounted(() => {
|
||||
expose.doRefresh();
|
||||
});
|
||||
|
||||
return {
|
||||
crudBinding,
|
||||
crudRef
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,303 @@
|
||||
import mockUtil from "/src/mock/base";
|
||||
|
||||
const options = {
|
||||
name: "FormGroup",
|
||||
idGenerator: 0
|
||||
};
|
||||
const list = [
|
||||
{
|
||||
title: "无线充电宝",
|
||||
code: "100001",
|
||||
images: "https://img0.bdstatic.com/static/searchdetail/img/logo-2X_0c4ef02.png",
|
||||
price: 100,
|
||||
stock: 99,
|
||||
intro: "30000毫安超大容量移动电源充电宝官方原装正品专用便携",
|
||||
content: ""
|
||||
}
|
||||
];
|
||||
|
||||
const dictData = [
|
||||
{
|
||||
value: "zhinan",
|
||||
label: "指南",
|
||||
children: [
|
||||
{
|
||||
value: "shejiyuanze",
|
||||
label: "设计原则",
|
||||
children: [
|
||||
{
|
||||
value: "yizhi",
|
||||
label: "一致"
|
||||
},
|
||||
{
|
||||
value: "fankui",
|
||||
label: "反馈"
|
||||
},
|
||||
{
|
||||
value: "xiaolv",
|
||||
label: "效率"
|
||||
},
|
||||
{
|
||||
value: "kekong",
|
||||
label: "可控"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "daohang",
|
||||
label: "导航",
|
||||
children: [
|
||||
{
|
||||
value: "cexiangdaohang",
|
||||
label: "侧向导航"
|
||||
},
|
||||
{
|
||||
value: "dingbudaohang",
|
||||
label: "顶部导航"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "zujian",
|
||||
label: "组件",
|
||||
children: [
|
||||
{
|
||||
value: "basic",
|
||||
label: "Basic",
|
||||
children: [
|
||||
{
|
||||
value: "layout",
|
||||
label: "Layout 布局"
|
||||
},
|
||||
{
|
||||
value: "color",
|
||||
label: "Color 色彩"
|
||||
},
|
||||
{
|
||||
value: "typography",
|
||||
label: "Typography 字体"
|
||||
},
|
||||
{
|
||||
value: "icon",
|
||||
label: "Icon 图标"
|
||||
},
|
||||
{
|
||||
value: "button",
|
||||
label: "Button 按钮"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "form",
|
||||
label: "Form",
|
||||
children: [
|
||||
{
|
||||
value: "radio",
|
||||
label: "Radio 单选框"
|
||||
},
|
||||
{
|
||||
value: "checkbox",
|
||||
label: "Checkbox 多选框"
|
||||
},
|
||||
{
|
||||
value: "input",
|
||||
label: "Input 输入框"
|
||||
},
|
||||
{
|
||||
value: "input-number",
|
||||
label: "InputNumber 计数器"
|
||||
},
|
||||
{
|
||||
value: "select",
|
||||
label: "Select 选择器"
|
||||
},
|
||||
{
|
||||
value: "cascader",
|
||||
label: "Cascader 级联选择器"
|
||||
},
|
||||
{
|
||||
value: "switch",
|
||||
label: "Switch 开关"
|
||||
},
|
||||
{
|
||||
value: "slider",
|
||||
label: "Slider 滑块"
|
||||
},
|
||||
{
|
||||
value: "time-picker",
|
||||
label: "TimePicker 时间选择器"
|
||||
},
|
||||
{
|
||||
value: "date-picker",
|
||||
label: "DatePicker 日期选择器"
|
||||
},
|
||||
{
|
||||
value: "datetime-picker",
|
||||
label: "DateTimePicker 日期时间选择器"
|
||||
},
|
||||
{
|
||||
value: "upload",
|
||||
label: "Upload 上传"
|
||||
},
|
||||
{
|
||||
value: "rate",
|
||||
label: "Rate 评分"
|
||||
},
|
||||
{
|
||||
value: "form",
|
||||
label: "Form 表单"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "data",
|
||||
label: "Data",
|
||||
children: [
|
||||
{
|
||||
value: "table",
|
||||
label: "Table 表格"
|
||||
},
|
||||
{
|
||||
value: "tag",
|
||||
label: "Tag 标签"
|
||||
},
|
||||
{
|
||||
value: "progress",
|
||||
label: "Progress 进度条"
|
||||
},
|
||||
{
|
||||
value: "tree",
|
||||
label: "Tree 树形控件"
|
||||
},
|
||||
{
|
||||
value: "pagination",
|
||||
label: "Pagination 分页"
|
||||
},
|
||||
{
|
||||
value: "badge",
|
||||
label: "Badge 标记"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "notice",
|
||||
label: "Notice",
|
||||
children: [
|
||||
{
|
||||
value: "alert",
|
||||
label: "Alert 警告"
|
||||
},
|
||||
{
|
||||
value: "loading",
|
||||
label: "Loading 加载"
|
||||
},
|
||||
{
|
||||
value: "message",
|
||||
label: "Message 消息提示"
|
||||
},
|
||||
{
|
||||
value: "message-box",
|
||||
label: "MessageBox 弹框"
|
||||
},
|
||||
{
|
||||
value: "notification",
|
||||
label: "Notification 通知"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "navigation",
|
||||
label: "Navigation",
|
||||
children: [
|
||||
{
|
||||
value: "menu",
|
||||
label: "NavMenu 导航菜单"
|
||||
},
|
||||
{
|
||||
value: "tabs",
|
||||
label: "Tabs 标签页"
|
||||
},
|
||||
{
|
||||
value: "breadcrumb",
|
||||
label: "Breadcrumb 面包屑"
|
||||
},
|
||||
{
|
||||
value: "dropdown",
|
||||
label: "Dropdown 下拉菜单"
|
||||
},
|
||||
{
|
||||
value: "steps",
|
||||
label: "Steps 步骤条"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "others",
|
||||
label: "Others",
|
||||
children: [
|
||||
{
|
||||
value: "dialog",
|
||||
label: "Dialog 对话框"
|
||||
},
|
||||
{
|
||||
value: "tooltip",
|
||||
label: "Tooltip 文字提示"
|
||||
},
|
||||
{
|
||||
value: "popover",
|
||||
label: "Popover 弹出框"
|
||||
},
|
||||
{
|
||||
value: "card",
|
||||
label: "Card 卡片"
|
||||
},
|
||||
{
|
||||
value: "carousel",
|
||||
label: "Carousel 走马灯"
|
||||
},
|
||||
{
|
||||
value: "collapse",
|
||||
label: "Collapse 折叠面板"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "ziyuan",
|
||||
label: "资源",
|
||||
children: [
|
||||
{
|
||||
value: "axure",
|
||||
label: "Axure Components"
|
||||
},
|
||||
{
|
||||
value: "sketch",
|
||||
label: "Sketch Templates"
|
||||
},
|
||||
{
|
||||
value: "jiaohu",
|
||||
label: "组件交互文档"
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
options.list = list;
|
||||
options.copyTimes = 1000;
|
||||
const mock = mockUtil.buildMock(options);
|
||||
mock.push({
|
||||
path: "/select/cascadeData",
|
||||
method: "get",
|
||||
handle(req) {
|
||||
return {
|
||||
code: 0,
|
||||
msg: "success",
|
||||
data: dictData
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
export default mock;
|
||||
@@ -0,0 +1,42 @@
|
||||
import { requestForMock } from "/src/api/service";
|
||||
const request = requestForMock;
|
||||
const apiPrefix = "/mock/FormHelper";
|
||||
export function GetList(query) {
|
||||
return request({
|
||||
url: apiPrefix + "/page",
|
||||
method: "get",
|
||||
data: query
|
||||
});
|
||||
}
|
||||
|
||||
export function AddObj(obj) {
|
||||
return request({
|
||||
url: apiPrefix + "/add",
|
||||
method: "post",
|
||||
data: obj
|
||||
});
|
||||
}
|
||||
|
||||
export function UpdateObj(obj) {
|
||||
return request({
|
||||
url: apiPrefix + "/update",
|
||||
method: "post",
|
||||
data: obj
|
||||
});
|
||||
}
|
||||
|
||||
export function DelObj(id) {
|
||||
return request({
|
||||
url: apiPrefix + "/delete",
|
||||
method: "post",
|
||||
params: { id }
|
||||
});
|
||||
}
|
||||
|
||||
export function GetObj(id) {
|
||||
return request({
|
||||
url: apiPrefix + "/info",
|
||||
method: "get",
|
||||
params: { id }
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
import * as api from "./api";
|
||||
export default function ({ expose }) {
|
||||
const pageRequest = async (query) => {
|
||||
return await api.GetList(query);
|
||||
};
|
||||
const editRequest = async ({ form, row }) => {
|
||||
form.id = row.id;
|
||||
return await api.UpdateObj(form);
|
||||
};
|
||||
const delRequest = async ({ row }) => {
|
||||
return await api.DelObj(row.id);
|
||||
};
|
||||
|
||||
const addRequest = async ({ form }) => {
|
||||
return await api.AddObj(form);
|
||||
};
|
||||
return {
|
||||
crudOptions: {
|
||||
request: {
|
||||
pageRequest,
|
||||
addRequest,
|
||||
editRequest,
|
||||
delRequest
|
||||
},
|
||||
form: {
|
||||
labelCol: { span: 6 },
|
||||
wrapperCol: { span: 16 },
|
||||
helper: {
|
||||
// position: "label" // helper的展示位置全局配置
|
||||
// tooltip:{}
|
||||
}
|
||||
},
|
||||
columns: {
|
||||
name: {
|
||||
title: "最简单",
|
||||
type: "text",
|
||||
form: {
|
||||
helper: "最简单的helper\n换行测试"
|
||||
}
|
||||
},
|
||||
age: {
|
||||
title: "jsx",
|
||||
type: "text",
|
||||
form: {
|
||||
helper: {
|
||||
render() {
|
||||
return <div style={"color:blue"}>jsx自定义render</div>;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
status: {
|
||||
title: "显示在label",
|
||||
type: "text",
|
||||
form: {
|
||||
rules: [{ required: true, message: "此项必填" }],
|
||||
helper: {
|
||||
position: "label",
|
||||
tooltip: {
|
||||
placement: "topLeft"
|
||||
},
|
||||
text: "在label通过tooltip方式显示的helper\n换行测试"
|
||||
// render() {
|
||||
// return <div style={"color:red"}>在label通过tooltip方式显示的helper</div>;
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<fs-page>
|
||||
<fs-crud ref="crudRef" v-bind="crudBinding">
|
||||
<template #actionbar-right>
|
||||
<a-alert
|
||||
class="ml-1"
|
||||
type="info"
|
||||
message="在表单字段下方可以显示该字段的帮助说明，点击右边编辑按钮查看示例效果"
|
||||
/>
|
||||
</template>
|
||||
</fs-crud>
|
||||
</fs-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent, ref, onMounted } from "vue";
|
||||
import { useCrud } from "@fast-crud/fast-crud";
|
||||
import createCrudOptions from "./crud";
|
||||
import { useExpose } from "@fast-crud/fast-crud";
|
||||
export default defineComponent({
|
||||
name: "FormValidation",
|
||||
setup() {
|
||||
// crud组件的ref
|
||||
const crudRef = ref();
|
||||
// crud 配置的ref
|
||||
const crudBinding = ref();
|
||||
// 暴露的方法
|
||||
const { expose } = useExpose({ crudRef, crudBinding });
|
||||
// 你的crud配置
|
||||
const { crudOptions } = createCrudOptions({ expose });
|
||||
// 初始化crud配置
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
|
||||
const { resetCrudOptions } = useCrud({ expose, crudOptions });
|
||||
// 你可以调用此方法，重新初始化crud配置
|
||||
// resetCrudOptions(options)
|
||||
|
||||
// 页面打开后获取列表数据
|
||||
onMounted(() => {
|
||||
expose.doRefresh();
|
||||
});
|
||||
|
||||
return {
|
||||
crudBinding,
|
||||
crudRef
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,310 @@
|
||||
import mockUtil from "/src/mock/base";
|
||||
|
||||
const options = {
|
||||
name: "FormHelper",
|
||||
idGenerator: 0
|
||||
};
|
||||
const list = [
|
||||
{
|
||||
name: "王小虎",
|
||||
age: 15,
|
||||
password: "",
|
||||
status: "2",
|
||||
url: "https://baidu.com"
|
||||
},
|
||||
{
|
||||
name: "张三",
|
||||
age: 18,
|
||||
password: "",
|
||||
url: "https://baidu.com"
|
||||
},
|
||||
{
|
||||
status: "2"
|
||||
}
|
||||
];
|
||||
|
||||
const dictData = [
|
||||
{
|
||||
value: "zhinan",
|
||||
label: "指南",
|
||||
children: [
|
||||
{
|
||||
value: "shejiyuanze",
|
||||
label: "设计原则",
|
||||
children: [
|
||||
{
|
||||
value: "yizhi",
|
||||
label: "一致"
|
||||
},
|
||||
{
|
||||
value: "fankui",
|
||||
label: "反馈"
|
||||
},
|
||||
{
|
||||
value: "xiaolv",
|
||||
label: "效率"
|
||||
},
|
||||
{
|
||||
value: "kekong",
|
||||
label: "可控"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "daohang",
|
||||
label: "导航",
|
||||
children: [
|
||||
{
|
||||
value: "cexiangdaohang",
|
||||
label: "侧向导航"
|
||||
},
|
||||
{
|
||||
value: "dingbudaohang",
|
||||
label: "顶部导航"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "zujian",
|
||||
label: "组件",
|
||||
children: [
|
||||
{
|
||||
value: "basic",
|
||||
label: "Basic",
|
||||
children: [
|
||||
{
|
||||
value: "layout",
|
||||
label: "Layout 布局"
|
||||
},
|
||||
{
|
||||
value: "color",
|
||||
label: "Color 色彩"
|
||||
},
|
||||
{
|
||||
value: "typography",
|
||||
label: "Typography 字体"
|
||||
},
|
||||
{
|
||||
value: "icon",
|
||||
label: "Icon 图标"
|
||||
},
|
||||
{
|
||||
value: "button",
|
||||
label: "Button 按钮"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "form",
|
||||
label: "Form",
|
||||
children: [
|
||||
{
|
||||
value: "radio",
|
||||
label: "Radio 单选框"
|
||||
},
|
||||
{
|
||||
value: "checkbox",
|
||||
label: "Checkbox 多选框"
|
||||
},
|
||||
{
|
||||
value: "input",
|
||||
label: "Input 输入框"
|
||||
},
|
||||
{
|
||||
value: "input-number",
|
||||
label: "InputNumber 计数器"
|
||||
},
|
||||
{
|
||||
value: "select",
|
||||
label: "Select 选择器"
|
||||
},
|
||||
{
|
||||
value: "cascader",
|
||||
label: "Cascader 级联选择器"
|
||||
},
|
||||
{
|
||||
value: "switch",
|
||||
label: "Switch 开关"
|
||||
},
|
||||
{
|
||||
value: "slider",
|
||||
label: "Slider 滑块"
|
||||
},
|
||||
{
|
||||
value: "time-picker",
|
||||
label: "TimePicker 时间选择器"
|
||||
},
|
||||
{
|
||||
value: "date-picker",
|
||||
label: "DatePicker 日期选择器"
|
||||
},
|
||||
{
|
||||
value: "datetime-picker",
|
||||
label: "DateTimePicker 日期时间选择器"
|
||||
},
|
||||
{
|
||||
value: "upload",
|
||||
label: "Upload 上传"
|
||||
},
|
||||
{
|
||||
value: "rate",
|
||||
label: "Rate 评分"
|
||||
},
|
||||
{
|
||||
value: "form",
|
||||
label: "Form 表单"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "data",
|
||||
label: "Data",
|
||||
children: [
|
||||
{
|
||||
value: "table",
|
||||
label: "Table 表格"
|
||||
},
|
||||
{
|
||||
value: "tag",
|
||||
label: "Tag 标签"
|
||||
},
|
||||
{
|
||||
value: "progress",
|
||||
label: "Progress 进度条"
|
||||
},
|
||||
{
|
||||
value: "tree",
|
||||
label: "Tree 树形控件"
|
||||
},
|
||||
{
|
||||
value: "pagination",
|
||||
label: "Pagination 分页"
|
||||
},
|
||||
{
|
||||
value: "badge",
|
||||
label: "Badge 标记"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "notice",
|
||||
label: "Notice",
|
||||
children: [
|
||||
{
|
||||
value: "alert",
|
||||
label: "Alert 警告"
|
||||
},
|
||||
{
|
||||
value: "loading",
|
||||
label: "Loading 加载"
|
||||
},
|
||||
{
|
||||
value: "message",
|
||||
label: "Message 消息提示"
|
||||
},
|
||||
{
|
||||
value: "message-box",
|
||||
label: "MessageBox 弹框"
|
||||
},
|
||||
{
|
||||
value: "notification",
|
||||
label: "Notification 通知"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "navigation",
|
||||
label: "Navigation",
|
||||
children: [
|
||||
{
|
||||
value: "menu",
|
||||
label: "NavMenu 导航菜单"
|
||||
},
|
||||
{
|
||||
value: "tabs",
|
||||
label: "Tabs 标签页"
|
||||
},
|
||||
{
|
||||
value: "breadcrumb",
|
||||
label: "Breadcrumb 面包屑"
|
||||
},
|
||||
{
|
||||
value: "dropdown",
|
||||
label: "Dropdown 下拉菜单"
|
||||
},
|
||||
{
|
||||
value: "steps",
|
||||
label: "Steps 步骤条"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "others",
|
||||
label: "Others",
|
||||
children: [
|
||||
{
|
||||
value: "dialog",
|
||||
label: "Dialog 对话框"
|
||||
},
|
||||
{
|
||||
value: "tooltip",
|
||||
label: "Tooltip 文字提示"
|
||||
},
|
||||
{
|
||||
value: "popover",
|
||||
label: "Popover 弹出框"
|
||||
},
|
||||
{
|
||||
value: "card",
|
||||
label: "Card 卡片"
|
||||
},
|
||||
{
|
||||
value: "carousel",
|
||||
label: "Carousel 走马灯"
|
||||
},
|
||||
{
|
||||
value: "collapse",
|
||||
label: "Collapse 折叠面板"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "ziyuan",
|
||||
label: "资源",
|
||||
children: [
|
||||
{
|
||||
value: "axure",
|
||||
label: "Axure Components"
|
||||
},
|
||||
{
|
||||
value: "sketch",
|
||||
label: "Sketch Templates"
|
||||
},
|
||||
{
|
||||
value: "jiaohu",
|
||||
label: "组件交互文档"
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
options.list = list;
|
||||
options.copyTimes = 1000;
|
||||
const mock = mockUtil.buildMock(options);
|
||||
mock.push({
|
||||
path: "/select/cascadeData",
|
||||
method: "get",
|
||||
handle(req) {
|
||||
return {
|
||||
code: 0,
|
||||
msg: "success",
|
||||
data: dictData
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
export default mock;
|
||||
@@ -0,0 +1,59 @@
|
||||
export default function ({ expose }) {
|
||||
return {
|
||||
crudOptions: {
|
||||
form: {
|
||||
wrapper: {
|
||||
onClosed(e) {
|
||||
console.log("onClosed", e);
|
||||
},
|
||||
onOpened(e) {
|
||||
console.log("onOpened", e);
|
||||
}
|
||||
},
|
||||
labelCol: { span: 6 },
|
||||
wrapperCol: { span: 16 },
|
||||
helper: {
|
||||
// position: "label" // helper的展示位置全局配置
|
||||
// tooltip:{}
|
||||
}
|
||||
},
|
||||
columns: {
|
||||
name: {
|
||||
title: "最简单",
|
||||
type: "text",
|
||||
form: {
|
||||
helper: "最简单的helper"
|
||||
}
|
||||
},
|
||||
age: {
|
||||
title: "jsx",
|
||||
type: "text",
|
||||
form: {
|
||||
helper: {
|
||||
render() {
|
||||
return <div style={"color:blue"}>jsx自定义render</div>;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
status: {
|
||||
title: "显示在label",
|
||||
type: "text",
|
||||
form: {
|
||||
rules: [{ required: true, message: "此项必填" }],
|
||||
helper: {
|
||||
position: "label",
|
||||
tooltip: {
|
||||
placement: "topLeft"
|
||||
},
|
||||
text: "在label通过tooltip方式显示的helper"
|
||||
// render() {
|
||||
// return <div style={"color:red"}>在label通过tooltip方式显示的helper</div>;
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,215 @@
|
||||
<template>
|
||||
<fs-page>
|
||||
<a-row :gutter="10">
|
||||
<a-col :span="12">
|
||||
<a-card title="直接显示表单">
|
||||
<fs-form ref="formRef" v-bind="formOptions"> </fs-form>
|
||||
<div style="margin-top: 10px">
|
||||
<a-button @click="formSubmit">提交表单</a-button>
|
||||
<a-button @click="formReset">重置表单</a-button>
|
||||
<a-button class="ml-10" @click="setFormDataTest">setFormData</a-button>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col span="12">
|
||||
<a-card title="打开表单对话框">
|
||||
<a-button @click="openFormWrapper">打开表单对话框</a-button>
|
||||
<fs-form-wrapper ref="formWrapperRef" v-bind="formWrapperOptions" />
|
||||
</a-card>
|
||||
|
||||
<a-card title="打开表单对话框（复用crudOptions）">
|
||||
<a-button @click="openFormWrapper2">打开表单对话框</a-button>
|
||||
<fs-form-wrapper ref="formWrapper2Ref" v-bind="formWrapper2Options" />
|
||||
</a-card>
|
||||
|
||||
<a-card class="mt-10" title="打开表单对话框【复用crudBinding】">
|
||||
<a-button @click="openFormWrapper2">打开表单对话框</a-button>
|
||||
<fs-form-wrapper ref="formWrapperRef2" v-bind="formWrapperOptions2" />
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</fs-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent, ref } from "vue";
|
||||
import { message } from "ant-design-vue";
|
||||
import { useCrud, useExpose, useColumns } from "@fast-crud/fast-crud";
|
||||
import createCrudOptions from "./crud";
|
||||
|
||||
function createFormOptionsFromCrudOptions() {
|
||||
const { buildFormOptions } = useColumns();
|
||||
//可以直接复用crud.js
|
||||
const { crudOptions } = createCrudOptions({});
|
||||
return buildFormOptions(crudOptions);
|
||||
}
|
||||
|
||||
function createFormOptions() {
|
||||
// 自定义表单配置
|
||||
const { buildFormOptions } = useColumns();
|
||||
//使用crudOptions结构来构建自定义表单配置
|
||||
return buildFormOptions({
|
||||
columns: {
|
||||
customField: {
|
||||
title: "新表单字段",
|
||||
form: {
|
||||
component: {
|
||||
name: "a-input",
|
||||
vModel: "value",
|
||||
allowClear: true
|
||||
},
|
||||
valueBuilder(context) {
|
||||
console.log("value builder :", context);
|
||||
},
|
||||
rules: [{ required: true, message: "此项必填" }]
|
||||
}
|
||||
},
|
||||
groupField: {
|
||||
title: "分组字段",
|
||||
form: {
|
||||
component: {
|
||||
name: "a-input",
|
||||
vModel: "value",
|
||||
allowClear: true
|
||||
},
|
||||
rules: [{ required: true, message: "此项必填" }]
|
||||
}
|
||||
}
|
||||
},
|
||||
form: {
|
||||
labelCol: { span: 6 },
|
||||
group: {
|
||||
groups: {
|
||||
testGroupName: {
|
||||
header: "分组测试",
|
||||
columns: ["groupField"]
|
||||
}
|
||||
}
|
||||
},
|
||||
doSubmit({ form }) {
|
||||
console.log("form submit:", form);
|
||||
message.info("自定义表单提交:" + JSON.stringify(form));
|
||||
message.success("保存成功");
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
/**
|
||||
* 表单直接独立使用
|
||||
* */
|
||||
function useFormDirect() {
|
||||
const formRef = ref();
|
||||
const formOptions = ref();
|
||||
formOptions.value = createFormOptions();
|
||||
formOptions.value.initialForm = { customField: "初始值" };
|
||||
function formSubmit() {
|
||||
formRef.value.submit();
|
||||
}
|
||||
function setFormDataTest() {
|
||||
formRef.value.setFormData({
|
||||
customField: "test"
|
||||
});
|
||||
}
|
||||
function formReset() {
|
||||
formRef.value.reset();
|
||||
}
|
||||
return {
|
||||
formOptions,
|
||||
formRef,
|
||||
formSubmit,
|
||||
formReset,
|
||||
setFormDataTest
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 表单对话框独立使用
|
||||
* @returns {{formWrapperRef, formWrapperOptions, openFormWrapper: openFormWrapper}}
|
||||
*/
|
||||
function useFormWrapper() {
|
||||
const formWrapperRef = ref();
|
||||
const formWrapperOptions = ref();
|
||||
formWrapperOptions.value = createFormOptions();
|
||||
formWrapperOptions.value.initialForm = { customField: "初始值" };
|
||||
function openFormWrapper() {
|
||||
formWrapperRef.value.open(formWrapperOptions.value);
|
||||
}
|
||||
return {
|
||||
formWrapperRef,
|
||||
openFormWrapper,
|
||||
formWrapperOptions
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 直接使用crudBinding的表单配置
|
||||
* @returns {{formWrapperRef2, openFormWrapper2: openFormWrapper2, formWrapperOptions2}}
|
||||
*/
|
||||
function useCrudBindingForm() {
|
||||
const formWrapperRef2 = ref();
|
||||
|
||||
// crud组件的ref
|
||||
const crudRef = ref();
|
||||
// crud 配置的ref
|
||||
const crudBinding = ref();
|
||||
// 暴露的方法
|
||||
const { expose } = useExpose({ crudRef, crudBinding });
|
||||
// 你的crud配置
|
||||
const { crudOptions } = createCrudOptions({ expose });
|
||||
// 初始化crud配置
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
|
||||
const { resetCrudOptions } = useCrud({ expose, crudOptions });
|
||||
// 你可以调用此方法，重新初始化crud配置
|
||||
// resetCrudOptions(options)
|
||||
|
||||
// 以下代码实际上== crudBinding.addForm 或者 crudBinding.editForm
|
||||
const formWrapperOptions2 = ref({
|
||||
...crudBinding.value.addForm, // 你也可以用editForm
|
||||
doSubmit({ form }) {
|
||||
//覆盖提交方法
|
||||
console.log("form submit:", form);
|
||||
message.info("自定义表单提交:" + JSON.stringify(form));
|
||||
message.warn("抛出异常可以阻止表单关闭");
|
||||
throw new Error("抛出异常可以阻止表单关闭");
|
||||
},
|
||||
initialForm: { name: "初始值" }
|
||||
});
|
||||
function openFormWrapper2() {
|
||||
formWrapperRef2.value.open(formWrapperOptions2.value);
|
||||
}
|
||||
return {
|
||||
formWrapperRef2,
|
||||
openFormWrapper2,
|
||||
formWrapperOptions2
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 复用crudOptions 创建表单
|
||||
*/
|
||||
function useCrudOptions() {
|
||||
const formWrapper2Ref = ref();
|
||||
const formWrapper2Options = ref();
|
||||
formWrapper2Options.value = createFormOptionsFromCrudOptions();
|
||||
function openFormWrapper2() {
|
||||
formWrapper2Ref.value.open(formWrapper2Options.value);
|
||||
}
|
||||
return {
|
||||
formWrapper2Ref,
|
||||
openFormWrapper2,
|
||||
formWrapper2Options
|
||||
};
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: "FormIndependent",
|
||||
setup() {
|
||||
return {
|
||||
...useFormDirect(),
|
||||
...useFormWrapper(),
|
||||
...useCrudBindingForm(),
|
||||
...useCrudOptions()
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,42 @@
|
||||
import { requestForMock } from "/src/api/service";
|
||||
const request = requestForMock;
|
||||
const apiPrefix = "/mock/FormInner";
|
||||
export function GetList(query) {
|
||||
return request({
|
||||
url: apiPrefix + "/page",
|
||||
method: "get",
|
||||
data: query
|
||||
});
|
||||
}
|
||||
|
||||
export function AddObj(obj) {
|
||||
return request({
|
||||
url: apiPrefix + "/add",
|
||||
method: "post",
|
||||
data: obj
|
||||
});
|
||||
}
|
||||
|
||||
export function UpdateObj(obj) {
|
||||
return request({
|
||||
url: apiPrefix + "/update",
|
||||
method: "post",
|
||||
data: obj
|
||||
});
|
||||
}
|
||||
|
||||
export function DelObj(id) {
|
||||
return request({
|
||||
url: apiPrefix + "/delete",
|
||||
method: "post",
|
||||
params: { id }
|
||||
});
|
||||
}
|
||||
|
||||
export function GetObj(id) {
|
||||
return request({
|
||||
url: apiPrefix + "/info",
|
||||
method: "get",
|
||||
params: { id }
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
import { requestForMock } from "/src/api/service";
|
||||
const request = requestForMock;
|
||||
const apiPrefix = "/mock/FormInnerArea";
|
||||
export function GetList(query) {
|
||||
return request({
|
||||
url: apiPrefix + "/page",
|
||||
method: "get",
|
||||
data: query
|
||||
});
|
||||
}
|
||||
|
||||
export function GetAll(query) {
|
||||
return request({
|
||||
url: apiPrefix + "/all",
|
||||
method: "get",
|
||||
data: query
|
||||
});
|
||||
}
|
||||
|
||||
export function AddObj(obj) {
|
||||
return request({
|
||||
url: apiPrefix + "/add",
|
||||
method: "post",
|
||||
data: obj
|
||||
});
|
||||
}
|
||||
|
||||
export function UpdateObj(obj) {
|
||||
return request({
|
||||
url: apiPrefix + "/update",
|
||||
method: "post",
|
||||
data: obj
|
||||
});
|
||||
}
|
||||
|
||||
export function DelObj(id) {
|
||||
return request({
|
||||
url: apiPrefix + "/delete",
|
||||
method: "post",
|
||||
params: { id }
|
||||
});
|
||||
}
|
||||
|
||||
export function GetObj(id) {
|
||||
return request({
|
||||
url: apiPrefix + "/info",
|
||||
method: "get",
|
||||
params: { id }
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
import * as api from "./api";
|
||||
import { dict, useExpose } from "@fast-crud/fast-crud";
|
||||
export default function ({ expose }) {
|
||||
const pageRequest = async (query) => {
|
||||
return await api.GetList(query);
|
||||
};
|
||||
const editRequest = async ({ form, row }) => {
|
||||
form.id = row.id;
|
||||
return await api.UpdateObj(form);
|
||||
};
|
||||
const delRequest = async ({ row }) => {
|
||||
return await api.DelObj(row.id);
|
||||
};
|
||||
|
||||
const addRequest = async ({ form }) => {
|
||||
return await api.AddObj(form);
|
||||
};
|
||||
return {
|
||||
crudOptions: {
|
||||
request: {
|
||||
pageRequest,
|
||||
addRequest,
|
||||
editRequest,
|
||||
delRequest
|
||||
},
|
||||
form: {
|
||||
wrapper: {
|
||||
inner: true
|
||||
}
|
||||
},
|
||||
columns: {
|
||||
area: {
|
||||
title: "地区",
|
||||
type: "text"
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<fs-page>
|
||||
<fs-crud ref="crudRef" v-bind="crudBinding" />
|
||||
</fs-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent, ref, onMounted } from "vue";
|
||||
import { useCrud } from "@fast-crud/fast-crud";
|
||||
import createCrudOptions from "./crud";
|
||||
import { useExpose } from "@fast-crud/fast-crud";
|
||||
export default defineComponent({
|
||||
name: "FormInner",
|
||||
setup() {
|
||||
// crud组件的ref
|
||||
const crudRef = ref();
|
||||
// crud 配置的ref
|
||||
const crudBinding = ref();
|
||||
// 暴露的方法
|
||||
const { expose } = useExpose({ crudRef, crudBinding });
|
||||
// 你的crud配置
|
||||
const { crudOptions } = createCrudOptions({ expose });
|
||||
// 初始化crud配置
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
|
||||
const { resetCrudOptions } = useCrud({ expose, crudOptions });
|
||||
// 你可以调用此方法，重新初始化crud配置
|
||||
// resetCrudOptions(options)
|
||||
|
||||
// 页面打开后获取列表数据
|
||||
onMounted(() => {
|
||||
expose.doRefresh();
|
||||
});
|
||||
|
||||
return {
|
||||
crudBinding,
|
||||
crudRef
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,24 @@
|
||||
import mockUtil from "/src/mock/base";
|
||||
|
||||
const options = {
|
||||
name: "FormInnerArea",
|
||||
idGenerator: 0
|
||||
};
|
||||
const list = [
|
||||
{
|
||||
area: "深圳"
|
||||
},
|
||||
{
|
||||
area: "北京"
|
||||
},
|
||||
{
|
||||
area: "上海"
|
||||
},
|
||||
{
|
||||
area: "广州"
|
||||
}
|
||||
];
|
||||
options.list = list;
|
||||
options.copyTimes = 1;
|
||||
const mock = mockUtil.buildMock(options);
|
||||
export default mock;
|
||||
@@ -0,0 +1,77 @@
|
||||
import * as api from "./api";
|
||||
import { dict, useExpose } from "@fast-crud/fast-crud";
|
||||
import { useRouter } from "vue-router";
|
||||
import { message } from "ant-design-vue";
|
||||
export default function ({ expose }) {
|
||||
const pageRequest = async (query) => {
|
||||
return await api.GetList(query);
|
||||
};
|
||||
const editRequest = async ({ form, row }) => {
|
||||
form.id = row.id;
|
||||
return await api.UpdateObj(form);
|
||||
};
|
||||
const delRequest = async ({ row }) => {
|
||||
return await api.DelObj(row.id);
|
||||
};
|
||||
|
||||
const addRequest = async ({ form }) => {
|
||||
return await api.AddObj(form);
|
||||
};
|
||||
|
||||
const router = useRouter();
|
||||
const areaDict = dict({
|
||||
value: "id",
|
||||
label: "area",
|
||||
url: "/mock/FormInnerArea/all"
|
||||
});
|
||||
return {
|
||||
crudOptions: {
|
||||
request: {
|
||||
pageRequest,
|
||||
addRequest,
|
||||
editRequest,
|
||||
delRequest
|
||||
},
|
||||
form: {
|
||||
wrapper: {
|
||||
inner: true
|
||||
}
|
||||
},
|
||||
columns: {
|
||||
name: {
|
||||
title: "姓名",
|
||||
type: "text"
|
||||
},
|
||||
age: {
|
||||
title: "年龄",
|
||||
type: "text"
|
||||
},
|
||||
area: {
|
||||
title: "地区",
|
||||
type: "dict-select",
|
||||
dict: areaDict,
|
||||
form: {
|
||||
suffixRender() {
|
||||
function refresh() {
|
||||
message.info("刷新dict");
|
||||
areaDict.reloadDict();
|
||||
}
|
||||
function gotoAddArea() {
|
||||
message.info("调用 router.push 打开地区管理页面");
|
||||
router.push({ path: "/crud/form/inner/area" });
|
||||
}
|
||||
return (
|
||||
<a-button-group style={"padding-left:5px"}>
|
||||
<a-button onClick={refresh}>
|
||||
<SyncOutlined />
|
||||
</a-button>
|
||||
<a-button onClick={gotoAddArea}>添加地区</a-button>
|
||||
</a-button-group>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<fs-page>
|
||||
<fs-crud ref="crudRef" v-bind="crudBinding" />
|
||||
</fs-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent, ref, onMounted } from "vue";
|
||||
import { useCrud } from "@fast-crud/fast-crud";
|
||||
import createCrudOptions from "./crud";
|
||||
import { useExpose } from "@fast-crud/fast-crud";
|
||||
export default defineComponent({
|
||||
name: "FormInner",
|
||||
setup() {
|
||||
// crud组件的ref
|
||||
const crudRef = ref();
|
||||
// crud 配置的ref
|
||||
const crudBinding = ref();
|
||||
// 暴露的方法
|
||||
const { expose } = useExpose({ crudRef, crudBinding });
|
||||
// 你的crud配置
|
||||
const { crudOptions } = createCrudOptions({ expose });
|
||||
// 初始化crud配置
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
|
||||
const { resetCrudOptions } = useCrud({ expose, crudOptions });
|
||||
// 你可以调用此方法，重新初始化crud配置
|
||||
// resetCrudOptions(options)
|
||||
|
||||
// 页面打开后获取列表数据
|
||||
onMounted(() => {
|
||||
expose.doRefresh();
|
||||
});
|
||||
|
||||
return {
|
||||
crudBinding,
|
||||
crudRef
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,25 @@
|
||||
import mockUtil from "/src/mock/base";
|
||||
|
||||
const options = {
|
||||
name: "FormInner",
|
||||
idGenerator: 0
|
||||
};
|
||||
const list = [
|
||||
{
|
||||
name: "王小虎",
|
||||
age: 15,
|
||||
password: "",
|
||||
status: "2",
|
||||
url: "https://baidu.com"
|
||||
},
|
||||
{
|
||||
name: "张三",
|
||||
age: 18,
|
||||
password: "",
|
||||
url: "https://baidu.com"
|
||||
}
|
||||
];
|
||||
options.list = list;
|
||||
options.copyTimes = 1000;
|
||||
const mock = mockUtil.buildMock(options);
|
||||
export default mock;
|
||||
@@ -0,0 +1,42 @@
|
||||
import { requestForMock } from "/src/api/service";
|
||||
const request = requestForMock;
|
||||
const apiPrefix = "/mock/formLayoutFlex";
|
||||
export function GetList(query) {
|
||||
return request({
|
||||
url: apiPrefix + "/page",
|
||||
method: "get",
|
||||
data: query
|
||||
});
|
||||
}
|
||||
|
||||
export function AddObj(obj) {
|
||||
return request({
|
||||
url: apiPrefix + "/add",
|
||||
method: "post",
|
||||
data: obj
|
||||
});
|
||||
}
|
||||
|
||||
export function UpdateObj(obj) {
|
||||
return request({
|
||||
url: apiPrefix + "/update",
|
||||
method: "post",
|
||||
data: obj
|
||||
});
|
||||
}
|
||||
|
||||
export function DelObj(id) {
|
||||
return request({
|
||||
url: apiPrefix + "/delete",
|
||||
method: "post",
|
||||
params: { id }
|
||||
});
|
||||
}
|
||||
|
||||
export function GetObj(id) {
|
||||
return request({
|
||||
url: apiPrefix + "/info",
|
||||
method: "get",
|
||||
params: { id }
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
import * as api from "./api";
|
||||
export default function ({ expose }) {
|
||||
const pageRequest = async (query) => {
|
||||
return await api.GetList(query);
|
||||
};
|
||||
const editRequest = async ({ form, row }) => {
|
||||
form.id = row.id;
|
||||
return await api.UpdateObj(form);
|
||||
};
|
||||
const delRequest = async ({ row }) => {
|
||||
return await api.DelObj(row.id);
|
||||
};
|
||||
|
||||
const addRequest = async ({ form }) => {
|
||||
return await api.AddObj(form);
|
||||
};
|
||||
|
||||
return {
|
||||
crudOptions: {
|
||||
request: {
|
||||
pageRequest,
|
||||
addRequest,
|
||||
editRequest,
|
||||
delRequest
|
||||
},
|
||||
form: {
|
||||
display: "flex",
|
||||
labelCol: {
|
||||
//固定label宽度
|
||||
span: null,
|
||||
style: {
|
||||
width: "120px"
|
||||
}
|
||||
},
|
||||
wrapperCol: {
|
||||
span: null
|
||||
}
|
||||
},
|
||||
columns: {
|
||||
name: {
|
||||
title: "姓名",
|
||||
type: "text",
|
||||
search: { show: true }
|
||||
},
|
||||
order: {
|
||||
title: "字段排序",
|
||||
type: "text",
|
||||
form: {
|
||||
order: 0
|
||||
}
|
||||
},
|
||||
intro: {
|
||||
title: "跨列",
|
||||
search: { show: true },
|
||||
type: ["textarea"],
|
||||
form: {
|
||||
col: { span: 24 }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<fs-page>
|
||||
<template #header>
|
||||
<div class="title">表单布局</div>
|
||||
</template>
|
||||
<fs-crud ref="crudRef" custom-class="page-layout" v-bind="crudBinding"> </fs-crud>
|
||||
</fs-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent, ref, onMounted } from "vue";
|
||||
import { useCrud } from "@fast-crud/fast-crud";
|
||||
import createCrudOptions from "./crud";
|
||||
import { useExpose } from "@fast-crud/fast-crud";
|
||||
export default defineComponent({
|
||||
name: "FormLayoutFlex",
|
||||
setup() {
|
||||
// crud组件的ref
|
||||
const crudRef = ref();
|
||||
// crud 配置的ref
|
||||
const crudBinding = ref();
|
||||
// 暴露的方法
|
||||
const { expose } = useExpose({ crudRef, crudBinding });
|
||||
// 你的crud配置
|
||||
const { crudOptions } = createCrudOptions({ expose });
|
||||
// 初始化crud配置
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
|
||||
const { resetCrudOptions } = useCrud({ expose, crudOptions });
|
||||
// 你可以调用此方法，重新初始化crud配置
|
||||
// resetCrudOptions(options)
|
||||
|
||||
// 页面打开后获取列表数据
|
||||
onMounted(() => {
|
||||
expose.doRefresh();
|
||||
});
|
||||
|
||||
return {
|
||||
crudBinding,
|
||||
crudRef
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,35 @@
|
||||
import mockUtil from "/src/mock/base";
|
||||
const options = {
|
||||
name: "formLayoutFlex",
|
||||
idGenerator: 0
|
||||
};
|
||||
const list = [
|
||||
{
|
||||
name: "王小虎",
|
||||
date: "2016-05-02",
|
||||
status: "0",
|
||||
province: "1",
|
||||
avatar: "https://alicdn.antdv.com/vue.png",
|
||||
show: true,
|
||||
city: "sz",
|
||||
address: "123123",
|
||||
zip: "518000",
|
||||
order: "我在编辑的时候会排到第一个",
|
||||
intro: "王小虎是element-plus的table示例出现的名字"
|
||||
},
|
||||
{
|
||||
name: "张三",
|
||||
date: "2016-05-04",
|
||||
status: "1",
|
||||
province: "2"
|
||||
},
|
||||
{
|
||||
name: "李四",
|
||||
date: 2232433534511,
|
||||
status: "1",
|
||||
province: "0"
|
||||
}
|
||||
];
|
||||
options.list = list;
|
||||
const mock = mockUtil.buildMock(options);
|
||||
export default mock;
|
||||
@@ -0,0 +1,42 @@
|
||||
import { requestForMock } from "/src/api/service";
|
||||
const request = requestForMock;
|
||||
const apiPrefix = "/mock/formLayoutGrid";
|
||||
export function GetList(query) {
|
||||
return request({
|
||||
url: apiPrefix + "/page",
|
||||
method: "get",
|
||||
data: query
|
||||
});
|
||||
}
|
||||
|
||||
export function AddObj(obj) {
|
||||
return request({
|
||||
url: apiPrefix + "/add",
|
||||
method: "post",
|
||||
data: obj
|
||||
});
|
||||
}
|
||||
|
||||
export function UpdateObj(obj) {
|
||||
return request({
|
||||
url: apiPrefix + "/update",
|
||||
method: "post",
|
||||
data: obj
|
||||
});
|
||||
}
|
||||
|
||||
export function DelObj(id) {
|
||||
return request({
|
||||
url: apiPrefix + "/delete",
|
||||
method: "post",
|
||||
params: { id }
|
||||
});
|
||||
}
|
||||
|
||||
export function GetObj(id) {
|
||||
return request({
|
||||
url: apiPrefix + "/info",
|
||||
method: "get",
|
||||
params: { id }
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
import * as api from "./api";
|
||||
export default function ({ expose }) {
|
||||
const pageRequest = async (query) => {
|
||||
return await api.GetList(query);
|
||||
};
|
||||
const editRequest = async ({ form, row }) => {
|
||||
form.id = row.id;
|
||||
return await api.UpdateObj(form);
|
||||
};
|
||||
const delRequest = async ({ row }) => {
|
||||
return await api.DelObj(row.id);
|
||||
};
|
||||
|
||||
const addRequest = async ({ form }) => {
|
||||
return await api.AddObj(form);
|
||||
};
|
||||
|
||||
return {
|
||||
crudOptions: {
|
||||
request: {
|
||||
pageRequest,
|
||||
addRequest,
|
||||
editRequest,
|
||||
delRequest
|
||||
},
|
||||
form: {
|
||||
// 具体可配置请参考 grid 布局： http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
|
||||
display: "grid"
|
||||
},
|
||||
columns: {
|
||||
avatar: {
|
||||
title: "头像上传",
|
||||
type: "avatar-uploader",
|
||||
form: {
|
||||
order: 0,
|
||||
col: {
|
||||
style: { gridRow: "span 3" }
|
||||
},
|
||||
helper: "通过grid布局，可以实现比flex更加规整的排列"
|
||||
}
|
||||
},
|
||||
name: {
|
||||
title: "姓名",
|
||||
type: "text",
|
||||
search: { show: true }
|
||||
},
|
||||
order: {
|
||||
title: "占位演示",
|
||||
type: "text"
|
||||
},
|
||||
place: {
|
||||
title: "占位演示",
|
||||
type: "text"
|
||||
},
|
||||
intro: {
|
||||
title: "跨列",
|
||||
type: "textarea",
|
||||
form: {
|
||||
col: {
|
||||
style: { gridColumn: "span 2" } // grid 模式控制跨列
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<fs-page>
|
||||
<fs-crud ref="crudRef" custom-class="page-layout" v-bind="crudBinding">
|
||||
<template #header-top>
|
||||
<div class="page-header">表单布局</div>
|
||||
</template>
|
||||
</fs-crud>
|
||||
</fs-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent, ref, onMounted } from "vue";
|
||||
import { useCrud } from "@fast-crud/fast-crud";
|
||||
import createCrudOptions from "./crud";
|
||||
import { useExpose } from "@fast-crud/fast-crud";
|
||||
export default defineComponent({
|
||||
name: "FormLayout",
|
||||
setup() {
|
||||
// crud组件的ref
|
||||
const crudRef = ref();
|
||||
// crud 配置的ref
|
||||
const crudBinding = ref();
|
||||
// 暴露的方法
|
||||
const { expose } = useExpose({ crudRef, crudBinding });
|
||||
// 你的crud配置
|
||||
const { crudOptions } = createCrudOptions({ expose });
|
||||
// 初始化crud配置
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
|
||||
const { resetCrudOptions } = useCrud({ expose, crudOptions });
|
||||
// 你可以调用此方法，重新初始化crud配置
|
||||
// resetCrudOptions(options)
|
||||
|
||||
// 页面打开后获取列表数据
|
||||
onMounted(() => {
|
||||
expose.doRefresh();
|
||||
});
|
||||
|
||||
return {
|
||||
crudBinding,
|
||||
crudRef
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<style lang="less">
|
||||
// grid模式下， labelWidth 需要靠样式控制
|
||||
.page-layout {
|
||||
.ant-form-item-label {
|
||||
width: 110px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,34 @@
|
||||
import mockUtil from "/src/mock/base";
|
||||
const options = {
|
||||
name: "formLayoutGrid",
|
||||
idGenerator: 0
|
||||
};
|
||||
const list = [
|
||||
{
|
||||
name: "王小虎",
|
||||
date: "2016-05-02",
|
||||
status: "0",
|
||||
province: "1",
|
||||
avatar: "https://alicdn.antdv.com/vue.png",
|
||||
show: true,
|
||||
city: "sz",
|
||||
address: "123123",
|
||||
zip: "518000",
|
||||
order: "我在编辑的时候会排到第一个",
|
||||
intro: "王小虎是element-plus的table示例出现的名字"
|
||||
},
|
||||
{
|
||||
name: "张三",
|
||||
date: "2016-05-04",
|
||||
status: "1"
|
||||
},
|
||||
{
|
||||
name: "李四",
|
||||
date: 2232433534511,
|
||||
status: "1",
|
||||
province: "0"
|
||||
}
|
||||
];
|
||||
options.list = list;
|
||||
const mock = mockUtil.buildMock(options);
|
||||
export default mock;
|
||||
@@ -0,0 +1,42 @@
|
||||
import { requestForMock } from "/src/api/service";
|
||||
const request = requestForMock;
|
||||
const apiPrefix = "/mock/formLayout";
|
||||
export function GetList(query) {
|
||||
return request({
|
||||
url: apiPrefix + "/page",
|
||||
method: "get",
|
||||
data: query
|
||||
});
|
||||
}
|
||||
|
||||
export function AddObj(obj) {
|
||||
return request({
|
||||
url: apiPrefix + "/add",
|
||||
method: "post",
|
||||
data: obj
|
||||
});
|
||||
}
|
||||
|
||||
export function UpdateObj(obj) {
|
||||
return request({
|
||||
url: apiPrefix + "/update",
|
||||
method: "post",
|
||||
data: obj
|
||||
});
|
||||
}
|
||||
|
||||
export function DelObj(id) {
|
||||
return request({
|
||||
url: apiPrefix + "/delete",
|
||||
method: "post",
|
||||
params: { id }
|
||||
});
|
||||
}
|
||||
|
||||
export function GetObj(id) {
|
||||
return request({
|
||||
url: apiPrefix + "/info",
|
||||
method: "get",
|
||||
params: { id }
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,101 @@
|
||||
import * as api from "./api";
|
||||
import { dict, compute } from "@fast-crud/fast-crud";
|
||||
export default function ({ expose }) {
|
||||
const pageRequest = async (query) => {
|
||||
return await api.GetList(query);
|
||||
};
|
||||
const editRequest = async ({ form, row }) => {
|
||||
form.id = row.id;
|
||||
return await api.UpdateObj(form);
|
||||
};
|
||||
const delRequest = async ({ row }) => {
|
||||
return await api.DelObj(row.id);
|
||||
};
|
||||
|
||||
const addRequest = async ({ form }) => {
|
||||
return await api.AddObj(form);
|
||||
};
|
||||
|
||||
const { getFormData, getFormWrapperRef } = expose;
|
||||
return {
|
||||
crudOptions: {
|
||||
request: {
|
||||
pageRequest,
|
||||
addRequest,
|
||||
editRequest,
|
||||
delRequest
|
||||
},
|
||||
form: {
|
||||
/**
|
||||
* flex模式，通过
|
||||
* grid模式
|
||||
*/
|
||||
display: "flex",
|
||||
wrapper: {
|
||||
customClass: "page-layout",
|
||||
onOpened(context) {
|
||||
getFormWrapperRef().formOptions.display = context.options.initial?.display;
|
||||
console.log("form opened", context, getFormData());
|
||||
}
|
||||
}
|
||||
},
|
||||
columns: {
|
||||
display: {
|
||||
title: "布局",
|
||||
type: "dict-radio",
|
||||
dict: dict({
|
||||
data: [
|
||||
{ value: "flex", label: "flex", color: "blue" },
|
||||
{ value: "grid", label: "grid", color: "green" }
|
||||
]
|
||||
}),
|
||||
search: { show: true, valueChange: null },
|
||||
form: {
|
||||
valueChange(context) {
|
||||
const { value } = context;
|
||||
getFormWrapperRef().formOptions.display = value;
|
||||
console.log("valueChange", value, context);
|
||||
}
|
||||
}
|
||||
},
|
||||
name: {
|
||||
title: "姓名",
|
||||
type: "text",
|
||||
search: { show: true }
|
||||
},
|
||||
zip: {
|
||||
title: "邮编",
|
||||
type: "text"
|
||||
},
|
||||
blank: {
|
||||
title: "表单占位栏",
|
||||
type: "text",
|
||||
form: {
|
||||
blank: true
|
||||
}
|
||||
},
|
||||
gridSpan: {
|
||||
title: "grid跨列",
|
||||
type: "textarea",
|
||||
form: {
|
||||
col: {
|
||||
style: { gridColumn: "span 2" } // grid 模式
|
||||
}
|
||||
}
|
||||
},
|
||||
flexSpan: {
|
||||
title: "flex跨列",
|
||||
type: "textarea",
|
||||
search: { show: false },
|
||||
form: {
|
||||
show: compute((context) => {
|
||||
// grid跨列模式下使用flex模式的设置会显示异常，为了演示效果，在grid模式下隐藏
|
||||
return context.form.display !== "grid";
|
||||
}),
|
||||
col: { span: 24 } // flex模式跨列配置
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<fs-page>
|
||||
<template #header>
|
||||
<div class="title">表单布局</div>
|
||||
</template>
|
||||
<fs-crud ref="crudRef" custom-class="page-layout" v-bind="crudBinding"> </fs-crud>
|
||||
</fs-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent, ref, onMounted } from "vue";
|
||||
import { useCrud } from "@fast-crud/fast-crud";
|
||||
import createCrudOptions from "./crud";
|
||||
import { useExpose } from "@fast-crud/fast-crud";
|
||||
export default defineComponent({
|
||||
name: "FormLayout",
|
||||
setup() {
|
||||
// crud组件的ref
|
||||
const crudRef = ref();
|
||||
// crud 配置的ref
|
||||
const crudBinding = ref();
|
||||
// 暴露的方法
|
||||
const { expose } = useExpose({ crudRef, crudBinding });
|
||||
// 你的crud配置
|
||||
const { crudOptions } = createCrudOptions({ expose });
|
||||
// 初始化crud配置
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
|
||||
const { resetCrudOptions } = useCrud({ expose, crudOptions });
|
||||
// 你可以调用此方法，重新初始化crud配置
|
||||
// resetCrudOptions(options)
|
||||
|
||||
// 页面打开后获取列表数据
|
||||
onMounted(() => {
|
||||
expose.doRefresh();
|
||||
});
|
||||
|
||||
return {
|
||||
crudBinding,
|
||||
crudRef
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<style lang="less">
|
||||
.page-layout {
|
||||
.ant-form-item-label {
|
||||
width: 110px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,41 @@
|
||||
import mockUtil from "/src/mock/base";
|
||||
const options = {
|
||||
name: "formLayout",
|
||||
idGenerator: 0
|
||||
};
|
||||
const list = [
|
||||
{
|
||||
display: "flex",
|
||||
name: "aa",
|
||||
date: "2016-05-02",
|
||||
status: "0",
|
||||
province: "1",
|
||||
avatar: "https://alicdn.antdv.com/vue.png",
|
||||
show: true,
|
||||
city: "sz",
|
||||
address: "123123",
|
||||
zip: "518000"
|
||||
},
|
||||
{
|
||||
display: "grid",
|
||||
name: "bb",
|
||||
date: "2016-05-04",
|
||||
status: "1",
|
||||
province: "2"
|
||||
},
|
||||
{
|
||||
name: "cc",
|
||||
date: 2232433534511,
|
||||
status: "1",
|
||||
province: "0"
|
||||
},
|
||||
{
|
||||
name: "dd",
|
||||
date: "2016-05-03",
|
||||
status: "2",
|
||||
province: "wh,gz"
|
||||
}
|
||||
];
|
||||
options.list = list;
|
||||
const mock = mockUtil.buildMock(options);
|
||||
export default mock;
|
||||
@@ -0,0 +1,42 @@
|
||||
import { requestForMock } from "/src/api/service";
|
||||
const request = requestForMock;
|
||||
const apiPrefix = "/mock/FormNestObject";
|
||||
export function GetList(query) {
|
||||
return request({
|
||||
url: apiPrefix + "/page",
|
||||
method: "get",
|
||||
data: query
|
||||
});
|
||||
}
|
||||
|
||||
export function AddObj(obj) {
|
||||
return request({
|
||||
url: apiPrefix + "/add",
|
||||
method: "post",
|
||||
data: obj
|
||||
});
|
||||
}
|
||||
|
||||
export function UpdateObj(obj) {
|
||||
return request({
|
||||
url: apiPrefix + "/update",
|
||||
method: "post",
|
||||
data: obj
|
||||
});
|
||||
}
|
||||
|
||||
export function DelObj(id) {
|
||||
return request({
|
||||
url: apiPrefix + "/delete",
|
||||
method: "post",
|
||||
params: { id }
|
||||
});
|
||||
}
|
||||
|
||||
export function GetObj(id) {
|
||||
return request({
|
||||
url: apiPrefix + "/info",
|
||||
method: "get",
|
||||
params: { id }
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
import * as api from "./api";
|
||||
import { dict } from "@fast-crud/fast-crud";
|
||||
export default function ({ expose }) {
|
||||
const pageRequest = async (query) => {
|
||||
return await api.GetList(query);
|
||||
};
|
||||
const editRequest = async ({ form, row }) => {
|
||||
form.id = row.id;
|
||||
return await api.UpdateObj(form);
|
||||
};
|
||||
const delRequest = async ({ row }) => {
|
||||
return await api.DelObj(row.id);
|
||||
};
|
||||
|
||||
const addRequest = async ({ form }) => {
|
||||
return await api.AddObj(form);
|
||||
};
|
||||
return {
|
||||
crudOptions: {
|
||||
request: {
|
||||
pageRequest,
|
||||
addRequest,
|
||||
editRequest,
|
||||
delRequest
|
||||
},
|
||||
form: {
|
||||
labelCol: { span: 6 },
|
||||
wrapperCol: { span: 16 },
|
||||
helper: {
|
||||
// position: "label" // helper的展示位置全局配置
|
||||
// tooltip:{}
|
||||
}
|
||||
},
|
||||
columns: {
|
||||
username: {
|
||||
title: "用户名",
|
||||
type: "text"
|
||||
},
|
||||
"profile.name": {
|
||||
title: "profile.name",
|
||||
type: "text",
|
||||
search:{show:true},
|
||||
form: {
|
||||
key: ["profile", "name"],
|
||||
rules: [{ required: true, message: "姓名必填" }]
|
||||
}
|
||||
},
|
||||
"profile.age": {
|
||||
title: "profile.age",
|
||||
type: "number",
|
||||
form: {
|
||||
key: ["profile", "age"]
|
||||
}
|
||||
},
|
||||
"profile.status": {
|
||||
title: "profile.status",
|
||||
type: "dict-select",
|
||||
dict: dict({
|
||||
url: "/mock/dicts/OpenStatusEnum?single"
|
||||
}),
|
||||
form: {
|
||||
key: ["profile", "status"]
|
||||
}
|
||||
},
|
||||
"profile.count": {
|
||||
title: "不提交的字段",
|
||||
type: "text",
|
||||
form: {
|
||||
submit: false,
|
||||
key: ["profile", "count"]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<fs-page>
|
||||
<fs-crud ref="crudRef" v-bind="crudBinding">
|
||||
<template #actionbar-right>
|
||||
<a-alert
|
||||
class="ml-1"
|
||||
type="info"
|
||||
message="表单支持嵌套对象：例如：formData:{ text:'xxx',user:{id:1,username:'xxxx',desc:'二级嵌套数据'}}"
|
||||
/>
|
||||
</template>
|
||||
</fs-crud>
|
||||
</fs-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent, ref, onMounted } from "vue";
|
||||
import { useCrud } from "@fast-crud/fast-crud";
|
||||
import createCrudOptions from "./crud";
|
||||
import { useExpose } from "@fast-crud/fast-crud";
|
||||
export default defineComponent({
|
||||
name: "FormNest",
|
||||
setup() {
|
||||
// crud组件的ref
|
||||
const crudRef = ref();
|
||||
// crud 配置的ref
|
||||
const crudBinding = ref();
|
||||
// 暴露的方法
|
||||
const { expose } = useExpose({ crudRef, crudBinding });
|
||||
// 你的crud配置
|
||||
const { crudOptions } = createCrudOptions({ expose });
|
||||
// 初始化crud配置
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
|
||||
const { resetCrudOptions } = useCrud({ expose, crudOptions });
|
||||
// 你可以调用此方法，重新初始化crud配置
|
||||
// resetCrudOptions(options)
|
||||
|
||||
// 页面打开后获取列表数据
|
||||
onMounted(() => {
|
||||
expose.doRefresh();
|
||||
});
|
||||
|
||||
return {
|
||||
crudBinding,
|
||||
crudRef
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,319 @@
|
||||
import mockUtil from "/src/mock/base";
|
||||
|
||||
const options = {
|
||||
name: "FormNestObject",
|
||||
idGenerator: 0
|
||||
};
|
||||
const list = [
|
||||
{
|
||||
username: "wangxiaohu",
|
||||
profile: {
|
||||
name: "王小虎",
|
||||
age: 15,
|
||||
status: "1",
|
||||
count: "配置submit=false将不会提交给后台"
|
||||
}
|
||||
},
|
||||
{
|
||||
username: "zhangsan",
|
||||
profile: {
|
||||
name: "张三",
|
||||
age: 18,
|
||||
status: "2"
|
||||
}
|
||||
},
|
||||
{
|
||||
username: "lisi",
|
||||
profile: {
|
||||
name: "李四",
|
||||
age: 18,
|
||||
status: "2"
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
const dictData = [
|
||||
{
|
||||
value: "zhinan",
|
||||
label: "指南",
|
||||
children: [
|
||||
{
|
||||
value: "shejiyuanze",
|
||||
label: "设计原则",
|
||||
children: [
|
||||
{
|
||||
value: "yizhi",
|
||||
label: "一致"
|
||||
},
|
||||
{
|
||||
value: "fankui",
|
||||
label: "反馈"
|
||||
},
|
||||
{
|
||||
value: "xiaolv",
|
||||
label: "效率"
|
||||
},
|
||||
{
|
||||
value: "kekong",
|
||||
label: "可控"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "daohang",
|
||||
label: "导航",
|
||||
children: [
|
||||
{
|
||||
value: "cexiangdaohang",
|
||||
label: "侧向导航"
|
||||
},
|
||||
{
|
||||
value: "dingbudaohang",
|
||||
label: "顶部导航"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "zujian",
|
||||
label: "组件",
|
||||
children: [
|
||||
{
|
||||
value: "basic",
|
||||
label: "Basic",
|
||||
children: [
|
||||
{
|
||||
value: "layout",
|
||||
label: "Layout 布局"
|
||||
},
|
||||
{
|
||||
value: "color",
|
||||
label: "Color 色彩"
|
||||
},
|
||||
{
|
||||
value: "typography",
|
||||
label: "Typography 字体"
|
||||
},
|
||||
{
|
||||
value: "icon",
|
||||
label: "Icon 图标"
|
||||
},
|
||||
{
|
||||
value: "button",
|
||||
label: "Button 按钮"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "form",
|
||||
label: "Form",
|
||||
children: [
|
||||
{
|
||||
value: "radio",
|
||||
label: "Radio 单选框"
|
||||
},
|
||||
{
|
||||
value: "checkbox",
|
||||
label: "Checkbox 多选框"
|
||||
},
|
||||
{
|
||||
value: "input",
|
||||
label: "Input 输入框"
|
||||
},
|
||||
{
|
||||
value: "input-number",
|
||||
label: "InputNumber 计数器"
|
||||
},
|
||||
{
|
||||
value: "select",
|
||||
label: "Select 选择器"
|
||||
},
|
||||
{
|
||||
value: "cascader",
|
||||
label: "Cascader 级联选择器"
|
||||
},
|
||||
{
|
||||
value: "switch",
|
||||
label: "Switch 开关"
|
||||
},
|
||||
{
|
||||
value: "slider",
|
||||
label: "Slider 滑块"
|
||||
},
|
||||
{
|
||||
value: "time-picker",
|
||||
label: "TimePicker 时间选择器"
|
||||
},
|
||||
{
|
||||
value: "date-picker",
|
||||
label: "DatePicker 日期选择器"
|
||||
},
|
||||
{
|
||||
value: "datetime-picker",
|
||||
label: "DateTimePicker 日期时间选择器"
|
||||
},
|
||||
{
|
||||
value: "upload",
|
||||
label: "Upload 上传"
|
||||
},
|
||||
{
|
||||
value: "rate",
|
||||
label: "Rate 评分"
|
||||
},
|
||||
{
|
||||
value: "form",
|
||||
label: "Form 表单"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "data",
|
||||
label: "Data",
|
||||
children: [
|
||||
{
|
||||
value: "table",
|
||||
label: "Table 表格"
|
||||
},
|
||||
{
|
||||
value: "tag",
|
||||
label: "Tag 标签"
|
||||
},
|
||||
{
|
||||
value: "progress",
|
||||
label: "Progress 进度条"
|
||||
},
|
||||
{
|
||||
value: "tree",
|
||||
label: "Tree 树形控件"
|
||||
},
|
||||
{
|
||||
value: "pagination",
|
||||
label: "Pagination 分页"
|
||||
},
|
||||
{
|
||||
value: "badge",
|
||||
label: "Badge 标记"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "notice",
|
||||
label: "Notice",
|
||||
children: [
|
||||
{
|
||||
value: "alert",
|
||||
label: "Alert 警告"
|
||||
},
|
||||
{
|
||||
value: "loading",
|
||||
label: "Loading 加载"
|
||||
},
|
||||
{
|
||||
value: "message",
|
||||
label: "Message 消息提示"
|
||||
},
|
||||
{
|
||||
value: "message-box",
|
||||
label: "MessageBox 弹框"
|
||||
},
|
||||
{
|
||||
value: "notification",
|
||||
label: "Notification 通知"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "navigation",
|
||||
label: "Navigation",
|
||||
children: [
|
||||
{
|
||||
value: "menu",
|
||||
label: "NavMenu 导航菜单"
|
||||
},
|
||||
{
|
||||
value: "tabs",
|
||||
label: "Tabs 标签页"
|
||||
},
|
||||
{
|
||||
value: "breadcrumb",
|
||||
label: "Breadcrumb 面包屑"
|
||||
},
|
||||
{
|
||||
value: "dropdown",
|
||||
label: "Dropdown 下拉菜单"
|
||||
},
|
||||
{
|
||||
value: "steps",
|
||||
label: "Steps 步骤条"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "others",
|
||||
label: "Others",
|
||||
children: [
|
||||
{
|
||||
value: "dialog",
|
||||
label: "Dialog 对话框"
|
||||
},
|
||||
{
|
||||
value: "tooltip",
|
||||
label: "Tooltip 文字提示"
|
||||
},
|
||||
{
|
||||
value: "popover",
|
||||
label: "Popover 弹出框"
|
||||
},
|
||||
{
|
||||
value: "card",
|
||||
label: "Card 卡片"
|
||||
},
|
||||
{
|
||||
value: "carousel",
|
||||
label: "Carousel 走马灯"
|
||||
},
|
||||
{
|
||||
value: "collapse",
|
||||
label: "Collapse 折叠面板"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "ziyuan",
|
||||
label: "资源",
|
||||
children: [
|
||||
{
|
||||
value: "axure",
|
||||
label: "Axure Components"
|
||||
},
|
||||
{
|
||||
value: "sketch",
|
||||
label: "Sketch Templates"
|
||||
},
|
||||
{
|
||||
value: "jiaohu",
|
||||
label: "组件交互文档"
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
options.list = list;
|
||||
options.copyTimes = 1000;
|
||||
const mock = mockUtil.buildMock(options);
|
||||
mock.push({
|
||||
path: "/select/cascadeData",
|
||||
method: "get",
|
||||
handle(req) {
|
||||
return {
|
||||
code: 0,
|
||||
msg: "success",
|
||||
data: dictData
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
export default mock;
|
||||
@@ -0,0 +1,42 @@
|
||||
import { requestForMock } from "/src/api/service";
|
||||
const request = requestForMock;
|
||||
const apiPrefix = "/mock/FormNewPage";
|
||||
export function GetList(query) {
|
||||
return request({
|
||||
url: apiPrefix + "/page",
|
||||
method: "get",
|
||||
data: query
|
||||
});
|
||||
}
|
||||
|
||||
export function AddObj(obj) {
|
||||
return request({
|
||||
url: apiPrefix + "/add",
|
||||
method: "post",
|
||||
data: obj
|
||||
});
|
||||
}
|
||||
|
||||
export function UpdateObj(obj) {
|
||||
return request({
|
||||
url: apiPrefix + "/update",
|
||||
method: "post",
|
||||
data: obj
|
||||
});
|
||||
}
|
||||
|
||||
export function DelObj(id) {
|
||||
return request({
|
||||
url: apiPrefix + "/delete",
|
||||
method: "post",
|
||||
params: { id }
|
||||
});
|
||||
}
|
||||
|
||||
export function GetObj(id) {
|
||||
return request({
|
||||
url: apiPrefix + "/get",
|
||||
method: "get",
|
||||
params: { id }
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
import * as api from "./api";
|
||||
import { useRouter } from "vue-router";
|
||||
export default function ({ expose }) {
|
||||
const router = useRouter();
|
||||
|
||||
const { getFormRef, getFormData } = expose;
|
||||
const pageRequest = async (query) => {
|
||||
return await api.GetList(query);
|
||||
};
|
||||
const editRequest = async ({ form, row }) => {
|
||||
if (row.id) {
|
||||
form.id = row.id;
|
||||
}
|
||||
|
||||
return await api.UpdateObj(form);
|
||||
};
|
||||
const delRequest = async ({ row }) => {
|
||||
return await api.DelObj(row.id);
|
||||
};
|
||||
|
||||
const addRequest = async ({ form }) => {
|
||||
return await api.AddObj(form);
|
||||
};
|
||||
return {
|
||||
crudOptions: {
|
||||
request: {
|
||||
pageRequest,
|
||||
addRequest,
|
||||
editRequest,
|
||||
delRequest
|
||||
},
|
||||
actionbar: {
|
||||
buttons: {
|
||||
add: {
|
||||
click() {
|
||||
router.push("/crud/form/new-page/edit");
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
rowHandle: {
|
||||
buttons: {
|
||||
edit: {
|
||||
click(context) {
|
||||
router.push("/crud/form/new-page/edit?id=" + context.row.id);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
columns: {
|
||||
title: {
|
||||
title: "商品标题",
|
||||
type: "text"
|
||||
},
|
||||
code: {
|
||||
title: "商品代码",
|
||||
search: { show: true },
|
||||
type: "text"
|
||||
},
|
||||
images: {
|
||||
title: "图片",
|
||||
type: "image-uploader"
|
||||
},
|
||||
price: {
|
||||
title: "价格",
|
||||
sortable: true
|
||||
},
|
||||
store: {
|
||||
title: "库存",
|
||||
type: "number"
|
||||
},
|
||||
intro: {
|
||||
title: "简介",
|
||||
type: "textarea",
|
||||
column: {
|
||||
ellipsis: true
|
||||
}
|
||||
},
|
||||
content: {
|
||||
title: "详情",
|
||||
type: ["editor-wang", "colspan"],
|
||||
form: {
|
||||
itemProps: { labelWidth: "0px" }
|
||||
}
|
||||
},
|
||||
product: {
|
||||
title: "未分组字段",
|
||||
type: ["text", "colspan"],
|
||||
form: {
|
||||
helper: "未分组的字段会显示在这里，一般来说你应该把所有字段都编入分组内"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<fs-page>
|
||||
<template #header>
|
||||
<div class="title">新页面编辑</div>
|
||||
</template>
|
||||
<div class="p-5">
|
||||
<fs-form ref="formRef" v-bind="formOptions" />
|
||||
<div style="margin-top: 10px">
|
||||
<a-button v-if="formRef" @click="formRef.submit">保存</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</fs-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { useRoute } from "vue-router";
|
||||
import { defineComponent, ref, onMounted } from "vue";
|
||||
import { useCrud, useExpose, useColumns } from "@fast-crud/fast-crud";
|
||||
import createCrudOptions from "./crud";
|
||||
import * as api from "./api";
|
||||
import _ from "lodash-es";
|
||||
import { message } from "ant-design-vue";
|
||||
import { usePageStore } from "/@/store/modules/page";
|
||||
export default defineComponent({
|
||||
name: "FormNewPageEdit",
|
||||
setup(props, ctx) {
|
||||
// crud组件的ref
|
||||
const crudRef = ref();
|
||||
// crud 配置的ref
|
||||
const crudBinding = ref();
|
||||
// 暴露的方法
|
||||
const { expose } = useExpose({ crudRef, crudBinding });
|
||||
// 你的crud配置
|
||||
const { crudOptions } = createCrudOptions({ expose });
|
||||
// 初始化crud配置
|
||||
const { resetCrudOptions } = useCrud({ expose, crudOptions });
|
||||
|
||||
const formRef = ref();
|
||||
const formOptions = ref();
|
||||
|
||||
const route = useRoute();
|
||||
const id = route.query.id;
|
||||
|
||||
if (id) {
|
||||
//编辑表单
|
||||
formOptions.value = crudBinding.value.editForm;
|
||||
} else {
|
||||
formOptions.value = crudBinding.value.addForm;
|
||||
}
|
||||
const doSubmit = formOptions.value.doSubmit;
|
||||
const pageStore = usePageStore();
|
||||
|
||||
formOptions.value.doSubmit = (context) => {
|
||||
console.log("submit", context);
|
||||
doSubmit(context);
|
||||
//提交成功后，关闭本页面
|
||||
message.success("保存成功");
|
||||
pageStore.close({ tagName: route.fullPath });
|
||||
};
|
||||
|
||||
const getDetail = async (id) => {
|
||||
return await api.GetObj(id);
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
if (id) {
|
||||
//远程获取记录详情
|
||||
const detail = await getDetail(id);
|
||||
formRef.value.setFormData(detail);
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
crudBinding,
|
||||
crudRef,
|
||||
formRef,
|
||||
formOptions
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<fs-page>
|
||||
<fs-crud ref="crudRef" v-bind="crudBinding">
|
||||
<template #actionbar-right> </template>
|
||||
</fs-crud>
|
||||
</fs-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent, ref, onMounted } from "vue";
|
||||
import { useCrud, useExpose, useColumns } from "@fast-crud/fast-crud";
|
||||
import createCrudOptions from "./crud";
|
||||
import _ from "lodash-es";
|
||||
import { message } from "ant-design-vue";
|
||||
export default defineComponent({
|
||||
name: "FormNewPage",
|
||||
setup(props, ctx) {
|
||||
// crud组件的ref
|
||||
const crudRef = ref();
|
||||
// crud 配置的ref
|
||||
const crudBinding = ref();
|
||||
// 暴露的方法
|
||||
const { expose } = useExpose({ crudRef, crudBinding });
|
||||
// 你的crud配置
|
||||
const { crudOptions } = createCrudOptions({ expose });
|
||||
// 初始化crud配置
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
|
||||
const { resetCrudOptions } = useCrud({ expose, crudOptions });
|
||||
// 你可以调用此方法，重新初始化crud配置
|
||||
// resetCrudOptions(options)
|
||||
|
||||
// 页面打开后获取列表数据
|
||||
onMounted(() => {
|
||||
expose.doRefresh();
|
||||
});
|
||||
|
||||
return {
|
||||
crudBinding,
|
||||
crudRef
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,22 @@
|
||||
import mockUtil from "/src/mock/base";
|
||||
|
||||
const options = {
|
||||
name: "FormNewPage",
|
||||
idGenerator: 0
|
||||
};
|
||||
const list = [
|
||||
{
|
||||
title: "无线充电宝",
|
||||
code: "100001",
|
||||
images: "https://img0.bdstatic.com/static/searchdetail/img/logo-2X_0c4ef02.png",
|
||||
price: 100,
|
||||
stock: 99,
|
||||
intro: "30000毫安超大容量移动电源充电宝官方原装正品专用便携",
|
||||
content: ""
|
||||
}
|
||||
];
|
||||
|
||||
options.list = list;
|
||||
options.copyTimes = 1000;
|
||||
const mock = mockUtil.buildMock(options);
|
||||
export default mock;
|
||||
@@ -0,0 +1,42 @@
|
||||
import { requestForMock } from "/src/api/service";
|
||||
const request = requestForMock;
|
||||
const apiPrefix = "/mock/formReset";
|
||||
export function GetList(query) {
|
||||
return request({
|
||||
url: apiPrefix + "/page",
|
||||
method: "get",
|
||||
data: query
|
||||
});
|
||||
}
|
||||
|
||||
export function AddObj(obj) {
|
||||
return request({
|
||||
url: apiPrefix + "/add",
|
||||
method: "post",
|
||||
data: obj
|
||||
});
|
||||
}
|
||||
|
||||
export function UpdateObj(obj) {
|
||||
return request({
|
||||
url: apiPrefix + "/update",
|
||||
method: "post",
|
||||
data: obj
|
||||
});
|
||||
}
|
||||
|
||||
export function DelObj(id) {
|
||||
return request({
|
||||
url: apiPrefix + "/delete",
|
||||
method: "post",
|
||||
params: { id }
|
||||
});
|
||||
}
|
||||
|
||||
export function GetObj(id) {
|
||||
return request({
|
||||
url: apiPrefix + "/info",
|
||||
method: "get",
|
||||
params: { id }
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
import * as api from "./api";
|
||||
export default function ({ expose }) {
|
||||
const pageRequest = async (query) => {
|
||||
return await api.GetList(query);
|
||||
};
|
||||
const editRequest = async ({ form, row }) => {
|
||||
form.id = row.id;
|
||||
return await api.UpdateObj(form);
|
||||
};
|
||||
const delRequest = async ({ row }) => {
|
||||
return await api.DelObj(row.id);
|
||||
};
|
||||
|
||||
const addRequest = async ({ form }) => {
|
||||
return await api.AddObj(form);
|
||||
};
|
||||
return {
|
||||
crudOptions: {
|
||||
request: {
|
||||
pageRequest,
|
||||
addRequest,
|
||||
editRequest,
|
||||
delRequest
|
||||
},
|
||||
form: {
|
||||
async doReset() {
|
||||
console.log("reset之后可以执行其他操作");
|
||||
},
|
||||
wrapper: {
|
||||
buttons: {
|
||||
reset: {
|
||||
text: "重置",
|
||||
order: -1,
|
||||
click(value) {
|
||||
console.log("on reset", value);
|
||||
expose.getFormRef().reset();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
columns: {
|
||||
name: {
|
||||
title: "姓名",
|
||||
type: "text", //虽然不写也能正确显示组件，但不建议省略它
|
||||
search: { show: true },
|
||||
form: {
|
||||
component: {
|
||||
maxlength: 20
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<fs-page>
|
||||
<fs-crud ref="crudRef" v-bind="crudBinding" />
|
||||
</fs-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent, ref, onMounted } from "vue";
|
||||
import { useCrud } from "@fast-crud/fast-crud";
|
||||
import createCrudOptions from "./crud";
|
||||
import { useExpose } from "@fast-crud/fast-crud";
|
||||
export default defineComponent({
|
||||
name: "FormReset",
|
||||
setup() {
|
||||
// crud组件的ref
|
||||
const crudRef = ref();
|
||||
// crud 配置的ref
|
||||
const crudBinding = ref();
|
||||
// 暴露的方法
|
||||
const { expose } = useExpose({ crudRef, crudBinding });
|
||||
// 你的crud配置
|
||||
const { crudOptions } = createCrudOptions({ expose });
|
||||
// 初始化crud配置
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
|
||||
const { resetCrudOptions } = useCrud({ expose, crudOptions });
|
||||
// 你可以调用此方法，重新初始化crud配置
|
||||
// resetCrudOptions(options)
|
||||
|
||||
// 页面打开后获取列表数据
|
||||
onMounted(() => {
|
||||
expose.doRefresh();
|
||||
});
|
||||
|
||||
return {
|
||||
crudBinding,
|
||||
crudRef
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,40 @@
|
||||
import mockUtil from "/src/mock/base";
|
||||
const options = {
|
||||
name: "formReset",
|
||||
idGenerator: 0
|
||||
};
|
||||
const list = [
|
||||
{
|
||||
name: "王小虎",
|
||||
date: "2016-05-02",
|
||||
status: "0",
|
||||
province: "1",
|
||||
avatar: "https://alicdn.antdv.com/vue.png",
|
||||
show: true,
|
||||
city: "sz",
|
||||
address: "123123",
|
||||
zip: "518000",
|
||||
intro: "王小虎是element-plus的table示例出现的名字"
|
||||
},
|
||||
{
|
||||
name: "张三",
|
||||
date: "2016-05-04",
|
||||
status: "1",
|
||||
province: "2"
|
||||
},
|
||||
{
|
||||
name: "李四",
|
||||
date: 2232433534511,
|
||||
status: "1",
|
||||
province: "0"
|
||||
},
|
||||
{
|
||||
name: "王五",
|
||||
date: "2016-05-03",
|
||||
status: "2",
|
||||
province: "wh,gz"
|
||||
}
|
||||
];
|
||||
options.list = list;
|
||||
const mock = mockUtil.buildMock(options);
|
||||
export default mock;
|
||||
@@ -0,0 +1,42 @@
|
||||
import { requestForMock } from "/src/api/service";
|
||||
const request = requestForMock;
|
||||
const apiPrefix = "/mock/FormSingleColumn";
|
||||
export function GetList(query) {
|
||||
return request({
|
||||
url: apiPrefix + "/page",
|
||||
method: "get",
|
||||
data: query
|
||||
});
|
||||
}
|
||||
|
||||
export function AddObj(obj) {
|
||||
return request({
|
||||
url: apiPrefix + "/add",
|
||||
method: "post",
|
||||
data: obj
|
||||
});
|
||||
}
|
||||
|
||||
export function UpdateObj(obj) {
|
||||
return request({
|
||||
url: apiPrefix + "/update",
|
||||
method: "post",
|
||||
data: obj
|
||||
});
|
||||
}
|
||||
|
||||
export function DelObj(id) {
|
||||
return request({
|
||||
url: apiPrefix + "/delete",
|
||||
method: "post",
|
||||
params: { id }
|
||||
});
|
||||
}
|
||||
|
||||
export function GetObj(id) {
|
||||
return request({
|
||||
url: apiPrefix + "/info",
|
||||
method: "get",
|
||||
params: { id }
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
import * as api from "./api";
|
||||
export default function ({ crudExpose }) {
|
||||
const pageRequest = async (query) => {
|
||||
return await api.GetList(query);
|
||||
};
|
||||
const editRequest = async ({ form, row }) => {
|
||||
form.id = row.id;
|
||||
return await api.UpdateObj(form);
|
||||
};
|
||||
const delRequest = async ({ row }) => {
|
||||
return await api.DelObj(row.id);
|
||||
};
|
||||
|
||||
const addRequest = async ({ form }) => {
|
||||
return await api.AddObj(form);
|
||||
};
|
||||
return {
|
||||
crudOptions: {
|
||||
request: {
|
||||
pageRequest,
|
||||
addRequest,
|
||||
editRequest,
|
||||
delRequest
|
||||
},
|
||||
form: {
|
||||
col: {
|
||||
span: 24
|
||||
}
|
||||
},
|
||||
columns: {
|
||||
name: {
|
||||
title: "姓名",
|
||||
type: "text"
|
||||
},
|
||||
title: {
|
||||
title: "商品标题",
|
||||
type: "text"
|
||||
},
|
||||
code: {
|
||||
title: "商品代码",
|
||||
search: { show: true },
|
||||
type: "text"
|
||||
},
|
||||
images: {
|
||||
title: "图片",
|
||||
type: "image-uploader"
|
||||
},
|
||||
price: {
|
||||
title: "价格",
|
||||
sortable: true
|
||||
},
|
||||
store: {
|
||||
title: "库存",
|
||||
type: "number"
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<fs-page>
|
||||
<fs-crud ref="crudRef" v-bind="crudBinding">
|
||||
<template #actionbar-right>
|
||||
<a-alert class="ml-1" type="info" message="单列模式" />
|
||||
</template>
|
||||
</fs-crud>
|
||||
</fs-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, onMounted, nextTick } from "vue";
|
||||
import { useFs } from "@fast-crud/fast-crud";
|
||||
import createCrudOptions from "./crud";
|
||||
export default defineComponent({
|
||||
name: "FormSingleColumn",
|
||||
setup() {
|
||||
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
|
||||
|
||||
// 页面打开后获取列表数据
|
||||
onMounted(async () => {
|
||||
crudExpose.doRefresh();
|
||||
});
|
||||
|
||||
return {
|
||||
crudBinding,
|
||||
crudRef
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,310 @@
|
||||
import mockUtil from "/src/mock/base";
|
||||
|
||||
const options = {
|
||||
name: "FormSingleColumn",
|
||||
idGenerator: 0
|
||||
};
|
||||
const list = [
|
||||
{
|
||||
name: "王小虎",
|
||||
age: 15,
|
||||
password: "",
|
||||
status: "2",
|
||||
url: "https://baidu.com"
|
||||
},
|
||||
{
|
||||
name: "张三",
|
||||
age: 18,
|
||||
password: "",
|
||||
url: "https://baidu.com"
|
||||
},
|
||||
{
|
||||
status: "2"
|
||||
}
|
||||
];
|
||||
|
||||
const dictData = [
|
||||
{
|
||||
value: "zhinan",
|
||||
label: "指南",
|
||||
children: [
|
||||
{
|
||||
value: "shejiyuanze",
|
||||
label: "设计原则",
|
||||
children: [
|
||||
{
|
||||
value: "yizhi",
|
||||
label: "一致"
|
||||
},
|
||||
{
|
||||
value: "fankui",
|
||||
label: "反馈"
|
||||
},
|
||||
{
|
||||
value: "xiaolv",
|
||||
label: "效率"
|
||||
},
|
||||
{
|
||||
value: "kekong",
|
||||
label: "可控"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "daohang",
|
||||
label: "导航",
|
||||
children: [
|
||||
{
|
||||
value: "cexiangdaohang",
|
||||
label: "侧向导航"
|
||||
},
|
||||
{
|
||||
value: "dingbudaohang",
|
||||
label: "顶部导航"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "zujian",
|
||||
label: "组件",
|
||||
children: [
|
||||
{
|
||||
value: "basic",
|
||||
label: "Basic",
|
||||
children: [
|
||||
{
|
||||
value: "layout",
|
||||
label: "Layout 布局"
|
||||
},
|
||||
{
|
||||
value: "color",
|
||||
label: "Color 色彩"
|
||||
},
|
||||
{
|
||||
value: "typography",
|
||||
label: "Typography 字体"
|
||||
},
|
||||
{
|
||||
value: "icon",
|
||||
label: "Icon 图标"
|
||||
},
|
||||
{
|
||||
value: "button",
|
||||
label: "Button 按钮"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "form",
|
||||
label: "Form",
|
||||
children: [
|
||||
{
|
||||
value: "radio",
|
||||
label: "Radio 单选框"
|
||||
},
|
||||
{
|
||||
value: "checkbox",
|
||||
label: "Checkbox 多选框"
|
||||
},
|
||||
{
|
||||
value: "input",
|
||||
label: "Input 输入框"
|
||||
},
|
||||
{
|
||||
value: "input-number",
|
||||
label: "InputNumber 计数器"
|
||||
},
|
||||
{
|
||||
value: "select",
|
||||
label: "Select 选择器"
|
||||
},
|
||||
{
|
||||
value: "cascader",
|
||||
label: "Cascader 级联选择器"
|
||||
},
|
||||
{
|
||||
value: "switch",
|
||||
label: "Switch 开关"
|
||||
},
|
||||
{
|
||||
value: "slider",
|
||||
label: "Slider 滑块"
|
||||
},
|
||||
{
|
||||
value: "time-picker",
|
||||
label: "TimePicker 时间选择器"
|
||||
},
|
||||
{
|
||||
value: "date-picker",
|
||||
label: "DatePicker 日期选择器"
|
||||
},
|
||||
{
|
||||
value: "datetime-picker",
|
||||
label: "DateTimePicker 日期时间选择器"
|
||||
},
|
||||
{
|
||||
value: "upload",
|
||||
label: "Upload 上传"
|
||||
},
|
||||
{
|
||||
value: "rate",
|
||||
label: "Rate 评分"
|
||||
},
|
||||
{
|
||||
value: "form",
|
||||
label: "Form 表单"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "data",
|
||||
label: "Data",
|
||||
children: [
|
||||
{
|
||||
value: "table",
|
||||
label: "Table 表格"
|
||||
},
|
||||
{
|
||||
value: "tag",
|
||||
label: "Tag 标签"
|
||||
},
|
||||
{
|
||||
value: "progress",
|
||||
label: "Progress 进度条"
|
||||
},
|
||||
{
|
||||
value: "tree",
|
||||
label: "Tree 树形控件"
|
||||
},
|
||||
{
|
||||
value: "pagination",
|
||||
label: "Pagination 分页"
|
||||
},
|
||||
{
|
||||
value: "badge",
|
||||
label: "Badge 标记"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "notice",
|
||||
label: "Notice",
|
||||
children: [
|
||||
{
|
||||
value: "alert",
|
||||
label: "Alert 警告"
|
||||
},
|
||||
{
|
||||
value: "loading",
|
||||
label: "Loading 加载"
|
||||
},
|
||||
{
|
||||
value: "message",
|
||||
label: "Message 消息提示"
|
||||
},
|
||||
{
|
||||
value: "message-box",
|
||||
label: "MessageBox 弹框"
|
||||
},
|
||||
{
|
||||
value: "notification",
|
||||
label: "Notification 通知"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "navigation",
|
||||
label: "Navigation",
|
||||
children: [
|
||||
{
|
||||
value: "menu",
|
||||
label: "NavMenu 导航菜单"
|
||||
},
|
||||
{
|
||||
value: "tabs",
|
||||
label: "Tabs 标签页"
|
||||
},
|
||||
{
|
||||
value: "breadcrumb",
|
||||
label: "Breadcrumb 面包屑"
|
||||
},
|
||||
{
|
||||
value: "dropdown",
|
||||
label: "Dropdown 下拉菜单"
|
||||
},
|
||||
{
|
||||
value: "steps",
|
||||
label: "Steps 步骤条"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "others",
|
||||
label: "Others",
|
||||
children: [
|
||||
{
|
||||
value: "dialog",
|
||||
label: "Dialog 对话框"
|
||||
},
|
||||
{
|
||||
value: "tooltip",
|
||||
label: "Tooltip 文字提示"
|
||||
},
|
||||
{
|
||||
value: "popover",
|
||||
label: "Popover 弹出框"
|
||||
},
|
||||
{
|
||||
value: "card",
|
||||
label: "Card 卡片"
|
||||
},
|
||||
{
|
||||
value: "carousel",
|
||||
label: "Carousel 走马灯"
|
||||
},
|
||||
{
|
||||
value: "collapse",
|
||||
label: "Collapse 折叠面板"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "ziyuan",
|
||||
label: "资源",
|
||||
children: [
|
||||
{
|
||||
value: "axure",
|
||||
label: "Axure Components"
|
||||
},
|
||||
{
|
||||
value: "sketch",
|
||||
label: "Sketch Templates"
|
||||
},
|
||||
{
|
||||
value: "jiaohu",
|
||||
label: "组件交互文档"
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
options.list = list;
|
||||
options.copyTimes = 1000;
|
||||
const mock = mockUtil.buildMock(options);
|
||||
mock.push({
|
||||
path: "/select/cascadeData",
|
||||
method: "get",
|
||||
handle(req) {
|
||||
return {
|
||||
code: 0,
|
||||
msg: "success",
|
||||
data: dictData
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
export default mock;
|
||||
@@ -0,0 +1,42 @@
|
||||
import { requestForMock } from "/src/api/service";
|
||||
const request = requestForMock;
|
||||
const apiPrefix = "/mock/FormValidation";
|
||||
export function GetList(query) {
|
||||
return request({
|
||||
url: apiPrefix + "/page",
|
||||
method: "get",
|
||||
data: query
|
||||
});
|
||||
}
|
||||
|
||||
export function AddObj(obj) {
|
||||
return request({
|
||||
url: apiPrefix + "/add",
|
||||
method: "post",
|
||||
data: obj
|
||||
});
|
||||
}
|
||||
|
||||
export function UpdateObj(obj) {
|
||||
return request({
|
||||
url: apiPrefix + "/update",
|
||||
method: "post",
|
||||
data: obj
|
||||
});
|
||||
}
|
||||
|
||||
export function DelObj(id) {
|
||||
return request({
|
||||
url: apiPrefix + "/delete",
|
||||
method: "post",
|
||||
params: { id }
|
||||
});
|
||||
}
|
||||
|
||||
export function GetObj(id) {
|
||||
return request({
|
||||
url: apiPrefix + "/info",
|
||||
method: "get",
|
||||
params: { id }
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,135 @@
|
||||
import * as api from "./api";
|
||||
import { dict, useExpose } from "@fast-crud/fast-crud";
|
||||
export default function ({ expose }) {
|
||||
const { getFormRef, getFormData } = expose;
|
||||
const validatePass1 = async (rule, value) => {
|
||||
if (value === "") {
|
||||
throw new Error("请输入密码");
|
||||
}
|
||||
if (getFormData().password2 !== "") {
|
||||
getFormRef().getFormRef().validateFields(["password2"]);
|
||||
}
|
||||
};
|
||||
const validatePass2 = async (rule, value) => {
|
||||
if (value === "") {
|
||||
throw new Error("请再次输入密码");
|
||||
} else if (value !== getFormData().password) {
|
||||
throw new Error("两次输入密码不一致!");
|
||||
}
|
||||
};
|
||||
const pageRequest = async (query) => {
|
||||
return await api.GetList(query);
|
||||
};
|
||||
const editRequest = async ({ form, row }) => {
|
||||
form.id = row.id;
|
||||
return await api.UpdateObj(form);
|
||||
};
|
||||
const delRequest = async ({ row }) => {
|
||||
return await api.DelObj(row.id);
|
||||
};
|
||||
|
||||
const addRequest = async ({ form }) => {
|
||||
return await api.AddObj(form);
|
||||
};
|
||||
return {
|
||||
crudOptions: {
|
||||
request: {
|
||||
pageRequest,
|
||||
addRequest,
|
||||
editRequest,
|
||||
delRequest
|
||||
},
|
||||
form: {
|
||||
row:{
|
||||
gutter:20
|
||||
},
|
||||
beforeSubmit(context) {
|
||||
console.log("beforeSubmit", context);
|
||||
},
|
||||
afterSubmit(context) {
|
||||
console.log("afterSubmit", context);
|
||||
}
|
||||
},
|
||||
columns: {
|
||||
name: {
|
||||
title: "姓名",
|
||||
type: "text",
|
||||
form: {
|
||||
helper: "添加和编辑时必填，编辑时额外需要校验长度",
|
||||
rules: [{ required: true, message: "请输入姓名" }],
|
||||
component: {
|
||||
maxlength: 5, // 原生属性要写在这里
|
||||
props: {
|
||||
type: "text",
|
||||
showWordLimit: true
|
||||
}
|
||||
}
|
||||
},
|
||||
editForm: {
|
||||
rules: [{ min: 2, max: 5, message: "姓名长度为2-5" }]
|
||||
}
|
||||
},
|
||||
age: {
|
||||
title: "年龄",
|
||||
type: "text",
|
||||
form: {
|
||||
rules: [{ pattern: /^\d+$/, message: "必须为整数" }],
|
||||
helper: "正则表达式"
|
||||
}
|
||||
},
|
||||
password: {
|
||||
title: "密码",
|
||||
type: "password",
|
||||
column: {
|
||||
component: {
|
||||
cellRender() {
|
||||
return <span>******</span>;
|
||||
}
|
||||
}
|
||||
},
|
||||
form: {
|
||||
rules: [
|
||||
{ required: true, message: "请输入密码" },
|
||||
{ validator: validatePass1, trigger: "blur" }
|
||||
]
|
||||
}
|
||||
},
|
||||
password2: {
|
||||
title: "确认密码",
|
||||
type: "password",
|
||||
column: { show: false },
|
||||
form: {
|
||||
rules: [
|
||||
{ required: true, message: "请输入确认密码" },
|
||||
{ validator: validatePass2, trigger: "blur" }
|
||||
]
|
||||
}
|
||||
},
|
||||
status: {
|
||||
title: "必选",
|
||||
type: "dict-select",
|
||||
dict: dict({
|
||||
url: "/mock/dicts/OpenStatusEnum"
|
||||
}),
|
||||
form: {
|
||||
rules: [{ required: true, message: "请选择一个选项" }]
|
||||
}
|
||||
},
|
||||
email: {
|
||||
title: "邮箱",
|
||||
type: "text",
|
||||
form: {
|
||||
rules: [{ type: "email", message: "请填写正确的邮箱" }]
|
||||
}
|
||||
},
|
||||
url: {
|
||||
title: "URL",
|
||||
type: "text",
|
||||
form: {
|
||||
rules: [{ type: "url", message: "请填写正确的url" }]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<fs-page>
|
||||
<fs-crud ref="crudRef" v-bind="crudBinding" />
|
||||
</fs-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent, ref, onMounted } from "vue";
|
||||
import { useCrud } from "@fast-crud/fast-crud";
|
||||
import createCrudOptions from "./crud";
|
||||
import { useExpose } from "@fast-crud/fast-crud";
|
||||
export default defineComponent({
|
||||
name: "FormValidation",
|
||||
setup() {
|
||||
// crud组件的ref
|
||||
const crudRef = ref();
|
||||
// crud 配置的ref
|
||||
const crudBinding = ref();
|
||||
// 暴露的方法
|
||||
const { expose } = useExpose({ crudRef, crudBinding });
|
||||
// 你的crud配置
|
||||
const { crudOptions } = createCrudOptions({ expose });
|
||||
// 初始化crud配置
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
|
||||
const { resetCrudOptions } = useCrud({ expose, crudOptions });
|
||||
// 你可以调用此方法，重新初始化crud配置
|
||||
// resetCrudOptions(options)
|
||||
|
||||
// 页面打开后获取列表数据
|
||||
onMounted(() => {
|
||||
expose.doRefresh();
|
||||
});
|
||||
|
||||
return {
|
||||
crudBinding,
|
||||
crudRef
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,310 @@
|
||||
import mockUtil from "/src/mock/base";
|
||||
|
||||
const options = {
|
||||
name: "FormValidation",
|
||||
idGenerator: 0
|
||||
};
|
||||
const list = [
|
||||
{
|
||||
name: "王小虎",
|
||||
age: 15,
|
||||
password: "",
|
||||
status: "2",
|
||||
url: "https://baidu.com"
|
||||
},
|
||||
{
|
||||
name: "张三",
|
||||
age: 18,
|
||||
password: "",
|
||||
url: "https://baidu.com"
|
||||
},
|
||||
{
|
||||
status: "2"
|
||||
}
|
||||
];
|
||||
|
||||
const dictData = [
|
||||
{
|
||||
value: "zhinan",
|
||||
label: "指南",
|
||||
children: [
|
||||
{
|
||||
value: "shejiyuanze",
|
||||
label: "设计原则",
|
||||
children: [
|
||||
{
|
||||
value: "yizhi",
|
||||
label: "一致"
|
||||
},
|
||||
{
|
||||
value: "fankui",
|
||||
label: "反馈"
|
||||
},
|
||||
{
|
||||
value: "xiaolv",
|
||||
label: "效率"
|
||||
},
|
||||
{
|
||||
value: "kekong",
|
||||
label: "可控"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "daohang",
|
||||
label: "导航",
|
||||
children: [
|
||||
{
|
||||
value: "cexiangdaohang",
|
||||
label: "侧向导航"
|
||||
},
|
||||
{
|
||||
value: "dingbudaohang",
|
||||
label: "顶部导航"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "zujian",
|
||||
label: "组件",
|
||||
children: [
|
||||
{
|
||||
value: "basic",
|
||||
label: "Basic",
|
||||
children: [
|
||||
{
|
||||
value: "layout",
|
||||
label: "Layout 布局"
|
||||
},
|
||||
{
|
||||
value: "color",
|
||||
label: "Color 色彩"
|
||||
},
|
||||
{
|
||||
value: "typography",
|
||||
label: "Typography 字体"
|
||||
},
|
||||
{
|
||||
value: "icon",
|
||||
label: "Icon 图标"
|
||||
},
|
||||
{
|
||||
value: "button",
|
||||
label: "Button 按钮"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "form",
|
||||
label: "Form",
|
||||
children: [
|
||||
{
|
||||
value: "radio",
|
||||
label: "Radio 单选框"
|
||||
},
|
||||
{
|
||||
value: "checkbox",
|
||||
label: "Checkbox 多选框"
|
||||
},
|
||||
{
|
||||
value: "input",
|
||||
label: "Input 输入框"
|
||||
},
|
||||
{
|
||||
value: "input-number",
|
||||
label: "InputNumber 计数器"
|
||||
},
|
||||
{
|
||||
value: "select",
|
||||
label: "Select 选择器"
|
||||
},
|
||||
{
|
||||
value: "cascader",
|
||||
label: "Cascader 级联选择器"
|
||||
},
|
||||
{
|
||||
value: "switch",
|
||||
label: "Switch 开关"
|
||||
},
|
||||
{
|
||||
value: "slider",
|
||||
label: "Slider 滑块"
|
||||
},
|
||||
{
|
||||
value: "time-picker",
|
||||
label: "TimePicker 时间选择器"
|
||||
},
|
||||
{
|
||||
value: "date-picker",
|
||||
label: "DatePicker 日期选择器"
|
||||
},
|
||||
{
|
||||
value: "datetime-picker",
|
||||
label: "DateTimePicker 日期时间选择器"
|
||||
},
|
||||
{
|
||||
value: "upload",
|
||||
label: "Upload 上传"
|
||||
},
|
||||
{
|
||||
value: "rate",
|
||||
label: "Rate 评分"
|
||||
},
|
||||
{
|
||||
value: "form",
|
||||
label: "Form 表单"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "data",
|
||||
label: "Data",
|
||||
children: [
|
||||
{
|
||||
value: "table",
|
||||
label: "Table 表格"
|
||||
},
|
||||
{
|
||||
value: "tag",
|
||||
label: "Tag 标签"
|
||||
},
|
||||
{
|
||||
value: "progress",
|
||||
label: "Progress 进度条"
|
||||
},
|
||||
{
|
||||
value: "tree",
|
||||
label: "Tree 树形控件"
|
||||
},
|
||||
{
|
||||
value: "pagination",
|
||||
label: "Pagination 分页"
|
||||
},
|
||||
{
|
||||
value: "badge",
|
||||
label: "Badge 标记"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "notice",
|
||||
label: "Notice",
|
||||
children: [
|
||||
{
|
||||
value: "alert",
|
||||
label: "Alert 警告"
|
||||
},
|
||||
{
|
||||
value: "loading",
|
||||
label: "Loading 加载"
|
||||
},
|
||||
{
|
||||
value: "message",
|
||||
label: "Message 消息提示"
|
||||
},
|
||||
{
|
||||
value: "message-box",
|
||||
label: "MessageBox 弹框"
|
||||
},
|
||||
{
|
||||
value: "notification",
|
||||
label: "Notification 通知"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "navigation",
|
||||
label: "Navigation",
|
||||
children: [
|
||||
{
|
||||
value: "menu",
|
||||
label: "NavMenu 导航菜单"
|
||||
},
|
||||
{
|
||||
value: "tabs",
|
||||
label: "Tabs 标签页"
|
||||
},
|
||||
{
|
||||
value: "breadcrumb",
|
||||
label: "Breadcrumb 面包屑"
|
||||
},
|
||||
{
|
||||
value: "dropdown",
|
||||
label: "Dropdown 下拉菜单"
|
||||
},
|
||||
{
|
||||
value: "steps",
|
||||
label: "Steps 步骤条"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "others",
|
||||
label: "Others",
|
||||
children: [
|
||||
{
|
||||
value: "dialog",
|
||||
label: "Dialog 对话框"
|
||||
},
|
||||
{
|
||||
value: "tooltip",
|
||||
label: "Tooltip 文字提示"
|
||||
},
|
||||
{
|
||||
value: "popover",
|
||||
label: "Popover 弹出框"
|
||||
},
|
||||
{
|
||||
value: "card",
|
||||
label: "Card 卡片"
|
||||
},
|
||||
{
|
||||
value: "carousel",
|
||||
label: "Carousel 走马灯"
|
||||
},
|
||||
{
|
||||
value: "collapse",
|
||||
label: "Collapse 折叠面板"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "ziyuan",
|
||||
label: "资源",
|
||||
children: [
|
||||
{
|
||||
value: "axure",
|
||||
label: "Axure Components"
|
||||
},
|
||||
{
|
||||
value: "sketch",
|
||||
label: "Sketch Templates"
|
||||
},
|
||||
{
|
||||
value: "jiaohu",
|
||||
label: "组件交互文档"
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
options.list = list;
|
||||
options.copyTimes = 1000;
|
||||
const mock = mockUtil.buildMock(options);
|
||||
mock.push({
|
||||
path: "/select/cascadeData",
|
||||
method: "get",
|
||||
handle(req) {
|
||||
return {
|
||||
code: 0,
|
||||
msg: "success",
|
||||
data: dictData
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
export default mock;
|
||||
Reference in New Issue
Block a user