ct-component-plus 2.2.5 → 2.2.7

package/README.md

@@ -1,3 +1,16 @@
-# Vue 3 + Vite
+# v2.2.7版本更新内容：
 
-青塔组件库的 Vue 3 版本，使用 Vite 构建。
+1. 优化级联选择器没有默认值报错的情况
+
+# v2.2.6版本更新内容：
+
+1. 新增数字区间组件
+2. 优化search-box中年份区间及数字区间的大小排序问题
+
+# v2.2.3版本更新内容:
+
+1. 新增分页选择器组件
+
+# v2.2.0版本更新内容:
+
+1. 新增单选框可以通过接口获取数据的功能

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ct-component-plus",
   "private": false,
-  "version": "2.2.5",
+  "version": "2.2.7",
   "type": "module",
   "main": "packages/components/index.js",
   "files": [
@@ -15,7 +15,7 @@
     "docs:build": "vuepress build docs"
   },
   "dependencies": {
-    "cingta-icon": "^2.1.6",
+    "cingta-icon": "^2.3.2",
     "element-plus": "2.4.4",
     "vue": "^3.2.47"
   },
@@ -33,4 +33,4 @@
     "vuepress": "^2.0.0-beta.63",
     "vuepress-plugin-demo-container": "^0.2.0"
   }
-}
+}

package/packages/components/cascader/src/cascader.vue

@@ -1,22 +1,12 @@
 <template>
-  <el-cascader
-    ref="cascaderRef"
-    :class="[
-      ns.b(),
-      ns.is('disabled', disabled),
-      ns.is('filterable', filterable),
-      componentId,
-    ]"
-    v-model="showValue"
-    :props="propsShow"
-    :options="optionsShow"
-    :show-all-levels="showAllLevels"
-    :filterable="filterable"
-    :clearable="clearable"
-    :disabled="disabled"
-    :popper-class="popperClassShow"
-    v-bind="{ ...$attrs, ...rawAttr }"
-  />
+  <el-cascader ref="cascaderRef" :class="[
+    ns.b(),
+    ns.is('disabled', disabled),
+    ns.is('filterable', filterable),
+    componentId,
+  ]" v-model="showValue" :props="propsShow" :options="optionsShow" :show-all-levels="showAllLevels"
+    :filterable="filterable" :clearable="clearable" :disabled="disabled" :popper-class="popperClassShow"
+    v-bind="{ ...$attrs, ...rawAttr }" />
   <!-- <Teleport :to="appendPanelDom">
     <span>大写的六</span>
   </Teleport> -->
@@ -60,7 +50,7 @@ const optionsShow = computed(() => {
 });
 const showValue = computed({
   get() {
-    return props.modelValue;
+    return props.modelValue || [];
   },
   set(newValue) {
     emit("update:modelValue", newValue);
@@ -163,7 +153,7 @@ watchEffect(async () => {
           cbs.afterSearch(res, optionsByApi, showValue);
         }
       });
-    } catch (error) {}
+    } catch (error) { }
   }
   if (isFunction(cbs.defineSearch)) {
     try {
@@ -175,14 +165,14 @@ watchEffect(async () => {
       if (defineSearchHandle) {
         optionsByApi.value = defineSearchHandle;
       }
-    } catch (error) {}
+    } catch (error) { }
   }
 });
 function findLabelsByValues(tree, values) {
   // 通过value值的数组获取label并返回一个包含label的数组
   const result = [];
   function traverse(node) {
-    if (values.includes(node[props.mapObj?.value || "value"])) {
+    if (!values && values.includes(node[props.mapObj?.value || "value"])) {
       result.push(node[props.mapObj?.label || "label"]);
     }
 
@@ -218,6 +208,7 @@ onMounted(() => {
 .ct-cascader {
   width: var(--ct-component-width);
   --ct-cascader-inner-height: var(--ct-component-inner-height);
+
   &.is-filterable {
     .el-cascader__tags {
       &:focus-within {
@@ -227,6 +218,7 @@ onMounted(() => {
       }
     }
   }
+
   .el-cascader__tags {
     display: inline-flex;
     // display: inline-block;
@@ -237,6 +229,7 @@ onMounted(() => {
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
+
     .el-tag {
       display: inline;
       height: auto;
@@ -245,14 +238,17 @@ onMounted(() => {
       background-color: inherit;
       font-size: var(--ct-font-size);
       color: var(--ct-color-black);
+
       &:not(:last-of-type)::after {
         content: "、";
       }
     }
+
     .el-tag__close {
       display: none;
     }
   }
+
   &__dropdown {
     &:not(.is-multiple) {
       .el-cascader__suggestion-item {
@@ -264,6 +260,7 @@ onMounted(() => {
       }
     }
   }
+
   .el-cascader__search-input {
     position: absolute;
     left: var(--ct-component-inner-padding);
@@ -274,11 +271,14 @@ onMounted(() => {
     font-size: var(--ct-font-size);
     margin: 0;
   }
+
   .el-input__wrapper {
     position: relative;
+
     .el-input__inner {
       height: var(--ct-cascader-inner-height) !important;
     }
+
     &::after {
       position: absolute;
       content: v-bind(checkedText);

package/packages/components/index.js

@@ -1,32 +1,33 @@
-import button from './button';
-import radio from './radio';
-import checkbox from './checkbox';
-import input from './input';
-import inputRange from './input-range';
-import select from './select';
-import pagingSelect from './paging-select';
-import yearSelect from './year-select';
-import datePicker from './date-picker';
-import cascader from './cascader';
-import tabs from './tabs';
-import pagination from './pagination';
-import menu from './menu';
+import button from "./button";
+import radio from "./radio";
+import checkbox from "./checkbox";
+import input from "./input";
+import inputRange from "./input-range";
+import numberInputRange from "./number-input-range";
+import select from "./select";
+import pagingSelect from "./paging-select";
+import yearSelect from "./year-select";
+import datePicker from "./date-picker";
+import cascader from "./cascader";
+import tabs from "./tabs";
+import pagination from "./pagination";
+import menu from "./menu";
 
-import searchBox from './search-box';
-import table from './table';
+import searchBox from "./search-box";
+import table from "./table";
 import empty from "./empty";
 import dialog from "./dialog";
-import messageBox from './message-box';
-import CtMessage from './message';
+import messageBox from "./message-box";
+import CtMessage from "./message";
 
-import CtLoading from './loading';
-import CtPage from './page';
+import CtLoading from "./loading";
+import CtPage from "./page";
 
-import ElementPlus from 'element-plus'
-import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
-import cingtaIcon from 'cingta-icon';
+import ElementPlus from "element-plus";
+import zhCn from "element-plus/dist/locale/zh-cn.mjs";
+import cingtaIcon from "cingta-icon";
 // import cingtaIcon from '../../icon/components/index';
-import { isObject } from '../utils';
+import { isObject } from "../utils";
 // import '../style';
 
 const components = [
@@ -35,6 +36,7 @@ const components = [
   checkbox,
   input,
   inputRange,
+  numberInputRange,
   select,
   pagingSelect,
   yearSelect,
@@ -50,35 +52,37 @@ const components = [
   messageBox,
   CtMessage,
   CtLoading,
-  CtPage
-]
+  CtPage,
+];
 
 const serviceConfig = {
-  defaultMethod: 'post'
-}
+  defaultMethod: "post",
+};
 
 const install = function (app, options) {
-  components.forEach(c => app.use(c))
-  app.use(ElementPlus, { locale: zhCn, });
-  app.use(cingtaIcon)
-  let serviceOptions = {}
+  components.forEach((c) => app.use(c));
+  app.use(ElementPlus, { locale: zhCn });
+  app.use(cingtaIcon);
+  let serviceOptions = {};
   if (isObject(options)) {
     const { tableEmptyDom, selectTooltip = false } = options;
     if (!options.baseDao) {
-      console.warn('当前使用的组件库没有配置baseDao')
+      console.warn("当前使用的组件库没有配置baseDao");
     } else {
-      app.provide('$ctBaseDao', options.baseDao)
+      app.provide("$ctBaseDao", options.baseDao);
     }
-    app.provide('$selectTooltip', selectTooltip)
-    if (isObject(options.serviceOptions)) serviceOptions = options.serviceOptions;
-    if (isObject(options.searchBoxComponent)) app.provide('$userDefinedSearchComponent', options.searchBoxComponent)
-    if (isObject(tableEmptyDom)) app.provide('$tableEmptyDom', tableEmptyDom)
+    app.provide("$selectTooltip", selectTooltip);
+    if (isObject(options.serviceOptions))
+      serviceOptions = options.serviceOptions;
+    if (isObject(options.searchBoxComponent))
+      app.provide("$userDefinedSearchComponent", options.searchBoxComponent);
+    if (isObject(tableEmptyDom)) app.provide("$tableEmptyDom", tableEmptyDom);
   }
-  app.provide('$ctServiceConfig', { ...serviceConfig, ...serviceOptions })
-}
+  app.provide("$ctServiceConfig", { ...serviceConfig, ...serviceOptions });
+};
 
 export default {
-  install
-}
-export { CtMessage }
-export * from 'element-plus'
+  install,
+};
+export { CtMessage };
+export * from "element-plus";

package/packages/components/number-input-range/index.js

@@ -0,0 +1,9 @@
+import CtNumberInputRange from "./src/number-input-range.vue";
+
+/* istanbul ignore next */
+CtNumberInputRange.install = function (Vue) {
+  // TODO 这里D组件名是这这里写死的，不是使用CtNumberInputRange.name的形式，因为setup里面不可以直接什么组件的name属性，故而这里没有这个属性，后续可以考虑使用defineOptions（需要安装unplugin-vue-macros插件）
+  Vue.component("CtNumberInputRange", CtNumberInputRange);
+};
+
+export default CtNumberInputRange;

package/packages/components/number-input-range/src/index.js

@@ -0,0 +1,31 @@
+import { buriedParamsKey, searchComponentProps } from "../../../hooks";
+
+export const numberInputRangeEmits = [
+  "update:modelValue",
+  buriedParamsKey,
+  "change",
+];
+export const numberInputRangeProps = {
+  ...searchComponentProps,
+  modelValue: Array,
+  min: Number,
+  max: Number,
+  step: {
+    type: Number,
+    default: 1,
+  },
+  precision: Number,
+  disabled: Boolean,
+  separator: {
+    type: String,
+    default: "--",
+  },
+  controlsPosition: {
+    type: String,
+    default: "right",
+  },
+  placeholder: {
+    type: String,
+    default: "请输入数字",
+  },
+};

package/packages/components/number-input-range/src/number-input-range.vue

@@ -0,0 +1,145 @@
+<template>
+  <div :class="[ns.b(), ns.is('disabled', disabled)]">
+    <div :class="[ns.e('wrapper')]">
+      <el-input-number
+        ref="inputRef1"
+        v-model="leftModel"
+        :placeholder="placeholder"
+        :min="min"
+        :max="max"
+        :step="step"
+        :precision="precision"
+        :disabled="disabled"
+        v-bind="rawAttr"
+        :controls-position="controlsPosition"
+        @change="handleChange($event, 0)"
+      />
+      <span :class="[ns.e('separator')]">
+        <slot name="separator">{{ separator }}</slot>
+      </span>
+      <el-input-number
+        ref="inputRef2"
+        v-model="rightModel"
+        :placeholder="placeholder"
+        :min="min"
+        :max="max"
+        :step="step"
+        :precision="precision"
+        :disabled="disabled"
+        v-bind="rawAttr"
+        :controls-position="controlsPosition"
+        @change="handleChange($event, 1)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref } from "vue";
+import { useNamespace, useBuriedParams } from "../../../hooks";
+import { numberInputRangeEmits, numberInputRangeProps } from "./index";
+const props = defineProps(numberInputRangeProps);
+const emit = defineEmits(numberInputRangeEmits);
+
+useBuriedParams(props, emit);
+const ns = useNamespace("number-input-range");
+
+const inputRef1 = ref(null);
+const inputRef2 = ref(null);
+
+const leftModel = computed({
+  get() {
+    return Array.isArray(props.modelValue) ? props.modelValue[0] : undefined;
+  },
+  set(newValue) {
+    const right = Array.isArray(props.modelValue)
+      ? props.modelValue[1]
+      : undefined;
+    emit("update:modelValue", [newValue, right]);
+  },
+});
+const rightModel = computed({
+  get() {
+    return Array.isArray(props.modelValue) ? props.modelValue[1] : undefined;
+  },
+  set(newValue) {
+    const left = Array.isArray(props.modelValue)
+      ? props.modelValue[0]
+      : undefined;
+    emit("update:modelValue", [left, newValue]);
+  },
+});
+
+const handleChange = (val, index) => {
+  emit("change", props.modelValue, index, val);
+};
+
+defineExpose({
+  ref: [inputRef1, inputRef2],
+});
+</script>
+
+<style lang="less">
+.ct-number-input-range {
+  position: relative;
+  display: inline-flex;
+  width: var(--ct-component-width);
+  font-size: var(--ct-font-size);
+  color: var(--ct-border-color);
+  box-sizing: border-box;
+  vertical-align: middle;
+  @R: .ct-number-input-range;
+  &.is-disabled {
+    cursor: not-allowed;
+    --ct-component-fill-color: var(--ct-component-disabled-bg-color);
+    @{R}__wrapper {
+      .el-input__wrapper {
+        height: var(--ct-component-inner-height);
+        padding: 1px var(--ct-component-inner-padding);
+        box-shadow: unset;
+        border-radius: 0;
+      }
+    }
+  }
+  &:not(.is-disabled):hover {
+    --ct-component-border-color: var(--ct-component-hover-border-color);
+  }
+  &__wrapper {
+    display: inline-flex;
+    flex-grow: 1;
+    align-items: center;
+    justify-content: center;
+    padding: 1px 0;
+    background-color: var(--ct-component-fill-color);
+    background-image: none;
+    border-radius: var(--ct-component-border-radius);
+    transition: var(--el-transition-box-shadow);
+    transform: translate3d(0, 0, 0);
+    box-shadow: 0 0 0 1px var(--ct-component-border-color) inset;
+    &:focus-within {
+      --ct-component-border-color: var(--ct-color-primary);
+    }
+    .el-input-number {
+      width: calc(50% - 8px);
+      &.is-controls-right .el-input__wrapper {
+        padding: 1px var(--ct-component-inner-padding);
+      }
+      .el-input__wrapper {
+        padding: 1px var(--ct-component-inner-padding);
+        box-shadow: unset;
+        border-radius: 0;
+      }
+      .el-input__inner {
+        color: var(--ct-component-color);
+        font-size: inherit;
+      }
+      span[role="button"] {
+        display: none;
+      }
+    }
+  }
+  &__separator {
+    color: var(--ct-color-grey-sub);
+  }
+}
+</style>

package/packages/components/search-box/index.js

@@ -1,12 +1,13 @@
-import CtSearchBox from './src/search-box.vue';
+import CtSearchBox from "./src/search-box.vue";
 
-import CtInput from '../input';
-import CtSelect from '../select';
-import CtDatePicker from '../date-picker';
-import CtCascader from '../cascader';
-import CtYearSelect from '../year-select';
-import CtRadio from '../radio';
-import CtPagingSelect from '../paging-select';
+import CtInput from "../input";
+import CtSelect from "../select";
+import CtDatePicker from "../date-picker";
+import CtCascader from "../cascader";
+import CtYearSelect from "../year-select";
+import CtRadio from "../radio";
+import CtPagingSelect from "../paging-select";
+import CtNumberInputRange from "../number-input-range";
 
 export const searchComponents = {
   CtInput,
@@ -16,14 +17,15 @@ export const searchComponents = {
   CtYearSelect,
   CtRadio,
   CtPagingSelect,
-}
+  CtNumberInputRange,
+};
 
 /* istanbul ignore next */
 CtSearchBox.install = function (Vue) {
-  Vue.component('CtSearchBox', CtSearchBox);
+  Vue.component("CtSearchBox", CtSearchBox);
   // for (const key in searchComponents) {
   //   Vue.component(key, searchComponents[key]);
   // }
 };
 
-export default CtSearchBox;
+export default CtSearchBox;

package/packages/components/search-box/src/search-box.vue

@@ -2,29 +2,48 @@
   <div :class="[ns.b()]">
     <div :class="[ns.e('container')]">
       <div :class="[ns.e('list')]">
-        <div v-for="(item, index) in searchList" :class="[
-          ns.e('item'),
-          ...getComponentClass(item),
-          ns.is('outer-border', outerBorder),
-        ]" :key="item.param || index" :style="{ ...getComponentStyle(item) }" @click="clickItem(item)">
+        <div
+          v-for="(item, index) in searchList"
+          :class="[
+            ns.e('item'),
+            ...getComponentClass(item),
+            ns.is('outer-border', outerBorder),
+          ]"
+          :key="item.param || index"
+          :style="{ ...getComponentStyle(item) }"
+          @click="clickItem(item)"
+        >
           <slot v-bind="getComponentSlotScope(item)">
             <slot name="item-before" v-bind="getComponentSlotScope(item)">
             </slot>
-            <span :class="[
-              ns.e('item-label'),
-              ns.is('required', item.required),
-              ns.is('outer-border', outerBorder),
-            ]">
-              <el-tooltip :disabled="judgeIsHideLabelTooltip(item)" class="box-item" effect="dark" :content="item.label"
-                placement="bottom">
+            <span
+              :class="[
+                ns.e('item-label'),
+                ns.is('required', item.required),
+                ns.is('outer-border', outerBorder),
+              ]"
+            >
+              <el-tooltip
+                :disabled="judgeIsHideLabelTooltip(item)"
+                class="box-item"
+                effect="dark"
+                :content="item.label"
+                placement="bottom"
+              >
                 <span>{{ item.label }}</span>
               </el-tooltip>
               <span :class="[ns.is('required')]" v-if="!outerBorder">：</span>
             </span>
             <div :class="[ns.e('item-component')]">
-              <slot :name="item.componentName || item.param" v-bind="getComponentSlotScope(item)">
-                <component :is="getComponent(item.type)" v-model="searchParamsCurrent[item.param]"
-                  v-bind="getComponentProps(item)">
+              <slot
+                :name="item.componentName || item.param"
+                v-bind="getComponentSlotScope(item)"
+              >
+                <component
+                  :is="getComponent(item.type)"
+                  v-model="searchParamsCurrent[item.param]"
+                  v-bind="getComponentProps(item)"
+                >
                 </component>
               </slot>
             </div>
@@ -33,7 +52,9 @@
         </div>
         <div :class="[ns.e('buttons')]">
           <slot name="solt-search">
-            <ct-button type="border-plain" @click="resetData" v-if="haveReset">重置</ct-button>
+            <ct-button type="border-plain" @click="resetData" v-if="haveReset"
+              >重置</ct-button
+            >
             <ct-button type="border" @click="doSearch">{{
               searchBtnName
             }}</ct-button>
@@ -66,18 +87,18 @@ watch(
   (newValue) => {
     searchParamsCurrent.value = newValue || {};
   },
-  { immediate: true }
+  { immediate: true },
 );
 
 const judgeIsHideLabelTooltip = (item) => {
   if (isString(item.label)) {
-    return item.label.length <= 4;
+    return item.label.length <= 6;
   }
 };
 
 const clickItem = (item) => {
   emit("clickItem", item);
-}
+};
 const getComponentClass = (item) => {
   const classList = [];
   if (item.componentClass) {
@@ -104,8 +125,8 @@ const componentAll = computed(() => {
     CtYearSelect,
     CtRadio,
     CtPagingSelect,
-  } =
-    searchComponents;
+    CtNumberInputRange,
+  } = searchComponents;
   const componentMap = {
     0: CtInput,
     1: CtSelect,
@@ -114,6 +135,7 @@ const componentAll = computed(() => {
     12: CtYearSelect,
     13: "div",
     20: CtRadio,
+    21: CtNumberInputRange,
     22: CtPagingSelect,
     ...userDefinedSearchComponent,
   };
@@ -170,6 +192,20 @@ const resetData = () => {
   emit("doReset");
 };
 const doSearch = () => {
+  // 遍历当前搜索参数，处理需要排序的数组项
+  Object.keys(searchParamsCurrent.value).forEach((key) => {
+    const val = searchParamsCurrent.value[key];
+    if (Array.isArray(val) && val.length === 2) {
+      const [first, second] = val;
+      // 判断是否均为数字且需要交换顺序
+      if (typeof first === "number" && typeof second === "number") {
+        if (first > second) {
+          searchParamsCurrent.value[key] = [second, first];
+        }
+      }
+    }
+  });
+
   emit("update:searchParams", searchParamsCurrent);
   emit("doSearch", searchParamsCurrent.value);
 };
@@ -181,7 +217,7 @@ defineExpose({
   buriedParams,
   doSearch,
 });
-onMounted(() => { });
+onMounted(() => {});
 </script>
 <style lang="less">
 .ct-search-box {
@@ -199,7 +235,7 @@ onMounted(() => { });
     margin-right: calc(-1 * var(--ct-search-box-item-margin-right));
     margin-top: calc(-1 * var(--ct-search-box-item-margin-top));
 
-    >* {
+    > * {
       margin-right: var(--ct-search-box-item-margin-right);
       margin-top: var(--ct-search-box-item-margin-top);
     }
@@ -208,7 +244,10 @@ onMounted(() => { });
   &__item {
     display: flex;
     align-items: center;
-    width: calc((100% - v-bind(rowNumber) * var(--ct-search-box-item-margin-right)) / v-bind(rowNumber));
+    width: calc(
+      (100% - v-bind(rowNumber) * var(--ct-search-box-item-margin-right)) /
+        v-bind(rowNumber)
+    );
     --ct-search-box-item-component-width: 100%;
 
     &.is-outer-border {
@@ -232,8 +271,11 @@ onMounted(() => { });
 
       .el-input__wrapper,
       .el-select__wrapper,
-      .ct-year-select__wrapper {
-        --el-select-input-focus-border-color: var(--ct-search-box-inner-border-color);
+      .ct-year-select__wrapper,
+      .ct-number-input-range__wrapper {
+        --el-select-input-focus-border-color: var(
+          --ct-search-box-inner-border-color
+        );
         box-shadow: 0 0 0 1px var(--ct-search-box-inner-border-color) !important;
       }
     }
@@ -261,7 +303,7 @@ onMounted(() => { });
     &-component {
       flex: 1;
 
-      >* {
+      > * {
         width: var(--ct-search-box-item-component-width) !important;
       }
     }

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

@@ -104,11 +104,11 @@ const selectYearE = computed({
 
 const handleNewValue = (newValue) => {
   let newArr = JSON.parse(JSON.stringify(newValue));
-  if (isArray(newValue)) {
-    if (newArr[0] && newArr[1] && newArr[0] > newArr[1]) {
-      newArr = [newValue[1], newValue[0]];
-    }
-  }
+  // if (isArray(newValue)) {
+  //   if (newArr[0] && newArr[1] && newArr[0] > newArr[1]) {
+  //     newArr = [newValue[1], newValue[0]];
+  //   }
+  // }
   emit("update:modelValue", newArr);
   emit("change", newArr);
 };
@@ -135,9 +135,12 @@ const getYearList = () => {
   }
   yearList.value = yearArr;
 };
-watch(() => props.range, () => {
-  getYearList();
-})
+watch(
+  () => props.range,
+  () => {
+    getYearList();
+  },
+);
 const filterHandleE = (str) => {
   //处理结束年
   if (judgeYear(str) && judgeRange(str)) {
@@ -207,7 +210,7 @@ onMounted(() => {
   getYearList();
 });
 </script>
-<style lang='less'>
+<style lang="less">
 .ct-year-select {
   --el-select-input-focus-border-color: transparent;
   --ct-year-select-select-inner-box-shadow: none;
@@ -274,4 +277,4 @@ onMounted(() => {
     }
   }
 }
-</style>
+</style>