<script lang="ts" setup>
|
import { computed, onMounted, reactive, toRefs, unref } from 'vue';
|
|
import { useMessage } from '@jnpf/hooks';
|
import { openWindow } from '@jnpf/utils';
|
|
import { useUserStore } from '@vben/stores';
|
|
import { useClipboard } from '@vueuse/core';
|
|
import { getMenuListFormType } from '#/api/system/menu';
|
import { getInfo, update } from '#/api/system/system';
|
import { $t } from '#/locales';
|
import { APP_PREFIX, colorPredefine } from '#/utils/constants';
|
|
interface State {
|
baseForm: any;
|
btnLoading: boolean;
|
selfUrl: any;
|
pcPortalOptions: any[];
|
appPortalOptions: any[];
|
portalId: any[];
|
appPortalId: any[];
|
}
|
|
defineOptions({ name: 'AppConfigBaseConfig' });
|
|
const { copy } = useClipboard({ legacy: true });
|
const state = reactive<State>({
|
baseForm: {},
|
btnLoading: false,
|
selfUrl: '',
|
pcPortalOptions: [],
|
appPortalOptions: [],
|
portalId: [],
|
appPortalId: [],
|
});
|
const { baseForm, btnLoading, selfUrl, pcPortalOptions, appPortalOptions } = toRefs(state);
|
const { createConfirm, createMessage } = useMessage();
|
const userStore = useUserStore();
|
|
const getUserInfo: any = computed(() => userStore.getUserInfo || {});
|
|
function initData() {
|
getInfo(unref(getUserInfo).systemId).then((res) => {
|
state.baseForm = res.data;
|
getSelfUrl(res.data.enCode);
|
state.portalId = res.data.portalId ? res.data.portalId.split(',') : [];
|
state.appPortalId = res.data.appPortalId ? res.data.appPortalId.split(',') : [];
|
});
|
}
|
function getSelfUrl(enCode) {
|
if (!enCode) return (state.selfUrl = '');
|
state.selfUrl = `${window.location.origin}/${APP_PREFIX + enCode}`;
|
}
|
function openUrl(url) {
|
if (url) openWindow(url);
|
}
|
function handleCopy(text) {
|
if (!text) return;
|
copy(text);
|
createMessage.success('复制成功');
|
}
|
function handleSubmit() {
|
createConfirm({
|
iconType: 'warning',
|
title: $t('common.tipTitle'),
|
content: '您确定要保存，是否继续?',
|
onOk: () => {
|
state.btnLoading = true;
|
state.baseForm.portalId = state.portalId.join(',');
|
state.baseForm.appPortalId = state.appPortalId.join(',');
|
update(state.baseForm)
|
.then((res) => {
|
createMessage.success(res.msg);
|
userStore.setUserInfo({ systemIcon: state.baseForm.icon, systemName: state.baseForm.fullName });
|
state.btnLoading = false;
|
initData();
|
})
|
.catch(() => {
|
state.btnLoading = false;
|
});
|
},
|
});
|
}
|
function getMenuOptions() {
|
getMenuListFormType({ category: 'Web', type: 8, pageSize: 100000 }).then((res) => {
|
state.pcPortalOptions = res.data.list || [];
|
});
|
}
|
function getAppMenuOptions() {
|
getMenuListFormType({ category: 'App', type: 8, pageSize: 100000 }).then((res) => {
|
state.appPortalOptions = res.data.list || [];
|
});
|
}
|
|
onMounted(() => {
|
initData();
|
getMenuOptions();
|
getAppMenuOptions();
|
});
|
</script>
|
<template>
|
<div class="jnpf-content-wrapper">
|
<div class="jnpf-content-wrapper-center !overflow-auto bg-white">
|
<a-form :colon="false" label-align="right" :label-col="{ style: { width: '100px' } }" class="h-full !p-[30px]">
|
<JnpfGroupTitle class="-mt-[20px] mb-[20px]" content="基础设置" />
|
<a-row>
|
<a-col :span="12">
|
<a-form-item label="应用名称">
|
<a-input v-model:value="baseForm.fullName" placeholder="请输入" allow-clear />
|
</a-form-item>
|
<a-form-item label="应用编码">
|
<a-input v-model:value="baseForm.enCode" placeholder="请输入" readonly />
|
</a-form-item>
|
<a-form-item label="应用图标">
|
<a-row type="flex">
|
<div class="mr-[10px] flex-1">
|
<jnpf-icon-picker v-model:value="baseForm.icon" placeholder="请选择" />
|
</div>
|
<a-form-item-rest>
|
<jnpf-color-picker v-model:value="baseForm.backgroundColor" size="small" :predefine="colorPredefine" />
|
</a-form-item-rest>
|
</a-row>
|
<div class="app-icon-preview" :style="{ backgroundColor: baseForm.backgroundColor || '#008cff' }" v-if="baseForm.icon">
|
<i :class="baseForm.icon"></i>
|
</div>
|
</a-form-item>
|
<a-form-item label="应用首页">
|
<jnpf-select v-model:value="state.portalId" :options="pcPortalOptions" multiple />
|
</a-form-item>
|
<a-form-item label="APP应用首页">
|
<jnpf-select v-model:value="state.appPortalId" :options="appPortalOptions" multiple />
|
</a-form-item>
|
<a-form-item>
|
<template #label>应用URL<BasicHelp text="仅支持PC端访问，APP端不支持。" /></template>
|
<a-form-item-rest>
|
<div class="flex">
|
<div class="mr-[10px] flex-1">
|
<a-input v-model:value="selfUrl" placeholder="请输入" readonly />
|
</div>
|
<div>
|
<a-input-group compact>
|
<a-button @click="openUrl(selfUrl)">打开</a-button>
|
<a-button type="primary" @click="handleCopy(selfUrl)">复制</a-button>
|
</a-input-group>
|
</div>
|
</div>
|
</a-form-item-rest>
|
</a-form-item>
|
<a-form-item label=" ">
|
<a-button type="primary" @click.prevent="handleSubmit" :loading="btnLoading">保存</a-button>
|
</a-form-item>
|
</a-col>
|
</a-row>
|
</a-form>
|
</div>
|
</div>
|
</template>
|
