star-horse-lowcode 2.7.62 → 2.7.65

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

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

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

@@ -0,0 +1,6 @@
+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";