star-horse-lowcode 2.7.65 → 2.7.66

package/src/components/comp/StarHorseFormList.vue

@@ -1,516 +0,0 @@
-<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

@@ -1,56 +0,0 @@
-<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

@@ -1,76 +0,0 @@
-<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>