star-horse-lowcode 2.7.65 → 2.7.67

package/src/components/comp/StarHorseSearchComp.vue

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

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