<script setup lang="ts">
|
import { computed, onMounted, reactive, toRefs, unref } from 'vue';
|
|
import { useMessage } from '@jnpf/hooks';
|
|
import { useUserStore } from '@vben/stores';
|
|
import { changeAppAuth, getAppAuth, getDevUser, saveAppAuth } from '#/api/system/system';
|
import { QueryUserSelect } from '#/components/CommonModal';
|
|
defineOptions({ name: 'AppConfigAppAuth' });
|
|
interface State {
|
baseForm: any;
|
btnLoading: boolean;
|
oldCreateUserId: string;
|
disabled: boolean;
|
btnDisabled: boolean;
|
}
|
const rangeOptions = [
|
{ id: 1, fullName: '全部开发成员' },
|
{ id: 0, fullName: '自定义' },
|
];
|
const state = reactive<State>({
|
baseForm: {
|
isAllDevUser: 1,
|
fullName: '',
|
createUserId: '',
|
devUsers: [],
|
},
|
oldCreateUserId: '',
|
btnLoading: false,
|
btnDisabled: false,
|
disabled: false,
|
});
|
const { baseForm, btnLoading, disabled, btnDisabled } = toRefs(state);
|
const { createMessage } = useMessage();
|
|
const userStore = useUserStore();
|
|
const getUserInfo: any = computed(() => userStore.getUserInfo || {});
|
|
function initData() {
|
getAppAuth(unref(getUserInfo).systemId).then((res) => {
|
state.baseForm = res.data;
|
state.oldCreateUserId = res.data.createUserId;
|
state.disabled = res.data.createUserId !== unref(getUserInfo).userId;
|
});
|
}
|
function onCreateUserIdChange(id, data) {
|
if (id === state.oldCreateUserId) return false;
|
state.baseForm.fullName = data.fullName;
|
state.btnDisabled = true;
|
const query = { createUserId: id, systemId: unref(getUserInfo).systemId };
|
changeAppAuth(query)
|
.then((res) => {
|
createMessage.success(res.msg);
|
initData();
|
state.btnDisabled = false;
|
})
|
.catch(() => {
|
state.btnDisabled = false;
|
});
|
}
|
function handleSubmit() {
|
state.btnLoading = true;
|
const query = { ...state.baseForm, systemId: unref(getUserInfo).systemId };
|
saveAppAuth(query)
|
.then((res) => {
|
createMessage.success(res.msg);
|
initData();
|
state.btnLoading = false;
|
})
|
.catch(() => {
|
state.btnLoading = false;
|
});
|
}
|
|
onMounted(() => {
|
initData();
|
});
|
</script>
|
<template>
|
<div class="app-auth-v jnpf-config-wrapper">
|
<div class="auth-common-pane">
|
<div class="pane-header">
|
<p>应用创建者</p>
|
<p class="pane-header-subTitle">应用的创建者拥有应用管理后台的全部权限；</p>
|
</div>
|
<div class="pane-content">
|
<a-form :colon="false" label-align="left" :label-col="{ style: { width: '100px' } }">
|
<a-form-item label="创建人">
|
<div class="flex">
|
<span class="mr-[10px]">{{ baseForm.fullName }}</span>
|
<QueryUserSelect v-model:value="baseForm.createUserId" required :api="getDevUser" @change="onCreateUserIdChange" v-if="!disabled">
|
<template #action>
|
<span class="link-text" :class="{ 'link-text-disabled': disabled }">移交</span>
|
</template>
|
</QueryUserSelect>
|
</div>
|
</a-form-item>
|
</a-form>
|
</div>
|
</div>
|
<div class="auth-common-pane">
|
<div class="pane-header">
|
<p>应用开发者</p>
|
<p class="pane-header-subTitle">
|
用于创建者授权给其他开发者一起开发应用，应用开发者拥有“应用后台的开发权限”，有应用授权的查看权限没有操作权限，无删除应用；
|
</p>
|
</div>
|
<div class="pane-content">
|
<a-form :colon="false" label-align="left" :label-col="{ style: { width: '100px' } }">
|
<a-form-item label="权限成员">
|
<JnpfRadio v-model:value="baseForm.isAllDevUser" :options="rangeOptions" :disabled="disabled" />
|
</a-form-item>
|
<a-form-item label=" " class="!mt-[-20px]" v-if="!baseForm.isAllDevUser">
|
<QueryUserSelect v-model:value="baseForm.devUsers" multiple placeholder="选择成员" :api="getDevUser" :disabled="disabled" />
|
</a-form-item>
|
<a-form-item label=" " v-if="!disabled">
|
<a-button type="primary" @click.prevent="handleSubmit" :loading="btnLoading" :disabled="btnDisabled">保存</a-button>
|
</a-form-item>
|
</a-form>
|
</div>
|
</div>
|
</div>
|
</template>
|
<style lang="scss" scoped>
|
.app-auth-v {
|
padding: 20px 30px;
|
|
.auth-common-pane {
|
padding: 10px;
|
margin-bottom: 30px;
|
border: 1px solid var(--border-color-base);
|
border-radius: 8px;
|
|
.pane-header {
|
padding: 0 10px 10px;
|
font-size: 18px;
|
line-height: 30px;
|
border-bottom: 1px solid var(--border-color-base);
|
|
.pane-header-subTitle {
|
margin-top: 4px;
|
font-size: 14px;
|
line-height: 20px;
|
color: var(--text-color-label);
|
}
|
}
|
|
.pane-content {
|
padding: 10px;
|
}
|
}
|
}
|
</style>
|
