ct-component-plus 2.1.5 → 2.1.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ct-component-plus",
   "private": false,
-  "version": "2.1.5",
+  "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.10.0",
+    "element-plus": "2.11.0",
     "vue": "^3.2.47"
   },
   "devDependencies": {

package/packages/components/date-picker/src/date-picker.vue

@@ -2,12 +2,14 @@
   <el-date-picker
     :class="[ns.b()]"
     v-model="showValue"
+    :name="componentName"
     :value-format="valueFormat"
     :range-separator="rangeSeparator"
     :clear-icon="clearIcon"
     :prefix-icon="prefixIcon"
     :unlink-panels="unlinkPanels"
-    v-bind="rawAttr">
+    v-bind="rawAttr"
+  >
     <template #default="cell">
       <slot v-bind="cell"></slot>
     </template>
@@ -24,6 +26,15 @@ const emit = defineEmits(datePickerEmits);
 const attr = useAttrs();
 const ns = useNamespace("date-picker");
 
+const componentName = computed(() => {
+  const rawType = props.rawAttr?.type || attr.type;
+  if (isArray(props.name)) return props.name;
+  if (rawType && rawType.includes("range")) {
+    return props.name ? [props.name, props.name] : [];
+  }
+  return props.name;
+});
+
 const showValue = computed({
   get() {
     return props.modelValue;

package/packages/components/date-picker/src/index.js

@@ -1,6 +1,6 @@
-import { buriedParamsKey, searchComponentProps } from '../../../hooks';
-import clearIcon from './clear-icon.vue';
-import dateIcon from './date-icon.vue';
+import { buriedParamsKey, searchComponentProps } from "../../../hooks";
+import clearIcon from "./clear-icon.vue";
+import dateIcon from "./date-icon.vue";
 
 export const datePickerEmits = ["update:modelValue", buriedParamsKey];
 export const datePickerProps = {
@@ -8,27 +8,31 @@ export const datePickerProps = {
   modelValue: [Date, Number, String, Array],
   valueFormat: {
     type: String,
-    default: 'x'
+    default: "x",
   },
   addTimestamp: [Number, String, Array, Function],
   rangeSeparator: {
     type: String,
-    default: '至',
+    default: "至",
   },
   clearIcon: {
     type: [String, Object],
     default() {
-      return clearIcon
-    }
+      return clearIcon;
+    },
   },
   prefixIcon: {
     type: [String, Object],
     default() {
-      return dateIcon
-    }
+      return dateIcon;
+    },
   },
   unlinkPanels: {
     type: Boolean,
-    default: true
-  }
-}
+    default: true,
+  },
+  name: {
+    type: [String, Array],
+    default: "",
+  },
+};

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>

package/packages/components/select/src/select.vue

@@ -5,7 +5,7 @@
     :class="[ns.b(), ns.is('multiple', multiple)]"
     v-model="valueModel"
     collapse-tags
-    v-bind="rawAttr"
+    v-bind="bindAttrs"
     :multiple="multiple"
     :filterable="filterable"
     :clear-icon="clearIcon"
@@ -35,7 +35,7 @@
           </template>
         </el-input>
       </div>
-      <div :class="[ns.e('select')]" v-if="!rawAttr.multipleLimit">
+      <div :class="[ns.e('select')]" v-if="!bindAttrs.multipleLimit">
         <span :class="[ns.e('select-title')]">
           <span v-if="!keyword">已选{{ selectLength }}项</span>
           <span v-else>检索结果</span>
@@ -74,6 +74,12 @@
   </el-select>
 </template>
 
+<script>
+export default {
+  inheritAttrs: false,
+};
+</script>
+
 <script setup>
 import {
   onMounted,
@@ -83,6 +89,7 @@ import {
   inject,
   watchEffect,
   nextTick,
+  useAttrs,
 } from "vue";
 import { selectEmits, selectProps } from "./index";
 import { useNamespace, useBuriedParams, useCheckedAll } from "../../../hooks";
@@ -104,15 +111,66 @@ const emit = defineEmits(selectEmits);
 // };
 const ns = useNamespace("select");
 const optionsByApi = ref([]);
+
+const EMPTY_VALUE = "___CT_EMPTY_STRING___";
+const attrs = useAttrs();
+
+const bindAttrs = computed(() => {
+  const merged = { ...attrs, ...props.rawAttr };
+  if (merged.onChange) {
+    const original = merged.onChange;
+    merged.onChange = (val) => {
+      let realVal = val;
+      if (Array.isArray(val)) {
+        realVal = val.map((v) => (v === EMPTY_VALUE ? "" : v));
+      } else {
+        if (realVal === EMPTY_VALUE) realVal = "";
+      }
+      original(realVal);
+    };
+  }
+  return merged;
+});
+
 const showOptions = computed(() => {
-  return optionsByApi.value.length ? optionsByApi.value : props.options;
+  const opts = optionsByApi.value.length ? optionsByApi.value : props.options;
+  return opts.map((item) => {
+    if (item.value === "") {
+      return { ...item, value: EMPTY_VALUE };
+    }
+    return item;
+  });
 });
 const valueModel = computed({
   get() {
-    return props.modelValue || (props.multiple ? [] : props.modelValue);
+    const val = props.modelValue;
+    const hasEmptyOption = showOptions.value.some(
+      (item) => item.value === EMPTY_VALUE
+    );
+    if (props.multiple) {
+      if (Array.isArray(val)) {
+        return val.map((v) => {
+          if (v === "") {
+            return hasEmptyOption ? EMPTY_VALUE : "";
+          }
+          return v;
+        });
+      }
+      return [];
+    }
+    if (val === "") {
+      return hasEmptyOption ? EMPTY_VALUE : "";
+    }
+    return val ?? "";
   },
   set(newValue) {
-    emit("update:modelValue", newValue);
+    let emitVal = newValue;
+    if (Array.isArray(emitVal)) {
+      emitVal = emitVal.map((v) => (v === EMPTY_VALUE ? "" : v));
+    } else {
+      if (emitVal === EMPTY_VALUE) emitVal = "";
+    }
+    emit("update:modelValue", emitVal);
   },
 });
 const keyword = ref("");

package/packages/components/year-select/src/index.js

@@ -1,13 +1,13 @@
-import { buriedParamsKey, searchComponentProps } from '../../../hooks';
+import { buriedParamsKey, searchComponentProps } from "../../../hooks";
 
 export const yearSelectEmits = [
   "update:modelValue",
   buriedParamsKey,
-  'change',
-  'change-select',
-  'visible-change',
-  'blur',
-  'focus'
+  "change",
+  "changeSelect",
+  "visible-change",
+  "blur",
+  "focus",
 ];
 export const yearSelectProps = {
   ...searchComponentProps,
@@ -15,7 +15,7 @@ export const yearSelectProps = {
   disabled: Boolean,
   multiple: {
     type: Boolean,
-    default: true
+    default: true,
   },
   startPlaceholder: String,
   endPlaceholder: String,
@@ -42,4 +42,4 @@ export const yearSelectProps = {
     type: [String, Object],
     default: "至",
   },
-}
+};