st-comp 0.0.277 → 0.0.279

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

@@ -1,697 +0,0 @@
-<!-- 常用指标组件 -->
-<script setup name="CommonIndicator">
-import { ref, watch, computed, inject } from "vue";
-import { PER_VOLUMN_RADIO_OPTIONS, AUDIT_OPINION_TYPE_RADIO_OPTIONS, hasIntersection, indicatorToGetDefaultValue, indicatorToValidateAndFormatTagText } from "./tools";
-import IndicatorTags from "./IndicatorTags.vue";
-
-const clearRow = inject("clearRow");
-const data = defineModel("data", { default: [] });
-const props = defineProps({
-  config: { type: Object, default: () => {} }, // 常用指标配置
-  varietyMarket: { type: null || Number, default: () => null },
-  commonOption: { type: Array, default: () => [] },
-});
-
-// 指标窗口开关
-const visible = ref(false);
-
-// 当前已选指标中，第一个开启排名模式的 key（用于互斥：同一时间只能有一个指标使用排名）
-const rankKey = computed(() => {
-  return data.value.find((i) => i.radioType === "1")?.key;
-});
-
-// 指标项数据源
-const indicatorOptions = computed(() => {
-  let result = props.config.options;
-  // 如果外部有选品种市场条件, 进行过滤
-  if (props.varietyMarket !== null && props.varietyMarket !== undefined) {
-    result = result.filter(({ parent }) => parent.varietyMarketIds.includes(props.varietyMarket));
-  }
-  // 如果外部有选常用选项条件, 进行过滤
-  if (props.commonOption.length > 0) {
-    result = result.filter(({ parent }) => hasIntersection(parent.commonOptionIds, props.commonOption));
-  }
-  return result;
-});
-
-// 当前选中的指标
-const currentIndicatorConfig = ref({});
-const currentIndicatorForm = ref({});
-
-// 指标: 点击
-const clickIndicator = (item) => {
-  currentIndicatorConfig.value = item;
-  // 赋予指标对应的默认值
-  currentIndicatorForm.value = indicatorToGetDefaultValue(item, rankKey.value);
-  visible.value = true;
-};
-
-// 指标: 窗口确认
-const submitDialog = () => {
-  // 校验指标内是否填写完整, 并且生成tagText
-  const { valid, message, tagText } = indicatorToValidateAndFormatTagText(currentIndicatorForm.value);
-  if (!valid) return ElMessage.warning(message);
-  currentIndicatorForm.value.tagText = tagText;
-
-  // 按 key 去重：不存在则新增，存在则替换
-  const keyIndex = data.value.findIndex(({ key }) => key === currentIndicatorForm.value.key);
-  if (keyIndex === -1) {
-    data.value.push(currentIndicatorForm.value);
-  } else {
-    data.value.splice(keyIndex, 1, currentIndicatorForm.value);
-  }
-  visible.value = false;
-};
-
-// 指标Tag: 编辑
-const editTag = (item) => {
-  currentIndicatorConfig.value = indicatorOptions.value.find(({ key }) => key === item.key);
-  currentIndicatorForm.value = JSON.parse(JSON.stringify(item));
-  visible.value = true;
-};
-
-// 指标Tag: 删除
-const deleteTag = (index) => {
-  data.value.splice(index, 1);
-};
-
-// 快捷项: 通用
-const clickConvenientOption = (item) => {
-  currentIndicatorForm.value.range = [...item.range];
-  currentIndicatorForm.value.unit = [...item.unit];
-};
-
-// 快捷项: 净利润
-const clicktFeaturelncomesOption = (value) => {
-  switch (value) {
-    case "≤0":
-      Object.assign(currentIndicatorForm.value, {
-        rule: 2, // 1超 2跌
-        withFewYears: 1,
-        yearsCount: 1,
-        netProfit: 0,
-      });
-      break;
-    case "≥0":
-      Object.assign(currentIndicatorForm.value, {
-        rule: 1,
-        withFewYears: 1,
-        yearsCount: 1,
-        netProfit: 0,
-      });
-      break;
-    case "五年内有四年以上盈利超过5千万":
-      Object.assign(currentIndicatorForm.value, {
-        rule: 1,
-        withFewYears: 5,
-        yearsCount: 4,
-        netProfit: 0.5,
-      });
-      break;
-    case "≥10亿":
-      Object.assign(currentIndicatorForm.value, {
-        rule: 1,
-        withFewYears: 1,
-        yearsCount: 1,
-        netProfit: 10,
-      });
-      break;
-    case "≥20亿":
-      Object.assign(currentIndicatorForm.value, {
-        rule: 1,
-        withFewYears: 1,
-        yearsCount: 1,
-        netProfit: 20,
-      });
-      break;
-  }
-};
-
-// 模式切换时清空已填数据
-const handleRadioTypeChange = () => {
-  const { key } = currentIndicatorConfig.value;
-  const form = currentIndicatorForm.value;
-
-  // 根据指标 key 清空对应的字段
-  if (key === "mainFlow") {
-    form.radio = null;
-    form.rankRange = [null, null];
-  } else if (key === "perVolumn") {
-    const newRadioType = form.radioType;
-    // 切换到数值模式：清空分位相关字段
-    if (newRadioType === "0") {
-      form.radio = null;
-      form.levels = [];
-    }
-    // 切换到分位模式：清空数值相关字段
-    if (newRadioType === "2") {
-      form.range = [null, null];
-    }
-  }
-  // 其他支持排名的指标（成交额、成交量(期权)、持仓量等）不需要清空额外字段
-  // 因为它们的非排名模式和排名模式共用 range/rankRange，切换时数据保留
-};
-
-// 监视: 常用指标数据源 => 已勾选且新的数据源中也有它,则要进行勾选保留
-watch(
-  () => indicatorOptions.value,
-  () => {
-    if (data.value.length) {
-      data.value = data.value.filter(({ key }) => {
-        return indicatorOptions.value.find((item) => item.key === key);
-      });
-    }
-  },
-);
-</script>
-
-<template>
-  <div
-    class="common-indicator"
-    v-if="config.show && indicatorOptions.length"
-  >
-    <!-- 指标: 选项 -->
-    <div class="indicator">
-      <div class="title">
-        <span>常用指标: </span>
-        <span @click="clearRow('commonIndicator')">不限</span>
-      </div>
-      <div class="options">
-        <span
-          v-for="item in indicatorOptions"
-          :key="item.key"
-          @click="clickIndicator(item)"
-        >
-          {{ item.label }}
-        </span>
-      </div>
-    </div>
-
-    <!-- 指标: 弹窗 -->
-    <el-dialog
-      v-model="visible"
-      :title="currentIndicatorConfig.label"
-      width="600"
-      align-center
-      destroy-on-close
-    >
-      <template #header>
-        <span style="font-size: 18px">{{ currentIndicatorConfig.label }}</span>
-        <el-radio-group
-          v-if="currentIndicatorConfig.radioTypeOptions?.length"
-          v-model="currentIndicatorForm.radioType"
-          style="vertical-align: 4px; margin-left: 12px"
-          @change="handleRadioTypeChange"
-        >
-          <el-radio-button
-            v-for="option in currentIndicatorConfig.radioTypeOptions"
-            :key="option.value"
-            :value="option.value"
-            :disabled="option.value === '1' && rankKey && rankKey !== currentIndicatorConfig.key"
-          >
-            {{ option.label }}
-          </el-radio-button>
-        </el-radio-group>
-      </template>
-
-      <!-- 通用的指标表单 -->
-      <template v-if="!currentIndicatorConfig.type">
-        <!-- 排名模式 -->
-        <div
-          v-if="currentIndicatorForm.radioType === '1'"
-          class="out-box"
-        >
-          <span>自定义: </span>
-          <el-input
-            v-model="currentIndicatorForm.rankRange[0]"
-            style="flex: 1"
-          />
-          ~
-          <el-input
-            v-model="currentIndicatorForm.rankRange[1]"
-            style="flex: 1"
-          />
-        </div>
-
-        <!-- 数值模式 -->
-        <div v-else>
-          <!-- 便捷配置项区域 -->
-          <div
-            class="convenient-option-box"
-            v-if="currentIndicatorConfig.convenientOptions?.length"
-          >
-            <el-button
-              v-for="item in currentIndicatorConfig.convenientOptions"
-              :key="item.text"
-              @click="clickConvenientOption(item)"
-              >{{ item.text }}</el-button
-            >
-          </div>
-          <!-- 输入框区域 -->
-          <div class="out-box">
-            <span>自定义: </span>
-            <el-input
-              v-model="currentIndicatorForm.range[0]"
-              style="flex: 1"
-            >
-              <!-- 单位 -->
-              <template
-                #append
-                v-if="currentIndicatorConfig.unitOptions.length"
-              >
-                <span v-if="currentIndicatorConfig.unitOptions.length === 1">{{ currentIndicatorForm.unit[0] }}</span>
-                <el-select
-                  v-else
-                  v-model="currentIndicatorForm.unit[0]"
-                  style="width: 72px"
-                >
-                  <el-option
-                    v-for="unit in currentIndicatorConfig.unitOptions"
-                    :label="unit"
-                    :value="unit"
-                  />
-                </el-select>
-              </template>
-            </el-input>
-            ~
-            <el-input
-              v-model="currentIndicatorForm.range[1]"
-              style="flex: 1"
-            >
-              <!-- 单位 -->
-              <template
-                #append
-                v-if="currentIndicatorConfig.unitOptions.length"
-              >
-                <span v-if="currentIndicatorConfig.unitOptions.length === 1">{{ currentIndicatorForm.unit[1] }}</span>
-                <el-select
-                  v-else
-                  v-model="currentIndicatorForm.unit[1]"
-                  style="width: 72px"
-                >
-                  <el-option
-                    v-for="unit in currentIndicatorConfig.unitOptions"
-                    :label="unit"
-                    :value="unit"
-                  />
-                </el-select>
-              </template>
-            </el-input>
-          </div>
-        </div>
-      </template>
-
-      <!-- type: custom 根据不同key进行自定义 -->
-      <template v-else>
-        <!-- 是否ST -->
-        <div v-if="currentIndicatorConfig.key === 'st'">
-          <el-radio-group v-model="currentIndicatorForm.st">
-            <el-radio
-              label="是"
-              :value="1"
-            />
-            <el-radio
-              label="否"
-              :value="0"
-            />
-          </el-radio-group>
-        </div>
-
-        <!-- 净利润 -->
-        <div v-if="currentIndicatorConfig.key === 'tFeaturelncomes'">
-          <!-- 便捷配置项区域 -->
-          <div class="tFeaturelncomes-option-box">
-            <el-button @click="clicktFeaturelncomesOption('≤0')">≤0</el-button>
-            <el-button @click="clicktFeaturelncomesOption('≥0')">≥0</el-button>
-            <el-button @click="clicktFeaturelncomesOption('五年内有四年以上盈利超过5千万')">五年内有四年以上盈利超过5千万</el-button>
-            <el-button @click="clicktFeaturelncomesOption('≥10亿')">≥10亿</el-button>
-            <el-button @click="clicktFeaturelncomesOption('≥20亿')">≥20亿</el-button>
-          </div>
-          <!-- 输入框区域 -->
-          <div class="tFeaturelncomes-out-box">
-            <span>自定义: </span>
-            <div>
-              <el-input-number
-                v-model="currentIndicatorForm.withFewYears"
-                controls-position="right"
-              />
-              年内
-              <el-input-number
-                v-model="currentIndicatorForm.yearsCount"
-                controls-position="right"
-              />
-              年以上盈利{{ currentIndicatorForm.rule === 1 ? "超" : "跌" }}过
-              <el-input-number
-                v-model="currentIndicatorForm.netProfit"
-                controls-position="right"
-              />
-              亿
-            </div>
-          </div>
-        </div>
-
-        <!-- 股价分位 -->
-        <div v-if="currentIndicatorConfig.key === 'priceLevels'">
-          <el-select
-            v-model="currentIndicatorForm.priceLevels"
-            multiple
-            clearable
-            placeholder="请选择"
-            style="width: 100%"
-          >
-            <el-option
-              v-for="item in [1, 2, 3, 4, 5]"
-              :key="item"
-              :label="`${item}分位`"
-              :value="item"
-            />
-          </el-select>
-        </div>
-
-        <!-- 市盈率分位 -->
-        <div v-if="currentIndicatorConfig.key === 'peTtmLevels'">
-          <el-select
-            v-model="currentIndicatorForm.peTtmLevels"
-            multiple
-            clearable
-            placeholder="请选择"
-            style="width: 100%"
-          >
-            <el-option
-              v-for="item in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
-              :key="item"
-              :label="`${item}分位`"
-              :value="item"
-            />
-          </el-select>
-        </div>
-
-        <!-- 市盈率估值走势分位 -->
-        <div v-if="currentIndicatorConfig.key === 'peTrendTtmLevels'">
-          <el-select
-            v-model="currentIndicatorForm.peTrendTtmLevels"
-            multiple
-            clearable
-            placeholder="请选择"
-            style="width: 100%"
-          >
-            <el-option
-              v-for="item in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
-              :key="item"
-              :label="`${item}分位`"
-              :value="item"
-            />
-          </el-select>
-        </div>
-
-        <!-- 认沽认购 -->
-        <div v-if="currentIndicatorConfig.key === 'optionsCpType'">
-          <el-radio-group v-model="currentIndicatorForm.optionsCpType">
-            <el-radio
-              label="看涨"
-              :value="1"
-            />
-            <el-radio
-              label="看跌"
-              :value="2"
-            />
-          </el-radio-group>
-        </div>
-
-        <!-- 成交量 -->
-        <div v-if="currentIndicatorConfig.key === 'perVolumn'">
-          <!-- 数值模式 -->
-          <div
-            v-if="currentIndicatorForm.radioType === '0'"
-            class="out-box"
-          >
-            <span>自定义: </span>
-            <el-input
-              v-model="currentIndicatorForm.range[0]"
-              style="flex: 1"
-            >
-              <!-- 单位 -->
-              <template
-                #append
-                v-if="currentIndicatorConfig.unitOptions.length"
-              >
-                <span v-if="currentIndicatorConfig.unitOptions.length === 1">{{ currentIndicatorForm.unit[0] }}</span>
-                <el-select
-                  v-else
-                  v-model="currentIndicatorForm.unit[0]"
-                  style="width: 72px"
-                >
-                  <el-option
-                    v-for="unit in currentIndicatorConfig.unitOptions"
-                    :label="unit"
-                    :value="unit"
-                  />
-                </el-select>
-              </template>
-            </el-input>
-            ~
-            <el-input
-              v-model="currentIndicatorForm.range[1]"
-              style="flex: 1"
-            >
-              <!-- 单位 -->
-              <template
-                #append
-                v-if="currentIndicatorConfig.unitOptions.length"
-              >
-                <span v-if="currentIndicatorConfig.unitOptions.length === 1">{{ currentIndicatorForm.unit[1] }}</span>
-                <el-select
-                  v-else
-                  v-model="currentIndicatorForm.unit[1]"
-                  style="width: 72px"
-                >
-                  <el-option
-                    v-for="unit in currentIndicatorConfig.unitOptions"
-                    :label="unit"
-                    :value="unit"
-                  />
-                </el-select>
-              </template>
-            </el-input>
-          </div>
-
-          <!-- 分位模式 -->
-          <div
-            v-if="currentIndicatorForm.radioType === '2'"
-            class="perVolumn-group"
-          >
-            <el-radio-group v-model="currentIndicatorForm.radio">
-              <el-radio
-                v-for="item in PER_VOLUMN_RADIO_OPTIONS"
-                :key="item.value"
-                :value="item.value"
-              >
-                {{ item.label }}
-              </el-radio>
-            </el-radio-group>
-            <el-select
-              v-model="currentIndicatorForm.levels"
-              multiple
-              clearable
-              placeholder="请选择分位"
-            >
-              <el-option
-                v-for="item in [1, 2, 3, 4, 5]"
-                :key="item"
-                :label="`${item}分位`"
-                :value="item"
-              />
-            </el-select>
-          </div>
-        </div>
-
-        <!-- 主力净流入资金 -->
-        <div v-if="currentIndicatorConfig.key === 'mainFlow'">
-          <el-radio-group v-model="currentIndicatorForm.radio">
-            <el-radio value="3">3日</el-radio>
-            <el-radio value="5">5日</el-radio>
-            <el-radio value="10">10日</el-radio>
-            <el-radio value="20">20日</el-radio>
-          </el-radio-group>
-          <div
-            class="out-box"
-            style="margin-top: 12px"
-          >
-            <span>{{ currentIndicatorForm.radioType === "0" ? "涨幅范围" : "排名范围" }}:&nbsp;</span>
-            <el-input
-              v-model="currentIndicatorForm.rankRange[0]"
-              style="flex: 1"
-            />
-            ~
-            <el-input
-              v-model="currentIndicatorForm.rankRange[1]"
-              style="flex: 1"
-            />
-          </div>
-        </div>
-
-        <!-- 年报审计意见 -->
-        <div v-if="currentIndicatorConfig.key === 'auditOpinionType'">
-          <el-radio-group v-model="currentIndicatorForm.enumType">
-            <el-radio
-              v-for="(item, index) in AUDIT_OPINION_TYPE_RADIO_OPTIONS"
-              :key="index"
-              :label="item.label"
-              :value="item.value"
-            />
-          </el-radio-group>
-        </div>
-      </template>
-
-      <!-- 确定 -->
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button
-            type="primary"
-            @click="submitDialog"
-            >确定</el-button
-          >
-        </div>
-      </template>
-    </el-dialog>
-
-    <!-- 已选指标 -->
-    <IndicatorTags
-      :tags="data"
-      @edit="editTag"
-      @delete="deleteTag"
-    />
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.common-indicator {
-  .indicator {
-    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);
-      }
-    }
-    .options {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 2px 6px;
-      span {
-        font-size: 12px;
-        line-height: 24px;
-        padding: 0 6px;
-        border-radius: 2px;
-        color: var(--el-text-color-regular);
-        cursor: pointer;
-        transition: background 0.15s;
-        &:hover {
-          color: var(--el-color-primary);
-          background: var(--el-color-primary-light-9);
-        }
-      }
-    }
-  }
-
-  :deep(.el-button.is-text) {
-    span {
-      line-height: 24px;
-      color: var(--el-text-color-regular);
-    }
-  }
-
-  // 便捷选项
-  .convenient-option-box {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 8px;
-    padding-bottom: 12px;
-    margin-bottom: 12px;
-    border-bottom: 1px solid var(--el-border-color-lighter);
-    .el-button {
-      margin: 0;
-    }
-  }
-
-  // 输入框组
-  .out-box {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    span {
-      flex-shrink: 0;
-      white-space: nowrap;
-    }
-    .el-input {
-      flex: 1;
-      min-width: 0;
-    }
-  }
-
-  // 净利润快捷选项
-  .tFeaturelncomes-option-box {
-    display: grid;
-    grid-template-columns: 1fr 1fr 2fr;
-    gap: 8px;
-    padding-bottom: 12px;
-    margin-bottom: 12px;
-    border-bottom: 1px solid var(--el-border-color-lighter);
-    .el-button {
-      margin: 0;
-    }
-  }
-
-  // 净利润输入框组
-  .tFeaturelncomes-out-box {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    span {
-      flex-shrink: 0;
-    }
-    .el-input-number {
-      width: 100px;
-    }
-    > div {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      flex-wrap: wrap;
-    }
-  }
-
-  // 成交量 - 分位模式
-  .perVolumn-group {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: 12px;
-
-    .el-radio-group {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 6px 14px;
-    }
-
-    .el-select {
-      width: 100%;
-    }
-  }
-
-  // 弹窗内下拉框占满宽度
-  :deep(.el-dialog) {
-    .el-select {
-      width: 100%;
-    }
-  }
-}
-</style>