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

Update README.md
2026-05-17 05:37:30 +08:00 · 2023-01-29 15:26:45 +08:00
parent 62e3945d30
commit d10e80bf83
567 changed files with 36438 additions and 2 deletions
@@ -0,0 +1,32 @@
+import { uiContext } from "@fast-crud/fast-crud";
+
+export default function ({ expose }) {
+  return {
+    crudOptions: {
+      mode:{
+        name:'local',
+        isMergeWhenUpdate:true,
+        isAppendWhenAdd:true
+      },
+      search: {
+        show: false
+      },
+      toolbar:{
+        show:false,
+      },
+      pagination:{
+        show:false
+      },
+      columns: {
+        name: {
+          type: "text",
+          title: "联系人姓名"
+        },
+        mobile: {
+          type: "text",
+          title: "联系人手机号码"
+        }
+      }
+    }
+  };
+}
@@ -0,0 +1,51 @@
+<template>
+  <fs-page>
+    <template #header>
+      <div class="title">
+        将本地crud当做v-model,编辑好之后一并提交，你还可以使用行编辑模式，效果更好
+      </div>
+    </template>
+    <div style="padding:30px">
+      <a-form ref="formRef" :model="form" laba-width="120px">
+        <a-form-item label="姓名">
+          <a-input v-model:value="form.name"></a-input>
+        </a-form-item>
+        <a-form-item label="表格">
+          <div style="min-height: 300px">
+            <FeatureLocalModelValueInput v-model="form.data"/>
+          </div>
+        </a-form-item>
+        <a-form-item >
+          <a-button @click="submit">提交</a-button>
+        </a-form-item>
+      </a-form>
+
+    </div>
+
+  </fs-page>
+</template>
+
+<script>
+import {defineComponent, reactive} from 'vue';
+import {message} from 'ant-design-vue'
+import FeatureLocalModelValueInput from './local.vue'
+export default defineComponent({
+  name: 'FeatureLocalVModel',
+  components:{FeatureLocalModelValueInput},
+  setup() {
+    const form = reactive({
+      name:'test',
+      data: [{name:'初始数据'}],
+    })
+
+    function submit(){
+      message.info("submit:"+JSON.stringify(form))
+      console.log('submit:',form)
+    }
+    return {
+      form,
+      submit
+    };
+  },
+});
+</script>
@@ -0,0 +1,67 @@
+<template>
+  <fs-crud ref="crudRef" v-bind="crudBinding"/>
+</template>
+
+<script>
+import {defineComponent, ref, onMounted, watch} from 'vue';
+import createCrudOptions from './crud';
+import {useExpose, useCrud} from '@fast-crud/fast-crud';
+
+export default defineComponent({
+  name: 'FeatureLocalModelValueInput',
+  props: {
+    modelValue: {
+      default() {
+        return []
+      }
+    }
+  },
+  setup(props) {
+    // 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();
+    // });
+
+    //通过导出modelValue, 可以导出成为一个input组件
+    watch(() => {
+      return props.modelValue
+    }, (value = []) => {
+      crudBinding.value.data = value
+    }, {
+      immediate: true
+    })
+
+
+    // 通过crudBinding.value.data 可以获取表格实时数据
+    function showData() {
+      console.log('data:', crudBinding.value.data)
+    }
+
+
+    return {
+      crudBinding,
+      crudRef,
+      showData,
+    };
+  },
+});
+</script>
+<style lang="less">
+.fs-crud-container.compact .el-table--border {
+  border-left: 1px solid #eee;
+}
+</style>