perf: 单选、多选、select、tree-select、table-select 都提供selected-change事件，可以获取…

…选中的dict选项
fast-crud · Jun 7, 2024 · 312489d · 312489d
1 parent c88e1e9
commit 312489d
Show file tree

Hide file tree

Showing 8 changed files with 171 additions and 18 deletions.
diff --git a/packages/fast-admin/fs-admin-element b/packages/fast-admin/fs-admin-element
diff --git a/packages/fast-admin/fs-admin-naive-ui b/packages/fast-admin/fs-admin-naive-ui
diff --git a/packages/fast-crud/src/components/extends/fs-dict-cascader.vue b/packages/fast-crud/src/components/extends/fs-dict-cascader.vue
@@ -1,5 +1,11 @@
 <template>
-  <component :is="ui.cascader.name" ref="cascaderRef" :options="computedOptions" v-bind="fieldNamesBinder" />
+  <component
+    :is="ui.cascader.name"
+    ref="cascaderRef"
+    :options="computedOptions"
+    v-bind="fieldNamesBinder"
+    @change="onSelectChange"
+  />
 </template>
 <script lang="ts">
 import { useDict } from "../../use/use-dict";
@@ -28,7 +34,21 @@ export default defineComponent({
       default: undefined
     }
   } as any,
-  emits: ["dict-change"],
+  emits: [
+    /**
+     * 字典数据变化事件
+     */
+    "dict-change",
+
+    /**
+     * 选中值变化事件，可以获取到当前选中的option对象
+     */
+    "selected-change",
+    /**
+     * 值变化事件
+     */
+    "change"
+  ],
   setup(props, ctx) {
     const dictUseRet = useDict(props, ctx);
     const { ui } = useUi();
@@ -41,11 +61,31 @@ export default defineComponent({
       });
     }
     const computedOptions = dictUseRet.createComputedOptions();
+
+    function onSelectChange(value) {
+      ctx.emit("change", value);
+      if (value) {
+        let selectedOptions = [];
+        const dict = dictUseRet.getDict();
+        if (dict && dict.dataMap) {
+          for (let item of value) {
+            const opt = dict.dataMap[item];
+            if (opt) {
+              selectedOptions.push(opt);
+            }
+          }
+          ctx.emit("selected-change", selectedOptions);
+        }
+      } else {
+        ctx.emit("selected-change", null);
+      }
+    }
     return {
       ui,
       ...dictUseRet,
       fieldNamesBinder,
-      computedOptions
+      computedOptions,
+      onSelectChange
     };
   }
 });

diff --git a/packages/fast-crud/src/components/extends/fs-dict-checkbox.vue b/packages/fast-crud/src/components/extends/fs-dict-checkbox.vue
@@ -1,5 +1,5 @@
 <template>
-  <component :is="ui.checkboxGroup.name">
+  <component :is="ui.checkboxGroup.name" @change="onSelectedChange">
     <component
       :is="optionName || ui.checkbox.name"
       v-for="item of computedOptions"
@@ -56,15 +56,49 @@ export default defineComponent({
       default: undefined
     }
   },
-  emits: ["dict-change"],
+  emits: [
+    /**
+     * 字典数据变化事件
+     */
+    "dict-change",
+
+    /**
+     * 选中值变化事件，可以获取到当前选中的option对象
+     */
+    "selected-change",
+    /**
+     * 值变化事件
+     */
+    "change"
+  ],
   setup(props, ctx) {
     const { ui } = useUi();
     let usedDict = useDict(props, ctx, ui.checkboxGroup.modelValue);
     const computedOptions = usedDict.createComputedOptions();
+    const onSelectedChange = (value: any) => {
+      ctx.emit("change", value);
+      if (value) {
+        let selectedOptions = [];
+        const dict = usedDict.getDict();
+        if (dict && dict.dataMap) {
+          for (let item of value) {
+            const opt = dict.dataMap[item];
+            if (opt) {
+              selectedOptions.push(opt);
+            }
+          }
+          ctx.emit("selected-change", selectedOptions);
+        }
+      } else {
+        ctx.emit("selected-change", null);
+      }
+    };
+
     return {
       ui,
       ...usedDict,
-      computedOptions
+      computedOptions,
+      onSelectedChange
     };
   }
 });

diff --git a/packages/fast-crud/src/components/extends/fs-dict-radio.vue b/packages/fast-crud/src/components/extends/fs-dict-radio.vue
@@ -1,5 +1,5 @@
 <template>
-  <component :is="ui.radioGroup.name">
+  <component :is="ui.radioGroup.name" @change="onSelectedChange">
     <component
       :is="computedRadioName"
       v-for="item of computedOptions"
@@ -65,7 +65,21 @@ export default defineComponent({
       default: undefined
     }
   },
-  emits: ["dict-change"],
+  emits: [
+    /**
+     * 字典数据变化事件
+     */
+    "dict-change",
+
+    /**
+     * 选中值变化事件，可以获取到当前选中的option对象
+     */
+    "selected-change",
+    /**
+     * 值变化事件
+     */
+    "change"
+  ],
   setup(props: any, ctx: any) {
     const { ui } = useUi();
 
@@ -78,11 +92,25 @@ export default defineComponent({
 
     let usedDict = useDict(props, ctx, ui.radioGroup.modelValue);
     const computedOptions = usedDict.createComputedOptions();
+
+    const onSelectedChange = (value: any) => {
+      value = value.target.value;
+      ctx.emit("change", value);
+      const dict = usedDict.getDict();
+      if (dict && dict.dataMap && dict.dataMap[value]) {
+        const opt = dict.dataMap[value];
+        ctx.emit("selected-change", opt);
+      } else {
+        ctx.emit("selected-change", null);
+      }
+    };
+
     return {
       ui,
       computedRadioName,
       ...usedDict,
-      computedOptions
+      computedOptions,
+      onSelectedChange
     };
   }
 });

diff --git a/packages/fast-crud/src/components/extends/fs-dict-select.tsx b/packages/fast-crud/src/components/extends/fs-dict-select.tsx
@@ -71,6 +71,8 @@ export default defineComponent({
       if (dict && dict.dataMap && dict.dataMap[value]) {
         const opt = dict.dataMap[value];
         ctx.emit("selected-change", opt);
+      } else {
+        ctx.emit("selected-change", null);
       }
     };
     return {

diff --git a/packages/fast-crud/src/components/extends/fs-dict-tree.vue b/packages/fast-crud/src/components/extends/fs-dict-tree.vue
@@ -5,6 +5,7 @@
     :[ui.treeSelect.options]="computedOptions"
     :placeholder="computedPlaceholder"
     v-bind="computedBinding"
+    @change="onSelectedChange"
   />
 </template>
 <script lang="ts">
@@ -40,7 +41,21 @@ export default defineComponent({
       default: undefined
     }
   },
-  emits: ["dict-change"],
+  emits: [
+    /**
+     * 字典数据变化事件
+     */
+    "dict-change",
+
+    /**
+     * 选中值变化事件，可以获取到当前选中的option对象
+     */
+    "selected-change",
+    /**
+     * 值变化事件
+     */
+    "change"
+  ],
   // render () {
   //   return this.renderFunc({ data: this.data, dataMap: this.dataMap, scope: this.scope, attrs: this.$attrs })
   // },
@@ -63,12 +78,37 @@ export default defineComponent({
         children: dict.children
       });
     });
+
+    const onSelectedChange = (value: any) => {
+      ctx.emit("change", value);
+      if (value) {
+        const dict = usedDict.getDict();
+        if (dict && dict.dataMap) {
+          if (value instanceof Array) {
+            let selectedOptions = [];
+            for (let item of value) {
+              const opt = dict.dataMap[item];
+              if (opt) {
+                selectedOptions.push(opt);
+              }
+            }
+            ctx.emit("selected-change", selectedOptions);
+          } else {
+            ctx.emit("selected-change", dict.dataMap[value]);
+          }
+        }
+      } else {
+        ctx.emit("selected-change", null);
+      }
+    };
+
     return {
       ui,
       computedBinding,
       computedPlaceholder,
       ...usedDict,
-      computedOptions
+      computedOptions,
+      onSelectedChange
     };
   }
 });

diff --git a/packages/fast-crud/src/components/extends/fs-table-select.vue b/packages/fast-crud/src/components/extends/fs-table-select.vue
@@ -153,7 +153,12 @@ const slots = defineSlots<{
   default: any;
 }>();
 
-const emits = defineEmits(["change", "update:modelValue"]);
+const emits = defineEmits([
+  "change",
+  "update:modelValue",
+  /* 选中行变化事件 */
+  "selected-change"
+]);
 const { ui } = useUi();
 const { t } = useI18n();
 const dictSelectRef = ref();
@@ -325,22 +330,26 @@ function onOk() {
     return;
   }
   let value = null;
+  let rows = null;
   if (selectedRowKeys.value?.length > 0) {
     value = [...selectedRowKeys.value];
 
+    rows = value.map((item) => {
+      return props.dict.getDictMap()[item];
+    });
     if (props.valueType === "object") {
-      value = value.map((item) => {
-        return props.dict.getDictMap()[item];
-      });
+      value = rows;
     }
 
-    if (props.multiple !== true) {
+    if (props.multiple !== true && value.length > 0) {
       value = value[0];
     }
   }
 
   emits("update:modelValue", value);
   emits("change", value);
+  emits("selected-change", rows);
+
   dialogOpen.value = false;
 }