st-comp 0.0.209 → 0.0.210

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "st-comp",
   "public": true,
-  "version": "0.0.209",
+  "version": "0.0.210",
   "type": "module",
   "scripts": {
     "dev": "vite",

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

@@ -1,6 +1,6 @@
 <!-- 常用指标组件 -->
 <script setup name="CommonIndicator">
-import { ref, watch, computed } from "vue";
+import { ref, watch, computed, inject } from "vue";
 
 const perVolumnRadioOptions = [
   { label: "近2周", value: "1" },
@@ -16,6 +16,7 @@ const auditOpinionTypeRadioOptions = [
   { label: "无法表示意见", value: 4 },
 ];
 
+const clearRow = inject("clearRow");
 const data = defineModel("data", { default: [] });
 const props = defineProps({
   config: { type: Object, default: () => {} },
@@ -369,7 +370,7 @@ const changeMainFlowRadioType = () => {
     <div class="indicator">
       <div class="title">
         <span>常用指标: </span>
-        <span>不限</span>
+        <span @click="clearRow('commonIndicator')">不限</span>
       </div>
       <div class="options">
         <span
@@ -381,7 +382,7 @@ const changeMainFlowRadioType = () => {
         </span>
       </div>
     </div>
-    <!-- 指标Tag -->
+    <!-- TagList: 已选指标 -->
     <div class="tags">
       <el-tag
         v-for="(item, index) in data"
@@ -397,8 +398,7 @@ const changeMainFlowRadioType = () => {
         >
       </el-tag>
     </div>
-
-    <!-- 指标弹窗 -->
+    <!-- TagInfo: 指标具体弹窗 -->
     <el-dialog
       v-model="visible"
       :title="nowIndicator.label"
@@ -716,7 +716,6 @@ const changeMainFlowRadioType = () => {
 .common-indicator {
   .indicator {
     display: flex;
-    align-items: start;
     .title {
       height: 24px;
       min-width: 100px;
@@ -733,13 +732,15 @@ const changeMainFlowRadioType = () => {
       }
     }
     .options {
+      display: flex;
+      flex-wrap: wrap;
       span {
         font-size: 12px;
+        height: 24;
         line-height: 24px;
         color: var(--el-text-color-regular);
-        padding: 4px 0;
-        margin-right: 20px;
         cursor: pointer;
+        margin-right: 16px;
         &:hover {
           color: var(--el-color-primary);
         }

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

@@ -0,0 +1,243 @@
+<script setup>
+import { Close, Plus } from "@element-plus/icons-vue";
+import { ref, watch, computed, inject } from "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);
+const compositeOrderForm = ref({ name: null, value: "desc" });
+
+// 组合排序数据源 [受到: 品种市场, 常用选项影响]
+const compositeOrderOptions = computed(() => {
+  let result = [];
+  // 如果品种市场和常用选项一个都没有选, 那么就展示全部的常用指标
+  if (props.varietyMarket === null && !props.commonOption.length) {
+    result = props.config.options;
+  } else {
+    result = props.config.options;
+    // 1. 如果选择了品种市场, 进行一波筛选
+    if (props.varietyMarket) {
+      result = result.filter(({ parent }) => parent.varietyMarketIds.includes(props.varietyMarket));
+    }
+    // 2. 如果选择了常用选项, 进行一波筛选
+    if (props.commonOption.length) {
+      result = result.filter(({ parent }) => {
+        const { commonOptionIds } = parent;
+        // 只要选择了的常用选项里面, 有commonOptionIds中的值, 那么就展示, 即判断两个数组是否有重复元素
+        return [...new Set([...commonOptionIds, ...props.commonOption])].length !== [...commonOptionIds, ...props.commonOption].length;
+      });
+    }
+  }
+  return result;
+});
+// 条件: 新增, 编辑, 窗口确认, 删除
+const handleAction = (action, index) => {
+  switch (action) {
+    // 新增
+    case "add": {
+      compositeOrderForm.value = { name: null, value: "desc" };
+      visible.value = true;
+      break;
+    }
+    // 编辑
+    case "edit": {
+      const item = data.value[index];
+      compositeOrderForm.value = { ...item };
+      visible.value = true;
+      break;
+    }
+    // 窗口确认
+    case "submit": {
+      if (!compositeOrderForm.value.name) return ElMessage.warning("请选择需要排序的条件");
+      const { label } = compositeOrderOptions.value.find((item) => item.key === compositeOrderForm.value.name);
+      const tagText = `${label}-${compositeOrderForm.value.value === "asc" ? "正序↑" : "降序↓"}`;
+      // 判断data中是否已存在同字段条件, 是则替换, 否则push
+      const keyIndex = data.value.findIndex(({ name }) => name === compositeOrderForm.value.name);
+      if (keyIndex === -1) {
+        data.value.push({ ...compositeOrderForm.value, tagText });
+      } else {
+        data.value.splice(keyIndex, 1, { ...compositeOrderForm.value, tagText });
+      }
+      visible.value = false;
+      break;
+    }
+    // 删除
+    case "delete": {
+      data.value.splice(index, 1);
+      break;
+    }
+  }
+};
+
+// 监视排序数据源变动, 已勾选且新的数据源中也有它,则要进行勾选保留
+watch(
+  () => compositeOrderOptions.value,
+  () => {
+    if (data.value.length) {
+      data.value = data.value.filter(({ name }) => {
+        return compositeOrderOptions.value.find((item) => item.key === name);
+      });
+    }
+  }
+);
+</script>
+
+<template>
+  <div
+    class="composite-order"
+    v-if="config.show && compositeOrderOptions.length"
+  >
+    <div class="title">
+      <span>组合排序: </span>
+      <span @click="clearRow('compositeOrder')">不限</span>
+    </div>
+    <div class="tag-box">
+      <el-tag
+        v-for="(item, index) in data"
+        closable
+        type="info"
+        @close="handleAction('delete', index)"
+      >
+        <span>{{ item.tagText }}</span>
+        <span
+          class="edit"
+          @click="handleAction('edit', index)"
+          >编辑</span
+        >
+      </el-tag>
+      <el-button
+        type="primary"
+        plain
+        size="small"
+        :icon="Plus"
+        @click="handleAction('add')"
+      >
+        添加排序
+      </el-button>
+    </div>
+    <el-dialog
+      modal-class="order-dialog"
+      v-model="visible"
+      width="400"
+      align-center
+      destroy-on-close
+      draggable
+      overflow
+      :modal="false"
+      :modal-penetrable="true"
+      :show-close="false"
+    >
+      <template #header="{ titleId, titleClass }">
+        <div class="custom-header">
+          <div class="left">
+            <span
+              :id="titleId"
+              :class="titleClass"
+            >
+              添加条件
+            </span>
+          </div>
+          <div class="right">
+            <el-icon @click="visible = false"><Close /></el-icon>
+          </div>
+        </div>
+      </template>
+      <el-form
+        ref="compositeOrderFormRef"
+        :model="compositeOrderForm"
+      >
+        <el-form-item label="添加条件: ">
+          <el-select
+            v-model="compositeOrderForm.name"
+            filterable
+            placeholder="请选择"
+            no-match-text="未匹配到相关条件"
+          >
+            <el-option
+              v-for="{ label, key } in compositeOrderOptions"
+              :label="label"
+              :value="key"
+              :key="key"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="排序方式: ">
+          <el-radio-group v-model="compositeOrderForm.value">
+            <el-radio
+              label="正序"
+              value="asc"
+            />
+            <el-radio
+              label="倒序"
+              value="desc"
+            />
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="visible = false">取消</el-button>
+          <el-button
+            type="primary"
+            @click="handleAction('submit')"
+          >
+            确定
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.composite-order {
+  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);
+    }
+  }
+  .tag-box {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    .edit {
+      cursor: pointer;
+      color: var(--el-color-primary);
+      margin-left: 6px;
+    }
+  }
+  .order-dialog {
+    .custom-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .left,
+      .right {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+      }
+      .el-icon {
+        cursor: pointer;
+      }
+    }
+  }
+}
+</style>

package/packages/VarietySearch/config.js

@@ -1,6 +1,6 @@
 // 品种池搜索组件的默认配置项
-export default {
-  // 品种市场 [选项: 预警字典1000]
+const config = {
+  // 品种市场 [选项: 接口]
   varietyMarket: {
     show: true,
     options: [
@@ -13,7 +13,7 @@ export default {
       // { label: "期权", value: 8, memo: [11] },
     ],
   },
-  // 常用选项 [选项: 预警字典1003]
+  // 常用选项 [选项: 接口]
   commonOption: {
     show: true,
     options: [
@@ -33,7 +33,7 @@ export default {
       // { label: "概念板块指数", value: 15 },
     ],
   },
-  // 上市板块 [选项: 预警字典1030]
+  // 上市板块 [选项: 接口]
   marketIds: {
     show: true,
     options: [
@@ -47,7 +47,7 @@ export default {
       // { label: "深港通", value: 8192, varietyMarketIds: "5" },
     ],
   },
-  // 自定标签 [选项: 接口获取]
+  // 自定标签 [选项: 接口]
   customTag: {
     show: true,
     options: [],
@@ -64,7 +64,7 @@ export default {
       { label: "中证1000", value: "ZZ1000CFJC" },
     ],
   },
-  // 因子筛选 [选项: 接口获取]
+  // 因子筛选 [选项: 接口]
   factorScreen: {
     show: true,
     // SQL功能是否展示
@@ -77,7 +77,7 @@ export default {
     factorOptions: [], // 因子下拉框数据源
     factorDescriptions: [], // 因子使用说明数据源
   },
-  // 常用指标 [选项: 组件默认]
+  // 常用指标 [选项: 前端默认]
   commonIndicator: {
     show: true,
     options: [
@@ -615,3 +615,12 @@ export default {
     ],
   },
 };
+
+export default {
+  ...config,
+  // 组合排序 [选项: 前端默认] 本质就是给常用指标排序用的, 用的就是常用指标的数据源
+  compositeOrder: {
+    show: true,
+    options: config.commonIndicator.options,
+  },
+};