From e80fb1e51d652d0ccecc27688c72a168c8297075 Mon Sep 17 00:00:00 2001 From: liukangdong <898885815@qq.com> Date: 星期四, 27 二月 2025 17:12:41 +0800 Subject: [PATCH] 表格优化lll --- admin/src/views/business/reportRecord.vue | 130 ++++++++++++++---------------------------- 1 files changed, 44 insertions(+), 86 deletions(-) diff --git a/admin/src/views/business/reportRecord.vue b/admin/src/views/business/reportRecord.vue index f9a206d..aef500a 100644 --- a/admin/src/views/business/reportRecord.vue +++ b/admin/src/views/business/reportRecord.vue @@ -1,77 +1,35 @@ <template> <div class="main_app"> - <QueryForm - v-model="filters" - :query-form-config="queryFormConfig" - @handleQuery="getList(1)" - @clear="clear" - /> - <div class="query_btns" style="margin: 16px 0 0" v-permissions="['business:visits:create', 'business:visits:exportExcel']"> - <el-button type="primary" @click="handleEdit()" icon="el-icon-plus" v-permissions="['business:visits:create']">鏂板缓</el-button> - <el-button type="primary" :loading="exLoading" @click="exportExcel" v-permissions="['business:visits:exportExcel']">瀵煎嚭</el-button> + + <div ref="QueryFormRef"> + <QueryForm v-model="filters" :query-form-config="queryFormConfig" @handleQuery="getList(1)" @clear="clear" /> </div> - <el-table - v-loading="loading" - :data="dataList" - stripe - row-key="id" - default-expand-all - > + <div class="query_btns" style="margin: 16px 0 0" + v-permissions="['business:visits:create', 'business:visits:exportExcel']"> + <el-button type="primary" @click="handleEdit()" icon="el-icon-plus" + v-permissions="['business:visits:create']">鏂板缓</el-button> + <el-button type="primary" :loading="exLoading" @click="exportExcel" + v-permissions="['business:visits:exportExcel']">瀵煎嚭</el-button> + </div> + <el-table :max-height="tableHeight" v-loading="loading" :data="dataList" stripe row-key="id" default-expand-all> <el-table-column type="selection" width="55" align="center"></el-table-column> - <el-table-column - prop="carNos" - label="鍏ュ洯杞﹁締" - min-width="100px" - ></el-table-column> - <el-table-column - prop="companyName" - label="鍏徃鍚嶇О" - min-width="100px" - ></el-table-column> - <el-table-column - prop="name" - label="鑱旂郴浜轰俊鎭�" - min-width="100px" - ></el-table-column> - <el-table-column - prop="phone" - label="鎵嬫満鍙�" - min-width="100px" - ></el-table-column> - <el-table-column - prop="receptMemberName" - label="琚浜�" - min-width="100px" - ></el-table-column> + <el-table-column prop="carNos" label="鍏ュ洯杞﹁締" min-width="100px"></el-table-column> + <el-table-column prop="companyName" label="鍏徃鍚嶇О" min-width="100px"></el-table-column> + <el-table-column prop="name" label="鑱旂郴浜轰俊鎭�" min-width="100px"></el-table-column> + <el-table-column prop="phone" label="鎵嬫満鍙�" min-width="100px"></el-table-column> + <el-table-column prop="receptMemberName" label="琚浜�" min-width="100px"></el-table-column> <el-table-column label="鎷滆鏃堕棿" min-width="160px"> <template slot-scope="{ row }"> - <span>璧凤細{{ row.starttime }}</span - ><br /> + <span>璧凤細{{ row.starttime }}</span><br /> <span>姝細{{ row.endtime }}</span> </template> </el-table-column> - <el-table-column - prop="reason" - label="鎷滆浜嬬敱" - min-width="100" - ></el-table-column> - <el-table-column - prop="status" - fixed="right" - label="鐘舵��" - align="center" - min-width="100" - > + <el-table-column prop="reason" label="鎷滆浜嬬敱" min-width="100"></el-table-column> + <el-table-column prop="status" fixed="right" label="鐘舵��" align="center" min-width="100"> <template slot-scope="{ row }"> - <span style="color: rgba(245, 154, 35, 0.996)" v-if="row.status === 0" - >寰呮彁浜ゅ鎵�</span - > - <span v-if="row.status === 1" style="color: rgba(245, 154, 35, 0.996)" - >澶勭悊涓�</span - > - <span v-if="row.status === 2" style="color: rgba(245, 154, 35, 0.996)" - >宸插悓鎰�</span - > + <span style="color: rgba(245, 154, 35, 0.996)" v-if="row.status === 0">寰呮彁浜ゅ鎵�</span> + <span v-if="row.status === 1" style="color: rgba(245, 154, 35, 0.996)">澶勭悊涓�</span> + <span v-if="row.status === 2" style="color: rgba(245, 154, 35, 0.996)">宸插悓鎰�</span> <span style="color: gray" v-if="row.status === 3">宸叉嫆缁�</span> <span v-if="row.status === 4" style="color: gray">鍙栨秷</span> <span v-if="row.status === 5" style="color: green">涓嬪彂鎴愬姛</span> @@ -83,21 +41,16 @@ </el-table-column> <el-table-column label="鎿嶄綔" align="center" width="180" fixed="right"> <template slot-scope="{ row }"> - <el-button - type="text" - @click="handleDetail(row)" - v-permissions="['business:company:update']">鏌ョ湅璇︽儏</el-button> - <el-button type="text" icon="el-icon-delete" @click="deleteById(row)" style="color: red" v-permissions="['business:visits:delete']">鍒犻櫎</el-button> + <el-button type="text" @click="handleDetail(row)" v-permissions="['business:company:update']">鏌ョ湅璇︽儏</el-button> + <el-button type="text" icon="el-icon-delete" @click="deleteById(row)" style="color: red" + v-permissions="['business:visits:delete']">鍒犻櫎</el-button> </template> </el-table-column> </el-table> - <pagination - @size-change="handleSizeChange" - @current-change="getList" - :pagination="pagination" - /> + <pagination class="mt10" @size-change="handleSizeChange" @current-change="getList" :pagination="pagination" /> <ReportDetail v-if="isShowReport" ref="VisReportDetailRef" /> - <OperaVisitsReportWindow @close="isShowEdit = false" @success="getList" v-if="isShowEdit" ref="operaVisitsWindowRef" /> + <OperaVisitsReportWindow @close="isShowEdit = false" @success="getList" v-if="isShowEdit" + ref="operaVisitsWindowRef" /> </div> </template> @@ -115,10 +68,11 @@ Pagination, OperaVisitsReportWindow }, - data () { + data() { return { isShowEdit: false, exLoading: false, + tableHeight: 400, isShowReport: false, activeTab: '0', @@ -154,11 +108,16 @@ total: 0 } }, - created () { + created() { this.getList() }, + mounted() { + this.$nextTick(() => { + this.tableHeight = document.body.scrollHeight - this.$refs.QueryFormRef.offsetHeight - 300 + }) + }, methods: { - exportExcel () { + exportExcel() { this.$dialog.exportConfirm('纭瀵煎嚭鍚楋紵') .then(() => { this.exLoading = true @@ -178,13 +137,13 @@ }) }) }, - handleEdit () { + handleEdit() { this.isShowEdit = true this.$nextTick(() => { this.$refs.operaVisitsWindowRef.isShowModal = true }) }, - deleteById (row) { + deleteById(row) { this.$confirm('纭畾鍒犻櫎璇ヨ褰曞悧, 鏄惁缁х画?', '鎻愮ず', { confirmButtonText: '纭畾', cancelButtonText: '鍙栨秷', @@ -199,7 +158,7 @@ }).catch(() => { }) }, - handleDetail (row) { + handleDetail(row) { this.isShowReport = true this.$nextTick(() => { this.$nextTick(() => { @@ -210,7 +169,7 @@ }) }) }, - getList (page) { + getList(page) { const { pagination, filters } = this pagination.page = page || pagination.page fetchList({ @@ -221,13 +180,13 @@ this.pagination.total = res.total }) }, - clear () { + clear() { this.filters = { type: 2 } this.getList(0) }, - handleSizeChange (capacity) { + handleSizeChange(capacity) { this.pagination.capacity = capacity this.getList() } @@ -235,5 +194,4 @@ } </script> -<style lang="scss" scoped> -</style> +<style lang="scss" scoped></style> -- Gitblit v1.9.3