yoe-crm-web/src/views/saleManage/opportunity/index.vue

<template>
  <div class="app-container">
    <el-card shadow="never" class="search-card">
      <el-form :model="queryParams" ref="queryRef" label-width="100px">
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="所属公司" prop="companyId">
              <el-select v-model="queryParams.companyId" placeholder="请选择" style="width: 100%" clearable>
                <el-option v-for="item in companyOptions" :key="item.companyCode || item.id"
                  :label="item.companyName" :value="item.companyCode || item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="项目名称" prop="projectName">
              <el-input v-model="queryParams.projectName" placeholder="请输入项目名称" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="客户名称" prop="customerName">
              <el-input v-model="queryParams.customerName" placeholder="请输入客户名称" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="业务负责人" prop="managerId">
              <el-select v-model="queryParams.managerId" placeholder="请选择" style="width: 100%" clearable>
                <el-option v-for="item in userOptions" :key="item.staffId || item.userId"
                  :label="(item.staffCode || item.userName ? '(' + (item.staffCode || item.userName) + ') ' : '') + (item.staffName || item.nickName)" :value="item.staffId || item.userId" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="部门" prop="deptId">
              <el-tree-select
                v-model="queryParams.deptId"
                :data="deptOptions"
                :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
                value-key="deptId"
                placeholder="所属部门"
                check-strictly
                style="width: 100%"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="产品支持" prop="productSupport">
              <el-select v-model="queryParams.productSupport" placeholder="请选择" style="width: 100%" clearable>
                <el-option v-for="item in userOptions" :key="item.staffId || item.userId"
                  :label="(item.staffCode || item.userName ? '(' + (item.staffCode || item.userName) + ') ' : '') + (item.staffName || item.nickName)" :value="String(item.staffId || item.userId)" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="项目状态" prop="projectStatus">
              <el-select v-model="queryParams.projectStatus" placeholder="请选择" style="width: 100%" clearable>
                <el-option v-for="item in saleStatusOptions" :key="item.value"
                  :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="成交结果" prop="result">
              <el-select v-model="queryParams.result" placeholder="请选择" style="width: 100%" clearable>
                <el-option v-for="item in dealResultOptions" :key="item.value"
                  :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
           <el-col :span="6">
            <el-form-item label="时间查询类型" prop="timeType">
              <el-select v-model="queryParams.timeType" placeholder="请选择" style="width: 100%" clearable>
                <el-option v-for="item in timeQueryTypeOptions" :key="item.value"
                  :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="时间范围" prop="dateRange">
              <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" style="width: 100%" value-format="YYYY-MM-DD" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label-width="0">
              <div class="search-btns">
                <el-button type="primary" icon="Search" @click="handleQuery" :loading="loading">搜索</el-button>
                <el-button icon="Refresh" @click="resetQuery" :disabled="loading">重置</el-button>
                <el-button type="primary" icon="Plus" @click="handleAdd" class="btn-new">新增</el-button>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-card shadow="never" class="table-card">
      <div class="filter-action-bar-inner">
        <!-- 页面标题 -->
        <div class="page-title">项目商机信息列表</div>
        
        <!-- 分类筛选点击项 -->
        <div class="tab-filters">
          <div class="tab-btn" :class="{ active: activeTab === 'managed' }" @click="handleTabClick('managed')">我负责的项目商机</div>
          <div class="tab-btn" :class="{ active: activeTab === 'participated' }" @click="handleTabClick('participated')">我参与的项目商机</div>
          <div class="tab-btn badge-btn" :class="{ active: activeTab === 'all' }" @click="handleTabClick('all')">
            全部项目商机
            <span class="badge" v-if="allCount > 0">{{ allCount > 99 ? '99+' : allCount }}</span>
          </div>
        </div>

        <!-- 金额汇总 -->
        <div class="amount-summary">
          金额总计<span class="red-num">{{ totalAmount ? totalAmount.toFixed(2) : '0.00' }}</span>(万)
        </div>

        <!-- 操作按钮（靠右） -->
        <div class="right-actions">
          <el-button type="info" size="small" icon="Delete" :disabled="multipleSelection.length === 0" @click="handleBatchDelete">批量删除</el-button>
          <el-button type="primary" size="small" icon="Switch" :disabled="multipleSelection.length === 0" @click="handleTransfer">转移给他人</el-button>
        </div>
      </div>

      <el-table ref="opportunityTable" v-loading="loading" :data="opportunityList" border class="standard-table" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="50" align="center" fixed />
        <el-table-column label="项目名称" align="center" prop="projectName" min-width="240" show-overflow-tooltip fixed />
        <el-table-column label="所属公司" align="center" prop="companyName" min-width="150" />
        <el-table-column label="客户名称" align="center" prop="customerName" min-width="200" show-overflow-tooltip />
        <el-table-column label="行业" align="center" width="100">
          <template #default="{ row }">
            <span>{{ findIndustryName(row.industry || row.profession) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="部门" align="center" prop="deptName" width="100" />
        <el-table-column label="金额(万)" align="center" prop="projectBudget" width="100">
          <template #default="{ row }">
            <span>{{ row.projectBudget != null ? Number(row.projectBudget).toFixed(2) : '' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="赢单率" align="center" prop="winRate" width="100">
          <template #default="{ row }">
            <span>{{ row.winRate != null ? `${row.winRate}%` : '' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="项目级别" align="center" prop="projectLevel" width="100">
          <template #default="{ row }">
            <span>{{ findProjectLevelName(row.projectLevel) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="业务负责人" align="center" prop="leader" min-width="100">
          <template #default="{ row }">
            <span>{{ findUserName(row.leader) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="产品支持" align="center" prop="productSupportName" min-width="100">
          <template #default="{ row }">
            <span>{{ row.productSupportName || findUserName(row.productSupport) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="createTime" width="110">
          <template #default="scope">
            <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="立项时间" align="center" prop="approvalDate" width="110">
          <template #default="scope">
            <span>{{ parseTime(scope.row.approvalDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="截止时间" align="center" prop="expectedCompletionTime" width="110">
          <template #default="scope">
            <span>{{ parseTime(scope.row.expectedCompletionTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="项目状态" align="center" prop="statusName" width="100">
          <template #default="{ row }">
            <span :class="getStatusClass(row.status)">
              {{ row.statusName }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="成交结果" align="center" prop="dealResult" width="100">
          <template #default="{ row }">
            <span :style="{ color: row.dealResult === '赢单' ? '#67c23a' : row.dealResult === '丢单' ? '#f56c6c' : '' }">
              {{ row.dealResult }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200" fixed="right">
          <template #default="scope">
            <el-button link type="info" @click="handleProgress(scope.row)">详情</el-button>
            <el-button link type="primary" @click="handleProgressBtn(scope.row)">进度</el-button>
            <el-button link type="info" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
    </el-card>

    <!-- 弹窗：转移他人 -->
    <el-dialog title="是否将选中的项目商机转移其他业务负责人？" v-model="transferVisible" width="550px" append-to-body>
      <el-form label-width="100px" style="padding: 20px 0;">
        <el-form-item label="新业务负责人：" required>
          <el-select v-model="transferOwner" placeholder="请选择" style="width: 100%">
            <el-option v-for="item in userOptions" :key="item.staffId || item.userId"
              :label="(item.staffCode || item.userName ? '(' + (item.staffCode || item.userName) + ') ' : '') + (item.staffName || item.nickName)" :value="String(item.staffId || item.userId)" />
          </el-select>
        </el-form-item>
        <el-form-item class="label-nowrap">
          <el-checkbox v-model="keepAsMember">保留【业务负责人】为销售团队成员</el-checkbox>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="confirmTransfer">确认</el-button>
          <el-button @click="transferVisible = false">取消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 新增弹窗 -->
    <OpportunityAdd 
      v-model="addVisible" 
      :company-options="companyOptions" 
      :user-options="userOptions" 
      :project-level-options="projectLevelOptions" 
      :procurement-method-options="procurementMethodOptions" 
      :info-source-options="infoSourceOptions" 
      :marketing-activity-options="marketingActivityOptions"
      @success="getList" 
    />

    <!-- 编辑弹窗 -->
    <OpportunityEdit 
      v-model="editVisible" 
      :id="currentId"
      :company-options="companyOptions" 
      :user-options="userOptions" 
      :project-level-options="projectLevelOptions" 
      :procurement-method-options="procurementMethodOptions" 
      :info-source-options="infoSourceOptions" 
      :marketing-activity-options="marketingActivityOptions"
      @success="getList" 
    />

    <!-- 详情抽屉 -->
    <OpportunityDetail 
      ref="detailDrawerRef" 
      v-model="detailVisible"
      :id="currentId"
      :saleStatusOptions="saleStatusOptions" 
      :projectLevelOptions="projectLevelOptions" 
      :infoSourceOptions="infoSourceOptions"
      :procurementMethodOptions="procurementMethodOptions"
      @edit="onDetailEdit" 
      @success="getList"
    />

    <!-- 查看进度抽屉 -->
    <el-drawer title="查看进度" v-model="progressVisible" size="500px" direction="rtl" destroy-on-close class="progress-drawer">
      <div class="progress-container">
        <div class="progress-input-area">
          <el-input
            v-model="progressContent"
            type="textarea"
            :rows="4"
            placeholder="请输入进度描述"
            maxlength="500"
            show-word-limit
            resize="none"
          />
          <div class="publish-btn-wrap">
            <el-button type="primary" icon="Plus" @click="submitProgress" :loading="progressSubmitting">发 布</el-button>
          </div>
        </div>

        <div class="progress-list-area" v-loading="progressLoading">
          <div v-for="(item, index) in progressList" :key="index" class="progress-item">
            <div class="item-header">
              <span class="user-name">{{ item.userName || item.createBy }}</span>
              <span class="time">{{ item.time || item.createTime }}</span>
            </div>
            <div class="item-content">{{ item.content || item.followUpCondition }}</div>
          </div>
          <div v-if="progressList.length === 0 && !progressLoading" class="empty-text">暂无进度数据</div>
        </div>

        <div class="progress-pagination">
          <el-pagination
            v-if="progressTotal > 0"
            v-model:current-page="progressPage"
            v-model:page-size="progressPageSize"
            layout="prev, pager, next"
            :total="progressTotal"
            @current-change="loadProgress"
            small
          />
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script setup name="ProjectOpportunity">
import { ref, reactive, onMounted, getCurrentInstance, toRefs } from 'vue';
import { useDebounceFn } from '@vueuse/core';
import { listOpportunity, delOpportunity, transferOpportunity } from '@/api/saleManage/opportunity/index';
import { listComStaff } from "@/api/system/comStaff/index";
import { listCompanyOption, listCustomerInfo } from "@/api/customer/customerInfo/index";
import { listDept } from "@/api/system/dept/index";
import { listIndustryCategory } from "@/api/customer/industryCategory";
import { listRecord, addRecord } from "@/api/visit/record";

import OpportunityAdd from './add.vue';
import OpportunityEdit from './edit.vue';
import OpportunityDetail from './detail.vue';

const detailDrawerRef = ref(null);

const proxy = getCurrentInstance().proxy;
const { parseTime } = proxy.useDict ? { parseTime: proxy.parseTime } : proxy;

/* ========== 状态 ========== */
const loading = ref(false);
const total = ref(0);
const opportunityList = ref([]);
const dateRange = ref([]);
const multipleSelection = ref([]);
const totalAmount = ref(0);
const allCount = ref(0);

/* ========== 下拉选项 ========== */
const companyOptions = ref([]);
const userOptions = ref([]);
const deptOptions = ref([]);
const industryOptions = ref([]);
const { 
  J0001: saleStatusOptions, 
  time_query_type: timeQueryTypeOptions, 
  L0001: projectLevelOptions, 
  X0001: procurementMethodOptions, 
  X0002: infoSourceOptions, 
  deal_result: dealResultOptions 
} = toRefs(reactive(proxy.useDict('J0001', 'time_query_type', 'L0001', 'X0001', 'X0002', 'deal_result')));
const marketingActivityOptions = ref([]);

/* ========== 弹窗状态 ========== */
const addVisible = ref(false);
const editVisible = ref(false);
const detailVisible = ref(false);
const currentId = ref(undefined);
const currentProjectNo = ref(undefined);
const transferVisible = ref(false);
const transferOwner = ref('');
const keepAsMember = ref(false);

/* ========== 进度弹窗状态 ========== */
const progressVisible = ref(false);
const progressLoading = ref(false);
const progressSubmitting = ref(false);
const progressContent = ref('');
const progressList = ref([]);
const progressTotal = ref(0);
const progressPage = ref(1);
const progressPageSize = ref(5);

/* ========== Tab切换状态 ========== */
const activeTab = ref('all'); 

const handleTabClick = (tab) => {
  activeTab.value = tab;
  handleQuery();
};

/* ========== 查询参数 ========== */
const queryParams = reactive({
  pageNum: 1, pageSize: 10,
  companyId: undefined, projectName: undefined, customerName: undefined,
  managerId: undefined, deptId: undefined, productSupport: undefined,
  projectStatus: undefined, result: undefined, timeType: undefined
});

/* ========== 列表查询 ========== */
const getList = async () => {
  loading.value = true;
  try {
    const params = proxy.addDateRange(
      { pageNum: queryParams.pageNum, pageSize: queryParams.pageSize,
        projectType: '销售商机', companyNo: queryParams.companyId,
        projectName: queryParams.projectName, customerName: queryParams.customerName,
        leader: queryParams.managerId, deptNo: queryParams.deptId,
        productSupport: queryParams.productSupport,
        status: queryParams.projectStatus,
        result: queryParams.result,
        dealResult: queryParams.result,
        timeType: queryParams.timeType,
        tabType: activeTab.value === 'list' ? undefined : activeTab.value
      },
      dateRange.value
    );
    const res = await listOpportunity(params);
    opportunityList.value = res.rows || [];
    total.value = res.total || 0;
    
    // 异步获取全部项目商机的总数用于红点显示
    try {
      const allRes = await listOpportunity({ 
        projectType: '销售商机', 
        tabType: 'all', 
        pageNum: 1, 
        pageSize: 1 
      });
      allCount.value = allRes.total || 0;
    } catch (e) { console.error('获取商机总数失败', e); }

    totalAmount.value = opportunityList.value.reduce((acc, cur) => acc + (Number(cur.projectBudget) || 0), 0);
  } catch (err) { console.error(err); }
  finally { loading.value = false; }
};

const handleQuery = useDebounceFn(() => { queryParams.pageNum = 1; getList(); }, 300);
const resetQuery = useDebounceFn(() => { dateRange.value = []; proxy.resetForm('queryRef'); handleQuery(); }, 300);
const handleSelectionChange = (selection) => { multipleSelection.value = selection; };

/* ========== 按钮操作 ========== */
const handleAdd = () => { addVisible.value = true; };
const handleUpdate = (row) => { currentId.value = row.id; editVisible.value = true; };
const onDetailEdit = (row) => { currentId.value = row.id; editVisible.value = true; };

/* ========== 转移 ========== */
const handleTransfer = () => {
  if (!multipleSelection.value.length) return proxy.$modal.msgWarning('请先选择项目');
  transferOwner.value = ''; keepAsMember.value = true; transferVisible.value = true;
};
const confirmTransfer = async () => {
  if (!transferOwner.value) return proxy.$modal.msgWarning('请选择新业务负责人');
  const ids = multipleSelection.value.map(item => item.id);
  const ownerUser = userOptions.value.find(u => u.staffId == transferOwner.value || u.userId == transferOwner.value);
  try {
    await transferOpportunity({ 
      ids, 
      leader: transferOwner.value, 
      leaderName: ownerUser?.staffName || ownerUser?.nickName || '',
      keepOldOwner: keepAsMember.value ? 1 : 0 
    });
    proxy.$modal.msgSuccess('转移成功'); 
    transferVisible.value = false; 
    getList();
  } catch (e) {}
};

/* ========== 详情 ========== */
const handleProgress = (row) => {
  if (detailDrawerRef.value) {
    detailDrawerRef.value.open(row);
  }
};

const handleProgressBtn = (row) => {
  currentId.value = row.id;
  currentProjectNo.value = row.projectNo || row.id;
  progressContent.value = '';
  progressPage.value = 1;
  progressVisible.value = true;
  loadProgress();
};

const loadProgress = async () => {
  if (!currentProjectNo.value) return;
  progressLoading.value = true;
  try {
    const res = await listRecord({
      objectNo: currentProjectNo.value,
      dataType: '1', // 对应项目商机
      pageNum: progressPage.value,
      pageSize: progressPageSize.value
    });
    progressList.value = res.rows || [];
    progressTotal.value = res.total || 0;
  } catch (e) {
    console.error('获取进度失败', e);
  } finally {
    progressLoading.value = false;
  }
};

const submitProgress = async () => {
  if (!progressContent.value.trim()) return proxy.$modal.msgWarning('请输入进度描述');
  progressSubmitting.value = true;
  try {
    await addRecord({
      objectNo: currentProjectNo.value,
      customerNo: currentProjectNo.value,
      dataType: '1',
      followUpCondition: progressContent.value,
      callDate: new Date().toISOString().split('T')[0],
      visitor: proxy.$store?.state?.user?.userId || '', // 这里可能需要更准确的获取方式，暂定
      callTypeCode: '1' // 默认为电话/普通记录
    });
    proxy.$modal.msgSuccess('发布成功');
    progressContent.value = '';
    progressPage.value = 1;
    loadProgress();
  } catch (e) {
    console.error('发布进度失败', e);
  } finally {
    progressSubmitting.value = false;
  }
};

/* ========== 删除 ========== */
const handleDelete = (row) =>
  proxy.$modal.confirm(`确认删除项目「${row.projectName}」吗？`).then(async () => {
    try { await delOpportunity(row.id); getList(); proxy.$modal.msgSuccess('删除成功'); } catch (e) {}
  }).catch(() => {});

const handleBatchDelete = () => {
  if (!multipleSelection.value.length) return proxy.$modal.msgWarning('请先选择要删除的项目');
  const ids = multipleSelection.value.map(i => i.id);
  proxy.$modal.confirm(`确认批量删除选中的 ${ids.length} 条项目商机吗？`).then(async () => {
    try { 
      await delOpportunity(ids); 
      getList(); 
      proxy.$modal.msgSuccess('批量删除成功'); 
    } catch (e) {}
  }).catch(() => {});
};

/* ========== 辅助方法 ========== */
const getSaleStatusLabel = (status) => {
  if (!saleStatusOptions.value || saleStatusOptions.value.length === 0) return status;
  const item = saleStatusOptions.value.find(i => String(i.value) === String(status));
  return item ? item.label : status;
};

const getStatusClass = (status) => {
  if (String(status) === '1') return 'status-tag status-success';
  if (String(status) === '0') return 'status-tag status-following';
  if (!saleStatusOptions.value || saleStatusOptions.value.length === 0) return 'status-tag status-following';
  const item = saleStatusOptions.value.find(i => String(i.value) === String(status));
  if (item && (item.listClass === 'success' || item.label === '结案')) return 'status-tag status-success';
  return 'status-tag status-following';
};

const findProjectLevelName = (id) => {
  if (!id) return '';
  return projectLevelOptions.value.find(i => String(i.value) === String(id))?.label || id;
};

/* ========== 加载选项列表 ========== */
function getCompanyList() { listCompanyOption().then(r => companyOptions.value = r.data); }
function getUserList() { listComStaff({ pageSize: 1000 }).then(r => userOptions.value = r.rows || r.data || []); }
function getDeptList() { listDept().then(r => deptOptions.value = proxy.handleTree(r.data, 'deptId')); }

const findIndustryName = (val) => {
  if (!val) return '';
  // 处理可能的多个 ID（以逗号分隔）
  const ids = String(val).split(',').filter(Boolean);
  if (ids.length > 1) {
    return ids.map(id => {
      return industryOptions.value.find(i => String(i.id) === String(id))?.industryCategoryName || id;
    }).join('、');
  }
  return industryOptions.value.find(i => String(i.id) === String(val))?.industryCategoryName || val;
};

const findUserName = (id) => {
  if (!id) return '';
  const user = userOptions.value.find(u => String(u.staffId || u.userId) === String(id));
  return user ? (user.staffName || user.nickName) : id;
};

function getIndustryList() { listIndustryCategory().then(r => industryOptions.value = r.data || r.rows || []); }

onMounted(() => {
  getList(); getCompanyList(); getUserList(); getDeptList();
  getIndustryList();
});
</script>

<style scoped lang="scss">
.app-container {
  padding: 20px;
  background-color: #f7f9fb;
  min-height: calc(100vh - 84px);

  /* 全局强制取消加粗 */
  :deep(*) {
    font-weight: 400 !important;
  }
}

.search-card {
  margin-bottom: 10px;
  border: none;
  background: #fff;
  border-radius: 8px;
  :deep(.el-form-item) { margin-bottom: 10px; }
  :deep(.el-form-item__label) { 
    white-space: nowrap;
    font-weight: normal !important; 
  }
}

.search-btns {
  display: flex; align-items: center; justify-content: flex-start; gap: 12px;

  .el-button { border-radius: 6px; height: 32px; padding: 8px 16px; }
}

.filter-action-bar-inner {
  display: flex;
  align-items: center;
  padding: 15px 0 20px 0;
  gap: 15px;
}

.page-title {
  font-size: 16px;
  color: #333;
  font-weight: normal;
}

.tab-filters {
  display: flex;
  gap: 10px;
}

.tab-btn {
  padding: 6px 15px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  color: #606266;
  cursor: pointer;
  transition: all 0.2s;
  background: #fff;
  font-weight: normal;
}
.tab-btn:hover {
  color: #409eff;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
}
.tab-btn.active {
  color: #409eff;
  border-color: #409eff;
  background-color: #ecf5ff;
}

.badge-btn {
  position: relative;
}
.badge-btn .badge {
  position: absolute;
  top: -8px;
  right: -12px;
  background: #f56c6c;
  color: #fff;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 10px;
  line-height: 1;
  transform: scale(0.85);
}

.amount-summary {
  font-size: 14px;
  color: #f56c6c; 
}
.amount-summary .red-num { font-size: 16px; font-weight: normal; margin: 0 4px; }

.right-actions {
  margin-left: auto;
  display: flex;
  gap: 10px;
}

.table-card { border: none; }

.standard-table {
  :deep(th.el-table__cell) { background-color: #f8fafc !important; color: #475569; font-weight: normal; }
  :deep(.el-table__cell) { font-weight: normal !important; }
}

.dialog-footer { display: flex; justify-content: center; gap: 20px; padding-bottom: 10px; }

.label-nowrap { :deep(.el-form-item__label) { white-space: nowrap !important; } }

:global(.el-select-dropdown__item) {
  color: #333 !important;
  &.selected,
  &.is-selected {
    color: #333 !important;
    font-weight: normal !important;
  }
}

/* 查看进度抽屉样式 */
.progress-drawer {
  :deep(.el-drawer__header) {
    border-bottom: 1px solid #f2f3f5;
    margin-bottom: 0;
    padding: 15px 20px;
    color: #1d2129;
    font-weight: 500;
  }
  :deep(.el-drawer__body) { padding: 0; }
  
  .progress-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 20px;
  }

  .progress-input-area {
    margin-bottom: 20px;
    :deep(.el-textarea__inner) {
      background-color: #fff;
      border-color: #e5e6eb;
      border-radius: 4px;
      padding: 10px 12px;
      font-size: 13px;
      &:focus { border-color: #409eff; }
    }
    .publish-btn-wrap {
      margin-top: 15px;
      display: flex;
      justify-content: flex-end;
    }
  }
  
  .progress-list-area {
    flex: 1;
    overflow-y: auto;
    &::-webkit-scrollbar { display: none; }
    -ms-overflow-style: none;
    scrollbar-width: none;

    .progress-item {
      margin-bottom: 20px;
      .item-header {
        display: flex;
        align-items: center;
        margin-bottom: 8px;
        .user-name { font-size: 14px; color: #333; margin-right: 15px; }
        .time { font-size: 14px; color: #333; }
      }
      .item-content {
        font-size: 14px;
        color: #333;
        line-height: 1.6;
      }
    }
    .empty-text { text-align: center; color: #999; padding: 40px 0; font-size: 13px; }
  }
  
  .progress-pagination {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
  }
}

/* 状态标签通用样式 */
.status-tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 18px;
  border: 1px solid transparent;
}

/* 跟进中 - 蓝色 */
.status-following {
  background-color: #eaf5ff;
  color: #1890ff;
  border-color: #badeff;
}

/* 结案/成功 - 绿色 */
.status-success {
  background-color: #e8ffea;
  color: #00b42a;
  border-color: #aff0b5;
}
</style>