st-comp 0.0.160 → 0.0.161

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "st-comp",
   "public": true,
-  "version": "0.0.160",
+  "version": "0.0.161",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -18,6 +18,7 @@
     "dayjs": "^1.11.10",
     "echarts": "^5.4.3",
     "element-plus": "^2.9.4",
+    "interactjs": "^1.10.27",
     "monaco-editor": "0.47.0",
     "pinia": "^2.1.6",
     "st-func": "^0.0.59",

package/packages/VarietySearch/components/FactorScreen/ScriptSelect.vue

@@ -0,0 +1,300 @@
+<script setup>
+import interact from "interactjs";
+import { computed, onMounted, ref, inject } from "vue";
+import { Close, InfoFilled } from "@element-plus/icons-vue";
+import VarietySelect from './VarietySelect.vue'
+
+const stConfig = inject("stConfig");
+
+const dialogRef = ref(null); // 弹窗主体Ref
+const dialogTop = ref((window.innerHeight - 542) / 2 - 220 > 0 ? (window.innerHeight - 542) / 2 - 220 : 0);
+const dialogRight = ref((window.innerWidth - 1000) / 2 > 0 ? (window.innerWidth - 1000) / 2 : 0);
+
+const editorRef = ref(null); // 编辑器Ref
+const visible = ref(false);
+
+const varName = ref(null);
+const varList = ref([]);
+const formatList = computed(() => {
+  return varList.value.find((item) => item.varName === varName.value)?.formatList ?? [];
+});
+
+// 格式化配置项的下拉框数据源
+const handleOptionsStrToArray = (str) => {
+  const trimmedStr = str.replace(/^\[|\]$/g, "");
+  // 分割字符串为多个数组项
+  const items = trimmedStr.split("],[");
+
+  return items.map((item) => {
+    // 移除每个项两端的方括号（如果有）
+    const cleanItem = item.replace(/\[|\]/g, "");
+    // 分割标签和值
+    const [label, value] = cleanItem.split(",");
+
+    return {
+      label: label.trim(),
+      value: value.trim(),
+    };
+  });
+};
+
+// 插入变量值
+const handleInsetVarContent = (configList) => {
+  // 1.校验是否填写完整 + 生成输出值
+  const result = [];
+  for (let index = 0; index < configList.length; index++) {
+    const item = configList[index];
+    console.log(item)
+    switch (item.vtype) {
+      case "text": {
+        result.push(item.param);
+        break;
+      }
+      default: {
+        if (!item.modelValue) return ElMessage.error("请检查插入格式内是否填写完整");
+        result.push(item.suffix ? `${item.modelValue}${item.suffix}` : `${item.modelValue}`);
+        break;
+      }
+    }
+  }
+  // 2.插入内容
+  const content = result.join("_");
+
+  const editorIns = editorRef.value.getInstance();
+  const position = editorIns.getPosition();
+
+  const currentValue = editorRef.value.getValue();
+  const lines = currentValue.split("\n");
+  // 如果光标位置有效
+  if (position.lineNumber <= lines.length) {
+    const lineIndex = position.lineNumber - 1;
+    const line = lines[lineIndex];
+
+    // 在光标位置插入内容
+    const newLine = line.substring(0, position.column - 1) + content + line.substring(position.column - 1);
+    lines[lineIndex] = newLine;
+
+    // 更新编辑器内容
+    const newValue = lines.join("\n");
+    editorRef.value.setValue(newValue);
+
+    // 将光标移动到插入内容之后
+    const newColumn = position.column + content.length;
+    editorIns.setPosition({
+      lineNumber: position.lineNumber,
+      column: newColumn,
+    });
+    editorIns.focus();
+  }
+};
+
+onMounted(async () => {
+  const { body } = await stConfig.request.post('/common/conf/queryAllBackVariables', { useCase: "2" });
+  varList.value = body;
+});
+defineExpose({
+  open: (editor) => {
+    editorRef.value = editor;
+    visible.value = true;
+    // 支持拖拽
+    const dragArea = document.querySelector("body");
+    interact(dialogRef.value).draggable({
+      allowFrom: ".custom-header", // 只有 .custom-header 元素可以触发拖拽
+      // 限制拖拽范围
+      modifiers: [
+        interact.modifiers.restrictRect({
+          restriction: dragArea, // 限制在拖拽区域内
+          endOnly: false, // 实时限制
+        }),
+      ],
+      listeners: {
+        move(event) {
+          dialogRight.value -= event.dx;
+          dialogTop.value += event.dy;
+        },
+      },
+    });
+  },
+  close: () => {
+    visible.value = false;
+  }
+});
+</script>
+
+<template>
+  <div
+    v-show="visible"
+    class="var-select-dialog"
+    ref="dialogRef"
+    :style="{ right: `${dialogRight}px`, top: `${dialogTop}px` }"
+  >
+    <div class="custom-header">
+      <div class="left">
+        <span> 选择变量 </span>
+        <el-select
+          v-model="varName"
+          placeholder="选择变量"
+          filterable
+          clearable
+        >
+          <el-option
+            v-for="(item, index) in varList"
+            :key="index"
+            :label="item.varName"
+            :value="item.varName"
+          />
+        </el-select>
+      </div>
+      <div class="right">
+        <el-icon
+          class="el-icon--left"
+          @click="visible = false"
+        >
+          <Close />
+        </el-icon>
+      </div>
+    </div>
+    <div class="custom-body">
+      <template v-if="formatList.length">
+        <div
+          class="format-item"
+          v-for="(formatItem, formatIndex) in formatList"
+          :key="formatIndex"
+        >
+          <span>格式{{ formatIndex + 1 }}:</span>
+
+          <!-- 配置项 -->
+          <div class="config-list">
+            <template v-for="(config, configIndex) in formatItem.configList">
+              <div class="config-item">
+                <!-- 类型: 固定值 -->
+                <template v-if="config.vtype === 'text'">
+                  <span>{{ config.param }}</span>
+                </template>
+                <template v-if="config.vtype === 'inputVariety'">
+                  <VarietySelect
+                    size="small"
+                    :placeholder="config.param"
+                    :selectClearEnable="false"
+                    :labelShowEnable="false"
+                    @select="({ name, code }) => (config.modelValue = code)"
+                    @change="(value) => (config.modelValue = value)"
+                    style="width: 100px"
+                  />
+                </template>
+                <template v-if="config.vtype === 'input'">
+                  <el-input
+                    v-model="config.modelValue"
+                    :placeholder="config.param"
+                    size="small"
+                  />
+                  <span v-if="config.suffix">{{ config.suffix }}</span>
+                </template>
+                <template v-if="config.vtype === 'select'">
+                  <el-select
+                    v-model="config.modelValue"
+                    :placeholder="config.param"
+                    clearable
+                    size="small"
+                  >
+                    <el-option
+                      v-for="item in handleOptionsStrToArray(config.optionsStr)"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    />
+                  </el-select>
+                </template>
+              </div>
+              <span v-if="configIndex !== formatItem.configList.length - 1">_</span>
+            </template>
+          </div>
+          <!-- 插入变量 -->
+          <el-button
+            type="primary"
+            plain
+            size="small"
+            @click="handleInsetVarContent(formatItem.configList)"
+          >
+            插入变量
+          </el-button>
+          <!-- Tip示例 -->
+          <el-tooltip
+            effect="dark"
+            :content="formatItem.tip"
+            placement="top-start"
+          >
+            <el-icon><InfoFilled /></el-icon>
+          </el-tooltip>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.var-select-dialog {
+  min-width: 660px;
+  max-width: 1000px;
+  border-radius: 4px;
+  box-sizing: border-box;
+  box-shadow: var(--el-box-shadow-light);
+  background-color: var(--el-bg-color);
+  z-index: 2006;
+  position: fixed;
+  .custom-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px;
+    .left {
+      display: flex;
+      align-items: center;
+      flex: 1;
+      span {
+        margin-right: 10px;
+      }
+      .el-select {
+        width: 140px;
+      }
+    }
+    .right {
+      display: flex;
+      align-items: center;
+      .el-button {
+        margin-right: 10px;
+      }
+      .el-icon {
+        cursor: pointer;
+        &:hover {
+          color: var(--el-color-primary);
+        }
+      }
+    }
+  }
+  .custom-body {
+    min-height: 160px;
+    box-sizing: border-box;
+    border-top: var(--el-border);
+    padding: 20px 10px;
+    .format-item {
+      font-size: 12px;
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 10px;
+      margin-bottom: 10px;
+      .config-list {
+        display: flex;
+        align-items: center;
+        .el-input {
+          width: 100px;
+        }
+        .el-select {
+          width: 100px;
+        }
+      }
+    }
+  }
+}
+</style>

package/packages/VarietySearch/components/FactorScreen/VarietySelect.vue

@@ -0,0 +1,78 @@
+<!-- 组件: 品种自动补全搜索 -->
+<script setup>
+import { ref, inject } from "vue";
+import { getUserData } from "st-func";
+
+const stConfig = inject("stConfig");
+
+const emit = defineEmits(["select", "change"]);
+const props = defineProps({
+  size: { type: String, default: "default" },
+  placeholder: { type: String, default: "请输入品种名称或代码" },
+  labelShowEnable: { type: Boolean, default: true }, // 是否开启展示label
+  selectClearEnable: { type: Boolean, default: true }, // 是否开启选择回调后清除输入框值
+});
+
+const inputValue = ref("");
+const fetchSuggestions = async (value, callback) => {
+  if (value === "" || value === "null") {
+    callback([]);
+  } else {
+    const params = {
+      keyWord: value,
+      pageNum: 1,
+      pageSize: 999,
+      userId: getUserData("id"),
+      hotSearchFlag: 1,
+    };
+    const { body } = await stConfig.request.post("/common/qt/getFeatureInfosByPage", params);
+    const result = body.list.map(({ code, featureName }) => ({
+      label: `${code}\xa0\xa0\xa0${featureName}`,
+      value: code,
+    }));
+    callback(result);
+  }
+};
+const handleSelect = ({ label, value }) => {
+  const name = label.split("\xa0").at(-1);
+  const code = value;
+  emit("select", { name, code });
+  if (props.selectClearEnable) inputValue.value = "";
+};
+const handleChange = (value) => {
+  emit("change", value);
+}
+</script>
+
+<template>
+  <div class="variety-auto-complete">
+    <span v-if="labelShowEnable">品种搜索:</span>
+    <el-autocomplete
+      v-model="inputValue"
+      clearable
+      :size="props.size"
+      :placeholder="props.placeholder"
+      :fetch-suggestions="fetchSuggestions"
+      @select="handleSelect"
+      @change="handleChange"
+    >
+      <template #default="{ item }">
+        <div class="label">{{ item.label }}</div>
+      </template>
+    </el-autocomplete>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.variety-auto-complete {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  span {
+    width: 80px;
+  }
+  .el-autocomplete {
+    flex: 1;
+  }
+}
+</style>

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

@@ -1,9 +1,11 @@
 <!-- 因子筛选组件 -->
 <script setup name="FactorScreen">
-import { ref } from "vue";
+import { nextTick, ref, watch } from "vue";
 import { Plus, CircleCloseFilled, InfoFilled } from "@element-plus/icons-vue";
 import { handleVerifyScore, extractConditionDetails } from "./tools.js";
 import FactorDescription from "./FactorDescription.vue";
+import ScriptSelect from "./ScriptSelect.vue";
+import MonacoEditor from "../../../MonacoEditor/index.vue"
 
 const props = defineProps({
   config: {
@@ -26,9 +28,12 @@ const data = defineModel("data", {
   },
 });
 
+const monacoEditorRef = ref();
+const scriptSelectRef = ref();
 // 弹窗开关
 const visible = ref(false);
 const visibleDescriptions = ref(false);
+const factorType = ref("模版");
 // 弹窗表单
 const dialogFormRef = ref(null);
 const dialogForm = ref({
@@ -44,43 +49,73 @@ const dialogForm = ref({
   sqlEnable: 0,
   // SQL语句
   sqlValue: null,
+  // 脚本语句
+  factorSelectExpr: '',
 });
 
+watch(() => [factorType.value, visible.value], () => {
+  if (factorType.value === '模版' || visible.value === false) {
+    scriptSelectRef.value.close();
+  }
+}, { deep: true })
+
 // 打开
 const handleOpenDialog = () => {
-  const { list, sqlEnable, sqlValue } = data.value;
+  const { list, sqlEnable, sqlValue, factorSelectExpr } = data.value;
   dialogForm.value = {
     list: JSON.parse(JSON.stringify(list)),
     sqlEnable,
     sqlValue,
+    factorSelectExpr,
   };
   // 保证因子筛选最少一条
   if (!dialogForm.value.list.length) handleAppendFactor();
   visible.value = true;
+  // 解决初次访问样式错乱问题
+  nextTick(() => {
+    if (factorSelectExpr) {
+      factorType.value = '脚本'
+      monacoEditorRef.value.setValue(factorSelectExpr);
+    } else factorType.value = '模版';
+    monacoEditorRef.value.resize();
+  })
 };
 // 确定
 const handleSubmit = () => {
-  dialogFormRef.value.validate((valid) => {
-    const { list, sqlEnable, sqlValue } = dialogForm.value;
-    if (!valid) return;
-    // 针对开启了SQL功能后的字段校验
-    if (sqlEnable) {
-      if (!sqlValue) return ElMessage.error("SQL语句不能为空");
-      // 提取SQL语句中的条件1, 条件2, ...
-      const sqlConditions = extractConditionDetails(sqlValue);
-      // 生成因子表格中的条件1, 条件2, ...
-      const factorConditions = list.map((item, index) => `条件${index + 1}`);
-      // 校验SQL中是否全部都能在因子表格中找到
-      const noSaveConditions = sqlConditions.filter((item) => !factorConditions.includes(item));
-      if (noSaveConditions.length) return ElMessage.error(`请检查SQL语句, 不存在[${noSaveConditions}]`);
-    }
+  if (factorType.value === '模版') {
+    dialogFormRef.value.validate((valid) => {
+      const { list, sqlEnable, sqlValue } = dialogForm.value;
+      if (!valid) return;
+      // 针对开启了SQL功能后的字段校验
+      if (sqlEnable) {
+        if (!sqlValue) return ElMessage.error("SQL语句不能为空");
+        // 提取SQL语句中的条件1, 条件2, ...
+        const sqlConditions = extractConditionDetails(sqlValue);
+        // 生成因子表格中的条件1, 条件2, ...
+        const factorConditions = list.map((item, index) => `条件${index + 1}`);
+        // 校验SQL中是否全部都能在因子表格中找到
+        const noSaveConditions = sqlConditions.filter((item) => !factorConditions.includes(item));
+        if (noSaveConditions.length) return ElMessage.error(`请检查SQL语句, 不存在[${noSaveConditions}]`);
+      }
+      data.value = {
+        list: JSON.parse(JSON.stringify(list)),
+        sqlEnable,
+        sqlValue,
+        factorSelectExpr: '',
+      };
+      visible.value = false;
+    });
+  } else {
+    const script = monacoEditorRef.value.getValue();
+    if (!script) return ElMessage.error("请输入脚本语句");
     data.value = {
-      list: JSON.parse(JSON.stringify(list)),
-      sqlEnable,
-      sqlValue,
+      list: [],
+      sqlEnable: 0,
+      sqlValue: null,
+      factorSelectExpr: script,
     };
     visible.value = false;
-  });
+  }
 };
 
 // 表单: 删除因子
@@ -185,8 +220,22 @@ const handleDeleteTag = (aciton, index) => {
       data.value.list.splice(index, 1);
       break;
     }
+    case "scriptTag": {
+      data.value = {
+        list: [],
+        sqlEnable: 0,
+        sqlValue: null,
+        factorSelectExpr: '',
+      };
+      break;
+    }
   }
 };
+
+// 打开变量选择器
+const open = () => {
+  scriptSelectRef.value.open(monacoEditorRef.value);
+}
 </script>
 
 <template>
@@ -221,6 +270,25 @@ const handleDeleteTag = (aciton, index) => {
           {{ handleFormatTag(tag) }}
         </el-tag>
       </template>
+      <!-- 脚本模式 -->
+      <el-popover
+        v-if="data.factorSelectExpr"
+        width="500"
+        placement="bottom-start"
+      >
+        <div style="white-space: pre-line;">
+          {{ data.factorSelectExpr }}
+        </div>
+        <template #reference>
+          <el-tag
+            closable
+            type="info"
+            @close="handleDeleteTag('scriptTag')"
+          >
+            脚本模式
+          </el-tag>
+        </template>
+      </el-popover>
       <!-- 添加按钮 -->
       <el-button
         class="screen-btn"
@@ -236,7 +304,7 @@ const handleDeleteTag = (aciton, index) => {
     <!-- 因子筛选弹窗 -->
     <el-dialog
       v-model="visible"
-      width="680"
+      width="1000"
       align-center
       destroy-on-close
     >
@@ -255,9 +323,27 @@ const handleDeleteTag = (aciton, index) => {
           >
             <el-icon @click="visibleDescriptions = true"><InfoFilled /></el-icon>
           </el-tooltip>
+          <el-radio-group
+            v-model="factorType"
+            size="small"
+            style="margin-left: 12px;"
+          >
+            <el-radio-button label="模版" value="模版" />
+            <el-radio-button label="脚本" value="脚本" />
+          </el-radio-group>
+          <!-- 变量选择器 -->
+           <div style="flex: 1; text-align: right;" v-if="factorType === '脚本'">
+            <el-button
+              size="small"
+              type="primary"
+              @click="open"
+            >变量选择器</el-button>
+           </div>
         </div>
       </template>
+      <!-- 模版模式 -->
       <el-form
+        v-if="factorType === '模版'"
         ref="dialogFormRef"
         :model="dialogForm"
       >
@@ -485,6 +571,20 @@ const handleDeleteTag = (aciton, index) => {
           </template>
         </template>
       </el-form>
+      <!-- 脚本模式 -->
+      <div
+        style="width: 968px; height: 400px"
+        :style="
+          factorType === '脚本' ?
+            null :
+            { position: 'fixed', top: '-400px', zIndex: -1 }
+          "
+      >
+        <MonacoEditor
+          ref="monacoEditorRef"
+          :language="'lua'"
+        />
+      </div>
       <template #footer>
         <div class="dialog-footer">
           <el-button
@@ -501,6 +601,8 @@ const handleDeleteTag = (aciton, index) => {
     v-model:visible="visibleDescriptions"
     :data="config.factorDescriptions?.filter((item) => [1, 3].includes(item.type))"
   />
+  <!-- 变量选择器 -->
+  <ScriptSelect ref="scriptSelectRef" />
 </template>
 
 <style lang="scss" scoped>

package/packages/VarietySearch/index.vue

@@ -26,6 +26,7 @@ searchData.value = Object.assign(searchData.value, {
     list: [],
     sqlEnable: 0,
     sqlValue: null,
+    factorSelectExpr: '',
   },
   // 常用指标
   commonIndicator: [],
@@ -114,6 +115,7 @@ const clearRow = (key) => {
         list: [],
         sqlEnable: 0,
         sqlValue: null,
+        factorSelectExpr: '',
       };
       break;
     }
@@ -260,6 +262,10 @@ defineExpose({
       }
       // enableSql参数整理
       params.enableSql = factorScreen.sqlEnable === 1 ? 2 : 1;
+      // 2.因子筛选表达式
+      if (factorScreen.factorSelectExpr) {
+        params.factorSelectExpr = factorScreen.factorSelectExpr;
+      }
     }
     // 7.常用指标
     {
@@ -451,6 +457,7 @@ defineExpose({
         list: [],
         sqlEnable: 0,
         sqlValue: null,
+        factorSelectExpr: '',
       },
       // 常用指标
       commonIndicator: [],