star-horse-lowcode 2.7.62 → 2.7.65

package/src/components/formcomp/items/dialog-input-item.vue

@@ -0,0 +1,207 @@
+<script setup lang="ts">
+import { nextTick, onMounted, PropType, ref, shallowRef } from "vue";
+import { warning } from "@/utils/message";
+import { FieldInfo, FieldMapping } from "@/components/types/PageFieldInfo";
+import { isJson } from "@/api/star_horse_utils";
+import {
+  allAction,
+  checkIsDisabled,
+  initCompCallEvent,
+} from "@/components/formcomp/utils/ItemRelationEventUtils";
+import { SearchFields } from "@/components/types";
+import { getDynamicEvents } from "@/api/system";
+
+const props = defineProps({
+  isDesign: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  showFormItem: {
+    type: Boolean,
+    default: false,
+  },
+  bareFlag: {
+    type: Boolean,
+    default: false,
+  },
+  isSearch: {
+    type: Boolean,
+    default: false,
+  },
+  field: {
+    type: Object as PropType<any>,
+    required: true,
+  },
+  parentField: {
+    type: Object as PropType<any>,
+  },
+  formInfo: {
+    type: Object as PropType<any>,
+  },
+});
+const emits = defineEmits(["selfFunc", "selectItem"]);
+const formData = defineModel("formData");
+const dialogInputTableRef = ref();
+let dialogInputVisible = shallowRef(false);
+const itemAction = (prep: any) => {
+  allAction(props, emits, formData, prep);
+};
+const selectItem = (row: any) => {
+  let data = "";
+  let needField = props.field.preps?.needField;
+  if (!row || !isJson(row)) {
+    let selectDatas = dialogInputTableRef.value.multipleSelection;
+    if (!selectDatas) {
+      warning("请选择数据");
+      return;
+    }
+    data = selectDatas[0];
+  } else {
+    data = row;
+  }
+  //如果没有指定属性，则默认取相同的属性
+  let name = props.field.fieldName;
+  if (!needField) {
+    formData.value[name] = data[name];
+  } else {
+    needField.forEach((item: FieldMapping) => {
+      if (needField.length == 1) {
+        formData.value[name] = data[item.sourceField];
+      } else {
+        formData.value[item.distField] = data[item.sourceField];
+      }
+    });
+  }
+  if (props.field.preps?.recall) {
+    props.field.preps?.["recall"](row);
+  }
+  closeAction();
+};
+const closeAction = () => {
+  dialogInputVisible.value = false;
+};
+const showVisible = () => {
+  dialogInputVisible.value = true;
+  nextTick(() => {
+    let fields = props.field.preps?.needField;
+    let name = props.field.fieldName;
+    let realName = name;
+    if (props.field.aliasName) {
+      realName = props.field?.aliasName;
+    }
+    if (fields) {
+      name = fields.map((item: FieldMapping) => item.sourceField)[0];
+    }
+    dialogInputTableRef.value?.setDataInfo(name, formData.value[realName]);
+  });
+};
+
+onMounted(async () => {
+  await nextTick();
+  let inputPreps = props.field?.preps;
+  if (!inputPreps) {
+    warning("属性" + props.field?.label + "需要配置params 信息");
+    return;
+  }
+  if (inputPreps.searchFieldList?.length === 0) {
+    let searchFieldList: Array<SearchFields> = [];
+    inputPreps.fieldList?.forEach((item: FieldInfo) => {
+      if (item.searchVisible) {
+        let temp: any = {
+          ...item,
+        };
+        if (item.prefix) {
+          temp["fieldName"] = item.prefix + "." + temp["fieldName"];
+        }
+        temp["defaultVisible"] = true;
+        if (item?.type == "input" && !item["matchType"]) {
+          temp["matchType"] = "lk";
+        }
+        searchFieldList.push(temp);
+      }
+    });
+    inputPreps.searchFieldList = { fieldList: searchFieldList };
+  }
+  initCompCallEvent(props, emits, formData);
+});
+</script>
+<template>
+  <star-horse-dialog
+    :title="field.label + '数据选择'"
+    :self-func="true"
+    :dialog-visible="dialogInputVisible"
+    @merge="selectItem"
+    @closeAction="closeAction"
+  >
+    <el-card class="inner_content">
+      <div class="search-content">
+        <div class="search_btn">
+          <star-horse-search-comp
+            @searchData="
+              (data: any) => dialogInputTableRef.createSearchParams(data)
+            "
+            :formData="field.preps?.['searchFieldList']"
+            :compUrl="field.preps?.['dataUrl']"
+          />
+        </div>
+      </div>
+      <star-horse-table-comp
+        :fieldList="{
+          cellEditable: false,
+          fieldList: field.preps?.['fieldList'],
+        }"
+
+        :primaryKey="field.preps?.['primaryKey']"
+        :compUrl="field.preps?.['dataUrl']"
+        ref="dialogInputTableRef"
+        :dialogInput="true"
+        height="400px"
+        :filterCondition="field.preps?.['filterCondition']"
+        :orderBy="field.preps?.['orderBy']"
+        @selectItem="selectItem"
+        :dataFormat="field.preps?.['dataFormat']"
+        :disableAction="true"
+      />
+    </el-card>
+  </star-horse-dialog>
+  <starhorse-form-item
+    :showFormItem="showFormItem"
+    :isDesign="isDesign"
+    :disabled="disabled"
+    :bareFlag="bareFlag"
+    :formItem="field"
+    :parentField="parentField"
+  >
+    <el-input
+      :disabled="checkIsDisabled(props)"
+      type="text"
+      v-bind="field.preps"
+      :fid="field.fieldName"
+      v-on="getDynamicEvents(props, itemAction)"
+      v-model="formData[field.fieldName]"
+    >
+      <template #append>
+        <el-button
+          icon="Search"
+          @click="showVisible"
+          :disabled="checkIsDisabled(props)"
+        />
+      </template>
+    </el-input>
+  </starhorse-form-item>
+</template>
+<style lang="scss" scoped>
+:deep(.el-input-group__append) {
+  padding: 0 20px !important;
+}
+
+.cell.el-tooltip {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>

package/src/components/formcomp/items/divider-item.vue

@@ -0,0 +1,66 @@
+<template>
+  <starhorse-form-item
+    :showFormItem="showFormItem"
+    :isDesign="isDesign"
+    :disabled="disabled"
+    :bareFlag="bareFlag"
+    :formItem="field"
+    :parentField="parentField"
+  >
+    <el-divider
+      :direction="field.preps?.direction || 'horizontal'"
+      v-on="getDynamicEvents(props, itemAction)"
+      :content-position="field.preps?.contentPosition || 'center'"
+    >
+      {{ field.preps?.content }}
+    </el-divider>
+  </starhorse-form-item>
+</template>
+<script setup lang="ts">
+import { onMounted, PropType } from "vue";
+import { allAction } from "@/components/formcomp/utils/ItemRelationEventUtils";
+import { getDynamicEvents } from "@/api/system";
+
+const props = defineProps({
+  isDesign: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  showFormItem: {
+    type: Boolean,
+    default: false,
+  },
+  bareFlag: {
+    type: Boolean,
+    default: false,
+  },
+  isSearch: {
+    type: Boolean,
+    default: false,
+  },
+  field: {
+    type: Object as PropType<any>,
+    required: true,
+  },
+  parentField: {
+    type: Object as PropType<any>,
+  },
+  formInfo: {
+    type: Object as PropType<any>,
+  },
+});
+const emits = defineEmits(["selfFunc", "selectItem"]);
+const formData = defineModel("formData");
+
+const itemAction = (prep: any) => {
+  allAction(props, emits, formData, prep);
+};
+onMounted(() => {
+  formData.value[props.field.fieldName] = props.field.preps?.content;
+});
+</script>
+<style scoped></style>

package/src/components/formcomp/items/html-item.vue

@@ -0,0 +1,65 @@
+<template>
+  <starhorse-form-item
+    :showFormItem="showFormItem"
+    :isDesign="isDesign"
+    :disabled="disabled"
+    :bareFlag="bareFlag"
+    :formItem="field"
+    :parentField="parentField"
+  >
+    <div
+      class="user_html"
+      v-html="formData[field.fieldName] || field.preps?.content"
+    />
+  </starhorse-form-item>
+</template>
+<script setup lang="ts">
+import { onMounted, PropType } from "vue";
+
+const props = defineProps({
+  isDesign: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  showFormItem: {
+    type: Boolean,
+    default: false,
+  },
+  bareFlag: {
+    type: Boolean,
+    default: false,
+  },
+  isSearch: {
+    type: Boolean,
+    default: false,
+  },
+  field: {
+    type: Object as PropType<any>,
+    required: true,
+  },
+  parentField: {
+    type: Object as PropType<any>,
+  },
+  formInfo: {
+    type: Object as PropType<any>,
+  },
+});
+const emits = defineEmits(["selfFunc", "selectItem"]);
+const formData = defineModel("formData");
+
+onMounted(() => {
+  formData.value[props.field.fieldName] =
+    formData.value[props.field.fieldName] || props.field.preps?.content;
+});
+</script>
+<style lang="scss" scoped>
+.user_html {
+  width: 100%;
+  min-height: 30px;
+  height: auto;
+}
+</style>

package/src/components/formcomp/items/htmleditor-item.vue

@@ -0,0 +1,104 @@
+<template>
+  <starhorse-form-item
+    :showFormItem="showFormItem"
+    :isDesign="isDesign"
+    :disabled="disabled"
+    :bareFlag="bareFlag"
+    :formItem="field"
+    :parentField="parentField"
+  >
+    <div style="border: 1px solid #ccc">
+      <QuillEditor
+        :style="{
+          height: field.preps?.height || '300px',
+          'overflow-y': 'hidden',
+        }"
+        :modules="modules"
+        v-on="getDynamicEvents(props, itemAction)"
+        v-model="formData[field.fieldName]"
+        theme="snow"
+        toolbar="full"
+        :fid="field.fieldName"
+        @onCreated="handleCreated"
+      />
+    </div>
+  </starhorse-form-item>
+</template>
+<script setup lang="ts">
+import { onMounted, PropType, shallowRef } from "vue";
+import { QuillEditor } from "@vueup/vue-quill";
+import "@vueup/vue-quill/dist/vue-quill.snow.css";
+import { allAction } from "@/components/formcomp/utils/ItemRelationEventUtils";
+import { postRequest } from "@/api/star_horse_apis";
+import ImageUploader from "quill-image-uploader";
+import { getDynamicEvents } from "@/api/system";
+
+const props = defineProps({
+  isDesign: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  showFormItem: {
+    type: Boolean,
+    default: false,
+  },
+  bareFlag: {
+    type: Boolean,
+    default: false,
+  },
+  isSearch: {
+    type: Boolean,
+    default: false,
+  },
+  field: {
+    type: Object as PropType<any>,
+    required: true,
+  },
+  parentField: {
+    type: Object as PropType<any>,
+  },
+  formInfo: {
+    type: Object as PropType<any>,
+  },
+});
+const emits = defineEmits(["selfFunc", "selectItem"]);
+const formData = defineModel("formData");
+
+const editorRef = shallowRef(); // 编辑器实例，必须用 shallowRef
+
+const itemAction = (prep: any) => {
+  allAction(props, emits, formData, prep);
+};
+
+const handleCreated = (editor: any) => {
+  editorRef.value = editor; // 记录 editor 实例，重要！
+};
+const modules: any = {
+  name: "imageUploader",
+  module: ImageUploader,
+  options: {
+    upload: (file) => {
+      return new Promise((resolve, reject) => {
+        const formData = new FormData();
+        formData.append("image", file);
+
+        postRequest("/upload-image", formData)
+          .then((res) => {
+            console.log(res);
+            resolve(res.data.url);
+          })
+          .catch((err) => {
+            reject("Upload failed");
+            console.error("Error:", err);
+          });
+      });
+    },
+  },
+};
+onMounted(() => {});
+</script>
+<style scoped></style>

package/src/components/formcomp/items/icon-item.vue

@@ -0,0 +1,195 @@
+<template>
+  <starhorse-form-item
+    :showFormItem="showFormItem"
+    :isDesign="isDesign"
+    :disabled="disabled"
+    :bareFlag="bareFlag"
+    :formItem="field"
+    :parentField="parentField"
+  >
+    <el-popover
+      :popper-style="{ width: 'inherit !important' }"
+      ref="popoverRef"
+      :placement="field.preps?.placement ?? 'bottom-start'"
+      :disabled="checkIsDisabled(props) || field.preps?.listView"
+      trigger="click"
+    >
+      <template #reference>
+        <el-avatar
+          v-if="iconType == 'system'"
+          fit="fill"
+          shape="square"
+          :style="{
+            'font-size': field.preps?.listView ? '22px' : '24px',
+            background: field.preps?.listView
+              ? 'unset'
+              : 'var(--el-avatar-bg-color)',
+          }"
+          :icon="formData[field.fieldName]"
+        />
+        <star-horse-icon
+          :icon-class="formData[field.fieldName]"
+          v-else
+          size="30px"
+          style="
+            color: var(--star-horse-style);
+            border-radius: 3px;
+            border: 1px solid var(--star-horse-light-gray);
+          "
+          cursor="pointer"
+        />
+      </template>
+      <div class="icon-items">
+        <div class="search-box">
+          <el-input
+            v-model="searchName"
+            @keydown.enter="dataSearch"
+            clearable
+            placeholder="请输入要搜索的图标"
+          >
+            <template #prefix>
+              <star-horse-icon icon-class="search" @click="dataSearch" />
+            </template>
+          </el-input>
+        </div>
+        <ul class="system-icon">
+          <li
+            v-for="sdata in iconList"
+            @click="assignIcon(sdata.value)"
+            :title="sdata.name"
+            :key="sdata.value"
+            :class="{ 'icon-active': sdata.value == formData[field.fieldName] }"
+          >
+            <el-icon
+              class="star-icon"
+              style="font-size: 35px; color: var(--star-horse-style)"
+              v-if="iconType == 'system'"
+            >
+              <component :is="sdata.value" :key="sdata.value + '_comp'" />
+            </el-icon>
+            <star-horse-icon
+              :icon-class="sdata.value"
+              v-else
+              size="30px"
+              width="30px"
+              height="30px"
+              style="color: var(--star-horse-style)"
+              cursor="pointer"
+            />
+          </li>
+        </ul>
+      </div>
+    </el-popover>
+  </starhorse-form-item>
+</template>
+<script setup lang="ts">
+import { onMounted, PropType, ref, shallowRef, unref, watch } from "vue";
+import {
+  checkIsDisabled,
+  initCompCallEvent,
+} from "@/components/formcomp/utils/ItemRelationEventUtils";
+import StarHorseIcon from "@/components/comp/StarHorseIcon.vue";
+import StarhorseFormItem from "@/components/formcomp/items/starhorse-form-item.vue";
+import { compDynamicData } from "@/api/star_horse_utils";
+
+const props = defineProps({
+  isDesign: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  showFormItem: {
+    type: Boolean,
+    default: false,
+  },
+  bareFlag: {
+    type: Boolean,
+    default: false,
+  },
+  isSearch: {
+    type: Boolean,
+    default: false,
+  },
+  field: {
+    type: Object as PropType<any>,
+    required: true,
+  },
+  parentField: {
+    type: Object as PropType<any>,
+  },
+  formInfo: {
+    type: Object as PropType<any>,
+  },
+});
+const emits = defineEmits(["selfFunc", "selectItem"]);
+const formData = defineModel("formData");
+
+let searchName = ref<string>("");
+let iconList = ref<any>([]);
+let allIconList = ref<any>([]);
+let iconType = ref<string>("system");
+const popoverRef = shallowRef();
+const assignIcon = (iconName: string) => {
+  formData.value[props.field.fieldName] = iconName;
+  unref(popoverRef).popperRef?.delayHide?.();
+  itemAction("blur");
+};
+const dataSearch = () => {
+  if (!searchName.value) {
+    iconList.value = allIconList.value;
+  } else {
+    iconList.value = allIconList.value.filter((item: any) => {
+      return (
+        item.name.toLowerCase().indexOf(searchName.value.toLowerCase()) > -1
+      );
+    });
+  }
+};
+const itemAction = (prep: any) => {
+  if (Object.keys(props.field.actions ?? {}).includes("change")) {
+    emits("selfFunc", prep, formData.value);
+  }
+};
+const init = async () => {
+  const dataa = await compDynamicData(props.field);
+  if (dataa?.length) {
+    allIconList.value = dataa;
+  }
+  iconType.value = props.field.preps?.iconType ?? "system";
+  iconList.value = allIconList.value;
+};
+onMounted(() => {
+  init();
+  initCompCallEvent(props, emits, formData);
+});
+watch(
+  () => formData.value[props.field.fieldName],
+  (newVal, oldVal) => {
+    itemAction("change");
+  },
+);
+</script>
+<style scoped>
+.icon-items {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .system-icon {
+    margin-top: 5px;
+    justify-content: center;
+
+    li {
+      margin: 1px;
+    }
+  }
+}
+
+.search-box {
+  width: 90%;
+  margin: 0 auto;
+}
+</style>