star-horse-lowcode 2.7.63 → 2.7.65

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

@@ -0,0 +1,247 @@
+<template>
+  <starhorse-form-item
+    :showFormItem="showFormItem"
+    :isDesign="isDesign"
+    :disabled="disabled"
+    :bareFlag="bareFlag"
+    :formItem="field"
+    :parentField="parentField"
+  >
+    <el-input
+      v-if="field.preps?.assignType == 'url'"
+      :placeholder="field.preps?.placeholder || ''"
+      v-model="formData[field.fieldName]"
+    >
+      <template #append>
+        <el-upload
+          :auto-upload="true"
+          :on-change="
+            (uploadFile: any, uploadFiles: any) =>
+              selfAction('change', uploadFile, uploadFiles)
+          "
+          :on-error="
+            (error: any, uploadFile: any, uploadFiles: any) =>
+              selfAction('error', uploadFile, uploadFiles, error)
+          "
+          :on-exceed="
+            (files: any, uploadFiles: any) =>
+              selfAction('exceed', files, uploadFiles)
+          "
+          :on-preview="(uploadFile: any) => selfAction('preview', uploadFile)"
+          :on-progress="
+            (evt: any, uploadFile: any, uploadFiles: any) =>
+              selfAction('progress', uploadFile, uploadFiles, evt)
+          "
+          :on-remove="
+            (uploadFile: any, uploadFiles: any) =>
+              selfAction('remove', uploadFile, uploadFiles)
+          "
+          :on-success="
+            (response: any, uploadFile: any, uploadFiles: any) =>
+              selfAction('success', uploadFile, uploadFiles, response)
+          "
+          :show-file-list="false"
+          accept=".jpg,.jpeg,.png,.gif,.bmp,.webp"
+          :action="field.action || defaultAction"
+          :headers="{ token: getToken() }"
+          class="upload"
+          name="file"
+        >
+          <el-tooltip content="上传图片">
+            <star-horse-icon
+              icon-class="upload"
+              color="var(--star-horse-style)"
+            />
+          </el-tooltip>
+        </el-upload>
+      </template>
+    </el-input>
+    <div class="image-area" v-else>
+      <el-image
+        :style="{
+          width: formData[field.fieldName]
+            ? field.preps?.width || '100px'
+            : '100%',
+          height: formData[field.fieldName]
+            ? field.preps?.height || '100px'
+            : '100%',
+        }"
+        :zoom-rate="field.preps?.zoomRate || 1.2"
+        :max-scale="field.preps?.maxScale || 2"
+        :min-scale="field.preps?.minScale || 0.2"
+        :preview-src-list="field.preps?.previewSrcList || defaultViewList"
+        :initial-index="field.preps?.initialIndex || 5"
+        :fit="field.preps?.fit || 'contain'"
+        :fid="field.fieldName"
+        :src="formData[field.fieldName] || ''"
+      >
+        <template #error>
+          <el-upload
+            :auto-upload="true"
+            :on-change="
+              (uploadFile: any, uploadFiles: any) =>
+                selfAction('change', uploadFile, uploadFiles)
+            "
+            :on-error="
+              (error: any, uploadFile: any, uploadFiles: any) =>
+                selfAction('error', uploadFile, uploadFiles, error)
+            "
+            :on-exceed="
+              (files: any, uploadFiles: any) =>
+                selfAction('exceed', files, uploadFiles)
+            "
+            :on-preview="(uploadFile: any) => selfAction('preview', uploadFile)"
+            :on-progress="
+              (evt: any, uploadFile: any, uploadFiles: any) =>
+                selfAction('progress', uploadFile, uploadFiles, evt)
+            "
+            :on-remove="
+              (uploadFile: any, uploadFiles: any) =>
+                selfAction('remove', uploadFile, uploadFiles)
+            "
+            :on-success="
+              (response: any, uploadFile: any, uploadFiles: any) =>
+                selfAction('success', uploadFile, uploadFiles, response)
+            "
+            :show-file-list="false"
+            accept=".jpg,.jpeg,.png,.gif,.bmp,.webp"
+            :action="field.preps['action'] || defaultAction"
+            :headers="{ token: getToken() }"
+            class="upload"
+            name="file"
+          >
+            <el-button type="text" text size="small">
+              <el-tooltip content="上传图片">
+                <star-horse-icon icon-class="upload" />
+                上传图片
+              </el-tooltip>
+            </el-button>
+          </el-upload>
+        </template>
+        <template #placeholder>
+          <div class="image-slot">
+            <el-icon>
+              <icon-picture />
+            </el-icon>
+          </div>
+        </template>
+      </el-image>
+      <div class="image-remove" v-if="formData[field.fieldName] && isDesign">
+        <el-tooltip content="删除图片">
+          <el-button title="" size="small" type="text" @click="removeImage">
+            <star-horse-icon
+              icon-class="delete"
+              color="var(--el-color-danger)"
+              cursor="pointer"
+            />
+          </el-button>
+        </el-tooltip>
+      </div>
+    </div>
+  </starhorse-form-item>
+</template>
+<script setup lang="ts">
+import { onMounted, PropType, shallowRef } from "vue";
+import { initCompCallEvent } from "@/components/formcomp/utils/ItemRelationEventUtils";
+import { getToken } from "@/utils/auth";
+
+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 defaultAction = "/system-config/annex/upload/common";
+let defaultViewList = shallowRef([]);
+
+const removeImage = () => {
+  formData.value[props.field.fieldName] = "";
+  defaultViewList.value = [];
+};
+const selfAction = (
+  prep: any,
+  uploadFile: any,
+  uploadFiles: any = [],
+  param: any = {},
+) => {
+  if (prep == "success") {
+    let result = param.data;
+    let path = (props.field.preps["context"] || "/system-config") + result.path;
+    formData.value[props.field.fieldName] = path;
+    defaultViewList.value.push(path);
+    //默认将上传成功的属性存入数据对象
+    Object.entries(result).forEach(([key, value]) => {
+      formData.value[key] = value;
+    });
+    //console.log(param.data.path);
+  }
+  emits("selfFunc", prep, uploadFile, uploadFiles, param);
+};
+onMounted(() => {
+  initCompCallEvent(props, emits, formData);
+});
+</script>
+<style lang="scss" scoped>
+.image-area {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  &:hover {
+    .image-remove {
+      visibility: visible;
+    }
+  }
+
+  .image-remove {
+    position: absolute;
+    visibility: hidden;
+    top: 50%;
+    left: 50%;
+  }
+}
+
+.demo-image__error .image-slot {
+  font-size: 30px;
+}
+
+.demo-image__error .image-slot .el-icon {
+  font-size: 30px;
+}
+
+.demo-image__error .el-image {
+  width: 100%;
+  height: 200px;
+}
+</style>

package/src/components/formcomp/items/index.ts

@@ -0,0 +1,44 @@
+export { default as areaItem } from "./area-item.vue";
+export { default as audioItem } from "./audio-item.vue";
+export { default as autocompleteItem } from "./autocomplete-item.vue";
+export { default as buttonItem } from "./button-item.vue";
+export { default as cascadeItem } from "./cascade-item.vue";
+export { default as checkboxItem } from "./checkbox-item.vue";
+export { default as colorItem } from "./color-item.vue";
+export { default as cronItem } from "./cron-item.vue";
+export { default as datetimeItem } from "./datetime-item.vue";
+export { default as departItem } from "./depart-item.vue";
+export { default as dialogInputItem } from "./dialog-input-item.vue";
+export { default as dividerItem } from "./divider-item.vue";
+export { default as htmlItem } from "./html-item.vue";
+export { default as htmleditorItem } from "./htmleditor-item.vue";
+export { default as iconItem } from "./icon-item.vue";
+export { default as imageItem } from "./image-item.vue";
+export { default as inputItem } from "./input-item.vue";
+export { default as jsonArrayItem } from "./json-array-item.vue";
+export { default as jsonItem } from "./json-item.vue";
+export { default as markdownItem } from "./markdown-item.vue";
+export { default as numberItem } from "./number-item.vue";
+export { default as numberRangeItem } from "./number-range-item.vue";
+export { default as pageSelectItem } from "./page-select-item.vue";
+export { default as passwordItem } from "./password-item.vue";
+export { default as radioItem } from "./radio-item.vue";
+export { default as rateItem } from "./rate-item.vue";
+export { default as selectItem } from "./select-item.vue";
+export { default as signatureItem } from "./signature-item.vue";
+export { default as sliderItem } from "./slider-item.vue";
+export { default as switchItem } from "./switch-item.vue";
+export { default as tagItem } from "./tag-item.vue";
+export { default as textItem } from "./text-item.vue";
+export { default as textareaItem } from "./textarea-item.vue";
+export { default as timeItem } from "./time-item.vue";
+export { default as timePickerItem } from "./time-picker-item.vue";
+export { default as transferItem } from "./transfer-item.vue";
+export { default as tselectItem } from "./tselect-item.vue";
+export { default as unknownItem } from "./unknown-item.vue";
+export { default as uploadItem } from "./upload-item.vue";
+export { default as userItem } from "./user-item.vue";
+export { default as usercompItem } from "./usercomp-item.vue";
+export { default as viewMarkdownItem } from "./view-markdown-item.vue";
+export { default as qrcodeItem } from "./qrcode-item.vue";
+export { default as barcodeItem } from "./barcode-item.vue";

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

@@ -0,0 +1,150 @@
+<template>
+  <EditDataDialog
+    v-model="dialogInputVisible"
+    :disabled="checkIsDisabled(props)"
+    :initial-content="String(formData[field.fieldName])"
+    @confirm="handleContentConfirm"
+  />
+  <starhorse-form-item
+    :showFormItem="showFormItem"
+    :isDesign="isDesign"
+    :disabled="disabled"
+    :bareFlag="bareFlag"
+    :formItem="field"
+    :parentField="parentField"
+  >
+    <el-input
+      :disabled="checkIsDisabled(props)"
+      v-bind="field.preps"
+      type="text"
+      ref="inputItemRef"
+      :fid="field.fieldName"
+      class="input-with-select"
+      v-on="getDynamicEvents(props, itemAction)"
+      @dblclick="editContent"
+      v-model="formData[field.fieldName]"
+    >
+      <template #prepend v-if="field.preps?.prependText">
+        {{ field.preps?.prependText }}
+      </template>
+      <template #prepend v-if="field.preps?.prependList">
+        <el-select v-model="formData[preName]">
+          <el-option
+            v-for="item in field.preps?.prependList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"
+          />
+        </el-select>
+      </template>
+      <template #append v-if="field.preps?.appendText">
+        {{ field.preps?.appendText }}
+      </template>
+      <template #append v-if="field.preps?.appendAction">
+        <star-horse-icon
+          :title="field.preps?.appendAction?.actionTitle"
+          style="cursor: pointer"
+          :icon-class="field.preps?.appendAction?.icon || 'document'"
+          @click="field.preps?.appendAction?.actions(formData)"
+        />
+      </template>
+      <template #append v-if="field.preps?.appendList">
+        <el-select v-model="formData[appName]">
+          <el-option
+            v-for="item in field.preps?.appendList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"
+          />
+        </el-select>
+      </template>
+    </el-input>
+  </starhorse-form-item>
+</template>
+<script setup lang="ts">
+import { getDynamicEvents } from "@/api/system";
+import {
+  allAction,
+  checkIsDisabled,
+  initCompCallEvent,
+} from "@/components/formcomp/utils/ItemRelationEventUtils";
+import { computed, nextTick, onMounted, PropType, ref } from "vue";
+
+defineOptions({
+  name: "InputItem",
+});
+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 inputItemRef = ref();
+const dialogInputVisible = ref<boolean>(false);
+const initEvent = async () => {
+  await nextTick();
+};
+const preName = computed(() => {
+  return props.field?.preps.preName ?? "pre" + props.field.fieldName;
+});
+const appName = computed(() => {
+  return props.field?.preps.appName ?? "app" + props.field.fieldName;
+});
+const itemAction = (prep: any) => {
+  allAction(props, emits, formData, prep);
+};
+const handleContentConfirm = (newContent: string) => {
+  formData.value[props.field.fieldName] = newContent;
+  dialogInputVisible.value = false;
+};
+const editContent = () => {
+  dialogInputVisible.value = true;
+};
+onMounted(() => {
+  initCompCallEvent(props, emits, formData);
+  initEvent();
+});
+</script>
+<style lang="scss" scoped>
+.input-with-select .el-input-group__prepend,
+.input-with-select .el-input-group__append {
+  background-color: var(--el-fill-color-blank);
+}
+
+:deep {
+  .el-input-group__prepend,
+  .el-input-group__append {
+    min-width: 30%;
+    max-width: 100px;
+    padding: 0;
+  }
+}
+</style>

package/src/components/formcomp/items/json-array-item.vue

@@ -0,0 +1,67 @@
+<template>
+  <base-json-item
+    :isDesign="isDesign"
+    :disabled="disabled"
+    :showFormItem="showFormItem"
+    :field="field"
+    @selectItem="itemAction"
+    :formInfo="formInfo"
+    v-model:formData="formData"
+    @selfFunc="itemAction"
+    :parentField="parentField"
+    dataType="array"
+  />
+</template>
+<script setup lang="ts">
+import { onMounted, PropType } from "vue";
+import {
+  allAction,
+  initCompCallEvent,
+} from "@/components/formcomp/utils/ItemRelationEventUtils";
+
+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(() => {
+  if (!props.field.preps) {
+    props.field.preps = {};
+  }
+  initCompCallEvent(props, emits, formData);
+});
+</script>
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,66 @@
+<template>
+  <base-json-item
+    :isDesign="isDesign"
+    :disabled="disabled"
+    :showFormItem="showFormItem"
+    :field="field"
+    @selectItem="itemAction"
+    :formInfo="formInfo"
+    v-model:formData="formData"
+    @selfFunc="itemAction"
+    :parentField="parentField"
+    dataType="object"
+  />
+</template>
+<script setup lang="ts">
+import { onMounted, PropType } from "vue";
+import {
+  allAction,
+  initCompCallEvent,
+} from "@/components/formcomp/utils/ItemRelationEventUtils";
+
+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(() => {
+  if (!props.field.preps) {
+    props.field.preps = {};
+  }
+  initCompCallEvent(props, emits, formData);
+});
+</script>
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,77 @@
+<template>
+  <starhorse-form-item
+    :showFormItem="showFormItem"
+    :isDesign="isDesign"
+    :disabled="disabled"
+    :bareFlag="bareFlag"
+    :formItem="field"
+    :parentField="parentField"
+  >
+    <MdEditor
+      v-model="formData[field.fieldName]"
+      :theme="'light'"
+      :language="'zh-CN'"
+      :previewTheme="'default'"
+      :codeTheme="'github'"
+      v-bind="field.preps"
+      class="markdown-editor"
+    />
+  </starhorse-form-item>
+</template>
+<script setup lang="ts" name="markdown">
+import { onMounted, onUpdated, PropType } from "vue";
+import "md-editor-v3/lib/style.css";
+
+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 init = async () => {};
+onMounted(() => {
+  init();
+});
+onUpdated(() => {
+  init();
+});
+</script>
+<style lang="scss" scoped>
+.v-md-editor {
+  width: 100% !important;
+  min-height: 400px !important;
+
+  :deep(.vditor-toolbar) {
+    padding-left: unset !important;
+  }
+}
+</style>