drp-ui/src/views/business/bid/rulesDetail/detail.vue

<template>
<div>
  <el-card class="box-card" style="background-color: #f2f2f2">
    <el-form ref="form" :rules="rules" :model="form" label-width="130px">
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="编号" prop="xmNumber">
            <el-input v-model="form.xmNumber" :disabled="true" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="规则名称" prop="subscriptionRulesName">
            <el-input v-model="form.subscriptionRulesName" clearable></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="标讯推送人" prop="subscriptionPusher" >
            <el-select
            v-model="form.subscriptionPusher"
            clearable
            multiple
            filterable
            remote
            reserve-keyword
            placeholder="请输入关键词"
            :remote-method="getUser"
            style="width: 100%;">
            <el-option
              v-for="item in userList"
              :key="item.userName"
              :label="item.nickName"
              :value="item.userName">
              <span style="float: left">{{ item.nickName }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.userName }}</span>
            </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="项目所属省份" prop="areaProvince">
            <el-select v-model="form.areaProvince"  placeholder="请选择" style="width: 100%;" clearable>
              <el-option
                v-for="item in areaProvinceOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="项目所属城市" prop="areaCity">
            <el-select v-model="form.areaCity"  placeholder="请选择" style="width: 100%;" clearable>
              <el-option
                v-for="item in areaCityOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="公告类型" prop="infoTypeSegment">
            <el-select v-model="form.infoTypeSegment" multiple placeholder="请选择公告类型" style="width: 100%" clearable>
              <el-option
                v-for="item in noticeType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                clearable >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
<!--        <el-col :span="8">-->
<!--          <el-form-item label="获取标书截止日期">-->
<!--            <el-date-picker-->
<!--              type="datetime"-->
<!--              placeholder="选择日期"-->
<!--              value-format="yyyy-MM-dd HH:mm:ss"-->
<!--              v-model="form.bidingEndTime"-->
<!--              style="width: 100%;" >{{this.areaObj.bidingEndTime}}</el-date-picker>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :span="8">-->
<!--          <el-form-item label="投标截止日期">-->
<!--            <el-date-picker-->
<!--              type="datetime"-->
<!--              placeholder="选择日期"-->
<!--              value-format="yyyy-MM-dd HH:mm:ss"-->
<!--              v-model="form.tenderEndTime"-->
<!--              style="width: 100%;" >{{this.areaObj.tenderEndTime}}</el-date-picker>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
      </el-row>
      <el-row :gutter="24">
        <el-col :span="8">
<!--          <el-form-item label="招标公司类型">-->
<!--            <el-select v-model="form.zhaoBiaoUnitType" multiple placeholder="请选择活动区域" style="width: 100%;">-->
<!--              <el-option-->
<!--                v-for="item in zhaoBiaoUnitType"-->
<!--                :key="item.value"-->
<!--                :label="item.label"-->
<!--                :value="item.value">-->
<!--              </el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->
        </el-col>
        <el-col :span="8">
          <el-form-item label="招标方式" >
            <el-select v-model="form.biddingType" multiple placeholder="请选择活动区域" style="width: 100%;" clearable>
              <el-option
                v-for="item in bidType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                clearable>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="标讯关键词" prop="bidingKeyword" >
            <el-input v-model="form.bidingKeyword" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="规则天数" prop="dayNum">
<!--            <el-date-picker-->
<!--              v-model="infoPublishTime"-->
<!--              type="daterange"-->
<!--              value-format="yyyy-MM-dd HH:mm:ss"-->
<!--              range-separator="至"-->
<!--              start-placeholder="开始月份"-->
<!--              end-placeholder="结束月份"-->
<!--              >-->
<!--            {{this.areaObj.infoPublishTime}}</el-date-picker>-->
            <el-input v-model="form.dayNum" 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="form.excludeWord" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7" >
          <el-form-item label="企业名称匹配" prop="unitNameMatch">
            <el-select
              v-model="form.unitNameMatch"
              clearable
              filterable
              remote
              reserve-keyword
              placeholder="请输入关键词"
              :remote-method="getCustomer"
              style="width: 100%;">
              <el-option
                v-for="item in customerList"
                :key="item.name"
                :label="item.name"
                :value="item.name">
              </el-option>
            </el-select>
          </el-form-item>

        </el-col>
        <el-col :span="1">
          <el-button type="primary" @click="goCustomerPage">新增</el-button>
        </el-col>
        <el-col :span="8">
          <el-form-item label="招标单位" prop="zhaoBiaoUnit">
              <el-select
                v-model="form.zhaoBiaoUnit"
                clearable
                filterable
                remote
                reserve-keyword
                placeholder="请输入关键词"
                :remote-method="getUnit"
                style="width: 100%;">
                <el-option
                  v-for="item in zhaoBiaoUnitList"
                  :key="item.id"
                  :label="item.zhaoBiaoUnitCustomer"
                  :value="item.zhaoBiaoUnitCustomer">
                </el-option>
              </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item label="规则描述">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="form.ruleDescription">
          </el-input>
        </el-form-item>
      </el-row>
    </el-form>
    <el-row :gutter="24" type="flex" justify="end">
      <el-col :span="4">
        <el-button type="info" @click="cancel()" >取消</el-button>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="submitForm" >保存</el-button>
      </el-col>
    </el-row>
  </el-card>

</div>
</template>
<script>
import {
  cityQuery,
  insert,
  provinceQuery,
  queryById,
  updateById,
  getZhaoBiaoUnitList,
  getUserByNickName,
  getCustomerList, getUserByUserName,
} from "@/api/business/bid/subscriptionRules";
import loading from "vxe-table/packages/loading";

export default {
  computed: {
    loading() {
      return loading
    }
  },
  data() {
    return {
      userName:[],
      customerList:[],
      value:'',
      zhaoBiaoUnitList:[],
      userList:[],
      infoPublishTime:[],
      areaProvinceOptions:[],
      areaCityOptions:[],
      zhaoBiaoUnitType:[
        {
          value: '1',
          label: '医院'
        },
        {
          value: '2',
          label: '卫生所'
        },
      ],
      noticeType: [
        {
          value: '2',
          label: '招标预告'
        },
        {
          value: '3',
          label: '招标公告'
        },
        {
          value: '10',
          label: '候选人公示'
        },
        {
          value: '11',
          label: '中标通知'
        },
        {
          value: '12',
          label: '合同公告'
        },
      ],
      bidType: [
        {
          value: '0',
          label: '公开招标'
        },
        {
          value: '1',
          label: '邀请招标'
        },
        {
          value: '2',
          label: '竞争性谈判或竞争性磋商'
        },
        {
          value: '3',
          label: '单一来源采购'
        },
        {
          value: '4',
          label: '询价'
        },
        {
          value: '5',
          label: '国务院政府采购监督管理部门认定的其他采购方式'
        },
        {
          value: '6',
          label: '电子反拍'
        }
      ],
      areaObj:'',
      form: {
        id:undefined,
        xmNumber:'',
        keywordMatch:'',
        subscriptionRulesName:'',
        areaCity:'',
        areaProvince:'',
        infoTypeSegment:[],
        bidingEndTime:'',
        tenderEndTime:'',
        zhaoBiaoUnitType:[],
        biddingType:[],
        bidingKeyword:'',
        excludeWord:'',
        unitNameMatch:'',
        zhaoBiaoUnit:[],
        subscriptionPusher:'',
        nickNameList:'',
        ruleDescription:'',
        stateFlag:'',
        infoPublishStartTime:'',
        infoPublishEndTime:'',
        dayNum:30,
        zhaoBiaoUnitId:'',
        unitNameMatchCode:'',
      },
      rules: {
        infoTypeSegment: [
          { required: true, message: '请选择公告类型', trigger: 'change' }
        ],
        subscriptionRulesName: [
          { required: true, message: '请输入规则名称', trigger: 'blur' }
        ],
        areaCity: [
          { required: true, message: '请选择项目所属城市', trigger: 'change' }
        ],
        bidingKeyword: [
          { required: true, message: '请选择标讯关键词', trigger: 'blur' }
        ],
        unitNameMatch: [
          { required: true, message: '请选择企业名称', trigger: 'blur' }
        ],
        areaProvince: [
          { required: true, message: '请选择项目所属省份', trigger: 'change' }
        ],
        subscriptionPusher: [
          { required: true, message: '请选择标讯推送人', trigger: 'blur' }
        ],
        zhaoBiaoUnit: [
          { required: true, message: '请选择招标单位', trigger: 'blur' }
        ],
        dayNum: [
          { required: true, message: '请输入规则天数', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    //如果路由参数存在
    if (this.$route.query.id) {
      this.areaObj = this.$route.query.id
      this.getDetail(this.areaObj)
    }
    this.getRuleCity()
    this.getRuleProvince()
  },
  methods: {
    goCustomerPage(){
      this.$router.push({path:'/business/spd/customers/customers'});
    },
    getUnit(val){
      if(val != '' && val != null){
        getZhaoBiaoUnitList(val).then(res => {
          this.zhaoBiaoUnitList=res.data
        })
      }
    },
    getCustomer(val){
      if(val != '' && val != null){
        getCustomerList(val).then(res => {
          this.customerList=res.data
        })
      }
    },
    getUser(val){
      if(val !== '' ){
        getUserByNickName(val).then(res =>{
          this.userList=res.data
        })
      }
    },
    getUserByName(val){
      getUserByUserName(val).then(res =>{
        if(res.code=='200'){
          this.userList=res.data
        }
      })
    },
    getRuleCity(){
      cityQuery().then(res =>{
        if (res.code == 200) {
          this.areaCityOptions=res.data
        }else {
          alert("获取失败")
        }
      })
    },
    getRuleProvince(){
      provinceQuery().then(res =>{
        if (res.code == 200) {
          this.areaProvinceOptions=res.data
        }else {
          alert("获取失败")
        }
      })
    },
    getDetail(id){
      queryById(id).then(res =>{
        this.form=res.data
        if(this.form.infoTypeSegment.length>0){
          this.form.infoTypeSegment=this.form.infoTypeSegment.split(',')
        }
        if(this.form.biddingType.length>0){
          this.form.biddingType=this.form.biddingType.split(',')
        }
        this.form.zhaoBiaoUnit = this.form.zhaoBiaoUnit.split(',')
        this.userName=this.form.subscriptionPusher
        if(this.userName){
          this.getUserByName(this.userName)
        }
        this.form.subscriptionPusher = this.form.subscriptionPusher.split(',')
        this.form.unitNameMatch=this.form.unitNameMatch.split(',')
        if(this.form.infoPublishStartTime !=null && this.form.infoPublishEndTime != null){
          this.infoPublishTime=[this.form.infoPublishStartTime,this.form.infoPublishEndTime]
        }
      })

    },
    cancel(){
      this.form = {
        id:'',
        xmNumber:'',
        keywordMatch:'',
        subscriptionRulesName:'',
        areaCity:'',
        areaProvince:'',
        infoTypeSegment:[],
        bidingEndTime:'',
        tenderEndTime:'',
        zhaoBiaoUnitType:[],
        biddingType:[],
        bidingKeyword:'',
        excludeWord:'',
        unitNameMatch:'',
        zhaoBiaoUnit:'',
        subscriptionPusher:[],
        ruleDescription:'',
        stateFlag:'',
        infoPublishStartTime:'',
        infoPublishEndTime:'',
      }
      this.$router.go(-1)
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != undefined) {
            this.form.infoTypeSegment =  Array.isArray(this.form.infoTypeSegment)?this.form.infoTypeSegment.join(','):this.form.infoTypeSegment
            this.form.zhaoBiaoUnitType =  Array.isArray(this.form.zhaoBiaoUnitType)?this.form.zhaoBiaoUnitType.join(','):this.form.zhaoBiaoUnitType
            this.form.biddingType =  Array.isArray(this.form.biddingType)?this.form.biddingType.join(','):this.form.biddingType
            this.form.subscriptionPusher =  Array.isArray(this.form.subscriptionPusher)?this.form.subscriptionPusher.join(','):this.form.subscriptionPusher
            this.form.unitNameMatch =  Array.isArray(this.form.unitNameMatch)?this.form.unitNameMatch.join(','):this.form.unitNameMatch
            this.form.zhaoBiaoUnit=this.form.zhaoBiaoUnit.toString()
            this.zhaoBiaoUnitList.forEach(item =>{
              if(this.form.zhaoBiaoUnit === item.zhaoBiaoUnitCustomer){
                this.form.zhaoBiaoUnitId = item.id
              }
            })
            this.customerList.forEach(item =>{
              if(this.form.unitNameMatch === item.name){
                this.form.unitNameMatchCode = item.code
              }
            })
            updateById(this.form).then(res => {
              if(res.code == 200){
                this.$modal.msgSuccess("修改成功");
                this.$router.go(-1)
              }

            });
          } else {
            if (this.infoPublishTime != "" && this.infoPublishTime != null) {
              this.form.infoPublishStartTime = this.infoPublishTime[0]
              this.form.infoPublishEndTime = this.infoPublishTime[1]
            }
            this.form.infoTypeSegment =  Array.isArray(this.form.infoTypeSegment)?this.form.infoTypeSegment.join(','):this.form.infoTypeSegment
            this.form.zhaoBiaoUnitType =  Array.isArray(this.form.zhaoBiaoUnitType)?this.form.zhaoBiaoUnitType.join(','):this.form.zhaoBiaoUnitType
            this.form.biddingType =  Array.isArray(this.form.biddingType)?this.form.biddingType.join(','):this.form.biddingType
            this.form.subscriptionPusher =  Array.isArray(this.form.subscriptionPusher)?this.form.subscriptionPusher.join(','):this.form.subscriptionPusher
            this.form.unitNameMatch =  Array.isArray(this.form.unitNameMatch)?this.form.unitNameMatch.join(','):this.form.unitNameMatch
            this.form.zhaoBiaoUnit=this.form.zhaoBiaoUnit.toString()
            console.log("this.form",this.form)
            this.zhaoBiaoUnitList.forEach(item =>{
              if(this.form.zhaoBiaoUnit === item.zhaoBiaoUnitCustomer){
                this.form.zhaoBiaoUnitId = item.id
              }
            })
            this.customerList.forEach(item =>{
              if(this.form.unitNameMatch === item.name){
                this.form.unitNameMatchCode = item.code
              }
            })
            insert(this.form).then(res => {
              if(res.code == 200){
                this.$modal.msgSuccess("新增成功");
                this.$router.go(-1)
              }
            });

          }
        }
      });
    },
  },
}
</script>
<style>

</style>