bid-web/src/views/tender/index.vue

<template>
  <div class="app-container">

   <div class="head-container" style="margin: 10px 0 10px 0;">
      <!-- 搜索 -->
      <span style="fontSize:13px">标题</span>
      <el-input
        v-model="query.value"
        clearable
        placeholder="请输入标题"
        style="width: 200px;"
        size="small"
        class="filter-item"
        @keyup.enter.native="handleFind"
         @clear="handleFind"
      />
      <!-- <span style="fontSize:13px;marginLeft:20px">招标类型</span>
      <el-select v-model="query.tenderType" style="width: 200px;" @keyup.enter.native="handleFind" @clear="handleFind" size="small" clearable  value-key="areaId" filterable placeholder="请选择招标类型">
        <el-option
          v-for="item in tenderType"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select> -->

        <!-- <span style="fontSize:13px;marginLeft:20px">招标规则</span>
      <el-select v-model="query.tenderRule" style="width: 200px;" @keyup.enter.native="handleFind" @clear="handleFind" size="small" clearable  value-key="areaId" filterable placeholder="请选择招标规则">
        <el-option
          v-for="item in tenderRule"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select> -->

    <span style="fontSize:13px;marginLeft:20px">开始时间</span>
            <el-date-picker
              v-model="applyDateStart"
              size="mini"
              type="datetimerange"
              style="width: 400px;"
              range-separator="-"
              clearable
              value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="['00:00:00', '23:59:59']"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
             @change="onApplyDate"
             @clear="onApplyDate"
            />
      </div>
          <div style="float:right">
           <el-button class="filter-item" size="small" type="primary" icon="el-icon-search"  @click="handleFind">搜索</el-button>
      </div>
    <!--表格渲染-->
    <el-table v-loading="tableLoading" :data="data" style="width: 100%;">
      <el-table-column label="序号" fixed="left" width="60" align="center">
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>

      <el-table-column prop="tenderTitle" label="标题" :show-overflow-tooltip="true" width="250" align="center" />

      <el-table-column label="状态" align="center" width="100">
        <template slot-scope="scope">
          <el-tag effect="plain" v-if="scope.row.status ==1">进行中</el-tag>
          <el-tag effect="plain" v-if="scope.row.status ==2" type="info">已结束</el-tag>
          <el-tag effect="plain" v-if="scope.row.status ==3" type="danger">已作废</el-tag>
          <el-tag effect="plain" v-if="scope.row.status ==4" type="warning">未开始</el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="description" :show-overflow-tooltip="true" label="招标类型" width="100" align="center">
        <template slot-scope="scope"> 
          <el-tag v-if="scope.row.tenderType == 1"  >物流</el-tag>
          <el-tag v-if="scope.row.tenderType == 2" >原料</el-tag>
          <el-tag v-if="scope.row.tenderType == 3" >销售</el-tag>
          <el-tag v-if="scope.row.tenderType == 4" >加工承揽</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="description" :show-overflow-tooltip="true" label="招标规则" width="100" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.tenderRule == 1" type="success" effect="plain">价低者得</el-tag>
          <el-tag v-if="scope.row.tenderRule == 2" effect="plain" >价高者得</el-tag>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="description" :show-overflow-tooltip="true" label="是否作废" width="100" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isInvalid == 1"  >正常</el-tag>
          <el-tag v-if="scope.row.isInvalid == 2" type="danger" >已作废</el-tag>
        </template>
      </el-table-column> -->
      <!-- <el-table-column prop="fileUrl" label="附件" align="center" width="200">
        <template slot-scope="scope">
          <el-link :href="scope.row.fileUrl" type="primary" target="_target"><i class="el-icon-download"></i> 下载</el-link>
        </template>
      </el-table-column> -->
      <el-table-column prop="startTime" label="开始时间" align="center" width="160" />
      <el-table-column prop="endTime" label="截止时间" align="center" width="160" />
      <el-table-column prop="tenderRemark" label="备注"  :show-overflow-tooltip="true" align="center" />


      <el-table-column label="操作" width="250" align="center">
        <template slot-scope="scope">
          <el-button v-if="scope.row.tenderStatus == 1 && scope.row.status == null" slot="reference" type="text" icon="el-icon-edit" @click="handleAdd(scope.row)">投标</el-button>
          <el-button v-if="scope.row.tenderStatus == 1 && scope.row.status == 0" slot="reference" type="text" icon="el-icon-edit" @click="handleEdit(scope.row)">改标</el-button>
          <el-button  slot="reference" icon="el-icon-view" type="text" @click="handleView(scope.row)">投标详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页-->
    <div class="pagination">
      <el-pagination
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 投标详情 -->
      <!-- 详情 -->
    <div class="goodsNameCss">
      <!-- 物流 -->
          <ckTender ref="ckTender"></ckTender>
      <!-- 销售 -->
          <ckTender1 ref="ckTender1"></ckTender1>
        <!-- 原料 -->
          <ckTender2 ref="ckTender2"></ckTender2>
        <!-- 生产加工 -->
          <ckTender3 ref="ckTender3"></ckTender3>
    </div>

  </div>

</template>

<script>
import { getTableList, getQueryAdd, getQueryEdit, getQueryId } from '@/api/tender'
import { Notification, MessageBox } from 'element-ui'

import ckTender from "./tender/tender.vue"
import ckTender1 from "./tender1/tender.vue"
import ckTender2 from "./tender2/tender.vue"
import ckTender3 from "./tender3/tender.vue"

export default {
  components:{
    ckTender,
    ckTender1,
    ckTender2,
    ckTender3,
  },
  data() {
    const checkTel = (rule, value, callback) => {
      if (value == null) {
        callback(new Error('请选择附件'))
      } else {
        callback()
      }
    }
    return {
      form: {
      },
      data: [],
      active:0,
      BASE_API: process.env.BASE_API,
      tableLoading:false,
      dialog: false,
      loading: false,
      delLoading: false,
      viewDialog: false,
      isAdd: false,
      currentPage: 1,
      pageSize: 10,
      total: 0, // 总数量
      rules1:{
        departureStation:[
          { required: true, message: '始发车站不为空', trigger: 'blur' },
        ],
         destinationStation:[
          { required: true, message: '目的车站不为空', trigger: 'blur' },
        ],
         logisticsBiddingPrice:[
          { required: true, message: '投标价格不为空', trigger: 'blur' },
        ],
  
         phone:[
          { required: true, message: '联系电话不为空', trigger: 'blur' },
        ],
         transportMode:[
          { required: true, message: '运输方式不为空', trigger: 'blur' },
        ],
      },
      rules: {

        price: [
          { required: true, message: '报价金额不为空', trigger: 'blur' },
        ],
        appendix: [
          // { type:"array",required: true, message: '附件不为空', trigger: 'blur' },
          { validator: checkTel, trigger: 'blur' }
        ]
      },
      query: {
        type: '',
        value: '',
         tenderRule:"",
        tenderType:"",
        startTime:"",
        endTime:""
      },
      fileList: [],
      param: {
        current: 1,
        size: 10
      },
      total1: 0,
      Paramdata: [],
      applyDateStart:[],
      dialogTableData:[],
       tenderRule:[
        {id:1,name:"价低者得"},
        {id:2,name:"价高者得"},

      ],
      packingWay:[
        {id:1,name:"散粮"},
        {id:2,name:"袋装"},
        {id:3,name:"散装"},
        {id:4,name:"集装箱"},
      ],
      transportMode:[
        {id:1,name:"汽运"},
        {id:2,name:"火车运输"},
        {id:3,name:"船运"},
        {id:4,name:"汽运/火车运输/船运"},
        {id:5,name:"汽运/火车运输"},
        {id:6,name:"汽运/船运"},
      ],
       activeName: 'first',
       dialogTableVisible:false,
       goodsName:"",
       bidInfo:{}
    }
  },
  created() {
    this.getDictData()
  },
  methods: {
    // 投标详情 向父元素传递数据
    costPlannedAmountChange(val){
      console.log(val)
 
      this.dialogTableVisible = true
      setTimeout(() => {
        this.goodsName = val.goodsName
       this.$refs.ckDialog.priceData = val
      this.$refs.ckDialog.getTenantList()
        console.log(this.$refs.ckDialog)
      }, 300);
    },
    // 价格投标不能大于合计
    onlogistiicsPrice(val){
      console.log(val)
       if(val>this.form.transportUnitPrice){
         this.form.logisticsBiddingPrice = this.form.transportUnitPrice
         console.log("我是大于")
       }
       if(val.indexOf('.') !== -1 && val == '.'){
         this.form.logisticsBiddingPrice =0
       }
       if(val== "+" || val== "-"){
         this.form.logisticsBiddingPrice = 0
       }
       if(val<0){
         this.form.logisticsBiddingPrice = 0
       }
    },
    onApplyDate(){
      let startTime
      let endTime
            if(this.applyDateStart != null){
              this.query.startTime =this.applyDateStart[0]
              this.query.endTime = this.applyDateStart[1]
            }else{
              this.query.startTime =""
              this.query.endTime =""
            }

      this.handleFind()
    },
    next() {
      console.log(this.$refs.ckTable)
        if (this.active++ > 2) this.active = 0;
        this.dialogTableData = this.$refs.ckTable.SelectionList
      },
      handleSelectionChange(row){
        
      },
    // 获取详情
    getDictData: function() {
      this.loading = true
        const params = new URLSearchParams()
      params.append('current', this.currentPage)
      params.append('size', this.pageSize)
      params.append('tenderType', this.query.tenderType)
      params.append('tenderTitle', this.query.value)
      params.append('tenderRule', this.query.tenderRule)
      params.append('startTime',this.query.startTime )
      params.append('endTime', this.query.endTime)

      getTableList(params).then(res => {
          console.log(res)
        // this.data = res.data.data.records
        let data = res.data.data.records
        console.log(new Date().valueOf(),"当前时间")
        data.map((res)=>{
          // 开始时间
          let startTime = res.startTime
          // 投标结束时间
          let endTime = res.endTime

          const date = new Date(startTime)
          const modify = new Date(endTime)

          const start = date.valueOf()         //开始时间
          const end = modify.valueOf()        //投标结束时间
          const time = new Date().valueOf()   //当前时间
          console.log(start,"start")
          console.log(end,"end")
         if(res.isInvalid == 2){
             res.status = 3
            console.log("作废了")
          }else if(time < start){
            res.status = 4
            console.log("当前时间小于开始时间，未开始")
          }else if(time > start && time < end){
            res.status = 1
            console.log("当前时间大于开始时间并且小于结束时间，进行中")
          }else if(time > end){
            res.status = 2
            console.log("当前时间大于结束时间，已结束")
          }

          return res
        })
        this.data = data
        this.total = res.data.data.total
        this.loading = false
      })
    },

    // 搜索
    handleFind: function() {
      this.currentPage = 1
      this.getDictData()
    },

    // 文件移除的时候
    handleRemove(file, fileList) {
      this.form.voucherFile = ''
      console.log(file, fileList, this.fileList, '移出')
    },
    // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
    handleChange(file, fileList) {
      console.log(file, fileList, '上传')
      if (file.response) {
        console.log(file.response, 'file')
        if (file.response.code == '200') {
          this.form.voucherFile = file.response.data.filePath
        } else {
          Notification.error({
            title: file.response.msg,
            duration: 1000
          })
          this.fileList = []
        }
      }
    },
    // 点击文件列表中已上传的文件时的钩子
    handlePreview(file) {
      console.log(file, 'file1')
      // window.location.href = file.url
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个附件，本次选择了 ${files.length} 个文件`)
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    // 下载
    onLoad(row) {
      // const params = new URLSearchParams()
      // params.append('path', row)
      const a = document.createElement('a')
      // a.href= /bidding/load
      const url = window.location.origin + process.env.BASE_API + '/bidding/load?path=' + encodeURIComponent(row)
      a.href = url
      a.click()
    },

    // 字典名称提交动作
    doSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.isAdd) {
            // 新增字典
            console.log(this.form)
            this.loading = true
            getQueryAdd(this.form).then((res) => {
              if (res.data.code === 200) {
                this.$message({ message: '操作成功', type: 'success' })
              } else {
                this.$message({ message: res.data.msg, type: 'error' })
              }
              this.dialog = false
              this.loading = false
              this.getDictData()
              this.$refs['form'].resetFields()
            }).catch(err => {
              this.loading = false
            })
          } else {
            // 更新字典
            getQueryEdit(this.form).then((res) => {
              if (res.data.code === 200) {
                this.$message({ message: '操作成功', type: 'success' })
              } else {
                this.$message({ message: res.data.msg, type: 'error' })
              }
              this.dialog = false
              this.getDictData()
            })
          }
        }
      })
    },
    // 添加字典
    handleAdd: function(row) {
      this.dialog = true
      this.isAdd = true
      this.form = {}
      this.fileList = []
      this.form.tenderLogisticsId = row.logisticsBidId
      this.form.tenderParentId = this.param.tenderParentId
      this.form.quantity = row.goodsNumber
      this.form.goodsName = row.goodsName
      this.form.transportUnitPrice = row.transportUnitPrice
      if (this.$refs['form']) {
        this.$refs['form'].resetFields()
      }
    },
    // 编辑字典
    handleEdit: function(row) {
      if (this.$refs['form']) {
        this.$refs['form'].resetFields()
      }
      this.dialog = true
      this.isAdd = false
      this.form = row.bidding
      this.form.priceQuotes = row.priceQuotes
      if (this.form.appendix) {
        let name = this.form.appendix.split('bidding/')
        name = name.pop()
        // let name = data.appendix.replace(/(.*\/)*([^.]+).*/ig, "$2");
        this.fileList = [{ name: name, url: this.form.appendix }]
      }
    },
    handleClick(row,val){
      console.log(row,val)
      if(row.name == "second"){
       this.$refs.ckTable.tenderParentId = this.param.tenderParentId
        this.$refs.ckTable.getTenantList()
      }
    },
    handleView(row) {
      let tenderType = row.tenderType
      console.log(row.tenderType,"tenderType")
      let param =  {
        tenderParentId:row.tenderParentId,
          current: 1,
          size: 10
        }
      if(tenderType == 1){
        this.$refs.ckTender.viewDialog = true
         setTimeout(() => {
            this.$refs.ckTender.activeName="first"
            // this.$refs.ckTender.param.tenderParentId = row.tenderParentId
            this.$refs.ckTender.bidInfo = row
            this.$refs.ckTender.param = param
            // this.$refs.ckTender.param.current = 1
            this.$refs.ckTender.applyDateStart = []
            this.$refs.ckTender.getParam()
            console.log("物流")
      }, 300);
      }else if(tenderType == 2){
         this.$refs.ckTender2.viewDialog = true
         setTimeout(() => {
            this.$refs.ckTender2.activeName="first"
            // this.$refs.ckTender2.param.tenderParentId = row.tenderParentId
            this.$refs.ckTender2.bidInfo = row
            this.$refs.ckTender2.param = param
            // this.$refs.ckTender2.param.current = 1
            this.$refs.ckTender2.applyDateStart = []
            this.$refs.ckTender2.getParam()
         }, 300);
        console.log("原料")
      }else if(tenderType == 3){
        this.$refs.ckTender1.viewDialog = true
         setTimeout(() => {
            this.$refs.ckTender1.activeName="first"
            // this.$refs.ckTender1.param.tenderParentId = row.tenderParentId
            this.$refs.ckTender1.bidInfo = row
            this.$refs.ckTender1.param = param
            // this.$refs.ckTender1.param.current = 1
            this.$refs.ckTender1.applyDateStart = []
            this.$refs.ckTender1.getParam()
      }, 300);
        console.log("销售")
      }else if(tenderType == 4){
        this.$refs.ckTender3.viewDialog = true
         setTimeout(() => {
            this.$refs.ckTender3.activeName="first"
            // this.$refs.ckTender3.param.tenderParentId = row.tenderParentId
            this.$refs.ckTender3.bidInfo = row
            this.$refs.ckTender3.param = param
            // this.$refs.ckTender3.param.current = 1
            this.$refs.ckTender3.applyDateStart = []
            this.$refs.ckTender3.getParam()
      }, 300);
        console.log("加工承揽")
      }
    },
    getParam() {
      const data = this.param
      this.tableLoading = true
      getQueryId(data).then((res) => {
       console.log(res.data.data.records, '')
        let data = res.data.data.records
         data.map((res)=>{
          // 开始时间
          let startTime = res.startTime
          // 投标结束时间
          let endTime = res.endTime

          const date = new Date(startTime)
          const modify = new Date(endTime)

          const start = date.valueOf()         //开始时间
          const end = modify.valueOf()        //投标结束时间
          const time = new Date().valueOf()   //当前时间
          console.log(start,"start")
          console.log(end,"end")
         if(res.isInvalid == 2){
             res.status = 3
            console.log("作废了")
          }else if(time < start){
            res.status = 4
            console.log("当前时间小于开始时间，未开始")
          }else if(time > start && time < end){
            res.status = 1
            console.log("当前时间大于开始时间并且小于结束时间，进行中")
          }else if(time > end){
            res.status = 2
            console.log("当前时间大于结束时间，已结束")
          }

          return res
        })
        this.Paramdata = data
        this.tableLoading = false
        this.total1 = res.data.data.total
      })
    },

    // 换页
    handleCurrentChange: function(val) {
      this.currentPage = val
      this.getDictData()
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getDictData()
    },
    handleCurrentChangeParam(val) {
      this.param.current = val
      this.getParam()
    },
    handleSizeChangeParam(val) {
      this.param.size = val
      this.getParam()
    }
  }
}
</script>
<style scoped lang="scss">
/* 去掉上传附件时候的过度效果 */
  ::v-deep .el-upload-list__item{transition: none !important;}
  ::v-deep .el-textarea__inner{
  padding-bottom: 36px;
}
.btn_fixed{
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 15px 50px;
  width: 100%;
  text-align: right;
  background: #f5f5f5;

}
.ckTable{
        width: 100%;
        border: #eee;
        text-align: center;
        tr,td{
        border: 0.5px solid#dfe6ec;
        line-height: 23px;
        }
    }
.paginationParam{
  // position: fixed;
  // bottom: 50px;
  bottom: 0;
  left: 0;
  line-height: 80px;
  width: 100%;
  // left: 45%;
  // text-align: right;
  z-index: 999;
  background: #fff;
}
/deep/ .el-tabs__item{
  font-size: 16px !important;
  // padding: 35px  ;
}
.el-card {
  border: 0px solid #fff;
}
.clearfix {
    line-height: 20px;
    font-size: 18px;
    font-weight: 600;
    color: #409EFF;
}
/deep/.el-dialog.is-fullscreen {

    background-color: #f5f7f9;
}
.box-card{
  margin-bottom: 20px;
  .row-bg{
  padding: 15px 40px 0 40px;
  .flex_text{
    line-height: 50px;
    color: #8C8C8C;
    font-size: 14px;
    // border:1px solid red;
    // font-weight: 600;
  }
  .flex_name{
    font-size: 14px;
    padding-left: 25px;
    color: #575757;
    font-weight: 550;
  }
}
}
/deep/ .el-card__body{
  padding: 20px 0;
}
/deep/.el-tabs__nav-wrap::after {

    background-color: #dfe4ed00;  
}


</style>