sohelp-eleplus 1.1.13

package/sohelp-drop-card/props.js

@@ -0,0 +1,68 @@
+/**
+ * 属性
+ */
+export const prop = {
+  dict: {
+    type: String,
+    required: true
+  },
+
+  type: {
+    type: String,
+    default: 'select'
+  },
+
+  mappingFields:{
+    type: Object,
+    default: () => {
+      return {
+        label: 'label',
+        value: 'value'
+      }
+    }
+  },
+
+  width: {
+    type: String,
+    default: '200px'
+  },
+
+  placeholder: {
+    type: String,
+    default: '请选择'
+  },
+  modelValue: {
+    type: Array || String || Number,
+    default: String,
+    required: true
+  },
+  filterable: {
+    type: Boolean,
+    default: true
+  },
+  clearable: {
+    type: Boolean,
+    default: true
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  size: {
+    type: String,
+    validator: function (value) {
+      return ['large', 'default', 'small', ''].includes(value);
+    },
+    default: 'default'
+  },
+  multiple: {
+    type: Boolean,
+    default: false
+  }
+};
+
+/**
+ * 事件
+ */
+
+export const emit = ['update:modelValue','change'];

package/sohelp-dyn-select/index.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="sohelp-dyn-select" v-if="selectData">
+    <ele-text v-if="readonly">
+      <ele-text>
+        {{ getLabel }}
+      </ele-text>
+    </ele-text>
+    <sohelp-select
+      v-else
+      v-model="value"
+      :datasource="selectData"
+      v-bind="$attrs"
+      :labelField="labelField"
+      :valueField="valueField"
+    />
+
+  </div>
+</template>
+<script>
+  import { computed, reactive, ref, onMounted, watch } from 'vue';
+  import { ElMessage } from 'element-plus';
+  import SohelpSelect from '../sohelp-select/index.vue';
+
+  export default {
+    name: 'SohelpDynSelect',
+    components: { SohelpSelect },
+    props: {
+      datasource: {
+        type: [Array, Function, Promise],
+        required: true
+      },
+      url: {
+        type: String,
+        required: true
+      },
+      readonly: {
+        type: Boolean,
+        default: false
+      },
+      labelField: String,
+      valueField: String,
+      modelValue: [String, Number, Array, Object]
+    },
+    setup(props, { emit, attrs }) {
+      const value = ref('');
+      const selectData = ref(null);
+
+      onMounted(async () => {
+        if (Array.isArray(props.datasource)) {
+          selectData.value = props.datasource;
+        } else if (typeof props.datasource === 'function') {
+          const result = await props.datasource();
+          selectData.value = result;
+        } else if (props.datasource instanceof Promise) {
+          const result = await props.datasource;
+          selectData.value = result;
+        } else {
+          load();
+        }
+      });
+
+      const load = async () => {
+        if (props.url && props?.url?.length > 0) {
+          const res = await SohelpHttp.get(props?.url, {}).catch((err) => {
+            ElMessage.error(err.message || 'error');
+          });
+
+          if (res?.data?.length > 0) {
+            selectData.value = res.data;
+          }
+        }
+      };
+
+      /**
+       * 获取label
+       */
+      const getLabel = computed(() => {
+        return selectData.value.find((item) => item.id === props.modelValue)?.[props.labelField];
+      });
+
+      watch(
+        () => props.modelValue,
+        (val) => {
+          value.value = val;
+        },{
+          immediate: true,
+          deep: true
+        }
+      );
+
+      return {
+        value,
+        getLabel,
+        selectData
+      };
+    }
+  };
+</script>
+<style></style>

package/sohelp-dyn-select/props.js

@@ -0,0 +1,67 @@
+/**
+ * 属性
+ */
+export const prop = {
+  url: {
+    type: String,
+    required: true
+  },
+
+
+  mappingFields:{
+    type: Object,
+    default: () => {
+      return {
+        label: 'label',
+        value: 'value'
+      }
+    }
+  },
+
+  width: {
+    type: String,
+    default: '200px'
+  },
+
+  placeholder: {
+    type: String,
+    default: '请选择'
+  },
+  modelValue: {
+    type: Array || String || Number,
+    required: true
+  },
+  filterable: {
+    type: Boolean,
+    default: true
+  },
+  clearable: {
+    type: Boolean,
+    default: true
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  size: {
+    type: String,
+    validator: function (value) {
+      return ['large', 'default', 'small', ''].includes(value);
+    },
+    default: 'default'
+  },
+  multiple: {
+    type: Boolean,
+    default: false
+  },
+  type: {
+    type: String,
+    default: 'select'
+  }
+};
+
+/**
+ * 事件
+ */
+
+export const emit = ['update:modelValue','change'];

package/sohelp-dyn-tree/index.vue

@@ -0,0 +1,82 @@
+<template>
+  <sohelp-tree
+    v-bind="$attrs"
+    :data="dataValue"
+    :props="defaultProps"
+    @node-click="handleNodeClick"
+  ></sohelp-tree>
+</template>
+<script>
+  import { onMounted, ref } from 'vue';
+  import SohelpTree from '../sohelp-tree/index.vue';
+  import { toTree } from '../utils/core.js';
+  export default {
+    name: 'SohelpDynTree',
+    components: {SohelpTree},
+    props: {
+      url: {
+        type: String,
+        required: true
+      },
+      valueField: {
+        type: String,
+        default: 'id'
+      },
+      labelField: {
+        type: String,
+        default: 'org_name'
+      },
+      parentField: {
+        type: String,
+        default: 'parent_id'
+      }
+    },
+    emits: ['node-click'],
+    setup(props, { emit }) {
+      const dataValue = ref([]);
+      onMounted(async () => {
+        if (props.url && props?.url?.length > 0) {
+          const res = await SohelpHttp.get(props?.url, {}).catch((err) => {
+            ElMessage.error(err.message || 'error');
+          });
+          if (res?.data) {
+            if (res?.data.length > 0) {
+              // 根据数据构建树形结构
+              const { labelField, valueField, parentField } = props;
+              let data = toTree({
+                data: res.data.map((item) => ({
+                  label: item[labelField] ?? '',
+                  id: item[valueField] ?? '',
+                  parent_id: item[parentField] ?? ''
+                })),
+                idField: valueField,
+                parentIdField: parentField,
+                childrenField: 'children',
+                labelField
+              });
+              dataValue.value = data;
+            }
+          }
+        } else {
+          dataValue.value = [];
+        }
+      });
+
+      const defaultProps = {
+        children: 'children',
+        label: 'label'
+      };
+
+      const handleNodeClick = (data, node, el) => {
+        emit('node-click', data, node, el);
+      };
+
+      return {
+        dataValue,
+        handleNodeClick,
+        defaultProps
+      };
+    }
+  };
+</script>
+<style scoped></style>

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

@@ -0,0 +1,114 @@
+<template>
+  <ele-tree-select
+    ref="dynTreeSelectRef"
+    v-bind="$attrs"
+    v-model="selectedValue"
+    :tree-props="treeProps"
+    @change="handleChange"
+  />
+</template>
+<script>
+  import { reactive, onMounted, ref } from 'vue';
+  import { toTree } from '../utils/core.js';
+
+  export default {
+    name: 'SohelpDynTreeSelect',
+    props: {
+      url: {
+        type: String,
+        default: '/engine/web/org/list',
+        required: true
+      },
+      valueField: {
+        type: String,
+        default: 'id'
+      },
+      labelField: {
+        type: String,
+        default: 'org_name'
+      },
+      parentField: {
+        type: String,
+        default: 'parent_id'
+      },
+      highlightCurrent: {
+        type: Boolean,
+        default: false
+      },
+      expandOnClickNode: {
+        type: Boolean,
+        default: false
+      },
+      defaultExpandedKeys: {
+        type: Array,
+        default: []
+      },
+      checkStrictly: {
+        type: Boolean,
+        default: false
+      },
+      height: {
+        type: String,
+        default: '255'
+      },
+      modelValue: {
+        type: [String, Number, Array],
+        required: true
+      }
+    },
+    emits: ['update:modelValue'],
+    setup(props, { emit, attrs }) {
+      const treeProps = reactive({
+        height: 255,
+        data: [],
+        expandOnclickNode: false,
+        highlightCurrent: false,
+        checkStrictly: false,
+        defaultExpandedKeys: [],
+        checkOnClickNode: true,
+        nodeKey: 'id'
+      });
+
+      const selectedValue = ref();
+
+      onMounted(async () => {
+        // 初始化树形结构数据
+        treeProps.height = Number(props.height);
+        treeProps.expandOnclickNode = props.expandOnClickNode;
+        treeProps.highlightCurrent = props.highlightCurrent;
+        treeProps.checkStrictly = props.checkStrictly;
+        treeProps.defaultExpandedKeys =
+          props.defaultExpandedKeys?.length > 0 ? props.defaultExpandedKeys.split(',').filter((item) => item) : [];
+
+        if (props.url && props?.url?.length > 0) {
+          const res = await SohelpHttp.get(props?.url, {}).catch((err) => {
+            ElMessage.error(err.message || 'error');
+          });
+          if (res?.data) {
+            if (res?.data.length > 0) {
+              // 根据数据构建树形结构
+              const { labelField, valueField, parentField } = props;
+              treeProps.data = toTree({
+                data: res.data.map((item) => ({
+                  label: item[labelField] ?? '',
+                  id: item[valueField] ?? '',
+                  parent_id: item[parentField] ?? ''
+                })),
+                idField: valueField,
+                parentIdField: parentField,
+                childrenField: 'children',
+                labelField
+              });
+            }
+          }
+        }
+      });
+
+      return {
+        treeProps,
+        selectedValue
+      };
+    }
+  };
+</script>
+<style></style>