star-horse-lowcode 2.7.63 → 2.7.65

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

@@ -0,0 +1,118 @@
+<template>
+  <starhorse-form-item
+    :showFormItem="showFormItem"
+    :isDesign="isDesign"
+    :disabled="disabled"
+    :bareFlag="bareFlag"
+    :formItem="field"
+    :parentField="parentField"
+  >
+    <el-autocomplete
+      :fid="field.fieldName"
+      :disabled="checkIsDisabled(props)"
+      :fetch-suggestions="querySearch"
+      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, watch } from "vue";
+import {
+  compDynamicData,
+  createFilter,
+  dynamicUrlOperation,
+} from "@/api/star_horse_utils";
+import { SearchParams } from "@/components/types/Params";
+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 () => {
+  const data = await compDynamicData(props.field);
+  if (data?.length) {
+    props.field.preps["values"] = data;
+  }
+};
+onMounted(() => {
+  if (!props.field.preps) {
+    props.field.preps = {};
+  }
+  initData();
+  initCompCallEvent(props, emits, formData);
+});
+const querySearch = async (queryString: string, cb: (arg: any) => void) => {
+  let temp = props.field.preps;
+  let dataSource = temp["dataSource"];
+  if (dataSource == "url") {
+    let searchParams: SearchParams[] = [];
+    searchParams.push({
+      propertyName: temp["selectLabel"],
+      value: queryString,
+      operation: "lk",
+    });
+    temp["values"] = await dynamicUrlOperation(temp, searchParams);
+    cb(temp["values"]);
+  } else {
+    const results = queryString
+      ? temp["values"].filter(createFilter(queryString))
+      : temp["values"];
+    cb(results);
+  }
+};
+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/barcode-item.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import Vue3Barcode from "vue3-barcode";
+import { computed, nextTick, onMounted, PropType, ref, watch } from "vue";
+import { allAction } from "../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 barcodeRef = ref();
+const emits = defineEmits(["selfFunc", "selectItem"]);
+const formData = defineModel("formData");
+const dataValue = computed(() => formData.value[props.field.preps?.name]);
+const createCode = () => {
+  barcodeRef.value = {
+    format: props.field.preps?.format ?? "CODE39", //选择要使用的条形码类型
+    width: props.field.preps?.width ?? 1, //设置条之间的宽度
+    height: props.field.preps?.height ?? 40, //高度
+    displayValue: props.field.preps?.displayValue ?? true, //是否在条形码下方显示文字
+    // text: dataValue.value,//覆盖显示的文本
+    fontOptions: props.field.preps?.fontOptions, //使文字加粗体或变斜体
+    font: props.field.preps?.font, //设置文本的字体
+    textAlign: props.field.preps?.textAlign ?? "center", //设置文本的水平对齐方式
+    textPosition: props.field.preps?.textPosition ?? "bottom", //设置文本的垂直位置
+    textMargin: props.field.preps?.textMargin ?? 5, //设置条形码和文本之间的间距
+    fontSize: props.field.preps?.fontSize ?? 15, //设置文本的大小
+    background: props.field.preps?.fontSize ?? "#fff", //设置条形码的背景
+    lineColor: props.field.preps?.fontSize ?? "#000", //设置条和文本的颜色。
+    margin: props.field.preps?.margin ?? 15, //设置条形码周围的空白边距
+  };
+};
+onMounted(() => {
+  nextTick(() => {
+    createCode();
+    allAction(props, emits, formData, "change", true);
+  });
+});
+watch(
+  () => [dataValue.value, props.field.preps],
+  () => {
+    createCode();
+    allAction(props, emits, formData, "change", false);
+  },
+  { immediate: false, deep: true },
+);
+</script>
+<template>
+  <starhorse-form-item
+    :showFormItem="showFormItem"
+    :isDesign="isDesign"
+    :disabled="disabled"
+    :bareFlag="bareFlag"
+    :formItem="field"
+    :parentField="parentField"
+  >
+    <Vue3Barcode :value="dataValue" :options="barcodeRef" />
+  </starhorse-form-item>
+</template>
+<style scoped></style>

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

@@ -0,0 +1,207 @@
+<template>
+  <!-- 对话框部分（与原 json-item.vue 完全一致） -->
+  <star-horse-dialog
+    :title="field.label + 'JSON编辑'"
+    :self-func="true"
+    :dialog-visible="dialogInputVisible"
+    @merge="selectItem"
+    @resetForm="resetForm"
+    @closeAction="closeAction"
+  >
+    <star-horse-json-editor
+      v-if="field.preps?.devType"
+      v-model:modelValue="jsonData"
+      style="height: 100vh"
+    />
+    <star-horse-form v-else :field-list="jsonTableField" ref="jsonFormRef" />
+  </star-horse-dialog>
+
+  <!-- 输入框+按钮部分（与原 json-item.vue 完全一致） -->
+  <starhorse-form-item
+    :isDesign="isDesign"
+    :disabled="disabled"
+    :showFormItem="showFormItem"
+    :bareFlag="bareFlag"
+    :formItem="field"
+    :parentField="parentField"
+  >
+    <div class="json-comp">
+      <div class="json-box">
+        <el-input
+          :fid="field.fieldName"
+          :disabled="checkIsDisabled(props)"
+          :rows="field.preps?.rows || 3"
+          type="textarea"
+          resize="vertical"
+          readonly
+          v-on="getDynamicEvents(props, itemAction)"
+          v-model="formData[field.fieldName]"
+        />
+      </div>
+      <div class="json-btn">
+        <star-horse-icon
+          class="w-full"
+          @click="editJsonData(false)"
+          icon-class="edit"
+          style="cursor: pointer"
+          title="设计模式编辑"
+        />
+        <div class="h-[10px]" />
+        <star-horse-icon
+          @click="editJsonData(true)"
+          icon-class="code"
+          style="cursor: pointer"
+          title="开发模式编辑"
+        />
+      </div>
+    </div>
+  </starhorse-form-item>
+</template>
+
+<script setup lang="ts">
+import { nextTick, PropType, reactive, shallowRef } from "vue";
+import { PageFieldInfo } from "@/components/types/PageFieldInfo";
+import {
+  allAction,
+  checkIsDisabled,
+} from "@/components/formcomp/utils/ItemRelationEventUtils";
+import { isJson } from "@/api/star_horse_utils";
+import { getDynamicEvents } from "@/api/system";
+import JSON5 from "json5";
+
+// 公共 props（两个组件原有的 props 完全一致）
+const props = defineProps({
+  isDesign: { type: Boolean, default: false },
+  showFormItem: { type: Boolean, default: false },
+  disabled: { 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> },
+  // 新增：区分 JSON 对象/数组的关键参数
+  dataType: {
+    type: String,
+    default: "object",
+    validator: (v) => ["object", "array"].includes(v),
+  },
+});
+
+const emits = defineEmits(["selfFunc", "selectItem"]);
+const formData = defineModel("formData");
+const dialogInputVisible = shallowRef(false);
+const jsonFormRef = shallowRef();
+const jsonData = shallowRef<any>({}); // 统一存储解析后的 JSON 数据（对象或数组）
+
+// 公共的表格字段配置（两个组件原有的 jsonTableField 完全一致）
+const jsonTableField = reactive<PageFieldInfo>({
+  batchFieldList: [
+    {
+      batchName: "jsonDatas",
+      fieldList: [
+        {
+          label: "Name/名称",
+          fieldName: "name",
+          required: true,
+          formVisible: true,
+        },
+        {
+          label: "Value/值",
+          fieldName: "value",
+          required: true,
+          formVisible: true,
+        },
+      ],
+    },
+  ],
+});
+
+// 公共事件方法
+const itemAction = (prep: any) => allAction(props, emits, formData, prep);
+
+// 关键差异逻辑：根据 dataType 动态处理
+const editJsonData = async (devType: boolean) => {
+  props.field.preps["devType"] = devType;
+  const jsonStr = formData.value[props.field.fieldName];
+  const temp: any = {};
+
+  if (jsonStr && isJson(jsonStr)) {
+    // 根据 dataType 解析为对象或数组
+    const parsedData = JSON5.parse(jsonStr);
+    jsonData.value = parsedData;
+
+    // 对象需要转换为键值对数组，数组直接使用
+    temp["jsonDatas"] =
+      props.dataType === "object"
+        ? Object.entries(parsedData).map(([name, value]) => ({ name, value }))
+        : parsedData;
+  } else {
+    temp["jsonDatas"] = props.dataType === "object" ? [{}] : [];
+  }
+
+  dialogInputVisible.value = true;
+  await nextTick();
+  if (!devType) jsonFormRef.value.setFormData(temp);
+};
+
+const selectItem = async () => {
+  if (props.field.preps["devType"]) {
+    // 开发模式直接序列化当前 jsonData
+    formData.value[props.field.fieldName] = JSON5.stringify(
+      jsonData.value,
+      null,
+      4,
+    );
+  } else {
+    // 设计模式根据 dataType 转换数据
+    let flag = false;
+    await jsonFormRef.value.$refs.starHorseFormRef.validate(
+      (res) => (flag = res),
+    );
+    if (!flag) return;
+
+    const temp = jsonFormRef.value.getFormData().value;
+    const dataList = temp["jsonDatas"];
+
+    // 数组直接使用，对象需要转换为键值对对象
+    formData.value[props.field.fieldName] =
+      props.dataType === "object"
+        ? JSON5.stringify(
+            Object.fromEntries(
+              dataList.map(({ name, value }) => [name, value]),
+            ),
+            null,
+            4,
+          )
+        : JSON5.stringify(dataList, null, 4);
+  }
+  closeAction();
+};
+
+// 公共方法（与原组件一致）
+const resetForm = () => jsonFormRef.value.setFormData({ jsonDatas: [{}] });
+const closeAction = () => (dialogInputVisible.value = false);
+</script>
+
+<style lang="scss" scoped>
+/* 与原 json-item.vue 样式完全一致 */
+.json-comp {
+  width: 100%;
+  display: flex;
+  align-items: center;
+
+  .json-box {
+    flex: 1;
+    margin-right: 5px;
+  }
+
+  .json-btn {
+    cursor: pointer;
+    flex-direction: column;
+    width: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+</style>

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

@@ -0,0 +1,228 @@
+<template>
+  <star-horse-dialog
+    :title="field.preps?.dialogTitle || '配置按钮事件'"
+    :selfFunc="true"
+    @merge="operResultAction"
+    :dialogVisible="btnDialogVisible"
+    :boxWidth="field.preps?.boxWidth || '50%'"
+    :isShowReset="field.preps?.isShowReset ?? false"
+    @closeAction="close"
+    :btnText="field.preps?.dialogBtn ?? '确定'"
+  >
+    <star-horse-form
+      ref="btnFormRef"
+      :fieldList="{
+        fieldList: field.preps?.fieldList,
+      }"
+      v-if="field.preps?.viewType == 'form'"
+    />
+    <component
+      :is="field.preps?.componentName"
+      ref="btnCompRef"
+      v-else-if="field.preps?.viewType == 'usercomp'"
+      :params="field.preps?.params"
+    />
+    <star-horse-editor
+      v-else-if="field.preps?.viewType == 'code'"
+      ref="btnCompRef"
+    />
+  </star-horse-dialog>
+  <starhorse-form-item
+    :showFormItem="showFormItem"
+    :isDesign="isDesign"
+    :disabled="disabled"
+    :bareFlag="bareFlag"
+    :formItem="field"
+    :parentField="parentField"
+  >
+    <el-button
+      :disabled="checkIsDisabled(props)"
+      v-bind="field.preps"
+      @click="dynamicFunc(field.preps?.code)"
+    >
+      <star-horse-icon
+        v-if="field.preps?.icon"
+        :icon-class="field.preps.icon"
+        style="vertical-align: middle; color: var(--star-horse-style)"
+      />
+      {{ field?.label }}
+    </el-button>
+  </starhorse-form-item>
+</template>
+<script setup lang="ts" name="buttonItem">
+import { onMounted, PropType, shallowRef, unref } from "vue";
+import {
+  buttonAction,
+  checkIsDisabled,
+  initCompCallEvent,
+} from "@/components/formcomp/utils/ItemRelationEventUtils";
+import { httpRequest } from "@/api/star_horse_apis";
+import { operationConfirm, warning } from "@/utils/message";
+import { BtnAction, DynamicParamField } from "@/components/types/BtnAction";
+import { SearchParams } from "@/components/types/Params";
+import { createCondition } 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 btnDialogVisible = shallowRef<boolean>(false);
+const btnCompRef = shallowRef();
+
+const operResultAction = async () => {
+  let action: BtnAction = props.field.preps;
+  let formData: any = {};
+  if (action?.viewType == "comp") {
+    formData = await btnCompRef.value?.getFormData("请先填写表单数据");
+    if (!formData) {
+      return;
+    }
+  } else {
+    formData = await btnCompRef.value?.getFormData().value;
+  }
+  formData.value[props.field.fieldName] = JSON.stringify(unref(formData));
+  close();
+};
+//打开对话框
+const openDialog = async () => {
+  /**
+   * 1、调用公共的方法
+   * --2、调用公共的组件
+   * --3、调用指定接口
+   * --4、执行程序块
+   * --5、传入表单参数，生成表单
+   *
+   */
+  let action: BtnAction = props.field.preps;
+  //执行代码块
+  if (action?.needConfirm) {
+    let result = operationConfirm(action.confirmMsg ?? "确定要执行此操作吗");
+    if (!result) {
+      return;
+    }
+  }
+  if (action?.viewType == "inter") {
+    //如果参数是动态参数，则在当前form中寻找对应名称的值
+    let urlParam: any = {};
+    if (action.isDynamicParam == "Y") {
+      let dynamicParams: SearchParams[] | DynamicParamField[] | any =
+        action.params;
+      let params: SearchParams[] = [];
+      dynamicParams?.forEach((dynamicParam: any) => {
+        let value =
+          formData.value[dynamicParam.paramName] ?? dynamicParam.defaultValue;
+        params.push(
+          createCondition(
+            dynamicParam.paramName,
+            value,
+            dynamicParam.matchType,
+          ),
+        );
+      });
+      urlParam["fieldList"] = params;
+    } else {
+      urlParam = action.params;
+    }
+    if (!action.url) {
+      warning("请提供需要调用的接口");
+      return;
+    }
+    httpRequest(action.url!, action.method ?? "POST", urlParam).then(
+      (res: any) => {
+        //仅仅执行，则直接调用接口
+        console.log(res);
+        let reData = res.data;
+        if (reData.code) {
+          warning(reData.cnMessage);
+          return;
+        }
+        let datas = reData?.data;
+        if (action?.afterAction) {
+          if (!datas) {
+            warning("返回数据为空，无法赋值");
+            return;
+          }
+          if (Array.isArray(datas)) {
+            warning("返回数据为数组，无法赋值");
+            return;
+          }
+          //执行后搜集返回结果
+          if (action?.afterAction == "assignCurrentName") {
+            formData.value[props.field.fieldName] = datas;
+          } else if (action?.afterAction == "assignForm") {
+            let entries = Object.entries(datas);
+            entries.forEach(([key, value]) => {
+              formData.value[key] = value;
+            });
+          }
+        }
+      },
+    );
+  } else if (action?.viewType == "code") {
+    if (!action.code) {
+      warning("请提供需要执行的代码");
+      return;
+    }
+    buttonAction(props, emits, formData, action.code);
+  } else if (action?.viewType == "method") {
+    if (!action.actions) {
+      warning("请提供需要执行的函数");
+      return;
+    }
+    action.actions(formData);
+  } else {
+    btnDialogVisible.value = true;
+  }
+};
+const close = () => {
+  btnDialogVisible.value = false;
+};
+const dynamicFunc = (code: any) => {
+  // openDialog();
+  //如果是配置的标准操作
+  if (props.field.preps?.viewType) {
+    openDialog();
+  } else {
+    buttonAction(props, emits, formData, code);
+  }
+};
+onMounted(() => {
+  initCompCallEvent(props, emits, formData);
+});
+</script>
+<style lang="scss" scoped>
+:deep(.el-icon) {
+  display: none;
+}
+</style>