From 59f9891a5dd635e46be79def53421ca3936f8b6e Mon Sep 17 00:00:00 2001
From: aaron <>
Date: Mon, 3 Mar 2025 21:30:13 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=97=B6=E6=AE=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Dockerfile                          |   4 +
 src/layouts/BasicLayout.vue         |   8 +
 src/router/index.js                 |   5 +
 src/views/system/TimePeriodList.vue | 399 ++++++++++++++++++++++++++++
 4 files changed, 416 insertions(+)
 create mode 100644 src/views/system/TimePeriodList.vue

diff --git a/Dockerfile b/Dockerfile
index cac82cd..b5fc669 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -3,6 +3,10 @@ FROM node:16 AS builder
 
 WORKDIR /app
 
+# 设置环境变量
+ARG NODE_ENV
+ENV NODE_ENV=${NODE_ENV}
+
 # 复制 package.json 和 package-lock.json
 COPY package*.json ./
 
diff --git a/src/layouts/BasicLayout.vue b/src/layouts/BasicLayout.vue
index afc7fe7..d8731db 100644
--- a/src/layouts/BasicLayout.vue
+++ b/src/layouts/BasicLayout.vue
@@ -109,6 +109,9 @@
           <a-menu-item key="system-config">
             <router-link to="/system/config">系统配置</router-link>
           </a-menu-item>
+          <a-menu-item key="system-time-periods">
+            <router-link to="/system/time-periods">时段配置</router-link>
+          </a-menu-item>
         </a-sub-menu>
       </a-menu>
     </a-layout-sider>
@@ -333,6 +336,11 @@ export default defineComponent({
             key: 'system-config',
             title: '系统配置',
             path: '/system/config'
+          },
+          {
+            key: 'system-time-periods',
+            title: '时段配置',
+            path: '/system/time-periods'
           }
         ]
       },
diff --git a/src/router/index.js b/src/router/index.js
index fed9c09..3376c1a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -99,6 +99,11 @@ const routes = [
         path: 'config',
         component: () => import('@/views/system/ConfigList.vue'),
         meta: { title: '系统配置' }
+      },
+      {
+        path: 'time-periods',
+        component: () => import('@/views/system/TimePeriodList.vue'),
+        meta: { title: '时段配置' }
       }
     ]
   },
diff --git a/src/views/system/TimePeriodList.vue b/src/views/system/TimePeriodList.vue
new file mode 100644
index 0000000..f1e15e2
--- /dev/null
+++ b/src/views/system/TimePeriodList.vue
@@ -0,0 +1,399 @@
+<template>
+  <page-container>
+    <div class="time-period-list">
+      <div class="table-header">
+        <h1>时段配置</h1>
+        <a-button type="primary" @click="showAddModal">
+          新增时段
+        </a-button>
+      </div>
+
+      <a-table
+        :columns="columns"
+        :data-source="tableData"
+        :pagination="pagination"
+        :loading="loading"
+        @change="handleTableChange"
+        row-key="id"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'time_range'">
+            <span>{{ formatTime(record.from_time) }} ~ {{ formatTime(record.to_time) }}</span>
+          </template>
+          <template v-if="column.key === 'action'">
+            <a-space>
+              <a @click="handleEdit(record)">编辑</a>
+              <a-popconfirm
+                title="确定要删除这个时段吗？"
+                @confirm="handleDelete(record)"
+              >
+                <a class="danger">删除</a>
+              </a-popconfirm>
+            </a-space>
+          </template>
+        </template>
+      </a-table>
+
+      <!-- 添加/编辑时段模态框 -->
+      <a-modal
+        v-model:visible="modalVisible"
+        :title="isEdit ? '编辑时段' : '新增时段'"
+        @ok="handleSubmit"
+        @cancel="handleCancel"
+        :confirmLoading="submitting"
+      >
+        <a-form
+          ref="formRef"
+          :model="formState"
+          :rules="rules"
+          layout="vertical"
+        >
+          <a-form-item
+            label="时段名称"
+            name="name"
+            :rules="[{ required: true, message: '请输入时段名称' }]"
+          >
+            <a-input 
+              v-model:value="formState.name"
+              placeholder="请输入时段名称，如：上午"
+              :maxLength="50"
+            />
+          </a-form-item>
+          
+          <a-row :gutter="16">
+            <a-col :span="12">
+              <a-form-item
+                label="开始时间"
+                name="from_time"
+                :rules="[{ required: true, message: '请选择开始时间' }]"
+              >
+                <a-time-picker
+                  v-model:value="formState.from_time"
+                  format="HH:mm"
+                  style="width: 100%"
+                  placeholder="选择开始时间"
+                  @change="handleFromTimeChange"
+                  :minute-step="5"
+                  :show-now="false"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item
+                label="结束时间"
+                name="to_time"
+                :rules="[{ required: true, message: '请选择结束时间' }]"
+              >
+                <a-time-picker
+                  v-model:value="formState.to_time"
+                  format="HH:mm"
+                  style="width: 100%"
+                  placeholder="选择结束时间"
+                  :disabled-time="disabledToTime"
+                  :minute-step="5"
+                  :show-now="false"
+                />
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </a-form>
+      </a-modal>
+    </div>
+  </page-container>
+</template>
+
+<script>
+import { defineComponent, ref, onMounted, watch } from 'vue'
+import { 
+  message, 
+  Input, 
+  Row,
+  Col,
+  TimePicker
+} from 'ant-design-vue'
+import PageContainer from '@/components/PageContainer.vue'
+import dayjs from 'dayjs'
+import request from '@/utils/request'
+
+export default defineComponent({
+  components: {
+    PageContainer,
+    AInput: Input,
+    ARow: Row,
+    ACol: Col,
+    ATimePicker: TimePicker
+  },
+  
+  setup() {
+    const loading = ref(false)
+    const tableData = ref([])
+    
+    const pagination = ref({
+      current: 1,
+      pageSize: 10,
+      total: 0,
+      showSizeChanger: true,
+      showTotal: (total) => `共 ${total} 条记录`
+    })
+
+    const columns = [
+      {
+        title: 'ID',
+        dataIndex: 'id',
+        key: 'id',
+        width: 60,
+        align: 'center'
+      },
+      {
+        title: '时段名称',
+        dataIndex: 'name',
+        key: 'name',
+        width: 150
+      },
+      {
+        title: '时间范围',
+        key: 'time_range',
+        width: 200
+      },
+      {
+        title: '操作',
+        key: 'action',
+        width: 120,
+        fixed: 'right'
+      }
+    ]
+
+    // 获取列表数据
+    const fetchData = async () => {
+      try {
+        loading.value = true
+        const res = await request.get('/api/time-periods')
+        if (res.code === 200) {
+          tableData.value = res.data
+          pagination.value.total = res.data.length
+        } else {
+          message.error(res.message || '获取数据失败')
+        }
+      } catch (error) {
+        console.error('获取时段配置列表失败:', error)
+        message.error('获取数据失败')
+      } finally {
+        loading.value = false
+      }
+    }
+
+    // 处理表格分页变化
+    const handleTableChange = (pag) => {
+      pagination.value.current = pag.current
+      pagination.value.pageSize = pag.pageSize
+      fetchData()
+    }
+
+    const modalVisible = ref(false)
+    const submitting = ref(false)
+    const isEdit = ref(false)
+    const currentId = ref(null)
+    const formRef = ref(null)
+    
+    const formState = ref({
+      name: '',
+      from_time: null,
+      to_time: null
+    })
+    
+    const rules = {
+      name: [
+        { required: true, message: '请输入时段名称' }
+      ],
+      from_time: [
+        { required: true, message: '请选择开始时间' }
+      ],
+      to_time: [
+        { required: true, message: '请选择结束时间' },
+        { 
+          validator: (rule, value) => {
+            if (formState.value.from_time && value) {
+              const fromTime = dayjs(formState.value.from_time)
+              const toTime = dayjs(value)
+              if (toTime.isBefore(fromTime)) {
+                return Promise.reject('结束时间不能早于开始时间')
+              }
+            }
+            return Promise.resolve()
+          }
+        }
+      ]
+    }
+    
+    // 处理开始时间变化
+    const handleFromTimeChange = (time) => {
+      // 如果结束时间早于开始时间，清空结束时间
+      if (formState.value.to_time && dayjs(time).isAfter(dayjs(formState.value.to_time))) {
+        formState.value.to_time = null
+      }
+    }
+    
+    // 限制结束时间选择
+    const disabledToTime = () => {
+      if (!formState.value.from_time) return {}
+      
+      const fromTime = dayjs(formState.value.from_time)
+      const fromHour = fromTime.hour()
+      const fromMinute = fromTime.minute()
+      
+      return {
+        disabledHours: () => Array.from({ length: fromHour }, (_, i) => i),
+        disabledMinutes: (selectedHour) => {
+          if (selectedHour === fromHour) {
+            return Array.from({ length: fromMinute }, (_, i) => i)
+          }
+          return []
+        }
+      }
+    }
+    
+    // 显示新建模态框
+    const showAddModal = () => {
+      isEdit.value = false
+      currentId.value = null
+      formState.value = {
+        name: '',
+        from_time: null,
+        to_time: null
+      }
+      modalVisible.value = true
+    }
+
+    // 显示编辑模态框
+    const handleEdit = (record) => {
+      isEdit.value = true
+      currentId.value = record.id
+      
+      formState.value = {
+        name: record.name,
+        from_time: dayjs(record.from_time, 'HH:mm'),
+        to_time: dayjs(record.to_time, 'HH:mm')
+      }
+      
+      modalVisible.value = true
+    }
+
+    // 提交表单
+    const handleSubmit = () => {
+      formRef.value.validate().then(async () => {
+        try {
+          submitting.value = true
+          
+          const params = {
+            name: formState.value.name,
+            from_time: dayjs(formState.value.from_time).format('HH:mm'),
+            to_time: dayjs(formState.value.to_time).format('HH:mm')
+          }
+          
+          let res
+          if (isEdit.value) {
+            res = await request.put(`/api/time-periods/${currentId.value}`, params)
+          } else {
+            res = await request.post('/api/time-periods', params)
+          }
+          
+          if (res.code === 200) {
+            message.success(isEdit.value ? '更新成功' : '创建成功')
+            modalVisible.value = false
+            fetchData()
+          } else {
+            message.error(res.message || (isEdit.value ? '更新失败' : '创建失败'))
+          }
+        } catch (error) {
+          console.error(isEdit.value ? '更新时段配置失败:' : '创建时段配置失败:', error)
+          message.error(isEdit.value ? '更新失败' : '创建失败')
+        } finally {
+          submitting.value = false
+        }
+      })
+    }
+
+    // 取消操作
+    const handleCancel = () => {
+      formRef.value?.resetFields()
+      modalVisible.value = false
+    }
+
+    // 删除时段
+    const handleDelete = async (record) => {
+      try {
+        loading.value = true
+        const res = await request.delete(`/api/time-periods/${record.id}`)
+        if (res.code === 200) {
+          message.success('删除成功')
+          fetchData()
+        } else {
+          message.error(res.message || '删除失败')
+        }
+      } catch (error) {
+        console.error('删除时段配置失败:', error)
+        message.error('删除失败')
+      } finally {
+        loading.value = false
+      }
+    }
+
+    // 格式化时间，去除秒
+    const formatTime = (timeStr) => {
+      if (!timeStr) return '';
+      // 如果时间格式包含秒，则去除秒
+      if (timeStr.length > 5 && timeStr.includes(':')) {
+        return timeStr.substring(0, 5);
+      }
+      return timeStr;
+    }
+
+    onMounted(() => {
+      fetchData()
+    })
+
+    return {
+      loading,
+      tableData,
+      columns,
+      pagination,
+      formatTime,
+      handleTableChange,
+      modalVisible,
+      submitting,
+      formState,
+      formRef,
+      rules,
+      showAddModal,
+      handleEdit,
+      handleSubmit,
+      handleCancel,
+      isEdit,
+      handleDelete,
+      handleFromTimeChange,
+      disabledToTime
+    }
+  }
+})
+</script>
+
+<style scoped>
+.table-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.table-header h1 {
+  margin: 0;
+}
+
+.danger {
+  color: #ff4d4f;
+}
+
+:deep(.ant-table-content) {
+  overflow-x: auto;
+}
+</style> 
\ No newline at end of file