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

package/packages/components/departmentTree/src/departmentTree.vue

@@ -1,135 +1,135 @@
-<template>
-    <el-tree
-        ref="deptTree"
-        v-loading="loading"
-        :data="state.departments"
-        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 ProjectedDepartment,
-    useDepartmentApi,
-    FromDeptSelect,
-    useLoading, createAxiosWithoutCache
-} from "@jari-ace/app-bolts";
-import {useTreeData, type TreeNodeType} from "../../../hooks/useTreeData";
-import {computed, watch} from "vue";
-import {ALL_DEPARTMENT, NO_DEPARTMENT} from "../../departmentPicker/src/consts";
-import {ElTree, vLoading} from "element-plus";
-import type {TreeNodeData} from "element-plus/es/components/tree/src/tree.type";
-
-interface Props {
-    realmId?: string;
-    /**
-     * 是否显示无部门节点，用于筛选无归属部门用户
-     */
-    showNoDepartment?: boolean;
-    multiple?: boolean;
-}
-
-const deptTree = ref<typeof ElTree>();
-const axios = createAxiosWithoutCache()
-const loading = useLoading(axios);
-const departmentApi = useDepartmentApi(axios);
-const props = withDefaults(defineProps<Props>(), {
-    showNoDepartment: false
-});
-
-const emits = defineEmits(["change", "loaded"]);
-const selected = defineModel<ProjectedDepartment | null>();
-
-const id = computed({
-    get() {
-        return selected.value?.id;
-    },
-    set(val) {
-        selected.value = state.departments.find(x => x.id === val) ?? null;
-    }
-})
-
-const state = shallowReactive<{
-    departments: (TreeNodeType & ProjectedDepartment)[];
-}>({
-    departments: []
-});
-
-const getList = async () => {
-    if (!props.realmId) return;
-    const res = await departmentApi.getNormal(props.realmId, FromDeptSelect.BT);
-    state.departments = [
-        {
-            id: ALL_DEPARTMENT,
-            label: "所有部门",
-            name: "所有部门",
-            shortCode: "",
-            children: [],
-            hasChildren: false,
-            sortIndex: -1,
-            sortPath: "",
-            dataVersion: 0,
-            entity: false,
-            attributes: {}
-        },
-        ...(
-            props.showNoDepartment ? [{
-                id: NO_DEPARTMENT,
-                label: "无归属部门",
-                name: "无归属部门",
-                shortCode: "",
-                children: [],
-                hasChildren: false,
-                sortIndex: -100,
-                sortPath: "no_dept",
-                dataVersion: 0,
-                entity: false,
-                attributes: {}
-            }] : []
-        ),
-        ...useTreeData<ProjectedDepartment>(res, "name"),
-    ];
-    id.value = state.departments[0].id;
-    emits("loaded", state.departments);
-};
-
-const currentChange = (data: TreeNodeType & ProjectedDepartment) => {
-    selected.value = data;
-    emits("change", data);
-};
-
-watch(
-    () => props.realmId,
-    () => {
-        //重新获取
-        getList();
-    }
-);
-
-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.departments"
+        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 ProjectedDepartment,
+    useDepartmentApi,
+    FromDeptSelect,
+    useLoading, createAxiosWithoutCache
+} from "@jari-ace/app-bolts";
+import {useTreeData, type TreeNodeType} from "../../../hooks/useTreeData";
+import {computed, watch} from "vue";
+import {ALL_DEPARTMENT, NO_DEPARTMENT} from "../../departmentPicker/src/consts";
+import {ElTree, vLoading} from "element-plus";
+import type {TreeNodeData} from "element-plus/es/components/tree/src/tree.type";
+
+interface Props {
+    realmId?: string;
+    /**
+     * 是否显示无部门节点，用于筛选无归属部门用户
+     */
+    showNoDepartment?: boolean;
+    multiple?: boolean;
+}
+
+const deptTree = ref<typeof ElTree>();
+const axios = createAxiosWithoutCache()
+const loading = useLoading(axios);
+const departmentApi = useDepartmentApi(axios);
+const props = withDefaults(defineProps<Props>(), {
+    showNoDepartment: false
+});
+
+const emits = defineEmits(["change", "loaded"]);
+const selected = defineModel<ProjectedDepartment | null>();
+
+const id = computed({
+    get() {
+        return selected.value?.id;
+    },
+    set(val) {
+        selected.value = state.departments.find(x => x.id === val) ?? null;
+    }
+})
+
+const state = shallowReactive<{
+    departments: (TreeNodeType & ProjectedDepartment)[];
+}>({
+    departments: []
+});
+
+const getList = async () => {
+    if (!props.realmId) return;
+    const res = await departmentApi.getNormal(props.realmId, FromDeptSelect.BT);
+    state.departments = [
+        {
+            id: ALL_DEPARTMENT,
+            label: "所有部门",
+            name: "所有部门",
+            shortCode: "",
+            children: [],
+            hasChildren: false,
+            sortIndex: -1,
+            sortPath: "",
+            dataVersion: 0,
+            entity: false,
+            attributes: {}
+        },
+        ...(
+            props.showNoDepartment ? [{
+                id: NO_DEPARTMENT,
+                label: "无归属部门",
+                name: "无归属部门",
+                shortCode: "",
+                children: [],
+                hasChildren: false,
+                sortIndex: -100,
+                sortPath: "no_dept",
+                dataVersion: 0,
+                entity: false,
+                attributes: {}
+            }] : []
+        ),
+        ...useTreeData<ProjectedDepartment>(res, "name"),
+    ];
+    id.value = state.departments[0].id;
+    emits("loaded", state.departments);
+};
+
+const currentChange = (data: TreeNodeType & ProjectedDepartment) => {
+    selected.value = data;
+    emits("change", data);
+};
+
+watch(
+    () => props.realmId,
+    () => {
+        //重新获取
+        getList();
+    }
+);
+
+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/dropdownButton/JaDropdownButton.vue

@@ -1,59 +1,59 @@
-<script setup lang="ts">
-import dShortcut from "../../directives/shortcut";
-import {ElButton, ElTooltip, ElDropdown, ElIcon} from "element-plus";
-import {ref} from "vue";
-import {ArrowDown} from "@element-plus/icons-vue";
-
-const input = ref<typeof ElButton>()
-const dropdown = ref<typeof ElDropdown>()
-const props = withDefaults(defineProps<{
-    tooltip?: string
-    shortcut?: string
-    buttonText?: string
-    tooltipPlacement?: 'top' | 'bottom'
-    type?: "default" | "success" | "warning" | "info" | "text" | "primary" | "danger"
-}>(), {
-    tooltipPlacement: 'top',
-    type: "default"
-})
-
-const vShortcut = dShortcut
-
-defineExpose({
-    elButton: input,
-    elDropdown: dropdown
-})
-
-function onShortCut(el: HTMLElement) {
-    el.focus()
-}
-</script>
-
-<template>
-    <el-tooltip :placement="tooltipPlacement">
-        <el-dropdown
-            size="default"
-            ref="dropdown"
-            trigger="click"
-            v-bind="$attrs">
-            <el-button ref="input" :type="type" size="default" v-bind="$attrs"
-                       v-shortcut:[shortcut]="onShortCut">
-                <template #default>
-                    {{ props.buttonText }}
-                    <el-icon class="el-icon--right">
-                        <arrow-down/>
-                    </el-icon>
-                </template>
-            </el-button>
-            <template v-for="(_, name) in $slots" v-slot:[name]>
-                <slot :name="name"></slot>
-            </template>
-        </el-dropdown>
-        <template #content>
-            {{
-                `${props.tooltip ?? ''} ${props.tooltip ? "(" : ""}${props.shortcut
-                                                                     ?? ""}${props.tooltip ? ")" : ""}`
-            }}
-        </template>
-    </el-tooltip>
-</template>
+<script setup lang="ts">
+import dShortcut from "../../directives/shortcut";
+import {ElButton, ElTooltip, ElDropdown, ElIcon} from "element-plus";
+import {ref} from "vue";
+import {ArrowDown} from "@element-plus/icons-vue";
+
+const input = ref<typeof ElButton>()
+const dropdown = ref<typeof ElDropdown>()
+const props = withDefaults(defineProps<{
+    tooltip?: string
+    shortcut?: string
+    buttonText?: string
+    tooltipPlacement?: 'top' | 'bottom'
+    type?: "default" | "success" | "warning" | "info" | "text" | "primary" | "danger"
+}>(), {
+    tooltipPlacement: 'top',
+    type: "default"
+})
+
+const vShortcut = dShortcut
+
+defineExpose({
+    elButton: input,
+    elDropdown: dropdown
+})
+
+function onShortCut(el: HTMLElement) {
+    el.focus()
+}
+</script>
+
+<template>
+    <el-tooltip :placement="tooltipPlacement">
+        <el-dropdown
+            size="default"
+            ref="dropdown"
+            trigger="click"
+            v-bind="$attrs">
+            <el-button ref="input" :type="type" size="default" v-bind="$attrs"
+                       v-shortcut:[shortcut]="onShortCut">
+                <template #default>
+                    {{ props.buttonText }}
+                    <el-icon class="el-icon--right">
+                        <arrow-down/>
+                    </el-icon>
+                </template>
+            </el-button>
+            <template v-for="(_, name) in $slots" v-slot:[name]>
+                <slot :name="name"></slot>
+            </template>
+        </el-dropdown>
+        <template #content>
+            {{
+                `${props.tooltip ?? ''} ${props.tooltip ? "(" : ""}${props.shortcut
+                                                                     ?? ""}${props.tooltip ? ")" : ""}`
+            }}
+        </template>
+    </el-tooltip>
+</template>

package/packages/components/dropdownButton/index.ts

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

package/packages/components/enumList/EnumListInput.vue

@@ -1,107 +1,107 @@
-<script setup lang="ts">
-import {Minus, Plus} from "@element-plus/icons-vue";
-import {watch, ref, onBeforeMount} from "vue";
-import {ElButton, ElSelect} from "element-plus";
-
-const props = withDefaults(defineProps<{
-    modelValue: string[],
-    enumValues: Record<string, string>,
-    size?: 'small' | 'large' | 'default'
-}>(), {})
-const emits = defineEmits(["update:modelValue", "change"])
-
-function removeValue(index: number) {
-    values.value.splice(index, 1);
-}
-
-function addValue() {
-    values.value.push({v: ""})
-}
-
-const values = ref(props.modelValue?.map(v => {
-    return {v}
-}) ?? [{
-    v: ""
-}])
-
-let initializing = false;
-let internalChangedValue = false;
-
-onBeforeMount(() => initializeModelValue(props.modelValue))
-
-function initializeModelValue(n: string[]) {
-    if (internalChangedValue) {
-        internalChangedValue = false;
-        return;
-    }
-    initializing = true;
-    values.value = n.map(v => {
-        return {v}
-    });
-    if (values.value.length == 0) {
-        values.value.push({v: ""});
-    }
-}
-
-watch(() => props.modelValue, (n: string[]) => {
-    initializeModelValue(n);
-})
-
-watch(() => values.value, () => {
-    if (initializing) {
-        initializing = false;
-        return;
-    }
-    internalChangedValue = true;
-    const newValue = values.value.map(item => item.v).filter(v => v && v.length > 0)
-    emits("update:modelValue", newValue)
-    emits("change", newValue)
-}, {deep: true})
-</script>
-
-<template>
-    <div style="width: 100%;" class="ja-enum-list">
-        <div class="ja-input-box" v-for="(v, index) in values" :key="index">
-            <el-select v-model="v.v" :size="size">
-                <el-option v-for="k in Object.keys(props.enumValues)" :key="k"
-                           :label="k" :value="props.enumValues[k]"
-                ></el-option>
-            </el-select>
-            <el-tooltip content="删除" placement="right">
-                <div class="el-input-group__append" v-show="index < (values?.length ?? 0) - 1">
-                    <el-button link :icon="Minus" @click="removeValue(index)" :size="size">
-                    </el-button>
-                </div>
-            </el-tooltip>
-            <el-tooltip content="添加" placement="right">
-                <div class="el-input-group__append" v-show="index === (values?.length ?? 0) - 1">
-                    <el-button @click="addValue()" :size="size"
-                               link :icon="Plus">
-                    </el-button>
-                </div>
-            </el-tooltip>
-        </div>
-    </div>
-</template>
-
-<style scoped lang="scss">
-.ja-enum-list {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-
-    .ja-input-box {
-        display: flex;
-        gap: 4px;
-
-        .el-input-group__append {
-            flex: none;
-            margin-left: 0 !important;
-        }
-
-        .el-select {
-            flex: auto;
-        }
-    }
-}
-</style>
+<script setup lang="ts">
+import {Minus, Plus} from "@element-plus/icons-vue";
+import {watch, ref, onBeforeMount} from "vue";
+import {ElButton, ElSelect} from "element-plus";
+
+const props = withDefaults(defineProps<{
+    modelValue: string[],
+    enumValues: Record<string, string>,
+    size?: 'small' | 'large' | 'default'
+}>(), {})
+const emits = defineEmits(["update:modelValue", "change"])
+
+function removeValue(index: number) {
+    values.value.splice(index, 1);
+}
+
+function addValue() {
+    values.value.push({v: ""})
+}
+
+const values = ref(props.modelValue?.map(v => {
+    return {v}
+}) ?? [{
+    v: ""
+}])
+
+let initializing = false;
+let internalChangedValue = false;
+
+onBeforeMount(() => initializeModelValue(props.modelValue))
+
+function initializeModelValue(n: string[]) {
+    if (internalChangedValue) {
+        internalChangedValue = false;
+        return;
+    }
+    initializing = true;
+    values.value = n.map(v => {
+        return {v}
+    });
+    if (values.value.length == 0) {
+        values.value.push({v: ""});
+    }
+}
+
+watch(() => props.modelValue, (n: string[]) => {
+    initializeModelValue(n);
+})
+
+watch(() => values.value, () => {
+    if (initializing) {
+        initializing = false;
+        return;
+    }
+    internalChangedValue = true;
+    const newValue = values.value.map(item => item.v).filter(v => v && v.length > 0)
+    emits("update:modelValue", newValue)
+    emits("change", newValue)
+}, {deep: true})
+</script>
+
+<template>
+    <div style="width: 100%;" class="ja-enum-list">
+        <div class="ja-input-box" v-for="(v, index) in values" :key="index">
+            <el-select v-model="v.v" :size="size">
+                <el-option v-for="k in Object.keys(props.enumValues)" :key="k"
+                           :label="k" :value="props.enumValues[k]"
+                ></el-option>
+            </el-select>
+            <el-tooltip content="删除" placement="right">
+                <div class="el-input-group__append" v-show="index < (values?.length ?? 0) - 1">
+                    <el-button link :icon="Minus" @click="removeValue(index)" :size="size">
+                    </el-button>
+                </div>
+            </el-tooltip>
+            <el-tooltip content="添加" placement="right">
+                <div class="el-input-group__append" v-show="index === (values?.length ?? 0) - 1">
+                    <el-button @click="addValue()" :size="size"
+                               link :icon="Plus">
+                    </el-button>
+                </div>
+            </el-tooltip>
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.ja-enum-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    .ja-input-box {
+        display: flex;
+        gap: 4px;
+
+        .el-input-group__append {
+            flex: none;
+            margin-left: 0 !important;
+        }
+
+        .el-select {
+            flex: auto;
+        }
+    }
+}
+</style>