From 07b12cc38419b27e43edabc250b9cf7ebd4e3879 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Fri, 27 Jun 2025 09:56:30 +0800
Subject: [PATCH] feat:事件工单样式调整
---
src/views/tickets/ticket.vue | 111 ++++++++++++++++++++++++++-----------------------------
1 files changed, 53 insertions(+), 58 deletions(-)
diff --git a/src/views/tickets/ticket.vue b/src/views/tickets/ticket.vue
index 6bf9848..8a06dcb 100644
--- a/src/views/tickets/ticket.vue
+++ b/src/views/tickets/ticket.vue
@@ -2,7 +2,7 @@
<basic-container>
<el-tabs v-model="activeTab" @tab-click="handleTabChange">
<el-tab-pane v-for="tab in filteredTabs" :key="tab.name" :label="`${tab.label} (${tab.count})`" :name="tab.name">
- <div class="tab-content">
+ <basic-main-content>
<!-- 查询条件筛选栏 -->
<div class="filter-bar">
<el-input v-model="filters.keyword" placeholder="请输入关键字" class="filter-item" clearable
@@ -33,7 +33,7 @@
<!-- 表格部分 -->
<avue-crud ref="avueCrud" v-model="tableData" :option="option" :data="tableData" v-model:page="page"
@size-change="sizeChange" @current-change="handleCurrentChange" :table-loading="loading"
- @selection-change="handleSelectionChange" :permission="permissionList">
+ @selection-change="handleSelectionChange" :permission="permissionList" v-if="activeTab === tab.name">
<template #menu-left>
<el-button v-if="(activeTab === 'all' || activeTab === 'myTickets') && permissionList.addBtn"
type="primary" icon="el-icon-plus" @click="handleAdd">新建工单</el-button>
@@ -69,12 +69,13 @@
<span>{{ showIsReviewText(row) }}</span>
</template>
</avue-crud>
- </div>
+ </basic-main-content>
</el-tab-pane>
</el-tabs>
<!-- 新建工单对话框 -->
- <el-dialog v-model="dialogVisible" v-if="dialogVisible" title="新建工单" width="70%" :close-on-click-modal="false" @close="resetForm">
+ <el-dialog v-model="dialogVisible" v-if="dialogVisible" title="新建工单" width="70%" :close-on-click-modal="false"
+ @close="resetForm">
<el-form :model="form" :rules="rules" ref="form" label-width="90px" class="create-ticket-form">
<div class="form-section">
<el-row :gutter="16">
@@ -585,6 +586,10 @@
addBtn: false,
menu: true,
page: true,
+
+ height: 'auto',
+ calcHeight: 196,
+
column: [
// { label: "序号", prop: "id", width: 70 },
{ label: '工单编号', prop: 'orderNumber', width: 120, overHidden: true, tooltip: true },
@@ -2449,12 +2454,51 @@
</script>
<style lang="scss" scoped>
-:deep() {
- .avue-crud__body {
- .el-form {
- height: 655px;
- overflow: auto;
+::v-deep(.el-tabs) {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+
+ .el-tabs__header {
+ order: 1;
+ }
+
+ .el-tabs__content {
+ order: 2;
+ }
+
+ .el-tabs__content {
+ height: 0;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+
+ .el-tab-pane {
+ height: 0;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
}
+ }
+}
+
+.filter-bar {
+ display: flex;
+ align-items: center;
+ margin-bottom: 15px;
+ flex-wrap: wrap;
+ gap: 8px; // 使用 gap 统一设置间距
+
+ .filter-item {
+ width: 160px; // 减小宽度
+ }
+
+ .date-picker {
+ width: 240px; // 日期选择器宽度适当调整
+ }
+
+ .el-button {
+ margin-left: 0; // 覆盖 element-ui 默认的按钮间距
}
}
@@ -2485,57 +2529,8 @@
margin-bottom: 12px
}
-.tab-content {
- padding: 10px;
-}
-
-.filter-bar {
- display: flex;
- align-items: center;
- margin-bottom: 15px;
- flex-wrap: wrap;
- gap: 8px; // 使用 gap 统一设置间距
-
- .filter-item {
- width: 160px; // 减小宽度
- }
-
- .date-picker {
- width: 240px; // 日期选择器宽度适当调整
- }
-
- .el-button {
- margin-left: 0; // 覆盖 element-ui 默认的按钮间距
- }
-}
-
.action-bar {
margin-bottom: 16px;
-}
-
-.el-tabs {
- :deep(.el-tabs__content) {
- overflow: visible;
- }
-}
-
-.tab-content {
- min-height: 200px;
-}
-
-.detail-form {
- :deep(.el-form-item) {
- margin-bottom: 10px;
- }
-
- :deep(.el-form-item__label) {
- color: #606266;
- font-weight: normal;
- }
-
- :deep(.el-form-item__content) {
- color: #303133;
- }
}
.el-dialog {
--
Gitblit v1.9.3