star-horse-lowcode 2.7.63 → 2.7.65

package/src/components/formcomp/container/card-container.vue

@@ -0,0 +1,170 @@
+<script setup lang="ts" name="card-container">
+import { computed, onMounted, PropType, ref } from "vue";
+import { useDesignFormStore } from "@/store/DesignForm";
+import piniaInstance from "@/store/index";
+import { itemCheck, uuid } from "@/api/system";
+
+const props = defineProps({
+  parentField: { type: String },
+  isDesign: { type: Boolean, default: false },
+  showFormItem: { type: Boolean, default: false },
+  disabled: { type: Object as PropType<Boolean | String> },
+  formInfo: { type: Object as PropType<any> },
+  field: { type: Object as PropType<any> },
+});
+let designForm = useDesignFormStore(piniaInstance);
+const isDragging = computed(() => designForm.isDragging);
+const formData = defineModel("formData");
+let containerType: Array<string> = [
+  "tab",
+  "box",
+  "table",
+  "card",
+  "dytable",
+  "collapse",
+];
+
+const isContainer = (data: any) => {
+  return containerType.includes(data.itemType);
+};
+/**
+ * 如果没有items，动态添加
+ * @param adata
+ * @param type
+ */
+const checkItem = (adata: any, type: string) => {
+  if (type == "header") {
+    if (!adata["headerFieldList"]) {
+      adata["headerFieldList"] = [];
+    }
+  } else {
+    if (!adata["items"]) {
+      adata["items"] = [];
+    }
+  }
+};
+const onDragAdd = (evt: Event | any, dataList: any) => {
+  console.log(evt, dataList);
+  let newIndex = evt.newIndex;
+  if (newIndex != null && newIndex != "undefined") {
+    let dataInfo = dataList[newIndex];
+    designForm.selectItem(dataInfo, dataInfo.itemType, "");
+  }
+};
+const activeTabName = ref();
+onMounted(() => {
+  if (!props.field["preps"]["elements"]) {
+    props.field["preps"]["elements"] = [
+      {
+        label: "Card",
+        tabName: "card",
+        objectName: "card",
+        subFormFlag: "Y",
+        headerFieldList: [],
+        items: [],
+      },
+    ];
+    props.field["stretch"] = "N";
+  }
+  activeTabName.value = 0;
+});
+</script>
+<template>
+  <group-box-container
+    class="star-horse-form-container"
+    :showFormItem="showFormItem"
+    :isDesign="isDesign"
+    :disabled="disabled"
+    :parentField="parentField"
+    :form-item="field"
+  >
+    <el-card
+      class="card-container"
+      :shadow="field.preps['shadow']"
+      v-for="adata in field['preps']['elements']"
+    >
+      <template #header>
+        <div class="card-header flex items-center justify-between">
+          <div class="w-[60%]">
+            {{ adata.title || adata.tabName }}
+            <help v-if="adata.helpMsg" :message="adata.helpMsg" />
+          </div>
+          <div
+            class="flex-1 min-h-[40px]"
+            :class="{ 'dragging-area': isDragging }"
+          >
+            <draggable
+              @add="(evt: Event) => onDragAdd(evt, adata['headerFieldList'])"
+              @dragover="checkItem(adata, 'header')"
+              class="card-design"
+              group="starHorseGroup"
+              animation="100"
+              :item-key="uuid()"
+              ghostClass="ghost"
+              v-model="adata['headerFieldList']"
+            >
+              <template #item="{ element: header }">
+                <div
+                  class="comp-item"
+                  :style="{ marginTop: isContainer(header) ? '25px' : '10px' }"
+                >
+                  <component
+                    :key="header.id"
+                    :field="header"
+                    :isDesign="isDesign"
+                    :showFormItem="showFormItem"
+                    :disabled="disabled"
+                    :formInfo="formInfo"
+                    :is="itemCheck(header)"
+                    :parentField="field"
+                    v-model:formData="formData"
+                  />
+                </div>
+              </template>
+            </draggable>
+          </div>
+        </div>
+      </template>
+
+      <el-scrollbar
+        height="100%"
+        class="min-h-20"
+        :class="{ 'dragging-area': isDragging }"
+      >
+        <draggable
+          @add="(evt: Event) => onDragAdd(evt, adata['items'])"
+          @dragover="checkItem(adata, 'body')"
+          class="card-design"
+          group="starHorseGroup"
+          animation="100"
+          :item-key="uuid()"
+          ghostClass="ghost"
+          v-model="adata['items']"
+        >
+          <template #item="{ element: item }">
+            <div class="comp-item">
+              <component
+                :key="item.id"
+                :field="item"
+                :isDesign="isDesign"
+                :disabled="disabled"
+                :showFormItem="showFormItem"
+                :formInfo="formInfo"
+                :is="itemCheck(item)"
+                :parentField="field"
+                v-model:formData="formData"
+              />
+            </div>
+          </template>
+        </draggable>
+      </el-scrollbar>
+    </el-card>
+  </group-box-container>
+</template>
+<style lang="scss" scoped>
+.card-design {
+  height: 100%;
+  min-height: 200px;
+  overflow-y: auto;
+}
+</style>

package/src/components/formcomp/container/collapse-container.vue

@@ -0,0 +1,133 @@
+<script setup lang="ts" name="collapse-container">
+import { computed, onMounted, PropType, ref, watch } from "vue";
+import { useDesignFormStore } from "@/store/DesignForm";
+import piniaInstance from "@/store/index";
+import { itemCheck, uuid } from "@/api/system";
+
+const props = defineProps({
+  parentField: { type: String },
+  isDesign: { type: Boolean, default: false },
+  showFormItem: { type: Boolean, default: false },
+  disabled: { type: Object as PropType<Boolean | String> },
+  formInfo: { type: Object as PropType<any> },
+  field: { type: Object as PropType<any> },
+});
+let designForm = useDesignFormStore(piniaInstance);
+const isDragging = computed(() => designForm.isDragging);
+const formData = defineModel("formData");
+/**
+ * 如果没有items，动态添加
+ * @param adata
+ */
+const checkItem = (adata: any) => {
+  if (!adata["items"]) {
+    adata["items"] = [];
+  }
+};
+const onDragAdd = (evt: Event | any, dataList: any) => {
+  let newIndex = evt.newIndex;
+  if (newIndex != null && newIndex != "undefined") {
+    let dataInfo = dataList[newIndex];
+    designForm.selectItem(dataInfo, dataInfo.itemType, "");
+  }
+};
+const activeTabName = ref();
+onMounted(() => {
+  if (!props.field["preps"]["elements"]) {
+    props.field["preps"]["elements"] = [
+      {
+        label: "Collapse1",
+        tabName: "collapse1",
+        objectName: "collapse1",
+        subFormFlag: "Y",
+        items: [],
+      },
+      {
+        label: "Collapse2",
+        tabName: "collapse2",
+        objectName: "collapse2",
+        subFormFlag: "Y",
+        items: [],
+      },
+    ];
+  }
+  activeTabName.value = props.field["preps"]["elements"][0].tabName;
+});
+watch(
+  () => activeTabName.value,
+  (val) => {
+    props.field["activeItemName"] = val;
+  },
+  { immediate: true, deep: true },
+);
+</script>
+<template>
+  <group-box-container
+    class="star-horse-form-container"
+    :showFormItem="showFormItem"
+    :isDesign="isDesign"
+    :disabled="disabled"
+    :parentField="parentField"
+    :form-item="field"
+  >
+    <el-collapse
+      v-model="activeTabName"
+      class="collapse-container"
+      :accordion="field.preps['accordion']"
+    >
+      <el-collapse-item
+        v-for="adata in field['preps']['elements']"
+        :name="adata.tabName"
+      >
+        <template #title>
+          <div class="collapse-item-title title">
+            <div>{{ adata.label || adata.objectName }}</div>
+          </div>
+        </template>
+        <el-scrollbar height="100%" :class="{ 'dragging-area': isDragging }">
+          <draggable
+            @add="(evt: Event) => onDragAdd(evt, adata['items'])"
+            @dragover="checkItem(adata)"
+            class="card-design"
+            group="starHorseGroup"
+            animation="100"
+            :item-key="uuid()"
+            ghostClass="ghost"
+            :list="adata['items']"
+          >
+            <template #item="{ element: data }">
+              <div class="comp-item">
+                <component
+                  :key="data.id"
+                  :field="data"
+                  :isDesign="isDesign"
+                  :disabled="disabled"
+                  :showFormItem="showFormItem"
+                  :formInfo="formInfo"
+                  :is="itemCheck(data)"
+                  :parentField="field"
+                  v-model:formData="formData"
+                />
+              </div>
+            </template>
+          </draggable>
+        </el-scrollbar>
+      </el-collapse-item>
+    </el-collapse>
+  </group-box-container>
+</template>
+<style lang="scss" scoped>
+:deep(.el-card) {
+  margin-top: 10px;
+}
+
+:deep(.el-card__body) {
+  margin-top: 5px;
+}
+
+.card-design {
+  height: 100%;
+  min-height: 200px;
+  overflow-y: auto;
+}
+</style>