st-comp 0.0.215 → 0.0.216

package/packages/CustomFunction/components/ManageDialog.vue

@@ -0,0 +1,779 @@
+<script setup>
+import { ref, h, inject, onMounted, watch, reactive, nextTick, computed } from "vue";
+import { Close, Edit, DocumentCopy, Delete, Document } from "@element-plus/icons-vue";
+import { debounce } from "st-func";
+
+const { request } = inject("stConfig"); // 组件库全局配置
+const stMonacoEditorRef = ref(null);
+const stVarSelectDialogRef = ref(null);
+
+const emit = defineEmits(["refreshData"]);
+const props = defineProps({
+  data: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const visible = ref(false);
+const loading = reactive({
+  save: false,
+  test: false,
+});
+
+// 函数相关参数
+const funcKeyWord = ref(null);
+const funcList = computed(() => {
+  if (funcKeyWord.value) {
+    return props.data.filter((item) => item.funcName.includes(funcKeyWord.value));
+  } else {
+    return props.data;
+  }
+});
+const ruleForm = reactive({
+  id: null,
+  funcName: "",
+  funcExpression: "",
+});
+
+// 测试日志相关参数
+const testVariety = ref("");
+const testResult = reactive({
+  result: null,
+  detail: "",
+  code: "",
+});
+const testVarietyVisible = ref(false);
+const testLogVisible = ref(false);
+
+// 函数: 新建
+const handleAdd = () => {
+  Object.assign(ruleForm, {
+    id: null,
+    funcName: "",
+    funcExpression: "",
+  });
+  testVariety.value = "";
+  stMonacoEditorRef.value?.setValue(ruleForm.funcExpression);
+};
+// 函数: 编辑
+const handleEdit = (item) => {
+  Object.assign(ruleForm, {
+    id: item.id,
+    funcName: item.funcName,
+    funcExpression: item.funcExpression,
+  });
+  testVariety.value = "";
+  stMonacoEditorRef.value?.setValue(ruleForm.funcExpression);
+};
+// 函数: 复制
+const handleCopy = (item) => {
+  Object.assign(ruleForm, {
+    id: null,
+    funcName: `${item.funcName}-复制`,
+    funcExpression: item.funcExpression,
+  });
+  testVariety.value = "";
+  stMonacoEditorRef.value?.setValue(ruleForm.funcExpression);
+};
+
+// 函数: 删除
+const handleDelete = async (item) => {
+  // 如果删除的是当前正在操作的自定义函数, 则需要清空表单
+  if (item.id === ruleForm.id) {
+    Object.assign(ruleForm, {
+      id: null,
+      funcName: "",
+      funcExpression: "",
+    });
+    stMonacoEditorRef.value?.setValue(ruleForm.funcExpression);
+  }
+  await request.post("/common/qt/deleteSearchFunctionById", { id: item.id });
+  emit("refreshData");
+};
+// 函数: 保存
+const handleSave = debounce(async () => {
+  try {
+    loading.save = true;
+    ruleForm.funcExpression = stMonacoEditorRef.value.getValue();
+    // 校验
+    if (!ruleForm.funcName) return ElMessage.error("函数名称不可为空");
+    if (!ruleForm.funcExpression) return ElMessage.error("函数内容不可为空");
+    // 调用接口
+    await request.post("/common/qt/saveOrUpdateSearchFunction", ruleForm);
+    ElMessage.success("操作成功");
+    emit("refreshData");
+    // 如果是复制, 或者新建则清空当前表单
+    if (!ruleForm.id) handleAdd();
+  } finally {
+    loading.save = false;
+  }
+});
+
+// 测试: 生成变量key和value的输入框
+const showVariableInputDialog = (variables) => {
+  return new Promise((resolve) => {
+    const formData = ref(
+      variables.reduce((obj, variable) => {
+        obj[variable] = "";
+        return obj;
+      }, {}),
+    );
+    const errors = ref({});
+
+    // 验证函数
+    const validateForm = () => {
+      let isValid = true;
+      const newErrors = {};
+
+      variables.forEach((variable) => {
+        if (!formData.value[variable]?.trim()) {
+          newErrors[variable] = `请输入${variable}的值`;
+          isValid = false;
+        }
+      });
+
+      errors.value = newErrors;
+      return isValid;
+    };
+    // h语法表单组件
+    const FormComponent = {
+      setup() {
+        return () =>
+          h("div", [
+            h(
+              ElForm,
+              {
+                model: formData.value,
+              },
+              () =>
+                variables.map((variable) =>
+                  h(
+                    ElFormItem,
+                    {
+                      label: `${variable}: `,
+                      prop: variable,
+                      error: errors.value[variable],
+                      "label-width": "90px",
+                    },
+                    () =>
+                      h(ElInput, {
+                        modelValue: formData.value[variable],
+                        "onUpdate:modelValue": (val) => {
+                          formData.value[variable] = val;
+                          // 清除错误状态
+                          if (errors.value[variable]) delete errors.value[variable];
+                        },
+                        placeholder: `请输入 ${variable} 的值`,
+                        status: errors.value[variable] ? "error" : "",
+                      }),
+                  ),
+                ),
+            ),
+          ]);
+      },
+    };
+    ElMessageBox({
+      title: "填写变量值用于接口测试",
+      message: h(FormComponent),
+      showCancelButton: true,
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      customClass: "variable-input-dialog",
+      beforeClose: async (action, instance, done) => {
+        if (action !== "confirm") {
+          resolve(false);
+          done();
+        }
+        await nextTick();
+        if (validateForm()) {
+          resolve({ ...formData.value });
+          done();
+        }
+      },
+    }).catch(() => resolve(false));
+  });
+};
+const extractVariables = (expression) => {
+  const regex = /\$\{([^}]*)\}/g;
+  const matches = [];
+  let match;
+
+  while ((match = regex.exec(expression)) !== null) {
+    matches.push(match[1]);
+  }
+
+  return [...new Set(matches)];
+};
+const replaceVariables = (expression, variableValues) => {
+  return expression.replace(/\$\{([^}]*)\}/g, (match, variableName) => {
+    return variableValues[variableName] !== undefined ? variableValues[variableName] : match;
+  });
+};
+const extractCodesFromString = (str) => {
+  if (!str) return [];
+  return str.split("\n").reduce((result, next) => {
+    const code = next.trim().replace(/\s+/gi, " ").split(" ")[0];
+    code && result.push(code);
+    return result;
+  }, []);
+};
+// 测试: 打开/确认/日志
+const handleTest = async (action) => {
+  switch (action) {
+    case "open": {
+      // 基础校验
+      if (!stMonacoEditorRef.value.getValue()) return ElMessage.error("函数内容不可为空");
+      testVarietyVisible.value = true;
+      break;
+    }
+    case "submit": {
+      let testContent = stMonacoEditorRef.value.getValue();
+      if (!testContent) return ElMessage.error("函数内容不可为空");
+      // 检测函数中是否使用的变量语法, 如果包含, 需要用户二次输入对应的值, 将其替换后进行测试
+      if (/\$\{[^}]*\}/.test(testContent)) {
+        const variables = extractVariables(testContent);
+        const variableValues = await showVariableInputDialog(variables);
+        if (!variableValues) return;
+        testContent = replaceVariables(testContent, variableValues);
+      }
+      testVarietyVisible.value = false;
+      try {
+        loading.test = true;
+        const params = {
+          codes: extractCodesFromString(testVariety.value),
+          factorSelectExpr: testContent,
+        };
+        const { body } = await request.post("/common/qt/testFactorSelect", params);
+        const { result, detail } = body;
+        Object.assign(testResult, { result, detail, code: params.factorSelectExpr });
+        if (result === 1) {
+          ElMessage.success("测试通过");
+        } else {
+          ElMessage.error("测试未能通过");
+          testLogVisible.value = true;
+        }
+      } finally {
+        loading.test = false;
+      }
+      break;
+    }
+    case "log": {
+      if (testResult.result === null) {
+        return ElMessage.warning("请先进行测试, 等待测试完成后可查看日志");
+      }
+      testLogVisible.value = true;
+      break;
+    }
+  }
+};
+
+// 变量选择器
+const handleOpenVarSelectDialog = () => {
+  stVarSelectDialogRef.value.open(stMonacoEditorRef.value);
+};
+// 监视: 窗口开关
+watch(
+  () => visible.value,
+  (newValue) => {
+    switch (newValue) {
+      case true: {
+        nextTick(() => {
+          stMonacoEditorRef.value?.resize();
+          // 初始默认值
+          funcKeyWord.value = null;
+          if (funcList.value.length) {
+            handleEdit(funcList.value[0]);
+          } else {
+            handleAdd();
+          }
+          // 重置测试结果
+          Object.assign(testResult, {
+            result: null,
+            detail: "",
+            code: "",
+          });
+        });
+        break;
+      }
+      case false: {
+        // 确保关闭内嵌窗口
+        stVarSelectDialogRef.value.close();
+        testVarietyVisible.value = false;
+        testLogVisible.value = false;
+        break;
+      }
+    }
+  },
+);
+defineExpose({
+  open: () => {
+    visible.value = true;
+  },
+});
+</script>
+
+<template>
+  <el-dialog
+    modal-class="manage-dialog"
+    v-model="visible"
+    width="1600"
+    align-center
+    append-to-body
+    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>
+    <div class="manage-dialog-body">
+      <!-- 函数列表 -->
+      <div class="func-list">
+        <div class="search">
+          <span>输入函数关键字</span>
+          <el-input
+            v-model="funcKeyWord"
+            clearable
+          />
+          <el-button
+            type="primary"
+            @click="handleAdd"
+            >新建</el-button
+          >
+        </div>
+        <el-scrollbar class="list">
+          <template v-if="funcList.length">
+            <div
+              v-for="item in funcList"
+              :key="item.id"
+              :class="{ 'active-list-item': ruleForm.id === item.id }"
+              class="list-item"
+            >
+              <span
+                class="func-name"
+                @click="handleEdit(item)"
+                >{{ item.funcName }}</span
+              >
+              <div class="icon-box">
+                <el-icon>
+                  <DocumentCopy @click="handleCopy(item)" />
+                </el-icon>
+                <el-popconfirm
+                  :title="`确认是否删除?`"
+                  confirm-button-text="确认"
+                  cancel-button-text="取消"
+                  @confirm="handleDelete(item)"
+                >
+                  <template #reference>
+                    <el-icon @click.stop="() => {}"> <Delete /> </el-icon>
+                  </template>
+                </el-popconfirm>
+              </div>
+            </div>
+          </template>
+          <el-empty
+            v-else
+            description="暂无数据"
+          />
+        </el-scrollbar>
+      </div>
+      <!-- 函数表单 -->
+      <div class="rule-form">
+        <div class="header">
+          <span>函数名称:</span>
+          <el-input v-model="ruleForm.funcName" />
+          <div class="right">
+            <el-button
+              type="primary"
+              @click="handleSave"
+              :loading="loading.save"
+            >
+              保存
+            </el-button>
+            <el-button
+              :loading="loading.test"
+              @click="handleTest('open')"
+            >
+              测试
+            </el-button>
+            <el-button
+              :icon="Document"
+              @click="handleTest('log')"
+            >
+              日志明细
+            </el-button>
+            <el-button
+              type="primary"
+              @click="handleOpenVarSelectDialog"
+            >
+              变量选择器
+            </el-button>
+          </div>
+        </div>
+        <!-- 注意事项 -->
+        <div class="tip-box">说明: 公式里可以使用变量, 变量名命名格式: ${变量名}, 后续可在应用函数时填写具体值, 系统会自动换算</div>
+        <!-- 内容 -->
+        <st-monacoEditor
+          ref="stMonacoEditorRef"
+          :language="'lua'"
+          style="width: 100%; height: calc(80vh - 75px)"
+        />
+      </div>
+    </div>
+
+    <!-- 变量选择器 -->
+    <st-varSelectDialog ref="stVarSelectDialogRef" />
+
+    <!-- 窗口: 选择测试所用的品种 -->
+    <el-dialog
+      modal-class="test-variety-dialog"
+      v-model="testVarietyVisible"
+      width="500"
+      align-center
+      append-to-body
+      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">
+            <st-varietyAutoComplete
+              label=""
+              @select="({ name, code }) => (testVariety += `${code} ${name} \n`)"
+            />
+            <el-icon @click="testVarietyVisible = false"><Close /></el-icon>
+          </div>
+        </div>
+      </template>
+      <el-input
+        class="full-height-textarea"
+        v-model="testVariety"
+        resize="none"
+        type="textarea"
+        :placeholder="`不填写时, 默认为000001 平安银行\n格式示例:\nhc8888\xa0\xa0\xa0\xa0热轧卷板期货指数\nsp8888\xa0\xa0\xa0\xa0纸浆期货指数\nbu8888\xa0\xa0\xa0\xa0石油沥青期货指数`"
+      />
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button
+            type="primary"
+            @click="handleTest('submit')"
+          >
+            确认
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+    <!-- 窗口: 日志明细 -->
+    <el-dialog
+      modal-class="log-dialog"
+      v-model="testLogVisible"
+      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="testLogVisible = false"><Close /></el-icon>
+          </div>
+        </div>
+      </template>
+      <div class="content">
+        <!-- 代码 -->
+        <el-scrollbar
+          class="code"
+          height="600px"
+        >
+          <pre>{{ testResult.code }}</pre>
+        </el-scrollbar>
+        <!-- 分割线 -->
+        <el-divider direction="vertical" />
+        <!-- 日志 -->
+        <el-scrollbar height="600px">
+          <pre :class="testResult.result === 1 ? 'success-log' : 'error-log'">{{ testResult.result === 1 ? `✅️ 测试通过\n${testResult.detail}` : testResult.detail }}</pre>
+        </el-scrollbar>
+      </div>
+      <!-- 底部 -->
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="testLogVisible = false"> 关闭 </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.manage-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;
+    }
+  }
+  .manage-dialog-body {
+    height: 80vh;
+    display: flex;
+    align-items: center;
+    .func-list {
+      height: 100%;
+      width: 400px;
+      display: flex;
+      flex-direction: column;
+      box-sizing: border-box;
+      padding-right: 10px;
+      border-right: var(--el-border);
+      .search {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+        .el-input {
+          flex: 1;
+          margin: 0 10px;
+        }
+      }
+      .list {
+        width: 100%;
+        height: 100%;
+        .list-item {
+          font-size: 16px;
+          width: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          position: relative;
+          border-radius: 4px;
+          &:hover {
+            background-color: #d9e7ff;
+          }
+          &::before {
+            content: "";
+            position: absolute;
+            left: -30px;
+            top: calc(50% - 2px);
+            width: 30px;
+            height: 16px;
+            background: var(--el-color-primary);
+            clip-path: polygon(
+              0% 0%,
+              // 左上角
+              50% 0%,
+              // 右上角缺点
+              100% 100%,
+              // 缺点终点
+              100% 100%,
+              // 右下角
+              0% 100% // 左下角
+            );
+            transform: translateY(-50%);
+            transition: all 0.25s ease;
+          }
+          .func-name {
+            line-height: 32px;
+            flex: 1;
+            box-sizing: border-box;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            transition: all 0.25s ease;
+            cursor: pointer;
+            &:hover {
+              color: var(--el-color-primary);
+            }
+          }
+          .icon-box {
+            font-size: 18px;
+            height: 20px;
+            padding-right: 10px;
+            .el-icon {
+              margin-left: 6px;
+              cursor: pointer;
+              &:hover {
+                color: var(--el-color-primary);
+              }
+            }
+            .delete {
+              &:hover {
+                color: var(--el-color-danger);
+              }
+            }
+          }
+        }
+        .active-list-item {
+          &::before {
+            left: 0;
+          }
+          &::after {
+            content: "";
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 2px;
+            background: var(--el-color-primary);
+            transform: scaleX(0);
+            transform-origin: left center;
+            animation: borderGrow 0.25s ease forwards;
+          }
+          .func-name {
+            color: var(--el-color-primary);
+            font-weight: bold;
+            padding-left: 34px;
+          }
+        }
+        @keyframes borderGrow {
+          from {
+            transform: scaleX(0);
+          }
+          to {
+            transform: scaleX(1);
+          }
+        }
+      }
+    }
+    .rule-form {
+      flex: 1;
+      height: 100%;
+      box-sizing: border-box;
+      padding-left: 10px;
+      .header {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        margin-bottom: 10px;
+        .el-input {
+          flex: 1;
+        }
+      }
+      .tip-box {
+        box-sizing: border-box;
+        padding: 4px 0 4px 8px;
+        margin-bottom: 4px;
+        border-left: 6px solid var(--el-color-info);
+        background-color: var(--el-color-info-light-8);
+      }
+      .el-empty {
+        height: 100%;
+      }
+    }
+  }
+}
+.test-variety-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;
+    }
+  }
+  .full-height-textarea {
+    width: 100%;
+    height: 200px;
+    margin-top: 10px;
+    :deep(.el-textarea__inner) {
+      box-sizing: border-box;
+      height: 100%;
+    }
+  }
+}
+.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>