From 61d25d1c1c58da842b971ddb3df9922293c48c1d Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期五, 15 三月 2024 10:50:40 +0800
Subject: [PATCH] 页面优化
---
src/views/td/data/index.vue | 294 +++++++++++++++++++++++++++++++++++++++-------------------
1 files changed, 197 insertions(+), 97 deletions(-)
diff --git a/src/views/td/data/index.vue b/src/views/td/data/index.vue
index d765c37..a0bf927 100644
--- a/src/views/td/data/index.vue
+++ b/src/views/td/data/index.vue
@@ -1,113 +1,175 @@
<template>
<div class="p-2">
- <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
- <div class="search" v-show="showSearch">
- <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
- <el-form-item label="琛屾斂鍖哄垝" prop="areaName">
- <el-input v-model="queryParams.areaName" placeholder="璇疯緭鍏ヨ鏀垮尯鍒�" clearable style="width: 240px" @keyup.enter="handleQuery" />
- </el-form-item>
- <el-form-item label="鍖哄垝浠ｇ爜" prop="areaCode">
- <el-input v-model="queryParams.areaCode" placeholder="璇疯緭鍏ュ尯鍒掍唬鐮�" clearable style="width: 240px" @keyup.enter="handleQuery" />
- </el-form-item>
- <el-form-item label="缁熻鏃堕棿" prop="collectTime">
- <el-date-picker clearable
- v-model="queryParams.collectTime"
- type="date"
- value-format="YYYY-MM-DD"
- placeholder="璇烽�夋嫨缁熻鏃堕棿"
- />
- </el-form-item>
- <el-form-item>
- <el-button type="primary" icon="Search" @click="handleQuery">鎼滅储</el-button>
- <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button>
- </el-form-item>
- </el-form>
- </div>
- </transition>
+ <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+ <el-tab-pane label="闀囪鎸囨爣鏁版嵁" name="first"></el-tab-pane>
+ <el-tab-pane label="鍖哄幙鎸囨爣鏁版嵁" name="second"></el-tab-pane>
+ </el-tabs>
+ <div v-show="activeName=='first'">
+ <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+ <div class="search" v-show="showSearch">
+ <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
+ <el-form-item label="缁熻鍛ㄦ湡" prop="collectTime">
+ <el-date-picker clearable
+ v-model="queryParams.collectTime"
+ type="date"
+ value-format="YYYY-MM-DD"
+ placeholder="璇烽�夋嫨缁熻鍛ㄦ湡"
+ />
+ </el-form-item>
+ <el-form-item>
+ <el-button type="primary" @click="handleQuery">鎼滅储</el-button>
+ <el-button type="primary" @click="handleAddData">鏂板</el-button>
+ <el-button type="primary" @click="dialogDr.visible = true">瀵煎叆</el-button>
+ </el-form-item>
+ </el-form>
+ </div>
+ </transition>
- <el-card shadow="never">
- <template #header>
- <el-row :gutter="10" class="mb8">
- <el-col :span="1.5">
- <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:data:add']">鏂板</el-button>
- </el-col>
- <el-col :span="1.5">
- <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['system:data:edit']">淇敼</el-button>
- </el-col>
- <el-col :span="1.5">
- <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['system:data:remove']">鍒犻櫎</el-button>
- </el-col>
- <el-col :span="1.5">
- <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['system:data:export']">瀵煎嚭</el-button>
- </el-col>
- <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
- </el-row>
- </template>
+ <el-card shadow="never">
- <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
- <el-table-column type="selection" width="55" align="center" />
- <el-table-column label="涓婚敭" align="center" prop="id" v-if="true" />
- <el-table-column label="琛屾斂鍖哄垝" align="center" prop="areaName" />
- <el-table-column label="鍖哄垝浠ｇ爜" align="center" prop="areaCode" />
- <el-table-column label="缁熻鏃堕棿" align="center" prop="collectTime" width="180">
- <template #default="scope">
- <span>{{ parseTime(scope.row.collectTime, '{y}-{m}-{d}') }}</span>
- </template>
- </el-table-column>
- <el-table-column label="鎿嶄綔" align="center" class-name="small-padding fixed-width">
- <template #default="scope">
- <el-tooltip content="淇敼" placement="top">
- <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:data:edit']"></el-button>
- </el-tooltip>
- <el-tooltip content="鍒犻櫎" placement="top">
- <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:data:remove']"></el-button>
- </el-tooltip>
- </template>
- </el-table-column>
- </el-table>
+ <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
+ <el-table-column label="搴忓彿" type="index" width="55" align="center" />
+ <el-table-column label="鏈�鏂扮粺璁″懆鏈�" align="center" prop="areaName" />
+ <el-table-column label="缁煎悎骞冲潎鎸囨暟" align="center" prop="areaCode" />
+ <el-table-column label="姣涘彂鎶芥闃虫�х巼" align="center" prop="collectTime" width="180"/>
+ <el-table-column label="鏂板鍚告瘨浜哄憳" align="center" prop="collectTime" width="180"/>
+ <el-table-column label="鎸囨爣鍚嶇О1" align="center" prop="collectTime" width="180"/>
+ <el-table-column label="鎿嶄綔" align="center" class-name="small-padding fixed-width">
+ <template #default="scope">
+ <el-button link type="primary" @click="handleUpdate(scope.row)" v-hasPermi="['td:data:edit']">璁板綍</el-button>
+ <el-button link type="primary" @click="handledata(scope.row)" v-hasPermi="['td:data:edit']">缂栬緫</el-button>
+ <!-- <el-tooltip content="淇敼" placement="top">-->
+ <!-- <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['td:data:edit']"></el-button>-->
+ <!-- </el-tooltip>-->
+ <!-- <el-tooltip content="鍒犻櫎" placement="top">-->
+ <!-- <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['td:data:remove']"></el-button>-->
+ <!-- </el-tooltip>-->
+ </template>
+ </el-table-column>
+ </el-table>
- <pagination
+ <pagination
v-show="total>0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
- />
- </el-card>
- <!-- 娣诲姞鎴栦慨鏀规寚鏍囨暟鎹璇濇 -->
- <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
- <el-form ref="dataFormRef" :model="form" :rules="rules" label-width="80px">
- <el-form-item label="琛屾斂鍖哄垝" prop="areaName">
- <el-input v-model="form.areaName" placeholder="璇疯緭鍏ヨ鏀垮尯鍒�" />
- </el-form-item>
- <el-form-item label="鍖哄垝浠ｇ爜" prop="areaCode">
- <el-input v-model="form.areaCode" placeholder="璇疯緭鍏ュ尯鍒掍唬鐮�" />
- </el-form-item>
- <el-form-item label="缁熻鏃堕棿" prop="collectTime">
- <el-date-picker clearable
- v-model="form.collectTime"
- type="datetime"
- value-format="YYYY-MM-DD HH:mm:ss"
- placeholder="璇烽�夋嫨缁熻鏃堕棿">
- </el-date-picker>
- </el-form-item>
- </el-form>
- <template #footer>
- <div class="dialog-footer">
- <el-button :loading="buttonLoading" type="primary" @click="submitForm">纭� 瀹�</el-button>
- <el-button @click="cancel">鍙� 娑�</el-button>
+ />
+ </el-card>
+ </div>
+ <div v-show="activeName=='second'">
+ <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+ <div class="search" v-show="showSearch">
+ <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
+ <el-form-item label="缁熻鍛ㄦ湡" prop="collectTime">
+ <el-date-picker clearable
+ v-model="queryParams.collectTime"
+ type="date"
+ value-format="YYYY-MM-DD"
+ placeholder="璇烽�夋嫨缁熻鍛ㄦ湡"
+ />
+ </el-form-item>
+ <el-form-item>
+ <el-button type="primary" @click="handleQuery">鎼滅储</el-button>
+ <el-button type="primary" @click="handleQuery">鏂板</el-button>
+ <el-button type="primary" @click="handleQuery">瀵煎叆</el-button>
+ </el-form-item>
+ </el-form>
</div>
- </template>
+ </transition>
+
+ <el-card shadow="never">
+
+ <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
+ <el-table-column label="搴忓彿" type="index" width="55" align="center" />
+ <el-table-column label="鏈�鏂扮粺璁″懆鏈�" align="center" prop="areaName" />
+ <el-table-column label="缁煎悎骞冲潎鎸囨暟" align="center" prop="areaCode" />
+ <el-table-column label="姣涘彂鎶芥闃虫�х巼" align="center" prop="collectTime" width="180"/>
+ <el-table-column label="鏂板鍚告瘨浜哄憳" align="center" prop="collectTime" width="180"/>
+ <el-table-column label="鎸囨爣鍚嶇О1" align="center" prop="collectTime" width="180"/>
+ <el-table-column label="鎿嶄綔" align="center" class-name="small-padding fixed-width">
+ <template #default="scope">
+ <el-button link type="primary" @click="handleUpdate(scope.row)" v-hasPermi="['td:data:edit']">璁板綍</el-button>
+ <el-button link type="primary" @click="handleUpdate(scope.row)" v-hasPermi="['td:data:edit']">缂栬緫</el-button>
+ <!-- <el-tooltip content="淇敼" placement="top">-->
+ <!-- <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['td:data:edit']"></el-button>-->
+ <!-- </el-tooltip>-->
+ <!-- <el-tooltip content="鍒犻櫎" placement="top">-->
+ <!-- <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['td:data:remove']"></el-button>-->
+ <!-- </el-tooltip>-->
+ </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-card>
+ </div>
+ <!-- 娣诲姞鎴栦慨鏀规寚鏍囨暟鎹璇濇 -->
+ <el-dialog title="瀵煎叆" v-model="dialogDr.visible" width="500px" append-to-body>
+ <el-upload
+ v-model:file-list="fileList"
+ class="upload-demo"
+ action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+ multiple
+ :on-preview="handlePreview"
+ :on-remove="handleRemove"
+ :before-remove="beforeRemove"
+ :limit="3"
+ :on-exceed="handleExceed"
+ >
+ <el-button type="primary">涓婁紶闄勪欢</el-button>
+ <template #tip>
+ <div class="el-upload__tip">
+ 闄愬埗500KB.
+ </div>
+ </template>
+ </el-upload>
+ <div style="text-align: right">
+ <el-button @click="dialogDr.visible=false">鍙栨秷</el-button>
+ <el-button type="primary" @click="dialogDr.visible=false">纭畾</el-button>
+ </div>
+ </el-dialog>
+ <el-dialog title="鏌ョ湅璇︽儏" v-model="dialog.visible" width="80%" append-to-body>
+ <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
+ <el-table-column label="鎸囨爣鍚嶇О" align="center" prop="areaName" width="180"/>
+ <el-table-column label="2023-01" align="center" prop="collectTime" width="180"/>
+ <el-table-column label="2023-02" align="center" prop="areaCode" />
+ <el-table-column label="2023-03" align="center" prop="collectTime" width="180"/>
+ <el-table-column label="2023-04" align="center" prop="collectTime" width="180"/>
+ <el-table-column label="2023-05" align="center" prop="collectTime" width="180"/>
+ <el-table-column label="2023-06" align="center" prop="collectTime" width="180"/>
+ <el-table-column label="2023-07" align="center" prop="collectTime" width="180"/>
+ <el-table-column label="2023-08" align="center" prop="collectTime" width="180"/>
+ <el-table-column label="2023-09" align="center" prop="collectTime" width="180"/>
+ <el-table-column label="2023-10" align="center" prop="collectTime" width="180"/>
+ <el-table-column label="2023-11" align="center" prop="collectTime" width="180"/>
+ <el-table-column label="2023-12" align="center" prop="collectTime" width="180"/>
+
+ </el-table>
+ <pagination
+ v-show="total>0"
+ :total="total"
+ v-model:page="queryParams.pageNum"
+ v-model:limit="queryParams.pageSize"
+ @pagination="getList"
+ />
</el-dialog>
</div>
</template>
<script setup name="Data" lang="ts">
-import { listData, getData, delData, addData, updateData } from '@/api/system/data';
-import { DataVO, DataQuery, DataForm } from '@/api/system/data/types';
-
+import { listData, getData, delData, addData, updateData } from '@/api/td/data';
+import { DataVO, DataQuery, DataForm } from '@/api/td/data/types';
+import type { TabsPaneContext, UploadProps, UploadUserFile } from "element-plus";
+import router from "@/router";
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-
+const activeName = ref('first')
const dataList = ref<DataVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
@@ -124,7 +186,10 @@
visible: false,
title: ''
});
-
+const dialogDr = reactive<DialogOption>({
+ visible: false,
+ title: ''
+});
const initFormData: DataForm = {
id: undefined,
areaName: undefined,
@@ -159,7 +224,37 @@
});
const { queryParams, form, rules } = toRefs(data);
+// 瀵煎叆
+const fileList = ref<UploadUserFile[]>([
+])
+const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
+ console.log(file, uploadFiles)
+}
+
+const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
+ console.log(uploadFile)
+}
+
+const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
+ ElMessage.warning(
+ `The limit is 3, you selected ${files.length} files this time, add up to ${
+ files.length + uploadFiles.length
+ } totally`
+ )
+}
+
+const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
+ return ElMessageBox.confirm(
+ `Cancel the transfer of ${uploadFile.name} ?`
+ ).then(
+ () => true,
+ () => false
+ )
+}
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+ console.log(tab.props.label, activeName)
+}
/** 鏌ヨ鎸囨爣鏁版嵁鍒楄〃 */
const getList = async () => {
loading.value = true;
@@ -186,7 +281,10 @@
queryParams.value.pageNum = 1;
getList();
}
-
+const handleAddData = () => {
+ // const tableId = row?.tableId || ids.value[0];
+ router.push({ path: '/td/edit', query: { pageNum: queryParams.value.pageNum } });
+}
/** 閲嶇疆鎸夐挳鎿嶄綔 */
const resetQuery = () => {
queryFormRef.value?.resetFields();
@@ -206,7 +304,9 @@
dialog.visible = true;
dialog.title = "娣诲姞鎸囨爣鏁版嵁";
}
-
+const handledata=(row: any)=>{
+ router.push({ path: '/td/edit', query: { pageNum: queryParams.value.pageNum } });
+}
/** 淇敼鎸夐挳鎿嶄綔 */
const handleUpdate = async (row?: DataVO) => {
reset();
@@ -245,7 +345,7 @@
/** 瀵煎嚭鎸夐挳鎿嶄綔 */
const handleExport = () => {
- proxy?.download('system/data/export', {
+ proxy?.download('td/data/export', {
...queryParams.value
}, `data_${new Date().getTime()}.xlsx`)
}
--
Gitblit v1.8.0