star-horse-lowcode 2.7.65 → 2.7.66

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

@@ -1,207 +0,0 @@
-<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

@@ -1,66 +0,0 @@
-<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

@@ -1,65 +0,0 @@
-<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

@@ -1,104 +0,0 @@
-<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

@@ -1,195 +0,0 @@
-<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>