star-horse-lowcode 2.7.63 → 2.7.65

package/src/components/formcomp/container/tab-container.vue

@@ -0,0 +1,153 @@
+<script setup lang="ts" name="tab-container">
+import { computed, onMounted, PropType, ref, watch } from "vue";
+import { useDesignFormStore } from "@/store/DesignForm";
+import piniaInstance from "@/store/index";
+import { compKey, itemCheck, uuid } from "@/api/system";
+
+const props = defineProps({
+  parentField: { type: String },
+  isDesign: { type: Boolean, default: false },
+  showFormItem: { type: Boolean, default: false },
+  disabled: { type: Object as PropType<Boolean | String> },
+  formInfo: { type: Object as PropType<any> },
+  field: { type: Object as PropType<any> },
+});
+let designForm = useDesignFormStore(piniaInstance);
+const isDragging = computed(() => designForm.isDragging);
+const formData = defineModel("formData");
+let containerType: Array<string> = [
+  "tab",
+  "box",
+  "table",
+  "card",
+  "dytable",
+  "collapse",
+];
+
+const isContainer = (data: any) => {
+  return containerType.includes(data.itemType);
+};
+/**
+ * 如果没有items，动态添加
+ * @param adata
+ */
+const checkItem = (adata: any) => {
+  if (!adata["items"]) {
+    adata["items"] = [];
+  }
+};
+const onDragAdd = (evt: Event | any, dataList: any) => {
+  let newIndex = evt.newIndex;
+  if (newIndex != null && newIndex != "undefined") {
+    let dataInfo = dataList[newIndex];
+    // designForm.setDraggingItem({});
+    designForm.selectItem(dataInfo, dataInfo.itemType, "");
+  }
+};
+const activeTabName = ref();
+onMounted(() => {
+  if (!props.field["preps"]["elements"]) {
+    props.field["preps"]["elements"] = [
+      {
+        label: "Tab1",
+        tabName: "tab1",
+        objectName: "tab1",
+        subFormFlag: "Y",
+        items: [],
+      },
+      {
+        label: "Tab2",
+        tabName: "tab2",
+        objectName: "tab2",
+        subFormFlag: "Y",
+        items: [],
+      },
+    ];
+    props.field["stretch"] = "N";
+  }
+  activeTabName.value = props.field.preps.elements[0].tabName;
+});
+watch(
+  () => activeTabName.value,
+  (val) => {
+    props.field["activeItemName"] = val;
+  },
+  { immediate: true, deep: true },
+);
+const dynamicFunc = (funcType: string, funcCode: any) => {
+  let func = new Function(funcCode);
+  func.call(this);
+};
+const addTab = () => {};
+</script>
+<template>
+  <group-box-container
+    class="star-horse-form-container"
+    :showFormItem="showFormItem"
+    :isDesign="isDesign"
+    :disabled="disabled"
+    :parentField="parentField"
+    :form-item="field"
+  >
+    <el-tabs
+      class="tab-container"
+      :tab-position="field.preps['tablePosition'] || 'top'"
+      :type="field.preps['type'] || ''"
+      :closable="field.preps['closable']"
+      :addable="field.preps['addable']"
+      :editable="field.preps['editable']"
+      :stretch="field.preps['stretch']"
+      v-model="activeTabName"
+      @tab-add="addTab()"
+      @tab-click="dynamicFunc('tabClick', field['tabClick'])"
+      @tab-change="dynamicFunc('tabChange', field['tabChange'])"
+      @tab-remove="dynamicFunc('tabRemove', field['tabRemove'])"
+    >
+      <el-tab-pane
+        v-for="(adata, key) in field['preps']['elements']"
+        :key="compKey(adata, key)"
+        :label="adata['label']"
+        :name="adata['tabName']"
+      >
+        <el-scrollbar height="100%" :class="{ 'dragging-area': isDragging }">
+          <draggable
+            @add="(evt: Event) => onDragAdd(evt, adata['items'])"
+            @dragover="checkItem(adata)"
+            class="tab-design"
+            group="starHorseGroup"
+            animation="100"
+            :item-key="uuid()"
+            ghostClass="ghost"
+            :list="adata['items']"
+          >
+            <template #item="{ element: data }">
+              <div
+                class="comp-item"
+                :style="{ marginTop: isContainer(data) ? '25px' : '10px' }"
+              >
+                <component
+                  :key="data.id"
+                  :field="data"
+                  :isDesign="isDesign"
+                  :disabled="disabled"
+                  :showFormItem="showFormItem"
+                  :formInfo="formInfo"
+                  :is="itemCheck(data)"
+                  :parentField="field"
+                  v-model:formData="formData"
+                />
+              </div>
+            </template>
+          </draggable>
+        </el-scrollbar>
+      </el-tab-pane>
+    </el-tabs>
+  </group-box-container>
+</template>
+<style lang="scss" scoped>
+.tab-design {
+  height: 100%;
+  min-height: 200px;
+  overflow-y: auto;
+}
+</style>

package/src/components/formcomp/container/table-container.vue

@@ -0,0 +1,249 @@
+<script setup lang="ts" name="table-container">
+// 右键菜单组件
+import { computed, PropType, ref } from "vue";
+import { operationConfirm, warning } from "@/utils/message";
+import { useDesignFormStore } from "@/store/DesignForm";
+import piniaInstance from "@/store/index";
+import StarHorseIcon from "@/components/comp/StarHorseIcon.vue";
+import { itemCheck, uuid } from "@/api/system";
+
+let containerTableRef = ref(); // 强制刷新表格
+const props = defineProps({
+  parentField: { type: String },
+  isDesign: { type: Boolean, default: false },
+  showFormItem: { type: Boolean, default: false },
+  disabled: { type: Object as PropType<Boolean | String> },
+  formInfo: { type: Object as PropType<any> },
+  field: { type: Object as PropType<any> },
+});
+let designForm = useDesignFormStore(piniaInstance);
+let draggingItem = computed(() => designForm.draggingItem);
+let excludeContainerType: Array<string> = [
+  "box",
+  "tab",
+  "table",
+  "dytable",
+  "collapse",
+  "card",
+];
+let isEdit = computed(() => props.isDesign);
+const isDragging = computed(() => designForm.isDragging);
+const formData = defineModel("formData");
+const onDragAdd = (evt: Event | any, dataList: any) => {
+  let newIndex = evt.newIndex;
+  if (excludeContainerType.includes(draggingItem.value.itemType)) {
+    warning("容器不能嵌套容器");
+    let elements = props.field.preps.elements;
+    for (let inde in elements) {
+      let element = elements[inde];
+      for (let sind in element?.columns) {
+        let column = element.columns[sind];
+        for (let i in column?.items) {
+          let item = column.items[i];
+          if (draggingItem.value.id == item.id) {
+            column.items.splice(i, 1);
+          }
+        }
+      }
+    }
+    return false;
+  }
+  if (newIndex != null && newIndex != "undefined") {
+    let dataInfo = dataList[newIndex];
+    designForm.selectItem(dataInfo, dataInfo.itemType, "");
+  }
+};
+const analysisData = (index: number) => {
+  let field = props.field?.preps;
+  let elements = field?.elements;
+  let f = elements.find((item: any) => item.colIndex == index);
+  if (index > 1) {
+    if (!f) {
+      elements.push({
+        colIndex: index,
+        items: [],
+      });
+    }
+  }
+  return f?.items[0]?.preps?.label || `Title${index}`;
+};
+let currentIndex = ref<number>(-1);
+const tdOver = (evt: MouseEvent, index: number) => {
+  evt.preventDefault();
+  evt.stopPropagation();
+  if (currentIndex.value == index) {
+    return;
+  }
+  currentIndex.value = index;
+};
+const tdOut = (evt: MouseEvent, _index: number) => {
+  evt.preventDefault();
+  evt.stopPropagation();
+  currentIndex.value = 0;
+};
+const deleteCol = (index: number) => {
+  operationConfirm("列删除后，对应的组件也会删除，确认删除吗？").then(
+    (res: boolean) => {
+      if (res) {
+        let elements = props.field.preps.elements;
+        elements.splice(index - 1, 1);
+        for (let index in elements) {
+          elements[index].colIndex = parseInt(index) + 1;
+        }
+        props.field.preps.columns = props.field.preps.columns - 1;
+        currentIndex.value = 0;
+      }
+    },
+  );
+};
+</script>
+<template>
+  <group-box-container
+    class="star-horse-form-container"
+    :showFormItem="showFormItem"
+    :isDesign="isDesign"
+    :disabled="disabled"
+    :parentField="parentField"
+    :form-item="field"
+  >
+    <table
+      ref="containerTableRef"
+      class="dynamic-table"
+      :style="{
+        border: isEdit && isDesign ? '1px solid #dfe6ec' : 'none',
+      }"
+    >
+      <thead class="container-thead">
+        <tr>
+          <th
+            v-for="td of parseInt(field.preps.columns || 1)"
+            @mouseenter="(evt) => tdOver(evt, td)"
+            @mouseleave="(evt) => tdOut(evt, td)"
+          >
+            <div class="td-operator" v-if="currentIndex == td && isDesign">
+              <el-tooltip content="删除列">
+                <star-horse-icon
+                  icon-class="delete"
+                  cursor="pointer"
+                  @click="deleteCol(td)"
+                />
+              </el-tooltip>
+            </div>
+            {{ analysisData(td) }}
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <template v-for="td of parseInt(field.preps.columns || 1)">
+            <td
+              :style="{
+                width: 100 / parseInt(field.preps.columns || 1) + '%',
+                'margin-top': '5px',
+              }"
+              class="td-clz"
+              :class="{ 'dragging-area': isDragging }"
+              @mouseenter="(evt) => tdOver(evt, td)"
+              @mouseleave="(evt) => tdOut(evt, td)"
+            >
+              <draggable
+                @add="
+                  (evt: Event) =>
+                    onDragAdd(evt, field.preps.elements[td - 1].items)
+                "
+                class="smain-design"
+                tag="div"
+                group="starHorseGroup"
+                ghostClass="ghost"
+                animation="200"
+                :item-key="uuid()"
+                :list="field.preps.elements[td - 1].items"
+              >
+                <template #item="{ element: data }">
+                  <div class="comp-item">
+                    <component
+                      :key="data?.id"
+                      :field="data"
+                      :showFormItem="showFormItem"
+                      :isDesign="isDesign"
+                      :disabled="disabled"
+                      :formInfo="formInfo"
+                      :is="itemCheck(data)"
+                      :parentField="field"
+                      v-model:formData="formData"
+                    />
+                  </div>
+                </template>
+              </draggable>
+            </td>
+          </template>
+        </tr>
+      </tbody>
+    </table>
+  </group-box-container>
+</template>
+<style lang="scss" scoped>
+table {
+  display: table;
+  border-collapse: separate;
+  box-sizing: border-box;
+  text-indent: initial;
+  unicode-bidi: isolate;
+  border-spacing: 2px;
+  border-color: gray;
+}
+
+tr {
+  display: table-row;
+  vertical-align: inherit;
+  unicode-bidi: isolate;
+  border-color: inherit;
+}
+
+.container-thead tr {
+  background: var(--star-horse-shadow);
+  height: 35px;
+  border-radius: 3px;
+  margin-bottom: 5px;
+  border: 1px solid #dfe6ec;
+}
+
+th {
+  position: relative;
+  border: 1px solid #dfe6ec;
+
+  .td-operator {
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 9999;
+  }
+}
+
+tr {
+  width: 100%;
+}
+
+.td-clz {
+  flex-direction: row;
+  padding: 5px;
+  border: 1px solid #dfe6ec;
+  border-top: none;
+  height: 35px;
+}
+
+.comp-item {
+  margin: unset;
+}
+
+.dynamic-table {
+  width: 100%;
+  border-collapse: collapse;
+
+  thead {
+    background: var(--star-horse-font-color);
+    height: 30px;
+    font-size: 14px;
+  }
+}
+</style>

package/src/components/formcomp/items/allitem.ts

@@ -0,0 +1,9 @@
+import { App, defineAsyncComponent } from "vue";
+
+const items = import.meta.glob("@/components/formcomp/items/*.vue");
+export default function install(app: App<Element>) {
+  for (const [key, value] of Object.entries(items)) {
+    const name = key.slice(key.lastIndexOf("/") + 1, key.lastIndexOf("."));
+    app.component(name, defineAsyncComponent(value as any));
+  }
+}

package/src/components/formcomp/items/area-item.vue

@@ -0,0 +1,116 @@
+<template>
+  <starhorse-form-item
+    :showFormItem="showFormItem"
+    :isDesign="isDesign"
+    :disabled="disabled"
+    :bareFlag="bareFlag"
+    :formItem="field"
+    :parentField="parentField"
+  >
+    <el-cascader
+      :fid="field.fieldName"
+      v-bind="field.preps"
+      :disabled="checkIsDisabled(props)"
+      v-on="getDynamicEvents(props, itemAction)"
+      v-model="formData[field.fieldName]"
+    />
+  </starhorse-form-item>
+</template>
+<script setup lang="ts">
+import { nextTick, onMounted, PropType, watch } from "vue";
+import { compDynamicData } from "@/api/star_horse_utils";
+import areaData from "@/api/pcas-code.json";
+import {
+  allAction,
+  checkIsDisabled,
+  initCompCallEvent,
+} from "@/components/formcomp/utils/ItemRelationEventUtils";
+import { getDynamicEvents } from "@/api/system";
+
+const props = defineProps({
+  isDesign: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  showFormItem: {
+    type: Boolean,
+    default: false,
+  },
+  bareFlag: {
+    type: Boolean,
+    default: false,
+  },
+  isSearch: {
+    type: Boolean,
+    default: false,
+  },
+  field: {
+    type: Object as PropType<any>,
+    required: true,
+  },
+  parentField: {
+    type: Object as PropType<any>,
+  },
+  formInfo: {
+    type: Object as PropType<any>,
+  },
+});
+const emits = defineEmits(["selfFunc", "selectItem"]);
+const formData = defineModel("formData");
+const itemAction = (prep: any) => {
+  allAction(props, emits, formData, prep);
+};
+const initData = async () => {
+  if (!props.field.preps) {
+    props.field.preps = {};
+  }
+  if (props.field.preps.user) {
+    const data = await compDynamicData(props.field);
+    if (data?.length) {
+      props.field.preps["options"] = data;
+    }
+  } else {
+    props.field.preps["props"] = {
+      label: "name",
+      value: "code",
+    };
+    props.field.preps["options"] = areaData;
+  }
+
+  await nextTick();
+  let data: any = formData.value[props.field.fieldName];
+  if (data) {
+    formData.value[props.field.fieldName] = JSON.parse(data);
+  } else {
+    //解决加载慢问题，导致数据没法回显
+    setTimeout(() => {
+      let data: any = formData.value[props.field.fieldName];
+      formData.value[props.field.fieldName] = data ? JSON.parse(data) : [];
+    }, 200);
+  }
+};
+onMounted(() => {
+  initData();
+  initCompCallEvent(props, emits, formData);
+});
+watch(
+  () => formData.value[props.field.fieldName + "OptionList"],
+  (val) => {
+    if (val?.length > 0) {
+      props.field.preps["options"] = val;
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+</script>
+<style lang="scss" scoped>
+:deep(.el-cascader) {
+  width: 100%;
+}
+</style>

package/src/components/formcomp/items/audio-item.vue

@@ -0,0 +1,163 @@
+<template>
+  <starhorse-form-item
+    :showFormItem="showFormItem"
+    :isDesign="isDesign"
+    :disabled="disabled"
+    :bareFlag="bareFlag"
+    :formItem="field"
+    :parentField="parentField"
+  >
+    <audio :fid="field.fieldName" ref="audio" controls></audio>
+  </starhorse-form-item>
+</template>
+<script setup lang="ts" name="audioItem">
+import { onMounted, PropType, ref } from "vue";
+import { blobData } from "@/api/star_horse_apis";
+
+const props = defineProps({
+  isDesign: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  showFormItem: {
+    type: Boolean,
+    default: false,
+  },
+  bareFlag: {
+    type: Boolean,
+    default: false,
+  },
+  isSearch: {
+    type: Boolean,
+    default: false,
+  },
+  field: {
+    type: Object as PropType<any>,
+    required: true,
+  },
+  parentField: {
+    type: Object as PropType<any>,
+  },
+  formInfo: {
+    type: Object as PropType<any>,
+  },
+});
+const emits = defineEmits(["selfFunc", "selectItem"]);
+// const formData = defineModel("formData");
+let audio = ref();
+const init = async () => {
+  let file = await blobData(props.field["audioUrl"]);
+  if (!file) {
+    return;
+  }
+  // 开始识别
+  let reader = new FileReader();
+  reader.readAsArrayBuffer(file);
+  reader.onload = function (event) {
+    let arrBuffer = event.target.result as ArrayBuffer;
+    let audioCtx = new AudioContext();
+    audioCtx.decodeAudioData(arrBuffer, function (audioBuffer) {
+      // let duration = audioBuffer.duration;
+      let channels = audioBuffer.numberOfChannels;
+      let rate = audioBuffer.sampleRate;
+      // 3秒
+      let startOffset = 0;
+      let endOffset = rate * 3;
+      let frameCount = endOffset - startOffset;
+      let newAudioBuffer;
+      newAudioBuffer = new AudioContext().createBuffer(
+        channels,
+        endOffset - startOffset,
+        rate,
+      );
+      let anotherArray = new Float32Array(frameCount);
+      let offset = 0;
+      for (let channel = 0; channel < channels; channel++) {
+        audioBuffer.copyFromChannel(anotherArray, channel, startOffset);
+        newAudioBuffer.copyToChannel(anotherArray, channel, offset);
+      }
+      /**
+       * 直接播放使用下面的代码
+       // 创建AudioBufferSourceNode对象
+       let source = audioCtx.createBufferSource();
+       // 设置AudioBufferSourceNode对象的buffer为复制的3秒AudioBuffer对象
+       source.buffer = newAudioBuffer;
+       // 这一句是必须的，表示结束，没有这一句没法播放，没有声音
+       // 这里直接结束，实际上可以对结束做一些特效处理
+       source.connect(audioCtx.destination);
+       // 资源开始播放
+       source.start();
+       */
+      let blob = bufferToWave(newAudioBuffer, frameCount);
+      /**
+       * 转换成Base64使用下面的代码
+       let reader2 = new FileReader();
+       reader2.onload = function(evt){
+       audio.src = evt.target.result;
+       };
+       reader2.readAsDataURL(blob);
+       */
+      // 使用Blob地址
+      audio.value.src = URL.createObjectURL(blob);
+    });
+  };
+};
+// Convert AudioBuffer to a Blob using WAVE representation
+const bufferToWave = (abuffer: any, len: number) => {
+  let numOfChan = abuffer.numberOfChannels,
+    length = len * numOfChan * 2 + 44,
+    buffer = new ArrayBuffer(length),
+    view = new DataView(buffer),
+    channels = [],
+    i,
+    sample,
+    offset = 0,
+    pos = 0;
+  const setUint16 = (data: any) => {
+    view.setUint16(pos, data, true);
+    pos += 2;
+  };
+  const setUint32 = (data: any) => {
+    view.setUint32(pos, data, true);
+    pos += 4;
+  };
+  // write WAVE header
+  setUint32(0x46464952); // "RIFF"
+  setUint32(length - 8); // file length - 8
+  setUint32(0x45564157); // "WAVE"
+  setUint32(0x20746d66); // "fmt " chunk
+  setUint32(16); // length = 16
+  setUint16(1); // PCM (uncompressed)
+  setUint16(numOfChan);
+  setUint32(abuffer.sampleRate);
+  setUint32(abuffer.sampleRate * 2 * numOfChan); // avg. bytes/sec
+  setUint16(numOfChan * 2); // block-align
+  setUint16(16); // 16-bit (hardcoded in this demo)
+  setUint32(0x61746164); // "data" - chunk
+  setUint32(length - pos - 4); // chunk length
+  // write interleaved data
+  for (i = 0; i < abuffer.numberOfChannels; i++) {
+    channels.push(abuffer.getChannelData(i));
+  }
+  while (pos < length) {
+    for (i = 0; i < numOfChan; i++) {
+      // interleave channels
+      sample = Math.max(-1, Math.min(1, channels[i][offset])); // clamp
+      sample = (0.5 + sample < 0 ? sample * 32768 : sample * 32767) | 0; // scale to 16-bit signed int
+      view.setInt16(pos, sample, true); // write 16-bit sample
+      pos += 2;
+    }
+    offset++; // next source sample
+  }
+  // create Blob
+  return new Blob([buffer], { type: "audio/wav" });
+};
+onMounted(() => {
+  init();
+});
+</script>
+<style scoped></style>