mirror of
https://github.com/certd/certd.git
synced 2026-05-18 22:57:31 +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/DictCloneable";
|
||||
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,88 @@
|
||||
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);
|
||||
};
|
||||
|
||||
const remoteDict = dict({
|
||||
cloneable: true,
|
||||
url: "/mock/dicts/OpenStatusEnum"
|
||||
});
|
||||
|
||||
return {
|
||||
crudOptions: {
|
||||
remoteDict,
|
||||
request: {
|
||||
pageRequest,
|
||||
addRequest,
|
||||
editRequest,
|
||||
delRequest
|
||||
},
|
||||
columns: {
|
||||
id: {
|
||||
title: "ID",
|
||||
key: "id",
|
||||
type: "number",
|
||||
column: {
|
||||
width: 50
|
||||
},
|
||||
form: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
remote: {
|
||||
title: "远程字典",
|
||||
search: { show: true },
|
||||
dict: remoteDict,
|
||||
type: "dict-select",
|
||||
form: {
|
||||
component: { dict: { cache: false } }
|
||||
}
|
||||
},
|
||||
modifyDict: {
|
||||
title: "动态修改字典",
|
||||
search: { show: false },
|
||||
type: "text",
|
||||
column: {
|
||||
component: {
|
||||
name: "a-switch",
|
||||
vModel: "checked"
|
||||
},
|
||||
valueChange({ row, getComponentRef }) {
|
||||
// 这里不能使用remoteDict,因为在分发时已经clone到form配置中了
|
||||
// 这里dict修改不会影响列里面的数据
|
||||
const targetDict = getComponentRef("remote").dict;
|
||||
targetDict.url = row.modifyDict ? "/mock/dicts/moreOpenStatusEnum?remote" : "/mock/dicts/OpenStatusEnum?remote";
|
||||
targetDict.reloadDict();
|
||||
}
|
||||
},
|
||||
form: {
|
||||
component: {
|
||||
name: "a-switch",
|
||||
vModel: "checked"
|
||||
},
|
||||
valueChange({ form, getComponentRef }) {
|
||||
// 这里不能使用remoteDict,因为在分发时已经clone到form配置中了
|
||||
// 这里dict修改不会影响列里面的数据
|
||||
const targetDict = getComponentRef("remote").dict;
|
||||
targetDict.url = form.modifyDict ? "/mock/dicts/moreOpenStatusEnum?remote" : "/mock/dicts/OpenStatusEnum?remote";
|
||||
targetDict.reloadDict();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<fs-page>
|
||||
<fs-crud ref="crudRef" v-bind="crudBinding">
|
||||
<template #actionbar-right>
|
||||
<a-alert
|
||||
class="ml-1"
|
||||
type="warning"
|
||||
message="如果你想要表格里同一个字段的dict和form表单同一个字段的dict不一样，就需要分发时复制；----点击switch看效果----↓↓↓↓↓↓"
|
||||
/>
|
||||
</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: "DictCloneable",
|
||||
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,21 @@
|
||||
import mockUtil from "/src/mock/base";
|
||||
const options = {
|
||||
name: "DictCloneable",
|
||||
idGenerator: 0
|
||||
};
|
||||
const list = [
|
||||
{
|
||||
status: "1",
|
||||
remote: "2"
|
||||
},
|
||||
{
|
||||
status: "2",
|
||||
remote: "0"
|
||||
},
|
||||
{
|
||||
status: "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/DictPrototype";
|
||||
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,128 @@
|
||||
import * as api from "./api";
|
||||
import { dict } from "@fast-crud/fast-crud";
|
||||
import { requestForMock } from "../../../../api/service";
|
||||
|
||||
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 remoteDict = dict({
|
||||
prototype: true, //这个dict只是一个原型，引用它的dict组件初始化时都会把此dict对象clone一份
|
||||
url: "/mock/dicts/OpenStatusEnum"
|
||||
});
|
||||
|
||||
const dynamicUrlDict = dict({
|
||||
cache: true,
|
||||
prototype: true, //这个dict只是一个原型，引用它的dict组件初始化时都会把此dict对象clone一份
|
||||
url({ row }) {
|
||||
return row.switch ? "/mock/dicts/moreOpenStatusEnum" : "/mock/dicts/OpenStatusEnum";
|
||||
}
|
||||
});
|
||||
const dynamicDict = dict({
|
||||
cache: true,
|
||||
prototype: true, //这个dict只是一个原型，引用它的dict组件初始化时都会把此dict对象clone一份
|
||||
url({ row }) {
|
||||
return row.switch ? "/mock/dicts/moreOpenStatusEnum" : "/mock/dicts/OpenStatusEnum";
|
||||
},
|
||||
async getData({ url }) {
|
||||
return await requestForMock({ url });
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
crudOptions: {
|
||||
request: {
|
||||
pageRequest,
|
||||
addRequest,
|
||||
editRequest,
|
||||
delRequest
|
||||
},
|
||||
columns: {
|
||||
id: {
|
||||
title: "ID",
|
||||
key: "id",
|
||||
type: "number",
|
||||
column: {
|
||||
width: 50
|
||||
},
|
||||
form: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
remote: {
|
||||
title: "远程字典",
|
||||
search: { show: true },
|
||||
dict: remoteDict,
|
||||
type: "dict-select"
|
||||
},
|
||||
modifyDict: {
|
||||
title: "动态修改字典",
|
||||
search: { show: true },
|
||||
type: "text",
|
||||
form: {
|
||||
helper: "此处可以动态切换左边select的options",
|
||||
component: {
|
||||
name: "a-switch",
|
||||
vModel: "checked"
|
||||
},
|
||||
valueChange({ form, value, getComponentRef }) {
|
||||
console.log("form", value);
|
||||
const targetDict = getComponentRef("remote").getDict();
|
||||
targetDict.url = form.modifyDict
|
||||
? "/mock/dicts/moreOpenStatusEnum?remote"
|
||||
: "/mock/dicts/OpenStatusEnum?remote";
|
||||
targetDict.reloadDict();
|
||||
}
|
||||
},
|
||||
column: {
|
||||
component: {
|
||||
name: "a-switch",
|
||||
vModel: "checked"
|
||||
},
|
||||
valueChange({ value, getComponentRef }) {
|
||||
console.log("value", value);
|
||||
const targetDict = getComponentRef("remote").getDict();
|
||||
targetDict.url = value ? "/mock/dicts/moreOpenStatusEnum?remote" : "/mock/dicts/OpenStatusEnum?remote";
|
||||
targetDict.reloadDict();
|
||||
}
|
||||
}
|
||||
},
|
||||
switch: {
|
||||
title: "switch",
|
||||
type: "dict-switch",
|
||||
dict: dict({
|
||||
data: [
|
||||
{ value: true, label: "开启" },
|
||||
{ value: false, label: "关闭" }
|
||||
]
|
||||
}),
|
||||
form: {
|
||||
helper: "动态getData和动态Url根据此字段的值获取不同的dictData，此处无法动态切换，仅在打开对话框时生效"
|
||||
}
|
||||
},
|
||||
dynamicGetData: {
|
||||
title: "动态getData",
|
||||
dict: dynamicDict,
|
||||
type: "dict-select"
|
||||
},
|
||||
dynamicUrl: {
|
||||
title: "动态Url",
|
||||
dict: dynamicUrlDict,
|
||||
type: "dict-select"
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<fs-page>
|
||||
<fs-crud ref="crudRef" v-bind="crudBinding">
|
||||
<template #actionbar-right>
|
||||
<a-alert
|
||||
class="ml-1"
|
||||
type="warning"
|
||||
message="dict配置作为原型，任何用到的地方都会clone一个新的实例例（同一个字段每一行的dict都是不一样的）------点击switch看效果-------↓↓↓↓↓↓↓↓"
|
||||
/>
|
||||
</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: "DictPrototype",
|
||||
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,31 @@
|
||||
import mockUtil from "/src/mock/base";
|
||||
const options = {
|
||||
name: "DictPrototype",
|
||||
idGenerator: 0
|
||||
};
|
||||
const list = [
|
||||
{
|
||||
status: "1",
|
||||
remote: "2",
|
||||
modifyDict: false,
|
||||
switch: true,
|
||||
dynamicGetData: "1",
|
||||
dynamicUrl: "2"
|
||||
},
|
||||
{
|
||||
status: "2",
|
||||
remote: "0",
|
||||
modifyDict: false,
|
||||
dynamicGetData: "1",
|
||||
dynamicUrl: "2"
|
||||
},
|
||||
{
|
||||
status: "0",
|
||||
modifyDict: false,
|
||||
dynamicGetData: "1",
|
||||
dynamicUrl: "2"
|
||||
}
|
||||
];
|
||||
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/DictSharedManager";
|
||||
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,58 @@
|
||||
import * as api from "./api";
|
||||
import { statusDict } from "../shared-dict";
|
||||
export default function ({ crudExpose }) {
|
||||
const pageRequest = async (query) => {
|
||||
return await api.GetList(query);
|
||||
};
|
||||
const editRequest = async ({ form, row }) => {
|
||||
form.id = row.id;
|
||||
return await api.UpdateObj(form);
|
||||
};
|
||||
const delRequest = async ({ row }) => {
|
||||
return await api.DelObj(row.id);
|
||||
};
|
||||
|
||||
const addRequest = async ({ form }) => {
|
||||
return await api.AddObj(form);
|
||||
};
|
||||
|
||||
return {
|
||||
crudOptions: {
|
||||
request: {
|
||||
pageRequest,
|
||||
addRequest,
|
||||
editRequest,
|
||||
delRequest
|
||||
},
|
||||
pagination: {
|
||||
pageSize: 9999
|
||||
},
|
||||
table: {
|
||||
onRefreshed({ data }) {
|
||||
statusDict.setData(data);
|
||||
}
|
||||
},
|
||||
columns: {
|
||||
id: {
|
||||
title: "ID",
|
||||
key: "id",
|
||||
type: "number",
|
||||
column: {
|
||||
width: 50
|
||||
},
|
||||
form: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
name: {
|
||||
title: "name",
|
||||
type: "text"
|
||||
},
|
||||
label: {
|
||||
title: "标签",
|
||||
type: "text"
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<fs-page>
|
||||
<fs-crud ref="crudRef" v-bind="crudBinding">
|
||||
<template #actionbar-right>
|
||||
<a-alert class="ml-1" type="warning" message="管理共享字典，此处添加和修改字典，在使用时实时变化" />
|
||||
</template>
|
||||
</fs-crud>
|
||||
</fs-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent, onMounted } from "vue";
|
||||
import { useFs } from "@fast-crud/fast-crud";
|
||||
import createCrudOptions from "./crud";
|
||||
|
||||
export default defineComponent({
|
||||
name: "DictSharedManager",
|
||||
setup() {
|
||||
// crud组件的ref
|
||||
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
|
||||
|
||||
// 页面打开后获取列表数据
|
||||
onMounted(() => {
|
||||
crudExpose.doRefresh();
|
||||
});
|
||||
|
||||
return {
|
||||
crudBinding,
|
||||
crudRef
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,23 @@
|
||||
import mockUtil from "/src/mock/base";
|
||||
const options = {
|
||||
name: "DictSharedManager",
|
||||
idGenerator: 0,
|
||||
copyTimes: 1
|
||||
};
|
||||
const list = [
|
||||
{
|
||||
name: "close",
|
||||
label: "关闭"
|
||||
},
|
||||
{
|
||||
name: "open",
|
||||
label: "打开"
|
||||
},
|
||||
{
|
||||
name: "stop",
|
||||
label: "停止"
|
||||
}
|
||||
];
|
||||
options.list = list;
|
||||
const mock = mockUtil.buildMock(options);
|
||||
export default mock;
|
||||
@@ -0,0 +1,10 @@
|
||||
import { dict, utils } from "@fast-crud/fast-crud";
|
||||
import * as api from "./manager/api";
|
||||
export const statusDict = dict({
|
||||
value: "name",
|
||||
async getData() {
|
||||
const res = await api.GetList({ query: {}, sort: {}, page: { limit: 9999 } });
|
||||
utils.logger.debug("status dict first loaded", res.records);
|
||||
return res.records;
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,42 @@
|
||||
import { requestForMock } from "/src/api/service";
|
||||
const request = requestForMock;
|
||||
const apiPrefix = "/mock/DictSharedUse";
|
||||
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,47 @@
|
||||
import * as api from "./api";
|
||||
import { statusDict } from "../shared-dict";
|
||||
export default function ({ crudExpose }) {
|
||||
const pageRequest = async (query) => {
|
||||
return await api.GetList(query);
|
||||
};
|
||||
const editRequest = async ({ form, row }) => {
|
||||
form.id = row.id;
|
||||
return await api.UpdateObj(form);
|
||||
};
|
||||
const delRequest = async ({ row }) => {
|
||||
return await api.DelObj(row.id);
|
||||
};
|
||||
|
||||
const addRequest = async ({ form }) => {
|
||||
return await api.AddObj(form);
|
||||
};
|
||||
|
||||
return {
|
||||
crudOptions: {
|
||||
request: {
|
||||
pageRequest,
|
||||
addRequest,
|
||||
editRequest,
|
||||
delRequest
|
||||
},
|
||||
columns: {
|
||||
id: {
|
||||
title: "ID",
|
||||
key: "id",
|
||||
type: "number",
|
||||
column: {
|
||||
width: 50
|
||||
},
|
||||
form: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
status: {
|
||||
title: "状态",
|
||||
type: "dict-select",
|
||||
dict: statusDict
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<fs-page>
|
||||
<fs-crud ref="crudRef" v-bind="crudBinding">
|
||||
<template #actionbar-right>
|
||||
<a-alert class="ml-1" type="warning" message="共享字典的使用" />
|
||||
</template>
|
||||
</fs-crud>
|
||||
</fs-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent, onMounted } from "vue";
|
||||
import { useFs } from "@fast-crud/fast-crud";
|
||||
import createCrudOptions from "./crud";
|
||||
|
||||
export default defineComponent({
|
||||
name: "DictSharedUse",
|
||||
setup() {
|
||||
// crud组件的ref
|
||||
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
|
||||
|
||||
// 页面打开后获取列表数据
|
||||
onMounted(() => {
|
||||
crudExpose.doRefresh();
|
||||
});
|
||||
|
||||
return {
|
||||
crudBinding,
|
||||
crudRef
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,19 @@
|
||||
import mockUtil from "/src/mock/base";
|
||||
const options = {
|
||||
name: "DictSharedUse",
|
||||
idGenerator: 0
|
||||
};
|
||||
const list = [
|
||||
{
|
||||
status: "close"
|
||||
},
|
||||
{
|
||||
status: "stop"
|
||||
},
|
||||
{
|
||||
status: "open"
|
||||
}
|
||||
];
|
||||
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/DictSingle";
|
||||
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,111 @@
|
||||
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);
|
||||
};
|
||||
const statusDict = dict({
|
||||
cloneable: false, // 关闭cloneable，任何情况下，都使用同一个dict
|
||||
data: [
|
||||
{ value: "1", label: "开启", color: "success" },
|
||||
{ value: "2", label: "停止", color: "blue" },
|
||||
{ value: "0", label: "关闭", color: "blue" }
|
||||
]
|
||||
});
|
||||
|
||||
const remoteDict = dict({
|
||||
cloneable: false, // 关闭cloneable，任何情况下，都使用同一个dict
|
||||
url: "/mock/dicts/OpenStatusEnum",
|
||||
immediate: false
|
||||
});
|
||||
// remoteDict.loadDict();
|
||||
|
||||
return {
|
||||
remoteDict,
|
||||
crudOptions: {
|
||||
request: {
|
||||
pageRequest,
|
||||
addRequest,
|
||||
editRequest,
|
||||
delRequest
|
||||
},
|
||||
columns: {
|
||||
id: {
|
||||
title: "ID",
|
||||
key: "id",
|
||||
type: "number",
|
||||
column: {
|
||||
width: 50
|
||||
},
|
||||
form: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
status: {
|
||||
title: "本地字典",
|
||||
search: { show: false },
|
||||
dict: statusDict,
|
||||
type: "dict-select"
|
||||
},
|
||||
remote: {
|
||||
title: "远程字典",
|
||||
search: { show: true },
|
||||
dict: remoteDict,
|
||||
type: "dict-select",
|
||||
column: {
|
||||
component: {
|
||||
onDictChange(opts) {
|
||||
console.log("字典变化：", opts);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
modifyDict: {
|
||||
title: "动态修改字典",
|
||||
search: { show: false },
|
||||
type: "text",
|
||||
form: {
|
||||
component: {
|
||||
name: "a-switch",
|
||||
vModel: "checked"
|
||||
},
|
||||
valueChange({ form }) {
|
||||
console.log("changed", form.modifyDict);
|
||||
remoteDict.url = form.modifyDict
|
||||
? "/mock/dicts/moreOpenStatusEnum?remote"
|
||||
: "/mock/dicts/OpenStatusEnum?remote";
|
||||
// 由于remoteDict.cloneable =false,所以全局公用一个实例，修改会影响全部地方
|
||||
remoteDict.reloadDict();
|
||||
}
|
||||
},
|
||||
column: {
|
||||
component: {
|
||||
name: "a-switch",
|
||||
vModel: "checked",
|
||||
on: {
|
||||
// 注意：必须要on前缀
|
||||
onChange({ $event }) {
|
||||
remoteDict.url = $event
|
||||
? "/mock/dicts/moreOpenStatusEnum?remote"
|
||||
: "/mock/dicts/OpenStatusEnum?remote";
|
||||
remoteDict.reloadDict();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<fs-page>
|
||||
<fs-crud ref="crudRef" v-bind="crudBinding">
|
||||
<template #actionbar-right>
|
||||
<a-alert class="ml-1" type="warning" message="单例dict，修改一个，影响全部组件，----------点击switch看效果----------↓↓↓↓↓↓↓↓↓↓↓↓↓↓" />
|
||||
</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: "DictSingle",
|
||||
setup() {
|
||||
// crud组件的ref
|
||||
const crudRef = ref();
|
||||
// crud 配置的ref
|
||||
const crudBinding = ref();
|
||||
// 暴露的方法
|
||||
const { expose } = useExpose({ crudRef, crudBinding });
|
||||
// 你的crud配置
|
||||
const { crudOptions } = createCrudOptions({ expose });
|
||||
// 初始化crud配置
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
|
||||
const { resetCrudOptions } = useCrud({ expose, crudOptions });
|
||||
// 你可以调用此方法，重新初始化crud配置
|
||||
// resetCrudOptions(options)
|
||||
|
||||
// 页面打开后获取列表数据
|
||||
onMounted(() => {
|
||||
expose.doRefresh();
|
||||
});
|
||||
|
||||
function onClick() {
|
||||
console.log("this.ref", crudRef.value);
|
||||
}
|
||||
|
||||
return {
|
||||
crudBinding,
|
||||
crudRef,
|
||||
onClick
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,21 @@
|
||||
import mockUtil from "/src/mock/base";
|
||||
const options = {
|
||||
name: "DictSingle",
|
||||
idGenerator: 0
|
||||
};
|
||||
const list = [
|
||||
{
|
||||
status: "1",
|
||||
remote: "2"
|
||||
},
|
||||
{
|
||||
status: "2",
|
||||
remote: "0"
|
||||
},
|
||||
{
|
||||
status: "0"
|
||||
}
|
||||
];
|
||||
options.list = list;
|
||||
const mock = mockUtil.buildMock(options);
|
||||
export default mock;
|
||||
Reference in New Issue
Block a user