st-comp 0.0.80 → 0.0.82

package/package.json

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

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

@@ -3,59 +3,118 @@
 import { ref } from "vue";
 import { Plus, CircleCloseFilled } from "@element-plus/icons-vue";
 
-const props = defineProps({ config: { type: Object, default: () => {} } });
-const data = defineModel("data", { default: [] }); // 父组件对应该组件字段的数据
+// 组件点击确认后的数据
+const data = defineModel("data", {
+  default: {
+    list: [],
+    sqlEnable: 0,
+    sqlValue: null,
+  },
+});
+const props = defineProps({
+  config: {
+    type: Object,
+    default: {
+      cycleShow: true, // 周期功能是否展示
+      cycleDefault: null, // 周期默认值
+      cycleOptions: [], // 周期下拉框选项
+      factorOptions: [], // 因子下拉框选项
+      sqlShow: false, // SQL功能是否展示
+    },
+  },
+});
 
 // 弹窗开关
 const visible = ref(false);
-
-// 表单相关参数
 const dialogFormRef = ref(null);
-const dialogForm = ref({ factorScreen: [{ cycle: props.config.cycleDefault ?? null, factor: null, score: [null, null] }] });
-// 特殊校验: 分数
-const scoreValidator = (rule, value, callback) => {
-  // 检查开始和结束的分是否都没填
-  if (!value[0] && value[0] !== 0 && !value[1] && value[1] !== 0) {
-    callback(new Error("至少填写一个分数"));
-  } else {
-    callback();
-  }
-};
+const dialogForm = ref({
+  // 筛选因子列表
+  list: [
+    {
+      cycle: props.config.cycleDefault ?? null, // 周期
+      factor: null, // 因子
+      score: [null, null], // 得分
+    },
+  ],
+  // 是否开启SQL功能 0关闭, 1开启
+  sqlEnable: 0,
+  // SQL语句
+  sqlValue: null,
+});
 
-// 函数: 弹窗外-添加因子
+// 打开弹窗
 const openDialog = () => {
-  // 弹窗打开时, 重置表单
-  if (data.value.length > 0) dialogForm.value.factorScreen = JSON.parse(JSON.stringify(data.value));
-  else dialogForm.value.factorScreen = [{ cycle: props.config.cycleDefault ?? null, factor: null, score: [null, null] }];
+  const { list, sqlEnable, sqlValue } = data.value;
+  dialogForm.value = {
+    list: JSON.parse(JSON.stringify(list)),
+    sqlEnable,
+    sqlValue,
+  };
+  // 保证因子筛选最少一条
+  if (!dialogForm.value.list.length) addFactor();
   visible.value = true;
 };
-// 函数: 弹窗外-删除因子
+// 删除因子[弹窗外]
 const deleteTag = (index) => {
-  data.value.splice(index, 1);
+  data.value.list.splice(index, 1);
 };
-
-// 函数: 弹窗内-添加因子
+// 删除SQL[弹窗外]
+const deleteSQL = () => {
+  data.value.sqlValue = null;
+};
+// 添加因子
 const addFactor = () => {
-  dialogForm.value.factorScreen.push({ cycle: props.config.cycleDefault ?? null, factor: null, score: [null, null] });
+  dialogForm.value.list.push({
+    cycle: props.config.cycleDefault ?? null,
+    factor: null,
+    score: [null, null],
+  });
 };
-// 函数: 弹窗内-删除因子
+// 删除因子[弹窗内]
 const deleteFactor = (index) => {
-  dialogForm.value.factorScreen.splice(index, 1);
+  dialogForm.value.list.splice(index, 1);
+};
+// 生成SQL
+const createSQL = () => {
+  dialogFormRef.value.validate((valid) => {
+    if (!valid) return;
+    dialogForm.value.sqlValue = dialogForm.value.list.reduce((result, item, index) => {
+      let sql = `factor_id = ${item.factor} and `;
+      // 如果开启了周期选择
+      if (props.config.cycleShow) sql += `freq_id = ${item.cycle} and `;
+      // 分数的判断
+      if ((item.score[0] || item.score[0] === 0) && (item.score[1] || item.score[1] === 0)) {
+        sql += `score >= ${item.score[0]} and score <= ${item.score[1]}`;
+      } else if (item.score[0] || item.score[0] === 0) {
+        sql += `score >= ${item.score[0]}`;
+      } else if (item.score[1] || item.score[1] === 0) {
+        sql += `score <= ${item.score[1]}`;
+      }
+      // 格式化因子sql语句
+      sql = `(${sql})`;
+      // 如果不是第一条因子sql
+      if (index !== 0) sql = ` and ${sql}`;
+      result += sql;
+      return result;
+    }, "");
+  });
 };
-// 函数: 确定
+// 确定
 const submit = () => {
-  if (!dialogFormRef.value) return;
   dialogFormRef.value.validate((valid) => {
-    if (valid) {
-      data.value = JSON.parse(JSON.stringify(dialogForm.value.factorScreen));
-      visible.value = false;
-    } else {
-      console.error("因子筛选-弹窗: 表单校验未通过");
-    }
+    const { list, sqlEnable, sqlValue } = dialogForm.value;
+    if (!valid) return;
+    if (sqlEnable && !sqlValue) return ElMessage.error("SQL语句不能为空");
+    data.value = {
+      list: JSON.parse(JSON.stringify(list)),
+      sqlEnable,
+      sqlValue,
+    };
+    visible.value = false;
   });
 };
 
-// 映射
+// Tag映射文案
 const handleTagName = (tag) => {
   const { cycle, factor, score } = tag;
   let str = "";
@@ -66,65 +125,177 @@ const handleTagName = (tag) => {
   str += ` ${score[1] || score[1] === 0 ? `${score[1]}分` : "∞"}`;
   return str;
 };
+// 表单校验: 分数
+const scoreValidator = (rule, value, callback) => {
+  // 检查开始和结束的分是否都没填
+  if (!value[0] && value[0] !== 0 && !value[1] && value[1] !== 0) {
+    callback(new Error("至少填写一个分数"));
+  } else {
+    callback();
+  }
+};
 </script>
 
 <template>
   <div class="factor-screen">
-    <!-- Tag展示区域 -->
-    <template v-if="data.length">
-      <el-tag v-for="(tag, index) in data" closable type="info" @close="deleteTag(index)">
+    <!-- 文案[开启sqlEnable] -->
+    <el-tag
+      v-if="data.sqlEnable && data.sqlValue"
+      closable
+      type="info"
+      :title="data.sqlValue"
+      @close="deleteSQL"
+    >
+      <el-text
+        type="info"
+        truncated
+        style="max-width: 500px"
+      >
+        {{ data.sqlValue }}
+      </el-text>
+    </el-tag>
+    <!-- 文案[关闭sqlEnable] -->
+    <template v-if="!data.sqlEnable && data.list.length">
+      <el-tag
+        v-for="(tag, index) in data.list"
+        closable
+        type="info"
+        @close="deleteTag(index)"
+      >
         {{ handleTagName(tag) }}
       </el-tag>
     </template>
-    <!-- 添加按钮区域 -->
-    <el-button class="screen-btn" type="primary" plain size="small" :icon="Plus" @click="openDialog"
+    <!-- 打开弹窗 -->
+    <el-button
+      class="screen-btn"
+      type="primary"
+      plain
+      size="small"
+      :icon="Plus"
+      @click="openDialog"
       >添加因子</el-button
     >
-    <!-- Tag弹窗 -->
-    <el-dialog v-model="visible" title="因子筛选" width="500" align-center destroy-on-close>
-      <el-form ref="dialogFormRef" :model="dialogForm">
-        <div v-for="(item, index) in dialogForm.factorScreen" class="form-row">
+    <!-- 弹窗 -->
+    <el-dialog
+      v-model="visible"
+      title="因子筛选"
+      width="500"
+      align-center
+      destroy-on-close
+    >
+      <el-form
+        ref="dialogFormRef"
+        :model="dialogForm"
+      >
+        <!-- 因子筛选功能 -->
+        <div
+          v-for="(item, index) in dialogForm.list"
+          class="form-row"
+        >
           <!-- 周期 -->
           <el-form-item
             v-if="config.cycleShow"
-            :prop="'factorScreen.' + index + '.cycle'"
+            :prop="'list.' + index + '.cycle'"
             :rules="{ required: true, message: '周期不能为空', trigger: 'blur' }"
-            style="width: 100px; margin-right: 10px;"
+            style="width: 100px; margin-right: 10px"
           >
-            <el-select v-model="item.cycle" placeholder="选择周期" size="small">
-              <el-option v-for="{ label, value } in config.cycleOptions" :label="label" :value="value" :key="value" />
+            <el-select
+              v-model="item.cycle"
+              placeholder="选择周期"
+              size="small"
+            >
+              <el-option
+                v-for="{ label, value } in config.cycleOptions"
+                :label="label"
+                :value="value"
+                :key="value"
+              />
             </el-select>
           </el-form-item>
           <!-- 因子 -->
           <el-form-item
-            :prop="'factorScreen.' + index + '.factor'"
+            :prop="'list.' + index + '.factor'"
             :rules="{ required: true, message: '因子不能为空', trigger: 'blur' }"
-            style="width: 100px; margin-right: 10px;"
+            style="width: 100px; margin-right: 10px"
           >
-            <el-select v-model="item.factor" placeholder="选择因子" filterable size="small" no-match-text="无匹配数据">
-              <el-option v-for="{ label, value } in config.factorOptions" :label="label" :value="value" :key="value" />
+            <el-select
+              v-model="item.factor"
+              placeholder="选择因子"
+              filterable
+              size="small"
+              no-match-text="无匹配数据"
+            >
+              <el-option
+                v-for="{ label, value } in config.factorOptions"
+                :label="label"
+                :value="value"
+                :key="value"
+              />
             </el-select>
           </el-form-item>
           <!-- 分数 -->
           <el-form-item
-            :prop="'factorScreen.' + index + '.score'"
+            :prop="'list.' + index + '.score'"
             :rules="{ validator: scoreValidator, trigger: 'blur' }"
-            style="width: 200px; margin-right: 10px;"
+            style="width: 200px; margin-right: 10px"
           >
-            <div style="display: flex; align-items: center; width: 100%; height: 24px;">
-              <el-input-number v-model="item.score[0]" size="small" controls-position="right" />
+            <div style="display: flex; align-items: center; width: 100%; height: 24px">
+              <el-input-number
+                v-model="item.score[0]"
+                size="small"
+                controls-position="right"
+              />
               <span>~</span>
-              <el-input-number v-model="item.score[1]" size="small" controls-position="right" />
+              <el-input-number
+                v-model="item.score[1]"
+                size="small"
+                controls-position="right"
+              />
             </div>
           </el-form-item>
           <!-- 删除 -->
           <el-icon @click="deleteFactor(index)"><CircleCloseFilled /></el-icon>
         </div>
-        <el-button type="primary" plain size="small" :icon="Plus" @click="addFactor">添加因子</el-button>
+        <el-button
+          type="primary"
+          plain
+          size="small"
+          :icon="Plus"
+          @click="addFactor"
+          style="margin-bottom: 10px"
+          >添加因子</el-button
+        >
+        <!-- SQL功能 -->
+        <template v-if="config.sqlShow">
+          <el-form-item label="SQL功能: ">
+            <el-radio-group v-model="dialogForm.sqlEnable">
+              <el-radio :label="0">关闭</el-radio>
+              <el-radio :label="1">启用</el-radio>
+            </el-radio-group>
+            <el-button
+              v-if="dialogForm.sqlEnable"
+              type="primary"
+              size="small"
+              @click="createSQL"
+              style="margin-left: auto"
+              >生成SQL</el-button
+            >
+          </el-form-item>
+          <el-input
+            v-if="dialogForm.sqlEnable"
+            v-model="dialogForm.sqlValue"
+            :autosize="{ minRows: 4 }"
+            type="textarea"
+          />
+        </template>
       </el-form>
       <template #footer>
         <div class="dialog-footer">
-          <el-button type="primary" @click="submit">确定</el-button>
+          <el-button
+            type="primary"
+            @click="submit"
+            >确定</el-button
+          >
         </div>
       </template>
     </el-dialog>
@@ -148,5 +319,8 @@ const handleTagName = (tag) => {
       cursor: pointer;
     }
   }
+  :deep(.el-dialog__body) {
+    padding-top: 20px;
+  }
 }
 </style>

package/packages/VarietySearch/config.js

@@ -1,3 +1,4 @@
+// 默认配置项
 export default {
   // 品种市场
   varietyMarket: {
@@ -40,10 +41,11 @@ export default {
   // 因子筛选
   factorScreen: {
     show: true,
-    cycleDefault: null,
-    cycleOptions: [],
-    cycleShow: true,
-    factorOptions: [],
+    cycleShow: true, // 周期功能是否展示
+    cycleDefault: null, // 周期默认值
+    cycleOptions: [], // 周期下拉框选项
+    factorOptions: [], // 因子下拉框选项
+    sqlShow: false, // SQL功能是否展示
   },
   // 常用指标
   commonIndicator: {