star-horse-lowcode 2.7.62 → 2.7.65

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

@@ -0,0 +1,177 @@
+<template>
+  <star-horse-dialog
+    :title="field.label + '数据选择'"
+    :self-func="true"
+    :dialog-visible="dialogInputVisible"
+    @merge="selectItem"
+    :box-height="'500px'"
+    @closeAction="closeAction"
+  >
+    <div style="width: 100%">
+      <component
+        :is="field.preps.compName"
+        :params="field.preps"
+        ref="userTableRef"
+        style="flex: 1"
+      />
+    </div>
+  </star-horse-dialog>
+  <starhorse-form-item
+    :showFormItem="showFormItem"
+    :isDesign="isDesign"
+    :disabled="disabled"
+    :bareFlag="bareFlag"
+    :formItem="field"
+    :parentField="parentField"
+  >
+    <el-mention
+      :disabled="checkIsDisabled(props)"
+      :options="userOptionList"
+      :whole="true"
+      :fid="field.fieldName"
+      v-bind="field.preps"
+      v-on="getDynamicEvents(props, itemAction)"
+      v-model="formData[field.fieldName]"
+    >
+      <template #append>
+        <star-horse-icon
+          icon-class="user-add"
+          @click="showVisible"
+          :disabled="field.preps['disabled']"
+        />
+      </template>
+    </el-mention>
+  </starhorse-form-item>
+</template>
+<script setup lang="ts">
+import { nextTick, PropType, shallowRef } from "vue";
+import { FieldMapping } from "@/components/types/PageFieldInfo";
+import { warning } from "@/utils/message";
+import {
+  allAction,
+  checkIsDisabled,
+} 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");
+let userTableRef = shallowRef();
+let dialogInputVisible = shallowRef<boolean>(false);
+let userOptionList = shallowRef<Array<any>>([]);
+const itemAction = (prep: any) => {
+  allAction(props, emits, formData, prep);
+};
+const selectItem = (_row: any) => {
+  userOptionList.value = [];
+  let needField = props.field.preps["needField"];
+  let selectDatas = userTableRef.value.$refs.employeeInfoRef.multipleSelection;
+  if (!selectDatas) {
+    warning("请选择数据");
+    return;
+  }
+  //如果没有指定属性，则默认取相同的属性
+  let name = props.field.fieldName;
+  let aliasName = props.field.preps["aliasName"];
+  let temp: any = {};
+  for (let i in selectDatas) {
+    let data = selectDatas[i];
+    if (!needField) {
+      if (!Object.keys(temp).includes(name)) {
+        temp[name] = [];
+        temp[aliasName] = [];
+      }
+      userOptionList.value.push({
+        label: data["name"],
+        value: data["employeeNo"],
+      });
+      temp[name].push(data["name"]);
+      temp[aliasName].push(data["employeeNo"]);
+    } else {
+      needField.forEach((item: FieldMapping) => {
+        if (needField.length == 1) {
+          if (!Object.keys(temp).includes(item.sourceField)) {
+            temp[item.sourceField] = [];
+          }
+          temp[name].push(data[item.sourceField]);
+        } else {
+          if (!Object.keys(temp).includes(item.distField)) {
+            temp[item.distField] = [];
+          }
+          temp[item.distField] = data[item.sourceField];
+        }
+      });
+    }
+  }
+
+  if (!needField) {
+    formData.value[name] = temp[name].join(" ");
+    formData.value[aliasName] = temp[aliasName].join(" ");
+  } else {
+    needField.forEach((item: FieldMapping) => {
+      if (needField.length == 1) {
+        formData.value[name] = temp[item.sourceField].join(" ");
+      } else {
+        formData.value[item.distField] = temp[item.distField].join(" ");
+      }
+    });
+  }
+  if (props.field.preps["recall"]) {
+    props.field.preps["recall"](selectDatas);
+  }
+  closeAction();
+};
+const closeAction = () => {
+  dialogInputVisible.value = false;
+};
+const showVisible = () => {
+  dialogInputVisible.value = true;
+  nextTick(() => {
+    let fields = props.field.preps["needField"];
+    let name = props.field.fieldName;
+    let realName = name;
+    if (props.field.preps["aliasName"]) {
+      realName = props.field.preps["aliasName"];
+    }
+    if (fields) {
+      name = fields.map((item: FieldMapping) => item.sourceField)[0];
+    }
+    userTableRef.value.$refs.employeeInfoRef.setDataInfo(
+      name,
+      formData.value[realName],
+    );
+  });
+};
+</script>
+<style lang="less" scoped></style>

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

@@ -0,0 +1,85 @@
+<template>
+  <starhorse-form-item
+    :showFormItem="showFormItem"
+    :isDesign="isDesign"
+    :disabled="disabled"
+    :bareFlag="bareFlag"
+    :formItem="field"
+    :parentField="parentField"
+  >
+    <component
+      :is="currentComponent"
+      :showFormItem="showFormItem"
+      :isDesign="isDesign"
+      :disabled="disabled"
+      :bareFlag="bareFlag"
+      v-bind="field['preps']"
+      v-model:dataForm="formData"
+    />
+  </starhorse-form-item>
+</template>
+<script setup lang="ts">
+import { onMounted, PropType, shallowRef, watch } from "vue";
+
+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 currentComponent = shallowRef(null);
+const loadComponent = async () => {
+  let compName = props.field["preps"].compName;
+  if (compName) {
+    try {
+      let comp = await import(`@/components/${compName}.vue`);
+      currentComponent.value = comp.default;
+    } catch (e) {
+      console.log(e.message);
+      currentComponent.value = null;
+    }
+  } else {
+    currentComponent.value = props.field?.preps["name"];
+  }
+};
+onMounted(() => {
+  loadComponent();
+});
+watch(
+  () => [props.field.preps?.compName, props.field.preps?.name],
+  () => {
+    loadComponent();
+  },
+  { immediate: false },
+);
+</script>
+<style scoped></style>

package/src/components/formcomp/items/view-markdown-item.vue

@@ -0,0 +1,77 @@
+<template>
+  <starhorse-form-item
+    :showFormItem="showFormItem"
+    :isDesign="isDesign"
+    :disabled="disabled"
+    :bareFlag="bareFlag"
+    :formItem="field"
+    :parentField="parentField"
+  >
+    <div
+      ref="markdownEditor"
+      class="markdown-editor"
+      v-html="markdown.render(formData[field.fieldName] || '')"
+    />
+  </starhorse-form-item>
+</template>
+<script setup lang="ts" name="view-markdown">
+import { nextTick, onMounted, onUpdated, PropType, ref } from "vue";
+import MarkdownIt from "markdown-it";
+
+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 markdownEditor = ref();
+let markdown = ref<MarkdownIt>(null);
+const init = async () => {
+  await nextTick(() => {
+    if (!markdown.value && markdownEditor.value) {
+      markdown.value = new MarkdownIt(markdownEditor.value, {});
+    }
+  });
+};
+onMounted(() => {
+  init();
+});
+onUpdated(() => {
+  init();
+});
+</script>
+<style lang="scss" scoped>
+.markdown-editor {
+  width: 100% !important;
+  min-height: 400px !important;
+}
+</style>

package/src/components/formcomp/utils/EditDataDialog.vue

@@ -0,0 +1,67 @@
+<template>
+  <star-horse-dialog
+    :title="title"
+    :box-width="boxWidth"
+    :self-func="true"
+    @resetForm="handleReset"
+    :hideFullScreenIcon="true"
+    :dialog-visible="modelValue"
+    @merge="handleConfirm"
+    @closeAction="$emit('update:modelValue', false)"
+  >
+    <el-input
+      v-model="content"
+      type="textarea"
+      :rows="20"
+      :disabled="disabled"
+      resize="both"
+      show-word-limit
+      :placeholder="placeholder"
+    />
+  </star-horse-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from "vue";
+
+const props = defineProps({
+  modelValue: Boolean,
+  title: {
+    type: String,
+    default: "编辑数据",
+  },
+  boxWidth: {
+    type: String,
+    default: "50%",
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  showFormItem: {
+    type: Boolean,
+    default: false,
+  },
+  placeholder: String,
+  initialContent: String,
+});
+
+const content = ref("");
+const emit = defineEmits(["update:modelValue", "confirm"]);
+
+const handleConfirm = () => {
+  emit("confirm", content.value);
+  emit("update:modelValue", false);
+};
+
+const handleReset = () => {
+  content.value = "";
+};
+// 新增内容监听
+watch(
+  () => props.initialContent,
+  (newVal) => {
+    content.value = newVal || "";
+  },
+);
+</script>

package/src/components/formcomp/utils/FieldList.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import { useDesignFormStore } from "@/store/DesignForm";
+import piniaInstance from "@/store";
+import { computed, ComputedRef, ref } from "vue";
+
+defineOptions({
+  name: "FieldList",
+});
+const containerRef = ref();
+const emits = defineEmits(["selectData"]);
+let designForm = useDesignFormStore(piniaInstance);
+let formDataList: ComputedRef = computed(() => designForm.formDataList);
+let containerList: ComputedRef = computed(() => designForm.containerList);
+let selfFormDataList: ComputedRef = computed(() => designForm.selfFormDataList);
+const selectData = (item: any) => {
+  emits("selectData", item);
+};
+</script>
+
+<template>
+  <div class="component-list">
+    <div class="title">
+      <el-anchor type="underline" :container="containerRef" :offset="70">
+        <el-anchor-link :href="`#container`"> 容器 </el-anchor-link>
+        <el-anchor-link :href="`#basic`"> 基础组件 </el-anchor-link>
+        <el-anchor-link :href="`#self`"> 自定义组件 </el-anchor-link>
+      </el-anchor>
+    </div>
+    <div class="content" ref="containerRef">
+      <el-scrollbar>
+        <el-divider content-position="left">容器</el-divider>
+        <ul id="container">
+          <template v-for="item in containerList">
+            <li class="field-item" @click="selectData(item)">
+              &nbsp;&nbsp;
+              <div>
+                <star-horse-icon :icon-class="item.itemIcon" /> &nbsp;{{
+                  item.itemName
+                }}
+              </div>
+            </li>
+          </template>
+        </ul>
+        <el-divider content-position="left">基础组件</el-divider>
+        <ul id="basic">
+          <template v-for="item in formDataList">
+            <li class="field-item" @click="selectData(item)">
+              &nbsp;&nbsp;
+              <div>
+                <star-horse-icon :icon-class="item.itemIcon" /> &nbsp;{{
+                  item.itemName
+                }}
+              </div>
+            </li>
+          </template>
+        </ul>
+        <el-divider content-position="left">自定义组件</el-divider>
+        <ul id="self">
+          <template v-for="item in selfFormDataList">
+            <li class="field-item" @click="selectData(item)">
+              &nbsp;&nbsp;
+              <div>
+                <star-horse-icon :icon-class="item.itemIcon" /> &nbsp;{{
+                  item.itemName
+                }}
+              </div>
+            </li>
+          </template>
+        </ul>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+:deep(.el-divider) {
+  margin: 15px auto;
+}
+
+.component-list {
+  display: flex;
+  flex-direction: row;
+  height: inherit;
+  width: 100%;
+  overflow: hidden;
+
+  .title {
+    width: 100px;
+    overflow: hidden;
+  }
+
+  .content {
+    margin-left: 10px;
+    height: 100%;
+    overflow: hidden;
+    flex: 1;
+
+    ul {
+      list-style: none;
+      margin-top: 0 !important;
+      padding-top: 0 !important;
+
+      li {
+        cursor: pointer;
+        display: block;
+        height: 30px;
+        padding: 0 !important;
+        margin: 0;
+
+        &:hover {
+          background-color: #f5f7fa;
+        }
+
+        div {
+          display: inline-flex;
+          height: 100%;
+          align-items: center;
+          margin-top: 0 !important;
+          padding-top: 0 !important;
+        }
+      }
+    }
+  }
+}
+</style>