yueyixin
/
foreign-admin-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

提交

This commit is contained in:
李远 2026-03-18 16:35:53 +08:00
parent bb9134f78d
commit 24a3870efb
8 changed files with 303 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -21,6 +21,7 @@
"@vueuse/core": "^14.2.1",
"axios": "^1.13.5",
"crypto-js": "^4.2.0",
"dayjs": "^1.11.20",
"element-plus": "^2.13.2",
"pinia": "^3.0.4",
"vue": "^3.5.29",

11
pnpm-lock.yaml
View File

@ -26,6 +26,9 @@ importers:
crypto-js:
specifier: ^4.2.0
version: 4.2.0
dayjs:
specifier: ^1.11.20
version: 1.11.20
element-plus:
specifier: ^2.13.2
version: 2.13.2(vue@3.5.29(typescript@5.9.3))
@ -1220,8 +1223,8 @@ packages:
csstype@3.2.3:
resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
dayjs@1.11.19:
resolution: {integrity: sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw==}
dayjs@1.11.20:
resolution: {integrity: sha512-YbwwqR/uYpeoP4pu043q+LTDLFBLApUP6VxRihdfNTqu4ubqMlGDLd6ErXhEgsyvY0K6nCs7nggYumAN+9uEuQ==}
debug@4.4.3:
resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
@ -3162,7 +3165,7 @@ snapshots:
csstype@3.2.3: {}
dayjs@1.11.19: {}
dayjs@1.11.20: {}
debug@4.4.3:
dependencies:
@ -3202,7 +3205,7 @@ snapshots:
'@types/lodash-es': 4.17.12
'@vueuse/core': 10.11.1(vue@3.5.29(typescript@5.9.3))
async-validator: 4.2.5
dayjs: 1.11.19
dayjs: 1.11.20
lodash: 4.17.23
lodash-es: 4.17.23
lodash-unified: 1.0.3(@types/lodash-es@4.17.12)(lodash-es@4.17.23)(lodash@4.17.23)

21
src/api/modules/trade/group.ts Normal file
View File

@ -0,0 +1,21 @@
import { request } from '@/api';
// 获取交易组列表
export async function getGroupListApi(): Promise<any> {
return request.get<any>('/contractVariety/getGroupList')
}
// 创建交易组
export async function addGroupApi(params: any): Promise<any> {
return request.post<any>('/contractVariety/createGroup', {...params})
}
//编辑交易组
export async function editGroupApi(params: any): Promise<any> {
return request.post<any>('/contractVariety/editGroup', {...params})
}
// 删除交易组
export async function deleteGroupApi(params: any): Promise<any> {
return request.post<any>('/contractVariety/delGroup', {...params})
}

14
src/components/common/Form.vue
View File

@ -49,6 +49,13 @@
</el-checkbox-group>
<el-switch v-else-if="item.type === 'switch'" v-model="formData[item.prop]" :active-value="1"
:inactive-value="2" />
<!-- 日期选择器（单个/范围） -->
<el-date-picker v-else-if="item.type === 'date'" v-model="formData[item.prop]"
:type="item.dateType || 'date'" :range-separator="item.rangeSeparator || '至'"
:start-placeholder="item.startPlaceholder || '开始时间'"
:end-placeholder="item.endPlaceholder || '结束时间'"
:value-format="item.valueFormat || 'YYYY-MM-DD'" :clearable="item.clearable ?? true"
:disabled-date="item.disabledDate" :locale="'zhCn'" />
<!-- 自定义插槽 -->
<slot v-else :name="item.slotName" :formData="formData" />
</el-form-item>
@ -75,6 +82,13 @@ interface FormItem {
labelPosition?: 'left' | 'right'
labelWidth?: string
class?: string
dateType?: 'date' | 'daterange' | 'monthrange' | 'yearrange' | 'datetimerange'
rangeSeparator?: string
startPlaceholder?: string
endPlaceholder?: string
valueFormat?: string
clearable?: boolean
disabledDate?: (time: Date) => boolean
}

208
src/views/trade/group/index.vue
View File

@ -1,3 +1,207 @@
<template>
<h1>交易组</h1>
</template>
<div class="trade-group">
<el-form-item>
<el-button type="primary" @click="handleAdd">添加</el-button>
</el-form-item>
<!-- 表格 -->
<TradeGroupTable :table-data="tradeGroupTree" :columns="tradeGroupTableColumnsOptions" row-key="id">
<template #tradeTime="{ row }">
冬:开仓{{ row.winterStartTime }} - 平仓{{ row.winterEndTime }}<br />
<hr>
夏:开仓{{ row.summerStartTime }} - 平仓{{ row.summerEndTime }}
</template>
<template #status="{ row }">
<el-switch :model-value="row.status === 1" :active-value="true" :inactive-value="false" />
</template>
<template #action="{ row }">
<el-button type="primary" size="small" @click="handleEdit(row)">编辑</el-button>
<el-button type="danger" size="small" @click="handleDelete(row)">删除</el-button>
</template>
</TradeGroupTable>
</div>
<!-- dialog -->
<TradeGroupDialog :visible="dialogVisible" :title="dialogTitle" :type="dialogType" @confirm="handleSubmit"
@cancel="handleCancel" @close="handleClose">
<TradeGroupForm :form-data="tradeGroupForm" :form-rules="tradeGroupFormRules"
:form-items="dialogFormItemOptions" :options-map="tradeGroupFormOptionsMap" ref="tradeGroupFormRef">
</TradeGroupForm>
</TradeGroupDialog>
</template>
<script setup lang="ts">
// 组件
import TradeGroupTable from '@/components/common/Table.vue'
import TradeGroupDialog from '@/components/common/Dialog.vue'
import TradeGroupForm from '@/components/common/Form.vue'
// 配置以及表单验证
import { search, tableColumns, addFormItem, editFormItem } from './options'
import { rules } from './rules'
import dayjs from 'dayjs';
// 接口
import { getGroupListApi, addGroupApi, editGroupApi, deleteGroupApi } from '@/api/modules/trade/group'
/**
* @description: 定义表格数据
*/
const tradeGroupTree = ref([])
const tradeGroupTableColumnsOptions = ref(tableColumns)
/**
* @description: 定义弹窗数据
*/
const dialogVisible = ref(false)
const dialogTitle = ref('')
const dialogType = ref('')
/**
* @description: 定义弹窗表格数据
*/
const tradeGroupForm = ref({
// 交易组名称
tradeGroupName: '',
// 交易所ID
exchangeId: '',
// 状态
status: 1,
// 冬季交易时间
winterTime: [],
// 夏季交易时间
summerTime: [],
// 排序
sort: 0,
// 主键ID
id: '',
})
const tradeGroupFormRules = ref(rules())
const tradeGroupFormRef = ref()
const dialogFormItemOptions = computed(() => dialogType.value === 'add' ? addFormItem : editFormItem)
const tradeGroupFormOptionsMap = ref({
status: [{ label: '开启', value: 1 }, { label: '关闭', value: 2 }],
})
/**
* @description: 定义公共数据处理方法
*/
/**
* @description: 定义公共请求数据方法
*/
const getGroupList = async () => {
const data = await getGroupListApi()
tradeGroupTree.value = data.map((item: any) => ({
id: item.id,
tradeGroupName: item.name,
status: item.status,
// 冬季交易时间
winterStartTime: dayjs(item.d_start_time * 1000).format('YYYY-MM-DD HH:mm:ss'),
winterEndTime: dayjs(item.d_end_time * 1000).format('YYYY-MM-DD HH:mm:ss'),
// 夏季交易时间
summerStartTime: dayjs(item.x_start_time * 1000).format('YYYY-MM-DD HH:mm:ss'),
summerEndTime: dayjs(item.x_end_time * 1000).format('YYYY-MM-DD HH:mm:ss'),
// 排序
sort: item.sort,
}))
}
/**
* @description: 页面加载完成需要请求的数据
*/
onMounted(() => {
getGroupList()
})
const handleAdd = () => {
dialogVisible.value = true
dialogTitle.value = '添加交易组'
dialogType.value = 'add'
tradeGroupForm.value = {
tradeGroupName: '',
winterTime: [],
summerTime: [],
status: 1,
sort: 0,
id: '',
} as any
}
/**
* @description: 定义表格方法
*/
const handleEdit = (row: any) => {
tradeGroupForm.value = {
tradeGroupName: row.tradeGroupName,
winterTime: [dayjs(row.winterStartTime).format('YYYY-MM-DD HH:mm:ss'), dayjs(row.winterEndTime).format('YYYY-MM-DD HH:mm:ss')],
summerTime: [dayjs(row.summerStartTime).format('YYYY-MM-DD HH:mm:ss'), dayjs(row.summerEndTime).format('YYYY-MM-DD HH:mm:ss')],
status: row.status,
sort: row.sort,
id: row.id,
} as any
dialogVisible.value = true
dialogTitle.value = '编辑交易组'
dialogType.value = 'edit'
}
const handleDelete = async (row: any) => {
console.log(row)
await deleteGroupApi({ id: row.id })
getGroupList()
}
/**
* @description: 定义分页方法
*/
/**
* @description: 定义弹窗方法
*/
const handleSubmit = async () => {
await tradeGroupFormRef.value.validate()
if (dialogType.value === 'add') {
const params = {
name: tradeGroupForm.value.tradeGroupName,
x_start_time: tradeGroupForm.value.summerTime[0],
x_end_time: tradeGroupForm.value.summerTime[1],
d_start_time: tradeGroupForm.value.winterTime[0],
d_end_time: tradeGroupForm.value.winterTime[1],
}
await addGroupApi(params)
getGroupList()
dialogVisible.value = false
} else if (dialogType.value === 'edit') {
// 处理编辑逻辑
const params = {
id: tradeGroupForm.value.id,
name: tradeGroupForm.value.tradeGroupName,
x_start_time: tradeGroupForm.value.summerTime[0],
x_end_time: tradeGroupForm.value.summerTime[1],
d_start_time: tradeGroupForm.value.winterTime[0],
d_end_time: tradeGroupForm.value.winterTime[1],
status: tradeGroupForm.value.status,
sort: tradeGroupForm.value.sort,
}
await editGroupApi(params)
getGroupList()
dialogVisible.value = false
}
}
const handleCancel = () => {
dialogVisible.value = false
}
const handleClose = () => {
dialogVisible.value = false
}
/**
* @description: 定义弹窗表格方法
*/
</script>
<style scoped lang="scss">
.search-container {
:deep(.el-form) {
.el-form-item {
flex: none;
.el-select {
width: 160px;
}
}
}
}
</style>

40
src/views/trade/group/options.ts Normal file
View File

@ -0,0 +1,40 @@
/**
* @description: 搜索配置
*/
export const search = [
{ label: '交易组名称', prop: 'tradeGroupName', type: 'input' as const, placeholder: '请输入交易组名称' },
{ label: '状态', prop: 'status', type: 'select' as const, options: [{ label: '全部', value: '0' }, { label: '开启', value: '1' }, { label: '关闭', value: '2' }] },
]
/**
* @description: 表格配置
*/
export const tableColumns = [
{ label: '交易组名称', prop: 'tradeGroupName' },
//交易所编号
{ label: '交易所编号', prop: 'exchangeId' },
// 交易时间
{ label: '交易时间', slotName: 'tradeTime' },
// 交易状态
{ label: '交易状态', slotName: 'status' },
// 操作
{ label: '操作', slotName: 'action' },
]
/**
* @description: dialog form配置
*/
export const addFormItem = [
{ label: '交易组名称', prop: 'tradeGroupName', type: 'input' as const, placeholder: '请输入交易组名称' },
// { label: '交易所ID', prop: 'exchangeId', type: 'select' as const, options: [] },
// { label: '状态', prop: 'status', type: 'select' as const, options: [{ label: '开启', value: '1' }, { label: '关闭', value: '2' }] },
{ label: '冬季交易时间', prop: 'winterTime', type: 'date' as const, dateType: 'datetimerange' as const, placeholder: '请选择冬季交易时间', valueFormat: 'YYYY-MM-DD HH:mm:ss', labelWidth: '110px' },
{ label: '夏季交易时间', prop: 'summerTime', type: 'date' as const, dateType: 'datetimerange' as const, placeholder: '请选择夏季交易时间', valueFormat: 'YYYY-MM-DD HH:mm:ss' , labelWidth: '110px' },
]
export const editFormItem = [
{ label: '交易组名称', prop: 'tradeGroupName', type: 'input' as const, placeholder: '请输入交易组名称' },
{ label: '冬季交易时间', prop: 'winterTime', type: 'date' as const, dateType: 'datetimerange' as const, placeholder: '请选择冬季交易时间', valueFormat: 'YYYY-MM-DD HH:mm:ss' , labelWidth: '110px'},
{ label: '夏季交易时间', prop: 'summerTime', type: 'date' as const, dateType: 'datetimerange' as const, placeholder: '请选择夏季交易时间', valueFormat: 'YYYY-MM-DD HH:mm:ss' , labelWidth: '110px'},
{ label: '状态', prop: 'status', type: 'radio' as const},
{ label: '排序', prop: 'sort', type: 'number' as const, placeholder: '请输入排序' },
]

14
src/views/trade/group/rules.ts Normal file
View File

@ -0,0 +1,14 @@
import type { FormRules } from 'element-plus'
export const rules = (): FormRules => {
return {
tradeGroupName: [
{ required: true, message: '请输入交易组名称', trigger: ['blur'] }
],
winterTime: [
{ required: true, message: '请选择冬季交易时间', trigger: ['change'] }
],
summerTime: [
{ required: true, message: '请选择夏季交易时间', trigger: ['change'] }
],
}
}

3
src/views/trade/time/index.vue
View File

@ -1,3 +0,0 @@
<template>
<h1>交易时间</h1>
</template>