交易组时间页面

src/api/modules/trade/group.ts

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

src/views/trade/group/index.vue

@@ -1,125 +1,263 @@
 <template>
   <div class="trade-group">
     <el-form-item>
-            <el-button type="primary" @click="handleAdd">添加</el-button>
+      <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 rowspan="2"><el-input /></td>
+            <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 /></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 /></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 /></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>
+            <td class="time-picker-box">
-                        上午：<el-time-picker style="width: 160px;" format="HH:mm" value-format="HH:mm" :picker-options="{
+              <template v-if="item.editStatus">
-                            selectableRange: '09:00:00 - 18:00:00'
+                <template v-if="item?.x_time_list">
-                        }" is-range />
+                  <el-time-picker
-                        下午：<el-time-picker style="width: 160px;" format="HH:mm" value-format="HH:mm" :picker-options="{
+                    v-for="(time, timeIndex) in item?.x_time_list"
-                            selectableRange: '09:00:00 - 18:00:00'
+                    :key="timeIndex"
-                        }" is-range />
+                    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">确认</el-button>
+              <el-button type="primary" v-if="!item.editStatus" @click="item.editStatus = true"
-                        <el-button type="danger">取消</el-button>
+                >编辑</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 /></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 /></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 /></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>
+            <td class="time-picker-box">
-                        上午：<el-time-picker style="width: 160px;" format="HH:mm" value-format="HH:mm" :picker-options="{
+              <template v-if="item.editStatus">
-                            selectableRange: '09:00:00 - 18:00:00'
+                <template v-if="item?.d_time_list">
-                        }" is-range />
+                  <el-time-picker
-                        下午：<el-time-picker style="width: 160px;" format="HH:mm" value-format="HH:mm" :picker-options="{
+                    v-for="(time, timeIndex) in item?.d_time_list"
-                            selectableRange: '09:00:00 - 18:00:00'
+                    :key="timeIndex"
-                        }" is-range />
+                    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 tradeGroupTree = ref<any[]>([])
-const tradeGroupTableColumnsOptions = ref(tableColumns)
 
-/**
+const addTableItem = () => {
- * @description: 定义弹窗数据
+  tradeGroupTree.value.unshift({
- */
+    name: '',
-const dialogVisible = ref(false)
+    x_m: '',
-const dialogTitle = ref('')
+    x_w: '',
-const dialogType = ref('')
+    x_d: '',
+    x_time_list: [[]],
+    d_m: '',
+    d_w: '',
+    d_d: '',
+    d_time_list: [[]],
+    editStatus: true,
+  })
+}
 
-/**
+const addTime = (idx: number, key: string) => {
- * @description: 定义弹窗表格数据
+  if (tradeGroupTree.value[idx][key].length >= 4) return ElMessage.warning('最多添加4个时间段')
- */
+  tradeGroupTree.value[idx][key].push([])
-const tradeGroupForm = ref({
+}
-    // 交易组名称
+
-    tradeGroupName: '',
+const submitItem = (idx: number) => {
-    // 交易所ID
+  const submitObj = {
-    exchangeId: '',
+    name: tradeGroupTree.value[idx].name,
-    // 状态
+    x_m: tradeGroupTree.value[idx].x_m,
-    status: 1,
+    x_w: tradeGroupTree.value[idx].x_w,
-    // 冬季交易时间
+    x_d: tradeGroupTree.value[idx].x_d,
-    winterTime: [],
+    d_m: tradeGroupTree.value[idx].d_m,
-    // 夏季交易时间
+    d_w: tradeGroupTree.value[idx].d_w,
-    summerTime: [],
+    d_d: tradeGroupTree.value[idx].d_d,
-    // 排序
+    x_start_time1: tradeGroupTree.value[idx].x_time_list[0]?.[0] || null,
-    sort: 0,
+    x_end_time1: tradeGroupTree.value[idx].x_time_list[0]?.[1] || null,
-    // 主键ID
+    x_start_time2: tradeGroupTree.value[idx].x_time_list[1]?.[0] || null,
-    id: '',
+    x_end_time2: tradeGroupTree.value[idx].x_time_list[1]?.[1] || null,
-})
+    x_start_time3: tradeGroupTree.value[idx].x_time_list[2]?.[0] || null,
-const tradeGroupFormRef = ref()
+    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) => ({
+    data.forEach((item: any) => {
-        id: item.id,
+      item.editStatus = false
-        tradeGroupName: item.name,
+      item.x_time_list = []
-        status: item.status,
+      if (item.x_start_time1 && item.x_end_time1) {
-        // 冬季交易时间
+        item.x_time_list.push([item.x_start_time1, item.x_end_time1])
-        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'),
+      if (item.x_start_time2 && item.x_end_time2) {
-        // 夏季交易时间
+        item.x_time_list.push([item.x_start_time2, item.x_end_time2])
-        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'),
+      if (item.x_start_time3 && item.x_end_time3) {
-        // 排序
+        item.x_time_list.push([item.x_start_time3, item.x_end_time3])
-        sort: item.sort,
+      }
-    }))
+      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)
+  }
 }
 
 /**
@@ -128,21 +266,6 @@ const getGroupList = async () => {
 onMounted(() => {
   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">
@@ -152,7 +275,19 @@ table {
   width: 100%;
   table-layout: auto; /* 宽度自适应内容 */
 
+  .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;
@@ -189,6 +324,5 @@ table {
       font-size: 12px;
     }
   }
-
 }
 </style>

src/views/trade/group/options.ts

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

src/views/trade/group/rules.ts

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