netFlowPlatform/src/views/openMarketBid/index.vue

<template>
    <div class="app-container">
        <!-- 标签页导航 -->
        <div class="tab-container">
            <el-tabs v-model="activeTab" type="card">
                <!-- <el-tab-pane label="未确认" name="unconfirmed"></el-tab-pane> -->
                <!-- <el-tab-pane label="已确认" name="confirmed"></el-tab-pane>
                <el-tab-pane label="挂网区" name="published"></el-tab-pane> -->
            </el-tabs>
        </div>

        <!-- 搜索条件区域 -->
        <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="noticeTitle">
                                    <el-input v-model="searchForm.noticeTitle" placeholder="请输入公告标题"
                                        clearable></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :xs="24" :sm="12" :md="8" :lg="6">
                                <el-form-item label="项目名称" prop="projectName">
                                    <el-input v-model="searchForm.projectName" placeholder="请输入项目名称"
                                        clearable></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :xs="24" :sm="12" :md="8" :lg="6">
                                <el-form-item label="是否相关" prop="isRelated">
                                    <el-select v-model="searchForm.isRelated" placeholder="请选择是否相关" clearable>
                                        <el-option v-for="item in isRelatedOptions" :key="item.value"
                                            :label="item.label" :value="item.value"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :xs="24" :sm="12" :md="8" :lg="6">
                                <el-form-item label="分公司" prop="branchCompany">
                                       <el-input v-model="searchForm.branchCompany" placeholder="请输入分公司"
                                        clearable></el-input>
                                </el-form-item>
                            </el-col>

                            <el-col :xs="24" :sm="12" :md="8" :lg="6">
                                <el-form-item label="分类" prop="category">
                                    <el-select v-model="searchForm.category" placeholder="请选择分类" clearable>
                                        <el-option v-for="item in categoryOptions" :key="item.value" :label="item.label"
                                            :value="item.value"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :xs="24" :sm="12" :md="8" :lg="6">
                                <el-form-item label="数据来源" prop="dataSource">
                                    <el-select v-model="searchForm.dataSource" placeholder="请选择数据来源" clearable>
                                        <el-option v-for="item in dataSourceOptions" :key="item.value"
                                            :label="item.label" :value="item.value"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :xs="24" :sm="12" :md="8" :lg="6">
                                <el-form-item label="公告类型" prop="announcementType">
                                    <el-select v-model="searchForm.announcementType" placeholder="请选择公告类型" clearable>
                                        <el-option v-for="item in noticeTypeOptions" :key="item.value"
                                            :label="item.label" :value="item.value"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :xs="24" :sm="12" :md="8" :lg="6">
                                <el-form-item label="客户群" prop="customerGroup">
                                    <el-select v-model="searchForm.customerGroup" placeholder="请选择客户群" clearable>
                                        <el-option v-for="item in isCopiedOptions" :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 :span="8">
                                <el-form-item label="发布时间" prop="publishDate">
                                    <el-date-picker v-model="searchForm.publishDate" type="daterange"
                                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                                        format="yyyy-MM-dd" value-format="yyyy-MM-dd" clearable></el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="开标日期" prop="bidOpeningDate">
                                    <el-date-picker v-model="searchForm.bidOpeningDate" type="daterange"
                                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                                        format="yyyy-MM-dd" value-format="yyyy-MM-dd" clearable></el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="入库时间" prop="storageDate">
                                    <el-date-picker v-model="searchForm.storageDate" type="daterange"
                                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                                        format="yyyy-MM-dd" value-format="yyyy-MM-dd" clearable></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>
        </div>

        <!-- 列表操作按钮区域 -->
        <div class="list-header">
            <!-- <div class="left-buttons">
                <el-button type="primary" @click="handleBatchConfirm">批量确认人选</el-button>
                <el-button @click="handleCancelCustomer">批量有关</el-button>
                <el-button @click="handleCancelSection">批量无关</el-button>
                <el-button type="primary" @click="handleAdd">新增</el-button>
            </div> -->
            <!-- <div class="right-buttons">
                <div class="export-section">
                    <span style="margin-right: 5px; font-size: 14px;">导出方式 </span>
                    <el-select v-model="exportScope" placeholder="本次范围" style="width: 120px; margin-right: 10px;">
                        <el-option v-for="item in exportScopeOptions" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                    <el-button type="primary" @click="handleGenerateTask">审批导出</el-button>
                </div>
                <el-button type="primary" @click="handleAddStandardFormat">+ 审批导出周报</el-button>
            </div> -->
        </div>

        <!-- 列表区域 -->
        <div class="list-container">
            <el-table :data="noticeList" header-align="center" style="width: 100%" stripe v-loading="tableLoading"
                border>
                <el-table-column prop="announcementType" label="公告类型" fixed="left" min-width="100"
                    align="center"></el-table-column>
                <el-table-column prop="announcementTitle" label="公告标题" fixed="left" min-width="200"
                    align="center"></el-table-column>
                <el-table-column prop="projectCode" label="项目编号" min-width="150" align="center"></el-table-column>
                <el-table-column prop="isRelevant" label="是否相关" min-width="80" align="center">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.isRelevant === 1" type="success">是</el-tag>
                        <el-tag v-else-if="scope.row.isRelevant === 0" type="info">否</el-tag>
                        <el-tag v-else-if="scope.row.isRelevant === 2" type="warning">重复</el-tag>
                        <el-tag v-else type="info">否</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="purchaseUnit" label="采购单位" min-width="150" align="center"></el-table-column>
                <el-table-column prop="finalUser" label="最终使用客户" min-width="150" align="center"></el-table-column>
                <el-table-column prop="naturalCustomerId" label="对应自然客户ID" min-width="150"
                    align="center"></el-table-column>
                <el-table-column prop="customerGroup" label="客户群" min-width="100" align="center"></el-table-column>
                <el-table-column prop="category" label="分类" min-width="80" align="center"></el-table-column>
                <el-table-column prop="projectName" label="项目名称" min-width="120" align="center"></el-table-column>
                <el-table-column prop="tenderAgent" label="招标代理" min-width="120" align="center"></el-table-column>
                <el-table-column prop="tenderAgentPhone" label="代理联系电话" min-width="120"
                    align="center"></el-table-column>
                <el-table-column prop="matchKeywords" label="信息匹配词" min-width="150" align="center"></el-table-column>
                <el-table-column prop="bidDocumentDeadline" label="购买标书截止时间" min-width="150"
                    align="center"></el-table-column>
                <el-table-column prop="industry" label="行业" min-width="100" align="center"></el-table-column>
                <el-table-column prop="branchCompany" label="分公司" min-width="100" align="center"></el-table-column>
                <el-table-column prop="businessCategory" label="业务类型" min-width="100" align="center"></el-table-column>
                <el-table-column prop="businessDemand" label="业务需求" min-width="120" align="center"></el-table-column>
                <el-table-column prop="budget" label="预算(万元)" min-width="100" align="center"></el-table-column>
                <el-table-column prop="bidOpeningDate" label="开标日期" min-width="120" align="center"></el-table-column>
                <el-table-column prop="announcementUrl" label="公告地址" min-width="200" align="center"></el-table-column>
                <!-- <el-table-column prop="jianyuUrl" label="剑鱼地址" min-width="200" align="center"></el-table-column> -->
                <el-table-column prop="tenderInfoPublishTime" label="招标信息发布时间" min-width="150"
                    align="center"></el-table-column>
                <el-table-column prop="publishTime" label="发布时间" min-width="120" align="center"></el-table-column>
                <el-table-column label="操作" min-width="100" fixed="right" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button type="text" @click="handleCommand(`detail`, scope.row)">详情</el-button>
                        <!-- <el-dropdown @command="(command) => handleCommand(command, scope.row)"
                            class="avatar-container right-menu-item hover-effect" trigger="click">
                            <div class="avatar-wrapper">
                                <el-button type="text">更多</el-button>
                            </div>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item command="detail">
                                        <span>详情</span>
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown> -->
                    </template>
                </el-table-column>

            </el-table>

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

        <!-- 详情组件 -->
        <OpenMarketBidDetails :dialog-visible.sync="dialogVisible" :form-data="currentData" />
        <OpenMarketBidEdit :dialog-visible.sync="editDialogVisible" :form-data="editFormData" />
    </div>
</template>

<script>
// 组件引入详情
import OpenMarketBidDetails from './details.vue'
import OpenMarketBidEdit from './edit.vue'
import { getFreeMarketList, getFreeMarketDetail } from '@/api/newApi/openMarketBid'
export default {
    components: {
        OpenMarketBidDetails,
        OpenMarketBidEdit
    },
    data() {
        return {
            // 活动标签页
            activeTab: 'unconfirmed',
            // 搜索表单数据
            searchForm: {
                noticeTitle: '',
                projectName: '',
                isRelated: '',
                branchCompany: '',
                category: '',
                dataSource: '',
                announcementType: '',
                customerGroup: '',
                publishDate: '',
                bidOpeningDate: '',
                storageDate: ''
            },
            // 下拉选择项数据
            isRelatedOptions: [
                { label: '是', value: '1' },
                { label: '否', value: '0' },
                { label: '重复', value: '2' }
            ],
            branchCompanyOptions: [
                { label: '天津分公司', value: '天津分公司' },
                { label: '北京分公司', value: '北京分公司' },
                { label: '湖南分公司', value: '湖南分公司' }
            ],
            categoryOptions: [
                { label: 'B', value: 'B' },
                { label: 'G', value: 'G' }
            ],
            dataSourceOptions: [
                { label: '剑鱼', value: '剑鱼' },
                { label: '千里马', value: '千里马' }
            ],
            noticeTypeOptions: [
                { label: '单一', value: '单一' },
                { label: '拟建', value: '拟建' },
                { label: '预告', value: '预告' },
                { label: '预审结果', value: '预审结果' },
                { label: '采购意向', value: '采购意向' },
                { label: '论证意见', value: '论证意见' },
                { label: '需求公示', value: '需求公示' },
            ],
            isCopiedOptions: [
                { label: '要客', value: '要客' },
                { label: '非要客', value: '非要客' }
            ],
            exportScopeOptions: [
                { label: '全部数据', value: 'all' },
                { label: '本次查询', value: 'current' }
            ],
            // 搜索加载状态
            searchLoading: false,
            // 表格加载状态
            tableLoading: false,
            // 公告列表数据
            noticeList: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10
            },
            // 总条数
            total: 6,
            // 搜索区域展开状态
            searchExpanded: true,
            // 导出方式
            exportMethod: '',
            // 详情对话框可见性
            dialogVisible: false,
            // 当前选中的数据
            currentData: {},
            // 编辑对话框可见性
            editDialogVisible: false,
            // 编辑表单数据
            editFormData: {},
            // 导出范围
            exportScope: ''
        }
    },
    created() {
        this.getList();
    },
    methods: {
        // 搜索
        handleSearch() {
            this.queryParams.pageNum = 1;
            console.log('搜索条件:', this.searchForm);
            this.searchLoading = true;
            this.getList();
            this.searchLoading = false;
        },
        // 重置
        handleReset() {
            this.searchForm = {
                noticeTitle: '',
                projectName: '',
                isRelated: '',
                branchCompany: '',
                category: '',
                dataSource: '',
                announcementType: '',
                customerGroup: '',
                publishDate: '',
                bidOpeningDate: '',
                storageDate: ''
            };
            this.queryParams.pageNum = 1;
            this.getList();
        },
        // 批量确认人选
        handleBatchConfirm() {
            console.log('批量确认人选');
        },
        // 批量有关
        handleCancelCustomer() {
            console.log('批量有关');
        },
        // 批量无关
        handleCancelSection() {
            console.log('批量无关');
        },
        // 新增
        handleAdd() {
            console.log('新增公告');
        },
        // 导出范本
        handleExportTemplate() {
            console.log('导出范本');
        },
        // 添加审批导出周报
        handleAddStandardFormat() {
            console.log('添加审批导出周报');
        },
        // 编辑
        handleEdit(row) {
            getFreeMarketDetail(row.id).then(response => {
                if (response.code === 200) {
                    this.editFormData = response.data || {};
                    this.editDialogVisible = true;
                } else {
                    this.$message.error(response.msg || '获取自由市场商机详情失败');
                }
            });
        },
        // 更多操作命令处理
        handleCommand(command, row) {
            switch (command) {
                case 'detail':
                    // 调用获取自由市场商机详情接口
                    getFreeMarketDetail(row.id).then(response => {
                        if (response.code === 200) {
                            this.currentData = response.data || {};
                            this.dialogVisible = true;
                        } else {
                            this.$message.error(response.msg || '获取自由市场商机详情失败');
                        }
                    });
                    break;
                default:
                    console.log('未知命令:', command);
            }
        },
        // 获取列表数据
        getList() {
            console.log('分页参数:', this.queryParams);
            console.log('搜索条件:', this.searchForm);
            this.tableLoading = true;
            
            // 构建请求参数
            const requestParams = {
                ...this.queryParams,
                // 基本搜索条件
                announcementTitle: this.searchForm.noticeTitle,
                projectName: this.searchForm.projectName,
                isRelevant: this.searchForm.isRelated,
                branchCompany: this.searchForm.branchCompany,
                category: this.searchForm.category,
                dataSource: this.searchForm.dataSource,
                customerGroup: this.searchForm.customerGroup,
                announcementType: this.searchForm.announcementType,
                
                // 日期范围条件
                publishTimeStart: this.searchForm.publishDate ? this.searchForm.publishDate[0] : '',
                publishTimeEnd: this.searchForm.publishDate ? this.searchForm.publishDate[1] : '',
                bidOpeningDateStart: this.searchForm.bidOpeningDate ? this.searchForm.bidOpeningDate[0] : '',
                bidOpeningDateEnd: this.searchForm.bidOpeningDate ? this.searchForm.bidOpeningDate[1] : '',
                createTimeStart: this.searchForm.storageDate ? this.searchForm.storageDate[0] : '',
                createTimeEnd: this.searchForm.storageDate ? this.searchForm.storageDate[1] : ''
            };
            
            /**
             * @description: 获取公开市场列表
             * @param {*}
             * @return {*}
             */
            getFreeMarketList(requestParams).then(response => {
                if (response.code === 200) {
                    this.noticeList = response.rows || [];
                    this.total = response.total || 0;
                } else {
                    this.$message.error(response.msg || '获取公开市场列表失败');
                }
            }).finally(() => {
                this.tableLoading = false;
            });
        },
        // 审批导出
        handleGenerateTask() {
            console.log('审批导出', { exportMethod: this.exportMethod, exportScope: this.exportScope });
        }
    }
}
</script>

<style scoped>
.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;
}

/* 统一搜索表单中输入控件的宽度 */
.search-form .el-input,
.search-form .el-select {
    width: 100%;
}

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

.list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.tab-container {
    margin-bottom: 20px;
}

.left-buttons {
    display: flex;
    gap: 10px;
}

.right-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
}

.export-section {
    display: flex;
    align-items: center;
    padding: 5px 10px;
}
</style>