gubersail-platform-ui/src/views/lead/index.vue

<template>
    <basic-container>
        <avue-crud :option="option" :data="data" ref="crud" v-model="form" :page.sync="page"
            :permission="permissionList" :before-open="beforeOpen" :table-loading="loading"
            @row-update="rowUpdate" @row-save="rowSave" @search-change="searchChange" @search-reset="searchReset"
            @selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange"
            @refresh-change="refreshChange" @on-load="onLoad">
            <template slot="menuLeft">
                <el-button type="danger" size="small" plain icon="el-icon-delete" v-if="permission.order_lead_delete"
                    @click="handleDelete">
                    删除
                </el-button>
            </template>

            <template slot="menu" slot-scope="{row}">
                <el-button type="text" size="small" icon="el-icon-view" @click="handleView(row)"
                    v-if="permission.order_lead_view">
                    查看
                </el-button>
                <el-button type="text" size="small" icon="el-icon-edit" @click="handleEdit(row)"
                    v-if="permission.order_lead_edit">
                    编辑
                </el-button>
                <el-button type="text" size="small" icon="el-icon-document" @click="handleViewDetail(row)">
                    详细信息
                </el-button>
                <el-button type="text" size="small" icon="el-icon-delete" @click="handleRowDelete(row)"
                    v-if="permission.order_lead_delete">
                    删除
                </el-button>
            </template>

            <template slot-scope="{row}" slot="status">
                <el-tag :type="getStatusType(row.status)">
                    {{ getStatusText(row.status) }}
                </el-tag>
            </template>

            <template slot-scope="{row}" slot="priority">
                <el-tag :type="getPriorityType(row.priority)">
                    {{ getPriorityText(row.priority) }}
                </el-tag>
            </template>

            <template slot-scope="{row}" slot="endTime">
                <span :class="{ 'text-danger': isOverdue(row.endTime, row.status) }">
                    {{ row.endTime }}
                </span>
            </template>
        </avue-crud>

        <!-- 线索详细信息弹窗 -->
        <el-dialog
            title="线索详细信息管理"
            :visible.sync="detailDialogVisible"
            width="80%"
            :close-on-click-modal="false"
            :destroy-on-close="true"
            append-to-body
            custom-class="lead-detail-dialog">
            <div v-if="currentLead">
                <div class="lead-info-flex" style="margin-bottom: 20px;">
                    <div class="info-row">
                        <div class="info-item">
                            <span class="label">线索编码：</span>
                            <span class="value">{{ currentLead.leadCode }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">客户名称：</span>
                            <span class="value">{{ currentLead.customerName }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">联系人：</span>
                            <span class="value">{{ currentLead.contactName }}</span>
                        </div>
                    </div>
                    <div class="info-row title-row">
                        <div class="info-item full-width">
                            <span class="label">线索标题：</span>
                            <span class="value title-value">{{ currentLead.title }}</span>
                        </div>
                    </div>
                </div>
            </div>

            <avue-crud
                :option="detailOption"
                :data="detailData"
                ref="detailCrud"
                v-model="detailForm"
                :page.sync="detailPage"
                :permission="detailPermissionList"
                :before-open="detailBeforeOpen"
                :table-loading="detailLoading"
                @row-del="detailRowDel"
                @row-update="detailRowUpdate"
                @row-save="detailRowSave"
                @selection-change="detailSelectionChange"
                @current-change="detailCurrentChange"
                @size-change="detailSizeChange"
                @refresh-change="detailRefreshChange"
                @on-load="detailOnLoad">
                <template slot="menuLeft">
                    <el-button type="danger" size="small" plain icon="el-icon-delete"
                        v-if="detailPermissionList.delBtn"
                        @click="handleDetailDelete" :disabled="detailSelectionList.length === 0">
                        删除
                    </el-button>
                </template>
            </avue-crud>
        </el-dialog>
    </basic-container>
</template>

<script>
import leadIndexMixin from './mixins/leadIndex'

export default {
    name: 'Lead',
    mixins: [leadIndexMixin],
    watch: {
      detailDialogVisible(visible) {
        if (visible) {
          this.injectErrorStyle();
        } else {
          this.removeErrorStyle();
        }
      }
    },
    methods: {
      injectErrorStyle() {
        const styleId = 'lead-error-style';
        if (document.getElementById(styleId)) return;

        const style = document.createElement('style');
        style.id = styleId;
        style.textContent = `
          .el-form-item__error {
            display: block !important;
            position: static !important;
            margin-top: 4px !important;
            white-space: normal !important;
            color: #f56c6c !important;
          }
        `;
        document.head.appendChild(style);
      },
      removeErrorStyle() {
        const styleId = 'lead-error-style';
        const style = document.getElementById(styleId);
        if (style) {
          style.remove();
        }
      }
    }
}
</script>

<style lang="scss" scoped>
.text-danger {
    color: #f56c6c;
    font-weight: bold;
}

.lead-info-desc {
    margin-bottom: 20px;
}

.lead-info-flex {
    border: 1px solid #EBEEF5;
    border-radius: 4px;
    padding: 15px;
    background-color: #fff;

    .info-row {
        display: flex;
        margin-bottom: 10px;

        &:last-child {
            margin-bottom: 0;
        }

        &.title-row {
            margin-top: 5px;
        }
    }

    .info-item {
        flex: 1;
        padding: 0 10px;

        &.full-width {
            flex: 3;
            width: 100%;
        }

        .label {
            font-weight: bold;
            color: #606266;
            margin-right: 5px;
        }

        .value {
            color: #303133;

            &.title-value {
                font-size: 16px;
            }
        }
    }
}

// 表格中的优先级和状态样式
::v-deep .el-table {
    .el-tag {
        margin: 0;
    }
}

// 仅在本组件的弹层内，修正 Element UI 错误提示的定位与显示，确保可见
.el-form-item__error {
    display: block !important;
    position: static !important;
    white-space: normal !important;
    color: #f56c6c !important;
}
</style>