ct-component-plus 2.1.7 → 2.1.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ct-component-plus",
   "private": false,
-  "version": "2.1.7",
+  "version": "2.1.9",
   "type": "module",
   "main": "packages/components/index.js",
   "files": [
@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "cingta-icon": "^2.1.6",
-    "element-plus": "^2.11.0",
+    "element-plus": "2.11.0",
     "vue": "^3.2.47"
   },
   "devDependencies": {

package/packages/components/radio/src/index.js

@@ -1,4 +1,4 @@
-import { buriedParamsKey, searchComponentProps } from '../../../hooks';
+import { buriedParamsKey, searchComponentProps } from "../../../hooks";
 
 export const radioEmits = ["update:modelValue", buriedParamsKey];
 export const radioProps = {
@@ -7,7 +7,16 @@ export const radioProps = {
   options: {
     type: Array,
     default() {
-      return []
-    }
-  }
-}
+      return [];
+    },
+  },
+  api: String,
+  serviceMethod: String,
+  serviceParams: Object,
+  mapObj: {
+    type: Object,
+    default() {
+      return {};
+    },
+  },
+};

package/packages/components/radio/src/radio.vue

@@ -12,9 +12,14 @@
 </template>
 
 <script setup>
-import { computed, onMounted, ref, watchEffect } from "vue";
+import { computed, onMounted, ref, watchEffect, inject, watch } from "vue";
 import { useNamespace, useBuriedParams } from "../../../hooks";
+import { isFunction } from "../../../utils";
 import { radioEmits, radioProps } from "./index";
+
+const baseDao = inject("$ctBaseDao");
+const serviceConfig = inject("$ctServiceConfig");
+
 const props = defineProps(radioProps);
 const emit = defineEmits(radioEmits);
 
@@ -29,9 +34,85 @@ const showValue = computed({
   },
 });
 const optionList = ref([]);
+const optionsByApi = ref([]);
+
+const getUseLabel = (label) => {
+  return typeof label === "string" ? label : String(label);
+};
+
+const watchServiceHandle = async () => {
+  // 通过api获取数据，会监听api以及serviceParams的改变（收集到的依赖改变）都会触发重新查询
+  const cbs = props.cbs || {};
+  if (props.api && baseDao) {
+    try {
+      const method = props.serviceMethod || serviceConfig.defaultMethod;
+      let params = props.serviceParams || {};
+      if (isFunction(cbs.beforeSearch)) {
+        const paramsHandle = await cbs.beforeSearch(params);
+        if (paramsHandle === false) return;
+        params = paramsHandle || params;
+      }
+      baseDao[method](props.api, params).then((res) => {
+        const mapObj = props.mapObj || {};
+        const { list, label = "label", value = "value", self } = mapObj;
+        let data = [];
+        if (list) {
+          data = res[list];
+        } else {
+          data = res;
+        }
+        data = data.map((item) => {
+          if (self) {
+            return { label: getUseLabel(item), value: item };
+          }
+          return {
+            ...item,
+            label: getUseLabel(item[label]),
+            value: item[value],
+          };
+        });
+        optionsByApi.value = data;
+        if (isFunction(cbs.afterSearch)) {
+          cbs.afterSearch(res, optionsByApi, showValue);
+        }
+      });
+    } catch (error) {
+      console.error(error);
+    }
+  }
+  if (isFunction(cbs.defineSearch)) {
+    try {
+      const defineSearchHandle = await cbs.defineSearch(
+        optionsByApi,
+        showValue
+      );
+      if (defineSearchHandle === false) return;
+      if (defineSearchHandle) {
+        optionsByApi.value = defineSearchHandle;
+      }
+    } catch (error) {}
+  }
+};
+
+watch(
+  [
+    () => props.api,
+    () => props.serviceParams,
+    () => props.serviceMethod,
+    () => props.mapObj,
+  ],
+  (newVal, oldVal) => {
+    watchServiceHandle();
+  },
+  {
+    immediate: true,
+  }
+);
 
 watchEffect(async () => {
-  optionList.value = props.options;
+  optionList.value = optionsByApi.value.length
+    ? optionsByApi.value
+    : props.options;
 });
 
 useBuriedParams(props, emit, {
@@ -44,7 +125,10 @@ useBuriedParams(props, emit, {
 defineExpose({
   ref: radioRef,
 });
-onMounted(() => {});
+onMounted(() => {
+  if (props.api && !baseDao) {
+    console.error("请先配置baseDao");
+  }
+});
 </script>
-<style lang='less'>
-</style>
+<style lang="less"></style>