@jari-ace/element-plus-component 0.2.2 → 0.3.0

package/packages/components/customGroupTree/src/customGroupTree.vue

@@ -1,91 +1,91 @@
-<template>
-    <el-tree
-        ref="deptTree"
-        v-loading="loading"
-        :data="state.groups"
-        size="default"
-        node-key="id"
-        default-expand-all
-        highlight-current
-        :current-node-key="id"
-        :expand-on-click-node="false"
-        @current-change="currentChange"
-        :props="{
-                class: (node: TreeNodeData) => selected?.id === node.id? 'selected-group':  'group',
-            }"
-    ></el-tree>
-</template>
-
-<script setup lang="ts">
-import {ref, shallowReactive} from "vue";
-import {
-    type CustomGroup,
-    useLoading, createAxiosWithoutCache, useCustomGroupApi
-} from "@jari-ace/app-bolts";
-import {useTreeData, type TreeNodeType} from "../../../hooks/useTreeData";
-import {computed} from "vue";
-import {ElTree, vLoading} from "element-plus";
-import type {TreeNodeData} from "element-plus/es/components/tree/src/tree.type";
-
-interface Props {
-    multiple?: boolean;
-}
-
-const deptTree = ref<typeof ElTree>();
-const axios = createAxiosWithoutCache()
-const loading = useLoading(axios);
-const customGroupApi = useCustomGroupApi(axios);
-const props = withDefaults(defineProps<Props>(), {});
-
-const emits = defineEmits(["change", "loaded"]);
-const selected = defineModel<CustomGroup | null>();
-
-const id = computed({
-    get() {
-        return selected.value?.id;
-    },
-    set(val) {
-        selected.value = state.groups.find(x => x.id === val) ?? null;
-    }
-})
-
-const state = shallowReactive<{
-    groups: (TreeNodeType & CustomGroup)[];
-}>({
-    groups: []
-});
-
-const getList = async () => {
-    const res = await customGroupApi.getAll();
-    state.groups = [
-        ...useTreeData<CustomGroup>(res, "name"),
-    ];
-    if (state.groups.length > 0) {
-        selected.value = state.groups[0];
-        id.value = selected.value.id;
-    }
-    emits("loaded", state.groups);
-};
-
-const currentChange = (data: TreeNodeType & CustomGroup) => {
-    selected.value = data;
-    emits("change", data);
-};
-
-defineExpose({
-    reload: getList
-});
-
-getList();
-</script>
-
-<style lang="scss" scoped>
-
-:deep(.group) {
-    background-color: #fff;
-}
-
-:deep(.selected-group) {
-    background-color: var(--el-tree-node-hover-bg-color) !important;
-}
-</style>
+<template>
+    <el-tree
+        ref="deptTree"
+        v-loading="loading"
+        :data="state.groups"
+        size="default"
+        node-key="id"
+        default-expand-all
+        highlight-current
+        :current-node-key="id"
+        :expand-on-click-node="false"
+        @current-change="currentChange"
+        :props="{
+                class: (node: TreeNodeData) => selected?.id === node.id? 'selected-group':  'group',
+            }"
+    ></el-tree>
+</template>
+
+<script setup lang="ts">
+import {ref, shallowReactive} from "vue";
+import {
+    type CustomGroup,
+    useLoading, createAxiosWithoutCache, useCustomGroupApi
+} from "@jari-ace/app-bolts";
+import {useTreeData, type TreeNodeType} from "../../../hooks/useTreeData";
+import {computed} from "vue";
+import {ElTree, vLoading} from "element-plus";
+import type {TreeNodeData} from "element-plus/es/components/tree/src/tree.type";
+
+interface Props {
+    multiple?: boolean;
+}
+
+const deptTree = ref<typeof ElTree>();
+const axios = createAxiosWithoutCache()
+const loading = useLoading(axios);
+const customGroupApi = useCustomGroupApi(axios);
+const props = withDefaults(defineProps<Props>(), {});
+
+const emits = defineEmits(["change", "loaded"]);
+const selected = defineModel<CustomGroup | null>();
+
+const id = computed({
+    get() {
+        return selected.value?.id;
+    },
+    set(val) {
+        selected.value = state.groups.find(x => x.id === val) ?? null;
+    }
+})
+
+const state = shallowReactive<{
+    groups: (TreeNodeType & CustomGroup)[];
+}>({
+    groups: []
+});
+
+const getList = async () => {
+    const res = await customGroupApi.getAll();
+    state.groups = [
+        ...useTreeData<CustomGroup>(res, "name"),
+    ];
+    if (state.groups.length > 0) {
+        selected.value = state.groups[0];
+        id.value = selected.value.id;
+    }
+    emits("loaded", state.groups);
+};
+
+const currentChange = (data: TreeNodeType & CustomGroup) => {
+    selected.value = data;
+    emits("change", data);
+};
+
+defineExpose({
+    reload: getList
+});
+
+getList();
+</script>
+
+<style lang="scss" scoped>
+
+:deep(.group) {
+    background-color: #fff;
+}
+
+:deep(.selected-group) {
+    background-color: var(--el-tree-node-hover-bg-color) !important;
+}
+</style>

package/packages/components/datePicker/JaDatePicker.vue

@@ -1,52 +1,52 @@
-<script setup lang="ts">
-import type {ValidationInstance} from '../../hooks/useBackendValidations'
-import {inject, onMounted, ref, watch} from "vue";
-import {ElDatePicker} from "element-plus";
-import {getValue, setValue} from "../../utils/objectUtils";
-
-const input = ref<typeof ElDatePicker>({} as typeof ElDatePicker)
-const model = inject('aceFormModel') as Record<string, any>
-const prop = inject('aceFormItemProp') as string
-const validator = inject('aceFormValidator') as ValidationInstance
-const emit = defineEmits<{
-    change: [value: string]
-}>()
-
-const exposeMethods = ref<any>({})
-
-function onChange(value: string) {
-    validator.removeFieldError(prop);
-    setValue(model.formData, prop, mv.value);
-    emit('change', value);
-}
-
-type ModelType = string | number | object;
-
-const mv = ref(getValue(model.formData, prop) as ModelType);
-watch(() => model.formData, () => {
-    mv.value = getValue(model.formData, prop) as ModelType;
-}, {
-    deep: true
-})
-
-onMounted(() => {
-    const refMethods = Object.entries(input.value).filter(([_, v]) => v instanceof Function);
-    refMethods.forEach(([key, val]) => {
-        exposeMethods.value[key] = val;
-    })
-})
-
-defineExpose(exposeMethods.value);
-</script>
-
-<template>
-    <el-date-picker
-        ref="input"
-        v-model="model.formData[prop]"
-        @change="onChange"
-        v-bind="$attrs">
-        <template v-for="(_, name) in $slots" v-slot:[name]>
-            <slot :name="name"></slot>
-        </template>
-    </el-date-picker>
-</template>
+<script setup lang="ts">
+import type {ValidationInstance} from '../../hooks/useBackendValidations'
+import {inject, onMounted, ref, watch} from "vue";
+import {ElDatePicker} from "element-plus";
+import {getValue, setValue} from "../../utils/objectUtils";
+
+const input = ref<typeof ElDatePicker>({} as typeof ElDatePicker)
+const model = inject('aceFormModel') as Record<string, any>
+const prop = inject('aceFormItemProp') as string
+const validator = inject('aceFormValidator') as ValidationInstance
+const emit = defineEmits<{
+    change: [value: string]
+}>()
+
+const exposeMethods = ref<any>({})
+
+function onChange(value: string) {
+    validator.removeFieldError(prop);
+    setValue(model.formData, prop, mv.value);
+    emit('change', value);
+}
+
+type ModelType = string | number | object;
+
+const mv = ref(getValue(model.formData, prop) as ModelType);
+watch(() => model.formData, () => {
+    mv.value = getValue(model.formData, prop) as ModelType;
+}, {
+    deep: true
+})
+
+onMounted(() => {
+    const refMethods = Object.entries(input.value).filter(([_, v]) => v instanceof Function);
+    refMethods.forEach(([key, val]) => {
+        exposeMethods.value[key] = val;
+    })
+})
+
+defineExpose(exposeMethods.value);
+</script>
+
+<template>
+    <el-date-picker
+        ref="input"
+        v-model="model.formData[prop]"
+        @change="onChange"
+        v-bind="$attrs">
+        <template v-for="(_, name) in $slots" v-slot:[name]>
+            <slot :name="name"></slot>
+        </template>
+    </el-date-picker>
+</template>

package/packages/components/datePicker/index.ts

@@ -1,4 +1,4 @@
-import {type SFCWithInstall, withInstall} from "../../utils/install";
-import Picker from "./JaDatePicker.vue";
-export const JaDatePicker:SFCWithInstall<typeof Picker> = withInstall(Picker);
-export default Picker;
+import {type SFCWithInstall, withInstall} from "../../utils/install";
+import Picker from "./JaDatePicker.vue";
+export const JaDatePicker:SFCWithInstall<typeof Picker> = withInstall(Picker);
+export default Picker;

package/packages/components/departmentPicker/index.ts

@@ -1,4 +1,4 @@
-import DepartmentPicker from "./src/DepartmentPicker.vue";
-import {type SFCWithInstall, withInstall} from "../../utils/install";
-
-export const JaDepartmentPicker: SFCWithInstall<typeof DepartmentPicker> = withInstall(DepartmentPicker);
+import DepartmentPicker from "./src/DepartmentPicker.vue";
+import {type SFCWithInstall, withInstall} from "../../utils/install";
+
+export const JaDepartmentPicker: SFCWithInstall<typeof DepartmentPicker> = withInstall(DepartmentPicker);

package/packages/components/departmentPicker/src/DepartmentPicker.vue

@@ -1,107 +1,107 @@
-<template>
-    <el-tree-select
-        style="width: 100%"
-        :data="state.department"
-        :size="props.size"
-        node-key="id"
-        check-strictly
-        :current-node-key="id"
-        highlight-current
-        v-model="id"
-        :multiple="multiple"
-        @change="currentChange"
-        v-bind="$attrs"
-        collapse-tags
-        collapse-tags-tooltip
-        tag-type="info"
-        teleported
-    />
-</template>
-
-<script setup lang="ts">
-import {reactive} from "vue";
-import {
-    type ProjectedDepartment,
-    useDepartmentApi,
-    FromDeptSelect, createAxiosWithoutCache,
-} from "@jari-ace/app-bolts";
-import {ElTreeSelect} from "element-plus";
-import {watch} from "vue";
-import {type TreeNodeType, useTreeData} from "../../../hooks/useTreeData";
-import {ALL_DEPARTMENT} from "./consts";
-
-const axios = createAxiosWithoutCache();
-const departmentApi = useDepartmentApi(axios);
-
-const props = withDefaults(
-    defineProps<{
-        realmId?: string;
-        modelValue?: string | null;
-        size?: "default" | "small";
-        showNodeAll?: boolean;
-        allId?: string;
-        multiple: boolean;
-    }>(),
-    {
-        size: "default",
-        showNodeAll: false,
-        allId: ALL_DEPARTMENT,
-        multiple: false
-    }
-);
-
-const emits = defineEmits(["change"]);
-
-const id = defineModel<string[] | string | undefined>();
-
-if (props.multiple && !Array.isArray(id.value)) {
-    throw new Error("部门选择器设置multiple为true，但是绑定的v-model值是单值");
-} else if (!props.multiple && Array.isArray(id.value)) {
-    throw new Error("部门选择器未设置multiple为true，但是绑定的v-model值是数组");
-}
-
-const state = reactive<{
-    department: TreeNodeType[];
-}>({
-    department: []
-});
-
-const getList = () => {
-    if (!props.realmId) return;
-    departmentApi
-        .getNormal(props.realmId ?? "0", FromDeptSelect.BAT)
-        .then((res) => {
-            state.department = [...useTreeData<ProjectedDepartment>(res, "name")];
-            if (props.showNodeAll) {
-                state.department.unshift({
-                    label: "所有部门",
-                    id: props.allId,
-                    children: [],
-                    hasChildren: false,
-                    sortIndex: 0,
-                    sortPath: "",
-                    dataVersion: 0,
-                    disabled: true
-                });
-            }
-        });
-};
-
-const currentChange = (data: string | string[]) => {
-    emits("change", Array.isArray(data) ? state.department.filter(d => data.findIndex(x => d.id
-                                                                                           === x)
-                                                                       >= 0) : state.department.find(d => d.id
-                                                                                                          === data));
-};
-
-getList();
-
-watch(
-    () => props.realmId,
-    () => {
-        getList();
-    }
-);
-</script>
-
-<style lang="scss" scoped></style>
+<template>
+    <el-tree-select
+        style="width: 100%"
+        :data="state.department"
+        :size="props.size"
+        node-key="id"
+        check-strictly
+        :current-node-key="id"
+        highlight-current
+        v-model="id"
+        :multiple="multiple"
+        @change="currentChange"
+        v-bind="$attrs"
+        collapse-tags
+        collapse-tags-tooltip
+        tag-type="info"
+        teleported
+    />
+</template>
+
+<script setup lang="ts">
+import {reactive} from "vue";
+import {
+    type ProjectedDepartment,
+    useDepartmentApi,
+    FromDeptSelect, createAxiosWithoutCache,
+} from "@jari-ace/app-bolts";
+import {ElTreeSelect} from "element-plus";
+import {watch} from "vue";
+import {type TreeNodeType, useTreeData} from "../../../hooks/useTreeData";
+import {ALL_DEPARTMENT} from "./consts";
+
+const axios = createAxiosWithoutCache();
+const departmentApi = useDepartmentApi(axios);
+
+const props = withDefaults(
+    defineProps<{
+        realmId?: string;
+        modelValue?: string | null;
+        size?: "default" | "small";
+        showNodeAll?: boolean;
+        allId?: string;
+        multiple: boolean;
+    }>(),
+    {
+        size: "default",
+        showNodeAll: false,
+        allId: ALL_DEPARTMENT,
+        multiple: false
+    }
+);
+
+const emits = defineEmits(["change"]);
+
+const id = defineModel<string[] | string | undefined>();
+
+if (props.multiple && !Array.isArray(id.value)) {
+    throw new Error("部门选择器设置multiple为true，但是绑定的v-model值是单值");
+} else if (!props.multiple && Array.isArray(id.value)) {
+    throw new Error("部门选择器未设置multiple为true，但是绑定的v-model值是数组");
+}
+
+const state = reactive<{
+    department: TreeNodeType[];
+}>({
+    department: []
+});
+
+const getList = () => {
+    if (!props.realmId) return;
+    departmentApi
+        .getNormal(props.realmId ?? "0", FromDeptSelect.BAT)
+        .then((res) => {
+            state.department = [...useTreeData<ProjectedDepartment>(res, "name")];
+            if (props.showNodeAll) {
+                state.department.unshift({
+                    label: "所有部门",
+                    id: props.allId,
+                    children: [],
+                    hasChildren: false,
+                    sortIndex: 0,
+                    sortPath: "",
+                    dataVersion: 0,
+                    disabled: true
+                });
+            }
+        });
+};
+
+const currentChange = (data: string | string[]) => {
+    emits("change", Array.isArray(data) ? state.department.filter(d => data.findIndex(x => d.id
+                                                                                           === x)
+                                                                       >= 0) : state.department.find(d => d.id
+                                                                                                          === data));
+};
+
+getList();
+
+watch(
+    () => props.realmId,
+    () => {
+        getList();
+    }
+);
+</script>
+
+<style lang="scss" scoped></style>

package/packages/components/departmentPicker/src/consts.ts

@@ -1,2 +1,2 @@
-export const ALL_DEPARTMENT = "-1";
-export const NO_DEPARTMENT = "-100";
+export const ALL_DEPARTMENT = "-1";
+export const NO_DEPARTMENT = "-100";

package/packages/components/departmentTree/index.ts

@@ -1,10 +1,10 @@
-import {type SFCWithInstall, withInstall} from "../../utils/install";
-import DepartmentTree from "./src/departmentTree.vue";
-
-
-/**
- * 可单选的部门树组件
- */
-export const JaDepartmentTree: SFCWithInstall<typeof DepartmentTree> = withInstall(DepartmentTree);
-
-
+import {type SFCWithInstall, withInstall} from "../../utils/install";
+import DepartmentTree from "./src/departmentTree.vue";
+
+
+/**
+ * 可单选的部门树组件
+ */
+export const JaDepartmentTree: SFCWithInstall<typeof DepartmentTree> = withInstall(DepartmentTree);
+
+