@fecp/designer 5.6.28 → 5.6.30

package/es/packages/mobile/src/components/dataDisplay/cardList/CardLayoutRenderer.vue.mjs

@@ -0,0 +1,246 @@
+import { computed, createElementBlock, openBlock, createCommentVNode, Fragment, createElementVNode, toDisplayString, normalizeStyle, renderList } from "vue";
+import { LAYOUT_DEFINITIONS, TAG_PRESET_COLORS, STATUS_COLOR_MAP } from "./layoutDefinitions.mjs";
+/* empty css                         */
+import _export_sfc from "../../../../../../_virtual/_plugin-vue_export-helper.mjs";
+const _hoisted_1 = {
+  key: 0,
+  class: "card-head"
+};
+const _hoisted_2 = { class: "title-block" };
+const _hoisted_3 = {
+  key: 0,
+  class: "title"
+};
+const _hoisted_4 = {
+  key: 1,
+  class: "sub"
+};
+const _hoisted_5 = {
+  key: 1,
+  class: "info-list"
+};
+const _hoisted_6 = { class: "label" };
+const _hoisted_7 = { class: "value" };
+const _hoisted_8 = {
+  key: 2,
+  class: "tag-cloud"
+};
+const _hoisted_9 = { class: "chip-label" };
+const _hoisted_10 = { class: "chip-value" };
+const _hoisted_11 = {
+  key: 0,
+  class: "card-head"
+};
+const _hoisted_12 = { class: "title-block" };
+const _hoisted_13 = {
+  key: 0,
+  class: "title"
+};
+const _hoisted_14 = {
+  key: 1,
+  class: "sub"
+};
+const _hoisted_15 = {
+  key: 1,
+  class: "stats-grid"
+};
+const _hoisted_16 = { class: "stat-value" };
+const _hoisted_17 = { class: "stat-label" };
+const _hoisted_18 = {
+  key: 0,
+  class: "title"
+};
+const _hoisted_19 = {
+  key: 1,
+  class: "info-list"
+};
+const _hoisted_20 = { class: "label" };
+const _hoisted_21 = { class: "value" };
+const _sfc_main = {
+  __name: "CardLayoutRenderer",
+  props: {
+    /** 行数据（已经过 CardList 格式化） */
+    data: {
+      type: Object,
+      default: () => ({})
+    },
+    /** 卡片配置 { templateMode, layoutType, slotBindings } */
+    cardConfig: {
+      type: Object,
+      default: () => ({})
+    },
+    /** 事件处理函数 */
+    eventHandler: {
+      type: Function,
+      default: null
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    const layoutType = computed(() => {
+      var _a;
+      return ((_a = props.cardConfig) == null ? void 0 : _a.layoutType) || "";
+    });
+    const slotBindings = computed(() => {
+      var _a;
+      return ((_a = props.cardConfig) == null ? void 0 : _a.slotBindings) || [];
+    });
+    const layoutDef = computed(() => LAYOUT_DEFINITIONS[layoutType.value]);
+    function resolveSlotType(name) {
+      var _a;
+      if (!name) return null;
+      const s = (_a = layoutDef.value) == null ? void 0 : _a.slots.find((x) => x.name === name);
+      if (s) return s.type;
+      if (typeof name === "string") {
+        if (name.startsWith("info")) return "info";
+        if (name.startsWith("tag")) return "tag";
+        if (name.startsWith("stat")) return "stat";
+      }
+      return null;
+    }
+    const typedBindings = computed(
+      () => slotBindings.value.filter((b) => b && b.field).map((b) => ({ ...b, type: resolveSlotType(b.slot) }))
+    );
+    const titleBinding = computed(
+      () => typedBindings.value.find((b) => b.type === "title")
+    );
+    const subtitleBinding = computed(
+      () => typedBindings.value.find((b) => b.type === "subtitle")
+    );
+    const statusBinding = computed(
+      () => typedBindings.value.find((b) => b.type === "status")
+    );
+    const infoSlots = computed(
+      () => typedBindings.value.filter((b) => b.type === "info")
+    );
+    const tagSlots = computed(
+      () => typedBindings.value.filter((b) => b.type === "tag")
+    );
+    const statSlots = computed(
+      () => typedBindings.value.filter((b) => b.type === "stat")
+    );
+    function valOf(binding) {
+      var _a;
+      if (!binding || !binding.field) return "";
+      return ((_a = props.data) == null ? void 0 : _a[binding.field]) ?? "";
+    }
+    function labelOf(binding) {
+      return (binding == null ? void 0 : binding.label) || "";
+    }
+    const statusStyle = computed(() => {
+      var _a;
+      const val = valOf(statusBinding.value);
+      const colors = (_a = statusBinding.value) == null ? void 0 : _a.statusColors;
+      if (colors && colors.length) {
+        const match = colors.find((c) => c.value === val);
+        if (match && match.colorKey) {
+          const preset = TAG_PRESET_COLORS.find((c) => c.key === match.colorKey);
+          if (preset) return { backgroundColor: preset.bg, color: preset.color };
+        }
+      }
+      const defaultKey = STATUS_COLOR_MAP[val];
+      if (defaultKey) {
+        const preset = TAG_PRESET_COLORS.find((c) => c.key === defaultKey);
+        if (preset) return { backgroundColor: preset.bg, color: preset.color };
+      }
+      const grayPreset = TAG_PRESET_COLORS.find((c) => c.key === "gray");
+      return grayPreset ? { backgroundColor: grayPreset.bg, color: grayPreset.color } : {};
+    });
+    function tagStyle(binding) {
+      if (!binding || !binding.tagColorKey) return {};
+      const preset = TAG_PRESET_COLORS.find((c) => c.key === binding.tagColorKey);
+      if (!preset) return {};
+      return {
+        backgroundColor: preset.bg,
+        color: preset.color
+      };
+    }
+    function handleClick() {
+      var _a;
+      (_a = props.eventHandler) == null ? void 0 : _a.call(props, "clickHandler", props.data);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "card-layout-renderer",
+        onClick: handleClick
+      }, [
+        layoutType.value === "title+list+tags" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+          titleBinding.value || subtitleBinding.value || statusBinding.value ? (openBlock(), createElementBlock("div", _hoisted_1, [
+            createElementVNode("div", _hoisted_2, [
+              titleBinding.value ? (openBlock(), createElementBlock("div", _hoisted_3, toDisplayString(valOf(titleBinding.value)), 1)) : createCommentVNode("", true),
+              subtitleBinding.value ? (openBlock(), createElementBlock("div", _hoisted_4, toDisplayString(valOf(subtitleBinding.value)), 1)) : createCommentVNode("", true)
+            ]),
+            statusBinding.value ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              class: "rel-tag",
+              style: normalizeStyle(statusStyle.value)
+            }, toDisplayString(valOf(statusBinding.value)), 5)) : createCommentVNode("", true)
+          ])) : createCommentVNode("", true),
+          infoSlots.value.length ? (openBlock(), createElementBlock("ul", _hoisted_5, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(infoSlots.value, (slot, i) => {
+              return openBlock(), createElementBlock("li", {
+                class: "info-item",
+                key: i
+              }, [
+                createElementVNode("span", _hoisted_6, toDisplayString(labelOf(slot)), 1),
+                createElementVNode("span", _hoisted_7, toDisplayString(valOf(slot)), 1)
+              ]);
+            }), 128))
+          ])) : createCommentVNode("", true),
+          tagSlots.value.length ? (openBlock(), createElementBlock("div", _hoisted_8, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(tagSlots.value, (slot, i) => {
+              return openBlock(), createElementBlock("div", {
+                class: "tag-chip",
+                style: normalizeStyle(tagStyle(slot)),
+                key: i
+              }, [
+                createElementVNode("span", _hoisted_9, toDisplayString(labelOf(slot)), 1),
+                createElementVNode("span", _hoisted_10, toDisplayString(valOf(slot)), 1)
+              ], 4);
+            }), 128))
+          ])) : createCommentVNode("", true)
+        ], 64)) : layoutType.value === "title+stats" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+          titleBinding.value || subtitleBinding.value || statusBinding.value ? (openBlock(), createElementBlock("div", _hoisted_11, [
+            createElementVNode("div", _hoisted_12, [
+              titleBinding.value ? (openBlock(), createElementBlock("div", _hoisted_13, toDisplayString(valOf(titleBinding.value)), 1)) : createCommentVNode("", true),
+              subtitleBinding.value ? (openBlock(), createElementBlock("div", _hoisted_14, toDisplayString(valOf(subtitleBinding.value)), 1)) : createCommentVNode("", true)
+            ]),
+            statusBinding.value ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              class: "rel-tag",
+              style: normalizeStyle(statusStyle.value)
+            }, toDisplayString(valOf(statusBinding.value)), 5)) : createCommentVNode("", true)
+          ])) : createCommentVNode("", true),
+          statSlots.value.length ? (openBlock(), createElementBlock("div", _hoisted_15, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(statSlots.value, (slot, i) => {
+              return openBlock(), createElementBlock("div", {
+                class: "stat-card",
+                key: i
+              }, [
+                createElementVNode("div", _hoisted_16, toDisplayString(valOf(slot)), 1),
+                createElementVNode("div", _hoisted_17, toDisplayString(labelOf(slot)), 1)
+              ]);
+            }), 128))
+          ])) : createCommentVNode("", true)
+        ], 64)) : layoutType.value === "simple+list" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+          titleBinding.value ? (openBlock(), createElementBlock("div", _hoisted_18, toDisplayString(valOf(titleBinding.value)), 1)) : createCommentVNode("", true),
+          infoSlots.value.length ? (openBlock(), createElementBlock("ul", _hoisted_19, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(infoSlots.value, (slot, i) => {
+              return openBlock(), createElementBlock("li", {
+                class: "info-item",
+                key: i
+              }, [
+                createElementVNode("span", _hoisted_20, toDisplayString(labelOf(slot)), 1),
+                createElementVNode("span", _hoisted_21, toDisplayString(valOf(slot)), 1)
+              ]);
+            }), 128))
+          ])) : createCommentVNode("", true)
+        ], 64)) : createCommentVNode("", true)
+      ]);
+    };
+  }
+};
+const CardLayoutRenderer = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-27fb6883"]]);
+export {
+  CardLayoutRenderer as default
+};

package/es/packages/mobile/src/components/dataDisplay/cardList/CardList.vue.mjs

@@ -1,9 +1,10 @@
 /* empty css                                                     */
 /* empty css                                                        */
 /* empty css                                                     */
-import { inject, getCurrentInstance, ref, onMounted, computed, resolveComponent, createElementBlock, openBlock, Fragment, createBlock, createCommentVNode, createVNode, unref, isRef, withCtx, renderList } from "vue";
+import { inject, getCurrentInstance, computed, ref, onMounted, watch, resolveComponent, createElementBlock, openBlock, Fragment, createBlock, createCommentVNode, createVNode, unref, isRef, withCtx, renderList } from "vue";
 import { createDataSource } from "../../../utils/datasource.mjs";
 import VueRender from "../../../utils/idea/VueRender.vue.mjs";
+import CardLayoutRenderer from "./CardLayoutRenderer.vue.mjs";
 import { selectFormatter, multipleFormatter, dateFormatter, textFormatter } from "../../../utils/formatterUtil.mjs";
 /* empty css               */
 import _export_sfc from "../../../../../../_virtual/_plugin-vue_export-helper.mjs";
@@ -65,6 +66,10 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
       type: String,
       default: ""
     },
+    cardConfig: {
+      type: Object,
+      default: () => ({})
+    },
     enableFilter: {
       type: Boolean,
       default: false
@@ -100,6 +105,23 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
     const formData = inject("formData");
     const currentInstance = getCurrentInstance();
     const ctx = currentInstance.proxy;
+    const effectiveCardConfig = computed(() => {
+      const cfg = props.cardConfig || {};
+      if (cfg.templateMode !== "preset") return cfg;
+      const cols = props.columns || [];
+      const hasSlotOnColumns = cols.some((c) => c.slot);
+      if (hasSlotOnColumns) {
+        const slotBindings = cols.filter((c) => c.slot).map((c) => ({
+          slot: c.slot,
+          field: c.fieldName,
+          label: c.label,
+          statusColors: c.statusColors,
+          tagColorKey: c.tagColorKey
+        }));
+        return { ...cfg, slotBindings };
+      }
+      return cfg;
+    });
     const listRef = ref();
     let isDesigner = false;
     onMounted(async () => {
@@ -140,6 +162,20 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
     let pageNo = 1;
     const dataSourceManager = ref();
     const formattedColumns = ref(null);
+    const rawTableData = ref([]);
+    watch(
+      () => props.columns,
+      async () => {
+        formattedColumns.value = null;
+        if (rawTableData.value.length > 0) {
+          await formattedTableData();
+          tableData.value = parseTableData(
+            rawTableData.value.map((item) => ({ ...item }))
+          );
+        }
+      },
+      { deep: true }
+    );
     function initDataSourceManager() {
       dataSourceManager.value = createDataSource({
         http: ctx.$http,
@@ -161,6 +197,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
       });
       if (dataSourceManager.value) {
         tableData.value = [];
+        rawTableData.value = [];
         if (props.disabledLoad) {
           tableData.value = [];
           call();
@@ -191,7 +228,10 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
         dataSourceManager.value.updatePagination(pageNo, props.pageSize);
         await dataSourceManager.value.fetch(searchData.value);
         const data = ((_a = dataSourceManager.value) == null ? void 0 : _a.getData().list) || [];
-        tableData.value.push(...parseTableData(data));
+        rawTableData.value.push(...data.map((item) => ({ ...item })));
+        tableData.value.push(
+          ...parseTableData(data.map((item) => ({ ...item })))
+        );
         if (tableData.value.length == 0 && isDesigner) {
           tableData.value = [{}];
         }
@@ -215,6 +255,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
         filters: JSON.stringify({ ...filter, dynamicFilterFieldName })
       };
       tableData.value = [];
+      rawTableData.value = [];
       finished.value = false;
       loading.value = true;
       pageNo = 1;
@@ -383,7 +424,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
           placeholder: __props.filterPlaceholder,
           filterMode: __props.filterMode,
           dataSources: __props.dataSources,
-          filterConfig: unref(quickFilterConfig),
+          filterConfig: quickFilterConfig.value,
           onFilterChange
         }, null, 8, ["placeholder", "filterMode", "dataSources", "filterConfig"])) : createCommentVNode("", true),
         createVNode(_component_van_list, {
@@ -407,12 +448,21 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
                 key: item.id,
                 swipeDelete: __props.swipeDelete
               }, {
-                default: withCtx(() => [
-                  createVNode(VueRender, {
-                    code: __props.vueTemplate,
-                    params: { data: item, eventHandler, dicHandler }
-                  }, null, 8, ["code", "params"])
-                ]),
+                default: withCtx(() => {
+                  var _a;
+                  return [
+                    ((_a = __props.cardConfig) == null ? void 0 : _a.templateMode) === "preset" ? (openBlock(), createBlock(CardLayoutRenderer, {
+                      key: 0,
+                      data: item,
+                      cardConfig: effectiveCardConfig.value,
+                      eventHandler
+                    }, null, 8, ["data", "cardConfig"])) : (openBlock(), createBlock(VueRender, {
+                      key: 1,
+                      code: __props.vueTemplate,
+                      params: { data: item, eventHandler, dicHandler }
+                    }, null, 8, ["code", "params"]))
+                  ];
+                }),
                 _: 2
               }, 1032, ["swipeDelete"]);
             }), 128))
@@ -423,7 +473,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
     };
   }
 });
-const _CardList = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-13759ee7"]]);
+const _CardList = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a0ad2a21"]]);
 export {
   _CardList as default
 };

package/es/packages/mobile/src/components/dataDisplay/cardList/index.mjs

@@ -1,5 +1,7 @@
 import _CardList from "./CardList.vue.mjs";
 import install from "../../../utils/install.mjs";
+import "vue";
+/* empty css                         */
 const MobileCardList = install.withInstall("MobileCardList", _CardList);
 export {
   MobileCardList,

package/es/packages/mobile/src/components/dataDisplay/cardList/layoutDefinitions.mjs

@@ -0,0 +1,77 @@
+const LAYOUT_DEFINITIONS = {
+  "title+list+tags": {
+    label: "标题+列表+标签",
+    description: "标题行 + 信息列表 + 底部标签云",
+    slots: [
+      { name: "title", type: "title", label: "标题" },
+      { name: "subtitle", type: "subtitle", label: "副标题" },
+      { name: "status", type: "status", label: "状态标签" },
+      { name: "info", type: "info", label: "信息项" },
+      { name: "tag", type: "tag", label: "标签" }
+    ]
+  },
+  "title+stats": {
+    label: "标题+统计",
+    description: "标题行 + 2×2统计卡片",
+    slots: [
+      { name: "title", type: "title", label: "标题" },
+      { name: "subtitle", type: "subtitle", label: "副标题" },
+      { name: "status", type: "status", label: "状态标签" },
+      { name: "stat", type: "stat", label: "统计项" }
+    ]
+  },
+  "simple+list": {
+    label: "简洁列表",
+    description: "标题 + 信息列表",
+    slots: [
+      { name: "title", type: "title", label: "标题" },
+      { name: "info", type: "info", label: "信息项" }
+    ]
+  }
+};
+const TAG_PRESET_COLORS = [
+  { key: "orange", label: "橙色 Orange", bg: "#fff7e6", color: "#fa8c16" },
+  { key: "orangeRed", label: "橙红 Orange-Red", bg: "#fff2e8", color: "#ff7d00" },
+  { key: "blue", label: "蓝色 Blue", bg: "#e6f7ff", color: "#1677ff" },
+  { key: "green", label: "绿色 Green", bg: "#f0fff4", color: "#00b42a" },
+  { key: "red", label: "红色 Red", bg: "#fff1f0", color: "#f53f3f" },
+  { key: "gray", label: "灰色 Gray", bg: "#f2f3f5", color: "#86909c" }
+];
+function getTagPresetColor(key) {
+  return TAG_PRESET_COLORS.find((c) => c.key === key) || null;
+}
+const STATUS_COLOR_MAP = {
+  橙色: "orange",
+  orange: "orange",
+  橙红: "orangeRed",
+  orangeRed: "orangeRed",
+  "orange-red": "orangeRed",
+  蓝色: "blue",
+  blue: "blue",
+  绿色: "green",
+  green: "green",
+  红色: "red",
+  red: "red",
+  灰色: "gray",
+  gray: "gray"
+};
+function getLayoutDef(layoutType) {
+  return LAYOUT_DEFINITIONS[layoutType] || null;
+}
+function createEmptySlotBindings(layoutType) {
+  const def = getLayoutDef(layoutType);
+  if (!def) return [];
+  return def.slots.map((s) => ({
+    slot: s.name,
+    field: "",
+    label: ""
+  }));
+}
+export {
+  LAYOUT_DEFINITIONS,
+  STATUS_COLOR_MAP,
+  TAG_PRESET_COLORS,
+  createEmptySlotBindings,
+  getLayoutDef,
+  getTagPresetColor
+};