交易组时间，节假日时间静态页面

src/components/layout/Sidebar.vue

@@ -175,12 +175,12 @@ const staticMenuList = ref<ElMenuItem[]>(
                     path: '/trade/tradeSoftware', // index="4-5"
                     icon: ''
                 },
-                // {
+                {
-                //     id: 43,
+                    id: 46,
-                //     label: '交易时间',
+                    label: '交易时间',
-                //     path: '/trade/time', // index="4-3"
+                    path: '/trade/time', // index="4-3"
-                //     icon: ''
+                    icon: ''
-                // }
+                }
             ]
         },
         // 公告管理

src/router/index.ts

@@ -173,14 +173,14 @@ const routes = [
               title: '交易组', // 左侧菜单显示的标题
             }
           },
-          // {
+          {
-          //   path: 'time',
+            path: 'time',
-          //   name: 'Time',
+            name: 'Time',
-          //   component: () => import('@/views/trade/time/index.vue'),
+            component: () => import('@/views/trade/time/index.vue'),
-          //   meta: {
+            meta: {
-          //     title: '交易时间', // 左侧菜单显示的标题
+              title: '交易时间', // 左侧菜单显示的标题
-          //   }
+            }
-          // },
+          },
           {
             path: 'positionStat',
             name: 'PositionStat',

src/views/trade/group/index.vue

@@ -4,35 +4,59 @@
             <el-button type="primary" @click="handleAdd">添加</el-button>
         </el-form-item>
         <!-- 表格 -->
-        <TradeGroupTable :table-data="tradeGroupTree" :columns="tradeGroupTableColumnsOptions" row-key="id">
+        <div class="table-box">
-            <template #tradeTime="{ row }">
+
-                冬:开仓{{ row.winterStartTime }} - 平仓{{ row.winterEndTime }}<br />
+            <table>
-                <hr>
+                <tr>
-                夏:开仓{{ row.summerStartTime }} - 平仓{{ row.summerEndTime }}
+                    <td rowspan="2"><el-input /></td>
-            </template>
+                    <td>夏令时</td>
-            <template #status="{ row }">
+                    <td><el-input /></td>
-                <el-switch :model-value="row.status === 1" :active-value="true" :inactive-value="false" />
+                    <td>月</td>
-            </template>
+                    <td><el-input /></td>
-            <template #action="{ row }">
+                    <td>周</td>
-                <el-button type="primary" size="small" @click="handleEdit(row)">编辑</el-button>
+                    <td><el-input /></td>
-                <el-button type="danger" size="small" @click="handleDelete(row)">删除</el-button>
+                    <td>日</td>
-            </template>
+                    <td>交易时间</td>
-        </TradeGroupTable>
+                    <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"
+    </div>
-        @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'
@@ -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 {
+/* 给 table 及所有 td 加边框 */
-    :deep(.el-form) {
+table {
-        .el-form-item {
+    border-collapse: collapse;
-            flex: none;
+    width: 100%;
+    table-layout: auto; /* 宽度自适应内容 */
 
-            .el-select {
+    td {
-                width: 160px;
+        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>

src/views/trade/time/index.vue

@@ -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>