sohelp-eleplus 1.1.1-8.beta.1

package/sohelp-number-range/index.vue

@@ -0,0 +1,135 @@
+<template name="sohelp-number-range">
+  <view class="sohelp-number-range">
+    <el-input
+      v-model="value[0]"
+      v-bind="$attrs"
+      type="number"
+      placeholder="最小值"
+      :clearable="clearable"
+      @change="change"
+      :controlsPosition="controlsPosition"
+    ></el-input>
+    {{ separator }}
+    <el-input
+      v-model="value[1]"
+      v-bind="$attrs"
+      type="number"
+      placeholder="最大值"
+      :clearable="clearable"
+      @change="change"
+      :controlsPosition="controlsPosition"
+    ></el-input>
+  </view>
+</template>
+<script setup>
+  import { ref, watch } from 'vue';
+
+  const emit = defineEmits(['update:modelValue', 'change']);
+  const props = defineProps({
+    modelValue: [String, Number, Array],
+    min: {
+      type: Number,
+      default: -Infinity
+    },
+    max: {
+      type: Number,
+      default: Infinity
+    },
+    separator: {
+      type: String,
+      default: '-'
+    },
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    controlsPosition: {
+      type: String,
+      default: 'right'
+    }
+  });
+
+  const value = ref([]);
+
+  /**
+   * 监听props.modelValue的变化
+   */
+  watch(
+    () => props.modelValue,
+    (val) => {
+      if (Array.isArray(val)) {
+        value.value = val;
+      } else {
+        value.value = [val, ''];
+      }
+    },
+    {
+      immediate: true
+    }
+  );
+
+  /**
+   * 输入值变化时，触发事件
+   */
+  const change = () => {
+    let [min, max] = value.value.map((val) => (val === '' ? null : Number(val)));
+
+    if (min !== null) {
+      min = Math.max(props.min, min);
+      if (props.max !== Infinity) {
+        min = Math.min(props.max, min);
+      }
+    }
+
+    if (max !== null) {
+      max = Math.min(props.max, max);
+      if (props.min !== -Infinity) {
+        max = Math.max(props.min, max);
+      }
+    }
+
+    if (min !== null && max !== null && min >= max) {
+      min = props.min !== -Infinity ? props.min : '';
+      if (max !== null && max <= props.min) {
+        max = '';
+      }
+    }
+
+    value.value = [min, max].map((val) => (val === null ? '' : val));
+
+    emit('update:modelValue', value.value);
+    emit('change', value.value);
+  };
+</script>
+
+<script>
+  export default {
+    name: 'SohelpNumberRange'
+  };
+</script>
+
+<style lang="scss" scoped>
+  .sohelp-number-range {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 6px;
+  }
+
+  :deep(input::-webkit-outer-spin-button),
+  :deep(input::-webkit-inner-spin-button) {
+    -webkit-appearance: none;
+  }
+
+  :deep(input[type='number']) {
+    -moz-appearance: textfield;
+  }
+
+  :deep(input::-webkit-outer-spin-button),
+  :deep(input::-webkit-inner-spin-button) {
+    -webkit-appearance: none;
+  }
+  :deep(input[type='number']) {
+    -moz-appearance: textfield;
+  }
+</style>

package/sohelp-org-select/index.vue

@@ -0,0 +1,30 @@
+<template>
+  <sohelp-dyn-select
+    v-bind="$attrs"
+    :url="url"
+    :labelField="labelField"
+    :valueField="valueField"
+  ></sohelp-dyn-select>
+</template>
+<script>
+  export default {
+    name: 'SohelpOrgSelect',
+    components: {},
+    props: {
+      url: {
+        type: String,
+        default: '/engine/web/org/list'
+      },
+      labelField: {
+        type: String,
+        default: 'org_name'
+      },
+      valueField: {
+        type: String,
+        default: 'id'
+      }
+    },
+    setup(props, { emit, attrs }) {}
+  };
+</script>
+<style></style>

package/sohelp-org-tree/index.vue

@@ -0,0 +1,18 @@
+<template>
+  <sohelp-dyn-tree v-bind="$attrs" :url="url"></sohelp-dyn-tree>
+</template>
+<script>
+  export default {
+    name: 'SohelpOrgTree',
+    components: {},
+    props: {
+      url: {
+        type: String,
+        default: '/engine/web/org/list',
+        required: true
+      }
+    }
+  };
+</script>
+
+<style scoped></style>

package/sohelp-org-tree-select/index.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="sohelp-org-tree-select">
+    <ele-text v-if="readonly">
+      {{ data?.['org_name'] || modelValue}}
+    </ele-text>
+    <sohelp-tree-select v-else v-model="modelValue" v-model:data="data" v-bind="$attrs" :tree-props="treeProps"></sohelp-tree-select>
+  </div>
+</template>
+<script setup>
+import SohelpTreeSelect from "../sohelp-tree-select/index.vue";
+import { onMounted, reactive } from "vue";
+import { toTree } from "../utils/core.js";
+import { ElMessage } from "element-plus";
+
+const modelValue = defineModel("modelValue", { type: [String, Number, Array], default: "" });
+const data = defineModel("data",{type: Object, default: ()=>({})});
+
+const props = defineProps({
+  url: {
+    type: String,
+    default: "/engine/web/org/list"
+  },
+  datasource: {
+    type: [Array, Function, Promise],
+    required: true
+  },
+  readonly: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const treeProps = reactive({
+  data: []
+});
+
+const dataMap = reactive({});
+
+onMounted(async () => {
+  let data = {};
+  if (Array.isArray(props.datasource)) {
+    data = props.datasource;
+  } else if (typeof props.datasource === "function") {
+    const result = await props.datasource();
+    data = result;
+  } else if (props.datasource instanceof Promise) {
+    const result = await props.datasource;
+    data = result;
+  } else if (props.url) {
+    data = await SohelpHttp.get(props.url, {})
+      .then((res) => {
+        return res?.data || {};
+      })
+      .catch((e) => {
+        ElMessage.error(e?.meta?.message);
+      });
+  }
+  if (data) {
+    //转换成map
+    Object.assign(
+      dataMap,
+      data.reduce((prev, cur) => {
+        prev[cur.id] = cur;
+        return prev;
+      }, {})
+    );
+    // 转换成树形结构
+    treeProps.data = toTree({
+      data: data?.map((m) => ({
+        ...m,
+        label: m.org_name,
+        parent_id: m.parent_id
+      })),
+      idField: "id",
+      parentIdField: "parent_id"
+    });
+  }
+});
+
+defineExpose({
+  treeProps, modelValue, dataMap
+})
+
+
+</script>
+<script>
+
+export default {
+  name: "SohelpOrgTreeSelect"
+};
+</script>
+
+<style scoped></style>

package/sohelp-org-user-tree/index.vue

@@ -0,0 +1,26 @@
+<template>
+  <sohelp-dyn-tree v-bind="$attrs" :url="url"></sohelp-dyn-tree>
+</template>
+<script>
+import SohelpDynTree from "../sohelp-dyn-tree/index.vue";
+
+export default {
+  name: "SohelpOrgUserTree",
+  components: {SohelpDynTree},
+  props: {
+    url: {
+      type: String,
+      default: "/engine/web/org/list",
+      required: true
+    }
+  },
+  setup(props, {emit}) {
+    return {}
+  }
+
+}
+</script>
+
+<style scoped>
+
+</style>

package/sohelp-org-user-tree-select/index.vue

@@ -0,0 +1,11 @@
+<template>
+<div>SohelpOrgUserTreeModal是继承SohelpOrgUserTree和SohelpSelect</div>
+</template>
+<script>
+export default {
+  name: "SohelpOrgUserTreeModal"
+}
+</script>
+<style scoped>
+
+</style>

package/sohelp-pagination/index.vue

@@ -0,0 +1,11 @@
+<template>
+<div>SohelpPagination是继承ElePagination</div>
+</template>
+<script>
+export default {
+  name: "SohelpPagination是继承ElePagination"
+}
+</script>
+<style scoped>
+
+</style>

package/sohelp-power/index.vue

@@ -0,0 +1,105 @@
+<template>
+  <sohelp-select @optionClick="powerOptionCLick" ref="powerSelectRef" :datasource="PowerList"
+                 v-model="value" size="small" style="min-width: 0; width: 100px"
+                 placeholder="请选择查看范围">
+  </sohelp-select>
+  <!-- 查看范围 用户选择 -->
+  <ele-modal :width="460" v-model="powerUserVisible" title="用户选择">
+    <sohelp-user-select v-model="powerUsers" :multiple="true" placeholder="请选择用户"></sohelp-user-select>
+    <template #footer>
+      <el-button size="small" @click="powerOption('cancel')">{{ t("grid.toolbar.cancel") }}</el-button>
+      <el-button size="small" @click="powerOption('confirm')" type="primary">{{ t("grid.toolbar.confirm") }}</el-button>
+    </template>
+  </ele-modal>
+</template>
+<script setup>
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+
+/**
+ * 定义查看范围
+ */
+
+const PowerList = [{
+  label:"全部数据",
+  i18n: "grid.power.all_data",
+  value: "0"
+}, {
+  label:"我负责的",
+  i18n: "grid.power.my_responsibility",
+  value: "1"
+}, {
+  label: "下属负责的",
+  i18n: "grid.power.subordinates_responsibility",
+  value: "2"
+}, {
+  label:"仅限本部门",
+  i18n: "grid.power.only_my_department",
+  value: "3"
+}, {
+  label: "本公司",
+  i18n: "grid.power.this_company",
+  value: "4"
+}, {
+  label: "下属部门",
+  i18n: "grid.power.subordinate_departments",
+  value: "5"
+}, {
+  label: "本人及下属",
+  i18n: "grid.power.me_and_subordinates",
+  value: "6"
+}, {
+  label: "本部门及下属部门",
+  i18n: "grid.power.my_department_and_subordinates",
+  value: "7"
+}, {
+  label:"仅限本岗位",
+  i18n: "grid.power.only_my_position",
+  value: "8"
+}, {
+  label: "自定义",
+  i18n: "grid.power.custom",
+  value: "9"
+}];
+
+const emits = defineEmits("change");
+const value = ref(0);
+//显示用户选择弹窗
+const powerUserVisible = ref(false);
+//显示用户
+const powerUsers = ref([]);
+/**
+ * 查看范围
+ */
+const powerOptionCLick = (val) => {
+  if (value.value === "9") {
+    powerUserVisible.value = true;
+  } else {
+    emits("change", value.value);
+  }
+};
+/**
+ * 查看范围弹窗操作
+ * @param type
+ */
+const powerOption = (type) => {
+  if (type === "cancel") {
+    powerUserVisible.value = false;
+  } else if (type === "confirm") {
+    emits("change", { power: 9, powerUsers: powerUsers.value });
+  }
+  powerUserVisible.value = false;
+};
+
+
+</script>
+<script>
+export default {
+  name: "SohelpPower"
+};
+</script>
+<style scoped lang="scss">
+
+</style>

package/sohelp-pro-form/components/pro-form-footer.vue

@@ -0,0 +1,44 @@
+<!-- 表单底栏 -->
+<template>
+  <ElFormItem v-bind="footerProps || {}">
+    <template
+      v-for="name in Object.keys(footerSlots || {}).filter(
+        (k) =>
+          k !== 'footer' &&
+          !!(footerSlots && footerSlots[k] && $slots[footerSlots[k]])
+      )"
+      #[name]="slotProps"
+    >
+      <slot :name="footerSlots?.[name]" v-bind="slotProps || {}"></slot>
+    </template>
+    <slot name="footer">
+      <ElButton type="primary" @click="submit">{{ submitText }}</ElButton>
+      <ElButton @click="reset">{{ resetText }}</ElButton>
+    </slot>
+  </ElFormItem>
+</template>
+
+<script setup>
+  defineProps({
+    /** 底栏ElFormItem属性 */
+    footerProps: Object,
+    /** 底栏ElFormItem插槽 */
+    footerSlots: Object,
+    /** 提交按钮文本 */
+    submitText: String,
+    /** 重置按钮文本 */
+    resetText: String
+  });
+
+  const emit = defineEmits(['submit', 'reset']);
+
+  /** 提交 */
+  const submit = () => {
+    emit('submit');
+  };
+
+  /** 重置 */
+  const reset = () => {
+    emit('reset');
+  };
+</script>