处理loading

This commit is contained in:
2026-05-21 17:00:52 +08:00
parent cfd68bf3c9
commit 3e49edfba4
9 changed files with 129 additions and 183 deletions

View File

@ -13,4 +13,9 @@ export const getSelfVarietyPointDiffConfigApi = (params: any) => {
//编辑代理客户接口
export const editCustomerApi = (params: any) => {
return request.post('/agent/editAgent', {...params})
}
//编辑代理客户接口
export const updateToAgent = (params: any) => {
return request.post('/agent/updateToAgent', {...params})
}

View File

@ -1,8 +1,8 @@
<template>
<div class="table_form-container">
<!-- 搜索 -->
<CustomerTradeOrderSearch :search-form="searchForm" :search-options="searchOptions" @search="handleSearch"
@reset="handleReset" @blur-input="getSubAccountList">
<CustomerTradeOrderSearch :buttonLoading="loading" :search-form="searchForm" :search-options="searchOptions"
@search="handleSearch" @reset="handleReset" @blur-input="getSubAccountList">
</CustomerTradeOrderSearch>
<div class="bar" v-if="searchForm.orderId === '1'">
<div>持仓量:0</div>

View File

@ -1,12 +1,9 @@
<template>
<div class="position-stat table_form-container">
<!-- 搜索 -->
<PositionStatSearch
:search-form="searchForm"
:search-options="searchOptions"
@search="handleSearch"
@reset="handleReset"
>
<PositionStatSearch
:buttonLoading="loading" :search-form="searchForm" :search-options="searchOptions" @search="handleSearch"
@reset="handleReset">
<!-- <template #button="{ form }">-->
<!-- <el-button type="primary" @click="handleExport()">-->
<!-- 导出-->
@ -14,12 +11,8 @@
<!-- </template>-->
</PositionStatSearch>
<!-- 表格 -->
<PositionStatTable
:table-data="orderPositionStore.positionOrderList"
:columns="tableColumnsOptions"
:loading="loading"
row-key="id"
/>
<PositionStatTable :table-data="orderPositionStore.positionOrderList" :columns="tableColumnsOptions"
:loading="loading" row-key="id" />
</div>
</template>
@ -62,13 +55,15 @@ const tableColumnsOptions = ref(tableColumns)
* @description: 定义搜索方法
*/
const handleSearch = async () => {
startLoading()
const data = await checkAccountIdIsSonForUser({ account_id: searchForm.value.account_id })
stopLoading()
if (!data.flag) {
try {
startLoading()
const data = await checkAccountIdIsSonForUser({ account_id: searchForm.value.account_id })
if (!data.flag) {
return ElMessage.warning('请输入下级ID')
}
transactionStore.getPositionList(searchForm.value.account_id)
}
transactionStore.getPositionList(searchForm.value.account_id)
} finally { stopLoading() }
}
const handleReset = () => {
console.log('重置搜索')

View File

@ -2,6 +2,7 @@
<div class="order-rechange-page table_form-container">
<!-- 搜索区域按接口参数保留订单号用户名称状态开始/结束时间 -->
<OrderRechangeSearch
:buttonLoading="loading"
:search-form="searchForm"
:search-options="searchOptions"
@search="handleSearch"

View File

@ -2,6 +2,7 @@
<div class="table_form-container">
<!-- 搜索 -->
<TransferSearch
:buttonLoading="loading"
:search-form="searchForm"
:search-options="searchOptions"
@search="handleSearch"
@ -56,7 +57,7 @@ const initTime = getRecentSevenDays()
/**
* @description: 定义搜索数据
*/
const searchForm = ref({
const searchForm = ref<any>({
transferAccount: '',
type: '',
transferTime: [initTime.start, initTime.end],

View File

@ -169,7 +169,7 @@
<template #footer v-if="dialogType !== 'view'">
<div class="drawer-footer">
<el-button @click="handleCancel">取消</el-button>
<el-button type="primary" @click="handleSubmit">确定</el-button>
<el-button type="primary" :loading="submitLoading" @click="handleSubmit">确定</el-button>
</div>
</template>
</el-drawer>

View File

@ -32,16 +32,15 @@
<RoleForm :form-data="roleForm" :form-rules="roleFormRules" :form-items="roleFormItemOptions" ref="roleFormRef"
:options-map="roleFormOptionsMap" :dialog-type="dialogType">
<template #permissions="{ formData }">
<el-tree ref="permissionTreeRef" :data="permissionTreeData" :props="treeProps" show-checkbox node-key="id"
:default-expand-all="true" :check-strictly="false"
class="permission-tree" />
<el-tree v-loading="treeLoading" ref="permissionTreeRef" :data="permissionTreeData" :props="treeProps"
show-checkbox node-key="id" :default-expand-all="true" :check-strictly="false" class="permission-tree" />
</template>
</RoleForm>
<template #footer>
<div style="flex: auto">
<el-button @click="handleCancel">取消</el-button>
<el-button type="primary" @click="handleSubmit">确定</el-button>
<el-button type="primary" :loading="buttonLoading" @click="handleSubmit">确定</el-button>
</div>
</template>
</el-drawer>
@ -54,8 +53,11 @@ defineOptions({
})
import type { FormInstance, TreeInstance } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { usePageLoading } from '@/composables/useLoading'
import { usePageLoading, useButtonLoading } from '@/composables/useLoading'
const { loading, startLoading, stopLoading } = usePageLoading()
const { loading: treeLoading, startLoading: treeStartLoading, stopLoading: treeStopLoading } = usePageLoading()
const { buttonLoading, startButtonLoading, stopButtonLoading } = useButtonLoading()
//
import RoleTable from '@/components/common/Table.vue'
@ -248,7 +250,7 @@ const filterParentNodes = (permissionIds: number[], treeData: any[]): number[] =
*/
const getParentNodeIds = (checkedKeys: number[], treeData: any[]): number[] => {
const parentIds: number[] = []
treeData.forEach(parent => {
// ID
const childIds = parent.children?.map((child: any) => child.id) || []
@ -256,13 +258,13 @@ const getParentNodeIds = (checkedKeys: number[], treeData: any[]): number[] => {
const hasCheckedChild = childIds.some((id: number) => checkedKeys.includes(id))
//
const allChildrenChecked = childIds.length > 0 && childIds.every((id: number) => checkedKeys.includes(id))
//
if (hasCheckedChild && !allChildrenChecked) {
parentIds.push(parent.id)
}
})
return parentIds
}
@ -270,27 +272,31 @@ const getParentNodeIds = (checkedKeys: number[], treeData: any[]): number[] => {
const handlePermission = async (row: any) => {
dialogVisible.value = true
dialogTitle.value = '设置角色权限'
permissionTreeData.value = []
dialogType.value = 'permissions'
treeStartLoading()
handleDialogType(dialogType.value)
permissionIds.value = row.id
try {
const data = await getRolePermissionApi({ id: row.id })
allPermissions.value = data.all_permission_info
permissionTreeData.value = transformPermissionsToTree(data.all_permission_info)
// IDID
const childPermissionIds = filterParentNodes(data.permission_ids || [], permissionTreeData.value)
roleForm.value.permissions = childPermissionIds
console.log('树形权限数据', permissionTreeData.value)
console.log('过滤后的权限ID仅子节点:', childPermissionIds)
// DOM
await nextTick()
// 使 setCheckedKeys
permissionTreeRef.value?.setCheckedKeys(childPermissionIds, false)
} catch (err) {
console.error('获取角色权限失败', err)
} finally {
treeStopLoading()
}
}
@ -298,6 +304,7 @@ const handlePermission = async (row: any) => {
@description: 处理弹窗提交/取消/关闭事件
**/
const handleSubmit = async () => {
startButtonLoading()
console.log('提交菜单表单', roleForm.value.permissions, allPermissions.value)
try {
await roleFormRef.value?.validate()
@ -315,7 +322,7 @@ const handleSubmit = async () => {
// Tree
const checkedKeys = permissionTreeRef.value?.getCheckedKeys() || []
const halfCheckedKeys = permissionTreeRef.value?.getHalfCheckedKeys() || []
// ID
const allSelectedKeys = [...checkedKeys, ...halfCheckedKeys]
@ -333,6 +340,8 @@ const handleSubmit = async () => {
} catch (err) {
console.log('表单验证失败')
return
} finally {
stopButtonLoading()
}
}
@ -363,7 +372,7 @@ const handleClose = () => {
:deep(.el-form-item__content) {
margin-left: 0 !important;
}
.system {
:deep(.el-drawer__header) {
margin-bottom: 0 !important;

View File

@ -1,24 +1,14 @@
<template>
<div class="trade-group table_form-container">
<el-form-item label="交易节假日时间设置">
<el-button
style="margin-left: 18px"
type="primary"
v-auth="'contractVariety_addHoliday'"
@click="handleAdd"
>添加</el-button
>
<el-button
style="margin-left: 18px"
type="danger"
v-auth="'contractVariety_addHoliday'"
@click="handleDel"
>删除</el-button
>
<el-button style="margin-left: 18px" type="primary" v-auth="'contractVariety_addHoliday'"
@click="handleAdd">添加</el-button>
<el-button style="margin-left: 18px" type="danger" v-auth="'contractVariety_addHoliday'"
@click="handleDel">删除</el-button>
</el-form-item>
<!-- 表格 -->
<div class="table-box">
<table>
<table v-loading="loading">
<thead>
<tr>
<th>名称</th>
@ -36,33 +26,16 @@
<span v-else>{{ item.name }}</span>
</td>
<td>
<el-date-picker
v-if="item.editStatus"
v-model="item.datePicker"
type="datetimerange"
start-placeholder="休市开始时间"
end-placeholder="休市结束时间"
format="YYYY-MM-DD HH:mm:ss"
date-format="YYYY-MM-DD HH:mm:ss"
time-format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
/>
<el-date-picker v-if="item.editStatus" v-model="item.datePicker" type="datetimerange"
start-placeholder="休市开始时间" end-placeholder="休市结束时间" format="YYYY-MM-DD HH:mm:ss"
date-format="YYYY-MM-DD HH:mm:ss" time-format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss" />
<span v-else>{{ item.datePicker[0] }} - {{ item.datePicker[1] }}</span>
</td>
<td>
<el-select
multiple
placeholder="请选择休市市场"
style="width: 240px"
v-model="item.groupId"
v-if="item.editStatus"
>
<el-option
v-for="item in marketList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
<el-select multiple placeholder="请选择休市市场" style="width: 240px" v-model="item.groupId"
v-if="item.editStatus">
<el-option v-for="item in marketList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<span>{{
(item?.groupId || [])
@ -78,34 +51,14 @@
<span v-else>{{ item.description }}</span>
</td>
<td>
<el-button
type="primary"
v-if="!item.editStatus"
@click="item.editStatus = true"
v-auth="'contractVariety_addHoliday'"
>编辑</el-button
>
<el-button
type="danger"
v-if="!item.editStatus"
@click="handleDel(item.id, index)"
v-auth="'contractVariety_addHoliday'"
>删除</el-button
>
<el-button
type="primary"
v-if="item.editStatus"
@click="submitItem(index)"
v-auth="'contractVariety_addHoliday'"
>确认</el-button
>
<el-button
type="danger"
v-if="item.editStatus"
@click="item.editStatus = false"
v-auth="'contractVariety_addHoliday'"
>取消</el-button
>
<el-button type="primary" v-if="!item.editStatus" @click="item.editStatus = true"
v-auth="'contractVariety_addHoliday'">编辑</el-button>
<el-button type="danger" v-if="!item.editStatus" @click="handleDel(item.id, index)"
v-auth="'contractVariety_addHoliday'">删除</el-button>
<el-button type="primary" v-if="item.editStatus" @click="submitItem(index)"
v-auth="'contractVariety_addHoliday'">确认</el-button>
<el-button type="danger" v-if="item.editStatus" @click="item.editStatus = false"
v-auth="'contractVariety_addHoliday'">取消</el-button>
</td>
</tr>
</tbody>
@ -123,6 +76,10 @@ import { ref, onMounted } from 'vue'
import { getGroupListApi } from '@/api/modules/trade/group'
import { getHolidayList, addHoliday, editHoliday, delHoliday } from '@/api/modules/trade/time'
import { ElMessageBox } from 'element-plus'
import { usePageLoading } from '@/composables/useLoading'
// loading
const { loading, startLoading, stopLoading } = usePageLoading()
type DataItem = {
id?: number | string
@ -150,18 +107,21 @@ const getMarketList = async () => {
}
const initDate = () => {
getHolidayList().then((res) => {
dataList.value = res.map((item: any) => ({
id: item.id + '',
name: item.name,
start_time: item.start_time,
end_time: item.end_time,
datePicker: [item.start_time, item.end_time],
groupId: item.group_id,
description: item.description,
editStatus: false,
}))
})
startLoading()
try {
getHolidayList().then((res) => {
dataList.value = res.map((item: any) => ({
id: item.id + '',
name: item.name,
start_time: item.start_time,
end_time: item.end_time,
datePicker: [item.start_time, item.end_time],
groupId: item.group_id,
description: item.description,
editStatus: false,
}))
})
} finally { stopLoading() }
}
const handleAdd = () => {
@ -223,6 +183,7 @@ onMounted(() => {
.trade-group {
overflow-y: scroll;
}
/* 给 table 及所有 td 加边框 */
table {
border-collapse: collapse;

View File

@ -1,13 +1,11 @@
<template>
<div class="trade-group table_form-container">
<el-form-item label="交易组时间设置">
<el-button type="primary" @click="addTableItem" v-auth="'contractVariety_createGroup'"
>添加</el-button
>
<el-button type="primary" @click="addTableItem" v-auth="'contractVariety_createGroup'">添加</el-button>
</el-form-item>
<!-- 表格 -->
<div class="table-box">
<table>
<table v-loading="loading">
<template v-for="(item, index) in tradeGroupTree" :key="item.id">
<tr>
<td style="width: 50px">顺序</td>
@ -35,23 +33,13 @@
<td class="time-picker-box">
<template v-if="item.editStatus">
<template v-if="item?.x_time_list">
<el-time-picker
v-for="(time, timeIndex) in item?.x_time_list"
:key="timeIndex"
v-model="item.x_time_list[timeIndex]"
style="width: 180px; flex: 0 0 auto"
format="HH:mm:ss"
value-format="HH:mm:ss"
:picker-options="{
<el-time-picker v-for="(time, timeIndex) in item?.x_time_list" :key="timeIndex"
v-model="item.x_time_list[timeIndex]" style="width: 180px; flex: 0 0 auto" format="HH:mm:ss"
value-format="HH:mm:ss" :picker-options="{
selectableRange: '09:00:00 - 18:00:00',
}"
is-range
/>
}" is-range />
</template>
<img
src="@/assets/images/trade/group/add.png"
@click="addTime(index, 'x_time_list')"
/>
<img src="@/assets/images/trade/group/add.png" @click="addTime(index, 'x_time_list')" />
</template>
<template v-else>
<template v-if="item?.x_time_list">
@ -62,34 +50,14 @@
</template>
</td>
<td rowspan="2" style="width: 140px">
<el-button
type="primary"
v-if="!item.editStatus"
@click="item.editStatus = true"
v-auth="'contractVariety_editGroup'"
>编辑</el-button
>
<el-button
type="danger"
v-if="!item.editStatus"
@click="deleteGroup(item.id, index)"
v-auth="'contractVariety_delGroup'"
>删除</el-button
>
<el-button
type="primary"
v-if="item.editStatus"
@click="submitItem(index)"
v-auth="'contractVariety_editGroup'"
>确认</el-button
>
<el-button
type="danger"
v-if="item.editStatus"
@click="item.editStatus = false"
v-auth="'contractVariety_editGroup'"
>取消</el-button
>
<el-button type="primary" v-if="!item.editStatus" @click="item.editStatus = true"
v-auth="'contractVariety_editGroup'">编辑</el-button>
<el-button type="danger" v-if="!item.editStatus" @click="deleteGroup(item.id, index)"
v-auth="'contractVariety_delGroup'">删除</el-button>
<el-button type="primary" v-if="item.editStatus" @click="submitItem(index)"
v-auth="'contractVariety_editGroup'">确认</el-button>
<el-button type="danger" v-if="item.editStatus" @click="item.editStatus = false"
v-auth="'contractVariety_editGroup'">取消</el-button>
</td>
</tr>
<tr>
@ -114,23 +82,13 @@
<td class="time-picker-box">
<template v-if="item.editStatus">
<template v-if="item?.d_time_list">
<el-time-picker
v-for="(time, timeIndex) in item?.d_time_list"
:key="timeIndex"
v-model="item.d_time_list[timeIndex]"
style="width: 180px; flex: 0 0 auto"
format="HH:mm:ss"
value-format="HH:mm:ss"
:picker-options="{
<el-time-picker v-for="(time, timeIndex) in item?.d_time_list" :key="timeIndex"
v-model="item.d_time_list[timeIndex]" style="width: 180px; flex: 0 0 auto" format="HH:mm:ss"
value-format="HH:mm:ss" :picker-options="{
selectableRange: '09:00:00 - 18:00:00',
}"
is-range
/>
}" is-range />
</template>
<img
src="@/assets/images/trade/group/add.png"
@click="addTime(index, 'd_time_list')"
/>
<img src="@/assets/images/trade/group/add.png" @click="addTime(index, 'd_time_list')" />
</template>
<template v-else>
<template v-if="item?.d_time_list">
@ -148,7 +106,10 @@
</template>
<script setup lang="ts">
import { usePageLoading } from '@/composables/useLoading'
// loading
const { loading, startLoading, stopLoading } = usePageLoading()
defineOptions({
name: 'Times'
})
@ -246,6 +207,7 @@ const deleteGroup = (id: number, idx: number) => {
* @description: 定义公共请求数据方法
*/
const getGroupList = async () => {
startLoading()
try {
const data = await getGroupListApi()
data.forEach((item: any) => {
@ -283,6 +245,8 @@ const getGroupList = async () => {
} catch (e: any) {
console.log(e)
ElMessage.error(e.msg)
} finally {
stopLoading()
}
}
@ -298,40 +262,50 @@ onMounted(() => {
.trade-group {
overflow-y: scroll;
}
/* 给 table 及所有 td 加边框 */
table {
border-collapse: collapse;
width: 100%;
table-layout: auto; /* 宽度自适应内容 */
table-layout: auto;
/* 宽度自适应内容 */
.time-picker-box {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
img {
width: 20px;
height: 20px;
cursor: pointer;
}
}
td {
height: 59px;
border: 1px solid #dcdfe6;
padding: 4px 8px; /* 内边距缩小 */
padding: 4px 8px;
/* 内边距缩小 */
text-align: center;
font-size: 12px; /* 文字变小 */
white-space: nowrap; /* 文字不换行 */
vertical-align: middle; /* 垂直居中 */
font-size: 12px;
/* 文字变小 */
white-space: nowrap;
/* 文字不换行 */
vertical-align: middle;
/* 垂直居中 */
/* 时间选择器容器:两个选择器横排不换行 */
:deep(.el-time-picker) {
display: inline-block;
.el-range-editor {
width: 100px; /* 缩小时间选择器宽度 */
width: 100px;
/* 缩小时间选择器宽度 */
font-size: 12px;
}
.el-range-input {
font-size: 12px;
}