star-horse-lowcode 2.7.62 → 2.7.65

package/src/components/comp/StarHorseFormList.vue

@@ -0,0 +1,516 @@
+<script lang="ts" setup name="StarHorseFormList">
+import {inject, ModelRef, nextTick, onMounted, PropType, ref, ShallowReactive, watch,} from "vue";
+import {ApiUrls} from "@/components/types/ApiUrls";
+import StarHorseIcon from "@/components/comp/StarHorseIcon.vue";
+import {rowClassName} from "@/api/star_horse_utils";
+import {error, operationConfirm, success, warning} from "@/utils/message";
+import {download} from "@/api/star_horse_apis";
+import {getToken} from "@/utils/auth";
+import Sortable from "sortablejs";
+import Help from "@/components/help.vue";
+import {compKey, uuid} from "@/api/system";
+import UTableColumn from "@/components/comp/items/UTableColumn.vue";
+import StarHorseForm from "@/components/comp/StarHorseForm.vue";
+import {Config} from "@/api/settings";
+import {FieldInfo} from "@/components/types";
+
+let importDialogVisible = ref<boolean>(false);
+let rowDialogVisible = ref<boolean>(false);
+const rowDataFormRef = ref();
+const props = defineProps({
+  compUrl: {type: Object as PropType<ApiUrls>},
+  fieldList: {type: Object as PropType<FieldInfo[]>, required: true},
+  defaultValues: {type: Object, default: {}},
+  batchName: {type: String, default: "batchDataList"},
+  primaryKey: {type: [String, Object] as PropType<string | any>},
+  initRows: {type: Number, default: 0},
+  importInfo: {type: Object as PropType<any>},
+  title: {type: String, default: ""},
+  helpMsg: {type: String, default: ""},
+  rules: {type: Object},
+  staticColumn: {type: String, default: "Y"},
+  size: {type: String, default: Config.compSize},
+  source: {type: Number, default: 1},
+  showCheckBox: {type: Boolean, default: false},
+  selectAll: {type: Boolean, default: false},
+  subFlag: {type: Boolean, default: false},
+});
+const emits = defineEmits(["addRow", "removeRow", "inited"]);
+const dataForm: ModelRef<any> = defineModel("dataForm");
+const formFields = inject("formFields", {}) as ShallowReactive<any>;
+const loading = ref(null);
+const starHorseFormListRef = ref(null);
+
+const handleAddDetails = (row: any, type: number) => {
+  if (props.staticColumn == "Y" && type != 2) {
+    dynamicHandleAddForm(row, "add");
+  } else {
+    dynamicHandleAddRow(row, type);
+  }
+};
+let currentRow = ref<any>({});
+/**
+ * 编辑当前行的数据
+ * @param row
+ * @param type
+ */
+const dynamicHandleAddForm = async (row: any, type: string) => {
+  currentRow.value = row;
+  rowDialogVisible.value = true;
+  if (!dataForm.value[props.batchName]) {
+    dataForm.value[props.batchName] = [];
+  }
+  await nextTick();
+  rowDataFormRef.value.setFormData(row);
+};
+const mergeData = async (type: string) => {
+  let flag = false;
+  let formRef = rowDataFormRef.value.$refs.starHorseFormRef;
+  await formRef.validate((res: any) => (flag = res));
+  if (!flag) {
+    return;
+  }
+  let formData = rowDataFormRef.value.getFormData().value;
+  if (formData.xh) {
+    dataForm.value[props.batchName][formData.xh - 1] = formData;
+  } else {
+    dataForm.value[props.batchName].push(formData);
+  }
+  if (type == "close") {
+    closeAction();
+  }else{
+    rowDataFormRef.value.resetForm();
+  }
+};
+const closeAction = () => {
+  rowDialogVisible.value = false;
+};
+
+/**
+ * 动态添加行
+ * @param row
+ * @param type
+ */
+const dynamicHandleAddRow = (row: any, type: number) => {
+  if (!dataForm.value[props.batchName]) {
+    dataForm.value[props.batchName] = [];
+  }
+  if (type === 1) {
+    let obj = JSON.parse(JSON.stringify(props.defaultValues || {}));
+    obj["_uuid"] = uuid();
+    dataForm.value[props.batchName].push(obj);
+    emits("addRow", row);
+  } else {
+    let index = row.xh - 1;
+    formFields && formFields[props.batchName]?.splice(index, 1);
+    dataForm.value[props.batchName].splice(index, 1);
+    emits("removeRow", row);
+  }
+  //将事件传出去
+  let fieldList = props.fieldList;
+  for (let ind in fieldList) {
+    let temp = fieldList[ind];
+    if (typeof temp.actions == "function") {
+      temp.actions(dataForm, "oper");
+    }
+  }
+  // 修改后的滚动逻辑：
+  nextTick(() => {
+    const tryScroll = (attempt = 0) => {
+      const tableEl = starHorseFormListRef.value?.$el;
+      const scrollContainer = tableEl?.querySelector(
+          ".el-table--scrollable-y .el-scrollbar__wrap",
+      );
+      if (scrollContainer) {
+        // 仅在新行添加时滚动（type=1）
+        if (type === 1) {
+          scrollContainer.scrollTop =
+              scrollContainer.scrollHeight - scrollContainer.clientHeight;
+        }
+      } else if (attempt < 3) {
+        // 最多重试3次
+        setTimeout(() => tryScroll(attempt + 1), 50);
+      }
+    };
+
+    tryScroll();
+  });
+};
+const getRowIdentity = (row: any) => {
+  return (row.xh || 0) + 1;
+};
+//批量操作
+const excelOperation = () => {
+  importDialogVisible.value = true;
+};
+/**
+ * 下载模板
+ */
+const downloadTemplate = () => {
+  download(props.importInfo!.downloadTemplateUrl, {}).catch((err) => {
+    error("接口不存在或网络异常:" + err);
+  });
+};
+/**
+ * 上传失败
+ * @param _err err
+ * @param _file file
+ * @param _fileList fileList
+ */
+const uploadError = (_err: any, _file: any, _fileList: any) => {
+  warning("导入数据失败");
+};
+/**
+ * 上传成功
+ */
+const uploadSuccess = (response: any, _file: any, _fileList: any) => {
+  if (response.code != 0) {
+    warning("数据解析异常");
+    return;
+  }
+  success("导入成功");
+  dataForm.value[props.batchName] = response.data;
+  importDialogVisible.value = false;
+};
+let currentItem = ref<any>({});
+const selectData = (item: any) => {
+  currentItem.value = item.row;
+};
+const moveColumn = () => {
+  const tableEl = starHorseFormListRef.value?.$el;
+  const tbody = tableEl?.querySelector(".el-table__body tbody");
+  if (tbody) {
+    // 强制清除旧实例
+    const oldInstance = Sortable.get(tbody);
+    oldInstance?.destroy();
+    Sortable.create(tbody, {
+      handle: ".move",
+      animation: 200,
+      ghostClass: "ghost",
+      forceFallback: true,
+      onStart: () => {
+        console.log("开始拖动");
+        tbody.style.cursor = "move"; // 拖动时改变光标
+      },
+      onEnd(event: any) {
+        const {oldIndex, newIndex} = event;
+        if (oldIndex === newIndex) {
+          return;
+        }
+        // 新增数据交换逻辑
+        const data: any = dataForm.value[props.batchName];
+        const movedItem = data.splice(oldIndex, 1)[0];
+        data.splice(newIndex, 0, movedItem);
+        // 新增序号同步逻辑
+        data.forEach((item: any, index: number) => {
+          item.xh = index + 1; // 更新序号
+          if (formFields && formFields[props.batchName]) {
+            const fieldItem = formFields[props.batchName][index];
+            if (fieldItem) fieldItem.xh = index + 1; // 同步更新表单字段
+          }
+        });
+      },
+    });
+  }
+};
+const clearAll = () => {
+  if (dataForm.value[props.batchName].length == 0) {
+    return;
+  }
+  operationConfirm("确定要清空吗?").then(() => {
+    dataForm.value[props.batchName] = [];
+  });
+};
+const init = async () => {
+  // console.log(Object.keys(dataForm.value), props.batchName);
+  if (!Object.keys(dataForm.value).includes(props.batchName)) {
+    dataForm.value[props.batchName] = [];
+  }
+  /**
+   * 如果列表为空的情况才初始化行数
+   */
+  if (props.staticColumn == "N") {
+    if (dataForm.value[props.batchName]?.length == 0) {
+      for (let i = 0; i < props.initRows; i++) {
+        handleAddDetails(null, 1);
+      }
+    }
+  }
+  moveColumn();
+  await nextTick();
+  emits("inited");
+};
+onMounted(async () => {
+  await init();
+});
+watch(
+    () => dataForm.value[props.batchName],
+    (val) => {
+      if (val && val.length > 0 && props.showCheckBox && props.selectAll) {
+        nextTick(() => {
+          // 改用原生全选方法
+          starHorseFormListRef.value?.toggleAllSelection(true);
+        });
+      }
+    },
+    {
+      immediate: false,
+      deep: true,
+    },
+);
+</script>
+<template>
+  <star-horse-dialog
+      :title="'编辑数据'"
+      :dialogVisible="rowDialogVisible"
+      :boxWidth="'50%'"
+      :is-show-btn-continue="true"
+      :selfFunc="true"
+      @merge="mergeData"
+      @closeAction="closeAction"
+  >
+    <star-horse-form
+        :fieldList="{ fieldList: fieldList }"
+        ref="rowDataFormRef"
+    />
+  </star-horse-dialog>
+  <star-horse-dialog
+      v-if="!subFlag"
+      :title="'导入文件'"
+      :dialogVisible="importDialogVisible"
+      :boxWidth="'30%'"
+      :source="3"
+      :draggable="false"
+      @closeAction="importDialogVisible = false"
+  >
+    <el-card>
+      <el-upload
+          :auto-upload="true"
+          :on-error="uploadError"
+          :on-success="uploadSuccess"
+          :show-file-list="false"
+          accept=".xls,.xlsx"
+          :action="importInfo!.importDataUrl"
+          :headers="{ token: getToken() }"
+          class="upload"
+          name="file"
+          drag
+      >
+        <el-icon class="el-icon--upload">
+          <upload-filled/>
+        </el-icon>
+        <div class="el-upload__text">
+          拖拽文件到这里 or
+          <em>点击上传</em>
+        </div>
+        <template #tip>
+          <div class="el-upload__tip">
+            只能上传 xls/xlsx 文件类型
+            <el-button
+                @click="downloadTemplate"
+                title=""
+                :size="size"
+                link
+                v-if="importInfo?.downloadTemplateUrl"
+            >
+              <star-horse-icon
+                  icon-class="download"
+                  color="var(--star-horse-white)"
+                  size="12px"
+              />
+              <el-tooltip content="下载模板">下载模板</el-tooltip>
+            </el-button>
+          </div>
+        </template>
+      </el-upload>
+    </el-card>
+  </star-horse-dialog>
+  <div class="form-list">
+    <div class="dynamic-tools">
+      <div class="flex items-center" v-if="!subFlag">
+        <star-horse-icon icon-class="config" size="14px"/>
+        {{ title }}
+        <help v-if="helpMsg" :message="helpMsg" :width="400"/>
+      </div>
+      <div class="flex items-center">
+        <ul class="inner_button" v-if="source != 3">
+          <li
+              v-if="importInfo?.importDataUrl && !subFlag"
+              @click="excelOperation"
+          >
+            <el-tooltip content="导入Excel">
+              <star-horse-icon
+                  icon-class="upload"
+                  color="var(--star-horse-style)"
+                  size="18px"
+              />
+            </el-tooltip>
+          </li>
+          <li @click="clearAll">
+            <el-tooltip content="清空列表">
+              <star-horse-icon
+                  icon-class="dustbin"
+                  color="var(--el-color-danger)"
+                  size="18px"
+              />
+            </el-tooltip>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <el-table
+        v-loading="loading"
+        :data="dataForm[batchName]"
+        fit
+        border
+        sortable
+        :size="size"
+        :strip="true"
+        :row-key="getRowIdentity"
+        :highlight-current-row="true"
+        :row-class-name="rowClassName"
+        ref="starHorseFormListRef"
+        class="sh-columns"
+        :stripe="true"
+        :virtual="true"
+        :virtual-scroll-threshold="10"
+        :virtual-scroll-options="{
+        scrollSensitivity: 60,
+        scrollDebounce: 20,
+      }"
+        :use-virtual="dataForm[batchName]?.length > 10"
+        :header-cell-style="{
+        background: '#f2f2f2',
+        color: '#707070',
+        'font-size': '12px',
+        'background-image':
+          '-webkit-gradient(linear,left 0,left 100%,from(#f8f8f8),to(#ececec))',
+      }"
+        :cell-style="{ 'font-size': '12px' }"
+    >
+      <el-table-column
+          type="selection"
+          fixed="left"
+          width="50"
+          align="center"
+          v-if="showCheckBox"
+      />
+      <el-table-column label="序号" align="center" prop="xh" width="50"/>
+      <el-table-column prop="" label="排序" width="60">
+        <template #default="scope">
+          <el-tag
+              class="move"
+              style="cursor: move"
+              @mousedown="selectData(scope)"
+          >
+            <el-icon style="cursor: move">
+              <Sort/>
+            </el-icon>
+          </el-tag>
+        </template>
+      </el-table-column>
+      <template v-for="(item, key) in fieldList" :key="compKey(item, key)">
+        <template v-if="Array.isArray(item)">
+          <UTableColumn
+              :item="temp"
+              :key="compKey(temp, skey)"
+              v-for="(temp, skey) in item"
+              :size="size"
+              :rules="rules"
+              :source="source"
+              :batchName="batchName"
+              :primaryKey="primaryKey"
+              :staticColumn="staticColumn"
+          />
+        </template>
+        <template v-else-if="item.formVisible">
+          <UTableColumn
+              :item="item"
+              :size="size"
+              :rules="rules"
+              :source="source"
+              :batchName="batchName"
+              :primaryKey="primaryKey"
+              :staticColumn="staticColumn"
+          />
+        </template>
+      </template>
+      <el-table-column fixed="right" label="操作" width="80">
+        <template #default="scope" v-if="source != 3">
+          <star-horse-icon
+              icon-class="edit"
+              v-if="staticColumn == 'Y'"
+              @click="dynamicHandleAddForm(scope.row, 'edit')"
+              title="编辑"
+          />
+          <star-horse-icon
+              icon-class="delete"
+              @click="handleAddDetails(scope.row, 2)"
+              title="删除当前行"
+              color="#f56c6c"
+          />
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="add-row" v-if="source != 3" @click="handleAddDetails(null, 1)">
+      <star-horse-icon icon-class="plus" color="var(--star-horse-style)"/>
+      {{ staticColumn == "Y" ? "添加数据" : "加一行" }}
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+:deep(.el-table__cell) {
+  padding: 0;
+}
+
+:deep(.cell) {
+  display: flex;
+}
+
+.dynamic-tools {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  align-items: center;
+  height: 30px;
+  border-bottom: var(--star-horse-style) 1px solid;
+}
+
+.form-list {
+  display: flex;
+  flex-direction: column;
+  width: 99%;
+  margin: 0 auto;
+  flex: 1;
+  height: 100%;
+  overflow: hidden;
+
+  .inner_button {
+    height: unset;
+  }
+
+  .el-table {
+    flex: 1;
+    min-height: 100px;
+  }
+}
+
+:deep(th.el-table__cell:first-child) {
+  padding: 5px 0;
+}
+
+:deep(.el-form-item) {
+  font-size: 11px;
+  /* margin-bottom: 1px;*/
+}
+
+:deep(.el-input__inner),
+:deep(el-select) {
+  height: 25px;
+  font-size: 12px;
+}
+
+:deep(.el-select) {
+  line-height: 25px;
+}
+</style>

package/src/components/comp/StarHorseFormTable.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts" name="StarHorseFormItem">
+import { Config } from "@/api/settings";
+import { batchFieldDefaultValues } from "@/api/star_horse_utils";
+import { ModelRef, PropType, ref } from "vue";
+
+defineProps({
+  item: { type: Object as PropType<any>, required: true },
+  rules: { type: Object },
+  initRows: { type: Number, default: 0 },
+  size: { type: String, default: Config.compSize },
+  source: { type: Number, default: 1 },
+});
+const emits = defineEmits(["addRow", "removeRow"]);
+const dataForm: ModelRef<any> = defineModel("dataForm");
+const currentTableRef = ref();
+/**
+ * 列表添加行数据
+ * @param row
+ */
+const addRow = (row: any) => {
+  emits("addRow", row);
+};
+/**
+ * 列表删除行数据
+ * @param row
+ */
+const removeRow = (row: any) => {
+  emits("removeRow", row);
+};
+</script>
+<template>
+  <star-horse-form-list
+    style="min-height: 100px"
+    v-model:dataForm="dataForm"
+    :compUrl="item['compUrl']"
+    :primaryKey="item['primaryKey']"
+    :batchName="item['batchName']"
+    :initRows="item['initRows']"
+    :batchUrl="item['batchUrl']"
+    :title="item['title']"
+    :size="size"
+    @addRow="addRow"
+    @removeRow="removeRow"
+    v-if="Object.keys(item).includes('disVisible') ? item['disVisible'] : true"
+    :helpMsg="item['helpMsg']"
+    :staticColumn="item.staticColumn ?? 'Y'"
+    :downloadTemplateUrl="item['downloadTemplateUrl']"
+    :importInfo="item['importInfo']"
+    :defaultValues="batchFieldDefaultValues(item, dataForm)"
+    ref="currentTableRef"
+    :fieldList="item['fieldList']"
+    :source="source"
+    :rules="item['rules'] || rules"
+  />
+</template>
+<style lang="scss" scoped></style>

package/src/components/comp/StarHorseIcon.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts" name="StarHorseIcon">
+import { computed } from "vue";
+
+const props = defineProps({
+  iconClass: { type: String, required: true },
+  className: { type: String },
+  title: { type: String, default: "" },
+  size: { type: String, default: "20px" },
+  marginLeft: { type: String, default: "0.1em" },
+  marginRight: { type: String, default: "0.2em" },
+  borderRadius: { type: String, default: "5px" },
+  borderPadding: { type: String, default: "3px" },
+  // 图标是否有边框
+  boxShow: { type: Boolean, default: false },
+  border: { type: Boolean, default: false },
+  color: { type: String, default: "var(--star-horse-style)" },
+  cursor: { type: String, default: "default" },
+});
+const iconName = computed(() => `sh-${props.iconClass}`);
+const sizeNumber = computed(() => {
+  const numberMatch = props.size.match(/\d+/); // 正则匹配连续数字
+  return numberMatch ? Number(numberMatch[0]) : 0; // 转换为数值，无匹配时返回0
+});
+const width = computed(() =>
+  sizeNumber.value ? `${sizeNumber.value + 2}px` : props.size,
+);
+const height = computed(() =>
+  sizeNumber.value ? `${sizeNumber.value + 2}px` : props.size,
+);
+const svgClass = computed(() => {
+  let cls = props.border
+    ? "sh_icon svg-icon icon-border"
+    : props.boxShow
+      ? "sh_icon svg-icon icon-cls"
+      : "sh_icon svg-icon";
+  if (props.className) {
+    return cls + " " + props.className;
+  } else {
+    return cls;
+  }
+});
+</script>
+<style lang="scss" scoped>
+.svg-icon {
+  cursor: v-bind(cursor);
+  width: v-bind(width);
+  height: v-bind(height);
+  color: v-bind(color);
+  font-size: v-bind(size);
+  margin-left: v-bind(marginLeft);
+  margin-right: v-bind(marginRight);
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+  outline: none;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+}
+
+.icon-border {
+  border-radius: v-bind(borderRadius);
+  border: 1px solid var(--star-horse-style);
+  padding: v-bind(borderPadding);
+}
+
+.icon-cls {
+  background: var(--star-horse-style);
+  color: var(--star-horse-white);
+  border-radius: v-bind(borderRadius);
+  padding: v-bind(borderPadding);
+}
+</style>
+<template>
+  <i aria-hidden="false" :class="[svgClass, iconName]" :title="title" />
+</template>