mirror of
https://github.com/certd/certd.git
synced 2026-05-16 13:17:29 +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/BasisColumnMergePlugin";
|
||||
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,69 @@
|
||||
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 {
|
||||
output: {},
|
||||
crudOptions: {
|
||||
settings: {
|
||||
viewFormUseCellComponent: true
|
||||
},
|
||||
request: {
|
||||
pageRequest,
|
||||
addRequest,
|
||||
editRequest,
|
||||
delRequest
|
||||
},
|
||||
columns: {
|
||||
id: {
|
||||
title: "ID",
|
||||
key: "id",
|
||||
type: "number",
|
||||
column: {
|
||||
width: 50
|
||||
},
|
||||
form: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
text: {
|
||||
title: "text",
|
||||
type: "text"
|
||||
},
|
||||
readonly: {
|
||||
title: "只读字段",
|
||||
type: "text",
|
||||
readonly: true
|
||||
},
|
||||
useCell: {
|
||||
title: "查看使用cell组件",
|
||||
type: "dict-select",
|
||||
readonly: true,
|
||||
dict: dict({
|
||||
url: "/mock/dicts/OpenStatusEnum"
|
||||
}),
|
||||
viewForm: {
|
||||
component: {
|
||||
vModel: "modelValue"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<fs-page>
|
||||
<template #header>
|
||||
<div class="title">可以实现类似dict的公共属性</div>
|
||||
<div class="more"><a target="_blank" href="http://fast-crud.docmirror.cn/guide/advance/column-type.html#修改官方字段类型配置"> 字段合并插件帮助文档</a></div>
|
||||
</template>
|
||||
<fs-crud ref="crudRef" v-bind="crudBinding">
|
||||
<template #actionbar-right>
|
||||
<span class="fs-desc">此示例实现只需配置readonly: true，即可关闭添加和编辑时该字段的显示，更多说明请点击右上角帮助</span>
|
||||
</template>
|
||||
</fs-crud>
|
||||
</fs-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent, ref, onMounted } from "vue";
|
||||
import createCrudOptions from "./crud";
|
||||
import { useFs } from "@fast-crud/fast-crud";
|
||||
export default defineComponent({
|
||||
name: "BasisColumnMergePlugin",
|
||||
setup() {
|
||||
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
|
||||
// 页面打开后获取列表数据
|
||||
onMounted(() => {
|
||||
crudExpose.doRefresh();
|
||||
});
|
||||
|
||||
return {
|
||||
crudBinding,
|
||||
crudRef
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,25 @@
|
||||
import mockUtil from "/src/mock/base";
|
||||
const options = {
|
||||
name: "BasisColumnMergePlugin",
|
||||
idGenerator: 0
|
||||
};
|
||||
const list = [
|
||||
{
|
||||
text: "点击右边查看按钮看效果",
|
||||
readonly: "我是只读",
|
||||
useCell: "1"
|
||||
},
|
||||
{
|
||||
text: "点击编辑按钮查看效果",
|
||||
readonly: "我是只读",
|
||||
useCell: "2"
|
||||
},
|
||||
{
|
||||
text: "正常字段",
|
||||
readonly: "我是只读",
|
||||
useCell: "0"
|
||||
}
|
||||
];
|
||||
options.list = list;
|
||||
const mock = mockUtil.buildMock(options);
|
||||
export default mock;
|
||||
@@ -0,0 +1,50 @@
|
||||
import { requestForMock } from "/src/api/service";
|
||||
const request = requestForMock;
|
||||
const apiPrefix = "/mock/BasisColumnsSet";
|
||||
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 }
|
||||
});
|
||||
}
|
||||
|
||||
export function BatchDelete(ids) {
|
||||
return request({
|
||||
url: apiPrefix + "/batchDelete",
|
||||
method: "post",
|
||||
data: { ids }
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
import * as api from "./api";
|
||||
import { dict } from "@fast-crud/fast-crud";
|
||||
import { ref } from "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);
|
||||
};
|
||||
return {
|
||||
crudOptions: {
|
||||
request: {
|
||||
pageRequest,
|
||||
addRequest,
|
||||
editRequest,
|
||||
delRequest
|
||||
},
|
||||
toolbar: {
|
||||
columnsFilter: {
|
||||
mode: "default"
|
||||
}
|
||||
},
|
||||
columns: {
|
||||
id: {
|
||||
title: "ID",
|
||||
key: "id",
|
||||
type: "number",
|
||||
column: {
|
||||
width: 50
|
||||
},
|
||||
form: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
radio: {
|
||||
title: "状态",
|
||||
search: { show: true },
|
||||
type: "dict-radio",
|
||||
dict: dict({
|
||||
url: "/mock/dicts/OpenStatusEnum?single"
|
||||
})
|
||||
},
|
||||
disabled: {
|
||||
title: "列设置禁用",
|
||||
type: "text",
|
||||
column: {
|
||||
columnSetDisabled: true
|
||||
}
|
||||
},
|
||||
hidden: {
|
||||
title: "列设置隐藏",
|
||||
type: "text",
|
||||
column: {
|
||||
columnSetShow: false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<fs-page>
|
||||
<fs-crud ref="crudRef" v-bind="crudBinding">
|
||||
<template #actionbar-right>
|
||||
<a-alert class="ml-1" type="warning" message="列设置可以禁用或者隐藏某字段勾选" />
|
||||
<a-button @click="columnsSetToggleMode()"> 切换简单模式 </a-button>
|
||||
</template>
|
||||
</fs-crud>
|
||||
</fs-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, onMounted, Ref } from "vue";
|
||||
import createCrudOptions from "./crud.jsx";
|
||||
import { useExpose, useCrud, CrudBinding } from "@fast-crud/fast-crud";
|
||||
import { message, Modal, notification } from "ant-design-vue";
|
||||
export default defineComponent({
|
||||
name: "BasisColumnsSet",
|
||||
setup() {
|
||||
// crud组件的ref
|
||||
const crudRef = ref();
|
||||
// crud 配置的ref
|
||||
const crudBinding: Ref<CrudBinding> = ref({});
|
||||
// 暴露的方法
|
||||
const { expose } = useExpose({ crudRef, crudBinding });
|
||||
// 你的crud配置
|
||||
const { crudOptions, selectedRowKeys } = 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();
|
||||
});
|
||||
|
||||
function columnsSetToggleMode() {
|
||||
crudBinding.value.toolbar.columnsFilter.mode =
|
||||
crudBinding.value.toolbar.columnsFilter.mode === "simple" ? "default" : "simple";
|
||||
message.info("当前列设置组件的模式为：" + crudBinding.value.toolbar.columnsFilter.mode);
|
||||
}
|
||||
|
||||
return {
|
||||
crudBinding,
|
||||
crudRef,
|
||||
columnsSetToggleMode
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,19 @@
|
||||
import mockUtil from "/src/mock/base";
|
||||
const options = {
|
||||
name: "BasisColumnsSet",
|
||||
idGenerator: 0
|
||||
};
|
||||
const list = [
|
||||
{
|
||||
radio: "1"
|
||||
},
|
||||
{
|
||||
radio: "2"
|
||||
},
|
||||
{
|
||||
radio: "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/FormComputeMore";
|
||||
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,79 @@
|
||||
import * as api from "./api";
|
||||
import { requestForMock } from "/src/api/service";
|
||||
import { useCompute } from "@fast-crud/fast-crud";
|
||||
import { message } from "ant-design-vue";
|
||||
import { ref, computed } from "vue";
|
||||
const { asyncCompute, compute } = useCompute();
|
||||
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);
|
||||
};
|
||||
|
||||
//普通的ref引用，可以动态切换配置
|
||||
const defValueRef = ref("我是动态的默认值");
|
||||
const defValueComputed = computed(() => {
|
||||
return defValueRef.value;
|
||||
});
|
||||
return {
|
||||
output: {
|
||||
defValueRef,
|
||||
defValueComputed
|
||||
},
|
||||
crudOptions: {
|
||||
request: {
|
||||
pageRequest,
|
||||
addRequest,
|
||||
editRequest,
|
||||
delRequest
|
||||
},
|
||||
table: {
|
||||
scroll: {
|
||||
x: 1500
|
||||
}
|
||||
},
|
||||
form: {
|
||||
labelCol: { span: 8 },
|
||||
wrapperCol: { span: 14 }
|
||||
},
|
||||
rowHandle: {
|
||||
fixed: "right",
|
||||
align:'center',
|
||||
},
|
||||
columns: {
|
||||
id: {
|
||||
title: "ID",
|
||||
key: "id",
|
||||
type: "number",
|
||||
column: {
|
||||
width: 50
|
||||
},
|
||||
form: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
defValue: {
|
||||
title: "默认值",
|
||||
type: "text",
|
||||
search: { show: true, value: null },
|
||||
form: {
|
||||
// form.value不支持asyncCompute
|
||||
// 假如你的默认值异步获取的，那么你自己必须保证先异步计算完成之后，才能打开对话框。
|
||||
// 因为在打开对话框时，默认值就必须得设置好。
|
||||
value: defValueRef
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<fs-page>
|
||||
<template #header>
|
||||
<div class="title">动态计算-更多测试</div>
|
||||
</template>
|
||||
<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
|
||||
</fs-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent, ref, onMounted } from "vue";
|
||||
import { useCrud, useExpose } from "@fast-crud/fast-crud";
|
||||
import createCrudOptions from "./crud";
|
||||
export default defineComponent({
|
||||
name: "BasisComputeMore",
|
||||
setup() {
|
||||
// crud组件的ref
|
||||
const crudRef = ref();
|
||||
// crud 配置的ref
|
||||
const crudBinding = ref();
|
||||
// 暴露的方法
|
||||
const { expose } = useExpose({ crudRef, crudBinding });
|
||||
// 你的crud配置
|
||||
const { crudOptions, output } = 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,
|
||||
...output
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,32 @@
|
||||
import mockUtil from "/src/mock/base";
|
||||
const options = {
|
||||
name: "FormComputeMore",
|
||||
idGenerator: 0
|
||||
};
|
||||
const list = [
|
||||
{
|
||||
ref: "根据showRef显示",
|
||||
compute: true,
|
||||
status: "1",
|
||||
remote: "2",
|
||||
shower: "---> 点右边编辑查看示例效果",
|
||||
remote2: "2",
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
compute: false,
|
||||
status: "2",
|
||||
remote: "0",
|
||||
remote2: "2",
|
||||
editable: false
|
||||
},
|
||||
{
|
||||
compute: true,
|
||||
status: "0",
|
||||
remote2: "2",
|
||||
editable: true
|
||||
}
|
||||
];
|
||||
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/FormCompute";
|
||||
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,211 @@
|
||||
import * as api from "./api";
|
||||
import { requestForMock } from "/src/api/service";
|
||||
import { useCompute } from "@fast-crud/fast-crud";
|
||||
import { message } from "ant-design-vue";
|
||||
import { ref, computed } from "vue";
|
||||
const { asyncCompute, compute } = useCompute();
|
||||
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);
|
||||
};
|
||||
|
||||
//普通的ref引用，可以动态切换配置
|
||||
const showRef = ref(false);
|
||||
const showTableRef = ref(true);
|
||||
const showTableComputed = computed(() => {
|
||||
return showTableRef.value;
|
||||
});
|
||||
|
||||
const columnComponentShowRef = ref(true);
|
||||
const columnComponentShowComputed = computed(() => {
|
||||
return columnComponentShowRef.value;
|
||||
});
|
||||
|
||||
return {
|
||||
output: {
|
||||
showRef,
|
||||
showTableRef,
|
||||
columnComponentShowRef
|
||||
},
|
||||
crudOptions: {
|
||||
request: {
|
||||
pageRequest,
|
||||
addRequest,
|
||||
editRequest,
|
||||
delRequest
|
||||
},
|
||||
table: {
|
||||
scroll: {
|
||||
x: 1500
|
||||
},
|
||||
//通过switch动态显隐table
|
||||
show: showTableComputed //不仅支持computed，直接传showTableRef也是可以的
|
||||
},
|
||||
form: {
|
||||
labelCol: { span: 8 },
|
||||
wrapperCol: { span: 14 }
|
||||
},
|
||||
rowHandle: {
|
||||
fixed: "right",
|
||||
buttons: {
|
||||
edit: {
|
||||
show: compute(({ row }) => {
|
||||
return row.editable;
|
||||
})
|
||||
},
|
||||
remove: {
|
||||
show: compute(({ row }) => {
|
||||
return row.editable;
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
columns: {
|
||||
id: {
|
||||
title: "ID",
|
||||
key: "id",
|
||||
type: "number",
|
||||
column: {
|
||||
width: 50,
|
||||
resizable: true
|
||||
},
|
||||
form: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
refSwitch: {
|
||||
title: "ref引用切换",
|
||||
type: "text",
|
||||
form: {
|
||||
helper: "点我切换右边的输入框显示"
|
||||
}
|
||||
},
|
||||
ref: {
|
||||
title: "根据ref引用显示",
|
||||
type: ["text"],
|
||||
form: {
|
||||
component: {
|
||||
show: showRef
|
||||
},
|
||||
helper: "我会根据showRef进行显隐"
|
||||
}
|
||||
},
|
||||
compute: {
|
||||
title: "compute",
|
||||
search: { show: false },
|
||||
type: "text",
|
||||
column: {
|
||||
show: columnComponentShowComputed,
|
||||
columnSetDisabled: true, //这里采用自定义控制显隐，那么列设置里面就要禁用
|
||||
// columnSetShow: false, //直接不在列设置里面显示也行
|
||||
component: {
|
||||
name: "a-switch",
|
||||
vModel: "checked"
|
||||
}
|
||||
},
|
||||
form: {
|
||||
component: {
|
||||
name: "a-switch",
|
||||
vModel: "checked"
|
||||
},
|
||||
helper: "点我触发动态计算"
|
||||
}
|
||||
},
|
||||
shower: {
|
||||
title: "根据compute显示",
|
||||
search: { show: false },
|
||||
type: "button",
|
||||
form: {
|
||||
component: {
|
||||
show: compute(({ form }) => {
|
||||
return form.compute;
|
||||
})
|
||||
}
|
||||
},
|
||||
column: {
|
||||
width: 250,
|
||||
resizable: true,
|
||||
component: {
|
||||
show: compute(({ row }) => {
|
||||
return row.compute;
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
remote: {
|
||||
title: "asyncCompute",
|
||||
search: { show: true },
|
||||
type: "text",
|
||||
form: {
|
||||
component: {
|
||||
name: "a-select",
|
||||
vModel: "value",
|
||||
placeholder: "异步计算远程获取options",
|
||||
options: asyncCompute({
|
||||
async asyncFn(watchValue, context) {
|
||||
const url = "/mock/dicts/OpenStatusEnum?remote";
|
||||
return await requestForMock({ url });
|
||||
}
|
||||
})
|
||||
},
|
||||
helper: "我的options是异步计算远程获取的,只会获取一次"
|
||||
}
|
||||
},
|
||||
remote2: {
|
||||
title: "监听switch触发异步计算",
|
||||
search: { show: false },
|
||||
type: "text",
|
||||
form: {
|
||||
component: {
|
||||
name: "a-select",
|
||||
vModel: "value",
|
||||
placeholder: "异步计算远程获取options",
|
||||
options: asyncCompute({
|
||||
watch({ form }) {
|
||||
return form.compute;
|
||||
},
|
||||
async asyncFn(watchValue) {
|
||||
message.info("监听switch,触发远程获取options");
|
||||
const url = watchValue
|
||||
? "/mock/dicts/OpenStatusEnum?remote"
|
||||
: "/mock/dicts/moreOpenStatusEnum?remote";
|
||||
return await requestForMock({ url });
|
||||
}
|
||||
})
|
||||
},
|
||||
helper: "监听其他属性修改后，触发重新计算"
|
||||
},
|
||||
column: {
|
||||
width: 200
|
||||
}
|
||||
},
|
||||
editable: {
|
||||
title: "可编辑",
|
||||
search: { show: false },
|
||||
type: "text",
|
||||
column: {
|
||||
fixed: "right",
|
||||
component: {
|
||||
name: "a-switch",
|
||||
vModel: "checked"
|
||||
}
|
||||
},
|
||||
form: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<fs-page>
|
||||
<template #header>
|
||||
<div class="title">
|
||||
动态计算
|
||||
<fs-icon icon="ion:apps-sharp" :spin="true" />
|
||||
</div>
|
||||
<div class="more">
|
||||
<a target="_blank" href="http://fast-crud.docmirror.cn/guide/advance/compute.html">帮助说明</a>
|
||||
</div>
|
||||
</template>
|
||||
<fs-crud ref="crudRef" v-bind="crudBinding">
|
||||
<template #actionbar-right>
|
||||
<a-tooltip title="我能控制表格显隐">
|
||||
<span class="ml-1">表格显隐:<a-switch v-model:checked="showTableRef"></a-switch></span>
|
||||
</a-tooltip>
|
||||
<span class="ml-1">列显隐:<a-switch v-model:checked="columnComponentShowRef"></a-switch></span>
|
||||
<a-alert class="ml-1" type="info" message="点击下方右边的编辑按钮查看示例效果-----------> ↓↓↓↓↓" />
|
||||
</template>
|
||||
<template #form_refSwitch>
|
||||
<a-switch v-model:checked="showRef"></a-switch>
|
||||
</template>
|
||||
</fs-crud>
|
||||
</fs-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent, ref, onMounted } from "vue";
|
||||
import { useCrud, useExpose } from "@fast-crud/fast-crud";
|
||||
import createCrudOptions from "./crud";
|
||||
export default defineComponent({
|
||||
name: "BasisCompute",
|
||||
setup() {
|
||||
// crud组件的ref
|
||||
const crudRef = ref();
|
||||
// crud 配置的ref
|
||||
const crudBinding = ref();
|
||||
// 暴露的方法
|
||||
const { expose } = useExpose({ crudRef, crudBinding });
|
||||
// 你的crud配置
|
||||
const { crudOptions, output } = 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,
|
||||
...output
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,34 @@
|
||||
import mockUtil from "/src/mock/base";
|
||||
const options = {
|
||||
name: "FormCompute",
|
||||
idGenerator: 0
|
||||
};
|
||||
const list = [
|
||||
{
|
||||
ref: "根据showRef显示",
|
||||
compute: true,
|
||||
status: "1",
|
||||
remote: "2",
|
||||
shower: "---> 点右边编辑查看示例效果",
|
||||
remote2: "2",
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
compute: false,
|
||||
shower: "---> 点右边编辑查看示例效果",
|
||||
status: "2",
|
||||
remote: "0",
|
||||
remote2: "2",
|
||||
editable: false
|
||||
},
|
||||
{
|
||||
compute: true,
|
||||
shower: "---> 点右边编辑查看示例效果",
|
||||
status: "0",
|
||||
remote2: "2",
|
||||
editable: true
|
||||
}
|
||||
];
|
||||
options.list = list;
|
||||
const mock = mockUtil.buildMock(options);
|
||||
export default mock;
|
||||
@@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<fs-page>
|
||||
<fs-crud ref="crudRef" v-bind="crudBinding" />
|
||||
</fs-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent, ref, onMounted } from "vue";
|
||||
import { dict, useCrud } from "@fast-crud/fast-crud";
|
||||
import { useExpose } from "@fast-crud/fast-crud";
|
||||
import _ from "lodash-es";
|
||||
|
||||
//此处为crudOptions配置
|
||||
const createCrudOptions = function ({ expose }) {
|
||||
//本地模拟后台crud接口方法 ----开始
|
||||
const records = [{ id: 1, name: "Hello World", type: 1 }];
|
||||
const pageRequest = async (query) => {
|
||||
return {
|
||||
records,
|
||||
currentPage: 1,
|
||||
pageSize: 20,
|
||||
total: records.length
|
||||
};
|
||||
};
|
||||
const editRequest = async ({ form, row }) => {
|
||||
const target = _.find(records, (item) => {
|
||||
return row.id === item.id;
|
||||
});
|
||||
_.merge(target, form);
|
||||
return target;
|
||||
};
|
||||
const delRequest = async ({ row }) => {
|
||||
_.remove(records, (item) => {
|
||||
return item.id === row.id;
|
||||
});
|
||||
};
|
||||
const addRequest = async ({ form }) => {
|
||||
const maxRecord = _.maxBy(records, (item) => {
|
||||
return item.id;
|
||||
});
|
||||
form.id = (maxRecord?.id || 0) + 1;
|
||||
records.push(form);
|
||||
return form;
|
||||
};
|
||||
//本地模拟后台crud接口方法 -----结束
|
||||
|
||||
return {
|
||||
crudOptions: {
|
||||
request: {
|
||||
pageRequest,
|
||||
addRequest,
|
||||
editRequest,
|
||||
delRequest
|
||||
},
|
||||
columns: {
|
||||
name: {
|
||||
title: "姓名",
|
||||
type: "text",
|
||||
search: { show: true },
|
||||
column: {
|
||||
resizable: true,
|
||||
width: 200
|
||||
}
|
||||
},
|
||||
type: {
|
||||
title: "类型",
|
||||
type: "dict-select",
|
||||
dict: dict({
|
||||
data: [
|
||||
{ value: 1, label: "开始" },
|
||||
{ value: 0, label: "停止" }
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
//此处为组件定义
|
||||
export default defineComponent({
|
||||
name: "FsCrudFirst",
|
||||
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,42 @@
|
||||
import { requestForMock } from "/src/api/service";
|
||||
const request = requestForMock;
|
||||
const apiPrefix = "/mock/BasisI18n";
|
||||
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";
|
||||
import { dict } from "@fast-crud/fast-crud";
|
||||
import { useI18n } from "vue-i18n";
|
||||
export default function ({ expose }) {
|
||||
const { t } = useI18n();
|
||||
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: {
|
||||
id: {
|
||||
title: "ID",
|
||||
key: "id",
|
||||
type: "number",
|
||||
column: {
|
||||
width: 50
|
||||
},
|
||||
form: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
name: {
|
||||
title: t("app.crud.i18n.name"),
|
||||
type: "text",
|
||||
search: { show: true }
|
||||
},
|
||||
city: {
|
||||
title: t("app.crud.i18n.city"),
|
||||
type: "dict-select",
|
||||
search: { show: true },
|
||||
dict: dict({
|
||||
value: "id",
|
||||
label: "text",
|
||||
data: [
|
||||
{ id: "sz", text: "深圳", color: "success" },
|
||||
{ id: "gz", text: "广州", color: "blue" },
|
||||
{ id: "bj", text: "北京" },
|
||||
{ id: "wh", text: "武汉" },
|
||||
{ id: "sh", text: "上海" }
|
||||
]
|
||||
})
|
||||
},
|
||||
radio: {
|
||||
title: t("app.crud.i18n.status"),
|
||||
search: { show: true },
|
||||
type: "dict-radio",
|
||||
dict: dict({
|
||||
url: "/mock/dicts/OpenStatusEnum?single"
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<fs-page>
|
||||
<template #header>
|
||||
<div class="title">CRUD示例【国际化】</div>
|
||||
<div class="more"><a-button @click="showDemo">更多</a-button></div>
|
||||
</template>
|
||||
<fs-crud ref="crudRef" v-bind="crudBinding">
|
||||
<template #actionbar-right>
|
||||
<a-alert class="ml-1" type="warning" 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";
|
||||
import { message } from "ant-design-vue";
|
||||
export default defineComponent({
|
||||
name: "BasisI18n",
|
||||
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();
|
||||
});
|
||||
|
||||
function showDemo() {
|
||||
message("演示按钮");
|
||||
}
|
||||
return {
|
||||
crudBinding,
|
||||
crudRef,
|
||||
showDemo
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,25 @@
|
||||
import mockUtil from "/src/mock/base";
|
||||
const options = {
|
||||
name: "BasisI18n",
|
||||
idGenerator: 0
|
||||
};
|
||||
const list = [
|
||||
{
|
||||
radio: "1",
|
||||
name: "张三",
|
||||
city: "sz"
|
||||
},
|
||||
{
|
||||
radio: "2",
|
||||
name: "李四",
|
||||
city: "gz"
|
||||
},
|
||||
{
|
||||
radio: "0",
|
||||
name: "王五",
|
||||
city: "sh"
|
||||
}
|
||||
];
|
||||
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/BasisLayoutCard";
|
||||
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,73 @@
|
||||
import * as api from "./api";
|
||||
import { dict } from "@fast-crud/fast-crud";
|
||||
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: {
|
||||
container: {
|
||||
is: "fs-layout-card"
|
||||
},
|
||||
request: {
|
||||
pageRequest,
|
||||
addRequest,
|
||||
editRequest,
|
||||
delRequest
|
||||
},
|
||||
columns: {
|
||||
id: {
|
||||
title: "ID",
|
||||
key: "id",
|
||||
type: "number",
|
||||
column: {
|
||||
width: 50
|
||||
},
|
||||
form: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
name: {
|
||||
title: "姓名",
|
||||
type: "text",
|
||||
search: { show: true }
|
||||
},
|
||||
city: {
|
||||
title: "城市",
|
||||
type: "dict-select",
|
||||
search: { show: true },
|
||||
dict: dict({
|
||||
value: "id",
|
||||
label: "text",
|
||||
data: [
|
||||
{ id: "sz", text: "深圳", color: "success" },
|
||||
{ id: "gz", text: "广州", color: "blue" },
|
||||
{ id: "bj", text: "北京" },
|
||||
{ id: "wh", text: "武汉" },
|
||||
{ id: "sh", text: "上海" }
|
||||
]
|
||||
})
|
||||
},
|
||||
radio: {
|
||||
title: "单选",
|
||||
search: { show: true },
|
||||
type: "dict-radio",
|
||||
dict: dict({
|
||||
url: "/mock/dicts/OpenStatusEnum?single"
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<fs-page class="page-layout-card">
|
||||
<fs-crud ref="crudRef" 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: "BasisLayoutCard",
|
||||
setup() {
|
||||
// crud组件的ref
|
||||
const crudRef = ref();
|
||||
// crud 配置的ref
|
||||
const crudBinding = ref();
|
||||
// 暴露的方法
|
||||
const { crudExpose } = useExpose({ crudRef, crudBinding });
|
||||
// 你的crud配置
|
||||
const { crudOptions } = createCrudOptions({ crudExpose });
|
||||
// 初始化crud配置
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
|
||||
const { resetCrudOptions } = useCrud({ crudExpose, crudOptions });
|
||||
// 你可以调用此方法，重新初始化crud配置
|
||||
// resetCrudOptions(options)
|
||||
|
||||
// 页面打开后获取列表数据
|
||||
onMounted(() => {
|
||||
crudExpose.doRefresh();
|
||||
});
|
||||
|
||||
return {
|
||||
crudBinding,
|
||||
crudRef
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.page-layout-card {
|
||||
background-color: #eee;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,25 @@
|
||||
import mockUtil from "/src/mock/base";
|
||||
const options = {
|
||||
name: "BasisLayoutCard",
|
||||
idGenerator: 0
|
||||
};
|
||||
const list = [
|
||||
{
|
||||
radio: "1",
|
||||
name: "张三",
|
||||
city: "sz"
|
||||
},
|
||||
{
|
||||
radio: "2",
|
||||
name: "李四",
|
||||
city: "gz"
|
||||
},
|
||||
{
|
||||
radio: "0",
|
||||
name: "王五",
|
||||
city: "sh"
|
||||
}
|
||||
];
|
||||
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/BasisLayoutCustom";
|
||||
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,75 @@
|
||||
import * as api from "./api";
|
||||
import { dict } from "@fast-crud/fast-crud";
|
||||
import CustomLayout from "./custom-layout.vue";
|
||||
import { shallowRef } from "vue";
|
||||
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: {
|
||||
container: {
|
||||
is: shallowRef(CustomLayout) //可以将自定义布局组件全局注册，这里只需要配置name即可
|
||||
},
|
||||
request: {
|
||||
pageRequest,
|
||||
addRequest,
|
||||
editRequest,
|
||||
delRequest
|
||||
},
|
||||
columns: {
|
||||
id: {
|
||||
title: "ID",
|
||||
key: "id",
|
||||
type: "number",
|
||||
column: {
|
||||
width: 50
|
||||
},
|
||||
form: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
name: {
|
||||
title: "姓名",
|
||||
type: "text",
|
||||
search: { show: true }
|
||||
},
|
||||
city: {
|
||||
title: "城市",
|
||||
type: "dict-select",
|
||||
search: { show: false },
|
||||
dict: dict({
|
||||
value: "id",
|
||||
label: "text",
|
||||
data: [
|
||||
{ id: "sz", text: "深圳", color: "success" },
|
||||
{ id: "gz", text: "广州", color: "blue" },
|
||||
{ id: "bj", text: "北京" },
|
||||
{ id: "wh", text: "武汉" },
|
||||
{ id: "sh", text: "上海" }
|
||||
]
|
||||
})
|
||||
},
|
||||
radio: {
|
||||
title: "单选",
|
||||
search: { show: false },
|
||||
type: "dict-radio",
|
||||
dict: dict({
|
||||
url: "/mock/dicts/OpenStatusEnum?single"
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<div class="custom-layout">
|
||||
<div class="layout-header">
|
||||
<!-- ↓↓↓↓↓ 关键插槽：查询 ↓↓↓↓ -->
|
||||
<slot name="search"></slot>
|
||||
<!-- ↓↓↓↓↓ 关键插槽：工具条 ↓↓↓↓ -->
|
||||
<slot name="toolbar"></slot>
|
||||
</div>
|
||||
<div class="layout-top">
|
||||
<!-- ↓↓↓↓↓ 关键插槽：动作条 ↓↓↓↓ -->
|
||||
<slot name="actionbar"></slot>
|
||||
<!-- ↓↓↓↓↓ 上翻页条 ↓↓↓↓ -->
|
||||
<slot name="pagination"></slot>
|
||||
</div>
|
||||
|
||||
<!-- 高度需要自适应撑开，可以通过flex:1 -->
|
||||
<div class="layout-body">
|
||||
<!-- 默认插槽 -->
|
||||
<slot></slot>
|
||||
<!-- ↓↓↓↓↓ 关键插槽：表格 ↓↓↓↓ -->
|
||||
<slot name="table"></slot>
|
||||
|
||||
<!-- ↓↓↓↓↓ 关键插槽：表单 ↓↓↓↓ -->
|
||||
<slot name="form"></slot>
|
||||
</div>
|
||||
<div class="layout-footer">
|
||||
<!-- ↓↓↓↓↓ 关键插槽：分页条 ↓↓↓↓ -->
|
||||
<slot name="pagination"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
/**
|
||||
* 自定义布局
|
||||
*/
|
||||
export default defineComponent({
|
||||
name: "CustomLayout"
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.custom-layout {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.layout-header {
|
||||
padding: 10px 10px 5px 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.layout-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 5px 10px 5px 10px;
|
||||
}
|
||||
.layout-body {
|
||||
flex: 1; //重要，自适应撑开高度，表格固定表头必须
|
||||
overflow-y: auto;
|
||||
}
|
||||
.fs-crud-actionbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.fs-crud-pagination {
|
||||
text-align: right;
|
||||
padding: 5px 10px 5px 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<fs-page class="page-layout-custom">
|
||||
<template #header>
|
||||
<div class="title">自定义布局</div>
|
||||
</template>
|
||||
<fs-crud ref="crudRef" v-bind="crudBinding">
|
||||
<template #actionbar-right>
|
||||
<a-alert
|
||||
class="ml-1"
|
||||
type="info"
|
||||
message="通过自定义container.is可以自定义布局，甚至可以支持上下两个翻页条 -------->"
|
||||
/>
|
||||
</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: "BasisLayoutCustom",
|
||||
setup() {
|
||||
// crud组件的ref
|
||||
const crudRef = ref();
|
||||
// crud 配置的ref
|
||||
const crudBinding = ref();
|
||||
// 暴露的方法
|
||||
const { crudExpose } = useExpose({ crudRef, crudBinding });
|
||||
// 你的crud配置
|
||||
const { crudOptions } = createCrudOptions({ crudExpose });
|
||||
// 初始化crud配置
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
|
||||
const { resetCrudOptions } = useCrud({ crudExpose, crudOptions });
|
||||
// 你可以调用此方法，重新初始化crud配置
|
||||
// resetCrudOptions(options)
|
||||
|
||||
// 页面打开后获取列表数据
|
||||
onMounted(() => {
|
||||
crudExpose.doRefresh();
|
||||
});
|
||||
|
||||
return {
|
||||
crudBinding,
|
||||
crudRef
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.page-layout-custom {
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,25 @@
|
||||
import mockUtil from "/src/mock/base";
|
||||
const options = {
|
||||
name: "BasisLayoutCustom",
|
||||
idGenerator: 0
|
||||
};
|
||||
const list = [
|
||||
{
|
||||
radio: "1",
|
||||
name: "张三",
|
||||
city: "sz"
|
||||
},
|
||||
{
|
||||
radio: "2",
|
||||
name: "李四",
|
||||
city: "gz"
|
||||
},
|
||||
{
|
||||
radio: "0",
|
||||
name: "王五",
|
||||
city: "sh"
|
||||
}
|
||||
];
|
||||
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/BasisValueChange";
|
||||
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,95 @@
|
||||
import * as api from "./api";
|
||||
import { message } from "ant-design-vue";
|
||||
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 {
|
||||
output: {},
|
||||
crudOptions: {
|
||||
request: {
|
||||
pageRequest,
|
||||
addRequest,
|
||||
editRequest,
|
||||
delRequest
|
||||
},
|
||||
columns: {
|
||||
id: {
|
||||
title: "ID",
|
||||
key: "id",
|
||||
type: "number",
|
||||
column: {
|
||||
width: 50
|
||||
},
|
||||
form: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
switch: {
|
||||
title: "开关",
|
||||
type: "dict-switch",
|
||||
dict: dict({
|
||||
data: [
|
||||
{ value: true, label: "开启" },
|
||||
{ value: false, label: "关闭" }
|
||||
]
|
||||
}),
|
||||
column: {
|
||||
component: {
|
||||
name: "fs-dict-switch",
|
||||
vModel: "checked"
|
||||
},
|
||||
valueChange(context) {
|
||||
console.log("column value changed:", context);
|
||||
}
|
||||
},
|
||||
form: {
|
||||
valueChange({ value, key, form }) {
|
||||
console.log("valueChanged,", key, value, form);
|
||||
message.info(`valueChanged:${key}=${value}`);
|
||||
}
|
||||
}
|
||||
},
|
||||
normal: {
|
||||
title: "value-change",
|
||||
type: "text",
|
||||
form: {
|
||||
valueChange({ value, key, form }) {
|
||||
console.log("valueChanged,", key, value, form);
|
||||
message.info(`valueChanged:${key}=${value}`);
|
||||
}
|
||||
}
|
||||
},
|
||||
immediate: {
|
||||
title: "immediate",
|
||||
type: "text",
|
||||
search: {
|
||||
show: true
|
||||
},
|
||||
form: {
|
||||
valueChange: {
|
||||
handle({ value, key, form, immediate }) {
|
||||
console.log("valueChange,", key, value, "isImmediate=", immediate);
|
||||
message.info(`valueChanged:${key}=${value},isImmediate=${immediate}`);
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<fs-page>
|
||||
<template #header>
|
||||
<div class="title">ValueChange</div>
|
||||
</template>
|
||||
<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
|
||||
</fs-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent, ref, onMounted } from "vue";
|
||||
import { useCrud, useExpose } from "@fast-crud/fast-crud";
|
||||
import createCrudOptions from "./crud";
|
||||
export default defineComponent({
|
||||
name: "BasisValueChange",
|
||||
setup() {
|
||||
// crud组件的ref
|
||||
const crudRef = ref();
|
||||
// crud 配置的ref
|
||||
const crudBinding = ref();
|
||||
// 暴露的方法
|
||||
const { expose } = useExpose({ crudRef, crudBinding });
|
||||
// 你的crud配置
|
||||
const { crudOptions, output } = 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,
|
||||
...output
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,32 @@
|
||||
import mockUtil from "/src/mock/base";
|
||||
const options = {
|
||||
name: "BasisValueChange",
|
||||
idGenerator: 0
|
||||
};
|
||||
const list = [
|
||||
{
|
||||
ref: "根据showRef显示",
|
||||
compute: true,
|
||||
status: "1",
|
||||
remote: "2",
|
||||
shower: "---> 点右边编辑查看示例效果",
|
||||
remote2: "2",
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
compute: false,
|
||||
status: "2",
|
||||
remote: "0",
|
||||
remote2: "2",
|
||||
editable: false
|
||||
},
|
||||
{
|
||||
compute: true,
|
||||
status: "0",
|
||||
remote2: "2",
|
||||
editable: true
|
||||
}
|
||||
];
|
||||
options.list = list;
|
||||
const mock = mockUtil.buildMock(options);
|
||||
export default mock;
|
||||
Reference in New Issue
Block a user