From 92837a8a6b2bf8badb0f43bc6a39957a0375b721 Mon Sep 17 00:00:00 2001
From: admin <15939171744@163.com>
Date: 星期三, 20 十一月 2024 16:42:53 +0800
Subject: [PATCH] -表格加边框
---
billion-ui/src/views/main/da/paramCollection/index.vue | 107 +++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 83 insertions(+), 24 deletions(-)
diff --git a/billion-ui/src/views/main/da/paramCollection/index.vue b/billion-ui/src/views/main/da/paramCollection/index.vue
index 6c7c33b..90eb342 100644
--- a/billion-ui/src/views/main/da/paramCollection/index.vue
+++ b/billion-ui/src/views/main/da/paramCollection/index.vue
@@ -1,7 +1,7 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
- <el-form-item label="鎬绘垚搴忓垪鍙�" prop="sfcCode">
+ <el-form-item label-width="120" label="鎬绘垚搴忓垪鍙�" prop="sfcCode">
<el-input
v-model="queryParams.sfcCode"
placeholder="璇疯緭鍏ユ�绘垚搴忓垪鍙�"
@@ -9,7 +9,14 @@
@keyup.enter.native="handleQuery"
/>
</el-form-item>
- <el-form-item label="宸ヤ綅缂栫爜" prop="locationCode">
+ <el-form-item style="float: right">
+ <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">鎼滅储</el-button>
+ <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">閲嶇疆</el-button>
+ <el-button icon="el-icon-setting" size="mini" @click="toggleAdvancedSearch">楂樼骇鏌ヨ</el-button>
+ </el-form-item>
+ <transition name="fade">
+ <div v-if="advancedSearchVisible" class="advanced-search">
+ <el-form-item label="宸ヤ綅缂栫爜" prop="locationCode">
<el-input
v-model="queryParams.locationCode"
placeholder="璇疯緭鍏ュ伐浣嶇紪鐮�"
@@ -25,18 +32,30 @@
@keyup.enter.native="handleQuery"
/>
</el-form-item>
- <el-form-item label="鍙傛暟鍚嶇О" prop="paramName">
- <el-input
- v-model="queryParams.paramName"
- placeholder="璇疯緭鍏ュ弬鏁板悕绉�"
- clearable
- @keyup.enter.native="handleQuery"
- />
- </el-form-item>
- <el-form-item>
- <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">鎼滅储</el-button>
- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">閲嶇疆</el-button>
- </el-form-item>
+ <el-form-item label="鍙傛暟鍚嶇О" prop="paramName">
+ <el-input
+ v-model="queryParams.paramName"
+ placeholder="璇疯緭鍏ュ弬鏁板悕绉�"
+ clearable
+ @keyup.enter.native="handleQuery"
+ />
+ </el-form-item>
+ <el-form-item label="閲囬泦鏃堕棿" prop="collectTime">
+ <el-date-picker
+ v-model="queryParams.collectTime"
+ type="datetime"
+ placeholder="璇烽�夋嫨閲囬泦鏃堕棿"
+ value-format="yyyy-MM-dd HH:mm:ss"
+ />
+ </el-form-item>
+ <!-- 鍙互缁х画娣诲姞鍏朵粬楂樼骇鏌ヨ鏉′欢 -->
+ <el-row>
+ <el-col :span="24" style="text-align: right;">
+ <el-button type="primary" icon="el-icon-close" size="mini" @click="toggleAdvancedSearch">鍏抽棴</el-button>
+ </el-col>
+ </el-row>
+ </div>
+ </transition>
</el-form>
<el-row :gutter="10" class="mb8">
@@ -85,18 +104,15 @@
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
- <el-table v-loading="loading" :data="paramCollectionList" @selection-change="handleSelectionChange">
+ <el-table v-loading="loading" border :data="paramCollectionList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
- <el-table-column label="涓婚敭id" align="center" prop="id" />
+<!-- <el-table-column label="涓婚敭id" align="center" prop="id" />-->
<el-table-column label="鎬绘垚搴忓垪鍙�" align="center" prop="sfcCode" />
<el-table-column label="宸ヤ綅缂栫爜" align="center" prop="locationCode" />
<el-table-column label="鍙傛暟缂栫爜" align="center" prop="paramCode" />
<el-table-column label="鍙傛暟鍚嶇О" align="center" prop="paramName" />
<el-table-column label="鍙傛暟鍊�" align="center" prop="paramValue" />
<el-table-column label="閲囬泦鏃堕棿" align="center" prop="collectTime" width="180">
- <template slot-scope="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 slot-scope="scope">
@@ -128,7 +144,7 @@
<!-- 娣诲姞鎴栦慨鏀瑰弬鏁伴噰闆嗗璇濇 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
- <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+ <el-form ref="form" :model="form" :rules="rules" label-width="95px">
<el-form-item label="鎬绘垚搴忓垪鍙�" prop="sfcCode">
<el-input v-model="form.sfcCode" placeholder="璇疯緭鍏ユ�绘垚搴忓垪鍙�" />
</el-form-item>
@@ -160,6 +176,7 @@
name: "ParamCollection",
data() {
return {
+ advancedSearchVisible: false,
// 閬僵灞�
loading: true,
// 閫変腑鏁扮粍
@@ -192,16 +209,20 @@
// 琛ㄥ崟鏍￠獙
rules: {
sfcCode: [
- { required: true, message: "鎬绘垚搴忓垪鍙蜂笉鑳戒负绌�", trigger: "blur" }
+ { required: true, message: "鎬绘垚搴忓垪鍙蜂笉鑳戒负绌�", trigger: "blur" },
+ { pattern: /^[a-zA-Z0-9]*$/, message: "鎬绘垚搴忓垪鍙蜂笉鑳藉寘鍚腑鏂囧瓧绗�", trigger: "blur" }
],
locationCode: [
- { required: true, message: "宸ヤ綅缂栫爜涓嶈兘涓虹┖", trigger: "blur" }
+ { required: true, message: "宸ヤ綅缂栫爜涓嶈兘涓虹┖", trigger: "blur" },
+ { pattern: /^[a-zA-Z0-9]*$/, message: "鎬绘垚搴忓垪鍙蜂笉鑳藉寘鍚腑鏂囧瓧绗�", trigger: "blur" }
],
paramCode: [
- { required: true, message: "鍙傛暟缂栫爜涓嶈兘涓虹┖", trigger: "blur" }
+ { required: true, message: "鍙傛暟缂栫爜涓嶈兘涓虹┖", trigger: "blur" },
+ { pattern: /^[a-zA-Z0-9]*$/, message: "鎬绘垚搴忓垪鍙蜂笉鑳藉寘鍚腑鏂囧瓧绗�", trigger: "blur" }
],
paramValue: [
- { required: true, message: "鍙傛暟鍊间笉鑳戒负绌�", trigger: "blur" }
+ { required: true, message: "鍙傛暟鍊间笉鑳戒负绌�", trigger: "blur" },
+ { pattern: /^[a-zA-Z0-9]*$/, message: "鎬绘垚搴忓垪鍙蜂笉鑳藉寘鍚腑鏂囧瓧绗�", trigger: "blur" }
],
}
};
@@ -210,6 +231,10 @@
this.getList();
},
methods: {
+ toggleAdvancedSearch() {
+ this.advancedSearchVisible = !this.advancedSearchVisible;
+
+ },
/** 鏌ヨ鍙傛暟閲囬泦鍒楄〃 */
getList() {
this.loading = true;
@@ -235,17 +260,26 @@
paramValue: null,
collectTime: null
};
+
+
this.resetForm("form");
},
/** 鎼滅储鎸夐挳鎿嶄綔 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
+ this.advancedSearchVisible = false
},
/** 閲嶇疆鎸夐挳鎿嶄綔 */
resetQuery() {
+ this.clearQueryParams()
this.resetForm("queryForm");
this.handleQuery();
+ },
+ clearQueryParams(){
+ this.queryParams.paramName = null
+ this.queryParams.locationCode = null
+ this.queryParams.paramCode = null
},
// 澶氶�夋閫変腑鏁版嵁
handleSelectionChange(selection) {
@@ -308,3 +342,28 @@
}
};
</script>
+<style scoped>.fade-enter-active, .fade-leave-active {
+ transition: opacity 0.3s;
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
+ opacity: 0;
+}
+
+.advanced-search {
+ position: absolute;
+ background: #FFFFFF; /* 璁剧疆涓轰笌椤甸潰鑳屾櫙鑹茬浉鍚屾垨鐩歌繎鐨勯鑹� */
+ border-left: 1px solid #dcdfe6;
+ border-right: 1px solid #dcdfe6;
+ border-bottom: 1px solid #dcdfe6;
+ /*border: none;*/
+ box-shadow: none; /* 绉婚櫎闃村奖 */
+ padding: 10px;
+ z-index: 1000; /* 纭繚娴姩鍦ㄥ叾浠栧厓绱犱箣涓� */
+ top: 70px; /* 璋冩暣椤堕儴浣嶇疆锛屼娇鍏朵笌椤甸潰鍏朵粬鍏冪礌鏇村崗璋� */
+ left: 20px; /* 璋冩暣宸︿晶浣嶇疆 */
+ width: 97%; /* 璋冩暣瀹藉害 */
+ /*max-width: 1296px; !* 鏈�澶у搴� *!*/
+ /*max-width: 1296px; !* 鏈�澶у搴� *!*/
+ margin: 0 auto; /* 灞呬腑瀵归綈 */
+}
+</style>
--
Gitblit v1.9.3