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/ti/trafficIndex/index.vue | 279 +++++++++++++++++++++++++++----------------------------
1 files changed, 139 insertions(+), 140 deletions(-)
diff --git a/src/views/ti/trafficIndex/index.vue b/src/views/ti/trafficIndex/index.vue
index 73865e0..e7470b4 100644
--- a/src/views/ti/trafficIndex/index.vue
+++ b/src/views/ti/trafficIndex/index.vue
@@ -6,130 +6,117 @@
</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="periodDate">
- <el-input v-model="queryParams.periodDate" placeholder="璇疯緭鍏ョ粺璁″懆鏈�" clearable style="width: 240px" @keyup.enter="handleQuery" />
- </el-form-item>
- <el-form-item label="鐘舵��" prop="status">
- <el-select v-model="queryParams.status" placeholder="璇烽�夋嫨" clearable style="width: 240px" @keyup.enter="handleQuery" >
- <el-option key="1" label="宸插惎鐢�" value="1" />
- <el-option key="2" label="宸茬鐢�" value="2" />
- </el-select>
- </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-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="['rs:trafficIndex:add']">鏂板</el-button>
- </el-col>
- <el-col :span="1.5">
- <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['rs:trafficIndex:edit']">淇敼</el-button>
- </el-col>
- <el-col :span="1.5">
- <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['rs:trafficIndex:remove']">鍒犻櫎</el-button>
- </el-col>
- <el-col :span="1.5">
- <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['rs:trafficIndex:export']">瀵煎嚭</el-button>
- </el-col>
- <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
- </el-row>
- </template>
-
- <el-table v-loading="loading" :data="trafficIndexList" @selection-change="handleSelectionChange">
- <el-table-column type="selection" width="55" align="center" />
- <el-table-column label="搴忓彿" type="index" width="50"/>
- <el-table-column label="妯″潡鍚嶇О" align="center" prop="modeName" />
- <el-table-column label="鎸囨爣1" align="center" prop="targetOneName" />
- <el-table-column label="鏁板��" align="center" prop="targetOneValue" />
- <el-table-column label="鎸囨爣2" align="center" prop="targetTwoName" />
- <el-table-column label="鏁板��" align="center" prop="targetTwoValue" />
- <el-table-column label="鎸囨爣3" align="center" prop="targetThreeName" />
- <el-table-column label="鏁板��" align="center" prop="targetThreeValue" />
- <el-table-column label="鎸囨爣4" align="center" prop="targetFourName" />
- <el-table-column label="鏁板��" align="center" prop="targetFourValue" />
- <el-table-column label="鐘舵��" align="center" prop="status">
- <template #default="scope">
- <span v-show="scope.row['status'] == 1">宸插惎鐢�</span>
- <span v-show="scope.row['status'] == 2" style="color: rgba(227, 70,101);">宸茬鐢�</span>
- </template>
- </el-table-column>
- <el-table-column label="鍒涘缓鏃堕棿" align="center" prop="createTime"/>
- <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="['rs:trafficIndex:edit']"></el-button>
- </el-tooltip>
- <el-tooltip content="鍒犻櫎" placement="top">
- <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['rs:trafficIndex: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>
- <div v-show="activeName=='second'">
- <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
- <div>
- <el-form-item :label=" '鎸囨爣' + (index + 1) + '鍥炬爣锛�'" prop="" v-for="(item, index) in icons" :key="item.id">
- <el-upload action="#" list-type="picture-card" :auto-upload="false">
- <el-icon><Plus /></el-icon>
- <template #file="{ file }">
- <div>
- <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
- <span class="el-upload-list__item-actions">
- <span
- class="el-upload-list__item-preview"
- @click="handlePictureCardPreview(file)"
- >
- <el-icon><zoom-in /></el-icon>
- </span>
- <span
- v-if="!disabled"
- class="el-upload-list__item-delete"
- @click="handleDownload(file)"
- >
- <el-icon><Download /></el-icon>
- </span>
- <span
- v-if="!disabled"
- class="el-upload-list__item-delete"
- @click="handleRemove(file)"
- >
- <el-icon><Delete /></el-icon>
- </span>
- </span>
- </div>
- </template>
- </el-upload>
- <el-dialog v-model="dialogVisible">
- <img w-full :src="dialogImageUrl" alt="Preview Image" />
- </el-dialog>
+ <div class="search" v-show="showSearch">
+ <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
+ <el-form-item label="缁熻鍛ㄦ湡" prop="periodDate">
+ <el-input v-model="queryParams.periodDate" placeholder="璇疯緭鍏ョ粺璁″懆鏈�" clearable style="width: 240px" @keyup.enter="handleQuery" />
</el-form-item>
- </div>
- </transition>
- </div>
+ <el-form-item label="鐘舵��" prop="status">
+ <el-select v-model="queryParams.status" placeholder="璇烽�夋嫨" clearable style="width: 240px" @keyup.enter="handleQuery">
+ <el-option key="1" label="宸插惎鐢�" value="1" />
+ <el-option key="2" label="宸茬鐢�" value="2" />
+ </el-select>
+ </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-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="['rs:trafficIndex:add']">鏂板</el-button>
+ </el-col>
+ <el-col :span="1.5">
+ <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['rs:trafficIndex:edit']"
+ >淇敼</el-button
+ >
+ </el-col>
+ <el-col :span="1.5">
+ <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['rs:trafficIndex:remove']"
+ >鍒犻櫎</el-button
+ >
+ </el-col>
+ <el-col :span="1.5">
+ <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['rs:trafficIndex:export']">瀵煎嚭</el-button>
+ </el-col>
+ <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+ </el-row>
+ </template>
+
+ <el-table v-loading="loading" :data="trafficIndexList" @selection-change="handleSelectionChange">
+ <el-table-column type="selection" width="55" align="center" />
+ <el-table-column label="搴忓彿" type="index" width="50" />
+ <el-table-column label="妯″潡鍚嶇О" align="center" prop="modeName" />
+ <el-table-column label="鎸囨爣1" align="center" prop="targetOneName" />
+ <el-table-column label="鏁板��" align="center" prop="targetOneValue" />
+ <el-table-column label="鎸囨爣2" align="center" prop="targetTwoName" />
+ <el-table-column label="鏁板��" align="center" prop="targetTwoValue" />
+ <el-table-column label="鎸囨爣3" align="center" prop="targetThreeName" />
+ <el-table-column label="鏁板��" align="center" prop="targetThreeValue" />
+ <el-table-column label="鎸囨爣4" align="center" prop="targetFourName" />
+ <el-table-column label="鏁板��" align="center" prop="targetFourValue" />
+ <el-table-column label="鐘舵��" align="center" prop="status">
+ <template #default="scope">
+ <span v-show="scope.row['status'] == 1">宸插惎鐢�</span>
+ <span v-show="scope.row['status'] == 2" style="color: rgba(227, 70,101);">宸茬鐢�</span>
+ </template>
+ </el-table-column>
+ <el-table-column label="鍒涘缓鏃堕棿" align="center" prop="createTime" />
+ <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="['rs:trafficIndex:edit']"></el-button>
+ </el-tooltip>
+ <el-tooltip content="鍒犻櫎" placement="top">
+ <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['rs:trafficIndex: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>
+ <div v-show="activeName=='second'">
+ <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+ <div>
+ <el-form-item :label=" '鎸囨爣' + (index + 1) + '鍥炬爣锛�'" prop="" v-for="(item, index) in icons" :key="item.id">
+ <el-upload action="#" list-type="picture-card" :auto-upload="false">
+ <el-icon><Plus /></el-icon>
+ <template #file="{ file }">
+ <div>
+ <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
+ <span class="el-upload-list__item-actions">
+ <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
+ <el-icon><zoom-in /></el-icon>
+ </span>
+ <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
+ <el-icon><Download /></el-icon>
+ </span>
+ <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
+ <el-icon><Delete /></el-icon>
+ </span>
+ </span>
+ </div>
+ </template>
+ </el-upload>
+ <el-dialog v-model="dialogVisible">
+ <img w-full :src="dialogImageUrl" alt="Preview Image" />
+ </el-dialog>
+ </el-form-item>
+ </div>
+ </transition>
+ </div>
<!-- 娣诲姞鎴栦慨鏀逛氦閫氭寚鏁板璇濇 -->
- <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
- <el-form ref="trafficIndexFormRef" :model="form" :rules="rules" label-width="80px">
+ <el-dialog :title="dialog.title" v-model="dialog.visible" width="840px" append-to-body>
+ <el-form ref="trafficIndexFormRef" :model="form" :inline="true" :rules="rules" label-width="80px">
<el-form-item label="妯″潡鍚嶇О" prop="modeName">
- <el-input v-model="form.modeName" placeholder="璇疯緭鍏ユā鍧楀悕绉�" />
+ <el-input class="el-input__width" v-model="form.modeName" placeholder="璇疯緭鍏ユā鍧楀悕绉�" />
</el-form-item>
<el-form-item label="缁熻鍛ㄦ湡" prop="periodDate" @change="clearPeriod">
<el-select v-model="form.period" placeholder="璇烽�夋嫨" style="width: 100px;">
@@ -137,16 +124,22 @@
<el-option key="2" label="鏈堝害" :value="2" />
</el-select>
 
- <el-date-picker v-model="form.periodDate" :type="pickerType" :value-format="pickerFormat" placeholder="璇烽�夋嫨缁熻鍛ㄦ湡" />
+ <el-date-picker
+ v-model="form.periodDate"
+ :type="pickerType"
+ :value-format="pickerFormat"
+ placeholder="璇烽�夋嫨缁熻鍛ㄦ湡"
+ style="width: 150px;"
+ />
</el-form-item>
<el-form-item label="鎸囨爣1" prop="targetOneName">
- <el-input v-model="form.targetOneName" placeholder="璇疯緭鍏ユ寚鏍�1鍚嶇О" />
+ <el-input class="el-input__width" v-model="form.targetOneName" placeholder="璇疯緭鍏ユ寚鏍�1鍚嶇О" />
</el-form-item>
<el-form-item label="鏁板��" prop="targetOneValue">
- <el-input v-model="form.targetOneValue" placeholder="璇疯緭鍏ユ寚鏍�1鍊�" />
+ <el-input class="el-input__width" v-model="form.targetOneValue" placeholder="璇疯緭鍏ユ寚鏍�1鍊�" />
</el-form-item>
<el-form-item label="鍗曚綅" prop="targetOneUnit">
- <el-input v-model="form.targetOneUnit" placeholder="璇疯緭鍏ユ寚鏍�1鍗曚綅" />
+ <el-input class="el-input__width" v-model="form.targetOneUnit" placeholder="璇疯緭鍏ユ寚鏍�1鍗曚綅" />
</el-form-item>
<el-form-item label="娑ㄥ箙" prop="targetOneCompareValue">
<el-select v-model="form.targetOneStatus" placeholder="璇烽�夋嫨" style="width: 100px;">
@@ -154,16 +147,16 @@
<el-option key="2" label="涓嬮檷" :value="2" />
</el-select>
 
- <el-input v-model="form.targetOneCompareValue" placeholder="璇疯緭鍏ユ寚鏍�1涓婃诞鎴栦笅闄嶅��" style="width: 200px;"/>
+ <el-input v-model="form.targetOneCompareValue" style="width: 150px;" />
</el-form-item>
<el-form-item label="鎸囨爣2" prop="targetTwoName">
- <el-input v-model="form.targetTwoName" placeholder="璇疯緭鍏ユ寚鏍�2鍚嶇О" />
+ <el-input class="el-input__width" v-model="form.targetTwoName" placeholder="璇疯緭鍏ユ寚鏍�2鍚嶇О" />
</el-form-item>
<el-form-item label="鏁板��" prop="targetTwoValue">
- <el-input v-model="form.targetTwoValue" placeholder="璇疯緭鍏ユ寚鏍�2鍊�" />
+ <el-input class="el-input__width" v-model="form.targetTwoValue" placeholder="璇疯緭鍏ユ寚鏍�2鍊�" />
</el-form-item>
<el-form-item label="鍗曚綅" prop="targetTwoUnit">
- <el-input v-model="form.targetTwoUnit" placeholder="璇疯緭鍏ユ寚鏍�2鍗曚綅" />
+ <el-input class="el-input__width" v-model="form.targetTwoUnit" placeholder="璇疯緭鍏ユ寚鏍�2鍗曚綅" />
</el-form-item>
<el-form-item label="娑ㄥ箙" prop="targetTwoCompareValue">
<el-select v-model="form.targetTwoStatus" placeholder="璇烽�夋嫨" style="width: 100px;">
@@ -171,16 +164,16 @@
<el-option key="2" label="涓嬮檷" :value="2" />
</el-select>
 
- <el-input v-model="form.targetTwoCompareValue" placeholder="璇疯緭鍏ユ寚鏍�2涓婃诞鎴栦笅闄嶅��" style="width: 200px;" />
+ <el-input v-model="form.targetTwoCompareValue" style="width: 150px;" />
</el-form-item>
<el-form-item label="鎸囨爣3" prop="targetThreeName">
- <el-input v-model="form.targetThreeName" placeholder="璇疯緭鍏ユ寚鏍�3鍚嶇О" />
+ <el-input class="el-input__width" v-model="form.targetThreeName" placeholder="璇疯緭鍏ユ寚鏍�3鍚嶇О" />
</el-form-item>
<el-form-item label="鏁板��" prop="targetThreeValue">
- <el-input v-model="form.targetThreeValue" placeholder="璇疯緭鍏ユ寚鏍�3鍊�" />
+ <el-input class="el-input__width" v-model="form.targetThreeValue" placeholder="璇疯緭鍏ユ寚鏍�3鍊�" />
</el-form-item>
<el-form-item label="鍗曚綅" prop="targetThreeUnit">
- <el-input v-model="form.targetThreeUnit" placeholder="璇疯緭鍏ユ寚鏍�3鍗曚綅" />
+ <el-input class="el-input__width" v-model="form.targetThreeUnit" placeholder="璇疯緭鍏ユ寚鏍�3鍗曚綅" />
</el-form-item>
<el-form-item label="娑ㄥ箙" prop="targetThreeCompareValue">
<el-select v-model="form.targetThreeStatus" placeholder="璇烽�夋嫨" style="width: 100px;">
@@ -188,16 +181,16 @@
<el-option key="2" label="涓嬮檷" :value="2" />
</el-select>
 
- <el-input v-model="form.targetThreeCompareValue" placeholder="璇疯緭鍏ユ寚鏍�3涓婃诞鎴栦笅闄嶅��" style="width: 200px;" />
+ <el-input v-model="form.targetThreeCompareValue" style="width: 150px;" />
</el-form-item>
<el-form-item label="鎸囨爣4" prop="targetFourName">
- <el-input v-model="form.targetFourName" placeholder="璇疯緭鍏ユ寚鏍�4鍚嶇О" />
+ <el-input class="el-input__width" v-model="form.targetFourName" placeholder="璇疯緭鍏ユ寚鏍�4鍚嶇О" />
</el-form-item>
<el-form-item label="鏁板��" prop="targetFourValue">
- <el-input v-model="form.targetFourValue" placeholder="璇疯緭鍏ユ寚鏍�4鍊�" />
+ <el-input class="el-input__width" v-model="form.targetFourValue" placeholder="璇疯緭鍏ユ寚鏍�4鍊�" />
</el-form-item>
<el-form-item label="鍗曚綅" prop="targetFourUnit">
- <el-input v-model="form.targetFourUnit" placeholder="璇疯緭鍏ユ寚鏍�4鍗曚綅" />
+ <el-input class="el-input__width" v-model="form.targetFourUnit" placeholder="璇疯緭鍏ユ寚鏍�4鍗曚綅" />
</el-form-item>
<el-form-item label="娑ㄥ箙" prop="targetFourCompareValue">
<el-select v-model="form.targetFourStatus" placeholder="璇烽�夋嫨" style="width: 100px;">
@@ -205,10 +198,10 @@
<el-option key="2" label="涓嬮檷" :value="2" />
</el-select>
 
- <el-input v-model="form.targetFourCompareValue" placeholder="璇疯緭鍏ユ寚鏍�4涓婃诞鎴栦笅闄嶅��" style="width: 200px;" />
+ <el-input class="el-input__width" v-model="form.targetFourCompareValue" style="width: 150px;" />
</el-form-item>
<el-form-item label="鐘舵��" prop="status">
- <el-select v-model="form.status" placeholder="璇烽�夋嫨">
+ <el-select v-model="form.status" placeholder="璇烽�夋嫨" style="width: 265px;">
<el-option key="1" label="宸插惎鐢�" :value="1" />
<el-option key="2" label="宸茬鐢�" :value="2" />
</el-select>
@@ -514,7 +507,7 @@
/** 娓呯┖鍛ㄦ湡 */
const clearPeriod = () => {
form.value.periodDate = undefined;
-};
+};
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'
@@ -537,3 +530,9 @@
console.log(file)
}
</script>
+
+<style scoped>
+.el-input__width {
+ width: 265px;
+ }
+</style>
--
Gitblit v1.8.0