feat:事件工单样式调整

shuishen

2025-06-27 07b12cc38419b27e43edabc250b9cf7ebd4e3879

feat:事件工单样式调整

 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 {