@jzg223/design-runtime 0.0.0-stage → 0.0.1

package/dist/search/design-search2.vue.js

@@ -0,0 +1,232 @@
+import { defineComponent, ref, computed, reactive, watch, openBlock, createElementBlock, createVNode, unref, createBlock, Fragment, renderList, createElementVNode, normalizeStyle, toDisplayString, resolveDynamicComponent, withCtx, createTextVNode, createCommentVNode } from "vue";
+import { Spin, Alert, Result, Button } from "antdv-next";
+import { fetchSearchConfig } from "../api.js";
+import { resolveComponent } from "../form/fields/index.js";
+import DesignDevStateButton from "../components/design-debug/dev-state-button.vue.js";
+const _hoisted_1 = { class: "design-search" };
+const _hoisted_2 = {
+  key: 0,
+  class: "flex-center py-4"
+};
+const _hoisted_3 = {
+  key: 3,
+  class: "design-search-form"
+};
+const _hoisted_4 = { class: "design-search-field" };
+const _hoisted_5 = {
+  key: 0,
+  class: "design-search-actions"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "DesignSearch" },
+  __name: "design-search",
+  props: {
+    category: { default: "" },
+    name: { default: "" },
+    config: { default: null },
+    labelWidth: { default: "auto" },
+    filterEmpty: { type: Boolean, default: true },
+    showActions: { type: Boolean, default: true },
+    devButtonTop: { default: 10 }
+  },
+  emits: ["query", "reset", "change"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const loading = ref(false);
+    const error = ref(null);
+    const rawConfig = ref([]);
+    const cells = computed(() => {
+      const list = [];
+      for (const row of rawConfig.value) {
+        if (Array.isArray(row)) list.push(...row);
+      }
+      return list;
+    });
+    const formData = reactive({});
+    function initFormData() {
+      for (const cell of cells.value) {
+        if (cell.name && !(cell.name in formData)) {
+          formData[cell.name] = void 0;
+        }
+      }
+    }
+    function normalizeConfig(resp) {
+      const arr = Array.isArray(resp) ? resp : resp == null ? void 0 : resp.cells;
+      if (!Array.isArray(arr)) return [];
+      if (arr.length > 0 && !Array.isArray(arr[0])) {
+        return [arr];
+      }
+      return arr;
+    }
+    async function loadConfig() {
+      if (props.config) {
+        rawConfig.value = normalizeConfig(props.config);
+        loading.value = false;
+        return;
+      }
+      if (!props.category || !props.name) return;
+      loading.value = true;
+      error.value = null;
+      try {
+        const resp = await fetchSearchConfig(props.category, props.name);
+        rawConfig.value = normalizeConfig(resp);
+      } catch (err) {
+        const msg = (err == null ? void 0 : err.message) ?? "";
+        if (msg.includes("未发现")) {
+          rawConfig.value = [];
+        } else {
+          error.value = msg || "加载查询配置失败";
+          rawConfig.value = [];
+        }
+      } finally {
+        loading.value = false;
+      }
+    }
+    watch(
+      () => [props.category, props.name, props.config],
+      () => loadConfig(),
+      { immediate: true }
+    );
+    watch(cells, () => initFormData(), { immediate: true });
+    function getValues() {
+      return { ...formData };
+    }
+    function getQueryValues() {
+      if (!props.filterEmpty) return { ...formData };
+      const result = {};
+      for (const [key, val] of Object.entries(formData)) {
+        if (val !== void 0 && val !== null && val !== "") {
+          result[key] = val;
+        }
+      }
+      return result;
+    }
+    function setValues(values) {
+      for (const key of Object.keys(values)) {
+        formData[key] = values[key];
+      }
+    }
+    function handleQuery() {
+      emit("query", getQueryValues());
+    }
+    function handleReset() {
+      for (const cell of cells.value) {
+        if (cell.name) formData[cell.name] = void 0;
+      }
+      emit("reset");
+    }
+    watch(
+      () => ({ ...formData }),
+      (values) => emit("change", { ...values }),
+      { deep: true }
+    );
+    __expose({
+      getQueryValues,
+      getValues,
+      handleQuery,
+      handleReset,
+      setValues
+    });
+    const labelStyle = computed(() => {
+      if (props.labelWidth === "auto") return {};
+      const w = typeof props.labelWidth === "number" ? `${props.labelWidth}px` : props.labelWidth;
+      return { width: w };
+    });
+    const devState = computed(() => {
+      var _a, _b, _c;
+      return {
+        props: {
+          category: props.category,
+          name: props.name,
+          config: props.config ? Array.isArray(props.config) ? { rows: props.config.length } : { id: (_a = props.config) == null ? void 0 : _a.id, name: (_b = props.config) == null ? void 0 : _b.name, title: (_c = props.config) == null ? void 0 : _c.title } : null,
+          labelWidth: props.labelWidth,
+          filterEmpty: props.filterEmpty,
+          showActions: props.showActions
+        },
+        config: {
+          rows: rawConfig.value.length,
+          cells: cells.value.length,
+          fields: cells.value.map((c) => c.name || c.title)
+        },
+        loading: loading.value,
+        error: error.value
+      };
+    });
+    const exprScope = computed(() => ({ data: formData }));
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        loading.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
+          createVNode(unref(Spin), {
+            spinning: true,
+            tip: "加载查询配置中..."
+          })
+        ])) : error.value ? (openBlock(), createBlock(unref(Alert), {
+          key: 1,
+          message: error.value,
+          type: "error",
+          "show-icon": "",
+          closable: "",
+          onClose: _cache[0] || (_cache[0] = ($event) => error.value = null)
+        }, null, 8, ["message"])) : cells.value.length === 0 ? (openBlock(), createBlock(unref(Result), {
+          key: 2,
+          status: "404",
+          title: "未发现查询配置",
+          "sub-title": "该查询表单尚未在构建端完成配置，或配置名称有误"
+        })) : (openBlock(), createElementBlock("div", _hoisted_3, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(cells.value, (cell, idx) => {
+            return openBlock(), createElementBlock("div", {
+              key: cell.name || idx,
+              class: "design-search-item"
+            }, [
+              createElementVNode("span", {
+                class: "design-search-label",
+                style: normalizeStyle(labelStyle.value)
+              }, toDisplayString(cell.title), 5),
+              createElementVNode("div", _hoisted_4, [
+                (openBlock(), createBlock(resolveDynamicComponent(unref(resolveComponent)(cell.type)), {
+                  "model-value": cell.name ? formData[cell.name] : void 0,
+                  cell,
+                  disabled: cell.readonly === "2",
+                  "onUpdate:modelValue": (val) => {
+                    if (cell.name) formData[cell.name] = val;
+                  }
+                }, null, 8, ["model-value", "cell", "disabled", "onUpdate:modelValue"]))
+              ])
+            ]);
+          }), 128)),
+          __props.showActions ? (openBlock(), createElementBlock("div", _hoisted_5, [
+            createVNode(unref(Button), {
+              type: "primary",
+              onClick: handleQuery
+            }, {
+              default: withCtx(() => [..._cache[1] || (_cache[1] = [
+                createTextVNode("查询", -1)
+              ])]),
+              _: 1
+            }),
+            createVNode(unref(Button), { onClick: handleReset }, {
+              default: withCtx(() => [..._cache[2] || (_cache[2] = [
+                createTextVNode("重置", -1)
+              ])]),
+              _: 1
+            })
+          ])) : createCommentVNode("", true)
+        ])),
+        createVNode(DesignDevStateButton, {
+          title: "DesignSearch",
+          state: devState.value,
+          "expr-scope": exprScope.value,
+          "expr-scope-labels": { data: "当前查询表单的值" },
+          "designer-type": "search",
+          "designer-category": __props.category,
+          "designer-name": __props.name,
+          top: __props.devButtonTop
+        }, null, 8, ["state", "expr-scope", "designer-category", "designer-name", "top"])
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/search/transformer.js

@@ -0,0 +1,115 @@
+import { resolveDefaultValue } from "../utils/default-value.js";
+function parseSelectOptions(raw) {
+  if (!raw) return [];
+  return raw.split("\n").map((line) => {
+    const [value, ...labelParts] = line.split("|");
+    return {
+      label: (labelParts.join("|") || value || "").trim(),
+      value: (value || "").trim()
+    };
+  }).filter((opt) => opt.value);
+}
+function mapFieldType(cell) {
+  const type = cell.type || "text";
+  switch (type) {
+    case "text": {
+      switch (cell.text_type) {
+        case "textarea":
+          return "Textarea";
+        case "number":
+          return "InputNumber";
+        case "password":
+          return "InputPassword";
+        default:
+          return "Input";
+      }
+    }
+    case "select":
+      return "Select";
+    case "date":
+      return "DatePicker";
+    case "month":
+      return "DatePicker";
+    case "time":
+      return "TimePicker";
+    case "tree":
+      return "TreeSelect";
+    case "radio":
+      return "RadioGroup";
+    case "checkbox":
+      return "CheckboxGroup";
+    default:
+      return "Input";
+  }
+}
+function transformCellToSchema(cell) {
+  var _a;
+  if (!cell.name) return null;
+  const schema = {
+    component: mapFieldType(cell),
+    fieldName: cell.name,
+    label: cell.title
+  };
+  const defaultValue = resolveDefaultValue(cell);
+  if (defaultValue !== void 0) {
+    schema.defaultValue = defaultValue;
+  }
+  const componentProps = {};
+  if (cell.type === "text" && !cell.text_type) {
+    componentProps.placeholder = cell.placeholder || `请输入${cell.title}`;
+  }
+  if (cell.type === "select" || cell.type === "radio" || cell.type === "checkbox") {
+    let options = [];
+    if ((_a = cell.dicts) == null ? void 0 : _a.length) {
+      options = cell.dicts.map((d) => ({
+        // 合并 select_sql 整行数据，树形/其它字段可直接取用（label/value 优先）
+        ...d.data || {},
+        label: d.dictLabel,
+        value: d.dictValue
+      }));
+    } else {
+      options = parseSelectOptions(cell.select_options);
+    }
+    if (options.length > 0) {
+      componentProps.options = options;
+    }
+  }
+  if (cell.type === "date" && cell.dateType) {
+    componentProps.valueFormat = cell.dateType.includes("HH") ? "YYYY-MM-DD HH:mm:ss" : "YYYY-MM-DD";
+  }
+  if (cell.type === "month") {
+    componentProps.picker = "month";
+    componentProps.valueFormat = cell.dateType || "YYYY-MM";
+  }
+  if (cell.readonly === "2") {
+    componentProps.disabled = true;
+  }
+  schema.componentProps = componentProps;
+  return schema;
+}
+function normalizeSearchCells(resp) {
+  const arr = Array.isArray(resp) ? resp : resp == null ? void 0 : resp.cells;
+  if (!Array.isArray(arr)) return [];
+  if (arr.length > 0 && !Array.isArray(arr[0])) {
+    return [arr];
+  }
+  return arr;
+}
+function buildSearchFormOptions(resp) {
+  const cells = normalizeSearchCells(resp);
+  const schema = cells.flat().map(transformCellToSchema).filter((s) => s !== null);
+  return {
+    commonConfig: {
+      componentProps: {
+        allowClear: true
+      },
+      labelWidth: 80
+    },
+    schema,
+    wrapperClass: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
+  };
+}
+export {
+  buildSearchFormOptions,
+  normalizeSearchCells
+};