118 lines
2.8 KiB
Vue
118 lines
2.8 KiB
Vue
<script lang="ts" setup>
|
|
import { Modal, message } from 'ant-design-vue/lib';
|
|
import { onMounted, reactive } from 'vue';
|
|
import useAppStore from '@/store/modules/app';
|
|
import useI18n from '@/hooks/useI18n';
|
|
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
|
|
import { changeValue } from '@/api/system/config';
|
|
const appStore = useAppStore();
|
|
const { t } = useI18n();
|
|
|
|
type StateType = {
|
|
edite: boolean;
|
|
loading: boolean;
|
|
title: string;
|
|
flag: string;
|
|
};
|
|
|
|
let state: StateType = reactive({
|
|
edite: false,
|
|
loading: false,
|
|
title: '',
|
|
flag: '',
|
|
});
|
|
|
|
/**进入可编辑 */
|
|
function fnEdit(v: boolean) {
|
|
state.edite = v;
|
|
if (!v) {
|
|
state.title = appStore.appName;
|
|
state.flag = appStore.appName;
|
|
}
|
|
}
|
|
|
|
/**提交保存 */
|
|
function fnSave() {
|
|
Modal.confirm({
|
|
title: '提示',
|
|
content: `确认要提交当前变更的系统名称吗?`,
|
|
onOk() {
|
|
// 发送请求
|
|
const hide = message.loading('请稍等...', 0);
|
|
state.loading = true;
|
|
changeValue({ key: 'sys.title', value: state.title }).then(res => {
|
|
state.loading = false;
|
|
hide();
|
|
if (res.code === RESULT_CODE_SUCCESS) {
|
|
message.success('提交保存成功', 3);
|
|
appStore.appName = state.title;
|
|
fnEdit(false);
|
|
} else {
|
|
message.error(res.msg, 3);
|
|
}
|
|
});
|
|
},
|
|
});
|
|
}
|
|
|
|
onMounted(() => {
|
|
state.title = appStore.appName;
|
|
state.flag = appStore.appName;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<a-row :gutter="16">
|
|
<a-col :lg="12" :md="12" :xs="24" style="margin-bottom: 30px">
|
|
<a-form layout="vertical" v-if="state.edite">
|
|
<a-form-item>
|
|
<a-input
|
|
v-model:value="state.title"
|
|
allow-clear
|
|
:maxlength="11"
|
|
style="width: 224px"
|
|
placeholder="输入系统名称"
|
|
></a-input>
|
|
</a-form-item>
|
|
|
|
<a-form-item>
|
|
<a-button
|
|
type="primary"
|
|
:disabled="state.title === state.flag"
|
|
@click="fnSave"
|
|
>
|
|
提交保存
|
|
</a-button>
|
|
<a-button style="margin-left: 10px" @click="fnEdit(false)">
|
|
{{ t('common.cancel') }}
|
|
</a-button>
|
|
</a-form-item>
|
|
</a-form>
|
|
|
|
<template v-else>
|
|
<div class="sys-title">{{ state.title }}</div>
|
|
<a-button type="dashed" @click="fnEdit(true)"> 编辑 </a-button>
|
|
</template>
|
|
</a-col>
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-typography>
|
|
<a-typography-paragraph>
|
|
系统名称限制
|
|
<a-typography-text mark>11</a-typography-text>
|
|
位字符长度
|
|
</a-typography-paragraph>
|
|
</a-typography>
|
|
</a-col>
|
|
</a-row>
|
|
</template>
|
|
|
|
<style lang="less" scoped>
|
|
.sys-title {
|
|
color: rgba(0, 0, 0, 0.85);
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
line-height: 1.4;
|
|
margin-bottom: 24px;
|
|
}
|
|
</style>
|