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

package/packages/components/userPicker/src/CustomGroupManager.vue

@@ -1,189 +1,189 @@
-<script setup lang="ts">
-//#region const定义
-import {ref, withDefaults} from "vue";
-import {Minus, Plus} from "@element-plus/icons-vue";
-import {JaButton} from "../../button";
-import {
-    ElButton,
-    ElDialog,
-    ElMessageBox,
-    ElScrollbar,
-    ElSpace,
-    ElForm,
-    ElText,
-    ElTree,
-    ElFormItem,
-    ElInput, ElMessage
-} from "element-plus";
-import {
-    type AceAxiosRequestConfig,
-    createAxiosWithoutCache,
-    type CustomGroup,
-    useCustomGroupApi, useLoading,
-    type UserReference
-} from "@jari-ace/app-bolts";
-import {type TreeNodeType, useTreeData} from "../../../hooks/useTreeData";
-import type {TreeNodeData} from "element-plus/es/components/tree/src/tree.type";
-import Node from "element-plus/es/components/tree/src/model/node";
-import vFocus from "../../../directives/autofocus";
-
-const visible = ref(false);
-const axios = createAxiosWithoutCache();
-const api = useCustomGroupApi(axios);
-const data = ref<(TreeNodeType & CustomGroup)[]>();
-const nodeProps = {
-    label: "name",
-    children: "children",
-    isLeaf: (data: TreeNodeData, node: Node) => !data.hasChildren,
-    class: (data: TreeNodeData) => {
-        return data.id === current.value?.id ? "selected-group" : "group";
-    }
-}
-const current = ref<TreeNodeType & CustomGroup>();
-const editorVisible = ref(false);
-const editingGroupName = ref<string>();
-const loading = useLoading(axios)
-const props = withDefaults(defineProps<{
-    users: UserReference[] | null
-}>(), {
-    users: () => [] as UserReference[]
-});
-const config: AceAxiosRequestConfig = {};
-//#endregion
-
-
-//#region 事件
-async function loadData() {
-    const res = useTreeData(await api.getAll());
-    const root = {
-        id: "-1",
-        name: "[顶级组]",
-        children: res,
-        dataVersion: 0,
-        hasChildren: res.length > 0,
-        label: "",
-        parentId: undefined,
-        sortIndex: 0,
-        sortPath: ""
-    };
-    data.value = [root];
-    return root;
-}
-
-async function onOpen() {
-    current.value = await loadData();
-}
-
-function onCurrentChanged(c: TreeNodeType & CustomGroup) {
-    current.value = c;
-}
-
-function onAddGroupClick() {
-    editingGroupName.value = undefined;
-    editorVisible.value = true;
-}
-
-async function onEditorOkClick() {
-    await api.create({
-        name: editingGroupName.value!,
-        parentId: current.value?.id == "-1" ? undefined : current.value?.id,
-    })
-    editorVisible.value = false;
-    await loadData();
-}
-
-async function onDeleteGroupClick() {
-    if (current.value && current.value.id !== '-1') {
-        await ElMessageBox.confirm("确定要删除选中的自定义组？", "确认删除");
-        await api.delete(current.value.id);
-        await loadData();
-        current.value = undefined;
-    }
-}
-
-async function onOkClick() {
-    if (!current.value || current.value.id === '-1') {
-        ElMessage.warning("请选择要保存到的自定义用户组")
-        return;
-    }
-    await api.setMembers({
-        id: current.value.id,
-        userIds: props.users?.map(u => u.id) ?? []
-    }, config)
-    visible.value = false;
-}
-
-//#endregion
-
-defineExpose({
-    show() {
-        visible.value = true;
-    },
-    close() {
-        visible.value = false;
-    }
-})
-</script>
-
-<template>
-    <el-dialog v-model="visible"
-               destroy-on-close
-               append-to-body
-               draggable
-               title="保存为自定义组"
-               width="360"
-               @open="onOpen">
-        <div class="ja-custom-group-manager">
-            <el-space>
-                <el-text>请创建或选择要保存为的自定义组:</el-text>
-                <ja-button circle :icon="Plus" tooltip="添加自定义组" shortcut="Alt+G" size="small"
-                           @click="onAddGroupClick" :loading="loading"></ja-button>
-                <ja-button circle :icon="Minus" tooltip="删除自定义组" shortcut="Alt+D" size="small"
-                           @click="onDeleteGroupClick" :loading="loading"></ja-button>
-            </el-space>
-            <el-scrollbar height="360px">
-                <el-tree :data="data" node-key="id" :props="nodeProps" default-expand-all
-                         :expand-on-click-node="false"
-                         @current-change="onCurrentChanged" :current-node-key="current?.id ?? -1">
-                </el-tree>
-            </el-scrollbar>
-        </div>
-        <template #footer>
-            <ja-button type="primary" shortcut="Alt+O" :loading="loading" @click="onOkClick">确定
-            </ja-button>
-            <el-button @click="visible=false">取消</el-button>
-        </template>
-    </el-dialog>
-
-    <el-dialog v-model="editorVisible" destroy-on-close append-to-body title="添加自定义组"
-               width="360px">
-        <el-form label-position="top">
-            <el-form-item label="自定义组名" required>
-                <el-input v-model="editingGroupName" style="width: 100%" v-focus></el-input>
-            </el-form-item>
-        </el-form>
-        <template #footer>
-            <ja-button type="primary" shortcut="Alt+P" @click="onEditorOkClick" :loading="loading"
-                       size="default">
-                确定
-            </ja-button>
-            <el-button @click="editorVisible=false" size="default">取消</el-button>
-        </template>
-    </el-dialog>
-</template>
-
-<style scoped lang="scss">
-.ja-custom-group-manager {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-}
-
-:deep(.group) {
-    background-color: #fff;
-}
-
-:deep(.selected-group) {
-    background-color: var(--el-tree-node-hover-bg-color) !important;
-}
-</style>
+<script setup lang="ts">
+//#region const定义
+import {ref, withDefaults} from "vue";
+import {Minus, Plus} from "@element-plus/icons-vue";
+import {JaButton} from "../../button";
+import {
+    ElButton,
+    ElDialog,
+    ElMessageBox,
+    ElScrollbar,
+    ElSpace,
+    ElForm,
+    ElText,
+    ElTree,
+    ElFormItem,
+    ElInput, ElMessage
+} from "element-plus";
+import {
+    type AceAxiosRequestConfig,
+    createAxiosWithoutCache,
+    type CustomGroup,
+    useCustomGroupApi, useLoading,
+    type UserReference
+} from "@jari-ace/app-bolts";
+import {type TreeNodeType, useTreeData} from "../../../hooks/useTreeData";
+import type {TreeNodeData} from "element-plus/es/components/tree/src/tree.type";
+import Node from "element-plus/es/components/tree/src/model/node";
+import vFocus from "../../../directives/autofocus";
+
+const visible = ref(false);
+const axios = createAxiosWithoutCache();
+const api = useCustomGroupApi(axios);
+const data = ref<(TreeNodeType & CustomGroup)[]>();
+const nodeProps = {
+    label: "name",
+    children: "children",
+    isLeaf: (data: TreeNodeData, node: Node) => !data.hasChildren,
+    class: (data: TreeNodeData) => {
+        return data.id === current.value?.id ? "selected-group" : "group";
+    }
+}
+const current = ref<TreeNodeType & CustomGroup>();
+const editorVisible = ref(false);
+const editingGroupName = ref<string>();
+const loading = useLoading(axios)
+const props = withDefaults(defineProps<{
+    users: UserReference[] | null
+}>(), {
+    users: () => [] as UserReference[]
+});
+const config: AceAxiosRequestConfig = {};
+//#endregion
+
+
+//#region 事件
+async function loadData() {
+    const res = useTreeData(await api.getAll());
+    const root = {
+        id: "-1",
+        name: "[顶级组]",
+        children: res,
+        dataVersion: 0,
+        hasChildren: res.length > 0,
+        label: "",
+        parentId: undefined,
+        sortIndex: 0,
+        sortPath: ""
+    };
+    data.value = [root];
+    return root;
+}
+
+async function onOpen() {
+    current.value = await loadData();
+}
+
+function onCurrentChanged(c: TreeNodeType & CustomGroup) {
+    current.value = c;
+}
+
+function onAddGroupClick() {
+    editingGroupName.value = undefined;
+    editorVisible.value = true;
+}
+
+async function onEditorOkClick() {
+    await api.create({
+        name: editingGroupName.value!,
+        parentId: current.value?.id == "-1" ? undefined : current.value?.id,
+    })
+    editorVisible.value = false;
+    await loadData();
+}
+
+async function onDeleteGroupClick() {
+    if (current.value && current.value.id !== '-1') {
+        await ElMessageBox.confirm("确定要删除选中的自定义组？", "确认删除");
+        await api.delete(current.value.id);
+        await loadData();
+        current.value = undefined;
+    }
+}
+
+async function onOkClick() {
+    if (!current.value || current.value.id === '-1') {
+        ElMessage.warning("请选择要保存到的自定义用户组")
+        return;
+    }
+    await api.setMembers({
+        id: current.value.id,
+        userIds: props.users?.map(u => u.id) ?? []
+    }, config)
+    visible.value = false;
+}
+
+//#endregion
+
+defineExpose({
+    show() {
+        visible.value = true;
+    },
+    close() {
+        visible.value = false;
+    }
+})
+</script>
+
+<template>
+    <el-dialog v-model="visible"
+               destroy-on-close
+               append-to-body
+               draggable
+               title="保存为自定义组"
+               width="360"
+               @open="onOpen">
+        <div class="ja-custom-group-manager">
+            <el-space>
+                <el-text>请创建或选择要保存为的自定义组:</el-text>
+                <ja-button circle :icon="Plus" tooltip="添加自定义组" shortcut="Alt+G" size="small"
+                           @click="onAddGroupClick" :loading="loading"></ja-button>
+                <ja-button circle :icon="Minus" tooltip="删除自定义组" shortcut="Alt+D" size="small"
+                           @click="onDeleteGroupClick" :loading="loading"></ja-button>
+            </el-space>
+            <el-scrollbar height="360px">
+                <el-tree :data="data" node-key="id" :props="nodeProps" default-expand-all
+                         :expand-on-click-node="false"
+                         @current-change="onCurrentChanged" :current-node-key="current?.id ?? -1">
+                </el-tree>
+            </el-scrollbar>
+        </div>
+        <template #footer>
+            <ja-button type="primary" shortcut="Alt+O" :loading="loading" @click="onOkClick">确定
+            </ja-button>
+            <el-button @click="visible=false">取消</el-button>
+        </template>
+    </el-dialog>
+
+    <el-dialog v-model="editorVisible" destroy-on-close append-to-body title="添加自定义组"
+               width="360px">
+        <el-form label-position="top">
+            <el-form-item label="自定义组名" required>
+                <el-input v-model="editingGroupName" style="width: 100%" v-focus></el-input>
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <ja-button type="primary" shortcut="Alt+P" @click="onEditorOkClick" :loading="loading"
+                       size="default">
+                确定
+            </ja-button>
+            <el-button @click="editorVisible=false" size="default">取消</el-button>
+        </template>
+    </el-dialog>
+</template>
+
+<style scoped lang="scss">
+.ja-custom-group-manager {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+:deep(.group) {
+    background-color: #fff;
+}
+
+:deep(.selected-group) {
+    background-color: var(--el-tree-node-hover-bg-color) !important;
+}
+</style>