star-horse-lowcode 2.7.62 → 2.7.65

package/src/components/comp/StarHorseSearchComp.vue

@@ -0,0 +1,253 @@
+<script setup lang="ts" name="StarHorseSearchComp">
+import { Config } from "@/api/settings";
+import { isJson, searchMatchList } from "@/api/star_horse_utils";
+import { ApiUrls } from "@/components/types/ApiUrls";
+import { SearchParams } from "@/components/types/Params";
+import { SearchFields, SelectOption } from "@/components/types/SearchProps";
+import piniaInstance from "@/store";
+import { useGlobalConfigStore } from "@/store/GlobalConfig";
+import { analysisSearchData } from "@/utils/preview";
+import { computed, nextTick, onMounted, PropType, ref } from "vue";
+
+let matchTypeList = ref<SelectOption[]>();
+let sarchIcon = ref<string>("search_down");
+let defaultSearch = ref<boolean>(true);
+let tips = ref<string>("更多查询");
+let showTips = ref<boolean>(true);
+const emits = defineEmits(["searchData"]);
+const props = defineProps({
+  dialogInput: { type: Boolean, default: false },
+  mutComp: { type: Boolean, default: false },
+  compUrl: { type: Object as PropType<ApiUrls> },
+  formData: { type: Object as PropType<SearchFields>, required: true },
+  defaultCondition: { type: Array<SearchParams> },
+});
+let configStore = useGlobalConfigStore(piniaInstance);
+let compSize = computed(
+  () => configStore.configFormInfo?.inputSize || Config.compSize,
+);
+let searchForm = ref<any>({});
+
+const createSearchParams = (formData: any) => {
+  return analysisSearchData(searchForm.value, formData);
+};
+/**
+ * 解析默认值
+ */
+const analysisDefaultValue = () => {
+  let defaultDatas: any = {};
+  props.formData?.fieldList?.forEach((item: any) => {
+    if (item.defaultValue) {
+      if (isJson(item.defaultValue)) {
+        for (let key in item.defaultValue) {
+          defaultDatas[key] = item.defaultValue[key];
+        }
+      } else {
+        defaultDatas[item.fieldName] = item.defaultValue;
+      }
+    }
+  });
+  return defaultDatas;
+};
+const dataSearch = (val: string | null) => {
+  if (val === "reset") {
+    searchForm.value = { ...analysisDefaultValue() };
+  }
+  let searchDatas = createSearchParams(props.formData?.fieldList);
+  //如果一个页面（包括引入的页面）出现多个此组件,不能走消息总线，
+  // 默认查询条件，如果设置，在每次的查询中都会带上
+  if (props.defaultCondition) {
+    searchDatas.push(...props.defaultCondition);
+  }
+  emits("searchData", searchDatas);
+};
+const searchArea = () => {
+  if (defaultSearch.value) {
+    tips.value = "更多查询";
+    sarchIcon.value = "search_up";
+  } else {
+    tips.value = "收起";
+    sarchIcon.value = "search_down";
+  }
+  defaultSearch.value = !defaultSearch.value;
+};
+/**
+ * 设置查询值
+ * @param data
+ */
+const setData = (data: any) => {
+  if (data) {
+    searchForm.value = { ...searchForm.value, ...data };
+  }
+};
+const init = async () => {
+  matchTypeList.value = searchMatchList();
+  searchForm.value = { ...analysisDefaultValue() };
+  await nextTick();
+  //没有隐藏的查询属性，则隐藏掉展开图标
+  let fdata = props.formData?.fieldList?.find((item) => !item.defaultVisible);
+  if (!fdata && props.formData?.fieldList?.length > 0) {
+    showTips.value = false;
+  }
+};
+
+onMounted(() => {
+  init();
+});
+defineExpose({
+  searchForm,
+  setData,
+  createSearchParams,
+});
+</script>
+<template>
+  <div class="search_content">
+    <el-form class="search_area" :size="compSize" v-if="formData?.fieldList">
+      <template v-for="item in formData.fieldList" v-if="defaultSearch">
+        <el-form-item
+          :size="compSize"
+          :label="item.label"
+          v-if="item.defaultVisible"
+          :prop="item.fieldName"
+        >
+          <template
+            v-if="(!item.type || item.type == 'input') && !item.disabled"
+            :span="6"
+          >
+            <el-select
+              :size="compSize"
+              style="width: 90px !important; height: 100%; padding-top: 2px"
+              v-model="item['matchType']"
+              clearable
+              filterable
+            >
+              <el-option
+                v-for="sitem in matchTypeList"
+                :value="sitem.value"
+                :label="sitem.name"
+                :key="sitem.value"
+              /> </el-select
+            >&nbsp;&nbsp;
+          </template>
+          <star-horse-item
+            v-model:data-form="searchForm"
+            :compSize="compSize"
+            :item="item"
+            :source="4"
+            @dataSearch="dataSearch"
+          />
+        </el-form-item>
+      </template>
+      <template v-for="item in formData?.fieldList" v-else>
+        <el-form-item
+          :size="compSize"
+          :label="item.label"
+          :prop="item.fieldName"
+        >
+          <template v-if="(!item.type || item.type == 'input') && !item.disabled" :span="6">
+            <el-select
+              :size="compSize"
+              style="width: 90px !important; height: 100%; padding-top: 2px"
+              v-model="item['matchType']"
+              clearable
+              filterable
+            >
+              <el-option
+                v-for="sitem in matchTypeList"
+                :value="sitem.value"
+                :label="sitem.name"
+                :key="sitem.value"
+              /> </el-select
+            >&nbsp;&nbsp;
+          </template>
+          <star-horse-item
+            v-model:data-form="searchForm"
+            :compSize="compSize"
+            :item="item"
+            :source="4"
+            @dataSearch="dataSearch"
+          >
+          </star-horse-item>
+        </el-form-item>
+      </template>
+      <el-form-item style="vertical-align: middle; align-items: center">
+        <div class="search_btn">
+          <el-button
+            @click="dataSearch"
+            style="
+              background: var(--star-horse-style);
+              color: var(--star-horse-white);
+            "
+            :size="compSize"
+          >
+            <star-horse-icon
+              icon-class="search"
+              size="16px"
+              color="var(--star-horse-white)"
+            />
+            查询
+          </el-button>
+          <el-button @click="dataSearch('reset')" link :size="compSize">
+            <star-horse-icon
+              icon-class="reset"
+              size="16px"
+              color="var(--star-horse-disable)"
+            />
+            重置
+          </el-button>
+          <el-tooltip :content="tips" v-if="showTips">
+            <el-button text @click="searchArea" :size="compSize">
+              <star-horse-icon
+                :icon-class="sarchIcon"
+                size="20px"
+                color="var(--star-horse-style)"
+              />
+            </el-button>
+          </el-tooltip>
+        </div>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+<style lang="scss" scoped>
+:deep(.el-form-item) {
+  width: auto; // 强制设置为自动宽度
+  margin-right: 8px !important; // 添加右侧间距
+  flex-shrink: 0; // 防止收缩
+  margin-bottom: 0 !important;
+}
+
+.el-form-item,
+.el-form-item-small {
+  margin-bottom: 0 !important;
+}
+
+:deep(.el-form-item__label):last-child {
+  max-width: 5px;
+}
+
+.search_content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+
+  .search_area {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    flex: 1;
+    justify-content: left;
+    flex-shrink: 0;
+    gap: 12px; // 新增间隔控制
+    align-items: center; // 新增垂直对齐方式
+  }
+
+  .search_btn {
+    margin-left: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    vertical-align: middle;
+  }
+}
+</style>

package/src/components/comp/StarHorseStaticTable.vue

@@ -0,0 +1,395 @@
+<script lang="ts" setup name="StarHorseStaticTable">
+import { onMounted, PropType, reactive, ref, unref } from "vue";
+import { commonParseCodeToName } from "@/api/star_horse_utils";
+import Sortable from "sortablejs";
+import { warning } from "@/utils/message";
+import { Config } from "@/api/settings";
+import { compKey } from "@/api/system";
+
+const props = defineProps({
+  //主键
+  primaryKey: {
+    type: [String, Object] as PropType<string | any>,
+    required: true,
+  },
+  //列名
+  fieldList: { type: Object, required: true },
+  //格式化方法
+  dataFormat: { type: Function, default: null },
+  //按钮大小
+  compSize: { type: String, default: Config.compSize },
+  //弹窗模式
+  dialogInput: { type: Boolean, default: false },
+  //默认表格高度
+  height: { type: String, default: "100%" },
+  //默认是否展开所有子节点
+  expand: { type: Boolean, default: false },
+  showBatchField: { type: Boolean, default: false },
+  //是否运行选择父级节点
+  allowSelectParent: { type: Boolean, default: true },
+  //标题
+  title: { type: String },
+
+  dataList: { type: Array },
+});
+// const emits = defineEmits(["selectItem"]);
+const multipleSelection = ref<any>([]);
+const shStaticTableCompRef = ref();
+let staticDataList = ref<any>([]);
+let toolFields = reactive<Array<any>>([]);
+const getIds = () => {
+  let selectDatas = unref(multipleSelection);
+  let ids: any = [];
+  for (let key in selectDatas) {
+    let temp = selectDatas[key];
+    ids.push(temp[props.primaryKey]);
+  }
+  return ids;
+};
+const init = async () => {
+  moveColumn();
+  reCreateData();
+  if (props.dataList) {
+    setData(props.dataList);
+  }
+};
+//监听外面传入数据的变化
+const assignData = (dataList: Array<any>) => {
+  for (let key in dataList) {
+    let temp: any = dataList[key];
+    if (temp instanceof Array) {
+      toolFields.push(...temp);
+    } else if (temp.tabList?.length > 0) {
+      for (let skey in temp.tabList) {
+        let stemp = temp.tabList[skey];
+        if (stemp["fieldList"]) {
+          toolFields.push(...stemp["fieldList"]);
+        }
+      }
+    } else {
+      toolFields.push(temp);
+    }
+  }
+};
+const reCreateData = () => {
+  toolFields = [];
+  let tempList = props.fieldList["fieldList"];
+  if (tempList) {
+    assignData(tempList);
+  }
+};
+
+const moveColumn = () => {
+  const tbody = document.querySelector(
+    ".sh-columns .el-table__body-wrapper tbody",
+  ) as HTMLElement | null;
+  if (tbody) {
+    Sortable.create(tbody, {
+      handle: ".move",
+      animation: 200,
+      ghostClass: "ghost",
+      onEnd(event: any) {
+        const { oldIndex, newIndex } = event;
+        //删除并获取当前行
+        const currRow = props.fieldList?.fieldList.splice(oldIndex, 1)[0];
+        //再拖动结束位置插入当前行
+        props.fieldList?.fieldList.splice(newIndex, 0, currRow);
+      },
+    });
+  }
+};
+
+/**
+ * 检查是否可以选择父节点
+ * @param val
+ */
+const checkParent = (val: any) => {
+  if (props.allowSelectParent) {
+    return true;
+  }
+  let flag = false;
+  for (let i in val) {
+    let item = val[i];
+    if (item["children"] && item["children"].length > 0) {
+      flag = true;
+      shStaticTableCompRef.value.toggleRowSelection(item, false);
+    }
+  }
+  if (flag) {
+    warning("非叶子节点不能选择");
+    return false;
+  }
+  return true;
+};
+const handleSelectionChange = (val: any) => {
+  if (!checkParent(val)) {
+    return;
+  }
+  //如果是弹出选择，只能选择一条数据
+  if (props.dialogInput) {
+    if (val.length <= 1) {
+      multipleSelection.value = val;
+    } else {
+      let ids = multipleSelection.value.map(
+        (item: any) => item[props.primaryKey],
+      ) as Array<any>;
+      let datas = val.filter(
+        (item: any) => !ids.includes(item[props.primaryKey]),
+      );
+      let data = multipleSelection.value[0];
+      shStaticTableCompRef.value?.toggleRowSelection(data, true);
+      multipleSelection.value = datas;
+    }
+  } else {
+    multipleSelection.value = val;
+  }
+};
+onMounted(() => {
+  init();
+});
+
+const getRowIdentity = (row: any) => {
+  let arr = props.primaryKey?.split(".");
+  if (arr?.length > 1) {
+    let temp = row;
+    for (let i in arr) {
+      temp = temp[arr[i]];
+    }
+    return temp;
+  }
+  return props.primaryKey ? row[props.primaryKey] : "";
+};
+const dataFormat = (row: any, column: any, cellValue: any, _index: number) => {
+  cellValue = commonParseCodeToName(column.property, cellValue);
+  return null == props.dataFormat
+    ? cellValue
+    : props.dataFormat(column.property, cellValue, row);
+};
+/**
+ * 单选选择行
+ * @param row
+ * @param _column
+ * @param _evt
+ */
+const selectRow = (row: any, _column: any, _evt: any) => {
+  if (!checkParent(row)) {
+    return;
+  }
+  if (multipleSelection.value.length > 0) {
+    for (let valueElement of multipleSelection.value) {
+      shStaticTableCompRef.value.toggleRowSelection(valueElement);
+    }
+  }
+  const selected = multipleSelection.value?.some(
+    (item: any) => item[props.primaryKey] === row[props.primaryKey],
+  );
+  if (!selected) {
+    multipleSelection.value.push(row);
+    shStaticTableCompRef.value?.toggleRowSelection(row);
+  } else {
+    multipleSelection.value = multipleSelection.value.filter((item: any) => {
+      return item[props.primaryKey] !== row[props.primaryKey];
+    });
+    shStaticTableCompRef.value?.toggleRowSelection(row, false);
+  }
+};
+/**
+ * 列表赋值
+ * @param data
+ */
+const setData = (data: any) => {
+  staticDataList.value = data;
+};
+//导出方法和变量
+defineExpose({
+  getIds,
+  setData,
+});
+</script>
+<template>
+  <div class="table-comp">
+    <div
+      style="
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+        border-bottom: var(--star-horse-style) 1px solid;
+      "
+      v-if="!dialogInput"
+    >
+      <div class="tb_title">
+        <star-horse-icon
+          icon-class="info"
+          size="14px"
+          style="font-weight: bold; color: var(--star-horse-style)"
+        />
+        {{ title }}
+      </div>
+      <div class="flex items-center flex-row-reverse">
+        <el-popover
+          trigger="click"
+          :popper-style="{ width: 'unset !important' }"
+          placement="left-end"
+        >
+          <template #reference>
+            <el-icon class="star-page-icon" style="cursor: pointer">
+              <el-tooltip content="显示/隐藏列">
+                <Tools />
+              </el-tooltip>
+            </el-icon>
+          </template>
+          <el-table
+            class="sh-columns"
+            ref="table"
+            :data="toolFields"
+            :strip="true"
+            :fit="true"
+            :highlight-current-row="true"
+            max-height="400px"
+            row-key="prop"
+            style="width: 100%"
+            :size="compSize"
+            border
+          >
+            <el-table-column prop="" label="排序" width="60">
+              <el-tag class="move" style="cursor: move" :size="compSize">
+                <el-icon style="cursor: move">
+                  <Sort />
+                </el-icon>
+              </el-tag>
+            </el-table-column>
+            <el-table-column
+              prop="label"
+              label="列名"
+              :show-overflow-tooltip="true"
+            >
+              <template #default="scope">
+                <el-tag
+                  round
+                  :effect="scope.row.listVisible ? 'dark' : 'light'"
+                >
+                  {{ scope.row.label }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column prop="listVisible" label="显示/隐藏" width="100">
+              <template #default="scope">
+                <el-switch
+                  v-model="scope.row.listVisible"
+                  :size="compSize"
+                  :active-value="true"
+                  :inactive-value="false"
+                />
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-popover>
+      </div>
+    </div>
+
+    <el-table
+      ref="shStaticTableCompRef"
+      :data="staticDataList"
+      @selection-change="handleSelectionChange"
+      @row-click="selectRow"
+      :row-key="getRowIdentity"
+      :stripe="true"
+      :fit="true"
+      :max-height="height"
+      :highlight-current-row="true"
+      :default-expand-all="expand"
+      :row-style="{
+        height: '30px',
+      }"
+      :cell-style="{
+        height: '30px',
+        'font-size': '12px',
+      }"
+      :header-cell-style="{
+        background: '#f2f2f2',
+        color: '#707070',
+        'font-size': '13px',
+        'background-image':
+          '-webkit-gradient(linear,left 0,left 100%,from(#f8f8f8),to(#ececec))',
+      }"
+      border
+    >
+      <el-table-column
+        type="selection"
+        align="center"
+        fixed="left"
+        :reserve-selection="true"
+      >
+      </el-table-column>
+      <template
+        v-for="item in fieldList['fieldList']"
+        :Key="compKey(item, item.id)"
+      >
+        <template v-if="Array.isArray(item)">
+          <star-horse-table-column
+            :data-format="dataFormat"
+            :cellEditable="fieldList['tableCellEditabled']"
+            :item="sitem"
+            :key="compKey(sitem, key)"
+            v-for="(sitem, key) in item"
+          />
+        </template>
+        <template v-else-if="item.tabList?.length > 0">
+          <star-horse-table-column
+            :data-format="dataFormat"
+            :cellEditable="fieldList['tableCellEditabled']"
+            :item="sitem"
+            :key="compKey(sitem, key)"
+            v-for="(sitem, key) in item.tabList.fieldList"
+          />
+        </template>
+        <star-horse-table-column
+          v-else
+          :cellEditable="fieldList['tableCellEditabled']"
+          :data-format="dataFormat"
+          :item="item"
+        />
+      </template>
+      <template
+        v-if="showBatchField"
+        v-for="item in fieldList['batchFieldList']"
+        :key="compKey(item, item.batchName)"
+      >
+        <star-horse-table-column :data-format="dataFormat" :item="item" />
+      </template>
+    </el-table>
+  </div>
+</template>
+<style lang="scss" scoped>
+.warning-row {
+  background: #8f8f8f;
+}
+
+.table-comp {
+  height: 100%;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  overflow: auto;
+
+  .el-table {
+    flex: 1;
+    overflow: auto;
+  }
+}
+
+:deep(.el-table__cell) {
+  padding: 0;
+}
+
+:deep(th.el-table__cell:first-child) {
+  padding: 5px 0;
+}
+
+.tb_title {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  color: var(--star-horse-style);
+}
+</style>