netFlowPlatform/src/views/bizoppmanage/index.vue

<template>
  <div class="app-container">
    <!-- 搜索条件区域 -->
    <div class="search-container">
      <el-collapse-transition>
        <div v-show="searchExpanded">
          <el-form :model="searchForm" class="search-form" label-width="100px">
            <el-row :gutter="20">
              <!-- 第一行：基本信息 -->
              <el-col :xs="24" :sm="12" :md="8" :lg="6">
                <el-form-item label="商机名称" prop="opportunityName">
                  <el-input v-model="searchForm.opportunityName" placeholder="请输入商机名称" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6">
                <el-form-item label="商机编号" prop="opportunityCode">
                  <el-input v-model="searchForm.opportunityCode" placeholder="请输入商机编号" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6">
                <el-form-item label="商机单位" prop="opportunityUnit">
                  <el-input v-model="searchForm.opportunityUnit" placeholder="请输入商机单位" clearable></el-input>
                </el-form-item>
              </el-col>
              <!-- <el-col :xs="24" :sm="12" :md="8" :lg="6">
                <el-form-item label="指标标签" prop="indicatorTag">
                  <el-input v-model="searchForm.indicatorTag" placeholder="请输入指标标签" clearable></el-input>
                </el-form-item>
              </el-col> -->

              <!-- 第二行：客户与负责人信息 -->
              <el-col :xs="24" :sm="12" :md="8" :lg="6">
                <el-form-item label="自然客户名称" prop="naturalCustomerName">
                  <el-input v-model="searchForm.naturalCustomerName" placeholder="请输入自然客户名称" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6">
                <el-form-item label="商机归属人" prop="opportunityOwner">
                  <el-input v-model="searchForm.opportunityOwner" placeholder="请输入商机归属人" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6">
                <el-form-item label="支撑负责人" prop="supportPerson">
                  <el-input v-model="searchForm.supportPerson" placeholder="请输入支撑负责人" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6">
                <el-form-item label="支撑单位" prop="supportUnit">
                  <el-input v-model="searchForm.supportUnit" placeholder="请输入支撑单位" clearable></el-input>
                </el-form-item>
              </el-col>

              <!-- 第三行：合同与项目信息 -->
              <!-- <el-col :xs="24" :sm="12" :md="8" :lg="6">
                <el-form-item label="合同编号" prop="contractCode">
                  <el-input v-model="searchForm.contractCode" placeholder="请输入合同编号" clearable></el-input>
                </el-form-item>
              </el-col> -->
              <!-- <el-col :xs="24" :sm="12" :md="8" :lg="6">
                <el-form-item label="项目编号" prop="projectCode">
                  <el-input v-model="searchForm.projectCode" placeholder="请输入项目编号" clearable></el-input>
                </el-form-item>
              </el-col> -->
              <el-col :xs="24" :sm="12" :md="8" :lg="6">
                <el-form-item label="商机阶段" prop="opportunityStage">
                  <el-select v-model="searchForm.opportunityStage" placeholder="请选择商机阶段" clearable>
                    <el-option v-for="item in opportunityStageOptions" :key="item.value" :label="item.label"
                      :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 日期选择区域 -->
            <el-row :gutter="20" class="date-row">
              <!-- <el-col :xs="24" :sm="12" :md="12" :lg="8">
                <el-form-item label="立项时间" prop="approvalDate" label-position="top">
                  <el-date-picker v-model="searchForm.approvalDate" type="daterange" range-separator="至"
                    start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                    clearable style="width: 100%"></el-date-picker>
                </el-form-item>
              </el-col> -->
              <el-col :xs="24" :sm="12" :md="12" :lg="8">
                <el-form-item label="预计签约时间" prop="estimatedSignDate" label-position="top">
                  <el-date-picker v-model="searchForm.estimatedSignDate" type="daterange" range-separator="至"
                    start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                    clearable style="width: 100%"></el-date-picker>
                </el-form-item>
              </el-col>
              <!-- <el-col :xs="24" :sm="12" :md="12" :lg="8">
                <el-form-item label="签约时间" prop="signDate" label-position="top">
                  <el-date-picker v-model="searchForm.signDate" type="daterange" range-separator="至"
                    start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                    clearable style="width: 100%"></el-date-picker>
                </el-form-item>
              </el-col> -->
            </el-row>

            <!-- 操作按钮区域 -->
            <el-row>
              <el-col :span="24" class="form-actions">
                <el-form-item>
                  <el-button type="primary" @click="handleSearch" :loading="searchLoading">搜索</el-button>
                  <el-button @click="handleReset">重置</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-collapse-transition>
      <!-- <el-button type="text" @click="toggleSearch" class="toggle-btn">
        {{ searchExpanded ? '收起搜索 ^' : '展开搜索 v' }}
      </el-button> -->
    </div>

    <!-- 商机列表区域 -->
    <div class="list-container">
      <!-- <div class="list-header">
        <el-button type="primary" @click="handleAdd">新增商机</el-button>
      </div> -->
      <el-table :data="bizList" header-align="center" style="width: 100%" stripe v-loading="tableLoading" border>
        <el-table-column prop="opportunityName" label="商机名称" min-width="150" align="center"
          fixed="left"></el-table-column>
        <el-table-column prop="opportunityCode" label="商机编号" min-width="120" align="center"></el-table-column>
        <el-table-column prop="naturalCustomerName" label="自然客户名称" min-width="180" align="center"></el-table-column>
        <el-table-column prop="naturalCustomerId" label="自然客户ID" min-width="100" align="center"></el-table-column>
        <el-table-column prop="estimatedContractAmount" label="预计合同总金额(万元)" min-width="120"
          align="center"></el-table-column>
        <el-table-column prop="estimatedSignDate" label="预计签约时间" min-width="100" align="center">
          <template slot-scope="scope">
            {{ parseTime(scope.row.estimatedSignDate, '{y}-{m}-{d}') || '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="opportunityOwner" label="商机归属人" min-width="120" align="center"></el-table-column>
        <el-table-column prop="opportunityUnit" label="商机单位" min-width="120" align="center"></el-table-column>
        <el-table-column prop="supportPerson" label="支撑负责人" min-width="120" align="center"></el-table-column>
        <el-table-column prop="supportUnit" label="支撑单位" min-width="120" align="center"></el-table-column>
        <el-table-column label="操作" min-width="80" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="handleDetail(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </div>
  </div>
</template>

<script>
import { getOpportunityList } from '@/api/newApi/bizoppmanage'
import { get } from 'sortablejs';
export default {
  data() {
    return {
      // 搜索表单数据
      searchForm: {
        opportunityName: '',
        opportunityCode: '',
        opportunityUnit: '',
        estimatedSignDate: '',
        indicatorTag: '',
        naturalCustomerName: '',
        opportunityOwne: '',
        supportPerson: '',
        opportunityOwner: '',
        supportUnit: '',
        contractCode: '',
        projectCode: '',
        signDate: '',
        approvalDate: '',
        opportunityStage: ''
      },
      // 搜索加载状态
      searchLoading: false,
      // 表格加载状态
      tableLoading: false,
      // 商机列表数据
      bizList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      // 总条数
      total: 7,
      // 搜索区域展开状态
      searchExpanded: true,
      // 商机阶段选项
      opportunityStageOptions: [
        { value: '方案制定', label: '方案制定' },
        { value: '需求分析', label: '需求分析' },
        { value: '初步接触', label: '初步接触' },
        { value: '谈判中', label: '谈判中' },
        { value: '签约', label: '签约' },
        { value: '实施中', label: '实施中' }
      ]
    }
  },
  created() {
    this.getList();
  },
  methods: {
    // 搜索
    handleSearch() {
      this.queryParams.pageNum = 1;
      console.log('搜索条件:', this.searchForm);
      this.searchLoading = true;
      this.getList();
      this.searchLoading = false;
    },

    // 重置
    handleReset() {
      this.searchForm = {
        opportunityName: '',
        opportunityCode: '',
        opportunityUnit: '',
        estimatedSignDate: '',
        indicatorTag: '',
        naturalCustomerName: '',
        opportunityOwne: '',
        supportPerson: '',
        supportUnit: '',
        contractCode: '',
        projectCode: '',
        signDate: '',
        approvalDate: '',
        opportunityStage: ''
      };
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // 展开/收起搜索
    toggleSearch() {
      this.searchExpanded = !this.searchExpanded;
    },
    // 新增商机
    handleAdd() {
      console.log('新增商机');
      // 这里可以添加新增逻辑
    },
    // 查看详情
    handleDetail(row) {
      this.$router.push({
        path: '/bizoppmanage/bizoppdetails',
        query: {
          id: row.id
        }
      });
      console.log('查看详情:', row);
    },
    // 获取列表数据
    getList() {
      console.log('分页参数:', this.queryParams);
      console.log('搜索条件:', this.searchForm);
      this.tableLoading = true;

      // 构建请求参数，合并分页参数和筛选条件
      const requestParams = {
        ...this.queryParams,
        opportunityName: this.searchForm.opportunityName,
        opportunityCode: this.searchForm.opportunityCode,
        opportunityStage: this.searchForm.opportunityStage,
        opportunityOwner: this.searchForm.opportunityOwner,
        supportPerson: this.searchForm.supportPerson,
        supportUnit: this.searchForm.supportUnit,
        opportunityUnit: this.searchForm.opportunityUnit,
        naturalCustomerName: this.searchForm.naturalCustomerName
      };

      // 处理预计签约时间范围
      if (this.searchForm.estimatedSignDate && this.searchForm.estimatedSignDate.length === 2) {
        requestParams.signTimeStart = this.searchForm.estimatedSignDate[0];
        requestParams.signTimeEnd = this.searchForm.estimatedSignDate[1];
      }

      getOpportunityList(requestParams).then(res => {
        if (res.code === 200) {
          this.bizList = res.rows
          this.total = res.total;
          this.tableLoading = false;
        }
      })
    }
  }
}
</script>

<style scoped>
.bizopp-manage {
  padding: 20px;
  background-color: #f5f7fa;
}

.search-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.search-form {
  margin-bottom: 0;
}

.search-form .el-form-item {
  margin-bottom: 15px;
}

.date-row .el-form-item {
  margin-bottom: 20px;
}

.date-row .el-col {
  min-width: 280px;
}

.list-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.list-header {
  margin-bottom: 20px;
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}
</style>