super-page-designer 2.0.37 → 2.0.41-beta1

package/dist/es/components/design/views/assemblys/common/common-variable-bind.vue3.js

@@ -1 +1,688 @@
-
+import { defineComponent, ref, onMounted, onUnmounted, computed, watch, resolveComponent, openBlock, createElementBlock, toDisplayString, createBlock, withCtx, createVNode, withDirectives, withModifiers, unref, vShow, createElementVNode, createTextVNode, normalizeStyle, createCommentVNode, nextTick, pushScopeId, popScopeId } from "vue";
+import { CircleClose, Plus, InfoFilled, Search } from "@element-plus/icons-vue";
+import http from "agilebuilder-ui/src/utils/request";
+import { deepCopy, getUuidv4 } from "../../../utils/common-util.js";
+import { getTypeOptions, taskVarOptions, contextVarOptions } from "./common-variable-bind-option.js";
+import { usePageContextStore } from "../../../../../stores/page-store.js";
+const _withScopeId = (n) => (pushScopeId("data-v-8cdbf8c5"), n = n(), popScopeId(), n);
+const _hoisted_1 = { key: 0 };
+const _hoisted_2 = { style: { "margin-top": "10px", "font-size": "10px", "display": "flex", "align-items": "center", "justify-self": "center" } };
+const _hoisted_3 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("span", { style: { "margin-left": "5px" } }, "输入变量名后点击加号按钮添加", -1));
+const _hoisted_4 = { style: { "font-size": "10px", "line-height": "40px" } };
+const _hoisted_5 = { style: { "margin-top": "4px", "margin-bottom": "8px", "font-size": "10px", "display": "flex", "align-items": "center", "justify-self": "center" } };
+const _hoisted_6 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("span", { style: { "margin-left": "5px" } }, "输入变量名后点击加号按钮添加", -1));
+const _hoisted_7 = {
+  key: 0,
+  style: { "display": "flex" }
+};
+const _hoisted_8 = ["title"];
+const _hoisted_9 = ["title"];
+const _hoisted_10 = { class: "totalStyle" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "ValueSetInput",
+    inheritAttrs: false
+  },
+  __name: "common-variable-bind",
+  props: {
+    modelValue: {
+      type: [String],
+      default: null
+    },
+    paramTypes: {
+      type: Array,
+      default: () => []
+    },
+    size: {
+      type: String,
+      default: "small"
+    },
+    showLabel: {
+      type: Boolean,
+      default: false
+    },
+    // 是否需要方法参数
+    needParams: {
+      type: Boolean,
+      default: false
+    },
+    isRange: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const pageContextUtil = usePageContextStore();
+    const emits = __emit;
+    const props = __props;
+    const popoverVisible = ref(false);
+    const defalutValue = ref("");
+    const inputRef = ref(null);
+    const contentRef = ref(null);
+    const typeOptions = ref([]);
+    const showInput = ref(false);
+    const labelValue = ref("");
+    const paramType = ref("");
+    const paramValue = ref("");
+    const valueOptions = ref([]);
+    const selectOptions = ref({});
+    const searchValue = ref("");
+    const popoverRef = ref(null);
+    const selectInputType = ["context", "system", "task", "data", "page"];
+    onMounted(() => {
+      window.addEventListener("click", handleClickOutside);
+      const pageContext = pageContextUtil.pageContext;
+      let hasTask = false;
+      let hasData = false;
+      if (pageContext && (!pageContext.pageType || pageContext.pageType == "form") && pageContext.tableName) {
+        hasData = true;
+      }
+      if (pageContext && pageContext.workflowCode && hasData) {
+        hasTask = true;
+      }
+      let newOptions = getTypeOptions(props.paramTypes, props.needParams);
+      if (!hasData) {
+        newOptions = newOptions.filter((item) => item.value != "data");
+      }
+      if (!hasTask) {
+        newOptions = newOptions.filter((item) => item.value != "task");
+      }
+      typeOptions.value = newOptions;
+      setSelectOptions();
+      if (props.modelValue) {
+        const [type, val] = props.modelValue.slice(0, props.modelValue.length - 1).slice(2).split(".");
+        paramType.value = type;
+        paramValue.value = val;
+        if (selectInputType.includes(type)) {
+          showInput.value = false;
+        }
+        setValueOptions(paramType.value);
+        labelValue.value = formatter();
+        defalutValue.value = props.modelValue;
+      }
+      if (!paramType.value) {
+        paramType.value = newOptions.length > 0 ? newOptions[0].value : "";
+        setValueOptions(paramType.value);
+      }
+      console.log("popoverRef", popoverRef.value);
+    });
+    onUnmounted(() => {
+      window.removeEventListener("click", handleClickOutside);
+    });
+    let lastTarget = null;
+    function handleClickOutside(event) {
+      if (!popoverVisible.value) {
+        return;
+      }
+      if (paramTypeCheck) {
+        paramTypeCheck = false;
+        return;
+      }
+      let popoverDom = null;
+      if (contentRef.value) {
+        popoverDom = contentRef.value.$el.parentNode;
+      }
+      if (!event.target || !popoverDom) {
+        return;
+      }
+      if (event.target === lastTarget) {
+        console.log("与最后的点击一致");
+        return;
+      }
+      const inputDom = inputRef.value ? inputRef.value.input : null;
+      if (inputDom && (event.target === inputDom || inputDom.contains(event.target))) {
+        console.log("click contains input");
+        return;
+      }
+      if (event.target === popoverDom || popoverDom.contains(event.target)) {
+        console.log("click contains");
+        lastTarget = event.target;
+      } else {
+        if (contentRef.value.$el) {
+          console.log("contentRef.value.$el.contains", contentRef.value.$el.contains(event.target));
+        }
+        console.log("click contains--------not");
+        if (popoverVisible.value) {
+          closePopover();
+        }
+      }
+    }
+    const symbolUnits = ref([
+      {
+        label: "天",
+        value: "d"
+      },
+      {
+        label: "周",
+        value: "w"
+      },
+      {
+        label: "月",
+        value: "m"
+      },
+      {
+        label: "年",
+        value: "y"
+      }
+    ]);
+    const symbolUnitFormatter = (unit) => {
+      const items = symbolUnits.value.filter((item) => {
+        return item.value == unit;
+      });
+      if (items.length > 0) {
+        return items[0].label;
+      } else {
+        return "";
+      }
+    };
+    let popoverTimeout = null;
+    function closePopover(immediate) {
+      clearTimeout(popoverTimeout);
+      {
+        popoverVisible.value = false;
+      }
+    }
+    function openPopover() {
+      clearTimeout(popoverTimeout);
+      popoverVisible.value = true;
+    }
+    const filterTableData = computed(
+      () => (
+        //等于System时为全部
+        valueOptions.value.filter(
+          (data) => !searchValue.value || paramType.value == "system" || data.label.toLowerCase().includes(searchValue.value.toLowerCase()) || data.value.toLowerCase().includes(searchValue.value.toLowerCase())
+        )
+      )
+    );
+    watch(searchValue, () => {
+      if (paramType.value == "system") {
+        querySystemParams();
+      }
+    });
+    let lastSystemQuery = null;
+    function querySystemParams() {
+      if (lastSystemQuery == searchValue.value) {
+        return;
+      }
+      const param = {
+        query: searchValue.value
+      };
+      lastSystemQuery = searchValue.value;
+      http.post(window["$vueApp"].config.globalProperties.baseAPI + "/component/system-params/query", param).then((results) => {
+        const tempOptions = [];
+        for (let result of results) {
+          tempOptions.push({
+            value: result.propKey,
+            label: result.propKey + "  (" + result.propValue + ")"
+          });
+        }
+        selectOptions.value.systemVarOptions = tempOptions;
+        if (paramType.value == "system") {
+          setValueOptions(paramType.value);
+        }
+      });
+    }
+    const tableHeight = computed(() => {
+      let height = 185;
+      if (paramType.value == "page") {
+        height = 170;
+      }
+      return height;
+    });
+    const searchWidthStyle = computed(() => {
+      const style = {};
+      if (paramType.value == "page") {
+        style.width = "210px";
+      }
+      return style;
+    });
+    function setSelectOptions() {
+      selectOptions.value.dataModelOptions = pageContextUtil.pageContextVarOptions.dataOptions;
+      selectOptions.value.pageVarOptions = pageContextUtil.pageContextVarOptions.pageVarOptions;
+    }
+    function formatter() {
+      if (props.modelValue) {
+        return paramType.value + "." + getValueLabel(paramType.value, paramValue.value);
+      }
+      return props.modelValue;
+    }
+    let paramTypeCheck = false;
+    function paramTypeChange(selParamType) {
+      if (selParamType) {
+        if (Array.isArray(selParamType)) {
+          if (selParamType.length > 0) {
+            selParamType = selParamType[0];
+          }
+        }
+      }
+      paramType.value = selParamType;
+      paramValue.value = "";
+      if (selectInputType.includes(selParamType)) {
+        showInput.value = false;
+        setValueOptions(selParamType);
+      } else {
+        showInput.value = true;
+      }
+      if (paramType.value == "system") {
+        querySystemParams();
+      }
+      paramTypeCheck = true;
+    }
+    function setValueOptions(value) {
+      if (value === "context") {
+        let options = contextVarOptions;
+        if (props.isRange) {
+          options = deepCopy(options);
+          for (let i = 0; i < options.length; i++) {
+            let o = options[i];
+            if (o.value == "currentDate") {
+              options.splice(i + 1, 0, {
+                value: "currentDate",
+                symbolUnit: "d",
+                symbol: "-",
+                type: "range"
+              });
+              break;
+            }
+          }
+        }
+        valueOptions.value = options;
+      } else if (value === "system") {
+        valueOptions.value = selectOptions.value.systemVarOptions || [];
+      } else if (value === "task") {
+        valueOptions.value = taskVarOptions;
+      } else if (value === "data") {
+        valueOptions.value = selectOptions.value.dataModelOptions || [];
+      } else if (value === "params") {
+        valueOptions.value = selectOptions.value.paramsVarOptions || [];
+      } else if (value === "page") {
+        valueOptions.value = selectOptions.value.pageVarOptions || [];
+      }
+    }
+    function clearSelect() {
+      defalutValue.value = "";
+      emits("update:modelValue", defalutValue.value);
+      popoverRef.value.hide();
+    }
+    function selectRow(row) {
+      if (row.type == "range") {
+        if (row.symbolNum === "") {
+          ElMessage.warning("周期不能为空!");
+          return;
+        }
+        if (isNaN(row.symbolNum)) {
+          ElMessage.warning("周期为无效的数字!");
+          return;
+        }
+        if (row.symbolNum != "0") {
+          paramValue.value = row.value + row.symbol + row.symbolNum + row.symbolUnit;
+        } else {
+          paramValue.value = row.value;
+        }
+      } else {
+        paramValue.value = row.value;
+      }
+      defalutValue.value = "${" + paramType.value + "." + paramValue.value + "}";
+      emits("update:modelValue", defalutValue.value, row.alias);
+      closePopover();
+    }
+    function addRequestParam(paramName) {
+      paramValue.value = paramName;
+      addInputParams();
+    }
+    function addInputParams() {
+      if (!paramValue.value) {
+        ElMessage.warning("请输入参数名");
+        return;
+      }
+      defalutValue.value = "${" + paramType.value + "." + paramValue.value + "}";
+      emits("update:modelValue", defalutValue.value);
+      closePopover();
+    }
+    function addPageParams() {
+      searchValue.value = searchValue.value.trim();
+      if (!searchValue.value) {
+        ElMessage.warning("请输入参数名");
+        return;
+      }
+      const tempValues = selectOptions.value.pageVarOptions || [];
+      for (let t of tempValues) {
+        if (t.value === searchValue.value) {
+          ElMessage.warning("该变量已存在!");
+          return;
+        }
+      }
+      const variable = {
+        code: getUuidv4(),
+        name: searchValue.value,
+        alias: searchValue.value,
+        type: "string",
+        defaultValue: ""
+      };
+      if (!pageContextUtil.pageContext.variables) {
+        pageContextUtil.pageContext.variables = [];
+      }
+      pageContextUtil.pageContext.variables.push(variable);
+      pageContextUtil.setPageContext(pageContextUtil.pageContext);
+      selectOptions.value.pageVarOptions = pageContextUtil.pageContextVarOptions.pageVarOptions;
+      valueOptions.value = selectOptions.value.pageVarOptions || [];
+      paramValue.value = searchValue.value;
+      defalutValue.value = "${" + paramType.value + "." + searchValue.value + "}";
+      searchValue.value = "";
+      emits("update:modelValue", defalutValue.value);
+      closePopover();
+    }
+    function getValueLabel(valueType, value) {
+      if (selectInputType.includes(valueType)) {
+        if (valueType === "context" && value && value.startsWith("currentDate") && value.length > 11) {
+          const str = value.substring(11);
+          const symbol = str.substring(0, 1);
+          const num = str.substring(1, str.length - 1);
+          const unit = str.substring(str.length - 1);
+          return num + symbolUnitFormatter(unit) + ("+" === symbol ? "后" : "前");
+        }
+        const option = valueOptions.value.find((item) => item.value === value);
+        if (option) {
+          return option.label;
+        }
+      }
+      return value;
+    }
+    const tableRef = ref();
+    function handSelectRow() {
+      if (!props.showLabel && !showInput.value) {
+        const index = filterTableData.value.findIndex((item) => item.value === paramValue.value);
+        if (index > -1) {
+          tableRef.value.setCurrentRow(filterTableData.value[index]);
+        }
+      }
+    }
+    function showPopover() {
+      openPopover();
+      nextTick(() => {
+        setSelectOptions();
+        if (paramType.value) {
+          setValueOptions(paramType.value);
+        }
+        handSelectRow();
+      });
+    }
+    return (_ctx, _cache) => {
+      const _component_el_icon = resolveComponent("el-icon");
+      const _component_el_input = resolveComponent("el-input");
+      const _component_el_cascader_panel = resolveComponent("el-cascader-panel");
+      const _component_el_col = resolveComponent("el-col");
+      const _component_el_empty = resolveComponent("el-empty");
+      const _component_el_button = resolveComponent("el-button");
+      const _component_el_table_column = resolveComponent("el-table-column");
+      const _component_el_option = resolveComponent("el-option");
+      const _component_el_select = resolveComponent("el-select");
+      const _component_el_table = resolveComponent("el-table");
+      const _component_el_row = resolveComponent("el-row");
+      const _component_el_popover = resolveComponent("el-popover");
+      return __props.showLabel ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(defalutValue.value), 1)) : (openBlock(), createBlock(_component_el_popover, {
+        key: 1,
+        ref_key: "popoverRef",
+        ref: popoverRef,
+        visible: popoverVisible.value,
+        width: 400
+      }, {
+        reference: withCtx(() => [
+          createVNode(_component_el_input, {
+            readonly: "",
+            size: __props.size,
+            title: defalutValue.value,
+            ref_key: "inputRef",
+            ref: inputRef,
+            onClick: showPopover,
+            formatter,
+            modelValue: defalutValue.value,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => defalutValue.value = $event),
+            placeholder: "请选择"
+          }, {
+            suffix: withCtx(() => [
+              withDirectives(createVNode(_component_el_icon, {
+                style: { "cursor": "pointer" },
+                onClick: withModifiers(clearSelect, ["stop"])
+              }, {
+                default: withCtx(() => [
+                  createVNode(unref(CircleClose))
+                ]),
+                _: 1
+              }, 512), [
+                [vShow, defalutValue.value]
+              ])
+            ]),
+            _: 1
+          }, 8, ["size", "title", "modelValue"])
+        ]),
+        default: withCtx(() => [
+          createVNode(_component_el_row, {
+            ref_key: "contentRef",
+            ref: contentRef
+          }, {
+            default: withCtx(() => [
+              createVNode(_component_el_col, { span: 8 }, {
+                default: withCtx(() => [
+                  createVNode(_component_el_cascader_panel, {
+                    modelValue: paramType.value,
+                    "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => paramType.value = $event),
+                    onChange: paramTypeChange,
+                    props: { emitPath: true },
+                    size: "small",
+                    options: typeOptions.value,
+                    style: { "height": "240px", "width": "100%" }
+                  }, null, 8, ["modelValue", "options"])
+                ]),
+                _: 1
+              }),
+              !paramType.value ? (openBlock(), createBlock(_component_el_col, {
+                key: 0,
+                span: 16
+              }, {
+                default: withCtx(() => [
+                  createVNode(_component_el_empty, {
+                    description: "请选择类型",
+                    "image-size": 40
+                  })
+                ]),
+                _: 1
+              })) : showInput.value ? (openBlock(), createBlock(_component_el_col, {
+                key: 1,
+                span: 16,
+                style: { "padding-left": "10px" }
+              }, {
+                default: withCtx(() => [
+                  createVNode(_component_el_input, {
+                    style: { "width": "210px" },
+                    size: "small",
+                    modelValue: paramValue.value,
+                    "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => paramValue.value = $event),
+                    placeholder: "请手动输入"
+                  }, null, 8, ["modelValue"]),
+                  createVNode(_component_el_button, {
+                    style: { "float": "right" },
+                    onClick: addInputParams,
+                    size: "small",
+                    type: "primary",
+                    icon: unref(Plus),
+                    circle: ""
+                  }, null, 8, ["icon"]),
+                  createElementVNode("div", _hoisted_2, [
+                    createVNode(_component_el_icon, null, {
+                      default: withCtx(() => [
+                        createVNode(unref(InfoFilled))
+                      ]),
+                      _: 1
+                    }),
+                    _hoisted_3
+                  ]),
+                  withDirectives(createElementVNode("div", _hoisted_4, [
+                    createTextVNode(" 常用参数： "),
+                    createVNode(_component_el_button, {
+                      type: "primary",
+                      size: "small",
+                      onClick: _cache[3] || (_cache[3] = ($event) => addRequestParam("query"))
+                    }, {
+                      default: withCtx(() => [
+                        createTextVNode("query")
+                      ]),
+                      _: 1
+                    })
+                  ], 512), [
+                    [vShow, paramType.value == "request"]
+                  ])
+                ]),
+                _: 1
+              })) : (openBlock(), createBlock(_component_el_col, {
+                key: 2,
+                span: 16,
+                style: { "padding-left": "10px" }
+              }, {
+                default: withCtx(() => [
+                  createVNode(_component_el_input, {
+                    size: "small",
+                    modelValue: searchValue.value,
+                    "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => searchValue.value = $event),
+                    placeholder: "搜索",
+                    "suffix-icon": unref(Search),
+                    style: normalizeStyle([{ "margin-bottom": "5px", "height": "25px" }, searchWidthStyle.value])
+                  }, null, 8, ["modelValue", "suffix-icon", "style"]),
+                  withDirectives(createVNode(_component_el_button, {
+                    style: { "float": "right" },
+                    onClick: addPageParams,
+                    size: "small",
+                    type: "primary",
+                    icon: unref(Plus),
+                    circle: ""
+                  }, null, 8, ["icon"]), [
+                    [vShow, paramType.value == "page"]
+                  ]),
+                  withDirectives(createElementVNode("div", _hoisted_5, [
+                    createVNode(_component_el_icon, null, {
+                      default: withCtx(() => [
+                        createVNode(unref(InfoFilled))
+                      ]),
+                      _: 1
+                    }),
+                    _hoisted_6
+                  ], 512), [
+                    [vShow, paramType.value == "page"]
+                  ]),
+                  createVNode(_component_el_table, {
+                    ref_key: "tableRef",
+                    ref: tableRef,
+                    height: tableHeight.value,
+                    "show-header": false,
+                    size: "small",
+                    "current-row-key": "code",
+                    "row-key": "code",
+                    "tree-props": { children: "items" },
+                    "highlight-current-row": true,
+                    data: filterTableData.value
+                  }, {
+                    default: withCtx(() => [
+                      createVNode(_component_el_table_column, { width: "65" }, {
+                        default: withCtx((scope) => [
+                          createVNode(_component_el_button, {
+                            size: "small",
+                            onClick: ($event) => selectRow(scope.row)
+                          }, {
+                            default: withCtx(() => [
+                              createTextVNode(" 选择 ")
+                            ]),
+                            _: 2
+                          }, 1032, ["onClick"])
+                        ]),
+                        _: 1
+                      }),
+                      createVNode(_component_el_table_column, {
+                        label: "Date",
+                        prop: "label"
+                      }, {
+                        default: withCtx((scope) => [
+                          paramType.value == "context" && scope.row.type == "range" ? (openBlock(), createElementBlock("div", _hoisted_7, [
+                            createVNode(_component_el_input, {
+                              size: "small",
+                              modelValue: scope.row.symbolNum,
+                              "onUpdate:modelValue": ($event) => scope.row.symbolNum = $event,
+                              placeholder: "",
+                              style: { "width": "35px", "margin-left": "4px" }
+                            }, null, 8, ["modelValue", "onUpdate:modelValue"]),
+                            createVNode(_component_el_select, {
+                              size: "small",
+                              style: { "margin-left": "4px", "width": "50px" },
+                              modelValue: scope.row.symbolUnit,
+                              "onUpdate:modelValue": ($event) => scope.row.symbolUnit = $event,
+                              placeholder: ""
+                            }, {
+                              default: withCtx(() => [
+                                createVNode(_component_el_option, {
+                                  label: "天",
+                                  value: "d"
+                                }),
+                                createVNode(_component_el_option, {
+                                  label: "周",
+                                  value: "w"
+                                }),
+                                createVNode(_component_el_option, {
+                                  label: "月",
+                                  value: "m"
+                                }),
+                                createVNode(_component_el_option, {
+                                  label: "年",
+                                  value: "y"
+                                })
+                              ]),
+                              _: 2
+                            }, 1032, ["modelValue", "onUpdate:modelValue"]),
+                            createVNode(_component_el_select, {
+                              size: "small",
+                              style: { "margin-left": "4px", "width": "50px" },
+                              modelValue: scope.row.symbol,
+                              "onUpdate:modelValue": ($event) => scope.row.symbol = $event,
+                              placeholder: ""
+                            }, {
+                              default: withCtx(() => [
+                                createVNode(_component_el_option, {
+                                  label: "前",
+                                  value: "-"
+                                }),
+                                createVNode(_component_el_option, {
+                                  label: "后",
+                                  value: "+"
+                                })
+                              ]),
+                              _: 2
+                            }, 1032, ["modelValue", "onUpdate:modelValue"])
+                          ])) : createCommentVNode("", true),
+                          paramType.value == "data" ? (openBlock(), createElementBlock("span", {
+                            key: 1,
+                            title: scope.row.label + " " + scope.row.value
+                          }, toDisplayString(scope.row.label + " " + scope.row.value), 9, _hoisted_8)) : (openBlock(), createElementBlock("span", {
+                            key: 2,
+                            title: scope.row.label
+                          }, toDisplayString(scope.row.label), 9, _hoisted_9))
+                        ]),
+                        _: 1
+                      })
+                    ]),
+                    _: 1
+                  }, 8, ["height", "data"]),
+                  createElementVNode("div", _hoisted_10, "总计：" + toDisplayString(filterTableData.value.length), 1)
+                ]),
+                _: 1
+              }))
+            ]),
+            _: 1
+          }, 512)
+        ]),
+        _: 1
+      }, 8, ["visible"]));
+    };
+  }
+});
+export {
+  _sfc_main as default
+};