交易组时间，节假日时间静态页面
This commit is contained in:
parent
bffaab9075
commit
69d364d18b
|
|
@ -175,12 +175,12 @@ const staticMenuList = ref<ElMenuItem[]>(
|
|||
path: '/trade/tradeSoftware', // index="4-5"
|
||||
icon: ''
|
||||
},
|
||||
// {
|
||||
// id: 43,
|
||||
// label: '交易时间',
|
||||
// path: '/trade/time', // index="4-3"
|
||||
// icon: ''
|
||||
// }
|
||||
{
|
||||
id: 46,
|
||||
label: '交易时间',
|
||||
path: '/trade/time', // index="4-3"
|
||||
icon: ''
|
||||
}
|
||||
]
|
||||
},
|
||||
// 公告管理
|
||||
|
|
|
|||
|
|
@ -173,14 +173,14 @@ const routes = [
|
|||
title: '交易组', // 左侧菜单显示的标题
|
||||
}
|
||||
},
|
||||
// {
|
||||
// path: 'time',
|
||||
// name: 'Time',
|
||||
// component: () => import('@/views/trade/time/index.vue'),
|
||||
// meta: {
|
||||
// title: '交易时间', // 左侧菜单显示的标题
|
||||
// }
|
||||
// },
|
||||
{
|
||||
path: 'time',
|
||||
name: 'Time',
|
||||
component: () => import('@/views/trade/time/index.vue'),
|
||||
meta: {
|
||||
title: '交易时间', // 左侧菜单显示的标题
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'positionStat',
|
||||
name: 'PositionStat',
|
||||
|
|
|
|||
|
|
@ -4,35 +4,59 @@
|
|||
<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 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>
|
||||
<!-- 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>
|
||||
|
||||
</div>
|
||||
|
||||
</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'
|
||||
|
|
@ -73,12 +97,7 @@ const tradeGroupForm = ref({
|
|||
// 主键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: 定义公共数据处理方法
|
||||
|
|
@ -123,85 +142,53 @@ const handleAdd = () => {
|
|||
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;
|
||||
/* 给 table 及所有 td 加边框 */
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
table-layout: auto; /* 宽度自适应内容 */
|
||||
|
||||
.el-select {
|
||||
width: 160px;
|
||||
td {
|
||||
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;
|
||||
|
||||
.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,5 +1,177 @@
|
|||
<template>
|
||||
<div class="trade-time">
|
||||
交易时间
|
||||
<div class="trade-group">
|
||||
<el-form-item>
|
||||
交易系统时间设置
|
||||
<el-button style="margin-left: 18px;" type="primary" @click="handleAdd">添加</el-button>
|
||||
<el-button style="margin-left: 18px;" type="danger" @click="handleDel">删除</el-button>
|
||||
</el-form-item>
|
||||
<!-- 表格 -->
|
||||
<div class="table-box">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>名称</th>
|
||||
<th>休市时间</th>
|
||||
<th>休市市场</th>
|
||||
<th>备注</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<el-input style="width: 80px;"/>
|
||||
</td>
|
||||
<td>
|
||||
<el-date-picker type="datetimerange" start-placeholder="Start date"
|
||||
end-placeholder="End date" format="YYYY-MM-DD HH:mm:ss"
|
||||
date-format="YYYY-MM-DD HH:mm:ss" time-format="YYYY-MM-DD HH:mm:ss" />
|
||||
</td>
|
||||
<td>
|
||||
<el-select multiple placeholder="Select" style="width: 240px">
|
||||
<el-option :label="1" :value="1" />
|
||||
<el-option :label="2" :value="2" />
|
||||
<el-option :label="3" :value="3" />
|
||||
<el-option :label="4" :value="4" />
|
||||
<el-option :label="5" :value="5" />
|
||||
</el-select>
|
||||
</td>
|
||||
<td><el-input style="width: 250px;"/></td>
|
||||
<td>
|
||||
<el-button type="primary" @click="handleAdd">确认</el-button>
|
||||
<el-button type="danger" @click="handleDel">取消</el-button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// 配置以及表单验证
|
||||
|
||||
// 接口
|
||||
|
||||
/**
|
||||
* @description: 定义表格数据
|
||||
*/
|
||||
|
||||
/**
|
||||
* @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: '',
|
||||
})
|
||||
|
||||
|
||||
/**
|
||||
* @description: 页面加载完成需要请求的数据
|
||||
*/
|
||||
onMounted(() => {
|
||||
})
|
||||
|
||||
const handleAdd = () => {
|
||||
dialogVisible.value = true
|
||||
dialogTitle.value = '添加交易组'
|
||||
dialogType.value = 'add'
|
||||
tradeGroupForm.value = {
|
||||
tradeGroupName: '',
|
||||
winterTime: [],
|
||||
summerTime: [],
|
||||
status: 1,
|
||||
sort: 0,
|
||||
id: '',
|
||||
} as any
|
||||
}
|
||||
|
||||
const handleDel = () => {
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/* 给 table 及所有 td 加边框 */
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
table-layout: auto;
|
||||
|
||||
/* 宽度自适应内容 */
|
||||
th {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
height: 48px;
|
||||
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;
|
||||
|
||||
.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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue