drp-ui/src/views/business/bid/index/biding.vue

<template>
  <div class="bidingInfoMenu">
    <el-form ref="form" :model="form" :inline="true" label-width="130px" style="width: 100%">
      <el-row :gutter="24" style="height: 58px">
        <el-col :span="2">
          <el-select v-model="queryParams.selectFull" placeholder="请选择" clearable >
            <el-option
              v-for="item in selectOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              clearable>
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-input v-model="queryParams.input" placeholder="请输入内容" clearable></el-input>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" size="small" @click="btnQuery" icon="el-icon-search">搜索</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="info" size="small" icon="el-icon-refresh" @click="btnReset">重置</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="info" size="small" @click="isShow=!isShow">高级查询</el-button>
        </el-col>
      </el-row>
      <div v-show="isShow" >
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="项目所属城市">
              <el-select v-model="queryParams.city" placeholder="请选择" clearable>
                <el-option
                  v-for="item in cityOptions"
                  :key="item.value"
                  :label="item.value"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发布时间" >
              <el-date-picker
                v-model="queryParams.releasedTime"
                type="daterange"
                range-separator="-"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                clearable>
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="获取标书截至时间">
              <el-date-picker
                v-model="queryParams.getTime"
                type="date"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                clearable >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="投标截止日期" >
              <el-date-picker
                v-model="queryParams.endTime"
                type="date"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                clearable>
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="招标单位">
              <el-input v-model="queryParams.zhaoBiaoUnit" placeholder="请输入内容"  clearable ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="中标单位">
              <el-input v-model="queryParams.zhongBiaoUnit" placeholder="请输入内容" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="排除词" >
              <el-input v-model="queryParams.excludeWord" placeholder="排除词"  clearable ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="金额区间" >
              <el-input v-model="queryParams.minPrice" placeholder="最小值"  clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="1">
            <div style="text-align: center">-</div>
          </el-col>
          <el-col :span="6">
            <el-form-item style="padding-left: 70px">
              <el-input v-model="queryParams.maxPrice" placeholder="最大值"  clearable ></el-input>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row>
          <el-form-item label="招标方式">
            <el-checkbox-group v-model="queryParams.bidType">
              <el-checkbox v-for="item in bidType" :label="item.value" :key="item.label">{{ item.label }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="公告类型">
            <el-checkbox-group v-model="queryParams.noticeType">
              <el-checkbox v-for="item in noticeType" :label="item.value" :key="item.value">{{ item.label }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-row>
      </div>
    </el-form>
    <el-table
      :data="dataList.dataTable"
      style="width: 100%"
      :height="tableHeight"
      :header-cell-style="{'text-align':'center'}"
      @row-dblclick="handleRouter">
      <el-table-column prop="id" label="序号" width="80" align="center"></el-table-column>
      <el-table-column prop="infoTitle" label="标题" width="200" align="center">
<!--        <template slot-scope="scope">-->
<!--          <p  @click="handleRouter(scope.row.id)">-->
<!--            <span>{{ scope.row.infoTitle }}</span>-->
<!--          </p>-->
<!--        </template>-->
      </el-table-column>
      <el-table-column prop="xmNumber" label="项目编号" width="100" align="center"></el-table-column>
      <el-table-column prop="infoTitle" label="项目名称" width="200" align="center">
        <template slot-scope="scope">
          <p style="color: #00afff">
            {{getChangeType(scope.row.infoTitle)}}<!--调用getChangeType方法-->
          </p>
        </template>
      </el-table-column>
      <el-table-column prop="bidBudget" label="项目预算" width="80" align="center"></el-table-column>
      <el-table-column prop="bidWinnerAmount" label="中标金额" width="80" align="center"></el-table-column>
      <el-table-column prop="address" label="关键字匹配字段" width="120" align="center"></el-table-column>
      <el-table-column prop="infoPublishTime" label="发布时间" width="150" align="center"></el-table-column>
      <el-table-column prop="areaCity" label="项目所属城市" width="120" align="center"></el-table-column>
      <el-table-column prop="areaProvince" label="项目所属省份" width="120" align="center"></el-table-column>
      <el-table-column prop="infoTypeSegment" label="公告类型" width="80" align="center">
        <template slot-scope="scope">
          {{getChangeType(scope.row.infoTypeSegment)}}<!--调用getChangeType方法-->
        </template>
      </el-table-column>
      <el-table-column prop="bidingEndTime" label="获取标书截止日期" width="150" align="center"></el-table-column>
      <el-table-column prop="tenderEndTime" label="投标截止日期" width="150" align="center"></el-table-column>
      <el-table-column prop="biddingType" label="招标方式" width="80" align="center">
        <template slot-scope="scope">
          {{getChangeType2(scope.row.biddingType)}}<!--调用getChangeType方法-->
        </template>
      </el-table-column>
      <el-table-column prop="address" label="招标公司类型" width="100" align="center">
        <template scope="scope">
          <p v-if="scope.row.zhaoBiaoUnitTempDtos != null && scope.row.zhaoBiaoUnitTempDtos != ''">
            {{ scope.row.zhaoBiaoUnitTempDtos[0].zhaoBiaoUnitType }}
          </p>
        </template>
      </el-table-column>
      <el-table-column label="招标单位" width="200" align="center">
        <template scope="scope">
          <p v-if="scope.row.zhaoBiaoUnitTempDtos != null && scope.row.zhaoBiaoUnitTempDtos != ''">
            {{ scope.row.zhaoBiaoUnitTempDtos[0].zhaoBiaoUnit }}
          </p>
        </template>
      </el-table-column>
      <el-table-column prop="zhaoBiaoUnitTempDtos" label="招标单位联系人" width="200" align="center">
        <template scope="scope">
          <p v-if="scope.row.zhaoBiaoUnitTempDtos != null && scope.row.zhaoBiaoUnitTempDtos != ''">
            {{ scope.row.zhaoBiaoUnitTempDtos[0].zhaoRelationName }}
          </p>
        </template>
      </el-table-column>
      <el-table-column prop="zhongBiaoUnit" label="中标单位" width="200" align="center">
        <template scope="scope">
          <p v-if="scope.row.zhongBiaoUnitTempDtos != null && scope.row.zhongBiaoUnitTempDtos != ''">
            {{ scope.row.zhongBiaoUnitTempDtos[0].zhongBiaoUnit }}
          </p>
        </template>
      </el-table-column>
      <el-table-column prop="zhongRelationName" label="中标单位联系人" width="200" align="center">
        <template scope="scope">
          <p v-if="scope.row.zhongBiaoUnitTempDtos != null && scope.row.zhongBiaoUnitTempDtos != ''">
            {{ scope.row.zhongBiaoUnitTempDtos[0].zhongRelationName }}
          </p>
        </template>
      </el-table-column>
      <el-table-column prop="agentUnit" label="代理单位" width="200" align="center">
        <template scope="scope">
          <p v-if="scope.row.agentUnitTempDtos != null && scope.row.agentUnitTempDtos != ''">
            {{ scope.row.agentUnitTempDtos[0].agentUnit }}
          </p>
        </template>
      </el-table-column>
      <el-table-column prop="agentRelationName" label="代理采购单位联系人" width="200" align="center">
        <template scope="scope">
          <p v-if="scope.row.agentUnitTempDtos != null && scope.row.agentUnitTempDtos != ''">
            {{ scope.row.agentUnitTempDtos[0].agentRelationName }}
          </p>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="中标候选人" width="200" align="center"></el-table-column>
      <el-table-column prop="infoTitle" label="产品" width="200" align="center"></el-table-column>
      <el-table-column prop="infoNewFile" label="公告原文链接"  show-overflow-tooltip width="200" align="center" >
        <template scope="scope">
          <div v-for="(v,ind) in scope.row.filearr" :key="ind">
            <a :href="v.infoFileUrl" target="_blank" class="buttonText" style="color: #00afff">
              {{ v.infoFileName}}</a>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作" align="center">
        <el-button type="primary" size="small" @click="goToBasic">转商机</el-button>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page=form.pageNum
      :page-size=form.pageSize
      layout="total, sizes, prev, pager, next, jumper"
      :total=dataList.total
    >
    </el-pagination>
    <el-dialog :visible.sync="dialogVisible" v-if="dialogVisible" >

    </el-dialog>
  </div>

</template>
<script>
import {cityQuery, getBidingInfo} from "@/api/business/bid/biding";
import TemplateList from "@/views/business/spd/target/targetMk/templateDownload.vue";

export default {
  components: {TemplateList},

  created() {
    this.getCity()
    this.getTableHeight()
    this.btnQuery()
  },
  methods: {
    //计算table高度(动态设置table高度)
    getTableHeight() {
      let tableH = 120; //距离页面下方的高度
      let tableHeightDetil = window.innerHeight - tableH;
      if (tableHeightDetil <= 300) {
        this.tableHeight = 300;
      } else {
        this.tableHeight = window.innerHeight - tableH;
      }
    },
    goToBasic(){
      this.$router.push({path:'/business/spd/bo/basic'});
    },
    handleInputClear() {
      this.releasedStartTime=''
      this.releasedEndTime=''
      this.reset()
    },
    btnReset(){
    this.reset()
    this.btnQuery()
    },
    reset(){
     this.queryParams={
       pageNum: 1,
       pageSize: 10,
       releasedTime: [],
       endTime: '',
       getTime: '',
       releasedStartTime: '',
       releasedEndTime: '',
       zhaoBiaoUnit: '',
       zhongBiaoUnit: '',
       minPrice: '',
       maxPrice: '',
       input: '',
       selectFull: '1',
       city: '',
       bidType: [],
       noticeType: [],
       excludeWord:'',
     }
    },
    getCity(){
      cityQuery().then(res => {
        if (res.code == 200) {
          this.cityOptions=res.data
        }else {
          alert("获取失败")
        }
      })
    },
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.btnQuery();
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.btnQuery();
    },
    handleRouter(row,event,colum) {
      // this.dialogVisible=true
       let resolve = this.$router.push({path:'/business/bid/bidingInfo',query:{id:row.id}});
    },
    btnQuery() {
      if (!this.queryParams.releasedTime) {
        this.queryParams.releasedStartTime=''
        this.queryParams.releasedEndTime=''
      }
      this.getTime()
      getBidingInfo(this.queryParams).then(res => {
        if (res.code == 200) {
          this.dataList.total = res.total;
          this.dataList.dataTable = res.rows;
          this.dataList.dataTable.map((v) => {
            const ins = JSON.parse(v.infoNewFile)
            if (ins.length) {
              v.filearr = ins
              // v.infoFileName = ins[0].infoFileName
              // v.infoFileUrl = ins[0].infoFileUrl
            }
          })
        }
      })
    },
    getTime() {
      if (this.queryParams.releasedTime != "" && this.queryParams.releasedTime != null) {
        this.queryParams.releasedStartTime = this.queryParams.releasedTime[0]
        this.queryParams.releasedEndTime = this.queryParams.releasedTime[1]
      }
    },
    getChangeType(e) {
      for (var i = 0; i < this.noticeType.length; i++) {
        if (this.noticeType[i].value === e) {
          return this.noticeType[i].label;
        }
      }
    },
    getChangeType2(e) {
      for (var i = 0; i < this.bidType.length; i++) {
        if (this.bidType[i].value === e) { //dictValue，dictLabel保持和上面定义一致
          return this.bidType[i].label;
        }
      }
    },

  },
  data() {
    return {
      tableHeight:'', //表格高度
      dialogVisible:false,
      isShow:false,
      dataList: {
        total: null,
        dataTable: [],
      },
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        releasedTime: [],
        endTime: '',
        getTime: '',
        releasedStartTime: '',
        releasedEndTime: '',
        zhaoBiaoUnit: '',
        zhongBiaoUnit: '',
        minPrice: '',
        maxPrice: '',
        input: '',
        selectFull: '1',
        city: '',
        bidType: [],
        noticeType: [],
        excludeWord:'',
      },
      form: {},
      bidType: [
        {
          value: '0',
          label: '公开招标'
        },
        {
          value: '1',
          label: '邀请招标'
        },
        {
          value: '2',
          label: '竞争性谈判或竞争性磋商'
        },
        {
          value: '3',
          label: '单一来源采购'
        },
        {
          value: '4',
          label: '询价'
        },
        {
          value: '5',
          label: '国务院政府采购监督管理部门认定的其他采购方式'
        },
        {
          value: '6',
          label: '电子反拍'
        }
      ],
      noticeType: [
        {
          value: '2',
          label: '招标预告'
        },
        {
          value: '3',
          label: '招标公告'
        },
        {
          value: '10',
          label: '候选人公示'
        },
        {
          value: '11',
          label: '中标通知'
        },
        {
          value: '12',
          label: '合同公告'
        },
      ],
      selectOptions: [
        {
          value: '1',
          label: '综合'
        }, {
          value: '2',
          label: '标题'
        }, {
          value: '3',
          label: '产品'
        }, {
          value: '4',
          label: '招标公司'
        }, {
          value: '5',
          label: '中标公司'
        },
        {
          value: '6',
          label: '全文'
        }
      ],
      cityOptions: [],
    }
  }
}
</script>
<style lang="scss" scoped>
.bidingInfoMenu {
  margin: 10px;
}

</style>