star-horse-lowcode 2.7.62 → 2.7.65

package/src/components/comp/StarHorseTableViewColumn.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts" name="StarHorseTableColumn">
+import { createDatetime } from "@/api/date_utils";
+import { parseListData } from "@/api/form_utils";
+import { Config } from "@/api/settings";
+import { PropType } from "vue";
+
+const props = defineProps({
+  batchName: { type: String, default: "" },
+  item: { type: Object as PropType<any>, required: true },
+  commonFormat: { type: Function, required: true },
+});
+
+const dataFormat = (scope: any) => {
+  let item = props.item;
+  let val: string = scope.row[item.hideName || item.fieldName];
+  if (
+    item.type == "select" ||
+    item.type == "checkbox" ||
+    item.type == "radio"
+  ) {
+    return parseListData(item, val);
+  }
+  if (item.type == "date" || item.type == "datetime") {
+    return createDatetime(val);
+  }
+  if (props.commonFormat && scope.column.property) {
+    return props.commonFormat(scope.column.property, val, scope.row);
+  }
+  return val;
+};
+</script>
+<template>
+  <el-table-column
+    :prop="item.hideName || item.fieldName"
+    :label="item.label"
+    sortable
+    :show-overflow-tooltip="true"
+    v-if="item.formVisible || item.listVisible || item.viewVisible"
+    :min-width="(item.minWidth || Config.defaultColumnWidth) + 'px'"
+  >
+    <template #default="scope">
+      {{ dataFormat(scope) }}
+    </template>
+  </el-table-column>
+</template>
+<style lang="scss">
+tbody {
+  .cell {
+    display: flex;
+    flex-direction: row;
+
+    .el-table__expand-icon {
+      margin-top: 5px;
+    }
+
+    p {
+      display: block;
+    }
+  }
+}
+</style>

package/src/components/comp/StarHorseTree.vue

@@ -0,0 +1,494 @@
+<script setup lang="ts">
+import {computed, ModelRef, nextTick, onMounted, PropType, reactive, ref, unref,} from "vue";
+import SubSystemMenu from "@/components/menu/SubSystemMenu.vue";
+import {useGlobalConfigStore} from "@/store/GlobalConfig";
+import piniaInstance from "@/store";
+import {PageProps} from "@/components/types/PageProps";
+import {ApiUrls} from "@/components/types/ApiUrls";
+import {warning} from "@/utils/message";
+import {SearchParams} from "@/components/types/Params";
+import {OrderByInfo} from "@/components/types/PageFieldInfo";
+import {postRequest} from "@/api/star_horse_apis";
+import {closeLoad, createCondition} from "@/api/star_horse_utils";
+import {isSystemManage} from "@/utils/auth";
+import {Config} from "@/api/settings";
+import Help from "@/components/help.vue";
+import {compKey} from "@/api/system";
+
+const props = defineProps({
+  preps: {
+    type: Object as PropType<any>,
+    default: () => {
+      return {
+        value: "value",
+        label: "name",
+        children: "children",
+      };
+    },
+  },
+  helpMsg: {type: String},
+  showCollapse: {type: Boolean, default: false},
+  treeTitle: {type: String, default: "树形菜单"},
+  expand: {type: Boolean, default: false},
+  height: {type: Number, default: 600},
+  //是否显示复选框
+  showCheckBox: {type: Boolean, default: false},
+  //是否显示已选中的数据
+  showSelectData: {type: Boolean, default: false},
+  checkStrictly: {type: Boolean, default: true},
+  //是否显示搜索框
+  showSearch: {type: Boolean, default: true},
+  checkOnClickNode: {type: Boolean, default: true},
+  treeType: {type: String, default: "tree"},
+  //在标签上显示值
+  showCode: {type: Boolean, default: false},
+  //是否显示分页
+  showPageBar: {type: Boolean, default: false},
+  //是否动态数据
+  isDynamicData: {type: Boolean, default: false},
+  //是否自动加载数据
+  autoLoad: {type: Boolean, default: true},
+  //接口地址
+  compUrl: {type: Object as PropType<ApiUrls>},
+  //按钮名称
+  btnTitle: {type: String, default: "添加数据"},
+  //按钮是否可见
+  btnVisible: {type: Boolean, default: false},
+  rmvTitle: {type: String, default: "删除数据"},
+  rmvVisible: {type: Boolean, default: false},
+  //是否显示下拉按钮
+  showDropdown: {type: Boolean, default: true},
+  /**
+   * 数据共享人
+   *   拿到别人共享的信息
+   *   let resultData = await loadData('/system-config/system/dataPermission/currentMenuPermissionPerson', {});
+   *   上面接口主要返回共享人的账号
+   *   commonPersons.value = resultData?.data;
+   */
+  commonPersons: {type: Array as PropType<any>, default: []},
+});
+const emits = defineEmits([
+  "selectData",
+  "changeCollapse",
+  "addData",
+  "removeData",
+]);
+let configStore = useGlobalConfigStore(piniaInstance);
+let compSize = computed(
+    () => configStore.configFormInfo?.inputSize || Config.compSize,
+);
+const treeRef = ref<any>();
+const menuTreeRef = ref<any>();
+const searchData = ref("");
+const treeDatas: ModelRef<any> = defineModel("treeDatas");
+let menuIcon = ref<string>("expand");
+let collapse = ref<boolean>(false);
+const _compKey = compKey;
+let pageInfo = reactive<PageProps>({
+  pageSize: 20,
+  currentPage: 1,
+  totalData: 0,
+  totalPage: 0,
+  dataList: [],
+});
+const onQueryChanged = (query: string) => {
+  treeRef.value!.filter(query);
+};
+const filterMethod = (query: string, node: any) => {
+  return node[props.preps?.label]!.toLowerCase().includes(query?.toLowerCase());
+};
+const changeArrow = (evt: MouseEvent) => {
+  if (evt) {
+    evt.preventDefault();
+    evt.stopPropagation();
+  }
+  collapse.value = !collapse.value;
+  menuIcon.value = unref(menuIcon) == "expand" ? "collapse" : "expand";
+  emits("changeCollapse", collapse.value);
+};
+const treeOperation = (cmd: string) => {
+  if (props.treeType == "tree") {
+    if (cmd == "add") {
+      emits("addData", {});
+    } else if (cmd == "collapse") {
+      Object.values(treeRef.value!.store.nodesMap).forEach((v: any) =>
+          v.collapse(),
+      );
+    } else {
+      Object.values(treeRef.value!.store.nodesMap).forEach((v: any) =>
+          v.expand(),
+      );
+    }
+  } else {
+    const getAllSubNodeIndex = (datas: any) => {
+      datas.forEach((item: any) => {
+        if (item.children && item.children.length > 0) {
+          if (cmd == "add") {
+            emits("addData", {});
+          } else if (cmd == "collapse") {
+            menuTreeRef.value.close(item[props.preps.value]);
+          } else {
+            menuTreeRef.value!.open(item[props.preps.value]);
+          }
+          getAllSubNodeIndex(item.children);
+        }
+      });
+    };
+    getAllSubNodeIndex(treeDatas.value);
+  }
+};
+let selectedDataList = ref<Array<any>>([]);
+const operSelectData = (data: any, checked: boolean) => {
+  if (checked) {
+    let hasData = selectedDataList.value.find(
+        (item) => item[props.preps.value] == data[props.preps.value],
+    );
+    if (!hasData) {
+      selectedDataList.value.push(data);
+    }
+  } else {
+    for (let index in selectedDataList.value) {
+      let temp = selectedDataList.value[index];
+      if (temp[props.preps?.value] == data[props.preps?.value]) {
+        selectedDataList.value.splice(Number(index), 1);
+        break;
+      }
+    }
+    treeRef.value!.setChecked(data, checked);
+  }
+};
+const setSelectData = (datas: Array<any>) => {
+  //设置数据选中自动会再次赋值
+  selectedDataList.value = datas;
+  datas.forEach((item) => {
+    treeRef.value!.setChecked(item, true);
+  });
+};
+const getSelectData = () => {
+  return selectedDataList.value;
+};
+
+/**
+ * 点击事件
+ * @param data
+ * @param checked
+ */
+const treeChange = (data: any, checked: boolean) => {
+  operSelectData(data, checked);
+  emits("selectData", data, checked);
+};
+const menuChange = (data: any) => {
+  emits("selectData", data);
+};
+const addData = (item: any) => {
+  emits("addData", item);
+};
+const removeData = (item: any) => {
+  emits("removeData", item);
+};
+const pageSizeClick = (pageSize: number) => {
+  pageInfo.pageSize = pageSize;
+  loadByPage();
+};
+const pageChangeClick = (currentPage: number) => {
+  pageInfo.currentPage = currentPage;
+  loadByPage();
+};
+let searchParams: SearchParams[] = [];
+let orderBys: OrderByInfo[] = [];
+const createSearchParams = (
+    params: SearchParams[] = [],
+    orderBy: OrderByInfo[] = [],
+) => {
+  searchParams = params;
+  orderBys = orderBy;
+  loadByPage();
+};
+const expandData = () => {
+  if (props.expand) {
+    setTimeout(() => {
+      treeOperation("expand");
+    }, 800);
+  }
+};
+const loadByPage = async () => {
+  //加入共享人的信息
+  if (props.commonPersons?.length && !isSystemManage()) {
+    searchParams.push(
+        createCondition("a.createdBy", props.commonPersons, "in"),
+    );
+  }
+  let params: any = {
+    currentPage: pageInfo.currentPage,
+    pageSize: pageInfo.pageSize,
+    fieldList: searchParams,
+    orderBy: orderBys,
+  };
+  postRequest(props.compUrl?.pageListUrl!, params)
+      .then((res: any) => {
+        if (!res || res.data.code != 0) {
+          console.error(res?.data?.cnMessage || "接口异常");
+          return;
+        }
+        let redata = res.data.data;
+        //如果不是分页之间显示返回的所有数据
+        treeDatas.value = redata?.dataList || redata;
+        pageInfo.totalPage = redata.totalPages;
+        pageInfo.totalData = redata.totalDatas;
+      })
+      .catch((err: any) => {
+        console.log(err);
+      })
+      .finally(() => {
+        closeLoad();
+      });
+  await nextTick();
+  expandData();
+};
+
+const init = async () => {
+  if (props.isDynamicData) {
+    if (!props.compUrl) {
+      warning("动态数据须配置数据获取接口");
+      return;
+    }
+    if (props.autoLoad) {
+      loadByPage();
+    }
+  } else {
+    await nextTick();
+    expandData();
+  }
+};
+
+onMounted(() => {
+  init();
+});
+defineExpose({
+  getSelectData,
+  setSelectData,
+  createSearchParams,
+});
+</script>
+
+<template>
+  <el-card
+      class="inner_content h-full"
+      :style="{
+      width: collapse ? '60px' : 'unset',
+      padding: 'unset',
+    }"
+  >
+    <div
+        class="selected-data gap-2"
+        v-if="showSelectData && selectedDataList?.length > 0"
+    >
+      <el-tag
+          closable
+          @close="operSelectData(item, false)"
+          v-for="item in selectedDataList"
+          :key="_compKey(item, item[preps.value])"
+      >{{ item[preps.label] }}
+      </el-tag
+      >
+    </div>
+    <div class="tree-title">
+      <div class="title flex items-center">
+        {{ treeTitle }}&nbsp;
+        <help v-if="helpMsg" :message="helpMsg"/>
+      </div>
+      <div class="btn" v-if="showCollapse">
+        <star-horse-icon :icon-class="menuIcon" @click="changeArrow"/>
+      </div>
+    </div>
+    <div class="search-input" v-if="showSearch">
+      <el-input
+          v-model="searchData"
+          :size="compSize"
+          clearable
+          :style="{ 'margin-right': showDropdown ? 'unset' : '10px' }"
+          placeholder="请输入关键字"
+          @input="onQueryChanged"
+      >
+        <template #append>
+          <star-horse-icon
+              @click="onQueryChanged"
+              icon-class="search"
+              color="var(--star-horse-style)"
+              size="18px"
+          />
+        </template>
+      </el-input>
+      <el-dropdown
+          placement="bottom"
+          @command="treeOperation"
+          v-if="showDropdown"
+      >
+        <star-horse-icon
+            icon-class="v-dot"
+            color="var(--star-horse-style)"
+            size="20px"
+        />
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item v-if="btnVisible" command="add"
+            >添加数据
+            </el-dropdown-item
+            >
+            <el-dropdown-item command="expand">展开全部</el-dropdown-item>
+            <el-dropdown-item command="collapse">折叠全部</el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+    </div>
+    <el-divider v-if="showSearch"/>
+    <div class="tree-content">
+      <el-scrollbar height="100%">
+        <el-tree
+            ref="treeRef"
+            :data="treeDatas"
+            :props="preps"
+            :node-key="preps.value"
+            v-if="treeType == 'tree'"
+            :filter-node-method="filterMethod"
+            :check-strictly="checkStrictly"
+            :show-checkbox="showCheckBox"
+            highlight-current
+            @nodeClick="treeChange"
+            @checkChange="treeChange"
+        >
+          <template #default="{ node, data }">
+            <div class="menu-title">
+              <div class="name flex items-center">
+                <star-horse-icon
+                    :icon-class="
+                    data.children?.length > 0 ? 'folder' : 'document'
+                  "
+                />
+                {{ node.label }}
+                <template v-if="showCode">
+                  ({{
+                    data["code"] ||
+                    data[preps.code || preps.value || "value"] ||
+                    ""
+                  }})
+                </template>
+              </div>
+              <div v-if="btnVisible || rmvVisible" class="btn">
+                <el-tooltip :content="btnTitle">
+                  <star-horse-icon
+                      cursor="pointer"
+                      v-if="btnVisible"
+                      @click.stop="addData(data)"
+                      icon-class="plus"
+                  />
+                </el-tooltip>
+                <el-tooltip :content="rmvTitle">
+                  <star-horse-icon
+                      cursor="pointer"
+                      v-if="rmvVisible"
+                      @click.stop="removeData(data)"
+                      color="var(--el-color-danger)"
+                      icon-class="minus"
+                  />
+                </el-tooltip>
+              </div>
+            </div>
+          </template>
+        </el-tree>
+        <el-menu
+            v-if="treeType == 'menu'"
+            ref="menuTreeRef"
+            :unique-opened="false"
+        >
+          <SubSystemMenu
+              :dataList="treeDatas"
+              :preps="preps"
+              @addData="addData"
+              @removeData="removeData"
+              @selectData="menuChange"
+          />
+        </el-menu>
+      </el-scrollbar>
+    </div>
+    <div class="tree-footer" v-if="showPageBar">
+      <el-pagination
+          :total="pageInfo.totalData"
+          @current-change="pageChangeClick"
+          @size-change="pageSizeClick"
+          :size="compSize"
+          :page-sizes="[10,20,30,50]"
+          layout=" prev, pager, next,slot,sizes"
+          v-model:currentPage="pageInfo.currentPage"
+          v-model:page-size="pageInfo.pageSize"
+          v-model:pageCount="pageInfo.totalPage"
+      >
+        <el-button text icon="refresh" :size="compSize" @click="loadByPage" title="刷新"/>
+      </el-pagination>
+    </div>
+  </el-card>
+</template>
+
+<style scoped lang="scss">
+:deep(.el-tag) {
+  margin-left: 5px;
+}
+
+.selected-data {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: start;
+  align-items: center;
+  margin: 8px 5px;
+  border: 1px dashed var(--star-horse-shadow);
+}
+
+.tree-title {
+  width: 100%;
+  height: 35px;
+  display: flex;
+  align-items: center;
+  font-size: 13px;
+  font-weight: 800;
+  background: rgb(229, 230, 235);
+  border: 1px solid #33272729;
+  justify-content: space-between;
+
+  .title {
+    margin-left: 15px;
+  }
+
+  .btn,
+  svg {
+    cursor: pointer;
+  }
+}
+
+.search-input {
+  width: 98%;
+  align-items: center;
+  display: flex;
+  margin: 5px auto;
+}
+
+.tree-content {
+  margin: 5px;
+  flex: 1;
+  overflow: hidden;
+}
+
+:deep(.el-sub-menu__icon-arrow) {
+  width: 20px !important;
+  right: 5px;
+}
+
+:deep(.el-menu-item) {
+  height: 30px;
+  line-height: 30px;
+}
+
+:deep(.el-divider--horizontal) {
+  margin: 5px 0 !important;
+}
+</style>

package/src/components/comp/index.ts

@@ -0,0 +1,22 @@
+export { default as ShDynamicForm } from "./ShDynamicForm.vue";
+export { default as ShTableListColumn } from "./ShTableListColumn.vue";
+export { default as StarHorseDataSelector } from "./StarHorseDataSelector.vue";
+export { default as StarHorseDataView } from "./StarHorseDataView.vue";
+export { default as StarHorseDataViewItems } from "./StarHorseDataViewItems.vue";
+export { default as StarHorseDataViewTable } from "./StarHorseDataViewTable.vue";
+export { default as StarHorseDialog } from "./StarHorseDialog.vue";
+export { default as StarHorseDraggable } from "./StarHorseDraggable.vue";
+export { default as StarHorseForm } from "./StarHorseForm.vue";
+export { default as StarHorseFormItem } from "./StarHorseFormItem.vue";
+export { default as StarHorseFormList } from "./StarHorseFormList.vue";
+export { default as StarHorseFormTable } from "./StarHorseFormTable.vue";
+export { default as StarHorseIcon } from "./StarHorseIcon.vue";
+export { default as StarHorseJsonEditor } from "./StarHorseJsonEditor.vue";
+export { default as StarHorsePopover } from "./StarHorsePopover.vue";
+export { default as StarHorseSearchComp } from "./StarHorseSearchComp.vue";
+export { default as StarHorseStaticTable } from "./StarHorseStaticTable.vue";
+export { default as StarHorseTableColumn } from "./StarHorseTableColumn.vue";
+export { default as StarHorseTableComp } from "./StarHorseTableComp.vue";
+export { default as StarHorseTableViewColumn } from "./StarHorseTableViewColumn.vue";
+export { default as StarHorseTree } from "./StarHorseTree.vue";
+export { default as ShForm } from "./ShForm.vue";

package/src/components/comp/items/UTableColumn.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { Config } from "@/api/settings";
+import { batchFieldDefaultValues } from "@/api/star_horse_utils";
+import { PropType } from "vue";
+import { compKey } from "@/api/system";
+
+defineProps({
+  item: { type: Object as PropType<any>, required: true },
+  rules: { type: Object },
+  staticColumn: { type: String, default: "Y" },
+  size: { type: String, default: Config.compSize },
+  batchName: { type: String, default: "batchDataList" },
+  primaryKey: { type: [String, Object] as PropType<string | any> },
+  source: { type: Number, default: 1 },
+});
+const _compKey = compKey;
+const exclusionFields: string[] = ["divider", "button", "usercomp"];
+</script>
+
+<template>
+  <el-table-column
+    :prop="item.fieldName"
+    :label="item.label"
+    sortable
+    :min-width="item.minWidth || Config.defaultColumnWidth + 'px'"
+    v-if="item.formVisible && !exclusionFields.includes(item.type)"
+  >
+    <template #default="scope">
+      <template v-if="item.batchFieldList?.length > 0">
+        <star-horse-form-list
+          v-for="sitem in item.batchFieldList"
+          :key="_compKey(sitem, sitem.batchName)"
+          style="min-height: 100px; width: 100% !important"
+          v-model:dataForm="scope.row"
+          :compUrl="sitem['compUrl']"
+          :primaryKey="sitem['primaryKey']"
+          :batchName="sitem['batchName']"
+          :initRows="sitem['initRows']"
+          :subFlag="true"
+          :size="size"
+          :source="source"
+          :staticColumn="sitem.staticColumn ?? 'Y'"
+          :defaultValues="batchFieldDefaultValues(sitem, scope.row)"
+          :field-list="sitem['fieldList']"
+          :rules="sitem['rules'] || rules"
+        />
+      </template>
+      <template v-else>
+        <sh-table-list-column
+          :primaryKey="primaryKey"
+          :batchName="batchName"
+          :dataForm="scope.row"
+          :size="size"
+          :source="source"
+          :rules="rules"
+          :staticColumn="staticColumn"
+          :item="item"
+          :index="scope.$index"
+        />
+      </template>
+    </template>
+  </el-table-column>
+</template>
+
+<style scoped lang="scss"></style>