st-comp 0.0.57 → 0.0.59

package/packages/VarietySearch/index.vue

@@ -1,85 +1,298 @@
-<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']);
+<script setup name="VarietySearch">
+import { watch, computed } from "vue";
+import defaultConfig from "./config.js";
+import FactorScreen from "./components/FactorScreen/index.vue";
+import CommonIndicator from "./components/CommonIndicator/index.vue";
 
 const props = defineProps({
-  modelValue: {
-    type: Object,
-    require: true,
-  },
-  config: {
-    type: Object,
-    require: true,
-  },
+  // 配置项
+  config: { type: Object, default: {} },
 });
-
-const formData = computed({
-  get() {
-    return props.modelValue;
-  },
-  set(val) {
-    emit("update:modelValue", val);
+const searchData = defineModel("searchData", {
+  default: {
+    varietyMarket: null, // 品种市场[单选]
+    commonOption: [], // 常用选项[多选]
+    customTag: [], // 自定标签[多选]
+    factorScreen: [], // 因子筛选
+    commonIndicator: [], // 常用指标
   },
 });
 
-// 另设表单数据源,避免直接使用传入数据源导致非主动的子影响父
-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 config = computed(() => {
+  const result = {};
+  Object.keys(defaultConfig).forEach((key) => {
+    const oldObj = defaultConfig[key];
+    const newObj = props.config[key] ?? {};
+    const mergeObj = { ...oldObj, ...newObj };
+    result[key] = mergeObj;
   });
+  return result;
+});
+// 选项数据源: 品种市场
+const varietyMarketDict = computed(() => {
+  return config.value.varietyMarket.options;
+});
+// 选项数据源: 常用选项
+const commonOptionDict = computed(() => {
+  const { varietyMarket } = searchData.value;
+  // 如果已选品种市场,仅展示对应子级下的
+  if (varietyMarket) {
+    const memo = varietyMarketDict.value.find(({ value }) => value === varietyMarket).memo;
+    return config.value.commonOption.options.filter(({ value }) => memo.includes(value));
+  }
+  // 如果未选品种市场,则展示全部
+  else {
+    return config.value.commonOption.options;
+  }
+});
+watch(
+  () => commonOptionDict.value,
+  (newValue) => {
+    // 如果常用选项已经进行了勾选, 则只保留常用选项中存在的值
+    if (searchData.value.commonOption.length) {
+      searchData.value.commonOption = searchData.value.commonOption.filter((id) => {
+        return newValue.find(({ value }) => value === id);
+      });
+    }
+  }
+);
+// 选项数据源: 自定标签
+const customTagDict = computed(() => {
+  return config.value.customTag.options;
 });
 
-const change = (key, value) => {
-  formData.value = {
-    ...formData.value,
-    [key]: value,
+// 函数: 不限
+const clearRow = (key) => {
+  if (["commonOption", "customTag", "factorScreen", "commonIndicator"].includes(key)) searchData.value[key] = [];
+  else searchData.value[key] = null;
+};
+// 函数: 将组件里面的参数格式化成后端接口所需的入参工具函数
+const formatData = (data) => {
+  const params = {};
+  // 1.品种市场
+  if (data.varietyMarket) {
+    params.exchangeId = String(data.varietyMarket);
   }
-  emit('change', key, value)
-}
+  // 2.常用选项
+  if (data.commonOption && data.commonOption.length) {
+    params.optionId = data.commonOption.join(",");
+  }
+  // 3.自定标签
+  if (data.customTag && data.customTag.length) {
+    params.tagIds = data.customTag;
+  }
+  // 4.因子筛选
+  if (data.factorScreen && data.factorScreen.length) {
+    params.tbFeatureFactorScores = data.factorScreen.map((item) => {
+      return {
+        freqId: item.cycle,
+        factorId: item.factor,
+        startScore: item.score[0],
+        endScore: item.score[1],
+      };
+    });
+  }
+  // =====================常用指标相关参数处理=====================
+  const QIQUANKYES = [
+    "expireDays",
+    "virtualRealDegree",
+    "yearProfitRate",
+    "impliedVolatility",
+    "levelMultiplier",
+    "turnover",
+    "volume",
+    "openInterest",
+    "optionsCpType",
+  ];
+  // 1.常用指标-基本面( 表中 type: undefined 的指标, [期权]的常用指标不计入基本面)
+  const query = data.commonIndicator.reduce((result, item) => {
+    const { key, type, range, unit } = item;
+    if (type === undefined && !QIQUANKYES.includes(key)) {
+      let [start, end] = range;
+      if (!["", null].includes(start)) {
+        switch (unit[0]) {
+          case "亿":
+            start = start * 100000000;
+            break;
+          case "千万":
+            start = start * 10000000;
+            break;
+          default:
+            start = start;
+            break;
+        }
+      }
+      if (!["", null].includes(end)) {
+        switch (unit[1]) {
+          case "亿":
+            end = end * 100000000;
+            break;
+          case "千万":
+            end = end * 10000000;
+            break;
+          default:
+            end = end;
+            break;
+        }
+      }
+      result.push({
+        column: item.key,
+        start,
+        end,
+      });
+    }
+    return result;
+  }, []);
+  if (query.length) {
+    params.query = query;
+  }
+  // 2.常用指标-是否ST
+  const stIndicator = data.commonIndicator.find(({ key }) => key === "st");
+  if (stIndicator) {
+    params.st = stIndicator.st;
+  }
+  // 3.常用指标-净利润
+  const netProfitQueryDto = data.commonIndicator.find(({ key }) => key === "tFeaturelncomes");
+  if (netProfitQueryDto) {
+    params.netProfitQueryDto = { ...netProfitQueryDto, netProfit: netProfitQueryDto.netProfit * 100000000.0 };
+  }
+  // 4.常用指标-期权相关参数
+  const searchOptionDto = {};
+  data.commonIndicator.forEach((item) => {
+    const { key } = item;
+    switch (key) {
+      // 过期时间
+      case "expireDays":
+        searchOptionDto.minExpireDays = item.range[0];
+        searchOptionDto.maxExpireDays = item.range[1];
+        break;
+      // 虚实度
+      case "virtualRealDegree":
+        searchOptionDto.minVirtualRealDegree = item.range[0] / 100;
+        searchOptionDto.maxVirtualRealDegree = item.range[1] / 100;
+        break;
+      // 年化收益率
+      case "yearProfitRate":
+        searchOptionDto.minYearProfitRate = item.range[0] / 100;
+        searchOptionDto.maxYearProfitRate = item.range[1] / 100;
+        break;
+      // 隐含波动率
+      case "impliedVolatility":
+        searchOptionDto.minImpliedVolatility = item.range[0] / 100;
+        searchOptionDto.maxImpliedVolatility = item.range[1] / 100;
+        break;
+      // 杠杆率
+      case "levelMultiplier":
+        searchOptionDto.minLevelMultiplier = item.range[0];
+        searchOptionDto.maxLevelMultiplier = item.range[1];
+        break;
+      // 成交额(期权)
+      case "turnover":
+        searchOptionDto.minTurnover = item.range[0] * 10000;
+        searchOptionDto.maxTurnover = item.range[1] * 10000;
+        break;
+      // 成交量
+      case "volume":
+        searchOptionDto.minVolume = item.range[0];
+        searchOptionDto.maxVolume = item.range[1];
+        break;
+      // 持仓量
+      case "openInterest":
+        searchOptionDto.minOpenInterest = item.range[0];
+        searchOptionDto.maxOpenInterest = item.range[1];
+        break;
+      // 认沽认购
+      case "optionsCpType":
+        searchOptionDto.optionsCpType = item.optionsCpType;
+        break;
+    }
+  });
+  if (Object.keys(searchOptionDto).length) {
+    params.searchOptionDto = searchOptionDto;
+  }
+  return params;
+};
+
+defineExpose({ formatData });
 </script>
 
+<template>
+  <div class="variety-search">
+    <!-- 品种市场 -->
+    <div v-if="config.varietyMarket?.show" class="variety-search-row">
+      <div class="title">
+        <span>品种市场: </span>
+        <span @click="clearRow('varietyMarket')">不限</span>
+      </div>
+      <el-radio-group v-model="searchData.varietyMarket" size="small">
+        <el-radio v-for="{ label, value } in varietyMarketDict" :label="value" :key="value">{{ label }}</el-radio>
+      </el-radio-group>
+    </div>
+    <!-- 常用选项 -->
+    <div v-if="config.commonOption?.show && commonOptionDict.length" class="variety-search-row">
+      <div class="title">
+        <span>常用选项: </span>
+        <span @click="clearRow('commonOption')">不限</span>
+      </div>
+      <el-checkbox-group v-model="searchData.commonOption" size="small">
+        <el-checkbox v-for="{ label, value } in commonOptionDict" :label="value" :key="value">{{ label }}</el-checkbox>
+      </el-checkbox-group>
+    </div>
+    <!-- 自定标签 -->
+    <div v-if="config.customTag?.show && customTagDict.length" class="variety-search-row">
+      <div class="title">
+        <span>自定标签: </span>
+        <span @click="clearRow('customTag')">不限</span>
+      </div>
+      <el-checkbox-group v-model="searchData.customTag" size="small">
+        <el-checkbox v-for="{ label, value } in customTagDict" :label="value" :key="value">{{ label }}</el-checkbox>
+      </el-checkbox-group>
+    </div>
+    <!-- 因子筛选 -->
+    <div v-if="config.factorScreen?.show" class="variety-search-row">
+      <div class="title">
+        <span>因子筛选: </span>
+        <span @click="clearRow('factorScreen')">不限</span>
+      </div>
+      <FactorScreen v-model:data="searchData.factorScreen" :config="config.factorScreen" />
+    </div>
+    <!-- 常用指标 -->
+    <CommonIndicator
+      v-model:data="searchData.commonIndicator"
+      :varietyMarket="searchData.varietyMarket"
+      :commonOption="searchData.commonOption"
+      :config="config.commonIndicator"
+    />
+  </div>
+</template>
+
 <style lang="scss" scoped>
-.st-VarietySearch {
-  &-item {
-    margin-bottom: 5px;
+.variety-search {
+  .variety-search-row {
+    display: flex;
+    .title {
+      height: 24px;
+      min-width: 100px;
+      font-size: 12px;
+      line-height: 24px;
+      display: flex;
+      align-items: center;
+      span:nth-child(1) {
+        width: 60px;
+      }
+      span:nth-child(2) {
+        cursor: pointer;
+        color: var(--el-color-primary);
+      }
+    }
+    .el-radio {
+      margin-right: 20px;
+    }
+    .el-checkbox {
+      min-width: 80px;
+      margin-right: 20px;
+    }
   }
 }
 </style>

package/src/pages/VarietySearch/index.vue

@@ -1,69 +1,56 @@
 <template>
-  <div style="width: 100%; height: 100%;">
-    <st-varietySearch
-      v-model="searchParams"
-      :config="searchConfig"
-      @change="changeVarietySearch"
-    />
+  <div style="width: 100%; height: 100%">
+    <st-varietySearch ref="varietySearchRef" v-model:searchData="varietySearchData" :config="varietySearchConfig" />
   </div>
 </template>
 
 <script setup>
 import { ref, watch, reactive } from "vue";
 
-const searchParams = ref({
-  exchangeId: [],
-  optionId: [],
-  factorscores: [],
-  queryList: [],
+const varietySearchRef = ref(null);
+const varietySearchData = ref({
+  varietyMarket: null, // 品种市场[单选]
+  commonOption: [], // 常用选项[多选]
+  customTag: [], // 自定标签[多选]
+  factorScreen: [], // 因子筛选
+  commonIndicator: [], // 常用指标
 });
-const searchConfig = reactive({
-  exchangeId: {
-    label: '品种市场',
-    type: 'checkbox',
-    options: [
-      { label: 'A股', value: '0' },
-      { label: 'ETF', value: '1' },
-      { label: '期货', value: '2' },
-    ]
+const varietySearchConfig = ref({
+  // 品种市场
+  varietyMarket: {
+    show: true,
+  },
+  // 常用选项
+  commonOption: {
+    show: true,
   },
-  optionId: {
-    label: '常用选项',
-    type: 'checkbox',
+  // 自定标签
+  customTag: {
+    show: true,
     options: [
-      { label: '常用选项1', value: '0' },
-      { label: '常用选项2', value: '1' },
-      { label: '常用选项3', value: '2' },
-    ]
+      { label: "自定标签一", value: 1 },
+      { label: "自定标签二", value: 2 },
+    ],
   },
-  factorscores: {
-    label: '因子筛选',
-    type: 'factorFilter',
-    freqList: [
-      { label: '周期1', value: '0' },
-      { label: '周期2', value: '1' },
-      { label: '周期3', value: '2' },
+  // 因子筛选
+  factorScreen: {
+    show: true,
+    // cycleDefault: 1,
+    cycleOptions: [
+      { label: "周期一", value: 1 },
+      { label: "周期二", value: 2 },
+    ],
+    // cycleShow: true,
+    factorOptions: [
+      { label: "因子一", value: 1 },
+      { label: "因子二", 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
-  }
-}
+  // 常用指标
+  commonIndicator: {
+    show: true,
+  },
+});
 </script>
 
 <style lang="scss" scoped></style>

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

@@ -1,77 +0,0 @@
-<template>
-  <div class="st-VarietySearch-checkBox">
-    <div class="st-VarietySearch-checkBox-label">
-      {{ config.label }}：
-      <el-button
-        text
-        size="small"
-        type="primary"
-        @click="checkList = []"
-      >
-        不限
-      </el-button>
-    </div>
-    <div class="st-VarietySearch-checkBox-content">
-      <el-checkbox-group
-        size="small"
-        v-model="checkList"
-      >
-        <el-checkbox
-          v-for="item in config.options"
-          :key="item.value"
-          :label="item.value"
-        >
-          {{ item.label }}
-        </el-checkbox>
-      </el-checkbox-group>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, watch } from 'vue'
-
-const emit = defineEmits(['change']);
-const props = defineProps({
-  config: {
-    type: Object,
-    require: true,
-    default: () => ({}),
-  },
-  formData: {
-    type: Object,
-    require: true,
-  },
-})
-
-const checkList = ref([])
-
-watch(() => props.formData, () => {
-  checkList.value = props.formData[props.config.key] || []
-}, { deep: true })
-
-watch(checkList, () => {
-  emit('change', props.config.key, checkList.value)
-})
-</script>
-
-<style lang="scss" scoped>
-.st-VarietySearch-checkBox {
-  &-label {
-    display: inline-block;
-    vertical-align: top;
-    width: 120px;
-    height: 24px;
-    line-height: 22px;
-    font-size: 12px;
-    &-clear {
-      color: #409eff;
-    }
-  }
-  &-content {
-    vertical-align: top;
-    width: calc(100% - 120px);
-    display: inline-block;
-  }
-}
-</style>