From 7008407e4961a895b6bdab8e0c3fed11f9f67174 Mon Sep 17 00:00:00 2001
From: yaowanxin <3588231647@qq.com>
Date: 星期五, 08 八月 2025 11:15:32 +0800
Subject: [PATCH] 用电区域界面，时段请求

---
 src/views/energyManagement/energyPeriodTime/index.vue |  480 ++++++++++++++++++++++++++++++
 src/views/energyManagement/energyArea/index.vue       |  377 +++++++++++++++++++++++
 src/api/energyManagement/index.js                     |   70 ++++
 3 files changed, 927 insertions(+), 0 deletions(-)

diff --git a/src/api/energyManagement/index.js b/src/api/energyManagement/index.js
index 4c061e6..b91f69e 100644
--- a/src/api/energyManagement/index.js
+++ b/src/api/energyManagement/index.js
@@ -17,6 +17,23 @@
     params: query,
   })
 }
+// 鍖哄煙-鍒嗛〉鏌ヨ
+export function areaListPage(query) {
+  return request({
+    url: '/electricityConsumptionArea/listPage',
+    method: 'get',
+    params: query,
+  })
+}
+// 鏃堕棿鍛ㄦ湡-鍒嗛〉鏌ヨ
+export function periodListPage(query) {
+  return request({
+    url: '/electricityConsumptionPeriod/listPage',
+    method: 'get',
+    params: query,
+  })
+}
+
 // 璁惧鑳借��-鍒犻櫎
 export function equipmentEnergyDelete(query) {
   return request({
@@ -25,10 +42,45 @@
     data: query,
   })
 }
+// 鍖哄煙-鍒犻櫎
+export function areaDelete(query) {
+  return request({
+    url: '/electricityConsumptionArea/delete',
+    method: 'delete',
+    data: query,
+  })
+}
+// 鏃堕棿鍛ㄦ湡-鍒犻櫎
+export function periodDelete(query) {
+  return request({
+    url: '/electricityConsumptionPeriod/delete',
+    method: 'delete',
+    data: query,
+  })
+}
+
+
 // 璁惧鑳借��-鏂板
 export function equipmentEnergyAdd(query) {
   return request({
     url: '/equipmentEnergyConsumption/add',
+    method: 'post',
+    data: query,
+  })
+}
+// 鍖哄煙-鏂板
+export function areaAdd(query) {
+  return request({
+    url: '/electricityConsumptionArea/add',
+    method: 'post',
+    data: query,
+  })
+}
+
+// 鏃堕棿鍛ㄦ湡-鏂板
+export function periodAdd(query) {
+  return request({
+    url: '/electricityConsumptionPeriod/add',
     method: 'post',
     data: query,
   })
@@ -41,6 +93,24 @@
     data: query,
   })
 }
+//鍖哄煙-淇敼
+export function areaUpdate(query) {
+  return request({
+    url: '/electricityConsumptionArea/update',
+    method: 'post',
+    data: query,
+  })
+}
+// 鏃堕棿鍛ㄦ湡-淇敼
+export function periodUpdate(query) {
+  return request({
+    url: '/electricityConsumptionPeriod/update',
+    method: 'post',
+    data: query,
+  })
+}
+
+
 // 璁惧涓嬫媺妗嗘煡璇�
 export function deviceList(query) {
   return request({
diff --git a/src/views/energyManagement/energyArea/index.vue b/src/views/energyManagement/energyArea/index.vue
new file mode 100644
index 0000000..b1ce8cb
--- /dev/null
+++ b/src/views/energyManagement/energyArea/index.vue
@@ -0,0 +1,377 @@
+<template>
+	<div class="app-container">
+		<div class="search_form">
+			<div>
+				<span class="search_title">鍖哄煙鍚嶇О锛�</span>
+				<el-input
+					v-model="searchForm.areaName"
+					style="width: 240px;margin-right: 30px"
+					placeholder="璇疯緭鍏�"
+					@change="handleQuery"
+					clearable
+					:prefix-icon="Search"
+				/>
+				<span class="search_title">鍖哄煙绫诲瀷锛�</span>
+				<el-input
+					v-model="searchForm.areaType"
+					style="width: 240px"
+					placeholder="璇疯緭鍏�"
+					@change="handleQuery"
+					clearable
+					:prefix-icon="Search"
+				/>
+				<el-button type="primary" @click="handleQuery" style="margin-left: 10px"
+				>鎼滅储</el-button
+				>
+			</div>
+			<div>
+				<el-button type="primary" @click="openForm('add')">鏂板</el-button>
+				<el-button type="danger" plain @click="handleDelete">鍒犻櫎</el-button>
+			</div>
+		</div>
+		<div class="table_list">
+			<PIMTable
+				rowKey="id"
+				:column="tableColumn"
+				:tableData="tableData"
+				:page="page"
+				:isSelection="true"
+				@selection-change="handleSelectionChange"
+				:tableLoading="tableLoading"
+				@pagination="pagination"
+			></PIMTable>
+		</div>
+		<el-dialog
+        v-model="dialogFormVisible"
+        title="鍖哄煙绠＄悊"
+        width="70%"
+        @close="closeDia"
+		>
+			<el-form
+				:model="form"
+				label-width="140px"
+				label-position="top"
+				:rules="rules"
+				ref="formRef"
+			>
+				<el-row :gutter="30">
+					<el-col :span="12">
+						<el-form-item label="鍖哄煙鍚嶇О锛�" prop="areaName">
+							<el-input
+								v-model="form.areaName"
+								placeholder="璇疯緭鍏�"
+								clearable
+								@change="setName"
+								:disabled="operationType !== 'add'"
+							>
+								<!-- <el-option
+									v-for="item in areaTypeList"
+									:key="item"
+									:label="item"
+									:value="item"
+								>
+									{{item}}
+								</el-option> -->
+							</el-input>
+						</el-form-item>
+					</el-col>
+					<el-col :span="12">
+						<el-form-item label="鍖哄煙绫诲瀷锛�" prop="areaType">
+							<el-input
+								v-model="form.areaType"
+								placeholder="璇疯緭鍏�"
+								clearable
+							/>
+						</el-form-item>
+					</el-col>
+				</el-row>
+				
+				<el-row :gutter="30">
+					<!-- <el-col :span="12">
+						<el-form-item label="杩愯鏃堕棿锛�" prop="runDate">
+							<el-date-picker
+								style="width: 100%"
+								v-model="form.runDate"
+								value-format="YYYY-MM-DD"
+								format="YYYY-MM-DD"
+								type="date"
+								placeholder="璇烽�夋嫨"
+								clearable
+							/>
+						</el-form-item>
+					</el-col> -->
+					<el-col :span="12">
+						<el-form-item label="鐖跺尯鍩燂細" prop="fuId">
+							<el-input
+								v-model="form.fuId"
+								placeholder="璇疯緭鍏�"
+								clearable
+							/>
+						</el-form-item>
+					</el-col>
+				</el-row>
+			</el-form>
+			<template #footer>
+				<div class="dialog-footer">
+					<el-button type="primary" @click="submitForm">纭</el-button>
+					<el-button @click="closeDia">鍙栨秷</el-button>
+				</div>
+			</template>
+    	</el-dialog>
+		
+	</div>
+</template>
+
+<script setup>
+import {Search} from "@element-plus/icons-vue";
+import {onMounted, ref} from "vue";
+import {ElMessageBox} from "element-plus";
+import {getToken} from "@/utils/auth.js";
+import {areaListPage,areaDelete,areaAdd,areaUpdate} from "@/api/energyManagement/index.js";
+const { proxy } = getCurrentInstance();
+
+const data = reactive({
+	searchForm: {
+		areaName: "",
+		areaType: ""
+	},
+	form: {
+		areaName: "",
+		areaType: "",
+		fuId: ""
+	}
+});
+const { searchForm,form } = toRefs(data);
+const page = ref({
+  current: 1,
+  size: 10,
+  total: 0
+});
+const dialogFormVisible = ref(false);
+const selectedRows = ref([]);
+const operationType = ref('');
+const tableData = ref([]);
+const emit = defineEmits(['close'])
+const tableLoading = ref(false);
+const tableColumn = ref([
+	{
+		label: "鍖哄煙鍚嶇О",
+		prop: "areaName",
+		width: 200,
+	},
+	{
+		label: "鍖哄煙绫诲瀷",
+		prop: "areaType",
+		width: 200,
+	},
+	{
+		label: "鐖跺尯鍩�",
+		prop: "fuId",
+	},
+	{
+		dataType: "action",
+		label: "鎿嶄綔",
+		align: "center",
+		fixed: 'right',
+		operation: [
+			{
+				name: "缂栬緫",
+				type: "text",
+				clickFun: (row) => {
+					openForm("edit", row);
+				},
+			},
+		],
+	},
+]);
+
+
+// 琛ㄦ牸閫夋嫨鏁版嵁
+const handleSelectionChange = (selection) => {
+	selectedRows.value = selection;
+};
+const formDia = ref()
+const upload = reactive({
+	// 鏄惁鏄剧ず寮瑰嚭灞傦紙瀹㈡埛瀵煎叆锛�
+	open: false,
+	// 寮瑰嚭灞傛爣棰橈紙瀹㈡埛瀵煎叆锛�
+	title: "",
+	// 鏄惁绂佺敤涓婁紶
+	isUploading: false,
+	// 璁剧疆涓婁紶鐨勮姹傚ご閮�
+	headers: { Authorization: "Bearer " + getToken() },
+	// 涓婁紶鐨勫湴鍧�
+	url: import.meta.env.VITE_APP_BASE_API + "/equipmentEnergyConsumption/importData",
+	// 鏂囦欢涓婁紶鍓嶇殑鍥炶皟
+	beforeUpload: (file) => {
+		console.log('鏂囦欢鍗冲皢涓婁紶', file);
+		// 鍙互鍦ㄦ澶勫仛鏂囦欢绫诲瀷鎴栧ぇ灏忔牎楠�
+		const isValid = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || file.name.endsWith('.xlsx') || file.name.endsWith('.xls');
+		if (!isValid) {
+			proxy.$modal.msgError("鍙兘涓婁紶 Excel 鏂囦欢");
+		}
+		return isValid;
+	},
+	// 鏂囦欢鐘舵�佹敼鍙樻椂鐨勫洖璋�
+	onChange: (file, fileList) => {
+		console.log('鏂囦欢鐘舵�佹敼鍙�', file, fileList);
+	},
+	// 鏂囦欢涓婁紶鎴愬姛鏃剁殑鍥炶皟
+	onSuccess: (response, file, fileList) => {
+		console.log('涓婁紶鎴愬姛', response, file, fileList);
+		if(response.code === 200){
+			proxy.$modal.msgSuccess("鏂囦欢涓婁紶鎴愬姛");
+		}else if(response.code === 500){
+			ElMessageBox.error(response.msg);
+		}else{
+			ElMessageBox.warning(response.msg);
+		}
+	},
+	// 鏂囦欢涓婁紶澶辫触鏃剁殑鍥炶皟
+	onError: (error, file, fileList) => {
+		console.error('涓婁紶澶辫触', error, file, fileList);
+		ElMessageBox.error("鏂囦欢涓婁紶澶辫触");
+	},
+	// 鏂囦欢涓婁紶杩涘害鍥炶皟
+	onProgress: (event, file, fileList) => {
+		console.log('涓婁紶涓�...', event.percent);
+	}
+});
+
+// 鏌ヨ鍒楄〃
+/** 鎼滅储鎸夐挳鎿嶄綔 */
+const handleQuery = () => {
+	page.current = 1;
+	getList();
+};
+const pagination = (obj) => {
+	page.current = obj.page;
+	page.size = obj.limit;
+	getList();
+};
+const getList = () => {
+	tableLoading.value = true;
+	areaListPage({ ...searchForm.value, ...page.value }).then((res) => {
+			tableLoading.value = false;
+			if (res && res.data) {
+				tableData.value = res.data.records || [];
+				page.total = res.data.total || 0;
+			} else {
+				tableData.value = [];
+				page.total = 0;
+				ElMessageBox.warning('鏈幏鍙栧埌鏁版嵁');
+			}
+		})
+		.catch((err) => {
+			tableLoading.value = false;
+			console.error('鏁版嵁鍔犺浇澶辫触:', err);
+			ElMessageBox.error('鏁版嵁鍔犺浇澶辫触锛岃閲嶈瘯');
+		});
+};
+// 鎵撳紑寮规
+const openDialog = (type, row) => {
+  operationType.value = type;
+  dialogFormVisible.value = true;
+	// form.value.maintainer = userStore.nickName;
+	// form.value.maintenanceTime = getCurrentDate();
+	form.value = {}
+	proxy.resetForm("formRef");
+	areaListPage().then((res) => {
+		codeList.value = res.data;
+	});
+	if (type === "edit") {
+		form.value = {...row}
+	}
+}
+// 鎵撳紑寮规
+const openForm = (type, row) => {
+	openDialog(type, row)
+};
+// 鎻愪氦琛ㄥ崟
+const submitForm = () => {
+	proxy.$refs["formRef"].validate(valid => {
+		if (valid) {
+			if (operationType.value === "add") {
+				areaAdd(form.value).then(response => {
+					proxy.$modal.msgSuccess("鏂板鎴愬姛")
+					closeDia()
+				})
+			} else {
+				areaUpdate(form.value).then(response => {
+					proxy.$modal.msgSuccess("淇敼鎴愬姛")
+					closeDia()
+				})
+			}
+		}
+	})
+}
+// 鍏抽棴寮规
+const closeDia = () => {
+	proxy.resetForm("formRef");
+	dialogFormVisible.value = false;
+	emit('close')
+};
+/** 瀵煎叆鎸夐挳鎿嶄綔 */
+function handleImport() {
+	upload.title = "璁惧鑳借��";
+	upload.open = true;
+	// 娓呯┖涓婃涓婁紶鐨勬枃浠跺垪琛�
+	nextTick(() => {
+		proxy.$refs["uploadRef"]?.clearFiles();
+	});
+}
+function importTemplate() {
+	proxy.download(
+		"/equipmentEnergyConsumption/export",
+		{},
+		'璁惧鑳借�楀鍏ユā鐗�.xlsx'
+	);
+}
+/** 鎻愪氦涓婁紶鏂囦欢 */
+function submitFileForm() {
+	proxy.$refs["uploadRef"].submit();
+}
+
+/** 寮规鍏抽棴鏃舵竻绌烘枃浠跺垪琛� */
+function handleDialogClose() {
+	nextTick(() => {
+		proxy.$refs["uploadRef"]?.clearFiles();
+	});
+}
+
+const handleDelete = () => {
+	let ids = [];
+	if (selectedRows.value.length > 0) {
+		ids = selectedRows.value.map((item) => item.id);
+	} else {
+		proxy.$modal.msgWarning("璇烽�夋嫨鏁版嵁");
+		return;
+	}
+	ElMessageBox.confirm("閫変腑鐨勫唴瀹瑰皢琚垹闄わ紝鏄惁纭鍒犻櫎锛�", "鍒犻櫎鎻愮ず", {
+		confirmButtonText: "纭",
+		cancelButtonText: "鍙栨秷",
+		type: "warning",
+	})
+	.then(() => {
+		tableLoading.value = true;
+		areaDelete(ids)
+			.then((res) => {
+				proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛");
+				getList();
+			})
+			.finally(() => {
+				tableLoading.value = false;
+			});
+	})
+	.catch(() => {
+		proxy.$modal.msg("宸插彇娑�");
+	});
+};
+onMounted(() => {
+	getList();
+});
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/energyManagement/energyPeriodTime/index.vue b/src/views/energyManagement/energyPeriodTime/index.vue
new file mode 100644
index 0000000..c706697
--- /dev/null
+++ b/src/views/energyManagement/energyPeriodTime/index.vue
@@ -0,0 +1,480 @@
+<template>
+  <div class="app-container">
+    <!-- 鎼滅储鏍� -->
+    <el-form :model="searchForm" :inline="true" class="search-form">
+      <el-form-item label="鏃舵鍚嶇О">
+        <el-input 
+          v-model="searchForm.periodName" 
+          placeholder="璇疯緭鍏ユ椂娈靛悕绉�" 
+          clearable 
+          prefix-icon="Search"
+          @change="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="handleQuery">鎼滅储</el-button>
+        <el-button @click="resetQuery">閲嶇疆</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 鎿嶄綔鎸夐挳 -->
+    <div class="table-actions">
+      <el-button 
+        type="primary" 
+        icon="Plus" 
+        @click="handleAdd" 
+        v-hasPermi="['energy:period:add']"
+      >鏂板鏃舵</el-button>
+    </div>
+
+    <!-- 鏃舵鍒楄〃琛ㄦ牸 -->
+    <el-table 
+      v-loading="loading" 
+      :data="periodList" 
+      @selection-change="handleSelectionChange"
+      border
+    >
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="搴忓彿" type="index" width="60" align="center" />
+      <el-table-column 
+        label="鏃舵鍚嶇О" 
+        prop="periodName" 
+        align="center" 
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column 
+        label="鏃舵鍗曚环(鍏�/搴�)" 
+        prop="price" 
+        align="center"
+        :formatter="formatPrice"
+      />
+      <el-table-column 
+        label="鐘舵��" 
+        prop="status" 
+        align="center" 
+        width="100"
+      >
+        <template #default="scope">
+          <dict-tag :options="statusOptions" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column 
+        label="鍒涘缓鏃堕棿" 
+        prop="createTime" 
+        align="center" 
+        width="180"
+      />
+      <el-table-column label="鎿嶄綔" align="center" width="200">
+        <template #default="scope">
+          <el-button 
+            link 
+            type="primary" 
+            icon="Edit" 
+            @click="handleUpdate(scope.row)" 
+            v-hasPermi="['energy:period:edit']"
+          >淇敼</el-button>
+          <el-button 
+            link 
+            type="primary" 
+            icon="Delete" 
+            @click="handleDelete(scope.row)" 
+            v-hasPermi="['energy:period:remove']"
+          >鍒犻櫎</el-button>
+          <el-button 
+            link 
+            type="primary" 
+            icon="Setting" 
+            @click="handleTimeConfig(scope.row)" 
+            v-hasPermi="['energy:period:config']"
+          >鏃堕棿閰嶇疆</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 鍒嗛〉鎺т欢 -->
+    <pagination 
+      v-show="total > 0" 
+      :total="total" 
+      v-model:page="queryParams.pageNum" 
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 鏂板/缂栬緫鏃舵瀵硅瘽妗� -->
+    <el-dialog 
+      :title="title" 
+      v-model="open" 
+      width="500px" 
+      append-to-body
+    >
+      <el-form 
+        ref="formRef" 
+        :model="form" 
+        :rules="rules" 
+        label-width="100px"
+      >
+        <el-form-item label="鏃舵鍚嶇О" prop="periodName">
+          <el-input v-model="form.periodName" placeholder="璇疯緭鍏ユ椂娈靛悕绉�" />
+        </el-form-item>
+        <el-form-item label="鏃舵鍗曚环(鍏�/搴�)" prop="price">
+          <el-input 
+            v-model="form.price" 
+            type="number" 
+            placeholder="璇疯緭鍏ユ椂娈靛崟浠�" 
+            step="0.01" 
+            min="0"
+          />
+        </el-form-item>
+        <el-form-item label="鐘舵��" prop="status">
+          <el-radio-group v-model="form.status">
+            <el-radio :label="1">鍚敤</el-radio>
+            <el-radio :label="0">绂佺敤</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="澶囨敞" prop="remark">
+          <el-input 
+            v-model="form.remark" 
+            type="textarea" 
+            placeholder="璇疯緭鍏ュ娉ㄤ俊鎭�" 
+            rows="3"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="cancel">鍙栨秷</el-button>
+          <el-button type="primary" @click="submitForm">纭畾</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <!-- 鏃堕棿娈甸厤缃璇濇 -->
+    <el-dialog 
+      title="宄板钩璋峰皷鏃堕棿閰嶇疆" 
+      v-model="timeConfigOpen" 
+      width="800px" 
+      append-to-body
+    >
+      <el-form ref="timeFormRef" :model="timeForm" label-width="100px">
+        <el-form-item label="鏃舵鍚嶇О">
+          <el-input v-model="timeForm.periodName" disabled />
+        </el-form-item>
+        
+        <el-table 
+          :data="timeForm.timeSegments" 
+          border 
+          style="width: 100%"
+          @selection-change="handleTimeSelectionChange"
+        >
+          <el-table-column type="selection" width="55" align="center" />
+          <el-table-column label="搴忓彿" type="index" width="60" align="center" />
+          <el-table-column label="绫诲瀷" align="center" prop="segmentType" width="100">
+            <template #default="scope">
+              <el-select v-model="scope.row.segmentType" placeholder="璇烽�夋嫨">
+                <el-option label="宄�" value="peak" />
+                <el-option label="骞�" value="flat" />
+                <el-option label="璋�" value="valley" />
+                <el-option label="灏�" value="sharp" />
+              </el-select>
+            </template>
+          </el-table-column>
+          <el-table-column label="寮�濮嬫椂闂�" align="center" prop="startTime" width="140">
+            <template #default="scope">
+              <el-time-picker 
+                v-model="scope.row.startTime" 
+                format="HH:mm" 
+                value-format="HH:mm"
+                placeholder="閫夋嫨寮�濮嬫椂闂�"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column label="缁撴潫鏃堕棿" align="center" prop="endTime" width="140">
+            <template #default="scope">
+              <el-time-picker 
+                v-model="scope.row.endTime" 
+                format="HH:mm" 
+                value-format="HH:mm"
+                placeholder="閫夋嫨缁撴潫鏃堕棿"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column label="鎿嶄綔" align="center" width="100">
+            <template #default="scope">
+              <el-button 
+                link 
+                type="primary" 
+                icon="Delete" 
+                @click="handleTimeDelete(scope.row)"
+              >鍒犻櫎</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        
+        <div style="margin-top: 15px; text-align: right;">
+          <el-button type="primary" @click="handleAddTimeSegment">鏂板鏃堕棿娈�</el-button>
+        </div>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="cancelTimeConfig">鍙栨秷</el-button>
+          <el-button type="primary" @click="submitTimeConfig">淇濆瓨閰嶇疆</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="EnergyPeriodTime">
+import { ref, reactive, toRefs, getCurrentInstance, onMounted } from 'vue';
+import { listPeriod, getPeriod, delPeriod, addPeriod, updatePeriod, getTimeSegments, saveTimeSegments } from "@/api/energyManagement/index.js";
+import { useDict } from '@/hooks/useDict';
+
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable } = useDict('sys_normal_disable');
+import {Search} from "@element-plus/icons-vue";
+import {onMounted, ref} from "vue";
+import {ElMessageBox} from "element-plus";
+import {getToken} from "@/utils/auth.js";
+import {periodListPage,periodDelete,periodAdd,periodUpdate} from "@/api/energyManagement/index.js";
+
+// 鐘舵�佸畾涔�
+const state = reactive({
+  loading: false,
+  open: false,
+  timeConfigOpen: false,
+  title: "",
+  total: 0,
+  periodList: [],
+  timeSegments: [],
+  selectedRows: [],
+  timeSelectedRows: [],
+  statusOptions: sys_normal_disable,
+  
+  // 鎼滅储琛ㄥ崟
+  searchForm: {
+    periodName: ""
+  },
+  
+  // 鏌ヨ鍙傛暟
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    periodName: undefined
+  },
+  
+  // 琛ㄥ崟鍙傛暟
+  form: {
+    periodId: undefined,
+    periodName: "",
+    price: 0,
+    status: 1,
+    remark: ""
+  },
+  
+  // 鏃堕棿閰嶇疆琛ㄥ崟
+  timeForm: {
+    periodId: undefined,
+    periodName: "",
+    timeSegments: []
+  },
+  
+  // 琛ㄥ崟鏍￠獙
+  rules: {
+    periodName: [
+      { required: true, message: "璇疯緭鍏ユ椂娈靛悕绉�", trigger: "blur" }
+    ],
+    price: [
+      { required: true, message: "璇疯緭鍏ユ椂娈靛崟浠�", trigger: "blur" },
+      { type: "number", message: "璇疯緭鍏ユ湁鏁堢殑鏁板瓧", trigger: "blur" },
+      { min: 0, message: "鍗曚环涓嶈兘灏忎簬0", trigger: "blur" }
+    ]
+  }
+});
+
+const { 
+  loading, open, timeConfigOpen, title, total, periodList, 
+  selectedRows, timeSelectedRows, statusOptions, searchForm, 
+  queryParams, form, timeForm, rules 
+} = toRefs(state);
+
+const formRef = ref(null);
+const timeFormRef = ref(null);
+
+// 鐢熷懡鍛ㄦ湡 - 鎸傝浇瀹屾垚
+onMounted(() => {
+  getList();
+});
+
+// 鑾峰彇鏃舵鍒楄〃
+const getList = async () => {
+  state.loading = true;
+  try {
+    const response = await listPeriod(state.queryParams);
+    state.periodList = response.rows;
+    state.total = response.total;
+  } catch (error) {
+    proxy.$modal.msgError("鑾峰彇鏃舵鍒楄〃澶辫触");
+  } finally {
+    state.loading = false;
+  }
+};
+
+// 鎼滅储鎸夐挳鐐瑰嚮浜嬩欢
+const handleQuery = () => {
+  state.queryParams.pageNum = 1;
+  state.queryParams.periodName = state.searchForm.periodName;
+  getList();
+};
+
+// 閲嶇疆鎸夐挳鐐瑰嚮浜嬩欢
+const resetQuery = () => {
+  state.searchForm = {
+    periodName: ""
+  };
+  state.queryParams = {
+    pageNum: 1,
+    pageSize: 10,
+    periodName: undefined
+  };
+  getList();
+};
+
+// 鏂板鎸夐挳鐐瑰嚮浜嬩欢
+const handleAdd = () => {
+  state.form = {
+    periodId: undefined,
+    periodName: "",
+    price: 0,
+    status: 1,
+    remark: ""
+  };
+  state.open = true;
+  state.title = "鏂板鏃舵";
+};
+
+// 淇敼鎸夐挳鐐瑰嚮浜嬩欢
+const handleUpdate = async (row) => {
+  state.form = { ...row };
+  state.open = true;
+  state.title = "淇敼鏃舵";
+};
+
+// 鍒犻櫎鎸夐挳鐐瑰嚮浜嬩欢
+const handleDelete = async (row) => {
+  await proxy.$modal.confirm("鏄惁纭鍒犻櫎璇ユ椂娈碉紵");
+  try {
+    await delPeriod(row.periodId);
+    getList();
+    proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛");
+  } catch (error) {
+    proxy.$modal.msgError("鍒犻櫎澶辫触");
+  }
+};
+
+// 鏃堕棿娈甸厤缃寜閽偣鍑讳簨浠�
+const handleTimeConfig = async (row) => {
+  state.timeForm.periodId = row.periodId;
+  state.timeForm.periodName = row.periodName;
+  
+  try {
+    const response = await getTimeSegments(row.periodId);
+    state.timeForm.timeSegments = response.data || [];
+  } catch (error) {
+    state.timeForm.timeSegments = [];
+  }
+  
+  state.timeConfigOpen = true;
+};
+
+// 鏂板鏃堕棿娈�
+const handleAddTimeSegment = () => {
+  state.timeForm.timeSegments.push({
+    segmentId: undefined,
+    periodId: state.timeForm.periodId,
+    segmentType: "flat",
+    startTime: "00:00",
+    endTime: "00:00"
+  });
+};
+
+// 鍒犻櫎鏃堕棿娈�
+const handleTimeDelete = (row) => {
+  const index = state.timeForm.timeSegments.indexOf(row);
+  if (index !== -1) {
+    state.timeForm.timeSegments.splice(index, 1);
+  }
+};
+
+// 鎻愪氦鏃舵琛ㄥ崟
+const submitForm = async () => {
+  await proxy.$refs[formRef.value].validate();
+  
+  try {
+    if (state.form.periodId) {
+      await updatePeriod(state.form);
+      proxy.$modal.msgSuccess("淇敼鎴愬姛");
+    } else {
+      await addPeriod(state.form);
+      proxy.$modal.msgSuccess("鏂板鎴愬姛");
+    }
+    state.open = false;
+    getList();
+  } catch (error) {
+    proxy.$modal.msgError(state.form.periodId ? "淇敼澶辫触" : "鏂板澶辫触");
+  }
+};
+
+// 鎻愪氦鏃堕棿娈甸厤缃�
+const submitTimeConfig = async () => {
+  try {
+    await saveTimeSegments(state.timeForm.timeSegments);
+    proxy.$modal.msgSuccess("鏃堕棿閰嶇疆淇濆瓨鎴愬姛");
+    state.timeConfigOpen = false;
+  } catch (error) {
+    proxy.$modal.msgError("鏃堕棿閰嶇疆淇濆瓨澶辫触");
+  }
+};
+
+// 鍙栨秷鎸夐挳鐐瑰嚮浜嬩欢
+const cancel = () => {
+  state.open = false;
+  proxy.$refs[formRef.value].resetFields();
+};
+
+// 鍙栨秷鏃堕棿閰嶇疆鎸夐挳鐐瑰嚮浜嬩欢
+const cancelTimeConfig = () => {
+  state.timeConfigOpen = false;
+};
+
+// 閫夋嫨椤瑰彉鍖栦簨浠�
+const handleSelectionChange = (selection) => {
+  state.selectedRows = selection;
+};
+
+// 鏃堕棿娈甸�夋嫨椤瑰彉鍖栦簨浠�
+const handleTimeSelectionChange = (selection) => {
+  state.timeSelectedRows = selection;
+};
+
+// 鏍煎紡鍖栦环鏍兼樉绀�
+const formatPrice = (row, column, cellValue) => {
+  return cellValue ? cellValue.toFixed(2) : "0.00";
+};
+
+// 瀵煎嚭鏂规硶
+defineExpose({
+  getList
+});
+</script>
+
+<style scoped>
+.search-form {
+  margin-bottom: 16px;
+}
+
+.table-actions {
+  margin-bottom: 16px;
+  display: flex;
+  justify-content: flex-start;
+}
+</style>

--
Gitblit v1.9.3