交易组时间页面
This commit is contained in:
parent
69d364d18b
commit
aa66744970
|
|
@ -7,15 +7,15 @@ export async function getGroupListApi(): Promise<any> {
|
|||
|
||||
// 创建交易组
|
||||
export async function addGroupApi(params: any): Promise<any> {
|
||||
return request.post<any>('/contractVariety/createGroup', {...params})
|
||||
return request.post<any>('/contractVariety/createGroup', { ...params })
|
||||
}
|
||||
|
||||
//编辑交易组
|
||||
export async function editGroupApi(params: any): Promise<any> {
|
||||
return request.post<any>('/contractVariety/editGroup', {...params})
|
||||
return request.post<any>('/contractVariety/editGroup', { ...params })
|
||||
}
|
||||
|
||||
// 删除交易组
|
||||
export async function deleteGroupApi(params: any): Promise<any> {
|
||||
return request.post<any>('/contractVariety/delGroup', {...params})
|
||||
}
|
||||
return request.post<any>('/contractVariety/delGroup', { ...params })
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
|
|
@ -1,194 +1,328 @@
|
|||
<template>
|
||||
<div class="trade-group">
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleAdd">添加</el-button>
|
||||
</el-form-item>
|
||||
<!-- 表格 -->
|
||||
<div class="table-box">
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td rowspan="2"><el-input /></td>
|
||||
<td>夏令时</td>
|
||||
<td><el-input /></td>
|
||||
<td>月</td>
|
||||
<td><el-input /></td>
|
||||
<td>周</td>
|
||||
<td><el-input /></td>
|
||||
<td>日</td>
|
||||
<td>交易时间</td>
|
||||
<td>
|
||||
上午：<el-time-picker style="width: 160px;" format="HH:mm" value-format="HH:mm" :picker-options="{
|
||||
selectableRange: '09:00:00 - 18:00:00'
|
||||
}" is-range />
|
||||
下午：<el-time-picker style="width: 160px;" format="HH:mm" value-format="HH:mm" :picker-options="{
|
||||
selectableRange: '09:00:00 - 18:00:00'
|
||||
}" is-range />
|
||||
</td>
|
||||
<td rowspan="2">
|
||||
<el-button type="primary">确认</el-button>
|
||||
<el-button type="danger">取消</el-button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>冬令时</td>
|
||||
<td><el-input /></td>
|
||||
<td>月</td>
|
||||
<td><el-input /></td>
|
||||
<td>周</td>
|
||||
<td><el-input /></td>
|
||||
<td>日</td>
|
||||
<td>交易时间</td>
|
||||
<td>
|
||||
上午：<el-time-picker style="width: 160px;" format="HH:mm" value-format="HH:mm" :picker-options="{
|
||||
selectableRange: '09:00:00 - 18:00:00'
|
||||
}" is-range />
|
||||
下午：<el-time-picker style="width: 160px;" format="HH:mm" value-format="HH:mm" :picker-options="{
|
||||
selectableRange: '09:00:00 - 18:00:00'
|
||||
}" is-range />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="trade-group">
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="addTableItem">添加</el-button>
|
||||
</el-form-item>
|
||||
<!-- 表格 -->
|
||||
<div class="table-box">
|
||||
<table>
|
||||
<template v-for="(item, index) in tradeGroupTree" :key="item.id">
|
||||
<tr>
|
||||
<td>顺序</td>
|
||||
<td rowspan="2">
|
||||
<el-input v-if="item.editStatus" v-model="item.name" />
|
||||
<span v-else>{{ item.name }}</span>
|
||||
</td>
|
||||
<td>夏令时</td>
|
||||
<td>
|
||||
<el-input v-if="item.editStatus" v-model="item.x_m" />
|
||||
<span v-else>{{ item.x_m }}</span>
|
||||
</td>
|
||||
<td>月</td>
|
||||
<td>
|
||||
<el-input v-if="item.editStatus" v-model="item.x_w" />
|
||||
<span v-else>{{ item.x_w }}</span>
|
||||
</td>
|
||||
<td>周</td>
|
||||
<td>
|
||||
<el-input v-if="item.editStatus" v-model="item.x_d" />
|
||||
<span v-else>{{ item.x_d }}</span>
|
||||
</td>
|
||||
<td>日</td>
|
||||
<td>交易时间</td>
|
||||
<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="{
|
||||
selectableRange: '09:00:00 - 18:00:00',
|
||||
}"
|
||||
is-range
|
||||
/>
|
||||
</template>
|
||||
<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">
|
||||
<span v-for="(time, timeIndex) in item?.x_time_list" :key="timeIndex">
|
||||
{{ time[0] }} - {{ time[1] }}
|
||||
</span>
|
||||
</template>
|
||||
</template>
|
||||
</td>
|
||||
<td rowspan="2">
|
||||
<el-button type="primary" v-if="!item.editStatus" @click="item.editStatus = true"
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-button type="danger" v-if="!item.editStatus" @click="deleteGroup(item.id)"
|
||||
>删除</el-button
|
||||
>
|
||||
<el-button type="primary" v-if="item.editStatus" @click="submitItem(index)"
|
||||
>确认</el-button
|
||||
>
|
||||
<el-button type="danger" v-if="item.editStatus" @click="item.editStatus = false"
|
||||
>取消</el-button
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ index + 1 }}</td>
|
||||
<td>冬令时</td>
|
||||
<td>
|
||||
<el-input v-if="item.editStatus" v-model="item.d_m" />
|
||||
<span v-else>{{ item.d_m }}</span>
|
||||
</td>
|
||||
<td>月</td>
|
||||
<td>
|
||||
<el-input v-if="item.editStatus" v-model="item.d_w" />
|
||||
<span v-else>{{ item.d_w }}</span>
|
||||
</td>
|
||||
<td>周</td>
|
||||
<td>
|
||||
<el-input v-if="item.editStatus" v-model="item.d_d" />
|
||||
<span v-else>{{ item.d_d }}</span>
|
||||
</td>
|
||||
<td>日</td>
|
||||
<td>交易时间</td>
|
||||
<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="{
|
||||
selectableRange: '09:00:00 - 18:00:00',
|
||||
}"
|
||||
is-range
|
||||
/>
|
||||
</template>
|
||||
<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">
|
||||
<span v-for="(time, timeIndex) in item?.d_time_list" :key="timeIndex">
|
||||
{{ time[0] }} - {{ time[1] }}
|
||||
</span>
|
||||
</template>
|
||||
</template>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// 配置以及表单验证
|
||||
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'
|
||||
import {
|
||||
getGroupListApi,
|
||||
addGroupApi,
|
||||
editGroupApi,
|
||||
deleteGroupApi,
|
||||
} from '@/api/modules/trade/group'
|
||||
import {ElMessageBox} from 'element-plus'
|
||||
|
||||
/**
|
||||
* @description: 定义表格数据
|
||||
*/
|
||||
const tradeGroupTree = ref([])
|
||||
const tradeGroupTableColumnsOptions = ref(tableColumns)
|
||||
const tradeGroupTree = ref<any[]>([])
|
||||
|
||||
/**
|
||||
* @description: 定义弹窗数据
|
||||
*/
|
||||
const dialogVisible = ref(false)
|
||||
const dialogTitle = ref('')
|
||||
const dialogType = ref('')
|
||||
const addTableItem = () => {
|
||||
tradeGroupTree.value.unshift({
|
||||
name: '',
|
||||
x_m: '',
|
||||
x_w: '',
|
||||
x_d: '',
|
||||
x_time_list: [[]],
|
||||
d_m: '',
|
||||
d_w: '',
|
||||
d_d: '',
|
||||
d_time_list: [[]],
|
||||
editStatus: true,
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: 定义弹窗表格数据
|
||||
*/
|
||||
const tradeGroupForm = ref({
|
||||
// 交易组名称
|
||||
tradeGroupName: '',
|
||||
// 交易所ID
|
||||
exchangeId: '',
|
||||
// 状态
|
||||
status: 1,
|
||||
// 冬季交易时间
|
||||
winterTime: [],
|
||||
// 夏季交易时间
|
||||
summerTime: [],
|
||||
// 排序
|
||||
sort: 0,
|
||||
// 主键ID
|
||||
id: '',
|
||||
})
|
||||
const tradeGroupFormRef = ref()
|
||||
const addTime = (idx: number, key: string) => {
|
||||
if (tradeGroupTree.value[idx][key].length >= 4) return ElMessage.warning('最多添加4个时间段')
|
||||
tradeGroupTree.value[idx][key].push([])
|
||||
}
|
||||
|
||||
const submitItem = (idx: number) => {
|
||||
const submitObj = {
|
||||
name: tradeGroupTree.value[idx].name,
|
||||
x_m: tradeGroupTree.value[idx].x_m,
|
||||
x_w: tradeGroupTree.value[idx].x_w,
|
||||
x_d: tradeGroupTree.value[idx].x_d,
|
||||
d_m: tradeGroupTree.value[idx].d_m,
|
||||
d_w: tradeGroupTree.value[idx].d_w,
|
||||
d_d: tradeGroupTree.value[idx].d_d,
|
||||
x_start_time1: tradeGroupTree.value[idx].x_time_list[0]?.[0] || null,
|
||||
x_end_time1: tradeGroupTree.value[idx].x_time_list[0]?.[1] || null,
|
||||
x_start_time2: tradeGroupTree.value[idx].x_time_list[1]?.[0] || null,
|
||||
x_end_time2: tradeGroupTree.value[idx].x_time_list[1]?.[1] || null,
|
||||
x_start_time3: tradeGroupTree.value[idx].x_time_list[2]?.[0] || null,
|
||||
x_end_time3: tradeGroupTree.value[idx].x_time_list[2]?.[1] || null,
|
||||
x_start_time4: tradeGroupTree.value[idx].x_time_list[3]?.[0] || null,
|
||||
x_end_time4: tradeGroupTree.value[idx].x_time_list[3]?.[1] || null,
|
||||
d_start_time1: tradeGroupTree.value[idx].d_time_list[0]?.[0] || null,
|
||||
d_end_time1: tradeGroupTree.value[idx].d_time_list[0]?.[1] || null,
|
||||
d_start_time2: tradeGroupTree.value[idx].d_time_list[1]?.[0] || null,
|
||||
d_end_time2: tradeGroupTree.value[idx].d_time_list[1]?.[1] || null,
|
||||
d_start_time3: tradeGroupTree.value[idx].d_time_list[2]?.[0] || null,
|
||||
d_end_time3: tradeGroupTree.value[idx].d_time_list[2]?.[1] || null,
|
||||
d_start_time4: tradeGroupTree.value[idx].d_time_list[3]?.[0] || null,
|
||||
d_end_time4: tradeGroupTree.value[idx].d_time_list[3]?.[1] || null,
|
||||
}
|
||||
if (tradeGroupTree.value[idx].id) {
|
||||
editGroupApi({
|
||||
...submitObj,
|
||||
id: tradeGroupTree.value[idx].id,
|
||||
sort: tradeGroupTree.value[idx].sort,
|
||||
}).then((res) => {
|
||||
getGroupList()
|
||||
})
|
||||
} else {
|
||||
addGroupApi({ ...submitObj }).then((res) => {
|
||||
getGroupList()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const deleteGroup = (id: number) => {
|
||||
ElMessageBox.confirm('确认删除吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
}).then(() => {
|
||||
deleteGroupApi({ id }).then(() => {
|
||||
getGroupList()
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: 定义公共数据处理方法
|
||||
*/
|
||||
/**
|
||||
* @description: 定义公共请求数据方法
|
||||
*/
|
||||
const getGroupList = async () => {
|
||||
try {
|
||||
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,
|
||||
}))
|
||||
data.forEach((item: any) => {
|
||||
item.editStatus = false
|
||||
item.x_time_list = []
|
||||
if (item.x_start_time1 && item.x_end_time1) {
|
||||
item.x_time_list.push([item.x_start_time1, item.x_end_time1])
|
||||
}
|
||||
if (item.x_start_time2 && item.x_end_time2) {
|
||||
item.x_time_list.push([item.x_start_time2, item.x_end_time2])
|
||||
}
|
||||
if (item.x_start_time3 && item.x_end_time3) {
|
||||
item.x_time_list.push([item.x_start_time3, item.x_end_time3])
|
||||
}
|
||||
if (item.x_start_time4 && item.x_end_time4) {
|
||||
item.x_time_list.push([item.x_start_time4, item.x_end_time4])
|
||||
}
|
||||
|
||||
item.d_time_list = []
|
||||
if (item.d_start_time1 && item.d_end_time1) {
|
||||
item.d_time_list.push([item.d_start_time1, item.d_end_time1])
|
||||
}
|
||||
if (item.d_start_time2 && item.d_end_time2) {
|
||||
item.d_time_list.push([item.d_start_time2, item.d_end_time2])
|
||||
}
|
||||
if (item.d_start_time3 && item.d_end_time3) {
|
||||
item.d_time_list.push([item.d_start_time3, item.d_end_time3])
|
||||
}
|
||||
if (item.d_start_time4 && item.d_end_time4) {
|
||||
item.d_time_list.push([item.d_start_time4, item.d_end_time4])
|
||||
}
|
||||
})
|
||||
console.log('data', data)
|
||||
tradeGroupTree.value = data
|
||||
} catch (e: any) {
|
||||
console.log(e)
|
||||
ElMessage.error(e.msg)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: 页面加载完成需要请求的数据
|
||||
*/
|
||||
onMounted(() => {
|
||||
getGroupList()
|
||||
getGroupList()
|
||||
})
|
||||
|
||||
const handleAdd = () => {
|
||||
dialogVisible.value = true
|
||||
dialogTitle.value = '添加交易组'
|
||||
dialogType.value = 'add'
|
||||
tradeGroupForm.value = {
|
||||
tradeGroupName: '',
|
||||
winterTime: [],
|
||||
summerTime: [],
|
||||
status: 1,
|
||||
sort: 0,
|
||||
id: '',
|
||||
} as any
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/* 给 table 及所有 td 加边框 */
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
table-layout: auto; /* 宽度自适应内容 */
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
table-layout: auto; /* 宽度自适应内容 */
|
||||
|
||||
td {
|
||||
border: 1px solid #dcdfe6;
|
||||
padding: 4px 8px; /* 内边距缩小 */
|
||||
text-align: center;
|
||||
font-size: 12px; /* 文字变小 */
|
||||
white-space: nowrap; /* 文字不换行 */
|
||||
vertical-align: middle; /* 垂直居中 */
|
||||
.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; /* 内边距缩小 */
|
||||
text-align: center;
|
||||
font-size: 12px; /* 文字变小 */
|
||||
white-space: nowrap; /* 文字不换行 */
|
||||
vertical-align: middle; /* 垂直居中 */
|
||||
|
||||
/* 时间选择器容器：两个选择器横排不换行 */
|
||||
:deep(.el-time-picker) {
|
||||
display: inline-block;
|
||||
/* 时间选择器容器：两个选择器横排不换行 */
|
||||
:deep(.el-time-picker) {
|
||||
display: inline-block;
|
||||
|
||||
.el-range-editor {
|
||||
width: 100px; /* 缩小时间选择器宽度 */
|
||||
font-size: 12px;
|
||||
}
|
||||
.el-range-input {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
/* input 输入框也缩小 */
|
||||
:deep(.el-input) {
|
||||
width: 60px;
|
||||
|
||||
.el-input__inner {
|
||||
font-size: 12px;
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 按钮缩小 */
|
||||
:deep(.el-button) {
|
||||
padding: 5px 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.el-range-editor {
|
||||
width: 100px; /* 缩小时间选择器宽度 */
|
||||
font-size: 12px;
|
||||
}
|
||||
.el-range-input {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
/* input 输入框也缩小 */
|
||||
:deep(.el-input) {
|
||||
width: 60px;
|
||||
|
||||
.el-input__inner {
|
||||
font-size: 12px;
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 按钮缩小 */
|
||||
:deep(.el-button) {
|
||||
padding: 5px 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,40 +0,0 @@
|
|||
/**
|
||||
* @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: '请输入排序' },
|
||||
]
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
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'] }
|
||||
],
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue