ct-component-plus 0.0.1

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

@@ -0,0 +1,331 @@
+<template>
+  <el-select
+    ref="selectRef"
+    :class="[ns.b(), ns.is('multiple', multiple)]"
+    v-model="valueModel"
+    collapse-tags
+    :multiple="multiple"
+    :filterable="filterable"
+    :clear-icon="clearIcon"
+    :suffix-icon="suffixIcon"
+    :fit-input-width="fitInputWidth"
+    :select-text="selectText"
+    :popper-class="ns.e('popper')"
+    @focus="showSearchPrefix"
+    @blur="hideSearchPrefix"
+  >
+    <template #prefix>
+      <div
+        :class="[ns.e('filterable-icon')]"
+        v-if="filterable && !valueModel && showSearch"
+      >
+        <ct-icon name="search_line"></ct-icon>
+      </div>
+      <slot name="prefix"></slot>
+    </template>
+    <div :class="[ns.e('top')]" v-if="multiple">
+      <div :class="[ns.e('filter')]">
+        <el-input v-model="keyword" ref="filterInput">
+          <template #prefix>
+            <ct-icon name="search_line"></ct-icon>
+          </template>
+        </el-input>
+      </div>
+      <div :class="[ns.e('select')]">
+        <span :class="[ns.e('select-title')]">
+          <span v-if="!keyword">已选{{ selectLength }}项</span>
+          <span v-else>检索结果</span>
+        </span>
+        <el-checkbox v-model="checkedAll" v-show="!noFilterOptions"
+          >全选</el-checkbox
+        >
+      </div>
+    </div>
+    <div :class="[ns.e('options')]" v-show="!noFilterOptions">
+      <slot>
+        <el-option
+          v-for="(item, index) in filterOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+          <slot name="option" :item="item" :index="index">
+            <span>{{ item.label }}</span>
+          </slot>
+        </el-option>
+      </slot>
+    </div>
+    <Empty :text="emptyText" v-if="multiple && noFilterOptions" />
+    <template #empty>
+      <slot name="empty">
+        <Empty :text="emptyText" />
+      </slot>
+    </template>
+  </el-select>
+</template>
+
+<script setup>
+import { onMounted, computed, ref, watch, inject, watchEffect } from "vue";
+import { selectEmits, selectProps } from "./index";
+import { useNamespace, useBuriedParams, useCheckedAll } from "../../../hooks";
+import { isFunction, isArray } from "../../../utils";
+import Empty from "./empty.vue";
+const baseDao = inject("$ctBaseDao");
+const serviceConfig = inject("$ctServiceConfig");
+
+const props = defineProps(selectProps);
+const emit = defineEmits(selectEmits);
+
+const getBuriedContent = () => {
+  const select = selectObj.value;
+  if (isArray(select)) {
+    return select.map((item) => item.label);
+  }
+  return select.label;
+};
+const ns = useNamespace("select");
+const optionsByApi = ref([]);
+const showOptions = computed(() => {
+  return optionsByApi.value.length ? optionsByApi.value : props.options;
+});
+const valueModel = computed({
+  get() {
+    return props.modelValue || (props.multiple ? [] : "");
+  },
+  set(newValue) {
+    emit("update:modelValue", newValue);
+  },
+});
+const keyword = ref("");
+const selectRef = ref(null);
+const filterInput = ref(null);
+
+const selectLength = computed(() => {
+  return valueModel.value.length;
+});
+const filterOptions = ref([]);
+const noFilterOptions = ref(false);
+const selectObj = computed(() => {
+  if (!props.multiple)
+    return showOptions.value.find((item) => item.value === valueModel.value);
+  return showOptions.value.filter((item) => {
+    return valueModel.value.includes(item.value);
+  });
+});
+const selectText = computed(() => {
+  if (!props.multiple) return "";
+  if (
+    showOptions.value.length &&
+    showOptions.value.length === valueModel.value.length
+  )
+    return props.selectAllText;
+  const cnt = props.connectors;
+  return selectObj.value.map((item) => item.label).join(cnt);
+});
+const emptyText = computed(() => {
+  return showOptions.value.length
+    ? props.noMatchText || "暂无匹配数据"
+    : props.noDataText || "暂无数据";
+});
+
+watch(
+  () => selectText.value,
+  (newVal) => {
+    selectRef.value.selectedLabel = newVal;
+  }
+);
+watchEffect(async () => {
+  // 输入框过滤，触发的事件
+  let arr = showOptions.value.filter((item) => {
+    return item.label && item.label.includes(keyword.value);
+  });
+  const cbs = props.cbs || {};
+  if (isFunction(cbs.filterCallback)) {
+    try {
+      const filterCallbackHandle = await cbs.filterCallback(
+        keyword.value,
+        showOptions.value,
+        valueModel
+      );
+      if (filterCallbackHandle === false) return;
+      arr = filterCallbackHandle || arr;
+    } catch (error) {}
+  }
+  if (arr.length) {
+    filterOptions.value = arr;
+    noFilterOptions.value = false;
+  } else {
+    filterOptions.value = showOptions.value;
+    noFilterOptions.value = true;
+  }
+});
+watchEffect(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: item, value: item };
+          }
+          return {
+            ...item,
+            label: item[label],
+            value: item[value],
+          };
+        });
+        optionsByApi.value = data;
+        if (isFunction(cbs.afterSearch)) {
+          cbs.afterSearch(res, optionsByApi, valueModel);
+        }
+      });
+    } catch (error) {}
+  }
+  if (isFunction(cbs.defineSearch)) {
+    try {
+      const defineSearchHandle = await cbs.defineSearch(
+        optionsByApi,
+        valueModel
+      );
+      if (defineSearchHandle === false) return;
+      if (defineSearchHandle) {
+        optionsByApi.value = defineSearchHandle;
+      }
+    } catch (error) {}
+  }
+});
+const checkedAll = useCheckedAll(filterOptions, valueModel).checkedAll;
+
+const focusFilter = () => {
+  if (filterInput.value && filterInput.value.focus) {
+    filterInput.value.focus();
+  }
+};
+
+const showSearch = ref(false);
+const showSearchPrefix = () => {
+  showSearch.value = true;
+};
+const hideSearchPrefix = () => {
+  showSearch.value = false;
+};
+
+useBuriedParams(props, emit, {
+  getContent: () => {
+    const select = selectObj.value || {};
+    if (isArray(select)) {
+      return select.map((item) => item.label);
+    }
+    return select.label;
+  },
+});
+
+onMounted(() => {
+  if (!baseDao) {
+    console.error("请先配置baseDao");
+  }
+});
+defineExpose({
+  ref: selectRef,
+  keyword,
+  filterInput,
+  focusFilter,
+  baseDao,
+  serviceConfig,
+  noFilterOptions,
+  selectObj,
+  checkedAll,
+});
+</script>
+<style lang='less'>
+.ct-select {
+  width: 214px;
+  &__top {
+    padding: 0 16px;
+    font-size: var(--ct-font-size);
+  }
+  &__options {
+    max-height: 274px;
+    overflow-y: auto;
+  }
+  &__select {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+    &-title {
+      color: var(--ct-color-grey-sub);
+      line-height: 1;
+    }
+    .el-checkbox {
+      height: auto;
+    }
+  }
+  &__filter {
+    margin-bottom: 16px;
+    .el-input {
+      --el-input-height: 28px;
+    }
+  }
+  &__popper {
+    .el-select-dropdown__wrap {
+      max-height: unset;
+    }
+  }
+  .el-select__tags {
+    display: none;
+  }
+  .el-input__prefix-inner {
+    & > :last-child {
+      margin-right: 0;
+    }
+  }
+  &__filterable-icon {
+    position: absolute;
+    z-index: 3;
+    right: var(--ct-component-inner-padding);
+    top: 50%;
+    height: calc(var(--ct-component-size) - 2px);
+    transform: translateY(-50%);
+    background-color: #fff;
+  }
+  &__empty {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 15px 16px;
+    color: var(--ct-color-grey-sub);
+  }
+  &.is-multiple {
+    &::after {
+      content: attr(select-text);
+      position: absolute;
+      left: var(--ct-component-inner-padding);
+      right: calc(var(--ct-component-inner-padding) * 2);
+      top: 50%;
+      transform: translateY(-50%);
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      cursor: pointer;
+    }
+  }
+}
+</style>

package/packages/components/table/index.js

@@ -0,0 +1,8 @@
+import CtTable from './src/table.vue';
+
+/* istanbul ignore next */
+CtTable.install = function (Vue) {
+  Vue.component('CtTable', CtTable);
+};
+
+export default CtTable;

package/packages/components/table/src/TableSort.vue

@@ -0,0 +1,179 @@
+<template>
+  <div :class="ns.b()">
+    <el-popover
+      placement="bottom-start"
+      :popper-class="ns.e('popover')"
+      trigger="click"
+    >
+      <template #reference>
+        <div :class="ns.e('btn')">
+          <ct-icon name="sort2-down_line" size="16"></ct-icon>
+          排序
+        </div>
+      </template>
+      <div :class="ns.e('content')">
+        <div :class="ns.e('order')">
+          <div
+            :class="[
+              ns.em('order', 'item'),
+              ns.e('item'),
+              ns.is('active', sortOrder === item.value),
+            ]"
+            v-for="item in popover.orderList"
+            :key="item.value"
+            @click="handleOrder(item)"
+          >
+            <ct-icon name="check_line" :class="ns.em('item', 'icon')"></ct-icon>
+            {{ item.label }}
+          </div>
+        </div>
+        <div :class="ns.e('list')">
+          <div
+            :class="[
+              ns.em('list', 'item'),
+              ns.e('item'),
+              ns.is('active', sortProp === item.value),
+            ]"
+            v-for="item in sortList"
+            :key="item.value"
+            @click="handleProp(item)"
+          >
+            <ct-icon name="check_line" :class="ns.em('item', 'icon')"></ct-icon>
+            {{ item.label }}
+          </div>
+        </div>
+      </div>
+    </el-popover>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, computed } from "vue";
+import { useNamespace } from "../../../hooks";
+
+const ns = useNamespace("table-sort");
+const props = defineProps({
+  sortList: {
+    //需要排序的字段列表
+    type: Array,
+  },
+  sortObj: {
+    //双向绑定的排序参数对象
+    type: Object,
+    default: () => {
+      return {};
+    },
+  },
+});
+const emit = defineEmits(["update:sortObj"]);
+
+const popover = reactive({
+  visible: false,
+  orderList: [
+    { label: "升序", value: "ascending" },
+    { label: "降序", value: "descending" },
+  ],
+});
+const sortOrder = computed({
+  get() {
+    return props.sortObj.order;
+  },
+  set(val) {
+    const newSortObj = {
+      ...props.sortObj,
+      order: val,
+    };
+    emit("update:sortObj", newSortObj);
+  },
+});
+const handleOrder = (item) => {
+  if (sortOrder.value !== item.value) {
+    sortOrder.value = item.value;
+  }
+};
+const sortProp = computed({
+  get() {
+    return props.sortObj.prop;
+  },
+  set(val) {
+    const newSortObj = {
+      ...props.sortObj,
+      prop: val,
+    };
+    emit("update:sortObj", newSortObj);
+  },
+});
+const handleProp = (item) => {
+  if (sortProp.value !== item.value) {
+    sortProp.value = item.value;
+  }
+};
+</script>
+
+<style scoped lang='less'>
+.ct-table-sort {
+  @R:.ct-table-sort;
+  width: fit-content;
+  &__btn {
+    color: var(--ct-color-sub-blue);
+    line-height: 18px;
+    display: flex;
+    align-items: center;
+    width: fit-content;
+    cursor: pointer;
+  }
+  &__content {
+    @{R}__item{
+      height: 30px;
+      line-height: 30px;
+      padding: 0 16px;
+      border-radius: 4px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      &:not(:last-child){
+        margin-bottom: 2px;
+      }
+      &--icon{
+        margin-right: 6px;
+        height: 14px;
+        color:#fff;
+      }
+      &.is-active{
+        @R:.ct-table-sort__item;
+        background: var(--ct-component-hover-color);
+        color: var(--ct-color-sub-blue);
+        @{R}--icon{
+          color: var(--ct-color-sub-blue);
+        }
+      }
+      &:hover{
+        color: var(--ct-color-sub-blue);
+      }
+    }
+    @{R}__order{
+      border-bottom: var(--ct-border-color-light) solid 1px;
+    }
+    @{R}__order--item{
+      &:last-child{
+        margin-bottom: 9px;
+      }
+    }
+    @{R}__list{
+      margin-top: 8px;
+    }
+    @{R}__list--item{
+
+    }
+  }
+}
+</style>
+
+<style lang="less">
+.el-popover.ct-table-sort__popover {
+  padding: 11px 6px;
+  min-width: 134px;
+  box-shadow: 0px 4px 14px 0px rgba(102, 114, 144, 0.1);
+  border-radius: 4px;
+}
+</style>

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

@@ -0,0 +1,47 @@
+import { ref } from "vue";
+
+export const tableEmits = ["update:multiSelect", "update:defaultSort"];
+export const tableProps = {
+  tableProps: {
+    type: Object,
+    default() {
+      return {
+        tableData: [],
+        columnData: [],
+      };
+    },
+    validator(value) {
+      // 必须有 tableData和columnData 字段
+      const keys = Object.keys(value);
+      return ["tableData", "columnData"].every(
+        (key) => keys.indexOf(key) !== -1
+      );
+    },
+  },
+  columnWidth: {
+    type: Array,
+    default: () => {
+      return []
+    }
+  },
+  isMultiSelect: {
+    type: Boolean,
+    default: false
+  },
+  multiSelect: {//多选数组
+    type: Array,
+    default: [],
+  },
+  teleportDom: {
+    type: String,
+  },
+  defaultSort: {
+    type: Object,
+    default: () => {
+      return {}
+    }
+  },
+  pagination: {
+    type: [Number, String],
+  }
+}