st-comp 0.0.215 → 0.0.217

package/packages/CustomFunction/index.vue

@@ -1,10 +1,9 @@
 <script setup>
-import { ref, h, inject, onMounted, watch, reactive, nextTick } from "vue";
-import { Close, Edit, DocumentCopy, Delete, Document } from "@element-plus/icons-vue";
+import { ref, inject, onMounted, watch, reactive } from "vue";
+import ManageDialog from "./components/ManageDialog.vue";
 
 const { request } = inject("stConfig"); // 组件库全局配置
-const stMonacoEditorRef = ref(null);
-const stVarSelectDialogRef = ref(null);
+const ManageDialogRef = ref(null);
 
 const emit = defineEmits(["insert"]);
 const props = defineProps({
@@ -16,22 +15,6 @@ const customFunctionId = ref(null);
 const customFunctionName = ref("");
 const customFunctionOptions = ref([]);
 
-const visible = ref(false);
-const ruleForm = reactive({
-  id: null,
-  funcName: "",
-  funcExpression: "",
-});
-const submitLoading = ref(false);
-
-const testVisible = ref(false);
-const testLoading = ref(false);
-const testResult = reactive({
-  result: null,
-  detail: "",
-  code: "",
-});
-
 // 自定义函数: 获取选项
 const getCustomFunctionOptions = async () => {
   const { body } = await request.post("/common/qt/querySearchFunctions");
@@ -53,56 +36,6 @@ const handleChange = (value) => {
     customFunctionId.value = null;
   }
 };
-// 自定义函数: 删除选项
-const handleDelete = async (item) => {
-  await request.post("/common/qt/deleteSearchFunctionById", { id: item.id });
-  getCustomFunctionOptions();
-};
-// 自定义函数: 新建, 编辑, 复制
-const handleAddOrEdit = (item, isCopy) => {
-  switch (Boolean(item)) {
-    // 新建
-    case false: {
-      Object.assign(ruleForm, {
-        id: null,
-        funcName: "",
-        funcExpression: "",
-      });
-      break;
-    }
-    // 编辑
-    case true: {
-      Object.assign(ruleForm, {
-        id: item.id,
-        funcName: item.funcName,
-        funcExpression: item.funcExpression,
-      });
-      break;
-    }
-  }
-  if (isCopy) {
-    ruleForm.id = null;
-    ruleForm.funcName = `${ruleForm.funcName}-复制`;
-  }
-  visible.value = true;
-};
-// 自定义函数: 保存
-const handleSubmit = async () => {
-  try {
-    submitLoading.value = 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("操作成功");
-    visible.value = false;
-    await getCustomFunctionOptions();
-  } finally {
-    submitLoading.value = false;
-  }
-};
 // 自定义函数: 插入
 const handleInsert = () => {
   if (!customFunctionName.value) return ElMessage.error("请先选择自定义函数后, 再执行插入");
@@ -110,179 +43,19 @@ const handleInsert = () => {
   emit("insert", funcName, funcExpression);
 };
 
-// 提取函数变量
-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;
-  });
-};
-// 生成函数变量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 handleTest = async () => {
-  try {
-    testLoading.value = true;
-    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);
-    }
-    // 调用接口
-    const { body } = await request.post("/common/qt/testFactorSelect", { factorSelectExpr: testContent });
-    const { result, detail } = body;
-    Object.assign(testResult, { result, detail, code: testContent });
-    if (result === 1) {
-      ElMessage.success("测试通过");
-    } else {
-      ElMessage.error("测试未能通过");
-      testVisible.value = true;
-    }
-  } finally {
-    testLoading.value = false;
-  }
-};
-// 自定义函数: 日志明细
-const handleTestLog = () => {
-  if (testResult.result === null) {
-    return ElMessage.warning("请先进行测试, 等待测试完成后可查看日志");
-  }
-  testVisible.value = true;
-};
-
-// 变量选择器: 打开
-const handleOpenVarSelectDialog = () => {
-  stVarSelectDialogRef.value.open(stMonacoEditorRef.value);
+// 窗口: 函数管理
+const handleOpenManageDialog = () => {
+  ManageDialogRef.value.open();
 };
 
 onMounted(() => {
   getCustomFunctionOptions();
 });
-watch(
-  () => visible.value,
-  (newValue) => {
-    switch (newValue) {
-      case true: {
-        nextTick(() => {
-          stMonacoEditorRef.value?.setValue(ruleForm.funcExpression);
-          stMonacoEditorRef.value?.resize();
-        });
-        // 重置测试结果
-        Object.assign(testResult, {
-          result: null,
-          detail: "",
-        });
-        break;
-      }
-      case false: {
-        stVarSelectDialogRef.value.close();
-        break;
-      }
-    }
-  }
-);
 </script>
 
 <template>
   <div class="custom-function">
-    <!-- 自定义函数: 选择框 -->
+    <!-- 选择框 -->
     <el-select
       v-model="customFunctionName"
       :size="size"
@@ -303,28 +76,10 @@ watch(
       >
         <div class="func-option">
           <span>{{ item.funcName }}</span>
-          <div class="icons">
-            <el-icon @click.stop="handleAddOrEdit(item, true)">
-              <DocumentCopy />
-            </el-icon>
-            <el-icon @click.stop="handleAddOrEdit(item)">
-              <Edit />
-            </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>
       </el-option>
     </el-select>
-    <!-- 自定义函数: 插入 -->
+    <!-- 插入 -->
     <el-button
       type="primary"
       :size="size"
@@ -332,148 +87,21 @@ watch(
     >
       插入
     </el-button>
-    <!-- 自定义函数: 新建 -->
+    <!-- 管理 -->
     <el-button
       type="primary"
       :size="size"
-      @click="handleAddOrEdit()"
+      @click="handleOpenManageDialog()"
     >
-      新建
+      函数管理
     </el-button>
 
-    <!-- 窗口: 新建编辑 -->
-    <el-dialog
-      modal-class="add-or-edit-dialog"
-      v-model="visible"
-      width="1000"
-      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"
-            >
-              {{ ruleForm.id ? "编辑自定义函数" : "新建自定义函数" }}
-            </span>
-          </div>
-          <!-- 变量选择器 + 关闭 -->
-          <div class="right">
-            <el-button
-              size="small"
-              type="primary"
-              @click="handleOpenVarSelectDialog"
-            >
-              变量选择器
-            </el-button>
-            <el-icon @click="visible = false"><Close /></el-icon>
-          </div>
-        </div>
-      </template>
-      <!-- 函数名称 + 测试 -->
-      <div class="func-name">
-        <div class="left">
-          <span>函数名称:</span>
-          <el-input v-model="ruleForm.funcName" />
-        </div>
-        <div class="right">
-          <el-button
-            type="primary"
-            :loading="testLoading"
-            @click="handleTest"
-          >
-            测试
-          </el-button>
-          <el-button
-            :icon="Document"
-            @click="handleTestLog"
-          >
-            日志明细
-          </el-button>
-        </div>
-      </div>
-      <!-- 注意事项 -->
-      <div class="tip-box">Tip: 公式里可以使用变量, 变量名命名格式: ${变量名}, 后续可在应用函数时填写具体值, 系统会自动换算</div>
-      <!-- 内容 -->
-      <st-monacoEditor
-        ref="stMonacoEditorRef"
-        :language="'lua'"
-        style="width: 968px; height: 400px"
-      />
-      <!-- 底部 -->
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button
-            type="primary"
-            :loading="submitLoading"
-            @click="handleSubmit"
-          >
-            确定
-          </el-button>
-        </div>
-      </template>
-    </el-dialog>
-    <!-- 窗口: 日志明细 -->
-    <el-dialog
-      modal-class="log-dialog"
-      v-model="testVisible"
-      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="testVisible = 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 ? "测试通过 √" : testResult.detail }}</pre>
-        </el-scrollbar>
-      </div>
-      <!-- 底部 -->
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button @click="testVisible = false"> 关闭 </el-button>
-        </div>
-      </template>
-    </el-dialog>
-
-    <!-- 变量选择器 -->
-    <st-varSelectDialog ref="stVarSelectDialogRef" />
+    <!-- 窗口: 函数管理 -->
+    <ManageDialog
+      ref="ManageDialogRef"
+      :data="customFunctionOptions"
+      @refreshData="getCustomFunctionOptions"
+    />
   </div>
 </template>
 
@@ -503,96 +131,6 @@ watch(
   align-items: center;
   justify-content: space-between;
   gap: 10px;
-  .icons {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    .el-icon {
-      cursor: pointer;
-    }
-  }
-}
-.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-5);
-}
-.add-or-edit-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;
-    }
-  }
-  .func-name {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 10px;
-    .left {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-      .el-input {
-        width: 300px;
-      }
-    }
-  }
-}
-.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>
 
@@ -603,7 +141,4 @@ watch(
   transform: translateX(-50%) !important;
   z-index: 10000 !important;
 }
-.variable-input-dialog {
-  width: 360px;
-}
 </style>

package/packages/VarietyAutoComplete/index.vue

@@ -26,7 +26,7 @@ const fetchSuggestions = async (value, callback) => {
       userId: getUserData("id"),
       hotSearchFlag: 1,
     };
-    const { body } = await stConfig.request.post("/common/qt/getFeatureInfosByPage", params);
+    const { body } = await stConfig.request.post("/common/qt/quickSearch", params);
     const result = body.list.map(({ code, featureName }) => ({
       label: `${code}\xa0\xa0\xa0${featureName}`,
       value: code,