st-comp 0.0.209 → 0.0.211

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "st-comp",
   "public": true,
-  "version": "0.0.209",
+  "version": "0.0.211",
   "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/components/FactorScreen/index.vue

@@ -1,11 +1,13 @@
 <!-- 因子筛选组件 -->
 <script setup name="FactorScreen">
-import { nextTick, ref, watch } from "vue";
-import { Close, Plus, CircleCloseFilled, InfoFilled } from "@element-plus/icons-vue";
+import { nextTick, ref, watch, inject, reactive } from "vue";
+import { Close, Plus, CircleCloseFilled, InfoFilled, Document } from "@element-plus/icons-vue";
 import { handleVerifyScore, extractConditionDetails, extractVariables } from "./tools.js";
 import FactorDescription from "./FactorDescription.vue";
 import MonacoEditor from "../../../MonacoEditor/index.vue";
 
+const { request } = inject("stConfig"); // 组件库全局配置
+
 const props = defineProps({
   config: {
     type: Object,
@@ -29,10 +31,20 @@ const data = defineModel("data", {
 
 const monacoEditorRef = ref();
 const stVarSelectDialogRef = ref();
+
 // 弹窗开关
 const visible = ref(false);
 const visibleDescriptions = ref(false);
 const factorType = ref("脚本");
+const scriptTestLoading = ref(false);
+const scriptCopyLoading = ref(false);
+const scriptTestLogVisible = ref(false);
+const scriptTestResult = reactive({
+  result: null,
+  detail: "",
+  code: "",
+});
+
 // 弹窗表单
 const dialogFormRef = ref(null);
 const dialogForm = ref({
@@ -227,7 +239,7 @@ const handleDeleteTag = (aciton, index) => {
 const open = () => {
   stVarSelectDialogRef.value.open(monacoEditorRef.value);
 };
-// 插入自定义函数
+// 脚本: 插入自定义函数
 const handleInsertCustomFunction = (funcName, funcExpression) => {
   if (!monacoEditorRef.value) return ElMessage.error("未检测到编辑器实例");
   // 生成基础插入内容 (如果内含${}, 需提取出来, 作为变量)
@@ -288,6 +300,54 @@ const handleInsertCustomFunction = (funcName, funcExpression) => {
     editorIns.focus();
   }
 };
+// 脚本: 复制
+const handleScriptCopy = async () => {
+  try {
+    scriptCopyLoading.value = true;
+    const script = monacoEditorRef.value.getValue();
+    if (!script) return ElMessage.error("请输入脚本语句");
+    const { body } = await request.post("/common/qt/getFuncExpr", { factorSelectExpr: script });
+    if (!body) return ElMessage.error("脚本解析失败, 请检查脚本内容是否填写完整或者联系管理员");
+    // 复制内容到粘贴板
+    let txa = document.createElement("textarea");
+    txa.value = body;
+    document.body.appendChild(txa);
+    txa.select();
+    document.execCommand("copy");
+    document.body.removeChild(txa);
+    ElMessage.success("脚本内容已经成功复制到粘贴板");
+  } finally {
+    scriptCopyLoading.value = false;
+  }
+};
+// 脚本: 测试
+const handleScriptTest = async () => {
+  try {
+    scriptTestLoading.value = true;
+    const script = monacoEditorRef.value.getValue();
+    if (!script) return ElMessage.error("请输入脚本语句");
+    const { body } = await request.post("/common/qt/getFuncExpr", { factorSelectExpr: script });
+    if (!body) return ElMessage.error("脚本解析失败, 请检查脚本内容是否填写完整或者联系管理员");
+    const testRes = await request.post("/common/qt/testFactorSelect", { factorSelectExpr: body });
+    const { result, detail } = testRes.body;
+    Object.assign(scriptTestResult, { result, detail, code: body });
+    if (result === 1) {
+      ElMessage.success("测试通过");
+    } else {
+      ElMessage.error("测试未能通过");
+      scriptTestLogVisible.value = true;
+    }
+  } finally {
+    scriptTestLoading.value = false;
+  }
+};
+// 脚本: 日志明细
+const handleScriptLog = () => {
+  if (scriptTestResult.result === null) {
+    return ElMessage.warning("请先进行测试, 等待测试完成后可查看日志");
+  }
+  scriptTestLogVisible.value = true;
+};
 
 // 监控: 窗口开关
 watch(
@@ -308,16 +368,21 @@ watch(
             factorType.value = "模版";
           }
         });
+        // 重置测试结果
+        Object.assign(scriptTestResult, {
+          result: null,
+          detail: "",
+        });
         break;
       }
       case false: {
         stVarSelectDialogRef.value.close();
+        scriptTestLogVisible.value = false;
         break;
       }
     }
-  }
+  },
 );
-
 // 监控: 因子类型
 watch(
   () => factorType.value,
@@ -329,7 +394,7 @@ watch(
       });
     }
   },
-  { deep: true }
+  { deep: true },
 );
 </script>
 
@@ -418,6 +483,7 @@ watch(
             >
               因子筛选
             </span>
+            <!-- 因子使用说明 -->
             <el-tooltip
               effect="dark"
               content="点击查看: 因子使用说明"
@@ -425,6 +491,7 @@ watch(
             >
               <el-icon @click="visibleDescriptions = true"><InfoFilled /></el-icon>
             </el-tooltip>
+            <!-- 因子模式 -->
             <el-radio-group
               v-model="factorType"
               size="small"
@@ -438,11 +505,37 @@ watch(
                 value="脚本"
               />
             </el-radio-group>
-            <st-customFunction
+            <!-- 脚本模式: 自定义函数插入新建, 脚本测试, 脚本复制 -->
+            <div
+              class="editor-tools"
               v-show="factorType === '脚本'"
-              size="small"
-              @insert="handleInsertCustomFunction"
-            />
+            >
+              <st-customFunction
+                v-show="factorType === '脚本'"
+                size="small"
+                @insert="handleInsertCustomFunction"
+              />
+              <el-button
+                type="primary"
+                size="small"
+                :loading="scriptCopyLoading"
+                @click="handleScriptCopy"
+                >复制</el-button
+              >
+              <el-button
+                type="primary"
+                size="small"
+                :loading="scriptTestLoading"
+                @click="handleScriptTest"
+                >测试</el-button
+              >
+              <el-button
+                size="small"
+                :icon="Document"
+                @click="handleScriptLog"
+                >日志明细</el-button
+              >
+            </div>
           </div>
           <!-- 变量选择器 + 关闭 -->
           <div class="right">
@@ -719,6 +812,57 @@ watch(
     :factorType="factorType"
     :data="config.factorDescriptions?.filter((item) => [1, 3].includes(item.type))"
   />
+  <!-- 窗口: 日志明细 -->
+  <el-dialog
+    modal-class="log-dialog"
+    v-model="scriptTestLogVisible"
+    width="830"
+    align-center
+    append-to-body
+    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="scriptTestLogVisible = false"><Close /></el-icon>
+        </div>
+      </div>
+    </template>
+    <div class="content">
+      <!-- 代码 -->
+      <el-scrollbar
+        class="code"
+        height="600px"
+      >
+        <pre>{{ scriptTestResult.code }}</pre>
+      </el-scrollbar>
+      <!-- 分割线 -->
+      <el-divider direction="vertical" />
+      <!-- 日志 -->
+      <el-scrollbar height="600px">
+        <pre :class="scriptTestResult.result === 1 ? 'success-log' : 'error-log'">{{ scriptTestResult.result === 1 ? "测试通过 √" : scriptTestResult.detail }}</pre>
+      </el-scrollbar>
+    </div>
+    <!-- 底部 -->
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="scriptTestLogVisible = false"> 关闭 </el-button>
+      </div>
+    </template>
+  </el-dialog>
   <!-- 变量选择器 -->
   <st-varSelectDialog ref="stVarSelectDialogRef" />
 </template>
@@ -738,6 +882,14 @@ watch(
       align-items: center;
       gap: 10px;
     }
+    .editor-tools {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      .el-button {
+        margin: 0;
+      }
+    }
     .el-icon {
       cursor: pointer;
     }
@@ -760,4 +912,49 @@ watch(
     }
   }
 }
+.log-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;
+    }
+  }
+  .content {
+    display: flex;
+    background-color: var(--el-color-black);
+    .el-scrollbar {
+      flex: 1;
+      box-sizing: border-box;
+      padding: 8px;
+    }
+    .el-divider {
+      margin: 0;
+      height: 616px;
+    }
+    .code {
+      color: var(--el-color-info);
+    }
+    .success-log {
+      color: var(--el-color-success);
+    }
+    .error-log {
+      color: var(--el-color-danger);
+    }
+    pre {
+      margin: 0;
+      line-height: 1.5;
+      white-space: pre-wrap;
+      word-break: break-all;
+      word-wrap: break-word;
+    }
+  }
+}
 </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,
+  },
+};