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/ComponentButton";
|
||||
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,115 @@
|
||||
import * as api from "./api";
|
||||
import { requestForMock } from "/src/api/service";
|
||||
import { dict, compute } from "@fast-crud/fast-crud";
|
||||
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);
|
||||
};
|
||||
return {
|
||||
crudOptions: {
|
||||
request: {
|
||||
pageRequest,
|
||||
addRequest,
|
||||
editRequest,
|
||||
delRequest
|
||||
},
|
||||
form: {
|
||||
//配置表单label的宽度
|
||||
labelCol: { span: 6 }
|
||||
},
|
||||
columns: {
|
||||
id: {
|
||||
title: "ID",
|
||||
key: "id",
|
||||
type: "number",
|
||||
column: {
|
||||
width: 50
|
||||
},
|
||||
form: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
button: {
|
||||
title: "按钮",
|
||||
search: { show: true },
|
||||
type: "button",
|
||||
column: {
|
||||
component: {
|
||||
show: compute(({ value }) => {
|
||||
//当value为null时，不显示
|
||||
return value != null;
|
||||
}),
|
||||
on: {
|
||||
// 注意：必须要on前缀
|
||||
onClick({ row }) {
|
||||
message.success("按钮点击:" + row.button);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
url: {
|
||||
title: "url",
|
||||
search: { show: true },
|
||||
type: "text",
|
||||
column: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
link: {
|
||||
title: "链接",
|
||||
search: { show: true },
|
||||
type: "link",
|
||||
column: {
|
||||
component: {
|
||||
on: {
|
||||
// 注意：必须要on前缀
|
||||
onClick({ row }) {
|
||||
if (row.url) {
|
||||
window.open(row.url);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
form: {
|
||||
title: "按钮文字"
|
||||
}
|
||||
},
|
||||
link2: {
|
||||
title: "手写link配置",
|
||||
search: { show: true },
|
||||
type: "text", //form组件用input
|
||||
column: {
|
||||
component: {
|
||||
name: "fs-button", //列展示组件为button
|
||||
vModel: "text", // 将row.link2的值赋值给text属性
|
||||
type: "link", // 按钮展示为链接样式
|
||||
on: {
|
||||
//注册点击事件
|
||||
// 注意：必须要on前缀
|
||||
onClick({ row }) {
|
||||
if (row.url) {
|
||||
window.open(row.url);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
<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: "ComponentButton",
|
||||
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"></style>
|
||||
@@ -0,0 +1,23 @@
|
||||
import mockUtil from "/src/mock/base";
|
||||
const options = {
|
||||
name: "ComponentButton",
|
||||
idGenerator: 0
|
||||
};
|
||||
const list = [
|
||||
{
|
||||
button: "张三",
|
||||
link: "百度",
|
||||
url: "https://www.baidu.com",
|
||||
link2: "手写配置"
|
||||
},
|
||||
{
|
||||
button: "李四",
|
||||
link: "百度",
|
||||
url: "https://www.baidu.com",
|
||||
link2: "手写配置"
|
||||
},
|
||||
{}
|
||||
];
|
||||
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/ComponentCascader";
|
||||
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,137 @@
|
||||
import * as api from "./api";
|
||||
import { requestForMock } from "/src/api/service";
|
||||
import { dict } from "@fast-crud/fast-crud";
|
||||
export default function ({ crudRef }) {
|
||||
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 },
|
||||
labelCol: { span: 4 },
|
||||
wrapperCol: { span: 18 }
|
||||
},
|
||||
columns: {
|
||||
id: {
|
||||
title: "ID",
|
||||
key: "id",
|
||||
type: "number",
|
||||
column: {
|
||||
width: 50
|
||||
},
|
||||
form: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
cascader: {
|
||||
title: "级联",
|
||||
search: { show: true },
|
||||
type: "dict-cascader",
|
||||
dict: dict({
|
||||
cloneable: false,
|
||||
isTree: true,
|
||||
url: "/mock/dicts/cascaderData?single"
|
||||
})
|
||||
},
|
||||
lazyLoad: {
|
||||
title: "懒加载",
|
||||
type: "dict-cascader",
|
||||
dict: dict({
|
||||
url: "/mock/tree/GetTreeChildrenByParentId?lazyLoad",
|
||||
value: "code",
|
||||
label: "name",
|
||||
isTree: true,
|
||||
prototype: true,
|
||||
getNodesByValues(values) {
|
||||
//给cell展示组件调用，根据value值获取节点，每行都会请求一次
|
||||
if (values == null) {
|
||||
return [];
|
||||
}
|
||||
return requestForMock({
|
||||
url: "/mock/tree/GetNodesByValues",
|
||||
params: { values }
|
||||
});
|
||||
}
|
||||
}),
|
||||
form: {
|
||||
component: {
|
||||
vModel: "value",
|
||||
options: [
|
||||
{
|
||||
code: "11",
|
||||
name: "北京",
|
||||
isLeaf: false
|
||||
},
|
||||
{
|
||||
code: "12",
|
||||
name: "天津",
|
||||
isLeaf: false
|
||||
}
|
||||
],
|
||||
loadData: async (selectedOptions) => {
|
||||
console.log("lazyLoad", selectedOptions);
|
||||
const targetOption = selectedOptions[selectedOptions.length - 1];
|
||||
targetOption.loading = true;
|
||||
|
||||
const ret = await requestForMock({
|
||||
url: "/mock/tree/GetTreeChildrenByParentId",
|
||||
params: { parentId: targetOption.code }
|
||||
});
|
||||
targetOption.loading = false;
|
||||
const list = [];
|
||||
for (const item of ret) {
|
||||
list.push({
|
||||
code: item.code,
|
||||
name: item.name,
|
||||
isLeaf: item.leaf === true
|
||||
});
|
||||
}
|
||||
targetOption.children = list;
|
||||
//options.value = [...options.value];
|
||||
},
|
||||
changeOnSelect: true
|
||||
}
|
||||
}
|
||||
},
|
||||
multiple: {
|
||||
title: "可搜索，可只选父节点",
|
||||
type: "dict-cascader",
|
||||
dict: dict({
|
||||
isTree: true,
|
||||
url: "/mock/dicts/cascaderData?multiple"
|
||||
}),
|
||||
form: {
|
||||
component: {
|
||||
showSearch: {
|
||||
filter: (inputValue, path) => {
|
||||
return path.some((option) => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
|
||||
}
|
||||
},
|
||||
"change-on-select": true
|
||||
},
|
||||
helper: "antd cascader 不支持级联多选"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -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: "ComponentCascader",
|
||||
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,23 @@
|
||||
import mockUtil from "/src/mock/base";
|
||||
const options = {
|
||||
name: "ComponentCascader",
|
||||
idGenerator: 0
|
||||
};
|
||||
const list = [
|
||||
{
|
||||
cascader: ["zhinan", "shejiyuanze", "yizhi"],
|
||||
lazyLoad: ["11", "1101", "110101", "110101001"],
|
||||
multiple: ["antdv cascader不支持多选"]
|
||||
},
|
||||
{
|
||||
cascader: ["zhinan", "shejiyuanze", "yizhi"],
|
||||
multiple: ["antdv cascader不支持多选"]
|
||||
},
|
||||
{
|
||||
cascader: ["zhinan", "shejiyuanze", "yizhi"],
|
||||
multiple: ["antdv cascader不支持多选"]
|
||||
}
|
||||
];
|
||||
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/ComponentCheckbox";
|
||||
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 * as api from "./api";
|
||||
import { requestForMock } from "/src/api/service";
|
||||
import { dict } from "@fast-crud/fast-crud";
|
||||
export default function ({ crudRef }) {
|
||||
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
|
||||
}
|
||||
},
|
||||
checkbox: {
|
||||
title: "状态",
|
||||
search: { show: true },
|
||||
type: "dict-checkbox",
|
||||
dict: dict({
|
||||
url: "/mock/dicts/OpenStatusEnum?single"
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -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: "ComponentCheckbox",
|
||||
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,19 @@
|
||||
import mockUtil from "/src/mock/base";
|
||||
const options = {
|
||||
name: "ComponentCheckbox",
|
||||
idGenerator: 0
|
||||
};
|
||||
const list = [
|
||||
{
|
||||
checkbox: ["1", "2"]
|
||||
},
|
||||
{
|
||||
checkbox: "2"
|
||||
},
|
||||
{
|
||||
checkbox: "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/ComponentDate";
|
||||
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,174 @@
|
||||
import * as api from "./api";
|
||||
import { utils } from "@fast-crud/fast-crud";
|
||||
import dayjs from "dayjs";
|
||||
|
||||
console.log("utils", utils);
|
||||
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
|
||||
},
|
||||
table: {
|
||||
scroll: { x: 2000 }
|
||||
},
|
||||
rowHandle: { fixed: "right" },
|
||||
columns: {
|
||||
id: {
|
||||
title: "ID",
|
||||
key: "id",
|
||||
type: "number",
|
||||
column: {
|
||||
width: 50
|
||||
},
|
||||
form: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
timestamp: {
|
||||
title: "时间戳",
|
||||
type: "datetime",
|
||||
search: {
|
||||
show: true,
|
||||
width: 185,
|
||||
component: {}
|
||||
},
|
||||
valueBuilder({ value, row, key }) {
|
||||
console.log("value builder:", key, value, row);
|
||||
if (value != null) {
|
||||
row[key] = dayjs(value);
|
||||
}
|
||||
},
|
||||
valueResolve({ value, row, key }) {
|
||||
if (value != null) {
|
||||
row[key] = value.unix();
|
||||
}
|
||||
}
|
||||
},
|
||||
humanize: {
|
||||
type: ["datetime", "time-humanize"],
|
||||
title: "人性化时间",
|
||||
column: {
|
||||
component: {
|
||||
options: {
|
||||
largest: 2
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
datetime: {
|
||||
title: "日期时间",
|
||||
type: "datetime",
|
||||
form: {
|
||||
component: {
|
||||
valueFormat: "YYYY-MM-DD HH:mm:ss" //输入值的格式
|
||||
}
|
||||
}
|
||||
},
|
||||
format: {
|
||||
title: "格式化",
|
||||
type: "datetime",
|
||||
form: {
|
||||
component: {
|
||||
format: "YYYY年MM月DD日 HH:mm",
|
||||
valueFormat: "YYYY-MM-DD HH:mm:ss" //输入值的格式
|
||||
}
|
||||
},
|
||||
column: {
|
||||
width: 180,
|
||||
component: {
|
||||
// 行展示组件使用的dayjs，
|
||||
format: "YYYY年MM月DD日 HH:mm"
|
||||
}
|
||||
}
|
||||
},
|
||||
date: {
|
||||
title: "仅日期",
|
||||
type: "date",
|
||||
form: {
|
||||
component: {
|
||||
valueFormat: "YYYY-MM-DD HH:mm:ss", //输入值的格式
|
||||
events: {
|
||||
onChange(context) {
|
||||
console.log("change", context);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
time: {
|
||||
title: "仅时间",
|
||||
type: "time",
|
||||
form: {
|
||||
component: {
|
||||
valueFormat: "YYYY-MM-DD HH:mm:ss" //输入值的格式
|
||||
}
|
||||
}
|
||||
},
|
||||
disabledDate: {
|
||||
title: "禁用日期",
|
||||
type: "date",
|
||||
form: {
|
||||
component: {
|
||||
valueFormat: "YYYY-MM-DD HH:mm:ss", //输入值的格式
|
||||
disabledDate(current) {
|
||||
return current && current < dayjs().endOf("day");
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
daterange: {
|
||||
title: "日期范围",
|
||||
type: "daterange",
|
||||
search: { show: true, width: 300 },
|
||||
valueBuilder({ row, key }) {
|
||||
if (!utils.strings.hasEmpty(row.daterangeStart, row.daterangeEnd)) {
|
||||
row[key] = [dayjs(row.daterangeStart), dayjs(row.daterangeEnd)];
|
||||
}
|
||||
}
|
||||
},
|
||||
datetimerange: {
|
||||
title: "日期时间范围",
|
||||
type: "datetimerange",
|
||||
search: { show: true, width: 300 },
|
||||
valueBuilder({ row, key }) {
|
||||
if (!utils.strings.hasEmpty(row.datetimerangeStart, row.datetimerangeEnd)) {
|
||||
row[key] = [dayjs(row.datetimerangeStart), dayjs(row.datetimerangeEnd)];
|
||||
}
|
||||
},
|
||||
valueResolve({ form, key }) {
|
||||
const row = form;
|
||||
if (row[key] != null && !utils.strings.hasEmpty(row[key])) {
|
||||
row.datetimerangeStart = row[key][0];
|
||||
row.datetimerangeEnd = row[key][1];
|
||||
} else {
|
||||
row.datetimerangeStart = null;
|
||||
row.datetimerangeEnd = null;
|
||||
}
|
||||
}
|
||||
},
|
||||
customType: {
|
||||
title: "自定义字段类型",
|
||||
type: "time2"
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<fs-page>
|
||||
<fs-crud ref="crudRef" v-bind="crudBinding">
|
||||
<template #actionbar-right>
|
||||
<a-alert
|
||||
style="margin-left: 10px"
|
||||
message="关于日期时间，建议前后端统一使用时间戳（long类型）进行交互，可以避免时区转化带来的问题"
|
||||
/>
|
||||
</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: "ComponentDate",
|
||||
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,44 @@
|
||||
import mockUtil from "/src/mock/base";
|
||||
|
||||
const options = {
|
||||
name: "ComponentDate",
|
||||
idGenerator: 0
|
||||
};
|
||||
const list = [
|
||||
{
|
||||
timestamp: 123123123123,
|
||||
humanize: new Date().getTime() - 11111111,
|
||||
datetime: "2019-09-01 11:11:11",
|
||||
date: "2019-09-02 11:11:11",
|
||||
format: "2019-09-21 11:11:11",
|
||||
time: "2019-09-22 12:11:11",
|
||||
daterangeStart: "2019-09-23 11:11:11",
|
||||
daterangeEnd: "2019-09-24 11:11:11",
|
||||
datetimerangeStart: "2019-09-25 11:11:11",
|
||||
datetimerangeEnd: "2019-09-26 11:11:11"
|
||||
},
|
||||
{
|
||||
// timestamp: 444444555,
|
||||
datetime: "2017-09-20 11:11:11",
|
||||
date: "2019-09-20 11:11:11",
|
||||
humanize: new Date().getTime() - 22222222,
|
||||
// time: 12313123334,
|
||||
daterangeStart: "2019-09-20 11:11:11",
|
||||
daterangeEnd: "2019-09-21 11:11:11",
|
||||
datetimerangeStart: "2019-09-20 11:11:11",
|
||||
datetimerangeEnd: "2019-09-21 11:11:11"
|
||||
},
|
||||
{
|
||||
// timestamp: 5555555555,
|
||||
datetime: "2017-09-20 11:11:11",
|
||||
date: "2019-09-20 11:11:11",
|
||||
// time: 12313123334,
|
||||
daterangeStart: "2019-09-20 11:11:11",
|
||||
daterangeEnd: "2019-09-21 11:11:11",
|
||||
datetimerangeStart: "2019-09-20 11:11:11",
|
||||
datetimerangeEnd: "2019-09-21 11:11:11"
|
||||
}
|
||||
];
|
||||
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/ComponentEditor";
|
||||
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,107 @@
|
||||
import * as api from "./api";
|
||||
import { utils, 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);
|
||||
};
|
||||
return {
|
||||
crudOptions: {
|
||||
request: {
|
||||
pageRequest,
|
||||
addRequest,
|
||||
editRequest,
|
||||
delRequest
|
||||
},
|
||||
columns: {
|
||||
id: {
|
||||
title: "ID",
|
||||
key: "id",
|
||||
type: "number",
|
||||
column: {
|
||||
width: 50
|
||||
},
|
||||
form: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
title: {
|
||||
title: "标题",
|
||||
type: "text",
|
||||
column: {
|
||||
width: 400
|
||||
},
|
||||
form:{
|
||||
col: { span: 24 },
|
||||
},
|
||||
},
|
||||
text: {
|
||||
title: "摘要",
|
||||
type: "textarea",
|
||||
form:{
|
||||
col: { span: 24 },
|
||||
},
|
||||
viewForm: {
|
||||
component: {
|
||||
name: null,
|
||||
render(h, scope) {
|
||||
return <div>{scope.value}</div>;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
disabled: {
|
||||
title: "禁用启用",
|
||||
search: { show: false },
|
||||
type: "dict-switch",
|
||||
dict: dict({
|
||||
data: [
|
||||
{ value: true, label: "禁用" },
|
||||
{ value: false, label: "启用" }
|
||||
]
|
||||
})
|
||||
},
|
||||
content_wang: {
|
||||
title: "内容",
|
||||
column: {
|
||||
width: 300,
|
||||
show: false
|
||||
},
|
||||
type: ["editor-wang5"], // 富文本图片上传依赖file-uploader，请先配置好file-uploader
|
||||
form: {
|
||||
helper:"示例已升级到wangEditor5版本，原来的editor-wang目前仍然可以使用，后续fs升级可能会将其删除，请尽快升级到editor-wang5版本",
|
||||
col: { span: 24 },
|
||||
// 动态显隐字段
|
||||
// show: compute(({ form }) => {
|
||||
// return form.change === "wang";
|
||||
// }),
|
||||
rules: [{ required: true, message: "此项必填" }],
|
||||
component: {
|
||||
disabled: compute(({ form }) => {
|
||||
return form.disabled;
|
||||
}),
|
||||
id: "1", // 当同一个页面有多个editor时，需要配置不同的id
|
||||
config: {},
|
||||
uploader: {
|
||||
type: "form",
|
||||
buildUrl(res) {
|
||||
return res.url;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<fs-page>
|
||||
<fs-crud ref="crudRef" v-bind="crudBinding">
|
||||
<template #actionbar-right>
|
||||
<a-alert style="margin-left: 10px" 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: "ComponentEditor",
|
||||
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,29 @@
|
||||
import mockUtil from "/src/mock/base";
|
||||
|
||||
const options = {
|
||||
name: "ComponentEditor",
|
||||
idGenerator: 0
|
||||
};
|
||||
const list = [
|
||||
{
|
||||
title: "d2-crud-plus好用吗？",
|
||||
text: "非常好用",
|
||||
content_quill: '<h1 class="ql-align-center">非常好用哦</h1>',
|
||||
change: "quill"
|
||||
},
|
||||
{
|
||||
title: "d2-crud-plus有什么优势？",
|
||||
text: "简单，方便",
|
||||
content_quill: "简单方便",
|
||||
change: "wang"
|
||||
},
|
||||
{
|
||||
title: "1111111",
|
||||
text: "22222",
|
||||
content_quill: "3333",
|
||||
change: "wang"
|
||||
}
|
||||
];
|
||||
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/ComponentIcon";
|
||||
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";
|
||||
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: {
|
||||
id: {
|
||||
title: "ID",
|
||||
key: "id",
|
||||
type: "number",
|
||||
column: {
|
||||
width: 50
|
||||
},
|
||||
form: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
icon: {
|
||||
title: "icon",
|
||||
search: { show: true },
|
||||
type: "text",
|
||||
column: {
|
||||
component: {
|
||||
name: "fs-icon",
|
||||
vModel: "icon",
|
||||
style: "font-size:18px"
|
||||
}
|
||||
},
|
||||
form: {
|
||||
helper: {
|
||||
render() {
|
||||
return (
|
||||
<a target={"_blank"} href={"https://iconify.design/icon-sets/ion/"}>
|
||||
点击此处选择图标名称
|
||||
</a>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
svg: {
|
||||
title: "svg",
|
||||
search: { show: true },
|
||||
type: "text",
|
||||
column: {
|
||||
component: {
|
||||
name: "fs-icon",
|
||||
vModel: "icon",
|
||||
style: "font-size:18px"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
<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: "ComponentIcon",
|
||||
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();
|
||||
});
|
||||
|
||||
const value = ref(null);
|
||||
return {
|
||||
crudBinding,
|
||||
crudRef,
|
||||
value
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,22 @@
|
||||
import mockUtil from "/src/mock/base";
|
||||
const options = {
|
||||
name: "ComponentIcon",
|
||||
idGenerator: 0
|
||||
};
|
||||
const list = [
|
||||
{
|
||||
icon: "ri:24-hours-fill",
|
||||
svg:"svg:icon-compass"
|
||||
},
|
||||
{
|
||||
icon: "ion:add-circle-outline",
|
||||
svg:"svg:icon-left-circle"
|
||||
},
|
||||
{
|
||||
icon: "ion:american-football-sharp",
|
||||
svg:"svg:icon-Dollar"
|
||||
}
|
||||
];
|
||||
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/ComponentJson";
|
||||
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,78 @@
|
||||
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: {
|
||||
async onOpened({ mode, formRef }) {
|
||||
if (!formRef.form.async) {
|
||||
setTimeout(() => {
|
||||
formRef.form.async = { aaa: "11", bb: "111" };
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
columns: {
|
||||
json: {
|
||||
title: "json",
|
||||
type: "json",
|
||||
form: {
|
||||
valueBuilder({ form }) {
|
||||
if (form.json == null) {
|
||||
return;
|
||||
}
|
||||
form.json = JSON.parse(form.json);
|
||||
},
|
||||
valueResolve({ form }) {
|
||||
if (form.json == null) {
|
||||
return;
|
||||
}
|
||||
form.json = JSON.stringify(form.json);
|
||||
}
|
||||
}
|
||||
},
|
||||
async: {
|
||||
title: "异步加载",
|
||||
type: "json",
|
||||
form: {
|
||||
// 上面form.wrapper.onOpened里面配置了异步加载
|
||||
helper: "在onOpened里面配置异步加载json字符串",
|
||||
valueBuilder({ form }) {
|
||||
if (form.async == null) {
|
||||
return;
|
||||
}
|
||||
form.async = JSON.parse(form.async);
|
||||
},
|
||||
valueResolve({ form }) {
|
||||
if (form.async == null) {
|
||||
return;
|
||||
}
|
||||
form.async = JSON.stringify(form.async);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -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: "ComponentJson",
|
||||
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,18 @@
|
||||
import mockUtil from "/src/mock/base";
|
||||
const options = {
|
||||
name: "ComponentJson",
|
||||
idGenerator: 0
|
||||
};
|
||||
const list = [
|
||||
{
|
||||
json: '{"a":1,"b":2}',
|
||||
async: null
|
||||
},
|
||||
{
|
||||
json: '{"a":3,"b":4}',
|
||||
async: null
|
||||
}
|
||||
];
|
||||
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/ComponentNumber";
|
||||
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,71 @@
|
||||
import * as api from "./api";
|
||||
import { requestForMock } from "/src/api/service";
|
||||
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
|
||||
},
|
||||
columns: {
|
||||
id: {
|
||||
title: "ID",
|
||||
key: "id",
|
||||
type: "number",
|
||||
column: {
|
||||
width: 50
|
||||
},
|
||||
form: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
integer: {
|
||||
title: "整数",
|
||||
search: { show: true },
|
||||
type: "number"
|
||||
},
|
||||
float: {
|
||||
title: "小数",
|
||||
type: "number",
|
||||
form: {
|
||||
component: {
|
||||
step: "0.1"
|
||||
}
|
||||
}
|
||||
},
|
||||
format: {
|
||||
title: "格式化",
|
||||
type: "number",
|
||||
form: {
|
||||
component: {
|
||||
formatter: (value) => `${value}%`,
|
||||
parser: (value) => value.replace("%", "")
|
||||
}
|
||||
},
|
||||
column: {
|
||||
formatter({ value }) {
|
||||
return value + "%";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -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: "ComponentNumber",
|
||||
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: "ComponentNumber",
|
||||
idGenerator: 0
|
||||
};
|
||||
const list = [
|
||||
{
|
||||
integer: 1,
|
||||
float: 1.1,
|
||||
format: 100
|
||||
},
|
||||
{
|
||||
integer: 2,
|
||||
float: 1.2,
|
||||
format: 100
|
||||
},
|
||||
{
|
||||
integer: 3,
|
||||
float: 1.3,
|
||||
format: 100
|
||||
}
|
||||
];
|
||||
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/ComponentRadio";
|
||||
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 ({ 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: {
|
||||
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"
|
||||
})
|
||||
},
|
||||
button: {
|
||||
title: "按钮样式",
|
||||
search: { show: true },
|
||||
type: "dict-radio",
|
||||
dict: dict({
|
||||
url: "/mock/dicts/OpenStatusEnum?single"
|
||||
}),
|
||||
form: {
|
||||
component: {
|
||||
optionName: "a-radio-button"
|
||||
}
|
||||
}
|
||||
},
|
||||
bool: {
|
||||
title: "布尔类型",
|
||||
search: { show: true },
|
||||
type: "dict-radio",
|
||||
dict: dict({
|
||||
data: [
|
||||
{ value: true, label: "TRUE" },
|
||||
{ value: false, label: "FALSE" }
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
<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: "ComponentRadio",
|
||||
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();
|
||||
});
|
||||
|
||||
const value = ref(null);
|
||||
return {
|
||||
crudBinding,
|
||||
crudRef,
|
||||
value
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,24 @@
|
||||
import mockUtil from "/src/mock/base";
|
||||
const options = {
|
||||
name: "ComponentRadio",
|
||||
idGenerator: 0
|
||||
};
|
||||
const list = [
|
||||
{
|
||||
radio: "1",
|
||||
button: "1",
|
||||
bool: true
|
||||
},
|
||||
{
|
||||
radio: "2",
|
||||
button: "2",
|
||||
bool: false
|
||||
},
|
||||
{
|
||||
radio: "0",
|
||||
button: "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/ComponentSelect";
|
||||
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,311 @@
|
||||
import * as api from "./api";
|
||||
import { requestForMock } from "/src/api/service";
|
||||
import { dict } from "@fast-crud/fast-crud";
|
||||
import { ref } from "vue";
|
||||
import _ from "lodash-es";
|
||||
function useSearchRemote() {
|
||||
let lastFetchId = 0;
|
||||
|
||||
const state = {
|
||||
data: ref([]),
|
||||
fetching: ref(false)
|
||||
};
|
||||
const fetchUser = _.debounce((value) => {
|
||||
console.log("fetching user", value);
|
||||
lastFetchId += 1;
|
||||
|
||||
const fetchId = lastFetchId;
|
||||
|
||||
state.data.value = [];
|
||||
|
||||
state.fetching.value = true;
|
||||
|
||||
fetch("https://randomuser.me/api/?results=5")
|
||||
.then((response) => response.json())
|
||||
.then((body) => {
|
||||
if (fetchId !== lastFetchId) {
|
||||
// for fetch callback order
|
||||
return;
|
||||
}
|
||||
const data = body.results.map((user) => ({
|
||||
text: `${user.name.first} ${user.name.last}`,
|
||||
value: user.login.username
|
||||
}));
|
||||
state.data.value = data;
|
||||
state.fetching.value = false;
|
||||
});
|
||||
}, 800);
|
||||
|
||||
return {
|
||||
fetchUser,
|
||||
searchState: state
|
||||
};
|
||||
}
|
||||
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 dictRef = 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: "上海" }
|
||||
]
|
||||
});
|
||||
|
||||
function dynamicUpdateDictOptions() {
|
||||
dictRef.data.push({ id: "xg", text: "香港" });
|
||||
//dictRef.toMap();
|
||||
}
|
||||
|
||||
const { fetchUser, searchState } = useSearchRemote();
|
||||
return {
|
||||
dynamicUpdateDictOptions,
|
||||
crudOptions: {
|
||||
request: {
|
||||
pageRequest,
|
||||
addRequest,
|
||||
editRequest,
|
||||
delRequest
|
||||
},
|
||||
form: {
|
||||
// 单列布局
|
||||
col: { span: 24 },
|
||||
labelCol: { span: 4 },
|
||||
wrapperCol: { span: 18 }
|
||||
},
|
||||
rowHandle: {
|
||||
fixed: "right",
|
||||
align: "center"
|
||||
},
|
||||
table: {
|
||||
scroll: {
|
||||
//启用横向滚动条，设置一个大于所有列宽之和的值，一般大于表格宽度
|
||||
x: 1400
|
||||
}
|
||||
},
|
||||
columns: {
|
||||
id: {
|
||||
title: "ID",
|
||||
key: "id",
|
||||
type: "number",
|
||||
column: {
|
||||
width: 50
|
||||
},
|
||||
form: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
statusLocal: {
|
||||
title: "单选本地",
|
||||
type: "dict-select",
|
||||
dict: dictRef
|
||||
},
|
||||
statusRemote: {
|
||||
title: "单选远程",
|
||||
search: {
|
||||
show: true,
|
||||
rules: null,
|
||||
component: {
|
||||
style: { width: "100px" }
|
||||
}
|
||||
},
|
||||
type: "dict-select",
|
||||
dict: dict({
|
||||
url: "/mock/dicts/OpenStatusEnum?simple"
|
||||
}),
|
||||
form: {
|
||||
rules: [{ required: true, message: "请选择一个选项" }]
|
||||
}
|
||||
},
|
||||
filter: {
|
||||
title: "本地过滤",
|
||||
type: "dict-select",
|
||||
dict: dict({
|
||||
url: "/mock/dicts/OpenStatusEnum?simple"
|
||||
}),
|
||||
form: {
|
||||
component: {
|
||||
showSearch: true,
|
||||
//默认的filterOption仅支持value的过滤，label并不会加入查询
|
||||
//所以需要自定义filterOption
|
||||
filterOption(inputValue, option) {
|
||||
return option.label.indexOf(inputValue) >= 0 || option.value.indexOf(inputValue) >= 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
search: {
|
||||
title: "远程搜索",
|
||||
search: { show: true, component: { style: { width: "240px" } } },
|
||||
form: {
|
||||
component: {
|
||||
name: "a-select",
|
||||
vModel: "value",
|
||||
filterOption: false,
|
||||
//labelInValue: true,
|
||||
mode: "multiple",
|
||||
showSearch: true,
|
||||
allowClear: true,
|
||||
placeholder: "输入远程搜索，数据仅供演示",
|
||||
options: searchState.data,
|
||||
onSearch(value) {
|
||||
fetchUser(value);
|
||||
},
|
||||
children: {
|
||||
notFoundContent() {
|
||||
if (searchState.fetching.value) {
|
||||
return <a-spin size="small" />;
|
||||
}
|
||||
return "暂无记录";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
customDictGetData: {
|
||||
title: "自定义字典请求",
|
||||
search: { show: false },
|
||||
type: "dict-select",
|
||||
dict: dict({
|
||||
getData({ dict }) {
|
||||
// 覆盖全局获取字典请求配置
|
||||
console.log(`我是从自定义的getData方法中加载的数据字典`, dict);
|
||||
return requestForMock({
|
||||
url: "/mock/dicts/OpenStatusEnum?cache",
|
||||
method: "get"
|
||||
});
|
||||
}
|
||||
}),
|
||||
form: {
|
||||
value: "2", //默认值, 注意search也会影响到，需要将search.value=null，取消search的默认值
|
||||
helper: "dict.getData可以覆盖全局配置的getRemoteDictFunc"
|
||||
},
|
||||
column: {
|
||||
width: 120,
|
||||
component: {
|
||||
type: "text" // 不使用tag，纯文本展示
|
||||
}
|
||||
}
|
||||
},
|
||||
disabledOptions: {
|
||||
title: "禁用某个选项",
|
||||
key: "disabledOptions",
|
||||
type: "dict-select",
|
||||
dict: dict({
|
||||
cloneable: true,
|
||||
url: "/mock/dicts/OpenStatusEnum?disabledOptions"
|
||||
}),
|
||||
form: {
|
||||
component: {
|
||||
dict: {
|
||||
// 此处dict配置会覆盖上面dict的属性
|
||||
prototype: true, // form表单的dict设置为原型复制，每次初始化时都会重新loadDict
|
||||
onReady({ dict }) {
|
||||
console.log("字典请求ready", dict);
|
||||
dict.data[0].disabled = true; // 禁用某个选项， 还可以自己修改选项
|
||||
}
|
||||
}
|
||||
},
|
||||
helper: "禁用字典选项"
|
||||
},
|
||||
column: {
|
||||
width: 150
|
||||
}
|
||||
},
|
||||
firstDefault: {
|
||||
title: "默认值",
|
||||
type: "dict-select",
|
||||
dict: dict({
|
||||
cloneable: true,
|
||||
url: "/mock/dicts/OpenStatusEnum?disabledOptions"
|
||||
}),
|
||||
form: {
|
||||
component: {
|
||||
//监听 dict-change事件
|
||||
onDictChange({ dict, form, key }) {
|
||||
console.log("dict data changed", dict, key);
|
||||
if (dict.data != null && form.firstDefault == null) {
|
||||
form.firstDefault = dict.data[0].value;
|
||||
}
|
||||
}
|
||||
// 下面的方法也可以，注意要配置dict.prototype:true
|
||||
// dict: {
|
||||
// // 此处dict配置会覆盖上面dict的属性
|
||||
// // form表单的dict设置为原型复制，每次初始化时都会重新loadDict
|
||||
// prototype: true,
|
||||
//
|
||||
// onReady({ dict, form }) {
|
||||
// console.log("字典请求ready", dict, form, getComponentRef);
|
||||
// // prototype= true 才能获取到form表单数据
|
||||
// form.firstDefault = dict.data[0].value;
|
||||
// }
|
||||
// }
|
||||
},
|
||||
helper: "默认选择第一个选项"
|
||||
}
|
||||
},
|
||||
multiple: {
|
||||
title: "多选自动染色",
|
||||
sortable: true,
|
||||
type: "dict-select",
|
||||
form: {
|
||||
title: "多选本地",
|
||||
component: {
|
||||
mode: "multiple"
|
||||
}
|
||||
},
|
||||
dict: dict({
|
||||
data: [
|
||||
{ value: "sz", label: "深圳", color: "success" },
|
||||
{ value: "gz", label: "广州" },
|
||||
{ value: "wh", label: "武汉" },
|
||||
{ value: "sh", label: "上海" },
|
||||
{ value: "hz", label: "杭州" },
|
||||
{ value: "bj", label: "北京", color: "red" }
|
||||
]
|
||||
}),
|
||||
column: {
|
||||
width: 290,
|
||||
component: {
|
||||
color: "auto", // 自动染色
|
||||
defaultLabel: "未知城市" //无数据字典时的默认文本
|
||||
}
|
||||
}
|
||||
},
|
||||
statusSimple: {
|
||||
title: "普通选择",
|
||||
form: {
|
||||
component: {
|
||||
name: "a-select",
|
||||
vModel: "value",
|
||||
options: [
|
||||
{ value: "sz", label: "深圳", color: "success" },
|
||||
{ value: "gz", label: "广州", color: "blue" },
|
||||
{ value: "bj", label: "北京" },
|
||||
{ value: "wh", label: "武汉" },
|
||||
{ value: "sh", label: "上海" }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<fs-page>
|
||||
<fs-crud ref="crudRef" v-bind="crudBinding">
|
||||
<template #actionbar-right>
|
||||
<a-button @click="dynamicUpdateDictOptions">动态增加选项</a-button>
|
||||
</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: "ComponentSelect",
|
||||
setup() {
|
||||
// crud组件的ref
|
||||
const crudRef = ref();
|
||||
// crud 配置的ref
|
||||
const crudBinding = ref();
|
||||
// 暴露的方法
|
||||
const { expose } = useExpose({ crudRef, crudBinding });
|
||||
// 你的crud配置
|
||||
const { crudOptions, dynamicUpdateDictOptions } = 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,
|
||||
dynamicUpdateDictOptions
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,42 @@
|
||||
import mockUtil from "/src/mock/base";
|
||||
const options = {
|
||||
name: "ComponentSelect",
|
||||
idGenerator: 0
|
||||
};
|
||||
const list = [
|
||||
{
|
||||
statusLocal: "sz",
|
||||
customDictUrl: "0",
|
||||
statusValue: 1,
|
||||
multiple: ["sz", "bj", "gz", "sh", "hz", "xz", "xg"],
|
||||
checkbox: "0",
|
||||
select_local: "sz",
|
||||
statusRemote: "0",
|
||||
status_custom_2: "0",
|
||||
customDictGetData: "1",
|
||||
checkbox_btn: "1"
|
||||
},
|
||||
{
|
||||
statusLocal: "xg",
|
||||
customDictUrl: "1",
|
||||
statusValue: 2,
|
||||
statusRemote: "1",
|
||||
status_custom_2: "2",
|
||||
select_local: "gz",
|
||||
multiple: ["sh", "sz"],
|
||||
checkbox: "0"
|
||||
},
|
||||
{
|
||||
statusLocal: "gz",
|
||||
customDictUrl: "1",
|
||||
statusValue: 1,
|
||||
disabledCache: "1",
|
||||
disabledOptions: "2",
|
||||
select_local: "gz",
|
||||
multiple: ["sh", "gz"],
|
||||
checkbox: "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/ComponentSwitch";
|
||||
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,141 @@
|
||||
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);
|
||||
};
|
||||
return {
|
||||
crudOptions: {
|
||||
request: {
|
||||
pageRequest,
|
||||
addRequest,
|
||||
editRequest,
|
||||
delRequest
|
||||
},
|
||||
columns: {
|
||||
id: {
|
||||
title: "ID",
|
||||
key: "id",
|
||||
type: "number",
|
||||
column: {
|
||||
width: 50
|
||||
},
|
||||
form: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
switch: {
|
||||
title: "状态",
|
||||
search: { show: true },
|
||||
type: "dict-switch",
|
||||
dict: dict({
|
||||
data: [
|
||||
{ value: false, label: "开启" },
|
||||
{ value: true, label: "关闭" }
|
||||
]
|
||||
})
|
||||
},
|
||||
notBool: {
|
||||
title: "自定义value",
|
||||
search: { show: true },
|
||||
type: "dict-switch",
|
||||
dict: dict({
|
||||
data: [
|
||||
{ value: "1", label: "开启" },
|
||||
{ value: "2", label: "关闭" }
|
||||
]
|
||||
})
|
||||
},
|
||||
switchLabel: {
|
||||
title: "切换字段label",
|
||||
search: { show: true },
|
||||
type: "dict-switch",
|
||||
dict: dict({
|
||||
data: [
|
||||
{ value: true, label: "开启" },
|
||||
{ value: false, label: "关闭" }
|
||||
]
|
||||
}),
|
||||
column: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
labelTarget: {
|
||||
title: "我将被切换",
|
||||
type: "text",
|
||||
column: {
|
||||
show: false
|
||||
},
|
||||
form: {
|
||||
label: compute(({ form }) => {
|
||||
return form.switchLabel ? "我将被切换" : "再切换一下";
|
||||
})
|
||||
}
|
||||
},
|
||||
cellSwitch: {
|
||||
title: "cell显示",
|
||||
search: { show: true },
|
||||
type: "dict-switch",
|
||||
form: {
|
||||
component: {}
|
||||
},
|
||||
column: {
|
||||
component: {
|
||||
name: "fs-dict-switch",
|
||||
vModel: "checked",
|
||||
onChange: (value) => {
|
||||
console.log("onChange", value);
|
||||
}
|
||||
// onChange: compute((context) => {
|
||||
// //动态onChange方法测试
|
||||
// return () => {
|
||||
// console.log("onChange", context.row.cellSwitch);
|
||||
// };
|
||||
// })
|
||||
}
|
||||
},
|
||||
dict: dict({
|
||||
data: [
|
||||
{ value: true, label: "开启" },
|
||||
{ value: false, label: "关闭" }
|
||||
]
|
||||
})
|
||||
},
|
||||
showTarget: {
|
||||
title: "显隐目标",
|
||||
type: "text",
|
||||
column: {
|
||||
component: {
|
||||
name: "fs-values-format",
|
||||
show: compute((context) => {
|
||||
//根据cellSwitch字段显隐
|
||||
return context.row.cellSwitch === true;
|
||||
})
|
||||
}
|
||||
},
|
||||
search: {
|
||||
show: false
|
||||
},
|
||||
form: {
|
||||
show: compute((context) => {
|
||||
console.log("context", context);
|
||||
//根据cellSwitch字段显隐
|
||||
return context.form.cellSwitch === true;
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -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: "ComponentSwitch",
|
||||
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,27 @@
|
||||
import mockUtil from "/src/mock/base";
|
||||
const options = {
|
||||
name: "ComponentSwitch",
|
||||
idGenerator: 0
|
||||
};
|
||||
const list = [
|
||||
{
|
||||
switch: true,
|
||||
cellSwitch: true,
|
||||
notBool: "1",
|
||||
showTarget: "点左边开关显示或隐藏"
|
||||
},
|
||||
{
|
||||
switch: false,
|
||||
cellSwitch: true,
|
||||
notBool: "2",
|
||||
showTarget: "点左边开关显示或隐藏"
|
||||
},
|
||||
{
|
||||
switch: true,
|
||||
cellSwitch: false,
|
||||
showTarget: "点左边开关显示或隐藏"
|
||||
}
|
||||
];
|
||||
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/ComponentText";
|
||||
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,130 @@
|
||||
import * as api from "./api";
|
||||
import { compute } from "@fast-crud/fast-crud";
|
||||
import { resolveDirective, withDirectives } 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
|
||||
},
|
||||
columns: {
|
||||
name: {
|
||||
title: "姓名",
|
||||
type: "text", //虽然不写也能正确显示组件，但不建议省略它
|
||||
search: { show: true },
|
||||
form: {
|
||||
component: {
|
||||
maxlength: 20
|
||||
}
|
||||
}
|
||||
},
|
||||
search: {
|
||||
title: "搜索",
|
||||
type: "text",
|
||||
form: {
|
||||
component: {
|
||||
addonAfter: "后置",
|
||||
suffix: "suffix",
|
||||
children: {
|
||||
addonBefore() {
|
||||
return <SearchOutlined />;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
password: {
|
||||
title: "密码",
|
||||
type: "password",
|
||||
column: {
|
||||
//一般密码不显示在列里面
|
||||
show: false
|
||||
}
|
||||
},
|
||||
// copy: {
|
||||
// title: "剪贴板",
|
||||
// type: "text",
|
||||
// column: {
|
||||
// cellRender({ value, row }) {
|
||||
// const content = (
|
||||
// <div>
|
||||
// {value}
|
||||
// <a-tag style={{ cursor: "pointer" }}>复制</a-tag>
|
||||
// </div>
|
||||
// );
|
||||
// const clipboard = resolveDirective("clipboard");
|
||||
// return withDirectives(content, [[clipboard, value]]);
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
copy: {
|
||||
title: "剪贴板",
|
||||
type: ["text", "copyable"]
|
||||
},
|
||||
intro: {
|
||||
title: "简介",
|
||||
type: "textarea",
|
||||
form: {
|
||||
component: { showWordLimit: true, maxlength: 200 }
|
||||
},
|
||||
column: {
|
||||
ellipsis: true,
|
||||
showTitle: true
|
||||
}
|
||||
},
|
||||
render: {
|
||||
title: "复杂输入(render)",
|
||||
form: {
|
||||
title: "复杂输入",
|
||||
component: {
|
||||
render(context) {
|
||||
console.log("context scope", context);
|
||||
return (
|
||||
<a-input-group compact>
|
||||
<a-input
|
||||
placeholder={"render1 input"}
|
||||
style="width: 50%"
|
||||
v-model={[context.form.render, "value"]}
|
||||
/>
|
||||
<a-input
|
||||
placeholder={"render2 input"}
|
||||
style="width: 50%"
|
||||
v-model={[context.form.render2, "value"]}
|
||||
/>
|
||||
</a-input-group>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
render2: {
|
||||
title: "我的值是由复杂输入列输入的",
|
||||
column: {
|
||||
width: "300px"
|
||||
},
|
||||
form: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -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: "ComponentText",
|
||||
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,43 @@
|
||||
import mockUtil from "/src/mock/base";
|
||||
const options = {
|
||||
name: "ComponentText",
|
||||
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示例出现的名字",
|
||||
copy: "测试文本"
|
||||
},
|
||||
{
|
||||
name: "张三",
|
||||
date: "2016-05-04",
|
||||
status: "1",
|
||||
province: "2",
|
||||
copy: "测试文本"
|
||||
},
|
||||
{
|
||||
name: "李四",
|
||||
date: 2232433534511,
|
||||
status: "1",
|
||||
province: "0",
|
||||
copy: "测试文本"
|
||||
},
|
||||
{
|
||||
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/ComponentTree";
|
||||
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,81 @@
|
||||
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
|
||||
},
|
||||
columns: {
|
||||
id: {
|
||||
title: "ID",
|
||||
key: "id",
|
||||
type: "number",
|
||||
column: {
|
||||
width: 50
|
||||
},
|
||||
form: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
tree: {
|
||||
title: "树形选择",
|
||||
search: { show: false },
|
||||
type: "dict-tree",
|
||||
dict: dict({
|
||||
isTree: true,
|
||||
url: "/mock/dicts/cascaderData?single"
|
||||
})
|
||||
},
|
||||
multiple: {
|
||||
title: "多选",
|
||||
search: { show: false },
|
||||
type: "dict-tree",
|
||||
dict: dict({
|
||||
cloneable: false,
|
||||
isTree: true,
|
||||
url: "/mock/dicts/cascaderData?single"
|
||||
}),
|
||||
form: {
|
||||
component: {
|
||||
"tree-checkable": true
|
||||
}
|
||||
}
|
||||
},
|
||||
fieldReplace: {
|
||||
title: "修改options的value字段名",
|
||||
search: { show: false },
|
||||
type: "dict-tree",
|
||||
dict: dict({
|
||||
isTree: true,
|
||||
url: "/mock/dicts/littlePca",
|
||||
value: "code",
|
||||
label: "name"
|
||||
}),
|
||||
form: {
|
||||
component: {
|
||||
fieldNames: { label: "name", key: "code", value: "code" }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -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: "ComponentTree",
|
||||
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,16 @@
|
||||
import mockUtil from "/src/mock/base";
|
||||
const options = {
|
||||
name: "ComponentTree",
|
||||
idGenerator: 0
|
||||
};
|
||||
const list = [
|
||||
{
|
||||
tree: "zhinan",
|
||||
multiple: ["zhinan", "yizhi"]
|
||||
},
|
||||
{ tree: "zhinan" },
|
||||
{ tree: "zhinan" }
|
||||
];
|
||||
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/AliossUploader";
|
||||
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 { requestForMock } from "/src/api/service";
|
||||
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
|
||||
},
|
||||
columns: {
|
||||
id: {
|
||||
title: "ID",
|
||||
key: "id",
|
||||
type: "number",
|
||||
column: {
|
||||
width: 50
|
||||
},
|
||||
form: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
file: {
|
||||
title: "阿里云上传",
|
||||
type: "file-uploader",
|
||||
form: {
|
||||
component: {
|
||||
uploader: {
|
||||
type: "alioss"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
pictureCard: {
|
||||
title: "照片墙",
|
||||
type: "image-uploader",
|
||||
form: {
|
||||
component: {
|
||||
uploader: {
|
||||
type: "alioss"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
cropper: {
|
||||
title: "裁剪",
|
||||
type: "cropper-uploader",
|
||||
form: {
|
||||
component: {
|
||||
uploader: {
|
||||
type: "alioss"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -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: "AliossUploader",
|
||||
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: "AliossUploader",
|
||||
idGenerator: 0
|
||||
};
|
||||
const list = [
|
||||
{
|
||||
avatar_error1: "http://greper.handsfree.work/extends/avatar1.jpg",
|
||||
avatar_error2: "http://greper.handsfree.work/extends/avatar1.jpg",
|
||||
avatar: "http://greper.handsfree.work/extends/avatar.jpg",
|
||||
file: ["http://greper.handsfree.work/extends/avatar.jpg", "https://www.baidu.com/img/bd_logo1.png"],
|
||||
image: ["http://greper.handsfree.work/extends/avatar.jpg", "https://www.baidu.com/img/bd_logo1.png"],
|
||||
image2: ["http://greper.handsfree.work/extends/avatar.jpg", "https://www.baidu.com/img/bd_logo1.png"]
|
||||
},
|
||||
{
|
||||
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/CosUploader";
|
||||
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 { requestForMock } from "/src/api/service";
|
||||
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
|
||||
},
|
||||
columns: {
|
||||
id: {
|
||||
title: "ID",
|
||||
key: "id",
|
||||
type: "number",
|
||||
column: {
|
||||
width: 50
|
||||
},
|
||||
form: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
file: {
|
||||
title: "腾讯云",
|
||||
type: "file-uploader",
|
||||
form: {
|
||||
component: {
|
||||
uploader: {
|
||||
type: "cos"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
pictureCard: {
|
||||
title: "照片墙",
|
||||
type: "image-uploader",
|
||||
form: {
|
||||
component: {
|
||||
uploader: {
|
||||
type: "cos"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
cropper: {
|
||||
title: "裁剪",
|
||||
type: "cropper-uploader",
|
||||
form: {
|
||||
component: {
|
||||
uploader: {
|
||||
type: "cos"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -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: "CosUploader",
|
||||
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,22 @@
|
||||
import mockUtil from "/src/mock/base";
|
||||
const options = {
|
||||
name: "CosUploader",
|
||||
idGenerator: 0
|
||||
};
|
||||
const list = [
|
||||
{
|
||||
avatar: "http://greper.handsfree.work/extends/avatar.jpg",
|
||||
file: ["http://greper.handsfree.work/extends/avatar.jpg", "https://www.baidu.com/img/bd_logo1.png"],
|
||||
image: ["http://greper.handsfree.work/extends/avatar.jpg", "https://www.baidu.com/img/bd_logo1.png"],
|
||||
image2: ["http://greper.handsfree.work/extends/avatar.jpg", "https://www.baidu.com/img/bd_logo1.png"]
|
||||
},
|
||||
{
|
||||
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/CropperUploader";
|
||||
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,110 @@
|
||||
import * as api from "./api";
|
||||
import { requestForMock } from "/src/api/service";
|
||||
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
|
||||
},
|
||||
columns: {
|
||||
id: {
|
||||
title: "ID",
|
||||
key: "id",
|
||||
type: "number",
|
||||
column: {
|
||||
width: 50
|
||||
},
|
||||
form: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
cropper: {
|
||||
title: "头像裁剪上传",
|
||||
type: "cropper-uploader"
|
||||
},
|
||||
avatar: {
|
||||
title: "数量限制",
|
||||
type: "cropper-uploader",
|
||||
form: {
|
||||
component: {
|
||||
limit: 5 //默认限制1个，即头像上传，0为不限制
|
||||
}
|
||||
}
|
||||
},
|
||||
aspect: {
|
||||
title: "按比例裁剪",
|
||||
type: "cropper-uploader",
|
||||
form: {
|
||||
component: {
|
||||
cropper: {
|
||||
aspectRatio: 2
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
alioss: {
|
||||
title: "alioss",
|
||||
type: "cropper-uploader",
|
||||
form: {
|
||||
component: {
|
||||
uploader: {
|
||||
type: "alioss"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
qiniu: {
|
||||
title: "七牛",
|
||||
type: "cropper-uploader",
|
||||
form: {
|
||||
component: {
|
||||
uploader: {
|
||||
type: "qiniu"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
cos: {
|
||||
title: "腾讯cos",
|
||||
type: "cropper-uploader",
|
||||
form: {
|
||||
component: {
|
||||
uploader: {
|
||||
type: "cos"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
form: {
|
||||
title: "表单",
|
||||
type: "cropper-uploader",
|
||||
form: {
|
||||
component: {
|
||||
uploader: {
|
||||
type: "form"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -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: "CropperUploader",
|
||||
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: "CropperUploader",
|
||||
idGenerator: 0
|
||||
};
|
||||
const list = [
|
||||
{
|
||||
avatar_error1: "http://greper.handsfree.work/extends/avatar1.jpg",
|
||||
avatar_error2: "http://greper.handsfree.work/extends/avatar1.jpg",
|
||||
avatar: "http://greper.handsfree.work/extends/avatar.jpg",
|
||||
file: ["http://greper.handsfree.work/extends/avatar.jpg", "https://www.baidu.com/img/bd_logo1.png"],
|
||||
image: ["http://greper.handsfree.work/extends/avatar.jpg", "https://www.baidu.com/img/bd_logo1.png"],
|
||||
image2: ["http://greper.handsfree.work/extends/avatar.jpg", "https://www.baidu.com/img/bd_logo1.png"]
|
||||
},
|
||||
{
|
||||
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/ComponentUploader";
|
||||
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,223 @@
|
||||
import * as api from "./api";
|
||||
import { AllUploadSuccessValidator } from "@fast-crud/fast-extends";
|
||||
import { dict } from "@fast-crud/fast-crud";
|
||||
import { nextTick } 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
|
||||
},
|
||||
form: {
|
||||
wrapper: {
|
||||
async onOpened() {
|
||||
// 异步组件实例的获取
|
||||
const componentRef = await expose.getFormComponentRef("file", true);
|
||||
console.log("componentRef", componentRef);
|
||||
}
|
||||
}
|
||||
},
|
||||
columns: {
|
||||
id: {
|
||||
title: "ID",
|
||||
key: "id",
|
||||
type: "number",
|
||||
column: {
|
||||
width: 50
|
||||
},
|
||||
form: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
file: {
|
||||
title: "表单上传",
|
||||
type: "file-uploader",
|
||||
form: {
|
||||
component: {
|
||||
multiple: true, //可选择多个
|
||||
uploader: {
|
||||
type: "form"
|
||||
}
|
||||
}
|
||||
},
|
||||
column: {
|
||||
component: {
|
||||
// 如果你后台返回的值不是一个完整的url，那么展示时就无法显示和点击
|
||||
// 需要你本地根据value构建文件的url。
|
||||
// 支持异步
|
||||
async buildUrl(value) {
|
||||
return value;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
pictureCard: {
|
||||
title: "照片墙",
|
||||
type: "image-uploader",
|
||||
form: {
|
||||
component: {
|
||||
limit: 1,
|
||||
uploader: {
|
||||
type: "form"
|
||||
}
|
||||
},
|
||||
helper: "最大可上传1个文件"
|
||||
},
|
||||
column: {
|
||||
component: {
|
||||
buildPreviewUrl({ url, index }) {
|
||||
if (index === 0) {
|
||||
return "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png";
|
||||
} else {
|
||||
return url + "?preview=600x600";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
pictureCard2: {
|
||||
title: "通过urls显示",
|
||||
type: "image-uploader",
|
||||
column: {
|
||||
component: {
|
||||
urls: [
|
||||
{
|
||||
url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?1",
|
||||
previewUrl: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?preview1"
|
||||
},
|
||||
{
|
||||
url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?2",
|
||||
previewUrl: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?preview2"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
avatar: {
|
||||
title: "头像上传",
|
||||
type: "avatar-uploader",
|
||||
form: {
|
||||
component: {
|
||||
uploader: {
|
||||
type: "form"
|
||||
}
|
||||
},
|
||||
helper: "就是照片墙limit=1的效果"
|
||||
}
|
||||
},
|
||||
cropper: {
|
||||
title: "裁剪",
|
||||
type: "cropper-uploader",
|
||||
form: {
|
||||
component: {
|
||||
uploader: {
|
||||
type: "form"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
keyValueType: {
|
||||
title: "valueType为key",
|
||||
type: "file-uploader",
|
||||
form: {
|
||||
component: {
|
||||
uploader: {
|
||||
type: "form"
|
||||
},
|
||||
valueType: "key",
|
||||
async buildUrl(value) {
|
||||
return new Promise((resolve) => {
|
||||
const url = "http://www.docmirror.cn:7070/api/upload/form/download?key=" + value;
|
||||
resolve(url);
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
column: {
|
||||
component: {
|
||||
async buildUrl(value) {
|
||||
return new Promise((resolve) => {
|
||||
const url = "http://www.docmirror.cn:7070/api/upload/form/download?key=" + value;
|
||||
resolve(url);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
limit: {
|
||||
title: "限制数量",
|
||||
type: "file-uploader",
|
||||
form: {
|
||||
component: {
|
||||
limit: 2,
|
||||
uploader: {
|
||||
type: "form"
|
||||
}
|
||||
},
|
||||
helper: "最大可上传2个文件"
|
||||
}
|
||||
},
|
||||
sizeLimit: {
|
||||
title: "限制大小",
|
||||
type: "file-uploader",
|
||||
form: {
|
||||
component: {
|
||||
sizeLimit: 1024,
|
||||
uploader: {
|
||||
type: "form"
|
||||
}
|
||||
},
|
||||
helper: "大小不能超过1k"
|
||||
}
|
||||
},
|
||||
accept: {
|
||||
title: "限制类型",
|
||||
type: "file-uploader",
|
||||
form: {
|
||||
component: {
|
||||
accept: "*.jpg,*.png"
|
||||
},
|
||||
helper: "只能上传jpg或者png"
|
||||
}
|
||||
},
|
||||
validation: {
|
||||
title: "校验",
|
||||
type: "file-uploader",
|
||||
form: {
|
||||
rules: [
|
||||
{ required: true, message: "此项必传" },
|
||||
{
|
||||
validator: AllUploadSuccessValidator(), //如果要自定义校验规则则需要手动配置这个
|
||||
message: "还有文件正在上传，请稍候"
|
||||
}
|
||||
],
|
||||
helper: "大小不能超过50M，文件未上传完成之前，阻止提交",
|
||||
component: {
|
||||
uploader: {
|
||||
type: "form",
|
||||
sizeLimit: 1024 * 1024 * 50
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<fs-page>
|
||||
<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: "ComponentUploader",
|
||||
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,
|
||||
uploadChange(a, b, c) {
|
||||
console.log("upload change", a, b, c);
|
||||
}
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,24 @@
|
||||
import mockUtil from "/src/mock/base";
|
||||
const options = {
|
||||
name: "ComponentUploader",
|
||||
idGenerator: 0
|
||||
};
|
||||
const list = [
|
||||
{
|
||||
avatar: "http://greper.handsfree.work/extends/avatar.jpg",
|
||||
file: ["http://greper.handsfree.work/extends/avatar.jpg", "https://www.baidu.com/img/bd_logo1.png"],
|
||||
pictureCard: ["http://greper.handsfree.work/extends/avatar.jpg", "https://www.baidu.com/img/bd_logo1.png"],
|
||||
limit: ["http://greper.handsfree.work/extends/avatar.jpg", "https://www.baidu.com/img/bd_logo1.png"],
|
||||
statusRemote: "0",
|
||||
keyValueType: "/2022-12-20/qygzqdjd1g.yaml"
|
||||
},
|
||||
{
|
||||
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/QiniuUploader";
|
||||
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";
|
||||
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: {
|
||||
id: {
|
||||
title: "ID",
|
||||
key: "id",
|
||||
type: "number",
|
||||
column: {
|
||||
width: 50
|
||||
},
|
||||
form: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
file: {
|
||||
title: "七牛云上传",
|
||||
type: "file-uploader",
|
||||
form: {
|
||||
component: {
|
||||
uploader: {
|
||||
type: "qiniu"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
pictureCard: {
|
||||
title: "照片墙",
|
||||
type: "image-uploader",
|
||||
form: {
|
||||
component: {
|
||||
uploader: {
|
||||
type: "qiniu"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
cropper: {
|
||||
title: "裁剪",
|
||||
type: "cropper-uploader",
|
||||
form: {
|
||||
component: {
|
||||
uploader: {
|
||||
type: "qiniu"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -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: "AliossUploader",
|
||||
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,22 @@
|
||||
import mockUtil from "/src/mock/base";
|
||||
const options = {
|
||||
name: "QiniuUploader",
|
||||
idGenerator: 0
|
||||
};
|
||||
const list = [
|
||||
{
|
||||
avatar: "http://greper.handsfree.work/extends/avatar.jpg",
|
||||
file: ["http://greper.handsfree.work/extends/avatar.jpg", "https://www.baidu.com/img/bd_logo1.png"],
|
||||
image: ["http://greper.handsfree.work/extends/avatar.jpg", "https://www.baidu.com/img/bd_logo1.png"],
|
||||
image2: ["http://greper.handsfree.work/extends/avatar.jpg", "https://www.baidu.com/img/bd_logo1.png"]
|
||||
},
|
||||
{
|
||||
radio: "2"
|
||||
},
|
||||
{
|
||||
radio: "0"
|
||||
}
|
||||
];
|
||||
options.list = list;
|
||||
const mock = mockUtil.buildMock(options);
|
||||
export default mock;
|
||||
Reference in New Issue
Block a user