star-horse-lowcode 2.7.63 → 2.7.65

package/src/components/comp/ShDynamicForm.vue

@@ -0,0 +1,160 @@
+<script setup lang="ts" name="ShDynamicForm">
+import { inject, PropType, ref, ShallowReactive, watch } from "vue";
+import { ApiUrls } from "@/components/types/ApiUrls";
+import { error, success, warning } from "@/utils/message";
+import { postRequest } from "@/api/star_horse_apis";
+import { closeLoad, load, loadById } from "@/api/star_horse_utils";
+import { DialogProps } from "@/components/types/DialogProps";
+import { compKey, itemCheck } from "@/api/system";
+
+const props = defineProps({
+  compUrl: { type: Object as PropType<ApiUrls>, required: true },
+  fieldList: { type: Object as PropType<any>, required: true },
+  formInfo: { type: Object as PropType<any>, required: true },
+  rules: { type: Object },
+  typeModel: { type: String, default: "normal" },
+});
+const emits = defineEmits(["refresh"]);
+const starHorseFormRef = ref();
+const dataForm = ref<any>({});
+const closeDialog = inject("closeDialog") as Function;
+const dialogOperation = inject("dialogOperation") as ShallowReactive<any>;
+const dialogProps = inject<DialogProps>("dialogProps", {});
+
+const assignDefault = () => {
+  dataForm.value = {};
+};
+const loadData = async () => {
+  dataForm.value = await loadById(props.compUrl!.loadByIdUrl!, dialogProps.ids);
+  //解决关闭并再次打开不触发watch监听
+  dialogProps.ids = -2;
+};
+const merge = (_type: string) => {
+  starHorseFormRef.value.validate((result: boolean) => {
+    if (!result) {
+      return;
+    }
+    doMerge();
+  });
+};
+const mergeDraft = (type: string) => {
+  console.log("mergeDraft", type);
+  doMerge();
+};
+const doMerge = () => {
+  load("数据处理中");
+  postRequest(props.compUrl.mergeUrl!, dataForm.value)
+    .then((res) => {
+      closeLoad();
+      if (res.data.code != 0) {
+        warning(res.data.cnMessage);
+        return;
+      } else {
+        success(res.data.cnMessage);
+      }
+      emits("refresh");
+      resetForm();
+      closeDialog();
+      //关闭弹窗
+    })
+    .catch((err) => {
+      error("接口调用异常" + err);
+    })
+    .finally(() => {
+      closeLoad();
+    });
+};
+const resetForm = () => {
+  assignDefault();
+};
+watch(
+  () => dialogOperation,
+  (val: any) => {
+    if (val["funcName"] == "merge") {
+      merge(val["type"]);
+    } else if (val["funcName"] == "mergeDraft") {
+      mergeDraft(val["type"]);
+    } else if (val["funcName"] == "resetForm") {
+      resetForm();
+    }
+    //为了触发多次点击响应
+    dialogOperation["funcName"] = "";
+    dialogOperation["type"] = "";
+  },
+  {
+    immediate: false,
+    deep: true,
+  },
+);
+watch(
+  () => dialogProps.ids,
+  (val) => {
+    if (val == -2) {
+    } else if (!val || val == -1) {
+      assignDefault();
+    } else {
+      loadData();
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+
+defineExpose({
+  merge,
+  mergeDraft,
+  resetForm,
+  assignDefault,
+});
+</script>
+
+<template>
+  <el-form
+    :model="dataForm"
+    :rules="rules"
+    class="data-form"
+    ref="starHorseFormRef"
+    :disabled="formInfo['disabled'] ?? false"
+    :hide-required-asterisk="formInfo['hideRequiredAsterisk'] ?? false"
+    :inline="formInfo.inline ?? false"
+    :inline-message="formInfo['inlineMessage'] ?? false"
+    :label-position="formInfo['labelPosition']"
+    :label-suffix="formInfo['labelSuffix']"
+    :label-width="formInfo['labelWidth']"
+    :require-asterisk-position="formInfo['requireAsteriskPosition']"
+    :scroll-to-error="formInfo['scrollToError'] ?? true"
+    :show-message="formInfo['showMessage'] ?? true"
+    :size="formInfo['size']"
+    :status-icon="formInfo['statusIcon'] ?? true"
+    :validate-on-rule-change="formInfo['validateOnRuleChange'] ?? true"
+  >
+    <component
+      v-for="(data, key) in fieldList"
+      :key="compKey(data, key, false, 'dyform')"
+      :field="data"
+      :formData="dataForm"
+      :is="itemCheck(data)"
+    />
+    <el-form-item v-if="typeModel == 'tab'">
+      <el-button
+        @click="merge"
+        style="
+          background: var(--star-horse-style);
+          color: var(--star-horse-white);
+        "
+      >
+        <star-horse-icon
+          icon-class="save"
+          style="color: var(--star-horse-white)"
+        />
+        提交
+      </el-button>
+      <el-button @click="resetForm" link>
+        <star-horse-icon icon-class="undo" />
+        重置
+      </el-button>
+    </el-form-item>
+  </el-form>
+</template>
+<style scoped></style>

package/src/components/comp/ShForm.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { ref } from "vue";
+defineProps({
+  needScroller: {
+    type: Boolean,
+    default: true,
+  },
+});
+const shFormRef = ref();
+const dataForm = defineModel("dataForm");
+</script>
+<template>
+  <slot name="header"></slot>
+  <el-form :model="dataForm" v-bind="$attrs" class="data-form" ref="shFormRef">
+    <el-scrollbar height="100%" v-if="needScroller">
+      <template v-if="$slots.default">
+        <slot></slot>
+      </template>
+      <slot v-else name="empty"></slot>
+    </el-scrollbar>
+    <template v-else>
+      <template v-if="$slots.default">
+        <slot></slot>
+      </template>
+      <slot v-else name="empty"></slot>
+    </template>
+  </el-form>
+  <slot name="button"></slot>
+</template>
+<style lang="scss" scoped></style>

package/src/components/comp/ShTableListColumn.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts" name="ShTableListColumn">
+import { createDatetime } from "@/api/date_utils";
+import { parseListData, validMsg } from "@/api/form_utils";
+import { Config } from "@/api/settings";
+import { PropType } from "vue";
+
+const props = defineProps({
+  dataForm: { type: Object, required: true },
+  index: { type: Object, required: true },
+  item: { type: Object as PropType<any>, required: true },
+  staticColumn: { type: String, default: "Y" },
+  primaryKey: { type: [String, Object] as PropType<string | any> },
+  batchName: { type: String, default: "batchDataList" },
+  rules: { type: Object },
+  size: { type: String, default: Config.compSize },
+  source: { type: Number, default: 1 },
+});
+const dataFormat = (val: any) => {
+  const type: string = props.item.type;
+  if (val) {
+    if (type == "date" || type == "datetime") {
+      return createDatetime(val);
+    }
+    if (type == "switch") {
+      return val === true || val == "1" || val == "Y" ? "是" : "否";
+    }
+    if (
+      type == "select" ||
+      type == "radio" ||
+      type == "checkbox" ||
+      type == "cascader" ||
+      type == "tselect"
+    ) {
+      return parseListData(props.item, val);
+    }
+    return val;
+  }
+  return "--";
+};
+</script>
+<template>
+  <template v-if="staticColumn == 'Y'">
+    {{ dataFormat(dataForm[item.fieldName]) }}
+  </template>
+  <el-form-item
+    v-else
+    :size="size"
+    :rules="validMsg(item, dataForm)"
+    :prop="`${batchName}.${index}.${item.fieldName}`"
+  >
+    <star-horse-item
+      :primaryKey="primaryKey"
+      :compSize="size"
+      :batchName="batchName"
+      :item="item"
+      :data-form="dataForm"
+      :source="source"
+    />
+  </el-form-item>
+</template>
+<style scoped></style>

package/src/components/comp/StarHorseDataSelector.vue

@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import { useVModel } from "@vueuse/core";
+import DataTag from "@/components/comp/utils/DataTag.vue";
+import DataPicker, {
+  type ModelValueType,
+} from "@/components/comp/utils/DataPicker.vue";
+import { useFormDisabled } from "element-plus";
+import type { CSSProperties } from "vue";
+import { computed, ref } from "vue";
+import StarHorseIcon from "@/components/comp/StarHorseIcon.vue";
+import { compKey } from "@/api/system";
+
+export interface DataSelectorProps {
+  modelValue: ModelValueType;
+  selectedData?: any;
+  placeholder?: string;
+  dataUrl?: string;
+  datas?: Array<any>;
+  pageSize?: number;
+  title?: string;
+  compSize?: string;
+  displayName?: string;
+  displayValue?: string;
+  multiple?: boolean;
+  disabled?: boolean;
+  checkStrictly?: boolean;
+  style?: CSSProperties;
+}
+
+const props = withDefaults(defineProps<DataSelectorProps>(), {
+  multiple: false,
+  disabled: false,
+  compSize: "small",
+  pageSize: 0,
+  displayName: "name",
+  displayValue: "value",
+  checkStrictly: true,
+  placeholder: "请选择数据",
+});
+const emits = defineEmits<{
+  (e: "update:modelValue", modelValue: ModelValueType): void;
+  (e: "selectedData", selectData: any): void;
+}>();
+const value: any = useVModel(props, "modelValue", emits);
+const emitData: any = useVModel(props, "selectedData", emits);
+const selectData: any = ref<any>();
+const valueArr = computed<string[]>(() => {
+  emitData.value = selectData.value;
+  if (!selectData.value) return [];
+  if (Array.isArray(selectData.value)) {
+    value.value = selectData.value.map((v: any) => v[props.displayValue]);
+    return selectData.value;
+  } else {
+    value.value = selectData.value[props.displayValue];
+    return [selectData.value];
+  }
+});
+const dataPickerRef = ref<InstanceType<typeof DataPicker>>();
+const formDisabled = useFormDisabled();
+const disabled = computed<boolean>(() => {
+  return formDisabled.value || props.disabled;
+});
+const openDataPicker = () => {
+  if (props.disabled) return;
+  dataPickerRef.value?.open();
+};
+const onClose = (data: any) => {
+  if (!selectData.value) return;
+  if (props.multiple && Array.isArray(selectData.value)) {
+    selectData.value.splice(selectData.value.indexOf(data), 1);
+    value.value.splice(selectData.value.indexOf(data[props.displayValue]), 1);
+  } else {
+    selectData.value = null;
+    value.value = null;
+  }
+  emits("selectedData", selectData.value);
+};
+</script>
+
+<template>
+  <data-picker
+    ref="dataPickerRef"
+    :title="title"
+    :datas="datas"
+    :data-url="dataUrl"
+    :page-size="pageSize"
+    :display-name="displayName"
+    :display-value="displayValue"
+    :checkStrictly="checkStrictly"
+    :multiple="multiple"
+    v-model="selectData"
+  />
+  <div class="data-wrapper">
+    <star-horse-icon
+      @click="openDataPicker"
+      cursor="pointer"
+      icon-class="select-data"
+      :border="true"
+    />
+    <DataTag
+      v-for="(item, key) in valueArr"
+      :key="compKey(item, key)"
+      :closable="!disabled"
+      :data="item"
+      :display-name="displayName"
+      :display-value="displayValue"
+      @close="onClose"
+    />
+    <el-text v-show="!value || value.length === 0" class="placeholder">
+      {{ placeholder }}
+    </el-text>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.el-tag {
+  padding: 0 3px;
+}
+
+.data-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  grid-gap: 7px;
+  gap: 7px;
+
+  .placeholder {
+    color: var(--el-text-color-placeholder);
+  }
+
+  .data-but-item {
+    border-style: dashed;
+
+    &:hover {
+      border-style: solid;
+    }
+  }
+}
+</style>

package/src/components/comp/StarHorseDataView.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts" name="StarHorseDataView">
+import { ApiUrls } from "@/components/types/ApiUrls";
+import { inject, nextTick, onMounted, PropType, ref, watch } from "vue";
+import { DialogProps } from "@/components/types/DialogProps";
+import { formFieldMapping, isJson, loadById } from "@/api/star_horse_utils";
+
+const dataForm = ref<any>({});
+const props = defineProps({
+  compUrl: { type: Object as PropType<ApiUrls> },
+  objectName: { type: String },
+  subFormFlag: { type: String, default: "N" },
+  fieldList: { type: Object, required: true },
+  globalCondition: { type: Object },
+  outerData: { type: Object },
+  dynamicForm: { type: Boolean, default: false },
+  primaryKey: {
+    type: [String, Object] as PropType<string | any>,
+    default: "id",
+  },
+  batchFieldName: { type: String, default: "batchFieldList" },
+  dataFormat: { type: Function, default: null },
+});
+const emits = defineEmits(["dataLoaded"]);
+const dialogProps = inject<DialogProps>("dialogProps");
+watch(
+  () => dialogProps?.ids,
+  (val) => {
+    if (val == -2) {
+    } else if (!val || val == -1) {
+      dataForm.value = {};
+    } else {
+      loadData();
+    }
+  },
+  {
+    // immediate: true,
+    deep: true,
+  },
+);
+onMounted(() => {
+  if (dialogProps?.ids) {
+    loadData();
+  }
+});
+const loadData = async () => {
+  await nextTick();
+  let id = Array.isArray(dialogProps?.ids)
+    ? dialogProps.ids[0]
+    : dialogProps?.ids;
+  if (!props.compUrl) {
+    return;
+  }
+  let objData;
+  let params = props.globalCondition || {};
+  //如果是Json 对象
+  if (isJson(id)) {
+    params = { ...params, ...id };
+    objData = await loadById(props.compUrl?.loadByIdForViewUrl!, "", params);
+  } else {
+    objData = await loadById(props.compUrl?.loadByIdForViewUrl!, id, params);
+  }
+  let data = formFieldMapping(props.fieldList);
+  dataForm.value = objData;
+  //如果是动态表单
+  if (props.dynamicForm) {
+    for (let i in params) {
+      let temp = params[i];
+      if (!temp.subTabFlag) {
+        dataForm.value[temp.tableName] = [objData];
+      }
+    }
+  }
+  let mapping = data.mappingFields;
+  if (mapping) {
+    for (let index in mapping) {
+      let temp = mapping[index];
+      dataForm.value[temp.name] = dataForm.value[temp.alias];
+    }
+  }
+  await nextTick(() => {
+    emits("dataLoaded", objData, true);
+  });
+};
+const setData = (data: any) => {
+  dataForm.value = data;
+};
+//更新外面传进来的数据
+watch(
+  () => props.outerData,
+  (val: any) => {
+    if (val) {
+      dataForm.value = { ...dataForm.value, ...val };
+    }
+  },
+  { immediate: true, deep: true },
+);
+defineExpose({
+  setData,
+});
+</script>
+<template>
+  <div class="flex h-full w-full flex-col">
+    <star-horse-data-view-items
+      :commonFormat="dataFormat"
+      :field-list="fieldList"
+      v-model:data-form="dataForm"
+    />
+  </div>
+</template>
+<style lang="scss" scoped></style>

package/src/components/comp/StarHorseDataViewItems.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts" name="StarHorseDataViewObject">
+import { ModelRef, PropType } from "vue";
+import { PageFieldInfo } from "@/components/types/PageFieldInfo";
+import { commonParseCodeToName } from "@/api/star_horse_utils";
+import { compKey } from "@/api/system";
+
+const props = defineProps({
+  // compUrl: {type: Object as PropType<ApiUrls>},
+  fieldList: { type: Object as PropType<PageFieldInfo>, required: true },
+  objectName: { type: String },
+  subFormFlag: { type: String, default: "N" },
+  batchName: { type: String, default: "batchDataList" },
+  batchFieldName: { type: String, default: "batchFieldList" },
+  primaryKey: { type: [String, Object] as PropType<string | any> },
+  commonFormat: { type: Function, required: true },
+});
+const dataForm: ModelRef<any> = defineModel("dataForm");
+const _compKey = compKey;
+const itemCommonFormat = (name: string, cellValue: any, row: any) => {
+  cellValue = commonParseCodeToName(name, cellValue);
+  if (name == "isDel") {
+    return cellValue == 1 ? "是" : "否";
+  }
+  return null == props.commonFormat
+    ? cellValue
+    : props.commonFormat(name, cellValue, row);
+};
+const checkItemType = (item: any) => {
+  if (Array.isArray(item)) {
+    return "view-box-item";
+  } else if (item.cardList?.length > 0) {
+    return "view-card-item";
+  } else if (item.collapseList?.length > 0) {
+    return "view-collapse-item";
+  } else if (item.tabList?.length > 0 || item.batchFieldList?.length > 0) {
+    return "view-tab-item";
+  } else if (item.dytableList?.length > 0) {
+    return "view-dytable-item";
+  } else {
+    return "view-other-item";
+  }
+};
+</script>
+<template>
+  <component
+    v-for="item in fieldList.fieldList"
+    :key="_compKey(item, checkItemType(item))"
+    :is="checkItemType(item)"
+    :item="item"
+    v-model:dataForm="dataForm"
+    :commonFormat="itemCommonFormat"
+  />
+  <view-table-item
+    :item="fieldList"
+    :batch-field-name="batchFieldName"
+    v-model:dataForm="dataForm"
+    :commonFormat="itemCommonFormat"
+  />
+  <div class="h-[30px]"></div>
+</template>
+<style lang="scss" scoped></style>

package/src/components/comp/StarHorseDataViewTable.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts" name="StarHorseDataViewObject">
+import { ModelRef, PropType } from "vue";
+import { FieldInfo } from "@/components/types/PageFieldInfo";
+import { rowClassName } from "@/api/star_horse_utils";
+import { Config } from "@/api/settings";
+import { compKey } from "@/api/system";
+
+defineProps({
+  item: { type: Array as PropType<Array<FieldInfo> | any>, required: true },
+  batchName: { type: String, required: true },
+  compSize: { type: String, default: Config.compSize },
+  commonFormat: { type: Function, required: true },
+});
+const dataForm: ModelRef<any> = defineModel("dataForm");
+</script>
+<template>
+  <div
+    class="flex justify-between w-full"
+    style="border-bottom: var(--star-horse-style) 1px solid"
+  >
+    <div class="tb_title flex flex-row items-center">
+      <star-horse-icon icon-class="info" size="14px" />
+      {{ item.title }}
+    </div>
+    <div class="flex items-center flex-row-reverse"></div>
+  </div>
+  <el-table
+    :data="dataForm ? dataForm[batchName] : []"
+    fit
+    border
+    :stripe="true"
+    :row-class-name="rowClassName"
+    :highlight-current-row="true"
+    :size="compSize"
+    :row-style="{
+      height: '30px',
+    }"
+    :cell-style="{
+      height: '30px',
+      'font-size': '12px',
+    }"
+    :header-cell-style="{
+      background: '#f2f2f2',
+      color: '#707070',
+      'font-size': '13px',
+      'background-image':
+        '-webkit-gradient(linear,left 0,left 100%,from(#f8f8f8),to(#ececec))',
+    }"
+  >
+    <el-table-column label="序号" fixed align="center" prop="xh" width="60" />
+    <template
+      v-for="(aitem, index) in item?.fieldList"
+      :key="compKey(aitem, index)"
+    >
+      <template v-if="Array.isArray(aitem)">
+        <star-horse-table-view-column
+          :commonFormat="commonFormat"
+          :item="sitem"
+          v-for="(sitem, key) in aitem"
+          :key="compKey(sitem, key)"
+        />
+      </template>
+      <template v-else-if="aitem.tabList?.length > 0">
+        <template
+          v-for="(tabItems, key) in aitem.tabList"
+          :key="compKey(tabItems, key)"
+        >
+          <star-horse-table-view-column
+            :commonFormat="commonFormat"
+            :item="sitem"
+            :key="compKey(sitem, skey)"
+            v-for="(sitem, skey) in tabItems.fieldList"
+          />
+        </template>
+      </template>
+      <template v-else-if="aitem.batchFieldList?.length > 0">
+        <template
+          v-for="(batchItems, bkey) in aitem.batchFieldList"
+          :key="compKey(batchItems, bkey)"
+        >
+          <star-horse-table-view-column
+            :commonFormat="commonFormat"
+            :item="sitem"
+            :key="compKey(sitem, skey)"
+            v-for="(sitem, skey) in batchItems.fieldList"
+          />
+        </template>
+      </template>
+      <star-horse-table-view-column
+        :commonFormat="commonFormat"
+        :item="aitem"
+      />
+    </template>
+  </el-table>
+</template>
+<style lang="scss" scoped>
+.el-table {
+  :deep(.cell) {
+    color: #000000;
+  }
+}
+</style>