From 0c445ac6d2a20153e5eac390555ba88f950d76b0 Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期四, 14 八月 2025 17:16:16 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/dev_7004' into dev_7004
---
src/views/demo/fakePage/index.vue | 248 +++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 248 insertions(+), 0 deletions(-)
diff --git a/src/views/demo/fakePage/index.vue b/src/views/demo/fakePage/index.vue
new file mode 100644
index 0000000..42cef72
--- /dev/null
+++ b/src/views/demo/fakePage/index.vue
@@ -0,0 +1,248 @@
+<template>
+ <div class="app-container">
+ <el-card shadow="never">
+ <div class="toolbar">
+ <el-input
+ v-model="query.keyword"
+ placeholder="鎼滅储鍚嶇О/绫诲埆"
+ clearable
+ style="width: 240px"
+ @keyup.enter="handleSearch"
+ />
+ <el-select
+ v-model="query.status"
+ placeholder="鐘舵��"
+ clearable
+ style="width: 140px; margin-left: 12px"
+ >
+ <el-option label="鍚敤" value="鍚敤" />
+ <el-option label="鍋滅敤" value="鍋滅敤" />
+ </el-select>
+ <el-button type="primary" style="margin-left: 12px" @click="handleSearch">鏌ヨ</el-button>
+ <el-button @click="resetQuery">閲嶇疆</el-button>
+ <el-button type="success" plain style="float: right" @click="openCreate">鏂板</el-button>
+ </div>
+
+ <el-table :data="pagedList" border style="width: 100%" height="480">
+ <el-table-column prop="id" label="缂栧彿" width="90" sortable />
+ <el-table-column prop="name" label="鍚嶇О" min-width="140" />
+ <el-table-column prop="category" label="绫诲埆" width="120" />
+ <el-table-column prop="stock" label="搴撳瓨" width="100" sortable />
+ <el-table-column prop="price" label="鍗曚环(楼)" width="120">
+ <template #default="scope">{{ formatPrice(scope.row.price) }}</template>
+ </el-table-column>
+ <el-table-column label="鐘舵��" width="120">
+ <template #default="scope">
+ <el-tag :type="scope.row.status === '鍚敤' ? 'success' : 'info'">{{ scope.row.status }}</el-tag>
+ </template>
+ </el-table-column>
+ <el-table-column prop="updatedAt" label="鏇存柊鏃堕棿" min-width="160" />
+ <el-table-column label="鎿嶄綔" width="180" fixed="right">
+ <template #default="scope">
+ <el-button link type="primary" @click="openEdit(scope.row)">缂栬緫</el-button>
+ <el-button link type="danger" @click="handleDelete(scope.row)">鍒犻櫎</el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+
+ <div class="pagination">
+ <el-pagination
+ background
+ layout="total, sizes, prev, pager, next, jumper"
+ :total="filteredList.length"
+ :page-sizes="[5, 10, 20, 50]"
+ :page-size="pager.pageSize"
+ :current-page="pager.pageNum"
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ />
+ </div>
+ </el-card>
+
+ <el-dialog v-model="dialogVisible" :title="isEdit ? '缂栬緫' : '鏂板'" width="520px">
+ <el-form :model="form" :rules="rules" ref="formRef" label-width="90px">
+ <el-form-item label="鍚嶇О" prop="name">
+ <el-input v-model="form.name" placeholder="璇疯緭鍏ュ悕绉�" />
+ </el-form-item>
+ <el-form-item label="绫诲埆" prop="category">
+ <el-select v-model="form.category" placeholder="璇烽�夋嫨绫诲埆" style="width: 100%">
+ <el-option label="鍘熸枡" value="鍘熸枡" />
+ <el-option label="鍗婃垚鍝�" value="鍗婃垚鍝�" />
+ <el-option label="鎴愬搧" value="鎴愬搧" />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="搴撳瓨" prop="stock">
+ <el-input v-model.number="form.stock" type="number" min="0" />
+ </el-form-item>
+ <el-form-item label="鍗曚环(楼)" prop="price">
+ <el-input v-model.number="form.price" type="number" min="0" step="0.01" />
+ </el-form-item>
+ <el-form-item label="鐘舵��" prop="status">
+ <el-radio-group v-model="form.status">
+ <el-radio label="鍚敤">鍚敤</el-radio>
+ <el-radio label="鍋滅敤">鍋滅敤</el-radio>
+ </el-radio-group>
+ </el-form-item>
+ </el-form>
+ <template #footer>
+ <el-button @click="dialogVisible = false">鍙� 娑�</el-button>
+ <el-button type="primary" @click="submitForm">纭� 瀹�</el-button>
+ </template>
+ </el-dialog>
+ </div>
+
+</template>
+
+<script setup>
+import { ref, reactive, computed, nextTick } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+
+defineOptions({ name: 'FakePage' })
+
+const query = reactive({
+ keyword: '',
+ status: ''
+})
+
+const pager = reactive({
+ pageNum: 1,
+ pageSize: 10
+})
+
+const allList = ref(generateMockData())
+
+const filteredList = computed(() => {
+ const keyword = (query.keyword || '').trim()
+ const status = query.status
+ return allList.value.filter(item => {
+ const hitKeyword = !keyword || item.name.includes(keyword) || item.category.includes(keyword)
+ const hitStatus = !status || item.status === status
+ return hitKeyword && hitStatus
+ })
+})
+
+const pagedList = computed(() => {
+ const start = (pager.pageNum - 1) * pager.pageSize
+ const end = start + pager.pageSize
+ return filteredList.value.slice(start, end)
+})
+
+function handleSearch() {
+ pager.pageNum = 1
+}
+
+function resetQuery() {
+ query.keyword = ''
+ query.status = ''
+ pager.pageNum = 1
+}
+
+function handleSizeChange(size) {
+ pager.pageSize = size
+ pager.pageNum = 1
+}
+
+function handleCurrentChange(page) {
+ pager.pageNum = page
+}
+
+function formatPrice(val) {
+ return Number(val || 0).toFixed(2)
+}
+
+// 鏂板/缂栬緫
+const dialogVisible = ref(false)
+const isEdit = ref(false)
+const formRef = ref()
+const form = reactive({ id: null, name: '', category: '', stock: 0, price: 0, status: '鍚敤' })
+
+const rules = {
+ name: [{ required: true, message: '璇疯緭鍏ュ悕绉�', trigger: 'blur' }],
+ category: [{ required: true, message: '璇烽�夋嫨绫诲埆', trigger: 'change' }],
+ stock: [{ required: true, message: '璇疯緭鍏ュ簱瀛�', trigger: 'blur' }],
+ price: [{ required: true, message: '璇疯緭鍏ュ崟浠�', trigger: 'blur' }]
+}
+
+function openCreate() {
+ isEdit.value = false
+ Object.assign(form, { id: null, name: '', category: '', stock: 0, price: 0, status: '鍚敤' })
+ dialogVisible.value = true
+ nextTick(() => formRef.value?.clearValidate?.())
+}
+
+function openEdit(row) {
+ isEdit.value = true
+ Object.assign(form, JSON.parse(JSON.stringify(row)))
+ dialogVisible.value = true
+ nextTick(() => formRef.value?.clearValidate?.())
+}
+
+function submitForm() {
+ formRef.value?.validate?.((valid) => {
+ if (!valid) return
+ if (isEdit.value) {
+ const index = allList.value.findIndex(x => x.id === form.id)
+ if (index > -1) {
+ allList.value[index] = { ...form, updatedAt: nowString() }
+ ElMessage.success('宸蹭繚瀛�')
+ }
+ } else {
+ const newId = Date.now()
+ allList.value.unshift({ ...form, id: newId, updatedAt: nowString() })
+ ElMessage.success('宸叉柊澧�')
+ }
+ dialogVisible.value = false
+ })
+}
+
+function handleDelete(row) {
+ ElMessageBox.confirm(`纭鍒犻櫎銆�${row.name}銆戝悧锛焋, '鎻愮ず', { type: 'warning' })
+ .then(() => {
+ allList.value = allList.value.filter(x => x.id !== row.id)
+ ElMessage.success('宸插垹闄�')
+ })
+ .catch(() => {})
+}
+
+function generateMockData() {
+ const categories = ['鍘熸枡', '鍗婃垚鍝�', '鎴愬搧']
+ const statusOptions = ['鍚敤', '鍋滅敤']
+ const list = []
+ for (let i = 1; i <= 36; i++) {
+ list.push({
+ id: i,
+ name: `鐗╂枡-${i.toString().padStart(3, '0')}`,
+ category: categories[i % categories.length],
+ stock: Math.floor(Math.random() * 1000),
+ price: (Math.random() * 500 + 10).toFixed(2),
+ status: statusOptions[i % 2],
+ updatedAt: nowString()
+ })
+ }
+ return list
+}
+
+function nowString() {
+ const d = new Date()
+ const yyyy = d.getFullYear()
+ const MM = String(d.getMonth() + 1).padStart(2, '0')
+ const dd = String(d.getDate()).padStart(2, '0')
+ const hh = String(d.getHours()).padStart(2, '0')
+ const mm = String(d.getMinutes()).padStart(2, '0')
+ const ss = String(d.getSeconds()).padStart(2, '0')
+ return `${yyyy}-${MM}-${dd} ${hh}:${mm}:${ss}`
+}
+</script>
+
+<style scoped>
+.toolbar {
+ margin-bottom: 12px;
+}
+.pagination {
+ margin-top: 12px;
+ text-align: right;
+}
+</style>
+
+
+
--
Gitblit v1.9.3