star-horse-lowcode 2.7.62 → 2.7.65

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

@@ -0,0 +1,113 @@
+<template>
+  <starhorse-form-item
+    :showFormItem="showFormItem"
+    :isDesign="isDesign"
+    :disabled="disabled"
+    :bareFlag="bareFlag"
+    :formItem="field"
+    :parentField="parentField"
+  >
+    <el-cascader
+      :fid="field.fieldName"
+      v-bind="field.preps"
+      :disabled="checkIsDisabled(props)"
+      v-on="getDynamicEvents(props, itemAction)"
+      v-model="formData[field.fieldName]"
+    />
+  </starhorse-form-item>
+</template>
+<script setup lang="ts">
+import { nextTick, onMounted, PropType, watch } from "vue";
+import { compDynamicData, isJson } 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 initData = async () => {
+  await nextTick();
+  const dataa = await compDynamicData(props.field);
+  if (dataa?.length) {
+    props.field.preps["options"] = dataa;
+  }
+  let data: any = formData.value[props.field.fieldName];
+  if (isJson(data)) {
+    formData.value[props.field.fieldName] = JSON.parse(data);
+  } else {
+    //解决加载慢问题，导致数据没法回显
+    setTimeout(() => {
+      let data: any = formData.value[props.field.fieldName];
+      formData.value[props.field.fieldName] = isJson(data)
+        ? JSON.parse(data)
+        : [];
+    }, 200);
+  }
+};
+onMounted(() => {
+  if (!props.field.preps) {
+    props.field.preps = {};
+  }
+  props.field.preps["props"] = {
+    label: "name",
+    multiple: props.field?.multiple,
+    checkStrictly: true,
+  };
+  initData();
+  initCompCallEvent(props, emits, formData);
+});
+watch(
+  () => formData.value[props.field.fieldName + "OptionList"],
+  (val) => {
+    if (val?.length > 0) {
+      props.field.preps["options"] = val;
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+</script>
+<style lang="scss" scoped>
+:deep(.el-cascader) {
+  width: 100%;
+}
+</style>

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

@@ -0,0 +1,97 @@
+<template>
+  <starhorse-form-item
+    :showFormItem="showFormItem"
+    :isDesign="isDesign"
+    :disabled="disabled"
+    :bareFlag="bareFlag"
+    :formItem="field"
+    :parentField="parentField"
+  >
+    <el-checkbox-group
+      :fid="field.fieldName"
+      :disabled="checkIsDisabled(props)"
+      :readonly="field.preps?.readonly ?? false"
+      v-on="getDynamicEvents(props, itemAction)"
+      v-model="formData[field.fieldName]"
+    >
+      <el-checkbox
+        :border="item['border'] ?? true"
+        :checked="item['checked']"
+        :disabled="item['disabled'] ?? false"
+        :label="item[field.preps?.props?.label || 'name']"
+        :value="item[field.preps?.props?.value || 'value']"
+        v-for="item in field.preps?.values"
+      />
+    </el-checkbox-group>
+  </starhorse-form-item>
+</template>
+<script setup lang="ts">
+import { onMounted, PropType, watch } from "vue";
+import {
+  allAction,
+  checkIsDisabled,
+} from "@/components/formcomp/utils/ItemRelationEventUtils";
+import { compDynamicData } from "@/api/star_horse_utils";
+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 = () => {
+  allAction(props, emits, formData, "change");
+};
+const initData = async () => {
+  const dataa = await compDynamicData(props.field);
+  if (dataa?.length) {
+    props.field.preps["values"] = dataa;
+  }
+};
+onMounted(() => {
+  if (!props.field.preps) {
+    props.field.preps = {};
+  }
+  initData();
+  allAction(props, emits, formData, "change", true);
+});
+watch(
+  () => formData.value[props.field.fieldName + "OptionList"],
+  (val) => {
+    if (val?.length > 0) {
+      props.field.preps["values"] = val;
+    }
+  },
+  { immediate: true },
+);
+</script>
+<style scoped></style>

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

@@ -0,0 +1,70 @@
+<template>
+  <starhorse-form-item
+    :showFormItem="showFormItem"
+    :isDesign="isDesign"
+    :disabled="disabled"
+    :bareFlag="bareFlag"
+    :formItem="field"
+    :parentField="parentField"
+  >
+    <el-color-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: any) => {
+  allAction(props, emits, formData, prep);
+};
+onMounted(() => {
+  initCompCallEvent(props, emits, formData);
+});
+</script>
+<style scoped></style>

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

@@ -0,0 +1,115 @@
+<template>
+  <star-horse-dialog
+    :title="'Crontab 配置器'"
+    box-width="50%"
+    :self-func="true"
+    @resetForm="resetForm"
+    @closeAction="close"
+    @merge="submit"
+    :dialog-visible="cronVisible"
+  >
+    <el-scrollbar>
+      <Crontab ref="cronTabRef" v-model="cronDataValue" />
+    </el-scrollbar>
+  </star-horse-dialog>
+  <starhorse-form-item
+    :showFormItem="showFormItem"
+    :isDesign="isDesign"
+    :disabled="disabled"
+    :bareFlag="bareFlag"
+    :formItem="field"
+    :parentField="parentField"
+  >
+    <el-input
+      :fid="field.fieldName"
+      v-on="getDynamicEvents(props, itemAction)"
+      v-model="formData[field.fieldName]"
+    >
+      <template #append>
+        <el-button
+          icon="Clock"
+          @click="open"
+          :disabled="checkIsDisabled(props)"
+        />
+      </template>
+    </el-input>
+  </starhorse-form-item>
+</template>
+<script setup lang="ts">
+import { onMounted, PropType, ref } from "vue";
+import Crontab from "@/components/cron/Crontab.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");
+
+let cronDataValue = ref<any>("");
+let cronVisible = ref(false);
+const cronTabRef = ref();
+const itemAction = (prep: any) => {
+  allAction(props, emits, formData, prep);
+};
+const resetForm = () => {
+  // formData[field.fieldName] = defaultExpress;
+  if (cronTabRef.value) {
+    cronTabRef.value.clearCron();
+  }
+};
+const close = () => {
+  cronVisible.value = false;
+};
+const open = () => {
+  cronDataValue.value = formData.value[props.field.fieldName];
+  cronVisible.value = true;
+};
+const submit = () => {
+  formData.value[props.field.fieldName] = cronDataValue.value;
+  close();
+};
+resetForm();
+onMounted(() => {
+  initCompCallEvent(props, emits, formData);
+});
+</script>
+<style lang="scss" scoped>
+:deep(.el-input-group__append) {
+  padding: 0 20px !important;
+}
+</style>

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

@@ -0,0 +1,99 @@
+<template>
+  <starhorse-form-item
+    :showFormItem="showFormItem"
+    :isDesign="isDesign"
+    :disabled="disabled"
+    :bareFlag="bareFlag"
+    :formItem="field"
+    :parentField="parentField"
+  >
+    <el-date-picker
+      :fid="field.fieldName"
+      :disabled="checkIsDisabled(props)"
+      v-bind="field.preps"
+      :format="field.preps?.format || 'YYYY-MM-DD HH:mm:ss'"
+      :value-format="field.preps?.valueFormat"
+      date-format="YYYY-MM-DD"
+      time-format="HH:mm"
+      v-on="getDynamicEvents(props, itemAction)"
+      @change="itemAction('change')"
+      v-model="formData[field.fieldName]"
+    ></el-date-picker>
+  </starhorse-form-item>
+</template>
+<script setup lang="ts">
+import { onBeforeMount, onMounted, PropType, shallowRef } 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 disabledDate = shallowRef<any>([]);
+const itemAction = (prep: any) => {
+  if (prep == "change" && props.field.preps["type"]?.includes("range")) {
+    let val = formData.value[props.field.fieldName];
+    if (props.field.preps["needSplitName"]) {
+      formData.value[props.field.fieldName + "Start"] = val[0];
+      formData.value[props.field.fieldName + "End"] = val[1];
+    }
+  }
+  allAction(props, emits, formData, prep);
+};
+onBeforeMount(() => {
+  if (!props.field.preps) {
+    props.field.preps = {};
+  }
+  props.field.preps["type"] =
+    props.field.preps["type"] || props.field.type || "date";
+  disabledDate.value = props.field.preps["disabledDate"]?.split(";") || [];
+  delete props.field.preps["disabledDate"];
+});
+onMounted(() => {
+  //后面增加判断规则
+  props.field.preps["disabledDate"] = (date: Date) => {
+    return disabledDate.value.includes(date.getDate().toString());
+  };
+  initCompCallEvent(props, emits, formData);
+});
+</script>
+<style lang="scss" scoped>
+:deep(.el-input) {
+  width: unset !important;
+}
+</style>

package/src/components/formcomp/items/depart-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>