ace-front-end 1.0.0

package/ace-app-manager-ui/src/views/globalManage/userManage/components/Editor.vue

@@ -0,0 +1,475 @@
+<template>
+    <el-drawer
+        :title="state.title"
+        v-model="visible"
+        :destroy-on-close="true"
+        @open="init"
+        @opened="openedHandle"
+        @close="onClose">
+        <el-scrollbar class="el-form-scrollbar">
+            <ja-form
+                ref="formRef"
+                :validator="validator"
+                :model="state"
+                style="width:99%"
+                label-position="top">
+                <el-row :gutter="12">
+                    <el-col :span="12"
+                            style="display: flex; justify-content: center; align-items: center;">
+                        <div class="avatar-container">
+                            <el-tooltip content="点击更换头像">
+                                <div class="avatar-border shadow-on-hover">
+                                    <ja-avatar :size="130" style="cursor: pointer;"
+                                               has-avatar
+                                               :user-id="(state.formData as UpdateUserCommand).id"
+                                               @click="onAvatarClick()">
+                                    </ja-avatar>
+                                </div>
+                            </el-tooltip>
+                            <el-icon class="delete-icon" @click="deleteAvatar" v-if="hasAvatar">
+                                <Close></Close>
+                            </el-icon>
+                            <my-upload v-model="state.showUpload" :url="state.uploadUrl"
+                                       noSquare noRotate withCredentials field="file"
+                                       @cropUploadSuccess="onUploaded()"></my-upload>
+                        </div>
+                    </el-col>
+                    <el-col :span="12">
+                        <ja-form-item label="用户名" prop="username" required>
+                            <ja-input auto-complete="off" v-focus/>
+                        </ja-form-item>
+                        <ja-form-item label="序号" prop="sortIndex">
+                            <ja-input-number
+                                style="width: 100%"
+                                :min="0"
+                                controls-position="right"/>
+                            <!-- <ElInput v-model="state.formData.sortIndex" @change="clearValidations('sortIndex')" /> -->
+                        </ja-form-item>
+                        <el-row :gutter="12">
+                            <el-col :span="12">
+                                <ja-form-item label="姓" prop="familyName" required>
+                                    <ja-input/>
+                                </ja-form-item>
+                            </el-col>
+                            <el-col :span="12">
+                                <ja-form-item label="名" prop="firstName" required>
+                                    <ja-input/>
+                                </ja-form-item>
+                            </el-col>
+                        </el-row>
+                    </el-col>
+                    <el-col :span="12" v-if="props.type === 'create'">
+                        <ja-form-item label="密码" prop="password" required>
+                            <ja-input type="password" auto-complete="off"
+                                      autocomplete="new-password"/>
+                        </ja-form-item>
+                    </el-col>
+                    <el-col :span="12" v-if="props.type === 'create'">
+                        <ja-form-item required
+                                      label="确认密码"
+                                      prop="confirmPassword">
+                            <ja-input type="password"
+                                      autocomplete="new-password"/>
+                        </ja-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <ja-form-item label="姓名全拼" prop="pinYinName">
+                            <ja-input/>
+                        </ja-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <ja-form-item label="所属部门" prop="departmentId">
+                            <ja-department-picker
+                                :multiple="false"
+                                size="small"
+                                :realm-id="props.realmId"
+                                v-model="state.formData.departmentId"/>
+                        </ja-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <ja-form-item label="语言" prop="locale">
+                            <ja-select
+                                class="m-2"
+                                placeholder="语言"
+                                style="width: 100%">
+                                <el-option
+                                    v-for="item in localeList"
+                                    :key="item.event"
+                                    :label="item.text"
+                                    :value="item.event"/>
+                            </ja-select>
+                        </ja-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <ja-form-item label="手机号" prop="mobile"
+                                      :required="setting?.mobileNotNullable">
+                            <ja-input/>
+                        </ja-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <ja-form-item label="Email" prop="email"
+                                      :required="setting?.emailNotNullable">
+                            <ja-input/>
+                        </ja-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <ja-form-item label="涉密等级" prop="classifiedLevel">
+                            <ja-select
+                                placeholder="密级"
+                                style="width: 100%">
+                                <el-option
+                                    v-for="l in userClassifiedLevel"
+                                    :key="l.value"
+                                    :label="l.label"
+                                    :value="l.value"
+                                />
+                            </ja-select>
+                        </ja-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <ja-form-item label="是否禁用" prop="disabled">
+                            <ja-checkbox> 禁用账号</ja-checkbox>
+                        </ja-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <ja-form-item label="启用IP绑定登录" prop="enableIpBind">
+                            <ja-checkbox> 限制此用户只能从指定IP终端登录</ja-checkbox>
+                        </ja-form-item>
+                    </el-col>
+                    <el-col :span="12" v-if="state.formData.enableIpBind">
+                        <ja-form-item prop="ipAddress" label="绑定的IP地址"
+                                      label-remark="绑定的IP置空后，将会在用户下次登录时自动绑定用户登录IP地址">
+                            <ja-input/>
+                        </ja-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <ja-form-item label="账户过期时间" prop="expireOn">
+                            <ja-date-picker
+                                type="datetime"
+                                style="width: 100%"
+                                format="YYYY-MM-DD HH:mm:ss"
+                                value-format="YYYY-MM-DD HH:mm:ss"
+                            />
+                        </ja-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <ja-form-item label="最大会话数限制" prop="maxSessions"
+                                      label-remark="限制用户在不同终端的重复登录次数，小于等于0表示不限制，置空表示应用全局设置">
+                            <ja-input-number
+                                style="width: 100%"
+                                :min="0"
+                                controls-position="right"/>
+                        </ja-form-item>
+                    </el-col>
+                </el-row>
+            </ja-form>
+            <extended-attr-render v-model="state.formData.attributes as Record<string,never>"
+                                  :attr-defs="state.attrDefs"
+                                  style="width:99%"></extended-attr-render>
+        </el-scrollbar>
+        <template #footer>
+            <ja-button size="default" type="primary" @click="save" :loading="loading"
+                       :disabled="loading"
+                       shortcut="Ctrl+S" plain>保存
+            </ja-button>
+            <ja-button size="default" type="primary" @click="submit" :loading="loading"
+                       :disabled="loading"
+                       shortcut="Alt+Enter">保存并关闭
+            </ja-button>
+            <el-button size="default" @click="visible = false">取消</el-button>
+        </template>
+    </el-drawer>
+</template>
+
+<script setup lang="ts">
+import {computed, ref} from "vue";
+import {
+    type AceAxiosRequestConfig,
+    type CreateUserCommand,
+    Jari,
+    localeList,
+    type ProfileSettings,
+    type UpdateUserCommand,
+    useLoading,
+    useLoginUser,
+    type User,
+    type UserAttributeDef,
+    useUserApi,
+    useUserAttrDefApi,
+    useUserAvatarApi,
+} from "@jari-ace/app-bolts";
+import {
+    JaAvatar,
+    JaButton,
+    JaCheckbox,
+    JaDatePicker,
+    JaDepartmentPicker,
+    JaForm,
+    JaFormItem,
+    JaInput,
+    JaInputNumber,
+    JaSelect,
+    updateAvatarToken,
+    useBackendValidations
+} from "@jari-ace/element-plus-component";
+import ExtendedAttrRender from "@/views/globalManage/components/ExtendedAttrRender.vue";
+import myUpload from 'vue-image-crop-upload';
+import {ElMessage} from "element-plus";
+import {Close} from "@element-plus/icons-vue";
+import {
+    useUserClassificationLevel
+} from "@jari-ace/element-plus-component";
+
+type editorType = "create" | "update";
+const requestOption: AceAxiosRequestConfig = {}
+const initData: CreateUserCommand = {
+    attributes: {},
+    classifiedLevel: Jari.Ace.DEFAULT_CLASSIFIED_LEVEL,
+    departmentId: undefined,
+    disabled: false,
+    email: "",
+    enableIpBind: false,
+    expireOn: "",
+    familyName: "",
+    firstName: "",
+    ipAddress: "",
+    locale: "",
+    mobile: "",
+    password: "",
+    confirmPassword: "",
+    pinYinName: "",
+    realmId: '0',
+    sortIndex: 0,
+    username: ""
+}
+const userClassifiedLevel = ref(await useUserClassificationLevel())
+
+type Props = {
+    modelValue: boolean;
+    type: editorType;
+    realmId: string;
+    data?: User | null;
+};
+
+// const systemStore = useSystemStore();
+
+const formRef = ref<typeof JaForm>();
+
+const props = defineProps<Props>();
+
+const emits = defineEmits(["update:modelValue", "success", "opened"]);
+
+const state = ref<{
+    formData: CreateUserCommand | UpdateUserCommand;
+    title: string;
+    confirmPasswordError: string;
+    attrDefs?: UserAttributeDef[],
+    showUpload: boolean,
+    uploadUrl?: string
+}>({
+    formData: {...initData},
+    title: "",
+    confirmPasswordError: "",
+    showUpload: false
+});
+
+const setting = ref<ProfileSettings>();
+
+const visible = computed({
+    get(): boolean {
+        return props.modelValue;
+    },
+    set(val: boolean) {
+        emits("update:modelValue", val);
+    },
+});
+const login = useLoginUser();
+const validator = useBackendValidations(Object.keys(initData));
+const userApi = useUserApi(validator.axios);
+const userAttrApi = useUserAttrDefApi(validator.axios);
+const loading = useLoading(validator.axios)
+const avatarApi = useUserAvatarApi(validator.axios);
+const hasAvatar = ref(false);
+const submit = () => {
+    //判断当前组件类型   type 为 update 更新模式，为 create 创建模式
+    if (props.type === "update") {
+        formRef.value?.validate(() =>
+            userApi
+                .update(state.value.formData as UpdateUserCommand, requestOption)
+                .then(() => {
+                    emits("success");
+                    visible.value = false;
+                })
+        )
+    } else {
+        formRef.value?.validate(() =>
+            userApi
+                .create(state.value.formData as CreateUserCommand, requestOption)
+                .then(() => {
+                    emits("success");
+                    visible.value = false;
+                })
+        )
+    }
+}
+
+const save = () => {
+//判断当前组件类型   type 为 update 更新模式，为 create 创建模式
+    if (props.type === "update") {
+        formRef.value?.validate(() =>
+            userApi
+                .update(state.value.formData as UpdateUserCommand, requestOption)
+                .then(u => {
+                    state.value.formData = u as UpdateUserCommand;
+                    emits("success");
+                })
+        )
+    } else {
+        formRef.value?.validate(() =>
+            userApi
+                .create(state.value.formData as CreateUserCommand, requestOption)
+                .then(u => {
+                    emits("success");
+                    state.value.title = "修改用户信息";
+
+                    const path = '/ace-app-service/avatar/' + u.id
+                    state.value.uploadUrl = window.appDescriptor.env.isDevMode()
+                        ? new URL("/ace" + path, location.origin).toString() //开发模式下使用vite代理，添加ace前缀，由vite代理修改路由
+                        : new URL(path, location.origin).toString()
+                    state.value.formData = u;
+                })
+        )
+    }
+}
+
+const init = () => {
+    //判断当前组件类型   type 为 update 更新模式，为 create 创建模式
+    if (props.type === "update") {
+        if (!props.data) {
+            throw new Error("未传入参数【data】");
+        }
+        //更新模式需要将数据回显
+        state.value.title = "修改用户信息";
+        userApi.getById(props.data.id).then(res => {
+            hasAvatar.value = res.hasAvatar
+            state.value.formData = {
+                ...res,
+                departmentId: res.department?.id
+            } as UpdateUserCommand
+        });
+        const path = '/ace-app-service/avatar/' + props.data.id
+        state.value.uploadUrl = window.appDescriptor.env.isDevMode()
+            ? new URL("/ace" + path, location.origin).toString() //开发模式下使用vite代理，添加ace前缀，由vite代理修改路由
+            : new URL(path, location.origin).toString();
+    } else {
+        state.value.title = `创建用户`;
+        //创建模式重置表单
+        state.value.formData = {...initData, realmId: props.realmId, id: undefined};
+        hasAvatar.value = false;
+    }
+    userAttrApi.getAll().then(res => {
+        state.value.attrDefs = res;
+    })
+    userApi.getProfileSettings().then(s => setting.value = s)
+};
+
+const openedHandle = () => {
+    emits("opened");
+};
+
+function onClose() {
+    validator.axios.cancel(requestOption)
+}
+
+function onUploaded() {
+    updateAvatarToken();
+    hasAvatar.value = true;
+    if (props.type === "update") {
+        (
+            state.value.formData as UpdateUserCommand
+        ).dataVersion = (
+                            state.value.formData as UpdateUserCommand
+                        ).dataVersion + 1;
+    }
+}
+
+function onAvatarClick() {
+    if (props.type === 'create') {
+        ElMessage.warning("请先保存新建的用户后，再修改头像")
+        return;
+    }
+    if (setting.value?.allowAdminChangeAvatar) {
+        state.value.showUpload = true;
+    } else {
+        ElMessage.warning("已禁止管理员修改个人头像")
+    }
+}
+
+function deleteAvatar() {
+    avatarApi.delete(props.data?.id ?? "no-id").then(() => {
+        hasAvatar.value = false;
+        updateAvatarToken();
+        const dv =
+            (
+                state.value.formData as UpdateUserCommand
+            ).dataVersion;
+        (
+            state.value.formData as UpdateUserCommand
+        ).dataVersion = (
+            dv + 1
+        )
+    })
+}
+</script>
+
+<style scoped lang="scss">
+.shadow-on-hover {
+    box-sizing: border-box;
+
+    transition: box-shadow 0.3s ease-in-out;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* 主阴影 */
+}
+
+.shadow-on-hover:hover {
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3), /* 主阴影 */
+    0 6px 8px rgba(0, 0, 0, 0.25); /* 额外的柔和阴影 */
+}
+
+.avatar-border {
+    border: solid 1px var(--el-border-color);
+    border-radius: 50%;
+    padding: 2px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.avatar-container {
+    position: relative; /* 设置父容器为相对定位 */
+    .delete-icon {
+        position: absolute; /* 设置图标为绝对定位 */
+        top: 5px; /* 根据需要调整顶部距离 */
+        right: -15px; /* 根据需要调整右侧距离 */
+        cursor: pointer; /* 设置鼠标悬停时的样式 */
+        background-color: var(--el-color-danger-light-9); /* 可选：设置背景以便更好地看到图标 */
+        border-radius: 50%; /* 可选：设置圆形背景 */
+        padding: 2px; /* 可选：增加一些内边距 */
+        opacity: 0; /* 默认透明 */
+        transition: opacity 0.3s ease, transform 0.3s ease; /* 过渡效果 */
+        &.el-icon {
+            color: var(--el-color-danger-light-5) !important;
+
+            &:hover {
+                background-color: var(--el-color-danger-light-7);
+                color: var(--el-color-danger-light-3) !important;
+            }
+        }
+    }
+
+    &:hover {
+        .delete-icon {
+            opacity: 1; /* 鼠标悬停时变为不透明 */
+        }
+    }
+}
+</style>

package/ace-app-manager-ui/src/views/globalManage/userManage/components/ExpirationEditor.vue

@@ -0,0 +1,82 @@
+<template>
+    <el-dialog width="480px" title="修改用户过期时间" v-model="visible" @open="init" draggable
+               destroy-on-close>
+        <el-form
+            ref="formRef"
+            :model="formData"
+            label-position="top">
+            <el-form-item label="用户账号过期时间" prop="expireOn" v-focus
+                          :rules="[{required: true, message: '不能为空'}]">
+                <el-date-picker
+                    v-model="formData.expireOn"
+                    type="datetime"
+                    style="width: 100%"
+                    format="YYYY-MM-DD HH:mm:ss"
+                    value-format="YYYY-MM-DD HH:mm:ss"/>
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <ja-button size="default" type="primary" @click="submit" :loading="loading"
+                       :disabled="loading" shortcut="Alt+Enter">确定
+            </ja-button>
+            <ElButton size="default" @click="visible = false">取消</ElButton>
+        </template>
+    </el-dialog>
+</template>
+
+<script setup lang="ts">
+import {computed, reactive, ref} from "vue";
+import {
+    useUserApi,
+    type UserApiType,
+    createAxiosWithoutCache,
+    useLoading
+} from "@jari-ace/app-bolts";
+import type {FormInstance} from "element-plus";
+import {JaButton} from "@jari-ace/element-plus-component";
+
+type Props = {
+    modelValue: boolean;
+    users: string[];
+};
+const axios = createAxiosWithoutCache();
+const userApi: UserApiType = useUserApi(axios);
+const loading = useLoading(axios);
+const formRef = ref<FormInstance>();
+const props = defineProps<Props>();
+const emits = defineEmits(["update:modelValue", "success"]);
+
+const formData = reactive<{
+    expireOn: string;
+}>({
+    expireOn: "",
+});
+
+const visible = computed({
+    get(): boolean {
+        return props.modelValue;
+    },
+    set(val: boolean) {
+        emits("update:modelValue", val);
+    },
+});
+
+const submit = () => {
+    userApi
+        .batchUpdateUserExpireDate({
+            userIds: props.users,
+            expireOn: formData.expireOn,
+        })
+        .then(() => {
+            emits("success");
+            visible.value = false;
+        });
+};
+
+const init = () => {
+    formRef.value?.resetFields();
+    formData.expireOn = "";
+};
+</script>
+
+<style scoped lang="scss"></style>

package/ace-app-manager-ui/src/views/globalManage/userManage/components/MaxSessionEditor.vue

@@ -0,0 +1,76 @@
+<template>
+    <el-dialog width="480px" title="修改用户最大会话数限制" v-model="visible" @open="init" draggable
+               destroy-on-close>
+        <el-form
+            ref="formRef"
+            :model="formData"
+            label-position="top">
+            <el-form-item label="用户最大会话数量" prop="expireOn" v-focus>
+                <el-input-number v-model="formData.maxSessions"></el-input-number>
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <ja-button size="default" type="primary" @click="submit" :loading="loading"
+                       :disabled="loading" shortcut="Alt+Enter">确定
+            </ja-button>
+            <ElButton size="default" @click="visible = false">取消</ElButton>
+        </template>
+    </el-dialog>
+</template>
+
+<script setup lang="ts">
+import {computed, reactive, ref} from "vue";
+import {
+    useUserApi,
+    type UserApiType,
+    createAxiosWithoutCache,
+    useLoading
+} from "@jari-ace/app-bolts";
+import type {FormInstance} from "element-plus";
+import {JaButton} from "@jari-ace/element-plus-component";
+
+type Props = {
+    modelValue: boolean;
+    users: string[];
+};
+const axios = createAxiosWithoutCache();
+const userApi: UserApiType = useUserApi(axios);
+const loading = useLoading(axios);
+const formRef = ref<FormInstance>();
+const props = defineProps<Props>();
+const emits = defineEmits(["update:modelValue", "success"]);
+
+const formData = reactive<{
+    maxSessions: number;
+}>({
+    maxSessions: 0,
+});
+
+const visible = computed({
+    get(): boolean {
+        return props.modelValue;
+    },
+    set(val: boolean) {
+        emits("update:modelValue", val);
+    },
+});
+
+const submit = () => {
+    userApi
+        .batchSetMaxSessions({
+            userIds: props.users,
+            maxSessions: formData.maxSessions,
+        })
+        .then(() => {
+            emits("success");
+            visible.value = false;
+        });
+};
+
+const init = () => {
+    formRef.value?.resetFields();
+    formData.maxSessions = 0;
+};
+</script>
+
+<style scoped lang="scss"></style>