From 7c20fd15b7fbc2bd5756b39d5ab655cc849ffcc3 Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期三, 16 七月 2025 22:39:23 +0800
Subject: [PATCH] 添加时间筛选
---
src/components/Table/index.vue | 230 +++++++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 191 insertions(+), 39 deletions(-)
diff --git a/src/components/Table/index.vue b/src/components/Table/index.vue
index 23b30cf..173148a 100644
--- a/src/components/Table/index.vue
+++ b/src/components/Table/index.vue
@@ -1,25 +1,55 @@
<template>
<div class="Table">
- <el-table ref="multipleTable" :data="tableData" style="width: 100%"
- :header-cell-style="{background:'#06122c','font-size':'12px',color:'#4b9bb7','font-weight':'650','line-height':'45px'}"
- :row-class-name="tableRowClassName">
- <el-table-column type="selection" :min-width="5">
- </el-table-column>
- <el-table-column v-for="(item,idx) in option.group" :key="item.prop" :label="item.label" :prop="item.prop"
- :min-width="item['min-width'] ? item['item.min-width']:'10'">
- <template slot-scope="scope">
- <div v-if="item.type === 'text'">
- {{scope.row[item.prop]}}
- </div>
- <div v-else class="operationBox">
- <div class="divider" v-for="(child,index) in item.children" :key="child.operationName">
- <span @click="backMykey(scope.$index,child.mykey)">{{child.operationName}}</span>
- <el-divider direction="vertical" v-if="index !== item.children.length-1"></el-divider>
+ <div class="datatable">
+ <el-table
+ border
+ stripe
+ ref="multipleTable" :data="tableData" style="width: 100%"
+ :header-cell-style="{'background':'#F5F5F5','font-size':'14px','font-weight':'650','line-height':'45px'}"
+ :row-class-name="tableRowClassName">
+
+ <el-table-column type="selection" min-width="5"> </el-table-column>
+ <el-table-column v-for="item in option.group" :key="item.prop" :label="item.label"
+ :prop="item.prop" :min-width="item['min-width'] ? item['item.min-width']:'10'">
+ <template slot-scope="scope">
+ <div v-if="item.type === 'text'">
+ {{scope.row[item.prop]}}
</div>
- </div>
- </template>
- </el-table-column>
- </el-table>
+ <slot v-else-if="item.type === 'operation'" name="operation" :info="scope">
+
+ </slot>
+ <slot name="status" v-else-if="item.type === 'status'" :info="scope">
+ </slot>
+ <slot name='time' v-else-if="item.type === 'time'" :timeobj="scope">
+
+ </slot>
+ </template>
+ </el-table-column>
+ </el-table>
+ </div>
+ <!-- tools -->
+ <div class="tools" v-if="pageShow">
+ <div class="funs">
+ <div class="funsItem sp-item">
+ <el-checkbox v-model="all" @change="selectAll()">鍏ㄩ��</el-checkbox>
+ </div>
+ <div class="funsItem sp-item">
+ <el-checkbox v-model="unsame" @change="disSame(tableData)">鍙嶉��</el-checkbox>
+ </div>
+ <div class="funsItem">
+ <el-select v-model="myIdx" placeholder="鎵归噺鎿嶄綔" @change="selectChange">
+ <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
+ :disabled="item.disabled">
+ </el-option>
+ </el-select>
+ </div>
+ </div>
+ <div class="pagination">
+ <el-pagination background :current-page="currentPage" layout="prev, pager, next" :total="myTotalNum"
+ :page-size="pageSize" @current-change="changeCurrentPage">
+ </el-pagination>
+ </div>
+ </div>
</div>
</template>
<script>
@@ -27,22 +57,67 @@
export default {
data() {
return {
-
+ myTotalNum: null,
+ pageSize: 2,
+ currentPage: 1,
+ all: false,
+ unsame: false,
+ myIdx: null,
+ options: [
+ {
+ value: 1,
+ label: '鎵归噺鍚敤',
+ },
+ {
+ value: 2,
+ label: '鎵归噺绂佺敤',
+ },
+ {
+ value: 3,
+ label: '鎵归噺鍒犻櫎',
+ }
+ ],
+ tempList: []
}
},
props: {
+ getTableList: {
+ type: Function,
+ default: () => {}
+ },
+ // 琛ㄦ牸鏁版嵁
tableData: {
type: Array,
dafault: () => [],
},
+ // 琛ㄥご銆乸rop銆佺被鍨�
tableOption: {
type: Object,
default: () => { }
},
- openDialog:{
- type:Function,
- default:()=>{()=>{console.log(1)}}
+ // 寮圭獥
+ openDialog: {
+ type: Function,
+ default: () => { }
+ },
+ // 鑾峰彇褰撳墠椤�
+ getCurrentPage: {
+ type: Function,
+ default: () => { }
+ },
+ // 鍒嗛〉鎬绘暟
+ totalNum: {
+ type: Number,
+ default: 1
+ },
+ // 鏄惁灞曠ず鍒嗛〉
+ pageShow:{
+ type: Boolean,
+ default: false,
}
+ },
+ created() {
+ this.myTotalNum = JSON.parse(JSON.stringify(this.totalNum));
},
computed: {
option() {
@@ -52,38 +127,115 @@
methods: {
// 璁剧疆琛ㄦ牸鏂戦┈绾�
tableRowClassName({ row, rowIndex }) {
- if ((rowIndex + 1) % 2 == 0) {
+ if ((rowIndex + 1) % 2 === 0) {
return 'warning-row';
} else {
return 'success-row';
}
- return '';
},
- // 鑾峰彇鐐瑰嚮鐨勫叧閿瓧
- backMykey(index,value){
- this.$emit('openDialog',{index,mykey:value})
- }
+ // 褰撳墠椤垫敼鍙樿Е鍙戜簨浠�
+ changeCurrentPage(page) {
+ this.currentPage = page;
+ this.$emit('getCurrentPage', page);
+ },
+ // 鍏ㄩ��
+ selectAll() {
+ this.$refs.multipleTable.toggleAllSelection();
+ },
+ // 鍙嶉��
+ disSame(list) {
+ list.forEach(row => {
+ this.$refs.multipleTable.toggleRowSelection(row)
+ })
+ },
+ // 鍒嗛〉涓嬫媺妗嗘壒閲忔搷浣�
+ async selectChange(list) {
+ console.log(this.tempList);
+ if (this.tempList.length !== 0) {
+ if (list === 3) {
+ await this.handleDelete(this.tempList);
+ } else if (list === 2) {
+ await this.mulUpdateStatus(this.tempList, 0);
+ } else {
+ await this.mulUpdateStatus(this.tempList, 1);
+ }
+ this.myIdx = null;
+ } else {
+ this.myIdx = null;
+ this.$message({
+ type: 'warning',
+ message: '鎮ㄨ繕娌￠�変腑浠讳綍鏁版嵁',
+ })
+ }
+ },
}
}
</script>
<style lang="scss" scoped>
.Table {
width: 100%;
- .el-table{
- color: #4b9bb7;
- }
- &::v-deep .warning-row {
- background-color: #06122c;
+
+ .el-table {
+ // color: #4b9bb7;
}
- &::v-deep .success-row {
- background-color: #071f39;
+ .tools {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0 20px;
+
+ .funs {
+ display: flex;
+
+ .sp-item {
+ // border: 1px solid #17324c;
+ }
+
+ .funsItem {
+ line-height: 28px;
+ display: flex;
+ align-items: center;
+ border-radius: 4px;
+ font-size: 12px;
+ margin-left: 10px;
+
+ .el-checkbox {
+ width: 80px;
+ padding: 0 10px;
+ }
+
+ .el-select {
+ width: 120px;
+ }
+
+ &::v-deep .el-input__inner {
+ border: none;
+ // background-color: #09152f;
+ }
+
+ &:hover .el-checkbox {
+ color: #4b9bb7;
+ }
+ }
+
+ }
+
+ .pagination {
+ margin-top: 50px;
+ display: flex;
+ line-height: 50px;
+ justify-content: center;
+ }
}
- .operationBox{
+
+
+ .operationBox {
display: flex;
}
- .el-divider{
+
+ .el-divider {
background-color: #4b9bb7;
}
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.8.0