st-comp 0.0.47 → 0.0.49

package/packages/VarietySearch/components/ModelSearch/index.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="st-VarietySearch-modelSearch">
+    <div class="st-VarietySearch-modelSearch-label">
+      {{ config.label }}：
+      <el-button
+        text
+        size="small"
+        type="primary"
+      >
+        不限
+      </el-button>
+    </div>
+    <div class="st-VarietySearch-modelSearch-content">
+      <el-button
+        v-for="item in orderByInfoList"
+        :key="item.ksy"
+        size="small"
+        text
+        @click="open(item)"
+      >
+        {{ item.label }}
+      </el-button>
+    </div>
+    <div class="st-VarietySearch-modelSearch-tag">
+      <el-tag
+        v-for="item in list"
+        :key="item.key"
+        closable
+        type="info"
+        :disable-transitions="false"
+        @close="deleteList(item)"
+        style="margin-right: 5px; margin-bottom: 5px;"
+      >
+        <template v-if="item.type === 'default'">
+          <template v-if="typeof item.start === 'number' && typeof item.end === 'number'">
+            {{ item.label }}：{{ item.start }}{{ item.startUnit }} ~ {{ item.end }}{{ item.endUnit }}
+          </template>
+          <template v-else-if="typeof item.start === 'number'">
+            {{ item.label }}：≥{{ item.start }}{{ item.endUnit }}
+          </template>
+          <template v-else-if="typeof item.end === 'number'">
+            {{ item.label }}：≤{{ item.end }}{{ item.endUnit }}
+          </template>
+        </template>
+        <template v-else-if="item.type ==='radio'">
+          {{ item.label }}：{{ item.radioLabel }}
+        </template>
+        <template v-else-if="item.type ==='tFeaturelncomes'">
+          {{ item.label }}：{{ item.withFewYears }}年内{{ item.yearsCount ? `${item.yearsCount}年以上` : '' }}盈利{{ item.rule === 2 ? "跌" : "超" }}过{{ item.netProfit }}亿
+        </template>
+        <el-text
+          style="font-size: 12px; cursor: pointer"
+          type="primary"
+          @click="open(item)"
+        >
+          修改
+        </el-text>
+      </el-tag>
+    </div>
+    <Dialog
+      v-model="visible"
+      :data="modelItem"
+      @submit="onSubmit"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { getConfig } from './config'
+import Dialog from './Dialog.vue'
+
+const orderByInfoList = getConfig()
+
+const emit = defineEmits(['change']);
+const props = defineProps({
+  config: {
+    type: Object,
+    require: true,
+    default: () => ({}),
+  },
+  formData: {
+    type: Object,
+    require: true,
+  },
+})
+
+const visible = ref(false)
+const modelItem = ref({})
+const list = computed(() => {
+  return props.formData[props.config.key]
+})
+
+const open = (item) => {
+  modelItem.value = item
+  visible.value = true
+}
+
+const deleteList = (data) => {
+  emit('change', props.config.key, list.value.filter((item) => item.key !== data.key))
+}
+
+const onSubmit = (data) => {
+  if (list.value.find((item) => item.key === data.key)) {
+    // 已经存在当前指标
+    emit('change', props.config.key, list.value.map(item => {
+      if (item.key === data.key) {
+        return data
+      }
+      return item
+    }))
+  } else {
+    // 不存在当前指标
+    emit('change', props.config.key, [...list.value, data])
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.st-VarietySearch-modelSearch {
+  &-label {
+    display: inline-block;
+    vertical-align: top;
+    width: 120px;
+    height: 25px;
+    line-height: 24px;
+    font-size: 12px;
+    &-clear {
+      color: #409eff;
+    }
+  }
+  &-content {
+    vertical-align: top;
+    width: calc(100% - 120px);
+    display: inline-block;
+  }
+  &-tag {
+    min-height: 29px;
+    margin: 5px 0 10px 0;
+  }
+}
+</style>

package/packages/VarietySearch/index.ts

@@ -0,0 +1,8 @@
+import { App } from "vue";
+import StVarietySearch from "./index.vue";
+
+export default {
+  install(app: App) {
+    app.component("st-varietySearch", StVarietySearch);
+  },
+}

package/packages/VarietySearch/index.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="st-VarietySearch">
+    <div
+      v-for="item in formConfig"
+      :key="item.key"
+      class="st-VarietySearch-item"
+    >
+      <CheckBox
+        v-if="item.type === 'checkbox' && (item.show === true || item.show === undefined)"
+        :formData="formData"
+        :config="item"
+        @change="change"
+      />
+      <FactorFilter
+        v-else-if="item.type === 'factorFilter' && (item.show === true || item.show === undefined)"
+        :formData="formData"
+        :config="item"
+        @change="change"
+      />
+      <ModelSearch
+        v-else-if="item.type === 'queryList' && (item.show === true || item.show === undefined)"
+        :formData="formData"
+        :config="item"
+        @change="change"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue"
+import CheckBox from './components/CheckBox/index.vue'
+import FactorFilter from './components/FactorFilter/index.vue'
+import ModelSearch from './components/ModelSearch/index.vue'
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    require: true,
+  },
+  config: {
+    type: Object,
+    require: true,
+  },
+});
+
+const formData = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(val) {
+    emit("update:modelValue", val);
+  },
+});
+
+// 另设表单数据源,避免直接使用传入数据源导致非主动的子影响父
+const formConfig = computed(() => {
+  return Object.keys(props.config).map((key) => {
+    return {
+      key,
+      ...props.config[key],
+      show:
+        props.config[key].show === undefined ? true : props.config[key].show, // 默认展示
+    };
+  });
+});
+
+const change = (key, value) => {
+  formData.value = {
+    ...formData.value,
+    [key]: value,
+  }
+  emit('change', key, value)
+}
+</script>
+
+<style lang="scss" scoped>
+.st-VarietySearch {
+  &-item {
+    margin-bottom: 5px;
+  }
+}
+</style>

package/packages/VirtualTable/index.ts

@@ -0,0 +1,8 @@
+import { App } from "vue";
+import StVirtualTable from "./index.vue";
+
+export default {
+  install(app: App) {
+    app.component("st-virtualTable", StVirtualTable);
+  },
+}

package/packages/VirtualTable/index.vue

@@ -0,0 +1,237 @@
+<!-- 虚拟表格 -->
+<script lang="jsx" setup name="VirtualTable">
+import { ref, computed, watch, onUnmounted } from "vue";
+
+const emit = defineEmits(["scrollCallBack"]);
+
+const props = defineProps({
+  // 表格数据
+  data: {
+    type: Array,
+    default: () => [
+      {
+        featureName: "第一个",
+      },
+      {
+        featureName: "第二个",
+      },
+      {
+        featureName: "第三个",
+      },
+    ],
+  },
+  // 表格渲染DOM结构
+  columns: {
+    type: Array,
+    default: () => [
+      {
+        key: "code",
+        title: "品种",
+        dataKey: "code",
+        width: 120,
+        fixed: true,
+        cellRenderer: ({ rowData }) => {
+          const { featureName } = rowData;
+          return (
+            <div class="overflowText" title={`${featureName}`}>
+              {featureName}
+            </div>
+          );
+        },
+      },
+    ],
+  },
+  // 功能配置项
+  config: {
+    type: Object,
+    default: () => {},
+  },
+});
+
+// 本组件的功能配置
+const config = computed(() => {
+  return {
+    activeRowNum: 1, // 激活行数量, 默认1
+    activeRowKey: "id", // 激活行key, 默认id
+    isOpenPageUpDown: true, // 是否开启键盘pageUp,pageDown移动选择行功能
+    ...props.config,
+  };
+});
+
+const tableRef = ref(null); // 表格实例
+
+const activeData = defineModel("activeData", { default: () => [] });
+const activeDataKeys = computed(() => {
+  const { activeRowKey } = config.value;
+  return activeData.value.map((item) => item[activeRowKey]);
+}); // 利用计算属性,方便表格行样式运算,放在函数中判断该数据会被多次运算,造成额外开销
+
+/**
+ * @description: 表格行样式
+ */
+const tableRowClass = ({ rowData }) => {
+  const { activeRowNum, activeRowKey } = config.value;
+  if (!activeRowNum || !activeData.value.length) return;
+  // 激活行样式处理
+  let className = "";
+  // 1.激活区域第一条,增加上边框高亮样式
+  if (rowData[activeRowKey] === activeDataKeys.value[0]) {
+    className += " virtualTable-active-Area-start";
+  }
+  // 2.激活区域最后一条,增加下边框高亮样式
+  if (rowData[activeRowKey] === activeDataKeys.value[activeDataKeys.value.length - 1]) {
+    className += " virtualTable-active-Area-end";
+  }
+  // 3.激活区域内所有,左右两边均增加高亮样式
+  if (activeDataKeys.value.includes(rowData[activeRowKey])) {
+    className += " virtualTable-active-Area-row";
+  }
+  return className;
+};
+
+/**
+ * @description: 表格行点击
+ */
+const tableRowClick = ({ rowData, rowIndex }) => {
+  const { activeRowNum, activeRowKey } = config.value;
+  if (!activeRowNum || activeDataKeys.value.includes(rowData[activeRowKey])) return;
+  const startIndex = Math.floor(rowIndex / activeRowNum) * activeRowNum;
+  activeData.value = props.data.slice(startIndex, startIndex + activeRowNum);
+};
+
+/**
+ * @description: 表格滚动
+ * @todo: 返回表格滚动相关参数,并处理是否触底标记,暴露给传入的滚动事件
+ */
+let keyDownFlag = false; // 解决手动调用table-v2实例滚动方法的BUG: scrollToRow无法保持横向滚动条位置,需手动记忆再调用scrollToLeft
+let scrollLeft = 0;
+const tableScroll = (params) => {
+  let isTouchBottom = false; // Y轴是否触底
+  // 1.计算虚拟容器高度
+  const virtualDom = document
+    .querySelector("#VirtualTable")
+    .querySelector(".el-table-v2__body")
+    .querySelector("div")
+    .querySelector("div");
+  const virtualDomHeight = Number(virtualDom.style.height.split("px")[0]);
+  // 2.计算表格内容展示高度
+  const tableContentDom = document
+    .querySelector("#VirtualTable")
+    .querySelector(".el-table-v2__body")
+    .querySelector("div");
+  const tableContentHeight = Number(tableContentDom.style.height.split("px")[0]);
+  // 3.计算Y轴是否触底
+  if (virtualDomHeight - params.scrollTop === tableContentHeight) isTouchBottom = true;
+  // 4.记录非键盘操作进行的表格滚动操作时, 横向滚动条位置, 用于解决scrollToRow会调整横向滚动条位置的问题
+  if (keyDownFlag === false) {
+    scrollLeft = params.scrollLeft;
+  }
+  // 5.执行传入的滚动回调函数
+  emit("scrollCallBack", { ...params, isTouchBottom });
+};
+
+// pageUp,pageDown切换选择行事件
+const bindPageUpDownEvent = ({ code }) => {
+  const { data } = props;
+  const { activeRowNum, activeRowKey } = config.value;
+  if (!data.length) return;
+  const startIndex = data.findIndex((rowData) => rowData[activeRowKey] === activeDataKeys.value[0]);
+  if (code === "PageUp") {
+    const newStartIndex = startIndex - activeRowNum;
+    // 上移选中行
+    if (newStartIndex >= 0) {
+      activeData.value = data.slice(newStartIndex, startIndex);
+      keyDownFlag = true;
+      tableRef.value?.scrollToRow(newStartIndex);
+      tableRef.value?.scrollToLeft(scrollLeft);
+      keyDownFlag = false;
+    }
+    return;
+  } else if (code === "PageDown") {
+    // 如果激活行数据的最后一条, 是表数据的最后一行,触发触底事件
+    if (activeData.value[activeData.value.length - 1][activeRowKey] === data[data.length - 1][activeRowKey]) {
+      // 5.执行传入的滚动回调函数
+      emit("scrollCallBack", {
+        yAxisScrollDir: "forward",
+        isTouchBottom: true,
+      });
+    } else {
+      const newStartIndex = startIndex + activeRowNum;
+      activeData.value = data.slice(newStartIndex, newStartIndex + activeRowNum);
+      keyDownFlag = true;
+      tableRef.value?.scrollToRow(newStartIndex + activeData.value.length - 1);
+      tableRef.value?.scrollToLeft(scrollLeft);
+      keyDownFlag = false;
+    }
+  }
+};
+
+watch(
+  () => config.value.isOpenPageUpDown,
+  (newValue) => {
+    // 绑定pageUp,pageDown事件
+    newValue && config.value.activeRowNum && window.addEventListener("keydown", bindPageUpDownEvent);
+  },
+  {
+    immediate: true,
+  }
+);
+
+onUnmounted(() => {
+  // 解绑pageUp,pageDown事件
+  window.removeEventListener("keydown", bindPageUpDownEvent);
+});
+</script>
+
+<template>
+  <el-auto-resizer>
+    <template #default="{ height, width }">
+      <el-table-v2
+        id="VirtualTable"
+        ref="tableRef"
+        :width="width"
+        :height="height"
+        :data="data"
+        :columns="columns"
+        :row-class="tableRowClass"
+        :row-event-handlers="{
+          onClick: tableRowClick,
+        }"
+        fixed
+        border
+        @scroll="tableScroll"
+      >
+        <!-- 空数据状态 -->
+        <template #empty>
+          <el-empty description="暂无数据" style="height: 100%" />
+        </template>
+      </el-table-v2>
+    </template>
+  </el-auto-resizer>
+</template>
+
+<style lang="scss" scoped>
+#VirtualTable {
+  // 激活行样式
+  :deep(.el-table-v2__row.virtualTable-active-Area-start) {
+    border-top: 1px solid var(--el-color-primary);
+  }
+  :deep(.el-table-v2__row.virtualTable-active-Area-row) {
+    border-left: 1px solid var(--el-color-primary);
+    border-right: 1px solid var(--el-color-primary);
+  }
+  :deep(.el-table-v2__row.virtualTable-active-Area-end) {
+    border-bottom: 1px solid var(--el-color-primary);
+  }
+  // 固定左侧列的右边框样式消除
+  :deep(.el-table-v2__left) {
+    .virtualTable-active-Area-row {
+      border-right: 0;
+    }
+  }
+  // 表格空状态
+  :deep(.el-table-v2__empty) {
+    height: calc(100% - 50px);
+  }
+}
+</style>

package/packages/index.ts

@@ -10,7 +10,8 @@ import StPagination from "./Pagination/index.ts"
 import StPie from "./Pie/index.ts"
 import StTable from "./Table/index.ts"
 import StTreeMap from "./TreeMap/index.ts"
-import StVarSeach from "./VarSeach/index.ts"
+import StVarietySearch from "./VarietySearch/index.ts"
+import StVirtualTable from "./VirtualTable/index.ts"
         
 export default {
   install(app: App) {
@@ -25,7 +26,8 @@ export default {
     StPie.install(app)
     StTable.install(app)
     StTreeMap.install(app)
-    StVarSeach.install(app)
+    StVarietySearch.install(app)
+    StVirtualTable.install(app)
   },
 }
         

package/src/pages/VarietySearch/index.vue

@@ -0,0 +1,69 @@
+<template>
+  <div style="width: 100%; height: 100%;">
+    <st-varietySearch
+      v-model="searchParams"
+      :config="searchConfig"
+      @change="changeVarietySearch"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, reactive } from "vue";
+
+const searchParams = ref({
+  exchangeId: [],
+  optionId: [],
+  factorscores: [],
+  queryList: [],
+});
+const searchConfig = reactive({
+  exchangeId: {
+    label: '品种市场',
+    type: 'checkbox',
+    options: [
+      { label: 'A股', value: '0' },
+      { label: 'ETF', value: '1' },
+      { label: '期货', value: '2' },
+    ]
+  },
+  optionId: {
+    label: '常用选项',
+    type: 'checkbox',
+    options: [
+      { label: '常用选项1', value: '0' },
+      { label: '常用选项2', value: '1' },
+      { label: '常用选项3', value: '2' },
+    ]
+  },
+  factorscores: {
+    label: '因子筛选',
+    type: 'factorFilter',
+    freqList: [
+      { label: '周期1', value: '0' },
+      { label: '周期2', value: '1' },
+      { label: '周期3', value: '2' },
+    ],
+    factorList: [
+      { label: '因子1', value: '0' },
+      { label: '因子2', value: '1' },
+      { label: '因子3', value: '2' },
+    ]
+  },
+  queryList: {
+    label: '常用指标',
+    type: 'queryList',
+  }
+})
+
+// 用于品种联动
+const changeVarietySearch = () => {
+  if (searchParams.value.exchangeId.includes('2')) {
+    searchConfig.queryList.show = false
+  } else {
+    searchConfig.queryList.show = true
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>