@fecp/designer 5.6.27 → 5.6.29

package/lib/packages/mobile/src/components/dataDisplay/cardList/CardLayoutRenderer.vue.js

@@ -0,0 +1,246 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const Vue = require("vue");
+const layoutDefinitions = require("./layoutDefinitions.js");
+;/* empty css                         */
+const _pluginVue_exportHelper = require("../../../../../../_virtual/_plugin-vue_export-helper.js");
+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 = Vue.computed(() => {
+      var _a;
+      return ((_a = props.cardConfig) == null ? void 0 : _a.layoutType) || "";
+    });
+    const slotBindings = Vue.computed(() => {
+      var _a;
+      return ((_a = props.cardConfig) == null ? void 0 : _a.slotBindings) || [];
+    });
+    const layoutDef = Vue.computed(() => layoutDefinitions.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 = Vue.computed(
+      () => slotBindings.value.filter((b) => b && b.field).map((b) => ({ ...b, type: resolveSlotType(b.slot) }))
+    );
+    const titleBinding = Vue.computed(
+      () => typedBindings.value.find((b) => b.type === "title")
+    );
+    const subtitleBinding = Vue.computed(
+      () => typedBindings.value.find((b) => b.type === "subtitle")
+    );
+    const statusBinding = Vue.computed(
+      () => typedBindings.value.find((b) => b.type === "status")
+    );
+    const infoSlots = Vue.computed(
+      () => typedBindings.value.filter((b) => b.type === "info")
+    );
+    const tagSlots = Vue.computed(
+      () => typedBindings.value.filter((b) => b.type === "tag")
+    );
+    const statSlots = Vue.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 = Vue.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 = layoutDefinitions.TAG_PRESET_COLORS.find((c) => c.key === match.colorKey);
+          if (preset) return { backgroundColor: preset.bg, color: preset.color };
+        }
+      }
+      const defaultKey = layoutDefinitions.STATUS_COLOR_MAP[val];
+      if (defaultKey) {
+        const preset = layoutDefinitions.TAG_PRESET_COLORS.find((c) => c.key === defaultKey);
+        if (preset) return { backgroundColor: preset.bg, color: preset.color };
+      }
+      const grayPreset = layoutDefinitions.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 = layoutDefinitions.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 Vue.openBlock(), Vue.createElementBlock("div", {
+        class: "card-layout-renderer",
+        onClick: handleClick
+      }, [
+        layoutType.value === "title+list+tags" ? (Vue.openBlock(), Vue.createElementBlock(Vue.Fragment, { key: 0 }, [
+          titleBinding.value || subtitleBinding.value || statusBinding.value ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [
+            Vue.createElementVNode("div", _hoisted_2, [
+              titleBinding.value ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_3, Vue.toDisplayString(valOf(titleBinding.value)), 1)) : Vue.createCommentVNode("", true),
+              subtitleBinding.value ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_4, Vue.toDisplayString(valOf(subtitleBinding.value)), 1)) : Vue.createCommentVNode("", true)
+            ]),
+            statusBinding.value ? (Vue.openBlock(), Vue.createElementBlock("div", {
+              key: 0,
+              class: "rel-tag",
+              style: Vue.normalizeStyle(statusStyle.value)
+            }, Vue.toDisplayString(valOf(statusBinding.value)), 5)) : Vue.createCommentVNode("", true)
+          ])) : Vue.createCommentVNode("", true),
+          infoSlots.value.length ? (Vue.openBlock(), Vue.createElementBlock("ul", _hoisted_5, [
+            (Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(infoSlots.value, (slot, i) => {
+              return Vue.openBlock(), Vue.createElementBlock("li", {
+                class: "info-item",
+                key: i
+              }, [
+                Vue.createElementVNode("span", _hoisted_6, Vue.toDisplayString(labelOf(slot)), 1),
+                Vue.createElementVNode("span", _hoisted_7, Vue.toDisplayString(valOf(slot)), 1)
+              ]);
+            }), 128))
+          ])) : Vue.createCommentVNode("", true),
+          tagSlots.value.length ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_8, [
+            (Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(tagSlots.value, (slot, i) => {
+              return Vue.openBlock(), Vue.createElementBlock("div", {
+                class: "tag-chip",
+                style: Vue.normalizeStyle(tagStyle(slot)),
+                key: i
+              }, [
+                Vue.createElementVNode("span", _hoisted_9, Vue.toDisplayString(labelOf(slot)), 1),
+                Vue.createElementVNode("span", _hoisted_10, Vue.toDisplayString(valOf(slot)), 1)
+              ], 4);
+            }), 128))
+          ])) : Vue.createCommentVNode("", true)
+        ], 64)) : layoutType.value === "title+stats" ? (Vue.openBlock(), Vue.createElementBlock(Vue.Fragment, { key: 1 }, [
+          titleBinding.value || subtitleBinding.value || statusBinding.value ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_11, [
+            Vue.createElementVNode("div", _hoisted_12, [
+              titleBinding.value ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_13, Vue.toDisplayString(valOf(titleBinding.value)), 1)) : Vue.createCommentVNode("", true),
+              subtitleBinding.value ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_14, Vue.toDisplayString(valOf(subtitleBinding.value)), 1)) : Vue.createCommentVNode("", true)
+            ]),
+            statusBinding.value ? (Vue.openBlock(), Vue.createElementBlock("div", {
+              key: 0,
+              class: "rel-tag",
+              style: Vue.normalizeStyle(statusStyle.value)
+            }, Vue.toDisplayString(valOf(statusBinding.value)), 5)) : Vue.createCommentVNode("", true)
+          ])) : Vue.createCommentVNode("", true),
+          statSlots.value.length ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_15, [
+            (Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(statSlots.value, (slot, i) => {
+              return Vue.openBlock(), Vue.createElementBlock("div", {
+                class: "stat-card",
+                key: i
+              }, [
+                Vue.createElementVNode("div", _hoisted_16, Vue.toDisplayString(valOf(slot)), 1),
+                Vue.createElementVNode("div", _hoisted_17, Vue.toDisplayString(labelOf(slot)), 1)
+              ]);
+            }), 128))
+          ])) : Vue.createCommentVNode("", true)
+        ], 64)) : layoutType.value === "simple+list" ? (Vue.openBlock(), Vue.createElementBlock(Vue.Fragment, { key: 2 }, [
+          titleBinding.value ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_18, Vue.toDisplayString(valOf(titleBinding.value)), 1)) : Vue.createCommentVNode("", true),
+          infoSlots.value.length ? (Vue.openBlock(), Vue.createElementBlock("ul", _hoisted_19, [
+            (Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(infoSlots.value, (slot, i) => {
+              return Vue.openBlock(), Vue.createElementBlock("li", {
+                class: "info-item",
+                key: i
+              }, [
+                Vue.createElementVNode("span", _hoisted_20, Vue.toDisplayString(labelOf(slot)), 1),
+                Vue.createElementVNode("span", _hoisted_21, Vue.toDisplayString(valOf(slot)), 1)
+              ]);
+            }), 128))
+          ])) : Vue.createCommentVNode("", true)
+        ], 64)) : Vue.createCommentVNode("", true)
+      ]);
+    };
+  }
+};
+const CardLayoutRenderer = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-27fb6883"]]);
+exports.default = CardLayoutRenderer;

package/lib/packages/mobile/src/components/dataDisplay/cardList/CardList.vue.js

@@ -6,6 +6,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const Vue = require("vue");
 const datasource = require("../../../utils/datasource.js");
 const VueRender = require("../../../utils/idea/VueRender.vue.js");
+const CardLayoutRenderer = require("./CardLayoutRenderer.vue.js");
 const formatterUtil = require("../../../utils/formatterUtil.js");
 ;/* empty css               */
 const _pluginVue_exportHelper = require("../../../../../../_virtual/_plugin-vue_export-helper.js");
@@ -67,6 +68,10 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
       type: String,
       default: ""
     },
+    cardConfig: {
+      type: Object,
+      default: () => ({})
+    },
     enableFilter: {
       type: Boolean,
       default: false
@@ -102,6 +107,23 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
     const formData = Vue.inject("formData");
     const currentInstance = Vue.getCurrentInstance();
     const ctx = currentInstance.proxy;
+    const effectiveCardConfig = Vue.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 = Vue.ref();
     let isDesigner = false;
     Vue.onMounted(async () => {
@@ -142,6 +164,20 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
     let pageNo = 1;
     const dataSourceManager = Vue.ref();
     const formattedColumns = Vue.ref(null);
+    const rawTableData = Vue.ref([]);
+    Vue.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 = datasource.createDataSource({
         http: ctx.$http,
@@ -163,6 +199,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
       });
       if (dataSourceManager.value) {
         tableData.value = [];
+        rawTableData.value = [];
         if (props.disabledLoad) {
           tableData.value = [];
           call();
@@ -193,7 +230,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 = [{}];
         }
@@ -217,6 +257,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
         filters: JSON.stringify({ ...filter, dynamicFilterFieldName })
       };
       tableData.value = [];
+      rawTableData.value = [];
       finished.value = false;
       loading.value = true;
       pageNo = 1;
@@ -385,7 +426,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
           placeholder: __props.filterPlaceholder,
           filterMode: __props.filterMode,
           dataSources: __props.dataSources,
-          filterConfig: Vue.unref(quickFilterConfig),
+          filterConfig: quickFilterConfig.value,
           onFilterChange
         }, null, 8, ["placeholder", "filterMode", "dataSources", "filterConfig"])) : Vue.createCommentVNode("", true),
         Vue.createVNode(_component_van_list, {
@@ -409,12 +450,21 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
                 key: item.id,
                 swipeDelete: __props.swipeDelete
               }, {
-                default: Vue.withCtx(() => [
-                  Vue.createVNode(VueRender.default, {
-                    code: __props.vueTemplate,
-                    params: { data: item, eventHandler, dicHandler }
-                  }, null, 8, ["code", "params"])
-                ]),
+                default: Vue.withCtx(() => {
+                  var _a;
+                  return [
+                    ((_a = __props.cardConfig) == null ? void 0 : _a.templateMode) === "preset" ? (Vue.openBlock(), Vue.createBlock(CardLayoutRenderer.default, {
+                      key: 0,
+                      data: item,
+                      cardConfig: effectiveCardConfig.value,
+                      eventHandler
+                    }, null, 8, ["data", "cardConfig"])) : (Vue.openBlock(), Vue.createBlock(VueRender.default, {
+                      key: 1,
+                      code: __props.vueTemplate,
+                      params: { data: item, eventHandler, dicHandler }
+                    }, null, 8, ["code", "params"]))
+                  ];
+                }),
                 _: 2
               }, 1032, ["swipeDelete"]);
             }), 128))
@@ -425,5 +475,5 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
     };
   }
 });
-const _CardList = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-13759ee7"]]);
+const _CardList = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-a0ad2a21"]]);
 exports.default = _CardList;

package/lib/packages/mobile/src/components/dataDisplay/cardList/index.js

@@ -2,6 +2,8 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const CardList = require("./CardList.vue.js");
 const install = require("../../../utils/install.js");
+require("vue");
+;/* empty css                         */
 const MobileCardList = install.default.withInstall("MobileCardList", CardList.default);
 exports.MobileCardList = MobileCardList;
 exports.default = MobileCardList;

package/lib/packages/mobile/src/components/dataDisplay/cardList/layoutDefinitions.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+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: ""
+  }));
+}
+exports.LAYOUT_DEFINITIONS = LAYOUT_DEFINITIONS;
+exports.STATUS_COLOR_MAP = STATUS_COLOR_MAP;
+exports.TAG_PRESET_COLORS = TAG_PRESET_COLORS;
+exports.createEmptySlotBindings = createEmptySlotBindings;
+exports.getLayoutDef = getLayoutDef;
+exports.getTagPresetColor = getTagPresetColor;