star-horse-lowcode 2.7.63 → 2.7.65

package/src/components/comp/utils/DataPicker.vue

@@ -0,0 +1,302 @@
+<script setup lang="ts">
+import {useVModel} from "@vueuse/core";
+import {reactive, ref, watch} from "vue";
+import {postRequest} from "@/api/star_horse_apis";
+import StarHorseDialog from "@/components/comp/StarHorseDialog.vue";
+import {closeLoad} from "@/api/star_horse_utils";
+import {PageProps} from "@/components/types/PageProps";
+
+export type ModelValueType = any;
+
+export interface DataDropdownProps {
+  modelValue: ModelValueType;
+  dataUrl?: string;
+  pageSize?: number;
+  datas?: Array<any>;
+  title?: string;
+  compSize?: string;
+  displayName?: string;
+  displayValue?: string;
+  multiple?: boolean;
+  checkStrictly?: boolean;
+}
+
+const props = withDefaults(defineProps<DataDropdownProps>(), {
+  displayName: "name",
+  displayValue: "value",
+  compSize: "small",
+  pageSize: 0,
+  multiple: false,
+  checkStrictly: true,
+});
+
+const emits = defineEmits<{
+  (e: "update:modelValue", modelValue: ModelValueType): void;
+}>();
+const treeProps = {
+  label: props.displayName,
+  children: "children",
+  value: props.displayValue,
+  isLeaf: "leaf",
+  class: (data: any) => renderClass(data),
+};
+const value: any = useVModel(props, "modelValue", emits);
+
+const dataOptions = ref<Array<any>>([]);
+const dataOrgOptions = ref<Array<any>>([]);
+const orgTreeRef = ref<InstanceType<any>>();
+const expandedKeys = ref<string[]>([]);
+
+const renderClass = (
+    data: any,
+):
+    | string
+    | {
+  [key: string]: boolean;
+} => {
+  let value = props.displayValue || "value";
+  const val = dataOptions.value.find((e) => e[value] === data[value]);
+  if (val) {
+    return "is-active";
+  } else {
+    return "";
+  }
+};
+
+const onNodeClick = (data: any) => {
+  let value = props.displayValue || "value";
+  if (props.multiple) {
+    const index = dataOptions.value.findIndex((e) => e[value] === data[value]);
+    if (index === -1) {
+      dataOptions.value.push(data);
+      dataOptions.value.sort((a, b) => a[value].localeCompare(b[value]));
+    } else {
+      dataOptions.value.splice(index, 1);
+    }
+  } else {
+    const index = dataOptions.value.findIndex((e) => e[value] === data[value]);
+    if (index === -1) {
+      dataOptions.value = [data];
+    } else {
+      dataOptions.value.splice(index, 1);
+    }
+  }
+  // console.log("onNodeClick", dataOptions.value);
+};
+const dialogVisible = ref(false);
+const queryForm = reactive({
+  name: null,
+});
+
+watch(
+    () => queryForm.name,
+    (val) => {
+      orgTreeRef.value?.filter(val);
+    },
+);
+const filterNode = (value: string, data: any): boolean => {
+  if (!value) return true;
+  return data[props.displayName].includes(value);
+};
+let pageInfo = reactive<PageProps>({
+  pageSize: 20,
+  currentPage: 1,
+  totalData: 0,
+  totalPage: 0,
+  dataList: [],
+});
+const loadData = () => {
+  let params: any = {
+    currentPage: pageInfo.currentPage,
+    pageSize: props.pageSize || 0,
+    fieldList: [],
+    orderBy: [],
+  };
+  postRequest(props.dataUrl!, params)
+      .then((res) => {
+        if (res?.data?.code) {
+          res && console.error(res?.data?.cnMessage);
+          return;
+        }
+        let redata = res?.data?.data;
+        //如果不是分页之间显示返回的所有数据
+        dataOrgOptions.value = redata?.dataList || redata;
+        pageInfo.totalPage = redata?.totalPages;
+        pageInfo.totalData = redata?.totalDatas;
+      })
+      .catch((err: any) => {
+        console.log(err);
+      })
+      .finally(() => {
+        closeLoad();
+      });
+};
+const open = () => {
+  dialogVisible.value = true;
+};
+const onOpen = () => {
+  if (props.datas && props.datas.length > 0) {
+    dataOrgOptions.value = props.datas;
+  } else {
+    loadData();
+  }
+  let dataIds: string[] = [];
+  if (Array.isArray(value.value)) {
+    dataIds.push(...value.value);
+  } else if (value.value) {
+    dataIds.push(value.value);
+  }
+  if (dataIds.length > 0) {
+  } else {
+    dataOptions.value = [];
+  }
+  console.log("onOpen", dataOrgOptions);
+};
+const handelConfirm = () => {
+  if (props.multiple) {
+    value.value = dataOptions.value;
+  } else {
+    if (dataOptions.value.length > 0) {
+      value.value = dataOptions.value[0];
+    } else {
+      value.value = null;
+    }
+  }
+  dialogVisible.value = false;
+};
+const resetData = () => {
+  dataOptions.value = [];
+};
+const pageChangeClick = (val: number) => {
+  pageInfo.currentPage = val;
+  loadData();
+};
+const pageSizeClick = (val: number) => {
+  pageInfo.pageSize = val;
+  pageInfo.currentPage = 1;
+  loadData();
+};
+defineExpose({
+  open,
+});
+</script>
+
+<template>
+  <star-horse-dialog
+      :self-func="true"
+      :dialog-visible="dialogVisible"
+      :hideFullScreenIcon="true"
+      @open="onOpen"
+      @merge="handelConfirm"
+      @resetForm="resetData"
+      @closeAction="dialogVisible = false"
+      draggable
+      :title="title || '选择数据'"
+      boxWidth="30%"
+  >
+    <el-card shadow="never" class="org-card dialog-body">
+      <template #header>
+        <el-input
+            v-model="queryForm.name"
+            placeholder="输入关键字进行查询"
+            :style="{ width: '100%' }"
+            suffix-icon="search"
+            clearable
+        >
+        </el-input>
+      </template>
+
+      <el-scrollbar tag="div" class="org-tree">
+        <el-tree
+            ref="orgTreeRef"
+            :node-key="displayValue"
+            :data="dataOrgOptions"
+            :default-expanded-keys="expandedKeys"
+            :props="treeProps"
+            :check-strictly="checkStrictly"
+            :filter-node-method="filterNode"
+            @node-click="onNodeClick"
+        >
+          <template #default="{ data }">
+            <div class="data-line">
+              <div class="menu-title">
+                <div class=" flex flex-row items-center">
+                  <star-horse-icon
+                      :icon-class="
+                    data.children?.length > 0 ? 'folder' : 'document'
+                  "
+                  />
+                  &nbsp;{{ data[displayName] }}
+                </div>
+              </div>
+              <el-icon class="is-selected">
+                <Check/>
+              </el-icon>
+            </div>
+          </template>
+        </el-tree>
+      </el-scrollbar>
+      <el-pagination
+          v-if="pageSize > 0"
+          :total="pageInfo.totalData"
+          @current-change="pageChangeClick"
+          @size-change="pageSizeClick"
+          :size="compSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          v-model:currentPage="pageInfo.currentPage"
+          v-model:page-size="pageInfo.pageSize"
+          v-model:pageCount="pageInfo.totalPage"
+      />
+    </el-card>
+  </star-horse-dialog>
+</template>
+
+<style scoped lang="scss">
+:deep {
+  .el-tree {
+    --el-tree-node-content-height: 40px;
+
+    .el-tree-node__content {
+      border-radius: 8px;
+      margin: 2px 0 2px 0;
+    }
+
+    .is-active {
+      color: var(--el-color-primary);
+
+      .is-selected {
+        display: block;
+      }
+    }
+  }
+}
+
+.el-card {
+  background-color: transparent;
+
+  :deep(.el-card__header) {
+    padding: 10px !important;
+  }
+
+  :deep(.el-card__body) {
+    padding: 0 !important;
+  }
+}
+
+.org-tree {
+  height: 270px;
+  padding: 5px;
+}
+
+.data-line {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.is-selected {
+  display: none;
+  padding-right: 15px;
+}
+</style>

package/src/components/comp/utils/DataTag.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { onMounted } from "vue";
+
+export interface DataTagProps {
+  data: any;
+  displayName?: string;
+  displayValue?: string;
+  type?: "success" | "info" | "warning" | "danger";
+  closable?: boolean;
+}
+
+const props = withDefaults(defineProps<DataTagProps>(), {
+  closable: false,
+  displayName: "name",
+  displayValue: "value",
+  type: "info",
+});
+const emits = defineEmits<{
+  (e: "close", id: string): void;
+}>();
+
+onMounted(() => {
+  if (!props.data) {
+    throw new Error("username is required");
+  }
+});
+const onClose = () => {
+  emits("close", props.data);
+};
+</script>
+<template>
+  <el-tag
+    round
+    :closable="closable"
+    :type="type"
+    effect="light"
+    @close="onClose"
+  >
+    <div class="flex-center" style="gap: 4px; grid-gap: 4px">
+      <span>{{ data[displayName] }}</span>
+    </div>
+  </el-tag>
+</template>
+
+<style scoped lang="scss">
+:deep {
+  .el-tag__content:only-child {
+    margin-right: 4px;
+  }
+}
+</style>

package/src/components/cron/Crontab-Day.vue

@@ -0,0 +1,230 @@
+<template>
+  <div class="cron-content">
+    <div class="cron-item">
+      <el-radio size="small" v-model="radioValue" :label="1" border>
+        日，允许的通配符[, - * / L M]</el-radio
+      >
+    </div>
+    <div class="cron-item">
+      <el-radio size="small" v-model="radioValue" :label="2" border>
+        不指定</el-radio
+      >
+    </div>
+    <div class="cron-item">
+      <el-radio size="small" v-model="radioValue" :label="3" border>
+        周期</el-radio
+      >
+      <span style="margin-left: 10px; margin-right: 5px">从</span>
+      <el-input-number
+        size="small"
+        v-model="cycle01"
+        :min="0"
+        :max="31"
+        controls-position="right"
+      />
+      <span style="margin-left: 10px; margin-right: 5px">至</span>
+      <el-input-number
+        size="small"
+        v-model="cycle02"
+        :min="0"
+        :max="31"
+        controls-position="right"
+      />
+      <span style="margin-left: 10px; margin-right: 5px">日</span>
+    </div>
+    <div class="cron-item">
+      <el-radio size="small" v-model="radioValue" :label="4" border
+        >循环</el-radio
+      >
+      <span style="margin-left: 10px; margin-right: 5px">从</span>
+      <el-input-number
+        size="small"
+        v-model="average01"
+        :min="0"
+        :max="31"
+        controls-position="right"
+      />
+      <span style="margin-left: 10px; margin-right: 5px">号开始，每</span>
+      <el-input-number
+        size="small"
+        v-model="average02"
+        :min="0"
+        :max="31"
+        controls-position="right"
+      />
+      <span style="margin-left: 10px; margin-right: 5px">日执行一次</span>
+    </div>
+    <div class="cron-item">
+      <el-radio size="small" v-model="radioValue" :label="5" border
+        >工作日</el-radio
+      >
+      <span style="margin-left: 10px; margin-right: 5px">每月</span>
+      <el-input-number
+        size="small"
+        v-model="workday"
+        :min="0"
+        :max="31"
+        controls-position="right"
+      />
+      <span style="margin-left: 10px; margin-right: 5px"
+        >号最近的那个工作日</span
+      >
+    </div>
+    <div class="cron-item">
+      <el-radio size="small" v-model="radioValue" :label="6" border>
+        本月最后一天</el-radio
+      >
+    </div>
+    <div class="cron-item">
+      <el-radio size="small" v-model="radioValue" :label="7" border>
+        指定</el-radio
+      >
+      <el-checkbox-group size="small" v-model="checkboxList">
+        <el-checkbox
+          class="my-[5px]"
+          :border="true"
+          v-for="item in 31"
+          :key="item"
+          :value="item - 1"
+          :label="item < 11 ? '0' + (item - 1) : item - 1"
+        />
+      </el-checkbox-group>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped></style>
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+
+defineOptions({
+  name: "crontab-day",
+});
+let radioValue = ref(1);
+let workday = ref(1);
+let cycle01 = ref(1);
+let cycle02 = ref(2);
+let average01 = ref(1);
+let average02 = ref(1);
+
+let checkboxList = ref([]);
+const props = defineProps({
+  check: { type: Function },
+  cron: { type: Object },
+});
+
+const emits = defineEmits(["update"]);
+// 计算两个周期值
+const cycleTotalFun = () => {
+  cycle01.value = props.check?.(cycle01.value, 1, 31);
+  cycle02.value = props.check?.(cycle02.value, 1, 31);
+  return cycle01.value + "-" + cycle02.value;
+};
+// 计算平均用到的值
+const averageTotalFun = () => {
+  average01.value = props.check?.(average01.value, 1, 31);
+  average02.value = props.check?.(average02.value, 1, 31);
+  return average01.value + "/" + average02.value;
+};
+// 计算工作日格式
+const workdayCheckFun = () => {
+  workday.value = props.check?.(workday.value, 1, 31);
+  return workday.value;
+};
+// 计算勾选的checkbox值合集
+const checkboxStringFun = () => {
+  let str = checkboxList.value.join();
+  return str == "" ? "?" : str;
+};
+let cycleTotal = computed(() => cycleTotalFun());
+let averageTotal = computed(() => averageTotalFun());
+let workdayCheck = computed(() => workdayCheckFun());
+let checkboxString = computed(() => checkboxStringFun());
+// 单选按钮值变化时
+const radioChange = () => {
+  switch (radioValue.value) {
+    case 1:
+      emits("update", "day", "*", "day");
+      break;
+    case 2:
+      emits("update", "day", "?");
+      break;
+    case 3:
+      emits("update", "day", cycle01.value + "-" + cycle02.value);
+      break;
+    case 4:
+      emits("update", "day", average01.value + "/" + average02.value);
+      break;
+    case 5:
+      emits("update", "day", workday.value + "W");
+      break;
+    case 6:
+      emits("update", "day", "L");
+      break;
+    case 7:
+      emits("update", "day", checkboxString.value);
+      break;
+  }
+};
+// 周期两个值变化时
+const cycleChange = () => {
+  if (radioValue.value == 3) {
+    emits("update", "day", cycleTotal.value);
+  }
+};
+// 平均两个值变化时
+const averageChange = () => {
+  if (radioValue.value == 4) {
+    emits("update", "day", averageTotal.value);
+  }
+};
+// 最近工作日值变化时
+const workdayChange = () => {
+  if (radioValue.value == 5) {
+    emits("update", "day", workday.value + "W");
+  }
+};
+// checkbox值变化时
+const checkboxChange = () => {
+  if (radioValue.value == 7) {
+    emits("update", "day", checkboxString.value);
+  }
+};
+// // 父组件传递的week发生变化触发
+// const weekChange = () => {
+//   //判断week值与day不能同时为“?”
+//   if (props.cron?.week == '?' && radioValue.value == 2) {
+//     radioValue.value = 1;
+//   } else if (props.cron?.week !== '?' && radioValue.value != 2) {
+//     radioValue.value = 2;
+//   }
+// };
+watch(
+  () => radioValue.value,
+  (_val) => radioChange(),
+);
+watch(
+  () => cycleTotal.value,
+  (_val) => cycleChange(),
+);
+watch(
+  () => averageTotal.value,
+  (_val) => averageChange(),
+);
+watch(
+  () => workdayCheck.value,
+  (_val) => workdayChange(),
+);
+watch(
+  () => checkboxString.value,
+  (_val) => checkboxChange(),
+);
+defineExpose({
+  cycle01,
+  cycle02,
+  average01,
+  average02,
+  checkboxList,
+  workday,
+  radioValue,
+});
+</script>