🔱: [client] sync upgrade with 8 commits [trident-sync]

perf: 增加自定义组件示例 Merge remote-tracking branch 'origin/main' refactor: fs-bpmn refactor: integration fs-bpmn refactor: 集成fs-bpmn refactor: refactor: 优化i18n
2026-05-16 13:17:29 +08:00 · 2023-04-03 19:24:05 +00:00
parent aebce2f241
commit 55e05afe0e
18 changed files with 767 additions and 14 deletions
@@ -0,0 +1,42 @@
+import { requestForMock } from "/src/api/service";
+const request = requestForMock;
+const apiPrefix = "/mock/BasisCustom";
+export function GetList(query: any) {
+  return request({
+    url: apiPrefix + "/page",
+    method: "get",
+    data: query
+  });
+}
+
+export function AddObj(obj: any) {
+  return request({
+    url: apiPrefix + "/add",
+    method: "post",
+    data: obj
+  });
+}
+
+export function UpdateObj(obj: any) {
+  return request({
+    url: apiPrefix + "/update",
+    method: "post",
+    data: obj
+  });
+}
+
+export function DelObj(id: any) {
+  return request({
+    url: apiPrefix + "/delete",
+    method: "post",
+    params: { id }
+  });
+}
+
+export function GetObj(id: any) {
+  return request({
+    url: apiPrefix + "/info",
+    method: "get",
+    params: { id }
+  });
+}
@@ -0,0 +1,146 @@
+import * as api from "./api";
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+import { shallowRef } from "vue";
+import VmodelCounter from "./vmodel-counter.vue";
+import { message } from "ant-design-vue";
+
+export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
+    return await api.GetList(query);
+  };
+  const editRequest = async ({ form, row }: EditReq) => {
+    form.id = row.id;
+    return await api.UpdateObj(form);
+  };
+  const delRequest = async ({ row }: DelReq) => {
+    return await api.DelObj(row.id);
+  };
+
+  const addRequest = async ({ form }: AddReq) => {
+    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
+          }
+        },
+        counter: {
+          title: "自定义组件",
+          type: "text",
+          column: {
+            component: {
+              //引用自定义组件
+              name: shallowRef(VmodelCounter),
+              color: "blue",
+              slots: {
+                //插槽示例
+                default() {
+                  return <span>counter on cell:</span>;
+                }
+              },
+              on: {
+                //监听事件
+                onChange({ $event, row }) {
+                  message.info("counter changed:" + $event);
+                }
+              }
+            }
+          },
+          form: {
+            //form表单
+            component: {
+              //引用自定义组件
+              name: shallowRef(VmodelCounter),
+              vModel: "modelValue",
+              color: "red",
+              on: {
+                //监听事件
+                onChange({ $event, form }) {
+                  message.info("counter changed:" + $event);
+                }
+              },
+              slots: {
+                //插槽示例
+                default() {
+                  return <span>counter on form:</span>;
+                }
+              }
+            }
+          },
+          search: {
+            show: true,
+            //form表单
+            component: {
+              color: "yellow",
+              slots: {
+                //插槽示例
+                default() {
+                  return "counter:";
+                }
+              }
+            }
+          }
+        },
+        cellRender: {
+          title: "单元格render",
+          type: "text",
+          column: {
+            cellRender({ value }) {
+              return <a-tag>{value}</a-tag>;
+            }
+          }
+        },
+        formAroundRender: {
+          title: "表单组件周围的render",
+          type: "text",
+          form: {
+            helper: "演示组件周围自定义render",
+            topRender({ value }) {
+              return <a-tag color="red">topRender</a-tag>;
+            },
+            bottomRender({ value }) {
+              return <a-tag color="red">bottomRender {value ?? ""}</a-tag>;
+            },
+            prefixRender({ value }) {
+              return <a-tag color="red">prefixRender</a-tag>;
+            },
+            suffixRender({ value }) {
+              return <a-tag color="red">suffixRender</a-tag>;
+            }
+          }
+        },
+        formRender: {
+          title: "字段组件本身render",
+          type: "text",
+          form: {
+            helper: "组件本身render",
+            render({ form }) {
+              return (
+                <div>
+                  <a-input v-model={[form.formRender, "value"]} />
+                  render value : {form.formRender}
+                </div>
+              );
+            }
+          }
+        }
+      }
+    }
+  };
+}
@@ -0,0 +1,32 @@
+<template>
+  <fs-page>
+    <template #header>
+      <div class="title">自定义组件</div>
+    </template>
+    <fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
+  </fs-page>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+import { useFs } from "@fast-crud/fast-crud";
+import createCrudOptions from "./crud.js";
+
+export default defineComponent({
+  name: "BasisCustom",
+  setup() {
+    const { crudBinding, crudRef, crudExpose, context } = useFs({ createCrudOptions });
+
+    // 页面打开后获取列表数据
+    onMounted(() => {
+      crudExpose.doRefresh();
+    });
+
+    return {
+      crudBinding,
+      crudRef,
+      ...context
+    };
+  }
+});
+</script>
@@ -0,0 +1,22 @@
+import mockUtil from "/src/mock/base";
+const options: any = {
+  name: "BasisCustom",
+  idGenerator: 0
+};
+const list = [
+  {
+    counter: 1,
+    cellRender: "cellRender1"
+  },
+  {
+    counter: 2,
+    cellRender: "cellRender2"
+  },
+  {
+    counter: 3,
+    cellRender: "cellRender3"
+  }
+];
+options.list = list;
+const mock = mockUtil.buildMock(options);
+export default mock;
@@ -0,0 +1,45 @@
+<template>
+  <a-tooltip title="点击我自增">
+    <a-tag :color="color" @click="onClick">
+      <!-- 插槽示例 -->
+      <slot></slot>
+      <span> {{ modelValue }}</span>
+    </a-tag>
+  </a-tooltip>
+</template>
+
+<script lang="ts">
+import { defineComponent, watch } from "vue";
+
+export default defineComponent({
+  name: "VmodelCounter",
+  props: {
+    modelValue: {
+      type: Number,
+      default: 0
+    },
+    color: {
+      type: String,
+      default: "success"
+    }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(props, ctx) {
+    function onClick() {
+      //发射modelValue更新事件，父组件引用时只需要v-model={xxx}即可
+      ctx.emit("update:modelValue", props.modelValue + 1);
+    }
+    watch(
+      () => {
+        return props.modelValue;
+      },
+      (value) => {
+        ctx.emit("change", value);
+      }
+    );
+    return {
+      onClick
+    };
+  }
+});
+</script>