star-horse-lowcode 2.7.62 → 2.7.65

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

@@ -0,0 +1,77 @@
+<template>
+  <starhorse-form-item
+    :showFormItem="showFormItem"
+    :isDesign="isDesign"
+    :disabled="disabled"
+    :bareFlag="bareFlag"
+    :formItem="field"
+    :parentField="parentField"
+  >
+    <el-time-select
+      :fid="field.fieldName"
+      :disabled="checkIsDisabled(props)"
+      :start="field.preps?.start || '00:00'"
+      :end="field.preps?.end || '24:00'"
+      :step="field.preps?.step || '00:05'"
+      v-bind="field.preps"
+      v-on="getDynamicEvents(props, itemAction)"
+      v-model="formData[field.fieldName]"
+    />
+  </starhorse-form-item>
+</template>
+<script setup lang="ts">
+import { onMounted, PropType } from "vue";
+import {
+  allAction,
+  checkIsDisabled,
+  initCompCallEvent,
+} 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: string) => {
+  allAction(props, emits, formData, prep);
+};
+onMounted(() => {
+  initCompCallEvent(props, emits, formData);
+});
+</script>
+<style lang="scss" scoped>
+.el-time-picker,
+.el-date-editor {
+  width: unset;
+}
+</style>

package/src/components/formcomp/items/time-picker-item.vue

@@ -0,0 +1,74 @@
+<template>
+  <starhorse-form-item
+    :showFormItem="showFormItem"
+    :isDesign="isDesign"
+    :disabled="disabled"
+    :bareFlag="bareFlag"
+    :formItem="field"
+    :parentField="parentField"
+  >
+    <el-time-picker
+      :fid="field.fieldName"
+      :disabled="checkIsDisabled(props)"
+      v-bind="field.preps"
+      v-on="getDynamicEvents(props, itemAction)"
+      v-model="formData[field.fieldName]"
+    />
+  </starhorse-form-item>
+</template>
+<script setup lang="ts">
+import { onMounted, PropType } from "vue";
+import {
+  allAction,
+  checkIsDisabled,
+  initCompCallEvent,
+} 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: string) => {
+  allAction(props, emits, formData, prep);
+};
+onMounted(() => {
+  initCompCallEvent(props, emits, formData);
+});
+</script>
+<style lang="scss" scoped>
+.el-time-picker,
+.el-date-editor {
+  width: unset;
+}
+</style>

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

@@ -0,0 +1,93 @@
+<template>
+  <starhorse-form-item
+    :showFormItem="showFormItem"
+    :isDesign="isDesign"
+    :disabled="disabled"
+    :bareFlag="bareFlag"
+    :formItem="field"
+    :parentField="parentField"
+  >
+    <el-transfer
+      :fid="field?.preps['name']"
+      v-bind="field.preps"
+      v-on="getDynamicEvents(props, itemAction)"
+      v-model="formData[field.fieldName]"
+    />
+  </starhorse-form-item>
+</template>
+<script setup lang="ts">
+import { onMounted, PropType, shallowRef, watch } from "vue";
+import { compDynamicData } from "@/api/star_horse_utils";
+import { SelectOption } from "@/components/types/SearchProps";
+import {
+  allAction,
+  initCompCallEvent,
+} 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");
+let bakeData = shallowRef<SelectOption[]>([]);
+const itemAction = (prep: string) => {
+  allAction(props, emits, formData, prep);
+};
+const initData = async () => {
+  const dataa = await compDynamicData(props.field);
+  if (dataa?.length) {
+    props.field.preps["data"] = dataa;
+  }
+  bakeData.value = JSON.parse(JSON.stringify(props.field?.preps["data"] ?? []));
+};
+
+onMounted(() => {
+  if (!props.field.preps) {
+    props.field.preps = {};
+  }
+  initData();
+  initCompCallEvent(props, emits, formData);
+});
+watch(
+  () => formData.value[props.field.fieldName + "OptionList"],
+  (val) => {
+    if (val?.length > 0) {
+      props.field.preps["data"] = val;
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+</script>
+<style scoped></style>

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

@@ -0,0 +1,121 @@
+<template>
+  <starhorse-form-item
+    :showFormItem="showFormItem"
+    :isDesign="isDesign"
+    :disabled="disabled"
+    :bareFlag="bareFlag"
+    :formItem="field"
+    :parentField="parentField"
+  >
+    <el-tree-select
+      :fid="field.fieldName"
+      :disabled="checkIsDisabled(props)"
+      :default-expand-all="true"
+      v-bind="field.preps"
+      :filter-node-method="filterNodeMethod"
+      :render-content="renderContent"
+      v-on="getDynamicEvents(props, itemAction)"
+      v-model="formData[field.fieldName]"
+    >
+    </el-tree-select>
+  </starhorse-form-item>
+</template>
+<script setup lang="ts">
+import { onMounted, PropType, watch } from "vue";
+import { compDynamicData } from "@/api/star_horse_utils";
+import {
+  allAction,
+  checkIsDisabled,
+  initCompCallEvent,
+} 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);
+};
+const filterNodeMethod = (value: any, data: any) => {
+  let name: any = props.field.preps["props"]?.label || "label";
+  return data[name].includes(value);
+};
+const renderContent = (_h: Function, data: any) => {
+  let labelName = props.field.preps.props?.label || "label";
+  if (props.field.preps["showCode"]) {
+    let codeName =
+      props.field.preps.props?.code ||
+      props.field.preps.props?.value ||
+      "value";
+    return `${data.data[labelName]}(${data.data["code"] || data.data[codeName] || ""})`;
+  }
+  return data.data[labelName];
+};
+/**
+ * 动态获取数据
+ */
+const initData = async () => {
+  const dataa = await compDynamicData(props.field);
+  if (dataa?.length) {
+    props.field.preps["data"] = dataa;
+  }
+};
+onMounted(() => {
+  if (!props.field.preps) {
+    props.field.preps = {};
+  }
+  props.field.preps["remote"] =
+    props.field.preps["remote"] || props.field.preps["dataSource"] == "url";
+  props.field.preps["filterable"] = true;
+  props.field.preps["collapseTags"] = true;
+  props.field.preps["props"] = props.field.preps["props"] || {
+    label: "name",
+    value: "value",
+  };
+  initData();
+  initCompCallEvent(props, emits, formData);
+});
+watch(
+  () => formData.value[props.field.fieldName + "OptionList"],
+  (val) => {
+    if (val?.length > 0) {
+      props.field.preps["data"] = val;
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+</script>
+<style scoped></style>

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

@@ -0,0 +1,51 @@
+<template>
+  <starhorse-form-item
+    :showFormItem="showFormItem"
+    :isDesign="isDesign"
+    :disabled="disabled"
+    :bareFlag="bareFlag"
+    :formItem="field"
+    :parentField="parentField"
+  >
+    未知组件。。。。。。。。。。。。。。。
+  </starhorse-form-item>
+</template>
+<script setup lang="ts">
+import { PropType } from "vue";
+
+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");
+</script>
+<style scoped></style>

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

@@ -0,0 +1,189 @@
+<template>
+  <starhorse-form-item
+    :showFormItem="showFormItem"
+    :isDesign="isDesign"
+    :disabled="disabled"
+    :bareFlag="bareFlag"
+    :formItem="field"
+    :parentField="parentField"
+  >
+    <el-upload
+      :fid="field.fieldName"
+      :disabled="checkIsDisabled(props)"
+      :headers="headers"
+      v-bind="field.preps"
+      :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)
+      "
+      style="
+        width: 100% !important;
+        display: flex;
+        align-items: center;
+        position: relative;
+      "
+      v-model:file-list="dataField"
+    >
+      <el-icon class="el-icon--upload" v-if="field.preps['drag']">
+        <upload-filled />
+      </el-icon>
+      <div class="el-upload__text" v-if="field.preps['drag']">
+        将文件拖到此处 或 <em>点击上传</em>
+      </div>
+      <template #tip v-if="field.preps['maxSize']">
+        <div class="el-upload__tip">
+          文件大小不能超过{{ field.preps["maxSize"] }}
+        </div>
+      </template>
+      <star-horse-icon
+        v-if="!field.preps['drag']"
+        icon-class="plus"
+        color="var(--star-horse-style)"
+      />
+    </el-upload>
+  </starhorse-form-item>
+</template>
+<script setup lang="ts">
+import { nextTick, onMounted, PropType, ref, shallowRef, watch } from "vue";
+import { getToken } from "@/utils/auth";
+import { checkIsDisabled } 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>,
+    default: {},
+  },
+  formFieldList: {
+    type: Object,
+    default: {},
+  },
+  parentField: {
+    type: Object,
+    default: {},
+  },
+  formInfo: {
+    type: Object,
+    default: {},
+  },
+});
+const emits = defineEmits(["selfFunc", "selectItem"]);
+const formData = defineModel("formData");
+let dataField = shallowRef([]);
+let headers = ref<any>({});
+const selfAction = (
+  prep: any,
+  uploadFile: any,
+  uploadFiles: any = [],
+  param: any = {},
+) => {
+  if (prep == "success") {
+    let result = param.data;
+    formData.value[props.field.fieldName] = result.path;
+    //默认将上传成功的属性存入数据对象
+    Object.entries(result).forEach(([key, value]) => {
+      formData.value[key] = value;
+    });
+  }
+  console.log(prep, uploadFile, uploadFiles, param);
+  emits("selfFunc", prep, uploadFile, uploadFiles, param);
+};
+onMounted(async () => {
+  if (!props.field.preps) {
+    props.field.preps = {};
+  }
+  props.field.preps["action"] =
+    props.field.preps["action"] || "/system-config/annex/upload/commonFiles";
+  await nextTick();
+  let datas = formData.value[props.field.fieldName];
+  if (datas) {
+    dataField.value.push({
+      url: (props.field.preps["context"] || "/system-config") + datas,
+    });
+  }
+  let temp = props.field.preps?.headers;
+  if (temp && Object.keys(temp).length > 0) {
+    headers.value = temp;
+  }
+  headers.value["token"] = getToken();
+});
+watch(
+  () => props.formFieldList,
+  (val: any) => {
+    if (val && Object.keys(val).includes(props.field.fieldName)) {
+      dataField.value = [
+        {
+          url:
+            (props.field.preps["context"] || "/system-config") +
+            val[props.field.fieldName],
+        },
+      ];
+    }
+  },
+  { immediate: true, deep: true },
+);
+</script>
+<style lang="scss" scoped>
+:deep(.el-upload) {
+  width: 100% !important;
+}
+
+:deep(.el-upload--text) {
+  justify-content: left !important;
+}
+
+:deep(.el-upload-list--picture-card) {
+  width: 100% !important;
+
+  .is-drag {
+    height: 100% !important;
+    width: 100% !important;
+  }
+}
+
+:deep(.el-upload-list) {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+</style>