star-horse-lowcode 2.7.65 → 2.7.66

package/src/components/formcomp/container/dytableUtils.ts

@@ -1,358 +0,0 @@
-import { uuid } from "@/api/system";
-
-/**
- * 定义td 数据
- */
-export const colDataInfo = () => {
-  return { _uuid: uuid(), colspan: 1, rowspan: 1, items: [] };
-};
-/**
- * 左方插入列
- */
-const insertLeftCol = (props: any) => {
-  const rows = props.parentField.preps.elements;
-  const position = props.isFirstCol ? 0 : props.colIndex - 1;
-  for (let index = 0; index < rows.length; index++) {
-    const cols = rows[index].columns;
-    cols.splice(position, 0, colDataInfo());
-  }
-};
-const insertRightCol = (props: any) => {
-  const rows = props.parentField.preps.elements;
-  const position = props.isLastCol ? props.colIndex : props.colIndex + 1;
-  for (let index = 0; index < rows.length; index++) {
-    const cols = rows[index].columns;
-    cols.splice(position, 0, colDataInfo());
-  }
-};
-const insertAboveRow = (props: any) => {
-  const rows = props.parentField.preps.elements;
-  let len = 1;
-  const cols: Array<any> = [];
-  for (let index = 0; index < rows.length; index++) {
-    const colLen = rows[index].columns.length;
-    if (colLen > len) {
-      len = colLen;
-    }
-  }
-  for (let i = 0; i < len; i++) {
-    cols.push(colDataInfo());
-  }
-  const position = props.isFirstRow ? 0 : props.rowIndex - 1;
-  rows.splice(position, 0, cols);
-};
-const insertBelowRow = (props: any) => {
-  const rows = props.parentField.preps.elements;
-  let len = 1;
-  const cols: Array<any> = [];
-  for (let index = 0; index < rows.length; index++) {
-    const colLen = rows[index].columns.length;
-    if (colLen > len) {
-      len = colLen;
-    }
-  }
-  for (let i = 0; i < len; i++) {
-    cols.push(colDataInfo());
-  }
-  const position = props.isLastRow ? props.rowIndex : props.rowIndex + 1;
-  rows.splice(position, 0, cols);
-};
-const tableCellInfo = (props: any) => {
-  const rows = props.parentField.preps.elements;
-  const row = rows[props.rowIndex];
-  const col = row.columns[props.colIndex];
-  return { rows, row, col };
-};
-const mergeLeftCol = (props: any) => {
-  const { row, col } = tableCellInfo(props);
-  col.colspan = col.colspan + 1;
-  row.columns.splice(props.colIndex - 1, 1);
-};
-const mergeRightCol = (props: any) => {
-  const { row, col } = tableCellInfo(props);
-  col.colspan = col.colspan + 1;
-  row.columns.splice(props.colIndex + 1, 1);
-};
-const mergeWholeCol = (props: any) => {
-  const { rows, col } = tableCellInfo(props);
-  // let currentCol: any = {};
-  for (const index in rows) {
-    const row1 = rows[index];
-    const cols = row1.columns;
-    for (const cIndex in cols) {
-      if (cIndex == props.colIndex) {
-        cols.splice(cIndex, 1);
-      }
-    }
-  }
-  col.rowspan = rows.length;
-  rows[0].columns.splice(props.colIndex, 0, col);
-};
-const mergeAboveRow = (props: any) => {
-  const { rows, row, col } = tableCellInfo(props);
-  const aboveRow = rows[props.rowIndex - 1];
-  col.rowspan = col.rowspan + 1;
-  for (const index in aboveRow.columns) {
-    if (index == props.colIndex) {
-      aboveRow.columns.splice(index, 1, col);
-      break;
-    }
-  }
-  for (const index in row.columns) {
-    if (index == props.colIndex) {
-      row.columns.splice(index, 1);
-      break;
-    }
-  }
-};
-const mergeBelowRow = (props: any) => {
-  const { rows, col } = tableCellInfo(props);
-  col.rowspan = col.rowspan + 1;
-  const belowRow = rows[props.rowIndex + 1];
-  for (const index in belowRow.columns) {
-    if (index == props.colIndex) {
-      belowRow.columns.splice(index, 1);
-      break;
-    }
-  }
-};
-const mergeWholeRow = (props: any) => {
-  const { row, col } = tableCellInfo(props);
-  let totalCols: number = 0;
-  for (const index in row.columns) {
-    const col = row.columns[index];
-    totalCols += col.colspan;
-  }
-  col.colspan = totalCols;
-  row.columns = [col];
-};
-/**
- * 需要判断需要还原的周边数据
- * @param props
- */
-const undoMergeRow = (props: any) => {
-  const { rows, row, col } = tableCellInfo(props);
-  if (row.columns.length == 1) {
-    //说明是合并了整行
-    col.colspan = col.colspan - 1;
-    row.columns.splice(props.colIndex, 0, colDataInfo());
-  } else {
-    col.rowspan = col.rowspan - 1;
-    row.columns.splice(props.colIndex, 1, colDataInfo());
-    rows[props.rowIndex + 1].columns.splice(props.colIndex, 0, col);
-  }
-};
-/**
- * 需要判断要还原的周边数据
- * @param props
- */
-const undoMergeCol = (props: any) => {
-  const { rows, row, col } = tableCellInfo(props);
-  //如果 列的行合并和整个表格的行相同，则表示已合并的整列
-  if (col.rowspan == rows.length) {
-    col.rowspan = col.rowspan - 1;
-    //在当前位置插入新的单元格
-    row.columns.splice(props.colIndex, 1, colDataInfo());
-    //将数据移入下一行
-    rows[props.rowIndex + 1].columns.splice(props.colIndex, 0, col);
-  } else {
-    //在同一行合并了单元格
-    col.colspan = col.colspan - 1;
-    row.columns.splice(props.colIndex, 0, colDataInfo());
-  }
-};
-/**
- * 删除整列，在删除列的同时需要，考虑合并的情况，否则有可能导致整行被删除
- * @param props
- */
-const deleteWholeCol = (props: any) => {
-  const rows = props.parentField.preps.elements;
-  for (const index in rows) {
-    const cols = rows[index].columns;
-    for (const sIndex in cols) {
-      if (props.colIndex == sIndex) {
-        cols.splice(sIndex, 1);
-      }
-    }
-  }
-};
-const deleteWholeRow = (props: any) => {
-  props.parentField.preps.elements.splice(props.rowIndex, 1);
-};
-
-/**
- * 单元格操作方法
- * @param command
- * @param props
- */
-export const tableCellOperation = (command: string, props: any) => {
-  switch (command) {
-    case "insertLeftCol":
-      insertLeftCol(props);
-      break;
-    case "insertRightCol":
-      insertRightCol(props);
-      break;
-    case "insertAboveRow":
-      insertAboveRow(props);
-      break;
-    case "insertBelowRow":
-      insertBelowRow(props);
-      break;
-    case "mergeLeftCol":
-      mergeLeftCol(props);
-      break;
-    case "mergeRightCol":
-      mergeRightCol(props);
-      break;
-    case "mergeWholeCol":
-      mergeWholeCol(props);
-      break;
-    case "mergeAboveRow":
-      mergeAboveRow(props);
-      break;
-    case "mergeBelowRow":
-      mergeBelowRow(props);
-      break;
-    case "mergeWholeRow":
-      mergeWholeRow(props);
-      break;
-    case "undoMergeRow":
-      undoMergeRow(props);
-      break;
-    case "undoMergeCol":
-      undoMergeCol(props);
-      break;
-    case "deleteWholeCol":
-      deleteWholeCol(props);
-      break;
-    case "deleteWholeRow":
-      deleteWholeRow(props);
-      break;
-    case "colConfig":
-      console.log();
-  }
-  //操作单元格后再次调用控制按钮函数
-  // tableAction(props, buttonControl);
-};
-const mergeLeftColAction = (props: any) => {
-  const { row, col } = tableCellInfo(props);
-  if (!row || !row.columns?.length) {
-    return true;
-  }
-  const leftCol = row.columns[props.colIndex - 1];
-  return col.rowspan > 1 && leftCol
-    ? leftCol.rowspan != col.rowspan
-    : props.isFirstCol;
-};
-const mergeRightColAction = (props: any) => {
-  const { row, col } = tableCellInfo(props);
-  if (!row || !row.columns?.length) {
-    return true;
-  }
-  const rightCol = row.columns[props.colIndex + 1];
-  return col.rowspan > 1 && rightCol
-    ? rightCol.rowspan != col.rowspan
-    : props.isLastCol;
-};
-const mergeWholeColAction = (props: any) => {
-  return colCommonAction(props);
-};
-const mergeAboveRowAction = (props: any) => {
-  const { rows, col } = tableCellInfo(props);
-  const aboveRow = rows[props.rowIndex - 1];
-  if (!aboveRow || !aboveRow.columns.length) {
-    return true;
-  }
-  const aboveCol = aboveRow?.columns[props.colIndex];
-  if (!aboveCol || col.colspan != aboveCol.colspan) {
-    return true;
-  }
-  return props.isFirstRow;
-};
-const mergeBelowRowAction = (props: any) => {
-  const { rows, col } = tableCellInfo(props);
-  const belowRow = rows[props.rowIndex + 1];
-  if (!belowRow || !belowRow.columns?.length) {
-    return true;
-  }
-  const belowCol = belowRow?.columns[props.colIndex];
-  if (!belowCol || col.colspan != belowCol.colspan) {
-    return true;
-  }
-  return props.isLastRow;
-};
-const mergeWholeRowAction = (props: any) => {
-  return rowCommonAction(props);
-};
-const colCommonAction = (props: any) => {
-  const { rows, col } = tableCellInfo(props);
-  for (const index in rows) {
-    const tempRow = rows[index];
-    if (!tempRow || !tempRow.columns?.length) {
-      return true;
-    }
-    const tempCol = tempRow.columns[props.colIndex];
-    if (!tempCol || tempCol.colspan != col.colspan) {
-      // console.log(tempCol, col);
-      return true;
-    }
-  }
-  return false;
-};
-const rowCommonAction = (props: any) => {
-  const { row, col } = tableCellInfo(props);
-
-  for (const index in row.columns) {
-    const tempCol = row.columns[index];
-    if (col.rowspan != tempCol.rowspan) {
-      return true;
-    }
-  }
-  return false;
-};
-const deleteWholeColAction = (props: any) => {
-  return colCommonAction(props);
-};
-const deleteWholeRowAction = (props: any) => {
-  return rowCommonAction(props);
-};
-const undoMergeRowAction = (props: any) => {
-  const { rows, col } = tableCellInfo(props);
-  let columns: number = 0;
-  for (const index in rows) {
-    const len = rows[index].columns?.length;
-    if (columns < len) {
-      columns = len;
-    }
-  }
-  if (columns == col.colspan && col.colspan > 1) {
-    return false;
-  }
-  return props.field.rowspan == 1;
-};
-const undoMergeColAction = (props: any) => {
-  const { rows, col } = tableCellInfo(props);
-  // console.log(rows.length, col);
-  if (rows.length == col.rowspan && col.rowspan > 1) {
-    return false;
-  }
-  return props.field.colspan == 1;
-};
-/**
- * 单元格按钮是否可点击控制
- * @param props
- * @param buttonControl 按钮控制
- */
-export const tableAction = (props: any, buttonControl: any) => {
-  buttonControl.mergeLeftColDisabled = mergeLeftColAction(props);
-  buttonControl.mergeRightColDisabled = mergeRightColAction(props);
-  buttonControl.mergeWholeColDisabled = mergeWholeColAction(props);
-  buttonControl.mergeAboveRowDisabled = mergeAboveRowAction(props);
-  buttonControl.mergeBelowRowDisabled = mergeBelowRowAction(props);
-  buttonControl.mergeWholeRowDisabled = mergeWholeRowAction(props);
-  buttonControl.deleteWholeColDisabled = deleteWholeColAction(props);
-  buttonControl.deleteWholeRowDisabled = deleteWholeRowAction(props);
-  buttonControl.undoMergeRowDisabled = undoMergeRowAction(props);
-  buttonControl.undoMergeColDisabled = undoMergeColAction(props);
-};

package/src/components/formcomp/container/group-box-container.vue

@@ -1,331 +0,0 @@
-<script setup lang="ts" name="GroupBoxContainer">
-import { operationConfirm, warning } from "@/utils/message";
-import piniaInstance from "@/store/index";
-import { useDesignFormStore } from "@/store/DesignForm";
-import { computed, ref } from "vue";
-import { colDataInfo } from "@/components/formcomp/container/dytableUtils";
-import { dynamicFormContextMenuData } from "@/plugins/AblesPlugin";
-import FieldList from "@/components/formcomp/utils/FieldList.vue";
-import StarHorseDialog from "@/components/comp/StarHorseDialog.vue";
-import { fieldCopy } from "@/utils/FieldOperationUtils";
-
-const props = defineProps({
-  isDesign: { type: Boolean, default: false },
-  disabled: { type: Boolean, default: false },
-  parentField: { type: Object },
-  formItem: { type: Object, required: true },
-});
-let designForm = useDesignFormStore(piniaInstance);
-let compList = computed(() => designForm.compList);
-let currentItemId = computed(() => designForm.currentItemId);
-let componentVisible = computed(() => {
-  return (
-    designForm.componentVisible &&
-    currentItemId.value == props.formItem?.preps.id
-  );
-});
-let isEdit = computed(() => props.isDesign);
-const selectData = () => {
-  let container = props.formItem;
-  designForm.selectItem(container, container?.itemType, "");
-};
-const removeData = () => {
-  operationConfirm("删除容器，容器内的所有元素都会被删除").then((res) => {
-    if (res) {
-      let id = props.formItem.preps?.id || props.formItem.id;
-      if (props.parentField?.itemType == "tab") {
-        let elements = props.parentField!.preps.elements;
-        for (let i = 0; i < elements.length; i++) {
-          let items = elements[i].items;
-          for (let j = 0; j < items.length; j++) {
-            if (id === items[j]?.id) {
-              items.splice(j, 1);
-              return;
-            }
-          }
-        }
-      } else if (props.parentField?.itemType == "box") {
-      } else {
-        let dataList = compList.value;
-        for (let i = 0; i < dataList.length; i++) {
-          if (id === dataList[i].id) {
-            dataList.splice(i, 1);
-          }
-        }
-      }
-    }
-  });
-};
-const containerContextMenuRef = ref();
-const containerContextMenu = (evt: MouseEvent | any) => {
-  if (!isEdit.value) return;
-  evt.stopPropagation();
-  evt.preventDefault();
-  evt.props = props;
-  containerContextMenuRef.value?.show(evt);
-};
-const close = () => {
-  designForm.setComponentVisible(false);
-};
-const addItem = (item: any) => {
-  let type = item.category == 2 ? "container" : "formItem";
-  let data = fieldCopy(item, type);
-  let itemType = props.formItem.itemType;
-  let activeItemName = props.formItem.activeItemName;
-  let elements = props.formItem.preps.elements;
-  for (let index in elements) {
-    let element = elements[index];
-    if (activeItemName && activeItemName != element.tabName) {
-      continue;
-    }
-    let columns = element.columns;
-    if (!columns) {
-      let items = element.items;
-      if (itemType == "table") {
-        if (items.length == 0) {
-          items.push(data);
-          return;
-        }
-      } else {
-        items.push(data);
-        return;
-      }
-    }
-    for (let colIndex in columns) {
-      let col = columns[colIndex];
-      if (col.items.length == 0) {
-        col.items.push(data);
-        return;
-      }
-    }
-  }
-};
-const tableOperation = (actonName: string, _preps: any) => {
-  let preps = props.formItem.preps;
-  if (!preps.elements) {
-    preps["elements"] = [];
-  }
-  let isBox = props.formItem.itemType == "box";
-  if (actonName == "insertRow") {
-    //获取最大的数字
-    let rows: Array<any> = preps.elements;
-    if (rows.length > 0) {
-      let columns: Array<any> = [];
-      let len: number = 1;
-      for (let index in rows) {
-        let colLen = rows[index]?.columns?.length;
-        if (colLen > len) {
-          len = colLen;
-        }
-      }
-      for (let i = 0; i < len; i++) {
-        let col = colDataInfo();
-        if (isBox) {
-          col.colspan = 24 / len;
-        }
-        columns.push(col);
-      }
-      preps.elements.push({
-        columns: columns,
-      });
-    } else {
-      let col = colDataInfo();
-      if (isBox) {
-        col.colspan = 24;
-      }
-      preps.elements.push({
-        columns: [],
-      });
-    }
-  } else if (actonName == "insertCol") {
-    if (props.formItem.itemType == "table") {
-      preps.columns = (preps.columns || 1) + 1;
-      return;
-    }
-    for (let index in preps.elements) {
-      let row: any = preps.elements[index];
-      if (!row.columns) {
-        row["columns"] = [];
-      }
-      let col = colDataInfo();
-      if (isBox) {
-        col.colspan = 24 / (row.columns.length + 1);
-        row.columns.forEach((item: any) => {
-          item.colspan = col.colspan;
-        });
-      }
-      row.columns.push(col);
-    }
-  } else if (actonName == "copy") {
-    //拷贝容器
-    warning("功能开发中");
-  }
-};
-</script>
-<template>
-  <star-horse-dialog
-    box-width="450px"
-    :is-view="true"
-    :full-screen="false"
-    title="添加组件"
-    :self-func="true"
-    :dialog-visible="componentVisible"
-    @closeAction="close"
-  >
-    <template #footer>
-      <el-button type="primary" size="default" @click="close">确定</el-button>
-    </template>
-    <field-list @selectData="addItem" />
-  </star-horse-dialog>
-  <div
-    class="field-item"
-    v-if="isEdit && isDesign"
-    @contextmenu="containerContextMenu"
-  >
-    <slot></slot>
-    <div
-      class="drag-handler"
-      v-if="isEdit && isDesign && currentItemId == formItem.id"
-    >
-      <el-tooltip content="拖动">
-        <star-horse-icon
-          icon-class="drag"
-          size="18px"
-          style="color: var(--star-horse-white)"
-        />
-      </el-tooltip>
-      <el-tooltip content="选中容器">
-        <star-horse-icon
-          cursor="pointer"
-          @click.stop="selectData"
-          icon-class="select-parent"
-          style="color: var(--star-horse-white)"
-        />
-      </el-tooltip>
-      <el-tooltip content="删除容器">
-        <star-horse-icon
-          cursor="pointer"
-          @click.stop="removeData"
-          icon-class="clear-all"
-          style="color: var(--star-horse-white)"
-        />
-      </el-tooltip>
-    </div>
-    <div
-      class="field-action"
-      v-if="isEdit && isDesign && currentItemId == formItem.id"
-    >
-      <template
-        v-if="formItem.itemType == 'dytable' || formItem.itemType == 'box'"
-      >
-        <el-tooltip content="插入行">
-          <star-horse-icon
-            @click.stop="tableOperation('insertRow', formItem?.preps)"
-            icon-class="insert_row"
-            cursor="pointer"
-            style="color: var(--star-horse-white)"
-          />
-        </el-tooltip>
-      </template>
-      <template
-        v-if="
-          formItem.itemType == 'dytable' ||
-          formItem.itemType == 'box' ||
-          formItem.itemType == 'table'
-        "
-      >
-        <el-tooltip content="插入列">
-          <star-horse-icon
-            @click.stop="tableOperation('insertCol', formItem?.preps)"
-            icon-class="insert_col"
-            cursor="pointer"
-            style="color: var(--star-horse-white)"
-          />
-        </el-tooltip>
-      </template>
-      <el-tooltip content="复制容器">
-        <star-horse-icon
-          @click.stop="tableOperation('copy', formItem?.preps)"
-          icon-class="copy"
-          style="color: var(--star-horse-white)"
-        />
-      </el-tooltip>
-    </div>
-    <Teleport to="body">
-      <ContentMenu
-        ref="containerContextMenuRef"
-        :menu-data="
-          dynamicFormContextMenuData(formItem, parentField, 'container')
-        "
-      />
-    </Teleport>
-  </div>
-  <div class="field-item" style="border: unset" v-else>
-    <slot></slot>
-  </div>
-</template>
-<style lang="scss" scoped>
-.field-item {
-  border: 1px dashed #e6a23c;
-}
-
-.el-form-item {
-  position: relative;
-
-  :deep(.el-form-item__label) {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  span.custom-label .icon-cls {
-    margin: 0 3px;
-  }
-
-  :deep(.hide-spin-button) input::-webkit-outer-spin-button,
-  :deep(.hide-spin-button) input::-webkit-inner-spin-button {
-    -webkit-appearance: none !important;
-  }
-
-  :deep(.hide-spin-button) input[type="number"] {
-    -moz-appearance: textfield;
-  }
-}
-
-.required :deep(.el-form-item__label)::before {
-  content: "*";
-  color: #f56c6c;
-  margin-right: 4px;
-}
-
-.static-content-item {
-  min-height: 20px;
-  display: flex;
-  /* 垂直居中 */
-  align-items: center;
-
-  /* 垂直居中 */
-  :deep(.el-divider--horizontal) {
-    margin: 0;
-  }
-}
-
-.el-form-item.selected,
-.static-content-item.selected {
-  outline: 2px solid var(--star-horse-style);
-}
-
-:deep(.label-left-align) .el-form-item__label {
-  text-align: left;
-  justify-content: flex-start !important;
-}
-
-:deep(.label-center-align) .el-form-item__label {
-  text-align: center;
-  justify-content: center !important;
-}
-
-:deep(.label-right-align) .el-form-item__label {
-  text-align: right;
-  justify-content: flex-end !important;
-}
-</style>

package/src/components/formcomp/container/index.ts

@@ -1,6 +0,0 @@
-export { default as boxContainer } from "./box-container.vue";
-export { default as cardContainer } from "./card-container.vue";
-export { default as collapseContainer } from "./collapse-container.vue";
-export { default as dytableContainer } from "./dytable-container.vue";
-export { default as tabContainer } from "./tab-container.vue";
-export { default as tableContainer } from "./table-container.vue";