feat: 系统配置通用设置
This commit is contained in:
Zzz1zz
@@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<div> Data Dictionary </div>
|
||||
</template>
|
||||
@@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<div> Data Dictionary </div>
|
||||
</template>
|
||||
@@ -0,0 +1,28 @@
|
||||
const generalList = [{ id: 1, text: '安全相关' }];
|
||||
const safeSettingList = [
|
||||
{
|
||||
title: '默认登陆页',
|
||||
options: [
|
||||
{ type: 1, label: '工作台' },
|
||||
{ type: 2, label: '项目管理' },
|
||||
{ type: 3, label: '房源剖视' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '登陆状态保存',
|
||||
options: [
|
||||
{ type: 1, label: '7天' },
|
||||
{ type: 2, label: '1天' },
|
||||
{ type: 3, label: '12小时' },
|
||||
{ type: 4, label: '1小时' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '多点登陆支持',
|
||||
options: [
|
||||
{ type: 1, label: '支持' },
|
||||
{ type: 2, label: '不支持' },
|
||||
],
|
||||
},
|
||||
];
|
||||
export { generalList, safeSettingList };
|
||||
@@ -0,0 +1,166 @@
|
||||
<template>
|
||||
<div class="system-setting-general">
|
||||
<Breadcrumb
|
||||
:items="['menu.setting', 'menu.setting.system', 'setting.general']"
|
||||
/>
|
||||
<a-card class="full_height" :title="t('setting.general')">
|
||||
<a-row :gutter="12">
|
||||
<a-col :span="6">
|
||||
<ul class="general_setting_list">
|
||||
<li
|
||||
v-for="item in generalList"
|
||||
:key="item.id"
|
||||
:class="[
|
||||
'general_setting_item',
|
||||
{ isChoose: generalId === item.id },
|
||||
]"
|
||||
>
|
||||
{{ item.text }}
|
||||
</li>
|
||||
</ul>
|
||||
</a-col>
|
||||
<a-col :span="18">
|
||||
<a-card title="安全相关">
|
||||
<template #extra>
|
||||
<a-button type="primary" @click="handleSaveSafe">保存</a-button>
|
||||
</template>
|
||||
<ul class="safe_setting_list">
|
||||
<li
|
||||
v-for="(item, index) in safeSettingList"
|
||||
:key="index"
|
||||
class="safe_setting_item"
|
||||
>
|
||||
<h4 class="safe_setting_item_title">{{ item.title }}</h4>
|
||||
<ul class="options">
|
||||
<li
|
||||
v-for="(subItem, subIndex) in item.options"
|
||||
:key="subIndex"
|
||||
:class="[
|
||||
'subItem',
|
||||
{ isActive: isActiveOption(index, subItem.type) },
|
||||
]"
|
||||
@click="onOptionClick(index, subItem.type)"
|
||||
>
|
||||
{{ subItem.label }}</li
|
||||
>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { getSafeSettingInfo, SafeInfo, saveSafeSetting } from '@/api/setting';
|
||||
import { Message } from '@arco-design/web-vue';
|
||||
import { generalList, safeSettingList } from './contrant';
|
||||
|
||||
const { t } = useI18n();
|
||||
const generalId = ref<number>(1);
|
||||
const safeSettingInfo = ref<SafeInfo | null>(null);
|
||||
|
||||
const getSafeSettingInfoData = async () => {
|
||||
try {
|
||||
const { code, data } = await getSafeSettingInfo();
|
||||
if (code === 200 && data) {
|
||||
safeSettingInfo.value = data?.safeSetting;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
const isActiveOption = (itemIndex: number, type: number) => {
|
||||
if (!safeSettingInfo.value) return false;
|
||||
if (itemIndex === 0) return safeSettingInfo.value.defaultUrlType === type;
|
||||
if (itemIndex === 1) return safeSettingInfo.value.loginTimeType === type;
|
||||
if (itemIndex === 2) return safeSettingInfo.value.isMoreLogin === type;
|
||||
return false;
|
||||
};
|
||||
const onOptionClick = (itemIndex: number, type: any) => {
|
||||
if (!safeSettingInfo.value) return;
|
||||
if (itemIndex === 0) safeSettingInfo.value.defaultUrlType = type;
|
||||
if (itemIndex === 1) safeSettingInfo.value.loginTimeType = type;
|
||||
if (itemIndex === 2) safeSettingInfo.value.isMoreLogin = type;
|
||||
};
|
||||
const handleSaveSafe = async () => {
|
||||
try {
|
||||
if (safeSettingInfo.value) {
|
||||
const params = {
|
||||
default_url_typee: safeSettingInfo.value.defaultUrlType,
|
||||
login_time_type: safeSettingInfo.value.loginTimeType,
|
||||
is_more_login: safeSettingInfo.value.isMoreLogin,
|
||||
};
|
||||
const { code, data, message } = await saveSafeSetting(params);
|
||||
if (code === 200 && data) {
|
||||
Message.success(message);
|
||||
getSafeSettingInfoData();
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
onMounted(() => {
|
||||
getSafeSettingInfoData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.system-setting-general {
|
||||
.general_setting_list {
|
||||
border-radius: 6px;
|
||||
border: 1px solid rgba(239, 239, 239, 1);
|
||||
padding: 14px 0;
|
||||
padding-bottom: 200px;
|
||||
|
||||
.general_setting_item {
|
||||
padding: 0 20px;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
|
||||
&.isChoose {
|
||||
background-color: #efefef;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.safe_setting_list {
|
||||
.safe_setting_item {
|
||||
margin-top: 20px;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
// .safe_setting_item_title {}
|
||||
.options {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #f2f3f5;
|
||||
width: 430px;
|
||||
height: 36px;
|
||||
margin-top: 10px;
|
||||
padding: 0 3px;
|
||||
|
||||
.subItem {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 4px 0;
|
||||
cursor: pointer;
|
||||
|
||||
&.isActive {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,101 +0,0 @@
|
||||
<template>
|
||||
<div class="setting_user_list">
|
||||
<Breadcrumb :items="['menu.setting', 'menu.setting.system']" />
|
||||
<a-row :gutter="12">
|
||||
<a-col flex="310px">
|
||||
<a-card
|
||||
class="full_height"
|
||||
:bordered="false"
|
||||
:title="$t('menu.setting.system')"
|
||||
>
|
||||
<ul class="system_setting_list">
|
||||
<li
|
||||
v-for="item in systemSettingList"
|
||||
:key="item.id"
|
||||
:class="[
|
||||
'system_setting_item',
|
||||
{ active: currentActive === item.id },
|
||||
]"
|
||||
@click="handleChooseSystemItem(item.id)"
|
||||
>
|
||||
<component :is="item.icon" class="mr-2" />
|
||||
<p class="name">{{ item.name }}</p>
|
||||
</li>
|
||||
</ul>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col flex="auto">
|
||||
<organization v-if="currentActive === 4" />
|
||||
<div v-else>开发中{{ currentActive }}</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRoute } from 'vue-router';
|
||||
import {
|
||||
IconSettings,
|
||||
IconSafe,
|
||||
IconPaste,
|
||||
IconFullscreen,
|
||||
IconTiktokColor,
|
||||
} from '@arco-design/web-vue/es/icon';
|
||||
import organization from './organization.vue';
|
||||
// import { CreateDepartmentParams, createDepartment, getDepartmentList, DepartmentItem } from '@/api/setting'
|
||||
const { t } = useI18n();
|
||||
const route = useRoute();
|
||||
const currentActive = ref(1);
|
||||
|
||||
// 监听路由query参数中的active参数
|
||||
watch(
|
||||
() => route.query.active,
|
||||
(newActive) => {
|
||||
if (newActive) {
|
||||
const activeValue = parseInt(newActive as string, 10);
|
||||
if (!Number.isNaN(activeValue)) {
|
||||
currentActive.value = activeValue;
|
||||
}
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
const systemSettingList = [
|
||||
{ id: 1, name: t('general-setting'), icon: IconSettings },
|
||||
{ id: 2, name: t('security-setting'), icon: IconSafe },
|
||||
{ id: 3, name: t('company-info'), icon: IconPaste },
|
||||
{ id: 4, name: t('organization'), icon: IconFullscreen },
|
||||
{ id: 5, name: t('appearance-setting'), icon: IconTiktokColor },
|
||||
];
|
||||
const handleChooseSystemItem = (id: number) => {
|
||||
currentActive.value = id;
|
||||
};
|
||||
|
||||
// watch()
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.setting_user_list {
|
||||
.system_setting_list {
|
||||
.system_setting_item {
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
width: 100%;
|
||||
|
||||
&.active {
|
||||
background-color: #efefef;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.name {
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+96
-91
@@ -1,95 +1,100 @@
|
||||
<template>
|
||||
<a-card class="full_height" :bordered="false">
|
||||
<template #title>
|
||||
<div class="card-title_between">
|
||||
<p>
|
||||
<icon-drag-arrow />
|
||||
<span class="title" style="margin-left: 15px">{{
|
||||
$t('organization')
|
||||
}}</span>
|
||||
</p>
|
||||
<a-button type="primary" @click="handleAdd">
|
||||
<template #icon>
|
||||
<icon-plus />
|
||||
</template>
|
||||
{{ $t('add-department') }}
|
||||
</a-button>
|
||||
</div>
|
||||
</template>
|
||||
<a-row :gutter="12">
|
||||
<a-col class="border" :span="12">
|
||||
<a-tree
|
||||
v-model:expanded-keys="expandedKeys"
|
||||
:field-names="{ key: 'id', title: 'name' }"
|
||||
:data="departmentListData"
|
||||
@select="onSelect"
|
||||
>
|
||||
<template #icon>
|
||||
<IconStar />
|
||||
</template>
|
||||
<template #extra="nodeData">
|
||||
<a-row
|
||||
v-if="nodeData.isShowEditIcon"
|
||||
style="position: absolute; right: 0"
|
||||
:gutter="24"
|
||||
>
|
||||
<a-col :span="4" @click="handleEdit"><icon-edit /></a-col>
|
||||
<a-col :span="4">
|
||||
<a-popconfirm
|
||||
:ok-text="t('cancel')"
|
||||
:cancel-text="t('delete')"
|
||||
:ok-button-props="{ type: 'outline' }"
|
||||
:cancel-button-props="{ type: 'primary', status: 'danger' }"
|
||||
:content="
|
||||
t('please.confirm.delete.some', { name: t('department') })
|
||||
"
|
||||
type="error"
|
||||
@cancel="handleDelete(nodeData)"
|
||||
>
|
||||
<icon-delete />
|
||||
</a-popconfirm>
|
||||
</a-col>
|
||||
<a-col :span="4" @click="handleMoveUp(nodeData)"
|
||||
><icon-up
|
||||
/></a-col>
|
||||
<a-col :span="4" @click="handleMoveDown(nodeData)"
|
||||
><icon-down
|
||||
/></a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
</a-tree>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-descriptions
|
||||
v-if="departmentDetailInfo"
|
||||
:column="1"
|
||||
layout="horizontal"
|
||||
bordered
|
||||
>
|
||||
<a-descriptions-item :label="t('department-name')">
|
||||
{{ departmentDetailInfo.name }}</a-descriptions-item
|
||||
>
|
||||
<a-descriptions-item :label="t('belongto-department')">
|
||||
{{ departmentDetailInfo.parentName || '-' }}</a-descriptions-item
|
||||
>
|
||||
<a-descriptions-item :label="t('department-head')">
|
||||
{{ departmentDetailInfo.username || '-' }}</a-descriptions-item
|
||||
>
|
||||
<a-descriptions-item :label="t('department-desc')">
|
||||
{{ departmentDetailInfo.remark }}</a-descriptions-item
|
||||
>
|
||||
</a-descriptions>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<departmentFormModal
|
||||
v-model:visible="showModal"
|
||||
:department-list-data="departmentListData"
|
||||
:record="departmentDetailInfo"
|
||||
:user-list-data="allUserList"
|
||||
:is-edit="isEdit"
|
||||
@submitted="getDepartmentListData"
|
||||
<div class="system-setting-organization">
|
||||
<Breadcrumb
|
||||
:items="['menu.setting', 'menu.setting.system', 'organization']"
|
||||
/>
|
||||
</a-card>
|
||||
<a-card class="full_height" :bordered="false">
|
||||
<template #title>
|
||||
<div class="card-title_between">
|
||||
<p>
|
||||
<!-- <icon-drag-arrow /> -->
|
||||
<span class="title" style="margin-left: 15px">
|
||||
{{ $t('organization') }}</span
|
||||
>
|
||||
</p>
|
||||
<a-button type="primary" @click="handleAdd">
|
||||
<template #icon>
|
||||
<icon-plus />
|
||||
</template>
|
||||
{{ $t('add-department') }}
|
||||
</a-button>
|
||||
</div>
|
||||
</template>
|
||||
<a-row :gutter="12">
|
||||
<a-col class="border" :span="12">
|
||||
<a-tree
|
||||
v-model:expanded-keys="expandedKeys"
|
||||
:field-names="{ key: 'id', title: 'name' }"
|
||||
:data="departmentListData"
|
||||
@select="onSelect"
|
||||
>
|
||||
<template #icon>
|
||||
<IconStar />
|
||||
</template>
|
||||
<template #extra="nodeData">
|
||||
<a-row
|
||||
v-if="nodeData.isShowEditIcon"
|
||||
style="position: absolute; right: 0"
|
||||
:gutter="24"
|
||||
>
|
||||
<a-col :span="4" @click="handleEdit"><icon-edit /></a-col>
|
||||
<a-col :span="4">
|
||||
<a-popconfirm
|
||||
:ok-text="t('cancel')"
|
||||
:cancel-text="t('delete')"
|
||||
:ok-button-props="{ type: 'outline' }"
|
||||
:cancel-button-props="{ type: 'primary', status: 'danger' }"
|
||||
:content="
|
||||
t('please.confirm.delete.some', { name: t('department') })
|
||||
"
|
||||
type="error"
|
||||
@cancel="handleDelete(nodeData)"
|
||||
>
|
||||
<icon-delete />
|
||||
</a-popconfirm>
|
||||
</a-col>
|
||||
<a-col :span="4" @click="handleMoveUp(nodeData)"
|
||||
><icon-up
|
||||
/></a-col>
|
||||
<a-col :span="4" @click="handleMoveDown(nodeData)"
|
||||
><icon-down
|
||||
/></a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
</a-tree>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-descriptions
|
||||
v-if="departmentDetailInfo"
|
||||
:column="1"
|
||||
layout="horizontal"
|
||||
bordered
|
||||
>
|
||||
<a-descriptions-item :label="t('department-name')">
|
||||
{{ departmentDetailInfo.name }}</a-descriptions-item
|
||||
>
|
||||
<a-descriptions-item :label="t('belongto-department')">
|
||||
{{ departmentDetailInfo.parentName || '-' }}</a-descriptions-item
|
||||
>
|
||||
<a-descriptions-item :label="t('department-head')">
|
||||
{{ departmentDetailInfo.username || '-' }}</a-descriptions-item
|
||||
>
|
||||
<a-descriptions-item :label="t('department-desc')">
|
||||
{{ departmentDetailInfo.remark }}</a-descriptions-item
|
||||
>
|
||||
</a-descriptions>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<departmentFormModal
|
||||
v-model:visible="showModal"
|
||||
:department-list-data="departmentListData"
|
||||
:record="departmentDetailInfo"
|
||||
:user-list-data="allUserList"
|
||||
:is-edit="isEdit"
|
||||
@submitted="getDepartmentListData"
|
||||
/>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
@@ -106,7 +111,7 @@
|
||||
} from '@/api/setting';
|
||||
import { debounce } from '@/utils';
|
||||
import { Message } from '@arco-design/web-vue';
|
||||
import departmentFormModal from './components/department-form-modal.vue';
|
||||
import departmentFormModal from '../components/department-form-modal.vue';
|
||||
|
||||
const {
|
||||
departmentListData,
|
||||
@@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<div> Data Dictionary </div>
|
||||
</template>
|
||||
@@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<div> Data Dictionary </div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user