feat: 添加同步按钮到合约品种和风控模板页面
This commit is contained in:
parent
71c241585a
commit
681c5e12dd
|
|
@ -12,3 +12,8 @@ export const addRiskApi = (params: any) => {
|
|||
export const editRiskApi = (params: any) => {
|
||||
return request.post('/riskControl/editRiskControlSetting', params)
|
||||
}
|
||||
|
||||
//同步风控模板
|
||||
export const syncRiskControlApi = () => {
|
||||
return request.post('/riskControl/syncRiskControlSetting', {})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,3 +18,8 @@ export async function createVarietyApi(params: any): Promise<any> {
|
|||
export async function editVarietyApi(params: any): Promise<any> {
|
||||
return request.post<any>('/contractVariety/editVariety', {...params})
|
||||
}
|
||||
|
||||
//同步合约品种
|
||||
export async function syncVarietyApi(): Promise<any> {
|
||||
return request.post<any>('/contractVariety/syncVariety', {})
|
||||
}
|
||||
|
|
@ -4,26 +4,26 @@
|
|||
<div class="header-left">
|
||||
<div class="logo-section">
|
||||
<img src="@/assets/images/logo.webp" alt="logo" class="logo-img" />
|
||||
<span class="system-name">Admin System</span>
|
||||
|
||||
<span class="system-name" v-if="!isSmallScreen">Admin System</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 菜单收缩按钮 - 在标题右边 -->
|
||||
<!-- 菜单收缩按钮 - 在标题右边(仅在大屏幕显示) -->
|
||||
<el-button
|
||||
v-if="!isSmallScreen"
|
||||
class="collapse-btn"
|
||||
:icon="sidebarCollapsed ? Expand : Fold"
|
||||
@click="toggleSidebar"
|
||||
text
|
||||
/>
|
||||
<!-- 中间:面包屑导航和搜索框 -->
|
||||
<div class="header-center">
|
||||
<!-- 中间:面包屑导航和搜索框(仅在大屏幕显示) -->
|
||||
<div v-if="!isSmallScreen" class="header-center">
|
||||
<Breadcrumb />
|
||||
</div>
|
||||
|
||||
<!-- 右侧:功能按钮和用户信息 -->
|
||||
<div class="header-right">
|
||||
<!-- 菜单搜索 -->
|
||||
<div class="menu-search-wrapper">
|
||||
<div class="menu-search-wrapper" :class="{ 'is-small': isSmallScreen }">
|
||||
<el-input
|
||||
v-model="searchQuery"
|
||||
placeholder="搜索菜单..."
|
||||
|
|
@ -67,7 +67,8 @@
|
|||
</el-tooltip>
|
||||
|
||||
<!-- 语言选择 -->
|
||||
<LanguageSelect v-model="languageStore.lang" @change="languageStore.changeLang" />
|
||||
<LanguageSelect v-model="languageStore.lang"
|
||||
v-if="!isSmallScreen" @change="languageStore.changeLang" />
|
||||
|
||||
<!-- 用户信息下拉菜单 -->
|
||||
<el-dropdown @command="handleCommand" class="user-dropdown">
|
||||
|
|
@ -100,7 +101,7 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import { computed, ref, onMounted, onUnmounted } from 'vue'
|
||||
import {
|
||||
FullScreen,
|
||||
Crop,
|
||||
|
|
@ -118,6 +119,10 @@ import LanguageSelect from '@/components/LanguageSelect/index.vue'
|
|||
import Breadcrumb from './Breadcrumb.vue'
|
||||
import { getStorage } from '@/utils/storage'
|
||||
|
||||
defineProps<{
|
||||
isSmallScreen?: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits(['toggle-sidebar'])
|
||||
|
||||
const router = useRouter()
|
||||
|
|
@ -366,7 +371,7 @@ const handleLogout = () => {
|
|||
|
||||
.menu-search-input {
|
||||
width: 180px;
|
||||
transition: width 0.3s ease;
|
||||
transition: none;
|
||||
|
||||
&:hover,
|
||||
&:focus-within {
|
||||
|
|
@ -379,6 +384,18 @@ const handleLogout = () => {
|
|||
}
|
||||
}
|
||||
|
||||
// 小屏幕时搜索框样式
|
||||
&.is-small {
|
||||
.menu-search-input {
|
||||
width: 120px;
|
||||
|
||||
&:hover,
|
||||
&:focus-within {
|
||||
width: 140px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-results-dropdown {
|
||||
position: absolute;
|
||||
top: calc(100% + 4px);
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<section class="layout">
|
||||
<!-- 顶部导航栏:固定在顶部 -->
|
||||
<Header @toggle-sidebar="handleToggleSidebar" />
|
||||
<Header :isSmallScreen="screenWidth < COLLAPSE_BREAKPOINT" @toggle-sidebar="handleToggleSidebar" />
|
||||
|
||||
<!-- 主体内容区域 -->
|
||||
<section class="main-container" :class="{ 'is-collapsed': sidebarCollapsed }">
|
||||
|
|
@ -61,6 +61,33 @@ const refreshKey = computed(() => {
|
|||
// 侧边栏收缩状态
|
||||
const sidebarCollapsed = ref(false)
|
||||
|
||||
// 屏幕宽度监听
|
||||
const screenWidth = ref(window.innerWidth)
|
||||
|
||||
// 响应式收起侧边栏的阈值(单位:px)
|
||||
const COLLAPSE_BREAKPOINT = 992
|
||||
|
||||
// 监听屏幕宽度变化
|
||||
const handleResize = () => {
|
||||
screenWidth.value = window.innerWidth
|
||||
// 当屏幕宽度小于阈值时自动收起侧边栏
|
||||
if (screenWidth.value < COLLAPSE_BREAKPOINT) {
|
||||
sidebarCollapsed.value = true
|
||||
}else {
|
||||
sidebarCollapsed.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// 初始化时判断屏幕宽度
|
||||
handleResize()
|
||||
window.addEventListener('resize', handleResize)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', handleResize)
|
||||
})
|
||||
|
||||
// 切换侧边栏
|
||||
const handleToggleSidebar = (collapsed: boolean) => {
|
||||
sidebarCollapsed.value = collapsed
|
||||
|
|
@ -104,6 +131,19 @@ const handleToggleSidebar = (collapsed: boolean) => {
|
|||
}
|
||||
}
|
||||
|
||||
// 响应式侧边栏收起
|
||||
@media screen and (max-width: 992px) {
|
||||
.layout {
|
||||
.main-container {
|
||||
&.is-collapsed {
|
||||
.content-container {
|
||||
margin-left: 64px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 页面切换动画
|
||||
.fade-transform-enter-active,
|
||||
.fade-transform-leave-active {
|
||||
|
|
|
|||
|
|
@ -8,6 +8,9 @@
|
|||
v-auth="'riskControl_editRiskControlSetting'">停用</el-button>
|
||||
<el-button type="primary" @click="handleChangeStatus(1)"
|
||||
v-auth="'riskControl_editRiskControlSetting'">启用</el-button>
|
||||
<el-button type="primary" :loading="syncLoading" @click="handleSyncRiskControl()" v-auth="'riskControl_editRiskControlSetting'">
|
||||
同步风控模板
|
||||
</el-button>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="risk-table-content">
|
||||
|
|
@ -45,12 +48,14 @@ import RiskTableSwitch from '@/components/common/Table.vue'
|
|||
import RiskTableContent from '@/components/common/Table.vue'
|
||||
import RiskDialog from '@/components/common/Dialog.vue'
|
||||
import RiskForm from '@/components/common/Form.vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
// 配置以及表单验证
|
||||
import { tableColumnsSwitch, tableColumnsContent, formItem } from './options'
|
||||
import { rules } from './rules'
|
||||
|
||||
// 接口
|
||||
import { getRiskListApi, addRiskApi, editRiskApi } from '@/api/modules/risk'
|
||||
import { getRiskListApi, addRiskApi, editRiskApi, syncRiskControlApi } from '@/api/modules/risk'
|
||||
|
||||
// 公用方法
|
||||
|
||||
|
|
@ -184,6 +189,17 @@ onMounted(() => {
|
|||
getRiskList()
|
||||
})
|
||||
|
||||
// 同步风控模板
|
||||
const syncLoading = ref(false)
|
||||
const handleSyncRiskControl = async () => {
|
||||
syncLoading.value = true
|
||||
try {
|
||||
await syncRiskControlApi()
|
||||
} finally {
|
||||
syncLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: 定义bar方法
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -10,6 +10,9 @@
|
|||
<el-button type="primary" @click="handleAdd()" v-auth="'contractVariety_createVariety'">
|
||||
添加
|
||||
</el-button>
|
||||
<el-button type="primary" :loading="syncLoading" @click="handleSyncVariety()" v-auth="'contractVariety_createVariety'">
|
||||
同步合约品种
|
||||
</el-button>
|
||||
</template>
|
||||
</VarietySearch>
|
||||
|
||||
|
|
@ -64,6 +67,7 @@ import VarietySearch from '@/components/common/Search.vue'
|
|||
import VarietyTable from '@/components/common/Table.vue'
|
||||
import VarietyDialog from '@/components/common/Dialog.vue'
|
||||
import VarietyForm from '@/components/common/Form.vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
// 配置以及表单验证
|
||||
import { search, tableColumns, DialogFormItem } from './options'
|
||||
|
|
@ -75,6 +79,7 @@ import {
|
|||
getTradeGroupListApi,
|
||||
editVarietyApi,
|
||||
createVarietyApi,
|
||||
syncVarietyApi,
|
||||
} from '@/api/modules/trade/variety'
|
||||
// 上传图片
|
||||
import { uploadImageApi } from '@/api/modules/upload'
|
||||
|
|
@ -261,6 +266,17 @@ const handleReset = () => {
|
|||
handleSearch()
|
||||
}
|
||||
|
||||
// 同步合约品种
|
||||
const syncLoading = ref(false)
|
||||
const handleSyncVariety = async () => {
|
||||
syncLoading.value = true
|
||||
try {
|
||||
await syncVarietyApi()
|
||||
} finally {
|
||||
syncLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleEdit = () => {
|
||||
getTradeGroupList()
|
||||
const row = selectedRow.value
|
||||
|
|
|
|||
Loading…
Reference in New Issue