提交

package.json

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

pnpm-lock.yaml

@@ -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:
+  dayjs@1.11.20:
-    resolution: {integrity: sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw==}
+    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)

src/api/modules/trade/group.ts

@@ -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})
+}

src/components/common/Form.vue

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

src/views/trade/group/index.vue

@@ -1,3 +1,207 @@
 <template>
-    <h1>交易组</h1>
+    <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>

src/views/trade/group/options.ts

@@ -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: '请输入排序' },
+]

src/views/trade/group/rules.ts

@@ -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'] }
+        ],
+    }
+}

src/views/trade/time/index.vue

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